@charset "UTF-8";

*{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

html{
color:#444;
background-color:#fff;
}

body{
-webkit-text-size-adjust:100%;
text-align:center;
}

html, body {
height:100%;
}

::selection {
background: #444;
color: #fff;
}

::-moz-selection {
background: #444;
color: #fff;
}

a, a:visited{
-webkit-transition:0.3s;
-moz-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
opacity:1;
filter:alpha(opacity100);
-ms-filter:"alpha(opacity=100)";
-khtml-opacity:1;
-moz-opacity:1;
}

a:hover, a:visited:hover{
opacity:.5;
filter:alpha(opacity50);
-ms-filter:"alpha(opacity=50)";
-khtml-opacity:.5;
-moz-opacity:.5;
}


hr.line{
display:block;
border:none;
height:1px;
width:0px;
background:#444;
margin:0 auto;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
transition:0.5s;
}

hr.line.disp{
width:54px;
}


.skrollr-desktop body {
height:100% !important;
}



.parallax-image-wrapper {
position:fixed;
left:0;
width:100%;
overflow:hidden;
}

.parallax-image-wrapper-50 {
height:50%;
top:-50%;
}

.parallax-image-wrapper-100 {
height:100%;
top:-100%;
}

.parallax-image {
display:none;
position:absolute;
bottom:0;
left:0;
width:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}

.parallax-image-50 {
height:200%;
top:-50%;
}

.parallax-image-100 {
height:100%;
top:0;
}

.parallax-image.skrollable-between {
display:block;
}

.no-skrollr .parallax-image-wrapper {
display:none !important;
}

#wrapper {
height:100%;
overflow:visible;
position:relative;
}

.gap {
background:transparent center no-repeat;
background-size:cover;
}

.skrollr .gap {
background:transparent !important;
}

.gap-50 {
height:50%;
}

.gap-100 {
height:100%;
}

.content {
background:#fff;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding-bottom:10px;
}

.content-full {
height:100%;
}

#done {
height:100%;
}


#kimg{
position:relative;
background-image:url('../img/kimg.jpg');
background-attachment: fixed;
}

h1{
width:270px;
height:164px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
display:block;
}

h1 img{
width:100%;
}

h1 .img{
display:none;
}

.ie h1 .img{
display:block;
}

.ie h1 .svg{
display:none;
}

.logo{
stroke:#fff;
fill: rgba(0,0,0,0);
stroke-width:1;
stroke-dasharray: 3000;
stroke-dashoffset:3000;
-moz-animation:DASH 2s ease-in-out .2s forwards;
-webkit-animation:DASH 2s ease-in-out .2s forwards;
-o-animation:DASH 2s ease-in-out .2s forwards;
animation:DASH 2s ease-in-out .2s forwards;
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}

@keyframes DASH{
0%  {stroke-dashoffset:3000;fill:rgba(0,0,0,0);}
80% {stroke-dashoffset:2000;fill:rgba(0,0,0,0);}
100%{stroke-dashoffset:0;fill:#fff;}
}

@-moz-keyframes DASH{
0%  {stroke-dashoffset:3000;fill:rgba(0,0,0,0);}
80% {stroke-dashoffset:2000;fill:rgba(0,0,0,0);}
100%{stroke-dashoffset:0;fill:#fff;}
}

@-webkit-keyframes DASH{
0%  {stroke-dashoffset:3000;fill:rgba(0,0,0,0);}
80% {stroke-dashoffset:2000;fill:rgba(0,0,0,0);}
100%{stroke-dashoffset:0;fill:#fff;}
}

@-o-keyframes DASH{
0%  {stroke-dashoffset:3000;fill:rgba(0,0,0,0);}
80% {stroke-dashoffset:2000;fill:rgba(0,0,0,0);}
100%{stroke-dashoffset:0;fill:#fff;}
}

@-ms-keyframes DASH{
0%  {stroke-dashoffset:3000;fill:rgba(0,0,0,0);}
80% {stroke-dashoffset:2000;fill:rgba(0,0,0,0);}
100%{stroke-dashoffset:0;fill:#fff;}
}


#greeting{
padding-top:140px;
padding-bottom:180px;
}

#greeting p{
font-size:24px;
letter-spacing:0.08em;
line-height:1.8;
}




#information{
padding-top:50px;
padding-bottom:200px;
}

#information h2{
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:90px;
}

#information ul{
max-width:870px;
margin:0 auto;
}

#information ul:after{
content:" ";
display:block;
clear:both;
}

#information ul li{
list-style:none;
display:inline-block;
vertical-align:middle;
text-align:center;
position:relative;
max-width: 500px;
transition:all 800ms;
}


#information ul li a{
	text-decoration: none;
	color:#444;
}

