@charset "UTF-8";
/*font*/
/*$base_font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;*/
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; }

@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; }

@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }

@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }

@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; }

@font-face { font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 100; }

@font-face { font-family: "Helvetica Neue"; src: local("Helvetica Neue Regular"); font-weight: 200; }

/*! based on html5doctor.com Reset Stylesheet v1.6.1 Author: Richard Clark - http://richclarkdesign.com */
html { box-sizing: border-box; }

*, ::before, ::after { box-sizing: inherit; }

body { background: transparent; color: #000; line-height: 1; -webkit-text-size-adjust: 100%; }

html[lang="ja"] body { font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, Verdana, Meiryo, sans-serif; }

/* main elements group */
audio, canvas, progress, video { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

/* a */
#mv { position: relative; width: 100%; height: 100%; }

#mv #mv_mov { position: absolute; top: 8%; left: calc((100% - 92%) / 1); width: 92%; height: calc((100% - 8%) / 1); background: #ddd; z-index: 10; }

#mv #mv_mov #mv_mov_in { position: relative; width: 100%; height: 100%; overflow: hidden; }

#mv #mv_mov #mv_mov_in::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("/image/bg_cover.png"); background-repeat: repeat; z-index: 11; }

#mv #mv_mov #mv_mov_in video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; z-index: 10; }

#mv::before { content: ""; display: block; position: absolute; left: 0; top: 0; height: 77%; width: 100%; background: #000943; }

#mv_txt_area { width: 100%; height: 73%; position: absolute; top: 0; left: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: end; justify-content: flex-end; z-index: 12; padding-bottom: 4%; padding-left: 5%; }

#mv_txt_area #mv_txt003 { font-size: 2rem; font-weight: 900; color: #fff; }

#mv_txt_area #mv_txt_in #mv_txt001 { margin-bottom: 10px; }

#mv_txt_area #mv_txt_in #mv_txt002 { margin-bottom: 20px; }

#mv_txt_area #mv_txt_in p img { height: 104px; }

@keyframes y01 { 0% {
    transform: translate(0, 0);
    height: 0; }
  50% {
    transform: translate(0, 0);
    height: calc((100% - 21px) / 1); }
  100% {
    transform: translate(0, 100%);
    height: calc((100% - 21px) / 1); } }

@keyframes y02 { 0% { top: 0; }
  50% { top: calc((100% - 21px) / 1); }
  100% { top: calc((100% - 21px) / 1); } }

#top_sc { position: absolute; width: calc((100% - 92%) / 1); height: 23%; left: 0; top: 77%; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; }

#top_sc .top_sc_in { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: center; justify-content: center; padding: 30% 0; width: 100%; height: 100%; }

#top_sc .top_sc_in a { -webkit-writing-mode: vertical-lr; /* 実装済 */ -moz-writing-mode: vertical-lr; /* 実装済 */ -ms-writing-mode: vertical-lr; /* 実装済 */ -writing-mode: vertical-lr; display: block; position: relative; height: 100%; overflow: hidden; }

#top_sc .top_sc_in a::after { content: ""; display: block; position: absolute; right: 0; top: 0; width: 0; height: 0; border-style: solid; border-color: transparent #000943 transparent transparent; border-width: 0px 8px 21px 0px; animation: y02 2.5s infinite; animation-fill-mode: both; }

#top_sc .top_sc_in a::before { content: ""; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 0; background: #000943; animation: y01 2.5s infinite; animation-fill-mode: both; }

#top_sc .top_sc_in a span { transform: rotate(180deg); display: block; text-align: right; padding-left: 6px; font-family: "Bebas", Meiryo, YuGothic, "Hiragino Kaku Gothic Pro", "Osaka", sans-serif; font-size: 1.375rem; font-weight: bold; }

/*---------mv*/
#first { position: relative; overflow: hidden; }

#first::before { content: ""; width: 52%; height: 100%; background: url("/image/bg_first001.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; right: 0; z-index: 3; }

#first #first_in { width: 92%; margin: 0 auto; max-width: 1400px; position: relative; z-index: 4; }

#first #first_in #first_l { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-direction: column; flex-direction: column; width: 50%; padding: 8vw 0; }

#first #first_in #first_r { /*width: 60%; background: url("/image/bg_first001.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 10;*/ /*&::before{ content:""; height: 40vw; display: block; }*/ }

.first_md { width: 100%; margin-bottom: 30px; }

.first_md_in { width: 100%; position: relative; display: table; }

.first_md_in em { display: table-cell; vertical-align: middle; width: 100%; padding-left: 3vw; position: relative; }

.first_md_in em.second::before { background: #fff; }

.first_md_in em::before { content: ""; height: 1px; width: calc(100% - 20px); background: #000943; margin-top: -1px; position: absolute; top: 50%; margin-top: -1px; right: 0; }

.first_md_in span { display: table-cell; vertical-align: middle; }

.first_md_in img { height: 66px; display: block; }

.first_box { padding-right: 17%; }

#second { position: relative; padding-top: 240px; }

#second #second_in { width: 92%; margin: 0 auto; max-width: 1400px; position: relative; z-index: 4; }

#second #second_in #second_l { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-direction: column; flex-direction: column; width: 100%; padding: 10vw 0 10vw 50%; }

#second::after { content: ""; display: block; width: 70%; height: 105%; background: #000943; position: absolute; right: 0; top: -5%; }

#second::before { content: ""; width: 42%; height: 100%; background: url("/image/bg_second001.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 10%; left: 0; z-index: 3; }

#third { position: relative; padding: 8vw 0; }

#third::before { content: ""; width: 38%; height: 100%; background: url("/image/bg_third001.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; right: 0; z-index: 1; }

#third #third_in { position: relative; z-index: 2; width: 92%; margin: 0 auto; max-width: 1400px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: start; justify-content: flex-start; }

#third #third_in #third_l { width: 50%; padding-right: 15%; }

#third #third_in #third_r { width: 50%; background: #fff; }

.slide01 { position: relative; z-index: 2; }

.slide01 img { width: 100%; }

.slide01 .slick-list { position: relative; z-index: 1; }

.slide01 .slick-dots { position: absolute; bottom: 1vw; left: 1vw; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: start; justify-content: flex-start; z-index: 4; }

.slide01 .slick-dots li { margin-right: 10px; }

.slide01 .slick-dots li.slick-active button { background: #000943; }

.slide01 .slick-dots li button { display: block; text-indent: -9999px; overflow: hidden; border-radius: 100px; background: rgba(255, 255, 255, 0.6); height: 5px; border: none; width: 3vw; }

.slide02 img { width: 100%; }

.top_md001 { font-size: 2.8125rem; margin-bottom: 30px; font-weight: 900; }

.top_md001.second { color: #fff; }

.top_md001.third { font-size: 1.875rem; padding-top: 20px; }

.top_txt001 { line-height: 2; }

.top_txt001.second { color: #fff; }

@media all and (-ms-high-contrast: none){
 body{ font-family: Verdana, Meiryo, sans-serif; } }

@media screen and (max-width: 1000px){
 #mv{ height: 600px; }
 #mv #mv_mov{ left: 14%; width: 86%; }
 #mv_txt_area #mv_txt003{ line-height: 1.4; font-size: 1.625rem; }
 #mv_txt_area #mv_txt_in p img{ height: 43px; }
 #top_sc{ left: 2%; }
 #first{ padding-top: 226px; padding-bottom: 40px; }
 #first::before{ height: 240px; width: 100%; }
 #first #first_in #first_l{ width: 100%; padding: 0; }
 .first_box{ padding-right: 0; }
 #second #second_in #second_l{ padding: 10vw 0 10vw 0; }
 #second::after{ width: 100%; height: 100%; top: 0; }
 #second::before{ top: 0; width: 100%; height: 240px; }
 #third{ padding: 0 0 50px; }
 #third #third_in{ -ms-flex-direction: column-reverse; flex-direction: column-reverse; width: 100%; }
 #third #third_in #third_l{ padding-top: 20px; width: 92%; padding-right: 0; margin: 0 auto; }
 #third #third_in #third_r{ width: 100%; }
 .slide02 img{ width: 250px; }
 .top_md001{ font-size: 1.875rem; }
 .top_btn001{ padding-top: 30px !important; }
 .top_btn001 a{ display: block; width: 100%; }
 .slide01 .slick-slide{ height: 260px !important; } }