@charset "UTF-8";
/* 移行後に新しく書いたスタイル（BEM記法）
   旧テーマの style.css・layout.css のあとに読み込む。色・余白は旧サイトに合わせる */

/* =========================================
   お問い合わせ（入力・確認）
   入力欄そのものは旧サイトの .form-group・.form-input（layout.css）
   ========================================= */
.contact-page__lead
{ margin-bottom: 2rem;}
/* 旧 layout.css の .contact-form（flex・gap）を打ち消し、旧フォームと同じ間隔（.form-group の margin）にする */
.contact-form--entry
{ display: block;}
.contact-page__lead a
{ color: var(--color-accent); text-decoration: underline;}
.form-input.is-error,
.form-textarea.is-error
{ border-color: #ef4444; background-color: #fef2f2;}
.contact-form__error
{ margin: 0; color: #dc2626; font-size: 0.85rem;}
.contact-form__alert
{ margin: 0 0 1.5rem; padding: 12px 16px; border-left: 4px solid #ef4444; border-radius: 4px; background-color: #fef2f2; color: #b91c1c; font-size: 0.9rem;}
/* ボット対策の隠し欄。display:none にするとボットに見抜かれやすいので画面の外に出す */
.contact-form__trap
{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}
.contact-form__actions
{ display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 2rem;}
.contact-form__submit:disabled
{ opacity: 0.6; cursor: wait;}
.contact-form__back
{ color: var(--color-text-light); font-size: 0.9rem; text-decoration: underline;}
.contact-form__note
{ margin-top: 2rem; color: var(--color-text-light); font-size: 0.75rem;}
.contact-confirm
{ margin: 1.5rem 0 0; border-top: 1px solid var(--color-border);}
.contact-confirm__label
{ padding: 1rem 0 0.25rem; color: var(--color-text-light); font-size: 0.85rem; font-weight: 700;}
.contact-confirm__value
{ margin: 0; padding: 0 0 1rem; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere;}
.contact-confirm__empty
{ color: #94a3b8;}

/* =========================================
   お問い合わせ完了（旧テーマではページ内に直接書いていたもの）
   ========================================= */
.thanks-page
{ padding: 100px 0;}
.thanks-icon__mark
{ color: var(--color-accent); font-size: 80px;}
.thanks-page__title
{ margin-top: 24px; margin-bottom: 24px;}
.thanks-body
{ line-height: 1.8;}
.thanks-page__note
{ display: inline-block; margin-top: 24px; padding: 16px; border-radius: 8px; background: #f8fafc; color: var(--color-text-light); font-size: 0.9em; text-align: left;}
.thanks-action
{ margin-top: 48px;}

/* =========================================
   特定商取引法の表（旧サイトでは WordPress が読み込んでいた表のスタイル）
   ========================================= */
.legal-body .wp-block-table
{ margin: 1.5rem 0 0; overflow-x: auto;}
.legal-body .wp-block-table table
{ width: 100%; border-collapse: collapse; table-layout: fixed;}
.legal-body .wp-block-table th,
.legal-body .wp-block-table td
{ padding: 0.5em; border: 1px solid; font-size: 0.95rem; vertical-align: middle; word-break: break-word;}
.legal-body .wp-block-table th
{ text-align: center;}
.legal-body .wp-block-table td
{ text-align: left;}
.legal-body ul
{ padding-left: 1.5rem;}
.legal-body ul li
{ list-style: disc; margin-bottom: 0.5rem;}

/* =========================================
   記事ページ
   ========================================= */
.article-meta .update
{ margin-left: 10px; color: var(--color-accent);}
.article-meta .update .material-symbols-outlined
{ font-size: 1em; vertical-align: text-bottom;}
.related-posts
{ background-color: #f8fafc;}
/* 目次（insert_toc() が本文の h2・h3 から作る。見た目は旧サイトの .toc-container に合わせる） */
.post-body .index
{ width: 100%; max-width: 680px; margin: 30px auto 50px; padding: 25px; border: 1px solid #e2e8f0; border-radius: 8px; background-color: #f8fafc;}
.post-body .index .ttl
{ margin-bottom: 20px; color: #1e293b; font-size: 1.1rem; font-weight: bold; text-align: center;}
.post-body .index ol
{ margin: 0; padding-left: 20px; color: #334155;}
.post-body .index li
{ margin-bottom: 8px; line-height: 1.5; list-style-type: decimal;}
.post-body .index a
{ text-decoration: underline;}

/* =========================================
   ページ送り（記事一覧）
   ========================================= */
.pager
{ margin: 3rem 0 0;}
.pager__list
{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none;}
.pager__link
{ display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 50px; background: var(--color-white); font-size: 0.9rem;}
.pager__link:hover
{ border-color: var(--color-primary);}
.pager__link--current,
.pager__link--current:hover
{ border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-white);}