.navbar-custom {
  background-color: #340445;
  border-color: #1c0226;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#580775), to(#340445));
  background-image: -webkit-linear-gradient(top, #580775, 0%, #340445, 100%);
  background-image: -moz-linear-gradient(top, #580775 0%, #340445 100%);
  background-image: linear-gradient(to bottom, #580775 0%, #340445 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff580775', endColorstr='#ff340445', GradientType=0);

}

.navbar-custom .navbar-brand {
  color: #d3de53;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
  color: #c7d529;
  background-color: transparent;
}
.navbar-custom .navbar-text {
  color: #d3de53;
}
.navbar-custom .navbar-nav > li:last-child > a {
  border-right: 1px solid #1c0226;
}
.navbar-custom .navbar-nav > li > a {
  color: #d3de53;
  border-left: 1px solid #1c0226;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  color: #dbb4f2;
  background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
  color: #dbb4f2;
  background-color: #1c0226;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#1c0226), to(#410556));
  background-image: -webkit-linear-gradient(top, #1c0226, 0%, #410556, 100%);
  background-image: -moz-linear-gradient(top, #1c0226 0%, #410556 100%);
  background-image: linear-gradient(to bottom, #1c0226 0%, #410556 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1c0226', endColorstr='#ff410556', GradientType=0);
}
.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}
.navbar-custom .navbar-toggle {
  border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #cccccc;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #1b0223;
}
.navbar-custom .navbar-nav > .dropdown > a:hover .caret,
.navbar-custom .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #dbb4f2;
  border-bottom-color: #dbb4f2;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
  background-color: #1c0226;
  color: #dbb4f2;
}
.navbar-custom .navbar-nav > .open > a .caret,
.navbar-custom .navbar-nav > .open > a:hover .caret,
.navbar-custom .navbar-nav > .open > a:focus .caret {
  border-top-color: #dbb4f2;
  border-bottom-color: #dbb4f2;
}
.navbar-custom .navbar-nav > .dropdown > a .caret {
  border-top-color: #d3de53;
  border-bottom-color: #d3de53;
}
@media (max-width: 767px) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #d3de53;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #dbb4f2;
    background-color: transparent;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #dbb4f2;
    background-color: #1c0226;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}
.navbar-custom .navbar-link {
  color: #d3de53;
}
.navbar-custom .navbar-link:hover {
  color: #dbb4f2;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

#topbutton {
      /* ▼表示位置を画面の右下に固定 */
      position: fixed; /* ←表示場所を固定 */
      bottom: 18px;   /* ←下端からの距離 */
      right: 18px;    /* ←右端からの距離 */
      width: 10em;     /* ←横幅 */

      /* ▼最初は非表示にしておく */
      display: none;

      /* ▼配色・配置・文字の装飾など */
      background-color: #800080; /* ←背景色 */
      opacity: 0.70;             /* ←透明度 */
      border-radius: 24px;       /* ←角丸の半径 */
      text-align: center;    /* ←文字の位置 */
      font-family:"ヒラギノ角ゴPro W3","メイリオ","MS Pゴシック",sans-serif;
      font-size: 120%;       /* ←文字サイズ */
      font-weight: bold;     /* ←文字の太さ */
      margin: 0px;    /* ←外側の余白 */
      padding: 10px;   /* ←内側の余白 */
      text-indent: -0.4em;
   }
   #topbutton a {
      /* ▼リンクの装飾 */
      color: white;          /* ←文字色 */
      text-decoration: none; /* ←下線なし */
   }
   #topbutton a:hover {
      /* ▼マウスが載ったときの装飾 */
      color: yellow;              /* ←文字色 */
      text-decoration: underline; /* ←下線あり */
}

h1 {
	font-family:"ＭＳ Ｐ明朝,ＭＳ 明朝,sans-serif"
}
h2 {
	font-family:"ＭＳ Ｐ明朝,ＭＳ 明朝,sans-serif"
}


h3 {
	font-family:"ＭＳ Ｐ明朝,ＭＳ 明朝,sans-serif"
        padding:0px;
        line-height:1;
        
}

h3.case1 {
	font-family:"ＭＳ Ｐ明朝,ＭＳ 明朝,sans-serif"
        padding:0px;
        line-height:1;
        text-shadow: 2px  2px 5px orangered,
            -2px  2px 5px orangered,
             2px -2px 5px orangered,
            -2px -2px 5px orangered;
}

h4 {
	font-family:"ＭＳ Ｐ明朝,ＭＳ 明朝,sans-serif"
}
h5 {
	font-family:"ＭＳ Ｐ明朝,ＭＳ 明朝,sans-serif"
}

/* 日本語タイトル */
.media-body h1 span:first-child {
    font-family: 'Noto Serif JP', serif !important;
}

/* 英語サブタイトル */
.media-body h1 span:last-child {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400;
}

h2, h2 small {
    font-family: 'Noto Serif JP', serif !important;
    /* ページタイトルとしての風格を出すための微調整 */
    font-weight: 700 !important;
    letter-spacing: 0.02em; /* ほんの少し字間を広げると高級感が出ます */
}

/* h3本体と、その中のsmallの両方を狙い撃ち */
h3, h3 small {
    font-family: 'Noto Serif JP', serif !important;
    /* ページタイトルとしての風格を出すための微調整 */
    font-weight: 700 !important;
    letter-spacing: 0.02em; /* ほんの少し字間を広げると高級感が出ます */
}

/* small部分だけ少し細く、または色を抑えたい場合の追加設定（お好みで） */
h3 small {
    font-weight: 400 !important; /* サブタイトルは少し細くすると強弱がつきます */
    margin-left: 10px;          /* 本体との間隔をノギス感覚で調整 */
    color: #666;                /* 少しグレーにすると奥行きが出ます */
}

/* h4（リストの見出し）にも Noto Serif JP を適用 */
h4, .list-group-item-heading {
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 700 !important; /* しっかりとした太字 */
    letter-spacing: 0.01em;       /* h3より少し控えめな字間 */
    margin-top: 0 !important;    /* 余白の再調整 */
    margin-bottom: 2px !important;
}

/* small（補足説明）の部分の微調整 */
.list-group-item-text small {
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 400 !important; /* 説明文は少し細くして読みやすく */
    color: #666;                 /* h3 small と同じくグレーで奥行きを */
}

/* H4の中のリンクとsmallにフォントを適用 */
.panel-title a, 
.panel-title a small {
    font-family: 'Noto Serif JP', sans-serif !important;
}

/* もし「Orange Prince」の部分（small）だけに別のフォントを当てたいなら */
/* .panel-title a small {
    font-family: 'もう一つの外部フォント名', serif !important;
} */


@font-face {
    font-family: 'NotoSerifJP';
    src: url('../fonts/Noto Serif JP Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'NotoSerifJP';
    src: url('../fonts/Noto Serif JP Bold.woff2') format('woff2');
    font-weight: 700;
}

@font-face {
    font-family: 'PlayfairDisplay';
    src: url('../fonts/Playfair Display Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'PlayfairDisplay';
    src: url('../fonts/Playfair Display Bold.woff2') format('woff2');
    font-weight: 700;
}

/* 1. 解説文（read pbox）：読みやすさと品格を両立 */
.read.pbox {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 15px;      /* 標準より少しだけ小さくすると、情報が凝縮されて見えます */
    line-height: 1.8;     /* 明朝体は行間を広めにとると、圧倒的に読みやすくなります */
    color: #333;          /* 真っ黒ではなく、わずかにグレーを混ぜて目に優しく */
    margin-bottom: 15px;  /* 次のkomeとの間隔 */
}
     
/* 2. 注意書き（kome）：補足情報としての役割を明確に */
.kome {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 13px;      /* 解説文より一回り小さくして、強弱をつける */
    color: #666;          /* さらに色を薄くし、「※」の補足感を演出 */
    line-height: 1.6;
}

p + p.kome{ margin-top: -1em;}

p.case1{
 font-size: 16px;
 text-align: justify;
 text-justify:inter-ideograph;
}

p.case2{
   font-family:"ヒラギノ角ゴPro W3","メイリオ","MS Pゴシック",sans-serif;
   font-size: 16px;
   line-height:1;
   text-indent: -1em;
   padding-left:1em;
}

p.case3{
   font-family:"ヒラギノ角ゴPro W3","メイリオ","MS Pゴシック",sans-serif;
   font-size: 16px;
   font-weight: bold;
   text-shadow: 2px  2px 5px orangered,
            -2px  2px 5px orangered,
             2px -2px 5px orangered,
            -2px -2px 5px orangered;
}

dt { margin-bottom:0.5em;
    line-height:1.7;
    padding-bottom:0em;
}

dd { margin-bottom:0.5em;
    line-height:1.7;
    padding-bottom:0em;
}


ol.case1 {
   padding:0px;
   line-height:0;
}

div.imagebox {
   border: 1px dashed #87CEFA; /* 1.枠線 */
   background-color:#F0F8FF;  /* 2.背景色 */
   margin-right:15px;
}

div.imagebox1 {
   border: 1px dashed #87CEFA; /* 1.枠線 */
   background-color:#F0F8FF;  /* 2.背景色 */
   margin-right:0px;
   margin-bottom:15px;
}

p.pbox {
    padding:0px;
    margin:0;
}

img.image, p.caption {
   text-align: center; /* 3.中央寄せ */
   margin: 15px auto;/* 4.余白・間隔 */
}
p.caption {
   font-size: 90%;  /* 5.文字サイズ */
   color: darkblue; /* 6.文字色 */
}
 p.line { border-top: 1px dotted #808080;
          padding-top:2em;
}

li.case2 { font-family:"ヒラギノ角ゴPro W3","メイリオ","MS Pゴシック",sans-serif;
   font-size: 16px; line-height:1.7;
   margin-bottom:1.5em;
}
li.case1 {
   font-family:"ヒラギノ角ゴPro W3","メイリオ","MS Pゴシック",sans-serif;
   font-size: 15px; line-height:1.6;
}

h4.line { border-top: 1px dotted #808080;
          padding-top:2em;
          text-indent:1em;
}

a.blocklink{
   display: block;
   width: 100%;
   padding: 0em;
   text-decoration: none;
}

ul.infobox {
   height: 6.8em;
   overflow: auto;
   border: #87CEFA 1px dashed;
   border-radius: 5px;
   background-color: #F0F8FF;
   padding-left:1.5em;
   max-width: 320px
}

/* アコーディオンの中身（パネル本体）に高さを固定させない設定 */
.panel-collapse.collapse {
    height: auto !important;
}

/* アニメーション中の高さを強制的に計算させるパッチ */
.collapsing {
    -webkit-transition-duration: 0.35s !important;
            transition-duration: 0.35s !important;
    height: 0;
    overflow: hidden;
}

/* 1. 全ての「タンスの取っ手」と「リンク項目」の共通設定 */
.blocklink, .list-group-item {
    display: block !important;
    position: relative;
    padding: 12px 40px 12px 15px !important; /* 右側に記号用の余白を確保 */
    border-left: 4px solid #800080 !important; /* 秘伝の紫線 */
    background-color: #f9f9f9 !important;
    margin-bottom: 5px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    color: #333 !important;
    transition: 0.3s;
}

/* 2. タンス（アコーディオン）用の記号設定 */
.blocklink::after {
    content: '\002B'; /* 閉じている時は「＋」*/
    position: absolute;
    right: 15px;
    top: 15px; /* 上からの位置を固定 */
    font-weight: bold;
    color: #888;
}
.blocklink[aria-expanded="true"]::after {
    content: '\2212'; /* 開いている時は「?」 */
}

/* 3. リンク集（list-group）用の記号設定 */
.list-group-item::after {
    content: '\003E'; /* 常に「＞」を表示 */
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #888;
}

/* 4. 補足説明（small）を読みやすくする */
.blocklink small, .list-group-item small {
    display: block; /* 強制改行してスマホでの重なりを防ぐ */
    font-size: 0.85em;
    color: #666;
    margin-top: 4px;
    font-weight: normal;
}

/* 5. ホバー時の反応 */
.blocklink:hover, .list-group-item:hover {
    background-color: #f0f0f0 !important;
}

/* ロゴエリア全体のコンテナを中央寄せにし、下の隙間を消す */
.container {
    margin-right: auto !important;
    margin-left: auto !important;
}

/* ロゴが入っている media クラスの余白を徹底排除（アドセンス対策） */
.media {
    margin-top: 10px !important;    /* 上側の余裕 */
    margin-bottom: 0 !important;    /* 下（ナビバー側）の隙間をゼロに */
    padding-bottom: 0 !important;
}

/* ロゴ画像自体の下の隙間（画像の下に数ミリ空く現象）を解消 */
.media-left img {
    display: block !important;
    margin-bottom: 0 !important;
}

/* ==========================================
   1. PC・スマホ共通の基本設定
   ========================================== */
.navbar-custom, .navbar-default {
    background-color: #340445 !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: visible !important; /* メニュー展開を妨げない */
}

/* ドロップダウンメニューの制限解除 */
.navbar-custom .dropdown-menu, 
.navbar-custom .dropdown-menu * {
    max-height: none !important;
}

/* スライドショーをメニューの下に配置 */
.carousel, .slider, .hero, .slider-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

html, body {
    overflow-x: hidden; /* 画面からはみ出した悪さを全部消す */
    width: 100%;
}

/* ==========================================
   2. PC向けの表示設定（横幅768px以上）
   ========================================== */
@media (min-width: 768px) {

/* 親：media を flex 化して横一列に */
    .media {
        display: flex !important;
        align-items: center !important; /* 上下中央揃え */
        margin-top: 15px !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 1170px !important;
    }

    /* 左の小画像 */
    .media-left {
        margin-right: 12px !important;
        padding: 0 !important;
        float: none !important; /* Bootstrap の float を完全に殺す */
    }

    .media-left img {
        height: 48px !important; /* 必要なら調整。32?50px が自然 */
        width: auto !important;
    }

    /* 右側のロゴテキスト */
    .media-body {
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .media-body h1 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.0 !important;
        display: flex !important;
        align-items: baseline !important; /* 日本語タイトルと英語サブタイトルの高さを自然に揃える */
    }

    /* ナビバーは左寄せのままでOK */
    .navbar-collapse {
        text-align: left !important;
    }



    /* 5. 回り込みによる「ナビバーへの重なり」を防ぐおまじない */
    .media::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }

    /* 2. ナビバー本体の中央固定（維持） */
    .navbar-custom, .navbar-default {
        display: block !important;
        width: 100% !important;
        max-width: 1170px !important;
        margin: 0 auto 20px !important;
        margin-top: 0 !important;
        height: 50px !important;
        max-height: 50px !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 50px -5px rgba(52, 4, 69, 0.5) !important;
        overflow: visible !important;
    }

    /* 3. ナビバー内：右寄せを解除して左（タイトル横）へ */
    .navbar-collapse {
        text-align: left !important; /* 右寄せを左寄せに変更 */
    }

    .navbar-nav {
        float: none !important;
        display: inline-block !important;
        margin: 0 !important;
        vertical-align: top !important;
    }

    .navbar-nav > li {
        float: none !important;
        display: inline-block !important;
    }

    /* 4. 念のため全体の器（container）も再確認 */
    .container {
        width: 100% !important;
        max-width: 1170px !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
    }

/* PC のドロップダウンメニューをスマホと同じ色にする */
.navbar-nav .dropdown-menu {
  background-color: #340445 !important; /* 紫（スマホと同じ） */
  border: none !important;

  /* 下側だけ角丸 */
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;

  /* 上側は角丸なし（自然な接続） */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 8px !important;

  /* 下方向に紫の影 */
  box-shadow: 0 10px 60px rgba(74, 20, 140, 0.4) !important;
}

.navbar-nav .dropdown-menu > li > a {
  color: #d3de53 !important; /* 黄色（スマホと同じ） */
}

.navbar-nav .dropdown-menu > li > a:hover {
  background-color: #6a1b9a !important; /* 少し明るい紫 */
  color: #fffde7 !important; /* 明るい黄色 */
  }
}
 
/* ナビバーのブランドロゴ・タイトル部分 */
.navbar .navbar-brand {
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 700 !important; /* ロゴなので、しっかり太く */
    letter-spacing: 0.05em;      /* ロゴらしく、少しだけ字間を広げると格式が出ます */
}

/* ナビバーのメニュー項目（リンク） */
.navbar-nav li a {
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 500;       /* ロゴよりは少し細く、でも本文よりは存在感を出す */
    font-size: 16px;        /* 読みやすいサイズに微調整 */
    letter-spacing: 0.02em; /* ほんの少しだけ広げて上品に */
}

/* マウスを乗せた時（ホバー時）の微調整（お好みで） */
.navbar-nav li a:hover {
    font-weight: 700;       /* ホバーした時に少し太くして「選んでる感」を出す */
}

body {
  font-family: 'Noto Serif JP', 'Playfair Display', sans-serif;
  line-height: 1.7;
  color: #333;
}

/* --- 全体共通：デザイン（水色・角丸・影） --- */
.imagebox {
  /* 枠のデザインはそのまま活かす */
  background-color: ##F0F8FF !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  margin-bottom: 20px !important;

  /* 高さ固定はしない → 縦横比を尊重 */
  overflow: hidden; /* 必要なら残す、なくてもOK */
}

.imagebox img {
  width: 100%;   /* 親幅に合わせる */
  height: auto;  /* 元の縦横比を維持 */
  display: block; /* 余計な隙間を消す */
}

/* --- PC版（画面幅768px以上）：6枚並びを維持する調整 --- */
@media (min-width: 768px) {
  .row {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .col-md-2.imagebox {
    float: left !important;
    width: 16.66%;
    padding: 8px;
    margin-bottom: 20px;
  }

}

/* --- スマホ版（画面幅767px以下）：2列を維持する調整 --- */
@media (max-width: 767px) {
  .row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  
  .col-xs-6.imagebox {
    /* 2列並ぶように幅を調整（50%からマージン分を引く） */
    width: calc(50% - 10px) !important;
    flex: 0 0 calc(50% - 10px) !important;
    margin: 5px !important; /* スマホでの「間の小スペース」 */
    float: left !important;
  }

  .imagebox .caption {
    font-size: 11px !important;
  }
}

.carousel-caption,
.carousel-caption * {
  font-family: 'Noto Serif JP', sans-serif !important;
}

/* ==========================================
   3. スマホ向けの表示設定（横幅767px以下）
   ========================================== */
@media (max-width: 767px) {
    /* ナビバーの高さ固定（一行目） */
    .navbar-custom, .navbar-default {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-bottom: 10px !important; /* これでスライドショーとの間に隙間を作ります */
        position: relative !important;  /* 「浮き」を地面に着地させて後続を押し出す */
        border-bottom-left-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
        /* 閉じてる時も薄く影を出すなら以下を追加 */
        box-shadow: 0 8px 50px rgba(52, 4, 69, 0.5) !important;
    }

    .navbar-header {
        min-height: 50px !important;
        display: block !important;
    }

    /* 展開されるメニュー本体の装飾（紫の影と角丸） */
    .navbar-collapse {
        position: absolute !important;
        top: 50px !important;
        left: 0;
        width: 100%;
        background-color: #340445 !important;
        z-index: 99999 !important;
        
        /* --- ここからが復活のポイント --- */
        border-bottom-left-radius: 15px !important;  /* 下の角を丸く */
        border-bottom-right-radius: 15px !important; /* 下の角を丸く */
        box-shadow: 0 15px 50px rgba(52, 4, 69, 0.6) !important;        
        /* メニュー項目が角丸からはみ出さないようにここで hidden をかける */
        overflow: hidden !important;
        border: none !important;
    }

.navbar-collapse.in .navbar-nav > li > a {
        color: #d3de53 !important;  /* 好きな黄色に変更 */
}

.navbar-collapse.collapsing .navbar-nav > li > a,
.navbar-collapse.in .navbar-nav > li > a {
        color: ##d3de53 !important;
}

.blocklink,
.list-group-item {
        padding: 16px 40px 16px 18px !important; /* 上下を広げる */
        line-height: 1.4 !important;            /* 行間を広げる */
        font-size: 17px !important;             /* 読みやすさUP（任意） */
    }

/* パンくずリスト全体の横並び・スクロール設定 */
/* 外側で中央寄せ */
.breadcrumb-wrapper {
    text-align: center;
    width: 100%;
}

/* パンくずリスト全体の横並び・スクロール設定 */
ol.breadcrumb.case1 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important; /* scrollよりautoの方が挙動が安定します */
    overflow-y: hidden !important;
    width: 100% !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    z-index: 9999 !important;      /* 他の要素より上に持ってくる */
    pointer-events: auto !important; /* タッチを確実に反応させる */
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: 0;       /* 枠の右端を詰めない */    
    
    max-width: 100% !important; /* ?? 画面からはみ出すのを防ぐ */
    
    padding: 8px 15px !important;
    background-color: #f5f5f5 !important;
    border-radius: 4px !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
}

/* 各リスト項目の設定 */
ol.breadcrumb.case1 li {
    flex-shrink: 0 !important;      /* ?? 文字が切れるのを防ぎ、右へ突き抜けさせる */
    display: inline-block !important;
    white-space: nowrap !important; /* 文字自体の改行も禁止 */
}

/* パンくず枠を自然に縮めて右端を解放する */
.breadcrumb.case1 {
  display: inline-block !important;   /* 枠を必要な幅だけにする */
  width: auto !important;             /* 横幅を自動に */
  padding-right: 0 !important;        /* 右側の余白を解放 */
  margin-right: 0 !important;
}

/* サムネイル画像の設定 */
.thumbnail img, .img-thumbnail {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

    /* ドロップダウン（孫メニュー）の設定 */
    .navbar-nav .open .dropdown-menu {
        display: block !important;
        background-color: rgba(255,255,255,0.05) !important;
        padding-left: 15px !important;
    }

    .nav.navbar-nav > li > a {
        color: ##d3de53 !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

/* 2. 【重要】一番下のリスト項目（aタグ）の角も個別に丸くする */
    /* これをしないと、中身の「四角いカド」が親の角丸を突き抜けて表示されます */
    .navbar-nav > li:last-child > a {
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        border-bottom: none !important; /* 一番下の線も消してスッキリ */
    }

    /* 3. もし開いた時に枠線が出ていたら消す */
    .navbar-collapse.in {
        border: none !important;
        outline: none !important;
    }
}

/* スマホの時だけ、リンク集を無理やり全幅に戻す */
@media (max-width: 768px) {
    .list-group, 
    .list-group-item {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        float: none !important;
    }
}

.imagebox img {
  width: auto !important;     /* 小画像を絶対に拡大しない */
  height: auto !important;
  max-width: 100%;            /* 枠より大きい場合だけ縮小 */
  max-height: 100%;
  object-fit: contain;        /* 切れない・潰れない */
  display: block;
}

@media (max-width: 767px) {
  .breadcrumb.case1 {
    background-color: #fff !important;   /* パンくず自体を白帯にする */
    border-right: none !important;       /* 右端の縦線を消す */
  }
}

/* 見出し部分をスリムにする */
.panel-heading {
    padding: 6px 15px; /* 上下を10pxから6pxに縮小 */
}

/* ついでに中身（回答部分）の余白も調整する場合 */
.panel-body {
    padding: 10px 15px; /* 標準の15pxから10pxに縮小 */
}

/* アコーディオンのタイトル部分を狙い撃ち */
.panel-heading .accordion-toggle, 
.panel-title a {
    padding-top: 5px !important;    /* 上余白を最小限に */
    padding-bottom: 5px !important; /* 下余白を最小限に */
    line-height: 1.2 !important;    /* 行間をギュッと詰める */
    display: block;                 /* クリック範囲を広げつつ制御 */
}

.panel-title {
    font-size: 14px; /* 標準より少し小さく（お好みで） */
}

/* リンクのリストをアコーディオンと同じくらいタイトにする */
.list-group-item {
    padding-top: 7px !important;    /* 上余白を最小限に */
    padding-bottom: 7px !important; /* 下余白を最小限に */
    line-height: 1.2 !important;    /* 行間をアコーディオンに合わせる */
}

/* サイト内のすべてのサムネイル画像を少し丸める */
img {
    border-radius: 8px !important; /* 数字を大きくするほど丸くなります */
    border: 1px solid rgba(0,0,0,0.05) !important; /* ほとんど見えないくらいの薄い線 */
}

/* アイコン自体の設定 */
.care-icon {
    display: inline-block;
    width: 1.5em;      /* アイコンの幅を固定 */
    text-align: center; /* 中央に寄せる */
    margin-right: 5px;  /* 文字との間隔 */
    font-size: 1.1em;   /* 大きさを微調整 */
    vertical-align: middle; /* 文字との上下位置を合わせる */
}

/* アコーディオン内のsmallタグ（補足文）の色を少し薄くして強弱をつける */
.panel-title small {
    color: #777;
    font-weight: normal;
    margin-left: 5px;
}

/* リスト内のアイコン設定 */
.list-group-item .main-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    background-color: #f0f4f8; /* 爽やかな薄い青グレー */
    border-radius: 8px;
    margin-right: 12px;
    font-size: 0.9em;
    vertical-align: middle;
    transition: all 0.2s ease-in-out;
}

/* 説明文（small）の位置をアイコンの幅に合わせるともっと綺麗 */
.list-group-item-text {
    padding-left: 46px; /* アイコン(34px) + 余白(12px) の分だけずらす */
    margin-top: -5px;   /* 見出しとの距離を微調整 */
}


/* 通常時の設定にもtransitionを入れておくと戻る時も滑らかです */
.care-icon {
    display: inline-block;
    transition: all 0.2s ease;
    vertical-align: middle;
}

/* 1. アイコン共通の基本設定 */
.care-icon, .main-icon {
    display: inline-flex !important; /* flexを使うと中身を中央に寄せやすい */
    justify-content: center;
    align-items: center;
    vertical-align: middle;

   /* 1. 【重要】最初からサイズを固定して確保しておく */
    width: 32px;   /* アイコンより少し大きいサイズ（適宜調整） */
    height: 32px;  /* widthと同じにする */
    
    /* 2. 最初から「丸」にしておき、背景は透明にする */
    border-radius: 50% !important;
    background-color: transparent; 
    
    /* 3. 中の画像を中央に寄せる（画像の場合） */
    text-align: center;
    line-height: 32px; /* heightと同じ数値で垂直中央 */
    transform-origin: center;        /* 拡大の軸をど真ん中に固定 */
    transition: all 0.25s ease;
}

/* 2. 育て方トップなどの「枠ありアイコン」の設定 */
.main-icon {
    width: 34px;
    height: 34px;
    background-color: #f8f9fa; /* ほぼ白に近いグレー */
    border-radius: 8px;
    margin-right: 12px;
    font-size: 0.9em;
}

/* 3. 病害虫アコーディオンなどの「枠なしアイコン」の設定 */
.care-icon {
    width: 1.5em;
    margin-right: 5px;
    font-size: 1.1em;
}

/* 4. 【重要】ホバー時の光り方：白く澄んだ光に統一 */
.list-group-item:hover .main-icon,
.panel-heading:hover .care-icon,
.blocklink:hover .care-icon,
.blocklink:hover .main-icon {

    /* 背景色を「純白」にして影を消す */
    background-color: #ffffff !important;
    border-radius: 50% !important; /* これで正円になります */

    /* 正円にするための必須条件：幅と高さが同じであること */
    width: 1.5em;  
    height: 1.5em;
    
    /* 黄色(#ffd700)を完全に排除し、白(#ffffff)の光彩のみに */
    filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 10px rgba(255,255,255,0.8)) !important;
    
    /* 軽い浮き上がり効果 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transform: scale(1.2); /* 1.2倍に拡大 */
}

/* 中に <img> が入っている場合の微調整 */
.care-icon .main-icon img,
.main-icon {
    vertical-align: middle;
    display: inline-block;
}

/* =============================================
   1. アイコンの共通土台（背景白・膨らむ用）
   ============================================= */
.icon-grow {
    display: inline-flex !important; /* inline-blockを上書きしてサイズを有効化 */
    align-items: center;
    justify-content: center;
    width: 1.5em;       /* 背景の範囲：アイコンより一回り大きい */
    height: 1.5em;
    border-radius: 50%; /* 正円にする */
    text-align: center;
    vertical-align: middle;
    transition: transform 0.25s ease, background-color 0.25s ease !important;
    text-decoration: none !important;
    font-size: 1.1em;          /* アイコン本体の高さを確保 */
    line-height: 1;            /* 高さが潰れないようにする */

}

/* =============================================
   2. ホバー時の挙動（統合版）
   ============================================= */
/* 親要素(aタグなど)にマウスが乗った時、またはアイコン自体に乗った時 */
.icon-grow:hover,
.list-group-item:hover .icon-grow,
.panel-title:hover .icon-grow,
.blocklink:hover .icon-grow {
    transform: scale(1.2) !important;
    background-color: #ffffff !important; /* 背景を白に */
    box-shadow: 0 0 5px rgba(255,255,255,0.5); /* 馴染みを良くする軽い光 */
}

/* =============================================
   3. 各アイコンの色設定（既存のものを維持）
   ============================================= */
/* note, YouTube, ブログなど */
.fa-file-pen { color: #2cb696 !important; }
.fa-blog     { color: #ff9900 !important; }
.fa-youtube  { color: #ff0000 !important; }

.fa-clock-rotate-left { color: #5bc0de !important; }
.list-group-item .fa-magnifying-glass  { color: #8e24aa !important; } 
.list-group-item .fa-seedling     { color: #7cb342 !important; } 
.list-group-item .fa-door-open  { color: #2e7d32 !important; }
.list-group-item .fa-vial     { color: #81D4FA !important; } 
.list-group-item .fa-dna  { color: #EF6C00 !important; }

/* 植物・品種別カラー */
.list-group-item .fa-leaf      { color: #fbc02d !important; } 
.list-group-item .fa-scissors  { color: #42A5F5 !important; } 
.list-group-item .fa-lemon       { color: #fbc02d !important; } /* レモン: 黄 */
.list-group-item .fa-tree        { color: #e53935 !important; } /* ピタンガ: 赤 */
.list-group-item .fa-sun         { color: #8e24aa !important; } /* セレージャ: 紫 */
.list-group-item .fa-droplet     { color: #7cb342 !important; } /* サラセニア: 明緑 */
.list-group-item .fa-plant-wilt  { color: #2e7d32 !important; } /* モンステラ: 深緑 */
/* ...（中略：他のカラー設定もそのまま残してOKです）... */

.icon-orange { color: #e65100 !important; }
.icon-gold   { color: #f9a825 !important; }
.icon-leaf   { color: #ef6c00 !important; }
.icon-gold   { color: #f9a825 !important; } /* 少し濃いめの黄色（白背景で見やすい色） */

/* =============================================
   4. レイアウト微調整（BS3用）
   ============================================= */
.list-group-item i.icon-grow,
.panel-title i.icon-grow {
    margin-right: 8px;
    /* 元の i 設定にある inline-block などをリセット */
}

.panel-title {
  font-size: 18px !important;


}

.panel-body {
  font-size: 1em !important;
}

/* PC・タブレット（768px以上）の表示 */
@media (min-width: 768px) {
  .blocklink small {
    display: inline-block; /* 横に並べる */
    margin-left: 15px;    /* タイトルとの間に少し隙間を作る */
  }
}

/* スマホ（767px以下）の表示 */
@media (max-width: 767px) {
  .blocklink small {
    display: block;       /* 強制的に改行させる */
    margin-top: 5px;      /* 上のタイトルとの間隔を少し空ける */
    margin-left: 30px;    /* アイコンの分だけ少し右に寄せると綺麗です */
  }
}

/* クラス名を重ねて優先順位を上げ、強制上書きします */
.media-left .media-object {
    height: 20px !important; /* ここを14pxや18pxに変えて調整 */
    width: auto !important;
    display: inline-block;
    vertical-align: middle; /* 文字の高さの中心に合わせる */
}

/* 1. 枠（パネル）の下マージンを消して、コピーライトと近づける */
.panel {
    margin-bottom: 0 !important;
}

/* 2. ページ全体の最下部に「クッション」を作る */
/* これで、どのページでも一番下に指一本分の余白が生まれます */
body {
    padding-bottom: 30px !important;
}

/* 3. もしコピーライトが media クラスなら、そのマージンも整える */
.media {
    margin-bottom: 0 !important;
}

html {
  overflow-y: scroll;
}