/**

 * Xmasジャック

 */



/* header */

body.template_c_fsp #header_fsp {

	background: url(../images/header-bg.png) no-repeat center top;

	background-size: cover;

}



body.template_c_fsp #header_fsp h1 a {

	top: 12px;

	width: 227px;

	height: 69px;

	margin-left: -128px;

	background: url(../images/header-logo.png) no-repeat left top;

	background-size: auto 100%;

}

body.template_c_fsp #header_fsp h1 a img {

	display: none;

}

/*

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

	body.template_c_fsp #header_fsp h1 a {

		width: 237px;

		margin-left: -126px;

		background-image: url(../images/header-logo-s.png);

	}

}

@media screen and (max-width: 749px) and (-webkit-device-pixel-ratio: 2) {

	body.template_c_fsp #header_fsp h1 a {

		width: 237px;

		margin-left: -126px;

		background-image: url(../images/header-logo-s.png);

	}

}

*/



body.template_c_fsp #header_fsp #header_navi_sidenavi a {

	width: 74px;

	height: 76px;

	border: 0;

	padding: 0;

	background: url(../images/header-menu.png) no-repeat;

	background-size: cover;

}

body.template_c_fsp #header_fsp #header_navi_sidenavi a.onTap {

	background-color: rgba( 255,255,255,0.15 );

}

body.template_c_fsp #header_fsp #header_navi_sidenavi a span {

	display: none;

}



body.template_c_fsp #header_fsp .header_right {

	border-left: 0;

}

body.template_c_fsp #header_fsp #header_navi_login a,

body.template_c_fsp #header_fsp #header_navi_favorite a,

body.template_c_fsp #header_fsp #header_navi_bag a {

	border-left: 2px solid rgba( 0,0,0,0.15 );

	border-right: 0;

}

body.template_c_fsp #header_fsp #header_navi_login a.onTap,

body.template_c_fsp #header_fsp #header_navi_favorite a.onTap,

body.template_c_fsp #header_fsp #header_navi_bag a.onTap {

	border-right: 0;

	background: rgba( 255,255,255,0.5 );

}

body.template_c_fsp #header_fsp #header_navi_login a.onTap {

	padding-left: 5px;

}

body.template_c_fsp #header_fsp #header_navi_favorite a.onTap {

	padding-left: 5px;

}

body.template_c_fsp #header_fsp #header_navi_bag a.onTap {

	padding-left: 5px;

}

body.template_c_fsp .icon_header_navi_login {

	width: 80px;

	height: 94px;

	background-image: url(../images/header-login.png);

	background-position: 0 0;

}

body.template_c_fsp .icon_header_navi_logout {

	width: 80px;

	height: 94px;

	background-image: url(../images/header-logout.png);

	background-position: 0 0;

}

body.template_c_fsp .icon_header_navi_favorite {

	width: 80px;

	height: 94px;

	background-image: url(../images/header-favorite.png);

	background-position: 0 0;

}

body.template_c_fsp .icon_header_navi_bag {

	width: 80px;

	height: 94px;

	background-image: url(../images/header-bag.png);

	background-position: 0 0;

}

#header_fsp #header_navi_login a,

#header_fsp #header_navi_logout a {

	padding: 3px 5px;

}

#header_fsp #header_navi_favorite a {

	padding: 3px 5px;

}

#header_fsp #header_navi_bag a {

	padding: 3px 5px;

}



body.template_c_fsp .wide_banners_container_fsp {

	background: #e5e6e7 url(../images/body-bg-1.png) repeat-y center top;

	background-size: 100% auto;

}

body.template_c_fsp .half_banners_container_fsp {

	background: #e5e6e7 url(../images/body-bg-2.png) repeat-y center top;

	background-size: 100% auto;

}

body.template_c_fsp #recommender_sp111 {

	background: #e5e6e7 url(../images/body-bg-1.png) repeat-y center top;

	background-size: 100% auto;

}

body.template_c_fsp #footer_service_fsp {

	background: #e5e6e7;

}

body.template_c_fsp #footer_sns_fsp {

	background: #e5e6e7;

}



