/*画面幅が780pxまでの時ースマホ用*/
@media screen and (max-width:750px){
#container{
  width:100%;
  text-align: center;
  margin:0 auto;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0px 20px rgba(0,0,0,0.2);
}

/*下部ボタン*/

.footer{
  position: fixed;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  bottom:0;
  transform: translateX(-50%);
  z-index: 100;
  width: 90%; /* 固定幅 */
  text-align: center;
  }

/*スマホ用オファーボタン*/
.botan1{
  width:100%;
  height:auto;
  position: relative;
}

/*スマホ用アコーディオン*/


.accordion {
  max-width: 100%;
  margin: 0 auto;
}

.item {
  margin-bottom: 20px;
}

.trigger {
  display: none;
}

.trigger-img {
  width: 100%;
  cursor: pointer;
  transition: opacity 0.3s;
}

.trigger-img:hover {
  opacity: 0.8;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.hidden-img {
  width: 100%;
  display: block;
}

.trigger:checked + label + .content {
  max-height: 100%; /* 十分な高さを設定 */
}


	
/*スマホ用通話料無料ボタン*/
.call1{
  background-color: #FFFF;
  max-width: 100%;
  padding-top:20%;
  position:relative;
}
.call{
position:absolute;
top:0%;
max-width:100%;
border-style:none;
outline:0;
}

/*スライド部分 sp*/
.slide_bg_01 {
  background-image: url(../thanks_banibo/02_05.jpg);
  background-size: 100%;
}


	
	
.slider {
   margin: auto;
  margin-top: 0%;
  max-width: 100%;
  height: auto;
	
  }

.slider img{ 
	max-width: 95%;
	height: auto;
	margin-top: 5%;
	margin-bottom: 0%;
	margin-left:3%;
	
}
.slick-slide {
  height: auto;
  margin-top: -15px;
}
	
.prev-arrow{
  position: absolute;
  top:53%;
  left: 0%;
  width:14%;
  margin:auto;
  outline:0;
  background: transparent;
 z-index: 100;

}

.next-arrow{
  position: absolute;
  top:53%;
  left: 84%;
  width:14%;
  margin:auto;
  outline:0;
background: transparent;
z-index: 100;

}


/*スラレグスライド部分 sp*/

	
	
.slider2 {
   margin: auto;
  margin-top: 0%;
  max-width: 100%;
  height: auto;
	
  }

.slider2 img{ 
	max-width: 95%;
	height: auto;
	margin-top: 0%;
	margin-bottom: 0%;
	margin-left:6%;
	
}
.slick-slide2 {
  height: auto;
  margin-top: -15px;
}
	
.prev-arrow2{
  position: absolute;
  top:44%;
  left: 0%;
  width:8%;
  margin:auto;
  outline:0;
  background: transparent;
 z-index: 100;

}

.next-arrow2{
  position: absolute;
  top:44%;
  left: 92%;
  width:8%;
  margin:auto;
  outline:0;
background: transparent;
z-index: 100;

}
	
	
.tabs-content {
    position: relative;
}

.botan1 {
    position: absolute;
    width: 85%;
    margin: 0 auto;
    top: 76%;
    left: 0%;
    right: 0;
}
.botan2 {
    position: absolute;
    width: 85%;
    margin: 0 auto;
    top: 79%;
    left: 0%;
    right: 0;
}
.botan3 {
    position: absolute;
    width: 95%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan4 {
    position: absolute;
    width: 46%;
    margin: 0 auto;
    top: 90%;
    left: 46%;
    right: 0;
}
.botan5 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: -63%;
    right: 0;
}
.botan6 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan7 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 63%;
    right: 0;
}
.botan8 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: -63%;
    right: 0;
}
.botan9 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan10 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 63%;
    right: 0;
}
.botan11 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 48%;
    left: -63%;
    right: 0;
}
.botan12 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan13 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 63%;
    right: 0;
}
	
