@charset "UTF-8";

a{text-decoration: none;color:var(--basebk);}
.cmn_breadcrumb.cmp-breadcrumb {max-width: 1200px;}
.base_prod.side_box .hotel li>a .details_box, .base_prod.sort li:nth-child(-n+2)>a .details_box{
    width:51%;
}

#panel .newSearchPanelBody {margin: var(--s2) auto var(--s3);}
.mb10{margin-bottom: 1rem;}
.mb20{margin-bottom: 2rem;}
@media all and (max-width:767px){
    .sp_mt20{margin-top: 2rem;}
    .sp_mb20{margin-bottom: 2rem;}
}
/*　アクセスシビリティ用黒枠非表示　*/
button:focus, a:focus {outline: none;}

/*----------- root -----------*/
:root {
    --tq02: #47c4c9;
    --be:#faf9f5;
    --map:#a8e5de;
    --btn01:.735rem;
}

/*----------- icon -----------*/
.i_rec {background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_recomend_01.png) no-repeat;}
.i_pref {background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_prefecture_01.png) no-repeat;}
.i_s2s{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_season_01.png) no-repeat;}
.i_sf{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_feature_01.png) no-repeat;}
.i_art{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_article_01.png) no-repeat;}
.i_mc{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_course_01.png) no-repeat;}
.i_mc02 {background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_course_time_01.png) no-repeat;background-size: 24px;background-position: 0;color: var(--tq);font-size: var(--f16);font-weight: 700;margin: 0 auto;width: 100px;}
.i_rank{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_ranking_01.png) no-repeat;}
.i_kw{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_keyword_01.png) no-repeat;}
.i_area{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_area_01.png) no-repeat;}
.i_area02{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_area_map_01.png) no-repeat;}
.i_spot{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_spot_01.png) no-repeat;}
.i_spot02{background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_spot_area_01.png) no-repeat;}

