@charset "UTF-8";
/* CSS Document */
/* base */
html,
body { height: 100%; }
body { font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Roboto, sans-serif; font-size: 16px; line-height: 2; color: #222; background: #fff; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
h1,
h2,
h3 { line-height: 1.5; text-align: center; }
h1 img { max-width: 80%; }
h2 { font-family: "Roboto", sans-serif; font-size: 36px; letter-spacing: 0.2em; margin: 50px 0; }
h3 { font-size: 18px; margin: 40px 0; }
p { margin: 20px 0; }
p:last-child { margin-bottom: 0; }
a { color: #222; font-weight: bold; }
img { max-width: 100%; }
.mb { display: none; }
/* body */
.wrapper { position: relative; max-width: 900px; height: 100%; margin: 0 auto; padding: 0 50px; opacity: 0; transition: all .3s; }
.mode-loaded .wrapper { opacity: 1; }
.cover { box-sizing: border-box; height: 100%; max-height: 700px; }
section { padding: 50px 0; }
hr { width: 1px; height: 50px; margin: 50px auto; border: none; background: #222; }
hr:first-child { width: 100px; height: 1px; margin: 0 auto 100px; }
table { width: 100%; margin: 20px 0; border-collapse: collapse; border-top: solid 1px #ddd; }
th,
td { padding: 15px 20px 15px 0; border-bottom: solid 1px #ddd; text-align: left }
th { white-space: nowrap; }
td:last-child { padding-right: 0; }
.tbl-service td { text-align: right; }
section ul { margin: 20px 0 20px 1.2em; }
section ul:last-child { margin-bottom: 0; }
#gmap-container { position: relative; padding-top: 50%; }
#gmap { position: absolute; top: 0; width: 100%; height: 100%; }
.copyright { font-family: "Roboto", sans-serif; font-size: 12px; text-align: center; letter-spacing: 0.1em; }
/* pager */
.center { display: table; width: 100%; height: 100%; }
.center-inner { display: table-cell; text-align: center; vertical-align: middle; }
.pager { position: fixed; top: 0; right: 0; width: 50px; height: 100%; z-index: 101; }
.pager-inner { display: inline-block; width: 100%; }
.pager i { display: block; padding: 10px 0; cursor: pointer; }
.pager i:after { content: ""; display: block; width: 40%; height: 1px; background: #222; transition: all .2s; }
.pager i:hover:after,
.pager i.active:after { width: 100%; }
.mode-nav .pager i:after { background: #fff; }
.h2 { position: fixed; top: 0; left: 0; font-family: "Roboto", sans-serif; font-size: 24px; font-weight: bold; width: 100%; height: 60px; line-height: 60px; background: #fff; text-align: center; letter-spacing: 0.1em; overflow: hidden; z-index: 99; transform: translateY(-60px); transition: all .3s; }
.h2 ul { position: relative; transition: all .3s; }
.h2 li { display: block; }
.mode-h2 .h2 { transform: translateY(0); }
/* nav */
.nav { position: fixed; bottom: 0; left: 0; color: #fff; width: 100%; height: 0; background: #ddd; overflow: hidden; z-index: 100; transform: scale(0.8); transition: all .3s; }
.nav ul { display: inline-block; width: 700px; opacity: 0; }
.nav ul:after { content: ""; display: block; clear: both; }
.nav li { box-sizing: border-box; display: block; float: left; font-family: "Roboto", sans-serif; font-size: 36px; font-weight: bold; width: 50%; height: 80px; line-height: 75px; border: solid 5px transparent; letter-spacing: 0.1em; cursor: pointer; transition: all .3s; }
.nav li.active { border-color: #fff; }
.nav li:hover { background: rgba(255,255,255,0.2); }
.mode-nav .nav { height: 100%; transform: scale(1); }
.mode-nav .nav ul { opacity: 1; transition: all .3s .3s; }
.nav-btn { position: fixed; top: 0; right: 0; width: 60px; height: 60px; background: #f5f5f5; cursor: pointer; z-index: 101; transition: all .3s; }
.nav-btn:hover { background: #eee; }
.nav-btn-inner { position: absolute; top: 20px; left: 15px; width: 30px; height: 21px; }
.nav-btn i { display: block; position: absolute; left: 0; width: 100%; height: 1px; background: #222; transition: all .3s; }
.nav-btn i:nth-child(1) { top: 0; }
.nav-btn i:nth-child(2) { top: 10px; }
.nav-btn i:nth-child(3) { top: 20px; }
.mode-nav .nav-btn { background: transparent; }
.mode-nav .nav-btn i { background: #fff; }
.mode-nav .nav-btn i:nth-child(1) { top: 10px; transform: rotate(45deg); }
.mode-nav .nav-btn i:nth-child(2) { top: 10px; transform: rotate(-45deg); }
.mode-nav .nav-btn i:nth-child(3) { transform: scaleX(0); }

@media screen and (max-width:1000px) {
body { font-size: 14px; }
.pager { width: 30px; }
.nav ul { width: 400px; }
.nav li { width: 100%; }
}

@media screen and (max-width:640px) {
body { font-size: 13px; }
h2 { font-size: 24px; margin: 30px 0; }
h3 { font-size: 14px; margin: 30px 0; line-height: 2; }
.pc { display: none; }
.mb { display: block; }
.wrapper { padding: 30px; }
.cover { height: 86%; max-height: none; }
hr { height: 30px; margin: 30px auto; }
hr:first-child { width: 40px; margin: 0 auto 50px; }
th,
td { padding: 10px 20px 10px 0; }
.tbl-profile th,
.tbl-profile td { display: block; }
.tbl-profile th { padding: 10px 0 0; border: none; }
.tbl-profile td { padding: 0 0 10px; }
#gmap-container { padding-top: 100%; }
.pager { width: 20px; }
.pager i { padding: 15px 0; }
.pager i:after { background: #999; }
.pager i:hover:after { width: 40%; }
.pager i.active:after { width: 100%; }
.h2 { font-size: 21px; height: 50px; line-height: 50px; }
.nav ul { width: auto; margin: 0 50px; }
.nav li { font-size: 24px; height: 60px; line-height: 56px; border: solid 4px transparent }
.nav-btn { width: 50px; height: 50px; }
.nav-btn-inner { top: 16px; left: 13px; width: 24px; height: 17px; }
.nav-btn i:nth-child(2) { top: 8px; }
.nav-btn i:nth-child(3) { top: 16px; }
.mode-nav .nav-btn i:nth-child(1) { top: 8px; }
.mode-nav .nav-btn i:nth-child(2) { top: 8px; }
}

@media print {
.pager,
.h2,
.nav,
.nav-btn,
hr,
#gmap-container { display: none; }
.cover { max-height: none; }
p,
th,
td,
li { font-size: 9pt; }
.sec-projects hr:nth-child(n+2) { display: block; width: 1px; height: 1px; margin: 0; background: none; page-break-before: always; }
}