@charset "utf-8";

#mainVisual > .inner,
#feature > .inner,
#products > .inner,
#facilities > .inner,
#information > .inner,
#company > .inner {
	max-width: 976px;
	margin: 0 auto;
	padding: 48px 24px;
}

/* ======================================
   mainVisual
====================================== */

#mainVisual {
	position: relative;
	overflow: visible;
	padding-top: 560px;
}
#mainVisual .copy {
	display: flex;
	position: absolute;
	top: 226px;
	left: 0;
	justify-content: flex-end;
	width: 30%;
	padding: 32px;
	background-color: #ffffff;
}
#mainVisual .copy h2 {
	font-size: 12px;
	font-family: "GenShin_regular_JIS2";
}
#mainVisual .copy h2 span {
	font-family: "GenShin_light_KK";
	display: inline-block;
	font-size: 230%;
	padding-top: 6px;
}
#mainVisual .copy h2 span mark {
	font-size: 130%;
}
#mainVisual .text {
	z-index: 2;
	position: absolute;
	top: 422px;
	left: 50%;
	width: 417px;
	padding: 48px;
	background-color: #ffffff;
	box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.25);
}
#mainVisual .text h3 {
	font-family: "GenShin_light_KK";
	font-size: 26px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #999999;
}
#mainVisual #pv {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 560px;
}
#mainVisual #pv .overlay {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	background: url(/img/bg_video_overlay.png) repeat;
}
#mainVisual #pv video {
	z-index: -2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
#mainVisual #slideshow {
	position: relative;
	z-index: 1;
	left: 4%;
	overflow: hidden;
	flex-wrap: wrap;
	width: 89%;
	height: 280px;
	margin: 48px 0 0;
	border: 16px solid #fff;
	background-color: #fff;
	box-shadow: 0 0 1px 0 #999;
}
#mainVisual #slideshowLoader {
	display: flex;
	z-index: 1;
	position: relative;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 312px;
	margin-top: -312px;
	transition: 0.3s ease-out;
}

#mainVisual #slideshowLoader::after {
	content: "";
	border-radius: 50%;
	width: 30px;
	height: 30px;
	border-top: 4px solid #005bac;
	border-right: 4px solid #005bac;
	border-bottom: 4px solid #005bac;
	border-left: 4px solid #ffffff;
	transform: translateZ(0);
	animation: load 1.1s infinite linear;
}
@keyframes load {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

#mainVisual #slideshowLoader.__loadcomplete {
	opacity: 0;
	visibility: hidden;
}

#mainVisual #slideshowNav {
	position: relative;
	z-index: 2;
	display: flex;
	top: -50px;
	justify-content: center;
	width: 100%;
}

#mainVisual #slideshowNav .jqSS_nav {
	display: block;
	overflow: hidden;
	text-indent: 9999px;
	border: 1px solid #fff;
	transition: 0.3s ease-out;
	margin: 0 5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.4);
}
#mainVisual #slideshowNav .jqSS_nav:hover {
	background-color: #005bac;
}
#mainVisual #slideshowNav .jqSS_nav.__select {
	background-color: #fff;
}

/* ======================================
   feature
====================================== */

#feature {
	position: relative;
	margin-top: -130px;
	padding-top: 130px;
	background: url("/common/img/pattern_kyodo_alpha10_rb.svg"),
		url("/common/img/pattern_kyodo_alpha10_lt.svg");
	background-repeat: no-repeat, no-repeat;
	background-position: right bottom, left top;
	background-size: auto 58%, auto 36%;
	background-color: #005bac;
}
#feature > .inner {
	display: flex;
	flex-wrap: wrap;
	padding: 64px 24px 0;
}
#feature > .inner header {
	font-size: 32px;
	line-height: 1.8;
	flex-basis: 35%;
	flex-grow: 1;
	margin-bottom: 48px;
	padding: 0 24px;
	color: #ffffff;
}

#feature > .inner > div {
	display: flex;
	flex-basis: 35%;
	flex-grow: 1;
	flex-wrap: wrap;
	margin-bottom: 64px;
	margin-left: 24px;
	padding: 0 24px;
	border-left: 4px solid #ffffff;
}
#feature > .inner > div:nth-child(3) {
	margin-left: 0;
}

