@charset "utf-8";

html.msie {
	overflow-y: visible !important;
}

.main-contents {
	padding-bottom: 6px;
}

/* ----------------------------------------------------------- */
/* kv -> page_home-kv.css */
/* ----------------------------------------------------------- */

.home-section {
	margin-top: 80px;
	margin-bottom: 80px;
}

.logofill_c1 {
	fill: #000;
}
.logofill_c2 {
	fill: #6581C0;
}
.logofill_c3 {
	fill: #EA6182;
}

/* ----------------------------------------------------------- */
/* headding style  */

.inner-ttl {
	font-weight: normal;
}

.inner-ttl .en {
	display: block;
	margin-bottom: 0.5em;
	font-size: 3.0rem;
	font-weight: 300;
	letter-spacing: 0.01em;
}

.inner-ttl .ja {
	display: block;
	margin-bottom: 0.25em;
	font-size: 1.3rem;
	font-weight: 300;
	letter-spacing: 0.01em;
}

.inner-ttl > * {
	
}

.inner-ttl > *:last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------- */
/* .hero-banner */

.hero-banner {
	width: calc(100% - 10px);
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.hero-banner a {
	text-decoration: none;
}

.hero-banner-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 460px;
	max-height: 580px;
	border-radius: 5px;
}

.hero-banner-inner:before {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.2;
	z-index: 1;
	border-radius: inherit;
	transition: 0.4s ease;
}

.hero-banner .hero-banner-inner:hover:before {
	opacity: 0.5;
}

.hero-banner-inner .content {
	color: #fff;
	z-index: 1;
}

.hero-banner .inner-ttl {
	color: #fff;
}

.hero-banner-inner .content:last-child {
	margin-bottom: 0;
}

.msie .hero-banner-inner {
	height: 580px;
}


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

.section__header {
	position: relative;
	margin-bottom: 50px;
}

.section__header a {
	display: inline-block;
	text-decoration: none;
}

.section__header-ttl {
	font-size: 2rem;
	text-align: center;
}

.section__header-ttl.h-underline {
	padding-bottom: 1.2em;
}

.section__header-ttl.h-underline:before {
	width: 100px;
}

.section__header-ttl .ja {
	display: block;
	font-size: 1.6rem;
}

.section__header-ttl .en {
	display: block;
	font-size: 2rem;
	line-height: 1.25;
	margin-bottom: 0.5em;
}

.section__header-ttl > * {
	
}

.section__header-ttl > *:last-child {
	margin-bottom: 0;
}

.section__header .navigate-btn {
	display: none;
}

/* ----------------------------------------------------------- */
/* .news */

.article-index-nav {
	display: none;
}

.article-txt {
	display: none;
}

/* ----------------------------------------------------------- */
/* .our-business */

.our-business {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
}

.flickity-viewport {
	border-radius: 0;
}
.carousel-cell {
	border-radius: 0;
}

.our-business__sections {
	position: relative;
	counter-reset: section;
}

.business {
	text-align: center;
}

.business .img {
	background-size: 120%;
}

.business .img img {
	
}

.object-fit .business {
	overflow: hidden;
	height: 100%;
}

.object-fit .business .img img {
	object-fit: cover;
	min-height: 460px;
	max-height: 660px;
}

.business .img:before {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background-color: rgba(0,0,0,0.2);
	background-size: 20px;
	background-attachment: fixed;
	mix-blend-mode: multiply;
	transition: 0.5s ease opacity;
	z-index: 2;
	background-repeat: no-repeat;
	background-size: initial;
}

.business-inner {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 40px;
	box-sizing: border-box;
	color: #fff;
	z-index: 2;
}

.business .ttl {
	position: relative;
	color: #fff;
}

.business .ttl:before {
	font-size: 5.0rem;
	font-weight: 600;
	line-height: 1;
	counter-increment: section;
	content: counter(section, decimal-leading-zero);
	transition: 0.5s ease 0.25s;
	opacity: 0;
	transform: translateX(10px);
}

.business .ttl .en {
	display: block;
	margin-bottom: 10px;
	font-size: 3.0rem;
	font-weight: 300;
	line-height: 1.2;
	transition: 0.5s ease 0.30s;
	opacity: 0;
	transform: translateX(10px);
}

.business .ttl .ja {
	display: block;
	font-size: 1.4rem;
	font-weight: 300;
	transition: 0.5s ease 0.35s;
	opacity: 0;
	transform: translateX(10px);
}

.business .anchor {
	text-decoration: none;
}

