@charset "UTF-8";
/* =========================================
   包援 corporate site
   PC基準（1728デザイン）／SPは max-width で下書き
   ========================================= */

:root {
  --navy: #0e1a26;        /* ダークセクション背景（仮・Figma実測で差し替え） */
  --navy-thin: rgba(14, 26, 38, .72);
  --gray-bg: #eef1f2;     /* ライトセクション背景 */
  --gray-panel: #5a6670;  /* contactパネル（すりガラスのベース色） */
  --gold: #c9a86a;        /* アクセント曲線・罫線 */
  --txt: #1a1a1a;
  --txt-w: #fff;
  --serif: "Noto Serif JP", serif;
  --sans: "Noto Sans JP", sans-serif;
  --en: "Jost", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
/* scroll-behavior: smooth はScrollTrigger（pin/scrub）と干渉するためCSSでは指定しない。
   アンカーのスムーススクロールはJS側で実装 */
html{
	font-size: 62.5%;/*16px×62.5%=10px*/
}
html, body {
  /* 演出用canvas（粒の飛翔スペース）が画面外へはみ出すため、横方向は遮断。
     hiddenではなくclip：スクロールコンテナ化せずsticky等への影響を避ける */
  overflow-x: clip;
}
body {
  font-family: var(--sans);
  color: var(--txt);
  font-size: 16px;
  line-height: 1.9;
  background: var(--gray-bg);
}

/* ---------- ローディング画面 ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--navy);
  display: grid;
  place-items: center;
}
.loader canvas { max-width: 100%; }

/* ---------- 背景動画（スクロール固定・最背面） ---------- */
.bgv {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.bgv video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 動画の黒半透明フィルター（FV・contact・下層ヒーロー共通で乗る） */
.bgv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2); /* 濃度はFigma実測で調整 */
}

/* ---------- header / gnav ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  color: var(--txt-w);
  transition: color .4s;
}
/* ヘッダーは1440に絞らず画面いっぱい・左右60px */
.header .inner {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 60px 60px 0;
}
/* 最上部はロゴ大、スクロール開始で縮小（.is-scrolledはJSで付与） */
.header .logo img {
  width: 180px;
  transition: width .4s;
}
.header.is-scrolled .logo img {
  width: 100px;
}
.header .logo .logo-b {
  display: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header .gnav {
  display: flex;
  align-items: center;
  gap: 40px;
}
.header .gnav ul {
  display: flex;
  gap: 32px;
  font-size: 14px;
}
.header .gnav ul a {
  display: flex;
  align-items: center;
  gap: 4px; white-space:
  nowrap;
}
.header .gnav ul ion-icon {
  font-size: 12px;
}
.header .gnav a {
  transition: opacity .3s;
}
.header .gnav a:hover {
  opacity: .6;
}
.header .btn-contact {
  background: rgba(255, 255, 255, .9);
  color: var(--txt);
  font-family: var(--en);
  padding: 10px 32px;
  border-radius: 999px;
  font-size: 14px;
}
/* ヘッダーのContactボタン内アイコン */
.header .btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header .btn-contact ion-icon { font-size: 16px; }

/* ---------- ハンバーガーボタン（SPのみ表示） ---------- */
.hamburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, .9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--txt);
  transform: translateX(-50%);
  transition: transform .3s;
}
.hamburger span:nth-child(1) { top: 18px; }
.hamburger span:nth-child(2) { top: 25px; }

/* ---------- ドロワーメニュー ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  padding: 80px 32px 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--txt);
}
.drawer-nav { margin-top: 60px; }
.drawer-nav ul li + li { margin-top: 20px; }
.drawer-nav ul a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.drawer-nav ul ion-icon { font-size: 13px; }
.drawer-nav .btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  border: 1px solid rgba(14, 26, 38, .25);
  border-radius: 999px;
  padding: 12px 28px;
  font-family: var(--en);
  font-size: 15px;
}
.drawer-nav .btn-contact ion-icon { font-size: 17px; }
.drawer-foot {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(14, 26, 38, .15);
}
.drawer-foot .logo img { width: 80px; }
.drawer-foot .addr { font-size: 12px; line-height: 1.8; margin-top: 20px; opacity: .8; }
.drawer-foot .map { margin-top: 8px; font-size: 12px; }
.drawer-foot .map a { text-decoration: underline; text-underline-offset: 3px; font-family: var(--en); }
.drawer-foot .sns { display: flex; gap: 20px; margin-top: 24px; }
.drawer-foot .sns ion-icon { font-size: 20px; }
.drawer-foot .policy { margin-top: 24px; font-size: 12px; }
.drawer-foot .policy a { text-decoration: underline; text-underline-offset: 3px; }
.drawer-foot .copy {
  margin-top: 40px;
  font-size: 10px;
  font-family: var(--en);
  letter-spacing: .06em;
  opacity: .6;
  text-align: center;
}

/* 白背景セクションに入ったら .is-dark（JSで付与）で黒文字に */
.header.is-dark { color: var(--txt); }
.header.is-dark .logo img { display: none; }
.header.is-dark .logo .logo-b { display: inline; }

