/* Contact：値段の札（空に大きな字）・ご依頼の流れ・ご相談の窓口（メール・LINE・お電話）
   道案内（router.js）でほかの頁へ移っても、この見た目の指定は <head> に残る。選ぶ物は必ず .contact の中の物に絞る */

.contact {
  position: relative;
  padding: 128px 40px 136px;           /* 上はロゴとメニュー、下は足もと（どちらも画面に留まる）の分を空ける */
  text-shadow: var(--shadow-text);
  /* 日本語は文節の途中で折り返さず、最後の行に 1〜2 字だけ落ちるのを避ける。入りきらない語だけは途中で折る */
  word-break: auto-phrase;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.contact-title { width: fit-content; margin: 0 auto; }   /* 箱を字の幅にして、真ん中に置く */

/* ---- 値段の札：箱を置かず、空に大きな字。決まりは白い半透明の小さな札を横に並べる ---- */
.contact-price { max-width: 920px; margin: 40px auto 0; text-align: center; }
.contact-price h2,
.contact-price p,
.contact-price ul { margin: 0; }
.contact-price ul { padding: 0; list-style: none; }
.contact-price .price-head { font-size: 18px; font-weight: 700; letter-spacing: 0.06em; }
.contact-price .price-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 14px;
  margin-top: 4px;
}
.contact-price .price-unit { font-size: 30px; font-weight: 800; }
.contact-price .price-yen { font-size: 76px; font-weight: 900; line-height: 1; }
.contact-price .price-yen b { font-family: var(--font-latin); font-size: 176px; font-weight: 700; }
.contact-price .price-rules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.contact-price .price-rules li {
  padding: 10px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 16px;
  font-weight: 700;
}
.contact-price .price-extra { margin-top: 18px; font-size: 14px; font-weight: 500; }

/* ---- 見出し（ご依頼の流れ・ご相談はこちらから） ---- */
.contact-h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: 0.04em; text-align: center; }

/* ---- ご依頼の流れ（白い板に --ink の字。番号は黄色い丸） ---- */
.contact-flow { max-width: 1080px; margin: 104px auto 0; }
.flow-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.flow-step {
  counter-increment: flow;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-content: start;
  align-items: center;
  column-gap: 12px;
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 0 10px 26px rgba(21, 24, 30, 0.22);
}
.flow-step::before {
  content: counter(flow);
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 2px 0 var(--yellow-deep);
  font-family: var(--font-latin);
  font-size: 18px;
  font-weight: 700;
}
.flow-name { margin: 0; font-size: 18px; font-weight: 800; }
.flow-text { grid-column: 1 / -1; margin: 12px 0 0; font-size: 14.5px; line-height: 1.8; }

/* ---- ご相談の窓口：メール・LINE・お電話の 3 枚。パソコンは横に 3 枚（同じ高さ）。
   幅の狭いパソコンとタブレットはメールを上に横いっぱい、LINE とお電話を下に 2 枚。スマートフォンは縦に 1 列 ---- */
.contact-ways { max-width: 1080px; margin: 104px auto 0; }
.contact-lead { margin: 10px 0 0; font-size: 16px; font-weight: 500; text-align: center; }
.ways-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  margin-top: 30px;
}
.ways-board {
  padding: 30px 32px 32px;
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 0 14px 32px rgba(21, 24, 30, 0.26);
}
.ways-name { margin: 0; font-size: 20px; font-weight: 800; }

/* メール：メインサイト（hiro-moting.com）のお問い合わせフォームへ、同じタブで移るボタン */
.mail-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 18px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--yellow-deep), 0 6px 16px rgba(21, 24, 30, 0.22);
}
.mail-go:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yellow-deep), 0 3px 10px rgba(21, 24, 30, 0.2); }
.mail-go:focus-visible { outline-color: var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--yellow-deep), 0 0 0 6px rgba(42, 107, 196, 0.35); }
.mail-note { margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
.mail-note span { display: inline-block; }   /* 折り返すのは span の間だけ */

/* LINE：パソコンは QR、スマートフォンは友だち追加のボタン（LINE 公式の絵は形も色も変えない。元の大きさ 232×72 より大きくしない） */
.line-qr { width: 168px; height: 168px; margin-top: 16px; }
.line-note { margin: 10px 0 0; font-size: 14px; line-height: 1.6; }
.line-add { display: none; width: max-content; max-width: 100%; margin-top: 16px; }
.line-add img { width: 232px; max-width: 100%; height: auto; }
.line-note--sp { display: none; }

/* お電話：パソコンは番号を大きく。受付時間は番号の下に小さく */
.tel-number {
  display: inline-block;
  margin-top: 8px;
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.tel-number:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tel-hours { margin: 4px 0 0; font-size: 15px; font-weight: 700; }

/* ---- 幅の狭いパソコン・タブレット ---- */
@media (max-width: 1023px) {
  .contact { padding-left: 32px; padding-right: 32px; }
  .ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways-mail { grid-column: 1 / -1; }
  .ways-board { padding: 26px 24px 28px; }
  .tel-number { font-size: 30px; }
}
@media (max-width: 959px) {
  .flow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- スマートフォン（幅 767px まで。base.css と同じ境目） ---- */
@media (max-width: 767px) {
  .contact { padding: 132px 16px 104px; }
  .contact-price { margin-top: 28px; }
  .contact-price .price-head { font-size: 16px; }
  .contact-price .price-main { gap: 0 10px; }
  .contact-price .price-unit { font-size: 22px; }
  .contact-price .price-yen { font-size: 50px; }
  .contact-price .price-yen b { font-size: 116px; }
  .contact-price .price-rules { gap: 10px; margin-top: 22px; }
  .contact-price .price-rules li { padding: 9px 16px; font-size: 15px; }
  .contact-price .price-extra { font-size: 13px; }

  .contact-flow,
  .contact-ways { margin-top: 72px; }
  .contact-h2 { font-size: 24px; }
  .flow-list { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .flow-step { padding: 18px 18px 20px; border-radius: 16px; }

  .ways-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  .ways-board { padding: 24px 20px 26px; border-radius: 18px; }

  .line-qr,
  .line-note--pc { display: none; }
  .line-add,
  .line-note--sp { display: block; }
  .tel-number { font-size: 30px; }
}