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

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

.m_box {width:380px;}

.chart_box .name span {font-size:13px;line-height:2em;}
.section_title span,
.chart_box.ss .name span {font-size:14px;line-height:2em;}
#lineup .text {font-size:18px;line-height:1.8em;}
#fire_main .title > span,
#about_fire .movie .name,
#transform .first .sub {font-size:20px;line-height:1.5em;}
.chart_box .name {font-size:25px;line-height:1.5em;text-align:center;}
.chart_box .type {font-size:22px;line-height:1.5em;}
.section_title h2,
.chart_box.ss .name {font-size:30px;line-height:1.5em;}
#transform .first .title {font-size:36px;line-height:1.5em;}
#fire_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:10px;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;}

#fire_main {background:url(../img/district/main_bg.png) no-repeat center center;background-size:cover;padding:95px 0;}
#fire_main .m_box {background:rgba(0,0,0,0.8);color:#fff;}
#fire_main .m_box > div {padding:40px;}
#fire_main .map {position:absolute;right:0;bottom:-30px;}
#fire_main .image {text-align:center;}
#fire_main .title {font-weight:bold;}
#fire_main .title > span {display:block;}


#about_fire {background:url(../img/district/about_bg.jpg) repeat left top;border-top:solid 10px #fff;}
#about_fire .inner {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display: flex;-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end;}
#about_fire {padding:95px 0;}
#about_fire .movie {width:31.5835%;min-height:0%;border:solid 12px #fff;border-radius:5px;}
#about_fire .movie .image img {width:100%;}
#about_fire .movie .name {background:#e0122a url(../../../img/arrow_w.png) no-repeat right 24px center;color:#fff;padding: 3.65% 6% 3.65% 6%;font-weight:bold;line-height:1.8em;}
#about_fire .text {width:65%;color:#333;}
/*#about_fire .text .image {margin-top:80px;}*/

#transform .first {background:url(../img/district/transform_bg.png) no-repeat center center;background-size:cover;padding:8% 0;border-top:solid 10px #fff;}
#transform .first .m_box {background:#e0122a;color:#fff;}
#transform .first .m_box > div {padding:55px 45px;}
#transform .first .sub {margin-bottom:30px;font-weight:bold;}
#transform .first .title {margin-bottom:30px;font-weight:bold;}
/*
#transform .second {padding:60px 0 100px;}
#transform .Flex {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display: flex;flex-flow:row wrap;-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:60px;}
#transform .second .m_box {flex-basis:31.5835%;max-width:31.5835%;}
#transform .second .image {margin-bottom:30px;}
#transform .second .image img {width:100%;}

#transform .more a {display:block;width:280px;padding:24px 0;margin:0 auto;color:#fff;text-align:center;font-weight:bold;background:#e0122a url(../../../img/arrow_w.png) no-repeat right 24px center;}
#transform .more a:hover {opacity:0.8;}*/

#transform .box_imgContents {background:#e0122a;padding:50px 0 30px;border-top:solid 10px #fff;}
#transform .box_imgContents .img {margin-bottom:30px;}
#transform .next_btn {display:block;width:85%;margin:0 auto;}
#transform .next_btn:hover {opacity:0.7;}

#chart {padding:90px 0;background:url(../img/district/chart_bg.jpg) repeat left top;border-top:solid 10px #fff;}
/*#chart_s .Flex {display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;}*/
#chart .Flex {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display: flex;flex-flow:row wrap;-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:stretch;-moz-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch;}
#chart .lede {display:table;width:100%;table-layout:fixed;margin-bottom:60px;}
#chart .lede > div {display:table-cell;vertical-align:middle;}
#chart .lede .image {position:relative;}
#chart .lede .image img {width:100%;}
#chart .lede .image #mark {width:164px;position:absolute;right:-120px;top:50%;transform:translateY(-50%);}
#chart .lede .text {background:#fff;padding:0 40px 0 150px;}
#chart .lede p {font-size:20px;}