#footer_sns_fsp {

	position: relative;

	padding-bottom: 195px;

	overflow: hidden;

}

#footer_sns_fsp:after {

	position: absolute;

	left: 50%;

	bottom: 40px;

	width: 306px;

	height: 164px;

	margin: 0 0 0 -153px;

	background: url(../images/footer-bg.png) no-repeat center top;

	content: "";

}



/* start */

.merry-xmas-start {

	position: fixed;

	right: 16px;

	bottom: 16px;

	z-index: 9996;

	/*

	width: 334px;

	height: 426px;

	*/

	width: 267px;

	height: 341px;

	background: url(../images/start.png) no-repeat;

	background-size: 100% 100%;

	cursor: pointer;

	transition: opacity .5s linear;

}

.merry-xmas-start-today {

	background-image: url(../images/start-today.png);

}

body.template_c_fsp .merry-xmas-start {

	right: calc( 16vw * 100 / 750 );

	bottom: calc( 16vw * 100 / 750 );

	width: calc( 334vw * 100 / 750 );

	height: calc( 426vw * 100 / 750 );

	background-size: 100% 100%;

}

body.template_c_fsp.ua-android .merry-xmas-start {

	right: calc( 16vw * 2 * 100 / 750 );

	bottom: calc( 16vw * 2 * 100 / 750 );

	width: calc( 334vw * 2 * 100 / 750 );

	height: calc( 426vw * 2 * 100 / 750 );

}

body.template_c_fsp .merry-xmas-start {

}

body.merry-xmas-visible .merry-xmas-start {

	opacity: 0;

	pointer-events: none;

}



.merry-xmas-start-pop {

	position: absolute;

	left: calc( 186% * 100 / 334 );

	top: calc( -94% * 100 / 426 );

	width: calc( 161% * 100 / 334 );

	height: calc( 186% * 100 / 426 );

	background-repeat: no-repeat;

	background-position: center center;

	background-size: 100% 100%;

}

.merry-xmas-start-pop-0 {

	left: calc( 154% * 100 / 334 );

	top: calc( -152% * 100 / 426 );

	width: calc( 193% * 100 / 334 );

	height: calc( 223% * 100 / 426 );

	background-image: url(../images/start-0.png);

}

.merry-xmas-start-pop-1 {

	background-image: url(../images/start-1.png);

}

.merry-xmas-start-pop-2 {

	background-image: url(../images/start-2.png);

}

.merry-xmas-start-pop-3 {

	background-image: url(../images/start-3.png);

}

.merry-xmas-start-pop-4 {

	background-image: url(../images/start-4.png);

}

.merry-xmas-start-pop-5 {

	background-image: url(../images/start-5.png);

}

.merry-xmas-start-pop-6 {

	background-image: url(../images/start-6.png);

}

.merry-xmas-start-pop-7 {

	background-image: url(../images/start-7.png);

}

.merry-xmas-start-pop-8 {

	background-image: url(../images/start-8.png);

}

.merry-xmas-start-pop-9 {

	background-image: url(../images/start-9.png);

}

.merry-xmas-start-pop-10 {

	background-image: url(../images/start-10.png);

}

.merry-xmas-start-pop-11 {

	background-image: url(../images/start-11.png);

}

.merry-xmas-start-pop-12 {

	background-image: url(../images/start-12.png);

}

.merry-xmas-start-pop-13 {

	background-image: url(../images/start-13.png);

}

.merry-xmas-start-pop-14 {

	background-image: url(../images/start-14.png);

}

.merry-xmas-start-pop-15 {

	background-image: url(../images/start-15.png);

}



/* overlay */

.merry-xmas-overlay {

	position: fixed;

	left: 0;

	top: 0;

	z-index: 9997;

	width: 100%;

	height: 100%;

	background-color: rgba(0,0,0,0.5);

	opacity: 0;

	pointer-events: none;

}

body.merry-xmas-visible .merry-xmas-overlay {

	opacity: 1;

	pointer-events: auto;

	transition: opacity .3s linear;

}

