/* =====================================================================
適用ページ：
適用箇所：ファーストビジュアル（背景と人物が、画像1枚になっており、文字入りのパターン）　例：あわのさん
目的    ：高さを制御する
===================================================================== */

/* 「カバー」ブロックに「.xcs-fv-bg」のクラス名を付ける：背景がゆっくり拡大 */
.xcs-fv-bg {
    transform: scale(1);
    animation: coverZoom 20s ease-out forwards;
    height: calc(100svh - 115px) !important;
}

@keyframes coverZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.11);
    }
}

/* :has() で親を逆引き。ゆっくり拡大させた際に、サイズ自体が変わらないように */
*:has(> .xcs-fv-bg) {
    overflow: hidden;
}

/* 人物の「画像」ブロックにこのクラス名 */
.xcs-fv-img {
    position: absolute;
    bottom: 0;
    right: 7vw;
    z-index: 100;
}

@media screen and (max-width: 599px) {
    .xcs-fv-img {
        right: auto;
        left: 56%;
        transform: translateX(-50%);
    }
}

.xcs-fv-img img {
    height: auto;
    width: auto;
    max-height: 70svh;
    max-width: 90vw;
}

@media screen and (max-width: 599px) {
    .xcs-fv-img img {
        width: 96vw; /* 明示的に幅を指定 */
        max-width: 96vw; /* 念のため上限も */
        height: auto; /* 縦横比を維持 */
        max-height: 85svh; /* 縦の上限 */
        object-fit: contain;
    }
}

/* 名前の「画像」ブロックにこのクラス名 */
.xcs-fv-text {
    position: absolute;
    top: 10vh;
    left: 7vw;
    z-index: 200;
}

@media screen and (max-width: 1300px) {
    .xcs-fv-text {
        top: auto;
        bottom: 10vh;
    }
}

@media screen and (max-width: 599px) {
    .xcs-fv-text {
        /* right: auto;
        left: 50%;
        transform: translateX(-50%); */
    }
}

.xcs-fv-text img {
    height: auto;
    width: auto;
    max-width: 50vw;
}

/* 以下は背景の赤色の三角形 */
.xcs-fv-bg {
    /* position: relative; */
    /* overflow: hidden; はみ出し防止 */
}

.xcs-fv-bg::before {

}

/* セクション内のコンテンツが三角形の上に来るよう z-index を設定 */
.xcs-fv-bg > * {
    position: relative;
    z-index: 1;
}

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

/* 「カバー」ブロックに「.xcs-fv-bg」のクラス名を付ける：背景がゆっくり拡大 */
.xcs-fv-bg--2 {
    transform: scale(1);
    animation: coverZoom 20s ease-out forwards;
    height: calc(100svh - 115px) !important;
}

@keyframes coverZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.11);
    }
}

/* :has() で親を逆引き。ゆっくり拡大させた際に、サイズ自体が変わらないように */
*:has(> .xcs-fv-bg--2) {
    overflow: hidden;
}

/* 人物の「画像」ブロックにこのクラス名 */
.xcs-fv-img--2 {
    position: absolute;
    bottom: 0;
    right: 7vw;
    z-index: 100;
}

@media screen and (max-width: 599px) {
    .xcs-fv-img--2 {
        right: auto;
        left: 56%;
        transform: translateX(-50%);
    }
}

.xcs-fv-img--2 img {
    height: auto;
    width: auto;
    max-height: 70svh;
    max-width: 90vw;
}

@media screen and (max-width: 599px) {
    .xcs-fv-img--2 img {
        width: 96vw; /* 明示的に幅を指定 */
        max-width: 96vw; /* 念のため上限も */
        height: auto; /* 縦横比を維持 */
        max-height: 85svh; /* 縦の上限 */
        object-fit: contain;
    }
}

/* 名前の「画像」ブロックにこのクラス名 */
.xcs-fv-text--2 {
    position: absolute;
    top: 10vh;
    left: 7vw;
    z-index: 200;
}

@media screen and (max-width: 1300px) {
    .xcs-fv-text--2 {
        top: auto;
        bottom: 10vh;
    }
}

@media screen and (max-width: 599px) {
    .xcs-fv-text--2 {
        /* right: auto;
        left: 50%;
        transform: translateX(-50%); */
    }
}

.xcs-fv-text--2 img {
    height: auto;
    width: auto;
    max-width: 50vw;
}