@charset "utf-8";

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

#suntory_contents .contents_wrap {
	background-color:#f0f0ea;
	padding: 0;
}
#suntory_contents .breadcrumbs {
	margin: 0;
	background: #fff;
}
@media screen and (min-width: 768px) {
	#suntory_contents .breadcrumbs { padding: 18px 0; }
	#suntory_contents #sma_footer { padding-top: 20px; }
}

@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;
}

/*------------------------------------------------------------
  contentsWrapper
  ------------------------------------------------------------ */
#suntory_contents .contentsWrapper{
	width:960px;
	margin:0 auto;
}

@media screen and (max-width:767px) {
	#suntory_contents .contentsWrapper{
		width:auto;
	}
}

/*------------------------------------------------------------
  main
  ------------------------------------------------------------ */
#suntory_contents #main{
	position:relative;
	width:960px;
	margin:0 auto 50px;
}

@media screen and (max-width:767px) {
	#suntory_contents #main{
		width:auto;
		margin:0 auto 25px;
	}
	#suntory_contents #main img{
		width:100%;
	}
}

.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; }
}

@media screen and (max-width:767px) {
	.forPC { display: none; }
}


/*------------------------------------------------------------
  keyVisual
  ------------------------------------------------------------ */
#key {
	background: url("../img/key_background.png") repeat;
	padding: 50px 0 40px;
}

#key .wrap {
	width: 1196px;
	margin: 0 auto;
}

#key .wrap div { float: right; margin: 13px 20px 0 0; }

#key .wrap .img:first-child { margin-left: 7px; }

#key .wrap .img:last-child { float: left; margin: 5px 9px 0;}

#key h2 { margin-top: 31px; }

#key .wrap .img.btn_ended { margin: 22px 0 0; }

@media screen and (min-width:768px) and (max-width:1270px) {
	#key .wrap { width: 90%; }
	#key .wrap div img { width: 45vw; /* org:583px */ }
	#key .wrap h2 img { width: 46vw; /* org:594px */ }
	#key .wrap .img:last-child img { width: 42vw; /* org:534px */ }
}

@media screen and (min-width:768px) and (max-width:1540px) {
	#key .wrap div { margin: 13px 0 0; }
	#key .wrap .img:last-child { margin: 5px 0 0; }
	#key .wrap .img.btn_ended { margin: 22px 0 0; }
}

@media screen and (max-width:767px) {
	#key { padding: 8vw 0; }
	#key .wrap { width: auto; }
	#key .wrap div,
	#key .wrap .img:last-child,
	#key .wrap .img:first-child {
		float: none;
		margin: 0;
	}
	#key .wrap img {
		margin: 0 auto;
		display: block;
	}
	#key .wrap div img { width: 80vw; }
	#key .wrap h2 { margin-top: 5vw; }
	#key .wrap h2 img { width: 80vw; }
	#key .wrap .img:last-child img { width: 70vw; margin-top: 5vw; }
}

/*------------------------------------------------------------
  intro
  ------------------------------------------------------------ */
#intro {
	background: url("../img/intro_background.png") center;
	padding: 0;
	height: 466px;
}

#intro .wrap { padding: 90px 0 0; }

#intro .wrap p {
	line-height: 1.8;
}

#intro .img {
	position: absolute;
}

#img_intro_01 {
	top: 57px;
	left: 2%;
}

#img_intro_02 {
	top: 262px;
	left: 16%;
}

#img_intro_03 {
	top: 61px;
	right: 5.5%;
}

#img_intro_04 {
	z-index: 5;
	right: 19%;
	bottom: -35px;
}

@media screen and (min-width:768px) and (max-width:1650px) {
	#intro #img_intro_01,
	#intro #img_intro_02,
	#intro #img_intro_03 { opacity: 0.4; }
	#intro #img_intro_01 img { width: 19vw; /* org:245px */ }
	#intro #img_intro_02 img { width: 12vw; /* org:157px */ }
	#intro #img_intro_03 img { width: 19vw; /* org:245px */ }
	#intro #img_intro_04 img { width: 14vw; /* org:183px */ }
}

