@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Noto+Sans+JP:wght@400;700&display=swap');

@media print {
  .nocopy {
    display: none !important;}
}

body {
font-family:'Montserrat', 'Noto Sans JP',"Hiragino Sans", "Yu Gothic medium", "sans-serif";
  color: #333;
  font-size: 1rem;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-y: scroll;
  overflow-x: hidden;
}
@media screen and (max-width:992px) {
  body {
    font-size: 1.1em;
  }
}
/* ------------
* common 
 ------------ */
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
 color: #555;
  outline: none;
  text-decoration: none;
}
a:hover, a:active {
  text-decoration: none;
}
*:focus {
  outline: none;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;}


a:hover img {
  opacity: 0.7;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
}

.text-center {
  text-align: center;
  margin: 0 auto;
}
.text-left {
  text-align: left;
  margin: 0;
}
.text-right {
  text-align: right;
  margin: 0;
}
.pink {
  color: #f6738c;
}
.blue{
  color: #4e74a9;
}
.skyblue{
  color: #47ceff;
}

p {
  text-align: justify;
}
#wrapper {
 width: 100%; height: 100%;
    overflow: hidden;
    z-index: 4;
}


#particles-js {
    position: absolute; /*描画固定*/
    z-index: 5; /*描画を一番下に#wrapperはz-index: 4;*/
    width: 100%;
    height: 100%;
}



#main-area{
  width: 100%;background-image: url(../svg/bg-moyo2.svg);
    background-repeat: repeat;
    background-size:100%;
}

#drama #main-area{
  width: 100%;background-image: url(../svg/bg-moyo3.svg);
    background-repeat: repeat;
    background-size:100%;
}


/* ------------
 * font-family
 ------------ */


.header_logo {
  width: 100%;
  max-width: 300px;
  margin: 60px auto 0px;
  opacity: .8;
}
h2 {color: #fc5185;
  text-transform: uppercase;
  font-size: 2.2rem;
  letter-spacing: 0.2rem;
  margin: 0 auto;
    padding:60px 0 30px;
  text-align: center;
  max-width: 600px;
  line-height: 1.2;
  font-weight: 700;
}
h2 span {
  display: block;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 400;
}




/* ------------------------------------------------------------------- 
 * responsive:
 * h2
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
  h2 {
    margin: 20px auto;
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 900;
  }
}
/* ------------------------------------------------------------------- 
 * loading
 * ------------------------------------------------------------------- */
.fixed_bg {
	
  display: block;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition:10.5s;
}
.fixed_bg.active {
  opacity: 10.5;
}
.fixed_bg.active.normal {
  opacity: 10.5;
}
.fixed_bg video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top center;
}
.fixed_logo {
  position: fixed;
  top: 15%;
  left: 48%;
  z-index: 1;
  width: 60%;
  height: auto;
  margin: 0 auto;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}


@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.fixed_logo_img {
  width: 20px;
}
/* ------------------------------------------------------------------- 
 * loading
 * ------------------------------------------------------------------- */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  background-color: #f9d3e1;
}
.loading .loader {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  animation: dokundokun 3s ease infinite;
    
    /*animation: loader 1s infinite ease-in-out;*/
}
.loading .loader img {
  width: 32px;
  height: 32px;
}
@keyframes loader {
  0% {
    transform: rotate(360deg);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg);
    opacity: 0;
  }
}
/* ------------------------------------------------------------------- 
 * responsive:
 * loading
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
  .fixed_logo_img {
    width: 60px;
  }
}
/* ------------------------------------------------------------------- 
 * top 8d1e24

 * ------------------------------------------------------------------- */
#top {background-image: url("../img/blue.jpg");
  position: relative;
  width: 100%;
  overflow: hidden;
  /*opacity: 0;*/height:100%;
  transition: 3s; 
padding:0;  
}
#top.active {
  opacity: 1;
}
#top .bg_mc {
  width: 100%;
  margin: auto;
  text-align: center;animation: blurblur 3s linear 1;
}

#top .title {
  position: absolute;  margin: auto;
  text-align: center;
  width: 100%;height: 100%;
  top: -40px;
  right: 0;
  bottom: 0;
  left: 0;

}
#top .title img {
  animation: blurblur 3s linear 1;
}
#top .copy {
  position: absolute;
  left: 10%;
  width:9%;
  top: 4%;
}
#top .copy img {}
/* ------------------------------------------------------------------- 
 * responsive:
 * top
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
#top .bg_mc {
  width: 100%;max-width: 100%; 
}

  #top .copy {
    position: absolute;
    left: 8%;
    width: 23%;
    top: 63%;
  }
} /*end*/


@keyframes blurblur {
  0% {
filter: blur(30px);
  transform: scale(1.2);
  }
  66.6% {
  filter: blur(0);
  transform: scale(1);
  }
  100% {
  filter: blur(0);
  transform: scale(1);
  }
}
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes flicker-1 {
  0%, 100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}
/* ------------------------------------------------------------------- 
 * titles
 * ------------------------------------------------------------------- */
.titlelogo {
  width: 140px;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * titles
 * ------------------------------------------------------------------- */
@media screen and (max-width:1400px) {

} /*end*/



/* ------------------------------------------------------------------- 
 * .top-nav
 * ------------------------------------------------------------------- */
.top-nav {position: relative;z-index: 9;
  width: 100%;
  max-width: 100%;
  margin: auto;
  text-align: center;background-co: rgba(182, 202, 229, 1);
}
.top-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  margin: auto;
  text-align: center;
}
.top-nav ul li {
  width: 11%;
  margin: 4px;line-height: 1.1;
}
.top-nav ul li a:link,.top-nav ul li a:visited{text-transform: uppercase;font-weight: 700;
  display: block;
  padding: 6px;
  color: #f6738c;
  text-decoration: none;
  box-sizing: border-box;
  border: solid 3px #eccfe3;border-radius: 30px;
  transition: 1s;
    
background-color: #f5f5f5;;

}
.top-nav ul li a:hover{color: #f5f5f5;
  background-color: #e33059;
}
.top-nav span {
  display: block;
  font-size: 0.6rem;
}
/* ------------------------------------------------------------------- 
 * responsive:
 * .top-nav
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
.top-nav {
padding-top: 30px;
}
  .top-nav ul {
    font-size: 0.8rem;
    flex-wrap: wrap;
  }
  .top-nav ul li {
    display: block;
    width: 46%;
  }
  .top-nav ul li:last-child {
    width: 46%;
  }
} /*end*/



