/* 横スクロールを禁ずる */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; 
}

/* 基本設定 */
:root {
    --bg-color: #FEEA92;
    --item-bg: #FEEA92;
    --image-bg: #FFF2B9;
    --tab-inactive: #F9AD22;
    --tab-active: #F97F22;
    --shadow-light: #F9AD22; /* 明るい色（#F9AD22） */
    --shadow-dark: #DA9923; /* 暗い色（#DA9923） */
    --text-color: #333;
    --red-text: #E50012;
}

body {
    margin: 0;
    font-family: 'M PLUS 1p', 'Kosugi Maru', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    position: relative;
}

/* 背景の惑星のスタイル */
.planet-img {
    position: absolute;
    width: 300px; /* 惑星のサイズ */
    height: auto;
    z-index: -1; /* アイテムの背面に配置 */
    /* 上下の位置調整。アイテムの中央付近に置く場合 */
    top: 580px;
    transform: translateY(-50%);
    opacity: 0.8;
    transition: all 0.3s ease; /* 切り替わりを少し滑らかに */
}

/* 左側に配置するクラス */
.planet-left {
    left: -160px;
}

/* 右側に配置するクラス */
.planet-right {
    right: -160px;
}


.main-wrapper {
    height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

/* ヘッダー */
header {
    text-align: center;
    padding: 20px 0;
}

/* タイトルは他ページ（イベントなど）と同じ構成：文字の下に padding を作り、
   その余白の底に下線画像を position:absolute で固定する。
   これで文字の量に関わらず、常に一定の間隔になる */
.exhibition-title {
    font-family: "Fredoka";
    font-size: 40px;
    font-weight: normal;
    margin: 0;
    color: #000;
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}

.line1 {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    margin: 0;
}

.subtitle {
    margin: 10px 0 0;
    font-family: "Kiwi Maru";
    font-size: 20px;
    color: #000;
}

/* タブボタン */
.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px 0;
    /*ボタンを1段で最大3つに制限する指定 */
    max-width: 270px; /* ボタン3つ(240px) ＋ 隙間2つ(30px) の合計値 */
    margin: 0 auto;   /* 制限した幅のコンテナ自体を画面の中央に*/
}

.tab-btn {
    border: none;
    background-color: var(--tab-inactive);
    color: #fff;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-family: "Kiwi Maru";
    font-size: 26px;
    font-weight: normal;
    cursor: pointer;
    /* 【変更1】ボタンの影を右下（X軸4px, Y軸4px）に変更 */
    box-shadow: 2px 2px 0 #D6840C; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.tab-btn.active {
    background-color: var(--tab-active);
    /* 影の色はボタンの背景色に合わせず、選択前と同じ色で固定する
       （他ページのボタンと同じ考え方） */
    box-shadow: 4px 4px 0 #D6840C;
}

.tab-btn .star {
    position: absolute;
    top: -5px;
    right: -15px;
    font-size: 12px;
    color: #fff;
    display: none;
}

.tab-btn.active .star {
    display: block;
    /* 星付き丸ボタンの動きはサイト内で統一（タイムテーブル(イベント/音楽)の
       日付ボタンと同じ「ぷるん」アニメーション） */
    animation: purun 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ぷるんっアニメーション定義（タイムテーブル(イベント/音楽)と共通） */
@keyframes purun {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.05) rotate(10deg); /* 一度ぐっと大きく */
        opacity: 1;
    }
    75% {
        transform: scale(0.9) rotate(-5deg); /* 反動で少し縮む */
    }
    100% {
        transform: scale(1) rotate(0deg); /* 元のサイズに着地 */
        opacity: 1;
    }
}

/* クラス展示コンテナ */
#content-container {
    padding-top: 20px;
}

/* 各展示アイテム */
.exhibition-item {
    border: 2px solid transparent;
    border-radius: 15px;
    padding: 0px;
    margin-bottom: 0px;
    position: relative;
    /* z-index を明示して、このカード専用の重なり順の基準を作る。
       これがないと中の惑星画像(z-index:-1)がカードの裏ではなく
       ページ全体の最背面まで突き抜けてしまい、他の要素の下に隠れてしまう */
    z-index: 0;
    display: none;
    flex-direction: column;
    align-items: center;
}

.exhibition-item.show {
    display: flex; 
}

/* イメージボックスの影色 ＋ ボーダー色を交互に変更するやつ */
.exhibition-item.light-shadow .image-box {
    box-shadow: 5px 5px 0 var(--shadow-light);
    border-color: var(--shadow-light); /* 枠も明るい色に */
}

.exhibition-item.dark-shadow .image-box {
    box-shadow: 5px 5px 0 var(--shadow-dark);
    border-color: var(--shadow-dark); /* 枠も暗い色に */
}


/* タイトルボックスのボーダー色を交互に変更するやつ */
.exhibition-item.light-shadow .info-box {
    border-color: var(--shadow-light); /* 枠を明るい色に */
}