@media screen and (max-width:767px) {
	#intro {
		background: url("../img/intro_background_sp.png") center;
		background-size: cover;
		height: auto;
	}

	#intro .wrap { padding: 12vw 2vw; }
	.contents_wrap > section > .wrap p { font-size: 3.8vw; margin: 0 .5em .8em; }
	.contents_wrap > section > .wrap p ruby[data-ruby]::before,
	.contents_wrap .modal_viewarea_text ruby[data-ruby]::before {
		font-size: .4em;
		top: -1.2em;
		letter-spacing: -.1em;
		overflow: visible;
		white-space: nowrap;
	}

	#intro #img_intro_01,
	#intro #img_intro_02,
	#intro #img_intro_03 {
		display: none;
	}
	#intro #img_intro_04 {
		right: 5%;
		bottom: -4vw;
	}
	#intro #img_intro_04 img { width: 19vw; }
}

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

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

#museum .wrap h3 {
	text-align: center;
	margin-bottom:  36px;
}

#museum .wrap .wrap {
	position: relative;
	width: 1644px;
	height: 1178px;
	margin: auto;
}

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

#museum .wrap .wrap #img_museum_01 {
	position: absolute;
	top: 0;
	left: 43%;
}

#museum .wrap .wrap #room_01 {
	position: absolute;
	top: 5%;
	left: 7.7%;
}

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

#museum .wrap .wrap #room_02 h4 {
	position: absolute;
	top: 29%;
	left: 11%;
}

#museum .wrap .wrap #room_02 #img_room_02a img,
#museum .wrap .wrap #room_02 #img_room_02b img {
	position: absolute;
	top: 28.5%;
}

#museum .wrap .wrap #room_02 #img_room_02a .cap,
#museum .wrap .wrap #room_02 #img_room_02b .cap { top: 47.2%; }

#museum .wrap .wrap #room_02 #img_room_02a img { left: 24.4%; }

#museum .wrap .wrap #room_02 #img_room_02b img { right: 24.6%; }

#museum .wrap .wrap #room_02 #img_room_02c {
	position: absolute;
	top: 57.3%;
	left: 31.7%;
}

#museum .wrap .wrap #room_03 h4 {
	position: absolute;
	bottom: 26.2%;
	left: 30%;
}

#museum .wrap .wrap #room_03 #img_room_03a {
	position: absolute;
	bottom: 4.5%;
	left: 14%;
}

#museum .wrap .wrap #room_03 #img_room_03b {
	position: absolute;
	bottom: 4.5%;
	left: 45%;
}

#museum .wrap .wrap #room_04 {
	position: absolute;
	top: 5%;
	right: 9.9%;
}

#museum .wrap .wrap #room_05 {
	position: absolute;
	bottom: 10%;
	right: 9.5%;
}

