@charset "utf-8";

/* ===== 1. フォント指定 (既存サイト準拠) ===== */

body {
    font-family: "Rounded Mplus 1c", 'メイリオ', 'Meiryo', "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-color: #f5f5f4;
    color: #555555; /* 既存サイトの h1-h4 カラー */
    font-size: 15px; /* 13pxから引き上げ */
    line-height: 1.8;
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: 'Josefin Sans', "Mplus 1p", sans-serif;
    color: #555555;
}

p, pre {
    font-family: "Rounded Mplus 1c", 'メイリオ', 'Meiryo', sans-serif;
    margin-bottom: 1.5em;
    color: #333333;
}

.mincho {
    font-family: 'Sawarabi Mincho', YuMincho, 'Yu Mincho', "ヒラギノ明朝 ProN W6", serif;
}

.hand, .handwriting {
    font-family: 'Mrs Saint Delafield', cursive;
}

.shopname {
    font-family: 'EB Garamond', serif;
}

/* ===== 2. 基本レイアウト ===== */

*, *::before, *::after {
    box-sizing: border-box;
}

.wrap {
    width: 100%;
    min-width: 304px;
    margin: 0 auto;
    /* overflow: hidden; position: sticky の動作を阻害するため削除 */
}

.container, .siteTitle, .gNavi, .fNavi, .footer, .contents, #copyright, .parallax-message {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px; /* 10pxから15pxへ増やし、中間サイズでの余白を確保 */
}

.clear::after, .clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* ===== 3. ヘッダー (既存サイトの配色・サイズ再現) ===== */

.header {
    width: 100%;
    background-color: #fff;
    padding: 20px 0 0 0;
}

.headerLogo {
    float: left;
}

.headerLogo img {
    max-width: 110px; /* 既存サイトの指定 */
}

.headerDesc {
    float: right;
    text-align: right;
    font-size: 14px; /* 0.8emから固定値14pxへ引き上げ */
    color: #888;
    line-height: 1.6;
    margin-top: 20px;
}

/* グローバルナビ (既存サイトのオリーブグリーン再現) */
#gMenu, #g-menu {
    background-color: #9b9645;
    margin-top: 20px;
    clear: both;
    position: -webkit-sticky; /* Safari対応 */
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

/* スティッキー時に隙間ができないように調整したい場合はここを調整 */
#gMenu {
    margin-bottom: 0;
}

.gNavi ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.gNavi li {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.gNavi li:last-child {
    border-right: none;
}

.gNavi li a {
    display: block;
    padding: 15px 0;
    color: #fff;
    text-decoration: none;
    font-size: 15px; /* 1.1emから固定値15pxへ調整 */
    letter-spacing: 0.1em;
    transition: background-color 0.3s;
}

.gNavi li a:hover {
    background-color: #85ad47; /* 既存サイトの h4:after カラー */
}

/* HOMEアイコン用 */
.gNavi li:first-child a {
    font-size: 1.2em;
}

/* ===== 4. メインコンテンツ (既存サイト構造) ===== */

#topImage {
    width: 100%;
    height: 480px; /* 既存サイト準拠 */
    margin-bottom: 10px;
    background-color: #eee;
    position: relative;
    overflow: hidden;
}

#topImage .swiper-container,
#topImage .swiper-wrapper {
    width: 100%;
    height: 100%;
}

#topImage .swiper-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ページネーションの表示を確保 */
.swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.contents {
    padding: 20px 15px; /* 左右パディングを復活させ、中間サイズでの余白を確保 */
}

.article {
    padding: 10px 15px; /* 左右パディングを復活させ、文字が端にくっつくのを防ぐ */
}

.section {
    width: 100%;
    clear: both;
    padding-bottom: 20px;
}

/* 2カラムレイアウト (汎用Flexカラムシステム) */
.col2-flex, .col3-flex, .col4-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
    margin-top: 30px;
}

.col2-flex > * { flex: 0 0 48%; }
.col3-flex > * { flex: 0 0 30.6%; }
.col4-flex > * { flex: 0 0 22%; }

@media (max-width: 767px) {
    .col3-flex > *, .col4-flex > * {
        flex: 0 0 48%; /* タブレット・スマホでは2段に */
    }
}

