@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&family=Noto+Sans+JP:wght@300;400;700&display=swap');
/* ↑ Googleフォントの読み込み。Nunito（英数字）とNoto Sans JP（日本語）を使用 */


/* ══════════════════════════════
   カラー設定
   ここを変えると全体の色が変わります
══════════════════════════════ */
:root {
  --blue:         #3d63c9;   /* メインの青　→ ヘッダー・カードアクセントなどに使用 */
  --blue-light:   #eef1ff;   /* 薄い青　　　→ タグやボタンの背景色に使用 */
  --yellow:       #f0c640;   /* メインの黄色 → ボタン・アイコン背景に使用 */
  --yellow-light: #fef9e6;   /* 薄い黄色　　→ タグやボタンの背景色に使用 */
  --white:        #ffffff;   /* 白　　　　　→ カード・ヘッダーの背景色に使用 */
  --bg:           #f5f7ff;   /* ページ全体の背景色 */
  --ink:          #1a2340;   /* メインの文字色 */
  --muted:        #8490a8;   /* サブの文字色（説明文など） */
  --border:       #dde3f0;   /* 枠線・区切り線の色 */
}


/* ══════════════════════════════
   ベース
   ページ全体に適用される基本スタイル
══════════════════════════════ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans JP', 'Nunito', sans-serif;
  color: var(--ink);
  background: var(--bg);
}


/* ══════════════════════════════
   ヘッダー
   画面上部に固定されるナビゲーションバー
══════════════════════════════ */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;        /* 上下16px、左右40px → 数字で余白を調整 */
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ロゴ画像
   height の数字を変えるとロゴの大きさが変わります */
.logo a {
  text-decoration: none;     /* ロゴリンクの下線を消す */
}

.logo img {
  height: 40px;   /* ← ロゴの高さ。大きくしたい場合は数字を上げる */
  width: auto;
  display: block;
}

/* ロゴをテキストにする場合は代わりにこちらを使用
   .logo h1 {
     font-family: 'Nunito', sans-serif;
     font-size: 1.4rem;
     font-weight: 800;
     color: var(--blue);
   } */

nav ul {
  list-style: none;
  display: flex;
  gap: 32px;                 /* メニュー同士の間隔 */
}

nav ul li a {
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

nav ul li a:hover {
  color: var(--blue);        /* マウスを乗せたときの文字色 */
}

/* ──────────────────────────────
   【レスポンシブ】ヘッダー
   画面幅768px以下（タブレット・スマホ）
────────────────────────────── */
@media (max-width: 768px) {
  header {
    flex-direction: column;  /* ロゴとナビを縦並びに */
    align-items: flex-start;
    padding: 16px 20px;
    gap: 12px;
  }
  nav ul {
    gap: 16px;
    flex-wrap: wrap;
  }
  nav ul li a {
    font-size: 0.8rem;
  }
}


/* ══════════════════════════════
   ヒーロー
   トップの大きなビジュアルエリア
══════════════════════════════ */
.hero {
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;   /* 横方向も中央寄せ */
  padding: 80px 40px;
  position: relative;

  /* 背景画像の設定
     url(...) の中のパスを変更すると画像が変わります */
  background-image: url('https://linkmalu24.com/shop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 画像がない場合は青背景にフォールバック */
  background-color: var(--blue);
}

/* 画像の上に青の半透明オーバーレイ
   最後の数字（0〜1）で濃さを調整。1に近いほど濃くなります */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(61, 99, 201, 0.55);
}

/* テキストをオーバーレイより前面に */
.hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
}

.hero-text h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 2.6rem;         /* キャッチコピーの文字サイズ */
  font-weight: 800;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 16px;
}

.hero-text p {
  font-size: 0.9rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
}

/* ボタン（ヒーロー・お問い合わせで共通使用） */
.btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--yellow);
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: 100px;
}

.btn:hover {
  opacity: 0.85;
}

/* ──────────────────────────────
   【レスポンシブ】ヒーロー
   画面幅768px以下
────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 60px 20px;
    background-image: url('https://linkmalu24.com/shop.jpg');
  }
  .hero-text h2 {
    font-size: 1.8rem;
  }
  .hero-text p {
    font-size: 0.85rem;
  }
  .btn {
    width: 100%;
    text-align: center;
  }
}


/* ══════════════════════════════
   セクション共通
   各セクションの余白・最大幅・見出しスタイル
══════════════════════════════ */
section {
  padding: 80px 40px;        /* 上下80px、左右40px */
  max-width: 1080px;         /* 最大幅 → 大きくするとPC表示が広がります */
  margin: 0 auto;
}

