/* みなみスポーツマッサージ鍼整骨院。見本(materials/mina-spo-sample-v6.html)の見た目をもとにしている */
:root{
  --navy:#0e2a5a; --navy2:#1b4a8f; --sky:#7cc8f0; --sky-strong:#2371aa; --sky-soft:#edf7fd; --line:#cfe6f5;
  --text:#0e2a5a; --text-deep:#030d24; --muted:#4f6480; --red:#c62828;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","IPAPMincho","IPAMincho",serif;
  --bar-h:62px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-anchor:none;scroll-padding-top:calc(var(--bar-h) + 8px)}
body{margin:0;background:#fff;color:var(--text);line-height:1.8;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo","IPAPGothic",sans-serif}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:820px;margin:0 auto}
[hidden]{display:none !important}
h1,h2,h3,.catch,.sub,.quote,.bigquote,.lead-note,.intro p,.tagline .ja{font-feature-settings:"palt"}
.ph{display:inline-block;max-width:100%}

/* 上に付いてくるバー(R4) */
.bar{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 0 var(--line),0 4px 14px rgba(14,42,90,.06)}
.bar-in{max-width:820px;margin:0 auto;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 0 12px}
.brand{display:flex;align-items:center;gap:6px;text-decoration:none;min-width:0}
.logo-mark{width:38px;height:32px}
.logo-name{width:auto;height:12px}
/* ロゴの横の院名。狭い幅では data の行分けで3行、広い幅では1行になる */
.brand-name{display:flex;flex-wrap:wrap;font-size:11px;line-height:1.25;font-weight:700;color:var(--navy)}
.brand-name span{white-space:nowrap}
.acts{display:flex;gap:4px;flex:none}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:52px;height:50px;border-radius:10px;
  background:var(--sky-soft);border:1px solid var(--line);color:var(--navy);text-decoration:none;font:inherit;font-size:10px;
  font-weight:700;line-height:1.15;cursor:pointer;padding:0;text-align:center}
