body
{
	
}

main
{
	font-family    : 'Zen Maru Gothic', "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size      : 16pt;
	font-weight    : 500;
	line-height    : 1.8;
	
	min-width      : 1100px;
	
	overflow       : hidden;
}

a
{
	/* color          : #17a1e5; */
}

a:hover
{
	 /* color          : #40bfff; */
}

.page-top
{
	z-index        : 3;
	
	display        : none!important;	
}


/* --------------------------------------- */


ruby
{
	display        : inline-flex;
	flex-direction : column;
	vertical-align : bottom !important;
}

ruby rb
{
	display        : flex;
	justify-content: center;
}

ruby rt
{
	display        : none;
}

ruby::before
{
	content        : attr(data-ruby);

	position       : relative;
	top            : 0;
	left           : 0;
	right          : 0;

	margin         : auto;
	margin-bottom  : -1.1em;

	font-size      : 0.4em;
	text-align     : center;
	line-height    : 1.0;
}


/* --------------------------------------- */


.btn_type1
{
	display        : block;

	margin         : 0 auto;

	width          : 608px;
	height         : 134px;

	position       : relative;
}

.btn_type1::after
{
	content        : "";
	
	background     : url(/asset/img/precure_cp/btn_ribbon.png);
	background-size: contain;

	display        : block;

	position       : absolute;
	top            : -25px;
	left           : -45px;

	width          : 110px;
	height         : 90px;
}

.btn_type1 a
{
	display        : block;

	margin         : 0 auto;

	width          : 608px;
	height         : 134px;

	border-radius  : 15px;

	overflow       : hidden;

	position       : relative;
}

.btn_type1 a::before
{
	content        : "";

	display        : block;

	position       : absolute;
	top            : -100px;
	left           : 0;

	width          : 30px;
	height         : 100%;

	background     : #fff;

	opacity        : 0;

	transition     : cubic-bezier(0.32, 0, 0.67, 0);
}

.btn_type1 a:hover::before
{
	animation      : kiran 0.5s linear;
}
 
