body{
  margin: 0;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

li{list-style: none;}
ul,p{margin: 0;padding: 0;}
img {
  width: 100%;
  vertical-align: bottom;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}


.diagonal-section {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #f9f3f1 ;
  z-index: -1;
}

.diagonal-content {
  position: absolute;
  bottom: 40%;
  left: 5%;
  transform: translateY(-20%);
}

.diagonal-content h1 {
  font-family: "Arial", sans-serif;
  font-size: 3em;
  color: white;
  line-height: 1.2;
  font-family: "Baskervville", serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.05em;
}

main {
  width: 100%;
  margin: 0 auto;
  max-width: 500px;
  background-color: white;
}

/*動画*/
.tb_liposuction_video{
  bottom: 1%;
  left:5%;
}

/*offer*/
.offer-btn{
  bottom: 10%;
  width: 85%;
  right: 8%;
  }

/*achievements*/
.tb_breast_achievements_002,.tb_breast_achievements_003{
  width: 90%;
  }

.tb-breast-achievements-000{
  top: 34%;
  width: 80%;
  right: 14%;
  }

.tb_breast_achievements_003{
  right: -10%;
  }

/*fixbtn*/
.fix-btn-wrapper{
  display: flex;
  position: fixed;
  width: 100%;
  z-index: 999;
  bottom: -7.5%;
  max-width: 500px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.fix-btn-wrapper-afi{
  display: flex;
  position: fixed;
  width: 100%;
  z-index: 999;
  bottom: -6%;
  max-width: 500px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.fix-btn-wrapper.afi{
  justify-content: center;
}
.fix-btn-wrapper.afi .fixbtn_form{
  width: 50%;
}

/*header-menu*/
.header-btn-wrapper{
  display: flex;
  justify-content: space-evenly;
  margin-top: 4%;
  align-items: center;
  padding: 4%;
}

/*question*/
.tb_liposuction_question-wrapper{
  position: absolute;
  top: -3%;
  display: flex;
  flex-direction: column;
  padding: 5%;
  align-items: baseline;
}

.tb_liposuction_question-wrapper > div {
  margin-top: 5%;
}

/*1day*/
.tb_breast_1day_004{
  margin: -14% auto 0 auto;
}

.fv_video.mp4 {
  width: 100%;
  right: 0%;
  top: 29%;
}

.tb_liposuction_difference_002_001 {
  width: 62%;
  right: 0%;
  top: 29%;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 1s ease-in-out forwards;
}

.tb_liposuction_difference_002_002 {
  width: 62%;
  right: 0%;
  top: 36%;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 1s ease-in-out forwards;
}

.tb_liposuction_difference_002_003 {
  width: 62%;
  right: 0%;
  top: 43%;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 1s ease-in-out forwards;
}

.tb_liposuction_difference_btn {
    width: 62%;
    right: 18%;
    top: 82%;
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 1s ease-in-out forwards;
}

/* スライドアップのアニメーション */
@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 複数の画像が順番にスライドアップするようにする */
.tb_liposuction_difference_002_001 {
    animation-delay: 0.2s;
}

.tb_liposuction_difference_002_002 {
    animation-delay: 0.4s;
}

.tb_liposuction_difference_002_003 {
    animation-delay: 0.6s;
}

.tb_liposuction_difference_btn {
    animation-delay: 0.8s;
}


.tb_liposuction_difference_006_001 {
  width: 62%;
  right: 0%;
  top: 59.5%;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 1s ease-in-out forwards;
}

.tb_liposuction_difference_006_002 {
  width: 62%;
  right: 0%;
  top: 66.5%;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 1s ease-in-out forwards;
}

.tb_liposuction_difference_006_003 {
  width: 62%;
  right: 0%;
  top: 73.5%;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 1s ease-in-out forwards;
}

.tb_liposuction_difference_btn {
    width: 62%;
    right: 18%;
    top: 82%;
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp 1s ease-in-out forwards;
}

/* スライドアップのアニメーション */
@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 複数の画像が順番にスライドアップするようにする */
.tb_liposuction_difference_002_001 {
    animation-delay: 0.2s;
}

.tb_liposuction_difference_002_002 {
    animation-delay: 0.4s;
}

.tb_liposuction_difference_002_003 {
    animation-delay: 0.6s;
}

.tb_liposuction_difference_btn {
    animation-delay: 0.8s;
}

.tb_liposuction_difference_009_001 {
  width: 80%;
  right: 10%;
  top: 81%;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 1s ease-in-out forwards;
}

/* スライドアップのアニメーション */
@keyframes slideUp {
  to {
      opacity: 1;
      transform: translateY(0);
  }
}


/*point*/
.tb_liposuction_point_btn {
    display: flex;
    flex-direction: row;
    width: 90%;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-between;
  }

  .tb_liposuction_point_btn > label {
      width: 49%;
      margin: 1% 0;
  }

  /*point切り替え*/ 
  /* すべての画像を非表示にする */
  .image-group > div {
    display: none;
  }
 
  /* チェックされたボタンに対応する画像を表示 */
  #btn_001:checked ~ .image-group .point_btn_001,
  #btn_002:checked ~ .image-group .point_btn_002,
  #btn_003:checked ~ .image-group .point_btn_003,
  #btn_004:checked ~ .image-group .point_btn_004 {
    display: block;
  }
 
  /* ボタンは非表示にして、ラベルをボタンとして利用 */
  input[type="radio"] {
    display: none;
  }

/*report*/
.tb_breast_report_001 {
  position: absolute;
  width: 80%;
  right: 14%;
  top: 43%;
}

.tb_breast_report_002 {
  position: absolute;
  width: 80%;
  right: 10%;
  top: 60%;
}

.tb_breast_report_003 {
  position: absolute;
  width: 80%;
  right: 12%;
  top: 77%;
}


/*which*/
    

.tb_breast_which_002{
  width: 90%;
  margin: 0 auto;
}

.tb_breast_which_illust{
  display: flex;
  flex-direction: row;
  width: 90%;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 auto;
  }

  .tb_breast_which_illust > div {
    width: 50%;
    margin: 2% 0;
  }

  /*case*/
.tb_breast_case_btn{
  width: 70%;
 margin: 2% auto;
}

details[open] > summary > .tb_breast_case_btn{
  display: none;
}

    /* summaryのデフォルトスタイルをリセット */
    summary::-webkit-details-marker {
      display: none;
    }

/*flow*/
.flow-slider > .slick-list {
      width: 90%;
      margin: -110% auto 10% auto;
}

.tb_breast_flow_001{
  margin-top: -5%;
}


/*faq*/
/* summary 要素のデフォルトの矢印アイコンを非表示にする */
summary::-webkit-details-marker {
  display: none;
}

/* その他のブラウザ対応 */
summary::marker {
  display: none;
}
/* デフォルトの矢印を削除する */
summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: '';
}


/*cliic*/

.sec_cl_list {
  background-color: #FDFAF5;
  padding: 6% 6% 35% 6%;
  margin: 0 auto;
}


.sec_cl_list > details {
  margin: 4% 0;
}

.sec_cl_list > details >summary > div >img {
  background-color: white;
  border-radius: 20px;
}

.clinic_list {
	background: #FDFAF5;
	padding: 5% 7% 0% 7%;
}

.accordion_header {
	width: 89%;
	margin: 0 auto -10px;
}

/* 開閉アニメーション */
.accordion_inner {
  max-height: 0px;
  overflow: hidden;
 transition: max-height 0.3s ease;
}
details[open] .accordion_inner {
  max-height: 1440px; /* 必要に応じて調整 */
}

details > div{
  max-height: 0px;
  transition: max-height 0.3s ease;
}

details[open] > div {
  max-height: 1000px; /* 必要に応じて調整 */
}

/* 矢印アイコンの回転 */
.accordion_header {
  position: relative;
  cursor: pointer;
}

.accordion_header::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 18px 0 18px;
  border-color: #d29a37 transparent transparent transparent;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

details[open] .accordion_header::after {
  transform: translateY(-50%) rotate(180deg);
}

.accordion_inner ul li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
	position: relative;
	width: 100%;
}

