/*
Theme Name:  SERUM Child
Theme URI:   https://asc-c.com/
Description: アスクコーポレーション用子テーマ（TCD SERUM / TCD096）
Author:      DOR Marketing
Template:    serum_tcd096
Version:     0.9.9-alpha
*/

/* ============================================================
   CSS Variables — Natural Corporate カラーセット
   ============================================================ */
:root {
  /* Base */
  --color-bg:           #f5f7f6;  /* コーポレートカラー */
  --color-bg-soft:      #eaeeeb;  /* セクション背景 */
  --color-border:       #dde4df;  /* ボーダー・区切り */
  --color-white:        #ffffff;  /* カード背景 */

  /* Accent */
  --color-accent:       #7a9e85;  /* メインアクセント */
  --color-accent-light: #a8c4ae;  /* ホバー・薄めアクセント */
  --color-accent-deep:  #5a7a65;  /* 強調・ボタンhover */
  --color-accent-pale:  #c8deca;  /* バッジ・タグ背景 */

  /* Text */
  --color-text:         #2c3530;  /* 見出し・メイン */
  --color-text-sub:     #5a6b60;  /* 本文テキスト */
  --color-text-muted:   #8fa494;  /* 補足・placeholder */
  --color-text-faint:   #b8c8bc;  /* キャプション・ミュート */
}

/* ============================================================
   共通：CPT詳細ページ（.cpt-single）
   single-bukken.php / single-works.php 両方に適用
   ============================================================ */

.cpt-single {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* ---------- ヘッダー ---------- */
.cpt-header {
  margin-bottom: 32px;
}
.cpt-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.4;
}
.cpt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cpt-tag {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 2px;
}
.cpt-sub-meta {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---------- メイン画像 ---------- */
.cpt-main-image {
  margin-bottom: 40px;
}
.cpt-main-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- セクション共通 ---------- */
.cpt-section-title {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--color-text);
  border-left: 4px solid var(--color-accent);
  padding-left: 10px;
  margin: 0 0 20px;
}

/* ---------- 情報テーブル ---------- */
.cpt-info {
  margin-bottom: 48px;
}
.cpt-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-bottom: 24px;
}
.cpt-info-table th,
.cpt-info-table td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  color: var(--color-text-sub);
}
.cpt-info-table th {
  width: 30%;
  background: var(--color-bg-soft);
  font-weight: bold;
  color: var(--color-text);
  white-space: nowrap;
}

/* ---------- ポイント ---------- */
.cpt-point {
  margin-top: 32px;
}
.cpt-point-body {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--color-text-sub);
}

/* ---------- 地図・図面 ---------- */
.cpt-maps {
  margin-bottom: 48px;
}
.cpt-maps-block {
  margin-bottom: 32px;
}
.cpt-maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.cpt-maps-item img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s;
}
.cpt-maps-item img:hover { opacity: 0.85; }

/* ---------- ギャラリー ---------- */
.cpt-gallery {
  margin-bottom: 48px;
}
.cpt-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.cpt-gallery-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s;
}
.cpt-gallery-item img:hover { opacity: 0.85; }

/* ---------- CTA ---------- */
.cpt-cta {
  background: var(--color-bg-soft);
  border-radius: 6px;
  padding: 40px 24px;
  text-align: center;
}
.cpt-cta-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-text);
  margin-bottom: 12px;
}
.cpt-cta-text {
  font-size: 0.9rem;
  color: var(--color-text-sub);
  margin-bottom: 24px;
}
.cpt-cta-btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: bold;
  padding: 14px 40px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s;
}
.cpt-cta-btn:hover {
  background: var(--color-accent-deep);
  color: var(--color-white);
}

