@charset "utf-8";

@import url('./home.css');

@font-face {
    font-family: 'Noto Serif JP';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/NotoSerifJP-wght.woff2') format('woff2');
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/CormorantGaramond-wght.woff2') format('woff2');
}

/**
* Content Protection
*/
body {
    /* -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; */
}
input,
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
img {
    pointer-events: none;
}

/**
* Variable
*/
:root {
    /* Colors
    ------------------------ */
    --color-dark-green: #589e6e;
    --color-dark-green--rgb: 88 158 110;
    --color-green: #93be54;
    --color-light-green: #eaf5e9;
    --color-yellow: #f0d91f;
    --color-beige: #f5f4e9;
    --color-dark-beige: #edebdc;
    --color-light-beige: #fffef7;
    --color-light-blue: #e9f3f5;
    --color-ivory: #f7f5f0;
    --color-linen: #f0efea;
    --color-graphite: #62625e;
    --color-graphite--rgb: 98 98 94;
    --color-white: #ffffff;
    --color-white--rgb: 255 255 255;
    --color-black: #000;
    --color-black--rgb: 0 0 0;
    --color-dark-black: #1f1f1f;
    --color-grey: #f1f1f1;
    --color-dark-grey: #d5d5d5;
    --color-red: #ca4242;

    /* Spacing
    ------------------------ */
    --site-header-height: 5.25rem;
    --space-section: clamp(3.125rem, 2.024rem + 4.695vw, 6.25rem);
    @media print, screen and (width >= 768px) {
        --site-header-height: 6.75rem;
    }

    /* Font Size
    ------------------------ */
    --fSize--8: 0.5rem;
    --fSize--9: 0.562rem;
    --fSize--10: 0.625rem;
    --fSize--11: 0.687rem;
    --fSize--12: 0.75rem;
    --fSize--13: 0.812rem;
    --fSize--14: 0.875rem;
    --fSize--15: 0.9375rem;
    --fSize--16: 1rem;
    --fSize--17: 1.062rem;
    --fSize--18: 1.125rem;
    --fSize--20: 1.25rem;
    --fSize--22: 1.375rem;
    --fSize--23: 1.437rem;
    --fSize--24: 1.5rem;
    --fSize--25: 1.562rem;
    --fSize--26: 1.625rem;
    --fSize--28: 1.75rem;
    --fSize--30: 1.875rem;
    --fSize--32: 2rem;
    --fSize--35: 2.187rem;
    --fSize--38: 2.375rem;
    --fSize--40: 2.5rem;
    --fSize--50: 3.125rem;
    --fSize--60: 3.75rem;
    --fSize--200: 12.5rem;

    /* Font Family
    ------------------------ */
    --font-family-base: 'Noto Serif JP', serif;
    /* Font weight
    ------------------------ */
}

/**
* Web Font
*/
.font-family-heading {
    font-family: 'Noto Serif JP', serif;
    font-style: normal;
    font-weight: 100;
    font-optical-sizing: auto;
}
.font-family-heading-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: normal;
    font-weight: 100;
    font-optical-sizing: auto;
    opacity: .85;
}
html {
    scroll-behavior: smooth;
}
body {
    position: relative;
    font-family: var(--font-family-base);
    font-size: var(--fSize--16);
    /* font-feature-settings: 'pkna'; */
    color: var(--color-black);
    background-color: var(--color-white);
    /* line-height: 1.6;
  margin: 0;
  padding: 0; */
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* Line Spacing
------------------------ */
.text__body {
    font-family: var(--font-family-base);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 2;
    letter-spacing: 0.02em;
    color: var(--color-black);
}

.text__strong {
    font-weight: 600;
}

.text__body--p {
    & p {
        &:not(:last-child) {
            margin-bottom: 1rem;
        }
    }
}

/* Space
------------------------ */
.mb0 {
    margin-bottom: 0 !important;
}

.mb1 {
    margin-bottom: 1rem;
}

.mb2 {
    margin-bottom: 2rem;
}

/**
* Common Components
*/

.container-1200 {
    max-width: 75rem;
    margin-inline: auto;
    box-sizing: border-box;
}

/* Title
------------------------ */
.title__lead {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.125rem;
    font-weight: 100;
    line-height: 2;
    letter-spacing: 0.02em;
    color: var(--color-black);
}

.title__block {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem);
    align-items: center;
    text-align: center;
}

.title__set {
    max-width: 41.5625rem;
    margin-inline: auto;
}

.title__heading {
    margin: 0;
    /* font-size: clamp(1.75rem, 1.31rem + 1.88vw, 2.1875rem); */
    font-size: clamp(1.563rem, 1.342rem + 0.939vw, 2.188rem);
    line-height: 1.57143;
    color: var(--color-black);
}