/* ------------------------------------------------------------------- 
 * topics
 * ------------------------------------------------------------------- */



.topics-box {background-image: rgba(182, 202, 229, 1);}


#topics {
  margin: 0 auto;
  padding: 0;  color: #f5f5f5;
background-image: linear-gradient(to bottom,  rgba(182, 202, 229, 1), rgba(241, 211, 227, 1), rgba(218, 206, 227, 1));

}

.topics-content {
  padding:0;
  width: 100%;
display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
}
.topics-L {
  width:15%;
}
.topics-R {z-index: 9;
  width: 82%;
  max-width: 680px;
}
.homenews{
  width: auto;
  margin: 60px auto 0;
  height: 150px;
  overflow: auto;
  padding: 0;
    background: #f5f5f5;border: 3px solid #f1d3e3;
}


ul.entry {display: block;text-align: left;
    padding: 5px 5px 0 10px;
    margin: 0;
 width: 96%;
    
}

ul.entry li{border-bottom: 1px solid #fff;padding: 5px 0;}

ul.entry li .entry-date {display: inline-block;min-width:95px;
    padding: 0;
    margin: 0 15px 0 0 ;
    color: #f6738c;
    text-align: left;
    line-height: 1.2;
}

ul.entry li a, ul.entry li a:visited {
    font-weight: 400;
    text-decoration: none;
 
}
ul.entry li a:hover, ul.entry li a:focus {
    text-decoration: none;
 
}




/*舞台用*/
.kokuchi-stage {
  padding: 15px 0 30px;
  margin: 40px auto 0;
  text-align: center;
  width: 100%;max-width: 640px;
}



.yura{
   animation: yurayura 3s infinite;
  opacity: 1;
}

@keyframes yurayura {
 0%, 80% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(2deg, 2deg);
  }
  10% {
    transform: skew(-1deg, -1deg);
  }
  15% {
    transform: skew(1deg, 1deg);
  }
  20% {
    transform: skew(0deg, 0deg);
  }

}
@media screen and (max-width:768px) {
.kokuchi-stage {
  padding: 15px 0 0;
  margin: 30px auto 0;
  text-align: center;
  width: 100%;max-width: 90%;
}

}/**/





.kokuchi-area {
  padding: 15px 0 30px;
 display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 30px auto 0;
  text-align: center;
  width: 100%;max-width: 940px;
}

.kokuchi-L {width: 49%;max-width:460px;
    margin: 0 auto;
    text-align: center;
  }



.kokuchi-R {
    width: 49%;max-width: 460px;
    margin: 0 auto;
    text-align: center;
  }


.kokcuhi-img {
  width: 90%;
  /*max-width: 350px;*/
}


.newsarea-kokuchi {
  width: 60%;
  max-width: 60%;
    margin: auto;
}


.trailer-content{
  padding: 15px 0 30px;
  margin: 30px auto 0;
  text-align: center;
  width: 100%; max-width: 880px;
}

.trailer-content img {
  width: 100%;
  max-width: 100%;
    margin: auto;
}

.youtube {
    width: 100%; /* 横幅変更 */
    padding: 0;
    box-sizing: border-box;
}
.youtube .inner {
    padding-top: 56.25%;
    position: relative;
    height: 0;
    overflow: hidden;
}
.youtube .inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.storylink{width: 100%;margin-top: 30px;
}

.storylink .storylink-img {
  width: 100%;
  max-width: 450px;
}

#trailer h3{color: #333;}

/* ------------------------------------------------------------------- 
 * responsive:
 * .trailer-content
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {

    .trailer-content {  padding: 0 0 30px;margin: 0 auto ;
        max-width: 90%;
    }
    
    .storylink{width: 90%;margin: 30px auto 0;text-align: center;
}
    
    .storylink .storylink-img {
  max-width: 90%;
}
    
} /*end*/


/* ------------------------------------------------------------------- 
 * responsive:
 * topics
 * ------------------------------------------------------------------- */
@media screen and (max-width:1240px) {
  #topics {
    width: 100%;
    max-width: 100%;
  }
  .topics-content {
    padding: 5px 0 60px;
    width: 100%;
    display: block;
    margin: 0 auto;
    text-align: center;
    max-width: 90%;
  }
  .topics-L {width: 100%;max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
      .topics-C {width: 100%;max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .topics-R {
    width: 100%;max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .homenews {
    margin: 15px auto 0;
    padding: 0;
    min-width: 80%;
    min-height: 200px;
  }
    
    
    ul.entry {font-size:0.8em;
    
}
    
    
.trailer-content img {
  width: 80%;
  max-width: 80%;
    margin: auto;
}

}/**/


@media screen and (max-width:992px) {
  #topics {
  min-height:auto;
  }    
   .topics-content {
    padding: 0;
    width: 100%;
    display: block;
    margin: 0 auto 60px;
    text-align: center;
    max-width: 90%;
  } 
    
    
  .kokuchi-area {
display: block;
    padding: 0 0 0;
    text-align: center;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
  }  

  
  .kokuchi-L {
    width: 100%;max-width: 70%;
    margin: 0 auto 30px;
    text-align: center; 
  }
    
.kokuchi-C {
    width: 100%;max-width: 70%;
    margin: 0 auto 30px;
    text-align: center; 
  }
  .kokuchi-R {
    width: 100%;max-width: 70%;
    margin: auto;
    text-align: center; 
  }
    
  .kokcuhi-img {
  width: 80%;
  max-width: 80%;
} 
    
.newsarea-kokuchi {
  width: 60%;
  max-width: 60%;
    margin: auto;
}
    
 ul.entry li .entry-date {display: block;
}
    
    
}/**/

@media screen and (max-width:768px) {
 #topics {
  min-height:550px;
  } 
    
   .kokuchi-L {
    width: 100%;max-width: 90%;
margin: 0 auto 40px;
  }
    
       .kokuchi-C {
    width: 100%;max-width: 90%;
margin: 0 auto 40px;
  }
  .kokuchi-R {
    width: 100%;max-width: 90%;

  }   

    
      .kokcuhi-img {
  width: 90%;
  max-width: 90%;
} 
  .newsarea-kokuchi {
  width: 80%;
  max-width: 80%;
    margin: auto;
}  
    
 }/**/