.accordion_inner ul li img{
	width: 40%;
  max-width: 200px;;
}

.accordion_inner ul li div{
	margin-left: 10px;
	line-height: 1.2;
	text-align: left;
	height: 100%;
}

.accordion_inner ul li div img{
	width: 65%;
  max-width: 75px;
}

.accordion_inner ul li div p:nth-child(1){
	font-size: 18px;
	font-weight: bold;
}

.accordion_inner ul li div p:nth-child(2){
	font-size: 15px;
	margin: 10px auto 0;
}

.accordion_inner ul li div p:nth-child(3){
	font-size: 15px;
	margin: 10px auto;
}


/*slick*/
.slick-dots li{
  margin: 0!important;
}
.slick-next{
  right: 0!important;;
}

.youtube-slider > .slick-dots{
  bottom: 4.5%!important;
}

.flow-slider > .slick-dots{
  bottom: -6.5%!important;
}

.slick-dotted.slick-slider{
  margin-bottom: 0!important;
}

    /*animation*/

/*animation*/
.fadeUpblur {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease-in-out), filter 0.6s var(--ease-in-out),
    transform 0.6s var(--ease-in-out);
}
.active.fadeUpblur {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.pulse,.slick-active > div.youtube-slide-container > div {
  -webkit-animation: pulse 0.85s cubic-bezier(0.25, 0.8, 0.25, 1) both;
  animation: pulse 0.85s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.poyopoyo {
  animation: poyopoyo 1s infinite;
}

@keyframes poyopoyo {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.fadeComein, div.youtube-slide-container > div {
  opacity: 0;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-duration: 0.8s;
  transition-property: opacity, transform;
  transform: scale(0.9) rotate(0.0001deg);
}

.fadeComein.active, .slick-active > div.youtube-slide-container > div {
  opacity: 1;
}

.delay01 {
  transition-delay: calc(0.15s * 1);
}
.delay02 {
  transition-delay: calc(0.15s * 2);
}
.delay03 {
  transition-delay: calc(0.15s * 3);
}
.delay04 {
  transition-delay: calc(0.15s * 4);
}
.delay05 {
  transition-delay: calc(0.15s * 5);
}
.delay06 {
  transition-delay: calc(0.15s * 6);
}

.mini-slideUp {
  -webkit-transform: translateY(5vw) scale(1);
  transform: translateY(5vw) scale(1);
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: transform, opacity, filter;
  transition-property: transform, opacity, filter, -webkit-transform,
    -webkit-filter;
  opacity: 0;
  will-change: transform, opacity;
}

.mini-slideUp.active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


        /* 親要素のスタイル */
        .glow {
          position: relative;
          display: inline-block;
          font-size: 3em; /* テキストのサイズを大きく */
          color: #6e674e; /* テキストの色 */
          font-family: 'Arial', sans-serif; /* フォントを指定 */
          font-weight: bold;
          overflow: hidden;
      }

      /* 光のエフェクト */
      .glow::before {
          content: "";
          position: absolute;
          top: 0;
          left: -100%; /* 光のスタート位置（左側の外から） */
          width: 70%;
          height: 100%;
          background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
          animation: shine 2s infinite; /* アニメーションの設定 */
      }

      /* キーフレームアニメーション */
      @keyframes shine {
          0% {
              left: -100%;
          }
          100% {
              left: 100%;
          }
      }

              /* 親要素のスタイル */
              .glow-l {
                position: relative;
                display: inline-block;
                font-size: 3em; /* テキストのサイズを大きく */
                color: #6e674e; /* テキストの色 */
                font-family: 'Arial', sans-serif; /* フォントを指定 */
                font-weight: bold;
                overflow: hidden;
            }
      
            /* 光のエフェクト */
            .glow-l::before {
                content: "";
                position: absolute;
                top: 0;
                left: -100%; /* 光のスタート位置（左側の外から） */
                width: 70%;
                height: 100%;
                background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
                animation: shine02 2s infinite; /* アニメーションの設定 */
            }
      
            /* キーフレームアニメーション */
            @keyframes shine02 {
                0% {
                    left: 100%;
                }
                100% {
                    left: -100%;
                }
            }



            .bright {
              animation: bright 2s 1;
            }
            
            @keyframes bright {
              0% {
                filter: brightness(2);
              }
              100% {
                filter: brightness(1);
              }
          }