/* =========================================================
   おいもパイちゃん 公式サイト  style.css
   YouTubeヘッダー準拠のピンク×パープル路線
   ========================================================= */

/* ---------- デザイントークン ---------- */
:root {
  --pink-hot:     #FF6EB4;
  --pink-light:   #FFB3D9;
  --pink-pale:    #FFF0F8;
  --purple-main:  #7B3FA0;
  --purple-light: #D4A0E8;
  --white:        #FFFFFF;
  --text-main:    #3D1A5C;
  --text-sub:     #8B5A9A;
  --gradient-main: linear-gradient(135deg, #FF6EB4 0%, #7B3FA0 100%);
  --gradient-hero: linear-gradient(160deg, #FFCCE6 0%, #FF6EB4 45%, #FF85C0 70%, #FFB3D9 100%);

  --font-ja: 'M PLUS Rounded 1c', sans-serif;
  --font-en: 'Nunito', sans-serif;

  --shadow-card: 0 6px 20px rgba(123, 63, 160, .08);
  --shadow-soft: 0 4px 14px rgba(255, 110, 180, .18);

  /* HEROの立ち絵まわりが基準とする最大幅（仮想ステージ）。
     これを超える横幅では中央に寄せて配置がベタ付きしないようにする */
  --stage-max: 1700px;
  /* ABOUT専用の仮想ステージ幅：テキスト列（余白込み約530px）＋立ち絵の
     実幅（高さ205dvhに対して幅≒98dvh）の合計。
     テキストと立ち絵の「セット幅」として使う */
  --about-stage: min(1700px, calc(530px + 98dvh));
  /* ABOUTテキスト列の左端位置。「テキスト＋立ち絵」のセット（--about-stage）を
     左右均等マージンで中央配置したときのテキスト開始位置。
     セットが収まらない狭い画面では下限24px（画面端の余白）で止める */
  --about-left: max(24px, calc((100vw - var(--about-stage)) / 2 + 24px));
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ja);
  color: var(--text-main);
  background: var(--white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

/* 英数字は Nunito を併用 */
.section-title, .stat-num, .site-nav__menu, .link-btn, .work-date, .news-card__date, .scroll-hint {
  font-family: var(--font-en), var(--font-ja);
}

/* =========================================================
   共通コンポーネント
   ========================================================= */
.section {
  position: relative;
  padding: 80px 24px;
  max-width: 900px;
  margin: 0 auto;
  /* スクロール入場アニメ */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
/* transformはnoneに戻す：translateY(0)のままだとセクションがスタッキング
   コンテキストを作り、子要素のz-index(6)が立ち絵(z5)に勝てなくなる */
.section.is-visible { opacity: 1; transform: none; }

/* セクション背景の交互切替 */
.section--pale {
  max-width: none;
  background: var(--pink-pale);
}
.section--pale > * { max-width: 900px; margin-left: auto; margin-right: auto; }

.section-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--purple-main);
  text-align: center;
  margin-bottom: 48px;
  position: relative;
  letter-spacing: .02em;
}
.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--gradient-main);
  border-radius: 2px;
  margin: 10px auto 0;
}

/* 見出し脇のワンポイントステッカー */
.section-title__sticker {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(123, 63, 160, .22));
  pointer-events: none;
  user-select: none;
}
.section-title__sticker--works {
  left: calc(50% + 90px);
  transform: translateY(-60%) rotate(10deg);
}
.section-title__sticker--guideline {
  left: calc(50% + 130px);
  transform: translateY(-55%) rotate(-8deg);
}
.section-title__sticker--links {
  left: calc(50% + 76px);
  transform: translateY(-58%) rotate(-9deg);
}
.section-title__sticker--contact {
  left: calc(50% + 100px);
  transform: translateY(-58%) rotate(8deg);
}
.section-title__sticker--news {
  left: calc(50% + 78px);
  transform: translateY(-58%) rotate(9deg);
}
@media (max-width: 560px) {
  .section-title__sticker { width: 40px; height: 40px; }
  .section-title__sticker--works { left: calc(50% + 62px); }
  .section-title__sticker--guideline { left: calc(50% + 88px); }
  .section-title__sticker--links { left: calc(50% + 52px); }
  .section-title__sticker--contact { left: calc(50% + 68px); }
  .section-title__sticker--news { left: calc(50% + 54px); }
}

