html {
  overflow: auto;
  font-size: 16px;
}

/* Google Fontsから読み込み */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

body {
  position: relative;
  text-align: center;
  font-family: 
    -apple-system, BlinkMacSystemFont,  /* macOS用サンセリフ */
    "Manrope", Roboto, Helvetica,      /* 英文用 */
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; /* 和文用 */
  background-color: #181818;
}

a {
  display: inline-block;
  color: inherit;
  transition: 0.3s ease-in;
  color: #00ff00;
}
img {
  width: 100%;
}

button {
  outline: none;
  border: none; /* 必要ならボーダーもリセット */
}
button:focus {
  outline: none;
}





/* =====================================================
Layout
===================================================== */
.pc-view {
  position: relative;
  width: 100%;
  height: 100dvh;
}
.pc-view__content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  height: 100vh;
  width: calc(100vw - calc(375px + 151px));
  display: none;
}
.sp-view {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  z-index: 10;
  margin-left: auto;
  margin-right: 151px;
}
.sp-view__container {
  overflow-x: hidden;
  background: linear-gradient(90deg, #009be4 0%, #0066b3 100%);
}


.br-pc {
  display: none;
}

.br-sp {
  display: block;
}


/* =====================================================
Content
===================================================== */

#headder {
  width: 100%;
  text-align: center;
  padding-top: 94px;
  padding-bottom: 40px;
}

#headder h1 {
  width: 254px;
  height: 88px;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-size: contain;     /* 枠に収まるように自動縮小 */
  margin: 0 auto;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


.navbar {
  /* 固定のための重要設定 */
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;
  top: 0;                   /* ブラウザの最上部で止まるように指定 */
  z-index: 1000;            /* 他の要素の下に隠れないように前面へ */

  /* 見た目の調整（必要に応じて） */
  width: 100%;
  opacity: 0.8;
}

/* リスト全体のスタイル */
.nav-list {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #000;
  padding-bottom: 20px;
  padding-top: 20px;
  /* 要素の間隔を指定 */
  gap: 24px; 
}

.nav-item {
  width: 180px; /* ボタン1つの幅は維持 */
  /* ...その他のスタイル... */
}

/* リンクの装飾（クリックしやすくするため、枠いっぱいに広げる） */
.nav-item a {
  display: block;              /* ボタン全体をクリック可能にする */
  line-height: 50px;           /* 高さと同じ値にして上下中央揃え */
  text-decoration: none;       /* 下線を消す */
  color: #fff;
  border-bottom: 1px solid #ccc;      /* 境界線（見やすくするため） */
  transition: background 0.3s; /* ホバー時の動きを滑らかに */
  font-size: 18px;
  font-family: "EB Garamond", serif;
}

/* ホバー時の演出（お好みで） */
.nav-item a:hover {
  color: #00ff00;
  border-bottom: 1px solid #00ff00;
}


.wrap {
  width: 88%;
  height: auto;
  margin: 0 auto;
}

#podcast {

}

h2 {
  width: 100%;
  border-bottom: 1px solid #00ff00;
  font-size: 30px;
  color: #00ff00;
  font-family: "EB Garamond", serif;
  padding-bottom: 40px;
  padding-top: 60px;
  margin-bottom: 30px;
  font-weight: normal;
}





.contWrap {
  width: 100%;
  height: auto;
  border-radius: 20px;
  padding:20px 0;
  box-sizing: border-box;
  background-image: url(../img/32.png);
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-size: cover;    /* 枠に収まるように自動縮小 */
}

/* 全要素に border-box を適用（前述の通り、これがあると楽です） */
*, *::before, *::after {
  box-sizing: border-box;
}

.content-box {
  align-items: flex-start; /* 中身を上揃えにする */
  gap: 30px;           /* 写真とテキストの間の余白 */
  width: 100%;         /* 必要に応じて幅を指定 */
}

