@charset "UTF-8";
/* ==========================================================================
   中津川・恵那 住宅図鑑 - トップページ専用スタイルシート (home.scss)
   - 命名規則: BEM (block__element--modifier)
   - 役割: ヒーローセクション、ソートUI、トップ特有 of レイアウト定義
   ========================================================================== */
/* 1. ヒーローセクション (新デザイン大改造版: ケン・バーンズ効果スライダー ＆ グラスモフィズム本型UI) */
.p-new-hero {
  min-height: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: url("../img/550233370.jpg") center/cover no-repeat;
}

/* 抜き外観画像スライド背景 */
.p-new-hero__marquee {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 上寄せにして全体の位置を少し上に上げる */
  padding-top: calc(30px + var(--header-height-offset));
  /* ヘッダーの高さ直後から配置 */
  gap: 30px;
  /* 元の余白 */
  padding-bottom: 30px;
  opacity: 1.0;
  /* 住宅画像をはっきりと見せるため不透明度を1.0に変更 */
}

.p-new-hero__marquee-row {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.p-new-hero__marquee-track {
  display: flex;
  align-items: flex-end;
  /* すべての家の下辺を揃えて地面を統一する */
  width: max-content;
  gap: 80px;
  /* 画像間余白 */
}

.p-new-hero__marquee-track img {
  height: 140px;
  /* デフォルト（2階建て）の高さ */
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.06));
  /* 明るい背景に馴染む上品で薄い影に変更 */
}

.p-new-hero__marquee-track img[src$="top.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-track img[src$="top-1.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-track img[src$="top-2.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-track img[src$="top-3.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-track img[src$="top-4.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-track img[src$="top-5.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-track img[src$="top-6.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-track img[src$="top-9.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-track img[src$="top-13.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-track img[src$="top-17.png"] {
  height: 98px;
  /* 140pxの70% */
}

.p-new-hero__marquee-row--top .p-new-hero__marquee-track,
.p-new-hero__marquee-row--third .p-new-hero__marquee-track {
  animation: marqueeLeft 55s linear infinite;
  /* 1段目と3段目は左スクロール */
}

.p-new-hero__marquee-row--bottom .p-new-hero__marquee-track {
  animation: marqueeRight 55s linear infinite;
  /* 2段目は右スクロール */
}

@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.p-new-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  /* remove dark mesh */
  z-index: 2;
  display: block;
}

/* インナー領域 */
.p-new-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 元の flex-start に復元 */
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: auto;
  /* 元の auto に復元 */
  padding-top: calc(0px + var(--header-height-offset));
  /* 元のパディングに復元 */
  padding-bottom: 0;
}

/* キャッチコピーコンテナ (背景透明・座布団なし) */
.p-new-hero__brand-header {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 30px 40px;
  /* ゆったりとした余白 */
  width: 100%;
  max-width: 680px;
  /* 横幅をカード型に制限 */
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.2);
  /* 半透明白背景 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.p-new-hero__title {
  color: #ffffff !important;
  /* 暗い座布団上のため白文字に戻す */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.45);
  /* 視認性向上のためのテキストシャドウ */
  margin-bottom: 16px;
  line-height: 1.5;
  text-align: center;
  width: 100%;
  /* 横幅を常に100%に固定して縮まないようにする */
}

.p-new-hero__title-sub {
  display: block;
  font-size: 22px;
  /* 28px から 22px に変更し、ロゴの引き立てと美しさを両立 */
  font-weight: 500;
  letter-spacing: 0.12em;
  /* 字間をやや引き締めスマートに */
  margin-bottom: 24px;
  /* ロゴとのアキを美しく確保 */
  font-family: var(--font-family-base, "Zen Kaku Gothic New", sans-serif);
  /* サブコピーはゴシック */
}

.u-highlight-blue {
  background-color: transparent;
  /* 白背景を透明に */
  border: 1px solid #ffffff;
  /* 白フチに戻す */
  color: #ffffff !important;
  /* 白文字に戻す */
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-block;
  margin-top: 4px;
  margin-right: 6px;
  /* 右側の文字「の」との間隔を確保 */
  margin-left: 2px;
  /* 左側のテキストとのバランス調整 */
  text-shadow: inherit;
  /* 親のテキストシャドウを継承 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  /* 白フチの視認性向上のための影 */
}

.p-new-hero__title-main {
  display: block;
  margin-top: 24px;
  /* サブコピーとのアキを広げ、ロゴをより際立たせる */
}

.p-new-hero__title-main img {
  max-width: 500px;
  /* 460px から 500px に拡大してシンボルとしての存在感を強化 */
  /* SPロゴ使用時のPC表示用サイズ調整 */
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  /* ロゴ自体の輪郭にシャドウをつける */
}

.p-new-hero__title-desc {
  display: block;
  font-size: 18px;
  /* 16px から 18px に拡大して堂々とした比率に */
  font-weight: 700;
  color: #e4e4e7;
  /* 暗い座布団上で映える淡いグレーに戻す */
  letter-spacing: 0.15em;
  /* クレジット表記にふさわしい優雅な広がり */
  margin-top: 12px;
  /* ロゴとの距離を 8px から 12px に調整 */
  text-shadow: inherit;
  /* 親のテキストシャドウを継承 */
}

/* 検索UIコンテナ (画面下部密着) */
.p-new-hero__search-container {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  z-index: 4;
}

/* 本を開いた曲線（グラスモフィズム検索UI） */
.p-new-hero__search-box {
  width: 100%;
  background: #ffffff;
  /* 透過を廃止し、真っ白に変更 */
  padding: 95px 40px 30px;
  /* 見切れ防止のため、パディングを極限削減 */
  clip-path: url(#book-curve-clip);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* 8px から 20px に広げて窮屈感を解消 */
}

.p-new-hero__search-header {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 4px から 8px に広げてタイトルとリードのバランスを向上 */
}

/* 新規追加タイトルスタイル */
.p-new-hero__search-title {
  font-size: 30px;
  font-weight: 900;
  color: var(--color-primary);
  margin-bottom: 0;
  line-height: 1.1;
  text-align: center;
  width: 100%;
  letter-spacing: 0.05em;
}

.p-new-hero__search-lead {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
  text-align: center;
}

.p-new-hero__search-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 12px;
  /* 行間を 12px から 14px に広げて複数行時の窮屈感を解消 */
  max-width: 800px;
  width: 100%;
}

