@charset "utf-8";

/* =========================================
   基本設定・変数
========================================= */
:root {
    --bg-yellow: #fdf1bf;
    --bg-yellow-light: #fffbeb;
    --main-blue: #403b95;
    --text-brown: #4A3B32;
    --font-base: 'Zen Maru Gothic', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    color: var(--text-brown);
    line-height: 1.6;
    background-color: var(--bg-yellow-light);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; vertical-align: bottom; }

a.NCa{text-decoration: underline!important;}
a.NCa:hover{text-decoration:none!important;}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   PC用ヘッダー（青い帯）設定
========================================= */
.lower-header-wrapper {
    font-family: 'Zen Maru Gothic', sans-serif !important;
    position: relative; /* メニューをここ基準で配置する */
    z-index: 1000;
}

.lower-header-bar {
    background-color: var(--main-blue);
    padding: 10px 0;
    color: white;
    position: relative;
    z-index: 1002; /* メニューより手前に表示 */
}

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

/* ロゴ */
.logo-text {
    font-weight: 900;
    font-size: 1.4rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topicon{
    width:80px;
}

/* PC用 MENUボタン */
.pc-menu-btn {
    background: white;
    color: var(--main-blue);
    border-radius: 5px;
    padding: 5px 20px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s;
    box-sizing: border-box;
}
.pc-menu-btn:hover {
    opacity: 0.9;
}

.pc-menu-btn .btn-text {
    font-weight: 900;
    font-size: 1rem;
    min-width: 3em; /* 文字が変わっても幅がガタつかないように */
    text-align: center;
}

/* PCボタン内のハンバーガーアイコン */
.pc-menu-btn .btn-icon {
    width: 20px;
    height: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pc-menu-btn .btn-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--main-blue);
    transition: 0.3s;
}

/* アクティブ時（閉じるボタン）のアイコン変化 */
.pc-menu-btn.active .btn-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.pc-menu-btn.active .btn-icon span:nth-child(2) {
    opacity: 0;
}
.pc-menu-btn.active .btn-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* =========================================
   修正：メニュー（オーバーレイ）の設定
========================================= */
.nav-overlay {
    display: none;
    position: absolute;
    top: 100%; /* 青い帯の真下 */
    left: 0;
    width: 100%;
    
    /* ▼▼▼ 修正：高さを画面いっぱいにして背景をクリックしやすくする ▼▼▼ */
    /* 青い帯の高さ(50px)を引いた高さにする */

    
    background-color: rgba(180, 180, 255, 0.705); /* 紫っぽい背景 */
    padding: 40px 0 60px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 1001;
}

/* ▼▼▼ 追加：メニュー内閉じるボタンのデザイン ▼▼▼ */
.nav-close-btn-wrapper {
    text-align: center;
    margin-bottom: 30px;
}
.nav-close-btn {
    display: inline-block;
    background: #5D4037; /* 茶色 */
    color: white;
    padding: 10px 40px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    transition: 0.2s;
}
.nav-close-btn:hover {
    transform: translateY(2px);
    box-shadow: none;
}
.nav-close-btn span {
    font-size: 1.2rem;
    margin-right: 5px;
}

.nav-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* メニューアイテムのデザイン（TOPページと同様） */
.nav-item {
    background: white;
    border: 3px solid #403b95;
    box-shadow: 4px 4px 0 #2a2666;
    border-radius: 15px;
    color: #403b95;
    font-size: 1.5rem;
    font-weight: 800;
    line-height:1.8;
    position: relative;
    margin-top: 30px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    transition: 0.2s;
}

/* アイコン（丸い部分） */
.nav-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    line-height: 54px;
    font-size: 30px;
    border-radius: 50%;
    top: -30px;
    /* アニメーション用 */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- ホバー・アクティブ時の動き --- */
.nav-item:hover {
    background-color: #eff1ff; 
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #2a2666; 
}

.nav-item:hover .nav-icon {
    transform: translateY(-5px) scale(1.1);
}

.nav-item:active {
    transform: translate(4px, 4px);
    box-shadow: none;
    background-color: #e0e4ff;
}


/* =========================================
   メインコンテンツ（しましま背景エリア）
========================================= */
.lower-main-bg {
    /* TOPページと同じしましま設定 */
    background-image: linear-gradient(
        90deg,
        var(--bg-yellow) 0%,
        var(--bg-yellow) 50%,
        var(--bg-yellow-light) 50%,
        var(--bg-yellow-light) 100%
    );
    background-size: 40px 100%;
    
    padding: 50px 0 100px;
    min-height: 80vh;
}

