/* 島クリエイト：トップページだけ（最初の画面・流れる不安・答えの章・作る人・地の色の切り替え）
   読み込む順：base.css → parts.css → ページの CSS（2026-11-03 site.css を分けた） */

/* ---------- 最初の画面（トップ。2026-11-03 ユーザーが選んだ形。変えない） ---------- */

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

.hero__w{ display:block; font-family:var(--en); font-weight:900; letter-spacing:-0.04em; line-height:.74; color:var(--ink); white-space:nowrap; }

.hero__r1{ display:grid; grid-template-columns:auto 1fr; align-items:start; gap:0 40px; padding:28px 0 0 var(--g); }

.hero__w--1{ font-size:19vw; margin-left:-.02em; }

.hero__head{ align-self:start; padding-top:.2vw; }

.hero__h1{ display:flex; flex-direction:column; align-items:stretch; gap:10px; font-weight:800; font-size:clamp(40px,4.9vw,72px); line-height:1; letter-spacing:0; }

.hero__r2{ position:relative; display:grid; grid-template-columns:1fr auto; align-items:end; gap:0 32px; padding:2.4vw var(--g) 3vw; background:linear-gradient(to top,var(--or) 0,var(--or) calc(3vw + 7vw),var(--wh) calc(3vw + 7vw)); }

.hero__w--2{ font-size:19vw; margin-right:-.03em; }

.hero__sub{ max-width:300px; font-size:16px; line-height:1.75; font-weight:700; padding-bottom:4px; }

.hero__field{ position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; height:clamp(300px,25vw,380px); background:var(--or); }





.zoom{ animation:zoom 7s cubic-bezier(0.19,1,0.22,1) both; }

@keyframes zoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }


























@media (max-width:767px){
  .hero__r1,.hero__r2{ display:contents; }
  .hero__w--1{ order:1; font-size:29.5vw; margin:18px 0 0 var(--g); }
  .hero__w--2{ order:2; font-size:24.4vw; margin:10px 0 0 var(--g); }
  .hero__head{ order:3; padding-top:0; margin:18px 0 0 var(--g); }
  .hero__h1{ font-size:40px; gap:6px; }
  .hero__h1 .band{ padding:.18em 0 .16em .25em; margin-left:-.25em; }
  .hero{ display:flex; flex-direction:column; }
  .hero__sub{ order:5; max-width:none; margin:0; padding:20px var(--g) 28px; font-size:16px; background:var(--or); }
  .hero__field{ order:4; height:250px; margin-top:22px; grid-template-columns:1fr 1fr; padding-top:0; }
}

@media (min-width:768px) and (max-width:1023px){
  .hero__r2{ grid-template-columns:1fr; background:linear-gradient(to bottom,var(--wh) 0,var(--wh) calc(2.4vw + 7vw),var(--or) calc(2.4vw + 7vw)); }
  .hero__w--2{ justify-self:end; }
  .hero__sub{ order:2; max-width:34em; padding:24px 0 0; }
}

/* 頼む前の不安（2026-11-08 本人が B を選択。流れる帯をやめた）：見出しの帯の下で、4つの問いが1つずつ入れ替わる。動きは js/top.js */

.hero__r2 > *{ position:relative; z-index:1; }

.hq{ position:relative; height:1.4em; margin:18px 0 0; overflow:hidden; font-weight:800; font-size:clamp(16px,1.45vw,22px); line-height:1.4; color:var(--ink); white-space:nowrap; }
.hq span{ position:absolute; left:0; top:0; transition:opacity .45s cubic-bezier(0.19,1,0.22,1),transform .45s cubic-bezier(0.19,1,0.22,1); }
.hq.is-pre span{ opacity:0; transform:translateY(80%); }
.hq.is-out span{ opacity:0; transform:translateY(-80%); }
.hq i{ font-style:normal; font-family:var(--en); font-weight:900; margin-right:.5em; padding:0 .3em; background:var(--ink); color:var(--or); }

@media (max-width:767px){
  .hq{ font-size:17px; margin-top:14px; }
}
@media (min-width:768px) and (max-width:1023px){
  .hq{ font-size:min(14px,1.6vw); margin-top:12px; }
}

@media (min-width:768px) and (max-width:1180px){
  .hero__r2{ padding-top:calc(2.4vw + 52px); }
}

