@charset "utf-8";
/*
	episode.css
*/

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

@media screen and (min-width: 641px) {
	#episode #contents .inner {
		width: 920px;
		padding: 65px 0 50px;
		margin: 0 auto;
	}
	#episode #contents h3{
	  font-size: 18px;
	  color: #ffffff;
	  margin-bottom: 15px;
	}
	#episode #contents h4 {
		border-bottom: 1px solid #ef8cb6;
		width: 660px;
		font-size: 28px;
		color: #ff5f78;
		margin: 0 auto 10px;
	}
	#episode #contents h5 {
		border-bottom: 2px dotted #ef8cb6;
    width: 860px;
    text-align: center;
    color: #ff5f78;
    font-size: 28px;
    font-weight: bold;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 15px 80px 10px;
    margin: 70px auto 20px;
    position: relative;
    z-index: 2;
	}

	/*	sNavi
	=================== */
	#episode .sNavi ul li a {
		height: 50px;
		text-indent: -9999px;
		display: block;
	}
	#episode .sNavi ul li a:hover{
		background-position: 0 -50px;
	}
	#episode li.summary a{
		background: url(../images/episode/btn_sNavi01.png) no-repeat;
		width: 142px;
	}
	#episode li.list a{
		background: url(../images/episode/btn_sNavi02.png) no-repeat;
		width: 152px;
	}
	#episode.summary .sNavi ul li.summary a,
	#episode.list .sNavi ul li.list a {
		background-position: 0 -50px;
	}

	/* あらすじ一覧
	================= */
	#episode #contents .list-episode {
		width: 860px;
		margin: 0 auto;
		overflow: hidden;
	}
	#episode #contents .list-episode li {
		background-color: #fff4fa;
		border: 1px solid #ffbad7;
	  -webkit-box-shadow: 0px 0px 5px #ffbad7;
	  -moz-box-shadow: 0px 0px 5px #ffbad7;
	  box-shadow: 0px 0px 5px #ffbad7;
		border-radius: 5px;
		width: 205px;
		margin: 6px 5px;
		padding: 12px 10px;
		float: left;
		position: relative;
		height:250px;
	}
	#episode #contents .list-episode li p.count {
		background-color: #ffd4e6;
		border: 1px solid #ff61bf;
	  -webkit-box-shadow: 0px 0px 5px #ff61bf;
	  -moz-box-shadow: 0px 0px 5px #ff61bf;
	  box-shadow: 0px 0px 5px #ff61bf;
		border-radius: 5px;
		border-radius: 20px;
		width: 120px;
		text-align: center;
		font-size: 18px;
		padding: 2px 0 0;
		margin: 0 auto 7px;
	}
	#episode #contents .list-episode li p.day {
		text-align: center;
		font-size: 12px;
	}
	#episode #contents .list-episode li p.title {
		font-size: 14px;
	}
	#episode #contents .list-episode li div {
		margin: 15px 0 12px;
	}
	#episode #contents .list-episode li div img {
		width: 100%;
		height: 100%;
	}
	


	/* 最新話
	================= */
	#episode #contents .episode-latest {
		background: url(/tv/precure_alamode/images/episode/bg_inline.gif) repeat;
    border-radius: 10px;
		width: 860px;
		padding: 0 0 30px;
		margin: 0 auto 45px;
		position: relative;
		z-index: 1;
	}
	#episode #contents .episode-latest > div {
		background: url(../images/episode/bg_race_top.png) no-repeat top center;
		text-align: center;
		padding: 35px 0 0;
	}
	#episode #contents h3 {
		background-color: #ffd5e7;
		border: 1px solid rgba(255,97,191,0.5);
	  -webkit-box-shadow: 0px 0px 7px rgba(255,97,191,0.7) inset;
	  -moz-box-shadow: 0px 0px 7px rgba(255,97,191,0.7) inset;
	  box-shadow: 0px 0px 7px rgba(255,97,191,0.7) inset;
    border-radius: 20px;
    width: 200px;
    text-align: center;
    font-size: 20px;
    color: #563c3c;
    font-weight: normal;
    padding: 2px 0 0;
    margin: 0 0 0 -100px;
    position: absolute;
    top: -15px;
    left: 50%;
    z-index: 3;
	}
	#episode #contents .episode-latest .movie {
		background:url(../images/episode/flame_l.png) no-repeat center 0;
		width: 660px;
		height: 446px;
		padding: 10px;
		margin: 15px auto 20px;
	}
	#episode #contents .episode-latest p {
		font-size: 14px;
	}
	#episode #contents .episode-latest p.date {
		text-align: center;
	}
	#episode #contents .episode-latest .sns {
		background-color: #fff2f8;
		-webkit-box-shadow: 0px 0px 5px rgba(234,101,157,0.35) inset;
	  -moz-box-shadow: 0px 0px 5px rgba(234,101,157,0.35) inset;
	  box-shadow: 0px 0px 5px rgba(234,101,157,0.35) inset;
	  width: 240px;
		font-size: 0;
    text-align: center;
    padding: 12px 0;
    margin: 0 auto 15px;
	}
	#episode #contents .episode-latest .sns ul {
		font-size: 0;
    text-align: center;
	}
  #episode #contents .episode-latest .sns ul li {
    display: inline-block;
    line-height: 0.8;
    margin: 0 0 0 10px;
  }

	/* 詳細
	================= */
	#episode #contents .episode-detail {
		width: 860px;
		margin: 0 auto;
	}
	#episode #contents .episode-detail li {
		margin-bottom: 15px;
	}
	#episode #contents .episode-detail li:first-child {
		margin-top: 0;
	}
	#episode #contents .episode-detail li:before, .episode-detail li:after {
		content: "";
		display: table;
	}
	#episode #contents .episode-detail li:after {
		clear: both;
	}
	#episode #contents .episode-detail li div {
		background: url(../images/episode/flame_m.png) no-repeat center 0;
		float: left;
		width: 306px;
		height: 210px;
		padding: 15px 16px;
		margin: 0 20px 0 0;
	}
	#episode #contents .episode-detail p {
		margin: 20px 0;
	}
	
	
	div.movieOut{overflow:hidden;position:relative;width:auto;}
	p.pright{position:absolute;left:0px;top:260px;z-index:10000;}
	p.pleft{position:absolute;right:0px;top:260px;z-index:10000;}
	p.pleft a,p.pright a{color:#ff5f78;font-weight:700 !important;}
	p.pleft a:hover,p.pright a:hover{opacity:0.7;}
	p.pleft span,p.pright span{display:block;margin-top:10px;font-size:1.25em;}
	
	
}


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

