@charset "UTF-8";

/* =========================================================
   TOP HERO
========================================================= */

.top-hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    color: #ffffff;
    background: #e9e6e1;
}

.top-hero__visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.top-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    opacity: 0;
    transition: opacity 1.5s ease;
}

.top-hero__slide.is-active {
    opacity: 1;
    z-index: 2;
}

.top-hero__slide picture,
.top-hero__slide img {
    display: block;
    width: 100%;
    height: 100%;
}

.top-hero__image {
    object-fit: cover;
    object-position: center;

    transform: scale(1.08);
    transition: transform 6s linear;
}

.top-hero__slide.is-active .top-hero__image {
    transform: scale(1);
}

.top-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgb(24 22 19 / 62%) 0%,
            rgb(24 22 19 / 36%) 36%,
            rgb(24 22 19 / 8%) 68%,
            rgb(24 22 19 / 0%) 100%
        );
}

.top-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1380px, calc(100% - 80px));
    min-height: 760px;
    margin: 0 auto;
}

.top-hero__content {
    position: absolute;
    top: 105px;
    left: 0;
    max-width: 710px;
}

.top-hero__area {
    display: inline-block;
    padding: 8px 17px;
    color: #ffffff;
    background: rgb(180 150 97 / 92%);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.top-hero__title {
    margin-top: 24px;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(3.8rem, 3.2vw, 5.5rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-shadow: 0 3px 18px rgb(0 0 0 / 20%);
    text-shadow:
    2px 2px 0 rgba(0,0,0,.25),
    0 4px 12px rgba(0,0,0,.55),
    0 10px 30px rgba(0,0,0,.45);
}

.top-hero__title span {
    display: block;
}

.top-hero__lead {
    margin-top: 24px;
    font-size: 1.75rem;
    line-height: 2;
    letter-spacing: 0.08em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .25), 0 4px 12px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .45);
}

.top-hero__features {
    position: absolute;
    right: 0;
    bottom: 45px;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 15px 45px rgb(0 0 0 / 16%);
}

.hero-feature {
    position: relative;
    display: flex;
    min-height: 134px;
    align-items: center;
    justify-content: center;
    padding: 20px 18px;
    color: #4b4439;
}

.hero-feature + .hero-feature::before {
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 0;
    width: 1px;
    content: "";
    background: #ddd6ca;
}

.hero-feature__icon {
    width: 48px;
    margin-right: 15px;
    flex-shrink: 0;
}

.hero-feature__icon img {
    width: 100%;
}

.hero-feature__text {
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.65;
}

.top-hero__reserve {
    position: absolute;
    top: 70px;
    right: 0;
    display: flex;
    width: 195px;
    min-height: 155px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #ffffff;
    background: #b49661;
    text-align: center;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.top-hero__reserve:hover {
    background: #91713f;
    transform: translateY(-4px);
}

.top-hero__reserve small {
    font-size: 1.05rem;
}

.top-hero__reserve strong {
    margin-top: 8px;
    font-family: "Noto Serif JP", serif;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.6;
}

.top-hero__reserve span {
    margin-top: 10px;
    font-size: 2rem;
}

/* =========================================================
   NEWS
========================================================= */

.top-news {
    background: #f7f4ef;
    border-bottom: 1px solid #e7e0d5;
}

.top-news__inner {
    display: grid;
    grid-template-columns: 145px 125px 1fr;
    width: min(1180px, calc(100% - 80px));
    min-height: 82px;
    align-items: center;
    margin: 0 auto;
}

.top-news__label {
    color: #80683f;
    font-family: "Noto Serif JP", serif;
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.top-news__date {
    color: #8b8b8b;
    font-size: 1.2rem;
}

.top-news__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #454545;
    font-size: 1.35rem;
}

.top-news__arrow {
    margin-left: 20px;
    color: #b49661;
    font-size: 1.8rem;
    transition: transform 0.3s ease;
}

.top-news__link:hover .top-news__arrow {
    transform: translateX(5px);
}

/* =========================================================
   SYMPTOM
========================================================= */

.top-symptom {
    background: #ffffff;
}

.symptom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #ded7cc;
    border-left: 1px solid #ded7cc;
}

