/* スプラッシュスクリーンのスタイル */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* フェードイン・フェードアウトのスタイル */
.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1s ease;
}

/* フェードイン・フェードアウトのクラス */
.visible .splash-content,
.visible .splash-tagline {
    opacity: 1;
}

.hidden .splash-content {
    opacity: 0;
    transition: opacity 0.75s ease;
}

/* 縦書きテキスト */
.splash-tagline {
    font-size: 24px;
    color: #333;
    font-family: 'ヒラギノ明朝', 'MS 明朝', serif;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 2;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity 1s ease 0.5s;
}

/* GIF表示コンテナ */
.walking-container {
    width: 100vw;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.walking-person-gif {
    width: 50px;
    height: auto;
}


/**************************************************
 *                                                *
 *     ヒーローセクション グレーの背景       *
 *                                                *
 **************************************************/

.hero-section {
    background: #f5f5f5;
    margin: -78px calc(50% - 50vw) 0 calc(50% - 50vw);
    padding: 3.2vh 10vw 4vh 10vw;
    z-index: -1005;
}

@media (max-width: 768px) {
    .hero-section {
       margin: -60px calc(50% - 50vw) 0 calc(50% - 50vw);
       padding: 3.2vh 3vw 3.4vh 3vw; 
    }
}

/**************************************************
 *                                                *
 *     グリッド       *
 *                                                *
 **************************************************/

/* グリッド全体の設定 */
.simple-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);  /* 常に2列 */
    grid-gap: 30px;
    background-color: white; /* 背景色 */
    padding: 30px 20px 0px 20px; /* 内側の余白 */
    border: 2px solid #ddd; /* 枠線 */
    border-radius: 6px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
    max-width: 1200px; /* グリッドの最大幅を設定 */
    margin: 0 auto; /* 中央に配置 */
}

/* グリッドアイテム */
.grid-item {
    text-align: center;
    opacity: 0;  /* 初期状態では非表示 */
    transform: translateY(50px);  /* 初期位置を下に設定 */
    transition: opacity 0.5s ease, transform 0.9s ease-out;  /* フェードとスライドのアニメーション */
    transition-delay: 0.5s;  /* アニメーションの開始を0.5秒遅らせる */
}

/* カードが表示された時 */
.grid-item.show {
    opacity: 1;  /* フェードイン */
    transform: translateY(0);  /* 元の位置にスライド */
}

/* 他のスタイルはそのまま */
.grid-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2; /* 3:1の横長アスペクト比 */
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}


.grid-item img:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.grid-item p {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 10px 0 5px;
    padding: 0 3px;
}

/* リンクのスタイル */
.grid-item a {
    text-decoration: none !important;
    color: inherit;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .simple-grid {
        grid-gap: 12px;
    }
}

@media (max-width: 480px) {
.simple-grid {
    grid-template-columns: repeat(3, 1fr);  /* 常に2列 */
}
    .grid-item p {
        margin-top: 0;
        padding-top: 1px;
    }
}

/**************************************************
 *                                                *
 *     タイトルの下線       *
 *                                                *
 **************************************************/

.upper-box {
    width: 100%; /* 画面いっぱいに広げる */
    border-bottom: 0.5px solid #000; /* ボックス全体の下線 */
    padding-bottom: -2em; /* 下線と内容の間に余白を追加 */    
}

.upper-title {
    margin: 0 auto; /* 中央揃え */
    text-align: left; /* テキストの左揃え */
}

#transition-section .upper-box {
    border-bottom: 0.5px solid white;
}

/**************************************************
 *                                                *
 *     もっと見るのブロック       *
 *                                                *
 **************************************************/
 .title-and-more {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直方向で中央揃えにするため */
}

.title {
    font-size: 24px; /* フォントサイズを24pxに設定 */
    font-weight: bold;
}

.more-link {
    font-size: 15px;
    color: #007bff; /* リンクの色 */
    text-decoration: none; /* 下線を消す */
    margin: 0 2em 0 0;
}

.more-link:hover {
    text-decoration: underline; /* ホバー時に下線をつける */
}


/**************************************************
 *                                                *
 *       「日常」を改行するコード                     *
 *                                                *
 **************************************************/

/* スマホ用のメディアクエリ */
@media screen and (max-width: 768px) {
    .break-sm {
        font-size: 15px; /* フォントサイズを変更 */
    }
}


/**************************************************
 *                                                *
 *     お店テーブル  .scroll-table-1     *
 *                                                *
 **************************************************/
 
 /************************************************************************
 *                                                                      *
 * ★★★ スクロールの機能的な面は scrollable-tables.js に記述しています ★★★         *
 *                                                                      *
 ************************************************************************/
 
.scrollable-table-1 {
    overflow-x: auto; /* 横スクロールを許可 */
    width: 100%; /* 親要素の幅に合わせる */
    margin-bottom: 20px;
    cursor: grab; /* ドラッグ可能であることを示すカーソル */
    user-select: none; /* テキスト選択を無効化 */
}

.scrollable-table-1.active {
    cursor: grabbing; /* ドラッグ中のカーソル */
}

.scrollable-table-1 table {
    min-width: 2850px; /* テーブル全体の幅を調整 */
    border-collapse: separate; /* 枠線を重ねずスペースを開けるための設定 */
    border-spacing: 10px; /* 列間を10px分広げる */
    user-select: none; /* テキスト選択を無効化 */
    margin-left: -0.34em; /* 左側のスペースを完全になくすために左マージンを調整 */
    margin-top: -25px; /* 上部のスペースも調整する */
}


