/*
Theme Name: oganecutter
Theme URI: http://underscores.me/
Author: 4eyes
Author URI: http://underscores.me/
Description: for oganecutter
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/


@import './css/base.css';
@import './css/general_classes.css';

html, body {
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
	position: relative;
	min-width: 1140px;
}

html {
    font-family: 'Noto Sans JP Subset', sans-serif;
    font-size: 62.5%;
}

body {
	font-size: 1.5em;
	color: #292929;
	letter-spacing: .07em;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/*リンク*/
a { color: #0f264d; transition: .3s; -webkit-transition: .3s; }
a:link,
a:visited,
a:hover,
a:active {
	color: #0f264d;
}

a:hover{
	opacity: 1;
}

img { pointer-events: none !important; }

/*エフェクト*/

.bright {
	overflow: hidden;
	position: relative;
}

.bright:before {
  content: "";
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, .8);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  top: -10%;
  left: -180%;
  transition: .3s ease-in-out;
}

.bright:hover:before {
	left: 60%;
}

.fade {
	opacity: 0;
	-webkit-transition: all 0.6s;
	transition: all 0.6s;
}
.fade.scroll-on { opacity: 1; transform: none; }

.fade-left {
	-webkit-transform: translate(30px, 0);
	transform: translate(30px, 0);
}
.fade-right {
	-webkit-transform: translate(-30px, 0);
	transform: translate(-30px, 0);
}
.fade-up {
	-webkit-transform: translate(0, 40px);
	transform: translate(0, 40px);
}
.fade-down {
	-webkit-transform: translate(0, 40px);
	transform: translate(0, 40px);
}

.turn { opacity: 0; }

br.sp { display: none; }
br.pc { display: block; }

.btn-next {
	height: 65px;
	line-height: 65px;
	padding: 0 3rem;
	border-radius: 40px;
	font-size: 1.8rem;
	font-weight: 500;
	display: inline-block;
	background-color: #fff;
	color: #0f264d;
}

.btn-next i {
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url(./images/arrow0F264D.svg);
	margin-left: .3rem;
	vertical-align: -5px;
}

/* ---------------------------------
*    Structure
*/

#wrap {
	width: 100%;
	background-color: #fff;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: relative;
	overflow: hidden;
	margin-top: 81px;
}

.front #wrap { margin-top: 0; } 

#contents {}
#contents .inner {
	max-width: 1160px;
	margin: 0 auto;
}

#footer {
	width: 100%;
	padding: 3rem;
	box-sizing: border-box;
	background: url(./images/bg-tile.jpg);
	display: flex;
	align-items: center;
	justify-content: center;
}

#opening {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 501;
	width: 150vw;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0vw;
	transform: skew(-10deg);
	left: -25vw;
	animation: openingAnimation .5s ease-in-out .5s forwards;
}

#opening div {
	background-color: #0f264d;
}

@keyframes openingAnimation {
	100% {
	  grid-gap: 150vw;
	}
}

.opening_off #opening { z-index: -1; }

/* ---------------------------------
*    Header
*/

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 150px;
	z-index: 100;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	background: rgb(34,193,195);
	background: linear-gradient(0deg, rgba(34,193,195,0) 0%, rgba(6,16,34,0.3) 40%);
}

#header.mini {
	height: 80px;
	border-bottom: 1px solid #061022;
	background-color: #10254c;
}

/* Logo */

#mainLogo {
	position: absolute;
	top: 50%;
	left: 150px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 101;
}

#mainLogo a{
	text-indent: -999em;
	background: url(./images/logo-main.png) no-repeat 0 0;
	width: 60px;
	height: 60px;
	display: block;
	background-size: 100% !important;
}

#header.mini #mainLogo a {
	width: 50px;
	height: 50px;
}


/*ナビ*/

#gdrawer {
	position: relative;
	top: 50%;
	left: 270px;
	width: 450px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

header nav {
	position: relative;
	width: 100%;
}

header nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

