@charset "UTF-8";
/* CSS Document */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　◆ Stracture
　◆ margin padding
- - - - - - - - - - - - - - - - - - - - - - - - - - - */



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　Stracture
- - - - - - - - - - - - - - - - - - - - - - - - - - - */
*{
	max-width: 100%;
}

.animated{
	opacity: 0
}

body{
	margin:0;
	text-align: justify;
	font-family: 'Noto Serif JP', sans-serif;
	color: #222
}

#wrap{
	overflow: hidden
}

img{
	vertical-align:bottom;
	border:none
}

h1,h2,h3,h4,dl,dt,dd{
	margin:0;
	padding:0;
	font-weight: normal
}

ul,li{
	list-style:none;
	padding:0;
	margin:0
}

section{
}

header{
	background: url("../images/bg_header.jpg");
	background-size: cover;
	background-position: center;
	height: 110vh;
	display: flex;
    align-items: center;
    justify-content: center;
	animation-name: headBG;
	animation-duration: 1.2s
}

@keyframes headBG{
	0%{ transform: scale(1.1,1.1)}
	100%{ transform: scale(1,1)}
}

h1 {
    margin: -100px auto 0;
    animation-name: logoFlip;
    animation-delay: 0.5s;
    animation-fill-mode: both;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    background: rgba(255,255,255,0.92);
    width: 100%;
    text-align: center;
    padding: 0.8em 0;
}

@keyframes logoFlip{
	0%{
		transform: rotateX(300deg);
		opacity: 0
	}
	100%{ 
		transform: rotateX(360deg);
		opacity: 1
	}
}

p{
	margin:0;
	padding:0
}

section{
}

#about,#company{
	background: #FFF;
	position: relative;
	z-index: 100
}

#about h2{
	text-align: center;
	font-size: 60px;
	letter-spacing: 0.15em;
	background: linear-gradient(transparent 85%, #e6eeb0 30%);
	width: 530px;
	margin: 0 auto 50px;
	line-height: 80px;
	padding-left: 0.15em;
}

#about p{
	width: 910px;
	margin: 0 auto;
	letter-spacing: 0.15em;
	line-height: 40px;
	font-size: 18px
}

#about:before,#company:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 240px;
	margin: -60px -10% 0;
	background: #FFF;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
	z-index: -1;
}


#about:after,#company:after{
	content: '';
	position: absolute;
	bootom: 0;
	left: 0;
	width: 120%;
	height: 240px;
	margin: -60px -10% 0;
	background: #FFF;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
	z-index: -1;
}

#services{
	clear: both;
	padding: 240px 0;
	background: url("../images/bg_service.jpg");
	color: #FFF;
	background-size: cover;
	background-position: center；
}

#services h2,#company h2,#contact h2{
	font-size: 40px;
	text-align: center;
	letter-spacing: 0.3em
}

#services h2{
	margin-bottom: 70px
}

#services ul{
	width: 880px;
	margin: 0 auto;
	overflow: hidden
}


#services li{
	float: left;
	width: 405px;
	margin-bottom: 50px
}

#services li p{
	font-size: 15px;
	letter-spacing: 0.3em;
	line-height: 28px;
	margin-top: 26px
}

#services li:nth-child(2n){
	float: right;
}

#services li h3{
	font-size: 24px;
	text-align: center;
	letter-spacing: 0.3em;
	margin-bottom: 30px;
}

#company h2{
	margin-bottom: 70px
}

#company dl{
	margin: 0 auto;
	display: block;
	width: 900px;
	overflow: hidden;
	font-size: 14px;
	letter-spacing: 0.1em
}


#company dt,#company dd{
	float: left;
	margin: 2px;
	padding: 11px 20px;
	box-sizing: border-box
}

#company dt{
	background: #e6e6e6;
	width: 142px;
}

#company dd{
	background: #f3f3f3;
	width: 300px;
}

#map{
	margin: 66px auto 0;
	width: 900px
}

#contact{
	clear: both;
	padding: 240px 0;
	background: url("../images/bg_contact.jpg");
	color: #FFF;
	background-size: cover;
	background-position: center
}

#contact h2{
	margin-bottom: 70px
}


