/*
 Theme Name:   Astra Child
 Template:     astra
*/
:root {
    /* 少し黄色がかった明るい木の色 */
    --wood-light: #fdf5d2;
    --frame-dark: #38281b;
    --frame-edge: #1a110a;
    /* 焼き印の色（少し落ち着いた茶色） */
    --brand-color: #3d2b1f;
}

/* ダークテーマの基本設定 */
body.theme-dark {
    background-color: #1a1614;
    color: #e2e2e2;
    /* 古材の重厚感を出す、うねりのあるライン背景 */
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100 Q 50 90, 100 100 T 200 100' stroke='%232a2420' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* 微細なノイズを重ねて質感をアップ */
body.theme-dark::before {
    content: "";
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none; /* 下の要素をクリックできるようにする */
    z-index: 9999; /* 常に最前面にノイズをのせる */
}

.section-subtitle {
    font-size: 1.2rem;
    color: #a88e71;
    font-weight: bold;
    margin-bottom: 30px;
}

/* 共通：アニメーションの速度や透明度の設定 */
.fade-in,
.fade-in-left,
.fade-in-right {
    opacity: 0;
    transition: opacity 1.2s ease, transform 1.2s ease;
    will-change: opacity, transform;
}

/* 下から上へ */
.fade-in {
    transform: translateY(30px);
}

/* 左から右へ（左にずらしておく） */
.fade-in-left {
    transform: translateX(-50px);
}

/* 右から左へ（右にずらしておく） */
.fade-in-right {
    transform: translateX(50px);
}

/* 【実行用クラス】 JavaScriptでこれが付与されると元の位置に戻る */
.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }
/* ==========================================
 * トップページのスタイル
 * ========================================== */

.site-main{
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.ast-container {
    max-width: 1200px !important; /* 広すぎると左に寄って見えるため、標準的な1200pxに設定 */
    width: 95% !important;        /* スマホで左右に少し余裕を持たせる */
    margin-left: auto !important;  /* 左の余白を自動計算 */
    margin-right: auto !important; /* 右の余白を自動計算（これで中央に寄ります） */
    padding: 0 !important;
    display: block !important;
}


/* ==========================================
 * トップページのヒーローセクション
 * ========================================== */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /*画面の高さの80%を使う（迫力が出ます）*/

    /* 背景画像の設定（ここにお店のメイン写真のURLを入れてください） */
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/wp-content/uploads/2026/01/store-interior.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* スクロール時に画像が固定されてオシャレになります */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 文字が入る中心部分 */
.hero-content {
    text-align: center;
    color: #ffffff;
    padding: 20px;
    z-index: 2;
}

.hero-content h1 {
    font-family: "Playfair Display", serif; /* 渋い明朝体系がおすすめ */
    color: #ffffff;
    font-size: 4rem;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    font-weight: 300;
}

/* スマホ用の調整 */
@media (max-width: 768px) {
    .hero-section {
        height: 60vh;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
}


/* ==========================================
 * トップページの流れるスライダー
 * ========================================== */

/* スライダー全体の余白 */

.top-gallery-section {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    overflow: hidden; /* スライダーのはみ出しをカット */
}
.top-gallery-section .concept-text p {
    line-height: 1.8;
    letter-spacing: 0.05em;
    opacity: 0.9; /* わずかに透かすと上品になります */
}
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Swiperの動きをリニア（一定速度）にする */
.top-swiper .swiper-wrapper {
    transition-timing-function: linear !important; /* これが「滑らか」の正体です */
    margin: 0 auto;
}

/* トップページのスライダー：スライドの幅設定 */
.top-swiper .swiper-slide {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 画像がコンテナの幅いっぱいに広がるように明示する */
.top-swiper .slide-img-wrap {
    width: 100%;
    height: 400px; /* PCでの高さ */
}

@media (max-width: 768px) {
    .top-swiper .slide-img-wrap {
        height: 250px; /* スマホでは少し低くするとバランスが良いです */
    }
}

/* 画像自体の表示設定 */
/* スライド画像の外枠 */
.slide-img-wrap {
    width: 100%;
    height: 300px; /* 少し高さを出すと解像度感が増します */
    overflow: hidden;
    background: #2a2420; /* 読み込み前の背景色 */
}

.top-swiper .slide-img-wrap img {
    width: 100%;
    height: 100%;
    /* cover: 枠いっぱいに広げる（端が切れるが隙間なし）
       contain: 全体を入れる（隙間ができるが写真は切れない）
       家具なら cover の方が高級感が出ますが、お好みで。
    */
    object-fit: cover; 
    object-position: center; /* 中心を基準にする */
    image-rendering: -webkit-optimize-contrast; /* ブラウザの鮮明化を助ける魔法 */
}
/* スライドのホバーで動きを止めたくない場合はそのままでOK */
.top-swiper .swiper-slide img {
    filter: brightness(0.9);
    transition: filter 0.3s;
}

.top-swiper .swiper-slide:hover img {
    filter: brightness(1.1);
}

/* SwiperがJSで制御される前の「素」の状態を整える */
.top-swiper {
    overflow: hidden;
    touch-action: pan-y;
}
.top-swiper .swiper-wrapper {
    display: flex;
    transition-timing-function: linear !important;
    margin-bottom: 50px;
}
/* 一覧へ飛ぶボタン */
.view-more {
    text-align: center;
}

.btn-vintage {
    display: inline-block;
    padding: 15px 40px;
    background: #5d4037;
    color: #fff !important;
    text-decoration: none;
    border: 1px solid #5d4037;
    transition: all 0.3s;
}

.btn-vintage:hover {
    background: transparent;
    color: #5d4037 !important;
}

/* 共通：コンテナとフレックス */
.flex-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ==========================================
 * トップページのコンセプトセクション
 * ========================================== */

.concept-section {
    padding: 100px 0;
    background: rgba(0, 0, 0, 0.1);
    /* backdrop-filter: blur(10px); */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
}

.concept-text {
    flex: 1;
}

.concept-text .sub-title {
    display: block;
    font-size: 0.9rem;
    color: #a88e71;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
}

.concept-text h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    font-family: serif;
}

.concept-text p {
    line-height: 2;
    margin-bottom: 20px;
}

.concept-image {
    flex: 1;
}

.concept-image img {
    width: 100%;
    box-shadow: 10px 10px 0 #2a1d15; /* 画像の後ろに少し飾り */
}


/* ==========================================
 * トップページのスペースセクション
 * ========================================== */
.top-space-section {
    padding: 100px 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.space-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 30px;
}

.space-card {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.space-card-img {
    position: relative;
    aspect-ratio: 3 / 4; /* 縦長のオシャレな比率 */
    overflow: hidden;
    background-color: #2a2420;
}

.space-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    filter: brightness(0.7); /* 最初は少し暗め */
}
/* 黒い透過背景（オーバーレイ）を作る */
.space-card-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 黒の40%透過。お好みで 0.6 などに調整 */
    z-index: 1; /* 画像(0)と文字(2)の間に配置 */
}
/* 文字が載るオーバーレイ */
.space-card-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; 
    width: 100%;
    color: #fff;
    z-index: 2;
}