.p-new-hero__tag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: #ffffff;
  /* 白い塗り */
  color: var(--color-primary);
  /* 青文字 */
  border: 1px solid var(--color-primary);
  /* 青フチ */
  padding: 6px 20px;
  /* 2px 18px から 6px 20px に広げてクリックしやすさと高級感を確保 */
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.p-new-hero__tag-btn.p-sort-ui__btn:hover {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}

.p-new-hero__tag-btn.p-sort-ui__btn--active {
  background-color: var(--color-primary);
  /* アクティブ時は青背景 */
  color: #ffffff;
  /* アクティブ時は白文字 */
  border-color: var(--color-primary);
  /* アクティブ時は青フチ */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 非表示SVG */
.u-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 2. ソート (絞り込み) UI セクション */
.p-sort-section {
  text-align: left;
  padding-top: var(--space-section);
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: #ffffff;
}

/* 幾何学的な斜め線（スラッシュ背景） */
.p-sort-section::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 5%;
  width: 100px;
  height: 380px;
  background-color: #ebf075;
  opacity: 0.3;
  transform: skewX(35deg);
  z-index: -1;
  pointer-events: none;
}

/* 巨大な斜め線（スラッシュ背景）2つ目 */
.p-sort-section::after {
  content: "";
  position: absolute;
  bottom: 0%;
  right: 3%;
  width: 140px;
  height: 600px;
  background-color: #ebf075;
  opacity: 0.3;
  transform: skewX(-35deg);
  z-index: -1;
  pointer-events: none;
}

.p-sort-section h2 {
  color: var(--color-primary);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.p-sort-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--color-bg-white);
  padding: 48px 80px;
  border-radius: 16px;
  /* CONTACT枠と同じアール（角丸）に調整 */
  box-shadow: 0 12px 40px rgba(18, 18, 91, 0.08);
  border: 1px solid var(--color-border-main);
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  flex-shrink: 0;
}

.p-sort-ui__header {
  text-align: center;
  width: 100%;
}

.p-sort-ui__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
  text-align: center;
  line-height: var(--line-height-heading);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}

.p-sort-ui__lead {
  font-size: 18px;
  color: var(--color-text-main);
  text-align: center;
  margin-bottom: 20px;
}

.p-sort-ui__body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  flex-shrink: 0;
}

/* 流体横スクロールカルーセル (スマホで画面外に流動) */
@media (max-width: 768px) {
  .l-fluid-scroller {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-sm) !important;
    padding-bottom: var(--space-sm);
    margin-left: calc(var(--container-padding) * -1);
    margin-right: calc(var(--container-padding) * -1);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    scrollbar-width: none;
  }
  .l-fluid-scroller::-webkit-scrollbar {
    display: none;
  }
  .l-fluid-scroller > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

