@charset "utf-8";

/* ===== Hero ===== */
.hero {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: calc(100vh - 130px);
}

.hero .hero-img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}



.hero-content {
    position: relative;
    z-index: 2;
    padding: 40px 24px;
    max-width: 520px;
    text-align: center;
    margin: auto;
    translate: -400px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
}

.hero-content::before {
    content: "";
    position: absolute;
    inset: -140px -120px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.85) 45%,
            rgba(255, 255, 255, 0.4) 70%,
            rgba(255, 255, 255, 0) 100%);
}


.hero-content h1 {
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.7;
    font-weight: 700;
}

.hero-content h1 .accent {
    color: var(--green-dark);
}

.hero-content p {
    margin-top: 16px;
}

/* ===== Section: Orthodontics philosophy ===== */
.section-ortho {
    background: var(--green-main);
    color: #fff;
    padding: 60px 0 70px;
}

.eyebrow {
    font-size: clamp(30px, 6vw, 52px);
    font-weight: 800;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .55);
    text-align: center;
    line-height: 1;
}

.section-heading {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 36px;
}

.section-heading h2 {
    font-size: 22px;
    font-weight: 700;
}

.section-heading .sub {
    color: #fff;
    font-weight: 700;
}


.philosophy-box {
    background: #fff;
    color: var(--ink);
    border-radius: 35px;
    padding: 65px 75px 44px;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 1;
}

.philosophy-box .eyebrow {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    color: rgba(202, 213, 75, 0.19);
    font-size: clamp(30px, 7vw, 120px);
}

.philosophy-box .section-heading .sub {
    font-size: 70%;
    color: inherit;
    display: block;
}

.philosophy-box .section-heading h2 {
    color: var(--ink);
    font-size: 35px;
    line-height: 1.4;
    padding-top: 60px;
}
@media(max-width:600px) {
  .philosophy-box .section-heading h2 {
    padding-top: 9vw;
  }
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 20px;
}

