@charset "UTF-8";

/* 基本設定 */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    letter-spacing: 0.05em;
}

a {
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

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

/* レイアウト共通 */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.bg-gray {
    background-color: #f9f9f9;
}

.section-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
    font-weight: normal;
}

.section-desc {
    text-align: center;
    margin-bottom: 40px;
    font-size: 14px;
    color: #666;
}

/* ヘッダー */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #eee;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 40px;
}

.logo {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

header nav ul {
    display: flex;
    gap: 30px;
}

header nav a {
    font-size: 13px;
    font-weight: bold;
}

/* ====================================
   メインビジュアル（スライドショー）
   ==================================== */
#hero {
    position: relative;
    height: 70vh;
    /* ※もしPCで見た時にもっと細くしたいなら 60vh や 500px などにしてもOKです */
    min-height: 500px; /* 画面が小さいノートPCなどで潰れすぎないように最低高さを確保 */
    width: 100%;
    overflow: hidden;
    background-color: #333; 
}

/* --- スライドショーの設定 --- */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 一番後ろ */
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* アニメーション：名前 時間 繰り返し タイミング */
    animation: slideAnime 18s infinite; 
}

/* 3枚の画像を順番に表示するタイミング設定 */
.slide-item:nth-child(1) {
    animation-delay: 0s;
}
.slide-item:nth-child(2) {
    animation-delay: 6s; /* 18秒 ÷ 3枚 = 6秒ずらす */
}
.slide-item:nth-child(3) {
    animation-delay: 12s;
}

/* ふわっと切り替わるアニメーションの定義 */
@keyframes slideAnime {
    0% { opacity: 0; transform: scale(1); }
    10% { opacity: 1; }  /* 10%の期間でふわっと出る */
    40% { opacity: 1; }  /* しばらく見せる */
    50% { opacity: 0; transform: scale(1.05); } /* ゆっくり拡大しながら消える */
    100% { opacity: 0; }
}

/* --- 文字エリア（背景うすく・枠線なし） --- */
.hero-content-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.15); 
    border: none;
    padding: 40px 60px;
    color: #fff;
    border-radius: 4px;
}

.hero-content-box h2 {
    font-size: 32px;
    margin: 0 0 15px 0;
    /* ここで読み込んだフォントを指定 */
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    letter-spacing: 0.15em;
}

.hero-content-box p {
    font-size: 16px;
    margin: 0;
    font-weight: 300; /* 細く */
    letter-spacing: 0.1em;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .hero-content-box {
        width: 80%; /* スマホでは横幅広めに */
        padding: 30px 20px;
    }
    .hero-content-box h2 {
        font-size: 24px;
    }
    .hero-content-box p {
        font-size: 13px;
    }
}

/* Products */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.product-item {
    text-align: center;
}

.img-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #eee;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-item h4 {
    margin: 10px 0 5px;
    font-size: 16px;
    font-weight: normal;
}

.product-item p {
    font-size: 14px;
    color: #666;
}

/* Access / Info */
.shop-info {
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #eee;
    padding: 40px;
}

.shop-info dt {
    font-weight: bold;
    margin-top: 20px;
    font-size: 14px;
}

.shop-info dt:first-child {
    margin-top: 0;
}

.shop-info dd {
    margin: 5px 0 0;
    margin-left: 0;
    font-size: 15px;
}

/* Contact */
.contact-box {
    text-align: center;
    padding: 20px;
    border: 1px solid #ddd;
    background: #fff;
    max-width: 500px;
    margin: 0 auto;
}

/* Footer */
footer {
    background: #333;
    color: #fff;
    padding: 50px 0 20px;
    font-size: 13px;
}

.company-profile {
    margin-bottom: 40px;
    border-bottom: 1px solid #555;
    padding-bottom: 20px;
}

.company-profile h4 {
    font-size: 16px;
    margin-bottom: 20px;
}

