@charset "UTF-8";
/* ============================================================
   株式会社キヅキ（架空）— shinka-inc.com 構成モデル
   ============================================================ */

/* ---------- リセット ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
figure { margin: 0; }

/* ---------- トークン ---------- */
:root {
  /* フルードrem（1300px基準・10px=1rem） */
  --min-width: 1300;
  --max-width: 1600;
  --fz: clamp(10px, calc(100vw / var(--min-width) * 10), calc(var(--max-width) / 1300 * 10px));
  font-size: var(--fz);

  --vh: 1vh;
  --wh: calc(var(--vh) * 100);
  --outside: 3.47222vw;

  --color-main: #24427A;
  --color-main2: #16294F;
  --color-main3: #3A67B8;
  --color-backdrop: #B9C7DD;
  --color-dark: #1C2433;
  --color-bg: #FFFFFF;
  --color-bg-tint: rgba(36, 66, 122, 0.10);
  --color-accent-warm: #F08C2E;
  --color-txt: #333333;
  --color-txt2: #FFFFFF;
  --scroll-opacity: 0.5;

  --radius-4xs: 0.3rem; --radius-3xs: 0.5rem; --radius-2xs: 1rem;
  --radius-xs: 2rem; --radius-sm: 3rem; --radius-md: 5rem; --radius-max: 1000px;

  --ease-level0: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-level1: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-level2: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-coin: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-fadeup: 750ms var(--ease-level1);
  --transition-fadeup2: 1500ms var(--ease-level1);
  --transition-loading: 2200ms var(--ease-level0);
  --transition-coin: 1200ms var(--ease-coin);
  --transition-symbol: 1000ms var(--ease-level1);
  --transition-hover: 410ms var(--ease-level1);

  --font-gothic: 'Noto Sans JP', sans-serif;
  --font-en: 'Montserrat', sans-serif;
  --font-num: 'Roboto Condensed', sans-serif;
  --font-mincho: 'Zen Old Mincho', serif;
}
@media (max-width: 1023px) {
  :root { --fz: calc(100 / 375 * 10vw); --outside: 5.12821vw; }
}

html { scroll-behavior: auto; }
body {
  font-family: var(--font-gothic);
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--color-txt);
  background: var(--color-bg);
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

.page { position: relative; }

/* ============================================================
   ローディング（初回のみ）
   ============================================================ */
.loading {
  --mask-size: 16rem;
  position: fixed; inset: 0;
  z-index: 10000;
  width: 100vw; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--color-bg);
}
.loading.is-none { display: none; }

.loading__bg {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--color-bg);
  /* シンボルSVGもdata URI埋め込み（file://対策） */
  -webkit-mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='black'%3E%3Crect x='14' y='66' width='72' height='24' rx='10'/%3E%3Crect x='22' y='41' width='48' height='22' rx='9'/%3E%3Crect x='34' y='18' width='34' height='20' rx='8'/%3E%3Crect x='58' y='6' width='5' height='14' rx='2.5'/%3E%3Cpath d='M63 12 C64 3 74 -1 83 2 C81 11 72 16 63 12 Z'/%3E%3Cpath d='M58 9 C56 3 49 0 42 2 C44 9 51 12 58 9 Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='black'%3E%3Crect x='14' y='66' width='72' height='24' rx='10'/%3E%3Crect x='22' y='41' width='48' height='22' rx='9'/%3E%3Crect x='34' y='18' width='34' height='20' rx='8'/%3E%3Crect x='58' y='6' width='5' height='14' rx='2.5'/%3E%3Cpath d='M63 12 C64 3 74 -1 83 2 C81 11 72 16 63 12 Z'/%3E%3Cpath d='M58 9 C56 3 49 0 42 2 C44 9 51 12 58 9 Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, center;
  mask-position: 0 0, center;
  -webkit-mask-size: 100% 100%, var(--mask-size) var(--mask-size);
  mask-size: 100% 100%, var(--mask-size) var(--mask-size);
  will-change: mask-size;
  opacity: 0;
  transition: -webkit-mask-size var(--transition-loading);
  transition: mask-size var(--transition-loading), -webkit-mask-size var(--transition-loading);
}

.loading__coin {
  position: relative;
  perspective: 2000px;
  width: var(--mask-size); height: var(--mask-size);
  min-width: var(--mask-size); min-height: var(--mask-size);
  transition: var(--transition-loading);
  transition-property: width, height, min-width, min-height;
}
.loading__card {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background-color: var(--color-bg-tint);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform var(--transition-coin), background-color var(--transition-loading);
}
.loading__card.-front { transform: rotateY(0deg); }
.loading__card.-back { transform: rotateY(180deg); }
.loading__card svg { width: 62%; height: 62%; }