.symptom-card {
    position: relative;
    display: flex;
    min-height: 115px;
    align-items: center;
    padding: 22px 48px 22px 24px;
    background: #ffffff;
    border-right: 1px solid #ded7cc;
    border-bottom: 1px solid #ded7cc;
    transition:
        color 0.3s ease,
        background 0.3s ease;
}

.symptom-card:hover {
    color: #ffffff;
    background: #b49661;
}

.symptom-card__number {
    margin-right: 16px;
    color: #b49661;
    font-family: "Noto Serif JP", serif;
    font-size: 1.25rem;
    transition: color 0.3s ease;
}

.symptom-card__text {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.6;
}

.symptom-card__arrow {
    position: absolute;
    right: 19px;
    color: #b49661;
    font-size: 1.7rem;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.symptom-card:hover .symptom-card__number,
.symptom-card:hover .symptom-card__arrow {
    color: #ffffff;
}

.symptom-card:hover .symptom-card__arrow {
    transform: translateX(4px);
}

/* =========================================================
   TREATMENT
========================================================= */

.top-menu {
    background: #f7f5f1;
}

.treatment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.treatment-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 35px rgb(58 48 32 / 7%);
}

.treatment-card--large {
    grid-column: span 1;
}

.treatment-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 760 / 460;
}

.treatment-card__image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(
        180deg,
        transparent 55%,
        rgb(0 0 0 / 18%) 100%
    );
}

.treatment-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.treatment-card:hover .treatment-card__image img {
    transform: scale(1.055);
}

.treatment-card__body {
    position: relative;
    min-height: 116px;
    padding: 23px 56px 21px 25px;
}

.treatment-card__title {
    color: #393939;
    font-family: "Noto Serif JP", serif;
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.5;
}

.treatment-card__en {
    margin-top: 5px;
    color: #b49661;
    font-size: 1rem;
    letter-spacing: 0.13em;
}

.treatment-card__arrow {
    position: absolute;
    top: 50%;
    right: 23px;
    display: grid;
    width: 35px;
    height: 35px;
    color: #b49661;
    border: 1px solid #cdbd9d;
    border-radius: 50%;
    place-items: center;
    transform: translateY(-50%);
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.treatment-card:hover .treatment-card__arrow {
    color: #ffffff;
    background: #b49661;
    transform: translate(4px, -50%);
}

/* =========================================================
   GREETING
========================================================= */

.top-greeting {
    position: relative;
    overflow: hidden;
    background: #403b33;
}

.top-greeting__background {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgb(49 45 38 / 98%) 0%,
            rgb(49 45 38 / 95%) 48%,
            rgb(49 45 38 / 88%) 100%
        ),
        url("/tamachi/assets/images/top/greeting-bg.jpg") center / cover no-repeat;
}

.top-greeting__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 39% 39% 22%;
    width: min(1440px, 100%);
    min-height: 820px;
    margin: 0 auto;
    color: #ffffff;
}

