@charset "UTF-8";


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

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

/* タイトル */
.main_op h3.main_title{
position: absolute;
margin: 0 auto;
left:0;
right: 0;
color: var(--color-white);
z-index: 40;
font-weight: 200;
width: 93vw;
bottom: -11vw;
}
/*縦*/
.main_op h3.main_title .main_title-warp{
writing-mode: vertical-rl;
font-size: 13vw;
line-height: 100%;
}
/* sfariだけ */
::-webkit-full-page-media, :future, :root .main_op h3.main_title .main_title-warp{
margin-left: -6vw;
}

/*横*/
.main_op h3.main_title .main_title-side{
width: 100%;
}
.main_op h3.main_title .main_title-side .main_title-side-ja{
display: block;
font-size: 13vw;
line-height: 100%;
}
.main_op h3.main_title .main_title-side .main_title-side-en{
display: block;
font-size: 4vw;
margin-top: 1.5vw;
line-height: 110%;
}
.main_op h3.main_title .main_title-side .main_title-side-en > span{
display: inline-block;
margin-right: 0.7vw;
}
.main_op h3.main_title .main_title-side img{
display: block;
float: right;
width: 25vw;
margin-top: -17vw;
}
/*アニメ*/
@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{
width: 90vw;
display: block;
}
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{
margin-right: 0.9vw;
}
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{
width: 70vw;
font-size: 12vw;
letter-spacing: -0.3vw;
line-height: 100%;
}
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{

}








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

/* グループ地図 */
.concept .group_map{
position: relative;
width: 95vw;
height: 105vw;
margin: 40px auto 0 auto;
}
.concept .group_map .group_map-list{
position: absolute;
top:0;
right: 0;
width: 100vw;
}
.concept .group_map .group_map-list li{
position: absolute;
font-size: 2.5vw;
}
.concept .group_map .group_map-list .group_logo{
position: relative;
z-index: 1;
width: 5vw;
}
.concept .group_map .group_map-map-pc,
.concept .group_map .group_map-map-sp{display: none;}
.concept .group_map .group_map-map-sp02{
display: block;
position: absolute;
top:0;
right: 0;
width: 100vw;
z-index: -1;
}
/* 駅 */
.concept .group_map .group_map-list .station{color: var(--color-white);}
/* グループ */
.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 a,
.concept .group_map .group_map-list .group-right a{
display: flex;
}
/* グループロゴ 左 */
.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-left span::before{
content: "";
display: inline-block;
width: 2.7vw;
height: 2.7vw;
background-image: url(../common/img/icon_arrow_down.svg);
background-size:cover;
margin-right: 0.8vw;
}
/* グループロゴ 右 */
.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;}
.concept .group_map .group_map-list .group-right span::after{
content: "";
display: inline-block;
width: 2.7vw;
height: 2.7vw;
background-image: url(../common/img/icon_arrow_down.svg);
background-size:cover;
margin-left: 0.8vw;
}