.exhibition-item.dark-shadow .info-box {
    border-color: var(--shadow-dark); /* 枠を暗い色に */
}

/* ラベル (1-1、2-1など) */
.label-container {
    position: relative;
    top: -30px;
    right: -120px;
    height:0px;
    border-radius: 5px;
    padding-top: 60px;
}

/*４，５年用*/
.label-container-hg {
    position: relative;
    top: -25px;
    right: -100px;
    height:0px;
    border-radius: 5px;
    padding-top: 60px;
}

.item-label {
    color: #F15B5C;
    font-family: "Bungee";
    font-size: 60px;
    font-weight: bold;
    -webkit-text-stroke: 10px #FFF;
    paint-order: stroke;
}

/*４，５年用*/
.item-label-high-grade {
    color: #F15B5C;
    font-family: "Bungee";
    font-size: 40px;
    font-weight: bold;
    -webkit-text-stroke: 10px #FFF;
    paint-order: stroke;
}

/* 画像プレースホルダー */
.image-box {
    width: 280px;
    height: 340px;
    margin-bottom:10px;
    background-color: var(--image-bg);
    /* もし画像自体の枠線も交互にしたい場合は、下の行を消して追加CSSを記述します */
    border: 3px solid var(--tab-active);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
 
}

.exhibition-image{
    width: 80%;
	height: 80%;
    object-fit: contain;
    object-position: center;
}

/* タイトルボックス */
.info-box {
    text-align: center;
    width: 260px;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 0px;
    font-family: "Kiwi Maru";
    font-weight: normal;
    background-color: var(--image-bg);
    border: 3px solid var(--tab-active);
    border-radius: 15px;
    cursor: pointer;
}

.info-box h2.title {
    font-size: clamp(14px, 6.5vw, 30px);
    margin: 0;
    color: #000;
    position: relative;
}

.info-box h2.title::after {
    content: '';
    display: block;
    width: 70%;
    height: 2px;
    background-color: #F9AD22;
    margin: 0 auto;
}

.class-name {
    font-size: 20px;
    color: #000;
    margin: 0;
}

/* TAP! アイコン */
.tap-icon {
    position: relative;
    top: -20px;
    right: -130px;
    height: 0px;
    padding: 0px;
    display: none; 
    z-index: 10;
}

/* 特別なセクション (4E) */
.special-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    text-align: center;
}

.dotted-line {
    width: 100%;
    height: 1px;
    border-top: 2px dotted #aaa;
    margin-bottom: 20px;
}

.special-label {
    background-color: var(--red-text);
    color: #fff;
    padding: 2px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 10px;
}

.grade-dept {
    color: #E50012;
    font-weight: bold;
    margin: 0;
}

.note, .final-note {
    font-size: 12px;
    max-width: 80%;
    margin: 5px auto;
}

.starred-image {
    position: relative;
}

.red-star {
    position: relative;
    top: 0px;
    right: -20px;
    width: 80px;
    height: 80px;
}

/* !これより下、ポップアップ用!*/

/* ポップアップの背景オーバーレイ。display:none による瞬間切り替えではなく、
   opacity/visibility を transition で滑らかに動かす（閉じるときもフェードアウトする） */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(120, 115, 80, 0.9);
    display: flex; /* 常にレイアウトには存在させ、表示/非表示は opacity 側で行う */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ポップアップ上部のテキスト */
.popup-header-text {
    color: #fff;
    text-align: center;
    font-family: "Kiwi Maru", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* ポップアップ本体。下から上へ、滑らかにフェードイン／アウトする
   （バザー・イベントページのポップアップも同じ動き・見た目に統一） */
.popup-content {
    background-color: var(--bg-color);
    border: 2px solid #333;
    border-radius: 20px;
    width: 360px;
    max-height: 100vh;
    padding: 25px 20px;
    position: relative;
    box-sizing: border-box;

    transform: translateY(28px);
    transition: transform 0.3s ease;
}

.popup-overlay.active .popup-content {
    transform: translateY(0);
}

/* 閉じるボタン (X) */
.popup-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    background: none;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* 丸とバツが一体になった画像なので、枠いっぱいに表示する */
.popup-close-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* ポップアップ内の画像ボックス */
.popup-image-box {
    background-color: var(--image-bg);
    border: 2px solid #D6840C;
    border-radius: 10px;
    margin-top: 40px;
    height: 300px;
    box-shadow: 6px 6px 0 #D6840C; /* 右下への影 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-placeholder {
    font-size: 40px;
    font-family: 'M PLUS 1p', sans-serif;
}

/* ポップアップ内のテキストボックス */
.popup-text-box {
    background-color: var(--image-bg);
    border: 2px solid #D6840C;
    border-radius: 10px;
    padding: 20px;
    margin-top: 25px;
    text-align: center;
    font-size: clamp(14px, 3vw, 20px);
    font-family: "Kiwi Maru", sans-serif;
}