/* =====================================================================
   感動ストーリー（夢ふぉとが生み出してきた感動 / emotion）
   sotsugyoalbum.com /reason/impressed/ より移植・整理。
   ※ソースは assets/css/sass/modules/emotion.sass（手動同期）。
   移植元 common.css のカラートークンは #emotion .emotion に
   スコープして定義し、ポータル既存スタイルと競合しないようにしている。
   ===================================================================== */

/* 共通の main { overflow-x: hidden } は position:sticky を無効化するため、
   story では clip に上書き（横はみ出しは抑えつつ sticky を有効化） */
#emotion main { overflow-x: clip; }

/* このページのみ：共通 footer の装飾疑似要素を非表示／プライバシーマークは縦横比維持で高さ70px */
#emotion footer::before { display: none; }
#emotion footer { margin-top: 40px; }
#emotion .privacy-mark img { width: auto; height: 70px; }

#emotion .emotion {
  --surface: #ffffff;
  --ink: #1D1D1D;
  --muted: #6f6f6f;
  --accent: #C7021E;
  --line: #FFDAC7;
  --shadow: 5px 6px 3px rgba(22, 22, 22, 0.08);
  --radius: 18px;

  padding: 0;
  background: #faf7f2;
}

#emotion .emotion .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

#emotion .emotion-title {
  text-align: center;
  margin: 0 0 24px;
  font-size: 32px;
  font-weight: 700;
  color: #C7021E;
  letter-spacing: 0.04em;
}

#emotion .emotion .center-actions {
  text-align: center;
  margin: 0 0 64px;
}

#emotion .emotion .btn {
  display: inline-block;
  text-decoration: none;
}

#emotion .emotion .btn-primary {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  padding: 14px 40px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* ボタン内の矢印（上だけ角度のライン矢印。Sazae .link の icon_arrow を参考） */
#emotion .emotion .btn-arrow {
  flex: none;
  width: 28px;
  aspect-ratio: 24 / 14;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  position: relative;
  top: 1px;
}

/* ===== メインビジュアル（全幅背景 cover ＋中央1200px inner ＋右上に縦書きタイトル）。
   /history/ と構成を統一し、ページ差は高さ（aspect-ratio）のみ ===== */
#emotion .emotion-mv {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* 直下の sec-head がファーストビューに少し覗くよう、MV の高さ・下余白を抑制 */
  margin-bottom: 60px;
  /* 枠を幅に比例させる（min-height を持たせず、中間幅では PC レイアウトのまま比例縮小＝ズームアウト） */
  aspect-ratio: 1920 / 716;
  /* 周囲の白余白 */
  background: #fff;
  /* コラージュ画像が枠外（上のパンくず側）へはみ出して重ならないよう clip */
  overflow: hidden;
}

/* 商品コラージュ：白地に浮く角丸カード（外周のみ角丸）。opacity で白30%相当に淡く */
#emotion .emotion-mv-img {
  position: absolute;
  top: 0;
  left: 0;
  /* 枠（1920/716）と画像比率がほぼ一致。枠いっぱいに cover で全体表示し、枠と一緒に比例スケール */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  opacity: 0.7;
}

#emotion .emotion-mv-inner {
  /* このMVは被写体が左・余白が右。タイトルはコンテンツ幅(1200px)基準だとワイドで左寄りに
     見えるため、常にビューポート右端(24px)基準にして右の余白へ寄せる */
  width: calc(100% - 48px);
  height: 100%;
  margin: 0 auto;
  position: relative;
}

/* 縦書きタイトルを inner の右上にぴったり（founder の band と同デザイン） */
#emotion .emotion-mv-title {
  position: absolute;
  /* MV top からの距離を固定（PC は MV 高さ 37.3vw の50%＝18.65vw）。SP は縦長MVに合わせて下げる */
  top: calc(100vw * 358 / 1920);
  /* このMVは右側が余白。タイトルは右の余白の中央あたり（ビューポート右から約22%）に置く */
  right: 22%;
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}