/* SHIMA / CREATE の動き：1字ずつ立ち上がる・スクロールで左右に離れる */

.hero__wi{ display:inline-block; will-change:transform; }

.hero__w .lt{ display:inline-block; }

html.js .hero__w .lt{ animation:rise .7s cubic-bezier(0.19,1,0.22,1) both; animation-delay:calc(var(--i) * 45ms); }

@keyframes rise{ from{ opacity:0; transform:translateY(.38em) skewY(7deg); } to{ opacity:1; transform:none; } }

/* 地の色の切り替え（トップだけ。JS が有効で、画面の高さが普通のとき） */

html.bgmode main{ background-color:var(--mbg,var(--wh)); transition:background-color .4s ease; }

html.bgmode main .sec,html.bgmode main .qa{ background:transparent; }

html.bgmode main .sec[data-bg]{ --bg:transparent; }

html.bgmode main[data-tone="orange"] [data-bg]{ --fg:var(--ink); --ac:var(--ink); }

html.bgmode main[data-tone="ink"] [data-bg]{ --fg:var(--wh); --ac:var(--or); }

html.bgmode main[data-tone="white"] [data-bg],html.bgmode main[data-tone="gray"] [data-bg]{ --fg:var(--ink); --ac:var(--or); }

html.bgmode main .sec{ transition:color .4s ease; }

.q__h{ word-break:auto-phrase; text-wrap:pretty; }
.q__nw{ display:inline-block; } /* 「相談相手で／います」と切れないように（2026-11-08） */

.decl{ font-weight:800; font-size:clamp(22px,2.6vw,38px); line-height:1.65; max-width:22em; }

.decl .ch{ display:inline; opacity:0; filter:blur(4px); transition:opacity .5s linear,filter .5s linear; transition-delay:calc(var(--c) * 25ms); }

.decl.is-in .ch{ opacity:1; filter:none; }

/* ---------- トップ：立ち位置（橙） ---------- */

.stance{ padding:140px 0 150px; overflow:hidden; }

.marq{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); pointer-events:none; overflow:hidden; }

.marq__in{ display:flex; width:max-content; animation:marq 50s linear infinite; }

.marq span{ font-family:var(--en); font-weight:900; font-size:22vw; line-height:.8; letter-spacing:-0.04em; color:var(--or-d); white-space:nowrap; }

@keyframes marq{ to{ transform:translateX(-50%); } }

html.bgmode .marq span{ color:rgba(0,0,0,.055); }

.stance .wrap{ position:relative; }

.stance__body{ display:grid; gap:36px; justify-items:start; margin-top:56px; padding-left:calc(100% / 12 * 3); }

/* ---------- トップ：答えの章（sticky の大きな文字） ---------- */

.qa{ position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); background:var(--bg); color:var(--fg); }

.qa__rail{ position:relative; border-right:2px solid var(--ink); }

.rail{ position:sticky; top:var(--hds); height:min(calc(100vh - var(--hds)), 960px); display:flex; flex-direction:column; }

.rail__panel{ position:relative; flex:1; background:var(--rp,var(--or)); transition:background-color .3s var(--sw) .1s; overflow:hidden; }

.rail__tags{ position:absolute; inset:0; }

.rtag{ position:absolute; left:50%; top:50%; width:max-content; max-width:calc(100% - 64px); text-wrap:balance; word-break:keep-all; overflow-wrap:anywhere; font-weight:800; line-height:1.3; white-space:normal; font-size:clamp(30px,3.6vw,56px); color:var(--rc,var(--ink)); opacity:0; transform:translate(-50%,-30%); transition:opacity .3s var(--sw) .1s,transform .3s var(--sw) .1s; }

.rtag::before{ content:"Q" attr(data-q); display:block; margin-bottom:.2em; font-family:var(--en); font-weight:900; font-size:.42em; letter-spacing:.02em; }

.rtag.is-on{ opacity:1; transform:translate(-50%,-50%); }

.rtag.is-done{ opacity:0; transform:translate(-50%,-70%); }

/* 進み具合の線（2026-11-03 ユーザーが案1を選択。丸と番号はやめた）：3つに区切った線（2026-11-04 問いを5つから3つに、2026-11-08 4つに）、済んだ所は墨・今はオレンジ、右に 02 / 04 */
.dots{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:4px; align-items:center; padding:22px var(--g); background:var(--wh); border-top:2px solid var(--ink); color:var(--ink); }

