@charset "UTF-8";
.group_op{
width: 100%;
height: 50vh;
position: relative;
margin: 0;
margin-top: -30px;
}
.group_op::after{
position: absolute;
content: "";
width: 100%;
height: 100%;
top:0;
left: 0;
mix-blend-mode: multiply;
background: -moz-linear-gradient(bottom, #000 10%, #FFF 30%);
background: -webkit-linear-gradient(bottom, #000 10%, #FFF 30%);
background: linear-gradient(to top, #000 10%, #FFF 30%);
opacity: 0.5;
}


.group_op .group_op_logo{
width: min(10vw,9rem);
width: 70px;
height: 70px;
background-size: contain;
background-position:top center;
position: absolute;
top:40px;
left: 10px;
}

.group_op .group_op_img{
overflow: hidden;
}
.group_op .group_op_img span{
display: block;
background-size:cover;
background-position: center center;
height: 50vh;
animation: zoomUp 1s ease-out 0s normal both;
}
/* 拡大表示 */
@keyframes zoomUp {
  0% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}


/* オタルリトリート */
.group_op.otaruretreat .group_op_img span{background-image: url(../img/otaruretreat/main_ph.webp);}
.group_op.otaruretreat .group_op_logo{background-image: url(../../img/group-logo-retreat.svg);}
/* ガルミッシュ */
.group_op.garmisch .group_op_img span{background-image: url(../img/garmisch/main_ph.webp);}
.group_op.garmisch .group_op_logo{background-image: url(../../img/group-logo-garmisch.svg); width: 100px;}
/* スキー場 */
.group_op.ski .group_op_img span{background-image: url(../img/ski/main_ph.webp);}
.group_op.ski .group_op_logo{background-image: url(../../img/group-logo-ski.svg);}
/* ゴルフ */
.group_op.golf .group_op_img span{background-image: url(../img/golf/main_ph.webp);}
.group_op.golf .group_op_logo{background-image: url(../../img/group-logo-golf.svg);}
/* 朝里川温泉ホテル */
.group_op.asarigawaonsenhotel .group_op_img span{background-image: url(../img/asarigawaonsenhotel/main_ph.webp);}
.group_op.asarigawaonsenhotel .group_op_logo{background-image: url(../../img/group-logo-hotel.svg);}
/* ウィンケルビレッジ */
.group_op.winkelvillage .group_op_img span{background-image: url(../img/winkelvillage/main_ph.webp);}
.group_op.winkelvillage .group_op_logo{background-image: url(../../img/group-logo-winkelvillage.svg); width: 200px;}
/* せせらぎ */
.group_op.seseragi .group_op_img span{background-image: url(../img/seseragi/main_ph.webp);}
.group_op.seseragi .group_op_logo{background-image: url(../../img/group-logo-seseragi.svg);}
/* 花屋 */
.group_op.hanaya .group_op_img span{background-image: url(../img/hanaya/main_ph.webp);}
.group_op.hanaya .group_op_logo{background-image: url(../../img/group-logo-hanaya.svg); width: 130px;}





/* タイトル */
.group_op h1.group_title{
position: absolute;
margin: 0 auto;
left:0;
right: 0;
bottom: -6vw;
color: var(--color-white);
z-index: 40;
font-weight: 200;
width: 93vw;
font-size: 10.5vw;
letter-spacing: -0.3vw;
}
.group_op h1.group_title .group_title-ja{
display: block;
font-size: 5vw;
margin-bottom:-1vw;
letter-spacing: 0;
}
.group_op h1.group_title .group_title-en{
margin-bottom: -5vw;
}
/* 半角スペース */
.space01,
.space02{display: inline-block; float: left;}
.space02{margin-left: 0.8vw; padding-left: 0.8vw;}

html:lang(en) .group_op h1.group_title .group_title-ja,
html:lang(ko) .group_op h1.group_title .group_title-ja{
display: none;
}
html:lang(en) .group_op h1.group_title .group_title-en{margin-bottom: -1vw;}

html:lang(zh-TW) .group_op h1.group_title .group_title-en,
html:lang(zh-CN) .group_op h1.group_title .group_title-en{
display: none;
}
html:lang(zh-TW) .group_op h1.group_title .group_title-ja,
html:lang(zh-CN) .group_op h1.group_title .group_title-ja{
font-size: 9vw;
}



/*アニメ*/
@keyframes showTextFromBottom{
0%{transform: translateY( 100% );}
100%{transform: translateY( 0px );}
}
.op-one-txt span{
animation: showText 3s backwards;
display: inline-block;
}
.op-one-txt > span{
overflow: hidden;
}
.op-one-txt > span > span{
animation: showTextFromBottom 0.5s backwards;
}




/*-----------------*/
/*----- content ------*/
/*-----------------*/
article.group_content{
margin-top: 17vw;
}
.group_content .content .box01-bt{
margin-top: 30px;
margin: 30px 0 50px 0;
text-align: center;
}
.group_content .content .box01-bt .bt01{
width: 100%;
margin: 10px 0;
}
.group_content .content .box02 img{width: 100%;}
.group_content .content .box02 .bt02{
width: 100%;
margin-top: 30px;
}



/*-----------------*/
/*----- ギャラリー ------*/
/*-----------------*/
#gallery{margin:150px auto 0 auto;}
#gallery .gallery_slider.slick-initialized{display:block;}
#gallery .gallery_slider .slick-slide{box-sizing:border-box;padding:0px 3vw;max-height:555px;}
#gallery .gallery_slider .slick-slide img{width: 100%;}
#gallery .slick-dots{
display:flex;
justify-content:space-around;
margin:1rem auto;
width:70vw;
}
#gallery .slick-dots li{flex-grow:1;margin:0px 10px;display:block;}
#gallery .slick-dots li button{overflow:hidden;width:100%;border:1px solid var(--color-white);text-indent:-9999px;height:10px;}
#gallery .slick-dots li.slick-active button{background:var(--color-white);}






/*-----------------*/
/*----- access ------*/
/*-----------------*/
.access .box{
margin: 20px 0;
}
.access .bt01{margin-top: 30px;}
.access iframe{
width: 100%;
height: 300px;
}