/* ----------------------------------------
* header
---------------------------------------- */
header {
	position: relative;
	z-index: 1000;
}
.pc-header {
	position: fixed;
	top: 2%;
	right: 1%;
	z-index: 1000;
}
.pc-header ul {
	margin: 0;
	padding: 0;
	justify-content: flex-end;
	align-items: center;
}
.pc-header ul li {
	display: block;
}
.pc-header ul li {
	margin: 0 1em;
}
.pc-header ul li a {
	align-items: center;
	justify-content: center;
	font-size: 90%;
}
.pc-header ul li a img {
	display: block;
	width: 20px;
	margin: 0 6px 0 0;
}
.pc-header ul li:nth-of-type(2) a img {
	width: 12px;
}


/* ----------------------------------------
* front
---------------------------------------- */
.container {
	height: 100vh;
	overflow-x: hidden;
	background-size: cover;
	background-position: center;
	background-image: url("../images/front/main.jpg");
}
.main-image {
	position: relative;
	height: 0;
	padding: 50% 0 0 0;
}
.main-image-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.main-image-wrap > div {
	position: absolute;
	top: 0;
	width: 47%;
	height: 100%;
	background: #fff;
	z-index: 1;
	box-shadow: 0 0 30px rgba(6, 0, 1, .34);
}
.main-image-wrap > .white-left {
	left: 0;
}
.main-image-wrap > .white-right {
	right: 0;
}
.main-image-wrap > h1 {
	position: relative;
	width: 16%;
	z-index: 2;
}
@media only screen and (max-width: 768px){
	.container {
		background-image: url("../images/front/main-sp.jpg");
	}
	.main-image {
		padding: 100vh 0 0 0;
	}
	.main-image-wrap > h1 {
		width: 64%;
		margin: 0 auto;
		top: 50%;
		left: 0;
		right: 0;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
	}
	.main-image-wrap > div {
		width: 40%;
	}
	.main-image-wrap > h1 > img {
		width: 100%;
	}
}


.front h2 {
	margin: 0 0 3em 0;
}
.front h2 img {
	width: 100%;
}
.front .recruit h2 {
	width: 80%;
}
.front .recruit h2 img {
	width: auto;
}
.front .contact h2 {
	width: 32%;
}
.front h2 .en {
	display: block;
	margin: 0 0 1em .5em;
	font-size: 135%;
}
.front p {
	text-align: justify;
	line-height: 2;
	font-size: 110%;
}
.front .link {
	width: 36%;
	position: absolute;
	bottom: 6%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
}
.front .about .link {
	margin: 0 36% 0 auto;
}
.front .recruit .link {
	bottom: 16%;
	margin: 0 16% 0 auto;
}
.front .contact .link {bottom: 12%;
	margin: 0 auto 0 12%;
}
.front .link a {
	width: 100%;
	padding: 6% 8%;
	justify-content: center;
	align-items: center;
	background: #393939;
	line-height: 1;
	font-size: 110%;
	transition: .3s;
}
.front .link a.active {
	background: #fff;
	border: 1px solid #393939;
	color: #393939;
}
.front .link a span {
	margin: 0 1em 0 0;
}
.about .link a img {
	width: 42%;
}
.business .link a img {
	position: absolute;
	right: 16%;
	width: 16%;
}
@media only screen and (max-width: 768px){
	.front h2 {
		margin: 0 0 2em 0;
	}
	.front .recruit h2 {
		width: 100%;
	}
	.front .contact h2 {
		width: 100%;
	}
	.front h2 .en {
		display: block;
		margin: 0 0 .5em 0;
		font-size: 110%;
	}
	.front h2 .ja {
		display: block;
		font-size: 210%;
		line-height: 1.4;
		font-weight: 900;
	}
	.front p {
		font-size: 100%;
	}
	.front .link {
		width: 84%;
		position: absolute;
		bottom: 6%;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 10;
	}
	.front .about .link {
		margin: 0 auto;
	}
	.front .recruit .link {
		bottom: 52%;
		margin: 0 auto;
	}
	.front .contact .link {
		bottom: 12%;
		margin: 0 auto 0;
	}
	.front .link a {
		width: 100%;
		padding: 8%;
	}
	.front .link a span {
		margin: 0 1em 0 0;
	}
	.about .link a img {
		width: 42%;
	}
	.business .link a img {
		position: absolute;
		right: 16%;
		width: 16%;
	}
}


