@charset "utf-8";

      @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* ====== 基本配色 ====== */
:root{
  --bg: #c6f1e0;       /* 背景 */
  --line: #373737;     /* 罫線 */
  --btn: #f5b05b;      /* ボタン系アクセント（今回は未使用でも保持） */
}

/* フォント共通設定（全ページのベース） */
:root {
  --font-sans: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto,
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic",
               Meiryo, sans-serif;
}



html {
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* 既存の body の font-family 指定があれば、上書きしておく */
body { font-family: var(--font-sans);   margin: 0;
  padding: 0;}

/* ボタン・入力・フォーム系も継承させる（ブラウザ初期値を打ち消す） */
button, input, select, textarea {
  font: inherit;
}

/* 見出しの太さ＆可変サイズ（スマホ〜PCで気持ちよく伸縮） */
h1, .site-title { 
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw + .6rem, 2rem);
}
h2 { 
  font-weight: 700; 
  font-size: clamp(1.1rem, 1.4vw + .7rem, 1.6rem);
}
h3 { font-weight: 700; }

/* ナビやボタンなどは中太めに */
.header-nav a, nav a, .tab-button, .btn { 
  font-weight: 600; 
}

/* 文章はやや詰め気味に（日本語でも読みやすい程度に） */
p, li { letter-spacing: .02em; }


* { box-sizing: border-box; }

/* ====== ヘッダー ====== */
.site-header {
  position: sticky; 
   margin: 0;
  top: 0;
  display: flex;
  justify-content: center;  /* 中央揃えのベース */
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 2px solid var(--line);
  z-index: 1000;
}

/* 「たらばがに」を中央固定 */
.site-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: .05em;
}

/* メニューを右端に */
.header-nav {
  margin-left: auto;
  display: flex;
  gap: 16px;
}
.header-nav a {
  font-weight: 700; 
  text-decoration: none; 
  color: var(--line);
  padding: 6px 16px; 
  border: 2px solid var(--line); 
  border-radius: 999px;
  background: #fff;
}
.header-nav a:hover {
  background: var(--btn); 
  color: #fff;
}

/* 後から追加されるCPリンクの基本スタイル */
.header-nav .cp-link {
  font-weight: 700;
  text-decoration: none;
  color: var(--line);
  padding: 6px 16px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  transition: background 0.2s ease;
}

.header-nav .cp-link:hover {
  background: var(--btn);
  color: #fff;
}

/* ====== サイドバー ====== */
.sidebar{
  position: fixed; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  z-index: 2000;
}
.sidebar-left{ left: 25px; }
.sidebar-right{ right: 25px; }

.sidebar-left img{
  width: 45px; height: 45px; border-radius: 50%;
  border: 2px solid var(--line); background:#fff;
  display: block;

}

/* 右側 黒縁TARABAGANI!!!!（縦） */
.right-banner {
  writing-mode: vertical-rl;
  font-weight: 900;
  font-size: 35px;           /* 少し大きく */
  color: #fff;
  -webkit-text-stroke: 0.3px #000; /* 枠を細くする */
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
               1px -1px 0 #000, -1px -1px 0 #000;
  letter-spacing: 20px;       /* 文字の間隔を広げる */
  padding: 12px 8px;         /* 上下左右に余裕を追加 */
  user-select: none;
}


/* 地図全体は以前のまま */
.map-section { padding: 24px 0; }
.map-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.map-image {
  width: 100%; height: auto; display: block;
  border: 2px solid var(--line); border-radius: 10px;
}

/* サムネイル：地図の上に重ねる（絶対配置） */
.map-thumbs {
  position: absolute; inset: 0;   /* top:0 right:0 bottom:0 left:0 の省略 */
}
.map-thumbs .thumb {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%); /* top/left を中心基準にしやすくする */
  transition: transform .2s ease;
}
.map-thumbs .thumb img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: none;
  border: none;
  transition: transform .2s ease; /* 回転が無効な環境向けに軽い変形も */
  transform-origin: 50% 50%;
  animation: spin-spring 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1;
}

/* 画像だけ回転（.thumb 自体は translate しているので衝突しないように img を回す） */
.map-thumbs .thumb:hover img {
  animation: spin-spring 0.4s cubic-bezier(0.45, -0.25, 0.25, 1.35) 1;
  animation: spin-1turn .27s linear 1;
}