.top-greeting__doctor {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.top-greeting__doctor img {
    position: relative;
    z-index: 2;
    width: min(92%, 650px);
    max-height: 790px;
    object-fit: contain;
    object-position: bottom;
}

.top-greeting__doctor-name-en {
    position: absolute;
    top: 54px;
    left: 28px;
    z-index: 1;
    color: rgb(255 255 255 / 6%);
    font-family: "Noto Serif JP", serif;
    font-size: clamp(6rem, 7vw, 10rem);
    line-height: 0.88;
    letter-spacing: 0.02em;
}

.top-greeting__content {
    padding: 100px 62px 80px;
    background: rgb(255 255 255 / 5%);
}

.top-greeting__en {
    color: #cfb88f;
    font-size: 1.15rem;
    letter-spacing: 0.22em;
}

.top-greeting__heading {
    margin-top: 8px;
    font-family: "Noto Serif JP", serif;
    font-size: 3.5rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.top-greeting__catch {
    margin-top: 32px;
    color: #eadfc9;
    font-family: "Noto Serif JP", serif;
    font-size: 2.1rem;
    line-height: 1.85;
}

.top-greeting__text {
    margin-top: 28px;
    color: rgb(255 255 255 / 82%);
    font-size: 1.35rem;
    line-height: 2;
}

.top-greeting__text p + p {
    margin-top: 15px;
}

.top-greeting__name {
    margin-top: 30px;
    text-align: right;
}

.top-greeting__name small {
    display: block;
    color: rgb(255 255 255 / 70%);
    font-size: 1.1rem;
}

.top-greeting__name p {
    margin-top: 3px;
    font-size: 1.2rem;
}

.top-greeting__name strong {
    margin-left: 10px;
    font-family: "Noto Serif JP", serif;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.top-greeting__button {
    display: flex;
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 15px 21px;
    color: #ffffff;
    border: 1px solid rgb(255 255 255 / 35%);
    font-size: 1.25rem;
    transition:
        color 0.3s ease,
        background 0.3s ease;
}

.top-greeting__button:hover {
    color: #4b4234;
    background: #ffffff;
}

.top-greeting__career {
    padding: 110px 35px 70px;
    color: #4a443a;
    background: #e9dfcc;
}

.top-greeting__career-block + .top-greeting__career-block {
    margin-top: 42px;
}

.top-greeting__career h3 {
    padding-bottom: 12px;
    color: #705a37;
    font-family: "Noto Serif JP", serif;
    font-size: 1.65rem;
    font-weight: 500;
    border-bottom: 1px solid #b59b70;
}

.top-greeting__career dl {
    margin-top: 15px;
}

.top-greeting__career dl div {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgb(124 100 62 / 17%);
}

.top-greeting__career dt,
.top-greeting__career dd,
.top-greeting__career li {
    font-size: 1.08rem;
    line-height: 1.7;
}

.top-greeting__career ul {
    margin-top: 15px;
}

.top-greeting__career li {
    position: relative;
    padding: 7px 0 7px 15px;
    border-bottom: 1px solid rgb(124 100 62 / 17%);
}

.top-greeting__career li::before {
    position: absolute;
    top: 17px;
    left: 0;
    width: 5px;
    height: 5px;
    content: "";
    background: #a68757;
    border-radius: 50%;
}

/* =========================================================
   REASON
========================================================= */

.top-reason {
    background: #ffffff;
}

.reason-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.reason-card {
    min-height: 230px;
    padding: 36px 20px 28px;
    background: #f8f5ef;
    border-bottom: 3px solid #b49661;
    text-align: center;
}

.reason-card__icon {
    display: grid;
    width: 86px;
    height: 86px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 50%;
    place-items: center;
}

.reason-card__icon img {
    width: 52px;
}

.reason-card__title {
    margin-top: 22px;
    color: #444444;
    font-family: "Noto Serif JP", serif;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.8;
    text-align: left;
}

/* =========================================================
   EQUIPMENT
========================================================= */

.top-equipment {
    overflow: hidden;
    background: #f4f1eb;
}

.equipment-slider {
    position: relative;
    display: flex;
    align-items: center;
}

.equipment-slider__viewport {
    width: 100%;
    overflow: hidden;
}

.equipment-slider__track {
    display: flex;
    gap: 25px;
    transition: transform 0.5s ease;
}

.equipment-card {
    min-width: calc((100% - 50px) / 3);
    background: #ffffff;
}

.equipment-card__image {
    overflow: hidden;
}

.equipment-card__image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.equipment-card:hover .equipment-card__image img {
    transform: scale(1.04);
}

.equipment-card__title {
    padding: 20px 22px;
    color: #444444;
    font-family: "Noto Serif JP", serif;
    font-size: 1.5rem;
    font-weight: 500;
}

.equipment-slider__button {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 54px;
    height: 54px;
    color: #ffffff;
    background: #b49661;
    border-radius: 50%;
    place-items: center;
    transform: translateY(-50%);
}

.equipment-slider__button--prev {
    left: -27px;
}

.equipment-slider__button--next {
    right: -27px;
}

.equipment-slider__dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 28px;
}

.equipment-slider__dots button {
    width: 8px;
    height: 8px;
    background: #cfc7ba;
    border-radius: 50%;
}

.equipment-slider__dots button.is-active {
    background: #9d7d48;
}

/* =========================================================
   SPECIALTY
========================================================= */

.top-specialty {
    background: #ffffff;
}

.specialty-list {
    display: grid;
    gap: 90px;
}

.specialty-item {
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: center;
}

.specialty-item--reverse {
    grid-template-columns: 45% 55%;
}

.specialty-item--reverse .specialty-item__image {
    grid-column: 2;
    grid-row: 1;
}

.specialty-item--reverse .specialty-item__content {
    grid-column: 1;
    grid-row: 1;
    padding-right: 70px;
    padding-left: 0;
}

.specialty-item__image {
    overflow: hidden;
}

.specialty-item__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.specialty-item__content {
    padding-left: 70px;
}

.specialty-item__number {
    color: #b49661;
    font-family: "Noto Serif JP", serif;
    font-size: 1.3rem;
    letter-spacing: 0.14em;
}

.specialty-item__title {
    margin-top: 8px;
    color: #353535;
    font-family: "Noto Serif JP", serif;
    font-size: 3.1rem;
    font-weight: 500;
    line-height: 1.5;
}

.specialty-item__lead {
    margin-top: 22px;
    color: #765f3d;
    font-family: "Noto Serif JP", serif;
    font-size: 1.65rem;
    line-height: 1.85;
}

.specialty-item__text {
    margin-top: 20px;
    color: #626262;
    font-size: 1.35rem;
    line-height: 2;
}

.specialty-item__button {
    display: flex;
    max-width: 330px;
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 15px 21px;
    color: #795f37;
    border: 1px solid #bfa77c;
    font-size: 1.7rem;
    transition:
        color 0.3s ease,
        background 0.3s ease;
}

.specialty-item__button:hover {
    color: #ffffff;
    background: #b49661;
}

/* =========================================================
   ACCESS
========================================================= */

.top-access {
    background: #f6f3ed;
}

.top-access__layout {
    display: grid;
    grid-template-columns: 34% 36% 30%;
    background: #ffffff;
    box-shadow: 0 12px 40px rgb(67 54 32 / 7%);
}

.top-access__info,
.top-access__hours,
.top-access__map {
    min-width: 0;
}

.top-access__info {
    padding: 42px 35px;
}

.top-access__logo {
    display: flex;
    align-items: center;
}

.top-access__logo img {
    width: 64px;
    margin-right: 14px;
}

.top-access__logo-en {
    color: #785f39;
    font-family: "Noto Serif JP", serif;
    font-size: 1.6rem;
    font-weight: 500;
}

.top-access__logo-ja {
    margin-top: 3px;
    color: #555555;
    font-size: 1.05rem;
}

.top-access__address {
    margin-top: 25px;
    color: #555555;
    font-size: 1.2rem;
    line-height: 1.9;
}

.top-access__tel {
    display: block;
    margin-top: 22px;
    color: #4b3e2d;
}

.top-access__tel small {
    display: block;
    font-size: 1rem;
}

.top-access__tel strong {
    display: block;
    margin-top: 2px;
    font-family: "Noto Serif JP", serif;
    font-size: 2.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.top-access__info .common-button {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    margin-top: 23px;
}

.top-access__hours {
    padding: 42px 28px;
    border-right: 1px solid #ebe5dc;
    border-left: 1px solid #ebe5dc;
}

.top-access__table th,
.top-access__table td {
    padding: 12px 6px;
    text-align: center;
    border: 1px solid #ded7cc;
}

.top-access__table thead th {
    color: #ffffff;
    background: #806844;
    font-size: 1rem;
    font-weight: 500;
}

.top-access__table tbody th {
    color: #555555;
    background: #f0ebe3;
    font-size: 1rem;
    font-weight: 500;
}

.top-access__table tbody td {
    color: #9c7a46;
    font-size: 1.2rem;
}

.top-access__note {
    margin-top: 15px;
    color: #777777;
    font-size: 1.05rem;
    line-height: 1.8;
}

.top-access__map a,
.top-access__map img {
    width: 100%;
    height: 100%;
}

.top-access__map img {
    min-height: 390px;
    object-fit: cover;
}

/* =========================================================
   TABLET
========================================================= */

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

    .top-hero {
        min-height: 700px;
    }

    .top-hero__inner {
        min-height: 700px;
    }

    .top-hero__content {
        top: 90px;
    }

    .top-hero__reserve {
        display: none;
    }

    .top-hero__features {
        grid-template-columns: repeat(5, 1fr);
    }

    .hero-feature {
        display: block;
        min-height: 125px;
        text-align: center;
    }

    .hero-feature__icon {
        width: 40px;
        margin: 0 auto 10px;
    }

    .hero-feature__text {
        font-size: 1.15rem;
    }

    .top-greeting__inner {
        grid-template-columns: 42% 58%;
    }

    .top-greeting__career {
        display: none;
    }

    .reason-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .top-access__layout {
        grid-template-columns: 1fr 1fr;
    }

    .top-access__map {
        grid-column: 1 / -1;
    }

    .top-access__map img {
        min-height: 330px;
        max-height: 440px;
    }
}

/* =========================================================
   SP
========================================================= */

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

    .top-hero {
        min-height: 720px;
    }

    .top-hero__visual img {
        object-position: center center;
    }

    .top-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgb(24 22 19 / 4%) 0%,
                rgb(24 22 19 / 12%) 35%,
                rgb(24 22 19 / 62%) 68%,
                rgb(24 22 19 / 84%) 100%
            );
    }

    .top-hero__inner {
        width: calc(100% - 40px);
        min-height: 720px;
    }

    .top-hero__content {
        top: auto;
        right: 0;
        bottom: 145px;
        left: 0;
        max-width: none;
    }

    .top-hero__area {
        padding: 6px 12px;
        font-size: 1.1rem;
    }

    .top-hero__title {
        margin-top: 17px;
        font-size: 3.5rem;
        line-height: 1.5;
        letter-spacing: 0.04em;
    }

    .top-hero__lead {
        margin-top: 16px;
        font-size: 1.35rem;
        line-height: 1.85;
    }

    .top-hero__lead br {
        display: none;
    }

    .top-hero__features {
        right: -20px;
        bottom: 0;
        left: -20px;
        grid-template-columns: repeat(3, 1fr);
        background: #ffffff;
    }

    .hero-feature {
        min-height: 105px;
        padding: 13px 8px;
        color: #4b4439;
        border-right: 1px solid #e5dfd5;
        border-bottom: 1px solid #e5dfd5;
    }

    .hero-feature:nth-child(n + 4) {
        display: none;
    }

    .hero-feature + .hero-feature::before {
        display: none;
    }

    .hero-feature__icon {
        width: 33px;
        margin-bottom: 7px;
    }

    .hero-feature__text {
        font-size: 1rem;
        line-height: 1.45;
    }

    .top-news__inner {
        display: grid;
        grid-template-columns: 92px 1fr;
        width: calc(100% - 40px);
        min-height: auto;
        padding: 20px 0;
    }

    .top-news__label {
        font-size: 1.35rem;
    }

    .top-news__date {
        font-size: 1.05rem;
    }

    .top-news__link {
        grid-column: 1 / -1;
        margin-top: 9px;
        padding-top: 10px;
        border-top: 1px solid #ddd7cd;
        font-size: 1.2rem;
    }

    .symptom-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .symptom-card {
        min-height: 94px;
        padding: 16px 33px 16px 14px;
    }

    .symptom-card__number {
        margin-right: 8px;
        font-size: 1rem;
    }

    .symptom-card__text {
        font-size: 1.5rem;
        line-height: 1.5;
    }

    .symptom-card__arrow {
        right: 10px;
        font-size: 1.4rem;
    }

    .treatment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .treatment-card__body {
        min-height: 92px;
        padding: 16px 34px 14px 14px;
    }

    .treatment-card__title {
        font-size: 1.7rem;
        line-height: 1.45;
    }

    .treatment-card__en {
        font-size: 0.85rem;
    }

    .treatment-card__arrow {
        right: 10px;
        width: 26px;
        height: 26px;
        font-size: 1.2rem;
    }

    .top-greeting__inner {
        display: flex;
        min-height: 0;
        flex-direction: column;
    }

    .top-greeting__doctor {
        min-height: 430px;
        order: 1;
    }

    .top-greeting__doctor img {
        width: 92%;
        max-height: 430px;
    }

    .top-greeting__doctor-name-en {
        top: 25px;
        left: 15px;
        font-size: 5.5rem;
    }

    .top-greeting__content {
        order: 2;
        padding: 55px 20px 62px;
    }

    .top-greeting__heading {
        font-size: 2.7rem;
    }

    .top-greeting__catch {
        margin-top: 24px;
        font-size: 1.7rem;
    }

    .top-greeting__text {
        font-size: 1.5rem;
    }

    .top-greeting__career {
        display: block;
        order: 3;
        padding: 48px 20px;
    }

    .reason-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .reason-card {
        min-height: 185px;
        padding: 26px 10px 20px;
    }

    .reason-card__icon {
        width: 70px;
        height: 70px;
    }

    .reason-card__icon img {
        width: 42px;
    }

    .reason-card__title {
        margin-top: 17px;
        font-size: 1.2rem;
        line-height: 1.65;
    }

    .equipment-slider__track {
        gap: 14px;
    }

    .equipment-card {
        min-width: 82%;
    }

    .equipment-slider__button {
        width: 42px;
        height: 42px;
    }

    .equipment-slider__button--prev {
        left: -12px;
    }

    .equipment-slider__button--next {
        right: -12px;
    }

    .equipment-card__title {
        padding: 15px;
        font-size: 1.3rem;
    }

    .specialty-list {
        gap: 65px;
    }

    .specialty-item,
    .specialty-item--reverse {
        display: block;
    }

    .specialty-item--reverse .specialty-item__image,
    .specialty-item--reverse .specialty-item__content {
        display: block;
    }

    .specialty-item__content,
    .specialty-item--reverse .specialty-item__content {
        padding: 27px 0 0;
    }

    .specialty-item__title {
        font-size: 2.35rem;
    }

    .specialty-item__lead {
        margin-top: 15px;
        font-size: 1.45rem;
    }

    .specialty-item__text {
        margin-top: 15px;
        font-size: 1.25rem;
    }

    .specialty-item__button {
        max-width: none;
        min-height: 56px;
        margin-top: 23px;
    }

    .top-access__layout {
        display: block;
    }

    .top-access__info,
    .top-access__hours {
        padding: 30px 20px;
    }

    .top-access__hours {
        overflow-x: auto;
        border-top: 1px solid #ebe5dc;
        border-right: 0;
        border-left: 0;
    }

    .top-access__table {
        min-width: 610px;
    }

    .top-access__map img {
        min-height: 270px;
        max-height: none;
    }
}

