:root {
  --bg: #fffdf8;
  --white: #ffffff;
  --green: #76b433;          /* ロゴの緑（実色に合わせて変更） */
  --green-deep: #3d7a1e;
  --green-soft: #b7dc7c;
  --mint: #e6f4cf;
  --mint-pale: #f3f9e6;
  --butter: #fff0a6;
  --peach: #ffd9c4;
  --sky: #c4e8f5;
  --coral: #ff8a6b;
  --oak: #ecd6b0;
  --oak-deep: #cfae7b;
  --oak-pale: #faf3e6;
  --ink: #2a3b34;            /* 黒ではなく深い緑グレー */
  --muted: #5b6b63;
  --line: #06c755;
  --grad: linear-gradient(135deg, #76b433, #c4dc4a);
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --wood: repeating-linear-gradient(90deg, rgba(150,105,60,.09) 0 1px, transparent 1px 15px),
          repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 4px, transparent 4px 47px),
          linear-gradient(180deg, #f0dcb9, #dcbf90);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.9; overflow-x: hidden; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 720px; }
.section { padding: 104px 0; position: relative; }
.center { text-align: center; }
.small { font-size: .8rem; color: var(--muted); }

h2 { font-size: clamp(1.5rem, 3.8vw, 2.2rem); font-weight: 700; line-height: 1.6; letter-spacing: .06em; margin-bottom: 20px; }
h2::after { content: ""; display: block; width: 64px; height: 7px; margin-top: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--green), var(--butter)); }
h2.center::after { margin-left: auto; margin-right: auto; }
h3 { font-weight: 700; font-size: 1.05rem; line-height: 1.6; }
.lead { text-align: center; color: var(--muted); margin: 0 auto 44px; max-width: 640px; }

