/*==================================================
  骨が少ない方のインプラント（/menu/implant/bone-graft/）
  共通の .inner .section-heading .faq-item .cta-box などは implant.css
==================================================*/
.bone-intro,
.bone-reason,
.bone-strength,
.bone-method,
.bone-flow,
.bone-access,
.bone-risk {
    padding: 80px 0;
}

.bone-reason,
.bone-method,
.bone-risk {
    background: #f6f8f9;
}

.bone-intro p,
.bone-reason p,
.bone-strength p,
.bone-method p,
.bone-flow p,
.bone-access p,
.bone-risk p,
.bone-point li,
.bone-risk li {
    word-break: normal;
    text-wrap: wrap;
}

/*--------------------------------------------------
  INTRO
--------------------------------------------------*/
.bone-intro__body {
    max-width: 880px;
    margin: 0 auto;
}

.bone-intro__body p {
    margin: 0 0 16px;
    color: #333;
    font-size: 1.7rem;
    line-height: 2;
}

.bone-point {
    max-width: 880px;
    margin: 36px auto 0;
    padding: 28px 36px;
    border: 1px solid #e3c88f;
    background: #fffaf0;
}

.bone-point__title {
    margin: 0 0 12px;
    color: #b48a3c;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.bone-point ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bone-point li {
    position: relative;
    padding: 6px 0 6px 22px;
    color: #173f5b;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.8;
}

.bone-point li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b48a3c;
}

/*--------------------------------------------------
  REASON（5枚のカードは同じ高さ）
--------------------------------------------------*/
.bone-reason__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: reason;
}

.bone-reason__list li {
    position: relative;
    padding: 28px 28px 28px;
    border-top: 3px solid #173f5b;
    background: #fff;
    counter-increment: reason;
}

.bone-reason__list h3 {
    margin: 0 0 10px;
    color: #173f5b;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.5;
}

.bone-reason__list h3::before {
    content: counter(reason, decimal-leading-zero);
    display: block;
    margin-bottom: 4px;
    color: #b48a3c;
    font-size: 1.3rem;
    letter-spacing: .1em;
}

.bone-reason__list p {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    line-height: 1.85;
}

.bone-reason__note {
    max-width: 1040px;
    margin: 32px auto 0;
    padding: 28px 36px;
    background: #fff;
    border-left: 4px solid #b48a3c;
}

.bone-reason__note h3 {
    margin: 0 0 10px;
    color: #173f5b;
    font-size: 1.8rem;
    font-weight: 700;
}

.bone-reason__note p {
    margin: 0;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.9;
}

/*--------------------------------------------------
  STRENGTH（写真と文章の横並び。写真は文章の上下中央）
--------------------------------------------------*/
.bone-strength__item {
    display: grid;
    grid-template-columns: 420px 1fr;
    align-items: center;
    gap: 56px;
    max-width: 1080px;
    margin: 0 auto 64px;
}

.bone-strength__item:last-child {
    margin-bottom: 0;
}

.bone-strength__item--reverse {
    grid-template-columns: 1fr 420px;
}

.bone-strength__item--reverse .bone-strength__image {
    order: 2;
}

.bone-strength__image {
    margin: 0;
}

.bone-strength__image img {
    display: block;
    width: 100%;
    height: auto;
}

.bone-strength__image--portrait {
    max-width: 340px;
    justify-self: center;
}

.bone-strength__num {
    margin: 0 0 4px;
    color: #b48a3c;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 1;
}

.bone-strength__body h3 {
    margin: 0 0 18px;
    color: #173f5b;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
}

.bone-strength__body > p:not(.bone-strength__num) {
    margin: 0 0 14px;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.95;
}

.bone-strength__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.bone-strength__facts li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    background: #f6f8f9;
    color: #333;
    font-size: 1.3rem;
    line-height: 1.6;
    text-align: center;
}

.bone-strength__facts b {
    color: #173f5b;
    font-size: 1.8rem;
}

/*--------------------------------------------------
  METHOD
--------------------------------------------------*/
.bone-method__list {
    display: grid;
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
}

.bone-method__item {
    padding: 32px 40px;
    background: #fff;
    border-left: 4px solid #173f5b;
}

.bone-method__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    margin-bottom: 6px;
}

.bone-method__head h3 {
    margin: 0;
    color: #173f5b;
    font-size: 2.1rem;
    font-weight: 700;
}

.bone-method__price {
    margin: 0;
    color: #173f5b;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 2.2rem;
    font-weight: 600;
}

.bone-method__price a {
    color: #b48a3c;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.5rem;
    text-decoration: underline;
}

.bone-method__target {
    margin: 0 0 12px;
    color: #b48a3c;
    font-size: 1.5rem;
    font-weight: 700;
}

.bone-method__item > p:not(.bone-method__target),
.bone-method__flex p {
    margin: 0;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.9;
}

.bone-method__flex {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: center;
    gap: 28px;
}

.bone-method__flex figure {
    margin: 0;
}

.bone-method__flex img {
    display: block;
    width: 100%;
    height: auto;
}

.bone-method__note {
    max-width: 1040px;
    margin: 20px auto 0;
    color: #555;
    font-size: 1.4rem;
    line-height: 1.8;
}

