:root{--bg:#FAF8F5;--surface:#FFFFFF;--text:#31281E;--muted:#504941;--primary:#7F5D34;--on-primary:#FFFFFF;--accent:#EBE5DE;--border:#E1D9CE;--radius:4px;--radius-btn:2px;--accent2:#B7A38B;--h-weight:700;--h-track:0.06em;--font-h:'Shippori Mincho','Yu Mincho','Hiragino Mincho ProN','MS PMincho',serif;--font-b:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Yu Gothic Medium','Meiryo',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:16px;font-weight:500;line-height:1.8}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-h);font-weight:var(--h-weight);letter-spacing:var(--h-track);line-height:1.4;margin:0;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
p{margin:0;text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere}
ul,ol{list-style:none;margin:0;padding:0}
a{color:inherit}
.container{max-width:1100px;margin-inline:auto;padding-inline:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 32px;background:var(--primary);color:var(--on-primary);border-radius:var(--radius-btn);font-weight:700;text-decoration:none}
.btn--sm{min-height:44px;padding:0 24px}
.btn--inv{background:var(--on-primary);color:var(--primary)}
.btn:hover{filter:brightness(.92)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.hd{background:var(--surface);border-bottom:1px solid var(--border)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.hd__brand{font-family:var(--font-h);font-size:20px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.hd__nav{display:none}
main > :where(section):nth-of-type(even):not(:where(.highlights--cols,.highlights--mark)){background:var(--accent)}
.sec,.features{padding-block:48px}
.sec__title{font-size:28px;text-align:center;margin-bottom:32px}
.hero{padding-block:32px 48px}
.hero__in{display:grid;gap:32px}
.hero__txt{display:grid;gap:24px;justify-items:start}
.hero h1{font-size:28px}
.hero__sub{color:var(--muted)}
.hero__pic{width:100%;border-radius:var(--radius);object-fit:cover}
.hero--overlay{position:relative;isolation:isolate;padding:0;background:#2A2320;color:#fff;min-height:440px;display:flex;align-items:center;overflow:hidden}
.hero--overlay .hero__bg{position:absolute;inset:0;width:100%;height:100%;border-radius:0;z-index:-2}
.hero--overlay .hero__scrim{position:absolute;inset:0;z-index:-1;background:rgba(20,15,12,.62)}
.hero--overlay .hero__in{position:relative;width:100%;padding-block:72px}
.hero--overlay .hero__txt{max-width:640px}
.hero--overlay h1,.hero--overlay .hero__sub{color:#fff}
.hero--overlay .btn{background:#fff;color:#2A2320}
.hero--center .hero__txt{justify-items:center;text-align:center;max-width:720px;margin-inline:auto}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:grid;gap:16px;align-content:start}
.card h3{font-size:20px}
.card p{color:var(--muted)}
.card__no{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--accent);color:var(--text);font-family:var(--font-h);font-size:20px;font-weight:700}
.features__list{display:grid;gap:16px}
.features--rows .features__list{grid-template-columns:1fr}
.features--rows .card{grid-template-columns:auto 1fr;column-gap:24px;row-gap:8px;align-items:start}
.features--rows .card__no{grid-row:1 / span 2}
.gallery__list{display:grid;gap:16px;list-style:none;margin:0;padding:0}
.gallery__pic{width:100%;border-radius:var(--radius);object-fit:cover;display:block}
.problems__list,.steps__list,.pricing__list{display:grid;gap:16px}
.problem,.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.problems--list .problem,.steps--vertical .step{border-radius:0;border:0;border-left:4px solid var(--primary)}
.step{display:grid;gap:8px;align-content:start}
.step h3{font-size:20px}
.step p{color:var(--muted)}
.step__no{font-family:var(--font-h);font-weight:700}
.pricing__price{font-family:var(--font-h);font-size:28px;font-weight:700;color:var(--text)}
.pricing__detail{color:var(--muted)}
.pricing__unit{font-family:var(--font-b);font-size:14px;font-weight:500;color:var(--muted);margin-left:6px;white-space:nowrap}
.pricing--cards .pricing__card{grid-row:span 3;grid-template-rows:subgrid;row-gap:8px}
.pricing__card,.pricing__row{position:relative}
.pricing__card{min-width:0}
.pricing__card p,.pricing__row span{word-break:normal;overflow-wrap:anywhere}
.pricing__badge{display:inline-block;background:var(--primary);color:var(--on-primary);font-family:var(--font-b);font-size:13px;font-weight:700;line-height:1;padding:6px 12px;border-radius:999px;letter-spacing:.06em}
.pricing--cards .pricing__card > .pricing__badge{position:absolute;top:-12px;left:24px}
body .pricing--cards .pricing__card--featured{border:2px solid var(--primary);box-shadow:0 12px 28px rgba(0,0,0,.14);padding-inline:24px}
.pricing--cards .pricing__card--featured .pricing__price{color:var(--primary)}
body .pricing--table .pricing__row--featured{border:2px solid var(--primary);padding-inline:24px}
.pricing--table .pricing__badge{margin-left:8px;vertical-align:middle}
.pricing__note{margin-top:16px;color:var(--muted);text-align:center}
.pricing--table .pricing__row{display:grid;grid-template-columns:1fr auto;gap:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 24px;align-items:baseline}
.pricing--table .pricing__name{font-weight:700}
.pricing--table .pricing__price{font-size:20px}
.pricing--table .pricing__detail{grid-column:1 / -1}
.faq__list{display:grid;gap:12px;max-width:800px;margin-inline:auto}
.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 24px}
.faq__item h3{font-size:18px;margin-bottom:8px}
.faq summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}
.faq details[open] summary{margin-bottom:8px}
.faq__item p{color:var(--muted)}
.cta__box{display:grid;gap:16px;justify-items:center;text-align:center;max-width:720px;margin-inline:auto}
.cta--card .cta__box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px}
.cta__box h2{font-size:28px}
.sec.cta--band{background:var(--primary);color:var(--on-primary)}
.ft{background:#4C381F;color:var(--bg);padding-block:32px}
.ft__in{display:grid;gap:8px}
.ft__brand{font-family:var(--font-h);font-weight:700;font-size:20px}
.ft__practice{font-size:16px;padding-top:8px;margin-top:4px;border-top:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.cta--split .cta__box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px 24px}
.card-shadow :is(.card,.problem,.step,.pricing__row,.faq__item,.cta--card .cta__box,.cta--split .cta__box){border-color:transparent;box-shadow:0 8px 24px rgba(20,30,50,.09)}
.card-flat :is(.card,.problem,.step,.pricing__row,.faq__item,.cta--card .cta__box,.cta--split .cta__box){border-color:transparent}
.card-hard :is(.card,.problem,.step,.pricing__row,.faq__item,.cta--card .cta__box,.cta--split .cta__box){border:2px solid var(--border);box-shadow:4px 4px 0 var(--border)}
.card-rule :is(.card,.problem,.step,.pricing__row,.faq__item,.cta--card .cta__box,.cta--split .cta__box){background:transparent;border:0;border-top:2px solid var(--accent2);border-radius:0;padding-inline:0;box-shadow:none}
.title-left .sec__title,.title-left-rule .sec__title{text-align:left}
.title-center-rule .sec__title::after,.title-left-rule .sec__title::after{content:"";display:block;width:48px;height:3px;background:var(--accent2);margin:16px auto 0}
.title-left-rule .sec__title::after{margin-inline:0}
.rhythm-plain main > :where(section):not(.cta--band):not(.hero--overlay):not(.highlights--band):nth-of-type(even){background:transparent}
.rhythm-plain main > :where(section) + :where(section){border-top:1px solid var(--border)}
body .problems--list .problem,body .steps--vertical .step{border:0;border-left:4px solid var(--primary);border-radius:0;box-shadow:none}
/* 見出しの上の番号ラベル（CSSの数え上げ。HTMLは変えない） */
.eyebrow main{counter-reset:sec}
.eyebrow .sec__title::before{counter-increment:sec;content:counter(sec,decimal-leading-zero) " ／ " var(--eb,"");display:block;font-family:var(--font-b);font-size:14px;font-weight:700;letter-spacing:.18em;color:var(--muted);margin-bottom:12px}
.eyebrow .problems{--eb:"お悩み"}
.eyebrow .features{--eb:"特徴"}
.eyebrow .showcase{--eb:"こだわり"}
.eyebrow .message{--eb:"想い"}
.eyebrow .gallery{--eb:"写真"}
.eyebrow .steps{--eb:"流れ"}
.eyebrow .info{--eb:"概要"}
.eyebrow .pricing{--eb:"料金"}
.eyebrow .faq{--eb:"質問"}
/* セクションの形 */
.shape-slant main > :where(section):nth-of-type(even):not(:where(.highlights--cols,.highlights--mark)):not(.hero--overlay):not(.cta--band){clip-path:polygon(0 0,100% 24px,100% calc(100% - 24px),0 100%);padding-block:64px}
.shape-round main > :where(section):nth-of-type(even):not(:where(.highlights--cols,.highlights--mark)):not(.hero--overlay):not(.cta--band){border-radius:40px;margin-inline:12px}
/* 写真つきの特徴（showcase） */
.show__list{display:grid;gap:40px}
.show__item{display:grid;gap:16px}
.show__pic{overflow:hidden;border-radius:var(--radius)}
.show__img{width:100%;object-fit:cover;display:block}
.show__txt{display:grid;gap:8px;align-content:center}
.show__txt h3{font-size:22px}
.show__txt p{color:var(--muted)}
.show__no{font-family:var(--font-h);font-size:32px;line-height:1;color:var(--primary)}
.showcase--tiles .show__list{gap:24px}
.showcase--tiles .show__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;gap:0}
.showcase--tiles .show__pic{border-radius:0}
.showcase--tiles .show__txt{padding:24px}
/* 想い（message） */
.message__in{display:grid;gap:24px;max-width:860px;margin-inline:auto}
.message--statement .message__in{text-align:center;justify-items:center}
.message--statement .sec__title{margin-bottom:0}
.message__body{font-family:var(--font-h);font-size:20px;line-height:2;font-weight:var(--h-weight)}
.message--side .sec__title{margin-bottom:0;text-align:left}
/* 申し込みへの導線（途中のボタン、スマホの追従ボタン） */
.cta-inline{padding:8px 16px 56px}
.cta-inline__box{max-width:960px;margin-inline:auto;display:grid;gap:16px;justify-items:start;text-align:left}
.cta-inline__lead{font-family:var(--font-h);font-weight:var(--h-weight);letter-spacing:var(--h-track);font-size:22px;line-height:1.5}
.btn--lg{min-height:56px;padding:0 40px;font-size:18px}
.cta-inline--solo .cta-inline__box{justify-items:center}
/* 線の形: 箱にせず、上下の線ではさむ。見出しのような大きな文字 */
.cta-inline--rule{padding:16px 16px 64px}
.cta-inline--rule .cta-inline__box{border-block:1px solid var(--text);padding:32px 0}
.cta-inline--rule .cta-inline__lead{font-size:clamp(22px,5.6vw,32px)}
/* 面の形: 画面の幅いっぱいの、メインカラーの帯。ボタンは、色を反転する */
.cta-inline--band{padding:0 0 64px}
.cta-inline--band .cta-inline__box{max-width:none;background:var(--primary);color:var(--on-primary);padding:36px 16px;justify-items:center;text-align:center}
.cta-inline--band .btn{background:var(--on-primary);color:var(--primary);border-color:var(--on-primary)}
/* 料金の形: 料金の欄にある、実際のプラン名と金額を、そのまま出す */
.cta-inline--price .cta-inline__box{background:var(--surface);border:2px solid var(--primary);border-radius:var(--radius);padding:28px 24px;justify-items:center;text-align:center}
.cta-inline__plan{display:grid;gap:4px;justify-items:center}
.cta-inline__plan-name{font-size:14px;letter-spacing:.08em;color:var(--muted)}
.cta-inline__plan-price{font-family:var(--font-h);font-weight:var(--h-weight);font-size:clamp(34px,9vw,48px);line-height:1.1;color:var(--primary)}
.sticky-cta{display:none}
@media (max-width:767px){
.sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(0,0,0,.1)}
.sticky-cta .btn{display:flex;width:100%}
.has-sticky .ft{padding-bottom:96px}
}
/* 画面には出さない見出し（スクリーンリーダー用） */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 強調の帯（highlights） */
.sec.highlights{padding-block:32px}
.hl__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px 16px;text-align:center}
.hl__fig{display:block;font-family:var(--font-h);font-weight:var(--h-weight);font-size:clamp(22px,4.6vw,28px);line-height:1.2;letter-spacing:var(--h-track);overflow-wrap:anywhere}
.hl__cap{display:block;margin-top:4px;font-size:15px}
.sec.highlights--band{background:var(--accent);color:var(--text)}
.highlights--band .hl__fig{color:var(--primary)}
.highlights--band .hl__cap{color:var(--muted)}
.highlights--line .hl__list{border-block:1px solid var(--text);padding-block:24px}
.highlights--line .hl__fig{color:var(--primary)}
.highlights--line .hl__cap{color:var(--muted)}
/* 塗りのない形（cols: 縦線で区切る / mark: 上に太い線）。数字を大きくして、説明は小さく */
.sec.highlights--cols,.sec.highlights--mark{padding-block:48px}
.highlights--cols .hl__list,.highlights--mark .hl__list{gap:0}
.highlights--cols .hl__fig,.highlights--mark .hl__fig{font-size:clamp(32px,8vw,48px);color:var(--primary)}
.highlights--cols .hl__cap,.highlights--mark .hl__cap{margin-top:8px;font-size:14px;letter-spacing:.08em;color:var(--muted)}
.highlights--cols .hl__list{grid-template-columns:repeat(2,1fr)}
.highlights--cols .hl__item{padding:20px 12px;border-top:1px solid var(--border)}
.highlights--cols .hl__item:nth-child(-n+2){border-top:0}
.highlights--cols .hl__item:last-child:nth-child(odd){grid-column:1/-1}
.highlights--mark .hl__list{grid-template-columns:repeat(2,1fr);gap:32px 24px;text-align:left}
.highlights--mark .hl__item{border-top:4px solid var(--primary);padding-top:16px}
/* 特徴のアイコン形（icons） */
.card__ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:var(--primary);color:var(--on-primary)}
.features--icons .card{grid-template-columns:1fr}
/* 概要（info） */
.info__list{display:grid;max-width:800px;margin:0 auto}
.info__row{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 8px;border-bottom:1px solid var(--border)}
.info__row dt{font-weight:700;color:var(--text)}
.info__row dd{margin:0;color:var(--muted)}
.info--grid .info__list{max-width:none;gap:12px}
.info--grid .info__row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px}
/* 節ごとに、見出しの置き方を変える（titleMix）: 3つに1つは左そろえ、3つに1つは、飾りの線なし */
.title-mix main > section:nth-of-type(3n+2) .sec__title{text-align:left}
.title-mix main > section:nth-of-type(3n+2) .sec__title::after{margin-inline:0}
.title-mix main > section:nth-of-type(3n) .sec__title::after{display:none}
/* ロゴ（ヘッダー） */
.hd__logo{height:36px;width:auto;max-width:180px;object-fit:contain}
/* 質問: 罫線だけの一覧（lines） */
body[class] .faq--lines .faq__item{background:transparent;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;padding:20px 0}
body[class] .faq--lines .faq__item:last-child{border-bottom:1px solid var(--border)}
/* 流れ: 大きな数字の一覧（big） */
.steps--big .steps__list{gap:32px}
body[class] .steps--big .step{background:transparent;border:0;border-top:2px solid var(--text);border-radius:0;box-shadow:none;padding:20px 0 0}
.steps--big .step__no{font-size:44px;line-height:1;color:var(--primary);letter-spacing:.02em}
.steps--big .step h3{font-size:22px}
.hero--stack .hero__txt{max-width:820px}
.hero--stack h1{font-size:34px}
.features--list .features__list{gap:0}
body[class] .features--list .card{background:transparent;border:0;border-top:1px solid var(--text);border-radius:0;box-shadow:none;padding:24px 0;grid-template-columns:auto 1fr;column-gap:24px;row-gap:8px;align-items:start}
.features--list .card__no{grid-row:1 / span 2;width:auto;height:auto;background:none;font-size:48px;line-height:1;color:var(--primary);min-width:56px}
.steps--timeline .steps__list{gap:32px}
body[class] .steps--timeline .step{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 0 0 48px;position:relative}
.steps--timeline .step::before{content:"";position:absolute;left:7px;top:20px;bottom:-32px;width:2px;background:var(--border)}
.steps--timeline .step::after{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:999px;background:var(--primary)}
.steps--timeline .step:last-child::before{display:none}
.problems--quote .problems__list{max-width:800px;margin-inline:auto;gap:32px}
body[class] .problems--quote .problem{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 0 0 48px;position:relative}
.problems--quote .problem::before{content:"“";position:absolute;left:0;top:-8px;font-family:var(--font-h);font-size:64px;line-height:1;color:var(--primary)}
.problems--quote .problem p{font-family:var(--font-h);font-size:20px;color:var(--text)}
.gallery--offset .gallery__list{max-width:360px;margin-inline:auto}
@media (min-width:768px){
body{font-size:17px}
.hd__nav{display:flex;gap:8px}
.hd__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;text-decoration:none}
.sec,.features{padding-block:80px}
.sec__title{font-size:32px;margin-bottom:48px}
.hero{padding-block:64px 80px}
.hero__in{grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:40px}
.hero--center .hero__in{grid-template-columns:1fr}
.hero--overlay{min-height:560px;padding:0}
.hero--overlay .hero__in{display:block;padding-block:96px}
.features__list{grid-template-columns:repeat(3,1fr);gap:24px}
.gallery__list{gap:24px}
.gallery--grid .gallery__list,.gallery--captions .gallery__list{grid-template-columns:repeat(3,1fr)}
.gallery--wide .gallery__list{grid-template-columns:1fr 1fr}
.gallery--wide .gallery__item--first{grid-column:1 / -1}
.features--rows .features__list{grid-template-columns:1fr;gap:16px}
.problems--cards .problems__list,.steps--cols .steps__list{grid-template-columns:repeat(3,1fr);gap:24px}
.pricing--cards .pricing__list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.cta__box h2{font-size:32px}
.hero--stack h1{font-size:56px}
.shape-slant main > :where(section):nth-of-type(even):not(:where(.highlights--cols,.highlights--mark)):not(.hero--overlay):not(.cta--band){clip-path:polygon(0 0,100% 48px,100% calc(100% - 48px),0 100%);padding-block:112px}
.shape-round main > :where(section):nth-of-type(even):not(:where(.highlights--cols,.highlights--mark)):not(.hero--overlay):not(.cta--band){border-radius:64px;margin-inline:24px}
.show__list{gap:64px}
.info--table .info__row{grid-template-columns:10em 1fr;gap:8px 24px}
.hl__fig{font-size:clamp(26px,3.6vw,36px)}
.cta-inline--rule .cta-inline__box{grid-template-columns:1fr auto;align-items:center;gap:40px;padding:40px 0}
.cta-inline--band .cta-inline__box{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:40px;padding:44px 24px}
.cta-inline--price .cta-inline__box{grid-template-columns:auto 1fr auto;text-align:left;justify-items:start;align-items:center;gap:32px;padding:28px 40px}
.cta-inline--price .cta-inline__plan{justify-items:start}
.cta-inline--band .cta-inline__lead{font-size:26px}
.steps--big .steps__list{grid-template-columns:repeat(3,1fr);gap:40px}
.hl__cap{font-size:16px}
.highlights--cols .hl__cap,.highlights--mark .hl__cap{font-size:15px}
.highlights--cols .hl__list,.highlights--mark .hl__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.highlights--cols .hl__item{padding:8px 24px;border-top:0;border-left:1px solid var(--border)}
.highlights--cols .hl__item:first-child{border-left:0}
.highlights--cols .hl__item:last-child:nth-child(odd){grid-column:auto}
.highlights--mark .hl__list{gap:0 40px}
.info--grid .info__list{grid-template-columns:repeat(2,1fr)}
.showcase--zigzag .show__item{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.showcase--zigzag .show__item:nth-child(even) .show__pic{order:2}
.showcase--tiles .show__list{grid-template-columns:repeat(3,1fr);gap:24px}
.message__body{font-size:28px}
.message--side .message__in{max-width:none;grid-template-columns:1fr 2fr;gap:64px;align-items:start}
.message--side .message__body{font-size:24px}
.hero--stack .hero__in{grid-template-columns:1fr;gap:48px}
.hero--reverse .hero__img{order:-1}
.features--list .features__list{grid-template-columns:1fr;gap:0}
.steps--timeline .steps__list{grid-template-columns:repeat(3,1fr);gap:32px}
body[class] .steps--timeline .step{padding:40px 0 0 0}
.steps--timeline .step::before{left:0;right:-32px;top:7px;bottom:auto;width:auto;height:2px}
.steps--timeline .step::after{top:0}
.problems--quote .problem p{font-size:24px}
.faq--cols .container{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start}
.faq--cols .sec__title{text-align:left;margin-bottom:0}
.faq--cols .faq__list{max-width:none;margin:0}
.cta--split .cta__box{grid-template-columns:1fr auto;column-gap:48px;text-align:left;justify-items:start;align-items:center;max-width:1000px;padding:40px 48px}
.cta--split .cta__box h2,.cta--split .cta__box p{grid-column:1}
.cta--split .cta__box .btn{grid-column:2;grid-row:1 / span 2}
.gallery--offset .gallery__list{max-width:none;grid-template-columns:repeat(3,1fr)}
.gallery--offset .gallery__item:nth-child(2){margin-top:48px}
}
@media (min-width:1100px){
.hero{padding-block:80px 96px}
.hero--overlay{padding-block:0}
.container{padding-inline:24px}
}
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity 400ms ease,transform 400ms ease,translate 500ms ease,box-shadow 500ms ease,border-color 500ms ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
/* ヒーローの登場（読み込み時に動く。スクロールでは動かさない）: 文字は、上から順に、ふわっと現れる */
@keyframes lp-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.js .hero__txt.reveal{opacity:1;transform:none;transition:none}
.js .hero__txt>*{animation:lp-rise 500ms cubic-bezier(.2,.7,.2,1) both}
.js .hero__txt>:nth-child(2){animation-delay:.12s}
.js .hero__txt>:nth-child(3){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .hero__txt>*,.js .hero__img,.js .hero__pic,.js .hero__bg{animation:none}}
/* ホバー（calm）。動きは、translate（別の指定）で行い、出現の動き（transform）とぶつけない */
.btn{transition:filter 500ms ease}
.show__img{transition:transform 900ms cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.card-outline :is(.card,.problem,.step):hover,.card-hard :is(.card,.problem,.step):hover{border-color:var(--primary)}
.card-shadow :is(.card,.problem,.step):hover{box-shadow:0 12px 30px rgba(20,30,50,.12)}
.card-rule :is(.card,.problem,.step):hover{border-top-color:var(--primary)}
.show__pic:hover .show__img{transform:scale(1.03)}
body[class] :is(.features--list .card,.steps--timeline .step,.steps--big .step,.steps--vertical .step,.problems--list .problem,.problems--quote .problem):hover{translate:none;box-shadow:none}
}