.business .anchor:before {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.1);
	transition: inherit;
	pointer-events: none;
}

.business .more {
	font-weight: 400;
	opacity: 0;
	transition: 0.5s ease 0.45s;
	transform: translateX(10px);
}

.business a:hover {
	color: #fff;
}


.business .btn {
	font-weight: 400;
}

.business .btn:before {
	opacity: 0.75;
}

.business .btn:hover {
	background: rgba(0,0,0,1);
}
.business .btn:hover:before {
	opacity: 0;
}

.business .read {
	margin-bottom: 2em;
	padding: 0 20px;
	box-sizing: border-box;
}

.business .read p {
	margin: 0 0 1.25em;
	line-height: 1.5;
	transition: 0.5s ease 0.40s;
	opacity: 0;
	transform: translateX(10px);
}

.business .navigate-btn {
	transition: 0.5s ease 0.6s;
	opacity: 0;
	transform: translateX(10px);
}

.flickity-page-dots {
	position: absolute;
	bottom: -60px;
	text-align: center;
	padding: 20px 0;
}


/* .is-selected */

.is-selected {
	
}

.business.is-selected .img img {
	
}
.business.is-selected .ttl:before {
	/*opacity: 1;*/
	transform: translateX(0);
}

.business.is-selected .ttl .en {
	opacity: 1;
	transform: translateX(0);
}
.business.is-selected .ttl .ja {
	opacity: 1;
	transform: translateX(0);
}

.business.is-selected .read {
	
}

.business.is-selected .read p {
	opacity: 1;
	transform: translateX(0);
}

.business.is-selected .more {
	opacity: 1;
	transform: translateX(0);
}

.business.is-selected .navigate-btn {
	opacity: 1;
	transform: translateX(0);
}

/* ----------------------------------------------------------- */
/* .career */

.career {
	
}

.career .hero-banner-inner {
	background: url(../img/home/career.jpg) no-repeat center center/cover;
	transition: none;
}

/* ---------------------------------------------------------------------------------------------- */
/* SmartPhone                                                                                     */

/* iPhone 6 over */
@media screen and (min-width: 374px) {
	
}

/* ---------------------------------------------------------------------------------------------- */
/* Tablet                                                                                         */

@media screen and (min-width: 541px) {
	.news-headline__ttl {
		width: calc(100% - 120px);
	}
}


/* iPad */
@media screen and (min-width: 768px) {
	.section__header-ttl .en {
		font-size: 2.5rem;
	}
	
	.flickity-viewport {
		border-radius: 5px;
	}
	.carousel-cell {
		border-radius: 5px;
	}
	
	/* ----------------------------------------------------------- */
	/* .news */
	
	.article-index-nav {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		padding: 0;
		width: 50%;
		max-width: 400px;
	}
	
	.article-index-nav-list {
		margin-bottom: 0;
	}
	
	.section__header .navigate-btn {
		position: absolute;
		display: block;
		bottom: 0;
		right: 0;
		margin-bottom: 0.5em;
	}
	
	.article-txt {
		display: block;
	}
	
	/* ----------------------------------------------------------- */
	/* .our-business */
	
	.our-business {
		width: calc(100% - 50px);
	}
	.business .ttl:before {
		font-size: 8.0rem;
	}
	
	.business .ttl .en {
		font-size: 4.5rem;
	}
	
	.business .ttl .ja {
		font-size: 2.5rem;
	}
	
	/* ----------------------------------------------------------- */
	/* .our-business */
	
	.hero-banner {
		width: calc(100% - 50px);
		min-height: 580px;
	}
	.hero-banner-inner {
		min-height: 580px;
		max-height: initial;
	}
}

/* ---------------------------------------------------------------------------------------------- */
/* Desktop                                                                                        */

@media screen and (min-width: 1024px) {
	
	.kv {
		height: calc(100vh - 140px);
	}
	.our-business {
		margin-bottom: 40px;
	}
	
	.business {
		min-height: 620px;
		max-height: 620px;
	}
	.business .img {
		background-size: 120%;
		position: relative;
		width: 100%;
		height: 100%;
	}
	.business .img img,
	.object-fit .business .img img {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		max-height: calc(100% + 200px);
		min-height: calc(100% + 200px);
		height: calc(100% + 200px);
	}
	.business .img:before {
		max-height: calc(100% + 200px);
		min-height: calc(100% + 200px);
		height: calc(100% + 200px);
	}
}

@media screen and (min-width: 1281px) {
	
}