/**
 * File: subp.css
 * Usage: トップページ以外の共通スタイルを定義します。
 * Example: サブページ共通のヘッダーなど
*/

.ly_subp {
  padding-top: 80px;
  padding-bottom: 80px;
}

.bl_breadcrumb {
  color: #fff;
  font-size: small;
  padding-top: 20px;
}

/* ================================================
  スクロール連動のテキスト点灯（subp.js）
  .js_reveal 内の見出し・段落をグレー→黒へ行ごとに点灯させる。
================================================ */
.js_ciSeg {
  transition: color 0.35s ease-out;
}

/* ================================================
  サブページ共通タイトル（el_subpTitle）
  ○ 和文ラベル(h1) + 英字大見出し（下部にグレーバー）
================================================ */
.el_subpTitle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--c-dark);
}
.el_subpTitle_label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.el_subpTitle_label .el_dot {
  width: 18px;
  height: 18px;
  border-width: 3px;
}
.el_subpTitle_en {
  position: relative;
  z-index: 0;
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.0714rem + 7.1429vw, 7.5rem);
  line-height: 1;
}
/* タイトル下部の背面グレーバー（Rectangle 570） */
.el_subpTitle_en::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -0.15em;
  bottom: 0.1em;
  width: 5.45em;
  max-width: calc(100% + 0.3em);
  height: 0.5em;
  background: #d9d9d9;
  border-radius: 0.08em;
}

/* ================================================
  記事ヘッダー（アイキャッチ + タイトル + メタ情報）
  実績（works）詳細・コラム（post）詳細で共通利用。
================================================ */
.bl_postHero {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bl_postHero_media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-soft);
}
.bl_postHero_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bl_postHero_ttl {
  padding-block: 20px;
  border-bottom: 1px solid var(--c-dark);
  font-size: 1.25rem; /* 20px → PC 24px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--c-dark);
}
/* メタ情報のチップ（カテゴリー・日付・クライアント名・期間） */
.bl_postHero_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}
.bl_postHero_chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--c-soft);
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--c-dark);
}

/* 本文カラム（デザイン実寸 880px）と末尾のボタン */
.bl_postBody {
  max-width: 880px;
  margin-top: 40px;
  margin-inline: auto;
}
.bl_postBody_foot {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}