header nav ul li a {
	font-size: 1.4rem;
	display: inline-block;
	padding: 1rem 0;
	position: relative;
	color: #fff !important;
}

header nav ul li a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: #fff;
}
header nav ul li a:hover,
body:not(.front) header nav ul .current-menu-item a { color: #fff; }
body:not(.front) header nav ul .current-menu-item a { font-weight: 500; }
header nav ul li a:hover::before {
	animation: moveLine .5s ease-out forwards;
}

@keyframes moveLine {
	0% {
	  width: 0%;
	}
	100% {
	  width: 100%;
	}
}



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


/*not-found*/

.not-found {
	padding: 10rem;
}

.not-found h1 {
	font-family: 'Oswald', sans-serif;
	text-align: center;
	font-size: 3rem;
	font-weight: 500;
}

.not-found h1 span {
	display: inline-block;
	margin-top: 3rem;
	font-size: 1.8rem;
	font-weight: normal;
}


/*swiper*/

#works-gallery .swiper-slide {
	-webkit-transition: all 0.6s;
	transition: all 0.6s;
	position: relative;
}

.swiper-slide img {
	width: 100%;
	vertical-align: bottom;
}

#works-gallery .swiper-slide-prev,
#works-gallery .swiper-slide-next,
#works-gallery .swiper-slide-duplicate-prev,
#works-gallery .swiper-slide-duplicate-next {
  transform: scale(0.9);
}

.swiper-button-prev,
.swiper-button-next {
	background-color: rgba(255, 255, 255,.8);
	text-indent: -999em;
	border-radius: 25px;
	width: 50px !important;
	height: 50px !important;
	margin-top: -25px !important;
}

.swiper-button-prev { left:30px; }
.swiper-button-next { right:30px; }

.swiper-button-prev:after,
.swiper-button-next:after {
	content: '' !important;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid #10254c;
	border-right: 2px solid #10254c;
	position: absolute;
	right: 50%;
	top: 50%;
}