@keyframes spin-spring {
  0%   { transform: rotate(0deg) scale(1); }
  70%  { transform: rotate(370deg) scale(1.05); } /* 少し行き過ぎる */
  90%  { transform: rotate(350deg) scale(0.98); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes spin-1turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ====== ざっくりエリア別の仮配置＆サイズ ======
   数値は自由に変えてOK！（% は地図画像内の相対位置） */
.thumb-year1         { top: 70%; left: 30%; width: 30%; }  /* 北西 */
.thumb-year2         { top: 30%; left: 20%; width: 40%;   }  /* 北東 */
.thumb-year3         { top: 58%; left: 55%; width: 23%;   }  /* 南西 */
.thumb-staff         { top: 60%; left: 80%; width: 30%;   }  /* 南東外周 */

.thumb-extra-school  { top: 40%; left: 67%; width: 20%; }  /* 中央 */
.thumb-extra-food    { top: 25%; left: 50%; width: 15%;   }  /* 南中央 */
.thumb-extra-garden  { top: 40%; left: 48%; width: 18%;   }  /* 南中央右 */

/* ====== スマホ時は“位置固定”を解除して整列表示 ======
   絶対配置 → フレックス整列に切り替え、サイズも一括縮小 */
@media (max-width: 640px) {
  .map-thumbs {
    position: absolute;    /* 地図の上にあるのは同じ */
    top: 8px; left: 50%; transform: translateX(-50%);
    width: 94%;
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center;
  }
  .map-thumbs .thumb {
    position: static; transform: none;   /* 絶対配置オフ */
    width: 64px;                         /* スマホの基準サイズ */
  }
  .map-thumbs .thumb:hover { transform: none; }
}
/* セクション全体 */
.fade-section {
  max-width: 1000px;
  margin: 56px auto;
  padding: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* 表示時 */
.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* タイトルとテキストの横並び */
.about-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: left;
  margin-bottom: 20px;
}

/* タイトル */
.about-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}

/* 縦罫線 */
.about-divider-vertical {
  width: 2px;
  height: 60px;
  background-color: var(--line);
}

/* 説明文 */
.about-description {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 500px;
  margin: 0;
}


/* 画像 */
.about-image-wrap {
  width: 100vw;             /* 画面幅いっぱい */
  max-width: 100vw;
  margin-left: calc(50% - 50vw); /* 中央基準で左右端まで */
}

.about-image-wrap img {
  width: 100vw;                /* 画面幅いっぱい */
  max-width: 100vw;
  height: auto;
  display: block;

  position: relative;
  left: 50%;
  transform: translateX(-50%); /* 中心基準で配置 */
  margin-left: 0;

  border-radius: 0;            /* フチをなくす */
  border-bottom: 2px solid #000; /* 太さや色は調整OK */
}

/* スマホ調整 */
@media (max-width: 640px){
  /* サムネ：モバイルは flex 並び（既存と同様） */
  .map-thumbs{
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 94%;
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center;
  }
  .map-thumbs .thumb{
    position: static; transform: none;
    width: 64px;
  }
  /* 回転はそのままOK。過剰ならコメントアウト可 */

  /* フルブリード：モバイルは角丸/枠なしのほうが馴染む */
  .about-image{
    border-radius: 6px;
  }
  .fade-section.is-visible .about-image{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    border-color: transparent;
  }

  .about-text{
    top: 10px;
    padding: 8px 12px;
    max-width: 92vw;
  }
}

/* ===== 落下ドット背景 ===== */
#bg-dots{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;     /* すべてのコンテンツより背面 */
  background: #fff;/* 全体の背景は白 */
  display: block;
}

/* スマホでは背景を無効化 */
@media (max-width: 640px){
  #bg-dots{ display: none; }
}





/* ===== ページ器 ===== */
.characters-main{ max-width:1200px; margin:24px auto 80px; padding:0 16px; }

/* ===== タブ ===== */
.tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:24px 0 20px; }
.tab-button{
  padding:8px 16px; border:2px solid var(--line); background:#fff; border-radius:999px;
  cursor:pointer; font-weight:700; transition: background .2s ease, color .2s ease, transform .06s ease;
}

.tab-button.tab-year1:hover,
.tab-button.tab-year1.is-active {
  background: #e74b56;  /* パステルレッド */
  color: #fff;
}