@media (max-width: 479px) {
    .col2-flex, .col3-flex, .col4-flex {
        display: block;
    }
    .col2-flex > *, .col3-flex > *, .col4-flex > * {
        width: 100%;
        margin-bottom: 20px;
    }
}

h3 {
    font-size: 1.4em;
    border-bottom: none; /* 既存サイトは下線なし、または画像 */
    padding: 8px 0;
    margin-bottom: 20px;
    color: #555555;
    letter-spacing: 0.05em;
}

h3 i {
    margin-right: 0.5em;
}

/* Information メニュー (新規採用部分) */
.info-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.info-menu a {
    display: block;
    padding: 15px;
    background: #fff;
    border: 1px solid #e5ddd3;
    border-radius: 4px;
    text-align: center;
    color: #9b9645;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

.info-menu a:hover {
    background: #9b9645;
    color: #fff;
}

/* カレンダー (既存サイトの Datepicker 風) */
.datepicker {
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    width: 100%; /* 幅いっぱいに広げる */
}

.datepicker td {
    padding: 8px 0;
    text-align: center;
}

.datepicker td.closed {
    background: #ffebeb;
    color: red;
    border-radius: 50%;
}

/* SNSリンク (既存サイトの follow クラス) */
.follow ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.follow li {
    margin-bottom: 10px;
}

.follow a {
    display: block;
    padding: 10px;
    background: #fff;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s;
}

.follow a:hover {
    background: #f5f5f4;
    opacity: 0.8;
}

/* Instagram */
.instagram-section {
    background-color: #e4e4e3;
    padding: 40px 0;
    margin-top: 20px;
}

/* ===== 5. パララックス (KOMPISページ用) ===== */

/* KOMPISページのみスナップを有効化 */
.snap-page {
    scroll-snap-type: y mandatory;
}

/* 冒頭のヘッダーやタイトルもスナップ対象にする */
.snap-start {
    scroll-snap-align: start;
}

.parallax-section {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* パララックスの肝 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* メニューの高さ分、スナップ位置をずらす */
    scroll-margin-top: 50px; 
}

.parallax-message {
    background-color: rgba(255, 255, 255, 0.6); /* 既存サイトの指定 */
    padding: 30px 20px; /* 上下30px, 左右20pxに調整 */
    border-radius: 20px;
    max-width: 480px;
    min-width: 300px;
    text-align: center;
    line-height: 2;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    /* アニメーション初期状態: 透明で少し下に配置 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* 画面内に入った時に付与されるクラス */
.parallax-message.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .parallax-section {
        background-attachment: scroll; /* モバイルでは負荷軽減のためスクロール */
    }
}

/* ===== 6. フッター (既存サイト構造) ===== */

footer {
    width: 100%;
    background-color: #fafafa;
    padding: 60px 0 40px 0;
    border-top: 1px solid #eee;
    scroll-snap-align: start; /* KOMPISページ等でのスクロールスナップ対応 */
}

.fNavi ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
}

.fNavi a {
    color: #333;
    text-decoration: none;
}

.footer .tel a {
    font-size: 16px;
    color: #9b9645;
    text-decoration: none;
}

.footer .shopname {
    font-family: 'EB Garamond', serif;
    font-size: 36px;
    color: #555555;
    letter-spacing: 0.03em;
}

#copyright {
    text-align: center;
    font-size: 11px;
    color: #999;
    margin-top: 20px;
}

/* ===== 7. レスポンシブ ===== */

/* モバイルメニューバー (初期状態は非表示) */
#mMenuBar {
    display: none;
    background-color: rgba(155, 150, 69, 0.9); /* オリーブグリーンの透過 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    padding: 10px 20px;
}

#mMenuBar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#mMenuBar li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
}

#mMenuBtn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5em;
    cursor: pointer;
}

/* モバイル用展開メニュー */
#mMenu {
    display: none;
    position: fixed;
    top: 50px; /* mMenuBarの高さ分 */
    left: 0;
    width: 100%;
    background-color: #9b9645;
    z-index: 199;
    border-top: 1px solid rgba(255,255,255,0.2);
}

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

.mNavi li a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#mMenuAdjust {
    display: none;
    height: 50px;
}