/* 木目の帯 */
.woodbar { height: 10px; background: var(--wood); }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 30px; border-radius: 999px; font-weight: 700; letter-spacing: .06em; text-decoration: none; color: #fff; border: 2px solid transparent; transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s; }
.btn:hover { transform: translateY(-3px) rotate(-1.5deg); }
.btn-line { background: linear-gradient(135deg, #06c755, #3bdc82); box-shadow: 0 5px 0 #04913f; }
.btn-line:hover { box-shadow: 0 8px 0 #04913f; }
.btn-ghost { background: transparent; color: var(--green-deep); border-color: var(--green); }
.btn-ghost:hover { background: var(--mint); }
.btn-large { padding: 17px 38px; font-size: 1.02rem; }
.btn-small { padding: 8px 20px; font-size: .85rem; box-shadow: 0 4px 0 #04913f; }

/* ヘッダー */
.site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 28px; background: rgba(255,253,248,.94); backdrop-filter: blur(8px); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-img { width: 44px; height: 44px; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; font-weight: 700; font-size: 1.1rem; letter-spacing: .1em; line-height: 1.3; color: var(--green-deep); }
.logo-text small { font-size: .55rem; font-weight: 500; letter-spacing: .2em; color: var(--muted); }
.gnav { display: flex; gap: 26px; font-size: .88rem; font-weight: 500; }
.gnav a { text-decoration: none; padding: 4px 0; background: linear-gradient(var(--butter), var(--butter)) 0 100% / 0 40% no-repeat; transition: background-size .3s; }
.gnav a:hover { background-size: 100% 40%; }
.site-header + .woodbar { position: sticky; top: 69px; z-index: 29; height: 6px; }

main { background: radial-gradient(circle at 92% 6%, #e6f4cf 0, transparent 34%), radial-gradient(circle at 2% 40%, #fff3c4 0, transparent 30%); background-repeat: no-repeat; background-size: 100% 900px; overflow-x: clip; }

/* ヒーロー */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 72px 28px 88px; }
.hero-text, .hero-visual { position: relative; z-index: 1; }
.shape { position: absolute; z-index: 0; pointer-events: none; animation: float 10s ease-in-out infinite; }
.s1 { width: 190px; height: 170px; left: -50px; top: 20px; background: linear-gradient(135deg, var(--butter), var(--peach)); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
.s2 { width: 240px; height: 210px; right: -70px; top: 0; background: linear-gradient(135deg, var(--mint), var(--sky)); border-radius: 50% 50% 35% 65% / 60% 40% 60% 40%; animation-delay: -4s; }
.s3 { width: 120px; height: 110px; left: 44%; bottom: 30px; background: linear-gradient(135deg, var(--green-soft), var(--mint)); border-radius: 45% 55% 40% 60%; animation-delay: -7s; }
@keyframes float { 50% { transform: translateY(-14px) rotate(5deg); } }
.kicker { display: inline-block; font-size: .85rem; font-weight: 700; letter-spacing: .12em; color: var(--green-deep); padding: 6px 16px; background: var(--white); border: 2px solid var(--green-soft); border-radius: 999px; margin-bottom: 22px; animation: fade-up .8s .4s both; }
.hero h1 { font-weight: 700; font-size: clamp(1.55rem, 4.1vw, 3rem); line-height: 1.6; letter-spacing: .05em; color: var(--green-deep); margin-bottom: 24px; transform: rotate(-1.5deg); transform-origin: left center; }
.hero h1 .line { display: block; white-space: nowrap; overflow: hidden; padding: .04em 0; }
.hero h1 .line > span { display: inline-block; transform: translateY(115%); animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; background: linear-gradient(transparent 62%, var(--butter) 62% 92%, transparent 92%); padding: 0 .1em; }
.hero h1 .line:nth-child(2) > span { animation-delay: .15s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .3s; }
@keyframes rise { to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
.hero-sub { color: var(--muted); margin-bottom: 34px; animation: fade-up .8s .55s both; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; animation: fade-up .8s .7s both; }
.tel { text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: .06em; color: var(--green-deep); line-height: 1.3; }
.tel small { display: block; font-size: .7rem; font-weight: 500; color: var(--muted); letter-spacing: .1em; }

.hero-visual { min-height: 520px; }
.ph { position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; font-size: .8rem; letter-spacing: .1em; color: rgba(255,255,255,.95); background: linear-gradient(145deg, var(--oak), var(--green)); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch { position: absolute; right: 0; top: 0; width: 80%; height: 500px; border-radius: 62% 38% 46% 54% / 48% 56% 44% 52%; }
.round { position: absolute; left: 0; bottom: 30px; width: 36%; aspect-ratio: 1; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; border: 8px solid var(--bg); background: linear-gradient(145deg, var(--butter), var(--green-soft)); animation: float 8s ease-in-out infinite; }
.bubble { position: absolute; left: 4%; top: 40px; padding: 10px 18px; font-size: .82rem; font-weight: 700; line-height: 1.5; color: var(--green-deep); background: var(--white); border: 2px solid var(--green-soft); border-radius: 22px 22px 22px 4px; transform: rotate(-5deg); animation: float 7s ease-in-out infinite; animation-delay: -2s; }
.pin-card { position: absolute; right: 12px; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 22px; background: linear-gradient(135deg, var(--butter), #ffe27a); border-radius: 999px; box-shadow: 0 10px 24px rgba(207,174,123,.35); font-size: .85rem; font-weight: 700; animation: float 9s ease-in-out infinite; animation-delay: -4s; }
.pin-card strong { font-size: 1.15rem; color: var(--green-deep); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }

/* ヒーロー写真の自動切り替え（transform / opacity のみ） */
.slide, .slide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; will-change: transform, opacity; animation: slide-fade 18s linear infinite both, slide-zoom 18s linear infinite; }
.sl1 { background: linear-gradient(145deg, var(--oak), var(--green)); }
.sl2 { background: linear-gradient(145deg, var(--mint), var(--oak-deep)); animation-delay: 6s; }
.sl3 { background: linear-gradient(145deg, var(--butter), var(--green)); animation-delay: 12s; }
@keyframes slide-fade { 0% { opacity: 0; } 6%, 33% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes slide-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.hero.paused *, .hero.paused { animation-play-state: paused !important; }

/* 流れる帯 */
.marquee { overflow: hidden; background: linear-gradient(90deg, #4f9a28, #7cc144, #4f9a28); color: #fff; font-weight: 700; letter-spacing: .1em; padding: 10px 0; white-space: nowrap; transform: rotate(-1deg); margin: 0 -12px; position: relative; z-index: 2; }
.marquee .track { display: inline-flex; animation: marquee 30s linear infinite; will-change: transform; }
.marquee span { padding-right: 1.5em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 実績バッジ */
.badges { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; padding-top: 56px; padding-bottom: 8px; }
.badges a { text-decoration: none; font-size: .82rem; font-weight: 700; padding: 8px 18px; border: 2px solid var(--green-soft); border-radius: 999px; background: var(--white); transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .2s; }
.badges a:nth-child(even) { border-color: var(--oak); }
.badges a:hover { background: var(--mint-pale); transform: translateY(-3px) rotate(-2deg); }

/* コンセプト */
.concept-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.concept p { color: var(--muted); }
.concept p + p { margin-top: 1em; }
.greeting { display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; align-items: center; margin-top: 32px !important; padding: 20px 24px; background: linear-gradient(135deg, var(--oak-pale), var(--butter)); border-radius: 24px 36px 24px 40px; color: var(--ink) !important; }
.greeting .avatar { grid-row: span 2; width: 84px; height: 84px; object-fit: cover; border-radius: 50% 45% 55% 50%; border: 3px solid var(--white); }
.greeting span { grid-column: 2; font-size: .82rem; line-height: 1.7; color: var(--muted); }
.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; text-align: center; }
.circle { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 10px; font-size: 1.9rem; font-weight: 700; color: #fff; border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%; box-shadow: 0 8px 18px rgba(106,171,46,.2); }
.c1 { background: linear-gradient(135deg, #76b433, #c4dc4a); }
.c2 { background: linear-gradient(135deg, #5fb8dd, #bfe6f2); }
.c3 { background: linear-gradient(135deg, #f0b84a, #ffe27a); }
.c4 { background: linear-gradient(135deg, #ff8a6b, #ffc4a8); }
.points h3 { color: var(--green-deep); font-size: 1rem; }
.points p { font-size: .85rem; line-height: 1.7; margin-top: 2px; }

/* 施術内容・料金 */
.menu { background: linear-gradient(180deg, var(--mint-pale), #f8fbef); margin-top: 60px; }
.menu::before, .access::before { content: ""; position: absolute; left: 0; right: 0; top: -59px; height: 60px; background-repeat: no-repeat; background-size: 100% 60px; }
.menu::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30C150 0 300 0 450 30s300 30 450 0 225-15 300-15V60Z' fill='%23f3f9e6'/%3E%3C/svg%3E"); }
.menu-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
.card { transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.card:hover { transform: translateY(-6px) rotate(-.8deg); }
.card .ph { aspect-ratio: 5 / 4; margin-bottom: 18px; }
.arch-s { border-radius: 50% 50% 42% 58% / 56% 44% 56% 44%; }
.card:nth-child(2) .arch-s { border-radius: 42% 58% 52% 48% / 46% 54% 46% 54%; background: linear-gradient(145deg, var(--butter), var(--green-soft)); }
.card:nth-child(3) .arch-s { border-radius: 56% 44% 48% 52% / 52% 48% 52% 48%; background: linear-gradient(145deg, var(--sky), var(--green)); }
.card:nth-child(4) .arch-s { border-radius: 46% 54% 56% 44% / 44% 56% 44% 56%; background: linear-gradient(145deg, var(--peach), var(--oak-deep)); }
.card h3 { color: var(--green-deep); margin-bottom: 4px; }
.card p { font-size: .9rem; color: var(--muted); line-height: 1.8; }
.price { margin-top: 10px; font-weight: 700; font-size: 1.3rem; color: var(--ink) !important; }
.price small { font-size: .75rem; font-weight: 500; }
.price.note { font-size: .92rem; color: var(--green-deep) !important; }
.price-table { background: var(--white); border-radius: 22px 34px 22px 38px; padding: 0 26px 26px; overflow: hidden; box-shadow: 8px 8px 0 var(--mint); position: sticky; top: 100px; transform: rotate(1deg); }
.price-table::before { content: ""; display: block; height: 12px; margin: 0 -26px 22px; background: var(--wood); }
.price-table h3 { margin-bottom: 10px; }
.price-table dl { display: grid; grid-template-columns: 1fr auto; font-size: .88rem; }
.price-table dt, .price-table dd { padding: 11px 0; border-bottom: 1px dashed var(--green-soft); }
.price-table dd { text-align: right; font-weight: 700; margin-left: 12px; }
.warn { margin: 14px 0 20px; font-size: .75rem; line-height: 1.7; color: var(--muted); }
.price-table .btn { width: 100%; }
.ryoukin { margin: 56px auto 0; max-width: 720px; text-align: center; }
.ryoukin figcaption { font-weight: 700; margin-bottom: 14px; }
.ryoukin img { width: 100%; height: auto; border-radius: 24px; background: var(--white); }

/* 施術の流れ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 48px; }
.steps li { position: relative; background: var(--white); border: 2px solid var(--mint); border-radius: 26px 34px 26px 38px; padding: 22px 20px; }
.steps li:nth-child(even) { border-color: var(--butter); transform: translateY(14px); }
.step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.step-img { width: 84px; height: 84px; object-fit: cover; border-radius: 50% 45% 55% 50% / 55% 50% 50% 45%; background: var(--oak-pale); }
.step-head .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; }
.steps h3 { color: var(--green-deep); margin-bottom: 4px; }
.steps p { font-size: .86rem; color: var(--muted); line-height: 1.8; }

/* 店舗情報 */
.access { background: linear-gradient(180deg, var(--oak-pale), #fdf8ee); margin-top: 60px; }
.access::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V25C200 55 350 55 600 25s450-30 600 0V60Z' fill='%23faf3e6'/%3E%3C/svg%3E"); }
.access-grid { display: grid; grid-template-columns: 1fr 1.1fr 0.8fr; gap: 44px; align-items: center; }
.map-frame { aspect-ratio: 1; border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%; overflow: hidden; background: var(--white); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.info { display: grid; grid-template-columns: 5.5em 1fr; font-size: .9rem; line-height: 1.8; margin: 8px 0 12px; }
.info dt, .info dd { padding: 12px 0; border-bottom: 1px dashed var(--oak-deep); }
.info dt { font-weight: 700; color: var(--green-deep); }
.info a { font-weight: 700; color: var(--green-deep); }
.arch-wide { aspect-ratio: 3 / 4; border-radius: 55% 45% 46% 54% / 40% 50% 50% 60%; background: linear-gradient(145deg, var(--butter), var(--green-soft)); }

/* 予約 */
.reserve { margin-top: 72px; padding: 96px 0; background: linear-gradient(135deg, #2f7a26, #4f9a2c 65%, #6fb534); color: #fff; text-align: center; border-radius: 64px; margin-left: 16px; margin-right: 16px; position: relative; overflow: hidden; }
.reserve::before, .reserve::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.14); animation: float 11s ease-in-out infinite; }
.reserve::before { width: 220px; height: 200px; left: -50px; top: -40px; }
.reserve::after { width: 160px; height: 150px; right: -30px; bottom: -30px; animation-delay: -5s; }
.reserve .wrap { position: relative; z-index: 1; }
.reserve h2::after { background: linear-gradient(90deg, #fff, var(--butter)); }
.reserve p { color: #f4fae9; }
.reserve-buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 32px; }
.reserve .btn-line { background: #fff; color: #058a3d; box-shadow: 0 5px 0 #0d6e45; }
.reserve .btn-ghost { color: #fff; border-color: #fff; }
.reserve .btn-ghost:hover { background: rgba(255,255,255,.18); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 64px; }
.faq-grid p { color: var(--muted); }
.faq-list details { background: var(--white); border: 2px solid var(--mint); border-radius: 22px; padding: 16px 22px; margin-bottom: 14px; transition: border-color .25s; }
.faq-list details[open] { border-color: var(--green-soft); }
.faq-list summary { cursor: pointer; list-style: none; font-weight: 700; display: flex; align-items: center; gap: 14px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "Q"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .85rem; }
.faq-list summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--green-deep); transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin-top: 10px; padding-left: 44px; font-size: .9rem; color: var(--muted); line-height: 1.9; }

/* フッター */
.site-footer { text-align: center; padding: 48px 24px 40px; background: linear-gradient(135deg, #2d6a1d, #4a8f2a); color: #f1f8e4; }
.footer-name { font-weight: 700; letter-spacing: .12em; font-size: 1.1rem; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; margin: 16px 0; font-size: .85rem; }
.site-footer .links a { text-decoration: none; opacity: .92; }
.site-footer .links a:hover { opacity: 1; text-decoration: underline; }
.site-footer .small { color: #cfe6b0; }
.fixed-line { display: none; }

/* スクロールアニメーション（JS有効時のみ） */
.js .reveal { opacity: 0; transform: translateY(32px) rotate(-1deg); transition: opacity .7s, transform .8s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .points li.reveal:nth-child(2), .js .cards .reveal:nth-child(2), .js .steps li:nth-child(2) { transition-delay: .1s; }
.js .points li.reveal:nth-child(3), .js .cards .reveal:nth-child(3), .js .steps li:nth-child(3) { transition-delay: .2s; }
.js .points li.reveal:nth-child(4), .js .cards .reveal:nth-child(4), .js .steps li:nth-child(4) { transition-delay: .3s; }
.js .steps li:nth-child(even).reveal.in { transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .shape, .round, .bubble, .pin-card, .slide, .marquee .track, .reserve::before, .reserve::after, .kicker, .hero-sub, .hero-cta { animation: none; }
  .sl2, .sl3 { opacity: 0; }
  .hero h1 .line > span { transform: none; animation: none; }
  .btn, .badges a, .card { transition: none; }
}

/* タブレット */
@media (max-width: 960px) {
  .gnav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  .concept-grid, .faq-grid, .menu-layout { grid-template-columns: 1fr; gap: 40px; }
  .price-table { position: static; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .access-grid { grid-template-columns: 1fr 1fr; }
  .access-grid > :nth-child(2) { order: -1; grid-column: 1 / -1; }
}
/* スマホ */
@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .site-header { padding: 10px 16px; }
  .site-header .btn { display: none; }
  .site-header + .woodbar { top: 57px; }
  .hero { padding: 40px 20px 64px; gap: 28px; }
  .hero-visual { min-height: 430px; }
  .arch { height: 400px; width: 84%; }
  .round { width: 38%; bottom: 40px; }
  .bubble { top: 10px; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps li:nth-child(even) { transform: none; }
  .js .steps li:nth-child(even).reveal.in { transform: none; }
  .access-grid { grid-template-columns: 1fr; }
  .map-frame { aspect-ratio: 4 / 3; border-radius: 40px; }
  .arch-wide { aspect-ratio: 4 / 3; }
  .reserve { border-radius: 40px; margin-left: 10px; margin-right: 10px; }
  .site-footer { padding-bottom: 96px; }
  .fixed-line { display: block; position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 40; padding: 15px; text-align: center; border-radius: 999px; background: linear-gradient(135deg, #06c755, #3bdc82); color: #fff; font-weight: 700; letter-spacing: .06em; text-decoration: none; box-shadow: 0 5px 0 #04913f; }
}

/* 微調整 */
.card .ph img { object-position: center 22%; }
.step-img { object-position: center 28%; }
.arch-wide img { object-position: 50% 30%; }
.menu-layout { grid-template-columns: 1fr 340px; }
.price-table dt { white-space: nowrap; }
.price-table dd { font-size: .84rem; }
.hero-visual .arch img, .slide { object-position: 50% 25%; }
@media (max-width: 960px) { .menu-layout { grid-template-columns: 1fr; } }
.points h3, .card h3, .steps h3 { text-wrap: balance; }
@media (max-width: 640px) {
  .hero h1 { font-size: 7.4vw; }
  .points h3 { font-size: .9rem; letter-spacing: 0; }
}

/* ===== 保険施術料金の目安（表） ===== */
.fee { position: relative; max-width: 760px; margin: 64px auto 0; padding: 0 28px 24px; background: var(--white); border-radius: 28px 42px 28px 46px; box-shadow: 8px 8px 0 var(--mint); overflow: hidden; }
.fee::before { content: ""; display: block; height: 12px; margin: 0 -28px 24px; background: var(--wood); }
.fee-title { text-align: center; font-size: 1.15rem; margin-bottom: 14px; }
.fee-title::after { content: ""; display: block; width: 56px; height: 6px; margin: 10px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--green), var(--butter)); }
.fee-table { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.fee-table thead th { padding: 10px 4px; background: linear-gradient(135deg, #4f9a28, #8cc63f); color: #fff; font-size: clamp(.78rem, 2.6vw, 1rem); border-radius: 14px; letter-spacing: .08em; }
.fee-table thead th:first-child { background: linear-gradient(135deg, #3d7a1e, #76b433); }
.fee-table tbody th { padding: 12px 6px; background: var(--mint-pale); color: var(--green-deep); border-radius: 14px; font-size: clamp(.72rem, 2.4vw, .95rem); text-align: center; }
.fee-table tbody th b { font-size: clamp(1.3rem, 4.6vw, 1.9rem); line-height: 1; margin-right: 1px; }
.fee-table td { padding: 12px 2px; text-align: center; background: var(--oak-pale); border-radius: 14px; white-space: nowrap; transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .25s; }
.fee-table tbody tr:hover td { background: var(--butter); transform: translateY(-2px); }
.fee-table td strong { font-size: clamp(1.05rem, 4.2vw, 1.75rem); font-weight: 700; color: #e0425a; letter-spacing: -.01em; }
.fee-table td small, .fee-table .tilde { font-size: clamp(.62rem, 2.2vw, .9rem); color: var(--muted); }
.fee-note { text-align: right; font-size: .8rem; color: var(--muted); margin-top: 6px; }

/* ===== 掲載実績 ===== */
.press { background: linear-gradient(180deg, #fff4ee, #fffaf5); margin-top: 60px; }
.press::before { content: ""; position: absolute; left: 0; right: 0; top: -59px; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V32C250 0 450 0 700 30s350 25 500-5V60Z' fill='%23fff4ee'/%3E%3C/svg%3E") no-repeat; background-size: 100% 60px; }
.press-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.press-photo { position: relative; padding-bottom: 14%; }
.press-main { display: block; width: 86%; height: auto; border-radius: 44px 60px 44px 64px; box-shadow: 0 18px 40px rgba(224,120,120,.18); }
.press-badge { position: absolute; right: 0; bottom: 0; width: 56%; height: auto; border: 6px solid #fff; border-radius: 22px; box-shadow: 0 14px 30px rgba(224,120,120,.22); transform: rotate(4deg); animation: float 9s ease-in-out infinite; }
.press p { color: var(--muted); }
.press-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 28px; }
.press-list li { padding: 7px 16px; font-size: .85rem; font-weight: 700; color: var(--green-deep); background: #fff; border: 2px solid var(--green-soft); border-radius: 999px; }

/* ===== 地図（オフラインでも見える図版） ===== */
.map-frame { position: relative; aspect-ratio: 1; border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%; overflow: hidden; background: linear-gradient(145deg, #eef7dc, #dff0e6); }
.map-art { position: absolute; inset: 0; }
.road { position: absolute; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(106,171,46,.12); }
.r1 { left: -10%; right: -10%; top: 38%; height: 14px; transform: rotate(-8deg); }
.r2 { top: -10%; bottom: -10%; left: 56%; width: 14px; transform: rotate(6deg); }
.r3 { left: -10%; right: -10%; top: 70%; height: 9px; transform: rotate(5deg); }
.r4 { top: -10%; bottom: -10%; left: 24%; width: 9px; transform: rotate(-4deg); }
.station { position: absolute; left: 12%; top: 16%; padding: 5px 12px; font-size: .75rem; font-weight: 700; color: #fff; background: var(--green-deep); border-radius: 999px; }
.pinpoint { position: absolute; left: 56%; top: 44%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 4px solid #fff; border-radius: 50%; background: var(--coral); box-shadow: 0 4px 10px rgba(255,138,107,.5); }
.pinpoint::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--coral); animation: ping 2.4s ease-out infinite; }
@keyframes ping { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
.pin-label { position: absolute; left: 56%; top: 44%; transform: translate(-50%, -46px); padding: 5px 12px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: #fff; border-radius: 999px; box-shadow: 0 6px 14px rgba(45,106,29,.16); }
.btn-map { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); padding: 10px 22px; font-size: .85rem; white-space: nowrap; background: linear-gradient(135deg, #4f9a28, #7cc144); box-shadow: 0 4px 0 #3d7a1e; }
.btn-map:hover { transform: translateX(-50%) translateY(-3px); }

@media (max-width: 960px) { .press-grid { grid-template-columns: 1fr; gap: 40px; } .press-photo { max-width: 520px; margin: 0 auto; } }
@media (max-width: 640px) { .press-main { width: 90%; border-radius: 32px 44px 32px 48px; } .fee { padding: 0 14px 20px; } .fee::before { margin: 0 -14px 20px; } .fee-table { border-spacing: 4px; } .pin-label { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .press-badge, .pinpoint::after { animation: none; } }

/* 掲載実績：写真の重なりを調整 */
.press-photo { padding-bottom: 22%; }
.press-main { width: 82%; }
.press-badge { width: 46%; }

/* ===== 院内・外観ギャラリー ===== */
.access-grid { grid-template-columns: 1fr 1.1fr; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; }
.gallery figure { margin: 0; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.gallery figure:nth-child(odd) { transform: rotate(-1.2deg); }
.gallery figure:nth-child(even) { transform: rotate(1.2deg) translateY(14px); }
.js .gallery figure.reveal:not(.in) { transform: translateY(32px); }
.gallery figure:hover { transform: translateY(-6px) rotate(0); }
.gallery img { display: block; width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; border: 6px solid #fff; border-radius: 28px 40px 28px 44px; box-shadow: 0 14px 30px rgba(110,90,40,.14); }
.gallery figure:nth-child(2) img { object-position: 50% 70%; }
.gallery figcaption { margin-top: 12px; text-align: center; font-size: .88rem; font-weight: 700; color: var(--green-deep); letter-spacing: .06em; }
@media (max-width: 960px) {
  .access-grid { grid-template-columns: 1fr; }
  .access-grid > :nth-child(2) { order: 0; grid-column: auto; }
  .gallery { gap: 18px; }
}
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
  .gallery figure:nth-child(even) { transform: rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce) { .gallery figure { transition: none; } }

/* ===== 症状別ガイド（トップ） ===== */
.symptoms { background: linear-gradient(180deg, var(--mint-pale), #fbfdf5); margin-top: 60px; }
.symptoms::before { content: ""; position: absolute; left: 0; right: 0; top: -59px; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V28C220 58 400 58 620 28s400-28 580 4V60Z' fill='%23f3f9e6'/%3E%3C/svg%3E") no-repeat; background-size: 100% 60px; }
.sx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sx-card { display: block; text-decoration: none; padding: 16px 16px 20px; background: var(--white); border-radius: 28px 40px 28px 44px; box-shadow: 6px 6px 0 var(--mint); transition: transform .35s cubic-bezier(.3,1.4,.5,1), box-shadow .25s; }
.sx-card:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: 8px 10px 0 var(--green-soft); }
.sx-img { display: block; overflow: hidden; border-radius: 22px 32px 22px 36px; background: var(--mint-pale); }
.sx-img img { display: block; width: 100%; height: auto; }
.sx-card h3 { margin: 14px 6px 2px; color: var(--green-deep); font-size: 1.12rem; }
.sx-card p { margin: 0 6px; font-size: .86rem; color: var(--muted); line-height: 1.7; }
.sx-more { display: inline-block; margin: 10px 6px 0; font-size: .85rem; font-weight: 700; color: var(--green-deep); background: linear-gradient(var(--butter), var(--butter)) 0 100% / 100% 40% no-repeat; }
.sx-more::after { content: " →"; }

/* ===== 症状ページ ===== */
.s-hero { padding: 56px 0 72px; }
.s-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.crumbs { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { text-decoration: none; color: var(--green-deep); }
.crumbs span { margin: 0 8px; }
.s-hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; line-height: 1.5; letter-spacing: .05em; color: var(--green-deep); margin-bottom: 16px; background: linear-gradient(transparent 66%, var(--butter) 66% 92%, transparent 92%); display: inline-block; padding: 0 .12em; }
.s-lead { color: var(--muted); margin-bottom: 28px; }
.s-hero .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.s-figure img { display: block; width: 100%; max-width: 440px; margin: 0 auto; height: auto; border-radius: 36px; box-shadow: 10px 10px 0 var(--mint); animation: float 9s ease-in-out infinite; }
.s-about h2, .s-approach h2 { margin-bottom: 20px; }
.s-about p, .s-approach p { color: var(--muted); }
.s-about p + p { margin-top: 1em; }
.checkbox { margin-top: 36px; padding: 24px 28px; background: linear-gradient(135deg, var(--oak-pale), var(--butter)); border-radius: 26px 38px 26px 42px; }
.checkbox h3 { margin-bottom: 10px; color: var(--green-deep); }
.check-list li { position: relative; padding: 7px 0 7px 34px; font-weight: 500; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1; }
.s-causes { background: var(--mint-pale); }
.cause-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.cause-grid li { padding: 24px 22px; background: var(--white); border-radius: 26px 36px 26px 40px; box-shadow: 6px 6px 0 var(--mint); }
.cause-grid h3 { color: var(--green-deep); margin-bottom: 6px; }
.cause-grid p { font-size: .9rem; color: var(--muted); line-height: 1.8; }
.ap-list { margin: 32px 0 24px; display: grid; gap: 16px; }
.ap-list li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; background: var(--white); border: 2px solid var(--mint); border-radius: 24px 34px 24px 38px; }
.ap-list .num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; }
.ap-list h3 { color: var(--green-deep); margin-bottom: 2px; }
.ap-list p { font-size: .9rem; line-height: 1.8; }
.ap-note { font-size: .9rem; }
.price-chip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 24px 0 14px; padding: 18px 26px; background: linear-gradient(135deg, var(--mint), var(--butter)); border-radius: 999px; font-weight: 700; color: var(--green-deep); }
.price-chip strong { font-size: 1.5rem; color: var(--ink); }
.price-chip small { font-size: .75rem; font-weight: 500; }
.caution-box { padding: 26px 30px; background: #fff7f3; border: 2px solid var(--peach); border-radius: 26px 38px 26px 42px; }
.caution-box h3 { color: #c2553b; margin-bottom: 10px; }
.caution-box li { position: relative; padding: 4px 0 4px 20px; font-size: .92rem; }
.caution-box li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.caution-box p { margin-top: 12px; font-size: .88rem; color: var(--muted); }
.s-others { padding-top: 72px; }
.other-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.other-links a { display: flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; text-decoration: none; font-weight: 700; background: var(--white); border: 2px solid var(--green-soft); border-radius: 999px; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.other-links a:hover { transform: translateY(-3px) rotate(-1.5deg); }
.other-links img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; }
.symptom-page .reserve { margin-top: 24px; }

@media (max-width: 960px) {
  .sx-grid { grid-template-columns: repeat(2, 1fr); }
  .s-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .cause-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sx-grid { grid-template-columns: 1fr; }
  .s-hero { padding: 36px 0 48px; }
  .price-chip { border-radius: 28px; justify-content: center; text-align: center; }
  .ap-list li { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .s-figure img { animation: none; } .sx-card, .other-links a { transition: none; } }

/* ===== プライバシーポリシー ===== */
.legal-hero { padding: 48px 0 24px; }
.legal { padding-top: 24px; }
.legal p, .legal li, .legal dd { color: var(--muted); font-size: .94rem; }
.legal h2 { font-size: 1.1rem; margin: 40px 0 10px; padding-left: 14px; border-left: 5px solid var(--green); letter-spacing: .04em; }
.legal h2::after { display: none; }
.legal ul { margin: 8px 0 0; padding-left: 1.3em; list-style: disc; }
.legal li { margin: 2px 0; }
.legal-dl { display: grid; grid-template-columns: 9em 1fr; margin: 6px 0 0; }
.legal-dl dt, .legal-dl dd { margin: 0; padding: 10px 0; border-bottom: 1px dashed var(--oak-deep); }
.legal-dl dt { font-weight: 700; color: var(--green-deep); font-size: .9rem; }
.legal-date { margin-top: 36px; text-align: right; }
.legal-back { margin-top: 40px; text-align: center; }
.faq-list.s-faq-list { margin: 0; }
.s-faq .faq-list { margin-top: 24px; }
@media (max-width: 640px) { .legal-dl { grid-template-columns: 1fr; } .legal-dl dt { border-bottom: 0; padding-bottom: 0; } }

/* ===== 初検料（料金まわり） ===== */
.price-chip.sub { margin-top: 0; background: linear-gradient(135deg, var(--oak-pale), var(--butter)); }
.price-chip.sub strong { font-size: 1.25rem; }
.card-link { margin-top: 8px; font-size: .88rem; font-weight: 700; }
.card-link a { color: var(--green-deep); text-decoration: none; background: linear-gradient(var(--butter), var(--butter)) 0 100% / 100% 40% no-repeat; }

/* ===== 産後専用ページ ===== */
.cta-sub { margin-top: 12px; font-size: .95rem; color: var(--muted); }
.cta-sub strong { font-size: 1.4rem; color: #e0425a; }
.s-figure.photo { position: relative; }
.s-figure.photo img { aspect-ratio: 5 / 4; object-fit: cover; }
.chip-float { position: absolute; left: 4%; bottom: 8%; padding: 10px 20px; font-size: .85rem; font-weight: 700; color: var(--green-deep); background: linear-gradient(135deg, var(--butter), #ffe27a); border-radius: 999px; box-shadow: 0 8px 20px rgba(207,174,123,.45); transform: rotate(-4deg); animation: float 8s ease-in-out infinite; }
.camp { background: linear-gradient(180deg, #fffbe3, var(--bg)); }
.camp-banner { display: block; border-radius: 28px; overflow: hidden; box-shadow: 0 18px 40px rgba(61,122,30,.18); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.camp-banner:hover { transform: translateY(-5px) rotate(-.6deg); }
.camp-banner img { display: block; width: 100%; height: auto; }
.camp-calc { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; margin-top: 28px; }
.camp-calc > span { align-self: center; font-weight: 700; color: var(--green-deep); font-size: 1.3rem; }
.cc-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 118px; padding: 12px 16px; background: var(--white); border: 2px solid var(--mint); border-radius: 22px 30px 22px 32px; text-align: center; line-height: 1.4; }
.cc-box small { font-size: .72rem; color: var(--muted); }
.cc-box b { font-size: 1.3rem; }
.cc-box.strike b { text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 3px; color: var(--muted); }
.cc-box.hot { background: linear-gradient(135deg, #fff0a6, #ffe27a); border-color: #ffd04a; }
.cc-box.hot b { color: #e0425a; font-size: 1.7rem; }
.cc-box em { font-style: normal; font-size: .72rem; font-weight: 700; color: #fff; background: #e0425a; border-radius: 999px; padding: 1px 10px; margin-top: 2px; }
.camp-note { margin: 18px 0 28px; text-align: center; font-size: .82rem; color: var(--muted); }
.sc-link { margin-top: 28px; }
.s-price-lp .fee { margin-top: 28px; }
.lp-fee td strong { font-size: clamp(1rem, 4vw, 1.5rem); }
.lp-fee td.free strong { color: var(--green-deep); }
.lp-fee td.hot { background: linear-gradient(135deg, #fff0a6, #ffe27a); }
.lp-fee tr.sum th { background: var(--butter); }
.s-price-lp .btn { margin-top: 28px; }

/* ===== セルフチェック ===== */
.sc-teaser { padding: 72px 0 8px; }
.sc-panel { text-align: center; padding: 44px 28px; color: #fff; background: linear-gradient(135deg, #2f7a26, #4f9a2c 65%, #6fb534); border-radius: 40px 56px 40px 60px; box-shadow: 8px 8px 0 var(--mint); position: relative; overflow: hidden; }
.sc-panel::before { content: ""; position: absolute; width: 180px; height: 160px; right: -40px; top: -40px; border-radius: 50%; background: rgba(255,255,255,.14); animation: float 10s ease-in-out infinite; }
.sc-panel h2 { color: #fff; margin-bottom: 12px; }
.sc-panel h2::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, #fff, var(--butter)); }
.sc-panel p { color: #f4fae9; margin-bottom: 26px; position: relative; }
.sc-panel .btn { position: relative; background: #fff; color: #058a3d; box-shadow: 0 5px 0 #0d6e45; }
.sc-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.sc-list { display: grid; gap: 12px; }
.sc-item { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--white); border: 2px solid var(--mint); border-radius: 22px 30px 22px 32px; cursor: pointer; transition: transform .25s cubic-bezier(.3,1.6,.5,1), border-color .2s, background .2s; font-weight: 500; }
.sc-item:hover { transform: translateY(-2px); }
.sc-item input { position: absolute; opacity: 0; pointer-events: none; }
.sc-item .box { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--green-soft); border-radius: 10px; background: var(--white); color: transparent; font-weight: 700; transition: background .2s, color .2s, transform .25s cubic-bezier(.3,1.8,.5,1); }
.sc-item .box::after { content: "✓"; }
.sc-item:has(input:checked) { background: linear-gradient(135deg, var(--mint-pale), var(--butter)); border-color: var(--green); }
.sc-item input:checked + .box { background: var(--grad); color: #fff; border-color: transparent; transform: scale(1.12) rotate(-6deg); }
.sc-item input:focus-visible + .box { outline: 3px solid var(--green); outline-offset: 3px; }
.sc-result { position: sticky; top: 96px; padding: 28px 26px; background: var(--white); border-radius: 28px 42px 28px 46px; box-shadow: 8px 8px 0 var(--mint); overflow: hidden; }
.sc-result::before { content: ""; display: block; height: 12px; margin: -28px -26px 20px; background: var(--wood); }
.sc-count { display: flex; align-items: baseline; gap: 4px; }
.sc-count b { font-size: 3rem; line-height: 1; color: #e0425a; }
.sc-count span { color: var(--muted); font-weight: 700; }
.sc-meter { height: 14px; margin: 10px 0 18px; border-radius: 999px; background: var(--mint-pale); overflow: hidden; }
.sc-meter i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #76b433, #ffd04a, #ff8a6b); background-size: 300% 100%; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.sc-result h2 { font-size: 1.15rem; margin-bottom: 8px; }
.sc-result h2::after { display: none; }
.sc-result p { color: var(--muted); font-size: .92rem; }
.sc-recs { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sc-recs p { width: 100%; font-size: .8rem; font-weight: 700; color: var(--green-deep); }
.sc-recs a { padding: 6px 16px; font-size: .85rem; font-weight: 700; text-decoration: none; background: var(--white); border: 2px solid var(--green-soft); border-radius: 999px; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.sc-recs a:hover { transform: translateY(-2px) rotate(-1.5deg); background: var(--mint-pale); }
.sc-actions { display: grid; gap: 10px; margin-top: 18px; }
.sc-actions .btn { width: 100%; }
.sc-copied { min-height: 1.4em; font-size: .8rem !important; color: var(--green-deep) !important; text-align: center; }
.sc-disc { margin-top: 10px; font-size: .75rem !important; line-height: 1.7; }
@media (max-width: 960px) { .sc-wrap { grid-template-columns: 1fr; } .sc-result { position: static; } .camp-calc { gap: 8px; } }
@media (max-width: 640px) { .cc-box { min-width: 96px; padding: 10px 12px; } .camp-calc > span { font-size: 1.05rem; } .cc-arrow { display: none; } .sc-item { padding: 14px 16px; } .sc-panel { padding: 36px 20px; } }
@media (prefers-reduced-motion: reduce) { .chip-float, .sc-panel::before { animation: none; } .sc-meter i, .sc-item, .camp-banner { transition: none; } }

/* ===== 歪みチェック特典（初検料半額） ===== */
.btn-pop { background: linear-gradient(135deg, #ff6b57, #ff9a6b); box-shadow: 0 5px 0 #d94a38; }
.btn-pop:hover { box-shadow: 0 8px 0 #d94a38; }
.cta-hint { font-size: .8rem; color: var(--green-deep); font-weight: 700; }
.camp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 8px; }
.camp-steps li { position: relative; padding: 18px 16px 16px; text-align: center; background: var(--white); border: 2px solid var(--mint); border-radius: 22px 30px 22px 32px; }
.camp-steps li:not(:last-child)::after { content: "▶"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); z-index: 1; font-size: .8rem; color: var(--green); }
.camp-steps .num { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-size: .85rem; }
.camp-steps h3 { font-size: .95rem; color: var(--green-deep); }
.camp-steps p { font-size: .8rem; color: var(--muted); line-height: 1.6; }
.camp-deadline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin: 24px auto 0; padding: 12px 24px; width: fit-content; max-width: 100%; background: linear-gradient(135deg, #fff0a6, #ffe27a); border-radius: 999px; font-size: .9rem; }
.camp-deadline b { color: var(--green-deep); }
.camp-deadline strong { color: #e0425a; }
.season-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.season-list li { padding: 5px 14px; font-size: .8rem; font-weight: 700; color: var(--muted); background: var(--white); border: 2px solid var(--mint); border-radius: 999px; }
.season-list li.now { color: #fff; background: var(--grad); border-color: transparent; transform: scale(1.06); }
.sc-benefit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 22px; padding: 14px 22px; background: linear-gradient(135deg, #fff0a6, #ffe27a); border-radius: 26px 36px 26px 40px; font-size: .92rem; }
.sc-benefit strong { padding: 3px 14px; color: #fff; background: #e0425a; border-radius: 999px; font-size: .85rem; }
.sc-benefit b { color: #e0425a; font-size: 1.1rem; }
.sc-benefit em { width: 100%; font-style: normal; font-size: .8rem; color: var(--muted); }
.sc-offer { color: #fff !important; margin-bottom: 22px !important; }
.sc-offer b { padding: 1px 12px; color: #e0425a; background: #fff0a6; border-radius: 999px; }
.sc-offer small { font-size: .8rem; opacity: .95; }
.sc-actions .btn-pop { width: 100%; }

/* ===== 健康保険のご案内 ===== */
.ins-link { color: var(--green-deep); text-decoration: none; font-weight: 700; background: linear-gradient(var(--butter), var(--butter)) 0 100% / 100% 40% no-repeat; }
.ins-link:hover { background-size: 100% 80%; }
.ins-banner { margin: 40px 0 0; }
.ins-banner a { display: block; padding: 20px 26px; text-decoration: none; background: linear-gradient(135deg, var(--white), var(--mint-pale)); border: 2px solid var(--green-soft); border-radius: 26px 38px 26px 42px; transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.ins-banner a:hover { transform: translateY(-4px) rotate(-.5deg); }
.ins-banner strong { display: block; color: var(--green-deep); }
.ins-banner strong::after { content: " →"; }
.ins-banner span { display: block; margin-top: 2px; font-size: .85rem; color: var(--muted); line-height: 1.7; }
.ins-note { margin-top: 24px; padding: 20px 24px; background: var(--mint-pale); border: 2px solid var(--green-soft); border-radius: 24px 34px 24px 38px; }
.ins-note h3 { color: var(--green-deep); margin-bottom: 4px; }
.ins-note p { font-size: .9rem; }
.ins-note a { color: var(--green-deep); font-weight: 700; }
.ins-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.ins-cases li { padding: 20px 22px; background: var(--white); border-radius: 24px 34px 24px 38px; box-shadow: 6px 6px 0 var(--mint); }
.ins-cases h3 { color: var(--green-deep); margin-bottom: 4px; }
.ins-cases p { font-size: .88rem; color: var(--muted); line-height: 1.7; }
.ins-cond { max-width: 760px; margin: 32px auto 0; padding: 24px 28px; background: linear-gradient(135deg, var(--oak-pale), var(--butter)); border-radius: 26px 38px 26px 42px; }
.ins-cond h3 { color: var(--green-deep); margin-bottom: 8px; }
.ins-cond > p { margin-top: 10px; font-size: .82rem; color: var(--muted); }
.ins-compare { background: var(--mint-pale); }
.ins-table-wrap { margin-top: 24px; background: var(--white); border-radius: 26px 38px 26px 42px; padding: 12px 20px; box-shadow: 8px 8px 0 var(--mint); }
.ins-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ins-table th, .ins-table td { padding: 13px 8px; text-align: left; border-bottom: 1px dashed var(--green-soft); }
.ins-table thead th { color: var(--green-deep); font-size: .8rem; }
.ins-table tbody tr:last-child th, .ins-table tbody tr:last-child td { border-bottom: 0; }
.ins-table tbody th { font-weight: 700; }
.tag { display: inline-block; padding: 3px 14px; font-size: .8rem; font-weight: 700; border-radius: 999px; }
.tag.ins { color: #fff; background: var(--grad); }
.tag.self { color: var(--ink); background: linear-gradient(135deg, #fff0a6, #ffe27a); }
.tag.other { color: var(--ink); background: var(--sky); }
.ins-self { margin-top: 32px; padding: 26px 28px; background: var(--white); border: 2px solid var(--green-soft); border-radius: 26px 38px 26px 42px; }
.ins-self h3 { color: var(--green-deep); margin-bottom: 6px; }
.ins-self p { font-size: .92rem; color: var(--muted); }
.ins-self .price-chip { margin: 16px 0 10px; }
.ins-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ins-links a { padding: 6px 16px; font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--green-deep); background: var(--white); border: 2px solid var(--green-soft); border-radius: 999px; }
.ins-links a:hover { background: var(--mint-pale); }
.ins-fee .fee { margin-top: 24px; }
@media (max-width: 960px) { .ins-cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ins-cases { grid-template-columns: 1fr; } .camp-steps { grid-template-columns: 1fr; } .camp-steps li:not(:last-child)::after { content: "▼"; right: 50%; top: auto; bottom: -14px; transform: translateX(50%); } .camp-deadline { border-radius: 24px; } .ins-table-wrap { padding: 8px 12px; } }

/* ===== 特典の対象分け・パスポート・掲載ページ ===== */
.camp-pass { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 22px auto 0; padding: 14px 24px; max-width: 640px; text-align: center; background: linear-gradient(135deg, #fff0a6, #ffe27a); border: 3px solid #ffd04a; border-radius: 26px 38px 26px 42px; }
.camp-pass b { color: var(--green-deep); }
.camp-pass span { font-size: .88rem; color: var(--muted); }
.camp-pass strong { color: #e0425a; }
.lp-fee thead th { font-size: clamp(.68rem, 2.4vw, .92rem); }
.sc-use { margin-top: 18px; padding: 18px 22px; background: var(--mint-pale); border: 2px solid var(--green-soft); border-radius: 22px 30px 22px 32px; }
.sc-use h3 { margin-bottom: 8px; color: var(--green-deep); font-size: .95rem; }
.sc-use > p { margin-top: 6px; font-size: .78rem; color: var(--muted); }
.sc-opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 500; font-size: .92rem; cursor: pointer; }
.sc-opt.sub { margin-left: 26px; }
.sc-opt input { width: 20px; height: 20px; accent-color: var(--green); }
.sc-opt input:disabled + span { opacity: .45; }
.sc-fee { margin: 0 0 8px; padding: 6px 14px; width: fit-content; font-weight: 700; font-size: .92rem !important; color: var(--green-deep) !important; background: linear-gradient(135deg, #fff0a6, #ffe27a); border-radius: 999px; }
.press-badge.clip { width: 82%; height: auto; right: -2%; bottom: 0; aspect-ratio: 906 / 444; object-fit: cover; transform: rotate(-2deg); border-width: 5px; border-radius: 18px; }
.press-photo:has(.clip) { padding-bottom: 26%; }
.clip-figure { margin: 0; }
.clip-figure img { display: block; width: 100%; height: auto; border: 6px solid #fff; border-radius: 22px; box-shadow: 0 16px 36px rgba(110,90,40,.16); }
.clip-figure figcaption { margin-top: 10px; text-align: center; font-size: .82rem; color: var(--muted); }
.clip-note { margin: 10px 0 40px; font-size: .8rem; color: var(--muted); text-align: center; }
.clip-note a { color: var(--green-deep); font-weight: 700; }
.hiyoko h2 { margin-bottom: 12px; }
@media (max-width: 640px) { .press-badge.clip { width: 88%; right: -4%; } .sc-use { padding: 16px; } }
.hiyoko { padding-top: 0; }

/* ===== 協賛店・道順・院内取扱商品 ===== */
.pass-badge { display: inline-block; margin: 0 0 8px; padding: 4px 14px; font-size: .8rem; font-weight: 700; color: var(--green-deep); background: #fff; border: 2px solid #ffd04a; border-radius: 999px; }
.pass-shop { display: flex; align-items: center; gap: 22px; max-width: 640px; margin: 24px auto 0; padding: 18px 24px; background: var(--white); border: 2px solid var(--mint); border-radius: 26px 38px 26px 42px; }
.pass-shop img { flex: none; width: 110px; height: auto; border-radius: 16px; box-shadow: 0 8px 18px rgba(110,90,40,.18); }
.pass-shop h3 { color: var(--green-deep); font-size: 1rem; margin-bottom: 4px; }
.pass-shop p { font-size: .85rem; color: var(--muted); line-height: 1.7; }
.way-link-wrap { margin-top: 14px; }
.way-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.way-cards li { padding: 22px 20px; text-align: center; background: var(--white); border-radius: 26px 36px 26px 40px; box-shadow: 6px 6px 0 var(--mint); }
.way-min { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 8px; border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%; background: var(--grad); color: #fff; font-weight: 700; }
.way-min b { font-size: 2rem; line-height: 1; margin-right: 1px; }
.way-min.car { background: linear-gradient(135deg, #5fb8dd, #bfe6f2); }
.way-cards h3 { color: var(--green-deep); font-size: 1rem; margin-bottom: 2px; }
.way-cards p { font-size: .82rem; color: var(--muted); line-height: 1.7; }
.way-map { background: var(--mint-pale); }
.way-svg { margin-top: 20px; }
.way-svg svg { display: block; width: 100%; height: auto; border-radius: 34px; box-shadow: 8px 8px 0 var(--mint); }
.w-bg { fill: #fffdf4; }
.w-rail { stroke: var(--green); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 12; animation: w-flow 1.2s linear infinite; }
.w-walk { fill: none; stroke: #ff8a6b; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 11; animation: w-flow 1.4s linear infinite; }
@keyframes w-flow { to { stroke-dashoffset: -26; } }
.w-node { fill: var(--white); stroke: var(--green-soft); stroke-width: 3; }
.w-node.main { fill: var(--green-deep); stroke: none; }
.w-node.aeon { fill: #fff0a6; stroke: #ffd04a; }
.w-t1 { fill: #fff; font-size: 24px; font-weight: 700; }
.w-t1.dark { fill: var(--green-deep); }
.w-t1.big { font-size: 24px; }
.w-t2 { fill: #e3f4d2; font-size: 13px; font-weight: 500; }
.w-t2.dark { fill: var(--ink); font-size: 15px; font-weight: 700; }
.w-label { fill: var(--green-deep); font-size: 14px; font-weight: 700; }
.w-chip rect { fill: #e0425a; }
.w-chip text { fill: #fff; font-size: 17px; font-weight: 700; }
.w-chip text.s { font-size: 11px; font-weight: 500; }
.w-chip.small rect { fill: #ff8a6b; }
.w-clinic circle { fill: #fff; stroke: var(--green); stroke-width: 5; }
.w-walker { fill: #e0425a; stroke: #fff; stroke-width: 2; }
.way-note { margin-top: 12px; text-align: center; font-size: .8rem; color: var(--muted); }
.way-gallery { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 28px auto 0; }
.way-info { max-width: 640px; margin: 36px auto 0; }
.s-figure.product { position: relative; aspect-ratio: 1; max-width: 420px; margin: 0 auto; }
.product-ph { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; color: #fff; background: linear-gradient(145deg, #76b433, #c9de3e); border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%; box-shadow: 10px 10px 0 var(--mint); animation: float 9s ease-in-out infinite; }
.product-ph span { font-size: 2rem; font-weight: 700; letter-spacing: .06em; }
.product-ph small { font-size: .9rem; opacity: .9; }
.s-figure.product > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-width: none; background: #fff; border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%; box-shadow: 10px 10px 0 var(--mint); animation: none; }
.use-title { margin: 36px 0 12px; color: var(--green-deep); }
.use-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.use-cards li { padding: 18px 20px; background: var(--white); border: 2px solid var(--mint); border-radius: 24px 34px 24px 38px; }
.use-cards h3 { color: var(--green-deep); font-size: .95rem; margin-bottom: 2px; }
.use-cards p { font-size: .85rem; color: var(--muted); line-height: 1.7; }
.price-cards { display: flex; gap: 20px; justify-content: center; margin: 24px 0 28px; }
.pc { display: grid; place-items: center; min-width: 180px; padding: 20px 24px; text-align: center; background: linear-gradient(135deg, #fff0a6, #ffe27a); border-radius: 26px 38px 26px 42px; }
.pc small { font-size: .9rem; font-weight: 700; color: var(--green-deep); }
.pc strong { font-size: 2rem; line-height: 1.2; color: #e0425a; }
.pc span { font-size: .75rem; color: var(--muted); }
.product-dl { max-width: 640px; margin: 0 auto; }
@media (max-width: 960px) { .way-cards { grid-template-columns: repeat(2, 1fr); } .use-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .way-cards { grid-template-columns: 1fr; } .way-gallery { grid-template-columns: 1fr; } .pass-shop { flex-direction: column; text-align: center; } .price-cards { flex-direction: column; align-items: center; } .w-t1 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .w-rail, .w-walk, .product-ph { animation: none; } .w-walker { display: none; } }

.way-min { display: inline-flex; align-items: baseline; justify-content: center; align-content: center; padding-top: 22px; line-height: 1; }
.way-min.car { padding-top: 0; align-items: center; }
.way-min b { margin-right: 2px; }
.s-figure.product { width: 100%; }

/* ===== はじめての方へ ===== */
.ft-promise { margin-top: 22px; padding: 18px 24px; background: linear-gradient(135deg, var(--oak-pale), var(--butter)); border-radius: 26px 38px 26px 42px; }
.ft-promise p { font-size: .94rem; color: var(--ink); }
.ft-promise strong { color: var(--green-deep); }
.ft-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ft-jump a { display: grid; place-items: center; width: 40px; height: 40px; text-decoration: none; font-weight: 700; font-size: .85rem; color: var(--green-deep); background: var(--white); border: 2px solid var(--green-soft); border-radius: 50%; transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .2s; }
.ft-jump a:hover { transform: translateY(-3px) rotate(-6deg); background: var(--mint-pale); }
.ft-section { padding-top: 24px; }
.ft-steps { display: grid; gap: 56px; counter-reset: ft; }
.ft { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; align-items: center; padding: 22px; background: var(--white); border-radius: 28px 40px 28px 44px; box-shadow: 6px 6px 0 var(--mint); scroll-margin-top: 100px; }
.ft:nth-child(even) .ft-fig { order: 2; }
.ft:not(:last-child)::after { content: "▼"; position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); font-size: 1.1rem; color: var(--green); animation: ft-bounce 1.8s ease-in-out infinite; }
@keyframes ft-bounce { 50% { transform: translateX(-50%) translateY(6px); } }
.ft-fig img { display: block; width: 100%; height: auto; border-radius: 22px 34px 22px 36px; background: var(--oak-pale); }
.ft-badge { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 16px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--grad); border-radius: 999px; }
.ft-badge b { font-size: 1.15rem; letter-spacing: 0; }
.ft-body h3 { margin: 8px 0 6px; color: var(--green-deep); font-size: 1.2rem; }
.ft-body p { margin-top: 8px; font-size: .9rem; color: var(--muted); line-height: 1.85; }
.ft-body p strong { color: var(--ink); background: linear-gradient(transparent 62%, var(--butter) 62%); }
.ft-body a { color: var(--green-deep); font-weight: 700; }
.ft-list-b { margin: 8px 0 0; padding: 12px 16px 12px 34px; list-style: disc; font-size: .88rem; background: var(--mint-pale); border-radius: 18px; }
.ft-list-b li { padding: 2px 0; }
.ft-note { font-size: .8rem !important; }
.ft-price { background: var(--mint-pale); }
.ft-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.ft-price-grid > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22px 16px; text-align: center; text-decoration: none; background: var(--white); border-radius: 26px 36px 26px 40px; box-shadow: 6px 6px 0 var(--mint); }
.ft-price-grid small { font-size: .8rem; font-weight: 700; color: var(--green-deep); }
.ft-price-grid strong { font-size: 1.6rem; line-height: 1.3; color: #e0425a; }
.ft-price-grid strong.txt { font-size: 1rem; color: var(--ink); }
.ft-price-grid span { font-size: .8rem; font-weight: 700; color: var(--green-deep); }
.ft-benefit { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; padding: 22px 26px; text-align: center; background: linear-gradient(135deg, #fff0a6, #ffe27a); border-radius: 26px 38px 26px 42px; }
.ft-benefit b { padding: 3px 16px; color: #fff; background: #e0425a; border-radius: 999px; font-size: .85rem; }
.ft-benefit span { font-size: .9rem; }
.ft-benefit strong { color: #e0425a; font-size: 1.1rem; }
.ft-benefit a:not(.btn) { color: var(--green-deep); font-weight: 700; }
.ft-more { margin-top: 28px; }
@media (max-width: 960px) { .ft { grid-template-columns: 1fr; } .ft:nth-child(even) .ft-fig { order: 0; } .ft-price-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ft { padding: 16px; gap: 16px; } .ft-steps { gap: 52px; } .ft-jump a { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .ft:not(:last-child)::after { animation: none; } .ft-jump a { transition: none; } }

.h1-sub { margin: -4px 0 18px; font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; color: var(--green-deep); }

/* ===== 院長あいさつ・鍼灸院のたけなか ===== */
.g-more { grid-column: 2; margin-top: 4px; font-size: .85rem; font-weight: 700; color: var(--green-deep); text-decoration: none; background: linear-gradient(var(--butter), var(--butter)) 0 100% / 100% 40% no-repeat; width: fit-content; }
.dir-name { font-size: 1.6rem; color: var(--green-deep); letter-spacing: .12em; }
.dir-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dir-chips span { padding: 5px 14px; font-size: .8rem; font-weight: 700; color: var(--green-deep); background: var(--white); border: 2px solid var(--green-soft); border-radius: 999px; }
.dir-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dir-jump a { padding: 6px 16px; font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--green-deep); background: linear-gradient(135deg, #fff0a6, #ffe27a); border-radius: 999px; }
.dir-photo img { display: block; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1; object-fit: cover; border-radius: 50% 46% 54% 50% / 46% 54% 46% 54%; border: 8px solid #fff; box-shadow: 10px 10px 0 var(--mint); animation: float 9s ease-in-out infinite; }
.dir-lead { margin-bottom: 20px; font-size: 1.05rem; font-weight: 700; color: var(--green-deep); line-height: 1.8; }
.dir-text p { margin-top: 1em; color: var(--ink); font-size: .96rem; line-height: 2; }
.dir-text a { color: var(--green-deep); font-weight: 700; }
.dir-story { background: var(--mint-pale); }
.timeline { position: relative; margin-top: 28px; padding-left: 8px; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; border-left: 3px dashed var(--green-soft); }
.timeline li { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 8px 0 20px 34px; }
.timeline li::before { content: ""; position: absolute; left: 11px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); border: 4px solid var(--mint-pale); }
.tl-when { align-self: start; padding: 3px 12px; font-size: .78rem; font-weight: 700; text-align: center; color: #fff; background: var(--green-deep); border-radius: 999px; }
.timeline h3 { color: var(--green-deep); font-size: 1rem; }
.timeline p { font-size: .88rem; color: var(--muted); line-height: 1.8; }
.timeline a { color: var(--green-deep); font-weight: 700; }
.dir-values .use-cards { margin-top: 28px; }
.dir-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.needle { background: linear-gradient(180deg, var(--oak-pale), #fdf8ee); }
.needle-tag { display: inline-block; padding: 3px 16px; font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #cfae7b, #e3cba5); border-radius: 999px; }
.needle-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 8px; }
.needle-head small { display: block; font-size: .78rem; color: var(--muted); }
.needle-head strong { font-size: 1.3rem; letter-spacing: .1em; color: var(--green-deep); }
.needle-avatar { position: relative; display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; font-size: 2rem; font-weight: 700; color: #fff; background: var(--grad); border-radius: 50% 46% 54% 50%; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(110,90,40,.18); }
.needle-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.needle-badge { display: inline-block; margin: 22px 0 0; padding: 8px 20px; font-weight: 700; font-size: .9rem; color: var(--ink); background: linear-gradient(135deg, #fff0a6, #ffe27a); border-radius: 999px; }
.needle-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 22px 0 28px; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 4px; padding-left: 36px; } .tl-when { width: fit-content; } .g-more { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .dir-photo img { animation: none; } }