/* ----------
	Webfonts
   ---------- */
   
/* --- About Webfonts License ---
 *
 * "AOZORA_mincho" licensed under the IPA Font License Agreement v1.0
 * http://blueskis.wktk.so/AozoraMincho/index.html
 * http://ipafont.ipa.go.jp/
 * http://ipafont.ipa.go.jp/ipa_font_license_v1.html
 *
 * "KAZESAWA_EXBold" is lisenced under the SIL Open Font License 1.1
 * by https://kazesawa.github.io
 *
 */

@font-face {
	font-family: 'AOZORA_mincho';
	src: url('../fonts/AOZORAmincho_Mid/AOZORAmincho_Medium.eot');
	src: url('../fonts/AOZORAmincho_Mid/AOZORAmincho_Medium.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/AOZORAmincho_Mid/AOZORAmincho_Medium.woff2') format('woff2'),
		 url('../fonts/AOZORAmincho_Mid/AOZORAmincho_Medium.woff') format('woff'),
		 url('../fonts/AOZORAmincho_Mid/AOZORAmincho_Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'KAZESAWA_EXBold';
	src: url('../fonts/KAZESAWA_EXBold/kazesawa-EXbold.eot');
	src: url('../fonts/KAZESAWA_EXBold/kazesawa-EXbold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/KAZESAWA_EXBold/kazesawa-EXbold.woff2') format('woff2'),
		 url('../fonts/KAZESAWA_EXBold/kazesawa-EXbold.woff') format('woff'),
		 url('../fonts/KAZESAWA_EXBold/kazesawa-EXbold.ttf') format('truetype');
}



/* ------------
	icon fonts
   ------------ */

@font-face {
	font-family: 'icomoon';
	src: url('../fonts/iconfonts/icomoon.eot?hmrxt1');
	src: url('../fonts/iconfonts/icomoon.eot?hmrxt1#iefix') format('embedded-opentype'),
		 url('../fonts/iconfonts/icomoon.ttf?hmrxt1') format('truetype'),
		 url('../fonts/iconfonts/icomoon.woff?hmrxt1') format('woff'),
		 url('../fonts/iconfonts/icomoon.svg?hmrxt1#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.icon-atm:before {
	content: "\e900";
}
.icon-battery:before {
	content: "\e901";
}
.icon-camera:before {
	content: "\e902";
}
.icon-car:before {
	content: "\e903";
}
.icon-copier:before {
	content: "\e904";
}
.icon-next:before {
	content: "\e905";
}
.icon-numbers:before {
	content: "\e906";
}
.icon-papermaking:before {
	content: "\e907";
}
.icon-refrigerator:before {
	content: "\e908";
}
.icon-return:before {
	content: "\e909";
}
.icon-ultrasonicwave:before {
	content: "\e90a";
}
.icon-vision:before {
	content: "\e90b";
}
.icon-washingmachine:before {
	content: "\e90c";
}
.icon-womans:before {
	content: "\e90d";
}
.icon-workflow:before {
	content: "\e90e";
}
.icon-yarn:before {
	content: "\e90f";
}



/* -------
	Reset
   ------- */

html {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic Pro', '游ゴシック Medium', Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	overflow: hidden;
}
img {
	display: block;
	height: auto;
}
video {
	display: block;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
div {
	margin: 0;
	padding: 0;
	line-height: 1.2em;
}



/* --------------
    Common Style
   -------------- */

body {
	font-size: 14px;
}
.centering {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.textcentering {
	text-align: center;
}
video.BG,
div.BG {
	background-position: center;
	background-size: cover;
	min-height: 100%;
	min-width: 100%;
	height: auto;
	width: auto;
	z-index: -5;
}
ul.None {
	margin: 0;
	padding: 0;
}
.None li {
	list-style-type: none;
}
a.None, 
.None li a {
	text-decoration: none;
}
.SPnone,
.TABview {
	display: none;
}
.FontJP {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "AOZORA_mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.FontEN {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 600;
}
.FontKA_EXB {
	font-family: "KAZESAWA_EXBold", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic Pro', '游ゴシック Medium', Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
[id*="wrapper"], [class*="wrapper"] {
	overflow: hidden;
	position: relative;
}
.title {
	font-size: 1.3em;
	letter-spacing: .3em;
	line-height: 1.2em;
}
.title.textcentering {
	text-indent: .3em;
}
.text {
	font-size: 1em;
}
.subtext {
	font-size: .8em;
}
.UL {
	font-size: 2em;
}
.LL {
	font-size: 1.6em;
}
.L {
	font-size: 1.3em;
}
.S {
	font-size: .8em;
}
.SS {
	font-size: .6em;
}
.US {
	font-size: .4em;
}
.color-white {
	color: #FFF;
}
.weight-Normal {
	font-weight: normal;
}
.border-image-top {
	border-style: solid;
	border-width: 25px 0px 0px;
	-moz-border-image: url(../img/border.png) 50 0 0 repeat;
	-webkit-border-image: url(../img/border.png) 50 0 0 repeat;
	-o-border-image: url(../img/border.png) 50 0 0 repeat;
	border-image: url(../img/border.png) 50 0 0 repeat;
}
.border-image-bottom {
	border-style: solid;
	border-width: 0px 0px 25px;
	-moz-border-image: url(../img/border.png) 0 0 50 repeat;
	-webkit-border-image: url(../img/border.png) 0 0 50 repeat;
	-o-border-image: url(../img/border.png) 0 0 50 repeat;
	border-image: url(../img/border.png) 0 0 50 repeat;
}
.themecolor__BG {
	background-color: rgba($theme,0.9);
}
.themecolor__Border_bottom {
	border-bottom: .5em solid rgba($theme,0.9);
}
.main-wrapper {
	margin-top: 50px;
}
.main-wrapper .main-title {
	border-bottom: 1px solid #8A8A8A;
	text-align: center;
	position: relative;
	margin: 2em auto;
	padding-bottom: .5em;
	width: 90%;
	max-width: 1024px;
}
.main-wrapper .main-title.color-white {
	border-bottom: 1px solid #FFF;
}
.main-wrapper .main-title::after {
	background-color: $theme;
	content: "";
	display: block;
	position: relative;
	margin: auto;
	bottom: -.6em;
	height: 3px;
	width: 5em;
}
.main-wrapper .main-title span {
	display: block;
}


@media (min-width:360px){
	.PhoneSmallOnly {
		display: none;
	}
}

@media (min-width:768px){
	.TABnone {
		display: none;
	}
	.TABview {
		display: inherit;
	}
	.main-wrapper {
		margin-top: 80px;
	}
}


@media (min-width:1024px){
	body {
		font-size: 16px;
	}
	.PCnone {
		display: none;
	}
	.SPnone {
		display: inherit;
	}/*
	.border-image-top {
		border-width: 15px 0px 0px;
	}
	.border-image-bottom {
		border-width: 0px 0px 15px;
	}*/
}



/* -----------------
	animation Class
   ----------------- */

[class*="standby"],
[class*="animation"] {
	transition-property: opacity,transform;
	transition-duration: .5s;
}
[class*="standbyFadeIn"] {
	opacity: 0;
}
[class*="standbyFadeOut"] {
	opacity: 1;
	transform: translate(0px, 0px);
}
.standbyFadeInToLeft {
	transform: translate(30px);
}
.standbyFadeInToRight {
	transform: translate(-30px);
}
.standbyFadeInToDown {
	transform: translate(0px, -30px);
}
.standbyFadeInToUp {
	transform: translate(0px, 30px);
}
[class*="animationFadeIn"] {
	opacity: 1;
	transform: translate(0px, 0px);
}
[class*="animationFadeOut"] {
	opacity: 0;
}
.animationFadeOutToLeft {
	transform: translate(-30px);
}
.animationFadeOutToRight {
	transform: translate(30px);
}
.animationFadeOutToDown {
	transform: translate(0px, 30px);
}
.animationFadeOutToUp {
	transform: translate(0px, -30px);
}



/* -----------------
	header & footer
   ----------------- */

header {
	background-color: rgba($theme,0.9);
	position: absolute;
	top: 0px;
	left: 0px;
	height: 50px;
	width: 100%;
	z-index: 150;
}
header.fixed {
	position: fixed;
}
#burgerbutton {
	color: #FFF;
	position: absolute;
	right: 0px;
	top: 0px;
	height: 100%;
	width: 50px;
	z-index: 15;
}
#frontpage #burgerbutton {
	transition: right .3s ease-out;
}
#burgerbutton .burgericon,
#burgerbutton .burgericon::before,
#burgerbutton .burgericon::after {
	background-color: #FFF;
	content: "";
	display: block;
	position: absolute;
	height: 2px;
}
#burgerbutton .burgericon {
	top: calc(50% - 3px - .5em);
	left: 20%;
	width: 60%;
	transition: height .1s linear;
}
#burgerbutton .burgericon::before,
#burgerbutton .burgericon::after {
	transition:
		transform .2s ease-out,
		top .2s ease-out;
}
#burgerbutton .burgericon::before {
	top: -8px;
	width: 100%;
}
#burgerbutton .burgericon::after {
	top: 8px;
	width: 100%;
}
#burgerbutton .text {
	position: absolute;
	display: block;
	bottom: 3px;
	margin: auto;
	width: 100%;
}
header .title {
	position: absolute;
	left: 0%;
	top: 0px;
	margin-left: -.7em;
	transition: left .3s ease-out;
	width: 250px;
	z-index: 10;
}
header .title a {
	color: #FFF;
}
header .globalnav {
	background-color: rgba($theme,0.9);
	position: fixed;
	top: -100vh;
	height: calc(100vh - 50px);
	width: 100%;
	transition: top .5s ease-in-out;
	z-index: 5;
}
header .globalnav ul {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	justify-content: flex-start;
	margin: 5% auto;
}
header .globalnav .parent {
	height: 90%;
}
header .globalnav .parent > li {
	font-size: 1em;
	text-align: center;
	width: 50%;
}
header .globalnav .nest {
	width: 100%;
}
header .globalnav .nest.interview {
	margin-left: -75%;
	width: 150%;
}
header .globalnav .nest > li {
	font-size: 1em;
	overflow: hidden;
	transition: height .5s;
	height: 0em;
	width: 100%;
}
header .globalnav .nest.interview > li {
	width: 50%;
}
header .globalnav .nest > li.listTitle,
header .globalnav .nest > li.flowday {
	position: relative;
	width: 100%;
}
header .globalnav .nest.OPEN > li.listTitle::before,
header .globalnav .nest.OPEN > li.listTitle::after,
header .globalnav .nest.OPEN > li.flowday::before {
	background-color: #FFF;
	content: "";
	display: block;
	position: absolute;
	height: 1px;
}
header .globalnav .nest.OPEN > li.listTitle::before,
header .globalnav .nest.OPEN > li.listTitle::after {
	top: 50%;
	width: 40%;
}
header .globalnav .nest.OPEN > li.listTitle::before {
	left: 0px;
}
header .globalnav .nest.OPEN > li.listTitle::after {
	right: 0px;
}
header .globalnav .nest.OPEN > li.flowday::before {
	top: .4em;
	width: 100%;
}
header .globalnav .nest.OPEN > li.flowday {
	padding: 1em 0;
}
header .globalnav .nest.OPEN > li {
	height: 1.5em;
}
header .globalnav a {
	color: #FFF;
	line-height: 1.2em;
}


