#header,
footer {
	background: #fff;
	position: relative;
	z-index: 1;
}

body {
	min-width: initial;
}

#header {
	position: fixed;
	z-index: 100;
	width: 100%;
	left: 0;
	top: 0;
}


/*
#header
///////////////////////////////////////////////////*/

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

	#header {
		height: 66px;
	}

	#header dd img {
		width: 175px;
	}

	#header p img {
		width: 35px;
	}

}

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

	#header {
		height: 52px;
	}

	.head_wrap {
		padding: 5px 0;
	}

	.header-inner {
		align-items: center;
	}

	.head_wrap dl img {
		vertical-align: middle;
	}

	#header p {
		padding: 5px 0;
		width: 9%;
		margin-right: 5%;
		display: block;
	}

	#header p img {
		width: 100%;
		display: block;
	}

}

/*
#attention
///////////////////////////////////////////////////*/

.attention {
	background: #fff;
	color: #000;
	padding-top: 2em;
}

section.attention ul li {
	font-size: 85%;
}

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

}

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

	.attention p img {
		width: 50%;
	}

	.attention {
		padding-top: 1em;
		overflow: hidden;
	}

}

/*
pagetop
///////////////////////////////////////////////////*/

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

	.pagetop {
		background: url(/lalaport/yokohama/campaign/26-27RENEWAL/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;
		height: 75px;
		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;
		bottom: 1.5em;
		width: 15%;
	}

}


/*
PC
///////////////////////////////////////////////////*/


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

	.container {
	}

	.wrapper {
		max-width: 640px;
		margin: 0 auto;
	}

}

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

	.container {
	}

	.wrapper {
		max-width: 640px;
		margin: 0 auto;
	}

}

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

	.wrapper {
		width: 100%;
	}

}

/*
sec_head
///////////////////////////////////////////////////*/

.sec_head {
}

.sec_head .secWrap {
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

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

	.sec_head {
		padding-top: 66px;
	}

}

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

	.sec_head {
		padding-top: 52px;
	}

}

/*
sec01
///////////////////////////////////////////////////*/

.bg01 {
	background-image: linear-gradient(0deg, #31ace4, #2f3692);
}

.sec03 {
	background-image: linear-gradient(0deg, #fcd23f, #e79961 75%, #e4596b);
}

.sec04 {
	background-image: linear-gradient(0deg, #8ec43e 0%, #faee00 30%, #faee00 50%, #fff311 70%, #b7d332 100%);
}

.sec05 {
	background-image: linear-gradient(180deg, #54bdb4, #389a9f 50%, #274793);
}

#fubuki {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}

.sec03 .secWrap h2 img,
.sec04 .secWrap h2 img,
.sec05 .secWrap h2 img {
	width: 85%;
	margin: 0 auto;
	display: block;
}


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

	.sec03 .secWrap,
	.sec04 .secWrap,
	.sec05 .secWrap {
		max-width: 1050px;
		margin: 0 auto;
		padding: 100px 0;
	}

	.sec03 .secWrap h2,
	.sec04 .secWrap h2,
	.sec05 .secWrap h2 {
	}

	.sec03 .secWrap p,
	.sec04 .secWrap p,
	.sec05 .secWrap p {
		margin: 65px auto 0;
	}

	.cont_wrap {
		background: #fff;
		border-radius: 50px;
		padding: 50px;
		max-width: 840px;
		margin: 0 auto;
	}


}

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

	.sec03 .secWrap,
	.sec04 .secWrap,
	.sec05 .secWrap {
		margin: 0 1.5em;
		padding: 2em 0;
	}

	.sec03 .secWrap h2,
	.sec04 .secWrap h2,
	.sec05 .secWrap h2 {
	}

	.sec03 .secWrap p,
	.sec04 .secWrap p,
	.sec05 .secWrap p {
		margin: 2em auto 0;
	}

	.cont_wrap {
		background: #fff;
		border-radius: 1.5em;
		padding: 1.5em;
		margin: 0 auto;
	}

}


/*
sec01
///////////////////////////////////////////////////*/


.sec01 .secWrap {
	background: url(/lalaport/yokohama/campaign/26-27RENEWAL/common/image/sec01_bg01.png) top center no-repeat;
	background-size: contain;
	z-index: 1;
	position: relative;
}

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

	.sec01 .secWrap {
		max-width: 1050px;
		margin: 0 auto;
		padding: 0 0 100px;
	}

	.sec01 .secWrap p {
		margin: 65px auto 0;
	}

}

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

	.sec01 .secWrap {
		margin: 0 1.5em;
		padding: 0 0 2em;
	}

	.sec01 .secWrap h2 {
	}

	.sec01 .secWrap p {
		margin: 2em auto 0;
	}

}