.i_outside{background-image:url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2012%2012"><path%20d="M302.64,421.91v2.61h-8.15v-8.15h2.61m6.44,3.81v-4.71h-4.71m-.9,5.5,5.29-5.3m-10.68,2.66v8.14h8.14"%20transform="translate(-292.04%20-414.97)"%20fill="none"%20stroke="%23666"%20stroke-miterlimit="10"/></svg>');background-repeat:no-repeat;background-position: right 7px;background-size:12px;padding: 0 15px 0 0;display: inline-block;}

/*----------- common -----------*/
.ly_contents {
    font-family: Noto Sans JP,"noto-sans-cjk-jp", sans-serif;
    font-weight: 400;
    font-style: normal;
    & .bl_boxArea {
        width:100%;
        height:100%;
        color:#fff;
        padding:2rem;
        position: relative;
        margin: 0 0 10px;
        & .bl_text{
            border: 2px solid #fff;
            padding: 2rem 33rem;
            width: 100%;
            height: 29rem;
            margin:0;
            position: relative;
            z-index: 2;
            text-shadow: 0 3px 5px rgba(0, 0, 0, .9);
            & .text {
                font-size: clamp(1.2rem, 2.5vw, 1.4rem);
            }
        }
        & .bl_titleArea{border-bottom:2px solid #fff;
            margin-bottom: 2.4rem;
            &  h2 {
                font-size: clamp(var(--s4), 5vw, var(--s7));
                text-shadow: 0 3px 5px var(--basebk);
                line-height: 1;
            }
        }
    }
    & .bl_boxArea:before {
        background: linear-gradient(180deg, #0000 10%, #0000008c 66%, #313131);
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        margin: -2rem;
        background: linear-gradient(180deg, #00000029 20%, #000000cc);
        display: block;
    }
    
    & .aem-Grid[class*="el_clm"]::before,
    & .aem-Grid[class*="el_clm"]::after {display: none;}
    & [class*="el_btn0"] {
        & a {
            border: 2px solid var(--tq02);
            border-radius: .8rem;
            color: var(--tq02);
            font-size: var(--f15);
            font-weight: var(--fw7);
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            margin: var(--s1) 0;
            padding: var(--s05);
            position: relative;
            text-align: center;
        }
        & a:after {
            content: '';
            border-top: 2px solid var(--tq02);
            border-right: 2px solid var(--tq02);
            display: block;
            width: 1rem;
            height: 1rem;
            position: absolute;
            top: 50%;
            right: 1rem;
            -webkit-transform: rotate(45deg) translate(-35%, -40%);
            transform: rotate(45deg) translate(-35%, -40%);
        }
        & a:hover {
            border: 2px solid var(--tq02);
            border-radius: .8rem;
            background:#e2f7f6;
        }
    }

/*----------- MV -----------*/
    & .mv_hokkaido {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_hokkaido2026_pc.jpg) no-repeat;}
    & .mv_hakodate {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_hakodate_onuma2026_pc.jpg) no-repeat;}
    & .mv_sapporo {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_sapporo_noboribetu2026_pc.jpg) no-repeat;}
    & .mv_asahikawa {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_asahikawa_furano2026_pc.jpg) no-repeat;}
    & .mv_obihiro {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_obihiro_kushiro2026_pc.jpg) no-repeat;}

    & .mv_tohoku {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_tohoku2026_pc.jpg) no-repeat;}
    & .mv_aomori {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_aomori2026_pc.jpg) no-repeat;}
    & .mv_iwate {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_iwate2026_pc.jpg) no-repeat;}
    & .mv_akita {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_akita2026_pc.jpg) no-repeat;}
    & .mv_miyagi {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_miyagi2026_pc.jpg) no-repeat;}
    & .mv_yamagata {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_yamagata2026_pc.jpg) no-repeat;}
    & .mv_fukushima {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_fukushima2026_pc.jpg) no-repeat;}

    & .mv_nkanto {background: url(/content/dam/jretravel/site/page/nkanto/images/mv/mv_kitakanto2026_pc.jpg) no-repeat;}
    & .mv_gunma {background: url(/content/dam/jretravel/site/page/nkanto/images/mv/mv_gunma2026_pc.jpg) no-repeat;}
    & .mv_tochigi {background: url(/content/dam/jretravel/site/page/nkanto/images/mv/mv_tochigi2026_pc.jpg) no-repeat;}
    & .mv_ibaraki {background: url(/content/dam/jretravel/site/page/nkanto/images/mv/mv_ibaraki2026_pc.jpg) no-repeat;}

    & .mv_shutoken {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_shutoken2026_pc.jpg) no-repeat;}
    & .mv_tokyo {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_tokyo2026_pc.jpg) no-repeat;}
    & .mv_chiba {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_chiba2026_pc.jpg) no-repeat;}
    & .mv_saitama {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_saitama2026_pc.jpg) no-repeat;}
    & .mv_kanagawa {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_kanagawa2026_pc.jpg) no-repeat;}
    & .mv_chiba02 {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_chiba022026_pc.jpg) no-repeat;}
    & .mv_kanagawa02 {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_kanagawa022026_pc.jpg) no-repeat;}

    & .mv_koushinetsu {background: url(/content/dam/jretravel/site/page/koushinetsu/images/mv/mv_koushinetsu2026_pc.jpg) no-repeat;}
    & .mv_yamanashi {background: url(/content/dam/jretravel/site/page/koushinetsu/images/mv/mv_yamanashi2026_pc.jpg) no-repeat;}
    & .mv_nagano {background: url(/content/dam/jretravel/site/page/koushinetsu/images/mv/mv_nagano2026_pc.jpg) no-repeat;}
    & .mv_niigata {background: url(/content/dam/jretravel/site/page/koushinetsu/images/mv/mv_niigata2026_pc.jpg) no-repeat;}

    & .mv_izu {background: url(/content/dam/jretravel/site/page/izu/images/mv/mv_izu2026_pc.jpg) no-repeat;}

    & .mv_hokuriku {background: url(/content/dam/jretravel/site/page/hokuriku/images/mv/mv_hokuriku2026_pc.jpg) no-repeat;}
    & .mv_toyama {background: url(/content/dam/jretravel/site/page/hokuriku/images/mv/mv_toyama2026_pc.jpg) no-repeat;}
    & .mv_fukui {background: url(/content/dam/jretravel/site/page/hokuriku/images/mv/mv_fukui2026_pc.jpg) no-repeat;}
    & .mv_ishikawa {background: url(/content/dam/jretravel/site/page/hokuriku/images/mv/mv_ishikawa2026_pc.jpg) no-repeat;}

    & .mv_tokai {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_tokai2026_pc.jpg) no-repeat;}
    & .mv_aichi {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_aichi2026_pc.jpg) no-repeat;}
    & .mv_gifu {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_gifu2026_pc.jpg) no-repeat;}
    & .mv_mie {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_mie2026_pc.jpg) no-repeat;}
    & .mv_shizuoka {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_shizuoka2026_pc.jpg) no-repeat;}

    & .mv_kansai {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_kansai2026_pc.jpg) no-repeat;}
    & .mv_osaka {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_osaka2026_pc.jpg) no-repeat;}
    & .mv_kyoto {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_kyoto2026_pc.jpg) no-repeat;}
    & .mv_shiga {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_shiga2026_pc.jpg) no-repeat;}
    & .mv_nara {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_nara2026_pc.jpg) no-repeat;}
    & .mv_wakayama {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_wakayama2026_pc.jpg) no-repeat;}
    & .mv_hyogo {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_hyogo2026_pc.jpg) no-repeat;}

    & [class*="mv_"] {
        background-size: 100% auto;
        height: 330px;
    }