/* =========================================================
   SMALL SP
========================================================= */

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

    .top-hero {
        min-height: 680px;
    }

    .top-hero__inner {
        min-height: 680px;
    }

    .top-hero__content {
        bottom: 140px;
    }

    .top-hero__title {
        font-size: 3rem;
    }

    .treatment-grid {
        /*grid-template-columns: 1fr;*/
        grid-template-columns: repeat(2, 1fr);
    }

    .treatment-card__image img {
        aspect-ratio: 16 / 10;
    }

    .reason-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   Top news
========================================================= */

.top-news__label {
    margin: 0;
}

button.top-news__link {
    padding: 0;
    color: inherit;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.top-news__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

/* =========================================================
   News modal
========================================================= */

body.is-news-modal-open {
    overflow: hidden;
}

.news-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        visibility 0.3s ease,
        opacity 0.3s ease;
}

.news-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.news-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 37, 0.72);
    cursor: pointer;
}

.news-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.news-modal.is-open .news-modal__dialog {
    transform: translateY(0);
}

.news-modal__close {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.news-modal__close span {
    position: absolute;
    top: 21px;
    left: 9px;
    width: 26px;
    height: 1px;
    background: #25343c;
}

.news-modal__close span:first-child {
    transform: rotate(45deg);
}

.news-modal__close span:last-child {
    transform: rotate(-45deg);
}

.news-modal__close:hover {
    opacity: 0.65;
}

.news-modal__header {
    padding: 54px 70px 30px;
    border-bottom: 1px solid #e3e7e9;
}

.news-modal__label {
    margin: 0 0 12px;
    color: #638ca1;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.news-modal__date {
    display: block;
    margin-bottom: 14px;
    color: #78858c;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
}

.news-modal__title {
    margin: 0;
    padding-right: 30px;
    color: #25343c;
    font-size: clamp(2.2rem, 2.4vw, 3.2rem);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.04em;
}

.news-modal__body {
    padding: 38px 70px 44px;
    color: #4c565b;
    font-size: 1.6rem;
    line-height: 2;
    overflow-wrap: anywhere;
}

.news-modal__footer {
    display: flex;
    justify-content: center;
    padding: 0 70px 50px;
}

.news-modal__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    min-height: 54px;
    padding: 12px 25px;
    color: #ffffff;
    border: 1px solid #355f75;
    border-radius: 0;
    background: #355f75;
    font: inherit;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.news-modal__button:hover {
    color: #355f75;
    background: #ffffff;
}

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

    .news-modal {
        align-items: flex-start;
        padding: 30px 16px;
        overflow-y: auto;
    }

    .news-modal__dialog {
        max-height: none;
        margin: auto 0;
    }

    .news-modal__close {
        top: 12px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .news-modal__close span {
        top: 19px;
        left: 8px;
        width: 24px;
    }

    .news-modal__header {
        padding: 44px 24px 24px;
    }

    .news-modal__title {
        padding-right: 20px;
        font-size: 2rem;
        line-height: 1.6;
    }

    .news-modal__body {
        padding: 28px 24px 32px;
        font-size: 1.5rem;
        line-height: 1.9;
    }

    .news-modal__footer {
        padding: 0 24px 32px;
    }

    .news-modal__button {
        width: 100%;
    }

}


/* =========================================================
   YouTube
========================================================= */

.top-youtube{
    background:#f7f8fa;
}

.youtube-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    margin-top:60px;

}

