@charset "UTF-8";

/*-----------------*/
/*----- main ------*/
/*-----------------*/
.main_op{
width: calc(100% - 200px);
float: right;
position: relative;
height: 90vh;
margin: 0;
}
.main_op .swiper{
height: 90vh;
margin: 0;
}
.main_op .swiper .swiper-img{
background-size: cover;
background-position: center center;
height: 90vh;
}
.main_op .swiper .img01{background-image: url(../img/main01.webp);}
.main_op .swiper .img02{background-image: url(../img/main02.webp);}
.main_op .swiper .img03{background-image: url(../img/main03.webp);}
.main_op .swiper .img04{background-image: url(../img/main04.webp);}

/* 拡大表示 */
@keyframes zoomUp {
  0% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
.main_op .swiper .swiper-slide-active .swiper-img,
.main_op .swiper .swiper-slide-duplicate-active .swiper-img,
.main_op .swiper .swiper-slide-prev .swiper-img {
animation: zoomUp 1.5s ease-out;
}

/* タイトル */
.main_op h3.main_title{
position: absolute;
left:-7%;
bottom: -5%;
color: var(--color-white);
z-index: 40;
font-weight: 200;
width: 100%;
text-align: left;
}
/*縦 横 フォントサイズ*/
.main_op h3.main_title .main_title-warp,
.main_op h3.main_title .main_title-side{
font-size: min(10vw,9rem);
line-height: 100%;
}

/*縦*/
.main_op h3.main_title .main_title-warp{
-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
/* sfariだけ */
::-webkit-full-page-media, :future, :root .main_op h3.main_title .main_title-warp{
margin-left: -5vw;
}
/* foxだけ */
@-moz-document url-prefix() {
.main_op h3.main_title .main_title-warp{margin-left: -5vw;}
}


/*横*/
.main_op h3.main_title .main_title-side{
width: 100%;
display: grid;
grid-template-columns: 51vw 15vw 18vw;
gap: 0;
}
.main_op h3.main_title .main_title-side .main_title-side-ja{
}
.main_op h3.main_title .main_title-side .main_title-side-en{
font-size: 2.7vw;
line-height: 110%;
margin-top: 1vw;
}
.main_op h3.main_title .main_title-side .main_title-side-en > span{
display: block;
}
.main_op h3.main_title .main_title-side img{
width: 100%;
margin-top: -1vw;
}

@media screen and (max-width: 1100px) {
.main_op{
width: 100%;
float:none;
height: 75vh;
}
.main_op .swiper{
height: 75vh;
}
.main_op .swiper-img{
height: 75vh;
}
/* タイトル */
.main_op h3.main_title{
width: 90vw;
margin: 0 auto;
left:0;
right: 0;
bottom: -7vw;
}
/*縦*/
.main_op h3.main_title .main_title-warp{
writing-mode:inherit;
font-size: 10.5vw;
}
/* sfariだけ */
::-webkit-full-page-media, :future, :root .main_op h3.main_title .main_title-warp{
margin-left: 0;
}

/*横*/
.main_op h3.main_title .main_title-side{
grid-template-columns: 55vw 15vw 20vw;
}
.main_op h3.main_title .main_title-side .main_title-side-ja{
font-size: 10.5vw;
}
.main_op h3.main_title .main_title-side .main_title-side-en{
font-size: 2.7vw;
margin-top: 1.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;
}

/*各国*/
/*英語のOTARU ASARIGAWA ONSEN だけの表示した*/
html:lang(en) .main_op h3.main_title .main_title-warp,
html:lang(en) .main_op h3.main_title .main_title-side .main_title-side-ja,
html:lang(zh-TW) .main_op h3.main_title .main_title-warp,
html:lang(zh-TW) .main_op h3.main_title .main_title-side .main_title-side-ja,
html:lang(zh-CN) .main_op h3.main_title .main_title-warp,
html:lang(zh-CN) .main_op h3.main_title .main_title-side .main_title-side-ja,
html:lang(ko) .main_op h3.main_title .main_title-warp,
html:lang(ko) .main_op h3.main_title .main_title-side .main_title-side-ja{
display: none;
}
html:lang(en) .main_op h3.main_title .main_title-side,
html:lang(zh-TW) .main_op h3.main_title .main_title-side,
html:lang(zh-CN) .main_op h3.main_title .main_title-side,
html:lang(ko) .main_op h3.main_title .main_title-side{
grid-template-columns: 66vw 21vw;
}
html:lang(en) .main_op h3.main_title .main_title-side .main_title-side-en > span,
html:lang(zh-TW) .main_op h3.main_title .main_title-side .main_title-side-en > span,
html:lang(zh-CN) .main_op h3.main_title .main_title-side .main_title-side-en > span,
html:lang(ko) .main_op h3.main_title .main_title-side .main_title-side-en > span{
display:inline-block;
margin-right: 0.8rem;
}
html:lang(en) .main_op h3.main_title .main_title-side .main_title-side-en,
html:lang(zh-TW) .main_op h3.main_title .main_title-side .main_title-side-en,
html:lang(zh-CN) .main_op h3.main_title .main_title-side .main_title-side-en,
html:lang(ko) .main_op h3.main_title .main_title-side .main_title-side-en{
font-size: 8vw;
letter-spacing: -0.3vw;
line-height: 90%;
}
html:lang(zh-TW) .main_op h3.main_title .main_title-side .main_title-side-en,
html:lang(zh-CN) .main_op h3.main_title .main_title-side .main_title-side-en{
font-size: 9vw;
margin-top: 5vw;
}

html:lang(en) .main_op h3.main_title .main_title-side img,
html:lang(zh-TW) .main_op h3.main_title .main_title-side img,
html:lang(zh-CN) .main_op h3.main_title .main_title-side img,
html:lang(ko) .main_op h3.main_title .main_title-side img{
width: 100%;
margin-top: 1vw;
}








/*------------------------*/
/*----------concept-------*/
/*------------------------*/
.concept{
clear: both;
margin-top: 0;
padding-top: 230px;
position: relative;
}
.concept .box01{
width: 45%;
}
.concept .box01 .txt{
margin-bottom: 20px;
}
.concept .box01 .bt01{
width: 100%;
margin: 10px 0;
}
.concept .box01 .box01-img{
margin: 30px 0 0 0;
}

/* グループ地図 */
.concept .group_map .group_map-map-pc{
position: absolute;
top:-350px;
right: 0;
width: 1200px;
z-index: -1;
}
.concept .group_map .group_map-map-sp,
.concept .group_map .group_map-map-sp02{display: none;}

.concept .group_map .group_map-list{
position: absolute;
top:250px;
right: 0;
width: 700px;
}
.concept .group_map .group_map-list li{
position: absolute;
font-size: var(--s14);
}

/* 駅 */
.concept .group_map .group_map-list .station{color: var(--color-white);}
/* ロゴ */
.concept .group_map .group_map-list .group_logo{
position: relative;
z-index: 1;
width: 30px;
}
.concept .group_map .group_map-list .group-left a,
.concept .group_map .group_map-list .group-right a{
display: flex;
}
.concept .group_map .group_map-list .group-left a:hover,
.concept .group_map .group_map-list .group-right a:hover{
mix-blend-mode:darken;
}
.concept .group_map .group_map-list .group-left span,
.concept .group_map .group_map-list .group-right span{
color: var(--color-white);
background-color: var(--color-black);
}
/* グループロゴ 左 */
.concept .group_map .group_map-list .group-left span{padding: 3px 15px 3px 3px;}
.concept .group_map .group_map-list .group-left .group_logo{margin: -3px 0 0 -10px;}
.concept .group_map .group_map-list .group-left span::before{
content: "";
display: inline-block;
width: 15px;
height: 15px;
background-image: url(../common/img/icon_arrow_down.svg);
background-size:cover;
margin-right: 5px;
}
/* グループロゴ 右 */
.concept .group_map .group_map-list .group-right span{padding: 3px 3px 3px 15px;}
.concept .group_map .group_map-list .group-right .group_logo{margin: -3px -10px 0 0px;}
.concept .group_map .group_map-list .group-right span::after{
content: "";
display: inline-block;
width: 15px;
height: 15px;
background-image: url(../common/img/icon_arrow_down.svg);
background-size:cover;
margin-left: 5px;
}


/*JR小樽築港駅*/
.concept .group_map .group_map-list .item01{top:25px; left: 70px;}
html:lang(en) .concept .group_map .group_map-list .item01{top:25px; left: 60px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item01{top:25px; left: 70px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item01{top:25px; left: 70px;}
html:lang(ko) .concept .group_map .group_map-list .item01{top:25px; left: 70px;}
/*JR朝里駅*/
.concept .group_map .group_map-list .item02{top:50px; right: 170px;}
html:lang(en) .concept .group_map .group_map-list .item02{top:50px; right: 150px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item02{top:50px; right: 170px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item02{top:50px; right: 170px;}
html:lang(ko) .concept .group_map .group_map-list .item02{top:50px; right: 170px;}
/*朝里IC*/
.concept .group_map .group_map-list .item03{top:90px; right: 320px;}
html:lang(en) .concept .group_map .group_map-list .item03{top:90px; right: 320px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item03{top:90px; right: 320px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item03{top:90px; right: 320px;}
html:lang(ko) .concept .group_map .group_map-list .item03{top:90px; right: 310px;}
/*札樽自動車道*/
.concept .group_map .group_map-list .item04{top:130px; left: 180px;}
html:lang(en) .concept .group_map .group_map-list .item04{top:130px; left: 180px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item04{top:130px; left: 180px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item04{top:130px; left: 180px;}
html:lang(ko) .concept .group_map .group_map-list .item04{top:130px; left: 180px;}
/*後志自動車道*/
.concept .group_map .group_map-list .item05{top:215px; left: 160px;}
html:lang(en).concept .group_map .group_map-list .item05{top:215px; left: 160px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item05{top:215px; left: 160px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item05{top:215px; left: 160px;}
html:lang(ko) .concept .group_map .group_map-list .item05{top:215px; left: 160px;}
/*ウィンケルビレッジ*/
.concept .group_map .group_map-list .item06{top:260px; left: 150px;}
html:lang(en) .concept .group_map .group_map-list .item06{top:260px; left: 180px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item06{top:260px; left: 180px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item06{top:260px; left: 180px;}
html:lang(ko) .concept .group_map .group_map-list .item06{top:260px; left: 180px;}
/*せせらぎ*/
.concept .group_map .group_map-list .item07{top:290px; left: 185px;}
html:lang(en) .concept .group_map .group_map-list .item07{top:290px; left: 220px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item07{top:290px; left: 200px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item07{top:290px; left: 200px;}
html:lang(ko) .concept .group_map .group_map-list .item07{top:290px; left: 220px;}
/*朝里川温泉スキー場*/
.concept .group_map .group_map-list .item08{top:340px; left: 130px;}
html:lang(en) .concept .group_map .group_map-list .item08{top:340px; left: 130px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item08{top:340px; left: 130px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item08{top:340px; left: 130px;}
html:lang(ko) .concept .group_map .group_map-list .item08{top:340px; left: 130px;}
/*ガルミッシュ*/
.concept .group_map .group_map-list .item09{top:370px; left: 140px;}
html:lang(en) .concept .group_map .group_map-list .item09{top:370px; left: 180px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item09{top:370px; left: 180px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item09{top:370px; left: 180px;}
html:lang(ko) .concept .group_map .group_map-list .item09{top:370px; left: 180px;}
/*札樽ゴルフ倶楽部*/
.concept .group_map .group_map-list .item10{top:450px; left: 60px;}
html:lang(en) .concept .group_map .group_map-list .item10{top:450px; left: 40px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item10{top:450px; left: 20px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item10{top:450px; left: 20px;}
html:lang(ko) .concept .group_map .group_map-list .item10{top:450px; left: 40px;}
/*花屋*/
.concept .group_map .group_map-list .item11{top:320px; right: 260px;}
html:lang(en) .concept .group_map .group_map-list .item11{top:320px; right: 220px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item11{top:320px; right: 200px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item11{top:320px; right: 200px;}
html:lang(ko) .concept .group_map .group_map-list .item11{top:320px; right: 220px;}
/*朝里川温泉ホテル*/
.concept .group_map .group_map-list .item12{top:350px; right: 180px;}
html:lang(en) .concept .group_map .group_map-list .item12{top:350px; right: 140px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item12{top:350px; right: 120px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item12{top:350px; right: 120px;}
html:lang(ko) .concept .group_map .group_map-list .item12{top:350px; right: 140px;}
/*オタルリトリート*/
.concept .group_map .group_map-list .item13{top:390px; right: 180px;}
html:lang(en) .concept .group_map .group_map-list .item13{top:390px; right: 180px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item13{top:390px; right: 150px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item13{top:390px; right: 150px;}
html:lang(ko) .concept .group_map .group_map-list .item13{top:390px; right: 180px;}
/*朝里ダム*/
.concept .group_map .group_map-list .item14{top:500px; left: 320px;}
html:lang(en) .concept .group_map .group_map-list .item14{top:500px; left: 320px;}
html:lang(zh-TW) .concept .group_map .group_map-list .item14{top:500px; left: 320px;}
html:lang(zh-CN) .concept .group_map .group_map-list .item14{top:500px; left: 320px;}
html:lang(ko) .concept .group_map .group_map-list .item14{top:500px; left: 320px;}



@media screen and (max-width: 1200px) {
.concept{
padding-top: 150px;
position:inherit;
}
.concept .content{
display:block;
}
.concept .content .box01{
width: 80%;
}
.concept .group_map{
position: relative;
width: 90vw;
height: 60vw;
margin: 0 auto;
}
.concept .group_map .group_map-list{
position: absolute;
top:0;
right: 0;
width: 90vw;
}
.concept .group_map .group_map-list .group_logo{width: 3vw;}
.concept .group_map .group_map-list li{
position: absolute;
font-size: 1.5vw;
}
.concept .group_map .group_map-map-pc,
.concept .group_map .group_map-map-sp02{display: none;}
.concept .group_map .group_map-map-sp{
display: block;
position: absolute;
top:0;
right: 0;
width: 100vw;
z-index: -1;
}

/* グループロゴ 左 */
.concept .group_map .group_map-list .group-left span{padding: 0.3vw 1.3vw 0.3vw 0.3vw;}
.concept .group_map .group_map-list .group-left .group_logo{margin: -0.3vw 0 0 -1.0vw;}
/* グループロゴ 右 */
.concept .group_map .group_map-list .group-right span{padding: 0.3vw 0.3vw 0.3vw 1.3vw;}
.concept .group_map .group_map-list .group-right .group_logo{margin: -0.3vw -1.0vw 0 0px;}

/*JR小樽築港駅*/
.concept .group_map .group_map-list .item01{top:7vw; left: 15vw;}
html:lang(en) .concept .group_map .group_map-list .item01{top:7vw; left: 15vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item01{top:7vw; left: 15vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item01{top:7vw; left: 15vw;}
html:lang(ko) .concept .group_map .group_map-list .item01{top:7vw; left: 15vw;}
/*JR朝里駅*/
.concept .group_map .group_map-list .item02{top:10vw; right: 24vw;}
html:lang(en) .concept .group_map .group_map-list .item02{top:10vw; right: 24vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item02{top:10vw; right: 24vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item02{top:10vw; right: 24vw;}
html:lang(ko) .concept .group_map .group_map-list .item02{top:10vw; right: 24vw;}
/*朝里IC*/
.concept .group_map .group_map-list .item03{top:13.5vw; right: 40vw;}
html:lang(en) .concept .group_map .group_map-list .item03{top:13.5vw; right: 40vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item03{top:13.5vw; right: 40vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item03{top:13.5vw; right: 40vw;}
html:lang(ko) .concept .group_map .group_map-list .item03{top:13.5vw; right: 40vw;}
/*札樽自動車道*/
.concept .group_map .group_map-list .item04{top:18vw; left: 34vw;}
html:lang(en) .concept .group_map .group_map-list .item04{top:18vw; left: 29vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item04{top:18vw; left: 32vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item04{top:18vw; left: 32vw;}
html:lang(ko) .concept .group_map .group_map-list .item04{top:18vw; left: 29vw;}
/*後志自動車道*/
.concept .group_map .group_map-list .item05{top:28vw; left: 32vw;}
html:lang(en) .concept .group_map .group_map-list .item05{top:28vw; left: 28vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item05{top:28vw; left: 32vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item05{top:28vw; left: 32vw;}
html:lang(ko) .concept .group_map .group_map-list .item05{top:28vw; left: 31vw;}
/*ウィンケルビレッジ*/
.concept .group_map .group_map-list .item06{top:32vw; left: 27vw;}
html:lang(en) .concept .group_map .group_map-list .item06{top:32vw; left: 30vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item06{top:32vw; left: 33vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item06{top:32vw; left: 33vw;}
html:lang(ko) .concept .group_map .group_map-list .item06{top:32vw; left: 30vw;}
/*せせらぎ*/
.concept .group_map .group_map-list .item07{top:35vw; left: 30vw;}
html:lang(en) .concept .group_map .group_map-list .item07{top:35vw; left: 33vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item07{top:35vw; left: 36vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item07{top:35vw; left: 36vw;}
html:lang(ko) .concept .group_map .group_map-list .item07{top:35vw; left: 30vw;}
/*朝里川温泉スキー場*/
.concept .group_map .group_map-list .item08{top:42vw; left: 23vw;}
html:lang(en) .concept .group_map .group_map-list .item08{top:42vw; left: 18vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item08{top:42vw; left: 24vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item08{top:42vw; left: 24vw;}
html:lang(ko) .concept .group_map .group_map-list .item08{top:42vw; left: 21vw;}
/*ガルミッシュ*/
.concept .group_map .group_map-list .item09{top:45vw; left: 24vw;}
html:lang(en) .concept .group_map .group_map-list .item09{top:45vw; left: 25vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item09{top:45vw; left: 28vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item09{top:45vw; left: 28vw;}
html:lang(ko) .concept .group_map .group_map-list .item09{top:45vw; left: 28vw;}
/*札樽ゴルフ倶楽部*/
.concept .group_map .group_map-list .item10{top:53vw; left: 15vw;}
html:lang(en) .concept .group_map .group_map-list .item10{top:53vw; left: 15vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item10{top:53vw; left: 15vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item10{top:53vw; left: 15vw;}
html:lang(ko) .concept .group_map .group_map-list .item10{top:53vw; left: 15vw;}
/*花屋*/
.concept .group_map .group_map-list .item11{top:39vw; right: 35vw;}
html:lang(en) .concept .group_map .group_map-list .item11{top:39vw; right: 28vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item11{top:39vw; right: 35vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item11{top:39vw; right: 35vw;}
html:lang(ko) .concept .group_map .group_map-list .item11{top:39vw; right: 33vw;}
/*朝里川温泉ホテル*/
.concept .group_map .group_map-list .item12{top:43vw; right: 27vw;}
html:lang(en) .concept .group_map .group_map-list .item12{top:43vw; right: 24vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item12{top:43vw; right: 28vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item12{top:43vw; right: 28vw;}
html:lang(ko) .concept .group_map .group_map-list .item12{top:43vw; right: 25vw;}
/*オタルリトリート*/
.concept .group_map .group_map-list .item13{top:48vw; right: 25vw;}
html:lang(en) .concept .group_map .group_map-list .item13{top:48vw; right: 27vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item13{top:48vw; right: 26vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item13{top:48vw; right: 26vw;}
html:lang(ko) .concept .group_map .group_map-list .item13{top:48vw; right: 27vw;}
/*朝里ダム*/
.concept .group_map .group_map-list .item14{top:58vw; left: 43vw;}
html:lang(en) .concept .group_map .group_map-list .item14{top:58vw; left: 43vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item14{top:58vw; left: 43vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item14{top:58vw; left: 43vw;}
html:lang(ko) .concept .group_map .group_map-list .item14{top:58vw; left: 43vw;}
}








/*------------------------*/
/*----------group-------*/
/*------------------------*/
.group{
position: relative;
margin-top: 200px;
}
.group .title02{
position: absolute;
top:-9vw;
z-index: 5;
}
.group .group-list{
display: grid;
grid-template-columns: 50% 50%;
gap: 0;
}
.group .group-list .group-list-item{
position: relative;
background-size:cover;
background-position: center;
outline: 1px solid var(--color-white);
}
.group .group-list .group-list-item a{
display: block;
padding: 40px;
height: 100%;
color: var(--color-white);
display: grid;
place-content: center;
place-items: center;
position: relative;
overflow: hidden;
}
/* ボタンアニメ */
.group .group-list .group-list-item a span{
  position: relative;
  z-index: 1;
}
.group .group-list .group-list-item a:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 490%;
  width: 160%;
  transition: all .5s ease-in-out;
  transform: translateX(160%) translateY(-25%) rotate(45deg);
}
.group .group-list .group-list-item a:hover:after {
  transform: translateX(0) translateY(-25%) rotate(45deg);
}


/*項目*/
.group .group-list .group-list-item .type{
position: absolute;
color: var(--color-white);
top:0;
left:0;
z-index: 2;
opacity: 0.3;
font-size: 3vw;
line-height: 80%;
}
/* logo*/
.group .group-list .group-list-item .logo{
display: block;
margin: 0 auto 0.5vw auto;
width: 4vw;
}
/* 名称 */
.group .group-list .group-list-item .neme{
font-size: var(--s20);
font-weight: 200;
text-align: center;
}
.group .group-list .group-list-item .neme span{
display: block;
font-size: var(--s12);
}
/* 本文 */
.group .group-list .group-list-item .txt{
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid;
text-align: center;
line-height: var(--s24);
}
/*tel*/
.group .group-list .group-list-item .tel{
font-size: var(--s20);
letter-spacing: 1px;
margin-top: 15px;
text-align: center;
}
/*矢印*/
.group .group-list .group-list-item::after,
.group .group-list .group-list-item::before{
content: "";
display: block;
position: absolute;
}
.group .group-list .group-list-item::after{
bottom: 10px;
right: 10px;
background-image: url(../common/img/icon_arrow_down-right.svg);
width: 30px;
height: 30px;
  transition: all .2s ease-in-out;
}
.group .group-list .group-list-item:hover::after{
  transform: rotate(-180deg);
}
.group .group-list .group-list-item::before{
bottom: 0;
right: 0;
height: calc(100px / 2 * tan(60deg));
width: 100px;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}


/*スキー場*/
.group .group-list .group-list-item.ski{background-image:url(../img/group-ski.webp);}
.group .group-list .group-list-item.ski a:after {background: var(--color-ski);}
.group .group-list .group-list-item.ski::before{background-color: var(--color-ski);}
/*ゴルフ*/
.group .group-list .group-list-item.golf{background-image:url(../img/group-golf.webp);}
.group .group-list .group-list-item.golf a:after {background: var(--color-golf);}
.group .group-list .group-list-item.golf::before{background-color: var(--color-golf);}
/*朝里川温泉ホテル*/
.group .group-list .group-list-item.hotel{background-image:url(../img/group-hotel.webp);}
.group .group-list .group-list-item.hotel a:after {background: var(--color-hotel);}
.group .group-list .group-list-item.hotel::before{background-color: var(--color-hotel);}
/*ウィンけるビレッジ*/
.group .group-list .group-list-item.winkel{background-image:url(../img/group-winkel.webp);}
.group .group-list .group-list-item.winkel a:after {background: var(--color-winkel);}
.group .group-list .group-list-item.winkel::before{background-color: var(--color-winkel);}
.group .group-list .group-list-item.winkel .logo{width: 15vw;}
/*ガルミッシュ*/
.group .group-list .group-list-item.garmisch{background-image:url(../img/group-garmisch.webp);}
.group .group-list .group-list-item.garmisch a:after {background: var(--color-gar);}
.group .group-list .group-list-item.garmisch::before{background-color: var(--color-gar);}
.group .group-list .group-list-item.garmisch .logo{width: 12vw;}
/*リトリート*/
.group .group-list .group-list-item.retreat{background-image:url(../img/group-retreat.webp);}
.group .group-list .group-list-item.retreat a:after {background: var(--color-retreat);}
.group .group-list .group-list-item.retreat::before{background-color: var(--color-retreat);}
/*せせらぎ*/
.group .group-list .group-list-item.seseragi{background-image:url(../img/group-seseragi.webp);}
.group .group-list .group-list-item.seseragi a:after {background: var(--color-seseragi);}
.group .group-list .group-list-item.seseragi::before{background-color: var(--color-seseragi);}
.group .group-list .group-list-item.seseragi .logo{width: 10vw;}
/*花屋*/
.group .group-list .group-list-item.hanaya{background-image:url(../img/group-hanaya.webp);}
.group .group-list .group-list-item.hanaya a:after {background: var(--color-hanaya);}
.group .group-list .group-list-item.hanaya::before{background-color: var(--color-hanaya);}
.group .group-list .group-list-item.hanaya .logo{width: 12vw;}




/*------------------------*/
/*----------access-------*/
/*------------------------*/
.access{
}
.access .content{
display: grid;
grid-template-columns: 385px 1fr;
gap: 70px;
align-items: flex-start;
}

/*アクセス地図 */
.access .box01-list-box{
position: relative;
display:flex;
align-items:flex-end;
}
.access .box01 .box01-list{
width: 100%;
height: calc(100% - 180px);
position: absolute;
}
html:lang(en) .access .box01 .box01-list{font-size: var(--s14);}
.access .box01 .box01-list .item{
position: absolute;
font-weight: 500;

 text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}


/* 日本海 */
.access .box01 .box01-list .item.item01{top: 7%; left:20%;}
html:lang(en) .access .box01 .box01-list .item.item01{top: 7%; left:20%;}
html:lang(zh-TW) .access .box01 .box01-list .item.item01{top: 7%; left:20%;}
html:lang(zh-CN) .access .box01 .box01-list .item.item01{top: 7%; left:20%;}
html:lang(ko) .access .box01 .box01-list .item.item01{top: 7%; left:20%;}
/*JR小樽駅*/
.access .box01 .box01-list .item.item02{top: 18%; left:15%;}
html:lang(en) .access .box01 .box01-list .item.item02{top: 19%; left:15%;}
html:lang(zh-TW) .access .box01 .box01-list .item.item02{top: 18%; left:15%;}
html:lang(zh-CN) .access .box01 .box01-list .item.item02{top: 18%; left:15%;}
html:lang(ko) .access .box01 .box01-list .item.item02{top: 18%; left:15%;}
/*JR小樽築港駅*/
.access .box01 .box01-list .item.item03{top: 24.5%; left:24%;}
html:lang(en) .access .box01 .box01-list .item.item03{top: 24.5%; left:24%;}
html:lang(zh-TW) .access .box01 .box01-list .item.item03{top: 24.5%; left:24%;}
html:lang(zh-CN) .access .box01 .box01-list .item.item03{top: 24.5%; left:24%;}
html:lang(ko) .access .box01 .box01-list .item.item03{top: 24.5%; left:24%;}
/*朝里IC*/
.access .box01 .box01-list .item.item04{top: 34%; left:10%;}
html:lang(en) .access .box01 .box01-list .item.item04{top: 34%; left:10%;}
html:lang(zh-TW) .access .box01 .box01-list .item.item04{top: 34%; left:10%;}
html:lang(zh-CN) .access .box01 .box01-list .item.item04{top: 34%; left:10%;}
html:lang(ko) .access .box01 .box01-list .item.item04{top: 34%; left:5%;}
/*札幌西IC*/
.access .box01 .box01-list .item.item05{top: 41%; left:22%;}
html:lang(en) .access .box01 .box01-list .item.item05{top: 42%; left:12%;}
html:lang(zh-TW) .access .box01 .box01-list .item.item05{top: 41%; left:22%;}
html:lang(zh-CN) .access .box01 .box01-list .item.item05{top: 41%; left:22%;}
html:lang(ko) .access .box01 .box01-list .item.item05{top: 41%; left:14%;}
/*JR札幌駅*/
.access .box01 .box01-list .item.item06{top: 50%; left:42%;}
html:lang(en) .access .box01 .box01-list .item.item06{top: 50%; left:42%;}
html:lang(zh-TW) .access .box01 .box01-list .item.item06{top: 50%; left:42%;}
html:lang(zh-CN) .access .box01 .box01-list .item.item06{top: 50%; left:42%;}
html:lang(ko) .access .box01 .box01-list .item.item06{top: 50%; left:42%;}
/*JR南千歳駅*/
.access .box01 .box01-list .item.item07{bottom: 16%; right:7%;}
html:lang(en) .access .box01 .box01-list .item.item07{bottom: 16%; right:7%;}
html:lang(zh-TW) .access .box01 .box01-list .item.item07{bottom: 16%; right:7%;}
html:lang(zh-CN) .access .box01 .box01-list .item.item07{bottom: 16%; right:7%;}
html:lang(ko) .access .box01 .box01-list .item.item07{bottom: 16%; right:7%;}
/*新千歳空港*/
.access .box01 .box01-list .item.item08{bottom: 5%; right:22%;}
html:lang(en) .access .box01 .box01-list .item.item08{bottom: 5%; right:22%;}
html:lang(zh-TW) .access .box01 .box01-list .item.item08{bottom: 5%; right:22%;}
html:lang(zh-CN) .access .box01 .box01-list .item.item08{bottom: 5%; right:22%;}
html:lang(ko) .access .box01 .box01-list .item.item08{bottom: 5%; right:22%;}


.access .box01 .box01-02-list{
display: block;
width: 100%;
margin-top: 20px;
}
.access .box01 .box01-02-list li{
display: grid;
grid-template-columns: 30px 1fr;
gap: 5px;
  place-content: center;/*gridの中央配置*/
  place-items: stretch;/*要素二つ以上ある場合に*/
}







/*交通手段タイトル */
.access .box02 h5{
font-size: var(--s16);
border-bottom: 1px solid;
font-weight: 500;
vertical-align: middle;
padding-bottom: 5px;
margin: 30px 0 10px;
}
.access .box02 h5 img{
width: 30px;
vertical-align: middle;
margin-right: 10px;
}

/*内容 */
.access .box02 dl{
display: grid;
grid-template-columns: 150px 1fr;
gap:5px;
margin-bottom: 5px;
}
.access .box02 dl dt{
text-align:justify;
text-align-last:justify;
}
.access .box02 .wrap{
padding: 10px;
background-color:rgba(0,0,0,0.2);
background-blend-mode:darken;
margin: 10px 0;
color: var(--color-white);
}
.access .box02 .bt_box{
margin-top: 20px;
display: grid;
grid-template-columns: 48% 48%;
gap: 4%;
}
html:lang(en) .access .box02 dl dt{text-align:left; text-align-last:left;}
html:lang(en) .access .box02 dl{grid-template-columns: 200px 1fr;}
html:lang(zh-TW) .access .box02 dl dt{text-align:left; text-align-last:left;}
html:lang(zh-TW) .access .box02 dl{grid-template-columns: 170px 1fr;}
html:lang(zh-CN) .access .box02 dl dt{text-align:left; text-align-last:left;}
html:lang(zh-CN) .access .box02 dl{grid-template-columns: 170px 1fr;}
html:lang(ko) .access .box02 dl dt{text-align:left; text-align-last:left;}
html:lang(ko) .access .box02 dl{grid-template-columns: 200px 1fr;}

@media screen and (max-width: 950px) {
.access .content{
grid-template-columns: 300px 1fr;
}
.access .box01 .box01-list .item{
font-size: var(--s12);
}
.access .box01 .box01-list{
height: calc(100% - 35%);
}
}











/*------------------------*/
/*------swiper_gallery-----*/
/*------------------------*/
.swiper_gallery{
overflow: hidden;
margin-top: 70px;
}
.swiper_gallery .swiper-slide img{
width: 100%;
height: 100%;
}





/*------------------------*/
/*------about-----*/
/*------------------------*/
.about .box{
background-color: var(--color-white);
padding: 8% 10%;
text-align: center;
}
.about .box .about_title{
text-align: center;
font-size: var(--s24);
font-weight: 400;
}

/*パンフレット*/
.about .box .pamph-bn{
margin: 50px 0 0 0;
padding-bottom: 30px;
}
/* 日本語 */
.about .box .pamph-bn .ja{display: block;}
.about .box .pamph-bn .en,
.about .box .pamph-bn .ko,
.about .box .pamph-bn .zhcn,
.about .box .pamph-bn .zhtw{
display: none;
}

/* 韓国 */
html:lang(ko) .about .box .pamph-bn .ko{display: block;}
html:lang(ko) .about .box .pamph-bn .ja,
html:lang(ko) .about .box .pamph-bn .en,
html:lang(ko) .about .box .pamph-bn .zhcn,
html:lang(ko) .about .box .pamph-bn .zhtw{
display: none;
}

/* 英語 */
html:lang(en) .about .box .pamph-bn .en{display: block;}
html:lang(en) .about .box .pamph-bn .ja,
html:lang(en) .about .box .pamph-bn .ko,
html:lang(en) .about .box .pamph-bn .zhcn,
html:lang(en) .about .box .pamph-bn .zhtw{
display: none;
}

/* 簡体字 */
html:lang(zh-CN) .about .box .pamph-bn .zhcn{display: block;}
html:lang(zh-CN) .about .box .pamph-bn .ja,
html:lang(zh-CN) .about .box .pamph-bn .en,
html:lang(zh-CN) .about .box .pamph-bn .ko,
html:lang(zh-CN) .about .box .pamph-bn .zhtw{
display: none;
}

/* 繁体字 */
html:lang(zh-TW) .about .box .pamph-bn .zhtw{display: block;}
html:lang(zh-TW) .about .box .pamph-bn .ja,
html:lang(zh-TW) .about .box .pamph-bn .en,
html:lang(zh-TW) .about .box .pamph-bn .zhcn,
html:lang(zh-TW) .about .box .pamph-bn .ko{
display: none;
}




/*sns*/
.about .about_sns{
display: flex;
justify-content: center;
margin: 40px 0 0 0;
}
.about .about_sns a{
display: block;
width: 30px;
margin: 0 25px;
transition: 0.3s ease-out;
}
.about .about_sns a:hover{
opacity: 0.5;
}




/*------------------------*/
/*------recruit-----*/
/*------------------------*/
.recruit a.recruit_link{
position: relative;
color: var(--color-white);
display: block;
outline: 1px solid var(--color-white);
background-image: url(../img/recruit_bn_img.webp);
background-size: cover;
}

.recruit a.recruit_link .inner{
padding: 30px 50px;
position: relative;
display: grid;
grid-template-columns: 65% 30%;
gap: 5%;
place-content: center;/*gridの中央配置*/
place-items: center;/*要素二つ以上ある場合に*/
z-index: 2;
top:0;
left:0;
}

.recruit a.recruit_link .recruit_title01{
font-size: min(9.0rem, 10.5vw);
font-weight: 100;
}
/*--中国語 */
html:lang(zh-TW) .recruit a.recruit_link .recruit_title01{font-size: min(8.7rem, 10vw);}
html:lang(zh-CN) .recruit a.recruit_link .recruit_title01{font-size: min(8.7rem, 10vw);}

.recruit a.recruit_link .recruit_title02{
font-size:var(--s24);
font-weight: 400;
}

/* 矢印 */
.recruit a.recruit_link::after{
content:"";
position: absolute;
display: block;
bottom: 10px;
right: 10px;
background-image: url(../common/img/icon_arrow_down-right.svg);
width: 30px;
height: 30px;
z-index: 2;
}
.recruit a.recruit_link::before{
content:"";
background-color: var(--color-white);
position: absolute;
opacity: 0;
width: 0;
height: 100%;
z-index: 1;
transition: 0.2s ease-out;
}
.recruit a.recruit_link:hover::before{
width: 100%;
opacity: 1;
}
.recruit a.recruit_link:hover{
color: var(--color-black);
}