﻿
body {
	min-width: initial;
}

/*
#header
///////////////////////////////////////////////////*/

#header {
	background: #fff;
}

@media screen and (min-width: 769px){

	#header dd img {
		width: 179px;
	}

}

@media screen and (max-width: 769px){

}

/*
#attention
///////////////////////////////////////////////////*/

.attention {
	background: #fff;
	color: #000;
	padding-top: 2em;
}

@media screen and (min-width: 769px){

	#attention .secWrap {
		margin-bottom: 0;
		padding-bottom: 0;
	}

}

@media screen and (max-width: 769px) {

	section.attention {
		padding: 1em;
		overflow: hidden;
		margin: 0
	}

}

/*
pagetop
///////////////////////////////////////////////////*/

footer {
	background: #fff;
}

@media screen and (min-width: 769px){

	.pagetop {
		background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/pagetop_o.png) top no-repeat;
		background-size: contain;
		position: fixed;
		line-height: 1.0;
		right: 1.5em;
		bottom: 1.5em;
		width: 75px;
		z-index: 2000;
		margin: 0;
	}

	.pagetop a img {
		opacity: 1;
		transition: .3s;
	}

	.pagetop a:hover img {
		opacity: 0;
	}

}

@media screen and (max-width: 769px){

	.pagetop {
		position: fixed;
		line-height: 1.0;
		right: 1.5em;
		z-index: 2000;
		bottom: 1.5em;
		width: 15%;
	}

}

section.attention ul {
	color: #1f1f1f;
}

section.attention .secWrap ul {
	padding: 0.5em 1em;
}

section.attention .secWrap ul li {
	text-indent: -1em;
	padding-left: 1em;
	display: block;
}

section.attention .secWrap ul li a {
	color: #1f1f1f;
	font-weight: 800;
}

@media screen and (min-width: 769px){

	section.attention ul li {
		display: inline;
	}

}

@media screen and (max-width: 769px){

	section.attention {
		margin: 0;
	}

	section.attention ul {
		padding: 0 1.5em;
		text-align: left;
		font-size: 0.8rem;
	}

}


/*
main
///////////////////////////////////////////////////*/

body {
}

.container:before,
.container:after {
	content: "";
	display: block;
	height: 100vh;
	width: 50%;
	position: fixed;
	z-index: 1;
	top: 0;
}

.container:before {
	background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/common_bg01l.png) right repeat-y;
	left: -25%;
}

.container:after {
	background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/common_bg01r.png) left repeat-y;
	right: -25%;
}

@media screen and (max-width: 769px){

	.container:before,
	.container:after {
		background-size: contain;
	}

}

.secWrap {
	position: relative;
	z-index: 2;
}

.sec02 ul,
.sec03 ul,
.sec04 ul,
.sec05 ul {
	position: relative;
	z-index: 2;
}

.sec02 ul li span,
.sec03 ul li span,
.sec04 ul li span {
	display: block;
}

.sec02 ul li img._bg,
.sec03 ul li img._bg,
.sec04 ul li img._bg {
	mix-blend-mode: multiply;
	vertical-align: top;
}

@media screen and (min-width: 769px){

	.sec02 ul li a img,
	.sec03 ul li a img,
	.sec04 ul li a img,
	.sec05 ul li a img {
		transition: .3s;
	}
	.sec02 ul li a:hover img,
	.sec03 ul li a:hover img,
	.sec04 ul li a:hover img,
	.sec05 ul li a:hover img {
		opacity: 0.5;
	}

}

@media screen and (max-width: 769px){

	.sec02 ul li,
	.sec03 ul li,
	.sec04 ul li {
		margin-top: 1em;
	}



}


/*
sec_head
///////////////////////////////////////////////////*/

.sec_head {
	background: #e5e4e3 url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/visual_bg01.png) top center no-repeat;
}

.sec_head h1 {
	position: relative;
}

.sec_head h1 img {
	animation: title 10s ease-in-out infinite;
}

@keyframes title {
	  0% { transform: translateY( 0% ); }
	 40% { transform: translateY( 5% ); }
	 80% { transform: translateY( -5% ); }
	100% { transform: translateY( 0% ); }
}

@media screen and (min-width: 769px){

	.sec_head {
		background-size: 1100px;
	}

	.sec_head .secWrap {
		padding: 100px 0 50px;
	}

}

@media screen and (max-width: 769px){

	.sec_head {
		background-size: 110%;
	}

	.sec_head .secWrap {
		padding: 4em 0 2em;
	}

}

/*
sec01
///////////////////////////////////////////////////*/

