@charset "UTF-8";
/* ==========================================================================
   自分史アルバム お問い合わせフォーム 固有スタイル
   - LP共通の見た目（ヘッダー・フッター・配色・書体）は jibunshi.css 側
   - このファイルは /jibunshi/contact/ の入力・確認・完了画面だけで読み込む
   - セレクタは #jibunshi.page-contact 配下にスコープ（portal規約：#pageid スコープ）
   ========================================================================== */

#jibunshi.page-contact {
  /* このページで使う色。LP本体のトークンとは別に、フォーム用の実色として定義する */
  --form-title:  #c3a483; /* ページタイトルの淡い金茶 */
  --form-text:   #7a5c46; /* 本文の茶 */
  --form-label:  #66361a; /* ラベルの濃い茶 */
  --form-card:   #e9e7d7; /* カードのベージュ */
  --form-line:   #d8d4bd; /* カード内の罫線 */
  --form-accent: #66361a; /* ボタン等 */
  --form-error:  #c0392b;

  /* 水彩の背景（LPの what-we-do と同じ画像）。フォールバックに暖色クリーム。
     fixed で画面に固定する。フォームは縦に長い（12項目で2000px超）ため、LPと同じ
     scroll + cover だと画像が2倍以上に引き伸ばされ、繊細な水彩が巨大にボケるため。 */
  background: #fdfcfa url("https://ik.imagekit.io/yumephoto/yumeportal/jibunshi/bg_what-we-do.png?tr=n-base,w-1920") center top / cover no-repeat fixed;
}

/* 狭い画面用の改行（PCでは効かせない）。
   タイトルが折り返せる幅を下回る前に、意図した位置（お問い合わせを／受け付けました）で折る。
   ブラウザ任せに折らせると中途半端な位置で切れるため。 */
#jibunshi.page-contact .br-sp {
  display: none;
}

/* 境界は 1023px。LP側が min-width:1024px / max-width:1023px で切っているのに合わせる
   （1024px を含めるとLPと切り替わる幅が1pxずれる） */
@media screen and (max-width: 1023px) {
  #jibunshi.page-contact .br-sp {
    display: inline;
  }
}

/* 上はヘッダー(固定120px)ぶんを避ける。
   左右は画面幅に比例させ、上限80px・下限20pxで頭打ちにする（clamp）。
   ブレイクポイントで切り替えると境目で余白が急に半減して窮屈に見えるため、
   段階を足すのではなく連続的に変化させる。
     1600px以上 → 80px（頭打ち）
     1180px    → 約59px
      743px    → 約37px
      375px    → 20px（頭打ち。スマホは余白より本文幅を優先） */
#jibunshi.page-contact .contact-wrapper {
  padding: 200px clamp(20px, 5vw, 80px) 120px;
}

#jibunshi.page-contact .contact-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* ===== ページタイトル・リード =====
   入力・確認・完了の3画面でタイトルの体裁を揃える（サイズ・字間・グラデーション）。
   違うのは下マージンだけなので、それぞれで上書きする。 */
#jibunshi.page-contact .contact-page-title,
#jibunshi.page-contact .thanks-title {
  font-family: var(--font-heading);
  /* 36px。46pxは字面が大きく間延びして幼く見えた。
     一番長い「お問い合わせを受け付けました」(14文字)でも約600pxに収まり、
     カード幅が狭まるまで1行を保てるサイズ。 */
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em; /* letter-spacing の右余りを打ち消して中央に見せる */
  text-align: center;
  color: #623727; /* グラデ非対応時のフォールバック（透明のまま消えないように） */
}

#jibunshi.page-contact .contact-page-title {
  margin: 0 0 40px;
}

