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

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

@media screen and (min-width:641px) {

  /* =================================
    @MAIN
  ================================= */
  #main {
  	width: 100%;
  	min-width: 1000px;
  	height: 648px;
  	margin: -70px 0 0;
  	position: relative;
  }
  #main .bg_main {
  	background: url(/tv/precure/images/animation/bg_main_layer01.jpg) no-repeat center top;
  	background-size: cover;
  	height: 648px;
  }
  /*#main .inner {
  	background: url(/tv/precure/images/top/bg_main_layer02.png) no-repeat center top;
  	width: 1000px;
  	height: 648px;
  	margin: 0 auto;
  	position: relative;
  }*/
  #main .inner > h1,
  #main .inner > p {
  	position: absolute;
  	left: 50%;
  }
  #main .inner > h1 {
  	top: 296px;
  	margin: 0 0 0 -190px;
  	z-index: 10;
  	opacity: 0;
  }
  #main .inner > p.read {
  	bottom: 128px;
  	margin: 0 0 0 -235px;
  	z-index: 10;
  }
  #main .inner > p.chara01 {
  	top: 250px;
  	margin: 0 0 0 -40px;
  	z-index: 6;
  }
  #main .inner > p.chara02 {
  	top: 92px;
  	margin: 0 0 0 -460px;
  	z-index: 2;
  }
  #main .inner > p.chara03 {
  	top: 60px;
  	margin: 0 0 0 -20px;
  	z-index: 2;
  }
  #main .inner > p.chara04 {
  	top: 40px;
  	margin: 0 0 0 -268px;
  	z-index: 1;
  }
  #main .inner > p.chara05 {
  	top: 49px;
  	margin: 0 0 0 -88px;
  	z-index: 1;
  }
  #main .inner > p.chara06 {
    top: 197px;
    margin: 0 0 0 -464px;
    z-index: 5;
  }  
  #main .inner > p.chara07 {
    top: 401px;
    margin: 0 0 0 93px;
    z-index: 7;
  }  
    #main .inner > p.sweets01 {
    top: 541px;
    margin: 0 0 0 178px;
    z-index: 1;
  }  
    #main .inner > p.sweets02 {
    top: 250px;
    margin: 0 0 0 180px;
    z-index: 1;
  }  
    #main .inner > p.sweets03 {
    top: 65px;
    margin: 0 0 0 70px;
    z-index: 1;
  }  
    #main .inner > p.sweets04 {
    top: 60px;
    margin: 0 0 0 -218px;
    z-index: 1;
  }  
    #main .inner > p.sweets05 {
    top: 130px;
    margin: 0 0 0 -382px;
    z-index: 1;
  }  
    #main .inner > p.sweets06 {
    top: 425px;
    margin: 0 0 0 -460px;
    z-index: 1;
  }    
  #main .inner > .pc_glitter {
  	position: absolute;
  	left: 50%;
  	top: 0;
  	margin: 0 0 0 -500px;
  	z-index: 6;
  	opacity: 0;
  }
  #main .inner > p > img {
    position: relative;
    bottom: -30px;
    opacity: 0;
  }
  #main .main_contents {
  	width: 273px;
  	position: absolute;
  	top: 66px;
  	right: 50%;
  	margin: 0 -500px 0 0;
  	z-index: 10;
  }
  #main .main_contents .youtube_area {
  	background: url(/tv/precure/images/top/bg_youtube_area.png) no-repeat center 0;
  	background-size: 100% auto;
  	width: 273px;
  	height: 279px;
  	padding: 70px 28px 0;
  }
  #main .main_contents .youtube_area .thumb {
  	margin: 0 0 5px;
  }
  #main .main_contents .youtube_area .thumb img {
  	width: 215px;
  	height: 123px;
  }
  #main .main_contents .youtube_area .btn_youtube img {
  	width: 215px;
  	height: 54px;
  }
  #main .main_contents .campaign {
  	background: url(/tv/precure/images/top/bg_campaign_banner.png) no-repeat center 0;
  	background-size: 100% auto;
  	width: 273px;
  	height: 171px;
  	padding: 15px 17px;
  	margin: -4px 0 0;
  }
  #main .main_contents .campaign img {
  	width: 239px;
  	height: 141px;
  }
  #main .main_contents .sns_area {
  	margin: -4px 0 0;
  }

  /* =================================
    @CONTENTS
  ================================= */
	#top #contents {
		width: 100%;
		margin: -68px 0 0;
		position: relative;
    z-index: 2;
	}
	#contents .contents_top {
		background: url(/tv/precure/images/shared/bg_contents_top.png) repeat-x center 0;
		height: 68px;
		position: relative;
		z-index: 10;
	}
	#contents > .bg_contents {
		background: url(/tv/precure/images/top/bg_contents.jpg) repeat center 0;
		margin: -8px 0 0;
	}
	#contents .inner {
		width: 1000px;
		padding: 20px 40px 90px;
		margin: 0 auto;
	}

	/* LEFT AREA
	---------------------*/
	#contents .left_area {
		width: 300px;
		margin: 0 0 20px;
		float: left;
	}

	/* RIGHT AREA
	---------------------*/
	#contents .right_area {
		width: 600px;
		margin: 0 0 20px 20px;
		float: left;
	}

	/* TOPICS */
	#contents #topics h2 {
		background: url(/tv/precure/images/top/bg_tit_topics.gif) repeat-x;
		border: 2px solid #ff5f78;
		border-radius: 5px;
		width: 300px;
		height: 60px;
		text-align: center;
		padding: 2px 0 0;
		margin: 0 0 10px;
	}
	#contents h2 img {
		width: 300px;
		height: 57px;
	}
	#contents #topics .pc_topics_area {
		background-color: #ffeff2;
		border-radius: 5px;
    box-shadow: 0px 0px 5px #ff5f78;
    -webkit-box-shadow: 0px 0px 5px #ff5f78;
    -moz-box-shadow: 0px 0px 5px #ff5f78;
		width: 300px;
		height: 360px;
		padding: 8px 0 8px 12px;
		margin: 0 0 20px;
	}
	#contents #topics .pc_topics_area dl {
		height: 345px;
	}
	#contents #topics .pc_topics_area dl dt {
		color: #f23446;
		font-size: 12px;
		font-weight: bold;
		padding: 0 0 0 5px;
	}
	#contents #topics .pc_topics_area dl dd {
		background: url(/tv/precure/images/top/line_star.png) repeat-x left bottom;
    padding: 5px 0 25px 5px;
    margin: 0 0 4px;
	}
	#contents .pc_main_banner {
		border-radius: 5px;
    box-shadow: 0px 0px 5px #e08ae0;
    -webkit-box-shadow: 0px 0px 5px #e08ae0;
    -moz-box-shadow: 0px 0px 5px #e08ae0;
	}

	/* PV */

	#contents #pv h2 {
		background: url(/tv/precure/images/top/bg_tit_pv.gif) repeat-x;
		border: 2px solid #66b2ff;
		border-radius: 5px;
		width: 600px;
		height: 60px;
		text-align: center;
		padding: 2px 0 0;
		margin: 0 0 10px;
	}
	#contents #pv .pv_area {
		background: url(/tv/precure/images/top/bg_pv_area_top.gif) repeat-x center top,
