/*
Theme Name: Hakubikai
Version: 1.0
*/

@charset "utf-8";

/* ============================================================================
目次
・トークン
・ベース
・レイアウト
・コンポーネント
・ユーティリティ
・ヘッダー・フッター
・ページ・セクション
============================================================================ */

/* ============================================================================
トークン
1. グローバル
2. セマンティック (エイリアス)
============================================================================ */

:root {
    /* ====================================
    トークン > グローバル
    ==================================== */
    /* spacing */
    --spacing-0: 0rem;
    --spacing-1: 0.4rem;
    --spacing-2: 0.8rem;
    --spacing-3: 1.2rem;
    --spacing-4: 1.6rem;
    --spacing-6: 2.4rem;
    --spacing-8: 3.2rem;
    --spacing-12: 4.8rem;
    --spacing-16: 6.4rem;
    --spacing-20: 8rem;
    --spacing-30: 12rem;
    --spacing-40: 16rem;
    /* typography */
    --fontSize-xs: 1.2rem;
    --fontSize-sm: 1.4rem;
    --fontSize-base: 1.6rem;
    --fontSize-lg: 1.8rem;
    --fontSize-xl: 2rem;
    --fontSize-2xl: 2.4rem;
    --fontSize-3xl: 3rem;
    --fontSize-4xl: 3.6rem;
    --lineHeight-none: 1; 
    --lineHeight-tight: 1.25; 
    --lineHeight-snug: 1.375; 
    --lineHeight-normal: 1.5; 
    --lineHeight-relaxed: 1.625; 
    --lineHeight-loose: 2;
    --letterSpacing-tighter: -0.05em;
    --letterSpacing-tight: -0.03em;
    --letterSpacing-normal: 0.00em;
    --letterSpacing-wide: 0.03em;
    --letterSpacing-wider: 0.05em;
    --letterSpacing-widest: 0.10em;
    /* typography responsive */
    --fontSize-2xl-3xl: clamp(var(--fontSize-2xl), 2.1887rem + 0.563vw, var(--fontSize-3xl));
    /* radius */
    --radius-none: 0rem;
    --radius-sm: 0.2rem;
    --radius-default: 0.4rem;
    --radius-md: 0.6rem;
    --radius-lg: 0.8rem;
    --radius-xl: 1.2rem;
    --radius-2xl: 1.6rem;
    --radius-3xl: 2.4rem;
    --radius-4xl: 4.8rem;
    --radius-5xl: 16rem;
    --radius-full: 999.9rem;
    /* color */
    --color-white: #ffffff;
    --color-brown-50: #F5F0EB;
    --color-brown-100: #F0E9E1;
    --color-brown-200: #EBE1D8;
    --color-brown-300: #E0D7CE;
    --color-brown-700: #523737;
    --color-pink-300: #EB7589;
    --color-pink-500: #E55069;
    --color-pink-600: #CC3D55;

    /* ====================================
    トークン > セマンティック (エイリアス)
    ==================================== */
    /* color */
    --color-text-base: var(--color-brown-700);
    --color-text-accent: var(--color-pink-500);
    --color-text-muted: var(--color-neutral-500);
    --color-background-base: var(--color-brown-100);
    --color-background-accent: var(--color-brown-200);
    /* --color-background-base: var(--color-brown-50);
    --color-background-accent: var(--color-brown-100); */
    --color-button-text: var(--color-white);
    --color-button-default: var(--color-pink-500);
    --color-button-hover: var(--color-pink-600);
    --color-border: var(--color-brown-300);
}

/* ============================================================================
ベース
============================================================================ */

html {
    font-size: 62.5%;
}

body {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-family: "Montserrat", "Kosugi Maru", sans-serif;
    /* font-family: "Montserrat", "BIZ UDPGothic", sans-serif; */
    font-size: clamp(var(--fontSize-lg), 1.7296rem + 0.188vw, var(--fontSize-xl));
    font-weight: 500;
    line-height: var(--lineHeight-loose);
    letter-spacing: var(--letterSpacing-wider);
    color: var(--color-text-base);
    background-color: var(--color-background-base);
}

img {
    display: block;
    inline-size: 100%;
    border-radius: var(--radius-2xl);
}

/* ============================================================================
レイアウト
1. グリッド
2. セクション
============================================================================ */

/* ====================================
レイアウト > グリッド
==================================== */

.l-grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: clamp(var(--spacing-12), 3.6732rem + 3.005vw ,var(--spacing-20));
}