.bone-method__period {
    max-width: 1040px;
    margin: 36px auto 0;
    padding: 28px 40px;
    border: 1px solid #e3c88f;
    background: #fffaf0;
}

.bone-method__period h3 {
    margin: 0 0 10px;
    color: #173f5b;
    font-size: 1.9rem;
    font-weight: 700;
}

.bone-method__period p {
    margin: 0;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.9;
}

/*--------------------------------------------------
  FLOW
--------------------------------------------------*/
.bone-flow__list {
    max-width: 880px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: flow;
}

.bone-flow__list li {
    position: relative;
    padding: 0 0 32px 76px;
    counter-increment: flow;
}

.bone-flow__list li::before {
    content: counter(flow, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #173f5b;
    color: #fff;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 1.8rem;
}

.bone-flow__list li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 58px;
    bottom: 6px;
    width: 2px;
    background: #d9e1e6;
}

.bone-flow__list h3 {
    margin: 10px 0 8px;
    color: #173f5b;
    font-size: 1.9rem;
    font-weight: 700;
}

.bone-flow__list p {
    margin: 0;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.9;
}

/*--------------------------------------------------
  ACCESS
--------------------------------------------------*/
.bone-access {
    padding-top: 0;
}

.bone-access__box {
    max-width: 1040px;
    margin: 0 auto;
    padding: 40px 48px;
    background: #173f5b;
    color: #fff;
}

.bone-access__box h2 {
    margin: 0 0 16px;
    font-size: 2.4rem;
    font-weight: 700;
}

.bone-access__box p {
    margin: 0 0 12px;
    font-size: 1.6rem;
    line-height: 1.95;
}

.bone-access__box p:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------
  RISK
--------------------------------------------------*/
.bone-risk__list {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 40px;
    background: #fff;
    list-style: none;
}

.bone-risk__list li {
    position: relative;
    padding: 10px 0 10px 20px;
    border-bottom: 1px dashed #d9e1e6;
    color: #333;
    font-size: 1.5rem;
    line-height: 1.8;
}

.bone-risk__list li:last-child {
    border-bottom: 0;
}

.bone-risk__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 21px;
    width: 8px;
    height: 2px;
    background: #173f5b;
}

.bone-risk__note {
    max-width: 960px;
    margin: 24px auto 0;
    color: #333;
    font-size: 1.6rem;
    line-height: 1.9;
}

/*--------------------------------------------------
  SP
--------------------------------------------------*/
@media screen and (max-width: 1023px) {
    .bone-strength__item,
    .bone-strength__item--reverse {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .bone-strength__item--reverse .bone-strength__image {
        order: 0;
    }

    .bone-strength__image {
        max-width: 520px;
        justify-self: center;
    }

    .bone-strength__image--portrait {
        max-width: 280px;
    }
}

@media screen and (max-width: 767px) {
    .bone-intro,
    .bone-reason,
    .bone-strength,
    .bone-method,
    .bone-flow,
    .bone-access,
    .bone-risk {
        padding: 56px 0;
    }

    .bone-access { padding-top: 0; }

    .bone-intro__body p { font-size: 1.6rem; }
    .bone-point { padding: 22px 20px; }
    .bone-point li { font-size: 1.5rem; }

    .bone-reason__list { grid-template-columns: 1fr; gap: 14px; }
    .bone-reason__list li { padding: 22px 20px; }
    .bone-reason__note { padding: 22px 20px; }
    .bone-reason__note p { font-size: 1.5rem; }

    .bone-strength__item { margin-bottom: 48px; }
    .bone-strength__body h3 { font-size: 2rem; }
    .bone-strength__body > p:not(.bone-strength__num) { font-size: 1.5rem; }
    .bone-strength__facts { grid-template-columns: 1fr; }

    .bone-method__item { padding: 24px 20px; }
    .bone-method__head h3 { font-size: 1.9rem; }
    .bone-method__item > p:not(.bone-method__target),
    .bone-method__flex p { font-size: 1.5rem; }
    .bone-method__flex { grid-template-columns: 1fr; gap: 16px; }
    .bone-method__period { padding: 22px 20px; }
    .bone-method__period p { font-size: 1.5rem; }

    .bone-flow__list li { padding-left: 64px; }
    .bone-flow__list li::before { width: 44px; height: 44px; font-size: 1.6rem; }
    .bone-flow__list li:not(:last-child)::after { left: 21px; top: 50px; }
    .bone-flow__list h3 { margin-top: 6px; font-size: 1.8rem; }
    .bone-flow__list p { font-size: 1.5rem; }

    .bone-access__box { padding: 28px 20px; }
    .bone-access__box h2 { font-size: 2rem; }
    .bone-access__box p { font-size: 1.5rem; }

    .bone-risk__list { padding: 16px 20px; }
    .bone-risk__note { font-size: 1.5rem; }
}

/* パンくずが4階層になるので、スマホでは項目ごとに折り返す（1文字ずつ縦に折れないように） */
@media screen and (max-width: 767px) {
    .breadcrumb__list {
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 12px 0;
    }

    .breadcrumb__list li {
        white-space: nowrap;
    }
}

.bone-strength__body a {
    color: #173f5b;
    text-decoration: underline;
}