@charset "UTF-8";

.main-title {
	position: relative;
	overflow: hidden;
}
.main-title::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	background: url(/img/bg_business.png?3) 50% 50% no-repeat;
	background-size: cover;
}

.main-title .inner > * {
	z-index: 10;
}



.main-title .banner {
	position: absolute;
	width: 310px;
	height: 262px;
	right: 30px;
	top: calc(50% - 131px);
	}
.main-title .banner a {
	box-sizing: border-box;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 310px;
	height: 262px;
	left: 0;
	top: 0;
	border: 1px solid #707070;
	border-radius: 7px;
	background: url(/img/banner_gx.png?2) 0 0 no-repeat;
	background-size: cover;
	box-shadow: 0 0 6px rgba(0,0,0,0.25);
	transition: all 400ms ease;
}
.main-title .banner p {
	margin: 15px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
}
.main-title .banner a:hover {
	box-shadow: 0 0 12px rgba(0,0,0,0.4);
}


.main-title .banner .button {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 196px;
	height: 40px;
	left: calc(50% - 98px);
	bottom: 35px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	border-radius: 25px;
	background: #dc1010;
	border: 2px solid #fff;
	transition: all 300ms ease-out;
}
.main-title .banner .button .arrow {
	position: absolute;
	display: inline-block;
	width: 26px;
	height: 26px;
	right: 5px;
	top: calc(50% - 13px);
	background: #fff url(/img/arrow.svg) 50% 50% no-repeat;
	background-size: 15px auto;
	border-radius: 13px;
	transition: all 150ms ease-out;
}

/*
.main-title .banner a:hover .button {
	color: #dc1010;
	background: #fff;
}
.main-title .banner a:hover .button .arrow {
	filter: brightness(0) invert(1);
}
*/






.compact-title {
	background: url(/img/bg_business_compact.png?2) 100% 50% no-repeat;
	background-size: cover;
}


@media screen and (min-width:1201px) {
	.main-title .banner p br.soft {
		display: none;
	}
}
@media screen and (max-width:1200px) {
	.main-title .banner {
		width: 200px;
		height: 200px;
		top: calc(50% - 100px);
	}
	.main-title .banner a {
		width: 200px;
		height: 200px;
		padding: 0 15px;
	}
	.main-title .banner p {
		font-size: 14px;
		text-align: left
	}
}







#floating-banner {
	box-sizing: border-box;
	position: fixed;
	width: 310px;
	height: 200px;
	right: 30px;
	bottom: 30px;
	z-index: 5000;
	border: 1px solid #dc1010;
	border-radius: 7px;
	background: #fff url(/img/banner_download.png?2) 50% 85% no-repeat;
	background-size: 80% auto;
}
#floating-banner button {
	box-sizing: border-box;
	position: absolute;
	display: block;
	width: 26px;
	height: 26px;
	right: -13px;
	top: -13px;
	z-index: 10;
	margin: 0;
	padding: 0;
	border: 1px solid #dc1010;
	border-radius: 13px;
	background: #fff;
	cursor: pointer;
	transition: all 300ms ease-out;
}
#floating-banner button::before,
#floating-banner button::after {
	position: absolute;
	content: "";
	display: block;
	width: 10px;
	height: 1px;
	left: calc(50% - 5px);
	top: 50%;
	background: #dc1010;
	transition: all 300ms ease-out;
}
#floating-banner button::before {
	transform: rotate(45deg);
}
#floating-banner button::after {
	transform: rotate(-45deg);
}
#floating-banner button:hover {
	background: #dc1010;
}
#floating-banner button:hover::before,
#floating-banner button:hover::after {
	background: #fff;
}



#floating-banner a {
	position: relative;
	display: block;
	height: 198px;
}

#floating-banner .text {
	padding: 15px 15px 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

#floating-banner .link {
	position: absolute;
	width: 100%;
	height: 44px;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 0 0 6px 6px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background: #dc1010;
}
#floating-banner .link span {
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	right: 20px;
	top: calc(50% - 10px);
	background: url(/img/icon_download_white.svg) 50% 50% no-repeat;
	background-size: 100% auto;
}


