@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — イベントカラー変数（企画ごとに書き換え）
   base.css のデフォルト値をここで上書きするだけ。
   base.css 自体は触らない。

   WORKFLOW:
     1. :root の色変数を企画カラーに変更する
     2. 背景やフォントのカスタマイズはコメントアウトを外して追記
     3. 共通コンポーネントの変更は base.css へ
   ============================================================ */


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
   --color-main: #080b33;
   --color-sub1: #060b32cc;
   --color-sub2: #fdf33a;
   --color-sub3: #d60000;
   --color-sub4: #21307d;
   --color-sub5: #f5f4dd;
   --color-local: #fdf33a;
   --color-text: #ffffff;
   --color-button: #d60000;
   --font-family: 'M PLUS Rounded 1c', YakuHanJP, sans-serif;
}

a {
   color: var(--color-sub2) !important;
   text-decoration: underline;
}

/* ============================================================
   SECTION HEADING — テキストセクションタイトル
   ============================================================ */
.section-heading {
   width: 100%;
   text-align: center;
   padding: 0.22rem 0.20rem 0.18rem;
   background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub2) 100%);
   position: relative;
}

.section-heading::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 0.60rem;
   height: 0.05rem;
   background: var(--color-local);
   border-radius: 0.025rem;
}

.section-heading-text {
   color: #fff;
   font-size: 0.22rem;
   font-weight: 800;
   letter-spacing: 0.03em;
   line-height: 1.2;
   font-family: var(--font-family);
   text-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.2);
}


/* ============================================================
   BACKGROUND (任意)
   企画の背景色・パターンが必要な場合にコメントアウトを外す
   ============================================================ */
/* body { background-color: #f0e8ff; } */


/* ============================================================
   CONTENT-HOLDER BORDER VARIANTS (任意)
   イベントカラーの枠 + 影をつける場合
   ============================================================ */
/* .content-holder.sub1-border {
    border: 3px solid var(--color-sub1);
    box-shadow: 0.04rem 0.04rem 0 var(--color-sub1);
} */

.content-holder {
   border: 0.015rem solid var(--color-sub2);
   box-shadow: 0 0 0.1rem 0 var(--color-sub2);
   background: var(--color-sub1);
   margin-bottom: 0.55rem;
}


/* ============================================================
   STAMP / AR GRID (任意)
   ARフレーム数が異なる場合に列数を変更する
   ============================================================ */
/* .icon-grid-4 { grid-template-columns: repeat(3, 1fr); } */


/* ============================================================
   FONT OVERRIDE (任意)
   企画カスタムフォントが必要な場合 — info.inc.php の Google Font
   リンクと合わせて設定する
   ============================================================ */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap'); */
/* main { font-family: "Noto Serif JP", sans-serif; } */
/* .fontEvent { font-family: "Noto Serif JP", sans-serif !important; } */


/* ============================================================
   SECTION HEAD OVERLAP (任意)
   セクションタイトルを content-holder に被せるレイアウト
   ============================================================ */
/* .section-head-overlap {
    position: relative;
    z-index: 1;
    margin-bottom: -0.40rem;
}
.section-head-overlap + .content-holder {
    padding-top: 0.30rem;
} */


/* ============================================================
   TITLE-IMG INSIDE CONTENT-HOLDER
   各セクションの見出し画像 (title-img-container) を content-holder の中に入れて、
   上端から 0.50rem 飛び出させる
   ============================================================ */
.content-holder>.title-img-container {
   margin-top: -0.50rem;
   margin-bottom: 0.10rem;
   position: relative;
   z-index: 1;
   width:100%;
}


/* ============================================================
   WALLPAPER THUMBNAILS — 5枚 (上3枚 / 下2枚 各行中央寄せ)
   cols-5 のデフォルト (grid 5列1行) を上書きして、3+2 の2行レイアウトに
   ============================================================ */
.thumbnails-container.cols-5 {
   display: flex !important;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.10rem;
   padding: 0.10rem;
}
.thumbnails-container.cols-5 .thumbnail {
   width: calc(33.333% - 0.10rem);
   flex-shrink: 0;
}