@charset "UTF-8";

/* =========================================
   1. ベース設定 & カラーパレット
   ========================================= */
#preortho{
    --pop-yellow: #fff9c4; /* 背景用：クリームイエロー */
    --pop-orange: #ffab40; /* 強調：元気なオレンジ */
    --pop-blue: #4dd0e1;   /* 清潔感：水色 */
    --pop-green: #aed581;  /* 安心感：若草色 */
    --pop-pink: #f48fb1;   /* アクセント：ピンク */
    --text-brown: #5d4037; /* 文字色：優しい茶色 */
    --white: #ffffff;
    --gray-bg: #f9f9f9;
}

#preortho{
    font-family: "Zen Maru Gothic", sans-serif; /* 丸文字フォント */
    color: var(--text-brown);
    background-color: var(--white);
    line-height: 1.8;
    margin: 0;
    padding-bottom: 80px; /* スマホ用固定フッターの分を確保 */
    overflow-x: hidden;
}

#preortho h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

#preortho h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

#preortho div:after{
    content: none !important;
    display: none !important;
}

#preortho strong {
    color: #222;
    font-weight: bold;
}

/* 画像のはみ出し防止 & 角丸 */
#preortho img{
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    vertical-align: bottom;
}

#preortho a{
    text-decoration: none;
    transition: all 0.3s ease;
}

#preortho ul{ list-style: none; padding: 0; margin: 0; }

/* =========================================
   2. 共通レイアウト & タイトル
   ========================================= */
#preortho .container{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

#preortho section{
    padding: 60px 0;
    position: relative;
}

/* セクションタイトル */
#preortho .section-head{
    text-align: center;
    margin-bottom: 40px;
}
#preortho .section-head h2{
    font-size: 1.8rem;
    color: var(--pop-orange);
    display: inline-block;
    background: linear-gradient(transparent 70%, #fff3e0 70%);
    margin-bottom: 10px;
}
#preortho .section-head p{
    font-size: 0.95rem;
    color: #888;
    font-weight: bold;
}

#preortho .mft-visual{
	text-align: center;
}

/* 背景バリエーション */
#preortho .bg-pop-pattern{
    background-color: #fff8e1;
    background-image: radial-gradient(#ffe0b2 2px, transparent 2px);
    background-size: 20px 20px;
}
#preortho .bg-cloud{
    background-color: #e1f5fe;
    border-radius: 50px 50px 0 0;
    padding-top: 80px;
    margin-top: 40px;
}
#preortho .bg-yellow{
    background-color: var(--pop-yellow);
    border-radius: 30px;
    margin: 20px 0;
}
#preortho .bg-light-yellow{
    background-color: #fffde7;
}
#preortho .bg-white{
    background-color: #fff;
}

/* バッジ類 */
#preortho .parents-badge, #preortho .kids-badge{
    background: var(--pop-blue);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
}
#preortho .kids-badge{ background: var(--pop-orange); }

/* =========================================
   3. ヘッダー & ナビ
   ========================================= */
#preortho #header{
    background: #fff;
    border-bottom: 5px solid var(--pop-blue);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
#preortho .header-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#preortho .logo-area h1 a{
    color: var(--pop-blue);
    font-size: 1.2rem;
    line-height: 1.2;
    display: block;
    font-weight: 900;
}
#preortho .logo-area span{ font-size: 0.8rem; color: var(--pop-orange); }
#preortho .tag-area{ font-size: 0.7rem; color: #999; margin: 0; }

#preortho .pc-only{ display: none; } /* スマホでは非表示 */

#preortho .btn-reservation{
    background: var(--pop-orange);
    color: #fff;
    padding: 10px 15px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.85rem;
    box-shadow: 0 4px 0 #e65100;
}
#preortho .btn-reservation:active{ box-shadow: none; transform: translateY(4px); }

/* 目次ナビ */
#preortho .toc-nav{
    padding: 15px 0;
    background: #f0f4f8;
    border-bottom: 1px solid #ddd;
}
#preortho .toc-title{ text-align: center; font-weight: bold; margin-bottom: 10px; color: var(--text-brown); }
#preortho .toc-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
#preortho .toc-list a{
    background: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--pop-blue);
    border: 1px solid var(--pop-blue);
    display: block;
}

/* =========================================
   4. ヒーローエリア
   ========================================= */
#preortho #hero{
    background: linear-gradient(180deg, #e0f7fa 0%, #ffffff 100%);
    text-align: center;
    padding-bottom: 60px;
    border-radius: 0 0 50% 50% / 40px;
}
#preortho .badge-pop{
    background: var(--pop-orange);
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
    animation: bounce 2s infinite;
}
#preortho .marker-yellow{ background: linear-gradient(transparent 60%, #ffeb3b 60%); }
#preortho .hero-content h2{
    font-size: 2rem;
    color: var(--pop-blue);
    line-height: 1.4;
    background: none;
    margin: 10px 0 20px;
}
#preortho .hero-btns{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    align-items: center;
}
#preortho .btn-yellow, #preortho .btn-blue{
    display: block;
    width: 100%;
    max-width: 300px;
    padding: 15px;
    border-radius: 50px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#preortho .btn-yellow{ background: #ffeb3b; color: var(--text-brown); border: 2px solid var(--text-brown); font-size: 1.1rem; }
