/* モバイル用スタイル - 768px以下 */
@media (max-width: 768px) {
    /* モーダルメニュー調整 */
    .modal-nav-item {
        font-size: 1.2rem;
    }
    
    /* ヒーローセクション基本設定 */
    .hero {
        height: 100vh;
        width: 100%;
        overflow: hidden;
        position: relative;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* スライダー設定 */
    .hero-swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    /* スライダーナビゲーションボタンを非表示 */
    .hero .swiper-button-next,
    .hero .swiper-button-prev,
    .hero-swiper .swiper-button-next,
    .hero-swiper .swiper-button-prev {
        display: none !important;
    }
    
    .swiper-slide {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    
    /* オーバーレイを調整して上部全体を自然に明るく */
    .overlay {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.5) 5%,
            rgba(255, 255, 255, 0.4) 10%,
            rgba(255, 255, 255, 0.2) 20%,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.2) 70%,
            rgba(0, 0, 0, 0.4) 100%
        );
    }
    
    /* ヘッダー設定 - 画面内に収める */
    header.header {
        position: fixed;
        top: 15px; /* 上部に余白を追加 */
        left: 0;
        right: 0;
        width: 100%;
        min-height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent !important;
        z-index: 9999;
        box-sizing: border-box;
        padding: 1.5rem;
    }
    
    .logo-center {
        position: absolute;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 140px;
        max-width: 140px;
        overflow: hidden;
        padding: 10px 0 0 0;
        margin: 0;
    }
    
    .logo-center img,
    .logo-center .custom-logo-link img {
        width: 140px !important;
        height: auto !important;
        display: block !important;
        margin: 8px auto 0 !important;
        min-width: 80px;
        max-height: none;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    
    .header-right {
        position: absolute;
        top: 40%;
        right: 1.5rem;
        transform: translateY(-50%);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    .tagline-container {
        display: none !important;
    }
    
    .menu-text {
        display: none !important;
    }
    
    .menu-icon span {
        width: 24px;
        height: 2px;
        background-color: #fff;
    }
    
    /* ハンバーガーメニューボタン調整 */
    .nav-toggle {
        padding: 10px;
    }
    
    .menu-toggle-btn {
        padding: 10px;
    }
    
    /* 縦書きテキスト設定 */
    .hero-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none;
    }
    
    .vertical-text {
        position: absolute;
        bottom: 5.5rem;
        left: 1.5rem;
        font-size: 2.8rem;
        letter-spacing: 0.1em;
        z-index: 10;
        height: auto;
        max-height: 70vh;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        padding-bottom: 60px;
        margin-bottom: 40px;
        pointer-events: none;
    }
    
    /* 縦書きテキスト非表示用クラス */
    .hero-content.hide-text,
    .vertical-text.hide-text {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    /* スクロールインジケーター */
    .scroll-indicator {
        bottom: 30px;
        z-index: 9; /* MEGUROテキストより下のレイヤーに配置 */
    }
    
    /* Admin bar fix */
    body.admin-bar .header {
        top: 46px;
    }
    
    body.admin-bar .hero {
        margin-top: 0;
    }
    
    /* セクション全体の余白調整 */
    .section {
        margin: 40px 0; /* 上下マージンを減らす */
    }
    
    /* トピックスセクション */
    .topics-section {
        margin-top: 30px;
        margin-bottom: 50px; /* 下部マージンを減らす */
        padding: 30px 20px;
    }
    
    /* コンセプトセクション */
    .concept-section {
        display: block;
        padding: 0;
        margin: 40px 0; /* 上下マージンを減らす */
    }
    
    .concept-image {
        width: 100%;
        height: 35vh; /* 高さを減らす */
        position: relative;
        flex: none;
    }
    
    .concept-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .concept-content {
        width: 100%;
        padding: 25px 20px; /* パディングを減らす */
        flex: none;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .concept-title {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    .concept-heading {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }
    
    .concept-text {
        font-size: 0.9rem;
        line-height: 1.8;
        margin-bottom: 20px; /* 下部マージンを減らす */
        text-align: left;
    }
    
    /* メニューセクション */
    .menu-section {
        display: flex;
        flex-direction: column;
        margin: 40px 0; /* 上下マージンを減らす */
    }
    
    /* 表示順を入れ替え */
    .menu-image-container {
        order: 1;
        width: 100%;
        height: 35vh; /* 高さを減らす */
    }
    
    .menu-title-container {
        order: 2;
        width: 100%;
        padding: 25px 20px 15px; /* パディングを減らす */
        align-items: center;
    }
    
    .menu-content {
        order: 3;
        width: 100%;
        padding: 0 20px 30px; /* パディングを減らす */
        align-items: center;
        text-align: center;
    }
    
    /* タイトルスタイル調整 */
    .menu-title-container {
        display: flex;
        flex-direction: column-reverse; /* 子要素の順序を逆にする */
    }
    
    .menu-title {
        writing-mode: horizontal-tb;
        font-size: 2.5rem;
        margin-bottom: 0;
        margin-top: 10px; /* 下（画面では上）のマージンを設定 */
        text-align: center;
    }
    
    .menu-subtitle {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 10px; /* 上（画面では下）のマージンを設定 */
    }
    
    /* 説明文スタイル調整 */
    .menu-description {
        text-align: left;
        margin-bottom: 20px; /* 下部マージンを減らす */
    }
    
    /* 店舗情報セクションの調整 */
    .shop-section {
        flex-direction: column;
        margin: 40px 0; /* 上下マージンを減らす */
    }
    
    .shop-image-container {
        width: 100%;
        height: 35vh; /* 高さを減らす */
    }
    
    .shop-content {
        width: 100%;
        padding: 25px 20px; /* パディングを減らす */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .shop-title {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    
    .shop-subtitle {
        font-size: 0.9rem;
        margin-bottom: 20px; /* 下部マージンを減らす */
    }
    
    /* 店舗情報のスタイル調整 */
    .shop-info-container {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 20px; /* ギャップを減らす */
    }
    
    .shop-info-item {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }
    
    /* フッター調整 */
    .footer {
        padding: 60px 20px 30px;
    }
    
    .footer-top {
        margin-bottom: 40px;
        padding-bottom: 40px;
    }
    
    .footer-bottom {
        padding-top: 20px;
    }
    
    /* ボタンスタイルの統一調整 */
    .read-more-btn {
        font-size: 0.85rem;
        padding: 10px 30px;
    }
    
    .read-more-btn .icon {
        font-size: 0.9rem;
    }
    
    /* コンセプトボタン配置 */
    .concept-read-more {
        align-self: center;
        margin-top: 10px;
    }
    
    /* メニューボタン配置 */
    .menu-read-more {
        align-self: center;
    }
    
    /* 店舗ボタン配置 */
    .shop-button {
        align-self: center;
    }
    
    /* モバイル用ボタンコンテナ調整 */
    .concept-content .button-container,
    .menu-content .button-container,
    .shop-content .button-container {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 20px;
    }
    
    /* Back to Topボタン調整 */
    .back-to-top {
        font-size: 0.8rem;
        padding: 10px 25px;
    }
    
    .back-to-top-icon {
        font-size: 0.85rem;
    }

    /* トピックス個別ページのモバイル対応 */
    .single-topics .simple-header {
        min-height: 130px; /* モバイルの高さも増やす */
        padding: 2rem 1rem;
    }
    
    .single-topics .simple-header .logo-center {
        top: 50%; /* 垂直中央配置を確保 */
        transform: translate(-50%, -50%); /* X軸とY軸両方の中央揃え */
    }
    
    .single-topics .simple-header .nav-toggle {
        top: 50%; /* 垂直中央配置を確保 */
        right: 1rem;
        transform: translateY(-50%);
    }
}

/* 小型デバイス用 - 576px以下 */
@media (max-width: 576px) {
    .header {
        min-height: 80px;
        padding: 1rem;
        top: 10px; /* 小型デバイス用の余白調整 */
    }

    .logo-center {
        max-width: 120px; /* サイズを少し大きく */
    }
    
    .logo-center img,
    .logo-center .custom-logo-link img {
        width: 120px !important; /* サイズを少し大きく */
        min-width: 90px;
        margin: 6px auto 0 !important;
    }

    .header-right {
        right: 1rem;
    }

    .menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 20px; /* アイコン高さ固定 */
    }

    .menu-icon span {
        width: 20px;
    }

    .vertical-text {
        font-size: 2.5rem;
        bottom: 5rem; /* 位置を調整 */
        padding-bottom: 50px; /* 小型デバイス用の余白 */
        margin-bottom: 30px; /* 小型デバイス用のマージン */
    }
    
    /* より小さい画面での写真表示調整 */
    .hero-image {
        object-position: 65% center;
    }

    .topics-section {
        margin-top: 25px;
        margin-bottom: 40px; /* さらに下部マージンを減らす */
        padding: 25px 15px;
    }

    .concept-image {
        height: 30vh; /* さらに高さを減らす */
    }
    
    .menu-image-container {
        height: 30vh; /* さらに高さを減らす */
    }
    
    .shop-image-container {
        height: 30vh; /* さらに高さを減らす */
    }
    
    .shop-content {
        padding: 25px 20px;
    }
    
    .concept-heading {
        font-size: 1.4rem;
    }
    
    .concept-text {
        font-size: 0.85rem;
    }
    
    .concept-text br {
        display: none; /* モバイルでは改行を取り除く */
    }

    .menu-title-container {
        padding: 25px 20px 15px;
    }
    
    .menu-title {
        font-size: 2rem;
    }
    
    .menu-subtitle {
        font-size: 0.9rem;
    }
    
    .menu-content {
        padding: 0 20px 30px;
    }
    
    .menu-description {
        font-size: 0.9rem;
        line-height: 1.8;
    }
    
    .menu-description br {
        display: none; /* 小さな画面では改行を取り除く */
    }

    .read-more-btn {
        font-size: 0.8rem;
        padding: 8px 25px;
    }

    .read-more-btn .icon {
        font-size: 0.85rem;
    }

    .back-to-top {
        font-size: 0.75rem;
        padding: 8px 20px;
    }

    .back-to-top-icon {
        font-size: 0.8rem;
    }
}

/* 超小型デバイス用 - 375px以下 */
@media (max-width: 375px) {
    .header {
        min-height: 70px;
        padding: 0.8rem;
        top: 8px; /* 超小型デバイス用の余白調整 */
    }
    
    .logo-center {
        max-width: 120px; /* サイズを少し大きく */
    }
    
    .logo-center img,
    .logo-center .custom-logo-link img {
        width: 120px !important; /* サイズを少し大きく */
        min-width: 90px;
        margin: 6px auto 0 !important;
    }
    
    .menu-icon {
        height: 18px;
    }
    
    .menu-icon span {
        width: 18px;
    }
    
    .read-more-btn {
        font-size: 0.75rem;
        padding: 8px 20px;
    }
    
    .read-more-btn .icon {
        font-size: 0.8rem;
    }

    .vertical-text {
        font-size: 2.2rem;
        bottom: 4.5rem;
        padding-bottom: 40px;
        margin-bottom: 25px;
    }

    /* セクション全体の余白をさらに調整 */
    .section {
        margin: 35px 0; /* 上下マージンをさらに減らす */
    }
    
    /* トピックスセクションの余白調整 */
    .topics-section {
        margin-top: 20px;
        margin-bottom: 35px; /* さらに下部マージンを減らす */
        padding: 20px 15px;
    }
    
    /* 各セクションの高さと余白調整 */
    .concept-section {
        margin: 35px 0; /* 上下マージンをさらに減らす */
    }
    
    .concept-image {
        height: 25vh; /* さらに高さを減らす */
    }
    
    .concept-content {
        padding: 20px 15px; /* さらにパディングを減らす */
    }
    
    .concept-text {
        margin-bottom: 15px; /* さらに下部マージンを減らす */
    }
    
    .menu-section {
        margin: 35px 0; /* 上下マージンをさらに減らす */
    }
    
    .menu-image-container {
        height: 25vh; /* さらに高さを減らす */
    }
    
    .menu-title-container {
        padding: 20px 15px 10px; /* さらにパディングを減らす */
    }
    
    .menu-content {
        padding: 0 15px 25px; /* さらにパディングを減らす */
    }
    
    .menu-description {
        margin-bottom: 15px; /* さらに下部マージンを減らす */
    }
    
    .shop-section {
        margin: 35px 0; /* 上下マージンをさらに減らす */
    }
    
    .shop-image-container {
        height: 25vh; /* さらに高さを減らす */
    }
    
    .shop-content {
        padding: 20px 15px; /* さらにパディングを減らす */
    }
    
    .shop-subtitle {
        margin-bottom: 15px; /* さらに下部マージンを減らす */
    }
    
    /* 店舗情報のギャップをさらに減らす */
    .shop-info-container {
        gap: 15px; /* さらにギャップを減らす */
    }
}