/* ------------全ページ共通------------ */

/* ページヘッダーのマスク */
/* ---------------------------------------------------------------------- */
.c-page-header__bgimage::after {
    content: '';
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.1) 40%,
            rgba(255, 255, 255, 0) 70%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.6) 100%
        );
}

.c-page-header__title {
    color: #333;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-shadow:
        0 1px 0 #fff,
        0 0 8px rgba(0, 0, 0, 0.2);
    font-size: clamp(28px, 4vw, 48px);
}

.c-page-header__title::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    background: #222;
    margin-top: 12px;
}

/* ページヘッダーのマスク */
/* ---------------------------------------------------------------------- */
/* ==================================================
  Snow Monkey: Page Header 画像をゆっくりズーム
  - 外枠は固定
  - 画像だけ拡大（はみ出しは隠す）
  対象: .c-page-header__bgimage 内の img
================================================== */

/* 外枠でトリミング */
.c-page-header__bgimage {
    overflow: hidden;
}

/* 画像をズーム */
.c-page-header__bgimage > img {
    display: block;
    width: 100%;
    height: 100%;

    /* 画像の見え方を安定させる（cover相当） */
    object-fit: cover;
    object-position: center;

    /* アニメーション */
    transform: scale(1);
    transform-origin: center;
    animation: xcs-pageheader-img-zoom 15s ease-out forwards;

    /* 描画最適化 */
    will-change: transform;
}

/* ズーム量：必要なら 1.05〜1.15 で調整 */
@keyframes xcs-pageheader-img-zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

/* モバイルはズームしすぎ回避（任意） */
@media (max-width: 768px) {
    .c-page-header__bgimage > img {
        animation-duration: 10s;
    }
    @keyframes xcs-pageheader-img-zoom {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.1);
        }
    }
}

/* 動きを抑えたい設定に追従 */
@media (prefers-reduced-motion: reduce) {
    .c-page-header__bgimage > img {
        animation: none;
        transform: none;
    }
}

/* =========================================
ヘッダーメニュー「お申し込み」「受講者専用」だけボタン化
カスタマイザーの「ヘッダーコンテンツ」で、該当htmlを挿入。
また、script.jsで、ドロワーメニューにも複製しているので、そこも注意
========================================= */

/* ヘッダー右側のボタン2個を横並び */
.xcs-header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 共通で見た目を揃える */
.xcs-menu-apply,
.xcs-menu-member {
    margin-block: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.5s ease,
        color 0.5s ease,
        border-color 0.5s ease;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* 既存のお申し込みボタン */
.xcs-menu-apply {
    background: #f28c28;
    color: #fff;
    border: 1px solid transparent;
    padding: 0.5em 1em;
    border-radius: 999px;
}

.xcs-menu-apply:hover {
    color: #f28c28;
    background: #fff;
    border-color: #f28c28;
}

/* 受講者専用ページボタン */
.xcs-menu-member {
    background: #205083;
    color: #fff;
    position: relative;
    padding: 0.2em 1em;
    border: 1px solid #fff;
}

.xcs-menu-member:hover {
    background: #fff;
    color: #205083;
    border-color: #205083;
}

/* ドロップダウンメニュー用 */
.p-drop-nav-cta {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.p-drop-nav-cta .xcs-header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =========================================
   ドロワーメニュー最下部の受講者専用ボタン
========================================= */

/* ドロワー最下部のCTA全体 */
.xcs-drawer-cta-item {
    list-style: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.xcs-drawer-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ドロワー内では幅いっぱい */
.xcs-drawer-apply,
.xcs-drawer-member {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.9em 1em;
    border: 1px solid #fff;
    color: #ff6900 !important;
    background: #fff;
    text-decoration: none;
    margin-block: 5px;
    white-space: nowrap;
    font-weight: 700 !important;
    position: relative;
    border-radius: 999px;
}

.xcs-drawer-apply::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98%;
    height: 90%;
    border: 1px solid #ff6900;
    pointer-events: none;
    border-radius: 999px;
}

/* 受講者専用ボタンの見た目 */
.xcs-drawer-member {
    background: #eee;
    color: #004288 !important;
    border-radius: 0px;
}

.xcs-drawer-member::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98%;
    height: 90%;
    border: 1px solid #004288;
    pointer-events: none;
}

/* =========================================
   フッターのCTAボタン（snow monkey editorでPCは非表示（ヘッダーにあるから））
========================================= */
.xcs-footer-cta {
    padding: 30px 30px !important;
    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(242, 140, 40, 0.08) 0%,
            rgba(242, 140, 40, 0.04) 45%,
            rgba(242, 140, 40, 0.02) 70%,
            rgba(242, 140, 40, 0) 100%
        ),
        #ffffff;
}

