/* ====================================
 * CSS START
 * ==================================== */

/* 基本リセットとフォント設定 */
body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: rgb(244, 247, 246);
    color: #000000;
    line-height: 1.6;
}

/* ヘッダー */
header {
    background-color: #87e7b0; /* 緑色 */
    color: #000000;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
    margin: 0;
    font-size: 2em;
}

header p {
    font-size: 1.1em;
}

/* メインコンテンツ */
main {
    padding: 20px;
    max-width: 1200px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

section {
    margin-bottom: 40px;
}

h2 {
    color: #2e7d32; /* 濃い緑色 */
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.8em;
}

/* アレルギー絞り込みセクション */
.allergens-filter .filter-container {
    background-color: #cbf266; /* 薄い緑の背景 */
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.allergens-filter .allergen-group {
    margin-bottom: 15px; /* グループ間の間隔 */
}

.allergens-filter .allergen-group h3 {
    font-size: 1.1em;
    color: #000000;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px dashed #c8e6c9; /* 軽めの区切り線 */
    padding-bottom: 5px;
}

.allergens-filter .filter-options {
    display: flex;
    flex-wrap: wrap; /* 小さい画面で折り返す */
    gap: 10px; /* チェックボックス間のスペース */
}

.allergens-filter label {
    background-color: #e8f5e9; /* 薄い緑 */
    padding: 8px 12px; /* パディングを少し小さく */
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    border: 1px solid #c8e6c9;
    font-size: 0.9em; /* 文字サイズを少し小さく */
    white-space: nowrap; /* チェックボックスとテキストを改行させない */
}

.allergens-filter label:hover {
    background-color: #dcedc8;
}

.allergens-filter input[type="checkbox"] {
    margin-right: 6px; /* チェックボックスと文字の間隔を調整 */
    transform: scale(1.1); /* チェックボックスを少し大きく */
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap; /* ボタンが多い場合に折り返す */
    gap: 15px;
    margin-top: 20px;
    justify-content: center; /* ボタンを中央寄せ */
}

.filter-button {
    background-color: #4CAF50; /* 緑色 */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 25px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.filter-button:hover {
    background-color: #43A047; /* 少し濃い緑 */
    transform: translateY(-2px);
}

.filter-button.include {
    background-color: #ff2800; /* 青色 */
}
.filter-button.include:hover {
    background-color: #ff99a0;
}

.filter-button.exclude {
    background-color: #0041ff; /* 赤色 */
}
.filter-button.exclude:hover {
    background-color: #66ccff;
}

/* 混入の可能性チェックボックスのスタイル */
.cross-contamination-option {
    margin-top: 20px;
    text-align: center;
    font-size: 1em;
}

.cross-contamination-option label {
    display: inline-flex; /* チェックボックスとテキストを横並びに */
    align-items: center;
    cursor: pointer;
    padding: 8px 15px;
    background-color: #fff8e1; /* 薄い黄色 */
    border: 1px solid #ffecb3;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

.cross-contamination-option label:hover {
    background-color: #ffe082;
}

.cross-contamination-option input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
}


.filter-instruction {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
}

/* 模擬店名プルダウンセクション */
.shop-name-filter {
    margin-top: 40px; /* 上のアレルギーフィルターとの間隔 */
    padding: 15px;
    background-color: #f5f5f5; /* 薄いグレーの背景 */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex; /* flexboxで要素を並べる */
    align-items: center; /* 垂直方向中央揃え */
    gap: 10px; /* 要素間のスペース */
}

.shop-name-filter select {
    flex-grow: 1; /* プルダウンが広がるように */
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    background-color: white;
    cursor: pointer;
}

.shop-name-filter button { /* 絞り込みボタンとリセットボタンの共通スタイル */
    background-color: #007BFF; /* 青色 */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* ボタン内のテキストが改行されないように */
}

.menu-note {
    font-size: 0.8em; /* 小さめのフォントサイズ */
    color: #888; /* 少し薄い色 */
    margin-top: 10px;
    margin-bottom: 15px; /* ボタンとの間隔を調整 */
    padding-top: 5px; /* 上に少しパディング */
    border-top: 1px dashed #eee; /* 上に点線を追加して区別 */
}

.shop-name-filter button:hover {
    background-color: #0056b3;
}

.shop-name-filter button:active {
    transform: translateY(1px); /* クリック時の押し込みエフェクト */
}

/* メニューカード一覧 */
.menu-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* レスポンシブグリッド */
    gap: 25px;
}

.menu-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; /* flexboxを使って内部要素を配置 */
    flex-direction: column; /* 縦方向に並べる */
    justify-content: space-between; /* コンテンツとボタンを上下に配置 */
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.menu-card h3 {
    color: #388e3c; /* 緑 */
    margin-top: 0;
    font-size: 1.5em; /* メニュー名を大きく */
    margin-bottom: 5px; /* 下の模擬店名との間隔 */
}

.menu-card .shop-name {
    font-size: 0.85em; /* 模擬店名を小さく */
    color: #666; /* 模擬店名を少し薄い色に */
    margin-bottom: 15px; /* 下のアレルギー情報との間隔 */
}

/* 含まれるアレルギー物質の表示スタイル */
.allergens-info {
    list-style: none;
    padding: 0;
    margin-top: 10px; 
    margin-bottom: 15px; /* ボタンとの間隔 */
    font-size: 0.85em; 
    display: flex; /* タグを横並びにする */
    flex-wrap: wrap; /* 必要に応じて折り返す */
    gap: 5px; /* タグ間の間隔 */
}

.allergens-info li {
    background-color: #ff9900; /* 薄いオレンジ */
    padding: 4px 8px; /* パディングを少し小さく */
    border-radius: 5px;
    display: inline-block; /* 横並びにする */
    color: #ffffff; /* オレンジ */
    font-weight: bold;
}

/* 混入の可能性があるアレルギー表示スタイル */
.allergens-info li.cross-contamination {
    background-color: #ffff99; /* 薄い赤 */
    color: #000000; /* 濃い赤 */
    font-weight: bold;
    border: 1px dashed #faf500; /* 点線ボーダーを追加 */
}


.detail-button {
    display: block; /* ブロック要素にして幅いっぱいに */
    background-color: #66bb6a; /* 明るい緑 */
    color: white;
    padding: 8px 12px; /* ボタンのパディングを調整 */
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
    margin-top: auto; /* 下部に固定 */
    font-size: 0.9em;
}

.detail-button:hover {
    background-color: #43a047; /* 少し濃い緑 */
}

/* 重要事項・ご注意 */
.important-notes {
    background-color: #ffff99; /* 薄い黄色 */
    border-left: 5px solid #faf500; /* 黄色 */
    padding: 20px;
    border-radius: 8px;
    font-size: 0.95em;
    color: #000000;
}

.important-notes h2 {
    color: #000000; /* 濃い黄色 */
    border-bottom: 1px solid #faf500;
}

/* フッター */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    background-color: #333;
    color: white;
    font-size: 0.9em;
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.6em;
    }

    header p {
        font-size: 1em;
    }

    main {
        padding: 15px;
        margin: 15px auto;
    }

    h2 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    .allergens-filter .filter-container {
        padding: 12px;
    }

    .allergens-filter .allergen-group h3 {
        font-size: 1em;
    }

    .allergens-filter label {
        padding: 7px 10px;
        font-size: 0.85em;
    }

    .filter-buttons {
        flex-direction: column; /* ボタンを縦に並べる */
        gap: 10px;
        margin-top: 15px;
    }
    .filter-button {
        width: 100%; /* 幅をいっぱいに */
        padding: 10px 20px;
        font-size: 0.95em;
    }

    .cross-contamination-option {
        margin-top: 15px;
    }
    .cross-contamination-option label {
        width: calc(100% - 30px); /* 親要素のパディングを考慮 */
        padding: 10px;
        font-size: 0.9em;
    }


    .shop-name-filter {
        flex-direction: column; /* 検索欄も縦に並べる */
        align-items: stretch; /* 幅いっぱいに伸ばす */
    }
    .shop-name-filter select {
        width: 100%; /* 幅いっぱいに */
    }
    .shop-name-filter button {
        width: 100%; /* 幅いっぱいに */
    }

    .menu-cards {
        grid-template-columns: 1fr; /* 1列にする */
    }

    .menu-card {
        padding: 15px;
    }
    .menu-card h3 {
        font-size: 1.3em;
    }
    .menu-card .shop-name {
        font-size: 0.8em;
    }
    .allergens-info li {
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    header {
        padding: 15px;
    }

    main {
        padding: 10px;
        margin: 10px auto;
    }

    h2 {
        font-size: 1.3em;
    }

    .allergens-filter .filter-container {
        padding: 10px;
    }
    .allergens-filter .allergen-group h3 {
        font-size: 0.95em;
    }
    .allergens-filter label {
        padding: 6px 9px;
        font-size: 0.8em;
    }

    .filter-buttons {
        gap: 8px;
        margin-top: 10px;
    }
    .filter-button {
        padding: 8px 15px;
        font-size: 0.9em;
    }

    .cross-contamination-option {
        margin-top: 10px;
    }
    .cross-contamination-option label {
        padding: 8px;
        font-size: 0.85em;
    }

    .shop-name-filter {
        padding: 10px;
    }
    .shop-name-filter select {
        padding: 8px 12px;
        font-size: 0.9em;
    }
    .shop-name-filter button {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    .detail-button {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    .important-notes {
        padding: 15px;
        font-size: 0.9em;
    }
}
/* ====================================
 * CSS END
 * ==================================== */