/* ピルボタン */
.btn-gradient {
  background: var(--gradient-main);
  color: white;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 700;
  font-family: var(--font-ja);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: opacity .2s, transform .2s;
}
.btn-gradient:hover { opacity: .88; transform: translateY(-2px); }

.btn-outline {
  background: white;
  color: var(--purple-main);
  border: 2px solid var(--purple-light);
  border-radius: 50px;
  padding: 10px 22px;
  font-weight: 700;
  font-family: var(--font-ja);
  cursor: pointer;
  transition: background .2s, transform .2s, color .2s;
}
.btn-outline:hover { background: var(--purple-light); color: white; transform: translateY(-2px); }

/* タグ・バッジ */
.tag {
  display: inline-block;
  background: #F5D0F0;
  color: var(--purple-main);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.tag--alt {
  background: white;
  border: 1.5px solid var(--pink-light);
  color: var(--text-sub);
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}

/* =========================================================
   ヘッダーナビ
   ========================================================= */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0);
  transition: background .3s, box-shadow .3s, padding .3s;
}
.site-nav.is-scrolled {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(123, 63, 160, .1);
  padding: 8px 24px;
}
/* ロゴ画像は1024x1024の正方形キャンバスに横長ロゴ＋透過余白が入っているため、
   バーの高さはbrand側で固定し、画像自体は大きく表示して余白をはみ出させる */
.site-nav__brand {
  display: flex;
  align-items: center;
  height: 44px;
}
.site-nav__brand img {
  height: 180px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(123, 63, 160, .25));
  opacity: 0;
  transition: opacity .3s;
}
.site-nav.is-scrolled .site-nav__brand img { opacity: 1; }

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
}
.site-nav__menu a {
  text-decoration: none;
  color: white;
  padding: 8px 14px;
  border-radius: 50px;
  transition: color .2s, background .2s;
  text-shadow: 0 1px 3px rgba(123, 63, 160, .35);
}
.site-nav.is-scrolled .site-nav__menu a { color: var(--purple-main); text-shadow: none; }
.site-nav__menu a:hover { background: rgba(255, 255, 255, .25); }
.site-nav.is-scrolled .site-nav__menu a:hover { background: var(--pink-pale); }

.site-nav__cta {
  background: var(--gradient-main);
  color: white !important;
  text-shadow: none !important;
  box-shadow: var(--shadow-soft);
}
.site-nav__cta:hover { opacity: .9; }

@media (max-width: 600px) {
  .site-nav__menu { gap: 0; font-size: 13px; }
  .site-nav__menu a { padding: 6px 9px; }
  /* スマホ幅はメニューだけでバーが埋まりロゴの置き場がない（従来も
     押し潰されてほぼ見えていなかった）ため、明示的に非表示にする */
  .site-nav__brand img { display: none; }
}

/* =========================================================
   ① HERO
   ========================================================= */
/* ステージ：HEROとPROFILEで立ち絵を共有 */
.stage { position: relative; }

#hero {
  min-height: 100dvh;
  background: var(--gradient-hero);
  position: relative;        /* z-index未指定＝独立スタッキングを作らない */
  overflow: hidden;
}

/* 引き継ぎ立ち絵：fixedで表示し続ける（SP=頭〜ひざ） */
.stage-char {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 134dvh;            /* SP：縦画面でひざ上まで大きく */
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: top center;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 14px 34px rgba(123, 63, 160, .28));
  will-change: transform, translate, opacity;
  /* 縦移動はJSがスクロール連動で translate プロパティに反映（About下端が画面下端を
     越えたらAboutと一緒にスクロールアウト）。opacity は狭い幅の透かし化のみJSが制御 */
  transition: transform .8s cubic-bezier(.4, 0, .2, 1),
              height .8s cubic-bezier(.4, 0, .2, 1),
              right .8s cubic-bezier(.4, 0, .2, 1);
}
/* 立ち絵切替時のふわっとした入れ替え */
@keyframes charSwap {
  0%   { filter: drop-shadow(0 14px 34px rgba(123, 63, 160, .28)) brightness(1.15); }
  100% { filter: drop-shadow(0 14px 34px rgba(123, 63, 160, .28)) brightness(1); }
}
.stage-char.is-swapping { animation: charSwap .45s ease; }