@media (min-width: 1024px) {
    .l-grid {
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--spacing-8);
        align-items: center;
    }
    .l-grid > * {
        grid-column: 1 / -1;
    }
    .col-span-1 { grid-column: auto / span 1; }
    .col-span-2 { grid-column: auto / span 2; }
    .col-span-3 { grid-column: auto / span 3; }
    .col-span-4 { grid-column: auto / span 4; }
    .col-span-5 { grid-column: auto / span 5; }
    .col-span-6 { grid-column: auto / span 6; }
    .col-span-7 { grid-column: auto / span 7; }
    .col-span-8 { grid-column: auto / span 8; }
    .col-span-9 { grid-column: auto / span 9; }
    .col-span-10 { grid-column: auto / span 10; }
    .col-span-11 { grid-column: auto / span 11; }
    .col-span-12 { grid-column: auto / span 12; }
    .col-start-1 { grid-column-start: 1; }
    .col-start-2 { grid-column-start: 2; }
    .col-start-3 { grid-column-start: 3; }
    .col-start-4 { grid-column-start: 4; }
    .col-start-5 { grid-column-start: 5; }
    .col-start-6 { grid-column-start: 6; }
    .col-start-7 { grid-column-start: 7; }
    .col-start-8 { grid-column-start: 8; }
    .col-start-9 { grid-column-start: 9; }
    .col-start-10 { grid-column-start: 10; }
    .col-start-11 { grid-column-start: 11; }
    .col-start-12 { grid-column-start: 12; }
}

/* ====================================
レイアウト > セクション
==================================== */

.l-section__gutter {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-1), 0.2592rem + 0.376vw, var(--spacing-2));
    padding-block: clamp(var(--spacing-20), calc(6.5915rem + 3.756vw), var(--spacing-30));
    padding-inline: clamp(var(--spacing-2), calc(0.5183rem + 0.751vw), var(--spacing-4));
}
.l-section__outer {
    padding-block: clamp(var(--spacing-20), calc(6.5915rem + 3.756vw), var(--spacing-30));
    padding-inline: clamp(var(--spacing-8), calc(-1.3802rem + 12.214vw), var(--spacing-20));
}
.l-section__outer--accent {
    border-radius: var(--radius-3xl);
    background-color: var(--color-background-accent);
}
.l-section__outer--narrow {
    padding-inline: clamp(var(--spacing-2), calc(0.5183rem + 0.751vw), var(--spacing-4));
}
.l-section__inner {
    max-width: 1120px;
    margin-inline: auto;
}

/* ============================================================================
コンポーネント
1. 見出し
2. 本文 (縦積み)
3. ボタン
4. カレンダー
5. 電話番号
6. ドット
7. アイコン
8. ページネーション
============================================================================ */

/* ====================================
コンポーネント > 見出し
==================================== */

.topic {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    line-height: var(--lineHeight-relaxed);
    text-align: center;
}
.topic--left {
    text-align: left;
}
.topic--left .topic__english {
    justify-content: left;
}
.topic__english {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fontSize-base);
    font-weight: 500;
    color: var(--color-text-accent);
}
.topic__english::before {
    display: inline-block;
    content: "";
    inline-size: 0.8rem;
    block-size: 0.8rem;
    margin-inline-end: var(--spacing-2);
    border-radius: var(--radius-full);
    background-color: var(--color-text-accent);
}
.topic__english--no-dot::before {
    display: none;
}
.topic__japanese {
    font-size: clamp(var(--fontSize-3xl), 0.7887rem + 0.563vw, var(--fontSize-4xl));
    letter-spacing: var(--letterSpacing-widest);
}
.topic__japanese--xs {
    font-size: clamp(var(--fontSize-xl), 1.7143rem + 0.893vw, var(--fontSize-3xl));
}
.topic__japanese--sm {
    font-size: clamp(var(--fontSize-2xl), 2.0571rem + 1.071vw, var(--fontSize-4xl));
}

@media (min-width: 768px) {
    .topic--pc-left {
        text-align: left;
    }
    .topic--left .topic__english,
    .topic--pc-left .topic__english {
        justify-content: left;
    }
}

/* ====================================
コンポーネント > 本文 (縦積み)
==================================== */

.stack {
    text-wrap: pretty;
}
.stack > * + * {
    margin-block-start: var(--spacing-6);
}

/* ====================================
コンポーネント > ボタン
==================================== */