.space-card-overlay h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}

.space-card-overlay span {
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    color: #a88e71;
}

/* ホバー演出 */
.space-card:hover img {
    transform: scale(1.1);
    filter: brightness(0.9);
}

.space-card:hover .space-card-overlay h3 {
    color: #a88e71;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .space-card-grid {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 20px;
    }
    .space-card-img {
        aspect-ratio: 16 / 9; /* スマホでは横長にしてスクロールしやすく */
    }
}

/* ==========================================
 * トップページのInstagramセクション
 * ========================================== */

.insta-section {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 横に4つ */
    gap: 15px;
    margin-top: 40px;
}

.insta-item {
    aspect-ratio: 1 / 1; /* 正方形にする */
    overflow: hidden;
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.insta-item:hover img {
    opacity: 0.8;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column; /* 縦並びに */
        gap: 30px;
    }
    .insta-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    }
}

/* ==========================================
 * トップページのお店情報セクション
 * ========================================== */
.shop-info-section {
    padding: 80px 20px;
    background: rgba(168, 142, 113, 0.02);
}

.shop-access-flex {
    display: flex;
    flex-direction: column; /* 縦並びに変更 */
    gap: 40px; /* アイテム間の隙間 */
}

/* 各アイテム（マップと画像）の幅を均等にする */
.access-item {
    flex: 1;
    min-width: 0; /* flexアイテムの崩れ防止 */
}

.access-item h3 {
    font-size: 1.2rem;
    color: #a88e71;
    margin-bottom: 15px;
    font-family: serif;
}

/* マップのレスポンシブ対応 */
.map-wrapper {
    width: 100%;
    border: 1px solid rgba(168, 142, 113, 0.3);
}

/* 駐車画像のレスポンシブ対応 */
.parking-image-wrapper img {
    width: 100%;
    height: 395px;
    object-fit: cover; /* 画像の比率を保ちつつ枠いっぱいに表示 */
    border: 1px solid rgba(168, 142, 113, 0.3);
}

.shop-image-wrapper img {
    width: 100%;
    height: 513px;
    object-fit: cover; /* 画像の比率を保ちつつ枠いっぱいに表示 */
    border: 1px solid rgba(168, 142, 113, 0.3);
}

.address, .parking-note {
    margin-top: 15px;
    font-size: 0.9rem;
}

/* --- スマホ表示（画面幅が768px以下のとき） --- */
@media (max-width: 768px) {
    .shop-access-flex {
        gap: 50px; /* 縦に並んだ時の間隔を調整 */
    }

    .parking-image-wrapper img {
        height: auto; /* スマホでは画像の高さは自動調整 */
    }
}

/* ==========================================
 * aboutページのスタイル
 * ========================================== */

.page-about .container.mini {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
    line-height: 2;
}

.about-hero {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('./wp-content/uploads/about-hero.jpg') center/cover no-repeat;
    text-align: center;
}

.about-section {
    padding: 100px 20px;
    text-align: left !important;
}

.section-title {
    font-family: 'Playfair Display', serif;
    color: #a88e71;
    margin-bottom: 40px;
    font-size: 2rem;
}

.about-split-img {
    display: flex;
    gap: 10px;
    background: #000;
}

.split-img-item {
    flex: 1;
    overflow: hidden;
}

