/* ----------------------------------------------------------------

  Special Templates Common Modules

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .hero
----------------------------------------------------------------- */
@media screen and (max-width:950px){
.hero {
margin: 0 -10px
}
}


/* ----------------------------------------------------------------
  .hdg-l2
----------------------------------------------------------------- */
.hdg-l2{
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
-webkit-box-pack:center;
justify-content:center;
flex-wrap:wrap;
font-family:"Zen Old Mincho", serif;
font-weight:400;
gap:0 16px;
}

.hdg-l2 > span:not([class]){
padding-bottom:4px;
text-align:center;
}

.hdg-l2 > .hdg-tag{
margin:0;
padding:2px 10px 4px;
min-width:0;
background-color:#B1895C;
font-size:20px;
}

.hdg-l2 > .hdg-sup{
font-size:19px;
}

@media screen and (max-width:930px){
.hdg-l2{
flex-direction:column;
font-size:32px;
}

.hdg-l2 > span:not([class]){
letter-spacing:-.1em;
}

.hdg-l2 > .hdg-tag{
margin-bottom:2px;
padding:1px 8px 2px;
letter-spacing:-.1em;
}

.hdg-l2 > .hdg-sup{
text-align:center;
}
}


/* ----------------------------------------------------------------
  .hdg-l3
----------------------------------------------------------------- */
.hdg-l3{
font-family:"Zen Old Mincho", serif;
font-weight:400;
font-size:32px;
}

.hdg-l3 > span{
display:inline-block;
font-size:26px;
}

@media screen and (max-width:930px){
.hdg-l3{
font-size:26px;
}

.hdg-l3 > span{
font-size:20px;
}
}


/* ----------------------------------------------------------------
  .hdg-l4
----------------------------------------------------------------- */
.hdg-l4{
margin-bottom:5px;
line-height:1.45;
}

/* .niseko-panel-info > .hdg-l4
----------------------------------------------------------------- */
.niseko-panel-info .hdg-l4{
font-weight:normal;
font-size:14px;
}


/* ----------------------------------------------------------------
  .carousel
----------------------------------------------------------------- */
.carousel{
margin-bottom:20px;
}

.carousel .carousel-thumb-row>li.active a::before,
.carousel .carousel-thumb>li.active a::before{
border-color:#3C904A;
}


/* ----------------------------------------------------------------
  .btn-list
----------------------------------------------------------------- */
[class^=btn-list]> li > a{
box-shadow: inset 0 -4px 0 #6A5510;
}

[class^=btn-list]> li > a:active,
[class^=btn-list]> li > a:hover,
[class^=btn-list]> li > a:focus{
opacity:.85;
box-shadow: inset 0 -4px 0 #6A5510;
}

.btn-list a,
.btn-list a:active,
.btn-list a:focus,
.btn-list a:hover{
background-color:#9E8226;
}

.niseko-hotel-panel-benefits [class^=btn-list] > li{
min-width:390px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
[class^=btn-list]> li{
margin-left:auto;
margin-right:auto;
max-width:90%;
}

[class^=btn-list]> li > a{
-webkit-box-pack:center;
justify-content:center;
box-shadow:none;
}

[class^=btn-list] .btn{
min-height:46px
}

.btn-list a > span{
text-align:center;
}

.btn-list a > span > span,
.btn-list-col-2 a > span > span{
display:inline-block;
}

.niseko-hotel-panel-benefits [class^=btn-list] > li{
min-width:0;
}

.niseko-hotel-panel-benefits .btn{
box-shadow: inset 0 -4px 0 #6A5510;
font-size:18px;
}

.niseko-section > .btn-list:last-child{
margin-bottom:8px;
}
}


/* ----------------------------------------------------------------
  .note
----------------------------------------------------------------- */
.note > li:not(:first-child) {
  margin-top:4px
}

.note > li .cmn-inline-block{
text-indent:0;
}



/* ----------------------------------------------------------------

  Niseko Common Modules

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .icon-map
----------------------------------------------------------------- */
.icon-map{
display:block;
}