/* コンテナ（箱の幅を決める外枠） */
/* ※ここは白背景にせず、透明のままにします */
.container {
    max-width: 1180px; /* 少しスリムにして上品に */
    margin: 0 auto;
    padding: 0 20px;
}

/* -----------------------------------------
   1. タイトル専用の白い箱 (H1) - 元気でかわいいVer.
----------------------------------------- */
.page-title-box {
    background: white;
    border-radius: 30px;
    padding: 40px;
    text-align: center;
    margin-bottom: 40px; /* 下の箱との隙間 */
    
  

    
    max-width: 500px; 
    margin-left: auto;
    margin-right: auto;
    
}



/* タイトル上のアイコン */
.title-icon img {
    width: 100px; /* 少し大きく */
    height: auto;
    margin-bottom: 15px;
    
    /* ▼▼▼ 追加：少し傾けて、影をつけてポップに ▼▼▼ */
    transform: rotate(-8deg); /* 左に少し傾ける */
    transition: 0.3s; /* ホバー時の動き用 */
}

/* （おまけ）箱にマウスが乗ったらアイコンが起き上がる */
.page-title-box:hover .title-icon img {
    transform: rotate(0deg) scale(1.1); /* 傾きを戻して少し拡大 */
}


/* H1文字本体 */
.page-title-box h1 {
    display: block;
    font-family: 'Zen Maru Gothic', sans-serif; /* フォント指定を念のため */
    font-size: 2.8rem; /* 文字サイズを大きく */
    font-weight: 900;  /* 極太 */
    letter-spacing: 0.1em;
    margin: 0;
    line-height: 1.2;

    /* ▼▼▼ 変更2：元気な袋文字デザインにする ▼▼▼ */
    color: var(--main-blue); /* 文字の色（青） */
    
    /* 太い白い縁取りをつける */
    -webkit-text-stroke: 8px white;
    paint-order: stroke fill; /* 線が文字を潰さないように */
    
    /* 白いフチの外側に、青っぽい影を落として立体的にする */
    filter: drop-shadow(3px 5px 2px rgba(64, 59, 149, 0.3));
}

/* スマホ対応の微調整 */
@media (max-width: 768px) {
    .page-title-box {
        padding: 30px 20px;
    }
    .title-icon img {
        width: 90px; /* スマホでは少し小さく */
    }
    .page-title-box h1 {
        font-size: 2rem; /* スマホでの文字サイズ */
        -webkit-text-stroke: 6px white; /* フチも少し細く */
    }
}

/* -----------------------------------------
   2. 本文専用の白い箱
----------------------------------------- */
.lower-content-box {
    background: white;
    border-radius: 30px; /* 角丸 */
    padding: 40px 80px 60px;  /* 内側の余白（広めにとる） */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    min-height: 500px;
}

/* 見出しのデザイン（変更なし） */
/* -----------------------------------------
   青い帯（左線＋白と水色のしましま背景）
----------------------------------------- */
.bar-blue {
    /* 左側の青い線 */
    border-left: 10px solid var(--main-blue);
    
    /* 背景：白と水色のボーダー（斜めストライプ） */
    /* ※横縞にしたい場合は -45deg を 0deg に変更してください */
    background-image: repeating-linear-gradient(
        -45deg,
        #ffffff,
        #ffffff 10px,  /* 白の幅 10px */
        #dcf6ff 10px,  /* 水色の開始位置 */
        #dcf6ff 20px   /* 水色の終了位置（幅10px） */
    );
    
    padding: 15px 20px;
    margin-bottom: 20px;
}

.bar-blue h2 {
    font-size: 1.5rem;
    margin: 0;
    
    /* ▼▼▼ 文字色を黒に変更 ▼▼▼ */
    color: #333333; 
    
    font-weight: 700;
}


/* -----------------------------------------
   H2：タブ付き青ボックス（Checkアイコン）
----------------------------------------- */
.h2-tab-blue {
    position: relative;
    color: #333;              /* 文字色は読みやすい黒系に調整 */
    background: #d0ecff;      /* 背景色（薄い水色） */
    line-height: 1.4;
    padding: 15px 20px;       /* 内側の余白を少し広めに */
    margin-top:80px;
    margin-bottom: 20px;      /* 上にタブ分の余白(40px)を確保 */
    border-radius: 0 5px 5px 5px;
    
    font-size: 1.5rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .h2-tab-blue {font-size: 1.2rem;}
}

