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

/* ヘッダーのロゴ */
.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: #3b4799;
}

.p-drop-nav {
    background-color: #3b4799;
}

.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;
}

/* ハンバーガーボタンの真ん中線を消す */
.c-hamburger-btn[aria-expanded='true'] .c-hamburger-btn__bar:nth-of-type(2) {
    display: none;
}

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

/* =====================================================================
適用ページ：プロフィールセクション
適用箇所：セクショントップの背景画像
目的    ：下にマスクを付ける
===================================================================== */

.xcs-image-mask {
    -webkit-mask-image: linear-gradient(to bottom, #333 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #333 80%, transparent 100%);
}

/* =====================================================================
適用ページ：「市民の期待を奪い続けた“静かな停滞“」セクション
適用箇所：
目的    ：下にマスクを付ける
===================================================================== */

.xcs-width-upper {
    width: 96vw !important; /* ビューポート全幅 */
    max-width: 1700px !important;
    padding-left: 10% !important;
    box-sizing: border-box !important;

    /* 親要素の制約を突破する */
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    gap: 15px !important;
}

.xcs-width-upper h2 {
    width: 40% !important;
    max-width: 40% !important;
}

.xcs-width-upper p {
    width: 58% !important;
    max-width: 58% !important;
}

@media screen and (max-width: 1280px) {
    .xcs-width-upper {
        padding-left: 0px !important;
        max-width: 900px !important;
    }
    .xcs-width-upper h2 {
        width: 95% !important;
        max-width: 95% !important;
    }

    .xcs-width-upper p {
        width: 95% !important;
        max-width: 95% !important;
    }
}

/* =====================================================================
適用ページ：プロフィールセクション
適用箇所：飛行機の画像
目的    ：絶対配置であしらいとして配置する
===================================================================== */

.xcs-image-absolute {
    position: relative; /* 親要素に必要 */
}

.xcs-image-absolute::before {
    content: '';
    position: absolute;
    background-image: url('../images/airplain.webp');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;

    /* 位置とサイズを調整 */
    width: 250px;
    aspect-ratio: 1 / 1;
    top: 10%;
    right: 0;
    z-index: -1;
}

@media screen and (max-width: 768px) {
    .xcs-image-absolute::before {
        width: 150px;
        top: -5%;
    }
}

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

.xcs-fv {
    height: 70svh !important;
    min-height: 700px !important;
}

@media screen and (max-width: 640px) {
    .xcs-fv {
        min-height: 530px !important;
        max-height: 700px !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%;
}



/* =====================================================================
適用ページ：トップページ
適用箇所：youtubeショート動画を囲むグループブロック
目的    ：ショート動画の幅を広げる
===================================================================== */

.xcs-width-100p{
	width: 100%;
}