#preortho .btn-blue{ background: #fff; color: var(--pop-blue); border: 2px solid var(--pop-blue); }

#preortho .floating{
    margin-top: 30px;
    animation: float 3s ease-in-out infinite;
}
#preortho .floating img{
    border: 5px solid #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    max-width: 90%;
}

/* =========================================
   5. キッズゾーン (画像重視レイアウト)
   ========================================= */
#preortho .kids-block{
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    border: 3px solid var(--pop-blue);
    box-shadow: 5px 5px 0 #b2ebf2;
}
#preortho .kids-block h3{ color: var(--pop-blue); font-size: 1.3rem; margin-top: 0; }
#preortho .kids-img img{ border-radius: 15px; margin-bottom: 15px; }

#preortho .kids-message-box{
    background: #fff9c4;
    padding: 20px;
    border-radius: 15px;
    border: 2px dashed var(--pop-orange);
    text-align: center;
    margin-top: 30px;
}

/* タイムスケジュール */
#preortho .schedule-grid{
    display: flex;
    gap: 10px;
    margin-top: 20px;
    overflow-x: auto; /* スマホで横スクロール */
    padding-bottom: 10px;
}
#preortho .schedule-item{
    flex: 0 0 120px; /* 固定幅 */
    background: #fff;
    padding: 15px 10px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #eee;
}
#preortho .schedule-item.active{
    border-color: var(--pop-orange);
    background: #fff8e1;
    position: relative;
}
#preortho .schedule-item.active::after{
    content: "OK!";
    position: absolute;
    top: -10px; right: -5px;
    background: var(--pop-orange);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
}

/* =========================================
   6. 親御様向け：チェック & メカニズム
   ========================================= */
#preortho .check-intro-box{
    background: #f0f4f8;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 30px;
    border-left: 5px solid var(--pop-blue);
}

#preortho .habit-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}
#preortho .habit-card{
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #eee;
    box-shadow: 0 4px 0 #eee;
}
#preortho .habit-card h3{ font-size: 1rem; margin: 10px 0 5px; color: var(--text-brown); }
#preortho .habit-card p{ font-size: 0.85rem; color: #666; line-height: 1.5; }

/* メカニズム図解 */
#preortho .mechanism-visual{
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 30px;
    text-align: center;
}
#preortho .mech-box{
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 10px;
    background: #f9f9f9;
}
#preortho .mech-box.bad{ border: 2px solid #ddd; }
#preortho .mech-box.good{ border: 2px solid var(--pop-orange); background: #fff3e0; }
#preortho .arrow-mech{
    font-size: 1.5rem; color: var(--pop-orange); font-weight: bold; margin: 10px 0;
    display: block; transform: rotate(90deg); /* スマホは縦並びなので矢印を下へ */
}

/* ステップ */
#preortho .step-item{
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
#preortho .step-num{
    background: var(--pop-blue);
    color: #fff;
    width: 35px; height: 35px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 15px;
}

/* タイプ紹介 */
#preortho .type-area{ padding: 20px; border-radius: 20px; border: 2px solid #eee; text-align: center; margin-top: 30px; }
#preortho .card-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
#preortho .tag-blue{ background: var(--pop-blue); color:#fff; padding:3px 8px; border-radius:5px; font-size:0.8rem; }
#preortho .tag-green{ background: var(--pop-green); color:#fff; padding:3px 8px; border-radius:5px; font-size:0.8rem; }
#preortho .tag-pink{ background: var(--pop-pink); color:#fff; padding:3px 8px; border-radius:5px; font-size:0.8rem; }

/* =========================================
   7. 比較 & 症例 & MFT
   ========================================= */
/* 比較カード（スマホ横スクロール） */
#preortho .compare-visual-grid{
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
}
#preortho .comp-card{
    min-width: 260px;
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    border: 2px solid #eee;
}
#preortho .comp-card.best{ border: 4px solid var(--pop-orange); transform: scale(1.02); }
#preortho .badge-rec{ background: var(--pop-orange); color: #fff; display: inline-block; padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; margin-bottom: 10px; font-weight: bold; }
#preortho .comp-card h3{ margin-top: 0; color: var(--text-brown); }
#preortho .comp-card ul{ margin-top: 15px; }
#preortho .comp-card li{ margin-bottom: 10px; border-bottom: 1px dashed #eee; padding-bottom: 5px; font-size: 0.9rem; }
#preortho .comp-card .icon{ font-size: 1.2rem; margin-right: 5px; }

/* 症例（大写真） */
#preortho .case-big-card{
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
#preortho .case-comment{
    background: #fff9c4;
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    font-weight: bold;
    color: var(--text-brown);
}

/* MFT（4コマ風） */
#preortho .mft-images{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}
#preortho .mft-step{
    background: #fff;
    padding: 10px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid #eee;
}
#preortho .mft-step span{ display: block; font-weight: bold; margin-top: 5px; color: var(--pop-orange); }

/* =========================================
   8. スタッフ & 料金 & フッター
   ========================================= */
#preortho .staff-box{
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    border: 2px dashed var(--pop-orange);
    text-align: center;
}
#preortho .staff-img img{ width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--pop-yellow); object-fit: cover; margin-bottom: 15px; }
#preortho .fukidashi{
    background: var(--pop-pink); color: #fff; padding: 10px; border-radius: 20px;
    margin-bottom: 15px; position: relative; display: inline-block;
}
#preortho .fukidashi::after{
    content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    border-width: 10px 10px 0; border-style: solid; border-color: var(--pop-pink) transparent;
}
#preortho .fukidashi h3{ font-size: 1rem; margin: 0; background: none; color: #fff; }