/* 上に乗っかるタブ部分 */
.h2-tab-blue:after {
    position: absolute;
    /* Font Awesomeとゴシック体を指定 */
    font-family: "Font Awesome 5 Free", 'Zen Maru Gothic', sans-serif;
    font-weight: 800;
    
    /* ▼ アイコンコード(\f00c) + 文字 */
    content: '\f00c Check'; 
    
    background: #2196F3;      /* タブの背景色（濃い水色） */
    color: #fff;              /* タブの文字色 */
    left: 0px;
    bottom: 100%;             /* 本体の真上に配置 */
    border-radius: 5px 5px 0 0;
    padding: 5px 15px 3px;    /* タブの大きさ調整 */
    font-size: 0.8rem;        /* タブの文字サイズ */
    line-height: 1;
    letter-spacing: 0.05em;
}

.mgtTOPTAB{margin-top:20px!important;}

/* -----------------------------------------
   H2：黄色い太い斜線で挟んだデザイン (／文字＼)
----------------------------------------- */
.h2-cute-slash-yellow {
    text-align: center;       /* 中央揃え */
    font-size: 1.8rem;
    font-weight: 700;
    color: #4A3B32;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    
    /* 線と文字の位置を揃えるための設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;                /* 線と文字の間隔 */
}

/* 共通の線の設定（黄色くて太い棒） */
.h2-cute-slash-yellow::before,
.h2-cute-slash-yellow::after {
    content: "";              /* 空要素を作る */
    display: inline-block;
    width: 40px;              /* 線の長さ */
    height: 3px;              /* 線の太さ */
    background-color: #FFC107; /* 黄色（山吹色） */
    border-radius: 6px;       /* 角を丸くしてかわいく */
}

/* 左側の線（右上がり ／ ） */
.h2-cute-slash-yellow::before {
    transform: rotate(45deg); /* 45度傾ける */
}

/* 右側の線（左上がり ＼ ） */
.h2-cute-slash-yellow::after {
    transform: rotate(-45deg);  /* 逆方向に45度傾ける */
}

@media (max-width: 768px) {
    .h2-cute-slash-yellow{
        font-size:1.2rem;
    }
}

/* -----------------------------------------
   黄色い帯（H3：オレンジ寄り・右リボン型・細め）
----------------------------------------- */
h3.bar-yellow, /* h3タグにクラスがついている場合 */
.bar-yellow {
    /* 背景色：オレンジ寄りの黄色 */
    background-color: #FFC107; 
    border-radius:5px;
    /* 文字色：黒 */
    color: #333333;
    
    /* ▼▼▼ ここを変更：H2より縦幅を狭くする ▼▼▼ */
    /* 上下を 8px に縮小（H2は15pxなので、約半分くらいの余白感になります） */
    /* 右(40px)は切り込み用、左(20px)は通常余白 */
    padding: 8px 40px 8px 20px;
    
    margin-bottom: 20px;
    
    /* フォント設定 */
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.5; /* 行間も少し引き締める */
    
    /* 右端のリボン切り込み */
    clip-path: polygon(
        0 0, 
        100% 0, 
        calc(100% - 15px) 50%, /* 帯が細くなったので、へこみも少し浅く(15px)調整 */
        100% 100%, 
        0 100%
    );
}
/* -----------------------------------------
   ピンク下線（H4：ストライプ線）
----------------------------------------- */
h4.line-pink,
.line-pink {
    /* 文字色：茶色 */
    color: var(--text-brown);
    
    font-size: 1.2rem; /* H3より少し小さく */
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 5px; /* 文字と線の隙間 */
    padding-left: 20px;
    
    /* 以前の単色ボーダーを削除 */
    border-bottom: none;
    
    /* ▼▼▼ ストライプの下線を作る設定 ▼▼▼ */
    /* 背景画像として「斜めのしましま」を描画し、一番下に配置します */
    background-image: repeating-linear-gradient(
        -45deg,
        #ff80ab,       /* ピンク */
        #ff80ab 4px,   /* ピンクの幅 */
        #ffffff 4px,   /* 白の開始 */
        #ffffff 8px    /* 白の終了（幅4px） */
    );
    
    /* 線のサイズと配置 */
    background-size: 100% 5px; /* 横幅は100%、高さ（太さ）は5px */
    background-repeat: no-repeat;
    background-position: left bottom; /* 左下に配置 */
    
    display: block; /* 横幅いっぱいに線を引く */
    width: 100%;
}

