@charset "utf-8";

:root {
    /* Colors */
    --bg: #fffcfa; /* 背景色 */
    --bg-rgb: 255, 252, 250;
    --bg-sub: #fff2f0;
    --pri: #f2a399; /* アクセントカラー：明 */
    --pri-d: #ba5e42; /* アクセントカラー：暗：強調文字等 */
    --txt: #3d2b1f; /* 文字色 */
    --txt-rgb: 61, 43, 31;

    /* Content Widths */
    --w-slim: 800px;
    --w-mid: 1000px;
    --w-main: 1260px;

    /* Breakpoints */
    --bp-sm: 500px;
    --bp-md: 768px;
    --bp-lg: 1024px;

    /* Font Size */
    --fz-base: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
    --fz-h1: calc(var(--fz-base) * 1.5);
    --fz-h2: calc(var(--fz-base) * 3.5);
    --fz-h3: calc(var(--fz-base) * 2);
    --fz-h4: calc(var(--fz-base) * 1.5);
    --fz-h5: calc(var(--fz-base) * 1.2);

    /* Font Family */
    --ff-base: "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Hiragino Sans", "Meiryo", sans-serif;
    --ff-base-n: 500;
    --ff-base-b: 700;
    --ff-serif: "Noto Serif JP", serif;

    /* Utilities */
    --radius-m: 8px; /* border-radius */
    --radius-l: 16px;
    --ts-speed: 0.3s; /* transition */
    --ts-all: all var(--ts-speed) ease;
    --tr-center: translate(-50%, -50%); /* transform */

    /* Layout */
    --header-h: clamp(50px, calc(50px + (100 - 50) * ((100vw - 500px) / (1024 - 500))), 100px);
    --header-h-min: min(var(--header-h), 60px);
    --lh-base: 1.8;
    --lh-tight: 1.4;
    --li-gap: 1.6rem;
    --z-header: 500; /* z-index */
}

* {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    font-family: var(--ff-base);
    font-weight: var(--ff-base-n);
    font-size: var(--fz-base);
    line-height: var(--lh-base);
    color: var(--txt);
    background: var(--bg);

    a {
        color: var(--txt);
        text-decoration: none;
    }
}

/* -------------------------------------------- */
/* Layout */
/* -------------------------------------------- */

.site-header .header__inner,
.breadcrumb,
body:not(.page) .content-wrapper,
.site-footer .footer__inner {
    width: calc(100% - 16px);
    max-width: var(--w-main);
    height: 100%;
    margin-inline: auto;

    @media screen and (min-width: 500px) {
        width: 94%;
    }
    @media screen and (min-width: 1024px) {
        width: 92%;
    }
    @media screen and (min-width: 1200px) {
        width: 90%;
    }
}
.breadcrumb {
    height: auto;
}

/* 1カラム固定ページ */
.page .entry-content {
    display: grid;
    grid-template-columns:
        [full-start] 1fr
        [inner-start] min(var(--w-main), 100% - 16px) [inner-end]
        1fr [full-end];
    @media screen and (min-width: 500px) {
        grid-template-columns:
            [full-start] 1fr
            [inner-start] min(var(--w-main), 94%) [inner-end]
            1fr [full-end];
    }
    @media screen and (min-width: 1024px) {
        grid-template-columns:
            [full-start] 1fr
            [inner-start] min(var(--w-main), 92%) [inner-end]
            1fr [full-end];
    }
    @media screen and (min-width: 1200px) {
        grid-template-columns:
            [full-start] 1fr
            [inner-start] min(var(--w-main), 90%) [inner-end]
            1fr [full-end];
    }

    > * {
        grid-column: inner;
    }

    > .has-bg {
        grid-column: full;
        background: var(--bg-sub);
        /* 中のコンテンツを中央に戻す */
        display: grid;
        grid-template-columns: inherit;
        > * {
            grid-column: inner;
        }
    }
}

/* -------------------------------------------- */
/* Header */
/* -------------------------------------------- */

