html {
    scroll-behavior: auto;
}
body {
    margin:0;
    font-family: 'Meiryo UI','Osaka','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;        
}  
:root {   /* フォントサイズ、行間、字間、余白、文字色　のみ指定 */
/* フォントサイズ基準 */
--font-base: 16px;        /* 基準サイズ */
--font-small: 14px;       /* 補足、キャプション */
--font-large: 24px;       /* 小見出し */
--font-xlarge: 32px;      /* 大見出し */

/* 行間と文字間 */
--line-height-base: 1.8;  
--letter-spacing-base: 0.05em;
--space-grid-gap:1rem;

/* 余白（セクションやパーツの間） */
--space-section: 30px;       /* PC基準のセクション上下余白  30 */
--space-section-mobile: 40px; /* スマホ用のセクション余白 40 */
--space-container: 2rem;  /* 任意。PC時の標準余白にございます */

/* カラー（シンプル版、あとで増やしてOK） */
--color-text: #333;
--color-accent: #5c3dff;
--color-title:rgb(17,3,54); /* 深めの青 */
--color-subtitle: #666;
--color-bg-light: #ffffff;
--color-titlelight:rgba(52,40,98);
--aactive:rgb(118, 21, 222);
--bg-a: rgba(255, 200, 200, 0.3); /*新*/ 
--bg-b: rgba(200, 220, 255, 0.3); /*新*/ 
--bg-c: rgba(200, 255, 200, 0.3); /*新*/ 
--bg-d: rgba(255, 240, 200, 0.3); /*新*/ 
--red: #f45b69;
--dark-blue: #227c9d;
--turquoise: #17c3b2;
--roylalbrue:rgb(62, 33, 158); 
--redpurple:rgb(88, 0, 151);
}
h1 {
    font-size: 3rem;
    line-height: 1.2;  
}
h2 {
    font-size: 2rem;
    line-height: 1.3;
    font-weight: bold;
}
h3 {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight:500;
    margin: 10px 0;
}

h4 {
    font-size: 1.3rem;
    line-height: 1.3;
    font-weight:700;
    margin: 10px 0;
}