/*----------- nav -----------*/
    & nav.bl_nav ul {
        display: flex;
        /*flex-wrap: wrap;*/
        justify-content: center;
        /*display: grid;*/
        grid-template-columns: repeat(6, 1fr);
        align-items: center;
        text-align:center;
        font-weight:700;
        & li {min-width:200px;}
        & li a {
            border-right: 1px solid var(--gy);
            padding: 3rem 4rem 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 7.9rem;
            line-height: 1.4;
        }
        & li:first-child a {
            border-left: 1px solid var(--gy);
        }
    }
    & nav.bl_nav ul li a[class*="i_"],[class*="el_title"] {
        background-size: 25px 25px;
        background-position: center top;
        font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    }
    & .feature .section[class*="el_title"] h3 {
        background: none;
        border-bottom: none;
        text-align: center;
        font-size: clamp(2rem, 2.5vw, 2.4rem);;
        padding-top:3rem;
    }

/*----------- tab -----------*/
    & .ly_tabs {
        & .bl_tabs {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(4, 1fr);
            text-align: center;
            position:relative;
            border-bottom:2px solid var(--tq02);
            align-items: end;
            & .bl_tab {
                background: #eee;
                color: #aaa;
                border-radius: 5px 5px 0 0;
                position: relative;
                padding: 1rem;
                font-weight: var(--fw7);
                font-size: var(--s2);
                max-height: 45px;
            }
            & .bl_tab.active {
                background: var(--wh);
                border-left: 2px solid var(--tq02);
                border-top: 2px solid var(--tq02);
                border-right: 2px solid var(--tq02);
                margin-bottom: 2px;
                border-bottom: 2px solid var(--wh);
                bottom: -4px;
                max-height: 50px;
                padding: 1rem 0 2rem;
                color: var(--tq);
            }
        }
        & .bl_content {display: none;}
        & .bl_content.active {display: block;}
    }

/*----------- bg -----------*/
    &.el_bkgColor,
    & .el_bkgColor .section-title, 
    &.el_bkgColor .tabWrapper {background: var(--be);}

/*----------- pref -----------*/
    & .ly_areaMap {
        display: flex;
        border: 1px solid var(--l-gy);
        border-radius: 15px;
        padding: 2rem;
    }
    & [class*="area_map0"],& [class*="area_map0"] path {fill:#ebf7f6}
    & .map_outline{fill:#80d8d0}
    & [class*="area_map0"]:hover,
    & [class*="area_map0"] path:hover,
    & [class*="active0"][class*="area_map0"],
    & [class*="active0"][class*="area_map0"] path {fill:var(--map);}
    &#pref .ttl {
        color: #4d4d4d;
        border-bottom: solid 1px #494949;
        padding: 0 0 1rem 0;
        margin: 1rem 0;
    }

/*----------- s2s -----------*/
    &#s2s .base_prod .hotel li>a .img_box>span.ribbon {
        position: absolute;
        z-index: 99;
        background: #222222c7;
        padding: .1rem 1rem;
        font-size: var(--f14);
        color: var(--wh);
        font-weight: var(--fw4);
        /*TYO対策*/ 
        clip-path: none;
        top: 0;
        left: 0;
    }
    #s2s .swiper-button-next,
    #s2s .swiper-button-prev {pointer-events: auto;}

/*----------- sf ---------------*/
    &#sf .el_clm4 {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(4, 1fr);
    }