/*JR小樽築港駅*/
.concept .group_map .group_map-list .item01{top:11vw; left: 13vw;}
html:lang(en) .concept .group_map .group_map-list .item01{top:11vw; left: 13vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item01{top:11vw; left: 13vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item01{top:11vw; left: 13vw;}
html:lang(ko) .concept .group_map .group_map-list .item01{top:11vw; left: 13vw;}
/*JR朝里駅*/
.concept .group_map .group_map-list .item02{top:15vw; right: 13vw;}
html:lang(en) .concept .group_map .group_map-list .item02{top:15vw; right: 13vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item02{top:15vw; right: 13vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item02{top:15vw; right: 13vw;}
html:lang(ko) .concept .group_map .group_map-list .item02{top:15vw; right: 13vw;}
/*朝里IC*/
.concept .group_map .group_map-list .item03{top:21vw; right: 37vw;}
html:lang(en) .concept .group_map .group_map-list .item03{top:21vw; right: 37vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item03{top:21vw; right: 37vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item03{top:21vw; right: 37vw;}
html:lang(ko) .concept .group_map .group_map-list .item03{top:21vw; right: 37vw;}
/*札樽自動車道*/
.concept .group_map .group_map-list .item04{top:27vw; left: 32vw;}
html:lang(en) .concept .group_map .group_map-list .item04{top:27vw; left: 30vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item04{top:27vw; left: 32vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item04{top:27vw; left: 32vw;}
html:lang(ko) .concept .group_map .group_map-list .item04{top:27vw; left: 30vw;}
/*後志自動車道*/
.concept .group_map .group_map-list .item05{top:42vw; left: 32vw;}
html:lang(en) .concept .group_map .group_map-list .item05{top:42vw; left: 28vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item05{top:42vw; left: 32vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item05{top:42vw; left: 32vw;}
html:lang(ko) .concept .group_map .group_map-list .item05{top:42vw; left: 32vw;}
/*ウィンケルビレッジ*/
.concept .group_map .group_map-list .item06{top:49vw; left: 23vw;}
html:lang(en) .concept .group_map .group_map-list .item06{top:49vw; left: 26vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item06{top:49vw; left: 26vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item06{top:49vw; left: 26vw;}
html:lang(ko) .concept .group_map .group_map-list .item06{top:49vw; left: 26vw;}
/*せせらぎ*/
.concept .group_map .group_map-list .item07{top:54vw; left: 28vw;}
html:lang(en) .concept .group_map .group_map-list .item07{top:54vw; left: 34vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item07{top:54vw; left: 33vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item07{top:54vw; left: 33vw;}
html:lang(ko) .concept .group_map .group_map-list .item07{top:54vw; left: 34vw;}
/*朝里川温泉スキー場*/
.concept .group_map .group_map-list .item08{top:63vw; left: 19vw;}
html:lang(en) .concept .group_map .group_map-list .item08{top:63vw; left: 20vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item08{top:63vw; left: 20vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item08{top:63vw; left: 20vw;}
html:lang(ko) .concept .group_map .group_map-list .item08{top:63vw; left: 20vw;}
/*ガルミッシュ*/
.concept .group_map .group_map-list .item09{top:68vw; left: 21vw;}
html:lang(en) .concept .group_map .group_map-list .item09{top:68vw; left: 31vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item09{top:68vw; left: 31vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item09{top:68vw; left: 31vw;}
html:lang(ko) .concept .group_map .group_map-list .item09{top:68vw; left: 31vw;}
/*札樽ゴルフ倶楽部*/
.concept .group_map .group_map-list .item10{top:79vw; left: 8vw;}
html:lang(en) .concept .group_map .group_map-list .item10{top:79vw; left: 5vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item10{top:79vw; left: 2vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item10{top:79vw; left: 2vw;}
html:lang(ko) .concept .group_map .group_map-list .item10{top:79vw; left: 5vw;}
/*花屋*/
.concept .group_map .group_map-list .item11{top:59vw; right: 29vw;}
html:lang(en) .concept .group_map .group_map-list .item11{top:59vw; right: 20vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item11{top:59vw; right: 18vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item11{top:59vw; right: 18vw;}
html:lang(ko) .concept .group_map .group_map-list .item11{top:59vw; right: 20vw;}
/*朝里川温泉ホテル*/
.concept .group_map .group_map-list .item12{top:65vw; right: 15vw;}
html:lang(en) .concept .group_map .group_map-list .item12{top:65vw; right: 5vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item12{top:65vw; right: 3vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item12{top:65vw; right: 3vw;}
html:lang(ko) .concept .group_map .group_map-list .item12{top:65vw; right: 5vw;}
/*オタルリトリート*/
.concept .group_map .group_map-list .item13{top:71vw; right: 15vw;}
html:lang(en) .concept .group_map .group_map-list .item13{top:71vw; right: 14vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item13{top:71vw; right: 12vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item13{top:71vw; right: 12vw;}
html:lang(ko) .concept .group_map .group_map-list .item13{top:71vw; right: 14vw;}
/*朝里ダム*/
.concept .group_map .group_map-list .item14{top:90vw; left: 50vw;}
html:lang(en) .concept .group_map .group_map-list .item14{top:90vw; left: 50vw;}
html:lang(zh-TW) .concept .group_map .group_map-list .item14{top:87vw; left: 49vw;}
html:lang(zh-CN) .concept .group_map .group_map-list .item14{top:87vw; left: 49vw;}
html:lang(ko) .concept .group_map .group_map-list .item14{top:90vw; left: 50vw;}







/*------------------------*/
/*----------group-------*/
/*------------------------*/
.group{
position: relative;
margin-top: 130px;
}
.group .title02{
position: absolute;
top:-10vw;
z-index: 5;
}
.group .group-list{
}
.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: 5vw;
line-height: 80%;
}
/* logo*/
.group .group-list .group-list-item .logo{
display: block;
margin: 0 auto 0.5vw auto;
width: 9vw;
}
/* 名称 */
.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: 5px;
padding-top: 5px;
border-top: 1px solid;
line-height: var(--s24);
}
.group .group-list .group-list-item .txt br{display: none;}

/*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: 20px;
height: 20px;
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(70px / 2 * tan(60deg));
width: 70px;
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: 30vw;}
/*ガルミッシュ*/
.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: 25vw;}
/*リトリート*/
.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: 17vw;}
/*花屋*/
.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: 22vw;}


/*------------------------*/
/*----------access-------*/
/*------------------------*/
/*アクセス地図 */
.access .box01-list-box{
position: relative;
display:flex;
align-items:flex-end;
}
.access .box01 .box01-list{
width: 100%;
height: calc(100% - 35%);
position: absolute;
}
html:lang(en) .access .box01 .box01-list{font-size: var(--s12);}
.access .box01 .box01-list .item{
position: absolute;
font-weight: 500;
font-size: 3.5vw;
 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: 18%; 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:8%;}
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:8%;}
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{margin-top: 50px;}

/*交通手段タイトル */
.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: 30px;
}
.access .box02 .bt_box .bt01{
width: 100%;
margin-top: 30px;
}
html:lang(en) .access .box02 dl dt{text-align:left; text-align-last:left;}
html:lang(zh-TW) .access .box02 dl dt{text-align:left; text-align-last:left;}
html:lang(zh-CN) .access .box02 dl dt{text-align:left; text-align-last:left;}
html:lang(ko) .access .box02 dl dt{text-align:left; text-align-last:left;}







/*------------------------*/
/*------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 .zh-tw{
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 10%;
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;
background-position: center;
}

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

.recruit a.recruit_link .recruit_title01{
font-size: 9vw;
font-weight: 100;
}
.recruit a.recruit_link .recruit_title02{
font-size:var(--s20);
font-weight: 200;
text-align: center;
}


.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);
}