.split-img-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    opacity: 0.8;
}

.profile-bg {
    background: rgba(168, 142, 113, 0.05);
}
/* プロフィールセクションのレイアウト */
.profile-flex-layout {
    display: flex;
    align-items: center;
    gap: 60px;
    margin: 0 auto;
}

.profile-image-area {
    flex: 1;
}

.profile-image-area img {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形に */
    object-fit: cover;
    border: 1px solid #a88e71;
    padding: 10px; /* 額縁のような効果 */
}

.profile-text-area {
    flex: 1.5;
    text-align: left;
}

.profile-text-area h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #e2e2e2;
}

/* Space Policy の装飾 */
.policy-section {
    background: rgba(168, 142, 113, 0.03); /* ほんのり色を変える */
    border-top: 1px solid rgba(168, 142, 113, 0.1);
}



/* スマホ表示の調整 */
@media (max-width: 768px) {
    .profile-flex-layout {
        flex-direction: column;
        text-align: center;
    }
    .profile-text-area {
        text-align: center;
    }
}
/* ==========================================
 * 作品ギャラリーのスタイル
 * ========================================== */

.archive-intro {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0 20px;
}
.intro-text {
    line-height: 1.8;
    color: #a88e71; /* サブタイトルと同じ色で統一感を出す */
    letter-spacing: 0.05em;
}
@media (max-width: 768px) {
    .intro-text {
        text-align: left;
    }
}
/* 1. コンテナ自体の横幅を強制固定 */
.archive-container {
    width: 100% !important;
    max-width: 100vw !important; /* 画面幅以上に絶対広げない */
    overflow-x: hidden !important; /* 横スクロールを禁止 */
    padding: 0 !important;
}

/* 2. ギャラリー外枠：隙間の計算をシンプルに */
.vintage-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 30px 0 !important;
    padding: 5px !important; /* 全体の端に少しだけ余白 */
    box-sizing: border-box !important;
}

/* 3. 各アイテム：2枚が絶対に横に並ぶサイズ */
.gallery-item {
    /* 100%から隙間分を引いて2で割る。48%くらいにするのが最も安全です */
    width: 98% !important; 
    margin: 1% !important; /* 上下左右に1%ずつ余白 */
    flex: 0 0 98% !important; /* 勝手に伸び縮みさせない */
    box-sizing: border-box !important;
}
.gallery-item:hover img {
    transform: scale(1.05); /* ホバー時の演出 */
    transition: transform 0.3s;
}
/* 4. 画像の見切れ・突き出しを防止 */
.item-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* ここで強制的に正方形にする */
    overflow: hidden !important;
}

.item-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 枠に合わせて切り抜く（突き出さない） */
    display: block !important;
}

/* 5. PC・タブレット：崩れないように列数を増やす */
@media (min-width: 349px) {
    .gallery-item {
        width: 48% !important;
        flex: 0 0 48% !important;
    }
}

@media (min-width: 768px) {
    .gallery-item {
        width: 31% !important;
        flex: 0 0 31% !important;
    }
}

@media (min-width: 1024px) {
    .gallery-item {
        width: 31% !important;
        flex: 0 0 23% !important;
    }
    .vintage-gallery {
        max-width: 1200px;
        margin: 30px auto !important;
    }
}

/* ==========================================
 * 作品ギャラリーのポップアップのスタイル
 * ========================================== */

/* ポップアップの中身（最初は隠す） */
.mfp-hide {
    display: none !important;
}

/* ポップアップ表示時のスタイル */
.white-popup {
    background: #fdfaf5; /* 古材に合う温かみのあるオフホワイト */
    padding: 30px;
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
    border: 1px solid #d1c7b7;
    position: relative;
    max-height: 90vh; /* 画面の高さの90%までに制限 */
    overflow-y: auto; /* 内容が多い場合はポップアップ内でスクロール */
}

.popup-inner {
    /* 比率を絶対に崩さない設定 */
    display: block;
    max-width: 100%;
    max-height: 80vh; /* 画面に収まる高さ */
    width: auto;      /* 比率を維持 */
    height: auto;     /* 比率を維持 */  
    object-fit: contain; 
    margin: 0 auto;
}

/* --- 画像エリアの制限 --- */
.popup-image {
    flex: 1 1 100%;      /* デフォルトは全幅（スマホ優先） */
    max-width: 100%;
    min-width: 0;        /* Swiper崩れ防止の魔法の1行 */
}

.popup-image img {
    width: 100%;
    height: auto;
}

/* 説明文エリア */
.popup-details {
    flex: 1 1 100%;
}

.popup-details h2 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}
/* PCサイズ（768px以上）では画像と説明を横並びに */
@media (min-width: 768px) {
    .popup-image {
        flex: 1 1 450px; /* PCでは幅を確保 */
    }
    .popup-details {
        flex: 1 1 300px;
    }
}
.contact-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #5d4037;
    color: #fff !important;
    text-decoration: none;
    margin-top: 20px;
    font-weight: bold;
}

/* ポップアップ内の紹介文エリア */
.item-introduce {
    margin: 20px 0;
    padding-top: 15px;
    border-top: 1px dashed #d1c7b7; /* 上に区切り線 */
    line-height: 1.8;
    color: #4a3a2a;
}