.sec01 {
	background: #fff url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/head_bg01.png) top center repeat-x;
}

.sec01 ul.nav01 {
}

.sec01 ul.nav02 {
	display: flex;
	justify-content: space-between;
}

.sec01 ul.nav02 li {
	width: 30%;
}


@media screen and (min-width: 769px){

	.sec01 {
		padding: 50px 0;
	}

	.sec01 p {
		padding: 50px 0;
	}

	.sec01 ul.nav01 li {
		width: 70%;
		margin: 50px auto;
	}

	.sec01 ul.nav01 li:nth-child(1) {
		background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/nav01_o.png) no-repeat;
		background-size: contain;
	}

	.sec01 ul.nav01 li:nth-child(2) {
		background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/nav02_o.png) no-repeat;
		background-size: contain;
	}

	.sec01 ul.nav02 li:nth-child(1) {
		background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/nav03_o.png) no-repeat;
		background-size: contain;
	}

	.sec01 ul.nav02 li:nth-child(2) {
		background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/nav04_o.png) no-repeat;
		background-size: contain;
	}

	.sec01 ul.nav02 li:nth-child(3) {
		background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/nav05_o.png) no-repeat;
		background-size: contain;
	}

	.sec01 ul.nav01 li a img,
	.sec01 ul.nav02 li a img {
		transition: .3s;
	}

	.sec01 ul.nav01 li a:hover img,
	.sec01 ul.nav02 li a:hover img {
		opacity: 0;
	}


}

@media screen and (max-width: 769px){

	.sec01 {
		padding: 1.5em;
		background-size: 8%;
	}

	.sec01 p {
		padding: 1.5em 0;
	}

	.sec01 ul.nav01 li {
		width: 70%;
		margin: 1.5em auto;
	}

}

/*
sec02
///////////////////////////////////////////////////*/

.sec02 {
	background: #efa59a url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/sec01_bg01.png) top center repeat-x;
	overflow: hidden;
}

@media screen and (min-width: 769px){

	.sec02 {
		padding: 50px 0 0;
	}

	.sec02 h2 {
		padding: 50px 0 30px;
	}

	.sec02 ul {
		margin: 30px auto;
	}

	.sec02 ul li {
		margin: 50px 0;
	}


}

@media screen and (max-width: 769px){

	.sec02 {
		padding: 2.5em 1.5em 1.5em;
		background-size: 8%;
	}

	.sec02 ul {
		padding: 1.5em 0 0;
	}

}

/*
sec03
///////////////////////////////////////////////////*/

.sec03 {
	background: #aac7d8 url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/sec02_bg01.png) top center repeat-x;
	overflow: hidden;
}

@media screen and (min-width: 769px){

	.sec03 {
		padding: 50px 0 0;
	}

	.sec03 h2 {
		padding: 50px 0 30px;
	}

	.sec03 ul {
		margin: 30px auto;
	}

	.sec03 ul li {
		margin: 50px 0;
	}


}

@media screen and (max-width: 769px){

	.sec03 {
		padding: 2.5em 1.5em 1.5em;
		background-size: 8%;
	}

	.sec03 ul {
		padding: 1.5em 0 0;
	}

}
/*
sec04
///////////////////////////////////////////////////*/

.sec04 {
	background: #70b3b4 url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/sec03_bg01.png) top center repeat-x;
	overflow: hidden;
}

@media screen and (min-width: 769px){

	.sec04 {
		padding: 50px 0 0;
	}

	.sec04 h2 {
		padding: 50px 0 30px;
	}

	.sec04 ul {
		margin: 30px auto;
	}

	.sec04 ul li {
		margin: 50px 0;
	}

}

@media screen and (max-width: 769px){

	.sec04 {
		padding: 2.5em 1.5em 1.5em;
		background-size: 8%;
	}

	.sec04 ul {
		padding: 1.5em 0 0;
	}

}

/*
sec05
///////////////////////////////////////////////////*/

.sec05 {
	background: #e5e4e3 url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/sec04_bg01.png) top center repeat-x;
	overflow: hidden;
}

@media screen and (min-width: 769px){

	.sec05 {
		padding: 50px 0;
	}

	.sec05 ul {
		margin: 30px auto;
	}

	.sec05 ul li {
		margin: 50px 0;
	}


}

@media screen and (max-width: 769px){

	.sec05 {
		padding: 2.5em 1.5em 1.5em;
		background-size: 8%;
	}

	.sec05 ul li {
		padding: 1.5em 0 0;
	}

}

/*
modal
///////////////////////////////////////////////////*/

