/* =====================================================================
適用ページ：全ページ
適用箇所：レイアウト（セクションブロック・コンテナーブロック）
目的    ：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;
    }
}

/* =====================================================================
適用ページ：全ページ
適用箇所：コンテンツエリア上部のページタイトル
目的    ：ページタイトルを非表示
===================================================================== */
.type-page .c-entry__header {
    display: none;
}

/* =====================================================================
適用ページ：全ページ
適用箇所：ヘッダー、ヘッダー上の帯
目的    ：レイアウト調整
===================================================================== */

/* ヘッダーのロゴ */
.c-site-branding .custom-logo {
    width: 250px;
    display: block;
}
@media screen and (max-width: 1023px) {
    .c-site-branding .custom-logo {
        margin-inline: auto;
    }
}

/* .c-site-branding a {
    color: #fff;
    font-size: 2.5rem;
} */

/* ヘッダーの色など */
.l-header {
    background-color: #00adee;
}

.p-drop-nav {
    background-color: #00adee;
}

.l-header .c-navbar__item > a {
    color: #fff;
}

/* ホバーの色調整 */
.l-header .c-navbar__item > a::after {
    bottom: 10px;
    background-color: #fff;
}

/* ハンバーガーボタンの色調整 */
.c-hamburger-btn__bar {
    background-color: #fff !important;
}

.l-header__content
    .c-row__col.u-invisible-lg-up
    .c-hamburger-btn[aria-expanded='true']
    > .c-hamburger-btn__bars
    > .c-hamburger-btn__bar:nth-of-type(2) {
    background-color: initial !important;
}

/* ハンバーガーボタン下の「MENU」の色調整 */
.c-hamburger-btn__label {
    color: #fff !important;
}

/* =====================================================================
適用ページ：トップと政策
適用箇所：フッター直前の「郷土愛を大切にする市民議」
目的    ：
===================================================================== */

.xcs-footer-message {
    justify-content: center !important;
    align-items: start !important;
    padding-inline: 10px !important;
    height: 800px !important;
}

@media screen and (max-width: 1023px) {
    .xcs-footer-message {
        height: 500px !important;
    }
}

.xcs-footer-message-p {
    color: #004ad3 !important;
    font-size: clamp(2rem, 6vw, 5rem) !important;
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-weight: 900 !important;
    text-shadow: 0px 0px 18px rgba(255, 255, 255, 0.7) !important;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.7),
        2px 0 6px rgba(255, 255, 255, 0.7),
        0 2px 6px rgba(255, 255, 255, 0.5) !important;
    overflow: visible !important;
}

@media screen and (max-width: 550px) {
    .xcs-footer-message-p {
        display: none;
    }
}

.xcs-footer-message-p--sp {
    display: none;
}

@media screen and (max-width: 550px) {
    .xcs-footer-message-p--sp {
        display: block;
    }
}

/* =====================================================================
適用ページ：全ページ
適用箇所：フッター
目的    ：フッターのSNS QR画像の中央合わせ（クラス名はウィジェットに直接追加している）
===================================================================== */

.xcs-fitcontent {
    width: fit-content;
    margin-inline: auto;
}

.c-sub-nav .c-navbar {
    justify-content: center;
}

.l-footer-widget-area {
    padding-bottom: 10px !important;
}

/* =====================================================================
適用ページ：トップページ
適用箇所：FV
目的    ：FV上のテキスト位置の調整
===================================================================== */

.xcs-fv {
    align-items: flex-end !important;
    padding-right: 20px;
    /* height: 70svh !important; */
}

/* テキストラップ */
.xcs-fv-textWrap {
    gap: 5px !important;
    padding-bottom: 30px !important;
}

/* 「春日部市議会議員」 */
.xcs-fv-label {
    color: #0c6ff0 !important;
    font-size: clamp(2.4rem, 6vw, 3.5rem) !important;
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.7),
        2px 0 6px rgba(255, 255, 255, 0.7),
        0 2px 6px rgba(255, 255, 255, 0.5) !important;
}

