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

File Name:  styles.css
Last Update:2026-05-26

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

@charset "utf-8";

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

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

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

.index_header {
	width:100%;
	margin:0 auto;
	background: #00b5ee;
}

.index_header h1 {
	width: 100%;
	overflow: hidden;
}
.index_header h1 img {
	width: 100%;
	max-width: 1680px;
}
.bingocard_header {
	width:80%;
	max-width: 623px;
	margin:clamp( 2rem ,4% , 40px) auto 0;
}
@media screen and (min-width: 960px) {
.index_header h1 img { width: 124%; margin-left: -12%;}
}

@media screen and (min-width: 1344px) {
.index_header h1 img { width: 100%; margin: auto; }
.bingocard_header { width:80%; max-width: 623px; }
}

/* 2カラム------------------------------------------*/
.column_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width:90%;
	margin: 0 auto;
	padding: clamp(2rem,6%,120px) 0;
}
.mc { justify-content: center; }

.box_ll { max-width:1366px; }
.box_l { max-width:1230px; }
.box_s { max-width:960px; }

.column_unit { box-sizing: border-box; }
.column_unit { width: 100%; }
/*全幅カラム*/
.all_width_unit { flex-basis:100%; }

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

/*テキスト------------------------------------------*/
h2 { font-size: clamp(2rem , 6.4vw, 4.8rem); line-height: 1; text-align: center; }

/* Fonts(googlefont) */
.zen-maru-gothic {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

h2,h3,h4,h5,.text_intro,.link_btn a,
.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* button
================================================= */
.link_btn a {
  display: block;
  position: relative;
  margin: 4% auto 0;
  padding: 0.8rem 2rem;
  background-color: #2c2001;
  color: #ffffff;
  border: solid 0.4rem #2c2001;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-decoration: none;
  transition: .15s;
	line-height: 1.4;
}

.link_btn a:hover {
  color: #2c2001;
  background-color: #ffffff;
  transition: .15 var(--easing);
}

.link_btn a:before {
  content: "▶";
  position: absolute;
  top: calc(50% - 1.2rem);
  right: 1.6rem;
}

.link_btn_s a {width: 16rem; border-radius: 4rem;}
.link_btn_l a {width: 24rem; border-radius: 8rem;}

@media screen and (min-width: 960px) {/*タブレット小*/
.link_btn a {
  padding: 1.2rem 2.8rem;
  font-size: 1.8rem;
}
.link_btn a:before { top: calc(50% - 1.4rem); }
.link_btn_s a {width: 20rem;}
.link_btn_l a {width: 28rem;}
}

/*イントロダクション------------------------------------------*/

/*動画*/
.cm_movie {
	width: 86%;
	max-width: 480px;
	margin: 6% auto;
	background: #222222;
}
/*番組解説*/
.text_intro { font-size: clamp( 1.6rem , 1.8vw, 2.4rem);  margin:0 auto 0; }
.text_intro span { display: inline-block; }

.area_intro {
	background-image: url("../image/back_intro.png"),linear-gradient(rgba(96, 170, 184, 0.2), rgba(96, 170, 184, 0));
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 130% auto, auto 20%;
}

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

/*ビンゴカード*/
.bingo_img{ border: solid 2px #ffffff; }
.bingo_img_txt{text-align: center; margin-bottom: 1.6rem;}

/*イントロスライダー*/
.photo_studio { }
.photo_swiper { z-index: -2; padding: 0;}

.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 2px #ffffff;}

@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; }
}

/*プレゼント----------------------------------------------------------------------------*/
.area_present{
	background-color:#fff;
	padding: 1px 0;
	background-image:linear-gradient(90deg,rgba(255, 255, 255, 0)0, rgba(255, 255, 255, 1)4%, rgba(255, 255, 255, 1)96%, rgba(255, 255, 255, 0)100%), url("../image/back_dotte_y.png");
	background-size: auto, 290px auto;
}

