/* ===============================
   色変数
================================= */
:root {
  --main: #2B3993;     /* 青 */
  --black: #231917;    /* 明るめの黒 */
  --bg1: #ECEBE9;      /* 薄いグレー */
  --bg2: #B3B3B3;      /* 濃いめのグレー */
  --line1: #B3B3B3;    /* カードのborder */
  --line2: #979797;    /* リストのborder、サブタイトル */
}

/* ===============================
   ベース
================================= */
.in-bl { display: inline-block; }
.sp-only { display: none; }
.pc-only { display: block; }

@media (max-width: 768px) {
  .pc-only { display: none; }
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
}

/* ===============================
   セクションレイアウト
================================= */
section {
  padding: 80px 0;
}
.inner {
  width: min(1200px, 90%);
  padding: 0 20px;
  margin: 0 auto;
}
.inner-l {
  width: min(1640px, 90%);
  padding: 0 20px;
  margin: 0 auto;
}
.bg-gray1 { background: var(--bg1); }
.bg-gray2 { background: var(--bg2); }

@media (max-width: 768px) {
  section { padding: 60px 0; }
  .inner,
  .inner-l { padding: 0; }
}

/* ===============================
   見出し
================================= */
.section-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.2;
  margin: 0 0 2rem;
  text-align: center;
}
.section-title .ja {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--line2);
  margin-top: 10px;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
  }
  .section-title .ja { font-size: 0.875rem; }
}
time{
  font-family: 'Oswald', sans-serif;
}
/* ===============================
   ニュースカテゴリタグ
================================= */
/* ベース：ニュースタグラベル */
.news-labels{
  padding: 0;
}
.label {
  display: inline-block;
  font-size: 0.625rem;
  line-height: 1;
  font-weight: 700;
  padding: 4px 8px;
  margin-right: 6px;
  color: #fff;
  border-radius: 3px;
}
/* 色バリエーション */
.label-news-release { background: #0168B7; }
.label-public-art   { background: #E5B6C0; }
.label-tourism      { background: #E7C15E; }
.label-dejital      { background: #988574; }
.label-ooh          { background: #979797; }

/* ===============================
   ボタン
================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.6em 1.4em;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
}
@media (max-width: 768px) {
  .btn {
    font-size: 1.125rem;
    padding: 0.8em 1.5em;
  }
}

/* 矢印アイコン */
.btn::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-color: currentColor;
  -webkit-mask: url('../img/icon-arrow.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask: url('../img/icon-arrow.svg') no-repeat center;
  mask-size: contain;
  transition: transform 0.3s ease;
}
.btn:hover::after { transform: translateX(8px); }

/* ボタンバリエーション */
.btn-white {
  background-color: #fff;
  color: var(--black);
  border-color: var(--black);
}
.btn-white:hover {
  background-color: var(--main);
  border-color: var(--main);
  color: #fff;
}

.btn-black {
  background-color: var(--black);
  color: #fff;
  border-color: var(--black);
}
.btn-black:hover {
  background-color: var(--main);
  border-color: var(--main);
  color: #fff;
}

.btn-blue {
  background-color: var(--main);
  color: #fff;
  border-color: var(--main);
}
.btn-blue:hover {
  background-color: #fff;
  color: var(--main);
  border-color: var(--main);
}