/* ページタイトルは線グラデーション135°（#623727 → #e1b790）。入力・確認・完了で共通。
   文字をグラデで塗るには background-clip:text が要るので、対応環境だけ差し替える */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #jibunshi.page-contact .contact-page-title,
  #jibunshi.page-contact .thanks-title {
    background-image: linear-gradient(135deg, #623727, #e1b790);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* リード文はカードの中・上部（デザイン準拠） */
#jibunshi.page-contact .contact-lead {
  margin: 0 0 56px;
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 2;
  color: var(--form-text);
  text-align: center;
}

/* ===== カード =====
   左右パディング110px。入力欄はこの内側いっぱい（1280-220=1060px）に広がる＝デザイン準拠 */
#jibunshi.page-contact .contact-card {
  background-color: var(--form-card);
  /* 12px。28pxは丸みが強すぎて幼く見えた。角を落としすぎない程度に抑える */
  border-radius: 12px;
  padding: 56px 110px 72px;
}

/* ===== エラー表示 ===== */
#jibunshi.page-contact .form-errors {
  margin: 0 0 32px;
  padding: 20px 24px;
  background-color: #fff;
  border-left: 4px solid var(--form-error);
  border-radius: 4px;
}

#jibunshi.page-contact .form-errors-title {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--form-error);
}

#jibunshi.page-contact .form-errors ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.9;
  color: var(--form-text);
}

/* 各行の頭に「※」を付ける（既存フォーム contact/templates/index.tpl の <li>※{$error_message}</li> と同じ）。
   文言側ではなくCSSで付けるので、サーバー側・JS側どちらが出したエラーにも自動で付く */
#jibunshi.page-contact .form-errors li::before {
  content: "※";
  margin-right: 0.2em;
}

/* ===== 必須マーク ===== */
#jibunshi.page-contact .form-required {
  margin-right: 0.3em;
  color: var(--form-error);
  font-weight: 700;
}

/* 「*印は必須項目です」。ぶっきらぼうに見えないよう、
   注釈と同じゴシックで小さめ・薄めにし、入力欄の右端に合わせて右寄せする。
   左に置くと最初の項目名と縦に並んで指示書きのように強く見えるため。 */
#jibunshi.page-contact .form-required-note {
  margin: 0 0 36px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--form-text);
  text-align: right;
}

/* ===== 入力行 ===== */
#jibunshi.page-contact .form-row {
  margin-bottom: 34px;
}

/* ラベルの書体はページタイトルと揃える（明朝・600） */
#jibunshi.page-contact .form-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--form-label);
}

/* 入力欄の幅。テキスト欄・テキストエリアを問わず全て同じ幅に揃える
   （欄ごとに幅が違うと入力の目線が左右に振られて読みづらいため）。
   幅はカードの内側いっぱい＝デザイン準拠。max-width で固定すると
   カードの右側に空白が残り、入力欄が左に寄って見える。 */
#jibunshi.page-contact .form-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 16px; /* 16px未満だとiOSで自動ズームするため下げない */
  color: #333;
  line-height: 1.6;
}

#jibunshi.page-contact .form-input::placeholder {
  color: #b7b2a6;
}

#jibunshi.page-contact .form-input:focus {
  outline: none;
  border-color: var(--form-accent);
  box-shadow: 0 0 0 3px rgba(102, 54, 26, 0.12);
}

/* テキストエリアも max-width:700px を継承（幅を広げない）。縦だけ伸ばせる */
#jibunshi.page-contact .form-textarea {
  resize: vertical;
}

/* 入力エラーの該当欄 */
#jibunshi.page-contact .form-input.is-error {
  border-color: var(--form-error);
}

/* 入力欄ごとのエラー文。一覧側と同じく頭に「※」を付けて統一する */
#jibunshi.page-contact .form-error-text {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--form-error);
}

#jibunshi.page-contact .form-error-text::before {
  content: "※";
  margin-right: 0.2em;
}

