@charset "UTF-8";
/** cmn_layout.css by minasupo**/
/* Reseting
---------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-weight: normal;
vertical-align: baseline;
}
/* Typography
---------------------------------------------------------- */
html {
font-size: 62.5%;
}
body {
height: 100%;
font-size: 1.6rem; /*1rem = 10px*/
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
color: #222;
}
html, body {
width: 100%;
/*overflow-x: hidden;*/
overflow-x: visible !important;
box-sizing: border-box;
background-color: #52C3F1;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
a {
cursor: pointer;
text-decoration: none;
}
a,
a:visited {
color: inherit;
}

/* Layout
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Elements
---------------------------------------------------------- */
table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
}
caption, th {
text-align: left;
}
ol, ul {
list-style: none;
}
img {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-weight: normal;
font-size: 100%;
vertical-align: bottom;
border-style: none;
}
input, textarea {
margin: 0;
padding: 0;
font-size: 100%;
}

a:focus {
outline: none;
}
table {
width: 100%;
}
/* font
---------------------------------------------------------- */
.tpMin {
font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.tpGot {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}
/* Clearfix
---------------------------------------------------------- */
.clearfix {
*zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}

/* Layout
---------------------------------------------------------- */
html { overflow-y: scroll;}
body { background: #fff; overflow-x: hidden;}

.sp_none { display: none;}
.pc_none { display: inherit;}

@media screen and (min-width: 569px) {
.sp_none { display: inherit;}
.pc_none { display: none;}
}

.layout-box01 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px 30px;
}
.layout-box02 {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}
.layout-box03 {
  max-width: 900px;
  margin: 0 auto;
}
/* wrapper
---------------------------------------------------------- */
.wrapper {
  width: 100%;
  background-color: #52C3F1;
}
.container {
  max-width: 1000px;
  text-align: left;
}

.sp_none {
    display: none !important;
}

/* header
---------------------------------------------------------- */
.header {
  position: relative;
  background: none;
  z-index: 1;
}
.header-inner {
  padding: 0;
  z-index: 100;
}
.header-title {
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
.header-time {
  position: absolute;
  width: 30%;
  height: auto;
  top: 90px;
  right: 10px;
  z-index: 10;
}
@media screen and (min-width: 480px) {
.header-time {
  top: 120px;
  right: 10px;
}
}
@media screen and (min-width: 569px) {
.wrapper {
  -webkit-transform:: translate3d(0, 0, 0);
  -moz-transform:: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
}
.container {
  position: inherit;
  margin: 0 auto;
  padding: 0;
}
.header-inner {
  width: 100%;
  margin: 0 auto;
  padding: 15px 0;
}
.header-title { }
.header-time {
  width: 188px;
  top: 30px;
  right: 10px;
}
}
@media screen and (min-width: 769px) {
.header-inner {
  padding: 0;
}
.header-time {
  width: 188px;
  top: 30px;
  right: -30px;
}
}
/* slider
---------------------------------------------------------- */
#slider {
  width: 100%;
  height: auto;
  padding: 8px 0;
}
#slider img {
  display: none;
}
#slider img:first-child {
  display: block;
}
.indicators {
  display: none;
}
@media screen and (min-width: 569px) {
#slider {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 0;
}
}
/* snsNav
---------------------------------------------------------- */
.snsnav {
  margin: 20px auto;
}
.snsnav-list {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.snsnav-item {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 1%;
  background-size: contain;
}
.snsnav-item a {
  display: block;
  width: 40px;
  height: 40px;
}
.snsnav-item._mail { background-image: url(../images/ico_mail_on.svg);}
.snsnav-item._facebook { background-image: url(../images/ico_facebook_on.svg);}
.snsnav-item._instagram { background-image: url(../images/ico_instagram_on.svg);}
.snsnav-item._twitter { background-image: url(../images/ico_twitter_on.svg);}
.snsnav-item._mail:hover { background-image: url(../images/ico_mail_off.svg);}
.snsnav-item._facebook:hover { background-image: url(../images/ico_facebook_off.svg);}
.snsnav-item._instagram:hover { background-image: url(../images/ico_instagram_off.svg);}
.snsnav-item._twitter:hover { background-image: url(../images/ico_twitter_off.svg);}

@media screen and (min-width: 569px) {
.snsnav {
  margin: 30px auto;
}
.snsnav-item {
  width: 50px;
  height: 50px;
  margin: 0 1%;
}
.snsnav-item a {
  width: 50px;
  height: 50px;
}
}
/* contents
---------------------------------------------------------- */
.contents {
  width: 100%;
  margin: 0 auto 30px;
  padding: 30px 20px;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.7);
}