.present_box{
	width:90%;
	margin: clamp(2rem,6%,120px) auto;
}
.present_box .present_box_intro { text-align: center; }
.present_box h2{ margin-bottom: clamp(1.6rem,2%,24px); color: #d40514;}
.present_box img{ margin: 1.6rem 0; }
.present_box .link_btn { margin: 1.6rem 0; }
.present_box h3{
	margin-top: clamp(1.4rem,2%,28px);
	margin-bottom: clamp(1.2rem,1.6%,24px);
	font-size: clamp(1.8rem ,3vw, 2.8rem);
	display: inline-block;
	border-bottom: solid 4px #fff600;
	color: #d40514;
}
.present_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.present_list > div{
	width: 100%;
	margin-top: 2.8rem;
	border-radius: 1em;
}
@media screen and (min-width: 768px) {
.area_present{
	background-image:linear-gradient(90deg,rgba(255, 255, 255, 0)0, rgba(255, 255, 255, 1)10%, rgba(255, 255, 255, 1)90%, rgba(255, 255, 255, 0)100%), url("../image/back_dotte_y.png");
	background-size: auto, 580px auto;
}
.present_list div { width: 47.5%; }
.present_box h3 { font-size: clamp(2rem ,2vw, 2.8rem); }
}

@media screen and (min-width: 1366px) {
.area_present{
	background-image:linear-gradient(90deg,rgba(255, 255, 255, 0)0, rgba(255, 255, 255, 1)14%, rgba(255, 255, 255, 1)86%, rgba(255, 255, 255, 0)100%), url("../image/back_dotte_y.png");
	background-size: auto, 580px auto;
}
}

/*ルール----------------------------------------------------------------------------*/
.rule_box{
	width:90%;
	margin: clamp(2rem,6%,120px) auto;
	padding: 4% ;
	background: #ffffff;
	border-radius: 1em;
}
.rule_box .rule_box_intro { text-align: center; }
.rule_box h2{ margin-bottom: clamp(1.6rem,2%,24px); }

.rule_box h3{
	margin-bottom: clamp(1.6rem,2%,30px);
	font-size: clamp(1.8rem ,3vw, 2.8rem);
	display: inline-block;
	border-bottom: solid 4px #fff600;
	color: #0089c8;
}
.rule_box h3::first-letter{
	font-size: clamp(2rem ,3.2vw, 3rem);
	letter-spacing: 0.4rem;
}
.rule_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.rule_list > div{
	width: 100%;
	margin-top: 2.8rem;
	border-radius: 1em;
}
@media screen and (min-width: 768px) {
.rule_list div { width: 47.5%; }
.rule_box h3 { font-size: clamp(2rem ,2vw, 2.8rem); }
.rule_box h3::first-letter { font-size: clamp(2.2rem ,2.8vw, 3rem); }
}

/*ビンゴバナー*/
.bingo_bn{
	margin: 6% auto 0;
	width: 70%;
	max-width:560px; 
	border: solid 1px #ffffff;
}
/*ビンゴカードについて--------------------------------------------------------------------------------*/

.area_top{
	padding: 1px 0;
	background-image: url("../image/back_yama.png");
	background-repeat: repeat-x;
	background-size: auto 120%;
	background-position: bottom center;
}

.bingostoy_box{
	margin: 6% auto;
	width: 90%;
	/*padding-top: 6%; */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	/*border-top: dotted 2px #a5e3f6;*/
}
.bingostoy_box h4 { 
	display: inline-block;
	margin-bottom: 1rem;
	font-size: clamp(2rem ,2vw, 2.8rem); 
	color: #ffffff/*#6bc26d*/;
	border-bottom: solid 4px #fff600;
	text-shadow: 2px 3px 0px rgba(0, 181, 238, 1);
}
.bingostoy_box .column_unit { margin: 0 0 3%;  }
.bingostoy_box .column_unit:last-child { margin: 0 0 0; }
.bingostoy_pc{display: none;}
.bingostoy_smp{display: inline-block;}
@media screen and (min-width: 640px) {
.area_top{background-size: 160% auto;}
.bingostoy_box .column_unit { margin: 0; }
.bingostoy_pc{display: inline-block;}
.bingostoy_smp{display: none;}
}
@media screen and (min-width: 1280px) {
	.area_top{ background-size: 120% auto; }
}
/*ロケ--------------------------------------------------------------------------------*/
.area_loce {
	padding: clamp(2rem,6%,120px) 0;
	width: 100%;
	background-color: #9acd8c;
	background-image: url("../image/back_loca.png");
	background-repeat: repeat-y;
	background-size: 200% auto;
	background-position: left 40% top;
}

.loce_box{
	margin-bottom: 70px;
	padding: clamp(18px , 4%, 60px);
	align-items: center;
	background-color: rgba(145, 205, 140, 0.7);
	background-image: url("../image/back_dotte.png");
	background-size: 18px;
	border-radius: 1em;
	position: relative;
}

.loce_box_reverse{ flex-wrap: wrap-reverse;}

.loce_box::after {
	display: block;
	position: absolute;
	content: "";
	bottom: -50px;
	left: calc( 50% - 30px);
    width: 60px;
    height: 30px;
	background: url("../image/icom_arrow.svg") no-repeat;
}

.loce_box:last-of-type { margin-bottom: 0;}
.loce_box:last-of-type::after { display: none; }

.sub_title_unit{ width: 100%; margin-bottom: 2rem; }
.photo_unit{ width: 100% }
.sub_title_unit h4 { max-width: 200px; margin:0 auto 1.2rem; }
.sub_title_unit .text_intro{text-align: center;}
.spot_swiper .swiper-pagination-bullet { width: 8px; height: 8px; background-color:  #ffffff;}

@media screen and (min-width: 640px) {
.area_loce {
	background-size: 120% auto;
	background-position: left 20% top;
}
.loce_box{ background-size: 24px; }
.sub_title_unit{ width: 34%; margin-bottom: 0;}
.photo_unit{ width: 62%; }
.sub_title_unit h4 { max-width: 300px; }
}
@media screen and (min-width: 960px) {
.loce_box{ margin-bottom: 100px;}
.loce_box::after {
	bottom: -70px;
	left: calc( 50% - 40px);
    width: 80px;
    height: 40px;
}
}
@media screen and (min-width: 1600px) {
.area_loce {
	background-position: left top;
	background-size: 2100px auto;
}
}
/*出演者--------------------------------------------------------------------------------*/
.area_cast { 
	padding: clamp(2rem,6%,120px) 0 0;
	background-image: url("../image/back_cast.png");
	background-size: 400px;
}

/*出演者コメント付き*/
.cast_comment_box { }

.cast_comment_unit {
	margin-bottom: 6%;
	padding: 4%;
	background: #fff;
	border-radius: 6px;
}
.cast_comment_unit figure { width: 80%; margin: auto; text-align: center; }	
.cast_comment_unit p { font-size: 1.4rem; }
.cast_comment_unit h5 { font-size: 1.5rem; font-weight: bold; border-bottom: 1px dashed #cccccc; margin: 1.0rem 0; }

.cast_comment_unit h3 {
	display: inline-block;
	position: relative;
	background:  #2c2001;
	background-size: auto 100%;
	color: #FFF;
	margin: 0 0 3.125% calc(-10px + -4% );
	padding: 3px 15px 3px 16px;
	font-size: 1.6rem;
}

.cast_comment_unit h3::before {
	content: "★";
	color: yellow;
	padding-right: 8px;
}

.cast_comment_unit figcaption {
	margin: 1% 0 0 0;
	font-size: 1.4rem;
	font-weight: 600;
}
.cast_comment_unit figcaption span
{ font-size: 1.7rem; margin: 1% 0 -1% 0;}

.cast_comment_unit figcaption span { display: inline; }	

@media screen and (min-width: 640px) {
.cast_comment_unit { width: 48.5%; margin: 0 0 3%; padding: 1.5% 3% 3%; }
.cast_comment_unit:last-child { margin: 0 0 3%; }
.cast_comment_unit figure { width: 100%; max-width: 400px; }
.cast_comment_unit h3 { margin: 0 0 3.125% calc(-16px + -6% ); }
}

@media screen and (min-width: 960px) {
.area_cast { background-size: 600px; }
.cast_comment_unit figcaption span { font-size: 2.0rem; }
.cast_comment_unit p { font-size: 1.6rem; }
.cast_comment_unit h5 { font-size: 1.8rem; }	
}

/*フッターバナー*/
ul.footer_bn{display:flex;flex-wrap:wrap;justify-content:center;width:260px;margin: 0 auto;}
.footer_bn li{width:100%;padding:0 0 1.6rem;}

@media screen and (min-width: 640px) {/*タブレット小*/
ul.footer_bn{width: 80%;max-width: 640px;}
.footer_bn li{width:48.25%;padding:1rem 0.2rem;}
}