@charset "utf-8";

/*
 * フッター
 * --------------------------------------------------
 */
.footer_wrap {
    background: #f0f0f0;
    padding: 6cqi;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: 100px;
}

.footer .col-45 {
    width: calc((100% - 100px) *0.45);
}

.footer .col-55 {
    width: calc((100% - 100px) *0.55);
}

.footer-logo {
    display: flex;
    width: 20cqi;
    height: auto;
    margin: 0 auto;
}

.footer-text {
    display: inline-block;
    width: 100%;
    font-size: 1.4cqi;
    line-height: 1.5;
    letter-spacing: 0px;
    margin-top: 5cqi;
    word-break: break-word;
}

.footer-lisence {
    display: inline-block;
    width: 100%;
    font-size: 1.4cqi;
    line-height: 1.5;
    letter-spacing: 0px;
    margin-top: 5cqi;
}

.fotter-address {
    margin-top: 30px;
}

.fotter-address:first-child {
    margin-top: 0px;
}

.fotter-address h3 {
    display: inline-block;
    width: 100%;
    font-size: 1.8cqi;
    line-height: 1;
    letter-spacing: 0px;
    font-weight: 700;
}

.fotter-address p {
    display: inline-block;
    padding: 0.5cqi 0px 1.5cqi 0px;
    width: 100%;
    font-size: 1.2cqi;
    line-height: 1.5;
    letter-spacing: 0px;
    font-weight: 500;
}

.footer-map {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    aspect-ratio: 32/9;
    border: 2px solid #ffffff;
}

.footer-map img {
    object-fit: cover;
}

@media (max-width: 767px) {
    .footer {
        padding: 0px;
        gap: 5cqi;
    }

    .footer-logo {
        width: 50cqi;
    }

    .footer-text {
        font-size: 3.5cqi;
        margin-top: 5cqi;
    }

    .footer-lisence {
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
        padding: 5cqi 0px;
        font-size: 3cqi;
        margin-top: 5cqi;
    }

    .fotter-address {
        margin-top: 10cqi;
        margin-bottom: 10cqi
    }

    .fotter-address h3 {
        font-size: 4.8cqi;
        font-weight: 700;
    }

    .fotter-address p {
        font-size: 3.5cqi;
        padding: 1cqi 0px 2cqi 0px;
    }

    .fotter-address:first-child {
        margin-top: 5cqi;
    }

    .fotter-address:last-child {
        margin-bottom: 25cqi;
    }

    .footer-map {
        aspect-ratio: 16/9;
    }
}

/*
 * フローティングメニュー
 * --------------------------------------------------
 */

.float-menu {
    transition: all 0.5s ease;
    display: flex;
    flex-wrap: wrap;
    width: 60px;
    height: auto;
    position: fixed;
    right: 0px;
    bottom: 0px;
    gap: 5px;
    container-type: inline-size;
    transform: translateY(200%);
}

.float-menu.active {
    transform: translateY(0);
}

.float-menu a {
    height: auto;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    writing-mode: vertical-rl;
    font-size: 1.4cqi;
    line-height: 1;
    font-weight: 400;
    color: #ffffff;
    padding: 2cqi 1.4cqi 3.4cqi 1.4cqi;
    align-items: center;
    justify-content: center;
    background: #FF505A;
    z-index: 10;
    position: relative;
    text-decoration: none;
    border-top-left-radius: 0.5cqi;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0.5cqi;
}

.float-menu a img {
    width: 1.6cqi;
    height: 1.6cqi;
    margin-bottom: 0.5cqi;
}

.float-menu a:after {
    position: absolute;
    bottom: 1.4cqi;
    content: "";
    display: flex;
    flex-wrap: wrap;
    width: 1.4cqi;
    height: 1.4cqi;
    background: url('/library/img/common/icon_arrow.svg')no-repeat;
    background-size: contain;
}

@media (max-width: 767px) {
    .float-menu {
        width: 100%;
        gap: 15px;
        padding: 15px;
        background: rgba(0, 0, 0, 0.5);
        right: auto;
        left: 0px;
    }

    .float-menu a {
        width: calc((100% - 15px) / 2);
        height: auto;
        writing-mode: horizontal-tb;
        font-size: 4cqi;
        border-top-left-radius: 2cqi;
        border-top-right-radius: 2cqi;
        border-bottom-right-radius: 2cqi;
        border-bottom-left-radius: 2cqi;
        padding: 4cqi 7cqi 4cqi 2.5cqi;
    }

    .float-menu a img {
        width: 4cqi;
        height: 4cqi;
        margin-bottom: auto;
        margin-right: 1cqi;
    }

    .float-menu a:after {
        bottom: auto;
        right: 2.5cqi;
        width: 3.5cqi;
        height: 3.5cqi;
    }
}