@charset "UTF-8";
/* 移行後に新しく書くスタイル（BEM記法）
   旧テーマのCSSを流用する場合は、それを先に読み込み、この site.css を最後に読み込む
   色・余白は旧サイトに合わせて書き換える */

/* =========================================
   土台
   ========================================= */
*,
*::before,
*::after
{ box-sizing: border-box;}
/* body の文字色・書体・行間は旧CSS（config.css・layout.css）に任せる */

/* =========================================
   ヘッダー
   ========================================= */
.site-header
{ border-bottom: 1px solid #eee;}
.site-header__inner
{ display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1100px; margin: 0 auto; padding: 16px 20px;}
.site-header__logo
{ display: block; line-height: 0;}
.site-header__list
{ display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none;}
.site-header__link
{ text-decoration: none; font-size: 14px;}
.site-header__link--current
{ border-bottom: 2px solid currentColor;}

/* =========================================
   フッター
   ========================================= */
.site-footer
{ margin-top: 80px; padding: 40px 20px; background-color: #f5f5f5; font-size: 13px;}
.site-footer__inner
{ max-width: 1100px; margin: 0 auto;}
.site-footer__menu,
.site-footer__sns
{ display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 20px; padding: 0; list-style: none;}
.site-footer__name
{ margin: 0; font-weight: bold;}
.site-footer__address
{ margin: 0 0 20px;}
.site-footer__copy
{ margin: 0; color: #888;}

/* =========================================
   ページ共通の枠
   ========================================= */
.page__inner
{ max-width: 800px; margin: 0 auto; padding: 40px 20px 0;}
.page__title
{ margin: 0 0 30px; font-size: 28px; line-height: 1.4;}

/* =========================================
   お知らせ一覧・トップの新着
   ========================================= */
.news-list
{ margin: 0; padding: 0; list-style: none; border-top: 1px solid #ddd;}
.news-list__item
{ border-bottom: 1px solid #ddd;}
.news-list__link
{ display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 20px; padding: 16px 0; text-decoration: none;}
.news-list__img
{ grid-row: span 2; width: 160px; aspect-ratio: 16 / 9; object-fit: cover;}
.news-list__date
{ color: #888; font-size: 13px;}
.news-list__title
{ grid-column: 2; font-weight: bold;}
.top-news
{ margin-top: 60px;}
.top-news__more
{ text-align: right;}

/* =========================================
   記事ページ
   ========================================= */
.post__meta
{ margin: -20px 0 20px; color: #888; font-size: 13px;}
.post__img
{ display: block; width: 100%; margin-bottom: 30px;}
.post__body h2
{ margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 2px solid #333; font-size: 22px;}
.post__body h3
{ margin: 30px 0 12px; font-size: 18px;}
.post__back
{ margin-top: 40px;}
/* 目次（insert_toc() が本文の h2・h3 から作る。クラス名は関数に合わせている） */
.post__body .index
{ margin: 30px 0; padding: 20px 24px; background-color: #f7f7f7;}
.post__body .index .ttl
{ font-weight: bold;}
/* 記事中の色付き文字 */
.post-mark--red
{ color: #cf2e2e;}

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

/* =========================================
   お問い合わせフォーム
   ========================================= */
.contact-form
{ margin: 30px 0 0;}
.contact-form__row
{ margin: 0 0 20px; padding: 0; border: none;}
.contact-form__label
{ display: block; margin-bottom: 5px; padding: 0; font-size: 14px; font-weight: bold;}
.contact-form__required
{ margin-left: 4px; color: #d33;}
.contact-form__input
{ display: block; width: 100%; height: 50px; padding: 10px 16px; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; color: #333; font-family: inherit; font-size: 16px; line-height: 1.4; appearance: none;}
.contact-form__input:focus
{ border-color: #333; outline: none;}
.contact-form__input--textarea
{ height: 180px; resize: vertical;}
.contact-form__input--error
{ border-color: #d33; background-color: #fff5f5;}
.contact-form__error
{ margin: 5px 0 0; color: #d33; font-size: 13px;}
.contact-form__alert
{ margin: 20px 0; padding: 12px 16px; border-left: 4px solid #d33; background-color: #fff5f5; color: #b22;}
.contact-form__choices
{ display: flex; flex-wrap: wrap; gap: 10px 30px; padding-top: 5px;}
.contact-form__choice
{ display: flex; align-items: center; gap: 8px; cursor: pointer;}
.contact-form__checkbox
{ flex: none; width: 18px; height: 18px; margin: 0;}
/* ボット対策の隠し欄。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__submit
{ display: block; width: 100%; max-width: 360px; padding: 14px 48px; border: none; border-radius: 6px; background-color: #333; color: #fff; font-family: inherit; font-size: 17px; letter-spacing: 0.1em; cursor: pointer; appearance: none;}
.contact-form__submit:hover
{ background-color: #555;}
.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
{ margin: 30px 0 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; overflow-wrap: anywhere;}
.contact-confirm__empty
{ color: #b0b0b0;}

/* =========================================
   Responsive: Mobile
   ========================================= */
@media (max-width: 768px) {
  .site-header__inner
  { flex-direction: column; align-items: flex-start;}
  .page__inner
  { padding: 30px 16px 0;}
  .page__title
  { font-size: 22px;}
  .news-list__img
  { width: 110px;}
  .pager__link
  { min-width: 32px; padding: 5px 8px;}
  .contact-form__choices
  { flex-direction: column;}
}

/* =========================================
   旧テーマ（ecniS）に合わせる調整
   ========================================= */
/* 旧CSSは textarea も高さ 40px にしていたため、入力欄を広げる */
#top .contact .container form textarea
{ height: auto; min-height: 200px;}
#top .contact .ttl h1
{ font-size: 25px;}
#top .contact .container form .contact-form__error
{ margin: -14px 0 16px; color: #be1515; font-size: 14px;}
/* お知らせ（旧テーマの #archive・#single に足したもの） */
.news-archive__title
{ margin-bottom: 20px; font-size: 25px;}
.news-archive__title small
{ margin-left: 12px; font-size: 15px;}
.news-single__back
{ margin-top: 40px; font-size: 14px;}
.news-single__back a
{ text-decoration: underline;}
/* お問い合わせの確認・完了画面（旧サイトに無い画面。#top .contact の中に置く） */
.contact-step
{ max-width: 600px !important;}
.contact-step p
{ margin-bottom: 1em; line-height: 1.8;}
.contact-step .ttl
{ margin-bottom: 30px;}
.contact-step .contact-form__submit
{ max-width: 250px; border-radius: 0; background-color: #830000; font-size: 15px;}
.contact-step .contact-form__submit:hover
{ background-color: #a00;}
.contact-step a
{ text-decoration: underline;}
/* フォーム単体のページ（contact/・確認・完了）は、重なって表示される旧ヘッダーの分だけ下げる。トップの #contact には効かない */
#top main > #contact:first-child
{ padding: 130px 0 60px;}
@media screen and (max-width: 768px) {
  #top main > #contact:first-child
  { padding-top: 90px;}
}