/* まばたき */
.mascot__eyes {
  transform-box: fill-box;
  transform-origin: 50% 80%;
  animation: eye 3300ms ease infinite;
}
.mascot__wink { opacity: 0; transition: opacity 200ms var(--ease-level1); }
@keyframes eye {
  0%, 88%, 96%, 100% { transform: scaleY(1); }
  92% { transform: scaleY(0.08); }
}

/* op1: ウインク */
body.is-op1 .mascot__eyes { animation: none; }
body.is-op1 .mascot__eye.-right { opacity: 0; }
body.is-op1 .mascot__wink { opacity: 1; }
/* op2: コイン反転 */
body.is-op2 .loading__card.-front { transform: rotateY(-180deg); }
body.is-op2 .loading__card.-back { transform: rotateY(0deg); }
/* op3: くり抜き */
body.is-op3 .loading { background: none; }
body.is-op3 .loading__bg { opacity: 1; }
body.is-op3 .loading__symbol { opacity: 0; transition: opacity var(--transition-symbol); }
/* op4: 拡大 */
body.is-op4 .loading { --mask-size: max(400vw, 600vh); pointer-events: none; }
body.is-op4 .loading__card { background-color: transparent; }

/* 2回目以降の簡易ローディング */
.loading2 {
  position: fixed; inset: 0; z-index: 10001;
  background: var(--color-bg);
  transition: opacity 500ms var(--ease-level0), visibility 500ms;
}
.loading2.is-hidden { opacity: 0; visibility: hidden; }
.loading2.is-none { display: none; }

/* ============================================================
   固定背景メディア（ロゴ形マスク）
   ============================================================ */
.kv-media {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100vw; height: 100vh;
  overflow: hidden;
  /* マスクSVGはdata URIで埋め込み（file://で開いても失敗しないように） */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='13,0 100,0 100,42 88,100 0,100 0,57' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='13,0 100,0 100,42 88,100 0,100 0,57' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: center; mask-position: center;
}
.kv-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  animation: kvfadeA 20s linear infinite, kvzoom 10s ease-in-out infinite alternate;
}
.kv-media img.-second {
  animation: kvfadeB 20s linear infinite, kvzoom 10s ease-in-out infinite alternate-reverse;
}
@keyframes kvfadeA { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes kvfadeB { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kvzoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* 暗転シェード（KVより下〜ページ末尾） */
.shade {
  position: absolute;
  top: var(--wh); left: 0; right: 0; bottom: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, var(--scroll-opacity));
  pointer-events: none;
}

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0;
  z-index: 1000;
  width: 100vw;
  padding: 1.6rem var(--outside);
  opacity: 0; translate: 0 -1rem;
  transition: opacity 750ms var(--ease-level1) 400ms, translate 750ms var(--ease-level1) 400ms,
              background-color 400ms var(--ease-level1), box-shadow 400ms var(--ease-level1),
              padding 400ms var(--ease-level1);
}
body.is-loaded .site-header { opacity: 1; translate: 0 0; }
body.is-scrolled .site-header {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.4rem 2.4rem rgba(22, 41, 79, 0.10);
  padding-top: 1rem; padding-bottom: 1rem;
}
.site-header__inner { display: flex; align-items: center; gap: 2.4rem; }
.site-header__logo { display: flex; align-items: center; gap: 0.9rem; }
.site-header__logo svg { width: 3.4rem; height: 3.4rem; }
.site-header__logo-txt {
  display: flex; flex-direction: column; line-height: 1.1;
  font-family: var(--font-en); font-weight: 800; font-size: 1.9rem; letter-spacing: 0.04em;
  color: var(--color-main);
}
.site-header__logo-txt small { font-family: var(--font-gothic); font-weight: 700; font-size: 0.9rem; color: var(--color-txt); }

.gnav { margin-left: auto; }
.gnav > ul { display: flex; gap: 2.6rem; }
.gnav > ul > li { position: relative; }
.gnav > ul > li > a {
  font-size: 1.4rem; font-weight: 500; padding: 1rem 0;
  transition: color var(--transition-hover);
}
.gnav > ul > li > a:hover { color: var(--color-main3); }

.gnav__panel {
  position: absolute; top: calc(100% + 1rem); left: 50%;
  transform: translate(-50%, 0.8rem);
  min-width: 22rem;
  background: var(--color-bg);
  border-radius: var(--radius-3xs);
  box-shadow: 0 0.6rem 2.8rem rgba(22, 41, 79, 0.16);
  padding: 1.6rem 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-hover), transform var(--transition-hover), visibility var(--transition-hover);
}
.gnav .has-child:hover .gnav__panel,
.gnav .has-child:focus-within .gnav__panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.gnav__panel-head {
  font-family: var(--font-en); font-weight: 700; font-size: 1.1rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-main3);
  margin-bottom: 0.6rem;
}
.gnav__panel a {
  display: block; font-size: 1.35rem; padding: 0.45rem 0; white-space: nowrap;
  transition: color var(--transition-hover), translate var(--transition-hover);
}
.gnav__panel a:hover { color: var(--color-main3); translate: 0.4rem 0; }

