/*
Theme Name: たろっぷTV
Theme URI: https://example.com/taroppu
Author: G-Factory
Author URI: https://example.com
Description: YouTuber「たろっぷTV」公式サイト用のオリジナルテーマ。ネオン×ポップなデザイン。NEWS（投稿）、キャラクター（カスタム投稿）、お問い合わせ（Contact Form 7対応）、トップの動画ID・SNSリンクのカスタマイザー編集に対応。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taroppu
*/


/* =========================================
   Variables: Pop & Dark Theme
   ========================================= */
   :root {
    --bg-dark: #120e16;       /* 深い紫黒 */
    --bg-panel: #1e1826;      /* パネル背景 */
    --text-main: #ffffff;
    --text-sub: #d0c5e0;

    /* Pop Colors - ネオンカラー調整 */
    --color-pink: #ff00de;    /* ネオンピンク */
    --color-yellow: #ffee00;  /* ネオンイエロー */
    --color-cyan: #00f2ff;    /* ネオンシアン */
    --color-purple: #bd00ff;  /* ネオンパープル */

    --font-base: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", sans-serif;
    --max-width: 1000px;
    --radius: 20px;
  }

/* =========================================
   Base
   ========================================= */
   body {
    margin: 0;
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-base);
    font-weight: 500;
    line-height: 1.6;
    overflow-x: hidden;
  }

  a { text-decoration: none; transition: 0.3s; color: inherit; }
  img { max-width: 100%; vertical-align: bottom; }
  ul { list-style: none; padding: 0; margin: 0; }

/* 背景パターン（ドット柄） */
.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg-dark);
  /* 少し濃いめの背景色にしてネオンを引き立てる */
  background-image: radial-gradient(rgba(157, 78, 221, 0.15) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 1;
}

/* Layout Utils */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
.grid-2col {
  display: grid;
  gap: 30px;
}
@media (min-width: 768px) {
  .grid-2col { grid-template-columns: 1fr 1fr; }
}

.section { padding: 80px 0; }

/* Titles */
.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-yellow);
  text-shadow: 0 0 10px rgba(255, 223, 0, 0.6); /* ネオン風発光 */
  margin: 0 0 10px;
  letter-spacing: 0.05em;
  font-style: italic;
}
.section-sub {
  color: var(--text-sub);
  margin: 0;
  font-size: 0.9rem;
}
.section-head { margin-bottom: 40px; text-align: center; }
.section-head--row {
  display: flex; justify-content: space-between; align-items: flex-end;
}