.dots li{ height:4px; font-size:0; background:currentColor; opacity:.18; transition:opacity .3s var(--sw) .1s,background-color .3s var(--sw) .1s; }

.dots li.is-done{ opacity:1; }

.dots li.is-on{ opacity:1; background:var(--or); }

.dots li.dots__n{ height:auto; opacity:1; background:none; margin-left:18px; font-family:var(--en); font-weight:900; font-size:15px; letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }

.qa__body{ padding:0 var(--g) 40px 64px; }

.q{ padding:120px 0 120px; border-bottom:2px solid var(--ink); }

.q:last-child{ border-bottom:0; }

.q__h{ font-weight:800; font-size:clamp(30px,3.8vw,56px); line-height:1.3; letter-spacing:0; margin-bottom:36px; }

.q__ph{ margin:56px calc(var(--g) * -1) 0 0; height:clamp(320px,30vw,460px); overflow:hidden; }

.q__ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }

.q__ph--g img{ object-position:0% 45%; scale:1.45; transform-origin:0 50%; }

/* ---------- トップ：作る人（墨） ---------- */

.maker{ padding:140px 0; }

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

.maker__role{ margin-top:20px; font-weight:700; font-size:18px; }

.maker__q p{ font-weight:700; font-size:clamp(20px,2.1vw,30px); line-height:1.8; max-width:24em; }

.maker__q::before{ content:""; display:block; width:56px; height:6px; margin-bottom:28px; background:var(--or); }

