:root{--ink:#091322;--paper:#f4efe6;--red:#b22b37;--gold:#c69a54;--blue:#315e9d;--navH:92px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--navH)}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Yu Mincho","Hiragino Mincho ProN",serif}body:not(:has(.hero)){padding-top:var(--navH)}a{color:inherit;text-decoration:none}.nav{position:fixed;z-index:100;top:0;left:0;width:100%;height:var(--navH);padding:0 5vw;display:flex;align-items:center;gap:4vw;color:#fff;background:transparent;border-bottom:1px solid transparent;transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease,backdrop-filter .4s ease}.nav.isScrolled,body:not(:has(.hero)) .nav{background:#0a1423e6;backdrop-filter:blur(8px);border-bottom-color:var(--gold);box-shadow:0 2px 16px #06101e59}.brand{font-family:Georgia,serif;font-weight:700;letter-spacing:.08em;font-size:18px}.brand i{color:var(--gold);font-style:normal}.nav nav{display:flex;gap:28px;margin-left:auto;font:11px Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}.nav nav a:hover{color:#e5bd78}.noteLink{border:1px solid #ffffff60;padding:13px 20px;font:12px Arial,sans-serif}.navToggle{display:none;margin-left:auto;width:32px;height:24px;position:relative;background:none;border:none;cursor:pointer;padding:0}.navToggle span{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:.25s}.navToggle span:nth-child(1){top:0}.navToggle span:nth-child(2){top:11px}.navToggle span:nth-child(3){top:22px}.navToggle.isOpen span:nth-child(1){transform:translateY(11px) rotate(45deg)}.navToggle.isOpen span:nth-child(2){opacity:0}.navToggle.isOpen span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}.navDrawer{display:none}.hero{position:relative;min-height:780px;height:100vh;overflow:hidden;background:#06101e;color:#fff}.heroArt{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}.heroShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,21,.97) 0%,rgba(3,10,21,.82) 30%,rgba(3,10,21,.1) 68%),linear-gradient(0deg,#06101eaa,transparent 35%)}.heroCopy{position:relative;z-index:2;padding:20vh 0 0 7vw;width:47%}.eyebrow,.sectionNo{font:600 10px Arial,sans-serif;letter-spacing:.26em;color:#d9aa60}.hero h1{font-size:clamp(54px,7vw,108px);line-height:.98;margin:24px 0 30px;letter-spacing:-.05em;font-weight:500}.hero h1 em{color:#d7a65e;font-style:normal}.lead{font-size:16px;line-height:2;letter-spacing:.06em;color:#e6e9ef}.actions{display:flex;align-items:center;gap:25px;margin-top:42px;font-family:Arial,sans-serif}.primary{background:var(--red);padding:18px 24px;font-size:13px;box-shadow:0 10px 35px #0006}.primary span{margin-left:30px}.secondary{font-size:12px;border-bottom:1px solid #fff8;padding:8px 0}.scroll{position:absolute;z-index:2;right:5vw;bottom:45px;writing-mode:vertical-rl;font:9px Arial,sans-serif;letter-spacing:.26em;color:#fff9}.intro{display:grid;grid-template-columns:1fr 1.6fr 1.4fr;gap:5vw;padding:130px 7vw 110px}.intro h2,.sectionHead h2,.worksTitle h2{font-size:clamp(40px,5vw,72px);line-height:1.25;margin:0;font-weight:500;letter-spacing:-.04em}.introText{padding-top:20px}.introText>p{font-size:15px;line-height:2;margin:0 0 20px}.introText blockquote{font-size:26px;line-height:1.6;margin:45px 0 0;padding-left:22px;border-left:3px solid var(--red);color:var(--red)}.threeWays{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid #d8d0c3;border-bottom:1px solid #d8d0c3}.threeWays article{padding:55px 5vw;min-height:270px;border-right:1px solid #d8d0c3}.threeWays b{font:11px Arial,sans-serif;color:var(--red)}.threeWays h3{font-size:32px;margin:18px 0}.threeWays p{font-size:14px;line-height:1.8}.threeWays a{display:inline-block;margin-top:18px;font:11px Arial,sans-serif;letter-spacing:.1em;color:var(--blue)}.toolsPreview{background:#f4efe6;padding:120px 7vw}.toolsPreview .sectionHead{color:var(--ink)}.toolsPreview .sectionHead>p:last-child{color:#5a5648}.toolPreviewGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#0a1423}
.characters{background:#0a1423;color:#f7f0e5;padding:120px 7vw}.sectionHead{display:grid;grid-template-columns:.7fr 1.5fr 1fr;gap:4vw;align-items:end;margin-bottom:55px}.sectionHead>p:last-child{font-size:14px;line-height:2;color:#b8c0cd}.castImage{width:100%;height:min(55vw,640px);object-fit:cover;border:1px solid #d5aa6538;filter:saturate(.85);display:block}.charGrid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:55px;border-top:1px solid #ffffff24}.charGrid>a{display:block;border-bottom:1px solid #ffffff24;border-right:1px solid #ffffff18;transition:background-color .2s}.charGrid>a:hover{background:#ffffff0a}.charGrid article{display:flex;gap:18px;padding:28px 16px}.charGrid article>span{font:10px Arial,sans-serif;color:#d5aa65}.charGrid p{margin:0;color:#7185a5;font:9px Arial,sans-serif;letter-spacing:.18em}.charGrid h3{margin:6px 0;font-size:25px}.charGrid small{color:#aeb7c6;font-size:11px}.charAllLink{display:inline-block;margin-top:36px;color:var(--gold);font:11px Arial,sans-serif;letter-spacing:.12em}.works{padding:120px 7vw;display:grid;grid-template-columns:1fr 2fr;gap:8vw}.worksTitle a{display:inline-block;margin-top:36px;color:var(--red);font:11px Arial,sans-serif;letter-spacing:.12em}.articleList{border-top:1px solid #bfb6aa}.articleList>a{display:grid;grid-template-columns:70px 1fr 30px;gap:20px;align-items:center;padding:28px 0;border-bottom:1px solid #bfb6aa;transition:.25s}.articleList>a:hover{padding-left:12px;color:var(--red)}.articleList b{font:11px Arial,sans-serif;color:var(--red)}.articleList h3{font-size:21px;margin:0 0 7px;line-height:1.5}.articleList p{margin:0;font-size:12px;color:#6b6a67}.observatory{text-align:center;padding:130px 20px;background:#a82734;color:#fff}.observatory>p:first-child{font:9px Arial,sans-serif;letter-spacing:.28em;color:#f2bf9e}.observatory h2{font-size:clamp(44px,6vw,80px);line-height:1.25;margin:28px 0}.observatory>p{line-height:2}.observatory a{display:inline-block;margin-top:30px;padding:16px 27px;border:1px solid #fff;font:12px Arial,sans-serif}footer{padding:60px 7vw 35px;background:#060d18;color:#bac0c9;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start}footer p{font-size:11px;line-height:1.8;margin:0}footer>a{text-align:right;color:#d4a75f;font:12px Arial,sans-serif}footer small{grid-column:1/-1;margin-top:35px;padding-top:20px;border-top:1px solid #ffffff1f;font:8px Arial,sans-serif;letter-spacing:.14em}@media(max-width:850px){:root{--navH:70px}.nav nav{display:none}.navToggle{display:block}.navDrawer{display:block;position:fixed;z-index:99;top:var(--navH);left:0;width:100%;background:#06101ef5;border-bottom:1px solid #ffffff24;padding:8px 6vw 24px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.25s}.navDrawer.isOpen{transform:translateY(0);opacity:1;pointer-events:auto}.navDrawer a{display:block;padding:16px 0;border-bottom:1px solid #ffffff18;color:#fff;font:13px Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}.navDrawer a:last-child{border-bottom:none}.noteLink{padding:10px;margin-left:auto}.hero{min-height:720px}.heroArt{object-position:60% center}.heroShade{background:linear-gradient(90deg,rgba(3,10,21,.96),rgba(3,10,21,.56)),linear-gradient(0deg,#06101ecc,transparent 55%)}.heroCopy{width:90%;padding:18vh 6vw}.hero h1{font-size:58px}.lead br{display:none}.actions{align-items:flex-start;flex-direction:column}.intro{grid-template-columns:1fr;padding:90px 6vw}.threeWays,.sectionHead,.works{grid-template-columns:1fr}.threeWays article{border-right:0;border-bottom:1px solid #d8d0c3}.toolsPreview{padding:90px 6vw}.toolPreviewGrid{grid-template-columns:1fr}.characters{padding:90px 6vw}.sectionHead{align-items:start}.castImage{height:65vw;min-height:330px;width:calc(100% + 12vw);margin:0 -6vw;border-left:none;border-right:none}.charGrid{grid-template-columns:repeat(2,1fr)}.works{padding:90px 6vw}.worksTitle{margin-bottom:25px}footer{grid-template-columns:1fr}footer>a{text-align:left}footer small{grid-column:1}}

/* ─────────────────────────────────────────────
   ポートフォリオ・仕事依頼導線（WORK / CASE STUDIES / HOW IT WORKS / CONTACT）
   既存の明暗リズム（紙→紺→紙→紺）と、色・余白・ボーダー・セクション番号の
   規則をそのまま流用する。新規セクションだけ別サイトに見えないようにする。
   ───────────────────────────────────────────── */
.heroWork{margin:22px 0 0;font-size:15px;line-height:1.9;letter-spacing:.04em;color:#d9c6a4;border-left:2px solid var(--gold);padding-left:16px}
.work{padding:120px 7vw;background:var(--paper)}
/* .sectionHead>p:last-child の既定色 #b8c0cd は紺面用。紙面セクションでは
   コントラストが足りないため、.toolsPreview と同じ濃さへ上書きする */
.work .sectionHead>p:last-child,.flow .sectionHead>p:last-child{color:#5a5648}
.workGrid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #d8d0c3;border-left:1px solid #d8d0c3}
.workGrid article{padding:44px 3vw;border-right:1px solid #d8d0c3;border-bottom:1px solid #d8d0c3;background:#fff}
.workGrid b{font:11px Arial,sans-serif;color:var(--red);letter-spacing:.1em}
.workGrid h3{font-size:26px;margin:16px 0 14px;font-weight:500;letter-spacing:-.02em}
.workGrid p{margin:0;font-size:14px;line-height:1.9;color:#4a4740}
.workNote{margin:28px 0 0;font-size:12px;line-height:1.9;color:#6b6a67;letter-spacing:.04em}
.cases{padding:120px 7vw;background:#0a1423;color:#f7f0e5}
.cases .sectionHead h2{color:#f7f0e5}
.cases .sectionNo{color:#d9aa60}
.cases .sectionHead>p:last-child{color:#b8c0cd}
.caseList{display:grid;gap:1px;background:#ffffff24;border:1px solid #ffffff24}
.caseCard{background:#0d1a2c;padding:44px 3.5vw}
.caseNo{margin:0;font:10px Arial,sans-serif;letter-spacing:.24em;color:#d5aa65}
.caseCard h3{font-size:clamp(22px,2.4vw,32px);line-height:1.45;margin:14px 0 8px;font-weight:500;letter-spacing:-.02em}
.caseProduct{margin:0 0 26px;font:11px Arial,sans-serif;letter-spacing:.12em;color:#aeb7c6;text-transform:uppercase}
.caseCard dl{display:grid;grid-template-columns:88px 1fr;gap:14px 22px;margin:0;padding-top:24px;border-top:1px solid #ffffff18}
.caseCard dt{font:10px Arial,sans-serif;letter-spacing:.16em;color:#d5aa65;padding-top:4px}
.caseCard dd{margin:0;max-width:44em;font-size:14px;line-height:1.95;color:#c8cfda}
.caseLinks{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px;padding-top:22px;border-top:1px solid #ffffff18}
.caseLinks a{font:11px Arial,sans-serif;letter-spacing:.1em;color:var(--gold);transition:.2s}
.caseLinks a:hover{color:#e5bd78}
/* 直後の .works が紙色（body地）のため、flowも紙色だと境界が消える。
   threeWays と同じ白面にして 紙→白→紙 のリズムを保つ */
.flow{padding:120px 7vw;background:#fff;border-top:1px solid #d8d0c3;border-bottom:1px solid #d8d0c3}
.flowSteps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d8d0c3;border-left:1px solid #d8d0c3}
.flowSteps article{padding:40px 2vw;border-right:1px solid #d8d0c3;border-bottom:1px solid #d8d0c3;background:var(--paper)}
.flowSteps b{font:10px Arial,sans-serif;letter-spacing:.18em;color:var(--red)}
.flowSteps h3{font-size:22px;margin:14px 0 12px;font-weight:500}
.flowSteps p{margin:0;font-size:13px;line-height:1.9;color:#4a4740}
/* 直後の footer(#060d18) と暗色が連続するため、下端に境界線を置く */
.contact{padding:130px 7vw;background:#0a1423;color:#f7f0e5;border-bottom:1px solid #ffffff1f}
.contactInner{display:grid;grid-template-columns:1fr 1.15fr;gap:6vw;align-items:start}
.contactCopy .sectionNo{color:#d9aa60}
.contactCopy h2{font-size:clamp(36px,4.4vw,64px);line-height:1.25;margin:18px 0 26px;font-weight:500;letter-spacing:-.04em}
.contactCopy>p:last-child{font-size:14px;line-height:2;color:#b8c0cd;max-width:30em}
.contactBox{border:1px solid #ffffff24;background:#0d1a2c;padding:38px 3vw}
.contactKicker{margin:0 0 26px;font:10px Arial,sans-serif;letter-spacing:.24em;color:#d5aa65}
.contactForm{display:grid;gap:20px}
.contactForm label{display:grid;gap:8px}
.contactForm label>span{font:11px Arial,sans-serif;letter-spacing:.12em;color:#aeb7c6}
.contactForm label>span small{color:#7185a5;font-size:10px;letter-spacing:.08em}
.contactForm input,.contactForm select,.contactForm textarea{width:100%;padding:13px 14px;background:#06101e;border:1px solid #ffffff24;color:#f7f0e5;font-family:inherit;font-size:14px;line-height:1.7;border-radius:0;transition:border-color .2s}
.contactForm textarea{resize:vertical;min-height:120px}
.contactForm input:focus,.contactForm select:focus,.contactForm textarea:focus{outline:none;border-color:var(--gold)}
.contactForm select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#d5aa65 50%),linear-gradient(135deg,#d5aa65 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.contactSubmit{margin-top:6px;padding:17px 24px;background:var(--red);border:none;color:#fff;font:13px Arial,sans-serif;letter-spacing:.08em;cursor:pointer;transition:.25s;box-shadow:0 10px 35px #0006}
.contactSubmit span{margin-left:24px}
.contactSubmit:hover{background:#c73340}
.contactNote{margin:0;font-size:11px;line-height:1.85;color:#7185a5}
.contactRequired{margin:-14px 0 24px;font-size:11px;color:#aeb7c6;letter-spacing:.04em}
/* メーラーが開かない環境向けの逃げ道。送信操作で hidden を外して表示する */
.contactFallback{margin-top:24px;padding:22px;border:1px solid var(--gold);background:#06101e}
.contactFallback[hidden]{display:none}
.contactFallbackHead{margin:0 0 8px;font:11px Arial,sans-serif;letter-spacing:.12em;color:var(--gold)}
.contactFallbackText{margin:0 0 14px;font-size:12px;line-height:1.8;color:#aeb7c6}
.contactFallbackAddr{margin:0 0 14px;font:14px "JetBrains Mono",monospace;color:#f7f0e5;word-break:break-all}
.contactFallbackBody{width:100%;padding:12px;background:#0a1423;border:1px solid #ffffff24;color:#c8cfda;font-family:inherit;font-size:12px;line-height:1.7;resize:vertical}
.contactCopyBtn{margin-top:12px;padding:11px 20px;background:transparent;border:1px solid #ffffff40;color:#f7f0e5;font:12px Arial,sans-serif;letter-spacing:.06em;cursor:pointer;transition:.2s}
.contactCopyBtn:hover{border-color:var(--gold);color:var(--gold)}
/* キーボード操作時のフォーカスを明示する（既存のリンク・ボタンにも適用） */
.contactForm input:focus-visible,.contactForm select:focus-visible,.contactForm textarea:focus-visible,.contactSubmit:focus-visible,.contactCopyBtn:focus-visible,.contactAlt:focus-visible,.caseLinks a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.contactAlt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;margin-top:26px;padding:20px 22px;border:1px solid #ffffff24;transition:.25s}
.contactAlt:hover{border-color:var(--gold);background:#ffffff08}
.contactAlt span{grid-column:1;font:10px Arial,sans-serif;letter-spacing:.16em;color:#aeb7c6}
.contactAlt strong{grid-column:1;font-weight:400;font-size:15px;color:#f7f0e5}
.contactAlt i{grid-column:2;grid-row:1/3;font-style:normal;color:var(--gold);font-size:18px}
@media(max-width:850px){
  .heroWork{font-size:14px;margin-top:18px;padding-left:13px}
  .heroWork br{display:none}
  .work{padding:90px 6vw}
  .workGrid{grid-template-columns:1fr}
  .workGrid article{padding:34px 6vw}
  .cases{padding:90px 6vw}
  .caseCard{padding:34px 6vw}
  .caseCard dl{grid-template-columns:1fr;gap:6px}
  .caseCard dt{padding-top:12px}
  .caseCard dd{padding-bottom:6px}
  .caseLinks{gap:16px;flex-direction:column}
  .flow{padding:90px 6vw}
  .flowSteps{grid-template-columns:1fr}
  .flowSteps article{padding:30px 6vw}
  .contact{padding:90px 6vw}
  .contactInner{grid-template-columns:1fr;gap:44px}
  .contactBox{padding:30px 6vw}
}