@charset "utf-8";
/* エリア展開専用CSS
   すべて .area-lp の中に限定して書く（既存ページに影響を出さないため）
   SP基準・PCは992px以上（既存CSSと同じ区切り） */

/* レスポンシブの考え方
   〜576px   ：375px基準のリキッド（--u ＝ 375px幅での1px。値は calc(N * var(--u)) で書く）
   577〜991px：576px幅の見た目のまま固定し、インナー幅を固定して中央寄せ
   992〜1439px：1440px基準のリキッド（PC用の値も @media (min-width: 992px) 内に calc(N * var(--u)) で書く）
   1440px〜  ：PCの見た目のまま固定（--u ＝ 1px） */
.area-lp { --u: calc(100vw / 375); }
/* 文字サイズを指定していない要素も比例させる（既存の body は 1.6rem） */
@media (max-width: 991px) {
  .area-lp { font-size: calc(16 * var(--u)); }
}
@media (min-width: 577px) {
  .area-lp { --u: calc(576px / 375); }
}
@media (min-width: 577px) and (max-width: 991px) {
  /* 各セクション直下の箱を、576px幅のときと同じ幅で固定して中央寄せ
     （375px幅での箱の幅 × --u。各パーツの max-width・margin より優先させるため !important） */
  .area-lp > section > *,
  .area-lp .area-deadline__inner {
    max-width: calc(343 * var(--u)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .area-lp > :is(.area-intro, .area-worries, .area-local, .area-support, .area-reason, .area-seminar,
    .area-voice, .area-insta, .area-cases, .area-contact, .area-operating-office, .area-office) > * {
    max-width: calc(345 * var(--u)) !important;
  }
  /* 横幅いっぱいの帯は固定しない */
  .area-lp .area-deadline > .area-deadline__body,
  .area-lp .area-contact > .band-title {
    max-width: none !important;
  }
}
@media (min-width: 992px) {
  .area-lp {
    --u: calc(100vw / 1440);
    font-size: calc(18 * var(--u)); /* 既存の body（PC）は 1.8rem */
  }
}
@media (min-width: 1440px) {
  .area-lp { --u: 1px; }
}

.area-lp .area-pc { display: none; }
@media (min-width: 992px) {
  .area-lp .area-sp { display: none; }
  .area-lp .area-pc { display: inline; }
}