/* ------------------------------------------------------------------
- スライダー共通
------------------------------------------------------------------ */

.c-section__title {
    font-size: 24px;
    margin-bottom: 20px;
}

.slick-dots li button:before{
    font-size: 30px;
}

@media screen and (max-width: 767px) {
    .slick-dots li{
        margin: 0;
    }
}

/* 目的別スライダー */
.p-purpose__slider {
    margin-top: 20px;
    position: relative;
    width: calc(100% + min((100vw - 90%) / 2, 250px));
    margin-left: 0;
    contain: layout style;
}

/* PC版: ループ時の左側空白を解消 */
.sliderSix.swiper .swiper-wrapper {
    margin-left: -20px;
}

.p-purpose__sliderItem {
    margin-left: 20px;
    padding-bottom: 20px;
}

.p-purpose__sliderItem a:hover {
    opacity: 0.7;
}

.sliderSix .slick-prev,
.sliderSix .slick-next {
    display: none !important;
}

.sliderSix .slick-prev:before,
.sliderSix .slick-next:before {
    display: none;
}

.l-purpose__box {
    position: relative;
}

/* カスタム矢印の共通スタイル */
.l-purpose__box .custom-arrow {
    position: absolute;
    width: 35px;
    height: 35px;
    background-color: rgba(128, 128, 128, 0.8);
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    top: 50%;
    transform: translateY(-50%);
}

/* 左矢印の位置 - 親コンテナの左端 */
.l-purpose__box .custom-arrow-prev {
    left: 10px;
}

/* 右矢印の位置 */
.l-purpose__box .custom-arrow-next {
    right: 7px;
}

/* くの字矢印のスタイル */
.l-purpose__box .custom-arrow-prev::after {
    content: '';
    width: 12px;
    height: 12px;
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    transform: rotate(45deg);
    margin-left: 3px;
}

.l-purpose__box .custom-arrow-next::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 3px solid white;
    border-bottom: 3px solid white;
    transform: rotate(-45deg);
    margin-right: 3px;
}

/* ホバーエフェクト */
.l-purpose__box .custom-arrow:hover {
    background-color: rgba(128, 128, 128, 1);
}

/* ドットスタイル */
.sliderSix .slick-dots {
    max-width: 1240px;
}

/* Swiperページネーション（目的別スキー場） */
.sliderSix .swiper-pagination {
    position: relative;
    margin-top: 15px;
}

/* タブレット用 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .sliderSix .slick-dots {
    left: -40px;
}
}

@media screen and (max-width: 767px) {
    .p-purpose__slider {
        width: calc(100% + min(50vw, 200px));
        margin-left: 0;
        contain: layout style;
    }

    /* SP版: PC用のマージンをリセット */
    .sliderSix.swiper .swiper-wrapper {
        margin-left: 0;
    }

    .l-purpose__box .custom-arrow {
        width: 35px;
        height: 35px;
    }



    .l-purpose__box .custom-arrow-prev::after,
    .l-purpose__box .custom-arrow-next::after {
        width: 9px;
        height: 9px;
        border-width: 2px;
    }

    .l-purpose__box .custom-arrow-prev::after {
        margin-left: 2px;
    }

    .l-purpose__box .custom-arrow-next::after {
        margin-right: 2px;
    }
    .sliderSix .slick-dots {
    left: -75px;
}

    /* SP版: Swiperページネーション */
    .sliderSix .swiper-pagination {
        position: relative !important;
        bottom: auto !important;
        margin-top: 15px;
        display: flex !important;
        justify-content: center;
        width: 100% !important;
        left: 0 !important;
    }
}

/* より小さなスマホ用調整 */
@media screen and (max-width: 480px) {
    .p-purpose__slider {
        width: calc(100% + 40vw);
        margin-left: 0;
        contain: layout style; 
    }

}
/* 目的別ここまで */


/* ------------------------------------------------------------------
- スキーマップ・キーワード（PC）
------------------------------------------------------------------ */
.l-sky__box{
margin-top: 60px;
background-color: var(--lightBlack);
padding: 40px 0;
color: var(--whiteColor);
}

.p-sky__wrap{
display: flex;
justify-content: space-between;
}

.p-sky__map img{
width: 450px;
transition: opacity 0.3s ease;
}

#p-search__map{
    position: relative;
}

