@charset "UTF-8";
/* ==========================================================================
   花嫁ボディラインLP
   本人が承認したデザイン画像（assets/lp01.jpg 〜 lp07.jpg）と同じ見た目にするための
   スタイル。色はぜんぶデザイン画像からスポイトした実測値。
   ここを触るときは、必ずデザイン画像と並べて見比べること。
   ========================================================================== */

:root{
  /* 文字 */
  --ink:      #3B2225;   /* 大見出しの濃い茶 */
  --ink2:     #55494B;   /* 本文 */
  --ink3:     #7B6F70;   /* うすい本文・注記 */
  /* ピンク */
  --pink:     #DA5480;   /* 強調ピンク（見出しの中の色文字） */
  --pink-d:   #C74872;
  --pink-l:   #EE6C8D;
  --pink-pale:#FCE7EE;
  --pink-line:#F3D5DF;
  --rose-a:   #EF7093;   /* リボンの明るいほう */
  --rose-b:   #DB4F76;   /* リボンの濃いほう */
  /* ボタン（デザイン画像の縦断面：上 #F58FA2 → 下 #E0305E） */
  --cta-a:    #F58FA2;
  --cta-b:    #E85579;
  --cta-c:    #DF2E5C;
  /* 金 */
  --gold:     #C6A97C;
  --gold-d:   #A98D5D;
  /* グレー（やらないこと） */
  --gray:     #C2C2C2;
  --gray-tx:  #6E6462;
  /* 地色 */
  --bg:       #FFFAFB;
  --bg-pale:  #FEF9F8;

  --mincho:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --latin:"Cormorant Garamond",serif;
  --hand:"Klee One","Shippori Mincho",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--mincho);
  font-size:14px;
  line-height:1.75;
  color:var(--ink2);
  background:#F6E9EC;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}

