@charset "UTF-8";
/* 共通CSS */
.drop_open a{text-decoration: none;}
.mainArea{box-sizing: border-box;}
.cp-container {width: 960px;margin: 0 auto;}
@media screen and (max-width: 640px) {
  .cp-container {width: 92%;margin: 0 4%;}
}
@media screen and (min-width: 641px) {
  .sp {display: none;}
}
@media screen and (max-width: 640px) {
  .pc {display: none;}
}
.text-center {text-align: center;}
.center-block {margin: 0 auto;}
@media screen and (min-width: 641px) {
  .row {display: flex;justify-content: space-around;}
}

.row-wrap {flex-wrap: wrap;}
.col-9{width:75%;}.col-8{width:66.6%;}.col-6{width:50%;}.col-4{width:33.3%;}.col-3{width:25%;}
@media screen and (max-width: 640px) {.col-9,.col-8,.col-6,.col-4,.col-3{width:96%;margin:2%;}}
.col-m{margin:1rem;}.col-cm{margin:0 1rem;}
.col-p{padding:1rem;}.col-cp{padding:0 1rem;}
.campaign_title{
  border-left: 9px solid #f147a7;
  position: relative;
  padding-left: 0.8rem;
  line-height: 1.6;
  word-wrap: break-word;
  text-align: left;
  padding-bottom: 0;
  box-sizing: border-box;
  margin: 2.4rem 0 1.5rem;
}
.campaign_title:before{
  content:"";
  display:block;
  width: 9px;
  height: 50%;
  border-left: 9px solid #f28dc7;
  position:absolute;
  bottom:0;
  left:-9px;
}

.campaign_title small {
  font-size: 18px;
}

/* テキスト装飾 */
.underline{
  text-decoration: underline;
}
/*注釈*/