/* ===== 注釈 =====
   このページの書体は2階層で使い分ける。
     見出し・ラベル … 明朝（--font-heading）＝ページタイトル / 項目名
     本文・注釈・入力 … ゴシック（--font-body）＝入力欄 / 注釈 / エラー / 注意書き
   注釈類は「読ませるための文字」なので、明朝には寄せずゴシックで統一する。 */
#jibunshi.page-contact .form-note {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.8;
  color: var(--form-text);
}

/* ===== 注意書きの枠 =====
   既存フォーム（contact/css/style.css の .caution-text / .caution-message）と同じ構成。
   メールが届かない＝問い合わせが無かったことになるため、通常の注釈より強く出す。
   配色は自分史の茶系に寄せつつ、注意色として赤みを残している。
   書体は上記のとおりゴシック（@hotmail.com 等の英字が続くので明朝だと読みにくい）。 */
#jibunshi.page-contact .form-caution {
  margin-top: 14px;
  max-width: 700px;
}

#jibunshi.page-contact .form-caution-title {
  display: inline-block;
  margin: 0;
  padding: 7px 16px;
  background-color: #b5644f;
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#jibunshi.page-contact .form-caution-message {
  margin: 0;
  padding: 14px 20px;
  background-color: #fff;
  border: 1px solid #b5644f;
  color: #9c4231;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.9;
}

/* ===== チェックボックス ===== */
#jibunshi.page-contact .form-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

#jibunshi.page-contact .form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--form-label);
}

#jibunshi.page-contact .form-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--form-accent);
  cursor: pointer;
}

#jibunshi.page-contact .form-privacy-lead {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--form-text);
}

#jibunshi.page-contact .form-privacy-lead a {
  color: var(--form-label);
  text-decoration: underline;
}

/* ===== ハニーポット =====
   bot にだけ見せる欄。display:none だと埋めない bot がいるので画面外へ飛ばす */
#jibunshi.page-contact .form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== ボタン ===== */
#jibunshi.page-contact .form-actions {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* 送信・確認ボタン。LPの btn_cases.png（事例一覧を見る）に合わせたCSS再現。
   画像から実測した値：
     ・グラデーションは縦方向（上 #724734 → 下 #caa384）。横方向は一定。
     ・縁に1〜2pxの明るいリム（上 #a57a5d → 下 #be9769）＝これも縦グラデ。
     ・角丸は高さの半分＝完全なピル。表示サイズは 455x80 前後。
   画像ではなくCSSで組むのは、ボタンの文言が画面ごとに違う（確認する／送信する）ため。 */
#jibunshi.page-contact .form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* 幅は控えめに。文字量ぶんだけ伸びるので min-width は下限の指定にとどめる。
     高さも合わせて下げ、元画像の細長い比率（455:80 ≒ 5.7:1）に近づける。
     幅だけ詰めると寸詰まりに見えて上品さが出ないため。 */
  min-width: 320px;
  min-height: 64px;
  padding: 16px 56px;
  border: 2px solid transparent;
  border-radius: 999px;
  /* 内側＝本体の縦グラデ、外側＝リムの縦グラデ（border-box に敷いて縁だけ見せる） */
  background:
    linear-gradient(180deg, #724734 0%, #caa384 100%) padding-box,
    linear-gradient(180deg, #a57a5d 0%, #be9769 100%) border-box;
  color: #f5f3ef;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: filter 0.45s cubic-bezier(.16, 1, .3, 1), transform 0.45s cubic-bezier(.16, 1, .3, 1);
}

/* 文字の左の罫線「――」 */
#jibunshi.page-contact .form-submit::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background-color: currentColor;
}

/* 右端の三角「▶」。文字数が変わっても位置がぶれないよう右端から絶対配置する */
#jibunshi.page-contact .form-submit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
}

#jibunshi.page-contact .form-submit:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

#jibunshi.page-contact .form-submit:disabled {
  filter: grayscale(0.4);
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* 「入力内容を修正する」は副次的な操作なので、同じピル型のまま色を落として主従を付ける。
   送信と同じ見た目にすると、どちらが本命の操作か分からなくなるため。 */
