body{
margin: 0;
padding: 0;

}

html {
overflow: auto;
}

ul{
margin:0;
padding:0;
list-style:none;
}



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




/* レイアウト */

.container{
margin: 0 auto;
padding: 1rem 1.5rem;
box-sizing: border-box;
width:100%;
font-size: 1em;
}

.inner{
margin: 0 auto;
padding: 0;
max-width: 1000px;
box-sizing: border-box;
}


.inner h2{font-size : 2em;padding:0 1rem;}
.inner h3{font-size : 1.5em;padding:0 1rem;}

.inner h2:first-letter{
color:#cf0000;
 }


.inner p{
margin:0;
padding:.5rem 1rem;
}
.sm{
font-size : .85em;
font-weight:normal;
}

@media (max-width: 768px) {
.inner h2{font-size : 1.6em;}
.inner h3{font-size : 1.2em;}
}


/* パンクズ*/
#topicpath{
margin : 0;
padding : 0;
text-align: center;
background-color :#3A2C2C;
}
#topicpath p{
margin : 0 auto;
padding : 5px 1rem;
max-width :1000px;
font-size : .8rem;
line-height : 1.2rem;
text-align: left;
color:#fff;
}
#topicpath a{
color:#fff;
}





/*　header　*/

header{
margin:0;
padding: 1rem 1rem 2rem 1rem;
background: #fff url(img/main_bg_sp.jpg) no-repeat top center;
background-size:100% auto;
width: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
}


header .title{
margin:1rem auto 2.5rem auto;
padding: 0 1rem;
text-align: center;
max-width:980px;
}

header .title img{max-width:840px;}

header .header-inn{
padding: .5rem 0;
}

header h3{
color:#be0000;
text-shadow:0 0 5px #ffcf73;
padding: 0;
}


.gaiyou{
margin: 1em auto;
padding:2em 3em;
text-align: center;
max-width:800px;
background: rgba(255,255,255,0.85);
border-radius:15px;
}



@media (min-width: 769px) {
header{background: #fff url(img/main_bg.jpg) no-repeat top center;}
header .title{margin:1rem auto 4.5rem auto;}
.gaiyou figure{float:right;width: 38%;}
}


/* 再放送 */
.repeat{
background: #561d1d;
text-align: center;
}

.repeat h3{
margin: .5rem auto 1rem auto;
max-width:540px;
color:#fff;
text-align: left;
}

.repeat h3 span{
margin-right:1em;
padding:0 1rem;
border:1px solid #fff;
}


@media (min-width: 768px) {
.inner .repeat h3{font-size : 1em;}
.repeat .sp{display:none;}
}



/* Introduction */

.introduction {
margin: 0;
padding-bottom:1rem;
width: 100%;
overflow: hidden;
background-size: 12px 12px;
background-image: repeating-linear-gradient(45deg, #eee 0, #eee 1px, #fff 0, #fff 50%);
}

.introduction .inner{
margin: 2em auto;
padding: 1em 1em 2em 1em;
background-image: linear-gradient(0deg, rgba(253, 216, 191, 1), rgba(248, 243, 173, 1));
}


.introduction figure{
margin:0;
padding:.5rem 1rem;
font-size:0.75em;
text-align: center;
}

@media (min-width: 769px) {
.introduction figure{
float:right;
width: 38%;
}
}



/* Story */
.story{
margin: 1em auto;
padding: 1em 1em 2em 1em;
background: rgba(255,255,255,0.85);
border-radius:15px;
}


.story figure{
margin:0;
padding:.5rem 1rem;
font-size:0.75em;
text-align: center;
}

@media (min-width: 769px) {
.story figure{float:right;width: 38%;}
}




/*スクロール*/
.scroll{
margin:0;
padding: 0 0 1em 0;
}

@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}

.scroll__wrap {
  display: flex;
  overflow: hidden;
}
.scroll__list {
  display: flex;
  list-style: none;
  padding: 0;
}
.scroll__list--left {
  animation: infinity-scroll-left 50s infinite linear 0.5s both;
}
.scroll__item {
  width: calc(100vw / 3);
}
.scroll__item>img {
  width: 100%;
}

@media (max-width: 768px) {
.scroll__list--left {
  animation: infinity-scroll-left 25s infinite linear 0.5s both;
}
.scroll__item {
  width: calc(100vw / 1.5);
}
}


/* キャスト */

.cast {
padding-bottom: 3em;;
}

.cast ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
box-sizing: border-box;
}