/* ---------- 共通パーツ ---------- */
.inner { max-width: 1440px; margin: 0 auto; padding: 0 70px; }
section .en {
  font-family: var(--en);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .7;
}
section h2 {
  font-family: var(--serif);
  font-size: 4.8rem;
  font-weight: 100;
  line-height: 1.6;
  margin: 16px 0 24px;
}
/* SPでのみ効かせる改行 */
.br-sp { display: none; }
.btn {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 12px 40px;
  font-size: 14px;
  transition: opacity .3s;
}
.btn:hover { opacity: .6; }
/* セクション背景の大文字英字（装飾は擬似要素で持つ） */
.service::after,
.company::after,
.news::before,
.contact .panel::before {
  position: absolute;
  font-family: var(--en);
  font-size: 20rem;
  font-weight: bold;
  letter-spacing: .05em;
  pointer-events: none;
  line-height: 1;
}
.service::after {
  content: "SERVICE";
  writing-mode: vertical-rl;
  top: 60px;
  left: -20px;
  color: rgba(14, 26, 38, .05);
  /* 疑似要素は末尾に描画されるため、明示しないとSafariで本文の前面に出る
     （COMPANYと同じ対策。z-indexで背面を確定させる） */
  z-index: 0;
}
.service .inner,
.service .service-wrapper {
  position: relative;
  z-index: 1;
}
.company::after {
  content: "COMPANY";
  z-index: 0;
  bottom: -40px;
  right: -10px;
  color: white;
}
.news::before {
  content: "NEWS";
  top: -40px;
  left: 60px;
  color: var(--gray-bg);
  z-index: 1;
}
.contact .panel::before {
  content: "CONTACT";
  right: -20px;
  bottom: -50px;
  font-size: 220px;
  color: rgba(255, 255, 255, .1);
  z-index: 1;
}

/* ---------- FV ---------- */
.fv {
  position: relative;
  height: 100vh;
  min-height: 640px;
  color: var(--txt-w);
  /* 背景は透過：固定動画がそのまま見える */
}
/* FVも1440に絞らず画面いっぱい・左右120px */
.fv .inner {
  max-width: none;
  padding: 0 2vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.fv .inner::before{
  content: '';
  position: absolute;
  top: 50%;
  right: -100px;
  width: calc(70vw + 120px);
  aspect-ratio: 1301/334;
  background: center/cover url(../img/fv_deco.svg);
}
.fv .catch {
  font-family: var(--serif);
  font-size: 4.8vw;
  line-height: 1.7;
  letter-spacing: .08em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}
.fv .fv-labels {
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: .1em;
  opacity: .9;
}

/* newsティッカー：スクロール開始で粒子状に散って消える（アニメはJS/GSAP側） */
.ticker {
  position: fixed;
  z-index: 90;
  left: 60px;
  bottom: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  /* width未指定だとfixed+flexで中身に合わせて伸縮し、
     記事タイトルの長さでティッカーの横幅が変わってしまうため固定する */
  width: 480px;
  max-width: calc(100vw - 120px);
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 12px;
}
.ticker .mark {
  font-size: 28px;
  flex-shrink: 0;
}
.ticker .body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* .ttlのoverflow検知に必要 */
}
/* タイトル：あふれた場合のみJSが.is-marqueeを付与して流れる */
.ticker .ttl {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}
.ticker .ttl .mq { display: inline-block; }
.ticker .ttl.is-marquee .mq {
  padding-right: 48px;
  animation: ticker-mq 14s linear infinite;
}
@keyframes ticker-mq {
  to { transform: translateX(-100%); }
}
.fv .fv-copy { position: relative; }
/* Text Vaporize用canvas（通常時は透明・アニメ中のみ表示） */
.vaporize-canvas {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
/* 集合演出の対象ブロック（canvasの位置基準にする） */
.about .inner,
.service .head,
.company .head,
.news .side { position: relative; }
.ticker .tag { font-family: var(--en); text-transform: uppercase; letter-spacing: .15em; }

/* ---------- ABOUT ---------- */
.about {
  position: relative;
  /* 完全黒ではなく、上（FV動画に接する側）は透け、下へいくほど黒に近づく */
  background: linear-gradient(
    180deg,
    rgba(11, 17, 24, 0) 0%,
    rgba(11, 17, 24, .4) 65%,
    rgba(11, 17, 24, .6) 100%
  );
  color: var(--txt-w);
  padding: 160px 0 240px;
}
.about::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  background-color: #fff;
}
.about .inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
}
.about .inner::before{
  position: absolute;
  content: '';
  top: 45%;
  left: -80px;
  width: 960px;
  aspect-ratio: 105/48;
  background: center/cover url(../img/about-deco.svg);
}
.about .body p + p { margin-top: 2em; }
.about .btn { margin-top: 48px; }