.swiper-button-next:after {
	margin: -5px -5px 0 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.swiper-button-prev:after {
	margin: -5px -8px 0 0;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

#about-works .swiper-pagination span {
	cursor: pointer;
	height: 12px;
	width: 12px;
	background-color: #3e0096;
	margin: 0 6px;
}


/*youtube*/

.youtube .iframe {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.youtube .iframe iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* ---------------------------------
*    Top
*/

.top section {
	position: relative;
	box-sizing: border-box;
}

.top section:not(:first-child) {
	min-width: 1160px;
	margin: 0 auto 10rem;
}
.top section:last-of-type { margin-bottom: 0; }

.top section header {
	margin-bottom: 5rem;
	position: relative;
}

.top section header h1 {
	position: relative;
	font-family: 'Oswald', sans-serif;

	font-size: 4.5rem;
	color: #fff;
	font-weight: 500;
	letter-spacing: .05em;
	margin-bottom: 1rem;
}

.top section header h1+span {
	display: inline-block;
	color: #fff;
	font-weight: 500;
}

.top section:nth-of-type(3) header h1,
.top section:nth-of-type(4) header h1,
.top section:nth-of-type(3) header h1+span,
.top section:nth-of-type(4) header h1+span { color: #1b4182; }

/*kv*/

.top .kv {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100vh;
	background: url(./images/kv.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.top .kv .scroll {
	position: absolute;
	bottom: 80px;
	right: 50%;
	z-index: 2;
	font-family: 'Oswald', sans-serif;
	font-size: 1.6rem;
	color: #fff;
	-webkit-transform: translateY(50%) translateX(50%);
	transform: translateY(50%) translateX(50%);
}

.top .kv .scroll::after {
	content: '';
	width: 10px;
	height: 10px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	position: absolute;
	right: 50%;
	bottom: -40px;
	margin-right: -7px;

	animation: move 1.5s linear infinite
}

@keyframes move {
  0% {
    transform: translateY(-15px) rotate(45deg);
    -webkit-transform: translateY(-15px) rotate(45deg);
  }
  50% {
    transform: translateY(-25px) rotate(45deg);
    -webkit-transform: translateY(-25px) rotate(45deg);
  }
  100% {
    transform: translateY(-15px) rotate(45deg);
    -webkit-transform: translateY(-15px) rotate(45deg);
  }
}

.top .kv .catch {
	position: absolute;
	bottom: 200px;
	right: 100px;
	color: #fff;
}

.top .kv .catch .en {
	font-family: 'Oswald', sans-serif;
	font-size: 8rem;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.2;
	margin-bottom: 1rem;
}

.top .kv .catch .jp {
	font-size: 2rem;
	font-weight: 500;
}

.top .about-us {
	background: url(./images/bg-tile.jpg);
	margin-top: -300px;
}

.top .kv .blade {
	position: absolute;
	bottom: -500px;
	right: -100px;
	width: 1000px;
	height: 1000px;
	background: url(./images/blade.png) no-repeat 0 0;
	background-size: 100%;
	opacity: .6;
}

/*about-us*/

.top .about-us {
	padding: 10rem 0;
	min-height: 800px;
}

.top .about-us dl {
	max-width: 600px;
	color: #fff;
}

.top .about-us dl dt h2 {
	font-size: 2rem;
	font-weight: 500;
	margin-bottom: 2rem;
	line-height: 2;
}

.top .about-us dl dd {
	font-size: 1.6rem;
	line-height: 2.5;
	margin-bottom: 4rem;
}

.top .about-us .photo {
	position: absolute;
	right: 0;
	top: 7rem;
	width: calc(100% - 650px);
	max-width: 650px;
}

.top .about-us .photo img {
	width: 100%;
	height: auto;
}

/*about-works*/

.top .about-works {
	padding: 10rem 0;
}

.top .about-works ul {
}

.top .about-works ul li {
	width: 555px;
	background-color: #f5f5f5;
	-webkit-box-shadow: 0px 0px 7px rgb(0 0 0 / 20%);
	box-shadow: 0px 0px 7px rgb(0 0 0 / 20%);
	float: left;
	border-bottom: 5px solid #1b4182;
}

.top .about-works ul li:nth-of-type(2n) {
	margin: 15rem 0 0 5rem;
}

.top .about-works ul li img {
	width: 100%;
	height: auto;
}

.top .about-works ul li div.text {
	padding: 3rem;
}

.top .about-works ul li div.text h3 {
	font-size: 2rem;
	font-weight: 500;
	color: #1b4182;
/*	margin-bottom: 1.5rem;*/
	padding: .5rem;
	line-height: 1.5;
}
/*
.top .about-works ul li div.text h3 i {
	display: inline-block;
	padding: .5rem 1rem;
	margin: 0 1rem 2rem 0;
	background-color: #1b4182;
	color: #fff;
	font-family: 'Oswald', sans-serif;
}

.top .about-works ul li div.text p { line-height: 2; }*/

/*works-gallery*/

.top .works-gallery {
	position: relative;
	padding: 10rem 0;
}

.top .works-gallery::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: url(./images/bg-tile.jpg) repeat 0 0;
	width: 90%;
	/*height: 100vh;*/
	height: 800px;
}

/*recruit*/

.top .recruit {
	position: relative;
	padding: 20rem 0 10rem;
	background: url(./images/bg-tileGray.jpg);
}

.top .recruit::before {
	content: '';
	border-right: 200rem solid #fff;
	border-bottom: 20rem solid transparent;
	position: absolute;
	top: 0;
	right: 0;
}

.top .recruit h2 {
}

.top .recruit h2 i {
	font-family: serif;
	font-size: 4.5rem;
	font-weight: 500;
	letter-spacing: .1em;
	display: inline-block;
	color: #fff;
	padding: 2rem;
	background: url(./images/bg-tile.jpg) repeat 0 0;
	margin-bottom: 1rem;
}

.top .recruit .msg {
	font-size: 1.6rem;
	line-height: 2.5;
	padding: 2rem;
	margin-bottom: 2rem;
}

.top .recruit dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	font-size: 1.6rem;
}

.top .recruit dl dt {
	box-sizing: border-box;
	width: 20%;
	padding: 2rem;
	margin-bottom: 2px;
	background-color: #333;
	color: #fff;
	font-weight: 500;
	line-height: 2;
}

.top .recruit dl dd {
	box-sizing: border-box;
	width: 80%;
	padding: 2rem;
	margin-bottom: 2px;
	background-color: #fff;
	line-height: 2;
}

.top .recruit .btn-wrap {
	text-align: center;
	padding: 5rem 0;
}

.top .recruit .btn-wrap .btn-next {
	background-color: #781111;
	font-size: 2.5rem;
	height: 80px;
	line-height: 80px;
	color: #fff;
	padding: 0 7rem;
	letter-spacing: .1em;
}

.top .recruit .btn-wrap .btn-next i {
	width: 28px;
	height: 28px;
	background: url(./images/arrowFFFFFF.svg);
}


/* ---------------------------------
*    Page
*/

.page header {
	padding: 10rem 0;
	text-align: center;
}

.page header h1 {
	position: relative;
	font-family: 'Oswald', sans-serif;
	font-size: 4.5rem;
	color: #1b4182;
	font-weight: 500;
	letter-spacing: .05em;
	margin-bottom: 1rem;
}

.page header span {
	font-family: 'Noto Sans JP Subset', sans-serif;
	font-weight: 500;
	margin-top: 3rem;
	line-height: 1.5;
	color: #1b4182;
}

/*会社案内*/

.about-us .unit {
	width: 800px;
	margin: 0 auto 10rem;
}

.about-us h3 {
	font-size: 2rem;
	font-weight: 500;
	margin-bottom: 3rem;
	text-align: center;
}

.about-us table {
	width: 100%;
	margin-bottom: 5rem;
}

.about-us  table th,
.about-us table td {
	padding: 2rem;
	line-height: 2;
	font-size: 1.6rem;
	vertical-align: top;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
}

.about-us table th,
.about-us table td {
	background-color: #f5f5f5;
}

.about-us table td img {
	width: 17px;
	vertical-align: middle;
}

/*お問い合わせ*/

.contact .wpcf7 {
	width: 800px;
	margin: 0 auto;
}

.contact dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	font-size: 1.6rem;
	border-bottom: 1px solid #ccc;
}

.contact dl:first-of-type { border-top: 1px solid #ccc; }

.contact dl dt {
	box-sizing: border-box;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 2rem;
	font-weight: 500;
	line-height: 2;
}

.contact dl dt i {
	display: inline-block;
	margin-right: 2rem;
	font-size: 1.2rem;
	font-weight: 500;
	color: #fff;
	background-color: #d6272c;
	width: 50px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	letter-spacing: .5em;
	text-indent: 0.5em;
}

.contact dl dd {
	box-sizing: border-box;
	width: 50%;
	padding: 2rem;
	line-height: 2;
}

.contact dl dd input,
.contact dl dd textarea {
	box-sizing: border-box;
	border: 2px solid #292929;
	padding: 1rem;
	font-weight: 500;
}

.contact dl dd input,
.contact dl dd textarea {
	width: 350px;
}

.contact .btn-wrap {
	text-align: center;
	position: relative;
	margin: 5rem 0;
}

.contact .btn-wrap input {
	background-color: #781111;
	font-size: 2.5rem;
	height: 80px;
	line-height: 80px;
	color: #fff;
	padding: 0 10rem;
	letter-spacing: .1em;
	border-radius: 40px;
	font-weight: 500;
	display: inline-block;
	border: 0;
	text-indent: -1rem;
}

.contact .btn-wrap::after {
	content: '';
	position: absolute;
	width: 28px;
	height: 28px;
	background: url(./images/arrowFFFFFF.svg);
	top: 34%;
	right: 39%;
}

.contact .btn-wrap .wpcf7-spinner {
	display: none;
}

.contact dl dd .select {
	position: relative;
	display: inline-block;
}

.contact dl dd .select select {
	width: 350px;
	float: left;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 1rem 1rem 1rem 6rem;
	border: 2px solid #292929;
	border-radius: 0;
	position: relative;
	height: 50px;
	background-image: none;
	font-weight: 500;
	line-height: 1;
}

.contact dl dd .select:before {
	content: '';
	width: 5rem;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background-color: #292929;
}

.contact dl dd .select:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	border-right: 2px solid #fff;
	border-top: 2px solid #fff;
	transform: rotate(135deg);
	top: 50%;
	left: 20px;
	margin-top: -6px;
	pointer-events: none;
	z-index: 2;
}

/* ---------------------------------
*    Single
*/

#single {}

#single article {
	width: 80%;
	margin: 0 auto;
}

#single article header {
	padding: 1.5rem 0;
}

