/* =========================================================
   AREND コーポレートサイト｜TOPページ 新デザイン版
   巨大タイポグラフィ主導のレイアウト。配色は従来どおり赤/黒/白。
   このファイルは index.html 専用（他ページは style.css のまま）
   ========================================================= */

:root{
  --red:#FF0302;
  --red-dark:#C40200;
  --ink:#111111;
  --paper:#ffffff;
  --mist:#f1efec;
  --gray:#6f6a66;
  --line:#e2ddd7;
  --ease:cubic-bezier(.16,1,.3,1);
  /* 参考サイト（ジリオン）に合わせた角丸とイージング */
  --radius:10px;
  --radius-full:9999px;
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --ease-power3:cubic-bezier(.165,.84,.44,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ width:100%; overflow-x:hidden; }
body{
  background:var(--paper); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
section{ position:relative; }

/* ── 大見出しのワイプ着色 ──
   参考サイトと同じ仕組み。同じ文字を2枚重ね、下は薄く（0.2）、
   上は clip-path で幅0に隠しておき、画面に入ったら左から右へ開いて色をつける */
.ttl-wipe{ display:grid; position:relative; }
/* line-height が 1 未満なので、内側の余白を足して clip-path が文字の上下を
   切ってしまわないようにする（負のマージンで見た目の位置は変えない） */
.ttl-wipe > span{ grid-area:1 / 1 / 2 / 2; display:block; padding:.3em .12em; margin:-.3em -.12em; }
.ttl-wipe .ttl-base{ opacity:.2; }
.ttl-wipe .ttl-fill{ clip-path:inset(0 100% 0 0); }
.ttl-wipe.is-shown .ttl-fill{ clip-path:inset(0); transition:clip-path .8s var(--ease-expo) .2s; }
/* 開ききったら薄い下地を消す。灰色が残らず必ず全部が濃い文字になる */
.ttl-wipe.is-shown .ttl-base{ opacity:0; transition:opacity 0s linear 1.05s; }
@media (prefers-reduced-motion:reduce){
  .ttl-wipe .ttl-base{ opacity:0; }
  .ttl-wipe .ttl-fill{ clip-path:none; }
}

/* 極太コンデンス体を見出し専用に使う */
.display{ font-family:"Anton","Jost",sans-serif; font-weight:400; line-height:.85; letter-spacing:.005em; text-transform:uppercase; }
.en{ font-family:"Jost",sans-serif; }

.wrap{ max-width:1320px; margin:0 auto; padding:0 6vw; }

/* ── 日本語の折り返し ──
   <br class="pc"> は見た目を整えるためのPC用の改行。画面が狭いと
   文章が不自然な位置で切れるので、スマホでは無効にして自然に折り返させる。 */
@media (max-width:760px){ br.pc{ display:none; } }

/* 折り返し位置を文節の切れ目に寄せ、単語の途中で切れないようにする
   （対応していないブラウザでは、これまでどおりの折り返しになるだけ） */
.display, .heading, .jp, .lead, .note, .statement, .kicker,
.hero-jp, .hero-note, .support-card h3, .support-card p,
.flow-step h4, .flow-step p, .news-row .ttl, .check-item,
.faq-item .q, .faq-item .a, .policy p, .policy li, .value-card p{
  word-break:auto-phrase;
  overflow-wrap:break-word;
}
/* 見出しは行ごとの長さを揃えて、1文字だけ余るのを防ぐ */
.heading, .statement, .jp, .big-head .jp, .sec-head .side .jp{ text-wrap:balance; }
.lead, .support-card p, .policy p{ text-wrap:pretty; }

/* ── ローディング画面 ──
   ARENDの◆マークが立ち上がり、そのまま巨大に開いて本編を現す */
html.is-loading, html.is-loading body{ overflow:hidden; height:100%; }

#loader{
  position:fixed; inset:0; z-index:200; overflow:hidden;
  background:var(--paper); display:grid; place-items:center;
  /* JSが動かない環境でも5秒後に必ず消える保険 */
  animation:loaderFailsafe 0s linear 5s forwards;
}
@keyframes loaderFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

#loader .loader-inner{ position:relative; z-index:2; display:flex; align-items:center; gap:15px; }
/* 赤い丸 */
#loader .loader-mark{ width:24px; height:24px; background:var(--red); border-radius:50%; transform:scale(0); flex:none; }
/* ロゴは黒 */
#loader .loader-word{ height:27px; width:auto; filter:brightness(0); opacity:0; }

/* 中央から開いていく赤い丸 */
#loader .loader-wipe{
  position:absolute; left:50%; top:50%; z-index:1;
  width:44px; height:44px; background:var(--red); border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
}

/* ── 画面四隅の装飾（AREND の ◆ マークを大きく使ったフレーム） ── */
.corner-mark{
  position:absolute; z-index:3; pointer-events:none;
  width:clamp(150px,20vw,320px); aspect-ratio:1/1;
  background:var(--paper); transform:rotate(45deg);
}
.corner-mark.tl{ top:calc(clamp(150px,20vw,320px) / -1.9); left:calc(clamp(150px,20vw,320px) / -1.9); }
.corner-mark.br{ bottom:calc(clamp(150px,20vw,320px) / -1.9); right:calc(clamp(150px,20vw,320px) / -1.9); }
.corner-mark.sm{ width:clamp(90px,12vw,190px); }

