@charset "utf-8";
/* CSS Document */

/*** 共通項目 ***/
body { color:#FFF; overflow-x: hidden;}
body:before { content: ""; display: block; position: fixed; top: 0; left: 0; z-index:-1; width: 100%; height: 100vh; background: url(../img/bg.jpg) center/cover no-repeat; -webkit-background-size: cover; }

a, a:visited { color: #FFF;  }
a:hover { text-decoration:underline; }
a:hover img { opacity: 0.4;}
    @media (min-width: 769px) {
    	a[href^="tel:"] { pointer-events: none; }
    }
    
.box { padding: 5.0rem 0 2.0rem 0; margin-top: -3.0rem; border-bottom: solid 1px #444;}
.box:last-child { border-bottom: none;}


/***ナビゲーション***/
.gnav { width: 100%; position: fixed; top: 0; left: 0; background-color: transparent; font-size: 0; height: 3.0rem; z-index: 999; text-align: center; padding: 0; margin: 0;}
.gnav.active { background-color: rgba(0,0,0,0.80); text-align: left; font-weight: 500;}
.gnav ul { vertical-align: middle; font-size: 0; margin: 0; padding: 0;}
.gnav ul li { display: inline-block; margin: 0; padding: 0.25rem 0.5rem; font-size: 0.8rem; color: #FFF; vertical-align: middle; height: 3.0rem;}
    @media(min-width:768px){
        .gnav ul li {padding: 0.25rem 1.0rem;}
    }
.gnav ul li p { padding-top: 0.75rem; height: 100%; position: relative;}
.gnav ul li:first-child { display: none;}
.gnav.active ul li:first-child { display: inline-block; margin-right: 0.25rem;}
.gnav ul li p a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px;}
.gnav ul li:hover { text-decoration: underline;}

/*** ヘッダー ***/
.header { height: 35.0rem; margin: 0; padding:0; width: 100%; text-align: center; background: url(../img/geometric.png) center/contain no-repeat; position: relative; text-shadow: 2px 2px 4px #000; margin-top: 3.0rem; }
.header .intro { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding-top: 3.0rem; }
.header .intro img { width: 130px; margin-bottom: 1.0rem; }
.header h2 { font-size: 2.0rem; font-weight: 400;}
.header p { font-size: 0.8rem; text-align: left; padding: 1.0rem; line-height: 1.4rem; margin:  auto;}
    @media (min-width:768px){
        .header .intro img {  width: 200px; margin-bottom: 2.0rem;}
        .header h2 { font-size:3.0rem; }
        .header p { width: 700px;}
    }
    @media (min-width:992px){
        .header .intro img { width: 250px; }
        .header { height: 100vh; }
        .header p { width: 900px;}
    }


/*** ナビ ***/
.nav { border-top: solid 1px #444;}
.nav li { display: inline-block; width: 25%; padding: 0.25rem; }
.nav li img { width: 100%;  filter: saturate(30%);}
    /*@media(min-width:992px){
        .nav li { width: 25%;}    
    }*/
.nav li:hover img {  filter: saturate(100%); } 
.nav li a:hover img { opacity: 1.0;}


/***モデル***/
.model { font-size: 0;}
.model img, .model .caption { width: 100%; margin: 0; padding: 0.25rem; display: inline-block; box-sizing: border-box; vertical-align: top; font-size: 0.8rem;}
.model .btn { text-align: center; padding: 0.5rem; background-color: rgba(80,80,80,0.75); border: solid 1px rgba(255,255,255,0.00); position: relative; transition: 0.8s;}
.model .btn:hover { background-color: rgba(80,80,80,0); border: solid 1px rgba(255,255,255,1.00); }
.model .btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px;}
    @media(min-width:1200px){
        .model img { width: 65%;}
        .model .caption { width: 35%; }
    }

.model .sold { text-align: center; color: #FF0004; font-family: 'Rock Salt', "cursive"; font-size: 1.4rem; margin-top: 1.0rem;}

.model .tbn { width: 100%; margin-top: 0.5rem; }
.model .tbn li { width: 50%; margin: 0; padding: 0; box-sizing: border-box; font-size: 0; display: inline-block; }
.model .tbn li img { width: 100%; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
    @media(min-width:768px){
        .model .tbn li { width: 25%;}
    }

.model .spec { background-color: rgba(51,51,51,0.8); margin-top: 1.0rem; padding: 0.5rem; padding-top: 2.5rem; position:relative;}
.model .spec > h3 {  width: 100%; background-color: #000; color: #FFF; font-family: 'Quicksand', sans-serif; font-size: 2.0rem; text-indent: 2.0rem; position: absolute; top: 0.5rem; left: 0;}
.model .spec .table { width: 100%; margin: 0; padding: 0.5rem; display: inline-block; vertical-align: top;}
    @media(min-width:992px){
        .model .spec .table { width: 50%; }
    }

.model .spec .table .info { padding:1.5rem 1.0rem; font-family: 'Quicksand';}
.model .spec .table .info h4 { font-size: 2.0rem; border-bottom: solid 1px #FFF; margin-bottom: 0.5rem; }
.model .spec .table .info p.text { font-size: 1.2rem; display: inline-block; border-bottom: dashed 1px #666;}
.model .spec .table .info p.text:nth-child(even)  { width: 40%;}
.model .spec .table .info p.text:nth-child(odd)  { width: 60%;}


/***店舗情報***/
#shop ul li { width: 100%; margin: 0; padding: 0; display: inline-block; vertical-align: middle;}
    @media(min-width:768px){
        #shop ul li { width: 50%;}
    }
#shop ul li img { width: 100%; padding: 2.0rem;}

#shop h3 {  width: 100%; color: #FFF; font-size: 1.6rem; text-align: center; }
#shop h3 span {  font-size: 1.0rem; }
#shop ul li .info li { width: 100%; margin: 0; display: inline-block; padding: 0; border-bottom: dashed 1px #FFF; margin-bottom: 1.5rem; padding-bottom: 0.25rem;}
#shop ul li .info li p { font-size: 1.2rem;}
#shop ul li .info li span { font-size: 0.8rem;}
#shop ul li .info li p span[class^="icon-"]  { font-size: 2.0rem; display: inline-block; vertical-align: middle; margin-right: 0.5rem;} 

#shop  a { transition: 0.8s; }
#shop  a:hover { text-decoration: none; color: #FFAE00;}
    

/*** フッター ***/
.footer { background-color: rgba(0,0,0,0.5); width: 100%; margin: 0; padding: 2.0rem 0 1.0rem 0; text-align: center; font-size: 0; color: #FFF;}
.footer span { font-size: 4.5rem;}
.footer .copy { font-size: 0.6rem; margin-top: 0.25rem;}

/***モーダルコンテンツ***/
h2.title { font-size: 2.0rem; text-align: center; margin-bottom: 1.0rem;}
p.txt { font-size: 0.9rem; font-weight: 100;}
.workshop { display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0;}
.workshop li { width: 50%; margin: 0; padding: 0.25rem;}
.workshop li img { width: 100%;}
	@media(min-width:768px){
		.workshop li { width: 20%;}
	}