#information ul li dl{
	width: 100%;
}

#information ul li dl dt{
	width: 100%;
	margin-bottom: 20px;
	position: relative;
}

#information ul li dl dt img{
	width: 100%;
}

#information ul li dl dt span.new{
	position: absolute;
	top: -40px;
	left: -40px;
	font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size:20px;
	height:90px;
width:90px;
	display: block;
border-radius:100px;
text-align:center;
	color:#fff;
	background: #444;
	line-height: 90px;
	letter-spacing:0.08em;
}

#information ul li dl dd{
	width: 100%;
	font-size: 16px;
	line-height: 1.8;
}

#information ul li dl dd span.date{
	font-family: 'Roboto', sans-serif;
	letter-spacing:0.08em;
	font-weight: 400;
	margin-right: 10px;
	padding: 1px 10px;
	border:1px #ccc solid;
}




#service{
padding-top:50px;
padding-bottom:180px;
}

#service h2{
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:30px;
}

/*
#service h2:before{
content:" ";
position:absolute;
top:-50px;
left:50%;
width:54px;
height:1px;
border-top:1px #000 solid;
display:block;
margin-left:-27px;
}
*/

#service ul{
max-width:870px;
margin:0 auto;
}

#service ul:after{
content:" ";
display:block;
clear:both;
}

#service ul li{
list-style:none;
/*border:1px #E5E7E7 solid;*/
border:1px #444 solid;
color: #fff;
height:184px;
width:184px;
display:inline-block;
border-radius:100px;
text-align:center;
position:relative;
margin:10px;
}

#service ul li .text{
display:block;
width:100%;
height: 100%;
background: #444;
text-align:center;
border-radius:100px;
}

#service ul li .text span{
	display: block;
	width: 100%;
position: absolute;
	top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

#service ul li .text h3{
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size:28px;
margin-bottom:10px;
}

#service ul li .text p{
font-size:13px;
font-weight:bold;
line-height:1.4;
}


/* profile */

#profile{
padding-top:50px;
padding-bottom:180px;
}


#profile h2{
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:60px;
}

/*
#profile h2:before{
content:" ";
position:absolute;
top:-50px;
left:50%;
width:54px;
height:1px;
border-top:1px #000 solid;
display:block;
margin-left:-27px;
}
*/


#profile ul{
margin-bottom:80px;
}

#profile ul li{
list-style:none;
font-size:14px;
line-height:2.4;
letter-spacing:0.05em;
}

#map{
width:100%;
height:450px;
}


/* contact */

#contact{
padding-top:50px;
padding-bottom:160px;
}

#contact h2{
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:80px;
}

/*
#contact h2:before{
content:" ";
position:absolute;
top:-50px;
left:50%;
width:54px;
height:1px;
border-top:1px #000 solid;
display:block;
margin-left:-27px;
}
*/


#contact a.btn{
letter-spacing:0.05em;
font-size:20px;
font-weight:100;
text-decoration:none;
/*border:1px #E5E7E7 solid;
color:#444;*/
dislpay:block;
background:#444;
color: #fff;
padding:20px 60px;
}



small{
font-size:12px;
line-height:1.8;
letter-spacing:0.1em;
}



.pagetop{
	display: block;
	width: 80px;
	height: 0px;
	padding-top: 80px;
	line-height: 2;
	overflow: hidden;
	position: relative;
	margin: 0 auto 60px auto;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 1px #666 solid;
}