.content-image {
  flex-shrink: 0;      /* 写真が潰れないように固定 */
  width: 300px;        /* 写真を表示したい幅 */
  margin: 0 auto;
}

.content-image img {
  width: 100%;         /* 親の200pxいっぱいに広げる */
  height: auto;
  display: block;
  margin-bottom: 20px;
}

.content-text {
  width: 90%;
  text-align: left;
  color: #fff;
  margin: 0 auto;
}

.content-text h3 {
  font-size: 36px;
  margin-bottom: 12px;
  line-height: 1.3em;
}
.content-text h4 {
  font-size: 18px;
  margin-bottom: 16px;
  line-height: 1.3em;
}
.content-text p {
  font-size: 14px;
  line-height: 1.7em;
  margin-bottom: 12px;
}


/* 全体の設定（計算を狂わせないため） */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 親要素：ここをFlexboxにする */
.button-group {
  display: flex;         /* 横並びにする */
  width: 90%;           /* 横幅いっぱい */
  gap: 4px;             /* ボタン同士の間隔を指定 */
  margin: 0 auto;
  margin-top: 24px;
}

/* 子要素（ボタン本体）：幅の設定 */
.btn {
  flex: 1;               /* 隙間を除いた残りの幅を3等分する */
  
  /* ボタンらしく見せる装飾 */
  display: flex;         /* ボタンの中の文字を中央にするため */
  justify-content: center;
  align-items: center;
  height: 48px;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;    /* 角を丸く */
  font-weight: bold;
  font-size: 16px;
}

/* ホバー（マウスを乗せた時）の演出 */
.btn:hover {
  opacity: 0.8;
}

.spotifyBtn {
  background-color: #65D46F;
  border: 1px solid #5AB961;
  color: #393939;
}

.appleBtn {
  background-color: #A657DA;
  border: 1px solid #6C2AAB;
  color: #fff;
}

.amazonBtn {
  background-color: #83DFEA;
  border: 1px solid #2CC7D5;
  color: #111B19;
}



/* 親要素：Flexboxで横並びを指示 */
.column-wrapper {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px; 
}

/* 子要素：幅を50%に指定 */
.column-item {
  width: 100%;
  box-sizing: border-box; /* 余白を含めて50%に収める */
  margin-bottom: 20px;
}

/* 画像：ボックスの幅いっぱいに広げる */
.item-banner {
  width: 100%;
  height: auto;
  display: block;        /* 画像下の不要な隙間を消す */
  border-radius: 4px;    /* 軽く角を丸くすると今風になります */
}

/* テキスト：画像の下に配置 */
.item-text {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;    /* テキストを中央寄せにする場合 */
  color: #fff;
}

/* 方法1：hrタグを使う場合（推奨：シンプル） */
.separator-dotted {
  border: none;             /* デフォルトの線を消す */
  border-top: 1px dotted #fff; /* 点線の太さ、種類、色 */
  width: 100%;              /* 横幅いっぱい */
  margin: 0px 0;           /* 上下の余白 */
}

.yokotext {
  width: 90%;
  padding-top: 20px;
  margin: 0 auto;
}

.yokotext p {
  font-size: 14px;
  color: #fff;
  text-align: left;
  line-height: 1.8em;
}

.column-item iframe {
  height: 400px;
}

.lastwrap {
  margin-bottom: 0px !important;
}

#yarumade {
  margin-top: 28px;
}

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  
  /* --- ここを追加 --- */
  border-radius: 12px;    /* 角の丸み（お好みで調整してください） */
  overflow: hidden;       /* 角からはみ出る動画部分をカットする */
  /* ------------------ */
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.wrap2 {
  background-color: #333;
  margin-top: 60px;
  text-align: center;
  background-image: url(../img/32.png);
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-size: cover;    /* 枠に収まるように自動縮小 */
}

.contWrap2 {
  width: 88%;
  margin: 0 auto;
  padding-bottom: 40px;
}