/* 料金表 */
#preortho .info-grid{ display: grid; gap: 20px; }
#preortho .price-area, #preortho .access-area{ background: #fff; padding: 20px; border-radius: 20px; border: 2px solid #eee; }
#preortho .price-row{ display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #ddd; }
#preortho .main-price{ color: var(--pop-orange); font-weight: bold; font-size: 1.1rem; border-bottom: none; }

/* フッター */
#preortho footer{
    background: var(--pop-blue); color: #fff; text-align: center;
    padding: 40px 20px 80px 20px; border-radius: 40px 40px 0 0;
}

.sp-fixFooter2022{
	z-index: 99!important;
}


#preortho .footer-btns{ display: flex; flex-direction: column; gap: 15px; max-width: 300px; margin: 20px auto; }
#preortho .f-tel, #preortho .f-web{
    background: #fff; color: var(--pop-blue); padding: 15px; border-radius: 50px; font-weight: bold; text-decoration: none;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
}
#preortho .f-web{ background: var(--pop-orange); color: #fff; box-shadow: 0 4px 0 #e65100; }

/* スマホ用固定フッター */
#preortho .sticky-footer{
    position: fixed; bottom: 0; left: 0; width: 100%;
    display: flex; z-index: 2000; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
#preortho .sticky-tel, #preortho .sticky-web{
    flex: 1; text-align: center; padding: 15px; color: #fff; font-weight: bold; font-size: 0.9rem;
}
#preortho .sticky-tel{ background: #333; }
#preortho .sticky-web{ background: var(--pop-orange); }

/* =========================================
   9. PC用レスポンシブ (768px以上)
   ========================================= */
@media (min-width: 768px) {
    #preortho .pc-only{ display: block; }
    
    #preortho .hero-container{ display: flex; align-items: center; justify-content: space-between; text-align: left; }
    #preortho .hero-content{ width: 50%; }
    #preortho .hero-image{ width: 45%; }
    #preortho .hero-btns{ flex-direction: row; }

    #preortho .kids-block{ display: flex; align-items: center; gap: 30px; }
    #preortho .kids-block.reverse{ flex-direction: row-reverse; }
    #preortho .kids-img, #preortho .kids-text{ flex: 1; }
    
    #preortho .habit-grid, #preortho .mft-images{ grid-template-columns: repeat(4, 1fr); }
    #preortho .schedule-grid{ justify-content: center; overflow: visible; }
    
    #preortho #timing .mechanism-visual{ display: block;  }
	#preortho #future-branch .mechanism-visual{ display: block;  }
	#preortho .mechanism-visual{ display: flex; gap: 20px; align-items: stretch; }
    #preortho .arrow-mech{ transform: rotate(0deg); align-self: center; }

    #preortho .compare-visual-grid{ justify-content: center; overflow: visible; }
    #preortho .comp-card{ width: 45%; }
    
    #preortho .case-grid, #preortho .info-grid{ grid-template-columns: 1fr 1fr; }
    
    #preortho .staff-box{ display: flex; text-align: left; align-items: flex-start; gap: 30px; }
    #preortho .staff-img{ flex-shrink: 0; }
    #preortho .fukidashi::after{ left: -10px; bottom: auto; top: 15px; border-width: 10px 10px 10px 0; border-color: transparent var(--pop-pink) transparent transparent; }

    #preortho .footer-btns{ flex-direction: row; }
    #preortho .sticky-footer{ display: none; }
    #preortho{ padding-bottom: 0; }
}

/* アニメーション定義 */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }


/* --- 新規追加：アイキャッチスライダー --- */
#preortho .eyecatch-slider-area{
    margin-top: -30px; /* ヒーローの波線に少し重ねる */
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

#preortho .slider-scroller{
    display: flex;
    gap: 15px;
    overflow-x: auto; /* 横スクロール */
    padding: 10px 5px 20px 5px; /* 下に影用の余白 */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

#preortho .slide-item{
    min-width: 260px; /* 画像の幅 */
    flex-shrink: 0;
    scroll-snap-align: center;
    position: relative;
    text-align: center;
}

#preortho .slide-item img{
    width: 100%;
    height: 180px; /* 画像の高さ */
    object-fit: cover;
    border-radius: 15px;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

#preortho .slide-caption{
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--text-brown);
    font-weight: bold;
}

#preortho .slider-note{
    text-align: center;
    font-size: 0.8rem;
    color: var(--pop-blue);
    font-weight: bold;
    margin-top: -10px;
}

/* PC調整 */
@media (min-width: 768px) {
    #preortho .slider-scroller{
        justify-content: center; /* 画像が少ない時は中央寄せ */
        gap: 20px;
    }
    #preortho .slide-item{ width: 300px; }
    #preortho .slide-item img{ height: 200px; }
}

/* --- 予防矯正の分かれ道（ID: future-branch）専用デザイン --- */
#preortho #future-branch.bg-pink{
    background-color: #fff0f3;
}

#preortho .branch-visual{
    text-align: center;
    margin-top: 40px;
}

