@charset "utf-8";

/**
 * 三つ雲 (動かない)
 ------------------------------ */
.l-section .clouds {
	position: absolute;
	width: 333px;
	height: 48px;
}
.l-section .clouds::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/obj_cloud.svg) left bottom / 90px 24px no-repeat,
		url(../img/obj_cloud.svg) center top / 94px 24px no-repeat,
		url(../img/obj_cloud.svg) right bottom / 112px 32px no-repeat;
}
/* 白い雲 */
.l-section .clouds.-w::before {
	background-image: url(../img/obj_cloud_w.svg), url(../img/obj_cloud_w.svg), url(../img/obj_cloud_w.svg);
}
/* 濃い雲 */
.l-section .clouds.-b::before {
	background-image: url(../img/obj_cloud_b.svg), url(../img/obj_cloud_b.svg), url(../img/obj_cloud_b.svg);
}
@media (max-width: 480px) {
	.l-section .clouds {
		width: 216px;
		height: 32px;
	}
	.c-relation .clouds {
		height: 40px;
	}
	.l-section .clouds::before {
		background-size: 62px 16px, 62px 16px, 92px 24px;
	}
	.c-relation .clouds::before {
		background-position: left bottom, 40% top, right bottom;
	}
}

/**
 * 建物 (3群 > 2群 > 2群小)
 ------------------------------ */
.l-section .buliding,
.l-section .mountain,
.l-section .house,
.l-section .tower {
	position: absolute;
	bottom: 0;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}
.l-section .mountain,
.l-section .house,
.l-section .tower {
	background: center / cover no-repeat;
}

/* :::::: 建物 (3群 > 2群 > 2群小) :::::: */
.l-section .buliding {
	right: 0;
	left: 0;
	height: 112px;
	background: url(../img/obj_building.svg) left bottom / 204px 112px no-repeat,
		url(../img/obj_building.svg) 204px bottom / 204px 112px no-repeat,
		url(../img/obj_building.svg) right bottom / 204px 112px no-repeat;
}
@media (max-width: 767px) {
	.l-section .buliding {
		background: url(../img/obj_building.svg) left bottom / 204px 112px no-repeat,
			url(../img/obj_building.svg) right bottom / 204px 112px no-repeat;
	}
}
@media (max-width: 480px) {
	.l-section .buliding {
		background-size: 132px 72px, 132px 72px;
	}
}

/* :::::: 山 :::::: */
.l-section .mountain {
	left: 0;
	width: 380px;
	height: 136px;
	background-image: url(../img/obj_mountain.svg);
}
@media (min-width: 1441px) {
	.l-section .mountain {
		left: calc(50% - 720px);
	}
}
@media (max-width: 767px) {
	.l-section .mountain {
		left: -120px;
	}
}
@media (max-width: 480px) {
	.l-section .mountain {
		left: -54px;
		width: 173px;
		height: 62px;
	}
}

/* :::::: 家 :::::: */
.l-section .house {
	left: 380px;
	width: 62px;
	height: 48px;
	background-image: url(../img/obj_house.svg);
}
@media (min-width: 1441px) {
	.l-section .house {
		left: calc(50% - 340px);
	}
}
@media (max-width: 767px) {
	.l-section .house {
		left: 260px;
	}
}
@media (max-width: 480px) {
	.l-section .house {
		left: 120px;
		width: 40px;
		height: 32px;
	}
}

/* :::::: タワー :::::: */
.l-section .tower {
	right: 80px;
	width: 52px;
	height: 148px;
	background-image: url(../img/obj_tower.svg);
}
@media (min-width: 1441px) {
	.l-section .tower {
		right: calc(50% - 640px);
		left: auto;
	}
}
@media (max-width: 480px) {
	.l-section .tower {
		right: 16px;
		width: 34px;
		height: 90px;
	}
}

/**
 * 乗り物
 ------------------------------ */
