/* カスタムスタイル（TailwindCSSで対応しきれない部分のみ記述） */

/* FAQ <details> スムーズアニメーション */
details > div {
    animation: faq-open .25s ease forwards;
}
@keyframes faq-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
details summary::-webkit-details-marker { display: none; }

/* モバイルスティッキーバー下のコンテンツが隠れないよう余白確保 */
@media (max-width: 1023px) {
    body { padding-bottom: 72px; }
}

/* フローティングCTAホバーアニメーション */
#floating-cta { animation: float-in .4s .5s ease both; }
@keyframes float-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* ヒーロー背景グラデーション */
.hero-bg {
    background: linear-gradient(135deg, #1D56C8 0%, #1a3fa0 45%, #1B2A4A 100%);
}

/* line-clamp ユーティリティ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* お問い合わせフォームの入力フォーカスリング */
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* ===== 記事本文 Markdownスタイル ===== */
.article-body {
    color: #374151;
    font-size: 0.9375rem;
    line-height: 1.85;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
    font-weight: 800;
    color: #1B2A4A;
    line-height: 1.35;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

.article-body h1 { font-size: 1.6rem; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.3em; }
.article-body h2 { font-size: 1.3rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.25em; }
.article-body h3 { font-size: 1.1rem; }
.article-body h4 { font-size: 1rem; }
.article-body h5,
.article-body h6 { font-size: 0.9rem; color: #6b7280; }

.article-body p {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.article-body a {
    color: #1D56C8;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.article-body a:hover {
    color: #1B2A4A;
}

.article-body strong { font-weight: 700; color: #111827; }
.article-body em     { font-style: italic; }
.article-body del    { text-decoration: line-through; color: #9ca3af; }

.article-body ul,
.article-body ol {
    margin: 0 0 1.25em 0;
    padding-left: 1.6em;
}
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body li { margin-bottom: 0.35em; }
.article-body li > ul,
.article-body li > ol { margin-top: 0.35em; margin-bottom: 0; }

.article-body blockquote {
    border-left: 4px solid #CE1126;
    padding: 0.5em 1em;
    margin: 1.25em 0;
    background: #fef2f2;
    color: #6b7280;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}
.article-body blockquote p { margin-bottom: 0; }

.article-body code {
    background: #f3f4f6;
    color: #1D56C8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85em;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}

.article-body pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.1em 1.3em;
    border-radius: 10px;
    overflow-x: auto;
    margin: 1.4em 0;
    font-size: 0.82em;
    line-height: 1.65;
}
.article-body pre code {
    background: transparent;
    color: inherit;
    border: none;
    padding: 0;
    font-size: inherit;
}

.article-body hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2em 0;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 1.4em 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.article-body th {
    background: #f8fafc;
    font-weight: 700;
    color: #1B2A4A;
    text-align: left;
    padding: 0.65em 0.9em;
    border-bottom: 2px solid #e5e7eb;
}
.article-body td {
    padding: 0.55em 0.9em;
    border-bottom: 1px solid #f3f4f6;
}
.article-body tr:last-child td { border-bottom: none; }
.article-body tr:hover td { background: #f9fafb; }

/* 記事内画像 */
.article-inline-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1em 0;
    display: block;
    border: 1px solid #e5e7eb;
}

/* 管理画面プレビュー用（article-bodyと同じルールを適用） */
.prose-preview { composes: article-body; }
.prose-preview h1,
.prose-preview h2,
.prose-preview h3,
.prose-preview h4,
.prose-preview h5,
.prose-preview h6 {
    font-weight: 800;
    color: #1B2A4A;
    line-height: 1.35;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.prose-preview h2 { font-size: 1.2rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.2em; }
.prose-preview h3 { font-size: 1rem; }
.prose-preview p  { margin-bottom: 1em; }
.prose-preview a  { color: #1D56C8; text-decoration: underline; }
.prose-preview strong { font-weight: 700; }
.prose-preview ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.prose-preview ol { list-style: decimal; padding-left: 1.4em; margin-bottom: 1em; }
.prose-preview li { margin-bottom: 0.3em; }
.prose-preview blockquote {
    border-left: 4px solid #CE1126; padding: 0.4em 0.9em;
    margin: 1em 0; background: #fef2f2; color: #6b7280;
    border-radius: 0 6px 6px 0; font-style: italic;
}
.prose-preview pre {
    background: #1e293b; color: #e2e8f0;
    padding: 0.9em 1.1em; border-radius: 8px;
    overflow-x: auto; font-size: 0.82em; margin: 1em 0;
}
.prose-preview code {
    background: #f3f4f6; color: #1D56C8;
    font-size: 0.84em; padding: 0.1em 0.35em;
    border-radius: 4px; border: 1px solid #e5e7eb;
}
.prose-preview pre code { background: transparent; color: inherit; border: none; padding: 0; }
.prose-preview hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }
.prose-preview img { max-width: 100%; border-radius: 8px; margin: 0.8em 0; border: 1px solid #e5e7eb; }
.prose-preview table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 1em 0; }
.prose-preview th { background: #f8fafc; font-weight: 700; padding: 0.5em 0.8em; border-bottom: 2px solid #e5e7eb; }
.prose-preview td { padding: 0.45em 0.8em; border-bottom: 1px solid #f3f4f6; }