.item-introduce p {
    margin-bottom: 1em;
}

.item-introduce strong {
    color: #5d4037;
}

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

/* ポップアップ内のスライダーエリア */

/* スライダーを包むコンテナ */
.slider-container {
    position: relative;
    width: 100%;
}

/* 矢印（ガイド）のデザイン */
.slider-guide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(93, 64, 55, 0.7); /* 古材に合う濃い茶色 */
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    pointer-events: none; /* クリックを邪魔しない（スクロールしてもらうため） */
    opacity: 0.8;
    z-index: 10;
}

.slider-guide.prev { left: 10px; }
.slider-guide.next { right: 10px; }

/* PCでマウスを乗せた時だけ少し強調 */
.slider-container:hover .slider-guide {
    opacity: 1;
}

/* 画像の下にスクロールバーを少し見せて、スライダーであることを強調する */
.item-slider::-webkit-scrollbar {
    display: block !important;
    height: 4px;
}
.item-slider::-webkit-scrollbar-track {
    background: #eee;
}
.item-slider::-webkit-scrollbar-thumb {
    background: #d1c7b7;
}
.item-slider .kitchen-slider .space-slider {
    display: flex;
    overflow-x: auto; /* 横スクロールを可能に */
    scroll-snap-type: x mandatory;
    gap: 10px;
    background: #000;
}

.slide-image {
    flex: 0 0 100%; /* 1枚を100%幅に */
    scroll-snap-align: start;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 50vh;      /* 画面の高さの半分までに制限（これが重要） */
    object-fit: contain;
    display: block;
    margin-bottom: 10px;
}

/* スクロールバーのデザインを渋くする */
.item-slider::-webkit-scrollbar {
    height: 8px;
}
.item-slider::-webkit-scrollbar-thumb {
    background: #5d4037;
    border-radius: 4px;
}

/* Swiperの親コンテナ：ここからはみ出さないようにする */
.item-slider.swiper {
    background: #fdfaf5; /* 黒(#000)から白、またはサイト背景色(#fdfaf5)に変更 */
    height: auto; /* 高さを固定せず、中身に合わせる */
    width: 100%;
    height: auto;
    aspect-ratio: auto; /* 任意のアスペクト比を固定（例: 3:2） */

}

/* スライドの中身 */
.swiper-wrapper {
    display: flex !important;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}


/* 矢印の色を茶色系に変更 */
.swiper-button-next,
.swiper-button-prev {
    color: #a68d71 !important; /* ビンテージなベージュ・ブラウン */
}

/* 下の点々の色 */
.swiper-pagination-bullet-active {
    background: #a68d71 !important;
}

/* ==========================================
 * 作品一覧のフィルター機能
 * ========================================== */

/* フィルターナビ */
.filter-nav {
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    background: #fff;
    border: 1px solid #5d4037;
    color: #5d4037;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.filter-btn.active, .filter-btn:hover {
    background: #5d4037;
    color: #fff;
}

/* フィルター時のアニメーション */
.gallery-item {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery-item.is-hidden {
    display: none; /* または opacity: 0; visibility: hidden; */
}
/* アニメーション */
.mfp-fade.mfp-bg { opacity: 0; transition: all 0.3s ease-out; }
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; }
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; transition: all 0.3s ease-out; }

/* ==========================================
 * Spaceページ専用スタイル
 * ========================================== */
/* --- Space Page Styles --- */
.page-space {
    padding-bottom: 100px;
}

.page-hero {
    padding: 120px 0 80px;
    text-align: center;
    background: rgba(0,0,0,0.2);
}

.page-hero h1 {
    font-size: 3rem;
    font-family: serif;
    color: #a88e71;
    margin: 20px 0;
}

/* 各セクションのレイアウト */
/* 各セクションの共通ブロック */
.space-section-block {
    position: relative;
    padding: 120px 0; /* 上下の余白 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* パララックス効果（背景がゆっくり動く） */
    z-index: 1;
}

/* 背景画像の上に暗いレイヤーを重ねる（文字を読みやすくする） */
.space-section-block::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75); /* 暗さの調整 */
    z-index: -1;
}

/* 背景画像の設定（実際のURLに差し替えてください） */
.bg-workshop { background-image: url('/wp-content/uploads/2026/01/store-interior.jpg'); }
.bg-cafe     { background-image: url('/wp-content/uploads/2026/01/cafe-space-2.jpg'); }
.bg-rental   { background-image: url('/wp-content/uploads/2026/01/kitchen-use.jpg'); }

/* テキストエリアの調整（背景に馴染むように） */
.space-text {
    padding: 40px;
    background: rgba(26, 22, 20, 0.6); /* テキストの背後に少しだけ色をのせる */
    backdrop-filter: blur(5px); /* 背景を少しぼかして高級感を出す */
    border: 1px solid rgba(168, 142, 113, 0.2);
}

/* ワークショップテーブルの背景調整 */
.workshop-table th {
    background-color: rgba(168, 142, 113, 0.2);
}

.workshop-table td {
    background-color: rgba(255, 255, 255, 0.02);
}

.workshop-hero{
    margin-bottom: 40px;
}