@media (max-width:1023px){
  .qa__body{ padding-left:40px; }
  .maker__grid{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:767px){
  .stance{ padding:96px 0 104px; }
  .stance__body{ padding-left:0; margin-top:32px; gap:28px; }
  .marq span{ font-size:44vw; }
  .qa{ display:block; }
  .qa__rail{ position:sticky; top:var(--hds); z-index:5; height:0; border-right:0; }
  .q{ scroll-margin-top:72px; }
  .rail{ position:relative; top:0; height:auto; display:grid; grid-template-columns:1fr; }
  .rail__panel{ height:68px; flex:none; }
  .rtag{ font-size:18px; left:var(--g); right:calc(var(--g) + 128px); width:auto; max-width:none; white-space:normal; transform:translate(0,-30%); }
  .rtag::before{ font-size:.6em; margin-bottom:.1em; }
  .rtag.is-on{ transform:translate(0,-50%); }
  .rtag.is-done{ transform:translate(0,-70%); }
  .dots{ position:absolute; right:var(--g); top:30px; width:116px; padding:0; gap:2px; background:transparent; border:0; color:var(--rc,var(--ink)); }
  .dots li{ height:3px; opacity:.25; background:currentColor; }
  .dots li.is-done{ opacity:.65; }
  .dots li.is-on{ opacity:1; height:6px; background:currentColor; }
  .dots li.dots__n{ height:auto; opacity:1; background:none; margin-left:8px; font-size:12px; }
  .qa__body{ padding:68px var(--g) 24px; }
  .q{ padding:64px 0 64px; }
  .q__h{ font-size:28px; margin-bottom:24px; }
  .q__ph{ margin:40px calc(var(--g) * -1) 0; height:280px; }
  .maker{ padding:96px 0; }
}

@media (prefers-reduced-motion:reduce){
  .decl .ch{ opacity:1 !important; transform:none !important; filter:none !important; }
  html.js .hero__w .lt{ animation:none; }
}

/* ---------- 開くときの演出（2026-11-03 ユーザーの依頼。初回だけ・約2.3秒で幕が上がる） ----------
   墨の幕の上に、頼む前の5つの不安が上から1つずつ積み上がる（入れ替えないので最後に全部読める）
   → 0.6秒止める → 不安が消えて「SHIMA CREATE」が左から現れ → 墨・橙の2枚の幕が順に上がってページへ */
.ld{ display:none; }
html.is-loading{ overflow:hidden; }
html.is-loading .ld,.ld.is-out{ display:block; position:fixed; inset:0; z-index:200; pointer-events:none; }
.ld__or,.ld__ink{ position:absolute; inset:0; }
.ld__or{ background:var(--or); }
.ld__ink{ display:grid; place-items:center; background:var(--ink); color:var(--wh); }
.ld__qs{ display:flex; flex-direction:column; align-items:flex-start; gap:.1em; padding:0 var(--g); font-weight:800; font-size:clamp(20px,4.4vw,60px); line-height:1.3; white-space:nowrap; animation:ldqOut .18s ease 1.35s both; }
.ld__qs span{ display:block; opacity:0; animation:ldq .28s cubic-bezier(0.19,1,0.22,1) both; animation-delay:calc(var(--i) * .16s + .08s); }
@keyframes ldq{ from{ opacity:0; transform:translateY(40%); } to{ opacity:1; transform:none; } }
@keyframes ldqOut{ to{ opacity:0; } }
.ld__end{ position:absolute; left:0; right:0; top:50%; margin:0; padding:0 var(--g); transform:translateY(-50%); font-family:var(--en); font-weight:900; font-size:clamp(40px,10vw,150px); letter-spacing:-.04em; line-height:1; white-space:nowrap; text-align:center; color:var(--or); clip-path:inset(0 100% 0 0); animation:ldend .4s cubic-bezier(0.77,0,0.175,1) 1.45s both; }
@keyframes ldend{ to{ clip-path:inset(0 0 0 0); } }
.ld__bar{ position:absolute; left:0; bottom:0; width:100%; height:4px; background:var(--or); transform:scaleX(0); transform-origin:left; animation:ldbar 1.95s cubic-bezier(0.65,0,0.35,1) both; }
@keyframes ldbar{ to{ transform:scaleX(1); } }
.ld.is-out .ld__ink{ transform:translateY(-100%); transition:transform .7s cubic-bezier(0.77,0,0.175,1); }
.ld.is-out .ld__or{ transform:translateY(-100%); transition:transform .7s cubic-bezier(0.77,0,0.175,1) .12s; }
html.is-loading .hero *{ animation-play-state:paused !important; }

/* ---------- 幕が上がったあとの現れ方（html.is-enter。2回目に開いたときもこれだけは出る） ----------
   ヘッダーが上から降りる → 見出しの橙の帯が左から引かれる → 写真の3枚が下から順にせり上がる → 説明文と流れる不安 */
html.is-enter .hd{ animation:enHd .8s cubic-bezier(0.19,1,0.22,1) .1s both; }
html.is-enter .hero__h1 .band{ animation:enBand .75s cubic-bezier(0.77,0,0.175,1) both; animation-delay:.28s; }
html.is-enter .hero__h1 .band + .band{ animation-delay:.4s; }
html.is-enter .hero__sub{ animation:enUp .7s cubic-bezier(0.19,1,0.22,1) .62s both; }
html.is-enter .hq{ animation:enFade 1s ease .8s both; }
@keyframes enHd{ from{ transform:translateY(-100%); } to{ transform:none; } }
@keyframes enBand{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes enMask{ 0%{ clip-path:inset(100% 0 0 0); } 99.9%{ clip-path:inset(0 0 0 0); } 100%{ clip-path:none; } }  /* 最後は切り抜きを外す（はみ出して置いたスマホの枠が切れないように） */
@keyframes enUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes enFade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .ld{ display:none !important; } html.is-enter *{ animation:none !important; } }

/* ---------- 大きな文字ののぞき窓（js/cursor.js の案5。パソコンだけ） ----------
   SHIMA・CREATE に乗せると、カーソルのまわりの丸い範囲だけ、文字の中にパソコン・事務所の写真が見える */
.hero__wi{ position:relative; }
.peek{ position:absolute; left:0; top:0; white-space:nowrap; color:transparent; -webkit-background-clip:text; background-clip:text; background-size:cover; background-position:center; pointer-events:none;
  --r:0px; -webkit-mask-image:radial-gradient(circle at var(--mx,50%) var(--my,50%), #000 0 var(--r), transparent calc(var(--r) + 1px)); mask-image:radial-gradient(circle at var(--mx,50%) var(--my,50%), #000 0 var(--r), transparent calc(var(--r) + 1px));
  transition:--r .45s cubic-bezier(0.19,1,0.22,1); }
.peek.is-on{ --r:120px; }
@property --r{ syntax:"<length>"; inherits:false; initial-value:0px; }
.hero__w--1 .peek{ background-image:url(../assets/photos/8374285.jpg); background-position:30% 70%; }
.hero__w--2 .peek{ background-image:url(../assets/photos/5483165.jpg); background-position:20% 80%; }

/* ヒーローのデザイン例（2026-11-06 本人が決定：波打つ帯）。中央を通る画面が大きくなり、両端は奥へ傾く。動きは js/top.js */
.hero__field--flow{ display:block; overflow:hidden; height:clamp(340px,28vw,420px); }
.flow{ position:absolute; inset:0; display:flex; align-items:center; }
.flow__t{ display:flex; width:max-content; will-change:transform; }
.flow__f{ flex:none; width:clamp(250px,22vw,320px); margin:0 10px; background:var(--ink); padding:0 4px 4px; border-radius:8px; box-shadow:0 18px 40px -16px rgba(0,0,0,.5); will-change:transform; }
.flow__f i{ display:block; height:18px; }
.flow__f img{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; border-radius:2px; }
html.is-enter .flow{ animation:enFade .8s ease .5s both; }
@media (max-width:767px){
  .hero__field--flow{ grid-template-columns:none; height:260px; }
  .flow__f{ width:190px; margin:0 6px; }
  .flow__f i{ height:12px; }
}

/* トップのデザイン例の動き（動きは js/top.js）：マウスで傾く画面をなめらかに戻す。カードの位置は扇の動きに任せる */
.works--top .mk__pc{ transition:transform .35s var(--out); }
.works--top .work:hover .mk{ transform:none; }
.works--top .work{ transform-origin:50% 100%; }
@media (prefers-reduced-motion:reduce){ .works--top .mk__pc{ transition:none; } }

/* ハードルの章（2026-11-08 本人が A に決定）：本文を大きく組み、4つの不安の言葉だけを墨の帯で目立たせる。行の切れ目は固定（本人の指定） */
.rz{ padding:112px 0 120px; }
.rz__in{ padding:0 var(--g); }
.rz__h{ font-weight:800; font-size:clamp(24px,2.2vw,32px); line-height:1.4; }
.rz__p{ margin-top:40px; font-weight:800; font-size:clamp(30px,3.6vw,54px); line-height:1.75; letter-spacing:.01em; }
.rz__l{ display:block; white-space:nowrap; }
.rz__p em{ font-style:normal; background:var(--ink); color:var(--or); padding:.02em .22em; margin:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.rz__f{ display:flex; justify-content:space-between; align-items:end; gap:40px; margin-top:48px; padding-top:24px; border-top:3px solid var(--ink); }
.rz__f p{ font-weight:700; font-size:20px; line-height:1.8; }
@media (max-width:767px){
  .rz{ padding:80px 0 88px; }
  .rz__p{ margin-top:28px; font-size:clamp(17px,5.4vw,24px); line-height:1.95; }
  .rz__l{ white-space:normal; word-break:auto-phrase; }
  .rz__f{ flex-direction:column; align-items:flex-start; gap:16px; }
  .rz__f p{ font-size:16px; }
}


/* 最初の画面の見出しを2行に（2026-11-08 本人が選択）：1行目は橙、2行目は墨の帯。SHIMA の右に収まる大きさ */
.band--ink{ background:var(--ink); color:var(--or); }
@media (min-width:768px){ .hero__h1--2{ font-size:clamp(22px,2.9vw,56px); } }
@media (min-width:768px) and (max-width:1023px){ .hero__h1--2{ font-size:2.6vw; } }
@media (max-width:767px){ .hero__h1--2{ font-size:min(40px,8.6vw); } }

/* Q1 の握手の写真（2026-11-09 本人「握手している部分を中央に」） */
.q__ph--hs img{ object-position:54% 58%; }

/* トップのメッセージ（2026-11-09 会社案内の MESSAGE にそろえた） */
.maker__role--en{ margin:0 0 12px; font-family:var(--en); font-weight:900; letter-spacing:.08em; font-size:16px; }
.tp-nw{ display:inline-block; }

/* スマホの SHIMA / CREATE（2026-11-09 本人「少し右に寄っている」）：左右の余白（16px）にちょうど収まる大きさに */
@media (max-width:767px){
  .hero__w--1{ font-size:calc((100vw - 32px) / 3.27); }
  .hero__w--2{ font-size:calc((100vw - 32px) / 3.9); }
}