@charset "utf-8";
/* ==========================================================================
   メンズR — 共通スタイル
   区切りは「余白」と「1pxの直線」のみ。要素を枠で囲まない。
   ========================================================================== */

:root{
  --navy:#052b58;
  --navy-deep:#03203f;
  --blue:#0058b8;
  --blue-light:#e8eff7;
  --ink:#2a2e31;
  --muted:#687075;
  --line:#cfcfcf;
  --line-soft:#ebedef;
  --bg:#ffffff;
  --tint:#f4f6f8;

  --gothic:"YakuHanJP","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --num:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --wrap:1160px;
  --gut:24px;
  --head-h:126px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:140px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--gothic);font-size:17px;line-height:1.9;letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ------------------------------------------------------ */
.hdr{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.hdr__top{display:flex;align-items:stretch;max-width:1440px;margin:0 auto;min-height:76px}
/* ロゴは画像。書き出しは @3x（506×126）で、表示高さで制御する */
.brand{display:flex;align-items:center;padding:0 26px;flex:1 1 auto}
.brand img{display:block;height:42px;width:auto}

.util{display:flex;align-items:stretch}
.util a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:0 22px;font-size:11.5px;color:var(--navy);border-left:1px solid var(--line);letter-spacing:.06em;
}
.util a:hover{background:var(--tint)}
.util svg{width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:1.5}