.tab-button.tab-year2:hover,
.tab-button.tab-year2.is-active {
  background: #0095ff;  /* パステルブルー */
  color: #fff;
}

.tab-button.tab-year3:hover,
.tab-button.tab-year3.is-active {
  background: #4be273;  /* パステルグリーン */
  color: #fff;
}

.tab-button.tab-staff:hover,
.tab-button.tab-staff.is-active {
  background: #9d91e8;  /* パステルパープル */
  color: #fff;
}

.tab-button.tab-others:hover,.tab-button.tab-others.is-active  {
  background: var(--btn); /* オレンジ（既存） */
  color: #fff;
}

.tab-button:hover{ background:var(--btn); color:#fff; }
.tab-button.is-active{ background:var(--btn); color:#fff; transform:translateY(-1px); }


.tab-title.with-avatars{ display:flex; align-items:center; justify-content:center; gap:50px; }

/* セクション内で中央寄せ */
.carousel-section {
  text-align: center; 
}

.category-avatars {
  display: inline-flex;   /* アイコン列の幅にだけフィット */
  gap: 20px;
  flex-wrap: wrap;        /* 下の線を改行させるために必要 */
  margin-bottom: 16px;
}

.category-avatars::after {
  content: "";
  flex-basis: 100%;       /* アイコン列の幅いっぱいに線を出す */
  height: 2.6px;
  margin-top: 0px;
  background-color: var(--line);
}

.category-avatars .avatar{
  width:50px; height:50px; border-radius:50%;
  display:inline-block; border:none; cursor:pointer;
}
@keyframes icon-wiggle{ 0%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-2px) rotate(-6deg)} 100%{transform:translateY(0) rotate(0)} }
.category-avatars .avatar:hover{ animation: icon-wiggle .35s ease-in-out; }

/* 1年生（赤） */
#year1 .category-avatars::after {
  background-color: #e74b56; /* タブの色と同じ */
}

/* 2年生（青） */
#year2 .category-avatars::after {
  background-color: #0095ff;
}

/* 3年生（緑） */
#year3 .category-avatars::after {
  background-color: #4be273;
}

/* 職員（紫） */
#staff .category-avatars::after {
  background-color: #9d91e8;
}

/* 周りの人々（オレンジ） */
#others .category-avatars::after {
  background-color: var(--btn); /* 既存のオレンジ */
}

/* ===== カルーセル ステージ ===== */
.carousel-section{ display:none; }
.carousel-section.is-active{ display:block; }

/* ステージに“安全ガター”を導入（左右サイドバーに被らない幅を常時確保） */
.char-stage{
  position: relative;
  max-width: min(1100px, 92vw);
  height: clamp(380px, 52vw, 560px);
  margin: 12px auto 12px;
  background: rgba(255,255,255,0.8);
  overflow: visible;

  /* ←★追加：左右ガターを変数で管理 */
  --stage-gutter: 80px;   /* PCでの左右安全マージン（必要なら調整OK） */
  
}

/* 2) レール…左右をガター分だけ内側に。ここが「基準の幅」になります */
.cc-track{
  position:absolute;
  top:0; bottom:0;
  left: var(--stage-gutter);
  right: var(--stage-gutter);
  z-index:100;
/* outline:1px dashed red; */
}

/* --- 矢印ボタン本体 --- */
.cc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 200;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.2rem;
  font-weight: bold;
  color: #000;
  transition: all 0.25s ease;
}

.cc-btn:hover {
  background: #ffeb3b; /* 黄色 */
  border: none;        /* 枠を消す */
  color: #000;
}

/* --- 矢印の中身 --- */
.cc-prev::before { content: "〈"; }
.cc-next::before { content: "〉"; }

/* --- 左右の位置を明示的に指定 --- */
.cc-prev { left: 20px; }   /* ← 左側に配置 */
.cc-next { right: 20px; }  /* → 右側に配置 */

/* --- キャラカルーセル全体の下に横罫線 --- */
.char-stage::before {
  content: "";
  position: absolute;
  left: -1000px;
  right: -1000px;         /* 画面いっぱいに */
  bottom: -20px;    /* キャラステージより少し下 */
  height: 2px;
  background: #000;
  z-index: 150;
}