@media(min-width:800px) {
    .card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ortho-card {
    background: transparent;
    margin-bottom: 30px;
}

.ortho-card .thumb {
    overflow: hidden;
}
.ortho-card .tag {
    font-size: 18px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.ortho-card.child .tag {
    color: lch(71.5 66 104 / 1);
}

.ortho-card.adult .tag {
    color: var(--pink-accent);
}

.ortho-card h3 {
    font-size: 26px;
    margin-top: 6px;
    font-weight: 700;
    color: var(--ink);
    font-family: "Zen Maru Gothic", sans-serif;
}

.ortho-card p {
    /* font-size: 13px; */
    margin-top: 10px;
    color: var(--ink-soft);
}
.ortho-card_last {
  margin: 20px auto 40px;
  max-width: fit-content;
}

@media (min-width: 1240px) {
  .ortho-card {
    display: grid;
    gap: 0 20px;
    grid-template-columns: 1fr 1fr;
  }
  .ortho-card .thumb {
    grid-column: 2 / 3;
    grid-row: 1 / 5;
  }
}
@media (max-width: 1239px) {
  .ortho-card .tag {
    margin-top: 14px;
  }
  .ortho-card.adult .tag {
    text-align: center;
  }
  .ortho-card.adult h3 {
    text-align: center;
  }
  .ortho-card.adult .btn-row {
    justify-content: flex-end;
  }
  .ortho-card.adult .content {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

.child_check_wrap {
  background: #fafcfe;
  margin-bottom: 40px;
}
.child_check01,
.child_check02,
.child_check03 {
  padding: 0 20px 60px;
  position: relative;
}
.child_check03 {
  padding-bottom: 20px;
}
.child_check01::before,
.child_check02::before,
.child_check01::after,
.child_check02::after{
  content: "";
  position: absolute;
  left: 50%;
  width: 80px;
  height: 80px;
  bottom: -20px;
  clip-path: polygon(28% 0%, 72% 0%, 72% 50%, 100% 50%, 50% 100%, 0% 50%, 28% 50%);
  z-index: 1;
  translate: -50%;
}
.child_check01::before,
.child_check02::before {
    z-index: 2;
}
.child_check01::after,
.child_check02::after {
  width: 85px;
  height: 85px;
  bottom: -25px;
}
.child_check01::before {
    background: #4fb1dc;
}
.child_check02::before {
    background: #7cbf86;
}
.child_check01::after {
    background: #fff;
}
.child_check02::after {
    background: #fff;
}


@media (max-width: 559px) {
  .child_check_wrap {
    margin-bottom: 4vw;
  }
  .child_check01,
  .child_check02,
  .child_check03 {
    padding: 0 2vw 6vw;
  }
  .child_check03 {
    padding-bottom: 2vw;
  }
  .child_check01::before,
  .child_check02::before {
    height: 7vw;
    width: 7vw;
    bottom: -1vw;
  }
  .child_check01::after,
  .child_check02::after {
    height: 8vw;
    width: 8vw;
    bottom: -2vw;
  }
}

.btn-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--green-main);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 42px;
    border-radius: 32px;
    border: none;
    cursor: pointer;
    line-height: 1.5;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}

.btn.outline {
    background: transparent;
    border: 1px solid var(--green-main);
    color: #000;
}

.btn.c_pink {
    background: var(--pink-accent);
}

.btn.outline.c_pink {
    background: transparent;
    border-color: var(--pink-accent);
}

.btn-ico-cal {
    position: relative;
    padding-left: 60px;
}

.btn-ico-cal::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 5px;
    bottom: 5px;
    width: 30px;
    background: #fff;
    mask: 50% 50% / contain no-repeat;
    mask-image: url('data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPy0tPgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+Cgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJ3aWR0aDogNTEycHg7IGhlaWdodDogNTEycHg7IG9wYWNpdHk6IDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNEI0QjRCO30KPC9zdHlsZT4KPGc+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTQ5LjE5MywxMDMuNTI1YzE1Ljk5NCwwLDI4Ljk2NC0xMi45NywyOC45NjQtMjguOTczVjI4Ljk2NEMxNzguMTU3LDEyLjk3LDE2NS4xODcsMCwxNDkuMTkzLDAKCQlDMTMzLjE5LDAsMTIwLjIyLDEyLjk3LDEyMC4yMiwyOC45NjR2NDUuNTg5QzEyMC4yMiw5MC41NTUsMTMzLjE5LDEwMy41MjUsMTQ5LjE5MywxMDMuNTI1eiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiPjwvcGF0aD4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zNjIuODE1LDEwMy41MjVjMTUuOTk1LDAsMjguOTY0LTEyLjk3LDI4Ljk2NC0yOC45NzNWMjguOTY0QzM5MS43OCwxMi45NywzNzguODEsMCwzNjIuODE1LDAKCQljLTE2LjAwMiwwLTI4Ljk3MiwxMi45Ny0yOC45NzIsMjguOTY0djQ1LjU4OUMzMzMuODQzLDkwLjU1NSwzNDYuODEzLDEwMy41MjUsMzYyLjgxNSwxMDMuNTI1eiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiPjwvcGF0aD4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MzUuMTY0LDQxLjI4N2gtMTcuOTI1djMzLjI2NWMwLDMwLjAxNy0yNC40MTUsNTQuNDMyLTU0LjQyMyw1NC40MzJjLTMwLjAxNywwLTU0LjQzMS0yNC40MTUtNTQuNDMxLTU0LjQzMgoJCVY0MS4yODdIMjAzLjYxNXYzMy4yNjVjMCwzMC4wMTctMjQuNDE0LDU0LjQzMi01NC40MjIsNTQuNDMyYy0zMC4wMTYsMC01NC40MzItMjQuNDE1LTU0LjQzMi01NC40MzJWNDEuMjg3SDc2LjgzNgoJCWMtMzguNTI4LDAtNjkuNzYzLDMxLjIzNC02OS43NjMsNjkuNzYzdjMzMS4xODdDNy4wNzMsNDgwLjc2NSwzOC4zMDksNTEyLDc2LjgzNiw1MTJoMzU4LjMyOAoJCWMzOC41MjgsMCw2OS43NjMtMzEuMjM1LDY5Ljc2My02OS43NjNWMTExLjA1QzUwNC45MjcsNzIuNTIyLDQ3My42OTEsNDEuMjg3LDQzNS4xNjQsNDEuMjg3eiBNNDUwLjAyMyw0MjkuOTg4CgkJYzAsMTcuODI2LTE0LjUwMywzMi4zMjktMzIuMzI5LDMyLjMyOUg5NC4zMDZjLTE3LjgyNiwwLTMyLjMyOS0xNC41MDMtMzIuMzI5LTMyLjMyOVYxNzAuODc2aDM4OC4wNDdWNDI5Ljk4OHoiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ij48L3BhdGg+Cgk8cmVjdCB4PSIxOTAuNzI5IiB5PSIzNzEuNzY5IiBjbGFzcz0ic3QwIiB3aWR0aD0iNTEuMTkxIiBoZWlnaHQ9IjUxLjE5MiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiPjwvcmVjdD4KCTxyZWN0IHg9IjE5MC43MjkiIHk9IjI5Mi40MTkiIGNsYXNzPSJzdDAiIHdpZHRoPSI1MS4xOTEiIGhlaWdodD0iNTEuMTkiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ij48L3JlY3Q+Cgk8cmVjdCB4PSIxMTEuMzg2IiB5PSIzNzEuNzY5IiBjbGFzcz0ic3QwIiB3aWR0aD0iNTEuMTkiIGhlaWdodD0iNTEuMTkyIiBzdHlsZT0iZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyI+PC9yZWN0PgoJPHJlY3QgeD0iMTExLjM4NiIgeT0iMjkyLjQxOSIgY2xhc3M9InN0MCIgd2lkdGg9IjUxLjE5IiBoZWlnaHQ9IjUxLjE5IiBzdHlsZT0iZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyI+PC9yZWN0PgoJPHJlY3QgeD0iMzQ5LjQyMyIgeT0iMjEzLjA2NyIgY2xhc3M9InN0MCIgd2lkdGg9IjUxLjE5IiBoZWlnaHQ9IjUxLjE5MSIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiPjwvcmVjdD4KCTxyZWN0IHg9IjI3MC4wOCIgeT0iMjEzLjA2NyIgY2xhc3M9InN0MCIgd2lkdGg9IjUxLjE5OSIgaGVpZ2h0PSI1MS4xOTEiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ij48L3JlY3Q+Cgk8cmVjdCB4PSIyNzAuMDgiIHk9IjI5Mi40MTkiIGNsYXNzPSJzdDAiIHdpZHRoPSI1MS4xOTkiIGhlaWdodD0iNTEuMTkiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ij48L3JlY3Q+Cgk8cmVjdCB4PSIzNDkuNDIzIiB5PSIzNzEuNzY5IiBjbGFzcz0ic3QwIiB3aWR0aD0iNTEuMTkiIGhlaWdodD0iNTEuMTkyIiBzdHlsZT0iZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyI+PC9yZWN0PgoJPHJlY3QgeD0iMzQ5LjQyMyIgeT0iMjkyLjQxOSIgY2xhc3M9InN0MCIgd2lkdGg9IjUxLjE5IiBoZWlnaHQ9IjUxLjE5IiBzdHlsZT0iZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyI+PC9yZWN0PgoJPHJlY3QgeD0iMjcwLjA4IiB5PSIzNzEuNzY5IiBjbGFzcz0ic3QwIiB3aWR0aD0iNTEuMTk5IiBoZWlnaHQ9IjUxLjE5MiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiPjwvcmVjdD4KCTxyZWN0IHg9IjE5MC43MjkiIHk9IjIxMy4wNjciIGNsYXNzPSJzdDAiIHdpZHRoPSI1MS4xOTEiIGhlaWdodD0iNTEuMTkxIiBzdHlsZT0iZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyI+PC9yZWN0PgoJPHJlY3QgeD0iMTExLjM4NiIgeT0iMjEzLjA2NyIgY2xhc3M9InN0MCIgd2lkdGg9IjUxLjE5IiBoZWlnaHQ9IjUxLjE5MSIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiPjwvcmVjdD4KPC9nPgo8L3N2Zz4=');

}

.consult-box {
    position: relative;
    color: var(--ink);
    border-radius: 20px;
    margin-top: 56px;
    padding: 48px 24px 40px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.consult-box .bg-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('../../../uploads/2026/07/bg_top_consult.jpg');
    background-image: image-set(url('../../../uploads/2026/07/bg_top_consult.webp') 1x type("image/webp"),
            url('../../../uploads/2026/07/bg_top_consult_2x.webp') 2x type("image/webp"),
            url('../../../uploads/2026/07/bg_top_consult.jpg') 1x type("image/jpeg"),
            url('../../../uploads/2026/07/bg_top_consult_2x.jpg') 2x type("image/jpeg"));

    background-size: cover;
    background-position: center 25%;
}

.consult-box .bg-tint {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(226, 232, 178, 0.82);
    /* 黄緑系オーバーレイ */
}

.consult-box .lead {
    color: var(--ink);
    font-weight: 700;
    font-size: 28px;
    /* line-height: 1; */
    font-family: "fot-tsukuardgothic-std", sans-serif;
}

.consult-box h3 {
    font-size: 36px;
    font-weight: 800;
    margin-top: 4px;
    color: var(--teal-main);
    line-height: 1;
    font-family: "Zen Maru Gothic", sans-serif;
}

.consult-box .note {
    font-size: 18px;
    color: var(--ink);
    margin-top: 10px;
    font-weight: 700;
    font-family: "Zen Maru Gothic", sans-serif;
    /* line-height: 1; */
}

.consult-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 30px;
}