/* ワークショップ一覧の表調整 */
.workshop-table td.ws-content {
    max-width: 400px; /* 必要に応じて調整 */
    line-height: 1.6;
    vertical-align: top;
}

.ws-content-inner {
    font-size: 0.9rem;
    color: #e2e2e2;
    margin-bottom: 10px;
}

.btn-text-link {
    display: inline-block;
    color: #a88e71;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    transition: 0.3s;
    border-bottom: 1px solid transparent;
}

.btn-text-link:hover {
    color: #fff;
    border-bottom: 1px solid #a88e71;
}

/* スマホ用の調整（固定背景を解除すると動作が軽くなります） */
@media (max-width: 768px) {
    .space-section-block {
        background-attachment: scroll;
        padding: 60px 0;
    }
    .space-text {
        padding: 20px;
    }
    .space-image {
        display: none; /* スマホではテキストのみにする場合 */
        /* または min-height: 100px; などにして少しだけ隙間を作る */
    }
}

.space-item {
    padding: 80px 0 0 0;
    gap: 80px;
    align-items: center;
}

.space-item.reverse {
    flex-direction: row-reverse;
}

.space-image {
    flex: 0.6;      /* 元の比率を維持 */
    min-height: 200px; /* 空白としての高さを確保（お好みで調整） */
    background: transparent; /* 背景は透明に */
}

.space-image img {
    width: 100%;
    box-shadow: 20px 20px 0 rgba(168, 142, 113, 0.1);
}

.space-text {
    flex: 0.8;
}

.space-text .number {
    font-family: "Playfair Display", serif;
    font-size: 3rem;
    color: rgba(168, 142, 113, 0.2);
    display: block;
    line-height: 1;
}

.space-text h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-family: serif;
}

.space-text .sub-h {
    color: #a88e71;
    font-weight: bold;
    margin-bottom: 25px;
}

.space-details {
    margin-top: 20px;
    padding-left: 20px;
    color: #a88e71;
    font-size: 0.9rem;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .space-item, .space-item.reverse {
        flex-direction: column;
        gap: 40px;
        padding: 50px 0;
    }
    .page-hero h1 {
        font-size: 2rem;
    }
}
/* --- ワークショップ一覧（表形式） --- */
.workshop-table-wrap {
    margin-top: 30px;
    overflow-x: auto; /* スマホで横スクロールできるようにする */
}

.workshop-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    color: #e2e2e2;
}

.workshop-table th, 
.workshop-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(168, 142, 113, 0.3);
    text-align: left;
}

.workshop-table th {
    color: #a88e71;
    font-family: serif;
    background-color: rgba(255, 255, 255, 0.05);
}

.workshop-table .ws-date {
    white-space: nowrap; /* 日付が改行されないようにする */
    font-weight: bold;
}

.workshop-table .ws-title {
    color: #a88e71;
    font-weight: bold;
}

.workshop-table .ws-content {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* スマホ表示の調整 */
@media (max-width: 600px) {
    .workshop-table th, 
    .workshop-table td {
        padding: 10px;
        font-size: 0.85rem;
    }
}

.archive-workshop{
    margin-bottom: 40px;
}

/* ==========================================
 * カフェページ専用スタイル
 * ========================================== */

.cafe-menu-section {
    padding: 80px 20px;
    background: rgba(168, 142, 113, 0.03);
}
.cafe-menu-image {
    width: auto;
    height: 400px;
    text-align: center;
    object-fit: contain;
    box-shadow: 20px 20px 0 rgba(168, 142, 113, 0.1);
    margin-bottom: 40px;
}
.cafe-gallery {
    padding: 80px 0; /* 左右の余白をなくして画像を目立たせる */
    text-align: center;
}

.cafe-gallery .section-title {
    margin-bottom: 50px;
}

.gallery-images {
    display: flex;
    flex-wrap: wrap; /* 小さい画像を複数並べる可能性も考慮 */
    gap: 10px;
}

.cafe-img-large {
    flex: 2; /* 広い幅をとる */
    height: 500px;
    object-fit: cover;
}

.cafe-img-small {
    flex: 1; /* 狭い幅をとる */
    height: 500px;
    object-fit: cover;
}

.vintage-frame {
    background: var(--frame-dark);
    padding: 35px;
    box-shadow: 
        inset 0 0 70px rgba(0,0,0,0.8),
        0 40px 80px rgba(0,0,0,0.9);
    border: 14px solid var(--frame-edge);
    border-radius: 2px;
    position: relative;
    width: 100%;
    max-width: 600px; /* 看板の理想的な最大横幅 */
    margin: 0 auto;   /* 中央寄せ */
}

/* 木の背景板 */
.wood-board {
    background-color: var(--wood-light);
    /* 木の質感を出すグラデーション */
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(139, 69, 19, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(139, 69, 19, 0.04) 0%, transparent 50%);
    background-size: 100% 200px;
    padding: 2rem 2.5rem;
    position: relative;
    box-shadow: inset 0 0 100px rgba(184, 134, 11, 0.15);
    border-radius: 1px;
    overflow: hidden;
    text-align: center;
}

/* 波線のテクスチャ（透明度をさらに下げて馴染ませた） */
.wood-board::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.04; /* 0.1から0.04に下げて透過を強めました */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q 25 10 50 20 T 100 20 M0 50 Q 25 40 50 50 T 100 50 M0 80 Q 25 70 50 80 T 100 80' fill='none' stroke='%238b4513' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    pointer-events: none;
}

