/* 島クリエイト：全ページ共通（色・文字・ヘッダー・メニュー・フッター・章の見出し・出てくる動き・下層の最初の画面）
   読み込む順：base.css → parts.css → ページの CSS（2026-11-03 site.css を分けた） */

/* 島クリエイト：全ページ共通（2026-11-03 下層ページを作るときに style.css から分けた。style.css は比べた記録 a/b/c.html 用に残す）
   決まり：色は橙・墨・白の3つだけ（事例の地だけ薄い灰）／欧文は Inter 900、和文は LINE Seed JP 800・400
   形は角を丸めない四角と、墨の太い罫（2〜6px）。写真は墨→橙のデュオトーンに染める。 */

:root{
  --or:#FF8300; --ink:#141414; --wh:#FFFFFF; --gray:#EDEDED; --or-d:#F07A00; --or-l:#FFF1E2;
  --en:"Inter",system-ui,sans-serif;
  --ja:"LINE Seed JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --pop:cubic-bezier(0.12,1.79,0.18,0.92);
  --out:cubic-bezier(0.19,1,0.22,1);
  --sw:cubic-bezier(0,0.55,0.45,1);
  --g:40px; /* 左右の線（PC） */
  --hd:72px; --hds:60px;
  --bg:var(--wh); --fg:var(--ink); --ac:var(--or);
}

@media (max-width:767px){
  :root{ --g:16px; --hd:56px; --hds:52px; }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hds) + 16px); -webkit-text-size-adjust:100%; overflow-x:clip; }

body{ margin:0; background:var(--wh); color:var(--ink); font-family:var(--ja); font-weight:400; font-size:17px; line-height:1.85; letter-spacing:0.02em; overflow-x:hidden; overflow-x:clip; }

.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

img{ display:block; max-width:100%; }

a{ color:inherit; }

h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0; padding:0; }

ul,ol{ list-style:none; }

.skip{ position:absolute; left:-9999px; top:0; }

.skip:focus{ left:8px; top:8px; z-index:200; background:var(--ink); color:var(--wh); padding:8px 12px; }

:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

/* 写真は元の色のまま見せる（オレンジ一色の重ねがけは 2026-11-03 にやめた） */

.wrap{ padding:0 var(--g); }

/* ---------- ボタン・リンク ---------- */

.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; font-weight:800; font-size:15px; text-decoration:none; letter-spacing:0.04em; border:0; cursor:pointer; font-family:var(--ja); transition:background-color .3s ease,color .3s ease; }

.btn--or{ background:var(--or); color:var(--ink); }

.btn--or:hover,.btn--or:focus-visible,.btn--or:active{ background:var(--ink); color:var(--or); }

.btn--ink{ background:var(--ink); color:var(--wh); }

.btn--ink:hover,.btn--ink:focus-visible,.btn--ink:active{ background:var(--or); color:var(--ink); }

.btn--wh{ background:var(--wh); color:var(--ink); }

.btn--wh:hover,.btn--wh:focus-visible,.btn--wh:active{ background:var(--ink); color:var(--wh); }

.btn--lg{ min-height:60px; padding:0 32px; font-size:17px; }

.ul{ position:relative; text-decoration:none; }

.ul::after,.more::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }

.ul:hover::after,.ul:focus-visible::after,.ul[aria-current="page"]::after,.more:hover::after,.more:focus-visible::after{ transform:scaleX(1); }

.arw{ display:inline-block; margin-left:.5em; transition:transform .6s var(--pop); }

a:hover .arw,a:focus-visible .arw,a:active .arw{ transform:translateX(4px); }

.more{ position:relative; display:inline-flex; align-items:center; font-weight:800; font-size:19px; text-decoration:none; padding:6px 0; }

.mores{ display:flex; flex-wrap:wrap; gap:8px 32px; margin-top:28px; }

/* ---------- ヘッダー ---------- */