/* ロゴ（SP：お腹のあたり・大きめ） */
.hero__logo {
  position: absolute;
  top: 53dvh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;                /* 立ち絵(z5)より前面 */
  width: min(440px, 84vw);
  filter: drop-shadow(0 6px 16px rgba(123, 63, 160, .32));
  animation: logoPop 1s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes logoPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes logoFadeIn {
  0%   { opacity: 0; transform: translateY(-50%) scale(.85); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* 下部フェード演出（背景をaboutへなじませる。立ち絵(z5)には掛けない） */
#hero .hero__fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 16dvh;
  background: linear-gradient(to top, rgba(255, 179, 217, .85) 0%, rgba(255, 179, 217, 0) 100%);
  z-index: 4;                /* パーティクル(z1)より前・立ち絵(z5)より後ろ */
  pointer-events: none;
}

/* パーティクル土台 */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* キラキラ星 */
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50%      { opacity: 1; transform: scale(1); }
}
.sparkle {
  position: absolute;
  width: 6px; height: 6px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .8);
  animation: twinkle 2s infinite;
}

/* ハート */
@keyframes floatHeart {
  0%   { transform: translateY(0) rotate(-10deg); opacity: .4; }
  50%  { transform: translateY(-18px) rotate(10deg); opacity: .7; }
  100% { transform: translateY(0) rotate(-10deg); opacity: .4; }
}
.heart {
  position: absolute;
  color: white;
  animation: floatHeart 3s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 2px 6px rgba(255, 110, 180, .4);
}

/* スクロールインジケーター */
.scroll-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: white;
  opacity: .8;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(123, 63, 160, .4);
  animation: bounce 1.5s ease-in-out infinite;
  z-index: 7;                /* 立ち絵より前面 */
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ===== 立ち絵スワイプ切替（矢印・ドット） ===== */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .55);
  color: var(--purple-main);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(123, 63, 160, .22);
  transition: background .2s, transform .2s, opacity .2s;
  opacity: .55;
}
.hero__arrow:hover { background: white; opacity: 1; transform: translateY(-50%) scale(1.08); }
.hero__arrow--prev { left: 14px; }
.hero__arrow--next { right: 14px; }

.hero__dots {
  position: absolute;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  gap: 9px;
}
.hero__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid white;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
  box-shadow: 0 1px 3px rgba(123, 63, 160, .35);
}
.hero__dot[aria-current="true"] { background: white; transform: scale(1.25); }

@media (max-width: 767px) {
  .hero__arrow { width: 38px; height: 38px; font-size: 22px; }
  .hero__arrow--prev { left: 6px; }
  .hero__arrow--next { right: 6px; }
}

/* 立ち絵フェード退場（ステージ外で非表示） */

/* ===== 768px以上：PCサイズの立ち絵だが、まだ中央寄せ（横幅が狭いノートPC等で
   キャラが画面からはみ出して左に偏って見えるのを防ぐ。ロゴはお腹に重ねる） ===== */
@media (min-width: 768px) {
  .stage-char {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: 205dvh;          /* 横画面：腰あたりまで大きく */
  }
  .stage.is-profile .stage-char { transform: translateX(-50%); }

  /* ロゴは1400px以上と同じ「左寄せ・縦中央」配置に統一
     （logoFadeInキーフレームのtransformはtranslateY(-50%)基準のため、
       中央寄せのtranslate(-50%,-50%)と組み合わせると fill-mode:both で
       横センタリングが失われ右寄せに見えるバグがあった） */
  .hero__logo {
    top: 50%;
    left: max(7%, calc((100vw - var(--stage-max)) / 2 + 64px));
    transform: translateY(-50%);
    width: min(640px, 34vw);
    animation: logoFadeIn 1s ease both;
  }
}

/* ===== 1400px以上かつ高さ800px以上：ロゴ左・立ち絵右の2カラム構成。
   1400という数字は「about側のテキスト最大幅440px＋余白」と「立ち絵の見かけ幅」が
   一般的なノートPCの高さ（〜1100px前後）でも重ならない下限として算出したもの。
   高さが低い画面では立ち絵（高さ連動で細くなる）に対して2カラムが間延びして
   見えるため、狭い幅と同じ「キャラ中央・透かし」レイアウトにフォールバックする ===== */
