@charset "UTF-8";

body#spm {
	position:relative;
}
#spm #main div.mainimg {
	background:#000;
}
#spm #main div.mainimg p.mainimg {
	background:#000;
}
#spm #main div.mainimg img {
	display:block;
	margin:auto;
	width:100%;
	height:auto;
}
#spm #main div.mainimg img.sp_none {
	display:block;
}
#spm #main div.mainimg img.pc_none {
	display:none;
}
#spm #main div.mainimg p.leadcopy {
	padding:27px;
	font-size:0.875rem; /*1.4rem*/
	line-height:1.5;
	text-align:center;
	background:#000;
	color:#d9d6c9;
}
#spm #main div.mainimg ul {
	width:880px;
	margin:0 auto;
	overflow:hidden;
	padding-bottom:25px;
}
#spm #main .swiper-container-horizontal>.swiper-pagination {
	position:static;
	bottom:auto;
	padding-bottom:15px;
	text-align:center;
}
#spm #main .swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {
	display:inline-block;
	width:16px;
	height:16px;
	margin:0 10px;
	box-sizing:border-box;
	background:#ddd;
	border-radius:100%;
	cursor:pointer;
}
#spm #main div.mainimg li {
	width:290px;
	float:left;
	margin-right:5px;
}
#spm #main div.mainimg li:last-child {
	margin-right:0;
}
#spm #main div.mainimg li p {
	margin-bottom:18px;
}
#spm #main div.mainimg li p img {
	display:block;
}
#spm #main div.mainimg li dl dt {
	margin-bottom:13px;
	color:#fff;
	font-weight:bold;
	font-size:0.875rem; /*1.4rem*/
	line-height:1.2;
}
#spm #main div.mainimg li dl dd {
	padding-right:10px;
	color:#888;
	font-size:0.75rem; /*1.2rem*/
	line-height:1.4;
}
#spm #main .area_cont {
	padding-bottom:30px;
	padding-bottom:3vmax;
}
#spm #main .area_cont:nth-child(2n+1) {
	padding-bottom:30px;
	padding-bottom:3vmax;
	background:#000;
	color:#afa790;
}
#spm #main .area_cont:nth-child(2n) {
	background:url(/overseas/attraction/img/the-wizarding-world-of-harry-potter/idx_bg01.jpg) repeat;
	background-size:inherit;
	padding-bottom:30px;
	padding-bottom:3vmax;
	color:#330f0f;
	position:relative;
	overflow:visible;
	z-index:1;
}
#spm #main .area_cont:nth-child(2n):before {
	content:"";
	display:block;
	width:100%;
	height:200px;
	height:20vmax;
	background:none;
	position:absolute;
	top:0;
	z-index:1;
}
#spm #main .area_cont:before {
	top:-2px;
}
#spm #main .area_cont:nth-child(2n):after {
	content:"";
	display:block;
	width:100%;
	height:120px;
	height:12vmax;
	background:none;
	position:absolute;
	bottom:-100px;
	bottom:-10vmax;
	z-index:1;
}
#spm #main .area_cont h2 {
	z-index:10;
	display:block;
	height:auto;
	margin:0 auto;
	padding:16px 0 13px;
	text-align:center;
	font-size:40px;
	line-height:1.5;
}
#spm #main .area_cont:nth-child(2n+1) h2,
#spm #main .area_cont:nth-child(2n) h2 {
	position:relative;
	z-index:10;
	top:0;
	padding:36px 0 27px;
}
#spm #main .area_cont:nth-child(2n+1) h2 {
	color:#fff;
	font-weight:bold;
}
#spm #main .area_cont:nth-child(2n) h2 {
	color:#000;
	font-weight:normal;
}
#spm #main .area_cont h2 img {
	display:block;
}
#spm #main .area_cont:nth-child(2n+1) h2 img,
#spm #main .area_cont:nth-child(2n) h2 img {
	margin:0 auto;
	padding:0;
	display:block;
}
#spm #main .area_cont h2 img.pc_none {
	display:none;
}
#spm #main .area_cont h2 img.sp_none {
	display:block;
	background:none;
}
#spm #main .area_cont .movie_box {
	width:560px;
	margin:0 auto;
	position:relative;
	z-index:20;
}
#spm #main .area_cont ul {
	padding:0 3% 0;
	text-align:center;
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:stretch;
	align-items:stretch;
	position:relative;
	z-index:20;
}
#spm #main .area_cont li {
	display:inline-block;
	width:290px;
	box-sizing:border-box;
	margin:2.5px;
	background:#fff;
	text-align:center;
	border:0;
}
#spm #main .area_cont li .area_cont-label01 {
	display:block;
	margin:0;
	padding:12px;
	font-weight:200;
	font-size:1.0rem; /*1.6rem*/
	text-align:center;
	vertical-align:middle;
	background:#5c1014;
	color:#f6be00;
}
#spm #main .area_cont li p.pic {
	margin:10px 9px 13px;
}
#spm #main .area_cont ul a {
	height:100%;
	display:inline-block;
	text-decoration:none;
	display:block;
}
#spm #main .area_cont ul a:hover {
	opacity:0.8;
}
#spm #main .area_cont li p.period_box {
	color:#333;
	background:#dbd7d3;
	padding:5px;
	margin:0 9px 8px 9px;
	font-size:0.8125rem; /*1.3rem*/
}
#spm #main .area_cont li p.period_box a {
	text-decoration:underline;
}
#spm #main .area_cont li p.txt {
	color:#666;
	margin:0 10px 14px;
	font-size:0.8125rem; /*1.3rem*/
	line-height:1.45;
}
#spm #main .area_cont li p.ttl {
	color:#5c1014;
	margin:0 10px 9px;
	line-height:1.2;
	font-size:1.375rem; /*2.2rem*/
}
#spm #main .area_cont li div.ul-link01-btn {
	min-width:50%;
	width:60%;
	display:inline-block;
	display:block;
	margin:19px 0 11px 0;
	padding:5px 15px 5px 20px;
	background:#5c1014;
	margin:0 auto 20px;
	background-image:url(/overseas/attraction/img/the-wizarding-world-of-harry-potter/icon_arrow_transparent.png);
	background-repeat:no-repeat;
	background-position:right center;
	opacity:1;
}
#spm #main .area_cont li div.ul-link01-btn p {
	position:relative;
	padding-right:4px;
	color:#fff;
	font-size:0.9375rem; /*1.5rem*/
	line-height:1.25;
}
#spm #main p.area_cont-caption01 {
	margin-top:-10px;
	padding:0 10px 10px;
	color:#666;
	font-size:0.625rem;
}
#spm #main .area_cont p.link {
	position:relative;
	width:380px;
	height:47px;
	margin:40px auto 0;
	background:#000;
	cursor:pointer;
}
#spm #main .area_cont:nth-child(2n+1) p.link {
	border:1px solid #fff;
}
#spm #main .area_cont p.link:after {
	content:"";
	position:absolute;
	background-image:url(/overseas/attraction/img/the-wizarding-world-of-harry-potter/icon_arrow_right_01.png);
	width:5px;
	height:7px;
	top:50%;
	-moz-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	right:10px;
}
#spm #main .area_cont p.link a {
	position:absolute;
	top:50%;
	-webkit-transform:translate(0, -50%);
	-ms-transform:translate(0, -50%);
	transform:translate(0, -50%);
	width:380px;
	font-size:1.0rem; /*1.6rem*/
	color:#fff;
	text-align:center;
	text-decoration:none;
}
#main .area_footnotes {
	margin:10px 0;
	color:#afa790;
	font-size:0.625rem;
}
.bannars {
	margin-top:4vh;
	padding:4vh 0 2vh;
}
.banner {
  padding: 5% 3% 0;
}
.banner img {
  width: 100%;
}

