@charset "UTF-8";

/* ===================================
	File Name   : top.css
	Description : Top Page Layout CSS
	Editor      : Bface Hayakawa
	Last Editor : Bface Hayakawa
	
	Update Description :
	[2023/11/30] 不要なCSS削除
	[2023/08/28] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Share Elements
	2. Top Notice Area
	3. Section [top_about] Setting
	4. Section [top_exhibition] Setting
	5. Section [top_information] Setting
	6. Section [top_report] Setting
	7. Section [top_movie] Setting
	8. Section [top_quick_movie] Setting
	
====================================== */



/*===== ■1. Share Elements =====*/
main > div.wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
}

main > div.wrapper section {
	max-width: 560px;
	width: 46.5%;
	margin: 0 10px 40px;
}

main h2 {
	margin-bottom: 15px;
	padding: 0 10px 17px;
	background: url(img/common/bg-line-ttl.png) no-repeat left bottom;
	color: var(--dominant);
	font-weight: bold;
	font-size: 2.6rem;
	font-family: 'Open Sans', 'Noto Sans Japanese';
	line-height: 1.2;
	letter-spacing: 0.05em;
}

main h2 b { font-size: 2.0rem;}

main h2 b:before {
	margin: 0 5px;
	content:'／';
}

main h3 {
	margin-bottom: 15px;
	border-bottom: 1px solid #ccc;
	color: var(--dominant);
	line-height: 1;
	font-family: 'Noto Sans Japanese';
}

main h3 span {
	display: inline-block;
	margin-bottom: -1px;
	padding: 0 10px 15px;
	border-bottom: 1px solid var(--dominant);
	font-weight: bold;
	font-size: 1.8rem;
}

main > div.wrapper .notice {
	flex: 100%;
	margin: -10px 10px 40px;
	padding: 20px;
	background: var(--dominant-light02);
	font-size: 1.6rem;
	text-align: center;
}

footer {
	position: relative;
}

footer::after {
	position: absolute;
	top: -70%;
	right: 10px;
	width: 500px;
	height: 550px;
	background: url(img/top/img-pict.png) no-repeat right bottom / contain;
	opacity: .5;
	content: "";
	z-index: -1;
}

#entirety:before {
	height: 540px;
}
#entirety:after {
	height: 540px;
}

@media screen and (max-width: 1080px){
	#entirety:before {
		height: 460px;
	}
	#entirety:after {
		height: 460px;
	}
}
@media screen and (min-width: 641px) and (max-width: 860px){
	#entirety:before {
		height: 350px;
	}
	#entirety:after {
		height: 350px;
	}
}

#footer_logo a {
	color: #333;
	text-decoration: none;
	font-weight: normal;
}

@media screen and (max-width:640px) {
	#entirety:before,
	#entirety:after { height: 300px;}
	
	main > div.wrapper {
		margin: 0 auto;
    display: block;
	}

	main > div.wrapper section {
		max-width: none;
		width: auto;
		margin: 0 5px 30px;
	}

	main h2 {
		margin-bottom: 10px;
		padding: 0 10px 15px;
		font-size: 1.6rem;
		letter-spacing: 0em;
	}

	main h2 b { font-size: 1.0rem;}

	main h2 b:before {
		margin: 0 5px;
		content:'／';
	}
	
	main h3 {
		margin-bottom: 15px;
		padding: 12px 0;
		background: var(--dominant);
		border-bottom: none;
		color: #fff;
		text-align: center;
	}

	main h3 span {
		display: inline;
		margin-bottom: 0;
		padding: 0;
		border-bottom: none;
		font-size: 1.4rem;
	}
	
	#sp_pagetop { margin-top: 40px;}
	
	main > div.wrapper .notice {
		flex: auto;
		margin: -20px 10px 30px;
		padding: 10px;
		font-size: 1.4rem;
		text-align: left;
	}
	
	main > div.wrapper .notice br {display: none;}

	footer::after {
    top: -30%;
    right: 10px;
    width: 240px;
    height: 264px;
	}
}


@media screen and (max-width:360px) {
	#entirety:before,
	#entirety:after { height: 300px;}
}



/*===== ■2. Top Notice Area =====*/
#top_notice {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

#top_notice > div { margin: 0 10px 35px;}

#top_notice #visual {
	width: 850px;
	box-shadow: 0 0 5px rgba(0,0,0,.15), inset 0 0 4px #fff;
}

.gallery-cell {
  width: 100%;
  height: auto;
	background: #fff;
	line-height: 0;
}

#top_notice #visual img {
	width: 100%;
	height: auto;
}

#top_notice > #visual > ul > li:not(:first-child)  img { display: none;}

#top_notice #option {
	position: relative;
	width: 300px;
	padding: 10px 15px 15px;
	box-sizing: border-box;
	box-shadow: 0 4px 8px rgba(0,0,0,.15);
	background: linear-gradient(to bottom, rgba(255,255,255,.8) 0%, rgba(255,255,255,1) 100%);
}

