body,
p {
    margin: 0;
}

body{
    font-family: メイリオ, YuGothic, Yu Gothic, ヒラギノ角ゴ, sans-serif !important;
}

a{
    text-decoration: none;
}

.objectCover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.mainVisual {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* height: 100dvh; */
}


/* ロゴ */
#logo{
    position: absolute;
    inset: 0 auto auto 0;
    width: 60px;
    margin: 1rem;
    z-index: 100;
}
#logo img{
    width: 100%;
}


/* キャッチコピー */
.catch {
    position: absolute;
    inset: 190px auto auto 174px;
    text-shadow: #7b7b7b 0px 0 10px;
    color: #000000;
    z-index: 95;
    transition: color 1s;
}
.catch p{
    line-height: 1.3;
}
.catch .catchRow{
    display: flex;
    overflow: hidden;
    font-size: 3.5vw;
    padding: 0 1rem;
}
.catch .catchRow span {
    display: block;
    transform: translate(0, 105%);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}


.catch .sub{
    margin-top: 1rem;
    font-size: 1.5vw;
    overflow: hidden;
    transform: translate(-100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;
    transition-delay:2.50s;
}

.catch .sub span {
    display: block;
    padding: 0 1rem;
    transform: translate(100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;
    transition-delay:2.50s;
}


@media(max-width: 1280px){
    .catch {
        inset: 20% auto auto 8%;
    }
    .catch .catchRow{
        font-size: 2.5rem;
    }
    .catch .sub{
        font-size: 1.5rem;
    }
}


/* スライドショー */
#topSlide{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100svh;
}
#topSlide .slide{
    position: absolute;
    right: 0;
    width: 0%;
    height: 100%;
    overflow: hidden;
    transition: 1s cubic-bezier(.86, 0, .07, 1);
}
#topSlide .slide > div{
    position: relative;
    width: 100%;
    height: 100%;
}
#topSlide .slide .flame{
    position: absolute;
    right: 0;
    width: 100vw;
    height: 100%;
}
#topSlide .slide1{
    z-index: 96;
}
#topSlide .slide2{
    z-index: 97;
}
#topSlide .slide3{
    z-index: 98;
}
#topSlide .slide4{
    background-color: #ffffff;
    z-index: 99;
}
#topSlide .slide4 .screen{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f4a76e;
    opacity: 0.6;
    z-index: 1;
}
#topSlide .slide4 .catch{
    color: #ffffff;
}



/* オートスライダー */
#autoSlider{
    opacity: 0;
    transform: translate(0px, calc((100dvh - 100%)/2));
}
#autoSlider .sliderFlame{
    display: flex;
}
#autoSlider .sliderFlame .slider {
    display: flex;
    padding-top: 10px;
}

#autoSlider .sliderFlame.reverse{
    flex-direction: row-reverse;
}
#autoSlider .sliderFlame.reverse .slider{
    flex-direction: row-reverse;
}

#autoSlider .sliderFlame .slider .image {
    /* width: 300px; */
    /* height: 200px; */
    height: calc(100dvh / 5);
    aspect-ratio: 3/2;
    padding-left: 10px;
}

#autoSlider .sliderFlame .slider{
    animation: loopSlideAnime 40s linear 0s infinite normal both;
}
@keyframes loopSlideAnime {
    0% {transform: translateX(0);}
    100% {transform: translateX(-100%);}
}
#autoSlider .sliderFlame.reverse .slider{
    animation: loopSlideAnimeReverse 40s linear 0s infinite normal both;
}
@keyframes loopSlideAnimeReverse {
    0% {transform: translateX(0);}
    100% {transform: translateX(100%);}
}


.slideZoom{
    animation: slideZoomAnime 2000ms linear 0s normal both;
}
@keyframes slideZoomAnime {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}



#mainVisualBottom{
    position: absolute;
    bottom: 0;
    right: 0;

    display: flex;
    flex-wrap: wrap;
    width: 850px;
    box-sizing: border-box;
    padding: 1rem;
    padding-right: 0;
    background-color: #ffffff;
    border-radius: 50px 0 0 0;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    z-index: 120;
    transform: translateY(100%);
}
#mainVisualBottom .flame{
    box-sizing: border-box;
    width: calc(100%/4);
    aspect-ratio: 220/140;
    /* margin-right: 1rem; */
    padding-right: 1rem;
}

#mainVisualBottom a{
    display: contents;
}
#mainVisualBottom .contents{
    
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem;
    
    font-size: 1.0rem;
    color: #fff;
    text-align: center;
    border-radius: 45px 0 0 0;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    /* position: relative;
    overflow: hidden; */
}

@media(max-width: 850px){
    #mainVisualBottom{
        width: 100%;
        padding: 0.5rem;
        padding-right: 0;
    }
    #mainVisualBottom .flame{
        /* margin-right: 0.5rem; */
        padding-right: 0.5rem;
    }
    #mainVisualBottom .contents{
        font-size: 0.9rem;
    }
}

@media(max-width: 580px){
    #mainVisualBottom{
        padding-bottom: 0;
    }
    #mainVisualBottom .flame{
        width: calc(100%/2);
        aspect-ratio: 220/125;
        padding-bottom: 0.5rem;
    }
}