#floating-banner {
	visibility: hidden;
	transform: translateY(250px);
	transition: all 400ms ease-out 200ms;
}
body.show-banner #floating-banner {
	visibility: visible;
	transform: translateY(0);
}

#floating-banner button {
	transform: scale(0);
}
body.show-banner #floating-banner button {
	transform: scale(1);
}



.interlude1 {
	position: relative;
	height: 375px;
	overflow: hidden;
}
.interlude1 span {
	position: absolute;
	display: block;
	width: 100%;
	height: 750px;
	left: 0;
	top: calc(50% - 375px);
	background: url(/assets/business/bg1.jpg?5) 50% 0 no-repeat;
	background-size: cover;
}

.interlude2 {
	position: relative;
	height: 375px;
	overflow: hidden;
}
.interlude2 span {
	position: absolute;
	display: block;
	width: 100%;
	height: 750px;
	left: 0;
	top: calc(50% - 375px);
	background: url(/assets/business/bg2.jpg?4) 50% 30% no-repeat;
	background-size: cover;
}


.interlude3 {
	position: relative;
	height: 375px;
	background: url(/assets/business/bg3.jpg) 50% 30% no-repeat;
	background-size: cover;
}




.page-nav {
	padding: 20px 0;
	border-top: 1px solid #e6e6e6;
}
.page-nav .nav-inner {
	display: flex;
	justify-content: center;
	width: 100%;
}
.page-nav ul {
	display: flex;
}
.page-nav a {
	position: relative;
	font-size: 14px;
	font-weight: 500;
}
.page-nav a::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	left: 0;
	top: calc(50% + 8px);
	background: #000;
	transform: scaleX(0);
	transform-origin: left bottom;
	transition: all 300ms ease;
}
.page-nav a:hover::after {
	transform: scaleX(1);
}

.page-nav .subtitle {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 30px;
	background: #f4f4f4;
	border-radius: 7px;
}
.page-nav ul {
	margin: 0 30px;
}
.page-nav li {
	position: relative;
}
.page-nav li a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 40px;
}
.page-nav li + li {
	margin-left: 40px;
}
.page-nav li + li::after {
	position: absolute;
	content: "";
	display: block;
	width: 1px;
	height: 14px;
	left: -20px;
	top: calc(50% - 7px);
	background: #333;
}





.title-column {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.title-column h2 {
	width: calc(420px);
	font-size: 30px;
	font-weight: 500;
}
.title-column dl {
	width: calc(100% - 420px - 50px);
}
.title-column dt {
	font-size: 20px;
	font-weight: 500;
	color: #dc1010;
}
.title-column dd {
	margin: 25px 0 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}



#gx {
	box-sizing: border-box;
	position: relative;
	padding: 90px 0;
	background: #fff;
}
#gx .inner {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}



.biz-list {
	padding: 70px 0 0;
}
.biz-list + .biz-list {
	margin-top: 30px;
}

.biz-list li {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.biz-list li + li {
	margin-top: 60px;
	padding: 60px 0 0;
	border-top: 1px solid #e6e6e6;
}

.biz-list .box {
	width: calc(100% - 410px - 50px);
}
.biz-list figure {
	width: 410px;
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
}

.biz-list h3 {
	position: relative;
	margin: 0 0 30px;
	font-size: 18px;
	font-weight: 500;
	border-top: 1px solid #e6e6e6;
}
.biz-list h3 span {
	position: relative;
	display: inline-block;
	padding-right: 12px;
	background: #fff;
	transform: translateY(-50%);
}


.biz-list h4 {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
}
.biz-list h4 + dl {
	margin-top: 20px;
}
.biz-list dt {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.9;
	color: #dc1010;
}
.biz-list dd {
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}
.biz-list dd .note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.9;
	color: #666;
}
.biz-list nav {
	width: 420px;
	margin: 30px 0 0;
}
.biz-list nav.multi {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 20px);
	justify-content: space-between;
}
.biz-list nav.multi a {
	width: calc(50% - 10px);
}
.biz-list nav.multi-row a + a {
	margin-top: 15px;
}




#biz-links {
	box-sizing: border-box;
	position: relative;
	padding: 60px 0;
	background: #fcfcfc;
	border-top: 1px solid #e6e6e6;
}
#biz-links .inner {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 40px;
}