/* ── ナビ：枠なしで右上にテキスト縦並び ── */
#nav{
  position:fixed; top:36px; right:4vw; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:11px;
  mix-blend-mode:difference;
}
/* ヘッダー写真に重なっている間は反転をやめ、白文字＋影で必ず読めるようにする */
#nav.on-hero, #brand.on-hero{ mix-blend-mode:normal; }
#nav.on-hero a{ text-shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 14px rgba(0,0,0,.45); }
#nav.on-hero a::after{ box-shadow:0 1px 4px rgba(0,0,0,.5); }
#brand.on-hero{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)) drop-shadow(0 2px 12px rgba(0,0,0,.4)); }
#nav a{ font-family:"Jost",sans-serif; color:#fff; font-size:12px; letter-spacing:.1em; position:relative; padding-bottom:2px; }
#nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#fff; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
#nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
#nav a.is-current::after{ transform:scaleX(1); }

/* ロゴは左下に固定 */
#brand{
  position:fixed; left:4vw; bottom:34px; z-index:60;
  display:flex; align-items:center; gap:9px; mix-blend-mode:difference;
}
#brand .dot{ width:9px; height:9px; background:#fff; border-radius:50%; flex:none; }
#brand img{ height:14px; width:auto; filter:brightness(0) invert(1); }

/* ハンバーガー（スマホ） */
.nav-toggle{ display:none; position:fixed; top:22px; right:5vw; z-index:80; flex-direction:column; justify-content:center; gap:5px; width:28px; height:22px; background:none; border:none; padding:0; cursor:pointer; }
/* 既定は濃い色。白い背景の上でも見えるようにする */
.nav-toggle span{ display:block; width:100%; height:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .25s ease, background .3s ease; }
/* ヘッダー写真の上では白＋影 */
.nav-toggle.on-hero span{ background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.45); }
/* メニューを開いている間は白背景の上なので必ず濃い色 */
.nav-toggle.is-open span{ background:var(--ink); box-shadow:none; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{
  position:fixed; inset:0; z-index:70; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(34px,7vw,52px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s var(--ease); }
/* メニュー上部のロゴ（AREND + since… の入ったロゴをそのまま使う） */
.mobile-menu .mm-logo{ display:block; }
.mobile-menu .mm-logo img{ width:min(52vw,230px); height:auto; }
.mobile-menu ul{ list-style:none; display:flex; flex-direction:column; align-items:center; gap:28px; }
.mobile-menu a{ font-family:"Jost",sans-serif; color:var(--ink); font-size:20px; letter-spacing:.12em; }
.mobile-menu a.is-current{ color:var(--red); }

/* ── ヒーロー ── */
#hero{ position:relative; height:100svh; min-height:620px; overflow:hidden; background:var(--ink); }
.hero-bg{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; }
.hero-bg.active{ opacity:1; }
/* 1枚をゆっくりズームさせる（往復させて継ぎ目を出さない） */
/* スマホの縦長トリミングでも日本列島が中央に来るよう、わずかに右寄りを基準にする */
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:55% center; animation:kenburns 28s ease-in-out infinite alternate; transform-origin:center center; }
@keyframes kenburns{ from{ transform:scale(1.0); } to{ transform:scale(1.14); } }
/* 写真が明るいので、文字が乗る左側を重点的に落とす。
   右側（夕日）はほぼ素のまま残して写真の印象を保つ。 */
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg,  rgba(8,8,8,.34) 0%, rgba(8,8,8,.10) 55%, rgba(8,8,8,0) 100%),
    linear-gradient(180deg, rgba(8,8,8,.52) 0%, rgba(8,8,8,.34) 42%, rgba(8,8,8,.64) 100%);
}

.hero-inner{ position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:center; padding:0 6vw; }

.hero-display{
  color:#fff;
  font-size:clamp(52px,11.6vw,196px);
  margin-left:-.03em;
}
.hero-display .row{ display:block; overflow:hidden; position:relative; }
.hero-display .row > span{ display:inline-block; transform:translateY(105%); }


