.marker {
    background: linear-gradient(transparent 50%, #fff760 50%);
    font-weight: bold;
}

/* パンくずリスト共通スタイル */
.breadcrumb_section {
    margin: 24px 0 0 60px;

    .container {
        max-width: var(--content-width);
        margin: 0 auto;
    }

    .breadcrumb {
        font-size: calc(14 * var(--px));
        color: var(--text-color);
        line-height: 1.8em;
        letter-spacing: 0.05em;

        .separator {
            margin: 0 12px;
            color: var(--text-color);
        }

        .current {
            color: var(--text-color);
        }

        a {
            color: var(--text-color);

            transition: opacity 0.3s;

            &:hover {
                opacity: 0.7;
            }
        }
    }
}

header {
    background-color: #fff;
    padding: 1em;
    position: relative;
    top: 0;
    z-index: 200;
    .container {
        max-width: var(--content-width);
        margin-inline: auto;
        background-color: #fff;
    }
    .header_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .logo {
        margin: 0;
        font-size: 0;
        img {
            max-width: 260px;
        }
        a {
            &:hover {
                opacity: 0.8;
            }
        }
    }
    .contact_section {
        display: flex;
        align-items: center;
        gap: 2em;
    }
    address {
        font-style: normal;
        flex-direction: column;
        display: flex;
        gap: 0.3em;
        p {
            margin: 0;
        }
    }
    .tel {
        .text {
            font-size: calc(24 * var(--px));
            font-family: 'Lato', sans-serif;
            font-weight: 900;
        }
        a {
            display: flex;
            align-items: center;
            gap: 0.5em;
            text-decoration: none;
            color: var(--main-color);
            &:hover {
                opacity: 0.8;
            }
        }
        .image {
            img {
                width: 1em;
                height: 1em;
            }
        }
    }
    .hours {
        font-size: calc(14 * var(--px));
    }
    .contact {
        margin: 0;
        a {
            padding: 0.5em 4em;
            background-color: var(--accent-color);
            color: #fff;
            text-decoration: none;
            text-align: center;
            display: block;
            position: relative;
            &::after {
                position: absolute;
                top: 50%;
                right: 1em;
                transform: translateY(-50%);
                content: '';
                width: 0.8em;
                height: 0.8em;
                background-image: url('../images/header/arrow.svg');
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }
            &:hover {
                background-color: var(--accent-color-hover);
            }
        }
        img {
            position: absolute;
            width: 2em;
            height: 2em;
            top: 50%;
            left: 1em;
            transform: translateY(-50%);
        }
        span {
            font-size: calc(20 * var(--px));
            display: block;
            line-height: 1.4em;
        }
    }
    .header_menu {
        padding-left: 0;
        list-style-type: none;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 3em;
        padding-inline: 1em;
        margin-bottom: 0;
        li {
            font-weight: bold;
            font-size: calc(18 * var(--px));
        }
        & > li {
            position: relative;
            & > a {
                text-decoration: none;
                position: relative;
                padding: 1em;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5em;
                &:hover::before {
                    position: absolute;
                    content: '';
                    display: block;
                    width: 70%;
                    margin-left: auto;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    border-bottom: 2px solid var(--main-color);
                }
            }
            &.menu-item-has-children {
                & > a {
                    &::after {
                        content: '▼';
                        font-size: 50%;
                    }
                }
                &:hover .sub-menu {
                    display: flex;
                }
            }
        }
    }
    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #fff;
        list-style-type: none;
        padding-left: 0;
        padding: 1em 2em;
        flex-direction: column;
        gap: 1.5em;
        white-space: nowrap;
        display: none;
        a {
            text-decoration: none;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    .sp_menu {
        display: none;
    }
}

.admin-bar header.mini_header {
    top: 32px;
}

header.mini_header {
    padding: 0 1em;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-100%);
    transition: transform 0.3s;
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: var(--content-width);
        margin-inline: auto;
    }
    .logo {
        img {
            max-width: 100px;
        }
    }
    .header_menu {
        margin-top: 0;
    }
    &.scroll {
        transform: translateY(0);
    }
}

footer {
    margin-top: 5em;
    background-color: var(--main-color);
    padding: 6em 3em 1em;
    border-radius: 1em 1em 0 0;
    .logo {
        margin-top: 0;
        a {
            &:hover {
                opacity: 0.8;
            }
        }
    }
    .container {
        display: flex;
        justify-content: space-between;
    }
    .footer_menu_nav ul {
        list-style-type: none;
        padding-left: 0;
        a {
            color: #fff;
            text-decoration: none;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    .footer_menu {
        columns: 3; /* 3段組みにする */
        column-gap: 3rem; /* 段間の余白 */
        list-style: none;
        padding: 0;
        margin: 0;
        margin-right: 3em;
        & > li {
            break-inside: avoid; /* 子リストが段で分割されないようにする */
            margin-bottom: 0.6rem;
            margin-bottom: 1em;
            font-weight: bold;
        }
    }
    .sub-menu {
        margin-top: 1em;
        & > li {
            font-weight: normal;
            margin-bottom: 1em;
            &::before {
                content: '-';
                margin-right: 0.5em;
                color: #fff;
            }
        }
    }
    .copyright {
        border-top: 1px solid #fff;
        margin-top: 5em;
        padding-top: 2em;
        padding-inline: 2em;
        color: #fff;
        display: flex;
        justify-content: flex-end;
        line-height: 1.8em;
        font-size: calc(14 * var(--px));
        a {
            color: #fff;
        }
    }
    .page_top {
        position: fixed;
        bottom: 3em;
        right: 1em;
        margin: 0;
        cursor: pointer;
        opacity: 0;
        transition-property: opacity;
        transition-duration: 0.3s;
        pointer-events: none;
        span {
            width: 3em;
            height: 3em;
            background-color: var(--main-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #fff;
        }
        img {
            width: 50%;
            height: 50%;
        }
        &.show {
            opacity: 1;
            pointer-events: auto;
        }
    }
}

.section_title {
    display: flex;
    align-items: center;
    gap: 1em;
    position: relative;
    &:before {
        content: '';
        position: absolute;
        bottom: 1em;
        left: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(
            to right,
            #009ad2 50%,
            var(--main-color) 50%
        );
    }
    .jp {
        font-size: calc(40 * var(--px));
        color: var(--main-color);
    }
    .en {
        color: #c3c3ca;
        font-size: calc(24 * var(--px));
    }
}

.nav-links {
    margin-top: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    .page-numbers {
        display: inline-block;
        padding: 0.5em;
        border: 1px solid var(--text-color);
        text-decoration: none;
    }
    .current {
        font-weight: bold;
    }
}