@charset "UTF-8";
@import url("select_form.css");
@import url("cp_202104jun.css");


 img{
  max-width: 100%;
  height: auto;
}
figure{
  margin: 1rem;
}

.cp202104 h2{
  text-align: center;
  margin: 1rem;
 
}
.commonFooterWrap{
  position: relative;
  z-index: 1;
}
.btnBox a{
  display: block;
}
.btnBox a img{
  filter:drop-shadow( 5px 5px 5px rgba(0,0,0, .15) );
}

.cp202104 .campaignArea{
  background: none;
}

.cp202104 .kv{
  position: relative;
  text-align: center;
}
.cp202104 .kv a{
  display: block;
  position: absolute;
  bottom: 1rem;
  left: calc( 50% - 172px);
}
@media screen and ( max-width: 320px ){
  .cp202104 .kv a{
    width: 250px;
    left: calc( 50% - 125px);
  }  
}

.selectFormWrap{
  background: #39b34a url("../../../../_webroot/img/page/omakase/cp2021jun/bg_slashline_5.png") left top / auto repeat;
  padding: 1px;
  }

  .selectFormWrap.top{
    background: #FBB454 url("../../../../_webroot/img/page/omakase/cp2021jun/bg_slashline_5.png") left top / auto repeat;
    padding: 1px;
    }

.stepWrap{
  background: #fff;
  border-radius: 1rem;
  margin: 2rem 1rem;
  padding: 1rem 1rem 1.5rem;
  position: relative;
}
.stepWrap:not(:last-of-type):after{
  content: "";
  border: 10px solid transparent;
  border-top: 12px solid #b3e2ba;
  position: absolute;
  bottom: -32px;
  left: calc(50% - 10px);
}

.stepWrap>h2{
  color: #39b34a;
}
.infoText{
  color: #ff911e;
  margin: 2rem 1rem;
  text-align: center;
  font-weight: 700;
}

.bunyaSwitch br{
  display: none;
}
.content.radio{
  display: block;
  border:none;
}
.content.radio>div{
  margin: .5rem 0;
  border:none;
}
.content.radio>div+div{
  border-left: none;
}
.content.radio label{
  background: #fff;
  border: 2px solid #ED6C00;
  border-radius: 5px;
  color: #ED6C00;
  display: block;
  line-height: 1;
  padding: 1.5rem 0;
  text-align: center;
}
.content.radio input[type=radio]:checked+label{
  background: rgba(255,81,0,.2);
  color: #ED6C00;
}
.content.radio>div:last-of-type label{
  font-size: 1em;
  padding: 1.5rem 0;
}

.openBtn{
  border-width: 2px;
}
.openBtn>span{
  background: none;
  padding: 1.5rem 0;
}

.selectedBox h3{
  color: #39b34a;
  text-align: left;
  font-weight: 700;
}
.selectedBox h3:before{
  content: none;
}
.stepWrap h2 span{
  margin-left: 0;
}
input[type=button].selectButton{  
  padding: 1.5rem ;
  width: 100%;
}

.btnBox.step3{
  position: relative;
}
.btnBox.step3:before{
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  width: .5rem;
  height: .5rem;
  position: absolute;
  right: 2rem;
  top: calc( 50% - .4rem );
  transform: rotate(45deg);
  z-index: 3;
}
.btnBox.step3 input{
  background:  rgba(255,81,0,.7);
  position: relative;
  z-index: 1;
}

.btnBox.bottom{
  margin-bottom: 3rem;
}
#wrap{
  min-width: initial!important;
}

.omakasemidasi{
  position: relative;
  padding: 19px;
  border-radius: 5px;
  background-color: #FBB454;
  color: #fff;
  font-weight: bold;
  font-size: 21px;
  text-align: center;
  margin-bottom: 2.5rem!important;
  z-index: 1;
  position: relative;
}

.omakasemidasi::before{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: traslateX(-50%) rotate(-20deg);
  border-left: 5px dotted #FBB454;
  height: 20px;
  content: "";
}
.girlimg{
  width: 152px;
  margin: 0 auto;
}