#feature h3 {
	font-family: "GenShin_regular_JIS2";
	font-size: 32px;
	line-height: 1;
	flex-basis: auto;
	flex-grow: 1;
	margin-bottom: 16px;
	color: #ffffff;
}
#feature .link {
	display: flex;
	align-items: flex-end;
	flex-basis: 120px;
	justify-content: flex-end;
	margin-bottom: 16px;
}
#feature .link a {
	position: relative;
	font-family: "GenShin_bold_GK";
	padding: 8px 12px 8px 24px;
	transition: 0.3s ease;
	text-decoration: none;
	color: #005bac;
	background: #ffffff;
	line-height: 1;
}
#feature .link a:hover {
	margin-right: 4px;
	box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.2);
}
#feature .link a::after {
	display: inline-block;
	position: absolute;
	top: 38%;
	left: 8px;
	width: 6px;
	height: 6px;
	content: "";
	transform: rotate(45deg);
	border-width: 1px 1px 0 0;
	border-style: solid solid none none;
	border-color: #005bac #005bac transparent transparent;
}

#feature .discription {
	flex-grow: 1;
	color: #ffffff;
}

/* ======================================
   products, facilities
   --------------------------------------
   productsとfacilitiesはほとんど同じ。
   headerの位置とgridの連結部分、
   その他細かいカラーなどだけ後で上書き
====================================== */

#products {
	background: #ffffff;
}
#facilities {
	background: url("/common/img/bg_check_white_alpha100.png") repeat #d9e1f2;
}
#products > .inner,
#facilities > .inner {
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: repeat(10, auto);
	position: relative;
	max-width: 976px;

	-ms-grid-columns: (auto) [3];
	-ms-grid-rows: (auto) [10];
}
#products > .inner > *:nth-child(1),
#facilities > .inner > *:nth-child(1) {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}
#products > .inner > *:nth-child(2),
#facilities > .inner > *:nth-child(2) {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
#products > .inner > *:nth-child(3),
#facilities > .inner > *:nth-child(3) {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}
#products > .inner > *:nth-child(4),
#facilities > .inner > *:nth-child(4) {
	-ms-grid-column: 1;
	-ms-grid-row: 2;
}
#products > .inner > *:nth-child(5),
#facilities > .inner > *:nth-child(5) {
	-ms-grid-column: 2;
	-ms-grid-row: 2;
}
#products > .inner > *:nth-child(6),
#facilities > .inner > *:nth-child(6) {
	-ms-grid-column: 3;
	-ms-grid-row: 2;
}
#products > .inner > *:nth-child(7),
#facilities > .inner > *:nth-child(7) {
	-ms-grid-column: 1;
	-ms-grid-row: 3;
}
#products > .inner > *:nth-child(8),
#facilities > .inner > *:nth-child(8) {
	-ms-grid-column: 2;
	-ms-grid-row: 3;
}
#products > .inner > *:nth-child(9),
#facilities > .inner > *:nth-child(9) {
	-ms-grid-column: 3;
	-ms-grid-row: 3;
}
#products > .inner > *:nth-child(10),
#facilities > .inner > *:nth-child(10) {
	-ms-grid-column: 1;
	-ms-grid-row: 4;
}
#products > .inner > *:nth-child(11),
#facilities > .inner > *:nth-child(11) {
	-ms-grid-column: 2;
	-ms-grid-row: 4;
}
#products > .inner > *:nth-child(12),
#facilities > .inner > *:nth-child(12) {
	-ms-grid-column: 3;
	-ms-grid-row: 4;
}
#products > .inner > *:nth-child(13),
#facilities > .inner > *:nth-child(13) {
	-ms-grid-column: 1;
	-ms-grid-row: 5;
}
#products > .inner > *:nth-child(14),
#facilities > .inner > *:nth-child(14) {
	-ms-grid-column: 2;
	-ms-grid-row: 5;
}
#products > .inner > *:nth-child(15),
#facilities > .inner > *:nth-child(15) {
	-ms-grid-column: 3;
	-ms-grid-row: 5;
}
#products > .inner > *:nth-child(16),
#facilities > .inner > *:nth-child(16) {
	-ms-grid-column: 1;
	-ms-grid-row: 6;
}
#products > .inner > *:nth-child(17),
#facilities > .inner > *:nth-child(17) {
	-ms-grid-column: 2;
	-ms-grid-row: 6;
}
#products > .inner > *:nth-child(18),
#facilities > .inner > *:nth-child(18) {
	-ms-grid-column: 3;
	-ms-grid-row: 6;
}
#products > .inner > *:nth-child(19),
#facilities > .inner > *:nth-child(19) {
	-ms-grid-column: 1;
	-ms-grid-row: 7;
}
#products > .inner > *:nth-child(20),
#facilities > .inner > *:nth-child(20) {
	-ms-grid-column: 2;
	-ms-grid-row: 7;
}
#products > .inner > *:nth-child(21),
#facilities > .inner > *:nth-child(21) {
	-ms-grid-column: 3;
	-ms-grid-row: 7;
}
#products > .inner > *:nth-child(22),
#facilities > .inner > *:nth-child(22) {
	-ms-grid-column: 1;
	-ms-grid-row: 8;
}
#products > .inner > *:nth-child(23),
#facilities > .inner > *:nth-child(23) {
	-ms-grid-column: 2;
	-ms-grid-row: 8;
}
#products > .inner > *:nth-child(24),
#facilities > .inner > *:nth-child(24) {
	-ms-grid-column: 3;
	-ms-grid-row: 8;
}
#products > .inner > *:nth-child(25),
#facilities > .inner > *:nth-child(25) {
	-ms-grid-column: 1;
	-ms-grid-row: 9;
}
#products > .inner > *:nth-child(26),
#facilities > .inner > *:nth-child(26) {
	-ms-grid-column: 2;
	-ms-grid-row: 9;
}
#products > .inner > *:nth-child(27),
#facilities > .inner > *:nth-child(27) {
	-ms-grid-column: 3;
	-ms-grid-row: 9;
}
#products > .inner > *:nth-child(28),
#facilities > .inner > *:nth-child(28) {
	-ms-grid-column: 1;
	-ms-grid-row: 10;
}
#products > .inner > *:nth-child(29),
#facilities > .inner > *:nth-child(29) {
	-ms-grid-column: 2;
	-ms-grid-row: 10;
}
#products > .inner > *:nth-child(30),
#facilities > .inner > *:nth-child(30) {
	-ms-grid-column: 3;
	-ms-grid-row: 10;
}