/* テーブル */
.cp-table{width: 100%;border-bottom: solid 1px #cacaca;margin:1rem auto;background:#FFF;letter-spacing: 0.1rem;line-height: 1.3rem;}
.cp-table tr{border-top: solid 1px #cacaca;}
.cp-table th{background: #f1f1f1;}
.cp-table th,.cp-table td{padding: 1.3rem;min-width: 9rem;}
.cp-table ul{padding-left: 1.5rem;padding-right: 1rem;}
.cp-table li{list-style-type: disc;}
.cp-table ul.cp-table-asterisk{padding-left: 1rem;}
.cp-table .cp-table-asterisk li{position: relative;list-style-type:none;}
.cp-table .cp-table-asterisk li::before{content: "※";position: absolute;left: -1.5rem;/*left: -1rem;*/}
.cp-table h3{font-size: 120%;margin: 1rem 0 .5rem;font-weight: bold;}
@media screen and (max-width: 640px) {
  .cp-table th,.cp-table td{display:block;width: 100%;}
}
#wotoku .cp-table-head{
  background: #FFF;
  border: none;
}

/* absoluteコンテナ*/
.absolute-container{position: relative;}
.absolute{position: absolute;}

/*  共通カラー*/
.text-color-yellow{color:#FF0;}
.text-color-green{color: #2BA639;}
.bg-mio{background:#FA4E9E;color:#FFF;}
.bg-glay{background:#EEE;}
.bg-lightyellow{background:#F5F2E9;}
.border-color-mio{border-color: #FA4E9E;}

/* 吹き出し */
.blow-text{text-align: center;font-weight: bold;position: relative;display: block;margin:0 auto;}
.blow-text::after,
.blow-text::before
{
    content: "";
    position: absolute;
    height: 3em;
    width: 2px;
    background: #444;
    display: block;
    top: 0;
}
.blow-text::before{transform: rotate(-25deg);left:0;}
.blow-text::after{transform: rotate(25deg);right:0;}
@media screen and (min-width: 641px) {
	.blow-text{}
}
@media screen and (max-width: 640px) {
	.blow-text{font-size: .9em;margin-bottom: .5em;}
	.blow-text::after,.blow-text::before{height:2.5em;}
	.blow-text::before{left:1em;}
	.blow-text::after{right:1em;}
}

/* マージン */
.pd-h1{padding:1rem 0;}
.pd-h2{padding:2rem 0;}
.pd-h3{padding:3rem 0;}

/* よく使う緑ボタン */
.pink-btn,
.green-btn{
  display: block;
  margin: 3.5rem auto;
  padding: 1rem;
  text-align: center;
  font-size: 1.5rem;
  color: #FFF!important;
  max-width: 28rem;
  border-radius: 10px;
}
.pink-btn{background: #FA4E9E;}
.green-btn{background: #58B32D;}
.pink-btn:hover,
.green-btn:hover{text-decoration: none;transform: scale(1.05);}
@media screen and (max-width: 640px) {
  .green-btn{
    max-width: 80%;
  }
}
.cp_bnr_area{
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}


/* ページ独自CSS */
#wotoku *{
  box-sizing: border-box;
  transition-duration: .5s;
}
@media screen and (max-width: 640px) {
  #wotoku{padding-top:6px;overflow-x: hidden;}
}
.cp-table-head{
  border-right:1px solid #cacaca;
  border-left:1px solid #cacaca;
  font-weight: bold;
}
#wotoku h2{
  font-size: 1.5rem;
  line-height: 38px;
  letter-spacing: 2px;
  margin: 60px auto 40px auto;
  text-align: center;
}
#wotoku small{
  font-size: 80%;
  line-height: 1.3rem;
  display: inline-block;
}
#wotoku .cp-table {
    max-width: 907px;
    margin: 2rem auto;
    letter-spacing: 0.1rem;
    line-height: 1.3rem;
    font-size: 1rem;
}
#wotoku .cp-table th,#wotoku .cp-table td {padding: 1.2rem;}
.sonomama_section em.blow-text{max-width: 18em;font-weight: 400;}
@media screen and (max-width: 640px) {
  .sonomama_section em.blow-text{}
  .blow-text::before {left: 0;top: 0.5em;}
  .blow-text::after {right: 0;top: 0.5em;}
  
}
.sonomama_section .blow-text::before,
.sonomama_section .blow-text::after{
    height: 1.5em;
}
.cp_header{
  background:url('/campaign/wotoku/img/ex_main_visual_bg.png')repeat-x #E5488D;
  text-align: center;
}
.cp-header-obe{
  text-align: center;
  background:#B79647;
  height: 46px;
}
@media screen and (min-width: 641px) {.cp-header-obe img{transform: translateY(-6px);}.cp_header .absolute-container{min-height: 640px;}}
@media screen and (max-width: 640px) {.cp-header-obe img{padding:0 1rem;}.cp_header .absolute-container{min-height: 490px;}}

.angel{
  animation: fuwafuwa 3s ease infinite;
  
}
@keyframes fuwafuwa {
  0% { transform:translateY(0,0) }
  50% { transform:translateY(-20px) }
  100% { transform:translateY(0) }
}
.cp_header .absolute-container a img:hover{
  transform: scale(1.03);
  opacity: 1;
}
.cp_header_annotation{
  padding:0 32px 2rem;
}
@media screen and (max-width: 640px) {
  .cp_header_annotation{padding: 1rem 0;}
}

@media screen and (min-width: 641px) {
  #sonomama,
  #sonomama-overview,
  #set,
  #set-overview{
    margin-top: -18px;
    padding-top: 1px;
  }
}
.sonomama-head{
  background:url('/campaign/wotoku/img/sonomama_bg.png')center top no-repeat;
  min-height:483px;
}
.sonomama-girl{
  animation: girlup 1s ease infinite;
}
@keyframes girlup {
  0% { transform:translateY(-40px) }
  100% { transform:translateY(0) }
}

.sonomama_pricebox{
  padding: 1rem 0 .8rem;
  font-size: 1.3rem;
  color: #FFF;
  max-width: 907px;
  margin: 1.5rem auto 0;
}
.sonomama_pricebox_600{background: #07A5F0;}
.sonomama_pricebox_830{background: #137DF0;}

.set-head{
  background:url('/campaign/wotoku/img/set_bg.png')center top no-repeat;
  min-height:782px;
}

/* 端末一覧 */
.device-list{
  width:100%;
  max-width:960px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.device-list li{
  display: block;
  width: 224px;
  margin: 0 4px 30px 4px;
}
.device-list-btn{
  position: relative;
  width: 224px;
  height: auto;
}
.device-list-btn a img:hover{
  transform: scale(1.05);
}
.device-list-details{
  position: absolute;
  top: 4%;
  left: 13.95%;
  width: 73.35%;
  max-width: 163px;
}
.device-list-bay{
  position: absolute;
  top: 48%;
  left: 6.3%;
  width: 88.2%;
  max-width: 196px;
}
@media screen and (max-width: 640px) {
.device-list{ width:100%; max-width:484px; margin:0 auto 0px auto;}
.device-list li{float:left; width:48%; margin:0 1% 3.5% 1%;}
.device-list-btn{ width:100%; max-width:224px; height:auto; background:url(/campaign/wotoku/img/spc_dev_bg.png) center bottom no-repeat; background-size:cover;}
 }


#set{margin-top: 100px;}

/* QA */
#question{
  padding-top: .1rem;
  padding-bottom: 4rem;
}
#question h3{font-weight: bold;font-size: 1.2rem;margin-top: 4rem;}
.question dt,
.question dd
{
	display: flex;
	-webkit-align-items: center; /* Safari */
	align-items: center;
    margin: 1rem 0;
	min-height: 3rem;
  position: relative;
}
.question dt{
  margin: 1.5rem 0;
  border-top: 1px solid #AAA;
  padding-top: 1rem;
}
.question dt::before,
.question dd::before{
    font-size: 3rem;
	padding-left :2rem;
	padding-right:1rem;
  /*width: 2rem; IEバグ*/
	display: block;
	text-align: center;
}
.question dt::before{
	content: "Ｑ";
	color:#E4007F;
  padding-left: 0.6rem;
}
.question dd::before{
	content: "Ａ";
	color:#888;
  padding-left: 0.6rem;
}
.question-title{
	font-size: 1.8rem;
  margin: 4rem 0 0;
}
.question dd.question-show{
  display: flex;
}
.question-on::after{
  transform: rotate(90deg);
  opacity: .8;
  transition-duration: .4s;
}

@media screen and (min-width: 641px) {
	.question{
		font-size: 16px;
		line-height: 150%;
	}
}
@media screen and (max-width: 640px) {
	.question{
		font-size: 1.1rem;
		line-height: 150%;
	}
	.question dt::before,
	.question dd::before{
		padding-left :0;
	}
}

.row-step{
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
  -webkit-align-items: center;
  align-items:         center;
  margin: 1rem 0 ;
  border-top: 1px solid #CCC;
  padding: 1rem;
}
.row-step:last-child{
  border-bottom: 1px solid #CCC;
}
@media screen and (min-width: 641px) {
  .row-step{
    width:907px;
  }
  .row-step div{
    width:680px;
    text-align: left;
  }
}

.exception-row{
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
@media screen and (max-width: 640px) {
  .exception-row{
    
  }
}
.exception-row img{
  padding: 24px;
}
@media screen and (max-width: 640px) {
  .exception-row img{
    width: 47%;
    padding:1%;
  }
}
.bd-top{
  border-top: 1px solid #CCC;
  padding-top: 1rem;
}
.cp-header-row-sp {display: flex;}
.cp-header-col-6-sp{width: 48%;padding: 0 1%;}
.cp-header-col-6-sp img{width:100%;}
.angel_sp{
  top: 8px;
  left: -35px;
  transform: rotate(35deg);
  width: 90px;
  animation: kururi 2.5s ease;
}
@keyframes kururi {
  0% {transform: rotate(10deg);left: -80px;}
  60% { transform: rotate(10deg);left: -80px; }
  100% { transform: rotate(35deg); }
}

.step-sub{
  border-top: 1px solid #CCC;
  padding: 1rem 0;
}
.pd{padding:.1rem 0 3rem}

.annotation-label{
  background:url(/campaign/wotoku/img/annotation-label.png) center left no-repeat;
  padding: .5rem 0 .5rem 50px;
  display: block;
  margin: 0 auto;
}
@media screen and (min-width: 641px) {
  .annotation-label{
    width: 48rem;
    font-size: 1.3rem;
    transform: translateX(45px);
  }
}
@media screen and (max-width: 640px){
  .annotation-label {
      width: 100%;
      padding: 0 0 0 50px;
  }
}
.annotation-label strong{
  font-size:120%;
  font-weight: bold;
}
.cp-footer{
  display: none;
  position: fixed;
  background: #333;
  opacity: .9;
  height: 68px;
  padding-top: 10px;
  width: 100vw;
  bottom:0;
  left:0;
  transition-duration: .8s;
}
.cp-footer:hover{
  opacity: 1;
  transition-duration: .5s;
}
@media screen and (min-width: 641px) {
  .cp-footer-start{width:78%;}
}
@media screen and (max-width: 640px) {
  .cp-footer-start{
    width: 55%;
    padding-right: 10px;
    padding-top: 1px;
  }
  .cp-footer .row{display: flex;}
}

.application-btn{
  text-align: center;
  display: block;
  margin: 1rem auto;
}
.application-btn img{
    padding: 1rem 0 4rem;
}

@media screen and (min-width: 641px) {
  li.notCover-list{width:60%;}
}
@media screen and (max-width: 640px) {
  li.notCover-list{display: block;width: 100%;}
}

.submit_close_btn {
  background: #999;
  width: 88%;
  max-width: 580px;
  margin: 4rem auto;
  padding: 2rem;
  border-radius: 8px;
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .submit_close_btn {font-size: 4vw;}
}

@media screen and (min-width: 641px) {
  .img_flexbox{display: flex; width: 900px; margin: 50px auto 20px; flex-wrap:wrap; justify-content: space-between;}
  .img_flexitem{width: 268px; margin-bottom: 40px; background-color: #f1f1f1; }
  .img_flextext{font-size: 10px; line-height: 1.6em; margin:0 12px 10px; }
}
@media screen and (max-width: 640px) {
  .img_flexbox{display: flex; width: 98%; margin: 20px auto; flex-wrap:wrap; justify-content: space-between;}
  .img_flexitem{width: 49%; margin-bottom: 10px; background-color: #f1f1f1; }
  .img_flextext{font-size: 10px; line-height: 1.6em; margin:0 6px 6px; }
}