.l-section .car,
.l-section .track,
.l-section .airplane,
.l-section .bicycle,
.l-section .mobility {
	position: absolute;
	bottom: 0;
	left: 0;
}
.l-section .car::before,
.l-section .track::before,
.l-section .airplane::before,
.l-section .bicycle::before,
.l-section .mobility::before  {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: inherit;
	background: center left / contain no-repeat, center right / contain no-repeat;
}
/* animation */
.l-section .car,
.l-section .track,
.l-section .airplane,
.l-section .bicycle,
.l-section .mobility {
	animation: fullLoop 20s linear infinite;
}
.l-section .airplane {
	animation-duration: 40s;
}
@keyframes fullLoop {
	from { transform: translateX(1000px); }
	to { transform: translateX(-1000px); }
}
@media (max-width: 480px) {
	.l-section .car,
	.l-section .track,
	.l-section .bicycle,
	.l-section .mobility {
		animation-duration: 10s;
	}
	.l-section .airplane {
		animation-duration: 20s;
	}
	@keyframes fullLoop {
		from { transform: translateX(300px); }
		to { transform: translateX(-300px); }
	}
}
/* for Windows */
.isWindows .l-section .car,
.isWindows .l-section .track,
.isWindows .l-section .airplane,
.isWindows .l-section .bicycle,
.isWindows .l-section .mobility {
	animation-name: fullLoop !important;
	animation-duration: 20s !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
}
.isWindows .l-section .airplane {
	animation-duration: 40s !important;
}
.isIE .l-section .car,
.isIE .l-section .track,
.isIE .l-section .airplane,
.isIE .l-section .bicycle,
.isIE .l-section .mobility {
	animation-name: fullLoop !important;
	animation-duration: 40s !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
}
.isIE .l-section .airplane {
	animation-duration: 80s !important;
}
@media all and (max-width: 480px) {
	.isWindows .l-section .car,
	.isWindows .l-section .track,
	.isWindows .l-section .bicycle,
	.isWindows .l-section .mobility {
		animation-duration: 10s !important;
	}
	.isWindows .l-section .airplane {
		animation-duration: 20s !important;
	}
	.isIE .l-section .car,
	.isIE .l-section .track,
	.isIE .l-section .airplane,
	.isIE .l-section .bicycle,
	.isIE .l-section .mobility {
		animation-name: fullLoop !important;
		animation-duration: 40s !important;
		animation-timing-function: linear !important;
		animation-iteration-count: infinite !important;
	}
	.isIE .l-section .airplane {
		animation-duration: 80s !important;
	}
}

/* :::::: 自動車 :::::: */
.l-section .car {
	width: 84px;
	height: 40px;
}
.p-03-intro .car,
.p-section-03 .car {
	width: 68px;
	height: 32px;
}
.l-section .car::before {
	width: 2084px;
	background-image: url(../img/obj_car.svg), url(../img/obj_car.svg);
}
.p-03-intro .car::before,
.p-section-03 .car::before {
	width: 2068px;
}
/* 白い自動車 */
.l-section .car.-w::before {
	background-image: url(../img/obj_car_w.svg), url(../img/obj_car_w.svg);
}
@media (max-width: 480px) {
	.l-section .car {
		width: 50px;
		height: 24px;
	}
	.l-section .car::before {
		width: 650px;
	}
}

/* :::::: トラック :::::: */
.l-section .track {
	width: 131px;
	height: 56px;
}
.p-03-intro .track,
.p-section-03 .track {
	width: 94px;
	height: 40px;
}
.l-section .track::before {
	width: 2131px;
	background-image: url(../img/obj_track.svg), url(../img/obj_track.svg);
}
.p-03-intro .track::before,
.p-section-03 .track::before {
	width: 2094px;
}
/* 白いトラック */
.l-section .track.-w::before {
	background-image: url(../img/obj_track_w.svg), url(../img/obj_track_w.svg);
}
@media (max-width: 480px) {
	.l-section .track {
		width: 75px;
		height: 32px;
	}
	.l-section .track::before {
		width: 675px;
	}
}

/* :::::: 飛行機 :::::: */
.l-section .airplane {
	bottom: 120px;
	width: 92px;
	height: 48px;
}
.l-section .airplane::before {
	width: 2092px;
	background-image: url(../img/obj_airplane.svg), url(../img/obj_airplane.svg);
}
/* 白い飛行機 */
.l-section .airplane.-w::before {
	background-image: url(../img/obj_airplane_w.svg), url(../img/obj_airplane_w.svg);
}
/* 濃い飛行機 */
.l-section .airplane.-b::before  {
	background-image: url(../img/obj_airplane_b.svg), url(../img/obj_airplane_b.svg);
}
@media (max-width: 480px) {
	.l-section .airplane {
		top: 128px;
		width: 45px;
		height: 24px;
	}
	.l-section .airplane::before {
		width: 645px;
	}
}