.about {
	position: relative;
	padding: 8% 8% 0 8%;
	background: linear-gradient(to right, #fff 0%, #fff 47%, rgba(0,0,0,0) 47%, rgba(0,0,0,0));
	flex-flow: row wrap;
}
.about > .text {
	width: 50%;
	padding: 5% 0 0 0;
}
.about > .image {
	width: 50%;
	padding: 0 4% 0 8%;
}
@media only screen and (max-width: 1279px) and (min-width: 769px) {
	.about {
		padding: 8% 8% 12% 8%;
	}
}
@media only screen and (max-width: 768px){
	.about {
		position: relative;
		padding: 16% 0 0 0;
		background: rgba(0,0,0,0);
		flex-flow: row wrap;
	}
	.about > .text {
		width: 100%;
		padding: 0 8% 36% 8%;
		background: #fff;
	}
	.about > .text > h2 {
		margin: -2em 0 2em 0;
	}
	.about > .image {
		width: 100%;
		padding: 0 20%;
	}
	.about > .white-back {
		background: rgba(0,0,0,0);
		width: 100%;
	}
}


.white-back {
	background: linear-gradient(to right, #fff 0%, #fff 47%, rgba(0,0,0,0) 47%, rgba(0,0,0,0));
}
.triangle {
	width: 0;
	height: 0;
	margin: 0 0 0 auto;
	border-style: solid;
	border-width: 200px 0 0px 0px;
	border-color: transparent transparent transparent #fff;
}
.reversal {
	transform: rotate(180deg);
}
@media only screen and (max-width: 768px){
	.white-back {
		background: rgba(0,0,0,0);
		width: 100%;
	}
}


.business {
	position: relative;
	padding: 0 10% 12% 10%;
	background: #fff;
}
.business-list {
	position: relative;
	margin: 0;
	padding: 0;
	justify-content: space-between;
	z-index: 2;
}
.business-list li {
	display: block;
	width: 31%;
}
.business-list li p {
	margin: .5em 0 0 0;
	text-align: justify;
	font-size: 125%;
}
.business-title {
	display: block;
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1;
}
.business-sub-title {
	display: block;
	position: absolute;
	top: 0;
	left: 6%;
	width: 2%;
	z-index: 2;
}
@media only screen and (max-width: 768px){
	.business {
		padding: 12% 8% 44% 16%;
	}
	.business-list {
		flex-flow: row wrap;
	}
	.business-list li {
		width: 100%;
		margin: 6% 0;
	}
	.business-list li p {
		font-size: 110%;
	}
	.business-title {
		display: block;
		position: absolute;
		top: 5%;
		left: auto;
		right: 0;
		width: 40%;
	}
	.business-sub-title {
		display: block;
		position: absolute;
		top: 5%;
		left: 6%;
		width: 6%;
		z-index: 2;
	}
}


.recruit {
	position: relative;
	padding: 8% 8% 0 8%;
	background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 53%, #fff 53%, #fff 100%);
	flex-flow: row wrap;
}
.recruit > .text {
	width: 50%;
	padding: 5% 0 0 0;
}
.recruit > .text > p {
	padding: 0 0 0 16%;
}
.recruit > .image {
	width: 50%;
	padding: 0 8% 6% 4%;
}
@media only screen and (max-width: 1279px) and (min-width: 769px){
	.recruit > .image {
		padding: 0 8% 12% 4%;
	}
}
@media only screen and (max-width: 768px){
	.recruit {
		padding: 0 0 16% 0;
		background: rgba(0,0,0,0);
		flex-flow: row wrap;
	}
	.recruit > .text {
		width: 100%;
		padding: 16% 8% 16% 8%;
		background: #fff;
	}
	.recruit > .text > p {
		padding: 0;
		margin: 0;
	}
	.recruit > .image {
		width: 100%;
		padding: 0 20% 8% 20%;
	}
}


.contact {
	position: relative;
	padding: 8% 8% 8% 12%;
	background: linear-gradient(to right, #fff 0%, #fff 53%, rgba(0,0,0,0) 53%, rgba(0,0,0,0) 100%);
	overflow: hidden;
}
.contact .gray-triangle {
	display: block;
	width: 32%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.contact h2 {
	position: relative;
	width: 42%;
	z-index: 2;
}
.contact-white-back {
	position: absolute;
	top: 0;
	right: 0;
	width: 47%;
	height: 100%;
}
.contact .border {
	display: block;
	width: 36%;
	position: absolute;
	top: 0;
	left: 42%;
	transform: rotate(7deg);
}
@media only screen and (max-width: 768px){
	.contact {
		padding: 16% 8% 32% 8%;
		background: #fff;
	}
	.contact .gray-triangle {
		width: 36%;
		z-index: 1;
	}
	.contact h2 {
		position: relative;
		width: 100%;
		z-index: 2;
	}
}


/* ----------------------------------------
* page
---------------------------------------- */
.page-top {
	align-items: center;
}
.page-top > div {
	width: 50%;
}
.contact-page-top > .text {
	width: 40%;
}
.contact-page-top > .image {
	width: 60%;
}
.page-top > .text {
	padding: 0 8%;
}
.page-top > .text > h1 {
	margin: 0 0 16% 0;
	line-height: 1.2;
}
.page-top > .text > h1 > span {
	display: block;
}
.page-top > .text > h1 > .ja {
	font-size: 150%;
}
.page-top > .text > h1 > .en {
	font-size: 500%;
	margin: 0 0 .5em 0;
}
.page-top > .text > h2 {
	margin: 0 0 8% 0;
}
.page-top > .text > h2 > span {
	display: block;
}
.page-top > .text > h2 > .ja {
	font-size: 150%;
}
.page-top > .text > h2 > .en {
	font-size: 250%;
}
.page-top > .text > p {
	line-height: 2;
	text-align: justify;
	margin: 0;
}
@media only screen and (max-width: 1279px) and (min-width: 769px){
	.page-top > .text > h1 > .ja {
		font-size: 135%;
	}
	.page-top > .text > h1 > .en {
		font-size: 400%;
	}
	.page-top > .text > h2 > .ja {
		font-size: 135%;
	}
	.page-top > .text > h2 > .en {
		font-size: 225%;
	}
	.page-top > .text > p {
		font-size: 90%;
	}
}
@media only screen and (max-width: 768px){
	.page-top {
		flex-flow: row wrap;
		padding: 0 0 16% 0;
	}
	.page-top > div {
		width: 100%;
	}
	.page-top > .text {
		padding: 0 6%;
		margin: -8% 0 0 0;
	}
	.contact-page-top > .text {
		width: 100%;
		padding: 16% 24% 0 6%;
	}
	.contact-page-top > .image {
		width: 100%;
	}
	.page-top > .text > h1 {
		margin: 0 0 12% 0;
	}
	.page-top > .text > h1 > .ja {
		font-size: 100%;
	}
	.page-top > .text > h1 > .en {
		font-size: 250%;
	}
	.page-top > .text > h2 {
		margin: 0 0 8% 0;
	}
	.page-top > .text > h2 > .ja {
		font-size: 100%;
	}
	.page-top > .text > h2 > .en {
		font-size: 125%;
	}
	.page-top > .text > p {
		font-size: 90%;
	}
}


/* ----------------------------------------
* business
---------------------------------------- */
.services {
	padding: 8% 0 0 0;
}
.service-inner {
	position: relative;
	align-items: flex-start;
}
.service-inner > div {
	width: 50%;
}
.service-inner > .text {
	padding: 4% 4% 0 8%;
}
.service-inner > .text > h2 {
	font-size: 215%;
	margin: 0 0 .5em 0;
}
.service-inner > .text > p {
	line-height: 2;
	text-align: justify;
	margin: 0;
}
.service-inner > .line {
	display: block;
	position: absolute;
	bottom: -6%;
	right: 0;
	width: 100%;
	transform: rotate(-.25deg);
}
@media only screen and (max-width: 1279px) and (min-width: 769px){
	.service-inner > .text {
		padding: 0 4% 0 8%;
	}
	.service-inner > .text > h2 {
		font-size: 200%;
	}
	.service-inner > .text > p {
		font-size: 90%;
	}
}
@media only screen and (max-width: 768px){
	.services {
		padding: 8% 0 0 0;
	}
	.service-inner {
		flex-flow: row wrap;
	}
	.service-inner > div {
		width: 100%;
	}
	.service-inner > .text {
		padding: 0 6% 12% 6%;
	}
	.service-inner > .text > h2 {
		font-size: 150%;
		margin: 0 0 1em 0;
	}
	.service-inner > .text > p {
		font-size: 90%;
	}
}

#maintenance {
	margin: -23.4% 0 0 0;
}
#maintenance > .text {
	padding: 24% 4% 0 4%;
}
@media only screen and (max-width: 1279px) and (min-width: 769px){
	#maintenance > .text {
		padding: 22% 4% 0 4%;
	}
}
@media only screen and (max-width: 768px){
	#maintenance {
		margin: 0;
	}
	#maintenance > .text {
		padding: 12% 6%;
	}
}