.button {
    position: relative;
    display: inline-flex;
    block-size: 6.4rem;
    inline-size: 100%;
    max-inline-size: 30rem;
    align-items: center;
    justify-content: center;
    font-size: var(--fontSize-xl);
    font-weight: 700;
    line-height: var(--lineHeight-none);
    letter-spacing: var(--letterSpacing-widest);
    color: var(--color-white);
    border-radius: var(--radius-full);
    background-color: var(--color-button-default);
    transition: background-color 0.4s;
}
.button:hover {
    background-color: var(--color-button-hover);
}
.button span {
    position: absolute;
    inset-inline-end: 1.6rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    block-size: 3.2rem;
    inline-size: 3.2rem;
    color: var(--color-button-default);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
}
.button-wrapper {
    text-align: center;
}
@media (min-width: 1024px) {
    .button-wrapper--right {
        text-align: right;
    }
}

/* ====================================
コンポーネント > 電話番号
==================================== */

.phone {
    display: flex;
    align-items: center;
    font-size: clamp(var(--fontSize-3xl), 0.7887rem + 0.563vw, var(--fontSize-4xl));
    font-weight: 500;
    line-height: var(--lineHeight-relaxed);
    letter-spacing: var(--letterSpacing-widest);
    color: var(--color-text-base);
}

.phone::before {
    display: inline-block;
    content: "";
    margin-inline-end: var(--spacing-2);
    width: 2.4rem;
    height: 2.4rem;
    background-image: url(assets/image/common/phone-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.phone--xs {
    font-size: clamp(var(--fontSize-xl), 1.7143rem + 0.893vw, var(--fontSize-3xl));
}
.phone--sm {
    font-size: clamp(var(--fontSize-2xl), 2.0571rem + 1.071vw, var(--fontSize-4xl));
}

/* ====================================
コンポーネント > カレンダー
==================================== */

.calender {
    font-size: clamp(var(--fontSize-sm), 1.1887rem + 0.563vw, var(--fontSize-xl));
}

.table {
    inline-size: 100%;
}

.table__header {
    block-size: clamp(2.4rem, 1.1324rem + 3.38vw, 6rem);
}

.table__row {
    block-size: 6rem;
}

.table__icon {
    text-align: center;
    vertical-align: middle;
}

.table__day {
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    inline-size: 10%;
}

.table__day--sunday {
    inline-size: 16%;
}

.table__row {
    border-bottom: solid 1px var(--color-border);
}

.table__hours {
    padding-block: var(--spacing-1);
    font-weight: 500;
    line-height: var(--lineHeight-relaxed);
    letter-spacing: var(--letterSpacing-widest);
    vertical-align: middle;
}

.table__dot {
    display: inline-block;
    block-size: clamp(1.4rem, 1.1887rem + 0.563vw, 2rem);
    inline-size: clamp(1.4rem, 1.1887rem + 0.563vw, 2rem);
    border-radius: var(--radius-full);
    background-color: var(--color-text-accent);
}

.table__comment {
    margin-block-start: var(--spacing-3);
}

@media (min-width: 768px) {
    .calender {
        padding-block: var(--spacing-6);
        padding-inline: var(--spacing-6);
        border-radius: var(--radius-2xl);
        background-color: var(--color-background-base);

    }
    .calender--border {
        padding-block: var(--spacing-6);
        padding-inline: var(--spacing-6);
        border-radius: var(--radius-2xl);
        background-color: var(--color-background-base);
    }
}

/* ====================================
コンポーネント > ドット
==================================== */

.dot {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
}
.dot::before {
    display: inline-block;
    content: "";
    inline-size: 0.8rem;
    block-size: 0.8rem;
    margin-inline-end: var(--spacing-2);
    border-radius: var(--radius-full);
    background-color: var(--color-text-accent);
}

/* ====================================
コンポーネント > アイコン
==================================== */

.location-icon {
    margin-inline-end: var(--spacing-2);
    vertical-align: middle;
    color: var(--color-text-muted);
}

/* ====================================
コンポーネント > 見出し
==================================== */

.pagination {
  margin-top: var(--spacing-12);
  display: flex;
  justify-content: center;
}

.pagination .nav-links {
  display: flex;
  gap: var(--spacing-2);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 var(--spacing-2);
  font-size: var(--fontSize-base);
}

.pagination .page-numbers:hover {
    color: var(--color-text-accent);
}

.pagination .page-numbers.current {
  color: var(--color-text-accent);
}

.pagination .prev,
.pagination .next {
  padding: 0 var(--spacing-3);
}


/* ============================================================================
ユーティリティ
============================================================================ */

/* テキスト */
.u-text-accent {
    font-weight: 700;
    color: var(--color-text-accent);
}
.u-text-muted { color: var(--color-text-muted); }
.u-text-center { text-align: center; }

/* 改行 */
@media (min-width: 768px) {
    .sp-br {
        display: none;
    }
}

/* マージン */
.mt-2 { margin-block-start: var(--spacing-2); }
.mt-6 { margin-block-start: var(--spacing-6); }
.mb-6 { margin-block-end: var(--spacing-6); }

/* 最大幅制限 */
@media (max-width: 1023px) {
    .u-max-w-sp {
        justify-self: center;
        inline-size: min(100%, 64rem);
    }
}

/* ============================================================================
ヘッダー・フッター
1. 共通ヘッダー
2. 下層ページヘッダー
3. 共通フッター
============================================================================ */

/* ====================================
ヘッダー・フッター > 共通ヘッダー
==================================== */

.header {
    position: fixed;
    inline-size: 100%;
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-2);
    z-index: 10000;
}

.header__bar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--spacing-2);
    padding-inline-start: var(--spacing-6);
    padding-inline-end: var(--spacing-2);
    border-radius: var(--radius-full);
    border: solid 1px var(--color-border);
    background-color: var(--color-background-base);
}

