/* news-single.css — news-campaign.html の<style>をそのまま抽出（ページ単位で分離） */

/* ==========================================================
   トークン：ASPATHブラウン・ゴールド × SOHGO型のやわらかさ
========================================================== */
:root{
  --ink:       #26383F;
  --brown:     #264653;
  --gold:      #3F6A76;
  --gold-deep: #1E3A44;
  --gold-soft: #E7D9C1;
  --paper:     #F4E9D8;
  --card:      #FFFFFF;
  --sun:       #F4A261;
  --leaf:      #3F6A76;
  --line-green:#06C755;
  --line-dark: #05a648;
  --shadow: 0 6px 20px rgba(38,70,83,.10);
  --radius: 20px;
  --maxw: 1200px;
  --font-head:"Kiwi Maru","Zen Maru Gothic",sans-serif;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  font-family:var(--font-body); font-size:18px; line-height:1.95;
  color:var(--ink); background:var(--paper); -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* ===== 日本語の折り返し（サイト全体の既定） =====
   word-break:auto-phrase … 文節の切れ目で改行する（「お役／立ち情報」のような分断を防ぐ）
   line-break:strict      … 小さい「っ」「ゃ」や句読点が行頭に来ないようにする
   ※text-wrap:balance は auto-phrase を無効化するため使わない            */
body{ word-break:auto-phrase; line-break:strict; }
.nw{ white-space:nowrap; }   /* 途中で切りたくない語句 */
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold-deep); }
a:focus-visible, button:focus-visible, summary:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; border-radius:6px; }
h1,h2,h3{ font-family:var(--font-head); font-weight:500; color:var(--brown); line-height:1.55; }
h2{ font-size:clamp(25px,3.8vw,36px); letter-spacing:.04em; }
h3{ font-size:clamp(19px,2.5vw,23px); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; position:relative; }

/* ==========================================================
   動き（SOHGO移植）：reveal立ち上がり／浮遊装飾／Ken Burns
========================================================== */
.reveal{ opacity:1; transform:none; transition:none; }
.reveal.on{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; } .reveal.d2{ transition-delay:.24s; } .reveal.d3{ transition-delay:.36s; }

@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-16px) rotate(4deg);} }
@keyframes floaty2{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(14px) rotate(-5deg);} }
.float-item{ display:none; }
.float-circle{
  border-radius:50%; display:grid; place-items:center;
  background:#fff; box-shadow:var(--shadow);
}

@keyframes kenburns{ 0%{ transform:scale(1);} 100%{ transform:scale(1.09);} }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
  /* ヒーローのスライドショーは体験の核なので、緩やかなクロスフェードのみ例外的に維持 */
  .hero-slide{ transition:opacity 2.2s ease!important; }
  /* ローディング演出：ブランド体験の核として reduce 設定でもフル演出を維持
     クラスセレクタ（詳細度 0,1,0）で universal (*) より優先し、
     各要素のアニメ／トランジションを個別に復活させる */
  .ldr-logo{ animation:ldrLogo 1.5s cubic-bezier(.2,.7,.2,1) .3s forwards !important; }
  .ldr-main{ animation:ldrUp 1.2s ease .9s forwards !important; }
  .ldr-sub{ animation:ldrUp 1.2s ease 1.5s forwards !important; }
  .ldr-path{ animation:ldrFade .7s ease 1.9s forwards !important; }
  .ldr-path i{ animation:ldrRun 2s ease-in-out 1.25s infinite !important; }
  .ldr-path b{ animation:ldrWalk 2s ease-in-out 1.25s infinite !important; }
  .ldr-glow{ animation:ldrGlowIn 1.4s ease .2s forwards, ldrGlow 3.8s ease-in-out .2s infinite !important; }
  .ldr-rings i{ animation:ldrRing 3.6s ease-out infinite !important; }
  .ldr-rings i:nth-child(2){ animation-delay:1.2s !important; }
  .ldr-rings i:nth-child(3){ animation-delay:2.4s !important; }
  .ldr-particles span{ animation:ldrFloat linear infinite !important; }
  .ldr-phrase{ transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1) !important; }
  #aspath-loader.is-hidden{ transition:opacity 2.6s ease, visibility 2.6s ease, transform 2.6s cubic-bezier(.33,0,.2,1), filter 2.6s ease !important; }
}

/* ドット柄（SOHGOのbg_dot移植） */
.dots{
  position:absolute; width:220px; height:160px; z-index:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(var(--gold-soft) 3.5px, transparent 3.5px);
  background-size:22px 22px;
}

