/* ==========================================================
  SP only
========================================================== */
@media screen and (max-width: 640px) {
 

#sotry #contents {
    padding: 50px 0 0;
}
.story_inner {
    width:auto;
    margin:30px auto 0;
    position:relative;
    }
.episodeNum {
    padding: 5px;
    position: absolute;
    background-color: #ff5da9;
    border-radius: 30px;
    width: 110px;
    color: #FFF;
    font-weight: 700;
    text-align: center;
    font-size: 2rem;
    top: -20px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
}
.day{
padding: 15px 0 0;
color: #ff5da9;
font-size: 1.5rem;
text-align: center;
}

.story_inner h2 {
    padding: 0px 0 15px;
    text-align: center;
    font-size: 2rem;
    color: #ff5da9;
    background: url(../images/event/event_border.gif) repeat-x center bottom;
}
.story_contents{padding:0px 0px 20px;}
.storyHead{overflow:hidden;padding:10px 0 20px;background: url(../images/event/event_border.gif) repeat-x center bottom; margin: 0 0 10px 0;}
 

 
.staff {
    padding: 5px 0 0 1.5%;
    overflow: hidden;
    width: 97%;
    text-align: center;
}

.staff p {
    margin-right: 2%;
    display: inline-block;
}

.staff p span:nth-child(1) {
	display: inline;
    border-radius: 30px;
    background-color: #ffeea3;
    color: #ff5da9;
    padding: 5px 10px;
    margin: 5px 0;
    font-size: 1rem;
}


.staff p span:nth-child(2) {
    display: block;
    margin: 2px 0 5px;
    font-size: 1.2rem;
    color: #ff5da9;
}

.movie {
    background-color: #ffe0f8;
    padding: 35px 0.5% 10px;
    border-radius: 15px;
    width: 70%;
    margin: 0 auto;
}

.movieIn {
    width: 90%;
    position: relative;
    margin: 0 auto;
}

.movieMain {
    width: 100%;
    padding-top:56.25%;
	position:relative;
	margin:0 auto;
	left:0px;
	right:0px;
}

.movieMain iframe{position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}
	.movieNumtext{
    color: #ff5da9;
    text-align:center;
    font-weight:700;
	font-size:1.25em;
	}

.movieIn iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

