/* 明朝は 2 本：トップの字（subset）と、下層で増える字（sub2）。その本に字がある時だけ読むので、トップは subset だけで済む（範囲は 道具/font_subset.py が書く） */
@font-face { font-family: "Shippori Mincho"; src: url("/fonts/ShipporiMincho-sub2.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+21-2B, U+2D-2F, U+3A-40, U+43-44, U+46, U+4B, U+4D-4E, U+51, U+56, U+58-61, U+63-64, U+66, U+68-6B, U+6D-6E, U+70-7E, U+2015, U+2026, U+3000, U+3005, U+3041, U+3043, U+3045-3049, U+304E, U+3050, U+3052, U+3056, U+305A, U+305C, U+305E, U+3062-3063, U+3065, U+306C, U+3071-3077, U+3079-307D, U+307F-3080, U+3085, U+3087, U+308D-308E, U+3090-3091, U+3094-3096, U+30A1-30A3, U+30A5-30A6, U+30A8-30AA, U+30AD-30AE, U+30B0-30B2, U+30B4, U+30B7, U+30BA-30BE, U+30C0, U+30C2, U+30C4-30C6, U+30C8, U+30CB-30D2, U+30D4, U+30D6, U+30D8-30D9, U+30DC-30DD, U+30E1-30EA, U+30ED-30F2, U+30F4-30FA, U+4E08-4E09, U+4E0D, U+4E21, U+4E26, U+4EA4, U+4ECA-4ECB, U+4ED5-4ED6, U+4ED8, U+4EE3, U+4EFB, U+4F01, U+4F11, U+4F1D, U+4F34, U+4F4D-4F4F, U+4F9B, U+4FA1, U+4FC2, U+5024, U+505C, U+5099, U+50CF, U+512A, U+5143, U+5165, U+5168, U+5177, U+518D, U+51FA, U+5207, U+521D, U+5224, U+5229, U+5247, U+524A, U+524D, U+5272, U+5275, U+52A0, U+52A9, U+52D5, U+52DF, U+5316, U+533A, U+534A, U+5358, U+535A, U+53CD-53CE, U+53D6-53D7, U+53E3, U+53EF, U+53F7, U+5408, U+540D, U+5411, U+542B, U+544A, U+5468, U+5473, U+54C1, U+54E1, U+5546, U+5584, U+55B6, U+56DE, U+56E0, U+56F0, U+56F2-56F3, U+56FD, U+571F, U+5728, U+57FA, U+5834, U+5897, U+5909, U+591C, U+5927, U+592B, U+59CB, U+5B50, U+5B58, U+5B63, U+5B85, U+5B89, U+5B8C, U+5B9A, U+5B9F, U+5BA2, U+5BA4, U+5BB4, U+5BB6, U+5C0E, U+5C11, U+5C4A, U+5DEE, U+5E0C, U+5E2D, U+5E45, U+5E74, U+5E78, U+5E83, U+5EA6-5EA7, U+5F0F, U+5F15, U+5F62, U+5F79, U+5F85, U+5F97, U+5FB4, U+5FD8, U+5FF5, U+6025, U+6027, U+602A, U+60A9, U+60F3, U+610F, U+611F, U+614B, U+6210, U+623B, U+624B, U+6253, U+6255, U+6271, U+627F, U+629E, U+62DB, U+6301, U+63A1-63A2, U+63A8, U+63AA, U+63D0, U+643A, U+64CD, U+6539, U+6559, U+6570, U+6577, U+65AD, U+65B0, U+65BD, U+65CF, U+65E2, U+65E8, U+660E, U+6620, U+6642, U+6697, U+66AE, U+66DC, U+66F4, U+66FF, U+6708-6709, U+671B, U+6728, U+672A-672C, U+6750, U+675F, U+6790, U+679C, U+67A0, U+67D4, U+67FB, U+6848, U+691C, U+6982, U+69CB, U+6A21, U+6B04, U+6B21, U+6B62, U+6BB5, U+6BCE, U+6BD4, U+6C17, U+6CD5, U+6E1B, U+6E96, U+70B9, U+7279, U+72AC, U+72B6, U+7387, U+73FE, U+7523, U+7531, U+7533, U+756A, U+767A-767B, U+7684, U+76BF, U+76CA, U+76EE, U+77E5, U+78BA, U+793A, U+795D, U+7A2E, U+7A93, U+7ACB, U+7B2C, U+7B49, U+7B54, U+7B56, U+7BA1, U+7BC0, U+7BC4, U+7C21, U+7D20, U+7D22, U+7D39, U+7D42, U+7D44, U+7D4C, U+7D61, U+7D66, U+7D99-7D9A, U+7DAD, U+7DCA, U+7DD2, U+7DDA, U+7E3E, U+7E70, U+7F6E, U+7FA9, U+7FCC, U+8003, U+81EA, U+8217, U+82E6, U+8449, U+84C4, U+884C, U+8868, U+88DC, U+8907, U+898F, U+899A, U+89B3, U+89E3, U+8A00, U+8A02, U+8A08, U+8A18, U+8A2D, U+8A31, U+8A3C, U+8A71, U+8A73, U+8A8D, U+8AA4, U+8AAC-8AAD, U+8AB2, U+8ACB, U+8B70, U+8C61, U+8CAB, U+8DB3, U+8EAB, U+8EDF, U+8F09, U+8FBA, U+8FBC, U+8FF7, U+8FFD, U+9001, U+9014, U+9023, U+9031, U+904B, U+9053, U+9055, U+90E8, U+914D, U+91CE-91CF, U+9332, U+9375, U+9577, U+9589, U+95A2, U+9650, U+9664, U+968E, U+969B, U+96C6, U+96EA, U+96FB, U+97FF, U+9805-9806, U+9808, U+984C-984D, U+9854, U+FF01, U+FF05, U+FF0B; }
@font-face { font-family: "Shippori Mincho"; src: url("/fonts/ShipporiMincho-subset.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+20, U+2C, U+30-39, U+41-42, U+45, U+47-4A, U+4C, U+4F-50, U+52-55, U+57, U+62, U+65, U+67, U+6C, U+6F, U+3001-3002, U+300C-300F, U+301C, U+3042, U+3044, U+304A-304D, U+304F, U+3051, U+3053-3055, U+3057-3059, U+305B, U+305D, U+305F-3061, U+3064, U+3066-306B, U+306D-3070, U+3078, U+307E, U+3081-3084, U+3086, U+3088-308C, U+308F, U+3092-3093, U+30A4, U+30A7, U+30AB-30AC, U+30AF, U+30B3, U+30B5-30B6, U+30B8-30B9, U+30BF, U+30C1, U+30C3, U+30C7, U+30C9-30CA, U+30D3, U+30D5, U+30D7, U+30DA-30DB, U+30DE-30E0, U+30EB-30EC, U+30F3, U+30FB-30FC, U+4E00, U+4E0A, U+4E2D, U+4E38, U+4E3B, U+4E88, U+4E8B, U+4EBA, U+4EE5, U+4EF6, U+4F1A, U+4F3A, U+4F55, U+4F59, U+4F5C, U+4F7F, U+4F8B, U+4F9D, U+4FDD, U+4FE1, U+4FEE, U+500B, U+5148, U+516C, U+5171, U+5185-5186, U+5199, U+5206, U+5225, U+5236, U+529B, U+539F, U+53CB, U+540C, U+548C, U+554F, U+559C, U+5730, U+57DF, U+5831, U+58F0, U+5916, U+5951, U+5999, U+5B88, U+5BB9, U+5BFE, U+5C0F, U+5C4B, U+5DDD, U+5DE5, U+5E02, U+5E73, U+5E97, U+5F37, U+5F53, U+5F8C, U+5FC3, U+5FC5, U+5FDC, U+60C5, U+6240, U+6295, U+62C5, U+63A5, U+63F4, U+652F, U+6574, U+6587, U+6599, U+65B9, U+65E5, U+66F8, U+6700, U+671F, U+6761, U+696D, U+6A5F, U+6B63, U+6C7A, U+6D41, U+7121, U+7269, U+7406, U+751F, U+7528, U+753A-753B, U+76F4, U+76F8, U+771F, U+7740, U+77ED, U+793E, U+7A0B, U+7A3F, U+7A4D, U+7AE0, U+7B20, U+7B97, U+7CF8, U+7D04, U+7D50, U+8005, U+80FD, U+8457, U+85E4, U+8981, U+898B, U+89A7, U+8ABF, U+8AC7, U+8CBB, U+8CC7, U+8CEA, U+8D8A, U+8EFD, U+8FD1, U+9032, U+9078, U+91D1, U+91DD, U+958B, U+9593, U+96A3, U+9762, U+983C, U+98DF, U+98F2, U+9AD8, U+9B5A, U+FF08-FF09, U+FF0F, U+FF1A, U+FF1F; }
@font-face { font-family: "Cinzel"; src: url("/fonts/Cinzel-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* フォントが届く前の代わりの書体を、幅と高さが同じになるよう調整する（差し替えのズレを防ぐ） */
@font-face { font-family: "Mincho Fallback Hiragino"; src: local("Hiragino Mincho ProN W3"), local("HiraMinProN-W3"); size-adjust: 100.4%; ascent-override: 115.5%; descent-override: 28.7%; line-gap-override: 0%; }
@font-face { font-family: "Mincho Fallback Yu"; src: local("Yu Mincho Regular"), local("YuMincho-Regular"), local("Yu Mincho"); size-adjust: 101.1%; ascent-override: 114.7%; descent-override: 28.5%; line-gap-override: 0%; }
@font-face { font-family: "Cinzel Fallback"; src: local("Times New Roman"); size-adjust: 102.1%; ascent-override: 95.6%; descent-override: 36.4%; line-gap-override: 0%; }

:root {
  --ink: #1c2421;
  --muted: #55635b;
  --line: #d5dad5;
  --soft: #ffffff;
  --accent: #5c1436;
  --white: #fff;
  --green: #145c3a;
  --green-deep: #0f4a2e;
  --radius: 8px;
  --gutter: 24px;
  --header: 64px;
  --strip: 104px;
  --section-y: 120px;
  --cream: #ffffff;
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --mincho: "Shippori Mincho", "Mincho Fallback Hiragino", "Mincho Fallback Yu", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --latin: "Cinzel", "Cinzel Fallback", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 12px); }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-size: 16px; font-weight: 300; line-height: 2; letter-spacing: 0.06em; overflow-x: clip; counter-reset: eyebrow; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, blockquote { margin: 0; padding: 0; }
.no-break { display: inline-block; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 8px; }

main { overflow-x: clip; }

/* ヘッダー */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--white); border-bottom: 2px solid var(--green); }
.site-header__inner { display: flex; align-items: center; gap: 20px; max-width: 1360px; height: calc(var(--header) - 2px); margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: flex; align-items: baseline; gap: 12px; margin-right: auto; color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand__name { font-family: var(--latin); font-size: 21px; font-weight: 400; letter-spacing: 0.1em; color: var(--green); }
.brand__tag { font-family: var(--mincho); font-size: 14px; }
.desktop-nav { display: none; }
.desktop-nav__list { display: flex; gap: 18px; list-style: none; }
.desktop-nav__link { color: var(--ink); font-family: var(--mincho); font-size: 14px; font-weight: 400; white-space: nowrap; }
.header-contact { display: none; padding: 9px 16px; border-radius: 4px; background: var(--green); color: #fff; font-family: var(--mincho); font-size: 14px; font-weight: 400; white-space: nowrap; }
.menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--green); cursor: pointer; }
.menu-toggle__lines { display: grid; gap: 6px; width: 24px; }
.menu-toggle__line { display: block; height: 2px; background: currentColor; }

/* スマホのメニュー */
.mobile-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.mobile-panel { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 8px var(--gutter) 40px; background: var(--white); overflow-y: auto; visibility: hidden; transform: translateX(-100%); transition: transform 0.3s, visibility 0.3s; }
.menu-open .mobile-backdrop { opacity: 1; pointer-events: auto; }
.menu-open .mobile-panel { visibility: visible; transform: none; }
.mobile-panel__head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 2px solid var(--green); }
.mobile-panel__head strong { color: var(--green); font-size: 21px; }
.mobile-panel__label { font-size: 14px; color: var(--muted); }
.mobile-close { position: relative; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
.mobile-close::before, .mobile-close::after { content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; background: var(--green); }
.mobile-close::before { transform: rotate(45deg); }
.mobile-close::after { transform: rotate(-45deg); }
.mobile-nav ul { list-style: none; margin: 8px 0 24px; }
.mobile-nav li { border-bottom: 1px solid var(--line); }
.mobile-nav__link { display: block; padding: 11px 0; color: var(--ink); font-family: var(--mincho); font-size: 18px; font-weight: 400; }
.mobile-contact { display: block; padding: 14px; border-radius: 4px; background: var(--green); color: #fff; font-size: 17px; font-weight: 600; text-align: center; }
.mobile-tel { display: block; margin-top: 16px; color: var(--ink); text-align: center; }
.mobile-tel-hours { color: var(--muted); font-size: 14px; text-align: center; }

/* ボタン・リンク */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 26px; border: 2px solid var(--green); border-radius: 4px; background: var(--green); color: #fff; font-family: var(--mincho); font-size: 16px; font-weight: 400; letter-spacing: 0.08em; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.button:hover { text-decoration: none; background: var(--green-deep); }
.button--outline { background: transparent; color: var(--green); }
.rule-link { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid var(--green); color: var(--green); font-family: var(--mincho); font-size: 16px; font-weight: 400; }
.rule-link:hover { text-decoration: none; }
.text-link { color: var(--green); font-family: var(--mincho); font-weight: 400; }
.text-link::after { content: "\00a0→"; color: var(--accent); }

/* 共通の節 */
.container, .narrow { position: relative; width: min(100%, 1120px); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--soft { background: var(--soft); }
.section--white { background: var(--white); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; color: var(--accent); font-family: var(--latin); font-size: 14px; font-weight: 400; letter-spacing: 0.14em; white-space: nowrap; counter-increment: eyebrow; }
.eyebrow::before { content: counter(eyebrow, decimal-leading-zero); }
.eyebrow::after { content: ""; flex: 0 0 36px; height: 1px; background: var(--accent); }
.section-title, .why-band h2, .profile-split h2, .works-about__item h2, .v4-about h2, .cta-band h2 { font-family: var(--mincho); font-size: clamp(26px, 3.4vw, 44px); font-weight: 400; line-height: 1.6; letter-spacing: 0.08em; }
.balanced-heading__line { display: block; }
.section-copy, .section-lead { max-width: 720px; margin-top: 22px; color: var(--muted); }

/* 1 最初の画面：左に文字、右に紙面の写真、下に価格の帯 */
.home-hero { background: var(--white); }
.v2-hero-pin { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: calc(100svh - var(--header) - var(--strip)) auto; overflow: hidden; background: var(--white); }
.home-hero__media { grid-column: 1; grid-row: 1; min-height: 0; overflow: hidden; background: #7f9a7a url("data:image/webp;base64,UklGRogAAABXRUJQVlA4IHwAAADQBACdASogABIAPu1oq02ppiQiMAgBMB2JQBbZA2s5BfBl6vs+Mul+POniiHKOAAD8Tyj97E5SC24tujzFGB6v3wAM2fxOrdjMR8SQLbWMDDYLzi3INfvr0o3h9bjjWkqSEIJYDS4LxTO9MaTjrsd0XCnDFsVRfCPREeAA") 50% 40% / cover no-repeat; }
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.home-hero__surface { grid-column: 1; grid-row: 1; z-index: 1; background: linear-gradient(to top, rgba(8, 20, 14, 0.8), rgba(8, 20, 14, 0.62) 38%, rgba(8, 20, 14, 0) 68%); pointer-events: none; }
.home-hero__content, .home-hero__copy { display: contents; }
.v2-hero-text { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 2; padding: 0 var(--gutter) 30px max(var(--gutter), calc((100vw - 1312px) / 2)); color: #fff; }
.home-hero__regions { font-family: var(--latin); font-size: 14px; letter-spacing: 0.14em; }
.home-hero h1 { margin-top: 10px; font-family: var(--mincho); font-size: clamp(16px, 1.4vw, 18px); font-weight: 400; line-height: 1.6; letter-spacing: 0.08em; }
.home-hero__statement { margin-top: 10px; font-family: var(--mincho); font-size: clamp(27px, 3.8vw, 58px); font-weight: 400; line-height: 1.45; letter-spacing: 0.06em; }
.home-hero__statement .no-break { display: block; }
.home-hero__statement wbr { display: none; }
.v2-hero-band { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: calc((var(--strip) - 52px) / 2) max(var(--gutter), calc((100vw - 1312px) / 2)) 36px; background: var(--green); color: #fff; }
.home-hero__price { order: 1; display: flex; align-items: baseline; gap: 12px; margin-right: auto; font-size: 15px; }
.home-hero__price strong { font-family: var(--mincho); font-size: clamp(28px, 3vw, 40px); font-weight: 400; line-height: 1; letter-spacing: 0.04em; }
.home-hero__price small { font-size: 16px; }
.home-hero__actions { order: 2; display: flex; gap: 10px; }
.home-hero__actions .button { border-color: #fff; background: #fff; color: var(--green); }
.home-hero__actions .button--outline { background: transparent; color: #fff; }
.home-hero__lead { order: 3; flex: 0 0 100%; max-width: 900px; font-family: var(--mincho); font-size: clamp(18px, 2vw, 26px); line-height: 1.9; letter-spacing: 0.06em; }
.home-hero__lead:first-of-type { margin-top: 16px; }
.home-hero__lead:last-of-type { font-family: var(--font); font-size: 16px; }
.green-link { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.home-hero .green-link { color: #fff; }

/* 2 お客さまの写真と四季の写真が流れる帯 */
.clients-section { --u: clamp(0.62px, calc(100vw / 1440), 1.15px); overflow: hidden; }
.clients-gallery { height: calc(620 * var(--u)); margin-top: 56px; overflow-x: auto; scrollbar-width: none; }
.clients-gallery.is-flowing { overflow: hidden; }
.clients-gallery::-webkit-scrollbar, .service-list::-webkit-scrollbar, .screen-card-grid::-webkit-scrollbar { display: none; }
.v4-flow { display: flex; width: max-content; }
.v4-set { position: relative; flex: none; width: calc(3780 * var(--u)); height: calc(620 * var(--u)); }
.is-flowing .v4-flow { animation: v4-run 87s linear infinite; will-change: transform; }
.v4-flow.is-offscreen { animation-play-state: paused; }
@keyframes v4-run { to { transform: translate3d(-50%, 0, 0); } }
.clients-gallery__slide { position: absolute; overflow: hidden; border-radius: 4px; background: var(--line); }
.clients-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .v4-s { display: none; }
html:not(.js) img[data-src], html:not(.js) .v2-bento > picture { display: none; }
html:not(.js) .v2-bento noscript { display: contents; }
.v4-c { z-index: 2; width: calc(620 * var(--u)); height: calc(349 * var(--u)); }
.v4-set > :nth-child(1) { left: calc(0 * var(--u)); top: calc(50 * var(--u)); width: calc(280 * var(--u)); height: calc(187 * var(--u)); }
.v4-set > :nth-child(2) { left: calc(190 * var(--u)); top: calc(250 * var(--u)); }
.v4-set > :nth-child(3) { left: calc(520 * var(--u)); top: calc(20 * var(--u)); width: calc(200 * var(--u)); height: calc(133 * var(--u)); }
.v4-set > :nth-child(4) { left: calc(860 * var(--u)); top: calc(60 * var(--u)); width: calc(320 * var(--u)); height: calc(180 * var(--u)); }
.v4-set > :nth-child(5) { left: calc(880 * var(--u)); top: calc(350 * var(--u)); width: calc(260 * var(--u)); height: calc(173 * var(--u)); }
.v4-set > :nth-child(6) { left: calc(1200 * var(--u)); top: calc(170 * var(--u)); }
.v4-set > :nth-child(7) { left: calc(1400 * var(--u)); top: calc(10 * var(--u)); width: calc(220 * var(--u)); height: calc(147 * var(--u)); }
.v4-set > :nth-child(8) { left: calc(1860 * var(--u)); top: calc(330 * var(--u)); width: calc(240 * var(--u)); height: calc(180 * var(--u)); }
.v4-set > :nth-child(9) { left: calc(1880 * var(--u)); top: calc(50 * var(--u)); width: calc(300 * var(--u)); height: calc(214 * var(--u)); }
.v4-set > :nth-child(10) { left: calc(2200 * var(--u)); top: calc(240 * var(--u)); }
.v4-set > :nth-child(11) { left: calc(2370 * var(--u)); top: calc(30 * var(--u)); width: calc(240 * var(--u)); height: calc(180 * var(--u)); }
.v4-set > :nth-child(12) { left: calc(2860 * var(--u)); top: calc(70 * var(--u)); width: calc(300 * var(--u)); height: calc(200 * var(--u)); }
.v4-set > :nth-child(13) { left: calc(2880 * var(--u)); top: calc(360 * var(--u)); width: calc(240 * var(--u)); height: calc(160 * var(--u)); }
.v4-set > :nth-child(14) { left: calc(3140 * var(--u)); top: calc(160 * var(--u)); }

/* 横送りの操作：進み具合の線＋四角いボタン */
.v2-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: min(100%, 1120px); margin: 20px auto 0; padding: 0 var(--gutter); }
.v2-controls[hidden] { display: none; }
.v2-line { flex: 1 1 100%; height: 2px; background: var(--line); }
.v2-line span { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--done, 0)); }
.v2-round { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--green); border-radius: 4px; background: var(--white); color: var(--green); cursor: pointer; transition: background 0.2s, color 0.2s, opacity 0.2s; }
.v2-round:hover { background: var(--green); color: #fff; }
.v2-round:disabled { opacity: 0.3; cursor: default; background: var(--white); color: var(--green); }
.v2-round svg { width: 18px; height: 18px; fill: currentColor; }
.v2-controls--end .v2-round:first-of-type { margin-left: auto; }

/* 3 担当者 */
.profile-split { display: grid; grid-template-columns: 5fr 6fr; gap: 0 64px; align-items: start; padding: var(--section-y) max(var(--gutter), calc((100vw - 1072px) / 2)); background: var(--white); overflow: clip; }
.profile-split__copy { grid-column: 1; grid-row: 1; }
.profile-split h2 { margin-bottom: 24px; }
.profile-split__copy p:not(.eyebrow) { margin-top: 12px; color: var(--muted); }
.profile-split__copy p:has(.text-link) { margin-top: 16px; }
.profile-split__intro { display: block; color: var(--ink); }
.profile-split > .rule-link { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 24px; }
.business-info__profile { grid-column: 2; grid-row: 1 / 3; overflow: hidden; border-radius: var(--radius); }
.business-info__profile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius); }
.motion-ready .business-info__profile img, .motion-ready .v2-book { will-change: transform; }
.v2-book { grid-column: 2; grid-row: 1 / 3; align-self: end; justify-self: end; width: 30%; margin: 0 -14px -20px 0; border-radius: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }

/* 4 サービス */
#services { background: var(--soft); overflow: hidden; }
.service-routing { width: 100%; max-width: none; padding: 0; }
.service-routing > div { position: relative; width: min(100%, 1120px); margin: 0 auto; padding: 0 var(--gutter); }
.service-list { display: flex; gap: 16px; margin-top: 48px; padding: 4px max(var(--gutter), calc((100vw - 1072px) / 2)); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - 1072px) / 2)); scrollbar-width: none; }
.service-list li { flex: 0 0 min(calc(100vw - 72px), 356px); scroll-snap-align: start; }
.service-list a { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 560px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.3s; }
.service-list a:hover { border-color: var(--green); box-shadow: 0 16px 36px rgba(20, 60, 40, 0.12); text-decoration: none; transform: translate3d(0, -4px, 0); }
.v4-card-photo { position: relative; display: block; order: -1; flex: none; height: 370px; overflow: hidden; border-radius: 5px; }
.service-list li:nth-child(even) .v4-card-photo { order: 3; margin-top: auto; }
.v2-card-img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 0 30%; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.service-list a:hover .v2-card-img { transform: scale(1.05); }
.service-list li:nth-child(2) .v2-card-img { object-position: 22% 50%; }
.service-list li:nth-child(3) .v2-card-img { object-position: 70% 50%; }
.service-list li:nth-child(4) .v2-card-img { object-position: 30% 50%; }
.service-list li:nth-child(5) .v2-card-img { object-position: 50% 50%; }
.service-list li:nth-child(6) .v2-card-img { object-position: 50% 50%; }
/* 番号：写真の角を白く切り欠いた札に置く */
.service-list__num { position: absolute; left: 10px; top: 318px; z-index: 2; display: block; min-width: 86px; padding: 14px 16px 6px 2px; border-top-right-radius: 14px; background: var(--white); color: var(--accent); font-family: var(--latin); font-size: 38px; line-height: 1; }
.service-list li:nth-child(even) .service-list__num { top: auto; bottom: 328px; padding: 6px 16px 14px 2px; border-top-right-radius: 0; border-bottom-right-radius: 14px; }
.service-list a > span:nth-of-type(2) { display: block; padding: 16px 14px 18px; }
.service-list li:nth-child(even) a > span:nth-of-type(2) { padding-top: 8px; }
.service-list__title { position: relative; display: block; font-family: var(--mincho); font-size: 22px; font-weight: 400; line-height: 1.5; }
.service-list__title::after { content: ""; display: block; width: 36px; height: 2px; margin-top: 10px; background: var(--green); transform-origin: 0 50%; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.service-list a:hover .service-list__title::after { transform: scaleX(2.4); }
.service-list__desc { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.service-list__arrow { position: absolute; right: 22px; top: 322px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--white); color: var(--green); font-size: 18px; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16); transition: background-color 0.3s, color 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.service-list li:nth-child(even) .service-list__arrow { top: auto; bottom: 322px; }
.service-list a:hover .service-list__arrow { background: var(--green); color: #fff; transform: translate3d(4px, 0, 0); }
.service-routing > .rule-link { display: table; margin: 28px max(var(--gutter), calc((100vw - 1072px) / 2)) 0; }

/* サービスの手札：カーソル・タップ・キーボードで1枚が飛び出す（JS が動く時だけ。それ以外は横送りのまま） */
.service-list.is-fan { --card-w: 300px; --card-h: 480px; position: relative; display: block; height: calc(var(--card-h) + 170px); margin-top: 40px; padding: 0; overflow: visible; scroll-snap-type: none; }
.is-fan li { position: absolute; left: 50%; top: 100px; width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) / -2); }
.is-fan li.is-active { z-index: 20 !important; }
.is-fan a { min-height: 0; height: 100%; padding: 8px; box-shadow: 0 10px 26px rgba(10, 30, 20, 0.14); transform-origin: 50% 110%; transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg)) scale(var(--s, 1)); transition: transform 0.62s cubic-bezier(0.2, 0.9, 0.25, 1.12), box-shadow 0.4s ease, border-color 0.3s; will-change: transform; }
.is-fan a::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 90px; }
.is-fan.is-dealing a { transition-delay: calc(var(--i) * 70ms); }
.service-list.is-fan a:hover { transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.is-fan li.is-active a { border-color: var(--green); box-shadow: 0 26px 56px rgba(10, 30, 20, 0.28); }
.is-fan .v4-card-photo, .service-list.is-fan li:nth-child(even) .v4-card-photo { order: -1; margin-top: 0; height: 300px; }
.is-fan .service-list__num, .service-list.is-fan li:nth-child(even) .service-list__num { left: 8px; top: 8px; bottom: auto; min-width: 0; padding: 4px 14px 10px 8px; border-radius: 5px 0 14px 0; font-size: 30px; }
.is-fan .service-list__arrow, .service-list.is-fan li:nth-child(even) .service-list__arrow { right: 18px; top: 254px; bottom: auto; }
.is-fan a > span:nth-of-type(2), .service-list.is-fan li:nth-child(even) a > span:nth-of-type(2) { padding: 16px 12px 10px; }
.is-fan .service-list__title { font-size: 20px; }
.is-fan .v2-card-img { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.is-fan li.is-active .v2-card-img { transform: scale(1.05); }
.is-fan li.is-active .service-list__arrow { background: var(--green); color: #fff; }
.is-fan li.is-active .service-list__title::after { transform: scaleX(2.4); }
.service-list.is-fan + .v2-controls { display: none; }
#services:has(.is-fan) { overflow: clip; }

/* 5 直接相談 */
.why-band { background: var(--white); }
.why-grid { display: block; }
.why-band .v2-steps p { margin-top: 20px; font-family: var(--mincho); font-size: clamp(17px, 1.6vw, 20px); font-weight: 400; line-height: 2; }
.why-band .rule-link { margin-top: 20px; }
.v2-bento { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; margin-top: 48px; }
.v2-bento img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius); }
.v2-bento picture { display: block; min-height: 0; }
.v2-bento__a { grid-row: 1 / 3; aspect-ratio: 3 / 2; }

/* 6 制作例・JOETSU WEB について */
.works-about { display: block; }
.v4-works .works-about__item { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; width: min(100%, 1120px); margin: 0 auto; padding: var(--section-y) var(--gutter); }
.v4-works .works-about__item > * { grid-column: 1 / -1; }
.v4-works .works-about__item > p:not(.eyebrow):not(:has(.text-link)) { max-width: 720px; margin-top: 16px; color: var(--muted); }
.v4-works .works-about__item > p:has(.text-link) { grid-column: auto; margin-top: 44px; }
.works-about .text-link { display: block; color: var(--ink); font-size: 15px; line-height: 1.55; }

.v2-work-img { width: 100%; margin-bottom: 12px; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: var(--radius); }
.v4-works .works-about__item > .rule-link { justify-self: start; margin-top: 32px; }
.v4-about { background: var(--white); overflow: clip; }
.v4-about__pin { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; align-items: center; padding: var(--section-y) max(var(--gutter), calc((100vw - 1072px) / 2)); }
.v4-about__copy { grid-column: 1; grid-row: 1; }
.v4-about__stage { position: relative; grid-column: 2; grid-row: 1; perspective: 1200px; }
.v4-about__frame { position: absolute; inset: 0; background: var(--green); border-radius: var(--radius); transform: translate3d(18px, 18px, 0); }
.v2-about-img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.v4-about h2 { font-size: clamp(21px, 2.7vw, 36px); }
.v4-about p:not(.eyebrow) { margin: 20px 0; color: var(--muted); }

/* 7 クチコミ */
.screen-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.editorial-note { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.editorial-note blockquote p { font-size: 16px; line-height: 2; }
.editorial-note blockquote p + p { margin-top: 8px; }
.editorial-note > p { padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.editorial-note cite { color: var(--accent); font-family: var(--mincho); font-size: 16px; font-style: normal; font-weight: 400; }
.section--soft > .container > p:last-child { margin-top: 28px; }

/* 8 FAQ */
.section--rule .narrow { width: min(100%, 1120px); }
.faq { margin: 40px 0 56px; border-top: 1px solid var(--green); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 22px 48px 22px 0; font-family: var(--mincho); font-size: clamp(17px, 1.6vw, 19px); font-weight: 400; line-height: 1.7; list-style: none; cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease, padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.faq summary:active { background-color: rgba(92, 20, 54, 0.06); color: var(--accent); padding-left: 10px; }
.faq summary:focus-visible { color: var(--accent); }
@media (hover: hover) {
  .faq summary:hover { background-color: rgba(92, 20, 54, 0.04); color: var(--accent); padding-left: 12px; }
  .faq summary:hover::before, .faq summary:hover::after { background: var(--accent); }
  .faq summary:hover::before { transform: rotate(90deg); }
  .faq summary:hover::after { transform: rotate(180deg); }
  .faq details[open] summary:hover::before { transform: none; }
  .faq details[open] summary:hover::after { transform: none; }
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; background: var(--accent); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details p { max-width: 860px; margin-bottom: 12px; color: var(--muted); }
.faq details p:last-child { margin-bottom: 26px; }
.section--rule .narrow > p:has(.text-link) { padding: 10px 0; border-top: 1px solid var(--line); }
.section--rule .section-copy { margin-bottom: 16px; }

/* 9 相談の帯 */
.cta-band { padding: var(--section-y) var(--gutter); background: var(--green); color: #fff; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; width: min(100%, 1072px); margin: 0 auto; }
.cta-band p { margin-top: 20px; }
.cta-band .button { border-color: #fff; background: #fff; color: var(--green); }

/* フッター */
.site-footer { padding: 48px 0 28px; background: var(--ink); color: #c8d0ca; font-size: 14px; }
.site-footer__main { display: grid; gap: 32px; }
.site-footer__brand strong { display: block; color: #fff; font-size: 21px; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.footer-nav > div:last-child { grid-column: 1 / -1; }
.footer-nav h2 { margin-bottom: 10px; color: #fff; font-size: 14px; letter-spacing: 0.12em; }
.footer-nav ul { list-style: none; }
.footer-nav li { margin-top: 8px; }
.footer-nav a { color: #fff; }
.footer-hours { display: block; }
.site-footer__brand strong { font-family: var(--latin); font-weight: 400; letter-spacing: 0.1em; }
.footer-nav h2 { font-family: var(--latin); font-weight: 400; }
.site-footer__bottom { margin-top: 32px; padding: 16px 32px 0 var(--gutter); border-top: 1px solid rgba(255, 255, 255, 0.2); text-align: right; }

/* スマホの固定ボタン・上へ戻る */
.mobile-sticky-cta { position: fixed; left: 12px; right: 68px; bottom: 12px; z-index: 30; padding: 13px; border: 2px solid #fff; border-radius: 4px; background: var(--green); color: #fff; font-size: 17px; font-weight: 600; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transform: translateX(-16px); transition: opacity 0.25s, transform 0.25s; }
.mobile-sticky-cta.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top { position: fixed; right: 12px; bottom: 12px; z-index: 30; width: 48px; height: 48px; border: 1.5px solid var(--green); border-radius: 4px; background: var(--white); color: var(--green); font-size: 18px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }

/* 動き（JS が動く時だけ。止める設定の人には出さない） */
.motion-ready .v4-appear { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.motion-ready .v4-appear.is-in { opacity: 1; transform: none; }
.motion-ready .v4-works > p:has(.text-link):nth-of-type(n+4) { transition-delay: 0.08s; }
.motion-ready .page-home .editorial-note { will-change: transform, opacity; }
.motion-ready .home-hero { height: 190svh; }
.motion-ready .v2-hero-pin { position: sticky; top: var(--header); height: calc(100svh - var(--header)); grid-template-rows: calc(100svh - var(--header) - var(--strip)); }
.motion-ready .home-hero__media img { will-change: transform; }
.motion-ready .v2-hero-text { will-change: transform, opacity; }
.motion-ready .v2-hero-band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; align-content: flex-start; transform: translate3d(0, calc(100% - var(--strip)), 0); will-change: transform; }
.motion-ready .home-hero__lead { opacity: 0; }
.motion-ready .v2-stage { height: 240svh; margin: 28px calc(50% - 50vw) 0; }
.motion-ready .v2-stage__pin { position: sticky; top: var(--header); display: flex; flex-direction: column; height: calc(100svh - var(--header)); }
.motion-ready .v2-bento { position: relative; display: block; order: 1; flex: none; width: 100%; height: min(50vw, calc(100svh - var(--header) - 170px)); margin: 0; overflow: hidden; background: var(--white); transform-origin: 50% 100%; will-change: transform; }
.motion-ready .v2-bento picture { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; backface-visibility: hidden; }
.motion-ready .v2-bento img { display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-position: 50% 50%; }
.motion-ready .v2-bento__b, .motion-ready .v2-bento__c { transform: translate3d(0, 100%, 0); }
.motion-ready .v2-steps { position: relative; order: 2; flex: 1; width: min(100%, 1120px); min-height: 0; margin: 0 auto; padding: 0 var(--gutter); }
.motion-ready .v2-steps > p { position: absolute; left: var(--gutter); right: min(30%, 300px); top: 22px; margin: 0; will-change: opacity, transform; }
.motion-ready .v2-steps > p:nth-child(2) { opacity: 0; }
.motion-ready .v2-steps > .rule-link { position: absolute; right: var(--gutter); top: 30px; margin: 0; opacity: 0; }
.motion-ready .why-band { padding-bottom: 0; overflow: clip; }
.why-band h2 { margin-bottom: 0; }
.motion-ready .v4-about { height: 135svh; }
.motion-ready .v4-about__pin { position: sticky; top: var(--header); height: calc(100svh - var(--header)); padding-block: 0; }
.motion-ready .v2-about-img, .motion-ready .v4-about__frame, .motion-ready .v4-about__copy > * { will-change: transform, opacity; }

@media (min-width: 768px) {
  .site-footer__main { grid-template-columns: 1fr 3fr; }
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
  .footer-nav > div:last-child { grid-column: auto; }
  .mobile-sticky-cta { display: none; }
}

@media (min-width: 1220px) {
  .desktop-nav, .header-contact { display: block; }
  .menu-toggle { display: none; }
}

@media (max-width: 767px) {
  :root { --section-y: 72px; --gutter: 20px; --header: 58px; --strip: 134px; }
  .brand__name { font-size: 18px; }
  .v2-hero-pin { grid-template-rows: 46svh auto auto; }
  .home-hero__surface { display: none; }
  .motion-ready .v2-hero-pin { grid-template-rows: minmax(0, 1fr) auto var(--strip); height: calc(100svh - var(--header)); }
  .home-hero__media img { object-position: 50% 45%; }
  .v2-hero-text { grid-column: 1; grid-row: 2; align-self: auto; padding: 14px var(--gutter) 18px; color: var(--ink); }
  .home-hero__regions { color: var(--accent); }
  .home-hero__statement { margin-top: 8px; font-size: clamp(22px, 6.8vw, 30px); line-height: 1.55; }
  .home-hero h1 { margin-top: 6px; }
  .v2-hero-band { grid-column: 1; grid-row: 3; padding-top: 14px; gap: 12px; }
  .home-hero__price { flex: 0 0 100%; }
  .home-hero__actions { flex: 0 0 100%; gap: 8px; }
  .home-hero__actions .button { flex: 1 1 auto; min-height: 46px; padding: 6px 10px; font-size: 14px; letter-spacing: 0.04em; }
  .v2-round { width: 44px; height: 44px; }
  .profile-split { display: block; }
  .profile-split > .rule-link { display: table; }
  .business-info__profile { margin-top: 32px; }
  .v2-book { display: block; width: 34%; margin: -110px 0 0 auto; position: relative; }
  .v2-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; margin-top: 32px; }
  .v2-bento__a { grid-column: 1 / 3; grid-row: auto; }
  .v2-bento__b, .v2-bento__c { aspect-ratio: 1; }
  .service-list a { min-height: 500px; }
  .v4-card-photo { height: 310px; }
  .service-list__num { top: 258px; }
  .service-list li:nth-child(even) .service-list__num { bottom: 268px; }
  .service-list__arrow { top: 262px; }
  .service-list li:nth-child(even) .service-list__arrow { bottom: 262px; }
  .v4-works .works-about__item { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .v4-works .works-about__item > p:has(.text-link) { margin-top: 28px; }
  .v4-about__pin { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 30px; }
  .motion-ready .v4-about__pin { padding-bottom: 66px; }
  .v4-about__frame { transform: translate3d(8px, 8px, 0); }
  .v4-about__copy .eyebrow { margin-bottom: 12px; }
  .v4-about p:not(.eyebrow) { margin: 10px 0; }
  .screen-card-grid { display: flex; gap: 12px; margin: 36px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .editorial-note { flex: 0 0 calc(100vw - 64px); padding: 24px 22px; scroll-snap-align: start; }
  .rule-link, .section--rule .text-link { font-size: 15px; }
  .motion-ready .v2-bento { height: min(75vw, 46svh); }
  .motion-ready .v2-steps > p { right: var(--gutter); top: 16px; font-size: 16px; }
  .motion-ready .v2-steps > .rule-link { left: var(--gutter); right: auto; top: auto; bottom: 78px; }
}

@media (max-width: 767px) {
  .service-list.is-fan a { min-height: 0; }
  .service-list.is-fan { --card-w: min(200px, 52vw); --card-h: max(306px, calc(306px + (390px - 100vw) * 0.5)); height: calc(var(--card-h) + 128px); margin-top: 16px; }
  .is-fan li { top: 64px; }
  .is-fan .v4-card-photo, .service-list.is-fan li:nth-child(even) .v4-card-photo { height: 150px; }
  .is-fan .service-list__num, .service-list.is-fan li:nth-child(even) .service-list__num { font-size: 24px; padding: 3px 12px 8px 6px; }
  .is-fan .service-list__arrow, .service-list.is-fan li:nth-child(even) .service-list__arrow { top: 112px; right: 14px; width: 36px; height: 36px; }
  .is-fan a > span:nth-of-type(2), .service-list.is-fan li:nth-child(even) a > span:nth-of-type(2) { padding: 12px 8px 8px; }
  .is-fan .service-list__title { font-size: 17px; letter-spacing: 0.02em; }
  .is-fan .service-list__desc { margin-top: 8px; font-size: 14px; line-height: 1.6; letter-spacing: 0.02em; }
}

@media (max-height: 640px) {
  .motion-ready .v4-about { height: auto; }
  .motion-ready .v4-about__pin { position: static; height: auto; padding-block: var(--section-y); }
}

@media (max-width: 360px) {
  .site-header__inner { gap: 8px; padding: 0 14px; }
  .brand { gap: 8px; }
  .service-list__title { font-size: 20px; }
  .home-hero__regions { letter-spacing: 0.02em; }
  .home-hero__actions .button { padding: 6px 4px; letter-spacing: 0; }
  .brand__name { font-size: 18px; letter-spacing: 0; }
  .brand__tag { letter-spacing: 0; }
}

/* 初期画面 */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.intro-done):not(.intro-on) .page-home::after { content: ""; position: fixed; inset: 0; z-index: 90; background: #fff; pointer-events: none; animation: v5-cover 0.3s linear 3.6s forwards; }
}
@keyframes v5-cover { to { opacity: 0; visibility: hidden; } }
.v5-intro { position: fixed; inset: 0; z-index: 91; display: grid; place-items: center; background: #fff; pointer-events: none; transition: opacity 0.52s ease; }
.v5-intro.is-out { opacity: 0; }
.v5-intro__map { width: min(88vw, 78svh, 680px); height: auto; overflow: visible; transition: transform 0.52s cubic-bezier(0.3, 0, 0.3, 1); }
.v5-intro.is-out .v5-intro__map { transform: scale(1.14); }
.v5-land path { fill: rgba(20, 92, 58, 0.1); stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: v5-draw 1.5s cubic-bezier(0.4, 0, 0.3, 1) 0.3s forwards, v5-fill 0.9s ease 1s backwards; }
@keyframes v5-draw { to { stroke-dashoffset: 0; } }
@keyframes v5-fill { from { fill: rgba(20, 92, 58, 0); } }
.v5-bubble { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: v5-rise 0.95s cubic-bezier(0.2, 1.2, 0.4, 1) forwards; will-change: transform, opacity; }
@keyframes v5-rise { from { opacity: 0; transform: translate3d(0, 130px, 0) scale(0.3); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
.v5-bubble circle { fill: rgba(255, 255, 255, 0.86); stroke: var(--green); stroke-width: 1.5; }
.v5-bubble .v5-shine { fill: rgba(20, 92, 58, 0.14); }
.v5-bubble text { fill: var(--ink); font-family: var(--mincho); font-size: 26px; letter-spacing: 0.02em; }
.v5-spark { fill: rgba(20, 92, 58, 0.06); stroke: rgba(20, 92, 58, 0.5); stroke-width: 1; opacity: 0; animation: v5-float 2.2s ease-out forwards; }
@keyframes v5-float { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -240px, 0); } }
.v5-wire { stroke: var(--accent); stroke-width: 1; opacity: 0; animation: v5-show 0.3s ease forwards; }
.v5-pin { fill: var(--accent); opacity: 0; animation: v5-show 0.3s ease forwards; }
@keyframes v5-show { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* 最初の画面を CSS の scroll-driven animation で（合成スレッドで動くので JS より 1 コマ早く、main thread が詰まっても止まらない）。対応ブラウザだけ（html.sda）。写像は直線 */
@supports (animation-timeline: scroll()) {
  .motion-ready.sda .home-hero { --hero-travel: calc(90svh + var(--header)); }
  .motion-ready.sda .home-hero__media img { animation: v6-hero-img linear both; animation-timeline: scroll(root); animation-range: 0px var(--hero-travel); }
  .motion-ready.sda .v2-hero-text { animation: v6-hero-text linear both; animation-timeline: scroll(root); animation-range: calc(var(--hero-travel) * 0.1) calc(var(--hero-travel) * 0.5); }
  .motion-ready.sda .v2-hero-band { animation: v6-hero-band linear both; animation-timeline: scroll(root); animation-range: calc(var(--hero-travel) * 0.22) var(--hero-travel); }
  .motion-ready.sda .home-hero__lead { animation: v6-fade-in linear both; animation-timeline: scroll(root); }
  @keyframes v6-hero-img { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(0, -14px, 0) scale(1); } }
  @keyframes v6-hero-text { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, -36px, 0); } }
  @keyframes v6-hero-band { from { transform: translate3d(0, calc(100% - var(--strip)), 0); } to { transform: translate3d(0, 0, 0); } }
  @keyframes v6-fade-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ===== 下層の共通部品（トップと同じ言葉で。文言・リンク・順番は HTML のまま。設計書 2 章・3 章） ===== */
body:not(.page-home) main { color: var(--muted); }
body:not(.page-home) main :is(h1, h2, h3, h4, th, summary, blockquote) { color: var(--ink); }
body:not(.page-home) main .cta-band h2 { color: #fff; }
body:not(.page-home) main :is(h1, h2, h3, summary) { text-wrap: pretty; }
main h3 { font-family: var(--mincho); font-size: clamp(19px, 1.6vw, 21px); font-weight: 400; line-height: 1.6; letter-spacing: 0.06em; }
.eyebrow__src { display: none; }
.desktop-nav__link[aria-current="page"] { padding-bottom: 5px; border-bottom: 2px solid var(--accent); }
.desktop-nav__link[aria-current="page"]:hover { text-decoration: none; }
.mobile-nav__link[aria-current="page"] { color: var(--accent); }
.mobile-nav__current { margin-right: 12px; color: var(--accent); font-family: var(--latin); font-size: 14px; letter-spacing: 0.1em; }
.cta-band a:not(.button) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.page-home .editorial-note::before { content: none; }
body:not(.page-home) .cta-band, body:not(.page-home) .site-footer { position: relative; z-index: 6; }

/* 最初の写真 型A：全幅の写真の下の縁に白い札。右の列に価格とボタン */
.page-hero { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--white); }
.page-hero__media { grid-area: 1 / 1; height: clamp(420px, 58svh, 640px); overflow: hidden; background: #dfe5e1; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__surface { display: none; }
.page-hero__inner { grid-area: 2 / 1; z-index: 2; position: static; }
.page-hero__copy { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 1fr); gap: 0 48px; align-items: start; }
.page-hero__text { margin-top: -40px; padding: 28px 40px 0; border-left: 4px solid var(--green); background: var(--white); }
.page-hero__offer { padding-top: 32px; }
.breadcrumb { position: absolute; left: max(var(--gutter), calc((100vw - 1072px) / 2)); top: 16px; z-index: 3; display: flex; flex-wrap: wrap; margin: 0; padding: 2px 12px; border-radius: 4px; background: rgba(8, 20, 14, 0.62); list-style: none; color: #fff; font-size: 14px; line-height: 1.9; }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; font-family: var(--latin); }
.breadcrumb a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.page-hero .eyebrow { margin-bottom: 12px; white-space: normal; counter-increment: none; }
.page-hero .eyebrow::before { content: none; }
.page-hero h1 { font-family: var(--mincho); font-size: clamp(28px, 3.6vw, 48px); font-weight: 400; line-height: 1.6; letter-spacing: 0.08em; }
.page-hero__subtitle { margin-top: 4px; color: var(--ink); font-family: var(--mincho); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.7; letter-spacing: 0.08em; }
.page-hero__lead { margin-top: 12px; }
.page-hero__lead + .page-hero__lead { margin-top: 0; }
.page-hero__price { color: var(--green); font-family: var(--latin); font-size: 44px; line-height: 1.2; letter-spacing: 0.02em; }
.page-hero__price small { margin-left: 4px; font-family: var(--mincho); font-size: 18px; letter-spacing: 0.06em; }
.page-hero__price-note { margin-top: 10px; font-size: 14px; line-height: 1.8; }
.page-hero__price-note a { display: inline-block; margin-top: 4px; font-family: var(--mincho); text-decoration: underline; text-underline-offset: 3px; }
.page-hero .home-hero__actions { margin-top: 18px; }
.page-hero .home-hero__actions .button { flex: 1 1 auto; border-color: var(--green); background: var(--green); color: #fff; }
.page-hero .home-hero__actions .button:hover { background: var(--green-deep); }
@media (prefers-reduced-motion: no-preference) {
  .page-hero__media img { animation: ph-pull 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .page-hero__text, .page-hero__offer { animation: ph-card 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
}
@keyframes ph-pull { from { transform: scale(1.04); } to { transform: none; } }
@keyframes ph-card { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* 節の見出し：左に小見出しと H2、右にリード */
.section-heading { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 48px; align-items: end; }
.section-heading--single { display: block; }
.section-heading__lead { padding-bottom: 8px; }
.section--band, .section--tail { padding-top: 0; }
.photo-band { position: relative; z-index: 6; height: min(33.34vw, 600px); margin-bottom: calc(var(--section-y) * 0.8); overflow: hidden; background: #dfe5e1; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
.container--side { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 64px; align-items: start; }
.container--side > * { grid-column: 1; }
.container--side > .rule-link { justify-self: start; margin-top: 28px; }
.side-photo { grid-column: 2; grid-row: 1 / span 7; }
.side-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); }

/* カード */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.feature-card { position: relative; display: flex; flex-direction: column; padding: 28px 26px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.3s; }
.feature-card:hover { border-color: var(--green); box-shadow: 0 16px 36px rgba(20, 60, 40, 0.12); transform: translate3d(0, -4px, 0); }
.feature-card__num { display: block; color: var(--accent); font-family: var(--latin); font-size: 30px; line-height: 1; }
.feature-card h3 { margin-top: 14px; }
.feature-card p { margin-top: 8px; font-size: 15px; line-height: 1.9; }
/* 写真つきのカード：番号は写真の角を白く切り欠いた札に置く（トップのサービスと同じ） */
.feature-card:has(.feature-card__visual) { padding: 10px 10px 26px; }
.feature-card__visual { margin: 0; overflow: hidden; border-radius: 5px; background: #dfe5e1; }
.feature-card__visual img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.feature-card:hover .feature-card__visual img { transform: scale(1.05); }
.feature-card__visual + .feature-card__num { position: relative; align-self: flex-start; margin-top: -40px; padding: 12px 16px 0 6px; border-top-right-radius: 14px; background: var(--white); }
.feature-card__visual ~ h3, .feature-card__visual ~ p { margin-inline: 14px; }

/* 表：横線だけ */
.data-table { width: 100%; margin-top: 48px; border-collapse: collapse; border-top: 1px solid var(--green); }
.data-table th, .data-table td { padding: 20px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { width: 28%; padding-right: 24px; font-family: var(--mincho); font-size: 16px; font-weight: 400; }
.estimate-note { margin-top: 18px; font-size: 14px; line-height: 1.9; }

/* 条件の札：左に深緑の縦線 */
.terms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; margin-top: 48px; }
.term-card { padding-left: 24px; border-left: 2px solid var(--green); }
.term-card p, .term-card ul { margin-top: 10px; font-size: 15px; line-height: 1.9; }
.term-card ul { list-style: none; }
.term-card li { position: relative; padding-left: 18px; }
.term-card li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 8px; height: 1px; background: var(--green); }

/* 文と写真の 2 列 */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 64px; align-items: center; }
.section-image img { width: 100%; border-radius: var(--radius); }
.note-panel { margin: 28px 0; padding: 18px 24px; border: 1px solid var(--accent); border-radius: var(--radius); }
.split .text-link { line-height: 2.2; }

/* 著書の札 */
.book-card { display: flex; gap: 24px; align-items: flex-start; margin-top: 32px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.book-card__cover { flex: 0 0 104px; }
.book-card__cover img { width: 100%; border-radius: 3px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }
.book-card__label { color: var(--accent); font-family: var(--mincho); font-size: 14px; }
.book-card__title { margin-top: 2px; color: var(--ink); font-family: var(--mincho); font-size: 18px; line-height: 1.7; }
.book-card__text { margin: 8px 0 10px; font-size: 15px; line-height: 1.9; }

/* 制作例のカード：画面の写真をブラウザの窓に */
.screen-card-grid--center-last { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.screen-card { display: flex; flex-direction: column; }
.screen-card__media { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.screen-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.screen-card:hover .screen-card__media img { transform: scale(1.04); }
.site-window::before { content: ""; display: block; height: 26px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 14px 50%, #c9d0cb 3.5px, transparent 4px), radial-gradient(circle at 28px 50%, #c9d0cb 3.5px, transparent 4px), radial-gradient(circle at 42px 50%, #c9d0cb 3.5px, transparent 4px); }
.screen-card__body { padding-top: 18px; }
.tag { display: inline-block; padding: 2px 10px; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-size: 14px; line-height: 1.7; }
.screen-card h3 { margin-top: 12px; }
.screen-card__body p { margin-top: 8px; font-size: 15px; line-height: 1.9; }
.screen-card__body p:has(.text-link) { margin-top: 12px; }
.screen-card-grid ~ .rule-link { display: table; margin-top: 36px; }

/* 手順：左に番号と線、右に題と文 */
.steps { margin-top: 56px; list-style: none; counter-reset: step; }
.steps > li { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4px 48px; align-items: baseline; min-height: 44px; padding: 7px 0 60px 76px; background: linear-gradient(var(--line), var(--line)) 21px 44px / 2px calc(100% - 44px) no-repeat; counter-increment: step; }
.steps > li:last-child { padding-bottom: 0; background: none; }
.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--accent); border-radius: 50%; background: var(--white); color: var(--accent); font-family: var(--latin); font-size: 16px; line-height: 1; letter-spacing: 0.04em; }
/* 工程表（スクロールで線が伸びる）。止める設定と JS なしでは最初から全部引かれ、番号も点いたまま */
.steps--scroll > li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--green); transform-origin: 50% 0; transform: scaleY(var(--seg, 1)); }
.steps--scroll > li::before { border-color: var(--green); background: var(--green); color: #fff; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.motion-ready .steps--scroll > li:not(.is-on)::before { border-color: var(--line); background: var(--white); color: var(--accent); }

/* 工程表の写真 */
.steps > li:has(.steps__photo) { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 176px; align-items: start; padding-bottom: 32px; }
.steps > li:has(.steps__photo) p { padding-top: 3px; }
.steps__photo { grid-column: 3; grid-row: 1 / span 2; margin-top: -7px; }
.steps__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

/* 写真を足した節 */
.table-side { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 40px; align-items: start; margin-top: 48px; }
.table-side .data-table { margin-top: 0; }
.table-side__photo img { width: 100%; border-radius: var(--radius); }
.terms-grid:has(.terms-photo) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.terms-photo { grid-column: 3; grid-row: 1 / span 2; }
.terms-photo img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; border-radius: var(--radius); }
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.photo-row img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.photo-row + .note-grid { margin-top: 16px; }

/* 引用 */
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.editorial-note::before { content: "“"; display: block; height: 26px; color: var(--accent); font-family: var(--latin); font-size: 64px; line-height: 1; }
.editorial-note > p + p { margin-top: -10px; padding-top: 0; border-top: 0; }
.note-grid__more { margin-top: 24px; }

/* 背景の切り抜き：薄く大きく置き、文字が重なる。透明度は画像に焼いてあり、最も濃い所でも文字の比 4.5:1 を保つ（下層の全ページで使える） */
.has-figure { position: relative; isolation: isolate; overflow: clip; }
body:not(.page-home) main .has-figure, .has-figure .section-lead, .has-figure .section-copy { color: #46534b; }
.bg-figure { position: absolute; z-index: -1; pointer-events: none; }
.bg-figure img { width: 100%; height: auto; }
.bg-figure--right { right: max(-30px, calc((100vw - 1400px) / 2)); top: 28px; width: clamp(300px, 36vw, 560px); }
.bg-figure--right-low { right: max(-20px, calc((100vw - 1360px) / 2)); bottom: -40px; width: clamp(260px, 30vw, 460px); }
.bg-figure--wash { inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); }
.bg-figure--wash img { height: 100%; object-fit: cover; }
.has-figure .book-card, .has-figure .note-panel { background: var(--white); }
.cut-figure { align-self: end; margin: 0 -24px calc(var(--section-y) * -1) 0; -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent); mask-image: linear-gradient(to bottom, #000 84%, transparent); }
.cut-figure img { width: 100%; height: auto; }
.split:has(.cut-figure) > div { padding-bottom: 8px; }
/* 制作例：窓にスマホの表示を重ねる */
.screen-card__stage { position: relative; }
.screen-card__phone { position: absolute; right: -8px; bottom: -22px; width: 27%; height: auto; aspect-ratio: 652 / 1160; object-fit: cover; object-position: top; border: 3px solid var(--ink); border-radius: 12px; background: var(--white); box-shadow: 0 10px 26px rgba(10, 30, 20, 0.24); }
.screen-card__stage + .screen-card__body { padding-top: 30px; padding-right: 12px; }
/* 載せられる内容の見取り図：ホームページの形をシンプルな絵で見せる。番号と題はカードと対応し、読んでいる所・乗せたカードの場所が光る（JS が作る） */
.builder-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 32px; align-items: start; margin-top: 48px; }
/* カードは PC でも横に送る（ページを短く） */
.builder-stage .feature-grid { display: flex; gap: 16px; margin-top: 0; padding: 4px 4px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.builder-stage .feature-grid::-webkit-scrollbar { display: none; }
.builder-stage .feature-card { flex: 0 0 min(300px, 80%); scroll-snap-align: start; }
.builder-stage .v2-controls { margin-top: 12px; padding: 0; }
.builder { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 24px 60px rgba(10, 40, 26, 0.14); }
.builder__bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.builder__bar i { display: block; height: 4px; border-radius: 2px; background: #cfd7d2; }
.builder__bar i:first-child { width: 44px; margin-right: auto; background: var(--green); }
.builder__bar i:not(:first-child) { width: 18px; }
.builder__page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.builder__slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 112px; padding: 10px 8px; border: 1px dashed #b9c3bd; border-radius: 4px; background: #f8faf8; color: #9aa69f; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s; }
.builder__slot:nth-child(3n + 1) { grid-column: 1 / -1; flex-direction: row; gap: 14px; min-height: 84px; }
.builder__icon { flex: none; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.builder__text { color: var(--ink); font-family: var(--mincho); font-size: 14px; line-height: 1.5; letter-spacing: 0.02em; text-align: center; opacity: 0.55; transition: opacity 0.3s; }
.builder__text b { display: block; color: var(--accent); font-family: var(--latin); font-weight: 400; }
.builder__slot.is-on { border-style: solid; border-color: var(--line); background: var(--white); color: var(--green); }
.builder__slot.is-on .builder__text { opacity: 1; }
.builder__slot.is-current { border-color: var(--green); background: #eef5f0; box-shadow: 0 0 0 2px var(--green); }
.feature-card.is-current { border-color: var(--green); }

/* 一度だけ現れる（時間の動き。節の見出し・カード・引用だけ） */
.motion-ready .v4-rise:not(.is-in) { opacity: 0; }
.motion-ready .v4-rise.is-in { animation: v4-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--rise-delay, 0s) backwards; }
@keyframes v4-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* このページの目次（PC だけ。JS が作る）。ふだんは番号だけ、乗せると題が出る。全幅の写真と帯の下を通る */
.section-index { display: none; }
@media (min-width: 1220px) and (max-width: 1299px) {
  .site-header__inner { gap: 14px; }
  .desktop-nav__list { gap: 14px; }
}
@media (min-width: 1220px) {
  .section-index { position: fixed; left: 12px; top: 50%; z-index: 5; display: block; padding: 10px 14px 10px 10px; border: 1px solid transparent; border-radius: var(--radius); transform: translateY(-50%); transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; }
  .section-index ol { list-style: none; }
  .section-index a { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; color: #6b7770; font-family: var(--latin); font-size: 14px; line-height: 1.7; transition: color 0.2s; }
  .section-index a:hover { color: var(--green); text-decoration: none; }
  .section-index__no { position: relative; flex: 0 0 36px; padding-left: 16px; }
  .section-index__no::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 0.2s; }
  .section-index a[aria-current="true"] { color: var(--accent); }
  .section-index a[aria-current="true"] .section-index__no::before { opacity: 1; }
  .section-index__label { display: none; max-width: 300px; color: var(--ink); font-family: var(--mincho); }
  .section-index:hover, .section-index:focus-within { border-color: var(--line); background: var(--white); box-shadow: 0 16px 36px rgba(20, 60, 40, 0.12); }
  .section-index:hover .section-index__label, .section-index:focus-within .section-index__label { display: block; }
}
@media (min-width: 1640px) {
  .section-index { left: 24px; width: min(320px, calc((100vw - 1120px) / 2 - 40px)); }
  .section-index__label { display: block; }
  .section-index:hover, .section-index:focus-within { border-color: transparent; background: none; box-shadow: none; }
}

@media (max-width: 959px) {
  .page-hero__copy { display: block; }
  .page-hero__offer { padding: 24px 0 0 44px; }
  .page-hero .home-hero__actions { display: inline-flex; }
  .section-heading { display: block; }
  .section-heading__lead { margin-top: 18px; padding-bottom: 0; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .container--side, .table-side { display: block; }
  .steps > li:has(.steps__photo) { grid-template-columns: minmax(0, 1fr) 150px; gap: 4px 24px; }
  .steps > li:has(.steps__photo) p { grid-column: 1; }
  .steps__photo { grid-column: 2; }
  .table-side__photo { display: block; margin-top: 28px; }
  .terms-grid:has(.terms-photo) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms-photo { grid-column: 1 / -1; grid-row: auto; }
  .terms-photo img { height: auto; aspect-ratio: 16 / 7; }
  .side-photo, .section-image { display: block; margin-top: 32px; }
  .screen-card-grid--center-last { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .page-hero__media { height: 46svh; min-height: 240px; }
  .page-hero__text { margin-top: 0; padding: 20px 0 0; border-left: 0; }
  .page-hero__offer { padding: 18px 0 8px; }
  .page-hero .home-hero__actions { display: flex; }
  .breadcrumb { top: 10px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .feature-card { padding: 22px 20px 24px; }
  .feature-card:has(.feature-card__visual) { padding: 8px 8px 20px; }
  .feature-card__visual ~ h3, .feature-card__visual ~ p { margin-inline: 12px; }
  .data-table { margin-top: 32px; }
  .data-table tr, .data-table th, .data-table td { display: block; width: auto; }
  .data-table th { padding: 16px 0 0; border-bottom: 0; }
  .data-table td { padding: 4px 0 16px; }
  .terms-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; }
  .term-card { padding-left: 18px; }
  .book-card { gap: 16px; padding: 16px; }
  .book-card__cover { flex-basis: 84px; }
  .screen-card-grid--center-last { display: flex; gap: 12px; }
  .screen-card { flex: 0 0 calc(100vw - 64px); scroll-snap-align: start; }
  .steps { margin-top: 36px; }
  .steps > li { display: block; padding: 7px 0 40px 60px; background-position: 17px 36px; background-size: 2px calc(100% - 36px); }
  .steps > li:has(.steps__photo) { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 4px 12px; padding-bottom: 32px; }
  .steps > li:has(.steps__photo) h3 { grid-column: 1 / -1; }
  .steps__photo { grid-column: 2; grid-row: 2; margin-top: 4px; }
  .steps > li::before { width: 36px; height: 36px; font-size: 14px; }
  .steps--scroll > li:not(:last-child)::after { left: 17px; top: 36px; }
  .steps > li p { margin-top: 4px; }
  .note-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .terms-grid:has(.terms-photo) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
  .photo-row img:first-child { grid-column: 1 / -1; }
  .photo-row + .note-grid { margin-top: 12px; }
  .note-grid .editorial-note { flex: none; }
  .photo-band { height: 56vw; margin-bottom: var(--section-y); }
}

/* スマホの画面は、スクロールに直結して現れる（パソコンとスマホの見え方に目を向けてもらう。合成スレッドで動くので JS は使わない。非対応のブラウザでは止まったまま）。背景の切り抜きは動かさない */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cut-figure { animation: cut-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    .screen-card__phone { animation: phone-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
@keyframes cut-rise { from { transform: translate3d(20px, 70px, 0) rotate(3deg); } to { transform: none; } }
@keyframes phone-rise { from { transform: translate3d(0, 56px, 0); } to { transform: none; } }

@media (max-width: 959px) {
  .builder-stage { display: block; }
  .builder { max-width: 480px; margin: 0 auto 24px; }
  .cut-figure { margin: 24px auto calc(var(--section-y) * -1); max-width: 520px; }
}
@media (max-width: 767px) {
  .builder-stage { margin-top: 32px; }
  .bg-figure--right, .bg-figure--right-low { width: 62vw; right: -8vw; }
  .screen-card__phone { width: 24%; }
}

/* 相談の帯：初期画面の新潟県の形を白く薄く（全ページ。文字なし。白文字の比は 4.5:1 以上） */
.cta-band { background: var(--green) url("/images/bg-niigata-white-20261101.svg") calc(50% + 300px) 50% / auto 130% no-repeat; }

/* 3 担当者：顔写真を今の 70% に（主張を抑える） */
.business-info__profile { justify-self: end; width: 70%; align-self: start; }
.v2-book { align-self: start; width: 24%; margin: 52% 0 0; }

/* サービスの手札：指を置いたまま横に動かすと 1 枚ずつ替わる。長押しの選択メニューを出さない */
.is-fan { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.is-fan a, .is-fan img { -webkit-touch-callout: none; -webkit-user-drag: none; touch-action: pan-y; }
.fan-index { display: none; }
@media (max-width: 767px), (hover: none) {
  .is-fan a::after { content: none; }
  .service-routing > .fan-index { z-index: 25; display: flex; justify-content: center; gap: 2px; }
  .fan-index button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font-family: var(--latin); font-size: 14px; cursor: pointer; }
  .fan-index button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; background: var(--line); transition: background-color 0.2s; }
  .fan-index button[aria-pressed="true"] { color: var(--accent); }
  .fan-index button[aria-pressed="true"]::after { background: var(--green); }
}

/* はじめての方へ：写真の札の束。押すと広がる（JS が is-closed を付ける。JS なしは最初から並ぶ） */
.guide-fold { position: relative; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.section--rule .guide-fold > .section-copy { margin: 0 0 24px; padding-right: 60px; color: var(--ink); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.8; }
.guide-fold__cards { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; transition: height 0.7s cubic-bezier(0.2, 0.9, 0.25, 1); }
.guide-fold__cards > p { position: relative; margin: 0; transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.08) var(--d, 0s); }
.guide-fold .text-link { display: flex; flex-direction: column; height: 100%; padding: 8px 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); line-height: 1.7; box-shadow: 0 10px 26px rgba(10, 30, 20, 0.1); transition: border-color 0.3s, box-shadow 0.3s; }
.guide-fold .text-link::after { content: none; }
.guide-fold .text-link:hover { border-color: var(--green); text-decoration: none; }
.guide-fold__ph { overflow: hidden; border-radius: 5px; background: #dfe5e1; }
.guide-fold__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s); }
.guide-fold .text-link:hover img { transform: scale(1.05); }
.guide-fold__label { display: block; margin-top: 12px; padding: 0 6px; font-size: 15px; transition: opacity 0.5s ease calc(var(--d, 0s) + 0.25s), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0s) + 0.25s); }
.guide-fold__label::after { content: "\00a0→"; color: var(--accent); }
.guide-fold__toggle { position: absolute; left: 0; right: 0; top: 0; z-index: 8; height: var(--head, 90px); padding: 0; border: 0; background: none; cursor: pointer; }
.guide-fold__toggle:focus-visible { outline-offset: -3px; }
.guide-fold__toggle::before, .guide-fold__toggle::after { content: ""; position: absolute; right: 12px; top: 40px; width: 20px; height: 2px; background: var(--accent); transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.1); }
.guide-fold__toggle::after { transform: rotate(90deg); }
.guide-fold:not(.is-closed) .guide-fold__toggle::before { transform: rotate(45deg); }
.guide-fold:not(.is-closed) .guide-fold__toggle::after { transform: rotate(135deg); }
.guide-fold.is-closed .guide-fold__toggle { bottom: 0; height: auto; }
.guide-fold.is-closed .guide-fold__cards > p { z-index: var(--z); transform: translate3d(calc(var(--dx) + var(--ox) * var(--peek, 1)), calc(var(--dy) + var(--oy) * var(--peek, 1)), 0) rotate(calc(var(--r) * var(--peek, 1))) scale(var(--pile, 1)); }
.guide-fold.is-closed .guide-fold__ph img { transform: scale(1.14); }
.guide-fold.is-closed .guide-fold__label { opacity: 0; transform: translate3d(0, 12px, 0); transition-delay: 0s; }
.guide-fold.is-closed .text-link { box-shadow: 0 14px 34px rgba(10, 30, 20, 0.2); }
.guide-fold.is-measuring, .guide-fold.is-measuring * { transition: none !important; }
.guide-fold.is-peek { --peek: 2.2; }
@media (hover: hover) { .guide-fold.is-closed:hover { --peek: 2.2; } }
@media (max-width: 767px) {
  .guide-fold__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .guide-fold .text-link { font-size: 14px; }
  .guide-fold__label { padding: 0 4px; font-size: 14px; letter-spacing: 0.02em; }
}

/* 条件の札：題だけ見せて畳む */
.term-fold summary { position: relative; display: flex; align-items: center; min-height: 44px; padding-right: 40px; list-style: none; cursor: pointer; }
.term-fold summary::-webkit-details-marker { display: none; }
.term-fold summary::before, .term-fold summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; background: var(--accent); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.term-fold summary::after { transform: rotate(90deg); }
.term-fold[open] summary::after { transform: rotate(0); }
.term-fold summary:hover h3 { color: var(--accent); }
.terms-grid:has(.term-fold) { align-items: start; gap: 20px 40px; }
.terms-grid:has(.terms-photo) .terms-photo { align-self: start; }
.terms-grid:has(.terms-photo) .terms-photo img { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
@supports (interpolate-size: allow-keywords) {
  .term-fold { interpolate-size: allow-keywords; }
  .term-fold::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.4s allow-discrete; }
  .term-fold[open]::details-content { block-size: auto; }
}

/* 下層の節の間を少し詰める。写真つきカードの写真も少し低く */
body:not(.page-home) { --section-y: 96px; }
.feature-grid--builder .feature-card__visual img { aspect-ratio: 16 / 9; }

@media (max-width: 767px) {
  body:not(.page-home) { --section-y: 56px; }
  .cta-band { background-position: calc(50% + 90px) 50%; background-size: auto 112%; }
  /* 3 担当者 */
  .business-info__profile { width: 70%; margin: 32px auto 0; }
  .v2-book { width: 26%; margin: -96px 6% 0 auto; }
  /* 横に送るカード（スマホだけ。HTML に全部あるので JS なしでも読める） */
  .rail { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 calc(100vw - 72px); scroll-snap-align: start; }
  .feature-card { min-height: 100%; }
  .photo-row.rail { margin-top: 28px; }
  .photo-row.rail img:first-child { grid-column: auto; }
  .note-grid.rail .editorial-note { flex: 0 0 calc(100vw - 72px); }
  /* 表の行を札に */
  .data-table--rail { display: block; margin-top: 0; border-top: 0; }
  .table-side { margin-top: 28px; }
  .data-table--rail tr { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
  .data-table--rail th, .data-table--rail td { padding: 0; border: 0; }
  .data-table--rail td { margin-top: 6px; font-size: 15px; line-height: 1.85; }
  .table-side__photo img { aspect-ratio: 16 / 9; object-fit: cover; }
  /* 02 の写真は小さく */
  .side-photo { margin: 22px auto 0; }
  .side-photo img { aspect-ratio: 16 / 10; object-position: 50% 30%; }
  .photo-band { margin-bottom: 40px; }
  /* 見取り図 */
  .builder-stage { margin-top: 28px; }
  .builder { margin-bottom: 14px; }
  .builder-stage .feature-grid { gap: 12px; padding: 4px var(--gutter); }
  .builder-stage .feature-card { flex: 0 0 calc(100vw - 72px); }
  .builder__slot { min-height: 96px; }
  .builder__slot:nth-child(3n + 1) { min-height: 68px; }
  .builder__icon { width: 34px; height: 34px; }
  .feature-grid--builder .feature-card p { font-size: 14px; line-height: 1.8; }
  /* 工程 */
  .steps > li:has(.steps__photo) { padding-bottom: 22px; }
  .terms-grid:has(.term-fold) { gap: 12px; margin-top: 24px; }
  .terms-grid:has(.terms-photo) .terms-photo { grid-column: auto; }
  .terms-grid:has(.terms-photo) .terms-photo img { aspect-ratio: 16 / 8; }
  .v2-controls { margin-top: 12px; }
}