﻿

.main_head {
	background-image: url(/lalaport/toyosu/campaign/onkatu2024/common/image/main_bg01.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.main_head:before,
.main_head:after {
	content: "";
	position: absolute;
	width: 50%;
	height: 100%;
	z-index: 1;
	display: block;
	top: 0;
}

.main_head:before {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/main_bg02l.png) right bottom no-repeat;
	background-size: cover;
	left: -500px;
}

.main_head:after {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/main_bg02r.png) left bottom no-repeat;
	background-size: cover;
	left: calc( 500px + 50% );
}


#index {
	background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/common_bg01.png) repeat-y;
	background-size: 100%;
}

.point01 {
	width: 150px;
	left: 14%;
	top: -10px;
	position: absolute;
	z-index: 2;
	margin: 0;
}

.main_sec01, .main_sec02, .common_foot {
	position: relative;
}

.left_shadow {
	background-color: rgba(218, 135, 130, 0.8);
	width: calc( 50% - 500px );
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.right_shadow {
	background-color: rgba(218, 135, 130, 0.8);
	height: 100%;
	width: calc( 50% - 500px );
	position: absolute;
	right: 0;
	top: 0;
}

.common_foot {
	background: none;
}

.common_foot p {
	position: relative;
	z-index: 2;
}

.common_foot:after {
	position: absolute;
	height: 100%;
	width: 100%;
	content: "";
	left: 0;
	top: 0;
	background: linear-gradient(to bottom,  #fff0 0%,#ffff 90%);
}

.main_sec01 dl {
	margin: 3vw 0;
	position: relative;
}

.main_sec01 dl dt {
}

.main_sec01 dl dd {
	position: absolute;
	width: 23.7%;
	left: 50%;
	top: 95%;
	transform: translateX( -50% );
}

.main_sec02 ul {
	width: 90%;
	margin: 0 auto;
}

.main_sec02 ul li {
	margin: 2vw 0 0;
}

@media screen and (min-width: 769px){

	.main_sec01 dl dd a img,
	.main_sec02 ul li a img {
		transition: .3s;
	}

	.main_sec01 dl dd {
		position: absolute;
		width: 23.7%;
		left: 50%;
		top: 95%;
		transform: translateX( -50% );
	}

	.main_sec01 dl dd {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/main_btn01_o.png) no-repeat;
		background-size: cover;
	}

	.main_sec01 dl dd a:hover img {
		opacity: 0;
	}

	.main_sec02 ul li a:hover img {
		opacity: 0.6;
	}

}

@media screen and (max-width: 769px){

	.point01 {
		width: 17%;
		left: -3%;
		top: -10px;
		position: absolute;
		z-index: 2;
		margin: 0;
	}

	.main_head h1 {
		width: 90%;
		margin: 0 auto;
	}

	.main_head:before {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/main_bg02l.png) right bottom no-repeat;
		background-size: cover;
		left: calc( -50% + 1.5em );
	}

	.main_head:after {
		background: url(/lalaport/toyosu/campaign/onkatu2024/common/image/main_bg02r.png) left bottom no-repeat;
		background-size: cover;
		left: calc( 100% - 1.5em );
	}

	.left_shadow {
		width: 1.5em;
		left: 0;
	}

	.right_shadow {
		width: calc( 50% - 1.5em );
		left: calc( 100% - 1.5em );
	}

	.common_foot {
		overflow: hidden;
	}

	footer {
		background: #fff;
		position: relative;
	}

	.main_sec01 dl dd {
		position: absolute;
		width: 50%;
		left: 50%;
		top: 90%;
		transform: translateX( -50% );
	}

	.common_foot .attention {
		margin-left: 1.5em;
		margin-right: 1.5em;
	}

}