.float{
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

.botanbox{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #fff;
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 1.5rem;
  padding: 15px 10px;
  margin: 2rem 1rem;
}

.botanbox a{
  display: flex;
  align-items: flex-start;
}

.botanbox img{
  width: 120px;
  margin-top: 20px;
}

.weight{
  font-weight: 700;
  border-bottom: 1px dashed #e5e5e5;
  padding: 5px 0 15px;
}

.moretext{
  position: relative;
  padding: 0 15px 0 0;
  font-size: 1em;
  text-align: right;
}
.moretext span{
  background: linear-gradient(transparent 50%, rgba(255,81,0,.2) 50%);
}

.moretext::after{
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  position: absolute;
  top: 54%;
  left: 94%;
  margin-top: -4px;
  transform: rotate(45deg);
}

.cloud{
  position: relative;
  padding: 0.5px 2px 2px 20px;
  border-radius: 50%;
  box-shadow: .3rem -.7em white;
  background-color: white;
  margin-top: 20px!important;
  margin: 0px auto;
  padding-top: 0px;
  padding-bottom: 7px;
  height: 40px;
}

.cloud p{
  width: 260px;
  margin: 0px;
  font-size: 13.5px;
  padding-bottom: 15px;
  padding-top: 4px
}
.pcposi{
    margin: 0 auto;
}

.backgroundWrap{
padding-top: 0px;
}

.spbnr{
  margin-left: 1rem;
  margin-right: 1rem;
}

.backgroundWrap.mousikomi{
  padding-top: 20px;
}

h1{
  margin-top: 0px;
}

.whatOmks.bottom{
  padding-top: 2rem;

}

.background{
  background-color: #fff;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px;
  margin-top: 2rem;
}

.pcview {
   display: none !important; 
  }
.sviewp {
   display: block !important; 
  }

  .stepWrap h2{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ED6C00;
    font-size: 1.2em;
    margin: 2rem .5rem .75rem .5rem;
    width: calc(100% - 1.5rem);
  }

/* -------------------------
  /* for pc only
  --------------------------*/
  @media screen and (min-width: 768px) {

 
    /* ======== Paging Navi ================*/
  
    /* @import url('omakase_pc.css');
    @import url("cp_202104jun_pc.css"); */

    
    .pcview { 
      display: block !important;

     }
    .spview { 
      display: none !important; 

    }
    .spbnr{
      padding-bottom: 0px;
     }

    .contentArea.formArea.cp202104{
      width: 960px;
      margin: 0 auto;
    }
    
    .backgroundWrap,
    .selectFormWrap{
      background: none;
      position: relative;
    }
    .backgroundWrap.whatOmks{
      margin: 0;
      z-index: 1;
    }

    div#wrap{
      overflow: hidden;
    }

    .backgroundWrap:before,
    .selectFormWrap:before{
      content: "";
      height: 100%;
      position: absolute;
      width: 100vw;
      left: 50%;
      top: 0;
      z-index: 1;
      background: #ecf3ea url("../../../../_webroot/img/page/omakase/cp2021jun/bg_slashline.png") left top / auto repeat;
      transform: translate(-50%, 0);
    }

    .selectFormWrap:before{
      background: #39b34a url("../../../../_webroot/img/page/omakase/cp2021jun/bg_slashline_5.png") left top / auto repeat;
    }
    
    .whatOmks>div,
    .selectFormWrap>*,
    .howToApplyArea{
      z-index: 2;  
      position: relative;
      padding: 2rem 0;
      padding-top: 0px;
    }
    
    .content.radio{
      display: flex;
      justify-content: space-between;
    }
    .content.radio>div{
      flex-grow: inherit;
      width: 32%;
    }
    
    .content.radio>div label,
    .content.radio label,
    .openBtn,
    input[type=button].selectButton{
      font-size: 1em !important;
      font-weight: 700;
      border-radius: .75rem;
    }
    input[type=button].selectButton{
      padding: 1.5rem 0;
    }
    
    .whatOmks{
      padding: 1rem 0;
    }
    
    .stepWrap{
      border-radius: 2rem;
      margin: 1.25rem auto;
      padding: 2rem 3rem 2.5rem;
      box-sizing: border-box;
      max-width: 100%;
    }
    .stepWrap:not(:last-of-type):after{
      border: 30px solid transparent;
      border-top: 40px solid #b3e2ba;
      bottom: -60px;
      left: calc(50% - 25px);
      z-index: 10;
    }
    
    .cloud{
      padding-bottom: 17px;
      margin-right: 20px;
    }

    .forpc{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding-top: 0px;
    }
    .botanbox{
        width: 427px;
        margin-top: 0px;
        margin-bottom: 1.25rem;
      }
      h2.omakasemidasi{
        margin-top: 2rem;
      }
  
      .girlimg{
        width: 240px;
      }

      .pcposi{
        display: flex;
        margin: 0 auto;
      }

      .cloud p{
        padding-top: 10px;
        padding-bottom: 13px;
      }


/* CSS Document */

.openBtn,
.closeBtn,
.resetBtn,
.backBtn{
  cursor: pointer;
}
.content label:hover,
.openBtn:hover,
.closeBtn:hover,
.resetBtn:hover,
.backBtn:hover{
  opacity: .5;
}
.content.radio label,
.openBtn{
  font-size: 1.3em;
}
.backBtn{
  border-radius: 3px;
}
#selectField h4::after,
.pre h3::after{
  font-size: 1.5em;
  font-weight: 700;
  top: calc( 50% - .5em );
}

.selectBody{
  background: rgba(0,0,0, .8);
  margin: 0;
  min-height: 100%;
  position: /*absolute*/ fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 998;
}
.selectBody>div:first-of-type{
  background: #fff;
  box-sizing: border-box;
  max-width: 800px;
  min-height: 90vh;
  margin: 5vh auto;
  overflow: auto;
  padding: 2rem;
  position: relative;
  z-index: 1000;

}
.selectBody.basicPosition,
.selectBody.close{
  display: none;
}
.selectBody.open{
  display: block;
  animation-duration: .5s;
  animation-name: fadeIn;
}
@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
.selectBody.open .btnBox{
  animation-name: none;
  justify-content: center;
}
.resetBtn,
.closeBtn{
  flex-grow: 0;
  margin: 0 1rem;
}
.resetBtn{
  padding: .5rem 1rem;
}
.closeBtn{
  padding: .75rem 2rem;
}

.closeArea{
  display: block;
  position: absolute;
  width: 100%;
  min-height: 100%;
  z-index: 999;
  left: 0;
  top: 0;
}
input[type=button].selectButton{
  padding: 1rem 4rem;
  font-size: 1.2em;
}
input[type=button].selectButton:hover{
  opacity: .5;
}

.stepWrap h2{
  font-size: 1.8em;
}

.cp202104{
  position: relative;
}
      }