#products > .inner dt,
#facilities > .inner dt {
	margin: 16px;
	padding-top: 36px;
	color: #005bac;
}
#facilities > .inner dt::after {
	border-left: 45px solid #d9e1f2;
}
#products > .inner dt h3,
#facilities > .inner dt h3 {
	font-size: 28px;
	line-height: 1.4;
	margin-bottom: 4px;
}
#products > .inner dt h3 span,
#facilities > .inner dt h3 span {
	display: block;
	font-family: "Fira Sans Extra Condensed", sans-serif;
	font-size: 16px;
}
#products > .inner dt .link,
#facilities > .inner dt .link {
	display: block;
	margin-bottom: 16px;
	padding-top: 16px;
	transition: 0.3s ease;
	text-align: right;
	border-right: 1px solid #005bac;
	border-bottom: 1px solid #005bac;
}

#products > .inner dt .link a,
#facilities > .inner dt .link a {
	display: inline-block;
	position: relative;
	padding: 8px 8px 6px 24px;
	text-decoration: none;
	color: #ffffff;
	background: #005bac;
	line-height: 1;
	transition: 0.3s ease-out;
}
#products > .inner dt .link a:hover,
#facilities > .inner dt .link a:hover {
	padding-right: 14px;
}
#products > .inner dt .link a::after,
#facilities > .inner dt .link a::after {
	display: inline-block;
	position: absolute;
	top: 40%;
	left: 8px;
	width: 6px;
	height: 6px;
	content: "";
	transition: 0.3s ease;
	transform: rotate(45deg);
	border-width: 1px 1px 0 0;
	border-style: solid solid none none;
	border-color: #ffffff #ffffff transparent transparent;
}

