/* 横幅設定
--------------------------------*/
/* 横幅1500pxして中央(margin:auto) */
.width-1500px{ 
	width:95%;
	max-width:1500px;
	margin:0 auto;
}

/* 横幅1200pxして中央(margin:auto) */
.width-1200px{ 
	width:90%;
	max-width:1200px;
	margin:0 auto;
}

/* 余白関係
--------------------------------*/
/* 上「のみ」3rem margin */
.sec-wrap-m-t3{
	margin-top:3rem;
}

/* 上「のみ」5rem margin */
.sec-wrap-m-t5{
	margin-top:5rem;
}

/* 下「のみ」10rem margin */
.sec-wrap-m-t10{
	margin-top:10rem;
}

/* 強制改行(主にspanに使用)
--------------------------------*/
.pc-br{
	display:block;
}

.sp{
	display:none;
}

/* トップページタイトル関係
--------------------------------*/
.ft-ff80a5{
	color:#FF80A5;
}

.ft-4cd9bb{
	color:#4CD9BB;
}

.ft-bd{
	font-weight:700;
}

.ft-md{
	font-weight:500;
}

.marker-yellow {
	background: linear-gradient(transparent 60%, #ffed76 60%);
	font-weight: 700;
}

.c-page-title{
	width:620px;
	height:135px;
	margin:0 auto;
}

.c-page-title img{
	width:100%;
	height:auto;
}

.home-sub-title{
	position:relative;
	text-align: center;
	margin-bottom: 9rem;
}

.home-sub-title::before {
	content: "";
	width: 50px;
	height: 2px;
	background-color: #4CD9BB;
	display: block;
	letter-spacing: .05em;
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.home-sub-title span{
	font-size:1.8rem;
	font-weight:500;
	letter-spacing:.1em;
	color:#4CD9BB;
}

.home-sub-title h3{
	font-size:3.2rem;
	font-weight:500;
	letter-spacing:.1em;
	line-height: 1;
	margin-top: 0.5rem;
}

.home-button{
	max-width:290px;
	height:60px;
	background-color:#4CD9BB;
	border-radius:100px;
	width: 80%;
}

.home-button a{
	width:100%;
	height:60px;
	font-size:1.8rem;
	letter-spacing:.15em;
	font-weight:500;
	text-align:center;
	color:#fff;
	position:relative;
	display: block;
	line-height: 55px;
}

.home-button a::after{
	content:"";
	display: inline-block;
	background-size: cover;
	position:absolute;
	background-image: url(img/arrow-right-white.svg);
	width: 9px;
	height: 16px;
	right:20px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	bottom: -80px;
}

/* 子ページタイトル関係
--------------------------------------------*/
.page-title-container{
	width: 100%;
	margin:0 auto;
	position: relative;
	height: 380px;
	background-color: #000;
	background-size: cover;
	background-repeat: no-repeat;
	background-position-x: center;
	margin-top: 110px;
}

.page-title-container .page-title-box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
}

.page-title-container .page-title-box h1{
	font-size:3.6rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .1em;
}

.page-title-container .page-title-box .sub-title{
	font-size:2rem;
	letter-spacing: .05em;
	line-height: 1;
	margin-bottom: 1rem;
}

.bg-dot-container{
	padding:13rem 0;
	background-image: url(img/q&a-bg.jpg);
	background-position: top;
	background-repeat: repeat;
	overflow: hidden;
}

.page-container{
	background-color:#E1EFEF;
	padding:15rem 0;
}

.page-bg-white{
	width:90%;
	max-width:1200px;
	margin:0 auto;
	background-color:#fff;
	padding:8rem 9.5rem;
}

/* 報酬のしくみ(home,子ページ)
--------------------------------------------*/
.system-list li{
	padding: 9rem 9rem 6rem;
	border-radius: 15px;
	box-shadow: 0 0 7px -2px rgba(73,73,73,0.75);
	background-color: #fff;
	margin-bottom: 8rem;
}

.system-list li:last-child{
	margin-bottom: 0;
}

.system-list li h3{
	font-size:2.8rem;
	font-weight:700;
	color:#fff;
	text-align:center;
	position:relative;
	z-index:100;
	letter-spacing: .1em;
	margin: 0 auto 5.5rem;
	height: 71px;
}

.system-list li h3::after{
	content:"";
	background-image: url(img/frame-ribbon-02.svg);
	display:block;
	max-width:750px;
	width:70%;
	height:71px;
	position:relative;
	top:-58px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: -1;
}

.system-list li .system-txt {
	border-bottom:1px solid #86E1CD;
	padding-bottom: 4rem;
	margin-bottom: 4rem;
}

.system-list .party .system-ex{
	display:flex;
	justify-content:space-between;
	align-items: center;
	margin-bottom: 5rem;
}

.system-list .party .system-ex .example-title{
	font-size:2.5rem;
	letter-spacing:.1em;
	font-weight:500;
	text-align:center;
	line-height: 1.4;
	width: calc(100% - 500px);
	position:relative;
}

.system-list .party .system-ex .example-title::after{
	content:"";
	background-image: url(img/arrow-right-green-02.svg);
	width:59px;
	height:27px;
	position:absolute;
	right:-35px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.system-list .party .supplement{
	font-size:1.8rem;
	text-align:center;
	margin-bottom: 5rem;
	letter-spacing: .1em;
}

.system-list .party .system-ex .ft-4cd9bb{
	font-size:3.8rem;
}

.system-list .party .system-ex .system-ex-image{
	max-width:425px;
	width: 45%;
}

.system-list .party .system-ex .system-ex-image img{
	width:100%;
	height:auto;
}

.c-reward .system-list .twoshot h2::before{
	background-image: url(img/reward-title04-2.svg);
	top: -57px;
}

.system-list .twoshot .system-ex-image,
.system-list .twoway .system-ex-image{
	width:560px;
	margin: 0 auto 7.5rem;
}

.system-list .twoshot .system-ex-image img,
.system-list .twoway .system-ex-image img{
	width:100%;
	height:auto;
}

.system-list .twoway .system-txt p {
	text-align:left;
}

.system-list .twoway h2::before{
	background-image: url(img/reward-title04-3.svg);
	top: -56px;
}

.system-list li .system-pin{
	padding:2.5rem 1.5rem 1rem;
	text-align:center;
	position:relative;
	max-width: 650px;
	width: 70%;
	background-color: #D2F7F0;
	margin: 0 auto;
}

.system-list li .system-pin::after{
	content: "";
	background-image: url(img/pin.svg);
	display: inline-block;
	background-size: cover;
	width: 15px;
	height: 30px;
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.system-list li .system-pin p{
	line-height:1.6;
	letter-spacing:.1em;
	font-size: 1.8rem;
}

.system-list li .system-pin .ft-bd{
	font-size:2.2rem;
	padding-right: 1rem;
}

.system-list li .system-pin .hourlywage-box{
	background-color:#fff;
	padding:1.5rem 0;
	margin-top: 2.5rem;
}

.system-list li .system-pin .hourlywage-box .ft-md{
	font-size:2.5rem;
	letter-spacing: .2em;
	font-weight: 500;
}

.system-list li .system-pin .hourlywage-box .ft-4cd9bb{
	font-size:3.5rem;
	font-weight:700;
	padding: 0 0.2rem;
}

/* よくある質問
--------------------------------*/
.faq-box {
	overflow-x: hidden;
	margin: 0 auto;
}

.faq-box,
.faq-box::after,
.faq-box::before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.faq-box .faq-actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 2rem 0 0;
}

.faq-box .faq-actab input{
	position: absolute;
	opacity: 0;
}

.faq-box .faq-actab label {
	position: relative;
	display: block;
	padding: 2.5rem 3rem 2.5rem 7.5rem;
	cursor: pointer;
	background: #fff;
	letter-spacing: .1em;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
	border: 1px solid #4CD9BB;
}

.faq-box .faq-actab label::before {
	content: "Q";
	background-color: #4CD9BB;
	color: #fff;
	font-size: 3rem;
	width: 45px;
	height: 45px;
	text-align: center;
	display: block;
	line-height: 1.2;
	border-radius: 30px;
	position: absolute;
	top: 50%;
	left: 1.5%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.faq-box .faq-actab label:hover {
	transition: all 0.3s;
}

.faq-box .faq-actab label::after {
	position: absolute;
	right: 20px;
	content: "";
	background-image: url(img/icon-plus.svg);
	display: inline-block;
	width:20px;
	height:20px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.faq-box .faq-actab .actab-content {
	position: relative;
	overflow: hidden;
	max-height: 0;
	padding: 0 0 0 4.5rem;
	-webkit-transition: max-height 0.2s;
	        transition: max-height 0.2s;
}

.faq-box .faq-actab .actab-content::before {
	padding: 0;
	content: "A";
	background-color: #fff;
	color: #4CD9BB;
	font-size: 3rem;
	text-align: center;
	display: block;
	line-height: 1.2;
	border-radius: 30px;
	position: absolute;
	left: 1.5%;
	top: 0;
	margin-top: 1.5rem;
	width: 43px;
	height: 43px;
	border: 1px solid #4CD9BB;
}

.faq-box .faq-actab .actab-content-tax::before{
	top:6%;
}

.faq-box .faq-actab .actab-content p {
	padding: 2.5rem 4rem 2.5rem 3rem;
	letter-spacing: .1em;
	font-size: 1.6rem;
	line-height: 1.8;
}

.faq-box .faq-actab input:checked ~ .actab-content {
	max-height: 40em;
	background-color: #D2F7F0;
}

.faq-box .faq-actab input[type=checkbox]:checked + label::after {
	background-image: url(img/icon-minus.svg);
	width:20px;
	height:3px;
}

.faq-box .faq-actab .actab-content .supplement{
	padding: 1rem 0 0 3rem;
}
