@charset "UTF-8";

/* =====================================================
   TOP ページ専用
   Figma「クリエイト歯科様再提出4回目」1440px 幅を基準に組んでいる
   ===================================================== */

/* ===== 写真に重ねる青みのフィルター =====
   Figma 上ではすべての写真に rgba(94,191,255,0.1) が乗っている。
   画像に焼き込まず CSS で重ねているので、写真を差し替えても色味が揃う。 */
.mv__image::after,
.about__image::after,
.features-item__image::after,
.treatment-item__image::after,
.staff-item__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(94, 191, 255, 0.1);
    pointer-events: none;
}

/* =====================================================
   共通：セクション見出し（英字ラベル＋日本語タイトル）
   ===================================================== */
.section-header {
    text-align: center;
}

.section-header__en {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.33;
    color: #a4d9ff;
}

.section-header__title {
    margin-top: 10px;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.44;
}

/* =====================================================
   共通：角丸ボタン
   ===================================================== */
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 212px;
    height: 61px;
    border-radius: 40px;
    background-color: #4a9bd6;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 700;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* ホバーの効き方はヘッダーのボタン（base.css）とそろえている */
@media (hover: hover) {
    .button:hover {
        opacity: 1;
        background-color: #3d8ac2;
        box-shadow: 0 8px 16px rgba(74, 155, 214, 0.4);
        transform: translateY(-3px);
    }

    .button:active {
        transform: translateY(-1px);
    }
}

/* =====================================================
   共通：診療時間表
   ファーストビューと予約セクションで大きさだけ変えて使い回す
   ===================================================== */
.schedule {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #5281b4;
    text-align: center;
}

.schedule__head {
    width: 36%;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}

.schedule__head,
.schedule__day {
    padding: 10px 0;
    line-height: 1.4;
}

.schedule__time {
    font-weight: 400;
}

.schedule__time,
.schedule__data {
    padding: 10px 0;
    border-top: 1px solid #5281b4;
    line-height: 1.4;
}

.schedule tbody tr:last-child .schedule__time,
.schedule tbody tr:last-child .schedule__data {
    border-bottom: 1px solid #5281b4;
}

/* ● 診療あり */
.schedule__circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #5281b4;
    vertical-align: middle;
}

/* — 休診 */
.schedule__line {
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #5281b4;
    vertical-align: middle;
}

.schedule__notes {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.2;
}

/* 予約セクションの大きいほう */
.schedule--large .schedule__head {
    width: 36%;
}

.schedule--large .schedule__head,
.schedule--large .schedule__day,
.schedule--large .schedule__time,
.schedule--large .schedule__data {
    padding: 22px 0;
}

/* =====================================================
   メインビジュアル
   ===================================================== */
.mv {
    margin-top: 20px;
}

.mv__container {
    position: relative;
    width: 91.4%;
    max-width: 1316px;
    margin-inline: auto;
}

.mv__image {
    position: relative;
    overflow: hidden;
    border-radius: 100px;
}

/* デザインの比率（1316 : 746）を基本にしつつ、ファーストビューが
   画面から溢れないよう高さの上限を付ける。上限に当たったぶんは
   object-fit: cover が上下を切り詰めるので、比率が崩れることはない。
   引いている 165px の内訳は ヘッダー105 + .mv の上余白20 + 診療時間表のはみ出し16 + 余裕24。
   svh は非対応ブラウザ向けに vh の指定を先に置いて上書きしている。 */
.mv__image img {
    display: block;
    width: 100%;
    aspect-ratio: 1316 / 746;
    max-height: calc(100vh - 165px);
    max-height: calc(100svh - 165px);
    object-fit: cover;
}

/* コピーは写真の中に置く。SP で診療時間表が写真の下に回っても、
   位置の基準が写真のままになるよう .mv__image の子にしている。 */
.mv__copy {
    position: absolute;
    left: 2.1%;
    top: 49%;
    z-index: 1;
    font-size: 35px;
    font-weight: 900;
    line-height: 1.46;
    letter-spacing: 0.03em;
    color: #ffffff;
}

