@charset "utf-8";

*, *:before, *:after {
box-sizing: border-box;
}

html {
height: 100%;
}

body {
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

img {
width:100%;
display:inline-block;
}

a:hover,
a:active{
text-decoration: none;
}

/*----------------------------------------------------*/
/*[ヘッダースライドショーの設定*/
/*----------------------------------------------------*/
header {
position: relative;
}

.page-title {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
z-index: 300;
margin: auto;
display: grid;
place-items: center;
}

.page-title img {
width: 70%;
max-width: 720px;
}

@media screen and (max-width: 786px) {
.page-title img {
width: 86%;
}
}

.slider {
width: 100vw;
height: 80vh;
overflow: hidden;
position: relative;
max-width: 100%;
}

@media (max-width: 768px) {
.slider {
width: 100vw;
height: 50vh;
max-width: 100%;
}
}

.slider div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: 10;
opacity: 0;
animation-name: slide-fade;
animation-duration: 15s; 
animation-iteration-count: infinite;
transform: scale(1.3); /* 最初に画像を大きくしておく */
}

@keyframes slide-fade {
0%{
opacity: 0;
}
5%{opacity: 1;}
33%{ opacity: 1;}

40%{
opacity: 0;
transform: scale(1); /* ここで画像サイズを1に戻す */
}
100%{
opacity: 0;
z-index: 0;
}
}
.slider div:first-of-type{
background-image: url(img/slide1.jpg);
}
.slider div:nth-of-type(2){
background-image: url(img/slide2.jpg);
animation-delay: 5s; /* 秒数を変更 */
}
.slider div:last-of-type{
background-image: url(img/slide3.jpg);
animation-delay: 10s; /* 秒数を変更 */
}


/*----------------------------------------------------*/
/*[main、sectionの設定*/
/*----------------------------------------------------*/

#main {
width: 100%;
margin: 1em auto 0;
padding: 30px 0 0 0;
}

@media (max-width: 480px) {
#main {
margin: 0 auto;
}
}

section {
margin: 0 auto;
padding: 20px 0;
}
@media (max-width: 768px) {
section {padding: 30px max(30px, 3vw);}
}


.hr-dots {
margin: 1rem 0;
text-align: center;
}

/* 番組概要
---------------------- */

.info{
max-width: 980px;
}

.info-in{
margin:0 0 2em 0;
padding:2em;
background: none;
border:1px dotted #ccc ;
position: relative;
}
.info-in:after{
background-image: linear-gradient(315deg, rgba(214, 255, 218, 1), rgba(255, 251, 198, 1) 60%);
border:none;
content: '';
position: absolute;
top: 7px;
left: 7px;
width: 100%;
height: 100%;
z-index: -1;
}

.info p{
margin:0 0 2em 0;
font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
}
.info p strong{
color:#d61d71;
}

.info p.info-b{
font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
font-weight:700;
margin:0 0 24px 0;
}
.info p.info-g{
color:#22a87b;
margin:0;
padding:0;
}

@media (max-width: 769px) {
.pc_on{display:none;}
}