.icon-map a{
padding-left:14px;
text-decoration:none;
background:url(/j_special/niseko_summer/images/icon-pin.svg) 0 35% no-repeat;
background-size:9px auto;
}

.icon-map a > span{
padding:0;
display:inline-block;
line-height:1.55;
}

/* Media Queries
----------------------------------------------- */
@media screen and (min-width:751px){
.niseko-hotel-panel-info .icon-map{
margin-top:4px;
}

.niseko-hotel-panel-info .icon-map a > span{
--cmn-solid-font-color:var(--cmn-font-color-gray);
box-shadow:none;
}
}


/* ----------------------------------------------------------------
  .icon-blank
----------------------------------------------------------------- */
.icon-blank{
margin-left:2px;
padding-top:10px;
overflow:hidden;
display:inline-block;
width:10px;
height:0;
position:relative;
top:1px;
background:url(/element/shared/images/icon/icon-external.svg) 0 0 no-repeat;
}


/* ----------------------------------------------------------------
  .niseko-link
----------------------------------------------------------------- */
.niseko-link a{
text-decoration:none;
}

/* .niseko-panel-info > .nniseko-link
----------------------------------------------------------------- */
.niseko-panel-info .niseko-link{
margin:4px 0 0 auto;
width:fit-content;
}


/* ----------------------------------------------------------------
  .niseko-panel-info
----------------------------------------------------------------- */
.niseko-panel-info{
margin-top:20px;
padding:20px;
background-color:#F4F1EE;
font-size:12px;
}

/* .niseko-spot-item > .niseko-panel-info
----------------------------------------------------------------- */
.niseko-spot-item .niseko-panel-info{
margin-top:12px;
padding:8px;
}

/* .niseko-event-item > .niseko-panel-info
----------------------------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-event-item .niseko-panel-info{
margin-top:12px;
padding:16px 12px;
}
}


/* ----------------------------------------------------------------
  .niseko-list-bullet
----------------------------------------------------------------- */
.niseko-list-bullet > li{
padding-left:12px;
position:relative
}

.niseko-list-bullet > li::before{
content:"";
border-radius:1px;
display:block;
width:2px;
height:2px;
overflow:hidden;
position:absolute;
top:.7em;
left:3px;
background-color: var(--cmn-font-color-base);
}


/* ----------------------------------------------------------------
  .niseko-list-separate
----------------------------------------------------------------- */
.niseko-list-separate > li{
display:-webkit-box;
display:flex;
gap:0 16px;
line-height:1.45;
}

.niseko-list-separate > li:not(:first-child){
margin-top:4px;
}

.niseko-list-separate > li > div:first-child{
width:4em;
position:relative;
}

.niseko-list-separate > li > div:first-child::before{
content:':';
display:block;
position: absolute;
top:-2px;
right:-12px;
}

.niseko-list-separate > li > div:last-child{
-webkit-box-flex:1;
flex:1;
}


/* ----------------------------------------------------------------
  .niseko-section
----------------------------------------------------------------- */
/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-section{
margin-top:20px;
padding:12px;
border-radius:6px;
box-shadow:0 0 4px rgba(0,0,0,.3);
}

.niseko-section > :first-child{
margin-top:0;
}
}


/* ----------------------------------------------------------------

  .niseko-catch

----------------------------------------------------------------- */
.niseko-catch{
line-height:1.55;
text-align:center;
font-size:22px;
}

.niseko-catch strong{
font-weight:normal;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width:750px){
.niseko-catch{
font-size:20px;
}

.niseko-catch span{
display:block;
}
}



/* ----------------------------------------------------------------

  .niseko-tab

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .niseko-tab-list
----------------------------------------------------------------- */
.niseko-tab-list{
margin:50px 0 40px !important;
border-bottom: 2px solid #ccc;
display:-webkit-box;
display:flex;
-webkit-box-align:end;
align-items:flex-end;
-webkit-box-pack:center;
justify-content:center;
gap:40px;
line-height:1.25;
}

.niseko-tab-list > li{
position:relative;
}

.niseko-tab-list > li button{
padding:0 0 20px;
border:none;
width:100%;
background-color:transparent;
font-size:31px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
}

