/*@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Modern+Antiqua);*/

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{font:14px/1.9 'Noto Sans JP',Arial,Verdana,游ゴシック,YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;font-weight:300;-webkit-text-size-adjust:100%;overflow-x:hidden;color:#000;background:#fff}
a{color:#06f;text-decoration:none}
a:hover,.active{text-decoration:underline}
a:active, a:focus,input:active, input:focus{outline:0;}


/* ヘッダー
------------------------------------------------------------*/
#mainnav a{color:#000;font-family:'Modern Antiqua','Noto Sans JP',serif}

/* フッター
------------------------------------------------------------*/
#footer{clear:both;padding:50px 10px 50px 0;text-align:center;font-size:12px}

/* 共通
------------------------------------------------------------*/
h1,h2{font-family:'Modern Antiqua','Noto Sans JP',serif}
h3{ text-align: center; }
img{max-width:100%;height:auto}
section{clear:both}

section h2{width:60%;margin:70px auto;font-size:22px;font-weight:400;text-align:center}
section h2 span{padding-bottom:20px;border-bottom:3px solid #000}

section h3{ margin: 10px 0;font-size:16px;font-weight: bold; }


.inner{width:90%;margin:0 auto; }

#sec03 .inner,#sec04 .inner,.bb .inner{border-bottom:1px solid #a0a0a0}

.inner01 { margin:0 auto; text-align:center; }
.inner02 { width: 600px; margin:0 auto 50px; text-align: left; }
.inner02 h3 { text-align: left; }

.cc { text-align: center }

.pb50 { padding-bottom: 50px; }
.pb80 { padding-bottom: 80px; }

dl {}
dt { font-size: 16px; font-weight:bold; text-align:center; }
dd + dt { margin-top: 30px; }
dd { padding-bottom: 30px; text-align:center; }

a.btn_03{display:block;text-align:center;vertical-align:middle;text-decoration:none; margin:auto;padding:1rem 4rem;font-weight:700;border:2px solid red;color:red;border-radius:100vh;transition:.5s; max-width: 360px; }
a.btn_03:hover{color:#fff;background:red}

.m15 {margin: 15px 0; }
.ico { display: flex; justify-content: center; align-items: center; height: 120px; width: 120px; margin: 0 auto; border-radius: 50%; background: #fafafa; }
.ico img { }

/* SEC02 Gallery
------------------------------------------------------------*/
#sec02{padding:0!important}
#sec02 header{display:none}

.gallery{overflow:hidden}
.gallery li{float:left;width:calc(100%/3);line-height:0}
.gallery .full{width:100%}
.gallery img{display:block;width:100%;height:auto}


/* SEC03 BRAND
------------------------------------------------------------*/
.col4 .img{ margin: 0 auto; }

/* SEC04 PROJECT
------------------------------------------------------------*/
#sec04{padding-bottom:0!important}
.article{clear:both;overflow:hidden;padding-bottom:50px}
.article img{float:left;margin:5px 20px 20px}
.article p{margin-bottom:20px}


/* SEC05 COMPANY
------------------------------------------------------------*/
#sec05 p{margin-bottom:5px}
.col2 li{display:inline-block;width:100%;margin:20px 0}
#map{position:relative;padding-bottom:75%;height:0;overflow:hidden;z-index:0}
#map iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:0}


/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 800px){
body{font-size:14px}
#wrapper{width:100%}
#content{ /*width:80%; margin-left: 20%;*/ }
#sidebar{width:20%;position:fixed;top:0;left:0; bottom: 0; background:#fff; box-shadow: 0 0 30px 0 rgba(0,0,0, 0.1);}
#sidebarwrap { padding: 30px; }
a#menu{display:none}
.panel{display:block!important}
#sidebar h1{padding:30px 0}
#mainnav li{font-size:14px;padding:10px 0}
#sns{margin-top:50px}
#sns li{display:inline-block;padding-right:10px}
#sns a:hover img{opacity:.8}

/* SEC03 BRAND
-----------------*/
.col4{ display: flex; justify-content: space-between; align-items: top; flex-wrap: wrap; }

.col4::before{ content:""; display: block; width: 30%; order:1;
}
.col4::after{ content:""; display: block; width: 30%; }

.col4 li{display:inline-block;width:18%; padding:0 3%;vertical-align:top;text-align:left}
.mbg60 li{ margin-bottom: 60px; }
.mt30 { margin-top: 30px; }
#footer{padding:30px 10px 70px 0}
}


@media only screen and (min-width: 641px){
.col2 li{width:60%;vertical-align:top}
.col2 li:first-child{width:35%;padding-right:4%}
}

@media only screen and (max-width: 640px){
.innerS{width:94%;padding-bottom:30px}
#gallery li{float:none;width:100%}
.article img{float:none;display:block;margin:0 auto 20px}
#map iframe{width:96%!important;left:2%}
}

@media only screen and (max-width: 799px){
#sidebar{position:fixed;width:100%;z-index:500}
#sidebarwrap{position:relative;width:100%;height:60px;background:#fff;border-bottom:1px solid #ccc}
#sidebar h1{text-align:center;padding-top:15px}
#sidebar h1 img{width:auto!important;max-height:25px}
a#menu{display:inline-block;position:relative;width:40px;height:40px;margin:10px}
#menubtn{display:block;position:absolute;top:50%;left:50%;width:18px;height:2px;margin:-1px 0 0 -7px;background:#000;transition:.2s}
#menubtn:before,#menubtn:after{display:block;content:"";position:absolute;top:50%;left:0;width:18px;height:2px;background:#000;transition:.3s}
#menubtn:before{margin-top:-7px}
#menubtn:after{margin-top:5px}
a#menu .close{background:transparent}
a#menu .close:before,a#menu .close:after{margin-top:0}
a#menu .close:before{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
a#menu .close:after{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}
.panel{width:100%;display:none;overflow:hidden;position:relative;left:0;top:-10px;z-index:100}
#mainnav{position:absolute;top:0;width:100%;text-align:right}
#mainnav ul{border-bottom:1px solid #ccc;background:#fff;text-align:left}
#mainnav li a{position:relative;display:block;padding:15px 25px;border-bottom:1px solid #ccc;color:#000;font-weight:400}
#mainnav li a:before{display:block;content:"";position:absolute;top:50%;left:5px;width:6px;height:6px;margin:-4px 0 0;border-top:solid 2px #000;border-right:solid 2px #000;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
#mainnav #sns li{display:inline-block}
#mainnav #sns li a{position:relative;display:inline-block;padding:15px 10px 0;border:0}
#mainnav #sns li a:before{border:0}
.col4 li{margin:0 auto 50px;display:block;text-align:center}
section h2{margin:55px auto}
}