/* 独自クラス名 命名ルール
１）接頭辞 xcs- ：css装飾
２）接尾辞 xjs- ：js装飾
*/

/* ------------全ページ共通------------ */
/* ---------------------------------------------------------------------- */
/* 全固定ページのタイトル（コンテンツエリア内）を非表示 */
.type-page .c-entry__header {
    display: none;
}

/* 上部の帯（フックで挿入） */
.xcs-page-top-band {
    color: #fff;
    height: 18px;
    width: 100%;
    background: #dd3333;
}

@media screen and (max-width: 781px) {
    .xcs-page-top-band {
        display: none;
    }
}

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

.l-footer {
    padding-top: 50px;
}

/* フッターのSNSのリンク（クラス名はウィジェットにカラムブロックを直接追加している） */

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

.l-footer-widget-area {
    padding-block: 0 !important;
}

/* ------------トップページ------------ */
/* ---------------------------------------------------------------------- */

/* 背景の下部をフェイドさせる（自然に徐々に消す）：（セクション全体にxcs-topLinks） */
.xcs-topLinks {
    position: relative;
    overflow: hidden; /* はみ出し防止 */
}

/* 下部フェード */
.xcs-topLinks::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 120px; /* フェードの長さ（調整OK） */

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 70%,
        rgba(255, 255, 255, 1) 100%
    );

    pointer-events: none;
}

/* カード型のリンク：（セクション全体にxcs-topLinks） */
.xcs-topLinks .smb-panels__item__body {
    padding: 0;
}

.xcs-topLinks .wp-block-cover {
    position: relative;
}

.xcs-topLinks .wp-block-cover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96%;
    height: 96%;
    border: 2px solid #fff;
    pointer-events: none;
    z-index: 1000;
}

/* ------------政策------------ */
/* ---------------------------------------------------------------------- */
/* 各ボックスのタイトル（画像）を上に、はみ出させる */
.xcs-box {
    position: relative;
    border: 5px solid #333;
    box-shadow: 10px 10px 4px 0 rgba(0, 0, 0, 0.25);
}

.xcs-box .xcs-box-title {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 781px) {
    .xcs-box .xcs-box-title {
        top: -80px;
        width: 80%;
    }
}

@media screen and (max-width: 650px) {
    .xcs-box .xcs-box-title {
        top: -60px;
    }
}

@media screen and (max-width: 450px) {
    .xcs-box .xcs-box-title {
        top: -40px;
    }
}

@media screen and (max-width: 750px) {
    .xcs-box p {
        font-size: clamp(11px, 2.6vw, 20px) !important;
    }
}

@media screen and (max-width: 550px) {
    .xcs-box-container {
        padding-inline: 0 !important;
    }
    .xcs-box > .smb-section__inner > .c-container {
        padding-inline: 10px !important;
    }
}

/* サブタイトルのレイアウト調整 */
.xcs-nowrap {
    white-space: nowrap !important;
    padding-inline: 0 !important;
}
@media screen and (max-width: 450px) {
    .xcs-nowrap p {
        font-size: 1.5rem !important;
    }
}

/* 奥澤さんの画像の端をぼやかす */
.xcs-img-mask img {
    --xcs-mask-right-start: 97%;
    --xcs-mask-bottom-start: 97%;

    display: block;
    width: 100%;
    height: auto;

    -webkit-mask-image:
        linear-gradient(
            to right,
            #000 0,
            #000 var(--xcs-mask-right-start),
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            #000 0,
            #000 var(--xcs-mask-bottom-start),
            transparent 100%
        );
    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(
            to right,
            #000 0,
            #000 var(--xcs-mask-right-start),
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            #000 0,
            #000 var(--xcs-mask-bottom-start),
            transparent 100%
        );
    mask-composite: intersect;
}

/* =========================================
   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;
}