@charset"utf-8";
/*
AUTO CRAFT Web Site ver.1  --  Section CSS
Latest Updated : 12 Mar. 2025
*/

/**
 * Table of Contents
 *
 * 1.0 - Home
 * 2.0 - Page common
 * 3.0 - Quality
 * 4.0 - Strength
 * 5.0 - Business
 * 6.0 - Facility
 * 7.0 - Technology
 * 8.0 - Company
 * 9.0 - Made to order
 * 10.0 - Overseas
 * 11.0 - Anniversary
 * 12.0 - Contact / Sitemap / Privacypolicy
 * 13.0 - Slider
 * ex. - Media Queries
 *
 */


/* **************************************************************************** */
/*
/* 1.0 - home
/*
/* **************************************************************************** */

.home-billboard	{ position:relative; margin:0;}
.home-billboard:before	{ 
	position:absolute; bottom:31px; left:calc(50% - 31px); z-index:10; content:'SCROLL'; text-align:left;
	width:80px; height:18px; font-size:10px; color:rgba(255,255,255,.5);
	border-bottom:1px solid rgba(255,255,255,.4);
	transform:rotate(90deg);
}
.home-billboard:after	{ 
	position:absolute; bottom:0; left:50%; content:''; 
	width:0; height:0; 
	border-left:1px solid #fff;
	animation: scrol 2s ease 0s infinite;
}


.home-billboard .home-billboard-title	{ 
	position:absolute; top:15%; left:0; padding:0 10%; width:100%;
}
.home-billboard .home-billboard-title p	{ 
	float:right;
	writing-mode:vertical-rl; text-align:left; font-size:3.4rem; line-height:1.6; color:#fff; font-family:"游明朝", YuMincho, serif; 
	text-shadow:0 0 8px rgba(20,30,60,.8);
}
.home-billboard .home-billboard-title p span	{ opacity:0; display:inline-block;}
.home-billboard .home-billboard-title.show p span:nth-child(1)	{ animation:home-bb-title 0.6s ease-out 0.3s 1 normal forwards;}
.home-billboard .home-billboard-title.show p span:nth-child(3)	{ animation:home-bb-title 0.7s ease-out 0.6s 1 normal forwards;}

.home-billboard .home-billboard-title .b_video		{ position:absolute; bottom:-50px; width:80%; opacity:0; transform:translateY(20px); transition:all 0.4s ease;}
.home-billboard .home-billboard-title .b_video.show	{ opacity:1; transform:translateY(0);}
.home-billboard .home-billboard-title .b_video a	{
	display:block; position:absolute; bottom:0; right:calc(50% - 22px);
	width:44px; height:44px; font-size:0;
	background-color:#2F56CC; border-radius:100%;
}
.home-billboard .home-billboard-title .b_video a:before	{
	position:absolute; top:calc(50% - 5px); left:calc(50% - 4px); content:'';
	width:0; height:0; border:solid transparent; border-width:5px 0 5px 10px; border-left-color:#fff;
	transition:all 0.2s ease;
}
.home-billboard .home-billboard-title .b_video a:after	{
	position:absolute; top:calc(50% - 25px); left:calc(50% - 25px); content:'';
	width:50px; height:50px; background:url(../images/rolling-circle.svg) no-repeat center center / 100%;
	transition:all 0.4s ease;
	animation:playbtn 2.2s linear 0s infinite normal forwards;
}
.home-billboard .home-billboard-title .b_video a:hover:before	{
	top:calc(50% - 7px); left:calc(50% - 6px);
	border-width:7px 0 7px 14px;
}
.home-billboard .home-billboard-title .b_video a:hover:after {
	top:calc(50% - 30px); left:calc(50% - 30px);
	width:60px; height:60px;
	animation:playbtn 1.2s linear 0s infinite normal forwards;
}

@keyframes billboard_arrow1	{
	0%		{ height:0; bottom:40px;}
	50%		{ height:30px; bottom:10px;}
	100%	{ height:0; bottom:10px;}
}
@keyframes billboard_arrow2	{
	0%		{ bottom:40px; opacity:0;}
	50%		{ bottom:10px; opacity:1;}
	100%	{ bottom:10px;}
}
@keyframes playbtn	{
	0%		{ transform:rotate(0deg)}
	100%	{ transform:rotate(360deg);}
}

@keyframes home-bb-title	{
	0%		{ transform:translateY(-40px); opacity:0;}
	100%	{ transform:translateY(  0px); opacity:1;}
}


@keyframes scrol {
	0%	{ bottom:80px; height:0; }
   50%	{ bottom:0; height:80px; }
   100%	{ bottom:0; height:0; }
}


.video-wrap {
	position:relative; width:100vw; height:calc(100vh - 75px); overflow:hidden;
}
.video-wrap:after { position:absolute; top:0; left:0; bottom:0; right:0; content:''; background-color:rgba(0,0,0,.05);}
video	{
	position:relative;
	background:#f0f0f0 url(../images/home-billboard.jpg) no-repeat center center / cover;
/*
	position:absolute;
	min-width :100vw;
	min-height:100vh;
	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);	
*/
}
#mute		{ display:none; position:absolute; bottom:16px; right:8px; z-index:9; width:32px; height:29px; font-size:0; background:url(../images/icon-mute-on.png) no-repeat 0 0 / 32px auto; cursor:pointer;}
#mute.off	{ background-image:url(../images/icon-mute-off.png);}


@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
	video {
		width: 100%;
		height:auto;
		top: 50%;
		left:0;
		transform: translateY(-50%);
	}
}
@media (max-aspect-ratio: 16/9) {
	video {
		height: 100%;
		left: 50%;
		right:auto;
		transform: translateX(-50%);
	}
}



.home-philosophy	{ padding:15vh 0;}
.home-philosophy .section-title	{ 
	margin:0 0 3rem; padding:0 5%;
	font-family:azo-sans-web, sans-serif;
	text-align:right; font-size:1.6rem; font-weight:500;
	text-transform:uppercase;
}
.home-philosophy .section-title span	{ position:relative; display:inline-block; padding:0 0 0 33px;}
.home-philosophy .section-title span:before	{ 
	position:absolute; bottom:10px; left:0; content:'';
	width:30px; height:0; border-bottom:2px solid #141E3C;
}
.home-philosophy p	{
	position:relative; left:50%; transform:translateX(-50%);
	writing-mode:vertical-rl; text-align:left; 
	font-family:"游明朝", YuMincho, serif; font-size:1.4rem; line-height:2;
}



