@charset "UTF-8";

/* --- 1. 定義 (Variables) --- */
:root {
    /* Vivid & Organic Colors */
    --primary: #e91e63;   /* ビビッドピンク */
    --accent: #cddc39;    /* ライムグリーン */
    --text: #333;
    --bg: #fffafb;        /* ほんのりピンクがかった白 */
    --font-en: 'Cormorant Garamond', serif; /* エレガントな英語フォント */
    --font-jp: 'Zen Kaku Gothic New', sans-serif;
}

/* --- 2. Base --- */
body {
    font-family: var(--font-jp);
    color: var(--text);
    background-color: var(--bg);
    margin: 0;
    line-height: 1.8;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
img { width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }

.section-pad { padding: 80px 0; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }

/* タイトル周りのデザイン */
.section-title { margin-bottom: 40px; text-align: center; }
.section-title .en-title {
    font-family: var(--font-en);
    font-size: 3rem; /* 大きく見せる */
    color: var(--primary);
    display: block;
    line-height: 1;
    font-style: italic;
}
.section-title h3 {
    font-size: 1rem;
    margin: 10px 0 0;
    letter-spacing: 0.1em;
}

/* --- 3. Header --- */
.site-header {
    position: fixed; /* 固定ヘッダー */
    top: 0; left: 0; width: 100%;
    z-index: 100;
    padding: 20px 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
}
.page-header {
    padding-top: 160px; /* ヘッダーの高さ＋元の余白 */
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

.logo a {
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary);
}

/* ★修正：ハンバーガーメニューはPCでは非表示（これでナビが右に寄ります） */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 200;
}

/* ★修正：間隔を広げてエレガントに */
.main-nav ul { 
    display: flex; 
    gap: 50px; /* 30px -> 50px */
    align-items: center; 
}

/* ★修正：リンクのデザインを強化 */
.main-nav a {
    font-family: var(--font-en);
    font-size: 1.1rem;
    font-weight: 500; /* 少し細くして上品に */
    color: var(--text);
    position: relative;
    letter-spacing: 0.05em;
}

/* ★追加：ホバー時の下線アニメーション */
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--primary);
    transform: scaleX(0); /* 最初は隠す */
    transition: transform 0.3s ease;
    transform-origin: right; /* 右から消える */
}

.main-nav a:hover {
    color: var(--primary);
}

.main-nav a:hover::after {
    transform: scaleX(1); /* ホバーで出現 */
    transform-origin: left; /* 左から出る */
}

/* Orderボタン（HTML削除済みですが、念のためスタイルは残すか削除してもOK） */
.btn-nav a {
    background: var(--primary);
    color: #fff;
    padding: 8px 25px;
    border-radius: 50px;
}
.btn-nav a:hover {
    background: var(--accent);
    color: var(--text);
}

/* --- 4. Hero Section (独創的な部分) --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 有機的な画像エリア */
.hero-visual {
    position: absolute;
    top: 50%; right: 10%;
    transform: translateY(-50%);
    width: 45%;
    z-index: 1;
}

.blob-shape {
    width: 100%;
    /* aspect-ratio: 1/1; */
    height: 500px;
    
    /* ★ここがポイント：四角くない、有機的な形を作る */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    overflow: hidden;
    animation: morph 8s ease-in-out infinite; /* 形がうねうね動くアニメ */
    box-shadow: 20px 20px 0 var(--accent); /* 影をライムグリーンで */
}

.blob-shape img {
    height: 100%;
    object-fit: cover;
}

/* うねうね動くアニメーション定義 */
@keyframes morph {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* ヒーローテキスト */
.hero-text {
    position: relative;
    z-index: 2;
    margin-right: 30%; /* 画像と被らないように */
}

.catch-copy {
    font-family: var(--font-en);
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.hero-text h2 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin: 0 0 30px;
    font-feature-settings: "palt"; /* 日本語の詰め */
}

.hero-text em {
    font-style: normal;
    color: var(--primary);
    position: relative;
}
/* 強調線 */
.hero-text em::after {
    content: '';
    position: absolute;
    bottom: 5px; left: 0;
    width: 100%; height: 10px;
    background: var(--accent);
    z-index: -1;
    opacity: 0.6;
    transform: rotate(-2deg);
}

.sub-text { font-size: 1rem; color: #666; }

/* 浮遊する花びら（装飾） */
.floating-petal {
    position: absolute;
    background: var(--primary);
    opacity: 0.2;
    border-radius: 50% 0 50% 0;
}
.p1 {
    width: 50px; height: 50px;
    top: 20%; left: 10%;
    animation: float 6s infinite ease-in-out;
}
.p2 {
    width: 30px; height: 30px;
    bottom: 10%; left: 40%;
    background: var(--accent);
    animation: float 8s infinite ease-in-out reverse;
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(20deg); }
}

/* --- 5. News Preview --- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}
.news-item:hover .news-img img { transform: scale(1.1); }
.news-img {
    overflow: hidden;
    border-radius: 20px 0 20px 0; /* 葉っぱのような形 */
    aspect-ratio: 16/9;
    margin-bottom: 15px;
}
.news-img img { transition: 0.5s; object-fit: cover; height: 100%; }
.news-info .date { font-family: var(--font-en); color: var(--primary); font-size: 0.9rem; }
.news-info h4 { margin: 5px 0 0; font-size: 1.1rem; }

