@charset "UTF-8";

:root{
  --pink-bg:#FCEBF1;        /* 診断の背景 */
  --pink-deep:#D8004C;      /* 進捗バー・次へボタン */
  --pink-label:#FEEDF3;     /* 右の選択肢ラベル */
  --mint-label:#DAF2F2;     /* 左の選択肢ラベル */
  --teal:#009F9A;           /* AQUA LIFT */
  --text:#303030;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-size:2.8rem;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  font-weight:400;
  line-height:1.6;
}
img{display:block;width:100%;height:auto}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}

/* 幅で切らない（max-width を使わない）。1200pxで止めると、それより広い画面で左右に白が残り、
   白地のセクションでは余白と見分けがつかなくなる。文字サイズが 100vw/120 なので、
   幅で切らなくてもどの画面幅でも 1200px 設計の拡大・縮小になる。 */
.lp{width:100%;margin-inline:auto;overflow-x:hidden}
.sec{position:relative;line-height:0}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.hit{
  position:absolute;display:block;
  border-radius:9999px;
  -webkit-tap-highlight-color:transparent;
}
.hit:focus-visible{outline:3px solid #0a6cff;outline-offset:2px}

/* a2-startbtn.jpg（1200×324）内「下半身ケア診断を始める」 x161-1038 / y69-197 */
.hit--diag-start{left:13.42%;width:73.08%;top:21.3%;height:39.5%}

.hit--cta-1{left:13.17%;width:74.25%;top:83.97%;height:8.40%}   /* cta-lift-1   1200x1928 ボタン x158-1048 y1619-1780 */
.hit--cta-2{left:12.92%;width:74.17%;top:75.38%;height:12.38%}   /* cta-qutto-1  1200x1300 ボタン x155-1044 y980-1140 */
.hit--cta-3{left:13.25%;width:74.17%;top:77.42%;height:7.72%}   /* cta-lift-2   1200x2086 ボタン x159-1048 y1615-1775 */
.hit--cta-4{left:12.92%;width:74.17%;top:75.23%;height:12.35%}   /* cta-qutto-2  1200x1296 ボタン x155-1044 y975-1134 */
.hit--cta-5{left:13.25%;width:74.17%;top:83.77%;height:8.35%}   /* cta-lift-3   1200x1928 ボタン x159-1048 y1615-1775 */
.hit--cta-6{left:12.92%;width:74.17%;top:76.89%;height:10.94%}   /* cta-qutto-3  1200x1471 ボタン x155-1044 y1131-1291 */
/* result-*.jpg（1200×1376）内「もう一度診断する」 */
.hit--retry{left:30%;width:40%;top:88%;height:7%}

.sec--cta{line-height:1.6}

.sec--voice{line-height:0;padding-top:12.7rem}   /* 元は画像の上部に入っていた余白 */

.sec--voice--gap{padding-bottom:12.9rem}

.vc{position:relative}
.vc__inner{margin-inline:10.08%}
.vc__band{display:block;width:100%}
.vc__viewport{overflow:hidden}
.vc__list{display:flex;align-items:stretch;margin:0;padding:0;list-style:none;transition:transform .35s ease}
.vc__slide{flex:0 0 100%}
.vc__slide img{display:block;width:100%}

/* 左右の矢印＝カード外の余白に置く。カードの縦中央。 */
.vc__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:3.25%;aspect-ratio:39 / 75;
  background:center/100% 100% no-repeat;
}
.vc__arrow--prev{
  left:2.67%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 75'%3E%3Cpolyline points='36.5,2 2.5,37.5 36.5,73' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
}
.vc__arrow--next{
  left:93.67%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 75'%3E%3Cpolyline points='2.5,2 36.5,37.5 2.5,73' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
}

