@charset "UTF-8";

/*HEADER
================================================= */
header{
	width: 100%;
	margin: 0 auto;
	padding: 6% 0 2% ;
}
header h1 {
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	border-radius: 1.6rem;
}
.header_fade-in{
	animation: fade-in ease;
	animation-duration: 1.6s;
}
@keyframes fade-in {
  0% { transform: translateY(30px); }
  100% { transform: translateY(0); }
}

@media print, screen and (min-width: 768px) {
	header{
	padding: 3% 0 2% ;
}
}
/*COMMON
================================================= */
main {  }
.area_concept,
.area_marche,
.area_program { padding: clamp(24px , 4% , 61px) 0; }
.space_top_4 { margin-top: clamp(24px , 4% , 61px); }
.space_btm_4 { margin-bottom: clamp(24px , 4% , 61px); }

/*見出し*/
.concept_block h2,.marche_block h2,.marche_block h3
 { text-align: center; color: #6c3e33;}

/*CONCEPT
================================================= */
.concept_block h2 { font-size: clamp( 1.8rem , 2.4vw , 3rem) ;}
.concept_block h4 { font-size: clamp( 1.6rem , 2.0vw , 2.2rem) ; text-align: center;color: #6c3e33;}
.concept_block { 
	position: relative;
	opacity: 0;
	transform: translateY(30px); /* 下からふわっと出す */
	transition: all 0.8s ease;
}
.concept_block.fadein{
	opacity: 1;
	transform: translateY(0); 
}
.concept_txt { 
	width: 90%;
	margin: 0 auto;
	position: relative;
}
.concept_txt h2 span { letter-spacing: -0.4em; }
.concept_txt p { 
	margin: 1.2em 0;
	font-size: clamp( 1.4rem ,2.0vw , 2.0rem);
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}
.concept_txt p span { display: inline-block; }
.movie_box { width: 100%; margin: 4% auto;}
@media print, screen and (min-width: 640px) {
.movie_box { width: 80%;}
}
/*marche
================================================= */
.marche_block {
	padding:  clamp( 1.4rem ,4% , 3.6rem);
	background-color: #ffffff;
	border-radius: 1.6rem;
}
.marche_block h2 { 
	font-size: clamp( 2.4rem , 2vw , 3rem);
	line-height: 1.4;
}
.marche_block h3 { text-align: center;}
.marche_block h2 span,.marche_block h3 span { display: inline-block; }

.marche_block h4 { font-size: clamp( 1.8rem , 2vw , 3rem); text-align: center; padding: 0.2rem 0;}
.marche_block h4 span{ font-size: clamp( 1.4rem , 1.6vw , 2rem);}
.marche_box {
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.marche_block h5 {
	font-size: 1.6rem;
}
.marche_box_left,.ap_box_right { width: 100%; }
.marche_box_right {margin-top:1.6rem; }
.marche_bn { width: 90%; max-width: 320px; margin: 1.4rem auto 0;}
.marche_bn img { border: solid 1px #dfdfdf; line-height: 1;}
.marche_bn p { text-align: center; font-size: 1.4rem; margin-top: 1rem;}

@media print, screen and (min-width: 768px) {

.marche_box_left { width: 48.5%; }
.marche_box_right { width: 48.5%; margin-top:0; }
}

/*program
================================================= */
.area_program { }
.area_program h2 {
	position: relative;
	margin-bottom: clamp( 24px , 4% , 61px);
	font-size: clamp( 2.4rem , 2.8vw , 4.2rem) ;
	color: #6c3e33;
	text-align: center;
	line-height: 1.1;
}
/*枠レイアウト*/
.program_01 {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	flex-wrap: wrap;
}
.program_unit { 
	position: relative;
	width: 100%;
	margin-right: 0;
	margin-bottom: 7.5%;
	padding: clamp( 16px , 6% , 58px);
	overflow: hidden;
	background-color: #ffffff;
	border-radius: 1.6rem;
}

/*画像*/
.program_unit figure { margin: 1.8rem auto 1.4rem; border: 1px solid #dedede; }

/*放送日とカテゴリ*/
.programday_box { display: flex; line-height: 1.2; align-items: flex-end;}
.programday_side_l{ padding-right: 6%; }
.programday_side_r{ padding-left: 6%; }


.programday_side_l,
.programday_category,
.area_program h4
{color: #6c3e33;}

/*日付*/
.programday_side_l{
  font-size: 3rem;
  border-right:1px #6c3e33 dashed;
 font-family: "M PLUS Rounded 1c", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.programday_side_l span {font-size: 1.4rem; margin-left: 0.1em;}
/*カテゴリ*/
.programday_category { 
  padding-bottom: 0.2rem;
  font-size: 1.8rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/*アイコン付き見出し*/
.category_tv,
.category_radio,
.category_event,
.category_special{
	position: relative;
	padding-left: calc(20px + 0.35em);
}
.category_tv::before,
.category_radio::before,
.category_event::before,
.category_special::before{
	position: absolute;
	content: " ";
	display: block;
	width: 24px;
	height: 24px;
	left: 0;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 24px auto;
}
.category_tv::before{ background-image:url("../image/icon_tv.svg"); }
.category_radio::before{ background-image:url("../image/icon_radio.svg"); }
.category_event::before{ background-image:url("../image/icon_event.svg"); }
.category_special::before{ background-image:url("../image/icon_special.svg"); }

/*番組名*/
.area_program h4 { font-size: 2.2rem; line-height: 1.4; }
.area_program h4 span { font-size: 1.6rem; }

/*時間*/
.program_unit h5 {
	margin: 1.0rem 0;
	font-size: 1.8rem;
	line-height: 1.2;
}
.program_unit h5 span { font-size: 1.6rem; }

@media print, screen and (min-width: 640px) {
.program_unit {
	width: 48.5%;
	margin-right: 3%;
	padding: clamp( 1.4rem , 3% , 2.8rem); }
.program_unit:nth-child(2n) { margin-right: 0; }
.programday_side_l span {font-size: 1.6rem ;}
}

@media print, screen and (min-width: 1280px) {
.program_unit {
	width: 31.5%;
	margin-right: 2.75%;
	padding: clamp( 1.4rem , 2% , 2.8rem);}
.program_unit:nth-child(2n) { margin-right: 2.75%; }
.program_unit:nth-child(3n) { margin-right: 0; }
}
@media print, screen and (min-width: 1280px) {
.programday_side_l{
  font-size: 3.8rem;}
.programday_side_l span {font-size: 2rem ;}

.programday_category { font-size: 2.2rem; }
.category_tv,
.category_radio,
.category_event,
.category_special{
	padding-left: calc(28px + 0.35em);
}
.category_tv::before,
.category_radio::before,
.category_event::before,
.category_special::before{
	width: 28px;
	height: 28px;
	background-size: 28px auto;
}
}
/* リンクボタン */
.btn_link {
	width: 100%;
	min-width: 240px;
	max-width: 400px;
	display: block;
	position: relative;
	margin: 1.8rem auto 0;
	padding: 0.6rem 2.6rem ;
    background-color: rgba(255, 255, 255,1);
    color: #414426;
	font-size: 1.3rem;
    font-weight: bold;
	text-align: center;
	border-radius: 2.4rem;
	border: solid 2px #414426;
}
.btn_link:hover {
	text-decoration: none;
	color: #fff;
	 background-color: #414426;
}
.btn_link::before {
	display: block;
	position: absolute;
	content: "";
	width: 1rem;
	height: 1rem;
	top: 1.3rem;
	border-left: solid 2px #414426;
	border-top: solid 2px #414426;
	transform: rotate(135deg);
	right:1.6rem;
}

.btn_link:hover::before {
	border-left: solid 2px #fff;
	border-top: solid 2px #fff;
}
@media print, screen and (min-width: 640px) {
.btn_link { padding: 0.6rem 1.6rem ; }
}

@media print, screen and (min-width: 768px) {
.btn_link::before { top: 1.5rem; }
}
@media print, screen and (min-width: 1280px) {.btn_link {
	width: 90%;}}