.youtube-card{

    display:block;

    background:#fff;

    border:1px solid #e7ecef;

    overflow:hidden;

    text-decoration:none;

    transition:.35s;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

}

.youtube-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(0,0,0,.12);

}

.youtube-card__thumb{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/9;

}

.youtube-card__thumb img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .6s;

}

.youtube-card:hover .youtube-card__thumb img{

    transform:scale(1.06);

}

.youtube-card__play{

    position:absolute;

    left:50%;
    top:50%;

    width:86px;
    height:86px;

    margin:-43px 0 0 -43px;

    border-radius:50%;

    background:rgba(255,255,255,.93);

    transition:.35s;

}

.youtube-card__play::before{

    content:"";

    position:absolute;

    left:35px;
    top:25px;

    border-left:24px solid #173f5b;
    border-top:16px solid transparent;
    border-bottom:16px solid transparent;

}

.youtube-card:hover .youtube-card__play{

    transform:scale(1.08);

}

.youtube-card__body{

    padding:28px;

}

.youtube-card__category{

    margin:0 0 12px;

    font-size:12px;

    letter-spacing:.25em;

    color:#9b7d47;

    text-transform:uppercase;

}

.youtube-card__title{

    margin:0;

    color:#173f5b;

    font-size:24px;

    line-height:1.6;

    font-weight:500;

}

