.program-detail {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  font-family: YuGothic, "Yu Gothic Medium", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.7;
  color: #333;
}

.program-detail h2 {
  font-size: 1.6rem;
  border-bottom: 3px solid #ED6D38;
  margin-top: 80px;
  padding-bottom: 9px;
	
	margin-bottom: 40px;  /* ← オレンジの線の“下”に空ける余白を追加する！ */
}

.main-visual img {
  width: 100%;
  height:auto;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

.personality,
.time-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.personality img,
.time-icon img {
  width: 20px;
  height: 20px;
}



.back-link {
  display: inline-block;
  margin-top: 40px;
  color: #000000;
  text-decoration: none;
  font-weight: bold;
	
	transition:  color 0.3s ease;
}


.back-link:hover {
	
	 color: red;

}





.personality-card {
  display: flex; /* 横並び！ */
  align-items: flex-start; /* 上にそろえる */
  gap: 16px; /* 写真と説明の間 */
  margin-bottom: 24px;
  
  padding: 16px;
  
  border-radius: 8px;
}

.personality-photo{
	
 width: 100px;          /* 幅を固定（必要に応じて変更） */
  height: auto;         /* 高さも固定 */
  object-fit: cover;     /* 画像のアスペクト比を崩さず切り抜き */
  
  margin-right: 20px;    /* テキストとの間に余白 */
	  margin-top: 0; /* or 削除してOKハム */    /* テキストとの間に余白 */
  flex-shrink: 0;        /* 小さい画面でも潰れないように */
	
}





/*SNS*/
	

.sns-buttons {
  display: flex;
  gap: 20px;
   flex-direction: column;
  margin-top: 20px;
	 align-items: flex-start; /* ← 左揃えにするポイント！ */
}

.sns-btn {
  display: inline-block;
  width: auto;
  height: 13px;


  overflow: hidden;
  transition: transform 0.2s ease;
}

.sns-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sns-btn:hover {
  transform: scale(1.1);
}

@media (max-width: 600px) {
  .sns-buttons {
    justify-content: center;
    gap: 16px; /* スマホではちょっと隙間を狭めてもいいかもハム */
  }
}



.day-of-week{
	
	margin-top:60px;
	 border-bottom: 7px solid #767676; /* 下線の太さと色 */
           /* 下線と文字の隙間を広げる */
  display: inline-block;           /* inline要素に適用する場合はこれを忘れずに */

}


.time-icon {
  white-space: nowrap; /* 改行を防ぐ */
  display: flex; /* アイコンとテキストを横並びに */
  align-items: center; /* アイコンとテキストを縦中央揃え */
  gap: 8px; /* アイコンとテキストの間の余白 */
}

.day-description {
  margin-bottom: 1em;
  font-size: 0.95em;
  color: #666;
}








.day-description-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 10px;
 
	
 
}

h3{
	
	font-size: 1.5rem;
}



/* 投稿本文の見出し全体 */
.blog-detail2 h1,
.blog-detail2 h2,
.blog-detail2 h3 {
 
  font-weight: bold;
 
  line-height: 1.4;
}

/* h1だけ特別なデザインに */
.blog-detail2 h1 {
	 font-family: 'Noto Sans JP', sans-serif;
  font-size: 39px;
margin-top: 50px;
  margin-bottom: 30px;
  padding-left: 12px;
  color: #333;
}

/* h2のデザイン */
.blog-detail2 h2 {
  font-size: 24px;
  border-bottom: 4px solid #ccc;
  padding-bottom: 8px;
  color: #444;
	margin-top: 40px;
  margin-bottom: 10px;
	 padding-left: 10px;

}

/* h3のデザイン */
.blog-detail2 h3 {
  font-size: 20px;
   
  font-weight: 700;
  border-left: 6px solid #f5a21b;
  padding-left: 0.8em;
  color: #222;
  margin-bottom: 1em;
}

.blog-detail2 a {
  color: #1B1B1B;
  transition: color 0.2s ease; /* 色変化を0.5秒かけて滑らかに */
}

.blog-detail2 a:hover {
  color: #FF0004; /* ホバー時に赤っぽく */
}

.blog-detail2 h4 {
  display: inline-block;
  background-color:  #fcc91d;

  padding: 0.3em 0.8em;
  border-radius: 4px;
  font-weight: 600;
  margin-bottom: 1em;
}


h4 {
  display: inline-block;


  padding: 0.3em 0.8em;
 
  font-weight: 600;
  
}


.blog-detail2{
	width:100%;
	margin-top:100px;
	height:auto;
	margin-bottom:100px;
}

.blog-detail2 p{
	
	
	margin-top:27px;
}


audio {
  width: 100%;
  border: 3px solid #2F2F2F;
  border-radius: 10px;
  padding: 7px;
  background-color: #f9f9f9;
	
	margin:30px 0;
}