.btn-arrow {
    display: inline-block;
    border-bottom: 1px solid var(--text);
    padding-bottom: 5px;
    font-family: var(--font-en);
    font-size: 1.2rem;
}

/* --- 6. Gallery Preview (Vivid Background) --- */
.bg-vivid {
    background-color: var(--primary);
    color: #fff;
    border-radius: 100px 0 100px 0; /* セクション自体も変形 */
    margin: 0 20px; /* 画面端から少し浮かせる */
}

.gallery-layout {
    display: flex;
    align-items: center;
    gap: 50px;
}

.gallery-text { flex: 1; }
.section-title.white .en-title { color: #fff; } /* 白文字上書き */

.btn-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100px; height: 100px;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-en);
    font-size: 1.2rem;
    margin-top: 30px;
}
.btn-circle:hover {
    background: #fff;
    color: var(--primary);
    transform: scale(1.1);
}

.gallery-images {
    flex: 1;
    position: relative;
    height: 400px;
}
.g-img {
    position: absolute;
    width: 250px;
    aspect-ratio: 1 / 1;
    border-radius: 50%; /* 丸い写真 */
    border: 5px solid #fff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.g-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* トリミングして埋める */
}
.g-img.item1 { top: 0; left: 0; z-index: 2; }
.g-img.item2 { bottom: 0; right: 0; z-index: 1; width: 200px; }

/* --- 7. Footer --- */
.site-footer {
    padding: 30px 0;
    text-align: center;
    font-family: var(--font-en);
    font-size: 0.9rem;
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .header-inner { padding: 0 20px; }
    .main-nav { display: none; }
    .hamburger { display: block; }
    
    .hero { flex-direction: column-reverse; height: auto; padding-top: 160px; padding-bottom: 50px; }
    .hero-visual { position: relative; width: 80%; transform: none; top: auto; right: auto; margin-bottom: 30px; }
    .hero-text { margin-right: 0; text-align: center; }
    
    .news-grid { grid-template-columns: 1fr; }
    
    /* ▼▼▼ ここから修正箇所 ▼▼▼ */

    /* 1. レイアウト枠：ボタン配置の基準点(relative)にする */
    .gallery-layout { 
        display: flex;
        flex-direction: column; 
        text-align: center;
        position: relative; /* ★重要：これが基準になります */
        padding-bottom: 30px;
    }

    /* 2. 画像エリア：高さ + パディングでスペース確保 */
    .gallery-images { 
        width: 100%; 
        height: 100px;         /* 画像が動く範囲 */
        padding-bottom: 300px; /* 下にボタン用の余白を作る */
        margin-top: 20px;
        position: relative;    /* 画像の基準 */
    }

    /* 3. ボタンを最下部に指定 */
    /* .gallery-textの中にありますが、absoluteで親枠の底へ移動させます */
    .gallery-text .btn-circle {
        position: absolute;
        left:35%;
        bottom: 10px;          /* 下端からの距離（余白の中に配置） */
        transform: translate(0%, 60%); /* 左右中央揃え */
        margin: 0;
        z-index: 10;           /* 画像より手前に表示 */
    }

    /* 4. 写真を真ん中に寄せる */
    .g-img { width: 170px; } /* 少しサイズ調整 */

    .g-img.item1 {
        /* top: 0%;             上端から少し下げる（中央寄せ） */
        /* left: 40% !important; */
        transform: translateX(0%); /* 左側に配置 */
    }
    
    .g-img.item2 {
        bottom: 5%;          /* 下端（padding含む）から離す（中央寄せ） */
        right: 45% !important;
        transform: translateX(90%);  /* 右側に配置 */
    }
}

/* --- 8. Gallery Page Style --- */

/* グリッドレイアウト */
.gallery-grid-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: 60px 40px; /* 縦の隙間を広めに */
}

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

/* 写真のスタイル */
.g-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形 */
    overflow: hidden;
    /* border-radiusはJSでランダムにつくので、ここでは指定しない */
    transition: transform 0.5s ease;
    box-shadow: 10px 10px 0 var(--accent); /* 影もデザインの一部 */
    margin-bottom: 20px;
    cursor: pointer;
}

