@charset "UTF-8";


html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,a,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;		/* 見出しのフォントサイズを揃える */
	font-weight:normal;	/* 見出しのフォントの太さを揃える */
	vertical-align:baseline;
	box-sizing:border-box	/* paddingとborderの幅を要素の幅と高さに含める */
}

body{
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	background-color: #000;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: #fff;
}

ul,ol{list-style:none}
	
img {
	max-width: 100%;	/* 大きい画像でも、自動的に親要素で指定したサイズに調整される */
	vertical-align: bottom;	/* 画像の下に出来る隙間を消す */
}

.clearfix:after {
	content: ""; 
	display: block; 
	clear: both;
}

h2{
	margin-bottom: 80px;
	text-align: center;
}

.box-inner{
	max-width: 900px;
	margin: 0 auto;
	padding: 140px 0;
}



/*================================================

* main

================================================*/

.main{
	position: relative;
	height: 100vh;
	background: url(../images/main.jpg)center center no-repeat fixed;
	background-size: cover;
}

.sp-path{display:none;}

path{    
    stroke: #fff;
    fill: transparent;
    stroke-width:1;    
    stroke-dasharray: 3000;
    stroke-dashoffset:3000;
    -moz-animation:DASH 3s ease-in-out 1s forwards;
    -webkit-animation:DASH 3s ease-in-out 1s forwards;
    -o-animation:DASH 3s ease-in-out 1s forwards;
    animation:DASH 3s ease-in-out 1s forwards;
    -webkit-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;    
}

@keyframes DASH{
    0%  {stroke-dashoffset:3000;fill: transparent;}
    80% {stroke-dashoffset:2000;fill: transparent;}
    90% {stroke-dashoffset:2000;fill: transparent; stroke-width:1;}   
    100%{stroke-dashoffset:0;fill: #fff; stroke-width:0;}
}

@-moz-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill: transparent;}
    80% {stroke-dashoffset:2000;fill: transparent;}
    90% {stroke-dashoffset:2000;fill: transparent; stroke-width:1;}   
    100%{stroke-dashoffset:0;fill: #fff; stroke-width:0;}
}

@-webkit-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill: transparent;}
    80% {stroke-dashoffset:2000;fill: transparent;}
    90% {stroke-dashoffset:2000;fill: transparent; stroke-width:1;}   
    100%{stroke-dashoffset:0;fill: #fff; stroke-width:0;}
}

@-o-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill: transparent;}
    80% {stroke-dashoffset:2000;fill: transparent;}
    90% {stroke-dashoffset:2000;fill: transparent; stroke-width:1;}   
    100%{stroke-dashoffset:0;fill: #fff; stroke-width:0;}
}

@-ms-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill: transparent;}
    80% {stroke-dashoffset:2000;fill: transparent;}
    90% {stroke-dashoffset:2000;fill: transparent; stroke-width:1;}   
    100%{stroke-dashoffset:0;fill: #fff; stroke-width:0;}
}

.main-text{
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -120px;
	text-align: center;
}

.proverb{margin: 50px 0 70px;}

.start {
	position: relative;
	display: inline-block;
	padding: .9em 3.6em;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
	text-decoration: none;
	letter-spacing: 1px;
	outline: none;
	transition: all .3s;
}

.start::before,
.start::after {
	position: absolute;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
	z-index: 2;
	content: '';
	transition: all .3s;
}

.start::before {
	border-top: 1px solid #4a779f;
	border-bottom: 1px solid #4a779f;
	transform: scale(0, 1);
}

.start::after {
	border-right: 1px solid #4a779f;
	border-left: 1px solid #4a779f;
	transform: scale(1, 0);
}

.start:hover {color: #4a779f;}

.start:hover::after,
.start:hover::before {transform: scale(1);}


.pc-mark{
	 position: absolute;
	 top: 50%;
	 width: 100%;
	 margin-top: -215px;
	 margin-left: -10px;
	 text-align: center;
	 opacity:0.1;
}

.sp-mark{
display: none;
}




/*================================================

* header

================================================*/

#header {
	width: 100%;
	height: 80px;
	background: #000;
	opacity: 0.8;
}

.logo{
	float:left;
	margin-left: 10px;	
}

nav{
	float:right;
	font-size: 0;
}

