@charset "utf-8";

/* =========================================================
   ARKnets 30th LP - FULL CSS（FINAL / CLEAN + WIDE MESSAGE）
   - destyle.css / common.css の後に「最後に」読み込む
   - WHITE BASE + Footer Blue Accent
   - Header：brand非表示 / 中央ロゴ絶対センター
   - PC：空間ナビ / SP：•••トグル＋“空気”パネル
   - HERO：動画 微差ブリージング / KV エアリーreveal
   - Message：PCはHistoryに揃えて“版面を展開”（横幅短い問題解消）
   - History：現状維持 + SP基準線（rail）と全体パディング統一
   - Fade：blurあり/ゆっくり/SPアップ量小さく（定義は1つに統合）
========================================================= */

/* ---------------------------
   Vars
--------------------------- */
:root{
  /* ink */
  --lp-ink:#111;
  --lp-muted:rgba(17,17,17,.62);
  --lp-faint:rgba(17,17,17,.35);
  --lp-line:rgba(17,17,17,.14);

  /* card */
  --lp-card:#fff;
  --lp-shadow:0 18px 36px rgba(0,0,0,.07);
  --lp-radius:18px;
  --lp-pad:18px;

  /* widths */
  --lp-max:980px;     /* 汎用 */
  --tl-max:1280px;    /* History（rail基準の版面） */

  /* type */
  --lp-serif: tot-shizukardmin-stdn,"Times New Roman","Hiragino Mincho ProN","Yu Mincho",serif;

  /* base bg */
  --bg-page:#ffffff;
  --bg-hero:#ffffff;
  --bg-message:#ffffff;
  --bg-history:#ffffff;

  /* accent */
  --accent-blue:#0f1a2b;
  --bg-footer:var(--accent-blue);

  /* timeline (PC) */
  --tl-col-gap:72px;
  --tl-item-gap:140px;
  --tl-stair-left:-220px;
  --tl-stair-right:-300px;
  --tl-rail-top-pad:10px;

  /* Message wide control */
  --msg-max: var(--tl-max); /* ←Historyと同じ版面感 */
  --msg-text-max: 56em;     /* 文章の行長（広すぎ防止） */
}

/* =========================================================
   Base
========================================================= */
body{
  color:var(--lp-ink);
  background:var(--bg-page);
}

img,svg,video{
  display:block;
  max-width:100%;
  height:auto;
}

.wrapper{ background:var(--bg-page); }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

:focus-visible{
  outline:2px solid rgba(15,26,43,.35);
  outline-offset:4px;
}

.nowrap{ white-space: nowrap; }

/* =========================================================
   Header（FINAL）
========================================================= */
.siteHeader__brand{ display:none !important; }

.siteHeader{
  position:sticky;
  top:0;
  z-index:1000;
  background: rgba(255,255,255,.78);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(12px);
}

.siteHeader__inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:18px var(--lp-pad);
  min-height:72px;
  gap:24px;
}

.siteHeader__center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  pointer-events:auto;
  display:flex;
  align-items:center;
}
.siteHeader__home img{
  display:block;
  max-height:25px;
  opacity:.95;
}

.siteHeader__nav{
  display:flex;
  align-items:center;
  gap:32px;
}

.navLink{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:32px;
  font-size:12px;
  letter-spacing:.14em;
  color:rgba(17,17,17,.58);
  padding:0;
  transition:
    color .25s ease,
    transform .35s cubic-bezier(.22,.61,.36,1);
}
.navLink.is-active{ color:rgba(17,17,17,.86); }

.navLink::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height:1px;
  background:currentColor;
  opacity:0;
  transform:scaleX(.6);
  transition:
    opacity .25s ease,
    transform .35s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){
  .navLink:hover{
    color:rgba(17,17,17,.88);
    transform:translateY(-1px);
  }
  .navLink:hover::after{
    opacity:.35;
    transform:scaleX(1);
  }
}
.navLink--accent{ color:rgba(15,26,43,.76); }
@media (hover:hover){
  .navLink--accent:hover{ color:rgba(15,26,43,1); }
}