.hd{ position:fixed; inset:0 0 auto 0; z-index:50; height:var(--hd); display:flex; align-items:center; gap:32px; padding:0 var(--g); background:var(--wh); border-bottom:2px solid var(--ink); transition:height .3s ease; }

.hd.is-small{ height:60px; }

.hd__logo{ display:flex; align-items:baseline; gap:10px; text-decoration:none; white-space:nowrap; }

/* フッターの大きな社名：左から1文字ずつ出す（2026-11-06 本人の依頼。base.js で1字ずつに分ける） */
.ft__name .fw{ display:inline-block; white-space:nowrap; }
html.js .ft__name .fc{ display:inline-block; opacity:0; transform:translateY(.22em); transition:opacity .35s linear,transform .7s var(--out); transition-delay:calc(var(--i) * 75ms); }
html.js .ft__name.is-in .fc{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ html.js .ft__name .fc{ opacity:1; transform:none; transition:none; } }

/* ロゴの画像（2026-11-05 本人から届いたロゴに差し替え）。元の画像は photos/01_ロゴ/ */
.hd__mark{ display:block; height:28px; width:auto; }

.hd__nav{ display:flex; gap:24px; margin-left:auto; font-size:14px; font-weight:700; white-space:nowrap; }

.hd__cta{ display:flex; gap:8px; }

.hd__menu{ display:none; }

@media (max-width:1180px){
  .hd__nav{ display:none; }
  .hd__cta{ margin-left:auto; }
  .hd__menu{ display:flex; align-items:center; gap:8px; min-height:44px; padding:0 0 0 12px; background:none; border:0; font:inherit; font-weight:800; font-size:14px; color:var(--ink); cursor:pointer; }
}

.hd__bars{ position:relative; width:24px; height:2px; background:var(--ink); }

.hd__bars::before,.hd__bars::after{ content:""; position:absolute; left:0; width:24px; height:2px; background:var(--ink); transition:transform .3s ease; }

.hd__bars::before{ top:-7px; }

.hd__bars::after{ top:7px; }

.hd__menu[aria-expanded="true"] .hd__bars{ background:transparent; }

.hd__menu[aria-expanded="true"] .hd__bars::before{ transform:translateY(7px) rotate(45deg); }

.hd__menu[aria-expanded="true"] .hd__bars::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:767px){
  .hd{ gap:12px; }
  .hd.is-small{ height:52px; }
  .hd__cta{ display:none; }
  .hd__mark{ height:22px; }
  .hd__menu{ margin-left:auto; }
}

/* メニュー（画面全体） */

.menu{ position:fixed; inset:var(--hd) 0 0 0; z-index:49; background:var(--or); overflow:auto; padding:24px var(--g) 96px; clip-path:inset(0 0 100% 0); transition:clip-path .45s cubic-bezier(0.19,1,0.22,1); }

.menu.is-open{ clip-path:inset(0); }

.menu nav{ display:flex; flex-direction:column; max-width:720px; }

.menu a{ display:block; padding:12px 0; border-bottom:2px solid var(--ink); font-weight:800; font-size:22px; text-decoration:none; line-height:1.4; }

.menu a[aria-current="page"]{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:3px; }

.menu__sub{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }

.menu .menu__sub a{ display:inline-flex; padding:0 20px; border:0; font-size:16px; }

.menu__sub .btn{ min-height:52px; }

.band{ display:block; background:var(--or); color:var(--ink); padding:.16em 0 .16em .2em; white-space:nowrap; }

/* ---------- 章の共通 ---------- */

.sec{ position:relative; background:var(--bg); color:var(--fg); }

[data-bg="orange"]{ --bg:var(--or); --fg:var(--ink); --ac:var(--ink); }

[data-bg="ink"]{ --bg:var(--ink); --fg:var(--wh); --ac:var(--or); }

[data-bg="white"]{ --bg:var(--wh); --fg:var(--ink); --ac:var(--or); }

[data-bg="gray"]{ --bg:var(--gray); --fg:var(--ink); --ac:var(--or); }