@media screen and (max-width: 640px) {
	#episode #contents .inner {
		width: 100%;
		padding: 35px 4% 40px;
		margin: 0 auto;
	}
	#episode #contents h3{
	  font-size: 16px;
	  color: #ffffff;
	  margin-bottom: 15px;
	}
	#episode #contents h4 {
		border-bottom: 1px solid #ef8cb6;
		width: 100%;
		font-size: 20px;
		color: #ff5f78;
		margin: 0 0 5px;
	}
	#episode #contents h5 {
		border-bottom: 2px dotted #ef8cb6;
    width: 100%;
    text-align: center;
    color: #ff5f78;
    font-size: 18px;
    font-weight: bold;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 15px 4% 10px;
    margin: 25px auto 20px;
    position: relative;
    z-index: 2;
	}

	/* あらすじ一覧
	================= */
	#episode #contents .list-episode {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	#episode #contents .list-episode li {
		background-color: #fff4fa;
		border: 1px solid #ffbad7;
	  -webkit-box-shadow: 0px 0px 5px #ffbad7;
	  -moz-box-shadow: 0px 0px 5px #ffbad7;
	  box-shadow: 0px 0px 5px #ffbad7;
		border-radius: 5px;
		width: 49%;
		margin: 0 0 2% 2%;
		padding: 2%;
		float: left;
		position: relative;
		height:250px;
	}
	#episode #contents .list-episode li:nth-child(odd) {
		margin: 0 0 2%;
	}
	#episode #contents .list-episode li p.count {
		background-color: #ffd4e6;
		border: 1px solid #ff61bf;
	  -webkit-box-shadow: 0px 0px 5px #ff61bf;
	  -moz-box-shadow: 0px 0px 5px #ff61bf;
	  box-shadow: 0px 0px 5px #ff61bf;
		border-radius: 5px;
		border-radius: 20px;
		width: 120px;
		text-align: center;
		font-size: 14px;
		padding: 4px 0 2px;
		margin: 0 auto 5px;
	}
	#episode #contents .list-episode li p.day {
		text-align: center;
		font-size: 12px;
	}
	#episode #contents .list-episode li p.title {
		font-size: 14px;
	}
	#episode #contents .list-episode li div {
		margin: 5px 0 7px;
	}
	#episode #contents .list-episode li div img {
		width: 100%;
		height: 100%;
	}

	/* 最新話
	================= */
	#episode #contents .episode-latest {
		width: 100%;
		padding: 0 0 20px;
		margin: 0 auto 25px;
		position: relative;
		z-index: 1;
	}
	#episode #contents .episode-latest > div {
		text-align: center;
		padding: 20px 0 0;
	}
	#episode #contents h3 {
		background-color: #ffd5e7;
		border: 1px solid rgba(255,97,191,0.5);
	  -webkit-box-shadow: 0px 0px 7px rgba(255,97,191,0.7) inset;
	  -moz-box-shadow: 0px 0px 7px rgba(255,97,191,0.7) inset;
	  box-shadow: 0px 0px 7px rgba(255,97,191,0.7) inset;
    border-radius: 20px;
    width: 40%;
    text-align: center;
    font-size: 18px;
    color: #563c3c;
    font-weight: normal;
    padding: 2px 0 0;
    margin: 0 0 0 -20%;
    position: absolute;
    top: -15px;
    left: 50%;
    z-index: 3;
	}
	#episode #contents .episode-latest .movie {
		background:url(../images/episode/flame_l.png) no-repeat center 0;
		background-size: 100% auto;
		width: 100%;
		padding: 4%;
		margin: 15px auto 20px;
	}
	#episode #contents .episode-latest .movie > div {
		position: relative;
    width: 100%;
    padding-top: 62%;
  }
	#episode #contents .episode-latest .movie > div iframe {
    position: absolute;
    top: 0;
    right: 0;
    left:0;
    width: 90% !important;
    height: 90% !important;
    margin:0 auto;
	}
	#episode #contents .episode-latest p {
		font-size: 14px;
	}
	#episode #contents .episode-latest p.date {
		text-align: center;
	}
	#episode #contents .episode-latest .sns {
		background-color: #fff2f8;
		-webkit-box-shadow: 0px 0px 5px rgba(234,101,157,0.35) inset;
	  -moz-box-shadow: 0px 0px 5px rgba(234,101,157,0.35) inset;
	  box-shadow: 0px 0px 5px rgba(234,101,157,0.35) inset;
	  width: 80%;
		font-size: 0;
    text-align: center;
    padding: 12px 0;
    margin: 0 auto;
	}
	#episode #contents .episode-latest .sns ul {
		font-size: 0;
    text-align: center;
	}
  #episode #contents .episode-latest .sns ul li {
    display: inline-block;
    line-height: 0.8;
    margin: 0 0 0 10px;
  }

	/* 詳細
	================= */
	#episode #contents .episode-detail {
		width: 100%;
		margin: 0 auto;
	}
	#episode #contents .episode-detail li {
		margin-bottom: 15px;
	}
	#episode #contents .episode-detail li:first-child {
		margin-top: 0;
	}
	#episode #contents .episode-detail p {
		margin: 15px 0;
	}
	#episode #contents .episode-detail li div {
		background: url(../images/episode/flame_m.png) no-repeat center 0;
		background-size: 100% auto;
		width: 100%;
		padding: 4.5% 5%;
	}
	
	div.movieOut{overflow:hidden;position:relative;width:auto;}
	p.pright{position:absolute;left:0px;z-index:10000;padding-top:92%;}
	p.pleft{position:absolute;right:0px;z-index:10000;padding-top:92%;}
	p.pleft a:hover,p.pright a:hover,p.pleft a,p.pright a{opacity:0.7;text-decoration:none;}
	p.pleft span,p.pright span{display:block;margin-top:10px;font-size:0.875em;background-color:#ff5f78;border-radius:30px;padding:10px 30px;color:#FFF;font-weight:700;}
	p.pright img,p.pleft img{display:none;}
	
}