.container {
  max-width: 900px;
}

.contact-main *,
.contact-main *::before,
.contact-main *::after{
  box-sizing:border-box;
}

.sec-title1{
    text-align: left;
    color: #1e293b;
    font-size: 1.2rem;
    border-left: 4px solid #3b82f6;
    padding-left: .6rem;
    margin-top: 2.5rem;
}

 .tel {
   text-align: left;
   padding-left: 3rem;
 }

 .note {
   text-align: left;
   padding-left: 2rem;
   color: red;
   font-size: 0.9rem;
 }



form{
 width:100%;
 max-width:900px;
 margin:0 auto;
 background:#fff;
 padding:2.5rem;
 border-radius:14px;
 box-shadow:0 4px 16px rgba(0,0,0,.06);
}

.form-grid{
  display: grid;
  row-gap: 18px;
}

.form-grid .row{
  display: grid;
  grid-template-columns: 140px 24px 1fr; /* ←左幅と※幅 */
  column-gap: 5px;
}

.form-grid .row > label{
  justify-self: end;
  align-self: center;
  font-weight: 500;
  color:#374151;
}

/* ※ */
.form-grid .row > .req{
  align-self: center;
  align-items: center;
  color:#ef4444;
  font-weight: 700;
}

/* 入力欄 */
.form-grid .row input,
.form-grid .row textarea{
  font-family: inherit;
  width: 100%;
  border:1px solid #d1d5db;
  border-radius: 3px;
  padding: .7rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); /* ←影 */
  font-size: 0.95rem; /* ←ここで文字サイズ指定 */
}

/* textareaは高さ別 */
.form-grid .row textarea{
  height: 180px;
  resize: vertical;
  padding: .8rem 1rem;
}

.form-grid input:focus,
.form-grid textarea:focus{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.zip-box{
  display:flex;
  gap:8px;
  align-items:center;
}

.zip-box input{
  flex:1;
}

.zip-btn{
  padding:6px 12px;
  font-size:0.9rem;
  border:1px solid #d1d5db;
  background:#f3f4f6;
  border-radius:4px;
  cursor:pointer;
}

.zip-btn:hover{
  background:#e5e7eb;
}

.btn-row{
 grid-column:1 / -1;
 display:flex;
 justify-content:center;
 gap:1rem;
 margin-top:2rem;
 text-align:center;
}

.submit-btn,
.reset-btn {
 border: none;
 border-radius: 50px;
 padding: .9rem 2.4rem;
 font-size: 1rem;
 cursor: pointer;
 font-weight: 600;
 transition: all .3s;
}
 
.submit-btn{
 background:#3b82f6;
 color:#fff;
}

.submit-btn:hover{
 background:#2563eb;
 transform:translateY(-2px);
}

.reset-btn{
 background:#f1f5f9;
 color:#475569;
}

.reset-btn:hover{
 background:#e2e8f0;
 transform:translateY(-2px);
}

/* 入力エラー画面の「入力画面に戻る」ボタン */
.contact-main .container > .reset-form {
  text-align: center;
}

.button-area {
  display: flex;
  justify-content: center; /* 中央揃え */
  gap: 20px;               /* ボタン間の余白 */
  margin-top: 30px;
}

.button-area form {
  display: contents;
}

.confirm-list {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 2.5rem;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);

  display: grid;
  grid-template-columns: 180px 1fr; /* 左を少し細く */
  column-gap: 24px;                /* 左右の間隔を作る */
}