/* ------------------------------------------------------------------- 
 * intro
 * ------------------------------------------------------------------- */

.intro-before{ background-color: rgba(218, 206, 227, 1);
  border-bottom-left-radius: 1000px 200px;
  border-bottom-right-radius: 1000px 200px;
  height: 200px;margin-top: -1px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;width: 100%;
}



#intro {
margin: 60px 0;
width: 100%;
}
#intro .intro-content {

  width: 100%;
  max-width: 700px;
  margin: auto;text-align: center;
}

#intro  h3 span{
  text-align: center;letter-spacing: 0.1em;
  margin-bottom: 0.5em;background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,184,182,0.5) 70%);
}

#intro p span{font-weight: 600; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(255,255,153,0.5) 70%);}

/* ------------------------------------------------------------------- 
 * responsive:
 * 
 * ------------------------------------------------------------------- */

@media screen and (max-width: 992px) {
    
    
    .intro-before{ 
  height: 100px; 
}

    
    
#intro .intro-content {

  max-width: 90%;

}
    
    #intro  h3 {font-size: 1.1rem;
  text-align: center;letter-spacing: 0em;
  margin-bottom: 0.5em;
}

    
} /*end*/



    
.onair-before{ background-color: #ffe8ef;
  border-top-left-radius: 1000px 200px;
  border-top-right-radius: 1000px 200px;
  height: 200px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;width: 100%;
}



/* ------------------------------------------------------------------- 
 * onair
#onair {margin-top: 60px;padding-top: 60px;
width: 100%;
    background-color: #ffe8ef;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
 * ------------------------------------------------------------------- */


#onair {
width: 100%;margin-top: -60px;
    background-color: #ffe8ef;padding-bottom: 60px;
 
}



#onair .onair-content {

  width: 100%;
    max-width: 700px;
  margin: auto;text-align: center;
}

#onair h3 {font-size: 2rem;
  text-align: center;
  margin-bottom: 0.5em;
}



table.station{margin: auto;
  border-collapse: collapse;
  width:96%;
}
table.station th{text-align: center;
  padding:4px 8px;
     border-bottom: solid 1px #eccfe3;
  box-sizing:border-box;
}
table.station th span{text-align: center; font-size: 0.88rem;font-weight: 600;color: #f6738c;
  padding:5px 15px;background: #fff;border-radius: 15px ; border: solid 1px #eccfe3;
}



table.station td {text-align: left; font-size: 0.88rem;
  padding:4px 8px;
 border-bottom: solid 1px #eccfe3;
  box-sizing:border-box;
}
table.station td.first {font-size: 0.78rem;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * onair
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
    
        
.onair-before{
  height: 100px;
}

 #onair .onair-content {max-width: 100%;
}   

table.station {
    width: 70%;
  }

 table.station th span{
  /* padding:5px 90px; */
  width: 17em;
  display: inline-block;
  border-radius: 20px;
}   
table.station th,table.station td {  padding:2px 8px;
    display: block;
    width: 100%;text-align: center;
    border-bottom: none;
  }
  }/**/  
    
  
/* ------------------------------------------------------------------- 
 * themesong
 * ------------------------------------------------------------------- */


#themesong {padding: 60px 0 10px; 
width: 100%;
    background-color: #ffe8ef;

}
#themesong .themesong-content {

  width: 100%;
    max-width: 500px;
  margin: auto;text-align: center;
}



#themesong h3 {font-size: 2rem;line-height: 1.3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
#themesong h3 small {font-size: 1.2rem;}
#themesong h3::before {
  content: "";
  width: 50px;
  height: 1.5px;
  transform: rotate(60deg);
  box-sizing: border-box;
  background-color: #333333;
}
#themesong h3::after {
  content: "";
  width: 50px;
  height: 1.5px;
  transform: rotate(-60deg);
  box-sizing: border-box;
  background-color: #333333;
}


@media screen and (max-width:768px) {

#themesong h3 {font-size: 1.7rem;
}
 }  
    
.caststaff-before{ background-color: #ffe8ef;
  border-bottom-left-radius: 1000px 200px;
  border-bottom-right-radius: 1000px 200px;
  height: 200px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;width: 100%;
}

/* ------------------------------------------------------------------- 
 * caststaff
 * ------------------------------------------------------------------- */
#caststaff {
  padding: 60px 0;
  margin: 0 auto;
  text-align: center;
  background-color: rgba(141, 30, 36, 0);
}

#caststaff .caststaff-content {

  width: 100%;
  max-width: 700px;
  margin: auto;text-align: center;
}



#caststaff h3 {color: #f6738c;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1em;
	text-align: center;
}


#caststaff h3::before,
#caststaff h3::after {
	content: '';
	width: 70px;
	height: 1px;
	background-color: #f6738c;
}

#caststaff h3::before {
	margin-right: 20px;
}
#caststaff h3::after {
	margin-left: 20px;
}


.caststaff-contet span,.section_staff span{font-weight: 600; background-image: linear-gradient(rgba(0,0,0,0) 80%, rgb(255,255,153,0.5) 80%);}


.staff-credit {
  margin: 0 auto;
  text-align: center;
}
/* 通常時 */
.effect-flash {
  border: 1px solid rgba(255, 255, 255, 0%); /* 境界線 */
  filter: brightness(1.0);
  transition: filter 1s, border-color 1s; /* イージングをおとなしくかける */
}
/* ホバー時 */
.effect-flash:hover {
  border: 1px solid rgba(255, 255, 255, 100%); /* 境界線 */
  transition: border-color 0.2s;
  animation: bright-flash 0.2s linear forwards; /* CSS Animationで演出。最後の状態を維持 */
}
@keyframes bright-flash {
  0% {
    /* いきなり明るい状態から始めることでユーザー操作の反応の良さを示す */
    filter: brightness(2.5);
  }
  100% {
    filter: brightness(1.25);
  }
}