.act svg{width:20px;height:20px}
.act.primary{background:var(--sky);border-color:var(--sky)}
.act small{display:block;font-size:9px;font-weight:400;color:var(--muted)}
.menu-btn{background:#fff;list-style:none}
.menu-btn::-webkit-details-marker{display:none}
.menu-wrap[open] .menu-btn{background:var(--sky-soft)}
.menu{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 12px 24px rgba(14,42,90,.14);max-height:calc(100vh - var(--bar-h));overflow:auto}
.menu ul{list-style:none;margin:0 auto;padding:8px 12px 14px;max-width:820px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* 同じ行の項目は、高さをそろえる(長い名前が2行になっても、となりの枠も同じ高さ) */
.menu li{display:flex}
.menu a{flex:1;display:block;padding:11px 12px;border-radius:10px;background:var(--sky-soft);text-decoration:none;font-weight:700;font-size:14px;line-height:1.45}
/* スマホの幅では、長い名前(スポーツをされている方・トレーナーのご依頼)が「・」の後ろで2行に入るように、文字を少し小さくする */
@media (max-width:420px){ .menu a{font-size:13px;padding:11px 10px} }
@media (max-width:389px){ .menu ul{padding:8px 8px 12px} .menu a{font-size:12px} }
/* スマホの幅(430px 以下)では、ボタン5つ(WEB予約・LINE公式・Instagram・電話・メニュー)と院名が入るように、
   ボタンを少し細くして字を少し小さくする(10/24 本人が見本の P1 を選んだ。360px でも院名は3行で入る) */
@media (max-width:430px){
  .bar-in{gap:6px;padding:0 6px 0 8px}
  .brand .logo-mark{width:32px;height:27px}
  .brand-name{font-size:10px}
  .acts{gap:3px}
  .act{width:44px;font-size:9px}
  .act svg{width:18px;height:18px}
}
/* 360px より狭い画面(折りたたみのスマホの外の画面など)では、院名がボタンに重なるので、院名を出さずロゴの絵だけにする */
@media (max-width:359px){ .brand-name{display:none} }

/* ボタン */
/* ボタンの文字は、言葉の途中で折り返さない(「・」や「、」の後ろで折り返す。入らないときだけ途中で折り返す) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 20px;border-radius:999px;
  font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;line-height:1.3;text-align:center;
  word-break:keep-all;overflow-wrap:anywhere}
.btn-sky{background:var(--sky);color:var(--navy)}
.btn-outline{background:#fff;color:var(--navy);border:2px solid var(--sky)}
.btn-block{display:flex;width:100%}
/* 文字の長いボタン(［代表］院長紹介…・トップのスポーツをされている方の欄)。スマホの幅でも1行に入るように、文字を少し小さくし、横の余白を狭くする
   (iPhone の字は1字が字の大きさと同じ幅。26字 × 13px が、幅 386px 以上で入る。それより狭いと 12px) */
.btn-long{padding:0 12px}
@media (max-width:480px){ .btn-long{font-size:13px;padding:0 6px} }
@media (max-width:385px){ .btn-long{font-size:12px} }

/* 写真の枠(写真がまだ無いときは、種類の名前を入れた仮の枠。R20) */
.photo{position:relative;display:flex;align-items:flex-end;padding:10px;border-radius:14px;color:#fff;font-size:12px;line-height:1.4;
  background:linear-gradient(135deg,var(--navy2) 0%,#3b78bd 55%,var(--sky) 100%);aspect-ratio:4/3;overflow:hidden}
.photo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 12px,transparent 12px 24px)}
.photo span{position:relative;background:rgba(14,42,90,.6);padding:4px 8px;border-radius:6px}
.photo.has-photo{padding:0}
.photo.has-photo::before{display:none}
.photo.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 中身がまだ無い欄 */
.pending{display:inline-block;margin:0;padding:4px 16px;border-radius:999px;background:var(--sky-soft);border:1px solid var(--line);
  color:var(--muted);font-size:14px;font-weight:700;letter-spacing:.1em}
.prose .pending{font-size:14px}

/* トップ:最初の画面 */
.hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,rgba(14,42,90,.95) 0%,rgba(27,74,143,.9) 75%,rgba(124,200,240,.45) 100%),
    repeating-linear-gradient(45deg,#1b4a8f 0 14px,#2a5fae 14px 28px)}
.hero .wrap{position:relative;padding:44px 20px 34px}
.hero .catch{font-family:var(--serif);font-size:36px;line-height:1.45;margin:0 0 16px;font-weight:700;letter-spacing:.02em}
.hero .sub{font-family:var(--serif);font-size:19px;margin:0 0 18px;font-weight:700}
.hero .lead{margin:0;font-size:15px;line-height:2;opacity:.96}
.hero .station{display:inline-block;margin:18px 0 0;font-size:13px;line-height:1.8;background:rgba(14,42,90,.45);border-radius:999px;padding:4px 12px}
.hero .tag{margin:16px 0 0;font-size:11px;letter-spacing:.3em}
.hero-photo{position:absolute;right:10px;top:10px;font-size:12px;line-height:1.4}
.hero-photo span{display:inline-block;background:rgba(14,42,90,.6);color:#fff;padding:4px 8px;border-radius:6px}
/* 写真があるとき(10/19 本人。案E):写真は暗くも薄くもせずに出し、文字の後ろだけ紺を重ねる。仮の縞模様は消す。
   紺はスマホでは上から下へ薄くなる。字の下の端(下の余白の上)までは .86 より薄くしない(R49) */
.hero.with-photo{isolation:isolate;background:var(--navy)}
.hero-photo.has-photo{inset:0;z-index:0}
.hero-photo.has-photo img{width:100%;height:100%;object-fit:cover}
.hero.with-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,42,90,.9) 0,rgba(14,42,90,.86) calc(100% - 170px),rgba(14,42,90,.3) 100%)}
.hero.with-photo .wrap{z-index:2;max-width:none;margin:0;padding:44px 20px 170px}
.hero.with-photo .lead{opacity:1}
.hero.with-photo .station{background:var(--sky);color:var(--navy);font-weight:700}

.intro{text-align:center;padding:40px 16px 8px}
.intro .logo-full{width:190px;height:auto;margin:0 auto 18px}
.intro p{font-family:var(--serif);font-size:min(20px,4.6vw);font-weight:700;margin:0}

/* 欄の共通 */
.block{padding:44px 16px}
.alt{background:var(--sky-soft)}
h2{margin:0 0 20px;font-size:22px;line-height:1.45;text-align:center}
h2 .en{display:block;font-size:11px;letter-spacing:.3em;color:var(--sky-strong);font-weight:700;margin-bottom:2px}
h2::after{content:"";display:block;width:36px;height:3px;background:var(--sky);border-radius:2px;margin:10px auto 0}
h2.serif{font-family:var(--serif)}
p{margin:0 0 12px}
.prose p{font-size:15px}
.center{text-align:center}
.more{margin-top:18px;text-align:center}