/* フッターの上部余白をなくす（フッターCTA付くので） */
.l-footer {
    padding-top: 0px !important;
}

/* =========================================
   Snow Monkey フッターメニューに「｜」を入れる
========================================= */
.c-sub-nav .c-navbar > li + li::before {
    content: '｜';
    display: inline-block;
    color: inherit;
    opacity: 0.7;
}

/* 念のため、横並びを維持したい場合 */
.c-sub-nav .c-navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* =========================================
   Snow Monkey ヘッダーサブメニューを折り返しさせない
========================================= */

/* 各項目 */
.c-navbar .c-navbar__item a span {
    white-space: nowrap !important;
}

/* =========================================
   Snow Monkey ヘッダーサブメニューを折り返しさせない
========================================= */

/* サブメニュー全体 */
.c-navbar__submenu {
    width: max-content !important;
    min-width: 240px !important;
}

/* 各項目 */
.c-navbar__submenu .c-navbar__subitem {
    white-space: nowrap !important;
}

/* リンク文字 */
.c-navbar__submenu .c-navbar__subitem > a {
    white-space: nowrap !important;
    display: block;
}

/* =========================================
   ヘッダーロゴを、SP幅で大きく＆中心に
========================================= */

@media screen and (max-width: 1023px) {
    .c-site-branding .custom-logo {
        width: clamp(150px, 20vw, 200px) !important;
        display: block;
        /* margin-inline: auto; */
    }
}

/* =========================================
   ヘッダーロゴを、SP幅で大きく＆中心に
========================================= */
/* ドロワーの“親メニュー”は全部同じ見た目にする */
#drawer-nav .c-drawer__item > a {
    font-weight: 700;
    padding-top: 0.9em;
    padding-bottom: 0.9em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 区切り線（リンクではなく li 側に付けると安定） */
#drawer-nav .c-drawer__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* =========================================
   ヘッダーメニューの幅調整。1023pxのブレイクポイントまで収まるように
========================================= */

@media screen and (max-width: 1300px) {
    .c-navbar__item > a {
        padding-inline: 15px !important;
    }

    .c-navbar__item:last-child > a {
        padding-right: 5px !important;
    }

    .l-header__content > .l-1row-header > .c-container,
    .l-header__drop-nav > .p-drop-nav > .c-container {
        padding-inline: 15px !important;
    }

    .c-site-branding {
        min-width: 50px !important;
    }
}

@media screen and (max-width: 1230px) {
    .c-navbar__item > a {
        padding-inline: 10px !important;
    }
}

/* =========================================
   ヘッダーのhoverアニメーションの色変更
========================================= */

.p-global-nav .c-navbar__submenu .c-navbar__subitem {
    transition: background-color 0.3s ease !important;
}

.p-global-nav .c-navbar__submenu .c-navbar__subitem:hover {
    background-color: #ff4800 !important;
}

/* =========================================
   メニューの「はじめての方へ」
========================================= */

/* 対象メニュー項目 */
.xcs-begineer-header > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    flex-direction: row !important;

    /* ドロワーメニューの方がデフォルトでspace-betweenの為 */
    justify-content: start !important;
}

/* 若葉マーク */
.xcs-begineer-header > a::before {
    content: '';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-image: url('../images/beginner.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* =====================================================================
適用ページ：全ページ
適用箇所：レイアウト（セクションブロック・コンテナーブロック）
目的    ：SPでの左右余白を狭くする（WP管理画面でのデフォルト1.8remの上書き）
===================================================================== */

@media screen and (max-width: 768px) {
    /* セクションブロックのpaddingを修正。WP管理画面でno-paddingにしたものは除く */
    .smb-section__inner > .c-container:not(.c-container--no-padding) {
        padding-inline: 0.95rem !important;
    }
    /* コンテナーブロックも左右paddingを無くす */
    .wp-block-snow-monkey-blocks-container {
        padding-inline: 0 !important;
    }
    /* セクションブロック内のセクションブロックはpaddingを無くす */
    .smb-section__inner
        .smb-section__inner
        > .c-container:not(.c-container--no-padding) {
        padding-inline: 0rem !important;
    }
}