#engineering > .text {
	padding: 8% 4% 0 4%;
}
@media only screen and (max-width: 1279px) and (min-width: 769px){
	#engineering > .text {
		padding: 8% 4% 0 4%;
	}
	#engineering > .text > h2 {
		font-size: 175%;
	}
}
@media only screen and (max-width: 768px){
	#engineering > .text {
		padding: 0 6%;
	}
	#engineering > .text > h2 {
		font-size: 135%;
	}
}

.feature {
	padding: 0 8% 8% 8%;
	align-items: flex-start;
}
.feature > div {
	width: 50%;
}
.feature > .image {
	padding: 0 8% 0 0;
}
.feature > .text {
	padding: 8% 0 0 0;
}
.feature > .text > h2 {
	font-size: 500%;
	margin: 0 0 .5em 0;
}
.feature > .text > p {
	line-height: 1.8;
	text-align: justify;
	margin: 0;
}
@media only screen and (max-width: 1279px) and (min-width: 769px){
	.feature > .text > h2 {
		font-size: 400%;
	}
}
@media only screen and (max-width: 768px){
	.feature {
		padding: 32% 6% 16% 6%;
		flex-flow: row wrap;
	}
	.feature > div {
		width: 100%;
	}
	.feature > .image {
		padding: 0 0 8% 0;
	}
	.feature > .text {
		padding: 0;
	}
	.feature > .text > h2 {
		font-size: 325%;
		margin: 0 0 .5em 0;
	}
	.feature > .text > p {
		font-size: 110%;
	}
}


