@charset "UTF-8";

/* ============================================================
   /works/（看板ワーク）ページ固有スタイル（プレフィックス: WK-）

   設計方針（CLAUDE.md / about.css に準拠）:
   ・レイアウト幅・余白・背景・文字色は共通クラス（Wrapper1000 / WrapperP /
     heading / lead / FS120 / FCDarkBlue / StatLG / StatNavy / reveal 等）に任せる。
   ・このファイルに持つのは「共通クラスで賄えない独自部分」だけ:
       1) 英語overline（WK-ov）         … about の AB-ov と同じ見た目で統一
       2) HERO 見出し（WK-hero__title）
       3) 記事カード（WK-card）とサムネ（WK-card__thumb）
       4) タグバッジ（WK-tag / WK-tag--commerce）
       5) 設備の得意・不得意ボックス（WK-able）
   配色トークン（about と共通）:
       濃紺 #02386d（= 共通 FCDarkBlue）/ 青 #2489ce / 淡青背景 #f5faff
   ============================================================ */

/* 1) ============================ 英語overline ============================
   about の AB-ov と同一の見た目。ページ間でトーンを揃えるため値を合わせている。
   文字色は持たせず、共通の文字色クラス（通常は FCBlue2＝#2489ce、濃紺背景の上は
   FCBlue3＝#8cc4f3）を markup 側で併用する。装飾線(::before/::after)は currentColor
   を使うので、併用した文字色クラスに自動で追従する。 */
.WK-ov {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin: 0 0 .9em;
}

.WK-ov::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
}

/* 中央寄せ（is-center）のときは右側にも線を出す */
.WK-ov.is-center {
  justify-content: center;
}

.WK-ov.is-center::after {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
}


/* 2) ============================ HERO 見出し ============================ */
/* HERO 背景：白→淡青のグラデ（about の AB-hero と統一） */
.WK-hero {
  background: linear-gradient(180deg, #fff 0%, #f5faff 100%);
}

.WK-hero__title {
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.32;
  font-weight: 900;
  letter-spacing: .01em;
  margin: .1em 0 0;
}

.WK-goal__title {
  font-size: clamp(1.8rem, 5vw, 2.2rem);
  line-height: 1.32;
  font-weight: 900;
  letter-spacing: .01em;
  margin: .1em 0 0;
}


/* 3) ============================ 記事カード（WK-card） ============================
   枠・角丸・ホバーの浮き上がりは about の AB-cap と同じ見せ方で統一。 */
.WK-card {
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.WK-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -26px rgba(2, 56, 109, .55);
}

/* サムネは横3:2で中央クロップ。カードの上辺角丸に合わせる */
.WK-card__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.WK-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.WK-card__body {
  padding: 16px 18px 18px;
}

.WK-card__title {
  font-size: 1.15rem;
  line-height: 1.5;
}

.WK-card__summary {
  font-size: .92rem;
}


/* 4) ============================ タグバッジ（WK-tag） ============================
   一覧カードに並べるラベル。フィルタUIは入れない（ラベル表示のみ）。 */
.WK-tags {
  gap: 6px;
}

.WK-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.6;
  color: #2489ce;
  background: #f5faff;
  border: 1px solid #d6e7f7;
}

/* 商行動タグ（ウェブオーダーOK / 別注相談OK）は緑系で「行動できる」ことを示す */
.WK-tag--commerce {
  color: #1f8a5b;
  background: #f1faf4;
  border-color: #c9ebd7;
}


/* 5) ============================ STEP見出し（WK-step） ============================
   yasec(business)流の「STEP ／ 大きな番号 ／ タイトル」見出し。
   構成：小さな「STEP」ラベル＋特大の番号（横並び）→ 下にタイトル。
   左に縦線アクセントを敷き、工程の区切りを視覚化する。
   文字色は WK-ov と同じ方針で markup 側の共通色クラス（FCBlue2 等）に任せ、
   縦線(::before)・番号は currentColor で追従させる。 */
.WK-step {
  position: relative;
  padding-left: 20px;
}

/* 縦線アクセント */
.WK-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  bottom: .25em;
  width: 3px;
  background: currentColor;
  border-radius: 2px;
}

/* 「STEP」小ラベル＋特大番号（ベースライン揃えの横並び） */
.WK-step__no {
  display: flex;
  align-items: baseline;
  gap: .45em;
  line-height: 1;

}

.WK-step__label {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.WK-step__num {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: .02em;
}


/* 看板ワーク記事用：2列リスト。横並び画像などを2カラムで並べ、左右の余白（gap）を4%にする。
   gapを4%にした分、li幅も calc((100% - 4%)/2) で2等分し、2列が崩れないようにする。 */
.WK-gallery2 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 4%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.WK-gallery2>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  flex: 0 0 calc((100% - 4%) / 2);
}

.WK-gallery2>li p {
  text-align: left;
}

@media screen and (max-width: 768px) {

  .WK-gallery2>li p {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* 看板ワーク記事用：3列リスト。PCでは3カラム、SP（768px以下）では2カラムに落とす。
   左右の余白（gap）は WK-gallery2 と揃えて4%。
   PCはgap4%が2本入るので li幅は calc((100% - 8%)/3)、
   SPはgap4%が1本なので li幅は calc((100% - 4%)/2) で2等分する。 */
.WK-gallery3 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 4%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.WK-gallery3>li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  flex: 0 0 calc((100% - 8%) / 3);
}

.WK-gallery3>li p {
  text-align: left;
}

@media screen and (max-width: 768px) {

  /* SPは2列に変更（gap1本分の4%を引いて2等分） */
  .WK-gallery3>li {
    flex: 0 0 calc((100% - 4%) / 2);
  }

  .WK-gallery3>li p {
    padding-left: 10px;
    padding-right: 10px;
  }
}