@charset "UTF-8";
/* 移行後に新しく書くスタイル（BEM記法）
   旧テーマのCSS（config.css layout.css style.css animation.css slick.css）の後に読み込む
   色は旧サイトに合わせている（水色 #1dd5e6・青 #46aef7・ボタン #22302B） */

/* =========================================
   記事ページ（旧テーマの #single に足りない分）
   ========================================= */
#single .news .container .imgtxt figure
{ margin: 0 0 30px;}
#single .news .container .imgtxt figcaption
{ margin-top: 8px; color: #777; font-size: 12px; line-height: 1.6; text-align: center;}
#single .news .container .imgtxt .twitter-tweet
{ margin: 20px auto;}
.post-back
{ margin: 40px 0 60px; text-align: center;}
.post-back__link
{ color: #46aef7; font-size: 14px;}

/* =========================================
   404ページ（旧テーマの .error404 h2 と同じ見た目を h1 に）
   ========================================= */
.error404 h1
{ text-align: center; margin-bottom: 20px; font-size: 25px;}

/* =========================================
   お問い合わせフォーム（旧サイトの見た目に合わせる）
   ========================================= */
.contact-page__lead
{ margin: 30px 0;}
.contact-form
{ margin: 30px 0 0;}
.contact-form__row
{ margin: 0 0 30px; padding: 0; border: none;}
.contact-form__label
{ display: inline-block; position: relative; margin: 0 0 4px; padding: 0; font-size: 18px; font-weight: bold;}
.contact-form__required
{ margin-left: 10px; padding: 0 5px; background-color: #1dd5e6; color: #fff; font-size: 11px; font-weight: normal; vertical-align: middle;}
/* 旧CSS（config.css）の input[type="text"] より優先させるため、.contact-form を前に付ける */
.contact-form .contact-form__input
{ display: block; width: 100%; height: 40px; padding: 10px; border: 1px solid #000; border-radius: 0; background-color: #fff; color: #333; font-family: inherit; font-size: 16px; line-height: 1.4; appearance: none;}
.contact-form .contact-form__input::placeholder
{ color: #aaa;}
.contact-form .contact-form__input:focus
{ outline: 2px solid #46aef7; outline-offset: 1px;}
.contact-form .contact-form__input--textarea
{ height: 250px; resize: vertical;}
.contact-form .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-direction: column; gap: 20px; padding-top: 10px;}
.contact-form__choice
{ display: flex; align-items: center; gap: 10px; width: fit-content; font-weight: bold; cursor: pointer;}
/* 旧サイトと同じ四角い枠。チェックすると水色の印が付く（旧CSSが見た目を消しているため作り直す） */
.contact-form .contact-form__checkbox
{ flex: none; width: 20px; height: 20px; margin: 0; border: 2px solid #231815; background: #fff; appearance: none; -webkit-appearance: none; cursor: pointer;}
.contact-form .contact-form__checkbox:checked
{ background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%231dd5e6' stroke-width='3'/%3E%3C/svg%3E") center / 14px no-repeat;}
.contact-form .contact-form__checkbox:focus-visible
{ outline: 2px solid #46aef7; outline-offset: 2px;}
/* ボット対策の隠し欄。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: 40px 0 20px;}
.contact-form__submit
{ display: block; width: 150px; padding: 8px 10px; border: 1px solid #000; border-radius: 0; background-color: #fff; color: #333; font-family: inherit; font-size: 15px; letter-spacing: 0.1em; cursor: pointer; appearance: none;}
.contact-form__submit:hover
{ background-color: #f3fbfd;}
.contact-form__submit:disabled
{ opacity: 0.6; cursor: wait;}
.contact-form__back
{ color: #46aef7; 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) {
  .contact-form__label
  { font-size: 16px;}
}