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

:root {
    /* フォント */
    --main-font: "Noto Sans JP", sans-serif;
    --sub-font: "Roboto", sans-serif;

    /* 色  */
    --main-color: #0089D4;
    --sub-color: #F7CF37;
    --point-color: #FDE950;
    --pinpoint-color: #EF7B1A;
    --text-color: #333;
    --sub-text-color: #fff;
}

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

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

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

/* 表示 */
.sp_in {
    display: block;
}

.sp-layout {
    display: block;
}

/* 非表示 */
.pc_in,
.pc-layout {
    display: none;
}

/* 共通ボタン */

[class*="ui_btn--"] {
    max-width: calc(654px / 2);
    height: calc(110px / 2);
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(32px / 2);
    font-weight: 600;
    line-height: calc(9 / 16);
    position: relative;
    margin: 0 auto;
}

[class*="ui_btn--"]::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    right: 5%;
    bottom: 0;
    margin: auto;
}

.ui_btn--blue {
    background: #0089D4;
    color: #fff;
}

.ui_btn--blue::after {
    background: url("../images/common/ui_btn-blue_icon.png") center / cover no-repeat;
}

.ui_btn--white {
    background: #fff;
    color: #0089D4;
}

.ui_btn--white::after {
    background: url("../images/common/ui_btn-white_icon.png") center / cover no-repeat;
}





@media (min-width:768px) {

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

    .sp_in {
        display: none;
    }

    .pc_in {
        display: block;
    }

    .sp-layout {
        display: none;
    }

    .pc-layout {
        display: block;
    }


    /* 共通ボタン */

    [class*="ui_btn--"] {
        max-width: 300px;
        width: 100%;
        height: 42px;
        font-size: 16px;
        line-height: calc(18 / 16);
        overflow: hidden;
        /* はみ出たスライド背景を隠す */
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    /* テキストをスライド背景より上に */
    [class*="ui_btn--"] span {
        position: relative;
        z-index: 3;
    }

    [class*="ui_btn--"]::after {
        width: 22px;
        height: 22px;
        z-index: 2;
        transition: opacity 0.3s ease, background 0.3s ease;
    }

    [class*="ui_btn--"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 140%;
        height: 100%;
        z-index: 2;
        transform: skewX(0) translateX(-100%);
        border-radius: 30px;
        transition: transform 0.55s ease;
    }

    /* ホバー時の動き（共通） */
    [class*="ui_btn--"]:hover::before {
        transform: skewX(0) translateX(0);
    }


    /* 青 */
    .ui_btn--blue {
        border: 1px solid #0089D4;
    }

    .ui_btn--blue::before {
        background-color: #fff;
    }

    .ui_btn--blue:hover {
        color: #0089D4;
        border: 1px solid #0089D4;
    }

    .ui_btn--blue:hover::after {
        background: url("../images/common/ui_btn-white_icon.png") center / cover no-repeat;
    }


    /* 白 */

    .ui_btn--white {
        box-shadow: inset 0 0 0 1px #fff;
        /* アウトライン対策ボーダーで実装 */
    }

    .ui_btn--white::before {
        background-color: #0089D4;
    }

    .ui_btn--white:hover {
        color: #fff;
        box-shadow: inset 0 0 0 1px #0089D4;
        /* アウトライン対策ボーダーで実装 */
    }

    .ui_btn--white:hover::after {
        background: url("../images/common/ui_btn-blue_icon.png") center / cover no-repeat;
    }
}