.header__nav .header__bar {
    display: none;
}
.header__nav.is-open .header__bar {
    display: flex;
}

.header__heading {
    font-size: clamp(var(--fontSize-2xl), calc(2.1887rem + 0.563vw), var(--fontSize-3xl));
    line-height: var(--lineHeight-relaxed);
    letter-spacing: 0.5em;
}

/* ヘッダー ナビゲーション */
.header__nav {
    display: none;
}

.header__nav.is-open {
    position: fixed;
    inset: 0;
    display: block;
    block-size: 100dvh;
    inline-size: 100dvw;
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-2);
    background-color: var(--color-background-accent);
    z-index: 10000;
    overflow: auto;
}

.header__nav-list {
    margin-block-start: var(--spacing-4);
    padding-block: var(--spacing-4);
    padding-inline: var(--spacing-6);
    border-radius: var(--radius-xl);
    background-color: var(--color-background-base);
}

.header__nav-item {
    display: flex;
    justify-content: space-between;
    padding-block: var(--spacing-4);
    font-size: var(--fontSize-base);
    line-height: var(--lineHeight-none);
    letter-spacing: var(--letterSpacing-widest);
    border-bottom: solid 1px var(--color-border);
}
.header__nav-item:last-of-type {
    border-bottom: solid 1px transparent;
}
/* 矢印 */
.header__nav.is-open .header__nav-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    inline-size: 100%;
}
.header__nav-icon {
    display: none;
}
.header__nav.is-open .header__nav-icon {
    display: inline;
    color: var(--color-text-accent);
}

/* ヘッダー コンタクト */
.header__contact {
    margin-block-start: var(--spacing-12);
    text-align: center;
}

.header__contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-block-start: var(--spacing-6);
}
.header__contact-item {
    padding-block: var(--spacing-4);
    border-radius: var(--radius-xl);
    text-align: center;
    background-color: var(--color-background-base);
}
.header__contact-clinic {
    line-height: var(--lineHeight-none);
}
.header__contact-phone {
    justify-content: center;
    margin-block-start: var(--spacing-2);
    color: var(--color-text-accent);
}

/* ヘッダー ボタン */
.header__button {
    display: inline-flex;
    align-items: center;
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-6);
    font-size: var(--fontSize-base);
    line-height: 100%;
    letter-spacing: var(--letterSpacing-widest);
    border-radius: var(--radius-full);
    background-color: var(--color-background-accent);
}

