@charset "utf-8";

/**
 * font-size
 ------------------------------ */
.l-visual .copy { font-size: 32px; }
.p-concept .title { font-size: 48px; }
.c-panel .title { font-size: 32px; }
.c-panel .title .n { font-size: 64px; }

@media (max-width: 767px) {
	.l-visual .copy { font-size: 30px; }
}
@media (max-width: 480px) {
	.l-visual .copy { font-size: 24px; }
	.p-concept .title { font-size: 32px; }
	.c-panel .title { font-size: 24px; }
	.c-panel .title .n { font-size: 48px; }
	.c-panel .lead { font-size: 14px; }
}
@media (max-width: 374px) {
	.l-visual .copy { font-size: 20px; }
	.p-concept .lead { font-size: 14px; }
	.c-panel .title { font-size: 22px; }
	.c-panel .title .n { font-size: 40px; }
}

/**
 * visual
 -------------------------------------------------- */
.l-visual {
	z-index: 1;
	position: relative;
	max-width: 1440px;
	height: 100vh;
	min-height: 640px;
	margin: 0 auto;
	padding: 136px 80px 0;
}
.l-visual::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	right: calc(50% - 50vw);
	left: calc(50% - 50vw);
	height: 100%;
	background: linear-gradient(283.15deg, #d3edfb, #e7f5fd);
}
.l-visual .copy {
	z-index: 1;
	position: relative;
	color: #2fa6d1;
	font-weight: 500;
	white-space: nowrap;
}
.l-visual .copy .inline {
	padding: 0 8px 4px;
	background: #fff;
}
.l-visual .copy .h {
	display: inline-block;
	width: .5em;
}
.a-scroll {
	z-index: 1;
	position: absolute;
	bottom: 0;
	left: 50%;
	padding-bottom: 56px;
	color: #2fa6d1;
	line-height: 1;
	text-align: center;
	transform: translateX(-50%);
}
.a-scroll .bar {
	position: absolute;
	bottom: 0;
	left: calc(50% - 1px);
	height: 40px;
	border-left: 2px solid currentcolor;
}
@media (max-width: 767px) {
	.l-visual {
		min-height: 600px;
		padding: 136px 48px 0;
	}
	.l-visual::before {
		background: linear-gradient(8.12deg, #d3edfb 12.48%, #e7f5fd 87.52%);
	}
}
@media (max-width: 480px) {
	.l-visual {
		padding: 136px 32px 0;
		padding-top: 18vh;
	}
	.a-scroll {
		padding-bottom: 88px;
	}
	.a-scroll .bar {
		height: 72px;
	}
}

/**
 * opening
 ------------------------------ */
.l-visual .copy .inline {
	display: inline-block;
	position: relative;
	line-height: 1.4;
	transform-origin: left center;
}
.l-visual .copy .inline::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #2fa6d1;
	transform-origin: right center;
}
.l-visual:not(.is-active) .copy .inline,
.l-visual.is-active .copy .inline::after {
	transform: scaleX(0);
}
.l-visual.is-anim .copy .inline,
.l-visual.is-anim .copy .inline::after {
	transition: transform .6s cubic-bezier(0.33, 1, 0.68, 1);
	will-change: transform;
}
.l-visual.is-anim .copy .inline::after {
	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.l-visual:not(.is-active) .a-scroll {
	transform: translateY(100%) translateX(-50%);
}
.l-visual:not(.is-active) .a-scroll .bar {
	transform: scaleY(0);
}
.l-visual.is-anim .a-scroll,
.l-visual.is-anim .a-scroll .bar {
	transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
}
.l-visual .a-scroll .bar {
	transform-origin: center top;
}
.l-visual.is-anim .a-scroll .bar {
	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.l-visual .canvas .overlay {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transform-origin: right center;
}
.l-visual .canvas.is-active .overlay {
	transform: scaleX(0);
}
.l-visual.is-anim .canvas .overlay {
	transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}

/* timing */
.l-visual.is-anim .copy .inline.l2 { transition-delay: .2s; }
.l-visual.is-anim .copy .inline.l3 { transition-delay: .3s; }
.l-visual.is-anim .copy .inline.l1::after { transition-delay: .6s; }
.l-visual.is-anim .copy .inline.l2::after { transition-delay: .8s; }
.l-visual.is-anim .copy .inline.l3::after { transition-delay: .9s; }

.l-visual.is-anim .a-scroll {  transition-delay: 1.2s; }
.l-visual.is-anim .a-scroll .bar { transition-delay: 1.6s; }

.l-visual.is-anim .copy .inline,
.l-visual.is-anim .copy .inline::after,
.l-visual.is-anim .a-scroll,
.l-visual.is-anim .a-scroll .bar,
.l-visual.is-anim .canvas .overlay {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.isWindows .l-visual .copy .inline,
.isWindows .l-visual .copy .inline::after,
.isWindows .l-visual .a-scroll,
.isWindows .l-visual .a-scroll .bar {
	transition-duration: .6s !important;
}
.isWindows .l-visual .canvas .overlay {
	transition-duration: 1s !important;
}
@media all and (-ms-high-contrast: none) {
	.l-visual .copy .inline::after { width: 101%; }
}

/**
 * visual canvas
 ------------------------------ */
.l-visual .canvas {
	position: absolute;
	top: 0;
	right: calc(50% - 50vw);
	left: calc(50% - 50vw);
	height: 100%;
}
.l-visual .canvas::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 112px;
	background: #fff;
}
@media (max-width: 767px) {
	.l-visual .canvas::before {
		height: 128px;
	}
}
/* 街 */
.l-visual .city {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	max-width: 1440px;
	height: 368px;
	margin: 0 auto;
}
.l-visual .city::before {
	content: "";
	position: absolute;
	bottom: 112px;
	left: 0;
	width: 100%;
	height: 256px;
	background: url(../img/obj_city.svg) center right / cover no-repeat;
}
@media (max-width: 767px) {
	.l-visual .city::before {
		bottom: 128px;
		height: 240px;
		background: url(../img/obj_city_mb.svg) bottom center / 750px 240px no-repeat;
	}
}
@media (max-width: 480px) {
	.l-visual .city,
	.l-visual .city::before {
		height: 120px;
	}
	.l-visual .city::before {
		background-size: 375px 120px;
	}
}
/* 人々 */
.l-visual .people {
	position: absolute;
	bottom: 112px;
	right: 0;
	left: 0;
	width: 100%;
	max-width: 1440px;
	height: 72px;
	margin: 0 auto;
}
.l-visual .people::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	background: url(../img/obj_people.svg) center right / cover no-repeat;
}
@media (max-width: 767px) {
	.l-visual .people {
		bottom: 128px;
		height: 80px;
	}
	.l-visual .people::before {
		background: url(../img/obj_people_mb.svg) bottom center / 750px 80px no-repeat;
	}
}
@media (max-width: 480px) {
	.l-visual .people,
	.l-visual .people::before {
		height: 40px;
	}
	.l-visual .people::before {
		background-size: 375px 40px;
	}
}
/* 雲 */
.l-visual .clouds {
	position: absolute;
	bottom: 376px;
	left: 0;
	width: 100%;
	height: 88px;
}
.l-visual .clouds::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% + 327px);
	height: inherit;
	background: url(../img/obj_clouds.svg) center / contain repeat-x;
}
@media (max-width: 480px) {
	.l-visual .clouds {
		bottom: 256px;
		height: 44px;
	}
	.l-visual .clouds::before {
		width: calc(100% + 165px);
	}
}
/* 飛行機 */
.l-visual .airplane {
	position: absolute;
	bottom: 568px;
	left: 0;
	width: 92px;
	height: 48px;
}
.l-visual .airplane::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2092px;
	height: inherit;
	background: url(../img/obj_airplane_w.svg) center left / contain no-repeat,
		url(../img/obj_airplane_w.svg) center right / contain no-repeat;
}
.l-visual .airplane.r {
	bottom: 512px;
	width: 62px;
	height: 32px;
}
.l-visual .airplane.r::before {
	width: 2062px;
	transform: scaleX(-1);
}
@media (max-width: 480px) {
	.l-visual .airplane {
		bottom: 352px;
		width: 45px;
		height: 24px;
	}
	.l-visual .airplane.r {
		bottom: 328px;
		width: 34px;
		height: 16px;
	}
	.l-visual .airplane::before {
		width: 645px;
	}
	.l-visual .airplane.r::before {
		width: 634px;
	}
}
/* 自動車 */
.l-visual .car,
.l-visual .track {
	position: absolute;
	bottom: 112px;
	left: 0;
}
.l-visual .car::before,
.l-visual .track::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: inherit;
	background: center left / contain no-repeat, center right / contain no-repeat;
}
.l-visual .car {
	width: 84px;
	height: 40px;
}
.l-visual .car::before {
	width: 2084px;
	background-image: url(../img/obj_car.svg), url(../img/obj_car.svg);
}
.l-visual .track {
	width: 131px;
	height: 56px;
}
.l-visual .track::before {
	width: 2131px;
	background-image: url(../img/obj_track.svg), url(../img/obj_track.svg);
}
@media (max-width: 767px) {
	.l-visual .car,
	.l-visual .track {
		bottom: 128px;
	}
}
@media (max-width: 480px) {
	.l-visual .car {
		width: 50px;
		height: 24px;
	}
	.l-visual .car::before {
		width: 650px;
	}
	.l-visual .track {
		width: 75px;
		height: 32px;
	}
	.l-visual .track::before {
		width: 675px;
	}
}

