@charset "utf-8";

/* =========================================================
   ▼ サイト全体のベースフォント設定 ▼
   ========================================================= */
/* body, html {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
} */

/* ボタンや入力フォームなどは設定を引き継がないことがあるため個別指定 */
input, button, select, textarea {
    font-family: inherit;
}
/* =========================================================
   スタイルガイド ベース設定 (CSS変数で管理しやすく)
   ========================================================= */


.program_contents {
    /* ▼ メインカラー（画像 image_8c80e5.png より） ▼ */
    --color-primary: #eb5505;

    /* ▼ カラーパレット 濃色（画像 image_8c811f.png 左列より） ▼ */
    --color-red: #f47a7a;      /* 元の --color-primary-hover に該当 */
    --color-blue: #87b3f4;     /* 元の --color-accent に該当 */
    --color-yellow: #ffff8f;   
    --color-green: #9be08c;
    --color-purple: #a897ef;   /* 画像のコードに修正 */
    --color-gray: #dddddd;
    --color-pink:#ffd7fb;

    /* ▼ カラーパレット 薄色・背景用（画像 image_8c811f.png 右列より） ▼ */
    --bg-orange-light:#ffb24d;
    --bg-yellow-light: #fff9e5;
    --bg-green-light: #ecffe9;
    --bg-red-light: #ffebee;
    --bg-blue-light: #e2eaf7;
    --bg-purple-light: #ede1f9;

    /* ▼ テキスト・リンク・その他既存設定 ▼ */
    --text-main: #333333;
    --text-light: #f2f2f2;     /* 画像 image_8c80e5.png と既存設定共通 */
    --text-link: #0064ac;
    
    --bg-gray: #f2f2f2;
    --bg-primary-light: #fff3ee; /* 薄いオレンジ（テーブル見出し等に使用） */
    
    --border-color: #d1d1d1;

    /* ========================================================
       ▼ ここから追加（画像 image_659e81.png の不足分） ▼
       ======================================================== */
    --color-red-strong: #ff0000;    /* 文字装飾カラーの赤 */
    --color-yellow-mid: #ffe05f;    /* 明度中カラーの黄色 */
    --color-brown-mid: #cf9b5b;     /* 明度中カラーの茶色（※画像は #ffe05f の誤植） */
    --bg-yellow-high: #fff6ca;      /* 明度高カラーの黄色 */
    --bg-brown-high: #e8dcc8;       /* 明度高カラーの茶色（※画像は #fff6ca の誤植） */
    /* ======================================================== */

    /* ▼ 基本スタイル ▼ */
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    color: var(--text-main);
    /* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
    line-height: 1.8;
    font-size: 0.9rem;
}

.program_contents .contents{

    margin-bottom: 70px;
}


/* =========================================================
   見出しデザイン (h2 ~ h5)
   ========================================================= */

/* ▼ h2：薄いオレンジ背景 ＋ 左に太いオレンジ線 ▼ */
.program_contents .contents h2 {
    background-color: var(--bg-primary-light);
    border-left: 6px solid var(--color-primary);
    padding: 20px 20px;
    margin-top: 50px;
    margin-bottom: 25px;
    font-size: 23px;
    font-weight: bold;
    line-height: 1.4;
}

/* ▼ h3：薄いグレー背景 ＋ 内側にオレンジ線 ▼ */
.program_contents .contents h3 {
    position: relative; /* ▼ オレンジ線の配置の基準にするため追加 ▼ */
    background-color: var(--bg-gray);
    /* border-left: 5px solid var(--color-primary); は削除します */
    padding: 13px 16px 13px 32px; /* ▼ 左側の余白（32px）を多めにとって線のスペースを確保 ▼ */
    margin-top: 50px;
    margin-bottom: 15px;
    font-size: 19px;
    font-weight: bold;
    line-height: 1.4;
}

/* ▼ 内側のオレンジ線を作る（疑似要素） ▼ */
.program_contents .contents h3::before {
    content: "";
    position: absolute;
    left: 9px; /* グレー背景の左端から12px内側にズラす */
    top: 13px;  /* 上から13px（paddingと同じ値にすると綺麗に揃います） */
    bottom: 13px; /* 下から13px */
    width: 5px; /* 線の太さ */
    background-color: var(--color-primary); /* オレンジ色 */
    /* border-radius: 2px; */
}


/* ▼ h4：グレーの下線 ＋ 左下の一部だけオレンジのアクセント線 ▼ */
.program_contents .contents h4 {
    position: relative; /* アクセント線の基準位置にする */
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    border-bottom: 2px solid var(--border-color); /* 全体のグレー下線 */
}
/* 左下のオレンジの線（::afterで作成し、グレーの線の上に重ねる） */
.program_contents .contents h4::after {
    content: "";
    position: absolute;
    bottom: -2px; /* グレーの下線にぴったり重ねる */
    left: 0;
    width: 75px; /* オレンジ線の長さ（お好みで調整可） */
    height: 2px;  /* オレンジ線の太さ */
    background-color: var(--color-primary);
}

/* ▼ h5：グレーの点線下線 ▼ */
.program_contents .contents h5 {
    padding-bottom: 8px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    border-bottom: 2px dotted #bbbbbb; /* 画像に合わせた少し濃いめのグレー点線 */
}
/* =========================================================
   テキスト・リンク・リスト
   ========================================================= */
.program_contents p {
    margin-top: 0 !important;
    margin-bottom: 1.2rem !important;
}

.program_contents a {
    color: var(--text-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.program_contents a:hover {
    text-decoration: underline;
    color: var(--color-primary)!important;
}

.program_contents .contents ul, 
.program_contents .contents ol {
    margin: 0 0 2rem 1.5rem;
    padding-left: 1rem;
}
.program_contents .contents ol ul{
margin-top: 10px;

}
/* ▼ すべての ol の中にある ul の設定を「普通の箇条書き」にリセットする ▼ */
.program_contents .contents ol ul li {
    list-style-type: disc !important; /* 強制的にブラウザ標準の黒丸にする */
    margin-left: 0 !important;    /* 少し右にずらして見やすくする */
    margin-bottom: 0.5em !important; 
    padding-left: 0; /* 行間を少しあける */
}

/* ▼ 親の ol が無理やり作っている「数字」を強制的に消し去る ▼ */
.program_contents .contents ol ul li::before {
    display: none !important;
    content: none !important;
}

/* tableの中のときのCSS（追加分） */
.program_contents .contents table ul, 
.program_contents .contents table ol {
    margin: 0;
}

.program_contents .contents li {
    margin-bottom: 0.5rem;
}

/* カウンターをセットするOLのクラス */
.program_contents .contents ol.custom-counter {
    list-style: none; /* デフォルトの数字を非表示 */
    padding-left: 0;
    /* CSS変数 '--start' の値でリセット。指定がなければ 0 (つまり1スタート) */
    counter-reset: custom-list-counter var(--start, 0);
}

/* 各リストアイテムの設定 */
.program_contents .contents ol.custom-counter > li {
    position: relative;
    padding-left: 1em;/* 数字とテキストの余白 */
    counter-increment: custom-list-counter; /* カウンターを1増やす */
    margin-bottom: 0.5em;
}

/* 数字の装飾と配置 */
.program_contents .contents ol.custom-counter > li::before {
    content: counter(custom-list-counter) ". "; /* 「数字. 」の形式で出力 */
    position: absolute;

    font-weight: bold; /* お好みで太字に */
}


/* 文字装飾 */
.program_contents .red_b {
    color: #ff0000;
    font-weight: bold;
}

.program_contents .red_b_under {
    color: #ff0000;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
}


.program_contents .red_yellowbg {
    color: #ff0000;
    font-weight: bold;
    background-color: var(--color-yellow);
}


.program_contents .black_pinkbg {
    font-weight: bold;
    background-color: var(--color-pink);
}


/* ▼ スマホ画面（767px以下）の時の調整 ▼ */
@media screen and (max-width: 767px) {
    .program_contents .contents ul, 
    .program_contents .contents ol {
        margin-left: 0 !important;
    }
}

/* =========================================================
   シンプルなリストのカスタマイズ（HTML変更なし）
   ========================================================= */

/* ▼ 番号なしリスト（ul）の「●」を大きくする ▼ */
.program_contents .contents ul {
  list-style: none; /* デフォルトの中丸を非表示 */
  padding-left: 0;   /* パディングをリセット */
}

.program_contents .contents ul li {
  position: relative; /* 疑似要素の配置基準 */
  padding-left: 1.2em;   /* アイコンとテキストの間隔（お好みで調整） */
  margin-bottom: 5px;  /* 行間の調整 */
  color: var(--text-main, #333333); /* テキストメイン色 */
}

/* （図形で丸を描画する確実な方法） */
.program_contents .contents ul li::before {
  content: ""; /* ★文字の「●」は入れず、空の箱にする */
    position: absolute;
    left: 0;
    
    /* ▼ 位置の調整（文字サイズが大きくなっても1行目の中央に追従） */
    top: 13px; 
    transform: translateY(-50%);
    
    /* ▼ 丸の大きさと色（図形として描画） */
    width: 7px;  /* ★丸の横幅（大きくしたい場合は8pxなどに） */
    height: 7px; /* ★丸の縦幅（横幅と同じ数値にする） */
    background-color: #333; /* ★丸の色（濃いグレー） */
    border-radius: 50%; /* ★箱の角を丸めて「きれいな円」にする */
}

/* ▼ 番号リスト（ol）の番号だけ太字にする ▼ */
.program_contents .contents ol {
  list-style: none;       /* デフォルトの番号を非表示 */
  counter-reset: li-counter; /* カウンターをリセット */
  padding-left: 0;         /* パディングをリセット */
}

.program_contents .contents ol li {
  position: relative;      /* 疑似要素の配置基準 */
  padding-left: 1em;       /* 番号とテキストの間隔（お好みで調整） */
  margin-bottom: 5px;      /* 行間の調整 */
  color: var(--text-main, #333333); /* テキストメイン色 */
}

/* 疑似要素とCSSカウンターで番号だけを表示し、太字にする */
.program_contents .contents ol li::before {
  content: counter(li-counter) "."; /* カウンターとドットを表示 */
  counter-increment: li-counter;      /* カウンターを進める */
  font-weight: bold;                  /* 番号だけ太字にする（これが重要） */

  position: absolute;                /* 絶対配置 */
  left: -8px;                          /* 左端に配置 */
  top: 0;                            /* 上端に配置 */
  line-height: inherit;               /* liの行間と合わせる（line-height:1.6なら1.6に） */
  text-align: right;                  /* 番号を右揃えに（1.、10.などで揃えるため） */

}



/* =========================================================
   目次 (Table of Contents)
   ========================================================= */
.program_contents .content_list {
    background: #ffffff;
    border: 1px solid var(--border-color);
    
    padding: 1.5rem 2rem;
    
    margin-bottom: 2rem;
    display: inline-block;
    min-width: 60%;
    font-size: 0.8rem;
}

.program_contents .content_list strong {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

/* =========================================================
   目次タイトルのデザイン
   ========================================================= */
.program_contents .content_list .toc-title strong {
    display: flex;
    align-items: center;
    font-size: 18px; /* 文字の大きさ（お好みで調整してください） */
    color: var(--text-main, #333333);
    margin-bottom: 16px; /* 下のリストとの隙間 */
}

/* ▼ オレンジのリストアイコンの装飾 ▼ */
.program_contents .content_list .toc-title .toc-icon {
    color: var(--color-primary, #eb5505); /* オレンジ色に設定 */
    font-size: 1.2em;   /* 文字よりも少しだけアイコンを大きくする */
    margin-right: 10px; /* アイコンと「目次」という文字の隙間 */
}

/* =========================================================
   目次（.content_list）内のリストデザイン
   ========================================================= */

/* ▼ 第1階層（1. 2. 3. ...）の設定 ▼ */
.program_contents .content_list ol {
    list-style: none;
    counter-reset: toc-counter;
    padding-left: 0;
    margin: 0;
}

/* 直下の子要素（1階層目のli）のみに適用する */
.program_contents .content_list ol > li {
    position: relative;
    padding-left: 1.5em; /* 番号を置くための隙間 */
    margin-bottom: 12px;
}

/* 1階層目の番号デザイン */
.program_contents .content_list ol > li::before {
    content: counter(toc-counter) ".";
    counter-increment: toc-counter;
    font-weight: bold;
    color: var(--text-main, #333333);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.7em;
    text-align: left; /* 先ほどの右揃えを左揃えにリセット */
}


/* =========================================================
   ▼ 第2階層（｜）の設定 ▼ 
   ========================================================= */
/* 「olの中のliの中のul」と厳密に指定 */
.program_contents .content_list ol > li > ul {
    list-style: none !important; /* 全体ルールの黒丸設定を打ち消す */
    padding-left: 0.5em; 
    margin-top: 8px;     
    margin-bottom: 12px;
}

/* 第2階層のli */
.program_contents .content_list ol > li > ul > li {
    list-style-type: none !important; /* 黒丸を消す */
    margin-left: 0 !important;        /* 全体ルールのインデントを打ち消す */
    position: relative;
    padding-left: 12px; 
    margin-bottom: 0 !important;
}

/* 2階層目の「｜」デザイン（復活！） */
.program_contents .content_list ol > li > ul > li::before {
    content: "" !important;      /* 全体ルールの content: none を打ち消す */
    display: block !important;   /* 全体ルールの display: none を打ち消す */
    position: absolute;
    left: 0;
    top: 10px;  /* ご自身で調整された数値をそのまま使用 */
    width: 1px;  
    height: 38px; 
    background-color: var(--border-color, #ccc); /* ※念のため色が出ない時用に#cccを補欠で追加 */
    border-radius: 1px; 
}

/* =========================================================
   ▼ 第3階層（・）の設定 ▼ 
   ========================================================= */
/* 「ol > li > ul > li > ul」とさらに厳密に指定 */
.program_contents .content_list ol > li > ul > li > ul {
    list-style: none !important; /* ← 追記：全体ルールを打ち消す */
    padding-left: 16px; 
    margin-top: 8px;
    margin-bottom: 0;
}

/* 第3階層のli */
.program_contents .content_list ol > li > ul > li > ul > li {
    list-style-type: none !important; /* ← 追記：黒丸を消す */
    margin-left: 0 !important;        /* ← 追記：インデントをリセット */
    position: relative;
    padding-left: 16px; /* 「・」とテキストの隙間 */
    margin-bottom: 0 !important;    /* ← 追記：行間を死守する */
}

/* 3階層目のデザイン（「・」にする） */
.program_contents .content_list ol > li > ul > li > ul > li::before {
    content: "" !important;       /* ← 追記：content:noneを打ち消す */
    display: block !important;    /* ← 追記：非表示を解除する */
    position: absolute;
    left: 0;
    top: 0.8em;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: #333;
    border-radius: 50%;
}

/* =========================================================
   リンク誘導ブロックのデザイン
   ========================================================= */
.program_contents .contents .guide-link-block {
    margin-bottom: 32px; /* ブロック同士の余白 */
    margin-left: 1.5rem;
}

/* ▼ 上部のテキスト（オレンジの逆三角形つき） ▼ */
.program_contents .contents .guide-link-block .block-title {
    position: relative;
    padding-left: 24px; /* アイコンを置くスペース */
    font-size: 16px;
    font-weight: bold;
    color: var(--text-main, #333333);
    margin: 0 0 8px 0!important; /* 下のリンクとの隙間を8pxに設定 */
    line-height: 1.5;
}

/* 逆三角形（CSSのボーダー機能を使って図形を描画します） */
.program_contents .contents .guide-link-block .block-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px; /* テキストの高さに合わせて微調整 */
    
    /* ▼ CSSで逆三角形を作る魔法のコード ▼ */
    width: 0;
    height: 0;
    border-left: 7px solid transparent;  /* 左の透明な削り */
    border-right: 7px solid transparent; /* 右の透明な削り */
    border-top: 10px solid var(--color-primary, #eb5505); /* 上からオレンジ色を塗る */
}

/* ▼ 下部のリンクテキスト ▼ */
.program_contents .contents .guide-link-block .block-url {
    padding-left: 24px; /* 上のテキストと開始位置をピッタリ揃える（重要） */
    margin: 0;
    line-height: 1.5;
}

/* リンクの通常時の設定（黒文字＋下線） */
.program_contents .contents .guide-link-block .block-url a {
    color: var(--text-main, #333333); 
    text-decoration: underline; 
    text-underline-offset: 0px; /* 下線と文字の隙間を少し開けると今風で読みやすくなります */
    transition: all 0.2s ease;  /* ホバー時にフワッと色を変える */
}

/* リンクのマウスホバー時の設定（画像のようにオレンジ色にする） */
.program_contents .contents .guide-link-block .block-url a:hover {
    color: var(--color-primary, #eb5505);
    text-decoration-color: var(--color-primary, #eb5505); /* 下線の色もオレンジに */
}

/* ▼ スマホ画面（767px以下）の時の調整 ▼ */
@media screen and (max-width: 767px) {
    .program_contents .contents .guide-link-block {
        margin-left: 0 !important;
    }
}



/* =========================================================
   レイアウト (画像+テキスト / 動画・目次)
   ========================================================= */
.program_contents .img_txt {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

/* ★ CSS変数「--w」を使って、基本は50%、指定があればその%になるように設定 */
.img_txt .img_area,
.img_txt .txt_area,
.img_txt .movie_side {
    flex: 1 1 calc(var(--w, 50%) - 1rem); /* --wの指定がなければ50% */
    min-width: 0; /* 300pxの制限を解除して自由に縮小可能に */
    box-sizing: border-box;
}

.img_txt .img_area img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
}

.img_txt.r_side {
    flex-direction: row-reverse;
}

/* 動画共通 */
.cont_movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    /* border-radius: 8px; */
    overflow: hidden;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
    margin-bottom: 2rem;
    background: #000; /* 読み込み前のチラつき防止 */
}

.cont_movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* =========================================================
   背景色ボックス (Background Boxes)
   ========================================================= */
.bg_05 { background: var(--bg-gray); }
.bg_06 { background: var(--bg-yellow); }
.bg_07 { background: var(--bg-blue); }

.bg_05, .bg_06, .bg_07 {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0;
}

.bg_05 p:last-child,
.bg_06 p:last-child,
.bg_07 p:last-child {
    margin-bottom: 0;
}

/* インデント付き設定箇所など */
.indent {
    padding-left: 2.5em;
    text-indent: -2.5em;
}
.setting {
    vertical-align: middle;
    width: 24px;
    margin-right: 0.5em;
}

/* 引用 (Blockquote) */
.program_contents blockquote {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 3rem;
    background: var(--bg-gray);
    border-left: 4px solid #ccc;
    border-radius: 0 8px 8px 0;
    color: #555;
    margin-bottom: 2rem;
}

.program_contents blockquote::before {
    content: "“";
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 3rem;
    color: #ccc;
    line-height: 1;
    font-family: serif;
}

.program_contents blockquote p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   テーブル (Tables) - 横スクロール＆全パターン対応
   ========================================================= */
/* テーブル全体のラッパー（はみ出たら横スクロールさせる） */
.program_contents .outer {
    width: 100%;
    max-width: 100%; /* 親の幅を絶対に超えないように念押し */
    box-sizing: border-box; /* パディングやボーダーを含めて100%に収める */
    overflow-x: auto; /* ★ここがスライド（スクロール）の要 */
    -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロール */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */
    /* border-radius: 8px; */
    background: #fff;
    margin-bottom: 2.5rem;
}

/* スクロールバーの見た目を少し綺麗にする（任意） */
.program_contents .outer::-webkit-scrollbar {
    height: 8px;
}
.program_contents .outer::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* テーブル本体 */
.program_contents .outer table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--border-color);
    background: #fff;
}

/* セル（th, td）の共通リセット */
/* セル（th, td）の共通リセット */
.program_contents .outer th, 
.program_contents .outer td {
    padding:0.5rem 1.3rem !important;
    text-align: left !important;
    vertical-align: middle !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important; /* 横線 */
    border-right: 1px solid var(--border-color) !important;  /* ★薄い縦線を追加 */
    white-space: nowrap;
}

.program_contents .outer th p, 
.program_contents .outer td p {
    margin-bottom: 0 !important;
}

/* 一番右の列の縦線を消す（外枠を綺麗に見せるため） */
.program_contents .outer th:last-child,
.program_contents .outer td:last-child {
    border-right: none !important;
}

/* --- 上部：列見出し（thead th または tr.bg_01 th） --- */
.program_contents .outer thead th,
.program_contents .outer tr.bg_01 th {
    background-color: var(--bg-primary-light) !important; /* 薄いオレンジ */
    color: #333 !important;
    font-weight: bold;
    /* border-bottom: 2px solid var(--color-primary) !important; */
}

/* --- 左側：行見出し（tbody th または th.bg_02） --- */
.program_contents .outer tbody th,
.program_contents .outer th.bg_02 {
    background-color: var(--bg-gray) !important;
    font-weight: bold;
    color: var(--text-main) !important;
    border-right: 1px solid var(--border-color) !important; /* ★点線(dashed)から通常の実線(solid)に統一して綺麗に */
}

/* 最後の行の下線を消す */
.program_contents .outer tr:last-child th,
.program_contents .outer tr:last-child td {
    border-bottom: none !important;
}
/* ホバー（マウスオーバー）時のふんわりハイライト（薄いオレンジ） */
.program_contents .outer tbody tr:hover > td,
.program_contents .outer tbody tr:hover > th {
    background-color: #fff6f6 !important; 
    transition: background-color 0.2s ease;
}


/* =========================================================
   スクロールさせない（折り返しを許可する）テーブル
   ========================================================= */
/* HTML側で div class="outer no_scroll" と指定した場合のみ適用 */
.program_contents .outer.no_scroll th,
.program_contents .outer.no_scroll td {
    white-space: normal !important; /* 文字の折り返しを許可する */
    word-break: break-word !important; /* 長い英数字やURLも枠内で強制的に折り返す */
    line-height: 1.6 !important; /* 複数行になった時に入り組まないよう行間を少し広げる */
}

/* =========================================================
   ▼ スマホ画面（767px以下）では「スクロールなし」を解除して横スクロールさせる
   ========================================================= */
@media screen and (max-width: 767px) {
    .program_contents .outer.no_scroll th,
    .program_contents .outer.no_scroll td {
        white-space: nowrap !important; /* スマホ時は折り返しを解除し、はみ出させる */
    }
}


/* =========================================================
   ▼ 追加：ドラッグスクロール用のカーソル設定
   ========================================================= */
/* スクロールありのテーブルは「開いた手」 */
.program_contents .outer:not(.no_scroll) {
    cursor: grab;
}

/* クリックして掴んでいる最中（またはJSで active クラスが付与された時）は「閉じた手」 */
.program_contents .outer:not(.no_scroll):active,
.program_contents .outer.active {
    cursor: grabbing;
}

/* テーブル内の文字はドラッグ選択しにくくなるため、基本は選択不可にする（操作性向上のため） */
.program_contents .outer:not(.no_scroll) table {
    user-select: none;
}





/* =========================================================
   ホバー（色変化）を無効にするオプション
   ========================================================= */
/* outer に no_hover を付けた時は、「直下のテーブルだけ」色を変えない */
.program_contents .outer.no_hover > table > tbody > tr:hover > td {
    background-color: transparent !important; 
}
.program_contents .outer.no_hover > table > tbody > tr:hover > th {
    background-color: var(--bg-gray) !important; /* 左側見出しのグレーを維持 */
}





/* =========================================================
   ボタン (Buttons)
   ========================================================= */
.c_center {
    text-align: center;
}

.c_center.c_btn {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.program_contents .link_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding:0.7rem 2rem;
    font-weight: bold;
    text-decoration: none !important;
    background: #fff;
    background-color: var(--color-primary);
    color: #fff!important;
    transition: all 0.3s ease;
    margin: 1rem 0;
    border-radius: 3px;
}

.program_contents .link_btn:hover {
    opacity: 0.8 !important;
    transform: translateY(-2px);
    color: #fff!important;
}


/* ボタンカラーバリエーション */
.link_btn.color_b {
    color: #fff!important;
    background-color: var(--color-purple);
}
.link_btn.color_b:hover {
    background: var(--color-purple);

    color: #fff!important;
}

/* =========================================================
   ページャー (前後の記事へ)
   ========================================================= */
.program_contents .pager {
    display: flex !important;              /* ★!importantを追加 */
    flex-direction: row !important;        /* ★追加：いかなる時も絶対に横並びにする */
    flex-wrap: nowrap !important;          /* 絶対に改行させない */
    justify-content: center !important; 
    gap: 120px; 
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 40px 0 !important; 
}

/* ▼ スマホ画面での微調整 ▼ */
@media screen and (max-width: 767px) {
    .program_contents .pager {
        gap: 15px !important; /* ★スマホでは画面に収まるように間隔をさらに狭める */
    }
    .program_contents .pager li {
        width: auto !important; /* ★追加：スマホ時に横幅100%になって縦積みされるのを防ぐ */
        flex: 0 1 auto !important;
    }
}

/* ▼ 黒丸（リストマーク）を確実に消す設定 ▼ */
.program_contents .pager li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ▼ テキストのスタイル ▼ */
.program_contents .pager li a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: var(--color-primary, #eb5505) !important; /* オレンジ文字 */
    font-weight: bold !important;
    font-size: 16px !important;
    transition: opacity 0.2s ease !important;
}

.program_contents .pager li a:hover {
    opacity: 0.7 !important; /* マウスホバー時に少し薄くする */
}

/* ▼ 矢印アイコンのベース（四角いオレンジの箱） ▼ */
.program_contents .pager li.previous a::before,
.program_contents .pager li.next a::after {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background-color: var(--color-primary, #eb5505);
    color: #ffffff; /* アイコンを白色に */
    border-radius: 3px;
    font-size: 16px;
    
    /* FontAwesomeを呼び出すための指定 */
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    
    /* ★ホバー時のアニメーション用設定 ★ */
    transition: transform 0.2s ease !important;
}

/* ▼ 黒丸（リストマークや元の::before）を確実に完全に消す設定 ▼ */
.program_contents .pager li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ★ここを追加・変更：元のul li::beforeに打ち勝つ強力な記述★ */
.program_contents .contents ul.pager li::before,
.program_contents .pager li::before {
    content: none !important;
    display: none !important;
}

/* ▼ 「前へ」の左矢印 ▼ */
.program_contents .pager li.previous a::before {
    content: "\f060"; /* FontAwesomeの矢印 */
    margin-right: 12px;
}

/* ★ 「前へ」ホバー時に矢印を左へ動かす ★ */
.program_contents .pager li.previous a:hover::before {
    transform: translateX(-4px);
}

/* ▼ 「次へ」の右矢印 ▼ */
.program_contents .pager li.next a::after {
    content: "\f061"; /* FontAwesomeの矢印 */
    margin-left: 12px;
}

/* ★ 「次へ」ホバー時に矢印を右へ動かす ★ */
.program_contents .pager li.next a:hover::after {
    transform: translateX(4px);
}


/* 資料アイコン */
.doc_icon {
    width: 24px;
    vertical-align: middle;
    margin-right: 0.2rem;
}

/* アンカーリンクのズレ調整（固定ヘッダー対策用） */
.anchor_link {
    display: block;
    padding-top: 60px;
    margin-top: -60px;
    visibility: hidden;
}

/* =========================================================
   レスポンシブ対応 (スマホ用調整)
   ========================================================= */
@media screen and (max-width: 768px) {
    .program_contents {
        padding: 0 15px;
    }
    
    .program_contents .content_list {
        width: 100%;
        min-width: unset;
        box-sizing: border-box;
    }

    .program_contents .img_txt {
        flex-direction: column !important; /* スマホでは左右入れ替えを解除して縦積み */
        gap: 1rem;
    }

    .program_contents .pager {
        flex-direction: column;
        gap: 1rem;
    }
    
    .program_contents .pager li.next {
        text-align: left;
    }
}

/* =========================================================
   横並びレイアウト（目次と動画）の微調整
   ========================================================= */
/* 左右の要素が上端でピシッと揃うようにする */
.program_contents .img_txt {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: flex-start; /* 要素を上揃えに */
}

/* 目次の箱を、左側の横幅いっぱいに広げる */
.program_contents .img_txt .txt_area .content_list {
    width: 100%;
    min-width: 100%; /* 変な縮みを防止 */
    margin: 0; /* 余白をリセット */
    box-sizing: border-box;
}

/* 動画のスクロールバーを隠すための調整 */
.cont_movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    /* border-radius: 8px; */
    overflow: hidden; /* はみ出た部分（スクロールバーなど）を隠す */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
    background: #000;
}

.cont_movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    /* スクロールバーがどうしても消えない場合、少しだけ幅を広げて親要素で切り取る（スクロールバー隠し） */
    width: calc(100% + 20px); 
    height: 100%;
    border: none;
}

/* スマホ表示のときはスクロールバー隠しを解除（スマホは元々バーが細いため） */
@media screen and (max-width: 768px) {
    .cont_movie iframe {
        width: 100%;
    }
}


/* =========================================================
   新しい動画エリア用スタイル（古いCSSとの競合回避用）
   ========================================================= */

.new_cont_movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* ★ここを追加！これで16:9の高さが確保されて動画が現れます */
    display: block;
    background-color: #000; /* 読み込み前のチラつき防止 */
}

/* iframeが古いCSSに引っ張られないようにリセットして強制指定 */
.new_cont_movie iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* 右半分の動画で、不要なスクロールバーを隠す用の調整（スマホでは解除） */
.new_movie_side .new_cont_movie iframe {
    width: calc(100% + 20px) !important;
}
@media screen and (max-width: 768px) {
    .new_movie_side .new_cont_movie iframe {
        width: 100% !important;
    }
}

/* =========================================================
   新しい動画エリア用スタイル（はみ出しを完全に防止）
   ========================================================= */
.new_movie_side {
    overflow: hidden !important; /* カラムの外への飛び出しを防ぐ */
}

.new_cont_movie {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important; /* 16:9の比率を確保 */
    overflow: hidden !important; /* はみ出た部分を確実にカット */
    /* border-radius: 8px !important; */
    background-color: #000;
}

.new_cont_movie iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* calc(100% + 20px) はやめてピッタリ100%に */
    height: 100% !important;
    border: none !important;
}

/* =========================================================
   目次と動画の強制横並び（既存CSSの干渉リセット）
   ========================================================= */
@media screen and (min-width: 768px) {
    .program_contents .img_txt.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    
    .program_contents .img_txt.row > .txt_area,
    .program_contents .img_txt.row > .new_movie_side {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        min-width: 0 !important; /* ★これが重要！中身が大きすぎても強制的に枠内に収める魔法のコード */
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   新しい設定アイコン（歯車）のスタイル
   ========================================================= */
.setting-icon {
    /* これまでのスタイルガイドのメインカラーを適用 */
    color: var(--color-primary); 
    
    /* 文字とのバランスを調整 */
    margin: 0 -0.8rem 0 3.3rem;
    font-size: 1.2rem; /* サイズはお好みで調整してください */
    vertical-align: middle;
}

/* =========================================================
   資料ダウンロードアイコンのスタイル
   ========================================================= */
/* アイコンの共通設定 */
.doc_icon {
    font-size: 1.3rem; /* アイコンの大きさ */

    vertical-align: middle;
    margin-left: 1.5rem;
}

/* ファイル形式ごとのカラー設定 */
.doc_icon_xls {
    color: #53bc76; /* Excelのブランドカラー（緑） */
}

.doc_icon_csv {
    color: #776c93; /* CSV用のカラー（ダークグレー） */
}

.doc_icon_pdf {
    color: #ed3b4d; /* PDFのブランドカラー（赤） */
}

/* ▼ ZIP用のカラーを追加 ▼ */
.doc_icon_zip {
    color: #ed913b; /* ZIPファイル用のカラー（フォルダや圧縮ファイルを連想させるゴールド系） */
}

/* リンクホバー時に少しアイコンを薄くしてクリックできる感を追加 */
.program_contents a:hover .doc_icon {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* =========================================================
   資料ダウンロードリンク自体のスタイル（テキスト部分）
   ========================================================= */
.doc_link {
    color: var(--text-main) !important; /* ベース設定の黒（#333333）で青色を強制上書き */
    font-weight: bold;                  /* 太字にする */
    text-decoration: none;              /* デフォルトの下線を消す（お好みで） */
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
    
}

/* ▼ マウスを乗せた（ホバー）時の動き ▼ */
.doc_link:hover {
    opacity: 0.7;
    /* 黒文字だとリンクだと分かりにくくなることがあるため、ホバー時に下線を出すのがおすすめです */
    text-decoration: underline; 
    text-decoration-color: var(--text-main);
    color: var(--color-primary)!important;

}


/* =========================================================
   関連リンク・関連外部リンクのデザイン
   ========================================================= */

/* ▼ 見出し（pタグに変更・Font Awesomeのタグアイコン付き） ▼ */
.program_contents .contents p.link-heading {
    display: flex;
    align-items: flex-start; 
    font-size: 18px;
    font-weight: bold;
    color: var(--text-main, #333333);
    margin-top: 40px!important;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* タグアイコンの配置 */
.program_contents .contents p.link-heading::before {
    content: "\f02b"; /* Font Awesomeのタグアイコン */
    font-family: "FontAwesome";
    display: block; 
    width: 24px;    /* 箱の幅 */
    margin-right: 10px; 
    flex-shrink: 0; 
    text-align: center; 
    color: var(--color-primary, #eb5505);
    font-size: 20px;
    font-weight: normal;
    line-height: 1; 
    margin-top: 3px; 
}


/* ▼ リンクのリスト全体 ▼ */
.program_contents .contents ul.custom-link-list {
    list-style: none;
    margin: 0 0 32px 0; 
    padding: 0;             
}

/* ▼ リスト項目（オレンジの ＞ つき） ▼ */
.program_contents .contents ul.custom-link-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    line-height: 1.6;
    padding-left: 1.2rem;
}

/* 矢印（＞）の配置 */
.program_contents .contents ul.custom-link-list li::before {
    content: "\f105"; /* Font Awesomeの矢印 */
    font-family: "FontAwesome";
    display: block; 
    top: 5px;
    width: 0px;    /* 見出しのアイコンと全く同じ幅 */
    margin-right: 10px; 
    flex-shrink: 0;
    text-align: center; 
    color: var(--color-primary, #eb5505);
    font-weight: bold;
    font-size: 20px; 
    line-height: 1;  
    /* margin-top: 4px;  */
}

/* リンクテキストの設定 */
.program_contents .contents ul.custom-link-list li a {
    color: var(--text-main, #333333);
    text-decoration: none;
}

.program_contents .contents ul.custom-link-list li a:hover {
    text-decoration: underline;
    opacity: 0.8;
    color: var(--color-primary) !important;
}

/* ▼ 外部リンク専用のアイコン追加 ▼ */
.program_contents .contents .ext-link::after {
    content: "\f08e"; 
    font-family: "FontAwesome";
    display: inline-block;
    margin-left: 6px;
    color: var(--color-primary, #eb5505);
    font-size: 0.9em;
}
/* =========================================================
   スタイルガイド拡張：便利な装飾スタイル
   ========================================================= */

/* 1. ラインマーカー（下半分に色を敷くモダンな設定） */
.program_contents .marker_yellow {
    background: linear-gradient(transparent 50%, #ffff7f 50%);
    font-weight: bold;
}
.program_contents .marker_pink {
    background: linear-gradient(transparent 50%, #ffbfe0 50%);
    font-weight: bold;
}

/* 2. キーボード・操作風（立体感のあるボタン風） */
.program_contents .kbd_style {
    background-color: #f7f9fa;
    border: 1px solid #ccc;
    border-bottom: 3px solid #b5b5b5; /* 下だけ太くして立体感を出す */
    border-radius: 4px;
    display: inline-block;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: bold;
    padding: 0.1em 0.5em;
    white-space: nowrap;
    margin: 0 0.2em;
    color: #333;
}

/* 3. ラベル・バッジ */
.program_contents [class^="badge_"] {
    display: inline-block;
    padding: 0.2em 0.6em;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 4px;
    margin-right: 0.5em;
}
.program_contents .badge_danger { background-color: #de3545; } /* 赤：必須など */
.program_contents .badge_warning { background-color: #ffc107; color: #212529; } /* 黄：注意など */

/* 4. チェックリスト（フォントアイコンを使用） */
.program_contents ul.checklist {
    list-style: none !important;
    padding-left: 0.5rem !important;
}
.program_contents ul.checklist li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.6rem;
}
/* 元の黒丸を消して FontAwesome のチェックマークを配置 */
.program_contents ul.checklist li::before {
    content: "\f00c" !important;
    font-family: FontAwesome !important;
    position: absolute;
    left: -6px;
    top: 1px;
    color: var(--color-primary); /* スタイルガイドのメインカラー */
    font-weight: bold;
    font-size: 1rem;
    width: 0;
    height: 0;
}

/* ulの中にあるolのスタイルを数字（1, 2, 3...）にリセットする */
.program_contents ul ol {
    list-style-type: decimal !important;
   
    margin-top: 0.5rem !important;
}

/* olのliには数字を出すため、li自体のデフォルトスタイルを引き継ぐ */
.program_contents ul ol > li {
    list-style-type: decimal !important;
}

/* もし ul li::before などで独自の「・」やアイコンが設定されている場合、それを消す */
.program_contents ul ol > li::before {
    display: none !important;
    content: none !important;
}




/* 5. おしゃれな区切り線（中央が濃く、両端が消えかけるライン） */
.program_contents hr.custom_hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
    margin: 3rem 0;
}




/* =========================================================
   「ポイント！」用 pタグのスタイル
   ========================================================= */
.point-p {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 0 -0.8rem 0 3.3rem; /* ユーザー様ご指定のマージン */
}

/* ★ピカッと光る電球アイコンのスタイル */
.point-icon {
    color: #ffb700 !important; /* 電球の色を「鮮やかなゴールド（黄色）」に変更 */
    font-size: 1.4rem;
    margin-right: 0.7em;
    
    /* ↓ここが魔法のコード！電球の周りに黄色い光のモヤをつけます */
    text-shadow: 0 0 8px rgba(255, 183, 0, 0.6), 
                 0 0 15px rgba(255, 215, 0, 0.4) !important;
}


/* =========================================================
   さらに便利な拡張スタイル（olリスト、補足ボックス、Q&A）
   ========================================================= */

/* 1. おしゃれな番号付きリスト（ol） */
.program_contents ol.step_list {
    counter-reset: step-counter; /* カウンターをリセット */
    list-style: none !important; /* デフォルトの数字を消す */
    padding-left: 0 !important;
}
.program_contents ol.step_list li {
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: 1.2rem;
    line-height: 1.6;
}
/* 数字を丸いバッジ風に装飾 */
.program_contents ol.step_list li::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    left: 0;
    /* ▼▼▼ ここから修正 ▼▼▼ */
    top: 0.8em; /* ★1行目のテキストの「中央」の高さに合わせる（line-height: 1.6 の半分の値） */
    transform: translateY(-50%); /* ★アイコン自体の高さの半分だけ上に引き上げて、真ん中に合わせる */
    /* ▲▲▲ ここまで修正 ▲▲▲ */
    background-color: var(--color-primary); /* スタイルガイドのメインカラー */
    color: #fff;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
}

/* =========================================================
   ▼ step_list：途中から番号をスタートさせるための設定 ▼ 
   ========================================================= */
/* HTMLの start="○" という記述を読み取って、カウントの開始位置をずらす */
.program_contents ol.step_list[start="2"] { counter-reset: step-counter 1 !important; }
.program_contents ol.step_list[start="3"] { counter-reset: step-counter 2 !important; }
.program_contents ol.step_list[start="4"] { counter-reset: step-counter 3 !important; }
.program_contents ol.step_list[start="5"] { counter-reset: step-counter 4 !important; }
.program_contents ol.step_list[start="6"] { counter-reset: step-counter 5 !important; }
.program_contents ol.step_list[start="7"] { counter-reset: step-counter 6 !important; }
.program_contents ol.step_list[start="8"] { counter-reset: step-counter 7 !important; }
.program_contents ol.step_list[start="9"] { counter-reset: step-counter 8 !important; }
.program_contents ol.step_list[start="10"] { counter-reset: step-counter 9 !important; }



/* 2. アイコン＋文章の補足ボックス（info / alert） */
.program_contents .info_box,
.program_contents .alert_box {
    display: flex;
    align-items: flex-start;
    padding: 1.2rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.program_contents .info_box i,
.program_contents .alert_box i {
    font-size: 1.8rem;
    margin-right: 1rem;
    flex-shrink: 0; /* アイコンが潰れるのを防ぐ */
    margin-top: 0.2rem;
}
.program_contents .info_box p,
.program_contents .alert_box p {
    margin: 0;
    line-height: 1.6;
}

/* info_box のカラー設定（青系） */
.program_contents .info_box {
    background: #fff6f0;
    border-left: 5px solid var(--color-primary);
}
.program_contents .info_box i { color: var(--color-primary); }

/* alert_box のカラー設定（赤系） */
.program_contents .alert_box {
    background: #fff5f5;
    border-left: 5px solid #de3545;
}
.program_contents .alert_box i { color: #de3545; }

/* 3. クリックで開閉するQ&A（details/summary） */
.program_contents details.faq_box {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 1rem;
    background: #fff;
}
.program_contents details.faq_box summary {
    padding: 1rem 3rem 1rem 1rem; /* 右側に矢印用の余白を確保 */
    font-weight: bold;
    background: var(--bg-gray);
    cursor: pointer;
    list-style: none; /* デフォルトの黒三角を消す */
    position: relative;
    border-radius: 4px;
    color: var(--text-main);
}
/* iOSなどで表示されるデフォルトの矢印を強制非表示 */
.program_contents details.faq_box summary::-webkit-details-marker { display: none; }

/* FontAwesomeで開閉の矢印をつける */
.program_contents details.faq_box summary::after {
    content: "\f078"; /* 下向き矢印 */
    font-family: FontAwesome;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    transition: transform 0.3s ease;
}
/* 開いた時の矢印の向き */
.program_contents details.faq_box[open] summary::after {
    transform: translateY(-50%) rotate(180deg); /* くるっと上を向くアニメーション */
}
.program_contents details.faq_box p {
    padding: 1.2rem;
    margin: 0;
    border-top: 1px dashed var(--border-color);
}


/* =========================================================
   よくある質問（アコーディオン）のデザイン
   ========================================================= */
.program_contents .faq-container {
    margin-bottom: 40px;
}

.program_contents .faq-item {
    margin-bottom: 16px; /* 質問同士の隙間 */
}

/* ▼ Q（質問）ブロックのボタン設定 ▼ */
.program_contents .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2; /* 薄いグレーの背景 */
    border: none;
    padding: 16px 20px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.program_contents .faq-question:hover {
    background-color: #e8e8e8; /* マウスホバーで少し濃くする */
}

/* ▼ QとAの四角いアイコン ▼ */
.program_contents .faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background-color: var(--color-primary, #eb5505); /* オレンジ色 */
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
    margin-right: 16px;
}

/* ▼ 質問のテキスト ▼ */
.program_contents .faq-q-text {
    flex-grow: 1;
    font-weight: bold;
    font-size: 16px;
    color: var(--text-main, #333333);
    line-height: 1.5;
    padding-right: 16px;
}

/* ▼ 右側の矢印アイコン（Font Awesome） ▼ */
.program_contents .faq-chevron {
    color: var(--color-primary, #eb5505);
    font-size: 20px;
    transition: transform 0.3s ease; /* くるっと回るアニメーション */
}

/* 開いたときの矢印の向き（180度回転して上を向く） */
.program_contents .faq-item.is-open .faq-chevron {
    transform: rotate(180deg);
}

/* =========================================================
   ▼ A（回答）ブロックのアニメーション設定 ▼
   ========================================================= */
/* ふわっと開くための外枠（初期状態は高さ0・透明） */
.program_contents .faq-answer-wrapper {
    display: grid;
    grid-template-rows: 0fr; /* 高さを0に */
    opacity: 0;              /* 透明に */
    overflow: hidden;
    transition: grid-template-rows 0.4s ease, opacity 0.4s ease; /* ふわっとさせる魔法 */
}

/* 開いたとき（高さ自動・不透明） */
.program_contents .faq-item.is-open .faq-answer-wrapper {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* ▼▼▼ ここから変更 ▼▼▼ */
/* 回答ブロックの中身（白い背景と枠線） */
.program_contents .faq-answer-inner {
    min-height: 0; /* 必須の設定 */
    display: flex;
    align-items: flex-start;
    background-color: #ffffff;
    
    /* ★閉じている時は上下の余白を0、枠線を透明にする */
    border: 1px solid transparent; 
    border-top: none; /* Qブロックと接する上の線は消す */
    padding: 0 20px;
    
    /* ★余白と枠線がフワッと現れるように設定を追加 */
    transition: padding 0.4s ease, border-color 0.4s ease;
    box-sizing: border-box;
}

/* ★開いた時（.is-openが付いた時）に余白と枠線を復活させる設定を追加 */
.program_contents .faq-item.is-open .faq-answer-inner {
    padding: 24px 20px;
    border-color: #e5e5e5;
}
/* ▲▲▲ ここまで変更 ▲▲▲ */

/* 回答のテキスト */
.program_contents .faq-a-text {
    color: var(--text-main, #333333);
    line-height: 1.6;
    font-size: 15px;
}

.program_contents .faq-a-text p {
    margin: 0 0 10px 0;
}
.program_contents .faq-a-text p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   FAQの余白（スペース）強制調整
   ========================================================= */

/* ▼ 1. 見出し（Q&A）とFAQブロックの間の隙間を調整 ▼ */
.program_contents .faq-container {
    margin-top: 16px !important; /* 見出しとの隙間（広すぎる場合は 8px や 0 に変更してください） */
    margin-bottom: 40px;
}

/* ▼ 2. 質問ブロック同士の隙間を狭める ▼ */
.program_contents .faq-item {
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* 隙間を 8px に強制指定 */
}

/* ▼ 3. システムが自動挿入する「見えない改行・段落」を消す魔法 ▼ */
/* HTMLエディタの改行によって勝手に作られる <br> や 空の <p> が隙間の原因になるのを防ぎます */
.program_contents .faq-container > br,
.program_contents .faq-container > p {
    display: none !important;
}



/* =========================================================
   よくある質問（開きっぱなし・固定デザイン）
   ========================================================= */
.program_contents .faq-static-container {
    margin-top: 16px;
    margin-bottom: 40px;
}

.program_contents .faq-static-item {
    margin-bottom: 20px; /* 質問同士の隙間 */
}

/* ▼ Q（質問）ブロックの設定 ▼ */
.program_contents .faq-static-q {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2; /* 薄いグレーの背景 */
    padding: 16px 20px;
}

/* ▼ A（回答）ブロックの設定 ▼ */
.program_contents .faq-static-a {
    display: flex;
    align-items: flex-start;
    background-color: #ffffff;
    border: 1px solid #e5e5e5; /* 薄いグレーの枠線 */
    border-top: none; /* Qブロックと接する上の線は消す */
    padding: 24px 20px;
    box-sizing: border-box;
}

/* ▼ システムが勝手に追加する空の段落や改行を消去（隙間対策） ▼ */
.program_contents .faq-static-container p:empty,
.program_contents .faq-static-container br,
.program_contents .faq-static-container > p {
    display: none !important;
}


/* faq-q-text 内の改行を強制的に有効化 */
.program_contents .faq-q-text {
    display: block; /* または inline-block */
    width: 100%;
}
.program_contents .faq-q-text br {
    display: block !important;
}


.program_contents .faq-a-text {
    display: block; /* または inline-block */
    flex: 1; /* 「A」アイコン以外の残りの幅をすべて取るようにする */
    min-width: 0; /* ★重要：Flexbox内で横幅が中身（テーブル）に引っ張られるのを防ぐ */
    /* width: 100%; */
}
.program_contents .faq-a-text br {
    display: block !important;
}

/* =========================================================
   「見出し＋説明文」のリストスタイル
   ========================================================= */

/* --- パターン1：シンプル箇条書き風（ulタグ使用） --- */
.program_contents ul.title_desc_list {
    list-style: none !important;
    padding-left: 0 !important;
}
.program_contents ul.title_desc_list > li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 1.8rem; /* 項目同士の隙間を広めにとって圧迫感を減らす */
}

/* メインカラーの丸ポチ装飾 */
.program_contents ul.title_desc_list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px; /* 1行目のタイトルと高さを合わせる */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary); /* #eb5505 */
}

/* 項目名（タイトル） */
.program_contents .list_title {
    display: block;
    font-weight: bold;
    font-size: 1.05rem;
    color: var(--text-main);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

/* 説明文 */
.program_contents .list_desc {
    margin: 0 !important; /* 余計なpタグの余白を消す */
    color: #555; /* 真っ黒ではなく少しグレーにしてタイトルを目立たせる */
    font-size: 0.95rem;
    line-height: 1.7;
}


/* --- パターン2：用語と解説・しっかりめ（dlタグ使用） --- */
.program_contents dl.term_desc_list {
    margin: 0 0 2rem 1.5rem;
}

/* tableの中のときのCSS（追加分） */
.program_contents table dl.term_desc_list {
    margin: 0;
}

/* faq-a-text 内にある term_desc_list のマージン調整 */
.program_contents .faq-a-text .term_desc_list {
    margin: 0 0 2rem 0 !important;
}

/* faq-a-text 内にある term_desc_list のマージン調整 */
.program_contents .faq-a-text .term_desc_list dd {
    margin: 0 0 2rem 0 !important;
}



/* term_desc_list dd 内にある ul のマージン調整 */
.program_contents .term_desc_list dd ul {
    margin: 0 0 2rem 0 !important;
}


/* 項目名（タイトル） */
.program_contents dl.term_desc_list dt {
    position: relative;
    font-weight: bold;
    font-size: 1.05rem;
    color: var(--text-main);
    padding-left: 1.2rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px dashed var(--border-color); /* タイトルの下に点線を引く */
    padding-bottom: 0.4rem;
}

/* 先頭のFontAwesomeアイコン（右矢印） */
.program_contents dl.term_desc_list dt::before {
    content: "\f0da"; /* 右向きの小さな三角矢印 */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 13px;
    transform: translateY(-50%);
    color: var(--color-primary); /* #eb5505 */
}

/* 説明文 */
.program_contents dl.term_desc_list dd {
    margin: 0 0 2rem 1.2rem; /* 左側を少しインデント（字下げ）して読みやすく */
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ▼ スマホ画面（767px以下）の時の調整 ▼ */
@media screen and (max-width: 767px) {
    .program_contents dl.term_desc_list {
        margin-left: 0 !important;
    }
}


/* ========================================================
   ▼ 左にオレンジ線の入った見出しデザイン
   ======================================================== */
.title-orange-line {
    padding-left: 5px;             /* 線と文字の間の余白 */
    /* border-left: 4px solid #ea5404; 左側のオレンジ色の太い線 */
    font-size: 22px;                /* 文字の大きさ（お好みで調整してください） */
    color: #333333;                 /* 文字の色 */
    font-weight: bold;              /* 文字を太字にする */
    line-height: 1.4;               /* 文字の縦の位置を綺麗に揃える */
    margin-bottom: 15px;            /* 見出しの下の余白 */
}






/* ========================================================
   ▼ スライダーの「＞（次へ）」ボタンをグレーに変更
   ======================================================== */
a.custum-nextBtn.btn-theme {
    background-color: #b0b0b0 !important; /* 背景色をグレーに強制変更 */
    border-color: #b0b0b0 !important;     /* 枠線がある場合もグレーに強制変更 */
}

/* マウスを乗せた時（ホバー時）は少し濃いグレーにする */
a.custum-nextBtn.btn-theme:hover {
    background-color: #888888 !important;
    border-color: #888888 !important;
}

/* ※もし左側の「＜（前へ）」ボタンも存在する場合は、以下も追記してください */
a.custum-prevBtn.btn-theme {
    background-color: #b0b0b0 !important;
    border-color: #b0b0b0 !important;
}
a.custum-prevBtn.btn-theme:hover {
    background-color: #888888 !important;
    border-color: #888888 !important;
}


/* ========================================================
   ▼ リンクの文字色を強制的にグレーに上書き
   ======================================================== */
/* 先頭に「body 」を付けることで、元のコードよりも優先度を高くします */
body .content-list-item .content-info-box a:link, 
body .content-list-item .content-info-box a:visited, 
body .content-list-item .content-info-box a:active, 
body .relation-list .panel-ttl a:link, 
body .relation-list .panel-ttl a:visited, 
body .relation-list .panel-ttl a:active {
    color:  #353535 !important;/* ここにお好みのグレーのカラーコードを指定 */
}

/* ついでにマウスホバー時の色も設定しておく場合はこちら（不要なら削除OKです） */
body .content-list-item .content-info-box a:hover,
body .relation-list .panel-ttl a:hover {
    color: #888888 !important;
}



/* ========================================================
   ▼ ナビゲーション
   ======================================================== */
.major-category {
    font-size: 0.8rem !important;
    border-bottom: none !important;
    
    /* ▼ 背景色を綺麗に見せるための追加設定 ▼ */
    display: block;             /* 枠を横幅いっぱいに広げる（文字の長さに合わせるなら inline-block） */
    padding: 8px 12px;          /* 内側に余白を作って窮屈さをなくす */
    border-radius: 4px;         /* 角を少し丸くする（不要なら削除OK） */
    transition: all 0.3s ease;  /* ホバー時にフワッと色が変わるようにする */
}

/* ▼ マウスを乗せた時（ホバー時）の設定 ▼ */
.major-category:hover {
    text-decoration: none !important;      /* 元の下線を強制的に消す */
    background-color: var(--color-master) !important;  /* 背景をメインカラーのオレンジに */
    color: #ffffff !important;             /* 文字色を白に */
}


    .favorite:hover {
        background: #e5e5e5!important;
    }



    /* ========================================================
   ▼ イベントカレンダー
   ======================================================== */

  /* =========================================
   ▼ 既存のCSS（そのまま保持） ▼
========================================= */
.program_contents {
  max-width:initial;
}

.tab-pane {
  border: none!important;
}

/*目次*/
.navi_list {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  gap: 10px !important;
}
.navi_list a {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 10px 20px !important;
  background: #f5f5f5 !important;
  border-radius: 4px !important;
  border: 2px solid transparent !important;
  color: #333 !important;
  text-decoration: none !important;
  font-weight: bold !important;
  margin: 0 !important;
  min-width: 150px !important;
}
.navi_list a img {
  margin: 0!important;
  width: 30px !important;
  height: auto !important;
  display: inline-block;
}
.navi_list a span.navi_list_txt {
  margin-left: 0.5em!important;
}
.navi_list a u {
  text-decoration: none !important;
  border-bottom: 1px solid #333 !important;
}

.scroll_day_refund{
  width: 100%; 
  max-width: 1030px; 
  overflow-x: scroll;
}

.event_table table{
  border: 2px solid var(--color-master, #eb5505) !important;
}
.event_table th{
  background: var(--color-master, #eb5505)!important;
  color: #fff;
  border: 1px #fff solid!important;
}
.event_table td{
  border-right: 2px dotted #c9c9c9 !important;
  border-bottom: 2px dotted #c9c9c9 !important;
  border-top: initial !important;
  border-left: initial !important;
}
.event_table ul li{ text-align: left; }
.event_table_txt_cnt{ text-align: center !important; }

/* イベントカレンダー */
.pnltmpl_calendar h2 { margin: 2em 0 0 0; }
a.link_btn { margin: 2rem 2em 2em 0em; }
.pnltmpl_calendar { border: none !important; margin: 0 0 2em 0; padding: 0; }
a.com { color:var(--text-main); text-decoration: none; }
.com { font-size: 10px; color: #393939; display: block; align-items: center; border-radius: 2px; padding: 1px 5px; margin-top: 5px }

.webinar { background: #ded6f9; }
.report { background: #d5f1f6; }
.santaro { background: #fff2ad; }
.point { background: #fcdabf; display: flex; }
.coupon { background: #c5c7e9; }
.sumapure { background: #f0ead1; }
.mega { background: #c1e2d4; }
.spot01 { background: #ffd3d3; }
.spot02 { background: #f6e0e9; }
.spot03 { background: #d2d2d2; }
.userpoint { background: #bbd5ff; }
.gerira { background: #ecfce5; }
.right { float: right; font-size: 10px; }

.pnltmpl_calendar table {  
  border-collapse: collapse !important;  
  border:3px solid var(--border-color) !important;
  width: 100%;
}
.pnltmpl_calendar td, .pnltmpl_calendar th { 
  padding: 0 3px !important;  
  width: 140px !important;  
  border-right: 2px dotted #F0ECED !important;  
  border-top: initial !important;  
  border-bottom: initial !important;
  font-size:12px;
}
.pnltmpl_calendar th { 
  background:var(--border-color, #D1D1D1) !important;
  border: 1px dotted #fff !important;  
  color: #fff !important;  
  height: 10px !important;
}
.pnltmpl_calendar tr:first-child { border-bottom:2px solid var(--border-color, #D1D1D1) !important;}
.pnltmpl_calendar tr:last-child { border-bottom: 2px solid var(--color-master, #eb5505) !important; }
.pnltmpl_calendar td:last-child { border-right: 0 !important; }
.pnltmpl_calendar th:last-child { border-right: 0 !important; }

/* =========================================
   ▼ 店舗販促スケジュール（色味調整＆白線復活版） ▼
========================================= */
.table-container { 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
  border: 1px solid #ebebeb;
}

.table-container table {
  border-collapse: collapse !important; 
  border-spacing: 0 !important;
  width: 100%;
  min-width: max-content;
}

/* 全てのセル（見出し・中身）の共通設定 */
.table-container th, .table-container td {
  border: 1px solid #ffffff !important; /* ★すべての境界線を白にして区切る */
  padding:4px 8px !important;
  text-align: center !important;
  font-size: 12px;
  vertical-align: middle !important;
}

/* カレンダー部分（数字など）のセル */
.table-container td {
  border: 1px solid #ebebeb !important;
  white-space: nowrap !important;
}

/* ★ カレンダー上部と左側の見出しの色を、目に優しい薄めのオレンジに */
.table-container th {
  background: #F2F2F2 !important; /* メインカラーよりマイルドで柔らかいオレンジ */
  color:#333333!important;
}

/* ▼ 左側に固定される見出しセルの設定 ▼ */
th.sticky-left, td.sticky-left {
  position: sticky;
  left: 0;
  background:#f2f2f2 !important;
  z-index: 2 !important;
  color:#333333!important;
  font-weight: bold !important;
  text-align: center !important;
  white-space: nowrap !important; 
  min-width: auto !important; 
}

/* 「店舗さま販促」の黒帯も少し柔らかい色に変更 */
th.sticky-left.hansoku { 
  background:#d1d1d1 !important;
}

/* ※以前あった `.sticky-left:before { ... }` の記述は、
  白い区切り線を隠す原因になっていたため丸ごと削除しました！
  これにより、左側のテーブルにもしっかり白線が表示されます。
*/

/* 最大還元率の黄色ハイライト */
.table-container td.max_return { 
  background: #ffe763 !important; 
  color: #ff0000 !important; 
  font-weight: bold !important; 
}

/* ▼ 背景色（イベント帯） ▼ */
.table-container td.point_return_timesale { background-color: #ffebee !important; }
.table-container td.point_return_pointup { background-color: #e2eaf7 !important; }
.table-container td.point_return_mail { background-color: #fff6ca !important; }
.table-container td.point_return_banner { background-color: #ecffe9 !important; }
.table-container td.point_return_coupon { background-color: #b5baff !important; }
.table-container td.point_return_santaro_tz { background-color: #fffbe2 !important; }
.table-container td.point_return_tyotyo_tz { background-color: #f9f7e8 !important; }
.table-container td.point_return_baibai_tz { background-color: #ffecec !important; }
.table-container td.point_return_happy_tz { background-color: #f7fff3 !important; }
.table-container td.point_return_santaro { background-color: #fff2ad !important; }
.table-container td.point_return_tyotyo { background-color: #f0ead1 !important; }
.table-container td.point_return_baibai { background-color: #ffd3d3 !important; }
.table-container td.point_return_happy { background-color: #ecfce5 !important; }
/* =========================================
   ▼ 追加CSS：デザイン修正（線の途切れ対策） ▼
========================================= */

/* 大タブの見た目強制 */
ul#myTab {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none !important; 
  gap: 0 !important;
}
ul#myTab li { 
  margin-bottom: -2px !important; /* コンテンツ枠の上に重なるようにする */
  display: block !important; 
  z-index: 2 !important;
  position: relative !important;
}
ul#myTab .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 10px 20px !important;
  background-color: transparent !important;
  color: #555 !important;
  border: 2px solid transparent !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-weight: bold !important;
}
ul#myTab .nav-link:hover {
  background-color: #f8f9fa !important;
}
/* 選択されている大タブの見た目 */
ul#myTab .nav-link.active {
  color: #fff !important;
  background-color: var(--color-master, #eb5505) !important;
  border: 2px solid var(--color-master, #eb5505) !important; 
}

/* タブコンテンツ全体枠 */
#myTabContent {

  
  background: #fff !important;
  margin-bottom: 3em !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 小タブ（月切り替えボタン） */
.month-selector {
  display: flex !important;
  gap: 15px !important;
  margin-bottom: 20px !important;
  justify-content: flex-start !important;
  padding: 10px 0 !important;
  border-bottom: 1px dotted #ccc !important;
}
.month-selector button {
  padding: 8px 30px !important;
  background-color: #f8f9fa !important;
  border: 2px solid #dee2e6 !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  font-weight: bold !important;
  color: #555 !important;
  transition: all 0.2s !important;
  font-size: 14px !important;
  margin: 0 !important;
}
.month-selector button:hover {
  background-color: #e9ecef !important;
}
/* 選択されている小タブ */
.month-selector button.active {
  background-color: var(--color-master, #eb5505) !important;
  color: #fff !important;
  border-color: var(--color-master, #eb5505) !important;
}

/* 3ヶ月分すべて表示されてしまう問題の修正 */
.month-content {
  display: none !important; 
  opacity: 0;
}
.month-content.active {
  display: block !important; 
  animation: fadeInTab 0.4s forwards;
}

/* タブ間の切り替えを隠す・見せる処理 */
.tab-pane {
    display: none !important;
}
.tab-pane.active {
    display: block !important;
}

@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   ▼ 追加：イベントカレンダーのチップデザイン（Googleカレンダー風） ▼
   ========================================================= */
.program_contents .pnltmpl_calendar td a.com {
    padding: 4px 6px !important;
    border-radius: 4px !important;
    /* ▼ 予定の左側に少し濃いアクセントラインを引いて立体感を出す ▼ */
    border-left: 4px solid rgba(0, 0, 0, 0.15) !important; 
    transition: opacity 0.2s ease !important;
    box-sizing: border-box !important;
}

/* ▼ マウスを乗せた時にフワッと少し薄くして「押せる感」を出す ▼ */
.program_contents .pnltmpl_calendar td a.com:hover {
    opacity: 0.7 !important; 
}

/* ▼ 予定内の時間表記（~9:59など）の微調整 ▼ */
.program_contents .pnltmpl_calendar td a.com .right {
    display: block !important;
    text-align: right !important;
    margin-top: 2px !important;
    color: rgba(0, 0, 0, 0.6) !important;
}




/* =========================================================
   パターン2：左右矢印カレンダー専用スタイル
   ========================================================= */
.program_contents .p2-section-title {
    border-left: 5px solid var(--color-master, #eb5505);
    padding-left: 10px;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 16px;
}

.program_contents .p2-cal-container {
    margin-bottom:100px;
    margin-top:50px;
}

/* ▼ 月切り替えヘッダー（＜ 6月 ＞） ▼ */
.program_contents .p2-cal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: #f8f9fa; /* 薄いグレー背景 */
    
    border-bottom: none; /* 下のテーブルと繋げるために下の線を消す */
    padding:8px;
}

/* ▼ 左右の矢印ボタン ▼ */
.program_contents .p2-nav-btn {
    background:#ffffff;
    border: 2px solid #ccc;
    color:#333;
    font-weight: bold;
    width:25px;
    height:25px;
    border-radius: 50%; /* まん丸ボタン */
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.program_contents .p2-nav-btn:hover:not(:disabled) {
    background: var(--color-master, #eb5505);
    color: #ffffff;
    border-color: var(--color-master, #eb5505);
}

/* 押せない時（最初の月・最後の月）の矢印デザイン */
.program_contents .p2-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #f0f0f0;
}

/* ▼ 「〇月」のテキスト ▼ */
.program_contents .p2-month-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    min-width: 80px;
    text-align: center;
}

/* ▼ カレンダー中身の表示切り替えアニメーション ▼ */
.program_contents .p2-month-item {
    display: none;
    animation: p2FadeIn 0.4s ease forwards;
}
.program_contents .p2-month-item.is-active {
    display: block;
}

@keyframes p2FadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   追記：左右矢印をFontAwesomeのアイコンにすり替える設定
   ========================================================= */

/* 1. 元の「＜」「＞」の文字を透明にして見えなくする */
.program_contents .p2-nav-btn {
    color: transparent !important;
    position: relative; /* アイコンを真ん中に置くための基準 */
}

/* 2. アイコンの共通設定（ど真ん中に配置） */
.program_contents .p2-nav-btn::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ど真ん中に合わせる */
    font-family: "FontAwesome" !important;
    font-size: 16px; /* 25pxのボタンにちょうどいいサイズ */
    color: #333;     /* 通常時のアイコン色 */
    transition: all 0.2s ease;
}

/* 3. 左向きのアイコン（fa-angle-left）を指定 */
.program_contents .p2-prev::before {
    content: "\f104" !important;
}

/* 4. 右向きのアイコン（fa-angle-right）を指定 */
.program_contents .p2-next::before {
    content: "\f105" !important;
}

/* 5. マウスを乗せた時（ホバー時）は、アイコンを白くする */
.program_contents .p2-nav-btn:hover:not(:disabled)::before {
    color: #ffffff !important;
}

/* 6. 押せない時（disabled）のアイコン色 */
.program_contents .p2-nav-btn:disabled::before {
    color: #999999 !important;
}


/* ========================================================
   ▼ サムネイル画像のホバーエフェクト（ふわっと薄くする）復活
   ======================================================== */

/* 通常時の画像に、アニメーションを滑らかにする設定を追加 */
.content-thumbnail-box-inner {
    transition: opacity 0.3s ease !important; /* 0.3秒かけてふわっと変化させる */
}

/* サムネイルのエリアにマウスが乗った（ホバーした）とき、画像を少し透明にする */
.content-thumbnail:hover .content-thumbnail-box-inner,
.content-thumbnail-box:hover .content-thumbnail-box-inner {
    opacity: 0.75 !important; /* ★不透明度を75%（少し透けて白っぽく見える状態）にする */
}




/* =========================================================
   レスポンシブ対応 (スマホ用微調整・完全版)
   ========================================================= */
@media screen and (max-width: 768px) {
    /* --- 1. 全体の文字サイズと余白の調整 --- */
    .program_contents {
        font-size: 14px; /* ベースの文字サイズを16pxから少し小さく[cite: 1] */
        padding: 0 15px; /* 画面左右の余白[cite: 1] */
    }
    
    /* 見出しのサイズダウン */
    .program_contents .contents h2 {
        font-size: 1.3rem;
        margin: 2rem 0 1rem;
    }
    .program_contents .contents h3 {
        font-size: 1.1rem;
        padding: 0.6rem 1rem;
        margin: 2rem 0 1rem;
    }

    /* --- 2. ボタンのスマホ最適化 --- */
    .program_contents .link_btn {
        width: 100%; /* スマホでは横幅いっぱいに広げて押しやすく */
        padding: 0.8rem 1rem; /* 上下左右の余白を少し縮小[cite: 1] */
        box-sizing: border-box;
    }

    /* --- 3. タブ（イベント / 店舗販促）の調整 --- */
    ul#myTab {
        justify-content: space-between !important;
        gap: 0 !important;
    }
    ul#myTab li {
        width: 49%; /* タブを2つ綺麗に並べる */
        margin-bottom: 5px !important;
    }
    ul#myTab .nav-link {
        font-size: 12px !important; /* タブの文字を小さく */
        padding: 8px 5px !important;
        width: 100%;
        justify-content: center;
        border-radius: 4px !important; /* スマホ時は角丸を小さく */
    }
    #myTabContent {
        padding: 15px 10px !important; /* 枠内の余白を狭めて広く使う */
    }

    /* --- 4. 月切り替えボタン（6月、7月...）の調整 --- */
    .month-selector {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important; /* 中央揃えにする */
    }
    .month-selector button {
        padding: 6px 20px !important;
        font-size: 13px !important;
    }

    /* --- 5. ページ上部の目次ボタン（商戦準備ガイドなど） --- */
    .navi_list {
        justify-content: space-between !important;
        gap: 8px !important;
    }
    .navi_list a {
        width: 48% !important; /* 2列に綺麗に並べる */
        min-width: auto !important; /* 150pxの固定解除[cite: 1] */
        padding: 10px 5px !important;
        flex-direction: column !important; /* アイコンと文字を縦積みにする */
        gap: 5px;
    }
    .navi_list a img {
        width: 24px !important; /* アイコンを少し小さく */
    }
    .navi_list a span.navi_list_txt {
        margin-left: 0 !important;
        font-size: 11px !important; /* 文字を小さくして収める */
        line-height: 1.3;
    }

    /* --- 6. 汎用テーブル（outer）のスマホ余白調整 --- */
    .program_contents .outer th, 
    .program_contents .outer td {
        padding: 0.8rem 1rem !important; /* 余白を狭くして見やすく[cite: 1] */
        font-size: 13px !important;
    }

    /* --- 7. 既存のレイアウト調整（そのまま保持） --- */
    .program_contents .content_list {
        width: 100%;
        min-width: unset;
        box-sizing: border-box;
    }
    .program_contents .img_txt {
        flex-direction: column !important;
        gap: 1rem;
    }
    .program_contents .pager {
        flex-direction: column;
        gap: 1rem;
    }
    .program_contents .pager li.next {
        text-align: left;
    }
    .cont_movie iframe,
    .new_movie_side .new_cont_movie iframe {
        width: 100% !important;
    }
}


.box-mv-slide .slick-dots button::before {
    background-color: #dddddd!important;
}

.slick-dots li.slick-active button::before {
    background-color: var(--color-master)!important;
}

.tile-inner {
    box-shadow: none!important;
}

.inner, .tile-inner {
    padding: 30px!important;
}

.content-list-item > article {
    border: 1px solid #ffffff!important;
    border-radius: 10px;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

.ellipsis {
    white-space: normal!important;
    line-height: 1.3rem!important;
}

.box-main {
    margin-bottom: 0!important;
    padding-bottom: 45px!important;
}

.box-footer{
    margin-top: 0!important;
}




/* ========================================================
     ▼ すべての「もっと見る（.btn-theme）」ボタンのデザインを上書き
     ======================================================== */
  
  /* 1. ボタン全体の背景や枠線を消し、文字だけのスタイルにする */
  .btn.btn-theme {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      background: transparent !important;    /* 元の背景色を消す */
      border: none !important;               /* 元の枠線を消す */
      color: var(--color-master) !important; /* 文字をオレンジに */
      font-weight: bold !important;
      font-size: 14px !important;
      padding: 0 !important;                 /* 元のボタンの余白を消す */
      box-shadow: none !important;           /* 影があれば消す */
      min-width: auto !important;            /* 横幅の指定があれば解除 */
  }

  /* ホバー時も全体の背景色が変わらないように固定 */
  .btn.btn-theme:hover {
      background: transparent !important;
      color: var(--color-master) !important;
      opacity: 1 !important;
  }

  /* 2. 右側のアイコン（<i>タグ）を「オレンジの四角」に変身させる */
  .btn.btn-theme i {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 25px !important;
      height: 25px !important;
      background-color: var(--color-master) !important; /* 背景をオレンジに */
      color: #fff !important;                           /* 矢印を白に */
      border-radius: 3px !important;                    /* 角丸 */
      margin-left: 10px !important;                     /* 文字との隙間 */
      transition: transform 0.25s ease !important;      /* アニメーション準備 */
  }
/* 3. アイコンの形を「く（angle-right）」から「→（arrow-right）」に強制変更 */
  .btn.btn-theme i::before {
      content: "\f061" !important; 
      font-family: "FontAwesome" !important; /* ★ 4.7のフォント名に変更 */
      font-weight: normal !important;        /* ★ 4.7の太さに変更 */
  }
    .btn i{
        font-size: 0.9em!important;
    }
  /* 4. マウスを乗せた（ホバー）時にアイコンだけを右に動かす */
  .btn.btn-theme:hover i {
      transform: translateX(5px) !important; /* 右に5pxスライド */
  }



  /* =========================================================
   メモブロック（1行用・強め）
   ========================================================= */
.program_contents .memo-strong-block {
    display: flex;
    align-items: center;
    background-color: var(--bg-yellow-light); /* 薄いクリーム色の背景 */
    padding: 16px 20px;
    margin-bottom: 32px;
}

/* アイコンと縦線の部分 */
.program_contents .memo-strong-icon {
    display: flex;
    align-items: center;
    color: var(--bg-orange-light); /* 柔らかいオレンジ色 */
    font-size: 24px;
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid var(--bg-orange-light); /* 右側の薄い縦線 */
}

/* テキスト部分 */
.program_contents .memo-strong-text {
    margin: 0!important;
    color: var(--text-main, #333333);
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   メモブロック（複数行用・ふつう）
   ========================================================= */
.program_contents .memo-normal-block {
    position: relative;
    border: 2px solid var(--bg-orange-light); /* 枠線のオレンジ色 */
    background-color: #ffffff;
    padding: 40px 40px 30px 40px;
    margin-top: 40px;
    margin-bottom: 32px;
}

/* 枠線に重なるタイトルの設定 */
.program_contents .memo-normal-title {
    position: absolute;
    top: -15px; /* 上にズラして枠線に重ねる */
    left: 16px;
    background-color: #ffffff; /* 背景を白にして裏の枠線を隠す */
    padding: 0 12px;
    color: var(--bg-orange-light);
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px; /* アイコンと文字の隙間 */
}

/* リスト全体の設定 */
.program_contents .memo-normal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 0!important;
}

/* リスト項目の設定（「・」で始まるテキスト） */
.program_contents .memo-normal-list li {
    position: relative;
    padding-left: 1em; /* 「・」を置くための隙間 */
    margin-bottom: 16px;
    color: var(--text-main, #333333);
    line-height: 1.8;
}

/* 最後の項目の下の隙間を消す */
.program_contents .memo-normal-list li:last-child {
    margin-bottom: 0;
}

/* 箇条書きの「・」をCSSで自動配置 */
.program_contents .memo-normal-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}


/* =========================================================
   チェックブロック（1行用・強め）
   ========================================================= */
.program_contents .check-strong-block {
    display: flex;
    align-items: center;
    background-color: var(--bg-green-light); /* 薄い緑色の背景 */
    padding: 16px 20px;
    margin-bottom: 32px;
    margin-top: 40px;
}

/* アイコンと縦線の部分 */
.program_contents .check-strong-icon {
    display: flex;
    align-items: center;
    color: var(--color-green); /* 爽やかな緑色 */
    font-size: 24px;
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid var(--color-green); /* 右側の薄い縦線 */
}

/* テキスト部分 */
.program_contents .check-strong-text {
    margin: 0!important;
    color: var(--text-main, #333333);
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   チェックブロック（複数行用・ふつう）
   ========================================================= */
.program_contents .check-normal-block {
    position: relative;
    border: 2px solid var(--color-green); /* 枠線の緑色 */
    background-color: #ffffff;
    padding: 40px 40px 30px 40px;
    margin-top: 40px;
    margin-bottom: 32px;
}

/* 枠線に重なるタイトルの設定 */
.program_contents .check-normal-title {
    position: absolute;
    top: -15px; /* 上にズラして枠線に重ねる */
    left: 16px;
    background-color: #ffffff; /* 背景を白にして裏の枠線を隠す */
    padding: 0 12px;
    color: var(--color-green);
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px; /* アイコンと文字の隙間 */
}

/* リスト全体の設定 */
.program_contents .check-normal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 0!important;
}

/* リスト項目の設定（「・」で始まるテキスト） */
.program_contents .check-normal-list li {
    position: relative;
    padding-left: 1em; /* 「・」を置くための隙間 */
    margin-bottom: 16px;
    color: var(--text-main, #333333);
    line-height: 1.8;
}

/* 最後の項目の下の隙間を消す */
.program_contents .check-normal-list li:last-child {
    margin-bottom: 0;
}

/* 箇条書きの「・」をCSSで自動配置 */
.program_contents .check-normal-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}


/* =========================================================
   注意ブロック（1行用・強め）
   ========================================================= */
.program_contents .caution-strong-block {
    display: flex;
    align-items: center;
    background-color: var(--bg-red-light); /* 薄いピンク色の背景 */
    padding: 16px 20px;
    margin-bottom: 32px;
}

/* アイコンと縦線の部分 */
.program_contents .caution-strong-icon {
    display: flex;
    align-items: center;
    color: var(--color-red); /* 注意を促す赤ピンク色 */
    font-size: 24px;
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid var(--color-red); /* 右側の薄い縦線 */
}

/* テキスト部分 */
.program_contents .caution-strong-text {
    margin: 0!important;
    color: var(--text-main, #333333);
    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   注意ブロック（複数行用・ふつう）
   ========================================================= */
.program_contents .caution-normal-block {
    position: relative;
    border: 2px solid var(--color-red); /* 枠線の赤ピンク色 */
    background-color: #ffffff;
    padding: 40px 40px 30px 40px;
    margin-top: 24px;
    margin-bottom: 32px;
}

/* 枠線に重なるタイトルの設定 */
.program_contents .caution-normal-title {
    position: absolute;
    top: -15px; /* 上にズラして枠線に重ねる */
    left: 16px;
    background-color: #ffffff; /* 背景を白にして裏の枠線を隠す */
    padding: 0 12px;
    color: var(--color-red);
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px; /* アイコンと文字の隙間 */
}

/* リスト全体の設定 */
.program_contents .caution-normal-list {
    list-style: none;
    padding: 0;
    margin-left: 0!important;
}

/* リスト項目の設定（「・」で始まるテキスト） */
.program_contents .caution-normal-list li {
    position: relative;
    padding-left: 1em; /* 「・」を置くための隙間 */
    margin-bottom: 16px;
    color: var(--text-main, #333333);
    line-height: 1.8;
}

/* 最後の項目の下の隙間を消す */
.program_contents .caution-normal-list li:last-child {
    margin-bottom: 0;
}

/* 箇条書きの「・」をCSSで自動配置 */
.program_contents .caution-normal-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}



/* =========================================================
   設定箇所（ナビゲーション）ブロック
   ========================================================= */
.program_contents .setting-path-block {
    background-color: #f4f4f4; /* 薄いグレーの背景 */
    padding: 24px;
    margin-bottom: 32px;
}

/* ▼ タイトル（設定箇所）の設定 ▼ */
.program_contents .setting-title {
    font-weight: bold;
    font-size: 15px;
    color: var(--text-main, #333333);
    border-left: 5px solid var(--color-primary, #eb5505); /* 左の太いオレンジ線 */
    padding-left: 10px;
    line-height: 1;
    margin-bottom: 16px; /* 下のリストとの隙間 */
}

/* ▼ 階層リスト全体の設定 ▼ */
.program_contents .setting-path-list {
    display: flex;
    flex-wrap: wrap; /* 画面が狭い時に自動で折り返す設定 */
    align-items: center;
    list-style: none;
    padding: 0 0 0 40px; /* タイトルから右に少しズラす */
    margin: 0;
    margin-bottom: 0!important;
}

/* リスト項目（テキスト）の設定 */
.program_contents .setting-path-list li {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    color: var(--text-main, #333333);
    margin-bottom: 8px; /* 折り返した時の上下の隙間 */
    
    /* ★追加：共通リストの余白干渉をリセット */
    padding-left: 0 !important; 
}

/* ★追加：以前設定した共通リストの「●」を強制的に消去する */
.program_contents .setting-path-list li::before {
    display: none !important;
    content: none !important;
}

/* ▼ 項目と項目の間に「＞」を自動挿入する魔法 ▼ */
.program_contents .setting-path-list li:not(:last-child)::after {
    content: "＞";
    color: #a0a0a0; /* 薄いグレー色 */
    font-weight: normal;
    margin: 0 16px; /* 「＞」の左右の隙間 */
    font-size: 14px;
}

/* ▼ リンク（オレンジ色）の設定 ▼ */
.program_contents .setting-path-list li a {
    color: var(--color-primary, #eb5505)!important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/* リンクにマウスを乗せた時の動き */
.program_contents .setting-path-list li a:hover {
    text-decoration: underline; /* 下線を出す */
    opacity: 0.8; /* 少しだけ薄くして押せる感を出す */
}



/* =========================================================
   TOPへ戻るボタン（右下固定）
   ========================================================= */
#toTopBtn {
    /* ▼ 位置を「画面の右下」に完全固定 ▼ */
    position: fixed !important;
    bottom: 21px !important;
    right: 200px !important;  /* 画面右からの距離 */
    top: auto !important;     /* 既存の top 指定を無効化（超重要） */
    z-index: 9999;            /* 他の画像や文字に埋もれないよう一番手前に出す */
    
    /* ▼ ボタンの形と色の設定 ▼ */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;              /* ボタンの横幅 */
    height: 60px;             /* ボタンの縦幅 */
    background-color: var(--color-master, #eb5505); /* 背景色（メインカラー） */
    border: none !important;  /* 既存の不要なボーダーをリセット */
    border-radius: 50%;       /* きれいな真丸にする */
    color: #ffffff !important;
    font-size: 24px;          /* アイコンの大きさ */
    text-decoration: none;
    
    /* ▼ 少し影をつけて浮いているように見せる（お好みで） ▼ */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ▼ マウスを乗せた時の動き ▼ */
#toTopBtn:hover {
    opacity: 0.8;
    transform: translateY(-3px); /* ふわっと上に少し浮き上がる */
}

#toTopBtn i{
    top: 15px!important;
    left: 17px!important;
}


/* =========================================================
   カラーガイド（使用カラー）
   ========================================================= */
.program_contents .color-guide-wrapper {
    margin-bottom: 40px;
}

/* ▼ 大タイトル（使用カラー） ▼ */
.program_contents .color-guide-main-title {
    border-left: 6px solid var(--color-primary, #eb5505);
    background: linear-gradient(180deg, #d8d8d8 0%, #f4f4f4 100%); /* グラデーション背景 */
    padding: 16px 20px;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-main, #333333);
    margin-top: 0;
    margin-bottom: 32px;
}

/* ▼ 各セクション ▼ */
.program_contents .color-guide-section {
    margin-bottom: 40px;
}

/* ▼ セクションタイトル（基本カラーなど） ▼ */
.program_contents .color-guide-title {
    background-color: #f4f4f4; /* 薄いグレー背景 */
    border-left: 6px solid var(--color-primary, #eb5505);
    padding: 12px 16px;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-main, #333333);
    margin-top: 0;
    margin-bottom: 24px;
}

/* ▼ カラーの並び枠（Flexbox） ▼ */
.program_contents .color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px; /* 上下の隙間 20px、左右の隙間 30px */
    padding: 0 16px;
}

/* ▼ 1つのカラー要素 ▼ */
.program_contents .color-item {
    display: flex;
    align-items: center;
    gap: 9px;    /* 四角と文字の隙間 */
    width: 225px;  /* 固定幅を持たせることで綺麗に列が揃う */
}

/* ▼ 色の四角（スウォッチ） ▼ */
.program_contents .color-swatch {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e5e5; /* 白系の色が見えるように薄い枠線をつける */
    flex-shrink: 0; /* 潰れないように固定 */
}

/* ▼ カラーコードテキスト ▼ */
.program_contents .color-code {
    font-size: 17px;
    color: var(--text-main, #333333);
    font-family: Arial, sans-serif;
    letter-spacing: 0.5px;
}

/* ▼ サブセクション（明度中カラーなど） ▼ */
.program_contents .color-subsection {
    padding: 0 16px;
}

/* ▼ サブセクションタイトル（下線の装飾） ▼ */
.program_contents .color-sub-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-main, #333333);
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #cccccc; /* 全体の薄いグレー線 */
    position: relative;
}

/* 左側のオレンジ色の短い線を ::after で表現 */
.program_contents .color-sub-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px; /* グレーの線に重ねる */
    width: 50px;
    height: 2px;
    background-color: var(--color-primary, #eb5505);
}



/* =========================================================
   下層ページのh1,h2,h3
   ========================================================= */

.custom_h1 {
    background-color: #fff3ee;
    border-left: 6px solid #eb5505;
    padding: 20px 20px;
    margin-bottom: 24px;
    font-size: 23px;
    font-weight: bold;
    line-height: 1.4;
    color:#333333;
}
.custom_h3{
    position: relative;
    background-color: #f2f2f2;
    padding: 13px 16px 13px 32px;
    margin-top: 32px;
    margin-bottom: 20px;
    font-size: 19px;
    font-weight: bold;
    line-height: 1.4;
    color:#333333;
}

.custom_h3::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 13px;
    bottom: 13px;
    width: 5px;
    background-color: #eb5505;

}

.custom_h4 {
    position: relative;
    padding-bottom: 10px;
    margin-top: 28px;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    border-bottom: 2px solid #d1d1d1;
}

.custom_h4::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 75px;
    height: 2px;
    background-color: #eb5505;
}

.custom_h5 {
    padding-bottom: 8px;
    margin-top: 24px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    border-bottom: 2px dotted #bbbbbb;
}


.custom_link_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
    font-weight: bold;
    text-decoration: none !important;
    background: #fff;
    background-color: #eb5505;
    color: #fff!important;
    transition: all 0.3s ease;
    margin: 1rem 0;
}

.custom_link_btn:hover {
    opacity: 0.8 !important;
    transform: translateY(-2px);
    color: #fff !important;
}




/* =========================================
   カルーセル全体
========================================= */
/* カルーセルの外枠 */
.program_contents .carousel {
  position: relative;
  width: 100%;
  max-width: 980px; /* 画像のサイズに合わせて変更してください */
  margin: 0 auto;
}

/* スライドを隠す枠 */
.program_contents .carousel__track-container {
  overflow: hidden;
  width: 100%;
}

/* スライドを横に並べてアニメーションさせる設定 */
.program_contents .carousel__track {

  display: flex;
  padding: 0;
 margin: 0px 6px!important;
  list-style: none;
  transition: transform 0.4s ease-in-out; /* スライドするスピード */
}

/* カルーセル内の li タグのスタイルを強制リセット */
.program_contents .carousel__slide {
  min-width: 100%;
  box-sizing: border-box;
  
  /* 既存のCSSを打ち消すための追加部分 */
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
}

/* もし既存の黒い点が「::before」などの疑似要素で作られている場合、それも消します */
.program_contents .carousel__slide::before,
.program_contents .carousel__slide::after {
  content: none !important;
  display: none !important;
}

.program_contents .carousel__slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===========================
   ボタン・ドットのデザイン
=========================== */

/* 左右のボタン */
.program_contents .carousel__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgb(102 100 100 / 40%);
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
}

.program_contents .carousel__button:hover {
  background: #eb5505a1;
}

.program_contents .carousel__button--left { left: -15px; }
.program_contents .carousel__button--right { right: -15px; }

/* ドットナビゲーション */
.program_contents .carousel__nav {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

.program_contents .carousel__indicator {
  border: none;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background:rgb(138 138 138 / 50%);
  cursor: pointer;
  padding: 0;
}

/* 現在表示されているドットの色 */
.program_contents .carousel__indicator.current-indicator {
  background: #eb5505a1;
}

/* =========================================================
   トレンドランキング用 CSS
   ========================================================= */
.program_contents {
    font-family: sans-serif;
    color: #333;
    line-height: 1.6;
}

/* --- ① キーワードランキング（TOP 30）の枠組み --- */
.program_contents .trend_ranking {
    background: #fff;
    border: 2px solid #efc346;
    border-radius: 8px;
    padding: 24px 16px;
    margin: 30px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    counter-reset: top-rank; /* ランキングの数字リセット */
}

/* グループの見出し */
.program_contents .keyword-group-title {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #d35400;
    margin-bottom: 16px;
}
.program_contents .keyword-group-title.sub {
    font-size: 15px;
    color: #666;
    margin-top: 32px;
    margin-bottom: 24px;
}
.program_contents .ranking-line {
    border: none;
    border-top: 1px dashed #efc346;
    margin: 32px 0 24px 0;
}

/* キーワードを並べるエリア（TOP 10用） */
.program_contents .keyword-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

/* --- ② 1位〜10位の共通設定 --- */
.program_contents .large {
    counter-increment: top-rank; /* 1ずつ増やす */
    display: inline-flex;
    align-items: center;
    background: #fff8e1;
    color: #d35400;
    font-weight: bold;
    border-radius: 30px;
    border: 1px solid #ffeaa7;
}

/* 順位の丸いバッジ（共通） */
/* .program_contents .large::before {
    content: counter(top-rank);
    background: #d35400;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
} */

/* 👑 【TOP 3 のデカ盛りデザイン】 */
.program_contents .keyword-cloud.top-3 .large {
    font-size: 20px; 
    padding: 10px 24px; 
}
/* .program_contents .keyword-cloud.top-3 .large::before {
    width: 28px; 
    height: 28px;
    font-size: 14px;
    margin-right: 10px;
} */
/* 金・銀・銅カラー */
/* .program_contents .keyword-cloud.top-3 .large:nth-child(1)::before { background: #e6b422; }
.program_contents .keyword-cloud.top-3 .large:nth-child(2)::before { background: #aeb4b8; }
.program_contents .keyword-cloud.top-3 .large:nth-child(3)::before { background: #c4764b; } */

/* 🌟 【4位〜10位 の通常デザイン】 */
.program_contents .keyword-cloud.top-10-rest {
    margin-top: 16px; 
}
.program_contents .keyword-cloud.top-10-rest .large {
    font-size: 16px;
    padding: 6px 16px;
}
.program_contents .keyword-cloud.top-10-rest .large::before {
    width: 22px;
    height: 22px;
    font-size: 12px;
    margin-right: 8px;
}


/* --- ③ 11位〜30位の3列表記リストデザイン --- */
.program_contents .trend-list-11-30 {
    list-style: none !important;
    padding: 0 16px;
    margin: 0;
    counter-reset: trend-counter 10; /* ★10からスタートさせて、次は11になるように設定 */
    column-count: 3; /* PCでは3列 */
    column-gap: 32px;
}

@media screen and (max-width: 767px) {
    .program_contents .trend-list-11-30 {
        column-count: 1; /* スマホでは1列 */
    }
}

.program_contents .trend-list-11-30 li {
    list-style: none !important;
    counter-increment: trend-counter; 
    position: relative;
    padding-left: 36px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: normal; /* TOP10より少し控えめに */
    color: #444;
    break-inside: avoid;
    display: flex;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 8px;
}

/* 11位以降の丸い数字アイコン */
.program_contents .trend-list-11-30 li::before {
    display: none;
    /* content: counter(trend-counter) !important;
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    background-color: #f8f9fa; 
    color: #777; 
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold; */
}


/* --- ④ 画像レスポンシブ --- */
.program_contents img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin-bottom: 24px;
}

/* --- ⑤ 上旬/中旬/下旬のリスト --- */
.program_contents .ranking-section {
    background: #fafafa;
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 40px;
}
.program_contents .ranking-section h2 {
    color: #eb5505;
    border-bottom: 2px solid #eb5505;
    padding-bottom: 8px;
    margin-top: 0;
    margin-bottom: 24px;
}
.program_contents .ranking-column-list {
    list-style: none !important;
    padding: 0;
    margin: 0!important;
    counter-reset: ranking-counter; 
    column-count: 3; 
    column-gap: 32px; 
}
@media screen and (max-width: 767px) {
    .program_contents .ranking-column-list {
        column-count: 1;
    }
}
.program_contents .ranking-column-list li {
    list-style: none !important;
    counter-increment: ranking-counter; 
    position: relative;
    padding-left: 36px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    break-inside: avoid;
    display: flex;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 8px;
}
.program_contents .ranking-column-list li::before {
    display: none;
    /* content: counter(ranking-counter) !important;
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    background-color: #888;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; */
}
/* .program_contents .ranking-column-list li:nth-child(1)::before { background-color: #e6b422; }
.program_contents .ranking-column-list li:nth-child(2)::before { background-color: #aeb4b8; }
.program_contents .ranking-column-list li:nth-child(3)::before { background-color: #c4764b; } */



/* =========================================================
   週間キーワードランキング TOP300 用 CSS
   ========================================================= */
.program_contents {
    font-family: sans-serif;
    color: #333;
    line-height: 1.6;
}

/* --- ① 全体の枠組み --- */
.program_contents .trend_ranking {
    background: #fff;
    border: 2px solid #ff7f50; /* テーマカラーをオレンジに */
    border-radius: 8px;
    padding: 24px 16px;
    margin: 30px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    counter-reset: top-rank; 
}

/* メインタイトル */
.program_contents h2.trend_main_title {
    background-color: #ff7f50;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 16px 12px;
    border-radius: 4px;
    margin-top: 0;
    margin-bottom: 24px;
    line-height: 1.4;
}
.program_contents h2.trend_main_title span {
    display: block;
    font-size: 14px;
    margin-top: 4px;
    font-weight: normal;
}

/* グループ見出し（TOP10内用） */
.program_contents .keyword-group-title {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #d35400;
    margin-bottom: 16px;
}
.program_contents .ranking-line {
    border: none;
    border-top: 1px dashed #ff7f50;
    margin: 32px 0 24px 0;
}

/* --- ② TOP 10 のデザイン（バッジ付き） --- */
.program_contents .keyword-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
.program_contents .large {
    counter-increment: top-rank;
    display: inline-flex;
    align-items: center;
    background: #fff8e1;
    color: #d35400;
    font-weight: bold;
    border-radius: 30px;
    border: 1px solid #ffeaa7;
}
/* .program_contents .large::before {
    content: counter(top-rank);
    background: #d35400;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
} */

/* TOP 3 */
.program_contents .keyword-cloud.top-3 .large {
    font-size: 20px; 
    padding: 10px 24px; 
}
/* .program_contents .keyword-cloud.top-3 .large::before {
    width: 28px; 
    height: 28px;
    font-size: 14px;
    margin-right: 10px;
} */
/* .program_contents .keyword-cloud.top-3 .large:nth-child(1)::before { background: #e6b422; }
.program_contents .keyword-cloud.top-3 .large:nth-child(2)::before { background: #aeb4b8; }
.program_contents .keyword-cloud.top-3 .large:nth-child(3)::before { background: #c4764b; } */

/* TOP 4〜10 */
.program_contents .keyword-cloud.top-10-rest {
    margin-top: 16px; 
}
.program_contents .keyword-cloud.top-10-rest .large {
    font-size: 16px;
    padding: 6px 16px;
}
.program_contents .keyword-cloud.top-10-rest .large::before {
    width: 22px;
    height: 22px;
    font-size: 12px;
    margin-right: 8px;
}

/* --- ③ 11位以降のカード枠（グレー背景） --- */
.program_contents .ranking-section {
    background: #fafafa;
    border: 1px solid #eee;
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 30px;
}
.program_contents .ranking-section h3 {
    color: #eb5505;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid #eb5505;
    padding-bottom: 8px;
    margin-top: 0;
    margin-bottom: 20px;
}

/* --- ④ 3列表記のリストデザイン --- */
.program_contents .ranking-list-grid {
    list-style: none !important;
    padding: 0;
    margin: 0!important;
    column-count: 3; /* PCは3列 */
    column-gap: 32px;
}

@media screen and (max-width: 767px) {
    .program_contents .ranking-list-grid {
        column-count: 1; /* スマホは1列 */
    }
}

.program_contents .ranking-list-grid li {
    list-style: none !important;
    counter-increment: trend-counter; 
    position: relative;
    padding-left: 38px; /* 3桁対応の余白 */
    margin-bottom: 12px;
    font-size: 14px;
    color: #444;
    break-inside: avoid;
    display: flex;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px dashed #e0e0e0;
    padding-bottom: 8px;
}

/* 丸い数字アイコン（3桁対応） */
.program_contents .ranking-list-grid li::before {
    display: none;
    /* content: counter(trend-counter) !important;
    position: absolute;
    left: 0;
    width: 26px;
    height: 26px;
    background-color: #888;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: -0.5px; */
}



/* ▼▼ 画像拡大モーダル用のスタイル ▼▼ */
.custom-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 背景を少し暗くする */
    z-index: 99999; /* 画面の一番手前に持ってくる */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 最初は透明 */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* ほわっと表示させるアニメーション */
    cursor: pointer;
}

/* モーダルが開いたときの状態 */
.custom-image-modal.is-active {
    opacity: 1;
    visibility: visible;
}

/* モーダルの中の画像 */
.custom-image-modal img {
    max-width: 90%;
    max-height: 90vh; /* 画面の高さを超えないように調整 */
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transform: scale(0.95); /* 最初は少し小さく */
    transition: transform 0.3s ease; /* ほわっと大きくなるアニメーション */
}

.custom-image-modal.is-active img {
    transform: scale(1); /* 通常サイズに戻す */
}

/* =========================================================
   ▼ img_area, txt_area, contents内の画像リンクを「ふわっと拡大」 ▼ 
   ========================================================= */
.img_area a img,
.txt_area a img,
.program_contents .contents a img {
    transition: all 0.3s ease !important;
}

.img_area a:hover img,
.txt_area a:hover img,
.program_contents .contents a:hover img {
    transform: scale(1.03) !important;
    opacity: 0.9 !important;
}




/* =========================================================
   ▼ 三太郎の日ページ切り替えCSS ▼ 
   ========================================================= */
.program_contents .month-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0!important;
    border-bottom: 2px solid #eb5505;
}
.program_contents .month-tabs li {
    padding: 10px 30px;
    cursor: pointer;
    background-color: #f5f5f5;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
    font-weight: bold;
    color: #666;
    transition: all 0.3s;
}
.program_contents .month-tabs li::before{
display: none;
}
.program_contents .month-tabs li.active {
    background-color: #eb5505;
    color: #fff;
}
.program_contents .month-tabs li:hover:not(.active) {
    background-color: #e0e0e0;
}



/* ==============================================
   ▼ インタビュー記事用 カスタムデザイン ▼
   ============================================== */

/* --- 1. インタビュアーの質問ボックス --- */
.program_contents .contents .interview-q {
    /* いただいた基本カラーを変数で適用 */
    background-color: var(--bg-primary-light, #fff3ee);
    border: 1px solid var(--color-primary, #eb5505);
    color: var(--text-main, #333333);
    border-radius: 6px;
    padding: 1.2rem 1.5rem;
    margin: 3rem 0 1.5rem 0;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: flex-start;
}
.program_contents .contents .interview-q::before {
    content: "Q.";
    color: var(--color-primary, #eb5505);
    font-size: 1.4rem;
    font-family: Arial, sans-serif;
    margin-right: 12px;
    line-height: 1.2;
}

/* --- 2. ゲストの回答エリア --- */
.program_contents .contents .interview-a {
    margin-bottom: 2.5rem;
    padding-left: 1.5rem;
    /* 回答をまとめる薄いグレーの縦ライン */
    border-left: 2px solid var(--border-color, #d1d1d1); 
}

/* 回答者のネームタグ */
.program_contents .contents .speaker {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: bold;
    padding: 0.4rem 1rem 0.4rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    color: var(--text-main, #333333);
}
/* サンドラッグさま（ご指定の赤系・明度高×明度中） */
.program_contents .contents .speaker.sundrug {
    background-color: var(--bg-red-light, #ffebee);
    border-left: 4px solid var(--color-red, #f47a7a);
}
/* 松屋フーズさま（ご指定の青系・明度高×明度中） */
.program_contents .contents .speaker.matsuya {
    background-color: var(--bg-blue-light, #e2eaf7);
    border-left: 4px solid var(--color-blue, #87b3f4);
}

/* 回答のテキスト */
.program_contents .contents .answer-text {
    line-height: 1.8;
    color: var(--text-main, #333333);
}
.program_contents .contents .answer-text p {
    margin-bottom: 0;
}

/* --- 3. 画像のキャプション（パターンA） --- */
.program_contents .contents .img-caption {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-top: -0.5rem;
    margin-bottom: 2rem;
    letter-spacing: 0.05em; /* 文字の間隔を少し開けて上品に */
}
.program_contents .contents .img-caption i {
    color: var(--border-color, #d1d1d1); /* アイコンだけ少し薄い色にして悪目立ちを防ぐ */
    font-size: 1.1rem;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.program_contents .contents .caption-divider {
    margin: 0 0.8rem;
    color: #ccc;
}

/* --- 4. 編集後記（前回のものを変数に対応） --- */
.program_contents .contents .editor-note {
    background-color: var(--bg-gray, #f2f2f2);
    border: 1px solid var(--border-color, #d1d1d1);
    padding: 2rem;
    border-radius: 8px;
    margin-top: 4rem;
    margin-bottom: 3rem;
}
.program_contents .contents .editor-note-title {
    font-weight: bold;
    color: var(--color-primary, #eb5505);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    border-bottom: 2px dashed var(--border-color, #d1d1d1);
    padding-bottom: 0.5rem;
}
.program_contents .contents .editor-note p {
    margin-bottom: 0;
    line-height: 1.7;
    color: var(--text-main, #333333);
}

/* --- 5. 関連リンク（カード型・画像大きめバージョン） --- */
.program_contents .contents .link-card {
    display: flex;
    align-items: center;
    padding: 1.2rem; /* 画像拡大に合わせて余白を少しリッチに */
    border: 1px solid var(--border-color, #d1d1d1);
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--text-main, #333333) !important;
    margin-bottom: 1.2rem;
    background: #fff;
    transition: all 0.3s ease;
}
.program_contents .contents .link-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transform: translateY(-3px);
    border-color: var(--color-primary, #eb5505);
}
.program_contents .contents .link-card img {
    width: 280px; /* ★ここを180pxから280pxに拡大！ */
    height: auto;
    margin-bottom: 0 !important;
    border: 1px solid var(--border-color, #d1d1d1);
    border-radius: 4px;
}
.program_contents .contents .link-card .link-text {
    padding: 0 2rem; /* 画像が大きくなった分、文字との間の余白も広くしました */
    font-weight: bold;
    font-size: 1.2rem; /* テキストも少しだけ大きくしてバランス調整 */
    flex-grow: 1;
}
.program_contents .contents .link-card .link-icon {
    color: var(--color-primary, #eb5505);
    font-size: 1.8rem; /* 矢印アイコンも少し大きく */
    padding-right: 1rem;
}

/* スマホ用調整（関連リンクが縦に並ぶように） */
@media (max-width: 768px) {
    .program_contents .contents .link-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }
    .program_contents .contents .link-card img {
        width: 100%; /* スマホでは画面いっぱいにドーンと表示 */
        margin-bottom: 1rem !important;
    }
    .program_contents .contents .link-card .link-text {
        padding: 0;
        margin-bottom: 1rem;
    }
    .program_contents .contents .link-card .link-icon {
        align-self: flex-end;
    }
}



  /* ==============================================
     ▼ イベントバナーページ用 カスタムデザイン ▼
     ============================================== */
  
  /* --- イベントごとの情報をまとめるカード --- */
  .program_contents .contents .event-card {
      background: #ffffff;
      border: 1px solid var(--border-color, #d1d1d1);
      border-radius: 8px;
      padding: 2rem;
      margin-bottom: 3rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }
  
  .program_contents .contents .event-card h3 {

      padding-bottom: 0.5rem;
      margin-bottom: 1.5rem;
      margin-top: 0 !important;
      font-size: 1.3rem;
      color: var(--text-main, #333333);
  }
  
  /* --- 掲載期間を目立たせるボックス --- */
  .program_contents .contents .event-period-box {
      background-color: var(--bg-gray, #f2f2f2);
 
      padding: 1.2rem 1.5rem;
      border-radius: 0 4px 4px 0;
      margin-bottom: 1.5rem;
  }
  
  .program_contents .contents .event-period-box h4 {
      margin-top: 0;
      margin-bottom: 0.8rem;
      font-size: 1.05rem;
      color: var(--text-main, #333333);
  }
  
  .program_contents .contents .event-period-box ul {
      margin-bottom: 0;
     
  }
  
  .program_contents .contents .event-period-box ul li {
      font-weight: bold;
      color: var(--text-main, #333333);
      margin-bottom: 0.3rem;
      font-size: 1.1rem;
  }
  
  /* --- バナープレビューのギャラリーエリア --- */
  .program_contents .contents .banner-preview-wrapper {
      background-color: var(--bg-gray, #f2f2f2);
      padding: 1.5rem;
      border-radius: 6px;
      margin-top: 2rem;
      /* 修正：中央寄せを廃止し、左寄せに統一 */
  }
  
  .program_contents .contents .banner-preview-wrapper h5 {
      margin-top: 0;
      margin-bottom: 1.5rem;
      font-size: 1rem;
      color: #666666;
  }
  
  .program_contents .contents .banner-preview-wrapper .preview-item {
      margin-bottom: 1.5rem;
  }
  .program_contents .contents .banner-preview-wrapper .preview-item:last-child {
      margin-bottom: 0;
  }
  
  
  .program_contents .contents .banner-preview-wrapper .preview-date {
      display: block;
      font-size: 0.85rem;
      font-weight: bold;
      color: var(--color-primary, #eb5505);
      margin-bottom: 0.5rem;
  }
  
  /* --- スケジュール一覧のカード型レイアウト（文字小さめ・リンク化対応） --- */
  .program_contents .contents .schedule-card {
      display: flex;
      align-items: center;
      border: 1px solid var(--border-color, #d1d1d1);
      border-radius: 6px;
      margin-bottom: 1rem;
      overflow: hidden;
      background: #fff;
      transition: all 0.2s ease;
      text-decoration: none !important; /* カード全体をリンクにするための設定 */
      color: var(--text-main, #333333) !important;
  }
  /* マウスを乗せた時のアクション */
  .program_contents .contents .schedule-card:hover {
      border-color: var(--color-primary, #eb5505);
      
  }
  .program_contents .contents .schedule-card:hover .s-link {
      color: var(--color-primary, #eb5505); /* ホバー時に「対象バナーを確認」をオレンジに */
  }
  
  .program_contents .contents .schedule-card .s-date {
      background-color: var(--bg-gray, #f2f2f2);
      color: var(--text-main, #333333);
      font-weight: bold;
      padding: 1rem 0.8rem;
      width: 290px; /* 文字が小さくなったので少しスリムに */
      flex-shrink: 0;
      border-right: 1px solid var(--border-color, #d1d1d1);
      display: flex;
      align-items: center;
      font-size: 0.87rem; /* ★文字サイズを小さく */
  }
  .program_contents .contents .schedule-card .s-date i {
      color: var(--color-primary, #eb5505);
      margin-right: 0.4rem;
      font-size: 1.1rem;
      margin-top: 4px;
  }
  .program_contents .contents .schedule-card .s-detail {
      padding: 0.8rem 1.5rem;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .program_contents .contents .schedule-card .s-name {
      font-weight: bold;
      font-size: 0.95rem; /* ★文字サイズを小さく */
      display: flex;
      align-items: center;
  }
  .program_contents .contents .schedule-card .s-rate {
      color: var(--color-red-strong, #ff0000);
      font-weight: bold;
      margin-right: 0.8rem;
      background: var(--bg-red-light, #ffebee);
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      font-size: 0.85rem; /* ★文字サイズを小さく */
      white-space: nowrap;
  }
  .program_contents .contents .schedule-card .s-link {
      font-size: 0.85rem; /* ★文字サイズを小さく */
      font-weight: bold;
      white-space: nowrap;
      margin-left: 1rem;
      color: #888; /* 通常時は控えめな色にしてスッキリ見せる */
      transition: color 0.2s ease;
  }
  
  /* スマホ用調整 */
  @media (max-width: 768px) {
      .program_contents .contents .schedule-card {
          flex-direction: column;
          align-items: stretch;
      }
      .program_contents .contents .schedule-card .s-date {
          width: 100%;
          border-right: none;
          border-bottom: 1px solid var(--border-color, #d1d1d1);
          padding: 0.8rem 1rem;
      }
      .program_contents .contents .schedule-card .s-detail {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.6rem;
      }
      .program_contents .contents .schedule-card .s-name {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
      }
      .program_contents .contents .schedule-card .s-link {
          margin-left: 0;
          margin-top: 0.3rem;
          align-self: flex-end;
      }
  }



    /* ==============================================
     ▼ 短時間限定クーポンページ用 カスタムデザイン ▼
     ============================================== */
  
  /* --- クーポン情報をまとめるカード --- */
  .program_contents .contents .coupon-card {
      background: #fdfdfd;
      border: 1px solid var(--border-color, #d1d1d1);
      border-radius: 8px;
      padding: 1.5rem 2rem;
      margin-bottom: 2rem;

  }
  
  .program_contents .contents .coupon-card .coupon-amount {
      display: inline-block;
      font-size: 1.2rem;
      font-weight: bold;
      color: var(--color-primary, #eb5505);
      background: var(--bg-primary-light, #fff3ee);
      padding: 0.5rem 1rem;
      border-radius: 4px;
      margin-bottom: 1rem;
      margin-top: 0;
  }
  
  .program_contents .contents .coupon-card .coupon-date {
      font-weight: bold;
      font-size: 1.05rem;
      color: var(--text-main, #333333);
      margin-bottom: 1.5rem;
      border-bottom: 1px dashed var(--border-color, #d1d1d1);
      padding-bottom: 0.8rem;
  }
  .program_contents .contents .coupon-card .coupon-date i {
      color: #888;
      margin-right: 0.5rem;
  }
  
  /* --- リンク情報を囲むボックス --- */
  .program_contents .contents .coupon-link-box {
      margin-bottom: 0;
  }
  .program_contents .contents .coupon-link-item {
      margin-bottom: 1.5rem;
  }
  .program_contents .contents .coupon-link-item:last-child {
      margin-bottom: 0;
  }
  .program_contents .contents .coupon-link-item .link-label {
      display: block;
      font-weight: bold;
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 0.5rem;
  }
  .program_contents .contents .coupon-link-item .link-label i {
      color: var(--color-primary, #eb5505);
      margin-right: 0.4rem;
  }
  
  /* --- URL表示用のボックス（コピペ＆クリック ハイブリッド型） --- */
  .program_contents .contents .url-box-group {
      display: flex;
      align-items: stretch;
      background: #f4f6f9;
      border: 1px solid #e0e6ed;
      border-radius: 4px;
      overflow: hidden;
      margin-top: 0.2rem;
  }
  
  /* 左側：コピペ用テキストエリア */
  .program_contents .contents .url-box-text {
      flex-grow: 1;
      padding: 0.8rem 1rem;
      font-family: Consolas, Monaco, monospace;
      font-size: 0.9rem;
      color: #444;
      word-break: break-all;
      cursor: text;
     
  }
  .program_contents .contents .url-box-text .target-path {
      color: var(--color-red-strong, #ff0000);
      font-weight: bold;
      background: var(--bg-red-light, #ffebee);
      padding: 0.2rem 0.4rem;
      border-radius: 3px;
 /* ★ここがポイント！1クリックで文字全体を選択状態にします★ */
      -webkit-user-select: all;
      user-select: all; 
  }
  
  /* 右側：リンクを開くボタン */
  .program_contents .contents .url-box-link {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-left: 1px solid #e0e6ed;
      padding: 0 1.2rem;
      color: var(--color-primary, #eb5505) !important;
      font-weight: bold;
      font-size: 0.9rem;
      text-decoration: none !important;
      white-space: nowrap;
      transition: all 0.2s ease;
  }
  .program_contents .contents .url-box-link:hover {
      background: var(--bg-primary-light, #fff3ee);
      color: var(--color-primary, #eb5505) !important;
  }
  .program_contents .contents .url-box-link i {
      margin-right: 0.4rem;
  }
  
  /* 画像リンク用のボタン風スタイル */
  .program_contents .contents .img-link-btn {
      display: inline-flex;
      align-items: center;
      color: var(--color-blue, #87b3f4) !important;
      font-weight: bold;
      font-size: 0.95rem;
      text-decoration: underline;
      transition: opacity 0.2s ease;
  }
  .program_contents .contents .img-link-btn:hover {
      opacity: 0.7;
  }
  
  /* --- 見出し用スタイル調整 --- */
  .program_contents .contents h3.month-title {
      background: var(--text-main, #333333);
      color: #fff;
      padding: 0.8rem 1.5rem;
      border-radius: 4px;
      font-size: 1.2rem;
      margin-top: 3rem;
      margin-bottom: 1.5rem;
  }



  /* ==============================================
   ▼ ロードマップページ用 カスタムデザイン ▼
   ============================================== */

/* --- 冒頭の4STEP カード型ナビゲーション --- */
.program_contents .contents .step-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

.program_contents .contents .step-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #d1d1d1);
    border-radius: 8px;
    padding: 1.5rem;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.program_contents .contents .step-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

@media (min-width: 768px) {
    .program_contents .contents .step-card {
        width: calc(25% - 1.125rem); /* 4カラム */
        padding: 1rem;
    }
}

.program_contents .contents .step-card img {
    margin-bottom: 1rem;
    border-radius: 4px;
    width: 100%;
    height: auto;
    transition: opacity 0.2s;
}
.program_contents .contents .step-card img:hover {
    opacity: 0.8;
}

.program_contents .contents .step-card h4 {
    font-size: 0.95rem;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-primary, #eb5505);
    padding-bottom: 0.5rem;
    color: var(--text-main, #333333);
    line-height: 1.5;
}

/* カード内のリスト */
.program_contents .contents .step-card-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0;
}

.program_contents .contents .step-card-list li {
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
    padding-left: 1rem;
    position: relative;
}

.program_contents .contents .step-card-list li::before {
    content: "\f105"; /* FontAwesomeの矢印 */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    color: var(--color-primary, #eb5505);
}

.program_contents .contents .step-card-list li a {
    color: var(--text-main, #333333);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

.program_contents .contents .step-card-list li a:hover {
    color: var(--color-primary, #eb5505);
}




  /* ==============================================
   ▼ ステップアップガイドのデザイン
   ============================================== */


.program_contents .contents .img_link{
display: flex;
    flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 3rem;
}

.program_contents .contents .img_link div{
text-align: center;
}

.program_contents .contents .img_link div img{
margin-bottom: 0.2rem!important;
}

.program_contents .contents .img_link div p{
background-color: #EB5505;
    color: #fff;
    padding: 0.5rem 0.5rem;
    border-radius: 6px;
margin: 0 !important;
    line-height: 1.4rem;
}




.program_contents .contents .img_link_h2{
text-align: center!important;
    border-bottom: solid 2px #b1b1b1!important;
}

.program_contents .contents .img_link_border{
margin-bottom: 10px;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    border-left: 1px solid #e9e9e9;
}
.program_contents .contents .img_link_p{
color: #333!important;
    background-color: #fff!important;
}




.program_contents .contents .img_ling_bg{
width: 100%;
    height: 15px;
    background-color: #eb5505;
}



/* =========================================================
   ▼ クリックできるチェックリスト用のCSS ▼
   ========================================================= */
.program_contents .contents .custom-todo-list {
    list-style: none !important; /* 元のリストの「・」を消す */
    padding-left: 0 !important;
    margin: 1.5rem 0;
    background-color: #fcfcfc;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 1.5rem !important;
}

.program_contents .contents .custom-todo-list li {
    margin-bottom: 1rem;
}

.program_contents .contents .custom-todo-list li::before {
    display: none!important;
}

.program_contents .contents .custom-todo-list li:last-child {
    margin-bottom: 0;
}

/* ラベル全体をクリック可能にする */
.program_contents .contents .custom-todo-list label {
    display: flex;
    align-items: flex-start;
    cursor: pointer; /* マウスを乗せると指のマークになる */
    margin-bottom: 0;
    line-height: 1.6;
}

/* チェックボックス本体のデザイン調整 */
.program_contents .contents .custom-todo-list input[type="checkbox"] {
    margin-top: 0.3rem; /* テキストの1行目と高さを合わせる */
    margin-right: 12px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0; /* チェックボックスが潰れないようにする */
    accent-color: #eb5505; /* チェックを入れたときの色（オレンジ） */
}

/* チェックされた状態のテキストを少し薄くする（お好みで削除可能） */
.program_contents .contents .custom-todo-list input[type="checkbox"]:checked + .check-text {
    color: #888888;
}

.program_contents .contents .custom-todo-list .check-text {
    color: #333333;
    font-size: 0.95rem;
    transition: color 0.2s;
}


@media screen and (min-width: 769px) {
    a:visited {
        color: var(--text-link)!important;
    }
}