@media(min-width:700px) {
    .consult-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }
}

.consult-grid figure {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.consult-grid figure img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.consult-grid figcaption {
    font-size: 14px;
    font-weight: 700;
    color: var(--teal-main);
    padding: 12px 0;
}

.sample {
    position: relative;
}


.sample::before {
    content: "SAMPLE";
    position: absolute;
    inset: 0;
    color: rgba(0, 0, 0, 0.8);
    display: grid;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    /* padding: 10px; */
    /* background: rgba(0, 0, 0, 0.8); */
    z-index: 5;
}
.sample::after {
    content: "";
    position: absolute;
    left: calc(50% - 4em);
    width: 8em;
    top: calc(50% - 1.5em);
    height: 3em;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.consult-grid .sample::before {
    padding-bottom: 40px;
}
.consult-grid .sample::after {
    translate: 0 -20px;
}

.loan-banner {
    position: relative;
    margin-top: 36px;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    /* box-shadow: var(--shadow); */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    max-width: 60%;
    margin: 60px auto 20px;
}

.loan-banner .bg-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('../../../uploads/2026/07/bg-top-loan.jpg');
    background-size: cover;
    background-position: center;
}

.loan-banner .bg-tint {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #56bcdb;
    mix-blend-mode: multiply;
}

.loan-banner .loan-text {
    padding: 48px 24px;
    text-align: center;
    color: #fff;
    line-height: 1.4;
}

.loan-banner .loan-text .small-line {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 700;
    font-family: "fot-tsukuardgothic-std", sans-serif;
}

.loan-banner .loan-text .big {
    font-size: clamp(26px, 4.3vw, 35px);
    font-weight: 800;
    margin-top: 8px;
    font-family: "Zen Maru Gothic", sans-serif;
}

.loan-desc {
    margin-top: 24px;
    line-height: 2;
    text-align: left;
    max-width: 60%;
    margin: 0 auto;
}

/* ===== Pre-orthodontics banner ===== */
.pre-ortho-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    padding: 150px 24px 110px;
    border-top: 6px solid var(--green-main);
}

.pre-ortho-banner .bg-photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: url('../../../uploads/2026/07/bg_top_pre-ortho.jpg');
    background-image: image-set(url('../../../uploads/2026/07/bg_top_pre-ortho.webp') 1x type("image/webp"),
            url('../../../uploads/2026/07/bg_top_pre-ortho_2x.webp') 2x type("image/webp"),
            url('../../../uploads/2026/07/bg_top_pre-ortho.jpg') 1x type("image/jpeg"),
            url('../../../uploads/2026/07/bg_top_pre-ortho_2x.jpg') 2x type("image/jpeg"));
    background-size: cover;
    background-position: center;
}

.pre-ortho-banner .bg-tint {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(23, 153, 193, 1) 0%, rgba(255, 255, 255, 1) 100%);
    opacity: 0.85;
}
@media (max-width: 559px){
    .pre-ortho-banner .bg-tint {
        background: linear-gradient(180deg, rgba(23, 153, 193, 1) 0%, rgba(23, 153, 193, 0.5) 100%);
        opacity: 1; 
    }
}

.pre-ortho-banner .watermark {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(28px, 9vw, 130px);
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .19);
    white-space: nowrap;
    pointer-events: none;
    padding-bottom: 100px;
}

.pre-ortho-banner h2 {
    position: relative;
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 800;
    color: #fff;
    font-family: "Zen Maru Gothic", sans-serif;
}

.pre-ortho-banner p {
    position: relative;
    margin-top: 12px;
    /* font-size: 13px; */
    color: #fff;
    letter-spacing: .05em;
    font-family: "Zen Maru Gothic", sans-serif;
}


/* ===== MFT section ===== */
.section-mft {
    padding: 60px 20px;
    max-width: 1080px;
    margin: auto;
}

.mft-intro {

    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.mft-block .content {
    display: grid;
    grid-template-columns: 42% 1fr;
    grid-template-areas:
        "thumb title"
        "thumb text";
    column-gap: 32px;
    align-items: start;
    grid-template-rows: auto 1fr;
}

.mft-block.reverse .content {
    grid-template-columns: 1fr 42%;
    grid-template-areas:
        "title thumb"
        "text thumb";
}

.mft-block h3 {
    grid-area: title;
    font-size: 23px;
    font-weight: 700;
    color: var(--teal-dark);
    padding-bottom: 8px;
    margin-bottom: 14px;
    align-self: end;
    color: var(--teal-main);
    font-family: "Zen Maru Gothic", sans-serif;
}

.mft-block .thumb {
    grid-area: thumb;
}

.mft-block .thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.mft-block .text {
  grid-area: text;
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 20px 0;
}

.mft-block p {
    color: var(--ink-soft);
}

.mft-block .source {
    font-size: 10px;
    color: #999;
    margin-top: 6px;
}


.mft-block_link {
  text-align: right;
}
.mft-block_link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 42px;
  border-radius: 32px;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  transition: transform .15s ease, box-shadow .15s ease;
  background: transparent;
  border: 1px solid var(--teal-main);
  color: #000;
}

.mft-block_link a:hover {
  opacity: 0.7;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}

@media(max-width:559px) {

  .mft-block .content,
  .mft-block.reverse .content {
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "thumb"
        "text";
    row-gap: 14px;
  }

  .mft-block h3 {
    align-self: auto;
    text-align: center;
  }
  .mft-block_link {
    text-align: center;
  }
}



.worry-box {
    background: #CAD54B;
    color: #000;
    border-radius: 45px;
    padding: 36px 24px;
    margin-top: 60px;
    text-align: center;
}

.worry-box h3 {
    display: inline-block;
    font-weight: 700;
    font-size: 28px;
    color: #000;
    margin-bottom: 26px;
    font-family: "Zen Maru Gothic", sans-serif;
}

.worry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media(min-width:700px) {
    .worry-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.worry-item .ph {
    border-radius: 50%;
    padding-top: 100%;
    height: auto;
}

.worry-item .title {
    display: block;
    margin-top: 8px;
    font-weight: 700;
    color: #000;
    font-family: "Zen Maru Gothic", sans-serif;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.worry-img {
  border-radius: 50%;
  background: linear-gradient(135deg, #dfe9c8, #c9dba0);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
}
.worry-img img {
  padding: 10% 5% 0 5%;
}
.worry-item:nth-child(1) .worry-img img {
  margin-left: -4%;
}
.worry-item:nth-child(5) .worry-img img {
  translate: 0% 5%;
  padding: 6% 3% 0 3%;
}
.worry-item:nth-child(6) .worry-img img {
  translate: -2% 0%;
}

.habit-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #FF8893;
    margin: 64px 0 32px;
    position: relative;
    font-family: "Zen Maru Gothic", sans-serif;
}

.habit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px 40px;
}

@media(min-width:700px) {
    .habit-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.habit-card .thumb {
    overflow: hidden;
}

.habit-card h4 {
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    margin-top: 14px;
    color: #FF8893;
    font-family: "Zen Maru Gothic", sans-serif;
}

.habit-card p {
    font-size: 16px;
    color: var(--ink-soft);
    margin-top: 8px;
    line-height: 1.9;
}



.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 48px 0 36px;
    flex-wrap: wrap;
}

.dots span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green-main);
}