@media (min-width: 1400px) and (min-height: 800px) {
  .stage-char {
    left: auto;
    /* --stage-max を超える横幅では、真の右端ではなく
       中央寄せした仮想ステージの右端を基準にする */
    right: max(0px, calc((100vw - var(--stage-max)) / 2));
    transform: translateX(9%);
  }
  /* ABOUTではテキスト列（--about-left起点）のすぐ右に立ち絵を寄せる：
     立ち絵の右端 = テキスト左端 - 24px + セット幅（--about-stage）。
     rightはtransition対象なのでHERO⇔ABOUTの切替時はなめらかにスライドする */
  .stage.is-profile .stage-char {
    right: max(0px, calc(100vw + 24px - var(--about-left) - var(--about-stage)));
    transform: translateX(3%);
  }

  /* .hero__logo は768px以上のルール（左寄せ・縦中央）をそのまま継承 */
}

/* =========================================================
   ② PROFILE / ABOUT（参考レイアウト準拠）
   ========================================================= */
.profile {
  position: relative;
  overflow: hidden;
  max-width: none;
  min-height: 100dvh;
  padding: 104px 24px 72px;
  background: linear-gradient(180deg, #FBF5FB 0%, #F1E8F5 100%);
  display: flex;
  align-items: center;
}

/* 背景の巨大ゴースト文字 */
.profile__ghost {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en), var(--font-ja);
  font-size: clamp(96px, 21vw, 260px);
  font-weight: 800;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(212, 160, 232, .38);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.profile__inner {
  position: relative;
  z-index: 6;
  width: 100%;
  /* 中央寄せレイアウト時のコンテンツ幅上限。広い画面でテキストが
     左に寄って見えないよう700pxに絞って中央に置く */
  max-width: 700px;
  margin: 0 auto;
}
.profile__inner::before {
  content: '';
  display: block;
  height: 3px;
  width: 100%;
  background: var(--gradient-main);
  border-radius: 2px;
  margin-bottom: 22px;
}

/* 見出し ABOUT */
.about-head { margin-bottom: 8px; }
.about-head__title {
  font-family: var(--font-en);
  font-size: clamp(34px, 7vw, 54px);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--pink-hot);
  line-height: 1;
}
.about-head__sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .12em;
  margin-top: 6px;
}

/* 名前 */
.about-name { margin: 22px 0 4px; max-width: 440px; }
.about-name__ja {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: .04em;
  line-height: 1.1;
}
.about-name__en {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--text-sub);
  margin-top: 6px;
}

/* プロフィール表 */
.about-data {
  margin: 24px 0;
  max-width: 440px;
}
.about-data__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1.5px solid rgba(212, 160, 232, .55);
}
.about-data__row:first-child { border-top: 1.5px solid rgba(212, 160, 232, .55); }
.about-data dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .06em;
}
.about-data dt::after { content: '：'; }
.about-data dd {
  font-size: clamp(20px, 4.4vw, 26px);
  font-weight: 800;
  color: var(--text-main);
}

/* 紹介文 */
.about-bio {
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-main);
  max-width: 440px;
  margin: 22px 0;
}

/* SNS一覧 */
.about-sns { margin-top: 24px; }
.about-sns__title {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--purple-main);
  margin-bottom: 12px;
}
.about-sns__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.about-sns__list a {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-main);
  text-decoration: none;
  transition: color .2s, transform .15s;
  width: max-content;
}
.about-sns__list a::before {
  content: '›';
  color: var(--pink-hot);
  margin-right: 8px;
  font-weight: 800;
}
.about-sns__list a:hover { color: var(--pink-hot); transform: translateX(3px); }