.h2,.h2s,.h3,.pg__sub{ word-break:auto-phrase; text-wrap:pretty; }

.h2{ font-weight:800; font-size:clamp(30px,4.4vw,64px); line-height:1.25; letter-spacing:0; }

.h2s{ font-weight:800; font-size:clamp(26px,2.6vw,40px); line-height:1.35; letter-spacing:0; }

.h3{ font-weight:800; font-size:clamp(20px,1.7vw,24px); line-height:1.45; }

.mark{ font-style:normal; background:linear-gradient(var(--or),var(--or)) no-repeat 0 0/100% 100%; color:var(--ink); padding:0 .08em; }

[data-bg="orange"] .mark{ background-image:linear-gradient(var(--ink),var(--ink)); color:var(--or); }

.txt{ max-width:36em; font-size:17px; line-height:1.95; }

.txt + .txt{ margin-top:1.2em; }

.lead{ font-weight:700; font-size:clamp(18px,1.6vw,22px); line-height:1.8; max-width:34em; }

.tbd{ display:inline-block; margin-top:20px; padding:4px 10px; border:2px dashed currentColor; font-size:15px; font-weight:700; line-height:1.6; }

.tbds{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:24px; }

.tbds .tbd{ margin-top:0; }

.tbd-i{ font-size:.86em; font-weight:700; }

/* 章の見出し：墨の帯が左から伸び、0.2秒遅れて文字 */

.hb{ position:relative; }

.hb__t{ position:relative; }

html.js .hb::before{ content:""; position:absolute; left:calc(var(--g) * -1); top:-.18em; width:calc(.9em + var(--g)); height:.2em; background:var(--ink); clip-path:inset(0 100% 0 0); transition:clip-path .4s ease; }

[data-bg="ink"] .hb::before{ background:var(--or) !important; }

html.js .hb .hb__t{ opacity:0; transition:opacity .4s ease .2s; }

html.js .hb.is-in::before{ clip-path:inset(0); }

html.js .hb.is-in .hb__t{ opacity:1; }

html.js .hb .mark{ background-size:0 100%; transition:background-size .4s ease .45s; }

html.js .hb.is-in .mark{ background-size:100% 100%; }

/* 出てくる動き（0.5秒・32px） */

html.js .rv{ opacity:0; transform:translateY(32px); transition:opacity .5s var(--out),transform .5s var(--out); }

html.js .rv.is-in{ opacity:1; transform:none; }

html.js .wipe{ clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(0.19,1,0.22,1); }

html.js .wipe.is-in{ clip-path:inset(0); }

.wrap--split{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; }

/* ---------- フッター ---------- */

.ft{ background:var(--wh); color:var(--ink); border-top:2px solid var(--ink); padding:56px 0 40px; overflow:hidden; }

.ft__name{ font-family:var(--en); font-weight:900; font-size:calc((100vw - var(--g) * 2) / 7.2); line-height:.74; letter-spacing:-0.05em; white-space:nowrap; color:var(--ink); padding:0 var(--g); margin-left:-.04em; }

.ft__nav{ display:flex; flex-wrap:wrap; gap:8px 28px; padding:40px var(--g) 0; font-weight:700; font-size:15px; }

.ft__nav a{ text-decoration:none; }

.ft__row{ display:flex; justify-content:space-between; gap:16px; margin:28px var(--g) 0; padding-top:20px; border-top:1px solid var(--ink); font-size:14px; }

/* 右下の固定の導線・スマホの画面下の帯 */

.float{ position:fixed; right:24px; bottom:24px; z-index:40; display:flex; align-items:center; height:64px; padding:0 28px; background:var(--or); color:var(--ink); border:3px solid var(--ink); font-weight:800; font-size:17px; text-decoration:none; transition:background-color .3s ease,color .3s ease; }

.float:hover,.float:focus-visible,.float:active{ background:var(--ink); color:var(--or); }

.spbar{ display:none; }

/* =========================================================
   下層ページ
   ========================================================= */
/* パンくず */