#mainVisualBottom .contents span{
    display: block;
}
#mainVisualBottom a:nth-child(1) .contents{
    background: linear-gradient(90deg, #ff97a9 0%, #ffd0b4 100%);
}
#mainVisualBottom a:nth-child(2) .contents{
    background: linear-gradient(90deg, rgba(244,167,110,1) 0%, rgba(244,213,110,1) 100%);
}
#mainVisualBottom a:nth-child(3) .contents{
    background: linear-gradient(90deg, rgba(95,195,140,1) 0%, rgba(198,244,110,1) 100%);
}
#mainVisualBottom a:nth-child(4) .contents{
    background: linear-gradient(90deg, rgba(180,164,199,1) 0%, rgb(177 207 194) 100%);
}











/* アニメーション設定 */

/* キャッチ */
.mainVisual.visible .catch .catchRow span {
    transform: translate(0, 0);
}
.catch .catchRow1 span:nth-child(1){transition-delay:0.00s;}
.catch .catchRow1 span:nth-child(2){transition-delay:0.06s;}
.catch .catchRow1 span:nth-child(3){transition-delay:0.12s;}
.catch .catchRow1 span:nth-child(4){transition-delay:0.18s;}
.catch .catchRow1 span:nth-child(5){transition-delay:0.24s;}
.catch .catchRow1 span:nth-child(6){transition-delay:0.30s;}
.catch .catchRow1 span:nth-child(7){transition-delay:0.36s;}
.catch .catchRow1 span:nth-child(8){transition-delay:0.42s;}
.catch .catchRow1 span:nth-child(9){transition-delay:0.48s;}
.catch .catchRow1 span:nth-child(10){transition-delay:0.54s;}

.catch .catchRow2 span:nth-child(1){transition-delay:0.60s;}
.catch .catchRow2 span:nth-child(2){transition-delay:0.66s;}
.catch .catchRow2 span:nth-child(3){transition-delay:0.72s;}
.catch .catchRow2 span:nth-child(4){transition-delay:0.78s;}
.catch .catchRow2 span:nth-child(5){transition-delay:0.84s;}
.catch .catchRow2 span:nth-child(6){transition-delay:0.90s;}
.catch .catchRow2 span:nth-child(7){transition-delay:0.96s;}
.catch .catchRow2 span:nth-child(8){transition-delay:1.02s;}
.catch .catchRow2 span:nth-child(9){transition-delay:1.08s;}
.catch .catchRow2 span:nth-child(10){transition-delay:1.14s;}
.catch .catchRow2 span:nth-child(11){transition-delay:1.20s;}

.catch .catchRow3 span:nth-child(1){transition-delay:1.26s;}
.catch .catchRow3 span:nth-child(2){transition-delay:1.32s;}
.catch .catchRow3 span:nth-child(3){transition-delay:1.38s;}
.catch .catchRow3 span:nth-child(4){transition-delay:1.44s;}
.catch .catchRow3 span:nth-child(5){transition-delay:1.50s;}
.catch .catchRow3 span:nth-child(6){transition-delay:1.56s;}
.catch .catchRow3 span:nth-child(7){transition-delay:1.62s;}
.catch .catchRow3 span:nth-child(8){transition-delay:1.68s;}
.catch .catchRow3 span:nth-child(9){transition-delay:1.74s;}
.catch .catchRow3 span:nth-child(10){transition-delay:1.80s;}
.catch .catchRow3 span:nth-child(11){transition-delay:1.86s;}

/* サブ キャッチ */
.mainVisual.visible .catch .sub,
.mainVisual.visible .catch .sub span {
    transform: translate(0, 0);
}
.catch .sub,
.catch .sub span {transition-delay:2.50s;}

/* キャッチカラー等 */
.catch{
    transition-delay:3.50s;
}
@media(min-width: 700px){
    .mainVisual.visible .catch{
        color: #ffffff;
        /* text-shadow:'#000000 0px 0 10px'; */
    }
    .catch{
        z-index: 110;
    }
    #topSlide .slide4 .catch{
        display: none;
    }
}

/* スライドショー */
.mainVisual.visible #topSlide .slide{
    width: 100%;
}
.mainVisual.visible #topSlide .slide:not(.slide4) .flame{
    transform: scale(1.1);
}
#topSlide .slide:not(.slide4) .flame{
    transition: transform 2000ms linear;
}

#topSlide .slide1,
#topSlide .slide1 .flame{
    transition-delay:3.50s!important;
}
#topSlide .slide2,
#topSlide .slide2 .flame{
    transition-delay:4.80s!important;
}
#topSlide .slide3,
#topSlide .slide3 .flame{
    transition-delay:6.10s!important;
}
#topSlide .slide4{
    transition-delay:7.40s!important;
}

/* オートスライダー */
#autoSlider{
    transition: opacity 1.5s 8.80s;
}
.mainVisual.visible #autoSlider{
    opacity: 1;
}

/* 下層メニュー */
#mainVisualBottom{
    transition: transform 1s 10s;
}
.mainVisual.visible #mainVisualBottom{
    transform: translateY(0);
}