#single article header h1 {
	font-size: 3rem;
	line-height: 1.8;
	margin: 0 0 1rem;
	text-align: center;
	font-weight: 500;
}

#single article .the_time {
	font-family: 'Oswald', sans-serif;
	font-size: 2rem;
	font-weight: 500;
	padding: 1.5rem;
	text-align: center;
}

#single article .meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#single article .meta aside {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#single article .meta aside a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: #1b1b1b;
	border-radius: 50%;
	margin-left: 10px;
	text-align: center;
}

#single article .meta aside a img {
	width: 50%;
	height: auto;
}

#single article .meta aside a:hover { opacity: .6; }

#single article .content {
	margin: 5rem 0 0;
}

#single article .content h1,
#single article .content h2,
#single article .content h3,
#single article .content h4,
#single article .content h5,
#single article .content h6 {
}

#single article .content h3 {
	font-size: 1.3rem;
	margin-bottom: .5rem;
}

#single article .content a {
	text-decoration: underline;
}

#single article .content p {
	margin-bottom: 1,5rem;
	padding: initial;
	line-height: 2.5;
	word-break: break-all;
}

#single article .content strong { font-weight: 500; }

#single article .content figure {
	line-height: 1.8;
	margin-bottom: 2em;
}

#single article .content figure figcaption { text-align: center; }