/* 特長 */
/* 10/20 本人の見本:薄い枠の中に、4つの札を2列に並べる(パソコンの幅でも2列)。札の上に水色の線の絵、下に2行の文 */
.features{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:18px}
.feature{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 8px;text-align:center;font-weight:700;font-size:14px;line-height:1.6}
.feature p{margin:0}
.feature svg{width:30px;height:30px;color:var(--sky-strong);display:block;margin:0 auto 12px}

/* 理念 */
.philo{background:#fff;border-radius:16px;padding:18px;margin-bottom:12px;border:1px solid var(--line)}
.philo .label{font-size:12px;letter-spacing:.2em;color:var(--sky-strong);font-weight:700;margin:0;text-align:left;line-height:1.8}
.philo h2.label::after{display:none}
.philo h3,.philo .philo-title{font-family:var(--serif);font-size:20px;line-height:1.6;margin:4px 0 10px;font-weight:700}
.philo p{font-size:15px}
.philo p:last-child{margin-bottom:0}
ol.rules{margin:0;padding:0;list-style:none}
ol.rules li{padding:14px 0;border-top:1px solid var(--line);font-size:15px}
ol.rules li:first-child{border-top:0;padding-top:4px}
ol.rules h3{font-family:inherit;font-size:16px;line-height:1.6;margin:0 0 4px}
ol.rules p{margin:0}

/* 代表・院長メッセージ・代表・院長紹介 */
.msg{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start}
.msg .photo{aspect-ratio:3/4}
.msg .quote{font-family:var(--serif);font-size:22px;font-weight:700;margin:0 0 10px}
.who{margin:12px 0 0}
.who p{margin:0}
.who .role{font-size:12px;color:var(--muted)}
.who .name{font-size:20px;font-weight:700;line-height:1.4}
.who .roman{font-size:10px;letter-spacing:.2em;color:var(--sky-strong);margin-bottom:10px}
.licenses{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px}
.licenses li{font-size:12px;font-weight:700;background:var(--sky-soft);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.page-head{background:var(--navy);color:#fff;text-align:center;padding:30px 16px}
.page-head h1{margin:0;font-size:24px;line-height:1.4}
.page-head .en{display:block;font-size:11px;letter-spacing:.3em;color:var(--sky);font-weight:700}
.page-head .page-sub{margin:6px 0 0;font-size:14px;font-weight:700;line-height:1.6;color:var(--sky)}
.bigquote{font-family:var(--serif);font-size:23px;line-height:1.7;font-weight:700;text-align:center;margin:0 0 26px}
.prose .bigquote{font-size:23px}
.lead-note{font-family:var(--serif);font-size:17px;line-height:1.8;font-weight:700;text-align:center;margin:-12px 0 26px}
.prose .lead-note{font-size:17px}
.profile{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;margin-bottom:28px}
.profile .photo{aspect-ratio:3/4}
.profile .who{margin:0}
h2.side{font-family:var(--serif);font-size:20px;text-align:left;margin:28px 0 12px;padding-left:12px;border-left:4px solid var(--sky)}
h2.side::after{display:none}
.profile + h2.side{margin-top:0}
/* 経歴・実績(10/18)。経歴は縦の線の年表、主な実績は札、保有国家資格は ✓ の一覧 */
.career-title{margin:24px 0 12px;font-size:17px;line-height:1.5;color:var(--navy)}
.career-head{margin:0 0 4px;font-size:16px;line-height:1.6;color:var(--navy);text-wrap:balance}
.career-when{color:var(--sky-strong)}
.career-timeline{list-style:none;margin:0 0 8px 6px;padding:0 0 0 20px;border-left:2px solid var(--line)}
.career-timeline li{position:relative;padding:0 0 18px}
.career-timeline li:last-child{padding-bottom:4px}
.career-timeline li::before{content:"";position:absolute;left:-28px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--sky);border:3px solid #fff;box-sizing:border-box}
.career-timeline p,.career-items p{margin:0;text-wrap:pretty;word-break:auto-phrase}
.career-items{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px}
.career-items li{background:var(--sky-soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.career-items p + p{margin-top:6px}
.career-title + .checks{max-width:none;margin:0 0 8px}

/* 料金 */
.menu-cards{display:grid;gap:10px}
/* トップの料金:番号・名前・時間を1行に並べる(10/13 の電話でトップを短くした) */
.menu-card{display:flex;align-items:center;gap:4px 10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.menu-card .no{flex:none;display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.menu-card h3{margin:0;font-size:16px;line-height:1.4}
.menu-card .time{font-size:12px;color:var(--muted);margin:0 0 0 auto;white-space:nowrap}
.plan{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:18px}
.plan-head{background:var(--navy);color:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:12px 14px}
.plan-head .no{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700}
.plan-head h2{margin:0;font-size:18px;line-height:1.3;text-align:left}
.plan-head h2::after{display:none}
.plan-head .time{margin-left:auto;font-size:11px;background:#fff;color:var(--navy);font-weight:700;border-radius:999px;padding:3px 10px}
.plan-body{padding:14px}
.plan-body p{font-size:14px}
.plan-body .summary .note{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
th,td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:middle}
thead th{background:#e3f1fb;color:var(--navy);font-size:12px;font-weight:700}
td.num,th.num{text-align:right;white-space:nowrap;font-weight:700}
tr.best td{background:var(--navy);color:#fff}
.fee{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fee div{background:var(--sky-soft);border-radius:10px;padding:8px;text-align:center;font-size:13px}
.fee b{display:block;font-size:18px}
.points{display:grid;gap:8px;margin-top:12px}
.points div{background:var(--sky-soft);border-radius:10px;padding:10px 12px}
.points p{margin:0;font-size:13px}
.points .point-title{color:var(--navy);display:flex;align-items:center;gap:6px;font-weight:700}
.points svg{width:18px;height:18px;color:#d4a017}
.tagline{text-align:center;margin-top:22px;color:var(--navy2)}
.tagline .ja{font-family:var(--serif);font-size:17px;font-weight:700;margin:0}
.tagline .en{font-size:12px;letter-spacing:.2em;margin:4px 0 0}

/* 診療時間 */
.hours th,.hours td{text-align:center;padding:9px 3px;border:1px solid var(--line)}
/* 午前と午後の区切りの線(土曜は上下で1つのマスなので、線が入らない) */
.hours tbody tr + tr > *{border-top:2px solid #a9d3ee}
.hours td.off{color:var(--red);font-weight:700}
.hours td.sat{font-weight:700;font-size:12px;line-height:1.35;background:var(--sky-soft)}
.hours tbody th{background:#fff;font-size:12px;white-space:nowrap}
.hours-text{list-style:none;padding:0;margin:14px 0 0;font-size:15px}
.hours-text li{padding:2px 0}
.hours-text .holiday{font-weight:700}
/* 最終受付:2行目(土曜)を1行目の時間の下にそろえる */
.hours-text .last{display:flex;gap:0 .5em}
.hours-text .last-lines{display:flex;flex-direction:column}
.hours-text .holiday span{color:var(--red)}

/* アクセス・ご予約 */
dl.info{margin:0 0 14px}
dl.info dt{font-size:12px;color:var(--muted)}
dl.info dd{margin:0 0 10px;font-weight:700}
/* アクセスの先頭の「地域+業種」の1文(R57。10/23) */
.access-lead{margin:-6px 0 18px;font-size:15px;line-height:1.9}
.access{display:grid;gap:16px;align-items:start}
.ryakuzu{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ryakuzu svg{display:block;width:100%;height:auto}
.ryakuzu figcaption{font-size:13px;padding:8px 12px 10px;color:var(--muted);line-height:1.6}
.ways{display:grid;gap:10px}
.way{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.way h3{margin:0 0 10px;font-size:16px}
.way p{font-size:14px;margin:0 0 10px}
.way .pending{margin-bottom:0}
.way .tel-number{font-size:20px;font-weight:700}
/* ボタンの下の説明(LINE公式の2行・電話番号。10/21 本人)。3つの枠のボタンは、広い幅で同じ高さに並ぶ */
.way .way-note,.way .tel-number{margin:10px 0 0}
.way-note span{display:block}
.way-note span + span{display:inline-block;margin-top:6px;background:var(--sky-soft);border:1px solid var(--line);border-radius:999px;padding:2px 12px;font-size:13px;font-weight:700}
/* 初めての方への持ち物の一覧。印は、もらった文と同じ「・」(10/20 ゆうすけ) */
.list{margin:0 0 10px;padding-left:1em;font-size:14px;list-style:"・"}
/* 持ち物と初回施術費の下の「＊」の注(10/20 ゆうすけ)。1つずつ行を分ける */
.way .notes{margin:0 0 12px;font-size:13px;line-height:1.7;color:var(--muted)}
.notes span{display:block}
.mini-cta{display:grid;gap:10px;max-width:420px;margin:0 auto}
/* ご予約・お問い合わせの欄の、ボタンの上の行(スポーツをされている方のページ。10/17) */
.reserve-note{max-width:560px;margin:0 auto 16px;font-size:15px;line-height:1.8}
.reserve-note p{margin:0 0 4px}
/* 支払い方法(ご予約・お問い合わせの欄) */
.payment{margin:14px 0 0;font-size:14px;line-height:1.7}
.payment-label{display:inline-block;margin:0 8px 4px 0;padding:1px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:700}
/* よくある質問(10/20 ゆうすけ)。1つの枠の中に線で分けて質問を並べ、押すと答えが開く(ゆうすけ「押したら開くみたいな!」)。
   右の「＋」は、開くと「－」になる(線で描く)。答えは、質問の文の頭にそろえる */
.faq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 18px}
.faq-item + .faq-item{border-top:1px solid var(--line)}
.faq-item > summary{list-style:none;display:flex;align-items:flex-start;gap:6px;padding:16px 0;cursor:pointer;font-weight:700;font-size:16px;line-height:1.6}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-no{flex:none;min-width:40px;color:var(--sky-strong)}
.faq-q{flex:1;word-break:auto-phrase}
.faq-mark{flex:none;position:relative;width:14px;height:14px;margin:6px 0 0 8px}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:var(--muted);border-radius:1px}
.faq-mark::before{left:0;right:0;top:6px;height:2px}
.faq-mark::after{top:0;bottom:0;left:6px;width:2px}
.faq-item[open] .faq-mark::after{display:none}
.faq-a{padding:0 0 16px 46px}
.prose .faq-a p{margin:0 0 6px}
.prose .faq-a p:last-child{margin:0}
.faq-other{margin:28px 0 8px;font-size:17px}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gallery .wide{grid-column:1/-1;aspect-ratio:16/9}
/* たたんだ欄(院内のようす。10/17 の電話)。見出しの下の「写真を見る」で開き、開いた写真の下の「折りたたむ」でたたむ。
   JavaScript が動くときは、開いたら上のボタンを隠す(site.js が html に js の印を付ける)。動かないときは、上のボタンが「折りたたむ」に変わる */
.fold > summary{list-style:none;display:flex;width:fit-content;margin:0 auto}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::after{content:"";width:7px;height:7px;margin:-3px 0 0 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.fold[open] > summary::after{margin:3px 0 0 4px;transform:rotate(-135deg)}
.fold-hide,.fold[open] .fold-show{display:none}
.fold[open] .fold-hide{display:inline}
.fold[open] > summary{margin-bottom:16px}
.js .fold[open] > summary{display:none}
.fold-close::after{content:"";width:7px;height:7px;margin:3px 0 0 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-135deg)}
.news{list-style:none;margin:0;padding:0}
.news li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.news li time{flex:none;color:var(--muted);font-size:13px}
/* 本文のあるお知らせ(10/19 ゆうすけ「開院のご挨拶」):札にして、日付・見出し・はじめの段落と「記事を読む」。
   開くと残りの段落と署名が出て、下の「折りたたむ」でたたむ(fold は院内のようすと同じ。ボタンは文字だけにして右にそろえる) */
.news li.news-item{display:block;margin:0 0 12px;padding:16px 18px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.news-item time{display:block;margin:0 0 4px}
.news-title{margin:0 0 8px;font-size:16px;line-height:1.5;color:var(--navy)}
.news-item p{margin:0 0 10px;line-height:1.9;text-wrap:pretty}
/* 強調する行(10/21 ゆうすけ「「治したい」に、本気で応える。のところの色を濃くしてほしい」。本人「両方とも太字。そこが大事だから、パッと見た瞬間に目立たせたい」)。
   太字は <strong>。色は、本文の --text(紺)より濃い、黒に近い紺 */
.news-item p.emphasis{color:var(--text-deep)}
.news-item .fold > summary,.news-item .fold-close{display:flex;align-items:center;margin:2px 0 0 auto;padding:4px 0;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--sky-strong);cursor:pointer}
.news-item .fold[open] > summary{margin-bottom:6px}
.news-item .more{margin-top:0;text-align:right}
.news-sign{margin-top:14px;text-align:right}
.news-sign p{margin:0}
/* 欄の間の写真の帯(10/13 の電話)。10/21 に院長(仕事中)の写真(16:9。R55) */
.band .band-photo{aspect-ratio:16/9;border-radius:0}
/* ✓ の付いた行(症状一覧の一番上の3行。10/13) */
.checks{list-style:none;margin:0 auto 16px;padding:14px 16px;max-width:620px;display:grid;gap:10px;text-align:left;
  background:#fff;border:2px solid var(--sky);border-radius:16px}
.checks li{display:flex;align-items:flex-start;gap:10px;font-weight:700;font-size:15px;line-height:1.6;color:var(--navy);text-wrap:pretty;word-break:auto-phrase}
.checks svg{flex:none;width:24px;height:24px;padding:4px;margin-top:1px;border-radius:50%;background:var(--sky);color:var(--navy)}
/* 症状一覧のページ:部位ごとの札。スマホは名前の下に中身、広い幅は横に並べる(ゆうすけの返事 10/13。参考サイトと同じ形) */
.symptom-list{display:grid;gap:10px;background:var(--sky-soft);border-radius:18px;padding:12px}
.symptom{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 2px 6px rgba(14,42,90,.05)}
.symptom h2{margin:0 0 6px;font-size:15px;line-height:1.5;text-align:left;color:var(--sky-strong)}
.symptom h2::after{display:none}
.symptom p{margin:0;font-size:14px;line-height:1.8}
/* 料金①:整骨院での保険治療 */
.covered{background:var(--sky-soft);border-radius:12px;padding:12px 14px;margin:12px 0}
.covered h3{margin:0 0 6px;font-size:15px;color:var(--navy)}
.covered p{margin:0 0 6px}
.covered ul{list-style:none;margin:0;padding:0;font-size:14px}
.covered li{padding:3px 0}

.trainer{background:var(--navy);color:#fff;border-radius:16px;padding:20px}
.trainer h2{margin:0 0 14px;font-size:18px;text-align:left}
.trainer h2 .en{color:var(--sky)}
.trainer h2::after{margin:10px 0 0}
/* 札(みなみの治療・交通事故のページ。10/14。スポーツをされている方のページ。10/17。企業理念のページの札と同じ形) */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;margin-bottom:14px}
.card p{font-size:15px}
.card p:last-child{margin-bottom:0}
/* 見出しと大きい一文は、行の長さをそろえて折り返す(最後の行に1〜2字だけ残らないように) */
.card-title{margin:0 0 14px;font-family:var(--serif);font-size:20px;line-height:1.5;text-align:left;text-wrap:balance}
.card-title::after{margin:10px 0 0}
.card-no{color:var(--sky-strong)}
.card-catch{margin:0 0 14px;font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--navy2);text-wrap:balance}
.card-sub{margin:24px 0 10px;font-size:16px;line-height:1.6;padding-left:10px;border-left:4px solid var(--sky);text-wrap:balance}
.card p{text-wrap:pretty}
.card .checks{max-width:none;margin:4px 0 14px}
/* 札の中の写真(みなみの治療。10/21 本人):スマホでは文の下。広い幅では文の横(下の @media) */
.card-row + .card-row,.card-row + *,.card-photo + .card-text{margin-top:24px}
.card-text > :first-child{margin-top:0}
.card-photo{aspect-ratio:4/3;margin-top:16px;border-radius:12px}
/* スマホの幅では、札の横の余白を狭くし、見出し・小見出し・大きい一文の文字を少し小さくして、言葉の途中で折り返さないようにする
   (スポーツをされている方のページの「より良い身体の状態で続けるために。」の17字が、幅 360px でも1行に入る大きさ。10/17) */
@media (max-width:430px){ .card{padding:20px 16px} .card-title{font-size:18px} .card-catch{font-size:15.5px} }
@media (max-width:380px){ .card-title{font-size:16.5px} .card-catch{font-size:14px} .card-sub{font-size:15px} }
/* 交通事故のページの一番上の3行。3行目は「、」が無く1行に入らないので、真ん中にそろえず、ふつうの文と同じく左から書く
   (真ん中にそろえて行の長さをそろえると「交通事故に/よる」のように言葉の途中で切れて目立つ) */
.card-lead p:first-child{font-size:18px;font-weight:700;color:var(--navy)}
@media (max-width:380px){ .card-lead p:first-child{font-size:17px} }
.card-contact{margin:22px 0 0;text-align:center;font-weight:700;font-size:16px;line-height:1.7}
.card-contact span{display:block}
/* トップの「みなみの治療」(10/14) */
.treat-label{width:fit-content;margin:0 auto 6px;padding:2px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--sky-strong)}
.prose .treat-label{font-size:13px}
.treat-catch{margin:0 0 16px;font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.6;text-align:center;text-wrap:balance}
.prose .treat-catch{font-size:18px}

footer{background:var(--navy);color:#fff;font-size:13px}
footer .wrap{padding:30px 16px}
footer p{margin:0}
.foot-logo{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:8px 12px}
.foot-name{margin:12px 0 6px;font-weight:700}
.foot-en,.foot-words-en{font-size:11px;letter-spacing:.25em;opacity:.9}
.foot-links{list-style:none;padding:0;margin:14px 0;display:grid;gap:6px}
.foot-links li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.foot-links a{font-weight:700}
.foot-links span{font-size:12px;opacity:.85}
.foot-script{margin-top:6px;font-family:var(--serif);font-style:italic;font-size:15px;opacity:.9}
.foot-words{margin-top:14px;font-family:var(--serif);opacity:.9}
.foot-copy{margin-top:6px;opacity:.7}

/* 小窓(popover。電話の案内・トレーナーの案内・外観の写真) */
[popover]{display:none}
[popover]:popover-open{display:block}
[popover].is-open{display:block}
.notice{position:fixed;inset:auto;top:calc(var(--bar-h) + 12px);left:50%;transform:translateX(-50%);margin:0;z-index:60;
  width:min(92vw,440px);border:0;border-radius:16px;padding:18px 18px 16px;background:#fff;color:var(--text);
  box-shadow:0 16px 40px rgba(14,42,90,.28);font-size:15px;line-height:1.7}
.notice::backdrop{background:rgba(14,42,90,.35)}
.notice p{margin:0 0 14px}
.notice .notice-title{font-weight:700;font-size:17px;margin-bottom:8px}
.notice .pending{display:inline-block}

/* 確認用:感想を送る(公開の前だけ。本番には入れない) */
.fb-ribbon{background:#fff6e5;color:#8a5300;border-bottom:1px dashed #e2a640;font-size:12px;line-height:1.5}
.fb-ribbon .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px}
.fb-ribbon .fb-open{flex:none;min-height:34px;padding:0 14px;font-size:12px;background:var(--sky-strong);color:#fff}
.fb-block{padding:22px 16px;background:#fff6e5;border-top:1px dashed #e2a640}
.fb-block p{font-size:13px;color:#8a5300;margin:0 0 10px}
.notice.feedback{max-height:calc(100vh - var(--bar-h) - 24px);overflow:auto}
.fb-note{font-size:13px;color:var(--muted);background:var(--sky-soft);border-radius:10px;padding:10px 12px}
.fb-group{margin:18px 0 2px;font-size:13px;font-weight:700;color:var(--sky-strong)}
.fb-item{border-top:1px solid var(--line);padding:12px 0}
.fb-item .fb-q{font-weight:700;font-size:14px;line-height:1.5;margin:0 0 8px}
.fb-item .fb-q small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.fb-opts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.fb-opts button{border:1px solid #9fc9e3;background:#fff;color:var(--navy);border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.fb-opts button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.feedback textarea{display:block;width:100%;font:inherit;font-size:16px;padding:9px 11px;border:1px solid #9fc9e3;border-radius:10px;color:var(--text)}
.feedback .fb-out{font-size:13px;line-height:1.6;background:var(--sky-soft)}
.fb-want{font-size:13px;margin:14px 0 0;padding:10px 12px;background:var(--sky-soft);border-radius:10px}
.fb-want ul{margin:4px 0 0;padding-left:1.2em}
.fb-label{font-size:13px;font-weight:700;margin:14px 0 4px}
.fb-status{min-height:1.5em;font-size:13px;color:var(--sky-strong);margin:6px 0}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}

@media (min-width:760px){
  .brand-name{font-size:15px}
  .symptom{display:grid;grid-template-columns:8em 1fr;gap:14px;align-items:start}
  .symptom h2{margin:0}
  .menu-cards{grid-template-columns:repeat(3,1fr)}
  .features{gap:16px;padding:16px}
  .feature{padding:40px 16px;font-size:18px}
  .feature svg{width:36px;height:36px;margin-bottom:16px}
  /* 帯の写真は、横いっぱいにすると上下が切れて頭が隠れるので、切らずに(16:9のまま)文の幅(820px)に入れる。
     帯の色は上下の欄と同じ薄い水色(10/21。前は高さ 360px で横いっぱい) */
  .band{background:var(--sky-soft);padding:0 16px}
  .band .band-photo{max-width:820px;margin:0 auto;border-radius:14px}
  .card{padding:24px 26px}
  /* 札の中の写真は文の横。左右は交互(10/21 本人) */
  .card-row{display:grid;gap:24px;align-items:start}
  .card-row.photo-left{grid-template-columns:2fr 3fr;grid-template-areas:"photo text"}
  .card-row.photo-right{grid-template-columns:3fr 2fr;grid-template-areas:"text photo"}
  .card-row .card-text{grid-area:text}
  .card-row .card-photo{grid-area:photo;margin-top:0}
  /* 行を決めて置く札(photo-grid。03。10/21):文と写真に付けた行の印(r1〜r4)のとおりに置く。文は段落の間(12px)だけ空けて続ける。
     span2 の写真(2枚あるときの上の写真)は、下の行まで入ってよい(上の文より写真が高くても、続く文の前が空かないように)。
     下の写真は、✓ の一覧からあとの文と同じ行に置くので、上の端が ✓ の一覧の上の端にそろう(10/21 本人の青いライン) */
  .card-row.photo-grid{grid-template-areas:none;row-gap:12px}
  .photo-grid > .card-text,.photo-grid > .card-photo{grid-area:auto;margin-top:0}
  .photo-grid.photo-right > .card-text{grid-column:1}
  .photo-grid.photo-right > .card-photo{grid-column:2}
  .photo-grid.photo-left > .card-text{grid-column:2}
  .photo-grid.photo-left > .card-photo{grid-column:1}
  .photo-grid > .r1{grid-row:1}
  .photo-grid > .r2{grid-row:2}
  .photo-grid > .r3{grid-row:3}
  .photo-grid > .r4{grid-row:4}
  .photo-grid > .span2{grid-row-end:span 2}
  /* 広い幅では、略図と住所を横に並べる(縦に長くしない) */
  .access{grid-template-columns:3fr 2fr;gap:24px}
  .menu-card{flex-wrap:wrap}
  .ways{grid-template-columns:repeat(3,1fr)}
  #first .ways{grid-template-columns:repeat(2,1fr)}
  .hero .catch{font-size:48px}
  /* 写真があるとき(案E):字の左の端は、写真の奥のベッドの頭枕(タオルを掛けた半円の枕)の右の端にそろえる
     (10/20 ゆうすけ「もう少しだけ左にいける? 奥のベッドの頭枕の右に合わせる感じで」)。この幅では写真の大きさは横幅で決まる(上下を切る)ので、
     頭枕の右の端はどの幅でも左から 14.2%(元の写真の 1477px のうち 210px。幅 1440px で 204px)。% は .hero の幅に対する割合で、写真と同じ。
     紺は左から右へ薄くなる。字の右の端は字の左の端から 400px くらいなので、そこに 436px を足した所までは .86 のままにする。
     1つ目は max() を読めないブラウザのため(字の下が薄くならない形) */
  .hero.with-photo::before{
    background:linear-gradient(90deg,rgba(14,42,90,.92) 0,rgba(14,42,90,.86) 72%,rgba(14,42,90,.3) 90%,rgba(14,42,90,0) 100%);
    background:linear-gradient(90deg,rgba(14,42,90,.92) 0,rgba(14,42,90,.86) max(36%,calc(14.2% + 436px)),rgba(14,42,90,.3) max(58%,calc(14.2% + 616px)),rgba(14,42,90,0) max(76%,calc(14.2% + 756px)))}
  .hero.with-photo .wrap{padding:52px 24px 46px 14.2%}
  .msg{grid-template-columns:160px 1fr}
  .profile{grid-template-columns:180px 1fr}
}