h5 {
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight:700;
    margin: 10px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
p {
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: 0.05em;  /* 字間もちょい広げると、和文が読みやすい */
}
.spacing-vertical {
    padding-top: var(--space-container);
    padding-bottom: var(--space-container);
} 

:target::before {
    content: "";
    display: block;
    height: 80px; /* 固定ヘッダーの高さ分 80px */
    margin-top: -140px;
  }
 .hidden-seo { /*J村利用のためにクロールさせないをクロール出来るものを配置*/
  display: none;
}

/*--------------- Section -------------------*/     
.section-base {  /*checked*/ 
    padding: var(--space-section) 5px; /* 20px */
    background-color: var(--color-bg-light);
}     
.section-base h2 {  /*checked*/ 
    font-size: var(--font-xlarge);
    line-height: 1.4;
    letter-spacing: var(--letter-spacing-base);
    margin-bottom: 20px;
}    
.section-base p {  /*checked*/ 
    font-size: var(--font-base);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
    margin-bottom: 40px;
}
.section-title {  /*checked*/ 
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
    word-break: break-word;
    }   
    @media (max-width: 768px) {  /* 📏 768px以下（移動電話）モバイル調整 */
        .section-template {  /*checked*/ 
            padding: var(--space-section-mobile) 15px;
        }
        .section-template h2 {  /*checked*/ 
            font-size: var(--font-large);
        }
        .section-template p {  /*checked*/ 
            font-size: var(--font-base);
        }}
/*--------------- Container -------------------*/   
.container {  /*checked*/   /* =========== by Bootstrap ============ */
    max-width: 1200px;
    margin: 10px auto;
    padding:30px 5px 10px;
    /*background-color: white;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 
    border-radius: 8px;*/
} 
.grid-item {  /*checked*/    /* 親の container-grid で自動並び */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
    height: 100%;
    background-color: var(--color-bg, #d3e3ee);
    transition: transform 0.3s ease;
}
.grid-item:hover {  /*checked*/ 
    transform: translateY(-5px);
}
.container-grid .grid-item i {
    font-size: 36px !important;      /* 🔥 強き大きさの掟 */
    color: var(--color-titlelight) !important;       /* 🔥 青き威光を必ず纏う */
    display: inline-block;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.container-grid .grid-item2 i {  /*checked*/ 
    font-size: 36px !important;      /* 🔥 強き大きさの掟 */
    color: var(--color-titlelight) !important;       /* 🔥 青き威光を必ず纏う */
    display: inline-block;
    margin-bottom: 1rem;
    flex-shrink: 0;
} 
.subtitle-muted {
color: var(--color-muted);
font-weight: normal;
} 
.small-muted {
    font-size: 0.85rem;
    color: var(--color-muted);
    text-align: right;
}
/*--------------- button -------------------*/  
.btn-primary-outline {  /*checked*/
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-accent);
    background-color: transparent;
    color: var(--color-accent);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.btn-primary-outline:hover {  /*checked*/
    background-color: var(--color-accent-light);
}
.btn-primary {  /*checked*/  /* by Bootstrap */
    background-color: var(--color-titlelight);  
}
.btn-secondary {  /*checked*/  /* by Bootstrap */
    background-color: #6c757d;
} 
.btn-success {   /* by Bootstrap */
    background-color: #28a745;
}
.btn-danger {   /* by Bootstrap */
    background-color: #dc3545;
}         
/* =============== 🟦 1. container-standard 🟦 ※ セクション標準任務。静的な情報を表示する場所。============== */
.container-standard {  /*checked*/ 
    max-width: 1200px;   /* 幕府の大広間：横幅は最大1200px */
    margin: 0 auto;      /* 大名行列の整列、中央寄せ */
    padding: var(--space-container); /* 幕府ルールによる内側余白 */
}
.container-standard h2 { /* 見出しルール（大見出し） */
    font-size: var(--font-xlarge); /* 大名の公式発表クラスの文字 */
    margin-bottom: 1rem;
}
.container-standard p { /* 通常テキスト */
    font-size: var(--font-base); /* 幕府の標準文書サイズ */
    line-height: 1.6; /* 読みやすい行間、民が読み解きやすい配慮 */
}
    @media (max-width: 1024px) {    /* 📱 電子計算板（タブレット：最大1024px）向け */
        .container-standard {
        padding-top: 40px;
        padding-bottom: 40px;
        }
        .container-standard h2 {
        font-size: 1.5rem; /* 約24px程度 */
        }
        .container-standard p {
        font-size: 0.95rem; /* 約15.2px */
        line-height: 1.6;
        }}     
    @media (max-width: 768px) {  /* 📏 移動電話（スマホ：最大768px）向け */
        .container-standard {
            margin-top: 15px;
            padding-top: 15px;
            padding-bottom: 20px;
            max-width: 95%;
            margin-left: auto;
            margin-right: auto;
        }
        .container-standard h2 {
            font-size: 1.25rem; /* 約20px → 親方様希望により調整可 */
        }
        .container-standard p {
            font-size: 0.875rem; /* 約14px */
            line-height: 1.6;
        } }        
/* =============== 🟩 2. container-grid 🟩 ※ 一覧やカード表示並列任務。カードやギャラリーなどの配置用。============== */
.container-grid {
    display: grid;  /* 百姓一揆の秩序ある隊列（グリッドレイアウト） */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 自動列配置 */
    gap: var(--space-grid-gap);  /* ✨畑と畑の自然なあぜ道 ✨(コンテンツ間の間隔） */
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-container);
}
.container-grid .grid-item {   /* グリッドアイテムの共通設定（カードや一覧の中身） */
    background-color: var(--color-bg-light); /* 藩の田畑色 */
    border-radius: 8px; /* 和やかな角丸 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* うっすら影武者 */
    padding: 1rem;
    transition: transform 0.3s ease; /* 触れたときの動き */
    min-height: 280px; /* 高さに余裕を持たせる */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container-grid .grid-item2 {
    background-color: var(--color-bg-light); /* 藩の田畑色 */
    padding: 1rem;
    transition: transform 0.3s ease; /* 触れたときの動き */
    min-height: 280px; /* 高さに余裕を持たせる */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container-grid .grid-item:hover {
    transform: translateY(-5px); /* 浮き上がる → 注目を集める */
}
.container-grid .grid-item2:hover {
    transform: translateY(-5px); /* 浮き上がる → 注目を集める */
    }
    /*@media (max-width: 767px) { 
        .container-grid {
        grid-template-columns: repeat(2, 1fr); /* ← 強制2列！ 
        }}*/
        @media (max-width: 768px) { /*📏 新：移動電話用の目泥吾九会離（grid-itemの並び制御） */

            .container-grid .row {
                display: contents !important;
            }
        
            .container-grid {
                width: 100%;
                padding-left: 0; /*1rem*/
                padding-right: 0; /*1rem*/
                overflow-x: hidden;
                box-sizing: border-box;
                /* 👈 ここに padding の内側調整を足してもよいが、今回は保留 */
            }
        
            .container-grid .grid-item {
                box-sizing: border-box;
                min-height: auto !important;
                /* padding: 1rem 0.5rem; */ /* 🚫 削除済みのままでよし */
                width: 95vw;              /* ✅ ここを 95vw に変更 */
                max-width: 100%;          /* ✅ ここを挿入 */
                margin: 0 auto;           /* ✅ ここを挿入：中央寄せで左右バランス調整 */
                /* 👆 追加で余白を確保しすぎず、センターに寄せる */
            }
        
            /*section#services {
                overflow-x: hidden;
                padding: 0;               /* ✅ ここを挿入：左右余白を徹底排除 */
             /* margin: 0;                /* ✅ ここを挿入：不必要な外余白の排除 */
            /*}*/
        
            .container-grid .grid-item i {
                font-size: 24px !important;
                margin-bottom: 0.5rem;
            }
        
            .container-grid .grid-item h4 {
                font-size: 1rem;
                margin: 0.3rem 0;
            }
        
            .container-grid .grid-item p {
                font-size: 0.85rem;
                line-height: 1.4;
                margin-bottom: 0.5rem;
            }
        
            .container-grid .grid-item .btn {
                font-size: 0.85rem;
                padding: 0.3rem 0.75rem;
            }
        }
          
/*======🟧 3. container-feature 🟧 ※ blog-details.html の記事本体や特集コンテンツ特集任務。目立たせたい重要な情報用。======*/
.container-feature {
    max-width: 1000px;  /* 特別任務につき幅はやや小さめ */
    margin: 0 auto;
    padding: var(--space-container);
    background-color: var(--color-accent-light); /* 特別配色で目立たせる */
    /*border-radius: 12px;  洗練された意匠 */
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  威厳ある影 */
    text-align: center; /* 中央配置でインパクト */
}
    @media (min-width: 768px) { /*📏 768px以下（移動電話）*/
        .container-feature .spacing-vertical {
            padding:1rem;
        }}
.container-feature h2 {
    font-size: var(--font-xlarge); /* 高らかな大見出し */
}
.container-feature p {
    font-size: var(--font-base);
    line-height: 1.6;
}
/* ==================  🟥 4. container-cta 🟥 ※ 問い合わせ・行動促進エリア、行動促進任務。申し込みやボタン、次の導線。===== */
.container-cta {
    max-width: none; /* 呼びかけは簡潔に、でも目立つ */
    margin: 0 auto;
    padding: var(--space-container);
    text-align: center; /* 民に向かって演説！ */
}
    @media (min-width: 768px) { /*📏 768px以下（移動電話）*/
        .container-cta.cont-container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0px;
            text-align: center; /* 民に向かって演説！ */
            left:0px;
}
        }
.container-cta .btn-cta {  /*checked*/   /* CTAのボタン */
    display: inline-block;
    padding: 1rem 2rem;
    font-size: var(--font-large);
    background-color: var(--color-accent); /* 強調色で視線を誘導 */
    color: var(--color-on-accent); /* ボタン内の文字色 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.container-cta .btn-cta:hover {  /*checked*/ 
    background-color: var(--color-accent-hover); /* ホバーで「参れ！」の合図 */
}
/* ==================  ⬛ 5. container-modal ⬛ ※ モーダルクイズの表示エリア、詳細説明任務。モーダルウィンドウやポップアップ。==== */
.container-modal {  /*checked*/ 
    position: fixed;
    top: 50%; /* 幕府の中枢に表示 */
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-background);
    padding: var(--space-container);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    z-index: 999;
    display: none; /* 通常は非表示。必要時に開く */
}
.container-modal.open {  /*checked*/  /* モーダルオープン用クラス */
    display: block;
}
/*=================== 👑 6. container-amy 👑 ※ index-About セクション　Amy専用任務。ブランドの中枢情報。唯一無二の御殿。========= */
.container-amy {
    max-width: 1000px; /* 誇り高きAmy殿の御殿！ */
    margin: 0 auto;
    padding: var(--space-container);
    background-color: var(--color-amy-bg, #f8f2ec); /* 柔らかく上品な専用色 */
    border: 2px solid var(--color-amy-border, #e0d5c6); /* 気品ある枠線 */
    border-radius: 16px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    text-align: center; /* 殿、中央に鎮座まします！ */
}
    @media (min-width: 768px) { /*📏 768px以下（移動電話）*/
        .container-amy {
            padding: 5px;
        }}
.container-amy h2 { /* Amy紹介の見出し */
    font-size: var(--font-xxlarge); /* 特大サイズでブランド強調 */
    font-family: var(--font-serif); /* 優雅なフォントで差別化 */
}
.container-amy p { /* 概要文 */
    font-size: var(--font-base);
    line-height: 1.8;
    color: var(--color-text-muted);
}   
.container-amy .read-more {  /* 「詳しく見る」リンク */
    display: inline-block;
    margin-top: 1rem;
    font-size: var(--font-base);
    color: var(--color-link);
    text-decoration: underline;
    transition: color 0.3s ease;
}
.container-amy .read-more:hover {
    color: var(--color-link-hover);
}
/*==================  ⚔️ 1. 陣形変化の心得（スマホ1列→タブレット2列→PC4列）=================================*/
.grid-cols {
  width: 100%;
}
    @media (min-width: 768px) { /*📏 768px以下（移動電話）*/
        .grid-cols {
            width: 50%;
        }}
    @media (min-width: 992px) { /*📱 992以下（タブレット）*/
    .grid-cols {
        width: 25%;
    }}
/*==================  ⚔️ 2. 余白の礼法（下）=================================*/
.spacing-bottom {
  margin-bottom: 1.5rem;
}
/*==================  ⚔️ 3. 中央揃えの儀 =================================*/
.text-align-center {
  text-align: center;
}
/*==================  ⚔️ 4. 文字の大小（見出し差） =================================*/
.font-heading-large {
  font-size: 2rem;
  font-weight: bold;
}
/*==================  ⚔️ 5. 枠線の心得 =================================*/
.border-standard {
  border: 1px solid var(--color-border, #ccc);
}
/*==================  ⚔️ 6. 背景色の使い分け =================================*/
.bg-light {
  background-color: var(--color-bg-light, #f9f9f9);
}
/*==================  ⚔️ 7. シャドウ術 =================================*/
.shadow-soft {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/*==================  ⚔️ 8. 丸みの美学（ボーダー半径）=================================*/
.rounded-medium {
  border-radius: 8px;
}
/*==================  ⚔️ 9. 画像整列の術 =================================*/
.img-fluid {
  width: 100%;
  height: auto;
  display: block;
}
/*==================  ⚔️ 10. 表示非表示の忍び技 =================================*/
.hidden {  /*checked*/ 
  display: none;
}
.visible {
  display: block;
}
/*==================  ⚔️ 11. 段官位職位振る舞い法度（列幅の流派統一） =================================*/
.grid-cols-2max {  /*checked*/ 
    width: 100%;
}
    @media (min-width: 768px) { /*📏 768px以下（移動電話）*/
        .grid-cols-2max {  /*checked*/ 
            width: 50%;   
    }}
    @media (min-width: 992px) {
        .grid-cols-2max {  /*checked*/ 
            width: 50%; /* PCでも2列を維持 */
    } }
.grid-cols-3max {  /*checked*/ 
    width: 100%;
}
    @media (min-width: 768px) { /*📏 768px以下（移動電話）*/
        .grid-cols-3max {  /*checked*/ 
            width: 50%;
    } }
    @media (min-width: 992px) {  /*checked*/ 
        .grid-cols-3max {
            width: 33.3333%; /* 最大参列陣形（3列） */
    } }
.grid-cols-4max {  /*checked*/ 
    width: 100%;
}
    @media (min-width: 768px) {  /*checked*/ /*📏 768px以下（移動電話）*/
        .grid-cols-4max {
            width: 50%;
    }}
    @media (min-width: 992px) {
        .grid-cols-4max {  /*checked*/ 
            width: 25%;
    } }
.grid-cols-6max {  /*checked*/ 
    width: 100%;
}
    @media (min-width: 768px) { /*📏 768px以下（移動電話）*/
        .grid-cols-6max {  /*checked*/ 
            width: 33.3333%;
    } }
    @media (min-width: 992px) {
        .grid-cols-6max {  /*checked*/ 
            width: 16.6667%;
    } }
/*==================  ⚔️ 補記：家紋強制成型のご法度（幕府制御） =================================*/
.icon-standard {  /*checked*/ 
    max-width: 80px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.spacing-horizontal {  /*checked*/ 
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.margin-bottom-medium {  /*checked*/ 
    margin-bottom: 1rem;
}

/* =========================================== ◆◆ page start　暖簾 ◆◆ =================================== */
body.noren-active {
  overflow: hidden;
}

#noren-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.9); /* 半透明黒幕 */
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}

#noren-content {
    background: #8488da;
    padding: 2rem;
    border-radius: 10px;
    max-width: 90%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    flex-direction: column; /* 縦並びに整列！ */
    align-items: center;     /* 全部中央寄せ */
    text-align: center;      /* テキスト中央寄せ */
}

#noren-content p {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1rem;
}

#noren-close {
    margin-top: 1rem;   /* 🏷 これが「下に配置」演出の核心 */
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    color: #313361;
    background-color: #c6c7df;
}
#noren-close-wrapper {
    z-index: 9999;
    text-align: center;  /* ボタン中央寄せ用 */
    margin-top: 2rem;
}


    @media (max-width: 768px) {
        #noren-content p {
            font-size: 1.1rem;
            font-weight: 500;
            line-height: 1.5rem;
        }
        .sm-break {
            display: block;
        }
        #noren-content {
            background: #8488da;
            padding: 0.75rem;
            border-radius: 10px;
            max-width: 90%;
            text-align: center;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
            display: flex;
            flex-direction: column; /* 縦並びに整列！ */
            align-items: center;     /* 全部中央寄せ */
            text-align: center;      /* テキスト中央寄せ */    
        }
        #noren-close {
            margin-top: 1rem;   /* 🏷 これが「下に配置」演出の核心 */
            padding: 0.5rem 1rem;
            font-size: 1.0rem;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
            color: #313361;
            background-color: #c6c7df;
        }
    }


@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);  /* 初期位置 */
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);  /* 上にスライド */
  }
}

#noren-overlay.fadeout {
  animation: fadeOutUp 1s ease forwards;
}
        
