@charset "UTF-8";
/* ==========================================================================
   お問い合わせ（メールフォーム）— PC canvas 1366 x 1468.7
   The .ai artboard is 5468.9 tall but its content ends at the footer
   (1088.7–1468.7); the extra height is empty artboard — see README note 14.

   Designer's notes honoured here:
     「プライバシーポリシーをクリックすると（A）の内容が表示されるようにしてください。」
       -> .pv is a disclosure, closed by default, opened by .fm__pv-btn
     「入力内容の確認」 -> a confirm step before sending
   header 0–85 | title 194.8 | bar 250.5–298.5 | rows 311–798.5
   note 823 | submit 942.5–1006.5 | footer 1088.7
   ========================================================================== */
.fm { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.fm > * { position: absolute; }

.fm__h {
  left: 399.7px; top: 190.3px;
  font-family: var(--mincho); font-weight: 700; font-size: 40px;
  line-height: 46.2px; letter-spacing: .2em; color: var(--pink); white-space: nowrap;
}
.fm__form { left: 0; top: 0; width: 1366px; }

.fm__bar {
  position: absolute; left: 213px; top: 250.5px; width: 943.5px; height: 48px;
  background: var(--pink); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--noto); font-weight: 100; font-size: 23px;
  line-height: 1; letter-spacing: .06em; text-indent: .06em; white-space: nowrap;
}

/* -------------------------------------------------------------- table ---- */
.fm__table { position: absolute; left: 213px; top: 298.5px; width: 943.5px; }
.fm__row { position: absolute; left: 0; width: 943.5px; }
/* the row box is the label cell (page 305, 363.5, 424.5, 484, 545, 604.5, 664.5);
   the input sits in the right column, offset from the row top */
.fm__row--1 { top: 6.5px;   height: 54.5px; }
.fm__row--2 { top: 65px;    height: 56px; }
.fm__row--3 { top: 126px;   height: 56px; }
.fm__row--4 { top: 185.5px; height: 56px; }
.fm__row--5 { top: 246.5px; height: 56px; }
.fm__row--6 { top: 306px;   height: 56px; }
.fm__row--7 { top: 366px;   height: 142.5px; }