.site-header__btns { display: flex; align-items: center; gap: 1rem; }
.btn-outline, .btn-fill {
  font-size: 1.3rem; font-weight: 700;
  padding: 0.9rem 1.8rem; border-radius: var(--radius-3xs);
  transition: background-color var(--transition-hover), color var(--transition-hover), opacity var(--transition-hover);
  white-space: nowrap;
}
.btn-outline { background: #fff; border: 1px solid rgba(36, 66, 122, 0.35); color: var(--color-main); }
.btn-outline:hover { background: var(--color-bg-tint); }
.btn-fill { background: var(--color-main); color: var(--color-txt2); }
.btn-fill:hover { opacity: 0.85; }

.hamburger {
  display: none;
  position: relative; width: 4.2rem; height: 4.2rem;
  border-radius: var(--radius-3xs); background: var(--color-main);
}
.hamburger span {
  position: absolute; left: 50%; width: 1.8rem; height: 2px;
  background: #fff; translate: -50% 0;
  transition: rotate var(--transition-hover), top var(--transition-hover);
}
.hamburger span:nth-child(1) { top: calc(50% - 0.4rem); }
.hamburger span:nth-child(2) { top: calc(50% + 0.4rem); }
body.is-menu .hamburger span:nth-child(1) { top: 50%; rotate: 20deg; }
body.is-menu .hamburger span:nth-child(2) { top: 50%; rotate: -20deg; }

@media (max-width: 1023px) {
  .gnav, .btn-outline { display: none; }
  .hamburger { display: block; }
  .site-header__inner { gap: 1.2rem; }
  .site-header__btns { margin-left: auto; }
}

/* ---------- フルスクリーンサイトマップ ---------- */
.sitemap {
  position: fixed; inset: 0; z-index: 900;
  background: var(--color-main2); color: var(--color-txt2);
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--ease-level1), visibility 500ms;
}
body.is-menu .sitemap { opacity: 1; visibility: visible; }
.sitemap__inner { width: 100%; padding: 10rem var(--outside) 6rem; }
.sitemap__en {
  font-family: var(--font-en); font-weight: 700; letter-spacing: 0.1em;
  font-size: 1.2rem; color: var(--color-accent-warm); margin-bottom: 2rem;
}
.sitemap__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 2rem; }
.sitemap__list a {
  display: block; font-size: 1.9rem; font-weight: 700; padding: 1rem 0;
  opacity: 0; translate: 0 1.4rem;
  transition: opacity 600ms var(--ease-level1), translate 600ms var(--ease-level1);
}
body.is-menu .sitemap__list li:nth-child(1) a { transition-delay: 80ms; }
body.is-menu .sitemap__list li:nth-child(2) a { transition-delay: 140ms; }
body.is-menu .sitemap__list li:nth-child(3) a { transition-delay: 200ms; }
body.is-menu .sitemap__list li:nth-child(4) a { transition-delay: 260ms; }
body.is-menu .sitemap__list li:nth-child(5) a { transition-delay: 320ms; }
body.is-menu .sitemap__list li:nth-child(6) a { transition-delay: 380ms; }
body.is-menu .sitemap__list li:nth-child(7) a { transition-delay: 440ms; }
body.is-menu .sitemap__list li:nth-child(8) a { transition-delay: 500ms; }
body.is-menu .sitemap__list a { opacity: 1; translate: 0 0; }
.sitemap__loop { margin-top: 5rem; opacity: 0.35; font-family: var(--font-en); font-size: 3.2rem; font-weight: 700; white-space: nowrap; }

/* ============================================================
   ヒーロー（KV・全画面＋斜め切り欠き）
   ============================================================ */
.kv { position: relative; height: var(--wh); color: var(--color-txt2); z-index: 2; }

.kv__mark {
  position: absolute; z-index: 5;
  top: 10rem; right: 5rem;
  width: 42rem; height: 42rem;
  opacity: 0.14;
  pointer-events: none;
}
.kv__grad {
  position: absolute; left: 0; bottom: 0; z-index: 20;
  width: 100%; height: 46rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--scroll-opacity)) 100%);
  pointer-events: none;
}
.kv__catch {
  position: absolute; z-index: 30;
  left: var(--outside); bottom: 15.5rem;
  font-size: 6rem; font-weight: 900; line-height: 1.5;
  letter-spacing: 0.06em;
  text-shadow: 0 0.2rem 3rem rgba(0, 0, 0, 0.35);
}
.kv__en {
  position: absolute; z-index: 30;
  left: calc(var(--outside) + 57rem); bottom: 16.5rem;
  font-family: var(--font-en); font-weight: 600;
  font-size: 1.8rem; line-height: 1.5; letter-spacing: 0.06em;
  text-shadow: 0 0.2rem 2rem rgba(0, 0, 0, 0.35);
}
.kv__pv { position: absolute; z-index: 30; right: var(--outside); bottom: 12rem; }
@media (max-width: 1023px) {
  .kv__mark { top: 9rem; right: 2rem; width: 26rem; height: 26rem; }
  .kv__catch { bottom: 33rem; font-size: 3.2rem; }
  .kv__en { left: var(--outside); bottom: 28.5rem; font-size: 1.2rem; }
  .kv__pv { bottom: 16rem; }
  .kv__pv .pv-btn { width: 22rem; }
}

