/* --- 基本リセット・共通設定 --- */
* { margin:0; padding:0; box-sizing:border-box; }

body {
    /* 'Zen Maru Gothic' を一番最初に書く */
    font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
    
    /* 背景色をより明るく清潔な白（ごく薄いブルー）に */
    background-color: #F9FAFC; 
    /* 文字色は維持（濃いネイビーグレー） */
    color: #37474F;
    line-height: 1.6;
}

/* 見出しや太字をより「まんまる」に見せるコツ */
h1, h2, h3, .logo-main, .hero-copy {
    font-weight: 700; /* 数字が大きいほど太くて丸い印象になります（400, 500, 700, 900） */
}

/* header-logoがh1になってもデザインを崩さないためのリセットCSS */
h1.header-logo {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    line-height: 1.4;
}

/* リンクの下線を消すなど（既存のCSSで効いているなら不要） */
h1.header-logo a {
    text-decoration: none;
    color: inherit;
}

a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
a:hover { opacity: 0.7; }
ul { list-style: none; }

/* --- ヘッダー（レイアウト一新） --- */
.site-header {
    background-color: transparent; /* 背景透明になじませる */
    padding: 15px 20px;
    position: relative;
    /* 以前のボーダーは削除 */
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ロゴまわり */
.logo-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    /* ロゴのメイン文字色もネイビーグレーに維持 */
    color: #37474F;
}
.logo-img {
    width: 60px; /* アイコンサイズ調整 */
    height: auto;
}
.logo-text-group {
    display: flex;
    flex-direction: column;
}
.logo-sub { font-size: 0.75rem; font-weight: bold; color: #888; margin-bottom: -2px; }
.logo-main { font-size: 1.8rem; line-height: 1.1; letter-spacing: 0.05em; }
.logo-en { 
    font-size: 0.8rem; 
    /* ロゴのサブカラーをメインのネイビーに */
    color: #2A5D8A; 
    letter-spacing: 0.1em; 
    font-weight: bold; 
}

/* ナビゲーションを常に横並びで維持 */
.header-nav ul {
    display: flex;
    flex-wrap: wrap;     /* ← ここが重要！折り返しはOK、縦1列にはしない */
    gap: 20px;           /* アイテム同士の余白 */
    padding: 0;
    margin: 0;
}

/* リンク表示は1行に収まるように */
.header-nav li a {
    white-space: nowrap; /* 文字が折り返されず、横並び維持 */
}


/* 予約ボタン（アクセントカラーの楕円） */
.btn-reserve {
    display: inline-block;
    /* アクセントカラーのスカイブルーに維持 */
    background-color: #64B5F6; 
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px; /* 丸くする */
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    /* 影の色もスカイブルーに合わせる */
    box-shadow: 0 4px 10px rgba(100, 181, 246, 0.4);
}
.btn-reserve i { margin-left: 5px; font-size: 0.8em; }


@media (max-width: 768px) {

    /* header-inner を縦並びにするなら残してOK */
    .header-inner {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* header-nav を横並び維持＋スマホでは折り返しだけ許可 */
    .header-nav ul {
        display: flex;
        flex-direction: row;   /* ← 強制で横並びに戻す！ */
        flex-wrap: wrap;       /* ← 画面狭いと自動で2段にしてくれる */
        gap: 12px 20px;
        justify-content: center;
        text-align: center;
    }

    .header-nav li a {
        white-space: nowrap;
        padding: 8px 0;
        font-size: 1rem;
    }
}


/* --- ヒーローセクション --- */

/* （ここは変更なし） */
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.hero-content { flex: 1; position: relative; z-index: 2; }
.hero-image-wrapper { flex: 2; position: relative; display: flex; justify-content: flex-end; }

/* ★写真の装飾を変更 */
.hero-photo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;

    /* 1. 形を少し歪んだ丸にする（手書き風） */
    border-radius: 60px 20px 50px 30px; 

    /* 2. 写真を少し明るく、温かみのある色合いに補正 */
    filter: contrast(1.05) sepia(0.1);

    /* 3. 二重線のボーダー（内側が白、外側が淡いアプリコットオレンジ） */
    border: 8px solid #fff; /* 内側の白い枠 */
    /* ★変更: 外側の枠を淡いアプリコットオレンジに */
    outline: 4px solid #FFA06A; 
    outline-offset: -2px; /* outlineを少し内側に食い込ませて二重線っぽく見せる */

    /* 4. ふんわりとした影をつける */
    /* ★変更: 影の色を淡いピーチベージュに */
    box-shadow: 
        12px 12px 0px #FCE6D8,  /* 1つ目の影（固め・淡いピーチベージュ系） */
        20px 20px 30px rgba(55, 71, 79, 0.15); /* 2つ目の影（ふんわり・ネイビー系） */

    /* 5. 写真が枠から少しはみ出ないように調整 */
    box-sizing: border-box;
}

/* 文字サイズ調整（変更なし） */
.hero-copy { 
    font-size: 2.2rem; 
    font-weight: 800; 
    /* メインの文字色に維持 */
    color: #37474F; 
    line-height: 1.4; 
    margin-bottom: 30px; 
    letter-spacing: 0.05em; 
}
.hero-subcopy { 
    font-size: 1.3rem; 
    /* やや薄めのネイビーグレーに維持 */
    color: #607D8B; 
    line-height: 1.8; 
}

/* スマホ対応（変更なし） */
@media (max-width: 900px) {
    .hero-container { flex-direction: column-reverse; text-align: center; }
    .hero-photo {
        /* スマホでは装飾を少し控えめに */
        border-width: 5px;
        outline-width: 3px;
        box-shadow: 6px 6px 0px #FCE6D8, 10px 10px 20px rgba(55, 71, 79, 0.1);
    }
}


/* --- アラート --- */
/* --- アラート --- */
.alert{
    /* ★変更: 背景色を淡いスカイブルーに */
    background:#F5FAFF;
    /* ★変更: 左ボーダーをサブカラーのスカイブルーに */
    border-left:4px solid #64B5F6;
    padding:1rem;
    margin:1rem auto;
    max-width:1200px
}



/* --- 住所・アクセス欄（地図） --- */
.access-section {
    /* 背景色をより明るく清潔なトーンに維持 */
    background-color: #F0F4F7;
    padding: 40px 20px;
    margin: 2rem 0;
    /* ボーダーの色をより明るく維持 */
    border-top: 1px solid #CFD8DC;
    border-bottom: 1px solid #CFD8DC;
}
.access-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}
.access-left { flex: 1; min-width: 300px; position: relative; }
/* アイコンの色をサブカラーのスカイブルーに維持 */
.sunflower-icon { font-size: 2.5rem; color: #64B5F6; margin-bottom: 10px; }
/* タイトル色をメインの文字色に維持 */
.access-title { font-size: 1.6rem; font-weight: bold; color: #37474F; margin-bottom: 5px; }
.access-sub { font-size: 0.9rem; color: #777; margin-bottom: 20px; }
.access-address-box { font-size: 0.95rem; color: #555; line-height: 1.8; }
.access-address-box p { margin-bottom: 8px; }
.access-right {
    flex: 1.5; min-width: 320px;
    display: flex; gap: 20px; align-items: flex-start;
}
.access-map-img {
    flex: 1;
    background: #fff; border: 5px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 4px;
}
.access-map-img img { width: 100%; height: auto; display: block; }
.access-buttons-area {
    flex: 1; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 15px;
}
/* イラストの色をサブカラーのスカイブルーに維持 */
.decor-illustration { font-size: 3rem; color: #64B5F6; margin-bottom: 10px; }
/* 太陽アイコンの色もサブカラーのスカイブルーに維持 */
.decor-illustration i.fa-sun { color: #64B5F6; margin-right: 10px; }
.btn-access {
    display: inline-block; width: 100%; padding: 10px;
    border: 1px solid #888; background: #fff; border-radius: 30px;
    color: #333; font-size: 0.9rem; font-weight: bold;
}
.tel-display {
    font-size: 1.6rem; font-weight: bold; color: #333;
    margin: 5px 0; white-space: nowrap;
}
.tel-display i { transform: rotate(90deg); margin-right: 5px; }
.btn-detail {
    display: inline-block; width: 100%; padding: 15px;
    /* 詳細ボタンの色をサブカラーのスカイブルーに維持 */
    background: #64B5F6; 
    border-radius: 30px; color: #fff;
    font-size: 1rem; font-weight: bold;
    /* 影の色もサブカラーに合わせる */
    box-shadow: 0 4px 6px rgba(100, 181, 246, 0.3);
}
@media (max-width: 900px) {
    .access-container { flex-direction: column; gap: 30px; }
    .access-right { flex-direction: column; width: 100%; }
    .access-map-img { width: 100%; height: 250px; }
    .access-map-img img { height: 100%; object-fit: cover; }
    .access-buttons-area { width: 100%; }
}

/* --- コンテンツエリア --- */
.container{
    max-width:1200px;
    margin:0 auto;
    padding:1rem;
}

.section{
    /* 白に近い、ごく淡い背景色に維持 */
    background:#FFFFFF;                      
    padding:1.5rem;
    border-radius:12px;
    /* 影をよりソフトに、ネイビーグレー系に維持 */
    box-shadow:0 4px 12px rgba(55, 71, 79, .06);
    margin-bottom:1.5rem;
}

.section h2{
    /* 見出しの色をメインカラーのネイビーに維持 */
    color:#2A5D8A;                           
    margin-bottom:1rem;
    padding-bottom:.5rem;
    /* 線もメインカラーに合わせた淡い色に維持 */
    border-bottom:3px solid #CFD8DC;         
    font-size:1.5rem;
}

.card{
    /* 白基調に維持 */
    background:#FFFFFF;
    padding:1.5rem;
    border-radius:10px;
    /* 影をよりソフトに維持 */
    box-shadow:0 2px 8px rgba(55, 71, 79, .04);
}

.card h3{
    /* カード内の見出しもメインカラーのネイビーに維持 */
    color:#2A5D8A;
    margin-bottom:1rem;
    font-size:1.1rem;
}

/* テーブル */
/* テーブル */
table{
    width:100%;
    border-collapse:collapse;
    margin-top:1rem;
    
    /* ★追加: テーブル全体に角丸と影を設定 */
    border-radius: 12px;
    overflow: hidden; /* 角丸を効かせるため */
    box-shadow: 0 4px 10px rgba(42, 93, 138, 0.1); /* ネイビー系の薄い影 */
}
th,td{
    /* paddingを上下に広げてゆったりと */
    padding:.9rem .75rem; 
    text-align:center;
    /* ★変更: 線の色を明るく薄いグレーに */
    border:1px solid #E3F2FD; 
}
th{
    /* メインカラーのネイビーを背景に */
    background:#2A5D8A;                      
    color:#fff;
    /* ★追加: 見出しのフォントを太く丸く */
    font-weight: 700;
    font-size: 1.05rem;
}

/* 診療時間の「○」（丸の字を太くする） */
.ok{
    /* ★変更: 柔らかいスカイブルーに */
    color:#555;                           
    /* ○の字を太く */
    font-weight:900;
    font-size: 1.1rem;
}

/* 診療時間の「－」（バツの字を太くする） */
.no{
    /* ★変更: 落ち着いた赤系を維持 */
    color:#EF5350;                           
    font-size: 1.1rem;
}

/* =========================================
   コンテンツ内パーツ（タブ・フキダシ・色テーマ付き）
   ========================================= */

.select-message {
    padding:1.5rem;
    margin:1rem 0;
    /* 明るく清潔感のある背景色を維持 */
    background:#F0F4C3;                      
    /* サイトの黄色系を活かしつつ、少し明るいトーンを維持 */
    border-left:4px solid #CDDC39;           
    border-radius:8px;
    font-size:1rem;
    /* 文字色をメインの文字色に維持 */
    color:#37474F;
}

   /* =========================================
   コンテンツ内パーツ（タブ・フキダシ・色テーマ付き）
   ========================================= */

.tabs {
    display:flex;
    gap:.5rem;
    /* ボーダーの色を明るく維持 */
    border-bottom:2px solid #CFD8DC;
    margin-bottom:0;
    flex-wrap:wrap;
}

/* タブの基本スタイル */
.tab {
    position:relative;
    padding:.6rem 1.2rem;
    /* ごく淡いグレーのタブ背景を維持 */
    background:#F5F5F5;                      
    /* ボーダーの色を明るく維持 */
    border:2px solid #CFD8DC;
    cursor:pointer;
    border-radius:999px;
    transition:.2s;
    font-size:0.95rem;
    font-weight:600;
    /* 文字色を濃い目のグレーに維持 */
    color:#607D8B;
    opacity:0.8;
    z-index:1;
}

.tab:hover {
    opacity:0.9;
}

.tab.active{
    opacity:1;
    color:#fff;
    z-index:3;
}

/* ベース：色は全部透明にしておく */
.tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px; /* 高さ分下にずらす */
    border-style: solid;

    /* 二等辺三角形（下向き） */
    border-width: 20px 25px 0 25px;
    border-color: var(--tab-main) transparent transparent transparent;

    z-index: 2;
}


/* ------- 色テーマ（タブ + コンテンツ） ------- */

/* 発達障害（サブカラーを適用） */
.tab-dev{
    --tab-main:#64B5F6;
    --tab-bg:#F5FAFF;
    border-color:var(--tab-main);
}
.tab-dev.active{
    background:var(--tab-main);
    border-color:var(--tab-main);
}
.tab-dev.active::after{
    border-color:var(--tab-main) transparent transparent transparent;
}
.tab-content.tab-dev.active{
    background:var(--tab-bg);
    border:2px solid var(--tab-main);
    border-top:none;
}

/* 内科・小児科（メインカラーを適用） */
.tab-naika{
    --tab-main:#2A5D8A;
    --tab-bg:#F0F4F7;
    border-color:var(--tab-main);
}
.tab-naika.active{
    background:var(--tab-main);
    border-color:var(--tab-main);
}
.tab-naika.active::after{
    border-color:var(--tab-main) transparent transparent transparent;
}
.tab-content.tab-naika.active{
    background:var(--tab-bg);
    border:2px solid var(--tab-main);
    border-top:none;
}

/* 神経内科（落ち着いたブルー系を維持） */
.tab-shinkeinaika{
    --tab-main:#7986CB;
    --tab-bg:#F8F8FF;
    border-color:var(--tab-main);
}
.tab-shinkeinaika.active{
    background:var(--tab-main);
    border-color:var(--tab-main);
}
.tab-shinkeinaika.active::after{
    border-color:var(--tab-main) transparent transparent transparent;
}
.tab-content.tab-shinkeinaika.active{
    background:var(--tab-bg);
    border:2px solid var(--tab-main);
    border-top:none;
}

/* 予防接種（明るいイエローグリーンを維持） */
.tab-yobou{
    --tab-main:#CDDC39;
    --tab-bg:#FFFDE7;
    border-color:var(--tab-main);
}
.tab-yobou.active{
    background:var(--tab-main);
    border-color:var(--tab-main);
}
.tab-yobou.active::after{
    border-color:var(--tab-main) transparent transparent transparent;
}
.tab-content.tab-yobou.active{
    background:var(--tab-bg);
    border:2px solid var(--tab-main);
    border-top:none;
}

/* 漢方（濃いグリーンを維持） */
.tab-kampo{
    --tab-main:#2E7D32;
    --tab-bg:#F5FFF7;
    border-color:var(--tab-main);
}
.tab-kampo.active{
    background:var(--tab-main);
    border-color:var(--tab-main);
}
.tab-kampo.active::after{
    border-color:var(--tab-main) transparent transparent transparent;
}
.tab-content.tab-kampo.active{
    background:var(--tab-bg);
    border:2px solid var(--tab-main);
    border-top:none;
}

/* ------- タブコンテンツ（本文側） ------- */

.tab-content {
    display: none;
    padding: 1.5rem;
    margin-top: 0;
    border-radius: 0 0 12px 12px;
    border: 2px solid transparent;
    border-top: none;
    background: #fff;
    position: relative;
    z-index: 1;
    /* 本文の文字色をメインの文字色に維持 */
    color: #37474F;                      
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* スマホ向け微調整 */
@media (max-width: 768px) {
    .tab-content {
        border-radius: 12px;
        margin-top: 0.5rem;
    }
    .tab.active::after {
        display: none;                /* 小画面ではしっぽを消してもOK */
    }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 小見出しの色をメインの文字色に維持 */
h3{margin:2rem 0 1rem;color:#37474F;font-weight:500;letter-spacing:.05em; border-left: 4px solid #CFD8DC; padding-left: 10px;}
/* h4の色をサブカラーのスカイブルーに維持 */
h4{margin:1.5rem 0 .75rem;color:#64B5F6;font-size:1.1rem;font-weight:bold}
.exp{margin:1.5rem 0;border:1px solid#dee2e6;border-radius:8px;overflow:hidden}
.exp-h{background:#f8f9fa;padding:1.2rem 1.5rem;cursor:pointer;font-weight:500;display:flex;justify-content:space-between;transition:.3s; align-items: center;}
.exp-h:hover{background:#e9ecef}
.exp-h.active{background:#e7f5ff;color:#1864ab}
.exp-c{display:none;padding:2rem 1.5rem;background:#fff;line-height:1.9}
.exp-c.active{display:block}

.warn{
    /* 警告色を赤系で維持 */
    background:#FFF3F3;
    border:2px solid #EF5350;
    padding:2rem;
    border-radius:8px;
    margin:2rem 0;
}

.info{
    /* 情報色をメインカラーのネイビーに維持 */
    background:#F0F4F7;
    border-left:4px solid #2A5D8A;
    padding:2rem;
    margin:2rem 0;
    border-radius:8px;
}

.success{
    /* 成功色をサブカラーのスカイブルーに維持 */
    background:#F5FAFF;
    border-left:4px solid #64B5F6;
    padding:2rem;
    margin:2rem 0;
    border-radius:8px;
}


.news-block {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin: 40px 0;
}

/* 左ペイン：幅1/3くらい */
.news-side {
    flex: 0 0 30%;              /* だいたい1/3 */
    text-align: left;
}

.news-title{
    font-size:32px;
    font-weight:bold;
    /* ニュースの見出しをサブカラーのスカイブルーに維持 */
    color:#64B5F6;              
    margin:0;
    letter-spacing:0.12em;
}

.news-sub {
    margin: 4px 0 24px;
    font-size: 14px;
    color: #777;
}

/* ボタン */
.news-btn{
    display:inline-block;
    padding:10px 32px;
    /* ニュースボタンをサブカラーのスカイブルーに維持 */
    background:#64B5F6;
    color:#fff;
    border-radius:999px;
    text-decoration:none;
    font-size:14px;
    /* 影もサブカラーに合わせる */
    box-shadow:0 4px 8px rgba(100, 181, 246, 0.25);
}

/* 右ペイン：幅2/3くらい */
.news-main {
    flex: 1;                    /* 残り全部 → おおよそ2/3 */
}

/* 一覧のスタイル */
.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dotted #e6e6e6;
}

.news-list li {
    padding: 12px 0;
    border-bottom: 1px dotted #e6e6e6;
    font-size: 14px;
    color: #555;
    display: flex;
    gap: 40px;                  /* 日付とタイトルの間隔 */
}

.news-date {
    white-space: nowrap;        /* 日付を折り返さない */
}

.news-list a {
    color: #333;
    text-decoration: none;
}

/* スマホなど幅が狭い場合は縦並びに */
@media (max-width: 768px) {
    .news-block {
        flex-direction: column;
        gap: 20px;
    }
    .news-side {
        flex: 1 1 auto;
    }
}



.doctor{
    padding:1.5rem;
    /* 背景色をより明るく清潔なトーンに維持 */
    background:#F5F5F5;
    border-radius:8px;
    margin-bottom:1.5rem;
    /* ボーダーをメインカラーのネイビーに維持 */
    border-left:5px solid #2A5D8A;
}
.tag{
    display:inline-block;
    /* タグをメインカラーのネイビーに維持 */
    background:#2A5D8A;
    color:#fff;
    padding:.3rem .8rem;
    border-radius:20px;
    font-size:.85rem;
    margin:.2rem;
}

/* ハイライト用 */
.hl {
    /* ハイライト色を明るいイエローグリーン系で維持 */
    background: #FFF9C4;
    font-weight: bold;
    padding: 0 0.2em;
}

/* --- 漢方タブ用の色味調整 --- */
.kampo-tab {
    /* 背景色を白に近いトーンに維持 */
    background: #F5F5F5;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 2rem;
}

.kampo-list {
    background: #ffffff;
    border-radius: 10px;
    padding: 1.2rem 1.5rem 1.2rem 2rem;
    /* ボーダーの色を濃いグリーンで維持（漢方らしい色を維持） */
    border-left: 6px solid #2E7D32;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.kampo-list li {
    position: relative;
    margin-bottom: .4rem;
    font-size: 0.95rem;
}

.kampo-list li::before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* リストマークの色を濃いグリーンで維持 */
    background: #2E7D32;
}

.kampo-list li strong {
    /* 強調文字の色を濃いグリーンで維持 */
    color: #2E7D32;
}

.kampo-tab h3 {
    /* 漢方タブ内のh3のボーダー色を濃いグリーンで維持 */
    border-left-color: #2E7D32;
}

/* 漢方タブボタンの色変更 */
.tab-kampo-btn.active {
    /* タブボタンの色を濃いグリーンで維持 */
    background: #2E7D32;
    color: #fff;
    border-bottom-color: transparent;
}

/* 著作権・フッター */
.copyright {
    /* フッターを濃いネイビーグレーに維持 */
    background: #37474F; 
    color: #fff; 
    text-align: center;
    padding: 15px; 
    font-size: 0.8rem; 
    /* 余白を画面幅いっぱいに広げるため、不要な設定は削除（現在は特に無し） */
    margin-top: 2rem;
}
.footer {
    text-align: center;
    font-size: 0.9rem;
    padding: 1.5rem 0;
    /* 背景を明るいグレーに維持 */
    background: #F5F5F5;
    color: #555;
    /* 余白を画面幅いっぱいに広げるため、不要な設定は削除（現在は特に無し） */
    margin-top: 2rem;
    border-top: 1px solid #e0e0e0;
}


/* main.css の末尾に追加 */

a.tab {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    /* 既存の.tabのスタイルを引き継ぐための補正 */
    color: inherit; 
    box-sizing: border-box;
}

/* 現在表示しているページのタブを目立たせる */
a.tab.current {
    background-color: #ff9f43; /* 既存のアクティブ色に合わせる */
    color: #fff;
    font-weight: bold;
    pointer-events: none; /* 自分のページはクリック不可に */
}


/* main.css の末尾に追加 */

/* --- パンくずリスト --- */
.breadcrumb {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px; /* 下のコンテンツとの隙間 */
    padding: 0 5px;
}

.breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

/* 矢印（>）をつける */
.breadcrumb li:not(:last-child)::after {
    content: '\f054'; /* FontAwesomeの右矢印 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7rem;
    color: #ccc;
    margin: 0 10px;
}

.breadcrumb li a {
    text-decoration: none;
    color: #2A5D8A; /* リンクはメインカラー */
    transition: opacity 0.3s;
}

.breadcrumb li a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* 現在地（最後の項目）はリンクにしない色 */
.breadcrumb li span {
    color: #999;
    cursor: default;
}