@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Courgette');


/* ------------------------------------------
common.css
2016.10.15
------------------------------------------ */

/* common
------------------------------------------ */
html,body,h1,ul,ol,dl,li,dt,dd,p,header,hgroup,section,article,aside,footer,figure,figcaption,nav {
margin:0;
padding:0;
font-size:100%;
line-height:100%;
color:#333;
}

body{
position: relative;
width: 100%;
font-family: HiraKakuProN-W3,sans;
line-height: 100%;
-webkit-touch-callout:none;
-webkit-text-size-adjust:none;
background-color: #FFF;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
display:block;
}

/* box-sizing */
body,
div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,
form,input,textarea,button,
table,tr,th,td,
article,aside,footer,header,hgroup,nav,section{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}



p,small,span,div {
line-height:100%;
}

p{
margin:0 0 1em;
}



table {
border-spacing:0;
empty-cells:show;
}

a {
background-color:transparent;
text-decoration:none;
/*-webkit-tap-highlight-color: rgba(0,0,0,0);*/
}

a:link,a:visited {
color:#333;
text-decoration:none;
}

a:focus,
a:active,
a:hover{
outline:0;
}

hr{
clear:both;
margin:12px 0;
border:0;
height:0;
border-top:1px solid rgba(0, 0, 0, 0.1);
border-bottom:1px solid rgba(224, 224, 224, 1);
}

h1,h2,h3,h4,p,li,dt,dd{
line-height:1.5;
}

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

/* list */
ol,ul{
margin:0;
padding:0;
}

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

dt,dd{
margin:0;
}


/* ------------------------------------------
 common
------------------------------------------ */
h1{
/* Monotype Corsiva */
}

h2{
margin:0 0 0.5em;
font-size:200%;
font-weight:normal;
font-family: 'Courgette', cursive;
}

.hide{
display:none !important;
}

.small{
font-size:80%;
}


/* header
------------------------------------------ */
.header{
position: fixed;
overflow: hidden;
width:100%;
height:530px;
}



/* contents
------------------------------------------ */
.wrap{
position:relative;
}

/*
------------------------------ */
.headerBg{
position:fixed;
width:100%;
height:300px;
background:url(../images/headerImage.jpg) no-repeat 50% 50%;
background-size: cover;
z-index:0;
overflow: hidden;
}

.headerArea{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
height:300px;
text-align:center;
}

.headerArea div.svgBox{
position:relative;
width:300px;
height:120px;
margin:90px auto 0;
}

.headerArea div.svgBox svg{
width:100%;
height:auto;
margin:0;
padding:0;
}

/* title */
.headerArea .path{
stroke:#fff;
fill:none;
stroke-width:2;
/* 破線 */
stroke-dasharray: 3000;
stroke-dashoffset:3000;
/* アニメーション */
-moz-animation: DASH 3s ease-in alternate forwards;
-webkit-animation:DASH 3s ease-in 0s forwards;
-o-animation:DASH 3s ease-in 0s forwards;
animation:DASH 3s ease-in 0s forwards;
}

