@charset "UTF-8";

/* リセット */
* {box-sizing:border-box;margin:0;padding:0;}
a {color:#000;text-decoration:none;cursor:pointer;}
a:hover {animation:link-hover 1s ease 0s 1 forwards;}
a.nohover:hover {animation:initial;}
@keyframes link-hover {0%{opacity:1;}25%{opacity:.7;}50%{opacity:.2;}100%{opacity:.5;}}
a.underline{position:relative;}
a.underline:hover:after{border-bottom:1px solid #000;bottom:0;content:"";display:block;left:0;position:absolute;animation:link-underline .5s ease 0s 1 forwards;}
@keyframes link-underline {0%{width:0;}100%{width:100%;}}
body {font-family:sans-serif;font-feature-settings:"palt";font-weight:200;/*overflow-x:hidden;*/-webkit-text-size-adjust:100%;}
header {line-height:0;}
html{scroll-behavior:smooth;}
img {border:0;height:auto;width:100%;}
input, select, option, textarea {appearance:none;-moz-appearance:none;-webkit-appearance:none;border:0;font-size:1rem;}
ol, ul {list-style-type:none;}
picture {display:block;}

/* 共通 */
.clearfix:after{clear:both;content:".";display:block;font-size:0;line-height:0;height:0;visibility:hidden;width:0;}
.fnt-m {font-family:serif;}
.pc-br {display:none;}
.img-oc {image-rendering:-webkit-optimize-contrast;}
.wrapper {
	margin: 0 auto;
	max-width: 1440px;
	padding: 5% 32px 0 5%;
}

/* wordpress */
.pagination {
	padding: 0 6%;
}
.screen-reader-text {
	display: none;
}
.page-numbers {
	text-align: center;
}
.page-numbers li {
	display: inline-block;
}
a.page-numbers, span.page-numbers {
	border: 1px solid #595757;
	display: inline-blcok;
	padding: .25rem;
}
span.page-numbers {
	background-color: #595757;
	color: #fff;
}
.post-password-form {
	text-align: center;
}

/* デバッグ */
#debug {
	background-color: rgba(255, 255, 255, .5);
	color: #000;
	display: block;
	font-size: 1rem;
	height: 1.6rem;
	left: 0;
	line-height: 1.8;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 10000;
}

/* SP/PC改行 */
br.pc {
	display: none;
}

/* barba用 */
.page {
	opacity: 1;
	transform: translateX(0);
}
.page-over {
	opacity: 0;
	transform: translateX(50%);
	transition: opacity .5s, transform .5s;
}
.page-cover {
	opacity: 0;
	transform: translateX(100%);
}
.page-cover.open {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 1s, transform 1s;
}

/* ヘッダーSP上部、PC右側 */
header {
	min-height: 70px;
}
.hdr-right {
	background-color: #fff;
	height: 70px;
	position: fixed;/*relative;*/
	transition: height .5s, position 0s, width 0s;
	z-index: 1;
	width: 100%;
}
h1 {
	background-color: #fff;
	left: 0;
	margin: 0;
	max-width: 234px;
	position: absolute;
	top: 0;
	width: 20%;
	z-index: 2;
}
h1 picture.sp {
	height: 70px;
	width: 140px;
}
h1 picture.pc {
	display: none;
}
#global-nav {
	padding: 20px 0;
	position: relative;
	top: 0;
	right: 0;
	width: 100%;
}
.hdr-right.open {
	background-color: #fff;
	height: 100vh;
	position: fixed;
	width: 100%;
}

/* SPハンバーガー */
.nav-icon {
	display: block;
	height: 30px;
	line-height: 0;
	margin: 0 10px 0 auto;
	padding-top: 8px;
	overflow: hidden;
	width: 30px;
}
.open .nav-icon {
	padding-top: 0;
}
.nav-icon span {
	background-color: #000;
	display: block;
	height: 2px;
	margin-bottom: 8px;
	transition: transform .5s;
	width: 100%;
}
.nav-icon span:last-child {
	margin-bottom: 0;
}
.open .nav-icon span:first-child {
	margin-top: 14px;
	transform: rotate3d(0, 0, 1, 45deg);
}
.open .nav-icon span:last-child {
	margin-top: -10px;
	transform: rotate3d(0, 0, 1, -45deg);
}

/* ヘッダーSPグローバルナビ／PC右上メニュー */
#global-nav ul {
	display: none;
	flex-direction: column;
	line-height: 1.6;
	margin: 10px 0 0 auto;
	opacity: 0;
	padding: .25rem 0;
	text-align: center;
	transition: display .5s, opacity .5s;
}
.open #global-nav ul {
	display: flex;
	opacity: 1;
}
#global-nav li ul {
	display: none;
}
#global-nav li a {
	color: #000;
	display: block;
	padding: .25rem 0;
}