/* 巨大英字の左右に添える日本語 / 補足 */
.hero-side{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,80px); align-items:flex-end; margin-top:clamp(24px,3vw,44px); }
/* 2行とも同じ大きさに揃え、ひとつづきの文章として読ませる */
.hero-jp{ color:#fff; font-size:clamp(17px,2.1vw,28px); line-height:1.6; font-weight:700; opacity:0; }
.hero-jp b{ display:block; font-weight:700; font-size:inherit; margin-top:0; }
.hero-note{ color:rgba(255,255,255,.78); font-size:13px; line-height:2.1; max-width:34ch; opacity:0; }

.hero-ctas{ display:flex; gap:14px; margin-top:clamp(26px,3.2vw,44px); opacity:0; }
.btn-line{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.55); color:#fff;
  font-size:12.5px; letter-spacing:.06em; padding:15px 28px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-line:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-line.solid{ background:var(--red); border-color:var(--red); }
.btn-line.solid:hover{ background:#fff; color:var(--red); border-color:#fff; }

.scroll-hint{ position:absolute; right:4vw; bottom:34px; z-index:4; color:rgba(255,255,255,.75); font-family:"Jost",sans-serif; font-size:11px; letter-spacing:.24em; }

/* ── 巨大見出しブロック（セクション冒頭の共通パーツ） ── */
.big-head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,64px); align-items:end; }
.big-head h2{ font-size:clamp(44px,9vw,148px); }
.big-head .side{ padding-bottom:clamp(6px,1vw,18px); display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.big-head .jp{ font-size:clamp(15px,1.7vw,22px); font-weight:700; line-height:1.75; }
.big-head .note{ font-size:13.5px; color:var(--gray); line-height:2; max-width:38ch; }
@media (max-width:820px){
  .big-head{ grid-template-columns:1fr; align-items:start; }
  .big-head .side{ padding-bottom:0; }
}

/* 円形ボタン */
.circle-btn{
  flex:none; width:clamp(104px,10.5vw,148px); aspect-ratio:1/1; border-radius:50%;
  background:var(--red); color:#fff; display:grid; place-items:center; text-align:center;
  font-family:"Jost",sans-serif; font-size:11.5px; letter-spacing:.06em; line-height:1.7;
  padding:10px; transition:transform .45s var(--ease), background .35s ease;
}
.circle-btn:hover{ transform:scale(1.07); background:var(--ink); }

/* 矢印付きテキストリンク */
.link-arrow{ display:inline-flex; align-items:center; gap:11px; font-family:"Jost",sans-serif; font-size:12.5px; letter-spacing:.06em; padding-bottom:7px; border-bottom:1px solid var(--ink); transition:gap .35s var(--ease); }
.link-arrow::after{ content:"→"; }
.link-arrow:hover{ gap:18px; }
.link-arrow.on-dark{ color:#fff; border-color:rgba(255,255,255,.6); }

/* ── OUR BUSINESS ── */
#business{ background:var(--mist); padding:clamp(80px,11vw,170px) 0 0; overflow:hidden; }
.split{ display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(48px,6vw,96px); background:var(--paper); }
.split-media{ position:relative; min-height:clamp(280px,34vw,520px); overflow:hidden; }
.split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.split:hover .split-media img{ transform:scale(1.05); }
.split-body{ padding:clamp(36px,5vw,76px); display:flex; flex-direction:column; justify-content:center; gap:18px; }
.split-body .en-label{ font-family:"Anton",sans-serif; font-size:clamp(26px,3.4vw,52px); line-height:1; letter-spacing:.01em; }
.split-body h3{ font-size:clamp(18px,2vw,27px); line-height:1.6; font-weight:700; }
.split-body p{ font-size:14px; line-height:2.1; color:var(--gray); }
.split-body .link-arrow{ align-self:flex-start; margin-top:8px; }
@media (max-width:820px){
  .split{ grid-template-columns:1fr; }
  .split-media{ min-height:240px; }
}

/* ── PARTNERS ── */
#partners{ padding:clamp(80px,11vw,170px) 0; }
.logo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(40px,5vw,72px); }
.logo-grid > div{ aspect-ratio:1/1; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:16px; transition:border-color .35s ease, background .35s ease; }
/* ▼ ロゴはリンクではないため、ホバーの反応は無し（押せると誤解させないため）。
      リンクを貼ることになったら、この行と下の行のコメント記号を外してください
.logo-grid > div:hover{ border-color:var(--red); background:#fff; }
▲ ここまで */
/* ロゴは最初から元の色で表示する */
.logo-grid img{ max-width:80%; max-height:56%; object-fit:contain; }
/* .logo-grid > div:hover img{ transform:scale(1.04); }  ← ホバー拡大も無し */

/* 企業名つき（PARTNERSページ）：枠は中の .logo-cell が持つ */
.logo-grid.with-name > div{ aspect-ratio:auto; border:none; border-radius:0; display:block; padding:0; }
/* .logo-grid.with-name > div:hover{ background:none; }  ← 上のホバーを打ち消すための指定。今は不要 */
.logo-grid.with-name .logo-cell{
  aspect-ratio:1/1; border:1px solid var(--line); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; padding:16px;
  transition:border-color .35s ease, background .35s ease;
}
/* .logo-grid.with-name > div:hover .logo-cell{ border-color:var(--red); background:#fff; }  ← 同上 */
.logo-name{ margin-top:15px; text-align:center; font-size:13.5px; font-weight:700; line-height:1.6; }
.logo-name small{ display:block; margin-top:5px; font-size:10.5px; font-weight:400; color:var(--gray); }
@media (max-width:760px){ .logo-grid{ grid-template-columns:repeat(2,1fr); } }

/* ── NEWS ── */
#news{ padding:0 0 clamp(80px,11vw,170px); }
.news-list{ margin-top:clamp(36px,4vw,60px); border-top:1px solid var(--line); }
.news-row{ display:grid; grid-template-columns:130px 92px 1fr auto; gap:24px; align-items:center; padding:26px 4px; border-bottom:1px solid var(--line); transition:padding-left .35s var(--ease); }
.news-row:hover{ padding-left:14px; }
.news-row .date{ font-family:"Jost",sans-serif; font-size:13px; color:var(--gray); }
.news-row .tag{ font-family:"Jost",sans-serif; font-size:10.5px; letter-spacing:.06em; color:var(--red); border:1px solid var(--red); padding:4px 10px; text-align:center; }
.news-row .ttl{ font-size:14.5px; line-height:1.7; }
.news-row .arw{ color:var(--gray); }
@media (max-width:760px){
  .news-row{ grid-template-columns:auto 1fr; gap:10px 14px; }
  .news-row .ttl{ grid-column:1 / -1; }
  .news-row .arw{ display:none; }
}

/* ── 全面写真（パララックス） ── */
.photo-band{ height:clamp(320px,52vh,620px); overflow:hidden; position:relative; }
.photo-band .bg{ position:absolute; left:0; right:0; top:-18%; bottom:-18%; background-size:cover; background-position:center; will-change:transform; }
.photo-band .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,8,.42) 0%, rgba(8,8,8,.28) 50%, rgba(8,8,8,.5) 100%); }