#single article .content img {
	max-width: 100%;
	height: auto;
}

#single article .content .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#single article .content .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#nav-below {
	margin: 10rem 0;
}

#nav-below .previous { float: left; }
#nav-below .next { float: right; }

#nav-below .previous a,
#nav-below .next a {
	position: relative;
	line-height: 1;
	display: inline-block;
	padding: 2rem;
}

#nav-below .previous a { padding-left: 25px; }
#nav-below .next a { padding-right: 25px; }

#nav-below .previous a::after,
#nav-below .next a::after {
	position: absolute;
	top: 50%;
	width: 5px;
	height: 5px;
	content: '';
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -3px;
}

#nav-below .next a::after {
	right: 12px;
	border-top: 2px solid #1b1b1b;
	border-right: 2px solid #1b1b1b;
}

#nav-below .previous a::after {
	left: 12px;
	border-bottom: 2px solid #1b1b1b;
	border-left: 2px solid #1b1b1b;
}

.prev-list {
	text-align: center;
	font-size: 1.6rem;
	padding: 10rem 0;
	font-weight: 500;
}

.prev-list a {
	display: inline-block;
	position: relative;
	font-size: 1.6rem;
	font-weight: 500;
}

.prev-list a:hover { opacity: .6; }

.prev-list span {
	position: relative;
	display: inline-block;
	margin-right: 15px;
}

.prev-list span::before {
	content: '';
	width: 6px;
	height: 6px;
	border-bottom: 2px solid #1d1d1d;
	border-right: 2px solid #1d1d1d;
	position: absolute;
	left: 50%;
	bottom: 2px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}


/* ---------------------------------
*    Footer
*/

#footer dl {
	width: 500px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#footer dl dt {
	width: 90px;
	height: auto;
}

