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

/* TITLE*/
#top_title{ width: 100%; max-width: 1500px; box-sizing: border-box; margin: 50px auto; padding: 0 30px 0 30px;}
#top_title ul{}
#top_title ul li.title { float: left; width: 56%;}
#top_title ul li.title_en{ float: right; width: 39%;}
#top_title ul li.date{ float: right; width: 39%; margin: 2vw 0 0 0;}
#top_title ul li img{ width: 100%;}

/* MAIN VISUAL */
#mainVisualWrapper {}
/* Opening
-----------------------------------------*/
.Opening {
position:relative;
background-color: #FFF;
}
.Opening ul li{
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.Opening ul li p.Opening__text{
  position: absolute;
  bottom:0;
  left: 0;
  z-index: 9;
 font-size: 10px;line-height: 14px;
	text-align: left;
	display: block;
	background-color: #fff;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
}
.Opening ul li span {}
.Opening ul li span img.Opening__img{
  max-width: inherit;
  width: 100%;
  height: auto; padding-bottom: 30px;
}

/* CONTENT */
#topContent { }
#topContent .content { width:100%; max-width:1340px; padding:20px; box-sizing:border-box; margin:0 auto; }

#topContent #information.content .title{ background: url(../img/top/information_bg.png) no-repeat contain; width: 189px; float: right;}
#topContent #information.content .informationArea{ float: right;}
#topContent #information.content dl{ margin-bottom: 1.5em;}

#info_onlineBnr{}
/*20180420 Twitter埋め込み 1/2*/
.top_lbox{float: left;  width: 61.5%;}
#twitter{margin:30px auto 20px auto !important;}
#twitter h3{ padding: 0 0 10px 0; margin: 0 0 20px 0; border-bottom: 3px solid #0c2340;}
#twitter #twitterArea{ width: 100%; padding: 0 20px; box-sizing: border-box;}
.SandboxRoot.env-bp-660 .TweetAuthor-name, .SandboxRoot.env-bp-820 .TweetAuthor-name, .SandboxRoot.env-bp-970 .TweetAuthor-name{font-size: 12px !important; line-height: 18px !important;}
.SandboxRoot.env-bp-660 .timeline-Tweet-text{font-size:14px !important; line-height: 28px !important;}

/* INFORMATION */
#information { margin:30px auto 20px auto !important; padding:0 0 0 0; float: left;  width: /*61.5%*/ 100%;}
#information h3{ padding: 0 0 10px 0; margin: 0 0 20px 0; border-bottom: 3px solid #d5ccbf;}
#information #infoBox { width: 100%; padding: 0 20px; box-sizing: border-box;}
/*20180420 Twitter埋め込みこの行上書きしてください。*//*20180210 京都展バナー追加 この行上書きしてください。 1/3*/#information #infoBox ul { overflow:auto; height: /*185px*//*400px*/180px; top:0; float: right; width: 100%; }
#information #infoBox ul li { margin:0 auto 10px auto; font-size:14px; padding: 0 0 5px 7em; width: 100%; box-sizing: border-box; border-bottom: 1px solid #ccc; position: relative; }
#information #infoBox ul li time { position: absolute;top: 5px; left: 0; font-size:11px; color:#666; margin:0; line-height:1.5em; font-weight: bold; width: 7em; text-align: center; }
#information #infoBox ul li a { color:#c1482a; text-decoration:none; }
#information #infoBox ul li a:hover { color:#c1482a; text-decoration:underline; }

/* ONLINE Banner */
#onlineBnr { margin:30px auto 20px auto !important; padding:0 0 0 0; width: 35%; float: right; }
#onlineBnr h3{ padding: 0 0 10px 0; margin: 0 0 20px 0; border-bottom: 3px solid #cc881a;}
#onlineBnr #inBox { width: 100%; padding: 0 20px; box-sizing: border-box; text-align: center;}
#onlineBnr a img:hover{ opacity: 0.6;}
/*20180210 京都展バナー追加 2/3*/
.bnr_kyoto{ margin: 20px 0 0 0;}

/* HIGHLIGHT*/
#highlight{ width: 100%; background-color: #feecd2; font-size: 16px; line-height: 30px;position:relative; overflow:visible; }
#highlight .content{ max-width: 960px; margin: 0 auto; padding: 30px;}
#highlight .content h3 {  margin:20px 0 40px; box-sizing: border-box;  text-align: center; width: 100%; }
#highlight .content h3 img{ padding: 0 0 5px 0; border-bottom: 3px solid #333333;}
#highlight ul{}
#highlight ul li{ background-color: #fff; padding: 20px 45px; margin: 0 0 35px 0; position: relative;}
#highlight ul li .imgBox{ width: 100%; margin: 30px 0 0 0;}
#highlight ul li .imgBox .caption{ margin: 5px; display: block; text-align: right;}
#highlight ul li:last-child{ margin-bottom: 0;}
#highlight ul li .btn_click{ position: absolute; bottom: 0; right:0;}
#highlight ul li a{ color: hsla(0,0%,0%,0.00); position: absolute; width: 100%; height: 100%; top:0; left: 0;}
#highlight ul li a:hover{ background-color: hsla(0,0%,100%,0.60)}
/* ACCESS */
#access { margin:20px auto 30px auto !important;}
#access h3 {  margin:20px 0 60px; box-sizing: border-box;  text-align: center; width: 100%; }
#access h3 img{ padding: 0 0 5px 0; border-bottom: 3px solid #e3d8d5;}
#mapTxt{ float: left; width: 33.6%; }
#mapTxt h3{ font-weight: bold; margin:0 0 30px 0; text-align: center; font-size: 120%; padding: 0.4em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; line-height: 120%; box-sizing: border-box; }
#mapTxt dl{ margin-bottom: 10px; position: relative;}
#mapTxt dl dt{ width: 5em; font-weight: bold; position: absolute; top:0; left: 0; }
#mapTxt dl dd{ width: 100%; box-sizing: border-box; padding: 0 0 0 5em;}
#mapTxt a{ color: #cc881a; text-decoration: none;}
#mapTxt a:hover{ opacity: 0.6;}
#mapBox { float: right; width: 63.6%; }
#mapBox iframe { width:100%; }
#access .clearFix:last-child{ margin-top: 30px;}

/*logo */
#logoBox { margin:20px auto 20px auto !important; padding: 30px 30px !important; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}

/*Banner*/
#BnrBox { margin:20px auto 80px auto; padding: 20px 10px; width: 1430px; max-width: 100%; box-sizing: border-box; text-align: left; }
#BnrBox a{ display: inline-block; margin: 0 5px 10px;}

@media screen and (max-width:1100px) {
#mainVisualWrapper img { max-height:500px; }
/* logo */
#logoBox{ margin:0 20px 20px 20px !important; width:calc(100% - 40px) !important; }

}
@media screen and (max-width:768px) {
#mainVisualWrapper img {max-height:450px; }
/* TITLE*/
#top_title{  padding: 30px 20px 0 20px; margin: 0 0 30px 0;}
#top_title ul li.title{ float: none; width: 100%;}
#top_title ul li.title_en{ float: none; width: 100%; margin: 2vw 0 0 0;}
#top_title ul li.date{ float: none; width: 90%; margin: 2vw auto 0 auto;}
#top_title ul li img{ width: 100%;}

/* MAIN VISUAL */
#mainVisualWrapper { }
	
	
/* ONLINE Banner */
#onlineBnr a img{ max-width: 300px; width: 100%;}
/*20180210 京都展バナー追加 3/3*/
.bnr_kyoto img{ max-width: 300px; width: 100%;}


/* HIGHLIGHT*/
#highlight ul li .tit01{ max-width: 100%;}
#highlight ul li .tit02{ max-width: 87.8%;}
#highlight ul li .tit03{ max-width: 74.5%;}
#highlight ul li .tit04{ max-width: 98.5%;}
#highlight ul li .btn_click{ width: 80px;}

}
@media screen and (max-width:640px)  {
#mainVisualWrapper img {max-height:300px; }
	
/*20180420 Twitter埋め込み 2/2*/
.top_lbox{float: none;  width: 100%;}

/* INFORMATION */
#information {float: none;  width: 100%;}
#information #infoBox ul{ height: auto;}
	
/* ONLINE Banner */
#onlineBnr {float: none;  width: 100%;}
#onlineBnr #inBox img { width: 80%;}

/* ACCESS */
#mapTxt{ float:none; width: 100%; margin-bottom: 20px;}
#mapTxt span{ height: auto; display: block;}
#mapBox { float: none;  width: 100%;}
#mapBox iframe { height: 300px; }
}

@media screen and (max-width:520px)  {
/*Banner*/
#BnrBox{ text-align: left;}
#BnrBox a{ width: 48%; margin: 0 1% 10px;}
#BnrBox a img{ width: 100%;}
}


@media screen and (max-width:480px)  {
#information h3 img, #onlineBnr h3 img{ height: 20px }
#information #infoBox ul li {padding: 0 0 5px 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #ccc; position: relative; }
#information #infoBox ul li time { position: relative;top: 0; left: 0; display: block;}
#highlight .content{ padding: 10px;}
#highlight .content h3 img{ height: 20px }
#highlight ul li{padding: 10px 20px; margin: 0 0 10px 0;}
#highlight ul li .imgBox{ margin: 10px 0 0 0;}
#access { margin:20px auto 20px auto !important;}
#access h3 img{ height: 20px }
#access h3 {  margin:0 0 30px; box-sizing: border-box;  text-align: center; width: 100%; }
	

}
@media screen and (max-width:400px)  {
#mainVisualWrapper img {max-height:278px; }

/* TOP_TXT*/
#top_txt .content h3 { font-size: 8vw; line-height: 120%}
#top_txt a.moreLink {  width:90%; line-height: 50px; background-size: auto, 100%; margin: 20px auto 0; font-size: 3.8vw; padding-left: 20px;}
}