/*
 * Theme Custom Styles
 */

/* --- Base Styles --- */
body {
    font-family: 'Shippori Mincho', serif;
    background-color: #F3EFE4 !important; /* より濃い背景色に変更し、!importantで強制適用 */
    color: #786A65 !important; /* 基本文字色を強制適用 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

/* --- Layout --- */
.container {
    max-width: 1152px; /* 最大幅を1280pxから1152px (Tailwindのmax-w-6xl相当)に変更 */
}

/* --- Works Archive Layout --- */
.works-archive-grid {
    column-count: 2;
    column-gap: 1rem;
}
@media (min-width: 768px) {
    .works-archive-grid {
        column-count: 3;
    }
}
@media (min-width: 1024px) {
    .works-archive-grid {
        column-count: 5;
        column-gap: 1.5rem;
    }
}
.works-archive-grid .masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    display: inline-block;
    width: 100%;
}


/* --- General Components --- */
.card-hover { transition: transform 0.3s, box-shadow 0.3s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 8px 25px -5px rgba(0,0,0,0.05); }
.excerpt-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
#search-overlay, #toc-modal-overlay { transition: opacity 0.3s; }
#toc-modal-content { transition: transform 0.3s; }

/*
 * Blog Post Styles (.prose)
 */
.prose { 
    color: var(--color-text-heading, #5D4037); 
    line-height: 1.8;
    counter-reset: toc-h2;
}
.prose h2 { color: var(--color-text-heading, #5D4037); font-size: 1.5rem; margin-top: 2.5em; padding-bottom: 0.5em; border-bottom: 2px solid var(--color-subtle-bg, #F7F4F1); counter-increment: toc-h2; }
.prose h3 { color: var(--color-text-heading, #5D4037); font-size: 1.25rem; margin-top: 2em; padding-bottom: 0.4em; font-weight: 700; border-bottom: 1px solid var(--color-subtle-bg, #F7F4F1); }
.prose h4 { color: var(--color-text-heading, #5D4037); font-size: 1.1rem; margin-top: 2em; font-weight: 700; border-left: 4px solid var(--color-circle-green, #A8D8B9); padding-left: 0.75em; }
.prose h5 { color: var(--color-text-heading, #5D4037); font-size: 1rem; margin-top: 2em; font-weight: 700; }
.prose h6 { color: var(--color-text-main, #786A65); font-size: 1rem; margin-top: 2em; font-weight: 700; }
.prose h2::before { content: counter(toc-h2) ". "; font-weight: bold; color: #A69B97; margin-right: 0.5em; }
.prose a { color: var(--color-accent-pink, #F4A298); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose strong { color: var(--color-text-heading, #5D4037); }
.prose blockquote { border-left-color: var(--color-circle-green, #A8D8B9); background-color: var(--color-subtle-bg, #F7F4F1); padding: 1.5em; border-radius: 0.5rem; }
.prose blockquote p { margin: 0; }
.prose code:not(pre > code) { color: var(--color-text-main, #786A65); background-color: var(--color-subtle-bg, #F7F4F1); padding: 0.2em 0.4em; margin: 0; font-size: 85%; border-radius: 3px; }
.prose pre { background-color: #2d2d2d; color: #f8f8f2; border-radius: 0.5rem; padding: 1em; }
.prose pre code { background-color: transparent; padding: 0; }
.prose ul:not([class]) { list-style: none; padding-left: 0; }
.prose ul:not([class]) > li { padding-left: 1.5em; position: relative; }
.prose ul:not([class]) > li::before { content: '・'; color: var(--color-text-heading, #5D4037); position: absolute; left: 0; font-weight: bold; }
.prose ol:not([class]) { list-style: none; counter-reset: list-counter; padding-left: 0; }
.prose ol:not([class]) > li { padding-left: 1.5em; position: relative; counter-increment: list-counter; }
.prose ol:not([class]) > li::before { content: counter(list-counter) "."; color: var(--color-text-heading, #5D4037); position: absolute; left: 0; font-weight: bold; }
.prose ul.checklist { list-style: none; padding-left: 0; }
.prose ul.checklist > li { padding-left: 1.5em; position: relative; }
.prose ul.checklist > li::before { content: '✔'; color: var(--color-circle-green, #A8D8B9); position: absolute; left: 0; }

/* Marker styles */
.marker-yellow { background: linear-gradient(transparent 65%, #fef9c3b3 65%); }
.marker-blue { background: linear-gradient(transparent 65%, #dbeafeb3 65%); }
.marker-pink { background: linear-gradient(transparent 65%, #fee2e2b3 65%); }

/* --- Contact Form 7 Styles --- */
.contact-form-container .wpcf7-form p {
    margin-bottom: 1.5rem; /* 各フォーム要素（ラベルと入力欄のセット）の間の余白 */
}
.contact-form-container .wpcf7-form-control {
    width: 100%;
}
/* **修正点**: 入力欄のデザインを変更 */
.contact-form-container .wpcf7-text,
.contact-form-container .wpcf7-textarea,
.contact-form-container .wpcf7-email {
    background-color: var(--color-subtle-bg, #F7F4F1); /* 背景色をサブ背景色に */
    border: 1px solid var(--color-text-main, #786A65); /* 枠線を基本文字色に */
    border-radius: 0.375rem; /* 角丸 */
    padding: 0.75rem 1rem; /* 内側の余白 */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.contact-form-container .wpcf7-text:focus,
.contact-form-container .wpcf7-textarea:focus,
.contact-form-container .wpcf7-email:focus {
    outline: none;
    border-color: var(--color-accent-pink, #F4A298);
    box-shadow: 0 0 0 2px rgba(244, 162, 152, 0.3); /* フォーカス時の影 */
}
.contact-form-container .wpcf7-submit {
    background-color: var(--color-accent-pink, #F4A298);
    color: white;
    padding: 0.75rem 2.5rem;
    border-radius: 9999px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}
.contact-form-container .wpcf7-submit:hover {
    opacity: 0.9;
}
.contact-form-container label {
    font-weight: bold;
    color: var(--color-text-heading, #5D4037);
    display: block;
    margin-bottom: 0.5rem;
}