@charset "utf-8";
/* ==========================================================================
   お役立ち情報（コラム）専用スタイル
   /column 配下のページと、管理画面のCKEditor編集領域でのみ読み込む
   （import.css には入れない）。

   本文は管理画面のCKEditorで入稿するため、装飾は「素のタグ」と
   このファイルで定義した少数のクラスだけで組めるようにしてある。
   使えるクラス： .c-box / .c-note / .c-cta / .c-figure / .c-faq / .scrollx
   色は技術記事（tech.css）と同じトークンに揃える。
   ========================================================================== */

.p-column-content {
  --gold: #AC7815;
  --ink: #222222;
  --mute: #767676;
  --line: #E3E1DD;
  --bg: #FAF9F7;
  --sans: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  --serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-family: var(--sans);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.04em;
}

.p-column-content p {
  margin: 0 0 1.6em;
}

.p-column-content h2 {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.6;
  font-weight: 500;
  margin: 2.8em 0 1em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--gold);
}

.p-column-content h3 {
  font-size: 19px;
  line-height: 1.7;
  font-weight: 700;
  margin: 2.2em 0 0.8em;
  padding-left: 12px;
  border-left: 4px solid var(--gold);
}

/* 記事の1行目が見出しでも上に余白が空きすぎないようにする */
.p-column-content > *:first-child {
  margin-top: 0;
}

.p-column-content ul,
.p-column-content ol {
  margin: 0 0 1.6em;
  padding-left: 1.6em;
}
.p-column-content ul > li {
  list-style: disc;
}
.p-column-content ol > li {
  list-style: decimal;
}
.p-column-content li {
  margin-bottom: 0.5em;
}

.p-column-content a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: 0.3s;
}
.p-column-content a:hover {
  color: var(--gold);
}

.p-column-content strong,
.p-column-content b {
  font-weight: 700;
}

.p-column-content img {
  width: 100%;
  height: auto;
  margin: 1.6em 0;
}

/* 図版＋キャプション */
.p-column-content .c-figure {
  margin: 2em 0;
}
.p-column-content .c-figure img {
  margin: 0;
  border: 1px solid var(--line);
}
.p-column-content .c-figure figcaption,
.p-column-content .c-figure > p {
  margin: 0.8em 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--mute);
  text-align: center;
}

/* 表。スマホでは横スクロールさせる（.scrollx で包む） */
.p-column-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 15px;
  line-height: 1.7;
}
.p-column-content th,
.p-column-content td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.p-column-content th {
  background: var(--bg);
  font-weight: 700;
  white-space: nowrap;
}

.p-column-content .scrollx {
  overflow-x: auto;
  margin: 0 0 1.6em;
  -webkit-overflow-scrolling: touch;
}
.p-column-content .scrollx table {
  margin-bottom: 0;
  min-width: 560px;
}

/* 図解。幅に合わせて縮めると文字が読めなくなるので、
   スマホでは縮めずに横スクロールさせる（技術記事の図と同じ扱い）。
   img も対象にしているのは、SVGを直接本文に書くとCKEditorが保存時に削除するため、
   図解は静的ファイルを <img> で参照しているから。 */
.p-column-content .scrollx svg,
.p-column-content .scrollx img {
  min-width: 640px;
}
.p-column-content .c-figure .scrollx {
  margin: 0;
}

/* 補足ボックス */
.p-column-content .c-box {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 24px 28px;
  margin: 2em 0;
}
.p-column-content .c-box > *:last-child {
  margin-bottom: 0;
}
.p-column-content .c-box-title {
  font-weight: 700;
  margin-bottom: 0.6em;
}

/* 短い注記 */
.p-column-content .c-note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--mute);
  margin: -0.8em 0 1.6em;
}

/* 本文の途中に置く、関連ページへの誘導カード。
   CKEditorは <a> がブロック要素を含むと <a> を分解して複数に割るので、
   カードは div で組み、リンクは .c-cta-title の中に1つだけ置くこと。 */
.p-column-content .c-cta {
  display: block;
  border: 1px solid var(--gold);
  background: #fff;
  padding: 28px 30px;
  margin: 2.5em 0;
  text-decoration: none;
  transition: 0.3s;
}
.p-column-content .c-cta:hover {
  background: var(--bg);
}
.p-column-content .c-cta-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--gold);
  padding: 3px 12px;
  margin-bottom: 12px;
}
.p-column-content .c-cta-title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
  margin: 0 0 0.5em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-column-content .c-cta p {
  margin: 0;
  font-size: 15px;
}

/* よくある質問 */
.p-column-content .c-faq {
  border-top: 1px solid var(--line);
  margin: 2em 0;
}
.p-column-content .c-faq dt {
  font-weight: 700;
  padding: 20px 0 0;
}
.p-column-content .c-faq dd {
  margin: 0;
  padding: 8px 0 20px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 768px) {
  .p-column-content {
    font-size: 15px;
    line-height: 1.9;
  }
  .p-column-content h2 {
    font-size: 20px;
    margin: 2.2em 0 0.9em;
  }
  .p-column-content h3 {
    font-size: 17px;
  }
  .p-column-content .c-box,
  .p-column-content .c-cta {
    padding: 20px;
  }
  .p-column-content .c-cta-title {
    font-size: 17px;
  }
}