#contact div{
	width: 620px;
	margin: 0 auto
}

#contact dd{
	margin: 10px 0 0
}

#contact dt{
	margin: 18px 0 0
}

#contact input{
	width: 100%;
	font-size: 14px;
	padding: 10px;
	box-sizing: border-box;
	background: #FFF;
}

#contact textarea{
	width: 100%;
	font-size: 14px;
	padding: 10px;
	box-sizing: border-box;
	background: #FFF;
}

#contact input[type="submit"] {
  -webkit-appearance: none;
	width: 100%;
	background:transparent;
	margin-top: 26px;
	color: #FFF;
	font-family: 'Noto Serif JP', sans-serif;
	cursor:pointer;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
	border: #FFF 1px solid;
}

#contact input[type="submit"]:hover{
	background: rgba(255,255,255,0.2);
}

.error{
	margin-top: 5px;
	color: #ffa0a0 !important
}

.mw_wp_form_preview dd{
	background: rgba(255,255,255,0.2);
	min-height: 44px;
	padding: 10px;
	box-sizing: border-box
}

footer{
	text-align: center;
	background: #FFF;
	position: relative;
	z-index: 100
}


#footMenu li{
	float: left;
}

#footMenu li a{
	background: #e6e6e6;
	display: block;
	width: 150px;
	margin: 0 6px;
	padding: 8px 0;
	font-size: 13px;
	letter-spacing: 0.15em;
	text-decoration: none;
	color: #222;
	transition: background 0.5s linear;
}

#footMenu li a:hover{
	background-color: #FFF;
}

.hamburger-nav-toggle-btn {
	color: #eff0e2;
}

.hamburger-nav {
	position: fixed;
	z-index: 1000;
	right: 30px;
	top: 30px
}
.hamburger-nav-toggle-btn.close::before, .hamburger-nav-toggle-btn.open::before {
    font-family: 'Font Awesome 5 Free';
	font-weight:900;
	padding:5px 8px;
	font-size: 28px;
	width: 40px;
	height: 38px;
	box-sizing: border-box;
		background:rgba(0,0,0,0.2);
	float: right;
	border-radius: 3px;
	cursor: pointer;
}
.hamburger-nav-toggle-btn.close::before {
    content: url(../images/bars_24.svg)
}
.hamburger-nav-toggle-btn.open::before {
    content: url(../images/cross_24.svg);
	font-size: 18px;
	text-align: center;
}

.hamburger-nav-list {
	display: none;
	list-style: none;
	margin:0;
	padding:0;
	clear: both
}
.hamburger-nav-list > li {
	margin-top: 1px;
	background:rgba(0,0,0,0.2);
	width: 230px;
	letter-spacing: 0.14em;
	font-size: 14px
}
.hamburger-nav-list > li a {
	display: block;
	padding: 10px 1em;
	text-decoration: none;
	color: #fff;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}
.hamburger-nav-list > li a:hover{
	background:rgba(0,0,0,0.6);
}


@keyframes btnFade{
    0% {
        background: #FFF;
    }
    100% {
        background: #eff0e2;
    }
}

#footMenu{
	display: block;
	overflow: hidden;
	margin: 0 auto 80px;
	width: 820px
}

footer p{
	padding: 20px 0 65px;
	letter-spacing: 0.15em
}

footer:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 240px;
	margin: -30px -10% 0;
	background: #FFF;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
	z-index: -1;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　margin padding
- - - - - - - - - - - - - - - - - - - - - - - - - - - */
.mgt00{margin-top:0!important}
.mgt03{margin-top:3px!important}
.mgt05{margin-top:5px!important}
.mgt07{margin-top:7px!important}
.mgt10{margin-top:10px!important}
.mgt15{margin-top:15px!important}
.mgt20{margin-top:20px!important}
.mgt25{margin-top:25px!important}
.mgt30{margin-top:30px!important}
.mgt55{margin-top:55px!important}

.pdt00{padding-top:0!important}
.pdt03{padding-top:3px!important}
.pdt05{padding-top:5px!important}
.pdt07{padding-top:7px!important}
.pdt10{padding-top:10px!important}
.pdt15{padding-top:15px!important}
.pdt20{padding-top:20px!important}
.pdt25{padding-top:25px!important}
.pdt30{padding-top:30px!important}
.pdt55{padding-top:55px!important}