/*仮*/
#testTrigger {
  position: fixed;
  top: 80px; /* Navbarの下あたり */
  right: 20px;
  z-index: 999999; /* 全レイヤー上位へ */
  background: rgba(240, 3, 181, 0.8);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}


/* ============================================ ◆◆ Header ◆◆ ============================================ */  
 /* ◆ Navbar スタイル controlled by iac_cmn */
 .navbar {  /*checked*/   /* =========== by Bootstrap ============ */
    color: white;
    position: fixed;
    z-index: 1030;        
    width: 100%;
    top: 0;
    left: 0;
    height: 70px !important;
    /* z-index: 10000; */
    padding: 10px 10px;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    height: auto; /* 高さを自動調整 */
    min-height: 50px; /* 最小50px */
    background: linear-gradient(180deg,rgba(17,3,54,1)0%, rgba(52,40,98,1) 100%); /* 初期状態（Homeでは透明） */
    display: block !important;  /* ✅ 強制的に表示する */
    visibility: visible !important;
    opacity: 1 !important;
}
.navbar-container {  /*checked*/ 
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    /*position: relative;*/
}
.navbar-logo {  /*checked*/ 
    font-size: 1.5em;
    text-decoration: none;
    color: rgb(250, 250, 250);
    text-align: left;
    text-shadow: 3px 0px 3px rgba(254, 254, 254, 0.8);
    font-weight:lighter;
    text-wrap:none;
    /*margin-left: 5vw; */
    display: flex;
    /*align-items: center; */
    /* justify-content: center; */
    line-height: 1;
    /* font-weight: bold; */
}
.navbar-menu {  /*checked*/ 
    list-style: none;
    display: flex;
    gap: 20px;
    position: static;
    right: 1rem;
    color: #fff;
}
.navbar-menu li {  /*checked*/ 
    display: inline;
    list-style: none;
    margin-bottom: 0.5rem;
}
.navbar-menu a {  /*checked*/ 
    text-decoration: none;
    color: white;
    /*font-weight: bold; */
}
.navbar-menu a.active {  /*checked*/        /* Navbar アクティブなリンク */
    border-bottom: 2px solid rgb(118, 21, 222); /* アンダーバーの色と太さ */
    padding-bottom: 5px; /* 下線の間隔調整 */
    display: flex;
    flex-direction: column;
}

.navbar-menu a[aria-current="page"] {  /*checked*/        /* Navbar アクティブなリンク */
    border-bottom: 2px solid rgb(118, 21, 222); /* アンダーバーの色と太さ */
    padding-bottom: 5px; /* 下線の間隔調整 */
    display: flex;
    flex-direction: column;
}
.navbar-menu a:hover {  /*checked*/     /* ホバー時エフェクト*/ 
    border-bottom: 2px solid  rgb(8, 196, 203); /* ホバー時のアンダーバー色 */
    padding-bottom: 5px; /* 下線の間隔調整 */
}

.navbar-menu .nav-link.active {  /*checked*/ 
    border-bottom: 2px solid rgb(118, 21, 222) !important;
    padding-bottom: 5px;
}
.navbar-menu .nav-link:hover {  /*checked*/ 
    border-bottom: 2px solid rgb(8, 196, 203) !important;
    padding-bottom: 5px;
}
.label-after { /*単語入替後*/
  display: none;
}

.hamburger-menu {  /* ◆ Hamburger ◆ */
    display: none;

}

    @media (max-width: 768px) { /*📏 768px以下（移動電話）*/
        .navbar {  /*checked*/   /* 🔷 Navbst（親） */
            z-index: 1100 !important;  /* 🚩 不動の将、ここに再び立つ */    
            min-height: 30px; /* 30 少しだけ高さ下げ */
            padding: 0.75rem 0.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
        }
        .navbar-logo {  /*checked*/     /* 🔷 ロゴ（小さめにして調和を） */
            font-size: 1.3em; /* 元よりやや小ぶりに */
            line-height: 1;
            text-align: left;
            text-shadow: none;
            font-weight: bold;
            white-space: nowrap;
        }
        .navbar-menu {  /*checked*/     /* 🔷 メニュー展開時 */
            display: none; /* 🏯 PC時は常に表示させる */
            flex-direction: row;
            position: static;
            background: none;
            color: white;
            gap: 1.5rem;
            padding: 0;
            z-index: auto;
        }
        .navbar-menu.active {  /*checked*/ 
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 60px;
            right: 10px;
            background-color: rgba(52, 40, 98, 1);
            width: 80%;
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 9998;
        }         
        .hamburger-menu.navbar-toggler-icon {  /*checked*/ 
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            display: inline-block;
            color: white;
        }
        .hamburger-menu.navbar-toggler-icon.active {  /*checked*/ 
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' d='M6 6 L24 24 M24 6 L6 24'/%3E%3C/svg%3E");
            color: #fff;
            transition: transform 0.3s ease;
        }
        .hamburger-menu {  /*checked*/     /* 🔷 肉挟み（しっかり表示＆配置） */
            display: flex !important; /* 🏯PC時は常時表示 */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            width: 28px;
            height: 22px;
            cursor: pointer;
            z-index: 9999;
            position: static;
            top: 14px;
            right: 14px;
            padding: 0;
        }
        .hamburger-menu span {  /*checked*/ 
            display: block;
            width: 100%;
            height: 3px;
            background-color: #fff;
            border-radius: 2px;
        }
    }
/* ================================== ◆◆ Main ◆◆ ======================================== */ 
main {
    margin-top: 70px; /* Navbar(60px) + パンくず(50px) = 合計分避ける */
    }    
    @media screen and (max-width: 768px) { /*📏 768px以下（移動電話）*/
        main {  /*checked*/ 
            flex-grow: 1;
            margin-top: 68px !important; /* ✅ ここにパンくず＋ナビバー分の高さを反映 */
        }
        main, .tab-container {
            z-index: auto; /* ← z-index 高すぎると「上に透けて出る」ことがあるので注意！ */
          }
        footer {  /*checked*/ 
            margin-top: auto;
        }   
        .back-to-top {/* ======== Back to Top for smartphone =========== */
            position: fixed;
            bottom: 2rem;
            right: 1.5rem;
            display: none;
            font-size: 2rem;
            z-index: 1000;
            color: #555;
            background-color: rgba(255,255,255,0.8);
            padding: 0;
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            transition: opacity 0.3s ease;
            width: 48px;
            height: 48px;
            line-height: 47px; /* アイコン中央寄せ */
            text-align: center;         /* ← 水平中央揃え */
        }
        .back-to-top:hover {
            color: #000;
            background-color: #f0f0f0;
        }
  }
/* ============================= ◆◆◆ Indexページ ◆◆◆ =================================== */ 
/* フェードイン */
.fade-section {  /*checked*/ 
    transition: opacity 1.5s ease, transform 1.5s ease;
}
.fade-section-home {  /*checked*/ 
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-section.visible {  /*checked*/ 
    opacity: 1;
    transform: translateY(0);
}    
/* 個別セクション設定 */      
#home {   
    margin-top: 0 !important;  /* 🔥 Home だけはNavbar 直下の余白を完全にゼロ */
    padding-top: 0 !important;
    text-align: center;
    position: relative;
    overflow: hidden;
    height:fit-content; /*一時的に追加*/
}    
#home-title {
    font-size: 36px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    margin: 2px;
    z-index: 22; 
}
#home-subtitle {
    font-size: 18px;
    color: #fff; /* 背景が青いので、テキスト色は白に */
    text-align: center;
    margin: 2%;
}    
#guide, #about ,#services, #philosophy, #framework, #blog, #contact {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    scroll-padding-top: 50px; /* Navbarの実際の高さに合わせる（例：70px） */
    padding-top: calc(var(--navbar-height, 10vh) + 10px); /* もし `--navbar-height` が設定されていなければ `10vh` をデフォルトに */
    min-height: 100vh; /* 全画面 */
    padding: 100px 20px; /* ナビバー分など含め余白を大きめに */
}  
    @media (max-width: 768px) { /*📏 768px以下（移動電話）*/
        #guide, #about, #services, #philosophy, #framework, #blog, #contact {
            scroll-margin-top: 90px; /* スマホは高めに調整 */
        }
     }

.ctn-title {  /*checked*/ 
    font-size: 32px;
    font-weight: bold;
    color: var(--color-title); /* 深めの青 */
    text-align: left;
}
.ctn-title2 {  /*checked*/ 
    font-size: 24px;
    font-weight: bold;
    color: var(--color-title); /* 深めの青 */
    text-align: left;
}
.ctn-subtitle {  /*checked*/ 
    font-size: 20px;
    color:var(--color-subtitle);
    text-align: start;
    padding-bottom: 5px;
}
.ctn-description{  /*checked*/ 
    font-size: 1rem;
    color:val(--color-text);
    line-height: 1.6;
    text-align: start;
}        
/* ===================================== ◆Homeセクション◆ ==========================================*/      
.main-header {  /* 波アニメーションとテキスト */
    position:relative;
    text-align:center;
    background: linear-gradient(180deg, rgba(52,40,98,1) 0%, rgb(255, 255, 255) 26%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 52%, rgba(0,172,193,1) 100%);
    color:white;
    margin-top: 0px; /*これを設定するとNavbarと空の間が空いてしまう*/
    padding-top: 60px;
}
.inner-header { /*message area */
    height:65vh; /* 65vh */
    width:100%;
    margin: 0;
    padding: 0;
}
.flex { /*Flexboxのcontainers*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction:column; /* flex内の縦並び＝改行できる */
}
    @media (max-width:768px) {
        .inner-header {
            height:65vh; /* 65vh */
            width:100%;
            margin: 0;
            padding: 0;
        }    
    }