/* ==========================================================
   統一画像システム（v6.4）
   使い方：スロット内に <img src="写真URL" alt="..."> を1行入れるだけ。
   仮置きのイラスト・ラベルは自動で非表示になります。
   サイズ違いへの柔軟対応（スロットの style 属性で指定）：
     --ratio:3/4        … 縦横比を変更（例 1/1, 16/9, 3/4）
     --pos:center 20%   … 切り抜き位置（顔写真は上寄せ推奨）
   クラスで挙動変更：
     fit-contain … 切り抜かず全体を表示（資料・ロゴ向き）
     h-auto      … 比率固定をやめ、画像の高さに追従
     plain       … 枠・背景なし（透過イラスト向き）
========================================================== */
.img-slot{
  position:relative; overflow:hidden; border-radius:26px;
  aspect-ratio:var(--ratio, 4/3);
  background:linear-gradient(160deg,#EBDDC6,#DCCBAA);
  box-shadow:var(--shadow); border:1px solid var(--gold-soft);
}
.img-slot > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:var(--fit, cover); object-position:var(--pos, 50% 40%);
}
.img-slot.fit-contain{ --fit:contain; background:#fff; }
.img-slot.h-auto{ aspect-ratio:auto; }
.img-slot.h-auto > img{ position:static; height:auto; }
.img-slot.plain{ background:none; border:none; box-shadow:none; }
/* 写真が入ったら仮置き（イラスト・ラベル・文字）を自動非表示 */
.img-slot:has(> img) .fallback,
.img-slot:has(> img) .slot-label,
.img-slot.has-photo .fallback,
.img-slot.has-photo .slot-label{ display:none; }
.img-slot .fallback{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#46666F; font-size:15px; font-weight:700; padding:10px; }
.img-slot.plain .fallback{ position:static; display:block; padding:0; }
.img-slot .slot-label{
  position:absolute; inset:auto 10px 10px auto; z-index:2; background:rgba(255,255,255,.85);
  color:#46666F; font-size:14px; font-weight:700; border-radius:8px; padding:4px 10px;
}

/* ==========================================================
   ヘッダー
========================================================== */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:100;
  background:rgba(251,247,240,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gold-soft);
}
.header-in{ max-width:100%; margin:0 auto; padding:12px clamp(20px,4vw,56px); display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; min-width:0; margin-right:auto; }
.brand > span{ min-width:0; }
.brand-sub{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-logo{ height:48px; width:auto; padding:0; background:none; box-shadow:none; }
@media (max-width:760px){ .brand-logo{ height:64px; } }
.brand-name{ font-family:var(--font-head); font-weight:600; font-size:25px; letter-spacing:.12em; color:var(--gold-deep); }
.brand-sub{ font-size:14px; color:#46666F; }
.header-right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.gnav{ display:flex; gap:4px 24px; flex-wrap:wrap; justify-content:flex-end; }
.gnav a{ text-decoration:none; color:var(--brown); font-family:var(--font-head); font-size:24px; padding:8px 2px; border-bottom:3px solid transparent; white-space:nowrap; }
.gnav a:hover{ border-bottom-color:var(--sun); }
.header-sns{ display:flex; align-items:center; gap:9px; }
.header-sns a{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff;
  box-shadow:0 3px 8px rgba(30,45,52,.18); transition:transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.header-sns a:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(30,45,52,.28); filter:saturate(1.08); }
.header-sns a[aria-label="Instagram"]{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.header-sns a[aria-label="YouTube"]{ background:#FF0000; }
.header-sns a[aria-label="Facebook"]{ background:#1877F2; }
.header-sns a[aria-label="公式LINE"]{ background:#06C755; }
.header-cta{ display:flex; align-items:center; gap:10px; }
.hbtn{ font-family:var(--font-head); font-weight:700; font-size:17px; line-height:1; padding:13px 20px; border-radius:999px; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:transform .2s, box-shadow .2s, filter .2s; }
.hbtn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(30,45,52,.22); filter:saturate(1.05); }
.hbtn-reserve{ background:var(--sun); color:#fff; box-shadow:0 4px 12px rgba(244,162,97,.28); }
.hbtn-line{ background:#06C755; color:#fff; }
.hbtn-line .hbtn-ico{ width:18px; height:18px; }
@media (max-width:760px){ .hbtn{ font-size:16px; padding:11px 15px; } .header-cta{ gap:8px; } }

.header-sns a.sns-line-hd{ position:relative; margin-left:6px; }
.header-sns a.sns-line-hd::before{ content:""; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:1px; height:20px; background:var(--gold-soft); }
.header-sns svg{ width:18px; height:18px; }

/* ハンバーガー（モバイルのみ表示） */
.hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 10px; background:none; border:none; cursor:pointer; }
.hamburger span{ display:block; height:3px; border-radius:3px; background:var(--brown); transition:transform .3s, opacity .3s; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ドロワー */
.drawer-overlay{ position:fixed; inset:0; background:rgba(30,45,52,.5); z-index:300; opacity:0; transition:opacity .3s; }
.drawer-overlay.open{ opacity:1; }
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(82vw,320px); background:var(--paper); z-index:310; box-shadow:-8px 0 30px rgba(30,45,52,.2); transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; padding:20px 22px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto; }
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer-head img{ height:50px; width:auto; }
.drawer-close{ width:44px; height:44px; background:none; border:none; font-size:34px; line-height:1; color:var(--brown); cursor:pointer; }
.drawer-links{ list-style:none; display:grid; gap:2px; margin-bottom:20px; }
.drawer-links a{ display:block; padding:15px 8px; font-family:var(--font-head); font-size:17px; color:var(--brown); text-decoration:none; border-bottom:1px solid var(--gold-soft); }
.drawer-links a:hover{ color:var(--sun); }
.drawer-sns{ display:flex; gap:12px; justify-content:center; margin-bottom:20px; }
.drawer-sns a{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.drawer-sns a[aria-label="Instagram"]{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.drawer-sns a[aria-label="YouTube"]{ background:#FF0000; }
.drawer-sns a[aria-label="Facebook"]{ background:#1877F2; }
.drawer-sns svg{ width:22px; height:22px; }
.drawer-cta{ width:100%; }
/* ドロワー内のLINEボタンは幅が狭いので、1行に収まるよう文字と余白を調整 */
.drawer-cta.btn.big{ padding:17px 12px; font-size:clamp(15.5px,4vw,17px); gap:8px; white-space:nowrap; }
.drawer-cta .line-ico{ width:20px; height:20px; flex:none; }
body.drawer-open{ overflow:hidden; }
@media (max-width:760px){ .gnav{ gap:4px 18px; } .gnav a{ font-size:18px; } .header-right{ gap:12px; } }
@media (max-width:760px){ .gnav{ order:3; width:100%; justify-content:center; padding-top:8px; border-top:1px solid var(--gold-soft); } }
@media (max-width:760px){ .header-right{ display:none; } .hamburger{ display:flex; margin-left:auto; } .brand{ margin-right:auto; } }

/* ボタン（c-btn01移植：丸ピル＋矢印スライド） */
.btn{
  /* inline-flex にすると、ボタン内の span 要素がひとつずつ独立した塊として扱われ、
     幅の狭い端末で「初回体験／を申し込む／（半額／4,400円）」のように
     文字がバラバラに散る。inline-block なら普通の文章として自然に折り返す。
     ※ここを inline-flex に戻さないこと。 */
  display:inline-block; text-align:center; vertical-align:middle;
  font-family:var(--font-head); font-weight:500; text-decoration:none;
  border-radius:999px; transition:transform .25s, box-shadow .25s, background .25s;
  position:relative;
}
/* inline-block では gap が効かないため、アイコンと矢印の余白は margin で取る */
.btn .line-ico{ vertical-align:-0.32em; margin-right:8px; }
.btn .arw{ display:inline-block; margin-left:10px; transition:transform .25s; }
.btn:hover{ transform:translateY(-3px); }
.btn:hover .arw{ transform:translateX(5px); }
.btn-form{ background:linear-gradient(135deg,var(--sun),#DD8236); color:#fff; box-shadow:0 10px 22px rgba(244,162,97,.35); }
.btn-line{ background:var(--line-green); color:#fff; box-shadow:var(--shadow); }
.btn-line:hover{ background:var(--line-dark); }
.btn-ghost{ background:#fff; color:var(--brown); border:2px solid var(--gold); }
.btn-ghost:hover{ background:var(--gold-soft); }
.btn.big{ padding:19px 42px; font-size:clamp(17px,2.3vw,21px); }
.btn.mid{ padding:13px 30px; font-size:16px; }
.btn.small{ padding:10px 20px; font-size:15.5px; }
.zero{ background:#fff; color:var(--sun); border-radius:8px; padding:1px 10px; font-size:.85em; font-weight:700; }
.line-ico{ width:1.3em; height:1.3em; flex:none; }

/* ==========================================================
   ヒーロー（v6.2：全サイズでフレックス配置＝衝突しない構造）
========================================================== */
/* ===== 中央配置ヒーロー（nsleep型：背景写真＋中央テキスト＋SCROLL） ===== */
.hero{
  position:relative; overflow:hidden;
  min-height:min(92vh,820px);
  display:flex; align-items:center; justify-content:center;
  padding:80px 5% 90px; text-align:center;
}
.hero-scrim{ position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(20,38,45,.28) 0%, rgba(20,38,45,.16) 40%, rgba(20,38,45,.34) 100%); }
.hero-center{ position:relative; z-index:3; max-width:920px; }
.hero-badge-center{ display:inline-block; background:rgba(255,255,255,.92); color:var(--brown);
  font-size:clamp(12px,1.5vw,14px); font-weight:700; padding:8px 22px; border-radius:30px; margin-bottom:26px;
  box-shadow:0 4px 14px rgba(0,0,0,.15); }
.hero-title{ font-family:var(--font-head); color:#fff; font-weight:700;
  font-size:clamp(30px,5.2vw,56px); line-height:1.5; letter-spacing:.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.35); margin-bottom:26px; }
.hero-title .accent{ color:#F6D9AC; }
.hero-subtitle{ font-family:"Shippori Mincho B1",serif; color:#fff; font-weight:600;
  font-size:clamp(14px,2vw,19px); line-height:1.9; text-shadow:0 2px 14px rgba(0,0,0,.4);
  border-top:1px solid rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.5);
  display:inline-block; padding:14px 8px; }
.hst-mark{ color:#F6D9AC; font-weight:700; }
/* SCROLLインジケーター */
.hero-scroll{ position:absolute; z-index:4; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; }
.hero-scroll-dot{ width:26px; height:44px; border:2px solid rgba(255,255,255,.75); border-radius:16px; position:relative; }
.hero-scroll-dot::before{ content:""; position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width:4px; height:8px; background:#fff; border-radius:2px; animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 0%{ opacity:0; top:8px; } 40%{ opacity:1; } 80%{ opacity:0; top:22px; } 100%{ opacity:0; } }
.hero-scroll-label{ font-size:12.5px; letter-spacing:.2em; color:rgba(255,255,255,.85); font-family:var(--font-body); }
@media(max-width:640px){
  .hero{ min-height:88vh; padding:70px 6% 80px; }
  .hero-subtitle{ padding:12px 4px; }
}
@media (prefers-reduced-motion: reduce){ .hero-scroll-dot::before{ animation:none; opacity:1; } }

.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 2.2s ease;
  background-size:cover; background-repeat:no-repeat;
  background-position:var(--pos, center);
}
.hero-slide > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--pos, center);
}
.hero-slide:has(> img) .kb{ display:none; }  /* 写真使用時は装飾グラデ停止 */
.hero-slide:has(> img) .slot-label{ display:none; }
.hero-slide.on{ opacity:1; }
.hero-slide .kb{ position:absolute; inset:0; background:inherit; }
.hero-slide .slot-label{
  position:absolute; left:14px; top:14px;   /* バッジ（右上）と反対側へ */
  background:rgba(255,255,255,.85); color:#46666F; font-size:14px; font-weight:700;
  border-radius:8px; padding:4px 10px; z-index:2;
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:110px; z-index:1;
  background:linear-gradient(to bottom, transparent, var(--paper));
}
.hero-copy-box{
  position:relative; z-index:5;
  max-width:640px;
  background:rgba(251,247,240,.85); backdrop-filter:blur(4px);
  border-radius:26px; padding:32px 36px 28px;
  box-shadow:var(--shadow);
}
.hero-copy-box h1{
  font-size:clamp(29px,4.4vw,48px); font-weight:500; color:var(--brown);
  letter-spacing:.05em; line-height:1.45; margin-bottom:14px;
}
.hero-copy-box h1 .accent{ color:var(--sun); }
.hero-sub{
  display:inline-block; background:#fff; border-radius:12px;
  padding:11px 18px; font-family:"Shippori Mincho B1",serif; font-size:clamp(13px,1.6vw,15.5px); font-weight:600; color:var(--brown);
  margin-bottom:16px; box-shadow:var(--shadow); line-height:1.7;
}
.hero-sub-mark{
  display:inline-block; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff;
  font-family:"Shippori Mincho B1",serif; font-weight:800; font-size:.95em;
  padding:2px 12px; border-radius:6px; letter-spacing:.05em; margin-right:8px; vertical-align:middle;
}
.hero-sub strong{ color:var(--sun); font-weight:800; }
.hero-sub-loc{ font-size:.88em; color:#5E7681; white-space:nowrap; }
.hero-sub-loc::before{ content:"｜"; color:var(--gold-soft); margin:0 2px; }
.hero-cta{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.hero-note{ font-size:14.5px; color:#52707A; }
.hero-news{
  position:absolute; z-index:6; right:20px; bottom:22px;
  background:#fff; border-radius:14px; box-shadow:var(--shadow);
  padding:12px 18px; max-width:min(430px,86vw); text-decoration:none;
}
.hero-news .tag{ background:var(--leaf); color:#fff; border-radius:999px; font-size:14px; padding:2px 12px; font-weight:700; margin-right:10px; }
.hero-news .t{ color:var(--ink); font-size:15px; font-weight:500; }
/* （旧モバイル調整は削除済み → 末尾「レスポンシブ強化v6.1」ブロックに統合） */

/* ==========================================================
   セクション共通＋芯ライン（ASPATH独自シグネチャー維持）
========================================================== */
.spine-page{ position:relative; }
.section{ position:relative; padding:92px 0; }
.sec-head{ text-align:center; margin-bottom:46px; position:relative; z-index:1; }
.sec-node{ width:34px; height:34px; margin:0 auto 12px; display:grid; place-items:center; background:var(--paper); border-radius:50%; box-shadow:0 0 0 8px var(--paper); position:relative; z-index:1; }
.sec-node svg{ width:26px; height:26px; }
.eyebrow{ display:inline-block; font-family:var(--font-head); font-size:15px; letter-spacing:.2em; color:var(--sun); margin-bottom:6px; }
.lede{ margin-top:14px; font-size:16.5px; color:#52707A; max-width:780px; margin-left:auto; margin-right:auto; }
.sec-alt{ background:#F4E9D8; }
.wave{ display:block; width:100%; height:44px; position:absolute; top:-43px; left:0; }
@media (max-width:760px){
  .sec-head{ text-align:center; padding-left:0; }
  .sec-node{ margin:0 auto 12px; }
}

/* メッセージ（home-msg移植：丸画像＋テキスト、浮遊ロゴ） */
.msg-set{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; position:relative; z-index:1; }
.msg-img{ --ratio:1/1; border-radius:46% 54% 52% 48% / 52% 46% 54% 48%; }
.msg-txt h2{ margin-bottom:18px; }
.msg-txt p{ margin-bottom:14px; }
@media (max-width:760px){ .msg-set{ grid-template-columns:1fr; } .msg-img{ max-width:400px; margin:0 auto; } }

/* 円形サービスカード（home-service-list移植） */
.svc-list{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; z-index:1; }
.svc-item{ text-align:center; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 22px 26px; border-top:6px solid; }
.svc-item.is-gold{ border-color:var(--gold); } .svc-item.is-leaf{ border-color:var(--leaf); } .svc-item.is-sun{ border-color:var(--sun); }
.svc-circle{ width:150px; --ratio:1/1; margin:0 auto 16px; border-radius:50%; --pos:50% 30%; }
.svc-item h3{ margin-bottom:8px; }
.svc-item p{ font-size:15.5px; text-align:left; }
@media (max-width:760px){ .svc-list{ grid-template-columns:1fr; } }

/* 交互配置セクション（home-service-sec / is-reverse移植） */
.zigzag{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-top:58px; position:relative; z-index:1; }
.zigzag .img-slot{ --ratio:4/3; }
.zigzag.is-reverse .z-img{ order:2; } .zigzag.is-reverse .z-txt{ order:1; }
.zigzag h3{ font-size:clamp(21px,2.8vw,26px); margin-bottom:12px; }
.zigzag .z-tag{ display:inline-block; background:var(--gold); color:#fff; font-family:var(--font-head); font-size:14.5px; border-radius:999px; padding:3px 16px; margin-bottom:10px; }
.zigzag.is-reverse .z-tag{ background:var(--leaf); }
@media (max-width:760px){ .zigzag{ grid-template-columns:1fr; gap:22px; } .zigzag.is-reverse .z-img{ order:0; } }

/* お悩み */
.worry-list{ list-style:none; display:grid; gap:14px; max-width:720px; margin:0 auto; position:relative; z-index:1; }
.worry-list li{
  background:#fff; border:1.5px solid var(--gold-soft); border-radius:16px;
  padding:17px 22px 17px 60px; position:relative; font-weight:700;
  font-size:clamp(15.5px,2vw,18px); color:var(--brown); box-shadow:var(--shadow);
}
.worry-list li::before{
  content:"✔"; position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; background:var(--sun); color:#fff;
  display:grid; place-items:center; font-size:15px;
}
.worry-close{ text-align:center; margin-top:36px; font-family:var(--font-head); font-size:clamp(19px,2.9vw,26px); color:var(--brown); position:relative; z-index:1; }
.worry-close b{ color:var(--sun); }
.spot-illust{ width:min(330px,78%); margin:0 auto 10px; position:relative; z-index:1; }
.illust{ width:100%; height:auto; display:block; }
.worry-visual{ width:min(200px,50%); margin:0 auto 24px; position:relative; z-index:1; }
.worry-visual .worry-emblem{ width:150px; height:150px; margin:0 auto; }
.worry-visual .worry-emblem svg{ width:100%; height:100%; }
.worry-visual > img{ position:static; width:100%; height:auto; object-fit:contain; }

/* 芯 */
.shin-hero{ display:grid; grid-template-columns:200px 1fr; gap:34px; align-items:center; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:38px 34px; position:relative; z-index:1; }
.shin-kanji{ font-family:"Kiwi Maru",serif; font-size:110px; line-height:1; color:var(--gold); text-align:center; }
.shin-kanji small{ display:block; font-size:15px; color:var(--brown); letter-spacing:.3em; margin-top:12px; }
.core-label{ display:inline-block; background:var(--gold); color:#fff; font-family:var(--font-head); font-size:14px; letter-spacing:.06em; padding:3px 14px; border-radius:999px; margin-bottom:4px; }
@media (max-width:760px){ .shin-hero{ grid-template-columns:1fr; text-align:center; } }
.sinpla-steps{ counter-reset:step; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-top:30px; position:relative; z-index:1; }
.sinpla-steps li{ counter-increment:step; background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:20px 18px 16px; font-size:15.5px; border-top:5px solid var(--gold-soft); }
.sinpla-steps li::before{ content:counter(step); display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--leaf); color:#fff; font-family:var(--font-head); margin-bottom:8px; }
.sinpla-steps b{ display:block; color:var(--brown); font-size:16.5px; }
.sinpla-note{ text-align:center; margin-top:26px; font-family:var(--font-head); font-size:clamp(18px,2.5vw,23px); color:var(--brown); position:relative; z-index:1; }

/* エビデンス・カード */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; position:relative; z-index:1; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:1; }
@media (max-width:760px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 28px; }
.ev-card h3{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ev-num{ flex:none; width:36px; height:36px; border-radius:12px; background:var(--gold); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-size:18px; }
.ev-src{ font-size:14.5px; color:#5E7681; margin-top:14px; }
.ev-point{ background:var(--gold-soft); border-radius:12px; padding:10px 16px; font-weight:700; color:var(--brown); margin-top:14px; }
.more-link{ text-align:center; margin-top:34px; position:relative; z-index:1; }

/* Before/After・声 */
.ba{ display:grid; grid-template-columns:1fr 70px 1fr; gap:16px; align-items:center; margin-top:8px; }
.ba .img-slot{ --ratio:3/4; display:grid; place-items:center; color:#46666F; text-align:center; font-size:15px; font-weight:700; }
.ba-arrow{ text-align:center; font-size:34px; color:var(--sun); }
.ba-caption{ text-align:center; font-weight:700; margin-top:12px; color:var(--brown); }
.ba-caption b{ color:var(--sun); font-size:1.2em; }
@media (max-width:640px){ .ba{ grid-template-columns:1fr; } .ba-arrow{ transform:rotate(90deg); } }
.voices{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 22px; position:relative; z-index:1; }
.voice{ background:#fff; border-radius:22px; box-shadow:var(--shadow); padding:24px 24px 18px; position:relative; border:1.5px solid var(--gold-soft); }
.voice::after{ content:""; position:absolute; bottom:-14px; left:38px; border:14px solid transparent; border-top-color:#fff; border-bottom:0; }
.voice p{ font-size:16px; }
.voice-meta{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.voice-face{ width:38px; height:38px; border-radius:50%; background:var(--gold-soft); display:grid; place-items:center; font-size:19px; }
.voice-meta cite{ font-style:normal; font-size:15px; color:#5E7681; font-weight:700; }
@media (max-width:760px){ .voices{ grid-template-columns:1fr; } }

/* 料金 */
.trial-card{ max-width:760px; margin:0 auto 34px; background:#fff; border:3px solid var(--sun); border-radius:var(--radius); box-shadow:0 12px 30px rgba(244,162,97,.18); padding:34px 30px; text-align:center; position:relative; z-index:1; }
.trial-card::before{ content:"まずはこれから！"; position:absolute; top:-17px; left:50%; transform:translateX(-50%); background:var(--sun); color:#fff; font-family:var(--font-head); font-size:15px; padding:6px 22px; border-radius:999px; white-space:nowrap; }
.price-plan{ font-family:var(--font-head); font-size:20px; color:var(--brown); }
.trial-price{ display:flex; align-items:baseline; justify-content:center; gap:14px; flex-wrap:wrap; margin:10px 0 4px; }
.trial-price .strike{ text-decoration:line-through; color:#6E888F; font-size:clamp(19px,2.5vw,25px); }
.trial-price .z{ font-family:var(--font-head); color:var(--sun); font-size:clamp(42px,6vw,58px); line-height:1; }
.trial-price .z small{ font-size:.4em; }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; position:relative; z-index:1; }
.price-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:34px 26px; text-align:center; border:2px solid transparent; display:flex; flex-direction:column; }
.price-card.recommend{ border-color:var(--sun); position:relative; }
.price-card.recommend::before{ content:"いちばん選ばれています"; position:absolute; top:-16px; left:50%; transform:translateX(-50%); background:var(--sun); color:#fff; font-family:var(--font-head); font-size:14.5px; padding:5px 18px; border-radius:999px; white-space:nowrap; }
.price-yen{ font-family:var(--font-head); font-size:clamp(29px,3.3vw,37px); color:var(--gold-deep); margin:12px 0 4px; }
.price-yen small{ font-size:15px; color:var(--ink); }
.single-plan{ max-width:760px; margin:26px auto 0; background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:18px 24px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }
.single-plan b{ font-family:var(--font-head); color:var(--brown); font-size:16.5px; }
.single-plan .yen{ font-family:var(--font-head); color:var(--gold-deep); font-size:21px; }
.price-foot{ text-align:center; margin-top:26px; font-size:15px; color:#52707A; position:relative; z-index:1; }
@media (max-width:760px){ .price-grid{ grid-template-columns:1fr; } }

/* 実績 */
.awards{ max-width:820px; margin:0 auto; list-style:none; display:grid; gap:12px; position:relative; z-index:1; }
.awards li{ background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:16px 20px 16px 56px; position:relative; font-size:15px; line-height:1.75; }
.awards li::before{ content:"🏅"; position:absolute; left:18px; top:16px; font-size:22px; }
.awards li b{ color:var(--brown); }
.awards li .place{ color:#5E7681; font-size:14.5px; }
.award-more{ display:none; }
.awards.is-open .award-more{ display:block; animation:fadein .4s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
#awards-toggle .arw{ display:inline-block; transition:transform .3s; }
#awards-toggle[aria-expanded="true"] .arw{ transform:rotate(180deg); }

/* 代表 */
.profile{ display:grid; grid-template-columns:290px 1fr; gap:38px; align-items:start; position:relative; z-index:1; }
.profile .img-slot{ --ratio:3/4; display:grid; place-items:center; color:#46666F; font-size:15px; font-weight:700; text-align:center; }
.yomi{ font-size:15px; color:#5E7681; margin-bottom:14px; letter-spacing:.12em; }
.cred-table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:15.5px; }
.cred-table th{ text-align:left; white-space:nowrap; color:var(--brown); padding:9px 18px 9px 0; vertical-align:top; border-bottom:1px solid var(--gold-soft); }
.cred-table td{ padding:9px 0; border-bottom:1px solid var(--gold-soft); }
.profile blockquote{ margin-top:20px; padding:22px 26px; background:#FAF3E7; border-radius:18px; font-size:16px; color:var(--brown); border-left:6px solid var(--sun); }
.profile blockquote::before{ content:"代表の想い"; display:block; font-family:var(--font-head); color:var(--sun); font-size:15px; margin-bottom:6px; }
@media (max-width:760px){ .profile{ grid-template-columns:1fr; } .profile .img-slot{ max-width:300px; margin:0 auto; } }

/* 流れ */
.flow{ list-style:none; display:grid; max-width:680px; margin:0 auto; position:relative; z-index:1; }
.flow li{ position:relative; padding:0 0 34px 76px; }
.flow li:last-child{ padding-bottom:0; }
.flow li::before{ content:attr(data-step); position:absolute; left:0; top:0; width:54px; height:54px; border-radius:50%; background:var(--leaf); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-size:22px; }
.flow li:not(:last-child)::after{ content:""; position:absolute; left:26px; top:58px; bottom:6px; border-left:3px dotted var(--gold-soft); }
.flow b{ display:block; font-family:var(--font-head); font-size:18px; color:var(--brown); margin-bottom:4px; }

/* アクセス */
.access-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:820px; margin:0 auto; position:relative; z-index:1; }
.access-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:0 0 24px; text-align:center; overflow:hidden; }
.access-photo{ --ratio:16/10; border-radius:0; box-shadow:none; border:none; margin-bottom:18px; }
.access-card .st{ display:inline-block; background:var(--gold-soft); color:var(--brown); border-radius:999px; padding:4px 18px; font-weight:700; font-size:15px; margin-bottom:10px; }
.access-note{ max-width:820px; margin:24px auto 0; background:#FAF3E7; border-radius:14px; padding:18px 24px; font-size:15px; position:relative; z-index:1; }
@media (max-width:760px){ .access-grid{ grid-template-columns:1fr; } }

/* お知らせ・コラム（サムネイル付きカード：VOICE型） */

/* お知らせカテゴリタブ */
.news-tabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.news-tab{ font-family:var(--font-body); font-size:15px; font-weight:600; padding:9px 22px;
  border-radius:30px; border:1.5px solid var(--gold-soft); background:#fff; color:var(--brown);
  cursor:pointer; transition:all .22s; }
.news-tab:hover{ border-color:var(--gold); color:var(--sun); }
.news-tab.on{ background:var(--brown); color:#fff; border-color:var(--brown); }
@media(max-width:560px){ .news-tab{ font-size:14.5px; padding:8px 16px; } .news-tabs{ gap:7px; } }

.news-box{ max-width:1000px; margin:0 auto; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:34px 34px 30px; position:relative; z-index:1; }
.news-box h2{ text-align:center; margin-bottom:6px; }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.news-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--gold-soft); transition:transform .2s, box-shadow .2s; }
.news-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.news-thumb{ --ratio:16/10; border-radius:0; box-shadow:none; border:none; }
.news-card-body{ padding:14px 16px 18px; }
.news-meta{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.news-meta time{ font-size:14.5px; color:#5E7681; font-weight:700; }
.news-meta .tag{ background:var(--leaf); color:#fff; border-radius:999px; font-size:13.5px; padding:2px 12px; font-weight:700; }
.news-card b{ font-family:var(--font-head); font-weight:500; font-size:15.5px; line-height:1.6; color:var(--brown); }
.news-card:hover b{ color:var(--sun); }
@media (max-width:760px){ .news-grid{ grid-template-columns:1fr 1fr; gap:16px; } .news-card b{ font-size:15px; } .news-card-body{ padding:12px 12px 14px; } .news-meta{ gap:6px; margin-bottom:6px; } .news-meta time{ font-size:13.5px; } .news-meta .tag{ font-size:12.5px; padding:2px 9px; } }
@media (max-width:420px){ .news-grid{ gap:12px; } .news-card b{ font-size:14.5px; line-height:1.5; } }

/* ブランドストーリー */
.story-hero{ text-align:center; margin-bottom:30px; position:relative; z-index:1; }
.story-logo{ width:200px; height:200px; margin:0 auto 20px; border-radius:0; background:none; padding:0; box-shadow:none; }
.story-tagline{ font-family:var(--font-head); font-size:clamp(17px,2.4vw,21px); color:var(--brown); }
.story-letters{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:720px; margin:0 auto 34px; position:relative; z-index:1; }
.story-letters .sl{ background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:16px 14px; text-align:center; }
.story-letters .sl b{ display:block; font-family:"Kiwi Maru",serif; font-size:34px; color:var(--gold); line-height:1; margin-bottom:6px; }
.story-letters .sl span{ font-size:14.5px; color:#52707A; }
.story-body{ max-width:800px; margin:0 auto; position:relative; z-index:1; }
.story-body p{ margin-bottom:14px; }
.story-sign{ text-align:right; font-family:var(--font-head); color:var(--brown); margin-top:20px; margin-bottom:0; }
@media (max-width:640px){ .story-letters{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .story-body p{ text-align:left; } }

/* FAQ */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:14px; position:relative; z-index:1; }
.faq details{ background:#fff; border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:19px 54px 19px 60px; font-weight:700; font-size:16.5px; color:var(--brown); position:relative; user-select:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q"; position:absolute; left:18px; top:16px; width:30px; height:30px; border-radius:50%; background:var(--gold); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-size:16px; }
.faq summary::after{ content:"＋"; position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--sun); font-size:22px; }
.faq details[open] summary::after{ content:"－"; }
.faq .a{ padding:0 24px 20px 60px; font-size:16px; }

/* お問い合わせフォーム（サイト内オリジナル・CF7置換前提） */
.contact-wrap{ display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:start; position:relative; z-index:1; }
.contact-form{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:32px 30px; display:grid; gap:18px; }
.contact-form label{ display:grid; gap:6px; font-family:var(--font-head); font-size:15px; color:var(--brown); }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form input, .contact-form select, .contact-form textarea{
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  border:1.5px solid var(--gold-soft); border-radius:12px; padding:12px 14px; background:#FAF4E9; width:100%;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color:var(--sun); box-shadow:0 0 0 3px rgba(244,162,97,.15); }
.req{ background:var(--sun); color:#fff; font-size:13px; border-radius:6px; padding:1px 8px; margin-left:6px; }
.cf-check{ flex-direction:row; display:flex; align-items:center; gap:10px; font-size:15.5px; }
.cf-check input{ width:20px; height:20px; accent-color:var(--sun); }
.cf-submit{ text-align:center; margin-top:6px; }
.cf-submit .btn{ width:100%; max-width:340px; }
.cf-note{ font-size:14.5px; color:#5E7681; margin-top:12px; }
.contact-side{ display:grid; gap:20px; }
.contact-line, .contact-flow{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 24px; text-align:center; }
.cs-lead{ font-family:var(--font-head); color:var(--brown); font-size:17px; margin-bottom:14px; }
.contact-line .btn{ width:100%; }
.cs-sub{ font-size:14.5px; color:#5E7681; margin-top:12px; }
.contact-flow{ text-align:left; }
.contact-flow ol{ padding-left:0; list-style:none; counter-reset:cf; display:grid; gap:12px; }
.contact-flow li{ counter-increment:cf; position:relative; padding-left:38px; font-size:15.5px; }
.contact-flow li::before{ content:counter(cf); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--leaf); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-size:15px; }
.contact-flow li b{ color:var(--brown); }
@media (max-width:760px){ .contact-wrap{ grid-template-columns:1fr; } .cf-row{ grid-template-columns:1fr; } }


/* ASPATH理念ブロック（地域とともに歩む型） */
.about-hsr{ display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:center; max-width:980px; margin:0 auto 72px; position:relative; z-index:1; }
.about-hsr-logo{ display:grid; place-items:center; }
.about-hsr-logo img{ width:100%; max-width:240px; height:auto;
  filter:drop-shadow(0 8px 24px rgba(38,70,83,.16)); }
.about-hsr-text .eyebrow{ color:var(--sun); letter-spacing:.16em; font-size:14px; margin-bottom:10px; }
.about-hsr-text h2{ font-family:var(--font-head); font-size:clamp(24px,3.4vw,32px); color:var(--brown);
  margin-bottom:20px; line-height:1.5; }
.about-hsr-text p{ font-size:15.5px; line-height:2.05; color:var(--ink); margin-bottom:16px; }
.about-hsr-more{ margin-top:22px; }
@media(max-width:760px){
  .about-hsr{ grid-template-columns:1fr; gap:28px; text-align:center; margin-bottom:56px; }
  .about-hsr-logo img{ max-width:180px; }
  .about-hsr-text .eyebrow{ text-align:center; }
  .about-hsr-more{ text-align:center; }
}


/* 重要なお知らせ帯（nsleep型：左ラベル＋右に日付・タイトル・2導線） */
.important-news{ padding:36px 20px 8px; }
.imp-news-inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:stretch;
  max-width:var(--maxw); margin:0 auto; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 22px rgba(38,70,83,.12); border:1px solid var(--gold-soft); }
.imp-label{ background:linear-gradient(135deg,var(--brown),#2F5560); color:#fff;
  display:flex; align-items:center; gap:10px; padding:22px 30px; font-weight:700; font-size:15px; flex-shrink:0; }
.imp-ico{ width:22px; height:22px; flex-shrink:0; }
.imp-body{ padding:18px 28px; display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; }
.imp-body time{ font-size:14.5px; color:#5E7681; font-weight:600; }
.imp-title{ font-size:15.5px; color:var(--brown); font-weight:600; line-height:1.5; margin:0; }
.imp-title strong{ color:var(--sun); font-size:1.15em; }
.imp-actions{ display:flex; flex-direction:column; gap:8px; justify-content:center; padding:16px 24px 16px 0; flex-shrink:0; }
.imp-btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:14.5px; font-weight:700;
  padding:9px 18px; border-radius:24px; text-decoration:none; transition:all .2s; }
.imp-btn .arw{ transition:transform .2s; }
.imp-btn:hover .arw{ transform:translateX(3px); }
.imp-btn-detail{ background:var(--paper); color:var(--brown); border:1px solid var(--gold-soft); }
.imp-btn-detail:hover{ background:#fff; border-color:var(--gold); }
.imp-btn-apply{ background:var(--sun); color:#fff; }
.imp-btn-apply:hover{ background:#E08A3C; box-shadow:0 4px 12px rgba(244,162,97,.4); }
@media(max-width:760px){
  .imp-news-inner{ grid-template-columns:1fr; }
  .imp-label{ padding:14px 20px; justify-content:center; }
  .imp-body{ padding:18px 22px 8px; text-align:center; align-items:center; }
  .imp-actions{ flex-direction:row; padding:0 22px 20px; justify-content:center; flex-wrap:wrap; }
}

/* ② 2大サービス写真バナー */
.service-banners{ padding:60px 20px; }
.sb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:var(--maxw); margin:0 auto; }
.sb-card{ background:#fff; border-radius:20px; overflow:hidden; text-decoration:none; box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column; }
.sb-card:hover{ transform:translateY(-5px); box-shadow:0 16px 36px rgba(38,70,83,.18); }
.sb-img{ aspect-ratio:16/10; overflow:hidden; }
.sb-img img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,center); transition:transform .5s; }
.sb-card:hover .sb-img img{ transform:scale(1.05); }
.sb-body{ padding:26px 28px 30px; }
.sb-en{ font-size:13px; letter-spacing:.16em; color:var(--sun); font-weight:700; }
.sb-body h3{ font-family:var(--font-head); font-size:22px; color:var(--brown); margin:6px 0 12px; }
.sb-body p{ font-size:15px; color:#52707A; line-height:1.85; margin-bottom:16px; }
.sb-link{ font-size:15px; color:var(--sun); font-weight:700; }
@media(max-width:720px){ .sb-grid{ grid-template-columns:1fr; gap:20px; } .service-banners{ padding:44px 16px; } }

/* ⑥ 三本柱 */
.pillar-list{ display:grid; gap:40px; max-width:920px; margin:0 auto; position:relative; z-index:1; }
.pillar{ display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:center; position:relative; }
.pillar.is-reverse{ grid-template-columns:1fr 300px; }
.pillar.is-reverse .pillar-img{ order:2; }
.pillar.is-reverse .pillar-txt{ order:1; }
.pillar-num{ position:absolute; top:-18px; left:-8px; z-index:3; }
.pillar-num span{ font-family:"Kiwi Maru",serif; font-size:40px; color:var(--gold); opacity:.35; font-weight:700; }
.pillar-img{ aspect-ratio:4/3; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
.pillar-img img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,center); }
.pillar-txt h3{ font-family:var(--font-head); font-size:clamp(19px,2.6vw,23px); color:var(--brown); margin-bottom:12px; }
.pillar-txt p{ font-size:15px; line-height:1.95; color:var(--ink); }
@media(max-width:720px){ .pillar, .pillar.is-reverse{ grid-template-columns:1fr; gap:18px; } .pillar.is-reverse .pillar-img{ order:0; } .pillar.is-reverse .pillar-txt{ order:1; } .pillar-num{ position:static; margin-bottom:-8px; } .pillar-num span{ font-size:32px; } }


/* メッセージ帯（採用情報型：全幅背景写真＋淡いオーバーレイ） */
.message-band{ position:relative; padding:88px 20px 96px; overflow:hidden; min-height:440px; display:flex; align-items:center; }
.message-band-bg{ position:absolute; inset:0; z-index:0; }
/* object-positionを右上に固定＝山口様の顔が常に見える。どの画面幅でも顔は切れない */
.message-band-bg img{ width:100%; height:100%; object-fit:cover; object-position:78% 22%; }
.message-band-overlay{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(251,247,240,.97) 0%, rgba(251,247,240,.92) 38%, rgba(251,247,240,.55) 62%, rgba(251,247,240,.12) 100%); }
.message-band .wrap{ position:relative; z-index:2; width:100%; }
.message-band-inner{ max-width:600px; }
.mb-en{ font-size:14px; letter-spacing:.18em; color:var(--sun); font-weight:700; margin-bottom:12px; }
.message-band-inner h2{ font-family:var(--font-head); font-size:clamp(24px,3.5vw,34px); color:var(--brown); line-height:1.55; margin-bottom:22px; }
.message-band-inner p{ font-size:15.5px; line-height:2; color:var(--ink); margin-bottom:16px; }
@media(max-width:760px){
  .message-band{ min-height:0; padding:0 0 56px; flex-direction:column; }
  /* スマホ：写真を上に全体表示（切らない）→ その下にテキスト */
  .message-band-bg{ position:relative; height:auto; aspect-ratio:3/2; }
  .message-band-bg img{ object-position:center 30%; }
  .message-band-overlay{ display:none; }
  .message-band .wrap{ padding:0 18px; }
  .message-band-inner{ max-width:100%; margin-top:28px; }
}

/* SNSセクション（ASPATHデザイン：カードグリッド） */
.sns-section{ position:relative; padding:74px 20px 82px; overflow:hidden;
  background:linear-gradient(152deg, #1E3A44 0%, #264653 50%, #3F6A76 100%); }
.sns-section::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 90% at 50% -12%, rgba(255,244,214,.16), transparent 62%); }
.sns-section .sns-overlay{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.18) 100%); }
.sns-section .wrap{ position:relative; z-index:1; }
.sns-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:880px; margin:0 auto; }
.sns-tile{ position:relative; background:#fff; border:1px solid rgba(30,45,52,.06); border-radius:20px;
  padding:32px 18px 26px; text-decoration:none; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:9px; transition:transform .28s ease, box-shadow .28s ease;
  box-shadow:0 10px 26px rgba(30,18,6,.18), 0 2px 6px rgba(30,18,6,.10); }
.sns-tile:hover{ transform:translateY(-7px); box-shadow:0 22px 44px rgba(30,18,6,.30), 0 4px 10px rgba(30,18,6,.14); }
.sns-tile-ico{ width:62px; height:62px; border-radius:18px; display:grid; place-items:center; color:#fff;
  margin-bottom:4px; box-shadow:0 6px 15px rgba(0,0,0,.20); }
.sns-tile-ico svg{ width:32px; height:32px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.16)); }
.sns-instagram{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.sns-facebook{ background:#1877F2; }
.sns-youtube{ background:#FF0000; }
.sns-line{ background:#06C755; }
.sns-tile-name{ font-family:var(--font-head); font-size:16.5px; color:var(--brown); font-weight:700; letter-spacing:.02em; }
.sns-tile-desc{ font-size:14px; color:#5E7681; line-height:1.55; }
.sns-tile-cta{ font-size:14px; color:var(--sun); font-weight:700; margin-top:8px; letter-spacing:.02em; transition:color .2s; }
.sns-tile:hover .sns-tile-cta{ color:#DD8236; }
@media(max-width:720px){ .sns-grid{ grid-template-columns:repeat(2,1fr); gap:16px; max-width:420px; } }
@media(max-width:360px){ .sns-grid{ grid-template-columns:1fr; } }

.site-footer{ background:var(--brown); color:#fff; margin-top:0; }
/* ── フッターのオンラインサロン用バナー ──
   外部サイト（mosh.jp）へのご案内。文章のすぐ下に置く。 */
.footer-banner{ display:block; margin-top:20px; max-width:360px; border-radius:10px;
  overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .25s ease, box-shadow .25s ease; }
.footer-banner img{ width:100%; height:auto; display:block; }
.footer-banner:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.32); }
.footer-banner:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; }
@media (max-width:760px){ .footer-banner{ max-width:100%; margin-left:auto; margin-right:auto; } }
.footer-in{ max-width:var(--maxw); margin:0 auto; padding:56px 20px 36px; display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:36px 48px; }
.footer-logo{ width:120px; height:120px; margin-bottom:10px; }
.footer-nav-col h5{ font-size:14px; font-weight:700; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; border-bottom:1px solid rgba(176,138,69,.3); padding-bottom:8px; }
.footer-nav-col ul{ list-style:none; display:grid; gap:9px; }
.footer-nav-col ul a{ color:rgba(220,205,176,.78); font-size:14.5px; text-decoration:none; display:flex; align-items:center; gap:5px; transition:color .2s; }
.footer-nav-col ul a::before{ content:"\203A"; color:var(--gold); font-size:15px; line-height:1; }
.footer-nav-col ul a:hover{ color:#fff; }
.footer-in h4{ color:#fff; }
.sub-footer{ background:rgba(0,0,0,.25); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:16px 28px; font-size:14px; color:rgba(220,205,176,.55); }
.sub-footer a{ color:rgba(220,205,176,.6); text-decoration:none; transition:color .2s; }
.sub-footer a:hover{ color:#fff; }
.sub-footer-links{ display:flex; gap:18px; flex-wrap:wrap; }
@media(max-width:760px){ .footer-in{ grid-template-columns:1fr 1fr; gap:24px; } }
@media(max-width:560px){ .footer-in{ grid-template-columns:1fr; }  }
.header-topbar{ background:var(--brown); color:#fff; font-size:14px; display:flex; justify-content:flex-end; align-items:center; gap:0; overflow:hidden; flex-wrap:wrap; }
.header-topbar a{ display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.88); text-decoration:none; padding:7px 16px; border-left:1px solid rgba(255,255,255,.15); transition:background .2s; white-space:nowrap; font-size:14px; }
.header-topbar a:first-child{ border-left:none; }
.header-topbar a:hover{ background:rgba(255,255,255,.12); color:#fff; }
.header-topbar .tb-ico{ width:14px; height:14px; flex-shrink:0; fill:currentColor; }
.header-topbar .lang-btn{ background:rgba(255,255,255,.18); border-radius:3px; font-weight:700; }
@media(max-width:760px){ .header-topbar{ display:none; } }

/* ===== ローディング（ブランドスプラッシュ） ===== */
#aspath-loader{ position:fixed; inset:0; z-index:99999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:radial-gradient(135% 105% at 50% 26%, #FBF4E8 0%, #F4E9D8 46%, #E7D9C1 100%);
  opacity:1; will-change:opacity,transform,filter;
  transition:opacity 2.6s ease, visibility 2.6s ease, transform 2.6s cubic-bezier(.33,0,.2,1), filter 2.6s ease;
  animation:ldrAutohide 1.4s ease 12s forwards; /* JS無効時の保険 */ }
#aspath-loader.is-hidden{ opacity:0; visibility:hidden; transform:translateY(-26px) scale(1.045); filter:blur(9px); pointer-events:none; }
html.ldr-seen #aspath-loader{ display:none !important; }
.ldr-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 24px; }
.ldr-logo{ width:clamp(78px,18vw,100px); height:auto; opacity:0; transform:translateY(10px) scale(.9);
  animation:ldrLogo 1.5s cubic-bezier(.2,.7,.2,1) .3s forwards; filter:drop-shadow(0 12px 28px rgba(38,70,83,.18)); }
.ldr-copy{ font-family:var(--font-head); color:var(--brown); text-align:center; line-height:1.55; }
.ldr-main{ position:relative; display:block; height:calc(clamp(20px,4.8vw,29px)*1.6); font-size:clamp(20px,4.8vw,29px); letter-spacing:.02em;
  opacity:0; transform:translateY(12px); animation:ldrUp 1.2s ease .9s forwards; }
.ldr-main .accent{ color:var(--sun); }
.ldr-phrase{ position:absolute; left:50%; top:0; width:max-content; max-width:88vw; transform:translate(-50%,14px); opacity:0;
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); white-space:nowrap; }
.ldr-phrase.is-active{ opacity:1; transform:translate(-50%,0); }
.ldr-phrase.is-leaving{ opacity:0; transform:translate(-50%,-12px); }
.ldr-sub{ display:block; margin-top:13px; font-family:var(--font-body); font-size:clamp(11px,2.9vw,13.5px); color:var(--gold-deep); letter-spacing:.06em; font-weight:500;
  opacity:0; transform:translateY(8px); animation:ldrUp 1.2s ease 1.5s forwards; }
.ldr-path{ position:relative; width:min(230px,60vw); height:3px; border-radius:3px; margin-top:8px; overflow:visible; background:var(--gold-soft); opacity:0; animation:ldrFade .7s ease 1.9s forwards; }
.ldr-path i{ display:block; height:100%; width:42%; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--sun)); transform:translateX(-120%); animation:ldrRun 2s ease-in-out 1.25s infinite; }
/* 道を一歩ずつ歩む光の点 */
.ldr-path b{ position:absolute; top:50%; left:0; width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--sun) 55%, rgba(244,162,97,0) 100%);
  box-shadow:0 0 10px rgba(244,162,97,.75); animation:ldrWalk 2s ease-in-out 1.25s infinite; }
@keyframes ldrWalk{ 0%{ transform:translateX(-6px) scale(.8); opacity:0;} 12%{ opacity:1;} 88%{ opacity:1;} 100%{ transform:translateX(min(230px,60vw)) scale(1.05); opacity:0;} }
/* ロゴから広がる陽だまりの波紋 */
.ldr-rings{ position:absolute; top:calc(clamp(78px,18vw,100px)/2 - 2px); left:50%; width:4px; height:4px; z-index:-1; pointer-events:none; }
.ldr-rings i{ position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%;
  border:1.5px solid rgba(176,138,69,.55); opacity:0; animation:ldrRing 3.6s ease-out infinite; }
.ldr-rings i:nth-child(2){ animation-delay:1.2s; border-color:rgba(244,162,97,.45); }
.ldr-rings i:nth-child(3){ animation-delay:2.4s; border-color:rgba(176,138,69,.35); }
@keyframes ldrRing{ 0%{ opacity:0; transform:scale(.35);} 12%{ opacity:.75;} 100%{ opacity:0; transform:scale(2.6);} }
/* ロゴを包む、呼吸する温かな光 */
.ldr-glow{ position:absolute; top:-46px; left:50%; width:300px; height:300px; transform:translateX(-50%); z-index:-1;
  background:radial-gradient(circle, rgba(244,162,97,.30) 0%, rgba(244,162,97,.10) 42%, rgba(244,162,97,0) 70%);
  border-radius:50%; pointer-events:none; opacity:0; animation:ldrGlowIn 1.4s ease .2s forwards, ldrGlow 3.8s ease-in-out .2s infinite; }
/* ゆっくり昇る光の粒 */
.ldr-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ldr-particles span{ position:absolute; bottom:-14px; border-radius:50%;
  background:radial-gradient(circle, rgba(244,162,97,.55) 0%, rgba(244,162,97,0) 70%); animation:ldrFloat linear infinite; }
@keyframes ldrGlowIn{ to{ opacity:1; } }
@keyframes ldrGlow{ 0%,100%{ transform:translateX(-50%) scale(.92); } 50%{ transform:translateX(-50%) scale(1.08); } }
@keyframes ldrFloat{ 0%{ transform:translateY(0) scale(.5); opacity:0; } 12%{ opacity:.85; } 85%{ opacity:.55; } 100%{ transform:translateY(-72vh) scale(1.15); opacity:0; } }
@keyframes ldrLogo{ to{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes ldrUp{ to{ opacity:1; transform:translateY(0);} }
@keyframes ldrFade{ to{ opacity:1;} }
@keyframes ldrRun{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(320%);} }
@keyframes ldrAutohide{ to{ opacity:0; visibility:hidden; pointer-events:none;} }
html.is-loading{ overflow:hidden; }
/* ローダーは OS のアニメーション削減設定に関わらずフル演出で表示（クライアント要望） */

/* ===== コラム記事用 ===== */
.column-hero{ padding:96px 0 44px; background:linear-gradient(180deg,var(--gold-soft) 0%,var(--paper) 100%); border-bottom:1px solid rgba(176,138,69,.18); }
.column-hero .wrap{ text-align:center; }
.column-crumb{ font-size:14px; color:var(--gold-deep); letter-spacing:.06em; margin-bottom:14px; }
.column-crumb a{ color:var(--gold-deep); text-decoration:none; }
.column-crumb a:hover{ text-decoration:underline; }
.column-hero h1{ font-family:var(--font-head); color:var(--brown); font-size:clamp(28px,4.6vw,42px); line-height:1.5; letter-spacing:.03em; margin-bottom:10px; }
.column-hero .lead{ font-size:clamp(14px,2.3vw,16.5px); color:var(--gold-deep); }
.column-body{ padding:56px 0 88px; }
.column-body .wrap{ max-width:1000px; }
.column-body h2{ margin:56px 0 24px; padding-left:16px; border-left:6px solid var(--sun); font-size:clamp(22px,3.1vw,29px); font-weight:700; line-height:1.45; letter-spacing:.02em; word-break:auto-phrase; line-break:strict; }
.column-body h2:first-child{ margin-top:0; }
.column-body h3{ margin:36px 0 14px; color:var(--gold-deep); font-size:clamp(17px,2.3vw,21px); font-weight:700; line-height:1.5; letter-spacing:.02em; word-break:auto-phrase; line-break:strict; }
.column-body p{ margin-bottom:1.4em; font-size:16.5px; line-height:2.05;
  /* 日本語を「意味のまとまり（文節）」で折り返す。
     ※overflow-wrap:anywhere は文節判定を壊すため使わない */
  word-break:auto-phrase; line-break:strict; overflow-wrap:normal;
  margin-left:auto; margin-right:auto; }
.column-body p + p{ margin-top:-.3em; }
.column-body h2, .column-body h3{ margin-left:auto; margin-right:auto; }
.column-body strong{ color:var(--sun); font-weight:600; }
.column-body ul{ list-style:none; margin:0 auto 1.6em; padding:0; }
.column-body ul{ display:grid; gap:12px; }
.column-body ul li{ position:relative; padding:16px 20px 16px 46px; line-height:1.85;
  background:#fff; border:1px solid var(--gold-soft); border-left:5px solid var(--gold);
  border-radius:14px; box-shadow:0 4px 14px rgba(38,70,83,.05);
  word-break:auto-phrase; line-break:strict; }
.column-body ul li::before{ content:""; position:absolute; left:20px; top:26px; width:10px; height:10px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 4px rgba(244,162,97,.14); }
.column-figure{ margin:32px 0 40px; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.column-figure img,.column-figure svg{ display:block; width:100%; height:auto; }
.column-figure figcaption{ padding:14px 22px; background:#FFFAEE; font-size:15px; color:var(--gold-deep); text-align:center; letter-spacing:.04em; }
.column-callout{ margin:36px auto; word-break:auto-phrase; line-break:strict; padding:26px 28px; background:linear-gradient(135deg,#FAF3E7 0%,#FAF3E7 100%); border-radius:16px; border:2px solid #E9BE84; box-shadow:0 8px 22px rgba(196,141,74,.14); font-family:var(--font-head); color:var(--brown); font-size:17px; line-height:1.8; }
/* ── 初回体験の流れ：各ステップの下に下向き矢印を出す ──
   番号だけだと順序が伝わりにくいため、矢印で「次へ進む」ことを示す。
   PC・スマホとも同じ見え方になる。 */
.column-body ul.flow-steps{ list-style:none; margin:30px 0 34px; padding:0; }
.column-body ul.flow-steps > li{
  position:relative; margin:0 0 42px; padding:22px 26px 22px 68px;
  background:#fff; border:1.5px solid var(--gold-soft); border-radius:16px;
  box-shadow:0 6px 18px rgba(38,70,83,.07);
  font-size:16.5px; line-height:1.9;
}
.column-body ul.flow-steps > li:last-child{ margin-bottom:0; }
.column-body ul.flow-steps{ counter-reset:flowstep; }
.column-body ul.flow-steps > li::before{
  counter-increment:flowstep; content:counter(flowstep);
  position:absolute; left:20px; top:20px;
  width:34px; height:34px; border-radius:50%;
  background:var(--leaf); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-head); font-size:17px;
}
/* 下向き矢印（最後の項目には出さない） */
.column-body ul.flow-steps > li:not(:last-child)::after{
  content:""; position:absolute; left:50%; bottom:-32px;
  transform:translateX(-50%);
  width:28px; height:26px; background:var(--sun); opacity:.85;
  clip-path:polygon(38% 0, 62% 0, 62% 50%, 100% 50%, 50% 100%, 0 50%, 38% 50%);
}
.column-body ul.flow-steps > li strong{ color:var(--brown); }
@media (max-width:600px){
  .column-body ul.flow-steps > li{ padding:18px 16px 18px 58px; font-size:15.5px; margin-bottom:36px; }
  .column-body ul.flow-steps > li::before{ left:14px; top:16px; width:30px; height:30px; font-size:15px; }
  .column-body ul.flow-steps > li:not(:last-child)::after{ bottom:-28px; }
}
/* 記事の大見出し：「｜」の後で改行したときの行間を整える */
.column-hero h1 .title-br{ display:inline; }
.column-hero h1{ line-height:1.5; }
@media (max-width:600px){
  .column-hero h1{ line-height:1.45; }
}
/* 記事末尾CTA：公式LINEボタン1本に統一したときの見え方 */
.column-cta .cta-row--single{ justify-content:center; }
.column-cta .btn-line--wide{
  min-width:min(340px, 100%); padding:16px 34px; font-size:17px;
}
.column-cta .cta-note{
  margin:16px auto 0; max-width:34em;
  color:rgba(255,255,255,.82); font-size:14.5px; line-height:1.8;
}
@media (max-width:600px){
  .column-cta .btn-line--wide{ width:100%; min-width:0; font-size:16px; padding:15px 20px; }
  .column-cta .cta-note{ font-size:13.5px; }
}
.column-quote{ margin:32px 0; padding:20px 24px; background:var(--paper); border-radius:14px; border:1px solid rgba(176,138,69,.24); font-size:15.5px; color:var(--gold-deep); line-height:1.75; }
.column-quote .src{ display:block; margin-top:6px; font-size:14px; color:var(--brown); opacity:.75; }
.column-draft-notice{ margin:0 0 40px; padding:16px 20px; background:#FBF4E8; border:1px dashed var(--sun); border-radius:12px; font-size:15px; color:var(--brown); line-height:1.7; }
.column-cta{ margin:52px auto 0; padding:30px 26px 32px; background:linear-gradient(135deg,var(--brown) 0%,var(--gold-deep) 100%); color:#fff; border-radius:var(--radius); text-align:center; }
.column-cta h3{ color:#fff; font-family:var(--font-head); font-weight:700; font-size:clamp(19px,2.6vw,23px); line-height:1.5; letter-spacing:.02em; margin:0 auto 10px; max-width:none; }
.column-cta p{ color:rgba(255,255,255,.88); font-family:var(--font-body); font-size:15.5px; line-height:1.85; margin:0 auto 20px; max-width:32em; word-break:auto-phrase; line-break:strict; }
.column-cta .cta-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; }
.column-cta .btn{ padding:13px 26px; border-radius:999px; font-family:var(--font-head); font-weight:600; font-size:15.5px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
.column-cta .btn .line-ico{ width:19px; height:19px; }
.column-cta .btn-primary{ background:var(--sun); color:#fff; }
.column-cta .btn-primary:hover{ background:#E08A3C; }
.column-cta .btn-line{ background:var(--line-green); color:#fff; }
.column-cta .btn-line:hover{ background:var(--line-dark); }
/* 記事下の移動リンク。前の記事は左、次の記事は右。片方だけの場合も横幅は半分のまま */
.column-nav{ display:flex; flex-wrap:wrap; gap:14px; margin-top:44px; }
.column-nav a{ flex:0 1 calc(50% - 7px); min-width:0; }
.column-nav .cn-next{ text-align:right; margin-left:auto; }
@media (max-width:640px){
  .column-nav a{ flex:1 1 100%; }
  .column-nav .cn-next{ text-align:left; margin-left:0; }
}
.column-nav a{ display:block; padding:20px 22px; background:var(--card); border-radius:14px; box-shadow:var(--shadow); text-decoration:none; color:var(--brown); font-family:var(--font-head); transition:transform .25s, box-shadow .25s; }
.column-nav a:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(38,70,83,.16); }
.column-nav .label{ display:block; font-size:14.5px; font-weight:700; color:var(--gold-deep); letter-spacing:.06em; margin-bottom:6px; }
.column-nav .title{ font-size:16px; }
.imp-label{ display:inline-block; background:var(--sun); color:#fff; font-family:var(--font-head); font-weight:700; font-size:13.5px; letter-spacing:.08em; padding:3px 14px; border-radius:999px; }
/* --- 見出しの通し番号バッジ --- */
.column-body h3 .h3-num,
.column-body h3 .h3-step{ display:inline-block; vertical-align:.12em; margin-right:12px; font-family:var(--font-head); font-weight:700; letter-spacing:.06em; }
.column-body h3 .h3-num{ min-width:2.4em; padding:2px 10px; border-radius:999px; background:var(--sun); color:#fff; font-size:.78em; text-align:center; }
.column-body h3 .h3-step{ padding:2px 12px; border-radius:999px; background:var(--gold-soft); color:var(--brown); font-size:.74em; }
@media (max-width:760px){
  .column-body h3 .h3-num, .column-body h3 .h3-step{ display:block; margin:0 0 6px; width:max-content; }
}

/* ============================================================
   コラム記事テンプレート：WordPressブロックエディタ用の対応
   （山口様がWPの「投稿」で書いた記事も、このデザインで表示されます）
============================================================ */
.column-eyecatch{ margin:0 0 34px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--card); }
.column-eyecatch img{ display:block; width:100%; height:auto; }
/* 画像ブロック → .column-figure と同じ見た目に */
.column-body figure.wp-block-image{ margin:32px 0 40px; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.column-body figure.wp-block-image img{ display:block; width:100%; height:auto; }
.column-body figure.wp-block-image figcaption{ padding:14px 22px; background:#FFFAEE; font-size:15px; color:var(--gold-deep); text-align:center; letter-spacing:.04em; margin:0; }
/* 引用ブロック → .column-callout と同じ見た目に */
.column-body .wp-block-quote{ margin:36px auto; padding:26px 28px; background:#FAF3E7; border-radius:16px; border:2px solid #E9BE84; box-shadow:0 8px 22px rgba(196,141,74,.14); font-family:var(--font-head); color:var(--brown); font-size:17px; line-height:1.8; word-break:auto-phrase; line-break:strict; }
.column-body .wp-block-quote p{ margin:0 0 .6em; font-size:inherit; line-height:inherit; max-width:none; }
.column-body .wp-block-quote cite{ display:block; font-size:14px; color:var(--gold-deep); font-style:normal; }
/* リストブロック */
.column-body ul.wp-block-list, .column-body ol.wp-block-list{ margin:0 auto 1.6em; }
.column-body ol.wp-block-list{ padding-left:1.4em; }
.column-body ol.wp-block-list li{ padding:6px 0; line-height:1.85; word-break:auto-phrase; line-break:strict; }
/* 区切り・埋め込み・表 */
.column-body .wp-block-separator{ margin:44px auto; border:0; border-top:2px dotted var(--gold-soft); }
.column-body .wp-block-embed, .column-body .wp-block-table{ margin:32px auto; }
.column-body .wp-block-table table{ width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.column-body .wp-block-table th, .column-body .wp-block-table td{ padding:12px 14px; border-bottom:1px solid var(--gold-soft); text-align:left; font-size:15.5px; }
.column-body .wp-block-table th{ background:var(--gold-soft); color:var(--brown); }
.column-body .wp-block-buttons{ margin:32px auto; }

@media (max-width:600px){
  .column-hero{ padding:80px 0 36px; }
  .column-body{ padding:40px 0 64px; }
  .column-body h2{ margin:44px 0 20px; }
  .column-nav{ grid-template-columns:1fr; }
}


/* ===== モバイル安全策：横スクロール/はみ出し防止 ===== */
html,body{ overflow-x:clip; max-width:100%; }
img,video,iframe{ max-width:100%; height:auto; }
/* ※ここで word-break:normal に戻すと文節折り返しが無効になるため、auto-phrase を維持する。
   overflow-wrap:break-word は「希望」のような語の途中でも切ってしまうため使わない。 */
body{ overflow-wrap:normal; word-break:auto-phrase; line-break:strict; }
.br-pc{ display:inline; }
@media(max-width:600px){
  .cred-table{ font-size:14.5px; }
  .cred-table th{ padding:8px 10px 8px 0; }
  .br-pc{ display:none; }   /* PC用改行はスマホでは改行しない */
}

/* ===== スマホUI最適化（余白・サイズをモバイル基準へ｜iPhone SE想定） ===== */
@media(max-width:600px){
  .section{ padding:50px 0 !important; }
  .wrap{ padding:0 16px; }
  .sec-head{ margin-bottom:20px; }
  .service-banners{ padding:38px 14px !important; }
  .message-band{ padding:46px 16px 50px !important; min-height:0 !important; }
  .sns-section{ padding:44px 14px 50px !important; }
  .about-hsr{ gap:20px !important; }
  .pillar-list{ gap:26px !important; }
  .worry-list{ gap:12px; }
  .worry-close{ margin-top:26px; }
  /* 下層ページ */
  .page-head{ padding-top:74px !important; padding-bottom:6px !important; }
  .page-main{ padding-bottom:36px !important; }
  .page-main h2:not(:first-child){ margin-top:32px !important; }
  .side-toc{ margin-bottom:22px !important; }
  /* ヒーロー */
  .hero{ min-height:74vh !important; padding:60px 6% 66px !important; }
  /* 見出し・本文を少し詰める */
  h2{ line-height:1.4; }
  .lede{ font-size:15px; }
  /* コラム記事の図・引用の余白圧縮 */
  .column-callout{ margin:24px 0 !important; padding:18px 18px !important; font-size:15px !important; }
  .column-quote{ margin:18px 0 !important; }
  .trial-detail, .trial-card{ padding:20px 16px !important; }
}

/* ===== ヘッダー：スクロールで縮小＋タブレット収まり（TOPと統一） ===== */
.site-header{ will-change:transform; transition:background .55s ease, box-shadow .55s ease, transform 1.5s cubic-bezier(.34,1.42,.5,1); }
.site-header .header-in{ transition:padding .3s ease; }
.site-header .brand-logo{ transition:height .3s ease; }
.site-header.scrolled{ position:fixed; top:0; left:0; right:0; transform:translateY(0); background:rgba(251,247,240,.97); backdrop-filter:blur(8px); box-shadow:0 2px 14px rgba(38,70,83,.10); }
.site-header.scrolled.prehide{ transform:translateY(-105%); transition:none; }
@media (max-width:1180px) and (min-width:761px){
  .header-in{ flex-wrap:nowrap; gap:clamp(6px,1.1vw,16px); padding-top:10px; padding-bottom:10px; padding-left:clamp(10px,1.9vw,40px); padding-right:clamp(10px,1.9vw,40px); }
  .brand{ margin-right:clamp(4px,0.9vw,14px); }
  .brand-logo{ height:48px; }
  .header-right{ gap:clamp(5px,0.8vw,14px); flex-wrap:nowrap; min-width:0; }
  .brand,.gnav,.gnav a,.header-cta,.header-sns{ flex-shrink:0; }
  .gnav{ gap:clamp(2px,0.55vw,12px); flex-wrap:nowrap; }
  .gnav a{ font-size:clamp(12px,1.28vw,17px); padding:6px 1px; white-space:nowrap; }
  .header-cta{ gap:clamp(3px,0.5vw,8px); }
  .hbtn{ font-size:clamp(11px,1.15vw,14px); padding:8px clamp(7px,0.9vw,14px); }
  .header-sns{ gap:5px; }
  .header-sns a{ width:clamp(28px,2.9vw,36px); height:clamp(28px,2.9vw,36px); }
  .header-sns svg{ width:16px; height:16px; }
}
/* 固定ヘッダー分の余白（absoluteヘッダーと本文が重ならないように） */
main{ padding-top:76px; }
@media(max-width:760px){ main{ padding-top:84px; } }
/* ===== ヘッダーサイズをindex（TOP）と厳密一致（保険・最優先） ===== */
@media (min-width:1181px){
  .site-header .brand-logo{ height:48px !important; }
  .site-header .gnav a{ font-size:24px !important; }
  .site-header .header-in{ padding:12px clamp(20px,4vw,56px) !important; }
}
@media (max-width:1180px) and (min-width:761px){
  .site-header .brand-logo{ height:48px !important; }
  .site-header .gnav a{ font-size:clamp(12px,1.28vw,17px) !important; }
}

/* コラム：症状リスト・出典・署名・サムネイル */
.column-symptoms{ list-style:none; display:grid; gap:12px; margin:14px 0 22px; padding:0; }
.column-symptoms li{ background:var(--card); border-left:4px solid var(--sun); border-radius:10px; padding:14px 18px; line-height:1.85; box-shadow:0 4px 12px rgba(38,70,83,.06); }
.column-symptoms li strong{ color:#264653; }
.column-source{ font-size:14px; color:#55717B; text-align:right; margin:6px 0 26px; }
.column-source a{ color:#3F6A76; text-decoration:underline; text-decoration-color:#F4A261; text-underline-offset:3px; }
.column-byline{ color:#55717B; font-size:14px; letter-spacing:.04em; margin-top:10px; }
.column-thumb{ margin-top:8px; }

/* ===== ヘッダー統一（indexに合わせる：フォント/サイズ/レイアウト） ===== */
.brand{ margin-right:clamp(24px,3.5vw,52px) !important; }
.header-right{ flex:1 !important; min-width:0 !important; }
.gnav{ gap:4px 58px !important; flex:1 !important; justify-content:center !important; padding-left:clamp(20px,5vw,90px) !important; }
.gnav a{ font-size:24px !important; }
.header-cta{ margin-left:auto !important; margin-right:clamp(14px,2.6vw,40px) !important; padding:0 clamp(10px,2vw,26px) !important; }
.hbtn-line{ font-size:23px !important; padding:20px 42px !important; box-shadow:0 7px 20px rgba(6,199,85,.42) !important; }
.hbtn-line .hbtn-ico{ width:26px !important; height:26px !important; }
@media (max-width:1180px) and (min-width:761px){
  .gnav{ gap:clamp(2px,0.55vw,12px) !important; padding-left:0 !important; }
  .gnav a{ font-size:clamp(12px,1.28vw,17px) !important; }
  .hbtn-line{ font-size:clamp(11px,1.2vw,15px) !important; padding:9px clamp(8px,1vw,16px) !important; }
  .hbtn-line .hbtn-ico{ width:18px !important; height:18px !important; }
}

/* ===== ヘッダーメニューを常に1行に（ウィンドウ幅に追従／2段折返し防止） ===== */
@media (min-width:761px){
  .header-in{ flex-wrap:nowrap !important; gap:clamp(4px,1vw,20px) !important; padding-left:clamp(12px,2.2vw,56px) !important; padding-right:clamp(12px,2.2vw,56px) !important; }
  .header-right{ flex-wrap:nowrap !important; flex:1 1 auto !important; min-width:0 !important; gap:clamp(4px,0.9vw,18px) !important; }
  /* ロゴも画面幅に追従（固定152pxをやめる）＋ズレ量も可変に */
  .brand{ flex:0 0 auto !important; margin-right:clamp(6px,1.6vw,52px) !important; }
  .brand-logo{ height:48px !important; transform:none !important; }
  /* メニュー：縮小を許可し、間隔・文字を可変に */
  .gnav{ flex-wrap:nowrap !important; flex:1 1 auto !important; min-width:0 !important; justify-content:center !important;
         gap:4px clamp(8px,2.6vw,58px) !important; padding-left:clamp(0px,1.6vw,90px) !important; }
  .gnav a{ white-space:nowrap !important; font-size:clamp(13px,1.5vw,24px) !important; padding:8px 0 !important; }
  /* 公式LINE：縮まないが可変 */
  .header-cta{ flex:0 0 auto !important; margin-left:auto !important; margin-right:clamp(2px,1.2vw,40px) !important; padding:0 clamp(2px,0.8vw,26px) !important; }
  .hbtn-line{ font-size:clamp(12.5px,1.35vw,23px) !important; padding:clamp(9px,1.1vw,20px) clamp(12px,2vw,42px) !important; white-space:nowrap !important; }
  .hbtn-line .hbtn-ico{ width:clamp(15px,1.5vw,26px) !important; height:clamp(15px,1.5vw,26px) !important; }
}

/* ===== 1181〜1599px：メニューを24px固定にすると入りきらず文字が重なる =====
   上の `@media (min-width:1181px)` が `.site-header .gnav a{font-size:24px}` を
   指定しており、詳細度が高いため上のclampが効かない。その結果この幅帯では
   項目が押し潰され「ASPATHについて」が最大58px はみ出して隣と重なっていた。
   TOPページはロゴが大きいぶん余白が少ないため、1700pxまで幅に追従させる。
   文字サイズだけでなく項目の間隔も一緒に詰めることで、どの幅でも
   すき間が均等になるようにしている。
   ※この範囲だけを対象にしているので、他の幅の見た目は変わらない。 */
@media (min-width:1181px) and (max-width:1699.98px){
  .site-header .gnav a{ font-size:clamp(13px,1.5vw,24px) !important; }
  .site-header .gnav{ gap:4px clamp(8px,2.1vw,58px) !important; padding-left:clamp(0px,1.1vw,90px) !important; }
  .site-header .header-in{ padding-left:clamp(12px,2.2vw,56px) !important; padding-right:clamp(12px,2.2vw,56px) !important; }
}

/* ============================================================
   レスポンシブ基盤：全デバイス対応（PCの見た目は維持）
   ============================================================ */
/* 共通：はみ出し防止・画像/表の追従 */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
img, video, svg{ max-width:100%; height:auto; }
table{ max-width:100%; }
*{ min-width:0; }

/* ── 大型タブレット / 小型ノート（〜1180px） ── */
@media (max-width:1180px){
  .wrap, .page-wrap{ padding-left:clamp(16px,3vw,32px); padding-right:clamp(16px,3vw,32px); }
  /* 3カラム→2カラム */
  .price-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .reasons-grid, .rs-grid, .col-list, .column-list, .news-list, .sb-grid{ gap:20px; }
}

/* ── タブレット縦（〜1024px） ── */
@media (max-width:1024px){
  /* 2カラム構成を1カラムへ（プロフィール・ジグザグ・由来） */
  .profile{ grid-template-columns:1fr !important; gap:28px !important; padding:30px 26px !important; }
  .profile .img-slot{ max-width:330px; margin:0 auto; }
  .zigzag{ grid-template-columns:1fr !important; gap:22px !important; }
  .zigzag.is-reverse .z-img{ order:0 !important; }
  .origin-hero{ grid-template-columns:1fr !important; gap:24px !important; margin:26px auto 8px !important; padding-right:0 !important; }
  .origin-hero-logo{ max-width:200px; margin:0 auto; }
  .origin-acr{ max-width:520px; margin:0 auto; }
  .acr-en{ min-width:clamp(130px,26vw,205px) !important; }
}

/* ── 小型タブレット / 大型スマホ（〜900px） ── */
@media (max-width:900px){
  .price-grid{ grid-template-columns:1fr !important; max-width:420px; margin-left:auto; margin-right:auto; }
  .price-card.recommend{ transform:none !important; }
  .sb-grid{ grid-template-columns:1fr !important; }
  .svc-item{ grid-template-columns:84px 1fr !important; gap:18px !important; padding:20px 18px !important; }
  .train-flow{ margin-top:48px; }
}

/* ── スマホ（〜760px）：可読性重視 ── */
@media (max-width:760px){
  .wrap, .page-wrap{ padding-left:16px; padding-right:16px; }
  h1{ font-size:clamp(23px,6.6vw,30px) !important; }
  h2{ font-size:clamp(20px,5.6vw,26px) !important; }
  h3{ font-size:clamp(17px,4.8vw,21px) !important; }
  p, li, dd, td{ font-size:clamp(15px,4.1vw,17px) !important; line-height:1.9 !important; }
  /* PC用の手動改行はスマホで無効化（変な位置で切れないように） */
  br.br-pc{ display:none !important; }
  /* ボタンは押しやすく */
  .btn, .hbtn, .btn-line, .btn-form{ min-height:48px; }
  .btn.big, .btn-line.big{ width:100%; max-width:340px; justify-content:center; }
  /* カード内の余白を締める */
  .card, .price-card, .svc-item, .news-list-item, .col-card{ padding:18px 16px !important; }
  .train-flow .tf-list li{ padding-left:56px !important; }
  .tf-list li::before{ width:38px !important; height:38px !important; font-size:15px !important; }
  .tf-list li:not(:last-child)::after{ left:18px !important; }
  /* 表は横スクロール可に */
  .cred-table, .price-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ── 小型スマホ（〜400px） ── */
@media (max-width:400px){
  .wrap, .page-wrap{ padding-left:13px; padding-right:13px; }
  .svc-item{ grid-template-columns:1fr !important; text-align:center; }
  .svc-circle{ margin:0 auto !important; }
  .svc-body h3::before{ display:none; }
}

/* ── 横向き（ランドスケープ）スマホ ── */
@media (max-height:480px) and (orientation:landscape){
  .hero{ min-height:520px; }
}


/* ==========================================================
   コメント欄（WordPress標準のコメント機能をサイトの意匠に合わせる）
   ・シニアの方が読み書きしやすいよう、文字は16px以上・入力欄は大きめ
   ・投稿ボタンは記事内CTAと同じオレンジ系で迷わないように
========================================================== */
.aspath-comments{
  max-width:820px;
  /* 下の余白を必ず取る。0だとフッターに貼り付いて窮屈に見える */
  margin:56px auto 90px; padding:0 20px;
}
.aspath-comments h2{
  font-family:var(--font-head); font-size:clamp(21px,2.8vw,26px);
  color:var(--brown); text-align:center; margin-bottom:8px;
}
.aspath-comments .ac-lead{
  text-align:center; font-size:15.5px; color:#52707A; margin-bottom:30px;
}
.ac-list{ list-style:none; margin:0 0 40px; padding:0; }
.ac-list ol.children{ list-style:none; margin:16px 0 0 clamp(16px,4vw,44px); padding:0; }
.ac-list li.comment{ margin-bottom:18px; }
.ac-list article.comment-body{
  background:#fff; border:1.5px solid var(--gold-soft); border-radius:16px;
  box-shadow:0 6px 18px rgba(38,70,83,.07); padding:22px 26px;
}
.ac-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.ac-head img.avatar{ width:44px; height:44px; border-radius:50%; flex:none; }
.ac-name{ font-family:var(--font-head); font-size:17px; color:var(--brown); }
.ac-date{ font-size:14px; color:#5E7681; }
.ac-badge{
  background:var(--gold); color:#fff; font-size:12.5px; font-weight:700;
  border-radius:999px; padding:2px 10px;
}
.ac-text{ font-size:16.5px; line-height:1.95; }
.ac-text p{ margin:0 0 10px; }
.ac-text p:last-child{ margin-bottom:0; }
.ac-actions{ margin-top:12px; font-size:15px; }
.ac-actions a{ color:var(--gold-deep); text-decoration:none; font-weight:700; }
.ac-actions a:hover{ color:var(--sun); }
.ac-pending{ color:#B4442B; font-size:14.5px; margin-top:8px; }

/* 投稿フォーム */
.aspath-comments #respond{
  background:#FFFCF7; border:1.5px solid var(--gold-soft); border-radius:18px;
  box-shadow:0 8px 22px rgba(38,70,83,.07); padding:30px clamp(20px,4vw,34px);
}
.aspath-comments .comment-reply-title{
  font-family:var(--font-head); font-size:clamp(19px,2.4vw,23px);
  color:var(--brown); margin:0 0 6px;
}
.aspath-comments .comment-reply-title small{ display:block; font-size:15px; margin-top:6px; }
.aspath-comments .comment-reply-title small a{ color:var(--sun); }
.aspath-comments .comment-notes,
.aspath-comments .logged-in-as{ font-size:15px; color:#52707A; margin:0 0 20px; }
.aspath-comments .comment-form-comment,
.aspath-comments .comment-form-author,
.aspath-comments .comment-form-email,
.aspath-comments .comment-form-url{ margin-bottom:18px; }
.aspath-comments label{
  display:block; font-family:var(--font-head); font-size:15.5px;
  color:var(--brown); margin-bottom:6px;
}
.aspath-comments .required{ color:var(--sun); font-weight:700; }
.aspath-comments input[type=text],
.aspath-comments input[type=email],
.aspath-comments input[type=url],
.aspath-comments textarea{
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid var(--gold-soft); border-radius:12px;
  padding:13px 15px;
}
.aspath-comments textarea{ min-height:150px; resize:vertical; }
.aspath-comments input:focus, .aspath-comments textarea:focus{
  outline:none; border-color:var(--sun); box-shadow:0 0 0 3px rgba(244,162,97,.15);
}
.aspath-comments .comment-form-cookies-consent{
  display:flex; align-items:flex-start; gap:10px; font-size:15px; margin-bottom:20px;
}
.aspath-comments .comment-form-cookies-consent input{ width:20px; height:20px; accent-color:var(--sun); flex:none; margin-top:3px; }
.aspath-comments .comment-form-cookies-consent label{ margin:0; font-family:var(--font-body); font-size:15px; }
.aspath-comments .form-submit{ margin:0; text-align:center; }
.aspath-comments .submit{
  font-family:var(--font-head); font-weight:700; font-size:17px; color:#fff;
  background:linear-gradient(135deg,var(--sun),#DD8236);
  border:2.5px solid #264653; border-radius:999px;
  padding:16px 44px; cursor:pointer;
  box-shadow:0 10px 22px rgba(244,162,97,.35);
  transition:transform .25s, box-shadow .25s;
}
.aspath-comments .submit:hover{ transform:translateY(-3px); }
.ac-closed{
  text-align:center; font-size:15.5px; color:#5E7681;
  background:#FAF3E7; border-radius:14px; padding:18px 22px;
}

@media (max-width:600px){
  .aspath-comments{ margin:44px auto 64px; padding:0 16px; }
  .ac-list article.comment-body{ padding:18px 16px; }
  .ac-list ol.children{ margin-left:14px; }
  .aspath-comments #respond{ padding:24px 18px; }
  .aspath-comments .submit{ width:100%; }
}