@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap');


/* タイトル位置
================================================== */
.main_title{
    width: 100%;
    position: absolute;
    top: 280px;
    text-align: center;
    color: #fff;
    z-index: 200;
    font-size: 6.5em;
    font-family: 'Tangerine', cursive;
	animation-name: move-h1;	
	animation-duration: 0.2s;	
	animation-delay: 1.0s;		
	animation-fill-mode: both;
}
.svg_title{
    width: 100%;
    position: absolute;
    top: 420px;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 50;
}
.svg_title h1 {	
	width: 100%;
	position: fixed;
	text-align: center;			
    bottom:-3%;
	left: 0%;	
	color: #fff;
    font-size: 1.1em;
    font-weight: 300;
    font-family: 'Sawarabi Gothic', sans-serif;
    letter-spacing: 0.12em;
	animation-name: move-h1;	
	animation-duration: 0.5s;	
	animation-delay: 1.5s;		
	animation-fill-mode: both;	
}
@keyframes move-h1 {
0% {
	opacity: 0;	
}
100% {
	opacity: 1;	
}
}


/* スライダー
================================================== */
.container {
    width: 100%;
    height: 87.8vh;
    background-color: #0b2237;
    z-index: 0;
}
.slider-area {
    position: relative;
    width: 100%;
    height: 80vh;
}
.slider-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    animation: slideShow 20s linear infinite 0s;
}
.slider-item:nth-child(2) {
    animation-delay: 5s;
}
.slider-item:nth-child(3) {
    animation-delay: 10s;
}
.slider-item:nth-child(4) {
    animation-delay: 15s;
}
.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes slideShow {
0% {
    opacity: 0;
    animation-timing-function: ease-in;
}
8% {
    opacity: 1;
    animation-timing-function: ease-out;
}
20% {
    opacity: 1;
}
40%,100% {
    opacity: 0;
}
}


/* スマホ用設定
================================================== */
@media only screen and (max-width:766px) {
.main_title{
    width: 100%;
    position: absolute;
    top: 350px;
    text-align: center;
    color: #fff;
    z-index: 200;
    font-size: 4em;
    font-family: 'Tangerine', cursive;
}
.svg_title{
    width: 96.5%;
    top:400px;
}
.svg_title h1 {			
    bottom:-52px;
	left: 0%;	
    font-size: 1em;
}
.container {
    width: 100%;
    height: 87.8vh;
    background-color: #0b2237;
    z-index: 0;
}
.slider-area {
    position: relative;
    width: 100%;
    height: 80vh;
}
}