/* ------------------------------------------------------------------- 
 * responsive:
 *caststaff
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
    
    .caststaff-before{
  height: 100px;
}

    
  #caststaff {
    padding: 60px 0 0;
    margin: 0 auto;
    text-align: center;
  }
  #caststaff .section_inner .charactor1 {
    width: 66%;
    margin: 1rem auto 0;
  }
  #caststaff .section_inner .charactor_space, #caststaff .section_inner .charactor3_space {
    display: none;
  }
.cast-credit {
  max-width: 150px;
  margin: 0 auto;
  text-align: center;
}

    #caststaff h3 {color: #f6738c;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.9em;
	text-align: center;
}


#caststaff h3::before,
#caststaff h3::after {
	content: '';
	width:30px;
	height: 1px;
	background-color: #f6738c;
}

#caststaff h3::before {
	margin-right: 5px;
}
#caststaff h3::after {
	margin-left: 5px;
}
    
    
} /*end*/


   
/*==================================================
矢印ボタンキャスト
===================================*/
.button-arrow {
  display: inline-block;
  width: 75%;
  padding: 0px 40px 0px 10px;
  text-align: center;
  color: #aaa;
  margin: 8px 0 0 0;
  border: 1px solid #aaa;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.button-arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 5px);
  right: 10px;
  width: 20px;
  height: 5px;
  border: none;
  border-right: 2px solid #ccc;
  border-bottom: 1px solid #ccc;
  transform: skew(45deg);
  transition: .3s;
}
.button-arrow:hover {
  background: #000;
}
.button-arrow:hover::after {
  right: 5px;
  width: 30px;
}
/*==================================================
モアニュース
===================================*/


.buttonmore-area {
  text-align: right;
}


.button-more {font-size: 0.9rem;
  font-weight: 700;
  display: inline-block;
  width: 160px;
  padding: 5px 30px 5px 20px;
  text-align: center;
  color: #fc7e96;border:1px solid #eee;border-radius: 20px;
  margin: 1rem 0;
 /*background: #f5f5f5f5;*/
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.button-more::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 5px);
  right: 20px;
  width: 20px;
  height: 5px;
  border: none;
  border-right: 2px solid  #fc7e96;
  border-bottom: 1px solid  #fc7e96;
  transform: skew(45deg);
  transition: .3s;
}
.button-more:hover {
  background: #ffffcc;
  color: #fc7e96;
}
.button-more:hover::after {
  right: 10px;
  width: 30px;
  border-right: 2px solid #fc7e96;
  border-bottom: 1px solid #fc7e96;
}

/* ------------------------------------------------------------------- 
 * button-othermedia
 * ------------------------------------------------------------------- */

.button-othermedia {font-size: 1rem;line-height: 1.4;
  font-weight: 700;
  display: inline-block;
  width: 220px;
  padding: 8px 30px 8px 20px;
  text-align: center;
   background: #fff;
  color: #fc7e96;border: solid 3px #eccfe3;border-radius: 30px;
  margin: 1rem 0 0;
 /*background: #f5f5f5f5;*/
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.button-othermedia::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 5px);
  right: 20px;
  width: 20px;
  height: 5px;
  border: none;
  border-right: 2px solid  #fc7e96;
  border-bottom: 1px solid  #fc7e96;
  transform: skew(45deg);
  transition: .3s;
}
.button-othermedia:hover {
  background: #ffffcc;
  color: #fc7e96;
}
.button-othermedia:hover::after {
  right: 10px;
  width: 30px;
  border-right: 2px solid #fc7e96;
  border-bottom: 1px solid #fc7e96;
}

@media screen and (max-width: 992px) {
.button-othermedia {font-size: 1.1rem;
}
} /*end*/
/* ------------------------------------------------------------------- 
 * overlay banner
 * ------------------------------------------------------------------- */
.foot-kokuchi img {
  width:180px;
  height: 180px;
}
.foot-kokuchi-img {
  width: 100%;
}
.foot-adjust {
  padding-left: 30px;
}
.fix-pc {
  position: fixed;
  animation-name: fadey_bottom_start;
  animation-duration: 9s;
  z-index: 998;
  left:0px;
  bottom: 0px;
}
.fix-pc-wrap {
  margin: 0;
  line-height: 1;
}
.fix-pc-wrap a {
  display: flex; justify-content: center;
  position: relative;
  min-width: 160px;
  transition: 0.3s;
}
.fix-pc-wrap a:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  transition: transform 0.6s;
  transform: rotate(360deg);
}
/* ------------------------------------------------------------------- 
 * responsive:
 * overlay banner
 * ------------------------------------------------------------------- */