#emotion .emotion-mv-title span {
  box-sizing: border-box;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  border: 3px solid var(--accent);
  /* 枠と一緒に比例縮小（1920px 基準＝34/22/14px。1920px 超は頭打ち） */
  font-size: min(1.77vw, 34px);
  padding: min(1.15vw, 22px) min(0.73vw, 14px);
}

#emotion .emotion-mv-title span:first-child { background: #fff; color: var(--accent); }
#emotion .emotion-mv-title span:last-child { background: var(--accent); color: #fff; margin-top: 6.2em; font-size: min(2.08vw, 40px); }

/* エピソード群の見出し（founder の sec-head と同デザイン） */
/* PC/SP とも sec-head は固定しない（スクロールで流す） */
#emotion .sec-head { text-align: center; margin: 0 auto 24px; }
#emotion .sec-head__icon { display: block; width: 28px; height: auto; margin: 0 auto 12px; }
#emotion .sec-head__jp { margin: 0; font-size: clamp(24px, 3.2vw, 34px); letter-spacing: 0.08em; font-weight: 700; color: var(--accent); }
#emotion .sec-head__en { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0.34em; font-weight: 700; color: var(--accent); }

#emotion .emotion-layout {
  display: grid;
  /* 本文24px化で長いエピソードが1画面に収まらないため、テキスト列を拡張（45/55→34/66、gapも縮小） */
  grid-template-columns: 34fr 66fr;
  gap: 40px;
  align-items: start;
}

/* 100vh の枠内で中身を縦中央寄せ（translateY だと上にはみ出して MV に重なるため）。
   sticky はレイアウト内に収まり、content と上下中央でそろう。padding-bottom: 30vh が末尾の早期解除を防ぐ */
#emotion .emotion-sticky {
  /* sec-head は固定しないため、画像列は元の中央 sticky（100vh 内で縦中央） */
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#emotion .emotion-sticky-inner { display: grid; gap: 20px; }

/* ラベル：各章の見出し上に「EPISODE NN」を表示（赤・左寄せ）。jp「エピソード」は section の sec-head へ集約 */
#emotion .emotion-label {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--accent);
}
#emotion .emotion-label-en { font-size: 11px; letter-spacing: 0.3em; color: var(--accent); }

