/* リセット・基本設定home */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
	
	
	
}
body {
  
  line-height: 2.5;/* ← 行の隙間はむ！ */
  color: #333;
  background: #f5f5f5;
  overflow-x: hidden;
  padding-top: 100px; /* ← ヘッダーの高さ分（例: 約80px）空けるハム！ */
}


a {
  color: inherit;
  text-decoration: none;
}


.wrapper{
	
	width: 100%;
	background: #f4a11a;
	height: auto;
	padding:50px;
	
}

.wrapper2{
	
	width: 100%;
	background: #f4a11a;
	height: auto;
	padding:50px;
	
}



/* リセット・基本設定 */



/*でかい文章*/

.large-le{
	font-size:30px;
	 margin-bottom:60px;
	 line-height: 1.7;/* ← 行の隙間はむ！ */
}

/*でかい文章*/



.logo img {
  height: 60px; /* ロゴ画像のサイズを調整 */
  width: auto;
}




/* ヘッダー */
.site-header { 
  background-color: #f5f5f5;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 他の要素の上に来るように */
}

/* ハンバーガーメニュー */
.hamburger {
  position: relative;
  z-index: 10;
  width: 64px;
  height: 64px;
  background: none;
  border: none;
  cursor: pointer;
}

/* ハンバーガーメニューのうしろの〇 */
.circle-bg {
  position: absolute;
  width: 64px;
  height: 64px;
  background: #fbc71c;
  border-radius: 50%;
  top: 0;
  left: 0;
  border: 6px solid #333;
  z-index: 0;
}




/* ハンバーガーメニューのライン */
.hamburger-line {
  position: absolute;
  left: 50%;
  width: 32px;
  height: 6px;
  background: #333;
  border-radius: 0px;
  transform-origin: center;
  transition: all 0.4s ease;
  margin-left: -16px;
  z-index: 1;
}

/* ハンバーガーメニュー上のライン*/

.hamburger-line.top {
  top: 20px;
}

/* ハンバーガーメニュー下のライン*/
.hamburger-line.bottom {
  top: 38px;
}



/* ハンバーガーメニューうえのラインが動いたあとの処理*/
.hamburger.open .hamburger-line.top {
  transform: rotate(45deg);
  top: 30px;
}



/* ハンバーガーメニューしたのラインが動いたあとの処理*/

.hamburger.open .hamburger-line.bottom {
  transform: rotate(-45deg);
  top: 30px;
}

/* ナビゲーション */
.site-nav {
  display: none;
}

/* ナビゲーションがひらきました */
.site-nav.open {
  display: flex;
  gap: 2rem;
  position: absolute;
  top: 100%;
  right: -5px;
  
  background: #fbc71c;
  padding: 2rem 2rem;/* ナビゲーションの内側の間隔です*/
  border-radius: 10px;
  border-top: 7px solid black;
  border-left: 7px solid black;
  border-bottom: 7px solid black;
  border-right: none;  /* 右側のボーダーを消す */
  z-index: 5;
	
}


/* ナビゲーションの内側の間隔です*/

.site-nav ul {
  list-style: none;/* リストの丸い点みたいなのを消します*/
  display: flex;
  flex-direction: column;/* 横長じゃなくて縦長にします*/
    gap: 0.3rem;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: bold;
	
}
.site-nav a {
  font-weight: bold;
  color: #333; /* 普通の色 */
  text-decoration: none;
  transition: color 0.4s ease; /* 色が0.4秒でなめらかに変わる */
}

.site-nav a:hover {
  color: red; /* ホバーで赤に変化 */
}




/* 番組スライダー */
.program-slider {
  max-width: 800px;
  margin: 2rem auto;
  display: flex;
  align-items: center;
  gap: 1rem;
	 
}

.program-wrapper {
  display: flex;
  justify-content: space-between; /* ← 左右端に分ける */
  align-items: flex-start;
  width: 100%; /* 親要素いっぱいに広げる */
  padding: 0 18px; /* 任意：左右にちょっと余白を */
  box-sizing: border-box;
}

.program-title-image {
  max-height: 1.8em;
  vertical-align: middle;
}
.program-image {
  
  max-width: 90%;
  max-height: 220px;
  object-fit: cover;
}

