/* css/style.css */

/* 基本設定 */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #333;
    line-height: 1.6;
    background-color: #f5f5f5; /* やや明るいグレーを背景に */
}

/* 共通のコンテナ設定 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ヘッダーの共通スタイル */
header {
    width: 100%;
    overflow: hidden; /* 子要素のフロートを解除 */
    position: relative;
    background-color: #000; /* 黒基調 */
    color: #fff;
    text-align: center;
}

header img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* 画像がコンテナに収まるように */
}

.header-links {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 20px; /* リンク間のスペース */
    z-index: 10;
}

.header-link-button {
    background-color: #333; /* 黒系の背景 */
    color: #fff;
    text-decoration: none;
    padding: 20px 30px;
    border-radius: 10px;
    width: 150px; /* ある程度の固定幅 */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap; /* ボタン内のテキストを折り返さない */
}

.header-link-button:hover {
    background-color: rgba(255, 102, 00, 0.9); /* ホバーで少し暗いオレンジ */
}

.header-text-overlay {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 5vw;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    z-index: 5;
    white-space: nowrap;
    display: inline-block; /* 幅をテキストサイズに合わせる */
    background-color: rgba(255, 255, 255, 0.5); /* 白の半透明（0.5は透明度） */
    padding: 10px 20px; /* テキストの上下左右に余白を追加 */
    border-radius: 5px; /* 角を少し丸くする */
}


/* メインコンテンツの共通スタイル */
main {
    padding: 40px 0;
}

/* フッターの共通スタイル */
footer {
    background-color: #1a1a1a; /* 黒より少し明るい色 */
    color: #eee;
    padding: 40px 0;
    text-align: center;
}

.footer-nav-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap; /* スマホで折り返す */
}

.footer-nav-buttons a {
    background-color: #333;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.footer-nav-buttons a:hover {
    background-color: #555;
}

.footer-info-sns {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    flex-wrap: wrap; /* スマホで折り返す */
    padding: 0 20px;
}

.footer-info img {
    max-width: 200px; /* 画像の最大幅 */
    height: auto;
    border-radius: 5px;
}

.footer-contact-sns {
    text-align: left;
}

.footer-contact-sns p {
    margin: 5px 0;
}

.sns-links a {
    display: inline-block;
    margin-right: 15px;
    font-size: 2em;
    color: #eee;
    transition: color 0.3s ease;
}

.sns-links a:hover {
    color: #ff6600; /* オレンジ */
}

/* その他の共通スタイル */
h2, h3 {
    text-align: center;
    margin-bottom: 30px;
    color: #ff6600; /* オレンジ */
    border-bottom: 2px solid #ff6600;
    display: inline-block;
    padding-bottom: 5px;
}

.section-title {
    font-size: 2.5em;
    margin-top: 50px;
    margin-bottom: 30px;
}

/* ボタンの共通スタイル */
.btn {
    display: inline-block;
    background-color: #ff6600; /* オレンジ */
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #e65c00; /* ホバーで少し暗いオレンジ */
    transform: translateY(-2px); /* 少し浮き上がる */
}

/* 画像ギャラリーの共通スタイル */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr)); /* レスポンシブ対応 */
    gap: 30px;
    margin-top: 40px;
}

