@charset "utf-8";
/*
==================================================
タイトル
==================================================
TABLE OF CONTENTS
==================================================
Common(共通設定・ベーススタイル)
Header
Footer
共通要素（ボタン・見出し・レイアウトなど）
各セクションごとの要素
 - Main visual
 - Special
 - Announce
==================================================
*/
/* Common(共通設定・ベーススタイル) */
/* =============================================== */
:root {
    /* Colors */
    --color-base: #000000;
    --color-bg: #fff5e5;
    --color-primary: #009fe8;

    /* Typography */
    --font-base: YakuHanJP, "Noto Sans JP", sans-serif;
    --lh-base: 1.5;
    --size-base: 16px;

    /* Spacing & Layout */
    --padding-container: 0;
    --radius: 40px;
    --space-x: 50px;
    --width-container: 1250px;
}

body {
    color: var(--color-base);
    font-family: var(--font-base);
    margin-inline: auto;
    font-size: var(--size-base);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: var(--lh-base);
    line-break: strict;
    overflow-x: hidden;
    max-width: var(--width-container);
}

img {
    height: auto;
    max-width: 100%;
}

a {
    transition: all .2s;
}

a:hover {
    opacity: 0.8;
}

@media (min-width: 768px) and (max-width: 1250px) {
    html {
        overflow-x: hidden;
    }

    body {
        margin-inline: 0;
        width: var(--width-container);
    }
}

@media (max-width: 767px) {
    :root {
        font-size: calc(100vw / 430 * 16);

        --width-container: 100%;
        --radius: 24px;
        --space-x: 14px;
    }
}

/* ========================================
   Header
======================================== */

.header .container {
    padding: 23px 40px 22px;
}

.header-logo {
    display: block;
    width: 310px;
}

@media (max-width: 767px) {
    .header .container {
        padding: 16px 20px 12px;
    }

    .header-logo {
        width: 40%;
    }
}

/* ========================================
   Footer
======================================== */

.footer {
    background-color: var(--color-bg);
    color: #9b9390;
    font-size: 13px;
    line-height: 1.7;
    padding-top: 8px;
    padding-bottom: 12px;
    text-align: center;
}

@media (max-width: 767px) {
    .footer {
        font-size: 0.8125rem;
        padding-block: 10px;
    }

    .copyright {
        line-height: 1.4;
    }
}

/* ========================================
   共通要素（ボタン・見出し・レイアウトなど）
======================================== */

.container {
    margin-inline: auto;
    padding-inline: var(--padding-container);
    max-width: var(--width-container);
}

br.sp-only {
    display: none;
}

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

/* ========================================
   各セクションごとの要素
======================================== */

/* ----------------------------------------
   Main visual
---------------------------------------- */

.mv-text {
    padding-block: 35px;
}

.mv-heading {
    margin-inline: auto;
    width: 710px;
}

@media (max-width: 767px) {
    .mv-text {
        padding-block: 18px;
    }

    .mv-heading {
        width: 85.51%;
    }
}

/* ----------------------------------------
   Special
---------------------------------------- */

.special {
    background-color: var(--color-bg);
    padding: 34px var(--space-x);
}

.special-heading {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.special-date {
    margin-bottom: 20px;
    margin-inline: auto;
    width: 422px;
}

.special-hour {
    line-height: 1;
    margin-bottom: 40px;
    margin-inline: auto;
    width: 207px;
}

.special-list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.special-item {
    background-color: #ffffff;
    border: 1px solid #b0d0ed;
    border-radius: var(--radius);
    padding: 35px 25px;
}

@media (max-width: 767px) {
    .special {
        padding-top: 20px;
        padding-bottom: 28px;
    }

    .special-heading {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .special-date {
        margin-bottom: 10px;
        width: 68.48%;
    }

    .special-hour {
        margin-bottom: 20px;
        width: 30.84%;
    }

    .special-list {
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .special-item {
        padding: 24px 18px;
    }
}

/* ----------------------------------------
   Announce
---------------------------------------- */

.announce {
    background-color: var(--color-primary);
    padding-block: 4px;
}

.announce p {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 2.2;
    text-align: center;
}

@media (max-width: 767px) {
    .announce {
        padding-block: 12px;
    }

    .announce p {
        font-size: 1.25rem;
        line-height: 1.35;
    }
}