.program {
   /* 番組情報が長くなりすぎないよう制限 */
 
	text-align: left;
}


/* 番組スライダーボタンのデザイン */

.slider-btn {
  background: #ec6d38;
  color: #000000;
  border: 6px solid black; /* 縁取り線（太さと色）を指定 */
  border-radius: 50%;
  font-size: 1.5rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  transition: background 0.3s;
  text-align: center;
}

/*すらいだーにホバーしたときの色 */

.slider-btn:hover {
  background: #ff8a75;
}

.slider-container {
 
}











/* NOW ON AIR セクション */

/* したのを上にくっつけル */


.now-on-air .content {
  flex: 1;
  margin: 0;
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}








/* NOW ON AIR 全体*/

 #now-on-air {
    background: #fff;
    width: 90%;
	height: 60vh; /* ビューポートの高さの60%分 
	 */
	 
	  
	max-width: 800px;
	min-width: 730px;
    min-height: 580px; 
    margin: 2em auto;
    border: 6px solid #000;
    border-radius: 9px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }





/* NOW ON AIR の黒帯*/
   .scrolling-band {
  overflow: hidden;
  background: #000;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
}

/* NOW ON AIR のもじが動くよ*/
.scrolling-track {
	
  font-family: "gill-sans-nova", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 20s linear infinite;
}

/* NOW ON AIR がずっと動きます*/
@keyframes scroll-loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


.scrolling-track span {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fbc71c;
  padding-right: 2rem;
}
/* 無限スクロールアニメーション */
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


/*kokomadeanime-syon*/


 




/* コンテンツ内のスタイル */
  .header {
    display: flex;
    ustify-content: space-between; /* 左右に配置する */
    align-items: center; /* 縦位置を揃える（任意） */
    gap: 1em;
    margin-bottom: 1em;
	  margin-left:10px;
	   margin-right:10px;
	   margin-top: 10px;
  }


.now-on-air .label {
  font-size: 20px;
  font-weight: bold;
  color: #ff6f61;
}

/* NOW ON AIR 本日の日付*/
.now-on-air .date {
  font-size: 1rem;
  color: #666;
}



 #current-time {
  margin-left: auto; /* 左の余白を自動にして右寄せ */
	 font-family: "gill-sans-nova", sans-serif;
}

.now-on-air .program {
  
  padding: 1.5em 0;
}





/* NOW ON AIR 番組名*/
.now-on-air .title {
  font-size: 1.3rem;
  margin-bottom: 0.5em;
}



/* NOW ON AIR 番組の時間*/
.now-on-air .time {
  font-size: 1rem;
  color: #999;
  margin-bottom: 0.5em;
}


/* パーソナリティアイコン*/
.personality {
  display: flex;
  align-items: center;
  gap: 8px; /* アイコンと名前の間にスペース */
  margin-top: 8px;
	
}
.personality-icon {
  width: 30px;    /* アイコンの横幅 */
  height: 30px;   /* アイコンの高さ */
  object-fit: contain; /* 枠に収めつつ全部見せる */
 
}
.personality-name{
	
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: bold;
	margin-bottom:10px;
	
	
}

/* 時間アイコン*/



.time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px; /* 好みに応じて調整 */
}

.time-icon {
  width: 30px;
  height: 30px;
  object-fit: contain; /* 切らずに表示したい場合 */
}

.time-text{
	
	font-family: "gill-sans-nova", sans-serif;
	font-size: 1.4rem;
	
}