#biz-links ul {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
#biz-links li {
	width: calc(50% - 25px);
}
#biz-links li a {
	height: 80px;
	font-size: 18px;
	border: 1px solid #dc1010;
	border-radius: 40px;
}
#biz-links li a span {
	right: 32px;
}








#casestudy {
	box-sizing: border-box;
	position: relative;
	padding: 95px 0 110px;
	background: #f4f4f4;
	border-top: 1px solid #e6e6e6;
}
#casestudy .inner {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

#casestudy h2 {
	font-size: 30px;
	font-weight: 500;
	text-align: center;
}






#casestudy .slide {
	margin: 40px calc(60px - 17px) 0;
}
#casestudy .slide-item {
	box-sizing: border-box;
	width: calc((100% - (34px * 2)) / 3);
	padding: 0 17px;
	
	display: block !important;
}



.slick-arrow {
	position: absolute;
	display: block;
	width: 50px;
	height: 40px;
	top: calc(50% - 20px);
	z-index: 10;
	padding: 0;
	margin: 0;
	font-size: 0;
	border: none;
	cursor: pointer;
}
.slick-prev {
	left: -50px;
	background: url(/img/arrow_prev_large.svg) 50% 50% no-repeat;
	background-size: 20px auto;
}
.slick-next {
	right: -50px;
	background: url(/img/arrow_next_large.svg) 50% 50% no-repeat;
	background-size: 20px auto;
}
.slick-arrow.slick-disabled {
	opacity: 0.3;
}



#casestudy .thumb {
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
}
#casestudy dl {
	margin: 20px 0 0;
}
#casestudy dt {
	position: relative;
	min-height: 60px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}
#casestudy dd {
	margin-top: 14px;
	padding-top: 18px;
	border-top: 1px solid #e6e6e6;
	font-size: 13px;
	font-weight: 500;
	color: #909090;
}


#casestudy dt span {
	box-sizing: border-box;
	position: absolute;
	display: inline-block;
	width: 26px;
	height: 26px;
	right: 2px;
	top: calc(50% - 13px);
	border: 1px solid #dc1010;
	border-radius: 13px;
	background: #fff;
	transition: all 300ms ease-out;
}
#casestudy dt span::after {
	position: absolute;
	display: block;
	content: "";
	width: 14px;
	height: 12px;
	left: calc(50% - 7px);
	top: calc(50% - 6px);
	background: url(/img/arrow.svg) 50% 50% no-repeat;
	background-size: 14px auto;
	transition: all 150ms ease-out; 
}
#casestudy a:hover dt span {
	background: #dc1010;
}
#casestudy a:hover dt span::after {
	filter: brightness(0) invert(1);
}


#casestudy .thumb {
	transition: all 300ms ease-out;
}
#casestudy a:hover .thumb {
	opacity: 0.7;
}










#companies {
	box-sizing: border-box;
	position: relative;
	padding: 95px 0 100px;
	background: #fff;
	border-top: 1px solid #e6e6e6;
}
#companies .inner {
}

#companies h2 {
	font-size: 30px;
	font-weight: 500;
	text-align: center;
}



#logo-list {
	margin: 60px 0 0;
}

#companies .logo-box {
	overflow: hidden;
}
.logo-box ul {
	display: flex;
}
.logo-box li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 224px;
}
.logo-box img {
	width: 224px;
	height: auto;
}
.logo-box ul:nth-child(2) {
	margin-left: 116px;
}
.logo-box .logos {
	position: relative;
	left: -116px;
}
.logo-box:hover .logos {
	animation-play-state: paused !important;
}






#energy {
	box-sizing: border-box;
	position: relative;
	padding: 90px 0 100px;
	background: #fff;
	border-top: 1px solid #e6e6e6;
}
#energy .inner {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}


.supply-list {
	margin: 60px 0 0;
	border-top: 1px solid #e6e6e6;
}
.supply-list > ul {
	display: flex;
	justify-content: space-between;
	margin: 60px 0 0;
}
.supply-list > ul > li {
	width: calc(50% - 25px);
}

.supply-list figure {
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
}
.supply-list dl {
	margin: 25px 0 0;
}
.supply-list dt {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
}
.supply-list dd {
	margin: 15px 0 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}
