@charset "UTF-8";

/* header
================================================= */
header {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background-size: auto 100% , auto ;
  padding-bottom: 2vw;
}
header h1 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.floating-img { animation: float 4s ease-in-out infinite; }

@keyframes float {
	0% { transform: translateY(0); }
	20% { transform: translateY(0); }
	25% { transform: translateY(-15px); }
	30% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

@media print, screen and (min-width: 1280px) {
header { margin: 0 auto; padding-bottom: 40px; }
}

/* main
================================================= */
main { width: 100%;}
.wrap { width: 92%; margin: 0 auto; }
.col-a,
.col-b {
	position: relative;
	width: 100%;
	margin-bottom: 8%;
	background: #fff;
	padding: 4%;
	border-radius: 10px;
	border: solid 4px #37a037;
}
@media print, screen and (min-width: 768px) {
  div.wrap.flex { display: flex; justify-content: space-between; flex-wrap: wrap; }
  div.wrap.flex > .col-a,
  div.wrap.flex > .col-b { width: 47.5%; }
}
@media print, screen and (min-width: 1160px) {
  .wrap { max-width: 1160px; margin: 0 auto 20px; }
  .col-a,
  .col-b { padding: 3.6rem; margin-bottom: 6%; }
}

/* text decoration */
.text-small { font-size: 0.85em; }
.text-large { font-size: 1.25em; }
.text-bold { font-weight: bold; }
.text-red { color: #C80028; }
.text-green { color: #37a037; }
.text-no_br { display: inline-block; }
.text-block { 
	background: #1E3A5B;
	color: #ffffff;
	padding: 0.3em 0.4em;
	margin-right: 0.5em;
	border-radius: 3px;
}

/* button */
a.btn,
a.radio_timetable,
a.radio_frequency,
a.radio_radiko{
  display: block;
  position: relative;
  margin: 1em auto 0;
  width: 90%;
  padding: 1.4rem 2.8rem;
  font-weight: bold;
  color: #37a037;
  line-height: 1.5;
  text-decoration: none;
  background:#ffffff;
  border-radius: 30px;
  box-shadow: 1px 1px 0px 1px #bababa;
}
a.btn{
  min-width: 220px;
  max-width: 260px;
  border: solid 4px #e67b80;}

a.btn:hover,
a.btn:active { 
  background:#e67b80;
  color: #ffffff;
}
a.btn::before {
  display: block;
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  height:40px;
  border-radius: 20px;
  background-color:#37a037;
  color: #ffffff;
}
a.btn:hover::before {
  background-color:#ffffff;
  color: #37a037;
}

a.btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 18px;
  right: 22px;
  width: 16px;
  height:16px;
  border-bottom: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  transform: rotate(-135deg);
}
a.btn:hover::after {
  border-bottom: 3px solid #e67b80;
  border-left: 3px solid #e67b80;
}

/* h2 */
h2 {
  width: min(92%, 1160px);
  margin: 0 auto 0.2em;
  letter-spacing: 0.08em;
  font-family: "Mochiy Pop P One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.8rem;
}
h2::first-letter {
	font-size: 3.6rem;
	color: #37a037;
}
@media print, screen and (min-width: 960px) {
  h2{ font-size: 3.6rem; }	
  h2::first-letter{ font-size: 4.2rem; }
}

/* 初回放送日 */
.col-a h5,
.col-b h5 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  width: 80px;
  height: 80px;
  margin-top: calc(-8% - 4px);
  margin-left: calc(-8% - 4px);
  font-size: 1.2rem;
  color: #ffffff;
  border-radius: 100vh;
}
.first-day {
	background: #e67b80;
	font-family: "Mochiy Pop P One", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
}
.first-day span.day {
  margin-top: -0.1em;
  font-size: 1.65em;
  letter-spacing: -0.01em;
}
.timechange_txt {
	background: #37a037;
	line-height: 1.2;
}
@media print, screen and (min-width: 768px) {
  .col-a h5,
  .col-b h5 {
    margin-top: calc(-13% - 4px);
    margin-left: calc(-13% - 4px);
  }
}
@media print, screen and (min-width: 1160px) {
  .col-a h5,
  .col-b h5 {
    width: 105px;
    height: 105px;
    margin-top: -60px;
    margin-left:-60px;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }
}

/* 番組キービジュアル */
figure {
  margin-bottom: 0;
}
figure:first-child {
  margin-bottom: 14px; 
}
figure img {
  border: 1px solid #666666;
}


/* 番組タイトル・放送時間 */
.col-a h3, .col-b h3 {
  margin: 0.6em 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed #999999;
  font-size: 1.8rem;
  line-height: 1.5;
}
h4 {
  margin: 0.6em 0 0.6em;
  font-size: 1.8rem;
  line-height: 1.5;
}
@media print, screen and (min-width: 960px) {
  h3, h4 { font-size: 2.0rem; }
}

/* 概要テキスト */
p + p {
  margin-top: 0.8rem;
}

/* heading */
.heading_green,
.heading_black,
.heading_pink {
	display: inline-block;
	color: white;
	padding: 3px 8px;
	margin-right: 0.8rem;
	border-radius: 0.4rem;
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
}
.end_time_change .heading_green,
.end_time_change .heading_black,
.end_time_change .heading_pink {
	padding: 1px 6px;
	font-size: 1.2rem;
}
.heading_black { background: #333; }
.heading_green { background: #37a037; }
.heading_pink { background: #e67b80; }

@media print, screen and (min-width: 960px) {
.heading_green,
.heading_black,
.heading_pink { font-size: 1.6rem; }
	
.end_time_change .heading_green,
.end_time_change .heading_black,
.end_time_change .heading_pink { font-size: 1.4rem; }
}

/* タイムテーブルボタンなど */
.link_btn_space {
	display: flex;
	width: 96%;
	margin-top: -5%;
	margin-bottom: 8%;
	max-width: 700px;
	flex-wrap: wrap;
}
a.radio_timetable,
a.radio_frequency,
a.radio_radiko {
  width: 314px;
}
a.radio_timetable {
  background:#fff url("../image/icon_download.svg") no-repeat right 16px center;
  background-size: 26px auto;
  border: solid 4px #ffc946;
}
a.radio_frequency {
  background:#fff url("../image/icon_radio.svg") no-repeat right 16px center;
  background-size: 28px auto;
  border: solid 4px #ffc946;}

a.radio_timetable:hover,
a.radio_timetable:active,
a.radio_frequency:hover,
a.radio_frequency:active {
background-color:#fffec6;
}
a.radio_radiko {
  background:#fff url("../image/link_radiko_blue.svg") no-repeat right 16px center;
  background-size: 30px auto;
  border: solid 4px #00a7e9;
  color: #00a7e9;
}
a.radio_radiko:hover,
a.radio_radiko:active {
  background-color:#caf0ff;
}
@media print, screen and (min-width: 600px) {
  .link_btn_space{ margin-bottom: 5%; }
}
@media print, screen and (min-width: 1024px) {
  .link_btn_space{ max-width: 1060px; margin-top: -3%; }
}

/* 終了番組・移動番組 */
.end_time_change h4 {
	display: inline-block;
	font-family: "Mochiy Pop P One", sans-serif;
	font-weight: 400;
	font-style: normal;
  font-size: 2.0rem;
  background: linear-gradient(transparent 80%, #ffc946 80%);
}
.end_time_change ul {
	font-size: 1.6rem;
	padding: 0;
	list-style: none;
  border-bottom: 1px dashed #999999;
}
.end_time_change_title {
	display: block;
	margin-bottom: 0.2rem;
	font-weight: bold;
}
.end_time_change li {
	padding-block: 1.5rem;
	border-top: 1px dashed #999999;
}
.end_time_change li:last-of-type {
	margin-bottom: 0
}
@media print, screen and (min-width: 960px) {
  .end_time_change h4 { font-size: 2.3rem; }
}

/* 下部パーツ */
.outro_txt {
	width: 90%;
	margin: auto;
	color: #37a037;
	font-family: "Mochiy Pop P One", sans-serif;
	font-weight: 400;
	font-style: normal;
  font-size: 2.4rem;
	text-align: center;
	line-height: 1.4;
}
 ul.accounts_list {
  margin: 1.6rem auto ;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accounts_list li.x_sns { width: 32px;  margin-left: 16px; }
.accounts_list li.fb { width: 32px; margin-left: 16px; }
.accounts_list li.ig { width: 30px; margin-left: 16px; }
.accounts_list li.icon_radiko { width: 30px; margin-left: 16px; }
.accounts_list li.yt { width: 30px; margin-left: 16px; }
.accounts_list li.note { width: 27px; margin-left: 16px; }
.accounts_list li.tiktok { width: 32px; margin-left: 16px; }
.accounts_list li.bace { width: 36px; margin-left: 16px;margin-bottom: 8px; }

@media print, screen and (max-width: 520px) {
  .accounts_list li.ac_smp{ display: none; }
}
@media print, screen and (min-width: 960px) {
  .accounts_list li.x_sns { width: 36px;  margin-left: 18px; }
  .accounts_list li.fb { width: 36px; margin-left: 18px; }
  .accounts_list li.ig { width: 34px; margin-left: 18px; }
  .accounts_list li.icon_radiko { width: 36px; margin-left: 20px; }
  .accounts_list li.yt { width: 35px; margin-left: 20px; }
  .accounts_list li.note { width: 29px; margin-left: 20px; }
  .accounts_list li.tiktok { width: 36px; margin-left: 18px; }
  .accounts_list li.bace { width: 36px; margin-left: 18px; margin-bottom: 8px; }
}