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

body { color:#1c1c1c; 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:14px; line-height: 2.0; letter-spacing: 0.16em }
*:first-child+html body { font-size:77%;}
* html body { font-size:77%;}

body p { font-weight: 300; letter-spacing: 0.16em }

/* !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: middle }


/* 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 {  }
#wrapper { width: 100%; text-align: center; }

#header { background: #000000 }
#header .brands { border-bottom: solid 5px #000 }
#header .brands li { float: left; width: 50% }
#header .brands li.cur { background: #2c2c2c }
#header .brands li a { padding: 20px 0; display: block }
.locnav { width: 100%; background: #f7f7f7; border-bottom: solid 1px #c7ccd3; z-index: 1000 }
.locnav li { width: 20%; float: left; font-weight: 500; line-height: 1 }
.locnav li a { display: block; padding: 18px 0 }
.locnav li.lang a { display: inline-block }

#main { position: relative; border-bottom: solid 30px #afafaf }
#main h1 { padding: 112px 0 0 10%; position: relative; text-align: left }
#main h1 span { position: absolute; left: 10%; bottom: 37px; width: 90%; height: 1px; background: #f6f6f6 }
#main .read { position: absolute; left: 0; bottom: 0; padding: 80px 10%; text-align: left; }
#main .read h2 { margin-bottom: 20px }

.sec {}
.sec h3 { margin-bottom: 20px; font-size: 20px; font-weight: 400 }
.sec .bar { margin-bottom: 20px }

#sec01 {  }
#sec01 .hinge { padding: 80px 0; width: 75%; margin-left: 25%; border-top: solid 15px #1c1c1c }
#sec01 .hinge .cont { padding: 0 33.3% 0 0; text-align: left; position: relative }
#sec01 .hinge .cont h2 { margin-bottom: 80px }
#sec01 .structure { padding: 80px 0 0; width: 60%; margin-left: 40%; margin-top: -20% }
#sec01 .structure .cont { padding: 0; text-align: left; position: relative }
#sec01 .structure .cont p { padding-right: 9.5% }
	
#sec02 { margin-top: 120px }
#sec02 .material {  }
#sec02 .material .ph { float: right; width: 40%; margin-top: 80px }
#sec02 .material .cont { float: left; padding: 0; text-align: left; width: 51.5%; margin-left: 8.5% }
#sec02 .nucrel { margin-top: 120px }
#sec02 .nucrel .ph { float: left; width: 51.5%; margin-left: 8.5% }
#sec02 .nucrel .cont { float: right; padding: 0; text-align: left; width: 33.33%; }
#sec02 .nucrel .cont p { padding-right: 10% }

#lineup { padding: 120px 0 0; text-align: center }
#lineup h2 { font-size: 28px; margin-bottom: 50px; font-weight: 500 }
#lineup .col { margin-bottom: 70px }
p.close { margin-top: 80px; font-size: 16px; font-weight: 500 }

#collection { padding: 80px 0 0 }
#collection h2 { font-size: 24px; font-weight: 500 }
#collection ul { padding: 0 40px }
#collection li { float: left; width: 33.33%; }
#collection li .col { padding: 40px }
#collection li .col h3 { font-size: 16px; }
#collection li .col img { margin: 20px 0 }
#collection li .col p { font-size: 12px; }

#brand { padding: 80px 0 0; text-align: left; }
#brand .ph { width: 80%; z-index: 0; position: relative }
#brand .cont { padding: 0 8.5%; text-align: left; margin-top: -30%; z-index: 10; position: relative }
#brand .cont h2 { margin-bottom: 50px }
#brand .cont .fltL { width: 45%; padding-right: 5%; }
#brand .cont .fltL p { padding: 40px 0; border-top: solid 30px #1c1c1c; font-size: 15px }
#brand .cont .fltR { width: 45%; padding-left: 5% }
#brand .cont .fltR p { margin-top: 80px; padding: 40px 0; border-bottom: solid 30px #b0b0b0; font-size: 15px }

#technique { padding: 120px 0 0 }
#technique .cont { width: 50%; padding: 0 0 40px; text-align: left; margin: 0 auto; border-bottom: solid 30px #1c1c1c; }
#technique .cont h2 { margin-bottom: 20px; font-size: 20px; font-weight: 400 }
#technique .cont p { margin-bottom: 40px }

#silmo { padding: 120px 0 0 }
#silmo .cont { padding: 0; text-align: center; margin: 0 auto }
#silmo .cont h2 { margin-bottom: 20px; font-size: 24px }
#silmo .cont p {  }


/* inquiry */
#inquiry { margin-top: 120px; padding: 40px 0 80px; background: #eeeeee }
#inquiry .inner { width: 50%; 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:#676c73; font-size:16px; padding:15px 0; cursor:pointer; width:50%; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: #fff; margin: 0 auto }
#button_default:hover, .MyMailForm_btn:hover { background:#000; color: #fff  }


#footer { padding: 60px 0 120px; }

#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 }

.btn { margin: 80px auto 0; width: 50% }
.btn a { display: block; padding: 20px; text-align: center; border: solid 2px #e7e7e7 }
.btn a:hover { background: #f7f7f7 }

span.nw { font-weight: normal }


#lay { position: fixed; width: 100%; height: 0; left: 0; bottom: 0; background: #fff; overflow-y: scroll !important; text-align: center; z-index: 100; display: none; }
#lay .lay_inner { width: 100%; padding: 0 0 120px; opacity: 0 }
#lay .lay_inner #lineup { padding-top: 80px }
#lay .lay_inner #lineup .col p { margin-top: 10px }
#lay .close_btn { position: fixed; right: 40px; top: 20px; display: none; cursor: pointer }

p.lang { margin: 0 0 40px; font-size: 15px }


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

h2 { font-size:20px; font-weight: 500 }

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

#header { background: #000000 }
#header .brands { border-bottom: solid 5px #000 }
#header .brands li { float: left; width: 50% }
#header .brands li.cur { background: #2c2c2c }
#header .brands li a { padding: 10px 0; display: block }
#header .brands li a img { height: 8px }
.locnav { width: 100%; background: #f7f7f7; border-bottom: solid 1px #c7ccd3; z-index: 1000 }
.locnav li { width: 25%; float: left; font-weight: 500; line-height: 1; font-size: 10px; letter-spacing: 0.12em }
.locnav li a { display: block; padding: 12px 0 }
.locnav li.lang ( display: none )

#main { position: relative; border-bottom: solid 30px #afafaf }
#main h1 { padding: 40px 0 0 10%; position: relative; text-align: left }
#main h1 img { height: 50px }
#main h1 span { position: absolute; left: 10%; bottom: 25px; width: 90%; height: 1px; background: #f6f6f6 }
#main .read { position: relative; left: auto; bottom: auto; padding: 0 10% 40px; text-align: left; }
#main .read h2 { margin-bottom: 20px }

.sec {}
.sec h3 { margin-bottom: 20px; font-size: 20px; font-weight: 400 }
.sec .bar { margin-bottom: 20px }

#sec01 {  }
#sec01 .hinge { padding: 40px 0; width: 80%; margin-left: 20%; border-top: solid 15px #1c1c1c }
#sec01 .hinge .cont { padding: 0 15px 0 0; text-align: left; position: relative }
#sec01 .hinge .cont h2 { margin-bottom: 40px }
#sec01 .structure { padding: 40px 0 0; width: 80%; margin-left: 20%; margin-top: 0 }
#sec01 .structure .cont { padding: 0; text-align: left; position: relative }
#sec01 .structure .cont p { padding-right: 15px }
	
#sec02 { margin-top: 60px }
#sec02 .material {  }
#sec02 .material .ph { float: none; width: 80%; margin-top: 0 }
#sec02 .material .cont { float: none; padding: 0; text-align: left; width: 80%; margin-left: 10% }
#sec02 .nucrel { margin-top: 60px }
#sec02 .nucrel .ph { float: none; width: 100%; margin-left: 0 }
#sec02 .nucrel .cont { float: none; padding: 0; text-align: left; width: 80%; margin-left: 10% }
#sec02 .nucrel .cont p { padding-right: 0 }

#lineup { padding: 60px 0 0 }
#lineup h2 { font-size: 20px; margin-bottom: 50px; font-weight: 500 }
#lineup .col { margin-bottom: 40px }
#lineup .col img { width: 80% }
p.close { margin-top: 40px; }
	
#collection { padding: 40px 0 0 }
#collection h2 { font-size: 20px; }
#collection ul { padding: 0 10px }
#collection li { float: left; width: 50%; }
#collection li .col { padding: 10px 10px 20px }
#collection li .col h3 { font-size: 14px; }
#collection li .col img { margin: 20px 0 }
#collection li .col p { font-size: 10px; }

#brand { padding: 60px 0 0; text-align: left; }
#brand .ph { width: 100%; z-index: 0; position: relative }
#brand .cont { padding: 0 10%; text-align: left; margin-top: -20%; z-index: 10; position: relative }
#brand .cont h2 { margin-bottom: 30px }
#brand .cont .fltL { width: 100%; padding: 0; float: none !important }
#brand .cont .fltL p { padding: 30px 0; border-top: solid 30px #1c1c1c; font-size: 13px }
#brand .cont .fltR { width: 100%; padding: 0; float: none !important }
#brand .cont .fltR p { margin-top: 0; padding: 30px 0; border-bottom: solid 30px #b0b0b0; font-size: 13px }
	
#technique { padding: 60px 0 0 }
#technique .cont { width: auto; padding: 0 0 30px; text-align: left; margin: 0 10%; border-bottom: solid 30px #1c1c1c; }
#technique .cont h2 { margin-bottom: 20px; font-size: 16px; font-weight: 400 }
#technique .cont p { margin-bottom: 30px }

#silmo { padding: 60px 0 0 }
#silmo .cont { padding: 0; text-align: center; margin: 0 auto }
#silmo .cont h2 { margin-bottom: 20px; font-size: 18px; padding: 0 15px }
#silmo .cont p {  }


/* inquiry */
#inquiry { margin-top: 60px; padding: 20px 0 40px; background: #eeeeee }
#inquiry .inner { width:auto; margin:0 10px; }
#inquiry h2 { padding:0;}
#inquiry h3 img { height: 16px }
#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; }

/* 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:#676c73; font-size:16px; padding:10px 0; cursor:pointer; width:80%; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: #fff; margin: 0 auto }
#button_default:hover, .MyMailForm_btn:hover { background:#000; color: #fff  }

#footer { padding: 40px 0 80px; }

#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 }
	
.btn { margin: 40px auto 0; width: 90% }
	
#lay .lay_inner { width: 100%; padding: 0 0 60px; opacity: 0 }
#lay .lay_inner #lineup { padding-top: 40px }
#lay .close_btn { right: 20px; top: 10px; width: 40px; height: 40px }

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

}