/* ---------- SERVICE ---------- */
.service {
  position: relative;
  background: #fff;
  padding: 140px 0 160px;
  overflow: hidden;
}
/* 次セクション（company）の上部丸み用キャップ */
.service::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  background-color: var(--gray-bg);
}
/* 英題＋キャッチのブロックと、リード文をflexで横並び */
.service .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  margin-bottom: 50px;
}
/* 幅が足りない時はリード側が縮む（キャッチは折り返させない） */
.service .head .ttl { flex-shrink: 0; }
.service .head .lead {
  flex: 0 1 560px;
  margin-top: 12px;
}
/* カード列：GSAPでpin＋横スライド。listはwrapperより横に長く、xを動かす */
.service .service-wrapper { overflow: hidden; }
.service .cards {
  display: flex;
  gap: 40px;
  width: max-content;
  /* 開始位置＝タイトル左端・終了位置＝リード文右端（.innerの内容領域）に揃える */
  padding-inline: max(70px, calc((100vw - 1440px) / 2 + 70px));
}
.service .cards li {
  position: relative;
  /* 画面の高さから逆算（タイトル帯ぶんを差し引く）。高さに余裕がある環境では1200px上限 */
  width: min(1200px, calc((100vh - 460px) * 1.5));
  width: min(1200px, calc((100svh - 460px) * 1.5));
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--navy);
  color: var(--txt-w);
}
.service .cards figure {
  position: absolute;
  inset: 0;
}
.service .cards figure img { width: 100%; height: 100%; object-fit: cover; }
/* テキスト可読性のためのグラデーション */
.service .cards figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .65) 100%);
}
.service .cards .txt {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 48px 56px;
}
.service .cards h3 {
  font-size: 26px;
  font-weight: 500;
}
.service .cards h3 span {
  font-family: var(--en);
  margin-right: 16px;
  color: #fff;
}
.service .cards p {
  font-size: 14px;
  line-height: 2;
  margin-top: 12px;
  max-width: 100%;
  opacity: .9;
}
/* ---------- 縦長カード版（.is-portrait）：3枚を1300px幅に横並び ----------
   カード幅 = (1300px - gap40px×2) / 3 ≒ 406.67px。
   3枚が表示領域に収まる間は静止し、収まらなくなるとJSがGSAPの横スライドを有効化する */
.service.is-portrait .cards {
  gap: 40px;
  /* 収まる時は中央寄せ。溢れる時はJSが .is-sliding を付けてスライド用の余白に切り替える */
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding-inline: 0;
  justify-content: center;
}
.service.is-portrait .cards li {
  width: calc((1300px - 80px) / 3);
  aspect-ratio: 2 / 3; /* 縦長（横2：縦3） */
  flex-shrink: 0; /* 収まらない時は縮まずスライドに切り替える */
}
.service.is-portrait .cards .txt { padding: 32px; }
.service.is-portrait .cards h3 { font-size: 20px; }
.service.is-portrait .cards p { font-size: 13px; line-height: 1.9; }
/* スライド中（pinで画面が固定される）は、カードが画面内に収まる高さで頭打ちにする
   ＝タイトル帯ぶんを引いた高さから逆算。幅は比率2:3を保って自動で縮む */
@media (min-width: 768px) {
  .service.is-portrait.is-sliding .cards li {
    width: min(calc((1300px - 80px) / 3), calc((100svh - 300px) * 2 / 3));
  }
}
/* 収まらなくなった時：横スライド用のレイアウトへ */
.service.is-portrait.is-sliding .cards {
  width: max-content;
  max-width: none;
  margin: 0;
  justify-content: flex-start;
  padding-inline: max(70px, calc((100vw - 1440px) / 2 + 70px));
}


/* =========================================
   一次ブレイクポイント（〜1440px）
   ========================================= */
/* 表示領域が1200pxのカードを収められない幅では正方形に（高さからの逆算も併用） */
@media (max-width: 1440px) {
  .service:not(.is-portrait) .cards li {
    width: min(700px, calc(100vw - 200px), calc(100vh - 420px));
    width: min(700px, calc(100vw - 200px), calc(100svh - 420px));
    aspect-ratio: 1 / 1;
  }
}

/* 縦の視界が狭い環境（FHD・ラップトップ等）：pin中にタイトル＋カードが収まるよう圧縮 */
@media (max-height: 960px) and (min-width: 768px) {
  .service { padding: 80px 0 90px; }
  .service .head { margin-bottom: 40px; }
  .service .head .ttl h2 { font-size: 30px; }
  .service .head .lead { font-size: 14px; }
}
/* 3:2カードの高さ逆算は広い画面のみ（1440px以下は上の正方形ルールに任せる） */
@media (max-height: 960px) and (min-width: 1441px) {
  .service:not(.is-portrait) .cards li {
    width: min(1200px, calc((100vh - 400px) * 1.5));
    width: min(1200px, calc((100svh - 400px) * 1.5));
  }
}