/* NOW ON AIR 番組の説明*/
.now-on-air .desc {
  font-size: 1rem;
  margin-bottom: 1em;
  margin-top: 1em;
  color: #000000;
	width:auto;
	padding-right:70px;
  
  
  text-overflow: ellipsis; /* 省略記号を表示 */
}
/*btn今すぐ聴く*/

    .btn {
      position: relative;
      display: inline-block; /* 表示形式 は横に並べてかつブロック要素*/
      width: 220px;          /* 固定幅 */
      height: 50px;          /* 固定高さ */
      line-height: 48px;     /* テキスト縦中央 */
      color: #000;
      text-decoration: none;/* 下線なし */
      background-color: white;
      border-radius: 9999px;
      overflow: hidden;/* はみ出しはかくすよ */
      transition: color 0.4s ease;
      box-sizing: border-box;/* このパディングとかのサイズにあわせるよ */
      padding: 0 24px;
      font-weight: 600;
      font-family: 'Arial', sans-serif;
      text-align: center;
      cursor: pointer;
      user-select: none;/* つかってる人は画像をコピーできなくするよ*/
      white-space: nowrap;   /* 改行させない */
      vertical-align: middle;/* インライン要素とブロック要素を真ん中にそろえるよ*/
      margin-bottom: 16px;
      z-index: 1;
	  border: 5px solid #000;
		
		
		
		
		
    }

    /*ホバー前の状態だよ */
    .btn::before {
      content: "";/*装飾のための空のコンテンツだよ */
      position: absolute;/*要素をうかせるよー */
      top: 0;
      left: 0;
      width: 23%;           /* 普段は10%幅だけ表示 */
      height: 100%;
      background: #a8ffcf;
      border-radius: 30px ;
      z-index: -1;
      transition: width 0.4s ease;
	
    }

    /* ホバー時に色が左から右に広がる */
    .btn:hover::before {
      width: 100%;
      border-radius: 8px;
    }

    
 /*前の番組次の番組ボタン*/   

#prev-program, #next-program {
  background-color: #FFFFFF;   /* 青色の背景 */
  color: #000000;                /* 文字色は白 */
  border: 6px solid black;     /* 黒い縁取りを追加 */
  padding: 10px 25px;          /* ボタンの大きさ調整 */
  border-radius: 999px;          /* 角を丸く */
  cursor: pointer;             /* ホバー時に手のカーソル */
  font-weight: bold;           /* 太字 */
  transition: background-color 0.2s ease;
}

#prev-program:hover, #next-program:hover {
  background-color: #9AFFD0;   /* ホバー時の色変化 */
}
.arrow-icon {
  width: 40px;
  height: 24px;
  vertical-align: middle;
}

 /*前の番組次の番組ボタン*/




.program-controls {
  text-align: center;
  margin-top: 0;
	
}

/*タイムテーブル*/


.timetable-link {
  display: inline-block;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  margin: 0 5px;
  border: none;
  text-align: center;
  user-select: none;

  /* ここで色変化のトランジションを設定 */
  transition: background-color 0.3s ease, color 0.3s ease;
  
    color: #000000;               /* 元の文字色 */
}

/* ホバー時 */

 .timetable-link:hover {
  color: red;                 /* ホバー時の文字色 */
}







/*タイムテーブル*/
.sub-buttons {
  margin-top: 20px;
}

/* 番組表・パーソナリティ用ボタン */
.sub-button {
   
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  margin: 0 5px;
  border: none;
  text-align: center;
  user-select: none;
  display: inline-flex;             /* 横並びにする */
  align-items: center;              /* アイコンと文字を縦中央揃え */

  /* ここで色変化のトランジションを設定 */
  transition: background-color 0.3s ease, color 0.3s ease;
  
    color: #000000;  
}

.sub-button:hover {
   color: #FF0000; 
}
.sub-button-icon {
  width: 30px;          /* お好みでサイズ調整 */
  height: 30px;
  margin-right: 8px;    /* アイコンとテキストの間の余白 */
  display: block;
}




/* セクション共通 */

section p{
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
    font-size: large;
    font-weight: bold;
}
h2 {
 
 
  color: #000000;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	
}
table {
  width: 100%;
  border-collapse: collapse;
}

/* テーブルのセル*/

td {
  padding: 0.5rem;
  border: 1px solid #ccc;
}
#topics ul {
  list-style: none;
  max-width: 600px;
  margin: auto;
}
#topics li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}
#topics span {
  color: #999;
  margin-right: 0.5rem;
}




/* グローバルメニュー */
.global-nav {
  background: #fbc71c;
  
}
.global-nav ul {
  display: flex;
  justify-content: center;
  gap: 5rem;
  list-style: none;
  margin: 0;
  padding: 1rem 0;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: bold;
}
.global-nav a {
  text-decoration: none;
  
  font-weight: bold;
  transition: color 0.3s;
}


/*メニュー表示アニメーション*/



