.caries-case{
    display: none;
}

/*==================================================
  CARIES
==================================================*/

.caries-intro,
.caries-problem,
.caries-feature,
.caries-about,
.caries-stage,
.caries-painless,
.caries-preserve,
.caries-restoration,
.caries-flow,
.caries-case,
.caries-faq,
.caries-cta{

    padding:110px 0;

}

.caries-problem,
.caries-stage,
.caries-restoration,
.caries-case{

    background:#fafafa;

}

.inner{

    width:min(1180px,calc(100% - 60px));

    margin:0 auto;

}

/*==================================================
  見出し
==================================================*/

.section-heading{

    margin-bottom:60px;

}

.section-heading.center{

    text-align:center;

}

.section-heading span{

    display:inline-block;

    margin-bottom:12px;

    color:#b48a3c;

    font-size:14px;

    letter-spacing:.2em;

    text-transform:uppercase;

    font-weight:700;

}

.section-heading h2{

    margin:0;

    color:#173f5b;

    font-size:clamp(28px,2.6vw,36px);

    line-height:1.5;

    font-weight:700;

}

.section-heading p,

.lead{

    margin-top:28px;

    color:#555;

    font-size:17px;

    line-height:2.1;

}

/*==================================================
  INTRO
==================================================*/

.caries-intro .inner{

    display:grid;

    grid-template-columns:

    1.1fr

    .9fr;

    gap:70px;

    align-items:center;

}

.caries-intro__image img{

    width:100%;

    display:block;

    border-radius:18px;

    box-shadow:

    0 18px 45px

    rgba(0,0,0,.12);

}
/*==================================================
  お悩み
==================================================*/

.problem-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.problem-card{

    padding:36px 28px;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:16px;

    text-align:center;

    transition:.35s;

}

.problem-card:hover{

    transform:translateY(-8px);

    border-color:#173f5b;

    box-shadow:
    0 18px 40px
    rgba(0,0,0,.08);

}

.problem-card__icon{

    width:64px;

    height:64px;

    margin:0 auto 24px;

    border-radius:50%;

    background:#173f5b;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

}

.problem-card p{

    margin:0;

    color:#173f5b;

    font-size:18px;

    line-height:1.8;

    font-weight:600;

}

/*==================================================
  特徴
==================================================*/