/* --- 縦罫線（画面全体に固定表示・左右2本まとめて描く） --- */
.char-stage::after {
  content: "";
   position: absolute;   /* ← fixedではなくabsolute */
  top: -200px;          /* ← ヘッダーより上まで伸ばしたいならマイナス調整 */
  bottom: -20px;            /* ← 下まで */
  left: 0;
  right: 0;
  background: 
    linear-gradient(to right, 
      transparent 90px,       /* 左線まで透明 */
      #000 90px, #000 92px,   /* 左線2px */
      transparent 92px calc(100% - 92px), /* 中央は透明 */
      #000 calc(100% - 92px), #000 calc(100% - 90px), /* 右線2px */
      transparent calc(100% - 90px)
    );
  pointer-events: none; /* 線でクリック妨害しない */
  z-index: 150;
}






/* レール＆スライド */
.cc-track{
  position:absolute;
  top:0; bottom:0; left:0; right:0;
  z-index:100;
}


/* 共通スライド */
.cc-slide{
  position:absolute;
  top:50%; left:50%;
  width: 36%; height: 78%;
  transform: translate(-50%, -50%);       /* ← 中央固定の唯一の変形 */
  opacity:0; pointer-events:none;
  transition: transform .38s ease, opacity .38s ease;
  text-align:center;
  z-index: 150;
}
.cc-slide img{
  height:100%; width:auto; display:block;
  border:none; box-shadow:none; border-radius:0;
  transform-origin: 50% 50%;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}

/* 中央（拡大演出はここで。位置は translate(-50%,-50%) のまま） */
.cc-slide.is-active{
  opacity:1; pointer-events:auto; z-index: 150 !important;
  clip-path:none !important;
  transform: translate(-30%, -50%);   left: calc(50% - -60px);      
}

/* 中央ホバー：拡大＋ゆらゆら */
@keyframes sway {
  0%   { transform: scale(1.08) rotate(0deg); }
  50%  { transform: scale(1.08) rotate(1.4deg); }
  100% { transform: scale(1.08) rotate(-1.4deg); }
}
.cc-slide.is-active img:hover {
  animation: sway 1.2s ease-in-out infinite alternate;
}

/* 名前（中央のみ表示） */
.cc-slide figcaption{
  position:absolute; left:15%; bottom:-28px; transform:translateX(-50%);
  font-weight:700; opacity:0; transition:opacity .2s ease;
  z-index: 1000;
}
.cc-slide.is-active figcaption{ opacity:1; }

/* 左右のスライド：位置は“中央からのオフセット”で表現（ウィンドウ幅に依存しない） */
.cc-slide.is-prev,
.cc-slide.is-next{
  opacity:1; z-index:120 !important;
  width:32%;
}
.cc-slide.is-prev {
  transform: translate(calc(-50% - 250px), -50%) scale(.82);
}

.cc-slide.is-next {
  transform: translate(calc(-50% + 250px), -50%) scale(.82);
}
/* 斜線 */
.cc-slide.is-prev::after,
.cc-slide.is-next::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index: 11;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.75) 0 2px,
      rgba(255,255,255,0) 2px 10px);
}
/* キャプションは非表示 */
.cc-slide.is-prev figcaption,
.cc-slide.is-next figcaption{ display:none; }

/* 完全に非表示 */
.cc-slide.is-hidden{ opacity:0; pointer-events:none; z-index: 0 !important; }

/* プロフィール：右に寄せてスライドイン + フェードイン */
.detail-panel {
  position: absolute;
  top: 50%;
  left: 50%; /* キャラの右に寄せる */
  transform: translateY(-50%) translateX(30px);
  width: auto;
  background: transparent; /* 外枠いらないので透明 */
  border: none;
  opacity: 0;
   max-width: 480px;  /* パネル自体の横幅 */
  padding: 40px;     /* ← 内側の余白を広めに */
  margin-left: 40px; /* ← 外側の余白を広めに */
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 50px;
  box-shadow: 4px 6px 18px rgba(0,0,0,0.15);
  visibility: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 表示時：ふわっと右から登場 */
.char-stage.detail-mode .detail-panel {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0);
}

.char-stage.detail-mode .cc-slide.is-active {
  left: 40%;
  transform: translate(-50%, -50%) scale(1.04);
  z-index: 999 !important;
  transition: transform 0.5s ease, left 0.5s ease;
}