#products > .inner dd,
#facilities > .inner dd {
	display: flex;
	flex-direction: column;
	margin: 16px;
	transition: 0.3s ease-out;
	background-color: #ffffff;
	box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.2);
}
#products > .inner dd:hover,
#facilities > .inner dd:hover {
	margin-left: 10px;
	margin-right: 22px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.2);
}
#products > .inner a,
#facilities > .inner a {
	color: inherit;
	text-decoration: none;
}
#products > .inner dd a,
#facilities > .inner dd a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
}

#products > .inner dd .ctsImg,
#facilities > .inner dd .ctsImg {
	margin-bottom: 16px;
}
#products > .inner dd .ctsImg img,
#facilities > .inner dd .ctsImg img {
	width: 100%;
}
#products > .inner dd h3,
#facilities > .inner dd h3 {
	font-size: 18px;
	margin-bottom: 16px;
	padding: 0 16px;
	color: #005bac;
}
#products > .inner dd p.discription,
#facilities > .inner dd p.discription {
	margin-bottom: 16px;
	padding: 0 16px;
	flex-grow: 1;
}
#products > .inner dd img,
#facilities > .inner dd img {
	width: 100%;
}

#products > .inner dd .link,
#facilities > .inner dd .link {
	margin: 16px;
	padding: 4px;
	text-align: center;
	color: #999;
	background: #eee;
	position: relative;
	transition: 0.3s ease-out;
}
#products > .inner dd .link::after,
#facilities > .inner dd .link::after {
	display: inline-block;
	position: absolute;
	top: 40%;
	left: 8px;
	width: 6px;
	height: 6px;
	content: "";
	transition: 0.3s ease;
	transform: rotate(45deg);
	border-width: 1px 1px 0 0;
	border-style: solid solid none none;
	border-color: #999 #999 transparent transparent;
}
#products > .inner dd:hover .link,
#facilities > .inner dd:hover .link {
	color: #fff;
	background: #005bac;
}
#products > .inner dd:hover .link::after,
#facilities > .inner dd:hover .link::after {
	border-color: #fff #fff transparent transparent;
}
#facilities > .inner dt {
	order: 3;
}
#facilities > .inner dd {
	order: 4;
}
#facilities > .inner dd:nth-child(3) {
	order: 2;
}
#facilities > .inner dd:nth-child(2) {
	order: 1;
}

/* ======================================
   information
====================================== */

#information {
	text-align: center;
	background: #ffffff;
}
#information > .inner {
	padding: 48px 24px;
}
#information h3 {
	font-size: 26px;
	line-height: 1.2;
	margin-bottom: 24px;
	color: #aaaaaa;
}
#information h3 span {
	display: block;
	font-family: "Fira Sans Extra Condensed", sans-serif;
	font-size: 16px;
}
#information dl {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #ddd;
}
#information dl dt {
	font-family: "GenShin_regular_JIS2";
	flex-basis: 32%;
	text-align: right;
}
#information dl dd {
	flex-basis: 35%;
	flex-grow: 1;
	text-align: left;
}
#information dl dt,
#information dl dd {
	padding: 16px;
	border-bottom: 1px dotted #ddd;
}
#information dl dt:last-of-type,
#information dl dd:last-of-type {
	border-bottom: none;
}
#information dl dd a {
	color: #005bac;
}

/* ======================================
   comapny
====================================== */

#company {
	background: #ececec;
}
#company > .inner {
	display: flex;
}
#companyInfo {
	flex-basis: 39%;
	flex-grow: 1;
	padding-right: 32px;
}
#companyInfo .companyImg {
	display: flex;
	justify-content: space-around;
	margin-bottom: 24px;
}
#companyInfo .companyImg > div {
	flex-basis: 34%;
	flex-grow: 1;
	overflow: hidden;
}
#companyInfo .companyImg > div:first-child {
	margin-right: 32px;
}
#companyInfo .companyImg > div img {
	width: 100%;
}
#companyInfo .information {
	display: flex;
	flex-wrap: wrap;
}
#companyInfo .information li {
	flex-basis: 34%;
	flex-grow: 1;
	margin-top: 24px;
}
#companyInfo .information li:nth-child(1),
#companyInfo .information li:nth-child(2) {
	margin-top: 0;
}
#companyInfo .information li:nth-child(odd) {
	margin-right: 16px;
}
#companyInfo .information li:nth-child(even) {
	margin-left: 16px;
}
#companyInfo .information li > h3 {
	margin-bottom: 8px;
	padding-left: 8px;
	border-left: 4px solid #666666;
}
#companyInfo .information li > p {
	line-height: 1.4;
}