.waves { /* 波のエリア定義 */
    position:relative;
    width: 100%;
    height:15vh;
    margin-bottom:-7px; /*Fix for safari gap*/
    min-height:100px;
    max-height:150px;
    z-index: 3;
}
.content {
    position:relative;
    height:20vh;
    text-align:center;
    background-color: white;
} 
.parallax > use { /* 波アニメーション */
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
    @keyframes move-forever {
    0% {
    transform: translate3d(-90px,0,0);
    }
    100% { 
        transform: translate3d(85px,0,0);
    }
    }
    @media (max-width: 768px) { /*📏 768px以下（移動電話）*/
        .waves {
            height:40px;
            min-height:40px;
        }
        .content {
            height:30vh;
        }
        h1 {
            font-size:24px;
    }}
/* ===== 波・星アニメ背景変化 ===== */
.main-header.day { 
    background: linear-gradient(180deg, rgba(52,40,98,1) 0%, rgb(58, 133, 183) 26%, rgb(155, 206, 227) 50%, rgb(55, 108, 194)50%,  rgb(83, 244, 231) 100%);
}    
.sky-layer { /* 波アニメ透明レイヤーの初期値 */
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 4;
    opacity: 0; /* 🔥最初は非表示！ */
    pointer-events: none;
    transition: opacity 3s ease;
}     
.sky-layer.orange { 
    background: linear-gradient(180deg, rgba(40, 34, 64, 0.922) 0%,rgba(244, 132, 4, 0.758) 30%, rgba(227, 204, 177, 0.915) 50%, rgba(113, 36, 3, 0.433) 50%, rgba(255,165,0,0) 100%); 
}
.sky-layer.black { 
    background:linear-gradient(180deg, rgba(8,8,8,0.8) 0%, rgba(7, 22, 52, 0.8) 50%, rgba(0, 0, 0, 0.8) 50%, rgba(4,89,244,0) 100%);
}
.sky-layer.white { 
    background: linear-gradient(180deg,rgba(18, 14, 53, 0.8) 0%,rgba(129, 64, 249, 0.568) 50%,rgba(209, 187, 240, 0.8) 50%,rgba(167, 219, 252, 0) 100%);
}
.stars-container {  /* 星生成と星レイヤー */  
    position: absolute;
    top: 10; /* 0 */
    height: 100%; /* 空部分だけ！ */
    width: 100%;
    z-index: 5000;
    pointer-events: none;
    opacity: 0;
}        
.star { /* 星々 */
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); /* 星の発光感！ */
    opacity: 0;
    will-change: opacity;
    z-index: 6000;
}
/*流れ星　入 */
.pattern {
  position: relative;
  width: 100%;
  height: 50%;  
  opacity: 0; /* ← 初期は非表示 */
  transition: opacity 0.5s ease;
  overflow-y: hidden; /*試しに入れてみる*/
}
.pattern .item {
  width: 1px;
  height: 80px;
  background-color: #fff;
  position: absolute;
  top: -30%;
  transform: rotate(30deg);
}
/* item 1 → shootingStar */
.pattern .item:nth-of-type(1) {
  left: 17%;
  animation: shootingStar 5s infinite;
}
    @keyframes shootingStar {
    0%   { top: -30%; left: 17%; height: 80px; }
    100% { top: 300px; left: 0%; height: 0; }
    }
/* item 2 → shootingStar_2 */
.pattern .item:nth-of-type(2) {
  left: 30%;
  animation: shootingStar_2 5s infinite;
}
    @keyframes shootingStar_2 {
    0%   { top: -30%; left: 30%; height: 80px; }
    100% { top: 100px; left: 20%; height: 0; }
    }
/* item 3 → shootingStar_3 */
.pattern .item:nth-of-type(3) {
  left: 60%;
  animation: shootingStar_3 1.4s infinite;
}
    @keyframes shootingStar_3 {
    0%   { top: -30%; left: 10%; height: 80px; }
    100% { top: 100px; left: 5%; height: 0; }
    }
/* item 4 → shootingStar_4 */
.pattern .item:nth-of-type(4) {
  left: 80%;
  animation: shootingStar_4 2s infinite;
}
    @keyframes shootingStar_4 {
    0%   { top: -30%; left: 50%; height: 80px; }
    100% { top: 300px; left: 40%; height: 0; }
    }

/*---ここまで、流れ星　入 */

/*  Home Message */
.msg-line { /* Opening Animation Msg */
    opacity: 0;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    color: white;
    text-shadow: 0 0 4px black;
    transition: opacity 1s;
    z-index: 3000;
    width: 80vw;
  }
  @media(max-width:768px){
    .msg-line { /* Opening Animation Msg */
        opacity: 0;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.1rem;
        color: white;
        text-shadow: 0 0 4px black;
        transition: opacity 1s;
        z-index: 3000;
        width: 95vw;
      }
  }
#msg5 { /*最後のフレーム1行目 */
    top: 30%;
}
#msg6 { /*最後のフレーム2行目 */
    top: 40%;
  }   

#msg7 { /*最後のフレーム2行目 */
    top: 55%;
    font-size: small;
  }     
#rew-btn { /* おかわりボタン */
    position: fixed;
    bottom: 5.5rem;
    right: 2.5rem;
    width: 3rem;
    height: 3rem;
    font-size: 1.1rem;
    color: #fff;
    background-color: transparent; 
    /*background-color: rgba(255, 255, 255, 0.1);*/ /* 一時確認用 */
    transform: translate(-50%, -50%);/* 一時確認用 */
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    letter-spacing: 0.1em; 
}  
.rew-btn:hover{
    background-color: rgba(255, 255, 255, 0.8);
}
#rew-btn.show {
    display: flex !important;;
    opacity: 1 !important;;
}
#rew-btn.hidden {  /*checked*/ 
    display: none;
} 
        @media (min-width: 481px) and (max-width: 1024px) {
            #rew-btn {
                width: auto;
                height: 2.2rem;
                padding: 0 1rem;
                border-radius: 9999px; /* 横長丸薬（錠剤）型 */
                font-size: 1rem;
                white-space: nowrap;
            } }
        @media (max-width: 480px) {
            #rew-btn {
                width: auto;
                height: 1.5rem;
                padding: 0 1rem;
                border-radius: 9999px; /* 横長丸薬（錠剤）型 */
                font-size: 1rem;
                white-space: nowrap;
            } }