/* ==========================================================================
   一覧・詳細ページの枠まわり
   カードは Factory Stories 一覧（.c-interwiew-list）を共有し、
   コラム側で増える「日付・カテゴリ」の分だけをここに置く。
   ========================================================================== */

/* 一覧はタイトル帯を出さないぶん、パンくずの直下にカードが詰まる。少しだけ余白を取る。 */
.p-column-index {
  padding-top: 40px;
}
@media screen and (max-width: 768px) {
  .p-column-index {
    padding-top: 24px;
  }
}

/* PCは3列。インタビュー一覧は2列（46.4%）＋space-between だが、3列で space-between のまま
   だと最終行のカードが両端に散るので、gap で組み直す。970px以下は既存の2列のまま。 */
@media screen and (min-width: 971px) {
  .p-interview-list-wrap.p-column-list {
    justify-content: flex-start;
    gap: 0 3.4%;
  }
  .p-column-list .c-interwiew-list {
    width: 31.06%;
    margin-bottom: 48px;
  }
}

/* サムネイルは縦：横＝2:3（横長3:2）に固定する。入稿画像の比率がまちまちでも
   カードの高さが揃うようにするため、はみ出す分は cover で切る。 */
.p-column-list .c-interwiew-list-img {
  aspect-ratio: 3 / 2;
}
.p-column-list .c-interwiew-list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* コラムのカードはタイトルと日付・カテゴリだけで、インタビューのような会社情報が入らない。
   .c-interwiew-list-txt の固定高さ（292〜330px）がそのまま効くと下が大きく空くので、
   中身なりの高さにする。/interview 側に影響しないよう .p-column-list 配下に限定する。 */
.p-column-list .c-interwiew-list-txt {
  height: auto;
  padding-bottom: 26px;
}

/* タイトルの行数でカードの下に白い余りが出ないよう、黒帯を下端まで伸ばす。
   矢印は黒帯の右下（bottom:-8px）に付いているので、これでカードの角に揃う。 */
.p-column-list .c-interwiew-list {
  display: flex;
}
.p-column-list .c-interwiew-list a {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.p-column-list .c-interwiew-list-txt {
  flex: 1 0 auto;
}

.p-column-list .c-interwiew-list-p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.p-column-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: #767676;
}
.p-column-list-cat {
  border: 1px solid #E3E1DD;
  background: #FAF9F7;
  padding: 2px 10px;
}

.p-column-list-empty {
  text-align: center;
  padding: 60px 0 80px;
}

.p-column-page {
  padding: 56px 0 24px;
}
.p-column-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #767676;
}
.p-column-page-cat {
  border: 1px solid #E3E1DD;
  background: #FAF9F7;
  padding: 2px 10px;
}
.p-column-page-title {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: 30px;
  line-height: 1.6;
  font-weight: 500;
  margin: 18px 0 28px;
}
/* 記事のメイン画像も一覧と同じ縦：横＝2:3に揃える */
.p-column-page-thumb {
  margin-bottom: 40px;
  aspect-ratio: 3 / 2;
}
.p-column-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-column-related {
  padding-bottom: 40px;
}
.p-column-related-title {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* 関連記事カード。技術記事のインタビュー紹介カード（tech.css の .p-tech .story）と
   同じ形にする。カード全面をクリックできるよう、タイトルのリンクを ::after で広げる。 */
.p-column-story {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: center;
  border: 1px solid #E3E1DD;
  background: #fff;
  padding: 22px 24px;
  margin-bottom: 16px;
  transition: 0.3s;
}
.p-column-story:hover {
  border-color: #AC7815;
  background: #FAF9F7;
}
.p-column-story .thumb {
  width: 180px;
  flex-shrink: 0;
}
.p-column-story .thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  box-sizing: border-box;
  display: block;
  object-fit: cover;
}
.p-column-story .t {
  flex: 1;
}
.p-column-story .t .lb {
  font-family: 'Didact Gothic', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #222;
  margin-bottom: 6px;
}
.p-column-story .t h3 {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 5px;
}
.p-column-story .t h3 a {
  text-decoration: none;
  color: inherit;
}
.p-column-story .t h3 a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.p-column-story .t p {
  font-size: 14px;
  line-height: 1.8;
  color: #222;
  margin: 0;
}
.p-column-story .ar {
  color: #222;
  font-family: 'Didact Gothic', 'Noto Sans JP', sans-serif;
  font-size: 20px;
}
@media screen and (max-width: 640px) {
  .p-column-story {
    flex-wrap: wrap;
    padding: 18px;
  }
  .p-column-story .thumb {
    width: 100%;
  }
  .p-column-story .ar {
    display: none;
  }
}

@media (max-width: 768px) {
  .p-column-page {
    padding: 32px 0 16px;
  }
  .p-column-page-title {
    font-size: 22px;
  }
  .p-column-related-title {
    font-size: 20px;
  }
}