#preortho .branch-start img{
    max-width: 100%;
    border: 5px solid #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#preortho .branch-arrow{
    margin: 20px 0;
}
#preortho .branch-arrow img{
    max-width: 100px;
}

/* 3列カードレイアウト */
#preortho .branch-grid{
    display: grid;
    grid-template-columns: 1fr; /* スマホは1列 */
    gap: 20px;
    align-items: stretch;
}

@media (min-width: 768px) {
    #preortho .branch-grid{
        grid-template-columns: 1fr 1fr 1fr; /* PCは3列 */
    }
}

/* カード共通 */
#preortho .branch-card{
    background: #fff;
    border-radius: 15px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    border-top: 6px solid #ccc; /* 上部の色線 */
}

#preortho .branch-card h3{
    margin: 10px 0;
    font-size: 1.2rem;
}

#preortho .branch-icon{
    font-size: 2.5rem;
    margin-bottom: 5px;
}

/* 色分け設定 */
/* ① 卒業（青） */
#preortho .branch-card.type-best{
    border-top-color: #00bcd4;
    background-color: #e0f7fa;
}
#preortho .branch-card.type-best h3{ color: #008ba3; }

/* ② 軽くする（オレンジ） */
#preortho .branch-card.type-good{
    border-top-color: #ff9800;
    background-color: #fff3e0;
}
#preortho .branch-card.type-good h3{ color: #ef6c00; }

/* ③ なし（グレー） */
#preortho .branch-card.type-bad{
    border-top-color: #78909c;
    background-color: #eceff1;
}
#preortho .branch-card.type-bad h3{ color: #546e7a; }

/* リストのデザイン */
#preortho .branch-list{
    margin-top: auto; /* 下に寄せる */
    text-align: left;
    background: rgba(255,255,255,0.7);
    padding: 10px;
    border-radius: 10px;
}

#preortho .branch-list li{
    list-style: none;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 5px;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    padding-bottom: 3px;
    color: #444;
}
#preortho .branch-list li:last-child{
    border-bottom: none;
}

/* --- マンガセクション --- */
#preortho .manga-grid{
    display: grid;
    grid-template-columns: 1fr; /* スマホでは縦1列で大きく表示 */
    gap: 30px;
    margin-top: 30px;
}

#preortho .manga-item img{
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* 少し浮かせる影 */
    border: 5px solid #fff; /* 白いフチで絵本っぽく */
    display: block;
}

/* PCサイズでの調整 */
@media (min-width: 768px) {
    #preortho .manga-grid{
        grid-template-columns: 1fr 1fr; /* PCでは2列に並べる */
        gap: 40px;
    }
}

/* =========================================================
   なかむら歯科クリニックHP ヘッダー／フッター移植用CSS
   ========================================================= */

@charset "UTF-8";
/* =========================================================
   なかむら歯科クリニックHP ヘッダー／フッター移植用CSS
   Scope: .ndc-site-chrome 内だけに適用し、LP本文への干渉を抑える
   ========================================================= */

#preortho .ndc-site-chrome, #preortho .ndc-site-chrome *{
  box-sizing: border-box;
}

#preortho .ndc-site-chrome{
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

#preortho .ndc-site-chrome img{
  max-width: 100%;
  height: auto;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: bottom;
}

#preortho .ndc-site-chrome ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

#preortho .ndc-site-chrome a{
  transition: none;
}

#preortho .ndc-site-chrome .wbasic, #preortho .ndc-site-chrome .wbasic1000{
  width: 1000px;
  margin: 0 auto;
}

#preortho .ndc-site-chrome .clearfix{
  overflow: hidden;
  zoom: 1;
}
#preortho .ndc-site-chrome .clearfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* 表示切替 */
@media (max-width: 768px) {
  #preortho .ndc-site-chrome .spNone{ display: none !important; }
  #preortho .ndc-site-chrome .wbasic, #preortho .ndc-site-chrome .wbasic1000{
    width: 100%;
  }
}
@media (min-width: 769px) {
  #preortho .ndc-site-chrome .pcNone{ display: none !important; }
}

/* =========================================================
   Header
   ========================================================= */
#preortho .ndc-site-chrome header{
  height: 160px;
  background: #fff;
  color: #333;
  padding: 0;
  border: 0;
  box-shadow: none;
  position: relative;
  z-index: 50;
}

#preortho .ndc-site-chrome header h1{
  font-weight: normal;
  font-size: 10px;
  margin: 0;
  padding: 2px;
  height: 20px;
  line-height: 1.4;
  color: #333;
}

#preortho .ndc-site-chrome header ul{
  width: 100%;
  overflow: hidden;
}
#preortho .ndc-site-chrome header ul li{
  float: left;
}
#preortho .ndc-site-chrome header ul li.logo{
  width: 36%;
  margin-top: 24px;
}
#preortho .ndc-site-chrome header ul li.c01{
  width: 33%;
  margin-top: 4px;
}
#preortho .ndc-site-chrome header ul li.c02{
  width: 31%;
  margin-top: 4px;
  margin-bottom: 0;
}
#preortho .ndc-site-chrome .mb08{ margin-bottom: 8px; }
#preortho .ndc-site-chrome .mb10{ margin-bottom: 10px; }
#preortho .ndc-site-chrome .mb20{ margin-bottom: 20px; }
#preortho .ndc-site-chrome .mt10{ margin-top: 10px; }

