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

.sp{display:none;}

#sb-site{width:100%;}

#header{height:200px; position:relative;}
#header h1{text-align:center; padding:30px 0 0 0;}
#header .btn{width:40px; height:40px; position:absolute; top:80px; right:5%;}
#header .sb-toggle-right{cursor:pointer; padding:0; width:40px; height:40px; background:url(../img/public/btn_open.svg) no-repeat center center;}
#header .sb-toggle-right.on{background:url(../img/public/btn_close.svg) no-repeat center center;}
#header .sb-toggle-right.about{background:url(../img/page/about/btn_open.svg) no-repeat center center;}
#header .sb-toggle-right.about.on{background:url(../img/page/about/btn_close.svg) no-repeat center center;}
#header .logo10th{width: 105px; height: 140px; position: absolute; left: 7%; top: 0; padding: 0; cursor: pointer;}

#indexFeatureWrap{position:relative; width:550%; margin:0 0 25px 0; _zoom:1; overflow:hidden;}
#indexFeatureWrap div{position:relative; width:10%; top:0; left:0; float:left;}
#indexFeatureWrap div p:nth-child(1){margin:0 0 10px 0; padding:0; overflow:hidden;}
#indexFeatureWrap div p:nth-child(1) img{width:100%!important; height:auto!important;}
#indexFeatureWrap div p:nth-child(1) img.on{filter: gray; -webkit-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");}
#indexFeatureWrap div p:nth-child(2){position:absolute; top:0; left:0; width:100%; padding:0;}
#indexFeatureWrap div p:nth-child(3){padding:0 0 25px; text-align:left;}

#indexLeadWrap{padding:0 0 40px 7%; text-align:left; _zoom:1; overflow:hidden;}
/*#indexLeadWrap p{float:left;}*/
#indexLeadBlock{float:left; background:url(../img/index/lead_bg_pc.svg) no-repeat right bottom; background-size:60px 120px; padding:0 55px 40px 0; width:70%; max-width:640px;}
#indexLeadBlock .leadEN{font-family: 'Quattrocento Sans', sans-serif; font-size:21pt; line-height:1.5; font-weight:400; letter-spacing:0; padding:0 0 15px 0;}
#indexLeadBlock .leadJP{font-family: 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif; font-size:9pt; letter-spacing:0; padding:0; font-weight:normal;}
#indexLeadWrap p.more{float:left;}

#archiveWrap{padding:0 10px 25px; _zoom:1; overflow:hidden;}
#archiveWrap .block{width:calc(33.33% - 20px); margin:0 10px; float:left; position:relative; overflow:hidden;}
#archiveWrap .block p:nth-child(1){margin:0 0 10px 0; padding:0; overflow:hidden;}
#archiveWrap .block p:nth-child(1) img{width:100%!important; height:auto!important;}
#archiveWrap .block p:nth-child(1) img.on{filter: gray; -webkit-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");}
#archiveWrap .block p:nth-child(2){position:absolute; top:0; left:0; width:100%; padding:0;}
#archiveWrap .block p:nth-child(3){margin:0 0 25px; padding:0; height:15px; overflow:hidden; text-align:left;}
#archiveWrap.single{width:calc(66.66% - 20px); float:right; padding:5px 10px 0 10px;}
#archiveWrap.single .block{width:calc(50% - 20px);}

#singleImgWrap{height:500px; margin:0 0 30px 0; position:relative;}
#singleImgWrap .btnL{position:absolute; width:50px; height:50px; left:20px; top:225px;}
#singleImgWrap .btnR{position:absolute; width:50px; height:50px; right:20px; top:225px;}
#singleImgBelt{width:1000%; height:500px; overflow:hidden;}
#singleImgBelt p{float:left; padding:0 1px 0 0;}

#singleMiddleWrap{_zoom:1; overflow:hidden; padding:0 0 50px 0;}
#singleMiddleTitle{float:left; text-align:right; width:calc(33.33% - 20px); margin:0 20px 0 0;}
#singleMiddleWrap a{text-decoration:underline;}
#singleMiddleWrap a:hover{text-decoration:underline; color:#555;}
#singleMiddleWrap p{padding:0 0 20px 0!important;}
#singleMiddleWrap h2{padding:0 0 20px 0!important;}
#singleMiddleWrap .singleEN{width:calc(33.33% - 30px); margin:0 10px 0 20px; float:left; text-align:left;}
#singleMiddleWrap .singleJP{width:calc(33.33% - 30px); margin:0 20px 0 10px; float:left; text-align:left;}