.image-item {
    text-align: center;
    background-color: #fff;
    padding: 60px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.image-item img {
    max-width: 100%;
    height: auto; /* 高さを自動調整にすることで、幅に合わせて伸縮する */
    object-fit: cover; /* アスペクト比を保ちつつトリミング */
    border-radius: 8px;
    margin-bottom: 15px;
    cursor: pointer; /* クリック可能であることを示す */
}

.image-item h4 {
    color: #4e454a;
    margin-top: 0;
    font-size: 1.3em;
}

.image-item p {
    font-size: 0.9em;
    color: #555;
    text-align: left;
}

/* モーダル（画像拡大表示用）の共通スタイル */
.modal {
    display: none; /* 初期状態では非表示 */
    position: fixed; /* 画面に固定 */
    z-index: 1000; /* 他の要素より手前に表示 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* スクロール可能に */
    background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒背景 */
    backdrop-filter: blur(5px); /* 背景をぼかす */
    -webkit-backdrop-filter: blur(5px); /* Safari対応 */
    justify-content: center;
    align-items: center;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; /* 画像全体を表示 */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.close-button {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* スマートフォン向けのレスポンシブデザイン */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    /* ヘッダー */
    header {
        position: relative;
        text-align: center;
        background-color: #f5f5f5; 
    }

    .header-links {
        position: static; 
        transform: none; /* absoluteと一緒に使われるtransformも解除 */
        display: flex;
        flex-direction: column; /* 縦並びにする */
        gap: 10px;
        width: 90%;
        margin: 10px auto; /* 中央に配置し、上下に余白を入れる */
    }

    /* ヘッダーの画像は幅100%で表示 */
    header img {
        width: 100%;
        height: auto;
        display: block;
    }

    .header-link-button {
        width: 100%; /* 幅をヘッダーの90%に合わせる */
        padding: 15px 10px; /* パディングを調整 */
        font-size: 1em;
    }

    /* ヘッダーテキストを画像の上に配置 */
    .header-text-overlay {
        top: 20%;
        font-size: 8vw; /* フォントサイズを小さく */
        padding: 8px 15px; /* パディングも小さく */
    }

    /* フッター */
    .footer-nav-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .footer-info-sns {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .footer-info img {
        max-width: 150px;
    }

    .footer-contact-sns {
        text-align: center;
    }

    .sns-links {
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    .header-links {
        flex-direction: column; /* 1列にする */
        width: 90%;
    }
    .header-link-button {
        width: 100%;
        flex: none;
    }
    .header-text-overlay {
        font-size: 10vw; /* フォントをさらに小さく */
    }

    h2, h3 {
        font-size: 1.5em;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }

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

    .image-item img {
        height: 180px;
    }

    .close-button {
        font-size: 30px;
        right: 20px;
    }
}

/* index.html に特化したスタイル */

/* トップナビゲーションボタン */
.top-nav-buttons {
    margin-top: 40px;
    text-align: center;
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 20px; /* ボタン間の間隔 */
    flex-wrap: wrap; /* スマホで折り返す */
}

.large-button {
    background-color: #333; /* 黒系の背景 */
    color: #fff;
    text-decoration: none;
    padding: 20px 30px;
    border-radius: 10px;
    width: 200px; /* ある程度の固定幅 */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.large-button:hover {
    background-color: #ff6600; /* ホバーでオレンジ */
    transform: translateY(-5px);
}

.large-button h3 {
    color: #fff; /* 小見出しの色を白に */
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: none; /* 下線を削除 */
    display: block; /* 常にブロック要素として扱う */
}

.large-button p {
    font-size: 0.8em;
    color: #eee;
    margin: 0;
}

/* Newsと店舗情報 */
.news-shop-info {
    display: flex;
    gap: 40px;
    margin-top: 60px;
    height: auto; /* 高さを揃えるため */
}

.news-section, .shop-info-section {
    flex: 1; /* 等しい幅 */
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.news-scroll {
    height: calc(85% - 70px); /* 親要素の高さからh2の高さを引く */
    overflow-y: scroll; /* スクロール可能に */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.news-scroll ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-scroll li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #eee;
    font-size: 0.95em;
    color: #555;
}

.news-scroll li:last-child {
    border-bottom: none;
}

.news-scroll li time {
    font-weight: bold;
    color: #ff6600;
    margin-right: 10px;
}

.shop-info-section p {
    margin-bottom: 10px;
    font-size: 1.05em;
    color: #444;
}

/* アクセスセクション */
.access-section {
    display: flex;
    gap: 40px;
    margin-top: 60px;
    align-items: flex-start; /* 上揃え */
    flex-wrap: wrap; /* スマホで折り返す */
}

.access-image {
    flex: 1;
    min-width: 300px; /* 最小幅を設定 */
}

.access-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.access-details {
    flex: 1;
    min-width: 300px; /* 最小幅を設定 */
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.access-details p {
    margin-bottom: 10px;
    font-size: 1.05em;
    color: #444;
}

.google-map {
    margin-top: 20px;
    position: relative;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* レスポンシブ対応 (index.html) */
@media (max-width: 768px) {
    .button-group {
        flex-direction: column; /* 縦並び */
        align-items: center; /* 中央揃え */
    }

    .large-button {
        width: 80%; /* 幅を広げる */
        padding: 15px 20px;
    }

    .news-shop-info, .access-section {
        flex-direction: column; /* 縦並び */
        gap: 30px;
        height: auto; /* 高さを自動調整 */
    }

    .news-section, .shop-info-section, .access-image, .access-details {
        width: 100%; /* 全幅 */
        height: auto;
    }

    .news-scroll {
        height: 200px; /* スマホでの高さ固定 */
    }
}

@media (max-width: 480px) {
    .large-button {
        padding: 12px 15px;
        font-size: 0.9em;
    }

    .large-button h3 {
        font-size: 1.2em;
    }

    .news-scroll li {
        font-size: 0.85em;
    }

    .shop-info-section p, .access-details p {
        font-size: 0.95em;
    }
}

/* kodawari.html に特化したスタイル */

.page-jump-links {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.page-jump-links .btn {
    padding: 10px 20px;
    font-size: 1.1em;
}

.content-section {
    margin-bottom: 80px;
}

.features-content {
    display: flex;
    gap: 40px;
    flex-wrap: wrap; /* スマホで折り返す */
    margin-top: 40px;
}

.features-images {
    flex: 2; /* 画像ギャラリーは広めに */
    min-width: 300px;
}

.allergen-info {
    flex: 1; /* アレルギー情報は狭めに */
    min-width: 250px;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.allergen-info h3 {
    color: #ff6600;
    font-size: 1.8em;
    margin-bottom: 20px;
    border-bottom: 2px solid #ff6600;
    display: inline-block;
    padding-bottom: 5px;
}

.allergen-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.no-allergen, .has-allergen {
    flex: 1;
    min-width: 200px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.no-allergen h4 {
    color: #28a745; /* 緑色 */
    margin-top: 0;
    font-size: 1.3em;
}

.has-allergen h4 {
    color: #dc3545; /* 赤色 */
    margin-top: 0;
    font-size: 1.3em;
}

.allergen-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.allergen-list li {
    margin-bottom: 8px;
    color: #333;
}

.has-allergen p {
    font-size: 0.85em;
    color: #777;
    margin-top: 15px;
    text-align: left;
}

.baking-method-content {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.youtube-video {
    flex: 1;
    min-width: 300px;
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.youtube-video h3 {
    font-size: 1.5em;
    color: #ff6600;
    margin-top: 0;
    border-bottom: none;
}

.youtube-video iframe {
    width: 100%;
    max-width: 560px;
    height: 315px; /* 標準のYouTube埋め込みサイズ */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.baking-images {
    flex: 2;
    min-width: 300px;
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.baking-images h3 {
    font-size: 1.5em;
    color: #ff6600;
    margin-top: 0;
    border-bottom: none;
}

.baking-images p {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 20px;
}

.image-item2 {
    text-align: left;
    padding: 30px;
}

/* レスポンシブ対応 (kodawari.html) */
@media (max-width: 768px) {
    .features-content, .baking-method-content {
        flex-direction: column;
        align-items: center;
        width: 90%;
    }

    .features-images, .allergen-info, .youtube-video, .baking-images {
        width: 100%;
        min-width: unset;
    }

    .allergen-list {
        flex-direction: column;
        gap: 20px;
    }

    .youtube-video iframe {
        height: 250px; /* スマホで動画の高さを調整 */
    }
}

@media (max-width: 480px) {
    .page-jump-links .btn {
        padding: 8px 15px;
        font-size: 1em;
    }

    .youtube-video iframe {
        height: 200px;
    }
}

/* menu.html に特化したスタイル */

.in-store-menu-section, .takeout-menu-section {
    margin-bottom: 80px;
}

.click-to-enlarge {
    text-align: center;
    color: #777;
    margin-top: -20px;
    margin-bottom: 30px;
    font-size: 0.9em;
}

.menu-gallery {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* スマホで折り返す */
    margin-top: 40px;
}

.menu-item {
    position: relative;
    width: 300px; /* 画像の幅を固定 */
    height: 200px; /* 画像の高さを固定 */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.menu-item img.menu-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をコンテナに合わせてトリミング */
    display: block;
    transition: transform 0.3s ease;
}

.menu-item:hover img.menu-image {
    transform: scale(1.05); /* ホバーで少し拡大 */
}

.menu-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒 */
    color: #fff;
    padding: 10px;
    font-size: 0.9em;
    text-align: center;
    transform: translateY(100%); /* 初期状態では非表示 */
    transition: transform 0.3s ease;
}

.menu-item:hover .overlay {
    transform: translateY(0); /* ホバーで表示 */
}

.takeout-menu-section {
    text-align: center;
}

.takeout-image-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    margin-top: 40px;
    display: inline-block; /* 中央寄せのため */
    max-width: 800px; /* 画像とテキストの最大幅 */
}

.takeout-menu-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.takeout-image-container p {
    font-size: 1.1em;
    color: #444;
    line-height: 1.8;
}

/* レスポンシブ対応 (menu.html) */
@media (max-width: 768px) {
    .menu-gallery {
        flex-direction: column;
        align-items: center;
    }

    .menu-item {
        width: 80%; /* スマホで幅を調整 */
        height: 220px; /* 高さを調整 */
    }

    .takeout-image-container {
        width: 90%;
        padding: 20px;
    }

    .takeout-image-container p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .menu-item {
        width: 90%;
        height: 180px;
    }

    .menu-item .overlay {
        font-size: 0.8em;
    }
}

/* online_shop.html に特化したスタイル */

.online-shop-main-link, .online-shop-bottom-link {
    text-align: center;
    margin: 40px 0 60px;
}

.large-online-button {
    font-size: 1.5em;
    padding: 15px 40px;
    border-radius: 10px;
    background-color: #ff6600; /* オレンジ */
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.large-online-button:hover {
    background-color: #e65c00;
    transform: translateY(-3px);
}

.online-details-ranking {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap; /* スマホで折り返す */
    justify-content: center;
}

.online-details {
    flex: 2; /* ネット購入については広めに */
    min-width: 400px;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.online-details .section-title {
    margin-top: 0;
    margin-bottom: 30px;
}

.detail-item {
    margin-bottom: 30px;
}

.detail-item h3 {
    font-size: 1.5em;
    color: #ff6600;
    text-align: left;
    margin-bottom: 10px;
    border-bottom: 1px solid #ff6600;
    padding-bottom: 5px;
    display: inline-block;
}

.detail-item p, .detail-item ul {
    font-size: 1.05em;
    color: #444;
    line-height: 1.7;
    text-align: left;
}

.detail-item ul {
    list-style: disc;
    padding-left: 20px;
}

.detail-item li {
    margin-bottom: 5px;
}

.ranking-section {
    flex: 1; /* ランキングは狭めに */
    min-width: 300px;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.ranking-section .section-title {
    margin-top: 0;
    margin-bottom: 30px;
}

.ranking-items {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ranking-item {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ranking-item h3 {
    font-size: 1.8em;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: none;
    display: block;
}

.ranking-item img {
    max-width: 100%;
    height: auto; /* 高さを自動調整にすることで、幅に合わせて伸縮する */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.ranking-item p {
    font-size: 1em;
    color: #555;
    line-height: 1.5;
}

/* レスポンシブ対応 (online_shop.html) */
@media (max-width: 768px) {
    .large-online-button {
        font-size: 1.2em;
        padding: 12px 30px;
    }

    .online-details-ranking {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .online-details, .ranking-section {
        width: 100%;
        min-width: unset;
        padding: 20px;
    }

    .detail-item h3 {
        font-size: 1.3em;
    }

    .detail-item p, .detail-item ul {
        font-size: 0.95em;
    }

    .ranking-item img {
        height: 150px;
    }
}

@media (max-width: 480px) {
    .large-online-button {
        font-size: 1em;
        padding: 10px 20px;
    }

    .detail-item h3 {
        font-size: 1.1em;
    }

    .detail-item p, .detail-item ul {
        font-size: 0.9em;
    }
}