.global-nav ul li a {
  position: relative;
  color: #000;
  text-decoration: none;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}

.global-nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #f00; /* 下線の色 */
  transition: width 0.3s ease;
}

.global-nav ul li a:hover {
  color: #f00; /* ホバー時の文字色 */
}

.global-nav ul li a:hover::after {
  width: 100%;
}




/*メニュー表示*/




/*ラジオ番組を作る*/





.title-with-bar {
  position: relative;
  width: 100%;         /* ← 親としては幅いっぱい */
  overflow: hidden;    /* ← はみ出す帯を隠すため */
  display: flex;         /* ← 横並びにする */
  align-items: center;   /* ← 縦位置を揃える */
  gap: 1rem;             /* ← 応援 と Support の間の余白 */
  padding: 10px 40px; 
  min-height: 89px; /* 帯と同じ高さにする */
}

.title-with-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;         /* ← 帯だけ画面端まで！ */
  height: 100%;              /* ← 親と同じ高さにするのがポイント！ */
  background: #f4a11a;
  transform: translateX(-100%); /* ← 最初は画面外に */
  transition: transform 0.5s ease;
  z-index: -1;
  border-top: 7px solid black;
  border-bottom: 7px solid black;
  border-radius: 0px;
  box-sizing: border-box;
	
}

.title-with-bar.active::before {
  transform: translateX(0); /* ← スライドイン */
	 
}

.title-text {
  display: block;
  font-size: 30px;
  font-weight: bold;
  
  color: black;
  font-family: "gill-sans-nova", sans-serif;
  line-height: 1.2; 
	
}

.title-text-en{
	color:black;
	font-family: "gill-sans-nova", sans-serif;
}



.header img{
	height: 50px;
	width: auto;
}




.header img{
	height: 50px;
	width: auto;
}


.title-text-en{
	color:black;
	font-family: "gill-sans-nova", sans-serif;
}





/*ラジオ番組を作る*/



	  
	  
  	  
		  


.section-image {
  max-width:400px;
  width: 100%;  /* 好きなサイズに調整OK */
  height: auto;
 
 
  margin:80px auto;
}


/* ボタンを右寄よせにするよ */
.button-wrapper {
  display: flex;
  justify-content: flex-end; 
  margin-top: 50px;
	
}
/* ボタンを右寄よせにするよ */





.more-button {
	
  display: inline-block;       /* ← aタグに必要 */
  text-decoration: none;       /* リンク下線を消す */
  padding: 23px 40px;        /* 横に長く */
  background-color: #fbc71c;
  color: #000000;
  border:  5px solid #000000; /* ← ここが縁取り */;
  border-radius: 9999px;     /* 超丸い楕円形 */
  cursor: pointer;
  font-weight: bold;
  box-shadow:  6px 6px 0  #000000; /* 影をつけて立体感 */
  transition: all 0.2s ease;
  outline: none;
  position: relative;
  top: 0;
  transform: translate(0, 0); /* 初期位置 */
	 
	  
  
}

	  
/* ホバーでへこみ効果 */
.more-button:hover {
  background-color: #ec6d38;
  box-shadow: none; /* 影を消して押し込み感 */
  transform: translate(6px, 6px); /* ← 右斜め下にずれる！ */

}
	  
	  
	  





 .content-wrapper {
  max-width: 800px;         /* 幅の上限 */
  margin: 0 auto; /* 上に30px空けて左右中央寄せ、下は0 */
  margin-top: 30px; /* 上に30px空けて左右中央寄せ、下は0 */
  margin-bottom: 300px; /* 上に30px空けて左右中央寄せ、下は0 */
  padding: 20px;            /* 内側に余白 */
  box-sizing: border-box;
	 
	 
  position: relative; /* 子の位置調整に備えて */
  overflow: visible;  /* はみ出しをちゃんと見せる */
        
}









/*ラジオ番組を作る*/


/*ニュース*/



.slider-container {
  position: relative;
  display: flex;
  align-items: center;
}

.slider-wrapper {
  overflow: hidden;
	 width: 100%; 
  flex: 1;
}

.slider-list {
  display: flex;
  transition: transform 0.4s ease;
  width: auto; 
  padding: 0;
  margin: 0;
  list-style: none;
}