.supply-list nav {
	margin: 40px 0 0;
}

.supply-list dd li {
	line-height: 1.9;
}
.supply-list dd li + li {
}
.supply-list dd li a {
	text-decoration: underline;
}
.supply-list dd li a .popup {
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 5px;
	top: 2px;
	background: url(/img/icon_popup.svg?2) 50% 50% no-repeat;
	background-size: 100% auto;
}
.supply-list dd li a:hover {
	text-decoration: none;
}








/* ---------------------------------------------------------------------------------------------------- */

.compact-title,
.interlude1,
#gxcity-intro,
#gxcity-steps,
#topics-links,
#common-footer {
	z-index: 200;
}


#gxcity-intro {
	box-sizing: border-box;
	position: relative;
	padding: 60px 0;
	background: #f8f8f8;
	border-top: 1px solid #e6e6e6;
}
#gxcity-intro .inner {
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

#gxcity-intro h2 {
	width: 420px;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.5;
}
#gxcity-intro article {
	width: calc(100% - 420px - 50px);
}
#gxcity-intro article p {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}







#gxcity-about {
	position: relative;
	margin-bottom: -1px;
	/*
	background: linear-gradient(to bottom, #dcfbff, #fff);
	*/
	
	background: linear-gradient(to bottom, #fff 7.5%, #ddf3ff 45%);
}
#gxcity-about .content {
}


#gxcity-about header {
	padding: 90px 0 0;
	text-align: center;
}
#gxcity-about h2 {
	font-size: 30px;
	font-weight: 500;
	line-height: 1.5;
}
#gxcity-about h2 strong {
	font-size: 45px;
}
#gxcity-about .lead {
	margin: 40px 0 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}

#gxcity-about .city {
	position: relative;
	height: calc(45vw + 300px);
	margin: 40px 0 0;
}
#gxcity-about .city .pict {
	position: absolute;
	width: 100%;
	height: calc(45vw);
	left: 0;
	top: 180px;
	z-index: 10;
	background: url(/assets/gxcity/city.png) 50% 50% no-repeat;
	background-size: cover;
}
#gxcity-about .city .typo {
	position: absolute;
	width: 43vw;
	height: 14vw;
	left: calc(50% - 21.5vw);
	top: 100px;
	top: 60px;
	background: url(/assets/gxcity/typo_city.png) 50% 50% no-repeat;
	background-size: 100% auto;
}

/*
#gxcity-about .city::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 102px;
	left: 0;
	bottom: 0;
	z-index: 1;
	background: #b8e5c9;
}
*/


#gxcity-about h2 {
	opacity: 0;
	transform: translateY(30px);
	transition: all 400ms ease;
}
#gxcity-about .lead {
	opacity: 0;
	transform: translateY(30px);
	transition: all 400ms ease 200ms;
}

#gxcity-about.pass h2,
#gxcity-about.pass .lead {
	opacity: 1;
	transform: translateY(0px);
}



#gxcity-about .city .typo {
	opacity: 0;
	transform: translateY(100px);
	transition: all 800ms ease 0ms;
}
#gxcity-about .city.pass .typo {
	opacity: 1;
	transform: translateY(0px);
}


#gxcity-about .city .pict {
	opacity: 0;
	transform: translateY(50px);
	transition: all 800ms ease 400ms;
}
#gxcity-about .city.pass .pict {
	opacity: 1;
	transform: translateY(0px);
}





#gxcity-about .inner {
	overflow: visible;
	transition: all 800ms ease-out;
}
/*
#gxcity-about .content {
	position: sticky;
	top: 0;
	z-index: 10;
}
*/

#gxcity-about.fix .inner {
	background: #f1f8f7;
}


#gxcity-about .content .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255, 0.0));
	
	opacity: 0;
	transition: all 800ms ease-out;
}
#gxcity-about.fix .content .overlay {
	opacity: 1;
}




#gxcity-about .content .spacer {
	position: relative;
	height: 302px;
	margin: -301px 0;
	background: #ddf3ff;
}


#gxcity-about .feature {
}