.crumb{ padding:20px var(--g) 0; font-size:13px; font-weight:700; line-height:1.5; }

.crumb ol{ display:flex; flex-wrap:wrap; gap:4px 0; }

.crumb li + li::before{ content:"／"; margin:0 .5em; }

.crumb a{ text-decoration:underline; text-underline-offset:3px; }

.crumb [aria-current]{ color:var(--ink); }

/* ページの最初の画面：トップの CREATE と同じく、欧文の大きな語が白と橙の境目をまたぐ */

.pg{ position:relative; padding-top:var(--hd); background:var(--wh); overflow:hidden; }

.pg__r1{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:0 40px; padding:36px var(--g) 0; background:linear-gradient(to bottom,var(--wh) 0,var(--wh) calc(100% - var(--cut,.42) * var(--wf) * .74),var(--or) calc(100% - var(--cut,.42) * var(--wf) * .74)); }

.pg__w{ display:block; font-family:var(--en); font-weight:900; font-size:var(--wf,14vw); line-height:.74; letter-spacing:-0.045em; white-space:nowrap; margin-left:-.03em; padding-bottom:0; }

.pg__h1{ font-weight:800; font-size:clamp(28px,3.3vw,50px); line-height:1; letter-spacing:0; padding-top:.1em; }

.pg__h1 .band{ display:inline-block; padding:.18em .3em .16em .2em; }

.pg__r2{ background:var(--or); padding:40px var(--g) 64px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:24px 40px; }

.pg__sub{ font-weight:800; font-size:clamp(20px,1.9vw,28px); line-height:1.5; }

.pg__lead{ max-width:36em; font-weight:700; font-size:17px; line-height:1.95; }

.pg__r2 .tbd{ margin-top:16px; }

/* ページ内の目次 */

.toc{ grid-column:2; display:flex; flex-wrap:wrap; margin-top:12px; border-top:2px solid var(--ink); }

.toc a{ display:flex; align-items:center; gap:.4em; min-height:48px; padding:8px 24px 8px 0; font-weight:800; font-size:16px; text-decoration:none; }

.toc a::after{ content:"↓"; font-family:var(--en); font-weight:900; transition:transform .3s var(--pop); }

.toc a:hover::after,.toc a:focus-visible::after{ transform:translateY(3px); }

/* 静かな最初の画面（個人情報・送信の完了） */

.pg--quiet .pg__r1{ display:block; background:none; padding-bottom:40px; border-bottom:3px solid var(--ink); }

.pg--quiet .pg__h1{ font-size:clamp(28px,3vw,44px); line-height:1.35; padding-top:0; }

/* 下層の章 */

.sub{ padding:112px 0; }

.sub + .sub{ border-top:2px solid var(--ink); }

.sub[data-bg="ink"],.sub[data-bg="gray"],.sub[data-bg="ink"] + .sub,.sub[data-bg="gray"] + .sub{ border-top:0; }

.sub .wrap--split > .hb{ position:sticky; top:calc(var(--hds) + 36px); align-self:start; }

.body > * + *{ margin-top:28px; }

.body > .tbds,.body > .tbd{ margin-top:24px; }

.note{ font-size:16px; line-height:1.85; max-width:38em; }

/* 写真の帯（章の終わりで画面の右端まで裁ち落とす） */

.bleed{ margin:64px calc(var(--g) * -1) 0 0; height:clamp(260px,28vw,420px); overflow:hidden; }

.bleed img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   幅ごとの調整
   ========================================================= */
@media (max-width:1180px){
  .pg__r1{ grid-template-columns:1fr; }
  .pg__h1{ padding-top:24px; order:-1; }
  .pg__r1{ padding-top:28px; }
  .pg__w{ margin-top:24px; }
}

@media (max-width:1023px){
  .pg__r2{ grid-template-columns:1fr; }
  .toc{ grid-column:1; }
  .wrap--split{ grid-template-columns:1fr; gap:28px; }
  .sub .wrap--split > .hb{ position:relative; top:auto; }
}