/* 単体表示中はキャラを大きくする */
.char-stage.detail-mode .cc-slide.is-active img {
  transform: scale(1.15);   /* ← 拡大率はお好みで */
  transition: transform 0.4s ease;
}

/* 単体表示中は下の名前（figcaption）を非表示に */
.char-stage.detail-mode .cc-slide.is-active figcaption {
  display: none;
}


@keyframes fade-slide-left {
  0% { opacity: 1; transform: translateX(0) scale(0.82); }
  100% { opacity: 0; transform: translateX(-80%) scale(0.7); }
}

@keyframes fade-slide-right {
  0% { opacity: 1; transform: translateX(0) scale(0.82); }
  100% { opacity: 0; transform: translateX(80%) scale(0.7); }
}

.char-stage.detail-mode .cc-slide.is-prev ,
.char-stage.detail-mode .cc-slide.is-next {
  
   animation: none !important;
  transform: translate(calc(-50% - 250px), -50%) scale(.82);  /* ←静止位置 */
  opacity: 0; /* フェードアウトだけ */
  
}

/* プロフィール */
/* プロフィール全体 */
.profile-box {
  background: #fff;
  padding: 20px;
  max-width: 650px;
  margin: 0 auto;
}

/* キャラ名 */
.profile-name {
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
  letter-spacing: 0.05em;
}

/* プロフィール項目 */
.profile-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.profile-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #ddd;
}

.profile-item:last-child {
  border-bottom: none;
}

/* ラベルと値 */
.profile-item .label {
  font-weight: 700;
  color: #444;
}
.profile-item .value {
  font-weight: 500;
  color: #222;
}

/* 区切り線は不要になったので削除OK */
.profile-sep {
  display: none;
}

/* 説明文 */
.profile-desc {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  color: #333;
}

/* ローマ字表記（サブタイトル風） */
.profile-name-en {
  display: block;              /* 改行して下に表示 */
  font-size: 0.9rem;           /* 小さめ */
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: 0.15em;      /* 少し広め */
  color: #777;                 /* グレーで控えめ */
}


/* スマホ：ガターを小さくするだけで同じロジックが効きます */
@media (max-width: 768px){
  .sidebar{ display:none; }
  .char-stage{
    height: clamp(440px, 80vh, 560px);
    --stage-gutter: 48px;  /* ←お好みで */
  }
  .cc-slide{ width:64%; height:58vh; max-height:380px; }
  .cc-slide.is-prev, .cc-slide.is-next{ width:48%; }
}





/* ===== キャラカード ポップアップ ===== */
.char-popup {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 の省略形 */
  background: rgba(0, 0, 0, 0.7); /* 黒半透明の背景 */
  display: none; /* 最初は非表示 */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 最前面に表示 */
}

.char-popup img {
  max-width: 80vw;   /* 画面幅の90%まで */
  max-height: 85vh;  /* 画面高さの90%まで */
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  animation: popupFadeIn 0.3s ease;
}

/* 閉じるボタン */
.char-popup-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  user-select: none;
}

.char-popup-close:hover {
  transform: scale(1.2);
  color: #ffb6c1; /* ピンクっぽく変化 */
}

/* フワッと表示アニメーション */
@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.char-popup-prev,
.char-popup-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5.0rem;
  font-weight: bold;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  user-select: none;
  padding: 0 12px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.char-popup-prev:hover,
.char-popup-next:hover {
  color: #ffb6c1;
  transform: translateY(-50%) scale(1.2);
}

.char-popup-prev { left: 12%; }
.char-popup-next { right: 12%; }


/* CP紹介 */

/* 吹き出し＋キャラ横並び */
.main-visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 60px;
  position: relative;
  padding: 60px 20px 10px;
}


.speech {
  width: 250px;
  height: auto;
  margin-left: 10px;
}

/* 共通 */
.character-left, .character-right {
  position: relative;
  display: flex;
  align-items: flex-end;
}

/* 左キャラ */
.character-left {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 20px; /* 吹き出しとキャラの間 */
}

.character-left img{
  max-width: 400px; /* ← 左キャラのサイズを調整 */
  height: auto;
}

/* 右キャラ */
.character-right {
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
}

.character-right img {
  max-width: 400px; /* ← 右キャラのサイズを調整 */
  height: auto;
}

/* 吹き出し共通 */
.speech.left, .speech.right {
  max-width: 100px;
  height: auto;
  position: static;
}


