@charset "UTF-8";
/* ==========================================================================
   新千歳空港コラム 記事ページ
   MTアセット管理 → 出力ファイル名: assets/css/column.css
   MTのcss欄に次の1行を書いて読み込む:
     <link rel="stylesheet" href="/ja/new-chitose/special/column/assets/css/column.css">
   ========================================================================== */

.hap-column {
  /* レイアウト */
  --col-inner: 1080px;   /* main 720 + gap 40 + side 320 */
  --col-pad: 24px;       /* 1080px未満に縮んだときの左右余白 */
  --col-side: 320px;
  --col-gap: 40px;
  --col-space: 50px;          /* h1・注釈・アイキャッチ・本文の間隔 */

  /* 色 */
  --col-title: #000;
  --col-text: #333;
  --col-text-table: #2a2a2a;
  --col-meta: #666;
  --col-h2-bg: #56a7bc;
  --col-accent: #0d819f;
  --col-tag-bg: #000;
  --col-table-head: #e1e1e1;
  --col-line: #e1e1e1;

  font-family: "Noto Sans JP", sans-serif;
  color: var(--col-text);
}

/* --- レイアウト ---------------------------------------------------------- */
.hap-column__inner {
  box-sizing: border-box;
  display: flex;
  gap: var(--col-gap);
  max-width: calc(var(--col-inner) + var(--col-pad) * 2);    /* padding込みの外寸 */
  margin: 0 auto;
  padding: 80px var(--col-pad);
}

.hap-column__main {
  flex: 1;        /* 幅は 1080 − 320(side) − 40(gap) = 720px になる */
  min-width: 0;   /* 表がはみ出してもカラム幅を押し広げない */
}

/* --- 記事ヘッダー -------------------------------------------------------- */
.hap-column__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
}

.hap-column__cat {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 2px 8px;
  background: var(--col-tag-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.hap-column__date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--col-meta);
  font-size: 14px;
  line-height: 1.5;
}

.hap-column__date::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 14px;
  background: url("data:image/svg+xml,<svg width=%2216%22 height=%2214%22 viewBox=%220 0 16 14%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M14.5405 9.39219L14.4854 7.8131L14.483 7.81435L14.4828 7.80936L11.3946 9.48146L9.84737 10.3167L9.84993 10.3179L9.84506 10.3205L10.5338 10.6426L10.8525 10.794C9.9914 11.2977 8.96968 11.5764 7.91878 11.5764C5.31587 11.5764 3.07625 9.88432 2.70931 7.64069L0 7.97822C0.558219 11.3913 3.96262 13.9651 7.91881 13.9651C9.98643 13.9651 11.9811 13.258 13.465 12.0135L14.2545 12.3828L14.6514 12.5707L14.6512 12.5683L14.6564 12.5706L14.5405 9.39219Z%22 fill=%22%234B4B4B%22/> <path d=%22M1.35242 6.15201L1.35498 6.15075L1.35511 6.15575L4.44495 4.48277L5.99061 3.64841L5.98804 3.64724L5.99292 3.64456L5.30529 3.32301L4.98548 3.1712C5.84645 2.66755 6.86817 2.38874 7.91908 2.38874C10.522 2.38874 12.7616 4.08078 13.1285 6.32442L15.838 5.98688C15.2798 2.57381 11.8754 0 7.91908 0C5.85145 0 3.85683 0.707256 2.37305 1.95168L1.57877 1.58018L1.18664 1.39436V1.39681L1.18164 1.39446L1.29698 4.56272L1.35242 6.15201Z%22 fill=%22%234B4B4B%22/> </svg>") no-repeat center / contain;
}

.hap-column__title {
  margin: 12px 0 0;
  color: var(--col-title);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.4;
}