.noboruBox {
  position: relative; /* これが重要！ */
}

.bigtx {
  font-size: 18px !important;
}

/* ボタンをまとめるグループ */
.btn-group {
  position: absolute;
  top: 360px;    /* 上からの位置 */
  right: 14px;  /* 右からの位置 */
  display: flex;
  gap: 6px;    /* ボタン同士の隙間 */
}

.round-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #666;
  
  /* --- 背景画像の設定 --- */
  background-size: cover;      /* 丸い枠いっぱいに広げる */
  background-position: center; /* 画像の中心を表示 */
  background-repeat: no-repeat;
  display: block;              /* aタグの場合は必須 */
  transition: opacity 0.2s;
/* --- 文字を隠す設定 --- */
  text-indent: 9999px;
  white-space: nowrap;
  overflow: hidden;
}

.round-btn:hover {
  opacity: 0.8;                /* ホバー時に少し透かす */
}

/* 1つ目のボタンの画像 */
.btn-2 {
  background-image: url('../img/bt_threads.png');
}

/* 2つ目のボタンの画像 */
.btn-1 {
  background-image: url('../img/bn_insta.png');
}


#info h2 {
  margin-bottom: 0px;
}

#sche h2 {
  margin-bottom: 0px;
}

#result h2 {
  margin-bottom: 0px;
}


.inf-list {
  list-style: none; /* リストのポッチを消す */
  padding: 0;
  color: #fff;
  margin-bottom: 40px;
  text-align: left;
}

.inf-li {
  align-items: center;
  padding: 28px 0;
  border-bottom: none;

  /* 背景画像の設定を強化 */
  background-image: radial-gradient(#fff 2px, transparent 1px); /* 白いドット、少し大きく(2px) */
  background-size: 7px 1px;      /* 間隔をガッツリ広げる(30px) 高さを出す(4px) */
  background-position: bottom;
  background-repeat: repeat-x;
  
  /* 念のため、背景が切れないように */
  min-height: 50px; 
}

.datetx {
  flex-shrink: 0;      /* 日付が改行されないように固定 */
  font-weight: bold;
  margin: 0;           /* pタグのデフォルト余白を消す */
  font-size: 22px;
  width: 200px;
  text-align: left;
  padding-left: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.datetx span {
  margin-left: 5px;
  text-transform: uppercase; /* 曜日の見た目を整える */
  font-weight: normal;
  font-size: 0.8em;
}

.infotx {
  margin: 0;           /* pタグのデフォルト余白を消す */
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.5em;
}

#footer {
  width: 100%;
  text-align: center;
  padding-top: 94px;
  padding-bottom: 60px;
}

#footer h5 {
  width: 168px;
  height: 59px;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat; /* 繰り返しを防ぐ */
  background-size: contain;     /* 枠に収まるように自動縮小 */
  margin: 0 auto;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#footer p {
  color: #fff;
  font-size: 12px;
  margin-top: 30px;
  letter-spacing: 0.05em; 
}

.endev {
  background-color: #393838;
}

.newt {
  background-color: red;
  padding: 4px;
  padding-right: 10px;
  margin-right: 10px;
align-items: center;

  /* 右側を三角形に切り抜く設定 */
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
}

.nextt {
  background-color: #00ff00;
  padding: 4px;
  padding-right: 10px;
  margin-right: 10px;
  color: #222;
align-items: center;

  /* 右側を三角形に切り抜く設定 */
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
}


/*----2926/4/2----*/

.dateno {
  flex-shrink: 0;      /* 日付が改行されないように固定 */
  font-weight: normal;
  margin: 0;           /* pタグのデフォルト余白を消す */
  font-size: 22px;
  width: 60px;
  text-align: left;
  padding-left: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
  letter-spacing: 0.05em; 
  margin-bottom: 6px;
}