/*
sec02
///////////////////////////////////////////////////*/

.sec02 .secWrap {
	z-index: 1;
	position: relative;
}

.sec02 .secWrap .cont_wrap h2 img {
	width: 30%;
	display: block;
	margin: 0 auto;
}

.sec02 .secWrap .cont_wrap h3 {
	border-bottom: 2px solid #e51941;
}

.sec02 .secWrap .cont_wrap h3 img {
	width: 25%;
}

.sec02 .secWrap ul.sec02_float,
.sec02 .secWrap ul.sec02_float li {
	display: inline;
}

.sec02 .secWrap ul.sec02_float li img {
	position: absolute;
}

.sec02 .secWrap ul.sec02_list01 li {
	border-bottom: 1px solid #ccc;
}

.sec02 .secWrap ul.sec02_list01 li dl dt {
	display: block;
}

.sec02 .secWrap ul.sec02_list01 li dl dt img {
	width: 10%;
	margin-right: 1em;
}

.sec02 .secWrap ul.sec02_list01 li dl dd {
	display: block;
	font-size: 1.75vw;
}

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

	.sec02 .secWrap {
		max-width: 1050px;
		margin: 0 auto;
		padding: 0 0 100px;
	}

	.sec02 .secWrap .cont_wrap h2 {
		margin: 25px 0 50px;
	}

	.sec02 .secWrap .cont_wrap h2 img {
		margin-bottom: 15px;
	}

	.sec02 .secWrap ul.sec02_list01 {
		margin-top: 25px;
	}

	.sec02 .secWrap ul.sec02_list01 li {
		padding: 25px 0;
	}

	.sec02 .secWrap ul.sec02_float li:nth-child(1) img {
		top: -5%;
		left: 10%;
		width: 12%;
	}

	.sec02 .secWrap ul.sec02_float li:nth-child(2) img {
		top: -5%;
		right: -5%;
		width: 17%;
	}

	.sec02 .secWrap ul.sec02_list01 li dl dt span {
		display: inline-block;
		font-size: 1.75vw;
	}

}

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

	.sec02 {
		max-width: 100%;
		overflow: hidden;
		padding-top: 1.5em;
	}

	.sec02 .secWrap {
		margin: 0 1.5em;
		padding: 0 0 2em;
	}

	.sec02 .secWrap .cont_wrap h2 {
		margin: 1em 0 1.5em;
	}

	.sec02 .secWrap ul.sec02_list01 {
		margin-top: 0.5em;
	}

	.sec02 .secWrap ul.sec02_list01 li {
		padding: 1em 0;
	}


	.sec02 .secWrap ul.sec02_list01 li dl dt img {
		width: 15%;
	}

	.sec02 .secWrap ul.sec02_list01 li dl dt span {
		display: inline-block;
		font-size: 3.5vw;
	}

	.sec02 .secWrap ul.sec02_list01 li dl dd {
		display: block;
		font-size: 3.5vw;
	}

	.sec02 .secWrap ul.sec02_float li:nth-child(1) img {
		top: -2%;
		left: 8%;
		width: 15%;
	}

	.sec02 .secWrap ul.sec02_float li:nth-child(2) img {
		top: -4%;
		right: -10%;
		width: 25%;
	}



}


/*
sec03
///////////////////////////////////////////////////*/

.sec03 {
	overflow: hidden;
}

.sec03 .secWrap {
	background: url(/lalaport/yokohama/campaign/26-27RENEWAL/common/image/sec03_bg01.png) top center no-repeat;
	background-size: contain;
	position: relative;
}

.sec03 .secWrap ul {
}

.sec03 .secWrap ul li {
}

.sec03 .secWrap ul li dl {
	position: relative;
}

