@charset "UTF-8";

/* =========================================================
   Layout : Container
========================================================= */
.l-body-wrap { overflow-x: hidden; }

.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 32px;
}
.l-container--md { max-width: var(--container-md); }

@media (max-width: 768px) {
  .l-container { padding-inline: 20px; }
}

/* =========================================================
   Layout : Header
========================================================= */
.l-header {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 100;
  height: 72px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 10px 40px -12px rgba(0,0,0,.18);
}
.l-header__inner {
  height: 100%;
  padding-inline: 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.l-header__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--color-main);
}
.l-header__logo-img { height: 26px; width: auto; display: none; }
.l-header__nav { margin-left: auto; }

.l-header-nav {
  display: flex;
  gap: 32px;
}
.l-header-nav__link {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-text);
  transition: color .3s var(--ease);
}
.l-header-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width .3s var(--ease);
}
.l-header-nav__link:hover { color: var(--color-main); }
.l-header-nav__link:hover::after { width: 100%; }
.l-header-nav__link.is-current { color: var(--color-accent); }
.l-header-nav__link.is-current::after { width: 100%; }

.l-header__cta-btn {
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  background: var(--color-accent);
  color: var(--color-white);
  border: 0;
  border-radius: 6px;
}
.l-header__cta-btn:hover {
  background: #d58235;
}
.l-header__burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  margin-left: 8px;
}
.l-header__burger-bar { display: block; width: 20px; height: 2px; background: var(--color-text); margin: 5px auto; }

@media (max-width: 960px) {
  .l-header__nav, .l-header__cta { display: none; }
  .l-header__burger { display: block; margin-left: auto; }
}

/* =========================================================
   Layout : Footer
========================================================= */
.l-footer {
  background: var(--color-main);
  color: var(--color-white);
  padding: 80px 0 32px;
  margin-top: 120px;
}
.l-footer__inner {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.l-footer__logo {
  font-family: var(--font-en);
  font-size: 28px;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.l-footer__copy {
  font-size: 14px;
  opacity: .8;
}
.l-footer-nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.l-footer-nav__link {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .06em;
  opacity: .9;
  transition: opacity .3s var(--ease);
}
.l-footer-nav__link:hover { opacity: .6; }

.l-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 200px));
  gap: 40px;
}
.l-footer-col__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-white);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
/* 特商法リンク（WPCodeスニペットで注入されるもの）を非表示 */
.l-footer a[href*="tokushoho"],
.l-footer-col__list li:has(a[href*="tokushoho"]) {
  display: none !important;
}

/* WPCodeスニペット「Phase2: ブログ記事下CTA」で注入されるCTAを非表示
   （恒久対応は管理画面でスニペット自体をOFF） */