.scrollable-table-1 thead th,
.scrollable-table-1 tbody td {
    width: 420px; /* 各セルの幅を400pxに固定 */
    text-align: left; /* 左揃えに変更 */
    user-select: none; /* テキスト選択を無効化 */
    word-wrap: break-word; /* 長い単語を折り返す */
    word-break: break-all; /* 長い単語を強制的に改行 */
    white-space: normal; /* 自然な改行を許可 */
}


/* 店名エリアのスタイル */
.scrollable-table-1 .store-name-row td {
    position: relative; /* 相対位置を使って内部要素を配置 */
    padding: 8px;
    font-weight: bold;
    font-size: 1.4em;
    max-width: 420px;
    text-align: left; /* 店名は左揃え */
}

/* 市町村名のスタイル */
.scrollable-table-1 .store-municipality {
    position: absolute; /* 絶対位置で市町村名を右揃えに */
    right: 1.5em; /* 右端から1emの位置に */
    bottom: 0; /* 下端に揃える */
    transform: translateY(-50%); /* 高さを調整 */
    font-size: 0.75em; /* 市町村名のフォントサイズを小さく */
    color: rgba(30, 30, 30, 0.85); /* しっかり目に見える黒系グレー */
    white-space: nowrap; /* 改行を防止 */
}

/* 画像エリアのスタイル */
.scrollable-table-1 .store-image-row .image-group {
    display: flex; /* 画像を横並びにする */
    justify-content: flex-start; /* 左揃えに変更 */
    width: 100%; /* 画像グループの幅を列いっぱいに設定 */
    max-width: 420px; /* 画像行の幅を制限 */
}

.scrollable-table-1 .store-image-row .image-group img {
    width: 49%; /* 2つの画像を並べるために幅を48%に設定 */
    height: auto;
    aspect-ratio: 4 / 3; /* 画像のアスペクト比を4:3に設定 */
    object-fit: cover; /* 画像が枠に収まるようにする */
    pointer-events: none; /* 画像がドラッグ対象にならないようにする */
    margin-right: 5px; /* 画像間に5pxの隙間を作成 */
}

.scrollable-table-1 .store-image-row .image-group img:last-child {
    margin-right: 0; /* 最後の画像には右のマージンを削除 */
}

/* キャッチフレーズエリアのスタイル */
.scrollable-table-1 .catchphrase-row td {
    color: #800000; /* 青色はそのまま */
    font-size: 1.2em; /* フォントサイズを小さくする */
    max-width: 420px; /* キャッチフレーズの幅を制限 */
    word-wrap: break-word; /* 長い単語を折り返す */
    text-align: left; /* 左揃え */
    vertical-align: top;
    padding: 7px 10px 5px 10px; /* 上下左右に10pxのパディングを追加 */
    margin: 7px 0 5px 0; /* 上に10px、下に2pxのマージンを設定 */
}

/* お店の説明エリアのスタイル */
.scrollable-table-1 .store-description-row td {
    font-size: 0.85em;
    color: #555;
    line-height: 1.65;
    max-width: 420px; /* 説明の幅を制限 */
    word-wrap: break-word; /* 長い単語を折り返す */
    text-align: left; /* 左揃え */
    vertical-align: top;
    padding: 5px 10px; /* 上下左右に10pxのパディングを追加 */
}

/* もっと見る列の幅を指定 */
.scrollable-table-1 .more-link {
    width: 200px; /* もっと見る列の幅を固定 */
    text-align: left;
    font-weight: bold;
    font-size: 0.85em;
    vertical-align: middle;
    margin-left: -40px; /* 第6列との隙間を調整する */
    position: relative; /* 相対位置での調整を可能に */
    top: -40px; /* 40px上に移動 */
    padding-left: 3em;
}

.scrollable-table-1 .more-link a {
    text-decoration: none;
    color: #007bff;
}

.scrollable-table-1 .more-link a:hover {
    text-decoration: underline;
}

/* お店データエリアのスタイル */
.scrollable-table-1 .store-data-row td {
    padding: 0 10px; /* パディングを追加 */
    vertical-align: top; /* 上揃えに */
    width: 400px; /* 行全体の幅を400pxに設定 */
    box-sizing: border-box; /* パディングを含めて計算 */
    position: relative;
}

/* 新しいコンテナ: 店舗情報と地図を囲む */
.scrollable-table-1 .store-data-container {
    display: flex; /* flexboxで配置 */
    justify-content: space-between; /* 要素間を適切にスペース */
    margin-top: 7px;
    margin-bottom: 0;
    width: 100%; /* コンテナ全体の幅を100%に */
    box-sizing: border-box; /* パディングを含めた計算 */
}

/* 店舗情報エリア */
.scrollable-table-1 .store-info {
    flex: 0 0 68%; /* 幅を68%に設定してマージン分を考慮 */
    font-size: 0.82em;
    color: #666;
    line-height: 2;
    text-align: left;
    box-sizing: border-box; /* パディングを含めて計算 */
    margin-right: 2%; /* 店舗情報と地図の間にスペースを追加 */
}

/* 地図エリア */
.scrollable-table-1 .store-map {
    flex: 0 0 29%; /* 幅を30%に設定 */
    text-align: center; /* 中央揃え */
    box-sizing: border-box; /* パディングを含めて計算 */
    margin-right: 0.5%; /* 店舗情報と地図の間にスペースを追加 */
}

.scrollable-table-1 .store-map img {
    width: 100%; /* 画像の幅を親要素に合わせる */
    height: auto;
}

/* SNSアイコンのスタイル */
.scrollable-table-1 .store-sns-row td a {
    margin-right: 20px; /* アイコン同士の間隔を10pxに設定 */
    color: #333; /* デフォルトのアイコンカラー */
    font-size: 1.4em; /* アイコンのサイズを少し大きく (変更: 1.2em → 1.4em) */
    text-decoration: none; /* リンクの下線を削除 */
}

