/* =========================================================
   RESET / BASE
========================================================= */

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

html {
    margin: 0;
    padding: 0;

    font-size: 62.5%;

    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    overflow-x: hidden;

    color: #222;
    background: #f7f5f0;

    font-family:
        "shippori-mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Yu Mincho",
        "MS PMincho",
        serif;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;

    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.is-menu-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dt,
dd,
figure {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: 400;
}

ul,
ol {
    list-style: none;
}

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

    transition: opacity 0.25s ease;
}

a:hover {
    opacity: 0.65;
}

button {
    margin: 0;
    padding: 0;

    border: 0;

    color: inherit;
    background: none;

    font: inherit;
}

img {
    display: block;

    width: 100%;
    height: auto;
}

.l-container {
    width: 100%;

    overflow-x: clip;
}


/* =========================================================
   CONTENT WIDTH
========================================================= */

.l-content {
    width: 100%;

    padding: 0 45px;
}

.l-content2 {
    width: calc(100% - 90px);
    max-width: 1180px;

    margin: 0 auto;
}


/* =========================================================
   COMMON PAGE TYPOGRAPHY
   下層ページ共通
========================================================= */

.c-page-title {
    margin: 0;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.c-page-heading {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.08em;
}

.c-page-text {
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 0.07em;
}

.c-page-note {
    font-size: 1.2rem;
    line-height: 1.9;
    letter-spacing: 0.06em;
}


/* =========================================================
   FONT FAMILY
========================================================= */

.c-section-label,
.c-title02 h2,
.c-title03,
.c-course-card h3,
.p-therapist__content h3,
.c-menu-button__text,
.c-header__reserve,
.c-nav__primary a,
.c-nav__secondary a,
.c-mainvisual__news-label,
.c-mainvisual__scroll,
.c-btn01,
.c-title02__number,
.c-course-card__number,
.p-therapist__role,
.c-post-card time,
.c-news-list__item time,
.c-image-placeholder span {
    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;
}


/* =========================================================
   TYPOGRAPHY
   BRAND SITE BASE
========================================================= */

.c-section-label {
    margin-bottom: 55px;

    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.08em;
}


/* BRAND: 24px */

.c-title01 {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.58;
    letter-spacing: 0.06em;
}


/* BRAND: TITLE 02 */

.c-title02 {
    display: flex;
    align-items: flex-start;

    gap: 25px;
}

.c-title02__number {
    position: relative;

    min-width: 28px;

    padding-bottom: 9px;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

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

    text-align: center;
}

.c-title02__number::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 10px;
    height: 1px;

    background: #222;

    transform: translateX(-50%);
}

.c-title02 h2 {
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.c-title02__jp {
    display: block;

    margin-top: 13px;

    color: #5f5e5c;

    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 0.07em;
}


/* BRAND: 26px */

.c-title03 {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1.58;
    letter-spacing: 0.05em;
}


/* BRAND: 16px */

.c-text01 {
    font-size: 1.6rem;
    line-height: 2;
    letter-spacing: 0.04em;
}


/* BRAND: 15px */

.c-text02 {
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.035em;
}


/* =========================================================
   BUTTONS
========================================================= */

.c-btn01 {
    display: inline-flex;
    align-items: center;

    gap: 22px;

    margin-top: 35px;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 1.4rem;
}

.c-btn01 > span {
    position: relative;

    display: block;

    width: 65px;
    height: 1px;

    background: #222;
}

.c-btn01 > span::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;

    width: 10px;
    height: 1px;

    background: #222;

    transform: rotate(25deg);
    transform-origin: right bottom;
}

.c-btn02 {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 220px;
    height: 56px;

    padding: 0 35px;

    border: 1px solid #5f5e5c;
    border-radius: 40px;

    font-size: 1.4rem;
    letter-spacing: 0.05em;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.c-btn02:hover {
    opacity: 1;

    color: #fff;
    background: #222;
}


/* =========================================================
   FADE
========================================================= */

.js-fade {
    opacity: 0;

    transform: translateY(16px);

    transition:
        opacity 0.85s ease,
        transform 0.85s ease;
}

.js-fade.inview {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.c-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #ebe7df;
}

.c-image-placeholder span {
    color: #8b8882;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 1.3rem;
    letter-spacing: 0.08em;
}

.c-image-placeholder--wide {
    aspect-ratio: 16 / 9;
}

.c-image-placeholder--portrait {
    aspect-ratio: 3 / 4;
}


/* =========================================================
   TABLET / NARROW DESKTOP
   BRAND SITE RESPONSIVE FLOW
========================================================= */

@media screen and (max-width: 1160px) {

    .l-content2 {
        width: calc(100% - 140px);

        margin-left: 70px;
        margin-right: 70px;
    }

}

@media screen and (max-width: 939px) {

    .l-content2 {
        width: calc(100% - 90px);

        margin-left: 45px;
        margin-right: 45px;
    }

}


/* =========================================================
   MOBILE
   BRAND BREAKPOINT: 834px
========================================================= */

@media screen and (max-width: 834px) {

    body {
        font-size: 1.4rem;
    }


    /* CONTENT */

    .l-content,
    .l-content2 {
        width: calc(100% - 50px);

        margin-left: 25px;
        margin-right: 25px;

        padding: 0;
    }


    /* COMMON PAGE TYPOGRAPHY */

    .c-page-title {
        font-size: 2.1rem;
    }

    .c-page-heading {
        font-size: 1.8rem;
    }

    .c-page-text {
        font-size: 1.3rem;
        line-height: 1.9;
    }

    .c-page-note {
        font-size: 1.1rem;
    }


    /* COMMON */

    .c-section-label {
        margin-bottom: 38px;

        font-size: 1.3rem;
    }


    /* BRAND: 20px */

    .c-title01 {
        font-size: 2rem;
        line-height: 1.58;
    }


    .c-title02 {
        gap: 18px;
    }


    /* BRAND: 16px */

    .c-title02__number {
        font-size: 1.6rem;
    }


    /* BRAND: 22px */

    .c-title02 h2 {
        font-size: 2.2rem;
    }


    /* BRAND equivalent: 12px */

    .c-title02__jp {
        margin-top: 10px;

        font-size: 1.2rem;
    }


    /* BRAND: 20px */

    .c-title03 {
        font-size: 2rem;
        line-height: 1.58;
    }


    /* BRAND: 14px */

    .c-text01 {
        font-size: 1.4rem;
    }

    .c-text02 {
        font-size: 1.4rem;
    }

}