.movieNumtext {
    color: #ff5da9;

    font-weight: 700;
    position: absolute;
    top: -27px;
    text-align: center;
    left: 0px;
    right: 0px;
}

 .storyMain{overflow:hidden;}

  .storyMain dl{overflow:hidden;width:auto;margin:10px auto 20px;}
  .storyMain dl dt{width:100%;margin;5px 0 0;}
  .storyMain dl dt img{width:100%;}
  .storyMain dl dd{width:100%;margin:10px 0 30px;font-size:1.5rem;line-height:2.5rem;color:#5b4851;}
  
  .prevtButton{padding: 25px 0 0;}
  .nexttButton{padding: 25px 0 0;}
h3 {
    font-size: 3.2rem;
    background-color: #ff5da9;
    border-radius: 40px;
    border: 2px solid #FFF;
    padding: 10px 0 10px 30px;
    color: #ffeea3;
}
h3 span{
font-size: 2rem;
color: #ffeea3;
margin-top: 12px;
display: inline-block;
}

.pageNation{width:auto;margin:20px auto 70px;}
.prevButton{float:left;display:inlin-block;border-radius:10px; background-color: #ff5da9;color:#FFF;padding:5px 10px;}
.nextButton{float:right;display:inlin-block;border-radius:10px; background-color: #ff5da9;color:#FFF;padding:5px 10px;}

.prevButton a,.nextButton a{color:#FFF;text-decoration:underline;}
.prevButton a:hover,.nextButton a:hover{color:#FFF;text-decoration:none;}

  .backNumber{padding: 25px 0 50px;margin:0 auto;widthauto;}
.numberList {
    padding: 20px 0 0 0;
    overfl
}

article {
    width: 100%;
    position: relative;
    border-radius: 10px;
    background-color: #FFF;
    margin-bottom: 15px;
    overflow: hidden;
}



article a{text-decoration:none;}
article a:hover{background-color;#fff5ca !important;}

  article:nth-child(2n){margin-right:0%;}

h3 {
    font-size: 2.5rem;
    background-color: #ff5da9;
    border-radius: 40px;
    border: 2px solid #FFF;
    padding: 10px 0 10px 30px;
    color: #ffeea3;
}


h3 span {
    font-size: 1.5rem;
    color: #ffeea3;
    margin-top: 12px;
    display: inline-block;
}

  
  
.epNum {
    float: left;
    border-radius: 20px;
    padding: 2px 20px;
    color: #FFF;
    background-color: #ff5da9;
    margin: 10px 2% 0px;
    width: 20%;
    text-align: center;
    marging: 0 10px;
}



p.epDay {
    padding: 10px 0 0;
    font-size: 1.2rem;
    color: #ff5da9;
    width: 50%;
    float: left;
    font-size: 1.5rem;
}



p.epImg {
    padding: 5px 2% 10px;
    width: 30%;
    float: left;
    clear: both;
}



a p.epText {
    padding: 0px 10px 10px;
    color: #999;
    width: 59%;
    float: left;
    font-size: 1.5rem;
    line-height:1.8rem;
    text-decoration:underline;
}


a :hover p.epText {
    padding: 0px 10px 10px;
    color: #999;
    width: 59%;
    float: left;
    font-size: 1.5rem;
    line-height:1.8rem;
    text-decoration:none;
}

.detailSns{overflow:hidden;margin:0px 0px 20px !important;}
.detailSns ul{width:auto !important;display:block !important;overflow:hidden;float:left;overflow:hidden;}
.detailSns li{width:auto !important;display:block;margin:10px 10px 0 0 !important;float:left;}


.pageNation{width:auto;display:flex; justify-content: space-between;margin:0px auto 30px;}
.pageNation p a{color:#ff5da9;font-weight:700;padding:0 10px;font-size:1.25em;}


}






/* ==========================================================
  PC only
========================================================== */
@media screen and (min-width: 641px) {


#sotry #contents {
    padding: 50px 0 0;
}
.story_inner {
    width: 830px;
    margin:30px auto 0;
    position:relative;
    }
.episodeNum {
    padding: 5px;
    position: absolute;
    background-color: #ff5da9;
    border-radius: 30px;
    width: 110px;
    color: #FFF;
    font-weight: 700;
    text-align: center;
    font-size: 2rem;
    top: -20px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
}
.day{
padding: 25px 0 0;
color: #ff5da9;
font-size: 1.5rem;
text-align: center;
}

.story_inner h2 {
    padding: 0px 0 15px;
    text-align: center;
    font-size: 2.8rem;
    color: #ff5da9;
    background: url(../images/event/event_border.gif) repeat-x center bottom;
}
.story_contents{padding:0px 0px 20px;}
 .storyHead{
    overflow: hidden;

    background: url(../images/event/event_border.gif) repeat-x center bottom;
    margin: 0 0 10px 0;
    padding: 10px 0 15px 0;
 }
.staff {
    padding: 4px 1.5% 15px;
    overflow: hidden;
    width: 62%;
    margin: 10px auto 0px;
}

 .staff p{float:left;text-align:center;}
 .staff p span:nth-child(1){
    display: inline;
    border-radius: 30px;
    background-color: #ffeea3;
    color: #ff5da9;
    padding: 3px 20px;
    margin: 5px 15px 10px;
    font-size: 1.5rem;
}

 .staff p span:nth-child(2){    display: block;
    margin-top: 10px;
    font-size: 1.7rem;
    color: #ff5da9;}




.movie {
    width: 60%;
    background-color: #ffe0f8;
    padding: 10px 20px 20px;
    border-radius: 15px;
    margin: 0 auto 15px;
}

.movieMain {
    width: 100%;
    padding-top:56.25%;
	position:relative;
	margin:0 auto;
	left:0px;
	right:0px;
}

.movieMain iframe{position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}
	.movieNumtext{

    color: #ff5da9;
    text-align:center;
    font-weight:700;
	font-size:1.25em;
	}

 .storyMain{overflow:hidden;}

  .storyMain dl{overflow:hidden;width:95%;margin:10px auto 20px;}
    .storyMain dl dt,  .storyMain dl dd{float:left;margin-bottom:30px;}
  .storyMain dl dt{width:40%;margin-right:2%;clear:both;}
  .storyMain dl dt img{width:100%;}
  .storyMain dl dd{width:56%;font-size:1.5rem;line-height:2.5rem;color:#5b4851;}
  
  .prevtButton{padding: 25px 0 0;}
  .nexttButton{padding: 25px 0 0;}
h3 {
    font-size: 3.2rem;
    background-color: #ff5da9;
    border-radius: 40px;
    border: 2px solid #FFF;
    padding: 10px 0 10px 30px;
    color: #ffeea3;
}
h3 span{
font-size: 2rem;
color: #ffeea3;
margin-top: 12px;
display: inline-block;
}

.pageNation{width:830px;margin:20px auto 50px;}
.prevButton{float:left;display:inlin-block;border-radius:10px; background-color: #ff5da9;color:#FFF;padding:5px 10px;}
.nextButton{float:right;display:inlin-block;border-radius:10px; background-color: #ff5da9;color:#FFF;padding:5px 10px;}

.prevButton a,.nextButton a{color:#FFF;text-decoration:underline;}
.prevButton a:hover,.nextButton a:hover{color:#FFF;text-decoration:none;}

  .backNumber{padding: 25px 0 50px;margin:0 auto;width:830px;}
    .numberList{padding:20px 0 0 0;overflow:hidden;}
article {
    width: 23.5%;
    float: left;
    margin-right: 2%;
    position: relative;
    border-radius: 10px;
    background-color:#FFF;
    margin-bottom:25px;
}

article a{text-decoration:none;}
article a:hover{background-color;#fff5ca !important;}

  article:nth-child(4n){margin-right:0%;}
.epNum {
    border-radius: 20px;
    padding: 2px 20px;
    color: #FFF;
    position: absolute;
    background-color: #ff5da9;
    margin: 0 auto;
    left: 0px;
    right: 0px;
    width: 25%;
    text-align: center;
    top: -10px;
}
p.epDay {
    padding: 25px 0 0;
    text-align: center;
    font-size: 1.2rem;
    color: #ff5da9;
}
p.epImg {
    padding: 10px 20px;
}

p.epText {
    padding: 0px 10px 20px;
    color: #ff5da9;
    font-size:1.05rem;
}

.detailSns{overflow:hidden;margin:0px 0px 20px 20px !important;}
.detailSns ul{width:auto !important;display:block !important;overflow:hidden;float:left;overflow:hidden;}
.detailSns li{width:auto !important;display:block;margin:10px 10px 0 0 !important;float:left;}

.pageNation{width:95%;display:flex; justify-content: space-between;margin:0px auto 30px;}
.pageNation p a{padding:10px 30px;border-radius:30px;background-color:#ffa6d0;color:#FFF;}


}