@media (max-width: 767px) {
    .container, .siteTitle, .gNavi, .fNavi, .footer, .contents, #copyright {
        padding: 0 10px; /* スマホ時は少しだけ増やす */
    }

    .parallax-message {
        padding: 25px 15px; /* モバイルでも上下の余白を確保 */
    }

    .header {
        padding: 10px 0;
    }

    .siteTitle {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 0; /* 親の padding (8px) に任せる */
    }

    .headerLogo {
        float: none;
        flex: 0 0 80px; /* ロゴを少し小さくして横幅を確保 */
    }

    .headerLogo img {
        max-width: 100%;
        height: auto;
    }
    
    .headerDesc {
        float: none;
        text-align: right; /* 左寄せから右寄せに変更 */
        flex: 1;
        margin-top: 0;
    }

    .headerDesc p {
        font-size: 11px; /* 小さめの画面でも収まるように調整 */
        line-height: 1.4;
        margin-bottom: 0;
    }

    /* PCメニューを隠し、モバイルバーを表示 */
    #gMenu {
        display: none;
    }

    #mMenuBar, #mMenuAdjust {
        display: block;
    }

    .col2-flex {
        flex-direction: column;
        gap: 20px;
    }
    
    #topImage {
        height: 250px;
    }
}

.text-point { color: #9b9645; }
.center { text-align: center; }

/* ===== 8. 写真風装飾 (Photo Frame / Mini) ===== */

/* 写真エリア: モバイルファーストで構築 */
.photo-wrap {
    margin-top: 30px;
}

.photo-grid {
    margin-top: 20px;
}

.photo-grid .photo-mini {
    width: 100%; /* 基本は1列 */
    margin-bottom: 20px;
}

/* 480px以上: 全体を2列（テキストと写真）にするが、写真は1列のまま維持 */
@media screen and (min-width: 480px) {
    .photo-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 4%;
        align-items: flex-start;
    }
    .photo-wrap > .article {
        flex: 0 0 48%;
    }
    .photo-grid {
        margin-top: 0;
    }
}

/* 768px以上（PC）: 余裕があるので写真を2列にする */
@media screen and (min-width: 768px) {
    .photo-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: space-between;
    }
    .photo-grid .photo-mini {
        flex: 0 0 calc(50% - 8px);
        margin-bottom: 0;
    }
}

.photo-frame, .photo-mini {
    padding: 10px;
    background: #fff;
    border: 1px solid #e5ddd3; /* 柔らかいベージュの細線 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 現代的な柔らかい影 */
    margin-bottom: 20px;
    transition: all 0.4s ease;
    display: inline-block;
    width: 100%;
}

.photo-mini {
    padding: 6px; /* ミニサイズは余白も控えめに */
}

/* 手作り感を出すための微細な傾き */
.photo-mini:nth-child(odd) { transform: rotate(-1.2deg); }
.photo-mini:nth-child(even) { transform: rotate(1deg); }

/* ホバー時の演出: 浮き上がって真っ直ぐになる */
.photo-frame:hover, .photo-mini:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px) rotate(0deg);
    z-index: 10;
}

.photo-frame img, .photo-mini img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== 9. ユーティリティクラス (style-2025より移植) ===== */

/* 余白調整 (Margin) 
   !important を付与することで、既存のスタイルに干渉せず確実に適用されます。 */
.mt0  { margin-top: 0 !important; }
.mt5  { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }

.mb0  { margin-bottom: 0 !important; }
.mb5  { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }

/* インデント (1文字分下げて2行目以降を揃える) 
   箇条書きや注釈などで重宝します。 */
.indent1, .indent-1 {
    text-indent: -1em;
    padding-left: 1em;
}

/* 改行制御 (レスポンシブ) 
   特定の画面幅以下で強制的に改行を入れたい場合に使用します。 */
.br767:before { content: "\A"; white-space: pre; }
.br479:before { content: "\A"; white-space: pre; }

/* 表示・非表示制御 (レスポンシブ) */
@media (max-width: 767px) {
    .over768 { display: none !important; }
}
@media (max-width: 479px) {
    .over480 { display: none !important; }
}
@media (min-width: 480px) {
    .under479 { display: none !important; }
}

/* 既存の camelCase への対応 */
.bannerButton, .bannerButtonS, .banner_button, .banner-button {
    font-family: 'Josefin Sans', "Mplus 1p", sans-serif;
}
.messageBoard, .message-board {
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
}