.title__heading::after {
    display: block;
    width: 100px;
    height: 1px;
    margin: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem) auto 0;
    content: '';
    background-color: rgb(var(--color-black--rgb) / 55%);
}

.heading-set {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    margin-bottom: clamp(2rem, 1.296rem + 3vw, 4rem);
}

.heading-set::after {
    display: block;
    width: 3.125rem;
    height: 1px;
    margin-top: 1.875rem;
    content: '';
    background-color: rgb(var(--color-black--rgb) / 0.55);
}

.heading-set__eyebrow {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0;
    color: var(--color-black);
}

.heading-set__title {
    margin-top: 0.4375rem;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1.44;
    letter-spacing: 0;
    color: var(--color-black);
}

/* Anchor
------------------------ */
a {
    cursor: pointer;

    &:link,
    &:visited,
    &:hover {
        text-decoration: none;
        /* color: var(--cr--green-d); */
        outline: none;
        transition: all 0.3s ease;
    }

    &:hover,
    &:hover span,
    &:hover img {
        opacity: 0.75;
        transition: all 0.3s ease;
    }
    img {
        transition: all 0.3s ease;
    }
}

a *,
a::before,
a::after {
    cursor: pointer;
}

.anchor__button {
    display: inline-flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    padding: 0.9375rem 1.25rem;
    color: var(--color-black);
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #7b7b7b;
}

.anchor__button::after {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    content: '';
    pointer-events: none;
    background: url('../images/loop/arrow-right-broken.svg') center / contain no-repeat;
}

.text-link {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.text-link::after {
    display: inline-block;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    content: '';
    background: url('../images/loop/icon__arrow--right.svg') center / contain no-repeat;
}

.note-box {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-ivory);
    border-left: 3px solid rgb(var(--color-black--rgb) / 0.28);
}

.note-box p {
    margin: 0;
}

.note-box p + p {
    margin-top: 0.75rem;
}

/* List
------------------------ */
.list--circle,
.list--disc,
.list--square,
.list--decimal {
    margin: 0 0 0 1.25rem;
    padding: 0;
    line-height: 1.8;
    @media print, screen and (width >= 768px) {
        margin-left: 1.875rem;
    }
}

.list--circle {
    > li {
        list-style-type: circle;
    }
}

.list--disc {
    > li {
        list-style-type: disc;
    }
}

.list--square {
    > li {
        list-style-type: square;
    }
}

.list--decimal {
    > li {
        list-style-type: decimal;
    }
}

/* Header
------------------------ */
.header {
    width: 100%;
    max-width: 1200px;
    padding-inline: 20px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    @media print, screen and (width >= 768px) {
        /* padding-inline: 50px; */
    }
    .site-header {
        display: flex;
        align-items: center;
        position: fixed;
        z-index: 1000;
        left: 0;
        right: 0;
        width: min(100%, 1200px);
        padding-block: 1.25rem;
        padding-inline: 20px;
        margin-inline: auto;
        box-sizing: border-box;
        transition:
            padding-block 0.3s ease;
        @media print, screen and (width >= 768px) {
            justify-content: flex-start;
            padding-block: 2.5rem;
        }
        @media print, screen and (width >= 1200px) {
            padding-inline: 0px;
        }
        /* 1200pxとそれ以上 */
    }

    .site-header::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        z-index: -1;
        width: 100vw;
        content: '';
        background-color: rgb(var(--color-white--rgb) / 0);
        transform: translateX(-50%);
        transition: background-color 0.3s ease;
        pointer-events: none;
    }

    .site-header.site-header--scrolled {
        padding-block: 0.625rem;
        @media print, screen and (width >= 768px) {
            padding-block: 1.25rem;
        }
    }

    .site-header.site-header--scrolled::before {
        background-color: rgb(var(--color-graphite--rgb) / 0.4);
    }

    .site-header__brand {
        display: inline-flex;
        gap: 0.6875rem;
        align-items: center;
        color: var(--color-white);
        text-decoration: none;
    }

    .site-header__brand .logo__img {
        /* width: 28px; */
    }

    .site-header__brand-text,
    .site-header__nav-link {
        font-family: 'Cormorant Garamond', serif;
        font-optical-sizing: auto;
        font-style: normal;
        color: var(--color-white);
    }

    .site-header__brand-text {
        font-size: var(--fSize--18);
        font-weight: 100;
        line-height: 1;
        letter-spacing: 0.1em;
        white-space: nowrap;
        opacity: .7;
    }

    .site-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        margin-left: 0;
        padding: 1rem 1.25rem 1.5rem;
        background-color: rgb(var(--color-graphite--rgb) / 0.92);
        @media print, screen and (width >= 768px) {
            position: static;
            display: block;
            margin-left: auto;
            padding: 0;
            background-color: transparent;
        }
    }

    .site-header__toggle {
        position: relative;
        z-index: 2;
        display: inline-flex;
        flex-shrink: 0;
        flex-direction: column;
        gap: 0.625rem;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        margin-left: auto;
        background: transparent;
        border: 0;
        cursor: pointer;
        @media print, screen and (width >= 768px) {
            display: none;
        }
    }

    .site-header__toggle span {
        display: block;
        width: 1.5rem;
        height: 1px;
        background-color: var(--color-white);
        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }

    .site-header__nav-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
        margin: 0;
        padding: 0;
        list-style: none;
        @media print, screen and (width >= 768px) {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.75rem 1.9375rem;
            align-items: center;
            justify-content: flex-end;
        }
    }

    .site-header__nav-link {
        display: inline-block;
        font-size: var(--fSize--18);
        font-weight: 100;
        line-height: 1.3;
        letter-spacing: 0.02em;
        text-decoration: none;
        white-space: nowrap;
        @media print, screen and (width >= 768px) {
            font-size: var(--fSize--20);
        }
    }

    .site-header__nav-link[aria-current='page'] {
        color: var(--color-graphite);
        position: relative;
    }

    .site-header__nav-link[aria-current='page']::after {
        display: block;
        width: 20px;
        height: 1px;
        margin-top: 0.5rem;
        margin-inline: auto;
        content: '';
        background-color: currentColor;
    }

    .site-header.site-header--menu-open::before {
        background-color: rgb(var(--color-graphite--rgb) / 0.92);
    }

    .site-header.site-header--menu-open .site-header__toggle span:first-child {
        transform: translateY(0.34375rem) rotate(45deg);
    }

    .site-header.site-header--menu-open .site-header__toggle span:last-child {
        transform: translateY(-0.34375rem) rotate(-45deg);
    }

    .site-header.site-header--menu-open .site-header__nav {
        display: block;
    }
}

