@charset "utf-8";

/*------------------------------------------------------------
  common
  ------------------------------------------------------------ */

#suntory_contents .contents_wrap { padding: 0; }
#suntory_contents .breadcrumbs { margin: 0; }

@media screen and (min-width: 768px) {
	#suntory_contents .breadcrumbs { padding: 18px 0; }
	#suntory_contents #sma_footer { padding-top: 20px; }
	#suntory_contents #sma_footer .btn_page_top a { top: -10px; }
}

@media screen and (max-width: 767px) {
	#suntory_contents .breadcrumbs { padding: 3.6vw; }
}

#suntory_contents img{ vertical-align: top; }
#suntory_contents .contents_wrap a { text-decoration: none; }

/*------------------------------------------------------------
  main
  ------------------------------------------------------------ */

.contents_wrap > section {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.clearfix::after,
.contents_wrap > section::after,
.contents_wrap > section > .wrap::after {
	content: "";
	display: block;
	clear: both;
}

.contents_wrap > section > .wrap p {
	text-align : center;
	font-size: 20px;
	line-height: 1.6;
	margin-bottom: 1em;
}

.contents_wrap > section a:hover {
	opacity: .7;
}

ruby[data-ruby] { position: relative; }
ruby[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -1em;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 0.5em;
}
ruby[data-ruby] rt { display: none; }
ruby.ruby_lsw { letter-spacing: .25em; padding-left: .15em; padding-right: .1em; }
ruby.ruby_lsw::before { letter-spacing: normal; padding-left: 0; padding-right: 0; margin-left: -.5em; }

@media screen and (min-width:768px) {
	.forSP { display: none !important; }
	.flexcontainer {
		display: flex;
		flex-wrap: wrap;
	}
	.fatten { padding-left: .25em; padding-right: .25em; }
}
@media print {
	.forSP { display: none !important; }
	.flexcontainer {
		display: flex;
		flex-wrap: wrap;
	}
	#key .wrap,
	#specialday_nav .wrap,
	#intro .wrap,
	#museum .wrap .wrap {
		width: 100% !important;
	}
}
@media screen and (max-width:767px) {
	.forPC { display: none !important; }
}


/*------------------------------------------------------------
  keyVisual
  ------------------------------------------------------------ */

#key {
	background: #b7ded5 url("../img/key_background.png") no-repeat center;
	padding: 0;
}

#key .wrap {
	width: 1164px;
	height: 459px;
	margin: 0 auto;
	position: relative;
}

#key .wrap .title { padding: 27px 0 0 195px; }

#key .wrap .sns {
	position: absolute;
	top: 59px;
	right: 5px;
}

#key .wrap .sns ul { list-style: none; }

#key .wrap .sns ul li:first-child a {
	position: absolute;
	top: 90px;
	right: 155px;
}

#key .wrap .sns ul li:last-child a {
	position: absolute;
	top: 90px;
	right: 24px;
}

#key .wrap > div.img {
	position: absolute;
	bottom: -49px;
}

@media screen and (max-width:767px) {
	#key {
		background: #b7ded5 url("../img/key_background_sp.png") no-repeat 67% -82%;
		background-size: 108vw;
	}
	#key .wrap {
		width: 100vw;
		height: 82.4vw;
		overflow: hidden;
	}
	#key .wrap .title {
		padding: 7.2vw 0 0 11vw;
	}
	#key .wrap .title img {
		width: 94.50vw;
		height: auto;
	}
	#key .wrap .sns ul li a img {
		width: 9.43vw;
		height: auto;
	}
	#key .wrap .sns {
		top: 67vw;
		right: 2vw;
	}
	#key .wrap .sns ul li:first-child a {
		top: 0;
		right: 17.5vw;
	}
	#key .wrap .sns ul li:last-child a {
		top: 0;
		right: 4vw;
	}
	#key .wrap > div.img {
		top: 52vw;
		left: 4vw;
	}
	#key .wrap > div.img img {
		width: 30vw;
		height: auto;
	}
}

/*------------------------------------------------------------
  specialday_nav
  ------------------------------------------------------------ */

#specialday_nav {
	background: #1778f2;
	border-top: 3px solid #221815;
	border-bottom: 3px solid #221815;
}

#specialday_nav .wrap {
	width: 1164px;
	margin: 0 auto;
	position: relative;
}

#specialday_nav .wrap h3 {
	position: absolute;
	top: -18px;
	left: 13px;
	color: #fff;
	background: #ea5550;
	border: 3px solid #221815;
    border-radius: 10px;
	text-align: center;
	font-size: 16px;
	line-height: 1.2;
	width: 197px;
	padding: 14px 0;
}

#specialday_nav .wrap h3 span:first-child { font-size: 31px; }

#specialday_nav .wrap h3 span:last-child { font-size: 22px; }

#specialday_nav .close h3 { display: none; }

#specialday_nav .wrap div div {
	margin: 19px 0 16px;
	padding: 0 38px;
	text-align: center;
}

#specialday_nav .close div div { width: 43%; }

#specialday_nav .wrap div div a { color: #fff; }

#specialday_nav .wrap div div > a > span { font-weight: bold; text-align: center; }

#specialday_nav .wrap div div > a > span:first-child {
	display: block;
	width: fit-content;
	margin: 0 auto -4px;
	padding: 6px 8px 4px;
	font-size: 16px;
	color: #0058be;
	background: #fff;
	border: 3px solid #221815;
}

#specialday_nav .wrap div div:first-child {
	margin-left: 212px;
	border-right: 3px solid #221815;
}