@media screen and (min-width:768px) and (max-width:1540px) {
	#museum {
		background-size: 100%;
		height: 86vw;
	}
	#museum > .wrap { padding-top: 3vw; }
	#museum .wrap .wrap {
		width: 100%;
		height: 58.1vw;
	}
	#museum .wrap h3 img { width: 40vw; }

	#museum .wrap .wrap #room_01 { top: -1vw; left: 11.9vw; }
	#room_01 h4 a img { width: 24vw; }

	#museum .wrap .wrap #img_museum_01 { top: -1vw; left: 44.5%; }
	#img_museum_01 img { width: 11vw; }

	#museum .wrap .wrap #room_02 h4 { top: 14vw; left: 15%; }
	#room_02 h4 img { width: 8vw; }

	#museum .wrap .wrap #room_02 #img_room_02a .thum,
	#museum .wrap .wrap #room_02 #img_room_02b .thum { top: 13.5vw; }
	#museum .wrap .wrap #room_02 #img_room_02a .cap,
	#museum .wrap .wrap #room_02 #img_room_02b .cap { top: 26vw; }
	#museum .wrap .wrap #room_02 #img_room_02a img { left: 25vw; }
	#museum .wrap .wrap #room_02 #img_room_02b img { left: 53vw; }
	#img_room_02a a img,
	#img_room_02b a img { width: 20vw; }
	#museum .wrap .wrap #room_02 #img_room_02c { top: 32.25vw; }
	#img_room_02c a img { width: 35vw; }

	#museum .wrap .wrap #room_03 h4 { bottom: 16vw; left: 32vw; }
	#room_03 h4 img { width: 15vw; }

	#museum .wrap .wrap #room_03 #img_room_03a,
	#museum .wrap .wrap #room_03 #img_room_03b { bottom: 2.9vw; }
	#museum .wrap .wrap #room_03 #img_room_03a { left: 18vw; }
	#museum .wrap .wrap #room_03 #img_room_03b { left: 45.5vw; }
	#img_room_03a a img,
	#img_room_03b a img { width: 15.25vw; }

	#museum .wrap .wrap #room_04 { top: -1vw; right: 13.7vw; }
	#room_04 h4 a img { width: 22vw; }

	#museum .wrap .wrap #room_05 { bottom: 4.5vw; right: 12.5vw; }
	#room_05 h4 a img { width: 19vw; }
}

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

	#museum .wrap .wrap #img_museum_01,
	#museum .wrap .wrap #room_01,
	#museum .wrap .wrap #room_02 h4,
	#museum .wrap .wrap #room_02 #img_room_02a img,
	#museum .wrap .wrap #room_02 #img_room_02b img,
	#museum .wrap .wrap #room_02 #img_room_02c,
	#museum .wrap .wrap #room_03 h4,
	#museum .wrap .wrap #room_03 #img_room_03a,
	#museum .wrap .wrap #room_03 #img_room_03b,
	#museum .wrap .wrap #room_04,
	#museum .wrap .wrap #room_05 {
		position: static;
		display: block;
		text-align: center;
	}
	#museum .wrap .wrap #img_museum_01 .forPC,
	#museum .wrap .wrap #room_01 .forPC,
	#museum .wrap .wrap #room_02 h4 .forPC,
	#museum .wrap .wrap #room_02 #img_room_02a .forPC,
	#museum .wrap .wrap #room_02 #img_room_02b .forPC,
	#museum .wrap .wrap #room_02 #img_room_02c .forPC,
	#museum .wrap .wrap #room_03 h4 .forPC,
	#museum .wrap .wrap #room_03 #img_room_03a .forPC,
	#museum .wrap .wrap #room_03 #img_room_03b .forPC,
	#museum .wrap .wrap #room_04 .forPC,
	#museum .wrap .wrap #room_05 .forPC { display: none; }

	#museum .wrap .wrap #img_museum_01 img {
		width: 60vw;
		margin-top: -3vw;
	}
	#museum .wrap .wrap #room_01 img {
		width: 75vw;
		margin-left: -16vw;
	}
	#museum .wrap .wrap #room_02 h4 { margin: 4vw auto; }
	#museum .wrap .wrap #room_02 h4 img { width: 28vw; }
	#museum .wrap .wrap #room_02 #img_room_02a img,
	#museum .wrap .wrap #room_02 #img_room_02b img {
		width: 72vw;
		margin: 0 auto 6vw;
	}
	#museum .wrap .wrap #room_03 #img_room_03a img,
	#museum .wrap .wrap #room_03 #img_room_03b img {
		width: 72vw;
		margin-bottom: 6vw;
	}
	#museum .wrap .wrap #room_02 #img_room_02c img {
		width: 82vw;
		margin: 0vw 0 15vw;
	}
	#museum .wrap .wrap #room_03 h4 img {
		margin-bottom: 7vw;
		width: 45vw;
	}
	#museum .wrap .wrap #room_04 img {
		width: 68vw;
		margin: 15vw 0 5vw 11vw;
	}
	#museum .wrap .wrap #room_05 img {
		width: 56vw;
	}
}

/*------------------------------------------------------------
  letsgo
  ------------------------------------------------------------ */
#letsgo {
	background: url("../img/letsgo_background.png") repeat;
	padding: 42px 0 76px;
}

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

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

#letsgo .wrap #guide {
	max-width: 1150px;
	margin: auto;
}

#letsgo .wrap #guide::after {
	content: "";
	display: block;
	clear: both;
}

#letsgo .wrap #guide > div {
	float: left;
}

#letsgo .wrap #guide h4 {
	display: inline-block;
	color: #0a569b;
	font-size: 16pt;
	line-height: 1.75;
	margin-bottom: 32px;
}

#letsgo .wrap #guide h4 span {
	font-size: 24pt;
}

#letsgo .wrap #guide p {
	text-align: left;
	font-size: 12pt;
	margin-bottom: 0;
}

#letsgo .wrap .btn_ended {
	display: block;
	margin: 0 0 2em;
	text-align: center;
}

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

#letsgo .wrap #guide ul {
	float: right;
}

#letsgo .wrap #guide ul li a {
	display: block;
	width: 389px;
	height: 68px;
	color: #fff;
	background: #eb6100;
	border-radius: 34px;
	font-size: 20px;
	line-height: 68px;
	padding-left: 2em;
	margin-bottom: 17px;
}