/* ---- SP：••• トグル ---- */
.siteHeader__toggle{
  display:none;
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  padding:0;
  border-radius:999px;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.siteHeader__toggle:focus-visible{
  outline:2px solid rgba(15,26,43,.18);
  outline-offset:4px;
}
.siteHeader__toggle .dot{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:999px;
  background:rgba(17,17,17,.72);
  transition: opacity .35s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.siteHeader__toggle .dot:nth-child(1){ transform:translateX(-6px); }
.siteHeader__toggle .dot:nth-child(2){ transform:translateX(0); }
.siteHeader__toggle .dot:nth-child(3){ transform:translateX(6px); }
.siteHeader__toggle.is-open .dot{ opacity:.22; }

.siteHeader__toggle::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:rgba(0,0,0,.04);
  opacity:0;
  transform:scale(.94);
  transition: opacity .25s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.siteHeader__toggle:active::after{
  opacity:1;
  transform:scale(1);
}

/* =========================================================
   HERO（動画背景 + ロゴ中央）
========================================================= */
.hero{
  position:relative;
  height:clamp(560px, 89vh, 1100px);
  overflow:hidden;
  background:var(--bg-hero);
  isolation:isolate;
}
.hero__videoWrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero__video{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.50;
  transform:scale(1.02);
  filter:
    saturate(.92)
    contrast(.98)
    brightness(1.00)
    hue-rotate(-2deg);
  will-change: filter, transform;
  animation: heroBreathe 9.5s ease-in-out infinite;
}
@keyframes heroBreathe{
  0%,100%{ filter:saturate(.92) contrast(.98) brightness(1.00) hue-rotate(-2deg); }
  50%{ filter:saturate(.94) contrast(.98) brightness(1.00) hue-rotate(-2deg); }
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(1000px 520px at 50% 40%,
      rgba(255,255,255,.10),
      rgba(255,255,255,0) 65%),
    linear-gradient(to bottom,
      rgba(245,248,255,.16),
      rgba(245,248,255,0) 55%);
  opacity:.55;
}
.hero__inner{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  pointer-events:none;
  padding:0 var(--lp-pad);
}
.hero__kv{
  position:relative;
  margin:0;
  width:min(980px, 92vw);
  opacity:0;
  transform:translate3d(0,8px,0);
  transition:
    opacity 1.4s cubic-bezier(.22,.61,.36,1),
    transform 1.6s cubic-bezier(.16,1,.3,1),
    filter 1.6s cubic-bezier(.22,.61,.36,1);
  filter:
    blur(6px)
    brightness(1.05)
    drop-shadow(0 18px 40px rgba(0,0,0,.12));
}
.hero__kv.is-show{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:
    blur(0)
    brightness(1)
    drop-shadow(0 26px 70px rgba(0,0,0,.14));
}
.hero__kv::after{
  content:"";
  position:absolute;
  inset:-8%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(420px 180px at 50% 45%,
      rgba(255,255,255,.45),
      rgba(255,255,255,.18) 45%,
      rgba(255,255,255,0) 70%);
  opacity:0;
  transition:opacity 1.6s cubic-bezier(.22,.61,.36,1);
}
.hero__kv.is-show::after{ opacity:.85; }
.hero__kv img{ display:block; margin:0 auto; }
/* =========================================================
   HERO KV：サイズ最適化
   - ノート(1024〜1439)：大きすぎ抑制
   - それ以上(1440〜)：従来の“余白ある大きさ”
========================================================= */

/* ノートPC帯：抑える */
@media (min-width:1024px) and (max-width:1439px){
  .hero__kv{
    width:min(980px, 62vw);
  }
}

/* 大きい画面：少し大きめに戻す（元の設計意図） */
@media (min-width:1440px){
  .hero__kv{
    width:min(1220px, 76vw);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero__video{ animation:none; }
  .hero__kv{ opacity:1; transform:none; filter:none; transition:none; }
}

/* =========================================================
   Section common（縦リズム：300pxは使わない）
========================================================= */
.sec{
  padding: clamp(72px, 9vw, 120px) var(--lp-pad);
  background:var(--bg-page);
}
@media (min-width:768px){
  .sec{
    padding: clamp(120px, 10vw, 180px) var(--lp-pad);
  }
}
@media (min-width:1200px){
  .sec{
    padding: clamp(140px, 9vw, 200px) var(--lp-pad);
  }
}

.sec--message{
  position:relative;
  z-index:2;
  isolation:isolate;
  background:var(--bg-message);
  overflow:hidden;
}
.sec--history{
  position:relative;
  z-index:1;
  isolation:isolate;
  background:
    radial-gradient(1100px 420px at 50% 0%,
      rgba(0,0,0,.02),
      rgba(0,0,0,0) 62%),
    var(--bg-history);
  margin-top:-1px;
}

/* Message→History 境界 */
.sec--message::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-1px;
  height: clamp(240px, 32vw, 420px);
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 240px at 50% 5%,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 35%,
      rgba(255,255,255,.92) 62%,
      rgba(255,255,255,1) 100%),
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.70) 40%,
      rgba(255,255,255,1) 100%);
}

