@charset "utf-8";

/* =========================================================
   LUMICA GRAPHICS brand site — style.css
   構成モデル: KBC brand site（動きの手法のみ参照 / 中身は全てオリジナル）
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --fz: clamp(10px, calc(100vw / 1300 * 10), calc(1600 / 1300 * 10px));

  --color-bg:      #F6F6F5;
  --color-bg-sub:  #F2F2F1;
  --color-text:    #444444;
  --color-text-sub:#777777;
  --color-line:    #DDDDDD;
  --color-accent:  #FF0000;   /* KBCレッド（参考サイトと同じ） */
  --color-accent-d:#D40000;
  --color-white:   #ffffff;
  --color-logo:    #101010;   /* LUMICA GRAPHICS ロゴブラック */

  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-inout: cubic-bezier(0.76,0,0.24,1);

  --header-h: 9rem;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size: var(--fz); -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.8;
  font-weight:500;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
img.is-broken{ opacity:0; }
a{ color:inherit; text-decoration:none; }
ul,li{ list-style:none; }
svg{ display:block; }
em{ font-style:normal; }
.blockMobile{ display:none; }

/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- placeholder（画像差し替え前の見た目） ---------- */
.ph{ position:relative; width:100%; height:100%; overflow:hidden; background:linear-gradient(135deg,#dfe7e4,#eef2f0); }
/* 画像が無いときだけ見えるプレースホルダ用のブランドティント（実画像の上には出さない） */
.ph:has(img.is-broken)::after,.ph:not(:has(img))::after{ content:""; position:absolute; inset:0; background:
  radial-gradient(120% 120% at 20% 15%, rgba(255,0,0,.16), transparent 55%),
  radial-gradient(120% 120% at 85% 90%, rgba(255,0,0,.10), transparent 50%);
}
.ph--1{ background:linear-gradient(135deg,#ff4d4d,#ff9a9a); }
.ph--2{ background:linear-gradient(135deg,#3a3a3a,#6a6a6a); }
.ph--3{ background:linear-gradient(135deg,#e0554e,#f0a0a0); }
.ph--4{ background:linear-gradient(135deg,#e60000,#ff7a7a); }
.ph--5{ background:linear-gradient(135deg,#4a4a4a,#8a8a8a); }
.ph--6{ background:linear-gradient(135deg,#d96a6a,#f0b0b0); }
.ph--pj1{ background:linear-gradient(135deg,#ff4d4d,#ff9a9a); }
.ph--pj2{ background:linear-gradient(135deg,#3a3a3a,#6a6a6a); }
.ph--pj3{ background:linear-gradient(135deg,#e0554e,#f0a0a0); }
.ph--a1{ background:linear-gradient(135deg,#ff4d4d,#ff9a9a); }
.ph--a2{ background:linear-gradient(135deg,#3a3a3a,#6a6a6a); }
.ph--a3{ background:linear-gradient(135deg,#e0554e,#f0a0a0); }
.ph--a4{ background:linear-gradient(135deg,#d96a6a,#f0b0b0); }
.ph--a5{ background:linear-gradient(135deg,#4a4a4a,#8a8a8a); }
.ph--a6{ background:linear-gradient(135deg,#e60000,#ff7a7a); }
.ph--banner{ background:linear-gradient(115deg,#c40000,#ff0000 45%,#ff6b6b); }

/* =========================================================
   header
   ========================================================= */
.header{ position:fixed; inset:0 0 auto 0; z-index:80; height:var(--header-h); pointer-events:none; }
.header_wrap{ display:flex; align-items:center; justify-content:space-between;
  height:100%; padding:0 4rem; }
.headerLogo{ display:flex; align-items:center; gap:1.2rem; pointer-events:auto; }
.headerLogo_mark{ width:4.4rem; height:4.4rem; color:var(--color-logo);
  background:var(--color-white); border-radius:50%; display:grid; place-items:center;
  box-shadow:0 .4rem 1.6rem rgba(0,0,0,.08); }
.headerLogo_mark svg{ width:62%; height:62%; }
.mark_l{ fill:var(--color-logo); }
.headerLogo_title{ font-family:"Jost",sans-serif; font-weight:700; font-size:1.9rem;
  letter-spacing:.12em; color:var(--color-text); white-space:nowrap; }

.trigger{ pointer-events:auto; width:6rem; height:6rem; border-radius:50%;
  background:var(--color-accent); display:grid; place-items:center; cursor:pointer;
  transition:background .4s var(--ease-out); }
.trigger_inner{ position:relative; width:2.4rem; height:1.4rem; }
.trigger_inner span{ position:absolute; left:0; width:100%; height:.2rem; border-radius:2px;
  background:var(--color-white); transition:transform .4s var(--ease-inout), opacity .3s; }
.trigger_inner span:nth-child(1){ top:0; }
.trigger_inner span:nth-child(2){ top:50%; transform:translateY(-50%); }
.trigger_inner span:nth-child(3){ bottom:0; }
body.is-menu-open .trigger_inner span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(45deg); }
body.is-menu-open .trigger_inner span:nth-child(2){ opacity:0; }
body.is-menu-open .trigger_inner span:nth-child(3){ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); }

/* =========================================================
   global menu
   ========================================================= */
.globalMenu{ position:fixed; inset:0; z-index:70; visibility:hidden; }
.globalMenu_arc{ position:absolute; left:0; bottom:0; width:100%; height:60vh; z-index:1;
  transform:translateY(101%); }
.globalMenu_arc svg{ width:100%; height:100%; }
.globalMenu_container{ position:absolute; inset:0; z-index:2; background:var(--color-white);
  clip-path:inset(0 0 100% 0); }
.globalMenu_wrap{ position:relative; width:100%; height:100%;
  display:flex; align-items:center; gap:6rem; padding:0 8rem; opacity:0; }
.globalMenu_logo{ width:16rem; color:var(--color-accent); flex-shrink:0; }
.globalMenu_content{ flex:1; }
.globalMenuMain{ display:flex; flex-wrap:wrap; gap:1rem 8rem; }
.globalMenuMain_list{ display:flex; flex-direction:column; gap:1.4rem; }
.globalMenuMain_item{ overflow:hidden; }
.globalMenuMain_link{ display:inline-flex; flex-direction:column; position:relative; padding:.6rem 0; }
.globalMenuMain_link .is-en{ font-family:"Jost",sans-serif; font-size:3.6rem; font-weight:600;
  letter-spacing:.04em; line-height:1.1; }
.globalMenuMain_link .is-ja{ font-size:1.4rem; color:var(--color-text-sub); font-weight:500; }
a.globalMenuMain_link::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:.2rem;
  background:var(--color-accent); transition:width .5s var(--ease-out); }
a.globalMenuMain_link:hover::after{ width:100%; }
a.globalMenuMain_link:hover .is-en{ color:var(--color-accent); }
.globalMenuChild{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.8rem; padding-left:.2rem; }
.globalMenuChild_link{ font-size:1.5rem; color:var(--color-text-sub); position:relative; padding-left:2rem; }
.globalMenuChild_link::before{ content:""; position:absolute; left:0; top:50%; width:1rem; height:.16rem;
  background:var(--color-accent); }
.globalMenuChild_link:hover{ color:var(--color-accent); }

.externalLists{ display:flex; align-items:center; gap:1.6rem; margin-top:4rem; }
.externalList_button{ display:inline-flex; align-items:center; gap:.8rem; padding:1rem 2rem;
  border:1px solid var(--color-line); border-radius:5rem; font-size:1.3rem; transition:.35s var(--ease-out); }
.externalList_button:hover{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.externalList_icon{ width:1rem; height:1rem; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg); }
.externalList_instagram{ width:4rem; height:4rem; border-radius:50%; border:1px solid var(--color-line);
  display:inline-block; position:relative; transition:.35s var(--ease-out); }
.externalList_instagram::before{ content:""; position:absolute; inset:1rem; border:1.5px solid currentColor; border-radius:.8rem; }
.externalList_instagram::after{ content:""; position:absolute; top:1.3rem; left:1.3rem; width:1.4rem; height:1.4rem;
  border:1.5px solid currentColor; border-radius:50%; }
.externalList_instagram:hover{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.externalLists[data-theme="dark"] .externalList_button,
.externalLists[data-theme="dark"] .externalList_instagram{ border-color:rgba(255,255,255,.35); color:#fff; }

/* =========================================================
   cover / hero
   ========================================================= */
.cover{ position:relative; height:100vh; overflow:hidden; background:var(--color-bg); }
.cover_headline{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.cover_section{ position:absolute; inset:0; }
/* JSが clipPath:circle(49.7%) で丸抜きする。CSSのcircle()の%半径は
   √(w²+h²)/√2 で解決されるため、箱が長方形だと円が箱幅を超えて左右が欠ける。
   正方形を強制して常に真円で収まるようにする（.aboutCore_mask と同じ前提） */
.cover_section .image{ position:absolute; aspect-ratio:1/1; will-change:transform; }
.cover_section .photo{ position:relative; z-index:1; width:100%; height:100%; border-radius:2.4rem; overflow:hidden;
  box-shadow:0 3rem 6rem rgba(20,30,28,.18); }
/* 写真背後のブランド色サークル（KBCのshadow相当・アクセント色の大円） */
.cover_section .shadow{ position:absolute; z-index:0; aspect-ratio:1/1; border-radius:50%;
  background:var(--color-accent); pointer-events:none; }
.image--1_1 .shadow{ width:58rem; right:-12rem; top:-6rem; }
.image--2_1 .shadow{ width:48rem; right:-10rem; bottom:-8rem; }
.image--2_2 .shadow{ width:20rem; left:-6rem; top:-4rem; }
.image--3_1 .shadow{ width:32rem; right:-9rem; top:-5rem; }
.image--3_2 .shadow{ width:18rem; left:-5rem; bottom:-4rem; }
.image--3_3 .shadow{ width:26rem; right:-7rem; bottom:-6rem; }

/* width = これまで描かれていた円の直径。top/left は円の中心が動かないよう補正 */
/* section1 : 1 photo centered-right */
.cover_section--1 .image--1_1{ width:52rem; top:calc(14% + 3rem); left:calc(50% - 1.2rem); transform:translateX(-30%); }

/* section2 : 2 photos */
.cover_section--2 .image--2_1{ width:46rem; top:calc(12% + 3rem); left:calc(24% - 3rem); }
.cover_section--2 .image--2_2{ width:34rem; top:calc(34% + 2rem); left:calc(58% - 2rem); }

/* section3 : 3 photos */
.cover_section--3 .image--3_1{ width:39rem; top:calc(10% + 2.5rem); left:calc(15% - 2.5rem); }
.cover_section--3 .image--3_2{ width:30rem; top:calc(40% + 2rem); left:calc(44% - 2rem); }
.cover_section--3 .image--3_3{ width:35rem; top:calc(16% + 2.5rem); left:calc(66% - 2.5rem); }

/* floating balls
   GSAPが .ball の位置/scale（弾け出し・吸い込み）を担当し、
   ::before のCSSアニメが常時ふわふわ（float 4〜7s）を担当（干渉しない二層構成） */
.balls{ position:absolute; inset:0; pointer-events:none; }
.ball{ position:absolute; will-change:transform; }
.ball::before{ content:""; position:absolute; inset:0; border-radius:50%; filter:blur(.35rem); opacity:.9;
  background:radial-gradient(circle at 35% 30%, #ff7a7a, #FF0000);
  animation:float-1 4s ease-in-out infinite; }
.ball:nth-of-type(2)::before{ animation-name:float-2; animation-duration:5s; }
.ball:nth-of-type(3)::before{ animation-name:float-3; animation-duration:6s; }
.ball:nth-of-type(4)::before{ animation-name:float-4; animation-duration:7s; }
.ball:nth-of-type(5)::before{ animation-name:float-5; animation-duration:7s; }
@keyframes float-1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(5px,-15px); } }
@keyframes float-2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-8px,-20px); } }
@keyframes float-3{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(10px,-25px); } }
@keyframes float-4{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-12px,-18px); } }
@keyframes float-5{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(7px,-22px); } }
.ball--1_1{ width:9rem;  height:9rem;  top:22%; left:14%; }
.ball--1_2{ width:5rem;  height:5rem;  top:62%; left:24%; }
.ball--1_2::before{ background:radial-gradient(circle at 35% 30%,#ff9a9a,#e60000); }
.ball--1_3{ width:14rem; height:14rem; top:58%; left:74%; }
.ball--1_3::before{ background:radial-gradient(circle at 35% 30%,#ff6b6b,#c40000); opacity:.8; }
.ball--1_4{ width:4rem;  height:4rem;  top:18%; left:80%; }
.ball--2_1{ width:7rem;  height:7rem;  top:20%; left:70%; }
.ball--2_2{ width:11rem; height:11rem; top:64%; left:16%; }
.ball--2_2::before{ background:radial-gradient(circle at 35% 30%,#ff9a9a,#e60000); }
.ball--2_3{ width:5rem;  height:5rem;  top:74%; left:60%; }
.ball--2_4{ width:8rem;  height:8rem;  top:12%; left:44%; }
.ball--2_4::before{ background:radial-gradient(circle at 35% 30%,#ff6b6b,#c40000); opacity:.8; }
.ball--3_1{ width:6rem;  height:6rem;  top:24%; left:8%; }
.ball--3_2{ width:10rem; height:10rem; top:70%; left:30%; }
.ball--3_2::before{ background:radial-gradient(circle at 35% 30%,#ff9a9a,#e60000); }
.ball--3_3{ width:4.5rem;height:4.5rem;top:16%; left:82%; }
.ball--3_4{ width:13rem; height:13rem; top:56%; left:82%; }
.ball--3_4::before{ background:radial-gradient(circle at 35% 30%,#ff6b6b,#c40000); opacity:.75; }
.ball--3_5{ width:5.5rem;height:5.5rem;top:80%; left:52%; }

/* cover copy */
.coverCopy{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  justify-content:center; padding-left:9rem; pointer-events:none; mix-blend-mode:normal; }
.coverCopy_item{ overflow:hidden; }
.coverCopy_item span{ display:inline-block; font-weight:900; line-height:1.05; letter-spacing:.02em;
  font-size:9rem; color:var(--color-text); }
.coverCopy_item--2 span{ color:var(--color-accent); }

/* scroll down */
.coverScrollDown{ position:absolute; right:5rem; bottom:5rem; width:9rem; height:9rem; z-index:6; }
.coverScrollDown_frame{ position:relative; width:100%; height:100%; }
.coverScrollDown_frame svg{ width:100%; height:100%; animation:spin 9s linear infinite; }
.scrollText{ font-family:"Jost",sans-serif; font-size:9px; letter-spacing:.18em; fill:var(--color-text); }
.coverScrollDown_arrow{ position:absolute; top:50%; left:50%; width:1rem; height:1rem; transform:translate(-50%,-60%) rotate(45deg);
  border-bottom:2px solid var(--color-accent); border-right:2px solid var(--color-accent);
  animation:arrowY 1.6s ease-in-out infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes arrowY{ 0%,100%{ transform:translate(-50%,-80%) rotate(45deg); opacity:.3; } 50%{ transform:translate(-50%,-40%) rotate(45deg); opacity:1; } }

/* =========================================================
   project
   ========================================================= */
.fill{ position:relative; }
.project{ position:relative; padding:0 0 14rem; }
.project_arc{ position:relative; height:16rem; margin-top:-8rem; }
.project_arc svg{ width:100%; height:100%; }

.projectAutoScroll{ position:relative; z-index:0; padding:2rem 0; }
.projectAutoScroll_inner{ opacity:.06; }
.project_wrap{ position:relative; z-index:1; }
.marquee{ overflow:hidden; width:100%; }
.marquee_track{ display:inline-flex; white-space:nowrap; will-change:transform; animation:marquee 22s linear infinite; }
.autoScrollText{ font-family:"Jost",sans-serif; font-weight:700; font-size:12rem; line-height:1;
  white-space:nowrap; color:var(--color-text); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.project_wrap{ max-width:120rem; margin:0 auto; padding:0 4rem; margin-top:2rem; }
.project_head{ position:relative; text-align:center; margin-bottom:8rem; }
.project_headline{ font-family:"Jost",sans-serif; font-weight:700; font-size:8rem; letter-spacing:.02em;
  color:var(--color-accent); display:inline-flex; }
.project_headline em{ display:inline-block; }
.project_body{ margin-top:1.6rem; font-size:1.6rem; color:var(--color-text); }
.project_cast{ position:absolute; }
.project_cast--1{ width:10rem; top:-4rem; right:8%; }
.project_cast--2{ width:12rem; }

.project_content{ display:flex; flex-direction:column; gap:5rem; position:relative; }
.project_cast--2{ align-self:flex-end; margin:-2rem 6rem -2rem 0; }

.projectList{ }
.projectList_link{ display:grid; grid-template-columns:44rem 1fr; align-items:center; gap:4rem;
  background:var(--color-white); border-radius:2.4rem; padding:2.4rem; box-shadow:0 2rem 4rem rgba(20,30,28,.06);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.projectList:nth-child(even) .projectList_link{ grid-template-columns:1fr 44rem; }
.projectList:nth-child(even) .projectList_image{ order:2; }
.projectList_link:hover{ transform:translateY(-.6rem); box-shadow:0 3rem 6rem rgba(20,30,28,.12); }
.projectList_image{ border-radius:1.6rem; overflow:hidden; aspect-ratio:4/3; }
.projectList_image .ph{ transition:transform .8s var(--ease-out); }
.projectList_link:hover .projectList_image .ph{ transform:scale(1.06); }
.projectList_content{ display:flex; align-items:center; justify-content:space-between; gap:3rem; padding:0 2rem; }
.projectListVolume{ margin-bottom:1.2rem; }
.projectListVolume_number{ font-family:"Jost",sans-serif; font-size:2rem; color:var(--color-accent); font-weight:600; }
.projectListVolume_number span{ font-size:5rem; line-height:1; }
.projectListVolume_title{ font-family:"Jost",sans-serif; font-size:1.3rem; letter-spacing:.2em; color:var(--color-text-sub); text-transform:uppercase; }
.projectList_headline .is-main{ display:block; font-size:2.4rem; font-weight:700; line-height:1.5; }
.projectList_headline .is-sub{ display:block; margin-top:.8rem; font-family:"Jost",sans-serif; font-size:1.4rem;
  letter-spacing:.16em; color:var(--color-accent); }
.projectList_icon{ flex-shrink:0; width:5rem; height:5rem; border-radius:50%; border:1px solid var(--color-line);
  display:grid; place-items:center; transition:.4s var(--ease-out); }
.projectList_icon i{ width:1rem; height:1rem; border-top:2px solid var(--color-text); border-right:2px solid var(--color-text);
  transform:rotate(45deg); transition:.4s; }
.projectList_link:hover .projectList_icon{ background:var(--color-accent); border-color:var(--color-accent); }
.projectList_link:hover .projectList_icon i{ border-color:#fff; }

/* =========================================================
   about
   ========================================================= */
.about{ position:relative; padding:12rem 0 16rem; }
.aboutCore{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.aboutCore_mask{ position:relative; width:52rem; height:52rem; border-radius:50%; overflow:hidden;
  box-shadow:0 4rem 8rem rgba(20,30,28,.14); }
.aboutCore_image{ position:absolute; inset:0; opacity:0; }
.aboutCore_image--1{ opacity:1; }
.about_content{ position:relative; z-index:2; max-width:120rem; margin:0 auto; padding:0 4rem; text-align:center; }
.about_inner{ display:inline-block; background:rgba(246,246,245,.72); backdrop-filter:blur(.4rem);
  padding:4rem 5rem; border-radius:2.4rem; }
.about_headline{ font-size:5.2rem; font-weight:900; line-height:1.35; }
.about_headline span{ display:block; }
.about_headline span:last-child{ color:var(--color-accent); }
.about_body{ margin-top:2.4rem; font-size:1.6rem; }
.about_body p{ line-height:2.1; }

/* button */
.buttonFill{ display:inline-block; margin-top:3.2rem; }
.buttonFill_link{ display:inline-flex; align-items:center; gap:1.4rem; padding:1.6rem 3.2rem;
  background:var(--color-accent); color:#fff; border-radius:6rem; font-weight:700; font-size:1.6rem;
  position:relative; overflow:hidden; transition:.4s var(--ease-out); }
.buttonFill_link::before{ content:""; position:absolute; inset:0; background:var(--color-accent-d); transform:translateX(-101%);
  transition:transform .5s var(--ease-inout); z-index:0; }
.buttonFill_link:hover::before{ transform:translateX(0); }
.buttonFill_title,.buttonFill_icon{ position:relative; z-index:1; }
.buttonFill_icon{ width:2.4rem; height:2.4rem; border-radius:50%; background:#fff; display:grid; place-items:center; }
.buttonFill_icon::after{ content:""; width:.8rem; height:.8rem; border-top:2px solid var(--color-accent);
  border-right:2px solid var(--color-accent); transform:rotate(45deg); }

/* =========================================================
   banner
   ========================================================= */
.banner{ position:relative; padding:0 0 0; background:var(--color-bg); }
.uprise{ position:relative; height:18rem; overflow:hidden; perspective:60rem; }
.uprise_content{ position:absolute; left:0; bottom:0; width:100%; height:100%; }
.banner_content{ background:var(--color-accent); padding:0 4rem 12rem; }
.banner_link{ display:block; max-width:120rem; margin:0 auto; }
.banner_banner{ position:relative; height:36rem; border-radius:2.4rem; overflow:hidden; display:grid; place-items:center;
  background-image:linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,.44)), url(../img/banner.jpg);
  background-size:cover; background-position:center;
  transition:transform .6s var(--ease-out); }
.banner_link:hover .banner_banner{ transform:scale(1.02); }
.banner_copy{ position:relative; z-index:2; text-align:center; color:#fff; }
.banner_copy--sub{ display:block; font-size:1.8rem; letter-spacing:.1em; }
.banner_copy--main{ display:block; font-size:6rem; font-weight:900; letter-spacing:.02em; margin-top:.6rem; }
.banner_title{ margin-top:2.4rem; text-align:center; color:#fff; font-family:"Jost",sans-serif; letter-spacing:.14em;
  font-size:1.5rem; display:flex; align-items:center; justify-content:center; gap:1rem; }
.banner_title::after{ content:""; width:1.2rem; height:1.2rem; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); }

/* =========================================================
   footer
   ========================================================= */
.footer{ background:var(--color-text); color:#fff; position:relative; }
.footer_inner{ max-width:120rem; margin:0 auto; padding:8rem 4rem 4rem; position:relative; }
.footer_pageTop{ position:absolute; top:-3rem; right:4rem; width:6rem; height:6rem; border-radius:50%;
  background:var(--color-accent); display:grid; place-items:center; cursor:pointer; text-align:center; }
.footer_pageTop i{ display:block; width:1rem; height:1rem; margin:0 auto .4rem; border-top:2px solid #fff; border-right:2px solid #fff;
  transform:rotate(-45deg); }
.footer_pageTop p{ font-family:"Jost",sans-serif; font-size:1rem; line-height:1.2; letter-spacing:.1em; }
.footer_wrap{ display:flex; gap:6rem; align-items:flex-start; }
.footer_logo{ width:9rem; flex-shrink:0; }
.footer_content{ flex:1; display:flex; justify-content:space-between; gap:4rem; flex-wrap:wrap; }
.footerMain{ display:flex; gap:5rem; flex-wrap:wrap; }
.footerMain_link .is-en{ display:block; font-family:"Jost",sans-serif; font-size:1.8rem; letter-spacing:.1em; }
.footerMain_link .is-ja{ display:block; font-size:1.2rem; color:rgba(255,255,255,.6); }
.footerMainChild{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.6rem; }
.footerMainChild_link{ font-size:1.3rem; color:rgba(255,255,255,.75); }
.footerMainChild_link:hover{ color:var(--color-accent); }
.footer .externalLists{ margin-top:0; }
.footer_copyright{ margin-top:6rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.15);
  font-family:"Jost",sans-serif; font-size:1.2rem; letter-spacing:.08em; color:rgba(255,255,255,.6); }

/* =========================================================
   utility: inview
   ========================================================= */
[data-inview]{ opacity:0; transform:translateY(3rem); }
[data-inview].is-inview{ opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }

/* flat mode（検証用） */
.is-flat .cover{ height:100vh; }
.is-flat .cover_section--2,.is-flat .cover_section--3{ display:none; }
.is-flat .aboutCore{ position:relative; height:auto; padding:6rem 0; }

/* =========================================================
   responsive (SP)
   ========================================================= */
@media (max-width:767px){
  :root{ --fz: calc(100 / 375 * 10vw); --header-h:7rem; }
  .blockMobile{ display:block; }
  .header_wrap{ padding:0 2rem; }
  .headerLogo_title{ font-size:1.6rem; }
  .trigger{ width:5rem; height:5rem; }

  .globalMenu_wrap{ flex-direction:column; align-items:flex-start; justify-content:center; gap:3rem; padding:0 3rem; }
  .globalMenu_logo{ width:9rem; }
  .globalMenuMain{ gap:2rem 4rem; }
  .globalMenuMain_link .is-en{ font-size:2.8rem; }
  .externalLists{ margin-top:2rem; flex-wrap:wrap; }

  .coverCopy{ padding-left:3rem; }
  .coverCopy_item span{ font-size:5.4rem; }
  .coverScrollDown{ right:2rem; bottom:3rem; width:7rem; height:7rem; }

  .cover_section--1 .image--1_1{ width:71vw; top:calc(16% + 3.5vw); left:50%; transform:translateX(-50%); }
  .cover_section--2 .image--2_1{ width:59vw; top:calc(12% + 3.5vw); left:calc(6% - 3.5vw); }
  .cover_section--2 .image--2_2{ width:45vw; top:calc(44% + 2.5vw); left:calc(52% - 2.5vw); }
  .cover_section--3 .image--3_1{ width:52vw; top:calc(10% + 3vw); left:calc(5% - 3vw); }
  .cover_section--3 .image--3_2{ width:43vw; top:calc(46% + 2.5vw); left:calc(34% - 2.5vw); }
  .cover_section--3 .image--3_3{ width:46vw; top:calc(16% + 3vw); left:calc(56% - 3vw); }

  /* 写真背後の大円。SP時は rem 基準（1rem=10px固定）だと画面外まで肥大するため
     写真と同じ vw 基準にして、PCと同じ比率に揃える */
  .image--1_1 .shadow{ width:79vw; right:-16vw; top:-8vw; }
  .image--2_1 .shadow{ width:62vw; right:-13vw; bottom:-10vw; }
  .image--2_2 .shadow{ width:26vw; left:-8vw; top:-5vw; }
  .image--3_1 .shadow{ width:43vw; right:-12vw; top:-7vw; }
  .image--3_2 .shadow{ width:26vw; left:-7vw; bottom:-6vw; }
  .image--3_3 .shadow{ width:34vw; right:-9vw; bottom:-8vw; }

  .autoScrollText{ font-size:7rem; }
  .project_headline{ font-size:5rem; }
  .project_cast--1{ width:7rem; right:2%; top:-2rem; }
  .projectList_link,.projectList:nth-child(even) .projectList_link{ grid-template-columns:1fr; gap:2rem; padding:1.6rem; }
  .projectList:nth-child(even) .projectList_image{ order:0; }
  .projectList_content{ padding:0 .6rem 1rem; }
  .projectList_headline .is-main{ font-size:1.9rem; }

  .about{ padding:8rem 0 10rem; }
  .aboutCore_mask{ width:80vw; height:80vw; }
  .about_headline{ font-size:3.4rem; }
  .about_inner{ padding:3rem 2rem; }

  .banner_banner{ height:24rem; }
  .banner_copy--main{ font-size:3.6rem; }

  .footer_wrap{ flex-direction:column; gap:3rem; }
  .footer_content{ flex-direction:column; gap:3rem; }
}

/* =========================================================
   sub pages（Message / Work detail 共通）
   ========================================================= */
.subpage{ background:var(--color-bg); }
.pageHead{ position:relative; padding:calc(var(--header-h) + 7rem) 0 5rem; text-align:center; overflow:hidden; }
.pageHead_cat{ font-family:"Jost",sans-serif; letter-spacing:.24em; font-size:1.3rem; color:var(--color-accent); text-transform:uppercase; }
.pageHead_en{ font-family:"Jost",sans-serif; font-weight:700; font-size:7rem; line-height:1.05; letter-spacing:.02em; margin-top:1.2rem; }
.pageHead_en em{ display:inline-block; }
.pageHead_ja{ margin-top:1rem; font-size:1.6rem; color:var(--color-text-sub); }
.pageHead_arc{ position:absolute; left:50%; top:-14rem; transform:translateX(-50%); width:120rem; height:120rem;
  background:radial-gradient(circle, rgba(255,0,0,.08), transparent 62%); pointer-events:none; }

.pageHero{ max-width:120rem; margin:0 auto 8rem; padding:0 4rem; }
.pageHero_image{ border-radius:2.8rem; overflow:hidden; aspect-ratio:16/9; box-shadow:0 3rem 6rem rgba(20,30,28,.14); }

.section{ padding:7rem 0; }
.section--sub{ background:var(--color-bg-sub); }
.section_inner{ max-width:100rem; margin:0 auto; padding:0 4rem; }
.section_inner--wide{ max-width:120rem; }
.section_label{ font-family:"Jost",sans-serif; letter-spacing:.2em; font-size:1.3rem; color:var(--color-accent); text-transform:uppercase; }
.section_title{ font-size:3.6rem; font-weight:900; line-height:1.4; margin:1.2rem 0 2.4rem; }
.section_title small{ display:block; font-size:1.5rem; font-weight:500; color:var(--color-text-sub); letter-spacing:.1em; margin-bottom:.6rem; font-family:"Jost",sans-serif; }
.section_body{ font-size:1.6rem; line-height:2.1; }
.section_body + .section_body{ margin-top:1.6rem; }

/* message: representative */
.msgLead{ text-align:center; }
.msgLead_headline{ font-size:4.4rem; font-weight:900; line-height:1.5; }
.msgLead_headline .is-accent{ color:var(--color-accent); }
.repMessage{ display:grid; grid-template-columns:38rem 1fr; gap:6rem; align-items:center; }
.repMessage_photo{ border-radius:2.4rem; overflow:hidden; aspect-ratio:3/4; box-shadow:0 2rem 4rem rgba(20,30,28,.12); }
.repMessage_name{ margin-top:3rem; font-family:"Jost",sans-serif; }
.repMessage_name span{ display:block; }
.repMessage_name .is-role{ font-size:1.3rem; color:var(--color-text-sub); letter-spacing:.14em; }
.repMessage_name .is-person{ font-size:2.2rem; font-weight:600; margin-top:.4rem; letter-spacing:.06em; }

/* steps / process */
.stepList{ display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; margin-top:1rem; }
.step{ background:var(--color-white); border-radius:2rem; padding:3rem 2.4rem; box-shadow:0 1.6rem 3.2rem rgba(20,30,28,.05); }
.step_no{ font-family:"Jost",sans-serif; font-size:1.4rem; letter-spacing:.2em; color:var(--color-accent); }
.step_no b{ font-size:3.6rem; display:block; line-height:1; margin-bottom:.4rem; }
.step_title{ font-size:2rem; font-weight:700; margin:1.2rem 0 .8rem; }
.step_text{ font-size:1.4rem; color:var(--color-text-sub); line-height:1.9; }

/* feature list */
.featureList{ display:flex; flex-direction:column; gap:0; margin-top:1rem; }
.feature{ display:flex; gap:2.4rem; align-items:flex-start; padding:2.4rem 0; border-top:1px solid var(--color-line); }
.feature:last-child{ border-bottom:1px solid var(--color-line); }
.feature_mark{ flex-shrink:0; width:4.4rem; height:4.4rem; border-radius:50%; background:var(--color-accent); color:#fff;
  display:grid; place-items:center; font-family:"Jost",sans-serif; font-weight:700; }
.feature_title{ font-size:1.9rem; font-weight:700; }
.feature_text{ font-size:1.45rem; color:var(--color-text-sub); margin-top:.4rem; line-height:1.9; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:3rem; text-align:center; }
.stat_num{ font-family:"Jost",sans-serif; font-weight:700; font-size:5.2rem; color:var(--color-accent); line-height:1; }
.stat_num small{ font-size:2rem; }
.stat_label{ margin-top:.8rem; font-size:1.4rem; color:var(--color-text-sub); }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.gallery_item{ border-radius:1.6rem; overflow:hidden; aspect-ratio:4/3; }
.gallery_item .ph{ transition:transform .8s var(--ease-out); }
.gallery_item:hover .ph{ transform:scale(1.05); }

/* related */
.related{ display:grid; grid-template-columns:repeat(2,1fr); gap:3rem; }
.relatedCard{ display:block; background:var(--color-white); border-radius:2rem; overflow:hidden; box-shadow:0 1.6rem 3.2rem rgba(20,30,28,.06);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.relatedCard:hover{ transform:translateY(-.6rem); box-shadow:0 2.6rem 5rem rgba(20,30,28,.12); }
.relatedCard_image{ aspect-ratio:16/9; overflow:hidden; }
.relatedCard_body{ padding:2rem 2.4rem; display:flex; align-items:center; justify-content:space-between; }
.relatedCard_en{ font-family:"Jost",sans-serif; font-weight:600; font-size:2rem; letter-spacing:.06em; }
.relatedCard_ja{ font-size:1.3rem; color:var(--color-text-sub); margin-top:.2rem; }
.relatedCard_arrow{ width:4rem; height:4rem; border-radius:50%; border:1px solid var(--color-line); display:grid; place-items:center; }
.relatedCard_arrow i{ width:.9rem; height:.9rem; border-top:2px solid var(--color-text); border-right:2px solid var(--color-text); transform:rotate(45deg); }

@media (max-width:767px){
  .pageHead{ padding:calc(var(--header-h) + 4rem) 0 3rem; }
  .pageHead_en{ font-size:4.4rem; }
  .pageHero{ margin-bottom:5rem; padding:0 2rem; }
  .section{ padding:5rem 0; }
  .section_inner{ padding:0 2rem; }
  .section_title{ font-size:2.6rem; }
  .msgLead_headline{ font-size:2.8rem; }
  .repMessage{ grid-template-columns:1fr; gap:3rem; }
  .repMessage_photo{ max-width:32rem; margin:0 auto; }
  .stepList{ grid-template-columns:1fr; gap:2rem; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:2.4rem 2rem; }
  .stat_num{ font-size:4rem; }
  .gallery{ grid-template-columns:1fr; }
  .related{ grid-template-columns:1fr; }
}