.hdr__cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 30px;background:var(--blue);color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em}
.hdr__cta:hover{background:#00459a}

.gnav{border-top:1px solid var(--line);background:#fff}
.gnav__in{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:center;gap:0}
.gnav a{
  padding:16px 30px;font-size:15.5px;font-weight:600;color:var(--navy);letter-spacing:.08em;
  border-bottom:3px solid transparent;
}
.gnav a:hover{color:var(--blue)}
.gnav a.is-current{border-bottom-color:var(--navy)}

.burger{display:none}
.drawer{display:none}

/* ---------- floating side rail (PC) ------------------------------------- */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column}
.rail a{
  width:78px;padding:16px 6px;text-align:center;font-size:11px;font-weight:700;line-height:1.5;
  color:#fff;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.22);letter-spacing:.04em;
}
.rail a.is-line{background:#06c755}
.rail a:hover{opacity:.86}

/* ---------- hero （1枚絵） ------------------------------------------------
   PC / SP それぞれ専用画像を <picture> で出し分ける。
   width:100% + height:auto なので、どの画面幅でもトリミングされず全体が出る。
   ------------------------------------------------------------------------ */
.hero{background:var(--navy)}
.hero picture{display:block}
.hero img{display:block;width:100%;height:auto}

/* 画像の直下に続く情報バー。診療時間などは画像に焼き込まず HTML で持つ */
.hero__meta{
  display:flex;justify-content:center;margin:0;
  background:var(--navy-deep);color:#fff;padding:20px var(--gut);
}
.hero__meta div{padding:0 44px;border-right:1px solid rgba(255,255,255,.22);text-align:center}
.hero__meta div:first-child{padding-left:0}
.hero__meta div:last-child{border-right:0;padding-right:0}
.hero__meta dt{font-size:10.5px;letter-spacing:.18em;color:#9dc0e8;margin:0 0 4px}
.hero__meta dd{margin:0;font-size:16px;font-weight:700}

/* ---------- news bar ---------------------------------------------------- */
.news{border-bottom:1px solid var(--line)}
.news__in{max-width:var(--wrap);margin:0 auto;padding:19px var(--gut);display:flex;align-items:baseline;gap:22px;font-size:15px}
.news__ttl{font-size:11px;letter-spacing:.2em;color:var(--muted);font-weight:700;flex:0 0 auto}
.news time{font-family:var(--num);color:var(--muted);font-size:13px;flex:0 0 auto}
.news a{color:var(--ink)}
.news a:hover{color:var(--blue)}
.news__more{margin-left:auto;flex:0 0 auto;font-size:13px;color:var(--blue);font-weight:600}

/* ---------- section shell ----------------------------------------------- */
.sec{padding:104px 0}
.sec--tint{background:var(--tint)}
.sec--navy{background:var(--navy);color:#fff}
.sec--tight{padding:78px 0}

.shead{text-align:center;margin:0 0 58px}
.shead h2{
  margin:0 0 10px;font-size:clamp(27px,3.4vw,40px);font-weight:700;
  letter-spacing:.14em;color:var(--navy);line-height:1.5;
}
.sec--navy .shead h2{color:#fff}
.shead p{margin:0;font-family:var(--num);font-size:11.5px;letter-spacing:.3em;color:var(--blue);font-weight:700}
.sec--navy .shead p{color:#9dc0e8}
.shead::after{
  content:"";display:block;width:44px;height:2px;background:var(--blue);margin:20px auto 0;
}
.sec--navy .shead::after{background:#9dc0e8}
.shead--left{text-align:left}
.shead--left::after{margin-left:0}

/* ---------- menu list (no boxes: photo + rule) -------------------------- */
.menu{display:flex;flex-direction:column}
.menu__item{
  display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:56px;align-items:center;
  padding:52px 0;border-top:1px solid var(--line);
}
.menu__item:last-child{border-bottom:1px solid var(--line)}
/* 偶数行は写真を右へ。トラック幅も入れ替えないと写真だけ大きくなる */
.menu__item:nth-child(even){grid-template-columns:1fr minmax(0,460px)}
.menu__item:nth-child(even) .menu__ph{order:2}
.menu__ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* 写真を使わないメニュー一覧（泌尿器治療ページ） */
.menu--plain .menu__item,
.menu--plain .menu__item:nth-child(even){grid-template-columns:1fr;gap:0}
.menu--plain .menu__item p{max-width:46em}
.menu__no{font-family:var(--num);font-size:12px;letter-spacing:.2em;color:var(--blue);font-weight:700;display:block;margin-bottom:12px}
.menu__item h3{margin:0 0 6px;font-size:31px;font-weight:700;letter-spacing:.06em;color:var(--navy);line-height:1.45}
.menu__en{margin:0 0 22px;font-family:var(--num);font-size:11.5px;letter-spacing:.24em;color:var(--muted)}
.menu__item p{margin:0 0 26px;font-size:16.5px;color:var(--ink);max-width:34em}
.menu__tags{margin:0 0 30px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;color:var(--muted)}
.menu__tags li::before{content:"／";margin-right:6px;color:var(--line)}
.menu__tags li:first-child::before{display:none}

/* text link with underline motion — no button box */
.tlink{display:inline-flex;align-items:center;gap:12px;font-size:15.5px;font-weight:700;color:var(--navy);padding-bottom:6px;border-bottom:1px solid var(--navy)}
.tlink::after{content:"→";transition:transform .2s}
.tlink:hover{color:var(--blue);border-bottom-color:var(--blue)}
.tlink:hover::after{transform:translateX(5px)}
.sec--navy .tlink{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.sec--navy .tlink:hover{color:#9dc0e8;border-bottom-color:#9dc0e8}

/* ---------- concept ----------------------------------------------------- */
.concept{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.concept__ph img{width:100%;height:100%;object-fit:cover;min-height:440px}
.concept__txt{padding:0 0 0 72px;display:flex;flex-direction:column;justify-content:center}
.concept__txt h2{font-family:var(--mincho);font-weight:500;font-size:clamp(27px,3.2vw,40px);line-height:1.75;letter-spacing:.1em;margin:0 0 30px;color:var(--navy)}
.concept__txt p{margin:0 0 22px;font-size:16.5px;color:var(--ink);max-width:32em}

/* ---------- gallery (photos, whitespace only) --------------------------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gal figcaption{margin-top:14px;font-size:14.5px;color:var(--muted)}

/* ---------- doctor ------------------------------------------------------ */
.doctor{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start}
.doctor__ph img{width:100%;aspect-ratio:3/4;object-fit:cover}
.doctor__role{margin:0 0 6px;font-size:12px;letter-spacing:.2em;color:var(--blue);font-weight:700}
.doctor h3{margin:0 0 4px;font-size:34px;font-weight:700;letter-spacing:.08em;color:var(--navy);line-height:1.4}
.doctor__en{margin:0 0 28px;font-family:var(--num);font-size:12.5px;letter-spacing:.18em;color:var(--muted)}
.doctor p{margin:0 0 20px;font-size:16.5px;max-width:38em}
.doctor dl{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:120px 1fr;gap:10px 20px;font-size:15.5px}
.doctor dt{color:var(--muted)}
.doctor dd{margin:0}

/* ---------- flow -------------------------------------------------------- */
.flow{margin:0;padding:0;list-style:none;counter-reset:st}
.flow li{counter-increment:st;display:grid;grid-template-columns:96px 1fr;gap:32px;padding:30px 0;border-top:1px solid var(--line)}
.flow li:last-child{border-bottom:1px solid var(--line)}
.flow li::before{content:"STEP 0" counter(st);font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--blue);padding-top:5px}
.flow h3{margin:0 0 8px;font-size:21px;font-weight:700;color:var(--navy);letter-spacing:.05em}
.flow p{margin:0;font-size:16px;color:var(--ink)}

/* ---------- faq --------------------------------------------------------- */
.faq{max-width:880px;margin:0 auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  padding:28px 52px 28px 42px;font-size:18.5px;font-weight:600;cursor:pointer;position:relative;list-style:none;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:0;top:26px;font-family:var(--num);font-weight:700;color:var(--blue);font-size:19px}
.faq summary::after{
  content:"";position:absolute;right:8px;top:34px;width:12px;height:12px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:38px}
.faq__a{padding:0 52px 30px 42px;margin:0;font-size:16.5px;color:var(--ink);position:relative}
.faq__a::before{content:"A";position:absolute;left:0;top:0;font-family:var(--num);font-weight:700;color:var(--muted);font-size:19px}

/* ---------- access ------------------------------------------------------ */
.access{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.access__map{width:100%;aspect-ratio:4/3;background:var(--tint);overflow:hidden}
.access__map iframe{display:block;width:100%;height:100%;border:0}
.access dl{margin:0;display:grid;grid-template-columns:104px 1fr;gap:0}
.access dt,.access dd{padding:19px 0;border-top:1px solid var(--line);margin:0;font-size:16.5px}
.access dt{color:var(--muted);font-size:15px}
.access dl>:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.hours{width:100%;border-collapse:collapse;font-size:14px;margin-top:28px}
.hours th,.hours td{padding:12px 6px;border-bottom:1px solid var(--line);text-align:center;font-weight:400}
.hours thead th{font-size:13px;color:var(--muted);border-bottom:1px solid var(--line)}
.hours tbody th{text-align:left;color:var(--muted);font-size:13.5px;white-space:nowrap}

/* ---------- cta band ---------------------------------------------------- */
.band{background:var(--navy);color:#fff;text-align:center;padding:84px 0}
.band h2{font-family:var(--mincho);font-weight:500;font-size:clamp(26px,3.3vw,40px);letter-spacing:.1em;margin:0 0 20px;line-height:1.5}
.band p{margin:0 auto 42px;max-width:34em;font-size:16.5px;color:#c9d9ea}
.band__acts{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;align-items:center}
/* 濃紺の上に置く実体のあるCTA。角丸は使わない */
.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:#06c755;color:#fff;font-size:17px;font-weight:700;letter-spacing:.06em;
  padding:22px 48px;min-width:320px;
}
.btn-line:hover{background:#05b34c}
.btn-line svg{width:22px;height:22px;flex:0 0 auto;fill:#fff}

/* ---------- notice / footer --------------------------------------------- */
.notice{padding:60px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);line-height:2}
.notice h2{font-size:12px;letter-spacing:.2em;color:var(--ink);margin:0 0 20px;font-weight:700}
.notice dl{margin:0;display:grid;grid-template-columns:150px 1fr;gap:12px 24px}
.notice dt{color:var(--ink);font-weight:600}
.notice dd{margin:0}

.ftr{background:var(--navy-deep);color:#fff;padding:64px 0 0}
.ftr__top{display:grid;grid-template-columns:1fr 2fr;gap:60px;padding-bottom:48px}
.ftr__addr{margin:22px 0 0;font-size:14.5px;color:#c9d9ea;line-height:2}
.ftr__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.ftr__nav p{margin:0 0 14px;font-size:11px;letter-spacing:.2em;color:#7f9dc0;font-weight:700}
.ftr__nav ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.ftr__nav a{color:#dbe6f2}
.ftr__nav a:hover{color:#fff;text-decoration:underline}
.ftr__btm{border-top:1px solid rgba(255,255,255,.18);padding:22px 0;font-size:12px;color:#7f9dc0;display:flex;gap:24px;flex-wrap:wrap}
.ftr__btm nav{display:flex;gap:20px;margin-left:auto}

/* ---------- lower-page shells ------------------------------------------- */
.phead{background:var(--navy);color:#fff;padding:66px 0}
.phead h1{margin:0 0 8px;font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:.12em;line-height:1.45}
.phead p{margin:0;font-family:var(--num);font-size:11.5px;letter-spacing:.3em;color:#9dc0e8;font-weight:700}
.crumb{border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.crumb ol{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.crumb li::after{content:"›";margin-left:10px;color:var(--line)}
.crumb li:last-child::after{display:none}
.crumb a:hover{color:var(--blue)}

/* summary figures on a treatment page — plain rules, no boxes */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin:0 0 64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figs div{padding:28px 30px;border-right:1px solid var(--line)}
.figs div:last-child{border-right:0}
.figs dt{margin:0 0 9px;font-size:12.5px;letter-spacing:.14em;color:var(--muted)}
.figs dd{margin:0;font-family:var(--num);font-size:38px;font-weight:700;color:var(--navy);letter-spacing:0;line-height:1.2}
.figs dd small{font-family:var(--gothic);font-size:15px;font-weight:600;color:var(--muted);margin-left:4px;letter-spacing:.04em}

.prose{max-width:860px}
.prose h2{margin:0 0 20px;font-size:30px;font-weight:700;letter-spacing:.08em;color:var(--navy);line-height:1.5}
.prose h3{margin:40px 0 12px;font-size:19.5px;font-weight:700;color:var(--navy);letter-spacing:.05em}
.prose p{margin:0 0 20px;font-size:17px}
.prose ul{margin:0 0 20px;padding-left:1.3em;font-size:17px}
.prose li{margin-bottom:8px}

/* 法務・告知ページ：見出し階層を h1→h2 に正すが、視覚サイズは従来のh3相当を維持 */
.prose--doc h2{font-size:19.5px;margin:40px 0 12px;letter-spacing:.05em;line-height:1.7}
.prose--doc > h2:first-child{margin-top:0}
.blk{padding:64px 0;border-top:1px solid var(--line)}
.blk:first-child{border-top:0;padding-top:0}

.dl-table{width:100%;border-collapse:collapse;font-size:16.5px;margin:0 0 20px}
.dl-table th,.dl-table td{padding:17px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dl-table th{width:210px;font-weight:600;color:var(--muted);font-size:15.5px}

/* price table */
.ptable{width:100%;border-collapse:collapse;font-size:16.5px;table-layout:fixed}
/* 表ごとに列幅が変わらないよう固定。46% / 32% / 22% */
.ptable th:nth-child(1),.ptable td:nth-child(1){width:46%}
.ptable th:nth-child(2),.ptable td:nth-child(2){width:32%}
.ptable th:nth-child(3),.ptable td:nth-child(3){width:22%}
.ptable caption{text-align:left;font-size:22px;font-weight:700;color:var(--navy);letter-spacing:.06em;padding:0 0 18px}
.ptable th,.ptable td{padding:21px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:baseline}
.ptable thead th{font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.1em;border-bottom:1px solid var(--ink);padding-bottom:12px}
/* 2列目=費用、3列目=分割。中身が右揃えなので見出しも右に揃える */
.ptable thead th:nth-child(2),
.ptable thead th:nth-child(3){text-align:right}
.ptable td.num{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;font-size:23px;font-weight:700;color:var(--navy);white-space:nowrap}
.ptable td.num small{font-family:var(--gothic);font-size:16px;font-weight:700;color:var(--navy);margin-left:2px;letter-spacing:.02em}
.ptable td.loan{text-align:right;font-size:14.5px;color:var(--muted);white-space:nowrap}
.ptable td span{display:block;font-size:14px;color:var(--muted);margin-top:5px}

.risk-note{border-left:2px solid var(--blue);padding:4px 0 4px 24px;margin:0 0 20px}
.risk-note h3{margin:0 0 7px;font-size:17.5px;font-weight:700;color:var(--navy)}
.risk-note p{margin:0;font-size:16px;color:var(--ink)}

/* ---------- news article ------------------------------------------------- */
.article__head{padding:0 0 26px;margin:0 0 32px;border-bottom:1px solid var(--line)}
.article__head time{display:block;font-family:var(--num);font-size:14px;color:var(--muted);letter-spacing:.06em;margin-bottom:10px}
.article__head h2{margin:0;font-size:clamp(23px,2.8vw,32px);font-weight:700;letter-spacing:.06em;color:var(--navy);line-height:1.55}

/* ---------- news list ---------------------------------------------------- */
.newslist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.newslist li{display:grid;grid-template-columns:132px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.newslist time{font-family:var(--num);font-size:14px;color:var(--muted);letter-spacing:.04em}
.newslist a{font-size:16.5px}
.newslist a:hover{color:var(--blue)}
@media(max-width:860px){
  .newslist li{grid-template-columns:1fr;gap:4px;padding:20px 0}
}

.mobile-bar{display:none}

/* ---------- responsive -------------------------------------------------- */
@media(max-width:1080px){
  /* 7項目が1160px幅を前提にしているため、この帯では左右パディングを詰める */
  .gnav a{padding:16px 18px;white-space:nowrap}
  .rail{display:none}
  .concept{grid-template-columns:1fr}
  .concept__txt{padding:36px 0 0}
  .concept__ph img{min-height:300px}
  .doctor{grid-template-columns:260px 1fr;gap:40px}
  .access{grid-template-columns:1fr;gap:40px}
}
@media(max-width:860px){
  :root{--gut:20px}
  html{scroll-padding-top:80px}
  .hdr__top{min-height:64px}
  .brand{padding:0 18px}
  .brand img{height:34px}
  .util,.hdr__cta,.gnav{display:none}
  .burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:64px;border-left:1px solid var(--line);flex:0 0 auto}
  .burger i{display:block;width:22px;height:1.5px;background:var(--navy)}
  .burger span{font-size:9px;letter-spacing:.14em;color:var(--muted);margin-top:2px}
  .drawer{display:none;border-top:1px solid var(--line);padding:8px var(--gut) 20px}
  .drawer.is-open{display:block}
  .drawer a{display:block;padding:17px 0;border-bottom:1px solid var(--line-soft);font-size:16.5px;font-weight:600;color:var(--navy)}

  /* 3項目を横並びにすると収まらないので縦積みにする */
  .hero__meta{flex-direction:column;gap:9px;padding:16px var(--gut)}
  .hero__meta div{padding:0;border-right:0;display:flex;align-items:baseline;gap:14px;text-align:left}
  .hero__meta div:first-child{padding-left:0}
  .hero__meta dt{flex:0 0 66px;font-size:10px;letter-spacing:.1em;margin:0}
  .hero__meta dd{font-size:14.5px}

  .news__in{flex-wrap:wrap;gap:6px 16px;padding:14px var(--gut)}
  .news__more{margin-left:0;width:100%}

  .sec{padding:60px 0}
  .sec--tight{padding:48px 0}
  .shead{margin-bottom:34px}

  .menu__item{grid-template-columns:1fr;gap:22px;padding:36px 0}
  .menu__item:nth-child(even) .menu__ph{order:0}
  .menu__item h3{font-size:26px}
  .menu__item:nth-child(even){grid-template-columns:1fr}

  .gal{grid-template-columns:1fr;gap:22px}
  .doctor{grid-template-columns:1fr;gap:26px}
  .doctor__ph{max-width:220px}
  .doctor dl{grid-template-columns:1fr;gap:2px}
  .doctor dd{margin-bottom:12px}

  .flow li{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .flow li::before{padding-top:0}

  .faq summary{padding:22px 40px 22px 32px;font-size:17px}
  .faq summary::before{top:20px;font-size:17px}
  .faq__a{padding:0 0 24px 32px;font-size:16px}

  .band{padding:56px 0}
  .band__acts{gap:28px;flex-direction:column}
  .btn-line{min-width:0;width:100%;max-width:340px;padding:20px 24px;font-size:16.5px}

  .figs{grid-template-columns:1fr}
  .figs div{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}
  .figs div:last-child{border-bottom:0}
  .figs dd{font-size:32px}

  .notice dl{grid-template-columns:1fr;gap:2px}
  .notice dd{margin-bottom:14px}
  .ftr{padding-top:44px}
  .ftr__top{grid-template-columns:1fr;gap:34px;padding-bottom:32px}
  .ftr__nav{grid-template-columns:1fr 1fr;gap:26px}
  .ftr__btm{flex-direction:column;gap:10px}
  .ftr__btm nav{margin-left:0;flex-wrap:wrap;gap:14px}

  .dl-table th{width:auto;display:block;border-bottom:0;padding-bottom:0}
  .dl-table td{display:block;padding-top:6px}

  /* スマホでも「表」として読ませる。左＝施術名、右＝金額（下に分割）の2カラム */
  .ptable{display:block;table-layout:auto}
  .ptable caption{display:block;font-size:19px;padding-bottom:14px}
  .ptable thead{display:block}
  .ptable thead tr{
    display:grid;grid-template-columns:1fr auto;gap:14px;
    padding:0 0 10px;border-bottom:1px solid var(--ink);
  }
  .ptable thead th{display:block;padding:0;border:0;font-size:11px;letter-spacing:.06em;white-space:nowrap}
  .ptable thead th:nth-child(1){text-align:left}
  .ptable thead th:nth-child(2){text-align:right}
  .ptable thead th:nth-child(3){display:none}
  .ptable tbody{display:block}
  .ptable tr{
    display:grid;grid-template-columns:1fr auto;gap:3px 14px;
    padding:17px 0;border-bottom:1px solid var(--line);align-items:center;
  }
  .ptable td{display:block;padding:0;border:0}
  .ptable td:nth-child(1),
  .ptable td:nth-child(2),
  .ptable td:nth-child(3){width:auto}
  .ptable td:nth-child(1){grid-column:1;grid-row:1/3;font-size:15.5px;font-weight:600;line-height:1.65}
  .ptable td:nth-child(1) span{font-size:12.5px;font-weight:400;margin-top:4px;line-height:1.6}
  .ptable td.num{grid-column:2;grid-row:1;text-align:right;font-size:18px;white-space:nowrap;line-height:1.4}
  .ptable td.num small{font-size:12.5px;margin-left:1px}
  .ptable td.loan{grid-column:2;grid-row:2;text-align:right;font-size:11.5px;white-space:nowrap;line-height:1.4}
  .ptable td.loan::before{content:none}

  body{padding-bottom:64px}
  .mobile-bar{
    display:grid;position:fixed;left:0;right:0;bottom:0;z-index:90;grid-template-columns:1fr 2fr;
    background:#fff;border-top:1px solid var(--line);
  }
  .mobile-bar a{
    display:flex;align-items:center;justify-content:center;gap:6px;min-height:60px;
    font-size:12.5px;font-weight:700;color:var(--navy);border-right:1px solid var(--line);letter-spacing:.04em;
  }
  .mobile-bar a:last-child{border-right:0}
  .mobile-bar a.is-line{background:#06c755;color:#fff;font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}