/*---- スライド ----*/

#spm div.carousel-with-pagination {
	padding:1em 0 0.5em;
	background:#000;
	position:relative;
	box-sizing:border-box;
	overflow:hidden;
	width:100%;
}
#spm div.carousel-with-pagination ul.carousel-in li.carousel-slide p.copy {
	color:#fff;
	padding:1em 8% 0.3em 0;
	font-size:0.875rem; /*1.4rem*/
	line-height:1.6;
}
#spm div.carousel-with-pagination ul.carousel-in li.carousel-slide p.text {
	color:#888;
	padding:0 8% 0 0;
	font-size:0.75rem; /*1.2rem*/
	line-height:1.6;
}







/* ///////////////////////////////////////////////////////////////////
SP用　ここから
/////////////////////////////////////////////////////////////////// */

.sp#spm #main div.mainimg p.mainimg {
	width:100%;
	margin:0;
	padding:0;
}
.sp#spm #main div.mainimg img.pc_none {
	display:block;
}
.sp#spm #main div.mainimg img.sp_none {
	display:none;
}
.sp#spm #main div.mainimg p.leadcopy {
	padding:26px 26px 10px;
	font-size:1.5rem;
	line-height:1.35;
}
.sp#spm #main div.mainimg ul {
	overflow:visible;
}
.sp#spm #main div.mainimg li {
	width:70.3125%;
	margin-right:8px;
	padding:15px 0;
	box-sizing:border-box;
	-webkit-flex-shrink:0;
	-ms-flex-negative:0;
	flex-shrink:0;
	float:none;
}
.sp#spm #main div.mainimg li p {
	margin-bottom:0;
	padding:0.8em 1em 0 0;
	line-height:1.35;
}
.sp#spm #main .area_cont {
	padding-bottom:6vh;
}
.sp#spm #main .area_cont:nth-child(2n):before {
	background:none;
}
.sp#spm #main .area_cont:nth-child(2n):after {
	background:none;
	height:10vh;
}
.sp#spm #main .area_cont h2 {
	margin-bottom:0;
	padding:1em 0.2em 0.5em;
	height:auto;
	font-size:3.2rem;
	line-height:1.3;
	font-weight:200;
}
.sp#spm #main .area_cont h2 img {
	width:100%;
}
.sp#spm #main .area_cont h2 img.sp_none {
	display:none;
}
.sp#spm #main .area_cont h2 img.pc_none {
	display:block;
	background:none;
}
.sp#spm #main .area_cont .movie_box {
	width:90%;
}
.sp#spm #main .area_cont .movie_box div.video-container {
	width:100%;
	padding-bottom:56.33%;
	overflow:hidden;
	position:relative;
	height:0;
}
.sp#spm #main .area_cont .movie_box div.video-container iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.sp#spm #main .area_cont ul {
	display:block;
	margin-top:0;
	padding-top:0.5vh;
}
.sp#spm #main .area_cont li {
	display:block;
	width:100%;
	margin:3em auto 0;
	background:none;
	border:none;
	background:#fff;
	padding-bottom:2.5em;
}
.sp#spm #main .area_cont li:first-child {
	margin-top:0;
}
.sp#spm #main .area_cont li:last-child {
	margin-bottom:0;
}
.sp#spm #main .area_cont li p.pic {
	margin:20px auto 0;
}
.sp#spm #main .area_cont li p.pic a {
	width:100%;
}
.sp#spm #main .area_cont li p.period_box {
	width:90%;
	margin:2vh auto 0;
}
.sp#spm #main .area_cont li p.period_box a {
	color:#333;
}
.sp#spm #main .area_cont li p.txt {
	margin:1.2em 1em 1.4em;
	color:#afa790;
	font-size:1.5rem;
	line-height:1.6;
}
.sp#spm #main .area_cont li p.ttl {
	color:#333;
	margin:0 0 0.7em;
	line-height:1.3;
	font-size:2.6rem;
	letter-spacing:0;
}
.sp#spm #main .area_cont li p.ttl,
.sp#spm #main .area_cont:nth-child(2n+1) li p.ttl {
	color:#5c1014;
}
.sp#spm #main .area_cont li p.txt,
.sp#spm #main .area_cont:nth-child(2n) li p.txt {
	text-align:left;
	color:#666;
	line-height:1.5;
}
.sp#spm #main .area_cont li div.ul-link01-btn {
	color:#fff;
	background:#5c1014;
	width:65%;
	margin:0 auto 0;
	padding:1em 0;
	position:relative;
	background-image:none;
}
.sp#spm #main .area_cont li:last-child a div.ul-link01-btn {
	margin-bottom:0;
}
.sp#spm #main .area_cont li div.ul-link01-btn:after {
	position:absolute;
	top:50%;
	right:12px;
	display:block;
	width:10px;
	height:10px;
	margin-top:-5px;
	content:'';
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	-webkit-transform:rotateZ( -45deg );
	-ms-transform:rotateZ( -45deg );
	transform:rotateZ( -45deg );
}
.sp#spm #main .area_cont li div.ul-link01-btn p {
	font-size:1.6rem;
}
.sp#spm #main .area_cont li p.area_cont-caption01 {
	margin-top:1.7em;
	color:#888;
	font-size:1.2rem;
}
.sp#spm #main .area_cont li a {
	width:100%;
}
.sp#spm #main .area_cont li a p.txt {
}
.sp#spm #main .area_cont li a p.ttl {
	color:#5c1014;
}
.sp#spm #main .area_cont p.link {
	position:relative;
	display:block;
	margin:2em auto 0;
	padding:12px 30px 12px 10px;
	width:90%;
	height:3em;
	color:#fff;
	font-size:2.0rem;
	line-height:1.0;
	background:#000;
	box-sizing:border-box;
}
.sp#spm #main .area_cont p.link:after {
	display:block;
	width:23px;
	height:23px;
	position:absolute;
	top:50%;
	right:20px;
	margin-top:-16px;
	content:'';
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	-webkit-transform:rotateZ( -45deg );
	-ms-transform:rotateZ( -45deg );
	transform:rotateZ( -45deg );
	background-image:none;
}
.sp#spm #main .area_cont p.link a {
	display:block;
	width:100%;
	box-sizing:border-box;
	padding:12px 30px 12px 10px;
	font-size:inherit;
}
.sp#spm #main .area_cont li p.pic img {
	width:100%;
	height:auto;
}
.sp#spm #main .area_footnotes {
	padding:0 3vw;
	font-size:1.2rem;
}
.sp#spm #main div.bannars div.bannarArea {
	margin:0 3vw;
	max-width:100%;
}

/*---- スライド ----*/

.sp#spm div.carousel-with-pagination {
	overflow:visible;
}
.sp#spm div.carousel-with-pagination ul.carousel-in li.carousel-slide p.copy {
	font-size:1.6rem
}
.sp#spm div.carousel-with-pagination ul.carousel-in li.carousel-slide p.text {
	font-size:1.4rem
}

/* ///////////////////////////////////////////////////////////////////
SP用　ここまで
/////////////////////////////////////////////////////////////////// */