@charset "utf-8";
/*
Theme Name: エコロジー最前線
Theme URI: http://sbc21.co.jp/
Description: SBC信越放送：エコロジー最前線（202004）
Author: SBC企画事業部
Version: 1.0
*/

/* ===== base ================================ */
#body{
	width: 100%;
	text-align: left ;
	background: url("../img/bg.png"), -webkit-linear-gradient(6deg, rgb(253, 219, 146), rgb(209, 253, 255));
	background: url("../img/bg.png"),linear-gradient(6deg, rgb(253, 219, 146), rgb(209, 253, 255));
	background-repeat: repeat-x;
	background-size: contain;
	background-position: bottom center;}

.container{
	width: 100%;}

@media screen and (max-width: 767px) {
  * {
	  -webkit-text-size-adjust: none; /* 文字の拡大縮小を防ぐ */
    box-sizing: border-box;}

#body{
	background: url("../img/bg_smart.png"), -webkit-linear-gradient(6deg, rgb(253, 219, 146), rgb(209, 253, 255));
	background: url("../img/bg_smart.png"),linear-gradient(6deg, rgb(253, 219, 146), rgb(209, 253, 255));
	background-repeat: repeat-x;
	background-size: auto;
	background-position: bottom center;}	
}

/* ===== タイトルエリア ================================ */
.page_header{
	width: 100%;
    max-width: 1200px;
	overflow: hidden ;
	margin: 0 auto;
	padding: 25px 20px 15px;
	display: flex;
	flex-direction:row;
	align-items: center;
	position: relative;
	box-sizing: border-box;}

.page_header h1{
	margin: 0 50px 0 0;}

.page_header .onair_time{
	position:absolute;
	bottom: 10px;
	right: 30px;}

.page_header .page_header_message{
	/*width: 707px;*/}

.page_header .page_header_message p{
	margin-bottom: 10px;
	font-size: 1.8rem;
	line-height: 1.5;}


/* ===== サブページ　タイトルエリア ================================ */
.sub_page_header{
	width: 100%;
    max-width: 1200px;
	overflow: hidden ;
	margin: 0 auto;
	padding: 15px 0 5px;}

.sub_page_header h1{
	width: 100%;
	margin: 0 auto;
	text-align: center;}

.sub_page_header h1 img{
	width: 15%;
	height:auto;}

/*　for iPad 　*/
@media screen and (min-width:768px) and ( max-width:1023px) {
.page_header{
	width:98%;
	margin: 20px auto 0;
	flex-direction:column;
	justify-content:center;}
		
.page_header h1{
	width: 60%;
	margin: 0 auto;
	text-align: center;}

	.page_header h1 img{
		width: 100%;
		height: auto;}
	
.page_header .onair_time{
	margin: 10px auto;
	position:static;
	bottom: 0;
	right: 0;}	

.page_header .page_header_message{
	width: 95%;
	margin: 5px auto 0;}
	
.sub_page_header{
	width:98%;
	margin: 20px auto 10px;}
	
.sub_page_header h1 img{
	width: 30%;
	height:auto;}
	
}

@media screen and (max-width: 748px) {
.page_header{
	width:90%;
	margin: 0 auto 20px;
	padding: 10px 0 0;
	display: flex;
	flex-direction: column;}
	
.page_header h1{
	width: 95%;
	margin: 0 auto 10px;}	
	
	.page_header h1 img{
		width: 100%;
		height: auto;}
	
.page_header .onair_time{
	width: 90%;
	position:static;
	bottom: 0;
	right: 0;}
	
	.page_header .onair_time img{
		width: 100%;
		height: auto;}

	.page_header .page_header_message{
		margin-top: 10px;}	
	
.page_header .page_header_message p{
	margin-bottom: 5px;
	font-size: 1.4rem;
	line-height: 1.3;}
	
.sub_page_header{
	width:100%;
	margin: 0 auto;
	padding: 15px 0 0;}	
	
.sub_page_header h1 img{
	width: 45%;
	height:auto;}
}