.dots span.outline {
    background: transparent;
    border: 2px solid var(--green-main);
}

.mft-effects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 20px;
}

@media(min-width:840px) {
    .mft-effects {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mft-effects figure .thumb {
    overflow: hidden;
}

.mft-effects h4 {
    font-size: 22px;
    font-weight: 800;
    margin-top: 16px;
    color: var(--green-main);
    text-align: center;
    font-family: "Zen Maru Gothic", sans-serif;
}

.mft-effects p {
    font-size: 18px;
    color: var(--ink-soft);
    margin-top: 10px;
    line-height: 1.9;
}

/* ===== Treatment banner ===== */
.treatment-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 150px 24px;
    text-align: center;
}

.treatment-banner .ph {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* フォールバック（image-set未対応ブラウザ向け） */
    background-image: url('../../../uploads/2026/07/bg_ortho_type_1920.jpg');
    /* Safari等 -webkit- 実装向け */
    background-image: -webkit-image-set(url('../../../uploads/2026/07/bg_ortho_type_1920.webp') 1x,
            url('../../../uploads/2026/07/bg_ortho_type_3840.webp') 2x);
    /* 標準構文：フォーマット指定付き */
    background-image: image-set(url('../../../uploads/2026/07/bg_ortho_type_1920.webp') 1x type('image/webp'),
            url('../../../uploads/2026/07/bg_ortho_type_3840.webp') 2x type('image/webp'),
            url('../../../uploads/2026/07/bg_ortho_type_1920.jpg') 1x type('image/jpeg'),
            url('../../../uploads/2026/07/bg_ortho_type_3840.jpg') 2x type('image/jpeg'));
}

.treatment-banner .bg-tint {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(86, 188, 219, 0.5);
    mix-blend-mode: multiply;
}

.treatment-banner .bg-tint::before {
    content: "";
    position: absolute;
    inset: 110px 0;
    z-index: -1;
    background: rgba(86, 188, 219, 0.5);
}

.treatment-banner .bg-tint::after {
    content: "";
    position: absolute;
    inset: 40px 0;
    z-index: -1;
    background: rgba(86, 188, 219, 0.5);
}

.treatment-banner h2 {
    position: relative;
    color: #fff;
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 800;
    letter-spacing: .08em;
    font-family: "Zen Maru Gothic", sans-serif;
}

.section-treatment {
    padding: 60px 0;
}

.treatment-heading {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--teal-main);
    margin-bottom: 36px;
    font-family: "Zen Maru Gothic", sans-serif;
}

.treatment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