.botan14 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: -63%;
    right: 0;
}
.botan15 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan16 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 63%;
    right: 0;
}

}



/*画面幅が781px以上の時ーPC用*/
@media screen and (min-width:751px){
  #container{
 width:750px;
 text-align: center;
 margin:0 auto;
 overflow: hidden;
 border-radius: 3px;
 box-shadow: 0 0px 20px rgba(0,0,0,0.2);
  }


/*下部固定ボタンPC用*/

.footer{
  position: fixed;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  bottom:0;
  transform: translateX(-50%);
  z-index: 100;
  width: 35%; /* 固定幅 */
  text-align: center;
  }


/*PC用オファーボタン*/
.botan1{
width:100%;
height:auto;
position: relative;
border-style:none;
outline: 0;
}


/*PC用通話料無料ボタン*/
.call1{
display: none;
border-style:none;
outline: 0;
}
.call{
display: none;
border-style:none;
outline: 0;
}
	
/*スライド部分 pc*/

.slide_bg_01 {
  background-image: url(../thanks_banibo/qahaikei.jpg);
  margin: auto;
  width: 100%;
}

.slide_bg_02 {
  background-image: url(../thanks_banibo/02_07naka.jpg);
  margin: auto;
  width: 100%;
}



.slider {
   margin: auto;
  margin-top: 0%;
  max-width: 100%;
  height: auto;
	
  }

.slider img{ 
	max-width: 100%;
	height: auto;
	margin-top: 5%;
	margin-bottom: 0%;
	margin-left:4%;
	
}
.slick-slide {
  height: auto;
  margin-top: -27px;
}
.slick-prev {
  left: 10px;
}
.slick-next {
  right: 10px;
}
.slick-prev, .slick-next {
  z-index: 100;
}
.slick-prev::before, .slick-next::before {
  font-size: 24px;
}
.slick-dots {
  bottom: -40px;
}
.prev-arrow{
  position: absolute;
  top:50%;
  left: 4%;
  width:10%;
  margin:auto;
  outline:0;
  background: transparent;
 z-index: 100;

}

.next-arrow{
  position: absolute;
  top:50%;
  left: 86%;
  width:10%;
  margin:auto;
  outline:0;
background: transparent;
z-index: 100;

}



.slider2 {
   margin: auto;
  margin-top: 0%;
  max-width: 100%;
  height: auto;
	
  }

.slider2 img{ 
	max-width: 95%;
	height: auto;
	margin-top: 0%;
	margin-bottom: 0%;
	margin-left:6%;
	
}
.slick-slide2 {
  height: auto;
  margin-top: -27px;
}
.slick-prev {
  left: 10px;
}
.slick-next {
  right: 10px;
}
.slick-prev, .slick-next {
  z-index: 100;
}
.slick-prev::before, .slick-next::before {
  font-size: 24px;
}
.slick-dots {
  bottom: -40px;
}
.prev-arrow2{
  position: absolute;
  top:44%;
  left: 0%;
  width:8%;
  margin:auto;
  outline:0;
  background: transparent;
 z-index: 100;

}

.next-arrow2{
  position: absolute;
  top:44%;
  left: 91%;
  width:8%;
  margin:auto;
  outline:0;
background: transparent;
z-index: 100;

}



	
	
.tabs-content {
    position: relative;
}

.botan1 {
    position: absolute;
    width: 85%;
    margin: 0 auto;
    top: 76%;
    left: 0%;
    right: 0;
}
.botan2 {
    position: absolute;
    width: 85%;
    margin: 0 auto;
    top: 79%;
    left: 0%;
    right: 0;
}
.botan3 {
    position: absolute;
    width: 95%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan4 {
    position: absolute;
    width: 46%;
    margin: 0 auto;
    top: 90%;
    left: 46%;
    right: 0;
}
.botan5 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: -63%;
    right: 0;
}
.botan6 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan7 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 63%;
    right: 0;
}
.botan8 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: -63%;
    right: 0;
}
.botan9 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan10 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 63%;
    right: 0;
}
.botan11 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: -63%;
    right: 0;
}
.botan12 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan13 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 63%;
    right: 0;
}
	
