@charset "utf-8";

@import "style.css";
@import "color.css";
@import "font.css";
@import "line-height.css";
@import "margin.css";
@import "padding.css";

:root {
    --bs-font-sans-serif: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    --bs-font-serif: 'Noto Serif JP', serif;
    --bs-emphasis-color: #000;
    --bs-body-bg: #fff;
    --bs-body-width: 1366px;
    --bs-color-red: #BF3F00;
}

/*---------------------------------------------------
font-familyここから
----------------------------------------------------*/
body {
    font-family: var(--bs-font-sans-serif);
}

/*---------------------------------------------------
リセットCSSここから
----------------------------------------------------*/
header a,
main a,
footer a {
    color: #333 !important;
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

input[type="text"]:focus {
    outline: 0;
}

button:focus {
    outline: 0;
}

*:focus {
    outline: none;
}

.grecaptcha-badge {
    visibility: hidden;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    background-color: #fff;
    border: 1px solid #333 !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

input[type="text"]:focus {
    outline: 0;
}

input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
}

/*---------------------------------------------------
 header
----------------------------------------------------*/
html.is-fixed {
    height: 100%;
    overflow: hidden;
}

.header {
    z-index: 999;
}

.header-wrapper {
    height: 63px;
    background-color: rgba(255, 255, 255, 0.7);
}

.ham-box {
    width: 38px;
    height: 38px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #262424;
    border-radius: 50%;
}

.ham-bar,
.ham-bar::before,
.ham-bar::after {
    background: var(--bs-color-red);
    position: absolute;
    width: 18px;
    height: 2px;
    opacity: 1;
}

.ham-bar {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .25s .25s;
}

.ham-bar::before {
    content: "";
    top: -7px;
    -webkit-animation: btn07-bar01 .75s forwards;
    animation: btn07-bar01 .75s forwards;
}

.ham-bar::after {
    content: "";
    top: 7px;
    -webkit-animation: btn07-bar03 .75s forwards;
    animation: btn07-bar03 .75s forwards;
}

@keyframes btn07-bar01 {
    0% {
        transform: translateY(7px) rotate(45deg);
    }
    50% {
        transform: translateY(7px) rotate(0);
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes btn07-bar03 {
    0% {
        transform: translateY(-7px) rotate(-45deg);
    }
    50% {
        transform: translateY(-7px) rotate(0);
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

.ham-box.is-active .ham-bar {
    background: transparent;
}

.ham-box.is-active .ham-bar::before,
.ham-box.is-active .ham-bar::after {
    background: var(--bs-color-red);
}

.ham-box.is-active .ham-bar::before {
    -webkit-animation: active-btn07-bar01 .75s forwards;
    animation: active-btn07-bar01 .75s forwards;
}

@keyframes active-btn07-bar01 {
    0% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(7px) rotate(0);
    }
    100% {
        transform: translateY(7px) rotate(45deg);
    }
}

.ham-box.is-active .ham-bar::after {
    -webkit-animation: active-btn07-bar03 .75s forwards;
    animation: active-btn07-bar03 .75s forwards;
}

@keyframes active-btn07-bar03 {
    0% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-7px) rotate(0);
    }
    100% {
        transform: translateY(-7px) rotate(-45deg);
    }
}

.ham-drawer {
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    transition: .4s;
    opacity: 0;
    pointer-events: none;
}

.ham-drawer-bg {
    position: absolute;
    background-color: rgba(136, 135, 132, .6);
    content: "";
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 0;
}

.ham-drawer.is-active {
    opacity: 1;
    pointer-events: auto;
}

.ham-drawer-contents {
    position: relative;
    background-color: #fff;
    width: 100vw;
    height: 100svh;
    margin-left: auto;
    transform: translateX(40vw);
    transition: 0.5s;
}

.ham-drawer.is-active .ham-drawer-contents {
    transform: translateX(0);
}

.footer-menu-order:first-of-type {
    order: 3;
}

.footer-menu-order:nth-of-type(2) {
    order: 1;
}

.footer-menu-order:last-of-type {
    order: 2;
}

@media screen and (min-width: 992px) {
    .ham-box {
        width: 38px;
        height: 38px;
    }

    .ham-bar,
    .ham-bar::before,
    .ham-bar::after {
        height: 0.094em;
        opacity: 1;
    }

    .ham-bar::before {
        top: -7px;
    }

    .ham-bar::after {
        top: 7px;
    }

    .ham-drawer.is-active {
        padding-bottom: 12px;
    }

    .header-menu-scroll {
        height: 100%;
    }

    .ham-drawer-contents {
        width: 30vw;
        height: 100svh;
    }

    .footer-menu-order:first-of-type {
        order: 1;
    }

    .footer-menu-order:nth-of-type(2) {
        order: 2;
    }

    .footer-menu-order:last-of-type {
        order: 3;
    }
}

/*---------------------------------------------------
nav-menu
----------------------------------------------------*/
.nav-menu-link {
    position: relative;
    padding-left: 0.75em;
}

.nav-menu-link-center {
    margin-bottom: 25px;
    line-height: 1;
}

.nav-menu > .nav-menu-link::before,
.nav-menu > .nav-menu-link-center::before {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    top: 0.5em;
    left: 0;
    background-color: var(--bs-color-red);
    border-radius: 50%;
    transform: translateY(-3px);
}

.nav-sub-menu {
    position: relative;
    padding-left: 1.5em;
}

.nav-sub-menu::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 1px;
    background-color: #222;
    top: 0.5em;
    left: 0.5em;
}

.nav-sub-menu-link {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.nav-sub-menu-link::before {
    content: "";
    display: inline-block;
    border-top: 1px solid #333;
    width: 6px;
    margin-right: 10px;
    background-color: #333;
}

.header-icon-instagram {
    width: 22px;
    aspect-ratio: 22 / 22;
}

/*---------------------------------------------------
 footer
----------------------------------------------------*/
.footer-bg {
    background-color: #BF3F00;
}

@media screen and (min-width: 992px) {

}

/*---------------------------------------------------
 404
----------------------------------------------------*/


@media screen and (min-width: 992px) {

}