/* ===== 自己紹介ムービー ===== */
.about-video {
  max-width: 440px;
  margin: 24px 0;
}
.about-video__title {
  font-family: var(--font-en), var(--font-ja);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--purple-main);
  margin-bottom: 12px;
}
.about-video__frame {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(212, 160, 232, .6);
  box-shadow: var(--shadow-card);
  background: var(--pink-pale);
}
.about-video__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== 数字（登録者数など）：ABOUTデザイン踏襲 ===== */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 440px;
  margin: 24px 0;
}
.about-stat {
  background: rgba(255, 255, 255, .72);
  border: 1.5px solid rgba(212, 160, 232, .55);
  border-radius: 14px;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-stat__num {
  font-size: clamp(22px, 4.6vw, 28px);
  font-weight: 800;
  line-height: 1.1;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: var(--font-en), var(--font-ja);
}
.about-stat__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .04em;
}
.about-stats__note {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--text-sub);
  opacity: .8;
  margin-top: 2px;
}

/* LIVEバッジ（配信中のときだけJSが表示） */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 5px 14px 5px 12px;
  border-radius: 50px;
  background: #FF3B5C;
  color: white;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 59, 92, .35);
}
.live-badge__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: white;
  animation: livePulse 1.1s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* 最新動画（stats.json があれば表示） */
.latest-video {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 440px;
  margin: 4px 0 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  border: 1.5px solid rgba(212, 160, 232, .55);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.latest-video:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.latest__thumb {
  width: 112px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--pink-pale);
}
.latest__meta { min-width: 0; }
.latest__tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--pink-hot);
}
.latest__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 768px以上：立ち絵はまだ中央寄せなので、本文はフルwidth
   （透かし化はJS側のmqCompactがそのまま面倒を見る） */
@media (min-width: 768px) {
  .profile { padding-top: 96px; }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1400px以上かつ高さ800px以上：立ち絵が右カラムに移るので、本文は左カラムに収める
   （HERO側の2カラム切り替えしきい値と揃えてある） */
@media (min-width: 1400px) and (min-height: 800px) {
  /* テキスト列は他セクションと同じ位置（--about-left）に置く。
     中身は最大440pxなので列幅は530pxに絞り、上の区切り線（::before）も
     テキスト列ぶんの長さで止める（立ち絵の顔に線がかからないように） */
  .profile__inner {
    max-width: 530px;
    margin-left: calc(var(--about-left) - 24px); /* .profileのpadding分を差し引く */
    margin-right: 0;
  }
}

/* 縦画面：立ち絵の透かし化は JS がスクロール連動で制御 */
@media (max-width: 767px) {
  .profile { padding-top: 92px; }
}

/* =========================================================
   ②.5 CHARACTER SHEET（プロフィール直下に大きく）
   ========================================================= */
.sheet-section {
  padding-top: 56px;
  /* Links（section--pale）と同じく背景を全幅の不透明にし、
     スクロールアウトで通過中の立ち絵をセクションごと完全に隠す */
  max-width: none;
  background: var(--white);
}
.sheet-section > * { max-width: 900px; margin-left: auto; margin-right: auto; }

/* 立ち絵(z5)がAboutと一緒にスクロールアウトして通過する間、
   Design・Linksが立ち絵より手前に描画されるようにする */
.sheet-section,
.links-section { z-index: 6; }

.sheet-figure {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.sheet-figure img {
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid rgba(212, 160, 232, .5);
}
.sheet-figure__credit {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .04em;
}

/* =========================================================
   ③ LINKS
   ========================================================= */
.links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.link-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .15s, box-shadow .2s;
}
.link-btn:hover { opacity: .9; transform: translateY(-2px); }
.link-btn--gradient {
  background: var(--gradient-main);
  color: white;
  box-shadow: var(--shadow-soft);
}
.link-btn--outline {
  background: white;
  color: var(--purple-main);
  border: 2px solid var(--purple-light);
}
.link-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 18px;
}
.link-btn__icon svg { width: 22px; height: 22px; }
.link-btn__icon-img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }
.link-btn span:not(.link-btn__icon):not(.link-btn__arrow) { flex: 1; }
.link-btn__arrow { font-size: 14px; opacity: .8; }

/* =========================================================
   ④ WORKS
   ========================================================= */
.works-category { margin-bottom: 48px; }
.works-category:last-child { margin-bottom: 0; }

.works-cat-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-left: 12px;
}
.works-cat-title--pink     { border-left: 4px solid var(--pink-hot);     color: var(--pink-hot); }
.works-cat-title--purple   { border-left: 4px solid var(--purple-main);  color: var(--purple-main); }
.works-cat-title--lavender { border-left: 4px solid var(--purple-light); color: var(--text-sub); }