/* =========================================================
   YouTube Modal
========================================================= */

.youtube-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.82);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.youtube-modal.is-open{

    opacity:1;

    visibility:visible;

}

.youtube-modal__overlay{

    position:absolute;

    inset:0;

}

.youtube-modal__box{

    position:relative;

    width:min(1100px,92vw);

    aspect-ratio:16/9;

    background:#000;

    border-radius:18px;

    overflow:hidden;

    transform:translateY(25px);

    transition:.35s;

    z-index:2;

}

.youtube-modal.is-open .youtube-modal__box{

    transform:none;

}

#youtubePlayer{

    width:100%;
    height:100%;

}

#youtubePlayer iframe{

    width:100%;
    height:100%;
    border:0;

}

.youtube-modal__close{

    position:absolute;

    right:18px;
    top:18px;

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#173f5b;

    font-size:22px;

    cursor:pointer;

    z-index:10;

    transition:.3s;

}

.youtube-modal__close:hover{

    transform:rotate(90deg);

}

@media (max-width:900px){

    .youtube-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

}

@media (max-width:768px){

    .youtube-card__body{

        padding:20px;

    }

    .youtube-card__title{

        font-size:20px;

    }

    .youtube-card__play{

        width:64px;
        height:64px;

        margin:-32px 0 0 -32px;

    }

    .youtube-card__play::before{

        left:26px;
        top:18px;

        border-left:18px solid #173f5b;
        border-top:12px solid transparent;
        border-bottom:12px solid transparent;

    }

    .youtube-modal__box{

        width:95vw;

        border-radius:12px;

    }

}