.rh-blog-cta {
  display: none !important;
}
.l-footer-col__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.l-footer-col__link {
  font-size: 13px;
  opacity: .85;
  transition: opacity .3s var(--ease);
}
.l-footer-col__link:hover { opacity: .5; }
@media (max-width: 768px) {
  .l-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
.l-footer__copyright {
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .6;
}
@media (max-width: 768px) {
  .l-footer__inner { flex-direction: column; }
  .l-footer { padding-top: 56px; margin-top: 80px; }
}

/* =========================================================
   Subpage 調整
   WPCodeスニペット「ROCKHILL Subpage Design Unification」が
   body:not(.front-page) をダークテーマに強制しているのを
   ライトテーマ（TOPと同じベージュ系）に戻す。
   specificity を上げるため html プリフィックスを付与。
========================================================= */
html body:not(.front-page),
html body:not(.front-page) .l-body,
html body:not(.front-page) .l-contents,
html body:not(.front-page) .l-main,
html body:not(.front-page) .c-entry,
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)),
html body:not(.front-page) .c-entry__content {
  background-color: var(--color-base) !important;
  color: var(--color-text) !important;
}
html body:not(.front-page) p:not(:where(.p-top-contact, .p-top-contact *, .dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) li:not(:where(.p-top-contact, .p-top-contact *, .dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) td:not(:where(.p-top-contact, .p-top-contact *, .dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) th:not(:where(.p-top-contact, .p-top-contact *, .dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) dt:not(:where(.p-top-contact, .p-top-contact *, .dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) dd:not(:where(.p-top-contact, .p-top-contact *, .dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) label:not(:where(.p-top-contact, .p-top-contact *, .dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) span:not(.rh-hamburger span):not(:where(.p-top-contact, .p-top-contact *, .dx-lab-lp, .dx-lab-lp *)) {
  color: var(--color-text) !important;
}
html body:not(.front-page) a:not([class*="rh-"]):not([class*="l-header"]):not([class*="c-btn"]):not([class*="nav-"]):not(:where(.p-top-contact, .p-top-contact *, .dx-lab-lp, .dx-lab-lp *)) {
  color: var(--color-main) !important;
}

/* 投稿一覧・記事詳細の最大幅を TOP と揃える */
html body:not(.front-page) article.c-entry,
html body:not(.front-page) div.c-entry,
html body:not(.front-page) .p-archive,
html body:not(.front-page) .c-entry__header,
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)),
html body:not(.front-page) .c-entry__footer,
html body:not(.front-page) .c-entry__aside,
html body:not(.front-page) .c-prev-next,
html body:not(.front-page) .p-related-posts {
  max-width: var(--container) !important;
  margin-inline: auto !important;
  padding-inline: 32px !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  html body:not(.front-page) article.c-entry,
  html body:not(.front-page) div.c-entry,
  html body:not(.front-page) .p-archive,
  html body:not(.front-page) .c-entry__header,
  html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)),
  html body:not(.front-page) .c-entry__footer,
  html body:not(.front-page) .c-entry__aside,
  html body:not(.front-page) .c-prev-next,
  html body:not(.front-page) .p-related-posts {
    padding-inline: 20px !important;
  }
}

/* =========================================================
   Archive (お知らせ / ブログ) 見出し
   スニペットの `.c-entry__title` 明朝・白を上書き、センター配置
========================================================= */
html body:not(.front-page) .c-entry__title {
  font-family: var(--font-jp) !important;
  font-weight: 700 !important;
  color: var(--color-main) !important;
  text-align: center !important;
  font-size: 40px !important;
  letter-spacing: .04em !important;
  margin: 0 0 16px !important;
}
html body:not(.front-page) .c-entry__title::after {
  display: none !important;
}
.p-archive__header {
  padding-top: 0;
  padding-bottom: 40px;
  text-align: center;
}
html body:not(.front-page) .p-archive__jumbo {
  font-size: 120px !important;
  padding-left: 0 !important;
  text-align: center;
  line-height: .9;
  color: var(--color-main) !important;
  font-family: var(--font-en) !important;
  font-weight: 800 !important;
}
.p-archive__lead {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-light);
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 768px) {
  .p-archive__header {
    padding-bottom: 24px;
  }
  html body:not(.front-page) .p-archive__jumbo {
    font-size: 64px !important;
  }
}

/* =========================================================
   サブページ見出し・本文スタイル
   スニペットの `h1-h4 白 / h2 明朝` を打ち消し、
   記事本文の見出し・箇条書きを読みやすく整形
========================================================= */
html body:not(.front-page) h1:not(:where(.dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) h2:not(:where(.dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) h3:not(:where(.dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) h4:not(:where(.dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) h5:not(:where(.dx-lab-lp, .dx-lab-lp *)),
html body:not(.front-page) h6:not(:where(.dx-lab-lp, .dx-lab-lp *)) {
  color: var(--color-main) !important;
  font-family: var(--font-jp) !important;
}

/* 記事本文内の見出し */
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) h2 {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--color-main) !important;
  border-top: 2px solid var(--color-main);
  border-bottom: 2px solid var(--color-main);
  padding: 18px 0;
  margin: 64px 0 28px !important;
  line-height: 1.4 !important;
  letter-spacing: .02em;
}
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-main) !important;
  border-bottom: 2px solid var(--color-line);
  padding-bottom: 8px;
  margin: 36px 0 16px !important;
  line-height: 1.5 !important;
}
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--color-main) !important;
  margin: 28px 0 12px !important;
  line-height: 1.5 !important;
  padding-left: 12px;
  border-left: 3px solid var(--color-main);
}

