@charset "utf-8";
/* ==========================================================================
   base.css — 素の要素のスタイル、コンテナ、共通の下地
   命名規則
     l-   レイアウト
     c-   コンポーネント（サイト全体で再利用）
     p-   プロジェクト（そのセクション固有）
     u-   ユーティリティ
     js-  JSフック（スタイルを当てない）
   WordPress側と衝突する .post / .page / .entry / .wp-* は使わない。
   ========================================================================== */

body {
  background: var(--c-page);
  color: var(--c-text);
  font-family: var(--ff-gothic);
  font-size: var(--fz-md);
  font-weight: 500;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   コンテナ
   方針A（可変）：外側は画面幅いっぱい、内側は max-width で頭打ち。
   1920px超では中身の幅は伸びず、背景と見切れ要素だけが広がる。
   -------------------------------------------------------------------------- */
.l-container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.l-container--narrow {
  width: min(var(--container-narrow), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* 右端まで見切れさせる要素（FVのNEW CLIPSなど）で使う。
   コンテナ左端を保ったまま、右側だけ画面端まで伸ばす。 */
.l-bleed-right {
  margin-right: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   縦書き
   STEP1の検証結果：text-orientation は upright を既定とする。
   英数字が混ざる箇所だけ .c-vertical--mixed で上書きする。
   -------------------------------------------------------------------------- */
.c-vertical {
  font-family: var(--ff-maru);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: "vpal" 1;
  line-height: var(--lh-vertical);
  letter-spacing: var(--ls-vertical);
  white-space: nowrap;   /* 改行は <br> で明示的に制御する */
}

.c-vertical--mixed { text-orientation: mixed; }

/* 数字の縦中横（mixed と併用する） */
.c-tcy { text-combine-upright: all; }

/* --------------------------------------------------------------------------
   波形の区切り
   STEP1の検証結果：方式1（preserveAspectRatio="none" で伸縮）を採用。
   使い方：
     <div class="c-wave c-wave--to-pale"> ... インラインSVG ... </div>
   -------------------------------------------------------------------------- */
.c-wave {
  position: relative;
  z-index: var(--z-wave);
  line-height: 0;
}

.c-wave svg {
  display: block;
  width: 100%;
  height: var(--wave-h);
}

.c-wave--to-pale  svg path { fill: var(--c-pale); }
.c-wave--to-white svg path { fill: var(--c-white); }

/* 下側の波（形を上下反転して使う場合） */
.c-wave--flip svg { transform: scaleY(-1); }

/* --------------------------------------------------------------------------
   リボン見出し
   STEP1の検証結果：変種A（右下が張り出す）を採用。
   -------------------------------------------------------------------------- */
.c-ribbon {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 calc(var(--ribbon-slant) + 18px) 0 24px;
  clip-path: polygon(0 0, calc(100% - var(--ribbon-slant)) 0, 100% 100%, 0 100%);
  background: var(--c-teal);
  color: var(--c-white);
  font-size: var(--fz-variable-ssm);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  line-height: 1;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   カテゴリ色
   data-cat を親に付けると、配下の --cat-current が切り替わる。
   -------------------------------------------------------------------------- */
[data-cat="know"] { --cat-current: var(--cat-know); }
[data-cat="read"] { --cat-current: var(--cat-read); }
[data-cat="join"] { --cat-current: var(--cat-join); }
[data-cat="work"] { --cat-current: var(--cat-work); }

/* --------------------------------------------------------------------------
   ユーティリティ
   -------------------------------------------------------------------------- */
.u-sp-only  { display: none; }
.u-tab-only { display: none; }

@media screen and (max-width: 1199px) {
  .u-pc-only  { display: none; }
  .u-tab-only { display: revert; }
}

@media screen and (max-width: 767px) {
  .u-sp-only  { display: revert; }
  .u-tab-only { display: none; }
}

/* スクリーンリーダー向けにのみ残すテキスト */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* スクロールを止める（ドロワー展開時に body へ付与） */
.u-scroll-lock {
  overflow: hidden;
}