.fm__label {
  position: absolute; left: 0; top: 0; width: 259.5px; height: 100%;
  background: #f2f2f9; padding: 7px 0 0 13.9px;
}
.fm__label label {
  display: block; color: #333333;
  font-family: var(--noto); font-weight: 400; font-size: 17px;
  line-height: 32.8px; letter-spacing: .02em; white-space: nowrap;
}
.fm__req {
  display: block; margin-top: -6.5px;
  font-family: var(--noto); font-weight: 100; font-size: 12px;
  line-height: 23.2px; letter-spacing: -.09em; color: #a72126; font-weight: 400;
}
.fm__field { position: absolute; left: 259.5px; top: 6px; width: 684px; }
.fm__field input, .fm__field textarea {
  display: block; width: 684px; height: 40px;
  border: 1px solid #d8d0cd; background: var(--white); border-radius: 2px;
  padding: 0 12px; font-family: var(--noto); font-weight: 300; font-size: 16px;
  color: var(--ink);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fm__row--7 .fm__field textarea { height: 126.5px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
.fm__field input:focus, .fm__field textarea:focus {
  border-color: var(--pink); box-shadow: 0 0 0 2px rgba(235,150,150,.22); outline: none;
}
.fm__field input:user-invalid, .fm__field textarea:user-invalid { border-color: #d4585f; }

/* --------------------------------------------------------------- note ---- */
.fm__note {
  position: absolute; left: 211.3px; top: 816px; width: 900px;
  font-family: var(--noto); font-weight: 100; font-size: 16px;
  line-height: 28.97px; letter-spacing: -.03em;
}
.fm__pv-btn {
  font: inherit; color: var(--pink); text-decoration: underline;
  text-underline-offset: 3px; transition: opacity .3s var(--ease);
}
.fm__pv-btn:hover { opacity: .7; }

/* ------------------------------------------- privacy policy disclosure ---- */
.pv {
  position: absolute; left: 281.4px; top: 900px; width: 800px;
  background: var(--white); border: 1px solid #eedcd8; border-radius: 4px;
  padding: 26px 30px 34px;
}
.pv__h {
  text-align: center;
  font-family: var(--noto); font-weight: 100; font-size: 27px;
  line-height: 52px; letter-spacing: .04em;
}
.pv__sub {
  margin-top: 26px; text-align: center;
  font-family: var(--noto); font-weight: 400; font-size: 17.72px;
  line-height: 34.2px; letter-spacing: .03em;
}
.pv__p {
  margin-top: 8px;
  font-family: var(--noto); font-weight: 100; font-size: 16px;
  line-height: 26px; letter-spacing: .02em;
}

/* ------------------------------------------------------------- submit ---- */
.fm__submit {
  position: absolute; left: 544px; top: 942.5px; width: 280px; height: 64px;
  background: var(--pink); color: var(--white);
  font-family: var(--noto); font-weight: 100; font-size: 23px;
  line-height: 1; letter-spacing: .06em; text-indent: .06em;
  transition: background-color .3s var(--ease);
}
.fm__submit:hover { background: #e07f7f; }

/* --------------------------------------------------------- confirm step -- */
.fm__confirm {
  position: absolute; left: 213px; top: 1030px; width: 943.5px;
  background: var(--white); border: 1px solid var(--pink); border-radius: 4px;
  padding: 24px 30px 30px;
}
.fm__confirm-h {
  font-family: var(--mincho); font-weight: 700; font-size: 23px;
  letter-spacing: .06em; color: var(--pink); text-align: center;
}
.fm__confirm-list { margin: 18px 0 0; display: grid; grid-template-columns: 220px 1fr; gap: 10px 16px; }
.fm__confirm-list dt {
  font-family: var(--noto); font-weight: 400; font-size: 15px; color: #6b6b6b;
}
.fm__confirm-list dd {
  margin: 0; font-family: var(--noto); font-weight: 300; font-size: 16px;
  white-space: pre-wrap; word-break: break-all;
}
.fm__confirm-btns { margin-top: 24px; display: flex; gap: 20px; justify-content: center; }
.fm__back, .fm__send {
  width: 220px; height: 54px; font-family: var(--noto); font-weight: 100; font-size: 19px;
  letter-spacing: .06em; transition: background-color .3s var(--ease), color .3s var(--ease);
}
.fm__back { border: 1px solid var(--pink); color: var(--pink); background: var(--white); }
.fm__back:hover { background: var(--pink-soft); }
.fm__send { background: var(--pink); color: var(--white); }
.fm__send:hover { background: #e07f7f; }

/* ==========================================================================
   SP — canvas 390 x 1154.7 | header 0–70 | title 103.1 | bar 133–166.5
   rows 179–581 | note 601.8 | submit 737–770.5 | footer 804.7
   ========================================================================== */
@media (max-width: 900px) {
  .fm, .fm__form { width: calc(39 * var(--u)); }
  .fm__h {
    left: 0; top: calc(9.86 * var(--u)); width: calc(39 * var(--u)); text-align: center;
    font-size: calc(2 * var(--u)); line-height: 1.16; letter-spacing: .1em; text-indent: .1em;
  }
  .fm__bar {
    left: calc(5.25 * var(--u)); top: calc(13.3 * var(--u));
    width: calc(28.5 * var(--u)); height: calc(3.35 * var(--u));
    font-size: calc(1.6 * var(--u)); letter-spacing: .04em; text-indent: .04em;
  }
  .fm__table { left: 0; top: 0; width: calc(39 * var(--u)); }
  .fm__row { width: calc(39 * var(--u)); height: calc(5.6 * var(--u)); }
  .fm__row--1 { top: calc(17.6 * var(--u)); }
  .fm__row--2 { top: calc(23.6 * var(--u)); }
  .fm__row--3 { top: calc(29.6 * var(--u)); }
  .fm__row--4 { top: calc(35.6 * var(--u)); }
  .fm__row--5 { top: calc(41.7 * var(--u)); }
  .fm__row--6 { top: calc(47.7 * var(--u)); }
  .fm__row--7 { top: calc(53.7 * var(--u)); }
  .fm__label {
    left: calc(5.25 * var(--u)); top: 0; width: calc(12.15 * var(--u)); height: 100%;
    padding: calc(.6 * var(--u)) 0 0 calc(.82 * var(--u));
  }
  .fm__label label { font-size: calc(1.3 * var(--u)); line-height: 1.93; }
  .fm__req { margin-top: calc(-.4 * var(--u)); font-size: calc(1.1 * var(--u)); line-height: 1.93; }
  .fm__field { left: calc(17.4 * var(--u)); top: calc(.3 * var(--u)); width: calc(16.35 * var(--u)); }
  .fm__field input, .fm__field textarea,
  .fm__row--7 .fm__field textarea {
    width: calc(16.35 * var(--u)); height: calc(4.1 * var(--u));
    font-size: calc(1.3 * var(--u)); padding: 0 calc(.8 * var(--u)); line-height: 1.4;
  }
  .fm__note {
    left: calc(6.57 * var(--u)); top: calc(59.6 * var(--u)); width: calc(27.2 * var(--u));
    font-size: calc(1.2 * var(--u)); line-height: 1.57; letter-spacing: 0;
  }
  .fm__note p + p { margin-top: calc(.2 * var(--u)); }
  .pv { left: calc(4 * var(--u)); top: calc(73 * var(--u)); width: calc(31 * var(--u));
        padding: calc(1.6 * var(--u)) calc(1.8 * var(--u)) calc(2 * var(--u)); }
  .pv__h   { font-size: calc(1.9 * var(--u)); line-height: 2; }
  .pv__sub { margin-top: calc(1.6 * var(--u)); font-size: calc(1.4 * var(--u)); line-height: 1.8; }
  .pv__p   { margin-top: calc(.6 * var(--u)); font-size: calc(1.2 * var(--u)); line-height: 1.85; }
  .fm__submit {
    left: calc(5.25 * var(--u)); top: calc(73.7 * var(--u));
    width: calc(28.5 * var(--u)); height: calc(3.35 * var(--u));
    font-size: calc(1.8 * var(--u)); letter-spacing: .04em; text-indent: .04em;
  }
  .fm__confirm { left: calc(4 * var(--u)); top: calc(78.5 * var(--u)); width: calc(31 * var(--u));
                 padding: calc(1.6 * var(--u)) calc(1.6 * var(--u)) calc(2 * var(--u)); }
  .fm__confirm-h { font-size: calc(1.7 * var(--u)); }
  .fm__confirm-list { grid-template-columns: 1fr; gap: calc(.4 * var(--u)); margin-top: calc(1.2 * var(--u)); }
  .fm__confirm-list dt { font-size: calc(1.15 * var(--u)); }
  .fm__confirm-list dd { font-size: calc(1.3 * var(--u)); margin-bottom: calc(.6 * var(--u)); }
  .fm__confirm-btns { flex-direction: column; gap: calc(1 * var(--u)); margin-top: calc(1.6 * var(--u)); }
  .fm__back, .fm__send { width: 100%; height: calc(4.4 * var(--u)); font-size: calc(1.5 * var(--u)); }
}