/* 画像は左寄せ（左端を PREV ボタンの左端＝列の左にそろえる。右端はグラデーションで溶かす） */
#emotion .emotion-media {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  opacity: 0.6;
  /* 演出の scale/blur のはみ出しをクリップ */
  overflow: hidden;
}
/* EPISODE07 表示時のみ不透過（他は 0.6 で淡く／JS で is-opaque を付与） */
#emotion .emotion-media.is-opaque {
  opacity: 1;
}
/* 画像切替時、is-snapping で「そっとフォーカスが合って現れる」控えめで上品な演出 */
#emotion .emotion-media.is-snapping img {
  animation: emotion-reveal 0.8s ease-out;
}
@keyframes emotion-reveal {
  from { opacity: 0; transform: scale(1.04); filter: blur(6px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* 影なし・角丸なし。縦長写真も列幅いっぱいに合わせる（高さ制限なし） */
#emotion .emotion-media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

#emotion .emotion-nav { display: flex; gap: 10px; }

#emotion .emotion-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

#emotion .emotion-nav-btn.primary { background: var(--accent); color: #fff; border-color: transparent; }

#emotion .emotion-nav-btn:disabled { opacity: 0.5; cursor: default; }

/* nav の矢印（メインボタンと同じ「上だけ角度」のライン矢印。色は文字色に追従） */
#emotion .emotion-nav-arrow {
  flex: none;
  width: 20px;
  aspect-ratio: 24 / 14;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

#emotion .emotion-content { display: grid; gap: 240px; /* sec-head 直下の余白を詰めるため上余白を縮小（末尾用の padding-bottom は維持） */ padding-top: 6vh; padding-bottom: 30vh; }
/* スクロール演出：テキストを先にフェードアップ（.emotion--reveal はJSが付与＝no-JSでは常時表示） */
#emotion .emotion--reveal .emotion-chapter { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
#emotion .emotion--reveal .emotion-chapter.is-revealed { opacity: 1; transform: none; }
#emotion .emotion-chapter { scroll-margin-top: 120px; }

#emotion .emotion-chapter h3 {
  margin: 0 0 16px;
  /* 3ページ統一：h3 26px / line-height 1.4 */
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: #C7021E;
}

#emotion .emotion-chapter p {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: #5a4c46;
}
/* 各話の核心を1文だけ強調（赤見出しと役割を分けるため濃い黒） */
#emotion .emotion-chapter strong { font-weight: 700; color: #222; }
@media screen and (max-width: 900px) { #emotion .emotion-chapter p { font-size: 20px; } }
@media screen and (max-width: 767.5px) { #emotion .emotion-chapter p { line-height: 1.6; } }
@media screen and (max-width: 600px) { #emotion .emotion-chapter p { font-size: 16px; } }

@media screen and (max-width: 767.5px) {
  #emotion .emotion-title { font-size: 24px; margin: 0; }

  /* ヒーロー（SP）：story_mv_sp.png を全体表示するため枠を画像と同比率（766/1075）にし min-height を解除（cover でもトリミング無し／画像差し替え時は比率も更新） */
  #emotion .emotion-mv { aspect-ratio: 766 / 1075; min-height: 0; margin-bottom: 64px; }
  #emotion .emotion-mv-img { top: 0; left: 0; transform: none; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
  #emotion .emotion-mv-title { top: calc(100vw * 738 / 1920); right: 0; }
  #emotion .emotion-mv-title span { font-size: min(4.5vw, 34px); padding: 14px 9px; }
  #emotion .emotion-mv-title span:last-child { font-size: min(5.3vw, 40px); }

  #emotion .emotion-layout { grid-template-columns: 1fr; gap: 0; }
  /* SP は sec-head を固定しない（スクロールで流す）。固定は story-layout の画像バンドから。グラデは solid で無効化 */
  #emotion .sec-head { position: static; background: #faf7f2; margin: 0; padding: 10px 0 8px; }
  /* SP は画像バンドを画面最上部に sticky 固定（story-layout から上部固定）。本文だけが下を流れる。下端40pxを透過グラデにし本文が上側から溶けて入る */
  #emotion .emotion-sticky { position: sticky; top: 0; height: auto; display: block; z-index: 5; background: linear-gradient(to bottom, #faf7f2 calc(100% - 40px), rgba(250, 247, 242, 0)); padding: 12px 0 40px; }
  #emotion .emotion-sticky-inner { gap: 10px; }
  #emotion .emotion-media { justify-content: center; }
  #emotion .emotion-media img { width: 100%; object-fit: cover; margin: 0; aspect-ratio: 16 / 9; }
  #emotion .emotion-nav { justify-content: center; }
  #emotion .emotion-content { gap: 96px; padding-top: 24px; padding-bottom: 0; position: relative; z-index: 1; }
  /* 固定した画像バンド（約216px）の下に見出しが来るよう確保（sec-head は非固定） */
  #emotion .emotion-chapter { scroll-margin-top: 246px; min-height: 80vh; }
  #emotion .emotion-chapter h3 { font-size: 20px; }
}

/* MV：小さめ端末で高さ・タイトルを段階的に最適化（SASS の smartphone/small に対応） */
@media screen and (max-width: 600px) {
  #emotion .emotion-mv { margin-bottom: 48px; }
}
@media screen and (max-width: 412px) {
  #emotion .emotion-mv-title span { font-size: 18px; padding: 12px 8px; }
  #emotion .emotion-mv-title span:last-child { font-size: 20px; }
}