@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* ==========================================================================
   アイ・アイ・スタイル
   ========================================================================== */

#aiai {
  background-color: #f1eee5;
  color: #455673;
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  width: 100%;
  box-sizing: border-box;
}

#aiai *, 
#aiai *::before, 
#aiai *::after {
  box-sizing: border-box;
}

#aiai img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

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

/* 共通ブロック（余白設定） */
#aiai .box {
  width: 100%;
  margin-bottom: 3rem;
}
#aiai .box:last-child {
  margin-bottom: 0;
  padding-bottom: 3rem;
}

/* 共通ホバー */
#aiai .hover_zoom {
  overflow: hidden;
  display: block;
}
#aiai .hover_zoom img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
}
#aiai .hover_zoom:hover img {
  transform: scale(1.08);
}

/* fadein
---------------------------------*/
.scrollin { opacity: 0; transition: all .4s ease; }
.scrollin.show { opacity: 1; transform: none; }
.scr_lr { transform: translate(-1rem, 0); }
.scr_rl { transform: translate(1rem, 0); }
.scr_fadein { transform: translate(0, 0px); }
.scr_up { transform: translate(0, 1rem); transition: 0.8s 0s ease; }
.scr_down { transform: translate(0, -1rem); }
.scr_scaleUp { transform: scale(.5); }
.scr_scaleDown { transform: scale(1.5); }
.scr_rotateL { transform: rotate(1rem); }
.scr_rotateR { transform: rotate(1rem); }

.scr_up_slow { transform: translate(0, 1rem); transition: 1.5s 0s ease; }
.delay01{transition-delay: 0.2s;}
.delay02{transition-delay: 0.4s;}
.delay03{transition-delay: 0.6s;}
.delay04{transition-delay: 0.8s;}
.delay05{transition-delay: 1.0s;}

/* --------------------------------------------------------------------------
   ヘッダー & キャッチ
   -------------------------------------------------------------------------- */
#aiai .main_header img,
#aiai .catch img {
  width: 100%;
  height: auto;
  display: block;
}


/* --------------------------------------------------------------------------
   画像装飾
   -------------------------------------------------------------------------- */
#aiai .decor_images {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  gap: clamp(0.25rem, 1vw, 1rem);
}

  #aiai .decor_images > div {
    flex: 1;
  }

@media screen and (max-width: 768px) {
  #aiai .decor_images {width: 100%; }
  #aiai .decor_images img{width: 100%;aspect-ratio: 1 / 1;object-fit: cover;}

}


/* --------------------------------------------------------------------------
   次回の放送
   -------------------------------------------------------------------------- */
#aiai .box:has(.next){background-color: rgba(255,255,255,0.5);  padding-bottom: 3rem;margin-bottom: inherit;}
#aiai .next {
  width: 90%;
  max-width: 700px; 
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#aiai .next .tit_img {
  max-width: 500px;
  margin: 0 auto;
}

#aiai .next_content p {
  text-align: center;
  margin: 0;
font-size: clamp(1.5rem, 4vw, 2rem);
}

#aiai .next span{font-size: 1rem;color: #666;}


/* --------------------------------------------------------------------------
  過去の放送
   -------------------------------------------------------------------------- */

#aiai .past {
  width: 90%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

#aiai .past .tit_img {
  max-width: 500px;
  margin: 0 auto;
}

#aiai .episode_grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;

    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
}

/* PC表示（768px以上）：3列 */
@media screen and (max-width: 768px) {
  #aiai .episode_grid {
  /* スマホ：2列で折り返し */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  }
}

#aiai .card a {
  display: block;
  height: 100%;
}

#aiai .card .thumb {
  border-radius: 0.25rem;
}

#aiai .card .card_txt {
  margin-top: 0.8rem;
}

/*#aiai .card time {
  display: block;
  font-size: 1rem;
  margin-bottom: 0;
	color: #FF97B0;
}*/
#aiai .card p.day {
  margin: 0;
  color:#FF97B0;
  font-size: 1rem;
}

#aiai .card p {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.125rem);
}

/* --------------------------------------------------------------------------
   ナレーター
   -------------------------------------------------------------------------- */
#aiai .box:has(.narrator ){background-color: rgba(255,255,255,0.5);  padding-bottom: 3rem;margin-bottom: inherit;}
#aiai .narrator {
  width: 80%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#aiai .narrator .tit_img {
  margin: 0 auto;
}
#aiai .narrator .img_narrator {
  margin: 0 auto;
}
#aiai .narrator .img_narrator img{
  border-radius: 0.25rem;
}
#aiai .narrator .txt{
  margin: 0.5rem auto;
	text-align: left;
}
#aiai .narrator p{font-size: 0.875rem;}
#aiai .narrator p span.name {
  font-size: clamp(1rem, 2vw, 1.25rem);
}
/* --------------------------------------------------------------------------
   スポンサーバナー
   -------------------------------------------------------------------------- */
#aiai .box:has(.bnr){background-color: #fff;  padding-bottom: 3rem;margin-bottom: inherit;}

#aiai .bnr {
  width: 90%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#aiai .bnr a {
  border-radius: 8px;
  display: inline-block;
}