html,body{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; font-size:16px; width: 100%; letter-spacing: 0.1em; text-align: center; color: #2C2C2C;word-break: break-all;}	
h1 {font-size:56px; margin-bottom: 20px;}
h1 span.sub_title {font-size:22px;}	
h1 span.exhibition_name{font-family: 'Geologica', sans-serif;}
h2 {font-size:1.875rem; line-height: 1.4em; margin-bottom: 30px; color: #2E31B5; margin: 10px 0; font-weight: bold;}
#checkpoint h2, #outline h2, #boothlocation h2, #access h2{}
h3 {font-size:36px; margin-bottom: 0px;}	
h3 span {font-size:16px;}		
h4 {font-size:22px; margin-bottom: 20px; text-align: left}	
h5 {font-size:16px; margin-bottom: 20px; padding-left:14px; border-left: 8px solid; text-align: left; }
rt,rp {font-size:10px;}
a {text-decoration: none;font-weight: bold; transition: all 0.4s; color: #2E31B5;}
a:link {color: #2E31B5!important;}
p {line-height: 1.6em;margin-bottom: 1em;}		
.content {padding: 80px 0;}	
.pnlm-compass{display: none!important;}
.sp {display: none}
ul{list-style: none;}
.bg_gray{background-color: #f1f1f1;}
.bg_blue {background: #EBF2FC;}
.icon_dot{margin:  60px auto 16px;}
.tc{text-align:center;}

a.btn-link{
	display: block;
	width: 530px;
	font-size: 18px;
	color: #2E31B5;
	background-color: #fff;
	border: solid 3px #2E31B5;
	border-radius: 5px;
	margin: 30px auto 0;
	padding: 30px 0px;
	text-decoration: none!important;
}
a.btn-link:hover{
	color: #fff!important;
	background-color: #2E31B5;
	border: solid 3px #2E31B5;
}
@media screen and (max-width: 560px){
	a.btn-link{
		width: 100%;
	}
}

/*==================================================
movie css
===================================*/
.movie {
  text-align: center;
  overflow: hidden;
}
ul.movie{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.movie li {
/*  float: left;*/
  width: 32.3%;
  margin-bottom: 30px;
}
.movie li span {
  font-weight: bold;
}
.movie li:nth-child(3n-1) {
  margin-left: 1.5%;
  margin-right: 1.5%;
}
#product_movie .movie li:nth-child(3n-1) {
  margin-left: 1.5%;
	margin-right: 1.5%;
}
.movie img {
  width: 100%;
  height: auto;
}
.movie .video {
  display: none;
}
.movie a.start_btn {
  display: block;
  position: relative;
}
.movie a.start_btn:before, .movie a.start_btn:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}
.movie a.start_btn:before {
  background: white;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: .8;
  margin-left: -35px;
  margin-top: -35px;
}
.movie a.start_btn:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 30px;
  border-color: transparent transparent transparent #6D7991;
  margin-left: -11px;
  margin-top: -14px;
}
.movie a.start_btn:hover:before {
  opacity: 1;
}

.movie p.link_page{
	margin-top: 16px;
}
/*==================================================
end movie css
===================================*/


#main {width: 100%; color: #fff; text-align:left; background-image: url("../img/main_bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover;}
#main .wrap{ height: 700px;display: table;max-width: 1088px; margin: 0 auto;}
#main .inner {display: table-cell; vertical-align: middle; width: 45%; padding-right: 5%;}
#main .inner:nth-child(2) { width: 60%; text-align: center; padding-right:0;}
#main .inner:nth-child(2) a{display:block;position: relative;}
#main .inner img {width: 100%; max-width: 600px}
#main .inner:nth-child(2) span,	#movies li a span{width: 64px; height: 48px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }

#main .inner:nth-child(2) a:hover span img,	#movies li a:hover span img, #v360 ul li:hover span img{-moz-transform: scale(1.4); -webkit-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4);}
#main p{color: #fff;}


#introduction_movie{padding: 70px 0 30px;}

#product_movie,#runk{padding: 70px 0 30px; background-color: #f1f1f1;}

#product_movie ul.movie{
	justify-content: center;
}

#seminar{padding: 70px 0 30px;}
/*.comment_movie iframe{border: solid 20px #F8EDE6; border-radius: 10px;}*/
#booth_photo .movie{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	border-top: solid 2px #2E31B5; border-bottom: solid 2px #2E31B5;}

.seminar_img img{width: 80%;}
p.seminar_month{font-family: 'Geologica', sans-serif; font-size:1.125rem; color: #2E31B5; margin-bottom: 0;}
p.seminar_speaker{font-size:1.125rem;}
p.seminar_date{font-size:1.125rem;}
p.seminar_title{font-size:1.125rem; font-weight: bold;}
p.about-linkpage{font-size: 1.375rem;}
p.about-linkpage span{color: #e25a24;}


#runk img.pasta_design{width: 100%;}



#booth_photo{padding: 70px 0 30px; margin-bottom: 40px;}

#booth_photo .tab {display: table;  max-width: 536px; margin: 0 auto;table-layout:fixed; text-align: center; margin-bottom: 40px;}
#booth_photo .tab li {display: table-cell; background: #fff; border: 1px solid #2E31B5; padding: 10px 60px; font-size: 26px; font-weight: bold;color: #2E31B5; cursor: pointer;}
#booth_photo .tab li.active {background: #2E31B5; color: #fff;}
#booth_photo .area{margin: 0 auto;}
#booth_photo .area ul { display: none; width: 100%; max-width: 1088px; margin: 0 auto;}
#booth_photo .area ul.show { display: block;}
#booth_photo .area ul.show:after {content: "";clear: both;display: block;}
#booth_photo .area li {float: left; width:18%; margin: 1%; overflow:hidden; text-align: center;list-style: none;transition: all 0.4s;}
#booth_photo .area li img {width:100%;}
#booth_photo .area li a {display:block;width:100%;height:100%;}
#booth_photo .area li:hover {-moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);}
.modaal-gallery-item img{max-height: calc(100vh); }
.modaal-container{background: none!important; box-shadow: none!important;}


/*==================================================
#action css
===================================*/
#action{
	padding: 70px 0 30px;
    background-color: #f1f1f1;
	margin-bottom: 70px;
	background-image: url("../img/bg_action_l.png"),url("../img/bg_action_r.png");
	background-position: left top,right top;
	background-repeat: no-repeat,no-repeat;
/*	background-size: auto 100%,auto 100%;*/
}
#action .action_img img{
	width: 100%;
	height: auto;
	margin-top: 8px;
	margin-bottom: 8px;
}
#action p span.span_line_h{display: inline-block; margin-bottom: 6px;}
/*==================================================
footer css
===================================*/
footer .copyright{
	text-align: center;
	color: #000;
	background-color: #F1F1F1;
	padding: 10px 0;
	margin-bottom: 0;
}

#page_top{
  position: fixed;
  right: 10px;
  bottom: 20px;
}
#page_top a{
  position: relative;
  display: block;
  text-decoration: none;
}

@media print, screen and (max-width: 1100px) {
	h1 {font-size:4.5vw; }
	h1 span {font-size:2vw;}
	h2 {font-size:30px;}	
	#main .wrap{ height: 600px; margin: 0 40px;}
	#main .inner {width: 50%;}
	#main .inner:nth-child(2) { width: 55%; text-align: center; padding-right:0;}
}
@media screen and (min-width: 769px){
	footer ul.footer-menu{
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		list-style: none;
		padding-left: 0;
		margin: 0 auto 100px;
	}
	footer ul.footer-menu li{
		-webkit-transform: skewX(150deg);
		-moz-transform: skewX(150deg);
		transform: skewX(150deg);
		border-right: 1px solid #000;
	}
	footer ul.footer-menu li:last-child {
		border-right:none;
	}
	footer ul.footer-menu li a{
		display:block;
		transform: skewX(-150deg);
		color: #000!important;
		padding: 0 20px;
		font-weight: normal;
	}
}

@media print, screen and (max-width: 768px) {
	.pc {display: none}
	.sp {display: block}
	html,body{overflow-x: hidden;}
	h1 {font-size:36px; margin-bottom: 20px; margin-top: 20px;}
	h1 span.exhibition_name{font-size:2.125rem;}
	h1 span.sub_title{font-size:1.125rem;}
	h2 {font-size:22px; margin-bottom: 20px;}	
	h3 {font-size:28px; margin-bottom: 0px;}	
	h4 {font-size:18px; margin-bottom: 10px;}	
	a {transition: none; }
	p { padding: 0 0px;} 	
	.content {padding: 40px 0;}	
	
	#main .wrap{ height:auto;margin: 0 auto;}
	#main .inner {width: 100%;display:block; text-align: center;padding-right: 0;}
	#main .inner:nth-child(2) { width: 100%; text-align: center;}
	#main .inner:nth-child(2)  p  { text-align: center; }	
	#main .inner:nth-child(2) a:hover span img,	#movies li a:hover span img, #v360 ul li:hover span img{-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);}
	
	#main .movie a.start_btn{display: none;}
	#main p.main_txt{text-align: left;}
	
	.movie li {
		float: none;
		width: 100%;
		margin-bottom: 30px;
	  }
	  .movie li:nth-child(3n-1) {
		margin-left: 0%;
		margin-right: 0%;
	  }
	  .movie a.start_btn {
		display: none;
	  }
	  .movie .video {
		display: block;
		margin-bottom: 10px;
	  }
	.movie p.link_page{font-size:1.125rem;}
	
	.comment_movie {
	  position: relative;
	  width: 100%;
	  padding-top: 57.45%;
	}
	.comment_movie iframe {
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	}
	
	#seminar .seminar_img{margin-bottom: 16px;}
	#seminar p{font-size: 1rem;}
	
	#runk p.mb_txt_l{text-align: left;}
	
	#booth_photo{margin-bottom: 30px;}
	#booth_photo .movie{width: 100%;}
	#booth_photo .movie .video{margin-bottom: 0;}
	#booth_photo .tab {width: 90%; margin-bottom: 20px;}
	#booth_photo .tab{display: flex; justify-content: center; align-items: center;}
	#booth_photo .tab li{padding: 10px 30px;}
	#booth_photo .area ul {padding: 0 0px;}
	#booth_photo .area li {width:31%; margin: 1%;}
	.modaal-gallery-item img{max-width: 100%!important; object-fit: cover!important;}
	
	#action{
		margin-bottom: 46px;
		background-image: none;
	}
	#action .action_mb{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	#action .action_mb_box{
		width: 30%;
	}
	#action p.seminar_month{font-size:0.9375rem;}
	#action .action_mb img{
		width: 100%;
		height: auto;
		margin-top: 8px;
		margin-bottom: 8px;
	}
	
	
	footer ul.footer-menu{
		list-style: none;
		font-size: 18px;
		text-align: center;
		padding-left: 0;
	}
	footer ul.footer-menu li{
		padding-bottom: 30px;
	}
	footer ul.footer-menu li a{
		color: #000!important;
/*		border-bottom: solid 1px #000;*/
		padding-bottom: 5px;
		font-size:1rem;
	}
}		
@media print, screen and (max-width: 736px) {
	body{padding-top: 0;}
}