@media screen and (max-width:1024px) {
  .foot-kokuchi img {
    width: 90px;
    height: 99px;
  }
  .foot-kokuchi-img {
    width: 90px;
  }
  .foot-adjust {
    padding-left: 0px;
  }
  .fix-sp {
    width: 100%;
    max-width: 100px;
    position: fixed;
    animation-name: fadey_bottom_start;
    animation-duration: 9s;
    z-index: 998;
    left: 0;
    bottom: 0;
  }
  .fix-sp-wrap {
    margin: 0;
    line-height: 1;
  }
  .fix-sp-wrap a {
    display: flex; justify-content: center;

    position: relative;
    min-width: 90px;
    transition: 0.3s;
  }
  .fix-sp-wrap a:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  transition: transform 0.6s;
  transform: rotate(360deg);
  }
} /*end*/
@keyframes fadey_bottom_start {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*-------------------------------------------------------------------*/
.mt-1, .pt-1 {
  padding-top: 0.5em;
}
.mt-2, .pt-2 {
  padding-top: 1em;
}
.mt-3, .pt-3 {
  padding-top: 1.5em;
}
.mt-4, .pt-4 {
  padding-top: 2em;
}
.mt-5, .pt-5 {
  padding-top: 2.5em;
}
.mb-1, .pb-1 {
  padding-bottom: 0.5em;
}
.mb-2, .pb-2 {
  padding-bottom: 1em;
}
.mb-3, .pb-3 {
  padding-bottom: 1.5em;
}
.mb-4, .pb-4 {
  padding-bottom: 2em;
}
.mb-5, .pb-5 {
  padding-bottom: 2.5em;
}
/* ------------------------------------------------------------------- 
 * e.t.c
/*-------------------------------------------------------------------*/
.pc {
  display: block !important;
}
.sp {
  display: none !important;
}
/* ------------------------------------------------------------------- 
 * responsive:
 *  e.t.c
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
} /*end*/
/*===========================================================*/
/*ナビ
/*===========================================================*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
  position: fixed;
  z-index: -1;
  opacity: 0; /*はじめは透過0*/
  /*ナビの位置と形状*/
  top: 0;
  width: 100%;
  height: 100vh; /*ナビの高さ*/
  background-color:#f37a9d;
  background-size: cover;
  /*動き*/
  transition: all 0.3s;
}
/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive {
  opacity: 1;
  z-index: 999;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh; /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
  display: none;
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#g-nav.panelactive ul {
  display: block;
}
.nav-fix {
  position: fixed;
  top: 0;
  z-index: 999;
  padding: 15px;
  transition: 0.2s;
  opacity: 0;
}
.nav-fix h1 {
  width: 90px;
  margin-top: 0;
  margin-left: 5px
}
.nav-fix .copyright {
  color: #999;
  width: 20px;
  position: fixed;
  display: table-cell;
  writing-mode: vertical-rl;
  font-size: 0.5em;
  height: 400px;
  top: 35%;
  letter-spacing: 0.1em;
  left: 0;
  margin: 15px 0 0 20px;
}

#freepage .copyright {color: #ccc;
    margin: 0 auto;
    text-align: center;
    font-size: 0.7em;
}

#freepage .noise {
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 300px;
  background-color: rgba(0, 0, 0, 0.8);

  overflow: hidden;
}




@media screen and (max-width: 1200px) {
  .nav-fix {
    display: none;
  }
    

    
} /*end*/


#g-nav-list {
  display: none;
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list {
  display: block;
}
/*ナビゲーション*/
#g-nav ul {
  opacity: 0;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#g-nav.panelactive ul {
  opacity: 1;
  flex-wrap: wrap;
}
#g-nav.panelactive li {
  text-align: center;
  width: 100%;
}
#g-nav.panelactive li a {
  padding: 10px 0;
  color: #fff;
}
.tw-img {
  width: 28px;
}
.tt-img {
  width: 25px;
}
.in-img {
  width: 28px;
}
.yt-img {
  width: 28px;
}
.li-img {
  width: 30px;
}
/*===========================================================*/
/*左から右に線
/*===========================================================*/
@media screen and (min-width: 1200px) { /* 1200px以上の場合に適用 */
  .gnavi {
    width: 100%;
    max-width: 500px;
  }
} /*end*/
@media screen and (max-width: 992px) {
  #g-nav {}
  .gnavi {
    width: 100%;
    max-width: 90%;
  }
}
.gnavi {
  display: flex;
  justify-content: flex-start;
  list-style: none;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 500;
  /*background-color:rgba(0,0,0,0.9);*/
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}
.gnavi a, .gnavi a:visited {
  display: block;
  padding: 10px 5px;
  color: #fffefb;
  /*background-color:rgba(255,39,98,1);*/
  /*background-color:rgba(0,0,0,1);*/
  text-decoration: none;
}
.gnavi {
  line-height: 1.2;
}
.gnavi span {
  display: block;
  font-size: 0.6rem;
}
.nav01d li a {
  /*線の基点とするためrelativeを指定*/
  position: relative;
}
.nav01d li.current a, .nav01d li a:hover {
  color: rgba(255, 255, 255, 1);
}
.nav01d li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 8px;
  left: 40%;
  /*線の形状*/
  width: 20%;
  height: 2px;
  background: rgba(255, 255, 255, 1);
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1); /*X方向0、Y方向1*/
  transform-origin: left top; /*左上基点*/
}
/*現在地の形状の設定*/
.nav01d li.current a::after {
  transform: scale(0.2, 1); /*X方向に0.2スケール拡大*/
}
/*現在地を含むhoverの設定*/
.nav01d li.current a:hover::after, .nav01d li a:hover::after {
  transform: scale(1, 1); /*X方向にスケール拡大*/
}
/*===================================
/* 順番に現れる（CSS）
===================================*/
.nav01d li:nth-of-type(1) {
  animation-delay: .2s;
}
.nav01d li:nth-of-type(2) {
  animation-delay: .4s;
}
.nav01d li:nth-of-type(3) {
  animation-delay: .4s;
}
.nav01d li:nth-of-type(4) {
  animation-delay: .6s;
}
.nav01d li:nth-of-type(5) {
  animation-delay: .6s;
}
.nav01d li:nth-of-type(6) {
  animation-delay: .8s;
}
.nav01d li:nth-of-type(7) {
  animation-delay: .8s;
}
.nav01d li:nth-of-type(8) {
  animation-delay: 1s;
}
/*FOLLOW*/
.nav01d li:nth-of-type(9) {
  animation-delay: 1s;
}
.nav01d li:nth-of-type(10) {
  animation-delay: 1s;
}
.nav01d li:nth-of-type(11) {
  animation-delay: 1s;
}
.nav01d li:nth-of-type(12) {
  animation-delay: 1s;
}
/*===================================
×
===================================*/
/*ボタン外側*/
.openbtn {
  position: fixed;
  display: block;
  top: 15px;
  right: 15px;
  z-index: 9999; /*ボタンを最前面に*/
  cursor: pointer;
  width: 60px;
  height:  60px;
  background: #ed7b90;border-radius: 50%;
}
/*ボタン内側*/
.openbtn span {
  display: inline-block;
  transition: all .4s; /*アニメーションの設定*/
  position: absolute;
  left: 10px;
  height: 2px;
  background: #fff;
}
.openbtn span:nth-of-type(1) {
  top: 20px;
  width: 70%;
}
.openbtn span:nth-of-type(2) {
  top: 27px;
  width: 70%;
  /*background: #666;*/
}
.openbtn span:nth-of-type(3) {
  top: 35px;
  width: 70%;
}
/*activeクラスが付与されると線が回転して×になる*/
.openbtn.active span:nth-of-type(1) {
  top: 21px;
  left: 10px;
  transform: translateY(6px) rotate(-135deg);
  width: 70%;
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
  top: 33px;
  left: 10px;
  transform: translateY(-6px) rotate(135deg);
  width: 70%;
}