@media screen and (min-width:768px) {
	#specialday_nav .close div div:first-child {
		margin-left: 0;
		border-left: 3px solid #221815;
	}
	#specialday_nav .close div div:last-child {
		border-right: 3px solid #221815;
	}
}

#specialday_nav .wrap div div:last-child > a > span:first-child { color: #ea5550; }

#specialday_nav .wrap div div > a::after {
	content: url(../img/arrow_down.svg);
	width: 15px;
	height: 15px;
	margin: 0 0 0 4px;
	vertical-align: text-top;
}

#specialday_nav .wrap div div .nav { margin-bottom: 0; }

#specialday_nav .wrap div div .nav::before {
	content: url(../img/search.svg);
	width: 15px;
	height: 15px;
	margin: 0 7px 0 0;
	vertical-align: text-top;
}

#specialday_nav .wrap div div .nav a {
	font-size: 16px;
	border-bottom: 1px solid #fff;
}

#specialday_nav .wrap div div > a > span:last-child { font-size: 24px; }

@media screen and (max-width:767px) {
	#specialday_nav .wrap { width: 100%; }
	#specialday_nav .wrap h3 {
		top: -4vw;
		left: 27.5vw;
		font-size: 2.4vw;
		width: 45vw;
		padding: 1vw 1.5vw;
	}
	#specialday_nav .wrap h3 span:first-child { font-size: 4.8vw; }
	#specialday_nav .wrap h3 span:last-child { font-size: 3.47vw; }

	#specialday_nav .wrap .flexcontainer { padding: 4vw 5.6vw 0; }
	#specialday_nav .close .flexcontainer { padding-top: 0; }

	#specialday_nav .wrap div div {
		margin: 3vw 0 1vw;
		padding: 0 0 3vw 5.6vw;
		text-align: left;
		width: auto;
	}
	#specialday_nav .wrap div div > a > span:first-child {
		float: left;
		font-size: 3.73vw;
		margin: 2vw 2vw 0 0;
	}
	#specialday_nav .wrap div div:first-child {
		margin-left: 0;
		border-right: 0;
		border-bottom: 3px solid #221815;
	}

	#specialday_nav .wrap div div > a::after,
	#specialday_nav .wrap div div .nav::before {
		width: 4vw;
		height: 4vw;
		margin: 0 0 0 1.4vw;
		vertical-align: bottom;
	}

	#specialday_nav .wrap div div .nav a { font-size: 3.73vw; }
	#specialday_nav .wrap div div > a > span:last-child { font-size: 4.8vw; }

	#specialday_nav .wrap div div:last-child > a > span:first-child { margin-bottom: 4vw; }
}

/*------------------------------------------------------------
  intro
  ------------------------------------------------------------ */
#intro,
#letsgo {
	background: url("../img/background_dot.png") repeat 50% 40%;
	padding: 0;
}

#intro .wrap {
	width: 1164px;
	margin: 0 auto;
	padding: 70px 0 45px;
	position: relative;
}

#intro .wrap p {
	font-size: 20px;
	line-height: 1.8;
}

#intro .wrap p:first-child {
	font-size: 24px;
	font-weight: bold;
}

#intro .img { position: absolute; }

#img_intro_01 { top: 30px; left: 0; }

#img_intro_02 {
	z-index: 5;
	right: 0;
	bottom: -35px;
}

@media screen and (max-width:767px) {
	#intro .wrap {
		width: auto;
		padding: 12vw 5.33vw 12vw;
	}
	#intro .wrap p,
	.contents_wrap > section > .wrap p { font-size: 4.4vw; margin: 0 .5em 1em; }
	#intro .wrap p:first-child { font-size: 4.8vw; line-height: 1.6; }

	.contents_wrap > section > .wrap p ruby[data-ruby]::before,
	.contents_wrap .modal_viewarea_text ruby[data-ruby]::before {
		font-size: 1.7vw;
		top: -1.2em;
		letter-spacing: -.1em;
		overflow: visible;
		white-space: nowrap;
	}
	#img_intro_01 { top: 6vw; left: 6vw; }
	#img_intro_01 img { width: 24vw; height: auto; }
	#img_intro_02 { bottom: -3.5vw; }
	#img_intro_02 img {
		width: 17vw;
		height: auto;
	}
}

/*------------------------------------------------------------
  museum
  ------------------------------------------------------------ */
#museum {
	background: url("../img/museum_background.png") no-repeat center;
	padding: 0;
	height: 1657px;
}

#museum .wrap { padding-top: 95px; }

#museum .wrap h3 { text-align: center; }

#museum .wrap .wrap {
	position: relative;
	width: 1164px;
	height: 1210px;
	margin: auto;
	padding: 5px 0 0;
}

#museum .wrap .wrap a:hover { opacity: unset; }

@media screen and (min-width:768px) {
	#museum .wrap .wrap #room_01,
	#museum .wrap .wrap #room_02 #img_room_02a,
	#museum .wrap .wrap #room_02 #img_room_02b,
	#museum .wrap .wrap #room_03 #img_room_03a,
	#museum .wrap .wrap #room_03 #img_room_03b,
	#museum .wrap .wrap #room_04 #img_room_04,
	#museum .wrap .wrap #room_05,
	#museum .wrap .wrap #room_06 { transition: transform 0.2s linear; }
	#museum .wrap .wrap #room_01:hover,
	#museum .wrap .wrap #room_02 #img_room_02a:hover,
	#museum .wrap .wrap #room_02 #img_room_02b:hover,
	#museum .wrap .wrap #room_03 #img_room_03a:hover,
	#museum .wrap .wrap #room_03 #img_room_03b:hover,
	#museum .wrap .wrap #room_04 #img_room_04:hover,
	#museum .wrap .wrap #room_05:hover,
	#museum .wrap .wrap #room_06:hover { transform: scale(1.1); }
}