/* 焼き印エフェクト */
.branded-text {
    color: var(--brand-color);
    font-family: 'Noto Serif JP', serif;
    text-shadow: 
        1px 1px 1px rgba(255,255,255,0.4), 
        -1px -1px 1px rgba(0,0,0,0.2);
    letter-spacing: 0.08em;
}

.price-badge {
    display: inline-block;
    border: 2px solid var(--brand-color);
    padding: 0.4rem 1.2rem;
    margin: 1.5rem 0;
    font-weight: 900;
    transform: rotate(-1.5deg);
    opacity: 0.9;
    align-items: center;
}

.drink-menu-list {
    margin: 3rem 0;
    position: relative;
    z-index: 1;
}

.drink-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    text-align: center;
    position: relative;
}

.drink-menu-item::before, .drink-menu-item::after {
    content: '•';
    margin: 0 15px;
    opacity: 0.4;
}

.drink-sub-info {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-top: 2rem;
    padding: 1.5rem 0 0 0;
    border-top: 1px solid rgba(61, 43, 31, 0.15);
    font-family: 'Sawarabi Mincho', serif;
    font-weight: 700;
    position: relative;
    z-index: 1;
} 

/* 飾り用のボルト */
.bolt {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #222;
    border-radius: 50%;
    box-shadow: inset -4px -4px 8px rgba(255,255,255,0.05), 4px 4px 10px rgba(0,0,0,0.8);
}
.bolt-tl { top: 12px; left: 12px; }
.bolt-tr { top: 12px; right: 12px; }
.bolt-bl { bottom: 12px; left: 12px; }
.bolt-br { bottom: 12px; right: 12px; }

.wood-logo {
    font-size: 3.5rem;
    margin-bottom: 0rem;
    display: block;
    opacity: 0.8;
    text-align: center;
}

/* --- モーバイル向けのサイズ圧縮 --- */
@media (max-width: 640px) {
    /* 外枠の余白をさらに削る */
    .vintage-frame {
        padding: 10px;
        border-width: 8px; /* 枠線も少し細くして圧迫感を軽減 */
    }

    /* ボード内の上下余白を大幅にカット */
    .wood-board {
        padding: 1.5rem 1rem; /* 4rem -> 1.5rem */
    }

    /* ロゴとタイトルの間隔を詰める */
    .wood-logo {
        font-size: 2.5rem;
        margin-bottom: -5px;
    }

    /* 見出しサイズを調整 */
    .wood-board header h1 {
        font-size: 1.8rem !important; /* text-4xlを上書き */
        margin-bottom: 0.25rem !important;
    }

    /* リストの間隔と文字サイズを圧縮 */
    .drink-menu-list {
        margin: 1.5rem 0; /* 3rem -> 1.5rem */
    }

    .drink-menu-item {
        margin-bottom: 1rem; /* 1.8rem -> 1rem */
        font-size: 1.1rem;    /* 1.4rem -> 1.1rem */
    }

    /* バッジのサイズとマージンを調整 */
    .price-badge {
        margin: 0.5rem 0;
        padding: 0.2rem 0.8rem;
    }

    /* 下部情報の間隔を詰める */
    .drink-sub-info {
        margin-top: 1rem;
        padding: 1rem 0 0 0;
    }
}

/* ==========================================
 * 施設紹介セクション
 * ========================================== */
.rental-intro{
    margin-top: 40px;
}
.rental-flow{
    margin-bottom: 40px;
}
.facility-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 40px 0;
}
.facility-item {
    background: rgba(255,255,255,0.05);
    padding: 30px;
    border-top: 2px solid #a88e71;
}
.facility-item h3 {
    color: #b18757;
    margin-bottom: 15px;
}
.small-note {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 10px;
}

/* レンタルスペース専用スタイル */
.rental-content-area h3 {
    color: #a88e71;
    border-bottom: 1px solid rgba(168, 142, 113, 0.3);
    padding-bottom: 10px;
    margin: 60px 0 30px;
    font-family: serif;
    font-size: 1.5rem;
}

/* 2カラムレイアウト */
.rental-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.rental-info-box ul {
    list-style: none;
    padding: 0;
}

.rental-info-box li {
    margin-bottom: 12px;
    padding-left: 1.2em;
    position: relative;
}

.rental-info-box li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #a88e71;
}

/* モーダルを開くボタン */
.btn-small {
    background: transparent;
    border: 1px solid #a88e71;
    color: #a88e71;
    padding: 5px 15px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.3s;
}
.btn-small:hover {
    background: #a88e71;
    color: #fff;
}

/* モーダル背景（最初は非表示） */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

/* モーダルの中身 */
.modal-content {
    position: relative;
    max-width: 80%;
    max-height: 80%;
    text-align: center;
}

.modal-content img {
   /* 比率を絶対に崩さない設定 */
    display: block;
    max-width: 100%;
    max-height: 80vh; /* 画面に収まる高さ */
    width: auto;      /* 比率を維持 */
    height: auto;     /* 比率を維持 */
    
    /* 万が一枠が固定されても比率を保つ */
    object-fit: contain; 
    
    /* 縁取りなど */
    border: 1px solid rgba(168, 142, 113, 0.5);
    margin: 0 auto;
}