#singleRelatedWrap{_zoom:1; overflow:hidden;}
#singleRelatedWrap h3{font-size:12pt; font-weight:500; float:left; text-align:right; width:calc(33.33% - 20px); margin:0 20px 0 0;}
#singleRelatedWrap h3 span{border-bottom:2px solid #222;}

#content h2{padding:0 0 45px 0; font-size:14pt; font-weight:500;}
#content h2 span.sub{font-size:8.5pt; padding:0 20px 0 0; margin:0 15px 0 0; background:url(../img/page/mark_h2.svg) no-repeat right center; background-size:7px 10px;}
#content h2 span.main{font-size:14pt; border-bottom:2px solid #222;}
#content h2.about{color:#FFF; padding:25px 0 35px calc(20% - 60px); text-align:left;}
#content h2.about span{font-size:14pt; border-bottom:2px solid #FFF;}

#aboutPhotoWrap{text-align:right; position:relative; padding:0 0 35px 0;}
#aboutPhotoWrap p{padding:0;}
#aboutPhotoWrap p.img img{width:80%;}
#aboutPhotoWrap p.name{width:100%; position:absolute; left:0; top:0; text-align:left;}

#aboutContentBlock{text-align:left; color:#FFF; padding:0 0 35px 0; _zoom:1; overflow:hidden;}
#aboutContentBlock a{color:#FFF;}
#aboutContentBlock #en{float:left; width:calc(40% - 40px); padding:0 40px 0 20%;}
#aboutContentBlock #jp{float:left; width:calc(40% - 40px); padding:0 40px 0 0;}
#aboutContentBlock #en h3{font-size:11pt; padding:0 0 25px 0; font-weight:500;}
#aboutContentBlock #jp h3{font-size:11pt; padding:0 0 25px 0; font-family: 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif; letter-spacing:0; font-weight:normal;}
#aboutContentBlock dl{_zoom:1; overflow:hidden;}
#aboutContentBlock dl dt{width:50px; float:left; clear:left;} 
#aboutContentBlock dl dd{width:calc(100% - 50px); float:left;}

#laboImgBlock{padding:0 0 35px 0; _zoom:1; overflow:hidden;}
#laboImgBlock p{overflow:hidden; width:50%; padding:0; float:left;}

#laboContentBlock{text-align:left; padding:0 0 35px 0; _zoom:1; overflow:hidden;}
/*#laboContentBlock a{color:#FFF;}*/
#laboContentBlock p{padding:0 0 25px 0!important;}
#laboContentBlock #en{float:left; width:calc(40% - 40px); padding:0 40px 0 20%;}
#laboContentBlock #jp{float:left; width:calc(40% - 40px); padding:0 40px 0 0;}

#en p, #en dl, #confirmBlock .en{font-family:Helvetica, Arial, sans-serif; letter-spacing:0; font-size:9pt; padding:0; font-weight:normal;}
#jp p, #jp dl, #confirmBlock .jp{font-family: 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif; letter-spacing:0; font-size:9pt; padding:0; font-weight:normal;}

#newsWrap p.en{font-family:Helvetica, Arial, sans-serif; letter-spacing:0; font-size:9pt; line-height:1.6; padding:0 0 15px; font-weight:normal;}
#newsWrap p.jp{font-family: 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif; letter-spacing:0; font-size:9pt; line-height:1.7; padding:0 0 45px; font-weight:normal;}
#newsWrap p.link a{text-decoration: underline;}
#newsWrap p.link a:hover{color: #555;}
#newsList1, #newsList2{width:640px; margin:0 auto 40px;}
#newsList1 div, #newsList2 div{_zoom:1; overflow:hidden;}
#newsList1 p, #newsList2 p{font-size:11pt; text-align:left; float:left; padding:0 0 5px 0;}
#newsList1 p a, #newsList2 p a{text-decoration:underline;}
#newsList1 p a:hover, #newsList2 p a:hover{color:#555;}
#newsList1 p:nth-child(1), #newsList2 p:nth-child(1){width:80px;}
#newsList1 p:nth-child(2){width:290px;}
#newsList2 p:nth-child(2){width:480px;}
#newsList1 p:nth-child(3){width:190px;}
#newsList1 p:nth-child(4), #newsList2 p:nth-child(3){width:40px;}
#newsList1 p:nth-child(5), #newsList2 p:nth-child(4){width:40px;}
#newsList1 p:nth-child(4) span, #newsList1 p:nth-child(5) span, #newsList2 p:nth-child(3) span, #newsList2 p:nth-child(4) span{color:#DDD;}

