:root{
    --bg:#f7fbf8; /* わずかに明るめの背景 */
    --card:#ffffff;
    --text-color: #122022; /* 本文の高コントラスト色 */
    --muted:#4b5563; /* 読みやすく少し濃いめ */
    --accent:#21693a; /* アクセントを少し濃く */
    --shadow: 0 8px 30px rgba(15,23,42,0.08);
    --heading-font: 'Yu Gothic UI', 'Hiragino Kaku Gothic ProN', 'Rounded Mplus 1c', -apple-system, system-ui, 'Segoe UI', 'Noto Sans JP', sans-serif;
    --header-text: #fff; /* default white */
    --header-subtext: rgba(255,255,255,0.95);
}

/* ページ読み込み時のアニメーション: 画面中央から左右に開く */
@keyframes slideOpenFromCenter {
    from {
        clip-path: inset(0 50% 0 50%);
        opacity: 0.8;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes slideOpenLeft {
    from {
        clip-path: inset(0 0 0 50%);
        opacity: 0.8;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes slideOpenRight {
    from {
        clip-path: inset(0 50% 0 0);
        opacity: 0.8;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

body.page-loading .overlay {
    animation: slideOpenFromCenter 1200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

body.page-loading .site-header {
    animation: slideOpenFromCenter 1200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

body.page-loading h1.page-title {
    animation: slideOpenFromCenter 1000ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms forwards;
    opacity: 0;
}

body.page-loading .site-subtitle {
    animation: slideOpenFromCenter 1000ms cubic-bezier(0.34, 1.56, 0.64, 1) 400ms forwards;
    opacity: 0;
}

body.page-loading footer {
    animation: slideOpenFromCenter 1000ms cubic-bezier(0.34, 1.56, 0.64, 1) 600ms forwards;
    opacity: 0;
}

/* 全体のベース */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    /* 背景画像を優先し、なければ既存のグラデーションをフォールバックとして使用 */
    background-image: url('images/background.png');
    /* 敷き詰め (タイル) 表示: 画像を拡大せずに並べる */
    background-repeat: repeat;
    background-position: left top;
    background-size: auto;
    background-color: var(--bg);
    background-blend-mode: overlay;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 16px 80px;
    min-height: 100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-size: 16px;
    line-height: 1.7;
}

.overlay {
    width: 100%;
    max-width: 980px;
    /* 背景をやや不透明にして本文が読みやすくなるように調整 */
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92));
    padding: 36px;
    margin: 12px;
    box-shadow: var(--shadow);
    border-radius: 14px;
    text-align: left;
    margin-top: 18px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(34,48,58,0.04);
    backdrop-filter: blur(6px);
}

/* サイトヘッダー（背景画像を使用） */
.site-header{
    width:100%;
    max-width:100%;
    height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image: url('images/main.png'); /* ここにヘッダー用背景画像を置いてください */
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}
.site-header-inner{
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右寄せ */
    text-align: right;
    color: var(--header-text);
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
    padding: 8px 12px;
    background: rgba(255,255,255,0.06); /* 軽い白の半透明ボックス */
    backdrop-filter: blur(0px);

    border-radius: 8px;
}
.site-header h1{ margin:0; font-size:2rem; color: var(--header-text); }
.site-subtitle{
    display: block;
    padding: 0.15em 0.6em; /* 少し縦を詰める */
    color: #494949; /* 文字色 */
    background: transparent;
    border-left: solid 5px #7db4e6;
    max-width: 920px;
    margin: 6px auto 18px; /* h1 の下に来るので上マージンは小さめに */
    text-align: right; /* デスクトップでは右寄せ */
}

h1, .site-header h1 {
    color: #133728; /* 見出しを濃くして可読性向上 */
    margin-bottom: 18px;
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    font-family: 'Kaisei Opti', var(--heading-font);
    font-weight: 700;
    
}

h1:first-letter {
  font-size: 2em;
  color: #ff1212;
}

.page-title{
    margin: 8px auto 6px; /* 間隔を狭める */
    text-align: center;
    font-size: 2.6rem;
    color: #00b94a;
    font-family: 'Kaisei Opti', var(--heading-font);
    background: linear-gradient(transparent 70%, #a7d6ff 70%);
}
h2 {
    color: #1f3f36; /* 小見出しもやや濃いめ */
    margin-top: 28px;
    margin-bottom: 12px;
    border-bottom: 2px solid rgba(34,48,58,0.06);
    padding-bottom: 8px;
    text-align: left;
    font-size: 1.25rem;
    font-family: 'Kaisei Opti', var(--heading-font);
    font-weight: 700;
}
.section p { line-height:1.8; }
.section {
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}
.section p {
    line-height: 1.8;
    margin-bottom: 12px;
    color: var(--text-color);
}
ul {
    list-style-type: none;
    padding: 0;
}
ul.vegetable-list {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 12px;
    align-items: start;
}

ul.vegetable-list li {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 14px 16px;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,254,250,0.95));
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(17,24,39,0.06);
    transition: transform 180ms ease, box-shadow 180ms ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
ul.vegetable-list li:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(17,24,39,0.08); }
ul.vegetable-list li::before{ content:'✓'; color: var(--accent); margin-right: 8px; position: static; transform: none; }

/* 野菜のイメージカラー */
ul.vegetable-list li.vegetable-leeks {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,254,250,0.95));
}

ul.vegetable-list li.vegetable-garlic {
    background: linear-gradient(180deg, rgba(255,250,205,1), rgba(255,248,220,0.95));
}

ul.vegetable-list li.vegetable-eggplant {
    background: linear-gradient(180deg, rgba(123,104,238,0.9), rgba(106,90,205,0.85));
    color: #ffffff;
}
ul.vegetable-list li.vegetable-eggplant::before {
    color: #ffffff;
}

ul.vegetable-list li.vegetable-bell-pepper {
    background: linear-gradient(180deg, rgba(144,238,144,1), rgba(152,251,152,0.95));
}

ul.vegetable-list li.vegetable-pumpkin {
    background: linear-gradient(180deg, rgba(255,165,0,1), rgba(255,140,0,0.9));
    color: #ffffff;
}
ul.vegetable-list li.vegetable-pumpkin::before {
    color: #ffffff;
}

ul.vegetable-list li.vegetable-lettuce {
    background: linear-gradient(180deg, rgba(197,225,165,1), rgba(205,232,180,0.95));
}

ul.vegetable-list li.vegetable-potato {
    background: linear-gradient(180deg, rgba(212,165,116,1), rgba(222,184,135,0.95));
}

ul.vegetable-list li.vegetable-carrot {
    background: linear-gradient(180deg, rgba(255,179,71,1), rgba(255,200,124,0.95));
}

ul.vegetable-list li.vegetable-radish {
    background: linear-gradient(180deg, rgba(245,245,220,1), rgba(255,250,240,0.95));
}

ul.vegetable-list li.vegetable-leafy-greens {
    background: linear-gradient(180deg, rgba(124,179,66,1), rgba(139,195,74,0.9));
    color: #ffffff;
}
ul.vegetable-list li.vegetable-leafy-greens::before {
    color: #ffffff;
}

ul.vegetable-list li.vegetable-spinach {
    background: linear-gradient(180deg, rgba(60,118,61,1), rgba(56,142,60,0.9));
    color: #ffffff;
}
ul.vegetable-list li.vegetable-spinach::before {
    color: #ffffff;
}

.hover-popup-image {
    position: absolute;
    /* デフォルトは要素の上側に表示して他のリストと重ならないようにする */
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 20px 40px rgba(2,6,23,0.4);
    border-radius: 12px;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms cubic-bezier(.2,.9,.2,1), visibility 120ms ease, transform 220ms cubic-bezier(.2,.9,.2,1);
    z-index: 99999; /* 大きくして常に前面に出す */
    pointer-events: none;
    min-width: 180px;
    text-align: center;
    color: #fff;
}

html.no-js ul.vegetable-list li:hover .hover-popup-image {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.hover-popup-image img {
    max-width: 340px; /* 画像をやや大きめに表示 */
    height: auto;
    display: block;
    border-radius: 8px;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(2,6,23,0.35);
    transition: transform 220ms ease;
}
.hover-popup-image:hover img{ transform: scale(1.02); }

.hover-popup-caption{ margin-top:8px; font-size:0.95rem; color: rgba(255,255,255,0.9); }

/* レスポンシブ: 小さい画面では画像をビューポート幅に合わせる */
@media (max-width: 900px){
    ul.vegetable-list{ grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
}

@media (max-width: 600px) {
    /* レイアウト調整（モバイル優先） */
    .overlay { padding: 18px; border-radius: 10px; margin: 8px; }

    .hover-popup-image {
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        min-width: 0;
        padding: 8px;
        box-shadow: 0 12px 30px rgba(2,6,23,0.35);
    }

    .hover-popup-image img { max-width: 90vw; }

    ul.vegetable-list li { padding: 16px; font-size: 1.05rem; }
    ul.vegetable-list { grid-template-columns: 1fr; gap: 10px; }

    h1 { font-size: 1.6rem; }
    .site-header { height: 180px; }
    .site-header-inner { background: rgba(255,255,255,0.08); padding: 6px 10px; }
    .page-title { font-size: 1.8rem; margin: 10px auto 6px; }
    .site-subtitle { text-align: center; margin: 4px auto 12px; border-left: none; }

    /* ブログボタンを画面幅いっぱいに広げる */
    .blog-link { justify-content: stretch; }
    .blog-link .btn { width: 100%; text-align: center; }

    /* モバイルでは背景を白にする（パターン画像を無効化） */
    body { background-image: none; background-color: #ffffff; padding: 20px 12px 40px; }
}

/* モバイルでは背景を白にする（パターン画像を無効化） */
@media (max-width: 600px) {
    body {
        background-image: none;
        background-color: #ffffff;
        padding: 20px 12px 40px;
    }
}

/* モバイル用フルスクリーンモーダル */
.mobile-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.mobile-modal.active { display: flex; }
.mobile-modal .modal-content {
    background: #fff;
    width: 100%;
    max-width: 980px;
    border-radius: 12px;
    overflow: auto;
    max-height: 96vh;
    padding: 12px;
}
.mobile-modal .modal-content img { width: 100%; height: auto; border-radius: 8px; }
.mobile-modal .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.9);
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 700;
}


/* プロフィール画像とテキストの回り込み調整 */
.profile-content {
    gap: 20px;
    border-top: 1px dashed rgba(34,48,58,0.06);
    padding-top: 20px;
    margin-top: 36px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
}

.profile-image-container {
    width: 140px;
    flex-shrink: 0;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.profile-image {
    width: 140px;
    height: 140px;
    border-radius: 30px;
    overflow: hidden;
    border: 4px solid rgba(34,48,58,0.06);
    box-shadow: 0 12px 20px rgba(7, 10, 19, 0.06);
    object-fit: cover;
}
.profile-image-caption {
    margin-top: 8px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.profile-text {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
}
.profile h3 {
    color: #777;
    margin-bottom: 15px;
}
.profile p {
    line-height: 1.6;
}

/* ブログリンクボタン */
.blog-link {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    width: 100%;
}
.blog-link .btn {
    display: inline-block;
    background: linear-gradient(180deg,#1f6a2e,#154f23);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(21,79,35,0.18);
    font-weight: 800;
}
.blog-link .btn:hover{ transform: translateY(-2px); }

/* ブログ記事一覧 / 個別記事用スタイル */
.post-list { list-style: none; padding: 0; margin: 12px 0; }
.post-list li { padding: 8px 0; border-bottom: 1px dashed rgba(34,48,58,0.06); }
.post-list a { text-decoration: none; color: var(--accent); font-weight: 700; }

.post-article { max-width: 900px; margin: 18px auto; }
.post-title { font-size: 2rem; margin: 6px 0 6px; color: #184e2b; font-family: 'Kaisei Opti', var(--heading-font); }
.post-meta { color: var(--muted); font-size: 0.95rem; margin-bottom: 12px; }
.post-content { line-height: 1.8; }


/* フッターのスタイル */
footer {
    width: 100%;
    max-width: 980px; /* overlayの幅に合わせる */
    margin-top: 28px;
    padding: 18px;
    background-color: transparent;
    color: var(--muted);
    font-size: 0.95em;
    border-radius: 8px;
    text-align: center;
    position: relative;
    z-index: 1;
}

footer p { margin: 6px 0; }

.page-views {
    font-size: 0.88rem;
    color: var(--muted);
    font-style: italic;
    margin-top: 12px;
}

#view-count {
    font-weight: 700;
    color: var(--accent);
}

.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* フォーカスの視認性向上（アクセシビリティ） */
a:focus, button:focus, .btn:focus {
    outline: 3px solid rgba(33,105,58,0.18);
    outline-offset: 3px;
}

/* リンクのホバー/フォーカス時の明確化 */
a:hover, a:focus { color: var(--accent); text-decoration: underline; }