@charset "UTF-8";
#contents { position: relative; background: #fff; height: 100vh; }

#main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; overflow: hidden; }
#main .top-link { position: absolute; bottom: 0; left: 0; width: 100%; }
#main .top-link ul { width: 100%; display: flex; margin-left: 520px; padding: 20px 0; }
#main .top-link ul li a { max-width: 170px; display: block;}
#main .top-link ul li {z-index: 4;}
#main .top-link ul li + li { display: flex; justify-content: flex-end; margin-left: 20px; }
#main .top-link li.grayborder a { border: solid 1px #e4e4e4; }
#main .catch { width: 50%; height: 100%; display: flex; align-items: center; padding: 0 50px; padding-bottom: 110px; position: relative; }
#main .catch h2 { font-size: 3.125rem; z-index: 4; }
#main #slider { position: fixed; width: 50%; height: 100%; top: 0; right: 0%; z-index: 3; display: flex; justify-content: space-between; align-items: center;}
#main #slider .result-slider { width: 45%; height: 100%; transform: skewX(-20deg); }
#main #slider .result-slider > ul,#main #slider .result-slider > ul .slick-list { height: 100%!important; }
#main #slider .result-slider li + li { margin-top: 80px; }
#main #slider .result-slider li a { display: block; padding-bottom: 66.6666%; position: relative; }
#main #slider .result-slider li figure { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-position: left center; background-repeat: no-repeat; background-size: 100% auto; transition: .5s; overflow: hidden; position: absolute; }
#main #slider .result-slider li figure:before { content: ""; background: linear-gradient(to right,rgba(249, 146, 163,.3), rgba(253, 214, 189,.5)); width: 100%; height: 100%; position: absolute; top: 0; left: -101%; transition: .3s; }
#main #slider .result-slider li a:hover figure:before { left: 0; }
#canvasWave { position: absolute; top: 0; left: 0; background: #fff; width: 100%; height: 100%; }

/* no-slider*/
#slider:not(.act-slider) #result-slider-down{display:none}
#slider:not(.act-slider) #result-slider-up{width:100%}
#slider:not(.act-slider) #result-slider-up > ul{display:flex;align-items:center}
#slider:not(.act-slider) #result-slider-up > ul li{display:block;width:100%;margin-bottom:10%}

/* -------------------------------------------- */
/*  animation */
/* -------------------------------------------- */
/* fadein */
.sliderimg-list,.sliderimg-list2 {opacity: 0;}
.sliderimg-list.inview-show { 
    -webkit-animation: 1.2s cubic-bezier(0.215, 1, 0.355, 1) both .2s;
    animation: 1.2s cubic-bezier(0.215, 1, 0.355, 1) both .2s;
    -webkit-animation-name: slide_in_y;
    animation-name: slide_in_y;
}
.sliderimg-list2.inview-show { 
    -webkit-animation: 1.2s cubic-bezier(0.215, 1, 0.355, 1) both .2s;
    animation: 1.2s cubic-bezier(0.215, 1, 0.355, 1) both .2s;
    -webkit-animation-name: slide_in_-y;
    animation-name: slide_in_-y;
}

@-webkit-keyframes slide_in_y {
    0% { -webkit-transform: translateY(800%); opacity: 0;}
    100% { -webkit-transform: translateY(0); opacity: 1;}
}
@keyframes slide_in_y {
    0% { transform: translateY(800%); opacity: 0;}
    100% { transform: translateY(0); opacity: 1;}
}
@-webkit-keyframes slide_in_-y {
    0% { -webkit-transform: translateY(-800%); opacity: 0;}
    100% { -webkit-transform: translateY(0); opacity: 1;}
}
@keyframes slide_in_-y {
    0% { transform: translateY(-800%); opacity: 0;}
    100% { transform: translateY(0); opacity: 1;}
}


@media print, screen and (min-width: 993px) {
	#contents { padding-top: 0; }
	header { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; background: none; z-index: auto; }
	header .logo { margin: 20px 0 0 40px; position: relative; z-index: 2; }
	header nav { position: absolute; bottom: 0; left: 0; background: none; width: auto; height: 104px; z-index: 4; }
	header .language-select { position: absolute; right: inherit; left: 320px; top: 32px; background: #fff; float: none; margin: 0; }
}

@media print, screen and (max-width: 992px) {
	#main { padding-top: 58px; }
	#main .top-link { padding: 0 20px; }
	#main .top-link ul { margin: 0; justify-content: center;}
	#main #slider { width: 40%; top: 0; right: 0%; z-index: 3; display: flex; justify-content: space-between; }
	#main #slider .result-slider { width: 90%; transform: skewX(-15deg); }
	#main #slider #result-slider-down { display: none; }
	#main .catch { width: 60%; padding: 0 20px; padding-bottom: 150px; }
}
@media print, screen and (max-width: 768px) {
	#main .top-link { position: absolute; bottom: 0; left: 0; }
	#main .catch { padding-bottom: 80px; }
	#main .catch h2 { font-size: 2rem; z-index: 4; }
	#main #slider { height: 100%; width: 50%; }
	#main #slider .result-slider { width: 100%; transform: skewX(-15deg); }
	#main #slider .result-slider li + li { margin-top: 20px; }
}