#contactWrap{_zoom:1; overflow:hidden; padding:60px 0 0 0;}
#contactLeft{float:left; width:calc(40% - 80px); padding:0 0 0 40px; text-align:left;}
#contactLeft #en p, #contactLeft #jp p{padding:0 0 25px 0;}
#contactRight{float:right; width:calc(60% - 40px); padding:0 40px 0 0; text-align:left;}
#contactRight table{width:100%; border-top:2px solid #222; border-collapse:collapse; margin:0 0 40px 0;}
#contactRight table td{border-bottom:1px solid #222; padding:5px 0;}
#contactRight table td.td1{width:50%;}
#contactRight table td.td2{width:calc(50% - 10px); padding-left:10px; border-left:1px solid #222;}
#contactRight table td .txt{font-size:14pt; font-family: 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif; letter-spacing:0; width:100%; padding:5px 0; border:none;}
#contactRight table td .msg{font-size:14pt; font-family: 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif; letter-spacing:0; width:100%; height:100px; padding:5px 0; border:none;}

#confirmBlock{width:600px; min-height:300px; margin:0 auto;}
#confirmBlock table{width:100%; border-collapse:collapse; margin:20px 0 35px 0;}
#confirmBlock table th, #confirmBlock table td{text-align:left; vertical-align:middle; border:1px solid #DDD; padding:10px; font-size:10pt;}
#confirmBlock table th{width:20%;}
#confirmBlock table td{font-family:Helvetica, Arial, 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif;}
#confirmBlock #myreset{padding:7px 30px 7px; color:#000; background:#EEE; border:none; font-size:11pt;}
#confirmBlock #myreset:hover{cursor:pointer; background:#CCC;}
#confirmBlock #submit{padding:7px 30px 7px; color:#000; background:#faf082; border:none; font-size:11pt; margin:0 0 0 20px;}
#confirmBlock #submit:hover{cursor:pointer; background:#f0dc64;}

.wtn_copyright{display:none;}
#map_canvas{width:100%; height:490px; background:#222;}
.contactBtn{text-indent: -9999px; border:none; cursor:pointer; float:right; padding:0 0 20px 0; width:120px; height:30px; background:url(/img/page/contact/btn.svg) no-repeat center center; background-size:120px 30px;}

#loadBg{position:fixed; left:0; top:0; width:100%; height:100%; background:url(../img/public/load.gif) no-repeat center center #FFF; background-size:24px 24px; z-index:10;}
body.about #loadBg{background:url(../img/page/about/load.gif) no-repeat center center #b0aeaa; background-size:24px 24px;}

.btnMore a{ width:66%; height:60px; padding:0; margin:0 auto 5px; border-radius:5px; box-shadow:rgba(0, 0, 0, 0.0980392) 0px 0px 4px 2px; -webkit-box-shadow:rgba(0, 0, 0, 0.0980392) 0px 0px 4px 2px; -moz-box-shadow:rgba(0, 0, 0, 0.0980392) 0px 0px 4px 2px; display:block;}

#footer{padding:80px 0 10px 0;}
#footer p{padding:0 0 70px 0; font-size:7pt;}
#footer p.about{color:#FFF;}

.sb-slidebar{background:#3e3c38; width:300px; padding:0;}
.sb-slidebar #inner1{padding:65px 45px 15px;}
.sb-slidebar #inner1 p{font-size:10.5pt; padding:0; margin:0 0 25px 0; text-align:left; font-weight:500;}
.sb-slidebar #inner1 p a{color:#FFF; padding:0 0 5px 0; border-bottom:1px solid #FFF; width:100%; display:block;}
.sb-slidebar #inner1 p a:hover{text-decoration:none; color:#CCC; border-bottom-color:#CCC;}
.sb-slidebar #inner1 p.active a{color:#ffeb50; border-bottom-color:#ffeb50;}
.sb-slidebar #inner1 ul{padding:0 10px 30px;}
.sb-slidebar #inner1 ul li{text-align:left; font-size:9pt; line-height:1.8; font-weight:500;}
.sb-slidebar #inner1 ul li a{color:#FFF;}
.sb-slidebar #inner1 ul li a:hover{text-decoration:none; color:#CCC;}
.sb-slidebar #inner1 ul li.active a{color:#ffeb50;}
.sb-slidebar #inner2{padding:0 45px 90px;}
.sb-slidebar #inner2 p{width:30px; height:30px; padding:0 10px 0 0; float:left;}