/* 縦書きの見出し（hero--vertical）: 768px以上は、右寄りに縦書き。説明とボタンは、その左に横書き。スマホは、すべて横書き */
.hero--vertical{min-height:min(88vh,740px)}
.hero--vertical .hero__scrim{background:linear-gradient(to left,rgba(12,14,20,.7),rgba(12,14,20,.3) 70%)}
.hero--vertical .hero__side{display:grid;gap:20px;justify-items:start;margin-top:20px}
@media (min-width:768px){
.hero--overlay.hero--vertical .hero__in{display:flex;justify-content:flex-end;align-items:center;min-height:min(88vh,740px);padding-block:72px}
.hero--vertical .hero__txt{max-width:none;display:flex;flex-direction:row;align-items:flex-start;gap:48px}
.hero--vertical h1{order:2;writing-mode:vertical-rl;font-size:clamp(32px,3.6vw,48px);line-height:1.5;letter-spacing:.18em;max-height:min(66vh,460px);font-weight:600}
.hero--vertical .hero__side{order:1;max-width:280px;padding-top:12px;margin-top:0}
}
/* 屋号を大きく（hero--brand）: 全面写真の中央に、屋号。見出しは、その下に、小さく */
.hero--brand{min-height:min(90vh,780px)}
.hero--brand .hero__scrim{background:rgba(14,14,18,.44)}
.hero--brand .hero__in{display:flex;justify-content:center;text-align:center}
.hero--brand .hero__txt{max-width:none;width:100%;display:grid;justify-items:center}
.hero--brand .hero__brand{margin:0 0 20px;font-family:var(--font-h);font-weight:400;letter-spacing:.22em;line-height:1.1;white-space:nowrap;color:#fff;padding-left:.22em;font-size:min(96px,calc(84vw / (var(--em,8) * 1.6)))}
.hero--overlay.hero--brand h1{font-size:clamp(17px,2.2vw,22px);font-weight:500;letter-spacing:.12em;line-height:1.8;margin:0 0 12px}
.hero--brand .hero__sub{max-width:34em}
/* 案内カード（hero--cards）: 全面写真の下辺に、このページの節への、カード */
.hero--cards{min-height:min(90vh,780px)}
.hero--cards .hero__scrim{background:linear-gradient(to top,rgba(20,15,12,.62),rgba(20,15,12,.18) 64%)}
.hero--overlay.hero--cards .hero__in{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:32px;padding-block:72px 28px;min-height:min(90vh,780px)}
.hero__cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.hero__card{display:flex;align-items:center;gap:14px;min-height:56px;padding:14px 18px;background:var(--surface);color:var(--text);border-radius:var(--radius);text-decoration:none;font-weight:700;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.22);transition:translate .25s ease}
.hero__card b{font-family:var(--font-h);font-size:22px;line-height:1;color:var(--primary)}
.hero__card span{flex:1}
.hero__card::after{content:"→" / "";color:var(--primary)}
.hero__card:hover{translate:0 -3px}
.hero__card:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* 見出しの一部に、マーカー（theme.headlineMark）。全面写真のヒーローは、下線（白い文字の下に、色の面を敷くと、読みにくい） */
.hero__em{background:linear-gradient(transparent 62%,var(--accent2) 62%,var(--accent2) 92%,transparent 92%);padding-inline:.06em}
.hero--overlay:not(.hero--card) .hero__em{background:none;text-decoration:underline;text-decoration-color:var(--accent2);text-decoration-thickness:.12em;text-underline-offset:.22em}
/* 屋号の導入（message--wordmark） */
.message--wordmark .message__in{display:grid;justify-items:center;text-align:center}
.message--wordmark .message__mark{margin:0 0 40px;font-family:var(--font-h);font-weight:400;letter-spacing:.2em;line-height:1.15;white-space:nowrap;color:var(--text);padding-left:.2em;font-size:min(88px,calc(80vw / (var(--em,8) * 1.6)))}
.message--wordmark .message__body{max-width:36em}
/* 左端の屋号（theme.sideBrand）: 1280px以上。地の色の、細い縦のラベル（写真の上でも、読める） */
.side-brand{display:none}
@media (min-width:1280px){
.side-brand{display:block;position:fixed;left:20px;top:50%;translate:0 -50%;z-index:20;pointer-events:none;background:var(--bg);color:var(--text);padding:18px 9px;border-radius:999px;box-shadow:0 2px 12px rgba(0,0,0,.14);opacity:.94}
.side-brand span{display:block;writing-mode:vertical-rl;font-family:var(--font-h);letter-spacing:.34em;font-size:15px;white-space:nowrap}
}
/* ヘッダーの受付時間・丸い予約ボタンの電話 */
.hd__hours{margin-left:10px;font-family:var(--font-b);font-weight:500;font-size:11px;letter-spacing:.06em;color:var(--muted)}
.round-cta.round-cta--tel{width:60px;height:60px;right:32px;bottom:124px;padding:6px;background:var(--text);color:var(--bg);font-size:12px;letter-spacing:.06em}
/* 大きな写真に、文章のカードが重なる（showcase--overlap） */
.showcase--overlap .show__list{gap:48px}
.showcase--overlap .show__item{display:block}
.showcase--overlap .show__no{display:none}
.showcase--overlap .show__txt{position:relative;z-index:2;margin:-36px 16px 0;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.12)}
.photo-circle .showcase--overlap .show__pic{max-width:420px;margin-inline:auto}
@media (min-width:768px){
.showcase--overlap .show__list{gap:88px}
.showcase--overlap .show__item{display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.showcase--overlap .show__pic{grid-column:1 / 9;grid-row:1}
.showcase--overlap .show__txt{grid-column:7 / 13;grid-row:1;margin:0;padding:32px;align-self:end;translate:0 32px}
.showcase--overlap .show__item:nth-child(even) .show__pic{grid-column:5 / 13;order:0}
.showcase--overlap .show__item:nth-child(even) .show__txt{grid-column:1 / 7}
}
/* 写真の並び: 左に縦長の大きな1枚（gallery--mosaic）、横に流れる帯（gallery--strip） */
@media (min-width:768px){
.gallery--mosaic .gallery__list{grid-template-columns:1fr 1fr}
.gallery--mosaic .gallery__item--first{grid-row:span 2}
.gallery--mosaic .gallery__item--first .gallery__pic{height:100%;width:100%;aspect-ratio:auto!important;object-fit:cover}
}
.gallery--strip .gallery__list{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.gallery--strip .gallery__item{flex:0 0 auto;scroll-snap-align:start}
.gallery--strip .gallery__pic{height:clamp(200px,20vw,260px);width:auto;max-width:none}
.gallery--strip .gallery__list:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
/* 全面写真＋枠つきの白いカード（hero--card）: 文字は、カードの上。写真に、暗い膜をかけない */
.hero--card{min-height:min(84vh,700px);align-items:flex-end}
.hero--card .hero__scrim{background:rgba(20,15,12,.06)}
.hero--card .hero__in{padding-block:40px}
.hero--card .hero__txt{max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:0 14px 44px rgba(0,0,0,.22)}
.hero--overlay.hero--card h1{color:var(--text);font-size:clamp(26px,4.2vw,40px)}
.hero--overlay.hero--card .hero__sub{color:var(--muted)}
.hero--overlay.hero--card .btn{background:var(--primary);color:var(--on-primary)}
/* 写真を右に寄せ、見出しのカードが、写真の縁に重なる（hero--offset） */
.hero--offset .hero__in{gap:0;padding-bottom:24px}
.hero--offset .hero__img{order:-1}
.hero--offset .hero__txt{position:relative;z-index:2;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin:-40px 12px 0;box-shadow:0 12px 36px rgba(0,0,0,.12)}
/* 写真の左上に、大きな番号（showcase--numbered） */
.showcase--numbered .show__item{position:relative}
.showcase--numbered .show__no{position:absolute;left:-8px;top:-14px;z-index:2;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:24px;letter-spacing:.04em}
/* 写真の下に、縦の罫線と一言（gallery--captions） */
.gallery--captions .gallery__item{display:grid;gap:12px;align-content:start}
.figure__in{margin:0 auto;max-width:960px}
.figure__pic{display:block;width:100%;height:auto;object-fit:contain;border-radius:0}
.figure__cap{margin-top:12px;font-size:14px;line-height:1.6;color:var(--muted);text-align:right}
.gallery--captions .gallery__cap{border-left:2px solid var(--accent2);padding-left:12px;font-size:15px;line-height:1.6;color:var(--muted)}
/* 見出しの下の、手描き風の波線（theme.marker） */
.marker .sec__title::after{content:"";display:block;width:132px;height:14px;margin:14px auto 0;border:0;background:var(--marker) center/contain no-repeat}
.marker.title-left .sec__title::after,.marker.title-left-rule .sec__title::after{margin-inline:0}
/* 右下の丸い予約ボタン（theme.roundCta）: スマホ・PC共通。下の追従の帯の代わり */
.round-cta{position:fixed;right:16px;bottom:16px;z-index:40;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;padding:10px;background:var(--primary);color:var(--on-primary);font-weight:700;font-size:13px;line-height:1.35;text-align:center;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.24);transition:translate .25s ease,box-shadow .25s ease}
.round-cta:hover{translate:0 -3px;box-shadow:0 12px 28px rgba(0,0,0,.28)}
.round-cta:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.has-round .ft{padding-bottom:120px}
/* ヘッダーの電話番号（theme.phone）: 1000px以上 */
.hd__tel{display:none;font-family:var(--font-h);font-weight:700;font-size:18px;letter-spacing:.04em;color:var(--text);text-decoration:none;white-space:nowrap}
.hd__tel small{font-size:11px;letter-spacing:.14em;color:var(--muted);margin-right:4px}
/* 円形の写真（theme.photoShape=circle）: 写真は、円の中央で切り取る。ギャラリーの写真は、まわりに葉のリース */
.photo-circle .hero__pic:not(.hero__bg){aspect-ratio:1/1!important;border-radius:50%;width:min(100%,440px);margin-inline:auto}
.photo-circle :is(.show__pic,.gallery__pic){aspect-ratio:1/1!important;border-radius:50%}
.photo-circle .show__img{height:100%;aspect-ratio:1/1!important}
.photo-circle .gallery__list{gap:40px;padding:24px 16px}
.photo-circle .gallery__item{position:relative;max-width:300px;width:100%;margin-inline:auto}
.photo-circle .gallery__item::after{content:"";position:absolute;inset:-7%;background:var(--wreath) center/100% 100% no-repeat;pointer-events:none}
/* 背景の柄（theme.pattern=paws / leaves / beans / stars）: 背景色のないセクションに、透けて見える */
.pat-paws,.pat-leaves,.pat-beans,.pat-stars{background-image:var(--pat);background-size:120px 120px}
/* 全面写真＋左下のキャッチ（hero--caption）: 文字を左下に大きく。下から暗くなる膜 */
.hero--caption{min-height:min(86vh,720px);align-items:flex-end}
.hero--caption .hero__scrim{background:linear-gradient(to top,rgba(20,15,12,.74),rgba(20,15,12,.14) 64%)}
.hero--caption .hero__in{padding-block:48px 56px}
.hero--caption .hero__txt{max-width:860px}
.hero--caption h1{font-size:clamp(32px,6.2vw,66px);line-height:1.25}
.hero--caption .hero__sub{font-size:clamp(16px,1.8vw,19px)}
/* 屋号の巨大な文字を重ねた申込（cta--wordmark）: 帯（cta--band）と同じ色。屋号は、飾り */
.cta--wordmark{position:relative;overflow:hidden;padding-block:80px}
.cta--wordmark .cta__mark{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max-content;font-family:var(--font-h);font-weight:900;font-size:min(180px,calc(90vw / var(--em,8)));line-height:1;white-space:nowrap;color:var(--on-primary);opacity:.13;pointer-events:none;user-select:none}
.cta--wordmark .container{position:relative}
.cta--wordmark .btn{min-height:56px;padding:0 40px;font-size:18px}
/* 丸いラベルの悩み（problems--pills）: チェックの印つき */
.problems--pills .problems__list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin-inline:auto}
body[class] .problems--pills .problem{display:flex;align-items:center;gap:12px;max-width:100%;padding:12px 24px 12px 14px;border-radius:32px;background:var(--surface);border:1px solid var(--border);text-align:left}
.problems--pills .problem::before{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat}
.problems--pills .problem p{font-size:16px}
/* 写真バナー（showcase--bands）: 全幅の写真を縦に積む。タイトルは、写真の中央に、暗い半透明の板をしいて重ねる（写真が真っ白でも、白い文字が、読める）。説明は、下に短く */
.showcase--bands .container{max-width:none;padding-inline:0}
.showcase--bands .sec__title{padding-inline:16px}
.showcase--bands .show__list{gap:6px}
.showcase--bands .show__item{display:grid;grid-template-columns:1fr;gap:0}
.showcase--bands .show__txt{display:contents}
.showcase--bands .show__pic{grid-area:1/1;position:relative;border-radius:0}
.showcase--bands .show__pic::after{content:"";position:absolute;inset:0;background:rgba(20,18,16,.16)}
.showcase--bands .show__img{aspect-ratio:3/2!important;width:100%;height:100%;object-fit:cover}
.showcase--bands .show__no{display:none}
.showcase--bands .show__txt h3{grid-area:1/1;z-index:1;align-self:center;justify-self:center;text-align:center;color:#fff;font-size:clamp(22px,4.6vw,36px);letter-spacing:.14em;background:rgba(20,18,16,.52);padding:10px 32px;border-radius:var(--radius);max-width:calc(100% - 32px)}
.showcase--bands .show__txt p{grid-row:2;grid-column:1;max-width:640px;margin:16px auto 24px;padding-inline:16px;text-align:center;font-size:16px}
/* 吹き出し（problems--bubbles）: しっぽは、四角を45度回して作る（どの背景の上でも、枠と塗りが、つながる） */
.problems--bubbles .problems__list{gap:28px;max-width:760px;margin-inline:auto}
.problems--bubbles .problem{width:88%}
.problems--bubbles .problem:nth-child(even){margin-left:auto}
body[class] .problems--bubbles .problem{position:relative;background:var(--surface);border:2px solid var(--accent2);border-radius:22px;padding:20px 24px;box-shadow:none}
.problems--bubbles .problem::after{content:"";position:absolute;left:36px;bottom:-10px;width:16px;height:16px;background:var(--surface);border-right:2px solid var(--accent2);border-bottom:2px solid var(--accent2);transform:rotate(45deg)}
.problems--bubbles .problem:nth-child(even)::after{left:auto;right:36px}
/* 右端の予約タブ（theme.sideTab）: PC幅（1100px以上）で、右端に、縦のタブを固定する。スマホは、下の追従ボタン */
.side-tabs{display:none}
/* ヘッダー: ボタンは、折り返さない（「申し／込む」と、単語の途中で切れる）。屋号は、狭い幅で、少し小さくして、文節で折り返す */
.hd .btn{white-space:nowrap;padding:0 16px;font-size:14px}
.hd__brand{min-width:0;font-size:clamp(16px,4.6vw,20px);line-height:1.3}
@media (min-width:768px){.hd .btn{padding:0 24px;font-size:16px}}
/* 円の形（highlights--circle）: 各項目を、円に入れる。1つ目だけ、メインカラーで塗る */
.sec.highlights--circle{padding-block:48px}
.highlights--circle .hl__list{grid-template-columns:repeat(2,1fr);gap:16px}
.highlights--circle .hl__item{width:100%;max-width:220px;margin-inline:auto;aspect-ratio:1;border:2px solid var(--primary);border-radius:50%;display:grid;align-content:center;justify-items:center;padding:12px;text-align:center}
.highlights--circle .hl__item:first-child{background:var(--primary)}
.highlights--circle .hl__fig{font-size:clamp(20px,5.4vw,30px);color:var(--primary)}
.highlights--circle .hl__cap{margin-top:4px;font-size:14px;color:var(--muted)}
.highlights--circle .hl__item:first-child :is(.hl__fig,.hl__cap){color:var(--on-primary)}
/* 積み重なる特徴（features--stack）: 枠はグラデーション。PCでは、左に見出しを固定して、右のカードが、スクロールに合わせて積み重なる */
body[class] .features--stack .card{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--primary),var(--accent2)) border-box;border:2px solid transparent;border-radius:var(--radius);box-shadow:0 10px 28px rgba(20,30,50,.08);padding:28px}
.features--stack .card__no{width:auto;height:auto;background:none;font-size:44px;line-height:1;color:var(--primary);min-width:0;justify-self:start}
.features--stack .features__list{grid-template-columns:1fr;gap:20px}
/* コラージュの写真（gallery--collage）: 3枚を、少し傾けて、重ねる。縁は、白い額縁 */
.gallery--collage{overflow:hidden}
.gallery--collage .gallery__list{gap:0;padding-block:8px 24px}
.gallery--collage .gallery__item{position:relative;width:84%}
.gallery--collage .gallery__item:nth-child(1){rotate:-2.5deg}
.gallery--collage .gallery__item:nth-child(2){rotate:2deg;margin:-20px 4% 0 auto;width:78%}
.gallery--collage .gallery__item:nth-child(3){rotate:-1.5deg;margin-top:-20px;width:70%}
.gallery--collage .gallery__pic{border:8px solid var(--surface);border-radius:2px;background:var(--surface);box-shadow:0 12px 32px rgba(0,0,0,.18)}
/* 写真の形（theme.photoShape）: blob=しずく形、arch=アーチ */
.photo-blob :is(.hero__pic:not(.hero__bg),.show__pic,.gallery:not(.gallery--collage) .gallery__pic){border-radius:58% 42% 55% 45% / 48% 58% 42% 52%}
.photo-blob .gallery:not(.gallery--collage) .gallery__item:nth-child(2) .gallery__pic,.photo-blob .show__item:nth-child(even) .show__pic{border-radius:42% 58% 45% 55% / 55% 45% 58% 42%}
.photo-blob .gallery:not(.gallery--collage) .gallery__item:nth-child(3) .gallery__pic{border-radius:50% 50% 60% 40% / 45% 55% 45% 55%}
.photo-arch :is(.hero__pic:not(.hero__bg),.show__pic,.gallery:not(.gallery--collage) .gallery__pic){border-radius:999px 999px var(--radius) var(--radius)}
/* 背景のドット柄（theme.dots）: 背景色のないセクションに、透けて見える */
.bg-dots{background-image:radial-gradient(color-mix(in srgb,var(--primary) 16%,transparent) 1.6px,transparent 1.8px);background-size:24px 24px}
/* 巨大な文字の透かし（theme.bigType）: ヒーローの背景に、屋号の最初の1語を、輪郭だけで大きく置く。飾りなので、読み上げない */
.hero[data-bigtype]{position:relative;overflow:hidden;isolation:isolate}
.hero[data-bigtype]::before{content:attr(data-bigtype);content:attr(data-bigtype) / "";position:absolute;left:-1%;bottom:-.14em;z-index:-1;font-family:var(--font-h);font-weight:900;font-size:clamp(96px,24vw,320px);line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--primary) 30%,transparent);pointer-events:none}
@media (min-width:1100px){
.side-tabs{display:flex;flex-direction:column;gap:6px;position:fixed;top:50%;translate:0 -50%;z-index:30}
.side-tabs--right{right:0}
.side-tabs--left{left:0}
.side-tab--tel{background:var(--text)!important;color:var(--bg)!important;padding-block:18px!important}
.side-tabs--left .side-tab{border-radius:0 14px 14px 0!important;box-shadow:2px 2px 12px rgba(0,0,0,.18)!important}
.side-tabs--left .side-tab:hover{padding-left:20px;padding-right:13px}
.side-tab{display:block;writing-mode:vertical-rl;text-orientation:mixed;background:var(--primary);color:var(--on-primary);font-weight:700;letter-spacing:.24em;padding:22px 13px;border-radius:14px 0 0 14px;text-decoration:none;box-shadow:-2px 2px 12px rgba(0,0,0,.18);transition:padding .25s ease,filter .2s ease}
.side-tab:hover{padding-right:20px;filter:brightness(.92)}
.side-tab:focus-visible{outline:3px solid var(--text);outline-offset:-3px}
}
@media (min-width:1000px){
.hd__tel{display:inline-flex;align-items:baseline;margin-left:auto;margin-right:16px}
}
@media (min-width:768px){
.hero--offset .hero__in{display:grid;grid-template-columns:repeat(12,1fr);align-items:end;padding-bottom:56px}
.hero--offset .hero__img{order:0;grid-column:5/13;grid-row:1}
.hero--offset .hero__txt{grid-column:1/7;grid-row:1;margin:0 0 -56px;padding:40px}
.showcase--numbered .show__item{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.showcase--numbered .show__no{left:-14px;top:-18px;width:76px;height:76px;font-size:28px}
/* 縦書きの中の半角数字（escTate）。横書きのときは、効かない */
.upr{text-orientation:upright;font-variant-east-asian:full-width;letter-spacing:.08em}
/* 縦書き（message--vertical）: PC幅のみ。見出しが右、本文が左（縦書きは、右から読む） */
.message--vertical .message__in{display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;gap:56px;max-width:none}
.message--vertical .sec__title{writing-mode:vertical-rl;text-orientation:mixed;margin:0;font-size:22px;letter-spacing:.3em;text-align:left}
.message--vertical .sec__title::before,.message--vertical .sec__title::after{display:none}
.message--vertical .message__body{writing-mode:vertical-rl;text-orientation:mixed;height:min(60vh,420px);max-width:none;font-size:19px;line-height:2.3;letter-spacing:.08em;text-align:left}
.showcase--bands .show__img{aspect-ratio:16/6!important}
.highlights--circle .hl__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;gap:32px}
.highlights--circle .hl__fig{font-size:clamp(26px,3vw,40px)}
.highlights--circle .hl__cap{font-size:15px}
.gallery--collage .gallery__list{grid-template-columns:repeat(12,1fr);align-items:start;padding-block:24px 56px}
.gallery--collage .gallery__item{width:auto;margin:0}
.gallery--collage .gallery__item:nth-child(1){grid-column:1/7;grid-row:1;rotate:-3deg}
.gallery--collage .gallery__item:nth-child(2){grid-column:5/9;grid-row:1;margin-top:96px;rotate:2.5deg;z-index:2}
.gallery--collage .gallery__item:nth-child(3){grid-column:8/13;grid-row:1;margin-top:24px;rotate:-2deg;z-index:1}
}
@media (min-width:900px){
.features--stack .container{display:grid;grid-template-columns:5fr 7fr;column-gap:64px;align-items:start}
.features--stack .sec__title{position:sticky;top:112px;text-align:left;margin-bottom:0}
.features--stack .sec__title::after{margin-inline:0}
.features--stack .features__list{grid-template-columns:1fr;gap:24px}
.features--stack .card{position:sticky;top:112px;min-height:240px;align-content:center}
.features--stack .card:nth-child(2){top:136px}
.features--stack .card:nth-child(3){top:160px}
}
/* ---- HP ---- */
/* ヘッダー（hd--site）: 上に固定。スマホはハンバーガー（三本線 → ×、幕が上から下りる、項目が順に出る。L-W-04） */
.hd--site{position:sticky;top:0;z-index:60}
.hd--site .hd__cta{margin-left:auto}
.hd__nav a[aria-current]{color:var(--primary);text-decoration:underline;text-underline-offset:.5em;text-decoration-thickness:1px}
.hd__burger{display:inline-grid;align-content:center;justify-items:center;gap:6px;width:44px;height:44px;margin-right:-8px;padding:0;background:none;border:0;color:var(--text);cursor:pointer;flex:none}
.hd__burger span{display:block;width:22px;height:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.hd__burger:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.menu-open .hd__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-open .hd__burger span:nth-child(2){opacity:0}
.menu-open .hd__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.hd__menu{position:fixed;left:0;right:0;top:var(--hd-h,65px);bottom:0;z-index:59;overflow:auto;background:var(--bg);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s cubic-bezier(.7,0,.2,1),visibility 0s linear .45s}
.menu-open .hd__menu{clip-path:inset(0);visibility:visible;transition:clip-path .45s cubic-bezier(.7,0,.2,1),visibility 0s}
.hd__menu ul{padding-block:16px 48px}
/* 項目は、開いたときだけ順に現れる（閉じているあいだは、幕の外。透明にはしない） */
@keyframes hd-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.menu-open .hd__menu li{animation:hd-in .3s ease both;animation-delay:calc(.18s + var(--i) * .06s)}
.hd__menu li a:not(.btn){display:block;padding:18px 0;border-bottom:1px solid var(--border);font-family:var(--font-h);font-size:20px;letter-spacing:.08em;text-decoration:none}
.hd__menu li a[aria-current]{color:var(--primary)}
.hd__menu .btn{display:flex;margin-top:32px}
body.menu-open{overflow:hidden}
@media (max-width:767px){.hd--site .hd__cta{display:none}}
@media (min-width:768px){.hd__burger,.hd__menu{display:none}}
@media (prefers-reduced-motion:reduce){.hd__menu,.hd__burger span{transition:none!important}.menu-open .hd__menu li{animation:none}}
/* 下層ページの見出し（hero--page）: 低い写真の帯 */
.hero--page{min-height:min(42vh,360px);align-items:flex-end}
.hero--page .hero__scrim{background:linear-gradient(to top,rgba(20,15,12,.66),rgba(20,15,12,.2) 70%)}
.hero--page .hero__in{padding-block:48px 40px}
.hero--page .hero__txt{gap:12px}
.hero--overlay.hero--page h1{font-size:clamp(28px,4.4vw,42px);letter-spacing:.12em}
/* 線だけのボタン */
.btn--line{background:transparent;color:var(--text);border:1px solid currentColor}
.btn--lg{min-height:56px;padding:0 40px}
/* 施工事例 */
.works__note,.voice__note{color:var(--muted);text-align:center;margin:-16px 0 32px}
.voice__note{margin:24px 0 0}
.works__list{display:grid;gap:32px}
.works__img{width:100%;object-fit:cover;border-radius:var(--radius)}
.works__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.works__tags span{font-size:13px;letter-spacing:.06em;padding:2px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:var(--surface)}
.works__meta{color:var(--muted);margin-top:6px}
.works__more{text-align:center;margin-top:40px}
.works--cards .works__link{display:grid;gap:16px;text-decoration:none;color:inherit}
.works--cards .works__pic{overflow:hidden;border-radius:var(--radius)}
.works--cards .works__img{transition:transform .6s ease}
.works--cards .works__link:hover .works__img{transform:scale(1.03)}
.works--cards h3{font-size:19px;line-height:1.5}
.works--cards .works__link:focus-visible{outline:3px solid var(--primary);outline-offset:6px}
.works--detail .works__list{gap:64px}
.works--detail .works__item{display:grid;gap:24px;scroll-margin-top:96px}
.works--detail h3{font-size:22px;margin-bottom:16px}
.works__spec{display:grid;gap:4px;margin:0 0 16px}
.works__spec div{display:flex;gap:16px}
.works__spec dt{flex:none;width:3em;color:var(--muted)}
.works__spec dd{margin:0}
.works__point{padding-top:16px;border-top:1px solid var(--border)}
.works__voice{margin:24px 0 0;padding:0 0 0 20px;border-left:2px solid var(--accent2)}
.works__voice p{font-family:var(--font-h);line-height:1.9}
.works__voice footer{margin-top:8px;font-size:13px;color:var(--muted)}
@media (min-width:768px){
.works--cards .works__list{grid-template-columns:repeat(3,1fr);gap:32px}
.works--detail .works__item{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.works--detail .works__item:nth-child(even) .works__pic{order:2}
}
/* お客様の声（箱にしない。大きなかぎかっこ） */
.voice__list{display:grid;gap:40px;max-width:760px;margin-inline:auto}
.voice__item blockquote{margin:0;position:relative;padding-top:40px}
.voice__item blockquote::before{content:"“";position:absolute;left:-4px;top:-28px;font-family:var(--font-h);font-size:96px;line-height:1;color:var(--accent2)}
.voice__item p{font-family:var(--font-h);font-size:clamp(18px,2.2vw,22px);line-height:2}
.voice__item footer{margin-top:16px;text-align:right;font-size:14px;color:var(--muted)}
/* アクセス（イラストの地図） */
.access__in{display:grid;gap:32px}
.access__map{margin:0}
.access__pic{width:100%;border-radius:var(--radius);object-fit:contain;background:var(--surface)}
.access__list{margin:0}
.access__list div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--border)}
.access__list div:first-child{border-top:1px solid var(--border)}
.access__list dt{font-size:14px;color:var(--muted)}
.access__list dd{margin:0}
@media (min-width:768px){
.access__in{grid-template-columns:3fr 2fr;gap:56px;align-items:center}
.access__list div{grid-template-columns:7em 1fr;gap:16px}
}
/* お問い合わせフォーム（送らない）: 罫線だけの入力欄 */
.form__lead{text-align:center;max-width:36em;margin:-8px auto 40px;color:var(--muted)}
.form__box{display:grid;gap:24px;max-width:640px;margin-inline:auto}
.form__row{display:grid;gap:8px}
.form__row label{font-weight:700;font-size:15px}
.form__req{margin-left:8px;font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--primary);color:var(--on-primary);vertical-align:2px}
.form__row :is(input,select,textarea){width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;min-height:48px}
.form__row :is(input,select,textarea):focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.form__send{text-align:center;margin-top:8px}
.form__note{text-align:center;color:var(--muted)}
.form__msg:not(:empty){text-align:center;padding:12px;border:1px solid var(--primary);border-radius:var(--radius);color:var(--text)}
.form__alt{max-width:640px;margin:40px auto 0;padding-top:32px;border-top:1px solid var(--border);display:grid;gap:16px;justify-items:center;text-align:center;color:var(--muted)}
.form__line{cursor:pointer;font:inherit;font-weight:700}

.demo-toast{position:fixed;left:16px;right:16px;bottom:96px;margin-inline:auto;width:fit-content;z-index:300;background:rgba(20,20,20,.92);color:#fff;font-size:15px;line-height:1.6;padding:12px 20px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.25);text-align:center}
img[data-slot]:not([data-placeholder]):not(.hd__logo):not(.figure__pic):not(.access__pic){filter:url(#lp-grade)}