.p-sort-ui__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: var(--color-bg-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: calc(var(--space-sm) - 1px) calc(var(--space-lg) - 1px);
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.p-sort-ui__btn:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

/* --vertical のとき親を折り返して縦積みにする */
.p-two-column-layout.p-two-column-layout--vertical {
  flex-wrap: wrap;
}

.p-two-column-layout--vertical .p-two-column-layout__left,
.p-two-column-layout--vertical .p-two-column-layout__right {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* 2. 【ここがパターン2の肝】タイトルの部屋の中身を「左右横並び」にする */
.p-two-column-layout--vertical .p-two-column-layout__left {
  display: flex !important;
  flex-direction: row !important;
  /* H2とリード文を横並びにする */
  align-items: baseline !important;
  /* 文字の下揃え（ベースライン）を合わせて美しく */
  gap: var(--space-xs) !important;
  /* H2とリード文の間のすき間を8pxに統一 */
  flex-wrap: wrap !important;
  /* 画面が狭くなったら自動で折り返すお守り */
  position: static !important;
  /* 縦並びの時はstickyを解除して通常配置にする */
}

/* H2タイトルの下余白が邪魔になるのでリセット */
.p-two-column-layout--vertical .p-event-section__title {
  margin-bottom: 0 !important;
}

/* 4. AIハウスデザインセクション */
.p-ai-design-section {
  display: flex;
  justify-content: center;
}

.p-ai-design-block {
  display: block;
  text-decoration: none;
  background-color: #ffffff;
  /* 背景は白のまま */
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 40px 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-ai-design-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.p-ai-design-block:hover .p-ai-design-block__btn {
  background-color: #ffffff;
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.03);
}

.p-ai-design-block__header {
  border-top: 1px solid rgba(0, 76, 156, 0.25);
  border-bottom: 1px solid rgba(0, 76, 156, 0.25);
  padding: 10px 0;
  text-align: center;
  margin-bottom: 30px;
}

.p-ai-design-block__catch {
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
}

.p-ai-design-block__body {
  display: flex;
  gap: 40px;
  align-items: center;
}

.p-ai-design-block__slider-container {
  flex: 0 0 45%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(0, 76, 156, 0.15);
}

.p-ai-design-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.p-ai-design-slider__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade-slider 20s infinite ease-in-out;
}

.p-ai-design-slider__img:nth-child(1) {
  animation-delay: 0s;
}

.p-ai-design-slider__img:nth-child(2) {
  animation-delay: 4s;
}

.p-ai-design-slider__img:nth-child(3) {
  animation-delay: 8s;
}

.p-ai-design-slider__img:nth-child(4) {
  animation-delay: 12s;
}

.p-ai-design-slider__img:nth-child(5) {
  animation-delay: 16s;
}

@keyframes fade-slider {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  5% {
    opacity: 1;
    transform: scale(1.02);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  25% {
    opacity: 0;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
  }
}

.p-ai-design-block__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #333;
}

.p-ai-design-block__title-wrap {
  margin-bottom: 12px;
}

.p-ai-design-block__title-img {
  max-width: 320px;
  height: auto;
  display: block;
}

.p-ai-design-block__divider {
  height: 3px;
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  margin-bottom: 20px;
}

.p-ai-design-block__desc {
  font-size: 16px;
  line-height: var(--line-height-main, 1.85);
  color: var(--color-text-main);
  margin: 0 0 24px 0;
  font-weight: 400;
}

.p-ai-design-block__btn-wrapper {
  display: flex;
  justify-content: flex-start;
}

.p-ai-design-block__btn {
  background-color: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 36px;
  border-radius: 50px;
  border: 1px solid var(--color-primary);
  box-shadow: 0 4px 10px rgba(18, 18, 91, 0.15);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.p-ai-design-block__btn .arrow {
  font-weight: bold;
  font-size: 14px;
}

/* レスポンシブ対応 (SP版) */
@media (max-width: 768px) {
  .p-ai-design-block {
    padding: 30px 20px;
  }
  .p-ai-design-block__header {
    margin-bottom: 20px;
    padding: 8px 0;
  }
  .p-ai-design-block__catch {
    font-size: 14px;
    line-height: 1.4;
  }
  .p-ai-design-block__body {
    flex-direction: column;
    gap: 20px;
  }
  .p-ai-design-block__slider-container {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .p-ai-design-block__info {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .p-ai-design-block__title-img {
    max-width: 260px;
    margin: 0 auto;
  }
  .p-ai-design-block__divider {
    width: 100%;
  }
  .p-ai-design-block__desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .p-ai-design-block__desc br {
    display: none;
    /* スマホでは改行を解除して自然に折り返す */
  }
  .p-ai-design-block__btn-wrapper {
    width: 100%;
    justify-content: center;
  }
  .p-ai-design-block__btn {
    width: 100%;
    max-width: 260px;
    justify-content: center;
    font-size: 14px;
    padding: 12px 16px;
    white-space: nowrap;
  }
}

/* イベントグリッド（デスクトップ：2カラム中央揃え）*/
.p-event-grid {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}

.p-event-grid > * {
  /* 3枚並び時と同じサイズ (1/3幅御て) */
  flex: 0 0 calc((100% - 2 * var(--space-lg)) / 3);
  min-width: 0;
  max-width: calc((100% - 2 * var(--space-lg)) / 3);
}

/* イベントバナー共通スタイル */
.p-event-banner {
  display: block;
  border-radius: var(--radius-systemic);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--color-border-main);
  box-shadow: 0 4px 12px rgba(18, 18, 91, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.p-event-banner picture,
.p-event-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.p-event-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(18, 18, 91, 0.15);
  opacity: 0.92;
}

/* ==========================================================================
   レスポンシブ・レジリエンス (768px 1点突破)
   ========================================================================== */
@media (max-width: 768px) {
  .p-new-hero {
    min-height: 480px !important;
    /* 縦高さを少しコンパクトにし、要素全体のせり上がりと画面内収まりを強化 */
  }
  .p-new-hero__marquee {
    flex-direction: column !important;
    justify-content: flex-start !important;
    /* スマホ版も上寄せにして位置を上に上げる */
    padding: calc(15px + var(--header-height-offset)) 0 15px 0 !important;
    /* ヘッダーのすぐ下から配置 */
    gap: 12px !important;
    opacity: 1.0 !important;
    /* スマホ版も画像をはっきり見せるため不透明度1.0 */
  }
  .p-new-hero__marquee-row {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    overflow: hidden !important;
  }
  .p-new-hero__marquee-track {
    flex-direction: row !important;
    height: auto !important;
    width: max-content !important;
    gap: 20px !important;
    align-items: flex-end !important;
    /* スマホでも地面を揃える */
  }
  .p-new-hero__marquee-track img {
    height: 80px !important;
    /* スマホ版のデフォルト（2階建て）の高さ */
    width: auto !important;
    object-fit: contain !important;
  }
  .p-new-hero__marquee-track img[src$="top.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-track img[src$="top-1.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-track img[src$="top-2.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-track img[src$="top-3.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-track img[src$="top-4.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-track img[src$="top-5.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-track img[src$="top-6.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-track img[src$="top-9.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-track img[src$="top-13.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-track img[src$="top-17.png"] {
    height: 56px !important;
    /* 80pxの70% */
  }
  .p-new-hero__marquee-row--top .p-new-hero__marquee-track,
.p-new-hero__marquee-row--third .p-new-hero__marquee-track {
    animation: marqueeLeft 45s linear infinite !important;
    /* 1段目・3段目は左方向スクロール */
  }
  .p-new-hero__marquee-row--bottom .p-new-hero__marquee-track {
    animation: marqueeRight 45s linear infinite !important;
    /* 2段目は右方向スクロール */
  }
  .p-new-hero__inner {
    min-height: 480px !important;
    padding-top: calc(0px + var(--header-height-offset)) !important;
    /* 上部アキを限界まで上に詰め、下部余白との比率を等しくする */
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    /* ロゴと検索窓のまとまりを良くする */
    gap: 20px !important;
    align-items: center !important;
    /* 中央寄せに変更 */
  }
  .p-new-hero__brand-header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 20px 16px !important;
    /* スマホ用にパディングを調整 */
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    /* 左右20pxずつの隙間をあけてカードの独立感を強調 */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    /* 中央寄せ */
  }
  .p-new-hero__title {
    margin-bottom: 0 !important;
    text-align: center !important;
  }
  .p-new-hero__title-sub {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
    text-align: center !important;
  }
  .p-new-hero__title-sub br {
    display: block !important;
  }
  .u-highlight-blue {
    display: inline-block !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    padding: 2px 10px !important;
    border-radius: 4px !important;
    font-size: 15px !important;
  }
  .p-new-hero__title-main {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    display: block !important;
    text-align: center !important;
  }
  .p-new-hero__title-main img {
    max-width: 80% !important;
    /* 中央で程よいサイズに収める */
    margin: 0 auto !important;
    /* 中央寄せ */
  }
  .p-new-hero__title-desc {
    font-size: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  .p-new-hero__search-container {
    max-width: 100% !important;
    /* 60%幅制限を解除 */
    align-self: center !important;
    /* 中央寄せ */
    padding-right: 0 !important;
    width: 100% !important;
  }
  .p-new-hero__search-box {
    clip-path: url(#book-curve-clip-sp) !important;
    /* スマホ用ブックカーブを適用 */
    border-radius: 0 !important;
    padding: 70px 20px 24px 20px !important;
    /* カーブ分上部余白を多く確保 */
    align-items: center !important;
    /* 中央寄せ */
  }
  .p-new-hero__search-title {
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
    text-align: center !important;
  }
  .p-new-hero__search-lead {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  .p-new-hero__search-body {
    gap: 8px 6px !important;
    justify-content: center !important;
    /* 中央寄せ */
  }
  .p-new-hero__tag-btn {
    font-size: 13px !important;
    padding: 4px 12px !important;
  }
  .p-sort-ui {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 32px 24px !important;
    border-radius: 12px !important;
    /* スマホ時のCONTACT枠の角丸（12px）と統一 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: visible !important;
    box-shadow: 0 8px 24px rgba(18, 18, 91, 0.08) !important;
    flex-shrink: 0 !important;
  }
  .p-sort-ui__title {
    font-size: 18px !important;
  }
  .p-sort-ui__lead {
    font-size: 14px !important;
  }
  .p-sort-ui__body {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100%;
    flex-shrink: 0 !important;
  }
  .p-sort-ui__btn {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px !important;
    padding: 6px 12px !important;
  }
  .p-sort-section {
    padding-top: var(--space-section) !important;
  }
  /* イベントグリッド SP：縦積み・横幅いっぱい */
  .p-event-grid {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-md) !important;
  }
  .p-event-grid > * {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
  .p-zukan-list {
    scroll-margin-top: 80px !important;
    /* スマホ画面に合わせたアキ調整 */
    /* SP版の min-height も完全に削除 */
  }
  .p-two-column-layout.p-two-column-layout--vertical {
    gap: var(--space-md) !important;
  }
  /* 上下レイアウトのSP表示時の調整（H2とリード文の横並びを解除して縦並びにする） */
  .p-two-column-layout--vertical .p-two-column-layout__left {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .p-two-column-layout__left h2,
.p-two-column-layout__left .p-event-section__title {
    font-size: 36px !important;
  }
}

/* 住宅アーカイブ・一覧ページ用 */
.p-zukan-archive-header {
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--space-sm);
  margin-top: var(--space-lg);
}

.p-zukan-archive-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  position: relative;
  display: inline-block;
  margin: 0;
}

@media (max-width: 768px) {
  .p-zukan-archive-title {
    font-size: 22px;
  }
}

/* ページネーション用 */
.p-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.p-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: var(--color-primary);
  border: 1px solid var(--color-border-main);
  border-radius: var(--radius-systemic);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 10px 18px;
}

.p-pager__btn:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 76, 156, 0.15);
}

.p-pager__btn--number {
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

.p-pager__btn--active {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

@media (max-width: 768px) {
  .p-pager__btn {
    font-size: 14px;
    padding: 8px 14px;
  }
  .p-pager__btn--number {
    min-width: 38px;
    height: 38px;
    padding: 0;
  }
}

/* 住宅詳細ページ固有のレイアウト */
.p-detail-main {
  background-color: #ffffff;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

@media (max-width: 768px) {
  .p-detail-main {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
}

.p-detail-header-section {
  margin-bottom: var(--space-lg);
}

.p-detail-header {
  border-bottom: 2px solid var(--color-border-main);
  padding-bottom: var(--space-md);
}

.p-detail-header__cat-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.p-detail-header__keyword-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin-right: 4px;
}

@media (max-width: 768px) {
  .p-detail-header__keyword-label {
    font-size: 13px;
  }
}

.p-detail-keyword-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  background-color: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: 9999px;
  padding: 4px 12px;
  line-height: 1.2;
  cursor: default;
  transition: all 0.3s ease;
}

.p-detail-keyword-tag:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

@media (max-width: 768px) {
  .p-detail-keyword-tag {
    font-size: 12px;
    padding: 3px 10px;
  }
}

.p-detail-header__cat {
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .p-detail-header__cat {
    font-size: 14px;
  }
}

.p-detail-header__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin-bottom: var(--space-xs);
}

@media (max-width: 768px) {
  .p-detail-header__title {
    font-size: 22px;
  }
}

.p-detail-header__meta {
  font-size: 16px;
  color: var(--color-text-main);
  margin: 0;
}

@media (max-width: 768px) {
  .p-detail-header__meta {
    font-size: 14px;
  }
}

/* メイン画像 */
.p-detail-hero-img {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--space-xl);
  aspect-ratio: 16 / 9;
}

.p-detail-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .p-detail-hero-img {
    border-radius: 12px;
    margin-bottom: var(--space-lg);
  }
}

/* 施工事例のポイント */
.p-detail-points-section {
  margin-bottom: var(--space-xl);
}

.p-detail-lead-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-main);
}

@media (max-width: 768px) {
  .p-detail-lead-text {
    font-size: 14px;
    line-height: 1.7;
  }
}

.p-detail-section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  position: relative;
  padding-bottom: 12px;
  border-bottom: 2px dotted #004c9c;
}

@media (max-width: 768px) {
  .p-detail-section-title {
    font-size: 20px;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
}

.p-detail-points-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .p-detail-points-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.p-detail-point-card {
  background-color: #f7f9fc;
  border-radius: 12px;
  padding: 30px;
  border: 1px solid var(--color-border-main);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-detail-point-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.p-detail-point-card__num {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-secondary, #ebf075);
  background-color: var(--color-primary);
  width: fit-content;
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: var(--space-sm);
}

@media (max-width: 768px) {
  .p-detail-point-card__num {
    font-size: 14px;
  }
}

.p-detail-point-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .p-detail-point-card__title {
    font-size: 16px;
  }
}

.p-detail-point-card__text {
  font-size: 16px;
  color: var(--color-text-main);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .p-detail-point-card__text {
    font-size: 14px;
  }
}

/* 詳細スペック ＆ キーワード */
.p-detail-info-section {
  margin-bottom: var(--space-xl);
}

@media (max-width: 768px) {
  .p-detail-info-section {
    margin-bottom: var(--space-lg);
  }
}

.p-detail-info-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .p-detail-info-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.p-detail-spec-card,
.p-detail-keyword-card {
  background-color: #ffffff;
  border: 1px solid var(--color-border-main);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
  .p-detail-spec-card,
.p-detail-keyword-card {
    padding: 16px;
  }
}

.p-detail-spec-table {
  width: 100%;
  margin-bottom: 0 !important;
}

.p-detail-spec-table th, .p-detail-spec-table td {
  padding: 16px 0 !important;
}

.p-detail-spec-table th {
  width: 140px !important;
}

@media (max-width: 768px) {
  .p-detail-spec-table tr {
    display: table-row !important;
  }
  .p-detail-spec-table th, .p-detail-spec-table td {
    display: table-cell !important;
    padding: 8px 0 !important;
    font-size: 14px;
    border-bottom: 1px solid var(--color-border-main) !important;
    vertical-align: middle !important;
  }
  .p-detail-spec-table th {
    width: 120px !important;
    white-space: nowrap;
    padding-right: 10px !important;
  }
  .p-detail-spec-table tr:last-child th,
.p-detail-spec-table tr:last-child td {
    border-bottom: none !important;
  }
}

.p-detail-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.p-detail-keywords .c-card__tag {
  font-size: 16px;
  padding: 8px 16px;
  cursor: default;
  background-color: #f0f4f8;
  color: var(--color-primary);
  border: none;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.p-detail-keywords .c-card__tag:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

@media (max-width: 768px) {
  .p-detail-keywords .c-card__tag {
    font-size: 14px;
    padding: 6px 12px;
  }
}

/* フォトギャラリー */
.p-detail-gallery-section {
  margin-bottom: var(--space-xl);
}

.p-detail-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .p-detail-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .p-detail-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}

.p-detail-gallery__item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  background-color: #000000;
  /* キャプション非表示（ライトボックス側でのみ表示） */
}

.p-detail-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.p-detail-gallery__item:hover img {
  transform: scale(1.05);
}

.p-detail-gallery__item .p-detail-gallery__caption {
  display: none;
}

/* OB見学会 予約CTAセクション */
.p-detail-tour-cta {
  margin-top: var(--space-xl);
  text-align: center;
}

.p-detail-tour-cta__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-detail-tour-cta__btn {
  background-color: #2e63b5;
  color: #ffffff;
  border: 2px solid #2e63b5;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 48px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(46, 99, 181, 0.25);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  line-height: 1.5;
}

.p-detail-tour-cta__btn:hover {
  background-color: #234e93;
  border-color: #234e93;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 99, 181, 0.35);
}

@media (max-width: 768px) {
  .p-detail-tour-cta__btn {
    font-size: 16px;
    padding: 14px 28px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* 前後ナビゲーション */
.p-detail-nav {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-border-main);
  padding-top: var(--space-xl);
}

.p-detail-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .p-detail-nav__inner {
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
  }
}

.p-detail-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 30px;
  transition: all 0.3s ease;
  min-width: 180px;
  text-align: center;
}

.p-detail-nav__btn:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 76, 156, 0.15);
}