.sec03 .secWrap ul li:nth-child(1) {
	margin-top: 0;
}

.sec03 .secWrap ul li dl dt {
}

.sec03 .secWrap ul li dl dd {
	position: absolute;
	left: -8.5%;
	top: -4%;
	width: 20%;
}

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

	.sec03 h2 {
		margin-bottom: 70px;
	}

	.sec03 .secWrap ul li {
		margin-top: 70px;
	}

}

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

	.sec03 h2 {
		margin-bottom: 2em;
	}

	.sec03 .secWrap ul li {
		margin-top: 1.5em;
	}

}


/*
sec04
///////////////////////////////////////////////////*/

.sec04 {
	overflow: hidden;
}

.sec04 .secWrap {
	position: relative;
}

.sec04 h2 img {
	z-index: 11;
	position: relative;
}

.sec04 .sec04_float,
.sec04 .sec04_float li {
	display: inline;
}

.sec04 .sec04_float li img {
	position: absolute;
	z-index: 10;
}

.sec04 .secWrap dl {
	position: relative;
	max-width: 940px;
	margin: 0 auto;
}

.sec04 .secWrap dl dd {
	position: absolute;
	bottom: 0;
	left: 5%;
	width: 90%;
	bottom: 6%;
}

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

	.sec04 .secWrap {
		margin-top: 50px;
		padding-top: 50px;
	}

	.sec04 .secWrap h2 {
		margin-bottom: 50px;
	}

	.sec04 .sec04_float li:nth-child(1) img {
		top: 3%;
		left: 0;
		width: 27%;
	}

	.sec04 .sec04_float li:nth-child(2) img {
		top: 3%;
		right: -8%;
		width: 35%;
	}

	.sec04 .sec04_float li:nth-child(3) img {
		bottom: 2%;
		left: 0;
	}

	.sec04 .secWrap dl {
		position: relative;
		max-width: 940px;
		margin: 50px auto;
	}

	.sec04 .secWrap dl dd a img {
		transition: .3s;
		opacity: 0.5;
	}

	.sec04 .secWrap dl dd a:hover img {
		opacity: 0.5;
	}

}

.sec04 .secWrap .cont_wrap p:nth-child(1) {
	margin-top: 0;
}

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

	.sec04 .secWrap {
		margin-top: 1.5em;
		padding-top: 1.5em;
	}

	.sec04 .secWrap h2 {
		margin-bottom: 1.5em;
	}

	.sec04 .sec04_float li:nth-child(1) img {
		top: 5%;
		left: 0;
		width: 27%;
	}

	.sec04 .sec04_float li:nth-child(2) img {
		top: 6%;
		right: -12%;
		width: 35%;
	}

	.sec04 .sec04_float li:nth-child(3) img {
		bottom: 2%;
		left: 0;
		width: 16%;
	}

	.sec04 .secWrap dl {
		position: relative;
		max-width: 100%;
		margin: 1.5em 0;
	}

}


/*
sec05
///////////////////////////////////////////////////*/

.sec05 {
	overflow: hidden;
}

.sec05 p {
	width: 80%;
	margin: 0 auto;
}

.sec05 .secWrap dl {
	position: relative;
	max-width: 940px;
	margin: 0 auto;
}

.sec05 .secWrap dl dt {
	display: block;
	position: absolute;
	top: 0;
	left: 5%;
	width: 90%;
}

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

	.sec05 .secWrap {
		position: relative;
	}

	.sec05 .secWrap {
		margin-top: 50px;
		padding-top: 50px;
	}

	.sec05 .secWrap h2 {
		margin-bottom: 105px;
	}

}

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

	.sec05 {
		background-image: linear-gradient(0deg, #54bdb4, #389a9f 50%, #274793);
		background-size: 100%, 100%;
		padding: 2em 0 0.5em;
	}

	.sec05 .secWrap {
		padding-top: 0;
		position: relative;
		z-index: 1;
		padding-bottom: 0.5em;
		margin-right: 0.5em;
	}

	.sec05 .secWrap h2 {
		margin-bottom: 2.5em;
	}

	.sec05 p {
		width: 90%;
		margin: 0 auto;
	}

	.sec05 .secWrap dl {
		margin: 1.5em 0;
	}



}

/*
sec01
///////////////////////////////////////////////////*/

