@charset "utf-8";

/* ====================================== */

.slideshow {
	height : 200px;
}
.slideshow ul {
	position : relative;
	overflow : hidden;
	flex-wrap : wrap;
	width : 100%;
	height : 200px;
}
.slideshowLoader {
	display : flex;
	z-index : 1;
	position : relative;
	justify-content : center;
	align-items : center;
	width : 100%;
	height : 200px;
	margin-top : -200px;
	transition : 0.3s ease-out;
}
.slideshowLoader::after {
	width : 30px;
	height : 30px;
	content : "";
	transform : translateZ(0);
	animation : load 1.1s infinite linear;
	border-top : 4px solid #005bac;
	border-right : 4px solid #005bac;
	border-bottom : 4px solid #005bac;
	border-left : 4px solid #ffffff;
	border-radius : 50%;
}
@keyframes load {
	0% {
		transform : rotate(0deg);
	}
	100% {
		transform : rotate(360deg);
	}
}
.slideshowLoader.__loadcomplete {
	visibility : hidden;
	opacity : 0;
}
.slideshow .jqSlideshow_indicator {
	display : flex;
	z-index : 1;
	position : relative;
	top : -20px;
	justify-content : center;
	width : 100%;
}
.slideshow .jqSlideshow_indicator a {
	display : block;
	overflow : hidden;
	width : 8px;
	height : 8px;
	margin : 0 5px;
	transition : 0.3s ease-out;
	text-indent : 9999px;
	border : 1px solid #ffffff;
	border-radius : 50%;
	background-color : rgba(0, 0, 0, 0.4);
}
.slideshow .jqSlideshow_indicator a:hover {
	background-color : #005bac;
}
.slideshow .jqSlideshow_indicator a.__select {
	background-color : #ffffff;
}

/* =================================== */

#pageBody .inner > header {
	font-size : 24px;
	line-height : 1.8;
	margin-bottom : 48px;
	text-align : center;
}

#contentHeader {
	background : url("/common/img/bg_content_header_overlay.png"),
	url("/guide/img/img_content_header.jpg");
	background-color : #ffffff;
	background-repeat : repeat, no-repeat;
	background-position : left center, right center;
}

/* ======================================
   index
====================================== */

#index #pageBody .inner > header {
	font-size : 14px;
	margin-bottom : 24px;
	padding : 16px;
	text-align : left;
	background : url(/common/img/bg_line_oblique_white.png) 0 0 repeat #dddddd;
}
#index #pageBody .inner > header > .inner {
	padding : 24px;
	background-color : #ffffff;
}
#index #pageBody h2 {
	font-family : "default";
	font-size : 32px;
	margin-bottom : 24px;
	padding : 8px 0 24px;
	text-align : center;
	letter-spacing : 4px;
	border-bottom : 1px dashed #dddddd;
}
#index #pageBody h3 {
	font-size : 16px;
	line-height : 1.45;
	margin-bottom : 8px;
	padding : 0;
	color : inherit;
	border-bottom : none;
	background : none;
}
#index #pageBody header p {
	margin-bottom : 24px;
}
#index #pageBody header p:last-child {
	margin-bottom : 0;
}
#index #ctsList {
	display : flex;
	flex-wrap : wrap;
}
#index #ctsList li {
	display : flex;
	flex-basis : 34%;
	flex-grow : 1;
	margin-bottom : 32px;
	padding : 16px;
	background : url(/common/img/bg_line_oblique_white.png) 0 0 repeat #dddddd;
}
#index #ctsList li:nth-child(2n) {
	margin-left : 16px;
}
#index #ctsList li > .inner {
	display : flex;
	flex-basis : 100%;
	flex-direction : column;
	flex-grow : 1;
	background-color : #ffffff;
}
#index #ctsList li .ctsImg {
	overflow : hidden;
	height : 180px;
	margin-bottom : 16px;
}
#index #ctsList li .ctsImg img {
	width : 100%;
}
#index #ctsList li .contentTitle {
	font-family : "GenShin_bold_GK";
	font-size : 24px;
	line-height : 1;
	margin : 0 24px;
	margin-bottom : 16px;
}
#index #ctsList li .discription {
	flex-grow : 1;
	margin : 0 24px;
	margin-bottom : 16px;
}

#index #ctsList li .link {
	margin : 0 24px 24px;
	text-align : center;
}
#index #ctsList li .link a {
	display : block;
	position : relative;
	font-family : "GenShin_regular_JIS2";
	line-height : 1;
	padding : 16px 24px 16px 32px;
	transition : 0.3s ease;
	transition : 0.3s ease-out;
	text-decoration : none;
	color : #999999;
	background : #eeeeee;
}
#index #ctsList li .link a::after {
	display : inline-block;
	position : absolute;
	top : 42%;
	left : 12px;
	width : 6px;
	height : 6px;
	content : "";
	transform : rotate(45deg);
	border-width : 1px 1px 0 0;
	border-style : solid solid none none;
	border-color : #999999 #999999 transparent transparent;
}
#index #ctsList li .link a:hover {
	margin-right : 6px;
	margin-left : -6px;
	color : #ffffff;
	background : #005bac;
	box-shadow : 4px 4px rgba(0, 0, 0, 0.2);
}
#index #ctsList li .link a:hover::after {
	border-color : #ffffff #ffffff transparent transparent;
}

/* =================================== */