@media (max-width: 768px) {
  .p-detail-nav__btn {
    width: 100%;
    font-size: 14px;
    padding: 10px 20px;
  }
}

.p-detail-nav__btn--list {
  background-color: var(--color-primary);
  color: #ffffff;
}

.p-detail-nav__btn--list:hover {
  background-color: #ffffff;
  color: var(--color-primary);
}

/* ライトボックス */
.c-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.c-lightbox.is-active {
  opacity: 1;
  pointer-events: auto;
}

.c-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 10010;
  padding: 8px;
}

.c-lightbox__close:hover {
  transform: scale(1.1);
  color: #ebf075;
}

@media (max-width: 768px) {
  .c-lightbox__close {
    top: 16px;
    right: 16px;
    font-size: 32px;
  }
}

.c-lightbox__prev,
.c-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  user-select: none;
}

.c-lightbox__prev:hover,
.c-lightbox__next:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 76, 156, 0.3);
}

@media (max-width: 768px) {
  .c-lightbox__prev,
.c-lightbox__next {
    width: 44px;
    height: 44px;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.5);
  }
}

.c-lightbox__prev {
  left: 24px;
}

@media (max-width: 768px) {
  .c-lightbox__prev {
    left: 8px;
  }
}

.c-lightbox__next {
  right: 24px;
}

