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

/* COMMON SETTING */
a { transition:opacity 0.5s ease-in 0s, background 0.5s ease-in 0s, color 0.5s ease-in 0s;  text-decoration: none;}
img { width:auto; max-width:100%; height:auto; }
body { padding:80px 0 0 0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; }
p:last-child{ margin-bottom: 0 !important;}

/* PC HEADER */
#header { width:100%; padding: 0; box-sizing: border-box; margin: 0 auto; background-color: #e3d8d5; position: relative;}
/*20180403　上書き 1/4*/#header h1{ position: absolute; top:0; left: 0; width: 360px; padding: 0 1.5%; box-sizing: border-box; /*border-right: 1px solid #fff;*/ display: table; height: 63px; /*width: 24%;*/ text-align: center;}
#header h1 span{ display: table-cell; vertical-align: middle;}
#header h1 span img{ max-width: 300px; width: 100%;}
/*20180403　追加　1/2*/
.name_sns{ width: 100%; position: relative; height: 63px;border-bottom: 1px solid #fff;}
/*20180403　上書き（以下１１行） 2/4*/
#gNavi { width: 100%; padding: 0 10px 0 10px; box-sizing: border-box; }
#gNavi ul { display:block; width:100%;  /*max-width: 1200px;*/ padding: 0; box-sizing: border-box;  margin: 0 auto 0 0;}
#gNavi ul li { float:left; margin: 0 1%; position: relative; height: 63px; } 
/*20180426 上書き（以下li.goodsまで）*/#gNavi ul li.top{ max-width:7.2%; width:84px;}
#gNavi ul li.outline{ max-width:15.4%; width:173px;}
#gNavi ul li.highlight{ max-width:5.1%; width:60px;}
#gNavi ul li.news{ max-width:6%; width:66px;}
#gNavi ul li.exhibition{ max-width: 8.2%; width:98px;}
#gNavi ul li.event{ max-width:7.5%; width:89px;}
#gNavi ul li.focus{ max-width:6.5%; width:73px;}
#gNavi ul li.meikoi{ max-width:9.3%; width:109px;}
#gNavi ul li.guide{ max-width:6.5%; width:74px;}
/*end 20180403　上書き 2/4*/
/*20180403　追加 2/2*/#gNavi ul li.goods{ max-width:7.8%; width:94px;}
/*end 20180426 上書き*/

#gNavi ul li a{ text-decoration: none; display: inline-block;} 
#gNavi ul li a:before { opacity:0;  transition:opacity 0.5s linear 0s;}
#gNavi ul li img{ position: absolute; left: 50%; top: 50%;  -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
#gNavi ul li a:hover img,
#gNavi ul li a.active img { border-bottom: 3px solid #fff; padding: 8px 0 5px 0}
#gNavi ul li a:hover,
#gNavi ul li a.active{ height: 63px; }
#gNavi ul li a:hover:before,
#gNavi ul li a.active:before { opacity:1; }
#gNavi ul li a.comingSoon { opacity:0.5; pointer-events: none; }
/*20180403　上書き 3/4*/#sns { position: absolute; top: 0; right: 0; width: 182px; border-left: 1px solid #fff; height: 63px; }
#sns li{ height: 63px; float: left; display: inline-block; width: 30%; text-align: center; position: relative;}
#sns li img{ position: absolute; left: 50%; top: 50%;  -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
#sns a.comingSoon { opacity:0.5; pointer-events: none; }
#sns li.twitterBtn img  { width:18px;}
#sns li.facebookBtn img { width:9px;}
#sns li.languageBtn{ width:38%;  border-left: 1px solid #fff;}
#sns li.languageBtn img { width:17px;}
#sns a:hover { border-bottom: 3px solid #fff; }
.btn_list{ position: absolute; top:0; right: 192px; width: 160px; border-left: 1px solid #fff; height: 63px; padding: 6px 0 0 8px; box-sizing: border-box; }
/*20180417　東京お知らせ　1/2*/
.header_info{ position: absolute; top:6px; right: 360px; width: auto; height: 50px; font-weight: bold; background-color: #fff; padding: 16px 25px 0px; line-height: 22px; box-sizing: border-box;}
.header_info span{ font-size: 22px; box-sizing: border-box;}
/*end 20180417　東京お知らせ　1/2*/
/* SP HEADER for CONTENT PAGE */
#spHeaderContent { display:none; position:fixed; width:100%; top:0; left:0; z-index:99999999; overflow:visible; }
#spHeaderContent #spHeaderBox { padding:15.62% 0 0 0; position:relative; background:#e3d8d5; z-index:99999999; }
#spHeaderContent #spHeaderBox a.spMenu { background: url(../img/common/btn_spnavi_04.png) center center no-repeat; background-size:contain; position:absolute; display:block; width:25%; height:100%; top:0; right:0; text-indent:-9999px;border-left:#fff solid 1px;  }
#spHeaderContent #spHeaderBox h2 { display:block; position:absolute; width:65%; top:7%; left:5%; }
#spHeaderContent #spHeaderBox h2 a { display:block; position:relative; padding:7.2% 0 0 0;}
#spHeaderContent #spHeaderBox p a { display:block; position:relative; padding:6.15% 0 0 0;}
#spHeaderContent #spHeaderBox h2 img {  display:block; width:100%; height:auto; position:absolute; top:0; left:0; }
#spHeaderContent #spHeaderBox p img {  display:block; width:100%; height:100%; position:absolute; top:0; left:0; }
#spHeaderContent #spNavi { top:0; left:0; width:100%; height:0px; margin:0 0 0 0; overflow:hidden; position:fixed; transition:opacity 0.5s ease-in 0s; z-index:99999998; padding:0 0 0 0; box-sizing:border-box; opacity:0;background:hsla(0,0%,0%,0.40);  }
#spHeaderContent #spNavi.active { height:100%; padding:16.25% 0 0 0; opacity:1; }
#spHeaderContent #spNavi ul { box-sizing:border-box; padding:20px; height:100%;overflow:auto; }
#spHeaderContent #spNavi ul li { display:block; width:100%; float:none; margin-bottom: 2px; box-sizing:border-box; position:relative; z-index:99999999; }
#spHeaderContent #spNavi ul li a { display:block; font-size:5vw; text-align:center; background:#000; color:#fff; line-height:1.2em; padding:1em 0; font-weight:bold; text-decoration:none; }
#spHeaderContent #spNavi ul li a.active{ color: #000; background-color: #fff;}
#spHeaderContent #spNavi ul li a.comingSoon { color:hsla(0,0%,100%,0.30); pointer-events: none;}
#spHeaderContent #spNavi ul li a:hover { background-color: #f3cb8b; color: #000; }
#spHeaderContent #spNavi ul li.spMenu { display:block; position:absolute; background:none; width:100%; height:100%; z-index:99999998; border:none; float:none; text-indent:-9999px;}


/* SP HEADER for TOP PAGE */
#spHeaderTop { display:none; position:fixed; width:100%; top:0; left:0; background:#fff; z-index:99999999; overflow:visible; }
#spHeaderTop > ul { background:#fff; position:relative; z-index:99999999; }
#spHeaderTop > ul > li { display:block; width:25%; float:left; box-sizing:border-box; border-right:#fff solid 1px; position:relative; padding:15.62% 0 0 0; }
#spHeaderTop > ul > li:last-of-type {  border-right:none; }
#spHeaderTop > ul > li a { position:absolute; width:100%; height:100%; top:0; left:0; text-indent:-9999px; }
#spHeaderTop > ul > li a.comingSoon {  z-index:99999998; cursor:inherit; }
#spHeaderTop > ul > li a.comingSoon:after { position:absolute; width:10em; font-size:2.5vw; content:'coming soon'; color:#000; top:50%; left:50%; margin:-1vw 0 0 -5em; z-index:99999999; text-indent:0px; text-align:center;}
#spHeaderTop > ul > li a.comingSoon:before { position:absolute; width:100%; height:100%; background:rgba(255,255,255,0.4); top:0; left:0; z-index:99999999; content:' '; }
#spHeaderTop > ul > li:nth-of-type(1) a { background:#e3d8d5 url(../img/common/btn_spnavi_01.png) center center no-repeat; background-size:contain; }
#spHeaderTop > ul > li:nth-of-type(2) a { background:#e3d8d5 url(../img/common/btn_spnavi_02.png) center center no-repeat; background-size:contain; }
#spHeaderTop > ul > li:nth-of-type(3) a { background:#e3d8d5 url(../img/common/btn_spnavi_03.png) center center no-repeat; background-size:contain; }
#spHeaderTop > ul > li:nth-of-type(4) a { background:#e3d8d5 url(../img/common/btn_spnavi_04.png) center center no-repeat; background-size:contain; }
#spHeaderTop #spNavi { background:hsla(0,0%,0%,0.40); top:0; left:0; width:100%; height:0px; margin:0 0 0 0; overflow:hidden; position:fixed; transition:opacity 0.5s ease-in 0s; z-index:99999998; padding:0 0 0 0; box-sizing:border-box; opacity:0; }
#spHeaderTop #spNavi.active { height:100%; padding:16.25% 0 0 0; opacity:1;  }
#spHeaderTop #spNavi ul { box-sizing:border-box; padding:20px; height:100%;overflow:auto; }
#spHeaderTop #spNavi ul li { display:block; width:100%; float:none; margin-bottom: 2px; box-sizing:border-box; position:relative; z-index:99999999; }
#spHeaderTop #spNavi ul li:nth-of-type(1),
#spHeaderTop #spNavi ul li:nth-of-type(2) { border-top:#fff dotted 1px; }

#spHeaderTop #spNavi ul li a { display:block; font-size:5vw; text-align:center; background:#000; color:#fff; line-height:1.2em; padding:1em 0; font-weight:bold; text-decoration:none; }
#spHeaderTop #spNavi ul li a.active{ color: #000; background-color: #fff;}
#spHeaderTop #spNavi ul li a.comingSoon { color:hsla(0,0%,100%,0.30); pointer-events: none;}
#spHeaderTop #spNavi ul li a:hover { background-color: #f3cb8b; color: #000; }
#spHeaderTop #spNavi ul li.spMenu { display:block; position:absolute; background:none; width:100%; height:100%; z-index:99999998; border:none; float:none; text-indent:-9999px; }


/* FOOTER */
#footer { width: 100%; background-image: url( ../img/common/img_footer.gif); background-repeat: no-repeat; background-position: center top;padding: 62px 0 0 0; }
#pageTop { width:130px; height: 30px; position:fixed; bottom:0; right:0; color:rgba(0,0,0,0.00); text-decoration:none; background: url(../img/common/pagetop.png) no-repeat; background-position: center; border-left: 1px solid #fff; border-top: 1px solid #fff; background-color: #000;}
#pageTop:hover { opacity:0.7; }
#footer address { color:#fff; padding:0 30px; box-sizing:border-box; width:100%; display:block; font-size:12px; line-height:30px; background-color: #000; text-align: center;font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}
#footer address a{ margin: 0 0 0 1em; text-decoration: none; color: #999; padding:0.2em 0.5em;}
#footer address a:hover{ background-color: hsla(0,0%,100%,0.20)}

/* COMMON PAGE */
#commonContent { padding:30px 20px 50px 20px; }
.content { width:100%; max-width:1100px; padding:20px; box-sizing:border-box; margin:0 auto; }
#commonContent h3 { margin:0 0 80px 0; font-weight: bold; font-size: 22px; text-align: center; line-height: 1.5em; }
#commonContent h3 span{ padding-bottom: 8px; border-bottom: 5px solid #d5ccbf;}

/* ANCHOR LINK */
a.anchorLink { display:block; margin:-80px 0 0 0 !important; padding:80px 0 0 0 !important; visibility:hidden; width:0px; height:0px; text-indent:-9999px; }

/*STYLE*/
.txt_bold{ font-weight: bold;}
.caption{ font-size:10px; line-height:1.5em;}
.pc{ display:block;}
.sp{ display: none;}
.caption .pc{ display: inline;}

.min480{}
td.min480{ display: table-cell}
.txt_gray { color: #CCC; }
.txt_black { color: #000; }
.txt_red { color: #C00; }
.lbox{ float: left;}
.rbox{ float: right;}
.mt20{ margin-top: 20px !important;}
.txt_14{ font-size: 14px;}

@media screen and (max-width:1500px) {
/* PC HEADER */
/*20180403　上書き 4/3*/#gNavi {padding: 0; box-sizing: border-box; }


/* COMMON PAGE */
#commonContent { padding:50px 20px 50px 20px; }
.content {padding:0; }

}

/*20180417　東京お知らせ　2/2*/
@media screen and (max-width:1400px) {
	.header_info{ position: relative; display: block;left: 0; top: auto; margin: 5px auto; width: 98%; height: auto; box-sizing: border-box; text-align: center; padding: 7px 10px 3px}
	.header_info br{ display: none;}
}
/*end 20180417　東京お知らせ　2/2*/

@media screen and (max-width:768px) {
body { padding:15.25% 0 0 0; }
html.active { overflow:hidden; }

/* HEADER */
#header { display:none; }	

/* SP HEADER for CONTENT PAGE */
#spHeaderContent { display:block; }


/* SP HEADER for TOP PAGE */
#spHeaderTop { display:block; }

/* COMMON PAGE */
#commonContent { padding:30px 20px 30px 20px; }
#commonContent h3 { margin:0 0 50px 0; }

/* FOOTER */
#footer { width: 100%;  background-size: auto 30px;padding: 30px 0 0 0; }
#footer address { text-align:left; }



/* ANCHOR LINK */
a.anchorLink {margin:-100px 0 0 0 !important; padding:100px 0 0 0 !important;}
	
/* STYLE */
.pc{ display: none;}
.sp{ display: block;}
.caption .pc{ display: none;}
.caption .sp{ display: inline;}
}
@media screen and (max-width:568px) {


#spHeaderTop #spNavi ul li { float:none; width:100%; }
#spHeaderTop #spNavi ul li:nth-of-type(odd) ,
#spHeaderTop #spNavi ul li:nth-of-type(even) { border-right:none; } 
#spHeaderTop #spNavi ul li a { padding:1em 0; font-size:5vw; }
}
@media screen and (max-width:480px) {
#footer address { text-align:center; }
#pageTop { width:100%;}
#footer {padding: 30px 0 30px 0; }
.min480{ display: none;}
td.min480{ display:none !important;}
}

