/* ==========================================================
   Foundation
   ========================================================== */

/* Base font-size: 1rem = 1px at 1440px viewport
   max() で下限 0.75px を設定 → 1080px以下で縮小停止 */
html {
    font-size: max(0.75px, calc(100vw / 1440));
}

@font-face {
    font-family: "Baskerville Old Face";
    src: url("../fonts/baskerville-old-face.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* 英字は先頭の Baskerville、日本語はグリフが無い場合に Klee One へ */
    --font-body: "Baskerville Old Face", "Libre Baskerville", "Klee One", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-bask-old: "Baskerville Old Face", "Libre Baskerville", "Times New Roman", serif;

    /*
     * 共通フォントサイズ（値は rem 単位）
     * html の font-size により、1440px 幅付近では数値がそのまま px に近い見え方になる
     * 使い方: font-size: var(--fs-16);
     */
    --fs-8: 8rem;
    --fs-9: 9rem;
    --fs-10: 10rem;
    --fs-11: 11rem;
    --fs-12: 12rem;
    --fs-13: 13rem;
    --fs-14: 14rem;
    --fs-15: 15rem;
    --fs-16: 16rem;
    --fs-18: 18rem;
    --fs-20: 20rem;
    --fs-22: 22rem;
    --fs-24: 24rem;
    --fs-30: 30rem;
    --fs-32: 32rem;
    --fs-36: 36rem;
    --fs-40: 40rem;
    --fs-42: 42rem;
    --fs-60: 60rem;
    --fs-72: 72rem;
    /* px 固定が必要な箇所用 */
    --fs-fixed-12: 12px;
    --fs-fixed-13: 13px;
    --fs-fixed-14: 14px;
    --fs-fixed-16: 16px;
    --fs-fixed-18: 18px;
    --fs-fixed-22: 22px;
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-16);
    line-height: 1.8;
    color: #333;
}

a {
    color: inherit;
    text-decoration: none;
}

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

ul,
ol {
    list-style: none;
}

/* ==========================================================
   Layout
   ========================================================== */

.l-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    display: inline-block;
}

.l-main {
}

.l-footer {
}

/* ==========================================================
   Hamburger
   ========================================================== */

.p-hamburger {
}

.p-hamburger__button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6rem;
    width: 70rem;
    height: 70rem;
    padding: 10rem 20rem 6rem 0;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

.p-hamburger__label {
    font-size: var(--fs-10);
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #333;
    position: absolute;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.p-hamburger__label--open {
    display: none;
}

.p-hamburger__button[aria-expanded="true"] .p-hamburger__label--closed {
    display: none;
}

.p-hamburger__button[aria-expanded="true"] .p-hamburger__label--open {
    display: block;
    color: #fff;
}

.p-hamburger__line {
    display: block;
    width: 24rem;
    height: 2rem;
    background-color: #a3a3a3;
    margin-top: 2rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.p-hamburger__line:nth-of-type(2) {
    width: 34rem;
}
.p-hamburger__line:nth-of-type(3) {
    margin-bottom: 12rem;
}

.p-hamburger__button[aria-expanded="true"] {
    background-color: #c6cbd1;
}
.p-hamburger__button[aria-expanded="true"] .p-hamburger__line:nth-child(1) {
    transform: translateY(10rem) rotate(45deg);
    background-color: #fff;
}

.p-hamburger__button[aria-expanded="true"] .p-hamburger__line:nth-child(2) {
    opacity: 0;
}

.p-hamburger__button[aria-expanded="true"] .p-hamburger__line:nth-child(3) {
    transform: translateY(-10rem) rotate(-45deg);
    background-color: #fff;
}

.p-hamburger__drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 160rem 80rem 0 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 90;
    box-sizing: border-box;
}

.p-hamburger__drawer[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

/* ドロワー内レイアウト */
.p-hamburger__drawer-inner {
    display: flex;
    align-items: flex-start;
    gap: 60rem;
}

/* ブランド */
.p-hamburger__brand {
    flex-shrink: 0;
}

.p-hamburger__brand-logo {
    font-family: var(--font-bask-old);
    font-size: var(--fs-60);
    font-weight: 100;
    color: #333;
    letter-spacing: 0;
    line-height: 1;
}

.p-hamburger__brand-logo a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.p-hamburger__brand-logo a:hover {
    opacity: 0.6;
}

.p-hamburger__brand-tagline {
    font-size: var(--fs-11);
    color: #888;
    letter-spacing: 0.2em;
}

/* メインナビ */
.p-hamburger__nav-area {
    flex: 1;
}

.p-hamburger__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p-hamburger__list li + li {
    margin-top: 18rem;
}

.p-hamburger__list a {
    font-size: var(--fs-14);
    letter-spacing: 0.3em;
    color: #333;
    transition: opacity 0.3s ease;
}

.p-hamburger__list a:hover {
    opacity: 0.5;
}

/* セパレーター */
.p-hamburger__separator {
    width: 28rem;
    height: 1rem;
    background-color: #ccc;
    margin: 20rem 0;
}

/* サブナビ */
.p-hamburger__sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p-hamburger__sub-list li + li {
    margin-top: 14rem;
}

.p-hamburger__sub-list a {
    font-size: var(--fs-13);
    letter-spacing: 0.25em;
    color: #555;
    transition: opacity 0.3s ease;
}

.p-hamburger__sub-list a:hover {
    opacity: 0.5;
}

/* SNS */
.p-hamburger__sns-link {
    display: flex;
    align-items: center;
    gap: 8rem;
    font-size: var(--fs-13);
    letter-spacing: 0.1em;
    color: #555;
    transition: opacity 0.3s ease;
}

.p-hamburger__sns-link:hover {
    opacity: 0.5;
}

.p-hamburger__sns-icon {
    width: 16rem;
    height: 16rem;
    flex-shrink: 0;
}

/* ==========================================================
   Responsive: 768px以下
   ========================================================== */
@media (max-width: 768px) {
    html {
        font-size: calc(100vw / 375);
    }

    .p-hamburger__button {
        width: 55rem;
        height: 55rem;
        padding: 8rem 15rem 6rem 0;
    }

    .p-hamburger__line {
        width: 20rem;
    }

    .p-hamburger__line:nth-of-type(2) {
        width: 28rem;
    }

    .p-hamburger__label {
        font-size: var(--fs-8);
    }

    .p-hamburger__drawer {
        padding: 100rem 30rem 0 30rem;
    }

    /* SP専用改行 */
    .u-br-sp {
        display: inline !important;
    }
}

/* PC時はSP改行を非表示 */
.u-br-sp {
    display: none;
}