.AirDate {
	background: #f80240;
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	color: #fff;
	padding:0;
}

/* youtube----------------------- */
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/* corner cast */
.corner,
.cast {
  width:90%;
  margin: 20px auto;
}
.corner-tit-inner,
.cast-tit-inner {
  border-bottom: solid 1px #cbedfb;
}
.corner-tit,
.cast-tit {
  display: table;
  margin: 0 0 -3px 0;
  font-size: 1.8rem;
  color: #cbedfb;
  letter-spacing: 3px;
  text-align: left;
  font-weight: bold;
}
.tb_line {
  border-radius: 3px;
  border-left: 1px solid #cbedfb;
  border-right: 1px solid #cbedfb;
}
.tb_line::before,
.tb_line::after {
  content: '';
  display: block;
  height: 3px;
  width: 100%;
  background: -webkit-gradient(linear, left top, right bottom, from(#cbedfb), to(#cbedfb));
  background: -moz-linear-gradient(left, #cbedfb, #cbedfb);
  background: linear-gradient(left, #cbedfb, #cbedfb);
}

@media screen and (min-width: 569px) {
.contents {
  margin: 10px auto;
  padding: 0 30px;
}
.corner,
.cast {
  width:90%;
  margin: 30px auto;
}
.corner-tit,
.cast-tit {
  font-size: 2rem;
}
}
@media screen and (min-width: 769px) {
.contents {
  margin: 15px auto;
  padding: 30px 80px;
  background-color: rgba(255, 255, 255, 0.7);
}

}
/* corner-list */
.corner-list {
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
}
.corner-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 20px 0;
  font-size: 1.4rem;
  line-height: 1.5;
  border-bottom: dotted 1px #e00;
}
.corner-item:last-child {
  border-bottom: none;
}
.corner-item a:hover {
  color: #e00;
  text-decoration: none;
}
.corner-logo {
  width: 90%;
  margin: 0 auto 20px auto;
}
.corner-txt {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.6;
}
@media screen and (min-width: 569px) {
.corner-list {
  padding: 20px 0;
}
.corner-item {
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 1.4rem;
}
.corner-item:last-child {
  border-bottom: none;
}
.corner-logo {
  width: 30%;
  margin: 0;
}
.corner-txt {
  width: 65%;
  font-size: 1.5rem;
}
}
/* cast */
.cast-list {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  padding: 20px 0;
}
.cast-item {
  display: block;
  width: 90%;
  margin: 15px auto;
}
.cast-img img {
  border: solid 3px #cbedfb;
  /*border-radius: 5px;*/
}
.cast-name {
  margin: 6px 0;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: 0em;
  font-weight: bold;
  color: #444;
  text-align: center;
}
.cast-profile {
  width: 100%;
  margin-bottom: 8px;
  font-size: 1.4rem;
  line-height: 1.6;
}
.cast-link {
  width: 100%;
  margin: 5px 0 5px 10px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1.2;
  white-space: nowrap;
}
.cast-link:before {
  content: '■';
  margin: 0 .3em 0 -1em;
  color: #e00;
  font-size: 1rem;
}
@media screen and (min-width: 569px) {
.cast-list {
  justify-content: space-between;
  max-width: 600px;
  margin: 10px auto;
  padding: 30px 0;
}
.cast-item {
  width: 47%;
  margin: auto;
}
.cast-name {
  margin: 8px 0;
  font-size: 2rem;
}
.cast-profile {
  margin-bottom: 8px;
  font-size: 1.4rem;
}
.cast-link {
  margin: 6px 0 6px 10px;
  font-size: 1.3rem;
}
}

/*---fujilover add----*/
.chapter-tit{
  font-weight:bold;
  font-size:1.6rem;
  color:#000;
}

.img_banner{
  margin: 0 auto;
  overflow: hidden;
}
.img_banner img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_banner:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

/*---fujilover add----*/

/* annerbox
---------------------------------------------------------- */
.bannerbox { }
.bannerbox-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 10px auto 20px auto;
  padding: 0 20px;
  text-align: center;
}
.bannerbox-item {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 0;
}
@media screen and (min-width: 569px) {
.bannerbox-list {
  justify-content: space-between;
  margin: 40px auto;
  padding: 0 30px;
}
.bannerbox-item {
  width: 32%;
  margin: 0;
}
}
@media screen and (min-width: 769px) {
.bannerbox-list {
  margin: 50px auto;
  padding: 0 80px;
}
}
/* footer
---------------------------------------------------------- */
.footer {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.sbs-logo {
  width: 62px;
  height: auto;
  margin: 15px auto;
}
.footer-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-item {
  margin: 5px 0;
  padding: 0 5px;
  font-size: 1.2rem;
  line-height: 1.4;
}
.footer-copyright {
  width: 100%;
  padding: 10px;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-align: center;
  color:#444;
}
/* page-top */
.page-top {
  width: 50px;
  height: 50px;
  margin: 10px auto;
}
.page-top a {
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
  border: 1px solid #cbedfb;
  border-radius: 40px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.page-top a:hover,
.page-top a:hover .arrow:before {
  border-color: #FFF;
}
.page-top a .arrow {
  overflow: hidden;
  height: 25px;
}
.page-top a .arrow:before {
  content: '';
  height: 20px;
  width: 20px;
  display: block;
  border: 2px solid #cbedfb;
  border-left-width: 0;
  border-bottom-width: 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  position: absolute;
  top: 39%;
  left: 28%;
}

@media screen and (min-width: 569px) {
.footer {
  width: 980px;
}
.sbs-logo {
  width: 80px;
  margin: 15px auto;
}
.footer-item {
  margin: 5px 0;
  padding: 0 8px;
  font-size: 1.3rem;
  border-right: solid 1px #444;
}
.footer-item:last-child {
  border-right: none;
}
.footer-copyright {
  padding: 10px;
  font-size: 1.2rem;
}
}
/* facebook
---------------------------------------------------------- */
.facebook {
  width: 100%;
  margin: 30px auto;
  text-align: center;
}

.timeline {                /*20230112 shibayama*/
  max-width: 100%;
  border: 1px solid #333;
  padding: 10px;
}
.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
@media screen and (min-width: 569px) {
.facebook-inner {
  margin: 50px auto;
}
.timeline {                /*20230112 shibayama*/
  max-width: 50%;
  margin:10px auto;
}
}

/*20230809 shibayama*/
.sp_br {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp_br {
    display: block;
  }
}

/* tvstation
--------------------------*/
.tvstation {
  margin: 30px auto;
}
.tvstation .secBox01 {
  position: relative;
  padding: 40px 20px;
}
.tvstation-tit { }
.tvstation-list {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
  line-height: 1.2;
}
.tvstation-item {
  width: 90%;
  margin: 0;
  padding: 10px 5%;
  border-bottom: solid 1px #666;
}
.tvstation-item:nth-child(1) {
  border-top: solid 1px #666;
}
.tvstation-item dl {
  display: flex;
}
.tvstation-item dl dt {
  width: 60px;
}
@media only print, screen and (min-width: 569px) {
.tvstation {
  margin: 30px auto;
  padding-bottom:30px;
}
.tvstation .secBox01 {
  padding: 50px 30px 40px 30px;
}
.tvstation .onair-tit {
  position: absolute;
  width: 280px;
  top: -40px;
  padding: 10px 15px;
  font-size: 2rem;
}
.tvstation-list {
  max-width: 620px;
  margin: 0 auto;
  flex-direction: row;
  flex-flow:row wrap;
  justify-content: space-between;
  font-size: 1.3rem;
}
.tvstation-item {
  width: 31%;
  margin: 0;
  padding: 10px 1%;
}
.tvstation-item:nth-child(1),
.tvstation-item:nth-child(2),
.tvstation-item:nth-child(3) {
  border-top: solid 1px #666;
}
.tvstation-item dl dt {
  width: 50px;
}
}
@media screen and (min-width: 960px) {
.tvstation-list {
  max-width: 860px;
  min-width: 700px;
  font-size: 1.6rem;
}
.tvstation-item {
  padding: 13px 2% 12px 2%;
}
.tvstation-item dl dt {
  width: 55px;
}
}


/*--life--*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 通常時は3列 */
  grid-template-rows: repeat(2, auto); /* 通常時は2行 */
  gap: 20px; /* グリッド間の間隔 */
  width: 95%;
  margin: auto;
  }

.grid-item {
  border: 1px solid #ccc; /* 枠線 */
  padding: 10px;
  height: 100%;
  }

.grid-item img {
  max-width: 100%; /* 画像がアイテムの幅を超えないようにする */
  height: auto;
}

.image-wrapper {
  width: 100%; /* .grid-item の幅いっぱいに広げる */
  height: 15rem; /* 画像を揃えたい高さの固定値 */
  overflow: hidden; /* コンテナからはみ出た画像を隠す */
  position: relative; /* imgを中央配置するための基準点 */
  margin-bottom: 10px; /* 画像とタイトルとの間隔 */
  display: flex; /* これもFlexboxにして、中のimgを中央に配置する */
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
}

.image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}


/* 必要に応じて、タイトルとカテゴリのスタイルを追加 */
.grid-item h3 {
  margin-top: 10px;
  font-size: 1.4rem;
  text-align: left; /* タイトルを左寄せ */
}

.grid-item p {
  font-size: 1.2rem;
  text-align: right; /* タイトルを右寄せ */
}


.more-button-container {
  text-align: center; /* ボタンを中央に配置 */
  margin-top: 20px; /* 上のコンテンツとの間隔 */
  margin-bottom: 20px; /* 下のコンテンツとの間隔（必要に応じて） */
}

.more-button {
  display: inline-block; /* ボタンをインラインブロック要素にする */
  padding: 5px 20px; /* パディング（余白） */
  text-decoration: none; /* 下線を削除 */
  color: #333;
  font-weight:bold;
  background: linear-gradient(to bottom, #fdfdfd, #cfcfcf); /* グラデーションの指定 */
  border: 1px #999 solid; /* 枠線 */
  border-radius: 5px; /* 角を丸くする */
  font-size: 1.4rem;
  cursor: pointer; /* カーソルをポインターにする */
  transition: background 0.3s ease; /* ホバー時のアニメーションを滑らかにする */
}

.more-button:hover {
  background: linear-gradient(to bottom, #fdfdfd, #cfcfcf); /* ホバー時のグラデーションを少し暗くする */
}


/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
.grid-container {
  grid-template-columns: repeat(2, 1fr); /* 2列にする */
  grid-template-rows: auto; /* 行数はコンテンツに合わせて自動調整 */
　}
}






/* スライダーの画像設定 */
.hero-section {
  position: relative;
  width: 100%;
  height: 800px; /* 高さはサイトに合わせて調整 */
  overflow: hidden;
  background-color: #fff;
}

/* スマホ設定（画面幅768px以下） */
@media screen and (max-width: 768px) {
  .hero-section {
    /* 画像の比率に合わせて高さを下げると、余白が減って綺麗に収まります */
    height: 300px; 
  }
}

/* スライダー層 */
.hero-slider-wrapper {
  width: 100%;
  height: 100%;
}

.fade-slider {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fade-slider li {
  position: absolute; /* 全ての画像を同じ位置に重ねる */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;         /* 最初は透明 */
  transition: opacity 2s ease-in-out; /* ★フェードのスピード（2秒） */
  z-index: 1;
}

/* 現在表示されている画像 */
.fade-slider li.active {
  opacity: 1;         /* 不透明にして表示 */
  z-index: 2;         /* 前面に持ってくる */
}

.fade-slider li img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 画像を枠いっぱいに綺麗に収める */
  /*filter: brightness(0.8); ロゴを目立たせるために背景を少し暗く */
}

/* ロゴ層（レイヤー） */
.hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;        /* 画像よりも高い数値を指定 */
  width: 60%;
  max-width: 500px;
  pointer-events: none;
}

.hero-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/*カウントダウン*/

.countdown-container {
  text-align: center;
  background: #52C3F1; /* 背景色 */
  color: #000;
  padding: 20px;
  margin:0;
  font-family: "Arial Black", sans-serif;
}

#countdown-timer {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 3rem;
}

.countdown-label {
	font-weight:bold;
	margin:0 0 10px 0;
}

.time-unit span {
  display: block;
  background: #fff; 
  padding: 10px;
  border-radius: 5px;
  min-width: 80px;
}

.time-unit small {
  font-size: 1rem;
  display: block;
  margin-top: 5px;
}