@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main: #443579;
    /* ページ背景色（紫） */
    --color-sub1: #806da4;
    /* メインカラー（濃い紫：見出し・枠・コンテンツ背景） */
    --color-sub2: #07c7b0;
    /* サブカラー（ティール：ボタングラデ始点） */
    --color-sub3: #028ab5;
    /* アクセント（ブルー：ボタングラデ終点） */
    --color-sub4: #233f7f;
    /* アクセント濃（ネイビー） */
    --color-sub5: #e8f1f8;
    /* 薄色背景 */
    --color-local: #f1d511;
    /* 差し色（黄色） */
    --color-text: #ffffff;
    /* テキストカラー（白） */
    --color-button: #06c4b1;
    /* ボタンカラー（単色フォールバック・titleBorder 等で使用） */
    --font-family: 'Noto Sans JP', YakuHanJP, sans-serif;
}


/* ============================================================
   SECTION HEADING — テキストセクションタイトル
   ============================================================ */
.section-heading {
    width: 100%;
    text-align: center;
    padding: 0.22rem 0.10rem 0.18rem;
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub4) 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);
}

/* 画像のセクションタイトル（白文字 PNG をページ背景の上にそのまま置く） */
.section-title-img {
    width: 100%;
    text-align: center;
    padding: 0.22rem 0.10rem 0.04rem;
}

.section-title-img img {
    display: block;
    /* base.css の .page-content img が display:block のため */
    margin: 0 auto;
    /* text-align だけでは中央寄せされないので margin auto で中央化 */
    width: 86%;
    max-width: 4.20rem;
    height: auto;
}


/* ============================================================
   CONTENT-HOLDER — 白文字を読ませるため濃い紫の面にする
   （base.css のデフォルトは白背景。--color-text が白のため上書き必須）
   ============================================================ */
.content-holder {
    background: linear-gradient(to right, #6276b1 0%, #a48dbb 100%);
    border: 0.01rem solid var(--color-white);
    border-radius: 0rem;
    box-shadow: unset;
}


.contents-title .titleBorder {
    display: inline-block;
    background-color: var(--color-sub4);
    color: #fff;
    padding: 0.06rem 0.20rem;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.20rem;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   BUTTONS — グラデーション 135deg / --color-sub2 → --color-sub3
   ============================================================ */
.iconButton.button-bg,
.loginRgisterButton.button-bg,
.button-bg {
    background: linear-gradient(135deg, var(--color-sub2) 0%, var(--color-sub3) 100%) !important;
}

/* disabled は base.css のグレーを維持（押せそうに見せない） */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg,
.loginRgisterButton[disabled] {
    background: linear-gradient(to right, gray, darkgray) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
}

.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: rgba(255, 255, 255, 0.4) !important;
}


/* ============================================================
   LINKS — 濃い紫の面でも読めるよう差し色（黄色）にする
   base.css の caution リンクは blue でコントラスト不足のため上書き
   ============================================================ */
ul.caution li a,
.content-holder a {
    color: var(--color-local);
}


/* ============================================================
   FONT UTILITY OVERRIDE — base.css のバグ修正 + caution の強制統一
   caution 系は本文 (event フォント) と視覚的に分離するため Noto Sans JP 固定。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}