#p-search__map ul li{
    display: inline-block;
    background: #999 url(../img/top/arr.webp) no-repeat 12px;
    line-height: 1.0;
    color: #fff;
    border-radius: 3px;
    position: absolute;
} 

#p-search__map ul li a{
    display: block;
    padding: 10px 12px 10px 25px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

#p-search__map ul li a.hovered {
    background: var(--grayColor) url(../img/top/arr.webp) no-repeat 12px;
    border-radius: 3px;
}


#p-search__map ul li.area01{
    top: 45px;
    left: 232px;
}

#p-search__map ul li.area02{
    top: 205px;
    left: 290px;
}

#p-search__map ul li.area03{
    top: 200px;
    left: 180px;
}

#p-search__map ul li.area04{
    top: 285px;
    left: 285px;
}

#p-search__map ul li.area05{
    top: 255px;
    left: 130px;
}

#p-search__map ul li.area06{
    top: 310px;
    left: 200px;
}

#p-search__map ul li.area07{
    top: 300px;
    left: 92px;
}

#p-search__map ul li.area08{
    top: 370px;
    left: 70px;
}


.p-sky__textBox{
width: 56.9696969697%;
}

.p-sky__text{
display: flex;
justify-content: space-between;
}

.p-information__text{
margin-top: 44px;
}

.p-information__item a{
display: block;
border: 3px solid var(--grayColor);
background-color: var(--whiteColor);
color: var(--blackColor);
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
font-size: 0.875rem;
}

.p-keyword__title{
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 10px;
}

.p-keyword__text{
display: grid;
grid-template-columns: repeat(2 , 1fr);
column-gap: 10px;
justify-content: space-between;
}

.p-keyword__item a{
display: block;
border: 3px solid var(--grayColor);
background-color: var(--whiteColor);
color: var(--blackColor);
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
font-size: 0.875rem;
}

.p-information__item a:hover,
.p-keyword__item a:hover{
background-color: var(--grayColor);
color: var(--whiteColor);
}

/* 検索フォーム型ボタン */
.search-form-button {
display: flex;
align-items: center;
width: 100%;
height: 50px;
background-color: white;
border: 1px solid #ddd;
border-radius: 25px;
padding: 0 20px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
margin: 50px auto;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
}

.search-form-button:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.search-icon {
width: 20px;
height: 20px;
margin-right: 12px;
flex-shrink: 0;
}

.search-icon svg {
fill: #007abd;
}

.search-placeholder {
flex: 1;
color: #888;
font-size: 14px;
user-select: none;
}

/* モーダル */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
opacity: 1;
visibility: visible;
}

.modal-content {
background-color:var(--whiteColor);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
max-width: 90%;
width: 80vw;
max-height: 90vh;
height: auto;
position: relative;
transform: scale(0.7);
transition: transform 0.3s ease;
overflow: hidden;
color: var(--blackColor);
display: flex;
flex-direction: column;
}

.modal-content.-black{
    background-color: var(--blackColor);
}

.modal-overlay.active .modal-content {
transform: scale(1);
}

.modal-header {
padding: 20px;
}