/* PVボタン */
.pv-btn {
  position: relative; display: block;
  width: 30rem; aspect-ratio: 16 / 9;
  border-radius: var(--radius-3xs); overflow: hidden;
  box-shadow: 0 0.8rem 3rem rgba(0, 0, 0, 0.35);
  transition: scale var(--transition-hover);
}
.pv-btn:hover { scale: 1.03; }
.pv-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 700ms var(--ease-level1); }
.pv-btn:hover img { scale: 1.06; }
.pv-btn__contents {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end; gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  color: #fff; text-align: left;
}
.pv-btn__play {
  flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: #fff; position: relative;
}
.pv-btn__play::before {
  content: ''; position: absolute; top: 50%; left: 53%;
  translate: -50% -50%;
  border-style: solid; border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent #1C2433;
}
.pv-btn__txts { line-height: 1.4; }
.pv-btn__title { display: block; font-size: 1.3rem; font-weight: 700; }
.pv-btn__time { display: block; font-family: var(--font-num); font-size: 1.1rem; opacity: 0.8; }
.pv-btn.-large { width: min(72rem, 90vw); margin-inline: auto; }
.pv-btn.-large .pv-btn__title { font-size: 1.7rem; }

/* ============================================================
   Topics帯
   ============================================================ */
.topic {
  position: absolute; left: var(--outside); right: var(--outside); bottom: 0; z-index: 25;
  color: var(--color-txt2);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.topic__inner {
  display: flex; align-items: center; gap: 3rem;
  padding: 2.2rem 0;
}
.topic__title { font-family: var(--font-en); font-weight: 600; font-size: 2.2rem; }
.topic__card {
  display: flex; align-items: center; gap: 2.4rem; flex: 1;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: 3rem;
  font-size: 1.4rem;
}
.topic__card time { font-family: var(--font-num); opacity: 0.75; }
.topic__card p { flex: 1; }
@media (max-width: 1023px) {
  .topic__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .topic__card { width: 100%; border-left: none; padding-left: 0; gap: 1.2rem; }
}

.circle-arrow {
  flex: none; width: 4.4rem; height: 4.4rem; border-radius: 50%;
  border: 1px solid currentColor; position: relative;
  transition: background-color var(--transition-hover);
}
.circle-arrow::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  translate: -50% -50%; rotate: 45deg;
  width: 0.8rem; height: 0.8rem;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transition: translate var(--transition-hover);
}
a:hover .circle-arrow::before { translate: -30% -50%; }

/* ============================================================
   スクロール暗転ゾーン
   ============================================================ */
.dark-zone { position: relative; z-index: 10; height: 85.2rem; }
@media (max-width: 1023px) { .dark-zone { height: 66.5rem; } }

/* ============================================================
   イントロ
   ============================================================ */
.intro { position: relative; z-index: 10; color: var(--color-txt2); }
.intro__inner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6rem;
  padding: 6rem var(--outside) 10rem;
}
.intro__txt { font-size: 2.05rem; font-weight: 500; line-height: 2.6; white-space: nowrap; margin-top: 14rem; }
.intro__txt .-strong { font-weight: 900; font-size: 2.4rem; margin-top: 2.5rem; }
.intro__figures { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; width: 48%; margin-top: 26rem; }
.intro__figures figure:nth-of-type(1) { width: 42%; }
.intro__figures figure:nth-of-type(2) { width: 52%; margin-bottom: 10rem; }
.intro__figures img { border-radius: var(--radius-2xs); }
@media (max-width: 1023px) {
  .intro__inner { flex-direction: column; gap: 4rem; padding-bottom: 6rem; }
  .intro__txt { font-size: 1.55rem; margin-top: 4rem; }
  .intro__txt .-strong { font-size: 1.9rem; }
  .intro__figures { width: 100%; margin-top: 0; }
  .intro__figures figure:nth-of-type(2) { margin-bottom: 4rem; }
}

/* ============================================================
   セクション見出し共通
   ============================================================ */
.sec-header { padding: 6rem var(--outside) 3.5rem; }
.sec-header__en {
  font-family: var(--font-en); font-weight: 600;
  font-size: 7.2rem; line-height: 1.05; letter-spacing: 0.01em;
}
.sec-header__en span { color: var(--color-accent-warm); }
.sec-header__ja { font-size: 1.5rem; font-weight: 700; margin-top: 1rem; }
.sec-header.-dark .sec-header__en span { color: var(--color-main3); }
@media (max-width: 1023px) { .sec-header__en { font-size: 4.2rem; } }

