@charset "UTF-8";
/* ==========================================================================
   page.css（下層共通：page.php の固定ページ／index.php の投稿・一覧・404 など）
   ※ページ個別のスタイルは assets/css/{スラッグ}.css（例：contact.css）
   ========================================================================== */
.p-page {
  padding: calc(110 * var(--vw)) 0 calc(140 * var(--vw));
  background: #f5f9fb;
}

.p-page__inner,
.p-page__article {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--vw));
}

.p-page__title {
  font-size: calc(40 * var(--vw));
  font-weight: 700;
  line-height: 1.5;
}

.p-page__text {
  font-size: calc(18 * var(--vw));
  color: var(--c-gray);
}

.p-page__back {
  align-self: flex-start;
  font-size: calc(18 * var(--vw));
}

/* 固定ページ（page.php）：英字ラベル＋見出し、中身は白い枠の中 */
.p-page__entry {
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--vw));
}

.p-page__head {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
}

/* 1行が長くなりすぎないよう、中身は1000px幅で中央に（左右の余白260px） */
.p-page__body {
  padding: calc(90 * var(--vw)) calc(260 * var(--vw));
  font-size: calc(18 * var(--vw));
  line-height: 1.9;
  background: var(--c-white);
  border: 1px solid var(--c-line-3);
}

/* 本文（ブロックエディタの内容） */
.p-page__content {
  font-size: calc(18 * var(--vw));
  line-height: 1.9;
}

.p-page__content > * + * {
  margin-top: 1.4em;
}

.p-page__content > :first-child {
  margin-top: 0;
}

.p-page__content h2 {
  margin-top: 2.4em;
  padding-bottom: 0.5em;
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 1px solid var(--c-line);
}

.p-page__content h3 {
  margin-top: 2em;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.5;
}

.p-page__content h4 {
  margin-top: 1.8em;
  font-weight: 700;
}

.p-page__content ul {
  padding-left: 1.4em;
  list-style: disc;
}

.p-page__content ol {
  padding-left: 1.4em;
  list-style: decimal;
}

/* ボタンブロックなど class 付きのリンクは除く */
.p-page__content a:not([class]) {
  color: var(--c-blue);
  text-decoration: underline;
}

.p-page__content a:not([class]):hover {
  text-decoration: none;
}

.p-page__content strong {
  font-weight: 700;
}

.p-page__content figcaption {
  margin-top: 0.6em;
  font-size: 0.85em;
  color: var(--c-gray);
}

.p-page__content blockquote {
  padding: 0.4em 0 0.4em 1.4em;
  color: var(--c-gray);
  border-left: 4px solid var(--c-line);
}

.p-page__content hr {
  border: 0;
  border-top: 1px solid var(--c-line);
}

/* 表（会社概要など） */
.p-page__content table {
  width: 100%;
  border-collapse: collapse;
}

.p-page__content th,
.p-page__content td {
  padding: calc(20 * var(--vw)) calc(24 * var(--vw));
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--c-line);
}

.p-page__content th {
  font-weight: 700;
  background: #f5f9fb;
}

/* 一覧 */
.p-page__list {
  border-top: 1px solid var(--c-line);
}

.p-page__item {
  display: flex;
  gap: calc(32 * var(--vw));
  padding: calc(24 * var(--vw)) 0;
  font-size: calc(18 * var(--vw));
  border-bottom: 1px solid var(--c-line);
}

.p-page__date {
  flex: none;
  font-family: var(--ff-en);
  color: var(--c-gray);
}

.p-page__link {
  transition: color 0.3s;
}

.p-page__link:hover {
  color: var(--c-blue);
}

/* 送信完了ページ（template/pages/contact-thanks.php・web-thanks.php） */
.p-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--vw));
  text-align: center;
}

.p-thanks__title {
  font-size: calc(24 * var(--vw));
  font-weight: 700;
  line-height: 1.6;
}

.p-thanks__text {
  color: var(--c-gray);
}

.p-thanks__btn {
  width: calc(360 * var(--vw));
  height: calc(80 * var(--vw));
  margin-top: calc(28 * var(--vw));
}

/* ==========================================================================
   SP
   ========================================================================== */
@media screen and (max-width: 767px) {
  .p-page {
    padding: 48px 0 72px;
  }

  .p-page__inner,
  .p-page__article {
    gap: 24px;
  }

  .p-page__title {
    font-size: 24px;
  }

  .p-page__text,
  .p-page__back,
  .p-page__body,
  .p-page__content {
    font-size: 15px;
  }

  .p-page__entry {
    gap: 32px;
  }

  .p-page__head {
    gap: 18px;
  }

  .p-page__body {
    padding: 32px 20px;
  }

  .p-page__content th,
  .p-page__content td {
    padding: 12px 14px;
  }

  .p-page__item {
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    font-size: 15px;
  }

  .p-thanks {
    align-items: stretch;
    gap: 14px;
    text-align: left;
  }

  .p-thanks__title {
    font-size: 18px;
  }

  .p-thanks__btn {
    width: auto;
    height: 60px;
    margin-top: 16px;
  }
}