.menu li{
	display: inline-block;
	width: 150px;
	text-align: center;
}

.menu li a {
	position: relative;
	display: inline-block;
	font-size: 16px;
	line-height: 80px;
	transition: .3s;
}

.on a{color:#4a779f;}

.sp,
.menuButton,
.menu-title{ display: none;}



/*================================================

* philosophy

================================================*/

#box-1{
	background: url(../images/onestep.jpg);
	background-position: 50% 0;
	background-size: cover;
}

.description{
	font-size: 18px;
	line-height: 2;
	text-align: center;
}


/*================================================

* services

================================================*/

#box-2{
	background: url(../images/black.jpg);
	background-position: 50% 0;
	background-size: cover;
}

#box-2 p{
	font-size: 13px;
	line-height: 1.7;
}


h3{
	margin: 40px 0 20px;
	font-size: 18px;
	font-weight: 700;
	color: #4a779f
}

.serv{
	width: 100%;
	font-size: 0;
}

.serv li{
	display: inline-block;
	width: 33.3333%;
	text-align: center;
	
}

.ch-img-1{
	display: inline-block;
	width: 220px;
	height: 220px;
	background-image: url(../images/s-1.jpg);
	border-radius: 50%;
	box-shadow: inset 0 0 0 12px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.ch-img-2{
	display: inline-block;
	width: 220px;
	height: 220px;
	background-image: url(../images/s-2.jpg);
	border-radius: 50%;
	box-shadow: inset 0 0 0 12px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.ch-img-3{
	display: inline-block;
	width: 220px;
	height: 220px;
	background-image: url(../images/s-3.jpg);
	border-radius: 50%;
	box-shadow: inset 0 0 0 12px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.ch-img-1:hover,
.ch-img-2:hover,
.ch-img-3:hover{
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	filter: grayscale(0%);
}




/*================================================

* company

================================================*/

#box-3{
	background: url(../images/company.jpg) ;
	background-position: 50% 0;
	background-size: cover;
}

table{
	max-width: 900px;
	margin: 0 auto;
	border-collapse: collapse;
}

tr{border-bottom: 1px solid rgba(255,255,255,0.1);}

th{
	width: 200px;
	padding:25px 0;
	font-weight: 700;
	text-align: left;
}

td{
	width: 700px;
	padding:25px 0;	
	text-align: left;
}



/*================================================

* town

================================================*/

.town{
	height: 500px;
	background: url(../images/town.jpg) no-repeat center center fixed;
	background-size: cover;
}



/*================================================

* contact

================================================*/

#box-4{
	background-image: url(../images/black.jpg);
	background-position: 50% 0;
	background-size: cover;
}

.contactleft{
	float: left;
	width: 40%;
}

.contactright{
	float: right;
	width: 50%;
}

.formtext{
	width: 100%;
	font-size: 13px;
	line-height: 3.5;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1px;
	background: none;
	border: none;
}

.formtext:focus::-webkit-input-placeholder{
	-moz-transition: all 0.3s linear 0s;
	-webkit-transition: all 0.3s linear 0s;
	 transition: all 0.3s linear 0s;
	 letter-spacing: 25px;
	 opacity: 0;
}
.formtext:focus:-ms-input-placeholder{
	-moz-transition: all 0.3s linear 0s;
	-webkit-transition: all 0.3s linear 0s;
	 transition: all 0.3s linear 0s;
	 letter-spacing: 25px;
	 opacity: 0;
}
.formtext:focus::-moz-placeholder{
		-moz-transition: all 0.3s linear 0s;
	-webkit-transition: all 0.3s linear 0s;
	 transition: all 0.3s linear 0s;
	 letter-spacing: 25px;
	 opacity: 0;
}

.formtext:focus,
.formtext.active{outline: none;}

.contactleft .bar{
	padding-bottom:15px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.contactright .bar{
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.submit {
	height: 60px;
	line-height: 40px;
	font-size:14px;
	display: inline-block;
	text-align: left;
	border: 0;
	font-weight: 700;
	letter-spacing: 1px;
	outline: none;
	color: #fff;
	background-color: transparent;
}

input:valid,
textarea:valid{
    color: #4a779f;
}

input:invalid{
    color: #ff0000;
}


/*================================================

* footer

================================================*/

#footer {
	height: 80px;
	padding-top: 40px;
	font-size: 12px;
	text-align: center;
	background-image: url(../images/footer.jpg);
	background-position: 50% 0;
	background-size: cover;   
}




/*================================================

* @media screen

================================================*/

/*　ipad proより大きい端末用　*/

@media screen and (min-width: 1025px) {

.logo:hover img {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);

}

.logo img, .logo:hover img {
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}

.menu li a::after {
	position: absolute;
	bottom: 20px;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background-color: #4a779f;
	transition: .3s;
}

.menu li a:hover::after {width: 100%;}

}






/*　fix効かない端末用の画像　*/

@media screen and (max-width: 1024px) {
	
.main{
	background: url(../images/main.jpg)center center no-repeat;
	background-size: cover;
}

.town{
	height: 400px;
	background: url(../images/town.jpg) no-repeat center center;
	background-size: cover;
}

}










/*　ipad proよりも小さい端末用　*/

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

h2{
	max-width: 90%;
	margin: 0 auto 80px;
	
}
.description {
	max-width: 85%;
	margin: 0 auto;
	line-height: 2;
	text-align: left;
}

h3 {margin: 25px 0 15px;}

.serv li{
	display: block;
	width: 100%;
	margin-top: 70px;
}

table {max-width: 85%;}

th,td{
	font-size: 12px;
	line-height: 1.5;
}

th{padding-right: 25px;}

.contactleft,
.contactright{
	float: none;
	width:80%;
	margin: 0 auto;
}

.button{
	margin-top: 20px;
	text-align: center;
}

.description {font-size: 85%;}

.sticky-wrapper{display:none;}

.sp{
	position: fixed;
	top: 0;
	left: 0;
	display:block;
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: rgba(0,0,0,.8);
	visibility: hidden;
	opacity: 0;
	z-index: 1000;
}

.open{
	visibility: visible;
	opacity: 1;
	-webkit-transition: all .5s;
	transition: all .5s;
}

.menu{
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.menu li{
	display:block;
	width: 100%;
}

.menuButton {
	position: fixed;
	top: 10px;
	right: 5px;
	z-index: 9999;
	display: block;
	width: 46px;
	height:46px;
	cursor: pointer;
}

.menuButton::after {
	position: absolute;
	left: -3px;
	bottom: -10px;
	content: 'Menu';
	display: block;
	width: 100%;
	font-size: 12px;
	text-decoration: none;
	text-align: center;
	color: #fff;
	transition: all .4s;
}

.menuButton.active::after {content: 'Close';}

.menuButton span::before {
	position: absolute;
	top: -1px;
	left: -8px;
	content: '';
	width: 2px;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
}

.active span::before {content: none;}

.menuButton:not(.active):hover span:nth-of-type(2) {width: 35%;}

.menuButton:not(.active):hover span:nth-of-type(3) {width: 15%;}

.menuButton span {
	position: absolute;
	left: 9px;
	display: block;
	width: 24px;
	height: 1px;
	background: #fff;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}

.menuButton span:first-child {top: 12px;}

.menuButton span:nth-child(2) {top: 22px;}

.menuButton span:last-child {top: 32px;}

.menuButton.active span:first-child {
	-webkit-transform: translateY(12px) rotate(45deg);
	-moz-transform: translateY(12px) rotate(45deg);
	-ms-transform: translateY(12px) rotate(45deg);
	transform: translateY(12px) rotate(45deg);
}

.menuButton.active span:nth-child(2) {opacity: 0;}

.menuButton.active span:last-child {
	-webkit-transform: translateY(-8px) rotate(-45deg);
	-moz-transform: translateY(-8px) rotate(-45deg);
	-ms-transform: translateY(-8px) rotate(-45deg);
	transform: translateY(-8px) rotate(-45deg);
}

}









/*　ipadよりも小さい端末用のメイン画面　*/

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

.main-text {margin-top: -60px;}

.pc-path{display:none;}

.sp-path{
	display:block;
	width:80%;
	margin:0 auto;
}

.pc-mark{
display: none;
}

.sp-mark{
	display:block;
	position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -110px;
    text-align: center;
    opacity:0.1;
}

.proverb{
	width:85%;
	margin:15px auto 30px;
}

.start {padding: 8px 30px;}

}