/* -----------------------------------------
   緑のドット下線（H5）
----------------------------------------- */
h5.dot-green,
.dot-green {
    color: var(--text-brown);
    
    font-size: 1.1rem; /* H4よりさらに少し小さく */
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 5px;
    padding-left: 20px;
    
    /* ▼▼▼ 緑のドット線を作る設定 ▼▼▼ */
    /* 3pxの太さの点線を引く */
    border-bottom: 3px dotted #4CAF50; 
    
    width: 100%;
    display: block;
}

h6{
    color: var(--text-brown);
    font-size: 1.1rem; /* H4よりさらに少し小さく */
    font-weight: 600;
    padding-bottom: 5px;
    padding-left: 20px;

}

p {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
    line-height: 2;
    padding:0 20px;
}

.ol_blue{
    counter-reset:number; /*数字をリセット*/
    list-style-type: none!important; /*数字を一旦消す*/
    padding:0.5em;
}

.ol_blue li{
    font-size:1rem;
    position: relative;
    line-height: 1.5em;
    padding: 0.5em 0.5em 0.5em 50px;
    font-weight:500;
    color:#333;
}

.ol_blue li:before{
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display:inline-block;
    background: #2196F3;
    color: white;
    font-weight:600;
    font-size: 1.1rem;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-left:15px;
    border-radius:3px;
}

.ul_blue{
    list-style-type:disc;
    padding:0.5em;
    padding-left: 25px;
}

.ul_blue li{
    font-size:1rem;
    position: relative;
    line-height: 1.5em;
    padding: 0.5em 0.5em 0.5em 5px;
    font-weight:500;
    color:#333;
    margin-left:25px;
}

.ul_blue ::marker {
  color: #2196F3;
}

.box_pink {
    padding: 0.2em 0.5em;
    margin: 30px 10px;
    color: #333;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.box_pink p {
    margin: 0; 
    padding: 10px;
    font-size:1rem;
    font-weight:500;
    line-height: 1.5em;
}

/* ふきだしデザイン */
.fukidashi {
  width: 100%;
  margin: 20px 0;
  overflow: hidden;
}

.fukidashi .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}
/* ふきだしデザインEND */

/* DLリスト */
.dl_NC{
    padding:20px;
    font-size:1rem;
    font-weight: 500;
    color:#333;
}
.dl_NC .dl_NC_list {
  display: flex;
}
.dl_NC .dl_NC_list dt,
.dl_NC .dl_NC_list dd {
  padding: 5px;
}
.dl_NC .dl_NC_list dt{
    font-weight: 600;
}
/* DLリスト END */

.NCdiv{
    margin:0 1.5em 2em;
}

/* スマホ対応 */
@media (max-width: 768px) {
    /* タイトル箱 */
    .page-title-box {
        padding: 30px 20px;
        margin-bottom: 30px;
    }
    .page-title-box h1 {
        font-size: 1.8rem;
    }
    
    /* 本文箱 */
    .lower-content-box {
        padding: 40px 25px; /* スマホでは余白を狭く */
        border-radius: 20px;
    }
}

/* =========================================
   SNSボタン（X / Facebook）
========================================= */

/* ボタン共通スタイル */
.sns-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 100%;
    max-width: 300px;        /* 最大幅 */
    
    /* ▼▼▼ 修正：中央寄せを解除し、下余白のみ設定 ▼▼▼ */
    margin-bottom: 20px;
    /* margin: 0 auto 20px;  ←これを削除しました */
    
    padding: 12px 20px;
    background-color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
    box-sizing: border-box;
}

/* ホバー時 */
.sns-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    opacity: 0.9;
}

/* アイコン枠 */
.btn-icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon svg {
    width: 100%;
    height: 100%;
}

/* テキスト */
.btn-text {
    font-size: 1.2rem;
    font-weight: 800;
    font-family: 'Zen Maru Gothic', sans-serif;
    letter-spacing: 0.05em;
}

/* --- X (Twitter) --- */
.btn-x {
    border: 2px solid #000;
    color: #000;
}
.btn-x:hover{
    background-color: #eeeeee;
}