@media (max-width: 768px) {
  #preortho .ndc-site-chrome header{
    height: auto;
    min-height: 94px;
    padding-right: 48px;
  }
  #preortho .ndc-site-chrome header h1{
    font-size: 10px;
    padding: 5px;
    height: auto;
    min-height: 20px;
    text-align: center;
  }
  #preortho .ndc-site-chrome header ul li.logo{
    width: 50%;
    padding: 5px;
    margin: 4px auto 0;
  }
  #preortho .ndc-site-chrome header ul li.time{
    width: 36%;
    margin-left: 3%;
    padding: 10px 0;
    box-sizing: content-box;
  }
  #preortho .ndc-site-chrome header ul li.time img{
    width: 100%;
    height: auto;
  }
  #preortho .ndc-site-chrome header ul li.c01, #preortho .ndc-site-chrome header ul li.c02, #preortho .ndc-site-chrome header ul li.c03{
    display: none;
  }
  #preortho .ndc-site-chrome header ul li.logo img{
    width: 100%;
    height: auto;
  }
}

/* =========================================================
   PC Nav
   ========================================================= */
#preortho .ndc-site-chrome nav{
  background: #fff;
  position: relative;
  z-index: 40;
}
@media (min-width: 769px) {
  #preortho .ndc-site-chrome .dropmenu{
    height: 65px;
    zoom: 1;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  #preortho .ndc-site-chrome .dropmenu:before, #preortho .ndc-site-chrome .dropmenu:after{
    content: "";
    display: table;
  }
  #preortho .ndc-site-chrome .dropmenu:after{ clear: both; }
  #preortho .ndc-site-chrome .dropmenu li{
    position: relative;
    width: calc(100% / 7);
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  #preortho .ndc-site-chrome .dropmenu li a{
    display: block;
    margin: 0;
    padding: 15px 0;
    color: #727171;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    background: #fff;
  }
  #preortho .ndc-site-chrome .dropmenu li a:hover{
    border-top: 5px solid #ed6d00;
    color: #727171;
  }
  #preortho .ndc-site-chrome .dropmenu li ul{
    list-style: none;
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
  }
  #preortho .ndc-site-chrome .dropmenu li:hover ul{
    top: 100%;
    visibility: visible;
    opacity: 1;
  }
  #preortho .ndc-site-chrome .dropmenu li ul li{
    width: 120%;
    min-width: 150px;
  }
  #preortho .ndc-site-chrome .dropmenu li ul li a{
    padding: 10px 4px;
    border-bottom: 1px dotted #727171;
    background-color: #fff;
    text-align: center;
    font-size: 12px;
  }
}

/* =========================================================
   SP Drawer Nav
   ========================================================= */
#preortho .ndc-site-chrome .smpbtn{
  display: block;
  width: 40px;
  height: 40px;
  position: fixed;
  top: 10px;
  right: 4px;
  cursor: pointer;
  z-index: 2200;
  background-image: url(https://www.nakamura-sika.net/_share/header/spbtn.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 80px 40px;
}
#preortho .ndc-site-chrome .smpbtn.peke{
  background-position: -40px 0;
}
#preortho .ndc-site-chrome .drawr{
  display: none;
  background-color: rgba(248, 244, 230, 0.95);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2100;
  width: 100%;
  height: 100vh;
  padding: 0 0 120px 0;
  overflow-y: auto;
}
#preortho .ndc-site-chrome .drawr.is-open{
  display: block;
}
@media (max-width: 768px) {
  #preortho .ndc-site-chrome .drawr .spNone{ display: none !important; }
  #preortho .ndc-site-chrome .drawr #menu li, #preortho .ndc-site-chrome .drawr .dropmenu li, #preortho .ndc-site-chrome .drawr .ndc-menu li{
    float: left;
    width: 48%;
    margin: 5px 1%;
  }
  #preortho .ndc-site-chrome .drawr .dropmenu ul, #preortho .ndc-site-chrome .drawr .ndc-menu ul{
    padding-bottom: 20px;
  }
  #preortho .ndc-site-chrome .drawr .dropmenu li a, #preortho .ndc-site-chrome .drawr .ndc-menu li a{
    color: #40220f;
    font-weight: bold;
    display: block;
    font-size: 90%;
    padding: 6px;
    text-decoration: none;
    border-bottom: 1px solid #40220f;
    background: transparent;
  }
  #preortho .ndc-site-chrome .dropmenu p{
    font-size: 100%;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
    color: #40220f;
    margin: 0;
  }
  #preortho .ndc-site-chrome .dropmenu p span{
    background-color: rgba(0,0,0,0.1);
    padding: 5px;
    display: block;
    width: 94%;
    margin: 0 auto;
  }
  #preortho .ndc-site-chrome .sp-menu0{
    background: rgba(237, 109, 0, 0.8);
    padding: 10px 0;
  }
  #preortho .ndc-site-chrome .sp-menu1__ttl, #preortho .ndc-site-chrome .sp-menu1{
    background: rgba(255, 175, 0, 0.8);
  }
  #preortho .ndc-site-chrome .sp-menu2__ttl, #preortho .ndc-site-chrome .sp-menu2{
    background: rgba(244, 235, 58, 0.8);
  }
  #preortho .ndc-site-chrome .sp-menu3{
    background: rgba(0, 221, 119, 0.8);
    padding-bottom: 50px;
  }
}