.cast li {
box-sizing: border-box;
width:33.333%;
padding: 15px;
}

.cast figure{margin:0;}
.cast figure img{border-radius:50%;}

.cast p.cast-staff{
color:#C850C0;
padding:0 .5em;
}

.cast p.cast-name{
font-size:1.6em;
font-weight:700;
background: linear-gradient(90deg, #4158D0, #C850C0 30%, #FFCC70);
background: -webkit-linear-gradient(0deg, #4158D0, #C850C0 30%, #FFCC70);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


.cast hr{border:1px dashed #ddd;}

.pro {font-size:.8em;}

.cast-s-pc{padding:1em 0;text-align: center;}
.cast-s-pc p{text-align: center;font-size:1.15em;display:inline-block;}
.cast-s-pc p span{color:#733999;}

.cast-ss{padding:0 0 .5em 0;text-align: center;}
.cast-ss p{width:89px;padding:0;display:inline-block;text-align: center;}

.cast-mbc{padding:0 0 .5em 0;text-align: center;}
.cast-mbc p{width:115px;padding:0;display:inline-block;text-align: center;}


@media (max-width: 640px) {
.cast figure{margin:0 auto;width:80%;}
.cast li {width:100%;}
.cast-s-pc{display:none;}
.cast-s-sp{padding:1em 0;}
.cast-s-sp table{margin:0 auto;}
.cast-s-sp th{font-size:1.15em;font-weight:normal;color:#733999;text-align: right;}
.cast-s-sp td{font-size:1.15em;}
.cast-s-sp td.naka{text-align: center;padding:0 .5em;}
}
@media (min-width: 641px) {
.cast-s-sp{display:none;}
}


/* スタッフ */

.staff{
background: linear-gradient(-225deg, #caeff9 0%, #D6D6FC 56%, #FFDCE2 100%);
}

.staff li{
padding: 0 1em 1em 1em;
}

.staff-photo{width:40%;padding-bottom: .5em;}
.staff-profile p{padding: 0;}

.staff-name{
font-size: 1.35em;
color: #005b8e;
line-height: 1em;
margin: 0 0 0.2em;
font-weight:bold;
}

.staff-name span{
font-size: 80%;
color: #1090b2;
letter-spacing: 0.1vw;
font-weight:normal;
}

.staff dl {padding: 0.5rem 1rem;}
.staff dt {padding: 0.5rem 0;text-indent: 0;color: #1090b2;}
.staff dd {margin: 0;padding: 0.5rem 0;text-indent: 0;}


@media (min-width: 769px) {
.staff dl {display: flex;flex-wrap: wrap;}
.staff dt {width: 13em;}
.staff dd {width: calc(100% - 13em);}
.staff li{display:flex;}
.staff-photo{width:15%;}
.staff-profile{width:85%;}
.staff-profile p{padding: 0 1rem;}
}



/* スポンサー */


.sponsor h5 {
margin: 1rem 0;
padding: 12px;
font-size:1.2em;
border-bottom: 1px solid #ccc;
}

.sponsor ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
box-sizing: border-box;
}


.sponsor-b li {
box-sizing: border-box;
width:33.333%;
padding: 15px;
}

.sponsor-s li {
box-sizing: border-box;
width:20%;
padding: 15px;
}

.sponsor li img{
border: 1px solid #ccc;
}


@media (max-width: 768px) {
.sponsor-b li {width:50%;}
.sponsor-s li {width:33.333%;}
}



/* シェア */
.share {
	text-align: center;
}
.share-title {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: max(1.125rem, min(.989rem + .68vw, 1.5rem)); /* 18px〜24px */
	text-align: center;
}
.share-title::before,
.share-title::after {
	content: "";
	width: 3px;
	height: 2em;
	background-color: #ddd;
}
.share-title::before {
	margin-right: 1.5em;
	transform: rotate(-35deg);
}
.share-title::after {
	margin-left: 1.5em;
	transform: rotate(35deg);
}
.icon-sns {
	display: inline-block;
	margin: 0 .5em 0;
	width: 50px;
}





/* フェードイン用の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;
 }


/*footer*/
.footer{
margin: 0;
padding:3rem 0;
text-align: center;
justify-content: center;
background: #3A2C2C;
}
.copyright{
padding: .1rem;
font-size: .75rem;
color: #fff;
}