@charset "utf-8";
body {
	font-family: "Noto Sans Japanese", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 18px;
	line-height: 2;
	background: url(../img/bg-tyre.png) #f5f5f5 repeat-y center 30% fixed;
	background-size: cover;
}
main {
	display: block;
}
section {
	position: relative;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.5;
}
p {
	color: rgba(0, 0, 0, 0.78);
}
p.white-p {
	color: rgba(255.255.255, .7);
}
a {
	color: inherit;
}
a:hover {
	color: inherit;
}
a:visited {
	color: inherit;
}
a:active {
	color: inherit;
}
img {
	height: auto;
}
i {
	vertical-align: middle;
	line-height: 1;
}
.left {
	float: left;
}
.right {
	float: right;
}
.center {
	text-align: center;
}
.caution {
	color: #D50000;
}
/*----- ANIMATION -----*/
html.loaded, body.loaded {
	overflow: auto !important;
	overflow-x: hidden !important;
}
body #container {
	opacity: 0;
	transition: all 1.5s .3s;
	background: #FFF;
}
body.loaded #container {
	opacity: 1;
	background: url(../img/bg-tyre.png) #f5f5f5 repeat-y center 30% fixed;
}
.color1 {
	background: #8EE4E5 !important;
}
.color2 {
	background: #ABD26C !important;
}
.color3 {
	background: #FF4E6E !important;
}
.color4 {
	background: #F3D269 !important;
}
#loading {
	width: 3000px;
	height: 3000px;
	width: 200vmax;
	height: 200vmax;
	border-radius: 9999px;
	background: #FFF;
	position: fixed;
	z-index: 20;
	overflow: hidden;
	transition: all .5s;
	transform-origin: left top;
	transform: scale(1) translate(-50%, -50%);
	left: 50%;
	top: 50%;
}
body.loaded #loading {
	transform: scale(0) translate(-50%, -50%);
}
#loading #figure-wrapper {
	width: 600px;
	height: 300px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform-origin: top left;
	transform: scale(.5);
	z-index: 1;
	animation-delay: .3s;
	animation-duration: .3s;
	animation-fill-mode: both;
	animation-name: loading-popUp;
}
body.loaded #loading #figure-wrapper{
	transition-delay: 0 !important;
	opacity: 0;
	transform: scale(0);
	z-index: -10;
	position: absolute;
}
@keyframes loading-popUp {
 0% {
 opacity: 0;
 transform: scale(.5) translate(-50%, -50%);
}
 100% {
 opacity: 1;
 transform: scale(1) translate(-50%, -50%);
}
}
#loading figure {
	width: inherit;
	height: inherit;
	background: url(../../img/top/bg-loading.png) no-repeat center center;
}
/*----- STANDARD -----*/

.section-spacing {
	padding-top: 100px;
	padding-bottom: 100px;
}
.standard-h2 {
	background-position: center center;
	background-size: cover;
	color: #FFF;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 2px;
	display: inline-block;
	padding: 40px 100px;
	border-radius: 8px;
	box-sizing: border-box;
	z-index: 1;
	position: absolute;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.standard-h2:after {
	content: '';
	display: block;
	visibility: visible;
	width: 0;
	height: 0;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 16px solid #1B2C6C;
	position: absolute;
	left: 5%;
	bottom: -16px;
}
.standard-btn {
	border: 1px solid #1B2C6C;
	color: #1B2C6C !important;
	display: inline-block;
	position: relative;
	text-align: center;
	border-radius: 4px;
	width: 260px;
	height: 50px;
	line-height: 50px;
	margin-top: 32px;
}
.standard-btn i {
	position: absolute;
	right: 16px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all .5s;
	transition: all .5s;
}
.standard-btn:hover i {
	right: 10px;
}
.standard-btn i img {
	width: 16px;
}
/*------HEADER------*/
#main-header {
	width: 100%;
	padding: 32px 2%;
	box-sizing: border-box;
	background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=0 );
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
#main-header h1 {
	width: 150px;
	margin: 0 auto;
}
main .text {
	max-width: 768px;
	width: 100%;
	display: inline-block;
	background: rgba(255,255,255,.95);
	padding: 32px;
	box-sizing: border-box;
	box-shadow: 0 6px 26px rgba(0,0,0,.07);
	z-index: 1;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
main .text p {
	letter-spacing: 2px;
}
/*----- MAIN  -----*/
#main-visual {
	width: 100%;
	height: 90vmin;
	text-align: center;
	background: url(../img/img-mainvisual.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	margin-bottom: 50px;
}
#main-visual h2 {
	width: 100%;
	padding: 0 2%;
	max-width: 700px;
	position: absolute;
	left: 50%;
	top: 50%;
	-webki-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1;
	box-sizing: border-box;
}
#standard h2 {
	background-image: url(../img/bg-pattern1.png);
	left: 5%;
}
#standard .gallery, section figure {
	max-width: 1366px;
	position: relative;
	width: 90%;
}
#standard .gallery li {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
#standard .text {
	right: 5%;
}
#skillup h2 {
	background-image: url(../img/bg-pattern2.png);
	right: 5%;
}
#skillup figure {
	float: right;
}
#skillup .text {
	left: 5%;
}
#rental h2 {
	background-image: url(../img/bg-pattern3.png);
	left: 5%;
}
#rental .text {
	right: 5%;
}
#rental {
	padding-bottom: 32px;
}
/*----- FOOTER -----*/

#main-footer {
	position: relative;
	padding: 32px 2% 8px;
	font-size: 11px;
	text-align: center;
	background: #1b2c6c;
	color: #FFF;
}
#main-footer img {
}
#main-footer p {
	color: #FFF;
	margin: 8px 0;
}

@media only screen and (max-width: 1366px) {
body {
	font-size: 16px;
}
.section-spacing {
	padding-top: 50px;
	padding-bottom: 100px;
}
.standard-h2 {
	font-size: 26px;
}
main .text {
	max-width: 600px;
	position: relative;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	float: right;
	width: 85%;
	padding: 4%;
	margin: -7% 2% 0;
	-webkit-transform: none;
	transform: none;
}
#standard .text, #rental .text, #skillup h2 {
	right: 2%;
}
#skillup .text, #standard h2, #rental h2 {
	left: 2%
}
}

@media only screen and (max-width: 1024px) {
body {
	font-size: 14px;
}
#main-header {
	padding: 8px 2%;
}
#main-header h1 {
	width: 100px;
}
.section-spacing {
	padding-top: 32px;
	padding-bottom: 80px;
}
.standard-h2 {
	padding: 32px 40px;
	min-width: 300px;
	font-size: 20px;
}
.standard-btn {
	margin: 16px auto 0;
	display: block;
}
main .text p {
	letter-spacing: 1px;
}
#main-visual {
	height: 65vmin;
}
#standard .gallery, section figure {
	width: 85%;
}
#skillup .text {
	float: left;
}
#main-visual h2 {
	width: 80%;
}
#loading figure {
	background-size: 300px auto;
}
}

@media only screen and (max-width: 600px) {
body {
	font-size: 12px;
	line-height: 1.8;
}
.standard-h2 {
	padding: 24px 32px;
	font-size: 18px;
}
.standard-h2:after {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #1B2C6C;
	position: absolute;
	left: 16px;
	bottom: -10px;
}
main .text br {
	display: none;
}
}