@charset "utf-8";
@import "clear.css";
@import "utill.css";
@import "hamburger.css";

* { margin:0; padding: 0; font-size:100%; font-weight:normal; list-style:none; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body { text-align: center; font-size: 100%; font-family:'メイリオ', Meiryo, Verdana, 'MS Pゴシック', 'MS PGothic', Arial, Helvetica, sans-serif; line-height: 1.7; color: #333; letter-spacing:0.1em;}

img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}

a{text-decoration: none; color:#333;}
a:hover{text-decoration: underline;}

#loading{ position: fixed; top:0; left:0; width:100%; height:100%; background:#000 url(../img/loading.gif) center center no-repeat; z-index:99999;}


header{ position:relative; width:100%; height:240px; background:url(../img/main_bg2022.jpg) center 0 no-repeat; background-size:cover;}
header::after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.7);}

header.email{ height:120px; background:#fff;}
header.email::after{ content:none;}

#logo{ position:absolute; top:10px; margin-left:10px; z-index:9999; text-align:left;}
#logo img{ width:60px; height:auto;}
#logo dd{ font-size:0.8rem; margin-top:0.5rem; font-family:Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}


#hamburger{ position:fixed; top:10px; right:10px; z-index:9998; line-height:1; background:rgba(0,0,0,0.7); padding:10px;}

nav#gNav{ width:100%; position:fixed; top:0; right:0; z-index:9997; display:none;}
nav#gNav ul{ background:rgba(0,50,78,0.9); padding:80px 0 0; height:100vh; box-sizing: border-box;}
nav#gNav ul li { width:100%; height:100px; position:relative;}
nav#gNav ul li a{ display:block; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
nav#gNav ul li a dl dt{ font-size:1rem; color:#fff; font-family: 'Lato', sans-serif;}
nav#gNav ul li a dl dd{ font-size:0.75rem; margin-top:0; color:#eee;}


#works{padding:40px 0 40px;}
#company{padding:40px 0 40px; background:url(../img/company_bg.jpg) center center no-repeat; background-size:cover;}
#recruit{padding:40px 0 40px;}
#mail{padding:40px 0 40px; background:url(../img/contact_bg.jpg) center center no-repeat; background-size:cover;}


.section{ width:100%;}
.contentWrapper{ position:relative; width:100%;}

.contentFull{ width:100%;}
.contentFull > div{ margin:0 20px; text-align:left;}
.contentFull > div h2{ margin-bottom:1rem; padding-bottom:5px; display:inline-block; position:relative;}
.contentFull > div h2::after{ content:""; height:1px; width:100%; background: #03324e; position:absolute; bottom:0; left:0;}
.contentFull > div h2 dl dt{ font-size:1.2rem; color: #03324e; font-weight:bold;font-family: 'Lato', sans-serif;}
.contentFull > div h2 dl dd{ font-size:0.8rem; margin-top:0; color: #03324e;}

.contentFull > div p{ font-size:85%; margin:0 0 20px 0;}
.contentFull > div p#explainText{ font-size:85%; margin:0 0 40px 0;}
.contentFull > div table{ font-size:85%; width:100%;}
.contentFull > div table th,.contentFull div table td{ padding:0 0 10px 0; vertical-align: top; text-align: left;}
.contentFull > div table td{ padding:0 0 10px 10px;}
.contentFull > div table th{ width:30%;}

.contentFull > div > div#map{ margin:20px 0 20px; padding-left: 0; text-align: left; padding-top:0; width:100%; height:auto;}
.contentFull > div h3{ font-weight:bold; margin-bottom:10px;}

.contentWorks{ width:100%; max-width:1000px; margin:0 auto;}
.contentWorks h2{ line-height:1; margin-bottom:1rem; padding-bottom:10px; display:inline-block; position:relative;}
.contentWorks h2::after{ content:""; height:1px; width:100%; background: #03324e; position:absolute; bottom:0; left:0;}
.contentWorks h2 dl dt{ font-size:1.2rem; color: #03324e; font-weight:bold;font-family: 'Lato', sans-serif;}
.contentWorks h2 dl dd{ font-size:0.8rem; margin-top:10px; color: #03324e;}

.contentWorks h3{ font-size:1.2rem; color: #03324e; font-weight:bold; line-height:1; text-align:left; background: url(../img/icon_arrow.png) 0 center no-repeat; background-size:1rem; padding:0 0 0 1.6rem; margin-left:10px; margin-bottom:calc(1rem - 5px);font-family: 'Lato', sans-serif;}

.contentWorks > ol > li{ margin:0 auto 2rem;}
.contentWorks > ol > li p{ margin:10px 10px 0; font-size:0.8rem;}

.contentWorks a{ transition: all .2s;}
.contentWorks a:hover{ opacity:0.7; text-decoration: none;}


.baseInput{ background:#fff; padding:10px 10px; width:100%; box-sizing:border-box; border:none; border:1px solid #ccc; font-size:1rem;}
.baseTextarea{ background:#fff; padding:10px; width:100%; box-sizing:border-box; height:160px; border:none; border:1px solid #ccc; font-size:1rem;}
.baseSubmit{ background:#000; color:#fff; padding:10px 10px; width:50%; border:none; cursor:pointer;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}
.baseSubmit:hover{ background:#333;}
#submitWrapper{ margin:0 0 40px;}

footer{ position:fixed; bottom:0; left:0; background:#03324e; color:#fff; padding:5px 0; width:100%; font-size: 50%; z-index: 100;}




#workHeaderWrapper{ text-align:left; margin-left:0; padding:20px; position:relative;}
#workHeaderWrapper #logo{position:static; margin-top:0; margin-left:0;}
#workHeaderWrapper #logo img{ width:60px;}
#workHeaderWrapper #logo dd{ font-size:0.8rem;}
#workHeaderWrapper a{ display:inline-block;}
#workHeaderWrapper a:hover{ text-decoration:none;}

#workWrapper{ width:100%; margin:0 auto; padding-top:0;}
#photoWrapper{ }
#photoWrapper h2{ font:bold; margin:1rem 1rem 1rem; text-align:center;}

.workPhotoUl{padding-bottom:20px;}
.workPhotoUl li{ margin-bottom: 20px;}

#workNavWrapper{ text-align:left; padding:0 20px 40px;}
#workNavWrapper h2{ float:bold; margin-bottom:10px;}
#workNavWrapper ul { margin-bottom:20px;}
#workNavWrapper ul li a{ font-size:75%;}
#workNavWrapper ul li a:hover{ text-decoration:underline;}
#workNavWrapper ul li{ display:block; box-sizing:border-box; position:relative; margin-left:1rem; padding:0 1rem 0 0.5rem;}
#workNavWrapper ul li:before{ content:"・"; position:absolute; left:-1rem;}
#workNavWrapper p{ font-size:75%;}




#moveUp{ position:fixed; bottom:60px; right:20px; display:none; width:70px; line-height: 70px; color: #fff; background:#03324e; cursor:pointer; display:none;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;}
#moveUp:hover{ background:#666;}


#scrollinfo{ position:absolute; bottom:200px; left:50%; margin-left:-23px;}

#gMapIcon{ margin:20px 0 0;}
#gMapIcon img{ height:auto; width:60px;}
.contentFull > div > div#map iframe{ height:300px;}

.defaultBtn{ margin:2rem 0 6rem 0;}
.defaultBtn a{ display:block; line-height:1; color:#fff; background:#03324e; padding:1rem 0; text-align:center;
transition: all 0.5s; -webkit-transition: all 0.5s;}
.defaultBtn a:hover{ background:#011622; text-decoration:none;} 


.twoColumn img{width:50%; height:auto;}
.twoColumn img:nth-child(1){ padding-right:10px; box-sizing: border-box;}
.twoColumn img:nth-child(2){ padding-left:10px; box-sizing: border-box;}




#philosophyWrapper{ padding:2rem 0 2rem;}
#philosophyWrapper h2{ color:#03324e; font-size:0.8rem; line-height:1.7; font-weight: bold;}
.deco{ margin:0 auto 1rem;}


.grid{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	background:#eee;
}

.grid.special{
	grid-template-columns: 1fr 1fr;
}

.vertical{
	grid-column:1 / 3;
	grid-row:1;
}
.grid li{ padding:0; box-sizing: border-box;}

.metaText{ font-size:0.8rem;}

.archivesWrapper{ margin-top:4rem;}
.archivesWrapper ul{ text-align:left; padding:0 5px;}
.archivesWrapper ul li{ display:inline-block; width:50%; padding:5px 5px; box-sizing: border-box; vertical-align:top;}
.archivesWrapper ul li p{ font-size:0.8rem; text-align: center;}

.spOnly{}
.pcOnly{ display:none;}


.mt40.mt20--sp{ margin-top:20px;}

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

.spOnly{ display:none;}
.pcOnly{ display:block;}
.mt40.mt20--sp{ margin-top:40px;}


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

header.email{ height:180px;}

#logo{ top:20px; margin-left:20px;}
#logo img{ width:80px;}
#logo dd{ font-size:1rem;margin-top:1rem;}

#logo.topPage{ left:50%; margin-left:-500px;}

#hamburger{ display:none;}

nav#gNav{ width:auto; display:block;}
nav#gNav ul{ padding:0; height:auto;}
nav#gNav ul li { width:180px; height:100px; border-bottom: 1px solid #03324e; border-left: 1px solid #03324e; box-sizing: border-box; transition: all .5s;}
nav#gNav ul li:hover{ background: #011622;}
nav#gNav ul li a:hover{ text-decoration:none;}
nav#gNav ul li a dl dd{ margin-top:0; color:#aaa;}


#works{padding:80px 0 80px;}
#company{padding:80px 0 80px;}
#recruit{padding:80px 0 80px;}
#mail{padding:80px 0 80px;}




.contentFull > div{ width:640px; margin:0 auto; position:relative;}
.contentFull > div h2{ margin-bottom:3rem;}
.contentFull > div h2 dl dt{ font-size:1.2rem;}
.contentFull > div h2 dl dd{ font-size:0.8rem; margin-top:0;}
.contentFull > div table th{ width:20%;}
.contentFull > div > div#map iframe{ height:400px;}


.contentWorks h3{ margin-left:0;}
.contentWorks > ol > li p{ margin:0 auto 0;}


.bigBtn{ display:block; text-align: center; color:#fff; background:rgba(0,0,0,0.5) url(../img/icon-arrow.png) 90% center no-repeat; background-size:16px; padding:20px 0; font-size: 80%; margin:40px 0 0;}
.baseInput{ background:#fff; padding:10px 10px; width:60%; border:none; border:1px solid #ccc;}
.baseTextarea{ background:#fff; padding:10px; width:80%; height:160px; border:none; border:1px solid #ccc;}
.baseSubmit{ background:#000; color:#fff; padding:10px 10px; width:30%; border:none;}
#submitWrapper{ margin:0 0 40px;}

footer{ /*position:fixed; bottom:0;*/ background:#03324e; color:#fff; padding:10px 0; width:100%; font-size: 70%; z-index: 100;}




#workHeaderWrapper{ padding:20px 0; width:860px; margin:0 auto;}
#workHeaderWrapper #logo img{ width:80px;}
#workHeaderWrapper #logo dd{ font-size:1rem;}

#workWrapper{ width:860px; margin:0 auto; padding-top:20px;}
#photoWrapper{ float:right; width:640px; text-align:right; padding-top:0;}
#photoWrapper h2{ font:bold; margin:0 0 20px; text-align:right;}

.workPhotoUl{padding-bottom:60px;}

#workNavWrapper{ float:left; width:220px; text-align:left; padding:0 0 40px;}
#workNavWrapper h2{ float:bold; margin-bottom:10px;}
#workNavWrapper ul { margin-bottom:40px;}
#workNavWrapper ul li{ line-height:1.4; margin-bottom:0.5rem;}

#workNavWrapper ul li a{ font-size:75%;}
#workNavWrapper p{ font-size:75%;}

#scrollinfo{ display:none;}


.defaultBtn{ margin:2rem 2rem 2rem 0;}


#philosophyWrapper{ padding:4rem 0 0;}
#philosophyWrapper h2{ font-size:1rem; line-height:2.4;}

.grid li{ padding:5px;}
.grid.special{ grid-template-columns: 1fr 1fr 1fr;}
.vertical{ grid-column:1; grid-row:1/3;}

.archivesWrapper ul{ padding:0;}
.archivesWrapper ul li{ width:33.3%; padding:5px;}
}