.works-list { display: flex; flex-direction: column; gap: 10px; }

.work-card {
  background: white;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0.5px solid var(--pink-light);
  border-left: 4px solid var(--purple-light);
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s;
}
.work-card:hover { transform: translateX(4px); box-shadow: var(--shadow-soft); }
.work-card--pink   { border-left: 4px solid var(--pink-hot); }
.work-card--purple { border-left: 4px solid var(--purple-main); }

.work-date { font-size: 12px; color: var(--text-sub); white-space: nowrap; font-weight: 700; }
.work-name { flex: 1; font-size: 14px; color: var(--text-main); font-weight: 500; }
.work-link { font-size: 12px; color: var(--pink-hot); white-space: nowrap; text-decoration: none; font-weight: 700; }
.work-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .work-card { flex-wrap: wrap; gap: 6px 14px; }
  .work-link { width: 100%; }
}

/* =========================================================
   ④.5 GALLERY
   ========================================================= */
.gallery-grid {
  display: grid;
  /* auto-fit＋justify-contentで、枚数が少なくて1行埋まらない時も中央寄せになる
     （auto-fillだと余った列トラックが幅を持ち続けて左寄りに見えてしまう） */
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: center;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(212, 160, 232, .4);
  aspect-ratio: 4 / 5;
  background: var(--pink-pale);
}
.gallery-item {
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:focus-visible {
  outline: 3px solid var(--pink-hot);
  outline-offset: 2px;
}
.gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: white;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  background: linear-gradient(to top, rgba(61, 26, 92, .55), rgba(61, 26, 92, 0));
}

/* Gallery拡大表示（ライトボックス） */
body.has-lightbox { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear;
}
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 12, 46, .84);
}
.lightbox__figure {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 900px);
  max-height: 86vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  object-fit: contain;
  background: var(--pink-pale);
  pointer-events: auto;
}
.lightbox__caption {
  margin-top: 14px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  pointer-events: auto;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: white;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.lightbox__close {
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 26px;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 30px;
}
.lightbox__nav:hover { transform: translateY(-50%); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }

@media (max-width: 600px) {
  .lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
  .lightbox__close { width: 38px; height: 38px; font-size: 20px; top: 10px; right: 10px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
}

/* =========================================================
   ④.6 GUIDELINE
   ========================================================= */
.guideline-block {
  background: white;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  border: 0.5px solid var(--pink-light);
  box-shadow: var(--shadow-card);
}
.guideline-block + .guideline-block { margin-top: 0; }
.guideline-block:last-child { margin-bottom: 0; }
.guideline-block h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--purple-main);
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 4px solid var(--pink-hot);
}
.guideline-block p {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-main);
  margin-bottom: 12px;
}
.guideline-block p:last-child { margin-bottom: 0; }
.guideline-block strong { color: var(--pink-hot); }

/* =========================================================
   ④.7 NEWS
   ========================================================= */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

.news-card {
  background: white;
  border-radius: 12px;
  padding: 16px 20px;
  border: 0.5px solid var(--pink-light);
  border-left: 4px solid var(--pink-hot);
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s;
}
/* 折りたたみ可能なカードはカード全体をタップで開閉できる */
.news-card:not(.news-card--short) { cursor: pointer; }
.news-card:not(.news-card--short):hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.news-card__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.news-card__date { font-size: 12px; color: var(--text-sub); white-space: nowrap; font-weight: 700; }
.news-card__title { font-size: 15px; font-weight: 700; color: var(--text-main); }

.news-card__body {
  position: relative;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-main);
}
.news-card__body p + p { margin-top: 1em; }
/* 折りたたみ時：3行目まではっきり見せ、4行目を下に向かってフェードアウト */
.news-card__body.is-collapsed {
  max-height: calc(1.9em * 4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(1.9em * 2.9), transparent calc(1.9em * 4));
  mask-image: linear-gradient(to bottom, #000 calc(1.9em * 2.9), transparent calc(1.9em * 4));
}

/* ボタン行（「続きを読む」＋任意の外部リンク） */
.news-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* 「続きを読む」ピルボタン（短文カードでは非表示） */
.news-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  border: none;
  border-radius: 50px;
  background: var(--pink-pale);
  color: var(--pink-hot);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-ja);
  cursor: pointer;
  transition: background .2s;
}
.news-card__toggle:hover { background: var(--pink-light); }
.news-card--short .news-card__toggle { display: none; }
/* ボタンが1つもない（短文＆リンクなし）カードでは余白ごと消す */
.news-card--short .news-card__actions:not(:has(.news-card__link)) { display: none; }