@keyframes kiran
{
	  0% { transform: scale(2)  rotate(45deg); opacity: 0; }
	 20% { transform: scale(20) rotate(45deg); opacity: 0.6; }
	 40% { transform: scale(30) rotate(45deg); opacity: 0.4; }
	 80% { transform: scale(45) rotate(45deg); opacity: 0.2; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}


/* --------------------------------------- */


.lace_white
{
	height: 60px;
	background: #fff;
}





/*=========================================================================================================

  MAIN_VISUAL

=========================================================================================================*/



#MAIN_AREA
{
	position       : relative;
	
	margin         : 65px 0 0;
	padding-top    : 60px;

	/*
	background     : url(/asset/img/precure_cp/main_back.jpg) top center no-repeat #375eac;
	background-size: cover;
	*/
	background     : url(/asset/img/precure_cp/present_back.jpg) top center repeat #ed99e4;
	background-attachment: fixed;
}

#MAIN_AREA .lace
{
	padding        : 0px 0 180px;

	background-image    : url(/asset/img/precure_cp/lace_01.png);
	background-position : bottom center;
	background-repeat   : repeat-x;
}

#MAIN_AREA .mv_box
{
	text-align     : center;
}

#MAIN_AREA .mv_box .inner
{
	margin         : 0 auto;

	width          : 70%;
	min-width      : 800px;
	max-width      : 1100px;

	position       : relative;
}

#MAIN_AREA .mv_box .main_image
{
	margin-top     : -40px;

	width          : 100%;
}


/* --------------------------------------- */


#MAIN_AREA .mv_box .mv_item
{
	position       : absolute;
	top            : 0;
	left           : 0;
	right          : 0;
	
	margin         : 0 auto;
	
	width          : 100%;
	height         : 100%;
}

#MAIN_AREA .mv_box .mv_item li
{
	position       : absolute;

	width          : 260px;

	opacity        : 0;

	animation      : popup 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/*
#MAIN_AREA .mv_box .mv_item li:nth-child(1) { width: 320px; top: -60px; left: -140px; }
#MAIN_AREA .mv_box .mv_item li:nth-child(2) { width: 280px; top: 160px; left: -270px; animation-delay: 0.1s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(3) { width: 260px; top: 270px; left:  -70px; animation-delay: 0.2s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(4) { width: 300px; top: 450px; left: -220px; animation-delay: 0.3s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(5) { width: 260px; top: -60px; right: -110px; }
#MAIN_AREA .mv_box .mv_item li:nth-child(6) { width: 320px; top: 100px; right: -280px; animation-delay: 0.1s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(7) { width: 300px; top: 270px; right:  -60px; animation-delay: 0.2s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(8) { width: 260px; top: 470px; right: -200px; animation-delay: 0.3s; }
*/
#MAIN_AREA .mv_box .mv_item li:nth-child(1) { width: 28%; top: -9%; left: -12%; }
#MAIN_AREA .mv_box .mv_item li:nth-child(2) { width: 25%; top: 23%; left: -24%; animation-delay: 0.1s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(3) { width: 23%; top: 39%; left:  -6%; animation-delay: 0.2s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(4) { width: 26%; top: 65%; left: -19%; animation-delay: 0.3s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(5) { width: 25%; top: -9%; right: -10%; }
#MAIN_AREA .mv_box .mv_item li:nth-child(6) { width: 28%; top: 15%; right: -25%; animation-delay: 0.1s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(7) { width: 26%; top: 39%; right:  -5%; animation-delay: 0.2s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(8) { width: 23%; top: 68%; right: -18%; animation-delay: 0.3s; }

#MAIN_AREA .mv_box .mv_item li:nth-child(1) img { animation-delay: 0.0s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(2) img { animation-delay: 0.3s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(3) img { animation-delay: 0.6s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(4) img { animation-delay: 0.9s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(5) img { animation-delay: 0.0s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(6) img { animation-delay: 0.3s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(7) img { animation-delay: 0.6s; }
#MAIN_AREA .mv_box .mv_item li:nth-child(8) img { animation-delay: 0.9s; }

#MAIN_AREA .mv_box .mv_item li img
{
	width          : 100%;

	animation      : yurayura 3s infinite ease-in-out;
}

@keyframes yurayura
{
	  0% { transform: translateY(0); }
	 50% { transform: translateY(15px); }
	100% { transform: translateY(0); }
}

@keyframes popup
{
	  0% { transform: translateY(100px) scale(0.0); opacity: 0; }
	100% { transform: translateY(0) scale(1.0); opacity: 1; }
}


/* --------------------------------------- */


#MAIN_AREA .about_box
{
	margin         : 0 auto;
	margin-top     : 20px;
	
	width          : 1100px;
}


#MAIN_AREA .about_box .about_text
{
	color          : #fff;
	font-size      : 150%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 2.4;
	
	text-shadow    : 0 0 5px #c10655,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079;
}

#MAIN_AREA .about_box .about_text ruby
{
	margin         : 0 3px;
}

#MAIN_AREA .about_box .about_text ruby::before
{
	margin-bottom  : -1.5em;
}

#MAIN_AREA .about_box .about_text_note
{
	margin-top     : 40px;
	padding        : 10px 20px;
	/*
	padding-left   : 1em;
	text-indent    : -1em;
	*/
	font-size      : 80%;
	text-align     : center;
	
	border-top: 3px dotted #fff;
	border-bottom: 3px dotted #fff;
	
	text-shadow    : 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff,
					 0 0 4px #fff;
}


#MAIN_AREA .about_box .btn_present
{
	margin-top     : 80px;

	text-align     : center;
}


/* --------------------------------------- */


#MAIN_AREA .movie_box
{
	margin         : 0 auto;
	margin-top     : 120px;
	
	width          : 1100px;
}

#MAIN_AREA .movie_box video
{
	display        : block;

	width          : 100%;

	border         : 10px solid #fff;

	box-shadow     : 0px 0px 20px 0px #ec598a;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	     -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}





/*=========================================================================================================

  HOWTO

=========================================================================================================*/



#HOWTO
{
	background     : url(/asset/img/precure_cp/howto_back.png) top center repeat #ffbcd2;
}

#HOWTO .lace
{
	padding        : 140px 0 140px;

	background-image    : url(/asset/img/precure_cp/lace_02.png), url(/asset/img/precure_cp/lace_01.png);
	background-position : top center, bottom center;
	background-repeat   : repeat-x, repeat-x;
}

#HOWTO h2
{
	text-align     : center;
}

#HOWTO .inner
{
	margin         : 0 auto;
	margin-top     : 80px;
	padding        : 60px;
	
	width          : 980px;

	background     : #fff;
	border-radius  : 20px;
	box-shadow     : 0px 0px 20px 0px #ec598a;
}

#HOWTO .howto_text_main
{
	margin-top     : -10px;

	color          : #ff3399;
	font-size      : 170%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
}

#HOWTO .howto_text_main ruby::before
{
	margin-bottom  : 0em;
}

#HOWTO .obo_box
{
	display        : flex;
	justify-content: space-between;
	
	margin-top     : 60px;
}

#HOWTO .obo_box .step_box
{
	margin-top     : 20px;
	padding-top    : 10px;
	padding-bottom : 40px;

	width          : 290px;

	background     : #f2edef;

	position       : relative;
}

#HOWTO .obo_box .step_box::after
{
	content        : "";

	position       : absolute;
	top            : 0;
	bottom         : 0;
	right          : -66px;

	margin         : auto;

	width          : 15px;
	height         : 0px;

	border           : 15px solid transparent;
	border-left-color: #f39;
}

#HOWTO .obo_box .step_box:last-child::after
{
	display        : none;
}

#HOWTO .obo_box .step_box .step_rbn
{
	display        : block;

	margin         : 0 auto;
	margin-top     : -30px;

	width          : 200px;
}
/*
#HOWTO .obo_box .step_box[data-type="typeB"]
{
	display: flex;
	justify-content: space-between;
}
*/
#HOWTO .obo_box .step_box .step_text
{
	display: flex;
	justify-content: center;
	align-items: center;

	margin-top     : 10px;

	height         : 100%;

	font-size      : 105%;
	text-align     : center;
	line-height    : 1.6;
}

#HOWTO .obo_box .step_box .step_text .compact_text
{
	font-size      : 95%;
	letter-spacing : -0.15em;
}

#HOWTO .obo_box .step_box .step_text ruby::before
{
	margin-bottom  : -0.8em;
}

#HOWTO .obo_box .step_box .step_text a
{
	text-decoration: underline!important;
}

#HOWTO .obo_box .step_box .step_text a ruby rb
{
	text-decoration: underline!important;
}

#HOWTO .obo_box .step_box .step_image
{
	width          : 100%;
}

#HOWTO .step_tvbox
{
	display        : flex;

	margin-top     : 10px;

	width          : 440px;
	height         : 240px;

	background     : url(/asset/img/precure_cp/howto_step_02.jpg) top center no-repeat #ed99e4;
	background-size: cover;

	border         : 10px solid #333;

	overflow       : hidden;
}

#HOWTO .step_tvbox[data-type="pc"]
{
	margin         : 0 auto;
	margin-top     : 60px;
}

#HOWTO .step_tvbox[data-type="sp"]
{
	display        : none;
}

#HOWTO .step_tvbox .marquee_text
{
	display        : inline-block;

	margin         : 0;
	margin-top     : auto;
	margin-bottom  : 5px;
	padding-left   : 100%;
	padding-right  : 0em;
	
	color          : #fff;
	font-size      : 120%;
	font-weight    : bold;
	white-space    : nowrap;
	
	text-shadow    : 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000,
					 0 0 3px #000;

	animation      : marquee-left 16s linear infinite;
}

#HOWTO .step_tvbox .marquee_text span
{
	font-size      : 110%;

	text-shadow    : 0 0 5px #f22079,
					 0 0 5px #f22079,
					 0 0 5px #f22079,
					 0 0 5px #f22079,
					 0 0 5px #f22079,
					 0 0 5px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079;

	animation      : marquee-left 16s linear infinite;
}

@keyframes marquee-left
{
    0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}


/* --------------------------------------- */

/*
#HOWTO .ap_box
{
	position       : relative;
	
	margin-top     : 100px;
	padding        : 40px;
	
	background     : #f4d11f;
}

#HOWTO .ap_box .text_box
{
	width          : 740px;
}

#HOWTO .ap_box .text_box .ap_text
{
	line-height    : 1.6;
}

#HOWTO .ap_box .text_box .ap_text strong
{
	display        : block;
	
	margin-bottom  : 15px;
	
	color          : #e22508;
	font-size      : 160%;
	font-weight    : bold;
	text-align     : left;
	line-height    : 1.0;
}

#HOWTO .ap_box .text_box .btn_ap
{
	margin-top     : 30px;
}

#HOWTO .ap_box .text_box .btn_ap a
{
	display        : block;
	
	margin         : 0 auto;
	padding        : 15px 0px;
	
	width          : 630px;
	
	color          : #fff;
	font-size      : 100%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
	text-decoration: none;
	
	background     : #e22508;
	border-radius  : 100px;
}

#HOWTO .ap_box .text_box .btn_ap a:hover
{
	color          : #e22508;
	
	background     : #fff;
}

#HOWTO .ap_box .ap_illust
{
	position       : absolute;
	bottom         : 0;
	right          : 40px;
}
*/




/*=========================================================================================================

  PRESENT

=========================================================================================================*/



#PRESENT
{
	background     : url(/asset/img/precure_cp/present_back.jpg) top center repeat #ed99e4;
	background-attachment: fixed;
}

#PRESENT .lace
{
	padding        : 140px 0 160px;

	background-image    : url(/asset/img/precure_cp/lace_02.png);
	background-position : top center;
	background-repeat   : repeat-x;
}

#PRESENT h2
{
	text-align     : center;
}

#PRESENT .text_title_sub
{
	margin-top     : 10px;
	margin-bottom  : 60px;
	
	text-align     : center;
}

#PRESENT .present_area
{
	margin         : 0 auto;
	margin-top     : 100px;
	
	width          : 1100px;
}


/* --------------------------------------- */


#PRESENT .present_list
{
	display        : flex;
	justify-content: center;
	
	position       : relative;
	
	margin-top     : 50px;
	
	z-index        : 1;
}

#PRESENT .present_list > li
{
	position       : relative;

	width          : 680px;
}

#PRESENT .present_list > li .present_box
{
	background     : #fff;
	border-radius  : 20px;
	box-shadow     : 0px 0px 15px 0px #ec598a;

	overflow       : hidden;
}

#PRESENT .present_list > li .present_box .present_img
{
	width          : 100%;
}

#PRESENT .present_list > li .present_num
{
	position       : absolute;
	top            : -60px;
	right          : -50px;
}

#PRESENT .present_list > li .present_box[data-type="slider"]
{
	
}

#PRESENT .present_list > li .present_box[data-type="slider"] .slider
{
	padding-bottom : 20px;
}

#PRESENT .present_list > li .present_box[data-type="slider"] .slick-dots > li button:before
{
	opacity        : 0.5;
}

#PRESENT .present_list > li .present_box[data-type="slider"] .slick-dots > li.slick-active button::before
{
	opacity        : 0.75;
	
	font-size      : 14px;
}

#PRESENT .present_list > li .present_box[data-type="slider"] .slick-dots > li:nth-child(1) button::before
{
	color          : #fc4c95;
}

#PRESENT .present_list > li .present_box[data-type="slider"] .slick-dots > li:nth-child(2) button::before
{
	color          : #2da2dd;
}

#PRESENT .present_list > li .present_box[data-type="slider"] .slick-dots > li:nth-child(3) button::before
{
	color          : #9558a0;
}

#PRESENT .present_list > li .present_box[data-type="slider"] .slick-dots
{
	
}

#PRESENT .present_list > li .present_box[data-type="slider"] .present_img_c
{
	margin-top     : 40px;
}

#PRESENT .present_list > li .present_box[data-type="slider"] .present_img_c[data-type="typeB"]
{
	margin-top     : 20px;
}

#PRESENT .btn_obo,
#PRESENT .btn_obo_off
{
	margin-top     : 100px;
	
	text-align     : center;
}


/* --------------------------------------- */


#PRESENT .present_title_02
{
	margin-top     : 140px;

	text-align     : center;
}


#PRESENT .present_text_02
{
	margin-top     : 10px;

	color          : #fff;
	font-size      : 140%;
	text-align     : center;
	line-height    : 2.4;
	
	text-shadow    : 0 0 5px #c10655,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079,
					 0 0 10px #f22079;
}

#PRESENT .present_text_02 ruby
{
	margin         : 0 3px;
}

#PRESENT .present_text_02 ruby::before
{
	margin-bottom  : -1.5em;
}


#PRESENT .future_present_area
{
	margin         : 0 auto;
	margin-top     : 40px;

	width          : 1100px;
}

#PRESENT .future_present_area .fp_list
{
	display        : flex;
	flex-wrap      : wrap;
	gap            : 40px;
}

#PRESENT .future_present_area .fp_list li
{
	width          : 245px;
}

#PRESENT .future_present_area .fp_list li img
{
	width          : 100%;

	border-radius  : 20px;
	box-shadow     : 0px 0px 15px 0px #ec598a;
}

#PRESENT .future_present_area .fp_list li a
{
	display        : block;
	
	position       : relative;
}

#PRESENT .future_present_area .fp_list li a::after
{
	content        : "";
	
	background-size: contain;

	display        : block;

	position       : absolute;
	top            : -20px;
	left           : -20px;

	width          : 88px;
	height         : 66px;
}

#PRESENT .future_present_area .fp_list li:nth-child(1) a::after { background-image : url(/asset/img/precure_cp/present_dayrbn_01.png); }
#PRESENT .future_present_area .fp_list li:nth-child(2) a::after { background-image : url(/asset/img/precure_cp/present_dayrbn_02.png); }
#PRESENT .future_present_area .fp_list li:nth-child(3) a::after { background-image : url(/asset/img/precure_cp/present_dayrbn_03.png); }
#PRESENT .future_present_area .fp_list li:nth-child(4) a::after { background-image : url(/asset/img/precure_cp/present_dayrbn_04.png); }
#PRESENT .future_present_area .fp_list li:nth-child(5) a::after { background-image : url(/asset/img/precure_cp/present_dayrbn_05.png); }
#PRESENT .future_present_area .fp_list li:nth-child(6) a::after { background-image : url(/asset/img/precure_cp/present_dayrbn_06.png); }
#PRESENT .future_present_area .fp_list li:nth-child(7) a::after { background-image : url(/asset/img/precure_cp/present_dayrbn_07.png); }
#PRESENT .future_present_area .fp_list li:nth-child(8) a::after { background-image : url(/asset/img/precure_cp/present_dayrbn_08.png); }


/* --------------------------------------- */


#PRESENT .ap_box
{
	position       : relative;
	
	margin         : 0 auto;
	margin-top     : 100px;
	padding        : 40px 40px 50px;
	
	width          : 1100px;
	
	background     : url(/asset/img/precure_cp/apbox_back.png) top center repeat #ffdbec;
	border         : 5px solid #fff;
}

#PRESENT .ap_box .text_box
{
	
}

#PRESENT .ap_box .text_box .ap_text
{
	line-height    : 1.6;
}

#PRESENT .ap_box .text_box .ap_text strong
{
	display        : block;
	
	margin-bottom  : 25px;
	padding-bottom : 30px;
	
	color          : #f50962;
	font-size      : 160%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
	
	border-bottom  : 4px dotted #f50962;
}

#PRESENT .ap_box .text_box .btn_ap
{
	margin-top     : 40px;
}

#PRESENT .ap_box .text_box .btn_ap a
{
	display        : block;
	
	margin         : 0 auto;
	padding        : 15px 0px;
	
	width          : 630px;
	
	color          : #fff;
	font-size      : 100%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
	text-decoration: none;
	
	background     : #f50962;
	border-radius  : 100px;
}

#PRESENT .ap_box .text_box .btn_ap a:hover
{
	color          : #f50962;
	
	background     : #fff;
}

#PRESENT .ap_box .ap_illust
{
	position       : absolute;
	bottom         : 0;
	right          : 40px;
}





/* --------------------------------------- */






/*=======================================================================================================*/


#colorbox, #cboxOverlay, #cboxWrapper
{
	overflow: visible!important;
}

#cboxContent
{
	margin-top: 0px!important;

	background: #fff!important;

	border-radius  : 20px!important;
	box-shadow     : 0px 0px 15px 0px #ec598a;
	overflow: hidden;
}

#cboxLoadedContent
{
	border: none!important;
	background: #fff!important;
}

#cboxOverlay
{
	background: #fff!important;
}

#cboxClose
{
	display: none;
	position: absolute;
	top: 20px!important;
	right: 20px!important;
	background: url(/asset/img/precure_cp/close.png) no-repeat top center!important;
	background-size: contain!important;
	width: 50px!important;
	height: 50px!important;
	text-indent: -9999px;
}