body{background-color:#FBF9F4;}
.before-after-section{
  padding:10vw 0 0;}
.before-after-container{
  width: 80%;
  margin:0 auto;}
.before-after-lead{
  text-align:center;
  font-size:1.3vw;
  line-height:1.8;
  margin:0 auto 3vw;}
.before-after-grid{
  display:flex;
  gap:0;
  position:relative;}
.before-after-card{
  width: 50%;
  padding:2vw 3vw;
  position:relative;
  text-align: center;
  overflow:hidden;}
.before-after-content{
  position:relative;}
.before-after-content .ribbon{
  position:absolute;
  width: 6vw;
  left:0; top:1vw;
  transform: translate(-50%,-50%);
  z-index:2;}
.before-after-content .ribbon img{
  width: 100%;}
.before-after-content .card-title{
  font-size: 1.5vw;
  margin:1vw 0;
  padding-bottom: 1vw;
  position: relative;
  text-align: center;}
.before-after-content .card-title::after{
  content:"";
  display:block;
  width:80%;/* 波線の長さ */
  height:1vw;/* 波の高さ */
  margin:5px auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M0 5 Q 7.5 0 15 5 T 30 5 T 45 5 T 60 5' fill='none' stroke='%2300a38c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 6vw 1vw;/* 波の周期(横幅)/高さ */
  background-position: center bottom;}
.before-after-content .duration{
  text-align:center;
  margin:8px auto 4px;
  font-weight:700;
  letter-spacing:.08em;}
.before-after-content .metrics{
  display:flex;
  justify-content: space-between;
  gap: 1.5vw;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:0 0 1vw;}
.before-after-content .metrics .label{
  text-align:center;
  font-weight:700;
  font-size:1.5vw;
  margin-right: 1vw;
  margin-bottom:.5vw;
  padding: 0;
  color: #000;}
.before-after-content .metrics .num{
  font-weight:900;
  font-size: 1.5vw;}
.metrics .num.-loss{ color:#E23737; }
.before-after-content .photo{
  width:100%;
  margin:6px 0 14px;}
.before-after-content .photo img{
  width: 100%;}
.before-after-content .voice{
  font-size:1.2vw;
  line-height:2.4;
  padding: 1vw 1.5vw;
  text-align:left;}
/* --- Section base --- */
.achivements-section{
  padding:3vw 0;}
.achivements-container{
  margin:0 auto;}
.achivements-bubble{
  width: 80%;
  position:relative;
  background:#fff;
  border:2px solid #E1DBCC;
  border-radius:3vw;
  padding:3vw;
  margin: auto;}
.achivements-bubble::before,
.achivements-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:3vw; height:3vw;}
.achivements-bubble::before{
  top:-1.8vw;
  background:#E1DBCC;}
.achivements-bubble::after{
  top:-1.5vw;
  background:#fff;}
.achivements-title{
  text-align:center;
  font-size: 1.4vw;
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-style: normal;
  margin:0 0 2vw;
  position:relative;
  color: #E23737;}
.achivements-title::after{
  content:"";
  display:block;
  width:100%;
  text-align: center;
  margin:1vw auto 0;}
.achivements-photo-grid{
  list-style:none;
  display:flex;
  flex-wrap: wrap;
  gap:2vw;
  padding:0;
  margin:0 0 2vw;}
.achivements-photo-grid li{
  width: 45%;
  overflow:hidden;
  border: 1px solid #BBBBBB;}
.achivements-photo-grid img{
  width:100%;}
.achivements-note{
  text-align:center;
  line-height:1.9;
  margin: 3vw 0;
  font-size: 1.3vw;}
.achivements-banner{
  margin:0 auto;
  text-align: center;}
.achivements-banner img{
  display: block;
  width: 70%;
  margin: auto;}

.diet .parallel-display-inner .dotted-underline{
  width: 30vw;}
.diet .before-after-container .dotted-underline {
  width: 35vw;}
.diet .flow-container .dotted-underline{
  width: 20vw;}
.diet .faq{
  margin-top: 0;}

/* --- movie --- */
.diet_mov {
  width: 90%;
  margin: 50px auto 80px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start; /* ← center から変更 */
  gap: 12px; 
}
/* 左カラム全体を中央寄せ用の箱にする */
.text-area {
  flex: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/images/diet_mov_bk.png") no-repeat center center;
}

/* 中身は普通のブロック要素のまま */
.text-inner {
  max-width: 420px;
  text-align: center;            /* ← 文字揃えだけ */
}

.text-inner h3,
.text-inner p {
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.text-inner h3 {
  font-size: 150%;
 }
 .text-inner p{
  font-size: 130%;
 }
 .diet_mov .mov {
    flex: 1;
    display: flex;
    max-width: 420px;          /* PCでの最大横幅（調整OK） */
    aspect-ratio: 9 / 16;      /* 縦長 */
    background: #000;
    border-radius: 16px;
    overflow: hidden;
  }

  .diet_mov .mov video {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 余白なしでフィット */
    display: block;
    cursor: pointer;
  }

 /* =========================
   スマホ用レスポンシブ
========================= */
@media (max-width: 768px) {

  /* 縦並びに切り替え */
  .diet_mov{
    flex-direction: column;
    width: 100%;
    gap: 16px;
    overflow: hidden;
  }

  /* 左右の比率指定を解除 */
  .text-area,
  .diet_mov .mov{
    flex: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* テキストを読みやすく */
  .text-area{
    padding: 24px 16px;
    background-size: contain;   /* ← 切れない */
    background-position: center top;
  }

  /* 動画は比率そのまま（9:16） */
  .diet_mov .mov{
    width: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 140px); /* 下の固定ボタン分を引く。140pxは調整OK */
    overflow: hidden;
  }
  .diet_mov .mov video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain!important;
  }

  /* 文字サイズを少しだけ調整（任意） */
  .text-inner h3{
    font-size: 100%;
  }

  .text-inner p{
    font-size: 85%;
  }
}

@media screen and (max-width: 700px){
.achivements-banner img.pc{display: none;}
.diet .parallel-display-inner .dotted-underline,
.diet .before-after-container .dotted-underline ,
.diet .flow-container .dotted-underline{
  width: 90%;}
.diet .parallel-display-wrap{
  padding: 10vw 0;}
.before-after-container{
  width: 90%;}
.before-after-lead{
  font-size:3.5vw;
  margin:0 auto 10vw;}
.before-after-grid{
  flex-direction: column;}
.before-after-card{
  width: 100%;
  padding:2vw 3vw;
  margin-bottom: 10vw;}
.before-after-content .ribbon{
  width: 15vw;
  left: 5vw;  top: 6vw;}
.before-after-content .card-title{
  font-size: 4vw;
  margin:1vw 0;
  padding-bottom: 1vw;}
.before-after-content .card-title::after{
  width:80%;/* 波線の長さ */
  height:10px;/* 波の高さ */
  margin:0 auto;
  background-size: 6vw 1vw;/* 波の周期(横幅)/高さ */}
.before-after-content .duration{
  margin:8px auto 4px;}
.before-after-content .metrics{
  gap: 3vw;
  margin:0 0 1vw;}
.before-after-content .metrics .label{
  font-size:3vw;
  margin-right: 3vw;
  margin-bottom:3vw;}
.before-after-content .metrics .num{
  font-size: 4vw;}
.before-after-content .photo{
  margin:6px 0 14px;}
.before-after-content .voice{
  font-size:3.5vw;
  padding: 1vw 1.5vw;}
.achivements-section{
  padding:3vw 0;}
.achivements-container{
  margin:0 auto;}
.achivements-bubble{
  width: 90%;
  padding:5vw;}
.achivements-bubble::before,
.achivements-bubble::after{
  top: -1vw;
  width:6vw; height:6vw;}
.achivements-bubble::before{
  top:-3.7vw;}
.achivements-bubble::after{
  top:-3vw;}
.achivements-title{
  font-size: 3.5vw;
  margin:0 0 2vw;}
.achivements-photo-grid{
  flex-direction: column;}
.achivements-photo-grid li{
  width: 100%;}
.achivements-note{
  font-size: 3.5vw;}
.achivements-banner{
  margin:0 auto;
  text-align: center;}
.achivements-banner img{
  display: block;
  width: 70%;
  margin: auto;}

}
@media screen and (min-width: 701px){
.achivements-banner img.smp{display: none;}
}