/* ---------- 画像モーダル ---------- */
.cpt-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.cpt-modal[aria-hidden="false"] {
  display: block;
}
.cpt-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 53, 48, 0.88);
  cursor: pointer;
}
.cpt-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
}
.cpt-modal-image {
  max-width: 90vw;
  max-height: 85vh;
  display: block;
  border-radius: 2px;
}
.cpt-modal-close {
  position: absolute;
  top: -36px;
  right: 0;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* ============================================================
   共通：CPT一覧ページ（.cpt-archive）
   archive-bukken.php / archive-works.php 両方に適用
   ============================================================ */

.cpt-archive {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* ---------- アーカイブヘッダー ---------- */
.cpt-archive-header {
  margin-bottom: 36px;
}
.cpt-archive-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 12px;
}

/* ---------- フィルタ ---------- */
.cpt-filter {
  margin-bottom: 32px;
}
.cpt-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cpt-filter-list li a {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--color-accent-light);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--color-accent-deep);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cpt-filter-list li a:hover,
.cpt-filter-list li.is-active a {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ---------- 一覧グリッド ---------- */
.cpt-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------- カード ---------- */
.cpt-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.cpt-item:hover {
  box-shadow: 0 4px 16px rgba(44, 53, 48, 0.10);
  transform: translateY(-2px);
}
.cpt-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ---------- サムネイル ---------- */
.cpt-thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-bg-soft);
}
.cpt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.cpt-item:hover .cpt-thumb img {
  transform: scale(1.04);
}

/* ---------- テキスト本体 ---------- */
.cpt-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.cpt-item-title {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
  color: var(--color-text);
}
.cpt-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cpt-item-tag {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 2px;
}
.cpt-item-pref {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.cpt-item-meta {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--color-bg-soft);
}
.cpt-item-rent,
.cpt-item-construction {
  font-size: 0.85rem;
  color: var(--color-text-sub);
  margin: 0;
}

/* ---------- ページネーション ---------- */
.cpt-pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.cpt-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  margin: 0 3px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--color-text-sub);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cpt-pagination .page-numbers:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.cpt-pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  font-weight: bold;
}

/* ---------- 空結果 ---------- */
.cpt-no-result {
  text-align: center;
  padding: 60px 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width: 900px) {
  .cpt-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media screen and (max-width: 768px) {
  .cpt-title { font-size: 1.4rem; }
  .cpt-info-table th { width: 38%; }
  .cpt-maps-grid,
  .cpt-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .cpt-cta-btn { padding: 12px 28px; font-size: 0.95rem; }
}
@media screen and (max-width: 540px) {
  .cpt-list {
    grid-template-columns: 1fr;
  }
  .cpt-archive-title { font-size: 1.3rem; }
}

/* ============================================================
   新着物件スライダー（[bukken_slider]ショートコード）
   ============================================================ */

.bukken-slider {
  width: 100%;
  overflow: hidden;
  padding-bottom: 40px !important; /* ページネーション分 */
  position: relative;
}

/* スライド */
.bukken-slide {
  height: auto;
}
.bukken-slide-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.bukken-slide-link:hover {
  box-shadow: 0 4px 16px rgba(44, 53, 48, 0.10);
  transform: translateY(-2px);
  color: inherit;
}

/* サムネイル */
.bukken-slide-thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-bg-soft);
}
.bukken-slide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.bukken-slide-link:hover .bukken-slide-thumb img {
  transform: scale(1.04);
}

/* テキスト */
.bukken-slide-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.bukken-slide-title {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
  color: var(--color-text);
}
.bukken-slide-pref {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.bukken-slide-rent {
  font-size: 0.85rem;
  color: var(--color-text-sub);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--color-bg-soft);
}

/* ナビゲーション矢印 */
.bukken-slider .swiper-button-prev,
.bukken-slider .swiper-button-next {
  color: var(--color-accent);
  top: 35%;
}
.bukken-slider .swiper-button-prev::after,
.bukken-slider .swiper-button-next::after {
  font-size: 1.2rem;
  font-weight: bold;
}

/* ページネーション */
.bukken-slider .swiper-pagination-bullet {
  background: var(--color-accent-light);
  opacity: 1;
}
.bukken-slider .swiper-pagination-bullet-active {
  background: var(--color-accent);
}

/* ============================================================
   固定ページ共通CSS  asc-pages.css
   対象: /support/ , /to-owner/ , /about/
   カラーはCSSカスタムプロパティ（子テーマ style.css の :root に依存）
   ============================================================ */