/* --- Facebook --- */
.btn-fb {
    border: 2px solid #1877F2;
    color: #1877F2;
}
.btn-fb:hover{
    background-color: #dbeaff;
}
.btn-fb svg { fill: #1877F2; }

/* --- YouTube --- */
.btn-yt {
    border: 2px solid #FF0000; /* YouTubeレッドの枠線 */
    color: #FF0000;            /* YouTubeレッドの文字 */
}
.btn-yt:hover{
    background-color: #ffe1e1;
}
.btn-yt svg {
    fill: #FF0000;             /* ロゴの色 */
}

.divP{
    padding:0;
}


/* =========================================
   動画ページ用スタイル
========================================= */

/* セクション全体の余白 */
.video-page-section {
    padding: 60px 0;
}

/* ----------------------------------
   カード共通デザイン
---------------------------------- */
.video-card {
    background: #fff;

    /* border-radius: 10px; もし角丸にしたければコメントアウト解除 */
    overflow: hidden; /* 角丸からはみ出ないように */
    display: flex;
    flex-direction: column;
    height: 100%; /* 高さを揃える */
}

/* カードヘッダー（タイトル部分） */
.card-header {
    padding: 10px 20px;
    border-bottom: 2px solid #333;
    font-weight: bold;
    text-align: center; /* 左寄せなら left に変更 */
}
.card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
}

/* カードフッター（説明文部分） */
.card-footer {
    padding: 15px 20px;
    border-top: 2px solid #333;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1; /* 内容が少なくても下まで伸ばす */
    display: flex;        /* 上下中央揃え用 */
    align-items: center;  /* 上下中央揃え用 */
    justify-content: center;
}
.card-footer p {
    margin: 0;
    padding: 0; /* 既存のpタグのpaddingを打ち消し */
}




/* ----------------------------------
   動画埋め込みエリア（レスポンシブ対応）
---------------------------------- */
.card-video {
    position: relative;
    width: 100%;
    /* アスペクト比 16:9 を維持する設定 */
    padding-bottom: 56.25%; 
    background: #000; /* 読み込み前の背景 */
}

.card-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ----------------------------------
   1. 上段：2列グリッド
---------------------------------- */
.video-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1で分割 */
    gap: 40px; /* カード間の隙間 */
    margin-bottom: 60px;
}


/* ----------------------------------
   2. 中段：テキストエリア
---------------------------------- */
.video-text-area {
    text-align: center; /* テキスト全体を中央寄せ */
    max-width: 800px;
    margin: 0 auto 60px; /* 下に余白 */
}
.video-text-area p {
    text-align: left;   /* 本文は左寄せ（読みやすくするため） */
    display: inline-block; /* 中央寄せの中で左寄せにするテクニック */
    text-align: justify; /* 両端揃え（お好みで） */
}