#museum .wrap .wrap #room_01 {
	position: absolute;
	top: 82px;
	left: 42px
}

#museum .wrap .wrap #room_02 h4 {
	position: absolute;
	top: 438px;
	left: -2px;
}

#museum .wrap .wrap #room_02 #img_room_02a {
	position: absolute;
	top: 512px;
	left: 103px;
}
#museum .wrap .wrap #room_02 #img_room_02b {
	position: absolute;
	top: 818px;
	left: 86px;
}

#museum .wrap .wrap #room_03 h4 {
	position: absolute;
	top: 134px;
	left: 566px;
}

#museum .wrap .wrap #room_03 #img_room_03a {
	position: absolute;
	top: 347px;
	left: 597px;
}

#museum .wrap .wrap #room_03 #img_room_03b {
	position: absolute;
	top: 347px;
	left: 862px;
}

#museum .wrap .wrap #room_04 h4 {
	position: absolute;
	top: 780px;
	left: 566px;
}

#museum .wrap .wrap #room_04 #img_room_04 {
	position: absolute;
	top: 949px;
	left: 722px;
}

#museum .wrap .wrap #room_05 {
	position: absolute;
	top: 1089px;
	left: 30px;
}

#museum .wrap .wrap #room_06 {
	position: absolute;
	top: 1089px;
	left: 276px;
}

@media screen and (max-width:767px) {
	#museum {
		background: url(../img/museum_background_sp.png);
		background-size: cover;
		height: unset;
		min-height: unset;
	}
	#museum > .wrap { padding-top: 3vw; }
	#museum .wrap h3 { margin-bottom: 10vw; }
	#museum .wrap h3 img { width: 88.8vw; height: auto; }
	#museum .wrap .wrap {
		width: 100vw;
		height: 625vw;
	}

	#museum .wrap .wrap #room_01 {
		 top: -2vw;
		left: 9.33vw;
	}
	#museum .wrap .wrap #room_01 img { width: 78.1vw; height: auto; }

	#museum .wrap .wrap #room_02 h4,
	#museum .wrap .wrap #room_03 h4,
	#museum .wrap .wrap #room_04 h4 { display: none; }

	#museum .wrap .wrap #room_02 #img_room_02a {
		top: 94vw;
		left: 12vw;
	}
	#museum .wrap .wrap #room_02 #img_room_02b {
		top: 156vw;
		left: 12vw;
	}
	#museum .wrap .wrap #room_02 #img_room_02a img,
	#museum .wrap .wrap #room_02 #img_room_02b img {
		width: 74.93vw;
		height: auto;
	}

	#museum .wrap .wrap #room_03 #img_room_03a {
		top: 239vw;
		left: 14vw;
	}
	#museum .wrap .wrap #room_03 #img_room_03b {
		top: 299vw;
		left: 14vw;
	}
	#museum .wrap .wrap #room_04 #img_room_04 {
		top: 417vw;
		left: 14vw;
	}
	#museum .wrap .wrap #room_03 #img_room_03a img,
	#museum .wrap .wrap #room_03 #img_room_03b img,
	#museum .wrap .wrap #room_04 #img_room_04 img {
		width: 70vw;
		height: auto;
	}

	#museum .wrap .wrap #room_05 {
		top: 506vw;
		left: 20vw;
	}
	#museum .wrap .wrap #room_06 {
		top: 558vw;
		left: 20vw;
	}
	#museum .wrap .wrap #room_05 img,
	#museum .wrap .wrap #room_06 img{
		width: 60.8vw;
		height: auto;
	}
}

/*------------------------------------------------------------
  specialday
  ------------------------------------------------------------ */
#specialday {
	background: #f9f172;
	border-top: 3px solid #000;
	border-bottom: 3px solid #000;
}

#specialday .wrap {
	width: 1110px;
	margin: 0 auto;
	padding: 70px 0;
	position: relative;
}

#specialday h3 {
	color: #0058be;
	font-size: 36px;
	text-align: center;
	margin-bottom: 12px;
}

#specialday .wrap .flexcontainer { margin-top: 22px; }

#specialday .wrap .flexcontainer > div {
	width: 464px;
	margin: 0;
	padding: 34px 21px 108px;
	border: 2px solid #221815;
	background: #fff;
	position: relative;
}

#specialday .wrap .flexcontainer > div:first-child { margin-right: 90px; }

#specialday .wrap .flexcontainer > div > h4 {
	color: #ea5550;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}
#specialday .wrap .flexcontainer > div:first-child > h4 { color: #0058be; }


#specialday .wrap .flexcontainer > div > h4 span {
	color: #fff;
	background: #0058be;
	border: 2px solid #221815;
	font-size: 16px;
	vertical-align: top;
	display: inline-block;
	padding: 5px 5px 3px;
}

#specialday .wrap .flexcontainer > div > h4 + .img img {
	display: block;
	width: 383px;
	height: auto;
	border: 2px solid #221815;
	margin: 33px auto 30px;
}

#specialday .wrap .flexcontainer > div > h5 {
	font-size: 24px;
	text-align: center;
}