/* ============================================================
   クロストーク
   ============================================================ */
.xtalk { position: relative; z-index: 10; color: var(--color-txt2); padding-bottom: 10rem; }
.xtalk-carousel { overflow: visible; padding-left: var(--outside); }
.xtalk-card {
  width: 36rem; margin-right: 2.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-2xs);
  padding: 2.2rem;
  backdrop-filter: blur(2px);
}
.xtalk-card__num {
  font-family: var(--font-num); font-style: italic; font-weight: 700;
  font-size: 3.4rem; color: var(--color-accent-warm); line-height: 1;
}
.xtalk-card figure { margin: 1.4rem 0; border-radius: var(--radius-3xs); overflow: hidden; }
.xtalk-card figure img { transition: scale 700ms var(--ease-level1); }
.xtalk-card:hover figure img { scale: 1.05; }
.xtalk-card h3 { font-size: 1.9rem; font-weight: 700; }
.xtalk-card__txt { font-size: 1.4rem; opacity: 0.85; margin-top: 0.6rem; }
@media (max-width: 1023px) { .xtalk-card { width: 28rem; } }

.xtalk-carousel__ui {
  display: flex; align-items: center; gap: 2rem;
  padding: 3rem var(--outside) 0;
}
.carousel-arrow {
  width: 4.8rem; height: 4.8rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5); position: relative;
  transition: background-color var(--transition-hover);
}
.carousel-arrow:hover { background: rgba(255, 255, 255, 0.12); }
.carousel-arrow::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  translate: -40% -50%; rotate: 45deg;
  width: 0.9rem; height: 0.9rem;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.carousel-arrow.-prev::before { rotate: -135deg; translate: -60% -50%; }
.carousel-arrow.is-disabled { opacity: 0.3; pointer-events: none; }
.carousel-dots { display: flex; gap: 0.9rem; }
.carousel-dots .-bullets button {
  display: block; width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.35); padding: 0;
  transition: background-color var(--transition-hover), scale var(--transition-hover);
}
.carousel-dots .-bullets.is-active button { background: var(--color-accent-warm); scale: 1.3; }

/* ============================================================
   白背景ゾーン
   ============================================================ */
.page-white {
  position: relative; z-index: 10;
  background: var(--color-bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ---------- スペシャルコンテンツ ---------- */
.special { padding: 8rem 0 4rem; overflow: clip; }
.special__loops { display: grid; gap: 1.6rem; margin-bottom: 6rem; }
.special__loop-en {
  font-family: var(--font-en); font-weight: 600; font-size: 8.4rem; line-height: 1;
  white-space: nowrap; padding-right: 4rem;
  color: var(--color-txt);
}
.special__loop-en span { color: var(--color-accent-warm); }
.special__loop-en.-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(51, 51, 51, 0.45);
}
.special__loop-en.-outline span { color: transparent; -webkit-text-stroke: 1px var(--color-accent-warm); }
.special__loop-img {
  width: 15rem; aspect-ratio: 4 / 3; margin-right: 4rem;
  border-radius: var(--radius-2xs); overflow: hidden; align-self: center;
}
.special__loop-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .special__loop-en { font-size: 4.6rem; } .special__loop-img { width: 10rem; } }

.special__items { display: grid; gap: 3rem; padding: 0 var(--outside); }

.sp-card { position: relative; }
.sp-card > a {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-2xs);
}