.chart_box {border:solid 4px #000;padding:4px;background:#ffe900;}
.chart_box .box_inner {background:#fff;padding:4px;height:100%;}
.chart_box .type {text-align:center;padding:15px 0;background:url(../img/district/title_bg_orange.png) repeat left top;color:#fff;font-weight:bold;}
.chart_box.ss .data {padding:5% 3%;height:100%;}
.chart_box .data {padding:12% 7%;}
.chart_box .data .face {text-align:center;margin-bottom:30px;}
.chart_box .name {font-weight:bold;margin-bottom:10px;}
.chart_box .name span {display:block;}
.chart_box .image {margin-top:5%;}

.chart_box.ss .image {margin-top:0;}

.chart_box.ss .data {/*display:flex;justify-content:flex-end;*/display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display: flex;-webkit-box-align:end;-moz-box-align:end;-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end;}
.chart_box.ss .data > div.sp {display:none !important;}
.chart_box.ss .data .image {width:368px;}
.chart_box.ss .data .face {width:48%;min-height:0%;padding-right:2.5%;margin-bottom:0;text-align: right;}
.chart_box.ss .data .text {width:48%;}
.chart_box.ss .name {text-align:left;}
.chart_box.ss .name span {line-height:1.3em;}
.chart_box.m_box {width:31.5835%;}

.chart_line {text-align:center;}

#lineup {padding:90px 0 100px;}
#lineup .Flex {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display: flex;-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;flex-flow:row wrap;}
#lineup .Flex > div:hover {opacity:0.8;}
#lineup .m_box {flex-basis:31.5835%;max-width:31.5835%;/*margin-bottom:30px;*/}
#lineup .m_box:nth-child(1),
#lineup .m_box:nth-child(2),
#lineup .m_box:nth-child(3) {margin-bottom:30px;}
#lineup .image {margin-bottom:30px;}
#lineup .image img {width:100%;}
#lineup .text {padding-left:30px;font-weight:bold;background:url(../../../img/arrow.png) no-repeat left 10px;}

#movie_fire {padding:90px 0;background:url(../img/district/movie_bg.png) no-repeat center center;background-size:cover;}
#movie_fire .section_title,
#movie_fire .section_title span {color:#fff;}
#movie_fire .section_title:after {background:#fff;}
#movie_fire ul {display:flex;justify-content:space-between;margin-bottom:60px;}
/*#movie_fire .m_box {width:31.5835%;}*/
#movie_fire .m_box {flex-basis:48.75%;max-width:48.75%;}
#movie_fire .m_box a {display:block;border:solid 10px #fff;}
#movie_fire .m_box .image img {width:100%;} 
#movie_fire .m_box .name {background:#e0122a url(../../../img/arrow_w.png) no-repeat right 24px center;color:#fff;padding:15px 40px 15px 15px;font-weight:bold;line-height:1.8em;}
.youtube_btn {text-align:center;}
.youtube_btn img.pc {display:inline-block !important;}

@media screen and (max-width:640px){
	.inner {width:100%;}
	#wrap,
	.inner p {font-size:3.5vw;line-height:1.6em;}
	
	.inner {display:block !important;}
	.m_box {display:block;width:inherit;}
	
	.chart_box.ss .name span,
	.chart_box .name span {font-size:10px;line-height:2em;}
	.section_title span {font-size:12px;line-height:2em;}
	#fire_main .title > span {font-size:3vw;line-height:1.5em;}
	#about_fire .movie .name,
	#transform .first .sub,
	#lineup .text p {font-size:16px;line-height:1.5em;}
	.chart_box .type {font-size:18px;line-height:1.5em;}
	.chart_box.ss .name,
	.chart_box .name {font-size:20px;line-height:1.5em;}
	#transform .first .title,
	.section_title h2 {font-size:5vw;line-height:1.5em;}
	#fire_main .title {font-size:8vw;line-height:1.5em;}
	
	.section_title {margin-bottom:30px;}
	.section_title:after {width:40px;margin-left:-20px;}
	
	.table > div {display:block;}

    #fire_main {background:url(../img/district/main_bg_sp.png) 0 0 no-repeat;height:0;padding-top:75%;background-size:cover;padding-bottom:43.5%;}
	#fire_main .map {width:250px;position:static;margin:0 0 25px 20px;}
	#fire_main .m_box > div {padding:6% 4% 6%;}
	#fire_main .image {width:calc(25% - 12px);float:left;margin-bottom:5px;}
	#fire_main .title {width:calc(83% - 40px);float:right;margin-top:10px;}
	#fire_main .text {clear:both;}
	
	#about_fire {padding:45px 20px 50px;}
	#about_fire .movie,
	#about_fire .text {width:100%;}
	#about_fire .movie {margin-bottom:30px;}
	#about_fire .movie .name {padding:15px 35px 15px 20px;}
	#about_fire .text .image {margin-top:40px;}
	#about_fire .inner {-webkit-flex-direction:column;flex-direction:column;}
	#about_fire .text .image img {margin:0 auto;}
	
	#transform .first {padding:0;background:none;}
	#transform .first .m_box > div {padding:30px 20px;}
	#transform .first img {width:100%;}
	#transform .first .title br {display:none;}
	#transform .first .sub,
	#transform .first .title {margin-bottom:15px;}
	
	#transform .box_imgContents {padding:30px 10px;}
	#transform .box_imgContents .inner {width:calc(100% - 20px);}
	#transform .box_imgContents .next_btn {width:100%;}
	
	#transform .Flex {-webkit-flex-direction:column;flex-direction:column;margin-bottom:30px;}
	#transform .second {padding:30px 20px 45px;}
	#transform .second .image {margin-bottom:20px;}
	#transform .second .m_box {flex-basis:auto;max-width:100%;margin:0 0 30px 0 !important;}
	#transform .more a {width:inherit;padding:15px 0;}
	
	
	#chart {padding:45px 20px;}
	#chart .lede {margin-bottom:30px;}
	#chart .lede > div {display:block;}
	#chart .lede p {font-size:18px;}
	#chart .lede .text {padding:30px 20px 20px;}
	#chart .lede .image #mark {width:33%;left:50%;right:inherit;top:52%;bottom:-20px;transform:translate(-50%,0);}
	#chart .chart_box p {font-size:16px;}
	
	#chart_s .Flex {-webkit-flex-direction:column;flex-direction:column;}
	.chart_box.m_box {width:100%;}
	
	.chart_box .type {padding:10px 0;}
	.chart_box .data {padding:20px;}
	.chart_box .data .face {width:100% !important;text-align:center !important;margin-bottom:15px !important;}
	.chart_box .image {margin-top:20px !important;text-align:center !important;}
	.chart_box .image img {width:100%;}
	.chart_box .name {margin-bottom:5px;}
	
	.chart_box.ss {margin-bottom:20px;}
	.chart_box.ss .data > div {display:block !important;}
	.chart_box.ss .data .face {width:100%;text-align:center;padding-right:0;}
	.chart_box.ss .data {-webkit-flex-direction:column;flex-direction:column;}
	.chart_box.ss .data .text {width:100%;}
	.chart_box.ss .data {padding: 8% 5%;}
	
	.chart_line {display:none;}
	.chart_box.m_box:nth-child(1),
	.chart_box.m_box:nth-child(2) {margin:0 0 20px;}
	.chart_box.m_box:nth-child(3) {margin:0;}
	
	#lineup {padding:40px 20px 10px;}
	#lineup .Flex {-webkit-flex-direction:column;flex-direction:column;}
	#lineup .m_box {flex-basis:auto;max-width:100%;min-height:0%;padding-bottom:5.5em;}
	#lineup .m_box:nth-child(1),
	#lineup .m_box:nth-child(2),
	#lineup .m_box:nth-child(3) {margin-bottom:0;}
	#lineup .image {margin-bottom:20px;}
	#lineup .text {background-position:left 6px;padding-left:15px;}
	
	#movie_fire {padding:45px 20px 100px;}
	#movie_fire ul {-webkit-flex-direction:column;flex-direction:column;}
	#movie_fire .m_box {flex-basis:auto;max-width:100%;}
	#movie_fire .m_box:nth-child(1),
	#movie_fire .m_box:nth-child(2),
	#movie_fire .m_box:nth-child(3) {margin:0 0 20px;}
	#movie_fire ul {margin-bottom:0;}
	#movie_fire .m_box .name {padding:15px 35px 15px 20px;}
	.youtube_btn img.pc {display:none !important;}
}

@media screen and (max-width:480px){
	#lineup .m_box {padding-bottom:3em;}
}