/* =========================================
   Buttons (Candy Style)
   ========================================= */
   .btn {
    display: inline-flex; justify-content: center; align-items: center;
    font-weight: 800; border-radius: 99px; cursor: pointer;
  }
  .btn--pop {
    padding: 1em 2em;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3);
    transform: translateY(0);
  }
  .btn--pop:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0,0,0,0.3), 0 0 15px currentColor; /* ホバーで発光 */
  }
  .btn--pop:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.3);
  }

  .btn--yellow { background: var(--color-yellow); color: #000; }
  .btn--pink   { background: var(--color-pink); color: #fff; }
  .btn--cyan   { background: var(--color-cyan); color: #000; }
  .btn--white  { background: #fff; color: var(--color-pink); }

  .btn--text { color: var(--color-cyan); font-weight: 800; }

/* =========================================
   Header
   ========================================= */
/* style.css の .site-header 部分を書き換え */
.site-header {
  position: fixed;  /* sticky から変更 */
  top: 10px;
  left: 0;          /* 追加：左端を固定 */
  width: 100%;      /* 追加：横幅を画面いっぱいに */
  z-index: 100;
  padding: 0 10px;
  /* 背景などの装飾は .site-header__inner にあるのでそのままでOK */
}
.site-header__inner {
  max-width: var(--max-width); margin: 0 auto;
  background: rgba(18, 14, 22, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 10px 24px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 99999;
  position: relative;
}

.site-header__logo-main {
  font-size: 1.4rem; font-weight: 800;
  background: linear-gradient(to right, var(--color-yellow), var(--color-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px rgba(255, 56, 155, 0.5));
}

/* PC Nav */
.site-nav--desktop { display: none; }
@media (min-width: 900px) {
  .site-nav--desktop { display: block; }
  .site-nav__list { display: flex; gap: 20px; }
  .site-nav__item a {
    font-weight: 800; color: #fff; position: relative;
  }
  .site-nav__item a:hover { color: var(--color-yellow); text-shadow: 0 0 8px var(--color-yellow); }
  .nav-toggle { display: none; }
}

/* Hamburger & Drawer */
.nav-toggle {
  width: 44px; height: 44px; background: var(--color-pink);
  border: none; border-radius: 50%; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
/* PC幅（デスクトップナビ表示時）はハンバーガーを隠す＝スマホ/タブレット時のみ表示 */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
}
.nav-toggle__line {
  width: 20px; height: 3px; background: #fff; border-radius: 3px;
  transition: 0.3s;
}
.nav-drawer {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(18, 14, 22, 0.98);
  transform: translateX(100%); transition: 0.3s;
  display: flex; align-items: center; justify-content: center;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer__list { text-align: center; font-size: 1.5rem; font-weight: 800; display: grid; gap: 20px;}
.nav-drawer__extra { margin-top: 40px; text-align: center; border-top: 2px dashed #444; padding-top: 20px;}
/* =========================================
   ハンバーガーボタンのアニメーション追加
   ========================================= */

/* 開いているとき（aria-expanded="true"）の挙動 */
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg); /* 1本目を斜めに */
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0; /* 2本目を消す */
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg); /* 3本目を斜めに */
}

/* ボタン自体を回転させて馴染ませる（お好みで） */
.nav-toggle[aria-expanded="true"] {
  background-color: #fff; /* 開いているときは白背景に反転させるなど */
}
.nav-toggle[aria-expanded="true"] .nav-toggle__line {
  background-color: var(--color-pink); /* 線をピンクに */
}
/* =========================================
   Hero (Neon Style Update)
   ========================================= */
   .hero {
    position: relative;
    padding: 155px 0 80px;
    overflow: hidden;
    text-align: center;
    background-color: #1a0524; /* ベースの濃い紫 */
  }

/* ネオン風背景装飾 */
.hero__bg-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 参考画像をイメージした紫とピンクの怪しい光 */
  background: 
  radial-gradient(circle at 20% 30%, rgba(189, 0, 255, 0.4) 0%, transparent 50%),
  radial-gradient(circle at 80% 70%, rgba(255, 0, 222, 0.3) 0%, transparent 50%),
  linear-gradient(to bottom, transparent, #120e16);
  /* さらにネオン管のようなグリッド線を追加（お好みで削除可） */
  /* background-imageにカンマ区切りで追加できますが、今回はシンプルに光のみ */
}

/* ヒーロー全体に少し光彩拡散を入れる */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 1.79 4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; gap: 40px; justify-items: center;
  position: relative; z-index: 2;
}
@media (min-width: 768px) {
  .hero { padding: 180px 0 80px; }
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center; text-align: left;
  }
}

.hero__badge {
  display: inline-block; background: transparent; 
  color: var(--color-cyan);
  border: 1px solid var(--color-cyan);
  box-shadow: 0 0 8px var(--color-cyan);
  font-weight: 800; padding: 4px 12px; border-radius: 4px; margin-bottom: 10px;
  transform: rotate(-2deg);
}
.hero__title {
  font-size: 5rem; line-height: 1; margin: 0 0 20px;
  color: #fff;
  /* ネオン管のようなテキストシャドウ */
  text-shadow: 
  0 0 5px #fff,
  0 0 10px #fff,
  0 0 20px var(--color-pink),
  0 0 40px var(--color-pink),
  0 0 60px var(--color-pink);
}
.hero__title span { 
  font-size: 1.5rem; 
  color: var(--color-cyan);
  text-shadow: 
  0 0 5px #fff,
  0 0 10px var(--color-cyan),
  0 0 20px var(--color-cyan);
  display: block; margin-top: 10px;
}
.hero__lead { font-size: 1.1rem; color: #eee; margin-bottom: 30px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.hero__actions { display: flex; gap: 15px; justify-content: center; }
@media (min-width: 768px) { .hero__actions { justify-content: flex-start; } }

.hero__visual { position: relative; }
.hero__img {
  max-width: 190px; border-radius: 30px;
  /* 枠線もネオン風に */
  border: 3px solid #fff; 
  box-shadow: 0 0 20px var(--color-purple), inset 0 0 20px var(--color-purple);
}
.pop-balloon {
  position: absolute; top: -20px; right: -20px;
  background: #fff; color: #000; padding: 10px 20px;
  font-weight: 800; border-radius: 50%;
  box-shadow: 0 0 15px var(--color-yellow);
  transform: rotate(10deg);
}
@media (min-width: 768px) {
  .hero__img {
    max-width: 300px;;
  }
}

/* MV スライドショー（宣材写真を4枚クロスフェード） */
.hero__slider {
  position: relative;
  width: 82vw; max-width: 340px;
  aspect-ratio: 3 / 4;
  border-radius: 30px;
  border: 3px solid #fff;
  box-shadow: 0 0 20px var(--color-purple), inset 0 0 20px var(--color-purple);
  overflow: hidden;
  background: #fff;
}
@media (min-width: 768px) {
  .hero__slider { width: 300px; max-width: 100%; }
}
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }

/* セクション装飾マスコット（たろゴリ 等） */
.section-mascot {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
  animation: mascotFloat 4s ease-in-out infinite;
}
.section-mascot--pickup {
  width: 132px; right: -22px; bottom: -30px;
  transform: rotate(7deg);
  z-index: 5;
}
@keyframes mascotFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@media (max-width: 767px) {
  .section-mascot--pickup { width: 82px; right: -10px; bottom: -18px; }
}

/* =========================================
   Hero Station Nav (路線図風メニュー)
   ========================================= */
   .hero-station-nav {
    position: relative;
    margin-top: 60px;
    padding: 20px 0 40px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 5; /* ヒーロー背景より手前に */
  }
  .hero-station-nav::-webkit-scrollbar { display: none; }

  .hero-station-nav__line {
    position: absolute; top: 29px; left: 0;
    width: 100%; height: 6px;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 10px #fff; /* 線も光らせる */
    border-radius: 99px;
    z-index: 0;
  }
  .hero-station-nav__list {
    display: flex; justify-content: space-between; align-items: flex-start;
    list-style: none; padding: 0 40px; margin: 0 auto;
    max-width: var(--max-width);
    position: relative; z-index: 1;
  }
  .hero-station-nav__item { flex: 1; text-align: center; position: relative; }
  .hero-station-nav__item a { display: flex; flex-direction: column; align-items: center; text-decoration: none; }

  .hero-station-nav__dot {
    display: block; width: 24px; height: 24px; border-radius: 50%;
    background-color: var(--item-color, #fff);
    border: 4px solid #fff;
    /* ドットの発光 */
    box-shadow: 0 0 10px var(--item-color), 0 0 20px var(--item-color);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 12px;
  }
  .hero-station-nav__item a:hover .hero-station-nav__dot { transform: scale(1.4); }

  .hero-station-nav__text {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .hero-station-nav__text .en {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800; font-size: 1.1rem; color: #fff;
    line-height: 1; text-transform: capitalize;
    writing-mode: vertical-rl; text-orientation: mixed;
    letter-spacing: 0.1em;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
    transition: color 0.3s, text-shadow 0.3s;
  }
  .hero-station-nav__text .ja {
    font-size: 0.7rem; color: var(--text-sub);
    writing-mode: vertical-rl;
    letter-spacing: 0.05em; margin-top: 4px;
  }
  .hero-station-nav__item a:hover .hero-station-nav__text .en {
    color: var(--item-color);
    text-shadow: 0 0 10px var(--item-color);
  }

  @media (min-width: 768px) {
    .hero-station-nav { margin-top: 80px; overflow-x: visible; padding-bottom: 0; }
    .hero-station-nav__line { min-width: auto; }
    .hero-station-nav__list { min-width: auto; padding: 0; }
    /* PCで横書きに戻す場合は以下を有効化 */
    .hero-station-nav__text .en, .hero-station-nav__text .ja { writing-mode: initial; }
  }

/* =========================================
   Pickup Video
   ========================================= */
   .section--pickup { background: var(--bg-panel); }
   .pickup-frame {
    position: relative; padding: 10px;
    background: var(--color-yellow);
    border-radius: var(--radius);
    transform: rotate(-1deg);
    box-shadow: 0 0 15px rgba(255, 223, 0, 0.4);
  }
  .pickup-frame__video {
    position: relative; padding-top: 56.25%;
    background: #000; border-radius: 12px; overflow: hidden;
  }
  .pickup-frame__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =========================================
   SNS & Links (Neon Style)
   ========================================= */

/* Twitterウィジェットの枠 */
.twitter-widget-wrapper {
  background: rgba(0, 0, 0, 0.5); /* 背景を少し濃く */
  border-radius: 12px;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 242, 255, 0.3); /* 薄いシアンの枠線 */
  box-shadow: inset 0 0 20px rgba(0, 242, 255, 0.1); /* 内側光彩 */
}

.twitter-fallback-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #000;
  color: #fff;
  border: 2px solid var(--color-cyan);
  border-radius: 99px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s;
  box-shadow: 0 0 15px var(--color-cyan);
}
a.twitter-timeline { text-decoration: none; }
a.twitter-timeline:hover .twitter-fallback-btn {
  transform: scale(1.05);
  background-color: var(--color-cyan);
  color: #000;
}

/* カード共通スタイル（Neon Frameをベースに調整） */
.card {
  /* neon-frameクラスで基本装飾済み */
  padding: 24px;
  height: 100%; /* 高さを揃える */
}

.card__head {
  border-bottom: 2px dashed rgba(255,255,255,0.2);
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.card__title {
  margin: 0;
  font-size: 2rem;
  /* neon-textクラスで色はつくが、傾きなどを追加 */
  transform: rotate(-2deg);
}


/* リンクリスト */
.link-list {
  display: grid;
  gap: 15px;
}

/* リンクボタン */
.link-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-weight: 800;
  color: #fff;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}

/* 左端のカラーバー */
.link-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  background: #888;
  transition: 0.3s;
}

.link-item--yt::before { background: #f00; box-shadow: 0 0 10px #f00; }
.link-item--ec::before { background: var(--color-yellow); box-shadow: 0 0 10px var(--color-yellow); }
.link-item--line::before { background: #06c755; box-shadow: 0 0 10px #06c755; }

/* アイコン */
.link-icon {
  display: inline-flex;
  width: 24px;
  justify-content: center;
  margin-right: 10px;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ホバー時のド派手エフェクト */
.link-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(5px) scale(1.02);
  border-color: #fff;
  text-shadow: 0 0 5px #fff;
  box-shadow: 0 0 15px rgba(255, 56, 155, 0.4); /* ピンクの光 */
}

.link-item:hover::before {
  width: 100%; /* バーが全体に広がる演出（お好みで） */
  opacity: 0.2;
}

.link-item:hover .link-icon {
  color: var(--color-yellow);
  text-shadow: 0 0 10px var(--color-yellow);
}
/* =========================================
   News Grid & No Image
   ========================================= */
   .news-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
  }
  @media (min-width: 600px) {
    .news-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  }
  .news-card a {
    display: block; background: #fff; color: #000;
    border-radius: 16px; overflow: hidden; transition: 0.3s;
  }
  .news-card a:hover {
    transform: translateY(-5px) rotate(1deg);
    box-shadow: 0 10px 20px rgba(255,56,155,0.4);
  }
  .news-card__thumb { height: 240px; overflow: hidden; background: #ddd; }
  .news-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .news-card__body { padding: 12px; }
  .news-card__body time { display: block; font-size: 0.75rem; color: #888; }
  .news-card__body h3 { font-size: 0.95rem; margin: 5px 0 0; line-height: 1.4; }
  .tag {
    display: inline-block; font-size: 0.7rem; padding: 2px 6px;
    background: var(--color-pink); color: #fff; border-radius: 4px;
  }

/* No Image Box */
.no-image-box {
  width: 100%; height: 100%;
  background-color: var(--color-yellow);
  background-image: radial-gradient(#fff 20%, transparent 20%);
  background-size: 20px 20px;
  background-position: 0 0;
  display: flex; justify-content: center; align-items: center; overflow: hidden;
}
.news-card a:hover .no-image-box { background-color: var(--color-pink); }
.no-image-box__inner {
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  transform: rotate(-5deg); transition: transform 0.3s ease;
}
.news-card a:hover .no-image-box__inner { transform: rotate(5deg) scale(1.1); }
.no-image-box__icon {
  width: 40px !important; height: auto !important;
  display: block; margin: 0 auto;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2));
}
.no-image-box__text { font-size: 0.7rem; font-weight: 800; color: #000; letter-spacing: 0.1em; }

/* =========================================
   Neon Framework (共通ネオン装飾)
   ========================================= */

/* ネオン枠の共通スタイル */
.neon-frame {
  position: relative;
  display: block;
  background-color: rgba(20, 10, 25, 0.95); /* 半透明の黒 */
  border: 3px solid #fff;
  border-radius: 30px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
  /* 内側の二重線（疑似要素で作るのが一般的ですが今回はシンプルにbox-shadowで） */
}

/* ピンク色のネオン枠 */
.neon-frame--pink {
  border-color: #fff;
  box-shadow: 
    0 0 10px var(--color-pink),
    0 0 20px var(--color-pink),
    inset 0 0 20px var(--color-pink);
}
.neon-frame--pink:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 0 20px var(--color-pink),
    0 0 40px var(--color-pink),
    inset 0 0 30px var(--color-pink);
}

/* シアン色のネオン枠 */
.neon-frame--cyan {
  border-color: #fff;
  box-shadow: 
    0 0 10px var(--color-cyan),
    0 0 20px var(--color-cyan),
    inset 0 0 20px var(--color-cyan);
}
.neon-frame--cyan:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 0 20px var(--color-cyan),
    0 0 40px var(--color-cyan),
    inset 0 0 30px var(--color-cyan);
}

/* ネオン文字 */
.neon-text-pink {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px var(--color-pink),
    0 0 20px var(--color-pink),
    0 0 40px var(--color-pink);
  font-style: italic;
  line-height: 1.1;
}

.neon-text-cyan {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px var(--color-cyan),
    0 0 20px var(--color-cyan),
    0 0 40px var(--color-cyan);
  font-style: italic;
  line-height: 1.1;
}

/* 装飾パーツ（星・ラベル・雷） */
.deco-star {
  position: absolute;
  color: var(--color-yellow);
  font-size: 1.5rem;
  text-shadow: 0 0 10px var(--color-yellow);
  animation: flicker 2s infinite alternate;
  z-index: 1;
}
.deco-star--1 { top: 15px; left: 15px; font-size: 2rem; transform: rotate(-15deg); }
.deco-star--2 { bottom: 20px; right: 20%; font-size: 1.2rem; transform: rotate(15deg); }

.deco-spark {
  position: absolute;
  color: var(--color-yellow);
  font-size: 2rem;
  text-shadow: 0 0 10px var(--color-yellow);
  z-index: 1;
}
.deco-spark--1 { top: -10px; left: -10px; transform: rotate(-30deg); }
.deco-spark--2 { bottom: 10px; right: 10px; transform: rotate(15deg); font-size: 1.5rem; }

.deco-label {
  position: absolute;
  top: 0; right: 30px;
  background: var(--color-pink);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 10px var(--color-pink);
}

@keyframes flicker {
  0% { opacity: 1; text-shadow: 0 0 10px currentColor; }
  100% { opacity: 0.7; text-shadow: 0 0 20px currentColor; }
}

/* ネオンボタン */
.btn--neon-pink {
  display: inline-block;
  background: #fff;
  color: var(--color-pink);
  font-weight: 800;
  padding: 0.8em 2em;
  border-radius: 99px;
  box-shadow: 0 0 15px var(--color-pink);
  transition: 0.3s;
}
.btn--neon-pink:hover {
  background: var(--color-pink);
  color: #fff;
  box-shadow: 0 0 25px var(--color-pink);
}

.btn--neon-cyan {
  display: inline-block;
  background: #fff;
  color: #000; /* 視認性のため黒文字 */
  font-weight: 800;
  padding: 0.8em 3em;
  border-radius: 99px;
  box-shadow: 0 0 15px var(--color-cyan);
  text-decoration: none;
  transition: 0.3s;
}
.btn--neon-cyan:hover {
  background: var(--color-cyan);
  box-shadow: 0 0 25px var(--color-cyan);
}


/* =========================================
   Shop Banner Layout
   ========================================= */
.section--shop { padding-bottom: 40px; }

.banner-shop {
  /* neon-frameクラスで装飾済み */
  padding: 30px 20px;
  display: flex;
  flex-direction: column; /* スマホは縦並び */
  align-items: center;
  text-align: center;
  gap: 20px;
}

.banner-shop__inner {
  position: relative;
  z-index: 2;
  flex: 1;
}

.banner-shop__title {
  font-size: 2.5rem;
  margin: 0 0 10px;
  letter-spacing: 0.05em;
  transform: rotate(-3deg); /* ポップに傾ける */
}

.banner-shop__text {
  color: #fff;
  margin-bottom: 20px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.banner-shop__text .text-sm {
  font-size: 0.85rem;
  color: var(--color-yellow);
}

.banner-shop__img {
  width: 160px;
  margin: 0 auto;
  z-index: 1;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
}

/* PC Layout */
@media (min-width: 768px) {
  .banner-shop {
    flex-direction: row; /* 横並び */
    text-align: left;
    padding: 40px 60px;
    align-items: center;
    justify-content: space-between;
  }
  .banner-shop__inner {
    align-items: flex-start;
  }
  .banner-shop__title {
    font-size: 3.5rem;
    margin-bottom: 15px;
  }
  .banner-shop__img {
    width: 220px;
    margin: 0;
    margin-right: -20px; /* 少しはみ出させる */
  }
}


/* =========================================
   Contact Box Layout
   ========================================= */
.contact-box {
  /* neon-frameクラスで装飾済み */
  text-align: center;
  padding: 50px 20px;
  margin-top: 20px;
}

.contact-box__title {
  font-size: 2.5rem;
  margin: 0 0 20px;
  transform: rotate(-2deg);
}

.contact-box__text {
  color: #fff;
  margin-bottom: 30px;
  line-height: 1.8;
  font-weight: 600;
}

@media (min-width: 768px) {
  .contact-box {
    padding: 60px;
  }
  .contact-box__title {
    font-size: 3.5rem;
  }
}

/* =========================================
   Mega Footer
   ========================================= */

.site-footer {
  position: relative;
  margin-top: 80px;
  background-color: #0b080e; /* ボディよりさらに暗い色 */
  border-top: 4px solid var(--color-pink);
  box-shadow: 0 -10px 30px rgba(255, 0, 222, 0.15); /* ほんのりピンクの光 */
  color: #fff;
  padding-top: 60px;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 40px;
  display: grid;
  gap: 40px;
}

/* スマホは1列、PCは3列（左側を広く） */
@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
  }
}

/* カラム共通 */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ロゴ & 説明文 */
.footer-logo {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 10px var(--color-pink);
  margin-bottom: 5px;
  display: inline-block;
}

.footer-desc {
  font-size: 0.85rem;
  color: var(--text-sub);
  line-height: 1.8;
  margin: 0;
}

/* SNSリンク群 */
.footer-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.footer-sns__link {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 99px;
  transition: 0.3s;
}

.footer-sns__link:hover {
  background: var(--color-pink);
  border-color: var(--color-pink);
  color: #fff;
  box-shadow: 0 0 10px var(--color-pink);
}

/* 見出し */
.footer-heading {
  font-size: 1rem;
  color: var(--color-cyan);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px dashed rgba(255,255,255,0.15);
  text-shadow: 0 0 5px var(--color-cyan);
  letter-spacing: 0.05em;
}

/* リスト */
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-list li a {
  font-size: 0.9rem;
  color: var(--text-sub);
  transition: 0.3s;
  display: inline-block;
}

.footer-list li a:hover {
  color: var(--color-yellow);
  transform: translateX(5px);
  text-shadow: 0 0 5px var(--color-yellow);
}

/* コピーライトエリア */
.site-footer__bottom {
  background-color: #000;
  padding: 20px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-copy {
  margin: 0;
  font-size: 0.7rem;
  color: #666;
}
/* =========================================
   Animations
   ========================================= */
   .js-fadein { opacity: 0; transform: translateY(30px); transition: 0.6s ease; }
   .js-fadein.is-visible { opacity: 1; transform: translateY(0); }

   .scroll-chara-layer {
    position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden;
  }
  .chara-peek {
    position: absolute; bottom: 100px;
    width: 150px; height: 150px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .chara-peek--left {
    left: 0; transform: translateX(-100%);
    background-image: url('images/chara-peek-left.png'); 
  }
  .chara-peek--left.is-active { transform: translateX(0); }
  .chara-peek--right {
    right: 0; transform: translateX(100%);
    background-image: url('images/chara-peek-right.png'); 
  }
  .chara-peek--right.is-active { transform: translateX(0); }

  /* =========================================
   Sub Page Common (下層ページ共通)
   ========================================= */
.page-hero {
  padding: 160px 0 60px;
  text-align: center;
  position: relative;
}
.page-hero__title {
  font-size: 3rem;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 0 10px var(--color-pink), 0 0 20px var(--color-pink);
  transform: rotate(-2deg);
  display: inline-block;
}
.page-hero__title span {
  display: block;
  font-size: 1rem;
  color: var(--color-cyan);
  text-shadow: none;
  letter-spacing: 0.1em;
  margin-top: 10px;
  font-weight: 800;
  transform: rotate(2deg); /* 文字だけ少し戻す */
}

/* パンくずリスト風ナビ (簡易版) */
.breadcrumb {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 20px; font-size: 0.8rem; color: var(--text-sub);
}
.breadcrumb a:hover { color: var(--color-yellow); }

/* =========================================
   Profile Page
   ========================================= */
.profile-wrap {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 30px;
  padding: 40px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
  .profile-wrap { padding: 50px; }
}

.profile-visual {
  text-align: center;
}
.profile-visual img {
  width: 280px; height: 280px; object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 30px var(--color-pink);
}

.profile-info h3 {
  font-size: 2rem; color: var(--color-yellow);
  margin: 0 0 20px;
  text-shadow: 0 0 10px var(--color-yellow);
}
.profile-table {
  width: 100%; border-collapse: collapse; margin-bottom: 30px;
}
.profile-table th, .profile-table td {
  padding: 15px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.2);
  text-align: left;
}
.profile-table th { width: 100px; color: var(--color-cyan); font-weight: 800; }

/* =========================================
   Works Page (Timeline)
   ========================================= */
.timeline {
  position: relative;
  padding: 20px 0;
  max-width: 800px; margin: 0 auto;
}
/* 中央線 */
.timeline::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 20px;
  width: 4px; background: rgba(255,255,255,0.2); border-radius: 4px;
}
@media (min-width: 768px) {
  .timeline::before { left: 50%; transform: translateX(-50%); }
}

.timeline-item {
  position: relative; margin-bottom: 50px;
  padding-left: 60px; /* 線より右側に配置 */
}
@media (min-width: 768px) {
  .timeline-item { padding-left: 0; width: 50%; }
  /* 偶数番目は右側、奇数番目は左側 */
  .timeline-item:nth-child(odd) { margin-left: auto; padding-left: 40px; text-align: left; }
  .timeline-item:nth-child(even) { margin-right: auto; padding-right: 40px; text-align: right; }
}

/* 年月のドット */
.timeline-dot {
  position: absolute; top: 0; left: 14px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-yellow);
  box-shadow: 0 0 10px var(--color-yellow);
  z-index: 2;
}
@media (min-width: 768px) {
  .timeline-dot { left: auto; right: -8px; } /* 奇数用(左側配置のアイテムの右端) */
  .timeline-item:nth-child(odd) .timeline-dot { left: -8px; right: auto; } /* 偶数用修正 */
}

.timeline-date {
  display: inline-block;
  background: var(--color-pink); color: #fff;
  padding: 4px 12px; border-radius: 4px;
  font-weight: 800; margin-bottom: 10px;
  box-shadow: 0 0 10px var(--color-pink);
}
.timeline-content {
  background: rgba(255,255,255,0.05);
  padding: 20px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
}
.timeline-content h4 { margin: 0 0 10px; font-size: 1.2rem; color: var(--color-cyan); }

/* =========================================
   Characters Page
   ========================================= */
.chara-grid {
  display: grid; gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.chara-card {
  background: #1a1520;
  border-radius: 20px; overflow: hidden;
  border: 2px solid #333;
  transition: 0.3s;
  text-align: center;
}
.chara-card:hover {
  border-color: var(--color-yellow);
  box-shadow: 0 0 20px rgba(255, 238, 0, 0.3);
  transform: translateY(-5px);
}
.chara-card__img {
  width: 100%; height: 250px;
  background: #251e2e;
  display: flex; align-items: center; justify-content: center;
}
.chara-card__img img { max-height: 90%; width: auto; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); }
.chara-card__body { padding: 20px; }
.chara-card__name {
  font-size: 1.5rem; color: var(--color-pink); margin: 0 0 10px;
  font-weight: 800;
}
.chara-card__desc { font-size: 0.9rem; color: #ccc; }

/* =========================================
   Works Page (YouTube実績 & 出演歴クレジット)
   ========================================= */
/* YouTubeチャンネルカード */
.channel-card {
  display: block;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  transition: 0.3s;
}
.channel-card:hover {
  border-color: var(--color-pink);
  box-shadow: 0 0 20px rgba(255,0,222,0.35);
  transform: translateY(-5px);
}
.channel-card__label {
  display: inline-block;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em;
  color: #fff; background: #ff0000;
  padding: 3px 12px; border-radius: 999px; margin-bottom: 14px;
}
.channel-card__name {
  font-size: 1.4rem; font-weight: 800; color: var(--color-yellow);
  margin: 0 0 6px;
}
.channel-card__count {
  font-size: 1.1rem; color: var(--text-sub); margin: 0 0 18px;
}
.channel-card__count strong {
  font-size: 1.8rem; color: var(--color-cyan);
  text-shadow: 0 0 10px rgba(0,242,255,0.5);
}
.works-note {
  text-align: center; color: var(--text-sub);
  font-size: 0.8rem; margin-top: 24px;
}

/* 出演歴クレジット */
.credits {
  max-width: 800px; margin: 0 auto;
  display: grid; gap: 28px;
}
.credit-block {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px 28px;
}
.credit-block__head {
  font-size: 1.2rem; font-weight: 800; color: var(--color-cyan);
  margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 2px dashed rgba(0,242,255,0.3);
}
.credit-list { display: grid; gap: 12px; }
.credit-list li {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding-left: 18px; position: relative;
}
.credit-list li::before {
  content: '◆'; position: absolute; left: 0; top: 0;
  color: var(--color-pink); font-size: 0.7rem;
}
.credit-list .credit-src { font-weight: 800; color: var(--color-yellow); }
.credit-list .credit-title { color: var(--text-sub); }

/* =========================================
   Contact Page
   ========================================= */
.form-wrap {
  max-width: 700px; margin: 0 auto;
}
.form-group { margin-bottom: 25px; }
.form-label {
  display: block; margin-bottom: 10px;
  color: var(--color-cyan); font-weight: 800;
}
.form-control {
  width: 100%; padding: 15px;
  background: rgba(0,0,0,0.3);
  border: 2px solid #444; border-radius: 10px;
  color: #fff; font-size: 1rem;
  transition: 0.3s;
  font-family: inherit;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-pink);
  box-shadow: 0 0 15px rgba(255, 0, 222, 0.3);
}
textarea.form-control { resize: vertical; min-height: 180px; }

/* ページネーション (News用) */
.pagination {
  display: flex; justify-content: center; gap: 10px; margin-top: 40px;
}
.page-num {
  width: 40px; height: 40px;
  display: flex; justify-content: center; align-items: center;
  border: 2px solid #444; color: #fff; border-radius: 50%;
  font-weight: 800; transition: 0.3s;
}
.page-num.is-current, .page-num:hover {
  background: var(--color-cyan); color: #000; border-color: var(--color-cyan);
  box-shadow: 0 0 10px var(--color-cyan);
}

/* =========================================
   Article Page (News Post)
   ========================================= */
.article-container {
  max-width: 800px;
  margin: 0 auto;
}

/* 記事ヘッダー（タイトル・日付まわり） */
.article-header {
  margin-bottom: 40px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 30px;
}
.article-meta {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--text-sub);
}
.article-title {
  font-size: 2rem;
  line-height: 1.4;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
  .article-title { font-size: 2.5rem; }
}

/* アイキャッチ画像 */
.article-thumb {
  width: 100%;
  height: auto;
  border-radius: 20px;
  margin-bottom: 50px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}

/* 本文スタイルエリア */
.article-body {
  font-size: 1rem;
  line-height: 1.8;
  color: #eee;
  margin-bottom: 80px;
}

/* 見出しスタイル */
.article-body h2 {
  font-size: 1.6rem;
  color: var(--color-yellow);
  border-bottom: 2px solid var(--color-yellow);
  padding-bottom: 10px;
  margin: 60px 0 30px;
  text-shadow: 0 0 10px rgba(255, 238, 0, 0.4);
}

.article-body h3 {
  font-size: 1.3rem;
  color: var(--color-cyan);
  border-left: 5px solid var(--color-cyan);
  padding-left: 15px;
  margin: 40px 0 20px;
  background: linear-gradient(90deg, rgba(0, 242, 255, 0.1) 0%, transparent 100%);
  padding-top: 5px;
  padding-bottom: 5px;
}

/* 段落・リスト・画像 */
.article-body p { margin-bottom: 30px; }
.article-body img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.article-body ul, .article-body ol {
  background: rgba(255,255,255,0.05);
  padding: 30px 30px 30px 50px;
  border-radius: 12px;
  margin-bottom: 30px;
}
.article-body li { margin-bottom: 10px; }

/* 引用（Blockquote） */
.article-body blockquote {
  background: rgba(255, 0, 222, 0.1);
  border-left: 4px solid var(--color-pink);
  margin: 30px 0;
  padding: 20px;
  font-style: italic;
  color: #fff;
  position: relative;
}
.article-body blockquote::before {
  content: "”";
  position: absolute;
  top: 0; right: 20px;
  font-size: 4rem;
  line-height: 1;
  color: var(--color-pink);
  opacity: 0.3;
  font-family: serif;
}

/* ボタンリンク（記事内用） */
.article-body .btn-link {
  display: block;
  text-align: center;
  margin: 40px 0;
}

/* 記事下部（シェア・ページャー） */
.article-footer {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 60px;
}

.share-area {
  background: #1a1520;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 40px;
}
.share-area h4 {
  margin: 0 0 20px;
  font-size: 1rem;
  color: var(--text-sub);
  letter-spacing: 0.1em;
}
.share-btns {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.btn-share {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  transition: 0.3s;
  background: #333;
}
.btn-share--x { background: #000; border: 1px solid rgba(255,255,255,0.3); }
.btn-share--x:hover { border-color: #fff; box-shadow: 0 0 10px #fff; }
.btn-share--line { background: #06c755; }
.btn-share--line:hover { box-shadow: 0 0 10px #06c755; }
.btn-share--copy { background: #555; }
.btn-share--copy:hover { background: #777; }

/* 前後記事ナビ */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.post-nav__link {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  font-size: 0.85rem;
  color: var(--text-sub);
  transition: 0.3s;
}
.post-nav__link:hover {
  background: rgba(255,255,255,0.1);
  color: var(--color-cyan);
}
.post-nav__link--prev { text-align: left; }
.post-nav__link--next { text-align: right; }
.post-nav__label {
  display: block;
  font-size: 0.7rem;
  color: #888;
  margin-bottom: 5px;
  font-weight: 800;
}
/* =========================================
   WordPress 互換調整（テーマ移植時）
   ========================================= */
/* the_posts_pagination() を既存の .page-num デザインに合わせる */
.pagination .nav-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pagination .page-numbers {
  width: 40px; height: 40px;
  display: flex; justify-content: center; align-items: center;
  border: 2px solid #444; color: #fff; border-radius: 50%;
  font-weight: 800; transition: 0.3s; text-decoration: none;
}
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
  background: var(--color-cyan); color: #000; border-color: var(--color-cyan);
  box-shadow: 0 0 10px var(--color-cyan);
}
.pagination .page-numbers.dots { border-color: transparent; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* 投稿本文（the_content）の体裁を記事ページに合わせる */
.article-body img { border-radius: 12px; }
.article-body { word-wrap: break-word; }

/* WP管理バー表示時の固定ヘッダー位置調整（通常の top:10px に管理バー高さを加算） */
.admin-bar .site-header { top: 42px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 56px; }
}

/* ヒーロー装飾キャラ（たろゴリ）：どーんと降下 → 着地インパクト → ががが揺れ → 停止（1回のみ）※WP移植時に追加 */
/* 位置：MV写真の真下に中央配置（hero__visual 基準） */
.hero-mascot-pos {
  position: absolute;
  left: 50%;
  bottom: -150px;
  transform: translateX(-50%);
  width: 200px;
  z-index: 3;
  pointer-events: none;
}
/* アニメ用（落下→着地→揺れ→停止） */
.hero-mascot {
  display: block;
  width: 100%;
  transform-origin: center bottom;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55));
  animation: mascotDropIn 1.7s both;
}
@keyframes mascotDropIn {
  0%   { opacity: 0; transform: translateY(-680px) scaleX(0.9) scaleY(1.12); animation-timing-function: cubic-bezier(0.5, 0, 0.95, 0.4); }
  8%   { opacity: 1; }
  40%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  47%  { transform: translateY(0) scaleX(1.22) scaleY(0.76); }
  54%  { transform: translateY(-16px) scaleX(0.95) scaleY(1.07); }
  60%  { transform: translateY(0) scaleX(1.06) scaleY(0.96); }
  64%  { transform: translate(6px,0) rotate(2deg); }
  68%  { transform: translate(-5px,0) rotate(-2deg); }
  72%  { transform: translate(4px,0) rotate(1.4deg); }
  76%  { transform: translate(-3px,0) rotate(-1deg); }
  80%  { transform: translate(2px,0) rotate(0.6deg); }
  85%  { transform: translate(-1px,0) rotate(-0.3deg); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-mascot-pos { width: 160px; bottom: -120px; }
}
@media (max-width: 767px) {
  /* スマホ：MV写真の真下に少し小さめで表示 */
  .hero-mascot-pos { width: 140px; bottom: -100px; }
}

/* サードパーティ製タイムライン埋め込み用（中央寄せ・最小高さを解除して自然に流す） */
.twitter-widget-wrapper--embed {
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  padding: 6px;
}
.twitter-widget-wrapper--embed > * { max-width: 100%; }

/* =========================================
   アクセス時イントロ（3回に1回／黒背景→たろゴリ落下→サイト表示）※WP移植時に追加
   ========================================= */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: opacity;
}
html.intro-active #intro-overlay { display: flex; }
html.intro-active body { overflow: hidden; }
#intro-overlay.is-hiding {
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.intro-mascot {
  width: 320px;
  max-width: 62vw;
  transform-origin: center bottom;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.8));
  animation: introDrop 1.5s both;
}
@keyframes introDrop {
  0%   { opacity: 0; transform: translateY(-120vh) scaleX(0.9) scaleY(1.12); animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.4); }
  8%   { opacity: 1; }
  44%  { transform: translateY(0) scaleX(1) scaleY(1); animation-timing-function: ease-out; }
  51%  { transform: translateY(0) scaleX(1.22) scaleY(0.76); }
  57%  { transform: translateY(-26px) scaleX(0.95) scaleY(1.08); }
  63%  { transform: translateY(0) scaleX(1.06) scaleY(0.96); }
  67%  { transform: translate(8px,0) rotate(2deg); }
  71%  { transform: translate(-7px,0) rotate(-2deg); }
  75%  { transform: translate(5px,0) rotate(1.4deg); }
  79%  { transform: translate(-4px,0) rotate(-1deg); }
  83%  { transform: translate(2px,0) rotate(0.5deg); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}
@media (max-width: 767px) {
  .intro-mascot { width: 240px; }
}