/* ==========================================================================
   白泉 — site.css   build 2026-08-14 / v3
   前半は Design 由来のスタイル、後半が仕上げとスマホ対応です。
   ファイルを1枚にまとめてあるのは、読み込み順とキャッシュの事故を防ぐためです。
   ========================================================================== */

/* Design の書き出しに入っていたスタイル */
.s1{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.s2{position:absolute;inset:0;background:#fdfdfc}
.s3{position:absolute;left:18%;top:12%;width:1300px;height:1300px;margin:-650px 0 0 -650px;background:conic-gradient(from 0deg,rgba(255,238,208,.26) 0 3deg,rgba(255,238,208,0) 3deg 24deg,rgba(255,238,208,.2) 24deg 27deg,rgba(255,238,208,0) 27deg 52deg,rgba(255,238,208,.16) 52deg 55deg,rgba(255,238,208,0) 55deg 90deg);opacity:.7;animation:spin 150s linear infinite;transition:opacity 900ms linear}
.s4{position:absolute;left:18%;top:12%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(255,236,204,.92) 0%,rgba(255,226,180,.34) 32%,rgba(255,226,180,0) 66%);opacity:1;transition:opacity 900ms linear}
.s5{position:absolute;left:14%;top:126%;width:240vh;height:240vh;margin-left:-120vh;margin-top:-120vh;transform:rotate(-13deg);opacity:0;transition:opacity 1500ms linear;-webkit-mask-image:linear-gradient(118deg,rgba(0,0,0,0) 10%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 86%);mask-image:linear-gradient(118deg,rgba(0,0,0,0) 10%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 86%)}
.s6{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0) 60%,rgba(158,124,206,.12) 60.9%,rgba(118,168,228,.16) 62.1%,rgba(140,206,180,.16) 63.3%,rgba(250,236,152,.2) 64.5%,rgba(250,182,132,.17) 65.7%,rgba(226,142,170,.13) 66.9%,rgba(255,255,255,0) 68.4%)}
.s7{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0) 62%,rgba(190,216,236,.07) 63.4%,rgba(236,222,182,.07) 64.8%,rgba(230,186,196,.05) 66%,rgba(255,255,255,0) 67.4%)}
.s8{position:absolute;inset:-10%;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,248,250,.8) 45%,rgba(255,255,255,.94));opacity:0;transition:opacity 900ms linear}
.s9{position:absolute;left:-12%;right:-12%;top:38%;height:36%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96),rgba(255,255,255,0));animation:drift 34s ease-in-out infinite;opacity:.45;transition:opacity 900ms linear;will-change:transform}
.s10{position:absolute;inset:-6%;background:linear-gradient(118deg,rgba(64,78,96,.2),rgba(64,78,96,.05) 52%,rgba(64,78,96,.18));opacity:0;transition:opacity 800ms linear;animation:sway 9s ease-in-out infinite}
.s11{position:absolute;inset:0;width:100%;height:100%}
.s12{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1200ms linear}
.s13{display:none;position:absolute;inset:0;opacity:0;background-repeat:no-repeat;background-image:radial-gradient(circle 9px at 8% 14%,rgba(255,255,255,.9),rgba(178,196,210,.42) 62%,rgba(255,255,255,0) 100%),radial-gradient(circle 5px at 15% 62%,rgba(255,255,255,.9),rgba(178,196,210,.4) 60%,rgba(255,255,255,0) 100%),radial-gradient(circle 12px at 27% 31%,rgba(255,255,255,.88),rgba(178,196,210,.4) 64%,rgba(255,255,255,0) 100%),radial-gradient(circle 6px at 34% 82%,rgba(255,255,255,.9),rgba(178,196,210,.4) 60%,rgba(255,255,255,0) 100%),radial-gradient(circle 8px at 44% 22%,rgba(255,255,255,.9),rgba(178,196,210,.4) 62%,rgba(255,255,255,0) 100%),radial-gradient(circle 4px at 52% 55%,rgba(255,255,255,.9),rgba(178,196,210,.38) 58%,rgba(255,255,255,0) 100%),radial-gradient(circle 11px at 61% 74%,rgba(255,255,255,.88),rgba(178,196,210,.4) 64%,rgba(255,255,255,0) 100%),radial-gradient(circle 7px at 69% 18%,rgba(255,255,255,.9),rgba(178,196,210,.4) 60%,rgba(255,255,255,0) 100%),radial-gradient(circle 5px at 76% 44%,rgba(255,255,255,.9),rgba(178,196,210,.38) 58%,rgba(255,255,255,0) 100%),radial-gradient(circle 13px at 84% 66%,rgba(255,255,255,.86),rgba(178,196,210,.4) 64%,rgba(255,255,255,0) 100%),radial-gradient(circle 6px at 91% 28%,rgba(255,255,255,.9),rgba(178,196,210,.4) 60%,rgba(255,255,255,0) 100%),radial-gradient(circle 9px at 96% 88%,rgba(255,255,255,.88),rgba(178,196,210,.4) 62%,rgba(255,255,255,0) 100%),radial-gradient(circle 4px at 22% 95%,rgba(255,255,255,.9),rgba(178,196,210,.38) 58%,rgba(255,255,255,0) 100%),radial-gradient(circle 7px at 57% 6%,rgba(255,255,255,.9),rgba(178,196,210,.4) 60%,rgba(255,255,255,0) 100%),radial-gradient(circle 10px at 3% 44%,rgba(255,255,255,.88),rgba(178,196,210,.4) 62%,rgba(255,255,255,0) 100%),radial-gradient(circle 5px at 40% 46%,rgba(255,255,255,.9),rgba(178,196,210,.38) 58%,rgba(255,255,255,0) 100%)}
.s14{position:absolute;inset:0;background:linear-gradient(180deg,rgba(226,238,255,.9),rgba(226,238,255,.25));opacity:0;transition:opacity 220ms ease-out}
.s15{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 120%,rgba(22,24,26,.05),rgba(22,24,26,0) 60%)}
.s16{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,rgba(74,107,120,.15),rgba(74,107,120,.6));z-index:40;width:0%}
.s17{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:22px 34px;transition:opacity 600ms ease,transform 600ms ease;opacity:1}
.s18{display:flex;flex-direction:column;gap:7px}
.s19{font:400 21px/1 'Shippori Mincho',serif;letter-spacing:.3em}
.s20{font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:.3em;color:rgba(22,24,26,.42)}
.s21{display:flex;align-items:center;gap:30px}
.s22{font:400 12.5px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.12em;padding-bottom:4px;border-bottom:1px solid rgba(22,24,26,.14)}
.s23{font:500 9px 'JetBrains Mono',monospace;color:rgba(22,24,26,.35);margin-left:8px}
.s24{position:fixed;left:26px;top:50%;z-index:31;display:flex;flex-direction:column;align-items:center;gap:13px;transition:opacity 700ms ease,transform 700ms cubic-bezier(.2,.8,.2,1);opacity:0;transform:translateY(-50%) translateX(-18px);pointer-events:none}
.s25{writing-mode:vertical-rl;font:400 15px/1 'Shippori Mincho',serif;letter-spacing:.34em}
.s26{width:1px;height:20px;background:linear-gradient(180deg,rgba(22,24,26,.25),rgba(22,24,26,0))}
.s27{display:flex;flex-direction:column;align-items:center;gap:16px}
.s28{writing-mode:vertical-rl;font:400 12px/1 'Shippori Mincho',serif;letter-spacing:.3em;color:rgba(22,24,26,.6)}
.s29{width:1px;height:20px;background:linear-gradient(180deg,rgba(22,24,26,0),rgba(22,24,26,.25))}
.s30{display:flex;flex-direction:column;align-items:center;gap:5px}
.s31{font:400 13px/1 'Shippori Mincho',serif;letter-spacing:.2em;color:rgba(22,24,26,.72)}
.s32{font:500 8px/1 'JetBrains Mono',monospace;letter-spacing:.16em;color:rgba(22,24,26,.4)}
.s33{display:flex;gap:4px;margin-top:2px}
.s34{width:4px;height:4px;flex:none;border-radius:50%;background:#16181a;transition:background 400ms}
.s35{width:4px;height:4px;flex:none;border-radius:50%;background:rgba(22,24,26,.18);transition:background 400ms}
.s36{position:fixed;right:26px;bottom:26px;z-index:32;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.7);backdrop-filter:blur(16px);border:1px solid rgba(22,24,26,.09);border-radius:999px;padding:7px 7px 7px 20px;box-shadow:0 12px 40px rgba(22,24,26,.1)}
.s37{border:1px solid rgba(22,24,26,.12);background:transparent;border-radius:999px;padding:9px 13px;font:500 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;color:rgba(22,24,26,.55);cursor:pointer}
.s38{font:400 11.5px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.1em;color:rgba(22,24,26,.6)}
.s39{background:#16181a;color:#fff;border-radius:999px;padding:12px 22px;font:500 12px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.14em}
.s40{position:relative;z-index:1;height:100vh;overflow-y:auto;overflow-x:hidden}
.s41{position:relative;z-index:1}
.s42{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:48px;padding:150px 56px 90px;box-sizing:border-box}
.s43{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.34em;color:rgba(22,24,26,.45)}
.s44{margin:30px 0 0;font-family:'Shippori Mincho',serif;font-weight:400;font-size:clamp(38px,4.4vw,66px);line-height:1.5;letter-spacing:.04em;text-wrap:pretty}
.s45{font-weight:600}
.s46{margin:34px 0 0;max-width:40ch;font:300 14.5px/2.3 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.66)}
.s47{display:flex;gap:34px;margin-top:44px;padding-top:22px;border-top:1px solid rgba(22,24,26,.12)}
.s48{font:400 30px/1 'Shippori Mincho',serif}
.s49{font:500 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:rgba(22,24,26,.42);margin-top:9px}
.s50{font-size:15px}
.s51{position:relative;height:66vh;min-height:440px}
.s52{position:absolute;inset:0;border-radius:2px;overflow:hidden;background:repeating-linear-gradient(112deg,rgba(22,24,26,.045) 0 8px,rgba(22,24,26,.015) 8px 16px);box-shadow:0 30px 80px rgba(22,24,26,.08);will-change:transform}
.s53{position:absolute;left:16px;bottom:14px;font:400 10px 'JetBrains Mono',monospace;color:rgba(22,24,26,.4)}
.s54{position:absolute;left:-30px;bottom:-26px;width:190px;background:rgba(255,255,255,.78);will-change:transform;border:1px solid rgba(22,24,26,.08);padding:16px 18px}
.s55{font:500 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:rgba(22,24,26,.4)}
.s56{margin-top:10px;font:400 13px/1.9 'Zen Kaku Gothic New',sans-serif}
.s57{padding:110px 56px 120px}
.s58{display:flex;align-items:baseline;gap:18px;margin-bottom:44px}
.s59{flex:1;height:1px;background:rgba(22,24,26,.12)}
.s60{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}
.s61{margin:0;font:400 40px/1.65 'Shippori Mincho',serif;letter-spacing:.05em}
.s62{margin:32px 0 0;font:300 14px/2.35 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.7)}
.s63{margin:20px 0 0;font:300 14px/2.35 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.7)}
.s64{display:flex;flex-direction:column;gap:1px;background:rgba(22,24,26,.1);border:1px solid rgba(22,24,26,.1)}
.s65{background:rgba(255,255,255,.72);padding:26px 28px}
.s66{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.2em;color:#4a6b78}
.s67{margin:12px 0 0;font:400 14px/1.9 'Shippori Mincho',serif}
.s68{background:rgba(22,24,26,.94);padding:26px 28px}
.s69{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.2em;color:rgba(255,255,255,.5)}
.s70{margin:12px 0 0;font:400 14px/1.9 'Shippori Mincho',serif;color:#fff}
.s71{padding:40px 56px 0}
.s72{display:flex;align-items:baseline;gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(22,24,26,.12)}
.s73{margin:0;font:400 27px/1 'Shippori Mincho',serif;letter-spacing:.2em}
.s74{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.28em;color:rgba(22,24,26,.4)}
.s75{margin-left:auto;font:400 12px/1 'Zen Kaku Gothic New',sans-serif;border-bottom:1px solid rgba(22,24,26,.28);padding-bottom:3px}
.s76{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(22,24,26,.1)}
.s77{background:rgba(255,255,255,.66);padding:38px 30px 44px}
.s78{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:#4a6b78}
.s79{margin:18px 0 12px;font:400 20px/1.6 'Shippori Mincho',serif}
.s80{margin:0;font:300 12.5px/2.1 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.62)}
.s81{margin-top:22px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.1em}
.s82{padding:120px 56px 0}
.s83{display:flex;align-items:baseline;gap:18px;margin-bottom:40px}
.s84{font:400 11.5px/1 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.5)}
.s85{margin:0 0 40px;font:400 38px/1.6 'Shippori Mincho',serif;letter-spacing:.05em}
.s86{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(22,24,26,.1);border:1px solid rgba(22,24,26,.1)}
.s87{background:rgba(255,255,255,.72);padding:34px 30px 38px}
.s88{margin:16px 0 12px;font:400 19px/1.6 'Shippori Mincho',serif}
.s89{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start}
.s90{margin:0;font:400 40px/1.6 'Shippori Mincho',serif;letter-spacing:.05em}
.s91{margin:30px 0 0;font:300 14px/2.35 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.7)}
.s92{position:relative;margin-top:34px;padding:28px 26px 30px}
.s93{position:absolute;left:0;top:0;height:1px;width:100%;background:rgba(22,24,26,.2)}
.s94{position:absolute;left:0;top:0;width:1px;height:100%;background:rgba(22,24,26,.2)}
.s95{position:absolute;right:0;top:0;width:1px;height:100%;background:rgba(22,24,26,.2);transform-origin:50% 0%}
.s96{position:absolute;left:0;bottom:0;height:1px;width:100%;background:rgba(22,24,26,.2);transform-origin:0% 50%}
.s97{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.2em;color:rgba(22,24,26,.42);margin-bottom:16px}
.s98{display:flex;flex-wrap:wrap;gap:9px}
.s99{border:1px solid rgba(22,24,26,.16);padding:9px 15px;font:400 11.5px 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.72)}
.s100{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(22,24,26,.1);border:1px solid rgba(22,24,26,.1)}
.s101{background:rgba(255,255,255,.74);padding:28px 26px}
.s102{margin-top:12px;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:rgba(22,24,26,.42)}
.s103{margin:12px 0 0;font:300 12px/1.95 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.6)}
.s104{text-align:center}
.s105{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.34em;color:rgba(22,24,26,.42)}
.s106{margin:20px 0 0;font:400 34px/1.6 'Shippori Mincho',serif;letter-spacing:.14em}
.s107{margin-top:52px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(22,24,26,.14)}
.s108{padding:22px 20px 34px;border-right:1px solid rgba(22,24,26,.09)}
.s109{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:#4a6b78}
.s110{margin:12px 0 9px;font:400 16px/1.5 'Shippori Mincho',serif}
.s111{margin:0;font:300 12px/2 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.58)}
.s112{padding:22px 20px 34px}
.s113{display:flex;justify-content:center;margin-top:34px}
.s114{font:400 12.5px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.1em;border-bottom:1px solid rgba(22,24,26,.28);padding-bottom:4px}
.s115{min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:120px 56px 140px;text-align:center}
.s116{margin:0;font:400 44px/1.7 'Shippori Mincho',serif;letter-spacing:.06em}
.s117{margin:0;max-width:46ch;font:300 13.5px/2.2 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.6)}
.s118{margin-top:12px;background:#16181a;color:#fff;padding:20px 44px;font:500 13px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.2em}
.s119{padding:150px 56px 140px;max-width:1180px;margin:0 auto}
.s120{margin:26px 0 0;font:400 52px/1.6 'Shippori Mincho',serif;letter-spacing:.06em}
.s121{margin:30px 0 0;max-width:52ch;font:300 14px/2.3 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.65)}
.s122{margin-top:70px;display:flex;flex-direction:column;gap:1px;background:rgba(22,24,26,.1)}
.s123{background:rgba(255,255,255,.72);display:grid;grid-template-columns:150px 1fr 300px;gap:40px;padding:40px 34px;align-items:start}
.s124{margin-top:12px;font:400 11px 'JetBrains Mono',monospace;color:rgba(22,24,26,.42)}
.s125{margin:0 0 14px;font:400 24px/1.5 'Shippori Mincho',serif}
.s126{margin:0;font:300 13px/2.1 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.64)}
.s127{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.s128{border:1px solid rgba(22,24,26,.14);padding:6px 12px;font:400 11px 'Zen Kaku Gothic New',sans-serif}
.s129{border-left:1px solid rgba(22,24,26,.1);padding-left:28px}
.s130{font:400 26px/1 'Shippori Mincho',serif}
.s131{margin-top:14px;font:300 12px/2 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.55)}
.s132{margin-top:70px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(22,24,26,.1)}
.s133{background:rgba(255,255,255,.6);padding:32px 30px}
.s134{margin:0 0 12px;font:400 17px/1.6 'Shippori Mincho',serif}
.s135{margin:0;font:300 12.5px/2.1 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.6)}
.s136{margin-top:60px;display:flex;gap:20px;align-items:center}
.s137{font:400 12.5px/1 'Zen Kaku Gothic New',sans-serif;border-bottom:1px solid rgba(22,24,26,.28);padding-bottom:4px}
.s138{font:400 12.5px/1 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.5)}
.s139{padding:150px 56px 140px;max-width:1080px;margin:0 auto}
.s140{margin:30px 0 0;max-width:50ch;font:300 14px/2.3 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.65)}
.s141{margin-top:68px;position:relative;padding-left:36px}
.s142{position:absolute;left:5px;top:8px;bottom:40px;width:1px;background:linear-gradient(180deg,rgba(74,107,120,.5),rgba(22,24,26,.08))}
.s143{display:flex;flex-direction:column;gap:2px}
.s144{position:relative;background:rgba(255,255,255,.68);border:1px solid rgba(22,24,26,.08);padding:30px 32px;display:grid;grid-template-columns:120px 1fr 250px;gap:34px;align-items:start}
.s145{position:absolute;left:-36px;top:38px;width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid rgba(74,107,120,.7)}
.s146{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.16em;color:#4a6b78}
.s147{margin-top:8px;font:400 10.5px 'JetBrains Mono',monospace;color:rgba(22,24,26,.4)}
.s148{margin:0 0 10px;font:400 21px/1.5 'Shippori Mincho',serif}
.s149{border-left:1px solid rgba(22,24,26,.1);padding-left:24px;font:300 12px/2 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.55)}
.s150{font-weight:500;color:rgba(22,24,26,.75)}
.s151{position:absolute;left:-36px;top:38px;width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid rgba(74,107,120,.5)}
.s152{position:absolute;left:-36px;top:38px;width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid rgba(22,24,26,.25)}
.s153{position:absolute;left:-36px;top:38px;width:11px;height:11px;border-radius:50%;background:#4a6b78}
.s154{padding:150px 56px 150px;max-width:980px;margin:0 auto}
.s155{margin:26px 0 0;font:400 48px/1.6 'Shippori Mincho',serif;letter-spacing:.06em}
.s156{margin-top:56px;display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.s157{background:rgba(255,255,255,.74);border:1px solid rgba(22,24,26,.08);padding:38px 34px;display:flex;flex-direction:column;gap:24px}
.s158{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.s159{display:flex;flex-direction:column;gap:9px}
.s160{font:400 11px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.12em;color:rgba(22,24,26,.55)}
.s161{color:#4a6b78}
.s162{border:0;border-bottom:1px solid rgba(22,24,26,.2);background:transparent;padding:9px 2px;font:400 14px 'Zen Kaku Gothic New',sans-serif;outline:none}
.s163{display:flex;flex-direction:column;gap:11px}
.s164{border:1px solid rgba(22,24,26,.16);padding:10px 17px;font:400 12px 'Zen Kaku Gothic New',sans-serif;cursor:pointer}
.s165{border:1px solid rgba(22,24,26,.16);background:rgba(255,255,255,.6);padding:13px;font:400 13.5px/1.9 'Zen Kaku Gothic New',sans-serif;outline:none;resize:vertical}
.s166{background:#16181a;color:#fff;border:0;padding:19px;font:500 13px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.2em;cursor:pointer}
.s167{margin:0;font:300 11px/1.9 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.45)}
.s168{display:flex;flex-direction:column;gap:30px}
.s169{border-top:1px solid rgba(22,24,26,.14);padding-top:20px}
.s170{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.2em;color:rgba(22,24,26,.42)}
.s171{display:inline-block;margin-top:12px;font:400 17px/1.6 'Shippori Mincho',serif;border-bottom:1px solid rgba(22,24,26,.25)}
.s172{margin-top:10px;font:300 12px/1.9 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.55)}
.s173{margin-top:12px;font:300 12.5px/2 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.6)}
.s174{margin-top:12px;font:400 13px/1.9 'Zen Kaku Gothic New',sans-serif}
.s175{margin-top:6px;font:300 12px/1.9 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.55)}
.s176{border-top:1px solid rgba(22,24,26,.1);padding:34px 56px 40px;display:flex;justify-content:space-between;align-items:flex-end;background:rgba(255,255,255,.5);backdrop-filter:blur(8px)}
.s177{font:400 17px/1 'Shippori Mincho',serif;letter-spacing:.3em}
.s178{margin-top:10px;font:300 11px/1.8 'Zen Kaku Gothic New',sans-serif;color:rgba(22,24,26,.5)}
.s179{font:500 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.2em;color:rgba(22,24,26,.35)}


html,body{margin:0;height:100%;background:#fdfdfc;font-family:"Zen Kaku Gothic New",system-ui,sans-serif;color:#16181a;-webkit-font-smoothing:antialiased}
a{color:#16181a;text-decoration:none}a:hover{color:#4a6b78}
*::selection{background:rgba(74,107,120,.18)}
@keyframes drift{0%{transform:translate3d(-4%,0,0) scaleY(1)}50%{transform:translate3d(4%,-1.5%,0) scaleY(1.08)}100%{transform:translate3d(-4%,0,0) scaleY(1)}}
@keyframes drift2{0%{transform:translate3d(3%,1%,0)}50%{transform:translate3d(-5%,-2%,0)}100%{transform:translate3d(3%,1%,0)}}
@keyframes breathe{0%{opacity:.35}50%{opacity:.75}100%{opacity:.35}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes gust{0%,100%{transform:translate3d(0,0,0) rotate(0)}18%{transform:translate3d(-5px,1px,0) rotate(-.35deg)}42%{transform:translate3d(4px,-1px,0) rotate(.4deg)}66%{transform:translate3d(-2px,0,0) rotate(-.2deg)}84%{transform:translate3d(3px,1px,0) rotate(.25deg)}}
@keyframes sway{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-2.5%,1%,0)}}
::-webkit-scrollbar{width:0}

@media (hover:hover){.hv1:hover{border-color:rgba(22,24,26,.35);color:#16181a}}
@media (hover:hover){.hv2:hover{background:#33474e}}
@media (hover:hover){.hv3:hover{background:rgba(255,255,255,.9)}}
@media (hover:hover){.hv4:hover{background:rgba(255,255,255,.9)}}
@media (hover:hover){.hv5:hover{background:rgba(255,255,255,.9)}}
@media (hover:hover){.hv6:hover{background:#33474e}}
@media (hover:hover){.hv7:hover{background:#33474e}}

/* ==========================================================================
   仕上げ（Design の書き出しには無かった分）
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}

/* 日本語の約物を詰める */
h1,h2,h3,.lead{font-feature-settings:"palt" 1;text-wrap:pretty}

:focus-visible{outline:2px solid #4a6b78;outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:14px 20px;background:#16181a;color:#fff}
.skip:focus{left:0}

/* 相談内容のボタン（元は JS で色を差し込んでいたのを CSS に） */
.chip{background:rgba(255,255,255,.5);color:rgba(22,24,26,.7);transition:background .25s,color .25s}
.chip[aria-pressed="true"]{background:#16181a;color:#fff}
@media (hover:hover){.chip[aria-pressed="false"]:hover{background:rgba(255,255,255,.85)}}

/* 入力欄まわり */
input,textarea,select,button{font-family:inherit}
input,textarea{caret-color:#4a6b78}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:#16181a;
  -webkit-box-shadow:0 0 0 60px #fdfdfc inset;
  box-shadow:0 0 0 60px #fdfdfc inset;
  transition:background-color 9999s;
}
::placeholder{color:rgba(22,24,26,.34)}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* 印刷 */
@media print{
  html,body{background:#fff;color:#000}
  [data-sunray],[data-sun],[data-rainbow],canvas,.skip{display:none !important}
  [data-page]{display:block !important}
  #scroller{position:static !important;height:auto !important;overflow:visible !important}
}

/* 写真スロット：assets/hero.jpg を置くと差し替わり、無ければ枠を出す */
[data-slot]{position:relative;display:block}
[data-slot] img{position:absolute;inset:0}
[data-slot] img + .slot__ph{display:none}
.slot__ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:rgba(22,24,26,.3);
}

/* ==========================================================================
   スマホ・タブレット対応
   Design の書き出しには一切入っていなかったので、ここで足しています。
   .sNN は inline.css（元のインラインstyle）を上書きするための指定です。
   ========================================================================== */

@media (max-width:1024px){

  /* --- 画面上部：ロゴとナビが重なるので縦に積む --- */
  /* 上のバーは元のまま fixed・背景なし。
     スクロールすると JS が opacity を 0 にして溶けるように消えます。
     ここで背景や sticky を足すと「見えない壁」になるので触らない。 */
  .s17{
    flex-wrap:wrap !important;
    gap:4px 16px !important;
    padding:14px 18px !important;
  }
  .s17 nav{gap:16px !important;flex-wrap:wrap !important}
  .s17 nav a{font-size:12px !important}
  .s17 nav a span{display:none !important}   /* SERVICE / PROCESS の英字は省く */

  /* --- 左端の縦レール：スマホでは下の横帯にする ---
     天候表示（晴／CLEAR）もこの中にあるので、消さずに置き場所だけ変えます。
     transform は JS がインラインで書くので !important で上書きします。 */
  .s24{
    left:12px !important;right:auto !important;
    top:auto !important;bottom:76px !important;
    transform:none !important;
    flex-direction:row !important;align-items:center !important;gap:11px !important;
    padding:7px 13px !important;
    background:rgba(255,255,255,.74);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(22,24,26,.09);border-radius:999px;
    max-width:calc(100vw - 24px);
  }
  .s25,.s26,.s29{display:none !important}          /* ロゴと区切り線は重複するので省く */
  .s27{flex-direction:row !important;gap:13px !important}
  .s28{writing-mode:horizontal-tb !important;font-size:11px !important;letter-spacing:.06em !important}
  .s30{flex-direction:row !important;gap:6px !important;align-items:baseline !important}
  .s31{font-size:12px !important;letter-spacing:.08em !important}
  .s32{font-size:8px !important}
  .s33{margin-top:0 !important}

  /* --- 扉：2段組みをやめる --- */
  .s42{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    gap:30px !important;
    padding:34px 20px 70px !important;
  }
  .s42 h1{font-size:clamp(30px,8.2vw,44px) !important;line-height:1.4 !important}

  /* 写真スロットは高さを持たせる（元は隣の段の高さに依存していた） */
  [data-slot]{min-height:230px}

  /* --- 中の段組みをすべて1列に --- */
  .s60,.s89,.s156,.s158,.s100,.s132,.s76,.s86{grid-template-columns:1fr !important}
  .s107{grid-template-columns:repeat(2,1fr) !important}
  .s123{grid-template-columns:1fr !important;gap:16px !important;padding:26px 20px !important}
  .s144{grid-template-columns:1fr !important;gap:14px !important;padding:22px 20px !important}

  /* --- 余白を詰める --- */
  .s57{padding:64px 20px 70px !important}
  .s71{padding:28px 20px 0 !important}
  .s82{padding:70px 20px 0 !important}
  .s115{padding:70px 20px !important;min-height:auto !important}
  .s119,.s139,.s154{padding:70px 20px 80px !important}
  .s176{
    padding:26px 20px 32px !important;
    flex-direction:column !important;gap:14px !important;align-items:flex-start !important;
  }

  /* --- 右下の音量ボタンが本文に被るので小さく --- */
  .s36{right:12px !important;bottom:12px !important;gap:8px !important;padding:8px 10px !important}
  .s36 span{font-size:10px !important}

  /* --- 浮いている補助カードは、画面内に収めつつ視差(data-par)は残す --- */
  .s54{
    left:auto !important;right:8px !important;
    bottom:-14px !important;width:auto !important;max-width:64% !important;
  }

  /* --- 入力欄：iOS の自動拡大を防ぐ --- */
  input,textarea,select{font-size:16px !important}
  .s166{padding:17px !important}
}

@media (max-width:420px){
  .s17 nav{gap:12px !important}
  .s107{grid-template-columns:1fr !important}
  .s42 h1{font-size:clamp(27px,8.4vw,34px) !important}
}


/* ==========================================================================
   スマホの読みやすさ（文字サイズ・余白の詰め直し）
   ========================================================================== */

@media (max-width:1024px){

  /* 内側スクロール枠：モバイルのアドレスバー分を考慮する。
     100vh のままだと下端が隠れ、下部バーが本文に被ります */
  .s40{
    height:100vh !important;
    height:100svh !important;
    overscroll-behavior-y:none;
    -webkit-overflow-scrolling:touch;
  }

  /* 下部の固定バーの分だけ本文の底を空ける */
  .s41{padding-bottom:84px !important}

  /* --- 見出し：40〜52px は狭い画面で崩れるので一段落とす --- */
  .s61,.s90{font-size:clamp(24px,6.4vw,32px) !important;line-height:1.55 !important}
  .s85{font-size:clamp(23px,6vw,30px) !important;line-height:1.55 !important;margin-bottom:26px !important}
  .s116{font-size:clamp(24px,6.4vw,32px) !important;line-height:1.6 !important}
  .s120,.s155{font-size:clamp(26px,7vw,36px) !important;line-height:1.5 !important;margin-top:18px !important}
  .s106{font-size:clamp(22px,5.8vw,28px) !important;line-height:1.55 !important}
  .s73{font-size:22px !important}
  .s125{font-size:19px !important}
  .s130{font-size:21px !important}
  .s148{font-size:18px !important}
  .s79{font-size:17px !important;margin:14px 0 10px !important}
  .s19{font-size:17px !important}

  /* 数字は詰めすぎると読めないので少しだけ下げる */
  .s48{font-size:25px !important}

  /* --- 本文：13px 台だと小さいので底上げ --- */
  .s41 p,.s41 li,.s41 dd{font-size:14.5px !important;line-height:1.95 !important}

  /* --- 罫線で仕切っていた枠は、1列になると線が消えるので上下の罫に --- */
  .s76,.s86,.s100,.s132{gap:1px !important}
  .s107{border-top:1px solid rgba(22,24,26,.14) !important}
  .s108{border-right:none !important;border-bottom:1px solid rgba(22,24,26,.09) !important}

  /* --- 上部：英字ラベルを消して1行に収める --- */
  .s17{padding:12px 16px !important}
  .s17 nav{gap:14px !important}
  .s18{font-size:11px !important;letter-spacing:.12em !important}
}

@media (max-width:420px){
  .s41 p,.s41 li,.s41 dd{font-size:14px !important}
  .s48{font-size:22px !important}
  .s17 nav a{font-size:11.5px !important}
}

@media (max-width:1024px){
  /* NOW のカードが下部バーに隠れるので、順序と余白を整える */
  .s54{margin-top:14px !important;margin-bottom:8px !important}
  /* 写真枠が縦に伸びすぎるので比率で抑える */
  [data-slot]{min-height:0 !important;aspect-ratio:4/3}
  [data-slot] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}