@charset "UTF-8";

/*HEADER
================================================= */
header{
	width: 100%;
	margin: 0 auto;
	padding: 6% 0 ;
	background-image: url("../image/back_header_dotte.png"),url("../image/back_header_st.png"),url("../image/back_header_check.png"),url("../image/back_header_st2.png"),linear-gradient(rgb(131, 175, 47, 0) 86%,rgb(131, 175, 47,0.2) 86%, rgb(131, 175, 47,0.2));
	background-size: 40% auto, 40% auto, 40% auto, 40% auto,auto;
	background-repeat: no-repeat;
	background-position: bottom 40% right,top 3% right 3%,top 50% left 6%,top left -10%,top;
}
header h1 {
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
	box-shadow: 6px 6px 0px 0px rgba(69, 150, 0, 0.4);
	overflow: hidden;
}
header h1::before,header h1::after {
	position: absolute;
	display: block;
	content: "　";
	width: 20%;
	height: 20%;
	padding: 10%;
	background-color: rgba(254, 222, 40,1);
	transform: rotate(45deg);
}
header h1::before {
	bottom: calc(-10% + -1.8rem) ;
	left: calc(-10% + -1.8rem);
}
header h1::after {
	top: calc(-10% + -1.8rem) ;
	right: calc(-10% + -1.8rem);
}
.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 ;
	background-size: 20% auto,20% auto,20% auto,20% auto,auto;
	background-position: right 3% top 60%,right 10% top 6%,top 50% left,10% top,top;
}
header h1::before,header h1::after {
	width: 16%;
	height: 16%;
	padding: 8%;
}
header h1::before { bottom: calc(-12% + -1.8rem) ; left: -8%; }
header h1::after { top: calc(-12% + -1.8rem) ; right: -8%; }
}

@media print, screen and (min-width: 1366px) {
header{	
	background-size: 300px auto, 300px auto, 300px auto, 300px auto,auto;
	background-position: right 3% top 60%,right 10% top 6%,top 50% left 2%,10% top,top;
}
header h1 { box-shadow: 10px 10px 0px 0px rgba(69, 150, 0, 0.4);}
}
/*COMMON
================================================= */
main { background-color: rgba(131, 175, 47,0.2); }
.area_concept,
.area_apf,
.area_program,footer { 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,.apf_block h2,.apf_block h3
 { text-align: center; color: #6c3e33;}

/*CONCEPT
================================================= */
.concept_block h2 { font-size: clamp( 1.8rem , 2.4vw , 3rem) ;}
.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: 86%;
	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: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	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%;}
}
/*apf
================================================= */
.apf_block {
	padding:  clamp( 1.4rem ,4% , 3.6rem);
	background-color: #ffffff;
	background-image:linear-gradient(180deg,rgb(255, 255, 255,1) 40%, rgb(255, 255, 255,0.6)),url("../image/back_ap2.png");
	background-size: auto, 466px auto;
	background-position: top left,top right;
	box-shadow: 6px 6px 0px 0px rgba(69, 150, 0, 0.4);
}
.apf_block h2 { 
	margin-top: 4%;
	font-size: clamp( 2.4rem , 2vw , 3rem);
	line-height: 1.4;
}
.apf_block h3 { text-align: center;}
.apf_block h2 span,.apf_block h3 span { display: inline-block; }

.apf_block h4 { font-size: clamp( 1.8rem , 2vw , 3rem); text-align: center; padding: 1.0rem 0;}
.apf_block h4 span{ font-size: clamp( 1.4rem , 1.6vw , 2rem);}
.apf_box {
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: space-between;
}
.apf_box_left,.ap_box_right { width: 100%; }
.apf_bn { width: 90%; max-width: 320px; margin: 1.4rem auto 0;}
.apf_bn img { border: solid 1px #dfdfdf; line-height: 1;}
.apf_bn p { text-align: center; font-size: 1.2rem; margin-top: 1rem;}

@media print, screen and (min-width: 768px) {
.apf_block {
	background-image:linear-gradient(90deg,rgb(255, 255, 255,1) 46%, rgb(255, 255, 255,0.6)),url("../image/back_ap2.png");
	background-size: auto, 466px auto;}
.apf_box_left { width: 48.5%; }
.apf_box_right { width: 48.5%; }
}

/*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;
	box-shadow: 6px 6px 0px 0px rgba(69, 150, 0, 0.4);
}
.program_unit::after {
	position: absolute;
	display: block;
	content: "　";
	width: 80px;
	height: 80px;
	background-color: rgba(255, 218, 179,1);
	transform: rotate(45deg);
}
.program_unit::after {
	top: -40px ;
	right: -40px;
}

/*画像*/
.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: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  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: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  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: 1024px) {
.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: #519d0c;
	font-size: 1.3rem;
    font-weight: bold;
	text-align: center;
	border-radius: 2.4rem;
	border: solid 2px #519d0c;
}
.btn_link:hover {
	text-decoration: none;
	color: #fff;
	 background-color: #519d0c;
}
.btn_link::before {
	display: block;
	position: absolute;
	content: "";
	width: 1rem;
	height: 1rem;
	top: 1.3rem;
	border-left: solid 2px #519d0c;
	border-top: solid 2px #519d0c;
	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%;}}