@charset "utf-8";

/* 矯正症例ページ専用。既存CSSへの影響を避けるため .case-page 配下に限定 */
.case-page { color:#222; }
.case-page * { box-sizing:border-box; }
.case-page p { margin:0; }
.case-intro { margin:22px 5px 28px; font-size:15px; line-height:1.9; }
.case-intro .case-note { margin-top:6px; }
.case-instagram { margin:0 5px 45px; padding:34px 25px; background:#fff0df; border-radius:14px; text-align:center; }
.case-instagram-title { margin-bottom:13px !important; font-size:20px; font-weight:bold; }
.case-instagram-btn { display:inline-flex; align-items:center; justify-content:center; min-width:330px; margin-top:25px; padding:11px 24px; border-radius:30px; background:#ff8417; color:#fff !important; font-size:17px; font-weight:bold; text-decoration:none !important; }
.case-instagram-btn:hover { opacity:.8; }
.case-instagram-btn img { width:23px; height:23px; margin-right:9px; }
.case-instagram-btn span { margin-left:12px; font-size:28px; line-height:1; }
.case-card { margin:0 0 64px; }
.case-title { position:relative; margin:0 0 22px; padding:6px 20px 6px 45px; border-radius:20px; background:#65bd96; color:#fff; font-size:18px; line-height:1.3; }
.case-title span { position:absolute; left:18px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:#fff; }
.case-data { display:grid; grid-template-columns:128px 1fr; gap:6px 22px; margin:0 5px 43px; font-size:15px; line-height:1.7; }
.case-data dt { padding:7px 10px; background:#ffffbd; text-align:center; display:flex;justify-content:center; align-items:center; }
.case-data dd { margin:0; padding:7px 0; }
.case-photo-block { margin:0 5px 46px; }
.case-photo-block h4 { position:relative; margin:0 0 25px; padding:0 0 8px 25px; border-bottom:3px solid #65bd96; color:#111; font-size:18px; }
.case-photo-block h4:before { content:""; position:absolute; left:3px; top:0; width:8px; height:27px; background:#65bd96; }
.case-photo-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px 18px; align-items:start; }
.case-photo-grid figure { margin:0; text-align:center; }
.case-photo-grid img { display:block; width:100%; height:auto; }
.case-photo-grid figcaption { margin-top:8px; color:#111; font-size:14px; line-height:1.45; }

.case-arrow{
    display:inline-block;
    margin-left:12px;
    transform:translateY(-2px);
}
/* PC版 */
#container .case-page-sp { display:none; }

/* スマホ版 */
@media screen and (max-width:960px) {
    .spcontainer .case-page-pc { display:none; }
    .spcontainer .case-page { width:auto; margin:0 4vw; color:#222; }
    .spcontainer .case-intro { margin:1.5em 0 2em; font-size:3.8vw; line-height:1.8; }
    .spcontainer .case-intro p { text-align:left; font-size:3.8vw; }
    .spcontainer .case-instagram { margin:0 0 3em; padding:2em 1.2em; border-radius:12px; }
    .spcontainer .case-instagram p { font-size:3.8vw; line-height:1.7; }
    .spcontainer .case-instagram-title { font-size:4.5vw !important; }
    .spcontainer .case-instagram-btn { min-width:0; width:90%; margin-top:1.5em; padding:.8em 1em; font-size:4vw; }
    .spcontainer .case-instagram-btn img { width:5vw; height:5vw; margin-right:2vw; }
    .spcontainer .case-instagram-btn span { margin-left:2vw; font-size:7vw; }
    .spcontainer .case-card { margin-bottom:4em; }
    .spcontainer .case-title { margin-bottom:1.4em; padding:.45em 1em .45em 2.6em; border-radius:30px; font-size:4.8vw; text-align:left; }
    .spcontainer .case-title span { left:1em; width:3vw; height:3vw; margin-top:-1.5vw; }
    .spcontainer .case-data { display:grid; grid-template-columns:31% 1fr; gap:.45em .8em; margin:0 0 2.8em; font-size:3.8vw; }
    .spcontainer .case-data dt { display:flex; align-items:center; justify-content:center; padding:.55em .3em; }
    .spcontainer .case-data dd { padding:.55em 0; text-align:left; }
    .spcontainer .case-photo-block { margin:0 0 2.8em; }
    .spcontainer .case-photo-block h4 { margin-bottom:1.3em; padding-left:1.4em; font-size:4.7vw; text-align:left; }
    .spcontainer .case-photo-block h4:before { width:2vw; height:6vw; }
    .spcontainer .case-photo-grid { grid-template-columns:repeat(2, 1fr); gap:1.6em .8em; }
    .spcontainer .case-photo-grid figcaption { margin-top:.5em; font-size:3.5vw; }
}