/* ----------------------------------------
* company
---------------------------------------- */
.company-page-top {
	position: relative;
	padding: 0 0 4% 0;
}
.company-page-top .text {
	position: relative;
	z-index: 2!important;
	padding: 0 8%;
	margin: -12% 0 0 0;
}
.company-page-top h1 {
	font-size: 500%;
	margin: 0 0 .5em 0;
}
.company-page-top h2 {
	font-size: 175%;
	margin: 0 0 2em 0;
}
.company-page-top p {
	text-align: justify;
	margin: 0 0 2em 0;
	line-height: 2;
}
.company-page-top .text > img {
	width: 36%;
	margin: 2em 0 0 0;
}
.company-page-top > img {
	position: relative;
	z-index: 1!important;
	margin: -16% 0 0 0;
}
@media only screen and (max-width: 768px){
	.company-page-top {
		padding: 0 0 16% 0;
	}
	.company-page-top .text {
		padding: 0 6% 24% 6%;
		margin: -8% 0 0 0;
	}
	.company-page-top h1 {
		font-size: 300%;
		margin: 0 0 1em 0;
	}
	.company-page-top h1 > span {
		display: block;
		font-size: 40%;
	}
	.company-page-top h2 {
		font-size: 150%;
		margin: 0 0 2em 0;
	}
	.company-page-top .text > img {
		display: block;
		width: 72%;
		margin: 0 0 0 auto;
	}
	.company-page-top > img {
		margin: -16% 0 0 0;
	}
}

#overview {
	padding: 6% 8%;
	background: #009df1;
	align-items: flex-start;
}
#overview > h2 {
	width: 25%;
	text-align: justify;
	font-size: 300%;
}
#overview > ul {
	width: 75%;
	margin: 0;
	padding: 0;
	font-size: 115%;
}
#overview > ul > li {
	align-items: center;
	padding: 2% 0;
}
#overview > ul > li > h3 {
	width: 20%;
	margin: 0;
}
#overview > ul > li > p {
	width: 80%;
	margin: 0;
}
@media only screen and (max-width: 768px){
	#overview {
		padding: 12% 6%;
		flex-flow: row wrap;
	}
	#overview > h2 {
		width: 100%;
		font-size: 300%;
		margin: 0 0 1em 0;
	}
	#overview > ul {
		width: 100%;
		font-size: 100%;
	}
	#overview > ul > li {
		padding: 3% 0;
		align-items: flex-start;
	}
	#overview > ul > li > h3 {
		width: 25%;
		font-size: 90%;
	}
	#overview > ul > li > p {
		width: 75%;
		font-size: 90%;
	}
}