.copyright {
    text-align: center;
    color: #888;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .header-inner {
        padding: 0 20px;
        flex-direction: column;
        height: auto;
        padding-bottom: 15px;
    }
    
    .logo {
        margin: 15px 0;
    }

    header nav ul {
        gap: 15px;
    }

    .hero-content h2 {
        font-size: 28px;
    }
    
    .shop-info {
        padding: 20px;
    }
}

/* TOPページ：洗練されたピックアップセクション */
.pickup-section {
    padding: 100px 0;
}

.pickup-item {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

/* 偶数番目は写真を右にする（ジグザグレイアウト） */
.pickup-item:nth-child(even) {
    flex-direction: row-reverse;
}

.pickup-img {
    flex: 1;
    aspect-ratio: 4/3;
    background-color: #eee;
    overflow: hidden;
}

.pickup-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.pickup-img:hover img {
    transform: scale(1.05);
}

.pickup-text {
    flex: 1;
    padding: 20px;
}

.pickup-text h4 {
    font-size: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

.pickup-text p {
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 2;
}

.view-more-btn {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #333;
    font-size: 12px;
    letter-spacing: 0.1em;
    transition: all 0.3s;
}

.view-more-btn:hover {
    background: #333;
    color: #fff;
}

/* 詳細ページ (Detail) */
.detail-wrapper {
    display: flex;
    gap: 50px;
    margin-top: 40px;
    align-items: flex-start; /* 上揃えに変更 */
}

.detail-img {
    flex: 1; /* 1.5から1に減らしてエリアを狭く */
    max-width: 500px; /* これ以上大きくならないように制限 */
    background-color: #fff; /* 背景を白に（画像に余白が出た時用） */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.detail-img img {
    width: 100%;
    height: auto; /* 高さを自動にして比率を維持 */
    object-fit: contain; /* 【重要】全体が収まるように表示 */
    border-radius: 4px; /* ほんの少し角を丸くして上品に */
}

.detail-info {
    flex: 1;
    padding-top: 20px;
}

.detail-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.detail-price {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    display: block;
}

.detail-desc {
    font-size: 14px;
    line-height: 2;
    color: #555;
    margin-bottom: 40px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 30px 0;
}

.back-link {
    display: inline-block;
    color: #888;
    font-size: 12px;
    text-decoration: underline;
}

/* スマホ対応の追加 */
@media screen and (max-width: 768px) {
    .pickup-item, .pickup-item:nth-child(even), .detail-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .pickup-text, .detail-info {
        padding: 0;
    }
}
/* スマホ対応 */
@media screen and (max-width: 768px) {
    .detail-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .detail-img {
        width: 100%;
        max-width: 100%;
    }
}

/* フッターのスマホ対応調整 */
@media screen and (max-width: 768px) {
    .footer-flex-wrapper {
        flex-direction: column-reverse; /* スマホでは画像を下に、文字を上に */
        align-items: flex-start !important;
        gap: 20px;
    }
}

/* --- フォーム用スタイル (style.cssの末尾に追加) --- */

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 20px; /* スマホ用余白 */
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 14px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    font-size: 16px;
    box-sizing: border-box; /* 枠線を含めたサイズ計算 */
}

.contact-form textarea {
    resize: vertical;
}

.form-btn-area {
    text-align: center;
    margin-top: 40px;
}

.btn-submit {
    background: #333;
    color: #fff;
    border: 1px solid #333;
    padding: 15px 60px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    appearance: none; /* スマホでのデフォルトスタイル解除 */
}

.btn-submit:hover {
    background: #555;
    border-color: #555;
}

/* 戻るボタン */
.btn-back {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 15px 40px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-back:hover {
    background: #eee;
}

/* 確認画面の文字 */
.confirm-text {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

/* ロゴ画像の調整 */
.logo img {
    height: 40px; /* 作った画像の半分のサイズを指定（これが綺麗に見えるコツ！） */
    width: auto;  /* 横幅は自動調整 */
    display: block; /* 余計な隙間を消す */
}

/* スマホの時は少し小さくするなら */
@media screen and (max-width: 768px) {
    .logo img {
        height: 30px;
    }
}

/* ====================================
   ACCESSページ修正用スタイル（フォント統一・サイズ調整版）
   ==================================== */

.shop-info {
    max-width: 800px;
    margin: 0 auto;
    
    /* 枠線・影を完全削除 */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent;
    
    /* ★変更：フォントをサイト全体と同じものにする */
    font-family: inherit;
}

/* テーブル全体の設定 */
.access-table {
    width: 100%;
    border-collapse: collapse;
    
    /* テーブル自体の枠線なし */
    border: none; 
    border-top: none; 
}

/* 左側（項目名）と右側（内容）の共通設定 */
.access-table th, 
.access-table td {
    padding: 25px 0;
    border-bottom: 1px solid #eee; /* 区切り線は残す */
    text-align: left;
    vertical-align: baseline; /* 文字の底辺を揃える */
    
    /* ★変更：文字サイズを14pxに統一 */
    font-size: 14px;
    
    /* ★変更：色もサイト全体の本文カラーに合わせる */
    color: #333; 
}

/* 左側（項目名）の設定 */
.access-table th {
    width: 25%;
    font-weight: normal;
    
    /* 項目名だけ少し色を薄くする（お好みで） */
    color: #666;
    
    /* 英語フォントの指定だけ残す（見出し用） */
    /* もしここも日本語フォントで良ければこの行を削除してください */
    font-family: "Montserrat", sans-serif; 
    
    letter-spacing: 0.1em;
    padding-right: 20px;
}

/* 右側（内容）の設定 */
.access-table td {
    width: 75%;
    line-height: 1.8;
}

/* 一番下の行の下線だけ消す */
.access-table tr:last-child th,
.access-table tr:last-child td {
    border-bottom: none;
}

/* Google Map エリア */
.map-box {
    margin-top: 80px;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f4f4f4;
}

.map-box iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(100%);
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    /* スマホではテーブルのセルをブロック要素（積み木）に変える */
    .access-table, 
    .access-table tbody, 
    .access-table tr, 
    .access-table th, 
    .access-table td {
        display: block;
        width: 100%;
    }

    .access-table th {
        padding-bottom: 5px;
        border-bottom: none; /* 項目の下線は消す */
    }

    .access-table td {
        padding-top: 0; /* 内容の上余白を詰める */
        padding-left: 0;
    }
    
    .map-box {
        margin-top: 50px;
        aspect-ratio: 4 / 3;
    }
}

/* ABOUTセクション用（スマホの改行調整） */
@media screen and (max-width: 768px) {
    /* PC用の改行（br class="pc-br"）をスマホでは無効にする */
    .pc-br {
        display: none;
    }
    
    #about {
        padding: 60px 20px !important; /* スマホは上下の余白を少し狭く */
    }
    
    #about p {
        font-size: 14px !important; /* スマホは文字を少し小さく */
        text-align: left; /* スマホは左揃えの方が読みやすい場合があります（お好みでcenterでもOK） */
    }
}
/* --- トップページの見出し共通スタイル --- */
.section-heading {
    text-align: center;
    font-family: "Montserrat", sans-serif; /* サイト共通の欧文フォント */
    font-size: 20px;       /* 大きすぎない方が上品です */
    font-weight: 400;      /* 太すぎず細すぎず */
    letter-spacing: 0.15em;/* 文字間隔を広げて高級感 */
    margin-bottom: 50px;   /* 下の余白 */
    text-transform: uppercase; /* 強制的に大文字にする */
    color: #333;
}

