/* ミリ美容皮膚科 シミ取りの画像LP（2026-10-31）
   ⚠️ 画像LP：data-img の付いた段は、src.html で組んで段ごとに画像に書き出す（build.py）。
   計算の部品・予約ボタン・よくある質問の開閉・地図・下の固定ボタンは HTML のまま動かす。
   見た目は最初の画面の案①（弧の写真と縦書き・差し色は深い緑）にそろえる。
   スマホの幅 375 を基準に1単位（--u）で大きさを決める。PC は 640px の列を真ん中に置く。 */
:root{
  --ink:#22302d; --sub:#5b6866; --mint:#d5e7df; --mint2:#edf5f1; --mintd:#4b7567;  /* 文字に使う緑（2026-10-31 色の差 4.5 に届くよう #7fa898 から濃く。弧と目盛りは元の薄い色のまま） */ --deep:#285c50; --spot:#a98260;
  --line:#cfdcd6; --col:min(100vw,640px); --u:calc(var(--col) / 375);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:#f1f5f3 url(img/bg-light.jpg) center/cover fixed;color:var(--ink);font-family:"Noto Sans JP",sans-serif;font-feature-settings:"palt";line-height:1.7}
img{display:block;max-width:100%;height:auto}
.lp{width:var(--col);margin:0 auto;position:relative;background:#fff;box-shadow:0 0 40px rgba(40,92,80,.08);padding-bottom:calc(52*var(--u))}
.min{font-family:"Shippori Mincho B1","Shippori Mincho",serif}
.en{font-family:"Cormorant Garamond",serif;font-feature-settings:"lnum" 1}

/* 段の共通 */
.sec{position:relative;overflow:hidden;padding:calc(52*var(--u)) calc(20*var(--u)) calc(48*var(--u))}
.sec.mint{background:var(--mint2)}
.sec.tex{background:#fff url(img/bg-light.jpg) left top/calc(560*var(--u)) auto no-repeat}
.hd{position:relative;z-index:2;isolation:isolate}
/* 見出しの後ろに、筆記体の大きな英字を薄く敷く（11「Pico Laser」・19「Trouble」の技） */
.hd[data-en]::before{content:attr(data-en);position:absolute;right:calc(-8*var(--u));top:calc(-30*var(--u));z-index:-1;font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:calc(66*var(--u));line-height:1;color:var(--mint);white-space:nowrap;letter-spacing:.01em;opacity:.55}  /* 2026-10-31 本人「もう少しだけ薄く」→ .55 */
.sec.mint .hd[data-en]::before{color:#d3e5dd}
.np{display:inline-block}
/* 深い緑の段（リズムを付ける） */
.sec.deep{background:var(--deep);color:#fff}
.sec.deep .hd .ey{color:#c4ddd3}.sec.deep .hd[data-en]::before{color:rgba(255,255,255,.08)}.sec.deep .hd h2 em{color:#d5e7df}
.hd .ey{font-family:"Cormorant Garamond",serif;font-size:calc(11*var(--u));letter-spacing:.42em;color:var(--mintd);font-weight:600}
.hd h2{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:calc(25*var(--u));line-height:1.45;letter-spacing:.06em;margin-top:calc(6*var(--u))}
.hd h2 em{font-style:normal;font-size:1.3em;color:var(--deep)}
.hd .lead{font-size:calc(13*var(--u));color:var(--sub);margin-top:calc(10*var(--u))}
.hr{display:inline-block;width:calc(28*var(--u));height:1px;background:var(--ink);vertical-align:middle}
.hd .hr{margin-top:calc(14*var(--u))}
.ruler{height:calc(8*var(--u));background-repeat:repeat-x;background-size:calc(30*var(--u)) 100%;opacity:.7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8'%3E%3Cg stroke='%237fa898' stroke-width='.8'%3E%3Cpath d='M.4 0V8M3.4 0V3M6.4 0V3M9.4 0V3M12.4 0V3M15.4 0V5.5M18.4 0V3M21.4 0V3M24.4 0V3M27.4 0V3'/%3E%3C/g%3E%3C/svg%3E")}
.arc{position:absolute;border-radius:50%;background:var(--mint);z-index:0}
.side{position:absolute;writing-mode:vertical-rl;font-family:"Cormorant Garamond",serif;font-size:calc(9*var(--u));letter-spacing:.42em;color:var(--mintd);z-index:1}
.frame{position:relative;background:#fff;border:1px solid var(--line);padding:calc(16*var(--u))}
.frame::after{content:"";position:absolute;inset:calc(4*var(--u));border:1px solid var(--mint);pointer-events:none}
.tag{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:#fff;padding:0 calc(10*var(--u));font-family:"Cormorant Garamond",serif;font-size:calc(11*var(--u));letter-spacing:.42em;color:var(--deep);font-weight:600;z-index:1;white-space:nowrap}
.note{font-size:calc(11.5*var(--u));color:var(--sub);line-height:1.65}
.num{font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--deep);line-height:1;font-feature-settings:"lnum" 1}
.num small{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:.42em;margin-left:calc(2*var(--u))}
.dot{display:inline-block;border-radius:50%;background:var(--spot);vertical-align:middle}

/* 画像にした段（index.html） */
.imgsec img{width:100%}

/* ボタン（HTML） */
.cta{padding:calc(4*var(--u)) calc(20*var(--u)) calc(28*var(--u));background:inherit}
.btn{display:flex;align-items:center;justify-content:center;gap:calc(10*var(--u));height:calc(52*var(--u));border-radius:calc(26*var(--u));background:var(--deep);color:#fff;text-decoration:none;font-size:calc(14.5*var(--u));font-weight:700;letter-spacing:.06em}
.btn i{font-style:normal;font-size:calc(12*var(--u))}
.btn.line{background:#22804a}
.btn.ghost{background:#fff;color:var(--deep);border:1px solid var(--deep)}
.btns{display:grid;gap:calc(10*var(--u))}
.fixed{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:var(--col);display:grid;grid-template-columns:1.4fr 1fr 1fr;z-index:10;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
.fixed a{display:flex;align-items:center;justify-content:center;height:calc(52*var(--u));color:#fff;text-decoration:none;font-size:calc(12.5*var(--u));font-weight:700;letter-spacing:.04em}
.fixed .web{background:var(--deep)}.fixed .line{background:#22804a}.fixed .tel{background:#fff;color:var(--ink);border-top:1px solid var(--line)}

/* 5 計算の部品（HTML） */
.calc .rows{margin-top:calc(18*var(--u));display:grid;gap:calc(8*var(--u))}
.calc .r{display:grid;grid-template-columns:calc(40*var(--u)) 1fr auto;align-items:center;gap:calc(10*var(--u));background:#fff;border:1px solid var(--line);padding:calc(10*var(--u)) calc(12*var(--u))}
.calc .r .ic{display:flex;align-items:center;justify-content:center}
.calc .r .t b{display:block;font-size:calc(14*var(--u))}
.calc .r .t span{display:block;font-size:calc(11*var(--u));color:var(--sub);line-height:1.4}
.step{display:flex;align-items:center;gap:calc(6*var(--u))}
.step button{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:50%;border:1px solid var(--deep);background:#fff;color:var(--deep);font-size:calc(18*var(--u));line-height:1;cursor:pointer;font-family:inherit}
.step output{width:calc(26*var(--u));text-align:center;font-family:"Cormorant Garamond",serif;font-weight:600;font-size:calc(24*var(--u));font-feature-settings:"lnum" 1}
.calc .opt{display:flex;align-items:center;gap:calc(8*var(--u));margin-top:calc(12*var(--u));font-size:calc(13*var(--u))}
.calc .opt input{width:calc(18*var(--u));height:calc(18*var(--u));accent-color:var(--deep)}
.calc .res{margin-top:calc(16*var(--u));background:var(--deep);color:#fff;padding:calc(16*var(--u))}
.calc .res .lb{font-size:calc(12*var(--u));opacity:.9}
.calc .res .total{font-feature-settings:"lnum" 1;font-family:"Cormorant Garamond",serif;font-weight:600;font-size:calc(46*var(--u));line-height:1.05}
.calc .res .total small{font-family:"Shippori Mincho B1",serif;font-size:calc(16*var(--u));margin-left:calc(2*var(--u))}
.calc .res .bd{font-size:calc(11.5*var(--u));opacity:.9;margin-top:calc(4*var(--u))}
.calc .cmp{margin-top:calc(10*var(--u));background:#fff;color:var(--ink);padding:calc(10*var(--u)) calc(12*var(--u));font-size:calc(13*var(--u));font-weight:700}
.calc .cmp b{font-feature-settings:"lnum" 1;color:var(--deep);font-family:"Cormorant Garamond",serif;font-size:calc(20*var(--u))}
.calc .note{margin-top:calc(10*var(--u))}

/* 13 よくある質問（HTML） */
.faq{margin-top:calc(18*var(--u));display:grid;gap:calc(8*var(--u))}
.faq details{background:#fff;border:1px solid var(--line)}
.faq summary{list-style:none;display:grid;grid-template-columns:calc(24*var(--u)) 1fr calc(16*var(--u));gap:calc(8*var(--u));align-items:center;padding:calc(13*var(--u)) calc(14*var(--u));cursor:pointer;font-size:calc(14*var(--u));font-weight:700;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q,.faq .a .q{font-family:"Cormorant Garamond",serif;font-size:calc(20*var(--u));color:var(--deep);font-weight:600}
.faq summary::after{content:"+";font-family:"Cormorant Garamond",serif;font-size:calc(22*var(--u));color:var(--mintd);text-align:center}
.faq details[open] summary::after{content:"−"}
.faq .a{display:grid;grid-template-columns:calc(24*var(--u)) 1fr;gap:calc(8*var(--u));padding:0 calc(14*var(--u)) calc(14*var(--u));font-size:calc(13.5*var(--u));color:var(--ink)}
.faq .a .q{color:var(--mintd)}

/* 14 地図（HTML） */
.map{padding:0 calc(20*var(--u)) calc(10*var(--u));background:#fff}
.map iframe{display:block;width:100%;height:calc(220*var(--u));border:0}
.map p{font-size:calc(11*var(--u));color:var(--sub);margin-top:calc(6*var(--u))}
.foot{padding:calc(24*var(--u)) calc(20*var(--u)) calc(30*var(--u));background:var(--ink);color:#dfe8e4;font-size:calc(11*var(--u));line-height:1.8}
.foot b{display:block;font-family:"Cormorant Garamond",serif;letter-spacing:.24em;font-size:calc(14*var(--u));color:#fff;margin-bottom:calc(6*var(--u))}
/* 数字は高さのそろった形に（Cormorant の既定は 1 が I、0 が o に見える） */
.num,.en,.step output,.calc .res .total,.calc .cmp b,.s4 .add dd,.s2 li .n,.s12 li .n{font-variant-numeric:lining-nums}

/* 段の境目を弧でつなぐ（2026-10-31 見直し3）。段の下に、次の段の色の弧を描く。画像に書き出しても、次の画像の上の色とつながる */
.to-mint,.to-white,.to-deep,.to-ink{position:relative;overflow:hidden}
.to-mint::after,.to-white::after,.to-deep::after,.to-ink::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-1px;height:calc(26*var(--u));clip-path:ellipse(60% 100% at 50% 100%);pointer-events:none}
.to-mint::after{background:var(--mint2)}.to-white::after{background:#fff}.to-deep::after{background:var(--deep)}.to-ink::after{background:var(--ink)}
.sec.to-mint,.sec.to-white,.sec.to-deep,.sec.to-ink{padding-bottom:calc(64*var(--u))}
.cta.to-mint,.cta.to-white,.cta.to-deep,.cta.to-ink,.map.to-mint{padding-bottom:calc(44*var(--u))}
.cta{position:relative}
/* ボタンの上の一言（見直し4） */
.push{text-align:center;font-size:calc(13*var(--u));font-weight:700;color:var(--deep);margin-bottom:calc(8*var(--u));letter-spacing:.04em}
.sec.deep .push{color:#fff}
/* HTML のまま動く数字は明朝に（iPhone の WebKit では Cormorant の数字が 0→o・9 が下に下がる形のまま直らなかった。2026-10-31） */
.step output,.calc .res .total,.calc .cmp b{font-family:"Shippori Mincho B1",serif!important;font-weight:700!important}
.step output{font-size:calc(21*var(--u))!important}.calc .res .total{font-size:calc(40*var(--u))!important}.calc .cmp b{font-size:calc(17*var(--u))!important}