#footer dl dt img {
	width: 100%;
	height: auto;
}

#footer dl dd {
	width: 390px;
	line-height: 1.8;
}

#footer dl dd .name {
	font-size: 1.8rem;
	font-weight: 500;
}

#footer nav a {
	font-size: 1.5rem;
	display: inline-block;
	padding: .5rem;
	margin: 0 .5rem;
	color: #fff;
}

#footer nav a img {
	width: 17px;
}

#footer nav a:hover { text-decoration: underline; }

#page-top {
	display: none;
	position: fixed;
	right: 3%;
	z-index: 500;
}

#page-top a {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background-color: rgba(0, 0, 0, .6);
	text-indent: -999em;
	position: relative;
	display: block;
}

#page-top a::before {
	content: '';
	width: 10px;
	height: 10px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	position: absolute;
	right: 50%;
	top: 50%;
	margin: -2px -6px 0 0;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}



/* ---------------------------------
*    Media Query
*/

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

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

	html, body {
		min-width: initial;
	}

	#mainLogo {
		left: 50px;
	}

	#gdrawer {
		left: 150px;
		width: 500px;
	}


/* ---------------------------------
*    Top
*/

	.top section:not(:first-child) {
		width: 100%;
		min-width: auto;
		margin: 0 0 5rem;
	}
	.top section:last-of-type { margin-bottom: 0; }

	.top section .inner {
		width: 90%;
		margin: 0 auto;
	}

	.top section header {
	}

	.top section header h1 {
		font-size: 4rem;
	}

	.top .kv .blade {
		width: 800px;
		height: 800px;
		bottom: -400px;
	}

	.top .about-us { padding-bottom: 3rem }

	.top .about-us .photo {
		position: relative;
		width: 100%;
		max-width: 100%;
		top: 0;
	}

	.top .about-works { padding: 5rem 0 }

	.top .about-works ul li {
		width: 100%;
		margin: 0 0 3rem 0 !important;
	}

	.top .about-works ul li div.text {
		padding: 2rem;
	}

	.top .works-gallery { padding: 5rem 0 }

	.top .works-gallery::before {
		width: 100%;
		height: 100%;
	}


/* ---------------------------------
*    Page
*/

	.page header { padding: 7rem 0; }
	.page header h1 { font-size: 4rem; }
	.page header h2 { font-size: 1.5rem; }
	.page header h2 span { font-size: 1.2rem; }

	.post-list article a {
		display: block;
	}

	.post-list article time {
		width: auto;
		font-size: 1.8rem;
		padding-bottom: 0;
	}

	.post-list article .desc {
		width: auto;
	}

	.post-list article .desc h2 {
		font-size: 1.8rem;
	}

	#archives .wrap {
		width: 95%;
	}

	#archive .inner {
		width: 95%;
	}

	#archive .inner>dl {
		width: 90%;
		margin: 0 auto 8%;
	}

	#archive .inner>dl dt,
	#archive .inner>dl dd {
		width: 100%;
	}

	#archive .inner>dl dt { margin-bottom: 4%; }

	.prev-list {
		padding: 10% 0;
	}

}

@media only screen and (max-width: 1024px) {
}


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

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

html{
	height: -webkit-fill-available;
}
body{
	min-height: 100vh;
	min-height: -webkit-fill-available;
}

#wrap { margin-top: 65px; }

#footer .inner,
#header .inner {
	width: 92% !important;
	padding: 0 4%;
}

br.sp { display: block; }
br.pc { display: none; }

/*header*/

#header,
#header.mini {
	height: 65px;
}

#mainLogo {
	left: 15px;
	display: block;
}

#mainLogo a,
#header.mini #mainLogo a {
	width: 40px;
	height: 40px;
}

/*footer*/

#footer {
	display: block;
	padding: 2rem;
}

#footer dl {
	width: 100%;
	margin-bottom: 1.5rem;
}

#footer dl dt {
	width: 70px;
}

#footer dl dd {
	width: calc(100% - 90px);
}