#specialday .wrap .flexcontainer > div > p {
	font-size: 20px;
}

#specialday .wrap .flexcontainer > div > h5 + p {
	text-align: center;
	border-bottom: 2px solid #221815;
	padding-bottom: 10px;
}

#specialday .wrap .flexcontainer > div > .small {
	font-size: 14px;
	text-align: left;
	margin-bottom: .36em;
}
#specialday .wrap .flexcontainer > div:first-child > .small + .small {
	color: #ea5550;
}

#specialday .wrap .flexcontainer > div > table { margin-bottom: .75em; }

#specialday .wrap .flexcontainer > div > table th,
#specialday .wrap .flexcontainer > div > table td {
	text-align: left;
	font-weight: normal;
	padding: 0 2px 4px;
	line-height: 1.6;
}

#specialday .wrap .flexcontainer > div > table + .img {
	float: right;
	margin: -124px 46px 0 0;
}

#specialday .wrap .flexcontainer div .nav {
	position: absolute;
	bottom: 18px;
	left: 0;
	width: 100%;
}

#specialday .wrap .flexcontainer div .nav a {
	display: block;
	width: 385px;
	height: 60px;
	margin: auto;
	color: #fff;
	background: #ea5550;
	border: 2px solid #221815;
	border-radius: 40px;
	font-size: 18px;
	line-height: 60px;
	text-align: center;
	box-shadow: 0 3px 0 #000;
}
#specialday .wrap .flexcontainer > div:first-child .nav a { background: #0058be; }

@media screen and (max-width:767px) {
	#specialday .wrap {
		width: calc(100% - 10.66vw);
		padding: 9.6vw 5.33vw;
		overflow: hidden;
	}
	#specialday h3 {
		font-size: 8vw;
		line-height: 1.25;
		margin-bottom: 3vw;
	}
	#specialday .wrap p { font-size: 4.5vw; }

	#specialday .wrap .flexcontainer { margin-top: 3vw; }
	#specialday .wrap .flexcontainer > div {
		width: unset;
		margin: 0;
		padding: 6.4vw 6.67vw;
	}
	#specialday .wrap .flexcontainer > div:first-child { margin: 0 0 7vw; }

	#specialday .wrap .flexcontainer > div > h4 {
		font-size: 6.4vw;
	}

	#specialday .wrap .flexcontainer > div > h4 span {
		font-size: 3.73vw;
		font-weight: normal;
		margin-bottom: 3vw;
	}

	#specialday .wrap .flexcontainer > div > h5 {
		font-size: 5.33vw;
		margin-bottom: 3vw;
	}

	#specialday .wrap .flexcontainer > div > h5 + p {
		padding-bottom: .75em;
		margin: 0 0 1em;
	}

	#specialday .wrap .flexcontainer > div > h4 + .img img { width: 100%; }

	#specialday .wrap .flexcontainer > div > p,
	#specialday .wrap .flexcontainer > div > table th,
	#specialday .wrap .flexcontainer > div > table td {
		font-size: 4.53vw;
		line-height: 1.4;
	}
	#specialday .wrap .flexcontainer > div > .small {
		font-size: 3.0vw;
		margin: 0 0 .36em;
	}
	#specialday .wrap .flexcontainer div .nav {
		position: relative;
		bottom: unset;
		left: unset;
		margin: 7vw 0 0;
	}
	#specialday .wrap .flexcontainer div .nav a {
		font-size: 4.8vw;
		font-weight: bold;
		width: auto;
	}
	#specialday .wrap .flexcontainer > div > table + .img {
		float: right;
		margin: -23vw -19.5vw 0 0;
		transform: rotate(-45deg);
	}
	#specialday .wrap .flexcontainer > div > table + .img img { width: 21vw; }

}

/*------------------------------------------------------------
  letsgo
  ------------------------------------------------------------ */
#letsgo .wrap {
	width: 1110px;
	margin: 0 auto;
	padding: 40px 0;
	position: relative;
}

#letsgo .wrap h3 {
	text-align: center;
	margin-bottom: 27px;
}

#letsgo .wrap h3 .close { margin-top: 18px; }

#letsgo .wrap p {
	margin-bottom: 40px;
	font-size: 20px;
	line-height: 1.8;
}

#letsgo .wrap #letsgo_guide {
	width: 340px;
	float: left;
}

#letsgo .wrap #letsgo_guide h4 {
	display: inline-block;
	color: #0058be;
	font-size: 18px;
	line-height: 1.25;
	text-align: center;
	margin-bottom: 24px;
}

#letsgo .wrap #letsgo_guide h4 span {
	font-size: 30px;
}

#letsgo .wrap #letsgo_guide p {
	font-size: 14px;
	margin-bottom: 0;
}

#letsgo .wrap #letsgo_guide p:last-child {
	margin-bottom: 28px;
}

#letsgo .wrap #letsgo_guide ul,
#letsgo .wrap #letsgo_guide ul li { list-style: none; }

#letsgo .wrap #letsgo_guide ul {
	width: 100%;
	float: right;
}

#letsgo .wrap #letsgo_guide ul li a {
	display: block;
	height: 60px;
	margin: 0 auto 35px;
	color: #221815;
	background: #fff;
	border: 2px solid #221815;
	border-radius: 40px;
	font-size: 18px;
	font-weight: bold;
	line-height: 60px;
	text-align: center;
	box-shadow: 0 3px 0 #000;
}

#letsgo .wrap #letsgo_guide ul li:last-cjild {
	margin-bottom: 0;
}