.top-posts {
	padding: 8%;
}
.top-posts > ul {
	margin: 0;
	padding: 0;
}
.post-slide {
	display: block;
	border-bottom: 1px solid #d9d9d9;
}
.post-slide > a {
	padding: 2% 0;
	align-items: center;
}
.post-slide > a > .thumb {
	width: 20%;
	height: 0;
	padding: calc(56%*.2) 0 0 0;
	margin: 0 5% 0 0;
}
.post-slide > a > img {
	display: block;
	width: 20%;
	height: auto;
	margin: 0 5% 0 0;
}
.post-slide > a > .text {
	width: 75%;
}
.post-slide > a > .text > img {
	display: block;
	width: 10%;
	margin: 0 0 .5em 0;
}
.post-slide > a > .text > h3 {
	text-align: justify;
	font-size: 150%;
	margin: 0 0 .5em 0;
}
.post-slide > a > .text > p {
	font-size: 85%;
	margin: 0;
}
.top-posts > a {
	align-items: center;
	justify-content: center;
	width: 40%;
	padding: 2% 0;
	margin: 8% 0 0 0;
	background: #009df1;
}
.top-posts > a > span {
	margin: 0 1em 0 0;
}
@media only screen and (max-width: 768px){
	.top-posts {
		padding: 16% 6%;
	}
	.post-slide > a {
		padding: 6% 0;
		align-items: center;
	}
	.post-slide > a > .thumb {
		width: 30%;
		padding: calc(75%*.3) 0 0 0;
	}
	.post-slide > a > img {
		width: 30%;
	}
	.post-slide > a > .text {
		width: 65%;
	}
	.post-slide > a > .text > img {
		display: block;
		width: 40%;
		margin: 0 0 .25em 0;
	}
	.post-slide > a > .text > h3 {
		font-size: 100%;
		margin: 0;
	}
	.post-slide > a > .text > p {
		font-size: 85%;
		margin: 0;
	}
	.top-posts > a {
		width: 100%;
		padding: 4% 0;
		margin: 16% 0 0 0;
		font-size: 110%;
	}
}

/* ----------------------------------------
* archives
---------------------------------------- */
#page-archives {
	padding: 8%;
}
#page-archives h1 {
	font-size: 500%;
	margin: 0 0 1em 0;
}
#page-archives ul {
	margin: 0;
	padding: 0;
}
@media only screen and (max-width: 768px){
	#page-archives {
		padding: 12% 6%;
	}
	#page-archives h1 {
		font-size: 300%;
		margin: 0 0 1em 0;
	}
}


/* ----------------------------------------
* single
---------------------------------------- */
.single {
	padding: 8%;
}
.single h1 {
	align-items: center;
	font-size: 500%;
	margin: 0 0 1em 0;
	line-height: 1;
}
.single h1 img {
	margin: 0 .5em 0 0;
}
.single > h1 span {
	line-height: 1;
}
.single > h2 {
	font-size: 200%;
	margin: 0 0 2em 0;
}
.single > h2 span {
	display: block;
}
.single > h2 span.date {
	font-size: 60%;
}
.post-contents {
	padding: 8% 0 0 0;
	font-size: 115%;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500!important;
	line-height: 2;
}
.post-contents h1,
.post-contents h2,
.post-contents h3,
.post-contents h4,
.post-contents h5,
.post-contents h6 {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700!important;
	margin: 0 0 1em 0;
}
.post-contents h1 {
	font-size: 200%;
}
.post-contents h2 {
	font-size: 175%;
}
.post-contents h3 {
	font-size: 150%;
}
.post-contents h4 {
	font-size: 135%;
}
.post-contents h5 {
	font-size: 120%;
}
.post-contents h6 {
	font-size: 110%;
}
.post-contents p {
	font-size: 100%;
	margin: 0 0 2em 0;
}
@media only screen and (max-width: 768px){
	.single {
		padding: 12% 6%;
	}
	.single > h1 {
		font-size: 300%;
	}
	.single > h2 {
		font-size: 150%;
		margin: 0 0 2em 0;
	}
	.single h2 span.date {
		font-size: 75%;
	}
	.post-contents {
		padding: 12% 0 0 0;
		font-size: 100%;
	}
}


.single .top-posts {
	padding: 8% 0 0 0;
}


/* ----------------------------------------
* recruit
---------------------------------------- */
#page-recruit {
	padding: 0 0 8% 0;
}
.recruit-top {
	position: relative;
}
.recruit-top .title-wrap {
	position: absolute;
	bottom: 20%;
	left: 0;
	width: 72%;
}
.recruit-top .title-wrap > img {
	display: block;
	width: 50%;
}
.recruit-top .title-wrap > h1 {
	position: relative;
	margin: -3% 0 0 0;
	padding: 0 0 0 8%;
	font-size: 250%;
}
.recruit-top .title-wrap > h1 > span {
	display: block;
}
@media only screen and (max-width: 768px){
	#page-recruit {
		padding: 0 0 8% 0;
	}
	.recruit-top .title-wrap {
		bottom: 28%;
		left: 0;
		width: 100%;
	}
	.recruit-top .title-wrap > img {
		width: 50%;
		height: 20px;
	}
	.recruit-top .title-wrap > h1 {
		margin: -6% 0 0 0;
		padding: 0 0 0 6%;
		font-size: 100%;
	}
	.recruit-top .title-wrap > h1 > span:first-of-type {
		font-size: 200%;
		margin: 0 0 .25em 0;
	}
}