@media (max-width: 768px) {
  .c-lightbox__next {
    right: 8px;
  }
}

.c-lightbox__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 80%;
  max-height: 80%;
}

@media (max-width: 768px) {
  .c-lightbox__content {
    max-width: 90%;
    max-height: 70%;
  }
}

.c-lightbox__image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: lightboxZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  .c-lightbox__image {
    max-height: 60vh;
  }
}

@keyframes lightboxZoomIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.c-lightbox__caption {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 0;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
  .c-lightbox__caption {
    font-size: 14px;
    margin-top: 12px;
  }
}

/* 運営会社紹介ページ固有のレイアウト */
.p-company-grid {
  margin-top: var(--space-xl);
  align-items: center;
}

.p-company-explain {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.p-company-signature {
  text-align: left;
  font-weight: 700;
  margin-top: var(--space-md);
}

/* ==========================================================================
   校正デザインに基づく装飾復元 (黄色い斜め背景・見出しスラッシュ・CONTACTセクション)
   ========================================================================== */
/* 1. 背景の黄色い半透明の斜めストライプ装飾 */
main {
  position: relative;
  overflow: hidden;
  /* 左右・上下のはみ出しをメイン領域内にクリップ */
}

main::before,
main::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 3000px;
  background-color: rgba(250, 204, 21, 0.06);
  /* 透過度約6%の黄色 */
  z-index: -2;
  /* 他の要素の背後に配置 */
  pointer-events: none;
  transform: rotate(-30deg);
}

main::before {
  top: 2%;
  left: -150px;
  transform-origin: top left;
}

main::after {
  top: 35%;
  right: -200px;
  width: 350px;
  transform-origin: top right;
}

/* 2. 各セクション見出し(h2)の共通サブタイトル */
.c-section-subtitle {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a !important;
  /* プライマリーカラーからグレーに変更 */
  letter-spacing: var(--letter-spacing-eng, 0.1em);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-family: var(--font-family-base, "Zen Kaku Gothic New", sans-serif);
}

/* 3. H2タイトル左の黄色い傾斜スラッシュ */
.p-event-section__title {
  position: relative;
  padding-left: 0;
  /* 左余白を解除し、英字と左揃えに */
  font-weight: 900;
  color: var(--color-primary);
  z-index: 1;
  /* スラッシュの上にテキストを表示 */
}

.p-event-section__title::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -25px;
  width: 14px;
  /* 幅を細く */
  height: 110px;
  /* 長さを調整 */
  background-color: #ebf075;
  transform: skewX(-35deg);
  /* 傾斜を強く */
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .p-event-section__title::before {
    top: -10px;
    left: -20px;
    width: 10px;
    /* SP版も細く */
    height: 90px;
    transform: skewX(-35deg);
    /* SP版も傾斜を強く */
  }
}

/* 4. CONTACT (CTA) セクションの復元 */
.p-cta-section {
  position: relative;
  background-image: url("../img/house1.jpg");
  /* 住宅外観画像を背景に設定 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  text-align: center;
  /* 親要素で中央揃えを指定 */
  /* 内部コンテンツのリセット（背景カード型を廃止） */
  /* お問い合わせボタンの青色・カプセル型 */
}

.p-cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 76, 156, 0.85) 0%, rgba(18, 18, 91, 0.85) 100%);
  z-index: -1;
}

