@charset "UTF-8";

:root{
    --font-color: #000000;
    --font-white: #ffffff;

    --menu-bg: #f2f2f2;
    --info-bg: #27292f;
    --about-bg: #efefef;

    --reserve-btn-color: #dd3f32;
}

html{ scroll-behavior: smooth; font-size: 62.5%; scroll-behavior: smooth;}
body{ color: var(--font-color); font-family: "Shippori Mincho", serif; font-size: 2rem; font-weight: 200;  font-feature-settings: "palt"; letter-spacing: 1.8px; line-height: 2.5;}

a{ color: var(--font-color); cursor: pointer; transition: .3s;}
img,
iframe{ width: 100%;}
video,
iframe{ height: 100%;}

.f-semibold{ font-weight: 600;}
.f-bold{ font-weight: bold;}
.en-uppercase{ text-transform: uppercase;}
.container{ max-width: 1000px; width: 100%; margin: 0 auto; padding: 0 20px;}
.flex{ display: flex; flex-wrap: wrap; justify-content: left;}
.word-break{word-break:auto-phrase;}
.nolink{ pointer-events: none; filter: brightness(0.3);}

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

.mt-60{ margin-top: 6rem;}

/* fade-in */
.inView { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease;}
.inView.is-view { opacity: 1; transform: translateY(0);}