@charset "utf-8";

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

html {
height: 100%;
}

.rinken {
font-family: "Nunito Sans", "Zen Kaku Gothic New", sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

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

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

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


.sm{
font-size:.75em;
}


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

header h1{
position: absolute;
bottom:2.4em;
left: 0;
right: 0;
z-index: 300;
margin: auto;
display: grid;
place-items: center;
}

header h1 img {
width: 70%;
max-width: 760px;
}

header h2{
margin: 0;
padding: .35em 1em;
text-align: center;
background-image: linear-gradient(90deg, #FFAFCC, #f75d9d 30% 70%, #FFAFCC);
color:#fff;
text-shadow: 0px 0px 10px rgba(255, 0, 115, 1);
font-size:clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
}


.slider {
width: 100vw;
height: 75vh;
overflow: hidden;
position: relative;
max-width: 100%;
}
.slider div:first-of-type{
background-image: url(image/slide1.jpg);
}
.slider div:nth-of-type(2){
background-image: url(image/slide2.jpg);
animation-delay: 5s; /* 秒数を変更 */
}
.slider div:last-of-type{
background-image: url(image/slide3.jpg);
animation-delay: 10s; /* 秒数を変更 */
}


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

header h1 img {width: 86%;}

.slider div:first-of-type{
background-image: url(image/slide1s.jpg);
}
.slider div:nth-of-type(2){
background-image: url(image/slide2s.jpg);
animation-delay: 5s; /* 秒数を変更 */
}
.slider div:last-of-type{
background-image: url(image/slide3s.jpg);
animation-delay: 10s; /* 秒数を変更 */
}

}

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



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

#main {
width: 100%;
margin: 0 auto;
padding: 0;
}


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

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

.info{
background:#fff3f8;
padding: 2em;
position: relative;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 400;
font-style: normal;
}

.info::after {
  content: '';
  position: absolute;
  right: 0;
  left: -0%;
  top: 100%;
  z-index: 10;
  display: block;
  height: 20px;
  background-size: 20px 100%;
  background-image: linear-gradient(135deg, #fff3f8 25%, transparent 25%), linear-gradient(225deg, #fff3f8 25%, transparent 25%);
  background-position: 0 0;
}

/*.info h3{
margin:1em auto 0 auto;
padding: .5em 1em;
max-width: 1200px;
color:#fff;
font-size:clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
text-align: center;
background:#00c6f4;
border-radius: 2vh;
}
*/

.info h3 {
font-weight: bold;
width: fit-content;
margin: auto;
padding: 0.8em 1em;
margin-bottom: 0.3em;
text-align: center;
position: relative;
font-size:clamp(1.25rem, 0.833rem + 1.39vw, 1.875rem);
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;

}
.info h3::before, .info h3::after {
content: '';
background-image: linear-gradient(45deg, #9ca5ee 0%, #49ebdf 100%);
width: 50%;
height: 4px;
position: absolute;
}
.info h3::before {
top: 0;
left: 0;
}
.info h3::after {
bottom: 0;
right: 0;
}


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


.info p{
margin:2em auto;
max-width: 1100px;
font-size:clamp(1.125rem, 1.057rem + 0.34vw, 1.313rem);
}


.info-in{
margin:0 auto;
padding:0;
max-width: 1100px;
}

.item{
margin:.5em 0 1.5em 0;
padding: 1em;
position: relative;
border-radius: 2vh;
}

.item img{
vertical-align: bottom;
}

.item h4{
margin:0;
padding:.5em 1em;
position: absolute;
top:-10px;
left:0;
font-size:clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
border-radius: 1vh;
}

.item p{
margin:0;
padding:.5em 1.5em;
font-size:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
background:#fff;
}

.miyazaki{background-image: linear-gradient(358deg, #bbf57c, #f2ff98);}
.kagoshima{background-image: linear-gradient(358deg, #7cd2f5, #98f3ff);}

@media (min-width: 769px) {
.info-in{display: flex;
justify-content: space-between;
}
.item{
width:49%;
}
}


/* お店情報 
---------------------- */
.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:24%;
box-sizing: border-box;
background:#fff;
box-shadow: 0 0 12px 4px rgba(0, 0, 0, .05);
border-radius: .69444vw;
}


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


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


/* 出演者 
---------------------- */
.cast {
background-color: #FFC8DD;
position: relative;
}

.cast::after {
  content: '';
  position: absolute;
  right: 0;
  left: -0%;
  top: 100%;
  z-index: 10;
  display: block;
  height: 20px;
  background-size: 20px 100%;
  background-image: linear-gradient(135deg, #FFC8DD 25%, transparent 25%), linear-gradient(225deg, #FFC8DD 25%, transparent 25%);
  background-position: 0 0;
}


.cast h2{text-align: center;color: #753b53;}
.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 #753b53;
  border-top: solid 1px #753b53;
  border-bottom: solid 1px #753b53;
  left: 0;
}
.cast h2 span:after {
  content: '';
  border-top: solid 1px #753b53;
  border-right: solid 1px #753b53;
  border-bottom: solid 1px #753b53;
  right: 0;
}

.cast-list {
margin: auto;
}

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

@media (max-width: 768px) {
.castlist-wrap:first-child {
flex-grow: 1;
width: 100%; /* 明示的に100%にする */
}
.castlist-wrap {width: calc(100% /2);}

}

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



/*----------------------------------------------------*/
/*[放送局一覧]*/
/*----------------------------------------------------*/

.tvname {
text-align: center;
background-color: #BDE0FE;
padding:2rem 0;
margin:0 auto;
}

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

.tvname p {
padding: 1rem 0;
}

.tvname ul{
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
list-style-type: none;
}

.tvname  li {
display: inline;
margin:0 4px;
}

.tvname  li a{
color:#479ddd;
text-decoration: none;
}

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