/* 下層ページ共通。組み方は giftee.co.jp の下層（/company/outline/）に合わせている */
body { font-size: 16px; line-height: 2; letter-spacing: 0.02em; }

/* 上の板：ロゴ・メニュー・ページ名（大きな英字＋小さな日本語） */
.ph { background: #F5F5F2; box-sizing: border-box; min-height: 330px; padding: 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "logo nav" "title nav"; column-gap: 48px; }
.ph .logo { grid-area: logo; align-self: start; justify-self: start; }
.ph .h-nav { grid-area: nav; justify-self: end; }
.ph .h-menu { grid-area: menu; }
.ph-title { grid-area: title; align-self: end; display: flex; align-items: baseline; gap: 20px; }
.ph-en { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 40px; line-height: 1.5; letter-spacing: 0; }
.ph-title h1 { font-size: 14px; font-weight: 700; line-height: 2; letter-spacing: 0.08em; }

/* 区画：左に見出し、右に中身 */
.sec { display: grid; grid-template-columns: minmax(0, 41%) minmax(0, 1fr); margin-top: 160px; }
.sec h2 { font-size: 32px; font-weight: 700; line-height: 1.55; letter-spacing: 0.04em; padding-right: 32px; }
.lead { font-size: 18px; font-weight: 700; line-height: 1.9; }
.sub { color: #6E5A4E; }

/* 項目と説明の並び（giftee の dl と同じ組み） */
.rows > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); padding: 26px 0; border-top: 1px solid #E2DDD3; }
.rows > div:last-child { border-bottom: 1px solid #E2DDD3; }
.rows dt { color: #6E5A4E; }

/* 質問と答え：質問は長いので、項目名の列に入れず答えの上に置く */
.faq > div { grid-template-columns: minmax(0, 1fr); }
.faq dt { color: #3E2215; font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.faq dt span { font-family: 'Geist', sans-serif; font-weight: 600; margin-right: 10px; }

/* 色面：ほかと分けたい区画だけに敷く。giftee と同じく画面の端まで広げ、中身の左端はほかの区画とそろえる */
.panel { background: #F5F5F2; padding: 72px 40px; margin: 160px -40px 0; }
.panel .sec { margin-top: 0; }

/* 最後の導線（1ページに1つだけ） */
.cta { margin-top: 160px; display: grid; grid-template-columns: minmax(0, 41%) minmax(0, 1fr); align-items: center; }
.cta p { font-size: 18px; font-weight: 700; }
.cta .btn { max-width: 320px; }

.foot { margin-top: 120px; padding-top: 28px; border-top: 1px solid #E2DDD3; }

@media (max-width: 880px) {
  body { line-height: 1.9; }
  .ph { min-height: 208px; padding: 22px 20px 26px; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo menu" "title title"; column-gap: 12px; }
  .ph .logo { align-self: center; }
  .ph-title { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 40px; }
  .ph-en { font-size: 32px; }
  .sec, .cta { grid-template-columns: minmax(0, 1fr); margin-top: 96px; }
  .sec h2 { font-size: 24px; padding-right: 0; margin-bottom: 28px; }
  .lead, .cta p { font-size: 17px; }
  .rows > div { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .rows dt { margin-bottom: 4px; }
  .faq > div { padding: 22px 0; }
  .panel { padding: 48px 14px; margin: 96px -14px 0; }
  .cta .btn { max-width: none; margin-top: 24px; }
  .foot { margin-top: 80px; }
}