/* ===== メインコンテンツ ============================== */
#wrapper{
	width: 100%;
    max-width: 1200px;
	margin:0 auto 30px;
	padding: 50px;
	font-family:"メイリオ","Meiryo","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
	font-size:14px;
	color: #333333;
	background-color: #FFF;
	border-radius: 15px;
	box-sizing: border-box;}

#wrapper .row{
	width: 100%;
	margin: 0;
	padding: 0;
	display:flex;
	flex-direction: row;
	align-items:stretch;}

#wrapper .breadcrumbs{
	font-size: 1.5rem;
	position: relative;}

	#wrapper .breadcrumbs a{
		font-weight: bold;}

#wrapper .breadcrumbs:after{
	content: '';
	display: inline-block;
	width: 420px;
	height: 80px;
	background-image: url("../img/img_leaf.png");
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: -85px;
	right: -30px;}

/*　for iPad 　*/
@media screen and (min-width:768px) and ( max-width:1023px) {
#wrapper{
	width:90%;
	margin: 0 auto;
	padding: 20px 0;}
	
#wrapper .row{
	margin: 20px 0;
	overflow: hidden;
	flex-direction: column;}
	
#wrapper .breadcrumbs{
	margin: 0 0 10px 20px;}	
	
#wrapper .breadcrumbs:after{
	display: none;}
}

@media screen and (max-width: 748px) {
#wrapper{
	width:95%;
	margin: 10px auto 0;
	padding: 20px 10px;
	border-radius: 10px;}
	
#wrapper .row{
	width: 100%;
	padding: 0 0 10px;
	display:flex;
	flex-direction: column;}
	
#wrapper .breadcrumbs{
	margin-bottom: 5px;
	font-size: 1.3rem;}	
	
#wrapper .breadcrumbs:after{
	display: none;}
	
}

/* ===== 左カラム ====================================== */
#left_area{	
	width:700px;
	margin: 0 50px 0 0;
	padding: 50px 30px;
	background-color: #eeeeee;
	box-sizing: border-box;}
/*
PICK-UP
----------------------------------------------------- */
#left_areat #pick-up{
	width: 100%;
	margin:0;
	padding: 0 0 30px;
	border:4px solid #95de02;
	display:table;
	border-radius: 3px;
	box-sizing: border-box;}
	
	#left_area #pick-up h2{
		margin: 0 0 5px 110px;;
		padding:0;
		color:#000;
		font-size:2rem;
		line-height:1.5;
		text-align:left;
		position: relative;}
	
		#left_area #pick-up h2:before{
			content:"";
			display:inline-block;
			width:120px;
			height:130px;
			background:url("../img/pickup.png")no-repeat;
			background-size:contain;
			position: absolute;
			left:-130px;
			top:-35px;}

	#left_area #pick-up .date{
		margin:0 0 45px 110px;
		padding:0;
		font-size:1.4rem;
		font-weight: normal;
		color:#666666;
		text-align:left;}
	
	#left_area #pick-up p{
		margin:0 0 5px;
		padding:0;
		font-size:1.5rem;
		line-height:1.5;
		text-align:left;}
	
	#left_area #pick-up figure{
		width: 580px;
		margin:0 auto 20px;
		padding:0;;}

		#left_area #pick-up figure img{
			width: 100%;
			height: auto;}


/*　for iPad 　*/
@media screen and (min-width:768px) and ( max-width:1023px) {
#left_area{
	width:95%;
	margin: 0 auto 20px;}

	#left_area #pick-up .date{
		font-size:1.8rem;}	
	
	#left_area #pick-up p{
		font-size:1.7rem;}	
	
	#left_area #pick-up figure{
		width: 100%;}
}


