/* ============================================================
   アイシー55周年サイト 共通カスタムCSS
   （Tailwind Play CDN で表現しづらい部分をここに集約）
   ============================================================ */

html {
  scroll-behavior: smooth;
}

/* ------------------------------------------------------------
   全体フレーム：
   - 2xl（96rem）までは幅いっぱい／それ以上は96remで固定
   - lg（64rem）以上で2カラム（左カラム幅は可変）
   ------------------------------------------------------------ */
.site-frame {
  max-width: 96rem; /* 2xl */
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}

/* PC：スクロール誘導をビューポート右端ではなく 2xl（96rem）枠内の右下に配置 */
@media (min-width: 1024px) {
  #scroll-cue {
    right: max(2.5rem, calc((100vw - 96rem) / 2 + 2.5rem));
  }
}

.site-main {
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
}

/* 左固定エリア（lg以上で表示・幅は可変） */
.site-aside {
  display: none;
}

@media (min-width: 1024px) {
  .site-aside {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    width: clamp(240px, 23.4vw, 360px); /* 1280pxのとき約300px */
    height: 100vh;
    flex-shrink: 0;
    padding: 56px 20px 40px; /* ロゴはカラム幅いっぱい／下要素は左右マージンで一段狭く */
    overflow-y: auto;
  }

  .site-aside__logo {
    display: block;
    width: 100%;
  }
  .site-aside__logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ロゴ直下の要素：左右20pxでロゴより少し狭く見せる */
  .site-aside__body {
    margin-inline: 20px;
  }

  /* サイト内メニュー：折り返し時に行間が広がりすぎないよう狭めに */
  .site-aside__nav a {
    font-size: 20px;
    line-height: 1.15;
  }
}

