/* =========================
BN-contact-page
========================= */

.contact-page{
  background:var(--paper);
}

/* HERO */

.contact-hero{
  min-height:620px;
  padding:150px 7vw 100px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#111;
  color:#fff;
  text-align:center;
}

.contact-hero .section-kicker{
  color:rgba(255,255,255,.55);
}

.contact-hero h1{
  margin:20px 0 34px;
  font-size:clamp(42px,5vw,82px);
  line-height:1.45;
  letter-spacing:.06em;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
}

.contact-hero p{
  margin:0;
  font-size:15px;
  line-height:2;
  color:rgba(255,255,255,.75);
}

/* METHOD */

.contact-method{
  background:#fff;
}

.contact-method-head{
  max-width:820px;
  margin:0 auto 54px;
  text-align:center;
}

.contact-method-head h2{
  margin:10px 0 14px;
  font-size:clamp(32px,4vw,56px);
  line-height:1.35;
}

.contact-method-head p{
  margin:0;
  font-size:14px;
  line-height:2;
  color:#555;
  font-weight:700;
}

.contact-method-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:980px;
  margin:0 auto;
}

.contact-method-card{
  position:relative;
  display:block;
  min-height:260px;
  padding:44px;
  border-radius:18px;
  color:#fff;
  overflow:hidden;
  transition:.3s;
}

.contact-method-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 56%);
  pointer-events:none;
}

.contact-method-card:hover{
  transform:translateY(-6px);
}

.contact-method-card span{
  display:inline-block;
  margin-bottom:28px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  opacity:.8;
}

.contact-method-card h3{
  position:relative;
  z-index:1;
  margin:0 0 16px;
  font-size:clamp(28px,3vw,42px);
  line-height:1.35;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
}

.contact-method-card p{
  position:relative;
  z-index:1;
  margin:0;
  font-size:14px;
  line-height:2;
  font-weight:700;
  color:rgba(255,255,255,.8);
}

.contact-method-card.line{
  background:#06C755;
}

.contact-method-card.form-link{
  background:var(--red);
}

/* ABOUT */

.contact-about{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start;
}

.contact-about-copy h2{
  margin:16px 0 0;
  font-size:clamp(34px,4vw,64px);
  line-height:1.5;
  letter-spacing:.05em;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
}

.contact-about-list{
  display:grid;
  gap:18px;
}

.contact-about-list article{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px 34px;
}

.contact-about-list span{
  display:block;
  margin-bottom:16px;
  color:var(--red);
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
}

.contact-about-list h3{
  margin:0 0 10px;
  font-size:22px;
}

.contact-about-list p{
  margin:0;
  font-size:14px;
  line-height:2;
  color:#555;
  font-weight:700;
}

/* FORM */

.contact-form-section{
  background:#fff;
  border-top:1px solid var(--line);
}

.contact-form-head{
  max-width:820px;
  margin:0 auto 46px;
  text-align:center;
}

.contact-form-head h2{
  margin:10px 0 14px;
  font-size:clamp(32px,4vw,56px);
}

.contact-form-head p{
  margin:0;
  font-size:14px;
  color:#555;
  font-weight:700;
}

.contact-form{
  max-width:820px;
  margin:0 auto;
  display:grid;
  gap:24px;
}

.contact-form label{
  display:grid;
  gap:10px;
}

.contact-form label span{
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
}

.contact-form em{
  margin-left:8px;
  padding:2px 7px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:10px;
  font-style:normal;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfaf8;
  padding:16px 18px;
  font:inherit;
  font-size:15px;
}

.contact-form textarea{
  resize:vertical;
  min-height:180px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--red);
  background:#fff;
}

.hp-field{
  display:none !important;
}

.privacy-check{
  display:flex !important;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px !important;
  font-size:13px;
}

.privacy-check input{
  width:18px;
  height:18px;
}

.privacy-check a{
  color:var(--red);
  font-weight:900;
}

.contact-form button{
  justify-self:center;
  min-width:260px;
  height:64px;
  border:0;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  transition:.25s;
}

.contact-form button:hover{
  transform:translateY(-4px);
  filter:brightness(1.05);
}

/* MESSAGE */

.contact-message{
  background:#111;
  color:#fff;
  text-align:center;
}

.contact-message .section-kicker{
  color:rgba(255,255,255,.55);
}

.contact-message h2{
  margin:20px 0 34px;
  font-size:clamp(38px,5vw,76px);
  line-height:1.5;
  letter-spacing:.06em;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:500;
}

.contact-message p{
  margin:0;
  font-size:15px;
  line-height:2;
  color:rgba(255,255,255,.75);
}








.contact-note{
  margin-top:28px;
  text-align:center;
}

.contact-note p{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.8;
  color:#666;
}

.sales-link{
  display:inline-block;
  padding:10px 24px;
  border:1px solid #bbb;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  color:#666;
  background:#fff;
  text-decoration:none;
  transition:.25s;
}

.sales-link:hover{
  color:#c91520;
  border-color:#c91520;
  background:#fff7f7;
}









/* SMARTPHONE */

@media (max-width:960px){

  .contact-hero{
    min-height:auto;
    padding:120px 24px 80px;
  }

  .contact-hero h1{
    font-size:clamp(36px,10vw,52px);
    line-height:1.45;
  }

  .contact-method-grid,
  .contact-about{
    grid-template-columns:1fr;
  }

  .contact-method-card{
    min-height:auto;
    padding:34px 28px;
  }

  .contact-about{
    gap:38px;
  }

  .contact-about-copy h2{
    font-size:clamp(30px,9vw,44px);
  }

  .contact-about-list article{
    padding:26px 24px;
  }

  .contact-form{
    gap:20px;
  }

  .privacy-check{
    align-items:flex-start;
  }

  .contact-form button{
    width:100%;
  }

  .contact-message h2{
    font-size:clamp(32px,9vw,46px);
  }
	
/* THANKS */

.thanks-page{
  min-height:80vh;
}

.thanks-page .hero-buttons{
  justify-content:center;
}

}