/* 会社トップ(ラフ)専用。v2のトークンを使う */
.rough-memo {
  margin: var(--space-2) 0 0;
  padding: 10px 12px;
  border: 1px dashed #c9a27a;
  background: #fffbf6;
  color: #8a4100;
  font-size: 12px;
  line-height: 1.7;
}
.is-inverted .rough-memo--dark { border-color: rgba(242,138,31,.5); background: rgba(255,255,255,.04); color: #ffc88c; }
.rough-memo--fixed {
  position: fixed; z-index: 60; left: 50%; bottom: 12px; transform: translateX(-50%);
  margin: 0; white-space: nowrap; box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

.company-catch span { display: inline-block; margin: 0 .25em; }

.photo-placeholder {
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #ece7de 0 12px, #f2eee6 12px 24px);
  color: var(--muted); text-align: center; font-size: 12px; line-height: 1.8;
}
.photo-placeholder--dark { background: repeating-linear-gradient(135deg, #1d1d1d 0 12px, #232323 12px 24px); color: rgba(255,255,255,.5); }

.company-business-lead {
  margin: var(--space-3) 0 0;
  font-size: var(--type-sub); line-height: 1.7; color: rgba(255,255,255,.9);
}
.biz-cards {
  display: grid; gap: var(--space-4) var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 761px) { .biz-cards { grid-template-columns: 1fr 1fr; } }
.biz-card { display: flex; flex-direction: column; text-decoration: none; color: #fff; }
.biz-card-photo { aspect-ratio: 16 / 10; margin: 0 0 var(--space-2); }
.biz-card-no { font-family: "Jost", sans-serif; font-size: var(--type-note); color: rgba(255,255,255,.5); letter-spacing: .12em; }
.biz-card-for { margin: 6px 0 0; font-size: var(--type-note); color: rgba(255,255,255,.62); }
.biz-card h3 { margin: 10px 0 0; font-size: var(--type-sub); font-weight: 500; line-height: 1.5; }
.biz-card-text { margin: var(--space-1) 0 var(--space-2); font-size: var(--type-body); color: rgba(255,255,255,.72); }
.biz-card .view-more { align-self: flex-start; margin-top: auto; }
.biz-card[aria-disabled="true"] { pointer-events: none; }
.biz-card[aria-disabled="true"] .view-more { opacity: .45; }

.company-values { padding-left: var(--page-pad); padding-right: var(--page-pad); }
.company-vision { margin-top: var(--space-3); }
.value-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.value-list li {
  display: grid; grid-template-columns: 40px 1fr; gap: 4px var(--space-2);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
}
.value-list span { grid-row: span 2; font-family: "Jost", sans-serif; font-size: var(--type-note); color: var(--muted); padding-top: .5em; }
.value-list h3 { margin: 0; font-size: var(--type-sub); font-weight: 500; line-height: 1.5; }
.value-list p { margin: 0; font-size: var(--type-body); color: var(--muted); }
@media (min-width: 761px) {
  .value-list li { grid-template-columns: 60px minmax(240px, 0.8fr) 1.2fr; align-items: baseline; }
  .value-list span { grid-row: auto; }
}

/* ---------- 扉 ---------- */
.doors { position: fixed; inset: 0; z-index: 200; display: flex; pointer-events: none; }
.doors.is-skipped { display: none; }
.door {
  position: relative; flex: 1 1 50%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 22px 100%,
    #141414;
  transition: transform 2.2s var(--ease);
  will-change: transform;
}
.door--left { box-shadow: inset -1px 0 0 rgba(255,255,255,.14); }
.door--right { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }
.door-pull {
  position: absolute; top: 50%; width: 18px; height: 46px; margin-top: -23px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 9px;
}
.door--left .door-pull { right: 22px; }
.door--right .door-pull { left: 22px; }
.doors.is-open .door--left { transform: translateX(-101%); }
.doors.is-open .door--right { transform: translateX(101%); }

/* ---------- 扉の奥(ファーストビュー) ---------- */
.gate {
  position: relative; min-height: 100svh;
  display: grid; place-content: center; justify-items: center; text-align: center;
  padding: 120px var(--page-pad) 96px;
}
.gate::after { content: ""; position: absolute; inset: var(--page-pad); border: 1px solid var(--line); pointer-events: none; }
.gate-catch { margin: 0; display: grid; gap: .1em; font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(40px, 7vw, 92px); line-height: 1.35; letter-spacing: .18em; padding-left: .18em; }
.gate-catch span, .gate-mission, .gate-scroll { opacity: 0; filter: blur(14px); transition: opacity 1.8s ease, filter 1.8s ease, letter-spacing 2.4s ease; }
.gate-catch span { letter-spacing: .5em; }
.is-gate-open .gate-catch span { opacity: 1; filter: blur(0); letter-spacing: .18em; }
.is-gate-open .gate-catch span:nth-child(1) { transition-delay: 1.3s; }
.is-gate-open .gate-catch span:nth-child(2) { transition-delay: 2.0s; }
.is-gate-open .gate-catch span:nth-child(3) { transition-delay: 2.7s; }
.gate-mission { margin: clamp(28px, 4vw, 48px) 0 0; font-size: var(--type-body); color: var(--muted); }
.is-gate-open .gate-mission { opacity: 1; filter: blur(0); transition-delay: 3.6s; }
.gate-scroll { position: absolute; bottom: calc(var(--page-pad) + 24px); left: 50%; transform: translateX(-50%);
  margin: 0; font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: .3em; color: var(--muted); }
.is-gate-open .gate-scroll { opacity: 1; filter: blur(0); transition-delay: 4.2s; }

/* ---------- 背景の反転(ミズカラ型) ---------- */
body { transition: background-color .7s var(--ease); }
body.is-inverted { background-color: #111; }
.company-services { padding-left: var(--page-pad); padding-right: var(--page-pad); color: var(--ink); transition: color .7s var(--ease); }
.is-inverted .company-services { color: #fff; }
.company-services .company-business-lead { color: inherit; opacity: .88; }
.company-services .view-more.light { color: inherit; border-color: currentColor; }

.svc-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 18%, transparent); }
.svc {
  display: grid; grid-template-columns: 40px 1fr; gap: 8px var(--space-2); align-items: baseline;
  padding: var(--space-4) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.svc-no { font-family: "Jost", sans-serif; font-size: var(--type-note); opacity: .55; letter-spacing: .12em; }
.svc-verb { margin: 0; font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(36px, 5vw, 72px); line-height: 1.2; letter-spacing: .12em; }
.svc-body { grid-column: 2; }
.svc-body h3 { margin: 0; font-size: var(--type-sub); font-weight: 500; line-height: 1.5; }
.svc-for { margin: 4px 0 0; font-size: var(--type-note); opacity: .6; }
.svc-body p:last-child { margin: var(--space-1) 0 0; font-size: var(--type-body); opacity: .75; max-width: 34em; }
.svc .view-more { grid-column: 2; justify-self: start; margin-top: var(--space-2); }
.view-more.is-disabled { opacity: .4; pointer-events: none; }
@media (min-width: 900px) {
  .svc { grid-template-columns: 60px minmax(200px, .7fr) 1.3fr auto; align-items: center; }
  .svc-body, .svc .view-more { grid-column: auto; margin-top: 0; }
}

/* 事業:大きな文字=解決される状態 / 小さな文字=事業名 */
.svc-verb { font-size: clamp(24px, 3vw, 44px); letter-spacing: .06em; line-height: 1.5; }
.svc-verb span { display: block; }
.svc-name { margin: 0; font-size: var(--type-body); font-weight: 500; }
.svc-name small { display: block; margin-top: 2px; font-size: var(--type-note); font-weight: 400; opacity: .6; }
.svc-body p:last-child { margin-top: var(--space-1); }
@media (min-width: 900px) { .svc { grid-template-columns: 60px minmax(300px, 1fr) 1fr auto; } }

/* 並び:サービス名 → コアメッセージ → 詳細 */
.svc { grid-template-columns: 40px 1fr; }
.svc-name { margin: 0; font-size: var(--type-body); font-weight: 500; letter-spacing: .08em; }
.svc-core { margin: var(--space-2) 0 0; font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(26px, 3.2vw, 46px); line-height: 1.5; letter-spacing: .06em; }
.svc-core span { display: block; }
.svc-detail { margin: var(--space-2) 0 0 !important; font-size: var(--type-body); opacity: .75; max-width: 36em; }
@media (min-width: 900px) {
  .svc { grid-template-columns: 60px 1fr auto; align-items: end; }
}

/* 事業名(英字一語+漢字) */
.svc-name { display: flex; align-items: baseline; gap: 14px; }
.svc-en { font-family: "Jost", sans-serif; font-weight: 500; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: .12em; line-height: 1; }
.svc-ja { font-family: "Shippori Mincho", serif; font-size: var(--type-sub); opacity: .7; letter-spacing: .1em; }
.svc-cat { margin: 14px 0 0; font-size: var(--type-note); letter-spacing: .06em; }
.svc-cat small { margin-left: 1em; font-size: inherit; opacity: .6; }
.svc-core { font-size: clamp(22px, 2.6vw, 36px); }

/* 暖簾の土台(v2の定義は下) */
.noren { position: fixed; inset: 0; z-index: 90; display: flex; pointer-events: none; }
.noren.is-skipped { display: none; }

/* ---------- 表の仕事(白) ---------- */
.omote { padding-left: var(--page-pad); padding-right: var(--page-pad); }
.omote-lead { margin: var(--space-3) 0 0; font-family: "Shippori Mincho", serif; font-size: var(--type-sub); line-height: 1.9; letter-spacing: .08em; }
.omote-lead span { display: block; }
.omote-grid { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 761px) { .omote-grid { grid-template-columns: repeat(3, 1fr); } .omote-grid li:nth-child(2) { margin-top: var(--space-4); } }
.omote-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: repeating-linear-gradient(135deg, #ece7de 0 12px, #f2eee6 12px 24px); }
.omote-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.omote-grid p { margin: 12px 0 0; font-family: "Shippori Mincho", serif; font-size: var(--type-body); letter-spacing: .08em; }
.omote-note { margin: var(--space-2) 0 0; font-size: var(--type-note); color: var(--muted); }

/* 黒の区間の見出し */
.company-business-head { margin: var(--space-3) 0 0; font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.6; letter-spacing: .08em; }
.company-business-head span { display: block; }
.company-services .company-business-lead { font-size: var(--type-body); margin-top: var(--space-2); }
.pc-br { display: none; }
@media (min-width: 900px) { .pc-br { display: inline; } }
.svc-en { text-transform: none; letter-spacing: .04em; }
.svc-en em { font-style: normal; font-weight: 500; letter-spacing: .1em; }

/* ---------- ファーストビュー:左=古き良き日本/中央=コピー/右=最先端 ---------- */
.gate {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  place-content: center; align-items: center;
  padding: calc(var(--page-pad) + 84px) calc(var(--page-pad) + 16px) 96px;
}
.gate-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: repeating-linear-gradient(135deg, #ece7de 0 12px, #f2eee6 12px 24px); }
.gate-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.gate-photo img.is-active { opacity: 1; }
.gate-photo-label { position: absolute; inset: auto 0 12px; text-align: center; font-size: 11px; color: var(--muted); }
.gate-photo img ~ .gate-photo-label { display: none; }
.gate-center { display: grid; justify-items: center; text-align: center; }
/* 写真は暖簾が開いた後に、左右からゆっくり現れる */
.gate-photo { opacity: 0; transition: opacity 1.8s ease .4s; }
.is-gate-open .gate-photo { opacity: 1; }
@media (max-width: 760px) {
  .gate { grid-template-columns: 1fr 1fr; }
  .gate-center { grid-column: 1 / -1; grid-row: 1; padding: 8px 0 4px; }
  .gate-catch { font-size: clamp(40px, 12vw, 56px); }
}
@media (min-width: 761px) {
  .gate { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); }
  .gate-photo { max-height: 72vh; }
}
.gate { justify-items: stretch; justify-content: stretch; align-content: center; }
.gate-photo { width: 100%; justify-self: stretch; }
.gate-center { justify-self: center; }

/* ---------- ファーストビュー v3:人とテクノロジーが向き合い、間にコピー(参考:向かい合う横顔+縦書き) ---------- */
.gate {
  position: relative; display: block; overflow: hidden;
  min-height: 100svh; padding: 0;
  background: #e9e7e3;                       /* 無地のスタジオ背景(写真の地と合わせる) */
}
.gate::after { display: none; }
.gate-face { position: absolute; top: 0; bottom: 0; margin: 0; width: 46%; overflow: hidden; opacity: 0; transition: opacity 2s ease .3s, transform 2.6s var(--ease) .3s; }
.gate-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gate-face--human { left: 0; transform: translateX(-3%); }
.gate-face--human img { object-position: 85% 40%; }
.gate-face--tech { right: 0; transform: translateX(3%); }
.gate-face--tech img { object-position: 15% 40%; }
.is-gate-open .gate-face { opacity: 1; transform: none; }
/* 写真が無い間の仮の形(横顔のシルエット) */
.gate-face:not(:has(img)) { background:
  radial-gradient(ellipse 60% 42% at var(--fx) 42%, #cfcac3 0 98%, transparent 100%); }
.gate-face--human { --fx: 18%; }
.gate-face--tech { --fx: 82%; }
.gate-face-label { position: absolute; bottom: 72px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }
.gate-face img ~ .gate-face-label { display: none; }

.gate-catch {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
  writing-mode: vertical-rl; text-orientation: upright;
  display: block; margin: 0; padding: 0;
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(28px, 4.2vw, 56px); line-height: 1; letter-spacing: .32em;
  color: #1a1a1a; white-space: nowrap;
}
.gate-catch span { display: inline; letter-spacing: .32em; }
.is-gate-open .gate-catch span { letter-spacing: .32em; }
.gate-mission { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(var(--page-pad) + 28px); margin: 0; text-align: center; font-size: var(--type-note); letter-spacing: .14em; color: #555; }
.gate-note { position: absolute; z-index: 2; right: calc(var(--page-pad) + 8px); bottom: var(--page-pad); margin: 0; font-size: 10px; color: #888; }
.gate-scroll { display: none; }
@media (max-width: 760px) {
  .gate-face { width: 50%; }
  .gate-catch { font-size: clamp(26px, 8vw, 36px); }
}
/* 写真の内側の端を背景になじませ、中央の帯を消す */
.gate-face--human img { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, #000 78%, transparent 100%); }
.gate-face--tech img { -webkit-mask-image: linear-gradient(270deg, #000 78%, transparent 100%); mask-image: linear-gradient(270deg, #000 78%, transparent 100%); }
.gate { background: #e6e4e0; }
@media (max-width: 760px) {
  .gate-face { top: 18%; width: 41%; }
  .gate-face--human img { object-position: 94% 30%; }
  .gate-face--tech img { object-position: 6% 30%; }
  .gate-catch { top: 52%; }
}

/* ---------- 暖簾 v2:写真の麻の暖簾。左右に押し分けられ、奥のページが浮かび上がる ---------- */
.noren { gap: 0; perspective: 1400px; background: transparent; }
.noren-rod { display: none; }
.noren-panel {
  position: relative; flex: 1 1 50%; overflow: hidden; background: #2b2a28;
  animation: none; transform-origin: 50% 0;
  transition: transform 2.4s var(--ease), opacity 1s ease 1.5s, filter 2.4s ease;
}
.noren-cloth {
  position: absolute; top: 0; bottom: 0; width: 100vw;
  background: #2b2a28;
  animation: noren-breathe 3.2s ease-in-out infinite alternate;
  transform-origin: 50% 0;
}
.noren-panel--left .noren-cloth { left: 0; }
.noren-panel--right .noren-cloth { right: 0; animation-delay: -1.1s; }
@keyframes noren-breathe { from { transform: skewX(.25deg); } to { transform: skewX(-.25deg); } }
/* 染め抜きのロゴ:麻の地に馴染ませる */
.noren-mark {
  position: absolute; left: 50%; top: 40%; width: min(30vw, 220px); transform: translate(-50%, -50%);
  filter: brightness(0) invert(92%) sepia(10%); opacity: .82; mix-blend-mode: screen;
}
/* 合わせ目の影 */
.noren-panel--left::after, .noren-panel--right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; }
.noren-panel--left::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.35), transparent); }
.noren-panel--right::after { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent); }

/* 開く:上の竿を支点に、布が外へ押し分けられてめくれる */
.noren.is-open .noren-cloth { animation: none; }
.noren.is-open .noren-panel--left { transform: translateX(-78%) rotateY(28deg) skewY(-3deg); opacity: 0; filter: brightness(.7); }
.noren.is-open .noren-panel--right { transform: translateX(78%) rotateY(-28deg) skewY(3deg); opacity: 0; filter: brightness(.7); }

/* 奥のページが浮かび上がる */
.gate { transform: scale(1.04); filter: brightness(.82); transition: transform 3s var(--ease) .2s, filter 2.6s ease .2s; }
.is-gate-open .gate { transform: none; filter: none; }
/* 染め抜きらしく:白く浮かせず、布の織り目を透かす */
.noren-mark { opacity: .5; mix-blend-mode: soft-light; filter: brightness(0) invert(96%) sepia(8%) blur(.4px); }
.noren-mark { opacity: .78; }
.gate { margin-top: 64px; min-height: calc(100svh - 64px); } @media (min-width: 1024px) { .gate { margin-top: 80px; min-height: calc(100svh - 80px); } }

/* ---------- AI駆動経営とは(ミズカラ「認知科学コーチングとは」の位置) ---------- */
.concept { padding-left: var(--page-pad); padding-right: var(--page-pad); background: #fff; }
@media (min-width: 1024px) { .concept { padding-left: clamp(40px, 7vw, 120px); padding-right: clamp(40px, 7vw, 120px); } }
.concept-en { margin: 0; font-family: "Jost", sans-serif; font-size: 13px; letter-spacing: .2em; color: #8a8a8a; }
.concept-title { margin: 10px 0 0; font-size: clamp(28px, 3.4vw, 48px); font-weight: 500; letter-spacing: .06em; }
.concept-def { margin: var(--space-3) 0 0; font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.6; letter-spacing: .04em; }
.concept-def span { display: block; }
.concept-body { margin: var(--space-2) 0 0; max-width: 40em; font-size: var(--type-body); line-height: 2; color: #555; }
.concept-points { list-style: none; margin: var(--space-4) 0 var(--space-3); padding: 0; display: grid; gap: 1px; background: #e4e2de; border: 1px solid #e4e2de; }
@media (min-width: 900px) { .concept-points { grid-template-columns: repeat(3, 1fr); } }
.concept-points li { padding: var(--space-3); background: #fff; }
.concept-points span { font-family: "Jost", sans-serif; font-size: 13px; color: #999; }
.concept-point-en { margin: 14px 0 0; font-family: "Jost", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .18em; color: #B35400; }
.concept-points h3 { margin: 8px 0 0; font-family: "Shippori Mincho", serif; font-weight: 500; font-size: var(--type-sub); line-height: 1.6; }
.concept-points p:last-child { margin: 10px 0 0; font-size: var(--type-body); color: #666; line-height: 1.9; }

/* 依頼12:本文と写真を初期表示とし、JSが宣言した初回だけ幕を有効にする。 */
.intro,.noren { display: none; }
.intro-playing .intro { display: grid; opacity: 1; visibility: visible; transition: none; z-index: 210; }
.intro-playing .intro img { opacity: 1; visibility: visible; animation: intro-logo .9s var(--ease) both; }
.intro-playing .noren { display: flex; z-index: 200; }
.intro-doors-open .intro { display: none; }
.intro-doors-open .noren-panel--left { transform: translateX(-100%) rotateY(28deg); opacity: 0; }
.intro-doors-open .noren-panel--right { transform: translateX(100%) rotateY(-28deg); opacity: 0; }
.noren-panel { transition: transform 1.2s var(--ease),opacity 1.2s var(--ease); }
.noren-cloth { animation: none; background-image: none; }
.noren-picture { display: block; }
.noren-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@keyframes intro-logo { 0% { opacity: 0; } 30%,70% { opacity: 1; } 100% { opacity: 0; } }
.gate { display: grid; grid-template-columns: minmax(0,1fr) clamp(68px,10vw,144px) minmax(0,1fr); grid-template-rows: minmax(430px,1fr) auto; padding: 0; gap: 0; min-height: calc(100svh - 64px); margin-top: 64px; transform: none; filter: none; transition: none; background: #e6e4e0; overflow: visible; }
.gate-face { position: relative; top: auto; bottom: auto; width: 100%; height: 100%; opacity: 1; transform: none; transition: none; grid-row: 1; }
.gate-face--human { grid-column: 1; }
.gate-face--tech { grid-column: 3; }
.gate-face--human img { object-position: 85% 40%; }
.gate-face--tech img { object-position: 15% 40%; }
.gate-catch { position: relative; left: auto; top: auto; transform: none; grid-row: 1; grid-column: 2; justify-self: center; align-self: center; z-index: 1; font-size: clamp(28px,3.2vw,44px); letter-spacing: .2em; }
.gate-catch span,.gate-mission { opacity: 1; filter: none; transition: none; }
.gate-catch span { letter-spacing: .2em; }
.gate-caption { grid-column: 1 / -1; grid-row: 2; position: relative; padding: 24px var(--content-pad); background: #fff; text-align: left; }
.gate-caption .gate-mission { position: static; margin: 0; font-size: 14px; letter-spacing: .04em; text-align: left; color: #666; }
.gate-work { margin: 8px 0 0; font-size: 16px; line-height: 1.9; }
.gate-caption .gate-note { position: static; margin: 12px 0 0; font-size: 14px; text-align: left; color: #666; }
.intro-playing:not(.intro-doors-open) .gate-catch span { opacity: 0; }
.intro-doors-open .gate-catch span { transition: opacity .6s var(--ease); transition-delay: 0s; }
.intro-doors-open .gate-catch span:nth-child(2) { transition-delay: .15s; }
.intro-doors-open .gate-catch span:nth-child(3) { transition-delay: .3s; }
body { transition: background-color .7s var(--ease); }
@media (min-width:768px) and (max-width:1023px) { .gate { grid-template-columns: minmax(0,1fr) 120px minmax(0,1fr); } .gate-face img { object-fit: cover; } }
@media (min-width:1024px) { .gate { margin-top: 80px; min-height: calc(100svh - 80px); } }
@media (max-width:760px) { .gate { grid-template-rows: minmax(400px,62svh) auto; } .gate-catch { font-size: 28px; } .gate-face--human img { object-position: 94% 30%; } .gate-face--tech img { object-position: 6% 30%; } }
@media (prefers-reduced-motion:reduce) { .intro-playing .intro,.intro-playing .noren { display: none; } .intro-playing .gate-catch span { opacity: 1; } }

/* 開幕 v3(2026-10-18 山田さん:演出を毎回しっかり見せる)
   ロゴ1.8秒 → 暖簾が押し分けられて開く(1.8秒)→ 奥のページが少し暗く大きい状態から浮かび上がる(2.4秒)
   → 左右の横顔が外側から寄り、縦書きが1語ずつピントが合うように現れる */
.intro-playing .intro img { animation: intro-logo 1.8s var(--ease) both; }
@keyframes intro-logo { 0% { opacity: 0; transform: scale(.97); } 30%,75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.noren-panel { transition: transform 1.8s cubic-bezier(.65,0,.25,1), opacity .9s ease 1.1s; }
.intro-playing .gate { transform: scale(1.04); filter: brightness(.82); }
.intro-doors-open .gate { transform: none; filter: none; transition: transform 2.4s cubic-bezier(.2,.7,.2,1) .2s, filter 2s ease .2s; }
.intro-playing .gate-face { opacity: 0; }
.intro-playing .gate-face--human { transform: translateX(-3%); }
.intro-playing .gate-face--tech { transform: translateX(3%); }
.intro-doors-open .gate-face { opacity: 1; transform: none; transition: opacity 1.6s ease .5s, transform 2.2s cubic-bezier(.2,.7,.2,1) .5s; }
.intro-playing:not(.intro-doors-open) .gate-catch span { opacity: 0; filter: blur(10px); }
.intro-doors-open .gate-catch span { opacity: 1; filter: none; transition: opacity 1.2s ease, filter 1.4s ease; transition-delay: .9s; }
.intro-doors-open .gate-catch span:nth-child(2) { transition-delay: 1.3s; }
.intro-doors-open .gate-catch span:nth-child(3) { transition-delay: 1.7s; }
@media (prefers-reduced-motion:reduce) { .intro-playing .gate, .intro-playing .gate-face, .intro-playing .gate-catch span { transform: none; filter: none; opacity: 1; } }

/* 2026-10-21:1画面目の写真の高さと説明の帯は 10/18 の元の形に戻した(事業の一文は 10/19 15:14 に山田さん側で外されたため) */

/* 2026-10-21 ミッションの一行を外したので、写真の下の空白を詰めてお知らせを近づける */
.gate { min-height: 0; }
@media (max-width:760px) { .gate { grid-template-rows: minmax(400px, 77svh) auto; } }
.mz-news { padding-top: clamp(40px, 5vw, 72px); }

/* 2026-10-21 1画面目:何の会社かを、写真に重ねたパネルで見せる */
.gate { position: relative; }
.gate-lead { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; margin: 0; padding: 16px 18px 14px; background: rgba(255,255,255,.95); transition: opacity 1.2s ease 2.4s, transform 1.2s var(--ease, ease) 2.4s; }
.gate-lead p { margin: 0; }
.gate-lead-en { font-family: "Jost", sans-serif; font-weight: 500; font-size: 11px; letter-spacing: .16em; color: #777; }
.gate-lead-copy { margin-top: 6px !important; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: #111; }
.gate-lead-svc { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px !important; padding-top: 10px; border-top: 1px solid #e2e2e2; font-size: 12px; }
.gate-lead-svc a { color: #444; text-decoration: none; }
.gate-lead-svc a::after { content: " →"; font-family: "Jost", sans-serif; color: #999; }
.intro-playing:not(.intro-doors-open) .gate-lead { opacity: 0; transform: translateY(8px); transition: none; }
@media (hover: hover) { .gate-lead-svc a { transition: opacity .3s; } .gate-lead-svc a:hover { opacity: .5; } }
@media (min-width: 761px) {
  .gate-lead { left: clamp(24px, 4vw, 64px); right: auto; bottom: clamp(24px, 4vw, 56px); max-width: 480px; padding: 24px 28px 20px; }
  .gate-lead-copy { font-size: 22px; }
  .gate-lead-svc { font-size: 13px; }
}
.gate-lead { text-align: left; }
@media (max-width: 760px) {
  .gate-catch { align-self: start; margin-top: 36px; }
  .gate-lead { padding: 14px 16px 12px; }
  .gate-lead-copy { font-size: 16px; }
  .gate-lead-svc { gap: 2px 12px; margin-top: 8px !important; padding-top: 8px; font-size: 11.5px; }
}
.gate-lead-copy .ph { display: inline-block; }

/* 2026-10-21 1画面目は写真で埋め切る(下にNEWSの見出しがのぞかないように) */
.gate { min-height: 0; grid-template-rows: max(400px, calc(100svh - 64px)) auto; }
.gate-face { min-height: 0; overflow: hidden; }
.gate-face img { height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .gate { grid-template-rows: max(430px, calc(100svh - 80px)) auto; } }
/* 画面が低いスマホ(共有リンクの中・横長のバーが出ている時など)でも、縦書きとパネルを重ねない */
@media (max-width: 760px) {
  .gate-catch { font-size: min(28px, 4.2svh); margin-top: min(36px, 3svh); }
}
@media (max-width: 760px) and (max-height: 640px) {
  .gate-lead-svc { display: none; }
}
/* 縦書きは、ヘッダーとパネルのあいだの真ん中に置く(上に寄りすぎて読みにくかったため) */
@media (max-width: 760px) {
  .gate-catch { align-self: center; margin-top: 0; padding-bottom: 182px; }
}
@media (max-width: 760px) and (max-height: 640px) {
  .gate-catch { padding-bottom: 118px; }
}