#jibunshi.page-contact .form-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  padding: 12px 32px;
  background-color: transparent;
  border: 1px solid #a98d74;
  border-radius: 999px;
  color: #7a5c46;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 戻るボタンは左向きの三角 */
#jibunshi.page-contact .form-back::before {
  content: "";
  border-style: solid;
  border-width: 5px 8px 5px 0;
  border-color: transparent currentColor transparent transparent;
}

#jibunshi.page-contact .form-back:hover {
  background-color: rgba(169, 141, 116, 0.15);
  color: #66361a;
}

/* ===== 確認画面 ===== */
#jibunshi.page-contact .confirm-list {
  margin: 0;
}

#jibunshi.page-contact .confirm-row {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--form-line);
}

#jibunshi.page-contact .confirm-row:first-child {
  border-top: 1px solid var(--form-line);
}

#jibunshi.page-contact .confirm-label {
  flex: 0 0 260px;
  font-size: 15px;
  color: var(--form-label);
}

#jibunshi.page-contact .confirm-value {
  flex: 1 1 auto;
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--form-text);
  word-break: break-word;
}

/* ===== 完了画面 ===== */
/* 完了画面は中身が中央寄せの読み物なので、左右はフォームほど要らない。
   本文・流れとも幅を中身に合わせて中央に置いているため、左右44pxで足りる */
#jibunshi.page-contact .thanks-card {
  padding: 90px 44px 100px;
}

/* 体裁は contact-page-title と共通。ここでは下マージンだけ持つ */
#jibunshi.page-contact .thanks-title {
  margin: 0 0 56px;
}

/* 幅を一番長い行ぴったりに縮めてから中央に置く（流れのリストと同じ考え方）。
   カードの内側いっぱいに広げると、行そのものは改行位置を指定していて伸びないのに
   ブロックだけが広くなり、一行が長く見えて読みづらくなるため。 */
#jibunshi.page-contact .thanks-body {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.4;
  color: #66361a;
  text-align: center;
}

#jibunshi.page-contact .thanks-body p {
  margin: 0 0 28px;
}

#jibunshi.page-contact .thanks-contact a {
  color: #66361a;
  text-decoration: none;
}

#jibunshi.page-contact .thanks-contact a:hover {
  text-decoration: underline;
}

/* ===== 完了画面：ご相談後の流れ =====
   番号を丸バッジにし、縦のグラデ線でつないだステップ表示。
   本文が中央揃えなのに対し、流れは左揃え＋インデントで「順を追う」動きを出す。
   幅は一番長い行がちょうど収まる640pxに絞る。広く取ると文字の右側が空いて
   ブロックの重心が左に寄り、中央揃えの見出しとズレて見えるため。 */
#jibunshi.page-contact .thanks-flow {
  margin: 72px auto 0;
  max-width: 640px;
  font-family: var(--font-heading);
  color: #66361a;
}

#jibunshi.page-contact .thanks-flow-title {
  margin: 0 0 40px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-align: center;
}

/* 見出し下の飾り罫（中央の短いグラデ線） */
#jibunshi.page-contact .thanks-flow-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 16px auto 0;
  background: linear-gradient(135deg, #623727, #e1b790);
}

/* 幅を中身ぴったりに縮めてから中央に置く。
   固定幅で中央寄せすると、テキストが右端まで届かないぶんブロックの重心が左に残り、
   中央揃えの見出しと中心がズレて見えるため（max-width を詰めるだけでは解消しない）。 */
#jibunshi.page-contact .thanks-flow-list {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

#jibunshi.page-contact .thanks-flow-item {
  position: relative;
  margin: 0;
  padding: 0 0 32px 84px; /* 左はバッジ(56px)＋余白 */
}

#jibunshi.page-contact .thanks-flow-item:last-child {
  padding-bottom: 0;
}