section h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 48px;
}

/* ──────────────────────────────
   【レスポンシブ】セクション共通
   画面幅768px以下
────────────────────────────── */
@media (max-width: 768px) {
  section {
    padding: 60px 20px;
  }
  section h2 {
    font-size: 1.6rem;
    margin-bottom: 32px;
  }
}


/* ══════════════════════════════
   サービスカード
   「サービス内容」セクションの3枚のカード
══════════════════════════════ */
.card-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 22px;
}

/* ──────────────────────────────
   【レスポンシブ】カード
   タブレット：2列 / スマホ：1列
────────────────────────────── */
@media (max-width: 900px) {
  .card-wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-wrap { grid-template-columns: 1fr; }
}

/* カード共通 */
.card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px;       /* 角の丸み → 大きくするほど丸くなります */
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(61, 99, 201, 0.1);
}

/* カードのタイトル */
.card h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
}

/* カードの説明文 */
.card p {
  font-size: 0.8rem;
  line-height: 2;
  color: var(--muted);
}

/* 区切り線 */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}

/* タグ */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}

/* CTAリンク */
.card-cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 800;
  text-decoration: none;
  width: fit-content;
}

/* 1枚目（買取）: パステルブルー左ボーダー */
.card:nth-child(1) { border-left: 5px solid #6aaddb; }
.card:nth-child(1) h3        { color: #1a5f8a; }
.card:nth-child(1) .tag      { background: #e8f4fd; color: #1a5f8a; }
.card:nth-child(1) .card-cta { background: #e8f4fd; color: #1a5f8a; }

/* 2枚目（販売）: パステルイエロー左ボーダー */
.card:nth-child(2) { border-left: 5px solid #e8c840; }
.card:nth-child(2) h3        { color: #7a6000; }
.card:nth-child(2) .tag      { background: #fef9e6; color: #7a6000; }
.card:nth-child(2) .card-cta { background: #fef9e6; color: #7a6000; }

/* 3枚目（交換）: パステルピンク左ボーダー */
.card:nth-child(3) { border-left: 5px solid #e86aa0; }
.card:nth-child(3) h3        { color: #8a1a4a; }
.card:nth-child(3) .tag      { background: #fde8f0; color: #8a1a4a; }
.card:nth-child(3) .card-cta { background: #fde8f0; color: #8a1a4a; }


/* ══════════════════════════════
   当社の強み
   白いボックスの中にリストを表示
══════════════════════════════ */
.strength {
  background: var(--white);
  border-radius: 20px;
  border: 1.5px solid var(--border);
  max-width: 1080px;
}

.strength ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}

.strength ul li {
  font-size: 0.88rem;
  font-weight: 700;
  background: var(--blue-light);
  color: var(--ink);
  border-radius: 12px;
  padding: 16px 20px;
  line-height: 1.5;
}

/* ──────────────────────────────
   【レスポンシブ】当社の強み
   画面幅600px以下で1列
────────────────────────────── */
@media (max-width: 600px) {
  .strength ul {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}


/* ══════════════════════════════
   お問い合わせ
   青背景＋白カードのアイコングリッド
══════════════════════════════ */
.contact {
  text-align: center;
  background: var(--blue);
  border-radius: 20px;
  max-width: 1080px;
}

.contact h2 {
  color: var(--white);
}

.contact > p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: -24px;
  margin-bottom: 32px;
}

/* カードグリッド（3列×2行） */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* 各カード */
.contact-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 24px 16px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: box-shadow 0.2s;
  cursor: pointer;
}

.contact-card:hover {
  box-shadow: 0 8px 24px rgba(61, 99, 201, 0.15);
}

/* アイコン（黄色の丸）
   絵文字・SVGどちらでも使えます */
.contact-icon {
  width: 48px;
  height: 48px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;         /* 絵文字の場合のサイズ */
  flex-shrink: 0;
}

/* SVGアイコンのサイズ調整 */
.contact-icon svg {
  width: 26px;
  height: 26px;
}

/* ラベル */
.contact-label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
}

/* サブテキスト */
.contact-sub {
  font-size: 0.7rem;
  color: var(--muted);
}

/* ──────────────────────────────
   【レスポンシブ】お問い合わせ
   画面幅768px以下で2列
────────────────────────────── */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ══════════════════════════════
   LINEのQRモーダル（ポップアップ）
   クリックで表示・背景クリックで閉じる
══════════════════════════════ */

/* 画面全体を覆う暗い背景 */
#line-qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* QRコードを囲む白いボックス */
.qr-box {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 300px;
  width: 90%;
}

.qr-title {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

/* QR画像
   width・height の数字でサイズを調整できます */
.qr-box img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: 8px;
}

.qr-sub {
  font-size: 0.68rem;
  color: var(--muted);
}

/* 閉じるボタン */
.qr-box button {
  padding: 10px 28px;
  background: var(--blue);
  color: var(--white);
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  border: none;
  border-radius: 100px;
  cursor: pointer;
}

.qr-box button:hover {
  opacity: 0.85;
}


/* ══════════════════════════════
   フッター
   ページ最下部のコピーライト表示
══════════════════════════════ */
footer {
  text-align: center;
  padding: 32px 24px;
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1.5px solid var(--border);
}

/* ══════════════════════════════
   会社概要ページ専用スタイル
   about.html で使用
══════════════════════════════ */

/* ── ページタイトルエリア ── */
.page-hero {
  background: var(--blue);
  text-align: center;
  padding: 60px 40px;
}

.page-hero h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
}

.page-hero p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ── 会社概要テーブル ── */
.about {
  max-width: 800px;          /* テーブルの最大幅 → 広げたい場合は数字を上げる */
  margin: 0 auto;
  padding: 80px 40px;
}

.about-table {
  background: var(--white);
  border-radius: 20px;
  border: 1.5px solid var(--border);
  overflow: hidden;
}

/* 各行 */
.about-row {
  display: grid;
  grid-template-columns: 160px 1fr; /* 左列の幅 → 広げたい場合は数字を上げる */
  border-bottom: 1px solid var(--border);
}

.about-row:last-child {
  border-bottom: none;               /* 最後の行の下線を消す */
}

/* ラベル（左側） */
.about-label {
  background: var(--blue-light);
  color: var(--blue);
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 20px 24px;
  display: flex;
  align-items: center;
}

/* 内容（右側） */
.about-value {
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--ink);
  padding: 20px 24px;
  display: flex;
  align-items: center;
}

/* ── アクセスセクション ── */
.access {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px 80px;
}

.access h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 32px;
}

/* Googleマップの枠 */
.map-wrap {
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  margin-bottom: 20px;
}

/* 住所・アクセス情報 */
.access-info {
  background: var(--white);
  border-radius: 12px;
  border: 1.5px solid var(--border);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-info p {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.7;
}

/* ──────────────────────────────
   【レスポンシブ】会社概要ページ
   画面幅600px以下の対応
────────────────────────────── */
@media (max-width: 600px) {
  .page-hero {
    padding: 40px 20px;
  }

  .page-hero h2 {
    font-size: 1.8rem;
  }

  .about {
    padding: 40px 20px;
  }

  /* スマホでは縦並びに変更 */
  .about-row {
    grid-template-columns: 1fr;
  }

  .about-label {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
  }

  .about-value {
    padding: 14px 20px;
  }

  .access {
    padding: 0 20px 60px;
  }
}


/* ══════════════════════════════
   コラムページ専用スタイル
   column.html / column-detail.html で使用
══════════════════════════════ */

/* ── ナビのアクティブ状態 ── */
.nav-active {
  color: var(--blue) !important;
}

/* ── カテゴリータブ ── */
.column-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 40px;
}

.column-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.cat-btn {
  padding: 8px 20px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--muted);
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.cat-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* アクティブなカテゴリーボタン */
.cat-active {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--white) !important;
}

/* ── 記事一覧グリッド ── */
.column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 → repeat(2, 1fr)で2列になります */
  gap: 24px;
}

/* ── 記事カード ── */
.column-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.column-card:hover {
  box-shadow: 0 8px 24px rgba(61, 99, 201, 0.1);
  transform: translateY(-4px);
}

/* 記事サムネイル */
.column-img {
  width: 100%;
  aspect-ratio: 16 / 9;  /* 横長の画像エリア */
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.column-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 画像をエリアに合わせてトリミング */
}

/* 画像がない場合の仮プレースホルダー */
.column-img-placeholder {
  font-size: 3rem;
}

/* 記事カード本文エリア */
.column-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

/* カテゴリーラベル */
.column-cat-label {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
}

/* カテゴリーごとの色 → 変更する場合はここを編集してください */
.cat-tire        { background: #e8f4fd; color: #1a5f8a; }  /* タイヤ：ブルー */
.cat-wheel       { background: #fde8f0; color: #8a1a4a; }  /* ホイール：ピンク */
.cat-buy         { background: #fef9e6; color: #7a6000; }  /* 買取・販売：イエロー */
.cat-maintenance { background: #eef1ff; color: #3d63c9; }  /* メンテナンス：パープル */

/* 記事タイトル */
.column-title {
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

/* 記事抜粋 */
.column-excerpt {
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--muted);
  flex-grow: 1;

  /* 3行で省略 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 日付と続きを読む */
.column-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.column-date {
  font-size: 0.68rem;
  color: var(--muted);
}

.column-more {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--blue);
}

/* ──────────────────────────────
   【レスポンシブ】コラム一覧
   タブレット：2列 / スマホ：1列
────────────────────────────── */
@media (max-width: 900px) {
  .column-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .column-section { padding: 40px 20px; }
  .column-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════
   記事詳細ページ
   column-detail.html で使用
══════════════════════════════ */

/* メイン + サイドバーの2カラムレイアウト */
.article-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 40px;
  display: grid;
  grid-template-columns: 1fr 300px; /* 記事エリア + サイドバー幅 */
  gap: 40px;
  align-items: start;
}

/* ── パンくずリスト ── */
.breadcrumb {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.breadcrumb a {
  color: var(--blue);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ── 記事ヘッダー ── */
.article-header {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-title {
  font-family: 'Nunito', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}

.article-meta {
  display: flex;
  gap: 16px;
  font-size: 0.72rem;
  color: var(--muted);
}

/* ── アイキャッチ画像 ── */
.article-eyecatch {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--blue-light);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.article-eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-eyecatch-placeholder {
  font-size: 5rem;
}

/* ── 記事本文 ── */
.article-content {
  line-height: 2;
  font-size: 0.9rem;
  color: var(--ink);
}

/* 本文内の見出し */
.article-content h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  margin: 40px 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--blue);  /* 青のアクセントライン */
  color: var(--ink);
  text-align: left;                    /* セクション共通のcenterを上書き */
}

/* 本文内のリスト */
.article-content ul {
  padding-left: 1.5rem;
  margin: 16px 0;
  display: block;                      /* flexを上書き */
}

.article-content ul li {
  margin-bottom: 8px;
  font-size: 0.88rem;
}

/* 本文内の段落 */
.article-content p {
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: var(--ink);                   /* mutedを上書き */
}

/* 記事内CTAボックス */
.article-cta-box {
  background: var(--blue-light);
  border-radius: 16px;
  padding: 28px 32px;
  text-align: center;
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.article-cta-box p {
  font-weight: 700;
  color: var(--blue);
  margin: 0;
}

/* ── 記事下ナビ ── */
.article-nav {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1.5px solid var(--border);
}

.article-nav-back {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.article-nav-back:hover {
  text-decoration: underline;
}

/* ── サイドバー ── */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;                    /* スクロールしても追いかけてくる */
  top: 90px;
}

.sidebar-block {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.sidebar-title {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 16px;
  text-align: left;                    /* セクション共通のcenterを上書き */
}

/* カテゴリーリスト */
.sidebar-cats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-cats li a {
  font-size: 0.82rem;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-cats li a::before {
  content: '›';
  color: var(--blue);
  font-weight: 700;
}

.sidebar-cats li a:hover {
  color: var(--blue);
}

/* お問い合わせサイドバー */
.sidebar-contact p {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.7;
}

/* 関連記事リスト */
.sidebar-related {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-related li a {
  font-size: 0.78rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.6;
  display: block;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.sidebar-related li:last-child a {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-related li a:hover {
  color: var(--blue);
}

/* ──────────────────────────────
   【レスポンシブ】記事詳細
   画面幅768px以下で1カラムに
────────────────────────────── */
@media (max-width: 768px) {
  .article-wrap {
    grid-template-columns: 1fr;  /* 1カラムに */
    padding: 40px 20px;
    gap: 32px;
  }

  .article-title {
    font-size: 1.4rem;
  }

  .article-sidebar {
    position: static;            /* スマホではstickyを解除 */
  }
}

/* ══════════════════════════════
   コラム一覧 新デザイン（画像上部カード）
   既存スタイルを上書きします
══════════════════════════════ */

/* グリッド */
.column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
}

/* カード */
.column-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none;
  color: var(--ink);
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  transition: opacity 0.2s;
}

.column-card:hover {
  opacity: 0.82;
  transform: none !important;
  box-shadow: none !important;
}

/* サムネイル */
.column-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--blue-light);
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 14px;
}

.column-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.column-card:hover .column-thumb img {
  transform: scale(1.04);
}

/* 画像なしの場合の絵文字プレースホルダー */
.column-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

/* カテゴリーバッジ（サムネイル右下） */
.column-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}

/* NEWバッジ（サムネイル左上） */
.column-new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--blue);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* カード本文 */
.column-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
}

/* タイトル */
.column-title {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
}

/* 日付 */
.column-date {
  font-size: 0.7rem !important;
  color: var(--muted) !important;
}

/* ──────────────────────────────
   【レスポンシブ】コラム新デザイン
────────────────────────────── */
@media (max-width: 900px) {
  .column-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .column-section { padding: 40px 20px !important; }
  .column-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 400px) {
  .column-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════
   社長よりページ — カラーバンドレイアウト
   message.html で使用
══════════════════════════════ */

/* バンド共通 */
.msg-band {
  width: 100%;
  padding: 60px 40px;
}

.msg-band-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ENラベル */
.msg-band-en {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

/* バンドタイトル */
.msg-band-title {
  font-family: 'Nunito', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;          /* section h2 の center を上書き */
  margin-bottom: 0;
}

/* バンド本文 */
.msg-band-text {
  font-size: 0.88rem;
  line-height: 2;
  margin: 0;
}

.msg-band-text strong {
  font-weight: 800;
}

/* ── 青バンド ── */
.band-blue {
  background: var(--blue);
}
.band-blue .msg-band-en   { color: var(--yellow); }
.band-blue .msg-band-title { color: var(--white); }
.band-blue .msg-band-text  { color: rgba(255,255,255,0.85); }

/* ── 黄バンド ── */
.band-yellow {
  background: var(--yellow);
}
.band-yellow .msg-band-en   { color: #7a6000; }
.band-yellow .msg-band-title { color: #5a3e00; }
.band-yellow .msg-band-text  { color: #5a3e00; }
.band-yellow .msg-service-title { color: #3d2000; }
.band-yellow .msg-service-item p { color: #7a6000; }

/* ── ピンクバンド ── */
.band-pink {
  background: #fde8f0;
  border-top: 3px solid #e86aa0;
  border-bottom: 3px solid #e86aa0;
}
.band-pink .msg-band-title { color: #8a1a4a; }
.band-pink .msg-band-text  { color: #8a1a4a; }

/* ── 白バンド ── */
.band-white {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.band-white .msg-band-en   { color: var(--blue); }
.band-white .msg-band-title { color: var(--ink); }
.band-white .msg-band-text  { color: var(--ink); }
.band-white .msg-band-text strong { color: var(--blue); }

/* ── 薄青バンド ── */
.band-lightblue {
  background: var(--blue-light);
}
.band-lightblue .msg-band-title { color: var(--blue); }
.band-lightblue .msg-band-text  { color: var(--ink); }
.band-lightblue .msg-band-text strong { color: var(--blue); }

/* ハイライトボックス */
.msg-highlight {
  background: rgba(255,255,255,0.9);
  border-left: 4px solid var(--blue);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
}

.msg-highlight p {
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--ink);
  font-weight: 700;
  margin: 0;
}

/* サービス一覧 */
.msg-service-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.msg-service-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.msg-service-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.msg-service-title {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.msg-service-item p {
  font-size: 0.78rem;
  line-height: 1.8;
  margin: 0;
}

/* 署名 */
.msg-sign-name {
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
}

.msg-sign-company {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
}

/* ──────────────────────────────
   【レスポンシブ】社長よりページ
────────────────────────────── */
@media (max-width: 600px) {
  .msg-band {
    padding: 40px 20px;
  }

  .msg-band-title {
    font-size: 1.2rem;
  }
}