@charset "UTF-8";
/* ---------------------------------------------
*   Custom Properties
--------------------------------------------- */
:root {
    --c-bg: #FBF7F0;
    --c-bg-2: #F4ECE0;
    --c-sheet: #FFFFFF;
    --c-sheet-2: #FBF6EF;
    --c-ink: #3A3028;
    --c-ink-2: #594C41;
    --c-mute: #74665A;
    --c-line: #E7DCCD;
    --c-line-2: #F0E7DB;
    --c-accent: #EF7D4A;
    --c-accent-ink: #B04A1E;
    --c-accent-deep: #8E3A16;
    --c-accent-soft: #FDEADC;
    --c-green: #4C8C63;
    --c-green-soft: #E3F0E6;
    --c-blue: #3F73A6;
    --c-blue-soft: #E4EEF7;
    --c-yellow: #F2B544;
    --c-yellow-soft: #FFF1CF;
    --c-dark: #3A3028;
    --c-dark-2: #4A3E34;
    --c-on-dark: #FBF7F0;
    --c-on-dark-mute: rgba(251, 247, 240, .74);
    --c-on-dark-line: rgba(251, 247, 240, .16);
    --c-on-dark-line-2: rgba(251, 247, 240, .4);
    --r-lg: 24px;
    --r-md: 16px;
    --r-sm: 10px;
    --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(74, 52, 32, .05), 0 4px 14px rgba(74, 52, 32, .05);
    --shadow: 0 2px 6px rgba(74, 52, 32, .04), 0 16px 40px rgba(74, 52, 32, .09);
    --ff-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    --ff-en: "Outfit", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    --ff-mono: var(--ff-en);
    --ff-root: var(--ff-sans);
    --fs-hero: clamp(2rem, 1.15rem + 3.6vw, 4.125rem);
    --fs-h1: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
    --fs-h2: clamp(1.4375rem, 1.1rem + 1.35vw, 2.25rem);
    --fs-h3: clamp(1.0625rem, .98rem + .4vw, 1.3125rem);
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-xs: .75rem;
    --fs-num-xl: clamp(2.5rem, 1.6rem + 3vw, 3.5rem);
    --fs-num-lg: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
    --container: 1240px;
    --gutter: clamp(16px, 4vw, 40px);
    --sp-section: clamp(72px, 9vw, 136px);
    --header-h: 72px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: .3s;
    --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 4.5 16.5 10 11 15.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 14 14 6M7.5 6H14v6.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5 8 14.5 16 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5 5 15' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media screen and (max-width: 767px) {
    :root {
        --header-h: 60px;
        --fs-body: .9375rem;
    }
}

/* ---------------------------------------------
*   Universal
--------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
    min-width: 320px;
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--ff-sans);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.95;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    text-wrap: pretty;
}
body.is-nav-open {
    overflow: hidden;
}

/* ---------------------------------------------
*   Typography
*   見出しは文節（<wbr>）と句読点でだけ改行させ、一文字だけ落ちる改行を防ぐ
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
    font-feature-settings: "palt";
}

p,
li,
dt,
dd,
th,
td,
label,
legend,
summary,
figcaption {
    line-break: strict;
    overflow-wrap: anywhere;
}

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

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
}

strong,
b {
    font-weight: 700;
}

small {
    font-size: inherit;
}

::-moz-selection {
    background-color: var(--c-yellow-soft);
    color: var(--c-ink);
}

::selection {
    background-color: var(--c-yellow-soft);
    color: var(--c-ink);
}

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

/* ---------------------------------------------
*   Utilities
--------------------------------------------- */
.u-nowrap {
    white-space: nowrap;
}

.u-num {
    font-feature-settings: "tnum", "lnum";
}

.u-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media screen and (min-width: 768px) {
    .u-sp-only {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .u-pc-only {
        display: none !important;
    }
}

/* ---------------------------------------------
*   Reveal（JS が有効なときだけ隠す）
--------------------------------------------- */
.is-js .js-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.is-js .js-reveal.is-inview {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .is-js .js-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* ---------------------------------------------
*   Skip link
--------------------------------------------- */
.u-skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    background-color: var(--c-ink);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
}
.u-skip:focus {
    transform: none;
}

/* ---------------------------------------------
*   Marker（見出しの一部をやわらかく強調）
--------------------------------------------- */
.u-marker {
    background: linear-gradient(transparent 62%, var(--c-yellow-soft) 62%, var(--c-yellow-soft) 92%, transparent 92%);
}