body.merry-xmas-end .merry-xmas-overlay {

	opacity: 0;

	pointer-events: none;

}



/* modal */

.merry-xmas-modal {

	position: absolute;

	left: 50%;

	top: 0px;

	z-index: 9998;

	/*

	width: 690px;

	height: 1030px;

	*/

	width: 483px;

	height: 721px;

	margin-top: 88px;

	margin-bottom: 88px;

	transform: translateX( -50% );

	background: url(../images/modal-bg.png) no-repeat center center;

	background-size: 100% 100%;

	opacity: 0;

	pointer-events: none;

}

body.template_c_fsp .merry-xmas-modal {

	width: calc( 690vw * 100 / 750 );

	height: calc( 1030vw * 100 / 750 );

	margin-top: calc( 38vw * 100 / 750 );

	margin-bottom: calc( 38vw * 100 / 750 );

}

body.template_c_fsp.ua-android .merry-xmas-modal {

	width: calc( 690vw * 2 * 100 / 750 );

	height: calc( 1030vw * 2 * 100 / 750 );

	margin-top: calc( 38vw * 2 * 100 / 750 );

	margin-bottom: calc( 38vw * 2 * 100 / 750 );

}

body.merry-xmas-visible .merry-xmas-modal {

	opacity: 1;

	pointer-events: auto;

	transition: opacity .3s linear;

}

body.merry-xmas-end .merry-xmas-modal {

	opacity: 0;

	pointer-events: none;

}



/* calendar */

.merry-xmas-modal-calendar {

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

}

.merry-xmas-modal-calendar-main {

	position: absolute;

	left: calc( 57% * 100 / 690 );

	top: calc( 123% * 100 / 1030 );

	width: calc( 576% * 100 / 690 );

	height: calc( 659% * 100 / 1030 );

	background: url(../images/modal-calendar.png) no-repeat;

	background-size: 100% 100%;

	cursor: pointer;

}

.merry-xmas-modal-calendar-pop-1 {

	position: absolute;

	left: calc( 66% * 100 / 690 );

	top: calc( 233% * 100 / 1030 );

	width: calc( 130% * 100 / 690 );

	height: calc( 170% * 100 / 1030 );

	background: url(../images/modal-calendar-pop-1.png) no-repeat;

	background-size: 100% 100%;

}

.merry-xmas-modal-calendar-pop-2 {

	position: absolute;

	left: calc( 482% * 100 / 690 );

	top: calc( 233% * 100 / 1030 );

	width: calc( 188% * 100 / 690 );

	height: calc( 170% * 100 / 1030 );

	background: url(../images/modal-calendar-pop-2.png) no-repeat;

	background-size: 100% 100%;

}

.merry-xmas-modal-calendar-txt {

	position: absolute;

	left: calc( 122% * 100 / 690 );

	top: calc( 806% * 100 / 1030 );

	width: calc( 444% * 100 / 690 );

	height: calc( 124% * 100 / 1030 );

	background: url(../images/modal-calendar-txt.png) no-repeat;

	background-size: 100% 100%;

}



body.merry-xmas-item-visible .merry-xmas-modal-calendar {

	transition: opacity .4s linear;

	opacity: 0;

	pointer-events: none;

}



/* item */

.merry-xmas-modal-item {

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	opacity: 0;

	pointer-events: none;

}

.merry-xmas-modal-today .merry-xmas-modal-item {

	background: url(../images/start-today.png) no-repeat;

	background-size: 100% 100%;

}

.merry-xmas-modal-item-detail {

	position: absolute;

	left: calc( 30% * 100 / 690 );

	top: calc( 138% * 100 / 1030 );

	width: calc( 630% * 100 / 690 );

	height: calc( 715% * 100 / 1030 );

	background-repeat: no-repeat;

	background-position: center center;

	background-size: 100% 100%;

}

.merry-xmas-modal-today .merry-xmas-modal-item-detail {

	left: calc( 31% * 100 / 690 );

	top: calc( 35% * 100 / 1030 );

	width: calc( 631% * 100 / 690 );

	height: calc( 825% * 100 / 1030 );

}

