@charset "EUC-JP";

/* set */
:root {
--per1-color:#2EB04A;
--per2-color:#FA6767;

--per1-bgcolor:#F4FAF5;
--per2-bgcolor:#FEF9F9;
}

/* common */
.content_block{
border-bottom:2px dashed #ccc;
padding:0 15px 60px;
margin:0 0 60px;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
color:#000;
font-size: 16px;
line-height:150%;
}
.content_block:last-of-type{
border-bottom:none;
padding:0 15px 0;
}
.block_title{
font-size:28px;
font-weight: 800;
font-feature-settings:"palt";
letter-spacing:1px;
color:#666;
margin:60px 0;
text-align:center;
}
.block_title::before{
content:"";
display:block;
width:45px;
height:45px;
background:url(/img/campaign/referral/numtext_otf_jun.png) left top;
background-size:180px 45px;
margin:0 auto 4px;
}
.block_title01::before{
background-position:0 0;
}
.block_title02::before{
background-position:-45px 0;
}
.block_title03::before{
background-position:-90px  0;
}
.block_title04::before{
background-position:-135px  0;
}

.cv_button{
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;

display:flex;
justify-content:center;
}
.cv_button .text_button{
width:auto;
padding:6px 24px;
font-size:28px;
}
.cv_button .text_button:hover{
opacity:0.8;
}
.n_red{
color:#f00;
}

/* head */
.head{
display:flex;
flex-direction: column;
align-items:center;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-feature-settings:"palt";
letter-spacing:1px;
background:linear-gradient(#FFF7FC 70%, #FDFF66 70% );
padding:50px 0 0;
width: 100%;
}
.head .period{
font-size:14px;
margin:32px 0 0;
padding:5px 0;
background:#999;
width:100%;
color:#fff;
text-align:center;
}

/* flow */
.person_type{
display:flex;
width:100%;
gap:40px;
text-align:center;
margin:150px 40px 40px;
}
.person_type .type01{
border:8px solid var(--per1-color);
background:var(--per1-bgcolor);
border-radius:10px;
width:430px;
font-weight: 800;
padding-bottom:5px;
box-sizing: border-box;
}
.person_type .type01 .sub_title{
background:var(--per1-color);
padding:4px 0 10px;
font-size:20px;
color:#fff;
}

.person_type .type01 .sub_title::before{
content:"";
display:block;
width:110px;
height:110px;
background:url(/img/campaign/referral/icon_person1.png) no-repeat;
background-size:100%;
margin:-110px auto 0;
}

.person_type .type01 .img{
rotate:10deg;
}
.person_type .type02{
border:8px solid var(--per2-color);
background:var(--per2-bgcolor);
border-radius:10px;
width:430px;
font-weight: 800;
padding-bottom:5px;
box-sizing: border-box;
}
.person_type .type02 .sub_title{
background:var(--per2-color);
padding:4px 0 10px;
font-size:20px;
color:#fff;
}

.person_type .type02 .sub_title::before{
content:"";
display:block;
width:110px;
height:110px;
background:url(/img/campaign/referral/icon_person2.png) no-repeat;
background-size:100%;
margin:-110px auto 0;
}
.person_type .type02 .img{
rotate:-5deg;
}

.person_type .text{
padding-top:12px;
height:54px;
display:flex;
align-items:center;
justify-content:center;
}

.flow{
margin:0 40px;
}
.flow .sub_title{
display:inline;
margin:1em 0 .5em;
font-size:22px;
}
.flow li:not(:last-child){
margin:0 0 40px;
}
.flow .step01,
.flow .comp{
border:8px solid var(--per1-color);
background:var(--per1-bgcolor);
border-radius:10px;
display:flex;
flex-direction:column;
align-items:center;
padding:8px 16px;
}
.flow .step02,
.flow .step03{
border:8px solid var(--per2-color);
background:var(--per2-bgcolor);
border-radius:10px;
display:flex;
flex-direction:column;
align-items:center;
padding:8px 16px;
}

.flow .comp p{
margin:.5em 0;
}

.flow .arrow_pink,
.flow .arrow_green{
position:relative;
}
.flow .arrow_pink::after{
position:absolute;
bottom:-24%;
left:calc(40% - 15px);
content:"";
width:30px;
height:105px;
background:url("/img/campaign/referral/arrow_pink.png") no-repeat 0 0;
background-size:100% 90%;
z-index:2;
}
.flow .arrow_green::after{
position:absolute;
bottom:-24%;
right:calc(38% - 15px);
content:"";
width:30px;
height:105px;
background:url("/img/campaign/referral/arrow_green.png") no-repeat 0 0;
background-size:100% 90%;
z-index:2;
}

/*プレゼント内容の詳細 */

.block_sub_title{
font-weight: 800;
font-size:20px;
line-height:140%;
padding:12px 16px;
display:flex;
justify-content:center;
margin:0 0 30px;
font-feature-settings:"palt";
letter-spacing:1px;
}
.block_sub_title02_1,
.block_sub_title03_1{
color:#fff;
background:var(--per1-color);
position:relative;
}
.block_sub_title02_2,
.block_sub_title03_2{
color:#fff;
background:var(--per2-color);
position:relative;
margin-top:60px;
}
.block_sub_title02_1::after{
content:"";
position:absolute;
background:url("/img/campaign/referral/coin.png") no-repeat 0 0;
background-size:100%;
right:3%;
top:-10px;
width:116px;
height:126px;
}
.block_sub_title02_2::after{
content:"";
position:absolute;
background:url("/img/campaign/referral/coupon.png") no-repeat 0 0;
background-size:100%;
right:3%;
top:-10px;
width:170px;
height:140px;
rotate:-5deg;
}

.present {
margin: 0 40px;
}
.present dt{
margin:0 0 10px;
}
.present dd{
margin:0 0 30px 50px;
}
.present:last-child dd:last-child{
margin-bottom:0;
}
.present dd li{
text-indent:-1em;
margin-left:1em;
}

/* FAQ */

.faq_dl {
margin: 0 40px;
}
.faq_dl dt{
text-indent:-1.5em;
margin-left:1.5em;
margin-bottom:.5em;
}
.faq_dl dd{
text-indent:-1.5em;
margin-left:1.5em;
margin-bottom:1.5em;
}
.faq_dl:last-of-type{
margin-bottom:60px;
}

.faq_dl dt::first-letter{
color:#f00;
margin-right:.5em;
font-weight:800;
}
.faq_dl dd::first-letter{
color:#00f;
margin-right:.5em;
font-weight:800;
}

/*注意事項*/
.block_description{
margin: 0 40px 40px;
}
.campaign_terms{
margin: 0 40px;
}

.campaign_terms dt{
text-indent:-1em;
margin-left:1em;
margin-bottom:10px;
}
.campaign_terms  dd{
margin:0 0 30px 1em;
}
.campaign_terms  dd:last-child{
margin:0 0 0 1em;
}
.campaign_terms dd li{
text-indent:-1em;
margin-left:1em;
}