@charset "UTF-8";

/* ---------------------------
  hero
--------------------------- */
.contact-hero{
  background:#FCEFE5;
  position:relative;
  overflow:hidden;
  padding:70px 0 110px;
}

/* 下端の山型（全幅） */
/* contact hero 下端のギザギザ（bkimg1.png） */
.contact-hero{
  position: relative;
  overflow: hidden;
}

/* bkimg1.png: 1841x156 / 中央の抜き(透明)がある前提で、中央=コンテンツ幅になるよう拡大して中央寄せ */
.contact-hero::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
  --content-outer: 600px;

  --gap: min(100vw, var(--content-outer));
  --img-w: calc(var(--gap) * 2.42556);
  --img-h: calc(var(--gap) * 0.20553);

  height: clamp(80px, var(--img-h), 156px);

  background: url("../img/bkimg1.png") no-repeat bottom center;
  background-size: var(--img-w) 100%;
}

.contact-hero__inner{
  max-width:1100px;
  margin:0 auto;
  position:relative;
  text-align:center;
  padding:0 20px;
}

.contact-hero__title{
  margin:0 0 10px;
  font-size:24px;
  letter-spacing:.08em;
}

.contact-hero__lead{
  margin:0;
  font-size:13px;
  color:#3E3A39;
}

/* 装飾画像（任意） */
.contact-hero__img{
  position:absolute;
  bottom:-10px;
  width:170px;
  height:auto;
}
.contact-hero__img--left{ left:20px; }
.contact-hero__img--right{ right:20px; }

/* ---------------------------
  intro + button
--------------------------- */
.contact-intro{
  background:#fff;
  padding:55px 0 25px;
}
.contact-intro__inner{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  padding:0 20px;
}
.contact-intro__inner p{
  margin:0 0 18px;
  font-size:13px;
  line-height:2.0;
  color:#3E3A39;
}

/* 共通CTAボタン（PDFの丸い橙ボタン風） */
.cta-button{
  display:inline-block;
  position:relative;
  background:#EB6112;
  color:#fff;
  border-radius:26px;
  padding:12px 52px 12px 28px;
  font-size:13px;
  line-height:1;
  border:0;
  cursor:pointer;
  text-decoration:none;
}

/* 既存矢印画像があるならそれを使う（なければ削除可） */
.cta-button::after{
  content:"";
  position:absolute;
  top:50%;
  right:18px;
  width:10px;
  height:18px;
  transform:translateY(-50%);
  background:url(../img/arrow2-r-w.png) no-repeat;
  background-size:contain;
}

.contact-cta{ margin:18px 0 0; }

/* ---------------------------
  form layout
--------------------------- */
.contact-form-area{
  padding:30px 0 80px;
}
.contact-form-area__inner{
  max-width:900px;
  margin:0 auto;
  padding:0 20px;
}

.contact-form{
  text-align:left; /* main.cssのcenterを打ち消す */
}

.form-row{
  display:grid;
  grid-template-columns:160px 60px 1fr;
  gap:18px;
  align-items:center;
  padding:12px 0;
}

.form-row--top{
  align-items:flex-start;
}

.form-label{
  font-size:12px;
  color:#1F295A;
  font-weight:bold;
}

.badge{
  display:inline-block;
  font-size:11px;
  line-height:1;
  padding:6px 10px;
  border-radius:4px;
  color:#fff;
  text-align:center;
  min-width:46px;
}
.badge--req{ background:#EB6112; }
.badge--opt{ background:#9E9E9E; }

.form-control input,
.form-control textarea{
  width:100%;
  border:1px solid #D0D0D0;
  border-radius:2px;
  padding:10px 12px;
  font-size:13px;
  outline:none;
  background:#fff;
}

.form-control textarea{
  min-height:190px;
  resize:vertical;
}

/* 罫線（薄いグレー）＋左の橙アクセント */
.form-divider{
  height:1px;
  background:#D0D0D0;
  position:relative;
  margin:10px 0;
}
.form-divider::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:120px;
  height:3px;
  background:#EB6112;
}
.form-divider--last{ margin-top:18px; }

/* checkbox */
.checklist{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  font-size: 14px;
}

.checklist label{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  white-space: nowrap;
  flex: 0 0 auto;
}

.checklist input{
  margin: 0;
}

.form-help{
  margin:6px 0 0;
  font-size:11px;
  color:#6b6b6b;
}

/* split inputs (zip/tel/fax) */
.split{
  display:flex;
  align-items:center;
  gap:8px;
}
.split-sep{
  color:#3E3A39;
  font-size:13px;
}
.w-zip1{ max-width:80px; }
.w-zip2{ max-width:110px; }
.w-tel{ max-width:90px; }

/* note + submit */
.form-note{
  text-align:center;
  margin:26px 0 18px;
  color:#3E3A39;
  font-size:12px;
  line-height:2.0;
}
.form-note p{ margin:0; }

.form-actions{
  text-align:center;
  margin-top:18px;
}
.cta-button--submit{
  padding:14px 58px 14px 34px;
  font-weight:bold;
}

/* ---------------------------
  dropdown (PC hover)
--------------------------- */
@media (min-width:768px){
  .gNavi .mainnavi > li.has-sub{ position:relative; }
  .gNavi .mainnavi > li.has-sub > .subnavi{
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    background:#fff;
    border:1px solid #ECE9E7;
    box-shadow:0 10px 18px rgba(0,0,0,0.06);
    padding:8px 0;
    display:none;
    z-index:20;
  }
  .gNavi .mainnavi > li.has-sub:hover > .subnavi{ display:block; }
  .gNavi .mainnavi > li.has-sub > .subnavi a{
    display:block;
    padding:10px 14px;
    font-size:13px;
  }
}

/* ---------------------------
  responsive
--------------------------- */
@media (max-width:767px){
  .contact-hero{ padding:55px 0 95px; }
  .contact-hero::after{
    height:90px;
    background-size:900px 90px;
  }
  .contact-hero__img{ display:none; }

  .form-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .form-badge{ width:fit-content; }
  .form-divider::before{ width:90px; }
}

/* ---- form errors ---- */
.form-error-summary{
  background:#FFF3F1;
  border:1px solid #F2B8B5;
  border-left:6px solid #E60012;
  border-radius:6px;
  padding:14px 16px;
  margin:0 0 18px;
}

.form-error-summary__title{
  margin:0 0 8px;
  font-weight:bold;
  color:#B0000B;
  font-size:13px;
}

.form-error-summary__list{
  margin:0;
  padding-left:1.2em;
  color:#B0000B;
  font-size:12px;
  line-height:1.8;
}

.form-error-inline{
  margin:6px 0 0;
  color:#E60012;
  font-size:12px;
  line-height:1.6;
}

.is-error{
  border-color:#E60012 !important;
}

.checklist input[type="checkbox"] {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  background: transparent;
  flex: 0 0 auto;
  appearance: auto;
  -webkit-appearance: checkbox;
}

@media (max-width: 767px) {
  .checklist {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .checklist label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: normal;
    flex: 0 0 auto;
  }
}