#top_notice #option:before {
	position: absolute;
	top: -10px;
	left: -10px;
	margin: -40px 0 0 -40px;
	border: 40px solid transparent;
	border-bottom: 40px solid #ffff00;
	transform: rotate(-45deg);
	content: '';
  z-index: 2;
}

#top_notice #option ul {
	padding: 20px 0;
  color: #c00;
  font-weight: bold;
  font-size: 2.0rem;
  line-height: 1.4;
  text-align: center;
  background: url(img/top/bg-circle.png) no-repeat center center / contain;
}

#top_notice #option figure { 
  margin-top: 5px;
}

#top_notice #option a {display: block;}


#top_notice #option a.soon {
  opacity: 0.6;
  pointer-events: none;
}


@media screen and (max-width:640px) {
	#top_notice {
		display: block;
		margin-bottom: 30px;
	}

	#top_notice > div { margin: 0 5px 35px;}
	
	#top_notice #visual {
		width: auto;
		box-shadow: none;
	}
	
	.gallery-cell { background: none;}

	#top_notice #option {
		position: relative;
		width: auto;
		margin: 0 10px;
		padding: 10px;
	}

	#top_notice #option:before {
		position: absolute;
		top: -5px;
		left: -5px;
		margin: -30px 0 0 -30px;
		border: 30px solid transparent;
		border-bottom: 30px solid #ffff00;
		transform: rotate(-45deg);
		content: '';
	}

	#top_notice #option:after {
		position: absolute;
		top: -5px;
		right: -35px;
		margin: -30px 0 0 0px;
		border: 30px solid transparent;
		border-bottom: 30px solid #ffff00;
		transform: rotate(45deg);
		content: '';
	}
  
  #top_notice #option dt {
		padding: 15px 0 5px;
    font-size: 2.0rem;
    line-height: 1.2;
    background-image: none;
	}
  
  #top_notice #option dt br{display: none;}
  #top_notice #option dt br:nth-of-type(2){display: block;}
  #top_notice #option figure {
      width: 100%;
      max-width: 420px;
      margin: 10px auto;
  }
}


/*===== ■3. Section [top_exhibition] Setting =====*/
#top_exhibition > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 10px;
}

#top_exhibition > ul li {
	width: 49%;
	margin-bottom: 10px;
}

#top_exhibition > ul li a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 12px 10px;
	background: #fff;
	box-sizing: border-box;
	font-size: 1.4rem;
	text-align: left;
}

#top_exhibition > ul li a i.icon_arrow {
	position: absolute;
	top: 50%;
	left: 0;
	border: 6px solid transparent;
	border-left: 6px solid var(--dominant);
	transform: translateY(-50%);
	content: '';
}

#top_exhibition > ul li a.soon {
	pointer-events: none;
	position: relative;
	padding: 11px 10px;
	border: 1px solid var(--dominant);
	color: var(--dominant);
	line-height: 1.2;
	text-decoration: none;
	opacity: .5;
}
#top_exhibition > ul li a:hover { 
	background-color: var(--dominant);
}
#top_exhibition > ul li a.soon:hover { 
	color: var(--dominant);
}

#top_exhibition > div{
	margin: 10px 10px 10px;
}

#top_exhibition > div > a{
	display: block;
	width: 80%;
	margin: 0 auto;
}

@media screen and (max-width:640px) {
	#top_exhibition > ul li { margin-bottom: 5px;}
	
	#top_exhibition > ul li a {
		min-height:50px;
		justify-content: center;
		padding: 9px 10px;
		font-size: 1.3rem;
		text-align: center;
	}
	
	#top_exhibition > ul li a.soon { padding: 8px 10px;}
	#top_exhibition > div > a{width: 100%;}
}


/*===== ■4. Section [top_banner] Setting =====*/
#top_banner {
	margin: 0 auto;
}
#top_banner figure {
	max-width: 768px;
	margin-bottom: 20px;
	padding: 0 10px;
}

/*===== ■5. Section [top_information] Setting =====*/

#top_information ul {
	overflow: auto;
	margin: 0 10px;
	max-height: 350px;
}

#top_information li {
	display: flex;
	align-content: flex-start;
	margin-bottom: 15px;
	padding-bottom: 12px;
	border-bottom: 1px dotted #ccc;
}

#top_information li time { min-width: 90px;}

#top_information li div b {
	display: inline-block;
	min-width: 120px;
	margin-bottom: 5px;
	padding: 3px 5px;
	border-radius: 4px;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	text-align: center;
}
#top_information li div b.info { background: #2c9999;}
#top_information li div b.press { background: #73a808;}

#top_information li p em { color: #CC0000; font-weight: bold; }
#top_information li p em span{font-size: 1.1rem;}

#top_information a:hover .icon_blank:before{ color: var(--dominant); opacity: 0.6;}

#top_information a .icon_key:before{ color: var(--dominant);}
#top_information a:hover .icon_key:before{ opacity: 0.6;}