/* =========================================================
   Footer
   ========================================================= */
#preortho .ndc-site-chrome footer{
  padding: 20px;
  clear: both;
  color: #333;
  background-color: #f8f4e6;
  border-radius: 0;
  text-align: left;
}
#preortho .ndc-site-chrome footer a{
  color: #40220f;
  text-decoration: none;
}
#preortho .ndc-site-chrome footer a:hover{
  color: #ed6d00;
  text-decoration: underline;
}
#preortho .ndc-site-chrome footer a:visited{
  color: #40220f;
}
#preortho .ndc-site-chrome footer .listL{
  margin-bottom: 30px;
  color: #fff;
}
#preortho .ndc-site-chrome footer .listL .h3L{
  background-color: #ed6d00;
  padding: 6px;
  font-size: 120%;
  color: #fff;
  text-align: center;
  margin: 0 0 10px 0;
  font-weight: bold;
}
#preortho .ndc-site-chrome footer .listL ul li{
  float: left;
  width: 22%;
  margin-right: 3%;
}
#preortho .ndc-site-chrome footer .listL ul li ul li{
  float: none;
  width: 100%;
  margin-right: 0;
}
#preortho .ndc-site-chrome footer .listL ul li ul li a{
  position: relative;
  padding: 0.5em 0 0.5em 1.2em;
  line-height: 2.0em;
  color: #40220f;
  font-size: 14px;
  text-align: left;
}
#preortho .ndc-site-chrome footer .listL ul li ul li a:before{
  content: "›";
  position: absolute;
  left: 0.25em;
  top: 0.45em;
  color: #ed6d00;
  font-weight: bold;
}
#preortho .ndc-site-chrome footer #ndc-info .left{
  float: left;
  width: 30%;
}
#preortho .ndc-site-chrome footer #ndc-info .right{
  float: right;
  width: 66%;
}
#preortho .ndc-site-chrome .tableFooter, #preortho .ndc-site-chrome .tableTime{
  border-collapse: collapse;
  color: #333;
}
#preortho .ndc-site-chrome .tableFooter{
  width: 100%;
  font-size: 90%;
}
#preortho .ndc-site-chrome .tableFooter th, #preortho .ndc-site-chrome .tableFooter td{
  border-bottom: 1px solid #d7cbb8;
  padding: 8px 4px;
  vertical-align: top;
  color: #333;
}
#preortho .ndc-site-chrome .tableFooter th{ width: 58px; }
#preortho .ndc-site-chrome .tableTime{
  text-align: center;
  font-size: 90%;
  margin: 0 auto;
}
#preortho .ndc-site-chrome .tableTime th, #preortho .ndc-site-chrome .tableTime td{
  border: 1px solid #d7cbb8;
  padding: 6px 4px;
  color: #333;
  background: #fff;
}
#preortho .ndc-site-chrome .textC{ text-align: center; }
#preortho .ndc-site-chrome .pBas{
  font-size: 110%;
  line-height: 160%;
  margin-bottom: 30px;
  color: #333;
}
#preortho .ndc-site-chrome div.footer_msg{ text-align: center; }
#preortho .ndc-site-chrome div.footer_msg img{ max-width: 100%; }
#preortho .ndc-site-chrome .imgR{ float: right; margin-left: 15px; }

@media (max-width: 768px) {
  #preortho .ndc-site-chrome footer{
    padding: 20px 12px 130px;
  }
  #preortho .ndc-site-chrome footer .listL ul li{
    float: left;
    width: 47%;
    margin-right: 3%;
  }
  #preortho .ndc-site-chrome footer #ndc-info .left, #preortho .ndc-site-chrome footer #ndc-info .right{
    float: none;
    width: 100%;
  }
  #preortho .ndc-site-chrome .tableFooter th, #preortho .ndc-site-chrome .tableFooter td{
    display: block;
    width: 100%;
  }
}

/* HP仕様のスマホ固定フッター */
#preortho .ndc-site-chrome #ndc-sp-fixed-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2000;
  padding: 8px 5px 5px;
  display: flex;
  align-items: flex-start;
  background-color: rgba(255,255,255,1);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.10);
}
#preortho .ndc-site-chrome #ndc-sp-fixed-footer img{
  max-width: 100%;
  height: auto;
}
#preortho .ndc-site-chrome .sp-fixFooter2022__btn{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
#preortho .ndc-site-chrome .sp-fixFooter2022__btn > a{
  width: 50%;
  display: flex;
  padding: 1px;
  align-items: stretch;
  text-align: center;
}
#preortho .ndc-site-chrome .sp-fixFooter2022__btn > a:nth-of-type(1), #preortho .ndc-site-chrome .sp-fixFooter2022__btn > a:nth-of-type(3){
  border-right: 1px solid #ddd;
}
#preortho .ndc-site-chrome .sp-fixFooter2022__btn > a:nth-of-type(1), #preortho .ndc-site-chrome .sp-fixFooter2022__btn > a:nth-of-type(2){
  border-bottom: 1px solid #ddd;
}
#preortho .ndc-site-chrome .sp-fixFooter2022__time{
  width: 52%;
  background-color: #fff;
  padding-left: 3px;
}
@media (min-width: 769px) {
  #preortho .ndc-site-chrome #ndc-sp-fixed-footer{ display: none !important; }
}
@media (max-width: 768px) {
  #preortho{ padding-bottom: 125px; }
}