/* ──────────────────────────────────────────────
   スコープ・ラッパー
────────────────────────────────────────────── */
.asc-scope {
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

.asc-wrap {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ──────────────────────────────────────────────
   セクション共通
────────────────────────────────────────────── */
.asc-section {
  margin-bottom: 56px;
}
.asc-section:last-child {
  margin-bottom: 0;
}

/* ──────────────────────────────────────────────
   セクション見出し（.asc-head）
────────────────────────────────────────────── */
.asc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.asc-head__bar {
  display: block;
  width: 3px;
  height: 1.6em;
  background: var(--color-accent, #7a9e85);
  border-radius: 2px;
  flex-shrink: 0;
}

.asc-catch {
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--color-text, #2c3530);
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0.04em;
}

/* ──────────────────────────────────────────────
   リード文（.asc-lead）
────────────────────────────────────────────── */
.asc-lead {
  font-size: 0.95rem;
  color: var(--color-text-sub, #5a6b60);
  line-height: 2;
  margin-bottom: 28px;
}
.asc-lead:last-child {
  margin-bottom: 0;
}

/* ──────────────────────────────────────────────
   サービスグリッド（.asc-services）
────────────────────────────────────────────── */
.asc-services.is-padtop {
  padding-top: 8px;
}

.asc-service-grid {
  display: grid;
  gap: 16px;
}

/* 4固定列 */
.asc-services--fixed4 .asc-service-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* 自動フィット（3列など可変） */
.asc-services--autofit .asc-service-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* サービスカード */
.asc-service {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #dde4df);
  border-radius: 6px;
  padding: 24px 16px 20px;
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}
.asc-service:hover {
  box-shadow: 0 4px 16px rgba(44, 53, 48, 0.08);
  transform: translateY(-2px);
}

.asc-service__icon {
  width: 52px;
  height: 52px;
  line-height: 52px;
  border-radius: 50%;
  background: var(--color-accent-pale, #c8deca);
  color: var(--color-accent-deep, #5a7a65);
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 auto 14px;
  text-align: center;
}

.asc-service__title {
  font-size: 0.88rem;
  color: var(--color-text, #2c3530);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
}

/* ──────────────────────────────────────────────
   区切り線（.asc-divider）
────────────────────────────────────────────── */
.asc-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--color-border, #dde4df), transparent);
  margin-block: 48px;
}

/* ──────────────────────────────────────────────
   縦積みセクション（.asc-stack）
────────────────────────────────────────────── */
.asc-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ──────────────────────────────────────────────
   本文カード（.asc-card）  ※support のみ
────────────────────────────────────────────── */
.asc-card {
  background: var(--color-bg-soft, #eaeeeb);
  border-radius: 6px;
  padding: 28px 32px;
}

.asc-desc {
  font-size: 0.92rem;
  color: var(--color-text-sub, #5a6b60);
  line-height: 2;
  margin: 0;
}

/* ──────────────────────────────────────────────
   募集地域リスト（.asc-list）  ※to-owner のみ
────────────────────────────────────────────── */
.asc-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border, #dde4df);
}

.asc-item {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--color-border, #dde4df);
  transition: background 0.15s;
}
.asc-item:hover {
  background: var(--color-bg-soft, #eaeeeb);
}

.asc-item__area {
  flex: 1;
  font-size: 0.95rem;
  color: var(--color-text, #2c3530);
  font-weight: 500;
  line-height: 1.6;
}

.asc-item__size {
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted, #8fa494);
  white-space: nowrap;
}

/* ──────────────────────────────────────────────
   CTAボタン（.ask-link）
   ※ TCDテーマの .design_button を流用しつつ位置調整
────────────────────────────────────────────── */
.ask-link {
  text-align: center;
  padding-top: 8px;
}

.ask-link .link_button {
  display: inline-block;
}

/* design_button はTCDテーマ側で描画されるので色のみ上書き */
.ask-link .design_button.cta_contact {
  min-width: 220px;
  text-align: center;
}

/* ──────────────────────────────────────────────
   レスポンシブ
────────────────────────────────────────────── */
@media screen and (max-width: 760px) {
  .asc-wrap {
    padding-block: 40px 60px;
  }

  /* 4列 → 2列 */
  .asc-services--fixed4 .asc-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .asc-catch {
    font-size: 1.15rem;
  }

  .asc-card {
    padding: 20px 20px;
  }

  .asc-item {
    flex-direction: column;
    gap: 4px;
  }

  .asc-item__size {
    white-space: normal;
  }
}

@media screen and (max-width: 480px) {
  /* 4列 → 1列 */
  .asc-services--fixed4 .asc-service-grid,
  .asc-services--autofit .asc-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ──────────────────────────────────────────────
   会社概要テーブル（.asc-table）  ※about のみ
────────────────────────────────────────────── */
.asc-table {
  display: grid;
  grid-template-columns: 10em 1fr;
  margin: 0;
  border-top: 1px solid var(--color-border, #dde4df);
}

.asc-table dt,
.asc-table dd {
  padding: 14px 16px;
/*   border-bottom: 1px solid var(--color-border, #dde4df); */
  margin: 0;
  line-height: 1.7;
  font-size: 0.92rem;
}

.asc-table dt {
/*   background: var(--color-bg-soft, #eaeeeb); */
  color: var(--color-text, #2c3530);
  font-weight: 500;
  white-space: nowrap;
}

.asc-table dd {
  color: var(--color-text-sub, #5a6b60);
/*   background: var(--color-white, #fff); */
}

/* ──────────────────────────────────────────────
   沿革（.asc-history）  ※about のみ
────────────────────────────────────────────── */
.asc-history {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* 縦のタイムラインライン */
.asc-history::before {
  content: '';
  position: absolute;
  left: 7.5em;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border, #dde4df);
  pointer-events: none;
}

.asc-year {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 0 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border, #dde4df);
  position: relative;
}
.asc-year:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* タイムラインの丸ドット */
.asc-year::before {
  content: '';
  position: absolute;
  left: calc(7.5em - 5px);
  top: 28px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-accent, #7a9e85);
  border: 2px solid var(--color-white, #fff);
  box-shadow: 0 0 0 1px var(--color-accent, #7a9e85);
}

.asc-year__label {
  font-size: 0.82rem;
  font-weight: bold;
  color: var(--color-accent-deep, #5a7a65);
  letter-spacing: 0.04em;
  padding-top: 2px;
  line-height: 1.5;
  margin: 0;
}

.asc-year__body {
  font-size: 0.88rem;
  color: var(--color-text-sub, #5a6b60);
  line-height: 1.9;
  margin: 0;
}

/* ──────────────────────────────────────────────
   レスポンシブ追加（about）
────────────────────────────────────────────── */
@media screen and (max-width: 760px) {
  .asc-table {
    grid-template-columns: 1fr;
  }
  .asc-table dt {
    padding-bottom: 6px;
    border-bottom: none;
  }
  .asc-table dd {
    padding-top: 6px;
    border-top: none;
  }

  .asc-history::before {
    display: none;
  }
  .asc-year {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-left: 16px;
    border-left: 3px solid var(--color-accent-light, #a8c4ae);
  }
  .asc-year::before {
    display: none;
  }
  .asc-year__label {
    font-size: 0.78rem;
  }
}

/* ──────────────────────────────────────────────
   TOPの表示修正 スライダードット削除
────────────────────────────────────────────── */
#header_slider_wrap .slick-dots {
	display: none !important;
}

/* ──────────────────────────────────────────────
   SP TOPの表示修正
────────────────────────────────────────────── */
@media only screen and (max-width: 1100px) {
    #header_slider_wrap {
        width: 100% !important;
        margin: 0 0 10px !important;
    }
}
@media screen and (max-width: 800px) {
    body.home {
        padding: 0 !important;
    }
	body.home.no_header_logo_image_mobile #header_logo2{
		top: 0 !important;
	}
	body.home #drawer_menu_button {
		top: 0 !important;
	}
}

#footer_sns {
	background: #F5F5F5 !important;
}