/* =========================================================
   Mango House Form Common CSS
   対象:
   - #mh-uniform-form-scope
   - #mh-contact-form-wrap
   - #mh-catalog-form-scope
   - #mh-return-form-scope
========================================================= */

/* ===== 共通スコープ ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
),
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) *{
  box-sizing:border-box;
}

/* ===== 共通変数・ベース ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
){
  --mh-red: #b6232a;
  --mh-red-dark: #941b22;
  --mh-ink: #2c2f36;
  --mh-muted: #5f6978;
  --mh-line: #cfd6df;
  --mh-line-soft: #d6dde6;
  --mh-line-box: #cfd8e3;
  --mh-focus: rgba(182, 35, 42, 0.16);
  --mh-white: #ffffff;
  --mh-note-bg: #fff7f7;
  --mh-note-border: #e8b8bc;

  width:100%;
  max-width:100%;
  margin:0;
  background:#fff;
  color:var(--mh-ink);
  font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height:1.65;
}

/* ページごとの初期padding差分 */
#mh-uniform-form-scope,
#mh-catalog-form-scope,
#mh-return-form-scope{
  padding:0;
}
#mh-contact-form-wrap{
  padding:8px;
}

/* ===== 共通ラッパー ===== */
#mh-uniform-form-scope .mh-uniform-form-wrap,
#mh-catalog-form-scope .mh-form-wrap,
#mh-return-form-scope .mh-form-wrap{
  width:100%;
  max-width:100%;
  margin:0;
  padding:8px;
}

/* ===== 共通シェル ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-shell,
#mh-uniform-form-scope .mh-uniform-form-shell{
  width:100%;
  max-width:100%;
  margin:0;
  background:var(--mh-white);
  border:1px solid var(--mh-line-soft);
  border-radius:0 0 12px 12px;
  overflow:visible;
  box-shadow:none;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-shell::before,
#mh-uniform-form-scope .mh-uniform-form-shell::before{
  content:"";
  display:block;
  height:5px;
  background:linear-gradient(90deg, var(--mh-red) 0%, #d84a52 45%, var(--mh-red) 100%);
}

/* ===== 共通ヘッダー ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-header{
  padding:14px 12px 12px;
  background:#fff;
  border-bottom:1px solid var(--mh-line-soft);
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-header h1{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.35;
  letter-spacing:.02em;
  color:var(--mh-red-dark);
  font-weight:700;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-header p{
  margin:0;
  font-size:14px;
  color:var(--mh-muted);
}

/* ===== 共通本文 ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-body{
  padding:10px 8px;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-block{
  margin-bottom:10px;
  padding:12px 10px;
  border:1px solid var(--mh-line-soft);
  border-radius:8px;
  background:#fff;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-block:last-of-type{
  margin-bottom:6px;
}

/* ===== ラベルまわり ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-label-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-label-row p{
  margin:0;
  font-weight:700;
  font-size:17px;
  color:var(--mh-ink);
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-req{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  font-weight:700;
  color:#fff;
  background:linear-gradient(180deg, var(--mh-red) 0%, var(--mh-red-dark) 100%);
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-sub-note{
  margin:10px 0 6px;
  color:var(--mh-muted);
  font-size:14px;
  text-align:left;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-help{
  margin:6px 0 0;
  font-size:13px;
  color:var(--mh-muted);
  text-align:left !important;
  line-height:1.5;
}

/* ===== 入力系 ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-name-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-input,
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope
) .mh-select,
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-textarea{
  width:100% !important;
  max-width:100% !important;
  border:1px solid var(--mh-line);
  border-radius:10px;
  background:#fff;
  color:var(--mh-ink);
  font-size:16px;
  transition:border-color .16s ease, box-shadow .16s ease;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-input,
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope
) .mh-select{
  min-height:48px;
  padding:11px 12px;
}

#mh-uniform-form-scope .mh-textarea,
#mh-contact-form-wrap .mh-textarea,
#mh-return-form-scope .mh-textarea{
  min-height:160px;
  padding:12px;
  resize:vertical;
  line-height:1.6;
}

#mh-catalog-form-scope .mh-textarea{
  min-height:140px;
  padding:12px;
  resize:vertical;
  line-height:1.6;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-input::placeholder,
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-textarea::placeholder{
  color:#8f98a6;
  font-size:15px;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-input:focus,
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope
) .mh-select:focus,
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-textarea:focus{
  outline:none;
  border-color:var(--mh-red);
  box-shadow:0 0 0 4px var(--mh-focus);
}

/* ===== 住所まわり ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope
) .mh-address-box{
  border:1px solid var(--mh-line-box);
  border-radius:8px;
  background:#fff;
  padding:10px;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope
) .mh-address-row{
  margin-bottom:10px;
}
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope
) .mh-address-row:last-child{
  margin-bottom:0;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope
) .mh-mini-label{
  margin:0 0 6px;
  font-size:13px;
  font-weight:700;
  color:#556579;
  text-align:left;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope
) .mh-zip-wrap{
  width:100%;
  max-width:100%;
}

/* ===== 送信ボタン ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-submit-wrap{
  margin-top:12px;
  text-align:center;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-submit{
  appearance:none;
  border:none;
  cursor:pointer;
  color:#fff;
  font-weight:800;
  font-size:16px;
  letter-spacing:.03em;
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  background:linear-gradient(180deg, #cf2f38 0%, var(--mh-red) 55%, var(--mh-red-dark) 100%);
  box-shadow:0 8px 16px rgba(182,35,42,.20);
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-foot-note{
  margin:10px 0 0;
  font-size:13px;
  color:var(--mh-muted);
  text-align:center;
  line-height:1.5;
}

/* ===== FormMailerや既存CSSの中央寄せ対策 ===== */
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-body p,
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-body div,
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-form-body label{
  text-align:left;
}

:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-submit-wrap,
:is(
  #mh-uniform-form-scope,
  #mh-contact-form-wrap,
  #mh-catalog-form-scope,
  #mh-return-form-scope
) .mh-submit-wrap p{
  text-align:center !important;
}

/* ===== 共通リンクボタン（uniform / contact） ===== */
#mh-uniform-form-scope .mh-link-buttons,
#mh-contact-form-wrap .mh-link-buttons{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:12px 0 4px;
}

#mh-uniform-form-scope .mh-link-btn,
#mh-contact-form-wrap .mh-link-btn{
  display:block;
  width:100%;
  text-decoration:none;
  text-align:center;
  font-weight:700;
  font-size:14px;
  line-height:1.4;
  padding:12px 14px;
  border-radius:10px;
  transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}

#mh-uniform-form-scope .mh-link-btn:hover,
#mh-contact-form-wrap .mh-link-btn:hover{
  opacity:.96;
  transform:translateY(-1px);
}

#mh-uniform-form-scope .mh-link-btn-outline,
#mh-contact-form-wrap .mh-link-btn-outline{
  color:#b6232a;
  background:#fff;
  border:1px solid #d9a9ad;
}

#mh-uniform-form-scope .mh-link-btn-solid,
#mh-contact-form-wrap .mh-link-btn-solid{
  color:#fff;
  border:none;
  background:linear-gradient(180deg, #cf2f38 0%, #b6232a 55%, #941b22 100%);
  box-shadow:0 8px 16px rgba(182,35,42,.18);
}

/* ===== モーダル共通（uniform / return） ===== */
#mh-uniform-form-scope .mh-modal-overlay,
#mh-return-form-scope .mh-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(20, 24, 32, 0.5);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:99999;
}
#mh-uniform-form-scope .mh-modal-overlay.is-open,
#mh-return-form-scope .mh-modal-overlay.is-open{
  display:flex;
}

#mh-uniform-form-scope .mh-modal,
#mh-return-form-scope .mh-modal{
  width:100%;
  background:#fff;
  border:1px solid #d6dde6;
  border-radius:16px;
  box-shadow:0 18px 40px rgba(20, 24, 32, 0.22);
  overflow:hidden;
}

#mh-uniform-form-scope .mh-modal-head,
#mh-return-form-scope .mh-modal-head{
  position:relative;
  padding:14px 14px 12px;
  background:#fff;
  border-bottom:1px solid #eef1f5;
}

#mh-uniform-form-scope .mh-modal-head::before,
#mh-return-form-scope .mh-modal-head::before{
  content:"";
  display:block;
  height:6px;
  margin:-14px -14px 12px;
  background:linear-gradient(90deg, #b6232a 0%, #d84a52 45%, #b6232a 100%);
}