#letsgo .wrap #letsgo_sns {
	position: relative;
	float: right;
	width: 674px;
	height: 288px;
	background: url('../img/letsgo_sns.png') no-repeat;
	padding: 30px 24px;
}

#letsgo .wrap #letsgo_sns h4 {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}

#letsgo .wrap #letsgo_sns p {
	font-size: 19px;
	text-align: center;
	line-height: 1.5;
}

#letsgo .wrap #letsgo_sns p span {
	color: #0058be;
	font-weight: bold;
	background: #fff;
}

#letsgo .wrap #letsgo_sns ul,
#letsgo .wrap #letsgo_sns ul li { list-style: none; }

#letsgo .wrap #letsgo_sns ul li a {
	display: block;
	border: 0;
	position: absolute;
	bottom: 30px;
	left: 125px;
}

#letsgo .wrap #letsgo_sns ul li:last-child a { left: 295px; }

@media screen and (max-width:767px) {
	#letsgo .wrap {
		width: calc(100% - 10.66vw);
		padding: 4vw 5.33vw 9.6vw;
	}
	#letsgo .wrap h3 { margin-bottom: 4vw; }
	#letsgo .wrap h3 img { width: 100%; height: auto; }
	#letsgo .wrap h3 .close { width: 80%; margin-top: 12px; }

	#letsgo .wrap .btn_ended img { width: 70vw; }
	#letsgo .wrap #letsgo_guide,
	#letsgo .wrap #letsgo_sns { width: 100%; float: unset; }
	#letsgo .wrap #letsgo_guide > div,
	#letsgo .wrap #letsgo_guide ul {
		float: none;
	}
	#letsgo .wrap #letsgo_guide > div {
		margin-bottom: 2em;
	}
	#letsgo .wrap #letsgo_guide ul { margin-bottom: 14vw; }
	#letsgo .wrap #letsgo_guide ul li a {
		height: 12vw;
		font-size: 4.8vw;
		line-height: 12vw;
		padding-left: 1.5em;
		margin: 0 auto 5vw;
	}
	#letsgo .wrap #letsgo_guide ul li a::after { margin: 1.2em 7vw 0 0;  }
	#letsgo .wrap p { font-size: 4.8vw; margin: 1.5em 0; text-align: left; }
	#letsgo .wrap #letsgo_guide h4 {
		display: block;
		text-align: left;
		font-size: 4.2vw;
	}
	#letsgo .wrap #letsgo_guide h4 span { font-size: 6.4vw; line-height: 1.5; }
	#letsgo .wrap #letsgo_guide p {
		font-size: 3.2vw;
		margin: 0;
	}

	#letsgo .wrap #letsgo_sns .forSP { display: inline-block; }
	#letsgo .wrap #letsgo_sns .forPC { display: none; }
	#letsgo .wrap #letsgo_sns {
		width: calc(100% - 9vw);
		height: 96vw;
		margin: 5vw -5.33vw 0 0;
		padding: 9.6vw 10vw 20vw 4.27vw;
		background: url('../img/letsgo_sns_sp.png') no-repeat;
		background-size: cover;
	}

	#letsgo .wrap #letsgo_sns h4 {
		font-size: 6.4vw;
		margin-bottom: 5vw;
		padding: 0 3vw 0 4vw;
	}
	#letsgo .wrap #letsgo_sns p {
		font-size: 4.8vw;
		margin: 1em 0;
	}

	#letsgo .wrap #letsgo_sns ul li a {
		top: 81vw;
		left: 6vw;
	}
	#letsgo .wrap #letsgo_sns ul li:last-child a { left: 44vw; }
	#letsgo .wrap #letsgo_sns ul li a img {
		width: auto;
		height: 25vw;
	}
}

/*------------------------------------------------------------
  supplement
  ------------------------------------------------------------ */
#supplement {
	background: #B7DED5;
	border-top: 3px solid #000;
	border-bottom: 3px solid #000;                                                                      
	padding: 26px 0 76px;
}

#supplement .wrap {
	width: 1152px;
	margin: auto;
}

#supplement .wrap .flexcontainer { padding: 136px 21px 0; }

#supplement .box {
	position: relative;
	width: 543px;
	background: #fff;
	border: 2px solid #221815;
	border-top: none;
	border-radius: 0 0 10px 10px;
}

#supplement .box h3 {
	position: absolute;
	top: -136px;
}
#supplement #notice h3 { left: -23px; }
#supplement #educational h3 { right: -23px; }

#supplement #notice { margin-right: 16px; }

#supplement .box div { padding: 36px 22px 110px; }

#supplement .box div ul { padding-left: 20px; }
#supplement .box div ul li {
	font-weight: bold;
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: .5em;
}
#supplement #notice div ul { color: #0058be; }
#supplement #notice div ul li { margin-bottom: .7em; }

#supplement .box div ul li span {
	font-size: 15px;
}

#supplement .box div h4 {
	display: inline-block;
	color: #fff;
	background: #0058be;
	padding: .4em 2em .3em;
	font-size: 20px;
	font-weight: normal;
	margin: .5em 0;
}

#supplement .box div p {
	font-size: 18px;
	text-align: left;
}

#supplement .box div .nav,
.modal_content .nav {
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
}

#supplement #educational .nav { margin-top: 50px; }

#supplement .box div .nav a,
.modal_content .nav a,
.modal_content .dl a {
	display: block;
	width: 340px;
	height: 60px;
	margin: auto;
	color: #fff;
	background: #ea5550;
	border: 2px solid #221815;
	border-radius: 40px;
	font-size: 18px;
	line-height: 60px;
	text-align: center;
	box-shadow: 0 3px 0 #000;
}
.modal_content .dl a {
	background: #eb6100;
	text-align: left;
}