/* 診療時間表は画像の右下から少しはみ出す。
   白地は Figma 通り 510 x 角丸 100px。カードが 510px に収まらない幅
   （画面幅 558px 未満）に入ったら、角丸と左右余白をカード幅と同じ比率で
   縮めて形を保つ。min() の 18vw / 9.2vw は「カード幅 = 画面幅 x 0.914」から
   逆算した値なので、.mv__container の幅（91.4%）を変えたらここも直すこと。
   左右余白は必ず角丸の半分以上を残す。下回ると角の丸みが一番上の行に
   食い込んで、文字が白地からはみ出して見える。 */
.mv__schedule {
    position: absolute;
    right: -32px;
    bottom: -16px;
    width: min(510px, 100%);
    padding: 28px min(51px, 9.2vw) 33px;
    border-radius: min(100px, 18vw);
    /* 万一中身がはみ出しても白地の角丸からこぼれないようにする */
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(82, 129, 180, 0.14);
}

.mv__schedule .schedule__notes {
    margin-top: 13px;
    padding-left: 29px;
}

/* =====================================================
   メッセージ（歯のイラスト＋リード文）
   ===================================================== */
.message {
    padding-top: 463px;
}

.message__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 51px;
}

.message__icon {
    flex-shrink: 0;
    width: 129px;
    height: 124px;
}

.message__text {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.62;
    letter-spacing: 0.2em;
}

.message__strong {
    font-size: 35px;
    color: #78c6ff;
}

/* =====================================================
   当院について
   ===================================================== */
.about {
    padding-top: 419px;
}

.about__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 92px;
}

.about__body {
    flex-shrink: 0;
    width: 385px;
}

.about__en {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    line-height: 1.33;
    color: #a4d9ff;
}

.about__title {
    margin-top: 9px;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.47;
}

.about__accent {
    color: #78c6ff;
}

.about__text {
    margin-top: 37px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.47;
}

.about__body .button {
    margin-top: 52px;
}

.about__image {
    position: relative;
    width: 579px;
    overflow: hidden;
    border-radius: 200px;
    /* Figma でわずかに傾けてある。写真の四隅の余白は border-radius が吸収する */
    transform: rotate(-0.4deg);
}

.about__image img {
    display: block;
    width: 100%;
    aspect-ratio: 579 / 424;
    object-fit: cover;
}

/* =====================================================
   クリエイト歯科の特徴
   ===================================================== */
.features {
    padding-top: 278px;
}

.features__lead {
    margin-top: 31px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.44;
    text-align: center;
}

.features-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 78px;
    row-gap: 49px;
    margin-top: 75px;
}

/* 左端の縦線＋回転させた英字ラベルはこのセクション共通の飾り */
.features-item {
    position: relative;
    padding-left: 21px;
}

.features-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #5281b4;
}

.features-item__en {
    position: absolute;
    left: 3px;
    top: 0;
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #a4d9ff;
}

.features-item__image {
    position: relative;
    overflow: hidden;
    border-radius: 200px;
}

.features-item__image img {
    display: block;
    width: 100%;
    aspect-ratio: 279 / 187;
    object-fit: cover;
}

/* Figma では見出し・説明文とも折り返さず、写真の幅より少しはみ出している。
   その見え方に合わせて PC では nowrap（SP では下で解除する）。 */
.features-item__title {
    margin-top: 28px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.35;
    white-space: nowrap;
}

.features-item__text {
    margin-top: 11px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.44;
    white-space: nowrap;
}

/* =====================================================
   診療内容
   ===================================================== */
.treatment {
    padding-top: 300px;
}

.treatment__container {
    width: 91.7%;
    max-width: 1320px;
    margin-inline: auto;
    padding: 109px 0 92px;
    border-radius: 200px;
    background-color: #eff8ff;
}

.treatment-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 147px;
    row-gap: 172px;
    margin-top: 97px;
}

.treatment-item {
    position: relative;
    padding-left: 55px;
}

.treatment-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 37px;
    bottom: 0;
    width: 1px;
    background-color: #5281b4;
}

.treatment-item__en {
    position: absolute;
    left: 23px;
    top: 37px;
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #a4d9ff;
}

.treatment-item__image {
    position: relative;
    overflow: hidden;
    border-radius: 200px;
}