.page-subpage-plain-hero .site-header {
    background-color: transparent;
}

.page-subpage-plain-hero .site-header::before,
.page-subpage-plain-hero .site-header.site-header--scrolled::before {
    background-color: var(--color-graphite);
}

.page-blog .site-header__nav-link[aria-current='page'],
.single-post .site-header__nav-link[aria-current='page'],
.archive .site-header__nav-link[aria-current='page'] {
    color: var(--color-white);
}

/* Footer
------------------------ */
.footer {
    padding: clamp(1.5625rem, 1.012rem + 2.347vw, 3.125rem) 0 1.5rem;
    background-color: var(--color-graphite);
}

.footer__inner {
    max-width: 43.75rem;
    padding: 0 20px;
    margin: 0 auto;
    white-space: nowrap;
    @media print, screen and (width >= 768px) {
        padding: 0;
    }
}

.footer__grid {
    display: grid;
    gap: 2.5rem;
    @media print, screen and (width >= 768px) {
        grid-template-columns: 19rem 15.5625rem;
        align-items: start;
        -moz-column-gap: 9.25rem;
             column-gap: 9.25rem;
    }
}

.footer__nav {
    display: grid;
    gap: 2rem;
    @media print, screen and (width >= 768px) {
        grid-template-columns: 5.75rem 9.5rem;
        align-items: start;
        -moz-column-gap: 3.75rem;
             column-gap: 3.75rem;
    }
}

.footer__menu,
.footer__shipping-list,
.footer__sns {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__menu {
    display: grid;
    gap: 0.75rem;
}

.footer__menu a,
.footer__sns a {
    color: var(--color-white);
    text-decoration: none;
}

.footer__menu a,
.footer__shipping,
.footer__shipping-list a,
.footer__shipping-list li {
    color: var(--color-white);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 2.5;
    letter-spacing: 0.02em;
}

.footer__shipping-title {
    margin: 0 0 0.875rem;
    color: var(--color-white);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 2;
    letter-spacing: 0.02em;
}

.footer__shipping-list {
    padding-left: 1.25rem;
    list-style: disc;
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    @media print, screen and (width >= 768px) {
        display: grid;
        grid-template-columns: 19rem 15.5625rem;
        align-items: center;
        -moz-column-gap: 9.25rem;
             column-gap: 9.25rem;
        margin-top: 2.75rem;
    }
}

.footer__copy {
    margin: 0;
    color: var(--color-white);
    font-size: 0.875rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.footer__sns {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    @media print, screen and (width >= 768px) {
        justify-self: start;
    }
}

.footer__sns a {
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.05em;
}