/* --- パララックス背景エリア --- */
.parallax-bg {
    width: 100%;
    height: 500px; /* 画像の表示エリアの高さ */
    
    /* 背景画像の設定 */
    background-image: url('images/parallax.jpg'); /* ★画像ファイル名はここ */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
    /* ★これがパララックスの正体！ */
    /* 背景を画面に固定することで、スクロールしても動かないように見せる */
    background-attachment: fixed;
    
    margin-bottom: 80px; /* 下の要素との余白 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .parallax-bg {
        height: 300px; /* スマホでは高さを少し抑える */
        
        /* スマホ（特にiPhone）はパララックスがガタつく原因になるので、
           あえて固定を解除して普通の画像として表示するのがWeb制作の定石です */
        background-attachment: scroll; 
    }
}

/* ====================================
   ハンバーガーメニュー用スタイル（最終確定版）
   ==================================== */

/* --- ヘッダーの固定設定（全デバイス共通） --- */
.site-header {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; /* 最前面に */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    box-sizing: border-box;
    position: relative; /* 子要素の基準点 */
}

/* ロゴの設定 */
.logo img {
    height: 40px;
    width: auto;
    display: block;
}

/* --- PCではハンバーガーボタンを隠す --- */
.hamburger-btn {
    display: none;
}