.niseko-tab-list > li button span{
display:inline-block;
}

.niseko-tab-list > li.is-active::before{
content:'';
display:block;
width:100%;
height:4px;
overflow:hidden;
position:absolute;
bottom:-2px;
left:0;
background-color:#6D5507;
}

.niseko-tab-list > li.is-active button{
color:#584402;
}


/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-tab-list{
margin:36px 0 40px !important;
padding:0 8px;
gap:22px;
}

.niseko-tab-list > li button{
padding:0 0 10px;
font-size:20px;
}
}


/* ----------------------------------------------------------------
  .niseko-tab-item
----------------------------------------------------------------- */
.niseko-tab-item{
display:none;
}

.niseko-tab-item.is-active{
display:block;
}



/* ----------------------------------------------------------------

  .niseko-hotel-panel

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .niseko-hotel-panel
----------------------------------------------------------------- */
.niseko-hotel-panel{
margin-top:12px;
display:-webkit-box;
display:flex;
gap:32px
}

.niseko-hotel-panel > div{
width:calc(50% - 16px);
}

.niseko-hotel-panel > div > :first-child{
margin-top:0;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 1020px){
.niseko-hotel-panel{
flex-direction:column;
}

.niseko-hotel-panel > div{
width:auto;
}
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-info
----------------------------------------------------------------- */
.niseko-hotel-panel-info{
margin-top:0;
line-height:1.55;
font-size:12px;
}

.niseko-hotel-panel-info > li{
margin-bottom:4px;
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-review
----------------------------------------------------------------- */
.niseko-hotel-panel-review{
line-height:1.45;
font-size:12px;
display:-webkit-box;
display:flex;
flex-wrap:wrap;
gap:2px 20px;
}

.niseko-hotel-panel-review > li{
box-sizing:border-box;
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
gap:5px;
}

.niseko-hotel-panel-review > li.review > span{
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
gap:5px;
}

.niseko-hotel-panel-review>li.review a{
padding:0;
display:inline-block;
line-height:1.55;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 930px){
.niseko-hotel-panel-review{
gap:2px 8px;
}

.niseko-hotel-panel-review > li.review > span{
font-size:11px;
}
}

/* .icon-hotel
----------------------------------------------------------------- */
.niseko-hotel-panel-review .icon-hotel{
width:70px;
height:16px;
overflow:hidden;
background-position:0 0;
background-size:contain;
background-repeat:no-repeat;
}

.niseko-hotel-panel-review .icon-hotel > span{
color:rgba(0,0,0,0);
display:block;
text-indent:-1000px;
}

.niseko-hotel-panel-review .icon-hotel.rank-5{
background-image:url(/element/shared/images/icon/icon-review-star-5.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-45{
background-image:url(/element/shared/images/icon/icon-review-star-4h.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-4{
background-image:url(/element/shared/images/icon/icon-review-star-4.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-35{
background-image:url(/element/shared/images/icon/icon-review-star-3h.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-3{
background-image:url(/element/shared/images/icon/icon-review-star-3.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-25{
background-image:url(/element/shared/images/icon/icon-review-star-2h.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-2{
background-image:url(/element/shared/images/icon/icon-review-star-2.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-15{
background-image:url(/element/shared/images/icon/icon-review-star-1h.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-1{
background-image:url(/element/shared/images/icon/icon-review-star-1.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-05{
background-image:url(/element/shared/images/icon/icon-review-star-0h.svg);
}

.niseko-hotel-panel-review .icon-hotel.rank-0{
background-image:url(/element/shared/images/icon/icon-review-star-0.svg);
}

/* .icon-review
----------------------------------------------------------------- */
.niseko-hotel-panel-review .icon-review{
width:75px;
height:14px;
overflow:hidden;
background-position:0 0;
background-size:contain;
background-repeat:no-repeat;
}

.niseko-hotel-panel-review .icon-review > span{
color:rgba(0,0,0,0);
display:block;
text-indent:-1000px;
}

.niseko-hotel-panel-review .icon-review.rank-5{
background-image:url(/element/shared/images/icon/icon-review-5.svg);
}

.niseko-hotel-panel-review .icon-review.rank-45{
background-image:url(/element/shared/images/icon/icon-review-4h.svg);
}

.niseko-hotel-panel-review .icon-review.rank-4{
background-image:url(/element/shared/images/icon/icon-review-4.svg);
}

.niseko-hotel-panel-review .icon-review.rank-35{
background-image:url(/element/shared/images/icon/icon-review-3h.svg);
}

.niseko-hotel-panel-review .icon-review.rank-3{
background-image:url(/element/shared/images/icon/icon-review-3.svg);
}

.niseko-hotel-panel-review .icon-review.rank-25{
background-image:url(/element/shared/images/icon/icon-review-2h.svg);
}

.niseko-hotel-panel-review .icon-review.rank-2{
background-image:url(/element/shared/images/icon/icon-review-2.svg);
}

.niseko-hotel-panel-review .icon-review.rank-15{
background-image:url(/element/shared/images/icon/icon-review-1h.svg);
}

.niseko-hotel-panel-review .icon-review.rank-1{
background-image:url(/element/shared/images/icon/icon-review-1.svg);
}

.niseko-hotel-panel-review .icon-review.rank-05{
background-image:url(/element/shared/images/icon/icon-review-0h.svg);
}

.niseko-hotel-panel-review .icon-review.rank-0{
background-image:url(/element/shared/images/icon/icon-review-0.svg);
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-hdg
----------------------------------------------------------------- */
.niseko-hotel-panel-hdg{
margin:20px 0 -12px;
padding-top:18px;
border-top: 1px solid #ccc;
color:#7B6007;
line-height:1.45;
font-weight:normal;
font-size:18px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-hotel-panel-hdg{
margin-bottom:-6px;
}
}

/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits{
padding:0 20px 20px;
border-radius:8px;
box-sizing:border-box;
background:#F4E7CA url(/j_special/niseko_summer/images/niseko-panel-bg.png) 0 0 repeat;
font-size:14px;
}

.niseko-hotel-panel-benefits p{
margin:0 !important;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-hotel-panel-benefits{
padding:0 10px 12px;
}
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-hdg
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-hdg{
margin-top:20px;
margin-bottom:-20px;
text-align:center;
transform:translateY(-30px);
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-hdg-01
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-hdg-01{
margin:15px 0 5px;
padding:4px 4px 2px;
border:1px solid #AB9A6C;
color:#6D5507;
width:fit-content;
min-width:106px;
line-height:1;
font-size:14px;
text-align:center;
font-weight:normal;
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-catch
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-catch{
border-radius:8px;
padding:20px 12px;
background-color:#FFFBF0;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-hotel-panel-benefits-catch{
padding:12px;
}
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-catch-hdg
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-catch-hdg{
margin-bottom:-4px;
color:#6D5507;
line-height:1;
font-family:"Zen Old Mincho", serif;
font-weight:400;
font-size:20px;
text-align:center;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-hotel-panel-benefits-catch-hdg{
margin-bottom:12px;
}
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-catch-list
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-catch-list{
line-height:1.45;
}

.niseko-hotel-panel-benefits-catch-list > li{
margin-top:8px;
padding-left:12px;
position:relative
}

.niseko-hotel-panel-benefits-catch-list > li::before{
content:"";
border-radius:1px;
display:block;
width:2px;
height:2px;
overflow:hidden;
position:absolute;
top:.7em;
left:3px;
background-color: var(--cmn-font-color-base)
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-reservation-list
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-reservation-list{
line-height:1.45;
}

.niseko-hotel-panel-benefits-reservation-list > li{
display:-webkit-box;
display:flex;
gap:4px;
}

.niseko-hotel-panel-benefits-reservation-list > li:not(:first-child){
margin-top:16px;
display:none;
}

.niseko-hotel-panel-benefits-reservation-list > li > span{
color:#604B09;
font-weight:bold;
}

.niseko-hotel-panel-benefits-reservation-list > li > div{
-webkit-box-flex:1;
flex:1;
}

.niseko-hotel-panel-benefits-reservation-list > li > div > b{
margin-bottom:4px;
color:#604B09;
display:block;
font-weight:normal;
}

.niseko-hotel-panel-benefits-reservation.is-active .niseko-hotel-panel-benefits-reservation-list > li:not(:first-child){
display:-webkit-box;
display:flex;
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-reservation-hook
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-reservation-hook{
margin:4px 0 0 auto;
padding:0 0 0 16px;
border:none;
display:block;
background:url(/j_special/niseko_summer/images/icon-arrow-down.svg) 0 50% no-repeat;
background-size:12px auto;
font-size:14px;
}

.niseko-hotel-panel-benefits-reservation.is-active .niseko-hotel-panel-benefits-reservation-hook{
background-image:url(/j_special/niseko_summer/images/icon-arrow-up.svg);
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-toggle
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-toggle{
margin-top:20px;
padding:0 12px 16px;
border-radius:8px;
background-color:#FFFBF0;
}

.niseko-hotel-panel-benefits-toggle > div:nth-of-type(n+3){
display:none;
}

.niseko-hotel-panel-benefits-toggle.is-active > div:nth-of-type(n+3){
display:block;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-hotel-panel-benefits-toggle{
padding:0 10px 12px;
}

.niseko-hotel-panel-benefits-toggle > div:nth-of-type(n+2){
display:none;
}

.niseko-hotel-panel-benefits-toggle.is-active > div:nth-of-type(n+2){
display:block;
}
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-toggle-hdg
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-toggle-hdg{
margin:0 -12px 12px;
color:#fff;
padding:4px;
border-radius:8px 8px 0 0;
background-color:#6C865F;
font-size:16px;
text-align:center;
font-weight:normal;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-hotel-panel-benefits-toggle-hdg{
margin:0 -10px 12px;
}
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-toggle-item
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-toggle-item{
line-height:1.45;
}

.niseko-hotel-panel-benefits-toggle-item + .niseko-hotel-panel-benefits-toggle-item{
margin-top:8px;
padding-top:8px;
border-top:1px solid #D8CBA8;
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-toggle-item-hdg
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-toggle-item-hdg{
margin-bottom:4px;
font-size:14px;
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-toggle-item-col
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-toggle-item-col{
display:-webkit-box;
display:flex;
flex-direction:row-reverse;
gap:12px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-hotel-panel-benefits-toggle-item-col{
gap:8px;
}
}



/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-toggle-item-col > div:first-child
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-toggle-item-col > div:first-child{
-webkit-box-flex:1;
flex:1;
}

.niseko-hotel-panel-benefits-toggle-item-col > div:first-child > ul > li:not(:first-child){
margin-top:8px;
}

.niseko-hotel-panel-benefits-toggle-item-col > div:first-child > ul > li > em{
margin-bottom:2px;
display:block;
padding:0 16px;
position:relative;
width:fit-content;
text-align:center;
font-weight:normal;
}

.niseko-hotel-panel-benefits-toggle-item-col > div:first-child > ul > li > em::before,
.niseko-hotel-panel-benefits-toggle-item-col > div:first-child > ul > li > em::after{
content:'';
display:block;
width:8px;
height:1px;
overflow:hidden;
position:absolute;
top:.55em;
left:0;
background-color:var(--cmn-font-color-base);
}

.niseko-hotel-panel-benefits-toggle-item-col > div:first-child > ul > li > em::after{
left:auto;
right:0;
}

.niseko-hotel-panel-benefits-toggle-item-col > div:first-child .price-off{
margin-top:4px;
display:-webkit-box;
display:flex;
gap:4px;
}

.niseko-hotel-panel-benefits-toggle-item-col > div:first-child .price-off > span:last-child{
-webkit-box-flex:1;
flex:1;
display:-webkit-box;
display:flex;
flex-wrap:wrap;
gap:0 4px;
}

.niseko-hotel-panel-benefits-toggle-item-col > div:first-child .price-off .icon{
padding:2px 8px 0;
border-radius:4px;
color:#fff;
background-color:#EE5252;
letter-spacing:normal;
font-size:12px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 750px){
.niseko-hotel-panel-benefits-toggle-item-col > div:first-child .price-off{
gap:2px;
letter-spacing:-0.035em;
}
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-toggle-item-col > .thumb
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-toggle-item-col > .thumb{
padding-top:4px;
width:120px;
}

.niseko-hotel-panel-benefits-toggle-item-col > .thumb > div{
margin-bottom:4px;
height:66px;
}

.niseko-hotel-panel-benefits-toggle-item-col > .thumb > div img{
width:100%;
height:100%;
object-fit:cover;
}


/* ----------------------------------------------------------------
  .niseko-hotel-panel-benefits-toggle-hook
----------------------------------------------------------------- */
.niseko-hotel-panel-benefits-toggle-hook{
margin:8px 0 -4px;
padding-top:12px;
border-top:1px solid #D8CBA8;
display:block;
}

.niseko-hotel-panel-benefits-toggle-hook > button{
margin:0 0 0 auto;
padding:0 0 0 16px;
border:none;
display:block;
background:url(/j_special/niseko_summer/images/icon-arrow-down.svg) 0 50% no-repeat;
background-size:12px auto;
font-size:14px;
}

.niseko-hotel-panel-benefits-toggle.is-active .niseko-hotel-panel-benefits-toggle-hook > button{
background-image:url(/j_special/niseko_summer/images/icon-arrow-up.svg);
}

/* Media Queries
----------------------------------------------- */
/* 部屋タイプが2つの場合はclass="room-2を付与してPC幅時はトグルボタンを非表示にする" */
@media screen and (min-width: 751px){
.niseko-hotel-panel-benefits-toggle.room-2 .niseko-hotel-panel-benefits-toggle-hook{
display:none;
}
}




/* ----------------------------------------------------------------

  .niseko-nav

----------------------------------------------------------------- */
.niseko-nav{
margin:40px 0 !important;
overflow:hidden;
line-height:1.25;
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
-webkit-box-pack:center;
justify-content:center;
flex-wrap:wrap;
gap:12px 24px;
font-family:"Zen Old Mincho", serif;
font-weight:400;
font-size:20px;
}

.niseko-nav > li{
margin-left:-13px;
padding-left:12px;
}

.niseko-nav > li:not(:first-child){
border-left:1px solid #bbb;
}

.niseko-nav a{
color:var(--cmn-font-color-base);
text-decoration:none;
}

.niseko-model-course +.niseko-nav{
margin:70px 0 100px !important;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 630px){
.niseko-nav{
margin:30px auto !important;
max-width:300px;
}

.niseko-nav > li:nth-child(3){
border-left:none;
}

.niseko-model-course +.niseko-nav{
margin:30px auto !important;
}
}


/* ----------------------------------------------------------------

  .niseko-spot

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .niseko-spot
----------------------------------------------------------------- */
.niseko-spot{
margin-top:36px;
display:-webkit-box;
display:flex;
align-items:flex-start;
flex-wrap:wrap;
gap:20px 8px;
}

.hdg-l3 + .niseko-spot{
margin-top:28px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 800px){
.niseko-spot{
margin-top:20px;
flex-direction:column;
gap:10px 0;
}
}


/* ----------------------------------------------------------------
  .niseko-spot-item
----------------------------------------------------------------- */
.niseko-spot-item{
border-radius:6px;
box-sizing:border-box;
width:calc((100% - 16px) / 3);
box-shadow:0 0 6px rgba(0,0,0,.3);
display:-webkit-box;
display:flex;
overflow:hidden;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
flex-direction:column-reverse;
position:relative;
background-color:#fff;
font-size:12px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 800px){
.niseko-spot-item{
width:auto;
box-shadow:0 0 4px rgba(0,0,0,.3);
}
}

/* .niseko-spot-item > .icon
----------------------------------------------------------------- */
.niseko-spot-item > .icon{
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
-webkit-box-pack:center;
justify-content:center;
width:27px;
height:32px;
overflow:hidden;
position:absolute;
top:0;
left:12px;
z-index:1;
line-height:1;
filter:drop-shadow(rgba(0,0,0,.5) 0 1px 1px);
transform:translateZ(0);
background:url(/j_special/niseko_summer/images/icon-ranking.svg) 0 0 no-repeat;
font-size:16px;
font-family:Arial;
}

.niseko-spot-item>.icon > span{
overflow:hidden;
position:absolute;
height:0;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 800px){
.niseko-spot-item > .icon{
width:22px;
height:26px;
top:12px;
left:20px;
font-size:14px;
}
}


/* .niseko-spot-item > .data
----------------------------------------------------------------- */
.niseko-spot-item > .data{
padding:12px;
-webkit-box-flex:1;
flex:1;
}

/* .niseko-spot-item > .thumb
----------------------------------------------------------------- */
.niseko-spot-item > .thumb{
height:125px;
overflow:hidden;
position:relative;
box-sizing:border-box;
}

.niseko-spot-item > .thumb::before{
content:'';
display:block;
width:100%;
height:3em;
overflow:hidden;
position:absolute;
left:0;
bottom:0;
z-index:1;
background:linear-gradient(transparent 5%, rgba(0,0,0,.1) 25%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.6) 100%);
}

.niseko-spot-item > .thumb > span{
color:rgba(255,255,255,.7);
display:block;
box-sizing:border-box;
position:absolute;
bottom:6px;
left:12px;
z-index:1;
line-height:1;
font-size:11px;
}

.niseko-spot-item > .thumb img{
width:100%;
height:100%;
object-fit:cover;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 800px){
.niseko-spot-item > .thumb{
margin:12px 12px 0;
}
}


/* ----------------------------------------------------------------
  .niseko-spot-item-hdg
----------------------------------------------------------------- */
.niseko-spot-item-hdg{
min-height:50px;
line-height:1.25;
font-family:"Zen Old Mincho", serif;
font-weight:400;
font-size:18px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width: 800px){
.niseko-spot-item-hdg{
margin-bottom:8px;
min-height:0;
font-size:16px;
}
}


/* ----------------------------------------------------------------
  .niseko-spot-item-hdg-01
----------------------------------------------------------------- */
.niseko-spot-item-hdg-01{
margin-bottom:4px;
line-height:1.45;
font-weight:normal;
font-size:14px;
}

niseko-spot-item-hdg-01 a{
list-style:1.45;
}

.niseko-spot-item-hdg-01:has(+ .niseko-list-separate){
margin-bottom:8px;
padding-bottom:4px;
border-bottom: 1px solid #D5CECB;
}


/* ----------------------------------------------------------------
  .niseko-spot-item-ellipsis
----------------------------------------------------------------- */
.niseko-spot-item-ellipsis{
min-height:3em;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.niseko-spot-item.is-active .niseko-spot-item-ellipsis{
display:block;
}



/* ----------------------------------------------------------------
  .niseko-spot-item-more
----------------------------------------------------------------- */
.niseko-spot-item-more{
display:none;
}

.niseko-spot-item.is-active .niseko-spot-item-more{
display:block;
}


/* ----------------------------------------------------------------
  .niseko-spot-item-more-btn
----------------------------------------------------------------- */
.niseko-spot-item-more-btn{
margin:10px 0 0 auto;
padding:0 0 0 12px;
border:none;
display:block;
background:url(/j_special/niseko_summer/images/icon-arrow-down.svg) 0 50% no-repeat;
background-size:8px auto;
font-size:12px;
}

.niseko-spot-item.is-active .niseko-spot-item-more-btn{
background-image:url(/j_special/niseko_summer/images/icon-arrow-up.svg);
}





/* ----------------------------------------------------------------

  .niseko-event

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .niseko-event
----------------------------------------------------------------- */
.niseko-event{
margin-top:36px;
padding:2px 20px;
border-radius:6px;
box-shadow:0 0 4px rgba(0,0,0,.3);
background-color:#fff;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width:750px){
.niseko-event{
padding:2px 8px;
box-shadow:0 0 4px rgba(0,0,0,.3);
}
}


/* ----------------------------------------------------------------
  .niseko-event-item
----------------------------------------------------------------- */
.niseko-event-item + .niseko-event-item{
border-top:1px solid #ddd;
}


/* ----------------------------------------------------------------
  .niseko-event-item-hook
----------------------------------------------------------------- */
.niseko-event-item-hook{
padding:4px 24px 4px 0;
border:none;
box-sizing:border-box;
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
gap:4px 20px;
width:100%;
min-height:60px;
position:relative;
cursor:pointer;
background:url(/j_special/niseko_summer/images/icon-arrow-down.svg) no-repeat calc(100% - 8px) 50%;
background-size:16px auto;
line-height:1.25;
font-size:20px;
text-align:left;
font-weight:normal;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
}

.niseko-event-item.is-active > .niseko-event-item-hook{
background-image:url(/j_special/niseko_summer/images/icon-arrow-up.svg);
}

.niseko-event-item-hook > span:first-child{
padding:2px 4px 4px;
border:1px solid #ccc;
width:200px;
box-sizing:border-box;
line-height:1;
text-align:center;
font-size:16px;
}

.niseko-event-item-hook > span:last-child{
-webkit-box-flex:1;
flex:1;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width:750px){
.niseko-event-item-hook{
padding-top:12px;
padding-bottom:12px;
gap:4px 0;
flex-direction:column;
-webkit-box-align:start;
align-items:flex-start;
font-size:14px;
}

.niseko-event-item-hook > span:first-child{
width:150px;
font-size:12px;
}
}


/* ----------------------------------------------------------------
  .niseko-event-item-content
----------------------------------------------------------------- */
.niseko-event-item-content{
padding:0 0 20px;
display:none;
}

.niseko-event-item.is-active .niseko-event-item-content{
display:block;
}



/* ----------------------------------------------------------------
  .niseko-event-item-content
----------------------------------------------------------------- */







/* ----------------------------------------------------------------

  .niseko-model-course

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .niseko-model-course
----------------------------------------------------------------- */
.niseko-model-course{
margin-top:30px;
}

.niseko-model-course + .niseko-model-course{
margin-top:20px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width:750px){
.niseko-model-course{
margin-top:20px;
}

.niseko-model-course + .niseko-model-course{
margin-top:16px;
}

.niseko-model-course > :last-child{
padding-bottom:0;
border-bottom:none;
}
}


/* ----------------------------------------------------------------
  .niseko-model-course-hdg
----------------------------------------------------------------- */
.niseko-model-course-hdg{
margin-bottom:24px;
font-family:"Zen Old Mincho", serif;
font-weight:400;
font-weight:normal;
font-size:24px;
text-align:center;
}

.niseko-model-course-hdg > span:first-child{
display:block;
}

.niseko-model-course-hdg b{
color:#437189;
font-weight:normal;
}

.niseko-model-course + .niseko-model-course .niseko-model-course-hdg b{
color:#AF2E40;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width:750px){
.niseko-model-course-hdg{
margin-bottom:12px;
line-height:1.45;
font-size:18px;
}

.niseko-model-course-hdg > span{
display:block;
}
}


/* ----------------------------------------------------------------
  .niseko-model-course-hdg-01
----------------------------------------------------------------- */
.niseko-model-course-hdg-01{
margin:40px 0 -10px;
}

.niseko-model-course-hdg-01 > span{
padding:5px 4px 2px;
color:#fff;
display: block;
width:fit-content;
min-width:50px;
background-color:#948474;
text-align:center;
}

.niseko-model-course-list + .niseko-model-course-hdg-01{
margin-top:20px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width:750px){
.niseko-model-course-hdg-01{
margin:12px 0 -5px;
}

.niseko-model-course-list + .niseko-model-course-hdg-01{
margin-top:16px;
}
}


/* ----------------------------------------------------------------
  .niseko-model-course-list
----------------------------------------------------------------- */
.niseko-model-course-list{
padding-bottom:20px;
border-bottom:1px solid #ccc;
}

.niseko-model-course-list > li:not(:first-child){
margin-top:20px;
}

/* Media Queries
----------------------------------------------- */
@media screen and (max-width:750px){
.niseko-model-course-list{
padding-bottom:16px;
}

.niseko-model-course-list > li:not(:first-child){
margin-top:12px;
}
}