.header__button::before {
    display: inline-block;
    content: "";
    block-size: 1.4rem;
    inline-size: 1.6rem;
    margin-inline-end: var(--spacing-1);
    background-image: url(assets/image/common/header-button-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.header__nav.is-open .header__button::before {
    background-image: url(assets/image/common/header-close-icon.svg);
}

.header__button--menu {
    display: block;
}

@media (min-width: 768px) {
    .header__bar {
        padding-block: 0;
        padding-inline-end: 0;
    }
    .header__button--menu {
        display: none;
    }
    .header__nav {
        display: flex;
        gap: var(--spacing-4);
    }
    .header__nav .header__bar {
        display: none;
    }
    .header__nav-list {
        display: flex;
        gap: var(--spacing-3);
        align-items: center;
        margin-block-start: 0;
        padding-block: var(--spacing-3);
        padding-inline: var(--spacing-6);
        background: none;
    }
    .header__nav-item {
        block-size: 4.4rem;
        padding-block: 0;
        padding-inline: clamp(var(--spacing-2), -0.1714rem + 1.786vw, var(--spacing-6));
        border-radius: var(--radius-full);
        font-size: clamp(var(--fontSize-xs), 0.7429rem + 0.595vw, var(--fontSize-base));
        line-height: 4.4rem;
        border: 1px solid transparent;
        transition: 0.4s ease;
    }
    .header__nav-item--current {
        color: var(--color-white);
        background-color: var(--color-button-default);
    }
    .header__nav-item::after {
        display: none;
    }
    .header__nav-item:hover {
        /* border: 1px solid var(--color-border); */
        color: var(--color-white);
        background-color: var(--color-button-default);
    }
    .header__contact {
        display: none;
    }
.header__nav-item a:hover {
  text-decoration: none;
}
}

@media (min-width: 1440px) {
    .header {
        padding-block: var(--spacing-4);
        padding-inline: var(--spacing-6);
    }
    .header__contact {
        display: flex;
        align-items: center;
        margin-block-start: 0;
        padding-block: var(--spacing-2);
        padding-inline: var(--spacing-8);
        border-radius: var(--radius-full);
        background-color: var(--color-background-accent);
    }
    .header__contact-heading {
        display: none;
    }
    .header__contact-list {
        margin-block-start: 0;
        flex-direction: row;
        gap: var(--spacing-6);
    }
    .header__contact-item {
        padding-block: 0;
        padding-inline: 0;
        font-size: var(--fontSize-xl);
        text-align: left;
        background: none;
    }
    .header__contact-clinic {
        font-size: var(--fontSize-xs);
    }
    .header__contact-phone {
        margin-block-start: var(--spacing-2);
        font-size: var(--fontSize-xl);
        line-height: var(--lineHeight-none);
    }
    .header__contact-phone::before {
        display: none;
    }
}

/* ====================================
ヘッダー・フッター > 下層ページヘッダー
==================================== */

.page-header {
    background-color: var(--color-background-accent);
}

.page-header__inner {
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-block-start: clamp(14rem, 11.3239rem + 7.136vw, 21.6rem);
    padding-block-end: clamp(var(--spacing-8), 2.6366rem + 1.502vw, var(--spacing-12));
    padding-inline: var(--spacing-8);
}

.page-header::after {
    display: block;
    content: "";
    block-size: 2.4rem;
    inline-size: 100dvw;
    border-top-left-radius: var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
    background-color: var(--color-background-base);
}

.breadclumb {
    text-align: right;
    gap: var(--spacing-4);
    margin-block-start: clamp(var(--spacing-16), 5.8366rem + 1.502vw, var(--spacing-20));
    font-size: clamp(var(--fontSize-base), 1.4857rem + 0.357vw, var(--fontSize-xl));
    line-height: var(--lineHeight-none);
    letter-spacing: var(--letterSpacing-widest);
    color: var(--color-text-muted);
}

.breadclumb__inner {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* ====================================
ヘッダー・フッター > 共通フッター
==================================== */

.footer {
    padding-block-start: clamp(var(--spacing-12), 5.8366rem + 1.502vw, var(--spacing-20));
    padding-inline: var(--spacing-2);
    text-align: center;
    border-top-left-radius: var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
    background-color: var(--color-background-accent);
}

.footer__topic {
    font-size: clamp(var(--fontSize-2xl), calc(2.1887rem + 0.563vw), var(--fontSize-3xl));
    text-align: center;
}

.footer__wrapper {
    margin-block-start: var(--spacing-16);
    margin-inline: auto;
    padding-block: var(--spacing-12);
    padding-inline: var(--spacing-8);
    text-align: left;
    border-radius: var(--radius-xl);
    background-color: var(--color-background-base);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.footer__clinic-name {
    margin-block-start: clamp(var(--spacing-8), 2.6366rem + 1.502vw, var(--spacing-12));
    font-size: clamp(var(--fontSize-xl), 1.8592rem + 0.376vw,var(--fontSize-2xl));
    letter-spacing: 0.5em;
}

.footer__location {
    font-size: clamp(var(--fontSize-base), 1.4857rem + 0.357vw, var(--fontSize-xl));
}

.footer__address {
    font-size: clamp(var(--fontSize-sm), 1.3429rem + 0.179vw, var(--fontSize-base));
    color: var(--color-text-muted);
}

.footer__comment {
    font-size: var(--fontSize-base);
    text-align: center;
}

.footer__privacy {
    margin-block-start: var(--spacing-8);
    font-size: var(--fontSize-sm);
    color: var(--color-text-muted);
}

.footer__copyright {
    margin-block-start: clamp(var(--spacing-4), 1.3183rem + 0.751vw, var(--spacing-6));
    padding-block: clamp(var(--spacing-4), 1.3183rem + 0.751vw, var(--spacing-6));
    border-top: 1px solid var(--color-border);
    font-size: var(--fontSize-sm);
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .footer__wrapper {
        max-inline-size: calc(1120px + var(--spacing-6) + var(--spacing-6));
    }
    .footer__list {
        flex-direction: row;
        justify-content: space-between;
        gap: var(--spacing-8);
    }
}

/* ============================================================================
ホームページ
1. ヒーローセクション
2. メッセージセクション
3. 白美会の司会医院セクション
4. 白美会についてセクション
5. お知らせセクション
============================================================================ */

/* ====================================
ホーム > ヒーローセクション
==================================== */

.hero {
    position: relative;
    padding-block-start: 4rem;
}

.hero__wrapper {
    position: relative;
}

.hero__subcopy {
    font-size: var(--fontSize-xl);
    line-height: var(--lineHeight-relaxed);
    letter-spacing: var(--letterSpacing-widest);
    color: var(--color-text-accent);
}

.hero__copy {
    margin-block-start: var(--spacing-6);
    font-size: clamp(2.8rem, 2.4571rem + 1.071vw, 4rem);
    line-height: var(--lineHeight-relaxed);
    letter-spacing: var(--letterSpacing-widest);
}

.hero__image {
    margin-block-start: var(--spacing-12);
}

.hero__calender {
    margin-block-start: var(--spacing-12);
}

.hero__typography {
    /* margin-block-start: -5rem;
    margin-block-end: -2.5dvw; */
    font-size: 18dvw;
    font-weight: 200;
    line-height: var(--lineHeight-none);
    text-align: center;
    color: var(--color-pink-300);
}

.hero__typography-pc {
    display: none;
}

.hero__scroll {
    display: none;
    align-items: center;
    gap: var(--spacing-3);
    position: absolute;
    inset-block-start: 3.2rem;
    inset-inline-end: 10dvw;
    font-size: 1.2rem;
    color: var(--color-text-muted);
    writing-mode: vertical-rl;
}
.hero__scroll::before,
.hero__scroll::after {
    display: block;
    content: "";
    block-size: 1px;
    inline-size: 40px;
    background-color: var(--color-border);
}

@media (min-width: 768px) {
    .hero__typography {
        margin-block-end: 1.5dvw;
        font-size: 8dvw;
    }
    .hero__typography-pc {
        display: inline-block;
    }
    .hero__scroll {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .hero__wrapper {
        block-size: 56rem;
        inline-size: 100%;
    }
    .hero__image {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        inline-size: calc(736 / 1120 * 100%);
        aspect-ratio: 16 / 9;
        margin-block-start: 0;
        z-index: 100;
    }
    .hero__calender {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        inline-size: calc(736 / 1120 * 100%);
        margin-block-start: 0;
        padding-block: var(--spacing-6);
        padding-inline: var(--spacing-6);
        border-radius: var(--radius-3xl);
        z-index: 200;
    }
}

/* ====================================
ホーム > メッセージセクション
==================================== */

@media (min-width: 1024px) {
    .message__image {
        grid-row: 1 / span 3;
    }
}

/* ====================================
ホーム > 白美会の歯科医院セクション
==================================== */

.clinics__list {
    display: grid;
    gap: var(--spacing-2);
    max-inline-size: 44rem;
    margin-inline: auto;
}

.clinics__item {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--spacing-12);
    padding-block: var(--spacing-16);
    padding-inline: clamp(var(--spacing-8), 2.0732rem + 3.005vw, var(--spacing-16));
    background-color: var(--color-background-accent);
    border-radius: var(--radius-2xl);
}

.clinics__item h3 {
    font-size: clamp(var(--fontSize-2xl), calc(2.1887rem + 0.563vw), var(--fontSize-3xl));
    letter-spacing: var(--letterSpacing-widest);
    text-align: center;
}

.clinics__image {
    aspect-ratio: 4 / 3;
    inline-size: 50%;
    margin-inline: auto;
}

.clinics__location {
    font-size: clamp(var(--fontSize-base), 1.4857rem + 0.357vw, var(--fontSize-xl));
}


.clinics__address {
    font-size: clamp(var(--fontSize-sm), 1.3429rem + 0.179vw, var(--fontSize-base));
    color: var(--color-text-muted);
}

@media (min-width: 1024px) {
    .clinics__list {
        grid-template-columns: repeat(2, 1fr);
        max-inline-size: none;
    }
}

/* ====================================
ホーム > 白美会についてセクション
==================================== */

.about__since {
    display: none;
    color: var(--color-pink-300);
}

@media (min-width: 1024px) {
    .about__image {
        grid-row: 1 / span 3;
    }
    .about__since-wrapper {
        position: relative;
        padding-block-end: 20rem;
    }
    .about__since {
        display: block;
        position: absolute;
        inset-block-end: 0.6rem;
        inset-inline-end: 0.6rem;
        font-size: 16rem;
        font-weight: 200;
        line-height: var(--lineHeight-none);
        letter-spacing: var(--letterSpacing-widest);
        /* color: var(--color-white); */
    }
}

/* ====================================
ホーム > お知らせセクション
==================================== */

.news__list {
    max-inline-size: 736px;
    margin-block-start: var(--spacing-12);
    margin-inline: auto;
}

.news__item {
    padding-block: var(--spacing-4);
    padding-block: clamp(var(--spacing-4), 1.3183rem + 0.751vw, var(--spacing-6));
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.4s ease;
}

.news__item:hover {
    background-color: var(--color-background-accent);
}

.news__date {
    font-size: var(--fontSize-base);
    color: var(--color-text-accent);
}

.news__category {
    margin-inline-start: var(--spacing-3);
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-4);
    font-size: var(--fontSize-sm);
    border-radius: var(--radius-full);
    background-color: var(--color-background-accent);
}

.news__topic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: var(--spacing-2);
}

.news__icon {
    color: var(--color-text-accent);
}

.news__button {
    margin-block-start: clamp(var(--spacing-12), 3.6732rem + 3.005vw ,var(--spacing-20));
}

/* ============================================================================
診療案内ページ
1. 診療科目セクション
2. 治療の流れセクション
============================================================================ */

/* ====================================
診療案内 > 診療科目セクション
==================================== */

.services__list { 
    display: grid;
    row-gap: clamp(var(--spacing-1), 0.2592rem + 0.376vw, var(--spacing-2));
}

.services__item {
    inline-size: 100%;
    padding-block: clamp(var(--spacing-6), 2.1183rem + 0.751vw,var(--spacing-8));
    padding-inline: var(--spacing-8);
    border-radius: var(--radius-2xl);
    background-color: var(--color-background-accent);
}

.services__item p {
    display: none;
}

.services__item.is-open p {
    display: block;
}

.services__topic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(var(--fontSize-xl), 1.7143rem + 0.893vw, var(--fontSize-3xl));
    letter-spacing: var(--letterSpacing-widest);
}

.services__topic--narrow {
    letter-spacing: var(--letterSpacing-normal);
}

.services__topic::after {
    display: inline-block;
    content: "";
    block-size: 1.6rem;
    inline-size: 1.6rem;
    background-image: url(assets/image/common/plus-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.services__item.is-open .services__topic::after {
    background-image: url(assets/image/common/minus-icon.svg);
}

.services__description {
    margin-block-start: clamp(var(--spacing-3), -0.0676rem + 3.38vw, var(--spacing-12));
}

@media (min-width: 1024px) {
    .services__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
        align-items: start;
    }
    .services__item {
        block-size: 100%;
        padding-block: var(--spacing-12);
        padding-inline: var(--spacing-12);
    }
    .services__topic::after {
        display: none;
    }
    .services__item p {
        display: block;
    }
}

/* ====================================
診療案内 > 治療の流れセクション
==================================== */

.flow__list {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-1), 0.2592rem + 0.376vw, var(--spacing-2));
}