.treatment-item__image img {
    display: block;
    width: 100%;
    aspect-ratio: 365 / 255;
    object-fit: cover;
}

.treatment-item__title {
    margin-top: 24px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.45;
    text-align: center;
}

.treatment-item__text {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.44;
    text-align: center;
}

/* =====================================================
   スタッフ紹介
   ===================================================== */
.staff {
    padding-top: 257px;
}

/* 3 枚並べるため、他セクションより広い幅を使う */
.staff__inner {
    width: 92.6%;
    max-width: 1334px;
}

.staff-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    margin-top: 115px;
}

.staff-item {
    position: relative;
    padding-left: 37px;
}

/* 縦線は写真の途中から始まり、本文より少し下まで伸びる */
.staff-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 144px;
    bottom: -6px;
    width: 1px;
    background-color: #5281b4;
}

.staff-item__en {
    position: absolute;
    left: 17px;
    top: 144px;
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #a4d9ff;
}

.staff-item__image {
    position: relative;
    overflow: hidden;
    border-radius: 200px;
}

.staff-item__image img {
    display: block;
    width: 100%;
    aspect-ratio: 392 / 458;
    object-fit: cover;
}

.staff-item__name {
    margin-top: 18px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.35;
}

/* 名前の下半分だけ 水性マーカーを引いたような装飾 */
.staff-item__marker {
    padding: 0 10px 2px 2px;
    background: linear-gradient(to top, #d9edfb 45%, transparent 45%);
}

.staff-item__text {
    margin-top: 29px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
}

/* =====================================================
   院内ギャラリー（画面いっぱいの帯）
   ===================================================== */
.gallery {
    margin-top: 160px;
}

.gallery__list {
    display: flex;
}

.gallery__item {
    width: 25%;
}

.gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 360 / 248;
    object-fit: cover;
}

/* =====================================================
   お知らせ
   ===================================================== */
.news {
    margin-top: 220px;
}

.news__container {
    width: 88%;
    max-width: 1056px;
    margin-inline: auto;
    padding: 46px 20px 122px;
    background-color: #eff8ff;
}

.news-list {
    width: 100%;
    max-width: 607px;
    margin: 63px auto 0;
}

.news-item + .news-item {
    margin-top: 15px;
}

.news-item__link {
    display: flex;
    gap: 65px;
}

.news-item__date {
    flex-shrink: 0;
    width: 92px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
}

.news-item__title {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.45;
}

/* =====================================================
   アクセス
   ===================================================== */
.access {
    padding-top: 165px;
}

