/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：各セクションのタイトル
　目　的　　：フォントサイズ調整
===================================================================== */

.xcs-fontsize--h2 {
    font-size: 2.9rem;
}

@media (max-width: 640px) {
    .xcs-fontsize--h2 {
        font-size: 2rem !important;
    }
}


/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：ファーストビジュアル
　目　的　　：レイアウト調整
===================================================================== */

.xcs-fv-button {
    position: absolute;
    width: 24%;
    left: 11%;
    bottom: 12%;
    transition: transform 0.3s ease !important;
	cursor: pointer;
}

.xcs-fv-button:hover {
    transform: scale(1.05) !important;
}

@media (max-width: 640px) {
    .xcs-fv-button {
    position: absolute;
    width: calc(268 / 350 * 100%);
    left: 50%;
    transform: translateX(-50%);
    bottom: 5%;
	}
	.xcs-fv-button:hover {
    transform: translateX(-50%) scale(1) !important;
}
}


/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：「こんなお悩みはありませんか？」セクション
　目　的　　：吹き出し用の三角形追加
===================================================================== */

.xcs-nayami-fukidashi--right,
.xcs-nayami-fukidashi--left {
    position: relative;
}

.xcs-nayami-fukidashi--right::after,
.xcs-nayami-fukidashi--left::after {
    content: '';
    position: absolute;
    left: 85%;
    top: 98%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 18px solid #fff;
}

.xcs-nayami-fukidashi--left::after {
    left: 15%;
}

/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：「こんなお悩みはありませんか？」セクション
　目　的　　：画像と吹き出しのレイアウト調整、文字サイズ調整
===================================================================== */

.xcs-nayami-fukidashi .wp-block-snow-monkey-blocks-box:nth-child(2),
.xcs-nayami-fukidashi .wp-block-snow-monkey-blocks-box:nth-child(4) {
    margin-left: 80px !important;
}

@media (max-width: 781px) {
    .xcs-nayami {
        flex-direction: column-reverse !important;
    }

    .xcs-nayami-fukidashi {
        align-items: center !important;
    }

    .xcs-nayami-fukidashi .wp-block-snow-monkey-blocks-box:nth-child(2),
    .xcs-nayami-fukidashi .wp-block-snow-monkey-blocks-box:nth-child(4) {
        margin-left: 0px !important;
    }

    .xcs-nayami img {
        max-width: 30% !important;
        margin-inline: auto !important;
        margin-top: 50px;
    }

    /* 吹き出しの文字サイズ変更 */
    .xcs-nayami p {
        font-size: 1.125rem !important;
    }
}

/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：「障害年金とは」セクションの画像
　目　的　　：画像の位置調整
===================================================================== */

.xcs-nenkin {
    position: relative;
}

.xcs-nenkin figure {
    position: absolute;
    right: 0 !important;
    bottom: -220px !important;
    width: clamp(300px, 45vw, 495px) !important;
}

@media (max-width: 750px) {
    .xcs-nenkin figure {
        bottom: -160px !important;
    }
}

.xcs-nenkin-textWrap {
    width: 60% !important;
    margin-inline: 0 auto !important;
}

@media (max-width: 640px) {
    .xcs-nenkin-textWrap {
        width: 100% !important;
    }
}

/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：「障害年金とは」セクションのリスト
　目　的　　：リストマーカーの変更（丸を大きく、オレンジ色にする）
===================================================================== */

.xcs-nenkin-list {
    padding-left: 1.5em; /* 丸が大きくなっても詰まりにくいように */
}

.xcs-nenkin-list li {
    position: relative;
    list-style: none; /* 標準の黒丸を消す */
}

.xcs-nenkin-list li::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -1.2em;
    width: 0.75em; /* 丸を少し大きめに */
    height: 0.75em;
    background: #f76519; /* オレンジ色 */
    border-radius: 50%;
}

/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：「当事務所の障害年金サポート」セクション
　目　的　　：レイアウト調整
===================================================================== */

@media (max-width: 781px) {
    .xcs-support-imgWrap {
        flex-direction: column-reverse !important;
    }

    .xcs-support-imgWrap img {
        width: 60% !important;
        margin-inline: auto !important;
    }

    /* リストの数字画像 */
    .xcs-support-list img {
        width: 111px !important;
        min-width: 111px !important;
    }
}

/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：「当事務所が選ばれる理由」セクション
　目　的　　：タイポ調整
===================================================================== */

.xcs-choice-text {
    line-height: 2.62;
}

@media (max-width: 781px) {
    .xcs-choice-cards h3 {
        font-size: 1.5rem !important;
    }
}

/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：「まずはLINEでご相談ください！」セクション
　目　的　　：タイポ調整
===================================================================== */

.xcs-line-btn a {
    font-size: 1.56rem !important;
    letter-spacing: -0.045em !important;
}

@media (max-width: 1023px) {
    .xcs-line-btn a {
        font-size: 1.12rem !important;
    }
}

/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：複数箇所
　目　的　　：〇が重なったあしらいの配置
===================================================================== */

/* 「当事務所の障害年金サポート」セクションの上 */
.xcs-circle-deco--support {
    position: absolute;
    top: -220px;
    left: -10px;
    width: clamp(200px, 25vw, 260px) !important;
}
@media (max-width: 639px) {
    .xcs-circle-deco--support {
        display: none !important;
    }
}

/* 「当事務所の障害年金サポート」セクション内のリストの横 */
.xcs-circle-deco--supportList {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
    width: clamp(200px, 25vw, 260px) !important;
}
@media (max-width: 800px) {
    .xcs-circle-deco--supportList {
        display: none !important;
    }
}

/* 「当事務所が選ばれる理由」セクションの上 */
.xcs-circle-deco--choice {
    position: absolute;
    top: -160px;
    left: 50px;
    width: 160px;
}
@media (max-width: 640px) {
    .xcs-circle-deco--choice {
        top: -130px;
    }
}

/* 「お気軽にご相談ください！」セクションの上 */
.xcs-circle-deco--contact {
    position: absolute;
    top: -240px;
    right: 30px;
    width: clamp(140px, 25vw, 260px) !important;
}
@media (max-width: 800px) {
    .xcs-circle-deco--contact {
        top: -170px;
    }
}

/* =====================================================================
　適用ページ：フロントページ
　適用箇所　：複数箇所
　目　的　　：レスポンシブ時に折り返さない（改行させない）
===================================================================== */

.xcs-nowrap {
    white-space: nowrap !important;
}