.tiktok-area blockquote{background-color: rgba(255,255,255,0.95);
    border:8px solid #d1cde4;border-radius: 30px;}


footer .footer {   background-image: linear-gradient(90deg, rgba(182, 202, 229, 1), rgba(241, 211, 227, 1) 50%, rgba(218, 206, 227, 1));
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  height: 300px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  overflow: hidden;
  padding: 60px;
  position: relative;
}
footer .footer .footer_logo {
  max-width: 360px;
  width: 25%;
  margin: 60px auto 20px;
  opacity: .8;
}
footer div.follow {
    display: flex;
    align-items: stretch;
    text-align: center;
    margin: auto;
    width: 300px;
    padding: 10px 0;
}

footer div.follow li{
   text-align: center;
    margin: auto; 
}


footer div.follow img {
    width: 50px;
    height: 50px;

}



@media screen and (max-width: 992px) {
  .openbtn {
    top: 15px;
    right: 15px;
  }
  footer .footer {
    padding: 60px 20px;
  }


  footer .footer {
    padding-bottom: 120px;
  }
  footer .footer .footer_logo {
    width: 50%;
  }
  footer .copyright {
    color: #fff;
    margin: 0 auto;
    text-align: center;
    font-size: 0.7em;
  }

} /*end*/
.fadeIn {
  opacity: 0;
  transition: 1s;
  transform: translateY(0px);
}
.fadeIn.is-inview {
  transform: translateY(0);
  opacity: 1;
}
.fadeInUp {
  opacity: 0;
  transition: 1s;
  transform: translateY(20px);
}
.fadeInUp.is-inview {
  transform: translateY(0);
  opacity: 1;
}

.blurUp {
  opacity: 0;
  transition: 1s;
filter: blur(30px);
  transform: scale(1.2);
}

.blurUp.is-inview {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.blurUpLeft {
  opacity: 0;
  transition: 1s;
  filter: blur(50px);
  clip-path: inset(5%);
}
@media screen and (max-width: 992px) {
  .blurUpLeft {
    clip-path: inset(5%);
  }
}
.blurUpLeft.is-inview {
  opacity: 1;
  clip-path: inset(0%);
  filter: blur(0);
  transform: scale(1);
}
.clipDown {
  opacity: 0;
  transition: 2s;
  clip-path: inset(0% 0% 100% 0);
}
.clipDown.is-inview {
  clip-path: inset(0%);
  opacity: 1;
}

/* ------------------------------------------------------------------- 
 * news
/*-------------------------------------------------------------------*/
#news {padding: 60px 0;
  margin: 0 auto;
  text-align: center; 
width: 100%;
}

#news h2.contents-title {color: #333;  background-image: none;}

#news article{padding: 30px ;
  margin: 0 auto;
  text-align: center; 
   width: 100%; 
  max-width: 740px;
    background-color:rgba(255,253,253,0.8);
}

#news article .entry-content{padding:0;
  margin: 0 auto;
  text-align: center; 
width: 90%;
}

#news article h2.entry-title {text-align: left;margin: 0 ;width: 100%;max-width:100%;
     background-image: url(../svg/fireB.svg);
  background-size:30px;
  background-repeat: no-repeat;
    background-position:1% 35%;text-transform: capitalize;
}

#news article h2.entry-title span{color: #333;font-size: 1.5rem;font-weight: 700;background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(236, 207, 227,0.9) 70%);line-height: 1.4;}


#news article .entry-date{font-size: 0.9rem;margin: 0;text-align: left;padding:0 0 15px 15px;}
#news article p.entry-text{margin: 0;text-align: justify;padding:15px 0; line-height: 1.85;}
.entry-text strong.kakomi{font-size: 1.1rem;background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(71,206,255,0.5) 70%);}

#news article p a,#news article p a:visited {
 color: #555;
  text-decoration: underline; padding: 0 5px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(255, 158, 19) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
#news article p a:hover, #news article p a:active {
  text-decoration: none;background-position: -100% 0;
  color: #fff;
}


#news article .col_2{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#news article .col_2 > *{
    width: calc( 50% - 6px ) ;
    margin-right: 12px;
    margin-bottom: 12px;
}
#news article .col_2 > *:nth-child(2n){
    margin-right: auto;
}
#news article .col_2 > * > *{
    position: relative;
    overflow: hidden
}
.goodstorelink{margin:0 auto;text-align: center;}
.goodstorelink img{width:70%;
  max-width:70%;

}





table.bluraytable{
  border-collapse: collapse;
  width: 100%;
}
table.bluraytable th{font-size: 1rem;vertical-align: top;text-align: center;
  padding: 10px;
  border: solid 1px #ccc;
  box-sizing:border-box;
}
table.bluraytable td {font-size: 1rem;vertical-align: top;text-align: left;
  padding:6px 10px;
  border: solid 1px #ccc;
  box-sizing:border-box;
}