.access__name {
    margin-top: 64px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.access__address {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.access__photo {
    width: 100%;
    max-width: 575px;
    margin: 61px auto 0;
}

.access__photo img {
    display: block;
    width: 100%;
}

.access__map {
    width: 100%;
    max-width: 1055px;
    margin: 117px auto 0;
}

.access__map img {
    display: block;
    width: 100%;
}

.access__parking {
    margin-top: 38px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

.access__notes {
    margin-top: 19px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

/* =====================================================
   予約（診療時間表＋予約ボタン）
   ===================================================== */
.reservation {
    margin-top: 143px;
    padding: 109px 0 118px;
    background-color: #f6fbff;
}

.reservation__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.reservation__schedule {
    width: 646px;
    flex-shrink: 0;
    padding: 30px 62px 23px 10px;
    border-radius: 30px;
    /* 万一中身がはみ出しても白地の角丸からこぼれないようにする */
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 14px rgba(82, 129, 180, 0.15);
}

.reservation__schedule .schedule__notes {
    margin: 20px 0 0 40px;
    font-size: 25px;
}

.reservation__buttons {
    display: flex;
    flex-direction: column;
    gap: 57px;
}

.reservation__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 316px;
    height: 97px;
    border-radius: 999px;
    background-color: #4a9bd6;
    box-shadow: 0 4px 10px rgba(74, 155, 214, 0.4);
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 25px;
    font-weight: 700;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* ホバーの効き方はヘッダーのボタン（base.css）とそろえている。
   ここだけ、行き先を示す ▶ も一緒に少し右へ動かす。 */
@media (hover: hover) {
    .reservation__button:hover {
        opacity: 1;
        background-color: #3d8ac2;
        box-shadow: 0 10px 20px rgba(74, 155, 214, 0.45);
        transform: translateY(-3px);
    }

    .reservation__button:hover .reservation__icon {
        transform: translateX(5px);
    }

    .reservation__button:active {
        transform: translateY(-1px);
    }
}

.reservation__icon {
    position: absolute;
    right: 37px;
    transition: transform 0.3s;
    width: 16px;
    height: 16px;
}

/* =====================================================
   スクロールで浮かび上がる演出
   JS が画面に入った要素へ .is-visible を付ける
   ===================================================== */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   タブレット〜小さめのPC（1080px 以下）
   1440px 前提で置いている固定幅パーツだけをここで畳む
   ===================================================== */
@media (max-width: 1080px) {

    /* メインビジュアルのコピーは写真の上に絶対配置なので、写真の縮小に合わせて小さくする */
    .mv__copy {
        font-size: 28px;
    }

    /* 写真が小さくなると 510px の表が写真をほとんど覆ってしまうので、
       重ねるのをやめて写真の下に置く。白地の形（角丸 100px）はそのまま保つ。 */
    .mv__schedule {
        position: static;
        margin: 20px auto 0;
    }

    /* 診療時間表（646px）とボタン（316px）が横に並びきらないので縦積みにする */
    .reservation__inner {
        flex-direction: column;
        gap: 32px;
    }

    .reservation__schedule {
        width: 100%;
        max-width: 646px;
    }
}

/* =====================================================
   SP（768px 以下）
   ===================================================== */
@media (max-width: 768px) {

    /* --- 共通 --- */
    .section-header__title {
        margin-top: 8px;
        font-size: 24px;
    }

    .button {
        width: 180px;
        height: 52px;
        font-size: 16px;
    }

    /* --- 診療時間表 --- */
    .schedule {
        font-size: 13px;
    }

    .schedule__head {
        width: 32%;
    }

    .schedule__head,
    .schedule__day,
    .schedule__time,
    .schedule__data {
        padding: 8px 0;
    }

    .schedule__circle {
        width: 10px;
        height: 10px;
    }

    .schedule__line {
        width: 12px;
    }

    .schedule__notes {
        font-size: 14px;
    }

    .schedule--large .schedule__head,
    .schedule--large .schedule__day,
    .schedule--large .schedule__time,
    .schedule--large .schedule__data {
        padding: 12px 0;
    }

    /* --- メインビジュアル ---
       PC では写真の上に重ねているコピーと時間表を、SP では縦に積む */
    .mv {
        margin-top: 12px;
    }

    .mv__container {
        width: 92%;
    }

    .mv__image {
        border-radius: 30px;
    }

    .mv__image img {
        aspect-ratio: 3 / 4;
    }

    /* SP は写真を縦長に切るため、コピーが重なる位置が明るくなる。
       白抜きが飛ばないよう影を足して読めるようにする（PC は不要なので付けない）。 */
    .mv__copy {
        left: 6%;
        top: auto;
        bottom: 28px;
        font-size: 22px;
        line-height: 1.5;
        text-shadow: 0 2px 10px rgba(45, 95, 145, 0.45);
    }

    /* 角丸と左右余白は clamp で連動して縮むので、ここでは上下だけ詰める。
       角丸を小さい固定値に変えると Figma の形から離れるのでやらない。 */
    .mv__schedule {
        padding-block: 22px 26px;
    }

    .mv__schedule .schedule__notes {
        margin-top: 10px;
        padding-left: 0;
        text-align: center;
    }

    /* --- メッセージ --- */
    .message {
        padding-top: 90px;
    }

    .message__inner {
        flex-direction: column;
        gap: 20px;
    }

    .message__icon {
        width: 80px;
        height: 77px;
    }

    .message__text {
        font-size: 16px;
        letter-spacing: 0.08em;
        text-align: center;
    }

    .message__strong {
        font-size: 21px;
    }

    /* --- 当院について --- */
    .about {
        padding-top: 80px;
    }

    .about__inner {
        flex-direction: column-reverse;
        gap: 32px;
    }

    .about__body {
        width: 100%;
    }

    .about__title {
        font-size: 24px;
    }

    .about__text {
        font-size: 15px;
    }

    .about__body .button {
        margin-top: 28px;
    }

    .about__image {
        width: 100%;
        border-radius: 100px;
    }

    /* --- 特徴 --- */
    .features {
        padding-top: 90px;
    }

    .features__lead {
        margin-top: 20px;
        font-size: 14px;
        text-align: left;
    }

    .features-list {
        grid-template-columns: 1fr;
        row-gap: 40px;
        margin-top: 40px;
    }

    /* 幅が足りないので PC の nowrap を解除する */
    .features-item__title {
        font-size: 18px;
        white-space: normal;
    }

    .features-item__text {
        font-size: 14px;
        white-space: normal;
    }

    /* --- 診療内容 --- */
    .treatment {
        padding-top: 90px;
    }

    .treatment__container {
        width: 100%;
        padding: 60px 0;
        border-radius: 40px;
    }

    .treatment-list {
        grid-template-columns: 1fr;
        row-gap: 56px;
        margin-top: 40px;
    }

    .treatment-item {
        padding-left: 32px;
    }

    .treatment-item__en {
        left: 12px;
    }

    .treatment-item__image {
        border-radius: 100px;
    }

    .treatment-item__title {
        font-size: 20px;
    }

    .treatment-item__text {
        font-size: 14px;
    }

    /* --- スタッフ紹介 --- */
    .staff {
        padding-top: 90px;
    }

    .staff__inner {
        width: 88%;
    }

    .staff-list {
        grid-template-columns: 1fr;
        row-gap: 48px;
        margin-top: 40px;
    }

    .staff-item {
        padding-left: 28px;
    }

    .staff-item::before,
    .staff-item__en {
        top: 80px;
    }

    .staff-item__en {
        left: 8px;
    }

    .staff-item__image {
        border-radius: 100px;
    }

    .staff-item__name {
        font-size: 18px;
    }

    .staff-item__text {
        margin-top: 18px;
        font-size: 15px;
    }

    /* --- ギャラリー --- */
    .gallery {
        margin-top: 70px;
    }

    .gallery__list {
        flex-wrap: wrap;
    }

    .gallery__item {
        width: 50%;
    }

    /* --- お知らせ --- */
    .news {
        margin-top: 70px;
    }

    .news__container {
        width: 100%;
        padding: 40px 6% 48px;
    }

    .news-list {
        margin-top: 28px;
    }

    .news-item + .news-item {
        margin-top: 16px;
    }

    .news-item__link {
        flex-direction: column;
        gap: 2px;
    }

    .news-item__date {
        width: auto;
        font-size: 14px;
    }

    .news-item__title {
        font-size: 16px;
    }

    /* --- アクセス --- */
    .access {
        padding-top: 80px;
    }

    .access__name,
    .access__address,
    .access__parking,
    .access__notes {
        font-size: 15px;
    }

    .access__name {
        margin-top: 32px;
    }

    .access__photo {
        margin-top: 32px;
    }

    .access__map {
        margin-top: 40px;
    }

    /* --- 予約 --- */
    .reservation {
        margin-top: 70px;
        padding: 56px 0;
    }

    .reservation__inner {
        flex-direction: column;
        gap: 32px;
    }

    /* 角丸 30px は Figma の値。SP でも白地の形は変えない */
    .reservation__schedule {
        width: 100%;
        padding: 22px 16px 26px;
    }

    .reservation__schedule .schedule__notes {
        margin: 12px 0 0;
        font-size: 15px;
        text-align: center;
    }

    .reservation__buttons {
        width: 100%;
        gap: 16px;
    }

    .reservation__button {
        width: 100%;
        height: 68px;
        font-size: 18px;
    }

    .reservation__icon {
        right: 24px;
        width: 12px;
        height: 12px;
    }
}

/* =====================================================
   アニメーションを控えたい設定のときは動かさない
   ===================================================== */
@media (prefers-reduced-motion: reduce) {

    .fade-up {
        opacity: 1;
        transform: none;
    }

    /* ボタンのホバーは浮き上がり（動き）をやめ、色の変化だけ残す */
    .button:hover,
    .button:active,
    .reservation__button:hover,
    .reservation__button:active,
    .reservation__button:hover .reservation__icon {
        transform: none;
    }
}