/* ----------------------------------
   3. 下段：中央配置
---------------------------------- */
.video-center-row {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

/* 下段のカードサイズ調整（上段と同じ幅にするか、少し広くするか） */
.video-center-row .video-card {
    width: 100%;
    max-width: 600px; /* 上段の1つ分より少し大きいくらいがバランス良い */
}

/* =========================================
   中央にドットが並ぶ HR デザイン
========================================= */
hr.dot-line {
    display:block!important;
    border: none;             /* 元の線を消す */
    height: 10px;             /* ドットの大きさ */
    background: none;         /* 背景なし */
    position: relative;
    margin: 40px 0;           /* 上下の余白 */
    text-align: center;       /* 中央寄せ */
    overflow: visible;        /* はみ出し許可 */
}

/* 疑似要素でドットを描画 */
hr.dot-line::after {
    content: "";
    display: inline-block;
    vertical-align: top;
    
    /* ドットのサイズ */
    width: 10px;
    height: 10px;
    
    /* ドットの形（丸） */
    border-radius: 50%;
    
    /* 色（黄色） */
    background-color: #ff80ab; 
    
    /* 【影を使ってドットを増やすテクニック】 */
    /* 中心から左右に影を落としてドットを3つに見せています */
    box-shadow: 
        20px 0 0 #ff80ab,  /* 右に1つ */
        -20px 0 0 #ff80ab, /* 左に1つ */
    
    
       40px 0 0 #ff80ab, -40px 0 0 #ff80ab;
    
}

/* ----------------------------------
   スマホ対応 (768px以下)
---------------------------------- */
@media (max-width: 768px) {
    .video-grid-2col {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 30px;
    }
    
    .video-text-area {
        padding: 0 10px;
    }
    
    .video-center-row .video-card {
        max-width: 100%; /* スマホでは横幅いっぱい */
    }
}





@media (min-width: 769px) {
    .nav-close-btn {
        display: none;
    }
}
/* =========================================
   スマホ用設定 (768px以下) の修正版
========================================= */
@media (max-width: 768px) {

    /* --- 1. PCヘッダーの制御 --- */
    /* ナビ(navOverlay)はこの中にあるため、display:noneにすると
       ナビごと消えてしまいます。高さ0にして中身（ナビ）だけ出せるようにします。 */
    .lower-header-wrapper {
        display: block; 
        height: 0;
        overflow: visible; /* はみ出したナビを表示許可 */
        z-index: 9999;     /* 最前面へ */
    }
    
    .lower-header-bar { 
        display: none;     /* PC用の青い帯だけは消す */
    }


    /* --- 2. メニュー本体（navOverlay） --- */
    .nav-overlay {
        /* position:fixed で画面全体を覆う */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;      /* フォールバック */
        height: 100dvh;     /* アドレスバー考慮 */
        
        background-color: rgba(255, 251, 234, 0.98); /* 背景色 */
        z-index: 9998;      /* ボタンよりは下、コンテンツより上 */
        padding: 0;
        
        /* スクロール設定 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        
        /* 初期状態はJSで制御するためCSSではhidden */
        display: none;
    }

   .nav-container {
        padding: 30px 20px 120px; /*  下に余白 */
    }
    
    /* グリッドを縦並びに */
  /*    .nav-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    } */
    .nav-grid {
        opacity: 1;
        display: flex;
        top: 0;
        left: 0;
        width: 100%;
        
        /* ▼▼▼ 修正：スマホのアドレスバー対策 ▼▼▼ */
        height: 100vh;       /* 古いブラウザ用 */
        height: 100dvh;      /* 新しい単位（アドレスバーを除いた高さ） */
        
        background-color: rgba(255, 251, 234, 1);
        z-index: 9999;
        
        /* ▼▼▼ 修正：下の余白をたっぷり取って見切れを防ぐ ▼▼▼ */
        padding: 30px 20px 120px; 
        
        /* ▼▼▼ 修正：スクロールを滑らかにする設定 ▼▼▼ */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; 
        
        /* ▼▼▼ 追加：パディングを含めたサイズ計算にする ▼▼▼ */
        box-sizing: border-box;
        
        /* 縦並び */
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* メニュー項目 */
    .nav-item {
        width: 90%;      /* 幅を広めにとる */
        margin: 0;
        background: white;
        min-height: 60px; /* 高さを少し低く */
        height: auto;     /* 自動調整 */
        padding: 10px 20px;
        
        /* 横並び（左アイコン・右テキスト）に変更 */
        display: flex;
        flex-direction: row; 
        align-items: center;
        justify-content: flex-start; /* 左寄せ */
        
        /* 文字サイズを小さく */
        font-size: 1.1rem;
    }
    /* ▼▼▼ 追加：スマホメニューでは改行タグ（<br>）を消して1行にする ▼▼▼ */
    .nav-item br {
        display: none;
    }

    /* アイコンの位置調整 */
    .nav-item .nav-icon {
        /* 絶対配置(position:absolute)を解除して、普通の要素として配置 */
        position: static; 
        width: 40px;      /* アイコン枠を小さく */
        height: 40px;
        line-height: 36px;
        font-size: 20px;  /* 中の画像サイズ基準 */
        margin-right: 15px; /* テキストとの間隔 */
        top: 0;
        
        /* 画像サイズ調整 */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-item .nav-icon img {
        width: 100%;
        height: auto;
    }

    /* 4. 閉じるボタンのデザイン（控えめ） */
    .nav-close-btn {
        display: block;
        width: 120px;
        min-width: 120px; 
        margin-bottom: 20px;
        padding: 10px 20px;
        text-align: center;
        background-color: #5D4037;
        color: white;
        font-weight: bold;
        border-radius: 50px;
        cursor: pointer;
        font-size: 0.9rem;
        box-shadow: none; 
    }


    /* --- 3. メニュー展開時のオレンジバー非表示設定 --- */
    /* JSでbodyに nav-open クラスがついたら消す */
    body.nav-open .nasva-mobile-bar {
        display: none !important;
    }
}