.flow__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    padding-block: clamp(var(--spacing-8), 2.6366rem + 1.502vw, var(--spacing-12));
    padding-inline: clamp(var(--spacing-6), 1.5549rem + 2.254vw, var(--spacing-16));
    border-radius: var(--radius-xl);
    background-color: var(--color-background-base);
}

.flow__topic {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--fontSize-2xl-3xl);
    letter-spacing: var(--letterSpacing-widest);
}

.flow__topic--sm {
    font-size: var(--fontSize-2xl);
}

.flow__topic span {
    font-size: var(--fontSize-4xl);
    font-weight: 300;
    letter-spacing: var(--letterSpacing-widest);
    color: var(--color-text-accent);
}

.flow__contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding-block-start: var(--spacing-6);
    border-top: 1px solid var(--color-border);
}

.flow__clinic-name {
    font-size: var(--fontSize-xl);
}

.flow__muted {
    margin-block-start: var(--spacing-4);
    font-size: var(--fontSize-base);
    color: var(--color-text-muted);
}

@media (min-width: 1024px) {
    .flow__item {
        flex-direction: row;
        gap: var(--spacing-16);
        align-items: center;
    }
    .flow__topic {
        flex-direction: row;
        gap: var(--spacing-6);
        flex: 0 0 25.6rem;
    }
    .flow__description {
        flex: 1 1 100%;
    }
}