#global-nav > ul > li:nth-child(2) > ul {
	display: block;
	/*height: 0;
	opacity: 0;*/
	overflow: hidden;
	position: absolute;
	text-align:left;
	transition: height 1s, opacity 1s;
}
#global-nav > ul > li:nth-child(2) > ul.close {
	height: 0;
	opacity: 0;
}
/*#global-nav > ul > li:nth-child(2) > ul.open {
	height: initial;
	opacity: 1;
}*/


.hdr-left .nav-icon {
	z-index: 2;
}
#scroll {
	background-color: #fff;
	bottom: 0;
	display: none;
	height: 10vh;
	left: 95%;
	position: absolute;
	width: 1px;
	z-index: 1;
}
#scroll:before {
	color: #fff;
	content: "SCROLL";
	display: block;
	font-size: .625rem;
	margin-top: -3rem;
	writing-mode: vertical-rl;
}
#scroll:after {
	animation: scroll-suggest 1s ease 0s infinite;
	background-color: #fff;
	bottom: 10vh;
	content: "";
	display: block;
	height: 5px;
	left: -2px;
	position: absolute;
	width: 5px;
}
@keyframes scroll-suggest {
	0% {
		bottom: 10vh;
	}
	100% {
		bottom: 0;
	}
}

/* コンテンツ */
.cage {
	/*position: absolute;
	top: 100vh;*/
	width: 100%;
}

article {
	top: 100vh;
	width: 100%;
}

/* メインビジュアル：共通 */
#mainvisual {
	background-position: 50% 50%;
	background-size: cover;
	position: relative;
}

/* メインビジュアル内ページタイトル：共有 */
.page-title {
	bottom: .5rem;
	color: #fff;
	padding: .5rem;
	position: absolute;
}
.page-title .title-e {
	font-family: Oswald, sans-serif;
	font-size: 3rem;
	line-height: 1.1;
}
.page-title .title-j {
	font-size: 1rem;
	font-weight: normal;
}

.content-wrapper {
	padding: 5% 1rem;
}
.sec-title-area {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}
.sec-title {
	display: inline-block;
	font-weight: normal;
	margin-bottom: 2rem;
}
.sec-title picture {
	display: inline-block;
	margin-right: 1rem;
}
.sec-title span {
	display: inline-block;
	font-size: .875rem;
	font-weight: normal;
	transform: translateY(-.25rem);
}
.sec-title-area .sec-title {
	margin-bottom: 0;
}

/* EJ見出し */
.sec-title .title-e {
	display: inline-block;
	color: #7698b4;
	font-family: Oswald, sans-serif;
	font-size: 1.5rem;
	margin-right: .75rem;
}
.sec-title .title-e:after {
	background-color: #595757;
	content: "";
	display: block;
	height: 1px;
	/*margin-top: 1rem;*/
	position: relative;
	top: 1rem;
	width: 2.5rem;
}
.sec-title .title-j {
	display: inline-block;
	font-size: .875rem;
	font-weight: normal;
	transform: translateY(-.5rem);
}


/* Learn more */
.sec-detail-btn-area {
	text-align: right;
}
.sec-detail {
	padding: 1rem;
}
.sec-detail p {
	font-size: .875rem;
	line-height: 2;
	margin-bottom: 2rem;
}
.sec-detail-btn {
	background-image: url(../images/common/more-arrow.png);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	background-size: 26px auto;
	display: inline-block;
	padding-right: 26px;
}
.sec-detail-btn span {
	background-color: #fff;
	display: inline-block;
	padding-right: .5rem;
}
.sec-detail-btn:hover {
	animation: more-arrow2 1s ease 0s 1;
}
@keyframes more-arrow {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 50% 50%;
	}
}
@keyframes more-arrow2 {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 75% 50%;
	}
}
@keyframes more-arrow3 {
	0% {
		background-position: 150% 50%;
	}
	100% {
		background-position: 75% 50%;
	}
}

