/* =====================================================================
適用ページ：全ページ
適用箇所：WP管理画面から指定された文字サイズを上書きする
目的    ：デフォルトは、レスポンシブによる変化率が小さすぎる為、SP時により小さくする
　　参考）2XL（1.6 → 1.5rem：25.6px → 24px）変更後は25.6px → 19.2px
===================================================================== */

/* M */
.has-sm-l-font-size {
    font-size: clamp(0.98rem, 0.95rem + 0.15vw, 1rem);
}

/* L */
.has-sm-l-font-size {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
}

/* XL */
.has-sm-xl-font-size {
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.33rem);
}

/* 2XL */
.has-sm-2-xl-font-size {
    font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
}

/* 3XL */
.has-sm-3-xl-font-size {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

/* 4XL */
.has-sm-4-xl-font-size {
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.66rem);
}

/* 5XL */
.has-sm-5-xl-font-size {
    font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem);
}

/* 6XL */
.has-sm-6-xl-font-size {
    font-size: clamp(3rem, 1rem + 7vw, 8rem);
}

/* =====================================================================
適用ページ：全ページ
適用箇所：vw単位のfont-sizeの最小・最大指定 ※WP管理画面の指定は打ち消されるので注意
目的    ：
===================================================================== */

.xcs-fzclamp-2 {
    font-size: clamp(1.4rem, 2vw, 2.4rem) !important;
}

.xcs-fzclamp-3 {
    font-size: clamp(1.6rem, 3vw, 3.6rem) !important;
}
.xcs-fzclamp-4 {
    font-size: clamp(1.8rem, 4vw, 4.8rem) !important;
}
.xcs-fzclamp-5 {
    font-size: clamp(2rem, 5vw, 6rem) !important;
}
.xcs-fzclamp-6 {
    font-size: clamp(2.2rem, 6vw, 7.2rem) !important;
}
.xcs-fzclamp-7 {
    font-size: clamp(2.4rem, 7vw, 8.4rem) !important;
}
.xcs-fzclamp-8 {
    font-size: clamp(2.6rem, 8vw, 9.7rem) !important;
}
.xcs-fzclamp-9 {
    font-size: clamp(2.8rem, 9vw, 10.8rem) !important;
}
.xcs-fzclamp-10 {
    font-size: clamp(3rem, 10vw, 12rem) !important;
}

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

@media screen and (max-width: 1280px) {
    .xcs-fd-row-1280 {
        flex-direction: column !important;
    }
}

@media screen and (max-width: 1024px) {
    .xcs-fd-row-1024 {
        flex-direction: column !important;
    }
}

@media screen and (max-width: 768px) {
    .xcs-fd-row-768 {
        flex-direction: column !important;
        align-items: center !important;
    }
}

@media screen and (max-width: 600px) {
    .xcs-fd-row-600 {
        flex-direction: column !important;
    }
}

/* =====================================================================
適用ページ：全ページ
適用箇所：指定した要素
目的    ：要素の幅を指定する
===================================================================== */

.xcs-width-30p {
    flex: 0 0 30% !important;
}

.xcs-width-40p {
    flex: 0 0 40% !important;
}

.xcs-width-45p {
    flex: 0 0 45% !important;
}

.xcs-width-50p {
    flex: 0 0 50% !important;
}
.xcs-width-60p {
    flex: 0 0 60% !important;
}

.xcs-maxwidth-300 {
    max-width: 300px !important;
}

.xcs-maxwidth-1200 {
    max-width: 1200px !important;
    margin-inline:auto;
}

/* =====================================================================
適用ページ：全ページ
適用箇所：
目的    ：その他ユーティリティ
===================================================================== */
.xcs-align-start {
    align-items: start !important;
}

/* 改行されるときに行間を狭めるためのクラス */
.xcs-line-height-14 {
    line-height: 1.4 !important;
}








/* =====================================================================
適用ページ：トップページのタイトルのフォントサイズ
適用箇所：
目的    ：
===================================================================== */
.xcs-fontsize-title-3-xl {
    font-size: clamp(1.2rem, 1.1rem + 1vw, 2rem) !important;
}

@media screen and (max-width: 600px) {
    .xcs-fontsize-title-3-xl {
        font-size: clamp(1.2rem, 1.1rem + 0.5vw, 2rem) !important;
    }
}



/* =====================================================================
適用ページ：政策ページの、タイトルフォント
適用箇所：
目的    ：
===================================================================== */

.xcs-font-white-outline {
    -webkit-text-stroke: 3px white;
    text-stroke: 3px white;
}

.xcs-font-white-shadow {
    /* text-shadow:
        2px 2px 0 white,
        -2px 2px 0 white,
        2px -2px 0 white,
        -2px -2px 0 white,
        0px 2px 0 white,
        0px -2px 0 white,
        2px 0px 0 white,
        -2px 0px 0 white; */

    text-shadow:
        3px 3px 0 white,
        -3px 3px 0 white,
        3px -3px 0 white,
        -3px -3px 0 white,
        0px 3px 0 white,
        0px -3px 0 white,
        3px 0px 0 white,
        -3px 0px 0 white,
        2px 3px 0 white,
        -2px 3px 0 white,
        2px -3px 0 white,
        -2px -3px 0 white,
        3px 2px 0 white,
        -3px 2px 0 white,
        3px -2px 0 white,
        -3px -2px 0 white;
}


.xcs-font-white-shadow-fv {
  text-shadow:
     5px  5px 0 white,
    -5px  5px 0 white,
     5px -5px 0 white,
    -5px -5px 0 white,
     0px  5px 0 white,
     0px -5px 0 white,
     5px  0px 0 white,
    -5px  0px 0 white,
     4px  5px 0 white,
    -4px  5px 0 white,
     4px -5px 0 white,
    -4px -5px 0 white,
     5px  4px 0 white,
    -5px  4px 0 white,
     5px -4px 0 white,
    -5px -4px 0 white,
     3px  5px 0 white,
    -3px  5px 0 white,
     3px -5px 0 white,
    -3px -5px 0 white,
     5px  3px 0 white,
    -5px  3px 0 white,
     5px -3px 0 white,
    -5px -3px 0 white;
}