.slide {
   min-width: 100%;  /* これだと1枚ずつ */
}

.slide img {
  width: 100%;
  display: block;
  border-radius: 8px;
}





/*ニュース*/

/*SNS*/
.circle-icon-link {
  display: flex;
  justify-content: center;  /* ← 中央寄せ！ */
  align-items: center;
  gap: 40px;                /* ← 丸同士の間隔 */
  margin: 40px 0;           /* 上下の余白 */
  flex-wrap: wrap;
	
  perspective: 600px; /* 立体感のためのパースペクティブ */
}

/* 丸い背景 */
.circle-group {
  display: flex;
  justify-content: center;  /* ← 中央寄せ！ */
  align-items: center;
  gap: 40px;                /* ← 丸同士の間隔 */
  padding: 40px 0;           /* 上下の余白 */
  flex-wrap: wrap;          /* スマホで折り返しOK */
  background-color: #f4a11a;
  padding-top:30px;
  padding-bottom:100px;

}

.circle-icon {
	
  display: inline-block;       /* ← aタグに必要 */
  text-decoration: none;       /* リンク下線を消す */
  width: 100px;
  height: 100px;
  background-color: #fbc71c;
  border-radius: 50%;
  border: 4px solid #333;
  background: white; /* 丸の背景色 */
  box-shadow: 5px 5px 0 rgba(0,0,0,1); /* ぼかしなしの黒影 */
  transform: translate(0, 0); /* 初期位置 */
  transition: all 0.2s ease;
	

	
}

.circle-icon:hover{
  background-color: white;
  box-shadow: none; /* 影を消して押し込み感 */
  transform: translate(6px, 6px); /* ← 右斜め下にずれる！ */

	
}


circle-image:hover{
 
  transform: translate(6px, 6px); /* ← 右斜め下にずれる！ */

	
}





.circle-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
	
  transition: all 0.2s ease;
	
	
	
	
}
/* 丸いリンク */
.circle-icon-link {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-decoration: none;
}




.circle-icon-link:hover .circle-icon {
  box-shadow: none;
  transform: translate(6px, 6px);
}

.circle-icon-link:hover .circle-image {
  top: calc(50% + 6px);
  left: calc(50% + 6px);
}



/*SNS*/






/*4コマ漫画*/

/*4コマ漫画*/

#slideshow{
		
	
  height: 600px;      /* 高さを固定 */
  width: auto;        /* 幅は自動で画像比率を保つ */
  object-fit: contain; /* はみ出さないように収める */
  margin-top:30px;
	
}







/* 応援 */

.bg-color{
	height: 800px;
	padding-top: 80px;
	
	background-color: #f4a11a;
}
.animated-bg {
  margin: 0 -50px;	
  position: relative;
  z-index: 1;
  padding: 4rem;
  background-color: transparent; /* 初期状態で背景なし */
  transition: background-color 0.6s ease;
  top: 10px;
}

.animated-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFBFB;
  z-index: -1;
  opacity: 0;
  transform: scale(0.9); /* 初期サイズを小さめに */
  transform-origin: center center; /* 中央から拡大する */
  transition: transform 0.6s ease, opacity 0.6s ease;
  border: 7px solid black;
  border-radius: 30px;
  box-sizing: border-box;
}

.animated-bg.visible::before {
  opacity: 1;
  transform: scale(1); /* 拡大完了 */
}

/* 応援 */









/* フッター */
footer {
  background-color: #f5f5f5;
  padding: 40px 20px 20px 20px;
  font-size: 14px;
  color: #555;
	 
}

.footer-links {
  display: block;       /* flexで中央揃え → ブロックに戻す */
  margin-left: 80px;    /* 左に寄せる。数値は好みに調整OK */
  text-align: left;     /* 中のリンクを左揃えに */
}

.footer-column ul {
  list-style: none; /* ●ポチをなくす */
 
  margin-top: 5rem; /* ← TOPリンクの上にスペースを追加 */
  margin-bottom: 13rem; /* ← TOPリンクの上にスペースを追加 */
}

.footer-column li {
  font-weight: bold;
  font-size:15px;
  margin-bottom: 20px;
}

