@charset "UTF-8";
@import "reset5.css";

body { color:#221815; line-height:1;  padding: 0; position: relative; min-height: 100%; overflow-x:hidden; background: #fff; -webkit-text-size-adjust: 100%; font-family: LynotypeUnivers, Univers, "Helvetica Neue", Helvetica, Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", sans-serif; }
html {  min-height: 100%; }

* html body { font-family: LynotypeUnivers, Univers, "Helvetica Neue", Helvetica, Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", sans-serif;  }
*:first-child+html body { font-family: LynotypeUnivers, Univers, "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", sans-serif; }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 12px default setting */
body { font-size:13px; line-height: 2.0; letter-spacing: 0.2em }
*:first-child+html body { font-size:77%;}
* html body { font-size:77%;}

body p { letter-spacing: 0.12em }

/* !clearfix */
hr { display: none; }

.cfix { zoom:1; }
.cfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
	font-style:italic
}

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}


img { vertical-align:bottom; }


/* margin-bottom
=========================================*/
.mb0 { margin-bottom:0 !important; }
.mb3 { margin-bottom:3px !important; }
.mb4 { margin-bottom:4px !important; }
.mb5 { margin-bottom:5px !important; }
.mb7 { margin-bottom:7px !important; }
.mb10 { margin-bottom:10px !important; }
.mb12 { margin-bottom:12px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb35 { margin-bottom:35px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }


/* margin-top
=========================================*/
.mt0 { margin-top:0 !important; }
.mt3 { margin-top:3px !important; }
.mt4 { margin-top:4px !important; }
.mt5 { margin-top:5px !important; }
.mt7 { margin-top:7px !important; }
.mt10 { margin-top:10px !important; }
.mt12 { margin-top:12px !important; }
.mt15 { margin-top:15px !important; }
.mt20 { margin-top:20px !important; }
.mt25 { margin-top:25px !important; }
.mt30 { margin-top:30px !important; }
.mt35 { margin-top:35px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }

.mr5 { margin-right:5px !important; }
.mr10 { margin-right:10px !important; }


/* padding-top
=========================================*/
.pt0 { padding-top:0 !important; }
.pt3 { padding-top:3px !important; }
.pt4 { padding-top:4px !important; }
.pt5 { padding-top:5px !important; }
.pt7 { padding-top:7px !important; }
.pt10 { padding-top:10px !important; }
.pt12 { padding-top:12px !important; }
.pt15 { padding-top:15px !important; }
.pt20 { padding-top:20px !important; }
.pt25 { padding-top:25px !important; }
.pt30 { padding-top:30px !important; }
.pt35 { padding-top:35px !important; }
.pt40 { padding-top:40px !important; }
.pt50 { padding-top:50px !important; }
.pt60 { padding-top:60px !important; }



.tx9 { font-size: 9px }
.tx10 { font-size: 10px }
.tx11 { font-size: 11px }
.tx12 { font-size: 12px }
.tx13 { font-size: 13px }
.tx14 { font-size: 14px }
.tx15 { font-size: 15px }
.tx16 { font-size: 16px }
.tx18 { font-size: 18px }
.tx20 { font-size: 20px }
.tx24 { font-size: 24px }

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }


/* !Links */
a:link { color: #221815; text-decoration: none }
a:visited { color: #221815; text-decoration: none }
a:hover { color: #666666; text-decoration: underline }
a:active { color: #221815; text-decoration: none }


html {  }
body { -ms-touch-action: none; }
#wrapper { width: 100%; text-align: center; }

#main { position: relative; background: #000; }
#main h1 { position: absolute; left: 50%; top: 7.2%; margin-left: -127px }
#main h2 { position: absolute; width: 100%; left: 0; bottom: 30px; text-align: center; color: #fff; letter-spacing: 0.1em; font-size: 15px }
#main .btn_view { position: absolute; right: 0; bottom: 70px; }

#navigation { width: 100%; background: #fff; z-index: 10000; border-bottom: solid 1px #e7e7e7; position: relative; overflow: hidden }
#navigation li { width: 33%; float: left;}
#navigation li a { padding: 40px 0; display: block; line-height: 1 }
#navigation .logo { position: absolute; left: -300px; top: 18px; }

#intro .grey { background-color: #f2f2f2; padding: 80px 0 60px; }
#intro .grey h2 { margin-bottom: 40px }
#intro .grey h3 { margin-bottom: 32px; font-size: 16px }
#intro p.read { padding: 80px 0; border-bottom: solid 1px #e7e7e7 }

.products_nav li { float: left; width:20%; background-color: #e7e7e7; border-bottom: solid 2px #c7c7c7; }
.products_nav li.cur { background-color: #333 }
.products_nav li.cur a:link, .products_nav li.cur a:visited { color: #fff }
.products_nav li a { padding: 20px 0; border-right: solid 1px #d7d7d7; font-size: 18px; display: block }

#col01 { padding: 120px 0 130px }
#col01 h2 { margin: 0 0 40px }
#col01 .box { position:relative; }
#col02 { padding: 0 0 130px }
#col02 h2 { margin: 0 0 40px }
#col03 { padding: 0 0 130px }
#col03 h2 { margin: 0 0 40px }
#col04 { padding: 0 0 100px }
#col04 h2 { margin: 0 0 40px }
#col04 .box { position: relative }
#col04 p.spec { text-align: left; padding: 40px 80px 0; }
#col04 p.price { position:absolute; top:40px; left:50%; font-size:14px; }

#sec01 h3 { font-size:24px; margin:0 0 40px 0; }
#sec01 .detail { margin: 0 }
#sec01 .detail .l { width: 50%; float: left; }
#sec01 .detail .r { width: 50%; float: right; }

.btn { width: 50%; margin: 0 auto; }
.btn a { background:#fff; border: solid 4px #000; font-size:16px; font-weight: bold; padding:12px 0; cursor:pointer; display: block }
.btn a:hover { background:#000; color: #fff  }

.btn02 { width: 100%; margin: 80px auto 150px; }
.btn02 a { background:#000; border: solid 4px #000; font-size:16px; font-weight: bold; padding:40px 0; cursor:pointer; display: block }

.slider {}
.slider .main { position: relative }
.slider .main img { position: absolute; left: 0; top: 0; display: none }
.slider .thumbs { width: 364px; margin: 40px auto }
.slider .thumbs li { float: left; border: solid 1px #e7e7e7; margin-left: -1px; cursor: pointer; position: relative }
.slider .thumbs li span { position: absolute; left: 0; top: 0; width: 116px; height: 46px; border: solid 2px #fff }
.slider .thumbs li.on span { border: solid 2px #b7b7b7 }

#stores { padding: 0 0 80px; border-top: solid 1px #e7e7e7; }
#stores h2 { padding: 80px 0 0; }
#stores h3 { padding: 40px 0 0; font-size: 15px }
#stores ul { padding: 40px 40px 0 }
#stores ul li { float: left; width: 50%; text-align: left; padding: 20px 0 }
#stores ul li .inner { padding: 0 40px }
#stores .gloss { margin: 60px 0 40px 0; }
#stores .gloss h4 { font-size:14px; margin: 0 0 30px 0; }
#stores ul li .inner h4 { font-size: 14px; }
#stores ul li .inner p { margin-top: 0px !important; }

/* inquiry */
#inquiry { border-top: solid 1px #e7e7e7; padding:0 0 240px 0; }
#inquiry .inner { width:640px; margin:0 auto; }
#inquiry h2 { padding:80px 0 0;}
#inquiry ul { margin: 40px 0 0 0; }
#inquiry li p {  text-align:left; }
#inquiry.form-box01 { border:0; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; padding: 0 10px border:1px solid #cdcac8; width:98%; height:40px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#inquiry textarea { border:0; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; border:1px solid #cdcac8; width:98%; height:110px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding:10px 0; }


/* mailform 
.text-success { padding: 40px; font-size: 16px; font-weight: bold }
.text-danger { padding: 40px; font-size: 16px; color: #C00; font-weight: bold }
#button_default, .MyMailForm_btn { background:#fff; border: solid 4px #000; font-size:16px; padding:15px 0; cursor:pointer; width:100%; margin: 0 }
#button_default:hover, .MyMailForm_btn:hover { background:#000; color: #fff  }*/


#special { margin: 0 auto 80px }

#footer { background-color: #000; padding: 40px 0; color: #fff }

#gotop { position: fixed; right: 0; bottom: 30px; width: 60px; height: 60px; overflow: hidden; z-index: 100 }
#gotop a { display: block; position: relative; width: 60px; height: 60px; cursor: pointer }
#gotop a img { position: absolute; left: 50%; bottom: -10px; margin-left: -2px }

span.nw { font-weight: normal }

#lay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/grey90.png); display: none; z-index: 10001 }
#lay .box { position: absolute; left: 50%; top: 50%; width:50%; padding: 2%; background-color: #fff; text-align: center; margin: -140px 0 0 -27%; }
#lay .box .btn { width: 100% }
#lay .box .close { margin: 40px 0 0 }

#view { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/grey90.png); display: none; z-index: 10001 }
#view .box { /*position: absolute; left: 10%; top: 10%; width:80%; height:80%; background-color: #fff; text-align: center;*/ position: relative}
#view .close { position: absolute; left: 0; bottom: 5%; width: 100%; text-align: center; z-index: 1000 }

img.no { opacity: 0.3 }


#interview #intro .grey { background-color: #f2f2f2; padding: 80px 0 60px }
#interview #intro .grey h2 { margin-bottom: 40px }
#interview #intro .grey h3 { margin-bottom: 32px; font-size: 16px }
#interview #intro p.name { padding: 20px 0 40px 0; font-weight:bold; text-align:center; font-size:16px; }
#interview #intro .ph { width:900px; margin:0 auto; }
#interview #intro p { width:900px; margin:0 auto; text-align:left; }
#interview #intro .btn { width: 900px; margin: 50px auto 0; }
#interview #intro .btn a { background:#f2f2f2;  border: solid 4px #000; font-size:16px; font-weight: bold; padding:12px 0; cursor:pointer; display: block }
#interview #intro .btn a:hover { background:#000; color: #fff  }


#interview #sec02 { width:900px; margin:0 auto; padding:70px 0 120px 0; }
#interview #sec02 p { text-align:left; padding:0 0 40px 0; }
#interview #sec02 .ph { padding:10px 0 50px 0; }
#interview .btn { width: 100%; margin: 20px auto 0; }
#interview .btn a { background:#fff;  border: solid 4px #000; font-size:16px; font-weight: bold; padding:12px 0; cursor:pointer; display: block }
#interview .btn a:hover { background:#000; color: #fff  }
#interview .btn02 { width: 100%; margin: 20px auto 0; }
#interview .btn02 a { background:#333; border:none; font-size:16px; font-weight: bold; padding:20px 0; cursor:pointer; display: block; color:#fff; }


@media screen and (max-width: 780px) {
	
body { font-size:13px; line-height: 2.0; -webkit-text-size-adjust: none; }

a {color:#fff; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; }

#main { position: relative; padding: 60px 0 10px }
#main h1 { position: absolute; left: 50%; top: 7.2%; margin-left: -90px }
#main h1 img { width: 180px }
#main h2 { position: absolute; width: 100%; left: 0; bottom: 10px; text-align: center; color: #fff; letter-spacing: 0.1em; font-size: 13px }
#main .btn_view { position: absolute; right: 0; bottom: 20px; display: none } 
#main .btn_view img { width: 80px }

#navigation { width: 100%; background: #fff; z-index: 10000 position: relative; overflow: hidden }
#navigation li { width: auto; float: left; border-bottom: solid 1px #e7e7e7; padding: 0 6px }
#navigation li a { padding: 20px 0; display: block; line-height: 1 }
#navigation li img { height: 9px }
#navigation .logo { display: none }

#intro .grey { background-color: #f2f2f2; padding: 60px 0 }
#intro .grey h2 { margin-bottom: 40px }
#intro .grey h2 img { width: 90%; height: auto}
#intro .grey h3 { margin-bottom: 32px; font-size: 16px }
#intro .grey p img { width: 70%; height: auto }
#intro p { padding:0 10px; text-align: left }

.products_nav ul { background-color: #e7e7e7; }
.products_nav li { float: left; width: 33.333%; border-bottom: none; }
.products_nav li.cur { background-color: #333 }
.products_nav li a { padding: 15px 0; border-bottom: solid 1px #d7d7d7; font-size: 15px; display: block; border-right:solid 1px #d7d7d7; }

#col01 { padding: 80px 0 40px }
#col01 h2 { margin: 0 0 30px }
#col02 { padding: 40px 0; }
#col02 h2 { margin: 0 0 30px }
#col03 { padding: 40px 0; }
#col03 h2 { margin: 0 0 30px }
#col04 { padding: 40px 0; }
#col04 h2 { margin: 0 0 30px }
#col04 p.spec { text-align: left; padding: 20px 20px 0 }
#col04 p.price { position:static; text-align: left; padding:20px 20px 0; }


#sec01 h3 { font-size:19px; margin:0 0 20px 0; }
#sec01 .detail { margin: 0 }
#sec01 .detail .l { width: 100%; float: none; }
#sec01 .detail .r { width: 100%; float: none; }


.btn { width: 90%; margin: 30px auto 0 }
.btn a { font-size:14px; font-weight: bold; padding:12px 0; }


.btn02 { width: 100%; margin: 40px auto 60px; }
.btn02 a { padding:20px 0; }
.btn02 img { height:25px; }
	
.slider {}
.slider .main { position: relative }
.slider .main img { position: absolute; left: 0; top: 0; display: none }
.slider .thumbs { width: 244px; margin: 40px auto }
.slider .thumbs li { float: left; border: solid 1px #e7e7e7; margin-left: -1px; cursor: pointer; position: relative }
.slider .thumbs li img { width: 80px }
.slider .thumbs li span { position: absolute; left: 0; top: 0; width: 76px; height: 30px; border: solid 2px #fff }
.slider .thumbs li.on span { border: solid 2px #b7b7b7 }


#stores { padding: 0 0 80px; border-top: solid 1px #e7e7e7; }
#stores h2 { padding: 60px 0 0; }
#stores h3 { padding: 30px 0 0; font-size: 15px }
#stores ul { padding: 20px 0 0 }
#stores ul li { float: left; width: 100%; text-align: left; padding: 20px 0 }
#stores ul li .inner { padding: 0 30px }
#stores ul li h4 { font-size: 14px }
#stores .gloss { margin:60px 30px 40px 30px; text-align:left; }
#stores ul li h4 { font-size: 14px; margin: 0 !important }


/* inquiry */
#inquiry { background:url(../img/bg02.png) repeat; padding:60px 0; }
#inquiry .inner { width:auto; margin:0 10px; }
#inquiry h2 { padding:0;}
#inquiry h2 img { height: 20px }
#inquiry ul { margin: 40px 10px 0 10px;  }
#inquiry li p { }
#inquiry .form-box01 {  width:96%; padding:0 2%; float:none; }
#inquiry textarea {  width:100%; height:180px ; float:none; }
#inquiry .form-btn { margin: 0; }


#special { margin: 0 auto 60px }

#footer { background-color: #000; padding: 40px 0; color: #fff; font-size: 12px }

#gotop { position: fixed; right: -10px; bottom: 20px; width: 60px; height: 60px; overflow: hidden; z-index: 100 }
#gotop a { display: block; position: relative; width: 60px; height: 60px; cursor: pointer }
#gotop a img { position: absolute; left: 50%; bottom: -10px; margin-left: -2px }

.w1 { width: 90%; height: auto }
.w2 { width: 70%; height: auto }
.w3 { width: 40%; height: auto }


#interview #intro .grey { padding: 50px 0 40px }
#interview #intro p.name { padding: 20px 0 20px 0; font-size:14px; }
#interview #intro .ph { width:auto; margin:0 10px; }
#interview #intro p { width:auto; }
#interview #intro .btn { width: auto; margin:50px 10px 0; }
#interview #intro .btn a { font-size:14px; }
#interview #sec02 { width:auto; margin:0 10px; padding:40px 0 80px 0; }
#interview .btn a { font-size:14px; }
#interview .btn02 a { font-size:14px; }


}


@media screen and (max-width: 320px) {
	#navigation li { padding: 0 7px }
	#navigation li img { height: 7px }
}