#supplement .wrap #archive {
	content: "";
	display: block;
	clear: both;
}

@media screen and (max-width:767px) {
	#supplement .wrap { width: 100vw; }
	#supplement .wrap .flexcontainer {
		padding: 35vw 0 0 5.33vw;
	}
	#supplement .box {
		width: calc(100vw - 12.75vw);
		margin: 0 0 40vw;
		padding: 0;
	}
	#supplement #notice {}
	#supplement #educational { margin-bottom: 12vw; }
	#supplement .box div {
		margin: 0;
		padding: 4vw 5vw 5vw;
	}

	#supplement .box div ul li { font-size: 4.8vw; }
	#supplement .box div h4 { font-size: 4.8vw; }
	#supplement .box div p { font-size: 4.8vw; }
	#supplement .box div ul li span { font-size: 4.8vw; }

	#supplement #notice h3,
	#supplement #educational h3 {
		top: -36vw;
		left: -1.6vw;
		right: unset;
	}
	#supplement #educational h3 { top: -34vw; }

	#supplement .box h3 img,
	#supplement .box h3 img {
		width: calc(100vw - 5.33vw);
		height: auto;
		right: unset;
		left: unset;
	}
	#supplement .box div .nav {
		position: relative;
		width: 100%;
		margin: 1.5em auto 0;
	}
	#supplement .box div .nav a {
		width: 74.67vw;
		font-size: 4.8vw;
		line-height: 15vw;
		height: 15vw;
		margin: 0;
		border-radius: 16vw;
	}
}

/*------------------------------------------------------------
  archive
  ------------------------------------------------------------ */
#archive {
	width: 1110px;
	margin: 40px auto 0;
	text-align:center;
}
#archive p {
	font-size: 20px;
	margin-bottom: 24px;
}
#archive h4 {
	margin-bottom: 24px;
	font-size:24px;
	color:#434343;
	font-weight: bold;
}
#archive ul {
	margin: 0 auto;
	list-style: none;
}
#archive ul li {
	padding: 0 8px 0 4px;
	margin-bottom: .2em;
	border-right: solid 1px #434343;
	list-style: none;
	display: inline-block;
}

#archive ul li:last-child { border: none; }

#archive ul li a {
	display: inline-block;
	font-size: 20px;
	color:#434343;
	line-height:1;
	border-bottom: 1px solid transparent;
	padding: 2px 0;
	white-space: nowrap;
}
#archive ul li a:hover { border-bottom: 1px solid #434343; }

@media screen and (max-width:767px) {
	#archive {
		width: 90vw;
		margin-bottom: 10vw;
		padding: 0 5vw;
	}
	#archive p { font-size: 4.8vw; margin: 0 5vw 1.5em; }
	#archive h4 { font-size: 6.4vw; }
	#archive ul { margin: 0 3vw; }
	.wrap #archive ul li { padding: .8vw 2.5vw .8vw 1vw; border: none; }
	.wrap #archive ul li:nth-child(odd) { border-right: solid 1px #434343; }
	#archive ul li a { font-size: 4.5vw; }
}



/*------------------------------------------------------------
  modal
  ------------------------------------------------------------ */

.modal {
	box-sizing: border-box;
	z-index: 100;
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
}
.modal_bg {
	box-sizing: border-box;
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
}
.modal_content .js-modal-close {
	content: '';
	width: 37px;
	height: 37px;
	position: absolute;
	top: -3vw;
	right: -2vw;
	opacity: 0.8;
	background: url('../img/icon_close.svg') no-repeat center;
}

.modal_content {
	box-sizing: border-box;
	background: #fff;
	left: 50%;
	padding: 30px 72px 40px;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 1110px;
	text-align: left;
	border-radius: 20px;
}

#museum .modal .modal_content a:hover { opacity: .7; }
#museum .modal .modal_content .modal_nav a:hover,
.modal_content .js-modal-close:hover { opacity: .7; }

.narrow_head_modal .js-modal-close { top: .2vw; right: -3.2vw; }

.modal_viewarea_wrap.movie { text-align: center; }

.modal_content .modal_viewarea_text {
	width: 560px;
	margin: 20px auto 0;
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
}

.modal_content ul.modal_nav,
.modal_content ul.modal_nav li { list-style: none; }

.modal_content ul.modal_nav li a {
	display: block;
	border: 0;
	position: absolute;
	top: calc(50% - 31px);
	width: 60px;
	height: 62px;
	overflow: hidden;
	text-indent: -50em;

}
.modal_content ul.modal_nav li.prev a { left: -3.1%; background: url('../img/arrow_left.png') no-repeat center; background-size: contain; }
.modal_content ul.modal_nav li.next a { right: -3.1%; background: url('../img/arrow_right.png') no-repeat center; background-size: contain; }

.modal_content h4 { margin-bottom: 20px; }

.modal_content .text {
	font-size: 16px;
	line-height: 1.6;
	width: 580px;
	float: left;
}

.modal_content .bottomRow { width: 100% !important; }

.modal_content .text p { margin-bottom: 1em; }

.modal_content .small { font-size: smaller; }

.modal_content .rightCol {
	float: right;
}

.modal_content .bottom {
	position: absolute;
	bottom: 30px;
	left: 45px;
}