.merry-xmas-modal-item-detail-0 {

	background-image: url(../images/modal-item-0.png);

}

.merry-xmas-modal-item-detail-1 {

	background-image: url(../images/modal-item-1.png);

}

.merry-xmas-modal-item-detail-2 {

	background-image: url(../images/modal-item-2.png);

}

.merry-xmas-modal-item-detail-3 {

	background-image: url(../images/modal-item-3.png);

}

.merry-xmas-modal-item-detail-4 {

	background-image: url(../images/modal-item-4.png);

}

.merry-xmas-modal-item-detail-5 {

	background-image: url(../images/modal-item-5.png);

}

.merry-xmas-modal-item-detail-6 {

	background-image: url(../images/modal-item-6.png);

}

.merry-xmas-modal-item-detail-7 {

	background-image: url(../images/modal-item-7.png);

}

.merry-xmas-modal-item-detail-8 {

	background-image: url(../images/modal-item-8.png);

}

.merry-xmas-modal-item-detail-9 {

	background-image: url(../images/modal-item-9.png);

}

.merry-xmas-modal-item-detail-10 {

	background-image: url(../images/modal-item-10.png);

}

.merry-xmas-modal-item-detail-11 {

	background-image: url(../images/modal-item-11.png);

}

.merry-xmas-modal-item-detail-12 {

	background-image: url(../images/modal-item-12.png);

}

.merry-xmas-modal-item-detail-13 {

	background-image: url(../images/modal-item-13.png);

}

.merry-xmas-modal-item-detail-14 {

	background-image: url(../images/modal-item-14.png);

}

.merry-xmas-modal-item-detail-15 {

	background-image: url(../images/modal-item-15.png);

}

.merry-xmas-modal-item-btn {

	position: absolute;

	left: calc( 190% * 100 / 690 );

	top: calc( 885% * 100 / 1030 );

	display: block;

	width: calc( 310% * 100 / 690 );

	height: calc( 90% * 100 / 1030 );

	background: url(../images/modal-item-btn.png) no-repeat;

	background-size: 100% 100%;

	outline: 0;

}



@keyframes blink {

	0% { background-image: url(../images/modal-item-today-blink-1.png); }

	50% { background-image: url(../images/modal-item-today-blink-2.png); }

	100% { background-image: url(../images/modal-item-today-blink-1.png); }

}

.merry-xmas-modal-today .merry-xmas-modal-item:after {

	position: absolute;

	left: calc( 31% * 100 / 690 );

	top: calc( 35% * 100 / 1030 );

	width: calc( 658% * 100 / 690 );

	height: calc( 371% * 100 / 1030 );

	background: url(../images/modal-item-today-blink-1.png) no-repeat;

	background-size: 100% 100%;

	animation: blink ease-out .6s infinite;

	content: '';

}



.merry-xmas-modal-item-detail {

	transform: translateY( 2% );

}



body.merry-xmas-item-visible .merry-xmas-modal-today .merry-xmas-modal-item {

	background: url(../images/modal-item-today.png) no-repeat;

	background-size: 100% 100%;

}

body.merry-xmas-item-visible .merry-xmas-modal-item-detail {

	transition: transform .8s linear;

	transform: translateY( 0% );

}

body.merry-xmas-item-visible .merry-xmas-modal-item {

	transition: opacity .8s linear;

	opacity: 1;

	pointer-events: auto;

}





/* close */

.merry-xmas-modal-close {

	position: absolute;

	/*

	right: -12px;

	top: -12px;

	width: 28px;

	height: 28px;

	*/

	right: -16px;

	top: -19px;

	width: 58px;

	height: 58px;

	background: url(../images/modal-close.png) no-repeat center center;

	background-size: 100% 100%;

	cursor: pointer;

}

body.template_c_fsp .merry-xmas-modal-close { /* SP */

	right: calc( -22vw * 100 / 750 );

	top: calc( -22vw * 100 / 750 );

	width: calc( 42vw * 2 * 100 / 750 );

	height: calc( 42vw * 2 * 100 / 750 );

}