/* visual animation */
.l-visual .clouds,
.l-visual .airplane,
.l-visual .car,
.l-visual .track {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.l-visual .clouds {
	animation: visualCloud 32.7s linear infinite;
}
.l-visual .airplane {
	animation: fullLoop 40s -2s linear infinite;
}
.l-visual .airplane.r {
	animation: fullLoop 50s -12s linear reverse infinite;
}
.l-visual .car,
.l-visual .track {
	animation: fullLoop 20s linear infinite;
}
.l-visual .car {
	animation-delay: -16.2s;
}
.l-visual .track.t1 {
	animation-delay: -15s;
}
.l-visual .track.t2 {
	animation-delay: -5s;
}
.isWindows .l-visual .clouds {
	animation-name: visualCloud !important;
	animation-duration: 32.7s !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
}
.isWindows .l-visual .airplane {
	animation-name: fullLoop !important;
	animation-duration: 40s !important;
	animation-delay: -2s !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
}
.isWindows .l-visual .airplane.r {
	animation-name: fullLoop !important;
	animation-duration: 50s !important;
	animation-delay: -12s !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
}
.isWindows .l-visual .car,
.isWindows .l-visual .track {
	animation-name: fullLoop !important;
	animation-duration: 20s !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
}
.isWindows .l-visual .car {
	animation-delay: -16.2s !important;
}
.isWindows .l-visual .track.t1 {
	animation-delay: -15s !important;
}
.isWindows .l-visual .track.t2 {
	animation-delay: -5s !important;
}
@keyframes visualCloud {
	from { transform: translateX(0); }
	to { transform: translateX(-327px); }
}
@media all and (-ms-high-contrast: none) {
	.l-visual .clouds {
		animation-duration: 65.4s;
	}
	.l-visual .airplane {
		animation-duration: 80s;
	}
	.l-visual .airplane.r {
		animation-duration: 100s;
	}
}
@media (max-width: 480px) {
	.l-visual .clouds {
		animation-duration: 16.5s;
	}
	.l-visual .airplane {
		animation-duration: 20s;
	}
	.l-visual .airplane.r {
		animation-duration: 25s;
	}
	.l-visual .car,
	.l-visual .track {
		animation-duration: 10s;
	}
	.l-visual .track.t1 {
		animation-delay: -14.5s;
	}
	.l-visual .track.t2 {
		animation-delay: -4.5s;
	}
	@keyframes visualCloud {
		from { transform: translateX(0); }
		to { transform: translateX(-165px); }
	}
}
@media all and (-ms-high-contrast: none) and (max-width: 480px) {
	.l-visual .clouds {
		animation-duration: 33s;
	}
	.l-visual .airplane {
		animation-duration: 40s;
	}
	.l-visual .airplane.r {
		animation-duration: 50s;
	}
}

/**
 * 通信
 ------------------------------ */
.redline svg {
	overflow: visible;
	fill: none;
	stroke: #f10;
	stroke-width: inherit;
}
.redline .line {
	position: absolute;
	line-height: 0;
	-webkit-mask: center / 100% 100% no-repeat;
	mask: center / 100% 100% no-repeat;
}
@media all and (-ms-high-contrast: none) {
	.redline:not(.is-active) {
		opacity: 0;
	}
	.redline.is-active {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
}
@media (min-width: 768px) {
	.redline.mb {
		display: none;
	}
	.redline.dt {
		position: absolute;
		right: 0;
		bottom: 112px;
		width: 1440px;
		height: 256px;
	}
	.redline .line {
		stroke-width: 4;
	}
	.redline .l3,
	.redline .l6 {
		stroke-width: 8;
	}
	.redline .l1 {
		right: 1226px;
		bottom: 74px;
		width: 104px;
		height: 32px;
		-webkit-mask-image: url(../img/obj_path1.svg);
		mask-image: url(../img/obj_path1.svg);
	}
	.redline .l2 {
		right: 1038px;
		bottom: 74px;
		width: 132px;
		height: 32px;
		-webkit-mask-image: url(../img/obj_path2.svg);
		mask-image: url(../img/obj_path2.svg);
	}
	.redline .l3 {
		right: 864px;
		bottom: 128px;
		width: 253px;
		height: 81px;
		-webkit-mask-image: url(../img/obj_path3.svg);
		mask-image: url(../img/obj_path3.svg);
	}
	.redline .l4 {
		right: 765px;
		bottom: 74px;
		width: 119px;
		height: 32px;
		-webkit-mask-image: url(../img/obj_path4.svg);
		mask-image: url(../img/obj_path4.svg);
	}
	.redline .l5 {
		right: 607px;
		bottom: 104px;
		width: 105px;
		height: 28px;
		-webkit-mask-image: url(../img/obj_path5.svg);
		mask-image: url(../img/obj_path5.svg);
	}
	.redline .l6 {
		right: 311px;
		bottom: 136px;
		width: 254px;
		height: 74px;
		-webkit-mask-image: url(../img/obj_path6.svg);
		mask-image: url(../img/obj_path6.svg);
	}
	.redline .l7 {
		right: 280px;
		bottom: 42px;
		width: 87px;
		height: 38px;
		-webkit-mask-image: url(../img/obj_path7.svg);
		mask-image: url(../img/obj_path7.svg);
	}
	.redline .l8 {
		right: 96px;
		bottom: 74px;
		width: 71px;
		height: 28px;
		-webkit-mask-image: url(../img/obj_path8.svg);
		mask-image: url(../img/obj_path8.svg);
	}
}
@media all and (-ms-high-contrast: none) and (min-width: 768px) {
	.redline .l3,
	.redline .l6 {
		stroke-width: 6;
	}
}
@media (min-width: 1440px) {
	.redline.dt {
		left: 0;
		margin: 0 auto;
	}
}
@media (max-width: 767px) {
	.redline.dt {
		display: none;
	}
	.redline.mb {
		position: absolute;
		bottom: 128px;
		left: 50%;
		width: 750px;
		height: 240px;
		margin: 0;
		transform: translateX(-50%);
	}
	.redline .line {
		stroke-width: 2;
	}
	.redline .line svg {
		width: 100%;
		height: 100%;
	}
	.redline .l4,
	.redline .l6 {
		stroke-width: 4;
	}
	.redline .l1 {
		bottom: 84px;
		left: 44px;
		width: 100px;
		height: 26px;
		-webkit-mask-image: url(../img/obj_path1_mb.svg);
		mask-image: url(../img/obj_path1_mb.svg);
	}
	.redline .l2 {
		bottom: 156px;
		left: 66px;
		width: 122px;
		height: 40px;
		-webkit-mask-image: url(../img/obj_path2_mb.svg);
		mask-image: url(../img/obj_path2_mb.svg);
	}
	.redline .l3 {
		bottom: 84px;
		left: 188px;
		width: 74px;
		height: 18px;
		-webkit-mask-image: url(../img/obj_path3_mb.svg);
		mask-image: url(../img/obj_path3_mb.svg);
	}
	.redline .l4 {
		bottom: 122px;
		left: 294px;
		width: 210px;
		height: 62px;
		-webkit-mask-image: url(../img/obj_path4_mb.svg);
		mask-image: url(../img/obj_path4_mb.svg);
	}
	.redline .l5 {
		bottom: 50px;
		left: 448px;
		width: 86px;
		height: 42px;
		-webkit-mask-image: url(../img/obj_path5_mb.svg);
		mask-image: url(../img/obj_path5_mb.svg);
	}
	.redline .l6 {
		bottom: 114px;
		left: 570px;
		width: 134px;
		height: 44px;
		-webkit-mask-image: url(../img/obj_path6_mb.svg);
		mask-image: url(../img/obj_path6_mb.svg);
	}
	.redline .l7 {
		bottom: 84px;
		left: 644px;
		width: 80px;
		height: 32px;
		-webkit-mask-image: url(../img/obj_path7_mb.svg);
		mask-image: url(../img/obj_path7_mb.svg);
	}
}
@media (max-width: 480px) {
	.redline.mb {
		width: 375px;
		height: 120px;
	}
	.redline .l1 {
		bottom: 42px;
		left: 22px;
		width: 50px;
		height: 13px;
	}
	.redline .l2 {
		bottom: 78px;
		left: 33px;
		width: 61px;
		height: 20px;
	}
	.redline .l3 {
		bottom: 42px;
		left: 94px;
		width: 37px;
		height: 9px;
	}
	.redline .l4 {
		bottom: 61px;
		left: 147px;
		width: 105px;
		height: 31px;
	}
	.redline .l5 {
		bottom: 25px;
		left: 224px;
		width: 43px;
		height: 21px;
	}
	.redline .l6 {
		bottom: 57px;
		left: 285px;
		width: 67px;
		height: 22px;
	}
	.redline .l7 {
		bottom: 42px;
		left: 322px;
		width: 40px;
		height: 16px;
	}
}

/**
 * home section
 -------------------------------------------------- */
.l-section {
	max-width: 1440px;
	padding: 120px 0;
}

/* :::::: CONCEPT :::::: */
.p-concept {
	max-width: 1104px;
	padding: 120px 32px;
	color: #fff;
}
.p-concept::before {
	background: linear-gradient(108.13deg, #2fa6d1, #8fd3f5);
}
.p-concept .title {
	line-height: 1;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
}
.p-concept .title::after {
	content: "";
	display: block;
	width: 32px;
	margin-top: 40px;
	border-top: 2px solid currentcolor;
}
.p-concept .lead {
	margin-top: 40px;
}
@media (min-width: 1024px) {
	.p-concept {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.p-concept .figure {
		margin-left: 24px;
	}
	.p-concept .lead {
		white-space: nowrap;
	}
	.p-concept .lead:nth-of-type(2) {
		margin-top: 0;
	}
	.p-concept .lead .b {
		display: none;
	}
}
@media (max-width: 1023px) {
	.p-concept .figure {
		margin-top: 40px;
		text-align: center;
	}
	.p-concept .lead {
		margin-top: 24px;
	}
	.p-concept .lead:first-of-type {
		margin-top: 40px;
	}
	.p-concept .lead .p {
		display: none;
	}
}
@media (max-width: 480px) {
	.p-concept {
		padding-bottom: 114px;
	}
}

/* :::::: relation 01 体験を変える新しいまちづくりとは？ :::::: */
.p-section-01 {
	padding-bottom: 136px;
}
.p-section-01::before {
	background: linear-gradient(283.15deg, #d3edfb, #e7f5fd);
}
@media (min-width: 1200px) {
	.p-section-01 .c-panel.figure {
		position: absolute;
		right: 0;
	}
}
@media (max-width: 1199px) {
	.p-section-01 .c-panel.figure {
		margin-left: auto;
	}
}
@media (max-width: 480px) {
	.p-section-01 {
		padding-bottom: 176px;
	}
}

/* :::::: relation 02 働き方を変える新しいオフィスづくりとは？ :::::: */
.p-section-02 {
	padding-bottom: 216px;
}
@media (min-width: 768px) {
	.p-section-02 .c-panel.text {
		max-width: 800px;
		margin: 0 auto;
		text-align: center;
	}
}
@media (max-width: 767px) {
	.p-section-02 .c-panel.text {
		margin-left: auto;
	}
}
@media (max-width: 480px) {
	.p-section-02 {
		padding-bottom: 176px;
	}
}

/* :::::: relation 03 暮らしを変える新しい住まいづくりとは？ :::::: */
.p-section-03 {
	padding-bottom: 296px;
}
.p-section-03::before {
	background: linear-gradient(113.61deg, #2FA6D1 0%, #8FD3F5 100%);
}
@media (min-width: 768px) {
	.p-section-03 .c-panel.text {
		max-width: 800px;
		margin: 0 auto;
		text-align: center;
	}
}
@media (min-width: 1200px) {
	.p-section-03 .c-panel.figure {
		position: absolute;
		left: 0;
	}
}
@media (max-width: 480px) {
	.p-section-03 {
		padding-bottom: 208px;
	}
}