.modal_content hr {
	border-width: 2px 0 0;
	border-color: #c9c9c9;
	border-style: dotted;
}

.modal_content .nav,
.modal_content .dl {
	width: 224px;
	margin-top: 20px;
}

.modal_content .nav a,
.modal_content .dl a {
	width: 180px;
	height: 46px;
	font-size: 14px;
	line-height: 46px;
	padding-left: 2.5vw;
}
.modal_content .nav a::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	float: right;
	transform: rotate(-45deg);
	margin: 1.2em 18px 0 0;
}

.modal_content .dl a::after {
	content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAZCAYAAADaILXQAAABOklEQVRIieWUsUoDQRCG/40xpbaCbYrgA2hj4QukEQsLH0bwKQK2drHxCYS8QASxEpIitiYRVCzMJ4NzeIa7uBsvhfg3dzM7883ssLtKEbAFhKSkGAFnfOp8FfBrhw9ic2pL1IkeyzLwaP0PePIuUxI2/Pv6KzjQAo6AesHyWy6uDhwCO1HVgHVg4mf6Cmi4v+++vtsNXzc9ZXE/dT6TNPH/tqTufKLbXV83PUp6j+2+CYz4knV459ZNrmM8rhkFXlAg0zQaDHSAZ+A4oUAp2DjO65gx9uDLhB2UdmwcjxnXcg/RWlFwCOFe0r6kF3fZUTxwf5EyToi6RCGEoaQ9SReSdheAv6nokpQVuJV0EhuvP/0q5sdi78lpBcxW9hPsHZG0WQF0XlMbS28FYFPPOrdzuV3x/GeSHj4AsmJHi1r3PI0AAAAASUVORK5CYII=');
	width: 20px;
	height: 20px;
	float: right;
	margin: 7px 21px 0 0;
}
.modal_content .icon_dlEnded {
	float: left;
	margin: 25px 0 0 30px;
    padding: 9px 15px;
    background: #e54b15;
    border-radius: 50px;
	color: #fff;
	text-align: center;
	line-height: 1.2em;
	font-weight: normal;
}

#modal_room_01 .modal_content .text { width: 652px; }
#modal_room_01 .modal_content .rightCol { margin-right: -40px; }

#modal_room_01 .modal_content .text p { margin-bottom: 1.2em; }
#modal_room_03b .modal_content .text p { margin-bottom: .2em; }

#modal_room_03b .modal_content .dl,
#modal_room_04 .modal_content .dl {
	width: 100%;
	margin-top: 12px;
	margin-bottom: 18px;
}
#modal_room_03b .modal_content .dl a,
#modal_room_04 .modal_content .dl a {
	width: calc(100% - 2vw);
	padding-left: 1.5vw;
	margin: auto;
	font-weight: bold;
}

#modal_room_03b .modal_content .text a,
#modal_room_03b .modal_content .text a:link,
#modal_room_03b .modal_content .text a:visited,
#modal_room_04 .modal_content .text a,
#modal_room_04 .modal_content .text a:link,
#modal_room_04 .modal_content .text a:visited {
	color: #0058be;
	text-decoration: underline;
}

#modal_room_03b .rightCol .img { display: block; margin-bottom: 20px; }
#modal_room_03b .rightCol .img:last-child { position: absolute; bottom: 5px; right: 125px; }
#modal_room_03b h4:after,forPC,#modal_room_03b h4:after { content:""; display: block; clear: both; }
#modal_room_03b h4 img.forPC,#modal_room_03b h4 img.forPC { float: left; }

#modal_room_04 .nav { margin: -68px 0 0; }
#modal_room_04 .nav a { width: 190px; }

#modal_room_03b .modal_content .text,
#modal_room_04 .modal_content .text { width: 650px; }

#modal_room_05 .modal_content .text,
#modal_room_06 .modal_content .text { width: 100%; }

#modal_room_05 .modal_content .text .img,
#modal_room_06 .modal_content .text .img {
	position: absolute;
	right: 74px;
	top: 42px;
}


.modal_content .text div article {
	width: 469px;
	margin: 10px 25px 0 0;
}
.modal_content .text div article:last-child { margin-right: 0; }

.modal_content .text div article h5 {
	height: 42px;
	font-size: 16px;
	font-weight: bold;
	line-height: 42px;
	padding-left: 44px;
	background: url('../img/q1.png') no-repeat 0% 15%;
	background-size: 9%;
	margin: 0 0 23px;
}
.modal_content .text div article:last-child h5 { background-image: url('../img/q2.png'); }

.modal_content .text div article h5::after {
	content: '';
	display: block;
	width: 469px;
	height: 8px;
	border-radius: 8px;
	background: #0058be;
	margin: 0 0 0 -44px;
}

.modal_content .text article .staff_1st dt,
.modal_content .text article .staff_2nd dt,
.modal_content .text article .staff_3rd dt,
.modal_content .text article .staff_4th dt {
	height: 43px;
	font-size: 16px;
	font-weight: bold;
	line-height: 43px;
	padding-left: 54px;
	background: url('../img/staff_red.png') no-repeat 0% 50%;
	background-size: contain;
}
.modal_content .text article .staff_2nd dt { background-image: url('../img/staff_blue.png'); }
.modal_content .text article .staff_3rd dt { background-image: url('../img/staff_green.png'); }
.modal_content .text article .staff_4th dt { background-image: url('../img/staff_orange.png'); }

.modal_content .text article:last-child dl dt { visibility: hidden; }