/* ── 赤いバー（流れる文字） ── */
.marquee{ background:var(--red); overflow:hidden; padding:clamp(16px,2vw,28px) 0; }
.marquee-track{ display:flex; width:max-content; animation:flow 30s linear infinite; }
.marquee-track span{ font-family:"Anton",sans-serif; font-size:clamp(30px,6vw,86px); line-height:1; color:#fff; padding-right:4vw; white-space:nowrap; }
@keyframes flow{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ── OUR MISSION ── */
#mission{ padding:clamp(96px,13vw,200px) 0; background:var(--paper); text-align:center; }
#mission .label{ font-family:"Anton",sans-serif; font-size:clamp(38px,7.5vw,120px); line-height:.9; color:var(--mist); letter-spacing:.01em; }
#mission .statement{ font-size:clamp(19px,2.5vw,37px); font-weight:700; line-height:1.85; margin-top:clamp(-14px,-1.4vw,-8px); position:relative; }
#mission .circle-btn{ margin:clamp(34px,4vw,56px) auto 0; }

/* ── CONTACT ── */
/* TOPページ最終セクション。下の全画面フッターが黒なので明るい背景にする */
#contact{ background:var(--mist); color:var(--ink); padding:clamp(80px,11vw,168px) 0; text-align:center; overflow:hidden; }
#contact .display{ font-size:clamp(46px,10vw,168px); color:var(--ink); }
#contact p{ margin-top:22px; color:var(--gray); font-size:14.5px; line-height:2; }
#contact .btn-line{ margin-top:34px; border-color:var(--ink); color:var(--ink); background:transparent; }
#contact .btn-line:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
#contact .btn-line.solid{ background:var(--red); border-color:var(--red); color:#fff; }
#contact .btn-line.solid:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ▼ 旧フッターのCSS（ジリオン型の全画面フッターに変更したため不使用。復活時はこの行と末尾の行のコメント記号を外す）
footer{ padding:clamp(48px,6vw,78px) 6vw 40px; border-top:1px solid var(--line); font-size:12px; color:var(--gray); }
footer .f-top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; }
footer .f-logo{ display:flex; align-items:center; gap:9px; }
footer .f-logo .dot{ width:9px; height:9px; background:var(--red); transform:rotate(45deg); }
footer .f-logo img{ height:14px; }
footer .f-tag{ margin-top:14px; font-size:12.5px; color:var(--ink); }
footer nav{ display:flex; gap:26px; flex-wrap:wrap; }
footer nav a{ font-family:"Jost",sans-serif; font-size:12px; letter-spacing:.05em; }
footer nav a:hover{ color:var(--red); }
footer .f-info{ margin-top:34px; display:flex; gap:26px; flex-wrap:wrap; }
footer .social{ display:flex; gap:12px; margin-top:20px; }
footer .social a{ width:32px; height:32px; border:1px solid var(--line); display:grid; place-items:center; transition:border-color .3s ease, color .3s ease; }
footer .social a:hover{ border-color:var(--red); color:var(--red); }
footer .social svg{ width:14px; height:14px; }
footer .copy{ margin-top:28px; }
▲ ここまで */

/* ── フッター：スクロールで下から現れ、ロゴが拡大する全画面フッター ──
   参考サイトと同じ構造。フッター自身は100vhの箱で clip-path:inset(0) を掛け、
   中身を position:fixed にすることで「フッターの見えている範囲だけに描画」される。
   拡大率はスクロール進捗 --p（0→1）で 0.85 → 1.0 に変化する */
.site-footer{
  --p:0; --footer-scale:.85;
  position:relative; height:100vh; min-height:560px;
  background:var(--ink); color:#fff;
  clip-path:inset(0);
}
/* スマホのアドレスバー分を考慮 */
@supports (height:100svh){ .site-footer{ height:100svh; } }
/* フッターの巨大ロゴが出たら、左下の固定ロゴは引っ込める（同じロゴが2つ見えないように） */
html.is-footer-shown #brand{ opacity:0; pointer-events:none; transition:opacity .4s ease; }
.site-footer .footer-inner{
  position:fixed; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(40px,6vw,70px) 6vw;
}
.site-footer .footer-logo{
  display:block; width:min(72vw,760px);
  transform:scale(calc(var(--p) * (1 - var(--footer-scale)) + var(--footer-scale)));
  transition:transform .6s var(--ease-power3);
}
.site-footer .footer-logo img{ width:100%; height:auto; filter:brightness(0) invert(1); }
.site-footer .footer-nav{
  display:flex; gap:clamp(16px,2.6vw,34px); flex-wrap:wrap; justify-content:center;
  margin-top:clamp(28px,4vw,54px);
  transform:scale(calc(var(--p) * (1 - var(--footer-scale)) + var(--footer-scale)));
  transition:transform .8s var(--ease-power3);
}
.site-footer .footer-nav a{ font-family:"Jost",sans-serif; font-size:13px; letter-spacing:.08em; color:#fff; opacity:.82; transition:opacity .3s ease, color .3s ease; }
.site-footer .footer-nav a:hover{ opacity:1; color:var(--red); }
/* スクロール追従中はトランジションを切って、指の動きにそのまま追従させる */
.site-footer.is-tracking .footer-logo, .site-footer.is-tracking .footer-nav{ transition:none; will-change:transform; }

.site-footer .footer-meta{ margin-top:clamp(34px,5vw,66px); text-align:center; font-size:12px; color:rgba(255,255,255,.62); }
.site-footer .f-tag{ font-size:12.5px; color:rgba(255,255,255,.86); }
.site-footer .f-info{ margin-top:16px; display:flex; gap:10px 26px; flex-wrap:wrap; justify-content:center; }
.site-footer .social{ display:flex; gap:12px; margin-top:20px; justify-content:center; }
.site-footer .social a{ width:34px; height:34px; border:1px solid rgba(255,255,255,.28); border-radius:var(--radius-full); display:grid; place-items:center; color:#fff; transition:border-color .3s ease, color .3s ease, background .3s ease; }
.site-footer .social a:hover{ border-color:var(--red); background:var(--red); }
.site-footer .social svg{ width:15px; height:15px; }
.site-footer .copy{ margin-top:22px; }
.site-footer .copy a{ color:rgba(255,255,255,.82); text-decoration:underline; text-underline-offset:3px; }
.site-footer .copy a:hover{ color:var(--red); }
.site-footer .copy .sep{ margin:0 10px; opacity:.5; }
@media (max-width:760px){
  .site-footer .footer-nav{ gap:14px 22px; }
  .site-footer .footer-meta{ font-size:11.5px; }
}

/* 仮モックアップ表示 */
.mock-tag{ position:fixed; left:14px; bottom:14px; z-index:65; background:rgba(0,0,0,.6); color:#fff; font-size:11px; letter-spacing:.04em; padding:4px 9px; border-radius:3px; pointer-events:none; }

/* スクロールで出現 */
.rise{ opacity:0; transform:translateY(34px); }

@media (max-width:760px){
  #nav{ display:none; }
  .nav-toggle{ display:flex; }
  #brand{ left:5vw; bottom:24px; }
  .scroll-hint{ display:none; }
  .hero-side{ flex-direction:column; align-items:flex-start; gap:18px; }
}

@media (prefers-reduced-motion:reduce){
  .hero-bg img{ animation:none; }
  .marquee-track{ animation:none; }
  .hero-display .row > span, .hero-jp, .hero-note, .hero-ctas, .rise{ opacity:1 !important; transform:none !important; }
}


/* =========================================================
   ここから下層ページ用（ABOUT / SERVICE / WORKS / PARTNERS / NEWS / CONTACT）
   ========================================================= */

/* ── 下層ページのヘッダー：全面写真＋巨大英字 ── */
.page-hero{
  position:relative; min-height:clamp(420px,62vh,660px);
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center; overflow:hidden;
  /* 文章量が多いページ（ABOUT など）でも英字見出しの上に余白が残るようにする */
  padding:clamp(150px,17vw,230px) 0 clamp(48px,6vw,86px);
}
/* 明るい写真でも白文字が読めるよう、文字が乗る左側を重点的に落とす。
   右側は素のまま残して写真の印象を保つ（TOPのファーストビューと同じ考え方）。 */
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,  rgba(8,8,8,.36) 0%, rgba(8,8,8,.10) 60%, rgba(8,8,8,0) 100%),
    linear-gradient(180deg, rgba(8,8,8,.58) 0%, rgba(8,8,8,.36) 45%, rgba(8,8,8,.74) 100%);
}
.page-hero-inner{ position:relative; z-index:4; width:100%; max-width:1320px; margin:0 auto; padding:0 6vw; color:#fff; }
.page-hero .display{ font-size:clamp(48px,10.5vw,168px); color:#fff; margin-left:-.02em; }
.page-hero .jp{ font-size:clamp(17px,2.3vw,32px); font-weight:700; line-height:1.6; margin-top:clamp(14px,1.6vw,24px); }
/* 英字見出しの直下に置くリード。下の日本語見出しと同じ大きさで揃え、2行で1つの文章として読ませる */
.page-hero .kicker{ font-size:clamp(17px,2.3vw,32px); font-weight:700; line-height:1.6; margin-top:clamp(20px,2.4vw,34px); margin-bottom:0; opacity:1; }
.page-hero .kicker + .jp{ margin-top:0; }
.page-hero .lead{ font-size:14px; line-height:2.1; color:rgba(255,255,255,.82); max-width:62ch; margin-top:16px; }

/* ── 下層の基本セクション ── */
.page-section{ padding:clamp(72px,10vw,150px) 0; }
.page-section.alt{ background:var(--mist); }
.page-section .eyebrow{ font-family:"Jost",sans-serif; font-size:12px; letter-spacing:.2em; color:var(--red); font-weight:600; margin-bottom:14px; }
.page-section .heading{ font-size:clamp(22px,3.2vw,42px); font-weight:700; line-height:1.5; text-wrap:balance; }
.page-section .lead{ font-size:14.5px; line-height:2.1; color:var(--gray); margin-top:18px; max-width:70ch; }

/* セクション見出しを巨大英字にする場合 */
.sec-head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,4vw,60px); align-items:end; margin-bottom:clamp(34px,4vw,58px); }
.sec-head .display{ font-size:clamp(36px,7vw,112px); }
.sec-head .side{ padding-bottom:.4em; }
.sec-head .side .jp{ font-size:clamp(16px,2vw,26px); font-weight:700; line-height:1.6; }
@media (max-width:820px){ .sec-head{ grid-template-columns:1fr; } .sec-head .side{ padding-bottom:0; } }

/* ── 写真なしのシンプルなページ見出し（プライバシーポリシー等） ── */
.page-head-plain{ padding:clamp(120px,15vw,200px) 0 clamp(30px,4vw,50px); text-align:center; }
.page-head-plain .display{ font-size:clamp(32px,6.2vw,84px); color:var(--ink); }
.page-head-plain .jp{ font-size:clamp(15px,1.9vw,22px); font-weight:700; margin-top:16px; color:var(--ink); }

/* ── プライバシーポリシー本文 ── */
.policy{ max-width:860px; margin:0 auto; }
.policy .policy-intro{ margin:0 0 clamp(20px,2.4vw,32px); font-size:14px; line-height:2.1; color:var(--gray); }
.policy h2{ font-size:clamp(16px,1.9vw,20px); font-weight:700; line-height:1.6; margin:clamp(38px,4vw,58px) 0 14px; padding-left:15px; border-left:3px solid var(--red); }
.policy h2:first-child{ margin-top:0; }
.policy p{ font-size:14px; line-height:2.1; color:var(--gray); margin-top:12px; }
.policy ul{ margin:14px 0 0 0; padding-left:0; list-style:none; }
.policy li{ position:relative; font-size:14px; line-height:2.1; color:var(--gray); padding-left:20px; }
.policy li::before{ content:""; position:absolute; left:2px; top:.95em; width:6px; height:6px; background:var(--red); transform:rotate(45deg); }
.policy .note{ font-size:13px; background:var(--mist); border-radius:var(--radius); padding:16px 18px; margin-top:16px; }
.policy .info-table{ margin-top:20px; }
.policy .policy-date{ margin-top:clamp(40px,5vw,64px); font-family:"Jost",sans-serif; font-size:13px; color:var(--ink); }

/* ── 会社概要テーブル ── */
.info-table{ width:100%; border-collapse:collapse; margin-top:clamp(28px,3vw,44px); }
.info-table th, .info-table td{ text-align:left; padding:20px 22px; border-bottom:1px solid var(--line); font-size:14px; line-height:1.9; vertical-align:top; }
.info-table th{ width:190px; color:var(--gray); font-weight:500; font-family:"Jost","Zen Kaku Gothic New",sans-serif; letter-spacing:.03em; }
@media (max-width:640px){
  .info-table th, .info-table td{ display:block; width:auto; }
  .info-table th{ border-bottom:none; padding-bottom:4px; }
  .info-table td{ padding-top:0; }
}

/* ── 代表メッセージ ── */
.message-block{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:center; }
/* 代表写真が無いときは自動で1カラムにする（写真を戻せば自動で2カラムに復帰） */
.message-block:not(:has(.message-photo)){ grid-template-columns:1fr; }
.message-photo{ height:clamp(240px,32vw,400px); overflow:hidden; border:1px solid var(--line); }
.message-photo .ph-img{ width:100%; height:100%; background:var(--mist); display:grid; place-items:center; gap:8px; color:#b4aca4; font-size:11px; letter-spacing:.08em; }
.message-photo .ph-img svg{ width:26px; height:26px; }
.message-name{ margin-top:24px; font-size:13px; color:var(--gray); }
.message-name strong{ color:var(--ink); font-size:15.5px; margin-left:4px; }
@media (max-width:820px){ .message-block{ grid-template-columns:1fr; } .message-photo{ height:240px; } }

/* ── カード（SERVICE の SUPPORT / WHY AREND） ── */
.support-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(34px,4vw,56px); }
.support-grid.two-col{ grid-template-columns:repeat(2,1fr); }
.support-card{ background:var(--paper); padding:clamp(28px,3.4vw,46px); }
.support-card .icon{ width:32px; height:32px; margin-bottom:18px; color:var(--red); }
.support-card .icon svg{ width:100%; height:100%; }
.support-card .num{ font-family:"Anton",sans-serif; color:var(--red); font-size:15px; letter-spacing:.05em; margin-bottom:12px; }
.support-card h3{ font-size:16.5px; margin-bottom:12px; font-weight:700; line-height:1.6; }
.support-card p{ font-size:13.5px; color:var(--gray); line-height:2; }
@media (max-width:820px){ .support-grid, .support-grid.two-col{ grid-template-columns:1fr; } }

/* ── チェックリスト（SERVICE の FOR YOU） ── */
.check-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 44px; margin-top:clamp(30px,3.4vw,48px); }
.check-item{ display:flex; align-items:flex-start; gap:14px; font-size:14.5px; line-height:1.8; padding:17px 0; border-bottom:1px solid var(--line); }
.check-item .mark{ width:21px; height:21px; border:1.5px solid var(--red); flex:none; display:grid; place-items:center; color:var(--red); font-size:12px; margin-top:1px; }
@media (max-width:760px){ .check-grid{ grid-template-columns:1fr; } }

/* ── 導入フロー ── */
.flow-steps{ position:relative; display:flex; margin-top:clamp(44px,5vw,72px); }
.flow-line{ position:absolute; height:2px; width:0; background:repeating-linear-gradient(90deg, var(--red) 0, var(--red) 6px, transparent 6px, transparent 12px); opacity:.55; z-index:0; }
.flow-step{ flex:1; position:relative; z-index:1; text-align:center; padding:0 12px; }
.flow-step .n{ width:52px; height:52px; margin:0 auto 20px; background:var(--paper); border:1.5px solid var(--red); border-radius:50%; display:grid; place-items:center; font-family:"Anton",sans-serif; font-size:18px; color:var(--red); position:relative; z-index:1; }
.flow-step h4{ font-size:14px; font-weight:700; margin-bottom:9px; }
.flow-step p{ font-size:12.5px; color:var(--gray); line-height:1.85; }
@media (max-width:860px){
  .flow-steps{ flex-direction:column; gap:0; align-items:stretch; }
  .flow-line{ width:2px !important; height:0; background:repeating-linear-gradient(180deg, var(--red) 0, var(--red) 6px, transparent 6px, transparent 12px); }
  .flow-step{ text-align:left; padding:0 0 34px; display:flex; gap:20px; align-items:flex-start; }
  .flow-step:last-child{ padding-bottom:0; }
  .flow-step .n{ margin:0; flex:none; }
  .flow-step .text{ flex:1; padding-top:12px; }

  /* FLOWはスクロール中に画面へ固定されるので、
     どの機種でも1画面に収まり、上下に余白が残るよう寸法を詰める。
     余白は画面の高さに比例させる（vh）ので、大きい端末ほどゆったりする。 */
  #flow-section{ padding:0; min-height:100svh; display:flex; align-items:center; }
  #flow-section > .wrap{ width:100%; padding-top:clamp(26px,6vh,64px); padding-bottom:clamp(26px,6vh,64px); }
  #flow-section .sec-head{ margin-bottom:clamp(14px,2.4vh,30px); }
  #flow-section .flow-steps{ margin-top:clamp(20px,3vh,44px); }
  #flow-section .flow-step{ padding-bottom:clamp(14px,2.6vh,30px); }
  #flow-section .flow-step:last-child{ padding-bottom:0; }
  #flow-section .flow-step .n{ width:44px; height:44px; font-size:16px; }
  #flow-section .flow-step .text{ padding-top:6px; }
  #flow-section .flow-step h4{ margin-bottom:5px; }
  #flow-section .flow-step p{ line-height:1.7; }
}

/* ── よくあるご質問 ── */
.faq-item{ border-bottom:1px solid var(--line); padding:26px 0; }
.faq-item .q{ font-weight:700; font-size:15px; display:flex; gap:13px; line-height:1.7; }
.faq-item .q .mark{ font-family:"Anton",sans-serif; color:var(--red); flex:none; }
.faq-item .a{ margin-top:12px; font-size:13.5px; color:var(--gray); line-height:2; padding-left:27px; }

/* ── お問い合わせフォーム ── */
.contact-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(34px,5vw,72px); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.form-field{ margin-top:24px; }
.form-field label{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--gray); margin-bottom:9px; }
.form-field .req, .form-field .opt{ font-family:"Jost",sans-serif; font-size:10px; letter-spacing:.05em; padding:3px 8px; line-height:1.5; }
.form-field .req{ background:var(--red); color:#fff; }
.form-field .opt{ background:var(--line); color:var(--gray); }
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--line); padding:15px 17px; font-size:14px;
  font-family:inherit; background:var(--paper); transition:border-color .3s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--red); }
