@charset "UTF-8";

/* =====================================================
  FASTBRAND
  RESERVE PAGE
  quiet minimal / underline form
===================================================== */


/* =====================================================
  PAGE HERO
===================================================== */

.fd-page-hero{
  padding: clamp(88px,9vw,120px) 0 40px;
  background:#fff;
}

.fd-page-title{
  margin:0;
  font-family:var(--fd-heading);
  font-size:clamp(20px,2.2vw,30px);
  line-height:1.45;
  font-weight:400;
  letter-spacing:.06em;
  color:rgba(0,0,0,.84);
}

.fd-page-lead{
  margin:14px 0 0;
  font-size:14px;
  color:rgba(0,0,0,.58);
  line-height:2;
}


/* =====================================================
  INTRO TEXT
===================================================== */

.fd-reserve-intro{
  padding-top:0;
  background:#fff;
}

.fd-reserve-intro__inner{
  max-width:760px;
  color:rgba(0,0,0,.56);
  font-size:14px;
  line-height:2;
}

.fd-reserve-intro__inner p{
  margin:0;
}

.fd-reserve-intro__inner p + p{
  margin-top:12px;
}


/* =====================================================
  FORM SECTION
===================================================== */

.fd-reserve-form{
  background:#fff;
}

.fd-reserve-form__container{
  max-width:760px;
}


/* =====================================================
  FORM HEADING
===================================================== */

.fd-reserve-form .fd-blockhead{
  text-align:center;
  margin-bottom:32px;
}

.fd-reserve-form .fd-kicker{
  margin-bottom:8px;
}

.fd-reserve-form .fd-title{
  font-size:clamp(20px,2vw,28px);
  line-height:1.45;
  letter-spacing:.08em;
  padding-bottom:14px;
  position:relative;
}

.fd-reserve-form .fd-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:42px;
  height:1px;
  background:rgba(0,0,0,.2);
}


/* =====================================================
  FORM
===================================================== */

.fd-form{
  display:grid;
  gap:26px;
}


/* =====================================================
  FORM ROW
===================================================== */

.fd-form__row{
  display:grid;
  gap:10px;
}

.fd-form__row label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:13px;
  letter-spacing:.04em;
  color:rgba(0,0,0,.76);
}


/* =====================================================
  REQUIRED MARK
===================================================== */

.fd-required{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:20px;
  padding:0 8px;
  border:1px solid rgba(0,0,0,.10);
  background:#f5f5f5;
  color:rgba(0,0,0,.52);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}


/* =====================================================
  INPUT STYLE
===================================================== */

.fd-input,
.fd-select,
.fd-textarea{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.18);
  background:transparent;
  padding:12px 0 10px;
  font-size:15px;
  line-height:1.8;
  color:rgba(0,0,0,.82);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
}

.fd-input::placeholder,
.fd-textarea::placeholder{
  color:rgba(0,0,0,.36);
}

.fd-input:focus,
.fd-select:focus,
.fd-textarea:focus{
  border-bottom-color:rgba(0,0,0,.42);
}


/* =====================================================
  TEXTAREA
===================================================== */

.fd-textarea{
  min-height:130px;
  resize:vertical;
}


/* =====================================================
  SELECT
===================================================== */

.fd-select{
  padding-right:28px;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.42) 50%),
    linear-gradient(135deg, rgba(0,0,0,.42) 50%, transparent 50%);

  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);

  background-size:5px 5px,5px 5px;

  background-repeat:no-repeat;
}


/* =====================================================
  CONSENT
===================================================== */

.fd-form__row--consent{
  margin-top:6px;
}

.fd-form__row--consent label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  line-height:1.9;
  color:rgba(0,0,0,.58);
}

.fd-form__row--consent input{
  margin-top:4px;
  accent-color:#d9d9d9;
}


/* =====================================================
  SUBMIT BUTTON
  underline only
===================================================== */

.fd-form__actions{
  margin-top:18px;
}

.fd-submit{

  display:inline-block;

  border:0;
  background:transparent;

  padding:10px 0;

  font-family:var(--fd-serif-en);
  font-size:13px;
  letter-spacing:.18em;

  text-transform:uppercase;

  color:rgba(0,0,0,.82);

  border-bottom:1px solid rgba(0,0,0,.24);

  transition:
    color .25s ease,
    border-color .25s ease;

  cursor:pointer;
}

.fd-submit:hover{

  color:rgba(0,0,0,1);

  border-bottom-color:rgba(0,0,0,.6);

}


/* =====================================================
  CF7 MESSAGE
===================================================== */

.wpcf7 form .wpcf7-response-output{
  margin:24px 0 0;
  padding-top:12px;
  border:0;
  border-top:1px solid rgba(0,0,0,.14);
  color:rgba(0,0,0,.62);
  font-size:13px;
  line-height:1.8;
}

.wpcf7-not-valid-tip{
  margin-top:6px;
  color:rgba(0,0,0,.48);
  font-size:11px;
}


/* =====================================================
  MOBILE
===================================================== */

@media (max-width:767px){

  .fd-page-hero{
    padding:80px 0 34px;
  }

  .fd-page-title{
    font-size:clamp(20px,6vw,24px);
    letter-spacing:.05em;
  }

  .fd-page-lead{
    font-size:13px;
    line-height:1.9;
  }

  .fd-reserve-form .fd-title{
    font-size:22px;
  }

  .fd-form{
    gap:22px;
  }

  .fd-input,
  .fd-select,
  .fd-textarea{
    font-size:14px;
  }

  .fd-submit{
    width:auto;
  }

}

/* =====================================================
  FORM POLISH
  focus line animation / luxury minimal
===================================================== */

.fd-form__row{
  position:relative;
}

.fd-form__row::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:rgba(0,0,0,.44);
  transition:width .32s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

.fd-form__row:focus-within::after{
  width:100%;
}

/* 元の下線を少し淡くして、追い線を活かす */
.fd-input,
.fd-select,
.fd-textarea{
  border-bottom-color:rgba(0,0,0,.14);
}

/* フォーカス時は下線色を固定せず、擬似要素の線を主役に */
.fd-input:focus,
.fd-select:focus,
.fd-textarea:focus{
  border-bottom-color:rgba(0,0,0,.14);
}

/* ラベルも少しだけ締まる */
.fd-form__row:focus-within label{
  color:rgba(0,0,0,.88);
  transition:color .25s ease;
}

/* 必須マークも少しだけ反応 */
.fd-form__row:focus-within .fd-required{
  border-color:rgba(0,0,0,.16);
  color:rgba(0,0,0,.64);
  transition:
    border-color .25s ease,
    color .25s ease;
}

/* submitも少し静かに */
.fd-submit{
  position:relative;
}

.fd-submit::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px;
  background:rgba(0,0,0,.72);
  transition:width .28s cubic-bezier(.22,.61,.36,1);
}

.fd-submit:hover::after{
  width:100%;
}