.equipment-slider__track{
    display:flex;
    transition:transform .45s ease;
}

.equipment-card{
    flex-shrink:0;
}

.equipment-slider__viewport{
    overflow:hidden;
}

.equipment-slider__dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:30px;
}

.equipment-slider__dot{
    width:10px;
    height:10px;
    border-radius:50%;
    border:none;
    background:#ccc;
    cursor:pointer;
}

.equipment-slider__dot.is-active{
    background:#173f5b;
}


/* =========================================================
   RESERVATION
========================================================= */

.top-reservation {
    position: relative;
    overflow: hidden;
    padding: 90px 20px;
    background:
        linear-gradient(
            135deg,
            #eee7da 0%,
            #f8f5ef 48%,
            #e7ddcc 100%
        );
}

/* 背景のアクセント */
.top-reservation::before {
    position: absolute;
    top: -180px;
    left: -180px;
    width: 500px;
    height: 500px;
    content: "";
    border: 1px solid rgb(180 150 97 / 20%);
    border-radius: 50%;
}

.top-reservation::after {
    position: absolute;
    right: -220px;
    bottom: -220px;
    width: 600px;
    height: 600px;
    content: "";
    border: 1px solid rgb(180 150 97 / 18%);
    border-radius: 50%;
}

.top-reservation__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 580px;
    gap: 80px;
    width: min(1180px, 100%);
    align-items: center;
    margin: 0 auto;
}

