/* ==================================================
   Variables
================================================== */

:root {

    /* Colors */

    --color-bg: #f4f0e7;
    --color-bg-light: #f8f5ee;
    --color-bg-dark: #4a4a42;

    --color-text: #22231f;
    --color-text-soft: #5f615a;

    --color-line: rgba(34, 35, 31, 0.12);


    /* Header */

    --header-height: 72px;
    --header-height-small: 54px;


    /* Layout */

    --content-width: 1100px;
    --text-width: 680px;

    --side-padding: 24px;


    /* Fonts */

    --font-jp:
        "Shippori Mincho",
        serif;

    --font-en:
        "Cormorant Garamond",
        serif;


    /* Animation */

    --ease-main:
        cubic-bezier(.22, 1, .36, 1);

}


/* ==================================================
   Reset
================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;
    padding: 0;

    background: var(--color-bg);
    color: var(--color-text);

    font-family: var(--font-jp);

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

}


body.menu-open {

    overflow: hidden;

}


/* ==================================================
   Basic Elements
================================================== */

main {

    display: block;

}


section {

    position: relative;

}


img {

    display: block;

    width: 100%;
    height: auto;

}


a {

    color: inherit;
    text-decoration: none;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    color: inherit;

}


h1,
h2,
h3,
h4,
p {

    margin-top: 0;

}


button,
a {

    -webkit-tap-highlight-color: transparent;

}


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

.container {

    width: min(
        calc(100% - var(--side-padding) * 2),
        var(--content-width)
    );

    margin-inline: auto;

}


.container-small {

    width: min(
        calc(100% - var(--side-padding) * 2),
        var(--text-width)
    );

    margin-inline: auto;

}


.section {

    position: relative;

    padding:
        95px
        var(--side-padding);

}


.section-inner {

    width: min(
        100%,
        var(--content-width)
    );

    margin-inline: auto;

}


/* セクション見出し */

.section-heading {

    margin-bottom: 42px;

}


.section-number {

    display: block;

    margin-bottom: 9px;

    font-family: var(--font-en);

    font-size: 0.62rem;
    line-height: 1;

    letter-spacing: 0.22em;

    color: var(--color-text-soft);

}


.section-en {

    margin: 0 0 15px;

    font-family: var(--font-en);

    font-size: 0.67rem;
    line-height: 1;

    letter-spacing: 0.28em;

    color: var(--color-text-soft);

}


.section-heading h2 {

    margin: 0;

    font-size:
        clamp(1.25rem, 5vw, 1.8rem);

    font-weight: 400;

    line-height: 1.8;
    letter-spacing: 0.12em;

}


/* 共通本文 */

.section-text {

    font-size:
        clamp(0.74rem, 2.8vw, 0.86rem);

    line-height: 2.15;
    letter-spacing: 0.1em;

    color: var(--color-text-soft);

}


/* ==================================================
   PC
================================================== */

@media (min-width: 768px) {

    .section {

        padding:
            125px
            var(--side-padding);

    }


    .section-heading {

        margin-bottom: 55px;

    }


    .section-heading h2 {

        font-size: 1.75rem;

    }

}


/* ==================================================
   Utility
================================================== */

.sp-only {

    display: inline;

}


.pc-only {

    display: none;

}


/* ==================================================
   Scroll Reveal
================================================== */

.reveal {

    opacity: 0;

    transform: translateY(32px);

    transition:
        opacity 1s var(--ease-main),
        transform 1s var(--ease-main);

}


.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}


/* ==================================================
   Selection
================================================== */

::selection {

    color: var(--color-bg-light);

    background: var(--color-text);

}


/* ==================================================
   Tablet / PC
================================================== */

@media (min-width: 768px) {

    :root {

        --side-padding: 48px;
        --header-height: 80px;

    }


    .sp-only {

        display: none;

    }


    .pc-only {

        display: inline;

    }

}


/* ==================================================
   Large PC
================================================== */

@media (min-width: 1200px) {

    :root {

        --side-padding: 64px;

    }

}


/* ==================================================
   Reduced Motion
================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}