/*
 * KEI LABO — 下層ページ共通レイアウト
 *
 * トップページの全画面パネルUIを通常ページへ持ち込まず、固定ロゴの下に
 * 読みやすい本文カラムを作る。functions.php から下層ページだけに読み込む。
 */

html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body.is-lower-page {
  --page-gutter: clamp(20px, 5vw, 72px);
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.85;
}

/* 固定クローム。本文の開始位置はこの高さを含めて確保する。 */
.is-lower-page #scrim {
  height: clamp(92px, 10vw, 124px);
  background: linear-gradient(to bottom, var(--gofun) 68%, transparent);
}

.is-lower-page #logo {
  top: clamp(20px, 3.2vw, 40px);
  left: var(--page-gutter);
  text-decoration: none;
}

.is-lower-page #logo .brand {
  height: clamp(19px, 2.2vw, 24px);
}

.is-lower-page #theme {
  top: clamp(18px, 3.2vw, 38px);
  right: var(--page-gutter);
}

.is-lower-page #header-contact {
  top: clamp(18px, 3.2vw, 38px);
  right: calc(var(--page-gutter) + 52px);
}

.is-lower-page.admin-bar #logo,
.is-lower-page.admin-bar #theme,
.is-lower-page.admin-bar #header-contact {
  top: calc(clamp(20px, 3.2vw, 40px) + 32px);
}

/* rail / foot はトップページのパネル移動専用。 */
.is-lower-page #rail,
.is-lower-page #foot {
  display: none;
}

/* ページ外枠 */
.is-lower-page #content.site-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(120px, 14vw, 172px) var(--page-gutter) clamp(64px, 9vw, 112px);
}

.is-lower-page #content > .container {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.is-lower-page .content-left-wrap {
  float: none;
  width: min(100%, 900px);
  margin-inline: auto;
  padding: 0;
}

.is-lower-page .sidebar-wrap {
  display: none;
}

.is-lower-page .content-area,
.is-lower-page .site-main,
.is-lower-page article {
  width: 100%;
}

/* タイトル */
.is-lower-page .entry-header,
.is-lower-page .page-header,
.is-lower-page .woocommerce-products-header {
  margin: 0 0 clamp(32px, 5vw, 56px);
  padding: 0 0 clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--hairline);
}

.is-lower-page .entry-title,
.is-lower-page .page-title,
.is-lower-page .woocommerce-products-header__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* 長文コンテンツ */
.is-lower-page .entry-content {
  color: var(--sumi-70);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.is-lower-page .entry-content > *:first-child {
  margin-top: 0;
}

.is-lower-page .entry-content > *:last-child {
  margin-bottom: 0;
}

.is-lower-page .entry-content p,
.is-lower-page .entry-content li,
.is-lower-page .entry-content dd {
  max-width: 46rem;
}

.is-lower-page .entry-content p {
  margin: 0 0 1.5em;
}

.is-lower-page .entry-content h2 {
  margin: 2.25em 0 .7em;
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  line-height: 1.4;
}

.is-lower-page .entry-content h3 {
  margin: 2em 0 .65em;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.5;
}

.is-lower-page .entry-content h4,
.is-lower-page .entry-content h5,
.is-lower-page .entry-content h6 {
  margin: 1.8em 0 .55em;
  font-family: var(--gothic);
  line-height: 1.55;
}

.is-lower-page .entry-content ul,
.is-lower-page .entry-content ol {
  margin: 0 0 1.75em;
  padding-left: 1.4em;
}

.is-lower-page .entry-content li + li {
  margin-top: .45em;
}

.is-lower-page .entry-content dl {
  margin: 0 0 2em;
}

.is-lower-page .entry-content dt {
  margin-top: 1.8em;
  color: var(--sumi);
  font-weight: 600;
}

.is-lower-page .entry-content dd {
  margin-top: .45em;
}

.is-lower-page .entry-content a {
  color: var(--sumi);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.is-lower-page .entry-content img,
.is-lower-page .entry-content video,
.is-lower-page .entry-content iframe {
  max-width: 100%;
  height: auto;
}

.is-lower-page .entry-content figure,
.is-lower-page .entry-content .wp-block-image {
  margin: 2em 0;
}

.is-lower-page .entry-content blockquote {
  margin: 2em 0;
  padding: .2em 0 .2em clamp(18px, 3vw, 32px);
  border-left: 1px solid var(--sumi);
  color: var(--sumi);
}

/* 表組み。会社概要を含め、親テーマのBootstrapがなくても幅を保つ。 */
.is-lower-page .entry-content table {
  width: 100%;
  margin: 0 0 2em;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--sumi-70);
}

.is-lower-page .entry-content th,
.is-lower-page .entry-content td {
  padding: 15px clamp(10px, 2vw, 22px);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.is-lower-page .entry-content th {
  width: 28%;
  color: var(--nezumi);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
}

/* フォーム */
.is-lower-page .wpcf7,
.is-lower-page .wpcf7-form,
.is-lower-page .entry-content form {
  width: min(100%, 680px);
}

.is-lower-page .wpcf7-form label,
.is-lower-page .wpcf7-form p,
.is-lower-page .entry-content form label {
  font-size: .8rem;
  line-height: 1.7;
}

.is-lower-page .entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.is-lower-page .entry-content select,
.is-lower-page .entry-content textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-color: color-mix(in srgb, var(--sumi) 20%, var(--hairline));
  border-radius: 0;
  background-color: var(--washi);
  color: var(--sumi);
  font: inherit;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sumi) 4%, transparent);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.is-lower-page .entry-content textarea {
  min-height: 160px;
}