@media (max-width:767px){
  body{ font-size:16px; }
  .float{ display:none; }
  .spbar{ position:fixed; inset:auto 0 0 0; z-index:45; display:grid; grid-template-columns:1fr 1fr; height:64px; border-top:2px solid var(--ink); }
  .spbar a{ display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; text-decoration:none; transition:background-color .3s ease,color .3s ease; }
  .spbar__a{ background:var(--or); color:var(--ink); }
  .spbar__b{ background:var(--ink); color:var(--wh); }
  .spbar__a:active{ background:var(--ink); color:var(--or); }
  .spbar__b:active{ background:var(--or); color:var(--ink); }
  .ft{ padding-bottom:104px; }
  .ft__row{ flex-direction:column; gap:4px; }
  .ft__name{ white-space:normal; font-size:21.5vw; line-height:.8; }
  .ft__nav{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; padding-top:32px; }
  .ft__nav a{ display:flex; align-items:center; min-height:44px; border-bottom:1px solid var(--ink); }
  /* 下層 */
  .crumb{ padding-top:14px; font-size:12px; }
  .pg__r1{ padding:20px var(--g) 0; gap:0; }
  .pg__h1{ font-size:30px; padding-top:16px; }
  .pg__h1 .band{ margin-left:-.2em; }
  .pg__w{ font-size:var(--wfs,22vw); margin-top:22px; }
  .pg__r1{ background:linear-gradient(to bottom,var(--wh) 0,var(--wh) calc(100% - var(--cut,.42) * var(--wfs,22vw) * .74),var(--or) calc(100% - var(--cut,.42) * var(--wfs,22vw) * .74)); }
  .pg__r2{ padding:28px var(--g) 44px; gap:16px; }
  .pg__sub{ font-size:22px; }
  .pg__lead{ font-size:16px; line-height:1.9; }
  .toc{ display:grid; grid-template-columns:1fr 1fr; margin-top:8px; }
  .toc a{ border-bottom:1px solid var(--ink); padding-right:8px; }
  .pg--quiet .pg__r1{ padding-bottom:28px; }
  .pg--quiet .pg__h1{ font-size:26px; }
  .sub{ padding:80px 0; }
  .h2s{ font-size:26px; }
  .bleed{ margin:48px calc(var(--g) * -1) 0; height:240px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  html.js .rv,html.js .hb .hb__t{ opacity:1 !important; transform:none !important; filter:none !important; }
  html.js .wipe,html.js .hb::before{ clip-path:none !important; }
  html.js .hb .mark{ background-size:100% 100% !important; }
}

/* ---------- マウスの動き（js/cursor.js。パソコンだけ。2026-11-03 シンプルな形に変更） ----------
   小さな橙の四角が少し遅れてついてくる。押せる所では大きくなって薄く重なる。入力欄ではふつうのカーソル */
html.has-pt, html.has-pt *{ cursor:none; }
html.has-pt input, html.has-pt textarea{ cursor:text; }
.pt{ position:fixed; left:0; top:0; z-index:300; width:0; height:0; pointer-events:none; opacity:0; transition:opacity .25s ease; }
html.pt-on .pt{ opacity:1; }
.pt::before{ content:""; position:absolute; left:-5px; top:-5px; width:10px; height:10px; background:var(--or); border-radius:50%; outline:1.5px solid var(--ink); transition:transform .35s cubic-bezier(0.19,1,0.22,1),opacity .25s ease,outline-color .25s ease; }
.pt.is-link::before{ transform:scale(4); opacity:.45; outline-color:transparent; }
.pt.is-down::before{ transform:scale(.7); }
.pt.is-link.is-down::before{ transform:scale(3.2); }
.pt.is-text::before{ opacity:0; }
@media (hover:none), (pointer:coarse){ .pt{ display:none; } }
@media (prefers-reduced-motion:reduce){ .pt{ display:none; } html.has-pt, html.has-pt *{ cursor:auto; } }