﻿
body {
	min-width: initial;
}

#header {
	z-index: 1;
	position: relative;
}

/*
page
///////////////////////////////////////////////////*/

.container {
	overflow: hidden;
}

.float_bg {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/float_bg.png) repeat-y;
	background-size: 100%;
	background-attachment: scroll;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

#fs {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg01.png) repeat-y;
	background-size: 100%;
}

#goods {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg02.png) repeat-y;
	background-size: 100%;
}

#beauty {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg03.png) repeat-y;
	background-size: 100%;
}

#kids {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg04.png) repeat-y;
	background-size: 100%;
}


#relax {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg05.png) repeat-y;
	background-size: 100%;
}

#gourmet {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg06.png) repeat-y;
	background-size: 100%;
}

.common_foot {
	background: linear-gradient(to bottom,  #fff0 0%,#ffff 90%);
}

.common_foot .attention {
	padding: 5vw 0;
	text-align: center;
}

.common_foot ul.foot_nav {
	display: flex;
	justify-content: space-around;
}

.common_foot ul.foot_nav li {
	width: 30%;
}

.side_nav {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 2;
}

.side_nav li {
	width: 75px;
	margin: 10px 0;
	text-align: right;
}


@media screen and (min-width: 769px){

	.common_foot h3,
	.common_foot ul.foot_nav {
		max-width: 640px;
		margin: 3vw auto 0;
	}


	.common_foot ul.foot_nav li:nth-child(1) {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_nav01_o.png) no-repeat;
		background-size: contain;
	}

	.common_foot ul.foot_nav li:nth-child(2) {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_nav02_o.png) no-repeat;
		background-size: contain;
	}

	.common_foot ul.foot_nav li:nth-child(3) {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_nav03_o.png) no-repeat;
		background-size: contain;
	}

	.side_nav li:nth-child(1) {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/side_nav01_o.png) no-repeat;
		background-size: contain;
		opacity: .8;
	}

	.side_nav li:nth-child(2) {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/side_nav02_o.png) no-repeat;
		background-size: contain;
		opacity: .8;
	}

	.side_nav li:nth-child(3) {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/side_nav03_o.png) no-repeat;
		background-size: contain;
	}

	.common_foot ul.foot_nav li a img,
	.side_nav li a,
	.side_nav li a img {
		transition: .3s;
	}

	.side_nav li a:hover {
		opacity: 1;
	}

	.common_foot ul.foot_nav li a:hover img,
	.side_nav li a:hover img {
		opacity: 0;
	}

}

@media screen and (max-width: 769px){

	.side_nav {
		text-align: right;
		width: 12%;
		right: 0;
	}

	.side_nav li {
		width: 100%;
	}

	.side_nav li:nth-child(1) {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/side_nav01_o.png) no-repeat;
		background-size: contain;
		opacity: .8;
	}

	.side_nav li:nth-child(2) {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/side_nav02_o.png) no-repeat;
		background-size: contain;
		opacity: .8;
	}

	.common_foot ul.foot_nav {
		position: relative;
		margin-top: 2vw;
	}

}

/*
modal
///////////////////////////////////////////////////*/

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 10;
}

.override {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	position: fixed;
}

.bg_fashion {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg01.png) repeat-y;
	background-size: 100%;
}

.bg_goods {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg02.png) repeat-y;
	background-size: 100%;
}

.bg_beauty {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg03.png) repeat-y;
	background-size: 100%;
}

.bg_kids {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg04.png) repeat-y;
	background-size: 100%;
}

.bg_relax {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg05.png) repeat-y;
	background-size: 100%;
}

.bg_gourmet {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg06.png) repeat-y;
	background-size: 100%;
}

.modal .modalWrap {
	display: none;
	max-width: 800px;
	margin: 0 auto;
	top: 50%;
	position: relative;
	transform: translateY( -50% );
	background: #fff;
}

.modal .modalWrap dd > div {
	position: relative;
}

.modal .modalWrap dd > p {
	margin-top: 1.25em;
}

.modal .modalWrap p.name {
	margin-bottom: 1.25em;
}

.modal .modalWrap p.price {
	margin-bottom: 1.25em;
	color: #C11818;
}

.modal .modalWrap p.name small,
.modal .modalWrap p.price small {
	font-size: 80%;
}

.modal .modalWrap .modal_cont dd div + p {
	border-top: 1px solid #ccc;
}