.cp-title-logo.behind-characters {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0; /* キャラより後ろ */
}

.cp-title-logo img {
  max-width: 950px; /* サイズ縮小 */
  height: auto;
}



.section-content.three-column {
  display: flex;
  justify-content: space-between;
     align-items: stretch; /* ← 子要素の高さに合わせて伸ばす */
  max-width: 900px;
  margin: 0 auto;
  border-left: 2px solid black;
  border-right: 2px solid black;
  padding: 10px;
  gap: 10px;
}

.section-content.three-column .img-stage {
  flex: 1;
  max-width: 200px;
 align-self: flex-end; 
}

.section-content.three-column .text-stage {
  flex: 2;
  display: flex;
  flex-direction: row;      /* 横並び */
  justify-content: space-between;
  align-items: center;      /* 上下中央揃え */
  gap: 20px;
  padding: 0 0px;
  text-align: left;
  flex-wrap: wrap;          /* 折り返し許可 */
  min-width: 0;
}

/* 本文 */
.section-content.three-column .text-stage p {
  margin: 0;
  line-height: 1.6;
  white-space: normal;
  word-break: break-word;
  flex: 1;
  max-width: 100%;
  min-width: 0;
  padding: 10px;
}

/* 見出し（縦書き） */
.section-content.three-column .text-stage h3 {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 2.5rem;
  font-weight: 400;
  margin: 0;
  line-height: 2.5;
  flex-shrink: 0;
}


/* 特別なセクションだけ縦並び */
.section-content.three-column .text-stage.special-layout {
  display: block;
  padding: 0 20px;
  text-align: left;
}

.section-content.three-column .text-stage.special-layout h3 {
  writing-mode: horizontal-tb !important;
  text-orientation: initial !important;
    font-size: 2.5rem;
  font-weight: 400;
  margin-top: 16px;
  margin-bottom: 0;
  text-align: left;
}


/* 見出し：上からスライドイン */
/* アニメーション定義 */
@keyframes slideDownFade {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 初期状態（非表示） */
.slide-in-heading {
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.5s ease-out;
}

/* スクロールで出現したらアニメ開始 */
.slide-in-heading.is-visible {
  animation: slideDownFade 0.8s ease-out forwards;
}



.headline-scroll .headline-track span {
   padding-left: 100vw; /* 画面外から登場 */
  animation: marquee-left 18s linear infinite;
  animation-play-state: paused;
}

.headline-scroll.active .headline-track span {
  animation-play-state: running;
}

.headline-wrapper {
  position: relative;
  width: 100%;
  height: 90px;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #fff; /* 任意 */
}

.headline-track {
  white-space: nowrap;
  display: inline-block;
  animation: scrollText 18s linear infinite;
}

.headline-track span {
  font-size: 5.0rem;
  font-weight: 100;
  letter-spacing: 0.03em;
  color: #222;
  padding-left: 100%; /* 初期位置を右端からにする */
  display: inline-block;
}

@keyframes scroll-reset {
  0% {
    transform: translateX(0);
  }
  80% {
    transform: translateX(-100%); /* 左端まで流す */
  }
  100% {
    transform: translateX(0); /* 瞬間的に戻る */
  }
}

@keyframes scrollText {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}


/* セクション本体：縦線つき、横線なし */
.section-content {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  border-left: 2px solid black;
  border-right: 2px solid black;
  padding: 20px;
  gap: 20px;
}

/* テキストカラム */
.text-stage {
  width: 48%;
  font-size: 1rem;
  line-height: 1.6;
  padding-right: 10px;
  /* 縦線で左右区切られているので、内部の線は削除 */
  border-right: none;
}

/* 画像カラム */
.img-stage img {
  width: 100%;
  max-width: 260px;
  display: block;
}

.floating-heart {
  position: fixed;
  width: 30px;
  z-index: 10;
  
}





/* フッター */
.cp-footer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 9999;
}

.cp-footer a {
  pointer-events: auto;
}

.cp-footer img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cp-footer a:hover img {
  animation: bounce-hover 0.5s ease;
}

@keyframes bounce-hover {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.1) translateY(-8px); }
  60%  { transform: scale(0.95) translateY(4px); }
  100% { transform: scale(1) translateY(0); }
}