#letsgo .wrap #guide ul li a::after {
	content: '';
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	float: right;
	transform: rotate(-45deg);
	margin: 1.4em 32px 0 0;
}

#letsgo .wrap #sns {
	position: relative;
	width: 797px;
	height: 176px;
	margin: 75px auto 0;
}

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

#letsgo .wrap #sns ul li a {
	display: block;
	border: 0;
	position: absolute;
	top: 29px;
	left: 268px;
}

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

@media screen and (min-width:811px) and (max-width:1030px) {
	#letsgo .wrap #guide h4 span {
		font-size: 3.5vw;
	}
	#letsgo .wrap #guide p {
		font-size: 1.8vw;
		padding: 0 1em;
	}
	#letsgo .wrap #guide ul li a {
		width: 28vw;
		height: 6vw;
		border-radius: 3vw;
		font-size: 1.7vw;
		line-height: 6vw;
		padding-left: 1em;
	}
}

@media screen and (max-width:810px) {
	#letsgo { padding: 7vw 0 9vw; }
	#letsgo .wrap h3 { margin-bottom: 4vw; }
	#letsgo .wrap h3 img { width: 95%; }
	#letsgo .wrap .btn_ended img { width: 70vw; }
	#letsgo .wrap #guide { width: 100%; }
	#letsgo .wrap #guide > div,
	#letsgo .wrap #guide ul {
		float: none;
	}
	#letsgo .wrap #guide > div {
		margin-bottom: 2em;
	}
	#letsgo .wrap #guide ul li a {
		width: 70%;
		height: 12vw;
		font-size: 3.75vw;
		line-height: 12vw;
		padding-left: 1.5em;
		margin: 0 auto 17px;
	}
	#letsgo .wrap #guide ul li a::after { margin: 1.2em 7vw 0 0;  }
	#letsgo .wrap p { font-size: 15px; margin: 1.5em 5vw; }
	#letsgo .wrap #guide h4 {
		display: block;
		text-align: center;
		font-size: 15px;
	}
	#letsgo .wrap #guide h4 span { font-size: 25px; line-height: 1.2; }
	#letsgo .wrap #guide p {
		margin-left: 6vw;
		margin-right: 6vw;
		font-size: 12px;
	}

	#letsgo .wrap #sns .forSP { display: inline-block; }
	#letsgo .wrap #sns .forPC { display: none; }
	#letsgo .wrap #sns {
		width: auto;
		height: auto;
		margin-top: 12vw;
	}
	#letsgo .wrap #sns h4 img {
		width: 91%;
		margin: 0 0 0 6vw;
	}
	#letsgo .wrap #sns ul li a {
		top: 34%;
		left: 22%;
	}
	#letsgo .wrap #sns ul li:last-child a { left: 51%; }
	#letsgo .wrap #sns ul li a img {
		width: 25vw;
	}
}

/*------------------------------------------------------------
  supplement
  ------------------------------------------------------------ */
#supplement {
	background: url("../img/key_background.png") repeat;
	padding: 65px 0 40px;
}

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

#supplement .wrap .wrap #notice,
#supplement .wrap .wrap #educational {
	width: 551px;
}

#supplement .wrap .wrap #notice { float: left; }
#supplement .wrap .wrap #educational { float: right; }

#supplement .wrap .wrap div div {
	background: #fff;
	border-radius: 0 0 34px 34px;
	padding: 28px 24px;
	min-height: 435px;
	margin-bottom: 80px;
}

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

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

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

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

#supplement .wrap .wrap div .nav,
.modal_content .nav,
.modal_content .dl {
	width: 236px;
	margin: auto;
}

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

#supplement .wrap .wrap div .nav a,
.modal_content .nav a,
.modal_content .dl a {
	display: block;
	width: 236px;
	height: 68px;
	color: #fff;
	background: #eb6100;
	border-radius: 34px;
	font-size: 20px;
	line-height: 68px;
	padding-left: 1.5em;
	margin-left: -.75em;
}

#supplement .wrap .wrap div .nav a::after,
.modal_content .nav a::after {
	content: '';
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	float: right;
	transform: rotate(-45deg);
	margin: 1.4em 32px 0 0;
}

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

@media screen and (max-width:1010px) {
	#supplement { padding: 45px 0 0; }
	#supplement .wrap { width: auto; }
	#supplement .wrap .wrap #notice,
	#supplement .wrap .wrap #educational {
		float: none;
		margin: 0 auto;
		height: 590px;
	}
}