/* 任意の外部リンクボタン（別タブで開く。白地＋枠でトグルと区別） */
.news-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 16px;
  border: 1.5px solid var(--pink-light);
  border-radius: 50px;
  background: white;
  color: var(--pink-hot);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.news-card__link:hover { background: var(--pink-pale); border-color: var(--pink-hot); }

@media (max-width: 600px) {
  .news-card { padding: 14px 16px; }
}

/* ---------- NEWSフロート（ヒーロー画面のピックアップ見出しピル） ---------- */
.news-float {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 0);   /* 縦位置はJSがスクロール連動で上書きする */
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 520px);
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .38));
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 10px 34px rgba(123, 63, 160, .28), inset 0 1px 0 rgba(255, 255, 255, .85);
  text-decoration: none;
  cursor: pointer;
  /* transformはJSが使うため、エントランスアニメはopacityのみ */
  animation: newsFloatIn .6s ease .3s both;
}
.news-float[hidden] { display: none; }
@keyframes newsFloatIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.news-float:hover { background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .5)); }
.news-float__badge {
  background: var(--gradient-main);
  color: #fff;
  font-family: var(--font-en), var(--font-ja);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 5px 11px;
  border-radius: 50px;
  flex-shrink: 0;
}
.news-float__text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.news-float__chevron {
  color: var(--purple-main);
  font-weight: 800;
  font-size: 17px;
  flex-shrink: 0;
}

/* フロート表示中はヒーロー下部の要素と衝突しないよう退避 */
body.has-news-float .scroll-hint { display: none; }
body.has-news-float .hero__dots { bottom: 88px; }

/* =========================================================
   ⑤ CONTACT
   ========================================================= */
.contact-note {
  max-width: 560px;
  margin: 0 auto 32px;
  background: var(--pink-pale);
  border: 1.5px dashed var(--pink-light);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-note p {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-main);
}
.contact-note a {
  color: var(--pink-hot);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-lead {
  text-align: center;
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 28px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 700; color: var(--purple-main); }
.required { color: var(--pink-hot); }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--pink-light);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-ja);
  color: var(--text-main);
  background: white;
  transition: border-color .2s, box-shadow .2s;
}
.form-group textarea { resize: vertical; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #C9A8D6; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--pink-hot);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 110, 180, .15);
}
.btn-submit { width: 100%; justify-content: center; font-size: 16px; padding: 16px; }
/* 送信完了状態：無効化で薄くならず、完了がはっきり分かる見た目にする */
.btn-submit.is-sent {
  background: var(--purple-light);
  opacity: 1;
  cursor: default;
}

.form-thanks {
  text-align: center;
  background: white;
  border: 1.5px dashed var(--pink-light);
  border-radius: 12px;
  padding: 18px;
  color: var(--purple-main);
  font-weight: 700;
  font-size: 14px;
}

/* =========================================================
   フッター
   ========================================================= */
.site-footer {
  background: var(--gradient-main);
  color: white;
  text-align: center;
  padding: 40px 24px 32px;
  position: relative;
}
.site-footer__chibi {
  width: 84px;
  height: auto;
  margin: 0 auto 8px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15));
}
.site-footer__credits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 16px;
  font-size: 11px;
  opacity: .9;
}
.site-footer__credits a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer__copy {
  font-size: 12px;
  opacity: .95;
  font-family: var(--font-en), var(--font-ja);
}

/* =========================================================
   アクセシビリティ：モーション低減
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .section, .sparkle, .heart,
  .stage-char, .hero__logo, .scroll-hint {
    animation: none !important;
    transition: opacity .3s ease !important;
  }
  .section { opacity: 1; transform: none; }
  .news-float { animation: none; }
}