/* Page top / AI chat from original site */
#preortho .ndc-site-chrome #ndc-pagetop{
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 20px;
  opacity: 1;
  z-index: 2001;
  margin: 0;
}
#preortho .ndc-site-chrome #ndc-pagetop a{
  text-decoration: none;
  color: #fff !important;
  width: 60px;
  text-align: center;
  display: block;
  border-radius: 30px;
  padding: 15px;
  background-color: #ed6d00;
}
#preortho .ndc-site-chrome #ndc-aichat{
  position: fixed;
  bottom: 10px;
  right: 90px;
  width: 80px;
  height: 80px;
  opacity: 1;
  z-index: 2001;
}
#preortho .ndc-site-chrome #ndc-aichat img{ width: 100%; }
@media (max-width: 768px) {
  #preortho .ndc-site-chrome #ndc-pagetop{
    bottom: 120px;
    right: 4px;
    font-size: 16px;
  }
  #preortho .ndc-site-chrome #ndc-pagetop a{
    width: 40px;
    border-radius: 4px;
    padding: 10px;
  }
  #preortho .ndc-site-chrome #ndc-aichat{
    bottom: 120px;
    right: 50px;
  }
}


/* --- 症例紹介：医療広告ガイドライン対応用 --- */
#preortho .case-comment{
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.6;
}

#preortho .case-guideline-info{
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

#preortho .case-guideline-info dl{
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

#preortho .case-guideline-info dt{
    font-weight: bold;
    color: var(--pop-blue); /* 水色 */
    margin-top: 10px;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 3px;
}

#preortho .case-guideline-info dt:first-child{
    margin-top: 0;
}

#preortho .case-guideline-info dd{
    margin: 5px 0 0 0;
    color: #444;
}

#preortho .case-guideline-info small{
    font-size: 0.7rem;
    color: #777;
}

/* PC閲覧時の調整 */
@media (min-width: 768px) {
    #preortho .case-guideline-info dl{
        display: flex;
        flex-wrap: wrap;
    }
    #preortho .case-guideline-info dt{
        width: 30%;
        margin-top: 10px;
        border-bottom: none;
    }
    #preortho .case-guideline-info dd{
        width: 70%;
        margin-top: 10px;
        border-bottom: 1px dotted #ccc;
        padding-bottom: 5px;
    }
    #preortho .case-guideline-info dt:first-child, #preortho .case-guideline-info dd:first-of-type{
        margin-top: 0;
    }
}

/* --- 口腔内7枚法＋レントゲン（8枚）レイアウト --- */
#preortho .intraoral-8-layout{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 横3列 */
    grid-template-rows: auto auto auto; /* 縦3行 */
    gap: 4px; /* 画像間の隙間 */
    max-width: 100%;
    margin: 0 auto;
}

/* 各画像の配置場所を細かく指定（横 / 縦） */
#preortho .item-oj{ grid-column: 1 / 2; grid-row: 1 / 2; } /* 左上 */
#preortho .item-up{ grid-column: 2 / 3; grid-row: 1 / 2; } /* 中上 */
#preortho .item-ob{ grid-column: 3 / 4; grid-row: 1 / 2; } /* 右上 */

#preortho .item-right{ grid-column: 1 / 2; grid-row: 2 / 3; } /* 左中 */
#preortho .item-center{ grid-column: 2 / 3; grid-row: 2 / 3; } /* 中中 */
#preortho .item-left{ grid-column: 3 / 4; grid-row: 2 / 3; } /* 右中 */

#preortho .item-xray{ grid-column: 1 / 2; grid-row: 3 / 4; } /* 左下（レントゲン） */
#preortho .item-down{ grid-column: 2 / 3; grid-row: 3 / 4; } /* 中下 */

/* 画像が枠に収まるようにする設定 */
#preortho .intraoral-item img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミングしてきれいに見せる */
    display: block;
    border-radius: 4px;
}

/* ※レントゲン写真だけは、見切れないように全体を表示させたい場合の特別設定 */
#preortho .item-xray img{
    object-fit: contain; /* パノラマが切れないように縮小して全体を表示 */
    background-color: #000; /* 余白ができる場合は黒背景で引き締める */
}

/* =========================================
   ここから追加：症例＆分かれ道セクション用CSS
========================================= */

/* --- 1. 予防矯正の分かれ道（3列カード） --- */
#preortho .branch-visual{ 
    text-align: center; 
    margin-top: 30px; 
}
#preortho .branch-start img{ 
    max-width: 100%; 
    height: auto; 
    border-radius: 10px; 
    margin-bottom: 20px; 
}
#preortho .branch-grid{
    display: grid;
    grid-template-columns: 1fr; /* スマホは縦1列 */
    gap: 20px;
    align-items: stretch;
}
@media (min-width: 768px) {
    #preortho .branch-grid{ 
        grid-template-columns: 1fr 1fr 1fr; /* PCは3列に並べる */
    }
}
#preortho .branch-card{
    background: #fff; 
    border-radius: 15px; 
    padding: 25px 20px;
    display: flex; 
    flex-direction: column;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
    border-top: 6px solid #ccc;
}
#preortho .branch-card h3{ 
    margin: 10px 0; 
    font-size: 1.2rem; 
}
#preortho .branch-icon{ 
    font-size: 2.5rem; 
    margin-bottom: 5px; 
    text-align: center; 
}
#preortho .branch-card.type-best{ border-top-color: #00bcd4; background-color: #e0f7fa; }
#preortho .branch-card.type-good{ border-top-color: #ff9800; background-color: #fff3e0; }
#preortho .branch-card.type-bad{ border-top-color: #78909c; background-color: #eceff1; }