url(/tv/precure/images/top/bg_pv_area_bottom.gif) repeat-x center bottom;
		background-color: #f0f7ff;
		border-radius: 5px;
    box-shadow: 0px 0px 5px #66b2ff;
    -webkit-box-shadow: 0px 0px 5px #66b2ff;
    -moz-box-shadow: 0px 0px 5px #66b2ff;
		width: 600px;
		min-height: 580px;
		padding: 16px 30px 12px;
	}
	#contents #pv .pv_area > div {
		line-height: 1;
		margin: 5px 0 0;
	}
	#contents #pv .pv_area > div .count {
		background-color: #66b2ff;
		border-radius: 15px;
		color: #fff;
		width: 160px;
		height: 30px;
		font-size: 18px;
		text-align: center;
		padding: 8px 0;
		float: left;
	}
	#contents #pv .pv_area > div .onair {
		color: #66b2ff;
		font-size: 18px;
		padding: 8px 0 0;
		float: right;
	}
	#contents #pv .pv_area h3 {
		color: #fe7800;
		font-size: 24px;
		text-align: center;
		margin: 5px 0;
	}
	#contents #pv .pv_area > p {
		color: #7f540c;
		margin: 10px 0 5px;
	}
}

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

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

  /* =================================
    @MAIN
  ================================= */
  #main {
  	margin: -38px 0 0;
  }
  #main .bg_main {
  	background: url(/tv/precure/images/animation/bg_main_layer01.jpg) no-repeat center 0;
  	background-size: 120% auto;
  }
  #main .inner {
  	width: 100%;
  	height: 370px;
  	position: relative;
  }
  #main .inner > h1,
  #main .inner > p {
  	position: absolute;
  	left: 50%;
  }
  #main .inner > h1 {
  	width: 162px;
  	top: 156px;
  	margin: 0 0 0 -81px;
  	z-index: 4;
  	opacity: 0;
  }
  #main .inner > p.read {
  	width: 296px;
  	top: 264px;
  	margin: 0 0 0 -148px;
  	z-index: 5;
  }
  #main .inner > p.chara01 {
  	width: 160px;
  	top: 170px;
  	margin: 0 0 0 72px;
  	z-index: 3;
  }
  #main .inner > p.chara02 {
  	width: 168px;
  	top: 68px;
  	margin: 0 0 0 -270px;
  	z-index: 2;
  }
  #main .inner > p.chara03 {
  	width: 130px;
  	top: 45px;
  	margin: 0 0 0 60px;
  	z-index: 2;
  }
  #main .inner > p.chara04 {
  	width: 134px;
  	top: 25px;
  	margin: 0 0 0 -152px;
  	z-index: 1;
  }
  #main .inner > p.chara05 {
  	width: 146px;
  	top: 24px;
  	margin: 0 0 0 -35px;
  	z-index: 1;
  }
  #main .inner > p.chara06 {
    width: 328px;
    top: 150px;
    margin: 0 0 0 -275px;
    z-index: 1;
  }
  #main .inner > p.chara07 {
    width: 75px;
    top: 260px;
    margin: 0 0 0 165px;
    z-index: 5;
  }  
  #main .inner > p.sweets01 {
    width: 26px;
    top: 220px;
    margin: 0 0 0 210px;
    z-index: 5;
  } 
  #main .inner > p.sweets02 {
    width: 24.5px;
    top: 140px;
    margin: 0 0 0 170px;
    z-index: 5;
  } 
  #main .inner > p.sweets03 {
    width: 23.5px;
    top: 40px;
    margin: 0 0 0 90px;
    z-index: 5;
  } 
  #main .inner > p.sweets04 {
    width: 23px;
    top: 30px;
    margin: 0 0 0 -35px;
    z-index: 5;
  } 
  #main .inner > p.sweets05 {
    width: 24px;
    top: 150px;
    margin: 0 0 0 -240px;
    z-index: 5;
  } 
  #main .inner > p.sweets06 {
    width: 30.5px;
    top: 260px;
    margin: 0 0 0 -280px;
    z-index: 5;
  } 


  #main .inner > p > img {
    position: relative;
    bottom: -30px;
    opacity: 0;
  }
  #main .main_contents {
  	padding: 0 4% 80px;
    position: relative;
    z-index: 2;
  }
  #main .main_contents .youtube_area {
  	background: url(/tv/precure/images/top/bg_youtube_area.png) no-repeat center 0;
  	background-size: 100% auto;
		padding: 26% 10% 8%;
    margin: 0 0 10px;
  }
  #main .main_contents .youtube_area .thumb {
  	margin: 0 0 5px;
  }
  #main .main_contents .campaign {
  	background: url(/tv/precure/images/top/bg_campaign_banner.png) no-repeat center 0;
  	background-size: 100% auto;
		padding: 5% 6%;
  	margin: 0 0 10px;
  }

  /* =================================
    @CONTENTS
  ================================= */
	#top #contents {
		width: 100%;
		margin: -68px 0 0;
		position: relative;
    z-index: 2;
	}
	#contents .contents_top {
		background: url(/tv/precure/images/shared/bg_contents_top.png) repeat-x center 0;
		background-size: 600px 34px;
		height: 34px;
		position: relative;
		z-index: 10;
	}
	#contents > .bg_contents {
		background: url(/tv/precure/images/top/bg_contents.jpg) repeat center 0;
		margin: -8px 0 0;
	}
	#contents .inner {
		padding: 20px 4% 45px;
	}

	/* TOPICS */
	#contents #topics h2 {
		background: url(/tv/precure/images/top/bg_tit_topics.gif) repeat-x;
		border: 2px solid #ff5f78;
		border-radius: 5px;
		height: 48px;
		text-align: center;
		padding: 2px 0 0;
		margin: 0 0 10px;
	}
	#contents h2 img {
		width: 240px;
	}
	#contents #topics .sp_topics_area {
		background-color: #ffeff2;
		border-radius: 5px;
    box-shadow: 0px 0px 5px #ff5f78;
    -webkit-box-shadow: 0px 0px 5px #ff5f78;
    -moz-box-shadow: 0px 0px 5px #ff5f78;
    padding: 10px 10px 20px;
		margin: 0 0 20px;
	}
	#contents #topics .sp_topics_area dl {
	}
	#contents #topics .sp_topics_area dl dt {
    color: #f23446;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 10px 0 5px 5px;
	}
	#contents #topics .sp_topics_area dl dd {
		background: url(/tv/precure/images/top/line_star.png) repeat-x left bottom;
		background-size: 182px 9px;
		padding: 0 0 25px 5px;
	}

	#contents #pv h2 {
		background: url(/tv/precure/images/top/bg_tit_pv.gif) repeat-x;
		border: 2px solid #66b2ff;
		border-radius: 5px;
		height: 48px;
		text-align: center;
		padding: 2px 0 0;
		margin: 0 0 10px;
	}
	#contents #pv .pv_area {
		background: url(/tv/precure/images/top/bg_pv_area_top.gif) repeat-x center top,