.modal-search-form {
display: flex;
align-items: center;
width: 70%;
margin: 0 auto;
flex: 1;
height: 60px;
background-color: #eaeaea;
border: 1px solid var(--grayColor);
border-radius: 40px;
padding: 0 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 検索アイコンボタン（右端配置） */
.search-icon-button {
width: 40px;
height: 40px;
margin-left: 10px;
flex-shrink: 0;
background-color: #007abd;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}

.search-icon-button:hover {
background-color: #005a8c;
}

.search-icon-button svg {
width: 20px;
height: 20px;
fill: white;
}

.search-input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
background: transparent;
color: var(--lightBlack);
}

.search-input::placeholder {
color: #888;
}

.close-button {
background: none;
border: none;
font-size: 24px;
text-align: center;
cursor: pointer;
color: #666;
width: 30px;
height: 30px;
display: block;
margin-left: auto;
border-radius: 50%;
transition: background-color 0.3s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}

.close-button.-white{
    color: var(--whiteColor);
}

.close-button:hover{
    background-color: var(--lightgrayColor);
}

.modal-body {
padding: 20px;
flex: 1;
overflow-y: auto;
min-height: 0; 
}

.p-modal__areaTitle{
font-weight: bold;
margin-top: 20px;
}

.content-area {
width: 100%;
height: auto;
min-height: 100%;
background-color: white;
border-radius: 4px;
font-size: 16px;
}

.p-modal__bannerWrap{
display: grid;
grid-template-columns: repeat(3 , 1fr);
gap: 10px;
}
.p-modal__bannerWrap a:hover{
opacity: 0.7;
}

.p-modal__bannerWrap .p-modal__bannerSize{
    aspect-ratio: 17 / 8;
}

.p-modal__bannerWrap .slick-dots{
    bottom: -20px;
}

.p-modal__Keyword{
display: grid;
grid-template-columns: repeat(4 , 1fr);
gap: 10px;
margin-top: 20px;
}

.p-modal__KeywordItem a{
display: block;
border: 3px solid var(--grayColor);
background-color: var(--whiteColor);
color: var(--blackColor);
border-radius: 10px;
padding: 10px;
font-size: 0.875rem;
}

.p-modal__KeywordItem a:hover{
background-color: var(--grayColor);
color: var(--whiteColor);
}




/* スキーマップモーダル用のスタイル */
.p-mapModal__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1100;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.p-mapModal__overlay.active {
opacity: 1;
visibility: visible;
}

.p-mapModal__content {
background-color: rgba(0, 0, 0, 0.9); 
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
max-width: 100%;
width: 90vw;
max-height: 100%;
height: auto;
position: relative;
transform: scale(0.7);
transition: transform 0.3s ease;
overflow: hidden;
color: var(--whiteColor);
}

.p-mapModal__overlay.active .p-mapModal__content {
transform: scale(1);
}

.p-mapModal__title{
text-align: left;
font-size: 1.5rem;
font-weight: bold;
color: var(--whiteColor);
position: relative;
padding-left: 15px;
margin-bottom: 15px;
}

.p-mapModal__title::before{
content: "";
position: absolute;
background-color: var(--whiteColor);
width: 3px;
height: 30px;
margin-left: -10px;

}

.p-mapModal__closeButton {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--whiteColor);
width: 30px;
height: 30px;
border-radius: 50%;
transition: background-color 0.3s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}

.p-mapModal__closeButton:hover {
background-color: rgba(255, 255, 255, 0.2);
}

.p-mapModal__body {
padding: 20px;
text-align: center;
display: flex;
justify-content: space-between;
}

.p-mapModal__left{
    width: 45%;
}

.p-mapModal__right{
    width: 48%;
}

.p-mapModal__wrap{
    position: relative;
}

.p-mapModal__wrap img{
    width: 100%;
    aspect-ratio: 4 / 3;
}

.p-mapModal__wrap ul li{
    display: inline-block;
    background: #999 url(../img/top/arr.webp) no-repeat 12px;
    line-height: 1.0;
    color: #fff;
    border-radius: 3px;
    position: absolute;
} 

