@charset "UTF-8";

/* sass */
.wrap-mainvisual { margin: 0; position: relative; }

.wrap-mainvisual .mainvisual { width: 100%; background-color: #fff }

.wrap-mainvisual .mainvisual .main, .wrap-mainvisual .mainvisual .sub { line-height: 0; text-align: center; }

.wrap-mainvisual .mainvisual .main a { position: absolute; top: 0; left: 0; }

.wrap-mainvisual .mainvisual .main img, .wrap-mainvisual .mainvisual .sub img { width: 100%; max-width: 100%; }

.wrap-mainvisual .mainvisual .sub { height: 68px; background: #fff url(/template/top/kv/loading.gif) no-repeat center center; background-size: 24px 24px; }

.wrap-mainvisual .mainvisual .sub ul { display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -moz-flex; display: -ms-flex; display: flex; flex-wrap: wrap; padding-top: 5px; margin-left: -5px; }

.wrap-mainvisual .mainvisual .sub ul li { width: 33.3333333333333%; padding-left: 5px; font-size: 0; line-height: 0; }

.pc .wrap-mainvisual { position: relative; margin: 0; min-width: 1040px; background: transparent url(/template/top/kv/bg.jpg) top center; }

.pc .wrap-mainvisual .mainvisual { width: 1040px; margin: 0 auto; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -moz-flex; display: -ms-flex; display: flex; flex-wrap: wrap; justify-content: space-between; }

.pc .wrap-mainvisual .mainvisual .main { width: 780px; height:400px; margin: 0 5px 0 0; line-height: 0; font-size: 0; }

.pc .wrap-mainvisual .mainvisual .main a { transition: opacity 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; background-color: #fff; }

.pc .wrap-mainvisual .mainvisual .main:hover a { opacity: 0.2;}

.pc .wrap-mainvisual .mainvisual .main img { max-width: 780px; }

.pc .wrap-mainvisual .mainvisual .sub { width: 254px; height: auto; background: #fff url(/template/top/kv/loading.gif) no-repeat center center; background-size: 24px 24px; }

.pc .wrap-mainvisual .mainvisual .sub ul { display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -moz-flex; display: -ms-flex; display: flex; flex-wrap: wrap; flex-direction: column; padding-top: 0; justify-content: space-between; height: 100%; }

.pc .wrap-mainvisual .mainvisual .sub ul li { width: 100%; font-size: 0; line-height: 0; min-width: 1%; }

.pc .wrap-mainvisual .mainvisual .sub ul li:first-child { padding-top: 0; }

.pc .wrap-mainvisual .mainvisual .sub ul li img { max-width: 254px; }

.pc .wrap-mainvisual .mainvisual .sub a { display: block; background-color: #fff; }

.pc .wrap-mainvisual .mainvisual a img { transition: opacity 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; opacity: 1; }

.pc .wrap-mainvisual .mainvisual a:hover img { opacity: 0.8; }

/* KARTE TopBannerSetting */
.pc .wrap-mainvisual .mainvisual .sub div  { display: inline-block; height: 100%;}

.pc .wrap-mainvisual .mainvisual .sub .karte-widget__backdrop { height: auto; }