/*----------- artcle -----------*/
    & .ly_artcleWrap {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        & > div {min-width: 0;min-height: 0;}
    }
    & .aem-Grid.ly_artcleWrap::before, 
    & .aem-Grid.ly_artcleWrap::after {display: none;}

    & .ly_artcleWrap .top_hotelbrand_banner {
        & .listitem li {background: none;}
        & .titleitem {text-align:inherit;}
    }

/*----------- mc -----------*/
    &#mc {
        & .popularkeywords >.clm_osusume_taglabel.el_kwbtn>h4,
        & .bl_otherMc >div .feature .section h4 {
            border:none;
            font-size:var(--f16);
            border-left:8px solid var(--tq);
            padding:0 .4rem;
            line-height:1;
            background: inherit;
            text-align:left;
        }
        & .popularkeywords >.clm_osusume_taglabel.el_kwbtn>h4::after{content:none}
        & .productcontainer2 {margin-bottom: 10px;}
        & .el_clm2.bl_otherMc {
            display: flex;
            flex-direction: row-reverse;
        }
    }
 
    & .feature .section.el_titleMc ,
    & .feature .section.el_titleMc h3 {
        margin-bottom: 0;
    }
    
    & .el_clm2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    &.cmn_contents .clm_osusume_taglabel.el_kwbtn>ul{
        & li {
            background: var(--wh);
            & dt {
                border: 2px solid var(--tq02);
                border-radius: 50px;
            }
            & a {color:var(--basebk);font-weight: var(--fw4);}
            & a:before {
                content: '#';
                color: var(--tq2);
            }
            & a:hover {
                background: #e2f7f6;
                color: var(--tq02);
                border-radius: 50px;
            }
        }
        & li:hover{
            background:var(--wh);
        }
    }
    & .el_btnMc {
        & li{
            & a:not(p.el_btn01 a) {
                font-weight: var(--fw7);
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                /*text-align: center;*/
                position: relative;
                border: solid var(--tq02);
                border-width:2px 2px 4px 2px;
                border-radius: .8rem;
                color: var(--tq02);
                padding: var(--s1);
                margin: var(--s1) 0;
                width: 100%;
                background:var(--be);
            }
            & a:after {
                content: '';
                border-top: 2px solid var(--tq02);
                border-right: 2px solid var(--tq02);
                display: block;
                width: 1rem;
                height: 1rem;
                position: absolute;
                top: 50%;
                right: 1rem;
                -webkit-transform: rotate(45deg) translate(-35%, -40%);
                transform: rotate(45deg) translate(-35%, -40%);
            }
            & a:hover{
                opacity:.8;
            }
            & .outside_txt .el_btn01 a {padding:var(--btn01);}
        }
        & .el_btn01 {margin-top: 15px;}
    }
    & .base_prod .el_btnMc.hotel li{
        padding: 0 10px 10px;
        & a{
            margin: 0;
            & .details_box{
                & p.ttl,p.area{
                    display:block;
                    width:100%;
                }
                & p.price,p.conditions{display: none;}
                & p.ttl {
                    font-size: var(--f16);
                    font-weight: var(--fw7);
                    color: var(--tq02);
                }
                & p.area {
                    background: inherit;
                    color: var(--tq02);
                }
                & p.area .i_spot02 {
                    display: inline-block;
                    width: 1.3rem;
                    height: 1.3rem;
                    background-size: 8.5px 11px;
                    background-position: left center;
                }
            }
        }
    }
    & .productButton .btn_box[class*="el_btn0"]{
        margin: 0 auto;
        opacity:1;
        & a {
            border: 2px solid var(--tq02);
            border-radius: .8rem;
            color: var(--tq02);
            padding: var(--s05) var(--s1);/*s6*/
            & .btn_box_r {
                display: none;
            }
        }
    }
    & .cmp-text.mc_spot.center .el_btn01 a {padding: var(--btn01);}

/*----------- rank -----------*/
    & #rank .base_prod .hotel li>a .img_box>img {
        object-fit: cover;
        aspect-ratio: 160 / 99;
    }
    & #rank ul.i_rank02 {
        margin:10px 0 0;
        & li {position:relative;background:var(--wh);}
        & li::before {
            content:'';
            z-index:999;
            width:25px;
            height:30px;
            position:absolute;
            color:var(--wh);
            left:20px;
            top: -1px;
            font-size: var(--f21);
        }
        & li:first-child::before {content:'1';}
        & li:nth-child(2)::before {content:'2';}
        & li:nth-child(3)::before {content:'3';}
        & li:nth-child(4)::before {content:'4';}
        & li:nth-child(5)::before {content:'5';}
        & li::after {
            content: '位';
            color: var(--wh);
            position: absolute;
            top: 8px;
            z-index: 999;
            left: 33px;
        }
        & a::before {
            background: url(/content/dam/jretravel/site/common/images/icon/area2026/ic_ranking_tag_01.png) no-repeat;
            z-index: 99;
            position:absolute;
            content: '';
            width: 40px;
            height: 50px;
            top: -10px;
            left: 15px;
            background-size: 35px 50px;
        }
    }

/*----------- kw -----------*/
    &#kw.cmn_contents .clm_osusume_taglabel > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 5px;
    }

/*----------- area -----------*/
    & #area {
        & ul.bl_tabs.tab03 {
            margin: 0 auto;
            max-width: 840px;
            display: flex;
            align-content: center;
            justify-content: center;
            & li {
                max-width: 240px;
                min-width: 110px;
            }
        }
        & .bl_content {
            position:relative;
            max-width: 800px;
            margin: 16px auto;
            & .map_img {
                display: flex;
                justify-content: center;
                position: relative;
                width: 100%;
            }
        }
        & #onsen{
            & [class*="map_onsen"] {
                height: 400px;
                & li{
                    position:absolute;
                    z-index: 9;
                    & a{
                        display:block;
                        background: var(--aq);
                        color:var(--wh);
                        padding: .45rem 2.2rem .45rem 1rem;
                        position:relative;
                        width: auto;
                        border-radius: .8rem;
                        border: 2px solid var(--wh);
                        & span:after{
                            content: '';
                            border-top: 2px solid var(--wh);
                            border-right: 2px solid var(--wh);
                            display: block;
                            width: 1rem;
                            height: 1rem;
                            position: absolute;
                            top: 50%;
                            right: 1rem;
                            -webkit-transform: rotate(45deg) translate(-35%, -40%);
                            transform: rotate(45deg) translate(-35%, -40%);
                        }
                    }
                    & a:hover{
                        background: var(--tq02);
                    }
                    & a:after{
                        content:'';
                        background:url(/content/dam/jretravel/site/common/images/icon/area2026/ic_area_map_01.png) no-repeat;
                        background-size: 25px 25px;
                        background-position: left center;
                        position:absolute;
                        width: 100%;
                        height: 100%;
                        bottom: 20px;
                        right: 28px;
                    }
                }
            }
            & .map_onsen_izu{
                background: url(/content/dam/jretravel/site/page/izu/images/map/map_pref_izu.svg) no-repeat;
                background-position: center;
                & li.atami{
                    top: 75px;
                    right: 253px;
                }
                & li.ito{
                    top: 180px;
                    right: 235px;
                }
                & li.izukougen{
                    top: 270px;
                    right: 272px;
                }
                & li.izukyushimoda{
                    top: 350px;
                    right: 274px;
                }
                & li.shuzenji{
                    top: 165px;
                    right: 406px;
                    & a:after {
                        bottom: 20px;
                        left: 105px;
                    }
                }
            }
        }
    }

/*----------- spot -----------*/
    &#spot {
        & .title.feature {
            & .section{
                margin:0;
                & h4 {
                    font-size: var(--s3);
                    vertical-align: middle;
                    border-left: none;
                    border-bottom: none;
                    padding: 0;
                    margin: 0;
                    line-height: 1.2;
                }
            }
        }
        & .thumbnailImage{margin-bottom:var(--s2);}
        & .access {
            background: #f3fbfb;
            padding: 1rem;
            & >.title {
                font-size:var(--f14);
            }
            & .title+.text+.text {
                border-top: 1px dashed var(--l-gy);
                margin-top: .5rem;
                padding-top: .5rem;
                & div > p {
                    display: inline-block;
                    & a {
                        color: #06c;
                    }
                }
            }
            & .title+.text+.text:not(:has(a)){
                display: none;
            } 
        }
        & [class*="i_season"]{
            display:flex;
            gap:5px;
            font-size:var(--f12);
            font-weight:var(--fw7);
        }
        & li.s_off {
            background: #eee;
            color: #aaa;
        }
        & li.s_on {
            background: #c3f0ee;
            color:var(--tq);
        }
        & li[class*="s_o"] {
            border-radius: 15px;
            padding: 0rem 1rem;
        }
        & .i_spot02 {
            background-size: 11.5px 14px;
            background-position: left 1.2rem;;
            & p.area_name {
                background: none;
                color: var(--tq);
                display: block;
                font-size: var(--f13);
                font-weight: var(--fw7);
                padding: .8rem 0 0 1.5rem;
            }
        }
        & .thumbnailImage>.area_titlebox>.title_name {
            line-height: 1.4;
        }
    }

/*----------- link -----------*/
    & .el_clm3 {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(3, 1fr);
    }
    & .el_clm3.bl_center {
        display: flex;
        gap: 20px;;
        flex-wrap: wrap;
        justify-content: center;
    }
    & .el_clm3.bl_center>* {
        flex: 0 0 calc(100% / 3.3);
    }
    &#link {
        /*& .feature .section[class*="el_title"] h3 {padding-top:0;}*/
        & .top_hotelbrand_banner{
            & p.titleitem {
                color: var(--tq);
                font-size: var(--f16);
                margin-bottom: var(--s05);
            }
            & p.leaditem{
                padding:0 0;
            }
        }
    }  
}

@media all and (max-width:767px){
    .ly_contents:not(.el_wd100) {margin:1.6rem auto;padding:0 2%;}
    .ly_contents {
        & .bl_boxArea {
            & .bl_text {
                padding: 1rem;
                height:inherit;
            }
        }
        & .brsp{display: block;}
        
        & .mv_hokkaido {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_hokkaido2026_sp.jpg) no-repeat;}
        & .mv_hakodate {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_hakodate_onuma2026_sp.jpg) no-repeat;}
        & .mv_sapporo {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_sapporo_noboribetu2026_sp.jpg) no-repeat;}
        & .mv_asahikawa {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_asahikawa_furano2026_sp.jpg) no-repeat;}
        & .mv_obihiro {background: url(/content/dam/jretravel/site/page/hokkaido/images/mv/mv_obihiro_kushiro2026_sp.jpg) no-repeat;}

        & .mv_tohoku {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_tohoku2026_sp.jpg) no-repeat;}
        & .mv_aomori {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_aomori2026_sp.jpg) no-repeat;}
        & .mv_iwate {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_iwate2026_sp.jpg) no-repeat;}
        & .mv_akita {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_akita2026_sp.jpg) no-repeat;}
        & .mv_miyagi {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_miyagi2026_sp.jpg) no-repeat;}
        & .mv_yamagata {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_yamagata2026_sp.jpg) no-repeat;}
        & .mv_fukushima {background: url(/content/dam/jretravel/site/page/tohoku/images/mv/mv_fukushima2026_sp.jpg) no-repeat;}

        & .mv_nkanto {background: url(/content/dam/jretravel/site/page/nkanto/images/mv/mv_kitakanto2026_sp.jpg) no-repeat;}
        & .mv_gunma {background: url(/content/dam/jretravel/site/page/nkanto/images/mv/mv_gunma2026_sp.jpg) no-repeat;}
        & .mv_tochigi {background: url(/content/dam/jretravel/site/page/nkanto/images/mv/mv_tochigi2026_sp.jpg) no-repeat;}
        & .mv_ibaraki {background: url(/content/dam/jretravel/site/page/nkanto/images/mv/mv_ibaraki2026_sp.jpg) no-repeat;}

        & .mv_shutoken {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_shutoken2026_sp.jpg) no-repeat;}
        & .mv_tokyo {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_tokyo2026_sp.jpg) no-repeat;}
        & .mv_chiba {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_chiba2026_sp.jpg) no-repeat;}
        & .mv_saitama {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_saitama2026_sp.jpg) no-repeat;}
        & .mv_kanagawa {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_kanagawa2026_sp.jpg) no-repeat;}
        & .mv_chiba02 {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_chiba022026_sp.jpg) no-repeat;}
        & .mv_kanagawa02 {background: url(/content/dam/jretravel/site/page/shutoken/images/mv/mv_kanagawa022026_sp.jpg) no-repeat;}

        & .mv_koushinetsu {background: url(/content/dam/jretravel/site/page/koushinetsu/images/mv/mv_koushinetsu2026_sp.jpg) no-repeat;}
        & .mv_yamanashi {background: url(/content/dam/jretravel/site/page/koushinetsu/images/mv/mv_yamanashi2026_sp.jpg) no-repeat;}
        & .mv_nagano {background: url(/content/dam/jretravel/site/page/koushinetsu/images/mv/mv_nagano2026_sp.jpg) no-repeat;}
        & .mv_niigata {background: url(/content/dam/jretravel/site/page/koushinetsu/images/mv/mv_niigata2026_sp.jpg) no-repeat;}

        & .mv_izu {background: url(/content/dam/jretravel/site/page/izu/images/mv/mv_izu2026_sp.jpg) no-repeat;}

        & .mv_hokuriku {background: url(/content/dam/jretravel/site/page/hokuriku/images/mv/mv_hokuriku2026_sp.jpg) no-repeat;}
        & .mv_toyama {background: url(/content/dam/jretravel/site/page/hokuriku/images/mv/mv_toyama2026_sp.jpg) no-repeat;}
        & .mv_fukui {background: url(/content/dam/jretravel/site/page/hokuriku/images/mv/mv_fukui2026_sp.jpg) no-repeat;}
        & .mv_ishikawa {background: url(/content/dam/jretravel/site/page/hokuriku/images/mv/mv_ishikawa2026_sp.jpg) no-repeat;}

        & .mv_tokai {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_tokai2026_sp.jpg) no-repeat;}
        & .mv_aichi {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_aichi2026_sp.jpg) no-repeat;}
        & .mv_gifu {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_gifu2026_sp.jpg) no-repeat;}
        & .mv_mie {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_mie2026_sp.jpg) no-repeat;}
        & .mv_shizuoka {background: url(/content/dam/jretravel/site/page/tokai/images/mv/mv_shizuoka2026_sp.jpg) no-repeat;}

        & .mv_kansai {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_kansai2026_sp.jpg) no-repeat;}
        & .mv_osaka {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_osaka2026_sp.jpg) no-repeat;}
        & .mv_kyoto {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_kyoto2026_sp.jpg) no-repeat;}
        & .mv_shiga {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_shiga2026_sp.jpg) no-repeat;}
        & .mv_nara {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_nara2026_sp.jpg) no-repeat;}
        & .mv_wakayama {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_wakayama2026_sp.jpg) no-repeat;}
        & .mv_hyogo {background: url(/content/dam/jretravel/site/page/kansai/images/mv/mv_hyogo2026_sp.jpg) no-repeat;}
        & [class*="mv_"] {
            background-size: 100% 100%;
            height: auto;
            margin: 0;
        }

        & .feature .section.bl_titleArea h2 {
            font-size: var(--s4);
            text-shadow: 5px 5px 5px var(--basebk);
            line-height: 1;
            margin: 15px auto 20px;
        }
        & nav.bl_nav ul{
            display: grid;
            gap: 0;
            grid-template-columns: repeat(2, 1fr);
            & li {
                & a[class*="i_"]{
                background-size: 25px 25px;
                background-position: 1rem center;
                min-width: auto;
                }
                & a{
                    /*padding: 1rem 1rem 1rem 4.5rem;*/
                    padding: 1rem 1rem 1rem 4rem;
                    min-height: inherit;
                    border-right: none;
                    line-height: 1.2;
                    border-left: 1px solid var(--gy);
                    border-bottom:1px solid var(--gy);
                    height: 60px;
                    font-size: var(--f14);
                }
            }
            & li:first-child a,
            & li:nth-child(2) a{
                border-top:1px solid var(--gy);
            }
            & li:nth-child(even) a{    
                border-right:1px solid var(--gy);
            }
            /* li が奇数個なら最後の li に罫線 */
            &:has(> li:last-child:nth-child(odd)) > li:last-child a {
                width:100%;
                min-width: 201px;
                border-right: 1px solid var(--gy);
            }
        }
        & .ly_tabs {
            & .bl_tabs {
                gap: 5px;
                line-height: 1.3;
                & .bl_tab.active {
                    max-height: 60px;
                }
                & .bl_tab {
                    font-size:1.4rem;
                    max-height: 55px;
                }
            }
            & .bl_tabs.tab03 {
                & .bl_tab {color:var(--basebk);}
                & .bl_tab.active {color: var(--tq02);}
            }
        }
        & .ly_areaMap {   
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            padding: 1rem;
            width: 94%;
            & .bl_mapBtn {
                display:grid;
                gap: 10;
                grid-template-columns: repeat(3, 1fr);
                margin-bottom: 0;
            }
        }
        & .bl_mapBtn{
            &.aem-Grid::before,
            &.aem-Grid::after{display:none}
        }
        & .el_btn01 a{padding: var(--s1) var(--s1) var(--s1) 0;}
        & .ly_artcleWrap {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(2, 1fr);
        }
        & .top_hotelbrand_banner {
            & .listitem a {
                display: flex;
                flex-direction: column;
                width:96%;margin:0 2%;
                & .imageitem{
                    width:100%;
                    margin:0;
                }
            }
        }
        & .ly_areaWrap,
        & .bl_card {
            gap: 10px;
            grid-template-columns: repeat(1, 1fr);
        }
        & .bl_map >svg {width:100%; height:50%}
        
        & #area {
            & #onsen {
                & [class*="map_onsen"] {
                    height: 240px;
                    background-size: 100%;
                    & li {font-size:1.3rem;
                        & a {
                            padding: .2rem 2.2rem .2rem 1rem;
                            & span {white-space: nowrap;}
                        }
                        & a:after {background-size: 20px 20px;bottom: 10px;right: 25px;}
                    }
                }
                & .map_onsen_izu {
                    & li.atami {top: 35px;right: 68px;}
                    & li.ito {top: 105px;right: 60px;}
                    & li.izukougen {top: 165px;right: 82px;}
                    & li.izukyushimoda {top: 220px;right: 81px;}
                    & li.shuzenji {top: 98px;right: 210px;}
                    & li.shuzenji a:after {bottom: 10px;}
                }
                & .base_prod .el_btnMc.hotel li{
                    & a{
                        & .details_box{
                            & p.ttl {text-align: left;}
                        }
                    }
                }
            }
        }
        & .el_clm3.bl_center {
            display: block;
            & .top_hotelbrand_banner .listitem a {
                display: flex;
                flex-direction: initial;
                & p,
                & div {width: 50%;}
                & div.textitem {
                    padding:0 10px;
                    & p {width: 100%;}
                    & p.titleitem {line-height:1;}
                }
            }
        }
        &#s2s .bl_tab.active, #area .bl_tab.active {height:45px;}
        &#sf .el_clm4 {
            gap: 0 10px;
            grid-template-columns: repeat(2, 2fr);
            & .banner.tyo_otherarea_banner {
                margin:0;
                & .tyo_otherarea_banner .listitem2 {width:auto;}
            }
        }
        &#mc {
            & .popularkeywords >.clm_osusume_taglabel.el_kwbtn>h4 {margin-top: var(--s3);}
            & .el_clm2.bl_otherMc {
                display: flex;
                flex-direction: column-reverse;
                &> div:nth-child(2) section {margin-bottom: 0;}
            }
        }
        &#spot {       
            & section {
                & section.bl_content {margin: 0px auto;}
                & section.bl_content:not(.active){margin:0;}
            }
            &.ly_contents >div:first-child>section,
            & .bl_spotWrap,
            & .ly_tabs,
            & .ly_panel{margin:0;}
            & .access {
                & >.title.top {
                    & .section {margin:0;}
                }
                & .title+.text+.text {
                    padding-left: 1rem;
                    & .i_outside {background-position: right 5px;}
                    & div.cmp-text{ 
                        max-width: 94%;
                        display: inline;
                        & p {
                            display: inline-block;
                            & a {color: #06c;}
                        }
                    }
                }
            }
        }
    }
}
@media all and (min-width:768px){   
    .ly_contents {
        & .brsp{display: contents;}
        & nav.bl_nav {
            margin-top: 30px;
            &ul li a.i_pref {background-position: center .8rem;}
        } 
        & nav.bl_nav.nav04 ul{
           grid-template-columns: 210px 210px 210px 210px;
           justify-content: center;
        }
        & .bl_mapBtn { width: 300px;}
        & .bl_boxArea {
            & .bl_text {padding: 3rem 23rem;}
        }
        & .el_clm2 {
            gap: 20px;
            grid-template-columns: repeat(2, 1fr);
        }
        & .el_btn01 {
            width: 300px;
            margin: 0 auto;
        }
        & .el_btn02{width:90%;}
        #sf {margin: 10px auto 30px;}
    }
}