#gxcity-about .feature {
	height: 32vw;
	margin: -1px 0 0;
	background: #ddf3ff;
}
#gxcity-about .feature .balloon {
	box-sizing: border-box;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32vw;
	height: 32vw;
	padding: 0 4vw;
	bottom: 10vw;
	z-index: 150;
	border-radius: 16vw;
	background: #fff;
	will-change: contents;
}


/*
#gxcity-about .feature .balloon.scrolled {
	position: absolute;
	top: auto;
	bottom: calc((45vw + 300px) - 15vw - 32vw);
}
@media screen and (min-width:1481px) {
	#gxcity-about .feature .balloon.scrolled {
		bottom: calc((45vw + 300px) - 15vw - 474px);
	}
}
*/




#gxcity-about .feature .balloon:nth-child(1) {
	left: calc(50% - 16vw - 32vw + 4vw);
}
#gxcity-about .feature .balloon:nth-child(2) {
	left: calc(50% - 16vw);
}
#gxcity-about .feature .balloon:nth-child(3) {
	left: calc(50% - 16vw + 32vw - 4vw);
}

#gxcity-about .feature .balloon dt {
	font-size: 28px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	color: #dc1010;
}
#gxcity-about .feature .balloon dd {
	margin: 20px 0 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
	text-align: center;
}



@media screen and (min-width:1481px) {
	#gxcity-about .feature {
		height: 474px;
	}
	#gxcity-about .feature .balloon {
		width: 474px;
		height: 474px;
		padding: 0 55px;
		border-radius: 237px;
	}
	
	#gxcity-about .feature .balloon:nth-child(1) {
		left: calc(50% - 237px - 474px + 60px);
	}
	#gxcity-about .feature .balloon:nth-child(2) {
		left: calc(50% - 237px);
	}
	#gxcity-about .feature .balloon:nth-child(3) {
		left: calc(50% - 237px + 474px - 60px);
	}

}

@media screen and (max-width:1340px) {
	#gxcity-about .feature .balloon dt {
		font-size: 20px;
	}
	#gxcity-about .feature .balloon dd {
		margin-top: 15px;
		font-size: 13px;
		line-height: 1.8;
	}
}


#gxcity-about .feature .balloon i {
	position: absolute;
	z-index: 100;
	transition: all 400ms ease;
}
#gxcity-about .feature .balloon b {
	display: block;
	font-size: 0;
	transform: translate(-50%, -50%);
}


#gxcity-about .feature .balloon {
	opacity: 0;
	transform: translateY(40px);
	transition: all 400ms ease-out;
}
#gxcity-about .feature .balloon:nth-child(1) {
	transition-delay: 0ms;
}
#gxcity-about .feature .balloon:nth-child(2) {
	transition-delay: 200ms;
}
#gxcity-about .feature .balloon:nth-child(3) {
	transition-delay: 400ms;
}
#gxcity-about .feature .balloon.hide {
	transition-delay: 0ms;
	transition-duration: 250ms;
}


body.show-balloon #gxcity-about .feature .balloon {
	opacity: 1;
	transform: translateY(0);
}







#gxcity-steps {
	box-sizing: border-box;
	position: relative;
	padding: 90px 0;
	border-top: 1px solid #e6e6e6;
	background: #fcfcfc;
}
#gxcity-steps .inner {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

#gxcity-steps h2 {
	font-size: 30px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

#gxcity-steps .lead {
	margin: 30px 0 15px;
	text-align: center;
}
#gxcity-steps .lead p {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
	text-align: center;
}

#gxcity-steps .content {
	position: relative;
	margin: 60px 0 0;
}

#gxcity-steps .content ol {
	display: flex;
	justify-content: space-between;
}
#gxcity-steps .content li {
	box-sizing: border-box;
	position: relative;
	width: calc((100% - (10px * 3)) / 4);
	padding: 25px 15px;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
	background: #fff;
}
#gxcity-steps .content strong {
	box-sizing: border-box;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	left: calc(50% - 20px);
	top: -20px;
	padding: 4px 0 0;
	font-size: 22px;
	font-family: "Josefin Sans", sans-serif;
	border: 1px solid #000;
	border-radius: 20px;
	background: #fff;
}

#gxcity-steps dt {
	font-size: 15px;
	font-weight: 700;
	color: #dc1010;
	line-height: 1.4;
	text-align: center;
}
#gxcity-steps dd {
	margin: 15px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.9;
}