/* ============================================================================
当院についてページ
1. ドクターセクション
2. 白美会の理念セクション
3. 患者さまあへのお約束セクション
============================================================================ */

/* ====================================
ホーム > ドクターセクション
==================================== */

.doctor__career-topic {
    font-weight: 700;
    color: var(--color-text-accent);
}

.doctor__career-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-block-start: var(--spacing-4);
    padding-block-end: var(--spacing-8);
}

.doctor__career-item.dot::before {
    background-color: var(--color-background-accent);
}

.doctor__message {
    padding-block-start: var(--spacing-8);
    border-top: solid 1px var(--color-border);
}

.doctor__image {
    max-inline-size: 352px;
    margin-inline: auto;
    aspect-ratio: 3 / 4;
}

@media (min-width: 768px) {
    .doctor__image {
        grid-row: span 2;
    }
}

/* ====================================
当院について > 白美会の理念セクション
==================================== */

.philosophy__topic {
    text-align: center;
    line-height: var(--lineHeight-relaxed);
}

.philosophy__topic span {
    font-size: var(--fontSize-base);
    color: var(--color-text-accent);
}

.philosophy__topic h3 {
    margin-block-start: var(--spacing-2);
    font-size: var(--fontSize-2xl-3xl);
    letter-spacing: var(--letterSpacing-widest);
}

