/* ページ全体の設定 */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

/* ヘッダー部分のスタイル */
header {
    position: relative; /* 相対位置を設定 */
    z-index: 5; /* 背景よりも前面に表示されるように設定 */
    text-align: center; /* 統一 */
    margin-bottom: 20px; /* 統一 */
}

/* ヘッダー部分 */
header, footer {
    background-color: rgba(0, 123, 255, 0.5); /* 0.8青色にやや透明度を加える */
    color: white;
    text-align: center;
    padding: 20px;
    z-index: 2; /* ヘッダーとフッターを前面に */
}

/* ヘッダー内のコンテナ */
.header-container {
    display: flex;
    justify-content: space-between; /* 左右のロゴを両端に配置 */
    align-items: center; /* 垂直方向に中央寄せ */
    padding: 10px 20px; /* パディングを追加 */
}

/* フッター部分 */
footer {
    background-color: rgba(0, 123, 255, 0.5); /* 背景色 */
    color: white; /* テキスト色 */
    text-align: center; /* 中央寄せ */
    padding: 20px; /* パディング */
    position: relative; /* 相対位置 */
    z-index: 10; /* 他の要素よりも前面に */
}


/* タイトル部分 */
.title {
    color: #FFFFFF; /* 文字色を白に設定 */
    font-size: 50px; /* フォントサイズを大きく設定 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* 文字に影を追加 */
}

.subtitle {
    color: #FFFFFF; /* サブタイトルも白色に設定 */
    font-size: 22px; /* サブタイトルのフォントサイズを調整 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* 影を追加 */
}

/* 背景画像セクション */
.image-section {
    position: fixed; /* 画像セクションを固定位置に */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('{{ url_for("static", filename="images/back4.png") }}');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    z-index: 1; /* 背景画像は最背面に配置 */
}

/* 商品リスト部分 */
.product-list {
    padding: 20px;
    position: relative;
    z-index: 2; /* 他の要素よりも前面に表示 */
}

/* 商品リスト部分 *//* 商品コンテナ */
.product-container {
    display: flex;
    flex-wrap: wrap; /* 折り返しを有効にする */
    justify-content: space-around; /* カードを均等に配置 */
    margin-bottom: 40px; /* 下部のマージンを増やして上下の間隔を広げる */
}

/* 商品カード */
.product-card {
    background-color: #ffffff;
    width: calc(15% - 12px); /* 5個並べるための幅を設定 */
    margin: 10px; /* 上下左右のマージンを設定（距離を大きくする） */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* シャドウを軽くする */
    border-radius: 5px; /* 角を少し丸くする */
    text-align: center;
    transition: transform 0.3s;
    z-index: 3;
    border: 3px solid rgba(0, 0, 0, 0.1); /* 薄いボーダーを追加 */
}

.product-card img {
    width: 100%; /* 画像の幅をカードに合わせる */
    height: auto; /* 高さを自動調整 */
}

.product-name p {
    padding: 3px; /* パディングを小さく設定 */
    font-size: 1.0em; /* フォントサイズを大きく設定 */
}

/* ホバー時のエフェクト */
.product-card:hover {
    transform: scale(1.05);
}

/* レスポンシブデザイン */
@media (max-width: 1024px) {
    .product-card {
        width: calc(23% - 10px); /* タブレットサイズで4個並べる */
    }
}

@media (max-width: 768px) {
    .product-card {
        width: calc(48% - 10px); /* スマートフォンサイズで2個並べる */
    }
}

@media (max-width: 480px) {
    .product-card {
        width: calc(100% - 10px); /* スマートフォンサイズで1個に表示 */
    }
}



/* セクション全体のセンタリング */
.extra-links, .video-section, .map-section, .filter-section {
    text-align: center;
    margin: 0 auto;
    position: relative; /* 相対位置を設定 */
    z-index: 2; /* 他の要素よりも前面に表示 */
}