.g-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* ホバー時の動き */
.g-photo:hover {
    transform: scale(0.98); /* 押した感じ */
}
.g-photo:hover img {
    transform: scale(1.1); /* 画像は拡大 */
}

/* オーバーレイ（マウス乗せた時の文字） */
.g-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(233, 30, 99, 0.8); /* ビビッドピンクの半透明 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.4s;
    color: #fff;
}
.g-photo:hover .g-overlay { opacity: 1; }

.g-overlay h3 {
    font-family: var(--font-en);
    font-size: 1.5rem;
    margin: 0;
}

/* 下の説明文 */
.g-desc {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
    line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .gallery-grid-full {
        grid-template-columns: 1fr; /* 1列 */
        gap: 50px;
    }
    .g-photo {
        max-width: 300px; /* スマホでデカすぎないように */
        margin: 0 auto 20px;
    }
}

/* --- 9. News Page Style --- */

/* ニュースリスト全体の枠 */
#news-list-full {
    max-width: 800px;
    margin: 0 auto;
}

/* 個々のニュース記事（横並び） */
.news-row {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    align-items: center;
    border-bottom: 1px solid #eee; /* 薄い線で区切る */
    padding-bottom: 40px;
}

/* 画像部分 */
.news-row-img {
    flex: 0 0 250px; /* 幅250px固定 */
    height: 180px;
    border-radius: 4px 50px 4px 50px; /* ちょっと変わった葉っぱ型 */
    overflow: hidden;
}
.news-row-img img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.news-row:hover .news-row-img img {
    transform: scale(1.1);
}

/* テキスト部分 */
.news-row-content {
    flex: 1;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.date {
    font-family: var(--font-en);
    color: var(--primary);
    font-weight: 600;
}

.cat-label {
    background: var(--bg);
    border: 1px solid var(--accent);
    color: var(--text);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
}

.news-row h3 {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    line-height: 1.6;
}

.read-more {
    font-size: 0.9rem;
    color: #999;
    font-family: var(--font-en);
    transition: 0.3s;
}
.news-row:hover .read-more {
    color: var(--primary);
    letter-spacing: 0.05em; /* ホバーで少し文字間が広がる */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .news-row {
        flex-direction: column; /* 縦並びに */
        gap: 20px;
        align-items: flex-start;
    }
    .news-row-img {
        width: 100%;
        flex: auto; /* 固定解除 */
        height: 200px;
    }
}
/* ==========================================
   Mobile Menu Style (Responsive)
   ========================================== */

@media (max-width: 768px) {
    /* 1. ハンバーガーボタンを表示 */
    .hamburger {
        display: block; /* ★必須：これでボタンが見えます */
        position: relative;
        width: 30px;
        height: 20px;
        z-index: 1001; /* メニューより手前に */
    }
    
    .hamburger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--primary);
        transition: 0.4s;
    }
    
    /* 三本線の位置 */
    .hamburger span:nth-of-type(1) { top: 0; }
    .hamburger span:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
    .hamburger span:nth-of-type(3) { bottom: 0; }

    /* ×印になるアニメーション（クラスがついた時） */
    .hamburger.active span:nth-of-type(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .hamburger.active span:nth-of-type(2) {
        opacity: 0; /* 真ん中は消える */
    }
    .hamburger.active span:nth-of-type(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }


    /* 2. ナビゲーションメニュー（最初は隠す） */
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* 画面いっぱい */
        background-color: rgba(255, 250, 251, 0.98); /* 背景色（少し透過） */
        z-index: 1000;
        
        /* 隠す設定 */
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
        
        /* 中身を中央揃えにする */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* メニューが開いた時（クラスがついた時） */
    .main-nav.open {
        opacity: 1;
        visibility: visible;
        display: flex; /* これがないと消えてしまうことがあるので念のため */
    }

    /* リンクを縦並びにする */
    .main-nav ul {
        flex-direction: column;
        gap: 40px;
    }

    .main-nav a {
        font-size: 1.5rem; /* スマホでは文字を大きく */
    }
}
/* --- 10. Access & Contact Page Style --- */

/* 店舗情報エリア（横並び） */
.access-layout-vivid {
    display: flex;
    align-items: center;
    gap: 60px;
}

.shop-info { flex: 1; }
.shop-info h3 {
    font-family: var(--font-en);
    font-size: 2.5rem;
    color: var(--primary);
    margin: 0 0 20px 0;
}
.address {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 2;
}
.info-list li {
    display: flex;
    margin-bottom: 10px;
    font-size: 1rem;
    border-bottom: 1px dashed #ddd; /* 点線で区切る */
    padding-bottom: 5px;
}
.info-list span {
    font-weight: 600;
    color: var(--primary);
    width: 80px; /* ラベルの幅を揃える */
}

