@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap'); /*Noto-sans*/



/*******************************************
	Common Style
*******************************************/
.mainSection * {font-family:'Noto Sans', sans-serif !important;}
.mainSection .inner {max-width:1400px;}
.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}

.mainSection {position:relative;}
.mainSection .sectionTitle .point {font-size:1.2em; font-weight:500; color:#ff5757; margin-bottom:0.5em;}
.mainSection .sectionTitle .tit {font-size:2.5em; font-weight:700; color:#222;}

@media all and (max-width:1024px) {
	.mainSection .inner {padding:1em;}
	.mainSection.mainVisualWrap .inner {padding:3em; width:100%;}
	.mainSection .sectionTitle .tit {font-size:2em;}
}
@media all and (max-width:640px) {
	.mainSection .sectionTitle .tit {font-size:1.8em;}
}
@media all and (max-width:480px) {
	.mainSection .sectionTitle .point {font-size:1em;}
	.mainSection .sectionTitle .tit {font-size:1.6em;}
}



/*******************************************
	section visual
*******************************************/
.mainVisualWrap .inner {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:10; text-shadow:0px 4px 2.5em rgba(35, 77, 118, 0.3);}
.mainVisualWrap .tit p {font-size:3.6em; font-weight:700; line-height:1.2em; color:#fff;}

.mainVisual {display:block; position:relative; width:100%; height:35em; margin:0 auto;}

.mainVisual .control {display:block; position:relative; margin-top:4.5em; width:17em; z-index:5;}
.mainVisual .control > * {display:inline-block; position:relative; vertical-align:middle; bottom:auto; left:auto; right:auto; top:auto; height:1em; line-height:1em;}

.mainVisual .swiper-pagination-progressbar {width:7em; height:3px !important; margin:0 1em; background:rgba(255,255,255,0.4); border-radius:0.25em; overflow:hidden;}
.mainVisual .swiper-pagination-progressbar-fill {background:#fff; border-radius:0.25em;}
.mainVisual .control span.active {display:inline-block; font-size:0.8em; font-weight:400; color:#fff;}
.mainVisual .control span.total {display:inline-block;font-size:0.8em; font-weight:400; color:#fff; margin-right:1.2em;}
.mainVisual .control button {overflow:hidden; width:1em; height:1em; line-height:1em; text-indent:-999em;}
.mainVisual .control button.prev {background:url(../img/main/ico_v_arrow_left.png) center no-repeat;}
.mainVisual .control button.next {background:url(../img/main/ico_v_arrow_right.png) center no-repeat;}
.mainVisual .control button.stop {background:url(../img/main/ico_v_stop.png) center no-repeat;}
.mainVisual .control button.play {background:url(../img/main/ico_v_play.png) center no-repeat; display:none;}

.mainVisual .slider {display:block; position:relative; height:100%; overflow:hidden;}
.mainVisual .slider .swiper-container {}
.mainVisual .slider .swiper-container,
.mainVisual .slider .swiper-wrapper,
.mainVisual .slider .swiper-slide {height:100%;}
.mainVisual .slider .swiper-slide {}
.mainVisual .slider .swiper-slide > * {display:block;}

.mainVisual .slider .swiper-slide.visual01 {background:url(../img/main/img_main_visual01.png) center no-repeat; background-size:cover;}
.mainVisual .slider .swiper-slide.visual02 {background:url(../img/main/img_main_visual02.png) center no-repeat; background-size:cover;}
.mainVisual .slider .swiper-slide.visual03 {background:url(../img/main/img_main_visual03.png) center no-repeat; background-size:cover;}

@media all and (min-width:1025px) {
	.mainVisualWrap .inner {width:1400px;}
	.mainVisualWrap .inner.tit {top:calc(50% - 2em);}
	.mainVisual .control {position:absolute; top:calc(50% - -4em); left:50%; transform:translate(-50%, -50%); width:1400px; z-index:10;}
}
@media all and (max-width:1024px) {
	.mainVisual {height:30em;}
	.mainVisualWrap .tit p {font-size:3em; text-align:center;}
	.mainVisualWrap .inner.tit {padding-bottom:6em;}
	.mainVisual .control {position:absolute; bottom:4em; left:50%; transform:translate(-50%, 0); z-index:10; text-align:center;}
}
@media all and (max-width:640px) {
	.mainVisual {height:26em;}
	.mainVisualWrap .tit p {font-size:2.2em;}
}
@media all and (max-width:480px) {
	.mainVisual {height:22em;}
	.mainVisualWrap .tit p {font-size:1.7em;}
}



/*******************************************
	section link
*******************************************/
.mainLinkWrap:before {content:''; position:absolute; width:12.5em; height:18em; top:1.5em; right:-1em; background:url(../img/main/obj_line01.png) left 0 top 0 no-repeat;}
.mainLinkWrap ul:after {content:""; display:block; clear:both;}
.mainLinkWrap ul li {position:relative; font-weight:400; color:#333; padding:1em; border-radius:1em;}
.mainLinkWrap ul li:hover,
.mainLinkWrap ul li:focus {font-weight:700;}
.mainLinkWrap ul li + li:after {content:""; position:absolute; top:3.5em; left:-0.75em; width:1.5em; height:3em; background:url(../img/main/obj_dot.png) center no-repeat;}
.mainLinkWrap ul li a {display:block; height:100%; padding-bottom:1em;}
.mainLinkWrap ul li a * {display:block; text-align:center;}
.mainLinkWrap ul li a img {margin:0 auto 0.5em auto;}

@media all and (min-width:1025px) {
	.mainLinkWrap {padding:3em 0 4em 0;}
	.mainLinkWrap ul li {float:left; width:16.66%;}
}
@media all and (max-width:1024px) {
	.mainLinkWrap {padding:2em 0; text-align:center;}
	.mainLinkWrap ul li {display: inline-block; width:32.3%;}
	.mainLinkWrap ul li:nth-child(4):after {display:none;}
}
@media all and (max-width:640px) {
	.mainLinkWrap ul li {width:49%;}
	.mainLinkWrap ul li:nth-child(4):after {display:block;}
	.mainLinkWrap ul li:nth-child(3):after,
	.mainLinkWrap ul li:nth-child(5):after {display:none;}
}



/*******************************************
	section city
*******************************************/
.mainCityWrap:before {content:''; position:absolute; width:9em; height:28em; top:-1.5em; left:-1em; background:url(../img/main/obj_circle01.png) right 0 top 0 no-repeat;}

.mainCityWrap .left .top {margin-bottom:2em;}
.mainCityWrap .left .bottom {border-top:1px solid #ddd; margin-top:1.6em}
.mainCityWrap .left .bottom p {font-size:1.5em; font-weight:500; color:#333; padding:1.2em 0 1em;}
.mainCityWrap .left .bottom span {display:block; font-size:0.8em; font-weight:500; line-height:1.5em; color:#888;}
.mainCityWrap .left .bottom a {display:inline-block; font-size:0.8em; font-weight:600; padding:1.2em 4.6em 1.2em 2em; color:#00b8f2; background:#fff url(../img/main/ico_arrow_right_sky.png) center right 1em no-repeat; border:2px solid #66d4f7; border-radius:4em; margin-top:2.5em; box-shadow:5px 5px 20px 0px rgba(0, 198, 239, 0.1); transition:box-shadow 0.2s;}
.mainCityWrap .left .bottom a:hover,
.mainCityWrap .left .bottom a:focus {box-shadow:5px 5px 20px 0px rgba(0, 198, 239, 0.25);}

.mainCity {display:block; position:relative; width:100%; /*height:21.2em;*/ margin:0 auto;}
.mainCity:after {content:''; position:absolute; width:9.5em; height:12.1em; bottom:-2.2em; right:-3.5em; background:url(../img/main/obj_dot_box.png) left 0 top 0 no-repeat;}

.mainCity .control {display:block; position:absolute; bottom:0.1em; height:3em; background:#fff; z-index:3; text-align:center;}
.mainCity .control > * {float:left; position:relative; vertical-align:middle; bottom:auto; left:auto; right:auto; top:auto; width:3em; height:3em; line-height:3em;}
.mainCity .control button {overflow:hidden; text-indent:-999em;}
.mainCity .control button.prev {background:#bbbbbb url(../img/main/ico_arrow_left.png) center no-repeat;}
.mainCity .control button.next {background:#00b8f2 url(../img/main/ico_arrow_right.png) center no-repeat;}

.mainCity .slider {display:block; position:relative; height:100%; overflow:hidden;}
.mainCity .slider .swiper-container {}
.mainCity .slider .swiper-container,
.mainCity .slider .swiper-wrapper,
.mainCity .slider .swiper-slide {height:100%;}
.mainCity .slider .swiper-slide {background:#fff;}
.mainCity .slider .swiper-slide > * {display:block;}
.mainCity .slider .swiper-slide a {text-align:center;}
.mainCity .slider .swiper-slide img {width:100%;}

@media all and (min-width:1025px) {
	.mainCityWrap {margin-bottom:4em;}
	.mainCityWrap .left,
	.mainCityWrap .right {float:left; width:50%;}
	.mainCityWrap .left {padding-right:5em;}
	.mainCity .control {left:calc(50% - 3em);}
}
@media all and (max-width:1024px) {
	.mainCityWrap {text-align:center;}
	.mainCityWrap:before {top:-25em; background-size:cover; z-index:-1;}
	.mainCityWrap .left .bottom {height:13em; margin-bottom:2em; border:none;}
	.mainCityWrap .left .bottom p {font-size:1.2em; padding:0 0 1em;}
	.mainCityWrap .left .bottom a {margin-top:1.5em;}
	.mainCityWrap .left .bottom span br {display:none;}
}
@media all and (max-width:640px) {
}



/*******************************************
	section notice
*******************************************/
.mainNoticeWrap:before {content:''; position:absolute; width:12.7em; height:12.7em; bottom:-6em; left:0em; background:url(../img/main/obj_line02.png) right 0 top 0 no-repeat; z-index:-1;}
.mainNoticeWrap:after {content:''; position:absolute; width:15.7em; height:15.5em; bottom:-6.5em; right:0em; background:url(../img/main/obj_circle02.png) left 0 top 0 no-repeat; z-index:-1;}
.mainNoticeWrap .sectionTitle {text-align:center; padding:2.5em 0;}

.mainNoticeWrap ul:after { content:""; display:block; clear:both;}
.mainNoticeWrap ul li {padding:1em 0.7em; transition:padding 0.3s;}
.mainNoticeWrap ul li a {display:block; background:#fff; box-shadow:0px 4px 15px 0px rgba(0, 0, 0, 0.1); overflow:hidden; border-radius:1em;}
.mainNoticeWrap ul li a img {width:100%; height:10.7em;}
.mainNoticeWrap ul li a .txt {padding:1.25em 1.25em 3.25em; background:url(../img/main/ico_arrow_link_right.png) bottom 0.5em right 1.5em no-repeat;}
.mainNoticeWrap ul li a .txt:hover,
.mainNoticeWrap ul li a .txt:focus {background:url(../img/main/ico_arrow_link_right_sky.png) bottom 0.5em right 1.5em no-repeat;}

.mainNoticeWrap ul li a .txt .tit {font-size:1.1em; line-height:1.4em; font-weight:700; color:#333; margin-bottom:0.6em; width:100%; height:3em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mainNoticeWrap ul li a .txt .sub {font-size:0.7em; line-height:1.2em; font-weight:300; color:#666; width:100%; height:2.5em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}


@media all and (min-width:1025px) {
	.mainNoticeWrap {margin-bottom:6.5em;}
	.mainNoticeWrap ul li {float:left; width:25%;}
	.mainNoticeWrap ul li:hover,
	.mainNoticeWrap ul li:focus {padding:0em 0.7em 1em 0.7em;}
}
@media all and (max-width:1024px) {
	.mainNoticeWrap:before {top:-4em; left:-2.5em;}
	.mainNoticeWrap ul li {float:left; width:50%;}
}
@media all and (max-width:640px) {
	.mainNoticeWrap ul li {width:100%;}
}