.pagetop:after{
	margin: auto;
	content: "";
	vertical-align: middle;
	position: absolute;
	display: block;
	top:35px;
	left: 30px;
	width: 20px;
	height: 20px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


span.sp{
display:none;
}



.fadein {
opacity:0;
transform:translate(0, 30px);
transition:all 800ms;
}
 

.fadein.scrollin {
opacity:1;
transform:translate(0, 0);
}

.sveffect .s01,
.sveffect .s02,
.sveffect .s03,
.sveffect .s04,
.sveffect .s05,
.sveffect .s06,
.sveffect .s07{
opacity:0;
transform:translate(0, 20px);
transition:all 1000ms;
}

.sveffect.scrollin .s01,
.sveffect.scrollin .s02,
.sveffect.scrollin .s03,
.sveffect.scrollin .s04,
.sveffect.scrollin .s05,
.sveffect.scrollin .s06,
.sveffect.scrollin .s07{
opacity:1;
transform:translate(0, 0);
}

.sveffect.scrollin .s01{transition-delay:0.0s;}
.sveffect.scrollin .s02{transition-delay:0.2s;}
.sveffect.scrollin .s03{transition-delay:0.4s;}
.sveffect.scrollin .s04{transition-delay:0.6s;}
.sveffect.scrollin .s05{transition-delay:0.8s;}
.sveffect.scrollin .s06{transition-delay:1.0s;}
.sveffect.scrollin .s07{transition-delay:1.2s;}


.sveffect .s01 .text,
.sveffect .s02 .text,
.sveffect .s03 .text,
.sveffect .s04 .text,
.sveffect .s05 .text,
.sveffect .s06 .text,
.sveffect .s07 .text{
opacity:0;
transition:all 1000ms;
}

.sveffect.scrollin .s01 .text,
.sveffect.scrollin .s02 .text,
.sveffect.scrollin .s03 .text,
.sveffect.scrollin .s04 .text,
.sveffect.scrollin .s05 .text,
.sveffect.scrollin .s06 .text,
.sveffect.scrollin .s07 .text{
opacity:1;
}

.sveffect.scrollin .s01 .text{transition-delay:0.8s;}
.sveffect.scrollin .s02 .text{transition-delay:1.0s;}
.sveffect.scrollin .s03 .text{transition-delay:1.2s;}
.sveffect.scrollin .s04 .text{transition-delay:1.4s;}
.sveffect.scrollin .s05 .text{transition-delay:1.6s;}
.sveffect.scrollin .s06 .text{transition-delay:1.8s;}
.sveffect.scrollin .s07 .text{transition-delay:2.0s;}



.sveffect .s01 .text span,
.sveffect .s02 .text span,
.sveffect .s03 .text span,
.sveffect .s04 .text span,
.sveffect .s05 .text span,
.sveffect .s06 .text span,
.sveffect .s07 .text span{
opacity:0;
transition:all 1000ms;
}

.sveffect.scrollin .s01 .text span,
.sveffect.scrollin .s02 .text span,
.sveffect.scrollin .s03 .text span,
.sveffect.scrollin .s04 .text span,
.sveffect.scrollin .s05 .text span,
.sveffect.scrollin .s06 .text span,
.sveffect.scrollin .s07 .text span{
opacity:1;
}

.sveffect.scrollin .s01 .text span{transition-delay:1.2s;}
.sveffect.scrollin .s02 .text span{transition-delay:1.4s;}
.sveffect.scrollin .s03 .text span{transition-delay:1.6s;}
.sveffect.scrollin .s04 .text span{transition-delay:1.8s;}
.sveffect.scrollin .s05 .text span{transition-delay:2.0s;}
.sveffect.scrollin .s06 .text span{transition-delay:2.2s;}
.sveffect.scrollin .s07 .text span{transition-delay:2.4s;}



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

/*
.fadein {
opacity:1;
transform:translate(0, 0);
}

hr.line {
width:54px;
}
	*/


span.sp{
display:inline;
}

#kimg{
background-attachment:scroll;
}
	
#information ul li{
max-width: 300px;
}

#information ul li dl dt span.new{
top: -30px;
left: -30px;
font-size:16px;
height:60px;
width:60px;
line-height: 60px;
}

#information ul li dl dd{
	font-size: 12px;
}


}



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

h1{
width:200px;
height:121px;
}

.content {
padding-left:20px;
padding-right:20px;
}

#greeting{
padding-top:100px;
padding-bottom:140px;
}


#greeting p{
font-size:18px;
}

	
#information{
padding-top:20px;
padding-bottom:140px;
}
	
#information h2{
font-size:40px;
margin-bottom:60px;
}
	

#service{
padding-top:30px;
padding-bottom:120px;
}

#service h2{
font-size:40px;
margin-bottom:20px;
}

/*
#service h2:before{
top:-30px;
}
*/

#service ul{
width:100%;
}

#service ul li{
height:138px;
width:138px;
margin:5px;
}

#service ul li .text{
width:138px;
}

#service ul li .text h3{
font-size:22px;
margin-bottom:6px;
}

#service ul li .text p{
font-size:10px;
font-weight:bold;
}


#profile{
padding-top:30px;
padding-bottom:120px;
}


#profile h2{
font-size:40px;
margin-bottom:30px;
}

/*
#profile h2:before{
top:-30px;
}
*/

#profile ul{
margin-bottom:50px;
}

#profile ul li{
font-size:11px;
line-height:2.2;
letter-spacing:0em;
}

#map{
height:200px;
}


#contact{
padding-top:30px;
padding-bottom:140px;
}

#contact h2{
font-size:40px;
margin-bottom:60px;
}

/*
#contact h2:before{
top:-30px;
}
*/

#contact a.btn{
font-size:16px;
padding:20px 40px;
}

/*
.fadein {
opacity:1;
transform:translate(0, 0);
}

hr.line {
width:54px;
}
	*/


span.sp{
display:inline;
}


}