/* ================================== ◆About セクション◆ ===================================== */
.about-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: 1px solid #5c3dff;
    margin-bottom: 20px;
    background: #d8e5f7;
}
.about-intro {
    flex: 1;
    text-align: left;
    padding: 10px;
}
.read-more-btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: #5c3dff;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.3s;
}
.read-more-btn:hover {
    background-color: #4a2ecc;
}  
.profile-image {/* プロフィール画像 */
    flex: 0.3;
    text-align: center;
}
.profile-image img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}
.profile-name {
    margin-top: 5px;
    font-weight: bold;
}
.about-categories {   /* カテゴリーボックス */
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.about-box {
  cursor: pointer;
  padding: 1rem;
  background-color: var(--color-bg-light);
  transition: background-color 0.3s ease;
  border-radius: 0.5rem;
  text-align: left;
}
.about-box:hover {
  background-color: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.about-box a {
    font-weight: bold;
    color: #5c3dff;
    text-decoration: none;
}
    @media (max-width: 768px) {
        .about-container {
            flex-direction: column;
            padding: 5px;
        }

        .about-intro {
            order: 1;
            margin-bottom: 1.5rem;  /* 必要に応じて数値調整 */
        }

        .profile-image {
            order: 2;
        }
        .about-box {
            border:1px solid #5c3dff;
            padding:5px;
        }
    }

/* ================================== ◆Servicesセクション◆ ====================================*/   
[data-microtip-position][aria-label]::after { /*　tab2内のツールチップ */
  font-size: 0.9rem;
  background-color: #3d0487;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ================================== ◆Frameworkセクション◆ ================================== */
.iaj-accordion {  /*checked*/   /* アコーディオン設定 */
    margin-top: 20px;
}
.iaj-accordion .accordion-button {  /*checked*/
    background-color: #f9f9f9;
    color: #333;
    font-weight: 500;
    transition: background-color 0.3s ease;
}  
.iaj-accordion .accordion-button:not(.collapsed) {  /*checked*/
    background-color: #e0e0e0;
    color: #000;
}
.iaj-accordion .accordion-body {  /*checked*/
    background-color: #fff;
    color: #555;
    border-top: 1px solid #ddd;
}
.accordion-body{  /*checked*/
    text-align:left;
} 
/* =========================== セクションのCard表示・Cardページ共通 ============================== */ 
.fw-card {  /*checked*/ 
    min-height: 200px;
    /*min-height: 240px;   */     
    padding: 1rem;  /* ← 追加 1rem がオリジナル*/
    border-radius: 0.5rem; /* 任意だけど、柔らかさが出る */
    /*box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);  任意：影つけても良い */
}
/* ====================================== ◆◆◆ cardページ ◆◆◆ ============================================ */
/* ============================== パンくずリスト ============================== */  
.breadcrumb {  /*checked*/    /* by Bootstrap =========*/
    list-style: none;
    padding: 10px;
    background-color:  #f4f4f4;;
    display: flex;
    gap: 0.25rem;
}
.breadcrumb li {  /*checked*/    /* by Bootstrap ======*/
    display: inline;
}
.breadcrumb a {  /*checked*/    /* by Bootstrap =======*/
    text-decoration: none;
    color: rgb(118, 21, 222);
}
.breadcrumb a:hover {  /*checked*/    /* by Bootstrap =====*/
    text-decoration: underline;
}
.breadcrumb-section {
    display: flex;
    position: fixed;
    top: 40px; /* ← Navbarの高さに合わせて調整 */
    left: 0;
    right: 0;
    z-index: 1020;
    padding: 10px;
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
  }  
.section-base.breadcrumb-section {  /*checked*/  /* 📘 パンくず領土の余白調整（Navbar直下専用） */
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff;
    height:64px;
}    
    @media (max-width: 768px) { /*📏 768px以下（移動電話）*/
        .breadcrumb {  /*checked*/    /* by Bootstrap =========*/
            list-style: none;
            padding: 5px;
            background-color:  #f4f4f4;;
            display: flex;
            gap: 0.15rem;
        }
        .section-base.breadcrumb-section { 
            position: fixed;              /* ✅ これを追加：帯の位置を固定 */
            top: 30px;                /* ✅ ナビバーの下にぴたり */
            width: 100%;
            z-index: 1020;
            height: 64px;
          }
        .breadcrumb-section .container{
          margin-top: 0.5rem !important;
        }
    }
/* ============================== card表示部 ============================== */      
.fixed-filter-container, .fixed-filter-container23 {  /*checked*/   /* Cardフィルターリング */
    position: sticky;
    top: 10vh; /*10vh*/
    background-color: white;
    /*z-index: 1200;*/
    padding: 1rem;
    margin-top: 20px;
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
}

/* .card-filter-btns.fixed-filter-container, .card-filter-btns.fixed-filter-container23 */
.card-filter-btns {
    display: flex;
    padding-top: 60px;
    margin: 0 auto;
    justify-content: center;
    gap:0.5rem;
    margin-bottom: 10px;
}
.hitcards-count{
    display: flex;
    justify-content: center;
    margin: 5px;
}
#cardArea-container {  /*checked*/ /*card内容の表示領域 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 3rem 1rem;
    justify-content: center; /* コンテンツの中央寄せ防止 */
    align-items: start; /* 高さ揃えに有効（カード内の余白防止） */
}
    
    @media (max-width: 768px) { /*📏 768px以下（移動電話）*/
        .card-filter-btns.fixed-filter-container23{
            background-color: var(--color-bg-light);
            position: fixed;
            padding-top: 25px;
            margin-top: 70px;
            height:15vh;
            box-sizing: border-box;
            margin: 0 auto;    /* 中央寄せ */
            left: 0px;
        } 
        .card-filter-btns.fixed-filter-container{
            background-color: var(--color-bg-light);
            position: fixed;
            padding-top: 40px;
            margin-top: 5px;
            height:15vh;
            box-sizing: border-box;
            /*width:280px;*/
            margin: 0 auto;    /* 中央寄せ */
            left: 0px;
        } 
        .card-filter-btns {  /*checked*/ 
            margin-bottom: 1rem;
            text-align: center;
            margin-bottom: 1rem;
            padding: 0 0 0 18;
        }
        .card-filter-btns .btn {  /*checked*/ 
            background: none;
            border: none;
            color: #333; /* 好きな色 */
            padding: 0.3rem 0.3rem;
            font-size: 0.95rem;
            text-decoration: underline;  /*任意 */  
        }  
        .hitcards-count {
            margin-top: 0.75rem !important; /* ← 少しだけ詰める */
            text-align: center;
            font-size: 0.875rem;
            color: var(--color-muted);
            background-color: var(--color-bg-light);
        }
        .card-filter-btns .btn:hover {  /*checked*/ 
            color: #007bff;
        }
        .filter-btn {  /*checked*/ 
            margin-right: 0.5rem; /* 旧：me-2 */
        }
        #cardArea-container {
            margin-top: 20px;
            padding-top: 8rem; /*8rem*/
            /*grid-template-columns: repeat(2, 1fr) !important; /* ← ここが本命！ 
            display: grid; /* ← これが要でござる！ 
            gap: 1rem;*/
        } 
        .filter-divider {
            border: none;
            border-top: 2px solid rgb(105, 104, 104);
            margin: 0.5rem 0;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            background-color: var(--color-bg-light);
        }     
    }

/* =================== ページネーション =========================== */
.pagination {  /*checked*/    /* by Bootstrap ============*/
    text-align: center;
    margin-top: 20px;
    display: inline-block;
}
.pagination a {  /*checked*/    /* by Bootstrap ===========*/
    text-decoration: none;
    margin: 0 5px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #333;
}
.pagination a:hover {  /*checked*/  /* by Bootstrap ======*/
    background: #007bff;
    color: white;
}
#paginationContainer {  /*checked*/   /* Pagination */
    margin-top: 2rem;           /* 上との距離確保（旧 mt-4） */
    display: flex;              /* 中身を横並びに */
    justify-content: center;    /* ページ番号を中央寄せ */
    flex-wrap: wrap;            /* 小さい画面で折返し可 */
    gap: 0.5rem;                /* ボタン同士の間隔 */
}
.iaj-pagination {  /*checked*/ 
    margin-top: auto;
}
.pagination-wrapper {  /*checked*/ 
    margin-top: 2rem; /* 旧：mt-4 */
    display: flex;
    justify-content: center;
}
/* =========================================== ◆Philosophyセクション◆ ====================================== */
.btn-common {  /*checked*/ 
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: var(--color-titlelight); /* 青系（好みに応じて）background: linear-gradient(45deg, #00bcd4, #3f51b5); */
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}   
.btn-common:hover {  /*checked*/ 
    background-color: #0056b3; /* 青系（好みに応じて） background: linear-gradient(45deg, #3f51b5, #00bcd4);　*/
    transform: translateY(-2px);
}
.btn-common:active {  /*checked*/ 
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-common:disabled {  /*checked*/ 
    background-color: #aaa !important;
    color: #eee !important;
    cursor: not-allowed;
    opacity: 0.6;
    }
/*.row {
    column-gap: 0.5rem;  /* 1.5rem や 2rem など調整可 
    }*/
      
/* ======================================= ◆Blogセクション◆ ============================================= */
.blog-container {  /*checked*/  
    margin: 0 auto;
    padding: 0 0;
    max-width: 85%;
}  
    @media (max-width: 768px) {  /* 📏 すべての移動電話（スマホ）向け構え */
        .blog-container {  /*checked*/ 
            max-width: 95%;
            /*margin: 0 auto;*/
            display: flex;
            flex-direction: column; /* 横並び解除で縦へ */
            overflow-y: visible;
            padding-top: 5px;
            max-height: max-content;
            padding-bottom: 5px;
            padding: 0;
            margin-top: 10px;
            padding-top: 10px;
        }
        #blog-title {  /*checked*/ 
            width: 90%;
            display: block;  /* ← これが肝！ */
            padding: 0.5em 0.5em;
            text-decoration: none;
            color: #fff;
            background-color: var(--color-titlelight);
            text-align: left;
            /*margin-top: 80px;*/
        }
        #blog-content, .post-content {  /*checked*/ 
            text-align: left;       /* 左寄せに直す */
            margin-top: 1rem;
            max-width: 100%;
        } 
        .blog-grid {
            display: flex !important;           /* グリッドをやめて縦並び */
            flex-direction: column !important;  /* 1列に並べる */
            gap: 1.5rem;              /* 各カードの間隔 */
        }
        .blog-post {
            display: flex !important;                /* ここ */
            flex-direction: row !important;          /* ここ */
            align-items: flex-start;      /* ここ */
            gap: 0.75rem;                 /* ここ */
            padding: 0.75rem;             /* ここ */
            height: 150px;
        }

        .blog-post img {
            width: 90px !important;                  /* ここ */
            height: 59px !important; 
            height: auto;                 /* ここ */
            object-fit: cover;            /* ここ */
            border-radius: 0.5rem;        /* ここ */
        }

        .blog-post-content {
            display: flex !important;                /* ここ */
            flex-direction: column;      /* ここ */
            justify-content: center;     /* ここ */
            flex: 1;                      /* ここ */
        }

        .blog-post-content h3 {
            font-size: 1.3rem;           /* 0.95 */
            margin: 0 0 0.25rem 0;        /* ここ */
        }

        .blog-post-content .meta {
            font-size: 0.75rem;           /* ここ */
            color: #666;                  /* ここ */
        }
        }
.blog-heading {  /*checked*/  /* Blogヘッダー */ 
    text-align:left;
    margin-bottom: 20px;
}
.blog-grid {  /*checked*/  /* グリッドレイアウト */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.blog-post {  /*checked*/  /* 各記事のスタイル */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.blog-post img {  /*checked*/ 
    width: 299px;  /*299px 100%*/
    height: 200px; /* ★高さを固定する場合（調整可能） */
    object-fit: cover; /* ★画像のアスペクト比を保ちつつ、トリミング cover contain*/
    /*border-radius: 8px;*/ 
}
.blog-post-content {
  flex: 1;
}
.pagination-container {
  text-align: center;
  margin-top: 20px;
}
.pagination-container button {
  margin: 0 5px;
  padding: 6px 12px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  cursor: pointer;
}
.pagination-container button.active {
  background-color: var(--color-titlelight);
  color: white;
}

/* =======================================  ◆◆◆ Blog詳細ページ ◆◆◆ ===================================== */
#blog-title {  /*checked*/ 
    width: 100%;
    display: block;  /* ← これが肝！ */
    padding: 0.5em 0.5em;
    text-decoration: none;
    color: #fff;
    background-color: var(--color-titlelight);
    text-align: left;
    z-index: 1800;
    margin-top: 50px;
}
.post-title h2{  /*checked*/ 
    color: #5c3dff;
}
.blog-details-container{  /*checked*/ 
    padding:10%;
    background: #e0fdff;   
}
#blog-content, .post-content {  /*checked*/ 
    text-align: left;       /* 左寄せに直す */
    margin-top: 1rem;
    max-width: 95%;
}           
.post-content {  /*checked*/  /* blog用 */
    padding: 15px;
}
.blog-category {  /*checked*/  /* Blog Category 大名層 */
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-subtle);
    padding-left: 0.25rem;
    border-left: 4px solid var(--accent-muted);
    font-size: 12px;
    color: #888;   margin-bottom: 1.5rem;
}
.blog-body {  /*checked*/ 
    /* max-width: 900px; */
    margin: 0 auto;
    line-height: 1.6;
    padding-left: 2vw;
}
#blog-image {  /*checked*/ 
    max-width: 300px;  
    width: 100%;
    height: auto;
    display: block;
    padding-left: 10px; 
}  
.quote-style {
    font-style: italic;
    border-left: 4px solid #ccc;
    padding-left: 1em;
    margin: 1.5em 0;
    color: #1d1d1d;
}

    @media (max-width: 768px) { /*📏 768px以下（移動電話）時：縦に戻す */
        #blog-image {  /*checked*/ 
            float: none;
            margin: 0 auto 1rem auto;
            display: block;
        } 
        .blog-section-header h3 {  /*checked*/  /* blog用 */
            text-decoration: none;
        /*margin-top: 30px;*/
        }
        .post-content {  /*checked*/  /* blog用 */
            padding: 0px;
        }
        .date {  /*checked*/  /* blog用 */
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 10px;
        }
        }               