/* 「あべ雅一」 */
.xcs-fv-name {
    color: #244bb8 !important;
    font-size: clamp(5rem, 12vw, 7rem) !important;
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-weight: 900 !important;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.7),
        2px 0 6px rgba(255, 255, 255, 0.7),
        0 2px 6px rgba(255, 255, 255, 0.5) !important;
}

/* =====================================================================
適用ページ：トップページ
適用箇所：facebookページ埋め込み
目的    ：画面サイズによる出し分け（カスタムHTMLブロックはsnow monkey ediotr使えず
===================================================================== */

.xcs-facebook-sp {
    display: none;
    height: 400px !important;
}

@media screen and (max-width: 550px) {
    .xcs-facebook-pc {
        display: none;
    }
    .xcs-facebook-sp {
        display: block;
    }
}

/* =====================================================================
適用ページ：トップページ、活動実績ページ
適用箇所：「項目」ブロック
目的    ：「項目」＞「ブロックリンク」内の画像のサイズを合わせる
===================================================================== */

/* 「ブロックリンク」対応 */
.xcs-img-fitcover .smb-items__item__figure {
    aspect-ratio: 4 / 3 !important;
}

/* 「自由入力」内の「画像」に対応 */
.xcs-img-fitcover .smb-items__item--free figure {
    aspect-ratio: 4 / 3 !important;
}

.xcs-img-fitcover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* =====================================================================
適用ページ：活動実績ページ
適用箇所：各項目のタイトル
目的    ：「見出し」ブロックを100vwにする
===================================================================== */

.xcs-100vw {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%);
}

/* =====================================================================
適用ページ：活動実績ページ
適用箇所：「横並び」ブロックで並べた要素
目的    ：メディアクエリで横並び→縦並びに切り替える
===================================================================== */
@media screen and (max-width: 768px) {
    .xcs-fdrow {
        flex-direction: column !important;
    }
}

/* =====================================================================
適用ページ：政策ページ
適用箇所：
目的    ：
===================================================================== */

.xcs-bgimage {
    position: relative !important;
    background-image: url('../images/city.webp') !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: auto 70% !important;
    overflow: hidden !important;
}

.xcs-bgimage::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 20%,
        rgba(255, 255, 255, 0.6) 35%,
        rgba(255, 255, 255, 0.6) 55%,
        rgba(255, 255, 255, 1) 75%,
        rgba(255, 255, 255, 1) 100%
    ) !important;
}

/* 中のコンテンツを前面に */
.xcs-bgimage > * {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================
適用ページ：全ページ
目的    ：フェイドインアニメーションの制御

   XCS Fade In
   ※縦方向のフェイドインが発火→反映での動きが速い為、独自クラスで実装
   使い方１：jsフォルダにxcs-fadein.jsをいれる
   使い方２：my-snow-monkey.phpで読み込み
   使い方３：対象要素に class="xcs-fadein"
   オプション：--xcs-の4箇所で設定（→変数で反映される）
========================================= */

.xcs-fadein {
    --xcs-distance: 24px;
    --xcs-move-duration: 1200ms; /* 移動は長め */
    --xcs-fade-duration: 1800ms; /* 透明度は短め */
    --xcs-delay: 250ms;

    opacity: 0;
    transform: translate3d(0, var(--xcs-distance), 0);
    transition:
        opacity var(--xcs-fade-duration) linear var(--xcs-delay),
        transform var(--xcs-move-duration) cubic-bezier(0.22, 1, 0.36, 1)
            var(--xcs-delay);
    will-change: opacity, transform; /* ブラウザに対して変化を予告 */
}

.xcs-fadein.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.xcs-fadein.is-done {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* =====================================================================
適用ページ：全ページ
適用箇所：フッター
目的    ：フッターのSNS QR画像の中央合わせ（クラス名はウィジェットに直接追加している）
===================================================================== */

.facebook-page-embed {
    width: 100%;
    max-width: 550px;
    margin-inline: auto;
    overflow: hidden;
}

.facebook-page-embed iframe {
    display: block;
    margin-inline: auto;
    max-width: 100%;
}