/* ===================================================================
   mailform.css  FELISSIMO風セクション＆必須バッジスタイル + ZipCloud用UI
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root{
  --c-primary:#74c4c4;
  --c-danger:#e02424;
  --c-text:#111827;
  --c-muted:#6B7280;
  --c-border:#e5e7eb;
  --c-bg:#f9fafb;
  --radius:6px;
  --transition:.25s;
  --fs-base:16px;
}

html{font-size:var(--fs-base);}
body{
  margin:0;
  padding:1rem;
  font-family:'Inter', sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.6;
  /*background-color: #6b6b6d;*/
  /*background-image: url("https://papasalada.com/Monaka-2.0.4/photo_form_bg.jpg");*/
  /*background-repeat: no-repeat;*/
  /*background-position: center center;*/
  /*background-size: contain;*/
}

/* ---------- Wrapper ---------- */
.mailform{
  max-width:860px;
  margin:2rem auto 4rem;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  padding:3rem 3.5rem;
  /*margin-top: 600px;*/
}
.mf-page-title{
  margin:20px 0 50px;
  text-align:center;
  font-size:1.75rem;
  font-weight:600;
}
.mf-lead{
  text-align:left;
  margin:0 0 2.5rem;
  color:var(--c-muted);
  font-size:.95rem;
}

/* ---------- Section ---------- */
.form-section{margin-bottom:3rem;}
.sec-ttl{
  font-size:1.15rem;
  font-weight:600;
  background:#f1f5f9;
  padding:.9rem 1.2rem;
  border-radius:var(--radius);
  margin:0 0 1.2rem;
}
.sec-desc{
  margin:.4rem 0 1.8rem;
  font-size:.9rem;
  color:var(--c-muted);
}
.sec-desc a{color:var(--c-primary);}

/* ---------- QA links ---------- */
.qa-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
}
.qa-links li a{
  display:flex;
  align-items:center;
  gap:.3rem;
  padding:.6rem .9rem;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  font-size:.9rem;
  color:var(--c-text);
  text-decoration:none;
  transition:background var(--transition),border-color var(--transition);
}
.qa-links li a:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
}
.qa-ico{font-weight:600;color:var(--c-muted);}

/* ---------- Items ---------- */
.mf-item{margin:0 0 1.8rem;}
.mf-label{
  display:block;
  margin-bottom:.45rem;
  font-weight:600;
  font-size:.95rem;
  color:var(--c-text);
}
.mf-label.is-group{margin-bottom:.75rem;}
.req-badge{
  background:var(--c-danger);
  color:#fff;
  font-size:.7rem;
  padding:.15rem .45rem;
  border-radius:999px;
  margin-left:.35rem;
  vertical-align:middle;
}
.mf-control{width:100%;}

/* Inputs */
.mf-control input[type="text"],
.mf-control input[type="email"],
.mf-control input[type="tel"],
.mf-control input[type="password"],
.mf-control input[type="number"],
.mf-control select,
.mf-control textarea{
  width:100%;
  padding:0.9rem 0.8rem;
  font-size:1rem;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:#fff;
  transition:border-color var(--transition), box-shadow var(--transition);
  box-sizing:border-box;
}
.mf-control textarea{
  min-height:180px;
  resize:vertical;
}
.mf-control input:focus,
.mf-control select:focus,
.mf-control textarea:focus{
  outline:none;
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.15);
}

/* Example text */
.mf-example{
  margin:.4rem 0 0;
  font-size:.8rem;
  color:var(--c-muted);
}

/* Checkbox / Radio */
.checkbox-group,
.radio-group{
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem 2rem;
  font-size:.9rem;
}
.checkbox-group label,
.radio-group label{
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.35rem;
  color:var(--c-text);
}

/* File */
input[type="file"]{
  padding:.5rem .8rem;
  font-size:.9rem;
}

/* ---------- Buttons ---------- */
.submit_area{
  text-align:center;
  margin-top:3rem;
}
.confirmation_btn{
  padding:.9rem 2.8rem;
  font-size:1rem;
  font-weight:600;
  background:var(--c-primary);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--transition), transform var(--transition);
  text-decoration: none;
}
.confirmation_btn:hover{
  background:#52aaaa;
  transform:translateY(-2px);
}

@media (max-width:640px){
  .confirmation_btn{
    padding:.9rem;
  }
}

/* ---------- Confirm table ---------- */
.table-confirm{
  width:100%;
  border-collapse:collapse;
  table-layout: fixed;
  font-size:.95rem;
}
.table-confirm th{
  width:30%;
  white-space: normal;
  word-break: break-word;
  text-align:left;
  padding:.6rem .8rem .6rem 0;
  border-bottom:1px solid var(--c-border);
  vertical-align:top;
}
.table-confirm td{
  width:70%;
  word-break: break-all;
  white-space: normal;
  padding:.6rem 0;
  border-bottom:1px solid var(--c-border);
}

.pc-only {display: table-cell;}
.msg-td::before {content: none;}

@media (max-width: 600px) {
  .pc-only {display: none;}

  .msg-td::before {
    content: attr(data-label) "";
    font-weight: 700;
    display: block;
    margin-bottom: .3rem;
  }
}

/* ---------- ZipCloud UI ---------- */
.zip-block{
  display:flex;
  gap:.6rem;
  align-items:center;
}
.zip-btn{
  padding:.55rem 1.2rem;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:#f1f5f9;
  cursor:pointer;
  font-size:.85rem;
  line-height:1;
  white-space: nowrap;
}
.zip-btn:hover{
  background:#e2e8f0;
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .mailform{padding:2rem 1.4rem;}
  .sec-ttl{font-size:1.05rem;}
  .qa-links li a{font-size:.85rem;}
}

.mf-clear-btn {
  margin-left: 0.5em;
  padding: 0.2em 0.6em;
  font-size: 0.9em;
  color: #fff;
  background-color: #999;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.mf-clear-btn:hover {
  background-color: #666;
}
.mf-clear-btn:focus {
  outline: 2px solid #333;
}

  /* 全クリアボタンを送信ボタン風にしつつ薄グレーに */
  .buttons-clear {
    padding: .7em 1.6em;
    border: 1px solid #ccc;
    background: #eee;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    margin-left: 0.5em;
    transition: background-color .2s ease;
  }
  .buttons-clear:hover {
    background: #ddd;
  }
  .buttons-clear:active {
    background: #ccc;
  }


/* ── 同意チェックのスタイル ── */
.consent {
  text-align: center;
  margin: 2rem 0;
  font-size: 0.95rem;
  color: #555;
}
.consent input[type="checkbox"] {
  /* カスタムチェックボックス */
  appearance: none;
  width: 1.2em; height: 1.2em;
  border: 2px solid #ccc;
  border-radius: 4px;
  position: relative;
  vertical-align: middle;
  margin-right: .5em;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.consent input[type="checkbox"]:checked {
  background-color: #1e90ff;
  border-color: #1e90ff;
}
.consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent a {
  display: inline-block;
  margin-top: .5em;
  color: #1e90ff;
  text-decoration: none;
  border-bottom: 1px solid #1e90ff;
  transition: color .3s, border-bottom-color .3s;
}
.consent a:hover {
  color: #0056b3;
  border-bottom-color: #0056b3;
}

.footer_logo {
  margin: 150px 0 10px;
}