.blog-section-header h3 {  /*checked*/  /* blog用 */
    text-decoration: none;
    z-index: 1500;
    height: 57px;
}    
.date {  /*checked*/  /* blog用 */
    font-size: 12px;
    color: #666;
}
 /* ================================== ◆Contactセクション◆ ========================================== */
.cont-section {  /*checked*/ 
    margin-top: 50px;
    /*margin-bottom: 50px;*/
}
.cont-container {  /*checked*/ 
    min-height: 100vh;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    }
.cont-container .section-header {  /*checked*/ 
    background-color: #007bff;
}
.cont-header {  /*checked*/ 
    margin-bottom: 20px; /*30px */
    text-align: left;
}
.cont-header h2 {  /*checked*/ 
    font-size: 32px;
    font-weight: bold;
}    
.cont-header p {  /*checked*/ 
    font-size: 16px;
    color: #555;
} 
.cont-header li {  /*checked*/ 
  line-height: 1.8rem;
  font-size: 1rem;
} 
.cont-info-box h4 {  /*checked*/ 
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.contact-button-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px; /* 適度な間隔 */
  margin-bottom: 2rem;
}
.contact-button-group a {
  text-decoration: none;
}  

.cont-info-box {
  width: 64px; /* 48px + パディング両側＋枠 */
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cont-info-box p, .cont-info-box a {  /*checked*/ 
    font-size: 14px;
    color: #333;
}
.cont-btn {  /*checked*/ 
    width: 80%;
    margin-top: 10px;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 6px;
    transition: 0.3s;
}
.cont-btn:hover {  /*checked*/ 
    opacity: 0.85;
}

.cont-right {  /*checked*/  /* Available */
    display: flex;
    flex-direction: column;
}      
.iframe-container {  /*checked*/  /* 問合せ先・右カラムのフォーム用iframe */
    width: 100%;
    max-width: 800px;     /* 最大幅の制御 */
    height: 600px;        /* 表示高さを固定してコンパクト */
    margin: 0 auto;       /* センター寄せ */
    overflow: hidden;     /* iframeは内部でスクロール */
    position: relative;
    border: 1px solid #ccc; /* お好みで枠を付ける */
    border-radius: 8px;      /* 角丸もあり */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 軽く影もGood */
}
.iframe-container iframe {  /*checked*/ 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}      
.iframe-wrapper {  /*checked*/ 
    position: relative;
    width: 100%;
    padding-top: 100%;    /* 高さの比率 150%*/
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
    scroll-behavior:auto
        
    }
.iframe-wrapper iframe {  /*checked*/ 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 100% default*/
    border: 1px rgb(85, 72, 168) solid;
    border-radius: 8px;      /* 角丸もあり */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 軽く影もGood */
}
    @media (max-width: 768px) { /*📏 768px以下（移動電話）時：縦に戻す */
        .iframe-wrapper {  /*checked*/ 
            position: relative;
            max-width: 100%;
            padding-top: 100%;    /* 高さの比率 150%*/
            overflow: hidden;
            margin: 0 auto;
            /*scroll-behavior:auto;*/
            height: 1600px;    
            }
        .iframe-wrapper iframe {  /*checked*/ 
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; /* 100% default*/
            border: 1px rgb(85, 72, 168) solid;
            border-radius: 8px;      /* 角丸もあり */
            box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 軽く影もGood */
        }     
    }

/* 予約ボタン */
a.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
  background: none;
  border: 2px solid var(--color);
  color: var(--color);
  font: inherit;
  padding: 1em 2em;
  margin: 0.5em;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  transition: 0.25s;
  display: inline-block;
  position: relative;
  box-shadow: 0 0 0 0 var(--hover); /* 初期状態の影 */
}

a.pulse:hover,
a.pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
  color: #fff;
  border-color: var(--hover);
  background-color: var(--hover);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

/*icon btn*/
.sms-btn {
  border: none !important;      /* 枠線を完全に消す */
  outline: none !important;     /* フォーカス線も消す */
  box-shadow: none !important;  /* Chrome特有の影も消す */
  background: none;  
}
.iconbtn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px; /* アイコンサイズ */
}

/*insta color*/
.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}

/* ========================= Yes/Noモーダル用スタイル ============================= */
.yesno-modal .modal-content {  /*checked*/ 
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.yesno-modal .modal-header {  /*checked*/ 
    background-color: #e6f0ff;
    border-bottom: none;
}
.yesno-modal .modal-title {  /*checked*/ 
    color: #333;
}
.yesno-btn {  /*checked*/ 
    min-width: 120px;
}
#yesno-result h5 {  /*checked*/ 
    color: #007bff;
}
#yesno-result p {  /*checked*/ 
    color: #555;
}
#yes-btn:focus, #yes-btn:active, #no-btn:focus, #no-btn:active {  /*checked*/ 
    background-color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}   
/* ======================================== ◆◆◆ タブページ ◆◆◆ =========================================== */
.tab-container {  /*checked*/  /* タブの入る場所確保 */
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    /*padding: 2rem;*/
    padding-left: 0;
    padding-right: 0;
    padding-top: 40px;
    align-items: flex-start; /* これがTOP揃え！ */
    gap: 1rem;
}
.tab-contents {  /*checked*/  /* タブ部分の画像や文字などの内容 🏯 通常：電子計算箱（PC）*/
    background:#fff;
    max-width: 80%;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0,0,0,0.1);
    flex-grow: 1;
    margin: 0 auto;
    width: 80%;
    max-width: 1000px;
  } 
.tab-menu { /* 🍵 パンくずと蓋の幅を完全一致させるための構え */
    width: 95%;
    max-width: 1000px;     /* パンくずと合わせる！ */
    margin: 0 auto;        /* 中央に固定！ */
    background-color: var(--color-titlelight);
    display: flex;
    justify-content: center;  /* 蓋ボタンを中央配置 */
    align-items: center;
    height: 3rem;
    /*padding: 0 1rem;       /* パンくずと同じ左右余白 */
  }
.tab-menu, .tab-menu > *, .tab-list, .tab-list > * {  /*checked*/ 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*gap: 1rem;*/
}
.tab-list {  /*checked*/    /* tab-list タブに表示するメニュー名 */
    display: flex;
    flex-direction: row;
    gap: 1.5rem;                /* 追加：蓋と蓋の間に美しき間隔 */
    border-bottom: 2px solid #ccc;
    min-width: 180px;
    padding: 0;
    margin: 0 0 1rem 0;         /* ←marginの下余白は残してもOK */
    list-style: none;
    overflow-x: auto;
    flex-wrap: nowrap;
}  
.tab-list li {  /*checked*/ 
    color: #ffffff;                     /* 白文字 */
    background-color: transparent;     /* 青帯と一体に見せる */
    padding: 0.5rem 0.75rem;           /* 親方様の寸法を優先 */
    cursor: pointer;
    border-bottom: 3px solid transparent; /* 選ばれし蓋用の装飾土台 */
    /*min-width: 100px;  ← 蓋の幅を確保 
    flex: none;*/
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;          /* 全体の変化を滑らかに */
}
.tab-list li:hover {  /*checked*/ 
    color: #a403fa;
}
.tab-list li.active {  /*checked*/ 
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 4px; /* ← この一行が“ちびっとの間”を生む！ */
}
.tabArea-container {
    position: relative;
  }
.book-card {  /*参考文献表示用*/
  background-color: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.book-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-title);
  margin-bottom: 0.5rem;
}

.book-meta {
  font-size: 0.95rem;
  color: var(--color-subtitle);
  margin-bottom: 0.5rem;
}

.book-comment {
  font-style: italic;
  color: #555;
  margin-bottom: 0.5rem;
}

.book-genre {
  font-size: 0.85rem;
  color: #999;
}

#swipe-hint {/* 📱 移動電話のみ布令を表示 */
    display: none;
  }

    @media (min-width: 769px) and (max-width: 1024px) {   /* 📱 電子計算板（タブレット）向け構え（769〜1024px） */
        .tab-container {  /*checked*/ 
            max-width: 90%;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
        }
        .tab-menu {  /*checked*/ 
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            position: relative;
        }
        .tab-list {  /*checked*/ 
            flex-direction: row;
            overflow-x: auto;
        }
        .tab-list li {  /*checked*/ 
            flex: 0 0 auto;
        }
        .tab-link {  /*checked*/ 
            white-space: nowrap;
        }
        .tab-contents {  /*checked*/ 
            border-left: none;
            border-top: 1px solid rgb(15, 172, 207);
            padding: 1rem;
        } }