/* SNSリンクエリアの左右余白を調整 */
.scrollable-table-1 .store-sns-row td {
    padding: 0 10px; /* 上下左右に10pxのパディング (キャッチフレーズと説明に揃える) */
    margin-top: 0;
    vertical-align: middle; /* 中央揃え */
    max-width: 400px; /* 幅を制限 */
}

/* アイコンにホバー時の効果 */
.scrollable-table-1 .store-sns-row td a:hover {
    color: #3498db; /* ホバー時に青色に変更 */
}

/* 各SNSアイコンの色をカスタマイズ */
.scrollable-table-1 .store-sns-row td a .fa-facebook-f { color: #3b5998; }
.scrollable-table-1 .store-sns-row td a .fa-twitter { color: #1DA1F2; }
.scrollable-table-1 .store-sns-row td a .fa-instagram { color: #E4405F; }
.scrollable-table-1 .store-sns-row td a .fa-youtube { color: #FF0000; }
.scrollable-table-1 .store-sns-row td a .fa-line { color: #00C300; }
.scrollable-table-1 .store-sns-row td a .fa-utensils { color: #FFA500; } /* オレンジ色のutensilsアイコン */

/* スマホ用メディアクエリ */
@media (max-width: 767px) {
    .scrollable-table-1 table { min-width: 2560px; }

    .scrollable-table-1 thead th, 
    .scrollable-table-1 tbody td {
        width: 380px;
    }

    /* サムネイル、キャッチフレーズ、説明、データ、SNSリンクの幅を380pxに調整 */
    .scrollable-table-1 .store-image-row .image-group,
    .scrollable-table-1 .catchphrase-row td,
    .scrollable-table-1 .store-description-row td,
    .scrollable-table-1 .store-data-row,
    .scrollable-table-1 .store-sns-row td {
        max-width: 380px;
    }

    /* スマホ用に画像のレイアウトを維持 */
    .scrollable-table-1 .store-image-row .image-group img {
        width: 48%; /* 2つの画像が並ぶ形を維持 */
        height: auto;
        margin-right: 4px; /* 画像間に小さな間隔を設定 */
    }

    .scrollable-table-1 .store-image-row .image-group img:last-child {
        margin-right: 0;
    }

    /* SNSリンクエリアをコンパクトに */
    .scrollable-table-1 .store-sns-row td {
        padding: 5px;
        font-size: 0.9em;
    }

    .scrollable-table-1 .store-sns-row td a {
        font-size: 2em;
        margin-right: 20px;
    }

    .scrollable-table-1 .store-sns-row td {
        padding: 20px;
    }

    /* タイトルと説明の間のスキマを小さく */
    .scrollable-table-1 .store-name-row td {
        padding-top: 1em;
    }
}



/**************************************************
 *                                                *
 *     お土産テーブル   .scroll-table-2    *
 *                                                *
 **************************************************/


/************************************************************************
 *                                                                      *
 * ★★★ スクロールの機能的な面は scrollable-tables.js に記述しています ★★★         *
 *                                                                      *
 ************************************************************************/


.scrollable-table-2 {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 20px;
    cursor: grab;
    user-select: none;
}

.scrollable-table-2.active {
    cursor: grabbing;
}

.scrollable-table-2 table {
    min-width: 2000px;
    border-collapse: separate; /* ボーダーを分離 */
    user-select: none;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    margin: 0; /* テーブル全体のマージン */
    padding: 0; /* テーブル全体のパディング */
}

.scrollable-table-2 thead th, .scrollable-table-2 tbody td {
    margin: 0; /* マージンなしに設定 */
    width: 200px;
    user-select: none;
    box-sizing: border-box; /* パディングとボーダーを含めた幅と高さにする */
}

.product-image {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* 商品名行のスタイル */
.product-name-row td {
    font-weight: bold;
    font-size: 16px;
    text-align: left;
    color: #333;
    margin: 5px 0; /* 行間を少し詰める */
    padding: 5px 8px; /* 上下左右のパディングを指定 */
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    vertical-align: top; /* テキストをセルの上部に揃える */
}

/* 市町村名行のスタイル */
.municipality-row td {
    font-size: 14px;
    text-align: left;
    color: #333;
    margin: 5px 0; /* 行間を少し詰める */
    padding: 5px 8px; /* 上下左右のパディングを指定 */
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* 評価行のスタイル */
.rating-row td {
    margin: 2px 0; /* 行間をさらに少し詰める */
    padding: 3px 8px; /* 上下左右のパディングをさらに詰める */
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* 値段行のスタイル */
.price-row td {
    color: #e74c3c;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    margin: 3px 0; /* 行間をさらに少し詰める */
    padding: 3px 8px; /* 上下左右のパディングをさらに詰める */
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}


/* ハッシュタグ行のスタイル */
.hashtag-row td {
    padding: 0; /* セル自体のパディングを削除 */
    border: none; /* ハッシュタグのボーダーのみ使用 */
}

/* ハッシュタグを囲む div のスタイル */
.hashtag-wrapper {
    font-size: 12px;
    text-align: left;
    color: #3498db;
    padding: 5px 6px;
    border: 1.4px solid #000 !important; /* ボーダーの色を黒に変更、importantを指定 */
    border-radius: 5px !important; /* 角を丸くする */
    margin: 10px !important; /* 上下の余白を確保 */
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* もっと見るリンクのスタイル */
.more-link {
    width: 200px;
    text-align: left;
    font-weight: bold;
    font-size: 0.8em;
    vertical-align: middle;
    margin-left: -40px;
    position: relative;
    top: -20px;
    padding-left: 3em;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.more-link a {
    text-decoration: none;
    color: #007bff;
}

.more-link a:hover {
    text-decoration: underline;
}

/**************************************************
 *                                                *
 *     観光記事テーブル  .scroll-table-3     *
 *                                                *
 **************************************************/
 
.scrollable-table-3 {
    overflow-x: auto; /* 横スクロールを許可 */
    width: 100%;
    margin-bottom: 20px;
    cursor: grab;
    user-select: none;
}

.scrollable-table-3.active {
    cursor: grabbing;
}

/* テーブルの基本設定 */
.scrollable-table-3 table {
    min-width: 2520px; /* テーブル全体の幅 */
    border-collapse: collapse;
    user-select: none;
}

.scrollable-table-3 thead th, 
.scrollable-table-3 tbody td {
    padding: 10px;
    border: 1px solid #ccc;
    width: 360px; /* 各列の幅 */
    user-select: none;
}

.scrollable-table-3 .travel-thumbnail {
    position: relative;
    width: 100%;
    height: 300px; /* 画像フレームの固定高さを設定 */
    overflow: visible; /* 画像が枠をはみ出さないようにする */
    text-align: center;
    margin-bottom: 40px;
}

.scrollable-table-3 .travel-thumbnail img {
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover; /* 枠に画像を収める */
    border-radius: 10px; /* 角丸設定 */
    border: 1.5px solid #131313; /* ボーダー設定 */
}

.scrollable-table-3 .travel-thumbnail .travel-name {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    background-color: #ffffff;
    padding: 4px 0;
    border-radius: 30px;
    font-size: 1.2em;
    color: #444444;
    text-align: center;
    font-family: 'Zen Kurenaido', sans-serif;
    border: 1.5px solid #131313;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    text-decoration: none; /* 下線を削除 */
}

/* 観光地の説明エリアの文字サイズを小さく */
.scrollable-table-3 .travel-description-row td {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 300; /* 300で細め */
    font-size: 0.9em;
    color: #666666; /* 薄めの色で視覚的に細く */
}



.scrollable-table-3 .travel-thumbnail .travel-name .arrow-icon {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    color: #444444;
}



/* スマホ用メディアクエリ */
@media (max-width: 767px) {
    .scrollable-table-3 {
        padding-bottom: 18px;
    }
    .scrollable-table-3 table {
        min-width: 2100px;
        border-collapse: separate;
        border-spacing: 20px 0;
    }
    
    /* 最初の列の左側のスペースを削除 */
    .scrollable-table-3 tbody td:first-child,
    .scrollable-table-3 thead th:first-child,
    .scrollable-table-3 .travel-image-row td:first-child {
        position: relative;
        left: -8px; /* 左側の余白を削除 */
    }

    .scrollable-table-3 .travel-thumbnail,
    .scrollable-table-3 .travel-name-row td,
    .scrollable-table-3 .travel-description-row td,
    .scrollable-table-3 .travel-catchphrase-row td {
        max-width: 380px;
    }

    .scrollable-table-3 .travel-thumbnail img {
        width: auto;
        height: 100%;
        object-fit: cover;
    }
}



 /**************************************************
 *                                                *
 *     YouTube動画テーブル  .scroll-table-4     *
 *                                                *
 **************************************************/

.scrollable-table-4 {
    overflow-x: auto; /* 横スクロールを許可 */
    width: 100%;
    margin-bottom: 20px;
    cursor: grab;
    user-select: none;
}

.scrollable-table-4.active {
    cursor: grabbing;
}

.scrollable-table-4 table {
    min-width: 2520px; /* テーブル全体の幅を2520pxに設定 */
    border-collapse: collapse;
    user-select: none;
}

.scrollable-table-4 thead th, 
.scrollable-table-4 tbody td {
    padding: 10px;
    border: 1px solid #ccc;
    width: 360px; /* 各列の幅を360pxに設定 */
    user-select: none;
}

/* 16:9の比率を保つ動画サムネイルエリアのスタイル */
.scrollable-table-4 .movie-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9; /* 16:9のアスペクト比 */
    overflow: hidden;
    text-align: center; /* 画像を中央揃え */
}

.scrollable-table-4 .movie-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* 動画タイトルのスタイル */
.scrollable-table-4 .movie-title {
    vertical-align: top;
    font-weight: bold;
    font-size: 1em;
    color: #444444;
    padding: 10px 10px 5px 10px; /* パディングを小さく調整 */
    text-align: left;
    margin: 5px auto; /* マージンを小さく調整 */
    line-height: 1.8; /* 行間を少し大きく設定 */
}

/* 動画の説明エリア */
.scrollable-table-4 .movie-description {
    vertical-align: top;
    font-family: "Roboto", "Arial", sans-serif; /* フォントを変更 */
    font-size: 0.8em;
    color: #555;
    line-height: 1.5;
    text-align: left;
    padding: 10px 10px; /* パディングを小さく調整 */
    max-width: 360px;
    margin: 10px auto; /* マージンを小さく調整 */
}

/* ハッシュタグエリア */
.scrollable-table-4 .movie-hashtag {
    font-size: 0.9em;
    color: #3498db;
    text-align: left;
}

/* もっと見る列の幅を指定 */
.scrollable-table-4 .more-link {
    width: 200px;
    text-align: left;
    font-weight: bold;
    font-size: 0.8em;
    vertical-align: middle;
    margin-left: -40px;
    position: relative;
    top: -40px;
    padding-left: 3em;
}

.scrollable-table-4 .more-link a {
    text-decoration: none;
    color: #007bff;
}

.scrollable-table-4 .more-link a:hover {
    text-decoration: underline;
}

/* スマホ用メディアクエリ */
@media (max-width: 767px) {
    .scrollable-table-4 {
        padding-bottom: 20px;
    }
    .scrollable-table-4 table {
        min-width: 2100px; /* スマホ用に全体幅を2100pxに */
    }

    .scrollable-table-4 thead th, 
    .scrollable-table-4 tbody td {
        width: 380px; /* 各列の幅を380pxに設定 */
    }

    /* サムネイル、タイトル、説明、ハッシュタグの幅を380pxに調整 */
    .scrollable-table-4 .movie-thumbnail,
    .scrollable-table-4 .movie-title,
    .scrollable-table-4 .movie-description,
    .scrollable-table-4 .movie-hashtag {
        max-width: 380px;
    }

    /* スマホ用に画像にマージンとパディングを追加 */
    .scrollable-table-4 .movie-thumbnail img {
        margin: 10px auto; /* 上下左右にマージンを追加 */
        padding: 5px; /* 画像周囲にパディングを追加 */
        width: auto;
        height: 100%;
        object-fit: cover;
    }

    /* スマホ用にタイトルと説明の間のスキマを小さく */

     .scrollable-table-4 .movie-title {
        padding-top: 1em;
    }
}


 /**************************************************
 *                                                *
 *     趣味テーブル  .scroll-table-5     *
 *                                                *
 **************************************************/
 
.scrollable-table-5 {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 20px;
    cursor: grab;
}

.scrollable-table-5.active {
    cursor: grabbing;
}

.scrollable-table-5 table {
    min-width: 2350px;
    border-collapse: separate;
    border-spacing: 25px 0; /* 各セル間の水平余白を25pxに設定 */
    position: relative; /* テーブル全体を相対位置に */
    left: -25px; /* テーブル全体を左に25px移動 */
}

.scrollable-table-5 th {
    padding-top: 15px;
}

.scrollable-table-5 thead th, 
.scrollable-table-5 tbody td {
    width: 320px;
    box-sizing: border-box;
    user-select: none;
}


/* 画像エリアのスタイル */
.scrollable-table-5 .hobby-image-wrapper {
    position: relative;
    width: 100%;
    height: 250px;
    margin-top: 20px;
    border-radius: 3px;
    border: 1.5px solid rgba(51, 51, 51, 0.5);
}

.scrollable-table-5 .hobby-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    pointer-events: none;
}

/* タグエリア */
.scrollable-table-5 .hobby-tag {
    position: absolute;
    top: -30px;
    left: 0;
    background-color: #a6d3c8;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 15px;
    width: 120px;
    text-align: center;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    border-top: 1.5px solid rgba(51, 51, 51, 0.5);
}

/* タグ別の色 */
.scrollable-table-5 .hobby-cooking { background-color: #e74c3c; }
.scrollable-table-5 .hobby-fitness { background-color: #3498db; }
.scrollable-table-5 .hobby-article { background-color: #2ecc71; }
.scrollable-table-5 .hobby-pc { background-color: #f1c40f; }
.scrollable-table-5 .hobby-blog { background-color: #9b59b6; }
.scrollable-table-5 .hobby-game { background-color: #e67e22; }

/* 記事タイトル行のスタイル */
.scrollable-table-5 .hobby-title-row td {
    font-weight: bold;
    font-size: 16px; /* タイトルを強調 */
    text-align: left;
    line-height: 1.8;
    color: #333;
    padding: 1em 8px; /* タイトルの余白を最小限に */
    vertical-align: middle;
}

/* 概要行のスタイル */
.scrollable-table-5 .hobby-description-row td {
    font-size: 0.9em; /* 説明部分は標準サイズ */
    text-align: left;
    color: #555; /* 説明を少し落ち着いた色に */
    padding: 3px 8px; /* 説明の余白を最小限に */
    word-wrap: break-word;
}

/* もっと見るリンク */
.scrollable-table-5 .more-link {
    width: 200px;
    text-align: left;
    font-weight: bold;
    font-size: 0.9em;
    margin-left: -40px;
    position: relative;
    top: -20px;
    padding-left: 2em;
}

.scrollable-table-5 .more-link a {
    text-decoration: none;
    color: #007bff;
}

.scrollable-table-5 .more-link a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .scrollable-table-5 table {
        left: -20px; /* スマホ向けにテーブル全体の移動を解除 */
    }
}


/**************************************************
 *                                                *
 *     スクロールバーを非表示       *
 *                                                *
 **************************************************/

/**************************************************
 *                                                *
 *     スクロールバーをスマホで表示       *
 *                                                *
 **************************************************/

/* デフォルトでスクロールバーを非表示 */
.scrollable-table-1::-webkit-scrollbar,
.scrollable-table-2::-webkit-scrollbar,
.scrollable-table-3::-webkit-scrollbar,
.scrollable-table-4::-webkit-scrollbar,
.scrollable-table-5::-webkit-scrollbar {
    display: none; /* スクロールバーをデフォルトで非表示 */
}

/* スマホ専用のスタイル */
@media screen and (max-width: 768px) {
    .scrollable-table-1::-webkit-scrollbar,
    .scrollable-table-3::-webkit-scrollbar,
    .scrollable-table-4::-webkit-scrollbar {
        display: block; /* スマホでスクロールバーを表示 */
        height: 6px; /* 縦スクロールバーの太さを調整 */
    }

    /* スクロールバーのトラックのスタイル */
    .scrollable-table-1::-webkit-scrollbar-track,
    .scrollable-table-3::-webkit-scrollbar-track,
    .scrollable-table-4::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.04); /* 非常に薄い灰色で透明感を追加 */
        border-radius: 1px; /* 角を少し丸くする */
    }

    /* スクロールバーのスライダー（親指）のスタイル */
    .scrollable-table-1::-webkit-scrollbar-thumb,
    .scrollable-table-3::-webkit-scrollbar-thumb,
    .scrollable-table-4::-webkit-scrollbar-thumb {
        background: rgba(100, 80, 80, 0.4); /* スクロールバーの色 */
    }
}

/**************************************************
 *                                                *
 *     ★評価       *
 *                                                *
 **************************************************/
 
 /* 星全体のスタイル */
.rating {
    font-size: 18px; /* 星の大きさ */
    text-align: center; /* 星を中央に配置 */
}

.ore-log {
    font-size: 12px; /* 俺ログのフォントサイズを小さく設定 */
    vertical-align: middle; /* 星とのバランスを取る */
}


/**************************************************
 *                                                *
 *     01 〇〇の旅などのタイトル部分       *
 *                                                *
 **************************************************/

/*  セクションタイトルに関係ある所  */
.fude {
    position: relative; /* 擬似要素のために相対位置に設定 */
    display: inline-block; /* 幅をテキストに合わせる */
}

.fude::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1.2em; /* テキストの下に少し余白を持たせて配置 */
    width: 102%;
    height: 20px; /* 筆線画像の高さを指定 */
    background: url('https://food.chudooon.com/wp/wp-content/uploads/2024/10/b500b06a8bfeaa05b783e0c69fdb1a54.png') no-repeat;
    background-size: contain; /* 筆線画像を枠内にフィットさせる */
    background-position: center; /* 筆線が中央に表示されるようにする */
    right: -0.5em; /* 右側にはみ出すように調整 */
}


.fude2 {
    position: relative; /* 擬似要素のために相対位置に設定 */
    display: inline-block; /* 幅をテキストに合わせる */
}

.fude2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1.2em; /* テキストの下に少し余白を持たせて配置 */
    width: 102%;
    height: 20px; /* 筆線画像の高さを指定 */
    background: url('https://food.chudooon.com/wp/wp-content/uploads/2024/10/e6761467a37e9dc40b9e60b1b01d6929.png') no-repeat;
    background-size: contain; /* 筆線画像を枠内にフィットさせる */
    background-position: center; /* 筆線が中央に表示されるようにする */
    right: -0.5em; /* 右側にはみ出すように調整 */
}

.fz-36px{
    position: relative;
    top: -0.2em; /* テキストを少し引き上げる */
}

.below-fude {
    font-size: 21px; /* フォントサイズを24ピクセルに設定 */
    marign: 30px 30px 15px 0px;
    padding: 30px 20px 20px 0px;
    font-weight: 700; /* 太字 */
}

@media only screen and (max-width: 480px) {
  .fude {
    position: relative; /* 擬似要素のために相対位置に設定 */
    display: block; /* ブロック要素に変更 */
    text-align: center; /* テキストを中央に配置 */
  }
  .fude2 {
    position: relative; /* 擬似要素のために相対位置に設定 */
    display: block; /* ブロック要素に変更 */
    text-align: center; /* テキストを中央に配置 */
  }
  .below-fude {
    font-size: 19px; /* モバイル時のフォントサイズを指定 */
  }
    .line1, .line2 {
    display: block; /* 各行をブロック表示にして強制的に改行 */
  }

  .line1 {
    margin-bottom: 10px; /* 行間に余白を追加 */
  }
}


/**************************************************
 *                                                *
 *     YouTube紹介部分       *
 *                                                *
 **************************************************/

/* 全幅セクション */
.full-width-section {
    position: relative;
    margin: -5vh calc(50% - 50vw) 10vh calc(50% - 50vw);
    width: 100vw;
    padding: 5vh 0 20vh 0; /* 上部の余白 */
    z-index: 0;
    // background: url('https://food.chudooon.com/wp/wp-content/uploads/2024/10/25635388-scaled.jpg') repeat center center;
    background-color: #fffacd; /* 薄い黄色 */
}

/* 特定のh3要素に装飾を適用しないようにする */
.full-width-section h3 {
    border: none !important;     /* 境界線を解除 */
    box-shadow: none !important; /* ボックスシャドウを解除 */
}

/* タブレット向け (幅768px以下) */
@media (max-width: 768px) {
    .full-width-section {
        padding-top: 5vh; /* 少し減らす */
        margin-top: -5vh; /* 同じく引き上げを調整 */
        padding-bottom: 5vh; /* 補填する分も同じく調整 */
    }
}

/* スマートフォン向け (幅480px以下) */
@media (max-width: 480px) {
    .full-width-section {
        padding-top: 4.5vh; /* スマホではさらに小さく */
        margin-top: -4.5vh; /* 背景を120px引き上げる */
        padding-bottom: 4.5vh; /* 補填も120pxに */
    }
}



/**************************************************
 *                                                *
 *    北海道地図       *
 *                                                *
 **************************************************/

/* 北海道地図 */
.image-container {
    display: grid;  /* グリッドで画像を重ねる */
    width: 100%;  /* コンテナの幅を100%に */
    max-width: 800px; /* 最大幅を1200pxに設定 */
    margin: 0 auto;   /* コンテナを中央寄せ */
    position: relative;  /* 他の要素に影響を与えないようにする */
    overflow: hidden;  /* コンテナ外に画像が出ないようにする */
}

.image-bottom {
    grid-area: 1 / 1;  /* グリッドの同じ場所に配置 */
    width: 100%;
    height: auto;
}

.image-top {
    grid-area: 1 / 1;  /* グリッドの同じ場所に配置 */
    width: 100%;
    height: auto;
    opacity: 0;  /* 初期状態では上の画像を非表示 */
    transition: opacity 1s ease-in-out;  /* フェードアニメーションを1秒で実行 */
    transition-delay: 0.3s;  /* 遅延0.3秒を追加 */
}

/* スマホ向けに調整 */
@media (max-width: 768px) {
    .image-container {
        padding: 5vh 0;
        width: 105vw;  /* ビューポートの幅いっぱいに */
        margin: 0 calc(50% - 52.5vw) 0 calc(50% - 52.5vw);
    }
    .image-bottom, .image-top {
        width: 105vw;  /* 横幅いっぱいに広げる */
    }
}


/**************************************************
 *                                                *
 *    カニが動く    *
 *                                                *
 **************************************************/

 /* カニ関係 */

.crab {
  width: 5.5vw;  /* ビューポート幅の20% */
  height: calc(5.5vw * 80 / 87);  /* 比率に基づいた高さ */
  background: url('https://food.chudooon.com/wp/wp-content/uploads/2024/10/crab.png') no-repeat;
  background-size: contain;
  position: absolute;
  top: 28%;
  left: 18.7%;
  z-index: 9999;
  animation: jumpCrab 3s ease infinite;
}

@media (max-width: 768px) {
  .crab {
    top: 33%;
    left: 21%;
    width: 10vw;  /* スマホ向けにサイズを大きくする */
    height: calc(10vw * 80 / 87);
  }
}

@keyframes jumpCrab {
  0%, 10% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-1vw);  /* 画面幅に対して1vwのジャンプ */
  }
  30% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-1vw);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}


/**************************************************
 *                                                *
 *    YouTube部分のカルーセル       *
 *                                                *
 **************************************************/

/* 手動スライダー */
.slider1 {
  display: flex;
  margin: 0 calc(50% - 50vw); /* 左右のマージンを調整 */
  width: 100vw;
  height: auto; /* 高さを調整して画像に合った大きさにする */
  overflow: hidden;
  position: relative; /* 相対位置を設定 */
}
.slider1 ul {
  display: flex;
  padding: 0;
  margin: 0;
}
.slider1 li {
  width: 400px; /* 画像の横幅を大きくする */
  list-style: none;
}
.slider1 ul:first-child {
  animation: slide1 200s -100s linear infinite; /* アニメーションのスピードを調整 */
}

.slider1 ul:last-child {
  animation: slide2 200s linear infinite; /* アニメーションのスピードを調整 */
}

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}



/**************************************************
 *                                                *
 *   SNSアイコン       *
 *                                                *
 **************************************************/
 .ytb {
    text-align: center;
    margin: 20px 0 50px 0;
}

/* SNSアイコン全体のスタイル */
.social-icons {
    display: flex;
    gap: 15px; /* アイコン同士の間隔 */
    justify-content: center;
    align-items: center;
    margin: 20px 0 40px 0;
}

.social-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px; /* アイコンを垂直中央に揃える */
    transition: transform 0.3s ease, color 0.3s ease; /* ホバーアニメーション */
    font-size: 36px; /* アイコンのサイズを統一 */
}

.social-icons a {
    position: relative;
    z-index: 1; /* アイコンを他の要素の前面に配置 */
    pointer-events: auto; /* クリックを有効化 */
}

/* 各SNSのブランドカラー */
.facebook {
    color: #4267B2; /* Facebookの青色 */
}

.x {
    color: #000000; /* X (旧Twitter)の黒色 */
}

.instagram {
    color: #E1306C; /* Instagramのピンク色 */
}

.youtube {
    color: #FF0000; /* YouTubeの赤色 */
}

/* ホバー時のズーム効果 */
.social-icon:hover {
    transform: scale(1.2); /* アイコンをズーム */
}


/**************************************************
 *                                                *
 *    ビデオ囲い       *
 *                                                *
 **************************************************/

/* ビデオ囲いを色違いのボックスにする */
.section-a {
    border: 2px solid #000; /* 黒いボーダーのみ */
    border-radius: 15px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 影を追加して立体感を出す */
    overflow: hidden; /* はみ出しを禁止 */
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari対応のクリッピング */
    width: 88%; /* 幅の調整 */
    max-width: 1000px; /* 最大幅を1000pxに設定 */
    padding: 0;
    margin: 20px auto; /* 中央に配置 */
    background-color: #fff; /* 背景色を白に設定 */
}

/* スマホ用のメディアクエリ */
@media only screen and (max-width: 768px) {
    .section-a {
        width: 100%; /* 幅を画面いっぱいに */
        margin: 0; /* 左右の余白を削除 */
        border-radius: 10px; /* 角の丸みをなくして画面いっぱいに */
    }
}

/**************************************************
 *                                                *
 *    ビデオのスタイル     *
 *                                                *
 **************************************************/

/* ビデオのスタイル */
#top-video {
    width: 100%; /* 親要素に合わせてフル幅 */
    height: auto;
    object-fit: cover; /* アスペクト比を維持しつつ、要素のサイズにフィットさせる */
    display: block;
    margin: 0;
    padding: 0;
}


/**************************************************
 *                                                *
 *   テキストのサイズ感       *
 *                                                *
 **************************************************/


@media (min-width: 1024px) {
    .txt-sizing {
        font-size: 40px; /* デスクトップ向けのフォントサイズ */
    }
}

/* タブレット用（幅768px以上1023px以下） */
@media (min-width: 768px) and (max-width: 1023px) {
    .txt-sizing {
        font-size: 40px; /* タブレット向けのフォントサイズ */
    }
}

/* スマートフォン用（幅767px以下） */
@media (max-width: 767px) {
    .txt-sizing {
        font-size: 25px; /* スマートフォン向けのフォントサイズ */
    }
}


/**************************************************
 *                                                *
 *   スペースのサイズ感       *
 *                                                *
 **************************************************/

/* デスクトップ用（幅1024px以上） */
@media (min-width: 1024px) {
    .mobile-space {
        height: 90px; /* デスクトップ向けのスペーサーの高さ */
    }
}

/* タブレット用（幅768px以上1023px以下） */
@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-space {
        height: 16vh; /* タブレット向けのスペーサーの高さ */
    }
}

/* スマートフォン用（幅767px以下） */
@media (max-width: 767px) {
    .mobile-space {
        height:16vh; /* スマートフォン向けのスペーサーの高さ */
    }
}




/**************************************************
 *                                                *
 *   宇宙の「手前の背景」       *
 *                                                *
 **************************************************/

.full-screen-bg {
    background-color: #f5f5f5;
    position: relative;
    margin: -25vh calc(50% - 50vw) 10vh calc(50% - 50vw);
    width: 100vw;
    padding: 25vh 0 10vh 0; /* 上部の余白 */
    z-index: -1;
}



/**************************************************
 *                                                *
 *    手前部分と宇宙部分のコンテンツエリア       *
 *                                                *
 **************************************************/


.inside-block {
    position: relative;
    max-width: 1200px; /* Cocoonの1カラム広いレイアウトに合わせた最大幅 */
    margin: 0 auto; /* 自動で左右を中央寄せ */
    padding: 20px; /* コンテンツ内の余白を追加 */
    z-index: 1;
}

@media (max-width: 1024px) {
    .inside-block {
        max-width: 95%; /* タブレットや小型デバイス向けに幅を調整 */
        padding: 20px; /* 余白を維持 */
    }
}

@media (max-width: 768px) {
    .inside-block {
        max-width: 100%; /* 画面幅全体を使用 */
        padding: 15px; /* モバイル向けに余白をやや減少 */
    }
}

@media (max-width: 480px) {
    .inside-block {
        max-width: 100%; /* モバイルでは全幅を使用 */
        padding: 10px; /* 余白をさらに減少してスペースを確保 */
    }
}



@keyframes glow {
    0% {
        opacity: 0; /* 消えている状態（インターバル） */
    }
    12.5% {
        opacity: 0.8; /* 0.5秒で出現 */
    }
    62.5% {
        opacity: 0.8; /* 2.5秒まで見えている状態を維持 */
    }
    75% {
        opacity: 0; /* 3秒までに消失 */
    }
    100% {
        opacity: 0; /* 4秒まで消えたまま（インターバル） */
    }
}

.glow-effect {
    opacity: 0;
    pointer-events: none;
    animation: glow 4s ease-in-out infinite; /* 4秒で出現⇒見える⇒消失⇒インターバル */
}


/**************************************************
 *                                                *
 *    But Where is Everyone の装飾       *
 *                                                *
 **************************************************/
 

.universe-guide {
    border: 3px solid;
    border-image: linear-gradient(135deg, #d1d1d1, #f0f0f0, #b8b8b8, #e5e5e5, #a1a1a1) 1; /* メタリックな光沢のあるグラデーション */
    border-radius: 5px;
    width: 100%;  /* 親要素に対する相対サイズ */
    max-width: 600px;  /* 最大幅を設定 */
    height: auto;  /* 高さは自動調整 */
    display: block;
    margin: 0 auto; /* 中央揃え */
    transform: translateY(50px);  /* 初期位置を下に設定 */
    transition: transform 0.9s ease-out, box-shadow 0.9s ease-out;
    opacity: 0; /* 初期状態は非表示 */
    position: relative;
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.3); /* 少し強めの黄色発光 */
}

.universe-guide.show {
    transform: translateY(0);  /* 元の位置にスライド */
    opacity: 1; /* フェードイン */
}

.universe-guide:hover {
    transform: scale(1.05);
    border-image: linear-gradient(135deg, #f5f5f5, #ffffff, #dcdcdc, #e8e8e8, #b0b0b0) 1; /* ホバー時にさらに光沢感を強調 */
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.4); /* ホバー時に黄色の発光を少し強調 */
}

/* メディアクエリ - 画面幅768px以下 (タブレット用) */
@media (max-width: 768px) {
    .universe-guide {
        width: 95%;  /* 幅を90%に拡大 */
        max-width: 500px; /* 最大幅を小さめに設定 */
    }
}

/* メディアクエリ - 画面幅480px以下 (スマホ用) */
@media (max-width: 480px) {
    .universe-guide {
        width: 95%;  /* 幅をさらに95%に */
        max-width: 400px;  /* スマホ用に最大幅をさらに小さく */
    }
}



/**************************************************
 *                                                *
 *    終盤の縦書き       *
 *                                                *
 **************************************************/
 
.ending-walk {
    font-family: 'ヒラギノ明朝', 'MS 明朝', serif;
    text-align: center; /* 中央に配置 */
    width: 100%; /* 親要素内で中央に配置 */
    height: 100%; /* 親要素内で高さを設定 */
    display: flex;
    flex-direction: column; /* 縦に要素を並べる */
    justify-content: center; /* 縦方向の中央揃え */
    align-items: center; /* 横方向の中央揃え */
    transition: opacity 1s ease 0.5s; /* opacityに対して1秒かけて、0.5秒遅延のトランジション */
}

.ending-vertical-text {
    writing-mode: vertical-rl; /* テキストを縦書きに */
    font-size: 24px; /* フォントサイズを24pxに設定 */
}

.ending-walking-gif {
    margin-top: 20px; /* テキストとGIFの間にスペースを追加 */
    width: 50px; /* GIFの幅を調整 */
    height: auto;
}


/**************************************************
 *                                                *
 *    アフィリエイト広告に関するスタイル    *
 *                                                *
 **************************************************/
 
a[href*="//af.moshimo.com"], img[src*="//image.moshimo.com"] {
    z-index: 10000 !important;
    position: relative;
    opacity: 1 !important;
}