#recruit {
	display: flex;
	flex-basis: 24%;
	flex-direction: column;
	flex-grow: 1;
	background: #d9d7cc;
}
#recruit h3 {
	margin-bottom: 24px;
	padding: 16px;
	text-align: center;
	color: #ffffff;
	background: #666666;
}
#recruit ul {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding: 0 32px 0;
}
#recruit ul li {
	font-size: 20px;
	flex-basis: 34%;
	flex-grow: 1;
	margin-top: 16px;
}
#recruit ul li:nth-child(1),
#recruit ul li:nth-child(2) {
	margin-top: 0;
}
#recruit ul li::before {
	display: inline-block;
	width: 8px;
	height: 2px;
	margin-right: 8px;
	content: "";
	vertical-align: middle;
	background: #666666;
}
#recruit p {
	margin-bottom: 16px;
	padding: 0 32px 0;
}
#recruit p.link {
	display: flex;
	align-items: flex-start;
	flex-grow: 1;
	justify-content: center;
	margin-bottom: 24px;
	padding: 0 24px;
}
#recruit .link a {
	display: block;
	position: relative;
	width: 100%;
	padding: 16px 0;
	text-align: center;
	color: #ffffff;
	background: #666666;
}

#recruit a::after {
	display: inline-block;
	position: absolute;
	top: 40%;
	left: 20px;
	width: 12px;
	height: 12px;
	content: "";
	transform: rotate(45deg);
	border-width: 1px 1px 0 0;
	border-style: solid solid none none;
	border-color: #ffffff #ffffff transparent transparent;
}

/* --- for 2K or more pc --- */
@media screen and (min-width: 1980px) {
}

/* --- for HD pc --- */
@media screen and (min-width: 1440px) and (max-width: 1979px) {
}