#footer dl dd p {
	font-size: 1.3rem;
}

#footer nav {
	text-align: center;
	border-top: 1px solid #fff;
	padding-top: 1rem;
}

#footer nav .dl {
	background-color: rgba(0,0,0,.1);
	padding: 1rem 0;
	margin: 1rem 0;
}

#footer nav a {
	padding: .5rem;
	font-size: 1.3rem;
}

#page-top a {
	width: 45px;
	height: 45px;
}

/* ---------------------------------
*    Top
*/

.top section header {
	padding: 2rem 0;
	margin-bottom: 2.5rem;
}

.top section header h1 {
	font-size: 3rem;
	letter-spacing: 0;
}


.top .kv .catch {
	bottom: 50%;
	left: 15px;
}

.top .kv .catch i {
	display: inline-block;
	padding: .8rem;
	background: url(./images/bg-tile.jpg) repeat 0 0;
	white-space: nowrap;
}

.top .kv .catch .en {
	font-size: 2.8rem;
}

.top .kv .catch .jp {
	font-size: 1.5rem;
}

.top .kv .blade {
	width: 400px;
	height: 400px;
	bottom: -200px;
}

.top .about-works ul li div.text h3 { font-size: 1.8rem; }

.top .recruit {
	padding: 5rem 0;
}

.top .recruit::before {
	border-right-width: 50rem;
	border-bottom-width: 7rem;
}

.top .recruit h2 i {
	font-size: 2rem;
}

.top .recruit .msg {
	padding: 0;
}

.top .recruit dl {
	display: block;
}

.top .recruit dl dt,
.top .recruit dl dd {
	width: 100%;
	padding: 1rem;
	margin-bottom: 0;
	font-size: 1.5rem;
}

.top .recruit .btn-wrap .btn-next {
	font-size: 2rem;
}

.top .recruit .btn-wrap .btn-next i {
	width: 24px;
	height: 24px;
}

/* ---------------------------------
*    Page
*/

.page header {
	padding: 5rem 0;
}

.page header h1 {
	font-size: 3rem;
	white-space: nowrap;
	letter-spacing: 0;
}

.page header h2 { margin-top: 2rem; }

.post-list .wrap {
	width: 90%;
	margin-bottom: 10rem;
}

.post-list article time { font-size: 1.4rem; }
.post-list article .desc h2 { font-size: 1.5rem; }

.post-list article:hover::before { transition: none; }

.post-list .wp-pagenavi .page, .post-list .wp-pagenavi .current {
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
}

.post-list .wp-pagenavi .nextpostslink::after, .post-list .wp-pagenavi .previouspostslink:after {
	width: 10px;
	height: 10px;
	margin-bottom: 13px;
}

/*会社案内*/

.about-us .unit {
	width: 96%;
	margin: 0 auto 5rem;
}

.about-us h3 { font-size: 1.8rem; }

.about-us table th, .about-us table td {
	padding: 1rem;
	font-size: 1.4rem;
}
.about-us table th { white-space: nowrap; }

/*お問い合わせ*/

.contact .wpcf7 { width: 100%; }
.contact dl {
	display: block;
}

.contact dl dt,
.contact dl dd {
	padding: 1rem 2rem;
	width: 100%;
	box-sizing: border-box;
}
.contact dl dt { padding-bottom: 0; }

.contact dl dd input,
.contact dl dd textarea,
.contact dl dd .select,
.contact dl dd .select select {
	width: 100%;
}

.contact .btn-wrap input {
	font-size: 2rem;
}

.contact .btn-wrap::after {
	width: 24px;
	height: 24px;
	right: 31%;
	top: 36%;
}

/* ---------------------------------
*    Single
*/

#single article {
	width: 92%;
	padding: 8% 4%;
}

#single article header h1 {
	font-size: 2.2rem;
}

#single article .the_time {
	font-size: 1.5rem;
	padding: 1rem;
}

#single article .meta aside a {
	width: 40px;
	height: 40px;
	line-height: 40px;
}