table.bluraytable th.blukomoku{background-color:#fce6ec;}

.bluoder-midashi img{margin: 1rem 0 ;width:50%;
  max-width:50%;

}
.bluoder-content2{ width:38%;height:auto;margin: auto;

  }
.bluoder-content{ width:100%;height:auto;
  display:flex;
  flex-wrap:wrap;/* これを指定する */
  justify-content:space-between;
  }
.bluoder-box {
  width:calc(96%/3);/* 横幅を3等分 */
  height:auto;
  display:flex;/* 高さを揃えるための指定 */
  flex-direction:column;/* 高さを揃えるための指定 */

  box-sizing:border-box;/* 装飾用 */
    padding: 10px;
}
@media screen and (max-width: 768px) {
table.bluraytable {
    width: 100%;
  }
table.bluraytable th,
table.bluraytable td {
    display: block;
    width: 100%;text-align: center;
    border-bottom: none;
  }
table.bluraytable tr:last-child{border-bottom: solid 1px #ccc;  }
    
 .bluoder-content2{ width:50%;

  }   
    .bluoder-midashi img{ width:70%;
  max-width:70%;

}
  
    
    .bluoder-box {
  width:calc(96%/2);/* 横幅を2等分 */
    padding: 0 ;margin-top:50px;line-height: 1.2;
}
    
    
}/**/



/* ------------------------------------------------------------------- 
 * responsive:
 * news
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {

    
#news h2.contents-title {
  margin: 0 auto;
    padding:60px 0 0;
}
    
    
#news article{padding: 30px 0;
  max-width: 100%;

}

#news article h2.entry-title span{font-size: 1.3rem;text-align: left;margin: auto;width: 100%;max-width:90%; background-position:1% 24%}
#news article p.entry-text{padding:5px 0;font-size: 1rem;}   
 
    
       #news article  .col_2 > *{
        width: 100%;
        margin-right: auto;
    }
    
    table.goodstable{font-size: 1rem;} 
    
    .goodstorelink img{width:100%;
  max-width:96%;

}

} /*end*/


/* ------------------------------------------------------------------- 
 * button-blu
 * ------------------------------------------------------------------- */
.bluoder-box a:link,.bluoder-box a:visited{text-decoration: none;text-align: center; }
.bluoder-box a.button-blu {font-size: 0.9rem;
  display:inline-block;height: 40px;font-weight: 600;
  width: 100%;
    line-height: 40px;vertical-align: middle;  
  text-align: center;
   background: #ef8da9;
  color:#fff ;border: solid 3px #fce6ec;border-radius: 30px;
  margin: 0.5rem 0 0;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.bluoder-box a.button-blu:hover {
  background: #fcc9c8;
  color: #fff;transition: 0.3s;border: solid 3px #fcc9c8;
}


/* ------------------------------------------------------------------- 
 * drama
 * ------------------------------------------------------------------- */
/*.drama-page{ background-image: linear-gradient(90deg, rgba(182, 202, 229, 1), rgba(241, 211, 227, 1) 50%, rgba(218, 206, 227, 1));}*/
.drama-page{ background-color: #f3c679;
background-image: linear-gradient(222deg, #f3c679 0%, #f4d0d0 54%);

}




/* ------------------------------------------------------------------- 
 * story
 * ------------------------------------------------------------------- */
#story{width: 100%;max-width: 100%;margin: auto;padding: 0; text-align: center;}

.story-trailer{
  padding: 0;
  margin: 0 auto 0;
  text-align: center;
  width: 100%; max-width: 880px;
}


.story-trailer-content {
margin: auto;
    width: 90%;
   
}


.story-content{width: 100%; max-width: 880px;margin: auto ;padding: 0 0 60px; text-align: center;background: #fff;background-color: rgba(255,255,255,0.95);
    border:8px solid #d1cde4;border-radius: 30px;}



.story-content h3 {max-width: 80%; color: #fc5185;-webkit-text-stroke: -1px #F8F8F8;
	text-shadow: 0px 1px 1px #fff;
  text-transform: uppercase;
  font-size: 1.8rem;
  letter-spacing: 0.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
    margin: 0 auto;
}

.story-content h3::before,
.story-content h3::after {
	content: '';
	width: 40%;
	height: 3px;
	background-color:#fc5185;
}

.story-content h3::before {
	margin-right: 20px;
}
.story-content h3::after {
	margin-left: 20px;
}

.airdate{max-width: 80%;color:#fc5185;-webkit-text-stroke: -1px #F8F8F8;
	text-shadow: 0px 1px 1px #fff;
  font-size:3rem;font-weight:700;
  line-height: 2;
  letter-spacing: 0;margin:30px auto 0;
}

.airdate span{color:#fcb8b6;font-size:2rem;}


.airdate img{
  width: 30px;margin:0;vertical-align: middle;
    animation: guru 5s ease infinite;margin-left: 10px;
}
@keyframes guru {
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes yura {
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

.story-content h4{
	position: relative;
	font-size: 2.2rem;
	text-align: center;
    margin-bottom: 15px;
}
.story-content h4 span{color: #fcb8b6;font-weight: 400;
}

.story-content h4::before {
	content: attr(data-number);
	display: block;
	margin-bottom: 20px;
	color: #fc5185;
	font-size: 2rem;
}

.story-content h4::after {
	content: '';
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 20px;
	background-color: #fc5185;
}

.story-content p {max-width: 88%;margin: auto;padding: 10px 0;font-size: 1rem;}

.img-scene{width: 100%;max-width: 100%;}
.img-scene-s{width:100%;max-width: 200px;}

.story-archive{width: 100%;}

.s-midashi{border-radius:15px;color:#fff;background: #fc5185;padding:0rem 0.8rem;margin-right: 10px;font-size: 0.85rem;}


.img-scene-area {
  display: flex;
  flex-wrap: wrap; 
max-width:90%; margin: auto;
 
}
.img-scene-area div:first-child {display: inline-block;
    width: 100%; 
    height: auto;margin-bottom: 1%; 
}

.img-scene-area div{
    width: 49.5%; 
    height: auto;margin-bottom: 1%;
}

.img-scene-area div:nth-child(even){
    width: 49.5%;margin-right: 1%; 
    height: auto;
}


#backnumber{width: 100%;}


#backnumber img{background-color: rgba(255,255,255,0.95);
    border:8px solid #d1cde4;border-radius: 30px;
    
}
.backnumber-content{padding:0;
  width: 100%;max-width: 1000px;
  margin: 0 auto;
  text-align: center;}

.backnumber-content ul{display: flex;  flex-wrap: wrap;
   justify-content: center;max-width: 1000px;}

ul.backnumberlist li{
 width:19%;
 padding: 1%;
 text-align: center;
 font-weight: 700;
}

  .story-content h4 span.tsume{color: #333;font-weight: 700;
}  


/* ------------------------------------------------------------------- 
 * responsive:
 * story
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
    
.story-content{width: 100%;max-width: 96%;padding: 0 0 30px; }
    
    .airdate{max-width: 96%;
  font-size:1.95rem;
}

.airdate span{color:#fcb8b6;font-size:1.1rem;}
    
    
.story-content h4{
	font-size: 1.7rem;
}
  .story-content h4::before {
	font-size: 1.5rem;
}
    
    .story-content h4::after {
	top: 40px;
}
    
  .story-content h4 span.tsume{font-size: 1.4rem;color: #333;letter-spacing: -0.09em;font-weight: 700;
}  
.img-scene{}
.img-scene-area {display: block;
 
}

.img-scene-area div{
    width: 100%; 
    height: auto;margin-bottom: 1%; 
}

.img-scene-area div:last-child,.img-scene-area div:nth-child(even){
    width: 100%; margin-left: 0; 
    height: auto;
}

    
    
 .backnumber-content{max-width: 100%; }  
    
    
    
}/**/




/* ------------------------------------------------------------------- 
 * episode
 * ------------------------------------------------------------------- */

#episode{width: 100%;max-width: 100%;margin: auto;padding: 0; }


.episode-content{   padding:0;
  width: 100%;
display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
}

.ep{width: 100%;max-width: 30%;padding: 0 1%;
}


.ep-no{font-size: 2rem;font-weight: 700;position: relative;z-index: 9;
    color: #fff;
    background-image: url(../story/svg/ep-titlebg.svg);
    background-repeat: no-repeat;
    background-position: center center; 
  text-align: center;
  width: 100px;margin: 0 auto;
    animation: dokundokun 3s ease infinite;
}



.ep-title{margin:-15px 0 40px;font-weight: 700;line-height: 1.3;
font-size: 1.6rem;min-height: 120px;padding-top: 30px;
    color: #f6738c;text-align: center;background-color: rgba(255,255,255,0.95);
    border:8px solid #d1cde4;border-radius: 30px;
    
}

.ep-title .rub-area{margin:-5px 0 0;}


.ep-subtitle{margin:5px 0;font-weight: 400;
font-size:0.9rem;
    color: #666;text-align: center;
}

.ep-cast{margin:15px 0 0;font-weight: 400;
font-size:1.1rem;
    color: #666;text-align: center;
}
.rolename{color: #f6738c;font-size:0.9rem;}

@keyframes dokundokun {
  0%  { transform: scale(1); }
  15% { transform: scale(1.1); }
  30% { transform: scale(1); }
  45% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

/* ------------------------------------------------------------------- 
 * responsive:
 * episode
 * ------------------------------------------------------------------- */
@media screen and (max-width:1590px) {
    
.episode-content{ 
display: block;
}

.ep{width: 100%;max-width: 600px;padding: 0 0.5%;margin: auto;
}


    
}/**/




@media screen and (max-width:992px) {
    
    #episode{width: 100%;max-width: 90%;}

.ep{width: 100%;max-width: 80%;padding: 0 0.5%;margin: auto;
}
 

    
  .ep-title{padding: 30px 0 ;
    
}
 
    
    
}/**/

@media screen and (max-width:450px) {
  
 .ep{width: 100%;max-width: 100%;padding: 0 0.5%;margin: auto;
}
       
.ep-title{
font-size: 1.3rem;
    
}
    
    
}/**/




/* ------------------------------------------------------------------- 
 * comment
/*-------------------------------------------------------------------*/
#comment {padding: 0;
  margin: 0 auto;
  text-align: center; 
width: 100%;
}

.comment {padding: 0 0 30px 0;
  margin: 0 auto;
  text-align: center; 
width: 100%;
}

.comment strong.kakomi{font-size: 1.1rem;background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,184,182,0.5) 70%);}



.comment-content {border-radius: 30px;
    border:8px solid #d1cde4;
  width: 100%;
  padding:25px 40px 15px;  max-width: 740px;
    background-color:rgba(255,253,253,0.9);
  margin: 0 auto 10px;
  text-align: center;
     
}



.comment-L {font-size: 1.1rem;line-height: 1.2;
  width: 100%;
  padding: 0;
    margin:0 auto;text-align: center;
}
.comment-L img{width: 300px;}
.comment-L small.phname {font-size: 0.77rem;color: #999;}


.comment-R {font-size: 1rem;
  width: 100%;
  padding:0;
    text-align:justify;
}

.comment-R span{font-size: 0.95rem;color: #fc5185;margin-left: 15px;}

/* ------------------------------------------------------------------- 
 * responsive:
 * comment
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
  
.comment {
width: 100%;max-width: 96%;
}
    
    .comment-L img{max-width: 80%;}
    
.comment-content {padding:15px 15px 0;
  width: 100%;
  max-width: 80%;
     
}
 .comment-R {font-size: 0.95rem;
  width: 100%;
  padding: 8px 0 0;
}

    .comment-R span{margin-left: 0px;}
    
    
} /*end*/

/* ------------------------------------------------------------------- 
 * etc
 * ------------------------------------------------------------------- */
.kome {text-align: left;
  list-style: none;
  padding-left: 1.5em;
  margin-left: 0.1em;
}
.kome li {
  text-indent: -1.5em;
    line-height: 1.7;
}
.kome li:before {
  content: "※";
  margin-right: 0.5em;}
/* ------------------------------------------------------------------- 
 * responsive:
 * etc
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
    .kome {font-size: 0.9rem;
}

}/**/

/**/
.end-box{
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 30px;
}
.end-box p{
  padding: 2em;
  margin: 0;
  background: #fff;
  border-radius: 20px;
  color: #333;
  font-size: clamp(1em, 2.5vw, 1.5em);
  text-align: center;
}
.end-box p span {
  display: inline-block;
}
@media screen and (max-width:992px) {
  .end-box {
    margin-bottom: 0;
  }
}