.feature-list{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.feature-item{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:40px;

    padding:45px;

    background:#fff;

    border-radius:18px;

    box-shadow:

    0 15px 45px

    rgba(0,0,0,.06);

}

.feature-item__number{

    width:100px;

    height:100px;

    border-radius:50%;

    background:#173f5b;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    font-weight:700;

}

.feature-item h3{

    margin:0 0 20px;

    color:#173f5b;

    font-size:28px;

    line-height:1.5;

}

.feature-item p{

    margin:0;

    color:#555;

    line-height:2;

    font-size:17px;

}
/*==================================================
  虫歯とは
==================================================*/

.caries-about .lead{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

/*==================================================
  虫歯の進行
==================================================*/

.stage-list{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.stage-card{

    display:grid;

    grid-template-columns:140px 1fr;

    gap:36px;

    align-items:center;

    padding:38px 42px;

    background:#fff;

    border-radius:18px;

    border:1px solid #ececec;

    transition:.35s;

}

.stage-card:hover{

    border-color:#173f5b;

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px

    rgba(0,0,0,.08);

}

.stage-card__label{

    display:flex;

    align-items:center;

    justify-content:center;

    width:110px;

    height:110px;

    border-radius:50%;

    background:#173f5b;

    color:#fff;

    font-size:36px;

    font-weight:700;

}

.stage-card h3{

    margin:0 0 16px;

    color:#173f5b;

    font-size:30px;

    line-height:1.5;

}

.stage-card p{

    margin:0;

    color:#555;

    line-height:2;

    font-size:17px;

}

/*==================================================
  痛みに配慮した治療
==================================================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.feature-grid article{

    padding:38px;

    background:#fff;

    border-radius:18px;

    border:1px solid #ececec;

    transition:.3s;

}

.feature-grid article:hover{

    border-color:#173f5b;

    box-shadow:

    0 15px 35px

    rgba(0,0,0,.08);

}

.feature-grid h3{

    margin:0 0 18px;

    color:#173f5b;

    font-size:28px;

    line-height:1.5;

}

.feature-grid p{

    margin:0;

    color:#555;

    font-size:16px;

    line-height:2;

}

/*==================================================
  MI治療
==================================================*/

.caries-preserve p{

    max-width:920px;

    margin:0 auto;

    text-align:center;

    color:#555;

    font-size:18px;

    line-height:2.2;

}
/*==================================================
  詰め物・被せ物
==================================================*/

.restoration-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:36px;

    margin-top:60px;

}

.restoration-card{

    padding:45px;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:18px;

    transition:.35s;

}

.restoration-card:hover{

    transform:translateY(-6px);

    border-color:#173f5b;

    box-shadow:

    0 20px 45px

    rgba(0,0,0,.08);

}

.restoration-card h3{

    margin:0 0 25px;

    color:#173f5b;

    font-size:30px;

}

.restoration-card ul{

    margin:0;

    padding-left:22px;

}

.restoration-card li{

    margin-bottom:14px;

    color:#555;

    line-height:1.9;

}

.restoration-card a{

    display:inline-block;

    margin-top:25px;

    color:#173f5b;

    font-weight:700;

    text-decoration:none;

}

.restoration-card a:hover{

    color:#b48a3c;

}

/*==================================================
  治療の流れ
==================================================*/

.flow-list{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:26px;

}

.flow-item{

    position:relative;

    padding:35px 25px;

    background:#fff;

    border-radius:18px;

    text-align:center;

    border:1px solid #ececec;

    transition:.35s;

}

.flow-item:hover{

    transform:translateY(-6px);

    border-color:#173f5b;

    box-shadow:

    0 18px 40px

    rgba(0,0,0,.08);

}

.flow-item__number{

    width:70px;

    height:70px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#173f5b;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    font-weight:700;

}

.flow-item h3{

    margin:0 0 18px;

    color:#173f5b;

    font-size:22px;

    line-height:1.5;

}

.flow-item p{

    margin:0;

    color:#555;

    font-size:15px;

    line-height:2;

}

/*==================================================
  症例
==================================================*/

.case-button{

    margin-top:50px;

    text-align:center;

}

.case-button .button{

    min-width:320px;

}
/*==================================================
  FAQ
==================================================*/

.faq-list{

    max-width:980px;

    margin:0 auto;

}

.faq-item{

    margin-bottom:22px;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:14px;

    overflow:hidden;

}

.faq-item summary{

    position:relative;

    padding:26px 70px 26px 28px;

    cursor:pointer;

    list-style:none;

    color:#173f5b;

    font-size:20px;

    font-weight:700;

    transition:.3s;

}

.faq-item summary:hover{

    background:#f7fafc;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:28px;

    top:50%;

    transform:translateY(-50%);

    font-size:34px;

    color:#173f5b;

    transition:.3s;

}

.faq-item[open] summary::after{

    content:"−";

}

.faq-item div{

    padding:0 28px 28px;

}

.faq-item p{

    margin:0;

    color:#555;

    line-height:2;

    font-size:16px;

}

/*==================================================
  CTA
==================================================*/

.cta-box{

    padding:80px;

    border-radius:24px;

    background:

    linear-gradient(
        135deg,
        #173f5b,
        #245c86
    );

    color:#fff;

    text-align:center;

}

.cta-box h2{

    margin:0;

    font-size:42px;

    line-height:1.5;

}

.cta-box p{

    max-width:900px;

    margin:30px auto 0;

    line-height:2.2;

    font-size:17px;

    opacity:.95;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:24px;

    margin-top:45px;

}

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:280px;

    height:62px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.button--primary{

    background:#fff;

    color:#173f5b;

}

.button--primary:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 35px

    rgba(0,0,0,.18);

}

.button--secondary{

    border:2px solid #fff;

    color:#fff;

}

.button--secondary:hover{

    background:#fff;

    color:#173f5b;

}

/*==================================================
  Responsive
==================================================*/

@media (max-width:1024px){

    .problem-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .flow-list{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){
    .feature-item p,
    .stage-card p{
        text-align: left;
    }
    .feature-item h3,
    .stage-card h3{
        text-align: left;
    }

    .caries-intro .inner,

    .feature-item,

    .stage-card,

    .restoration-grid,

    .feature-grid,

    .flow-list{

        display:block;

    }

    .problem-grid{

        grid-template-columns: repeat(2, 1fr);
        gap: 14px;

    }

    .feature-item{

        padding:30px;

    }

    .feature-item__number,

    .stage-card__label{

        margin:0 auto 25px;

    }

    .feature-item__content,

    .stage-card__body{

        text-align:center;

    }

    .restoration-card{

        margin-bottom:25px;

    }

    .flow-item{

        margin-bottom:25px;

    }

    .cta-box{

        padding:45px 24px;

    }

    .cta-box h2{

        font-size:30px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .button{

        width:100%;

        min-width:0;

    }

}


/*==================================================
  Hidden Caries
==================================================*/

.caries-hidden{

    padding:80px 0;

}

.hidden-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}

.hidden-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

}

.hidden-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.hidden-images{

    display:grid;

    grid-template-columns:1fr 1fr;

}

.hidden-images figure{

    margin:0;

}

.hidden-images img{

    width:100%;

    display:block;

    aspect-ratio:1/1;

    object-fit:cover;

}

.hidden-images figcaption{

    padding:8px;

    background:#173f5b;

    color:#fff;

    text-align:center;

    font-size:13px;

}

.hidden-card h3{

    margin:28px 28px 18px;

    color:#173f5b;

    font-size:24px;

    line-height:1.5;

}

.hidden-card p{

    margin:0 28px 30px;

    color:#555;

    line-height:2;

}

@media(max-width:768px){

    .hidden-grid{

        grid-template-columns:1fr;

    }

}