/* さがせ！キヅキ */
.sp-card.-finding > a {
  display: flex; align-items: stretch; gap: 0;
  background: linear-gradient(120deg, #EAF0F9 0%, #F6F0E4 100%);
  min-height: 34rem;
}
.sp-card.-finding .sp-card__contents { flex: 1; padding: 4.5rem 4rem; position: relative; z-index: 1; }
.sp-card.-finding .sp-card__figure { width: 46%; }
.sp-card.-finding .sp-card__figure img { width: 100%; height: 100%; object-fit: cover; }
.sp-card__title .-en {
  display: block; font-family: var(--font-en); font-weight: 800; font-style: italic;
  font-size: 3.2rem; color: var(--color-accent-warm); line-height: 1.1;
}
.sp-card__title .-ja { display: block; font-family: var(--font-mincho); font-weight: 900; font-size: 3.6rem; color: var(--color-main); line-height: 1.3; }
.sp-card__catch { font-weight: 700; font-size: 1.6rem; margin-top: 1.4rem; color: var(--color-main2); }
.sp-card__txt { font-size: 1.4rem; margin-top: 1rem; }
@media (max-width: 1023px) {
  .sp-card.-finding > a { flex-direction: column; }
  .sp-card.-finding .sp-card__figure { width: 100%; aspect-ratio: 16 / 9; }
  .sp-card.-finding .sp-card__contents { padding: 3rem 2.4rem; }
  .sp-card__title .-ja { font-size: 2.6rem; }
}

/* 漫画でわかるキヅキ */
.sp-card.-comic > a {
  position: relative; min-height: 36rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-dark); color: #fff; text-align: center;
}
.sp-card__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.5; }
.sp-card__bg img { width: 100%; height: 100%; object-fit: cover; }
.sp-card.-comic .sp-card__title { position: relative; z-index: 1; }
.sp-card__title .-ja.-large { font-family: var(--font-mincho); font-weight: 900; font-size: 4.6rem; color: #fff; text-shadow: 0 0.2rem 2rem rgba(0,0,0,0.5); }
.sp-card__title .-en.-sub {
  display: block; font-family: var(--font-en); font-weight: 700; font-style: normal;
  font-size: 1.3rem; letter-spacing: 0.22em; color: var(--color-accent-warm); margin-top: 1.2rem;
}
.sp-card__loop {
  position: absolute; left: 0; right: 0; z-index: 1;
  font-family: var(--font-en); font-weight: 700; font-size: 1.4rem;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65;
  white-space: nowrap;
}
.sp-card__loop.-top { top: 1.6rem; }
.sp-card__loop.-bottom { bottom: 1.6rem; }
@media (max-width: 1023px) { .sp-card__title .-ja.-large { font-size: 3rem; } }

/* 数字でわかるキヅキ */
.sp-card.-numbers > a {
  position: relative; display: flex; gap: 3rem;
  background: #FDFBF6; min-height: 38rem;
  border: 1px solid rgba(36, 66, 122, 0.12);
}
.sp-card.-numbers .sp-card__contents { position: relative; z-index: 1; padding: 4.5rem 4rem; width: 38%; }
.sp-card.-numbers .sp-card__title .-ja { font-size: 3.2rem; }
.sp-card__grid {
  position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(36, 66, 122, 0.10) 0 1px, transparent 1px calc(100% / 7)),
    repeating-linear-gradient(0deg, rgba(36, 66, 122, 0.10) 0 1px, transparent 1px 5rem);
}
.sp-card__illust { position: relative; z-index: 1; flex: 1; }
.sp-card__mascot { position: absolute; width: 12rem; left: 6%; bottom: 8%; rotate: -6deg; }
.sp-num {
  position: absolute;
  font-family: var(--font-num); font-style: italic; font-weight: 700;
  color: var(--color-main); line-height: 1;
  display: flex; align-items: flex-end; gap: 0.6rem;
}
.sp-num small { font-family: var(--font-gothic); font-style: normal; font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: var(--color-txt); padding-bottom: 0.5rem; }
.sp-num.-n1 { font-size: 7.6rem; top: 8%; left: 4%; }
.sp-num.-n2 { font-size: 6rem; top: 14%; left: 42%; color: var(--color-accent-warm); }
.sp-num.-n3 { font-size: 6.8rem; top: 42%; left: 68%; }
.sp-num.-n4 { font-size: 8.4rem; top: 52%; left: 26%; color: var(--color-main3); }
.sp-num.-n5 { font-size: 5.6rem; top: 12%; left: 78%; color: var(--color-accent-warm); }
@media (max-width: 1023px) {
  .sp-card.-numbers > a { flex-direction: column; min-height: 52rem; }
  .sp-card.-numbers .sp-card__contents { width: 100%; padding: 3rem 2.4rem 0; }
  .sp-card.-numbers .sp-card__title .-ja { font-size: 2.6rem; }
  .sp-card__illust { min-height: 26rem; }
  .sp-num.-n1 { font-size: 5rem; } .sp-num.-n4 { font-size: 5.6rem; left: 30%; }
  .sp-num.-n2 { font-size: 4.2rem; } .sp-num.-n3 { font-size: 4.6rem; left: 62%; } .sp-num.-n5 { font-size: 4rem; left: 72%; }
}

/* リップル */
.ripple-circle {
  position: absolute; border-radius: 50%;
  background: rgba(240, 140, 46, 0.22);
  pointer-events: none; z-index: 2;
}

/* ---------- 大型ループテキスト ---------- */
.looptxt-large {
  padding: 7rem 0;
  font-family: var(--font-en); font-weight: 600;
  font-size: 11rem; line-height: 1; white-space: nowrap;
  color: var(--color-txt);
}
.looptxt-large span { color: var(--color-main3); }
@media (max-width: 1023px) { .looptxt-large { font-size: 5.6rem; padding: 4rem 0; } }

/* ============================================================
   ニュース
   ============================================================ */