#preortho .branch-list{ 
    margin-top: auto; 
    text-align: left; 
    background: rgba(255,255,255,0.7); 
    padding: 10px; 
    border-radius: 10px; 
}
#preortho .branch-list li{ 
    list-style: none; 
    font-size: 0.85rem; 
    font-weight: bold; 
    margin-bottom: 5px; 
    border-bottom: 1px dashed rgba(0,0,0,0.1); 
    padding-bottom: 3px; 
    color: #444; 
}
#preortho .branch-list li:last-child{ border-bottom: none; }


/* --- 2. 症例紹介（8枚法レイアウト） --- */
#preortho .intraoral-8-layout{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 横3マスの表を作る */
    grid-template-rows: auto auto auto; /* 縦3マスの表を作る */
    gap: 4px; /* 画像の隙間 */
    max-width: 100%;
    margin: 0 auto 20px auto;
}
/* 画像をマス目にはめ込む */
#preortho .intraoral-item.item-oj{ grid-column: 1 / 2; grid-row: 1 / 2; } /* 左上 */
#preortho .intraoral-item.item-up{ grid-column: 2 / 3; grid-row: 1 / 2; } /* 中上 */
#preortho .intraoral-item.item-ob{ grid-column: 3 / 4; grid-row: 1 / 2; } /* 右上 */
#preortho .intraoral-item.item-right{ grid-column: 1 / 2; grid-row: 2 / 3; } /* 左中 */
#preortho .intraoral-item.item-center{ grid-column: 2 / 3; grid-row: 2 / 3; } /* 中中 */
#preortho .intraoral-item.item-left{ grid-column: 3 / 4; grid-row: 2 / 3; } /* 右中 */
#preortho .intraoral-item.item-xray{ grid-column: 1 / 2; grid-row: 3 / 4; } /* 左下 */
#preortho .intraoral-item.item-down{ grid-column: 2 / 3; grid-row: 3 / 4; } /* 中下 */

#preortho .intraoral-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    background-color: #f4f4f4; /* 画像がない時の仮背景色 */
}
#preortho .intraoral-item.item-xray img{
    object-fit: contain; /* レントゲンが切れないようにする */
    background-color: #000;
}

/* --- 3. 症例紹介のテキスト（ガイドライン表） --- */
#preortho .case-title{ 
    margin-bottom: 15px; 
    font-size: 1.1rem; 
    color: #5c4033; 
    font-weight: bold; 
}
#preortho .case-guideline-info{ 
    background: #fff; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    padding: 15px; 
}
#preortho .case-guideline-info dl{ margin: 0; font-size: 0.85rem; line-height: 1.5; }
#preortho .case-guideline-info dt{ 
    font-weight: bold; 
    color: #00bcd4; 
    margin-top: 10px; 
    border-bottom: 1px dotted #ccc; 
    padding-bottom: 3px; 
}
#preortho .case-guideline-info dt:first-child{ margin-top: 0; }
#preortho .case-guideline-info dd{ margin: 5px 0 0 0; color: #444; }
#preortho .risk-list-small{ margin: 0; padding-left: 1.2em; }
#preortho .risk-list-small li{ margin-bottom: 3px; list-style-type: disc; }

@media (min-width: 768px) {
    #preortho .case-guideline-info dl{ display: flex; flex-wrap: wrap; }
    #preortho .case-guideline-info dt{ width: 30%; margin-top: 10px; border-bottom: none; }
    #preortho .case-guideline-info dd{ width: 70%; margin-top: 10px; border-bottom: 1px dotted #ccc; padding-bottom: 5px; }
    #preortho .case-guideline-info dt:first-child, #preortho .case-guideline-info dd:first-of-type{ margin-top: 0; }
}

/* --- Before & After 横並びレイアウト（スマホは縦） --- */
#preortho .before-after-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

#preortho .phase-box{
    width: 100%;
    background: #fdfdfd;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

#preortho .label-before, #preortho .label-after{
    display: inline-block;
    padding: 5px 20px;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 15px;
}

#preortho .label-before{
    background-color: #78909c; /* 治療前はグレー系 */
}

#preortho .label-after{
    background-color: #ff9800; /* 治療後はオレンジ系で目立たせる */
}

#preortho .phase-arrow{
    font-size: 2.5rem;
    color: #00bcd4; /* 矢印の色 */
    transform: rotate(90deg); /* スマホ時は下向き矢印にする */
}

/* PC閲覧時の調整（横並びにする） */
@media (min-width: 992px) {
    #preortho .before-after-wrapper{
        flex-direction: row;
        align-items: stretch;
    }
    #preortho .phase-box{
        width: 46%; /* 左右に均等配置 */
    }
    #preortho .phase-arrow{
        width: 8%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: none; /* PC時は右向き矢印に戻す */
    }
}

/* --- 料金表のハイライト --- */
#preortho .price-row.highlight-price{
    background-color: #fff8e1;
    border: 2px solid #ff9800;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}
#preortho .price-row.highlight-price span{
    color: #ff9800;
}