/* =========================================================================
   pc.css — 共通ページ（thanks.html・terms.html・privacy.html）PC（800px〜）
   PCデザインは無いため、LP1 の相談フォーム（contact.html）PC 版に合わせている。
   デザイン幅 1100px 基準（main の最大幅）。サイズは calc(var(--vw) * デザイン上のpx) で書く。
   --vw は 1100px で 1px になり、それより広い画面では大きくならない（main は中央に固定）。
   ========================================================================= */

:root {
  --vw: min(calc(100vw / 1100), 1px);

  /* color（sp.css と同じ） */
  --c-back: #1f2725;
  --c-lightbeige: #f0eee8;
  --c-key: #d6e865;
  --c-white: #ffffff;
  --c-middlebeige: #e5e2dc;
  --c-lightgreen: #868d7d;
  --c-darkgreen: #46524d;
  --c-line: rgba(134, 141, 125, 0.7);
  --c-error: #a63d2a;

  --reveal-distance: calc(var(--vw) * 24);

  /* font */
  --ff-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-num: "Playfair Display", "Noto Serif JP", serif;

  /* main 内の左右余白 */
  --gutter: calc(var(--vw) * 80);

  /* margin / padding */
  --s8: calc(var(--vw) * 8);
  --s16: calc(var(--vw) * 16);
  --s24: calc(var(--vw) * 24);
  --s32: calc(var(--vw) * 32);
  --s40: calc(var(--vw) * 40);
  --s48: calc(var(--vw) * 48);
  --s56: calc(var(--vw) * 56);
  --s64: calc(var(--vw) * 64);
  --s80: calc(var(--vw) * 80);
  --s96: calc(var(--vw) * 96);
  --s120: calc(var(--vw) * 120);
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-lightbeige);
  color: var(--c-back);
  font-family: var(--ff-sans);
  font-size: calc(var(--vw) * 24);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* SPだけの改行 */
.sponly { display: none; }

/* --- main（1100px で中央に固定し、両端を線で区切る）------------------------ */
main {
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  border-right: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}

/* --- フッター（main の外。画面幅いっぱい）------------------------------------ */
.footer {
  display: flex;
  justify-content: center;
  padding-top: var(--s32);
  padding-bottom: var(--s24);
  background: var(--c-back);
  color: var(--c-lightbeige);
}
.footer__copy {
  font-size: calc(var(--vw) * 16);
  line-height: 1.4;
}

/* --- ヘッダー（main と同じ幅・同じ線で続ける）---------------------------------- */
.page-header {
  display: flex;
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  padding-top: var(--s40);
  padding-right: var(--gutter);
  padding-left: var(--gutter);
  border-right: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.page-header__logo {
  display: flex;
}
.page-header__logo-img {
  width: calc(var(--vw) * 160);
}

/* --- 導入（英字ラベル＋見出し＋説明）------------------------------------------ */
.page-intro {
  display: flex;
  flex-direction: column;
  padding-top: var(--s80);
  padding-right: var(--gutter);
  padding-bottom: var(--s64);
  padding-left: var(--gutter);
}
/* 英字ラベルの右に横線を伸ばす */
.page-intro__en {
  display: flex;
  align-items: center;
  gap: var(--s24);
  color: var(--c-lightgreen);
  font-family: var(--ff-num);
  font-size: calc(var(--vw) * 18);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.page-intro__en::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-lightgreen);
}
.page-intro__title {
  margin-top: var(--s24);
  font-family: var(--ff-serif);
  font-size: calc(var(--vw) * 64);
  font-weight: 700;
  line-height: 1.4;
}
.page-intro__lead {
  display: flex;
  flex-direction: column;
  margin-top: var(--s24);
  font-size: calc(var(--vw) * 24);
  line-height: 1.8;
}

/* --- サンクス：個別アドバイスの案内 ------------------------------------------ */
.advice {
  display: flex;
  flex-direction: column;
  padding-right: var(--gutter);
  padding-bottom: var(--s48);
  padding-left: var(--gutter);
}
.advice__card {
  display: flex;
  flex-direction: column;
  gap: var(--s32);
  padding: var(--s48) var(--s64);
  border-radius: calc(var(--vw) * 16);
  background: var(--c-white);
}
.advice__head {
  display: flex;
  flex-direction: column;
  gap: var(--s16);
}
.advice__title {
  font-family: var(--ff-serif);
  font-size: calc(var(--vw) * 32);
  font-weight: 700;
  line-height: 1.4;
}
.advice__text {
  font-size: calc(var(--vw) * 20);
  line-height: 1.8;
}
/* 01〜03：上下に線を引いて区切る */
.advice__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-middlebeige);
}
.advice__item {
  display: flex;
  align-items: center;
  gap: var(--s24);
  padding-top: var(--s16);
  padding-bottom: var(--s16);
  border-bottom: 1px solid var(--c-middlebeige);
}
.advice__num {
  flex-shrink: 0;
  color: var(--c-darkgreen);
  font-family: var(--ff-num);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: calc(var(--vw) * 28);
  font-weight: 600;
  line-height: 1.2;
}
.advice__label {
  font-size: calc(var(--vw) * 20);
  font-weight: 700;
  line-height: 1.6;
}

