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

/* =========================================
   記事本文（旧 WordPress のブロックエディタの装飾を置き換えたもの）
   見出し・段落・表・画像などの基本は layout.css の .pr-article__body にある
   ========================================= */
.post-body__embed-inner
{ margin: 32px 0;}
.post-body__embed-inner iframe
{ margin: 0;}
.post-body__mark
{ background-color: transparent;}
.post-body__mark--red
{ color: #cf2e2e;}
.post-body__mark--purple
{ color: #9b51e0;}
.post-body__hr
{ margin: 40px 0; border: 0; border-top: 1px solid var(--pr-line, #ddd);}
.post-body__gallery
{ display: flex; flex-wrap: wrap; gap: 8px;}
.post-body__gallery .post-body__figure
{ flex: 1 1 calc(50% - 8px); margin: 0;}
.post-body__gallery img
{ width: 100%; height: 100%; object-fit: cover;}
.post-body__columns
{ display: flex; gap: 2em;}
.post-body__column
{ flex: 1 1 0; min-width: 0;}

/* =========================================
   お問い合わせフォーム（旧 Contact Form 7 の見た目に合わせている）
   旧CSSの .contactform form input はチェックボックスにまで効くため使わない
   ========================================= */
.contact-form
{ max-width: 800px; margin: 30px auto 0;}
.contact-form .contact-form__row
{ margin: 0 0 20px; padding: 0; border: none;}
.contact-form .contact-form__label
{ display: block; margin-bottom: 5px; padding: 0; font-size: 13px; line-height: 1.5;}
.contact-form .contact-form__required
{ margin-left: 2px; color: #d54a4a;}
.contact-form .contact-form__input
{ display: block; width: 100%; height: 50px; margin: 0; padding: 10px 16px; border: 1px solid transparent; border-radius: 4px; background-color: #f5f5f5; color: #333; font-family: inherit; font-size: 16px; line-height: 1.4; appearance: none;}
.contact-form .contact-form__input:focus
{ border-color: var(--pr-purple-400, #a46bca); background-color: #fff; outline: none;}
.contact-form .contact-form__input--textarea
{ height: 160px; resize: vertical;}
.contact-form .contact-form__input--error
{ border-color: #d54a4a; background-color: #fff5f5;}
.contact-form__error
{ margin: 5px 0 0; color: #d54a4a; font-size: 13px;}
.contact-form__alert
{ margin: 20px 0; padding: 12px 16px; border-left: 4px solid #d54a4a; background-color: #fff5f5; color: #b22; font-size: 14px;}
.contact-form .contact-form__choices
{ display: flex; flex-wrap: wrap; gap: 10px 30px; padding-top: 5px;}
.contact-form .contact-form__choice
{ display: flex; align-items: center; gap: 8px; font-weight: bold; cursor: pointer;}
/* config.css が input[type="checkbox"] の見た目を消している（appearance: none）ため、元に戻す */
.contact-form input.contact-form__checkbox
{ flex: none; width: 18px; height: 18px; margin: 0; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--pr-purple-600, #7b3fa6);}
/* ボット対策の隠し欄。display:none にするとボットに見抜かれやすいので画面の外に出す */
.contact-form__trap
{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}
.contact-form__actions
{ display: flex; flex-direction: column-reverse; align-items: center; gap: 20px; margin-top: 30px;}
.contact-form .contact-form__submit
{ display: block; width: 100%; max-width: 320px; margin: 0 auto; padding: 12px 48px; border: none; border-radius: 6px; background-color: #bdbdbd; box-shadow: 0 2px 12px 0 rgba(51, 51, 51, 0.3); color: #fff; font-family: inherit; font-size: 18px; letter-spacing: 0.2em; cursor: pointer; appearance: none;}
.contact-form .contact-form__submit:hover
{ background-color: #a9a9a9;}
.contact-form .contact-form__submit:disabled
{ opacity: 0.6; cursor: wait;}
.contact-form__back
{ font-size: 14px;}
.contact-form__note
{ margin-top: 30px; color: #888; font-size: 11px;}

/* =========================================
   お問い合わせ確認画面
   ========================================= */
.contact-confirm
{ max-width: 800px; margin: 30px auto 0; border-top: 1px solid #ddd;}
.contact-confirm__label
{ padding: 15px 0 5px; color: #777; font-size: 13px;}
.contact-confirm__value
{ margin: 0; padding: 0 0 15px; border-bottom: 1px solid #ddd; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere;}
.contact-confirm__empty
{ color: #b0b0b0;}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
  .post-body__gallery .post-body__figure
  { flex-basis: 100%;}
  .post-body__columns
  { flex-direction: column;}
  .contact-form .contact-form__choices
  { flex-direction: column;}
}