.sec-home-feature	{}
.sec-home-feature ul	{}
.sec-home-feature li	{ position:relative; margin:0 0 1px;}
.sec-home-feature .cell		{ }
.sec-home-feature .image	{ position:relative; overflow:hidden;}
.sec-home-feature .image:before	{ position:absolute; top:0; left:0; content:''; width:100%; height:100%; background-color:rgba(20,30,60,.5);}
.sec-home-feature h4		{ position:relative; line-height:1.2; color:#141E3C;}
.sec-home-feature h4:before	{ position:absolute; bottom:-15px; left:calc(50% - 20px); content:''; width:40px; height:0; border-bottom:1px solid #141E3C; transition:all 0.2s ease;}
.sec-home-feature h4:after	{ position:absolute; bottom:-11.5px; left:calc(50% + 11px); content:''; width:10px; height:0; border-bottom:1px solid #141E3C; transform:rotate(45deg); transition:all 0.2s ease;}
.sec-home-feature h4 b		{ display:block; margin-bottom:1rem; font-size:1.8rem;}
.sec-home-feature h4 small	{ display:inline-block; font-family:azo-sans-web, sans-serif; font-size:1.3rem; font-weight:500; line-height:1.2; text-transform:uppercase;}
.sec-home-feature a			{ 
	display:flex; justify-content:center; align-items:center; 
	position:absolute; top:15%; bottom:15%; left:25%; width:50%; 
	background-color:rgba(255,255,255,.8);
}
.sec-home-feature a:hover		{ top:10%; bottom:10%; left:20%; width:60%;}
.sec-home-feature a:hover h4:before	{ left:calc(50% - 30px); width:60px;}
.sec-home-feature a:hover h4:after	{ left:calc(50% + 21px);}


.sec-home-recruit	{}
.sec-home-recruit .section-header	{ padding:8rem 5%;}
.sec-home-recruit .section-title	{ text-align:left; font-size:3rem;}
.sec-home-recruit .section-title small	{ position:relative; margin:6px 0 0 10px; display:inline-block; vertical-align:top; font-family:azo-sans-web, sans-serif; font-size:1.3rem; font-weight:500;}
.sec-home-recruit .section-title small:after	{ position:absolute; bottom:0; left:0; content:''; width:24px; height:0; border-bottom: 2px solid #141E3C;}
.sec-home-recruit .section-content	{ position:relative; padding:5rem 0; background-color:#EDEEF0;}
.sec-home-recruit .section-content .image	{ display:none;}
.sec-home-recruit ul	{ position:relative; z-index:2; margin:0; padding:0 10%;}
.sec-home-recruit li	{ margin:0 0 10px;}
.sec-home-recruit li h4	{ line-height:1.2; color:#141E3C;}
.sec-home-recruit li h4 b		{ display:block; margin-bottom:1rem; font-size:1.8rem;}
.sec-home-recruit li h4 small	{ display:inline-block; font-family:azo-sans-web, sans-serif; font-size:1.3rem; font-weight:500; line-height:1.2; color:#DEA300; text-transform:capitalize;}
.sec-home-recruit li a	{ display:block; padding:5rem 0; width:100%; background-color:rgba(255,255,255,.95);}
.sec-home-recruit li a:hover	{}


.sec-home-group	{ padding:0 0 4rem;}
.sec-home-group .section-header	{ padding:4rem 5% 3rem;}
.sec-home-group .section-title	{ margin-bottom:1em; font-family:azo-sans-web, sans-serif; text-transform: uppercase;}
.sec-home-group .section-header p	{ color:#727171;}
.sec-home-group ul	{ 
	display:flex; flex-flow:wrap; flex-direction:row; justify-content:flex-start;
	margin:0 8%;
}
.sec-home-group li	{ margin:0 1% 8px; width:48%; border:1px solid #eee;}
.sec-home-group a	{}
.sec-home-group .banner-ktg		{ margin:0 8% 4rem; text-align:center;}
.sec-home-group .banner-ktg img	{ width:100%; max-width:720px;}
.sec-home-group .banner-ktg a svg	{ width:100%; height:auto;}
.sec-home-group .banner-ktg a	{ position:relative; display:block; margin:0 auto; padding:0; max-width:720px; border:2px solid #945b9b;}
.sec-home-group .banner-ktg a:before	{ position:absolute; top:5px; right:5px; content:''; width:11px; height:9px; border:1.5px solid #945b9b;}
.sec-home-group .banner-ktg a:after		{ position:absolute; top:10px; right:10px; content:''; width:9px; height:7px; border:solid #945b9b; border-width:0 0 1.5px 1.5px;}
.sec-home-group .r6noto	{ padding:3rem 8% 0;}
.sec-home-group .r6noto .content	{ margin:0 auto; padding:3em 5% 1em; text-align:left; max-width:1280px; border:1px solid #141E3C;}
.sec-home-group .r6noto h4	{ margin:0 0 1.6em;}
.sec-home-group .r6noto p	{ margin:0 0 1.6em; line-height:1.8;}
.sec-home-group .r6noto p.group	{ font-size:1.3rem;}
.sec-home-group .r6noto p span	{ display:inline-block; margin:0 1em 0 0;}


.interval	{ 
	position:relative; height:50vh; overflow:hidden;
	background-image:url(../images/kyotoscene--s_194705.jpg);
	background-repeat:no-repeat; background-position:0 0; background-size:100% auto;
}
.interval:before	{ 
	position:absolute; top:0; left:0; content:'';
	width:100%; height:100%; background:url(../images/mesh-s.png) repeat center top / 12px;
	box-shadow: inset 0 0 20px rgba(0,0,0,.1);
}
@media (aspect-ratio: 1/1), (min-aspect-ratio: 16/15) {
	.interval	{ 
		background-image:url(../images/kyotoscene--m_7a851f.jpg);
	}
}
@media (max-aspect-ratio: 16/15) {
	.interval	{ 
		height:30vh;
		background-image:url(../images/kyotoscene--s_4c4af6.jpg);
	}
}


.banner-sanga	{ margin:0; padding:4rem 10%; background-color:#ddd;}
.banner-sanga a	{ display:block; margin:0 auto; max-width:512px;}




/* **************************************************************************** */
/*
/* 2.0 - Page common
/*
/* **************************************************************************** */

.page-billboard	{ position:relative; padding:0; background-color:#AFBADA;}
.page-billboard .content	{ position:absolute; top:50%; width:100%;}
.page-billboard .page-title		{ position:relative; z-index:1; margin:0 0 12px; padding:0 5% 0 5%; width:100%; text-align:left; font-family:azo-sans-web, sans-serif ; line-height:1; color:#fff; text-transform:uppercase;}
.page-billboard .page-title b	{ display:block; margin:0 0 0; font-size:4.0rem; line-height:1;}
.page-billboard .page-title small	{ display:block; font-size:2.1rem; line-height:1;}
.page-billboard .page-title small.jp	{ margin:1rem 0; font-family:"游明朝", YuMincho, serif;}
.page-billboard p	{ font-size:1.6rem; line-height:1.8; font-weight:bold; color:#fff;}

.page .lead	{ background-color:#fff;}
.page .lead .content	{ padding:0 4% 5.5rem;}
.page .lead p	{ margin:0;}

.page-header	{ position:relative; margin:0 0 3rem; padding:0 5%;}
.page-header .page-title	{ display:inline-block; margin:-35px 0 0 0; padding:1.5rem 1.5rem; font-family:"游明朝", YuMincho, serif; line-height:1.2; letter-spacing:0.05em; background-color:#fff;}
.page-content	{ margin:0 auto; padding:0 5%;}

.search-result	{ padding:0 5% 4rem; text-align:left;}
.search-result h3	{ margin:0 0 1em; font-weight:normal;}
.search-result ul	{ margin:2em 0;}
.search-result li	{ position:relative; margin:0 0 1em;}
.search-result li:before	{ content:'・';}
.search-result li a	{}
.search-result li a:hover	{}

.error-404 .page-content { text-align:left;}



/* **************************************************************************** */
/*
/* 3.0 - Business
/*
/* **************************************************************************** */

.page-business .page-billboard .content	{ top:40%;}

.about-autocraft		{ margin:0 0 8rem;}
.about-autocraft .graph	{ margin:2rem 5%;}

.about-ktg	{ margin:0 0 8rem;}
.about-ktg h2	{ line-height:1.0; text-align:center;}
.about-ktg h2 img	{ max-width:512px;}
.about-ktg .group	{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.about-ktg .group:before	{ position:absolute; top:0; left:50%; content:''; width:0; height:100%; border-left:1px solid #979797;}
.about-ktg .group:after	{ position:absolute; top:50%; left:0; content:''; width:100%; height:0; border-bottom:1px solid #979797;}
.about-ktg .group li	{ width:50%; text-align:center;}
.about-ktg .group li .content	{ position:relative; padding:1rem;}
.about-ktg .group li .logo		{ text-align:center;}
.about-ktg .group li .logo img	{ width:100%; height:auto; max-width:228px;}
.about-ktg .group li p	{ margin:0 0 1em; font-size:1.2rem; font-weight:bold; line-height:1.25;}
.about-ktg .group li a	{}



/* **************************************************************************** */
/*
/* 4.0 - Interview
/*
/* **************************************************************************** */

.interview-thumbnails	{ 
	position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
	margin:0 0 15vh; padding:0 5%; 
}
.interview-thumbnails li	{
	width:45%; 
}
.interview-thumbnails li p { 
	position:relative; margin:-30px 0 40px; padding:8px;
	font-weight:bold; color:#fff; line-height:1.5;
	background-color:#141E3C;
	transform:translate(10px, 0px); transition:all 0.2s ease;
}
.interview-thumbnails li p small { display: block; font-family:azo-sans-web, sans-serif; font-size:1.0rem; text-transform:uppercase;} 
.interview-thumbnails li p:before	{ position:absolute; top:50%; right:8px; content:''; width:30px; height:0; border-bottom:1px solid #fff; transition:all 0.2s ease;}
.interview-thumbnails li p:after	{ position:absolute; top:calc(50% - 3px); right:7px; content:''; width:10px; height:0; border-bottom:1px solid #fff; transform:rotate(45deg); transition:all 0.2s ease;}
.interview-thumbnails a:hover p { background-color:#2F56CC;}


.interview	{ padding:0 0 5rem;}
.interview:nth-child(odd) { background-color:#F5F4F3;}
.interview-header	{ 
	position:relative; margin:0 0 3rem; padding:0;
}
.interview:nth-child(odd) .interview-header	{}
.interview-header .image		{}
.interview-header .image img	{}
.interview-header .section-title	{ position:absolute; bottom:0%; left:0%;}
.interview-header .section-title h2	{ 
	display:inline-block; margin:0 auto; padding:1rem 2rem 1rem; 
/*	writing-mode:vertical-rl; text-align:left; */
	font-family:"游明朝", YuMincho, serif; font-size:4.0rem; font-weight:600; line-height:1.1; color:#fff;
	background-color:#141E3C;
}
.interview-header .section-title small { display:inline-block; margin:-5px 0 30px; padding:0.8rem 2rem; font-family:azo-sans-web, sans-serif; font-size:1.4rem; text-transform:uppercase; color:#fff; background-color:#141E3C;}
.interview:nth-child(odd)	.interview-header .section-title h2	{}
.interview:nth-child(odd)	.interview-header .section-title h2	{}
.interview:nth-child(odd)	.interview-header .section-title small {}
.interview:nth-child(even)	.interview-header .section-title small {}

.interview .section-content	{ padding:0 5%;}
.interview .section-content h3 		{ margin:0 0 1em;}
.interview .section-content .col2	{ margin:0 0 6rem;}
.interview .section-content .image	{ margin:0 0% 2.5rem;}




/* **************************************************************************** */
/*
/* 5.0 - Facilities
/*
/* **************************************************************************** */

.facility-point	{ margin-bottom:14rem;}
.facility-points-header	{ position:relative; margin:0 0 3rem;}
.facility-points-header .image	{}
.facility-points-header .section-title	{ 
	position:absolute; top:-40px; left:5%; margin:0; padding:4rem 1rem 4rem;
	writing-mode:vertical-rl; text-align:left; font-size:3.3rem;
	background-color:#fafafa;
	border-top:4px solid #093473;
}

.facility-point .section-content	{ padding:0 8%;}
.facility-point .facilities	{}
.facility-point .facilities .text	{}
.facility-point .facilities .images	{ margin:0 0 6.0rem;}
.facility-point .facilities .image	{ margin:0 0 1.5rem;}

.page-facilities .page-content .lead { margin-bottom:8rem;}

.closeup	{
	margin:0 5%; padding:3rem 8% 6rem;
	background-color:#EDEEF0; border-radius:5px; box-shadow:inset 1px 1px 20px rgba(0,0,0,.1);
}
.closeup .images	{
	margin:0 0 3.0rem;
}
.closeup .images .image	{ margin:0 0 1px;}
.closeup .closeup-header	{}
.closeup .closeup-title		{ position:relative; margin:0 0 -1em -10px; line-height:1.1; color:#fff;}
.closeup .closeup-title small	{ display:inline-block; padding:0.8rem 2rem 0.2rem; font-family:azo-sans-web, sans-serif; text-transform:uppercase; background-color:#093473;}
.closeup .closeup-title b		{ display:inline-block; padding:0.8rem 2rem; background-color:#093473;}
.closeup p	{ font-size:1.3rem;}

.closeup .col3 > div.image	{ padding:1px;}
.closeup .col3 > div.image:nth-child(2),
.closeup .col3 > div.image:nth-child(3)	{ display:inline-block; width:50%;}




/* **************************************************************************** */
/*
/* 6.0 - Company
/*
/* **************************************************************************** */

.outline	{ margin:0 0 10vh; border-top:1px solid #BEC2CC;}
.outline dt	{ margin:0; padding:1.2em 0 0;}
.outline dd	{ margin:0; padding:0 0 1.2em; border-bottom:1px solid #BEC2CC;}

.history-title	{ position:relative; padding-left:0.25em; text-align:center; font-family:"游明朝", YuMincho, serif; font-size:3.3rem; letter-spacing:0.25em;}
.history-title:after	{ position:absolute; bottom:-55px; left:50%; content:''; width:0; height:50px; border-left:1px solid #141E3C;}
.history	{ margin:0 0 20vh; font-size:1.3rem;}
.history dt	{ display:inline-block; vertical-align:top; float:left; padding:1.6em 0 0; font-size:1.3rem;}
.history dd	{ margin:0; padding:1.6em 0 2.0em 6.5em; border-bottom:1px solid #BEC2CC;}




/* **************************************************************************** */
/*
/* 7.0 - Recruit
/*
/* **************************************************************************** */

/**
/* 7.1 - Home
 */
.recruit-nav	{  padding:10vh 5%; background-color:#EDEEF0;}
.recruit-nav ul	{ margin:0; padding:0 10%;}
.recruit-nav li	{ margin:0 0 10px;}
.recruit-nav a	{ display:block; padding:5rem 0; text-align:center; background-color:#fff;}
.recruit-nav h4	{ line-height:1.2;}
.recruit-nav h4 b		{ display:block; color:#141E3C; margin-bottom:1rem; font-size:1.8rem;}
.recruit-nav h4 small	{ display:block; color:#DEA300; font-family:azo-sans-web, sans-serif; font-size:1.3rem; font-weight:500; text-transform:capitalize;}
.recruit-nav a:hover	{}


.page-recruit .page-billboard .jp	{ display:none;}
.recruit-feature	{ }
.recruit-feature ul	{}
.recruit-feature li	{ position:relative; margin:0 0 1px;}
.recruit-feature .image		{ overflow:hidden;}
.recruit-feature .image img	{ transition:all 2s ease;}
.recruit-feature h4			{ position:relative; margin:0; line-height:1.2; color:#fff;}
.recruit-feature h4:before	{ position:absolute; top:50%; right:0%; content:''; width:40px; height:0; border-bottom:1px solid #fff; transition:all 0.2s ease;}
.recruit-feature h4:after	{ position:absolute; top:calc(50% - 3px); right:-3px; content:''; width:10px; height:0; border-bottom:1px solid #fff; transform:rotate(45deg); transition:all 0.2s ease;}
.recruit-feature h4 b		{ display:block; margin-bottom:0.2rem; font-size:1.8rem;}
.recruit-feature h4 small	{ font-family:azo-sans-web, sans-serif; font-size:1.2rem; font-weight:500; text-transform:uppercase;}
.recruit-feature .cell		{ 
	display:block; position:relative; margin:-30px 5% 40px; padding:12px 8%;
	font-weight:bold; color:#fff; line-height:1.5;
	background-color:#093473;
	transition:all 0.2s ease;
}
.recruit-feature a			{ display:block;}
.recruit-feature a:hover .cell		{ background-color:#2F56CC;}
.recruit-feature a:hover h4:before	{ right:-10px; width:50px;}
.recruit-feature a:hover h4:after	{ right:-13px;}

.recruit-numbers	{ position:relative;}
.recruit-numbers .image	{ max-height:330px; overflow:hidden;}
.recruit-numbers h4		{ position:relative; margin:0; text-align:center; line-height:1.2;}
.recruit-numbers h4:before	{ position:absolute; bottom:-15px; left:calc(50% - 20px); content:''; width:40px; height:0; border-bottom:1px solid #141E3C; transition:all 0.2s ease;}
.recruit-numbers h4:after	{ position:absolute; bottom:-11.5px; left:calc(50% + 11px); content:''; width:10px; height:0; border-bottom:1px solid #141E3C; transform:rotate(45deg); transition:all 0.2s ease;}
.recruit-numbers h4 b		{ display:block; margin-bottom:0.2rem; font-family:azo-sans-web, sans-serif; font-size:2.4rem; text-transform:uppercase;}
.recruit-numbers h4 small	{ font-family:azo-sans-web, sans-serif; font-size:1.2rem; font-weight:500; text-transform:uppercase;}
.recruit-numbers a			{ 
	display:flex; justify-content:center; align-items:center; 
	position:absolute; top:15%; bottom:15%; left:14%; width:72%; 
	color:#2F56CC;
	background-color:rgba(255,255,255,.8);
}
.recruit-numbers a:hover h4:before	{ left:calc(50% - 30px); width:60px;}
.recruit-numbers a:hover h4:after	{ left:calc(50% + 21px);}


/**
/* 7.2 - Message
 */
.page-message .lead	{ margin:0 0 6rem; padding:5rem 0 0;}
.page-message .lead h2	{ font-family:"游明朝", YuMincho, serif;}
.page-message .lead	.sign	{ margin:0 0 2em; text-align:right; font-family:"游明朝", YuMincho, serif; font-size: 1.8rem;}
.page-message .lead	p	{ font-family:"游明朝", YuMincho, serif; font-size: 1.5rem;}

.page-message .col2	{ margin:0 0 6rem;}
.page-message .col2 .image	{ margin:0 0 3rem;}


/**
/* 7.3 - System
 */
.system	{ padding:10vh 5%; background-color:#F8F8F8;}
.system .section-header { margin:0 auto;}
.system	.section-title	{ line-height:1.2;}
.system	.section-title small{ display:block; font-family:azo-sans-web, sans-serif; font-size:1.6rem; line-height:1.2; text-transform:uppercase;}
.system	.section-content	{ margin:0 auto;}
.system	.system-lead	{}
.system	.system-graph	{ text-align:center;}
.system	.system-graph > div	{ display:inline-block;}
.system	.system-graph .stage	{ width:260px;}
.system	.system-graph .lists	{ text-align:left;}
.system	.system-graph h4		{}
.system	.system-graph h4 span	{ display:inline-block; padding:0.4rem 1em; color:#fff; background-color:#141E3C;}
.system	.system-graph p			{ margin:0; font-size:1.3rem;}


/**
/* 7.4 - Numbers
 */
.page-numbers .page-billboard { overflow:hidden;}
.page-numbers .page-billboard .content	{ top:40%;}
.page-numbers .page-title small.jp	{ font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", sans-serif;}
.page-numbers .page-header	{ display:none;}
.page-numbers .lead	{ padding:4rem 5% 0;}
.numbers	{ padding:10vh 3%;}
.numbers svg	{ width:100%; display:none;}
.q01 svg	{ fill:#ffffff; filter:drop-shadow(4px 4px 15px rgba(0,0,0,.1));}
.q01	{ background-color:#fafafa;}
.q02	{ background-color:#7A9AC0;}
.q03	{ background-color:#E6E6E6;}
.q04	{ background-color:#fafafa;}
.q05	{ background-color:#acacac;}
.q06	{ background-color:#5C646B;}
.q07	{ background-color:#fafafa;}
.q08	{ background-color:#F6E27C;}
.q09	{ background-color:#E9E7DD;}
.q10	{ background-color:#fafafa;}
.q11	{ background-color:#EDB58F;}
.q12	{ background-color:#E6E6E6;}
.q13	{ background-color:#acacac;}
.numbers ul	{ padding:0;}
.numbers ul > li	{ position:relative; margin:0 0 8.5rem; box-shadow:4px 8px 15px rgba(0,0,0,.1);}
.numbers ul li:after	{ }
.numbers ul > li:nth-child(odd)	{ margin-right:8%;}
.numbers ul > li:nth-child(odd):after	{
	position:absolute; bottom:-46px; right:-5.1px; content:'';
	width:0; height:0; border:solid transparent; border-width:35px 0 35px 35px; border-left-color:#fff;
	transform:rotate(-45deg);
}
.numbers ul > li:nth-child(even)	{ margin-left: 8%;}
.numbers ul > li:nth-child(even):after	{
	position:absolute; bottom:-46px; left:-5.1px; content:'';
	width:0; height:0; border:solid transparent; border-width:35px 35px 35px 0; border-right-color:#fff;
	transform:rotate(45deg);
}
.numbers ul > li.q01:after	{ border-left-color: #fafafa;}
.numbers ul > li.q02:after	{ border-right-color:#7A9AC0;}
.numbers ul > li.q03:after	{ border-left-color: #E6E6E6;}
.numbers ul > li.q04:after	{ border-right-color:#fafafa;}
.numbers ul > li.q05:after	{ border-left-color: #acacac;}
.numbers ul > li.q06:after	{ border-right-color:#5C646B;}
.numbers ul > li.q07:after	{ border-left-color: #fafafa;}
.numbers ul > li.q08:after	{ border-right-color:#F6E27C;}
.numbers ul > li.q09:after	{ border-left-color: #E9E7DD;}
.numbers ul > li.q10:after	{ border-right-color:#fafafa;}
.numbers ul > li.q11:after	{ border-left-color: #EDB58F;}
.numbers ul > li.q12:after	{ border-right-color:#E6E6E6;}
.numbers ul > li.q13:after	{ border-left-color: #acacac;}
.numbers ul > li.q06	{ color:#DFC647;}
.numbers li h4	{ vertical-align:bottom;}
.numbers li .num	{
	display:inline-block; vertical-align:bottom; height:35px; font-size:0;
	background-repeat:no-repeat; background-position:left top; background-size:auto 33px;
}
.numbers li.q01 .num	{ width: 75px; background-image:url(../images/q01.svg);}
.numbers li.q02 .num	{ width: 85px; background-image:url(../images/q02.svg);}
.numbers li.q03 .num	{ width: 85px; background-image:url(../images/q03.svg);}
.numbers li.q04 .num	{ width: 90px; background-image:url(../images/q04.svg);}
.numbers li.q05 .num	{ width: 85px; background-image:url(../images/q05.svg);}
.numbers li.q06 .num	{ width: 90px; background-image:url(../images/q06.svg);}
.numbers li.q07 .num	{ width: 90px; background-image:url(../images/q07.svg);}
.numbers li.q08 .num	{ width: 88px; background-image:url(../images/q08.svg);}
.numbers li.q09 .num	{ width: 88px; background-image:url(../images/q09.svg);}
.numbers li.q10 .num	{ width:120px; background-image:url(../images/q10.svg);}
.numbers li.q11 .num	{ width:105px; background-image:url(../images/q11.svg);}
.numbers li.q12 .num	{ width:116px; background-image:url(../images/q12.svg);}
.numbers li.q13 .num	{ width:128px; background-image:url(../images/q13.svg);}
.numbers li .content	{ padding:2rem 5%;}
.numbers li .content li	{ margin:0 0 0.5rem; box-shadow:0 0 0;}
.numbers li .content li:after	{ border:0;}
.numbers li .graph		{ position:relative;}

.numbers li.q01 .graph .image img	{ visibility:hidden;}
.numbers li.q01 .graph .image img:nth-child(2),
.numbers li.q01 .graph .image img:nth-child(3)	{ display:none;}
.numbers li.q01 .graph .image { 
	background:url(../images/q01-1.png) no-repeat center top / 100% auto;
	animation:q01graph 2s linear 0s infinite normal forwards;
}
.numbers li.q01 p	{ margin:0; text-align:center; font-size:5rem; font-weight:bold; line-height:1.2;}
.numbers li.q01 .shain	{ position: absolute; top:30%; left:0; width:100%; color:#093473;}
.numbers li.q01 .number	{ font-family:azo-sans-web, sans-serif; font-size:7rem; font-weight:700;}
.numbers li.q01 .caption	{ text-align:center; font-size:1.2rem; font-weight:normal;}
@keyframes q01graph	{
	0%		{ background-image:url(../images/q01-1.png);}
	33%		{ background-image:url(../images/q01-2.png);}
	66%		{ background-image:url(../images/q01-3.png);}
	100%	{ background-image:url(../images/q01-1.png);}
}

.numbers li.q02 .graph	{ position:relative;}
.numbers li.q02 .bars	{ 
	position:absolute; top:0; left:0; width:100%; height:100%;
	display:flex; flex-wrap:wrap; justify-content: space-around;
}
.numbers li.q02 .bars .barr	{ position:relative; text-align:center; width:16.5%;}
.numbers li.q02 .bars .n	{ display:block; position:absolute; bottom:18%; left:0; width:100%; height:14px; background-repeat:no-repeat; background-position:center top; background-size:40px auto; transition:all 0.8s ease;}
.numbers li.q02 .bar1 .n	{ background-image:url(../images/q02-n1.svg);}
.numbers li.q02 .bar2 .n	{ background-image:url(../images/q02-n2.svg);}
.numbers li.q02 .bar3 .n	{ background-image:url(../images/q02-n3.svg);}
.numbers li.q02 .bar4 .n	{ background-image:url(../images/q02-n4.svg);}
.numbers li.q02 .bar5 .n	{ background-image:url(../images/q02-n5.svg);}
.numbers li.q02 .bar6 .n	{ background-image:url(../images/q02-n6.svg);}
.numbers li.q02.show .bar1 .n	{ bottom:24%;}
.numbers li.q02.show .bar2 .n	{ bottom:42%;}
.numbers li.q02.show .bar3 .n	{ bottom:90%;}
.numbers li.q02.show .bar4 .n	{ bottom:98%;}
.numbers li.q02.show .bar5 .n	{ bottom:80%;}
.numbers li.q02.show .bar6 .n	{ bottom:72%;}
.numbers li.q02 .bars .bar	{ position:absolute; bottom:15%; left:calc(50% - 20px); width:40px; height:1px; background-color:#8CDA44; transition:all 0.8s ease;}
.numbers li.q02 .bar1 .bar	{ background-color:#8CDA44;}
.numbers li.q02 .bar2 .bar	{ background-color:#4D6A0C;}
.numbers li.q02 .bar3 .bar	{ background-color:#146C6F;}
.numbers li.q02 .bar4 .bar	{ background-color:#102389;}
.numbers li.q02 .bar5 .bar	{ background-color:#80217D;}
.numbers li.q02 .bar6 .bar	{ background-color:#A31919;}
.numbers li.q02.show .bar1 .bar	{ height: 6%;}
.numbers li.q02.show .bar2 .bar	{ height:24%;}
.numbers li.q02.show .bar3 .bar	{ height:72%;}
.numbers li.q02.show .bar4 .bar	{ height:81%;}
.numbers li.q02.show .bar5 .bar	{ height:63%;}
.numbers li.q02.show .bar6 .bar	{ height:54%;}


.numbers li.q03 .graph .image img	{ visibility:hidden;}
.numbers li.q03 .q03-1	{ position:absolute; bottom:0%; left:27%; width:25%; z-index:3;}
.numbers li.q03 .q03-2	{ position:absolute; top:0%; left:0%; width:35%; transform:scale(0.1);}
.numbers li.q03 .q03-3	{ position:absolute; bottom:0%; right:19%; width:24%; z-index:4;}
.numbers li.q03 .q03-4	{ position:absolute; top:0%; right:4%; width:28%; transform:scale(0.1);}
.numbers li.q03 .q03-2.ef.show,
.numbers li.q03 .q03-4.ef.show	{ visibility:visible !important; opacity:1 !important; transform:translateY(0px) scale(1); transition:all 0.5s ease;}

.numbers li.q04 .graph	{ position:relative;}
.numbers li.q04 .bars	{ 
	position:absolute; top:0; left:0; width:100%; height:100%;
	display:flex; flex-wrap:wrap; flex-direction:column; justify-content:space-around;
}
.numbers li.q04 .bars .barr	{ position:relative; text-align:center; height:20%;}
.numbers li.q04 .bars .n	{ display:block; position:absolute; top:calc(50% - 10px); left:38%; width:40px; height:20px; background-repeat:no-repeat; background-position:center top; background-size:40px auto; transition:all 0.8s ease;}
.numbers li.q04 .bar1 .n	{ background-image:url(../images/q04-n1.svg);}
.numbers li.q04 .bar2 .n	{ background-image:url(../images/q04-n2.svg);}
.numbers li.q04 .bar3 .n	{ background-image:url(../images/q04-n3.svg);}
.numbers li.q04 .bar4 .n	{ background-image:url(../images/q04-n4.svg);}
.numbers li.q04 .bar5 .n	{ background-image:url(../images/q04-n5.svg);}
.numbers li.q04.show .bar1 .n	{ left:84%;}
.numbers li.q04.show .bar2 .n	{ left:58%;}
.numbers li.q04.show .bar3 .n	{ left:62%;}
.numbers li.q04.show .bar4 .n	{ left:68%;}
.numbers li.q04.show .bar5 .n	{ left:56%;}
.numbers li.q04 .bars .bar	{ position:absolute; top:calc(50% - 15px); left:27%; width:20%; height:30px; background-color:#8CDA44; background-position:right center; background-repeat:no-repeat; background-size:34px auto; transition:all 0.8s ease;}
.numbers li.q04 .bar1 .bar	{ background-color:#A9CD87; background-image:url(../images/q04-car1.svg);}
.numbers li.q04 .bar2 .bar	{ background-color:#D2D091; background-image:url(../images/q04-car2.svg);}
.numbers li.q04 .bar3 .bar	{ background-color:#B4E0E4; background-image:url(../images/q04-car3.svg);}
.numbers li.q04 .bar4 .bar	{ background-color:#E8B9C0; background-image:url(../images/q04-car4.svg);}
.numbers li.q04 .bar5 .bar	{ background-color:#E8D4AF; background-image:url(../images/q04-car5.svg);}
.numbers li.q04.show .bar1 .bar	{ width:56%;}
.numbers li.q04.show .bar2 .bar	{ width:30%;}
.numbers li.q04.show .bar3 .bar	{ width:34%;}
.numbers li.q04.show .bar4 .bar	{ width:40%;}
.numbers li.q04.show .bar5 .bar	{ width:28%;}

.numbers li.q05 .graph .image img	{ visibility:hidden;}
.numbers li.q05 .q05-1	{ position:absolute; top:10%; left:22%; width:56%; z-index:1;}
.numbers li.q05 .q05-2	{ position:absolute; top:10%; left:70%; width:20%; z-index:2;}
.numbers li.q05 .q05-3	{ position:absolute; top:70%; left:18%; width:20%; z-index:3;}
.numbers li.q05 .q05-4	{ position:absolute; top:27%; left:10%; width:18%; z-index:4;}
.numbers li.q05 .q05-5	{ position:absolute; top: 4%; left:29%; width:12%; z-index:5;}
.numbers li.q05 .q05-6	{ position:absolute; top: 0%; left:43%; width: 9%; z-index:6;}

.numbers li.q06 .graph	{ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-between; align-items:flex-start;}
.numbers li.q06 .graph ul { margin:20px 0 0; width:48%; font-size:0;}
.numbers li.q06 .graph ul li { margin:0 0 10px; padding:1em 0 0; vertical-align:baseline; border-bottom:1px solid #000;}
.numbers li.q06 .graph .title		{ display:inline-block; vertical-align:baseline; width:50%; font-size:1.8rem;}
.numbers li.q06 .graph .percent		{ display:inline-block; vertical-align:baseline; width:50%; padding:0 0.5rem 0 0; text-align:right; font-size:2.4rem; font-weight:bold;}
.numbers li.q06 .graph .percent b	{ font-size:3.0rem;}

.numbers li.q07 .graph	{ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-around; align-items:flex-start;}
.numbers li.q07 .graph > div { width:30%; margin-bottom:1rem;}

.numbers li.q08 .images	{ display:flex; flex-wrap:nowrap; flex-direction:row; justify-content:space-between; align-items:center;}
.numbers li.q08 .images img	{ width:25%; height:auto;}
.numbers li.q08 .graph	{ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-around; align-items:flex-start;}
.numbers li.q08 .graph > div { width:27%; margin-bottom:1rem; transform:scale(0.1);}
.numbers li.q08 .graph > div.ef.show	{ visibility:visible !important; opacity:1 !important; transform:translateY(0px) scale(1); transition:all 0.5s ease;}
.numbers li.q08 .graph > .q08-1.ef.show	{ transform:translateY(0px) scale(1)}
.numbers li.q08 .graph > .q08-2.ef.show	{ transform:translateY(0px) scale(1)}
.numbers li.q08 .graph > .q08-3.ef.show	{ transform:translateY(0px) scale(1)}
.numbers li.q08 .graph > .q08-4.ef.show	{ transform:translateY(0px) scale(1)}

.numbers li.q09 .graph	{ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-between; align-items:flex-start;}
.numbers li.q09 .graph ul { margin:20px 0 0; width:48%; font-size:0;}
.numbers li.q09 .graph ul li { margin:0 0 14px; padding:1em 0 0; vertical-align:baseline; border-bottom:1px solid #fff;}
.numbers li.q09 .graph .title		{ display:inline-block; vertical-align:baseline; width:50%; font-size:1.8rem;}
.numbers li.q09 .graph .percent		{ display:inline-block; vertical-align:baseline; width:50%; padding:0 0.5rem 0 0; text-align:right;font-family:azo-sans-web, sans-serif; font-size:2.4rem; font-weight:700;}
.numbers li.q09 .graph .percent b	{ font-size:3.0rem; font-weight:500;}
.numbers li.q09 .graph ul:nth-child(1) li:nth-child(1) .percent { color:#AE8300;}
.numbers li.q09 .graph ul:nth-child(1) li:nth-child(2) .percent { color:#B3B228;}
.numbers li.q09 .graph ul:nth-child(1) li:nth-child(3) .percent { color:#81A559;}
.numbers li.q09 .graph ul:nth-child(1) li:nth-child(4) .percent { color:#48909C;}
.numbers li.q09 .graph ul:nth-child(1) li:nth-child(5) .percent { color:#5F7A9B;}
.numbers li.q09 .graph ul:nth-child(2) li:nth-child(1) .percent { color:#B96F96;}
.numbers li.q09 .graph ul:nth-child(2) li:nth-child(2) .percent { color:#C36161;}
.numbers li.q09 .graph ul:nth-child(2) li:nth-child(3) .percent { color:#965541;}
.numbers li.q09 .graph ul:nth-child(2) li:nth-child(4) .percent { color:#8A6C91;}
.numbers li.q09 .graph ul:nth-child(2) li:nth-child(5) .percent { color:#6D4587;}

.numbers li.q10 .graph	{ position:relative;}
.numbers li.q10 .bars	{ 
	position:absolute; top:0; left:0; width:100%; height:100%;
	display:flex; flex-wrap:wrap; flex-direction:column; justify-content:space-around;
}
.numbers li.q10 .bars .barr	{ position:relative; text-align:center; height:14%;}
.numbers li.q10 .bars .n	{ display:block; position:absolute; top:calc(50% - 10px); left:27%; width:36px; height:18px; background-repeat:no-repeat; background-position:center center; background-size:36px auto; transition:all 0.8s ease;}
.numbers li.q10 .bar1 .n	{ background-image:url(../images/q10-n1.svg);}
.numbers li.q10 .bar2 .n	{ background-image:url(../images/q10-n2.svg);}
.numbers li.q10 .bar3 .n	{ background-image:url(../images/q10-n3.svg);}
.numbers li.q10 .bar4 .n	{ background-image:url(../images/q10-n4.svg);}
.numbers li.q10 .bar5 .n	{ background-image:url(../images/q10-n5.svg);}
.numbers li.q10 .bar6 .n	{ background-image:url(../images/q10-n6.svg);}
.numbers li.q10 .bar7 .n	{ background-image:url(../images/q10-n7.svg);}
.numbers li.q10.show .bar1 .n	{ left:84%;}
.numbers li.q10.show .bar2 .n	{ left:43%;}
.numbers li.q10.show .bar3 .n	{ left:31%;}
.numbers li.q10.show .bar4 .n	{ left:33%;}
.numbers li.q10.show .bar5 .n	{ left:46%;}
.numbers li.q10.show .bar6 .n	{ left:58%;}
.numbers li.q10.show .bar7 .n	{ left:33%;}
.numbers li.q10 .bars .bar	{ position:absolute; top:calc(50% - 10px); left:27%; width:2%; height:20px; transition:all 0.8s ease;}
.numbers li.q10 .bar1 .bar	{ background-color:#AE8300;}
.numbers li.q10 .bar2 .bar	{ background-color:#48909C;}
.numbers li.q10 .bar3 .bar	{ background-color:#C36161;}
.numbers li.q10 .bar4 .bar	{ background-color:#5F7A9B;}
.numbers li.q10 .bar5 .bar	{ background-color:#965541;}
.numbers li.q10 .bar6 .bar	{ background-color:#8A6C91;}
.numbers li.q10 .bar7 .bar	{ background-color:#6D4587;}
.numbers li.q10.show .bar1 .bar	{ width:56%;}
.numbers li.q10.show .bar2 .bar	{ width:15%;}
.numbers li.q10.show .bar3 .bar	{ width:3%;}
.numbers li.q10.show .bar4 .bar	{ width:5%;}
.numbers li.q10.show .bar5 .bar	{ width:18%;}
.numbers li.q10.show .bar6 .bar	{ width:30%;}
.numbers li.q10.show .bar7 .bar	{ width:5%;}

.numbers li.q11 .graph	{ display:block; }
.numbers li.q11 .q11-1	{ position:absolute; top:0%; right:0%; width:56%; z-index:3;}
.numbers li.q11 .graph ul { margin:20px 0 0; width:40%;}
.numbers li.q11 .graph ul li { margin:0 0 5px; padding:0 0 0; vertical-align:baseline; color:#141E3C; border-bottom:1px solid #141E3C;}
.numbers li.q11 .graph .title		{ display:inline-block; vertical-align:baseline; width:70%; font-size:1.3rem;}
.numbers li.q11 .graph .percent		{ display:inline-block; vertical-align:baseline; width:30%; padding:0 0.5rem 0 0; text-align:right; font-family:azo-sans-web, sans-serif; font-size:1.3rem; font-weight:500;}
.numbers li.q11 .graph .percent b	{ font-size:1.6rem; font-weight:400;}

.numbers li.q12 .graph	{ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-around; align-items:flex-start;}
.numbers li.q12 .graph > div { width:33%; margin-bottom:1rem; transform:scale(0.1);}
.numbers li.q12 .graph > div.ef.show	{ visibility:visible !important; opacity:1 !important; transform:translateY(0px) scale(1); transition:all 0.5s ease;}
.numbers li.q12 .graph > .q12-1.ef.show	{ transform:translateY(0px) scale(1)}
.numbers li.q12 .graph > .q12-2.ef.show	{ transform:translateY(0px) scale(0.8)}
.numbers li.q12 .graph > .q12-3.ef.show	{ transform:translateY(0px) scale(0.96)}
.numbers li.q12 .graph > .q12-4.ef.show	{ transform:translateY(0px) scale(0.9)}
.numbers li.q12 .graph > .q12-5.ef.show	{ transform:translateY(0px) scale(0.75)}
.numbers li.q12 .graph > .q12-6.ef.show	{ transform:translateY(0px) scale(1.1)}

.numbers li.q13 .graph	{ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-around; align-items:flex-start;}
.numbers li.q13 .graph > div {margin-bottom:1rem; padding:0 3%; width:33.333%; border-right:1px solid #fff;}
.numbers li.q13 .graph > div:nth-child(3) { border:0;}












/**
/* 7.5 - Requirement
 */
.employment-detail	{ margin:0 0 8rem;}
.employment-detail h2	{ padding:1.0rem 1.5rem; font-size:2rem; line-height:1.2; color:#fff; background-color:#093473;}
.employment-detail dl	{ border-top:1px solid #464D65;}
.employment-detail dt	{ padding:1.2em 0 0;}
.employment-detail dd	{ margin:0; padding:0 0 1em; border-bottom:1px solid #464D65;}




/* **************************************************************************** */
/*
/* 8.0 - Contact / Sitemap / Privacypolicy
/*
/* **************************************************************************** */

.contact-list	{ background-color:#f2f2f2; padding:5.5rem 4%;}
.contact-list li	{ position:relative; margin:0 0 55px; padding:65px 5% 35px; background-color:#fff;}
.contact-list li h4	{
	position:absolute; top:-10px; left:50%; display:block; margin:0 0 0 -30px; padding:18px 0 0; 
	text-align:center; width:60px; height:52px; 
	font-size:1.6rem; font-weight:300; color:#fff; line-height:1.2;
	background:url(../images/icon-num.svg) no-repeat center top / 60px auto;
}
.contact-list li p	{ margin:0; font-size:2.4rem; text-align:center; line-height:1.2;}
.contact-list li a	{ font-size:3.2rem; color:#202C64;}




.page-privacypolicy .page-content	{ padding:5.5rem 4%;}
.page-privacypolicy .lead	{ padding:0;}
.page-privacypolicy article h4	{ font-size:2.0rem; color:#202C64;}
.page-privacypolicy article li { margin:0 0 0.5rem;}




/**
 *  - effects 	**/

.ef			{ transform:translateY(40px);}
.ef.show	{ visibility:visible !important; opacity:1 !important;  transform:translateY(0px); transition:all 0.5s ease;}

.home-philosophy p.ef	{ transform:translate(-50%, 40px);}
.home-philosophy p.show	{ transform:translate(-50%, 0);}




/* **************************************************************************** */
/*
/* ex. - Media Queries
/*
/* **************************************************************************** */

@-ms-viewport 	{ width: device-width;}
@viewport 		{ width: device-width;}

@media screen and (max-width: 374px) {

	.home-philosophy p	{ font-size:1.4rem; line-height:1.6;}

}

/* >= 736px                             */
@media screen and (min-width: 736px) {

	/*
	 * Home
	 */
	.home-billboard .home-billboard-title	{ top:35%;}
	.home-billboard .home-billboard-title p	{ font-size:5.5rem; line-height:1.6; }
	.home-billboard .home-billboard-title .b_video		{ top:50%; bottom:auto;}
	.home-billboard .home-billboard-title .b_video a	{ top:0; bottom:auto;}

	.video-wrap {
		position:relative; width:100vw; height:100vh; overflow:hidden;
	}

	.sec-home-feature ul	{ display:flex; flex-wrap:wrap;}
	.sec-home-feature li	{ width:50%;}
	.sec-home-feature li:nth-child(odd)	{ border-right:1px solid transparent;}

	.sec-home-recruit .section-header	{ padding:8rem 5% 3rem;}
	.sec-home-recruit .section-title	{ font-size:4rem;}
	.sec-home-recruit .section-title small	{ margin:9px 0 0 10px; font-size:1.5rem;}
	.sec-home-recruit .section-content	{ padding:10rem 0;}
	.sec-home-recruit .section-content:before	{ 
		position:absolute; top:0; left:0; content:''; width:100%; height:50%;
		background:url(../images/recruit_d5ca39.jpg) no-repeat center center / cover;
	}
	.sec-home-recruit ul	{ display:flex; flex-wrap:wrap; justify-content:center;}
	.sec-home-recruit li	{ margin:0 5%; width:40%;}
	.sec-home-recruit li a	{ display:block; padding:8rem 0;}

	.sec-home-group .section-header	{ padding:6rem 5% 4rem;}
	.sec-home-group .section-header p	{ font-size:1.7rem;}
	.sec-home-group ul	{ flex-flow:nowrap; justify-content:center;}
	.sec-home-group li	{ margin:0 0 8px; border:0;}
	.sec-home-group .banner-ktg a	{ padding:0;}

	.banner-sanga	{ padding:6rem 10%;}


	/*
	 * -- 
	 */
	 
	.interview-header .section-title h2	{ 
		display:inline-block; margin:0 auto; padding:1rem 2rem 1rem; 
	/*	writing-mode:vertical-rl; text-align:left; */
		font-family:"游明朝", YuMincho, serif; font-size:4.0rem; font-weight:600; line-height:1.1; color:#fff;
		background-color:#141E3C;
	}
	.interview-header .section-title small { display:inline-block; margin:-5px 0 30px; padding:0.8rem 2rem; font-family:azo-sans-web, sans-serif; font-size:1.4rem; text-transform:uppercase; color:#fff; background-color:#141E3C;}
	.interview-thumbnails	{ 
		position:relative; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;
		margin:0 0 15vh; padding:0; 
	}
	.interview-thumbnails li	{ margin:0 2.5%; width:28%; }
	.interview .section-content	{ padding: 0 15%;}


	.facility-point .section-content	{ padding:0 15%;}
	.closeup .col3 > div.image:nth-child(1)	{ width:100% !important;}



	/*
	 * -- 
	 */
	.page-recruit .page-billboard .jp	{ display:block;}
	.page-recruit .page-header	{ display:none;}
	.recruit-feature	{ margin:10rem 0 6rem;}
	.recruit-feature ul	{ display:flex; flex-wrap:wrap;}
	.recruit-feature li	{ width:50%;}
	.recruit-feature li:nth-child(odd)	{ border-right:1px solid transparent;}
	.recruit-feature h4	{}
	.recruit-feature h4 b		{ font-size:2.0rem;}
	.recruit-feature h4 small	{ font-size:1.2rem;}
	.recruit-numbers h4	{ font-size:1.8rem}
	.recruit-numbers h4 b		{ font-size:4.4rem;}
	.recruit-numbers h4 small	{ font-size:2.2rem;}



	/*
	 * -- 
	 */
	.page-message .page-title	{ text-align:right;}
	.page-message .page-content	{ padding:0 15%;}

	.system-graph	{ display:flex; justify-content:center; align-items:center;}
	.system-graph .lists	{ width:57%;}
	.system-graph .arrow	{ width:10%;}
	.system-graph .stage	{ width:33%;}


	/*
	 * -- 
	 */
	.page-numbers .page-billboard .image	{ background:url(../images/numbers-billboard-bg.jpg) no-repeat center top / cover;}
	.page-numbers .page-billboard .content	{ top:42%;}
	.page-numbers .page-billboard .page-title	{ text-align:center; font-size:4.0rem;}
	.page-numbers .page-billboard .page-title b	{ font-size:5.5rem;}
	.page-numbers .page-billboard .page-title small	{ font-size:3.0rem;}
	.page-numbers .lead	{ margin:5.5rem auto 0; text-align:center;}
	.numbers	{ margin:0 auto; padding:10vh 0; max-width:976px;}
	.numbers ul	{ display:flex; flex-flow:row wrap; justify-content:space-between;}
	.numbers ul > li	{ width:48%;}
	.numbers ul > li:nth-child(odd)	{ margin-right:0;}
	.numbers ul > li:nth-child(even)	{ margin-left :0; transform:translate(0,160px);}
	.numbers li.q06 .graph ul		{ display:block;}
	.numbers li.q06 .graph ul li 	{ display:block; width:100%; transform:translate(0,0px);}
	.numbers li.q09 .graph ul		{ display:block;}
	.numbers li.q09 .graph ul li 	{ display:block; width:100%; transform:translate(0,0px);}
	.numbers li.q11 .graph ul		{ display:block;}
	.numbers li.q11 .graph ul li 	{ display:block; width:100%; transform:translate(0,0px);}

	/*
	 * -- 
	 */
	.contact-list ul	{ display:flex; flex-wrap:wrap; justify-content:center;}
	.contact-list li	{ margin:0 5%; width:40%;}
	.contact-list li a	{ display:block; padding:4rem 0;}


	/*
	 * -- 
	 */
	.numbers li.ef:nth-child(even)	{ transform:translate(0,200px);}
	.numbers li.show:nth-child(even){ transform:translate(0,160px);}


}


/* >= 1024px                             */
@media screen and (min-width: 1024px) {

	/*
	 * -- Home
	 */
	.home-billboard .home-billboard-title	{ top:28%;}
	.home-billboard .home-billboard-title p	{ font-size:5.5rem; line-height:1.6; }
	.home-billboard .home-billboard-title .b_video a	{ right:calc(50% - 25px); width:50px; height:50px;}
	.home-billboard .home-billboard-title .b_video a:hover	{ right:calc(50% - 30px); width:60px; height:60px;}
	.home-billboard .home-billboard-title .b_video a:after	{
		top:calc(50% - 30px); left:calc(50% - 30px); width:60px; height:60px;
	}
	.home-billboard .home-billboard-title .b_video a:hover:after {
		top:calc(50% - 35px); left:calc(50% - 35px); width:70px; height:70px;
	}

	.home-philosophy p	{
		position:relative; left:50%; transform:translateX(-50%);
		writing-mode:vertical-rl; text-align:left; 
		font-family:"游明朝", YuMincho, serif; font-size:1.8rem; line-height:3.3;
	}
	.banner-ktg a:hover { background-color:rgba(148,91,155,.1);}


	/*
	 * -- Page common
	 */
	.page-billboard .image	{ overflow:hidden;}
	.page-billboard .page-title b	{ font-size:6.0rem;}
	.page-billboard .page-title small	{ font-size:3.1rem;}
	.page-header	{}
	.page-header .page-title	{ margin:-55px 0 0 0; padding:2.5rem 2.5rem; font-size:5.0rem;}
	.page-content	{ padding:0 8%;}
	.search-result	{ padding:0 8% 4rem;}
	.error-404 .page-content { padding:0 8% 4rem;}


	/*
	 * - Business
	 */
	 .about-autocraft		{ margin:0 0 15rem;}
	
	.about-ktg .group { margin:0 auto; max-width:880px; align-items:flex-end;}
	.about-ktg .group:before,
	.about-ktg .group:after	{ border:0;}
	.about-ktg .group li	{ width:calc(100% / 3);}
	.about-ktg .group li:first-child	{ border-right:1px solid #979797;}
	.about-ktg .group li:last-child		{ border-left:1px solid #979797;}


	/*
	 * -- Interview
	 */
	.interview-thumbnails	{ 
		position:relative; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;
		margin:0 0 15vh; padding:0; 
	}
	.interview-thumbnails li	{ margin:0 2.5%; width:20%; }
	.interview-thumbnails li p	{ padding:8px 16px;}

	.interview	{ padding:5rem 0 5rem;}
	.interview-header	{ margin:0 0 6rem; display:flex; justify-content:flex-start; align-items:flex-start;}
	.interview:nth-child(odd) .interview-header	{ flex-direction:row-reverse;}
	.interview-header .image		{ width:75%;}
	.interview-header .section-title	{ position:static; bottom:0%; left:0; width:25%; text-align:center;}
	.interview-header .section-title h2	{ margin:0 auto !important; padding:1rem 2rem 0.2rem; writing-mode:vertical-rl; text-align:left; font-size:7.6rem; color:#000; background-color:transparent;}
	.interview-header .section-title small { 
		position:absolute; top:25%; left:20%;
		display:block; padding:0.5rem 2rem; font-size:2.8rem; color:#000;
	}
	.interview:nth-child(odd)	.interview-header .section-title small { background-color:#F5F4F3;}
	.interview:nth-child(even)	.interview-header .section-title small { left:auto; right:20%; background-color:#fff;}
	
	.interview .section-content	{ padding:0 8%;}
	.interview .section-content h3 		{ margin:0 0 1em;}
	.interview .section-content .col2	{ margin:0 0 4rem; justify-content:space-between;}
	.interview .section-content .col2:nth-child(odd)	{ flex-direction:row-reverse;}
	.interview .section-content .image	{ margin:0 0 2.5rem;}
	.interview .section-content .col2 > div	{ width:47%;}


	/*
	 * Facilities
	 */
	.page-facilities article .lead	{ font-size:1.8rem;}

	.facility-point	{ margin-bottom:14rem;}
	.facility-points-header	{ position:relative; margin:0 0 6rem;}
	.facility-points-header .image	{}
	.facility-points-header .section-title	{ 
		position:absolute; top:-40px; left:5%; padding:4rem 1rem 4rem; font-size:4.4rem;
		background-color:#fff;
	}

	.facility-point .section-content	{ padding:0 8%;}
	.facility-point .facilities	{ display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:flex-start;}
	.facility-point .facilities .text	{ width:30%;}
	.facility-point .facilities .images	{ margin:0 0 6.0rem; width:60%;}
	.facility-point .facilities .image	{ margin:0 0 1.5rem;}

	.page-facilities .page-content .lead { margin-bottom:8rem;}

	.closeup	{margin:0 5%; padding:3rem 5% 6rem;}
	.closeup .images	{ margin:0 0 3.0rem;}
	.closeup .images .image		{ margin:0 0 1px;}
	.closeup .closeup-title b	{ font-size:2.8rem;}
	.closeup .col3 > div.image:nth-child(1),
	.closeup .col3 > div.image:nth-child(2),
	.closeup .col3 > div.image:nth-child(3)	{ display:inline-block; width:calc(100%/3) !important;}


	/*
	 * Company
	 */
	.outline dl	{ margin:0 auto; max-width:768px;}
	.outline dt	{ display:inline-block; float:left; width:14em; border:0;}
	.outline dd	{ position:relative; padding:1.2em 0 1.5rem 15em;}
	.outline dd:after	{ position:absolute; bottom:-1px; left:0; content:''; width:14em; height:0; border-bottom:1px solid #202C64;}

	.history dl	{ margin:0 auto 5.5rem; max-width:768px;}
	.history dt	{ display:inline-block; float:left;  width:10em; border:0;}
	.history dd	{ position:relative; padding:1.6em 0 1.5rem 15em; border:0;}
	.history dd:after	{ position:absolute; top:2.4em; bottom:auto; left:7em; content:''; width:6em; height:0; border-bottom:1px solid #202C64;}

	.recruit-nav ul	{ display:flex; flex-wrap:wrap; justify-content:center; padding:0;}
	.recruit-nav li	{ margin:0 5%; width:40%;}
	.recruit-nav li a	{ display:block; padding:7rem 0;}


	/**
	/* Recruit > Message
	 */
	.recruit-feature a:hover img	{ transform:scale(1.2);}

	.page-message .page-title .jp	{ font-size:2.4rem;}
	.page-message .lead	{ margin:0 0 6rem; padding:5rem 0 0;}
	.page-message .lead h2	{ text-align:center;}
	.page-message .lead	.sign	{ margin:0 0 2em; text-align:right; font-family:"游明朝", YuMincho, serif; font-size:2.1rem;}
	.page-message .lead	p	{ padding:0 5%; font-size: 1.6rem; line-height:2.0;}

	.page-message .page-content	{ padding:0 0%; max-width:924px;}
	.page-message .col2 > div	{ width:60%;}
	.page-message .col2 .image	{ width:40%; margin:0 -5% 0 0;}
	.page-message .col2:nth-child(even)	{ flex-direction:row-reverse;}
	.page-message .col2:nth-child(odd) .image	{ margin:0 0 0 -5%;}

	.system-lead	{ padding:0 0 0 35%;}


	/*
	 * Recruit > Numbers
	 */
	.page-numbers .page-billboard .content	{ top:45%;}
	.page-numbers article .lead	{ max-width:888px; text-align:center; font-size:1.8rem;}
	.page-numbers .lead	{ padding:0 0;}
	.numbers li .num	{ height:45px; background-size:auto 44.27px;}
	.numbers li.q01 .num	{ width: 75px;}
	.numbers li.q02 .num	{ width: 85px;}
	.numbers li.q03 .num	{ width: 85px;}
	.numbers li.q04 .num	{ width: 90px;}
	.numbers li.q05 .num	{ width: 85px;}
	.numbers li.q06 .num	{ width: 90px;}
	.numbers li.q07 .num	{ width: 90px;}
	.numbers li.q08 .num	{ width: 88px;}
	.numbers li.q09 .num	{ width: 88px;}
	.numbers li.q10 .num	{ width:120px;}
	.numbers li.q11 .num	{ width:105px;}
	.numbers li.q12 .num	{ width:116px;}
	.numbers li.q13 .num	{ width:128px;}
	.numbers li.q11 .graph ul li { margin:0 0 10px;}
	.numbers li.q11 .graph .title		{ font-size:1.6rem;}
	.numbers li.q11 .graph .percent		{ font-size:1.8rem;}
	.numbers li.q11 .graph .percent b	{ font-size:2.4rem}



	/**
	/* 3.0 - Requirement
	 */
	.employment-detail	{ margin:0 auto 8rem; max-width:880px;}
	.employment-detail h2	{ padding:1.0rem 1.5rem; font-size:2rem; line-height:1.2; color:#fff; background-color:#093473;}
	.employment-detail dl	{ border-top:1px solid #464D65;}
	.employment-detail dt	{ display:inline-block; float:left; width:10em; border:0;}
	.employment-detail dd	{ position:relative; padding:1.2em 0 1.5rem 12em;}

	.page-entry .page-content	{ padding:0; max-width:800px;}
	div.mailform dt	{ display:inline-block; float:left; padding:1.5em 0 0; width:12em; border:0;}
	div.mailform dd	{ position:relative; padding:1.2em 0 1.5rem 15em;}
	.page-confirm div.mailform dt	{ display:inline-block; float:left; padding:1.2em 0 0; width:12em; border:0;}
	.page-confirm div.mailform dd	{ position:relative; padding:1.2em 0 1.5rem 15em;}


	/*
	 * contact / sitemap / privacypolicy
	 */
	.contact-list li p	{ font-size:2.4rem;}

	.page-privacypolicy .page-content	{ margin:0 auto; padding:5.5rem 0 15rem; max-width:768px;}
	.page-privacypolicy .page-content .lead	{ padding:4rem 0;}


}


/* >= 1280px 						  */
@media screen and (min-width: 1280px) {

	/*
	 * Home
	 */
	.home-billboard .home-billboard-title p	{ font-size:6.6rem; line-height:1.6; letter-spacing:0.05em;}
/*
	.home-billboard .home-billboard-title .b_video a	{ bottom:6px; right:340px;width:54px; height:54px;}
	.home-billboard .home-billboard-title .b_video a:hover:after {
		top:calc(50% - 30px); left:calc(50% - 30px); width:60px; height:60px;
	}
*/
	.sec-home-recruit .section-content	{ padding:15rem 0 15rem;}
	.sec-home-recruit li h4 b	{ font-size:2.4rem;}
	.sec-home-recruit li a	{ padding:10rem 0;}

	.sec-home-group .banner-ktg a	{ padding:0;}
	.banner-sanga	{ padding:8rem 10%;}


	/*
	 * -- Page common
	 */
	.page-billboard .content	{ position:absolute; top:42%; width:100%;}
	.page-billboard .image		{ overflow:hidden; background-repeat:no-repeat; background-position:center center; background-size:cover;}
	.page-billboard .page-title b	{ font-size:7.2rem;}
	.page-billboard .page-title small	{ font-size:4.2rem;}
	.page-header	{ margin:0 0 9rem; border:1px solid transparent;}
	.page-header .page-title	{ 
		position:absolute; left:5%; top:0; height:6em; 
		margin:-85px 0 0 0; padding:2.5rem 2.5rem; writing-mode:vertical-rl; text-align:left; font-size:6.4rem;}
	.page-content	{ padding:0; max-width:888px;}
	.search-result	{ padding:0 0 4rem; max-width:688px;}
	.error-404 .page-content { padding:0 0 4rem; max-width:688px;}


	/*
	 * -- Interview
	 */
	.interview-header .section-title h2	{ margin:0 auto !important; padding:1rem 2rem 0.2rem; writing-mode:vertical-rl; text-align:left; font-size:8.6rem; background-color:transparent;}
	.interview-header .section-title small { 
		position:absolute; top:25%; left:20%;
		display:block; padding:1.5rem 5rem; font-size:3.2rem;
	}
	.interview .section-content	{ margin:0 auto; max-width:1024px; padding:0 0;}


	/*
	 * -- Facilities
	 */
	.page-facilities article .lead p	{ font-size:2.0rem;}
	.facility-point .section-content	{ margin:0 auto; padding:0 0; max-width:1024px;}


	/*
	 * -- Recruit
	 */
	.recruit-feature .cell		{ padding:24px 8%;}

	.page-message .page-content	{ max-width:1024px;}
	.page-message .col2 .image	{ width:45%; margin:0 -10% 0 0;}
	.page-message .col2:nth-child(odd) .image	{ margin:0 0 0 -10%;}
	.system .section-header { margin:0 auto; max-width:1024px;}
	.system	.section-content	{ max-width:1024px;}
	.system-lead	{ padding:0 0 0 30%;}

	.page-numbers .page-billboard .page-title b	{ font-size:8.0rem;}
	.page-numbers .page-billboard .page-title small	{ font-size:4.4rem;}
	.page-numbers .page-billboard .page-title small.jp	{ font-size:3.3rem;}
	.page-numbers article .lead	{ max-width:1024px; text-align:center; font-size:2.4rem;}


	/*
	 * -- Contact / Privacypolicy
	 */
	.page-contact .page-header .page-title	{ margin:-55px 0 0 0; padding:2.0rem 2.5rem; height:8em; font-size:4.8rem;}
	.page-contact .section-content	{ margin:0 auto; max-width:924px; padding:0 0;}

	.page-entry .page-header .page-title,
	.page-thanks .page-header .page-title,
	.page-confirm .page-header .page-title,
	.page-error .page-header .page-title	{ margin:-55px 0 0 0; padding:2.0rem 2.5rem; height:8em; font-size:4.8rem;}
	.page-privacypolicy .page-header .page-title	{ margin:-55px 0 0 0; padding:2.0rem 2.5rem; height:10em; font-size:4.8rem;}


}


/* >= 1440px 						  */
@media screen and (min-width: 1440px) {

	/*
	 * Home
	 */
	.home-billboard .home-billboard-title p	{ font-size:6.6rem; line-height:1.6; letter-spacing:0.08em;}
	.home-billboard .home-billboard-title .b_video a	{ right:calc(50% - 30px); width:60px; height:60px;}
	.home-billboard .home-billboard-title .b_video a:hover	{ right:calc(50% - 35px); width:70px; height:70px;}
	.home-billboard .home-billboard-title .b_video a:after	{
		top:calc(50% - 35px); left:calc(50% - 35px); width:70px; height:70px;
	}
	.home-billboard .home-billboard-title .b_video a:hover:after {
		top:calc(50% - 40px); left:calc(50% - 40px); width:80px; height:80px;
	}


	/*
	 * -- Page common
	 */
	.page-billboard .page-title b	{ font-size:8.8rem;}
	.page-billboard .page-title small	{ font-size:4.8rem;}
	.page-header .page-title	{ height:7.2em;}


	/*
	 * -- Facilities
	 */
	.page-facilities article .lead p	{ font-size:2.4rem;}
	.facility-points-header .section-title	{ 
		position:absolute; top:-40px; left:5%; padding:4rem 2rem 4rem; font-size:5.4rem;
		background-color:#fff;
	}
	.facility-point .section-content	{ margin:0 auto; padding:0 0; max-width:1240px;}

	.page-message .page-title .jp	{ font-size:3.4rem;}
	.page-message .lead	.sign	{ margin:0 0 2em; text-align:right; font-family:"游明朝", YuMincho, serif; font-size:2.4rem;}


}


/* >= 1600px 						  */
@media screen and (min-width: 1600px) {

	/*
	 * Home
	 */
	.home-billboard .home-billboard-title p	{ font-size:7.7rem; line-height:1.6; letter-spacing:0.08em;}


}

/* >= 1900px 						  */
@media screen and (min-width: 1900px) {

	/*
	 * Home
	 */
	.home-billboard .home-billboard-title p	{ font-size:9.2rem; line-height:1.6; letter-spacing:0.08em;}

}



/* >= Print                             */
@media print {
}