.modal_content .text article dl dd {
	font-size: 16px;
	line-height: 1.5;
	margin: 10px 0;
}
.modal_content .text article dl.staff_1st dd,
.modal_content .text article dl.staff_3rd dd {
	padding-bottom: 15px;
	border-bottom: 2px dotted #C9C9C9;
}
.modal_content .text article dl.staff_1st dd { color: #ea5550; height: 7.5em; }
.modal_content .text article dl.staff_2nd dd { color: #0058be; }
.modal_content .text article dl.staff_3rd dd { color: #477800; height: 6.5em; }
.modal_content .text article dl.staff_4th dd { color: #eb6100; }

#modal_room_05 .modal_content .text p:last-child,
#modal_room_06 .modal_content .text p:last-child {
	font-size: 16px;
	font-weight: bold;
	text-align: right;
	margin-bottom: 0;
}

@media screen and (max-width:767px) {
	/* .modal .modal_content .forSP { display: inline-block; } */
	/* .modal .modal_content .forPC { display: none; } */

	.modal_content .js-modal-close {
		top: -10vw;
		right: -6vw;
	}

	.modal_content,
	#modal_room_03a .modal_content {
		padding: 3vw 0 3vw 3vw;
		margin: -4vw 0 0;
		width: 85vw;
		max-height: 84vh;
		padding-bottom: 2vh;
	}

	.modal_content .modal_viewarea_wrap {
		width: 92%;
		max-height: 80vh;
		overflow: auto;
		padding: 0 3vw 0 3vw;
	}

	.modal_content .modal_viewarea_text {
		width: 90%;
		margin: 2vw auto;
		font-size: 4.1vw;
		line-height: 1.5;
	}

	.modal_viewarea_wrap img,
	.modal_viewarea_text img { width: 100%; height: auto; }

	#modal_room_02a .modal_content,
	#modal_room_02b .modal_content,
	#modal_room_02c .modal_content { padding-right: 3vw; }
	#modal_room_02a .modal_content .modal_viewarea_wrap,
	#modal_room_02b .modal_content .modal_viewarea_wrap,
	#modal_room_02c .modal_content .modal_viewarea_wrap { padding-right: 0; }

	.modal_content ul.modal_nav li a {
		opacity: 1.0;
		display: block;
		top: calc(50% - 3vw);
		width: 9vw;
		height: 9.3vw;
		background-size: cover;
	}
	.modal_content ul.modal_nav li.prev a { left: -8%; background-size: cover; }
	.modal_content ul.modal_nav li.next a { right: -8%; background-size: cover; }

	.modal_content h4 { margin-bottom: 1em; }
	.modal_content h4 img { max-width: 74vw; }
	.modal_content .text p { font-size: 4.1vw; }
	.modal_content .text .small { font-size: smaller; }

	.modal_content .text,
	#modal_room_05 .modal_content .text { width: auto !important; }

	.modal_content .rightCol { float: none; text-align: center; }
	.modal_content .bottom {
		position: initial;
		display: block;
		margin: 1em 0 0;
		text-align: center;
	}
	.modal_content .movie {
		width: 96%;
		padding: 56.25% 0 0 0;
		position: relative;
	}
	.modal_content .movie iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 10px;
	}

	#modal_room_03b h4 img.forPC,
	#modal_room_04 h4 img.forPC {
		float: none;
	}
	#modal_room_03b .bottomRow .img,
	#modal_room_04 .bottomRow .img { text-align: center; }
	#modal_room_03b .bottomRow .img img,
	#modal_room_04 .bottomRow .img img { width: 32%; }

	.modal_content .icon_dlEnded {
		display: block;
		float: none;
		width: 80%;
		margin: 4vw 0 0;
		padding: 1.8vw 2.5vw;
		border-radius: 6.5vw;
		font-size: 4.2vw;
	}

	.modal_content .nav a,
	.modal_content .dl a { padding-left: 9vw; }
	#modal_room_03b .modal_content .dl a,
	#modal_room_04 .modal_content .dl a {
		width: calc(100% - 3vw);
		padding-left: 3vw;
	}
	#modal_room_03b .modal_content .text,
	#modal_room_03b .modal_content .rightCol img,
	#modal_room_04 .modal_content .text,
	#modal_room_04 .modal_content .rightCol img { width: 100%; }

	#modal_room_01 .modal_content .img img { width: 73vw; }

	#modal_room_05 .modal_content .text .img,
	#modal_room_06 .modal_content .text .img { position: static; margin: 0 29vw 2vw; }

	.modal_content .text .flexcontainer dl,
	.modal_content .text .flexcontainer dl dd::before { width: 100%; }

	.modal_content .text div article {
		font-size: 4.26vw;
		width: 74vw;
		margin: 6vw 0;
	}
	.modal_content .text div article h5 {
		line-height: 1.4;
		background-size: 14%;
		margin: 0 0 26px;
	}
	.modal_content .text div article h5::after {
		width: 72vw;
	}

	.modal_content .text article dl dt {
		line-height: 1.4 !important;
		font-size: 4.26vw !important;
	}

	.modal_content .text article dl.staff_1st dd,
	.modal_content .text article dl.staff_3rd dd { height: auto; }

	.modal_content .text .flexcontainer dl:first-child dt {
		line-height: 7vw;
	}
	.modal_content .text .flexcontainer dl:last-child dd { margin-top: 5vw; }

	.modal_content .text article:last-child dl dt { visibility: unset; }

	#modal_room_05 .modal_content .text p:last-child,
	#modal_room_06 .modal_content .text p:last-child { text-align: center; }
}