/* ニュースレターの登録・配信停止ページ(libs/newsletter-page.php)。
   Brevo の sib-styles.css の後に読み込み、Brevo 既定の書体・色・枠をテーマ(問い合わせフォーム page-contact.php)に合わせる。
   Brevo の main.js が使う id・クラスはテンプレートで変えていないので、ここでは見た目だけを上書きする */

.newsletter-page .newsletter-page__eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7d7d7d;margin-bottom:14px}
.newsletter-page .newsletter-page__lead{margin-top:28px;font-size:14px;line-height:1.6;max-width:420px}

/* Brevo の外枠: 背景・枠・余白をなくしてページになじませる */
.newsletter-form .sib-form{padding:0;background:transparent;font-family:inherit;text-align:left}
.newsletter-form #sib-container{max-width:none;margin:0;padding:0;background:transparent;border:0;border-radius:0;text-align:left}
.newsletter-form .sib-form-block{padding:0}
.newsletter-form .sib-form-block:has(> .sib-form-block__button){margin-top:24px}   /* 送信ボタンの上(登録ページは間に見えない同意の項目がある) */

/* 入力欄(問い合わせフォームと同じ見た目) */
.newsletter-form .entry__label{display:block;font-family:inherit;font-size:14px;font-weight:400;line-height:1.4;color:#141414;margin-bottom:8px;text-align:left}
.newsletter-form .entry__label::after{content:none}
.newsletter-form .entry__field{border:0;border-radius:0;background:none;box-shadow:none;margin:0}
.newsletter-form .entry__field .input{width:100%;font:inherit;font-size:16px;line-height:1.5;color:#141414;background:#fff;border:1px solid #cfcfcf;border-radius:6px;padding:12px 14px;margin:0;-webkit-appearance:none;appearance:none;box-shadow:none}
.newsletter-form .entry__field .input::placeholder{font-family:inherit;color:#b0b0b0}
.newsletter-form .entry__field .input:focus{outline:none;border-color:#141414}
.newsletter-form .entry__specification{display:block;font-family:inherit;font-size:12px;line-height:1.5;color:#7d7d7d;margin-top:8px;text-align:left}
.newsletter-form .entry__error{font-family:inherit;font-size:13px;line-height:1.4;color:#b3261e;background:none;border:0;padding:0;margin-top:6px}
.newsletter-form .entry__error:empty{display:none}

/* 同意の項目(常に true で送る)は見えないだけにする。display:none にすると main.js が送らない */
.newsletter-form .newsletter-form__sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 送信ボタン: テーマの黒い丸ボタン(c-btn c-btn--black)。Brevo のボタンの枠・背景を消す */
.newsletter-form button.sib-form-block__button{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.newsletter-form button.sib-form-block__button:disabled{opacity:.5;cursor:default}
.newsletter-form button.sib-form-block__button .progress-indicator__icon{width:16px;height:16px;fill:#141414;order:2}
.newsletter-form button.sib-form-block__button .sib-hide-loader-icon{display:none}

/* 送信後のメッセージ(main.js が表示を切り替える。最初は隠す) */
.newsletter-form .sib-form-message-panel{display:none;font-family:inherit;font-size:14px;line-height:1.5;text-align:left;border:1px solid;border-radius:6px;padding:12px 14px;margin:0 0 20px;max-width:none}
/* main.js は表示するとき sib-form-message-panel--active を付ける(sib-styles.css は display:inline-block)。上の display:none の方が詳細度が高く、付けても出なかった */
.newsletter-form .sib-form-message-panel--active{display:block}
.newsletter-form .sib-form-message-panel--error{color:#b3261e;background:#fdf1f0;border-color:#f0c4bf}
.newsletter-form .sib-form-message-panel--success{color:#141414;background:#f4f4f4;border-color:#e3e3e3}
.newsletter-form .sib-form-message-panel__text{display:block;padding:0}

@media (max-width: 767px){
  .newsletter-page .static_page__cnt__right{margin-top:36px}
}