.p-cta-section .p-cta-section .c-cta {
  text-align: center;
  color: #ffffff;
  background-color: transparent;
  border-radius: 0;
  padding: 0 var(--container-padding);
  /* 左右にコンテナ標準余白を適用し、l-containerの余白を維持 */
}

.p-cta-section .p-cta-section__title {
  color: #ffffff !important;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
  text-align: center;
}

.p-cta-section .p-cta-section__lead {
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.85;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.p-cta-section .p-cta-section__action {
  display: flex;
  justify-content: center;
}

.p-cta-section .p-cta-section__action .c-btn {
  background-color: #ebf075 !important;
  /* 通常時：黄色背景 */
  color: var(--color-primary) !important;
  /* 通常時：青文字 */
  border-color: #ebf075 !important;
  border-radius: 9999px !important;
  /* 丸角カプセル */
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(235, 240, 117, 0.2);
}

.p-cta-section .p-cta-section__action .c-btn:hover {
  background-color: #ffffff !important;
  /* ホバー時：白背景 */
  color: var(--color-primary) !important;
  /* ホバー時：青文字 */
  border-color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.p-cta-section .p-cta-section__action .c-btn:hover .c-btn__arrow {
  color: var(--color-primary) !important;
  /* ホバー時：青矢印 */
}

.p-cta-section .p-cta-section__action .c-btn .c-btn__arrow {
  color: var(--color-primary) !important;
  /* 通常時：青矢印 */
}

@media (max-width: 768px) {
  .p-cta-section .c-cta {
    padding: 0 var(--container-padding) !important;
    /* SP版の基準余白30pxを強制適用 */
  }
  .p-cta-section {
    padding-top: var(--space-section) !important;
    padding-bottom: var(--space-section) !important;
    /* SP用：左右余白30pxのコンテンツ幅に揃えた100%幅ボタン */
  }
  .p-cta-section .c-cta {
    padding: 0;
  }
  .p-cta-section .p-cta-section__title {
    font-size: 40px !important;
    letter-spacing: 0.12em !important;
  }
  .p-cta-section .p-cta-section__lead {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: var(--space-xl) !important;
  }
  .p-cta-section .p-cta-section__action .c-btn {
    display: block !important;
    /* blockに変更して子要素のbrタグによる改行を有効化 */
    width: 100% !important;
    /* 基準余白が30pxになったため、100%幅でコンテンツ幅いっぱいに綺麗に収める */
    max-width: none !important;
    font-size: 18px !important;
    padding: 16px 44px 16px 20px !important;
    /* 矢印とのバランスを考慮したインナー余白 */
    margin: 0 auto;
    letter-spacing: 0.02em !important;
    position: relative;
    white-space: normal !important;
    /* 2行改行を許可 */
    line-height: 1.4 !important;
    /* 2行表示用の適切な行高 */
  }
  .p-cta-section .p-cta-section__action .c-btn .c-btn__arrow {
    position: absolute;
    right: 20px;
    /* 右端に適切に配置 */
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  .p-cta-section .p-cta-section__action .c-btn:hover .c-btn__arrow {
    transform: translate(4px, -50%);
  }
}

/* ==========================================================================
   会社概要ページ固有レイアウト ＆ 見出しデザイン
   ========================================================================== */
/* 会社概要ページ全体のメインコンテナ（不要な全体背景の無効化） */
.p-company-main::before, .p-company-main::after {
  display: none !important;
}

/* 会社概要ページ全体セクション */
.p-company-message-section {
  background-color: #ffffff;
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* トップページのソートセクションと同様の黄色い斜め背景を移植（右側のみ残し、左側は削除） */
}

@media (max-width: 768px) {
  .p-company-message-section {
    padding-top: 24px;
    /* パンくず背景最下部からh2までのアキを縮小 */
    padding-bottom: 40px;
  }
}

.p-company-message-section::after {
  content: "";
  position: absolute;
  bottom: 0%;
  right: 3%;
  width: 140px;
  height: 600px;
  background-color: #ebf075;
  opacity: 0.3;
  transform: skewX(-35deg);
  z-index: -1;
  pointer-events: none;
}

/* 1. 代表メッセージ見出し(h2)の青文字・長い下線デザイン */
.p-company-message-block h2 {
  color: var(--color-primary) !important;
  /* テキストカラーを濃い青に */
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-primary);
  /* 下部の太い横線 */
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .p-company-message-block h2 {
    font-size: 20px;
    /* サブヒーロー（24px）より小さくしてサイズ差（強弱）をつける */
    padding-bottom: 12px;
    margin-bottom: 24px;
  }
}

/* 2. 会社概要カード見出し(h2)の中央寄せ・短い下線デザイン */
.p-company-profile-card h2 {
  color: var(--color-primary) !important;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-company-profile-card h2::after {
  content: '';
  display: block;
  width: 40px;
  /* 短いライン幅 */
  height: 3px;
  /* ライン太さ */
  background-color: var(--color-primary);
  margin-top: 12px;
  /* 文字との隙間 */
}

@media (max-width: 768px) {
  .p-company-profile-card h2 {
    font-size: 24px;
    margin-bottom: 32px;
  }
  .p-company-profile-card h2::after {
    width: 30px;
    height: 2px;
    margin-top: 8px;
  }
}

/* 2. 代表メッセージ2カラムレイアウト */
.p-company-message-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
  margin-top: 20px;
}

@media (max-width: 768px) {
  .p-company-message-container {
    flex-direction: column;
    /* 元の順序（メッセージが上、写真が下）に戻す */
    gap: var(--space-lg);
  }
}

.p-company-message-block {
  flex: 1;
  min-width: 0;
}

.p-company-message {
  /* スマホ版でのメッセージテキストのフォントサイズを16pxへ調整 */
}

@media (max-width: 768px) {
  .p-company-message {
    font-size: 16px;
  }
}

.p-company-photo {
  flex: 0 0 340px;
  /* 写真の横幅を固定 */
  border-radius: var(--radius-systemic);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* 柔らかなシャドウ */
}

.p-company-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  /* PC版: 縦長比率(3:4)で表示し、メッセージブロックと高さを揃える */
  object-fit: cover;
  /* 横長画像を縦長枠に合わせてトリミング */
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  .p-company-photo {
    flex: none;
    width: 100%;
    /* スマホ時は幅100% */
  }
  .p-company-photo img {
    aspect-ratio: 4 / 3;
    /* SP版: イベントセクションと同じバナー比率(4:3)に変更 */
    height: auto;
  }
}

/* 3. 会社概要カード */
@media (max-width: 768px) {
  .p-company-profile-section .l-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.p-company-profile-card {
  background-color: var(--color-bg-white);
  border-radius: 16px;
  padding: 48px;
  border: 1px solid var(--color-border-main);
  box-shadow: 0 12px 40px rgba(18, 18, 91, 0.04);
  margin-top: 40px;
}

@media (max-width: 768px) {
  .p-company-profile-card {
    padding: 30px;
  }
}

.p-company-profile-table {
  width: 100%;
  border-collapse: collapse;
}

.p-company-profile-table th,
.p-company-profile-table td {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-main);
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
}

.p-company-profile-table th {
  width: 200px;
  font-weight: 700;
  color: var(--color-primary);
  /* 項目名はブランド青で表示 */
  vertical-align: top;
}

.p-company-profile-table td {
  color: var(--color-text-main);
}

.p-company-profile-table tr:last-child th,
.p-company-profile-table tr:last-child td {
  border-bottom: none;
  padding-bottom: 0;
  /* 下側アキをカードのpadding-bottomと揃えるために0にする */
}

@media (max-width: 768px) {
  .p-company-profile-table th,
.p-company-profile-table td {
    padding: 0;
    /* セル自体のパディングを解除 */
    font-size: 16px;
    /* 文字が小さすぎないよう16pxに維持 */
    border-bottom: none;
    /* セルのボーダーを解除して2重線を解消 */
  }
  .p-company-profile-table tr {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    /* tr単位で余白をしっかり確保 */
    border-bottom: 1px solid var(--color-border-main);
  }
  .p-company-profile-table th {
    width: 100%;
    padding-bottom: 8px;
    /* 項目名と値の間の余白 */
    color: var(--color-primary);
    font-weight: 700;
  }
  .p-company-profile-table td {
    width: 100%;
    padding-top: 0;
    color: var(--color-text-main);
  }
  .p-company-profile-table tr:last-child {
    border-bottom: none;
    padding-bottom: 0;
    /* 下側アキをカードのpadding-bottomと揃えるために0にする */
  }
}

/* ==========================================================================
   住宅図鑑とはセクション
   ========================================================================== */
.p-about-intro-section {
  background-color: #eceef7;
  /* 見本の薄いブルーグレー背景 */
  padding-top: 80px;
  padding-bottom: 100px;
  /* 画像の飛び出し・ズレを考慮して下部に余裕を持たせる */
  /* 左カラム：画像ギャラリー */
  /* 右カラム：テキスト */
}

.p-about-intro-section .p-about-intro-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.p-about-intro-section .p-about-intro-images {
  flex: 0 0 48%;
  /* 幅約半分 */
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.p-about-intro-section .p-about-intro-image-wrapper {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  /* 2枚目の画像を下にずらす配置デザイン */
}

.p-about-intro-section .p-about-intro-image-wrapper img {
  width: 100%;
  aspect-ratio: 1 / 2;
  /* 縦長比率を1:2に変更し見切れを防止 */
  object-fit: cover;
  display: block;
}

.p-about-intro-section .p-about-intro-image-wrapper:nth-child(2) {
  margin-top: 40px;
}

.p-about-intro-section .p-about-intro-content {
  flex: 0 0 48%;
  text-align: left;
}

.p-about-intro-section .p-about-intro-content .c-section-subtitle {
  text-align: left;
  margin-bottom: 12px;
}

.p-about-intro-section .p-about-intro-title {
  color: var(--color-primary) !important;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-primary);
  /* 見本の下線 */
  margin-bottom: 32px;
  display: block;
}

.p-about-intro-section .p-about-intro-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-main);
}