@media screen and (max-width: 748px) {
#left_area{
	width:95%;
	margin: 0 auto;
	padding: 20px 10px;}
	
	#left_area #pick-up{
		width:100%;
		margin: 0 auto 20px auto ;
		padding: 0;
		display:block;
		box-sizing: border-box ;}

	#left_area #pick-up h2{
		margin:0 0 5px;
		padding-left: 55px;
		font-size: 1.5rem}

		#left_area #pick-up h2:before{
			content:"";
			display:inline-block;
			width:80px;
			height:87px;
			background:url("../img/pickup.png")no-repeat;
			background-size:contain;
			position: absolute;
			left:-30px;
			top:-44px;}	

	#left_area #pick-up .date{
		width:100%;
		margin:0 0 5px;
		padding-right:0;
		font-size: 1.2rem;
		text-align: center;
		box-sizing:border-box;}
	
	#left_area #pick-up p{
		width:90%;
		margin:0 auto;
		font-size: 1.4rem;
		text-align:left;}
	
		#left_area #pick-up figure{
			width: 90%;
			margin:0 auto 10px;
			padding:0;
			text-align:center;}
}

/* ===== 右カラム ====================================== */
#right_area{
	width:360px;}

#right_area #top_archive{
	width: 100%;
	margin-bottom: 40px;}

#right_area #top_archive  h2{
	margin: 0 0 30px; 
	padding:15px 10px;
	color:#FFF;
	font-size:2rem;
	text-align: center;
	line-height:1;
	background-color: #90c31f;}

#right_area #top_archive ul{
	width: 95%;
	margin: 10px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: stretch;}

#right_area #top_archive li{
	width : calc(100% / 3) ;
	margin: 0 0 5px;}

#right_area #top_archive li a{
	width : 95% ;
	margin: 0 auto;
	padding: 8px 5px;
	font-weight: 600;
	text-align: center;
	line-height: 1;
	border: 1px solid #c4c4c4;
	display: block;
	position: relative;
	box-sizing: border-box;}

#right_area #top_archive li a:hover{
	color: #FFF;
	background-color: #FFAF52;}

#right_area  #sponser{
	width: 100%;
	margin:0;
	padding:30px 0 20px;
	display: flex;
	flex-direction: column;
	border: 2px #eee solid;}

#right_area  #sponser ul{
	width: 100%;
	margin:0;
	padding:0;
	text-align:center;
	list-style: none;}

#right_area  #sponser li{
	width: 85%;
	margin:0 auto;
	box-sizing: border-box;	}

#right_area  #sponser li:nth-child(2){
	margin-bottom: 10px;}

#right_area  #sponser li dl{
	margin: 0 0 20px;
	padding: 0 0 10px;
	align-items: center;
	border-bottom: 2px solid #eee;}

#right_area  #sponser li dt{
	margin-bottom: 5px;
	font-size: 1.4rem;}

#right_area  #sponser li a:hover{
	opacity: 0.7;}

#right_area  #sponser li img{
	/*width: 100%;*/
	max-width: 255px;
	height: auto;}	

/*　for iPad 　*/
@media screen and (min-width:768px) and ( max-width:1023px) {
#right_area{
	width:95%;
	margin: 20px auto 0;}	

#right_area #top_archive ul{
	flex-direction: row;
	justify-content: flex-start;}	
	
#right_area #top_archive li{
	width : calc(100% / 5) ;
	margin: 0 0 5px;}
	
#right_area #top_archive li a{
	width : 95% ;
	padding: 10px 5px;
	font-size: 1.6rem;}	
	
#right_area  #sponser{
	width: 100%;
	margin: 0 auto;}	

#right_area  #sponser  ul{
	width: 100%;
	padding: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content:space-around;}
	
#right_area  #sponser li{
	margin: 0;
	padding: 0;
	width : calc(100% / 3) ;
	 align-items: center;}	

#right_area  #sponser li dl{
	margin: 0;
	padding: 0;
	border-bottom: none}	
	
#right_area  #sponser li img{
	width: 100%;
	height: auto;}	
}


@media screen and (max-width: 748px) {
#right_area{
	width:95%;
	margin: 30px auto 0;}	

#right_area #top_archive{
	margin-bottom: 20px;}	
	
#right_area #top_archive  h2{
	margin: 0 0 20px; 
	padding:10px;
	font-size:1.6rem;}	