/* ---------- COMPANY ---------- */
.company {
  position: relative;
  background: var(--gray-bg);
  padding: 140px 0 160px;
  overflow: hidden;
  /* pinの高さ計算の小数px丸めで生じる1px隙間（背後の暗い動画が線状に見える）対策 */
  margin-top: -1px;
}
/* newsの上丸みはnews自身のborder-radiusに変更（キャップ廃止）。
   キャップ方式だとnews側をoverflow:hiddenにする必要があり、
   NEWS装飾がセクション境界をまたげない（見切れる）ため */
.company .inner { position: relative; z-index: 1; }
.company .head { max-width: 720px; margin-bottom: 64px; }
.company .table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.company .table > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  background: #fff;
  border-radius: 12px;
  padding: 32px 40px;
}
.company .table dt {
  font-weight: 500;
  position: relative;
}
/* ラベルと値の間の「｜」区切り */
.company .table dt::after {
  content: "｜";
  position: absolute;
  right: 16px;
  top: 0;
  font-weight: 300;
  opacity: .5;
}
.company .table dt span,
.company .table dd span {
  display: block;
  font-family: var(--en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  opacity: .45;
  margin-top: 2px;
}

/* ---------- NEWS（TOP） ---------- */
.news {
  position: relative;
  background: none;
  padding: 100px 0 100px;
  /* overflow: hiddenは付けない：NEWS装飾が上のセクションへはみ出す設計のため */
}
/* 丸み角の背後に固定動画が透けないよう、グレー（companyと同色）の下敷きを敷く */
.news .news-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: var(--gray-bg);
}
/* 白パネル（上丸み）は擬似要素のレイヤーで持つ */
.news::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 60px 60px 0 0;
}
.news .inner {
  position: relative;
  z-index: 1; /* 白パネル（::after）より上 */
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
}
.news .en { text-transform: none; }
.news .cats { margin: 32px 0 56px; }
.news .cats li + li { margin-top: 16px; }
.news .cats a { font-size: 15px; }
.news .cats a span {
  font-family: var(--en);
  font-size: 11px;
  margin-left: 8px;
  opacity: .5;
}
.news .cats a.is-active { font-weight: 500; text-decoration: underline; text-underline-offset: 6px; }
.news .side .btn {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px 14px 32px;
}
.news .list li + li { border-top: 1px solid rgba(14, 26, 38, .25); }
.news .list a {
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: center;
  gap: 32px;
  padding: 48px 8px;
  transition: opacity .3s;
}
.news .list a:hover { opacity: .6; }
.news .list .mark { font-size: 40px; }
.news .list .meta {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.news .list .meta .sep { opacity: .4; }
.news .list .meta .cat { font-family: var(--en); }
.news .list .ttl { margin-top: 8px; font-size: 15px; font-weight: 500; }
.news .list .arw { font-size: 22px; }
/* SP用に複製した「お知らせ一覧」ボタンはPCでは非表示 */
.news .btn-list-bottom { display: none; }

/* ---------- CONTACT（TOP CTA） ---------- */
.contact {
  position: relative;
  padding: 0 0 140px;
  background: #fff; /* パネルの外は白（動画はパネル内のみ） */
  overflow: hidden;
}
.contact .en { text-transform: none; }
.contact .panel {
  position: relative;
  border-radius: 48px;
  /* clip-pathはfixedの子（.pv）ごと切り抜けるので、
     「スクロール固定の動画がパネル窓から覗く」表現になる */
  clip-path: inset(0 round 48px);
  overflow: hidden;
  color: var(--txt-w);
  padding: 120px;
}
/* パネル内の固定動画（ブラーなし） */
.contact .panel .pv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
}
/* 動画の上の黒がけ */
.contact .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 0;
}
.contact .panel .row {
  position: relative;
  z-index: 1;
}
.contact .panel .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.contact .panel h2 { font-size: 36px; margin: 16px 0 24px; }
.contact .panel .lead {
  font-size: 15px;
  line-height: 2.2;
}
.contact .panel .btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .8);
  padding: 16px 24px 16px 40px;
}

/* ---------- スクロール促進UI／ページトップ（要素はJSが生成） ---------- */
.scroll-ui {
  position: fixed;
  right: 48px;
  bottom: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: default; /* scroll表記時はクリックできないのでカーソルは変えない */
  color: #fff; /* FV・aboutでは白。白背景セクションでは.is-darkで黒に */
  font-family: var(--en);
  font-size: 12px;
  letter-spacing: .15em;
  transition: color .4s;
}
.scroll-ui.is-pagetop { cursor: pointer; }
/* ライン（上）→ テキスト（下）の順 */
.scroll-ui .line {
  position: relative;
  width: 1px;
  height: 80px;
  background: currentColor;
  opacity: .9;
}
/* 直線の上から下へ丸が流れてスクロールを促す */
.scroll-ui .line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: scroll-dot 2s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%   { top: 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: calc(100% - 6px); opacity: 0; }
}
/* page-top時はラインの代わりに三角のarrow */
.scroll-ui .arw {
  display: none;
  font-size: 18px;
}
.scroll-ui.is-pagetop .line { display: none; }
.scroll-ui.is-pagetop .arw { display: block; }
/* テキストはscroll／page topの2枚を重ねて持ち、流砂で入れ替える */
.scroll-ui .txts {
  position: relative;
  width: 16px;
  height: 96px;
}
.scroll-ui .txt {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  white-space: nowrap;
}
/* page top側は初期非表示（表示制御はGSAPの流砂fxが行う。GSAP不在時の重なり防止） */
.scroll-ui .txt-top { opacity: 0; }
.scroll-ui.is-dark { color: var(--txt); }

