/* ==============================================
   base.css
   CreamCode コーポレートサイト 共通基盤スタイル
   ============================================== */

/* ----------
   デザイントークン（CSSカスタムプロパティ）
---------- */
:root {
  --cc-main:        #3aabd6;
  --cc-main-light:  #e8f6fc;
  --cc-accent:      #e8946a;
  --cc-heading:     #333333;
  --cc-body:        #555555;
  --cc-bg:          #faf8f2;
  --cc-white:       #ffffff;
  --cc-gray-50:     #f9fafb;
  --cc-gray-100:    #f3f4f6;
  --cc-gray-200:    #e5e7eb;
  --cc-gray-300:    #d1d5db;
  --cc-gray-400:    #9ca3af;
  --cc-gray-500:    #6b7280;
}

/* ----------
   ラッパー：SWELL干渉防止 + フォント設定
---------- */
.cc-wrapper {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--cc-body);
  background-color: var(--cc-bg);
  line-height: 1.7;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cc-wrapper * {
  box-sizing: border-box;
}

/* ----------
   SWELLオーバーライド
---------- */

/* 見出しリセット（:where()でspecificity=0にすることでコンポーネント側が自由に上書き可能） */
:where(.cc-wrapper h1, .cc-wrapper h2, .cc-wrapper h3,
       .cc-wrapper h4, .cc-wrapper h5) {
  line-height: 1.4;
  margin: 0;
  padding: 0;
  font-weight: 900;
}

/* 各ページテンプレート：SWELLコンテンツエリアの幅制限・余白を解除 */
#body_wrap.page-template-page-home #content.l-container,
#body_wrap.page-template-page-service #content.l-container,
#body_wrap.page-template-page-reason #content.l-container,
#body_wrap.page-template-page-about #content.l-container,
#body_wrap.page-template-page-case #content.l-container,
#body_wrap.page-template-page-contact #content.l-container,
#body_wrap.page-template-page-service-step3 #content.l-container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ナビゲーション：WordPressのcurrent-menu-item誤判定を無効化しSWELLの-currentに付け替え */
/* -currentなし（SWELLが現在ページと認識していない）のcurrent-menu-itemをリセット */
#gnav li:not(.menu-item-home):not(.-current).current-menu-item > a .ttl,
#gnav li:not(.menu-item-home):not(.-current).current_page_item > a .ttl {
  color: inherit !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
/* ホバーは通常通り動作させる */
#gnav li:not(.menu-item-home):not(.-current).current-menu-item > a:hover .ttl,
#gnav li:not(.menu-item-home):not(.-current).current_page_item > a:hover .ttl {
  color: #3aabd6 !important;
  border-bottom: 2px solid #3aabd6 !important;
  padding-bottom: 2px !important;
}
/* SWELLの-currentに同スタイルを適用 */
#gnav li.-current > a .ttl {
  color: #3aabd6 !important;
  border-bottom: 2px solid #3aabd6 !important;
  padding-bottom: 2px !important;
}

/* SWELLのh2装飾を無効化 */
.cc-wrapper h2::before,
.cc-wrapper h2::after {
  display: none !important;
  content: none !important;
}

/* pタグ余白リセット（:where()でspecificity=0にすることでコンポーネント側が自由に上書き可能） */
:where(.cc-wrapper p) {
  margin: 0;
}

/* リストリセット */
.cc-wrapper ul,
.cc-wrapper ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* aタグ下線リセット */
.cc-wrapper a {
  text-decoration: none;
}

/* SWELLヘッダーCTAボタン折り返し防止 */
.w-header .swell-block-button__link {
  white-space: nowrap;
}

/* ----------
   コンテナ
---------- */
.cc-container {
  max-width: 80rem;   /* 1280px ≒ max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.cc-container--md {
  max-width: 64rem;   /* 1024px ≒ max-w-5xl */
  margin-left: auto;
  margin-right: auto;
}

.cc-container--sm {
  max-width: 48rem;   /* 768px ≒ max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

/* ----------
   セクション共通
---------- */
.cc-section {
  padding: 6rem 1.5rem;
}

.cc-section--sm {
  padding: 3rem 1.5rem;
}

/* 背景色 */
.cc-section--white  { background-color: var(--cc-white); }
.cc-section--cream  { background-color: var(--cc-bg); }
.cc-section--gray   { background-color: var(--cc-gray-50); }
.cc-section--dark   { background-color: var(--cc-heading); }
.cc-section--main   { background-color: var(--cc-main); }

/* ボーダー */
.cc-section--border-b { border-bottom: 1px solid var(--cc-gray-100); }
.cc-section--border-y {
  border-top: 1px solid var(--cc-gray-200);
  border-bottom: 1px solid var(--cc-gray-200);
}

/* ----------
   テキストユーティリティ
---------- */
.cc-text-main    { color: var(--cc-main) !important; }
.cc-text-accent  { color: var(--cc-accent) !important; }
.cc-text-heading { color: var(--cc-heading); }
.cc-text-body    { color: var(--cc-body); }
.cc-text-white   { color: var(--cc-white); }
.cc-text-muted   { color: var(--cc-gray-400); }

/* ----------
   レスポンシブ
---------- */
@media (max-width: 767px) {
  .cc-section {
    padding: 4rem 1.5rem;
  }

  .cc-pc-only {
    display: none;
  }
}