@charset "UTF-8";

/* -----------------------------------
   ローディング
 * ----------------------------------- */
#logo_loader {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background-color: var(--blue);
}
#logo_loader .f_logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 500px;
    width: 85%;
    height: 300px;
    animation: loadLogo 1.5s;
}
@keyframes loadLogo {
0% {transform: scale(0); opacity: 0}
70% {transform: scale(0);opacity: 0}
100% {transform: scale(1);opacity: 1}
}

#logo_loader.open {animation: slideOut 1.5s 1.55s forwards;}
@keyframes slideOut {
0% {transform: scale(1);}
80% {transform: scale(1); border-radius: 0; }
100% {transform: scale(0); border-radius: 100%;}
}

/* -----------------------------------
   メインビジュアル
 * ----------------------------------- */
#visual{
    padding-top: 7vw;
    position: relative;
}
#visual_main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    line-height: 0;
}
#vis_1 { grid-area: 1 / 1 / 2 / 3; }
#vis_2 { grid-area: 1 / 3 / 2 / 4; }
#vis_3 { grid-area: 2 / 1 / 3 / 2; }
#vis_4 { grid-area: 2 / 2 / 3 / 4; }
#vis_5 { grid-area: 3 / 1 / 4 / 3; }
#vis_6 { grid-area: 3 / 3 / 4 / 4; }

#visual_main li{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
}
#visual_main li img{  
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0;
    bottom: -100%;
    transition: 0.3s;
}
#visual_main li.active img{
    opacity: 1 !important;
    bottom: 0 !important;
}
#visual_h1{
    width: 50%;
    max-width: 650px;
    position: absolute;
    top: -6vw;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 0;
    filter: drop-shadow(0px 5px 3px rgb(0 0 0 / 0.6)); 
}
#visual_main li:nth-child(1) img {border-radius: 50% 0 0 / 100% 0 0;}
#visual_main li:nth-child(2) img {border-radius: 0 100% 0 0;}
#visual_inner{
    width: 95%;
    max-width: 1600px;
    margin: auto;
    position: relative;
}
#visual_bottom{
    width: 100%;
    max-width: 1500px;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -2%
}
@media (width <= 768px) {
#visual{
    padding-top: 12rem;
    padding-bottom: 65%;
}    
#visual_h1{
    width: 85%;
    max-width: 340px;
    top: -9.5rem;

}   
#visual_main {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
#vis_1 { grid-area: 1 / 1 / 2 / 2; }
#vis_2 { grid-area: 1 / 2 / 2 / 3; }
#vis_3 { grid-area: 2 / 1 / 3 / 2; }
#vis_4 { grid-area: 2 / 2 / 3 / 3; }
#vis_5 { grid-area: 3 / 1 / 4 / 2; }
#vis_6 { grid-area: 3 / 2 / 4 / 3; }   
#visual_main li:nth-child(1) img {border-radius: 50% 0 0 0;}
#visual_main li:nth-child(2) img {border-radius: 0 50% 0 0;}  
#visual_bottom{bottom: -40%;}    
.block-200px._comingsoon{width: 125px !important}    
}

/* -----------------------------------
   カラム
 * ----------------------------------- */
#main{
    padding-top: 6vw;
    padding-bottom: 3.5vw
}

.main-column__block__body{
    padding-top: 1rem;
    padding-bottom: 1rem}
.main-column__block p:not(p:has(a.btn)){
    line-height: var(--line-height-s);
    font-size: var(--font-size-l);
    font-weight: 700
}

#stay .main-column__block p:not(p:has(a.btn)),
#sns .main-column__block p:not(p:has(a.btn)),
#carnival .main-column__block p:not(p:has(a.btn)){
    font-size: var(--font-size-2xl);
}
#stay .main-column__block .main-column__block__head,
#stay .main-column__block .main-column__block__body,
#sns .main-column__block .main-column__block__head,
#sns .main-column__block .main-column__block__body,
#carnival .main-column__block .main-column__block__head,
#carnival .main-column__block .main-column__block__body{
    background-color: var(--yellow);
}

#list-kani{margin-top: 1.5rem}
#list-kani li{
    font-size: var(--font-size-m);
    width:48%}

#bottom-chocopra{
    position: fixed;
    bottom: 0;
    width: 250px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    transform: translateY(100%);
    transition: var(--transition);
    line-height: 0
}
#bottom-chocopra.active{
  transform: translate(0);
}
@media (width <= 640px) {
#bottom-chocopra{width: 200px;}    
}


/*---------------------------------------------
	SNS,リンク
  ---------------------------------------------*/
#link{
    position: relative;
    z-index: 3;
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    padding-top: min(10vw, 80px);
    padding-bottom: 6vw;
}

/* SNS */
#cont-sns{gap: 40px 20px;}
 .block-sns{
    width: 32%;
    height: 500px;
    overflow: scroll;
}

.block-sns.flex{align-items: flex-start;}

#sns-insta{gap: 5px}
#sns-insta a {width: 48%}

#list-sns{
    gap: 20px;
    margin: 5vw auto 8vw;
}
#list-sns li{width: 50px;}


/* リンクバナー */
#cont-banner{
    gap: 20px;
    margin-top: 2rem;
}
#cont-banner a {max-width: 270px;}

@media (width <= 768px) { 
.block-sns{
    width: 100%;
}      
}
@media (width <= 640px) {
.block-sns iframe{
    width: 100%;
    min-width: 280px !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }     
}


.marquee{top: 25vh}


/* -----------------------------------
   フッター
 * ----------------------------------- */
footer{
    color: #ffffff;
    background-color: var(--red);
}
footer:before{background-image: url(../images/common/footer-deco_left.svg);}
footer:after{background-image: url(../images/common/footer-deco_right.svg);}
footer a{color: #ffffff !important;}