.philosophy__description {
    margin-block-start: var(--spacing-8);
    margin-block-start: clamp(var(--spacing-8), 2.6366rem + 1.502vw, var(--spacing-12));
}

.philosophy__comment {
    font-size: var(--fontSize-base);
}

/* ====================================
当院について > 患者さまへのお約束セクション
==================================== */

.promises__list {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-1), 0.2592rem + 0.376vw, var(--spacing-2));
}

.promises__item {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-6), 2.1183rem + 0.751vw, var(--spacing-8));
    padding-block: var(--spacing-6);
    padding-inline: var(--spacing-6);
    padding-inline: clamp(var(--spacing-6), 2.1183rem + 0.751vw, var(--spacing-8));
    border-radius: var(--radius-xl);
    background-color: var(--color-background-accent);
}

.promises__number {
    font-size: clamp(var(--fontSize-xl), 1.1662rem + 1.69vw,var(--fontSize-4xl));
    font-weight: 300;
    letter-spacing: var(--letterSpacing-widest);
    color: var(--color-text-accent);
}

@media (min-width: 768px) {
    /* .promises__comment {
        text-align: center;
    } */
}

/* ============================================================================
アクセス・診療時間
1. アクセス・診療時間セクション
============================================================================ */

/* ====================================
アクセス・診療時間 > アクセス・診療時間セクション
==================================== */

.information__image {
    aspect-ratio: 4 / 3;
}

.information__map {
    aspect-ratio: 1 / 1;
}

.information__calender {
    align-self: self-start;
}

.information__parking {
    margin-block-start: var(--spacing-6);
}
.information__parking {
    margin-block-start: var(--spacing-6);
    padding-block-end: var(--spacing-6);
}

.information__phone {
    padding-block-start: var(--spacing-6);
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .information__map {
        block-size: 100%;
        inline-size: 100%;
        aspect-ratio: auto;
    }
    .information__phone .phone {
        font-size: clamp(var(--fontSize-2xl), -0.5538rem + 2.885vw, var(--fontSize-4xl));
    }
}

/* ============================================================================
投稿ページ
============================================================================ */

/* ====================================
投稿ページ
==================================== */

.single__header {
    padding-block-end: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.single__topic {
    margin-block-start: var(--spacing-4);
    font-size: var(--fontSize-2xl-3xl);
}

.single__content {
    margin-block-start: var(--spacing-20);
}

.single__content h2,
.single__content h3,
.single__content h4 {
    margin-block-start: var(--spacing-12);
}

.single__button {
    margin-block-start: var(--spacing-40);
}