/* 1行ずつ「行」に見せる */
.confirm-list dt,
.confirm-list dd {
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.confirm-list dt {
  font-weight: 700;
  color: #222;
  letter-spacing: .02em;
}

.confirm-list dd {
  margin: 0;
  color: #333;
  line-height: 1.8;          /* 読みやすさUP */
  word-break: break-word;
  white-space: pre-wrap;
}

/* 最後の下線を消す */
.confirm-list dt:last-of-type,
.confirm-list dd:last-of-type {
  border-bottom: none;
}

/* 長文欄だけ「囲って」視認性UP */
.confirm-list dt:nth-last-of-type(1) + dd {
  background: #fafafa;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #eee;
}

.hp {
  position: absolute;
  left: -9999px;
}

/* エラー画面 */
.error-lead{
  margin: 12px 0 16px;
  line-height: 1.8;
  opacity: .85;
}
.error-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.error-list li {
  background: none;
  border: none;
  border-radius: 0;
  padding: 6px 0;
  margin: 6px 0;
}

/* ======================
      スマホ制御
========================= */

/* お問い合わせ-説明文がスマホ(441px未満)で見やすいサイズに縮小*/
@media (max-width: 1000px) {

 .sec-title1 {
    margin: 2rem 0 0.5rem;
 }

 .tel {
    padding-left: 1.5rem;
 }

 .note {
    padding-left: 0.5rem;
    margin: 0.1rem;
 }

}



@media (max-width: 570px) {
  .sec-title1 {
      font-size: 1.0rem;
  }

  .explain {
      text-align: left;
      font-size: 0.9rem;
  }

  .tel {
      font-size: 0.9rem;
      padding-left: 1rem;
  }

  .note {
      font-size: 0.7rem;
  }

  .br::before {
    content: "\A";     /* 改行を挿入 */
    white-space: pre;  /* 改行を有効化 */
  }

  .confirm-list {
    padding: 1.5rem;
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .confirm-list dt {
    padding-bottom: 4px;
    border-bottom: none;
    opacity: .85;
  }

  .confirm-list dd {
    padding-top: 0;
  }

  .submit-btn,
  .reset-btn {
    padding: .9rem 1.5rem;
    font-size: 0.8rem;
  }

  form{
   padding:1.5rem;
  }

  label{
    font-size: 0.9rem;
  }

  .form-grid .row{
    grid-template-columns: auto 1fr; /* ラベル + ※ を同じ行に */
    grid-template-areas:
      "label req"
      "field field";
  }

  .form-grid .row > label{ grid-area: label; justify-self:start; }
  .form-grid .row > .req{ grid-area: req; justify-self:start; }
  .form-grid .row > input,
  .form-grid .row > textarea{ grid-area: field; }

.form-grid .row input,
.form-grid .row textarea{
  font-size: 0.85rem; /* ←ここで文字サイズ指定 */
}

}




@media (max-width: 374px){

  form{
  padding:1rem;
  }

}

/* Contact form finish */
.contact-main form {
  margin-top: 22px !important;
  padding: clamp(24px, 4vw, 40px) !important;
  border: 1px solid rgba(13, 59, 145, 0.14) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.96)),
    #f8fbff !important;
  box-shadow: 0 18px 46px rgba(21, 32, 51, 0.08) !important;
}

.contact-main .form-grid {
  row-gap: 10px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.contact-main .form-grid .row {
  grid-template-columns: 138px 30px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.contact-main .form-grid .row > label {
  justify-self: start;
  color: #18263a;
  font-weight: 750;
}

.contact-main .form-grid .row > .req {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 22px;
  border-radius: 5px;
  background: #fff1f2;
  color: #dc2626;
  font-size: 0.82rem;
  line-height: 1;
}

.contact-main .form-grid .row > .req:empty {
  background: transparent;
}

.contact-main .form-grid .row input,
.contact-main .form-grid .row textarea {
  min-height: 40px;
  padding: 0.56rem 0.85rem !important;
  border: 1px solid rgba(21, 32, 51, 0.18) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px rgba(21, 32, 51, 0.05) !important;
}

.contact-main .form-grid .row textarea {
  height: 140px !important;
  min-height: 140px;
}

.contact-main .zip-box {
  width: 100%;
}

.contact-main .zip-btn {
  min-height: 38px;
  border-radius: 8px !important;
}

.contact-main .btn-row {
  margin-top: 1.7rem;
}

@media (max-width: 646px) {
  .contact-main form {
    padding: 22px 18px !important;
  }

  .contact-main .form-grid .row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "label req"
      "field field";
    row-gap: 7px;
  }

  .contact-main .form-grid .row > label {
    grid-area: label;
  }

  .contact-main .form-grid .row > .req {
    grid-area: req;
    justify-self: start;
  }

  .contact-main .form-grid .row > input,
  .contact-main .form-grid .row > textarea,
  .contact-main .form-grid .row > .zip-box {
    grid-area: field;
  }
}

/* Contact method cards */
.contact-method {
  display: block;
  margin-top: 16px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid rgba(21, 32, 51, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(21, 32, 51, 0.06);
}

.contact-method + .contact-method {
  margin-top: 16px;
}

.contact-method-body {
  min-width: 0;
}

.contact-method .sec-title1 {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0 0 0 14px;
  border-left: 4px solid #3b82f6;
  color: #152033;
  font-size: clamp(1.05rem, 2vw, 1.24rem);
  font-weight: 850;
  line-height: 1.35;
}

.contact-method .tel,
.contact-method .note {
  margin: 0;
  padding-left: 0;
  color: #475569;
  line-height: 1.72;
}

.contact-method .business-hours {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.contact-method .business-hours-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  color: #475569;
  font-size: 0.88rem;
  line-height: 1.55;
}

.contact-method .business-hours-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: 0 0.55rem;
  color: #0d3b91;
  background: #eef5ff;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.contact-method .note {
  color: #dc2626;
}

.contact-method--form form {
  max-width: none;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 646px) {
  .contact-method {
    padding: 16px;
  }

  .contact-method .sec-title1 {
    margin: 0 0 12px;
    padding: 0 0 0 12px;
  }

  .contact-method .note {
    font-size: 0.78rem;
  }

  .contact-method .business-hours-row {
    grid-template-columns: 4.8rem minmax(0, 1fr);
    gap: 0.55rem;
    font-size: 0.78rem;
  }

  .contact-method .business-hours-label {
    padding: 0 0.4rem;
    font-size: 0.68rem;
  }
}