/* 表示段階に応じて少しずつ出す（10段階） */
.cp-footer.reveal-1 a:nth-child(-n+1) img,
.cp-footer.reveal-2 a:nth-child(-n+2) img,
.cp-footer.reveal-3 a:nth-child(-n+3) img,
.cp-footer.reveal-4 a:nth-child(-n+4) img {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

@keyframes bounce {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.1) translateY(-10px); }
  60%  { transform: scale(0.95) translateY(5px); }
  100% { transform: scale(1) translateY(0); }
}

.cp-footer img.bounce {
  animation: bounce 0.5s ease;
}

@keyframes bounce-high {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.2) translateY(-40px); }
  60%  { transform: scale(0.9) translateY(20px); }
  100% { transform: scale(1) translateY(0); }
}

.cp-footer img.bounce-high {
  animation: bounce-high 0.8s ease;
}
@keyframes heart-wiggle {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.05) rotate(2deg); }
  50%  { transform: scale(1) rotate(0deg); }
  75%  { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.floating-heart:hover {
  animation: heart-wiggle 0.4s ease-in-out;
  cursor: pointer; filter: hue-rotate(5deg) saturate(5);
}

@keyframes clicked-wiggle {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.floating-heart.clicked-wiggle {
  animation: clicked-wiggle 0.35s ease;
}


/* === CP演出オーバーレイ === */
/* === CP演出オーバーレイ === */
#cp-intro-overlay {
  display: none; /* ← 最初は非表示 */
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: transparent; /* 背景は透明、白幕＆ピンクで演出 */
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* 表示開始 */
#cp-intro-overlay.active {
  display: flex;
}

/* === フェードアウトアニメーション === */
#cp-intro-overlay.fade-out {
  animation: fadeOutOverlay 2s ease forwards; /* ← 余韻を長めに */
}

@keyframes fadeOutOverlay {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* === 白幕（上から降りる） === */
#white-curtain {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 1700;   /* ピンクの下 */
  transition: top 2s ease-in-out; /* ← ゆっくり降りる */
  pointer-events: none;
}
#white-curtain.slide-in {
  top: 0;
}

/* === ピンク塗りつぶし（下から広がる） === */
#pink-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #ffe6f2; /* ← 淡い桜色に変更 */
  z-index: 1800;  /* 白幕の上 */
  transition: height 2s ease; /* ← ゆっくり広がる */
}
#pink-fill.show {
  height: 100%;
}

/* === ガイドテキスト === */
#cp-guide-text {
  position: absolute;
  bottom: 0.5%; /* 画面の下からちょっと上 */
  left: 50%;
  transform: translateX(-50%) scale(0.8); /* 初期は小さめ */
  font-size: 1.5rem;
  font-weight: 700;
  color: #444;
  background: transparent;   /* 枠・背景なし */
  padding: 0;
  opacity: 0;
  z-index: 2000;
  text-align: center;
  transition: opacity 0.8s ease;
}

/* 下に横線 */
#cp-guide-text::after {
  content: "";
  display: block;
  margin: 6px auto 0;
  width: 0;
  height: 3px;
  background: #ff99c8; /* 優しいピンクの横線 */
  border-radius: 2px;
  transition: width 0.6s ease 0.2s; /* テキストが出た後に伸びる */
}

/* 表示状態 */
#cp-guide-text.visible {
  opacity: 1;
  animation: bounceInRight 1s ease; /* 左→右にはねる */
  transform: translateX(-50%) scale(1);
}

#cp-guide-text.visible::after {
  width: 70%; /* 横線が伸びる */
}

/* === バウンドしながら左→右に入るアニメーション === */
@keyframes bounceInRight {
  0%   { transform: translateX(-150%) scale(0.8); opacity: 0; }
  60%  { transform: translateX(-40%) scale(1.05); opacity: 1; }
  80%  { transform: translateX(-48%) scale(0.95); }
  100% { transform: translateX(-50%) scale(1); }
}

/* === CPボタン === */
.cp-big-button {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1.5s ease, background 0.3s ease, color 0.3s ease;
  font-size: 3rem;
  font-weight: bold;
  background: #fff;
  border: 3px solid #ff99c8;
  border-radius: 999px;
  padding: 18px 36px;
  color: #ff77aa;
  text-decoration: none;
  z-index: 2000;
  position: relative;
  overflow: visible;
}