/* ---------- カテゴリのドロップダウン（SPのみ。PCはリスト表示のまま） ---------- */
.cats-wrap { position: relative; }
.cats-wrap .cats-toggle { display: none; }

/* ---------- footer ---------- */
.footer { background: #fff; padding: 0 0 24px; }
.footer .inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  border-top: 1px solid rgba(14, 26, 38, .2);
  padding-top: 64px;
}
.footer .logo img { width: 150px; }
.footer .info .name { font-size: 14px; margin-top: 12px; }
.footer .addr { font-size: 13px; line-height: 1.8; }
.footer .addr .map { margin-top: 16px; }
.footer .addr .map a { text-decoration: underline; text-underline-offset: 4px; font-family: var(--en); }
.footer .links { margin-left: auto; text-align: right; font-size: 13px; }
.footer .sns { display: flex; gap: 20px; justify-content: flex-end; margin-bottom: 20px; }
.footer .sns ion-icon { font-size: 20px; }
.footer .policy a { text-decoration: underline; text-underline-offset: 4px; }
.footer .copy {
  text-align: center;
  font-size: 11px;
  font-family: var(--en);
  letter-spacing: .08em;
  margin-top: 56px;
  opacity: .6;
}

/* =========================================
   下層ページ共通
   ========================================= */
.page-hero {
  position: relative;
  height: 400px;
  color: var(--txt-w);
  display: flex;
  align-items: flex-end;
  /* 背景は透過：固定動画が見える */
}
.page-hero .ttl {
  font-family: var(--en);
  font-size: min(180px, 13vw);
  font-weight: 400;
  line-height: 1;
  padding: 0 60px;
}
/* hero_title未設定でページタイトル（日本語）が流れ込んだ場合の保険。
   英字前提の180pxのままだと折り返してヘッダーに重なる */
.page-hero .ttl.is-ja {
  font-family: var(--serif);
  font-size: min(56px, 7vw);
  line-height: 1.4;
}
.page-body {
  position: relative;
  background: #fff;
  border-radius: 40px 40px 0 0;
  /* タイトルの下部に白パネルが少し被る設計 */
  margin-top: -30px;
  padding: 100px 0 160px;
}

/* ---------- news一覧：TOPのnewsセクションと同じ作り ---------- */
/* ※.innerはヘッダー/フッターにもあるため、必ず.page-body配下に限定する */
.news-archive .page-body .inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}
.news-archive .side {
  position: sticky;
  top: 140px; /* ヘッダー高に合わせて調整 */
}
.news-archive .side .en { text-transform: none; }
.news-archive .cats { margin: 32px 0 56px; }
.news-archive .cats li + li { margin-top: 16px; }
.news-archive .cats a { font-size: 15px; }
.news-archive .cats a span {
  font-family: var(--en);
  font-size: 11px;
  margin-left: 8px;
  opacity: .5;
}
.news-archive .cats a.is-active { font-weight: 500; text-decoration: underline; text-underline-offset: 6px; }
.news-archive .list li + li { border-top: 1px solid rgba(14, 26, 38, .25); }
.news-archive .list a {
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: center;
  gap: 32px;
  padding: 40px 8px;
  transition: opacity .3s;
}
.news-archive .list a:hover { opacity: .6; }
.news-archive .list .mark { font-size: 40px; }
.news-archive .list .meta {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.news-archive .list .meta .sep { opacity: .4; }
.news-archive .list .meta .cat { font-family: var(--en); }
.news-archive .list .ttl { margin-top: 8px; font-size: 15px; font-weight: 500; }
.news-archive .list .arw { font-size: 22px; }
.news-archive .pager {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 56px;
  font-family: var(--en);
  font-size: 14px;
}
.news-archive .pager a,
.news-archive .pager span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  transition: opacity .3s;
}
.news-archive .pager a:hover { opacity: .6; }
.news-archive .pager .current { background: var(--navy); color: var(--txt-w); }

/* ---------- news記事 ---------- */
.news-single .article {
  max-width: 840px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 64px 72px;
}
.news-single .article .meta { font-size: 13px; display: flex; gap: 16px; opacity: .6; }
.news-single .article h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.7;
  margin: 12px 0 40px;
}
.news-single .article .body p + p { margin-top: 1.8em; }
.news-single .article .body img { border-radius: 8px; margin: 32px 0; }
/* 本文（WordPressエディタ出力）の見出しとリスト。
   リセットで ul{list-style:none} を当てているため、本文内だけ戻す。
   静的HTMLではprivacy/index.htmlのインラインCSSに置いていたものを統合した */