.mgb00{margin-bottom:0!important}
.mgb03{margin-bottom:3px!important}
.mgb05{margin-bottom:5px!important}
.mgb07{margin-bottom:7px!important}
.mgb10{margin-bottom:10px!important}
.mgb15{margin-bottom:15px!important}
.mgb20{margin-bottom:20px!important}
.mgb25{margin-bottom:25px!important}
.mgb30{margin-bottom:30px!important}
.mgb55{margin-bottom:55px!important}

.tac{text-align: center}
.tar{text-align: right}


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

	section{
		padding-left: 7%!important;
		padding-right: 7%!important;
		box-sizing: border-box
	}
	
	
	#about p{
		line-height: 32px;
		font-size: 16px
	}

	#about:after,#company:after{
		height: 240px;
		margin: -120px -10% 0;
	}	
	
	#services{
		padding: 180px 0;
	}

	#services li{
		float: none;
		margin: 0 auto
	}

	#services li p{
		font-size: 15px;
		letter-spacing: 0.3em;
		line-height: 28px;
		margin-top: 26px
	}

	#services li:not(:first-child){
		float: none;
		margin: 50px auto 0
	}	
	
	#company:before {
		margin: -40px -10% 0;
	}
	
	#company h2 {
		margin-bottom: 42px;
	}
	
	#company dt,#company dd{
		float: left;
		margin:2px 0 ;
	}

	#company dt{
		width: 30%;
	}

	#company dd{
		width: 70%;
	}
	
	#map {
		margin: 30px auto 0;
	}

	footer:before{
		height: 160px;
		margin: -60px -10% 0;
	}
	
	#footMenu {
		width: 90%;
	}

	#footMenu li {
		float: none;
	}
	
	#footMenu li a {
		background: #eff0e2;
		display: block;
		width: 100%;
		margin: 2px 0;
		padding: 15px 0;
		font-size: 13px;
		letter-spacing: 0.15em;
		text-decoration: none;
		color: #222;
		transition: background 0.5s linear;
	}
}

@media screen and (max-width: 650px){
	header{
		height: 94vh;
		background-position: left -15vw top;
	}
	
	h1 img{
		width: 33vw
	}
	
	#about h2{
		text-align: center;
		font-size: 9vw;
		letter-spacing: 0.15em;
		background: linear-gradient(transparent 78%, #e6eeb0 30%);
		width: 100%;
		margin: 0 auto 50px;
		line-height: 13vw
	}
	
	#about p{
		line-height: 32px;
		font-size: 15px
	}	
	
	#about:after,#company:after{
		height: 240px;
		margin: -150px -10% 0;
	}	
	
	#services,#contact{
		padding: 140px 0;
	}
	
	#services li p{
		font-size: 14px;
		line-height: 24px;
	}
	
	#services h2 {
    	margin-bottom: 50px;
	}
	
	#services li h3 {
		font-size: 22px
	}
	
	#contact h2 {
    	margin-bottom: 50px;
	}
}


@media screen and (max-width: 500px){
	#company dt,#company dd{
		float: none;
		margin:0 ;
		text-align: center
	}

	#company dt{
		width: 100%;
	}

	#company dd{
		width: 100%;
		margin-bottom: 6px
	}
	
	#services li h3 {
		font-size: 17px
	}
	.hamburger-nav {
	position: fixed;
		width: calc(100% - 8px);
	z-index: 1000;
	right: 4px;
	top: 4px;
	}
	.hamburger-nav-list > li {
		margin-top: 1px;
		background:#222;
		display: block;
		width: 100%;
	}
	.hamburger-nav-list > li a {
		display: block;
		width: 100%;
		box-sizing: border-box;
		display: block;
		padding: 20px 1em;
		text-decoration: none;
		color: #fff;
		-webkit-transition: 0.8s;
		-moz-transition: 0.8s;
		-o-transition: 0.8s;
		-ms-transition: 0.8s;
		transition: 0.8s;
		text-align: center
	}
}