#right_area  #sponser{
	width: 100%;
	margin:0;
	padding:30px 0;}
}

/*
過去の放送リスト
----------------------------------------------------- */
.archive{
	width:760px;
	margin: 10px 50px 0 0;
	padding:30px;
	text-align: left;
	background-color: #eeeeee;}
	
.archive h3{
	margin:0 0 20px;
	padding:6px;
	text-align: center;
	font-size: 2rem;
	border: 4px solid #009944;
	color:#009944;
	box-sizing: border-box;
	background-color: #FFF;}

.archive dl{
	margin:30px 20px 0;
	padding:0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;}

	.archive dt{
		width:17%;
		margin:0 0 5px;
		padding:5px 10px;
		text-align:center;
		font-size:1.6rem;
		float:left;
		box-sizing: border-box;
		border-bottom:1px dotted #CCC;}
	
		.archive dd{
			width: 83%;
			margin:0 0 5px;
			padding:5px 10px;
			font-size:1.6rem;
			border-bottom:1px dotted #CCC;}

		.archive dt:last-of-type{
			border-bottom:none;}

		.archive dd:last-child{
			border-bottom:none;}

/*　for iPad 　*/
@media screen and (min-width:768px) and ( max-width:1023px) {
.archive{
    width: 95%;
    margin: 0 auto 20px;
	padding:20px;}
	
.archive dl{
	margin:30px 0 0;}	
}

@media screen and (max-width: 748px) {
.archive{
	width:96%;
	margin: 0 2%;
	padding: 15px;}

	.archive h3{
		margin:0 0 20px;
		font-size: 1.6rem;
		border: 3px solid #009944;}
	
	.archive dl{
		width:100%;
		margin:0 auto;
		padding:0;}
	
		.archive dt{
			width:100%;
			margin: 0;
			padding: 0;
			font-size:1.3rem;
			text-align: left;
			border-bottom:none;}

		.archive dd{
			width:100%;
			margin: 0 0 10px;
			padding: 0 0 5px 10px;
			text-align: left;
			font-size:1.3rem;
			line-height:1.4;
			border-bottom:1px dotted #CCC;}	
	
			.archive dd:last-child{
				border-bottom: none;}
}


#sub_right_area{
	width:300px;
	margin-top: 10px;}

#sub_right_area #archive_list{
	width: 100%;}

#sub_right_area #archive_list h2{
	margin: 0 0 30px; 
	padding:15px 10px;
	color:#FFF;
	font-size:1.8rem;
	text-align: center;
	line-height:1;
	background-color: #90c31f;}

#sub_right_area #archive_list ul{
	width: 95%;
	margin: 10px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: stretch;}

#sub_right_area #archive_list li{
	width : calc(100% / 2) ;
	margin: 0 0 5px;}

#sub_right_area #archive_list li a{
	width : 95% ;
	margin: 0 auto;
	padding: 8px 5px;
	font-weight: 600;
	text-align: center;
	line-height: 1;
	border: 1px solid #c4c4c4;
	display: block;
	position: relative;
	box-sizing: border-box;}

#sub_right_area #archive_list a:hover{
	color: #FFF;
	background-color: #FFAF52;}


/*　for iPad 　*/
@media screen and (min-width:768px) and ( max-width:1023px) {
#sub_right_area{
	width: 95%;
	margin: 20px auto 0;}

#sub_right_area #archive_list ul{	
    flex-direction: row;
	justify-content: flex-start;}
	
#sub_right_area #archive_list li{	
	width: calc(100% / 5);
	margin: 0 0 5px;}
	
	#sub_right_area #archive_list li a{
		font-size: 1.6rem;}
}	

@media screen and (max-width: 748px) {
#sub_right_area{
	width:95%;
	margin: 20px auto 0;}

#sub_right_area #archive_list li{
	width : calc(100% / 3) ;
	margin: 0 0 5px;}
	
#sub_right_area #archive_list h2{
	margin: 0 0 20px; 
	padding:10px;
	font-size:1.6rem;}
}