@charset "utf-8";

/*******************************************
	Common Style
*******************************************/
.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 .main .inner {position:absolute; top:6em; left:50%; transform:translateX(-50%); width: 1560px; z-index:10;}
.mainSection .main .inner .tit {margin-bottom:1.435em; text-align:center;}
.mainSection .main .inner .tit img {margin:0 auto;}

@media all and (max-width:1024px) {
	.mainSection .main .inner {width:100%; padding:1em;}
}



/*******************************************
	section visual
*******************************************/
.mainVisual {display:block; position:relative; width:100%; margin:0 auto;}
.mainVisual .control {display:block; position:absolute; left:50%; transform:translateX(-50%); bottom:11.9em; width:auto; height:2.35em; padding:0 2em; background:rgba(0,0,0,0.1); border-radius:2em; z-index:5; text-align:center;}
.mainVisual .control > * {display:inline-block; position:relative; vertical-align:middle; bottom:auto; left:auto; right:auto; top:auto; height:2.35em; line-height:2.35em; }

.mainVisual .control .arrow {display:none;}
.mainVisual .control .pager {width:auto; color:#777777;}
.mainVisual .control .pager > * {display:inline-block; position:relative; vertical-align:middle; margin:0 0.5em;}

.mainVisual .control .pager .swiper-pagination-bullet {width:0.5em; height:0.5em; background:#fff; border-radius:2em; opacity:1;}
.mainVisual .control .pager .swiper-pagination-bullet-active {width:1em; height:1.35em; background:url(../img/main/ico_side_active.svg) no-repeat;}

.mainVisual .control button {display:inline-block; width:2em; height:2em; text-indent:-999em;}
.mainVisual .control button.stop {background:url(../img/main/ico_stop_w.svg) center no-repeat;}
.mainVisual .control button.play {background:url(../img/main/ico_play_w.svg) 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:nth-of-type(1) {background:url(../img/main/img_visual01.png) center no-repeat; background-size:cover;}
.mainVisual .slider .swiper-slide:nth-of-type(2) {background:url(../img/main/img_visual02.png) center no-repeat; background-size:cover;}

@media all and (min-width:1025px) {
	.mainVisual {height:calc(100vh - 6em); min-height:34em;}
}
@media all and (max-width:1024px) {
	.mainVisual {height:34em;}
}
@media all and (max-width:640px) {
	.mainVisual {height:32em;}
}
@media all and (max-width:480px) {
	.mainSection .main .inner .tit img {width:100%;}
}



/* waves */
.ocean {position:absolute; width:100%; height: 5%; left:0; background: #fff; z-index:9;}
.wave {background: url(../img/main/obj_wave01.svg) repeat-x;  position: absolute; top: -140px; width: 6400px; height: 140px; animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0);}
.wave:nth-of-type(2) {background: url(../img/main/obj_wave02.svg); top: -140px; animation: wave 6.5s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite; opacity: 1;}
.wave:nth-of-type(3) {background: url(../img/main/obj_wave01.svg); top: -145px; animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -2.2s infinite; opacity: 1;}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-25px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}

@media all and (min-width:1025px) {
	.ocean {bottom:0;}
}
@media all and (max-width:1024px) {
	.ocean {position:absolute; width:100%; height: 0; top:35.5em; left:0; background: #fff; z-index:5;}
	.wave:nth-of-type(2) {background: url(../img/main/obj_wave01.svg);}
}
@media all and (max-width:640px) {
	.ocean {top:33.75em;}
}



/* notice */
.mainSection .noticeWrap .inner > * {vertical-align:middle;}
.mainSection .noticeWrap .inner > .tit {display:inline-block; font-size:1.2em; font-weight:700; color:#333; margin-right:2em;}
.mainSection .noticeWrap .inner > .tit:before {content:''; display:inline-block; width:1.4em; height:1.4em; background:url(../img/main/ico_alarm.svg) center no-repeat; margin-right:0.75em; vertical-align:middle;}
.mainSection .noticeWrap .inner > a.goto-link {display:inline-block;float: right;width: 17.3em;height:4.1em;background:url(../img/main/btn_sudo.svg) center no-repeat;color:#fff;border-radius:2.5em;text-align:center;line-height:3.5em;text-indent:-999em;}

.mainSection .noticeWrap .notice {display:inline-block; position:relative; width:42.5em; height:3.5em; margin:0 auto;}
.mainSection .noticeWrap .notice .control > * {display:inline-block; position:relative; vertical-align:middle; bottom:auto; left:auto; right:auto; top:auto; height:2em; line-height:2em;}
.mainSection .noticeWrap .notice .control .pager {width:auto; color:#777777; margin-right:1em;}
.mainSection .noticeWrap .notice .control .pager > * {display:inline-block; position:relative; vertical-align:middle; margin:2px;}

.mainSection .noticeWrap .notice .control button {width:2em; height:1.2em; overflow:hidden; text-indent:-999em; margin-left:-4px;}
.mainSection .noticeWrap .notice .control button.next {background:url(../img/main/ico_arrow_next.svg) center no-repeat;}
.mainSection .noticeWrap .notice .control button.prev {background:url(../img/main/ico_arrow_prev.svg) center no-repeat; border-right:1px solid #E4E4E4;}
.mainSection .noticeWrap .notice .control button.stop {background:url(../img/main/ico_stop.svg) center no-repeat;}
.mainSection .noticeWrap .notice .control button.play {background:url(../img/main/ico_play.svg) center no-repeat; display:none;}
.mainSection .noticeWrap .notice .control button.swiper-button-disabled {opacity:0.3;}
.mainSection .noticeWrap .notice .control a {display:inline-block; width:1em; height:1em; background:url(../img/main/ico_more.svg) center no-repeat; text-indent:-999em;}

.mainSection .noticeWrap .notice .slider {display:block; position:relative; height:100%; overflow:hidden;}
.mainSection .noticeWrap .notice .slider .swiper-container {}
.mainSection .noticeWrap .notice .slider .swiper-container,
.mainSection .noticeWrap .notice .slider .swiper-wrapper,
.mainSection .noticeWrap .notice .slider .swiper-slide {height:100%;}
.mainSection .noticeWrap .notice .slider .swiper-slide {}

.mainSection .noticeWrap .notice .slider .swiper-slide > * {display:block;}
.mainSection .noticeWrap .notice .slider .swiper-slide {font-size:0.9em;}
.mainSection .noticeWrap .notice .slider .swiper-slide .tit {display:inline-block; width:30em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; color:#333;}
.mainSection .noticeWrap .notice .slider .swiper-slide .date {font-weight:500; color:#666;}

@media all and (min-width:1600px) {
	.mainSection .noticeWrap .notice {width:44.5em;}
}
@media all and (min-width:1025px) {
	.mainSection .noticeWrap {position:absolute; height:5.5em; width:100%; bottom:0; left:0; right:0; background:linear-gradient(0deg, #FFF 72.12%, rgba(255, 255, 255, 0.00) 100%); z-index:10; vertical-align:middle;}
	.mainSection .noticeWrap .notice .control {display:block; position:absolute; left:0; top:0; padding:1.15em 0; width:7.75em; height:3.5em; z-index:5; text-align:center;}
	.mainSection .noticeWrap .notice .slider {padding-left:10.25em;}
	.mainSection .noticeWrap .notice .slider .swiper-slide > * {line-height:3.9em;}
	.mainSection .noticeWrap .notice .slider .swiper-slide .date {float:right;}
}
@media all and (max-width:1024px) {
	.mainSection .noticeWrap {background:#fff; padding:2em;}
	.mainSection .noticeWrap .swiper-wrapper {margin-top:1em;}
	.mainSection .noticeWrap .inner > a.goto-link {width:100%; height:4.5em; margin:2em auto 0 0;}
	.mainSection .noticeWrap .notice {width: 100%; height:100%;}
	.mainSection .noticeWrap .notice .control {display:block; position:absolute; right:0; top:-2.75em; padding:1.15em 0; width:7.75em; height:3.5em; z-index:5; text-align:center;}
	.mainSection .noticeWrap .notice .slider .swiper-slide .tit {width:100%; margin:1em 0;}
	
}