@media screen and (max-width:560px) {
	#supplement .wrap .wrap #notice,
	#supplement .wrap .wrap #educational {
		width: 90vw;
		height: auto;
		margin-bottom: 7vw;
	}
	#supplement .wrap .wrap div div { min-height: unset; margin-bottom: 20px; }

	#supplement .wrap .wrap div ul li { font-size: 15px; }
	#supplement .wrap .wrap div h4 { font-size: 16px; }
	#supplement .wrap .wrap div p { font-size: 13px; }

	#supplement .wrap .wrap #notice h3 img,
	#supplement .wrap .wrap #educational h3 img {
		width: 90vw;
	}
	#supplement .wrap .wrap div .nav { width: 15em; margin: 1.5em auto 0; }
	#supplement .wrap .wrap div .nav a {
		width: 42vw;
		font-size: 4vw;
		line-height: 12vw;
		height: 12vw;
		margin-left: .5em;
	}
	#supplement .wrap .wrap div .nav a::after {
		margin: 1.1em 1.25em 0 0;
		width: 2vw;
		height: 2vw;
	}
	#supplement .wrap .wrap #educational .nav { margin-top: 1.5em; }
}

/*------------------------------------------------------------
  archive
  ------------------------------------------------------------ */
#archive {
	padding-bottom:110px;
	text-align:center;
}
#archive p {
	font-size: 24px;
	margin-bottom: 74px;
	text-align: left;
}
#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 15px;
	margin-bottom: .2em;
	border-right:solid 1px #434343;
	list-style: none;
	display: inline-block;
}
#archive ul li:first-child {
	border-left:solid 1px #434343;
}
#archive ul li a {
	display: inline-block;
	font-size:22px;
	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 {
		margin-bottom:47px;
		padding: 0;
	}
	#archive p { font-size: 14px; margin: 0 5vw 1.5em; }
	#archive h4 { font-size: 13px; }
	#archive ul { margin: 0 5vw; }
	.wrap #archive ul li { padding: 2px 6px; border: none; }
	.wrap #archive ul li:nth-child(1),
	#archive ul li:nth-child(3) { border-right: solid 1px #434343; }
	#archive ul li a { font-size: 3.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::before,
.modal_content .js-modal-close::after {
	content: '';
	width: 6px;
	height: 50px;
	background: #fff;
	position: absolute;
	top: -3vw;
	right: -2vw;
	opacity: 0.8;
}
.narrow_head_modal .js-modal-close::before,
.narrow_head_modal .js-modal-close::after { top: 0; }
.modal_content .js-modal-close::before { transform: rotate(45deg); }
.modal_content .js-modal-close::after { transform: rotate(-45deg); }

.modal_content {
	box-sizing: border-box;
	background: #fff;
	left: 50%;
	padding: 30px 35px 40px 50px;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 955px;
	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; }

.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 {
	border-radius: 50%;
	background-color: #fabe00;
	opacity: 0.9;
	display: block;
	border: 0;
	position: absolute;
	top: 38%;
	width: 60px;
	height: 60px;
	overflow: hidden;
	text-indent: -50em;
}
.modal_content ul.modal_nav li.prev a { left: -3.1%; }
.modal_content ul.modal_nav li.next a { right: -3.1%; }
.modal_content ul.modal_nav li a::before {
	content: '';
	width: 12px;
	height: 12px;
	position: absolute;
	top: 22px;
}
.modal_content ul.modal_nav li.prev a::before {
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	left: 25px;
}
.modal_content ul.modal_nav li.next a::before {
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
	left: 20px;
}

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

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

.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: #dad9c8;
	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_03a .modal_content .dl {
	width: 200px;
	margin-top: 12px;
	margin-bottom: 18px;
}
#modal_room_03a .modal_content .dl a {
	width: 178px;
	padding-left: 1.5vw;
	margin: auto;
}

#modal_room_03a .modal_content .text a,
#modal_room_03a .modal_content .text a:link,
#modal_room_03a .modal_content .text a:visited {
	color: #1a569b;
	text-decoration: underline;
}

#modal_room_03a .modal_content .rightCol img { width: 210px; }


#modal_room_03a .modal_content .sns {
	clear: both;
	margin: 25px auto 0;
	position: relative;
}

#modal_room_03a .modal_content .sns > img { width: 849px; }

