$main-color: #AB2932;
$white-color: #FFFFFF;
$black-color: #1A1A1A;

$pbutton-color:#E21450;
$wbutton-color:#FFCE02;

$addmission-01-color: #49A9D2;
$addmission-02-color: #DB7FA0;
$addmission-03-color: #EF7474;
$addmission-04-color: #56BFAB;
$addmission-05-color: #5FCEA6;
$addmission-06-color: #49A9D2;
$addmission-07-color: #57BFAA;
$addmission-08-color: #EF7474;
$addmission-09-color: #56BFAB;

$sub-bg-01-color: #EBF6FF;
$sub-bg-02-color: #FBF4F5;
$sub-bg-03-color: #FBF4F5;
$sub-bg-04-color: #EFF8F7;


body {
    letter-spacing: 2px;
}
// fonts 
.font-selif {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: normal;
}

.pc-display {
    display: block;
}
.sp-display {
    display: none;
}


// fonts color
.f-color-b {
    color: $addmission-01-color;
}
.f-color-p {
    color: $addmission-02-color;
}
.f-color-sp {
    color: $addmission-03-color;
}
.f-color-g {
    color: $addmission-04-color;
}

// bg color
.bg-color-b {
    background-color: $addmission-01-color;
}
.bg-color-p {
    background-color: $addmission-02-color;
}
.bg-color-sp {
    background-color: $addmission-03-color;
}
.bg-color-g {
    background-color: $addmission-04-color;
}

.bg-sub-color-b {
    background-color: $sub-bg-01-color;
}
.bg-sub-color-p {
    background-color: $sub-bg-02-color;
}
.bg-sub-color-sp {
    background-color: $sub-bg-03-color;
}
.bg-sub-color-g {
    background-color: $sub-bg-04-color;
}

// footer
.footer {
    width: 100%;
    height: auto;

    &-outer {
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        width: 100%;
        height: 120px;

        
        a {
            position: relative;
            display: block;
            width: fit-content;
            height: fit-content;
            color: $black-color;
            font-size: 15px;
            font-weight: bold;

            &::after {
                content: url(../img/Icon-feather-external-link.svg);
                position: relative;
                top: 0;
                right: -10px;
            }
        }
    }

    p {
        padding: 10px 0;
        width: 100%;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        color: $white-color;
        background-color: $main-color;
    }
}

/*
* フローティング
*/

.floating {
    display: block;
    width: 100%;
    opacity: 0;
    visibility: hidden;

    &-sp {
        display: none;
    }
    
    &-link {
        position: fixed;
        top: 20%;
        right: 0;
        padding: 50px 20px;
        width: fit-content;
        height: fit-content;
        border: 1px solid $white-color;
        background-color: #FFCE02;
        font-size: 20px;
        font-weight: 600;
        color: $black-color;
        writing-mode: vertical-rl;
        text-orientation: upright;
        transition: all 0.2s ease;
        &:hover {
            background-color: #1A1A1A;
            color: $white-color;
        }
    }
    .top_btn {
        position: fixed;
        bottom: 40px;
        right: 40px;
        width: 60px;
        height: 60px;
        border: 1px solid $white-color;
        background-color: #E21450;
        cursor: pointer;
        transition: all 0.2s ease;
        &:hover {
            background-color: #1A1A1A;
        }

        .topBtn__icon {
            width: 24px;
            height: 12px;
            &::after {
                content: "";
                width: 12px;
                height: 12px;
                border-right: 2px solid $white-color;
                border-bottom: 2px solid $white-color;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(-135deg);
            }
        }
    }
}

/*
*   タブレットサイズ
*/
@media (max-width: 1280px) {
    .footer-outer {
        justify-content: space-evenly;
    }
}

/*
*   スマートフォンサイズ
*/
@media (max-width: 768px) {
    .footer p {
        font-size: 11px;
        letter-spacing: 0.8px;
        height: 70px;
    }
    .footer-outer {
        padding: 40px 0;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        height: auto;    
    }

    /*
    * フローティング SP
    */
    .floating {
        display: none;
    }
    .floating-sp {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
    
        .floating-link {
            padding: unset;
            position: unset;
            writing-mode: unset;
            text-orientation: unset;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 60px;
            border: 1px solid $white-color;
            background-color: #FFCE02;
            font-size: 18px;
            font-weight: 600;
            color: $black-color;
        }
    
        .top_btn {
            position: relative;
            width: 60px;
            height: 60px;
            border: 1px solid $white-color;
            background-color: #E21450;
            cursor: pointer;
            .topBtn__icon {
                width: 24px;
                height: 12px;
                &::after {
                  content: "";
                  width: 12px;
                  height: 12px;
                  border-right: 2px solid $white-color;
                  border-bottom: 2px solid $white-color;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%) rotate(-135deg);
                }
            }
        }
    }
}

.is-active {
    opacity: 1;
    visibility: visible;
    transition: 0.4s;
}

@media (max-width: 480px) {
    .pc-display {
        display: none;
    }
    .sp-display {
        display: block;
    }
}