/* リセット・基本設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  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;
	
}







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




.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;
	font-weight:900;
}

/* ナビゲーション */
.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;
	
}
.site-nav a {
    font-weight: 900;
    color: #333; /* 普通の色 */
    text-decoration: none;
    transition: color 0.4s ease; /* 色が0.4秒でなめらかに変わる */
    font-family: "Hiragino Sans", Meiryo, "sans-serif";	
	
}

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


















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

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


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






/* セクション共通 */

section p{
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
    font-size: large;
    font-weight: bold;
}
h2 {
  padding-left: 16px;
  font-size: 1.6rem;
  color: #444;
	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;
}



/* レスポンシブ */
@media (max-width: 600px) {
  .program-cards {
    overflow-x: auto;
  }
  .program-card {
    min-width: 180px;
  }
  .site-nav ul {
    flex-direction: column;
  }
}


/* グローバルメニュー */
.global-nav {
  background: #fbc71c;
  
}
.global-nav ul {
  display: flex;
  justify-content: center;
  gap: 5rem;
  list-style: none;
  margin: 0;
  padding: 1rem 0;
}
.global-nav a {
  text-decoration: none;
  color: #333;
  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;
}


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








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



	  
	  
  	  
		  


.section-image {
  width: 450px;  /* 好きなサイズに調整OK */
  height: auto;
  border-radius: 6px; /* ちょっと丸み */
}



/* ボタンの全体の位置 */
.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:  6px 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); /* 初期位置 */
	 
	 
  margin-right: 100px;
}

	  
/* もっと見るボタンホバー時 */
.more-button:hover {
  background-color: #ec6d38;
   box-shadow: none; /* 影を消して押し込み感 */
  transform: translate(6px, 6px); /* ← 右斜め下にずれる！ */

}
	  
	  
	  



/* コンテンツ全体の大きさ */

 .content-wrapper {
  max-width: 1000px;         /* 幅の上限 */
  margin: 0 auto; /* 上に30px空けて左右中央寄せ、下は0 */
	 margin-top: 30px; /* 上に30px空けて左右中央寄せ、下は0 */
	 margin-bottom: 300px; /* 上に30px空けて左右中央寄せ、下は0 */
  padding: 20px;            /* 内側に余白 */
  box-sizing: border-box;
        
}









/* 応援 */

.bg-color{
	height: 800px;
	padding-top: 80px;
	
	background-color: #f4a11a;
}










/* フッター */
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: 100px 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: 4px 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: 480px) {
      .goto-button {
        flex: 0 0 48%;
        padding: 10px 8px;
        font-size: 13px;
      }
    }
	  







	  /*移動するボタン*/






 .title {
      font-size: 30px;
      margin-bottom: 15px;
     
      border-bottom: 3px solid #ED6D38;
      padding-bottom: 5px;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
		font-weight: bold;
    }





.title-2{
	font-size: 20px;
      margin-bottom: 15px;
     
	 border-bottom: 3px solid #ED6D38;
      padding-bottom: 5px;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
		font-weight: bold;
	
}




.program-container {
  max-width: 1280px;
  margin: 0 auto;           /* ← 真ん中に配置 */
  padding: 0 20px;          /* ← スマホ余白 */
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	margin-top:30px;
	
	margin-bottom:100px;
}





.more-wp{
text-align:right; /* 親で左寄せ */
      
	
	
}







.title-h3 {
  font-size: 1.6rem;
  border-bottom: 3px solid #ED6D38;
  margin-top: 80px;
  padding-bottom: 9px;
	margin-bottom:30px;
}




 .text-wrapper {
  max-width: 800px;         /* 幅の上限 */
  margin: 0 auto; /* 上に30px空けて左右中央寄せ、下は0 */
	 margin-top: 30px; /* 上に30px空けて左右中央寄せ、下は0 */
	
  
  box-sizing: border-box;
        
}


.title-h3b {
  font-size: 1.6rem;
  border-bottom: 3px solid #ED6D38;
  margin-top: 80px;
  padding-bottom: 9px;
  margin-bottom: 30px;
   padding-left: 90px; /* ←text-indentの代わり */
}

@media (max-width: 600px) {
  .title-h3b {
    padding-left: 20px;
    margin-top: 40px;
    padding-bottom: 6px;
  }
	
	
	
	section p{
   
    font-size: 14px;
    font-weight: bold;
}
h2 {

  font-size: 1.3rem;
 
	
}
	
	
	
}



.right-wrapper{
	
	

  text-align: right;
  margin-top: 50px; /* 適宜調整 */
	
	 
}

/*ここからレスポンシブ*/

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




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

}
		body {
  
			 font-family: 'Noto Sans JP', sans-serif;
  line-height: 2;
 
  background: #f5f5f5;
	 overflow-x: hidden;
	
  
	padding-top: 80px; /* ← ヘッダーの高さ分（例: 約80px）空けるハム！ */
}


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

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




/* ハンバーガーメニューのライン */
.hamburger-line {
  position: absolute;
  left: 50%;
  width: 28px;
  height: 5px;
  background: #333;
  border-radius: 0px;
  transform-origin: center;
  transition: all 0.4s ease;
  margin-left: -14px;
  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;
  font-size:0.95em;
  background: #fbc71c;
  padding: 1rem 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;
	
}
	
	
	
	
	
	
	/*ハンバーガーメニュー*/
  
  .site-nav ul {
    flex-direction: column;
	
 
  
 
  }
	
	/*ハンバーガーメニュー*/
	/*ーーーーー基本のやつヘッダーとかーーーーーーーー*/
	/*グローバルメニュー*/
	
	.global-nav ul {
  
  gap: 2rem;
line-height: 1.3;/* ← 行の隙間はむ！ */
  
		
  
  padding: 1rem 1rem;
	
}
	
	/*グローバルメニュー*/
	
	
	
 

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





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










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


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


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

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


.now-on-air .content {
    

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



	

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


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


	/*ボタン*/

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

	
	/*ボタン*/
	
	
	
	
	  .goto-button {
        flex: 0 0 48%;
        padding: 7px 3px;
        font-size: 15px;
      }
	




/* ページトップへ */
#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;
 
}	  
	  

/* ページトップへ */





	.text-wrapper {
		padding-left:20px;
		padding-right:20px;
	}

	

}