/* マップエリア */
.shop-map {
    flex: 1.2; /* 地図を少し広めに */
}
.shop-map iframe {
    /* ★ポイント：地図自体を変形させる */
    border-radius: 30% 70% 50% 50% / 50% 30% 70% 50%;
    box-shadow: 20px 20px 0 var(--accent); /* ライムグリーンの影 */
    filter: grayscale(0.2); /* 彩度を少し落として馴染ませる */
    transition: 0.5s;
}
.shop-map:hover iframe {
    /* ホバーすると少し形が変わって、カラーになる */
    border-radius: 50% 50% 50% 50%;
    filter: grayscale(0);
}

/* コンタクトフォーム（磨りガラス風） */
.order-form {
    max-width: 700px;
    margin: 0 auto;
    
    background: rgba(255, 255, 255, 0.15); /* 白色の半透明 */
    backdrop-filter: blur(10px); /* すりガラス効果 */
    
    padding: 60px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px 0 50px 0; /* 葉っぱのような角丸 */
}

.form-group {
    margin-bottom: 30px;
}
.form-group label {
    display: block;
    color: #fff;
    font-family: var(--font-en);
    margin-bottom: 10px;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

/* 入力エリアのデザイン */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    color: var(--text);
    box-sizing: border-box;
    font-family: var(--font-jp);
}

.form-group textarea { height: 150px; }

/* 送信ボタン */
.btn-submit {
    background: #fff;
    color: var(--primary);
    font-family: var(--font-en);
    font-size: 1.2rem;
    padding: 15px 60px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
}
.btn-submit:hover {
    background: var(--accent); /* ライムグリーンに変化 */
    color: var(--text);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .access-layout-vivid { 
        flex-direction: column; /* 縦並び */
        gap: 40px;
    }
    .shop-map iframe { height: 300px; }
    
    .order-form { 
        padding: 30px; 
        border-radius: 30px;
    }
    .btn-submit {
        width: 100%; /* スマホではボタン幅いっぱい */
    }
}

/* --- Pagination Style --- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.page-btn {
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--font-en);
    font-size: 1rem;
    transition: 0.3s;
    
    /* Flexで文字を中央に */
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover {
    background: var(--bg);
}

.page-btn.active {
    background: var(--primary);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);
}

/* Prev/Next ボタンは横長に */
.page-btn.prev,
.page-btn.next {
    width: auto;
    padding: 0 20px;
    border-radius: 20px;
}
/* =========================================
   News Post Detail Page Style
   ========================================= */

/* PC表示: グリッドレイアウトで情報を整理 */
.post-container {
    display: grid;
    grid-template-columns: 40% 1fr; /* 画像エリア40%、本文エリア残り */
    gap: 0 50px; /* 横の間隔を広めに取って読みやすく */
    align-items: start; /* 上端揃え */
    
    /* レイアウトの配置定義 */
    grid-template-areas:
        "header header"
        "image  content"
        "footer footer";
}

/* 各要素の配置割り当て */
.post-header {
    grid-area: header;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee; /* タイトルの下に区切り線を追加しメリハリを */
    padding-bottom: 20px;
}

.post-image {
    grid-area: image;
}

.post-content {
    grid-area: content;
}

.post-footer {
    grid-area: footer;
    margin-top: 50px;
}

/* 画像のスタイル制御 */
.post-image img {
    width: 100%;
    height: auto;
    max-height: 400px;   /* ★重要: 高さを制限してスクロールを減らす */
    object-fit: cover;   /* 比率を崩さずトリミング */
    border-radius: 20px 4px 20px 4px; /* サイト全体のデザイン感に合わせた角丸 */
    box-shadow: 10px 10px 0 var(--accent); /* ギャラリー同様の影をつけて統一感 */
}

/* 記事タイトルの微調整 */
.post-header h1 {
    font-size: 2rem;
    margin-top: 10px;
    line-height: 1.4;
}

/* スマホ対応 (768px以下): 縦並びに戻す */
@media (max-width: 768px) {
    .post-container {
        display: block; /* グリッド解除 */
    }
    
    .post-image {
        margin-bottom: 30px;
    }
    
    .post-image img {
        max-height: 300px; /* スマホでも大きすぎないように調整 */
    }
    
    .post-header h1 {
        font-size: 1.5rem;
    }
}
/* =========================================
   Fix: Header Overlap Adjustment
   ========================================= */

/* 記事ページの上部余白を広げて、固定ヘッダーとの被りを解消 */
.post-section {
    padding-top: 160px; /* 他のページの .page-header と同じ高さを確保 */
}

/* スマホ表示時の微調整 */
@media (max-width: 768px) {
    .post-section {
        padding-top: 140px; /* スマホは少し詰め気味でバランス調整 */
    }
}