.sec--message > *,
.sec--history > *{
  position:relative;
  z-index:1;
}

/* head */
.sec__head{
  text-align:center;
  max-width:760px;
  margin:0 auto clamp(28px, 4vw, 56px);
}

.sec__title{
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.sec__title img{
  width:auto;
  height:auto;
  /* 下品じゃない範囲で大きく（PC/SPとも） */
  max-width: clamp(320px, 32vw, 420px);
  opacity:.95;
}
@media (max-width:767px){
  .sec__title img{
    max-width: clamp(280px, 78vw, 340px);
    opacity:.92;
  }
}

/* lead */
.lead{
  margin: 12px 0 clamp(22px, 3vw, 40px);
  text-align:center;
  font-family:var(--lp-serif);
  font-size:28px;
  letter-spacing:.08em;
  line-height:1.6;
  color:rgba(0,0,0,.56);
}
@media (min-width:768px){
  .lead{ font-size:34px; }
}


.lead__foot{
  margin:clamp(44px, 6vw, 80px) 0;
}

/* body */
.sec__body{
  max-width:var(--lp-max);
  margin:0 auto;
}

/* text base */
.text{
  max-width:760px;
  margin:0 auto;
  font-size:16px;
  line-height:2.15;
  color:rgba(0,0,0,.62);
}
.text p{
  margin:0 0 16px;
  text-align:center;
  font-family:var(--lp-serif);
}

/* =========================================================
   Message layout（PC：Historyと同じくらい“展開”）
   - 外枠は tl-max に合わせて広げる
   - 文章行長は msg-text-max で上品に制御
========================================================= */
@media (min-width:768px){
  .sec--message .sec__body{
    max-width: var(--msg-max);   /* ←ここが“横幅短い”解決 */
  }
  .sec--message .text{
    max-width: var(--msg-text-max);
    margin: 0 auto;
    text-align: center;

    /* 日本語折返しを上品に（括弧が割れやすい対策） */
    line-break: strict;
    overflow-wrap: normal;
    word-break: normal;

    /* 強すぎる字間で改行が暴れるのを抑える */
    letter-spacing: .02em;
  }
  .sec--message .text p{
    line-height: 2.1;
    letter-spacing: .02em;
  }
}

/* Message：中央背景（任意） */
.sec--message::before{
  content:"";
  position:absolute;
  left:50%;
  top:56%;
  transform:translate(-50%,-50%);
  width:min(820px, 92vw);
  height:520px;
  background:url("../../dist/img/logo-bk.png") no-repeat center / contain;
  opacity:.06;
  pointer-events:none;
  z-index:0;
}
@media (max-width:767px){
  .sec--message::before{
    top:58%;
    height:460px;
    opacity:.035;
  }
  .sec--message::after{
    height: 220px;
    opacity:.85;
  }
}

/* VIEW MORE 無効 */
.sec__cta,
.btnViewMore{ display:none !important; }

/* =========================================================
   TIMELINE
========================================================= */
.timeline{
  position:relative;
  max-width:var(--tl-max);
  margin:0 auto;
  padding:calc(24px + var(--tl-rail-top-pad)) 0 10px;
}

.timeline__rail{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  background: rgba(17,17,17,.18);
  transform:translateX(-50%);
}
@media (min-width:768px){
  .timeline__rail{
    box-shadow:0 0 0 0.5px rgba(17,17,17,.10);
  }
}

.titem{
  position:relative;
  margin:0 auto var(--tl-item-gap);
  padding:0 var(--lp-pad);
  opacity:0;
  transition: opacity .65s ease;
}

.titem__dot{
  position:absolute;
  left:50%;
  top:18px;
  width:7px;
  height:7px;
  background: rgba(17,17,17,.86);
  border-radius:999px;
  opacity:.35;
  transform: translateX(-50%) scale(.85);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  isolation:isolate;
}

.titem__year{
  margin:0 0 6px;
  font-family:var(--lp-serif);
  font-size:28px;
  letter-spacing:.01em;
  color:rgba(0,0,0,.82);
}
.titem__cap{
  margin:0 0 16px;
  font-size:12px;
  line-height:1.85;
  letter-spacing:.06em;
  color:rgba(0,0,0,.52);
}

.tcard{
  background:var(--lp-card);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  overflow:hidden;
  outline:1px solid rgba(0,0,0,.04);
  outline-offset:-1px;
}
.tcard--img img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  filter:contrast(1.02) saturate(.98);
}