.modal-caption {
    color: #fff;
    margin-top: 15px;
    font-size: 0.9rem;
}

/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: -40px; right: 0;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}

/* ご利用の流れ */
.flow-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.step {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border: 1px solid rgba(168, 142, 113, 0.1);
    text-align: center;
}

.step-num {
    font-family: serif;
    font-size: 2.5rem;
    color: rgba(168, 142, 113, 0.3);
    display: block;
    margin-bottom: 10px;
}

.step h4 {
    margin-bottom: 15px;
    color: #a88e71;
}

.rental-contact-btn {
    text-align: center;
    margin-top: 80px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .rental-grid, .flow-steps {
        grid-template-columns: 1fr;
    }
    .facility-grid {
        grid-template-columns: 1fr; /* 画面幅が狭い時は1列にする */
        gap: 20px;
    }
    
    .facility-item {
        padding: 20px; /* スマホでは余白を少し詰める */
    }
}
/* ==========================================
 * 問い合わせForm
 * ========================================== */

/* コルクボード全体の背景設定 */
.corkboard-wrapper {
    background-color: #3d2b1f; /* ダークなコルク色 */
    background-image: 
        radial-gradient(circle at 2px 2px, #2a1d15 1px, transparent 0);
    background-size: 5px 5px;
    padding: 50px 20px;
    border-radius: 4px;
    border: 14px solid #251a12; /* 木枠 */
    box-shadow: 
        inset 0 0 60px rgba(0,0,0,0.5),
        0 20px 40px rgba(0,0,0,0.6);
    max-width: 1000px;
    width: 100%; /* 幅をフルに */
    position: relative;
    z-index: 2;
    font-family: serif;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

/* ヴィンテージ風の付箋（羊皮紙風） */
.sticky-note {
    background: #d9c5a3;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
    padding: 40px 30px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    position: relative;
    color: #3e2723;
    box-sizing: border-box;
}

.form-title {
    text-align: center;
    font-size: 26px;
    color: #2d1b10;
    margin-top: 0;
    margin-bottom: 30px;
    border-bottom: 2px double rgba(0,0,0,0.1);
    padding-bottom: 15px;
    letter-spacing: 0.05em;
}

.form-row {
    margin-bottom: 20px;
}

.form-row label {
    display: block;
    font-weight: bold;
    color: #4e342e;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-row .required {
    color: #b71c1c;
    font-size: 11px;
    margin-left: 5px;
}

/* 入力欄の調整 */
input[type="text"],
input[type="email"],
textarea {
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.2) !important;
    background: rgba(255,255,255,0.3) !important;
    padding: 10px !important;
    box-sizing: border-box;
    transition: all 0.3s;
    font-size: 16px;
    color: #2d1b10;
    border-radius: 0; /* iOSのデフォルト角丸をリセット */
}

input:focus,
textarea:focus {
    background: rgba(255,255,255,0.6) !important;
    border-bottom: 1px solid #2d1b10 !important;
    outline: none;
}

/* 送信ボタン */
.submit-row {
    text-align: center;
    margin-top: 30px;
}

input[type="submit"] {
    background-color: #4e342e !important;
    color: #e8d5b5 !important;
    border: 1px solid #2d1b10 !important;
    padding: 12px 50px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4) !important;
    transition: all 0.2s !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: auto;
    max-width: 100%;
}

input[type="submit"]:hover {
    background-color: #2d1b10 !important;
    transform: translateY(-1px);
}