/* 出現時にバウッ＋光オーラ */
.cp-big-button.visible {
  opacity: 1;
  transform: scale(1);
  animation: buttonBounceIn 0.6s ease;
}

.cp-big-button.visible::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  background: rgba(255,182,193,0.5);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  animation: buttonGlow 2.5s ease-in-out infinite;
  animation-delay: 0.6s;
}

/* バウッ */
@keyframes buttonBounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.3); opacity: 1; }
  70%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

/* 光のオーラ */
@keyframes buttonGlow {
  0%   { transform: scale(0.8); opacity: 0.6; }
  50%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0.6; }
}

/* === ホバー時 === */
.cp-big-button:hover {
  background: #ff99c8; /* 背景ピンク */
  color: #fff;         /* 文字白 */
}

.cp-big-button:hover::after {
  animation-play-state: paused; /* オーラ止める */
  opacity: 0.6;
}

#cp-button-wrap {
  position: relative;
  display: inline-block;
}

#cp-button-wrap {
  position: relative;
  display: inline-block;
}

#cp-button-wrap {
  position: relative;
  display: inline-block;
}



/* === BL警告 === */
#bl-warning {
  text-align: center;
  opacity: 0;
  margin-top: 20px;
  z-index: 2000;
  font-size: 1.8rem;
  line-height: 1.6;
}

/* 表示時（親全体はすぐ表示） */
#bl-warning.visible {
  opacity: 1;
  transition: opacity 0.2s ease; /* 赤文字はすぐ表示 */
}

/* 赤いメイン警告 */
#bl-warning .main {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #e60033;
  margin-bottom: 10px;
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 白文字の補足 */
#bl-warning .sub {
  display: block;
  font-size: 1rem;
  color: #fff;
  background: rgba(0,0,0,0.4);
  padding: 10px 20px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 1.6s ease;
  transition-delay: 0.4s; /* 赤文字のあとに遅れて出る */
}

/* 表示時アニメーション */
#bl-warning.visible .main {
  transform: scale(1);
  opacity: 1;
}

#bl-warning.visible .sub {
  opacity: 1;
}

.spawned-heart {
  position: fixed;
  top: 100%;
  will-change: transform, opacity;
  opacity: 1;
  transition: transform 4s ease-out, opacity 4s ease-out;
  pointer-events: none;
  z-index: 2147483647 !important;
}

.stacked-heart {
  transition: transform 0.3s ease;
  opacity: 1;
}

.stacked-heart.fade-out {
  opacity: 0;
  transition: opacity 2s ease;
}


/* === CPリンク（追加直後の演出） === */
.header-nav .cp-link.added {
  background: #ff7ba9;
  color: #fff;
  animation: cpJump 0.9s ease; /* ← 名前を一致させる！ */
}

@keyframes cpJump {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.3) translateY(-20px); }
  50%  { transform: scale(0.9) translateY(0); }
  70%  { transform: scale(1.15) translateY(-10px); }
  100% { transform: scale(1) translateY(0); }
}



/* ===== 表紙オーバーレイ ===== */
#intro-overlay {
  position: fixed;
  inset: 0;
  background: #c6f1e0; /* 初期色（後でJSで変えられる） */
  z-index: 5000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 1;
  transition: opacity 1.8s ease;
}

#intro-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* 背景にイメージカラー */
.intro-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #c6f1e0, #ffdde1);
  z-index: 0;
}

/* コンテンツ全体 */
.intro-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #333;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* メインビジュアル */
.intro-main {
  width: clamp(250px, 50vw, 600px);
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 1.5s ease forwards 0.5s;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* キャラ2組 */
.intro-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 40px;
}

.intro-char {
  max-width: 280px;
  text-align: center;
  opacity: 0;
  animation: fadeUp 1.5s ease forwards;
}
.intro-char:nth-child(1) { animation-delay: 1.2s; }
.intro-char:nth-child(2) { animation-delay: 1.6s; }

.intro-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #000;
  margin-bottom: 12px;
}

.intro-text {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 auto;
}

/* スクロール案内 */
.scroll-hint {
  font-size: 1.2rem;
  color: #444;
  opacity: 0;
  animation: hintBlink 1.5s ease-in-out infinite alternate;
  animation-delay: 3s;
}
@keyframes hintBlink {
  from { opacity: 0.3; transform: translateY(0); }
  to { opacity: 1; transform: translateY(3px); }
}