/* ----------------------------

File Name:  styles.css
Last Update:2025-07-03

---------------------------- */

@charset "utf-8";

@-ms-viewport {width: device-width;}

/* base
   ========================================================================== */

/* Fonts(googlefont)
================================================= */
.font_zen-kaku {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 900;
  font-style: normal;
}

.font_zen-kaku_small {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 500;
  font-style: normal;
}

/*header------------------------------------------*/

header {
	width:100%;
	margin:0 auto;
	border-top: solid 6px #732b1c;
	background: #dad9b1 url("../image/back_header.jpg") center;
}

header h1 { width: 100%; overflow: hidden; }

@media screen and (min-width: 960px) {
header h1 { width: 126%; margin: 0 auto 0 -13%;}
}
@media screen and (min-width: 1180px) {
header h1 { width: 112%; margin: 0 auto 0 -6%; }
}
@media screen and (min-width: 1344px) {
header h1 { width: 104%; margin: 0 auto 0 -2%;}
}
@media screen and (min-width: 1650px) {
header h1 { width: 1650px; margin: 0 auto ; }
}

/* カラム------------------------------------------*/
.column_box {
	width:96%;
	margin: 0 auto;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.box_ll { max-width:1480px; }
.box_l { max-width:1280px; }
.box_s { max-width:800px; }

.column_unit { width: 90%; margin: 4% auto 0 ; background: #222222; }

/*全幅カラム*/
.all_width_unit { width:100%; }

@media screen and (min-width: 640px) {
.column_unit { width: 48.5%; margin: 4% 0 0 ; }
}

/*テキスト------------------------------------------*/
h2 { font-size: 6vw; margin-bottom: 2%; }
h2,h3 { text-align: center; }

@media screen and (min-width: 640px) {
h2 { font-size: 3.8vw; }
}

@media screen and (min-width: 1344px) {
h2 { font-size: 4.8rem; }
}

/*各ブロック・色指定------------------------------------------*/
.area { width: 100%; }

.area_intro { background:#38665e; }
.area_news { background:#38665e; }
.area_photo{  }
.area_cast { background:#dad9b1 url("../image/back_intro.png"); background-size:80% auto;  }

.area_intro h2 { color:#732b1c; }
.area_news h2 { color: #ffffff; }
.area_photo h2 { color: #ffffff; }
.area_cast h2 { color: #38665e; }

@media screen and (min-width: 960px) {
.area_cast { background-size:50% auto; }
}

/*イントロダクション------------------------------------------*/
.area_intro { padding: 2rem 0;  }
.intro_box { 
	width: 96%;
	margin: 0 auto;
	padding: 4%;
	background:#dad9b1 url("../image/back_intro.png"); 
	background-size:80% auto; 
	border-radius: 2rem;
	color:#732b1c;
}

/*動画*/
.cm_movie {
	width: 90%;
	margin: 4% auto 0;
	background: #222222;
}
/*番組解説*/
.text_intro { font-size: 1.6rem; margin: 2% auto 0; }
.text_intro span { font-size: 2rem; }
.cut_intro { max-width: 1280px; margin-top: 4%; }

@media screen and (min-width: 640px) {
.cm_movie{ width: 80%; max-width: 840px; }
}

@media screen and (min-width: 960px) {
.text_intro { font-size: 2rem }
.text_intro span { font-size: 2.4rem; }
.intro_box { background-size:50% auto; }
}
@media screen and (min-width: 1280px) {
.intro_box { width: calc(100% - 4rem ); }
.text_intro { font-size: 2.2rem; margin: 20px auto 0;  }
.text_intro span { font-size: 2.6rem; }
}

/*写真スライダー------------------------------------------*/
.area_photo { padding: 2% 0 1%; }
.photo_swiper { z-index: -2; padding: 0 0 2%;}

.photo_swiper .swiper-slide {
	cursor: pointer;
	margin: 0 auto 30px;
}

.photo_swiper .swiper-pagination { margin: 0 auto -5px; }
.photo_swiper .swiper-slide img { 
	width: 100%; border: solid 10px #ffffff;
	border-radius: 10px;
	box-shadow: 1px 1px 5px -1px rgba(77,33,5,0.4);
}

@media screen and (min-width: 540px) {
.photo_swiper .swiper-slide { margin: 0 auto 40px; }
.photo_swiper .swiper-pagination { margin: 0 auto -1px; }
}

@media screen and (min-width: 960px) {
.photo_swiper .swiper-slide { margin: 0 auto 60px; }
.photo_swiper .swiper-wrapper { margin: 0 auto -10px; }
.photo_swiper .swiper-slide img { box-shadow: 2px 2px 5px -2px rgba(77,33,5,0.6); }
.photo_swiper .swiper-pagination-bullet { width: 8px; height: 8px; }
}

@media screen and (min-width: 1280px) {
.photo_swiper .swiper-slide { margin: 0 auto 70px; }
.photo_swiper .swiper-wrapper { margin: 0 auto -15px; }
}

/* NEWS-CMSリンクリスト ------------------------------------------*/
.area_news { padding: calc(2% - 2rem) 0 4%; }
.news_topic { width: 90%;
	padding: 2rem;
	background: #ffffff;
	border-radius: 2rem;
	margin: auto;
}

.news_topic ul {
	width:100%;
	margin: auto;
	padding: 0;
	height: 220px;
	background: #ffffff;
    overflow-y: scroll;
    overflow: auto;
}

.news_topic li{
	list-style: none;
	border-bottom: solid 1px #cccccc ;
	margin: 5px;
	padding: 10px;
	font-size: 1.3rem;
}

.news_topic li:last-child{
	list-style: none;
	border-bottom: none ;
	margin: 5px 5px 0;
	padding: 10px;
}

.news_topic li::after{
	content: " ";
	padding: 10px;
	background-image: url(../image/icon_outosite_b.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px, 0;
	left: 0;
}

.news_topic time{
	margin: 0 0.4rem 0.8rem 0;
	padding: 0.4rem 0.6rem;
	border-radius: 0.4rem;
	color: #ffffff;
	background: #732b1c;
	font-size: 1.2rem;
}
.news_topic_txt{ line-height: 1.8; }

@media screen and (min-width: 960px) {
.news_topic ul { height: inherit; }
.news_topic li{ font-size: 1.6rem; }
.news_topic time{ padding: 0.6rem 0.8rem; border-radius: 0.8rem; font-size: 1.4rem; }
}

@media screen and (min-width: 1280px) {
.news_topic li{ font-size: 1.8rem; }
}

/*出演者--------------------------------------------------------------------------------*/
.area_cast { padding: 2% 0 2%; }
.cast_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.cast_comment_unit {
	width: 90%;
	margin: 4%;
	padding: 4%;
	background: #fff;
	border-radius: 1rem;
}
.cast_comment_unit:first-child { margin-top: 2%; }
.cast_comment_unit figure { width: 80%; margin: auto; padding: 4% 0; text-align: center; }	
.cast_comment_unit p { font-size: 1.3rem; }

.area_cast h3 {
	margin:-2% auto 0;
	font-size: 2rem;
	color: #732b1c;
}

.cast_comment_unit h4 {
	display: inline-block;
	color:#ffffff;
	margin: 0 -2% 0 calc( -0.7rem + -4% );
	padding: 0.4rem 1.5rem 0 1.5rem;
	font-size: 1.4rem;
	border: solid 3px #732b1c;
	border-radius: 0.8rem;
	box-shadow: 4px 4px 0px -2px rgba(115, 43, 28, 0.5);
	letter-spacing: 0.1rem;
}
.cast_age_10 { background: #3291f2 ;}
.cast_age_20 { background: #f972c5 ;}
.cast_age_30 { background: #29a1fb ;}
.cast_age_40 { background: #eb9300 ;}
.cast_age_50 { background: #b374ee ;}
.cast_age_60 { background: #6f9946 ;}

.cast_comment_unit h4 span { font-size: 1.8rem; }

.cast_comment_unit figcaption {
	margin: 2% 0 0 0;
	font-size: 1.8rem;
	color: #732b1c;
	font-weight: 600;
}
.cast_comment_unit figcaption span
{ margin: 1% 0 -1% 0; font-size: 1.4rem; display: inline; }

@media screen and (min-width: 640px) {
.area_cast h3 { font-size: 2.4rem; margin:-1% auto 1%;}
.cast_comment_unit { width: 48.5%; margin: 0 0 3%; padding: 3%; }
.cast_comment_unit:first-child { margin-top: 0; }
.cast_comment_unit:last-child { margin: 0 0 3%; }
.cast_comment_unit h4 { font-size: 1.8rem; margin: 0 -2% 0 calc( -1.5rem + -6% );  padding: 0.2rem 1rem 0 1rem;}
.cast_comment_unit h4 span { font-size: 2.2rem; }
}

@media screen and (min-width: 960px) {
.cast_comment_unit p { font-size: 1.6rem; }
}

@media screen and (min-width: 1280px) {
.cast_flex { justify-content: flex-start; }
.cast_comment_unit { width: 31.5%; margin: 0 2.75% 3% 0; padding: 1.5% 3% 3%; }
.cast_comment_unit:nth-child(3) { margin: 0 0 3%; }
.cast_comment_unit:last-child { margin: 0 0 3%; }
.area_cast h3 { font-size: 2.8rem; }
.cast_comment_unit h4 { margin: 0 -2% 0 calc(-3rem + -6% ); }
}