@charset "UTF-8";
/* 移行後に新しく書くスタイル（BEM記法）
   旧テーマから引き継いだ config.css / animation.css / layout.css の後に読み込む */

/* =========================================
   ページ送り
   ========================================= */
.pager
{ margin: 40px 0;}
.pager__list
{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;}
.pager__link
{ display: block; min-width: 36px; padding: 6px 10px; border: 1px solid #ddd; text-align: center; font-size: 13px; color: #4D4D4B;}
.pager__link:hover
{ background-color: #f5f5f5;}
.pager__link--current
{ background-color: #626262; border-color: #626262; color: #fff;}
.pager__link--current:hover
{ background-color: #626262;}

/* =========================================
   記事内の画像ギャラリー（About など）
   旧CSSの「縦長画像は幅50%」ルール（#single ... img.portrait）より優先させるため !important を使う
   ========================================= */
.post-gallery
{ max-width: 370px; margin: 20px 0 40px;}
.post-gallery--columns
{ display: flex; gap: 2em; max-width: none;}
.post-gallery__item
{ flex: 1 1 0; min-width: 0;}
.post-gallery__img
{ width: 100% !important; height: auto; margin: 0 !important;}

/* =========================================
   お知らせ一覧
   ========================================= */
.news-list__title
{ font-size: 25px; margin-bottom: 10px;}

/* =========================================
   記事本文（色付き文字・2段組み）
   旧サイトでは WordPress のブロックエディタで付けていた装飾
   ========================================= */
.post-mark
{ color: inherit;}
.post-mark--purple
{ color: #d2a6fb;}
.post-mark--red
{ color: #cf2e2e;}
.post-mark--pink
{ color: #e98484;}
.post-columns
{ display: flex; align-items: flex-start; gap: 2em; margin-bottom: 30px;}
.post-columns__item
{ flex: 1 1 0; min-width: 0;}

/* =========================================
   お問い合わせフォーム（旧フォームの見た目に合わせる）
   ========================================= */
.contact-form
{ max-width: 800px; margin: 30px auto 0;}
.contact-form__row
{ margin: 0 0 20px; padding: 0; border: none;}
.contact-form__label
{ display: block; margin-bottom: 5px; padding: 0; font-size: 13px;}
.contact-form__required
{ margin-left: 2px; color: #ff6666;}
.contact-form__input
{ display: block; width: 100%; height: 50px; 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; letter-spacing: 0; appearance: none;}
.contact-form__input:focus
{ border-color: #9c9998; background-color: #fff; outline: none;}
.contact-form__input--textarea
{ height: 180px; resize: vertical;}
.contact-form__input--error
{ border-color: #ff6666; background-color: #fff5f5;}
.contact-form__error
{ margin: 5px 0 0 !important; color: #ff6666; font-size: 12px !important;}
.contact-form__alert
{ margin: 20px 0 !important; padding: 12px 16px; border-left: 4px solid #ff6666; background-color: #fff5f5; color: #c33;}
.contact-form__choices
{ display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: start; gap: 10px 30px; padding-top: 5px;}
.contact-form__choice
{ display: flex; align-items: center; gap: 12px; cursor: pointer;}
/* config.css がチェックボックスの見た目を消しているため、四角とチェックを自分で描く（.contact-form を付けて優先させる） */
.contact-form .contact-form__checkbox
{ flex: none; width: 17px; height: 17px; margin: 0; border: 2px solid #9c9998; background: #fff center / 11px no-repeat;}
.contact-form .contact-form__checkbox:checked
{ border-color: #ed7a9c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23ed7a9c' stroke-width='2.4'/%3E%3C/svg%3E");}
.contact-form .contact-form__checkbox:focus-visible
{ outline: 2px solid #ed7a9c; outline-offset: 2px;}
.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__submit
{ display: block; width: 100%; 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__submit:hover
{ background-color: #a8a8a8;}
.contact-form__submit:disabled
{ opacity: 0.6; cursor: wait;}
.contact-form__back
{ font-size: 13px; text-decoration: underline;}
.contact-form__note
{ margin-top: 30px; color: #939090; font-size: 11px !important;}

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

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
  .pager__link
  { min-width: 32px; padding: 5px 8px;}
  .post-gallery
  { max-width: none;}
  .post-gallery--columns
  { display: block;}
  .post-gallery--columns .post-gallery__item + .post-gallery__item
  { margin-top: 20px;}
  .post-columns
  { display: block;}
  .contact-form__choices
  { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row;}
  /* 旧CSSの不具合修正：本文ページで左右の余白が無く、文字が画面の右端で切れていた */
  #single .news .container,
  #archive .news .container
  { width: auto; padding: 0 16px;}
}