.footer-column a {
  text-decoration: none;
  color: #333;
	
  transition: color 0.3s ease; /* ← 徐々に変わる効果 */
}



.footer-column a:hover {
  color: red; /* ← ホバー時に赤く変化 */
}


footer p {
    text-align: center; /* コピーライトだけ中央揃え */
    margin-top: 20px;
    font-size: 15px;
    color: #999;
    	
}

/* フッター */









/* ページトップへ */
#to-top-btn {
  width: 80px;
  height: 80px;
  
 
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  margin: 0; /* ボタン周りの余白はwrapperで調整 */
	
  background-color: #f4a11a; /* 背景を透明に */
  border: 6px solid black; /* 縁取り線（太さと色）を指定 */
	
}

.arrow-up {
  width: 30px;
  height: 20px;
  background: black;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  
}





#to-top-wrapper {
  position: fixed;
  bottom: 100px;
  right: 70px;
  display: flex;
  flex-direction: column;  /* 縦並びに */
  align-items: center;     /* 横方向中央揃え */
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease, visibility 0.1s ease;
}
	  
#to-top-wrapper.visible {
  opacity: 1;
  visibility: visible;
  animation: fadeInBounce 0.1s ease forwards;
}
.to-top-text {
  color: black;
  font-size: 14px;
  margin-top: 6px;
  user-select: none; /* テキスト選択不可に */
  font-weight: 600;
}	  
	  
@keyframes fadeInBounceUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-10px) scale(1.05);
  }
  70% {
    opacity: 0.9;
    transform: translateY(5px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ページトップへ */






/*移動するボタン*/
.button-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin: 50px auto;
      max-width: 100%;
      padding: 0 16px 20px;
      overflow-x: hidden;
    }

    .goto-button {
      flex: 0 0 23%;
      box-sizing: border-box;
      display: inline-block;
      text-decoration: none;
      padding: 12px 10px;
      background-color: #fbc71c;
      color: #000000;
      border: 5px solid #000000;
      border-radius: 9999px;
      cursor: pointer;
      font-weight: bold;
      font-size: 14px;
      box-shadow: 3px 3px 0 #000000;
      transition: all 0.2s ease;
      outline: none;
      position: relative;
      transform: translate(0, 0);
      text-align: center;
      white-space: nowrap;
      word-break: break-word;
    }

    .goto-button:hover {
      background-color: #ec6d38;
      box-shadow: none;
      transform: translate(3px, 3px);
    }

    
	  
	  /*移動するボタン*/





/* レスポンシブ */
@media (max-width: 600px) {
	/*ーーーーー基本のやつーーーーーーーー*/
.logo img {
  height: 50px; /* ロゴ画像のサイズを調整 */
  
}
	
.content-wrapper {
    margin-bottom: 100px;
  }	




/* ヘッダー */
.site-header {
   
    padding: 1rem;
    height:80px;
    
    
   
  
  width: 100%;

}
	body {
  
  
	padding-top: 80px; /* ← ヘッダーの高さ分（例: 約80px）空けるハム！ */
}


/* ハンバーガーメニュー */
.hamburger {
  
  
  width: 64px;
  height: 64px;
  background: none;
  border: none;
  cursor: pointer;
}

/* ハンバーガーメニューのうしろの〇 */
.circle-bg {
  position: absolute;
  width: 64px;
  height: 64px;
  background: #fbc71c;
  border-radius: 50%;
  top: 0;
  left: 0;
  border: 6px solid #333;
  z-index: 0;
}




/* ハンバーガーメニューのライン */
.hamburger-line {
  position: absolute;
  left: 50%;
  width: 32px;
  height: 6px;
  background: #333;
  border-radius: 0px;
  transform-origin: center;
  transition: all 0.4s ease;
  margin-left: -16px;
  z-index: 1;
}

/* ハンバーガーメニュー上のライン*/

.hamburger-line.top {
  top: 20px;
}

/* ハンバーガーメニュー下のライン*/
.hamburger-line.bottom {
  top: 38px;
}



/* ハンバーガーメニューうえのラインが動いたあとの処理*/
.hamburger.open .hamburger-line.top {
  transform: rotate(45deg);
  top: 30px;
}



/* ハンバーガーメニューしたのラインが動いたあとの処理*/

.hamburger.open .hamburger-line.bottom {
  transform: rotate(-45deg);
  top: 30px;
}

/* ナビゲーション */
.site-nav {
  display: none;
}
	
	
	
	.site-nav.open {
  max-height: 70vh;
  width:240px; /* ← 好きな横幅に変更！ */
  display: flex;
  flex-direction: column; /* （縦並びの場合） */
  gap: 1rem;
  position: absolute;
  top: 100%;
  right: -5px;
  font-size: 0.95em;
  background: #fbc71c;
  padding: 1rem;
  border-radius: 10px;
  border-top: 7px solid black;
  border-left: 7px solid black;
  border-bottom: 7px solid black;
  border-right: none;
  z-index: 5;
  overflow-y: auto;
}

	
	
	
	
	/*ハンバーガーメニュー*/
  
  .site-nav ul {
    flex-direction: column;
	
 
  
 
  }
	
	/*ハンバーガーメニュー*/
	/*ーーーーー基本のやつヘッダーとかーーーーーーーー*/
	/*グローバルメニュー*/
	
	.global-nav ul {
  
  gap: 2rem;
  line-height: 1.3;/* ← 行の隙間はむ！ */
  
		
  
  padding: 1rem 1rem;
	
}
	
	/*グローバルメニュー*/
	
	
	
	
/* NOW ON AIR セクション */

/* したのを上にくっつけル */



.now-on-air .content {
    
  
  padding: 0.1rem 0.2rem;
 
}








/* NOW ON AIR 全体*/

 #now-on-air {
    
	min-width: 100%;
height:auto;
		margin:0 auto;
	
  }








.scrolling-track span {
 
  font-size: 1.3rem;
 
  padding-right: 1rem;
}



/* コンテンツ内のスタイル */
 





 #current-time {
	margin-left: 0; /* 左の余白を自動にして右寄せ */
	
}