#mh-uniform-form-scope .mh-modal-body,
#mh-return-form-scope .mh-modal-body{
  padding:14px;
  color:#2c2f36;
}

#mh-uniform-form-scope .mh-modal-note,
#mh-return-form-scope .mh-modal-note{
  margin:10px 0 0;
  padding:10px;
  border:1px solid #e8b8bc;
  background:#fff7f7;
  border-radius:10px;
  font-size:16px;
  color:#5f6978;
  line-height:1.6;
}

#mh-uniform-form-scope .mh-modal-actions,
#mh-return-form-scope .mh-modal-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 14px 14px;
}

#mh-uniform-form-scope .mh-modal-btn,
#mh-return-form-scope .mh-modal-btn{
  appearance:none;
  border:1px solid #cfd6df;
  background:#fff;
  color:#2c2f36;
  border-radius:10px;
  min-height:44px;
  padding:10px 12px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

#mh-uniform-form-scope .mh-modal-btn:focus,
#mh-return-form-scope .mh-modal-btn:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(182,35,42,.12);
  border-color:#b6232a;
}

#mh-uniform-form-scope .mh-modal-btn.ok,
#mh-return-form-scope .mh-modal-btn.ok{
  border:none;
  color:#fff;
  background:linear-gradient(180deg, #cf2f38 0%, #b6232a 55%, #941b22 100%);
  box-shadow:0 8px 16px rgba(182,35,42,.20);
}

/* ===== 個別: uniform ===== */
#mh-uniform-form-scope .mh-header-note{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--mh-note-border);
  background:var(--mh-note-bg);
  border-radius:8px;
  font-size:16px;
  color:#4a4f59;
  line-height:1.6;
}

#mh-uniform-form-scope .mh-header-note strong{
  color:var(--mh-red-dark);
}

#mh-uniform-form-scope .mh-radio-wrap{
  border:1px solid var(--mh-line-box);
  border-radius:8px;
  background:#fff;
  padding:8px 10px;
}

#mh-uniform-form-scope .mh-radio-list{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}

#mh-uniform-form-scope .mh-radio-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--mh-ink);
  text-align:left;
}

#mh-uniform-form-scope .mh-radio-item input{
  accent-color:var(--mh-red);
}

#mh-uniform-form-scope .mh-modal{
  max-width:420px;
  animation:mhModalPop .18s ease-out;
}

#mh-uniform-form-scope .mh-modal-title{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#941b22;
  line-height:1.4;
}

#mh-uniform-form-scope .mh-modal-message{
  margin:0;
  font-size:17px;
  line-height:1.7;
}

#mh-uniform-form-scope .mh-modal-message strong{
  color:#941b22;
}

@keyframes mhModalPop{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ===== 個別: catalog ===== */
#mh-catalog-form-scope .mh-catalog-video{
  padding-top:90px;
  margin-top:-70px;
  text-align:center;
}

#mh-catalog-form-scope .mh-catalog-video h2{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.4;
  color:var(--mh-red-dark);
  font-weight:700;
}

#mh-catalog-form-scope .mh-video-frame{
  border:1px solid var(--mh-line-soft);
  border-radius:10px;
  overflow:hidden;
  background:#000;
}

#mh-catalog-form-scope .mh-video-frame iframe{
  display:block;
  width:100%;
}

#mh-catalog-form-scope .mh-catalog-video,
#mh-catalog-form-scope .mh-catalog-video h2{
  text-align:center !important;
}

/* ===== 個別: return ===== */
#mh-return-form-scope .mh-info-note{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--mh-note-border);
  background:#fff8f8;
  border-radius:8px;
}

#mh-return-form-scope .mh-info-note p{
  margin:0 0 10px;
  font-size:15px;
  color:#4a4f59;
  line-height:1.7;
}

#mh-return-form-scope .mh-info-note p:last-child{
  margin-bottom:0;
}

#mh-return-form-scope .mh-desc-card{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--mh-line-soft);
  border-radius:10px;
  background:#fff;
}

#mh-return-form-scope .mh-desc-card h2{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.4;
  color:var(--mh-red-dark);
  font-weight:700;
}

