@charset "UTF-8";
/* =========================================================
   トキハナドレス POPUP SHOP LP
   - SPファースト。デザインは幅780pxカンプ → CSSは1/2の値で書く
   - 768px以上: 中央にSPカラム(430px)を置き、左右にPC用サイドを足す
   ========================================================= */

/* ---------------------------------
   変数
---------------------------------- */
:root {
  --c-text: #222;
  --c-pink: #da92a6;
  --c-pink-deep: #ce7990;
  --c-pink-dark: #a4566c;
  --c-gold: #cda138;
  --c-gold-dark: #b8860b;
  --c-gold-text: #b39553;
  --c-gray-bg: #f8f7f5;
  --c-blue: #8aafcc;
  --c-blue-deep: #5d97c9;
  --c-line: #43b361;
  --ff-base: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", sans-serif; /* カンプ: ヒラギノ角ゴ W3/W6 */
  --ff-din: "Barlow", var(--ff-base);
  --ff-serif: "Bodoni Moda", "Times New Roman", serif;
  --col-w: 430px; /* PC時の中央カラム幅 */
}

/* ---------------------------------
   リセット
---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
picture, img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--ff-base);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  font-feature-settings: "palt"; /* 約物・かなの空きを詰める（カンプの組みに合わせる） */
  color: var(--c-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.dress_lp { overflow-x: clip; }
.lpMain { position: relative; background: #fff; }

/* ---------------------------------
   共通パーツ
---------------------------------- */
/* セクション見出し（英字＋和文） */
.secHead { text-align: center; }
.secHead_en { line-height: 1.2; }
.secHead_en-din { font-family: var(--ff-din); font-weight: 500; font-size: 20px; letter-spacing: 0.04em; }
.secHead_en-serif { font-family: var(--ff-serif); font-weight: 400; font-size: 22px; letter-spacing: 0.08em; }
.secHead_ja { margin-top: 18px; font-size: 17px; font-weight: 700; letter-spacing: 0.08em; }
.secHead_ja-light { font-weight: 400; font-size: 18px; letter-spacing: 0.2em; }
.secHead_ja-bubble::before {
  content: "";
  display: inline-block;
  width: 20px; height: 18px;
  margin-right: 5px;
  vertical-align: -3px;
  background: url(/lp/dress_popup/img/ico_bal.svg) no-repeat center / contain;
}

/* CTAボタン（予約優先ラベル・上部バッジ付き） */
.cta {
  position: relative;
  width: calc(100% - 80px);
  max-width: 310px;
  margin: 0 auto;
}
.cta_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 76px;
  border: 2px solid #fff;
  border-radius: 76px;
  background: var(--c-gold);
  color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transition: filter .2s;
}
.cta_btn:hover { filter: brightness(1.05); }
.cta_main { display: flex; align-items: center; font-size: 18px; font-weight: 700; letter-spacing: 0.04em; }
.cta_txt small { font-size: 10px; margin-left: 2px; } /* 本文と下(ベースライン)でそろえる */
.cta_ico { width: 22px; margin-right: 6px; }
.cta_badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 10px;
  border: 2px solid #fff;
  border-radius: 5px;
  background: var(--c-gold-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.cta_badge + .cta_main { margin-top: 6px; }
/* 「＼予約優先／」斜めラベル（SVG。桃背景は白、白背景は金） */
.cta_priority {
  position: absolute;
  top: -22px; left: -12px;
  width: 65px;
  pointer-events: none;
}

/* 横に流れ続ける写真スライダー（JSで中身を複製して無限ループ） */
.loopSlider { overflow: hidden; }
.loopSlider_track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: loopSlide 20s linear infinite; /* 実際の秒数はJSで幅から決める（一定の速さ） */
}
.loopSlider-reverse .loopSlider_track { animation-direction: reverse; }
.loopSlider_track li { width: 170px; flex-shrink: 0; }
/* 画面に入ったら1枚ずつふわっと登場（--i はJSで振る順番）。
   JSが動いたとき(.is-js)だけ隠すので、JSが読めなくても写真は出たまま */
.is-js .loopSlider_track picture {
  opacity: 0;
  transition: opacity 1.2s ease;
  transition-delay: calc(var(--i, 0) * 0.25s); /* --i は親の li から受け取る */
}
.is-js .loopSlider.is-in picture { opacity: 1; }
.is-static .loopSlider_track picture { transition: none; } /* ?static（スクショ確認用）では登場を待たない */
.loopSlider_track img {
  width: 170px;
  height: 245px;
  object-fit: cover;
  border-radius: 45px; /* カンプ: 大きい角丸の四角 */
}
@keyframes loopSlide {
  to { transform: translateX(-50%); }
}

/* 写真のフェードイン（参考: baycrews特集）。動かさず、その場で1秒かけて浮かび上がる */
.is-js .fadePhoto { opacity: 0; transition: opacity 1s ease; }
.is-js .fadePhoto--late { transition-delay: 0.5s; } /* 2列目など、あとから出す写真 */
.is-js .fadePhoto.is-in { opacity: 1; }
.is-static .fadePhoto { opacity: 1 !important; transition: none !important; }

/* 1文字ずつ「ぽぽぽ」と弾んで出る文字（JSで1文字ずつ span に分ける） */
.popText_char { display: inline-block; }
.is-js .popText_char { opacity: 0; transform: translateY(10px) scale(0.5); }
.is-js .js-popText.is-in .popText_char {
  animation: popChar 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; /* 少し行き過ぎて戻る */
  animation-delay: calc(var(--i, 0) * 0.07s);
}
.is-static .popText_char { opacity: 1; transform: none; animation: none !important; }
@keyframes popChar {
  to { opacity: 1; transform: none; }
}

/* 区切り線 */
.divider { width: calc(100% - 60px); margin: 0 auto; border: 0; border-top: 1px solid var(--c-text); }

/* 点線ボックス */
.dashBox { border: 1px dashed #bbb; background: var(--c-gray-bg); }

/* ---------------------------------
   KV
   幅390pxの箱に、カンプ座標の1/2(整数px)で重ねて置く。
   390pxより狭い端末では箱を中央寄せし、はみ出た左右の余白を切る
---------------------------------- */
.kvSec { overflow: hidden; background: var(--c-pink); padding-bottom: 50px; }
.kvSec_visual { position: relative; width: 390px; height: 535px; margin-left: calc((100% - 390px) / 2); }
.kvSec_visual > *, .kvSec_title > * { position: absolute; }
.kvSec_visual > .kvSec_title { position: static; } /* 子を .kvSec_visual 基準で置くため */
.kvSec_popup { left: 25px; top: 30px; width: 340px; }
.kvSec_photo { left: 25px; top: 90px; width: 350px; }
.kvSec_photo img { width: 100%; }
.kvSec_catch { z-index: 1; left: 25px; top: 275px; width: 340px; }
.kvSec_brand { z-index: 1; left: 140px; top: 405px; width: 110px; }
.kvSec_ok {
  z-index: 1;
  left: 50%; top: 480px;
  transform: translateX(-50%);
  height: 30px;
  padding: 0 12px;
  display: flex; justify-content: center; align-items: center;
  border: 2px solid var(--c-pink);
  border-radius: 30px;
  background: #fff;
  color: #cd7a8f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* ご試着0円: 上端を支点に「プランプランプラン → ひと呼吸」。揺れ幅を3回で減らし、後半は静止 */
.kvSec_free {
  z-index: 1;
  left: 295px; top: 445px;
  width: 60px;
  transform-origin: 50% 0;
  animation: tagSwing 4s ease-in-out infinite;
}
@keyframes tagSwing {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(6deg); }
  20%  { transform: rotate(-5deg); }
  30%  { transform: rotate(4deg); }
  40%  { transform: rotate(-2deg); }
  48%  { transform: rotate(1deg); }
  55%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.kvSec_date { width: 340px; margin: 25px auto 0; }
.kvSec .cta { margin-top: 40px; }

/* ---------------------------------
   お悩み
---------------------------------- */
.worrySec { padding: 75px 0 60px; }
.worrySec_feel { letter-spacing: 0; }
.worrySec .secHead_ja { margin-top: 20px; letter-spacing: 0.14em; }
.worrySec_list {
  margin: 38px 30px 0;
  padding: 26px 0;
  border: 1px dashed #ccc;
  background: var(--c-gray-bg);
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 25px;
}
.worrySec_list li + li { margin-top: 10px; } /* 行の間隔 25 + 10 = 35px */
.worrySec_list strong { font-weight: 700; }
.worrySec .loopSlider { margin-top: 40px; }
.worrySec_lead { margin: 40px 0 46px; text-align: center; font-size: 16px; line-height: 2; }

/* ---------------------------------
   About
---------------------------------- */
.aboutSec { background: var(--c-pink); color: #fff; }
.aboutSec_body { padding: 40px 30px 40px; }
.aboutSec_title { width: 165px; margin: 0 auto; }
.aboutSec_lead { margin-top: 25px; text-align: center; font-size: 16px; line-height: 2; }
.marker { font-weight: 700; background: linear-gradient(transparent 62%, var(--c-pink-deep) 62%); padding: 0 4px; }
.aboutSec_points {
  display: grid;
  justify-content: center; /* テキスト群のかたまりを白い箱の中央に置く（各行は左ぞろえのまま） */
  row-gap: 10px;
  margin-top: 30px;
  padding: 25px 20px;
  border-radius: 15px;
  background: #fff;
  color: var(--c-text);
}
.aboutSec_points li { display: flex; align-items: flex-start; font-size: 14px; line-height: 26px; }
.aboutSec_points_tag {
  flex-shrink: 0;
  width: 50px;
  margin: 3px 10px 0 0;
  border-radius: 20px;
  background: var(--c-pink-deep);
  color: #fff;
  font-family: var(--ff-din);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 18px;
  padding-bottom: 2px; /* 英字は大文字の高さで見た目の中央になるよう1px持ち上げる（高さは20pxのまま） */
}
.aboutSec_points u { text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------------------------------
   特別体験
---------------------------------- */
.specialSec { padding: 45px 0 50px; }
.specialSec + .divider { margin-top: 10px; }
.specialHead { text-align: center; }
.specialHead_label { width: 230px; margin: 0 auto; }
/* 特別体験のラベルは、その場でふわっとフェードイン */
.is-js .js-popLabel { opacity: 0; transition: opacity 1s ease; }
.is-js .js-popLabel.is-in { opacity: 1; }
.is-static .js-popLabel { opacity: 1; transition: none !important; }

.specialHead_title { margin-top: 15px; font-size: 20px; letter-spacing: 0.1em; line-height: 1.4; }
.specialHead_check {
  display: inline-flex;
  align-items: center;
  padding: 0 6px 2px 0;
  border-bottom: 2px solid var(--c-pink);
}
.specialHead_check::before {
  content: "";
  width: 22px; height: 22px;
  margin-right: 3px;
  transform: translateY(1px); /* 文字の並びより少し下げる */
  background: url(/lp/dress_popup/img/ico_check.svg) no-repeat center / contain;
}
.specialHead_sub { display: block; margin-top: 10px; }
.specialSec_text { margin-top: 30px; text-align: center; font-size: 16px; line-height: 2.1; letter-spacing: 0.08em; }
.specialSec_photo { position: relative; width: 300px; margin: 30px auto 0; }
.specialSec_photo img { width: 300px; } /* 書き出した比率のまま表示（トリミングしない） */
.specialSec_photo .specialSec_fukidashi {
  position: absolute;
  top: -15px; left: -25px;
  width: 140px; height: auto;
}

/* 価格ボックス（中身は txt_price.svg 1枚） */
.priceBox {
  margin: 20px 35px 0;
  padding: 20px 0;
  border: 1px dashed #ccc;
  background: var(--c-gray-bg);
}
.priceBox_img { width: 255px; margin: 0 auto; }

/* ドレス4枚 */
.dressGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 35px; }
.dressGrid img { width: 100%; aspect-ratio: 384 / 460; object-fit: cover; }
.specialSec .cta { margin-top: 62px; }

/* ---------------------------------
   Flow
---------------------------------- */
.flowSec { padding: 50px 0 50px; background: var(--c-gray-bg); }
.flowSec_en { font-size: 22px; letter-spacing: 0.02em; }
.flowSec_lead { margin-top: 22px; text-align: center; font-size: 16px; line-height: 2.1; }
.flowSec_steps { margin: 25px 30px 0; }
.flowSec_steps li {
  display: flex;
  align-items: stretch;
  min-height: 100px;
  border: 1px dashed #bbb;
  background: #fff;
}
.flowSec_steps li + li { margin-top: 20px; }
.flowSec_num {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 71px;
  border-right: 1px dashed #ccc;
}
.flowSec_num img { width: 40px; }
.flowSec_num-and img { width: 20px; }
.flowSec_body { display: flex; flex-direction: column; justify-content: center; padding: 10px 10px 10px 24px; }
.flowSec_title { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; }
.flowSec_title-line::before {
  content: "";
  display: inline-block;
  width: 19px; height: 18px;
  margin-right: 2px;
  vertical-align: -3px;
  background: url(/lp/dress_popup/img/ico_line_green.svg) no-repeat center / contain;
}
.flowSec_text { margin-top: 2px; font-size: 12px; }
.flowSec_cond {
  margin: 25px 27px 0 32px;
  padding: 22px 0 20px 37px;
  border: 1px dashed #bbb;
  background: #fff;
}
.flowSec_cond_title { text-align: center; margin-left: -37px; font-size: 13px; font-weight: 700; }
.flowSec_cond ul { margin-top: 12px; font-size: 14px; }
.flowSec_cond li { position: relative; padding-left: 13px; }
.flowSec_cond li + li { margin-top: 8px; }
.flowSec_cond li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-pink-deep);
}
.flowSec .loopSlider { margin-top: 50px; }
.flowSec .cta { margin-top: 64px; }
.flowSec_notes { margin-top: 22px; text-align: center; font-size: 12px; line-height: 2.1; }
.flowSec_notes_title { margin-bottom: 4px; font-size: 13px; font-weight: 700; }
.flowSec_notes_title + p { font-size: 13px; } /* 毎日「11:00〜19:00…」の2行 */

/* ---------------------------------
   What's トキハナ
---------------------------------- */
.whatsSec { padding: 75px 20px 70px; background: var(--c-blue); color: #fff; }
.whatsSec_en { font-size: 20px; letter-spacing: 0.02em; }
.whatsSec_logo { width: 165px; margin: 30px auto 0; }
.whatsSec_ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin: 40px 15px 0;
  background: var(--c-blue-deep);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%); /* 両端を8px内側に切り込む */
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.whatsSec_lead { margin-top: 25px; text-align: center; font-size: 16px; line-height: 30px; letter-spacing: 0.1em; }
.whatsSec_cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 38px; }
.whatsSec_cards li:nth-child(2) { transition-delay: 0.25s; }
.whatsSec_cards li:nth-child(3) { transition-delay: 0.5s; }
.whatsSec_cards li { overflow: hidden; border-radius: 9px; background: #fff; color: var(--c-text); }
.whatsSec_cards img { width: 100%; aspect-ratio: 220 / 260; object-fit: cover; }
.whatsSec_cards p { padding: 10px 0 12px; text-align: center; font-size: 11px; line-height: 2; letter-spacing: 0.02em; }
.whatsSec_cards strong { color: var(--c-pink-deep); font-size: 11px; }
.whatsSec_cards_note { margin-top: 5px; text-align: center; font-size: 9px; letter-spacing: 0.04em; } /* 真ん中のカード（持ち込み無料）の注記。真ん中のカードはページ中央にあるので中央ぞろえで真下に来る */
.whatsSec_support { display: flex; align-items: flex-start; gap: 15px; margin-top: 45px; padding-left: 10px; } /* 丸写真の上端と「特別条件」の上端をそろえる */
.whatsSec_support picture { flex-shrink: 0; }
.whatsSec_support_img { width: 120px; border-radius: 50%; }
.whatsSec_support_body { font-size: 16px; line-height: 30px; letter-spacing: 0.08em; }
.whatsSec_support_tag {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 10px;
  border: 2px solid var(--c-blue-deep);
  background: #fff;
  color: var(--c-blue-deep);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.06em;
}
.no1Card {
  margin-top: 45px;
  padding: 35px 30px 30px;
  border-radius: 15px;
  background: #fff;
}
/* 見出しを上下の金ラインで挟む */
.no1Card_title {
  border-top: 1px solid var(--c-gold-text);
  border-bottom: 1px solid var(--c-gold-text);
  color: var(--c-gold-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 0.04em;
  text-align: center;
}
.no1Card_main { width: 170px; margin: 20px auto 0; }
.no1Card_sub { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.no1Card_sub img { width: 150px; }
.no1Card_note { width: 190px; margin: 25px auto 0; }

/* ---------------------------------
   Q&A
---------------------------------- */
.faqSec { padding: 60px 20px 60px; }
.faqSec .secHead_ja { margin-top: 22px; }
.faqSec_list { margin-top: 38px; }
.faqSec_item {
  padding: 20px 18px 22px 20px;
  border: 1px dashed #bbb;
  border-radius: 6px;
  background: var(--c-gray-bg);
}
.faqSec_item + .faqSec_item { margin-top: 10px; }
.faqSec_item dt, .faqSec_item dd { position: relative; padding-left: 37px; }
.faqSec_item dt { font-size: 15px; font-weight: 700; line-height: 1.6; padding-top: 3px; letter-spacing: 0.02em; }
.faqSec_item dd { margin-top: 10px; font-size: 13px; line-height: 1.85; padding-top: 2px; }
.faqSec_item dt::before, .faqSec_item dd::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 25px; height: 25px;
  background: no-repeat center / contain;
}
.faqSec_item dt::before { background-image: url(/lp/dress_popup/img/ico_q.svg); }
.faqSec_item dd::before { background-image: url(/lp/dress_popup/img/ico_a.svg); }

/* ---------------------------------
   Access
---------------------------------- */
.accessSec { padding: 55px 0 45px; background: var(--c-pink); color: #fff; }
.accessSec_en { font-size: 20px; letter-spacing: 0.04em; }
.accessSec .secHead_ja { margin-top: 22px; }
.accessSec_table { margin: 30px 20px 0; }
.accessSec_table div { display: flex; align-items: stretch; gap: 18px; }
.accessSec_table dt, .accessSec_table dd { padding: 13px 0; }
.accessSec_table dt {
  flex-shrink: 0;
  width: 66px;
  border-bottom: 1px solid var(--c-pink-dark);
  color: var(--c-pink-dark);
  text-align: center;
  font-size: 13px;
}
.accessSec_table dd { flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.8); font-size: 13px; letter-spacing: 0.02em; }
.accessSec_map { margin-top: 25px; }
.accessSec_map iframe { display: block; width: 100%; height: 240px; border: 0; }

/* ---------------------------------
   フッター
---------------------------------- */
.footer { display: flex; justify-content: space-between; align-items: flex-end; padding: 20px 25px 20px 20px; } /* 追従CTAはフッターが見えると隠れるので下に逃がし幅は不要 */
.footer_logo img { width: 110px; }
.footer_copy { font-size: 11px; letter-spacing: 0; }

/* ---------------------------------
   SP追従CTA
---------------------------------- */
.floatCta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(110%);
  transition: transform .4s ease;
}
.floatCta.is-show { transform: translateY(0); }
.floatCta_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  border-radius: 52px;
  background: var(--c-gold);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.floatCta_btn .cta_txt small { font-size: 10px; }

/* 動きを減らす設定の端末ではループを止める */
@media (prefers-reduced-motion: reduce) {
  .loopSlider_track, .kvSec_free { animation: none; }
  .is-js .loopSlider_track picture { opacity: 1; transition: none; }
  .is-js .popText_char { opacity: 1; transform: none; animation: none !important; }
  .is-js .fadePhoto { opacity: 1; transition: none; }
  .is-js .js-popLabel { opacity: 1; transition: none; }
}

/* PCサイドはSPでは出さない */
.pcSide { display: none; }

/* 375px幅（390px未満）: 1文字だけ次の行に落ちないよう、字間と余白を少し詰める */
@media screen and (max-width: 389px) {
  .aboutSec_points li { letter-spacing: 0; }
  .flowSec_title { letter-spacing: 0.02em; }
  .flowSec_text { letter-spacing: 0; }
  .whatsSec_lead { letter-spacing: 0.04em; }
  .whatsSec_support { gap: 10px; }
  .whatsSec_support_img { width: 110px; }
  .whatsSec_support_body { letter-spacing: 0.02em; }
  .whatsSec_support_tag { letter-spacing: 0.02em; }
  .no1Card { padding-left: 25px; padding-right: 25px; }
  .no1Card_title { letter-spacing: 0; }
  .faqSec_item dt { font-size: 14px; }
  .faqSec_item dd { letter-spacing: 0; }
}

/* 極小端末 */
@media screen and (max-width: 359px) {
  .cta { width: calc(100% - 40px); }
}


/* ▼▼▼ ウィンドウサイズ768px以上に適用されるcss ▼▼▼ */
@media screen and (min-width: 768px) {
  body { background: var(--c-pink); }
  .lpMain {
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
  }
  .floatCta { width: 100%; left: 50%; right: auto; transform: translate(-50%, 110%); }
  .floatCta.is-show { transform: translate(-50%, 0); }
}

/* タブレット・PC共通: コンテンツの囲みは約70%幅 */
@media screen and (min-width: 768px) {
  .lpMain .no1Card,
  .lpMain .accessSec_table { width: 70%; margin-left: auto; margin-right: auto; }
  .lpMain .whatsSec_cards p,
  .lpMain .whatsSec_cards strong { font-size: 13px; }
  .lpMain .whatsSec_support { justify-content: center; padding-left: 0; }
  .lpMain .whatsSec_ribbon,
  .lpMain .whatsSec_cards { width: 70%; margin-left: auto; margin-right: auto; }
  .lpMain .flowSec_steps,
  .lpMain .flowSec_cond { width: 70%; margin-left: auto; margin-right: auto; }
  .lpMain .aboutSec_title { width: 250px; }
  /* 囲みの幅をKVに合わせ、右カラムの中央にそろえる */
  .lpMain .worrySec_list { width: 70%; margin-left: auto; margin-right: auto; }
  .lpMain .aboutSec_body { padding-left: 0; padding-right: 0; }
  .lpMain .aboutSec_points { width: 70%; margin-left: auto; margin-right: auto; }
  .lpMain .priceBox { width: 70%; margin-left: auto; margin-right: auto; }
  /* KVは右エリアの約70%幅。左固定時と同じ比率で拡大 */
  .lpMain .kvSec_visual { width: 80%; height: auto; aspect-ratio: 390 / 535; margin: 0 auto; }
  .lpMain .kvSec_popup { left: 5%; top: 5%; width: 90%; }
  .lpMain .kvSec_photo { left: 5%; top: 15%; width: 90%; }
  .lpMain .kvSec_catch { left: 5%; top: 50%; width: 90%; }
  .lpMain .kvSec_brand { left: 35%; top: 75%; width: 30%; }
  .lpMain .kvSec_ok { top: 90%; font-size: 14px; height: 35px; }
  .lpMain .kvSec_free { left: 75%; top: 80%; width: 15%; }
  .lpMain .kvSec_date { width: 70%; margin: 25px auto 0; }
  .lpMain .cta { width: calc(100% - 60px); max-width: 420px; }
  .worrySec .loopSlider_track li,
  .flowSec .loopSlider_track li { width: 220px; }
  .worrySec .loopSlider_track img,
  .flowSec .loopSlider_track img { width: 220px; height: 320px; border-radius: 60px; }
  .lpMain .worrySec .secHead_ja { font-size: 19px; }
 }

/* PCのみ左右50%レイアウト。タブレットは本文のみ表示 */
@media screen and (min-width: 1024px) {
  .lpMain {
    width: 50%;
    margin-left: 50%;
    margin-right: 0;
  }
  .pcSide_left {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    overflow-y: auto;
    background: var(--c-pink);
  }
  .pcSide_left { overflow: hidden; }
  .pcSide_inner.pcPhotoSlider { position: relative; width: 100%; height: 100%; padding: 0; border: 50px solid var(--c-gray-bg); background: var(--c-gray-bg); }
  .pcPhoto { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease-in-out; }
  .pcPhoto.is-active { opacity: 1; }
  .pcPhoto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

  .floatCta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pcPhoto { transition: none; }
}