/* NOW ON AIR 番組名*/
.now-on-air .title {
  font-size:1.25rem;
  
}








	.program-wrapper{
	   flex-direction: column;	
	
  align-items: center;     /* 縦中央 */
  
	}


	
	
	.program-image{
		width: auto;
		height:150px;
		
		
	}

	
	
	
	
	
	
	
	
	
	/*debakkuyou*/
	
	/* NOW ON AIR セクション */

/* したのを上にくっつけル */


.now-on-air .content {
    

  padding: 8px 8px;
  display: flex;
  flex-direction: column;
 
}



	

	/*ここまでラジオを聴くセクション*/
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*ここからタイトルバー*/
	
	.title-text {
  
  font-size: 24px;


}
	/*ここまでタイトルバー*/


	/*ボタン*/

	.more-button {
	
  padding: 15px 120px;        /* 横に長く */
  margin:0 auto;
	 
	  
  
}

	
	/*ボタン*/
	
	
	
	
	  .goto-button {
        flex: 0 0 48%;
        padding: 10px 8px;
        font-size: 13px;
      }
	




/* ページトップへ */
#to-top-btn {
  width: 70px;
  height: 70px;
  
 
  border-radius: 15px;
  
  margin: 0; /* ボタン周りの余白はwrapperで調整 */
	
	
  
	
}







   #to-top-wrapper {
 
  bottom: 50px;
 right: 30px;
  

}
	  

.to-top-text {
  
  margin-top: 5px;
 
}	  
	  

/* ページトップへ */


/*応援する*/


.animated-bg {
	margin: 0 0;	
  
  
  padding: 2rem;
}



.animated-bg.visible::before {
  opacity: 1;
  transform: scale(1); /* 拡大完了 */
}

/* 応援 */

	
/* まんが*/
	

	#slideshow{
		
	
	 height: 420px;      /* 高さを固定 */
 

		
	
}


	/* 漫画 */

}



.news-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 20px;
 
 
  max-width: 100%;
}

.news-image {
  width: 200px;       /* 横幅を固定 */
  height: 100px;      /* 高さをもっと小さく */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}



.news-image img {
  height: 100%;       /* 高さを親に合わせる */
  width: auto;        /* 幅は自動調整 */
  object-fit: cover;  /* 中央トリミング */
  display: block;     /* 余白削除用 */

}

