@charset "utf-8";

/* FORM.CSS — FORM PAGE ONLY */

body.ns-form-page{
  position:relative;
  background-color:#0e0e0e;
  background-image:url("../images/maps/stone.jpg");
  background-size:800px 800px;
  background-position:center;
  background-repeat:repeat;
  background-attachment:scroll;
}

body.ns-form-page .ns-wrap{
  position:relative;
  z-index:0;
  min-height:0;
}

/* =========================
   COMPACT MASTHEAD
   ========================= */

.ns-form-masthead{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:clamp(250px, 42vw, 360px);
  overflow:hidden;
  background:transparent;
}

.ns-form-masthead__bg{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(
    180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 46%,
    rgba(0,0,0,.98) 56%,
    rgba(0,0,0,.92) 64%,
    rgba(0,0,0,.82) 72%,
    rgba(0,0,0,.68) 79%,
    rgba(0,0,0,.52) 85%,
    rgba(0,0,0,.36) 90%,
    rgba(0,0,0,.22) 94%,
    rgba(0,0,0,.10) 97%,
    rgba(0,0,0,0) 100%
  );
  mask-image:linear-gradient(
    180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 46%,
    rgba(0,0,0,.98) 56%,
    rgba(0,0,0,.92) 64%,
    rgba(0,0,0,.82) 72%,
    rgba(0,0,0,.68) 79%,
    rgba(0,0,0,.52) 85%,
    rgba(0,0,0,.36) 90%,
    rgba(0,0,0,.22) 94%,
    rgba(0,0,0,.10) 97%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

.ns-form-masthead__bg img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
}

.ns-form-masthead__bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(
      620px 260px at 50% 44%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.08) 58%,
      rgba(0,0,0,.22) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.28) 0%,
      rgba(0,0,0,.06) 22%,
      rgba(0,0,0,0) 50%,
      rgba(0,0,0,.06) 78%,
      rgba(0,0,0,.28) 100%
    );
}

.ns-form-masthead__inner{
  position:relative;
  z-index:1;
  width:min(100%, 920px);
  min-height:clamp(250px, 42vw, 360px);
  margin:0 auto;
  padding:
    clamp(46px, 8vw, 76px)
    clamp(18px, 5vw, 42px)
    clamp(48px, 8vw, 72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.ns-form-masthead__eyebrow{
  margin:0 0 clamp(12px, 2vw, 18px);
  font-family:var(--font-brand);
  font-size:clamp(12px, 1.8vw, 14px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.18em;
  color:#fff;
  text-shadow:
    0 1px 1px rgba(0,0,0,.95),
    0 2px 4px rgba(0,0,0,.88),
    0 5px 12px rgba(0,0,0,.72);
}

.ns-form-masthead__title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(32px, 7vw, 50px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:.08em;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.82))
    drop-shadow(0 8px 18px rgba(0,0,0,.78))
    drop-shadow(0 18px 36px rgba(0,0,0,.68));
}

.ns-form-masthead__title-line{
  display:block;
  white-space:nowrap;
  background:var(--gold-gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ns-form-masthead__lead{
  margin:clamp(14px, 2.2vw, 20px) 0 0;
  font-size:clamp(16px, 2.3vw, 18px);
  font-weight:400;
  line-height:1.8;
  letter-spacing:.05em;
  color:rgba(255,255,255,.92);
  text-shadow:
    0 2px 0 rgba(0,0,0,.58),
    0 10px 22px rgba(0,0,0,.64);
}

@media (max-width:767px){
  body.ns-form-page #ns-form{
    margin-top:0px;
  }
}

@media (min-width:768px){
  .ns-form-masthead{
    min-height:clamp(290px, 32vw, 360px);
  }

  .ns-form-masthead__inner{
    min-height:clamp(290px, 32vw, 360px);
  }
}

@media (min-width:1024px){
  .ns-form-masthead__title-line{
    display:inline;
  }

  html:lang(ja) .ns-form-masthead__title-line + .ns-form-masthead__title-line::before{
    content:"、";
  }
}

@media (min-width:768px) and (max-width:1023px){
  body.ns-form-page #ns-form{
    margin-top:24px;
  }
}

.ns-form-masthead__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}