.p-mapModal__wrap ul li a{
    display: block;
    padding: 10px 12px 10px 25px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.p-mapModal__wrap ul li a:hover{
    background: var(--grayColor) url(../img/top/arr.webp) no-repeat 12px;
    border-radius: 3px;
}

.p-mapModal__wrap ul li.hokkaido01{
    top: 25%;
    left: 30%;
}

.p-mapModal__wrap ul li.hokkaido02{
    top: 58%;
    left: 70%;
}

.p-mapModal__wrap ul li.hokkaido03{
    top: 67%;
    left: 15%;
}

.p-mapModal__wrap ul li.touhoku01{
    top: 18%;
    left: 33%;
}

.p-mapModal__wrap ul li.touhoku02{
    top: 35%;
    left: 63%;
}

.p-mapModal__wrap ul li.touhoku03{
    top: 41%;
    left: 33%;
}

.p-mapModal__wrap ul li.touhoku04{
    top: 63%;
    left: 59%;
}

.p-mapModal__wrap ul li.touhoku05{
    top: 63%;
    left: 30%;
}

.p-mapModal__wrap ul li.touhoku06{
    top: 80%;
    left: 50%;
}


.p-mapModal__wrap ul li.koshinetsu01{
    top: 20%;
    left: 62%;
}

.p-mapModal__wrap ul li.koshinetsu02{
    top: 24%;
    left: 32%;
}

.p-mapModal__wrap ul li.koshinetsu03{
    top: 42%;
    left: 7%;
}

.p-mapModal__wrap ul li.koshinetsu04{
    top: 47%;
    left: 45%;
}

.p-mapModal__wrap ul li.koshinetsu05{
    top: 54%;
    left: 23%;;
}

.p-mapModal__wrap ul li.koshinetsu06{
    top: 60%;
    left: 47%;
}
.p-mapModal__wrap ul li.koshinetsu07{
    top: 66%;
    left: 14%;
}
.p-mapModal__wrap ul li.koshinetsu08{
    top: 72%;
    left: 52%;
}
.p-mapModal__wrap ul li.koshinetsu09{
    top: 80%;
    left: 23%;
}

.p-mapModal__wrap ul li.kanto01{
    top: 25%;
    left: 26%;
}

.p-mapModal__wrap ul li.kanto02{
    top: 35%;
    left: 58%;
}

.p-mapModal__wrap ul li.kanto03{
    top: 45%;
    left: 14%;
}

.p-mapModal__wrap ul li.kanto04{
    top: 68%;
    left: 45%;
}

.p-mapModal__wrap ul li.hokuriku01{
    top: 24%;
    left: 43%;
}

.p-mapModal__wrap ul li.hokuriku02{
    top: 45%;
    left: 72%;
}

.p-mapModal__wrap ul li.hokuriku03{
    top: 75%;
    left: 41%;
}

.p-mapModal__wrap ul li.chukyo01{
    top: 24%;
    left: 60%;
}

.p-mapModal__wrap ul li.chukyo02{
    top: 46%;
    left: 26%;
}

.p-mapModal__wrap ul li.kansai01{
    top: 15%;
    left: 65%;
}

.p-mapModal__wrap ul li.kansai02{
    top: 26%;
    left: 18%
}

.p-mapModal__wrap ul li.kansai03{
    top: 46%;
    left: 48%;
}

.p-mapModal__wrap ul li.chugoku-shikoku-kyusyu01{
    top: 21%;
    left: 37%;
}

.p-mapModal__wrap ul li.chugoku-shikoku-kyusyu02{
    top: 37%;
    left: 20%;
}

.p-mapModal__wrap ul li.chugoku-shikoku-kyusyu03{
    top: 52%;
    left: 66%;
}

.p-mapModal__wrap ul li.chugoku-shikoku-kyusyu04{
    top: 73%;
    left: 17%;
}

.p-mapModal__imageWrap{
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    gap: 20px ;
    position: relative;
}

.p-mapModal__imageWrap::after{
    content: "";
    position: absolute;
    background-color: var(--whiteColor);
    height: 3px;
    width: 100%;
    bottom: -20px;
}

.p-mapModal__imageItem a:hover{
    opacity: 0.7;
}

.p-mapModal__imageItem .p-mapModal__imageSize{
    aspect-ratio: 1 / 1;
}

.p-mapModal__skiTitle{
    margin-top: 10px;
    font-size: 0.875rem;
}

.p-modal__linkWrap{
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.p-modal__linkWrap a{
    color: var(--blackColor);
    background-color: var(--whiteColor);
    font-size: 0.75rem;
    padding: 15px;
}

.p-modal__linkWrap a:hover{
    background-color: var(--grayColor);
    color: var(--whiteColor);
}

/* 都道府県モーダル */
.p-modalPrefectures__pcList{
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.p-modalPrefectures__pcItem a{
    background-color: var(--whiteColor);
    padding: 10px;
    width: 90px;
    text-align: center;
    display: block;
}

.p-modalPrefectures__pcItem a:hover{
    background-color: var(--primaryBlue);
    color: var(--whiteColor);
}

/* 高速道路モーダル */
.p-modalHighway__pcList{
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.p-modalHighway__pcItem a{
    background-color: var(--whiteColor);
    padding: 10px;
    width: 150px;
    text-align: center;
    display: block;
}

.p-modalHighway__pcItem a:hover{
    background-color: var(--primaryBlue);
    color: var(--whiteColor);
}
/* ------------------------------------------------------------------
- スキーマップ・キーワード（タブレット/SP用）
------------------------------------------------------------------ */
@media screen and (max-width: 1024px) {

/* モーダルスタイル */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
overscroll-behavior: contain;
}

.modal-overlay.active {
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
}


/* 検索フォーム型ボタンの基本スタイル */
.search-form-button {
display: flex;
align-items: center;
background-color: white;
border: 2px solid var(--grayColor);
border-radius: 25px;
padding: 12px 20px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
max-width: 400px;
}

.search-form-button:hover {
background-color: #f8f8f8;
}

.search-icon {
width: 20px;
height: 20px;
margin-right: 10px;
fill: #666;
}

.search-placeholder {
color: #888;
font-size: 0.875rem;
}

/* 検索ボタン - モバイル対応 */
.search-form-button {
    max-width: 100%;
    margin: 20px auto 0;
}

/* 共通モーダルスタイル */
.modal-content {
    width: 95vw;
    max-height: 90vh;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Topページへ戻る */
.close-button {
    position: absolute;
    top: 15px;
    left: 15px;
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    width: 150px;
    text-align: left;
    padding-left: 15px;
    color: var(--blackColor);
}

.close-button:hover{
    opacity: 0.7;
}

/* 擬似要素で矢印 */
.close-button::before {
    content: "<"; 
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #333;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--blackColor);
    margin-top: 40px;
}

/* 検索モーダル専用スタイル */
.modal-header.search-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}

.modal-search-form {
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    border: 1px solid var(--grayColor);
    border-radius: 25px;
    padding: 10px 15px;
    margin-top: 40px;
}

/* SP版: 検索アイコンボタン */
.modal-search-form .search-icon-button {
    width: 36px;
    height: 36px;
    margin-left: 8px;
    flex-shrink: 0;
    background-color: #007abd;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-search-form .search-icon-button svg {
    width: 18px;
    height: 18px;
    fill: white;
}

.search-input {
    border: none;
    background: none;
    outline: none;
    flex: 1;
    font-size: 14px;
}

.modal-body {
    padding: 10px;
    flex: 1;
    min-height: 0;
    max-height: calc(90vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.content-area {
    height: auto;
    min-height: 100%;
}

/* バナー */
.p-modal__bannerWrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.p-modal__bannerWrap img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    aspect-ratio: 17 / 5;
}

/* キーワードリスト */
.p-modal__Keyword {
    display: grid;
    grid-template-columns: 1fr;
    border: 5px solid var(--grayColor);
    gap: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-modal__KeywordItem {
    position: relative;
}

.p-modal__KeywordItem::after {
    content: ">";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #666;
}

.p-modal__KeywordItem a {
    border: none;
    border-bottom: 1px solid var(--grayColor);
    border-radius: 0;
    font-size: 0.75rem;
    display: block;
    padding: 15px;
    text-decoration: none;
    color: var(--blackColor);
    transition: background-color 0.3s ease;
}

.p-modal__KeywordItem:last-child a {
    border-bottom: none;
}

.p-modal__KeywordItem a:hover {
    background-color: #f0f0f0;
}

/* エリア選択専用スタイル */
.p-modalArea__list{
display: grid;
grid-template-columns: 1fr;
border: 5px solid var(--lightBlack);
gap: 0;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 1;
}

.p-modalArea__keywordItem {
position: relative;
}

.p-modalArea__keywordItem::after {
content: ">";
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
color: #666;
}

.p-modalArea__keywordItem a{
border: none;
border-bottom: 1px solid var(--grayColor);
border-radius: 0;
font-size: 0.875rem;
display: block;
padding: 15px;
text-decoration: none;
color: var(--blackColor);
transition: background-color 0.3s ease;
}

.p-modalArea__keywordItem:last-child a {
border-bottom: none;
}

.p-modalArea__keywordItem a:hover {
background-color: #f0f0f0;
}

.p-modalArea__list.-Nationwide{
margin-top: 20px;
position: relative;
z-index: 1;
}

/* modal-body 追加スタイル */
.modal-body {
position: relative;
}

/* サブメニューが開いている時にmodal-bodyのスクロールを無効化 */
.modal-body.submenu-active {
overflow: hidden;
touch-action: none;
}

/* サブメニューが開いている時に-Nationwideリストを隠す */
.area-submenu.active ~ .p-modalArea__list.-Nationwide {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}

/* サブメニュー用スタイル */
.area-submenu {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 100%;
background-color: white;
transition: left 0.3s ease-in-out;
z-index: 10;
overflow-y: scroll;
overflow-x: hidden;
box-sizing: border-box;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}

.area-submenu.active {
left: 0;
touch-action: pan-y;
}

.area-submenu-content {
padding: 10px;
box-sizing: border-box;
overflow-wrap: break-word;
}

/* サブメニュー タグ*/
.p-areaTag__title{
    font-weight: bold;
    position: relative;
    padding-left: 10px;
}

.p-areaTag__title::before{
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: var(--blackColor);
    left: 0;
}

.p-modalArea__tagList{
    margin-bottom: 10px;
}



.p-modalArea__tagItem a{
    display: inline-block;
    border: 2px solid var(--blackColor);
    background-color: var(--lightgrayColor);
    padding: 5px 10px;
    border-radius: 10px;
    margin-top: 10px;
    font-size: 0.875rem;
}

.p-modalArea__subList {
display: grid;
grid-template-columns: 1fr;
border: 5px solid var(--lightBlack);
gap: 0;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}

.p-modalArea__subItem {
position: relative;
}

.p-modalArea__subItem::after {
content: ">";
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
color: #666;
}

.p-modalArea__subItem a {
border: none;
border-bottom: 1px solid var(--grayColor);
border-radius: 0;
font-size: 0.875rem;
display: block;
padding: 15px;
text-decoration: none;
color: var(--blackColor);
transition: background-color 0.3s ease;
}

.p-modalArea__subItem:last-child a {
border-bottom: none;
}

.p-modalArea__subItem a:hover {
background-color: #f0f0f0;
}

/* サブメニュー 全スキー場一覧を見る */
.p-modalArea__otherItem{
    margin-top: 20px;
    border: 5px solid var(--lightBlack);
    position: relative;
}

.p-modalArea__otherItem::after {
content: ">";
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
color: #666;
}

.p-modalArea__otherItem a {
border: none;
border-bottom: 1px solid var(--grayColor);
border-radius: 0;
font-size: 0.875rem;
display: block;
padding: 15px;
text-decoration: none;
color: var(--blackColor);
transition: background-color 0.3s ease;
}

/* 都道府県選択専用スタイル */
.p-modalPrefectures__bg{
    background-color: var(--lightBlack);
    padding: 20px 5px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.p-modalPrefectures__title{
    color: var(--whiteColor);
    font-size: 0.75rem;
    padding-left: 10px;
    margin-bottom: 10px;
}

.p-modalPrefectures__item{
    background-color: var(--whiteColor);
    color: var(--blackColor);
    font-size: 0.875rem;
    padding: 10px;
    position: relative;
    border-bottom: 1px solid var(--grayColor);
}

.p-modalPrefectures__item a{
    display: block;
    width: 100%;
    height: 100%;
}



.p-modalPrefectures__item::after {
    content: ">";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #666;
}

.p-modalPrefectures__list.-Nationwide{
    border: 5px solid var(--lightBlack);
    margin-top: 20px;
}


}

@media screen and (max-width: 767px) {
.search-input {
    font-size: 0.75rem;
}

.modal-search-form {
    width: 100%;
    height: 50px;
}

.p-modal__bannerWrap {
    grid-template-columns: 1fr;
}

/* SP用モーダルバナースライダー */
.p-modal__bannerWrap.-sliderSP {
    display: block;
    padding-bottom: 30px;
    position: relative;
}

.p-modal__bannerWrap.-sliderSP img {
    border-radius: 0;
}

.p-modal__bannerWrap.-sliderSP .swiper-pagination {
    bottom: 0;
}

.p-modal__bannerWrap.-sliderSP .swiper-pagination-bullet {
    background: #ddd;
    opacity: 1;
    transition: all 0.3s ease;
}

.p-modal__bannerWrap.-sliderSP .swiper-pagination-bullet-active {
    background: #007abd;
    transform: scale(1.2);
}

.modal-content {
    width: 98vw;
    max-height: 80vh;
}

.modal-title{
    margin-top: 60px;
}
}

/* ------------------------------------------------------------------
- 選べるサービス
------------------------------------------------------------------ */

.l-service_box{
    margin-top: 60px;
}

.p-service_bannerWrap{
    display: grid;
    grid-template-columns: repeat(3 , 340px);
    gap: 5px;
    margin-top: 20px;
    place-content: center;
}

.p-service_bannerItem {
    display: block;
    width: 340px;
    height: 180px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);
    z-index: 0;
}


.p-service_bannerItem:hover{
    opacity: 0.7;
}

.lazy-bg {
  background-image: none;
}

.p-service_bannerItem.-one::before,
.p-service_bannerItem.-two::before,
.p-service_bannerItem.-three::before,
.p-service_bannerItem.-four::before,
.p-service_bannerItem.-five::before,
.p-service_bannerItem.-six::before
{
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.p-service_textWrap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #000;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
}

.p-service__title{
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: bold;
}

@media screen and (min-width:768px) and ( max-width:1024px) {
.p-service_bannerWrap{
    grid-template-columns: repeat(2 , 340px);
}

.p-service__sub{
    font-size: 0.875rem;
}

.p-service__title{
    font-size: 1.25rem;
}
}

@media screen and (max-width: 767px) {
.l-service_box{
    margin-top: 40px;
}

.p-service_bannerWrap{
    grid-template-columns: repeat(2 ,  minmax(0, 180px));
}

.p-service_bannerItem{
    max-width: 180px;
    width: 100%;
    height: 95px;
}

.p-service__sub{
    font-size: 0.625rem;
}

.p-service__title{
    font-size: 0.75rem;
    margin-top: 5px;
}
}

@media screen and (max-width: 369px){
    .p-service_bannerWrap{
    grid-template-columns: repeat(1 , 180px);
}
}

/* ------------------------------------------------------------------
- エリア別スキー場
------------------------------------------------------------------ */

.l-areaSki__box{
    margin-top: 60px;
}

.p-areaSki__wrap{
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    gap: 10px;
    margin-top: 20px;
}

.p-areaSki__wrap a{
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
}

.p-areaSki__wrap a:hover{
    color: var(--whiteColor);
    background-color: var(--primaryBlue);
    border: 1px solid var(--primaryBlue);
}

@media screen and (max-width: 1024px) {
.p-areaSki__wrap a{
    font-size: 0.75rem;
    padding: 15px;
}
}

@media screen and (max-width: 767px) {
.l-areaSki__box{
    margin-top: 40px;
}

.p-areaSki__wrap{
    grid-template-columns: repeat(3 , 1fr);
    gap: 5px;
}

.p-areaSki__wrap a{
    padding: 10px 5px;
}
}

/* ------------------------------------------------------------------
- 目的別スキー場
------------------------------------------------------------------ */
.l-purpose__box{
    margin-top: 60px;
    overflow: hidden;
    height: auto;
    padding-bottom: 30px;
}

.sliderSix .slick-list {
    margin: 0;
    padding: 0;
    overflow: visible; 
}

.sliderSix .slick-track {
    display: flex;
    margin-left: 0; 
}

.sliderSix .p-purpose__sliderItem {
    width: 120px !important;
    flex-shrink: 0;
    box-sizing: border-box;
}

.p-purpose__Item{
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 120px;
    height: auto;
    aspect-ratio: 372 / 280;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* 画像の上にグラデーションオーバーレイを追加 */
.p-purpose__Item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.45) 60%,
        rgba(0, 0, 0, 0.65) 100%
    );
    z-index: 1;
    transition: background 0.3s ease;
}

.p-purpose__Item:hover::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.5) 100%
    );
}