.sec--diag{line-height:1.6;background:#FDEEF3}

.diag-entry{position:relative;line-height:0}

.diag{background:var(--pink-bg);display:flow-root;font-weight:500}
.diag[hidden]{display:none}

.diag__card{
  background:#fff;
  /* 上128px／左右70px（デザイン実測：カードは x70〜1130・y128〜1061＝高さ933） */
  margin:12.8rem 5.83% 0;
  /* 上55.5px／左右67.5px／下60px */
  padding:5.55rem 6.75rem 6rem;
  border-radius:3.4rem;
}
/* 「←戻る」「01/03」＝デザインの文字サイズ34px・ベースラインはカード上端から94px */
.diag__head{display:flex;justify-content:space-between;align-items:center;font-size:3.4rem;line-height:1.4;letter-spacing:.04em}

.diag__back{color:var(--text)}
.diag__count{color:var(--text);font-variant-numeric:tabular-nums}

/* 進捗バー＝y259〜274（高さ15px） */
.diag__bar{margin:2.79rem 0 0;height:1.5rem;border-radius:9999px;background:var(--pink-bg);overflow:hidden}
.diag__bar i{display:block;height:100%;width:33.33%;background:var(--pink-deep);border-radius:9999px;transition:width .25s ease}

.diag__q{
  font-weight:500;
  font-size:5.4rem;line-height:1.35;text-align:center;margin:6.61rem 0 7.1rem;
  letter-spacing:.01em;
}

/* 選択肢＝1枚439×354px・すき間47px（カードの内側925pxに2枚＋すき間で収まる） */
.diag__choices{display:grid;grid-template-columns:1fr 1fr;gap:4.7rem;align-items:stretch}
.choice{
  display:flex;flex-direction:column;border-radius:1.8rem;overflow:hidden;background:#fff;
  transition:box-shadow .15s ease, transform .15s ease;
}
.choice img{border-radius:1.8rem 1.8rem 0 0}

/* ラベル＝文字サイズ34px・2行の間隔48px・帯の高さ163px（写真の下 y838〜1001） */
/* flex にすると ::before の○が別の行扱いになり、○が1行目の頭に来ない。
   block のまま align-content で縦中央に寄せる。 */
.choice__label{
  flex:1 1 auto;display:block;align-content:center;

  padding:2.66rem 1rem 4.04rem;font-size:3.4rem;line-height:4.8rem;text-align:center;
  border-radius:0 0 1.8rem 1.8rem;
}

/* 2行目は「○」の分だけ下げて、1行目の文字の頭に揃える（ぶら下げインデント）。 */
.choice__t{display:inline-block;vertical-align:top;text-align:left;text-indent:-1.08em;padding-left:1.08em}
.choice--l .choice__label{background:var(--mint-label)}
.choice--r .choice__label{background:var(--pink-label)}
/* ○は直径34px＝文字と同じ大きさ（デザイン実測）。line-height:1 は、○が行の高さを押し広げないため。 */
.choice__t::before{content:"○";font-size:1.08em;line-height:1}
.choice[aria-pressed="true"]{box-shadow:0 0 0 4px var(--pink-deep);transform:translateY(-2px)}
.choice[aria-pressed="true"] .choice__t::before{content:"●"}

.diag__next{
  display:block;width:73.17%;margin:5.5rem auto 13.1rem;
  padding:2.95rem 0;border-radius:9999px;line-height:1.4;
  background:var(--pink-deep);color:#fff;font-size:5rem;
  transition:opacity .15s ease;
}

/* 「〉」は全角の箱の左寄りに描かれるため、そのまま中央寄せすると文字全体が左へずれる。
   右の余りぶんを打ち消して、見えている文字で中央に揃えている。 */
.diag__next span{margin-left:.4em;margin-right:-.61em}
.diag__next:disabled{opacity:.38;cursor:default}

/* .diag__next に display:block を書くと UA標準の [hidden]{display:none} に勝ってしまい、
   hidden 属性が効かなくなる（結果画面にボタンが残る）。 */
.diag__next[hidden]{display:none}
.diag-entry[hidden]{display:none}

/* 動画＝poster と同じ比率の箱に入れて、読み込み前後でレイアウトが動かないようにする */

/* GIFの帯＝下にGIF、上に「吹き出しだけを残した透明PNG」を重ねる。
   GIFはそのまま幅いっぱいに置き、箱の高さはGIFに決めさせる
   （箱に高さを与えて絶対配置にすると、読み込みが遅い場面で箱が潰れてGIFが浮く）。 */
.gifbox{position:relative;line-height:0}

.gifbox__media{display:block;width:100%;height:auto}
.gifbox__bub{
  position:absolute;left:77%;top:var(--t);width:18.5%;height:auto;
  pointer-events:none;display:block;
}

.sec--video{line-height:0}
.sec__video{display:block;width:100%;height:auto;aspect-ratio:1200 / 649;object-fit:cover;background:#E0F3F3}

.diag__result[hidden]{display:none}
.diag__resultInner{position:relative;line-height:0}

/* 画面幅に応じた文字サイズ。デザイン原寸は幅1200pxで、1rem = デザイン上の10px。
   （例：デザインで36pxの文字 → 3.6rem）
   calc の中で「px × vw」は計算できない。長さ ÷ 数値 ・ 長さ × 数値 だけが使える。 */
html{font-size:calc(100vw / 120)}

/* カート追加ポップアップ＝PROVE CORE 診断LP と同じ作り（本番テーマの #modal1 を写したもの）。
   クラス名を本番と揃えてあるので、載せるときテーマ側のCSSがそのまま当たる。
   ここだけ px で書くのは、rem（デザイン原寸に連動）だと字が小さくなりすぎるため。 */
.modal{
  position:fixed;z-index:99999;left:0;top:0;width:100%;height:100%;
  background:#fff;opacity:0;transform:scale(.3);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal.show{opacity:1;transform:scale(1);pointer-events:auto}
.modal-cnt{position:relative;width:100%;max-height:90vh;overflow-y:auto}
@media(min-width:768px){ .modal-cnt{width:50%} }
.w2_cart{font-size:13px;color:#333;line-height:1.7;font-weight:400}
.cart-select_list{margin:0 0 16px}
.cart-select_list>div{font-size:12px;font-weight:700;line-height:1.55;margin:0 0 6px}
.cart-select_list select{display:block;width:100%;background:#ededed;border:none;border-radius:2px;padding:11px 12px;font-size:13px;color:#333;font-family:inherit}
.cart-radio_list{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px;font-size:14px}
.cart-radio_list .crl_wrt{width:64px;flex:none}
.cart-radio_list .item_name{display:inline-flex;align-items:center;gap:4px;cursor:pointer;margin-right:14px}
.cart-radio_list input[type=radio]{accent-color:#2b7de9}
.cart-info-txt{font-size:11px;line-height:1.7;color:#666;margin:0 0 16px}
.cart-add_list>div:first-child{font-size:14px;margin:0 0 6px}
.cart-add_item{display:flex;align-items:stretch;border:1px solid #ddd}
.cart-quantity_input{width:80px;flex:none;border-right:1px solid #ddd}
.cart-quantity_input input{width:100%;height:100%;border:none;text-align:center;font-size:16px;font-family:inherit}
.cart-add_button{flex:1}
.cart-add_button button{width:100%;background:#1a1a1a;color:#fff;border:none;font-size:15px;font-weight:600;letter-spacing:.06em;cursor:pointer;font-family:inherit;padding:16px}
.closeModal{width:fit-content;margin:18px auto 0;border:1px solid #333;border-radius:999px;padding:10px 42px;font-size:14px;color:#333;cursor:pointer;text-align:center}
.cart-demo{font-size:10px;color:#a99;text-align:center;margin:12px 0 0}