#modal_room_03a .modal_content .sns ul,
#modal_room_03a .modal_content .sns ul li { list-style: none; }

#modal_room_03a .modal_content .sns ul li a {
	display: block;
	border: 0;
	position: absolute;
	top: 108px;
	left: 552px;
}

#modal_room_03a .modal_content .sns ul li:last-child a { left: 650px; }

#modal_room_03a .modal_content .rightCol { margin-top: -100px; margin-right: 25px; }
#modal_room_03b .modal_content .rightCol img { width: 368px; }
#modal_room_03a .rightCol .img { display: block; margin-bottom: 20px; }
#modal_room_03a .rightCol .img:last-child { margin-bottom: 0; }
#modal_room_03a h4:after,forPC,#modal_room_03b h4:after { content:""; display: block; clear: both; }
#modal_room_03a 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,
#modal_room_05 .modal_content .text { width: 470px; }

@media screen and (max-width:767px) {
	/* .modal .modal_content .forSP { display: inline-block; } */
	/* .modal .modal_content .forPC { display: none; } */
	.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 { width: 100%; }

	#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 .js-modal-close::before,
	.modal_content .js-modal-close::after {
		content: '';
		width: 4px;
		height: 36px;
		background: #fff;
		position: absolute;
		top: -3.6vh;
		right: -2vw;
		opacity: 0.8;
	}
	.modal_content ul.modal_nav li a {
		background-color: transparent;
		opacity: 1.0;
		display: block;
		width: 60px;
		height: 60px;
	}
	.modal_content ul.modal_nav li.prev a { left: -14%; }
	.modal_content ul.modal_nav li.next a { right: -12%; }

	.modal_content ul.modal_nav li a::before,
	.modal_content ul.modal_nav li a::after {
		content: '';
		width: 20px;
		height: 4px;
		background: #fff;
		border: none !important;
		position: absolute;
	}
	.modal_content ul.modal_nav li.prev a::before {
		transform: rotate(45deg);
		top: 34px;
		left: 23px;
	}
	.modal_content ul.modal_nav li.prev a::after {
		transform: rotate(-45deg);
		top: 22px;
		left: 23px;
	}
	.modal_content ul.modal_nav li.next a::before {
		transform: rotate(45deg);
		top: 22px;
		left: 23px;
	}
	.modal_content ul.modal_nav li.next a::after {
		transform: rotate(-45deg);
		top: 34px;
		left: 23px;
	}

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

	.modal_content .text,
	#modal_room_03a .modal_content .text,
	#modal_room_04 .modal_content .text,
	#modal_room_05 .modal_content .text { width: auto; }
	#modal_room_03a .rightCol .img { display: inline; }
	#modal_room_03a .rightCol .img img { margin-bottom: 4vw; }
	.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: 100%;
		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_03a h4 img.forPC,
	#modal_room_03b h4 img.forPC {
		float: none;
	}

	.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_03a .modal_content .dl { width: 215px; }
	#modal_room_03a .modal_content .dl a { padding-left: 6vw; }
	#modal_room_03b .dl a { padding-left: 6vw; padding-right: 3vw; }

	#modal_room_03a .modal_content .rightCol { margin: 0; }
	#modal_room_03a .modal_content .rightCol p { text-align: left; line-height: 1.6; }
	#modal_room_03b .modal_content .text,
	#modal_room_03b .modal_content .rightCol img { width: 100%; }

	#modal_room_01 .modal_content .img img,
	#modal_room_04 .modal_content .img img,
	#modal_room_05 .modal_content .rightCol img { width: 73vw; }

	#modal_room_03a .modal_content .sns > img { width: 76vw; margin: auto; }
	#modal_room_03a .modal_content .sns ul li a { top: 73.75vw; left: 35vw; }
	#modal_room_03a .modal_content .sns ul li:last-child a { left: 54vw; }
	#modal_room_03a .modal_content .sns ul li a img { width: 16vw; }

	#modal_room_04 .modal_content .img img { margin-bottom: 1em; }
	#modal_room_04 .modal_content .rightCol { text-align: left; }
	#modal_room_04 .modal_content .rightCol .img img { width: 21vw; float: right; margin-top: -3vw; }
	#modal_room_04 .modal_content .rightCol .nav { float: left; margin: 1vw 0 0; width: auto; }
	#modal_room_04 .modal_content .rightCol .nav a { padding-left: 5vw; width: 40vw; }

}