@charset "UTF-8";

/*-----------------*/
/*----- main ------*/
/*-----------------*/
.group_op{
width: calc(100% - 200px);
float: right;
position: relative;
height: 80vh;
margin: 55px 0 0 0;
}
.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: 100px;
height: 100px;
background-size: contain;
background-position:top center;
position: absolute;
top:15px;
left: 15px;
}

.group_op .group_op_img{
overflow: hidden;
height: 80vh;
}
.group_op .group_op_img span{
display: block;
background-size: cover;
background-position: center center;
height: 100%;
animation: zoomUp 1s ease-out 0s normal both;
}
/* 拡大表示 */
@keyframes zoomUp {
  0% {
    transform: scale(1.06);
opacity: 0;
  }
  100% {
    transform: scale(1);
opacity: 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: 140px;}
/* スキー場 */
.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); width: 80px;}
/* ウィンケルビレッジ */
.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: 140px;}




/* タイトル */
.group_op h1.group_title{
position: absolute;
left:-7%;
bottom: -5%;
color: var(--color-white);
z-index: 40;
font-weight: 200;
width: 100%;
text-align: left;
font-size: min(10vw,9rem);
letter-spacing: -0.4vw;
}
.group_op h1.group_title .group_title-ja{
display: block;
font-size: min(3vw,3rem);
margin-bottom:-20px;
letter-spacing: 0;
}
.group_op h1.group_title .group_title-en{
margin-bottom: max(-5vw, -70px);
}
/* 半角スペース */
.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(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{
line-height: var(--s100);
}
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: min(9vw,8rem);
}



@media screen and (max-width: 1100px) {
.group_op{
width: 100%;
float:none;
height: 75vh;
margin:0;
}
.group_op .group_op_img{
height: 75vh;
}
/* タイトル */
.group_op h1.group_title{
width: 90vw;
margin: 0 auto;
left:0;
right: 0;
bottom: -5vw;
}
}


/* アニメ */
@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: 60px;
}
.group_content .content{
clear: both;
display: grid;
grid-template-columns: 55% 40%;
gap: 5%;
padding-top: 150px;
}
.group_content .content .box01-bt{
margin-top: 30px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.group_content .content .box01-bt .bt01{
margin: 0 10px;
}
.group_content .content .box01-bt p{
margin-bottom: 10px;
display: block;
width: 100%;
text-align: center;
}
.group_content .content .box02 .bt02{
width: 100%;
margin-top: 30px;
}


@media screen and (max-width: 1100px) {
article.group_content{margin-top: 0;}
}




/*-----------------*/
/*----- ギャラリー ------*/
/*-----------------*/
#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:33vw;max-width:600px;}
#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 .content{
display: grid;
grid-template-columns: 320px 1fr;
gap: 20px;
}
.access .bt01{margin-top: 30px;}

.access iframe{
width: 100%;
height: 300px;
}