@media screen and (min-width: 769px){

	.modal .modalWrap {
		border-radius: 1.5em;
		padding: 1.5em;
	}

	.modal .modalWrap dd > img {
		width: 90%;
		margin-bottom: 3.5em;
	}

	.modal .modalWrap p.name strong,
	.modal .modalWrap p.price strong {
		font-size: 135%;
		font-weight: 600;
	}

	.modal .modalWrap .modal_cont {
		position: relative;
	}

	.modal .modalWrap .modal_cont .modal_close {
		position: absolute;
		width: 30px;
		right: 0;
		top: 0;
		transition: .3s;
	}

	.modal .modalWrap .modal_cont .modal_close:hover {
		opacity: 0.5;
	}

	.modal .modalWrap .modal_cont dl {
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.modal .modalWrap .modal_cont dl.dl_gourmet dt {
		width: 65%;
		position: relative;
	}

	.modal .modalWrap .modal_cont dl dt {
		width: 48%;
		height: 460px;
	}

	.modal .modalWrap .modal_cont dl dt img {
		margin: 0 auto;
		max-height: 460px;
		width: auto;
	}

	.modal .modalWrap .modal_cont dl dd {
		width: 48%;
		height: 460px;
	}

	.modal .modalWrap .modal_cont dl.dl_gourmet dd {
		width: 32%;
	}

	.modal .modalWrap dd > div {
		min-height: 265px;
	}

	.modal .modalWrap dl.dl_gourmet dd > div {
		min-height: 220px;
	}

	.modal .modalWrap p.float {
		position: absolute;
		right: 0;
		bottom: 1.25em;
		width: 40%;
	}

	.modal .modalWrap .modal_cont dd {
		position: relative;
	}

	.modal .modalWrap .modal_cont dd div + p {
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		padding-top: 1.25em;
	}

}


@media screen and (max-width: 769px){

	.modal .modalWrap {
		border-radius: 1em;
		padding: 1em;
		margin: 0 3em;
	}

	.modal .modalWrap dd > img {
		width: 100%;
		margin: 1em 0;
	}

	.modal .modalWrap p.name strong,
	.modal .modalWrap p.price strong {
		font-size: 120%;
		font-weight: 600;
	}

	.modal .modalWrap .modal_cont .modal_close {
		position: absolute;
		width: 12%;
		top: 0;
		right: 0;
		transform: translate( 50%, -50% );
	}

	.modal .modalWrap .modal_cont dl dt img {
		width: 70%;
		display: block;
		margin: 0 auto;
	}

	.modal .modalWrap .modal_cont dl dd {
		margin-top: 2vw;
	}

	.modal .modalWrap dd > p {
		margin-top: 1em;
	}

	.modal .modalWrap p.name {
		margin-bottom: 1em;
	}

	.modal .modalWrap p.price {
		margin-bottom: 1em;
	}

	.modal .modalWrap p.float {
		float: right;
		bottom: 1em;
		width: 40%;
	}

}

/*
shop_list
///////////////////////////////////////////////////*/

.shop_list01,
.shop_list02 {
	display: flex;
	flex-wrap: wrap;
	margin: 2vw auto 5vw;
}

.shop_list01 li {
	width: calc( 100% / 3 );
	position: relative;
	margin: 1vw 0;
}

.shop_list02 li {
	width: 50%;
	position: relative;
	margin: 0.5vw 0;
}

.shop_list01 li a:before,
.shop_list02 li a:before,
.shop_list01 li a:after,
.shop_list02 li a:after {
	position: absolute;
	display: block;
	left: 5%;
	top: 5%;
	content: "";
	width: 3vw;
	height: 3vw;
}

.shop_list01 li a:before,
.shop_list02 li a:before {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_icon02.png) no-repeat;
	background-size: contain;
}

.shop_list01 li a {
	display: block;
	margin: 0 auto;
	width: 90%;
	position: relative;
}

.shop_list02 li a {
	display: block;
	margin: 0 auto;
	width: 95%;
	position: relative;
}

@media screen and (min-width: 769px){

	.shop_list02 {
		max-width: 720px;
		margin: 2vw auto 5vw;
	}

	.shop_list01 li a img,
	.shop_list02 li a img {
		transition: .3s;
	}

	.shop_list01 li a:hover img,
	.shop_list02 li a:hover img {
		opacity: 0.6;
	}

	.shop_list01 li a:hover:before,
	.shop_list02 li a:hover:before {
		display: none;
	}

	.shop_list01 li a:hover:after,
	.shop_list02 li a:hover:after {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_icon02_o.png) no-repeat;
		background-size: contain;
	}

}


@media screen and (max-width: 769px){


}

/*
navigation
///////////////////////////////////////////////////*/


@media screen and (min-width: 769px){

	.section_wrap {
		max-width: 1000px;
		margin: 0 auto;
		width: 100%;
	}

}


@media screen and (max-width: 769px){

	.container {
		padding: 0;
	}

}

footer {
	background: #fff;
	position: relative;
}


/*
section
///////////////////////////////////////////////////*/

@media screen and (min-width: 769px){

	.section_wrap {
		max-width: 1000px;
		margin: 0 auto;
		width: 100%;
	}

}


@media screen and (max-width: 769px){

	.container {
		padding: 0;
	}

}