#gxcity-steps .content .arrow {
	box-sizing: border-box;
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	top: calc(50% - 15px);
	z-index: 200;
	border: 1px solid #e6e6e6;
	border-radius: 15px;
	background: #fff url(/img/arrow_steps.svg?2) 55% 50% no-repeat;
	background-size: 9px auto;
}
#gxcity-steps .content .arrow1 {
	left: calc(25% - 16px);
}
#gxcity-steps .content .arrow2 {
	left: calc(50% - 14px);
}
#gxcity-steps .content .arrow3 {
	left: calc(75% - 12px);
}



#gxcity-steps .content li {
	opacity: 0;
	transform: translateY(40px);
	transition: all 600ms ease;
}

#gxcity-steps .content strong {
	transform: scale(2);
	transition: all 600ms ease;
}

#gxcity-steps .content li img {
	transform: scale(1.2);
	transition: all 800ms ease;
}

#gxcity-steps .content .arrow {
	opacity: 0;
	transform: scale(2);
	transition: all 400ms ease;
}



#gxcity-steps .content.pass li:nth-child(1) {
	transition-delay: 100ms;
}
#gxcity-steps .content.pass li:nth-child(2) {
	transition-delay: 300ms;
}
#gxcity-steps .content.pass li:nth-child(3) {
	transition-delay: 500ms;
}
#gxcity-steps .content.pass li:nth-child(4) {
	transition-delay: 700ms;
}


#gxcity-steps .content.pass li:nth-child(1) strong {
	transition-delay: 100ms;
}
#gxcity-steps .content.pass li:nth-child(2) strong {
	transition-delay: 300ms;
}
#gxcity-steps .content.pass li:nth-child(3) strong {
	transition-delay: 500ms;
}
#gxcity-steps .content.pass li:nth-child(4) strong {
	transition-delay: 700ms;
}



#gxcity-steps .content.pass li:nth-child(1) img {
	transition-delay: 100ms;
}
#gxcity-steps .content.pass li:nth-child(2) img {
	transition-delay: 300ms;
}
#gxcity-steps .content.pass li:nth-child(3) img {
	transition-delay: 500ms;
}
#gxcity-steps .content.pass li:nth-child(4) img {
	transition-delay: 700ms;
}

#gxcity-steps .content .arrow1 {
	transition-delay: 300ms;
}
#gxcity-steps .content .arrow2 {
	transition-delay: 500ms;
}
#gxcity-steps .content .arrow3 {
	transition-delay: 800ms;
}


#gxcity-steps .content.pass li {
	opacity: 1;
	transform: translateY(0px);
}
#gxcity-steps .content.pass li strong {
	transform: scale(1);
}
#gxcity-steps .content.pass li img {
	transform: scale(1);
}
#gxcity-steps .content.pass .arrow {
	opacity: 1;
	transform: scale(1);
}




/* ---------------------------------------------------------------------------------------------------- */

#casestudy-entry {
	box-sizing: border-box;
	position: relative;
	padding: 90px 0 120px;
	background: #fff;
}
#casestudy-entry .inner {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}



#casestudy-entry header {
	display: flex;
	justify-content: space-between;
}
#casestudy-entry header .pict {
	width: 410px;
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
}

#casestudy-entry header h2 {
	font-size: 35px;
	font-weight: 500;
	line-height: 1.4;
}
#casestudy-entry header dl {
	margin: 35px 0 0;
	font-size: 15px;
	font-weight: 500;
	color: #909090;
}
#casestudy-entry header dt,
#casestudy-entry header dd {
	line-height: 1.9;
}


#casestudy-entry .abstract {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 60px 0 0;
	padding: 60px;
	background: #f4f4f4;
	border-radius: 7px;
}
#casestudy-entry .abstract .column {
	width: calc(50% - 25px);
}
#casestudy-entry .abstract h3 {
	font-size: 15px;
	font-weight: 700;
	color: #dc1010;
}
#casestudy-entry .abstract article {
	margin: 20px 0 0;
}
#casestudy-entry .abstract dl {
	margin: 20px 0 0;
}