.p-about-intro-section .p-about-intro-text p {
  margin: 0;
}

@media (max-width: 992px) {
  .p-about-intro-section .p-about-intro-container {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .p-about-intro-section {
    padding-top: 50px;
    padding-bottom: 60px;
  }
  .p-about-intro-section .p-about-intro-container {
    flex-direction: column;
    gap: 40px;
  }
  .p-about-intro-section .p-about-intro-images {
    flex: none;
    width: 100%;
    gap: 16px;
  }
  .p-about-intro-section .p-about-intro-image-wrapper:nth-child(2) {
    margin-top: 24px;
  }
  .p-about-intro-section .p-about-intro-content {
    flex: none;
    width: 100%;
  }
  .p-about-intro-section .p-about-intro-title {
    font-size: 22px;
    padding-bottom: 12px;
    margin-bottom: 20px;
  }
  .p-about-intro-section .p-about-intro-text {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* 運営会社セクションヘッダー */
.p-company-section-header {
  text-align: center;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-company-section-header .c-section-subtitle {
  margin-bottom: 8px;
}

.p-company-section-title {
  color: var(--color-primary) !important;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}

.p-company-section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--color-primary);
  margin-top: 12px;
}

@media (max-width: 768px) {
  .p-company-section-title {
    font-size: 24px;
  }
  .p-company-section-title::after {
    width: 30px;
    height: 2px;
    margin-top: 8px;
  }
}

/* ==========================================================================
   住まいのコラム (Column Features) 追加スタイル
   ========================================================================== */
/* 1. トップページ コラムセクション */
.p-home-column-section {
  background-color: var(--color-bg-white);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

@media (max-width: 768px) {
  .p-home-column-section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
}

.p-home-column-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.p-home-column-header .c-section-subtitle {
  margin-bottom: 8px;
}

.p-home-column-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  text-align: center;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .p-home-column-title {
    font-size: 24px;
  }
}

.p-home-column-lead {
  font-size: 16px;
  color: var(--color-text-main);
  margin-top: 12px;
}

@media (max-width: 768px) {
  .p-home-column-lead {
    font-size: 14px;
  }
}

.p-home-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 1024px) {
  .p-home-column-grid {
    gap: var(--space-md);
  }
}

@media (max-width: 768px) {
  .p-home-column-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.p-home-column-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--color-border-main);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: var(--color-text-main);
}

.p-home-column-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.p-home-column-card:hover .p-home-column-card__title {
  color: var(--color-primary);
}

.p-home-column-card__img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.p-home-column-card__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.p-home-column-card__img-wrapper:hover img {
  transform: scale(1.05);
}

.p-home-column-card__content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.p-home-column-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.p-home-column-card__date {
  font-size: 14px;
  color: #1a1a1a;
  font-family: var(--font-family-base, sans-serif);
}

.p-home-column-card__tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background-color: #ffffff;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1;
}

.p-home-column-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: var(--space-xs);
  color: var(--color-text-main);
  transition: color 0.3s ease;
}