/* ボタン */
.button, .filter-section button {
    display: inline-block;
    padding: 8px 15px; /* パディングを小さくする */
    border-radius: 5px;
    font-size: 16px; /* フォントサイズを小さくする */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.button {
    background-color: #ff6347;
    color: white;
}

.button:hover {
    background-color: #d9534f;
}

.filter-section button {
    background-color: #ff6347;
    color: white;
}

.filter-section button:hover {
    background-color: #e55347;
    transform: scale(1.05);
}

/* 地図セクション */
.map-section {
    height: 1000px; /* ビューポートの高さの80%に設定（必要に応じて調整） */
    overflow: hidden; /* オーバーフローを隠す */
    position: relative; /* z-indexを使用するために相対位置を設定 */
    z-index: 5; /* 他の要素より前面に表示 */
}

.map-container {
    width: 100%; /* コンテナの幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
}

iframe {
    width: 100%; /* iframeの幅をコンテナに合わせる */
    height: 100%; /* iframeの高さをコンテナに合わせる */
    border: none; /* 枠線をなしにする */
}

/* セクションタイトル */
.filter-section h2 {
    font-size: 2em;
    color: #007BFF;
    font-weight: bold;
    margin-bottom: 20px;
}

/* セレクトボックスのデザイン */
.filter-section select, .filter-section label {
    font-size: 1.2em;
    margin: 10px;
}

/* フィルターボタン */
.filter-section button {
    padding: 12px 24px;
    background-color: #ff6347;
    color: white;
}

/* アイコンセレクタのスタイル */
.filter-section .select-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* ボックスシャドウで立体感を出す */
.filter-section .filter-options {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin: 15px 0;
}

/* suggestion-linksのスタイル */
.suggestion-links {
    text-align: center; /* 中央寄せ */
    margin: 20px 0; /* 上下の余白 */
    position: relative; /* 相対位置を設定 */
    z-index: 6; /* 他の要素よりも前面に表示 */
}

.suggestion-links .button {
    display: inline-block; /* 自動幅調整 */
    padding: 10px 15px; /* パディングを調整 */
    min-width: 110px; /* 最小幅を設定（必要に応じて調整） */
    /* max-width: 80px; /* ボタンの最大幅を設定する（必要に応じて調整） */
    background-color: #007BFF; /* ボタンの背景色 */
    color: white; /* ボタンの文字色 */
    text-decoration: none; /* 下線を消す */
    border-radius: 5px; /* 角を丸くする */
    transition: background-color 0.3s, transform 0.3s; /* ホバー時の色変更をスムーズに */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* ボックスシャドウで立体感を追加 */
    font-size: 14px; /* フォントサイズ */
    margin: 0 5px; /* ボタン間のスペース */
    white-space: nowrap; /* テキストが折り返さないようにする */
    border: none; /* ボーダーをなくす（必要に応じて） */
}

.suggestion-links .button:hover {
    background-color: #0056b3; /* ホバー時の色 */
}

.suggestion-links .button:hover {
    background-color: #0056b3; /* ホバー時の色 */
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

/* スクロールバーのスタイル */
::-webkit-scrollbar {
    width: 27px; /* スクロールバーの幅 */
    height: 8px; /* スクロールバーの高さ */
}

/* スクロールバーのトラック（背景） */
::-webkit-scrollbar-track {
    background: #f4f4f4; /* トラックの背景色 */
    border-radius: 10px; /* トラックの角を丸くする */
}

/* スクロールバーのハンドル（動く部分） */
::-webkit-scrollbar-thumb {
    background: #007BFF; /* ハンドルの背景色を青に設定 */
    border-radius: 10px; /* ハンドルの角を丸くする */
}

/* ハンドルのホバー時 */
::-webkit-scrollbar-thumb:hover {
    background: #0056b3; /* ホバー時のハンドルの色を青の濃い色に設定 */
}

/* スムーズスクロールを有効にする */
html {
    scroll-behavior: smooth; /* スムーズスクロールを有効にする */
}

/* エラーメッセージのスタイル */
.error-message {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
    text-align: left;  /* テキストを左揃えにする */
    width: 350px; /* 幅を設定（必要に応じて調整） */
    position: absolute; /* 絶対位置を設定 */
    right: 40px; /* 右に20px配置 */
    top: 30%; /* 上から30%の位置に配置 */
    transform: translateY(-50%); /* 垂直方向に中央揃え */
    z-index: 10; /* 他の要素よりも前面に表示 */
}

/* 既存のスタイルがある場合はその下に追加 */
iframe {
    height: 800px; /* 必要に応じて調整 */
    width: 100%; /* 幅は100% */
    border: none; /* 枠線を削除 */
}

/* フッターリンク */
.footer-links {
    list-style-type: none;  /* 箇条書きのマーカーを無効にする */
    padding: 0;  /* パディングをリセット */
    margin: 0;  /* マージンをリセット */
}

/* フィルタオプション */
.filter-options {
    display: flex;
    align-items: center; /* アイコンとラベルを垂直方向に中央寄せ */
    flex-wrap: wrap; /* アイコンとフィルタ項目を折り返す */
    justify-content: flex-start; /* 左寄せ */
}

.icon-container {
    display: flex;
    flex-wrap: wrap; /* アイコンを折り返す */
    margin-right: 20px; /* アイコンとフィルタ項目の間のスペース */
}

.icon-example {
    width: 270px; /* デフォルトの幅 */
    height: 90px; /* デフォルトの高さ */
    margin-right: 10px; /* アイコン同士の間のスペース */
}

/* タブレットサイズ（768px以下） */
@media (max-width: 768px) {
    .icon-example {
        width: 200px; /* タブレットサイズ時の幅 */
        height: 70px; /* タブレットサイズ時の高さ */
    }
}

/* スマートフォンサイズ（480px以下） */
@media (max-width: 480px) {
    .icon-example {
        width: 150px; /* スマートフォンサイズ時の幅 */
        height: 50px; /* スマートフォンサイズ時の高さ */
    }
}

.logo {
    max-width: 130px; /* ロゴの最大幅を設定 */
    max-height: 100px; /* ロゴの最大高さを設定 */
    height: auto; /* 高さを自動調整 */
}

/* 左側のロゴ */
.left-logo {
    margin-right: 100px; /* タイトルとの間にスペースを追加 */
}

/* 右側のロゴ */
.right-logo {
    margin-left: 100px; /* タイトルとの間にスペースを追加 */
}

/* タブレットサイズのメディアクエリ */
@media (max-width: 768px) {
    .logo {
        max-width: 120px; /* タブレットサイズ時の最大幅を調整 */
        max-height: 60px; /* タブレットサイズ時の最大高さを調整 */
    }
}

/* スマートフォンサイズのメディアクエリ */
@media (max-width: 480px) {
    .logo {
        max-width: 100px; /* スマートフォンサイズ時の最大幅を調整 */
        max-height: 50px; /* スマートフォンサイズ時の最大高さを調整 */
    }
}

.tour-promotion {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.tour-flyer {
    max-width: 80%; /* 最大幅を80%に設定 */
    height: auto; /* 高さを自動調整 */
    margin: 20px auto; /* 上下のマージンを設定し、左右を中央寄せ */
    display: block; /* ブロック要素として表示 */
}

.tour-description {
    font-size: 18px;
    margin: 15px 0;
}

.signup-button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.signup-button:hover {
    background-color: #0056b3;
}
/* ボタン用のコンテナ */
.filter-section .button-container {
    width: 100%; /* ボタンコンテナの幅を100%に設定 */
    text-align: right; /* ボタンを右寄せ */
}

/* フィルタボタンのスタイル */
.filter-section .filter-button {
    padding: 12px 24px; /* パディングを設定 */
    background-color: #ff6347; /* 背景色 */
    color: white; /* テキスト色 */
    border: none; /* ボーダーをなくす */
    border-radius: 5px; /* 角を丸く */
    cursor: pointer; /* ポインタを表示 */
    transition: background-color 0.3s, transform 0.3s; /* ホバー時のエフェクト */
}

.filter-section .filter-button:hover {
    background-color: #e55347; /* ホバー時の色 */
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

#top, #map-section {
    color: #FFFFFF; /* 文字色を白に設定 */
    text-shadow: none; /* 影を消す */
    font-size: 24px; /* フォントサイズを調整 */
    margin: 20px 0; /* 上下の余白を追加 */
}