/* アンティーク・真鍮ピン */
.push-pin {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: radial-gradient(circle at 30% 30%, #cfb53b, #8b7500);
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

.push-pin::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 9px;
    width: 2px;
    height: 8px;
    background: #555;
}

/* Contact Form 7 内の自動挿入された改行を無効化 */
.wpcf7 br {
    display: none;
}

/* --- レスポンシブ対応の強化 --- */
@media (max-width: 600px) {
    body {
        padding: 10px; /* 外側の余白を狭く */
    }
    .corkboard-wrapper {
        padding: 40px 10px;
        border-width: 10px; /* 木枠を少し細く */
    }
    .sticky-note {
        padding: 30px 20px; /* 付箋内の余白を調整 */
    }
    .form-title {
        font-size: 22px;
    }
    input[type="submit"] {
        width: 100%; /* スマホではボタンを横いっぱいに */
        padding: 14px 20px !important;
    }
}

@media (max-width: 380px) {
    .corkboard-wrapper {
        border-width: 6px; /* さらに狭い画面では枠を細く */
        padding: 30px 5px;
    }
    .sticky-note {
        padding: 20px 15px;
    }
    .form-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
}

/* ==========================================
 * 店舗情報セクション
 * ========================================== */
.shop-info-section {
    padding: 100px 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-info-flex {
    display: flex;
    gap: 40px;
    align-items: center;
    align-content: center;
    margin-top: 40px;
}

.shop-map {
    flex: 1.2;
    filter: grayscale(30%) contrast(90%); /* 少し彩度を落としてサイトに馴染ませる */
}

.shop-details {
    flex: 0.8;
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-details h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    border-bottom: 1px solid #a88e71;
    padding-bottom: 10px;
}

.shop-details h3 span {
    font-size: 1rem;
    font-weight: normal;
    margin-left: 10px;
}

.info-list dt {
    color: #a88e71;
    font-weight: bold;
    margin-bottom: 5px;
}

.info-list dd {
    margin-left: 0;
    margin-bottom: 20px;
    line-height: 1.6;
}

.info-list dd a {
    color: inherit;
    text-decoration: none;
}

.small-note {
    font-size: 0.85rem;
    opacity: 0.8;
}

.shop-sns {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .shop-info-flex {
        flex-direction: column;
    }
    .shop-map, .shop-details {
        width: 100% !important;
    }
    .shop-map iframe {
        height: 300px;
    }
}

/* ==========================================
 * サンクスページのスタイル
 * ========================================== */
/* サンクスページ専用のスタイル（固定ページのスラッグがthanksの場合） */
/* サンクスページ全体の背景と余白 */
.page-id-129 #main-content {
    padding: 100px 20px !important;
    text-align: center !important;
    background-color: #1a1614 !important; /* 背景色をダークテーマに合わせる */
}

/* 見出し：お問い合わせありがとうございました */
.page-id-129 h1 {
    font-family: "Playfair Display", serif !important;
    font-size: 2.5rem !important;
    color: #a88e71 !important;
    margin-bottom: 30px !important;
    letter-spacing: 0.1em !important;
}

/* 本文テキスト */
.page-id-129 p {
    color: #e2e2e2 !important;
    line-height: 2 !important;
    max-width: 600px !important;
    margin: 0 auto 40px auto !important;
}

/* 戻るボタンの調整（ブロックエディタのボタンを使っている場合） */
.page-id-129 .wp-block-button__link {
    background-color: #5d4037 !important;
    color: #fff !important;
    border-radius: 0 !important; /* 角を丸くしない */
    padding: 15px 50px !important;
    font-size: 1rem !important;
    border: 1px solid #5d4037 !important;
    transition: 0.3s !important;
}

.page-id-129 .wp-block-button__link:hover {
    background-color: transparent !important;
    color: #a88e71 !important;
}

/* ==========================================
 * フッターのスタイル
 * ========================================== */
.site-footer {
    background-color: #12100e; /* 背景より一段暗い色 */
    color: #e2e2e2;
    padding: 40px 0 20px;
    border-top: 1px solid rgba(168, 142, 113, 0.2);
    font-size: 0.9rem;
}

.footer-logo-img{
    max-width: 150px;
    height: auto;
}
.footer-flex {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 20px;
}

/* 各ブロックの幅調整 */
.footer-brand { flex: 1.5; }
.footer-nav { flex: 1; }
.footer-contact { flex: 1.5; }

/* ロゴとテキスト */
.footer-logo {
    font-size: 1.8rem;
    color: #a88e71;
    margin-bottom: 15px;
    font-family: serif;
}

.footer-tagline {
    line-height: 1.8;
    opacity: 0.8;
}

/* タイトル見出し */
.site-footer h3 {
    font-size: 1.1rem;
    color: #a88e71;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(168, 142, 113, 0.3);
    display: inline-block;
    padding-bottom: 5px;
}

/* ナビゲーション */
.footer-nav ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 10px;
}

.footer-nav a {
    color: #e2e2e2;
    text-decoration: none;
    transition: 0.3s;
}

.footer-nav a:hover {
    color: #a88e71;
    padding-left: 5px;
}

/* contact */
.footer-contact ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    margin-bottom: 10px;
}

.footer-contact a {
    color: #e2e2e2;
    text-decoration: none;
    transition: 0.3s;
}

.footer-contact a:hover {
    color: #a88e71;
    padding-left: 5px;
}
/* SNSとコピーライト */
.footer-sns a {
    color: #a88e71;
    text-decoration: none;
    font-weight: bold;
}

.footer-copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    opacity: 0.5;
    font-size: 0.75rem;
}

/* スマホ対応：縦並びに切り替え */
@media (max-width: 768px) {
    .footer-flex {
        flex-direction: column;
        gap: 50px;
    }
    .footer-nav h3, .footer-contact h3 {
        display: block;
    }
}

/* ==========================================
 * 作品個別ページスタイル
 * ========================================== */

.works-header-text .category {
    display: block;
    color: #a88e71; /* ブランドカラーの金茶色 */
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.works-header-text h1 {
    font-size: 2.2rem;
    letter-spacing: 0.05em;
    margin: 0;
}

/* --- ギャラリーレイアウト --- */
.works-gallery {
    margin: 80px auto;
}

/* メイン画像：大きく表示 */
.main-image {
    width: 100%;
    margin-bottom: 20px;
}

.main-image img {
    width: 100%;
    height: auto;
    max-height: 70vh; /* 画面に収まる高さに制限 */
    object-fit: contain; /* 比率を維持 */
}

/* サブ画像：横に並べる */
.sub-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.sub-image-item img {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形に統一 */
    object-fit: cover;
    border: 1px solid rgba(168, 142, 113, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.sub-image-item img:hover {
    transform: scale(1.02);
    border-color: #a88e71;
}