#nav-below { margin: 3rem 0 0; }
#nav-below .previous { margin-bottom: 1rem; }

#nav-below .previous a, #nav-below .next a { font-size: 1.4rem; }

/*drawer*/

#gdrawer {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
}

#gdrawer-btn {
	cursor: pointer;
	height: 50px;
	width: 50px;
	position: absolute;
	top: 5px;
	right: 15px;
	z-index: 101;
}

#gdrawer-btn span {
	background: #fff;
	display: block;
	height: 3px;
	left: 50%;
	margin: 0 0 0 -13px;
	position: absolute;
	top: 50%;
	width: 26px;
	border-radius: 2px;

	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

#gdrawer-btn span::before,
#gdrawer-btn span::after {
	background: #fff;
	content: '';
	display: block;
	height: 100%;
	left: 50%;
	margin: 0 0 0 -50%;
	position: absolute;
	width: 100%;
	border-radius: 2px;

	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

#gdrawer-btn span::before { margin-top: -9px; }
#gdrawer-btn span::after { margin-top: 9px; }

.gdrawer-show #gdrawer-btn span::after { display: none; }

.gdrawer-show #gdrawer-btn span {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.gdrawer-show #gdrawer-btn span::before {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	margin-top: 0 !important;
}

	#gdrawer {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: rgba(0,0,0,.9);
		opacity: 0;
		pointer-events: none;

		-webkit-transition: all 0.3s;
		transition: all 0.3s;

		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}

	.gdrawer-show #gdrawer {
		visibility: visible;
		opacity: 1;
	}

	#gdrawer-bg {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
	}

	#gdrawer #gdrawer-content {
	    height: 100%;
	    width: 100%;
	}

	#gdrawer .gdrawer-body {
		height: 100%;
		/*overflow-y: scroll;*/
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
	}

	.gdrawer-show #gdrawer .gdrawer-body { visibility: visible; }

#gdrawer nav {
	width: 100%;
	height: 100%;
	background-color: transparent;
	pointer-events: auto;

	display: flex;
	align-items: center;
	justify-content: center;
}

#gdrawer nav::before, #gdrawer nav::after { display: none; }

#gdrawer nav>div { width: 100%; }

#gdrawer nav>div>ul {
	display: block;
}

#gdrawer nav>div>ul>li {
	display: block;
	text-align: center;
}

#gdrawer nav>div>ul>li>a {
	padding: 2rem 0;
	display: inline-block;
	height: auto;
	line-height: 1;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: .05em;
	opacity: 0;
}


.gdrawer-show #gdrawer nav>div>ul>li:nth-of-type(1)>a {
  animation: gdrawerNavAnimation .5s ease-in-out 0s forwards;
}

.gdrawer-show #gdrawer nav>div>ul>li:nth-of-type(2)>a {
  animation: gdrawerNavAnimation .5s ease-in-out .15s forwards
}

.gdrawer-show #gdrawer nav>div>ul>li:nth-of-type(3)>a {
  animation: gdrawerNavAnimation .5s ease-in-out .3s forwards
}

.gdrawer-show #gdrawer nav>div>ul>li:nth-of-type(4)>a {
  animation: gdrawerNavAnimation .5s ease-in-out .45s forwards
}

.gdrawer-show #gdrawer nav>div>ul>li:nth-of-type(5)>a {
  animation: gdrawerNavAnimation .5s ease-in-out .6s forwards
}

.gdrawer-show #gdrawer nav>div>ul>li:nth-of-type(6) {
  animation: gdrawerNavAnimation .5s ease-in-out .75s forwards
}


@keyframes gdrawerNavAnimation {
  0% {
    opacity: 0;
    transform: translate(-30px)
  }
  100% {
    opacity: 1;
    transform: translate(0, 0)
  }
}

#gdrawer nav>div>ul>li>a:hover { opacity: .6; }

}

@media( max-width:320px ){ }

/* Retina Display ----------- */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
}

@media print {
  .whats-on img,
  .no-print {
    display: none;
  }
}