.youtube-container {
	margin:2rem auto 1rem auto;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.youtube-container iframe {
	width: 100%;
	height: 100%;
}



/* 詳細 
---------------------- */


.about{
width: 100%;
margin: 4em 0;
box-sizing: border-box;

}
.point{
margin:0 auto;
padding:2em 0;
max-width: 1600px;
box-sizing: border-box;
}

.point.image{
max-width: 850px;
width: 56.25%;
}

.point .text h3 {
padding:0;
margin:0 0 20px 0;
font-size:clamp(1.375rem, 1.284rem + 0.45vw, 1.625rem);
line-height: 1.8;
color:#cc3362;
}
.point .text h3 span{
border-bottom: 1px solid #cc3362;
}
.point .text p {
font-size:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
line-height: 1.8;
}

@media (min-width: 768px) {
.point{display: -webkit-box;display: flex;}
.point01{flex-direction: row-reverse;}
.point02{flex-direction: row;}
.point01.image {
min-width: 600px;
width: 56.25%;
}

.point .text {
padding:1em 2em 0 2em;
text-align: left;
width: 400px;
}

}


/* お店情報 
---------------------- */
.shop {
margin:0;
padding:3rem 2rem;
background-color: #BDE9F4;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;

box-sizing: border-box;
}

.shop ul{
margin:0;
padding:0;
display:flex;
flex-wrap: wrap;
list-style:none;
box-sizing: border-box;
}
.shop li{
margin:10px .5%;
padding:15px;
width:32.333%;
box-sizing: border-box;
background:#fff;
box-shadow: 0 0 12px 4px rgba(0, 0, 0, .05);
border-radius: .69444vw;
display:flex;
flex-direction: column;
}


.shop h3{
margin:0;
padding:.5rem 0;
color:#a61c4a;
}

.shop p{
width:100%;
}

.col_txt{
margin: 0 auto .8em auto;
}

@media (max-width: 960px) {
.shop li{margin:10px 1%;width:48%;}
}
@media (max-width: 480px) {
.shop li{margin:10px 0;width:100%;border-radius:10px;}
}

/* リンクボタン */
.btn {margin:auto 0 0 0;
text-align: center;
}

.btn a{
display: inline-block;
padding: .5em 1.5em;
border-radius: .5em;
background: #00cccc;
color: #FFF;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
bottom: 10;
}

.btn a:hover {
background: #009999;
}



/* 出演者 
---------------------- */
.cast {
background-image: linear-gradient(135deg, rgba(255, 252, 158, 1), rgba(255, 224, 81, 1));
}

.cast h2{text-align: center;}
.cast h2 span{
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

.cast h2 span:before, .cast h2 span:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.cast h2 span:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
.cast h2 span:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

.cast-list {
margin: auto;
}

.castlist-wrap {
padding: .5rem 1em;
text-align: center;
}
@media (min-width: 768px) {
.cast-list {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
max-width: 700px;
}
.castlist-wrap {width: calc(100% /3);}
}

.cast-img {margin: auto;max-width: 240px;}
.cast-img img {margin: auto;border-radius: 2vh;}
.cast-name {
margin: 0;
padding: 0;
color: var(--main-color);
font-size: max(1.2rem, min(1.068rem + .91vw, 1rem));
font-weight: bold;
}
.cast-meta {
margin: .3em 0 0 0;
font-size: var(--14px);
line-height: 1;
}
.cast-desc {
margin: auto;
padding-left: 1em;
padding-right: 1em;
max-width: 16em;
font-size: var(--14px);
text-align: left;
}



/*----------------------------------------------------*/
/*[フッターの設定*/
/*----------------------------------------------------*/

footer {
text-align: center;
background-color: #b9f010;
padding:1rem 0 2rem 0;
margin:0 auto;
}

footer h3 span{
padding:.6rem 1rem;
background-color: #fff;
border-radius: 3vh;
}

footer p {
padding: 1rem 0;
}

footer ul.tvname {
max-width: 960px;
margin: 0 auto;
}

.copy{font-size:.725em;}

/*----------------------------------------------------*/
/*[フッターの放送局一覧]*/
/*----------------------------------------------------*/


ul.tvname {
list-style-type: none;
padding: 0 1rem;
}
  
ul.tvname  li {
display: inline;
margin:0 4px;
}

ul.tvname  li a{
color:#000;
text-decoration: none;
}

ul.tvname  li a:hover{
color:#fff;
text-decoration: underline;
}

/* フェードイン用のCSS */

/* 上からフェードイン */
.slide-top {
opacity: 0;
transform: translate(0, -30px);
transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
opacity: 0;
transform: translate(0, 30px);
transition: all 1s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
opacity: 0;
transform: translate(-30px, 0);
transition: all 1s ease-out;
 }

/* 右からフェードイン */
.slide-right {
opacity: 0;
transform: translate(30px, 0);
transition: all 1s ease-out;
 }