#message {
	position: relative;
	margin: -32px 0 0 0;
}
#message > div {
	width: 50%;
}
#message > div.image img {
	margin: -13% 0 0 0;
}
#message > div.text {
	position: relative;
	padding: 0 8% 0 2%;
}
#message > div.text > img {
	position: absolute;
	top: 0;
	right: 14%;
	width: 86%;
	height: 32px;
}
#message h2 {
	position: relative;
	margin: -2% 0 2em 0;
	padding: 0 0 0 2%;
	font-size: 250%;
	line-height: 2;
}
#message h2 > span {
	display: block;
}
#message h2 > span:last-of-type {
	font-size: 66%;
}
#message p {
	text-align: justify;
	padding: 0 0 0 2%;
	margin: 0 0 2em 0;
	line-height: 2;
}
@media only screen and (max-width: 768px){
	#message {
		margin: -20px 0 0 0;
		flex-flow: row wrap;
	}
	#message > div {
		width: 100%;
	}
	#message > div.image img {
		margin: 0;
	}
	#message > div.text {
		padding: 0 0 0 6%;
	}
	#message > div.text > img {
		right: 0;
		width: 94%;
		height: 20px;
	}
	#message h2 {
		margin: -8% 0 .5em 0;
		padding: 0 0 0 4%;
		font-size: 200%;
	}
	#message h2 > span:last-of-type {
		font-size: 55%;
		margin: .5em 0 0 -4%;
	}
	#message p {
		padding: 0 6% 0 0;
		margin: 0 0 2em 0;
		line-height: 2;
		font-size: 90%;
	}
}

#benefit {
	padding: 4% 8%;
	align-items: center;
}
#benefit div.text {
	position: relative;
	width: 50%;
	padding: 8% 0 4% 0;
}
#benefit div.text > img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 32px;
	height: 100%;
}
#benefit h2 {
	position: relative;
	margin: 0 0 2em 0;
	padding: 0 0 0 3%;
	font-size: 250%;
	line-height: 2;
}
#benefit h2 > span {
	display: block;
}
#benefit h2 > span:last-of-type {
	font-size: 66%;
	padding: 0 0 0 4%;
}
#benefit div.text ul {
	margin: 0;
	padding: 0 0 0 8%;
}
#benefit div.text ul li {
	align-items: center;
	margin: 2% 0;
}
#benefit div.text ul li img {
	margin: 0 1em 0 0;
}
#benefit div.text ul li p {
	text-align: justify;
	margin: 0;
	font-size: 105%;
	line-height: 2.2;
}
#benefit div.image {
	width: 50%;
	padding: 0 0 0 8%;
}
@media only screen and (max-width: 768px){
	#benefit {
		padding: 24% 0 12% 0;
		flex-flow: row wrap;
	}
	#benefit div.text {
		width: 88%;
		margin: 0 auto;
		padding: 8% 0 4% 0;
	}
	#benefit div.text > img {
		width: 20px;
	}
	#benefit h2 {
		margin: 0 0 1em 0;
		padding: 0 0 0 3%;
		font-size: 200%;
	}
	#benefit h2 > span:last-of-type {
		font-size: 55%;
		padding: 0 0 0 6%;
	}
	#benefit div.text ul {
		padding: 0 0 0 10%;
	}
	#benefit div.text ul li {
		margin: 4% 0;
	}
	#benefit div.text ul li img {
		display: block;
		width: 16%;
	}
	#benefit div.text ul li p {
		font-size: 90%;
		line-height: 2;
	}
	#benefit div.image {
		width: 100%;
		padding: 16% 0;
	}
}

#recruit-link-wrap {
	position: relative;
	height: 0;
	padding: 59.25% 0 0 0;
	background-image: url(../images/recruit/recruit-back.jpg);
	background-size: 100% 100%;
}
.recruit-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 4% 0 0 0;
}
.recruit-inner > h2 {
	text-align: center;
	font-size: 300%;
	margin: 0 0 1.5em 0;
}
.recruit-inner > h2 > img {
	display: block;
	width: 16%;
	margin: 0 auto 1em auto;
}
.recruit-inner > h2 > span {
	display: block;
}
.recruit-inner > h2 > span:last-of-type {
	font-size: 52%;
}
.recruit-inner > a {
	display: block;
	width: 28%;
	background: #fff;
	padding: 1% 0;
	margin: 0 auto;
	border-radius: 12px;
	text-align: center;
	font-size: 175%;
}
@media only screen and (max-width: 768px){
	#recruit-link-wrap {
		padding: 217.06% 0 0 0;
		background-image: url(../images/recruit/recruit-back-sp.jpg);
	}
	.recruit-inner {
		padding: 16% 0 0 0;
	}
	.recruit-inner > h2 {
		text-align: center;
		font-size: 200%;
		margin: 0 0 2em 0;
	}
	.recruit-inner > h2 > img {
		width: 36%;
	}
	.recruit-inner > h2 > span:last-of-type {
		font-size: 52%;
	}
	.recruit-inner > a {
		width: 80%;
		padding: 4% 0;
		font-size: 125%;
	}
}