.attention {
	position: relative;
	z-index: 1;
}

.attention p {
	margin-bottom: 30px;
}

.attention strong {
	font-weight: 600;
}

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

	.attention .secWrap {
		max-width: 1000px;
		margin: 0 auto;
	}

}

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

	.attention .secWrap {
		margin: 1.5em;
	}

	section.attention {
		padding: 0;
	}

}


/*
navigation
///////////////////////////////////////////////////*/


.navigation {
	position: fixed;
	z-index: 110;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100vh;
	transition: .3s;
}

.navigation .overlay {
	z-index: 111;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100vh;
	transition: .3s;
}

.navigation.selected .overlay {
	background: rgba( 0, 0, 0, 0.5 );
}

.navigation.selected,
.navigation.selected .overlay {
	right: 0%;
}

.navigation div.menuWrap {
	z-index: 112;
	position: fixed;
	transition: .3s;
}

.navigation.selected div.menuWrap {
	right: 0;
}

.navigation dl {
	position: relative;
}

.navigation dl dd,
.navigation dl dd ul,
.navigation dl dd ul li {
	display: inline;
}

.navigation dl dd ul li a {
	display: block;
	position: absolute;
	top: 5%;
	height: 12%;
	left: 5%;
	width: 89%;
}

.navigation dl dd ul li a span {
	display: none;
}

.navigation dl dd ul li:nth-child(1) a {
	top: 16%;
}

.navigation dl dd ul li:nth-child(2) a {
	top: 29.3%;
}

.navigation dl dd ul li:nth-child(3) a {
	top: 43.6%;
}

.navigation dl dd ul li:nth-child(4) a {
	top: 58%;
}

.navigation p {
	position: absolute;
	bottom: 7%;
}

.navigation p.top {
	width: 20%;
	left: 41%;
}

.navigation p.navi {
	width: 15%;
	left: 79%;
}

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

	.navigation div.menuWrap {
		width: 300px;
		right: -300px;
		top: 80px;
	}

	.navigation.selected div.menuWrap {
		right: 0;
	}

	.navigation dl dd ul li a {
		transition: .3s;
	}

	.navigation dl dd ul li a:hover {
		background: rgba( 255, 255, 255, 0.5 );
	}

	.navigation p.top {
		background: url(/lalaport/yokohama/campaign/26-27RENEWAL/common/image/pagetop_o.png) no-repeat;
		background-size: cover;
	}

	.navigation p.navi img {
		transition: .3s;
	}

	.navigation p.top a img {
		transition: .3s;
	}

	.navigation p.top a:hover img {
		opacity: 0;
	}

	.navigation p.navi:hover img {
		opacity: 0.5;
	}

}

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

	.navigation .menuWrap {
		width: 80%;
		right: -80%;
		top: 55px;
	}

	.navigation.selected .menuWrap {
		right: 0;
	}


}


/*
#animate
///////////////////////////////////////////////////*/

.float01 {
	animation: fuwafuwa01 3s ease-in-out infinite alternate;
	transition: 1.5s ease-in-out;
}
 
.float02 {
	animation: fuwafuwa02 5s ease-in-out infinite alternate;
	transition: 2.5s ease-in-out;
}
 
.float03 {
	animation: fuwafuwa03 2s ease-in-out infinite alternate;
	transition: 3s ease-in-out;
}
 
@keyframes fuwafuwa01 {
	0%   { transform:translate(0, 0) rotate(-7deg); }
	50%  { transform:translate(0, -7%) rotate(0deg); }
	100% { transform:translate(0, 0) rotate(7deg); }
}
 
@keyframes fuwafuwa02 {
	0%   { transform:translate(0, 0) rotate(-7deg); }
	50%  { transform:translate(0, -10%) rotate(0deg); }
	100% { transform:translate(0, 0) rotate(7deg); }
}
 
@keyframes fuwafuwa03 {
	0%   { transform:translate(0, 0) rotate(-7deg); }
	50%  { transform:translate(0, -12%) rotate(0deg); }
	100% { transform:translate(0, 0) rotate(7deg); }
}
 

.anim img[data-animation=popup] {
	opacity: 0;
	transform: scale(0.9);
	transition: none;
}

.anim img.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); }
}