/* --- サンクス：TimeRex予約 --------------------------------------------------- */
.booking {
  display: flex;
  flex-direction: column;
  gap: var(--s24);
  padding-right: var(--gutter);
  padding-bottom: var(--s120);
  padding-left: var(--gutter);
}
.booking__card {
  display: flex;
  flex-direction: column;
  gap: var(--s32);
  padding: var(--s48) var(--s64);
  border-radius: calc(var(--vw) * 16);
  background: var(--c-white);
}
.booking__head {
  display: flex;
  flex-direction: column;
  gap: var(--s16);
}
.booking__title {
  display: flex;
  align-items: center;
  gap: var(--s16);
  font-family: var(--ff-serif);
  font-size: calc(var(--vw) * 32);
  font-weight: 700;
  line-height: 1.4;
}
.booking__icon {
  flex-shrink: 0;
  width: calc(var(--vw) * 40);
  height: calc(var(--vw) * 40);
  color: var(--c-darkgreen);
}
/* オンライン対応・約30分・費用0円 */
.booking__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
}
.booking__tag {
  padding: calc(var(--vw) * 4) var(--s16);
  border-radius: calc(var(--vw) * 999);
  background: var(--c-darkgreen);
  color: var(--c-white);
  font-size: calc(var(--vw) * 16);
  font-weight: 700;
  line-height: 1.6;
}
.booking__text {
  font-size: calc(var(--vw) * 20);
  line-height: 1.8;
}
/* TimeRex の埋め込み先。埋め込みが入るとプレースホルダーは thanks.js が隠す */
.booking__embed {
  display: flex;
  flex-direction: column;
}
.booking__placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(var(--vw) * 640);
  border: 2px dashed var(--c-line);
  border-radius: calc(var(--vw) * 8);
  background: var(--c-lightbeige);
  color: var(--c-lightgreen);
  font-size: calc(var(--vw) * 24);
  font-weight: 700;
  line-height: 1.5;
}
.booking__note {
  color: var(--c-darkgreen);
  font-size: calc(var(--vw) * 16);
  line-height: 1.6;
}

/* --- 利用規約・個人情報の取扱い（本文）--------------------------------------- */
.doc {
  display: flex;
  flex-direction: column;
  padding-right: var(--gutter);
  padding-bottom: var(--s120);
  padding-left: var(--gutter);
}
.doc__card {
  display: flex;
  flex-direction: column;
  gap: var(--s48);
  padding: var(--s64) var(--s64);
  border-radius: calc(var(--vw) * 16);
  background: var(--c-white);
}
.doc__section {
  display: flex;
  flex-direction: column;
  gap: var(--s16);
}
/* 見出し：下に線 */
.doc__title {
  padding-bottom: var(--s16);
  font-family: var(--ff-serif);
  font-size: calc(var(--vw) * 24);
  font-weight: 700;
  line-height: 1.5;
}
.doc__text {
  font-size: calc(var(--vw) * 18);
  line-height: 1.9;
}
/* 番号付きリスト：番号は CSS で振る */
.doc__list {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
  counter-reset: doc-item;
}
.doc__list li {
  display: flex;
  gap: var(--s8);
  font-size: calc(var(--vw) * 18);
  line-height: 1.9;
  counter-increment: doc-item;
}
.doc__list li::before {
  content: "(" counter(doc-item) ")";
  flex-shrink: 0;
  color: var(--c-darkgreen);
}
.doc__link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.doc__link:hover {
  text-decoration: none;
}
.doc__date {
  color: var(--c-darkgreen);
  font-size: calc(var(--vw) * 16);
  line-height: 1.6;
  text-align: right;
}
/* 会社情報：左に項目名、右に内容 */
.doc__company {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-middlebeige);
}
.doc__company-row {
  display: flex;
  gap: var(--s32);
  padding-top: var(--s16);
  padding-bottom: var(--s16);
  border-bottom: 1px solid var(--c-middlebeige);
  font-size: calc(var(--vw) * 18);
  line-height: 1.7;
}
.doc__company-row dt {
  flex-shrink: 0;
  width: calc(var(--vw) * 120);
  font-weight: 700;
}