/* 左側 */
.top-reservation__heading {
    padding: 20px 0;
}

.top-reservation__en {
    display: block;
    color: #a1814b;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.24em;
}

.top-reservation__title {
    margin-top: 12px;
    color: #403a31;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(2.8rem, 4vw, 4.5rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

.top-reservation__lead {
    margin-top: 25px;
    color: #5d5549;
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.06em;
}

.top-reservation__note {
    position: relative;
    margin-top: 28px;
    padding-left: 20px;
    color: #80683f;
    font-size: 1.15rem;
    line-height: 1.8;
}

.top-reservation__note::before {
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 5px;
    height: 5px;
    content: "";
    background: #b49661;
    border-radius: 50%;
}

/* 予約ボックス */
.top-reservation__box {
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 20px 60px rgb(67 54 32 / 14%),
        0 2px 8px rgb(67 54 32 / 5%);
}

.top-reservation__box-head {
    display: flex;
    min-height: 75px;
    align-items: center;
    justify-content: space-between;
    padding: 15px 28px;
    color: #ffffff;
    background: #806844;
}

.top-reservation__box-head span {
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    opacity: 0.75;
}

.top-reservation__box-head strong {
    font-family: "Noto Serif JP", serif;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.reservation-embed {
    width: 100%;
    background: #ffffff;
}

.reservation-embed iframe {
    display: block;
    width: 100%;
    height: 210px;
    border: 0;
}

/* =========================================================
   TABLET
========================================================= */

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

    .top-reservation {
        padding: 70px 20px;
    }

    .top-reservation__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 580px;
    }

    .top-reservation__heading {
        padding: 0;
        text-align: center;
    }

    .top-reservation__note {
        display: inline-block;
        text-align: left;
    }

}

/* =========================================================
   SP
========================================================= */

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

    .top-reservation {
        padding: 60px 20px;
    }

    .top-reservation__inner {
        gap: 30px;
    }

    .top-reservation__en {
        font-size: 0.9rem;
    }

    .top-reservation__title {
        margin-top: 8px;
        font-size: 2.7rem;
    }

    .top-reservation__lead {
        margin-top: 18px;
        font-size: 1.25rem;
        line-height: 1.85;
    }

    .top-reservation__note {
        margin-top: 20px;
        font-size: 1rem;
    }

    .top-reservation__box-head {
        min-height: 62px;
        padding: 12px 18px;
    }

    .top-reservation__box-head span {
        font-size: 0.75rem;
    }

    .top-reservation__box-head strong {
        font-size: 1.3rem;
    }

    .reservation-embed iframe {
        height: 210px;
    }

}


/* =========================================================
   Equipment Slider - 3 cards
========================================================= */

.equipment-slider__viewport {
    width: 100%;
    overflow: hidden;
}

.equipment-slider__track {
    display: flex;
    gap: 25px;
    transition: transform 0.45s ease;
}

.equipment-card {
    flex: 0 0 calc((100% - 50px) / 3);
    min-width: 0;
}

/* PC：3枚表示 */
@media screen and (min-width: 768px) {

    .equipment-card {
        flex: 0 0 calc((100% - 50px) / 3);
    }

}

/* スマホ：2枚表示 */
@media screen and (max-width: 767px) {

    .equipment-slider__track {
        gap: 14px;
    }

    .equipment-card {
        flex: 0 0 calc((100% - 14px) / 2);
        min-width: 0;
    }

}