#casestudy-entry .abstract article p {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}
#casestudy-entry .abstract dt {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.9;
}
#casestudy-entry .abstract dd {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.9;
}


#casestudy-entry .entry-body {
	margin: 110px 0 0;
}

#casestudy-entry .entry-body h3 {
	position: relative;
	margin: 0 0 25px;
	padding-left: 60px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: #dc1010;
}
#casestudy-entry .entry-body h3::before {
	position: absolute;
	content: "";
	display: block;
	width: 38px;
	height: 1px;
	left: 0;
	top: calc(14px);
	background: #dc1010;
}

#casestudy-entry .entry-body p + h3,
#casestudy-entry .entry-body div + h3 {
	margin-top: 60px;
}

#casestudy-entry .entry-body p,
#casestudy-entry .entry-body div {
	margin: 0 0 0 60px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
}

#casestudy-entry .entry-body img {
	width: auto;
	margin: 60px auto 0;
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
}


/*
#casestudy-entry .entry-body article {
	margin: 25px 0 0 60px;
}
#casestudy-entry .entry-body article p {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}

#casestudy-entry .entry-body .column + .column {
	margin-top: 60px;
}

#casestudy-entry .entry-body .image {
	margin: 60px 60px 60px 120px;
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 7px;
}
*/


#casestudy-entry .epilogue {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 90px 0 0;
	padding: 70px 0 0;
	border-top: 1px solid #e6e6e6;
}

#casestudy-entry .epilogue .column {
	width: calc(50% - 25px);
}

#casestudy-entry .epilogue h3 {
	font-size: 15px;
	font-weight: 700;
	color: #dc1010;
}
#casestudy-entry .epilogue article {
	margin: 20px 0 0;
}
#casestudy-entry .epilogue dl {
	margin: 20px 0 0;
}

#casestudy-entry .epilogue article p {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
}

#casestudy-entry .epilogue dt {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.9;
}
#casestudy-entry .epilogue dd {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.9;
}


#casestudy-entry .links {
	box-sizing: border-box;
	padding: 70px 60px;
	margin: 70px 0 0;
	border: 1px solid #dc1010;
	border-radius: 7px;
	background: #fff;
}
#casestudy-entry .links h3 {
	font-size: 20px;
	font-weight: 500;
	text-align: center;
}
#casestudy-entry .links ul {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 45px 0 0;
}
#casestudy-entry .links li {
	width: calc(50% - 25px);
}
#casestudy-entry .links a {
	height: 80px;
	font-size: 18px;
	border: 1px solid #dc1010;
	border-radius: 40px;
}
#casestudy-entry .links a span {
	right: 32px;
}










/* ---------------------------------------------------------------------------------------------------- */
/* OPENING */


.main-title::after {
	transform: scale(2);
	transition: all 500ms ease;
}



.main-title h1 {
	position: relative;
	height: 66px;
	overflow: hidden;
}
.main-title h1 span {
	position: relative;
	display: block;
	transform: translateY(66px);
	transition: all 400ms ease 200ms;
}

.main-title .lead {
	position: relative;
	height: 24px;
	overflow: hidden;
}
.main-title .lead span {
	position: relative;
	display: block;
	transform: translateY(24px);
	transition: all 400ms ease 400ms;
}




.main-title .caption {
	position: relative;
	opacity: 0;
	transition: all 600ms ease 500ms;
}


.main-title .banner {
	opacity: 0;
	transition: all 600ms ease 500ms;
}



body.start .main-title::after {
	transform: scale(1);
}


body.start .main-title h1 span {
	transform: translateY(0px);
}
body.start .main-title .lead span {
	transform: translateY(0px);
}

body.start .main-title .caption {
	opacity: 1;
}

body.start .main-title .banner {
	opacity: 1;
}



.interlude1 span {
	opacity: 0;
	transform: translateY(30px);
	transition: all 600ms ease 500ms;
}
body.start .interlude1 span {
	opacity: 1;
	transform: translateY(0px);
}



body.business-index main > *:nth-child(n + 3) {
	opacity: 0;
	transition: all 600ms ease 500ms;
}
body.business-index.start main > *:nth-child(n + 3) {
	opacity: 1;
}


/* ---------------------------------------------------------------------------------------------------- */
/* SCROLL MOTION */