@charset "UTF-8";

/*------------------------pg_campaign---------------------------*/
article{
background:var(--theme2);
}
article > section > .inner{
background:#fff;
}
article > section.campaignindex > .inner{
background:transparent;
}
.campaign .end{
padding:4rem 0 2rem;
}
@media screen and (max-width:767px){
  article > section{
  padding:2rem 0;
  }
}
@media screen and (min-width:768px){
  article > section{
  padding:4rem 0;
  }
}



/*------------------------pg_campaignindex---------------------------*/
.campaignindex .intro_box{
padding-bottom:6rem;
}
.campaignindex .pagename{
position:relative;
padding:2rem 0;
background:url(../img/campaign/ttl_bg.svg) no-repeat center center;
background-size:100% 3em;
color:#fff;
}
.campaignindex .pagename h2{
text-align:center;
font-weight:700;
font-size:120%;
color:#fff;
}
.campaignindex .intro_txt{
margin-top:2rem;
}
.campaignindex .campaign_list{
margin:2rem auto 0;
}
.campaignindex .campaign_list li{
border-radius:1rem;
overflow:hidden;
}
.campaignindex .campaign_box{
margin-top:4rem;
padding:2rem;
border-radius:2rem;
background:#fff;
/*border-top:4px #218fdc dotted;*/
}
.campaignindex .campaign_code:empty,
.campaignindex .campaign_info1:empty,
.campaignindex .campaign_info2:empty{
display:none;
}
.campaignindex .campaign_img,
.campaignindex .campaign_info1,
.campaignindex .campaign_info2{
padding:1rem 0;
}
.campaignindex .campaign_name{
padding-bottom:1rem;
font-size:130%;
font-weight:700;
line-height:1.3;
}
.campaignindex .campaign_code{
text-align:right;
font-size:90%;
}
.campaignindex .campaign_code::before{
content:'キャンペーンコード［';
}
.campaignindex .campaign_code::after{
content:'］';
}
.campaignindex .campaign_catch{
}
.campaignindex .campaign_data{
margin-top:2rem;
}
.campaignindex .campaign_data dt::before{
content:'【';
}
.campaignindex .campaign_data dt::after{
content:'】';
}
.campaignindex .campaign_data dt{
font-weight:700;
}
.campaignindex .btn_box{
margin-top:3rem;
}
.campaignindex .btn_box .btn{
background-color:#dd0000;
}

/* ------------------------------使用時に調整する------------------------------ */
.campaignindex .campaign_box h4{ont-weight:700;font-size:110%;margin-top:2rem;}
.campaignindex .campaign_box .contact{display:inline-block;border:1px #ccc solid;margin-top:0.5rem;padding:1rem 2rem;}
.campaignindex .campaign_box .contact dt{display:inline-block;width:8em;float:left;clear:both;}
.campaignindex .campaign_box .contact dd{margin-left:8em;}
.campaignindex .campaign_box .faq .num{display:inline-block;width:2em;text-indent:0;}
.campaignindex .campaign_box .faq dt,
.campaignindex .campaign_box .faq dd{padding-left:2em;text-indent:-2em;}
.campaignindex .campaign_box .faq dd + dt{margin-top:0.5em;}
/*------------------------------使用時に調整する------------------------------*/

@media screen and (max-width:767px){
.campaignindex .pagename h2{
padding-left:15%;
}
.campaignindex .pagename .ill{
position:absolute;
left:-3%;
top:50%;
transform:translateY(-50%);
width:30%;
}
.campaignindex .pagename .img{
display:none;
}
.campaignindex .campaign_list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
  }
}
@media screen and (min-width:768px){
.campaignindex .pagename{
padding:3rem 0;
background-size:contain;
}
.campaignindex .pagename h2{
padding-right:5%;
}
.campaignindex .pagename .ill{
position:absolute;
left:2%;
top:50%;
transform:translateY(-50%);
width:18%;
}
.campaignindex .pagename .img{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:32%;
margin-top:1rem;
}
.campaignindex .pagename{
  font-size:200%;
  }
  .campaignindex .intro_txt{
  text-align:center;
  }
  .campaignindex .campaign_list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
  }
  .campaignindex .campaign_list li{
  width:calc((100% - 6rem) / 4);
  }
  .campaignindex .campaign_box{
  padding:3rem 4rem;
  }
  .campaignindex .campaign_box::after{
  content:'';
  display:block;
  clear:both;
  }
  .campaignindex .campaign_name{
  font-size:180%;
  }
  .campaignindex .campaign_img{
  width:58%;
  float:left;
  }
  .campaignindex .campaign_info1{
  width:38%;
  margin-left:61%;
  }
  .campaignindex .campaign_info2{
  clear:both;
  }
}



/*------------------------pg_campaign---------------------------*/
/*　　各キャンペーン固有のcssは各html内に 　　　　　　　　　　　*/
/*--------------------------------------------------------------*/
@media screen and (max-width:767px){
  .campaign .sp{
  display:block !important;
  }
}
@media screen and (min-width:768px){
  .flex_pc > *{
  display:block;
  width:50%;
  }
  .campaign .pc{
  display:block !important;
  }
}