@charset "utf-8";
/* CSS Document */

.inner {width: 87.85%;max-width: 1200px;padding:0;}
#wrap section {margin-bottom:0;}

.m_box {width:380px;}

.section_title span {font-size:14px;line-height:2em;}
#lineup .text {font-size:18px;line-height:1.8em;}

#townmap .list li h3,
#information .text  {font-size:20px;line-height:1.5em;}
.section_title h2 {font-size:30px;line-height:1.5em;}
#transform .first .title {font-size:36px;line-height:1.5em;}
#adventure_main .title {font-size:40px;line-height:1.5em;text-align:center;}

.section_title {text-align:center;padding-bottom:30px;margin-bottom:60px;position:relative;}
.section_title:after {content:"";display:block;width:60px;height:4px;background:#23ac38;position:absolute;left:50%;bottom:0;margin-left:-30px;}
.section_title h2 {font-weight:bold;margin-bottom:10px;}
.section_title span {display:block;font-weight:bold;color:#666;}
.section_title span img {display:block;margin:0 auto;}

.table {display:table;width:100%;}
.table > div {display:table-cell;vertical-align:top;}

.category_title {font-size:28px;line-height:1.5em;border-bottom:solid 1px #23ac38;font-weight:bold;letter-spacing:5px;padding-bottom:20px;margin-bottom:50px;}

#adventure_main {background:url(../img/main_bg.png) no-repeat center center;background-size:cover;padding:110px 0;}
#adventure_main .m_box {background:rgba(0,0,0,0.8);color:#fff;}
#adventure_main .m_box > div {padding:40px;}
#adventure_main .image {text-align:center;margin-bottom:25px;}
#adventure_main .title {font-weight:bold;margin-bottom:25px;}

#about_adventure {padding:60px 0 0;background:url(../img/movie_bg.png) no-repeat center center;background-size:cover;}
#about_adventure .movie {width:87.85%;max-width:1200px;margin:0 auto;padding-top:30px;}
#about_adventure .video {border:solid 10px #cfdb00;/*padding-top:55.05%;*/padding-top:55.334%;}
#about_adventure .about_container {background:url(../img/sec01_under.png) no-repeat left bottom;background-size:100% auto;}
#about_adventure .Flex {display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-flow:row wrap; flex-flow: row wrap;}
#about_adventure .image01 {width:37.25%;margin-left:15px;}
#about_adventure .image01 div {margin-top:50px;border:solid 12px #fff;border-radius:12px;}
#about_adventure .image02 {width:61%;}
#about_adventure .image03 img {display:block;width:100%;}

#town_slider {padding:120px 0;background:#23ac38 url(../img/slide_bg_bottom.png) no-repeat left bottom;background-size:100% auto;}
#town_slider .pageImageCover {padding:30px;background:url(../img/slide_bg.png) no-repeat center center;background-size:100% 100%;margin-bottom:30px;}
.slide_desing_left,
.slide_desing_right {width:15.22vw;position:absolute;top:0;z-index:20;}
.slide_desing_left {left:0;}
.slide_desing_right {right:0;}
.slide_desing_left img,
.slide_desing_right img {width:100%;}

#pageImage {width:100%;height:0;padding-top:50.51%;position:relative;margin:0 auto;}
#pageImage ul li {width:100%;position:absolute;right:0;top:0;opacity:0;z-index:1;}
#pageImage ul li:first-child {opacity:1;z-index:10;}

#pageSlider {width:calc(100% - 60px);margin:0 auto;position:relative;}
#pageSlider .window {width:100%;overflow:hidden;position:relative;}
#pageSlider .window ul {position:absolute;left:0;top:0;}
#pageSlider .window ul li {width:322px;padding-right:34px;float:left;}

#pageSlider .window ul li {position:relative;}
#pageSlider .window ul li span,
#pageImage ul li span {display:block;position:absolute;left:0;bottom:0;font-size:36px;}
#pageImage ul li a {display:block;width:220px;position:absolute;right:25px;bottom:-10px;}
#pageImage ul li a:hover {opacity:0.8;}

#pageSlider #pager li {width:59px;height:59px;position:absolute;top:50%;transform:translateY(-50%);overflow:hidden;border-radius:100%;box-shadow:3px 3px 10px rgba(0,0,0,0.4);z-index:21;}
#pageSlider #pager li.left {left:-30px;}
#pageSlider #pager li.right {right:-30px;}

#information {padding:95px 0;background:#f4f4f4 url(../img/tt.png) repeat left top;}
#information .Flex {width:100%;max-width:1200px;display:flex;justify-content:space-between;}
#information .Flex > div{flex-basis:48.75%;max-width:48.75%;}
#information .Flex .Col:hover {opacity:0.8;}
#information .image {margin-bottom:30px;}
#information .image img {width:100%;}
#information .text {padding-left:30px;font-weight:bold;background:url(../img/arrow.png) no-repeat left 5px;background-size:3%;}

#townitem_list {padding: 95px 0 35px;background:#fff;}
#townitem_list .Flex {width:100%;max-width:1200px;display:flex;justify-content:space-between;flex-wrap:wrap;}
#townitem_list .Col {width:48.75%;margin-bottom:60px;}
#townitem_list .image {margin-bottom:30px;}
#townitem_list .image img {width:100%;}
#townitem_list .text {padding-left:30px;font-weight:bold;background:url(../img/arrow.png) no-repeat left 5px;background-size:3%;margin-bottom:20px;}
#townitem_list .image:hover,#townitem_list .text:hover,#townitem_list .pay .buy:hover {opacity:0.8;}
#townitem_list .pay {display:flex;justify-content:space-between;width:100%;margin-bottom:20px;}
#townitem_list .pay > div {width:48.75%;max-width:48.75%;align-self:center;text-align:center;font-weight:bold;}
#townitem_list .pay .day {border:solid 1px #e60012;color:#e60012;height:40px;line-height:2.4em;}
#townitem_list .pay .buy div {border:solid 1px #23ac38;background:#23ac38;color:#fff;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
#townitem_list .pay .buy a img {max-height:40px;padding:5px;}
#townitem_list .price span {color:#e60012;}
#townitem_list .price span b {font-size:30px;font-weight:bold;}


@media screen and (max-width:640px){
	.inner {width:95%;}
	#wrap,
	.inner p {font-size:3.5vw;line-height:1.6em;}
	
	.inner {display:block !important;width:100%;}
	.m_box {display:block;width:inherit;}
	
	.section_title span {font-size:12px;line-height:2em;}
	#adventure_main .title > span {font-size:15px;line-height:1.5em;}
	#about_fire .movie .name,
	#transform .first .sub,
	#information .text p {font-size:16px;line-height:1.5em;}
	
	#transform .first .title,
	.section_title h2,
	#townmap .list li h3 {font-size:21px;line-height:1.5em;}
	#adventure_main .title {font-size:7vw;line-height:1.5em;}
	#townmap {padding:60px 0 0;}
	#townmap #marker li {width:5.3vw;}
		
	.section_title {margin-bottom:30px;}
	.section_title:after {width:40px;margin-left:-20px;}
	
	.category_title {font-size:18px;line-height:1.5em;padding-bottom:10px;margin-bottom:40px;}

	#adventure_main {background:url(../img/main_bg_sp.png) 0 0 no-repeat;height:0;padding-top:75%;background-size:cover;padding-bottom:43.5%;}
	#adventure_main .m_box {padding-bottom:2%;}
	#adventure_main .m_box > div {padding:6% 4% 6%}
	#adventure_main .image {width:calc(25% - 12px);float:left;margin-bottom:5px;}
	#adventure_main .title {width:calc(83% - 40px);float:right;/*margin-top:2%;*/margin-bottom:4%;text-align:left;}
	#adventure_main .text {clear:both;}
	
	#about_adventure {padding:5% 0 0;background:url(../img/movie_bg_sp.png) no-repeat center center;background-size:cover;}
	#about_adventure .Flex {-ms-flex-direction:column;flex-direcion:column;}
	#about_adventure .image01,
	#about_adventure .image02 {width:100%;padding:0 20px;}
	#about_adventure .image01 {width:100%;padding:0 20px;margin-left:0;}
	#about_adventure .image01 div {margin-top:0;border:solid 8px #fff;border-radius:8px;}
	#about_adventure .image01 img {width:100%;}
	#about_adventure .movie {width:100%;padding:40px 20px 20px;}
	#about_adventure .video {padding-top:54.375%;border:solid 8px #cfdb00;}
	
	#town_slider {padding:20px 0;}
	#pageSlider #pager li {width:40px;height:40px;}
	#pageSlider #pager li.left {left:-15px;}
	#pageSlider #pager li.right {right:-15px;}
	#pageImage ul li a {width:23.6%;right:5px;bottom:-3px;}
	#town_slider .pageImageCover {background-size:95%;margin-bottom:20px;}
	
	#pageSlider .window ul li {width:31vw;padding-right:3.3vw;}

	
	#information {padding:9.75% 4.75%;}
	#information .Flex {flex-direction:column;}
	#information .Flex > div{flex-basis:auto;max-width:100%;min-height: 0%;margin:0 0 30px;}
	#information .text {background-position:left 6px;padding-left:20px;}
	
	#townitem_list {padding:9.75% 4.75%;}
	#townitem_list .Flex {flex-direction:column;}
	#townitem_list .Flex > div{width:100%;min-height:0%;margin:0 0 30px;}
	#townitem_list .text {background-position:left 6px;padding-left:20px;}
	#townitem_list .pay .day,
	#townitem_list .pay .buy a {padding:10px 0;line-height:1em;}
	
}
@media screen and (max-width:480px){
	#pageSlider {top:-7.25vw;}
}
@media screen and (max-width:360px){
	#pageSlider {top:-9.25vw;}
	#townitem_list .pay .day {height:35px;}
}