.wrap{
  max-width:500px;margin:0 auto;background:#fff;
  overflow:hidden;position:relative;
  box-shadow:0 0 40px rgba(190,130,150,.14);
}
section{position:relative;overflow:hidden}
.inner{padding:0 20px}
.nl{display:block}
.pk{color:var(--pink)}
.hrt-tx{font-style:normal;color:#E76B94}
.mk{background:linear-gradient(transparent 62%,#FBD9E3 62%)}

/* ---- 桜の花びら ---------------------------------------------------------- */
.pt{
  position:absolute;width:15px;height:15px;pointer-events:none;z-index:1;
  background:radial-gradient(120% 120% at 32% 22%,#FDE3EA 0%,#F7BCCE 58%,#F0A0B9 100%);
  border-radius:78% 12% 78% 12%/12% 78% 12% 78%;
  opacity:.5;
}
.pt1{top:5%;left:6%;transform:rotate(24deg)}
.pt2{top:22%;right:8%;transform:rotate(-38deg);width:12px;height:12px;opacity:.4}
.pt3{top:48%;left:3%;transform:rotate(58deg);width:18px;height:18px;opacity:.42}
.pt4{top:68%;right:5%;transform:rotate(15deg);opacity:.45}
.pt5{top:86%;left:12%;transform:rotate(-20deg);width:13px;height:13px;opacity:.38}
.pt6{top:36%;right:22%;transform:rotate(44deg);width:11px;height:11px;opacity:.32}

/* ---- リボン帯（デザインじゅうに出てくる形） ------------------------------ */
.drib{
  position:relative;display:block;width:-moz-fit-content;width:fit-content;
  max-width:100%;margin:0 auto;padding:5px 28px;
  font-size:13.5px;line-height:1.6;letter-spacing:.06em;color:#fff;
  background:linear-gradient(180deg,var(--rose-a) 0%,var(--rose-b) 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%);
  text-align:center;
}
.drib.drib-pale{
  background:linear-gradient(180deg,#F49BB2 0%,#EC7396 100%);
  font-size:12.5px;padding:4px 26px;
}

/* ---- セクションの飾りのバリエーション --------------------------------------
   リボン帯（.drib）ばかりが続くと単調なので、となり合うセクションでは
   別の飾りを使う。並び順は
     選ばれる理由＝リボン ／ 強み＝金の細線ラベル ／ 魅力＝ピンクのピル
     ／ 続けられる花嫁づくり＝左右線 ／ すべてLINEで完結＝太字＋マーカー
   （料金のプラン名リボンはカードの部品なのでリボンのまま） */

/* 金の細線＋明朝の小見出し（ラベル型） */
.dlabel{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mincho);font-size:12.5px;font-weight:600;
  letter-spacing:.18em;color:var(--gold-d);line-height:1.6;
}
.dlabel::before{content:"";flex:0 0 26px;height:1px;background:var(--gold)}
.dlabel>span{flex:0 0 auto}

/* ピンクのピル型バッジ */
.dpill{
  position:relative;display:block;width:-moz-fit-content;width:fit-content;
  max-width:100%;padding:5px 20px;border-radius:999px;text-align:center;
  background:#FDEBF0;border:1px solid #F2BFD0;
  color:var(--pink-d);font-size:12.5px;letter-spacing:.08em;line-height:1.6;
}

/* 左右に線を引いただけの見出し */
.dlined{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;letter-spacing:.12em;color:#8C6C73;line-height:1.6;
}
.dlined::before{content:"";flex:0 0 22px;height:1px;background:#E4C6CF}
.dlined::after{content:"";flex:0 0 28px;height:1px;background:#E4C6CF}
.dlined>span{flex:0 0 auto}

/* ---- 金の唐草つきの見出し ------------------------------------------------ */
.dsec-h{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:20px;font-weight:600;line-height:1.5;color:var(--pink);
  letter-spacing:.04em;text-align:center;
}
.dsec-h .flr{color:var(--gold);flex:0 0 auto}
.dsec-h .flr.r{transform:scaleX(-1)}
.dsec-h .sh-tx{flex:0 1 auto}
.dsec-h .sh-tx .pk{font-family:var(--latin);font-size:1.35em;font-weight:600;color:inherit}

/* ---- CTAボタン ----------------------------------------------------------- */
/* 押せるものだと一目で分かるように、大きく・影を強く・まわりに余白を取る。
   「無料」の丸とボタン文字がぶつからないよう、丸のぶんだけ左に余白を確保する。 */
.dbtn{
  position:relative;display:flex;align-items:center;gap:10px;
  width:100%;max-width:348px;margin:0 auto;height:68px;
  padding:0 52px 0 10px;border-radius:999px;color:#fff;
  background:linear-gradient(180deg,var(--cta-a) 0%,var(--cta-b) 46%,var(--cta-c) 100%);
  box-shadow:0 12px 26px rgba(216,62,102,.42),
             0 3px 8px rgba(216,62,102,.28),
             inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 0 0 1.5px rgba(255,255,255,.6);
}
.dbtn::before{
  content:"";position:absolute;inset:-6px;border-radius:999px;
  border:1.5px solid rgba(240,150,175,.55);
}
.b-free{
  flex:0 0 auto;display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;background:#fff;
  color:var(--cta-c);font-size:15.5px;font-weight:600;letter-spacing:0;line-height:1;
  box-shadow:0 2px 6px rgba(150,20,60,.22);
}
.b-free.flat{
  width:auto;height:auto;background:none;color:#fff;box-shadow:none;
  font-size:16px;font-weight:600;padding:0 0 0 4px;
}
.b-line{
  flex:0 0 auto;display:grid;place-items:center;
  width:44px;height:38px;border-radius:10px;background:#fff;color:#06C755;
}
.b-line .lic{display:block;line-height:0}
.b-tx{flex:1 1 auto;min-width:0;text-align:center;font-size:15px;
      letter-spacing:.01em;white-space:nowrap}
.b-arw{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(150,20,60,.22);
}
.b-arw::before{
  content:"";position:absolute;left:12px;top:50%;
  width:9px;height:9px;margin-top:-4.5px;
  border-top:2px solid var(--cta-c);border-right:2px solid var(--cta-c);
  transform:rotate(45deg);
}
.dbtn.line{padding-left:11px;gap:8px}
.dbtn.plain{padding-left:16px}

/* ---- メタ行（完全オンライン｜全国対応｜登録30秒） ------------------------ */
.meta-row{
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:3px;padding:12px 2px;font-size:10px;color:var(--ink2);letter-spacing:-.04em;
}
.meta-row .mi{display:flex;align-items:center;gap:2px;white-space:nowrap}
.meta-row .mic{color:var(--pink-l);line-height:0;flex:0 0 auto}
.meta-row .msep{width:1px;height:14px;background:#EAD6DB;flex:0 0 auto}

/* ==========================================================================
   1. FV（デザイン 01 上半分）
   ========================================================================== */
/* デザイン01の上半分（y=0〜880）の再現。
   ・文字は左よせ  ・花嫁の写真は右はしに、いちばん上からFVの下まで縦に大きく
   ・丸バッジ3つは横一列で、写真の左下（ブーケ）に重ねる

   寸法はぜんぶ「デザイン画像（幅864px）の実測値 ÷ 8.64」＝枠幅の何％か で持つ。
   --u が枠幅の1％（枠は max-width:500px なので min(1vw,5px) がちょうど1％）。
   こうすると 320px でも 430px でも、デザインを縮めたものと同じ形になる。 */
.dfv{
  --u:min(1vw,5px);
  position:relative;min-height:397px;
  padding:calc(9.74 * var(--u)) 0 0;
  /* デザイン01のFVの地色はほぼ白（実測 #FCFBFC〜#FDFDFD）。ピンクにしない。
     丸バッジのあたりだけ、デザインのブーケぶんほんのり明るくする。 */
  background:
    radial-gradient(74% 40% at 33% 80%,#FEFCF7 0%,rgba(254,252,247,0) 68%),
    linear-gradient(180deg,#FCFBFD 0%,#FDFDFD 44%,#FDFBFB 100%);
}
/* 写真＝デザイン01の x=515〜864 / y=0〜880 をそのまま切り出したもの
   （assets/d_fv_bride.jpg・349×880）。焼き込みの文字は x<=512 にしか無いので
   写り込まない。顔は頭のてっぺんからあごまで全部入っている。
   左はしをぼかすと顔にかかるので、マスクはかけない。
   幅 40.4% = 349/864 なので、拡大率がデザインとぴったり同じ（切り落ちゼロ）。 */
.dfv-photo{
  position:absolute;top:0;right:0;bottom:0;width:40.4%;
  z-index:1;line-height:0;overflow:hidden;pointer-events:none;
}
.dfv-photo .dfv-img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;
}
/* 丸バッジの上に見えているブーケ（デザイン01 x150-578 / y534-645 の切り出し）。
   位置も大きさも％なので、画面幅が変わってもデザインと同じところに出る。 */
.dfv-bq{
  position:absolute;left:17.4%;top:60.7%;width:49.5%;
  z-index:1;line-height:0;pointer-events:none;
}
.dfv-bq img{width:100%;height:auto;display:block}
.dfv-in{position:relative;z-index:2;padding:0 0 0 5.13%;text-align:left}

/* 手書き風のリード。2行目は1行目より右にずらす（デザインどおりの階段） */
.dfv-lead{
  font-family:var(--hand);font-size:17px;font-size:calc(4.36 * var(--u));
  line-height:1.42;color:#4A3134;letter-spacing:.01em;
}
.dfv-lead .hl{display:block;position:relative;width:-moz-fit-content;width:fit-content}
.dfv-lead .hl::after{
  content:"";position:absolute;left:-2px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(238,157,182,0) 0%,#EE9DB6 16%,#EE9DB6 78%,rgba(238,157,182,0) 100%);
  transform:rotate(-1.6deg);transform-origin:left center;
}
.dfv-lead .hl:nth-child(1)::after{right:46%}
.dfv-lead .hl:nth-child(2){margin-left:calc(6.92 * var(--u))}
.dfv-lead .hl:nth-child(2)::after{left:6%;right:26%;bottom:-3px}

/* 大見出し。行ごとに幅を文字ぶんだけにしたいので縦のフレックスにする
   （こうしないと「ドレスが似合う」の下の点線が行いっぱいまで伸びる） */
.dfv-h1{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-top:calc(6.41 * var(--u));color:#472A2D;font-weight:700;letter-spacing:0;
}
.dfv-h1 .ln{display:block;line-height:1.18}
.dfv-h1 .l1{
  font-size:33px;font-size:calc(8.46 * var(--u));
  position:relative;padding-bottom:calc(2.56 * var(--u));
}
.dfv-h1 .l1::after{
  content:"";position:absolute;left:1px;right:0;bottom:0;
  height:4px;height:calc(1.03 * var(--u));
  background-image:radial-gradient(circle,#EFA6BE 1.7px,transparent 1.8px);
  background-size:9px 4px;background-size:calc(2.31 * var(--u)) calc(1.03 * var(--u));
  background-repeat:repeat-x;
}
/* 助詞（ひらがな）だけ小さい＝デザイン01の組み方（build.py が .sm を付ける） */
.dfv-h1 .sm{font-size:.72em}
.dfv-h1 .fvbig{color:#C05B72}
.dfv-h1 .l2{
  font-size:30px;font-size:calc(7.69 * var(--u));
  margin-top:calc(2.05 * var(--u));
}

.dfv-rib{
  margin:calc(3.59 * var(--u)) 0 0;width:212px;width:calc(54.4 * var(--u));max-width:100%;
  padding:calc(.51 * var(--u)) 0;
  font-size:11.5px;font-size:calc(2.95 * var(--u));
  letter-spacing:.04em;line-height:1.55;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%,8px 50%);
}

/* 丸バッジ3つ＝左よせの横一列。写真の左下（ブーケのあたり）に重なる。
   中の文字は円よりすこし広い＝デザインどおりなので、はみ出させる */
.dfv-badges{
  display:flex;align-items:flex-start;gap:calc(2.05 * var(--u));
  margin:calc(13.33 * var(--u)) 0 0 calc(-1.28 * var(--u));
  padding:0;position:relative;z-index:2;
}
.dfv-badges li{
  position:relative;flex:0 0 auto;
  width:76px;height:76px;
  width:calc(19.49 * var(--u));height:calc(19.49 * var(--u));
  border-radius:50%;
  background:rgba(255,255,255,.92);border:1.2px solid #F2C7D5;
  box-shadow:0 2px 10px rgba(214,140,165,.10);
}
.fvb-ic{
  position:absolute;top:-16px;top:calc(-4.1 * var(--u));
  left:50%;transform:translateX(-50%);
  color:#EFA9BF;line-height:0;
}
.fvb-ic svg{width:calc(5.64 * var(--u));height:calc(5.64 * var(--u))}
.dfv-badges .fvb-tx{
  position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);
  font-size:11px;font-size:calc(2.82 * var(--u));
  line-height:1.5;color:#4B3B3D;text-align:center;white-space:nowrap;
}
.dfv-badges .fvb-tx b{display:block;font-weight:500}
.dfv-badges .fvb-tx .pk{font-size:1.3em;color:var(--pink);font-weight:600}
/* 数字（家で15分）はまわりより大きいが、色は本文とおなじ濃い茶 */
.dfv-badges .fvb-tx .dg{font-size:1.42em;color:#3B2225;font-weight:600}

.dfv-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:5.64%;z-index:3;display:block}

/* FVの高さは幅に比例させる（デザイン01は 864:880）。こうすると 320〜500px の
   どの幅でも、デザインを縮めたものとぴったり同じ縦横比になる。
   aspect-ratio が使えない古いブラウザは上の min-height:397px で受ける。 */
@supports (aspect-ratio:864/880){
  .dfv{aspect-ratio:864/880;min-height:0}
}

/* ==========================================================================
   2. お悩み ＋ CTA ＋ 受け取りまでの3ステップ（デザイン 01 下半分）
   ========================================================================== */
/* 施主の指示（2026-07-29）で、ここだけ濃い茶の面にしている。
   ページ全体が明るいピンクで続くので、悩みの場面だけ空気を落として、
   すぐ下のピンクのCTAボタンをいちばん目立たせるための面。 */
.dworry{
  background:
    linear-gradient(105deg,rgba(58,46,43,.97) 0%,rgba(74,59,55,.94) 48%,rgba(84,68,63,.90) 100%),
    linear-gradient(180deg,#3A2E2B 0%,#453733 62%,#4A3B37 100%);
  padding:26px 0 38px;
  color:#fff;
}
.dworry .pt{display:none}  /* 濃い面ではシミに見えるので出さない */
.dw-h{text-align:center;font-size:19.5px;font-weight:600;color:#fff;letter-spacing:.02em}
.dw-h .pk{
  color:#F7A9C0;
  background-image:linear-gradient(90deg,rgba(247,169,192,0) 2%,#E9799C 12%,#E9799C 88%,rgba(247,169,192,0) 100%);
  background-repeat:no-repeat;background-size:100% 2px;background-position:0 98%;
  padding-bottom:3px;
}

.dw-card{
  position:relative;margin-top:18px;padding:14px 14px 14px 12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:16px;
  box-shadow:0 2px 18px rgba(0,0,0,.22);
}
.dw-list{padding-right:48px}
.dw-list li{
  display:flex;align-items:flex-start;gap:9px;
  padding:5.5px 0;font-size:11px;line-height:1.5;color:#F4ECEB;letter-spacing:-.02em;
}
.dw-list .ckb{flex:0 0 auto;margin-top:1px}
.dw-list .wtx{flex:1 1 auto}
.dw-list .pk{color:#F9A6BE}

.dw-ph{
  position:absolute;right:-14px;top:56%;transform:translateY(-46%);
  width:76px;height:76px;
}
.dw-ph img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  box-shadow:0 3px 14px rgba(0,0,0,.34);
}
.dw-swirl{position:absolute;right:-4px;top:-14px}

/* 解決の提示から先は明るい面（お悩みの箱だけ暗く／2026-07-30 本人指示） */
.dsolve{
  background:linear-gradient(180deg,#FDF6F8 0%,#FBEDF2 100%);
  padding:26px 0 36px;
}
.dsolve .dw-solve{color:#4A3B37;margin-top:0}
.dsolve .dw-solve>span::before,.dsolve .dw-solve>span::after{background:#D98BA4}
.dsolve .dw-solve .pk{color:#E0526E}
.dsolve .dcta-flag>span{
  border:1px solid #F2D3DD;
  box-shadow:0 3px 10px rgba(190,120,145,.20);
}
.dsolve .dw-recv-h{color:#4A3B37}
.dsolve .dw-recv-h::before,.dsolve .dw-recv-h::after{background:rgba(199,72,114,.25)}
.dsolve .rs-list{
  background:#fff;border:1px solid #F2D5DE;
  box-shadow:0 4px 14px rgba(190,120,145,.14);
}
.dsolve .rs .rs-tx{color:#5B4B46}
.dsolve .rs.wide .rs-tx{color:#5B4B46}
.dsolve .rs.wide .rs-tx .pk{color:#E0526E}
.dsolve .rs-ic{color:#D9779A}

/* ＼〜／の飾りは、この1か所だけ残す（施主の指示で他は外した） */
.dw-solve{
  position:relative;margin-top:24px;text-align:center;
  font-size:16px;color:#fff;letter-spacing:.01em;
}
.dw-solve>span{position:relative;display:inline-block;padding:0 22px}
.dw-solve>span::before,.dw-solve>span::after{
  content:"";position:absolute;top:4px;width:1.4px;height:26px;background:#F0DCDA;
}
.dw-solve>span::before{left:0;transform:rotate(-20deg)}
.dw-solve>span::after{right:0;transform:rotate(20deg)}
.dw-solve .pk{font-size:1.5em;color:#FF87AB;font-weight:600}
.dw-chev{
  display:block;width:26px;height:12px;margin:4px auto 0;
  border-bottom:2px solid #EFA6BC;border-radius:0 0 60% 60%;
}

.dcta{margin-top:20px;padding:0 4px}
/* 「簡単30秒で完了」＝＼／ をやめて小さな旗（ピル）にした */
.dcta-flag{position:relative;text-align:center;font-size:12px;margin-bottom:12px}
.dcta-flag>span{
  position:relative;display:inline-block;padding:3px 15px 4px;border-radius:999px;
  background:#fff;color:#C74872;letter-spacing:.04em;line-height:1.5;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.dcta-flag>span::after{
  content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  border-top:6px solid #fff;border-left:5px solid transparent;border-right:5px solid transparent;
}

/* 受け取りまでの3ステップ ＝ 左右に線を引くだけの見出し（＼／は外した） */
.dw-recv{margin-top:30px}
.dw-recv-h{display:flex;align-items:center;gap:10px;font-size:15px;color:#fff;letter-spacing:.06em}
.dw-recv-h::before,.dw-recv-h::after{content:"";flex:1 1 auto;height:1px;background:rgba(255,255,255,.26)}
.dw-recv-h>span{position:relative;padding:0 6px;flex:0 0 auto}

.rs-list{
  display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:4px;
  margin-top:14px;padding:14px 8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:16px;
}
.rs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}
.rs-n{
  flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:linear-gradient(180deg,#F2687F 0%,#DE3F63 100%);
  color:#fff;font-family:var(--latin);font-size:15px;font-weight:600;line-height:1;
}
.rs-ic{color:#F3B4C8;line-height:0;flex:0 0 auto}
.rs .rs-tx{flex:0 0 100%;text-align:center;font-size:11px;line-height:1.45;color:#F4ECEB}
.rs.wide{flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start}
.rs.wide .rs-n{margin-top:2px}
.rs.wide .rs-tx{flex:1 1 auto;text-align:left;font-size:10px;line-height:1.5}
.rs.wide .rs-tx .pk{color:#FF9CBA}

/* ==========================================================================
   3. 選ばれる理由（POINT）＋ プログラム内容（デザイン 02）
   ========================================================================== */
.dreasons{
  padding:20px 0 26px;
  background:linear-gradient(180deg,#FFFAFC 0%,#FEF2F4 40%,#FFF9FA 72%,#FDF4F5 100%);
}
.dr-rib{font-size:13px}
.dr-h{margin-top:12px;text-align:center;color:#2F1614;font-weight:600}
.dr-h .ln{display:block;line-height:1.34}
.dr-h .a{font-size:20.5px}
.dr-h .b{font-size:21px}
.dr-h .gyaku{font-size:30px;color:#DC537F;letter-spacing:-.01em;font-weight:600}

.dr-body{position:relative;display:flex;gap:9px;margin-top:16px;padding-right:16px}
.dr-bride{flex:0 0 30%;align-self:stretch;overflow:hidden;border-radius:0 12px 12px 0}
.dr-bride img{width:100%;height:100%;object-fit:cover;object-position:48% 12%}
.dr-points{flex:1 1 auto;display:grid;gap:13px;align-content:center}

.dr-p{
  display:grid;column-gap:5px;
  grid-template-columns:46px minmax(0,1fr) 52px;
  grid-template-areas:"badge title title" "badge text  icon";
}
.dr-badge{
  grid-area:badge;position:relative;width:46px;height:43px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  align-self:start;margin-top:2px;
}
.dr-badge svg{position:absolute;inset:0;width:100%;height:100%}
.dr-badge svg path{fill:#E8598A}
.dr-badge i,.dr-badge b{position:relative;z-index:2;color:#fff;display:block;text-align:center}
.dr-badge i{
  font-family:var(--latin);font-style:normal;font-size:8px;letter-spacing:.12em;
  line-height:1;margin-top:6px;
}
.dr-badge b{font-family:var(--latin);font-size:16px;font-weight:600;line-height:1;margin-top:-1px}
.dr-t{
  grid-area:title;font-size:13.5px;font-weight:600;color:#CB5379;line-height:1.4;
  letter-spacing:.01em;padding-bottom:4px;margin-bottom:4px;
  border-bottom:1px solid #EFE0E2;
}
.dr-x{grid-area:text;font-size:10.5px;line-height:1.6;color:#584C4E}
.dr-ph{grid-area:icon;align-self:center;width:52px;height:52px;overflow:hidden}
.dr-ph img{width:100%;height:100%;object-fit:cover}
/* POINT01 の写真だけ丸（デザインどおり）。02・03 はイラストなので切り抜かない */
.dr-points>li:nth-child(1) .dr-ph,
.dr-points>li:nth-child(1) .dr-ph img{border-radius:50%}
.dr-points>li:nth-child(2) .dr-ph,
.dr-points>li:nth-child(3) .dr-ph{height:auto}
.dr-points>li:nth-child(2) .dr-ph img,
.dr-points>li:nth-child(3) .dr-ph img{height:auto;object-fit:contain}

/* プログラム内容 */
.dr-prog{margin-top:24px}
.pg-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 6px;margin-top:16px}
.pg{position:relative;text-align:center}
.pg-ring{
  position:relative;display:grid;place-items:center;align-content:center;gap:3px;
  width:112px;height:112px;margin:0 auto;border-radius:50%;padding:0 3px;
  background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,#FDF4F6 74%,#FBEAEE 100%);
  border:1px solid #F7E2E8;
}
.pg-ic{color:var(--gold);line-height:0}
.pg-ring b{font-size:11px;font-weight:600;color:#4A3634;line-height:1.3;letter-spacing:-.02em}
.pg-tx{display:block;margin-top:5px;font-size:10px;line-height:1.45;color:#6C5F60}
.pg.new .pg-ring{border-color:#F1B9CB;background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,#FDEFF3 76%,#FBE2E9 100%)}
.pg.new .pg-ring b{color:var(--pink)}
.pg-new{
  position:absolute;top:-8px;right:20px;z-index:3;
  display:grid;place-items:center;width:42px;height:38px;
  font-family:var(--latin);font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.02em;
  background:#E96C90;
  border-radius:52% 48% 44% 56%/54% 44% 56% 46%;
  transform:rotate(-8deg);
}
/* すべてLINEで完結！ ＝ リボンをやめて太字ピンク＋下線マーカー */
.pg-mark{margin-top:24px;text-align:center;line-height:1.6}
.pg-mark>span{
  display:inline-block;padding:0 6px;
  font-size:16.5px;font-weight:600;color:var(--pink-d);letter-spacing:.03em;
  background:linear-gradient(transparent 60%,#FAD3E0 60%);
}
.pg-note{margin-top:10px;text-align:center;font-size:12.5px;color:#4A3E40;line-height:1.7}

/* ==========================================================================
   4. 強み ＋ 選ばれる3つの理由 ＋ トレーナー（デザイン 03）
   ========================================================================== */
.dstrength{
  padding:16px 0 26px;
  background:linear-gradient(180deg,#FEF7F7 0%,#FFFDFD 34%,#FDF9FA 100%);
}
.ds-duo{
  position:absolute;top:0;right:0;width:48%;z-index:0;
  -webkit-mask-image:radial-gradient(118% 108% at 76% 24%,#000 52%,transparent 82%);
          mask-image:radial-gradient(118% 108% at 76% 24%,#000 52%,transparent 82%);
}
.ds-duo img{width:100%;height:auto}
.dstrength .inner{position:relative;z-index:2}
/* 右上の写真にかからないよう、字間をつめて白い縁取りを足してある */
.ds-rib{margin:0;max-width:none;font-size:12px;letter-spacing:.08em;
        text-shadow:0 1px 3px rgba(255,255,255,.92)}
.ds-h{margin-top:14px;color:#3D1D20;font-weight:600;letter-spacing:.01em}
.ds-h .ln{display:block;line-height:1.4}
.ds-h .ln:first-child{font-size:23px}
.ds-h .ln+.ln{font-size:17px;margin-top:2px}
.ds-h .pk{color:#D8557E;font-size:1.16em}
.ds-sub{margin-top:12px;font-size:11.5px;line-height:1.75;color:#5A4C4E;max-width:66%}

.ds-card{
  margin-top:22px;padding:14px 10px 16px;
  background:rgba(255,255,255,.94);border:1px solid #F6E7EB;border-radius:16px;
  box-shadow:0 2px 14px rgba(206,150,168,.09);
}
.ds-h3{font-size:17px}
.ds-h3 .sh-tx{color:#BB5172}
.ds-list{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:14px}
.ds-list li{text-align:center;padding:12px 2px;background:#fff;border:1px solid #F6E7EB;border-radius:12px}
.st-ic{display:block;color:#EE7F9E;line-height:0;margin:0 auto 8px;width:34px}
.ds-list b{display:block;font-size:10.5px;font-weight:600;color:#C55178;line-height:1.35;letter-spacing:-.045em}
.ds-list li>span{display:block;margin-top:4px;font-size:9.5px;line-height:1.45;color:#6C5F60}

/* トレーナー */
.dtrainer{
  position:relative;margin-top:22px;padding:16px 12px;
  background:rgba(255,255,255,.92);border:1px solid #F6E7EB;border-radius:16px;
  display:grid;grid-template-columns:98px minmax(0,1fr);column-gap:10px;
  grid-template-areas:"ph body" "ph creds";
}
.tr-ph{grid-area:ph;width:98px;height:98px;border-radius:50%;overflow:hidden;align-self:start;margin-top:6px}
.tr-ph img{width:100%;height:100%;object-fit:cover}
.tr-body{grid-area:body;align-self:center}
.tr-name{font-size:15.5px;font-weight:600;color:#C1637E;letter-spacing:.05em}
.tr-quote{margin-top:5px;font-size:10px;line-height:1.6;color:#4A3E40;letter-spacing:-.02em}
.tr-creds{
  grid-area:creds;position:relative;margin-top:10px;padding:9px 8px;
  border:1px solid #E3CFA6;border-radius:4px;
}
.tr-creds::before,.tr-creds::after{content:"";position:absolute;width:16px;height:16px;border:1px solid #E3CFA6}
.tr-creds::before{left:3px;top:3px;border-right:0;border-bottom:0}
.tr-creds::after{right:3px;bottom:3px;border-left:0;border-top:0}
.tr-creds li{display:flex;align-items:flex-start;gap:6px;padding:2px 0}
.cr-ic{color:#C79A4E;flex:0 0 auto;line-height:0;margin-top:2px}
.tr-creds li>span{font-size:9.5px;line-height:1.5;color:#4A3E40;letter-spacing:-.02em}

/* ==========================================================================
   5. 魅力 ＋ やること、やらないこと（デザイン 04 上半分）
   ========================================================================== */
.dappeal{
  padding:18px 0 24px;
  background:linear-gradient(180deg,#FEF6F8 0%,#FFFDFD 30%,#FDF7F9 100%);
}
.da-duo{
  position:absolute;top:0;right:0;width:47%;z-index:0;
  -webkit-mask-image:radial-gradient(118% 106% at 74% 28%,#000 54%,transparent 84%);
          mask-image:radial-gradient(118% 106% at 74% 28%,#000 54%,transparent 84%);
}
.da-duo img{width:100%;height:auto}
.dappeal .inner{position:relative;z-index:2}
.da-rib{margin:16px 0 0;overflow:visible}
.da-rib .crown{position:absolute;top:-15px;left:50%;transform:translateX(-50%)}
.da-h{margin-top:16px;font-weight:600;letter-spacing:.01em}
.da-h .ln{display:block;line-height:1.28}
.da-h .ln:first-child{font-size:25px;color:#3B2225}
.da-h .ln+.ln{font-size:29px}
.da-h .pk{color:#E15C86}
.da-sub{margin-top:8px;font-size:12.5px;color:#5A4C4E;letter-spacing:.01em}

.da-badges{display:flex;gap:8px;margin-top:14px;position:relative;z-index:2}
.da-badges li{
  flex:0 0 auto;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#FFFFFF 0%,#FDF3F6 72%,#FBE9EE 100%);
  border:1.4px solid #DCC08A;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 2px 10px rgba(214,160,180,.12);
}
.apb-ic{color:#EC7C9C;line-height:0}
.da-badges .apb-tx{font-size:11.5px;line-height:1.4;color:#3F3234;text-align:center}

/* やること・やらないこと */
.mt-wrap{
  margin-top:24px;padding:12px 8px 14px;
  background:rgba(255,255,255,.92);border:1px solid #F6E7EB;border-radius:16px;
}
.mt-wrap .dsec-h{font-size:17px}
.mt-cols{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px}
.mt-box{position:relative;padding:22px 3px 12px;border-radius:12px;border:1px solid #F0E4E6;background:#FDFCFC}
.mt-box.yes{border-color:#F6DBE3;background:#FEF7F9}
.mt-band{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  min-width:104px;padding:2px 12px;border-radius:999px;text-align:center;
  font-size:12px;letter-spacing:.04em;color:#fff;white-space:nowrap;
}
.mt-box.no .mt-band{background:#C2C2C2}
.mt-box.yes .mt-band{background:#EE5E81}
.mt-items{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.mt-items li{position:relative;text-align:center;padding-top:9px}
.mt-ic{display:grid;place-items:center;width:42px;height:42px;margin:0 auto;border-radius:50%;line-height:0}
.mt-box.no .mt-ic{background:#F5F4F4;color:#6E6462}
.mt-box.yes .mt-ic{background:#FDEFF3;color:#EE5E81}
.mt-items .xmk,.mt-items .ckr{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2}
.mt-items li>span{display:block;margin-top:5px;font-size:9.5px;line-height:1.4;color:#413536;white-space:nowrap;letter-spacing:-.05em}
.mt-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font-size:12.5px;color:#5A4C4E}
.mt-note .hm{flex:0 0 auto;width:13px;height:12px}

/* ==========================================================================
   6. お客様の声（デザイン 04 中ほど）
   ========================================================================== */
.dvoices{padding:20px 0 22px;background:linear-gradient(180deg,#FFFCFD 0%,#FDF6F8 100%)}
.v-list{display:grid;gap:9px;margin-top:16px}
.v-card{
  display:grid;grid-template-columns:74px minmax(0,1fr);column-gap:12px;
  align-items:center;padding:12px 14px;
  background:#fff;border:1px solid #F6E7EB;border-radius:14px;
  box-shadow:0 2px 10px rgba(206,150,168,.08);
}
.v-ph{grid-row:span 2;width:74px;height:74px;border-radius:50%;overflow:hidden}
.v-ph img{width:100%;height:100%;object-fit:cover}
.v-meta{font-size:14px;color:#3B2225;letter-spacing:.02em;line-height:1.4}
.v-meta b{font-weight:500}
.v-meta i{font-style:normal;color:#C99AA6;margin:0 4px}
.v-meta em{font-style:normal;color:var(--pink)}
/* 引用符（“ ”）の飾りは外した。閉じ引用符が「D」に見えると指摘があったため。
   本文の「」はそのまま。 */
.v-quote{
  position:relative;margin-top:4px;padding:0;
  font-size:12px;line-height:1.6;color:#413536;
}
.v-quote .vq{display:block}
.v-note{margin-top:10px;text-align:center;font-size:9.5px;color:#A0908F;line-height:1.6}

/* ==========================================================================
   7. 入ったあとの流れ（デザイン 04 下ほど）
   ========================================================================== */
.dflow{padding:18px 0 20px;background:#FFFCFD}
.fl-list{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:16px}
.fl{position:relative;text-align:center}
.fl+.fl::before{
  content:"";position:absolute;left:-15px;top:31px;width:20px;height:7px;
  background-image:radial-gradient(circle,#F0A7BE 1.4px,transparent 1.5px);
  background-size:6px 7px;background-repeat:repeat-x;
}
.fl+.fl::after{
  content:"";position:absolute;left:3px;top:28px;
  border-left:6px solid #F0A7BE;border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.fl-ring{
  position:relative;display:grid;place-items:center;
  width:62px;height:62px;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 50% 44%,#FFFFFF 0%,#FDF3F6 72%,#FAE6EC 100%);
}
.fl-n{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:2;
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,#F3717F 0%,#E9525F 100%);
  color:#fff;font-family:var(--latin);font-size:13px;font-weight:600;line-height:1;
}
.fl-ic{color:#EE7E9C;line-height:0;margin-top:4px}
.fl-tx{display:block;margin-top:6px;font-size:10px;line-height:1.4;color:#413536;letter-spacing:-.04em}

/* ==========================================================================
   中間CTA／最終CTA
   ========================================================================== */
.dmid{background:#FFFCFD}
.dmid .mc-band{position:relative;overflow:hidden;padding:18px 16px 20px}
.dmid .mc-in{position:relative;z-index:3}
.mc-h{
  text-align:center;font-size:20px;font-weight:600;line-height:1.45;
  color:#3B2225;letter-spacing:.01em;margin-bottom:16px;
}
.mc-h .nl:first-child{color:#DA5480}

/* デザイン 04 の下 ＝ ピンクの帯・左に花嫁の写真 */
.dmid.m1 .mc-band{
  background:
    radial-gradient(90% 120% at 12% 50%,#FBDCE6 0%,rgba(251,220,230,0) 62%),
    linear-gradient(180deg,#FCE9EF 0%,#F9DDE6 52%,#FBE7EE 100%);
  padding:16px 10px 18px 64px;
}
.mc-ph{position:absolute;left:0;top:0;bottom:0;width:76px;z-index:1;overflow:hidden}
.mc-ph img{width:100%;height:100%;object-fit:cover;object-position:52% 26%}
.dmid.m1 .mc-band::after{
  content:"";position:absolute;left:46px;top:0;bottom:0;width:40px;z-index:2;
  background:linear-gradient(90deg,rgba(250,224,233,0) 0%,#FAE0E9 84%);
}
.dmid.m1 .mc-h{font-size:17.5px;color:#3B2225;margin-bottom:12px}
.dmid.m1 .mc-h .nl:first-child{color:#3B2225}
.dmid.m1 .dbtn{max-width:100%;height:58px;padding:0 38px 0 8px;gap:6px}
.dmid.m1 .b-line{width:36px;height:31px;border-radius:8px}
.dmid.m1 .b-free.flat{font-size:13.5px;padding:0 0 0 2px}
.dmid.m1 .b-tx{font-size:13px}
.dmid.m1 .b-arw{width:30px;height:30px;right:7px}
.dmid.m1 .b-arw::before{left:10px;width:8px;height:8px;margin-top:-4px}

/* デザイン 06・07 の下 ＝ 白地・左にバラ */
.mc-rose{position:absolute;left:-16px;bottom:-8px;width:92px;z-index:1}
.mc-rose img{width:100%;height:auto}
.dmid.m2 .mc-band,.dmid.final .mc-band{
  background:linear-gradient(180deg,#FFFDFD 0%,#FEF8F9 100%);
  padding:22px 16px;
}

/* ==========================================================================
   8. 中間バナー（デザイン 05）
   ========================================================================== */
.dbanner{
  padding:20px 0 22px;
  background:linear-gradient(180deg,#FFFBFC 0%,#FEFBFB 60%,#FDF8F9 100%);
}
.bn-ph{
  position:absolute;top:0;right:0;width:42%;height:100%;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);
          mask-image:linear-gradient(90deg,transparent 0,#000 34%);
}
.bn-ph img{width:100%;height:100%;object-fit:cover}
.dbanner .inner{position:relative;z-index:2}
.bn-rib{margin:0;max-width:none}
.bn-h{margin-top:12px;font-weight:600;letter-spacing:.01em}
.bn-h .ln{display:block;line-height:1.32}
.bn-h .ln:first-child{font-size:22px;color:#3B2225}
.bn-h .pk{font-size:24px;color:#DE4C7A}
.bn-sub{margin-top:10px;font-size:10.5px;line-height:1.7;color:#4A3E40;max-width:70%;letter-spacing:-.01em}

/* ==========================================================================
   9. 入ったあとの、ある1日（デザイン 06）
   ========================================================================== */
.doneday{padding:18px 0 20px;background:#FFFCFD}
.od-list{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:18px}
.od{position:relative;text-align:center;padding:15px 2px 13px;border:1px solid #F7EAEE;border-radius:14px;background:#FFFDFD}
.od+.od::before{
  content:"";position:absolute;left:-10px;top:46px;width:14px;height:7px;
  background-image:radial-gradient(circle,#F0A7BE 1.3px,transparent 1.4px);
  background-size:5px 7px;background-repeat:repeat-x;z-index:2;
}
.od-n{
  position:absolute;top:-9px;left:8px;
  display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:linear-gradient(180deg,#F2687F 0%,#E44C6B 100%);
  color:#fff;font-family:var(--latin);font-size:12.5px;font-weight:600;line-height:1;
}
.od-ic{display:block;color:#EE7E9C;line-height:0;margin:0 auto 4px;width:30px}
.od-time{display:block;font-size:12px;font-weight:600;color:#D9557F;line-height:1.4}
.od-tx{display:block;margin-top:2px;font-size:9px;line-height:1.45;color:#4A3E40;letter-spacing:-.03em}
.od-note{margin-top:14px;text-align:center;font-size:12px;color:#4A3E40}

/* ==========================================================================
   10. 料金（デザイン 07 上）
   ========================================================================== */
.dprice{padding:18px 0;background:linear-gradient(180deg,#FFFDFC 0%,#FDF8F8 100%)}
.pr-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.pr-card{
  position:relative;padding:20px 6px 12px;text-align:center;
  background:#fff;border:1px solid #F6E7EB;border-radius:14px;
  box-shadow:0 2px 10px rgba(206,150,168,.08);
}
.pr-rib{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-size:11.5px;padding:3px 20px;white-space:nowrap;
  background:linear-gradient(180deg,#EE93A6 0%,#E77F96 100%);
}
.pr-amt{display:flex;align-items:baseline;justify-content:center;gap:1px;color:#E2557C;line-height:1;margin-top:4px}
.pr-amt b{font-family:var(--latin);font-size:32px;font-weight:500;letter-spacing:-.01em}
.pr-amt i{font-style:normal;font-size:13.5px;letter-spacing:-.02em}
.pr-badge{display:block;margin:9px 8px 0;padding:2px 6px;border-radius:3px;background:#FCF0F3;color:#5A4C4E;font-size:11px}
.pr-total{margin-top:4px;font-size:10.5px;color:#8A7B7C}
.pr-desc{margin-top:7px;font-size:11px;color:#4A3E40;line-height:1.5}
.pr-notes{margin-top:12px;text-align:center}
.pr-notes li{font-size:10.5px;color:#7B6F70;line-height:1.6}

/* ==========================================================================
   11. よくあるご質問（デザイン 07 中ほど）
   ========================================================================== */
.dfaq{padding:16px 0 20px;background:linear-gradient(180deg,#FFFDFD 0%,#FEF9FA 100%)}
.dfaq .dsec-h{margin-bottom:14px}
.fq{position:relative;margin-top:8px;padding:9px 34px 9px 10px;background:#FFFCFD;border:1px solid #F5E1E7;border-radius:12px}
.fq summary{list-style:none;display:flex;align-items:flex-start;gap:7px;cursor:pointer}
.fq summary::-webkit-details-marker{display:none}
.fq-q{
  flex:0 0 auto;display:grid;place-items:center;width:19px;height:19px;
  border-radius:50%;border:1.2px solid #EE7A9B;color:#EE7A9B;
  font-family:var(--latin);font-size:12px;font-weight:600;line-height:1;margin-top:1px;
}
.fq-qt{flex:1 1 auto;font-size:13px;font-weight:600;color:#DD5C82;line-height:1.5}
.fq-arw{
  position:absolute;right:12px;top:14px;width:11px;height:11px;
  border-right:2px solid #EFA3BB;border-bottom:2px solid #EFA3BB;transform:rotate(45deg);
}
.fq-a{display:flex;align-items:flex-start;gap:7px;margin-top:3px}
.fq-am{flex:0 0 auto;width:19px;text-align:center;color:#9A8C8C;font-family:var(--latin);font-size:12.5px;line-height:1.6}
.fq-a p{flex:1 1 auto;font-size:11.5px;line-height:1.6;color:#6C5F60}
.fq-note{margin-top:10px;text-align:center;font-size:11px;color:#6C5F60}
.fq-disc{margin-top:6px;text-align:center;font-size:10px;color:#A0908F;line-height:1.6}

/* ==========================================================================
   フッター（デザイン画像には無いが、法定表記なので必ず出す）
   ========================================================================== */
.ft{background:#3A2E2B;color:#EFE4E1;padding:22px 0 26px;text-align:center}
.ft-brand{font-size:14px;letter-spacing:.1em}
.ft-owner{margin-top:8px;font-size:11px;color:#C9B8B4}
.ft-contact{margin-top:3px;font-size:11px;color:#C9B8B4;word-break:break-all}
.ft-links{display:flex;justify-content:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.ft-links a{font-size:11px;color:#E7D8D4;border-bottom:1px solid rgba(231,216,212,.4)}
.ft-copy{margin-top:14px;font-size:10px;color:#9C8A86}

/* ==========================================================================
   画面が広いとき（枠は 500px までなので、少しだけ大きくする）
   ========================================================================== */
@media (min-width:440px){
  body{font-size:15px}
  .b-tx{font-size:16px}
  .dmid.m1 .b-tx{font-size:15.5px}
  .dw-h{font-size:23px}
  .dw-list li{font-size:14px}
  .dw-ph{width:106px;height:106px}
  .dsec-h{font-size:22px}
  .dr-h .a{font-size:23px}
  .dr-h .b{font-size:24px}
  .dr-h .gyaku{font-size:35px}
  .dr-t{font-size:15.5px}
  .dr-x{font-size:12px}
  .dr-ph{width:62px;height:62px}
  .dr-p{grid-template-columns:52px minmax(0,1fr) 62px}
  .dr-badge{width:52px;height:50px}
  .dr-badge b{font-size:19px}
  .pg-ring{width:136px;height:136px}
  .pg-ring b{font-size:13.5px}
  .pg-tx{font-size:11.5px}
  .ds-h .ln:first-child{font-size:29px}
  .ds-h .ln+.ln{font-size:21px}
  .ds-list b{font-size:13.5px}
  .ds-list li>span{font-size:11px}
  .da-h .ln:first-child{font-size:28px}
  .da-h .ln+.ln{font-size:33px}
  .da-badges li{width:110px;height:110px}
  .da-badges .apb-tx{font-size:12.5px}
  .mt-items li>span{font-size:11.5px}
  .v-meta{font-size:15px}
  .v-quote{font-size:13.5px}
  .fl-ring{width:72px;height:72px}
  .fl-tx{font-size:11.5px}
  .od-tx{font-size:10.5px}
  .od-time{font-size:13px}
  .pr-amt b{font-size:38px}
  .fq-qt{font-size:14px}
  .fq-a p{font-size:12.5px}
  .mc-h{font-size:22px}
  .dmid.m1 .mc-h{font-size:21px}
}

/* ==========================================================================
   すこし細い画面（iPhone 12 mini など 360〜379px）
   ボタンの文字は白ヌキ1行なので、はみ出す前に段階的に小さくする
   ========================================================================== */
@media (max-width:379px){
  .b-tx{font-size:13px}
  .dmid.m1 .b-tx{font-size:11.5px}
}

/* ==========================================================================
   とても細い画面（iPhone SE など 320px）
   ========================================================================== */
@media (max-width:359px){
  .meta-row{font-size:9px;gap:2px;padding:12px 0}
  .meta-row .mic svg{width:14px;height:14px}
  .mt-items li>span{font-size:9px}
  .dbtn{height:60px;padding:0 44px 0 8px;gap:8px}
  .b-free{width:40px;height:40px;font-size:13px}
  .b-arw{width:28px;height:28px;right:8px}
  .b-arw::before{left:10px;width:7px;height:7px;margin-top:-3.5px}
  .b-line{width:38px;height:33px}
  .dmid.m1 .dbtn{padding:0 34px 0 6px;gap:5px}
  .dmid.m1 .b-line{width:30px;height:26px}
  .dmid.m1 .b-free.flat{font-size:11px}
  .b-tx{font-size:12px}
  .dmid.m1 .b-tx{font-size:10px}
  .od-tx{font-size:8.5px}
  .fl-tx{font-size:9.5px}
  .da-badges{gap:5px}
  .da-badges li{width:84px;height:84px}
  .da-badges .apb-tx{font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}