@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main:   #fefde7;   /* ページ背景色 */
    --color-sub1:   #3d6fae;   /* カラ松 */
    --color-sub2:   #c30119;   /* おそ松 */
    --color-sub3:   #63a546;   /* チョロ松 */
    --color-sub4:   #541f80;   /* 一松 */
    --color-sub5:   #f2d14c;   /* 十四松 */
    --color-local:  #c51a70;   /* トド松 */
    --color-text:   #5b4c43;   /* テキストカラー */
    --color-button: #c20000;   /* ボタンカラー */
    --font-family:  'Noto Sans JP', YakuHanJP, sans-serif;
}


/* ============================================================
   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 {
    border: 0px solid var(--color-sub1);
    box-shadow: unset;
}

/* ============================================================
   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 — bang-dream-yumemita と同じパターン
   タイトル画像を content-holder の上に 1/3 ほど被せる
   ============================================================ */
.section-head-overlap {
    position: relative;
    z-index: 1;
    margin-bottom: -0.70rem;
}

.section-head-overlap + .content-holder {
    padding-top: 0.60rem;
}

/* ============================================================
   TITLE IMG CONTAINER — base.css の 80% を上書きして content-holder と同幅に
   ============================================================ */
.title-img-container {
    width: 90%;
}

.title-img-container img {
    width: 100%;
    display: block;
}