/* ----------------------------------------
* recruit-infos
---------------------------------------- */
#page-recruit-informations > ul {
	padding: 4% 8% 0 8%;
	margin: 0;
}
.recruit-slide {
	margin: 0 0 8% 0;
}
.recruit-slide h3 {
	align-items: center;
	margin: 0 0 1em 0;
	font-size: 200%;
}
.recruit-slide h3 img {
	margin: 0 1em 0 0;
}
.info-table {
	padding: 0;
	margin: 0;
	border-top: 2px solid #d9d9d9;
}
.info-table > li {
	align-items: stretch;
	border-bottom: 2px solid #d9d9d9;
	font-size: 110%;
}
.info-table > li > h4 {
	width: 20%;
	padding: 2%;
	margin: 0;
	background: #f39800;
}
.info-table > li > p {
	width: 80%;
	padding: 2%;
	margin: 0;
	background: #fff;
	text-align: justify;
}
.contact-link {
	display: block;
	width: 40%;
	margin: 0 auto 12% auto;
}
@media only screen and (max-width: 768px){
	#page-recruit-informations > ul {
		padding: 16% 6% 0 6%;
	}
	.recruit-slide {
		margin: 0 0 8% 0;
	}
	.recruit-slide h3 {
		font-size: 150%;
	}
	.recruit-slide h3 img {
		display: block;
		width: 16%;
		margin: 0 1em 0 0;
	}
	.info-table {
		border-top: none;
	}
	.info-table > li {
		flex-flow: row wrap;
		border-bottom: none;
		font-size: 100%;
	}
	.info-table > li > h4 {
		width: 100%;
		padding: 2% 0;
		text-align: center;
		font-size: 100%;
	}
	.info-table > li > p {
		width: 100%;
		padding: 8% 4%;
		text-align: justify;
		font-size: 90%;
	}
	.contact-link {
		display: block;
		width: 100%;
		margin: 0 auto 24% auto;
	}
}


/* ----------------------------------------
* contact
---------------------------------------- */
#mailform-wrap {
	padding: 8% 12%;
}
.form-wrap {
	margin: 4% 0;
	align-items: stretch;
}
.form-wrap > h2 {
	display: flex;
	align-items: center;
	width: 28%;
	font-size: 125%;
}
.form-wrap > h2 > span {
	color: #e60012;
}
.form-wrap > h2::before {
	display: block;
	content: '';
	width: 24px;
	height: 24px;
	background-image: url(../images/contact/form-icon.png);
	background-size: 100% 100%;
	margin: 0 12px 0 0;
}
.form-wrap > p {
	display: block;
	width: 72%;
	margin: 0;
}
.form-wrap > p > input,
.form-wrap > p > textarea {
	display: block;
	width: 100%;
	border-radius: 0;
	border-bottom: 1px solid #999999;
	resize: none;
	font-size: 125%;
}
.mwform-tel-field {
	display: flex;
	width: 100%;
}
.mwform-tel-field input {
	display: block!important;
	width: 100%!important;
	margin: 0 1em;
	border-radius: 0!important;
	border-bottom: 1px solid #999999!important;
	font-size: 125%;
}
.mwform-tel-field input:first-of-type {
	margin: 0 1em 0 0;
}
.mwform-tel-field input:last-of-type {
	margin: 0 0 0 1em;
}
.mw_wp_form_confirm .form-wrap > p {
	border-bottom: 1px solid #999999;
}
.privacy-policy-link {
	text-align: center;
	padding: 4% 0;
	font-size: 125%;
	color: #484848;
}
.privacy-policy-link a {
	color: #484848;
	border-bottom: 1px solid #484848;
}
.submit-wrap {
	width: 50%;
	margin: 8% auto 0 auto;
}
.submit-wrap input {
	display: block;
	width: 100%;
	height: 0;
	margin: 8% auto;
	border-radius: 0px;
	background-image: url(../images/contact/submit.png);
	background-size: 100% 100%;
	color: #fff;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900!important;
	letter-spacing: 0.2em;
	font-size: 125%;
	transition: .3s;
}
.submit-wrap input:hover {
	color: #e50009;
	background-image: url(../images/contact/submit-white.png);
}
@media only screen and (max-width: 1279px) and (min-width: 769px){
	.form-wrap > h2 {
		width: 35%;
	}
	.form-wrap > p {
		width: 65%;
	}
}
@media only screen and (max-width: 768px){
	#mailform-wrap {
		padding: 0 6% 16% 6%;
	}
	.form-wrap {
		margin: 0 0 16% 0;
		flex-flow: row wrap;
	}
	.form-wrap > h2 {
		display: flex;
		align-items: center;
		width: 100%;
		font-size: 125%;
		margin: 0 0 1em 0;
	}
	.form-wrap > p {
		width: 100%;
	}
	.privacy-policy-link {
		text-align: justify;
		padding: 4% 0;
		font-size: 115%;
		line-height: 2;
	}
	.submit-wrap {
		width: 100%;
		margin: 24% auto 0 auto;
	}
}