.modal {
	position: fixed;
	z-index: 1010;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: none;
	opacity: 0;
	transition: .3s;
}

.modal.activer {
	display: block;
	opacity: 1;
}

.modal .over {
	background: rgba( 0, 0, 0, 0.7 );
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	transition: .3s;
}

.modal .modal_area {
	position: relative;
	top: 50%;
	transform: translateY( 50% );
	transition:.5s;
}

.modal .modal_area .modal_close {
	position: absolute;
	top: 6.5%;
	right: 0;
	width: 25%;
	max-width: 450px;
	text-align: right;
	height: 5em;
}


@media screen and (min-width: 769px){

	.modal .modal_area {
		position: relative;
		max-width: 900px;
		margin: 0 auto;
		top: 50%;
		transform: translateY( -50% );
	}

	.modal .modal_area .modalWrap img {
		height: 85vh;
		display: block;
		width: auto;
		margin: 0 auto;
		cursor: pointer;
	}

	.modal .modal_area .modal_close img {
		cursor: pointer;
		display: block;
		margin-left: 62%;
		transform: translateX(-50%);
	}

}


@media screen and (max-width: 769px){

	.modal .modal_area {
		position: relative;
		margin: 0 2em;
		top: 50%;
		transform: translateY( -50% );
	}

	.modal .modal_area .modalWrap {
		padding: 1.5em;
		box-sizing: border-box;
	}

	.modal .modal_area .modal_close {
		top: 12%;
	}

	.modal .modal_area .modal_close img {
		width: 12.5%;
		display: block;
		margin-left: 70%;
		transform: translateX(-50%);
	}

}


/*
animation
///////////////////////////////////////////////////*/

li.popup {
	position: relative;
}

.popup p {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.popup p a {
	display: block;
}

.popup p a[data-animation=popup] {
	opacity: 0;
	transform: scale(0.9);
	transition: none;
}

.popup p a.is-animated {
	animation: popup 0.8s ease-in-out 0s 1 normal forwards running;
}

@keyframes popup {
	  0% { opacity: 0; transform: scale(0.7); }
	 40% { opacity: 1; transform: scale(1.1); }
	 60% { transform: scale(1); }
	 80% { transform: scale(1.05); }
	100% { opacity: 1; transform: scale(1); }
}


.slow,
.fade {
	position: relative;
}

.slow li,
.fade img {
	opacity: 0;
	transform: translateY( 100px );
	transition: none;
}

.slow li.is-animated,
.fade img.is-animated {
	animation: fade 1s ease-in-out 0s 1 normal forwards running;
}

@keyframes fade {
	  0% { opacity: 0; transform: translateY( 100px ); }
	100% { opacity: 1; transform: translateY( 0px ); }
}

/*
float_nav
///////////////////////////////////////////////////*/

nav.float_nav {
	box-shadow: 0 0 15px rgba( 150, 150, 150, 0.5 );
	background: rgba( 255, 255, 255, 0.7 );
	position: fixed;
	bottom: -500px;
	left: 0;
	width: 100%;
	transition: .5s;
	z-index: 100;
	padding: 20px 0;
}

nav.float_nav.active {
	bottom: 0;
}

nav.float_nav div {
	max-width: 1000px;
	margin: 0 auto;
}

nav.float_nav div ul {
	display: flex;
	justify-content: space-between;

}

nav.float_nav div ul li {
	width: 30%;
}

.pagetop {
	transition: .5s;
}


@media screen and (min-width: 769px){

	nav.float_nav div ul li:nth-child(1) {
		background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/nav03_o.png) no-repeat;
		background-size: contain;
	}

	nav.float_nav div ul li:nth-child(2) {
		background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/nav04_o.png) no-repeat;
		background-size: contain;
	}

	nav.float_nav div ul li:nth-child(3) {
		background: url(/lalaport/shinmisato/campaign/winterdays-202512-01/common/image/nav05_o.png) no-repeat;
		background-size: contain;
	}

	nav.float_nav div ul li a img {
		transition: .3s;
	}

	nav.float_nav div ul li a:hover img {
		opacity: 0;
	}

	footer {
		padding-bottom: 200px;
	}

}

@media screen and (max-width: 769px){

	body {
		overflow-x: hidden;
	}

	.container {
		width: 100%;
		overflow-x: hidden;
	}

	.container .snow {
		width: 100%;
		overflow-x: hidden;
	}

	nav.float_nav div ul {
		padding: 0 1.5em;
	}

	.pagetop.fixed {
		bottom: 6em;
	}

	footer {
		padding-bottom: 100px;
	}

}