@-moz-keyframes DASH{
0%{stroke-dashoffset:3000;fill:none;stroke:#fff;stroke-width:2;}
85%{stroke-dashoffset:2000;fill:none;stroke:#fff;stroke-width:2;}
100%{stroke-dashoffset:0;fill:#fff;stroke:#666;stroke-width:1;}
}

@-webkit-keyframes DASH{
0%{stroke-dashoffset:3000;fill:none;stroke:#fff;stroke-width:2;}
85%{stroke-dashoffset:2000;fill:none;stroke:#fff;stroke-width:2;}
100%{stroke-dashoffset:0;fill:#fff;stroke:#666;stroke-width:1;}
}

@-o-keyframes DASH{
0%{stroke-dashoffset:3000;fill:none;stroke:#fff;stroke-width:2;}
85%{stroke-dashoffset:2000;fill:none;stroke:#fff;stroke-width:2;}
100%{stroke-dashoffset:0;fill:#fff;stroke:#666;stroke-width:1;}
}

@keyframes DASH{
0%{stroke-dashoffset:3000;fill:none;stroke:#fff;stroke-width:2;}
85%{stroke-dashoffset:2000;fill:none;stroke:#fff;stroke-width:2;}
100%{stroke-dashoffset:0;fill:#fff;stroke:#666;stroke-width:1;}
}

/* for IE9+ */
.headerArea .path:not(:target){
fill:#fff;
stroke:#666;
stroke-width:1;
}


/*
------------------------------ */
.contentsArea{
position:absolute;
top:330px;
width:100%;
padding:0;
background:#fff;
}

.contentsBox{
position:relative;
max-width:980px;
margin:0 auto;
padding:30px 10px;
background:#fff;
line-height:1.25;
}

.contentsBoxWrap{

}

.workBox{
transition:0.8s;
transition-delay:0.8s;
}

.box{
margin:0 auto 10px;
}

/* title
------------------------------ */
h2 .sub{
margin:0 0 0 15px;
padding:0 0 0 10px;
font-size:50%;
border-left:1px solid #ccc;
}

h2 .sub a:hover{
text-decoration:underline;
}


/* list01
------------------------------ */
.list01{
margin:0 0 0 15px;
}

.list01 dt{
float:left;
width:10.5em;
}

.list01 dd{
margin:0 0 10px 11.5em;
}



/* ------------------------------------------
Work
------------------------------------------ */
.workBox{
position:relative;
float:left;
width:300px;
margin:0 10px 15px;
}

.workBox .bdrBox{
display:block;
min-height:330px;
padding:10px;
border:1px solid #ccc;
border-radius:5px;
}

.workBox div.bdrBox{
border-color:#eee;
}

.workBox a.bdrBox:hover{
border:1px solid #666;
box-shadow:1px 1px 3px 1px #cccc;
-moz-box-shadow:1px 1px 3px 1px #ccc;
-webkit-box-shadow:1px 1px 3px 1px #ccc;
}

.workBox .thumb{
text-align:center;
}

.workBox .thumb img{
max-width:100%;
}

.workBox div.bdrBox .thumb{
opacity:0.5;
}

.workBox div.bdrBox .txt h3,
.workBox div.bdrBox .txt p{
color:#aaa;
}

.workBox .txt p{
font-size:80%;
}


/* ------------------------------------------
Work2
------------------------------------------ */
#Works2 .subheader .contentsBox{
margin:0 auto;
padding:5px 0 10px;
}

#Works2 .subheader div.svgBox{
position:relative;
width:100px;
height:40px;
margin:0;
}

#Works2 .subheader div.svgBox svg{
width:100%;
height:auto;
margin:0;
padding:10px 0;
}


#Works2 .contentsArea{
position:static;
}

#Works2 .workBox{
opacity:0;
}

#Works2 .workBox .bdrBox{
min-height:440px;
}

#Works2 h3 span{
display:block;
font-size:80%;
font-weight:normal;
}

#Works2 h3 span.small{
display:inline;
}



/* ------------------------------------------
Photo
------------------------------------------ */
#Sec02 .box{
width:960px;
}

#MainphotoArea{
float:left;
width:600px;
height:450px;
margin:0 10px;
text-align:center;
}

#Mainphoto{
position:relative;
width:600px;
height:450px;
}

#Mainphoto img{
max-width:100%;
max-height:100%;
}

#Photonavi{
display:block;
width:300px;
float:left;
}

#Photonavi li{
float:left;
background:#000;
}

#Photonavi li a img{
opacity:0.25;
}

#Photonavi li a:hover img,
#Photonavi li.select img{
opacity:1;
}



/* ------------------------------------------
 footer
------------------------------------------ */
footer{
text-align:center;
}

footer #goTop{
text-align:right;
font-size:80%;
}

footer p{
margin:0;
}

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



/* ------------------------------------------
media wide
------------------------------------------ */
@media screen and (max-width:979px){

.contentsBox{
width:100%;
}

#Sec01 .box{
width:600px;
margin:0 auto;
}

#Sec02 .box,
#Works2 .box{
width:100%;
}

#Sec02 .workBox,
#Works2 .workBox{
width:30%;
margin:0 1% 15px;
}

#MainphotoArea{
float:none;
margin:0 auto 10px;
}

#Photonavi{
float:none;
width:600px;
}

}

/*
------------------------------------------ */
@media screen and (max-width:480px){

body{
min-width:300px;
}

.headerArea div.svgBox{
width:200px;
height:80px;
}

.headerArea div.svgBox svg{
width:100%;
height:auto;
margin:0;
padding:10px 0;
}

#Sec01 .box{
width:100%;
margin:0 auto;
}

#Sec02 .workBox,
#Works2 .workBox{
width:48%;
margin:0 1% 15px;
}

#Works2 .workBox .bdrBox{
min-height:100px;
}

#Works2 .workBox p{
display:none;
}

#MainphotoArea{
width:100%;
height:auto;
}

#Mainphoto{
width:100%;
height:auto;
}

#Photonavi{
float:none;
width:300px;
margin:0 auto 10px;
}

.list01 dt{
float:none;
}

.list01 dd{
margin:0 0 10px 20px;
}

footer{
text-align:left;
}

footer #goTop{
margin:0 0 10px;
}

footer p{
font-size:80%;
}

}

/*----------------------------------------
99.hac
----------------------------------------*/
.clr:after,.cFix:after,
.header:after,
.wrap:after,
.contentsBox:after,
.box:after,
.list01:after,
.workBox .bdrBox:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
overflow:hidden;
}