.botan14 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: -63%;
    right: 0;
}
.botan15 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 0%;
    right: 0;
}
.botan16 {
    position: absolute;
    width: 31%;
    margin: 0 auto;
    top: 68%;
    left: 63%;
    right: 0;
}

/*PC用アコーディオン*/


.accordion {
  max-width: 100%;
  margin: 0 auto;
}

.item {
  margin-bottom: 20px;
}

.trigger {
  display: none;
}

.trigger-img {
  width: 100%;
  cursor: pointer;
  transition: opacity 0.3s;
}

.trigger-img:hover {
  opacity: 0.8;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.hidden-img {
  width: 100%;
  display: block;
}

.trigger:checked + label + .content {
  max-height: 100%; /* 十分な高さを設定 */
}


}

 /*共通部分*/

 .botan-500:hover{
   opacity: 0.6;
 filter: alpha(opacity=60);
 -moz-opacity:0.6;
}
 .botan:hover{
   opacity: 0.6;
 filter: alpha(opacity=60);
 -moz-opacity:0.6;
}
.call:hover{
  opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}
img {
max-width:100%;
height:auto;
display:block;
border-style:none;
}
a img {
border-style:none;
outline: 0;
}
p{
display: block;
margin:0 auto;
padding: 0 0;
text-align: left;
}
video{
  max-width:100%;
  height:auto;
  display:block;
  border-style:none;
}



/*共通部分footer*/

#footer{
  color: #fff;
  background: #AB951D;
  height: 50px;
  border-top: 1px solid #9A871B;
  margin: 4px;

}
#footer ul{
list-style-type: none;
font-size: 10px;
}
#footer li{
display:inline;
}



details summary {
  list-style: none;
}
	
details summary::-webkit-details-marker {
  display: none;
}
	
details summary {
  cursor: pointer;
}


/*動画再生部分*/

.capsule-image--2 video {
  width: 100%;
}

/*
.footer{
  position: fixed;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  bottom:0;
  transform: translateX(-50%);
  z-index: 100;
  width: 500px; /* 固定幅 */
  /*text-align: center;
  }*/







  body {
    margin: 0;
    padding: 0;
  }
  
  .bmi {
    font-family: "Arial", "メイリオ";
    position: relative;
    width: fit-content;
    margin: 0 auto;
    > img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  
  .bmi-height-input,
  .bmi-weight-input {
    position: absolute;
    top: 12.9%;
    width: 22.7%;
    height: 17.25%;
    input {
      font-size: min(45px, 6vw);
      font-weight: bold;
      box-sizing: border-box;
      width: 110%;
      height: 100%;
      padding-top: 0.2em;
      padding-right: 43%;
      text-align: right;
      color: #000;
      border: none;
      border: 2px solid #000;
      outline: none;
      background: transparent;
  
      appearance: none;
      &:focus {
        border-color: #eacd3d;
      }
    }
  }
  
  .bmi-height-input {
    left: 10.7%;
  }
  
  .bmi-weight-input {
    left: 36%;
  }
  
  #bmi-btn {
    font-size: 30px;
    position: absolute;
    top: 10%;
    right: 8%;
    width: min(204px, 27.2vw);
    margin: 0;
    padding: 0;
    cursor: pointer;
  
    transition: opacity 0.3s;
    color: red;
    border: none;
    outline: none;
    background: none;
  
    appearance: none;
    img {
      display: block;
      width: 100%;
      height: auto;
    }
    &:hover {
      opacity: 0.7;
    }
  }
  
  #bmi-result {
    font-size: min(52px, 6.93vw);
    font-weight: bold;
    position: absolute;
    top: 48%;
    left: 61.5%;
    letter-spacing: 0.05em;
    color: #eacd3d;
  }