/* 番号バッジ */
#jibunshi.page-contact .thanks-flow-num {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #623727, #e1b790);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 17px;
  letter-spacing: 0.06em;
}

/* バッジ同士をつなぐ縦線。最後の項目には出さない（流れの終わりを示す） */
#jibunshi.page-contact .thanks-flow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 64px;
  bottom: 0;
  left: 27px; /* バッジ中心(28px)に対し線幅2pxぶん寄せる */
  width: 2px;
  background: linear-gradient(180deg, #e1b790, rgba(225, 183, 144, 0.3));
}

#jibunshi.page-contact .thanks-flow-body {
  padding-top: 6px; /* バッジの中心と見出しの高さを揃える */
}

#jibunshi.page-contact .thanks-flow-step {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.4;
  color: #66361a;
}

#jibunshi.page-contact .thanks-flow-sub {
  margin-left: 2px;
  font-size: 15px;
  color: #8d7259;
}

#jibunshi.page-contact .thanks-flow-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.9;
  color: #7a5c46;
}

/* ==========================================================================
   SP（デザイン未支給のため、PC版を破綻させない範囲での暫定対応）
   TODO(SP): CanvaのSPデザイン確定後に数値を合わせる

   境界は 767px。LP側(jibunshi.css)が min-width:768px でPC、max-width:767px でSP
   としているため、こちらを 768px にすると 768px ちょうどで
   「LPのヘッダーはPC・フォームはSP」という食い違いが起きる。
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* iOS Safari は background-attachment:fixed を正しく扱えず、画像が極端に拡大される。
     SPでは固定をやめ、幅に合わせて上に敷くだけにする（下は単色へ自然に抜ける） */
  #jibunshi.page-contact {
    background-attachment: scroll;
    background-size: 100% auto;
  }

  /* 左右は clamp に任せる（ここで上書きすると境目で急に詰まる）。縦だけ詰める */
  #jibunshi.page-contact .contact-wrapper {
    padding-block: 120px 80px;
  }

  /* タイトルはPC同様、入力・確認・完了で同じサイズ */
  #jibunshi.page-contact .contact-page-title,
  #jibunshi.page-contact .thanks-title {
    font-size: 24px;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }

  #jibunshi.page-contact .contact-lead {
    font-size: 15px;
    text-align: left;
  }

  #jibunshi.page-contact .contact-card {
    padding: 32px 20px 40px;
    border-radius: 10px;
  }

  #jibunshi.page-contact .form-submit,
  #jibunshi.page-contact .form-back {
    width: 100%;
    min-width: 0;
  }

  #jibunshi.page-contact .form-checks {
    flex-direction: column;
    gap: 12px;
  }

  /* 確認画面は縦積み（横並びだとラベルで幅を食って値が読めない） */
  #jibunshi.page-contact .confirm-row {
    flex-direction: column;
    gap: 6px;
  }

  #jibunshi.page-contact .confirm-label {
    flex: none;
    font-size: 13px;
  }

  #jibunshi.page-contact .thanks-card {
    padding: 40px 20px 48px;
  }

  #jibunshi.page-contact .thanks-body {
    font-size: 15px;
    text-align: left;
  }

  /* 流れ：バッジを小さくして左の余白を詰める */
  #jibunshi.page-contact .thanks-flow {
    margin-top: 48px;
  }

  #jibunshi.page-contact .thanks-flow-item {
    padding: 0 0 26px 58px;
  }

  #jibunshi.page-contact .thanks-flow-num {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  #jibunshi.page-contact .thanks-flow-item:not(:last-child)::after {
    top: 50px;
    left: 20px;
  }

  #jibunshi.page-contact .thanks-flow-body {
    padding-top: 2px;
  }

  #jibunshi.page-contact .thanks-flow-step {
    font-size: 16px;
  }

  #jibunshi.page-contact .thanks-flow-text {
    font-size: 13px;
  }
}