/*---------
基本設定
----------*/

:root {
    --main-font: "Noto Sans JP", sans-serif;
    --sub-font: "Noto Serif JP", serif;
    --point-font: "Oswald", sans-serif;
}

/*---------
共通
----------*/
body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: #000000;
    font-family: var(--main-font);
}

img {
    display: block;
    width: 100%;
    height: auto;
}

.section_space {
    width: calc(100% - 40px);
    margin: 0 auto;
}

/*---------
表示切替
----------*/
.sp_in,
.sp-layout {
    display: block;
}

.pc_in,
.pc-layout {
    display: none;
}

.not_link a {
    pointer-events: none;
    color: #090909;
    text-decoration: none !important;
}

/*---------
共通ボタン（SP）
----------*/
.ui_more_btn {
    font-size: 16px;
    font-weight: bold;
    font-family: var(--point-font);
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.btn-text {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.more-arrow {
    width: 20px;
    height: 23px;
    background: url("../images/common/arrow-icon_black.png") center / contain no-repeat;
}

/*---------
SP: カラーバリエーション
----------*/
.ui_more_btn.black_btn {
    color: #000000;
}

.ui_more_btn.yellow_btn {
    color: #FBFB00;
}

.ui_more_btn.dark_yellow_btn {
    color: #9F9F00;
}

.yellow_btn .more-arrow {
    background-image: url("../images/common/arrow-icon_yellow.png");
}

.dark_yellow_btn .more-arrow {
    background-image: url("../images/common/arrow-icon_dark_yellow.png");
}

/*---------
PC
----------*/
@media (min-width: 768px) {

    .section_space {
        width: 100%;
        max-width: 1400px;
    }

    .sp_in,
    .sp-layout {
        display: none;
    }

    .pc_in,
    .pc-layout {
        display: block;
    }

    /*---------
    共通ボタン（PC）
    ----------*/

    /*---------
    ベース
    ----------*/
    .ui_more_btn {
        font-size: clamp(1.125rem, 0.875rem + 0.52vw, 1.5rem);
        max-width: fit-content;
    }

    .btn-text {
        text-decoration: none;
        position: relative;
        padding-bottom: 4px;
        transition: color 0.3s;
    }

    .btn-text::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 25%;
        height: 1px;
        background: currentColor;
        transition: width 0.3s ease;
    }

    /*---------
    矢印：疑似要素で通常/ホバー画像を重ねる
    ----------*/
    .more-arrow {
        width: 27px;
        height: 32px;
        background: none !important;
        position: relative;
        display: block;
        flex-shrink: 0;
        transform: translateZ(0);
    }

    .more-arrow::before,
    .more-arrow::after {
        content: "";
        position: absolute;
        inset: 0;
        background-position: center;
        background-size: 27px 32px;
        background-repeat: no-repeat;
    }

    /*---------
    カラーバリエーション
    ----------*/

    /*---------
    black_btn
    ----------*/

    .black_btn .more-arrow::before {
        background-image: url("../images/common/arrow-icon_black.png");
    }

    /*---------
    黄色
    ----------*/
    .ui_more_btn.yellow_btn {
        color: #fff;
    }

    .yellow_btn .more-arrow::before {
        background-image: url("../images/common/arrow-icon_white.png");
    }

    .yellow_btn .more-arrow::after {
        background-image: url("../images/common/arrow-icon_yellow.png");
        opacity: 0;
    }


    /*---------
    濃い黄色
    ----------*/
    .ui_more_btn.dark_yellow_btn {
        color: #000000;
    }

    .dark_yellow_btn .more-arrow::before {
        background-image: url("../images/common/arrow-icon_black.png");
    }

    .dark_yellow_btn .more-arrow::after {
        background-image: url("../images/common/arrow-icon_dark_yellow.png");
        opacity: 0;
    }

    /*---------
    ホバー（共通：線が伸びる）
    ----------*/
    .ui_more_btn:hover .btn-text::after {
        width: 100%;
    }

    /*---------
    ホバー（yellow_btnのみ：色変化＋矢印切替）
    ----------*/
    .ui_more_btn.yellow_btn:hover .btn-text {
        color: #FBFB00;
    }

    .ui_more_btn.yellow_btn:hover .more-arrow::before {
        opacity: 0;
    }

    .ui_more_btn.yellow_btn:hover .more-arrow::after {
        opacity: 1;
    }

    /*---------
    ホバー（dark_yellow_btn）
    ----------*/
    .ui_more_btn.dark_yellow_btn:hover .btn-text {
        color: #9F9F00;
    }

    .ui_more_btn.dark_yellow_btn:hover .more-arrow::before {
        opacity: 0;
    }

    .ui_more_btn.dark_yellow_btn:hover .more-arrow::after {
        opacity: 1;
    }
}