.p-purpose__title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #fff;
    text-align: center;
    z-index: 2;
    font-size: 0.68rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    letter-spacing: 0;
    width: 95%;
    line-height: 1.4;
}

/* PC: 1行表示 */
.p-purpose__titleLine1,
.p-purpose__titleLine2 {
    display: inline;
}

/* タブレット */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .sliderSix .p-purpose__sliderItem {
        width: 100px !important;
    }

    .p-purpose__Item{
        width: 100px;
        height: auto;
        aspect-ratio: 372 / 280;
    }

    .p-purpose__title{
        font-size: 0.7rem;
    }
}

/* スマホ */
@media screen and (max-width: 767px) {
    .l-purpose__box{
        margin-top: 40px;
    }

    .p-purpose__slider.sliderSix {
        margin: 0 !important;
        padding: 0 !important;
    }

    .sliderSix .swiper-wrapper {
        padding: 0 !important;
    }

    .sliderSix .swiper-slide {
        width: calc((100% - 10px) / 2) !important;
    }

    .sliderSix .p-purpose__sliderItem {
        margin-left: 0 !important;
        margin-right: 0;
        padding-bottom: 20px;
    }

    .p-purpose__Item{
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 372 / 280;
        background-size: cover;
    }

    .p-purpose__title{
        font-size: 1rem;
    }

    /* SP: 2行表示 */
    .p-purpose__titleLine1 {
        display: block;
    }
    .p-purpose__titleLine2 {
        display: block;
    }

    /* SP版: MainVisualとSearchBoxの余白を調整 */
    .l-sky__box {
        margin-top: 30px;
    }
}