#top_information a.soon{
  pointer-events: none;
  text-decoration: none;
}
@media screen and (max-width:640px) {
	#top_information { 
		width: auto;
		margin-bottom: 40px;
	}
	
	#top_information ul { max-height: 500px;}
	
	#top_information li {
		display: block;
		margin-bottom: 10px;
		padding-bottom: 5px;
	}

	#top_information li time {
		min-width: 80px;
		font-size: 1.1rem;
	}
	
	#top_information li div { display: inline;}
	
	#top_information li div b {
		display: inline-block;
		min-width: 100px;
		margin-bottom: 0;
		font-size: 1.0rem;
	}
	
	#top_information li div p a:not(.txt) {
		padding: 10px 0;
	}
}



/*===== ■6. Section [top_report] Setting =====*/


#top_report div > div{
  display: block;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  margin: 10px auto 0;
}

#top_report iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media screen and (max-width:640px) {
  #top_report {
    width: auto;
  }
  #top_report li{
    width: 100%;
    margin-bottom: 20px;
  }
}


/*===== ■7. Section [top_movie] Setting =====*/
#top_movie {
	width: 100%;
	max-width: none;
}

#top_movie ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#top_movie li{
  width: calc(50% - 15px);
}

#top_movie li span{
  display: block;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  margin: 0 auto;
}

#top_movie li p{
  margin-top: 5px;
  text-align: center;
  font-weight: bold;
}

#top_movie iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media screen and (max-width:640px) {
  #top_movie {
    width: auto;
  }
  #top_movie li{
    width: 100%;
  }
  #top_movie li:first-child{
    margin-right: 0;
  }
}

/*===== ■8. Section [top_quick_movie] Setting =====*/
#top_quick_movie {
	width: 100%;
	max-width: none;
}

#top_quick_movie ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#top_quick_movie li{
  width: calc(50% - 15px);
}

#top_quick_movie li span{
  display: block;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  position: relative;
  margin: 0 auto;
}

#top_quick_movie li p{
  margin-top: 5px;
  text-align: center;
  font-weight: bold;
}

#top_quick_movie iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@media screen and (max-width:640px) {
  #top_quick_movie {
    width: auto;
  }
  #top_quick_movie li{
    width: 100%;
  }
  #top_quick_movie li:first-child{
    margin-right: 0;
  }
}


#sp_pagetop {
	background: #fff;
}


#footer_logo a{
  color: #333;
  text-decoration: none;
  font-weight: normal;
}

#top-banner{
  max-width: 750px;
  margin: 0 auto 30px;
  padding: 0 10px;
}

#bnr_related {
	max-width: 560px;
	width: 46.5%;
	margin: 10px 10px 0;
}

#bnr_related ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#bnr_related li {
	overflow: hidden;
	max-width: 180px;
	width: calc(33.33% - 5px);
	margin: 0 0 5px;
}

#bnr_related ul::after {
  display: block;
  width: calc(33.33% - 5px);
  height: 100%;
  content: "";
} 

#ad_medium {
  width: 100%;
  margin: 10px auto 0;
}

#ad_medium > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -15px 0 30px;
  padding-bottom: 30px;
  background: url(img/top/bg-ad.png) no-repeat bottom / 100% auto;
}

#ad_medium li {
  overflow: hidden;
  max-width: 180px;
  margin: 0 10px 10px;
}

@media screen and (max-width:640px) {
	#bnr_related {	
		width: auto;
	}

	#bnr_related { margin: 0 5px 20px;}
	
	#bnr_related ul {
		margin: 0 auto 20px;
		padding-bottom: 0;
		background: none;
	}

	#bnr_related li {
		overflow: inherit;
		max-width: none;
		width: 48%;
		margin: 0 1% 5px;
	}
	#bnr_related ul::after {
		content: none;
	} 
  #ad_medium {
    margin: 0 0 15px;
  }
  #ad_medium > ul {
    margin: 0 auto 20px;
    padding-bottom: 0;
    background: none;
  }
  #ad_medium li {
    overflow: inherit;
    max-width: none;
    width: 46%;
    margin: 0 1% 5px;
  }
}

#top_quick {
  width: 100%;
  
}
#top_quick figure{
  margin: 0 auto;
  max-width: 768px;
  margin-bottom: 20px;
  padding: 0 10px;
}


/*===== ■12. Aside [bnr_sponsorship] Setting =====*/
#bnr_sponsorship {
	max-width: 560px;
	width: 46.5%;
	margin: 10px 10px 0;
}

#bnr_sponsorship ul {
    display: flex;
    flex-wrap: wrap;
}

#bnr_sponsorship li {
	overflow: hidden;
	max-width: 180px;
	width: calc(33.33% - 10px);
	margin: 0 5px 10px;
}
#bnr_sponsorship li img {
	vertical-align: bottom;
}

@media screen and (max-width:640px) {
	#bnr_sponsorship {	
		width: auto;
	}
	
	#bnr_sponsorship ul {
		justify-content: center;
	}

	#bnr_sponsorship li {
		width: 48%;
		margin: 0 1% 1%;
		text-align: center;
	}
}