/* --- burger action --- */

header.OPEN .globalnav {
	top: 50px;
}
header.OPEN #burgerbutton .burgericon {
	height: 0px;
}
header.OPEN #burgerbutton .burgericon::before {
	top: 0px;
	transform: rotate(225deg);
}
header.OPEN #burgerbutton .burgericon::after {
	top: 0px;
	transform: rotate(-225deg);
}


/* --- frontpage Before scrolling --- */

#frontpage header .title {
	transition:
		 left .3s ease-out,
		 margin-left .3s ease-out;
}
header.noFixed .title {
	left: 50%;
	margin-left: -125px;
}
header.noFixed #burgerbutton {
	right: -50px;
}
header.noFixed .globalnav {
	display: none;
}

footer {
	border-bottom: 1em solid rgb(72,188,122);
	font-size: .65em;
	text-align: center;
	margin: 5em 0 0;
}


@media (min-width:768px){
	header {
		background-color: rgba($theme,1);
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 80px;
	}
	header .title,
	header.noFixed .title {
		position: relative;
		letter-spacing: .1em;
		text-indent: .1em;
		left: 0%;
		margin: auto 1em;
		width: 250px;
	}
	#burgerbutton {
		display: none;
	}
	header .globalnav,
	header.OPEN .globalnav,
	header.noFixed .globalnav {
		background-color: #FFF;
		display: block;
		position: relative;
		top: 0px;
		height: 95%;
	}
	header .globalnav ul {
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		margin: auto;
	}
	header .globalnav .parent {
		align-content: center;
		flex-wrap: nowrap;
		height: 100%;
	}
	header .globalnav .parent > li > .nest  {
		align-content: flex-start;
		flex-wrap: wrap;
		position: absolute;
		top: 100%;
		left: 0%;
	}
	header .globalnav .parent > li {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		justify-content: center;
		font-size: .6em;
		position: relative;
		transition: background-color .3s;
		height: 100%;
		width: calc(99.999% / 7);
	}
	header .globalnav .parent li:hover,
	header .globalnav .parent .active,
	header .globalnav .parent .nest li {
		background-color: rgba($theme,1);
	}
	header .globalnav .parent > li > a {
		color: #000;
		transition: color .3s;
	}
	header .globalnav .nest,
	header .globalnav .nest.interview {
		margin-left: 0%;
		width: 100%;
	}
	header .globalnav .nest > li {
		font-size: 1.2em;
		transition:	height .3s;
		width: 100%;
	}
	header .globalnav .nest.interview > li {
		width: 100%;
	}
	header .globalnav .nest.OPEN > li {
		height: 2.5em;
	}
	header .globalnav .nest.OPEN > li.listTitle::before,
	header .globalnav .nest.OPEN > li.listTitle::after,
	header .globalnav .nest.OPEN > li.flowday::before {
		display: none;
	}
	header .globalnav .parent > li:hover > a,
	header .globalnav .parent .active a,
	header .globalnav .nest a {
		color: #FFF;
	}
	header .globalnav .nest a:hover {
		color: #000;
	}
}


@media (min-width:870px){
	header .globalnav .parent > li {
		font-size: .7em;
	}
}



@media (min-width:1280px){
	header .globalnav .parent > li {
		font-size: .9em;
	}
}