.site-header {
    position: sticky;
    z-index: var(--z-header);
    top: 0;
    left: 0;
    container-type: inline-size;
    width: 100%;
    height: var(--header-h);
    text-decoration: none;
    background: var(--bg-sub);
    transition:
        transform 0.6s ease-out,
        height var(--ts-speed);
    &.is-scrolled {
        height: var(--header-h-min);
    }

    &.is-hidden {
        transform: translateY(-100%);
    }

    > .header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;

        > h1 {
            display: flex;
            align-items: center;
            height: 100%;
            background: none;

            a {
                display: flex;
                align-items: center;
                height: 100%;
            }

            img {
                width: auto;
                height: 76%;
            }
        }

        > .global-nav {
            display: none;
            height: 100%;
            > ul {
                display: flex;
                gap: 1px;
                height: 100%;
                font-size: clamp(0.75rem, 0.5vw + 0.65rem, 1rem);

                > li {
                    > a {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100%;
                        padding-inline: clamp(0.6em, 2.5vw - 1em, 1.2em);
                        color: var(--txt);
                        font-weight: var(--ff-base-b);
                        white-space: nowrap;

                        &::after {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            height: 4px;
                            content: "";
                            background: var(--pri);
                            transform: scale(0, 1);
                            transform-origin: center;
                            transition: var(--ts-all);
                        }
                        &:hover::after {
                            transform: scale(0.8, 1);
                        }
                    }
                }
            }

            @media screen and (min-width: 768px) {
                display: block;
            }
        }
    }

    > .menu-trigger {
        position: absolute;
        z-index: calc(var(--z-header) + 100);
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        aspect-ratio: 1.1 / 1;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;

        @media screen and (min-width: 768px) {
            display: none;
        }

        > span {
            position: relative;
            display: block;
            width: clamp(22px, 42%, 30px);
            height: 3px;
            content: "";
            background: var(--txt);
            border-radius: 2px;
            transform-origin: center;

            &::before,
            &::after {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                height: 3px;
                content: "";
                background: var(--txt);
                border-radius: 2px;
                transform-origin: center;
            }
            &::before {
                transform: translateY(clamp(-11px, calc(var(--header-h) / 6 * -1), -8px));
            }
            &::after {
                transform: translateY(clamp(8px, calc(var(--header-h) / 6), 11px));
            }
        }

        &.is-active {
            > span {
                animation: menu-trigger1-open 0.5s 1 forwards;
                &::before {
                    animation: menu-trigger2-open 0.5s 1 forwards;
                }
                &::after {
                    animation: menu-trigger3-open 0.5s 1 forwards;
                }
            }
        }
        &.is-close {
            > span {
                animation: menu-trigger1-close 0.5s 1 forwards;
                &::before {
                    animation: menu-trigger2-close 0.5s 1 forwards;
                }
                &::after {
                    animation: menu-trigger3-close 0.5s 1 forwards;
                }
            }
        }
    }

    > .sp-nav {
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100dvh;

        place-items: start center;

        background: rgba(var(--bg-rgb), 0.95);

        &.is-active {
            display: block;
        }

        > ul {
            padding-top: calc(var(--header-h) + 40px);
            width: 80%;
            max-width: 350px;
            margin-inline: auto;
        }
    }
}

/* -------------------------------------------- */
/* Footer */
/* -------------------------------------------- */

.site-footer {
    margin-top: 6rem;
    padding-block: 1.5em;
    text-align: center;
    font-size: calc(var(--fz-base) * 0.8);
    color: var(--bg);
    background: color-mix(in srgb, var(--pri-d), var(--pri) 30%);
}

/* -------------------------------------------- */
/* Breadcrumb */
/* -------------------------------------------- */

.breadcrumb {
    padding-block: 1em;
    font-size: calc(var(--fz-base) * 0.85);

    a {
        color: var(--pri-d);
        transition: var(--ts-all);
        &:hover {
            color: color-mix(in srgb, var(--pri), var(--pri-d) 30%);
        }
    }

    li {
        display: inline-block;

        &:nth-child(1) a::before {
            padding-inline: 0.2em 0.5em;
            content: "\f015";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }
    }
}

/* -------------------------------------------- */
/* Title */
/* -------------------------------------------- */

h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
.serif-text {
    font-family: var(--ff-serif);
    font-feature-settings: "palt";
}
h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
    line-height: var(--lh-tight);
}
h1 {
    font-size: var(--fz-h1);
    font-weight: 600;
}
h2,
.h2 {
    font-size: var(--fz-h2);
    font-weight: 600;
}
h3,
.h3 {
    font-size: var(--fz-h3);
    font-weight: 700;
}
h4,
.h4 {
    font-size: var(--fz-h4);
    font-weight: 800;
}
h5,
.h5 {
    font-size: var(--fz-h5);
    font-weight: 800;
}