.hap-column__note {
  margin: var(--col-space) 0 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.hap-column__eyecatch {
  margin: var(--col-space) 0 0;
}

.hap-column__eyecatch img {
  display: block;
  width: 100%;
  height: auto;
}

.hap-column__body {
  margin-top: var(--col-space);
}

/* --- コラム一覧へ戻る ----------------------------------------------------- */
/* ページ先頭ではなく、コラム一覧ページ（/ja/new-chitose/special/column/）へ戻る。
   ステージングと本番でホストが違うため、リンクは必ずルート相対パスで書くこと。 */
.hap-column__back {
  margin: var(--col-space) 0 0;
  text-align: center;
}

.hap-column__back a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

/* 素材は左向きの矢印。Figmaの意匠も左向き（「戻る」なので）。回転させないこと。 */
.hap-column__back a::before {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,<svg width=%2230%22 height=%2230%22 viewBox=%220 0 30 30%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <circle cx=%2215%22 cy=%2215%22 r=%2215%22 transform=%22matrix(-1 0 0 1 30 0)%22 fill=%22black%22/> <path d=%22M23.0333 14.5006C23.5853 14.519 24.0178 14.9813 23.9994 15.5333C23.981 16.0853 23.5187 16.5178 22.9667 16.4994L23 15.5L23.0333 14.5006ZM7.26973 15.6832C6.89243 15.2798 6.91352 14.647 7.31684 14.2697L13.8893 8.12131C14.2926 7.74402 14.9254 7.76511 15.3027 8.16843C15.68 8.57175 15.6589 9.20456 15.2556 9.58186L9.41343 15.0471L14.8787 20.8893C15.256 21.2926 15.2349 21.9254 14.8316 22.3027C14.4283 22.68 13.7954 22.6589 13.4181 22.2556L7.26973 15.6832ZM23 15.5L22.9667 16.4994L7.96668 15.9994L8 15L8.03331 14.0006L23.0333 14.5006L23 15.5Z%22 fill=%22white%22/> </svg>") no-repeat center / contain;
}

/* --- サイドバー（バナー差し替え枠） -------------------------------------- */
.hap-column__side {
  width: var(--col-side);
  flex-shrink: 0;
  align-self: flex-start;   /* 本文の高さまで引き伸ばさない（これが無いとstickyが効かない） */

  /* スクロールに追従する。サイトのヘッダーは position: static で追従しないため、
     上端の余白だけ確保すればよい（固定ヘッダーを避けるオフセットは不要）。 */
  position: sticky;
  top: 24px;
}

.hap-column__side::after {
  content: "";              /* バナー未設定のあいだ出すプレースホルダー */
  display: block;
  aspect-ratio: 320 / 300;
  background: #ccc;
}

/* バナー（要素）を入れたらプレースホルダーは消える。
   :empty は使えない。HTMLが整形されていると改行の空白テキストノードで
   常に「空ではない」と判定され、枠が出なくなるため。 */
.hap-column__side:has(> *)::after {
  content: none;
}

.hap-column__side img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  transition: box-shadow .2s ease, filter .2s ease;
}

/* バナーを縦に複数並べたときの間隔。
   <a> はインライン要素で上下marginが効かないため、block 化してから margin を効かせる。 */
.hap-column__side > a {
  display: block;
}
.hap-column__side > a + a {
  margin-top: 16px;
}

/* ホバー演出：フッターの共通バナーと同様に、影を拡大し明度を少し上げる */
.hap-column__side > a:hover img {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  filter: brightness(1.05);
}

/* --- 本文 ---------------------------------------------------------------- */
/* 本文にはクラスを付けない。余白は隣接セレクタで一括制御する。 */
.hap-column__body > * {
  margin: 0;
}

.hap-column__body > * + * {
  margin-top: 32px;
}

.hap-column__body > p + p {
  margin-top: 16px;
}

.hap-column__body > h2 {
  margin-top: var(--col-space);
}

.hap-column__body > h2:first-child {
  margin-top: 0;
}

.hap-column__body h2 {
  padding: 16px 20px;
  background: var(--col-h2-bg);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}

.hap-column__body h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  color: var(--col-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
}

.hap-column__body h3::before {
  content: "";
  flex-shrink: 0;
  align-self: stretch;
  width: 4px;
  background: var(--col-accent);
}

.hap-column__body h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--col-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
}

.hap-column__body h4::before {
  content: "";
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,<svg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M5.382 3.24L8.622 0L11.862 3.24L8.622 6.48L5.382 3.24ZM0 8.622L3.24 5.382L6.48 8.622L3.24 11.862L0 8.622ZM10.764 8.622L14.004 5.382L17.244 8.622L14.004 11.862L10.764 8.622ZM5.382 14.004L8.622 10.764L11.862 14.004L8.622 17.244L5.382 14.004Z%22 fill=%22%230D819F%22/> </svg>") no-repeat center / contain;
}

.hap-column__body p {
  font-size: 16px;
  line-height: 1.7;
}

.hap-column__body ul,
.hap-column__body ol {
  padding-left: 24px;
  color: #000;
  font-size: 16px;
  line-height: 1.4;
}

.hap-column__body ul { list-style: disc; }
.hap-column__body ol { list-style: decimal; }
.hap-column__body li + li { margin-top: 8px; }

.hap-column__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.hap-column__body strong {
  font-weight: 700;
}

/* 画像と出典 */
.hap-column__body figure img {
  display: block;
  width: 100%;
  height: auto;
}

.hap-column__body figcaption {
  margin-top: 8px;
  color: var(--col-meta);
  font-size: 14px;
  line-height: 1.6;
}

/* 元が小さい画像を等倍に近い大きさで見せるための例外。
   本文にクラスを書かないのが原則だが、下のボタンと同じく「人が手で1つ足す」指定として持っておく。
   使うとき: <figure class="fig-narrow">…</figure>
   （上の figure img は width:100% なので、指定しないと 217px の画像でも720pxまで拡大されてぼやける）
   img ではなく figure ごと絞る。出典（figcaption）も画像の幅に収めるため。
   ※ margin の一括指定は使わないこと。.hap-column__body > * + * の margin-top: 32px を消してしまう。 */