url(/tv/precure/images/top/bg_pv_area_bottom.gif) repeat-x center bottom;
		background-color: #f0f7ff;
		border-radius: 5px;
    box-shadow: 0px 0px 5px #66b2ff;
    -webkit-box-shadow: 0px 0px 5px #66b2ff;
    -moz-box-shadow: 0px 0px 5px #66b2ff;
		padding: 15px 4%;
		margin: 0 0 20px;
	}
	#contents #pv .pv_area > div {
		line-height: 1;
		margin: 5px 0 0;
	}
	#contents #pv .pv_area > div .count {
		background-color: #66b2ff;
		border-radius: 15px;
		color: #fff;
		width: 120px;
		height: 26px;
		font-size: 1.6rem;
		text-align: center;
		line-height: 1;
		padding: 6px 0;
		float: left;
	}
	#contents #pv .pv_area > div .onair {
		color: #66b2ff;
		font-size: 1.6rem;
		padding: 6px 0 0;
		float: right;
	}
	#contents #pv .pv_area iframe {
		max-width: 100%;
	}
	#contents #pv .pv_area h3 {
		color: #fe7800;
		font-size: 2.0rem;
		text-align: center;
		margin: 5px 0;
	}
	#contents #pv .pv_area > p {
		color: #7f540c;
		margin: 10px 0 5px;
	}

}

/* ムービーボタン */
p.pMovie{position:relative;}
.playImage{position:absolute;top:0px;left:0px;z-index:3000;opacity:0.7;}