@media (max-width: 768px) {
  .p-home-column-card__title {
    font-size: 16px;
  }
}

.p-home-column-card__desc {
  font-size: 14px;
  color: var(--color-text-main);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-home-column-btn-wrapper {
  text-align: center;
  margin-top: var(--space-lg);
}

/* 2. コラム一覧ページ */
.p-column-main {
  background-color: #f8fafc;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
}

@media (max-width: 768px) {
  .p-column-main {
    padding-bottom: var(--space-lg);
  }
}

.p-sort-ui__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  width: 100%;
}

@media (max-width: 768px) {
  .p-sort-ui__btns {
    gap: 8px 12px;
  }
}

.p-column-sort-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  background-color: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: 9999px;
  padding: 8px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1.2;
}

.p-column-sort-btn:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

.p-column-sort-btn.p-column-sort-btn--active {
  background-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 76, 156, 0.2);
}

@media (max-width: 768px) {
  .p-column-sort-btn {
    font-size: 14px;
    padding: 6px 16px;
  }
}

.p-column-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 1024px) {
  .p-column-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 768px) {
  .p-column-list {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.p-column-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--color-border-main);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: var(--color-text-main);
}

.p-column-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.p-column-card:hover .p-column-card__title {
  color: var(--color-primary);
}

.p-column-card__img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.p-column-card__img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.p-column-card__img-wrapper:hover img {
  transform: scale(1.05);
}

.p-column-card__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.p-column-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
}

.p-column-card__date {
  font-size: 14px;
  color: #1a1a1a;
}

.p-column-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.p-column-card__tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background-color: #f0f4f8;
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1;
}

.p-column-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--space-xs);
  color: var(--color-text-main);
  transition: color 0.3s ease;
}

@media (max-width: 768px) {
  .p-column-card__title {
    font-size: 17px;
  }
}

.p-column-card__desc {
  font-size: 14px;
  color: var(--color-text-main);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 3. コラム詳細ページ */
.p-column-detail-main {
  background-color: #f8fafc;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
}

@media (max-width: 768px) {
  .p-column-detail-main {
    padding-bottom: var(--space-lg);
  }
}

.p-column-detail-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
}

@media (max-width: 1024px) {
  .p-column-detail-grid {
    grid-template-columns: 1fr 300px;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .p-column-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* 記事本文エリア */
.p-column-article {
  background-color: #ffffff;
  border: 1px solid var(--color-border-main);
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
  .p-column-article {
    padding: 24px 20px;
    border-radius: 12px;
  }
}

.p-column-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.p-column-article__tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  background-color: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: 9999px;
  padding: 4px 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.3s ease;
}

.p-column-article__tag:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

@media (max-width: 768px) {
  .p-column-article__tag {
    font-size: 12px;
    padding: 3px 10px;
  }
}

.p-column-article__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

@media (max-width: 768px) {
  .p-column-article__title {
    font-size: 22px;
  }
}

.p-column-article__meta {
  display: flex;
  gap: var(--space-md);
  border-bottom: 2px solid var(--color-border-main);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
}

@media (max-width: 768px) {
  .p-column-article__meta {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

.p-column-article__date {
  font-size: 14px;
  color: #1a1a1a;
}

.p-column-article__body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-main);
}

.p-column-article__body p {
  margin-bottom: var(--space-md);
}

.p-column-article__body h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 40px;
  margin-bottom: var(--space-sm);
  padding-bottom: 12px;
  border-bottom: 2px dotted var(--color-primary);
}

@media (max-width: 768px) {
  .p-column-article__body h2 {
    font-size: 20px;
    margin-top: 30px;
  }
}

.p-column-article__body h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 32px;
  margin-bottom: var(--space-xs);
  padding-left: 12px;
  border-left: 4px solid var(--color-primary);
}

@media (max-width: 768px) {
  .p-column-article__body h3 {
    font-size: 18px;
  }
}

.p-column-article__body h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-top: 24px;
  margin-bottom: var(--space-xs);
}

.p-column-article__body ul {
  margin-bottom: var(--space-md);
  padding-left: 20px;
}

.p-column-article__body ul li {
  margin-bottom: 8px;
  list-style-type: disc;
}

.p-column-article__body strong {
  font-weight: 700;
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .p-column-article__body {
    font-size: 14px;
    line-height: 1.7;
  }
}

.p-column-article__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-border-main);
  padding-top: var(--space-lg);
  gap: var(--space-sm);
}

@media (max-width: 768px) {
  .p-column-article__nav {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

.p-column-article__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 24px;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 140px;
}

.p-column-article__nav-btn:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

.p-column-article__nav-btn.p-column-article__nav-btn--list {
  background-color: var(--color-primary);
  color: #ffffff;
}

.p-column-article__nav-btn.p-column-article__nav-btn--list:hover {
  background-color: #ffffff;
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .p-column-article__nav-btn {
    width: 100%;
    font-size: 14px;
    padding: 8px 16px;
  }
}

/* 右カラム：サイドバー */
.p-column-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.p-column-sidebar__widget {
  background-color: #ffffff;
  border: 1px solid var(--color-border-main);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.02);
}

.p-column-sidebar__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 8px;
  margin-bottom: var(--space-md);
  position: relative;
}

.p-column-sidebar__posts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-column-sidebar-post {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: var(--color-text-main);
  transition: opacity 0.3s ease;
}

.p-column-sidebar-post:hover {
  opacity: 0.8;
}

.p-column-sidebar-post__img {
  width: 90px;
  height: 68px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.p-column-sidebar-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-column-sidebar-post__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.p-column-sidebar-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.p-column-sidebar-post__tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
  background-color: #f0f4f8;
  border-radius: 3px;
  padding: 1px 6px;
  line-height: 1;
}

.p-column-sidebar-post__date {
  font-size: 11px;
  color: #1a1a1a;
  margin-top: 2px;
}

.p-column-sidebar-post__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-column-sidebar__categories {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.p-column-sidebar__categories li {
  border-bottom: 1px solid var(--color-border-main);
  list-style: none;
}

.p-column-sidebar__categories li:last-child {
  border-bottom: none;
}

.p-column-sidebar__categories li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.p-column-sidebar__categories li a span {
  color: var(--color-primary);
  transition: transform 0.3s ease;
}

.p-column-sidebar__categories li a:hover {
  opacity: 0.7;
  padding-left: 4px;
}

.p-column-sidebar__categories li a:hover span {
  transform: translateX(4px);
}