/* inview motion（tcardだけ動かす） */
.titem .tcard{
  transform:translateY(18px);
  filter:blur(6px);
  transition:
    transform .75s cubic-bezier(.2,.8,.2,1),
    filter .75s ease;
  will-change:transform, filter;
}
.titem.is-inview{ opacity:1; }
.titem.is-inview .tcard{
  transform:translateY(0);
  filter:blur(0);
}
.titem.is-inview .titem__dot{
  opacity:1;
  transform: translateX(-50%) scale(1);
}

/* dot ripple */
.titem__dot::before,
.titem__dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:999px;
  transform:translate(-50%,-50%) scale(.2);
  pointer-events:none;
  opacity:0;
  z-index:-1;
}
.titem__dot::before{ border:1px solid rgba(17,17,17,.35); }
.titem__dot::after{ border:1px solid rgba(17,17,17,.18); }

.titem.is-inview .titem__dot::before{
  animation: dotRipple 900ms cubic-bezier(.16,1,.3,1) 1 both;
}
.titem.is-inview .titem__dot::after{
  animation: dotRipple 1100ms cubic-bezier(.16,1,.3,1) 1 both;
  animation-delay:140ms;
}
@keyframes dotRipple{
  0%{ transform:translate(-50%,-50%) scale(.25); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(3.6); opacity:0; }
}
.titem.is-inview .titem__dot{
  animation: dotPop 520ms cubic-bezier(.16,1,.3,1) 1 both;
}
@keyframes dotPop{
  0%{ transform:translateX(-50%) scale(.92); }
  60%{ transform:translateX(-50%) scale(1.08); }
  100%{ transform:translateX(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .titem.is-inview .titem__dot,
  .titem.is-inview .titem__dot::before,
  .titem.is-inview .titem__dot::after{ animation:none !important; }
  .titem, .titem .tcard{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ---- PC：2カラム交互 + 段々 ---- */
@media (min-width:768px){
  .titem{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:var(--tl-col-gap);
    align-items:start;
    margin-bottom:var(--tl-item-gap);
  }

  .titem--left  .titem__year,
  .titem--left  .titem__cap,
  .titem--left  .tcard{ grid-column:1; }

  .titem--right .titem__year,
  .titem--right .titem__cap,
  .titem--right .tcard{ grid-column:2; }

  .titem + .titem{ margin-top:var(--tl-stair-left); }
  .titem.titem--right + .titem{ margin-top:var(--tl-stair-right); }

  .titem--left  .tcard{ width:min(560px, 100%); margin-left:auto; }
  .titem--right .tcard{ width:min(640px, 100%); margin-right:auto; }

  .titem--left .titem__year,
  .titem--left .titem__cap{ text-align:left; }
  .titem--right .titem__year,
  .titem--right .titem__cap{ text-align:left; }

  .timeline .titem:last-child{ margin-bottom:0; }
}

@media (min-width:1024px){
  .timeline{ max-width:1560px; }
  .titem{ column-gap:112px; }
  .tcard{ box-shadow:0 24px 56px rgba(0,0,0,.07); }
}

@media (min-width:1200px){
  :root{
    --tl-col-gap:86px;
    --tl-item-gap:160px;
    --tl-stair-left:-240px;
    --tl-stair-right:-240px;
  }
  .titem__year{ font-size:30px; }
}
@media (min-width:1360px){
  .timeline{ max-width:1520px; }
  .titem{ column-gap:104px; }
  .titem__year{ font-size:48px; }
}

/* 1枚目だけ気持ち早く（0.1s） */
.sec--history .timeline .titem:first-of-type{
  transition-delay:0s !important;
}
.sec--history .timeline .titem:first-of-type .tcard{
  transition-delay:0s !important;
}
@media (min-width:768px){
  .sec--history .timeline .titem:not(:first-of-type){ transition-delay:.10s; }
  .sec--history .timeline .titem:not(:first-of-type) .tcard{ transition-delay:.10s; }
}

/* =========================================================
   Fade (統合：Blurあり / ゆっくり / SPアップ量小さく)
========================================================= */
.js-fade{
  opacity:0;
  filter: blur(6px);
  transform: translate3d(0, 10px, 0);
  transition:
    opacity .95s ease,
    filter 1.05s ease,
    transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform, filter;
}
.js-fade.is-show{
  opacity:1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}
@media (max-width:767px){
  .js-fade{
    filter: blur(5px);
    transform: translate3d(0, 4px, 0);
    transition:
      opacity .85s ease,
      filter .95s ease,
      transform 1.05s cubic-bezier(.22,.61,.36,1);
  }
}

/* 差別化：見出しは“ほぼ動かさない” */
.sec__head.js-fade{
  transform: translate3d(0, 6px, 0);
}
@media (max-width:767px){
  .sec__head.js-fade{
    transform: translate3d(0, 2px, 0);
  }
}

/* =========================================================
   Image Link Icon（丸矢印：最終版）
========================================================= */
.tcard__linkIcon,
.tcard__linkicon{ display:none !important; }

.tcard__link{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--lp-radius);
  cursor:pointer;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.tcard__link img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transform:scale(1);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  backface-visibility:hidden;
  filter:contrast(1.02) saturate(.98);
}
@media (hover:hover){
  .tcard__link:hover img{ transform:scale(1.04); }
}

.tcard__link::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:14px;
  width:38px;
  height:38px;
  border-radius:999px;
  z-index:10;
  pointer-events:none;

  -webkit-mask:none !important;
          mask:none !important;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12M12 6l6 6-6 6' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat 50% 50% / 16px 16px,
    rgba(255,255,255,.78);

  box-shadow:0 10px 26px rgba(0,0,0,.16);
  backdrop-filter:blur(6px);

  opacity:.78;
  transform:translate3d(0,2px,0);
  transition:
    opacity .28s cubic-bezier(.22,.61,.36,1),
    transform .45s cubic-bezier(.22,.61,.36,1),
    background .28s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){
  .tcard__link:hover::after{
    opacity:1;
    transform:translate3d(0,-2px,0);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12M12 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat 50% 50% / 16px 16px,
      rgba(15,26,43,.92);
  }
}
@media (max-width:767px){
  .tcard__link::after{
    opacity:.95;
    transform:none;
  }
}

/* =========================================================
   Footer（アクセント：青）
========================================================= */
.siteFooter--dark{
  background:var(--bg-footer);
  padding:32px var(--lp-pad);
  text-align:center;
}
.siteFooter__logo{
  width:116px;
  margin:0 auto 12px;
  opacity:.95;
}
.siteFooter__copy{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.72);
}
.siteFooter--dark a{ color:rgba(255,255,255,.86); }
.siteFooter--dark a:hover{ color:#fff; }

/* =========================================================
   SP SYSTEM（最低限だけ残す：重複させない）
========================================================= */
@media (max-width:767px){
  :root{
    --sp-pad: 18px;
    --sp-rail-x: calc(var(--sp-pad) + 6px);
    --sp-text-x: calc(var(--sp-rail-x) + 28px);
  }

  .siteHeader__inner{
    padding:14px var(--sp-pad);
    min-height:60px;
  }
  .hero__inner{
    padding-left:var(--sp-pad);
    padding-right:var(--sp-pad);
  }
  .siteFooter--dark{
    padding-left:var(--sp-pad);
    padding-right:var(--sp-pad);
  }

  .siteHeader__toggle{
    display:grid;
    place-items:center;
  }
  .siteHeader__home img{
    max-height:18px;
    opacity:.88;
  }

  /* SP nav panel */
  .siteHeader__nav{
    position:absolute;
    right: var(--sp-pad);
    top: calc(100% + 12px);
    display:block;
    min-width:210px;
    padding:14px 16px;
    border-radius:16px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow:
      0 34px 90px rgba(0,0,0,.10),
      0 2px 0 rgba(255,255,255,.55) inset;
    backdrop-filter: blur(14px);
    opacity:0;
    transform: translate3d(0,-6px,0) scale(.995);
    filter: blur(6px);
    pointer-events:none;
    transform-origin: 100% 0%;
    transition:
      opacity .32s ease,
      transform .62s cubic-bezier(.16,1,.3,1),
      filter .58s cubic-bezier(.22,.61,.36,1);
    gap:0;
  }
  .siteHeader__nav.is-open{
    opacity:1;
    transform: translate3d(0,0,0) scale(1);
    filter: blur(0);
    pointer-events:auto;
  }

  .siteHeader__nav .navLink{
    display:block;
    height:auto;
    padding:12px 6px;
    font-size:12px;
    letter-spacing:.14em;
    color: rgba(17,17,17,.70);
    border-radius:10px;
    opacity:.01;
    transform: translate3d(0,2px,0);
    transition:
      opacity .42s ease,
      transform .62s cubic-bezier(.16,1,.3,1),
      color .25s ease,
      background .25s ease;
  }
  .siteHeader__nav.is-open .navLink{
    opacity:1;
    transform: translate3d(0,0,0);
  }
  .siteHeader__nav .navLink + .navLink{
    border-top:1px solid rgba(0,0,0,.05);
  }
  .siteHeader__nav .navLink::after{ display:none; }
  .navLink--accent{ display:none; }

  /* SP History rail */
  .timeline{ padding-top:18px; }
  .timeline__rail{
    left: var(--sp-rail-x);
    transform:none;
  }
  .titem__dot{
    left: var(--sp-rail-x);
    transform:none;
  }
  .titem{
    padding-left: var(--sp-text-x);
    padding-right: 0;
    margin-bottom:52px;
  }
  .titem__year{ font-size:24px; }
  .titem + .titem{ margin-top:0 !important; }

  /* SP Message（左右対称で上品に） */
  .sec--message .sec__body{
    max-width: 36em;
    margin: 0 auto;
    padding-left: var(--sp-pad) !important;
    padding-right: var(--sp-pad) !important;
    text-align: left;
  }
  .sec--message .lead{
    max-width: 17.5em;
    margin: 6px auto 18px;
    text-align: center;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: .05em;
    color: rgba(0,0,0,.50);
  }
  .sec--message .lead::before{
    content:"";
    position:absolute;
    left:-10px; right:-10px;
    top:-6px; bottom:-6px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    z-index:-1;
    opacity:.90;
  }
  .sec--message .text{
    max-width: 31.5em;
    margin: 0 auto;
    padding-left: 0;
    font-size: 15px;
    line-height: 2.08;
    letter-spacing: .02em;
  }
  .sec--message .text p{
    text-align: left;
    margin: 0 0 16px;
  }
  .sec--message .text p:last-child{ margin-bottom:0; }
}


/* =========================================================
   HERO KV ロゴ：ノートPC帯だけ大きさを抑える
   - 1024〜1439px で 76vw を緩める
========================================================= */
@media (min-width:1024px) and (max-width:1439px){
  .hero__kv{
    width:min(980px, 62vw);   /* ←ここで“デカすぎ”解消 */
  }
}

@media (min-width:1024px){
  .hero__kv{
    width:min(1080px, 70vw);  /* 1220/76vw → 1080/70vw に */
  }
}
/* =========================================================
   HERO：全媒体でKVが“縦で切れない”共通設計（少し大きめ維持）
========================================================= */

/* 1) ヒーローに上下の安全余白（切れの根本対策） */
.hero{
  /* 既存の height は活かしつつ、低い画面での余白を担保 */
  padding-block: clamp(10px, 3svh, 44px);
}

/* 中央配置レイヤーも安全余白を持つ（header分も吸収しやすい） */
.hero__inner{
  padding-inline: var(--lp-pad);
  padding-block: clamp(14px, 3.5svh, 56px);
}

/* 2) “横は大きめ”はそのまま。縦は img の max-height で抑える */
.hero__kv{
  width: min(1180px, 86vw);   /* 少し大きめ */
  max-width: 86vw;
}

/* ★ここが最重要：縦の上限を svh で管理（ノートPC/ブラウザUIでも安定） */
.hero__kv img{
  width: 100%;
  height: auto;
  max-height: min(58svh, 640px);
}

/* 3) 外周の“にじみ”だけが切れるのを抑える（内側寄せ） */
.hero__kv::after{
  inset: -5%;                 /* 元:-8% → 内側へ */
}
.hero__kv{
  filter: blur(6px) brightness(1.05) drop-shadow(0 12px 30px rgba(0,0,0,.12));
}
.hero__kv.is-show{
  filter: blur(0) brightness(1) drop-shadow(0 18px 48px rgba(0,0,0,.14));
}

/* 4) “縦が低いノート”専用の保険（高さだけ更に安全に） */
@media (max-height: 760px){
  .hero__kv img{
    max-height: min(52svh, 560px);
  }
}

/* 5) SPは今まで通り少し大きめだが、縦は安全に */
@media (max-width: 767px){
  .hero__kv{ width: min(92vw, 520px); }
  .hero__kv img{ max-height: min(46svh, 440px); }
}


/* =========================================================
   HERO KV：全媒体で「切れない・潰れない・少し大きめ」
========================================================= */

/* ヒーロー自体に上下の安全域（切れ防止） */
.hero{
  overflow:hidden; /* これはOK */
  padding-block: clamp(16px, 4svh, 56px);
  height: clamp(560px, 92svh, 1100px); /* 89vh→92svhで安定 */
}

/* 中央配置レイヤーも上下に余白を持つ */
.hero__inner{
  padding-block: clamp(18px, 4svh, 64px);
}

/* コンテナ幅で潰さない：KV箱は幅固定しない */
.hero__kv{
  width:auto !important;
  max-width:none !important;
}

/* 画像そのものを “幅基準” で大きめに。縦はゆるめの上限。 */
.hero__kv img{
  display:block;
  margin:0 auto;

  width: min(1200px, 88vw);     /* ←少し大きめ */
  height:auto;

  max-height: min(72svh, 760px); /* ←潰れを解消（上限を上げる） */
}

/* ノートPCなど縦が低い時だけ少し抑える（でも潰さない） */
@media (max-height: 760px){
  .hero__kv img{
    width: min(1120px, 86vw);
    max-height: min(66svh, 660px);
  }
}

/* SPは従来通り大きめ＆安全に */
@media (max-width: 767px){
  .hero__kv img{
    width: min(92vw, 560px);
    max-height: min(56svh, 520px);
  }
}

/* にじみが切れやすい場合の内側寄せ（任意） */
.hero__kv::after{ inset:-6%; }


/* =========================================================
   HERO KV：潰れ（縦横比崩れ）を強制的に止める
========================================================= */
.hero__kv,
.hero__kv *{
  transform: none; /* 念のため（親側scaleがあると潰れて見える） */
}

.hero__kv img{
  width: min(1200px, 88vw) !important;
  height: auto !important;        /* ←縦を固定させない */
  max-height: min(72svh, 760px) !important;

  aspect-ratio: auto !important;  /* ←比率強制（変な上書き対策） */
  object-fit: contain !important; /* ←もしheightが当たっても崩れない */
  display:block;
  margin:0 auto;
}

/* ノートPCの低い縦だけ少し抑える（比率は崩れない） */
@media (max-height: 760px){
  .hero__kv img{
    width: min(1120px, 86vw) !important;
    max-height: min(66svh, 660px) !important;
  }
}


/* History 見出し：PCは大きく / SPは少し控えめ */
.sec--history .sec__title img{
  max-width: clamp(360px, 42vw, 520px);
}

@media (max-width:767px){
  .sec--history .sec__title img{
    max-width: clamp(260px, 78vw, 320px);
  }
}