/*===========accordion ==============*/
/* 2025-06-14 忠正完全律法適用済 */

        @media (min-width: 1025px) {  /*PCなら手風琴は非表示*/
        .accordion-wrapper { display: none; }
        }

        @media (max-width: 1024px) {
        .tab-container { display: none; }
        }

/*     @media (min-width: 769px) { /* ✅ PC/タブレット：蓋構造 表示 / 手風琴 非表示 
        .accordion-wrapper {
            display: none;
        }
        .tab-container {
            display: block;
        }
        } */

    @media (max-width: 1024px) {  /* ✅ 移動電話：蓋構造 非表示 / 手風琴 表示 */
        .accordion-wrapper.container-standard {
            max-width: none;
            /* width: calc(100% - 20px);  画面全体 - 左右10pxずつの余白 */width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding: 0; /* 必要ならここもリセット可 */
            margin-top: 30px;
        }
        .accordion-wrapper {
            display: block;
            margin-top: 1.5rem;
            width: 95%;
        }
        .tab-container {
            display: none;
        }

        .accordion-item {
            border-bottom: 1px solid #ddd;
            padding: 0.5rem 0;
            width: 100%;
        }

        .accordion-header {
            background: #f2f2f2;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            font-weight: bold;
            border: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
        }

        .accordion-header[aria-expanded="true"] {
            background-color: #e6e6e6;
        }

        .accordion-content {
            display: none;
            padding: 0.75rem 1rem;
            background: #fff;  
            padding-left: 0 !important;
            padding-right: 0 !important;      
        }
        .accordion-content.show {  /*これを加筆*/ 
            display: block;
        }
        .article-block {
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .accordion-content .article-block {
            margin-bottom: 1rem;
        }
        /* 開いた状態の表示 */
        .accordion-item.open .accordion-content {
            display: block;
        }
        .accordion-content[hidden] {
            display: none;
        }

        .accordion-content:not([hidden]) {
            display: block;
        }
        }


body[data-page="iaj_tabT"] .tab-container {
    padding-top: 80px !important; /* ← 60pxのNavbar高さ + α */
    position: relative;
    z-index: 1; /* ← 他と干渉しなければOK */     /* Navbarの z-index: 1030 より高く設定 */
    min-height: 60vh; /* ビューポートの6割を確保！ */
}
/* タブ内記事部部 */
.article-bind {  /*checked*/  /* 🪢 親方様御命名：article-bind（束ねる者） */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 各段（小箱）にゆとり */
  }
.article-block {  /*checked*/   /* 🍡 article-block（束ねられる小箱） */
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    padding: 1rem;
    /*border-radius: 8px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); */
}
.article-block ul {
    padding-left: 1.5rem;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
.article-block img {  /*checked*/  /* 絵：団子の顔部分！ */
    width: 200px;
    flex-shrink: 0;
    /*border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}  
.article-block p {  /*checked*/  /* 文：団子の物語部分！ */
    margin: 0;
    line-height: 1.6;
}
.article-block-group {
    display: block;
    width: 100%;
  }
  
.inline-img {  /*checked*/   /* 記事用画像 */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    width: 300px;
    pointer-events: auto;
}
.float-image {  /*checked*/ 
    float: left;
    max-width: 300px;
    width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    margin-right: 2rem;   /* ← 横の余白を広げる */
    margin-bottom: 1rem;  /* ← 縦にも少し余白 */
}
    @media (max-width: 768px) { /*📏 768px以下（移動電話）用：縦並びに戻す */
        .float-image {  /*checked*/ 
            float: none;
            display: block;
            margin: 0 auto 1rem auto;
        } }  
.inline-img.float-image {  /*checked*/  /* 浮楼島の職（float-image） */
    float: left;
    display: inline;
    margin: 0 1rem 1rem 0;
    width: 40%;
    max-width: 300px;
    cursor: pointer;
    pointer-events: auto;
}
    /* タブ内のmodal 画像拡大時 */
.image-modal {  /*checked*/ 
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999 !important;
}
.modal-image {  /*checked*/ 
    max-width: 90%;
    max-height: 90%;
    z-index: 10000 !important;
}
.modal-close {  /*checked*/ 
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}  
.modal-body {  /*checked*/ /* Cardの拡大用Modal */    
    padding: 1.5rem;
    background-color: #ffffff;
    color: var(--color-text, #333);
    font-size: var(--font-base);
    line-height: var(--line-height-base);
    border-top: 1px solid #ccc;
    z-index: 1250;
}  
.bs-table-wrapper {  /*checked*/ /* 通常のテーブル構え */
    overflow-x: auto; /*新*/
    padding: 1em;
    background-color: #f0fffd; /*新：背景は少し温かみある白 */
    display: block;
    overflow: hidden;
  }
.mobile-cards {  /*checked*/ 
    display: none;
}    
    @media screen and (max-width: 768px) { /*📏 768px以下（移動電話）*/
        .bs-table-wrapper {  /*checked*/ 
            width: 100% !important;      /* 器は画面いっぱいに*/ 
            /*overflow-x: auto;             横スクロールを許す */
            /*-webkit-overflow-scrolling: touch;  iOS対策（ぬるぬる）*/ 
            display: none;    /* スマホでは表は非表示 */ 
            /*margin-bottom: 2em;*/
         }   
        .tab-content {  /*checked*/   /* tab-content 内の封印解除 */
          padding-bottom: 4em;
        }
        .mobile-cards {  /*checked*/ 
            display: block;
            padding: 1em;
          }
        .mobile-card {  /*checked*/ 
            border: 1px solid #ccc;
            border-radius: 12px;
            padding: 1em;
            margin-bottom: 1.5em;
            background-color: #fdfdfd;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }
        .mobile-card h3 {  /*checked*/ 
            font-size: 1.2em;
            margin-bottom: 0.8em;
            color: #2a2a2a;
        }
        .mobile-card ul {  /*checked*/ 
            list-style: none;
            padding: 0;
            margin: 0 0 1em 0;
        }
        .mobile-card ul li {  /*checked*/ 
        padding: 0.4em 0;
        border-bottom: 1px solid #e5e5e5;
        font-size: 0.95em;
        }
        .mobile-card .course-time {  /*checked*/ 
            text-align: right;
            font-weight: bold;
            color: #281077;
        }
        .mobile-card .course-price {  /*checked*/ 
            text-align: right;
            font-weight: bold;
            color: #333;
        }
    /* フッターを下に押し出す構え */
        body {  /*checked*/ 
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }}
.bs-table {  /*checked*/  /*tab内・サービス一覧表 bs=Bootsrap */
    width: 80%;
    border-collapse: collapse;
    font-size:var(--font-small);
    margin: 0 auto;         /* ✨中央寄せの本丸✨ */
    display: table;         /* 念のため明示（ブラウザ補完） */
}
.bs-table caption {  /*checked*/ 
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-align: left;
}
.bs-table th, .bs-table td {  /*checked*/ 
    border: 1px solid #ccc;
    padding: 0.6em 0.8em;
    text-align: center;
    }
.bs-table tbody tr:nth-child(odd) {  /*checked*/   /* 交互の行色（しましま） */
    background-color: #ffffff; /*新：交互の灰色 */
}
.bs-table tbody tr:nth-child(even) {  /*checked*/   /* 交互の行色（しましま） */
background-color: #f5f5f5; /*新：交互の灰色 */
}
.bs-table th.col-a, .bg-A {  /*checked*/  /* ヘッダー列の色 */
    background-color: var(--bg-a); 
} 
.bs-table th.col-b, .bg-B {  /*checked*/  
    background-color: var(--bg-b); 
}
.bs-table th.col-c, .bg-C {  /*checked*/ 
    background-color: var(--bg-c); 
}
.bs-table th.col-d, .bg-D {  /*checked*/  
    background-color: var(--bg-d); 
}
.bs-table th.col-label {  /*checked*/   /* 行ラベル列の見出し色 */
    background-color: #e0e0e0; /*新*/
    font-weight: bold;
    text-align: left;
}
.bs-table .row-label {  /*checked*/ 
    font-weight: bold;
    text-align: left;
} 
.bs-table .sessiontime-row td {  /*checked*/   /* 最終行の料金（太字） */
    font-weight: bold;
    background-color: #0a487e; /*新*/
}
.bs-table .price-row td {  /*checked*/   /* 最終行の料金（太字） */
    font-weight: bold;
    background-color: #f0f8ff; /*新*/
}
.legend {  /*checked*/   /* 凡例スタイル */
    font-size: 0.9em;
    margin-top: 1em;
    color: #444;
} 
    @media screen and (max-width: 768px) { /*📏 768px以下（移動電話）*/ 
        .bs-table {  /*checked*/  /* テーブルは非表示 */
            display: none; /*新*/
        }   
        .mobile-cards {  /*checked*/  /* モバイルカード構成（仮構え） */
            display: block; /*新*/
        }
        .mobile-card {  /*checked*/ 
            border: 1px solid #ccc; /*新*/
            border-radius: 0.5em; /*新*/
            padding: 1em; /*新*/
            margin-bottom: 1em; /*新*/
            background-color: #fff; /*新*/
        }
        .mobile-card h3 {  /*checked*/ 
            font-size: 1.1em; /*新*/
            margin-top: 0; /*新*/
        }
        .mobile-card ul {  /*checked*/ 
            padding-left: 1em; /*新*/
        }
        .mobile-card li {  /*checked*/ 
            margin-bottom: 0.4em; /*新*/
        }
    }
/* ======================================== ◆◆◆ 🕰️ タイムライン領域 ◆◆◆ =========================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.b-timeline {
    padding: 50px 20px;
    margin: 0 auto;
    max-width: 1000px;
    color: var(--roylalbrue);
  }
  
  .b-timeline ol {
    position: relative;
    list-style: none;
    padding-left: 0px; /* ← 横線と縦線の位置分だけスペース確保！ */
  }
  
  .b-timeline ol::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--roylalbrue);
  }
  
  .b-timeline ol li .b-item-inner {
    padding: 20px 180px;
    margin-bottom: 4vh; /*8vh がオリジナル*/
    text-align: left;  /* ★これを追加で解決！ */
  }
  
  .b-timeline ol li .b-time-wrapper {
    position: relative;
    font-size: 1.5rem; /* 4.5rem */
    font-weight: bold;
    line-height: 0.9;
  }
  
  .b-timeline ol li .b-time-wrapper::before,
  .b-timeline ol li .b-time-wrapper::after {
    content: "";
    position: absolute;
    background: var(--redpurple);
  }
  
  .b-timeline ol li .b-time-wrapper::before {
    top: 50%;
    left: -180px;
    transform: translateY(-50%);
    width: 0;
    height: 3px;
    transition: width 0.8s linear;
  }
  
  .b-timeline ol li .b-time-wrapper::after {
    top: calc(50% - 8px);
    left: -60px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transform: scale(0);
    transform-origin: left center;
    transition: all 0.4s linear;
  }
  
  .b-timeline ol li time,
  .b-timeline ol li .b-details > * {
    opacity: 0;
    transition: 0.5s;
  }
  
  .b-timeline ol li time {
    display: inline-block;
    transform: translateY(-30px);
  }
  
  .b-timeline ol li .b-details > * {
    transform: translateY(30px);
  }
  
  .b-timeline ol li .b-details h3 {
    font-size: 1rem; /*1rem*/
    line-height: 1;
    margin: 15px 0;
  }
    @media screen and (min-width: 769px) { /*📱 768px以下（移動電話）*/ 
        .timeline {
            display:none;
        }
    }
    @media screen and (max-width: 768px) { /*📏 768px以下（移動電話）*/ 
        .b-timeline{
            display: none;
        }
        time{
            font-size: var(--font-large);
            font-weight: bold;
        }
        .timeline {
            position: relative;
            margin-left: 1.5em;
            padding-left: 1em;
            border-left: 2px solid #8dd2c5;
        }

        .timeline-step {
            position: relative;
            margin-bottom: 2rem;
            padding-left: 3px;
        }

        .timeline-step::before {
            content: attr(data-step);
            position: absolute;
            left: -2.1em;
            top: 0;
            width: 2em;
            height: 2em;
            background: #8dd2c5;
            color: white;
            font-weight: bold;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
  /* ANIMATION STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  
  .b-timeline ol li.b-in-view .b-time-wrapper::before {
    width: 120px;
  }
  
  .b-timeline ol li.b-in-view .b-time-wrapper::after {
    transition-delay: 0.8s;
    transform: scale(1.5);
  }
  
  .b-timeline ol li.b-in-view time,
  .b-timeline ol li.b-in-view .b-details > * {
    opacity: 1;
    transform: none;
  }
  
  .b-timeline ol li.b-in-view time {
    transition-delay: 1.3s;
  }
  
  .b-timeline ol li.b-in-view .b-details h3 {
    transition-delay: 1.5s;
  }
  
  .b-timeline ol li.b-in-view .b-details p {
    transition-delay: 1.7s;
  }
  
  .b-init::before {
      content: "";
    }
/* ============================================ ◆◆ Footer ◆◆ ============================================ */    
.footer-section {  /*checked*/ 
    background: linear-gradient(180deg, #342862 0%, #110336 100%);
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
  }
.footer-container {  /*checked*/ 
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
} 
.footer-item-wrapper {  /*checked*/ 
    display: flex;
    justify-content: center;
    gap: 5rem; /* ← 左右に広く配置 */
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
.footer-item {  /*checked*/ 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.footer-title {  /*checked*/  /* セクションの中の見出し*/
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
    color: #fff;
}
.footer-links {  /*checked*/ 
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
} 
.footer-links a {  /*checked*/ 
    color: white;
    text-decoration: none;
    padding-left: 1rem; /* ← 文字の整列感UP */
}
.footer-links a:hover {  /*checked*/ 
    text-decoration: underline;
}
.footer-copyright {  /*checked*/ 
    font-size: 0.75rem;
    color: #ccc;
    text-align: center;
}
.footer-toggle, .footer-copyright-mini { /* 👘 共通スタイルはそのまま維持 */
    display: none; /* デフォルト非表示 */
}
.mobile-footer-toggle {  /*checked*/  /* 📏 768px以下（移動電話） モバイル専用の小型フッター表示 */
    display: none;
    background: linear-gradient(180deg, #342862 0%, #110336 100%);
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    text-align: center;
    cursor: pointer;
} 
.footer-mini {  /*checked*/ 
    display: flex;
    justify-content: space-around;
    font-weight: bold;
} 
.footer-copyright-mini {  /*checked*/ 
    font-size: 0.65rem;
    color: #ffffff;
    margin-top: 0.2rem;
    display: block !important;
    align-items: center;
}
.footer-details.hidden {  /*checked*/   /* フッター詳細を隠す制御 */
    display: none;
}
.footer-link-wrapper {  /*checked*/ 
    text-decoration: none;
    color: inherit;
    display: block;
}
.footer-mini-group {  /*checked*/ 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #fff;
    padding: 0.5rem 1rem;
}
.footer-mini-labels {  /*checked*/ 
    font-weight: bold;
    display: flex;
    gap: 1rem;
} 
.footer-link-wrapper:hover .footer-mini-labels {  /*checked*/ 
    text-decoration: underline;
} /* 📱　ここまで */
    @media (max-width: 768px) {  /* 📏 768px以下（移動電話）のみ表示 */
        .footer-full {  /*checked*/ 
            display: none !important;
        }  
        .footer-mini-group {  /*checked*/ 
            display: block !important;
        } 
        #footer-content.hidden {  /*checked*/ 
            display: none !important;
        }  
        #footer-content {  /*checked*/ 
            display: block !important;
            text-align: center;
        }
        #footer-content .footer-links {  /*checked*/ 
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5em;
            text-align: left;
            place-items: center;
        }    
        .footer-section {  /*checked*/ 
            padding-top: 0.5em;
            padding-bottom: 1em;
        } 
        .footer-mini-labels {  /*checked*/ 
            display: flex;
            justify-content: center;   /* ← 中央揃えの主役！！ */
            gap: 2em;                   /* ← 間の余白を少し調整 */
            padding-bottom: 0.3em;     /* ← 見た目の間隔を少しゆとりあるように */
            font-weight: bold;
        }         
        #footer-content .footer-three-cols {  /*checked*/ 
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0.5em 1em;
            padding: 1em;
            justify-items: center;
        }  
        .footer-block {  /*checked*/ 
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.3em;
        }  
        .footer-block a {  /*checked*/ 
            display: block;
            text-align: center;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
        }
        .footer-title {  /*checked*/ 
            font-weight: bold;
            text-align: center;
            text-decoration: underline;
            margin-bottom: 0.5em;
        }  
        .footer-item {  /*checked*/ 
            text-align: center;
        }
        .footer-item a {  /*checked*/ 
            text-decoration: none;
            color: inherit;
            font-weight: normal;
        }
        .footer-item a:hover {  /*checked*/ 
            text-decoration: underline;
        } 
    }
    @media (min-width: 769px) {  /*📱🏯 769以上（PCやタブレット）*/
        .footer-toggle {  /*checked*/ 
            display: none;
        }
        .footer-full {  /*checked*/ 
            display: block;
        }
        .footer-mini-group {  /*checked*/ 
            display: none !important;  /* 🆕←これを加えれば完全封印！ */
        }
        #footer-content {  /*checked*/ 
            display: none !important;  /* PCではfooter-content非表示 */
        }}
/* =========== LINE entry ======================== */
/* 御用聞き小屋専用定義 */

/* 背景の静音呼吸アニメーション */


 html.line-entry {
  width: 100%;
  height: 100%;
}

body.line-entry {
  background: linear-gradient(45deg, #e7c7fc 0%, #265fb4 100%);
  background-size: 200% 200%;
  height: 100%;
  width: 100%;
  animation: background 6s ease infinite;
}


@keyframes background { 
  0% {
    background-position: 0% 50%;
  }
  
  50% {
    background-position: 100% 50%;
  }
  
  100% {
    background-position: 0% 50%;
  }
}
.line-entry main {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.line-entry h1 {
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.line-entry h2 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  font-size: 1.3rem;
  text-decoration: underline;
}
.line-entry .btn-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}
.line-entry a.btn-primary {
  background-color: #f0f4ef;
  color: #06C755;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  width: 300px;
}
.line-entry p{
    font-size: 0.8rem;
}
.line-entry .box-frame {
  border: 2px solid #cccccc;  /* 線色は品よく薄め */
  border-radius: 8px;         /* 角に柔らかさ */
  padding: 1rem;              /* 内余白 */
  background: #ffffff;        /* 背景色は白のままでも良し */
  margin: 1.5rem 0;           /* 上下に少し余白 */
}

.line-entry .cmnt{
    font-size: 0.8rem;
    font-weight: 500;
}
.line-entry a.btn-primary:hover {
  background-color: #1a252f;
}

.line-entry a.btn-secondary {
  background-color: var(--color-titlelight);
  color:white;
  padding: 0.8rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 800;
  text-align: center;
  width: 300px;
}

.line-entry a.btn-secondary:hover {
  background-color: #51e2ff;
}

.line-entry .note {
  font-size: small;
  margin-top: 2rem;
}
    @media (max-width: 600px) {
    .line-entry main {
        padding: 1rem;
    }
    .line-entry h1 {
        font-size: 1.5rem;
    }
    }