/* :::::: 自転車 :::::: */
.l-section .bicycle {
	width: 64px;
	height: 72px;
}
.l-section .bicycle::before {
	width: 2064px;
	background-image: url(../img/obj_bicycle.svg), url(../img/obj_bicycle.svg);
}
.l-section .bicycle.-w::before {
	background-image: url(../img/obj_bicycle_w.svg), url(../img/obj_bicycle_w.svg);
}
@media (max-width: 480px) {
	.l-section .bicycle {
		width: 36px;
		height: 40px;
	}
	.l-section .bicycle::before {
		width: 636px;
	}
}

/* :::::: モビリティ :::::: */
.l-section .mobility {
	width: 52px;
	height: 72px;
}
.l-section .mobility::before {
	width: 2052px;
	background-image: url(../img/obj_mobility.svg), url(../img/obj_mobility.svg);
}
.l-section .mobility.-w::before {
	background-image: url(../img/obj_mobility_w.svg), url(../img/obj_mobility_w.svg);
}
@media (max-width: 480px) {
	.l-section .mobility {
		width: 29px;
		height: 40px;
	}
	.l-section .mobility::before {
		width: 629px;
	}
}


/**
 * intro 01 体験を変える新しいまちづくりとは？
 -------------------------------------------------- */
.p-01-intro .clouds {
	top: 232px;
	width: 260px;
	height: 40px;
}
.p-01-intro .clouds::before {
	background-size: 62px 16px, 62px 16px, 121px 32px;
	background-position: left 60%, 38% top, right bottom;
}
.p-01-intro .airplane {
	top: 160px;
	bottom: auto;
}
@media (min-width: 481px) {
	.p-01-intro .clouds {
		left: 80px;
	}
}
@media (min-width: 1441px) {
	.p-01-intro .clouds {
		left: calc(50% - 640px);
	}
}
@media (max-width: 480px) {
	.p-01-intro .clouds {
		top: 168px;
		right: 32px;
		width: 117px;
		height: 24px;
	}
	.p-01-intro .clouds::before {
		background-size: 32px 8px, 32px 8px, 61px 16px;
		background-position: left top, 20% bottom, right top;
	}
}

/**
 * intro 02 働き方を変える新しいオフィスづくりとは？
 -------------------------------------------------- */
.p-02-intro .clouds {
	top: 152px;
	right: calc(50% - 600px);
}
.p-02-intro .airplane {
	top: 232px;
	bottom: auto;
}
.p-02-intro .buliding {
	background: url(../img/obj_building.svg) left bottom / 204px 112px no-repeat,
		url(../img/obj_building.svg) right bottom / 204px 112px no-repeat;
}
@media (max-width: 480px) {
	.p-02-intro .clouds {
		top: 160px;
		right: 24px;
		width: 120px;
		height: 26px;
	}
	.p-02-intro .clouds::before {
		background-size: 32px 8px, 32px 8px, 61px 16px;
		background-position: left top, 20% bottom, right 50%;
	}
	.p-02-intro .buliding {
		background: url(../img/obj_building.svg) right bottom / 132px 72px no-repeat;
	}
}
/* animation */
.p-02-intro .mobility {
	animation-delay: -1s;
}
.isWindows .p-02-intro .mobility {
	animation-delay: -1s !important;
}

/**
 * intro 03 暮らしを変える新しい住まいづくりとは？
 -------------------------------------------------- */
.p-03-intro .clouds {
	top: 152px;
	bottom: auto;
	right: 80px;
}
.p-03-intro .airplane {
	top: 224px;
	bottom: auto;
}
.p-03-intro .buliding {
	background: url(../img/obj_building.svg) right 204px bottom / 204px 112px no-repeat,
		url(../img/obj_building.svg) right bottom / 204px 112px no-repeat;
}
@media (min-width: 1441px) {
	.p-03-intro .clouds {
		right: calc(50% - 640px);
	}
}
@media (max-width: 767px) {
	.l-section .buliding {
		background: url(../img/obj_building.svg) right bottom / 204px 112px no-repeat;
	}
}
@media (max-width: 480px) {
	.p-03-intro .clouds {
		top: 168px;
		right: 16px;
	}
	.p-03-intro .airplane {
		top: 128px;
	}
	.l-section .buliding {
		background-size: 132px 72px;
	}
}
/* animation */
.p-03-intro .track {
	animation-delay: -18.5s;
}
.isWindows .p-03-intro .track {
	animation-delay: -18.5s !important;
}



















