@charset "UTF-8";
/* ==================================================
CONTACT ページ固有
・土台（左のロゴ・本文の幅 .dtInner・単位 --d・リンク .moreLinkObj）は /common/css/detail.css
・Figma にデザインが無いため、下層ページのトーン（固定背景・ガラス調カード・#262222 の文字・Aspekta / Noto Sans JP）で作成
・2026-10-13 ユーザー指定：見出しと説明文をガラス調カードで囲んで右に（下層の5列グリッドの2列分 376）、
  フォーム（完了画面では完了の文）をガラス調カードで囲んで左に（3列分 572）。間隔 16。SP・TAB は見出しのカード → フォームのカードの順に縦積み
・見出し「Get in touch」は他ページの中見出しと同じ .dtSecTtlObj（Aspekta 32px・wght 640。SP 24px）
・フォームの項目はラベルの下に入力欄（カードの幅が狭いため、PC でも縦積み）
================================================== */
:root {
  --ctLine: rgba(38, 34, 34, 0.16);
  --ctWeak: rgba(38, 34, 34, 0.5);
  --ctErr: #c8352e;
}

/* 背景はほかの下層と同じ固定背景（.bgObj。写真は COMPANY のヒーロー /company/img/hero01.jpg） */
.ctBodyArea {
  min-height: 100lvh;
  padding-top: calc(110 * var(--d));
}
.ctGlp {
  display: flex;
  flex-flow: column;
  gap: calc(16 * var(--d));
}
.ctHeadArea,
.ctFormArea,
.ctDoneArea {
  padding: calc(28 * var(--d)) calc(20 * var(--d)) calc(32 * var(--d));
}
@media screen and (min-width: 961px) {
  .ctBodyArea {
    padding-top: calc(126 * var(--d));
  }
  .ctGlp {
    display: grid;
    grid-template-columns: calc(572 * var(--d)) calc(376 * var(--d));
    column-gap: calc(16 * var(--d));
    align-items: start;
  }
  .ctHeadArea,
  .ctFormArea,
  .ctDoneArea {
    grid-row: 1;
    padding: calc(40 * var(--d)) calc(32 * var(--d));
  }
  /* 右のカード：フォームが長いので、フォームを見ている間は画面に止めておく（ヘッダーの下） */
  .ctHeadArea {
    grid-column: 2;
    position: sticky;
    top: calc(96 * var(--d));
  }
  .ctFormArea,
  .ctDoneArea {
    grid-column: 1;
  }
}

