/* ============================================================
   モザイクアート メッセージ募集モーダル
   ・配色はこの :root 変数を書き換えれば既存サイトに合わせられます
============================================================ */
:root {
  --modal-primary:      #f18d00;              /* メインカラー（ボタン・見出し等） */
  --modal-primary-dark: #000;              /* ホバー時など */
  --modal-surface:      #ffffff;              /* モーダルの背景 */
  --modal-text:         #2a2d2c;
  --modal-muted:        #6b7472;
  --modal-border:       #d9e0de;
  --modal-error:        #c0392b;
  --modal-radius:       14px;
  --modal-overlay-bg:   rgba(20, 28, 26, .55);/* 背景の暗転 */
}

/* モーダル表示中は背面のスクロールを固定 */
.modal-open { overflow: hidden; }

/* ── オーバーレイ（背景の暗い部分） ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(240 140 0 / 82%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
  z-index: 1000;
  overflow-y: auto;
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ── モーダルウィンドウ ── */
.modal-window {
    color: #333;
    position: relative;
    width: 50%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background:#fdf9f4;
    border-radius: 1em;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    padding: 4em;
    transform: translateY(24px) scale(.98);
    opacity: 0;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .6s ease;
}
.modal-overlay.is-open .modal-window {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ── 閉じるボタン ── */
.modal-close {
    position: absolute;
    top: 0.6em;
    right: 0.6em;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: #fdf9f4;
    font-size: 28px;
    line-height: 1;
    color: #525957;
    cursor: pointer;
    border-radius: 50%;
    transition: background .4s, color .4s;
    align-items: center;
    text-align: center;
}
.modal-close:hover { background: #f0f2f1; color: var(--modal-text); }

/* ── 見出し・説明文 ── */
.modal-title {
    margin: 0 0 14px;
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 700;
    color: #f18d00;
    text-align: center;
}
.modal-lead {
  margin: 0 0 24px;
  font-size: .93rem;
  line-height: 1.9;
  color: var(--modal-muted);
}

/* ── フォーム ── */
.form-row { margin-bottom: 20px; }

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: .9rem;
  font-weight: 600;
}
.req {
    display: inline-block;
    margin-left: 6px;
    padding: 4px 8px;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: #f15b00;
    border-radius: 10px;
    vertical-align: middle;
    margin-bottom: 3px;
}

.modal-window input[type="text"],
.modal-window textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: #333;
  background: #fff;
  border: 2px solid var(--modal-border);
  border-radius: 6px;
}
.modal-window input[type="text"]:focus,
.modal-window textarea:focus {
  outline: none;
}
.modal-window textarea {
  resize: vertical;
  line-height: 1.7;
}

.counter {
  margin-top: 6px;
  text-align: right;
  font-size: .8rem;
  color: var(--modal-muted);
}
.counter .is-over {
  color: var(--modal-error);
  font-weight: 700;
}

.form-error {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #fdecea;
  color: var(--modal-error);
  border-radius: 8px;
  font-size: .86rem;
  line-height: 1.6;
}

/* ── 送信ボタン ── */
.submit-btn {
  display: block;
  width: 100%;
  padding: 15px;
  margin-top: 4px;
  font-size: 1.02rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: #f15b00;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .4s, transform .06s;
	text-align:center;
}
.submit-btn:hover { background: var(--modal-primary-dark); }
.submit-btn:active { transform: translateY(1px); }
.submit-btn:disabled { opacity: .6; cursor: default; }

/* ── 完了画面 ── */
.done-inner {
  text-align: center;
  padding: 16px 0 8px;
}
.done-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #fff;
  background: var(--modal-primary);
  border-radius: 50%;
}

/* ── ハニーポット（画面外に隠す） ── */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── トリガーボタン（既存デザインがある場合はそちらを優先） ── */
.message-bosyu .modal-btn {
  cursor: pointer;
}

/* ── スマホ対応 ── */
@media (max-width: 768px) {
  .modal-window { padding: 40px 20px 24px; }
  .modal-title  { font-size: 1.15rem; }
	
	.modal-window {
    width: 100%;
    max-height: calc(100vh - 20px);
}
}

/* ── アニメーション控えめ設定を尊重 ── */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay { transition: opacity .5s ease, visibility .5s ease; }
  .modal-window  { transition: opacity .5s ease; transform: none; }
  .modal-overlay.is-open .modal-window { transform: none; }
}