/* 採用情報・お問い合わせバナー */
#company-nav a {
	align-items: center;
	color: #fff;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	margin-bottom: 1rem;
	padding: 1rem 1rem;
}
/*#company-nav a:hover {
	opacity: 1;
}*/
#company-nav ul li:last-child a {
	margin-bottom: 0;
}
#company-nav a .title-e {
	/*display: block;*/
	flex-basis: 40%;
	flex-direction: column;
	font-family: Oswald, sans-serif;
	font-size: 1.75rem;
	margin-bottom: .5rem;
}
#company-nav a .title-j {
	background-image: url(../images/company/arrow.png);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: auto 3px;
	/*border-bottom: 1px solid #fff;*/
	/*display: block;*/
	flex-basis: 60%;
	/*flex-direction: column;*/
	font-size: .75rem;
	/*padding-bottom: .25rem;*/
}
#company-nav a .title-j:after {
	background-color: #fff;
	content: "";
	display: block;
	height: 1px;
	width: 100%;
}
#company-nav a:hover .title-j {
	animation: form-arrow 1s ease 0s 1;
}
@keyframes form-arrow {
	0% {
		background-position: 0 100%;
	}
	100% {
		background-position: 100% 100%;
	}
}
#company-nav a:hover .title-j:after {
	animation: form-arrow-line 1s ease 0s 1;
}
@keyframes form-arrow-line {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}


/* パンクズ：共通 */
.breadcrumb li {
	display: inline-block;
	font-size: .875rem;
}
.breadcrumb li:after {
	content: " / ";
}
.breadcrumb li:last-child:after {
	content: "";
}


/* フッター */
footer {
	background-color: #255570;
	color: #fff;
	padding: 2rem 0 0 0;
	position: relative;
}
footer a {
	color: #fff;
}
.footer-contact {
	margin-bottom: 2rem;
}
#footer-logo {
	display: block;
	margin: 0 auto 1rem auto;
	max-width: 149px;
}
footer .phone-area {
	text-align: center;
}
footer .phone {
	display: inline-block;
	font-family: Oswald, sans-serif;
	font-size: 2.25rem;
	margin-bottom: .5rem;
}
footer .footer-contact p {
	font-size: .75rem;
}
footer nav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin: 0 auto;
}
footer nav li {
	font-size: .875rem;
}
footer nav li a {
	display: block;
	padding: .25rem 0;
}
footer li ul {
	padding-left: 1rem;
}
footer li ul li a:before {
	content: "−";
	margin-right: .5rem;
}
#copyright {
	background-color: #113a4c;
	color: #ccc;
	font-size: .75rem;
	padding: 1rem;
	text-align: center;
}


/* SP版グローバルナビ表示、barba遷移時の際のマスク */
.mask {
	background-color: rgba(255, 255, 255, 0);
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	transition: background-color .5s, box-shadow .5s, height .5s, transform .5s;
	-webkit-transform: translateY(100%);
			transform: translateY(100%);
	width: 100%;
	z-index: 1000;/*initial;*/
}
.mask.open {
	background-color: rgba(255, 255, 255, .85);
	height: 100%;
	-webkit-transform: translateY(0);
			transform: translateY(0);
	z-index: 1000;
}
.mask.cover {
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0 -10px 10px 10px rgba(255, 255, 255, 1);
	height: 100%;
	-webkit-transform: translateY(0);
			transform: translateY(0);
	z-index: 1000;/*100;*/
}

@media screen and (min-width: 480px) {
	/* メインビジュアル内ページタイトル：共通 */
	.page-title .title-e {
		font-size: 4.5rem;
	}
	.page-title .title-j {
		font-size: 1.125rem;
	}
	
	/* 採用情報・お問い合わせバナー */
	#company-nav a {
		padding: 1rem 2rem;
	}
	#company-nav a .title-e {
		font-size: 3rem;
	}
	
	/* フッター */
	footer .nav-left {
		flex-basis: 33%;
	}
	footer .nav-right {
		flex-basis: 66%;
	}
	footer .nav-right {
		display: flex;
		justify-conten: space-between;
	}
	footer .nav-right ul {
		flex-basis: 50%;
	}
	/*#copyright {
		text-align: right;
	}*/
}

@media screen and (min-width: 640px) {
	/* 採用情報・お問い合わせバナー */
	#company-nav a .title-e {
		flex-basis: 25%;
		font-size: 4rem;
	}
	#company-nav a .title-j {
		flex-basis: 75%;
	}
}