.hap-column__body figure.fig-narrow {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* 表 */
.hap-column__body table {
  width: 100%;
  border-collapse: collapse;
  color: var(--col-text-table);
  font-size: 16px;
  line-height: 1.6;
}

.hap-column__body th,
.hap-column__body td {
  padding: 8px 12px;
  border: 1px solid var(--col-line);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.hap-column__body th {
  background: var(--col-table-head);
}

/* 1列目に最低幅を持たせる。
   縦2列の店舗表（項目 | 詳細）は2列目に口コミなどの長文が入ることがあり、
   自動レイアウトだと1列目が限界まで詰められて「店舗名」が1文字ずつ折り返される。
   最長の項目名「販売店舗名」(5文字)＋左右パディングが1行に収まる幅を下限にする。
   min-width は下限なので、1列目に長い店舗名が入る一覧表はこれまでどおり折り返される。
   ※ 767px以下では表全体が nowrap ＋横スクロールになるため、この指定は効かない（無害）。 */
.hap-column__body th:first-child,
.hap-column__body td:first-child {
  box-sizing: border-box;
  min-width: 7em;
}

/* ボタン（原稿には未使用。Figmaがボタンのスタイルを定義しているので型として持っておく）
   本文にクラスを書かないのが原則だが、ボタンだけは例外。
   原稿から自動生成されるのではなく、必要なときに人が手で1つ足す要素のため。
   使うとき: <p><a class="hap-column__btn" href="…">ラベル</a></p> */
.hap-column__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border-radius: 39px;
  background: var(--col-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

/* ボタン（ショップ詳細への導線。各店舗表の直後に置く。参考: docs/shop-btn.html）
   白地＋フチのピルボタン。ホバーで色反転＋2px浮上、末尾「→」が右に動く。
   注意: 本文の a には下線＋color:inherit（詳細度0,1,1）が掛かっているため、
   ボタンは必ず .hap-column__body 配下にスコープ（0,2,0）して詳細度で勝たせること。
   色は #0E819F（参考）ではなく既存の var(--col-accent)(#0d819f) を使い、
   h3のアクセントバー等とページ内で統一する（差はRGBで1・視認不可）。 */
.hap-column__body .shop-btn-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.hap-column__body .shop-btn {
  display: inline-flex;          /* gap と ::after の矢印を効かせる */
  align-items: center;
  gap: .5em;
  padding: .9em 1.8em;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;         /* 本文 a の下線を打ち消す */
  border-radius: 9999px;
  transition: transform .2s ease, box-shadow .2s ease,
    background-color .2s ease, color .2s ease;
}

.hap-column__body .shop-btn::after {
  content: "→";
  transition: transform .2s ease;
}

.hap-column__body .shop-btn:hover::after {
  transform: translateX(3px);
}

.hap-column__body .shop-btn:active {
  transform: translateY(0);
}

.hap-column__body .shop-btn--outline {
  background: #fff;
  color: var(--col-accent);
  border: 1.5px solid var(--col-accent);
}

.hap-column__body .shop-btn--outline:hover,
.hap-column__body .shop-btn--outline:focus-visible {
  background: var(--col-accent);
  color: #fff;
  transform: translateY(-2px);
}

/* --- 1079px以下（タブレット含む） ----------------------------------------
   1080px未満では2カラムが成立しない（本文が408pxまで潰れる）ので1カラムに落とす。
   タブレット（iPad縦768/810/834、iPad横1024）がここに入る。 */
@media (max-width: 1079px) {
  .hap-column__inner {
    flex-direction: column;
    gap: 40px;
    padding: 40px var(--col-pad);
  }

  .hap-column__side {
    width: 100%;          /* サイドバーは本文の下に回る */
    position: static;     /* 本文の下に来るので追従はさせない */
  }
}

/* --- SP（767px以下） ----------------------------------------------------- */
@media (max-width: 767px) {
  .hap-column__inner {
    padding: 40px 16px;   /* SPは左右を詰める */
  }

  .hap-column__title {
    font-size: 24px;
  }

  .hap-column__body > * + * {
    margin-top: 24px;
  }

  .hap-column__body > h2 {
    margin-top: 40px;
  }

  .hap-column__body h2 {
    padding: 12px 16px;
    font-size: 20px;
  }

  .hap-column__body h3 {
    font-size: 18px;
  }

  .hap-column__body h4 {
    font-size: 16px;
  }

  /* 表は横スクロールさせる。2列とはいえ、店舗名が長いと375pxでは潰れるため */
  .hap-column__body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .hap-column__back a {
    font-size: 16px;
  }
}