.news { background: var(--color-bg-tint); border-radius: var(--radius-md); margin: 0 calc(var(--outside) / 2); }
.news__inner { padding: 2rem var(--outside) 7rem; }
.news__list { display: grid; gap: 0; border-top: 1px solid rgba(36, 66, 122, 0.18); }
.news__list a {
  display: flex; align-items: center; gap: 3rem;
  padding: 2.2rem 1rem;
  border-bottom: 1px solid rgba(36, 66, 122, 0.18);
  transition: background-color var(--transition-hover);
}
.news__list a:hover { background: rgba(255, 255, 255, 0.6); }
.news__list time { font-family: var(--font-num); font-size: 1.4rem; color: var(--color-main); }
.news__list p { font-size: 1.5rem; }
.news__voice {
  margin-top: 3.5rem;
  display: flex; align-items: center; gap: 2.4rem;
  background: var(--color-main);
  color: var(--color-txt2);
  border-radius: var(--radius-2xs);
  padding: 2.8rem 3.2rem;
  transition: opacity var(--transition-hover);
}
.news__voice:hover { opacity: 0.92; }
.news__voice-title { flex: none; font-size: 2rem; font-weight: 900; }
.news__voice-txt { flex: 1; font-size: 1.35rem; opacity: 0.9; }
@media (max-width: 1023px) {
  .news__list a { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .news__voice { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ============================================================
   事業紹介
   ============================================================ */
.service { padding-bottom: 4rem; }
.svc { padding: 4rem 0; }
.svc__inner {
  display: flex; align-items: center; gap: 6rem;
  padding: 0 var(--outside);
}
.svc.-reverse .svc__inner { flex-direction: row-reverse; }
.svc__figure { width: 52%; flex: none; border-radius: var(--radius-2xs); overflow: hidden; }
.svc__figure img { transition: scale 900ms var(--ease-level1); width: 100%; }
.svc:hover .svc__figure img { scale: 1.04; }
.svc__num {
  font-family: var(--font-num); font-style: italic; font-weight: 700;
  font-size: 4.6rem; line-height: 1; color: var(--color-main3);
}
.svc__title { font-size: 3rem; font-weight: 900; margin-top: 0.8rem; }
.svc__txt { font-size: 1.45rem; margin-top: 1.6rem; }
@media (max-width: 1023px) {
  .svc__inner, .svc.-reverse .svc__inner { flex-direction: column; gap: 2.4rem; }
  .svc__figure { width: 100%; }
  .svc__title { font-size: 2.2rem; }
}

/* ピルボタン（テキストリップル） */
.pill-btn {
  display: inline-block; margin-top: 2.4rem;
  border: 1px solid var(--color-main); border-radius: var(--radius-max);
  padding: 1.1rem 3.2rem;
  color: var(--color-main); font-size: 1.4rem; font-weight: 700;
  overflow: hidden; cursor: pointer;
  transition: background-color var(--transition-hover), color var(--transition-hover);
}
.pill-btn:hover { background: var(--color-main); color: var(--color-txt2); }
.pill-btn__t { position: relative; display: block; overflow: hidden; }
.pill-btn__t span { display: block; transition: translate 500ms var(--ease-level2); }
.pill-btn__t span[aria-hidden] { position: absolute; inset: 0; translate: 0 110%; }
.pill-btn:hover .pill-btn__t span:first-child { translate: 0 -110%; }
.pill-btn:hover .pill-btn__t span[aria-hidden] { translate: 0 0; }

/* ---------- PV再掲 ---------- */
.pv-again { padding: 6rem var(--outside) 9rem; }

/* ============================================================
   フッター
   ============================================================ */
.footer { position: relative; z-index: 10; background: var(--color-main2); color: var(--color-txt2); }
.footer__loop {
  padding: 4.5rem 0 2rem;
  font-family: var(--font-en); font-weight: 700; font-size: 4.2rem; line-height: 1.1;
  opacity: 0.9; white-space: nowrap;
}
.footer__loop span { color: var(--color-accent-warm); }
.footer__inner {
  display: flex; justify-content: space-between; gap: 6rem;
  padding: 4rem var(--outside) 3rem;
}
.footer__brand svg { width: 6rem; height: 6rem; }
.footer__name { font-size: 2rem; font-weight: 900; margin-top: 1.4rem; }
.footer__addr { font-size: 1.25rem; opacity: 0.7; margin-top: 0.4rem; }
.footer__nav { display: flex; gap: 6rem; }
.footer__nav a { display: block; font-size: 1.4rem; padding: 0.5rem 0; opacity: 0.85; transition: opacity var(--transition-hover); }
.footer__nav a:hover { opacity: 1; }
.footer__note {
  padding: 2rem var(--outside);
  font-size: 1.2rem; opacity: 0.65;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer__note strong { color: var(--color-accent-warm); }
.footer__copy { padding: 0 var(--outside) 3rem; font-family: var(--font-en); font-size: 1.1rem; opacity: 0.5; }
@media (max-width: 1023px) {
  .footer__inner { flex-direction: column; gap: 3rem; }
  .footer__nav { gap: 3rem; }
}

/* ページトップ */
.pagetop {
  position: fixed; right: 2.4rem; bottom: 2.4rem; z-index: 500;
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  background: var(--color-main); color: #fff;
  opacity: 0; visibility: hidden; translate: 0 1rem;
  transition: opacity var(--transition-hover), visibility var(--transition-hover), translate var(--transition-hover);
}
.pagetop.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.pagetop::before {
  content: ''; position: absolute; top: 55%; left: 50%;
  translate: -50% -50%; rotate: -45deg;
  width: 1rem; height: 1rem;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
  transition: translate var(--transition-hover);
}
.pagetop:hover::before { translate: -50% -70%; }

/* ============================================================
   ループスライダー共通
   ============================================================ */
.loop { overflow: hidden; width: 100%; }
.loop__content {
  display: flex; align-items: center; width: max-content;
  will-change: transform;
}
.loop__content > * { flex: none; }
.loop.is-grabbing { cursor: grabbing; }
.loop.-txt { cursor: grab; }

/* ============================================================
   フェードアップ
   ============================================================ */
.js-fadeup {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: var(--transition-fadeup);
  transition-property: opacity, transform;
  transition-delay: var(--transition-delay, 200ms);
}
.js-fadeup.is-shown, .is-shown .js-fadeup {
  opacity: 1; transform: translate3d(0, 0, 0);
}
.d2 { --transition-delay: 520ms; }
.d7 { --transition-delay: 1320ms; }

.js-fadeups > * {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: var(--transition-fadeup);
  transition-property: opacity, transform;
}
.js-fadeups.is-shown > *, .is-shown .js-fadeups > * { opacity: 1; transform: translate3d(0, 0, 0); }
.js-fadeups.is-shown > *:nth-child(1), .is-shown .js-fadeups > *:nth-child(1) { transition-delay: 200ms; }
.js-fadeups.is-shown > *:nth-child(2), .is-shown .js-fadeups > *:nth-child(2) { transition-delay: 360ms; }
.js-fadeups.is-shown > *:nth-child(3), .is-shown .js-fadeups > *:nth-child(3) { transition-delay: 520ms; }
.js-fadeups.is-shown > *:nth-child(4), .is-shown .js-fadeups > *:nth-child(4) { transition-delay: 680ms; }
.js-fadeups.is-shown > *:nth-child(5), .is-shown .js-fadeups > *:nth-child(5) { transition-delay: 840ms; }
.js-fadeups.is-shown > *:nth-child(6), .is-shown .js-fadeups > *:nth-child(6) { transition-delay: 1000ms; }
.js-fadeups.is-shown > *:nth-child(7), .is-shown .js-fadeups > *:nth-child(7) { transition-delay: 1160ms; }
.js-fadeups.is-shown > *:nth-child(8), .is-shown .js-fadeups > *:nth-child(8) { transition-delay: 1320ms; }

.js-fadeup2s > * {
  opacity: 0;
  transform: translate3d(0, 2.4rem, 0);
  transition: var(--transition-fadeup2);
  transition-property: opacity, transform;
}
.js-fadeup2s.is-shown > * { opacity: 1; transform: translate3d(0, 0, 0); }
.js-fadeup2s.is-shown > *:nth-child(1) { transition-delay: 0ms; }
.js-fadeup2s.is-shown > *:nth-child(2) { transition-delay: 160ms; }
.js-fadeup2s.is-shown > *:nth-child(3) { transition-delay: 320ms; }
.js-fadeup2s.is-shown > *:nth-child(4) { transition-delay: 480ms; }
.js-fadeup2s.is-shown > *:nth-child(5) { transition-delay: 640ms; }
.js-fadeup2s.is-shown > *:nth-child(6) { transition-delay: 800ms; }
.js-fadeup2s.is-shown > *:nth-child(7) { transition-delay: 960ms; }
.js-fadeup2s.is-shown > *:nth-child(8) { transition-delay: 1120ms; }
.js-fadeup2s.is-shown > *:nth-child(9) { transition-delay: 1280ms; }

/* ============================================================
   モーダル
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 400ms var(--ease-level1), visibility 400ms;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__bg { position: absolute; inset: 0; background: rgba(10, 14, 22, 0.85); }
.modal__body { position: relative; width: min(96rem, 92vw); }
.modal__screen {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xs); overflow: hidden;
  background: #000;
}
.modal__screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
}
.modal.is-open .modal__screen img { animation: modalslide 12s linear infinite; }
.modal.is-open .modal__screen img.-b { animation-delay: 4s; }
.modal.is-open .modal__screen img.-c { animation-delay: 8s; }
@keyframes modalslide {
  0% { opacity: 0; transform: scale(1.06); }
  6%, 33% { opacity: 1; }
  41%, 100% { opacity: 0; }
  50% { transform: scale(1); }
}
.modal__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.4rem 2rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  color: #fff; font-size: 1.2rem;
}
.modal__close {
  position: absolute; top: -5.4rem; right: 0;
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.modal__close::before, .modal__close::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 1.6rem; height: 2px; background: #fff;
}
.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }