/*=========================================
Responsive CSS
=========================================*/


/*=========================================
Desktop
（1200px以上）
=========================================*/

/* PC・タブレット版を表示 */
#pc-layout{
    display:flex !important;
}

/* スマホ版は非表示 */
#sp-layout{
    display:none !important;
}


/*=========================================
Tablet
（1024px以下）
=========================================*/

@media (max-width:1024px){

    /*=====================================
    Hero Section
    =====================================*/

    .hero-section{
        height:650px;
        padding:20px;
    }

    /*=====================================
    Search Section
    =====================================*/

    .search-section{
        padding:40px 30px;
    }

    /*=====================================
    Category Section
    =====================================*/

    .category-section{
        padding:40px 30px;
    }

    /*=====================================
    Recommended Section
    =====================================*/

    .recommended-section{

    padding:40px 30px 80px;

}

    /*=====================================
    Area Section
    =====================================*/

    .area-section{
        padding:40px 30px;
    }

    /*=====================================
    How To Section
    =====================================*/

    .howto-section{
        padding:40px 30px;
    }

    /*=====================================
    Service Section
    =====================================*/

    .service-section{
        padding:40px 30px;
    }

    /*=====================================
    CTA Section
    =====================================*/

    .cta-section{
        padding:40px 30px;
    }

    /*=====================================
    Sponsor Ranking
    =====================================*/

 .recommended-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px;

    grid-auto-rows:260px;

    margin-bottom:60px;

}

    .rank-1,
    .rank-2,
    .rank-3,
    .rank-4,
    .rank-5{

        grid-column:auto !important;
        grid-row:auto !important;

    }

.rank-5{

    display:none;

}

    .recommended-card{

    width:100%;
    height:260px;

}

    .recommended-image,
    .recommended-image img{

        width:100%;
        height:100%;
        object-fit:cover;

    }

    .recommended-overlay{

        padding:18px;

    }

    .recommended-info h3{

        font-size:22px;

    }

    .genre{

        font-size:13px;

    }

    .area{

        font-size:14px;

    }

    .rank-badge{

        font-size:16px;
        padding:8px 14px;

    }

}

/*=========================================
Mobile
（767px以下）
=========================================*/

@media (max-width:767px){

    /*=====================================
    PC・スマホ切替
    =====================================*/

    #pc-layout{
    display:none !important;
}

#sp-layout{
    display:flex !important;
}

    /*=====================================
    Hero Section
    =====================================*/

    .hero-section{
        height:auto;
        padding:15px;
    }

    /*=====================================
    Search Section
    =====================================*/

    .search-section{
        padding:30px 20px;
    }

    /*=====================================
    Category Section
    =====================================*/

    .category-section{
        padding:30px 20px;
    }

    /*=====================================
    Recommended Section
    =====================================*/

    .recommended-section{
        padding:30px 20px 50px;
    }

    /*=====================================
    Area Section
    =====================================*/

    .area-section{
        padding:30px 20px;
    }

    /*=====================================
    How To Section
    =====================================*/

    .howto-section{
        padding:30px 20px;
    }

    /*=====================================
    Service Section
    =====================================*/

    .service-section{
        padding:30px 20px;
    }

    /*=====================================
    CTA Section
    =====================================*/

    .cta-section{
        padding:30px 20px;
    }

    /*=====================================
    Sponsor Ranking
    =====================================*/

    .recommended-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:15px;

        grid-auto-rows:220px;

        margin-bottom:30px;

    }

    .rank-1,
    .rank-2,
    .rank-3,
    .rank-4,
    .rank-5{

        display:block;

        grid-column:auto !important;
        grid-row:auto !important;

    }

    .recommended-card{

        width:100%;
        height:220px;

    }

    .recommended-image,
    .recommended-image img{

        width:100%;
        height:100%;
        object-fit:cover;

    }

    .recommended-overlay{

        padding:15px;

    }

    .recommended-info h3{

        font-size:18px;

    }

    .genre{

        font-size:12px;

    }

    .area{

        font-size:13px;

    }

    .rank-badge{

        font-size:14px;
        padding:6px 12px;

    }

}

/*=========================================
Archive Page Responsive
=========================================*/

/*-----------------------------------------
Tablet
-----------------------------------------*/
@media (max-width:1024px){

    /* Hero */

    .archive-hero{
        min-height:500px;
    }

    .archive-header{
        padding:40px 30px;
    }

    /* 検索フォーム */

    .archive-search{
        padding:0 30px;
    }

    .search-keyword{
        display:flex;
        gap:15px;
    }

    .search-keyword input{
        flex:1;
    }

    .search-select{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .search-select select,
    .clear-button{
        width:100%;
    }

    /* 検索結果 */

    .archive-result{
        padding:40px 30px;
    }

    /* 店舗一覧 */

    .archive-grid{

        display:grid;

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:25px;

    }

    .place-card{

        width:100%;

    }

}


/*-----------------------------------------
Smartphone
-----------------------------------------*/
@media (max-width:767px){

    /* Hero */

    .archive-hero{
        min-height:420px;
    }

    .archive-header{
        padding:30px 20px;
    }

    .archive-header h1{
        font-size:40px;
    }

    .archive-header p{
        font-size:16px;
    }

    /* 検索フォーム */

.archive-search{

    padding:20px;

}

.search-keyword{

    display:flex;

    flex-direction:column;

    gap:15px;

    width:100%;

}

.search-keyword input{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

}

.search-keyword button{

    width:100%;

    max-width:100%;

    box-sizing:border-box;

}

    .search-select{

        display:flex;
        flex-direction:column;
        gap:15px;

    }

    .search-select select,
    .clear-button{

        width:100%;

    }

    /* 検索結果 */

    .archive-result{
        padding:30px 20px;
    }

    .result-header{

        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:15px;

    }

    /* 店舗一覧 */

    .archive-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:20px;

    }

    .place-card{

        width:100%;

    }

}

/* ===========================
   タブレット（1024px以下）
=========================== */

@media (max-width:1024px){

/* 全体余白 */

.places-container{

padding:30px 20px;

}

/* TOP */

.hero-section{

flex-direction:column;

gap:30px;

}

.hero-left,
.hero-right{

width:100%;

}

.hero-image{

width:100%;

height:auto;

}

/* ギャラリー */

.gallery-list{

gap:15px;

}

.gallery-item{

min-width:220px;

}

/* メニュー・店舗情報 */

.menu-info{

flex-direction:column;

gap:30px;

}

.menu-area,
.info-area{

width:100%;

}

}

/* ===========================
   スマホ（767px以下）
=========================== */

/* ===========================
   スマホ（767px以下）
=========================== */

@media (max-width:767px){

/* 全体 */

.places-container{

padding:20px 15px;

}

/* タイトル */

.place-title{

font-size:32px;

line-height:1.3;

}

/* セクションタイトル */

h2{

font-size:26px;

}

/* Hero */

.hero-section{

display:flex;

flex-direction:column;

gap:20px;

}

.hero-left,
.hero-right{

width:100%;

}

.hero-image{

width:100%;

height:auto;

border-radius:15px;

display:block;

}

/* ギャラリー */

.gallery-list{

display:flex;

gap:10px;

overflow-x:auto;

}

.gallery-item{

min-width:180px;

}

.gallery-item img{

width:100%;

height:140px;

object-fit:cover;

}

/* 特徴 */

.feature-grid{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

/* メニュー・店舗情報 */

.menu-info{

display:flex;

flex-direction:column;

gap:25px;

}

.menu-area,
.info-area{

width:100%;

}

/* メニュー */

.menu-grid{

display:grid;

grid-template-columns:1fr !important;

gap:20px;

}

.menu-card{

width:100% !important;

max-width:100%;

margin:0;

box-sizing:border-box;

}

.menu-card img{

width:100%;

height:auto;

display:block;

border-radius:15px;

}

/* 店舗情報 */

.info-area li{

font-size:15px;

}

/* GoogleMap */

.map-button{

width:100%;

display:block;

text-align:center;

}

/* クーポン */

.coupon-card{

padding:20px;

}

}

/*====================================
タブレットヘッダー
====================================*/

@media (max-width:1024px){

    .gotuk-header-inner{

        padding:0 15px;

        height:70px;

    }

    /* ロゴ */

    .gotuk-logo img{

        width:200px;

        height:auto;

    }

    /* メニュー */

    .gotuk-nav ul{

        gap:18px;

    }

    .gotuk-nav a{

        font-size:13px;

        padding:6px 8px;

    }

    /* アイコン */

    .nav-icon{

        font-size:20px;

        margin-bottom:4px;

    }

    /* 言語ボタン */

    .language-button{

        padding:8px 10px;

        font-size:14px;

    }

}

/*====================================
PC・スマホヘッダー切替
====================================*/

/* 初期状態 */

.gotuk-mobile-header{
    display:none;
}

/*====================================
スマホ
====================================*/

@media (max-width:768px){

    /* PCメニュー非表示 */

    .gotuk-nav{
        display:none;
    }

    /* PCヘッダー非表示 */

    .gotuk-header{
        display:none;
    }

    /* スマホヘッダー表示 */

    .gotuk-mobile-header{

        display:grid;

        grid-template-columns:60px 1fr 120px;

        align-items:center;

        background:#ffffff;

        padding:12px 15px;

        border-bottom:1px solid #e5e5e5;

        position:sticky;

        top:0;

        z-index:9999;

    }

    /* ハンバーガーボタン */

    .mobile-menu-button{

        display:flex;

        justify-content:center;

        align-items:center;

        width:48px;

        height:48px;

        padding:0;

        margin:0;

        background:transparent;

        border:none;

        box-shadow:none;

        outline:none;

        appearance:none;

        -webkit-appearance:none;

        font-size:30px;

        line-height:1;

        color:#333;

        cursor:pointer;

    }

    /* ロゴ */

    .gotuk-mobile-logo{

        display:flex;

        justify-content:center;

        align-items:center;

    }

    .gotuk-mobile-logo img{

        width:180px;

        height:auto;

        display:block;

    }

    /* 言語ボタン */

    .gotuk-mobile-language{

        display:flex;

        justify-content:flex-end;

    }

    .gotuk-mobile-language .language-button{

        padding:8px 12px;

        font-size:14px;

    }

}

/*=========================
スマホメニュー
=========================*/

.gotuk-mobile-menu{

    display:none;

    background:#ffffff;

    border-top:1px solid #eeeeee;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.gotuk-mobile-menu.active{

    display:block;

}

.gotuk-mobile-menu ul{

    list-style:none;

    margin:0;

    padding:0;

}

.gotuk-mobile-menu li{

    border-bottom:1px solid #eeeeee;

}

.gotuk-mobile-menu a{

    display:block;

    padding:18px 20px;

    color:#333;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

}

.gotuk-mobile-menu a:hover{

    background:#f8f8f8;

}

/* ======================================
画面サイズ自動調整
====================================== */

.container,
.archive-inner,
.places-container,
.archive-grid,
.favorite-ranking,
.recommended-grid{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding-left:20px;

    padding-right:20px;

    box-sizing:border-box;

}

/* ======================================
店舗一覧
====================================== */

.archive-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

/* ======================================
人気ランキング
====================================== */

.favorite-ranking{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

/* ======================================
おすすめ店舗
====================================== */

.recommended-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

.category-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}

img{

    max-width:100%;

    height:auto;

}

@media screen and (max-width:1200px){

.gotuk-header-inner{

    padding:0 20px;

}

.archive-inner{

    padding:0 20px;

}

.places-container{

    padding:0 20px;

}

}

@media screen and (max-width:992px){

.archive-grid{

    grid-template-columns:repeat(2,1fr);

}

.favorite-ranking{

    grid-template-columns:repeat(2,1fr);

}

.recommended-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media screen and (max-width:768px){

.archive-grid{

    grid-template-columns:1fr;

}

.favorite-ranking{

    grid-template-columns:1fr;

}

.recommended-grid{

    grid-template-columns:1fr;

}

}

/* ==========================================
人気ランキング・おすすめ一覧 レイアウト固定
========================================== */

/* PC（1025px以上） */
@media screen and (min-width:1025px){

    .archive-grid{

        display:grid !important;

        grid-template-columns:repeat(4,1fr) !important;

        gap:30px !important;

    }

}

/* タブレット（1024px以下） */
@media screen and (max-width:1024px){

    .archive-grid{

        display:grid !important;

        grid-template-columns:1fr !important;

        gap:25px !important;

    }

}

/* スマホ（767px以下） */
@media screen and (max-width:767px){

    .archive-grid{

        display:grid !important;

        grid-template-columns:1fr !important;

        gap:20px !important;

    }

}

/* ===========================================
   タブレット（992px以下）
=========================================== */

@media screen and (max-width:992px){

    .area-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .area-hero img{
        width:100%;
        height:420px;
        object-fit:cover;
    }

    .hero-overlay h1{
        font-size:42px;
    }

    .area-category-menu{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
    }

    .popup-box{
        width:90%;
        max-height:85vh;
        overflow-y:auto;
    }

}

/* ===========================================
   スマホ（768px以下）
=========================================== */

@media screen and (max-width:768px){

    .area-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .area-hero img{
        width:100%;
        height:260px;
        object-fit:cover;
    }

    .hero-overlay{
        padding:20px;
    }

    .hero-overlay h1{
        font-size:30px;
        line-height:1.3;
    }

    .hero-overlay p{
        font-size:15px;
    }

    .area-category-menu{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:8px;
        padding:15px;
    }

    .area-category-menu a{
        font-size:14px;
        padding:10px 18px;
    }

    .popup-box{
        width:95%;
        max-height:90vh;
        overflow-y:auto;
    }

    .popup-image img{
        width:100%;
        height:auto;
    }

    .popup-map iframe{
        width:100%;
        height:300px;
    }

}