/* ----------------------------------------
* privacy-policy
---------------------------------------- */
#page-privacy-policy {
	padding: 12% 8%;
	color: #484848;
}
#page-privacy-policy h1 {
	text-align: center;
	font-size: 500%;
	color: #535353;
	line-height: 1.2;
	margin: 0 0 2em 0;
}
#page-privacy-policy h1 span {
	display: block;
	font-size: 33%;
}
#page-privacy-policy > p {
	text-align: justify;
	line-height: 2;
	margin: 0 0 3em 0;
}
#page-privacy-policy > p:first-of-type {
	font-size: 125%;
}
#page-privacy-policy h2 {
	font-size: 125%;
	margin: 0 0 1em 0;
}
@media only screen and (max-width: 768px){
	#page-privacy-policy {
		padding: 16% 6%;
	}
	#page-privacy-policy h1 {
		text-align: center;
		font-size: 400%;
		margin: 0 0 1.5em 0;
	}
	#page-privacy-policy > p {
		text-align: justify;
		line-height: 2;
		margin: 0 0 4em 0;
	}
	#page-privacy-policy > p:first-of-type {
		font-size: 125%;
	}
	#page-privacy-policy h2 {
		font-size: 125%;
	}
}


/* ----------------------------------------
* footer
---------------------------------------- */
.footer-inner {
	background: #fff;
	padding: 8% 0 6% 0;
}
.footer-inner .logo {
	display: block;
	width: 10%;
	margin: 0 auto 2% auto;
}
.footer-nav ul {
	margin: 0;
	padding: 0;
}
.footer-nav ul {
	margin: 0;
	padding: 0;
	justify-content: center;
	align-items: center;
}
.footer-nav ul li {
	display: block;
}
.footer-nav ul li {
	margin: 0 1em;
}
.footer-nav ul li a {
	align-items: center;
	justify-content: center;
	font-size: 90%;
}
.footer-nav ul li a img {
	display: block;
	width: 20px;
	margin: 0 6px 0 0;
}
.footer-nav ul li:nth-of-type(2) a img {
	width: 12px;
}
@media only screen and (max-width: 768px){
	.footer-inner {
		padding: 12% 0 24% 0;
	}
	.footer-inner .logo {
		width: 80%;
		margin: 0 auto;
	}
}


/* ----------------------------------------
* 404
---------------------------------------- */
.page-notfound {
	padding: 16% 16% 8% 16%;
}
.page-notfound h1 {
	font-size: 250%;
	margin: 0 0 1em 0;
	text-align: center;
}
.page-notfound p {
	text-align: center;
}
.page-notfound a {
	width: 48%;
	margin: 8% auto 0 auto;
	padding: 4% 6%;
	justify-content: center;
	align-items: center;
	background: #393939;
	line-height: 1;
	font-size: 110%;
	transition: .3s;
}
.page-notfound a span {
	margin: 0 1em 0 0;
}
.page-notfound a.active {
	background: #fff;
	border: 1px solid #393939;
	color: #393939;
}
@media only screen and (max-width: 768px){
	.page-notfound {
		padding: 48% 8% 16% 8%;
	}
	.page-notfound h1 {
		font-size: 175%;
	}
	.page-notfound a {
		width: 80%;
		margin: 16% auto 0 auto;
		padding: 8% 0;
		font-size: 90%;
	}
}


/* ----------------------------------------
* opening
---------------------------------------- */
.opening {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #fff;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}