.form-field textarea{ min-height:150px; resize:vertical; }
.form-checkbox{ display:flex; align-items:center; gap:11px; margin-top:26px; font-size:13px; }
.policy-link{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.policy-link:hover{ text-decoration:none; }
.form-submit{
  width:100%; margin-top:30px; padding:18px; border:none; cursor:pointer;
  background:var(--red); color:#fff; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.04em;
  transition:background .3s ease;
}
.form-submit:hover{ background:var(--ink); }
.side-box{ border:1px solid var(--line); padding:clamp(28px,3.4vw,42px); background:var(--mist); }
.side-box .heading{ font-size:16px !important; }
.side-box .eyebrow{ margin-top:26px; }
.side-box .social-icons{ display:flex; gap:12px; }
.side-box .social-icons a{ width:34px; height:34px; border:1px solid var(--line); display:grid; place-items:center; background:var(--paper); color:var(--gray); transition:border-color .3s ease, color .3s ease; }
.side-box .social-icons a:hover{ border-color:var(--red); color:var(--red); }
.side-box .social-icons svg{ width:15px; height:15px; }

/* ── 実績カード（WORKS：現在は非公開） ── */
.works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:clamp(34px,4vw,56px); }
.work-card .img{ height:210px; overflow:hidden; margin-bottom:16px; }
.work-card .tag{ font-family:"Jost",sans-serif; color:var(--red); font-size:12px; font-weight:600; margin-bottom:7px; }
.work-card h4{ font-size:15.5px; margin-bottom:7px; font-weight:700; }
.work-card .result{ font-size:13px; color:var(--gray); }
@media (max-width:820px){ .works-grid{ grid-template-columns:1fr; } }
.ph-img{ width:100%; height:100%; background:var(--mist); display:grid; place-items:center; gap:9px; color:#b4aca4; font-size:11px; text-align:center; padding:12px; }
.ph-img svg{ width:26px; height:26px; }

/* ── 画像枠 ──
   写真を入れる場所。素材が未確定のところは中に .ph-img を置いて枠だけ確保する */
.media-frame{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--mist); border:1px solid var(--line); }
.media-frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.media-frame:hover img{ transform:scale(1.04); }
.media-frame.tall{ aspect-ratio:4/3; }
.media-frame.band{ aspect-ratio:auto; height:clamp(230px,32vw,420px); border-left:none; border-right:none; }
/* カード内では左右いっぱいに回り込ませる */
.support-card .media-frame{
  margin:calc(-1 * clamp(28px,3.4vw,46px)) calc(-1 * clamp(28px,3.4vw,46px)) clamp(22px,2.6vw,32px);
  width:auto; border:none; border-bottom:1px solid var(--line);
}
/* 画像＋テキストの2カラム */
.media-split{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:center; }
@media (max-width:820px){ .media-split{ grid-template-columns:1fr; } }