.news-text {
  flex: 1;
}

.news-title {
  font-size: 1rem;
  margin: 0 0 8px;
  font-weight: bold;
  color: #333;
}

.news-date {
  font-size: 0.85rem;
  color: #888;
}

@media (max-width: 600px) {
  .news-item {
    flex-direction: column;
    align-items: flex-start;
  }

 
.news-image {
  width: 100%;       /* 横幅を固定 */
  height: 200px;      /* 高さをもっと小さく */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}



.news-image img {
  height: 100%;       /* 高さを親に合わせる */
  width: auto;        /* 幅は自動調整 */
  object-fit: cover;  /* 中央トリミング */
  display: block;     /* 余白削除用 */

}
	
	
	
	
	
	
	
	.now-on-air .desc {
  
	width:auto;
  
  

	}
	
	body {
  
  line-height: 1.4;/* ← 行の隙間はむ！ */



	}

	.large-le{
		
		
		font-size:22px;
			
			
			
			
			
			
		
		
		
		
		
		
	}



}

	
@media (max-width: 600px) {
 .program-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    gap: 10px;
  }

  .program-wrapper > div {
    width: 100%;
  }

  .program-image {
    height: 150px;
    width: auto;
    max-width: 100%;
    
    display: block;
    margin: 0 auto;
  }

  .program-left {
	  min-width:100px;
	  width:100vw;
    padding: 10px 0 10px 10px;
	   
  
	  
  }

  /* 左に余白追加 */
  .program {
    text-align: left;
    width: 100%;
    padding-left: 0px !important; /* ←ここで余白調整 */
    box-sizing: border-box;
	  
  }

  .now-on-air .desc {
    
    max-width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
	}

  /* 「FM++で聴く」ボタン中央寄せ */
  .btn.fmpp-btn {
   display: block;        /* インライン→ブロックにする */
  margin: 20px auto;     /* 左右オートで中央に */
  text-align: center;    /* 中のテキストも中央 */
  
  }

	












.fmpp-btn {
  
  bottom: -30px;
 
 
 

  
 
}
.rerun-label img {
  width: 30px;   /* お好みで調整 */
  height: auto;
  vertical-align: middle;
  margin-right: 4px; /* タイトルとの間に余白 */
}


.new-label {
  background-color: #FFA500;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 6px;
  margin-right: 8px; /* タイトルとの間にスペース */
  border-radius: 4px;
  vertical-align: middle;
}





/*ブラウザプレイヤー*/

.player-wrapper {
  width: 370px;
  height: 80px;       /* 見せたいプレイヤー部分だけ */
  overflow: hidden;    /* iframeの余計な部分を隠す */
  
  top: 100px;

  border-radius: 9px;
 
}

.player-wrapper iframe {
 width: 100%;
  height: 4800px;       /* 元ページ全体の高さ */
  transform: translateY(-810px); /* プレイヤー部分だけ見える位置に調整 */
  border: none;
}
.player-wrapper2{
	
	
	 width: 80%;
	
}	
	
.news-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 20px;
 
 
  max-width: 100%;
}

.news-image {
  width: 200px;       /* 横幅を固定 */
  height: 100px;      /* 高さをもっと小さく */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}



.news-image img {
  height: 100%;       /* 高さを親に合わせる */
  width: auto;        /* 幅は自動調整 */
  object-fit: cover;  /* 中央トリミング */
  display: block;     /* 余白削除用 */

}

.news-text {
  flex: 1;
}

.news-title {
  font-size: 1rem;
  margin: 0 0 8px;
  font-weight: bold;
  color: #333;
}

.news-date {
  font-size: 0.85rem;
  color: #888;
}

		
	
	}




.player-wrapper {
  width: 370px;
  height: 80px;       /* 見せたいプレイヤー部分だけ */
  overflow: hidden;    /* iframeの余計な部分を隠す */
  
  top: 100px;
margin-bottom:10px;
  border-radius: 9px;
 
}

.player-wrapper iframe {
 width: 100%;
  height: 4800px;       /* 元ページ全体の高さ */
  transform: translateY(-810px); /* プレイヤー部分だけ見える位置に調整 */
  border: none;
}




.player-wrapper2{
	
	
	 width: 80%;
}