/* 記事本文の段落 */
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) p {
  font-size: 16px !important;
  line-height: 1.9 !important;
  margin: 0 0 1.5em !important;
  color: var(--color-text) !important;
}
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) li,
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) td,
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) th,
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) dt,
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) dd {
  font-size: 16px !important;
}
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) strong {
  color: var(--color-main) !important;
  font-weight: 700;
}
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) a {
  color: var(--color-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) a:hover {
  opacity: .7;
}

/* 箇条書き（bullet を復活） */
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) ul {
  list-style: disc outside !important;
  padding-left: 1.5em !important;
  margin: 16px 0 24px !important;
}
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) ol {
  list-style: decimal outside !important;
  padding-left: 1.5em !important;
  margin: 16px 0 24px !important;
}
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) li {
  margin-bottom: 8px !important;
  line-height: 1.9 !important;
  color: var(--color-text) !important;
}
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) li::marker {
  color: var(--color-accent);
}

/* 引用 */
html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) blockquote {
  border-left: 4px solid var(--color-sub);
  background: var(--color-white);
  padding: 20px 24px;
  margin: 24px 0;
  color: var(--color-text-light) !important;
  font-style: normal;
}

/* ページネーション */
html body:not(.front-page) .c-pagination {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin: 48px auto;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
html body:not(.front-page) .c-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: var(--color-white) !important;
  color: var(--color-main) !important;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  transition: background .2s, color .2s, border-color .2s;
}
html body:not(.front-page) a.c-pagination__item:hover {
  background: var(--color-main) !important;
  color: var(--color-white) !important;
  border-color: var(--color-main);
}
html body:not(.front-page) .c-pagination__item.current,
html body:not(.front-page) span.c-pagination__item[aria-current="page"] {
  background: var(--color-main) !important;
  color: var(--color-white) !important;
  border-color: var(--color-main);
}
html body:not(.front-page) .c-pagination__item svg {
  fill: currentColor;
}

@media (max-width: 768px) {
  html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) h2 {
    font-size: 26px !important;
    margin: 48px 0 20px !important;
  }
  html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) h3 {
    font-size: 18px !important;
    margin: 28px 0 12px !important;
  }
  html body:not(.front-page) .c-entry__body:not(:has(.dx-lab-lp)) h4 {
    font-size: 16px !important;
    margin: 20px 0 10px !important;
  }
}

/* =========================================================
   Subpage: Fixed header の分だけ body を下げる
   （WPCodeスニペット無効化で失われた padding-top を復活）
========================================================= */
html body:not(.front-page) {
  padding-top: calc(var(--header-h) + 20px) !important;
}
html body.admin-bar:not(.front-page) {
  padding-top: calc(var(--header-h) + 20px + 32px) !important;
}
@media (max-width: 782px) {
  html body.admin-bar:not(.front-page) {
    padding-top: calc(var(--header-h) + 20px + 46px) !important;
  }
}

/* =========================================================
   Footer: サブページ用 p/li/a 色強制ルールを上書きして白に戻す
   （上の html body:not(.front-page) p/a { color: ... !important } が
    .l-footer 内にも効いてしまうのを打ち消す）
   #body で詳細度を上げて a:not(...):not(...):not(...):not(...) に勝たせる
========================================================= */
html body#body:not(.front-page) .l-footer,
html body#body:not(.front-page) .l-footer p,
html body#body:not(.front-page) .l-footer li,
html body#body:not(.front-page) .l-footer a,
html body#body:not(.front-page) .l-footer span,
html body#body:not(.front-page) .l-footer .l-footer__logo,
html body#body:not(.front-page) .l-footer .l-footer__copy,
html body#body:not(.front-page) .l-footer .l-footer-col__title,
html body#body:not(.front-page) .l-footer .l-footer-col__link,
html body#body:not(.front-page) .l-footer .l-footer__copyright {
  color: var(--color-white) !important;
}