/* ▼ NEWS一覧の写真付きカード案（TOPと同じ一行リストに統一したため不使用。
      復活させる場合はこの行と末尾の行のコメント記号を外してください）
.news-index{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,2.8vw,38px); margin-top:clamp(28px,3.2vw,44px); }
.news-card{ display:block; border:1px solid var(--line); background:var(--paper); overflow:hidden; transition:border-color .35s ease, transform .5s var(--ease), box-shadow .5s var(--ease); }
.news-card:hover{ border-color:var(--red); transform:translateY(-5px); box-shadow:0 14px 34px rgba(17,17,17,.08); }
.news-card .thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--mist); }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.news-card:hover .thumb img{ transform:scale(1.06); }
.news-card .cat{ position:absolute; left:0; top:0; z-index:2; background:var(--red); color:#fff; font-family:"Jost",sans-serif; font-size:10.5px; letter-spacing:.12em; padding:8px 15px; }
.news-card .body{ padding:clamp(20px,2.4vw,30px); }
.news-card .date{ font-family:"Jost",sans-serif; font-size:12.5px; letter-spacing:.06em; color:var(--red); }
.news-card h3{ font-size:16px; font-weight:700; line-height:1.75; margin-top:10px; }
.news-card p{ font-size:13px; color:var(--gray); line-height:2; margin-top:12px; }
.news-card .more{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-family:"Jost",sans-serif; font-size:11.5px; letter-spacing:.1em; }
.news-card .more::after{ content:"→"; transition:transform .35s var(--ease); }
.news-card:hover .more{ color:var(--red); }
.news-card:hover .more::after{ transform:translateX(6px); }
@media (max-width:760px){ .news-index{ grid-template-columns:1fr; } }
▲ ここまで */