.is-lower-page .entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):hover,
.is-lower-page .entry-content select:hover,
.is-lower-page .entry-content textarea:hover {
  border-color: var(--sumi-70);
}

.is-lower-page .entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.is-lower-page .entry-content select:focus,
.is-lower-page .entry-content textarea:focus {
  outline: none;
  border-color: var(--sumi);
  background-color: var(--gofun);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sumi) 10%, transparent);
}

/* 記事一覧・投稿ページ */
.is-lower-page .site-main > article + article {
  margin-top: clamp(44px, 7vw, 72px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--hairline);
}

.is-lower-page .entry-meta,
.is-lower-page .entry-footer,
.is-lower-page .nav-links {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--nezumi);
}

.is-lower-page .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

/* WooCommerce は商品グリッドを使えるよう本文幅だけ広げる。 */
.is-lower-page.woocommerce-page .content-left-wrap {
  width: 100%;
  max-width: 1120px;
}

@media (max-width: 760px) {
  body.is-lower-page {
    --page-gutter: clamp(18px, 6vw, 28px);
    font-size: 15px;
    line-height: 1.8;
  }

  .is-lower-page #scrim {
    height: 86px;
  }

  .is-lower-page #logo .brand {
    height: 18px;
  }

  .is-lower-page #logo small {
    margin-top: 9px;
    font-size: 7.5px;
    line-height: 1.4;
    letter-spacing: .18em;
  }

  .is-lower-page #theme {
    width: 38px;
    height: 38px;
  }

  .is-lower-page #header-contact {
    right: calc(var(--page-gutter) + 50px);
    min-width: 38px;
    width: 38px;
    height: 38px;
  }

  .is-lower-page #content.site-content {
    padding-top: 108px;
    padding-bottom: 64px;
  }

  .is-lower-page .entry-header,
  .is-lower-page .page-header,
  .is-lower-page .woocommerce-products-header {
    margin-bottom: 30px;
    padding-bottom: 18px;
  }

  .is-lower-page .entry-title,
  .is-lower-page .page-title,
  .is-lower-page .woocommerce-products-header__title {
    font-size: clamp(1.75rem, 9vw, 2.35rem);
  }

  .is-lower-page .entry-content th,
  .is-lower-page .entry-content td {
    display: block;
    width: 100%;
    padding-inline: 0;
  }

  .is-lower-page .entry-content th {
    padding-bottom: 4px;
    border-bottom: 0;
  }

  .is-lower-page .entry-content td {
    padding-top: 0;
    padding-bottom: 14px;
  }
}

@media screen and (max-width: 782px) {
  .is-lower-page.admin-bar #logo,
  .is-lower-page.admin-bar #theme,
  .is-lower-page.admin-bar #header-contact {
    top: calc(18px + 46px);
  }

  .is-lower-page.admin-bar #content.site-content {
    padding-top: calc(108px + 46px);
  }
}