@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;}
#town_main .title {font-size:40px;line-height:1.5em;}

.section_title {text-align:center;padding-bottom:30px;margin-bottom:60px;position:relative;}
.section_title:after {content:"";display:block;width:60px;height:4px;background:#e0122a;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 #e0122a;font-weight:bold;letter-spacing:5px;padding-bottom:20px;margin-bottom:50px;}

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


#about_town {padding:95px 0 0;background:url(../img/about_town_bg.jpg) repeat left top;}
#about_town .Flex {display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-flow:row wrap; flex-flow: row wrap;}
#about_town .image01 {width:37.25%;}
#about_town .image01 div {margin-top:50px;border:solid 12px #fff;border-radius:12px;}
#about_town .image02 {width:61.25%;}
#about_town .image03 img {display:block;width:100%;}

#town_slider {padding:100px 0 150px;background:#e60012 url(../img/town_slider_bg.png) no-repeat center 40px;}

#pageImage {width:932px;height:0;padding-top:680px;position:relative;margin:0 auto 70px;}
#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:932px;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:first-child {margin-left:0;}*/

#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:10px;bottom:0;}
#pageImage ul li a:hover {opacity:0.8;}

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

/*
#townmap {padding:95px 0;}
#number_map {position:relative;}
#number_map > img {display:block;width:100%;}
#townmap #marker li {width:64px;position:absolute;transform:translate(-50%,-100%);}
#townmap #marker li a,
#townmap #marker li img {width:100%;}
#townmap #marker li.m01 {left:51.75%;top:42.66%;}
#townmap #marker li.m02 {left:28.54%;top:66.33%;}
#townmap #marker li.m03 {left:70.42%;top:50.33%;}
#townmap #marker li.m04 {left:71.59%;top:73.66%;}
#townmap #marker li.m05 {left:49.7%;top:20.66%;}
#townmap #marker li.m06 {left:40.16%;top:32.33%;}

#townmap .inner:last-child {width:100%;max-width:1366px;padding:0 4.75%;}
#townmap .Flex {max-width:1200px;width:100%;display:flex;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;margin:0 auto;}
#townmap .list {padding:64px 0 0;}
#townmap #m01,#townmap #m02,#townmap #m03,#townmap #m04,#townmap #m05,#townmap #m06 {margin-bottom:60px;flex-basis:31.5835%;max-width:31.5835%;}
#townmap .list .image {margin-bottom:25px;}
#townmap .list .image img {display:block;width:100%;}
#townmap .list h3 {font-weight:bold;margin-bottom:15px;}

#townmap .more a {display:block;width:170px;padding:10px 0;color:#fff;text-align:center;font-weight:bold;background:#e0122a url(../../img/arrow_w.png) no-repeat 30px center;text-indent:1em;margin-top:20px;}
#townmap .more:hover {opacity:0.8;}*/

#information {padding:95px 0 50px;background:#f4f4f4 url(../img/tt.png) repeat left top;}
#information .Flex {display:flex;justify-content:space-between;width:100%;margin-bottom:45px;}
#information .Flex > div{flex-basis:48.75%;max-width:48.75%;}
#information .image {margin-bottom:15px;}
#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 {display:flex;justify-content:space-between;flex-wrap:wrap;width:100%;max-width:1200px;}
#townitem_list .Flex > div{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 {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 #05459d;background:#05459d;color:#fff;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
#townitem_list .pay .buy a img {max-height:40px;/*width:80%;*/padding:5px;}
#townitem_list .pay .buy a:hover {opacity:0.8;}
#townitem_list .price span {color:#e60012;}
#townitem_list .price span b {font-size:30px;font-weight:bold;}
/*
#item {background:url(../img/lineup_bg.png) no-repeat center center;background-size:cover;padding:95px 0;}
#item .product {padding-top:0;padding-bottom:0;}
#item .product .Flex {box-shadow:0 0 8px rgba(0,0,0,0.3);}
#item .character {height:83%;}*/

@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;}
	#town_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;}
	#town_main .title {font-size:8vw;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;}

	#town_main {background:url(../img/main_bg_sp.png) 0 0 no-repeat;height:0;padding-top:75%;background-size:cover;padding-bottom:43.5%;}
	#town_main .m_box > div {padding:6% 4% 6%}
	#town_main .image {width:calc(25% - 12px);float:left;margin-bottom:5px;}
	#town_main .title {width:calc(83% - 40px);float:right;margin-top:4%;margin-bottom:4%;}
	#town_main .text {clear:both;}
	
	#about_town {padding:5% 0 0;}
	#about_town .Flex {-ms-flex-direction:column;flex-direcion:column;}
	#about_town .image01,
	#about_town .image02 {width:100%;padding:0 20px;}
	#about_town .image01 img {width:100%;}
	#about_town .image01 div {margin-top:40px;border:solid 8px #fff;border-radius:8px;}
	
	#town_slider {background-size:auto 85%;padding:70px 0 20px;}
	#town_slider #pageImage {width:calc(100% - 16vw);margin:0 auto;padding-top:80%;}
	#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%;}
	
	#pageSlider {width:calc(100% - 10vw);margin:0 auto;top:-13.25vw;}
	#pageSlider .window ul li {width:31vw;padding-right:3.3vw;}
	
	/*
	#townmap #marker li.m01 {left:51.75%;top:48.66%;}
	#townmap #marker li.m02 {left:17%;top:79%;}
	#townmap #marker li.m03 {left:80.42%;top:55.33%;}
	#townmap #marker li.m04 {left:73.59%;top:77.66%;}
	#townmap #marker li.m05 {left:50.7%;top:25.66%;}
	#townmap #marker li.m06 {left:35.16%;top:39.33%;}
	
	#townmap .Flex {flex-direction:column;}
	#townmap #m01,#townmap #m02,#townmap #m03,#townmap #m04,#townmap #m05,#townmap #m06 {flex-basis:auto;max-width:100%;min-height: 0%;}
	#townmap .list {padding:45px 0 0;}
	#townmap .list h3 {font-size: 1.2em}
	#townmap .list li .image img {display:block;width:100%;}
	
	#townmap .more a {width:200px;}*/
	
	#information {padding:9.75% 4.75%;}
	#information .Flex {flex-direction:column;margin-bottom:0;}
	#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;}
	
	/*
	#item {padding:40px 0;}
	#item .inner {display:block;padding:15% 4.75% 50%;}
	#item .product {padding:0}
	#item .character {height:35%;background:url(../../img/item_character.png) no-repeat center center;background-size:100%;top:62%;right:3%;}*/
}
@media screen and (max-width:480px){
	#pageSlider {top:-11.25vw;}
}
@media screen and (max-width:360px){
	#pageSlider {top:-9.25vw;}
	#townitem_list .pay .day {height:35px;}
}