@media screen and (min-width: 768px) {
  .bl_postHero_ttl {
    font-size: 1.5rem; /* 24px */
  }
  .bl_postBody {
    margin-top: 60px;
  }
}
@media screen and (min-width: 1024px) {
  /* 左：アイキャッチ 560px / 右：タイトル + メタ 480px（gap 40px） */
  .bl_postHero {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
  .bl_postHero_media {
    flex: 1 1 0;
    min-width: 0;
  }
  .bl_postHero_body {
    flex: 0 0 480px;
  }
}

/* ================================================
  関連記事カルーセルの外枠（実績・コラム共通）
  幅は各ページのCSSで指定（実績 1200px / コラム 1280px）。
================================================ */
.ly_relPosts {
  margin-top: 80px;
  padding-inline: 20px;
}
.bl_relPosts {
  margin-inline: auto;
  padding: 40px 20px;
  border-radius: 20px;
  background: var(--c-soft);
}
.bl_relPosts .bl_secHead {
  margin-bottom: 32px;
}
.bl_relPosts .bl_secHead_label {
  gap: 4px;
  font-size: clamp(1.125rem, 0.9107rem + 1.0714vw, 1.5rem); /* 18px → 24px */
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.bl_relPosts .el_dot {
  width: 18px;
  height: 18px;
}
.bl_relPosts .bl_secHead_en {
  font-size: clamp(2.5rem, 1.0714rem + 7.1429vw, 5rem); /* 40px → 80px */
}
/* グレー地に埋もれないようアイキャッチ無しカードの下地を白に */
.bl_relPosts .bl_workCard_img,
.bl_relPosts .bl_columnCard_img {
  background: #fff;
}

@media screen and (min-width: 768px) {
  .ly_relPosts {
    padding-inline: 40px;
  }
  .bl_relPosts {
    padding: 50px 40px;
  }
  .bl_relPosts .bl_secHead {
    margin-bottom: 40px;
  }
}

/* ================================================
  記事本文（the_content の出力）
  実績（works）詳細・コラム（post）詳細で共通利用。
================================================ */
.bl_postContent > * + * {
  margin-top: 16px;
}
/* 回り込み（alignleft / alignright）の解除 */
.bl_postContent::after {
  content: '';
  display: block;
  clear: both;
}
.bl_postContent h2 {
  padding-block: 20px;
  border-bottom: 1px solid var(--c-dark);
  font-size: 1.125rem; /* 18px → PC 20px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--c-dark);
}
/* h3 は先頭にリング状のドット */
.bl_postContent h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem; /* 16px → PC 18px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--c-dark);
}
.bl_postContent h3::before {
  content: '';
  flex: none;
  width: 24px;
  height: 24px;
  border: 5px solid currentColor;
  border-radius: 50%;
}
.bl_postContent h4 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--c-dark);
}
.bl_postContent p {
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #000;
}
.bl_postContent a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.bl_postContent a:hover {
  opacity: 0.6;
}
.bl_postContent img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.bl_postContent ul,
.bl_postContent ol {
  padding-left: 1.5em;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #000;
}
/* base.css の li { list-style: none } を打ち消す */
.bl_postContent ul li {
  list-style: disc;
}
.bl_postContent ol li {
  list-style: decimal;
}
.bl_postContent blockquote {
  padding: 16px 20px;
  border-left: 3px solid var(--c-border);
  background: var(--c-soft);
  border-radius: 4px;
}
.bl_postContent figure {
  margin: 0;
}
.bl_postContent figcaption,
.bl_postContent .wp-caption-text {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
  text-align: center;
}

/* ------------------------------------------------
  画像の配置（エディターの align 系クラス）
  base.css の img { display: block } だけでは
  aligncenter / alignright が効かないため個別に指定。
  回り込み（float）は本文が狭いと文字が数語で折り返して
  読めなくなるため、本文幅に余裕が出る 600px 以上でのみ有効。
  それ未満では float を外し、左右の別なく端に寄せる。
------------------------------------------------ */
.bl_postContent .alignnone {
  margin-inline: 0;
}
.bl_postContent .aligncenter {
  display: block;
  margin-inline: auto;
  text-align: center;
}
.bl_postContent .aligncenter img {
  margin-inline: auto;
}
.bl_postContent .alignleft {
  display: block;
  max-width: 100%;
  margin-inline: 0 auto;
}
.bl_postContent .alignright {
  display: block;
  max-width: 100%;
  margin-inline: auto 0;
}
/* 幅広・全幅（ブロックエディター） */
.bl_postContent .alignwide,
.bl_postContent .alignfull {
  max-width: none;
  width: calc(100% + 40px);
  margin-inline: -20px;
}

/* 本文幅に余裕がある場合のみ回り込みを有効に */
@media screen and (min-width: 600px) {
  .bl_postContent .alignleft {
    float: left;
    max-width: 50%;
    margin: 0 24px 16px 0;
  }
  .bl_postContent .alignright {
    float: right;
    max-width: 50%;
    margin: 0 0 16px 24px;
  }
}

@media screen and (min-width: 768px) {
  .bl_postContent h2 {
    font-size: 1.25rem; /* 20px */
  }
  .bl_postContent h3 {
    font-size: 1.125rem; /* 18px */
  }
  /* 本文幅（880px）を超えて広げる */
  .bl_postContent .alignwide {
    width: min(1080px, calc(100vw - 40px));
    margin-inline: calc((100% - min(1080px, calc(100vw - 40px))) / 2);
  }
  .bl_postContent .alignfull {
    width: 100vw;
    margin-inline: calc((100% - 100vw) / 2);
    border-radius: 0;
  }
  .bl_postContent .alignfull img {
    border-radius: 0;
  }
}

/* ================================================
  アーカイブ共通：カテゴリー絞り込みチップ
  実績（works）・コラム（post）で共用。
================================================ */
.bl_archFilter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bl_archFilter_item {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--c-soft); /* #f5f5f5 */
  color: var(--c-dark);
  /* 中身はカテゴリー名（和文が主）。Arial 指定は誤り（body の Noto Sans JP に委ねる） */
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  transition: background 0.3s ease, color 0.3s ease;
}
.bl_archFilter_item:hover {
  background: #e6e6e6;
}
.bl_archFilter_item.is_active {
  background: var(--c-dark);
  color: #fff;
}

/* ================================================
  アーカイブ共通：ページャー（WP-PageNavi）
  プラグイン標準CSS（pagenavi-css.css）の枠線・余白を打ち消し、
  数字は 28px の角丸スクエア、前後は slider-arrow.svg で表示する。
  プラグインCSSと同じ詳細度で競合しないよう .bl_archPager を前置きする。
================================================ */
.bl_archPager {
  margin-top: 60px;
}
/* PageNavi は数字も矢印も同階層に並ぶため、
   gap は数字どうしの 12px に合わせ、矢印側の margin で 24/40px を作る */
.bl_archPager .wp-pagenavi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* 数字（現在ページ = span.current / 他 = a.page） */
.bl_archPager .wp-pagenavi a.page,
.bl_archPager .wp-pagenavi span.current,
.bl_archPager .wp-pagenavi span.extend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none; /* プラグイン標準の 1px solid #BFBFBF を解除 */
  border-radius: 2px;
  background: var(--c-soft);
  color: var(--c-dark);
  font-family: var(--font-en);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.bl_archPager .wp-pagenavi a.page:hover {
  background: #e6e6e6;
}
.bl_archPager .wp-pagenavi span.current {
  background: var(--c-dark);
  color: #fff;
  font-weight: 400; /* プラグイン標準の bold を解除 */
}
.bl_archPager .wp-pagenavi span.extend {
  background: none;
}
/* 前後の矢印：1つのSVG（slider-arrow.svg）を共有し、「前へ」は180°回転。
   gap(12px) に margin を足して数字グループとの間隔を 24px にする */
.bl_archPager .wp-pagenavi a.previouspostslink,
.bl_archPager .wp-pagenavi a.nextpostslink {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0;
  border: none;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.bl_archPager_arrow {
  display: block;
  width: 40px;
  height: auto;
}
.bl_archPager .wp-pagenavi a.previouspostslink {
  margin: 0 12px 0 0;
}
.bl_archPager .wp-pagenavi a.previouspostslink .bl_archPager_arrow {
  transform: rotate(180deg);
}
.bl_archPager .wp-pagenavi a.nextpostslink {
  margin: 0 0 0 12px;
}
.bl_archPager .wp-pagenavi a.previouspostslink:hover,
.bl_archPager .wp-pagenavi a.nextpostslink:hover {
  opacity: 0.6;
}
/* 「Page X of Y」は使わない */
.bl_archPager .wp-pagenavi span.pages {
  display: none;
}

@media screen and (min-width: 768px) {
  .bl_archFilter_item {
    font-size: 1rem; /* 16px */
  }
}
@media screen and (min-width: 1024px) {
  /* デザイン実寸：矢印と数字グループの間隔 40px（gap 12px + margin 28px） */
  .bl_archPager .wp-pagenavi a.previouspostslink {
    margin-right: 28px;
  }
  .bl_archPager .wp-pagenavi a.nextpostslink {
    margin-left: 28px;
  }
}

/* ================================================
  下層ページ共通パンくず（CONTACT下・フッター直上）
================================================ */
/* 上の余白は .ly_contact の padding-bottom が担うため下側のみ */
.bl_subpCrumb {
  padding-block: 0 16px;
}
.bl_subpCrumb_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* 中身は「TOP」以外ほぼ和文ページ名。Arial 指定は誤り（body の Noto Sans JP に委ねる。
     「TOP」だけは subp-crumb.php 側で .hp_en を付けて --font-en にしている） */
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--c-dark);
}
.bl_subpCrumb_item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bl_subpCrumb_item + .bl_subpCrumb_item::before {
  content: '/';
  color: var(--c-dark);
}
.bl_subpCrumb a {
  color: var(--c-dark);
  transition: opacity 0.3s ease;
}
.bl_subpCrumb a:hover {
  opacity: 0.6;
}

@media screen and (min-width: 768px) {
  .ly_subp {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .bl_subpCrumb_list {
    font-size: 1rem;
  }
}
@media screen and (min-width: 1280px) {
  .ly_subp {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* ================================================
  共通メッセージカード（bl_msgCard）
  グレーのカードに見出し・本文・ボタンを中央寄せで置く。
  サンクスページ（page-thanks.php）と 404（404.php）で共用。
  Design: figma「まーける様 / サンクスページ」281-4149
================================================ */
.bl_msgSec {
  padding-block: 40px 56px;
}
.bl_msgCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 40px 20px;
  border-radius: 20px;
  background: var(--c-soft);
  text-align: center;
}
.bl_msgCard_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6em;
  width: 100%;
}
.bl_msgCard_ttl {
  /* 24px → 40px */
  font-size: clamp(1.5rem, 1.0775rem + 1.8028vw, 2.5rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #000;
}
.bl_msgCard_txt {
  font-size: 16px;
  line-height: 1.6;
}

@media screen and (min-width: 768px) {
  .bl_msgSec {
    padding-block: 56px 80px;
  }
  .bl_msgCard {
    gap: 40px;
    padding: 60px 40px 40px;
  }
  .bl_msgCard_body {
    /* デザインの本文幅 862px */
    max-width: 862px;
  }
  /* 見出しと本文の間は 40px */
  .bl_msgCard_ttl {
    margin-bottom: 0.6em;
  }
}