#mh-return-form-scope .mh-desc-card p{
  margin:0;
  font-size:13px;
  color:#4a4f59;
  line-height:1.7;
}

#mh-return-form-scope .mh-modal{
  max-width:520px;
  animation:mhReturnModalPop .18s ease-out;
}

#mh-return-form-scope .mh-modal-title{
  margin:0;
  font-size:19px;
  font-weight:800;
  color:#941b22;
  line-height:1.4;
}

#mh-return-form-scope .mh-modal-body{
  max-height:min(70vh, 560px);
  overflow:auto;
}

@keyframes mhReturnModalPop{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ===== SP ===== */
@media (max-width: 640px){
  #mh-uniform-form-scope .mh-modal,
  #mh-return-form-scope .mh-modal{
    max-width:100%;
    border-radius:14px;
  }

  #mh-uniform-form-scope .mh-modal-actions,
  #mh-return-form-scope .mh-modal-actions{
    grid-template-columns:1fr;
  }
}

/* ===== PC ===== */
@media (min-width: 768px){
  #mh-uniform-form-scope .mh-uniform-form-wrap,
  #mh-catalog-form-scope .mh-form-wrap,
  #mh-return-form-scope .mh-form-wrap{
    max-width:980px;
    margin:0 auto;
    padding:16px;
  }

  #mh-contact-form-wrap{
    max-width:980px;
    margin:0 auto;
    padding:16px;
  }

  :is(
    #mh-uniform-form-scope,
    #mh-contact-form-wrap,
    #mh-catalog-form-scope,
    #mh-return-form-scope
  ) .mh-form-shell,
  #mh-uniform-form-scope .mh-uniform-form-shell{
    border-radius:14px;
  }

  :is(
    #mh-uniform-form-scope,
    #mh-contact-form-wrap,
    #mh-catalog-form-scope,
    #mh-return-form-scope
  ) .mh-form-header{
    padding:18px 18px 12px;
  }

  :is(
    #mh-uniform-form-scope,
    #mh-contact-form-wrap,
    #mh-catalog-form-scope,
    #mh-return-form-scope
  ) .mh-form-header h1{
    font-size:24px;
  }

  #mh-uniform-form-scope .mh-form-header p,
  #mh-contact-form-wrap .mh-form-header p,
  #mh-catalog-form-scope .mh-form-header p{
    font-size:14px;
  }

  :is(
    #mh-uniform-form-scope,
    #mh-contact-form-wrap,
    #mh-catalog-form-scope,
    #mh-return-form-scope
  ) .mh-form-body{
    padding:14px;
  }

  :is(
    #mh-uniform-form-scope,
    #mh-contact-form-wrap,
    #mh-catalog-form-scope,
    #mh-return-form-scope
  ) .mh-form-block{
    padding:14px 12px;
    border-radius:10px;
  }

  :is(
    #mh-uniform-form-scope,
    #mh-contact-form-wrap,
    #mh-catalog-form-scope,
    #mh-return-form-scope
  ) .mh-name-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  #mh-uniform-form-scope .mh-zip-wrap,
  #mh-contact-form-wrap .mh-zip-wrap,
  #mh-catalog-form-scope .mh-zip-wrap{
    max-width:240px;
  }

  #mh-uniform-form-scope .mh-radio-list{
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
  }

  :is(
    #mh-uniform-form-scope,
    #mh-contact-form-wrap,
    #mh-catalog-form-scope,
    #mh-return-form-scope
  ) .mh-submit{
    width:auto;
    min-width:280px;
    border-radius:999px;
    padding:14px 28px;
  }

  #mh-uniform-form-scope .mh-link-buttons,
  #mh-contact-form-wrap .mh-link-buttons{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  #mh-uniform-form-scope .mh-link-btn,
  #mh-contact-form-wrap .mh-link-btn{
    font-size:15px;
    padding:13px 16px;
  }

  #mh-catalog-form-scope .mh-catalog-video h2{
    font-size:18px;
  }

  #mh-catalog-form-scope .mh-video-frame iframe{
    height:320px;
  }

  #mh-return-form-scope .mh-desc-card{
    padding:14px;
  }

  #mh-return-form-scope .mh-desc-card h2{
    font-size:17px;
  }
}