/* ナビゲーション（PC表示） */
.global-nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.global-nav a {
    text-decoration: none;
    color: #333;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    font-weight: 500;
    transition: opacity 0.3s;
}

.global-nav a:hover {
    opacity: 0.6;
}

/* ヘッダー固定分の余白 */
body {
    padding-top: 80px;
}


/* --- スマホ表示（768px以下） --- */
@media screen and (max-width: 768px) {
    
    .header-inner {
        height: 70px;
        padding: 0 20px;
        /* ロゴを強制的に中央へ */
        justify-content: center; 
    }
    
    .logo img {
        height: 32px;
    }
    
    body {
        padding-top: 70px;
    }

    /* ▼ハンバーガーボタン（位置を座標で完全固定） */
    .hamburger-btn {
        display: block;      /* スマホで表示 */
        position: fixed;     /* ★画面に対して固定（絶対消えません） */
        top: 15px;           /* 上から15px（ヘッダー高さ70pxの中央付近） */
        right: 20px;         /* 右から20px */
        width: 40px;         
        height: 40px;       
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10001;      /* 誰よりも手前に */
        padding: 0;
        margin: 0;
    }

    /* 3本の線 */
    .hamburger-btn .bar {
        display: block;
        position: absolute;
        left: 8px;           /* (40-24)/2 = 中央 */
        width: 24px;         /* 線の幅 */
        height: 1px;         /* ★線の太さ（極細） */
        background: #333;
        transition: 0.3s ease-in-out;
        border-radius: 1px;
        transform-origin: center; /* ★回転の中心を真ん中に */
    }
    
    /* 線の位置 */
    .hamburger-btn .bar:nth-child(1) { top: 12px; }
    .hamburger-btn .bar:nth-child(2) { top: 20px; } /* 真ん中 */
    .hamburger-btn .bar:nth-child(3) { top: 28px; }

    /* ▼ボタンが押された時（きれいな✕印） */
    .hamburger-btn.active .bar:nth-child(1) {
        top: 20px; /* 真ん中に移動 */
        transform: rotate(45deg);
    }
    
    .hamburger-btn.active .bar:nth-child(2) {
        opacity: 0; /* 消す */
    }
    
    .hamburger-btn.active .bar:nth-child(3) {
        top: 20px; /* 真ん中に移動 */
        transform: rotate(-45deg);
    }

    /* ▼スマホ用メニュー画面 */
    .global-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        z-index: 10000; /* ボタンより一つ下 */
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease-in-out;
        
        /* Flexでメニューを中央寄せ */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .global-nav.active {
        opacity: 1;
        visibility: visible;
    }

    .global-nav ul {
        display: block;
        text-align: center;
        width: 100%;
    }

    .global-nav li {
        margin-bottom: 30px;
    }

    .global-nav a {
        font-size: 18px;
        display: block;
        padding: 10px;
        width: 100%;
    }
}