/**
 * MOVIE
 -------------------------------------------------- */
.p-movie .clouds {
	right: 80px;
	bottom: 112px;
}
@media (min-width: 1441px) {
	.p-movie .clouds {
		right: calc(50% - 640px);
	}
}
@media (max-width: 480px) {
	.p-movie .clouds {
		right: 16px;
		bottom: 80px;
		height: 40px;
	}
	.p-movie .clouds::before {
		background-position: left bottom, 40% top, right bottom;
	}
}
/* animation */
.p-movie .track {
	animation-delay: -17s;
}
.isWindows .p-movie .track {
	animation-delay: -17s !important;
}

/**
 * TOKYO TORCH
 -------------------------------------------------- */
@media (min-width: 481px) {
	.p-02-case .clouds {
		left: calc(200vw / 14.4);
		bottom: 112px;
	}
}
@media (min-width: 1441px) {
	.p-02-case .clouds {
		right: calc(50% - 640px);
	}
}
@media (max-width: 480px) {
	.p-02-case .clouds {
		right: 32px;
		bottom: 80px;
		height: 40px;
	}
	.p-02-case .clouds::before {
		background-position: left bottom, 40% top, right bottom;
	}
}
/* animation */
.p-02-case .mobility {
	animation-delay: -1s;
}
.isWindows .p-02-case .mobility {
	animation-delay: -1s !important;
}
.isIE .p-02-case .mobility {
	animation-delay: -3s !important;
}

/**
 * relation 01 体験を変える新しいまちづくりとは？
 -------------------------------------------------- */
.p-section-01 .clouds {
	right: 80px;
	bottom: 112px;
}
@media (min-width: 1441px) {
	.p-section-01 .clouds {
		right: calc(50% - 640px);
	}
}
@media (max-width: 480px) {
	.p-section-01 .clouds {
		right: 16px;
		bottom: 80px;
	}
}
/* animation */
.p-section-01 .track {
	animation-delay: -17s;
}
.isWindows .p-section-01 .track {
	animation-delay: -17s !important;
}

/**
 * relation 02 働き方を変える新しいオフィスづくりとは？
 -------------------------------------------------- */
.p-section-02 .clouds {
	bottom: 112px;
	left: 80px;
}
.p-section-02.-b .clouds {
	bottom: 192px;
}
.p-section-02 .buliding {
	background: url(../img/obj_building.svg) left bottom / 204px 112px no-repeat,
		url(../img/obj_building.svg) left 204px bottom / 204px 112px no-repeat,
		url(../img/obj_building.svg) right bottom / 204px 112px no-repeat;
}
@media (min-width: 1441px) {
	.p-section-02 .clouds {
		left: calc(50% - 640px);
	}
}
@media (max-width: 480px) {
	.p-section-02 .clouds {
		bottom: 80px;
		left: 16px;
	}
	.p-section-02.-b .clouds {
		bottom: 112px;
	}
}
/* animation */
.p-section-02 .bicycle {
	animation-delay: -19s;
}
.isWindows .p-section-02 .bicycle {
	animation-delay: -19s !important;
}

/**
 * relation 03 暮らしを変える新しい住まいづくりとは？
 -------------------------------------------------- */
.p-section-03 .clouds {
	bottom: 192px;
	right: 80px;
}
.p-section-03 .buliding {
	background: url(../img/obj_building.svg) right 204px bottom / 204px 112px no-repeat,
		url(../img/obj_building.svg) right bottom / 204px 112px no-repeat;
}
@media (min-width: 1441px) {
	.p-section-03 .clouds {
		right: calc(50% - 640px);
	}
}
@media (max-width: 767px) {
	.l-section .buliding {
		background: url(../img/obj_building.svg) right bottom / 204px 112px no-repeat;
	}
}
@media (max-width: 480px) {
	.p-section-03 .clouds {
		bottom: 112px;
		right: 16px;
	}
	.l-section .buliding {
		background-size: 132px 72px;
	}
}
/* animation */
.p-section-03 .track {
	animation-delay: -18.5s;
}
.isWindows .p-section-03 .track {
	animation-delay: -18.5s !important;
}