#companyInfo {
	display : flex;
	flex-direction : column;
	align-items : center;
}
#companyInfo dt {
	display : inline-block;
	flex-shrink : 0;
	min-width : 40%;
	margin-bottom : 16px;
	text-align : center;
	border-bottom : 2px solid #cccccc;
}
#companyInfo dt h3 {
	display : inline-block;
	font-size : 16px;
	margin-bottom : -2px;
	padding : 0 16px 16px;
	letter-spacing : 4px;
	border-bottom : 2px solid #005bac;
	background : none;
}
#companyInfo dd {
	display : inline-block;
	font-size : 18px;
	flex-shrink : 0;
	margin-bottom : 24px;
	padding : 16px;
}
#companyInfo dd p {
	margin-bottom : 16px;
}

#companyInfo dd h4 {
	margin : 0 0 8px;
	padding : 0;
	border-radius : inherit;
	background : none;
}
#companyInfo dd h4::before {
	display : none;
}

#companyInfo .link {
	text-align : center;
}
#companyInfo .link a {
	display : inline-block;
	position : relative;
	font-family : "GenShin_regular_JIS2";
	padding : 16px 24px 16px 32px;
	transition : 0.3s ease;
	text-decoration : none;
	color : #999999;
	background : #eeeeee;
}
#companyInfo .link a:hover {
	margin-right : 4px;
	color : #ffffff;
	background : #005bac;
	box-shadow : 4px 4px 0 0 rgba(0, 0, 0, 0.2);
}
#companyInfo .link a::after {
	display : inline-block;
	position : absolute;
	top : 42%;
	left : 12px;
	width : 6px;
	height : 6px;
	content : "";
	transform : rotate(45deg);
	border-width : 1px 1px 0 0;
	border-style : solid solid none none;
	border-color : #999999 #999999 transparent transparent;
}
#companyInfo .link a:hover::after {
	border-color : #ffffff #ffffff transparent transparent;
}

#companyInfo table {
	width : 100%;
	margin-bottom : 16px;
	border-spacing : 12px;
}
#companyInfo table tr td {
	padding : 8px;
	border-bottom : 1px dashed #cccccc;
}
#companyInfo table tr td:first-child {
	width : 8em;
	text-align : center;
	color : #999999;
}
#companyInfo table tr td:last-child {
	border-right : none;
}
#companyInfo table tr:last-child td {
	border-bottom : none;
}
#companyInfo table tr td:first-child span {
	margin-left : 8px;
}


.frame {
	display : flex;
	margin-bottom : 48px;
}
.frame:last-child {
	margin-bottom : 0;
}
.frame .map {
	flex-grow : 1;
}
#companyInfo dd .frame .map p {
	margin-bottom: 0;
}

.frame .map iframe {
	margin-bottom : 16px;
}
.frame .photo {
	display : flex;
	flex-basis : 360px;
	flex-wrap : wrap;
	margin-left : 16px;
	gap : 8px;
	height : 420px; 
}
.frame .photo li {
	display : flex;
	overflow : hidden;
	flex-basis : calc(50% - 4px);
	flex-grow : 1;
	justify-content : center;
	align-items : center;
	max-height : 240px; 
}
.frame .photo li img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}




/* =================================== */

#factoryInfo dd {
	display : flex;
	margin-bottom : 48px;
}
#factoryInfo dd:last-child {
	margin-bottom : 0;
}
#factoryInfo dd .map {
	flex-grow : 1;
}
#factoryInfo dd .map iframe {
	margin-bottom : 16px;
}
#factoryInfo dd .photo {
	display : flex;
	flex-basis : 360px;
	flex-wrap : wrap;
	margin-left : 16px;
}
#factoryInfo dd .photo li {
	display : flex;
	overflow : hidden;
	flex-basis : 34%;
	flex-grow : 1;
	justify-content : center;
	align-items : center;
	max-height : 115px;
	margin-top : 8px;
}
#factoryInfo dd .photo li:nth-child(1),
#factoryInfo dd .photo li:nth-child(2) {
	margin-top : 0;
}
#factoryInfo dd .photo li:nth-child(2n) {
	margin-left : 8px;
}
#factoryInfo dd .photo li img {
	width : 100%;
}

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

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	#pageBody .inner > header br {
		display : none;
	}

	#index #ctsList {
		display : block;
	}
	#index #ctsList li {
		margin-bottom : 16px;
	}
	#index #ctsList li:nth-child(2n) {
		margin-left : 0;
	}
	#index #ctsList li .contentTitle {
		font-size : 4.8vw;
		margin-bottom : 8px;
	}
	/* =================================== */

	#companyInfo dd {
		padding : 16px 0;
	}
	#companyInfo table tr td:first-child {
		width : 4em;
	}
	#companyInfo table tr td:first-child span {
		display : block;
		font-size : 76%;
		margin-left : 0;
	}
	.frame  {
		display : block;
	}
	.frame .photo {
		margin-left : 0;
		height : auto; 
	}
	.frame  .map {
		margin-bottom : 20px;
	}
	/* =================================== */

	#factoryInfo dd {
		display : block;
	}
	#factoryInfo dd .photo {
		margin-left : 0;
	}
	#factoryInfo dd .map {
		margin-bottom : 20px;
	}
}

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#pageBody .inner > header br {
		display : none;
	}
	#index #ctsList li .contentTitle {
		font-size : 2.4vw;
	}
}