/* xl以上：X方向パディングを広げ、ロゴが大きくなりすぎないよう調整 */
@media (min-width: 1280px) {
  .site-aside {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* 2xl以上：メニュー文字を少し大きく */
@media (min-width: 1536px) {
  .site-aside__nav a {
    font-size: 22px;
  }
}

/* ------------------------------------------------------------
   網点（スクリーントーン）モチーフ
   ※ドットは互い違い（千鳥）配置。radial-gradient 2枚を半ピッチずらして重ねる
   ------------------------------------------------------------ */

/* 黒枠ボックス＋網点の落ち影 */
.tone-box {
  position: relative;
  background: var(--color-paper, #FDF5E7);
  border: 2px solid var(--color-ink, #000);
}
.tone-box::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(18px, 18px);
  background-image:
    radial-gradient(circle, #000000 1.2px, transparent 1.3px),
    radial-gradient(circle, #000000 1.2px, transparent 1.3px);
  background-size: 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
  z-index: -1;
  pointer-events: none;
}

/* 出現時はボックス本体を先に表示し、網点影は後から追いかけて表示する。
   フェード中（opacity < 1）はボックス自身がスタッキングコンテキストとなり
   網点がボックス内部に描画されてしまうため、
   ボックスのフェード（0.7s）が完全に終わってから網点を表示する */
.tone-box.reveal::before {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.75s;
}
.tone-box.reveal.is-visible::before {
  opacity: 1;
}
html:not(.js) .tone-box.reveal::before {
  opacity: 1;
}

/* 「詳しく見る」ボタン（網点影＋ホバーで影に沈む）
   ※hover時にtransformを使うとスタッキングコンテキストが発生し
     網点がボタン背景の上に描画されてしまうため、top/leftで動かす */
.btn-more {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  background-color: var(--color-paper, #FDF5E7);
  border: 2px solid var(--color-ink, #000);
  padding: 10px 42px;
  font-weight: 700;
  letter-spacing: 0.15em;
  transition: top 0.25s ease-out, left 0.25s ease-out,
              background-color 0.25s ease-out, color 0.25s ease-out;
}
.btn-more::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(12px, 12px);
  background-image:
    radial-gradient(circle, #000000 1.2px, transparent 1.3px),
    radial-gradient(circle, #000000 1.2px, transparent 1.3px);
  background-size: 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
  z-index: -1;
  pointer-events: none;
  transition: transform 0.25s ease-out;
}
.btn-more:hover {
  top: 5px;
  left: 5px;
  background-color: var(--color-sky, #4CACD6);
  color: var(--color-cream, #F8ECD6);
}
.btn-more:hover::before {
  transform: translate(7px, 7px); /* ボタンの移動と相殺し、影は動かさない */
}

/* 網点の飾り罫（フッター上などのアクセント） */
.dot-rule {
  height: 18px;
  background-image:
    radial-gradient(circle, #000000 1.2px, transparent 1.3px),
    radial-gradient(circle, #000000 1.2px, transparent 1.3px);
  background-size: 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

/* 網点の飾りブロック（見出し脇などのアクセント） */
.tone-accent {
  background-image:
    radial-gradient(circle, #000000 1.2px, transparent 1.3px),
    radial-gradient(circle, #000000 1.2px, transparent 1.3px);
  background-size: 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
  transform: skewY(-12deg);
  pointer-events: none;
}

/* ------------------------------------------------------------
   波型オーバーレイ（wave.svg ＋ #F8ECD6 80%）
   ------------------------------------------------------------ */
.wave-top {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.8;
  margin-bottom: -1px; /* 波と背景層のつなぎ目対策 */
  pointer-events: none;
}

.cream-layer {
  background-color: rgb(248 236 214 / 0.8);
  /* 自身をスタッキングコンテキストにすることで、
     負のz-indexの網点影（.tone-box::before等）が
     この背景色の「上」・ボックスの「下」に描画される */
  isolation: isolate;
}

/* ------------------------------------------------------------
   キービジュアル固定（sticky）＋コンテンツが上に乗る（全ページ共通）
   ------------------------------------------------------------ */
.kv-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 1;
  overflow: hidden;
}
.kv-pin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

/* キービジュアル画像の保存抑制（右クリック／長押し） */
.protected-img {
  -webkit-touch-callout: none; /* iOS: 長押しメニュー抑制 */
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none; /* iOS/Android共通: 画像を掴めなくする */
}
.kv-protect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 下層ページのKVはクリーム色を薄く重ねてゴースト調にする */
.kv-sub::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(248 236 214 / 0.5);
  pointer-events: none;
}

/* KVの上をスクロールしていくコンテンツ層 */
.scroll-content {
  position: relative;
  z-index: 10;
  margin-top: -14svh; /* TOP：初期表示で波が下端に少し覗く */
}

/* 下層ページ：最初からコンテンツがKVに重なった状態で始まる */
.scroll-content.sub {
  margin-top: -100vh;
  margin-top: -100svh;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.scroll-content.sub .cream-layer {
  flex: 1 0 auto; /* コンテンツが短くても背景層で画面下端まで覆う */
}

/* ------------------------------------------------------------
   SP TOP：固定されたロゴ＋キャッチの上をKVが乗り上がる
   ------------------------------------------------------------ */
.sp-hero-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.sp-hero-ghost {
  visibility: hidden; /* 高さ確保用の複製 */
}
@media (min-width: 1024px) {
  .sp-hero-wrap {
    display: none;
  }
}

/* ------------------------------------------------------------
   SP：上部固定ピル型メニュー
   ------------------------------------------------------------ */
.pill-nav {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 60;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 1024px) {
  .pill-nav {
    display: none;
  }
}
.pill-nav.pill-hidden {
  transform: translateY(-140%);
  opacity: 0;
  pointer-events: none;
}

.pill-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid var(--color-ink, #000);
  border-radius: 9999px;
  background: var(--color-cream, #F8ECD6);
  padding: 10px 22px 10px 18px;
}

.pill-panel {
  position: absolute;
  top: 30px;
  right: 0;
  width: min(320px, 88%);
  border-radius: 0 0 28px 28px;
  padding: 52px 32px 30px;
  z-index: 1;
  display: none;
}
/* パネルは自身がスタッキングコンテキストになるため、
   背景と網点影はともに負のz-indexの擬似要素で重ね順を制御する */
.pill-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-tan, #DCC7A0);
  z-index: -1;
  pointer-events: none;
}
/* 開時パネルの背面に網点をドロップシャドウ風に */
.pill-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(12px, 12px);
  border-radius: inherit;
  background-image:
    radial-gradient(circle, #000000 1.2px, transparent 1.3px),
    radial-gradient(circle, #000000 1.2px, transparent 1.3px);
  background-size: 9px 9px;
  background-position: 0 0, 4.5px 4.5px;
  z-index: -2;
  pointer-events: none;
}
.pill-nav.pill-open .pill-panel {
  display: block;
  animation: pill-panel-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes pill-panel-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------
   スクロール出現アニメーション
   ------------------------------------------------------------ */

/* ブロック：下から上へフェード */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 見出し：1文字ずつの字送り */
.chars .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.chars.is-visible .char {
  opacity: 1;
  transform: none;
}

/* JS無効時は即時表示 */
html:not(.js) .reveal,
html:not(.js) .chars .char {
  opacity: 1;
  transform: none;
}

/* アクセシビリティ：動きを減らす設定の環境では即時表示 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal,
  .chars .char,
  .tone-box.reveal::before,
  .pill-nav,
  .btn-more,
  .btn-more::before,
  #scroll-cue {
    transition: none !important;
    animation: none !important;
  }
  .reveal,
  .chars .char,
  .tone-box.reveal::before {
    opacity: 1 !important;
  }
  .reveal,
  .chars .char {
    transform: none !important;
  }
}