/* -------------------------------------------- */
/* コンテンツの設定 */
/* -------------------------------------------- */

.entry-content {
    a {
        color: var(--pri-d);
        text-decoration: underline;
        text-underline-offset: 0.25em;
        transition: var(--ts-all);
        &:hover {
            color: color-mix(in srgb, var(--pri), var(--pri-d) 30%);
        }
    }
    > section {
        padding-block: 3rem;

        &:has(+ .has-bg) {
            padding-bottom: 5em;
        }

        &.has-bg + section {
            padding-top: 4.5rem;
        }

        > * + * {
            margin-top: 1.2rem;
        }

        > * + h3 {
            padding-top: 1.6rem;
        }
        > * + h4 {
            padding-top: 1.5rem;
        }
        > * + h5 {
            padding-top: 1.2rem;
        }
    }
    p {
        font-feature-settings: "palt";
    }
}

/* -------------------------------------------- */
/* リスト */
/* -------------------------------------------- */

.entry-content ul,
.entry-content ol {
    li {
        position: relative;
        line-height: var(--lh-tight);
    }
}

.entry-content ol {
    counter-reset: my-count;
    > li {
        counter-increment: my-count;
        padding-left: 2.5em;
        margin-bottom: var(--li-gap);

        &::before {
            content: counter(my-count);

            position: absolute;
            left: 0;
            top: -0.2em;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2em;
            height: 2em;
            font-size: 90%;
            font-weight: var(--ff-base-b);
            color: var(--bg);
            border-radius: 50%;
            background: var(--pri);
        }
    }
}

/* -------------------------------------------- */
/* コンテンツ */
/* -------------------------------------------- */

.w-slim,
.w-mid {
    width: 100%;
    margin-inline: auto;
}
.w-slim {
    max-width: var(--w-slim);
}
.w-mid {
    max-width: var(--w-mid);
}

/* --- Layout Utilities: Grid --- */
.l-grid {
    display: grid;
    align-items: start;
    gap: 30px;
    > * {
        margin-top: 0 !important;
    }
}
.l-grid2,
.l-grid3 {
    grid-template-columns: 1fr;
    gap: 20px;
}
@media screen and (min-width: 768px) {
    .l-grid2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .l-grid3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 左固定幅の2カラム */
:not(ul).l-split-auto,
.l-split-auto > li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5em;
    > * {
        margin-top: 0 !important;
    }

    @media screen and (min-width: 500px) {
        grid-template-columns: 10em 1fr;
        gap: 2rem;
        align-items: baseline;

        :is(.l-split-tight, .l-split-tight > li) & {
            grid-template-columns: 5em 1fr;
            gap: 1.5rem;
        }
    }
}
.l-split-auto > li {
    padding-block: 2rem;
    &:nth-child(1) {
        padding-top: 1.5rem;
    }
    &:last-child {
        padding-bottom: 0;
    }

    > ul > li {
        padding-block: 0.75rem;
        &:nth-child(1) {
            padding-top: 0.2rem;
        }
        &:last-child {
            padding-bottom: 0;
        }
    }
}

/* -------------------------------------------- */
/* animationの設定 */
/* -------------------------------------------- */

/* スマホ用メニューボタン */
@keyframes menu-trigger1-open {
    0%,
    50% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(45deg);
    }
}
@keyframes menu-trigger1-close {
    0% {
        transform: rotate(45deg);
    }
    50%,
    100% {
        transform: rotate(0);
    }
}
@keyframes menu-trigger2-open {
    0% {
        transform: translateY(clamp(-11px, calc(var(--header-h) / 6 * -1), -8px)) rotate(0);
    }
    50% {
        transform: translateY(0) rotate(0);
    }
    100% {
        transform: translateY(0) rotate(-90deg);
    }
}

@keyframes menu-trigger2-close {
    0% {
        transform: translateY(0) rotate(-90deg);
    }
    50% {
        transform: translateY(0) rotate(0);
    }
    100% {
        transform: translateY(clamp(-11px, calc(var(--header-h) / 6 * -1), -8px)) rotate(0);
    }
}
@keyframes menu-trigger3-open {
    0% {
        transform: translateY(clamp(8px, calc(var(--header-h) / 6), 11px));
        opacity: 1;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    50.1%,
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

@keyframes menu-trigger3-close {
    0%,
    49.9% {
        transform: translateY(0);
        opacity: 0;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(clamp(8px, calc(var(--header-h) / 6), 11px));
    }
}