/* --- for normal pc --- */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	#mainVisual > .inner,
	#feature > .inner,
	#products > .inner,
	#facilities > .inner,
	#information > .inner,
	#company > .inner {
		margin: 0;
		padding: 48px 24px;
	}

	#mainVisual {
		display: flex;
		flex-direction: column;
		padding-top: 54vw;
	}
	#mainVisual .copy {
		top: 18vw;
		order: 1;
		width: 40%;
		margin: 0;
		padding: 24px;
	}
	#mainVisual .copy h2 {
		font-size: 2vw;
	}
	#mainVisual #pv {
		order: 2;
		width: 100%;
		max-height: 100%;
		height: 54vw;
	}
	#mainVisual #pv video {
		width: auto;
		width: 100%;
	}
	#mainVisual .text {
		display: block;
		position: static;
		font-size: 3.4vw;
		order: 3;
		width: auto;
		height: auto;
		padding: 32px;
	}
	#mainVisual .text h3 {
		font-size: 160%;
	}
	#mainVisual #slideshow {
		order: 4;
		margin: 0;
		left: 0;
		width: 100%;
		border: none;
	}
	#mainVisual #slideshowLoader {
		order: 5;
	}
	#mainVisual #slideshowNav {
		order: 6;
	}

	/* ======================================
	   feature
	====================================== */

	#feature {
		margin-top: -80px;
		padding-top: 80px;
		background-size: auto 28%, auto 20%;
	}
	#feature > .inner {
		display: block;
	}
	#feature > .inner header {
		font-size: 7vw;
		line-height: 1.6;
		margin: 0 0 48px;
		padding: 0;
	}
	#feature > .inner > div {
		display: flex;
		flex-direction: column;
		margin: 0 0 32px;
	}
	#feature > .inner > div h3 {
		font-size: 6.6vw;
		order: 1;
	}
	#feature > .inner > div .discription {
		order: 2;
		margin-bottom: 24px;
	}
	#feature > .inner > div .link {
		display: block;
		flex-basis: auto;
		order: 3;
		width: 100%;
		margin-bottom: 0;
		padding: 0;
	}
	#feature > .inner > div .link a {
		display: block;
		font-size: 4vw;
		padding: 16px;
		text-align: center;
		line-height: 1;
	}
	#feature > .inner > div .link a::after {
		width: 10px;
		height: 10px;
		top: 40%;
	}

	/* ======================================
	   products, facilities
	====================================== */

	#products > .inner,
	#facilities > .inner {
		display: block;
		padding: 0 0 0.1px;
	}
	#products > .inner dt,
	#facilities > .inner dt {
		position: relative;
		top: 0;
		width: auto;
		margin: 0 24px 24px;
	}
	#products > .inner dt h3,
	#facilities > .inner dt h3 {
		font-size: 7vw;
		line-height: 1.4;
		padding: 0;
	}
	#products > .inner dt h3 span,
	#facilities > .inner dt h3 span {
		font-size: 70%;
	}
	#products > .inner dt .link,
	#facilities > .inner dt .link {
		margin: 0 0 12px;
		padding: 8px 0 0;
	}
	#products > .inner dt .link a,
	#facilities > .inner dt .link a {
		padding: 12px 12px 12px 24px;
	}
	#products > .inner dt .discription,
	#facilities > .inner dt .discription {
		padding: 0;
	}

	#products > .inner dd,
	#facilities > .inner dd {
		display: flex;
		flex-basis: 49.8%;
		flex-direction: column;
		padding: 0;
		margin: 0 24px 24px;
	}
	#products > .inner dd:hover,
	#facilities > .inner dd:hover {
		margin: 0 30px 24px 18px;
	}
	#products > .inner .ctsList > li:first-child {
		margin-left: 0;
	}
	#facilities > .inner .ctsList > li:nth-child(2) {
		margin-right: 0;
	}
	#products > .inner dd h3,
	#facilities > .inner dd h3 {
		font-size: 5.4vw;
		margin-bottom: 12px;
	}
	#products > .inner dd .discription,
	#facilities > .inner dd .discription {
		font-size: 3vw;
		line-height: 1.6;
	}
	#products > .inner dd .discription,
	#facilities > .inner dd .discription {
		margin-bottom: 16px;
	}
	#products > .inner dd .link,
	#facilities > .inner dd .link {
		display: flex;
		font-size: 16px;
		flex-direction: column-reverse;
		flex-grow: 1;
		font-size: 3vw;
		margin: 0 16px 16px;
		padding: 1.6vw 0;
		text-align: center;
	}

	#products > .inner dd a::after,
	#facilities > .inner dd a::after {
		top: 40%;
		left: 12px;
		width: 8px;
		height: 8px;
	}

	#facilities > .inner dt {
		order: 2;
	}
	#facilities > .inner dd {
		order: 3;
	}
	#facilities > .inner dd:nth-child(3) {
		order: 3;
	}
	#facilities > .inner dd:nth-child(2) {
		order: 1;
	}
	/* ======================================
	   information
	====================================== */

	#information > .inner {
		padding: 48px 0;
	}
	#information dl dt {
		flex-basis: 6em;
	}
	#information dl dd {
		flex-basis: 40%;
	}
	#information dl dd a {
		line-height: 1.4;
	}

	/* ======================================
	   comapny
	====================================== */

	#company {
		background: #ececec;
	}
	#company > .inner {
		display: block;
	}
	#companyInfo {
		padding-right: 0;
	}
	#companyInfo .companyImg {
		display: block;
		padding-left: 0;
	}
	#companyInfo .companyImg > div {
		margin: 0 0 16px;
	}
	#companyInfo .companyImg > div:first-child {
		margin-right: 0;
	}
	#companyInfo .information {
		margin-bottom: 32px;
		padding-left: 0;
	}
	#companyInfo .information h3 {
		font-size: 3.6vw;
	}

	#recruit {
		background: #d9d7cc;
	}
	#recruit > * {
		padding: 16px 32px 16px;
	}
	#recruit h3 {
		font-family: "GenShin_regular_JIS2";
		font-size: 3vw;
		margin-bottom: 24px;
		padding: 12px;
	}
	#recruit ul {
		display: grid;
		grid-template-columns: repeat(2, 50%);
		padding: 0 24px;
	}
	#recruit ul li {
		font-size: 6vw;
		margin-bottom: 12px;
		padding: 0;
		margin: 8px 0 0;
	}
	#recruit ul li:first-child,
	#recruit ul li:nth-child(2) {
		margin: 0;
	}
	#recruit ul li::before {
		display: inline-block;
		width: 8px;
		height: 2px;
		margin-right: 8px;
		content: "";
		vertical-align: middle;
		background: #666666;
	}
	#recruit a {
		display: block;
		position: relative;
		padding: 16px 0;
		text-align: center;
		color: #ffffff;
		background: #666666;
	}

	#recruit a::after {
		display: inline-block;
		position: absolute;
		top: 40%;
		left: 20px;
		width: 12px;
		height: 12px;
		content: "";
		transform: rotate(45deg);
		border-width: 1px 1px 0 0;
		border-style: solid solid none none;
		border-color: #ffffff #ffffff transparent transparent;
	}
}

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* ======================================
	   common
	====================================== */

	#mainVisual > .inner,
	#feature > .inner,
	#products > .inner,
	#facilities > .inner,
	#information > .inner,
	#company > .inner {
		/* max-width: 720px; */
	}

	/* ======================================
	   mainVisual
	====================================== */

	#mainVisual .text {
		width: 50%;
		padding: 32px;
		left: 38%;
	}
	#mainVisual #pv video {
		width: auto;
		height: 100%;
	}

	/* ======================================
	   feature
	====================================== */

	#feature > .inner {
		padding: 36px;
	}
	#feature > .inner header {
		font-size: 3vw;
		line-height: 1.8;
	}

	#feature > .inner > div {
		border-left: 4px solid #ffffff;
	}

	#feature h3 {
		font-size: 3vw;
		line-height: 1;
	}
	#feature > .inner > div {
		margin-left: 0;
		margin-bottom: 48px;
	}
	#feature .link {
		flex-basis: auto;
	}
	#feature .link a {
		font-size: 1.4vw;
		position: relative;
		padding: 8px 6px 8px 22px;
		transition: 0.3s ease;
		text-decoration: none;
		color: #005bac;
		background: #ffffff;
	}

	#feature .discription {
		line-height: 1.6;
		color: #ffffff;
	}

	/* ======================================
	   products, facilities
	====================================== */

	#products > .inner,
	#facilities > .inner {
		padding: 32px 24px;
	}
	#products > .inner header h3,
	#facilities > .inner header h3 {
		font-size: 26px;
		line-height: 1.2;
		margin-bottom: 8px;
		padding: 36px 16px 0;
	}
	#products > .inner header .link,
	#facilities > .inner header .link {
		margin: 0 16px 16px;
		padding-top: 8px;
	}
	#products > .inner header .link a,
	#facilities > .inner header .link a {
		padding: 8px 8px 8px 24px;
	}
	#products > .inner header .discription,
	#facilities > .inner header .discription {
		padding: 0 16px;
	}

	#products > .inner dt .link a,
	#facilities > .inner dt .link a {
		padding: 12px 12px 10px 24px;
	}

	#products > .inner dd h3,
	#facilities > .inner dd h3 {
		margin-bottom: 12px;
	}
	#products > .inner dd .discription,
	#facilities > .inner dd .discription {
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 12px;
	}

	/* ======================================
	   company
	====================================== */

	#companyInfo {
		padding-right: 24px;
	}
	#companyInfo .companyImg > div:first-child {
		margin-right: 24px;
	}
	#companyInfo .information li {
		margin-top: 24px;
	}
	#companyInfo .information li:nth-child(odd) {
		margin-right: 16px;
	}
	#companyInfo .information li:nth-child(even) {
		margin-left: 16px;
	}

	#recruit h3 {
		font-size: 12px;
		padding: 16px 8px;
	}
	#recruit ul {
		padding: 0 24px;
	}
	#recruit ul li {
		font-size: 18px;
	}
	#recruit p {
		line-height: 1.6;
		padding: 0 24px 0;
	}
}