@media(min-width:700px) {
    .treatment-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.treatment-card .thumb {
    overflow: hidden;
}

.treatment-card {
    text-align: center;
}

.treatment-card .stage {
    font-size: 18px;
    color: var(--teal-main);
    font-weight: 800;
    margin-top: 18px;
    text-align: center;
    font-family: "Zen Maru Gothic", sans-serif;
}

.treatment-card h4 {
    font-size: 22px;
    font-weight: 800;
    color: var(--teal-main);
    margin-top: 2px;
    line-height: 1.2;
    font-family: "Zen Maru Gothic", sans-serif;
}

.treatment-card p {
    margin-top: 12px;
    text-align: left;
    line-height: 1.9;
}


.brand-box {
    margin-top: 56px;
}

.brand-box h3 {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: var(--teal-main);
    margin-bottom: 40px;
    font-family: "Zen Maru Gothic", sans-serif;
}

.brand-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media(min-width:700px) {
    .brand-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.brand-card {
    text-align: center;
}

.brand-card h4 {
    font-weight: 800;
    font-size: 22px;
    color: var(--teal-main);
    font-family: "Zen Maru Gothic", sans-serif;
}

.brand-card p {
    color: var(--ink-soft);
    margin-top: 10px;
    text-align: left;
}


  @media(max-width:1319px){
    .hero-content { translate: -50%;}
  }
  /* ---------- タブレット（959px以下） ---------- */
  @media(max-width:959px){

    .hero-content { translate: 0 25%}

    /* セクションの上下余白を詰める */
    .section-ortho{padding:44px 0 52px;}
    .section-mft{padding:44px 0;}
    .section-treatment{padding:44px 0;}
    .philosophy-box{padding:28px 20px 32px;}

    /* バナー類の余白を縮小 */
    .pre-ortho-banner{padding:70px 20px 60px;}
    .treatment-banner{padding:70px 20px;}

    /* 見出しサイズを少し抑える */
    .eyebrow{font-size:clamp(26px,7vw,44px);}
    /* .section-heading h2{font-size:20px;} */
    .habit-heading{font-size:23px; margin:48px 0 26px;}
    /* .treatment-heading, .brand-box h3{font-size:20px;} */

    /* グリッド類のギャップを詰める */
    .card-grid{gap:24px;}
    .habit-grid{gap:28px 24px;}
    .treatment-grid, .brand-grid{gap:24px;}
    .mft-intro{gap:32px;}
    .mft-block .content{column-gap:22px;}

    /* 無料相談・デンタルローンの余白調整 */
    .consult-box{padding:36px 20px 32px;}
    .consult-box h3{font-size:30px;}
    .loan-banner{min-height:220px; max-width: 80%;}
    .loan-banner .loan-text{padding:36px 20px;}
    .loan-desc {max-width: 80%;}
  }
  @media(max-width:767px){
    .philosophy-box .eyebrow {
        color: rgba(202, 213, 75, 1);
    }
  }

  /* ---------- スマホ（559px以下） ---------- */
  @media(max-width:559px){

    /* ヒーロー */
    .hero{min-height:420px;}
    .hero-content{padding:28px 16px; max-width:100%;}
    .hero-content h1{font-size:28px;}
    /* .hero-content p{font-size:13px; line-height:1.7;} */

    /* セクション共通余白 */
    .section-ortho{padding:36px 0 44px;}
    .section-mft{padding:36px 0;}
    .section-treatment{padding:36px 0;}
    .philosophy-box{padding:24px 16px 28px;}
    .eyebrow{font-size:28px;}
    .section-heading h2{font-size:18px;}

    .philosophy-box .section-heading h2 {
        font-size: 28px;
    }
    .philosophy-box .section-heading .sub {
        font-size: 90%;
    }
    .pre-ortho-banner .watermark {
        font-size: 8.5vw;
    }

    /* カード類 */
    .card-grid{gap:40px;}
    .ortho-card {
      display: block; grid-row: unset;
    }
    .ortho-card .tag {text-align: center;}
    .ortho-card h3 {text-align: center;}
    .ortho-card .btn-row {justify-content: center;}
    /* .ortho-card h3{font-size:17px;} */
    /* .btn{font-size:11px; padding:9px 16px;} */
    .btn-ico-cal { font-size: unset; padding-left: 60px;}
    .ortho-card.adult {
      display: grid;
      margin-top: 60px;
    }
    .ortho-card.adult .tag {
      order: 1;
    }
    .ortho-card.adult h3 {
      order: 2;
    }
    .ortho-card.adult .thumb {
      order: 3;
    }
    .ortho-card.adult .content {
      order: 4;
    }
    .ortho-card.adult .btn-row {
      order: 5;
    }

    /* 無料相談 */
    .consult-box{padding:28px 14px 26px; border-radius:14px;}
    /* .consult-box h3{font-size:20px;} */
    /* .consult-box .note{font-size:13px;} */
    .consult-grid{gap:10px;}
    .consult-grid figure img{height:100px;}
    .consult-grid figcaption{font-size:12px; padding:8px 0;}

    /* デンタルローン */
    .loan-banner{min-height:190px; border-radius:12px; max-width: 100%;}
    .loan-banner .loan-text{padding:28px 16px;}
    .loan-desc {max-width: 100%;}
    /* .loan-banner .loan-text .small-line{font-size:14px;} */
    /* .loan-desc{font-size:12px; line-height:1.9; margin-top:18px;} */

    /* プレ矯正・矯正歯科治療バナー */
    .pre-ortho-banner{padding:52px 16px 48px; border-top-width:4px;}
    /* .pre-ortho-banner p{font-size:12px;} */
    .treatment-banner{padding:52px 16px;}

    /* お悩みグリッド */
    .worry-box{padding:28px 16px; border-radius:10px;}
    /* .worry-box h3{font-size:14px;} */
    .worry-grid{gap:14px;}
    /* .worry-item span{font-size:11px;} */

    /* 口腔悪習癖 */
    .habit-heading{font-size:23px; margin:40px 0 22px;}
    .habit-grid{gap:24px;}

    /* MFTの効果 等 */
    .dots{margin:32px 0 24px; gap:8px;}
    .dots span{width:14px; height:14px;}
    /* .mft-effects h4{font-size:16px;} */

    /* 矯正歯科治療 / マウスピース */
    /* .treatment-heading, .brand-box h3{font-size:19px; margin-bottom:24px;} */
    /* .treatment-card .stage{font-size:14px; margin-top:14px;} */
    /* .treatment-card h4, .brand-card h4{font-size:16px;} */
    /* .treatment-card p, .brand-card p{font-size:12px;} */
    .brand-box{margin-top:40px;}
  }


/* ---------------------------------------------------------
   ルート要素：変数定義・局所リセット
   --------------------------------------------------------- */
.mzd-mft{
  /* Color（この要素のサブツリー内でのみ有効） */
  --mzd-blue-900:#2f6fa8;
  --mzd-blue-700:#3f86c4;
  --mzd-blue-500:#6aabda;
  --mzd-blue-100:#dbeefa;
  --mzd-blue-050:#eff8fd;
 
  --mzd-green-700:#3f9d63;
  --mzd-green-500:#67b982;
  --mzd-green-100:#dcefe0;
  --mzd-green-050:#f2f9f2;
 
  --mzd-pink-600:#e4606c;
  --mzd-pink-200:#f6c6cc;
  --mzd-pink-050:#fdf1f3;
  --mzd-marker:#fbe6a8;
 
  --mzd-ink:#3a3a3a;
  --mzd-ink-sub:#555;
  --mzd-white:#fff;
  
  --mzd-brown: #5f4222;
 
  /* Type：端末内蔵の丸ゴシック系のみ（外部フォント通信なし） */
/*
  --mzd-font:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",
             "Hiragino Kaku Gothic ProN","Yu Gothic Medium","游ゴシック Medium",
             "Meiryo",sans-serif;
*/
  
  --mzd-font: "Zen Maru Gothic", sans-serif;
 
  --mzd-gutter:14px;
  --mzd-radius:16px;

 /* 小児矯正欄の左に置く医院イラスト（PC幅のみ表示・装飾扱い）。	
差し替えはこの1行のみ。パスは同一オリジンの固定値とし、	
  外部入力を流し込まないこと（CSSインジェクション対策）。	
別ドメインでホストする場合は CSP の img-src に追加が必要 */	
--mzd-clinic-image:url("https://alphazeal.xsrv.jp/mdc_ortho/wp-content/uploads/2026/08/img_dental.png");
  
  /* レイアウト・重ね順を内部に封じ込める */
  contain:layout style;
  isolation:isolate;

  /* ルートは「幅の計測役」。max-width を持たせるとコンテナ幅が
     頭打ちになり PC 用のブレークポイントが発火しないため、
     サイズ制御は内側の .mzd-mft__inner に委ねる */
  display:block;
  width:100%;
  box-sizing:border-box;
  container-type:inline-size;
  container-name:mzdmft;

  font-family:var(--mzd-font);
  font-size:16px;
  font-weight:400;
  font-style:normal;
  line-height:1.6;
  letter-spacing:.02em;
  text-align:left;
  color:var(--mzd-ink);
  background:linear-gradient(180deg,#f4fbff 0%,#ffffff 45%,#fdf7f8 100%);
  -webkit-text-size-adjust:100%;
  
  margin-bottom: 40px;
}
 
/* 局所リセット：テーマ側が子孫要素に当てているスタイルを打ち消す。
   このルールより後ろに自前のスタイルを書くことで上書きされる。 */
.mzd-mft *,
.mzd-mft *::before,
.mzd-mft *::after{
  all:revert;
  box-sizing:border-box;
  font-family:inherit;
  color:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  margin:0;
  padding:0;
  border:0;
  background:none;
  text-decoration:none;
  list-style:none;
  max-width:100%;
}
 
.mzd-mft img,
.mzd-mft svg{display:block;height:auto;}

/* 内側ラッパー：最大幅と余白の制御はここで行う */
.mzd-mft .mzd-mft__inner{
  width:100%;
  max-width:520px;
  margin-inline:auto;
  padding:20px var(--mzd-gutter) 32px;
}

/* ---------------------------------------------------------
   ヘッダー
   --------------------------------------------------------- */

.mzd-hero {
  padding: 30px 1vw 0;
}

.mzd-mft .mzd-hero__top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}
 
.mzd-mft .mzd-hero__eyebrow{
  order:2;
  font-size:clamp(13px,3.6vw,16px);
  font-size:clamp(14px,3.6vw,17px);
  font-weight:700;
  color:var(--mzd-blue-900);
  text-align:center;
  padding-bottom:6px;
  border-bottom:3px dotted var(--mzd-blue-500);
  color: var(--mzd-brown);
}
 
.mzd-mft .mzd-hero__brand{
  order:1;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:clamp(15px,4vw,18px);
  font-weight:700;
  color:var(--mzd-green-700);

  color: var(--mzd-brown);
}
 
.mzd-mft .mzd-hero__brand-mark{
  width:26px;
  height:26px;
  flex:none;
  border-radius:50%;
/*
  background:var(--mzd-green-100);
  border:2px solid var(--mzd-green-500);
*/
  background: url(https://alphazeal.xsrv.jp/mdc_ortho/wp-content/uploads/2026/08/img_dental_mark.png) 50% 50% / contain no-repeat;
}
 
.mzd-mft .mzd-hero__title{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:2px;
  font-size:clamp(28px,9vw,40px);
  line-height:1.15;
  font-weight:800;
  text-align:center;
  margin-bottom:18px;
}
 
.mzd-mft .mzd-hero__mascot{
  width:clamp(46px,13vw,62px);
  flex:none;
  margin-right:2px;
}
.mzd-mft .mzd-hero__mascot svg,
.mzd-mft .mzd-mft-title__badge svg{width:100%;height:auto;}
 
.mzd-mft .mzd-tooth-body{fill:var(--mzd-white);stroke:#8fbfe0;stroke-width:3;stroke-linejoin:round;}
.mzd-mft .mzd-tooth-eye{fill:#4a4a4a;}
.mzd-mft .mzd-tooth-mouth{fill:none;stroke:#4a4a4a;stroke-width:2.4;stroke-linecap:round;}
.mzd-mft .mzd-tooth-cheek{fill:#f9c9cf;}
 
.mzd-mft .mzd-hero__title-main{
  color:var(--mzd-blue-700);
  -webkit-text-stroke:5px var(--mzd-white);
  paint-order:stroke fill;
  filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.1));
}
.mzd-mft .mzd-hero__title-sub{
  color:var(--mzd-blue-900);
  font-size:.72em;
  -webkit-text-stroke:4px var(--mzd-white);
  paint-order:stroke fill;
}
.mzd-mft .mzd-hero__title-accent{
  display:inline-block;
  color:var(--mzd-pink-600);
  -webkit-text-stroke:5px var(--mzd-white);
  paint-order:stroke fill;
/*  transform:rotate(-3deg);*/
}
@media (max-width: 559px) {
  .mzd-mft .mzd-hero__eyebrow {
    font-size: 22px;
  }
  .mzd-mft .mzd-hero__brand {
    font-size: 22px;
    translate: -0.5em;
  }
  .mzd-mft .mzd-hero__brand-mark {
    width: 34px;
    height: 34px;
  }
}
 
/* ---------------------------------------------------------
   共通ブロック
   --------------------------------------------------------- */
.mzd-mft .mzd-block{
  border-radius:var(--mzd-radius);
  padding:16px 12px;
}
.mzd-mft .mzd-block--check{background:var(--mzd-white);border:2px solid var(--mzd-blue-100);}
.mzd-mft .mzd-block--mft{background:var(--mzd-green-050);border:2px solid var(--mzd-green-100);}
.mzd-mft .mzd-block--ortho{
  background:var(--mzd-pink-050);
  border:2px solid var(--mzd-pink-200);
  text-align:center;
}
 
/* 流れの矢印（画像を使わずCSSで描画） */
.mzd-mft .mzd-flow-arrow{
  width:44px;
  height:34px;
  margin:12px auto;
  clip-path:polygon(30% 0,70% 0,70% 55%,100% 55%,50% 100%,0 55%,30% 55%);
}
.mzd-mft .mzd-flow-arrow--blue{background:var(--mzd-blue-500);}
.mzd-mft .mzd-flow-arrow--green{background:var(--mzd-green-500);}
 
/* ---------------------------------------------------------
   1. 気になるところ
   --------------------------------------------------------- */
.mzd-mft .mzd-ribbon{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--mzd-blue-700);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:14px;
}
.mzd-mft .mzd-ribbon__num{
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--mzd-blue-900);
  border:2px dashed rgba(255,255,255,.85);
  color:var(--mzd-white);
  font-size:18px;
  font-weight:800;
}
.mzd-mft .mzd-ribbon__text{
  font-size:clamp(15px,4.2vw,18px);
  font-weight:800;
  color:var(--mzd-white);
  line-height:1.35;
}
 
.mzd-mft .mzd-symptoms{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.mzd-mft .mzd-symptom{
  background:var(--mzd-blue-050);
  border:2px solid var(--mzd-blue-100);
  border-radius:14px;
  padding:10px 8px;
}
.mzd-mft .mzd-symptom__head{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:clamp(13px,3.6vw,15px);
  font-size: clamp(15px,4vw,17px);
  font-weight:700;
  line-height:1.35;
  min-height:2.7em;   /* 見出し行数の差で画像位置がずれるのを防ぐ */
  margin-bottom:6px;
}
.mzd-mft .mzd-symptom__num{
  width:20px;
  height:20px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--mzd-blue-700);
  color:var(--mzd-white);
  font-size:12px;
  font-weight:700;
  margin-top:1px;
}
 
/* ---------------------------------------------------------
   2. MFT
   --------------------------------------------------------- */
.mzd-mft .mzd-mft-title{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:3px dotted var(--mzd-green-500);
}
.mzd-mft .mzd-mft-title__badge{
  width:34px;
  flex:none;
  display:grid;
  place-items:center;
  margin-right:4px;
}
.mzd-mft .mzd-mft-title__en{
  font-size:clamp(26px,8vw,34px);
  font-weight:800;
  color:var(--mzd-green-700);
  letter-spacing:.06em;
}
.mzd-mft .mzd-mft-title__ja{
  font-size:clamp(15px,4.4vw,19px);
  font-weight:700;
  color:var(--mzd-green-700);
}
 
.mzd-mft .mzd-trainings{display:grid;gap:12px;}
.mzd-mft .mzd-training{
  background:var(--mzd-white);
  border:2px solid var(--mzd-green-100);
  border-radius:14px;
  padding:12px 10px;
}
.mzd-mft .mzd-training__head{
  display:flex;
  align-items:flex-start;
  gap:7px;
  font-size:clamp(14px,4vw,16px);
  font-weight:700;
  color:var(--mzd-green-700);
  line-height:1.4;
  margin-bottom:8px;
}
.mzd-mft .mzd-training__num{
  width:22px;
  height:22px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--mzd-green-700);
  color:var(--mzd-white);
  font-size:13px;
  font-weight:700;
  margin-top:1px;
}
.mzd-mft .mzd-training__note{
  background:var(--mzd-green-050);
  border-radius:10px;
  padding:8px 10px;
  margin-top:8px;
  font-size:clamp(12px,3.4vw,14px);
  color:var(--mzd-ink-sub);
  text-align:center;
  line-height:1.55;
}
 
/* ---------------------------------------------------------
   3. 小児矯正
   --------------------------------------------------------- */
.mzd-mft .mzd-ortho__lead{
  font-size:clamp(17px,5vw,21px);
  font-weight:800;
  color:var(--mzd-ink);
  margin-bottom:2px;
}
.mzd-mft .mzd-ortho__title{
  display:inline-block;
  font-size:clamp(34px,11vw,46px);
  font-weight:800;
  color:var(--mzd-pink-600);
  line-height:1.2;
  padding:0 4px;
  -webkit-text-stroke:4px var(--mzd-white);
  paint-order:stroke fill;
  background:linear-gradient(transparent 68%,var(--mzd-marker) 68%);
}
.mzd-mft .mzd-ortho__bracket{font-size:.8em;}
.mzd-mft .mzd-ortho__note{
  font-size:clamp(12px,3.5vw,14px);
  font-weight:700;
  color:var(--mzd-ink);
  margin-top:10px;
  line-height:1.6;
}
 
/* ---------------------------------------------------------
   画像スロット（未配置でも枠が崩れない）
   --------------------------------------------------------- */
.mzd-mft .mzd-thumb{
  position:relative;
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  background:repeating-linear-gradient(45deg,#f2f6f8 0 8px,#e9eff3 8px 16px);
}
.mzd-mft .mzd-thumb--wide{aspect-ratio:4/3;}
.mzd-mft .mzd-thumb--ortho{aspect-ratio:4/3;max-width:240px;margin:12px auto 0;}
 
.mzd-mft .mzd-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--mzd-white);  /* 読み込み成功時にプレースホルダを隠す */
  font-size:11px;               /* 読み込み失敗時のalt表示 */
  color:var(--mzd-ink-sub);
}
 
/* =========================================================
   レスポンシブ
   コンテナクエリで「埋め込み枠の幅」を基準に切り替える。
   画面幅ではなくカラム幅で判定するため、サイドバー付きページや
   2カラムレイアウトの中に置いても意図どおりに段組みが変わる。

   560px 以上 … タブレット（症状3列 / MFT3列）
   960px 以上 … PC（症状6列 = 元デザインの横一列 / 小児矯正は横組み）
   ========================================================= */

/* ---------- タブレット：560px 以上 ---------- */
@container mzdmft (min-width:560px){
  .mzd-mft .mzd-mft__inner{max-width:760px;padding-inline:20px;}
  .mzd-mft .mzd-block{padding:22px 18px;}
  .mzd-mft .mzd-symptoms{grid-template-columns:repeat(3,1fr);gap:12px;}
  .mzd-mft .mzd-trainings{grid-template-columns:repeat(3,1fr);}
  .mzd-mft .mzd-training{display:flex;flex-direction:column;}
  .mzd-mft .mzd-training__note{margin-top:auto;}
  .mzd-mft .mzd-ribbon__text br{display:none;}
}

/* ---------- PC：960px 以上 ---------- */
@container mzdmft (min-width:960px){
  .mzd-hero {
    padding: 30px 30px 0;
  }
  .mzd-mft .mzd-mft__inner{
    max-width:1040px;
    padding:40px 32px 56px;
  }

  /* ヘッダー：ロゴを右上に固定し、リード文を中央に置く元レイアウトへ */
  .mzd-mft .mzd-hero{position:relative;}
  .mzd-mft .mzd-hero__top{
    flex-direction:row;
    justify-content:center;
    margin-bottom:14px;
    min-height:34px;
  }
  .mzd-mft .mzd-hero__eyebrow{
    order:1;
    font-size:21px;
    padding-bottom:8px;
  }
  .mzd-mft .mzd-hero__brand{
    order:2;
    position:absolute;
    top:20px;
    right:20px;
    font-size:22px;
  }
  .mzd-mft .mzd-hero__brand-mark{width:34px;height:34px;}
  .mzd-mft .mzd-hero__title{
    font-size:64px;
    gap:4px;
    margin-bottom:32px;
  }
  .mzd-mft .mzd-hero__mascot{width:92px;margin-right:8px;}
  .mzd-mft .mzd-hero__title-main,
  .mzd-mft .mzd-hero__title-accent{-webkit-text-stroke-width:8px;}
  .mzd-mft .mzd-hero__title-sub{-webkit-text-stroke-width:6px;}

  /* ブロック共通 */
  .mzd-mft .mzd-block{padding:28px 24px;border-radius:22px;}
  .mzd-mft .mzd-flow-arrow{width:64px;height:46px;margin:20px auto;}

  /* 1. 症状：元デザインどおり横一列 */
  .mzd-mft .mzd-ribbon{padding:14px 20px;gap:14px;border-radius:12px;}
  .mzd-mft .mzd-ribbon__num{width:44px;height:44px;font-size:23px;}
  .mzd-mft .mzd-ribbon__text{font-size:26px;}
  .mzd-mft .mzd-symptoms{grid-template-columns:repeat(6,1fr);gap:14px;}
  .mzd-mft .mzd-symptom{padding:12px 10px;border-radius:16px;}
  .mzd-mft .mzd-symptom__head{font-size:15px;min-height:3em;}
  .mzd-mft .mzd-symptom__num{width:22px;height:22px;font-size:13px;}

  /* 2. MFT */
  .mzd-mft .mzd-mft-title{gap:8px;padding-bottom:18px;margin-bottom:20px;}
  .mzd-mft .mzd-mft-title__badge{width:52px;margin-right:8px;}
  .mzd-mft .mzd-mft-title__en{font-size:48px;}
  .mzd-mft .mzd-mft-title__ja{font-size:28px;}
  .mzd-mft .mzd-training__head{font-size:18px;margin-bottom:12px;}
  .mzd-mft .mzd-training__num{width:26px;height:26px;font-size:15px;}
  .mzd-mft .mzd-training__note{font-size:15px;padding:12px 14px;margin-top:14px;}

  /* --- 3枚のカードを subgrid で行合わせ ---
     親に「見出し / イラスト / 説明」の3行を定義し、各カードが
     grid-template-rows:subgrid でその行トラックを共有する。
     見出しが1行のカードと2行のカードが混在しても、
     イラストの上端と説明文の上端が3枚とも揃う。
     行間は親の row-gap:0 とし、カード内の余白は各要素の
     margin で持たせる（トラック高に均等に加算されるため崩れない） */
  .mzd-mft .mzd-trainings{
    grid-template-rows:auto auto auto;  /* 見出し / イラスト / 説明 */
    column-gap:20px;
    row-gap:0;
  }
  .mzd-mft .mzd-training{
    padding:18px 16px;
    border-radius:16px;
    /* subgrid 非対応環境向けフォールバック（下の @supports で上書き） */
    display:flex;
    flex-direction:column;
  }

  @supports (grid-template-rows:subgrid){
    .mzd-mft .mzd-training{
      display:grid;
      grid-template-rows:subgrid;
      grid-row:span 3;   /* 親の3行すべてにまたがる */
      row-gap:0;
    }
    /* flex 用の margin-top:auto を解除し、行トラック基準で揃える */
    .mzd-mft .mzd-training__note{margin-top:14px;}
    .mzd-mft .mzd-thumb--wide{align-self:start;}
  }

  /* 3. 小児矯正：医院イラスト / テキスト / 女の子イラストの3カラム
     左の医院イラストは装飾要素のため ::before の背景画像で表示する。
     画像パスはルートで定義した --mzd-clinic-image を差し替えるだけで変更可 */
  .mzd-mft .mzd-block--ortho{
    display:grid;
    grid-template-columns:190px 1fr 250px;
    align-items:center;
    column-gap:24px;
    padding:32px 36px;
  }
  .mzd-mft .mzd-block--ortho::before{
    content:"";            /* 局所リセットの all:revert で content が戻るため明示 */
    grid-column:1;
    grid-row:1 / 3;        /* リード文＋タイトルの2行分 */
    align-self:center;
    width:100%;
    aspect-ratio:4/3;      /* 画像未配置でもカラム幅が崩れないよう領域を確保 */
    background-image:var(--mzd-clinic-image);
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:contain;
  }
  .mzd-mft .mzd-ortho__lead{grid-column:2;grid-row:1;font-size:32px;}
  .mzd-mft .mzd-ortho__title{
    grid-column:2;
    grid-row:2;
    justify-self:center;
    font-size:72px;
    -webkit-text-stroke-width:7px;
        margin-top: -60px;
  }
  .mzd-mft .mzd-thumb--ortho{
    grid-column:3;
    grid-row:1 / 3;
    align-self:center;
    max-width:none;
    margin:0;
  }
  /* 説明文は3カラムの下に全幅で配置 */
  .mzd-mft .mzd-ortho__note{
    grid-column:1 / -1;
    grid-row:3;
    font-size:18px;
    margin-top:20px;
  }
}

/* ---------------------------------------------------------
   コンテナクエリ非対応ブラウザ向けフォールバック
   （Chrome 105 / Safari 16 / Firefox 110 より前の環境）
   画面幅で同等の段組みに切り替える
   --------------------------------------------------------- */
@supports not (container-type:inline-size){
  @media (min-width:600px){
    .mzd-mft .mzd-mft__inner{max-width:760px;padding-inline:20px;}
    .mzd-mft .mzd-block{padding:22px 18px;}
    .mzd-mft .mzd-symptoms{grid-template-columns:repeat(3,1fr);gap:12px;}
    .mzd-mft .mzd-trainings{grid-template-columns:repeat(3,1fr);}
    .mzd-mft .mzd-training{display:flex;flex-direction:column;}
    .mzd-mft .mzd-training__note{margin-top:auto;}
    .mzd-mft .mzd-ribbon__text br{display:none;}
  }
  @media (min-width:1000px){
    .mzd-mft .mzd-mft__inner{max-width:1040px;padding:40px 32px 56px;}
    .mzd-mft .mzd-hero{position:relative;}
    .mzd-mft .mzd-hero__top{flex-direction:row;justify-content:center;margin-bottom:14px;min-height:34px;}
    .mzd-mft .mzd-hero__eyebrow{order:1;font-size:21px;padding-bottom:8px;}
    .mzd-mft .mzd-hero__brand{order:2;position:absolute;top:0;right:0;font-size:22px;}
    .mzd-mft .mzd-hero__brand-mark{width:34px;height:34px;}
    .mzd-mft .mzd-hero__title{font-size:64px;gap:4px;margin-bottom:32px;}
    .mzd-mft .mzd-hero__mascot{width:92px;margin-right:8px;}
    .mzd-mft .mzd-block{padding:28px 24px;border-radius:22px;}
    .mzd-mft .mzd-flow-arrow{width:64px;height:46px;margin:20px auto;}
    .mzd-mft .mzd-ribbon{padding:14px 20px;gap:14px;}
    .mzd-mft .mzd-ribbon__num{width:44px;height:44px;font-size:23px;}
    .mzd-mft .mzd-ribbon__text{font-size:26px;}
    .mzd-mft .mzd-symptoms{grid-template-columns:repeat(6,1fr);gap:14px;}
    .mzd-mft .mzd-symptom__head{font-size:15px;min-height:3em;}
    .mzd-mft .mzd-mft-title__badge{width:52px;}
    .mzd-mft .mzd-mft-title__en{font-size:48px;}
    .mzd-mft .mzd-mft-title__ja{font-size:28px;}
    .mzd-mft .mzd-trainings{grid-template-rows:auto auto auto;column-gap:20px;row-gap:0;}
    .mzd-mft .mzd-training__head{font-size:18px;}
    .mzd-mft .mzd-training__note{font-size:15px;}
    @supports (grid-template-rows:subgrid){
      .mzd-mft .mzd-training{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;}
      .mzd-mft .mzd-training__note{margin-top:14px;}
      .mzd-mft .mzd-thumb--wide{align-self:start;}
    }
    .mzd-mft .mzd-block--ortho{
      display:grid;grid-template-columns:190px 1fr 250px;align-items:center;
      column-gap:24px;padding:32px 36px;
    }
    .mzd-mft .mzd-block--ortho::before{
      content:"";grid-column:1;grid-row:1 / 3;align-self:center;
      width:100%;aspect-ratio:4/3;
      background-image:var(--mzd-clinic-image);
      background-repeat:no-repeat;background-position:center bottom;background-size:contain;
    }
    .mzd-mft .mzd-ortho__lead{grid-column:2;grid-row:1;font-size:32px;}
    .mzd-mft .mzd-ortho__title{grid-column:2;grid-row:2;justify-self:center;font-size:72px;}
    .mzd-mft .mzd-thumb--ortho{grid-column:3;grid-row:1 / 3;align-self:center;max-width:none;margin:0;}
    .mzd-mft .mzd-ortho__note{grid-column:1 / -1;grid-row:3;font-size:18px;margin-top:20px;}
  }
}

/* ---------------------------------------------------------
   アクセシビリティ
   --------------------------------------------------------- */
.mzd-mft :where(a,button):focus-visible{
  outline:3px solid var(--mzd-blue-700);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .mzd-mft *{animation:none !important;transition:none !important;}
}

@media print{
  .mzd-mft{background:#fff;}
  .mzd-mft .mzd-block{break-inside:avoid;}
}