/* ティザーサイト専用スタイル（main ブランチ = ティザー運用） */
:root {
  --teaser-ink: #ffffff;
  --teaser-bg: #235ba4; /* canvas 描画前のフォールバック */
  --teaser-serif: "Noto Serif JP", serif;
  --teaser-sans: "Noto Sans JP", sans-serif;
  --teaser-en: "Playfair Display", serif;
  --reveal-duration: 900ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--teaser-bg);
  color: var(--teaser-ink);
  font-family: var(--teaser-sans);
  font-size: 16px;
  letter-spacing: .15em;
  line-height: 2.8;
}

img { display: block; max-width: 100%; }
p, h1, h2 { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ===== 背景（動くノイズグラデーション + グリッド線） ===== */
.noise-gradient-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.grain {
  position: fixed;
  inset: -128px; /* 移動しても端が見えないよう一回り大きく敷く */
  z-index: -1;
  background: url("assets/noise.png") repeat;
  background-size: 176px 176px; /* 512pxタイルを1/2.9表示 = 粒がさらに細かく鮮明に */
  pointer-events: none;
  animation: grainShift 1.2s steps(1) infinite;
  will-change: transform;
}

/* フィルムグレイン: タイル周期(128px)未満のオフセットをカクカク巡回させる */
@keyframes grainShift {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(-48px, 32px); }
  25%   { transform: translate(24px, -56px); }
  37.5% { transform: translate(-72px, -16px); }
  50%   { transform: translate(56px, 48px); }
  62.5% { transform: translate(-24px, 72px); }
  75%   { transform: translate(72px, -40px); }
  87.5% { transform: translate(-56px, -64px); }
}

.grid-lines {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(20% - 1px),
    rgba(255, 255, 255, .14) calc(20% - 1px),
    rgba(255, 255, 255, .14) 20%
  );
  pointer-events: none;
}

/* ===== レイアウト ===== */
.teaser-inner {
  max-width: 1008px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 160px) clamp(24px, 6vw, 64px) 40px;
}

.teaser-logo {
  /* 本文テキストと頭（左端）・お尻（右端）を揃える */
  width: 100%;
  margin: 0 0 clamp(100px, calc(16vw - 20px), 220px); /* ロゴと挨拶の間を20px詰める */
}

.teaser-logo img {
  width: 100%;
  height: auto;
  /* hero-logo.svg は preserveAspectRatio="none" で内在比率を持たないため明示する */
  aspect-ratio: 943 / 621.683;
  filter: brightness(0) invert(1);
}

/* ===== メッセージブロック ===== */
.teaser-message {
  margin-bottom: clamp(80px, 10vw, 120px);
}

.teaser-message h2 {
  /* 44pxだとカラム幅(最大880px)に対し1行19文字が収まらず末尾2文字が落ちるため38pxを上限にする */
  font: 600 clamp(24px, 2.9vw, 38px)/1.8 var(--teaser-serif);
  letter-spacing: .17em;
  margin-bottom: 24px;
  text-wrap: balance; /* 折り返しが発生する幅でも行長を均等にする */
}

.teaser-message p {
  margin-bottom: 16px;
}

/* ===== フルサイト公開予告 ===== */
.teaser-notice {
  text-align: center;
  margin-bottom: clamp(80px, 10vw, 120px);
}

.teaser-notice .notice-eyebrow {
  font: 400 clamp(28px, 3vw, 40px)/1.4 var(--teaser-en);
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
}

/* 両端の罫線 */
.teaser-notice .notice-eyebrow::before,
.teaser-notice .notice-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .6);
}

.teaser-notice .notice-lead {
  font: 600 clamp(18px, 2vw, 24px)/2 var(--teaser-serif);
  letter-spacing: .16em;
  padding-top: 16px;
}

.teaser-notice p:last-child {
  font-size: 14px;
  letter-spacing: .12em;
  padding-top: 8px;
}

/* ===== CONTACT ===== */
.teaser-contact {
  border: 1px solid rgba(255, 255, 255, .9);
  text-align: center;
  /* 下は視覚的に詰まって見えるため上よりやや広く取る */
  padding: clamp(40px, 5vw, 51px) clamp(20px, 4vw, 48px) clamp(52px, 6.5vw, 68px);
  margin-bottom: clamp(60px, 8vw, 100px);
}

.teaser-contact .contact-eyebrow {
  font: 400 clamp(44px, 5vw, 64px)/1.25 var(--teaser-en);
  letter-spacing: .01em;
}

.teaser-contact h2 {
  font: 600 clamp(20px, 2.2vw, 28px)/1.8 var(--teaser-serif);
  letter-spacing: .16em;
  padding-top: 20px;
}

.teaser-contact p {
  font-size: 14px;
  letter-spacing: .12em;
  line-height: 2.1;
  padding-top: 12px;
}

.teaser-contact .pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 15px 31px;
  margin-top: 40px;
  font: 600 13px/1.5 var(--teaser-serif);
  letter-spacing: .08em;
  transition: background-color .3s;
}

.teaser-contact .pill:hover {
  background-color: rgba(0, 0, 0, .08);
}

.teaser-contact .pill .pill-arrow {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  transform: translateX(-8px);
  overflow: hidden;
  line-height: 1;
  position: relative;
  top: -2px;
  transition: max-width .35s cubic-bezier(.2, .7, .2, 1), margin-left .35s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}

.teaser-contact .pill:hover .pill-arrow {
  max-width: 1.2em;
  margin-left: .55em;
  opacity: 1;
  transform: translateX(0);
}

/* ===== フッター ===== */
.teaser-footer {
  text-align: center;
  font: 400 12px/1.5 var(--teaser-en);
  letter-spacing: .08em;
  padding-bottom: 20px;
}

.teaser-footer .footer-company {
  font: 400 12px/2 var(--teaser-serif);
  letter-spacing: .1em;
  padding-bottom: 14px;
}

/* ===== 出現アニメーション ===== */
.fade-up {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity var(--reveal-duration) var(--motion-ease), transform var(--reveal-duration) var(--motion-ease);
}

.fade-up.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  .grain { animation: none; }
}

@media (max-width: 760px) {
  body { font-size: 14px; line-height: 2.4; }
  .teaser-logo { margin-bottom: 90px; }
  .teaser-contact p { font-size: 12px; }
}