.infotx2 {
  margin: 0;           /* pタグのデフォルト余白を消す */
  font-size: 17px;
  width: 100%;
  padding-left: 10px;
  text-align: left;
  margin-bottom: 10px;
}
.resulttx {
  margin: 0;           /* pタグのデフォルト余白を消す */
  font-size: 22px;
  text-align: left;
  width: 100%;
  padding-left: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
  letter-spacing: 0.07em; 
}

.navbar {
    position: relative;
    padding: 10px;
  }

  /* チェックボックス本体を完全に隠す */
.menu-checkbox {
  display: none;
}

  /* ハンバーガーアイコンの表示 */
  .hamburger {
    display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 9999;
  }

  /* 三本線のデザイン */
  .hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #00ff00;
    margin-bottom: 5px;
    transition: 0.3s;
  }

  /* メニューリスト（スマホ時は隠して縦並びに） */
  .nav-list {
    display: none; /* 最初は隠す */
    flex-direction: column;
    position: fixed;
top: 0;             /* 上端ぴったり */
    left: 0;            /* 左端ぴったり */
    width: 100%;        /* 画面いっぱいの幅 */
    height: 100vh;      /* 画面いっぱいの高さ */
    background-color: rgba(0, 0, 0, 0.95);
    padding: 20px;
    gap: 0;
    text-align: center;
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .nav-item a {
    display: block;
    padding: 15px 0;
  }

  /* 【重要】チェックが入ったらメニューを表示する */
  .menu-checkbox:checked ~ .nav-list {
    display: flex;
  }

  /* おまけ：チェックが入ったら三本線を「X」にする */
  .menu-checkbox:checked + .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-checkbox:checked + .hamburger span:nth-child(2) { opacity: 0; }
  .menu-checkbox:checked + .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/*----2926/4/9----*/

.pbtxt {color: #00ff00;}

/* 親要素：3つを横並びにする */
.video-container2 {
  display: flex;
  gap: 24px;       /* 指定の間隔 */
  width: 90%;
  padding: 20px 0 30px 0;
  flex-direction: column;
  margin: 0 auto;
}

/* 各動画の箱：3等分する */
.video-item2 {
  flex: 1;
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9の比率を保つ魔法の数字 (9 ÷ 16 × 100) */
}

/* 動画本体：箱いっぱいに広げる */
.video-item2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.boxTx {
  color: #ccc;
  text-align: left;
  font-size: 14px;
  line-height: 1.8em;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  border: 1px solid #444;
}


/*----2926/4/11----*/

.banner-container {
  display: flex;
  flex-wrap: wrap;       /* 幅が狭まったら折り返す */
  gap: 4px;             /* バナー間の隙間（お好みで調整） */
  max-width: 860px;      /* 最大幅を860pxに制限 */
  margin: 0 auto;        /* 画面の中央に配置 */
  padding: 0;       /* 画面端にピッタリくっつかないよう余白 */
  box-sizing: border-box;
}

.banner-item {
  /* PCでは6列並ぶように計算（(860 - gap合計) / 6） */
  /* flex: 1 を使うと、860pxの中で均等に広がります */
  flex: 0 0 calc(50% - 8px);
  min-width: 100px;      /* 極端に小さくなりすぎるのを防ぐ */
}

.banner-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;  /* バナーの比率がバラバラでも高さを揃える（任意） */
  object-fit: cover;     /* 比率を維持しつつ枠いっぱいに表示 */
  display: block;
}




/* 1. 最初は見えない状態 */
.fade-in {
  opacity: 0;
  transform: translateY(30px); /* 30px下に下げておく */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. クラスがついたら表示される状態 */
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/*----2926/4/17----*/

.podBox {
  width: 90%;
  margin: 0 auto;
  margin-top: 24px;
}

.podBox iframe {
  height: 152px !important;
}

#subcast, #yarumade {
  border:1px solid #444;
  box-sizing: border-box;
}