@media screen and (min-width: 980px) {
	br.pc {
		display: inline;
	}
	#scroll {
		display: block;
	}
	
	h1 {
		min-width: 196px;
		position: fixed;
		width: initial;
	}
	h1 picture.sp {
		display: none;
	}
	h1 picture.pc {
		display: block;
		height: 234px;
		width: 234px;
	}
	.hdr-right {
		background-color: initial;
		position: relative;
		width: initial;
		z-index: 2;
	}
	#global-nav .nav-icon {
		display: none;
	}
	#global-nav ul {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin: 0 1.5rem 0 0;
		opacity: initial;
		padding: 0;
	}
	#global-nav li {
		margin-right: 1.5rem;
	}
	#global-nav li:last-child {
		margin-right: 0;
	}
	#global-nav li a {
		color: #fff;
	}
	#global-nav > ul > li:nth-child(2) > ul.open {
		height: initial;
		opacity: 1;
	}
	.hdr-left {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100vh;
		position: fixed;/*absolute;*/
		top: 0;
		width: 100px;
		z-index: 1;
	}
	.hdr-left .nav-icon {
		margin: 0 auto;
	}
	.hdr-left .nav-icon span {
		background-color: #000;
	}
	
	#side-nav {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100vh;
		left: -400px;
		line-height: 1.6;
		padding-left: 100px;
		position: absolute;
		top: 0;
		transition: left 1s;
		z-index: 1;
	}
	.open #side-nav {
		left: 0;
	}
	#side-nav .nav-wrapper {
		display: flex;
		padding: 1rem;
	}
	#side-nav ul {
		background-color: #fff;
		display: block;
		margin-right: 2rem;
	}
	#side-nav ul:last-child {
		margin-right: 0;
	}
	#side-nav li {
		white-space: nowrap;
	}
	
	#scroll {
		background-color: #000;
		left: 49px;
		bottom: 0;
		position: absolute;
		z-index: initial;
	}
	#scroll:before {
		color: initial;
	}
	#scroll:after {
		background-color: #000;
	}
	
	.cage {
		margin-top: -70px;
		padding-left: 100px;
	}
	
	/* メインビジュアル：共通 */
	#mainvisual {
		border-right: 1rem solid #7698b4;
	}
	/* メインビジュアル内ページタイトル：共通 */
	.page-title {
		bottom: 2rem;
		left: 2rem;
	}
	.page-title .title-e {
		font-size: 6.25rem;
	}
	.page-title .title-j {
		font-size: 1.25rem;
	}
	
	.content-wrapper {
		padding: 5% 6%;
	}
	.sec-eycatch source, .sec-eyecatch img {
		object-fit: cover;
		object-position: 50% 50%;
	}
	.sec-detail-btn {
		display: inline;
	}
	
	/* 採用情報・お問い合わせバナー */
	#company-nav a {
		margin-bottom: 2rem;
		padding: 1rem 4rem;
	}
	#company-nav ul li:last-child a {
		margin-bottom: 0;
	}
	#company-nav a .title-e {
		font-size: 5rem;
	}
	#company-nav a .title-j {
		font-size: .875rem;
	}
	
	/* フッター */
	footer {
		padding-left: 100px;
	}
	footer .content-wrapper {
		padding: 5% 6%;
	}
	footer .content-wrapper {
		display: flex;
	}
	.footer-contact {
		flex-basis: 35%;
	}
	#footer-logo {
		margin: 0 0 1rem 0;
	}
	footer .phone-area {
		text-align: left;
	}
	footer .content-wrapper nav {
		flex-basis: 65%;
	}
}

/* アニメーション */
.animate-before {
	opacity: 0;
	transform: translateY(10px);
	transition: transform 1s .5s, opacity 1s .5s;
}
.slide-up {
	opacity: 1;
	transform: translateY(0px);
}

/* フェードイン表示前 */
.animate-fadein {
	opacity: 0;
	transition: opacity .75s;
/*}
picture.animate-fadein {*/
	overflow: hidden;
	position: relative;
}
.animate-fadein img, .animate-fadein source {
	transform: scale3d(1.1, 1.1, 1.1);
	transition: transform .75s;
}

/* フェードイン表示後 */
.animate-fadein.fadein {
	opacity: 1;
}
.animate-fadein.fadein img, .animate-fadein.fadein source {
	transform: scale3d(1.0, 1.0, 1.0);
}


/* スライドイン左→右表示前 */
.animate-slidetoright {
	overflow: hidden;
	position: relative;
}
.animate-slidetoright:after {
	background-color: #fff;
	content: "";
	display: block;
	height: 100%;
	right: 0;
	position: absolute;
	top: 0;
	transition: width .75s;
	width: 100%;
}

/* スライドイン左→右表示後 */
.animate-slidein.slidetoright {
}
.animate-slidetoright.slidetoright:after {
	width: 0;
}


/* スライドイン下→上表示前 */
.animate-slidetoup {
	overflow: hidden;
	position: relative;
}
.animate-slidetoup:after {
	background-color: #fff;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: height .75s;
	width: 100%;
}

/* スライドイン下→上表示後 */
.animate-slidein.slidetoup {
}
.animate-slidetoup.slidetoup:after {
	height: 0;
}