/* 絞り込みタブ / ページ送り（現在は非表示だが復活時に使う） */
.filter-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.filter-tabs button{ font-family:"Jost",sans-serif; font-size:12px; padding:10px 19px; border:1px solid var(--line); background:var(--paper); color:var(--gray); cursor:pointer; transition:all .25s ease; }
.filter-tabs button.is-active, .filter-tabs button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pagination{ display:flex; gap:9px; margin-top:44px; justify-content:center; }
.pagination a{ width:36px; height:36px; display:grid; place-items:center; font-family:"Jost",sans-serif; font-size:12px; border:1px solid var(--line); color:var(--gray); }
.pagination a.is-current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.is-filtered-hidden{ display:none !important; }

/* ── 下層ページ下部のCTA ── */
/* 下の全画面フッターが黒なので、CTAは明るい背景にして境目をはっきりさせる
   （黒に戻したい場合は、HTML側で class="cta-band" を class="cta-band dark" にする） */
.cta-band{ background:var(--mist); color:var(--ink); padding:clamp(72px,10vw,150px) 0; text-align:center; position:relative; overflow:hidden; }
.cta-band .display{ font-size:clamp(38px,8vw,132px); color:var(--ink); }
.cta-band .heading{ font-size:clamp(20px,2.6vw,34px); font-weight:700; color:var(--ink); }
.cta-band p{ margin-top:18px; color:var(--gray); font-size:14px; line-height:2; }
.cta-band .btn-line{ margin-top:32px; border-color:var(--ink); color:var(--ink); background:transparent; }
.cta-band .btn-line:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* 塗りボタンは白文字を維持する（赤地に赤文字になるのを防ぐ） */
.cta-band .btn-line.solid{ background:var(--red); border-color:var(--red); color:#fff; }
.cta-band .btn-line.solid:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.cta-band.light{ background:var(--mist); }

/* ▼ 旧・黒背景版（class に dark を足すと戻せる） */
.cta-band.dark{ background:var(--ink); color:#fff; }
.cta-band.dark .display, .cta-band.dark .heading{ color:#fff; }
.cta-band.dark p{ color:rgba(255,255,255,.72); }
.cta-band.dark .btn-line{ border-color:rgba(255,255,255,.55); color:#fff; }
.cta-band.dark .btn-line:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ── 角丸・ピル形 ──
   参考サイトはブロックを角丸10px、ボタン類を完全なピル形にしている。それに合わせる */
.split, .support-grid, .support-grid.two-col, .media-frame, .side-box,
.photo-band, .message-photo, .work-card .img, .logo-grid div,
.form-field input, .form-field select, .form-field textarea{ border-radius:var(--radius); }
.support-grid, .split{ overflow:hidden; }
.support-card .media-frame{ border-radius:var(--radius) var(--radius) 0 0; }
.btn-line, .form-submit, .filter-tabs button, .pagination a{ border-radius:var(--radius-full); }
.media-frame.band{ border-radius:0; }

/* スクロールで出現（下層ページ側の既存クラスにも対応） */
.reveal{ opacity:0; transform:translateY(34px); }
.page-hero .eyebrow-en{ font-family:"Jost",sans-serif; font-size:12px; letter-spacing:.22em; color:#fff; opacity:.85; margin-bottom:14px; }

/* ── ヒーロー：縦が短い画面での重なり回避 ──
   .hero-inner は上下中央揃え、#brand は画面左下に固定のため、
   ウィンドウの高さが低いとCTAボタンと左下ロゴが重なる。
   スマホ幅は #brand の扱いが別なので、PC・タブレット幅だけに適用する。 */
@media (max-height:820px) and (min-width:821px){
  .hero-inner{ padding-bottom:clamp(70px,13vh,130px); }
}

/* ── ヒーロー見出しの行間 ──
   .display の line-height は .85。2行組（JAPAN VINTAGE / TO THE WORLD）にしたことで
   行同士が近すぎたため、ここだけ少しだけ広げて読み取りやすくする。 */
.hero-display{ line-height:.94; }

/* ── PARTNERSページ：ロゴの行間 ──
   ロゴ枠の下に表記名が入るぶん、行同士が詰まって見えるため縦だけ広げる。
   横（列間）は 16px のままにして、1行のまとまりを保つ。 */
.logo-grid.with-name{ row-gap:clamp(32px,3.6vw,52px); }