/* ==================================================
見出し（Get in touch / お問い合わせ）とステップ表示
================================================== */
.ctJpTtlObj {
  margin-top: calc(4 * var(--d));
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.ctStepLists {
  display: flex;
  align-items: center;
  margin-top: calc(32 * var(--d));
  color: var(--ctWeak);
  font-size: 11px;
  line-height: 1.6;
}
.ctStepList {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ctStepList + .ctStepList::before {
  content: "";
  width: calc(24 * var(--d));
  height: 1px;
  margin: 0 calc(6 * var(--d));
  background: var(--ctLine);
}
.ctStepList.is-current {
  color: var(--dtTxt);
}
.ctStepList .numObj {
  font-family: var(--dtEn);
}
@media screen and (min-width: 961px) {
  .ctJpTtlObj {
    font-size: max(12px, calc(14 * var(--d)));
  }
  .ctStepLists {
    margin-top: calc(40 * var(--d));
    font-size: max(10px, calc(11 * var(--d)));
  }
}

/* ==================================================
説明文
================================================== */
.ctTxtObj {
  margin-top: calc(32 * var(--d));
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.02em;
}
.ctTxtObj p + p {
  margin-top: 1em;
}
.ctTxtObj p {
  line-height: inherit; /* lib.css の p { line-height: 1.5 } を打ち消す */
}
.ctTxtObj a {
  color: inherit;
}
@media screen and (min-width: 961px) {
  .ctTxtObj {
    margin-top: calc(32 * var(--d));
    font-size: max(12px, calc(13 * var(--d)));
  }
}

/* ==================================================
フォーム
================================================== */
.ctFormGlp {
  position: relative;
}
.ctNoticeObj {
  margin-bottom: calc(24 * var(--d));
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(200, 53, 46, 0.06);
  color: var(--ctErr);
  font-size: 13px;
  line-height: 1.7;
}
/* 項目の区切り線は各項目の下だけ（カードの上端に線が来ないように、先頭の項目は上の余白もなし） */
.ctFieldSet:first-child {
  padding-top: 0;
}
.ctFieldSet {
  padding: calc(24 * var(--d)) 0;
  border-bottom: 1px solid var(--ctLine);
}
.ctLabelObj {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ctLabelObj label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
.ctLabelObj .jpObj {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.ctLabelObj .enObj {
  color: var(--ctWeak);
  font-size: 10px;
  line-height: 1.6;
}
.ctReqObj {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--dtTxt);
  border-radius: 9px;
  font-size: 10px;
  line-height: 1;
}
.ctInputObj {
  margin-top: 12px;
}
.ctInputObj input,
.ctInputObj textarea {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: var(--dtTxt);
  font-family: var(--dtJp);
  font-size: 16px; /* iOS で入力時に拡大されないよう 16px 以上 */
  letter-spacing: 0.02em;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color 0.2s ease;
}
.ctInputObj textarea {
  height: auto;
  min-height: 240px;
  padding: 14px 16px;
  line-height: 1.8;
}
.ctInputObj input::placeholder,
.ctInputObj textarea::placeholder {
  color: rgba(38, 34, 34, 0.35);
}
.ctInputObj input:focus,
.ctInputObj textarea:focus {
  border-color: var(--dtTxt);
}
.ctFieldSet.is-error input,
.ctFieldSet.is-error textarea {
  border-color: var(--ctErr);
}
.ctErrObj {
  margin-top: 8px;
  color: var(--ctErr);
  font-size: 12px;
  line-height: 1.6;
}
/* 確認画面：入力値の表示 */
.ctValueObj {
  font-size: 15px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ctValueObj .emptyObj {
  color: var(--ctWeak);
}
.ctFieldLists.is-confirm .ctReqObj {
  display: none;
}
@media screen and (min-width: 961px) {
  .ctFieldSet {
    padding: calc(24 * var(--d)) 0;
  }
  .ctFieldSet:first-child {
    padding-top: 0;
  }
  .ctLabelObj .jpObj {
    font-size: max(12px, calc(14 * var(--d)));
  }
  .ctInputObj input {
    height: calc(52 * var(--d));
  }
  .ctInputObj input,
  .ctInputObj textarea {
    font-size: max(14px, calc(15 * var(--d)));
  }
  .ctValueObj {
    font-size: max(13px, calc(15 * var(--d)));
  }
}

/* ボット対策の欄は画面外へ */
.ctHpObj {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==================================================
ボタン（黒の角丸。is-sub は枠線のみ）
・SP：縦積みで、送信ボタンを上にする
================================================== */
.ctBtnGlp {
  display: flex;
  flex-flow: column-reverse;
  gap: 12px;
  margin-top: calc(40 * var(--d));
}
.ctBtnObj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--dtTxt);
  border-radius: 28px;
  background: var(--dtTxt);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.ctBtnObj .iconObj {
  flex: none;
  width: 7px;
  height: auto;
  filter: invert(1); /* 黒の矢印アイコンを白にする */
}
.ctBtnObj.is-sub {
  background: transparent;
  color: var(--dtTxt);
}
@media (hover: hover) {
  .ctBtnObj:hover {
    opacity: 0.6;
  }
}
.ctBtnObj:focus-visible {
  outline: 2px solid var(--dtTxt);
  outline-offset: 3px;
}
.ctFormGlp.is-sending .ctBtnObj {
  opacity: 0.4;
  pointer-events: none;
}
@media screen and (min-width: 961px) {
  .ctBtnGlp {
    flex-flow: row;
    gap: calc(16 * var(--d));
    margin-top: calc(40 * var(--d));
  }
  .ctBtnObj {
    flex: 1;
    width: auto;
    height: calc(56 * var(--d));
    font-size: max(12px, calc(14 * var(--d)));
  }
}

/* ==================================================
完了画面
================================================== */
.ctDoneTtlObj {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}
.ctDoneArea .ctTxtObj {
  margin-top: calc(20 * var(--d));
}
.ctDoneArea .moreLinkObj {
  margin-top: calc(40 * var(--d));
}
@media screen and (min-width: 961px) {
  .ctDoneTtlObj {
    font-size: calc(24 * var(--d));
  }
  .ctDoneArea .moreLinkObj {
    margin-top: calc(48 * var(--d));
  }
}