.news-single .article .body h2 { font-size: 20px; margin: 2.5em 0 .5em; }
.news-single .article .body h3 { font-size: 17px; margin: 2em 0 .5em; }
.news-single .article .body ul,
.news-single .article .body ol { padding-left: 1.5em; margin: 1em 0; }
.news-single .article .body ul li { list-style: disc; }
.news-single .article .body ol li { list-style: decimal; }
.privacy-page .date { text-align: right; margin-top: 3em; font-size: 14px; }
.news-single .back { text-align: center; margin-top: 64px; }

/* ---------- contact（入力・確認・完了 共通）：白背景に直置き・ラベル上置き ---------- */
.contact-page .form-wrap {
  max-width: 570px;
  margin: 0 auto;
}
.contact-page .form-wrap .en { text-transform: none; }
.contact-page .page-ttl {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  margin: 8px 0 24px;
}
.contact-page .lead {
  text-align: left;
  font-size: 15px;
  margin-bottom: 56px;
}
.contact-page dl > div { display: block; }
.contact-page dl > div + div { margin-top: 24px; }
.contact-page dt {
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 8px;
}
.contact-page dt .req {
  color: #d3305d; /* 必須は赤アスタリスク */
  margin-left: 4px;
}
.contact-page input[type="text"],
.contact-page input[type="email"],
.contact-page input[type="tel"],
.contact-page select,
.contact-page textarea {
  width: 100%;
  font: inherit;
  border: 1px solid #c6cbd0;
  border-radius: 4px;
  padding: 14px 16px;
  background: #fff;
}
.contact-page select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1a1a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.contact-page textarea { min-height: 240px; resize: vertical; }
.contact-page .notes {
  font-size: 12px;
  opacity: .6;
  margin: 40px 0 8px;
}
.contact-page .notes li { padding-left: 1em; text-indent: -1em; }
.contact-page .notes li::before { content: "・"; }
.contact-page .agree { text-align: center; margin: 32px 0 40px; font-size: 14px; }
.contact-page .agree a {
  color: #3f8fd2;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ---- Confirm Plus（確認画面）のテーブルとボタン ----
   #wpcf7cpcnf はプラグインが生成する確認画面のコンテナ */
.contact-page #wpcf7cpcnf table { width: 100%; }
.contact-page .wpcf7cp-btns {
  margin-top: 48px;
  text-align: center;
}
.contact-page .wpcf7cp-btns button {
  display: inline-block;
  background: none;
  color: var(--txt);
  border: 1px solid rgba(26, 26, 26, .6);
  border-radius: 999px;
  padding: 14px 56px;
  margin: 0; /* プラグイン側の margin-bottom: 20px を打ち消す */
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: opacity .3s;
}
.contact-page .wpcf7cp-btns button:hover { opacity: .6; }
.contact-page .wpcf7cp-btns button + button { margin-left: 16px; }

/* ---- Contact Form 7（WP版のみ使用。静的HTMLには該当要素がないため影響なし）---- */
/* CF7は入力欄を span.wpcf7-form-control-wrap で包むため、dd内だけブロックに戻す */
.contact-page dd .wpcf7-form-control-wrap { display: block; }
.contact-page .wpcf7-not-valid-tip {
  display: block;
  color: #d3305d;
  font-size: 13px;
  margin-top: 8px;
}
.contact-page .wpcf7-response-output {
  margin: 32px 0 0;
  border: 1px solid #d3305d;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 14px;
  text-align: center;
}
.contact-page form.sent .wpcf7-response-output { border-color: #3f8fd2; }
/* 同意チェックはラベル内で1行に収める */
.contact-page .agree .wpcf7-form-control-wrap,
.contact-page .agree .wpcf7-list-item { display: inline; margin: 0; }
/* 確認画面（add confirm）では入力欄が読み取り専用になるので枠を消す */
.contact-page input.wpcf7c-conf,
.contact-page select.wpcf7c-conf,
.contact-page textarea.wpcf7c-conf {
  border-color: transparent;
  background: none;
  padding-left: 0;
}
.contact-page .submit { text-align: center; }
.contact-page .submit .btn + .btn { margin-left: 16px; }
/* ---- reCAPTCHA v3 ----
   バッジの非表示はGoogleが公式に認めている方法（visibility: hidden）。
   条件として、導線内にreCAPTCHAの表記を出す必要があるため
   フォーム下に .recaptcha-note を置いている。消さないこと */
.grecaptcha-badge { visibility: hidden; }
.contact-page .recaptcha-note {
  margin-top: 24px;
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
  opacity: .6;
}
.contact-page .recaptcha-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-page .submit .wpcf7-spinner { display: block; margin: 16px auto 0; }
.contact-page .submit .btn {
  background: none;
  color: var(--txt);
  border: 1px solid rgba(26, 26, 26, .6);
  font: inherit;
  font-size: 15px;
  padding: 14px 56px;
  cursor: pointer;
}

/* ---------- thanks ---------- */
.thanks-page .form-wrap { text-align: center; }
.thanks-page h2 { font-size: 28px; }
/* 紙ヒコーキアニメーション（仮）：本実装はSVGパス＋JSに差し替え予定 */
.thanks-page .plane {
  height: 120px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.thanks-page .plane img {
  width: 64px;
  animation: plane-fly 2.4s ease-in-out both;
}
@keyframes plane-fly {
  0%   { transform: translate(-220px, 60px) rotate(-12deg); opacity: 0; }
  30%  { opacity: 1; }
  60%  { transform: translate(40px, -20px) rotate(6deg); }
  100% { transform: translate(240px, -70px) rotate(10deg); opacity: 0; }
}

/* =========================================
   二次ブレイクポイント（〜1024px）：タブレット帯
   2カラムの縦積み化とヘッダーの圧縮
   ========================================= */
@media (max-width: 1024px) {
  /* ヘッダー：ナビがはみ出さないよう圧縮 */
  .header .inner { padding: 24px 32px; }
  .header .logo img { width: 90px; }
  .header.is-scrolled .logo img { width: 60px; }
  .header .gnav { gap: 20px; }
  .header .gnav ul { gap: 18px; font-size: 12px; }
  .header .btn-contact { padding: 8px 22px; font-size: 12px; }

  /* 2カラム → 縦積み */
  .about .inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .service .head {
    flex-direction: column;
    gap: 24px;
  }
  .service .head .lead {
    flex: none;
    max-width: 640px;
  }
  .news .inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .company .table { grid-template-columns: 1fr; }
  .news-archive .inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .news-archive .side { position: static; }

  /* contactパネル：余白と見出しを画面幅に合わせて調整 */
  .contact .panel { padding: 80px 56px; }
  .contact .panel .row { flex-wrap: wrap; }
  .contact .panel h2 { font-size: 30px; }
}

/* =========================================
   三次ブレイクポイント（〜767px）：SP
   （デザイン未着のため下書きのみ・Figma SP版が来たら本組み）
   ========================================= */
@media (max-width: 767px) {
  body{
    font-size: 1.4rem;
  }
  .inner {
    padding: 0 24px;
  }
  .header .inner {
    padding: 30px 24px 0;
  }
  /* SP：グローバルナビは隠してハンバーガーを表示 */
  .header .gnav ul { display: none; }
  .hamburger { display: block; }
  .header .logo img { width: 80px; }
  .header .gnav { gap: 12px; }
  .header .btn-contact { padding: 10px 24px; font-size: 1.6rem; }
  .header .btn-contact ion-icon { font-size: 2.4rem; color: #aaa; }
  .fv .inner {
    padding: 0 24px;
    align-items: flex-start;  
  }
  .fv .catch {
    font-size: 10.5vw;
    line-height: 1.5;
  }
  .ticker {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
  .service {
    padding: 60px 0px 120px;
  }
  .company {
    padding: 60px 0px;
  }
  .about .inner::before {
    top: 12%;
    left: -1px;
    width: 100vw;
  }

  .about .inner,
  .news .inner,
  .news-archive .inner,
  .company .table,
  .company .table > div {
    grid-template-columns: 1fr;
  }
  .service .head {
    flex-direction: column;
    gap: 24px;
  }
  /* SPも横スライド。カードの作りはPCと同じ（背景画像の上にテキスト）で縦横比だけ変更 */
  .service .cards {
    padding: 0 24px;
    gap: 20px;
  }
  /* SPは縦長版・横長版とも同じカード（縦長）に揃える
     幅＝画面幅 −（左右パディング48px ＋ 次カードの覗き見せ40px）
     ※上の :not(.is-portrait) ルールと詳細度を揃えるため同じ書き方にする */
  .service:not(.is-portrait) .cards li,
  .service.is-portrait .cards li {
    width: calc(100vw - 48px - 40px);
    aspect-ratio: 2 / 3; /* SPは縦長 */
    border-radius: 16px;
  }
  /* SPではスライド状態でもタイトルとツラを揃える（.is-slidingのPC用paddingを打ち消す） */
  .service.is-portrait .cards,
  .service.is-portrait.is-sliding .cards {
    padding-inline: 24px;
  }
  /* テキストが乗る下半分を濃いめにして可読性を確保 */
  .service .cards figure::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, .8) 75%);
  }
  .service .cards .txt {
    padding: 24px;
  }
  .service .cards h3 {
    font-size: 17px;
  }
  .service .cards p {
    font-size: 12px;
    line-height: 1.9;
    max-width: none;
  }
  .company .table > div{
    padding: 24px;
  }
  .contact .panel { padding: 64px 32px; border-radius: 24px; }
  .contact .panel .row { flex-direction: column; align-items: flex-start; }
  .contact .panel h2 { font-size: 24px; }
  .contact .panel::before { font-size: 80px; bottom: -16px; }
  .footer .logo img { width: 120px; }
  .footer .inner { flex-direction: column; gap: 32px; }
  .footer .links { margin-left: 0; text-align: left; }
  .footer .sns { justify-content: flex-start; }
  .news-archive .side { position: static; }
  /* 高さは70vw基準。padding-topは 70vw - ttl1行分(22vw) = 48vw。
     ttlが2行になるページ（Privacy Policy）は下へ伸び、タイトル上端は1行ページと揃う */
  .page-hero {
    height: auto;
    min-height: 70vw;
    padding-top: 48vw;
  }
  .page-hero .ttl {
    font-family: var(--en);
    font-size: 22vw;
    padding: 0 20px;
  }
  .page-hero .ttl.is-ja { font-size: 8vw; }
  .page-body {
    border-radius: 30px 30px 0 0;
    margin-top: -20px;
    padding: 80px 0 80px;
  }
  .service::after,
  .company::after,
  .news::before { font-size: 80px; }
  .scroll-ui { right: 20px; bottom: 0;}
  /* カテゴリ切替：縦に場所を取るリストをドロップダウン化 */
  .cats-wrap .cats-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font: inherit;
    font-size: 14px;
    background: #fff;
    border: 1px solid rgba(14, 26, 38, .25);
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
  }
  .cats-wrap .cats-toggle ion-icon { font-size: 16px; transition: transform .3s; }
  .cats-wrap.is-open .cats-toggle ion-icon { transform: rotate(180deg); }
  .cats-wrap .cats {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
    margin: 0;
    background: #fff;
    border: 1px solid rgba(14, 26, 38, .25);
    border-radius: 8px;
    padding: 4px 16px;
    box-shadow: 0 8px 24px rgba(14, 26, 38, .12);
  }
  .cats-wrap.is-open .cats { display: block; }
  .cats-wrap .cats li + li { margin-top: 0; border-top: 1px solid rgba(14, 26, 38, .08); }
  .cats-wrap .cats a { display: block; padding: 12px 0; }
  /* フォントサイズは可変のまま、行送りで生じる上下の余白（ハーフレディング）を除去。
     これでh2の見た目の高さと要素の高さが一致し、背景が覗く隙間がなくなる */
  .br-sp { display: inline; }
  section h2 {
    font-size: 9vw;
    line-height: 1.4;
    text-box: trim-both cap alphabetic;
    margin: 12px 0 20px;
  }
  .contact .panel { padding: 100px 24px 24px; }
  /* CONTACT装飾：右下起点の縦組み（rotate(180deg)でC＝下、T＝上の並びにする） */
  .contact .panel::before {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    top: auto;
    left: auto;
    right: -20px;
    bottom: -16px;
  }
  .contact .panel .btn { position: static; transform: none; margin-top: 24px; }
  .contact-page dl > div { grid-template-columns: 1fr; gap: 8px; }
  /* 確認画面のボタンは縦積みに（横並びだと375px幅に収まらない） */
  .contact-page .wpcf7cp-btns button { display: block; width: 100%; }
  .contact-page .wpcf7cp-btns button + button { margin: 16px 0 0; }
  .news-single .article,
  .contact-page .form-wrap { padding: 0; }

  /* ---- 本文中のPC向け強制改行はSPでは解除し、自然な折り返しに任せる ----
     見出し（br-spで別制御）・住所・事業概要の列挙・FVキャッチの改行は維持 */
  .about .body p br,
  .service .cards .txt p br,
  .contact .panel .lead br { display: none; }

  /* ---- FV装飾 ---- */
  .fv .inner::before {
    top: 53%;
    right: 0;
    width: calc(100vw + 50px);
  }

  /* ---- セクション装飾の英字：3つとも縦書きで画面左端に ---- */
  .service::after,
  .company::after,
  .news::before {
    font-size: 16rem;
    writing-mode: vertical-rl;
    top: 0;
    bottom: auto;
    left: -30px;
    right: auto;
  }

  /* ---- TOP新着情報：一覧ボタンをリストの下へ ----
     .sideは通常のブロックのまま、ボタンだけJSでリストの後ろへ移動させる */
  .news .inner { display: flex; flex-direction: column; gap: 20px; }
  .news .side { order: 1; }
  .news .list { order: 2; }
  .news .side .btn { display: none; } /* 元の位置のボタンは隠す */
  .news .btn-list-bottom {
    order: 3;
    margin-top: 40px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px 14px 32px;
  }

  /* ---- 新着情報アイテム：アイコン＋テキストを縦積みにし、矢印と横並び ---- */
  .news .list a,
  .news-archive .list a {
    grid-template-columns: 1fr 24px;
    gap: 12px;
    padding: 28px 0;
  }
  .news .list .mark,
  .news-archive .list .mark { grid-column: 1; grid-row: 1; font-size: 32px; }
  .news .list .body,
  .news-archive .list .body { grid-column: 1; grid-row: 2; }
  .news .list .arw,
  .news-archive .list .arw { grid-column: 2; grid-row: 1 / 3; align-self: center; }

  /* ---- ティッカー：スクロールUIと干渉しない幅に ---- */
  .ticker {
    width: calc(100vw - 90px);
    max-width: none;
    right: auto;
    padding: 12px;
  }
  .ticker .body { gap: 0; }
  .ticker .tag { font-size: 1.0rem; }

}