/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   JKCK 会員サイト デザインシステム — 2026-08
   ローカル正本: /Volumes/ORICO/ws/jkck/astra-child/style-block.css
   カスケード位置: 全67枚中62番目。Astra / LearnDash / WooCommerce(classic) /
   WPUM / Elementor には勝つ。wp-custom-css(65) と WooCommerce Blocks(66-67)
   には負けるため、その2つには詳細度で対抗している。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root{
  /* ダーク面（ヘッダー・フッター・ヒーロー・ドロワー） */
  --jk-ink:#0B0C10;
  --jk-ink-2:#15171D;
  --jk-ink-3:#22262F;

  /* ゴールド */
  --jk-gold:#E9B667;
  --jk-gold-soft:#F5E3C4;
  --jk-gold-line:rgba(233,182,103,.34);

  /* オレンジ（主アクション）
     orange は白背景の文字だと 3.0:1 で WCAG AA に届かないため、
     テキストリンク用に orange-deep(4.6:1) を分けている。 */
  --jk-orange:#F76503;
  --jk-orange-hi:#FF7A29;
  --jk-orange-deep:#C24E02;
  --jk-orange-deeper:#A03F01;

  /* 明るい面 */
  --jk-paper:#FFFFFF;
  --jk-paper-2:#F7F8FA;
  --jk-paper-3:#EDEFF3;
  --jk-line:#E4E6EB;
  --jk-line-2:#D3D7DE;

  /* 文字 */
  --jk-text:#14161B;
  --jk-text-2:#3A4150;
  --jk-muted:#6B7280;
  --jk-text-inv:#FFFFFF;

  /* 意味色（3つだけ。青は全廃） */
  --jk-ok:#1B7F4E;
  --jk-warn:#B26A00;
  --jk-danger:#C2401B;

  /* 書体 */
  --jk-ff-jp:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  --jk-ff-mono:"Chivo Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* タイプスケール */
  --jk-fs-3xl:clamp(30px,4vw,46px);
  --jk-fs-2xl:clamp(24px,3vw,32px);
  --jk-fs-xl:20px;
  --jk-fs-lg:17px;
  --jk-fs-md:15px;
  --jk-fs-sm:13px;
  --jk-fs-xs:11px;

  /* 余白 */
  --jk-s-1:4px;  --jk-s-2:8px;  --jk-s-3:12px; --jk-s-4:16px; --jk-s-5:24px;
  --jk-s-6:32px; --jk-s-7:48px; --jk-s-8:64px; --jk-s-9:96px;

  /* 角丸 */
  --jk-r-sm:6px; --jk-r-md:12px; --jk-r-lg:16px; --jk-r-pill:999px;

  /* 段差 */
  --jk-e-1:0 1px 2px rgba(11,12,16,.06),0 1px 3px rgba(11,12,16,.05);
  --jk-e-2:0 4px 12px rgba(11,12,16,.08);
  --jk-e-3:0 12px 32px rgba(11,12,16,.14);
  --jk-e-gold:0 8px 22px rgba(247,101,3,.30);

  /* サムネ欠損時のプレースホルダ（協会ロゴの家形） */
  --jk-ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='52' viewBox='0 0 104 52' fill='none' stroke='%23E9B667' stroke-width='1.6' opacity='.5'%3E%3Cpath d='M6 46V24L20 12l14 12v22z'/%3E%3Cpath d='M36 46V24L50 12l14 12v22z'/%3E%3Cpath d='M66 46V24L80 12l14 12v22z'/%3E%3Cpath d='M2 46h100'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Astra グローバル変数の差し替え
   サイト全体の青の発生源はここ3つだった（#046bd2 / #045cb4 / #F0F5FA）。
   コンテンツ幅 948px も左右の死領域の原因なので広げる。
   -------------------------------------------------------------------------- */
:root{
  --ast-global-color-0:var(--jk-orange-deep);
  --ast-global-color-1:var(--jk-orange-deeper);
  --ast-global-color-2:var(--jk-text);
  --ast-global-color-3:var(--jk-text-2);
  --ast-global-color-5:var(--jk-paper-2);
  --ast-global-color-7:var(--jk-line-2);
  --ast-normal-container-width:1200px;
  --ast-narrow-container-width:820px;
  --ast-code-block-background:var(--jk-paper-3);
  --ast-comment-inputs-background:var(--jk-paper-2);
  --ast-widget-bg-color:var(--jk-paper-2);
  --ast-wc-container-head-bg-color:var(--jk-paper-2);
  --ast-search-border-color:var(--jk-line-2);
  --ast-title-layout-bg:var(--jk-paper-2);
}

/* --------------------------------------------------------------------------
   3. ベース／タイポグラフィ
   -------------------------------------------------------------------------- */
body,
button, input, select, textarea,
.ast-container{
  font-family:var(--jk-ff-jp);
}
body{
  font-size:var(--jk-fs-md);
  line-height:1.85;
  color:var(--jk-text);
  background-color:var(--jk-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.entry-title,
.woocommerce-loop-product__title{
  font-family:var(--jk-ff-jp);
  line-height:1.34;
  color:var(--jk-text);
  text-wrap:balance;
}
h1,.entry-title{font-size:var(--jk-fs-3xl);font-weight:900;letter-spacing:.01em}
h2{font-size:var(--jk-fs-2xl);font-weight:700}
h3{font-size:var(--jk-fs-xl);font-weight:700}
h4{font-size:var(--jk-fs-lg);font-weight:700}
p{line-height:1.85}

/* 数字・ラベルは等幅で桁を揃える */
.price, .woocommerce-Price-amount,
.ld-progress-steps, .ld-progress-percentage,
.woocommerce-result-count,
time, .posted-on{
  font-family:var(--jk-ff-mono);
  font-variant-numeric:tabular-nums;
}

/* リンク：青を廃止。本文リンクは AA を満たす orange-deep */
a{color:var(--jk-orange-deep)}
a:hover,a:focus{color:var(--jk-orange-deeper)}

/* フォーカスリング */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--jk-orange);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* 全ページのスクロールを実用速度に戻す
   （html{scroll-behavior:smooth} 下でスクロールが 300ms で 11.5px しか
   進まない状態だった） */
html{scroll-behavior:auto}

/* --------------------------------------------------------------------------
   4. ボタン統合
   8種類あった見た目を primary / secondary / ghost / danger の4種へ。
   基準はログイン画面のオレンジ→ゴールド。
   -------------------------------------------------------------------------- */
.jk-btn,
.ld_course_grid .ld_course_grid_button a.btn,
.learndash-wrapper .ld-button:not(.ld-button-transparent),
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.add_to_cart_button,
.woocommerce button.button.add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-form-login button.button,
.woocommerce .checkout-button,
.wpum-form input[type="submit"],
.wpum-form button[type="submit"],
.ast-custom-button-link .ast-custom-button,
.ast-builder-button-wrap .ast-custom-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--jk-s-2);
  min-height:46px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:10px;
  background:linear-gradient(135deg,var(--jk-orange) 0%,var(--jk-gold) 100%);
  color:var(--jk-text-inv);
  font-family:var(--jk-ff-jp);
  font-size:var(--jk-fs-md);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  text-decoration:none;
  text-transform:none;
  box-shadow:var(--jk-e-gold);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.jk-btn:hover,
.ld_course_grid .ld_course_grid_button a.btn:hover,
.learndash-wrapper .ld-button:not(.ld-button-transparent):hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce button.button.add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .checkout-button:hover,
.wpum-form input[type="submit"]:hover,
.wpum-form button[type="submit"]:hover,
.ast-custom-button-link .ast-custom-button:hover{
  background:linear-gradient(135deg,var(--jk-orange-hi) 0%,#F0C481 100%);
  color:var(--jk-text-inv);
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(247,101,3,.34);
}

/* secondary（ink） */
.jk-btn--secondary,
.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.checkout-button),
.woocommerce button.button:not(.alt):not(.add_to_cart_button),
.woocommerce input.button:not(.alt){
  background:var(--jk-ink);
  color:var(--jk-text-inv);
  box-shadow:none;
  text-decoration:none;
}
.jk-btn--secondary:hover,
.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.checkout-button):hover,
.woocommerce button.button:not(.alt):not(.add_to_cart_button):hover,
.woocommerce input.button:not(.alt):hover{
  background:var(--jk-ink-3);
  color:var(--jk-text-inv);
}

/* ghost */
.jk-btn--ghost,
.wcprof-acc-btn{
  background:transparent;
  color:var(--jk-text);
  border-color:var(--jk-line-2);
  box-shadow:none;
}
.jk-btn--ghost:hover,
.wcprof-acc-btn:hover{background:var(--jk-paper-3);color:var(--jk-text)}

/* danger */
.jk-btn--danger{background:var(--jk-danger);color:var(--jk-text-inv);box-shadow:none}

/* ダーク面上のセカンダリ */
.jk-btn--onink{background:transparent;color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none}
.jk-btn--onink:hover{background:rgba(255,255,255,.09);color:#fff}

.jk-btn--block{width:100%}
.jk-btn--sm{min-height:38px;font-size:var(--jk-fs-sm);padding:0 16px;border-radius:8px}

/* 8大特典の「詳しく見る」— 下線を外す */
.elementor-button .elementor-button-text{text-decoration:none}
.elementor-button-link{text-decoration:none}

/* --------------------------------------------------------------------------
   5. チップ／バッジ
   -------------------------------------------------------------------------- */
.jk-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border:1px solid;
  border-radius:var(--jk-r-pill);
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.6;
}
.jk-chip--free{background:var(--jk-gold-soft);color:#6B4A10;border-color:#E7CFA4}
.jk-chip--price{background:var(--jk-ink);color:#fff;border-color:var(--jk-ink)}
.jk-chip--cat{background:var(--jk-paper);color:var(--jk-muted);border-color:var(--jk-line-2)}
.jk-chip--active{background:#EAF3EE;color:var(--jk-ok);border-color:#CBE2D6}
.jk-chip--paused{background:#FBEDE8;color:var(--jk-danger);border-color:#F0D3C8}

/* カテゴリラベル：色を増やさず左罫線で区別する */
.jk-chip--info,.jk-chip--mem,.jk-chip--imp{border-radius:4px}
.jk-chip--info{background:var(--jk-paper);color:var(--jk-text);border-color:var(--jk-line-2);border-left:3px solid var(--jk-muted)}
.jk-chip--mem{background:#EAF3EE;color:var(--jk-ok);border-color:#CBE2D6;border-left:3px solid var(--jk-ok)}
.jk-chip--imp{background:#FDF4E3;color:var(--jk-warn);border-color:#EEDCB6;border-left:3px solid var(--jk-warn)}

/* --------------------------------------------------------------------------
   6. カード：LearnDash コースグリッド
   Bootstrap3 由来の flex 行（margin:0 -15px / width:326px 固定）を
   CSS Grid に置き換える。これがガタつきの構造的原因。
   -------------------------------------------------------------------------- */
.ld-course-list-items.row,
.ld-course-list-items{
  display:grid!important;
  /* 2026-08-25: auto-fill をやめて列数を固定した。/shop/（Astra の
     columns-4）は 4/3/2 列の固定で、auto-fill だと同じ窓幅でも列数が
     ずれてカードの大きさが揃わなかった（1280px で 3列295px 対 4列216px）。
     しきい値も Astra に合わせる（921px / 544px）。 */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--jk-s-5);
  margin:0!important;
  align-items:stretch;
}
.ld_course_grid{
  width:auto!important;
  max-width:none!important;
  float:none!important;
  padding:0!important;
  margin:0!important;
  display:flex;
}
.ld_course_grid article.thumbnail{
  display:flex;
  flex-direction:column;
  width:100%;
  margin:0;
  padding:0;
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  overflow:hidden;
  box-shadow:var(--jk-e-1);
  transition:box-shadow .18s ease, transform .18s ease;
}
.ld_course_grid article.thumbnail:hover{box-shadow:var(--jk-e-3);transform:translateY(-2px)}

/* メディア枠：比率を固定し、欠損時はプレースホルダを見せる */
.ld_course_grid article.thumbnail > a{
  display:block;
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background-color:var(--jk-ink-2);
  background-image:var(--jk-ph),radial-gradient(120% 120% at 30% 0%,#22262F 0%,#0B0C10 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:104px auto,cover;
}
/* 画像はトリミングせず全体を見せる（2026-09-09）。器の比率は 16/10 のまま
   にしてカードの高さを揃え、はみ出た側は明るい面を敷く。画像が無いカードは
   上の暗いプレースホルダのままにしたいので、:has(img) で切り替える。 */
.ld_course_grid article.thumbnail > a:has(img){
  background-color:var(--jk-paper-3);
  background-image:none;
  border-bottom:1px solid var(--jk-line);
}
.ld_course_grid article.thumbnail > a img{
  width:100%!important;
  height:100%!important;
  max-width:none;
  object-fit:contain;
  display:block;
  margin:0;
}

/* 緑リボン（#5CB85C / left:-8px）→ ゴールドのチップ。枠外突出をやめる */
.ld_course_grid .ribbon{
  position:absolute;
  top:11px;
  left:11px;
  right:auto;
  z-index:2;
  padding:4px 10px;
  background:var(--jk-gold-soft);
  color:#6B4A10;
  border:1px solid #E7CFA4;
  border-radius:var(--jk-r-pill);
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.6;
  text-transform:none;
  white-space:nowrap;
  box-shadow:none;
}

.ld_course_grid .caption{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:11px;
  padding:15px 16px 16px;
}
.ld_course_grid .entry-title,
.ld_course_grid .caption h3{
  margin:0;
  font-size:15.5px;
  font-weight:700;
  line-height:1.55;
  color:var(--jk-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.55em * 2);
}
/* ボタンを最下部に固定。これがカードのガタつきの直接原因だった */
.ld_course_grid .ld_course_grid_button{margin-top:auto;padding:0}
.ld_course_grid .ld_course_grid_button a.btn{width:100%;min-height:40px;font-size:var(--jk-fs-sm);border-radius:8px;padding:0 14px}

/* 進捗：赤い「0%完了」を廃止 */
.ld_course_grid .ld-progress,
.learndash-wrapper .ld-progress.ld-progress-inline{
  margin:0;
  padding:0;
  background:transparent;
  border:0;
}
.ld_course_grid .ld-progress-bar,
.learndash-wrapper .ld-progress-bar{
  height:5px;
  background:var(--jk-paper-3);
  border:0;
  border-radius:99px;
  overflow:hidden;
}
.ld_course_grid .ld-progress-bar .ld-progress-bar-percentage,
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage,
.learndash-wrapper .ld-secondary-background{
  background:linear-gradient(90deg,var(--jk-orange),var(--jk-gold))!important;
  border-radius:99px;
}
.ld_course_grid .ld-progress-percentage,
.learndash-wrapper .ld-progress-percentage,
.learndash-wrapper .ld-secondary-color{
  color:var(--jk-muted)!important;
  font-family:var(--jk-ff-mono);
  font-size:10.5px;
  font-weight:600;
}
.ld_course_grid .ld-progress-steps,
.learndash-wrapper .ld-progress-steps{color:var(--jk-muted);font-size:10.5px}

/* --------------------------------------------------------------------------
   7. カード：WooCommerce ショップ
   -------------------------------------------------------------------------- */
.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--jk-s-5);
  margin:0;
  padding:0;
  list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none;display:none}
.woocommerce ul.products li.product{
  display:flex;
  flex-direction:column;
  width:auto!important;
  margin:0!important;
  padding:0;
  float:none!important;
  clear:none!important;
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  overflow:hidden;
  box-shadow:var(--jk-e-1);
  transition:box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover{box-shadow:var(--jk-e-3);transform:translateY(-2px)}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  margin:0;
  background-color:var(--jk-ink-2);
  background-image:var(--jk-ph),radial-gradient(120% 120% at 30% 0%,#22262F 0%,#0B0C10 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:104px auto,cover;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap > a{display:block;height:100%}
/* 資料の表紙を切り取らずに全体を見せる（2026-09-09）。器の比率は 16/10 のまま
   にしてカードの高さを揃え、はみ出た側は明るい面を敷く。画像が無い商品は
   上の暗いプレースホルダのままにしたいので、:has(img) で切り替える。
   ※ 一覧の画像サイズは woocommerce_thumbnail（300×300 の切り抜き）ではなく
   　 woocommerce_single（無加工）に変えてある → woo-tweaks-block.php */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap:has(img:not(.woocommerce-placeholder)){
  background-color:var(--jk-paper-3);
  background-image:none;
  border-bottom:1px solid var(--jk-line);
}
/* 画像未設定の商品は WooCommerce の灰色プレースホルダではなく、
   上の暗いプレースホルダ（協会の家アイコン）を見せる。 */
.woocommerce ul.products li.product img.woocommerce-placeholder{display:none}
.woocommerce ul.products li.product img{
  width:100%;
  height:100%;
  object-fit:contain;
  margin:0;
  display:block;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:9px;
  padding:15px 16px 16px;
}
.woocommerce ul.products li.product .ast-woo-product-category{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  letter-spacing:.06em;
  color:var(--jk-muted);
  text-transform:none;
  margin:0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  margin:0;
  padding:0;
  font-size:15.5px;
  font-weight:700;
  line-height:1.55;
  color:var(--jk-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.55em * 2);
}
.woocommerce ul.products li.product .price{
  margin:0;
  color:var(--jk-text);
  font-size:var(--jk-fs-lg);
  font-weight:600;
}
.woocommerce ul.products li.product .price del{color:var(--jk-muted);font-weight:400}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--jk-orange-deep)}
.woocommerce ul.products li.product a.button{
  margin-top:auto;
  width:100%;
  min-height:40px;
  font-size:var(--jk-fs-sm);
  border-radius:8px;
  padding:0 14px;
}
/* サムネ上のホバー用カートアイコンは非表示（本体ボタンと重複） */
.woocommerce ul.products li.product .ast-on-card-button{display:none}

/* ショップのヘッダー周り */
.woocommerce-breadcrumb{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  color:var(--jk-muted);
  letter-spacing:.04em;
}
.woocommerce-breadcrumb a{color:var(--jk-muted)}
.woocommerce-products-header__title,
.woocommerce-products-header .page-title{
  font-size:var(--jk-fs-2xl);
  font-weight:700;
  letter-spacing:.01em;
}
.woocommerce .woocommerce-result-count{color:var(--jk-muted);font-size:var(--jk-fs-sm)}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select{
  min-height:42px;
  padding:0 34px 0 12px;
  border:1px solid var(--jk-line-2);
  border-radius:10px;
  background:var(--jk-paper);
  color:var(--jk-text);
  font-size:var(--jk-fs-sm);
}

/* --------------------------------------------------------------------------
   8. フォーム（WPUM / WooCommerce / JetFormBuilder 共通）
   -------------------------------------------------------------------------- */
.jk-input,
input[type="text"],input[type="email"],input[type="password"],
input[type="tel"],input[type="url"],input[type="number"],input[type="search"],
select,textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wpum-form input[type="text"],
.wpum-form input[type="email"],
.wpum-form input[type="password"]{
  min-height:46px;
  padding:0 14px;
  background:var(--jk-paper);
  color:var(--jk-text);
  border:1px solid var(--jk-line-2);
  border-radius:10px;
  font-family:var(--jk-ff-jp);
  font-size:var(--jk-fs-md);
  box-shadow:none;
}
textarea,
.woocommerce form .form-row textarea{min-height:120px;padding:12px 14px;line-height:1.8}
input:focus,select:focus,textarea:focus,
.woocommerce form .form-row input.input-text:focus{
  border-color:var(--jk-orange);
  box-shadow:0 0 0 4px rgba(247,101,3,.14);
  outline:none;
}
label,
.woocommerce form .form-row label,
.wpum-form label{
  font-size:var(--jk-fs-sm);
  font-weight:700;
  color:var(--jk-text);
  letter-spacing:.02em;
}
.jk-hint,.description,.woocommerce form .form-row .description{
  font-size:11.5px;
  color:var(--jk-muted);
}

/* --------------------------------------------------------------------------
   9. ヘッダー／グローバルナビ
   -------------------------------------------------------------------------- */
.site-header,
.ast-primary-header-bar,
.ast-below-header-bar{
  /* !important は Astra のカスタマイザー由来インラインCSSに勝つため。
     色はセクション40の --jk-shell を参照する。 */
  background-color:var(--jk-shell)!important;
  border-bottom:0;
}
.site-below-header-wrap,
.ast-below-header-wrap{
  background-color:var(--jk-ink-2)!important;
  border-top:1px solid rgba(233,182,103,.16);
}
.site-header .main-header-menu > .menu-item > .menu-link,
.ast-builder-menu .main-header-menu > .menu-item > .menu-link{
  color:rgba(255,255,255,.86)!important;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.02em;
  padding-inline:14px;
}
.site-header .main-header-menu > .menu-item > .menu-link:hover,
.site-header .main-header-menu > .menu-item.current-menu-item > .menu-link,
.site-header .main-header-menu > .menu-item.current_page_item > .menu-link{
  color:var(--jk-gold)!important;
}
/* ナビが2行に折り返していたので詰める */
.ast-builder-menu-1 .main-header-menu{flex-wrap:nowrap}
.main-header-menu .sub-menu{background:var(--jk-ink-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--jk-r-md);overflow:hidden;padding:6px}
.main-header-menu .sub-menu .menu-link{color:rgba(255,255,255,.82)!important;border-radius:6px}
.main-header-menu .sub-menu .menu-link:hover{background:rgba(255,255,255,.07);color:#fff!important}

/* ハンバーガー */
.menu-toggle,
.ast-mobile-menu-trigger-minimal{background:transparent!important;color:#fff!important;min-height:46px;min-width:46px}
.menu-toggle .mobile-menu-toggle-icon svg{fill:#fff}

/* ヘッダーCTA：モバイルで幅0になって消えていた導線を回復 */
.ast-builder-button-wrap .ast-custom-button{white-space:nowrap}
.ast-builder-button-wrap{min-width:0}

/* --------------------------------------------------------------------------
   10. モバイルドロワー
   本文を押し下げるアコーディオンから ink 面のオーバーレイへ。
   -------------------------------------------------------------------------- */
@media (max-width:921px){
  /* **ヘッダーの下端に合わせるのに固定値を使わない（2026-08-27 に修正）。**
     以前は position:fixed ＋ top:64px だったが、モバイルヘッダーの実高は 89px
     なので 25px 食い込み、さらにページ最上部では管理バーぶん（46px）ずれて
     ロゴと閉じるボタンがドロワーの下に隠れていた。

     Astra は器の `.ast-mobile-header-content` を `#masthead` に対して
     `position:absolute; top:89px`（＝ヘッダーバーの高さ）で置いている。
     その中で絶対配置すれば、**管理バーの有無にもスクロール位置にも関係なく**
     ヘッダーの下端にぴったり付く。高さの数値を持たなくて済むのが肝。 */
  .ast-main-header-nav-open .main-header-bar-navigation{
    position:absolute;
    inset:0 0 auto 0;
    /* 箱の下端はビューポートの下端よりヘッダーの高さぶん（89〜135px）
       はみ出す。見えない場所なので地色としては問題ないが、項目が増えて
       内側スクロールになったときに最後の項目が画面外に残らないよう、
       はみ出しぶんを余白で吸収しておく。 */
    height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--jk-ink);
    z-index:9999;
    padding-bottom:calc(var(--jk-s-8) + 140px);
  }
  .main-header-bar-navigation .main-header-menu{background:transparent}
  .main-header-bar-navigation .menu-item .menu-link{
    min-height:54px;
    display:flex;
    align-items:center;
    padding:0 18px;
    color:rgba(255,255,255,.86)!important;
    font-size:14.5px;
    font-weight:700;
    border-bottom:1px solid rgba(255,255,255,.06);
    background:transparent;
  }
  .main-header-bar-navigation .menu-item .menu-link:hover{background:rgba(255,255,255,.05);color:#fff!important}
  .main-header-bar-navigation .menu-item.current-menu-item > .menu-link,
  .main-header-bar-navigation .menu-item.current_page_item > .menu-link{
    color:var(--jk-gold)!important;
    box-shadow:inset 3px 0 0 var(--jk-gold);
    background:rgba(233,182,103,.07);
  }
  /* ドロワーが閉じている間は完全に無効化する
     （閉じたメニューの見えないリンクが本文タップを奪う事故の予防） */
  body:not(.ast-main-header-nav-open) .main-header-bar-navigation{
    pointer-events:none;
    visibility:hidden;
  }
  /* SNSアイコン列とCTAを表示させる */
  .site-below-header-wrap{display:block}
  .site-below-header-wrap .ast-builder-button-wrap{padding:16px 18px}
  .site-below-header-wrap .ast-custom-button{width:100%}
}

/* --------------------------------------------------------------------------
   11. フッター
   Elementor テンプレート製。シアン→ブルーのグラデーションを ink に置換。
   -------------------------------------------------------------------------- */
.site-footer,
.ast-footer-overlay,
footer.site-footer{background-color:var(--jk-ink)}
.elementor-location-footer{
  background:var(--jk-ink);
  color:rgba(255,255,255,.78);
  border-top:1px solid var(--jk-gold-line);
}
.elementor-location-footer .e-con,
.elementor-location-footer .elementor-element.e-con{background-image:none!important}
.elementor-location-footer h1,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer h6{color:var(--jk-gold)}
.elementor-location-footer h4,
.elementor-location-footer h5{
  font-family:var(--jk-ff-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.elementor-location-footer a{color:rgba(255,255,255,.82)}
.elementor-location-footer a:hover{color:var(--jk-gold)}
.elementor-location-footer p,
.elementor-location-footer .elementor-widget-text-editor{
  font-size:14px;
  font-weight:600;
  line-height:1.9;
  color:rgba(255,255,255,.78);
}
.elementor-location-footer strong,
.elementor-location-footer b{color:var(--jk-gold);font-weight:700}
.elementor-location-footer .elementor-view-stacked .elementor-icon{
  background-color:rgba(255,255,255,.1);
  color:#fff;
}
.elementor-location-footer .elementor-view-stacked .elementor-icon:hover{background-color:var(--jk-orange);color:#fff}

/* --------------------------------------------------------------------------
   12. マイアカウント（WooCommerce + LearnDash + Uncanny）
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce{max-width:1100px;margin-inline:auto}
.woocommerce-MyAccount-navigation{margin-bottom:var(--jk-s-5);width:auto;float:none}
.woocommerce-MyAccount-navigation ul{
  display:flex;
  flex-wrap:wrap;
  gap:var(--jk-s-2);
  margin:0;
  padding:0;
  list-style:none;
  border:0;
}
.woocommerce-MyAccount-navigation ul li{border:0;margin:0;padding:0}
.woocommerce-MyAccount-navigation ul li a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 16px;
  background:var(--jk-paper);
  color:var(--jk-text);
  border:1px solid var(--jk-line-2);
  border-radius:var(--jk-r-pill);
  font-size:var(--jk-fs-sm);
  font-weight:700;
  text-decoration:none;
}
.woocommerce-MyAccount-navigation ul li a:hover{background:var(--jk-paper-3)}
.woocommerce-MyAccount-navigation ul li.is-active a{
  background:var(--jk-ink);
  color:#fff;
  border-color:var(--jk-ink);
}
.woocommerce-MyAccount-content{width:auto;float:none}
.woocommerce-MyAccount-content > p{
  background:var(--jk-paper-2);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  padding:16px 18px;
  font-size:var(--jk-fs-sm);
  line-height:1.9;
}
.wcprof-acc-wrap select,
.woocommerce-MyAccount-content select{
  min-height:46px;
  border-radius:10px;
  border:1px solid var(--jk-line-2);
  background:var(--jk-paper);
  font-weight:700;
}
.wcprof-tab{
  color:var(--jk-text);
  background:var(--jk-paper);
  border:1px solid var(--jk-line-2);
  border-radius:var(--jk-r-pill);
  font-weight:700;
}
.wcprof-tab.is-active{background:var(--jk-ink);color:#fff;border-color:var(--jk-ink)}

/* LearnDash プロフィール（あなたのコース） */
.learndash-wrapper.ld-profile{background:transparent}
.learndash-wrapper .ld-item-list .ld-item-list-item{
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  margin-bottom:var(--jk-s-3);
  box-shadow:var(--jk-e-1);
}
.learndash-wrapper .ld-item-list-item-preview{padding:16px 18px}
/* 「コースが見つかりません」の緑アラートを中性の空状態に */
.learndash-wrapper .ld-alert,
.learndash-wrapper .ld-alert-warning{
  background:var(--jk-paper-2)!important;
  border:1px dashed var(--jk-line-2)!important;
  border-radius:var(--jk-r-md)!important;
  color:var(--jk-muted)!important;
}
.learndash-wrapper .ld-alert .ld-alert-icon,
.learndash-wrapper .ld-alert-icon{
  background:var(--jk-line-2)!important;
  color:var(--jk-text)!important;
  border-radius:50%;
}
.learndash-wrapper .ld-expand-button,
.learndash-wrapper .ld-item-list-actions .ld-expand-button{
  background:transparent;
  color:var(--jk-text);
  border:1px solid var(--jk-line-2);
  border-radius:var(--jk-r-pill);
  min-height:38px;
  font-size:var(--jk-fs-sm);
  font-weight:700;
}

/* 会員ステータスバナー（既存 .membership-banner を再定義） */
.jk-status,
.membership-banner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--jk-s-4);
  padding:18px 20px;
  background:var(--jk-ink);
  color:#fff;
  border:1px solid var(--jk-ink-3);
  border-radius:var(--jk-r-md);
  margin-bottom:var(--jk-s-4);
}
.membership-banner--active{background:var(--jk-ink)}
.membership-banner--paused{background:linear-gradient(100deg,#2A1712 0%,#15171D 62%)}
.membership-banner__label{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  letter-spacing:.14em;
  color:var(--jk-gold);
}
.membership-banner__text{font-size:12.5px;color:rgba(255,255,255,.7)}
.membership-banner__btn{
  margin-left:auto;
  min-height:40px;
  padding:0 18px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--jk-orange) 0%,var(--jk-gold) 100%);
  color:#fff;
  font-weight:700;
  font-size:var(--jk-fs-sm);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}

/* --------------------------------------------------------------------------
   13. WooCommerce Blocks（カート・支払い）
   #66-67 で読み込まれ子テーマより後になるため詳細度で対抗する。
   -------------------------------------------------------------------------- */
body .wc-block-components-button:not(.is-link){
  background:linear-gradient(135deg,var(--jk-orange) 0%,var(--jk-gold) 100%);
  color:#fff;
  border:0;
  border-radius:10px;
  min-height:46px;
  font-family:var(--jk-ff-jp);
  font-weight:700;
  box-shadow:var(--jk-e-gold);
}
body .wc-block-components-button:not(.is-link):hover{
  background:linear-gradient(135deg,var(--jk-orange-hi) 0%,#F0C481 100%);
  color:#fff;
}
body .wc-block-components-product-name{color:var(--jk-text);font-weight:700;text-decoration:none}
body .wc-block-components-product-price{font-family:var(--jk-ff-mono);color:var(--jk-text)}
body .wc-block-components-text-input input{border-radius:10px;min-height:46px}
/* 空カートの黒い泣き顔アイコンを差し替える */
body .wc-block-cart__empty-cart__image,
body .wp-block-woocommerce-empty-cart-block > figure:first-child{display:none}
body .wp-block-woocommerce-empty-cart-block > h2:first-of-type::before{
  content:"";
  display:block;
  width:104px;
  height:52px;
  margin:0 auto var(--jk-s-4);
  background:var(--jk-ph) center/contain no-repeat;
  filter:grayscale(1) opacity(.55);
}

/* --------------------------------------------------------------------------
   14. お知らせ・コラム一覧
   -------------------------------------------------------------------------- */
.blog .ast-article-post,
.archive .ast-article-post{
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  box-shadow:var(--jk-e-1);
}
.ast-blog-featured-section img{border-radius:var(--jk-r-sm)}
.entry-meta,.entry-meta *{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  color:var(--jk-muted);
  letter-spacing:.04em;
}

/* --------------------------------------------------------------------------
   15. レスポンシブ調整
   ブレークポイントは既存を踏襲: 1200 / 921 / 600 / 380
   -------------------------------------------------------------------------- */
@media (max-width:921px){
  .ld-course-list-items.row,
  .ld-course-list-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--jk-s-4)}
  .woocommerce ul.products{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--jk-s-4)}
}
@media (max-width:600px){
  body{font-size:14.5px}
  h1,.entry-title{font-size:clamp(24px,6.4vw,32px)}
  .woocommerce ul.products{gap:var(--jk-s-4)}
  /* コース一覧は Astra のショップと同じく 2列まで（1列にはしない）。
     しきい値 544px も Astra の WooCommerce モバイル列と同じ。 */
  .ld-course-list-items.row,
  .ld-course-list-items{gap:var(--jk-s-4)}
  .woocommerce-MyAccount-navigation ul{gap:6px}
  .woocommerce-MyAccount-navigation ul li a{min-height:38px;padding:0 13px;font-size:12.5px}
  .jk-status,.membership-banner{padding:16px}
  .membership-banner__btn{margin-left:0;width:100%;justify-content:center}
}

/* 544px は Astra の WooCommerce モバイル列と同じしきい値。
   600px ブロックより後に置く（同じ性質の指定が増えたとき順序で負けないため）。 */
@media (max-width:544px){
  .ld-course-list-items.row,
  .ld-course-list-items{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:380px){
  .ld_course_grid .caption,
  .woocommerce ul.products li.product .astra-shop-summary-wrap{padding:13px 14px 14px}
}

/* タップ領域の下限を確保 */
@media (pointer:coarse){
  a.menu-link,button,.jk-btn,
  .woocommerce a.button,.woocommerce button.button,
  .woocommerce-MyAccount-navigation ul li a{min-height:46px}
}

/* --------------------------------------------------------------------------
   16. 詳細度の修正（LearnDash legacy-v1）
   plugins/sfwd-lms/includes/course-grid/templates/skins/legacy-v1/style.css が
   `.ld-course-list-items .ld_course_grid .thumbnail.course …`（クラス5個＝0,5,0）
   で書いているため、セクション6の指定（0,2,0〜0,2,1）では負けていた。
   実測で負けていたのは ribbon の背景色とカードの角丸の2点。
   同じ経路をたどり要素セレクタを足して 0,5,1 以上にして勝つ。
   -------------------------------------------------------------------------- */
.ld-course-list-items .ld_course_grid article.thumbnail.course{
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  box-shadow:var(--jk-e-1);
  padding:0;
  overflow:hidden;
}

/* リボン：緑（#5CB85C）＋ left:-8px の枠外突出をやめ、ink＋ゴールドのバッジへ。
   無料と価格を区別するクラスが存在しない（どちらも .ribbon のみ）ため、
   両方に成立する配色にしている。写真の上でも読める。 */
.ld-course-list-items .ld_course_grid article.thumbnail.course .ribbon{
  top:11px;
  left:11px;
  right:auto;
  width:auto;
  height:auto;
  margin:0;
  padding:5px 11px;
  background:rgba(11,12,16,.92);
  color:var(--jk-gold);
  border:1px solid var(--jk-gold-line);
  border-radius:var(--jk-r-pill);
  box-shadow:none;
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.5;
  text-align:center;
  text-transform:none;
  white-space:nowrap;
  transform:none;
}
/* 緑の尻尾は ::before のボーダー三角で作られていた */
.ld-course-list-items .ld_course_grid article.thumbnail.course .ribbon::before,
.ld-course-list-items .ld_course_grid article.thumbnail.course .ribbon::after{
  content:none;
  display:none;
  border:0;
}

/* --------------------------------------------------------------------------
   17. 実機検証で判明した取りこぼしの修正
   -------------------------------------------------------------------------- */

/* 17-1 グローバルナビが1文字ずつ折り返す問題。
   セクション9で flex-wrap:nowrap を入れたが、項目側は flex-shrink:1 かつ
   white-space:normal のままだったため各項目が潰され、文字が改行していた
   （「HOM/E」「学べる動/画」）。折り返しは項目単位で許し、文字は折らない。 */
.site-header .main-header-menu,
.ast-builder-menu .main-header-menu{flex-wrap:wrap}
.site-header .main-header-menu > .menu-item,
.ast-builder-menu .main-header-menu > .menu-item{flex:0 0 auto}
.site-header .main-header-menu > .menu-item > .menu-link,
.ast-builder-menu .main-header-menu > .menu-item > .menu-link{
  white-space:nowrap;
  padding-inline:12px;
}

/* 17-2 マイアカウントが float:left 270px / float:right 612px の2カラムのままで、
   チップ列が狭い左カラムに押し込まれていた。1カラムに戻す。
   Astra の .woocommerce-account 前置きセレクタ（0,2,0）に勝つ必要がある。 */
.woocommerce-account .woocommerce-MyAccount-navigation{
  width:100%;
  float:none;
  margin:0 0 var(--jk-s-5);
}
.woocommerce-account .woocommerce-MyAccount-content{
  width:100%;
  float:none;
}

/* 17-3 フッターの CORPORATE / SERVICE は h4/h5 ではなく
   div.elementor-heading-title（18px 白）だった。 */
.elementor-location-footer .elementor-heading-title{
  font-family:var(--jk-ff-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--jk-gold);
  margin-bottom:var(--jk-s-3);
}
.elementor-location-footer .elementor-heading-title a{
  color:var(--jk-gold);
  text-decoration:none;
}
/* 17-4 ドロワー最下部の CTA（functions.php で primary メニューに追加した項目）。
   デスクトップにはヘッダーCTAが既にあるので、モバイルだけで表示する。 */
.jkck-drawer-cta{display:none}
@media (max-width:921px){
  .jkck-drawer-cta{display:block;padding:16px 18px;border-bottom:0}
  .main-header-bar-navigation .jkck-drawer-cta > .menu-link{
    min-height:48px;
    justify-content:center;
    text-align:center;
    padding:0 16px;
    border-radius:10px;
    border-bottom:0;
    background:linear-gradient(135deg,var(--jk-orange) 0%,var(--jk-gold) 100%);
    color:#fff!important;
    box-shadow:var(--jk-e-gold);
    font-size:13.5px;
    line-height:1.4;
    white-space:normal;
  }
  .main-header-bar-navigation .jkck-drawer-cta > .menu-link:hover{
    background:linear-gradient(135deg,var(--jk-orange-hi) 0%,#F0C481 100%);
    color:#fff!important;
  }
}
/* --------------------------------------------------------------------------
   18. モバイルドロワーの背景（重要な回帰の修正）
   Astra はモバイルメニューの ul.ast-nav-menu と各 a.menu-link の両方に
   白背景を設定している。セクション10の background:transparent（クラスのみ）は
   詳細度で負け、白地に白文字で項目が見えなくなっていた。
   #ast-mobile-header は ID なので確実に勝つ。
   -------------------------------------------------------------------------- */
@media (max-width:921px){
  #ast-mobile-header .main-header-bar-navigation,
  #ast-mobile-header .main-navigation,
  #ast-mobile-header ul.main-header-menu,
  #ast-mobile-header ul.ast-nav-menu,
  #ast-mobile-header .ast-mobile-header-content{
    background-color:var(--jk-ink);
  }
  #ast-mobile-header ul.ast-nav-menu .menu-item .menu-link,
  #ast-mobile-header ul.main-header-menu .menu-item .menu-link{
    background-color:transparent;
    color:rgba(255,255,255,.88);
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  #ast-mobile-header ul.ast-nav-menu .menu-item .menu-link:hover,
  #ast-mobile-header ul.ast-nav-menu .menu-item .menu-link:focus{
    background-color:rgba(255,255,255,.06);
    color:#fff;
  }
  #ast-mobile-header ul.ast-nav-menu .menu-item.current-menu-item > .menu-link,
  #ast-mobile-header ul.ast-nav-menu .menu-item.current_page_item > .menu-link{
    background-color:rgba(233,182,103,.10);
    color:var(--jk-gold);
    box-shadow:inset 3px 0 0 var(--jk-gold);
  }
  #ast-mobile-header ul.ast-nav-menu .sub-menu .menu-link{
    background-color:rgba(255,255,255,.03);
    padding-left:32px;
  }

  /* CTA はモバイルメニュー内のものだけ表示する
     （デスクトップ側の複製は .jkck-drawer-cta{display:none} で伏せたまま） */
  #ast-mobile-header .jkck-drawer-cta{
    display:block;
    padding:16px 18px;
    border-bottom:0;
    background-color:var(--jk-ink);
  }
  #ast-mobile-header .jkck-drawer-cta > .menu-link{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 16px;
    border:0;
    border-radius:10px;
    background:linear-gradient(135deg,var(--jk-orange) 0%,var(--jk-gold) 100%);
    color:#fff;
    box-shadow:var(--jk-e-gold);
    font-size:13.5px;
    line-height:1.4;
    white-space:normal;
  }
}
/* --------------------------------------------------------------------------
   19. コンテンツ幅をビューポート追従にする
   固定幅からブラウザ幅の 80% へ。ただし素の 80vw だと広いモニタで本文の
   1行が長くなりすぎて読みにくいので 1800px で打ち止めにする。
   カード一覧は grid の auto-fill なので、広げると列数が増えて恩恵が出る。

   ここが効いていなかった原因（2026-08-23 修正）:
   Astra は --ast-normal-container-width を読んでいない。カスタマイザーの
   コンテナ幅は、インラインCSSに .ast-container{max-width:988px} として px で
   直接書き出される。Elementor も同様に .e-con の --content-width へ
   min(100%,1140px) を入れる。どちらも変数を再定義しただけでは動かないので、
   実際に効いている宣言そのものを上書きする必要がある。
   詳細度は body を前置きして 0,1,1 にし、読み込み順に依存せず勝たせる。

   フルワイドの Elementor テンプレートでは Astra が
   .ast-page-builder-template .ast-container{max-width:100%}（0,2,0）で
   こちらに勝つので、外枠は 100% のまま。中の .e-con が 80% になる。
   これは意図どおり（外枠を絞ると二重に狭まってしまう）。
   -------------------------------------------------------------------------- */
:root{
  --jk-wide:min(80vw,1800px);
  /* Astra 本体は参照しないが、他プラグインが読む場合に備えて揃えておく */
  --ast-normal-container-width:var(--jk-wide);
  --ast-narrow-container-width:min(80vw,900px);
}

/* 左右に死領域が出るデスクトップだけ広げる。狭い画面は Astra / Elementor の
   既定（100% + パディング）に任せる。80vw を当てるとモバイルで左右が削られる。

   閾値が 1280px なのは、Astra の既定が 988px 固定だから。1200px 始まりだと
   1200〜1235px の窓幅で 80vw が 988px を下回り、従来より狭くなってしまう。
   1280px なら 80vw = 1024px で、どの幅でも必ず従来以上になる。 */
@media (min-width:1280px){
  body .ast-container{max-width:var(--jk-wide)}
  /* Astra は WooCommerce のアーカイブだけ
     .ast-woo-shop-archive .site-content > .ast-container（詳細度 0,3,0）で
     px を上書きしてくる。body[class] を足して 0,3,1 にし、ページ種別に
     関係なく勝たせる。!important を使わずに済ませるための一手。 */
  body[class] .site-content > .ast-container{max-width:var(--jk-wide)}
  body .e-con{--content-width:min(100%,var(--jk-wide))}

  /* Astra は .entry-content[data-ast-blocks-layout] > * に
     --wp--custom--ast-content-width-size（948px）を当てる（詳細度 0,2,0）。
     これは本文の1行を読みやすい長さに保つための指定なので、変数ごと
     広げてはいけない（記事の段落まで 1600px になって読みにくくなる）。
     枠を外すのは中身が一覧・グリッドのブロックだけにする。
     body[class] で 0,3,1 にして Astra の 0,2,0 に勝たせる。 */
  body[class] .entry-content[data-ast-blocks-layout] > .learndash-wrap,
  /* LearnDash がコース詳細で出す器のクラスは .learndash-wrap ではなく
     .learndash。ここが抜けていたため、本文をブロックエディタで書いた
     コースだけ 948px に潰れていた（同じテンプレートなのに、旧エディタで
     書いたコースは data-ast-blocks-layout が付かず 1165px のまま）。
     コースごとに幅が違って見えるのはこれが原因。2026-08-24 に追加。 */
  body[class] .entry-content[data-ast-blocks-layout] > .learndash,
  body[class] .entry-content[data-ast-blocks-layout] > .jk-cnav,
  body[class] .entry-content[data-ast-blocks-layout] > .jk-cend,
  /* 学べる動画の一覧（[jkck_learning_videos] の器）。ここが 948px に
     潰れていたため、グリッドの実効幅が 898px となり列が3列で止まり、
     /shop/（1192px・4列）とカードの大きさが揃っていなかった。
     2026-08-25 に追加。 */
  body[class] .entry-content[data-ast-blocks-layout] > .jk-lv,
  body[class] .entry-content[data-ast-blocks-layout] > .woocommerce{max-width:none}
  .woocommerce-account .woocommerce{max-width:var(--jk-wide)}
}

/* 狭いビューポートでは 80vw だと左右の余白が足りないので素直に広げる */
@media (max-width:921px){
  :root{
    --ast-normal-container-width:100%;
    --ast-narrow-container-width:100%;
  }
  .woocommerce-account .woocommerce{max-width:100%}
}
/* --------------------------------------------------------------------------
   20. ヒーロー
   -------------------------------------------------------------------------- */

/* 20-1 キャッチコピーがボタンに見える問題。
   .ci-bottom-box は <a> ではなく素の <div>（実測確認済み）。押しても何も
   起きないのに角丸・影・ボタン色が付いており誤操作を誘っていた。
   キャッチコピーであることが分かるラベル表現に変える。 */
.ci-hero .ci-bottom-box,
.ci-hero .ci-bottom-box.ci-yellow,
.ci-hero .ci-bottom-box.ci-orange{
  background:rgba(11,12,16,.52);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:#fff;
  border:1px solid var(--jk-gold-line);
  border-radius:var(--jk-r-sm);
  box-shadow:none;
  cursor:default;
  font-weight:700;
  letter-spacing:.02em;
}
/* 先頭にゴールドの罫を置いて「見出しラベル」だと分かるようにする */
.ci-hero .ci-bottom-box::before{
  content:"";
  display:inline-block;
  width:14px;
  height:2px;
  margin-right:10px;
  background:var(--jk-gold);
  vertical-align:middle;
}

/* 20-2 背景動画を枠にフィットさせる。
   元実装は iframe に min-width:1500px / min-height:844px の固定値が入っていた。
   ・390px 幅では 1500px のまま描かれ、横の26%しか映らない
   ・逆に 1625px 幅のヒーローでは動画（1500px）が枠より狭く左右が空く
   当初はモバイルだけ display:none で逃げていたが、動画が出ないという
   指摘を受けて %基準の cover に置き換えた。
   aspect-ratio と min-width/min-height:100% の組み合わせで、
   16:9 を保ったまま必ず枠を覆う（どちらの軸が足りなくても伸びる）。 */
.ci-hero .ci-video-wrap{container-type:size}
.ci-hero .ci-video-wrap iframe{
  /* min-width と min-height を両方 100% にすると、その2つが下限として
     効いてしまい aspect-ratio が無視される（370×633 に引き伸ばされた）。
     コンテナクエリ単位で「枠を覆うのに必要な寸法」を直接計算する。
       幅  = 枠幅 と 枠高×16/9 の大きい方
       高さ = 枠高 と 枠幅×9/16 の大きい方
     両方を満たす最小の箱がちょうど 16:9 の cover になる。 */
  width:max(100cqw, calc(100cqh * 16 / 9));
  height:max(100cqh, calc(100cqw * 9 / 16));
  min-width:0;
  min-height:0;
  /* WordPress / Astra の iframe{max-width:100%} が計算結果を枠幅に
     押し戻してしまう（1125px → 370px）。ここで外す。 */
  max-width:none;
  max-height:none;
}

/* モバイルは枠が縦長（370×633 など）で、16:9 を敷くと左右が大きく切れる。
   min-height を詰めて縦横比を穏やかにし、切れる量を減らす。 */
@media (max-width:900px){
  .ci-hero{
    height:auto;
    min-height:460px;
    background:linear-gradient(150deg,#0B0C10 0%,#1B1710 52%,#2E2213 100%);
  }
  .ci-hero .ci-overlay{
    background:radial-gradient(90% 70% at 8% 4%,rgba(233,182,103,.20),transparent 62%);
  }
}
/* --------------------------------------------------------------------------
   21. マイアカウントの受講状況タイル
   （functions.php の woocommerce_account_dashboard priority 5 が出力）
   -------------------------------------------------------------------------- */
.jkck-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-bottom:var(--jk-s-4);
  background:var(--jk-line);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  overflow:hidden;
}
.jkck-stat{background:var(--jk-paper);padding:16px 18px}
.jkck-stat__n{
  font-family:var(--jk-ff-mono);
  font-size:28px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--jk-text);
  font-variant-numeric:tabular-nums;
}
.jkck-stat--ok .jkck-stat__n{color:var(--jk-ok)}
.jkck-stat__l{margin-top:7px;font-size:12px;color:var(--jk-muted);line-height:1.6}
@media (max-width:600px){
  .jkck-stats{grid-template-columns:1fr 1fr}
  .jkck-stat{padding:13px 14px}
  .jkck-stat__n{font-size:24px}
}
/* --------------------------------------------------------------------------
   22. 会員ステータスバナー（追加CSSに勝つための詳細度）
   カスタマイザーの追加CSS（wp-custom-css）は子テーマより後に読み込まれ、
   .membership-banner--active を青、--paused を赤で塗っている。
   追加CSSを撤去するまでの間、body 前置きで詳細度を上げて上書きする。
   -------------------------------------------------------------------------- */
body .membership-banner,
body .membership-banner--active{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--jk-s-3) var(--jk-s-4);
  width:100%;
  max-width:none;
  margin:0 0 var(--jk-s-4);
  padding:18px 20px;
  background:var(--jk-ink);
  color:#fff;
  border:1px solid var(--jk-ink-3);
  border-radius:var(--jk-r-md);
  box-shadow:none;
  text-align:left;
}
body .membership-banner--paused{
  background:linear-gradient(100deg,#2A1712 0%,#15171D 62%);
  border-color:#3A2418;
}
/* ラベル（入会中 / 休会中）をチップにする */
body .membership-banner .membership-banner__label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:var(--jk-r-pill);
  background:#EAF3EE;
  color:var(--jk-ok);
  border:1px solid #CBE2D6;
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.6;
}
body .membership-banner--paused .membership-banner__label{
  background:#FBEDE8;
  color:var(--jk-danger);
  border-color:#F0D3C8;
}
body .membership-banner .membership-banner__text{
  flex:1 1 260px;
  margin:0;
  font-size:12.5px;
  line-height:1.75;
  color:rgba(255,255,255,.74);
}
body .membership-banner .membership-banner__btn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,var(--jk-orange) 0%,var(--jk-gold) 100%);
  color:#fff;
  font-size:var(--jk-fs-sm);
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--jk-e-gold);
}
body .membership-banner .membership-banner__btn:hover{
  background:linear-gradient(135deg,var(--jk-orange-hi) 0%,#F0C481 100%);
  color:#fff;
}
@media (max-width:600px){
  body .membership-banner .membership-banner__btn{margin-left:0;width:100%}
}
/* --------------------------------------------------------------------------
   23. お店登録フォームのダイアログ
   （functions.php の wp_footer が出力。元は Google フォーム）
   -------------------------------------------------------------------------- */
.jkck-dialog{
  width:min(92vw,680px);
  max-height:min(88vh,900px);
  margin:auto;
  padding:0;
  background:var(--jk-paper);
  color:var(--jk-text);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-lg);
  box-shadow:0 32px 80px rgba(11,12,16,.34);
  /* clip は hidden と違い「プログラムからもスクロールできない」。
     hidden のままだと scrollIntoView（入力エラー時のフォーカス移動など）が
     dialog 自体をスクロールさせ、ヘッダーが上に隠れて下に空白ができる。
     スクロールは .jkck-dialog__body に任せたいので clip で固定する。 */
  overflow:clip;
}
.jkck-dialog::backdrop{
  background:rgba(11,12,16,.62);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.jkck-dialog__inner{display:flex;flex-direction:column;max-height:inherit;margin:0}

.jkck-dialog__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--jk-s-4);
  padding:20px 22px;
  background:var(--jk-ink);
  color:#fff;
  border-bottom:1px solid var(--jk-gold-line);
}
.jkck-dialog__eyebrow{
  display:block;
  margin-bottom:6px;
  font-family:var(--jk-ff-mono);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--jk-gold);
}
.jkck-dialog__title{margin:0;font-size:17px;font-weight:700;line-height:1.5;color:#fff}
.jkck-dialog__close{
  flex:0 0 auto;
  /* Astra のボタン共通スタイルが padding:15px 30px を当てる。box-sizing が
     border-box なので、左右パディングの合計60pxが width:38px を上回り、
     円が横に潰れて楕円になる。padding を打ち消して正円に戻す。 */
  padding:0;
  display:grid;place-items:center;
  width:38px;height:38px;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;
}
.jkck-dialog__close:hover{background:rgba(255,255,255,.2)}
/* **タッチ端末では 46px 角にする（2026-08-27 に修正）。**
   タップ領域の下限を確保する `@media (pointer:coarse){button{min-height:46px}}`
   （セクション15の末尾）が height:38px に勝ってしまい、38x46 の縦長の楕円に
   なっていた。min-height は詳細度に関係なく height を押し上げるので、
   打ち消すのではなく**寸法のほうを 46px にそろえる**。指の当たりも広がる。 */
@media (pointer:coarse){
  .jkck-dialog__close{width:46px;height:46px}
}

.jkck-dialog__body{flex:1 1 auto;overflow-y:auto;padding:20px 22px;background:var(--jk-paper-2)}
.jkck-dialog__lede{margin:0 0 20px;font-size:13px;line-height:1.85;color:var(--jk-muted)}
.jkck-dialog__foot{
  display:flex;justify-content:flex-end;gap:10px;
  padding:16px 22px;
  background:var(--jk-paper);
  border-top:1px solid var(--jk-line);
}

.jkck-field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.jkck-fieldset{margin:0 0 18px;padding:0;border:0}
.jkck-label{padding:0;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--jk-text)}
.jkck-req{
  display:inline-block;
  margin-left:6px;padding:1px 7px;
  border:1px solid #F0D3C8;border-radius:var(--jk-r-pill);
  background:#FBEDE8;color:var(--jk-danger);
  font-family:var(--jk-ff-mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;
  vertical-align:1px;
}
.jkck-hint{font-size:11.5px;line-height:1.7;color:var(--jk-muted)}
.jkck-example{
  padding:9px 11px;
  background:var(--jk-paper-3);
  border-radius:var(--jk-r-sm);
  font-size:11.5px;line-height:1.8;color:var(--jk-muted);
}
.jkck-input{
  width:100%;min-height:46px;padding:0 14px;
  background:var(--jk-paper);color:var(--jk-text);
  border:1px solid var(--jk-line-2);border-radius:10px;
  font-family:var(--jk-ff-jp);font-size:15px;
}
.jkck-textarea{min-height:96px;padding:12px 14px;line-height:1.8;resize:vertical}
.jkck-input:focus{border-color:var(--jk-orange);box-shadow:0 0 0 4px rgba(247,101,3,.14);outline:none}

.jkck-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:8px}
.jkck-check{
  display:flex;align-items:center;gap:9px;
  min-height:44px;padding:0 12px;
  background:var(--jk-paper);
  border:1px solid var(--jk-line-2);border-radius:10px;
  font-size:13.5px;cursor:pointer;
}
.jkck-check:hover{background:var(--jk-paper-3)}
.jkck-check input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--jk-orange)}
.jkck-check:has(input:checked){border-color:var(--jk-orange);background:#FFF6EF}

.jkck-file{
  width:100%;padding:12px 14px;
  background:var(--jk-paper);
  border:1px dashed var(--jk-line-2);border-radius:10px;
  font-size:13px;
}

/* 写真の累積選択。
   ネイティブの input[type=file] は選択のたびに FileList を置き換えるため、
   JS 側で File の配列を保持している（shop-form-block.php）。
   その状態でネイティブUIを出すと「選択されていません」と一覧が矛盾するので、
   JS が有効なとき（.is-enhanced）だけ input を視覚的に隠し、自前のUIに差し替える。
   display:none にすると一部ブラウザで .click() が効かないため clip で隠す。 */
.jkck-file-btn{display:none}
.jkck-photos.is-enhanced .jkck-file{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.jkck-photos.is-enhanced .jkck-file-btn{display:inline-flex;align-self:flex-start}
.jkck-file-btn[disabled]{opacity:.45;cursor:not-allowed}
.jkck-file-count{font-variant-numeric:tabular-nums}

.jkck-files{display:flex;flex-direction:column;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.jkck-files:empty{display:none}
.jkck-files li{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  background:var(--jk-paper);
  border:1px solid var(--jk-line);border-radius:var(--jk-r-sm);
}
.jkck-files img{flex:0 0 auto;width:40px;height:40px;object-fit:cover;border-radius:4px}
.jkck-files__name{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:var(--jk-text);
}
.jkck-files__size{
  flex:0 0 auto;
  font-size:11.5px;color:var(--jk-muted);
  font-variant-numeric:tabular-nums;
}
/* padding:0 は Astra のボタン共通スタイル padding:15px 30px を打ち消すため。
   border-box なので指定しないと左右パディングが width を上回って潰れる。 */
.jkck-files__del{
  flex:0 0 auto;padding:0;
  display:grid;place-items:center;
  width:26px;height:26px;
  border:0;border-radius:50%;
  background:var(--jk-paper-3);color:var(--jk-text-2);
  font-size:15px;line-height:1;cursor:pointer;
}
.jkck-files__del:hover{background:var(--jk-danger);color:#fff}
.jkck-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.jkck-dialog__msg{margin:4px 0 0;font-size:13px;font-weight:700;line-height:1.7}
.jkck-dialog__msg:empty{display:none}
.jkck-dialog__msg.is-error{color:var(--jk-danger)}
.jkck-dialog__msg.is-ok{color:var(--jk-ok)}

@media (max-width:600px){
  .jkck-dialog{
    width:100vw;max-width:100vw;
    height:100dvh;max-height:100dvh;
    border:0;border-radius:0;
  }
  .jkck-dialog__head{padding:16px 18px}
  .jkck-dialog__body{padding:18px}
  .jkck-dialog__foot{padding:14px 18px;flex-direction:column-reverse}
  .jkck-dialog__foot .jk-btn{width:100%}
  .jkck-checks{grid-template-columns:1fr}
}
/* --------------------------------------------------------------------------
   24. 会員限定8大特典セクションの再構成
   元は .ci-service-list が display:block で、.left に margin-right:198px /
   .right に margin-left:198px を当てたジグザグ。8枚 × 約440px で縦 3,489px
   あった。8項目は並列の特典リストで順序に意味を持たないため、番号（76px の
   .ci-service-num）を捨てて3列グリッドにする。
   -------------------------------------------------------------------------- */
.ci-service-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--jk-s-5);
  align-items:stretch;
}
/* 8枚なので、幅が取れるところでは 4列 × 2行にそろえる。auto-fill のままだと
   1645px 幅で5列になり、2行目が3枚だけの歯抜けになる。
   閾値はコンテンツ幅が 80vw に切り替わる 1280px と合わせている。 */
@media (min-width:1280px){
  .ci-service-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.ci-service-item,
.ci-service-item.left,
.ci-service-item.right{
  width:auto;
  max-width:none;
  margin:0;
  display:flex;
}

/* 番号は情報を持っていないので出さない */
.ci-service-item .ci-service-num{display:none}

.ci-service-item .ci-service-card{
  display:flex;
  flex:1 1 auto;
  padding:22px;
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  box-shadow:var(--jk-e-1);
  overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease;
}
.ci-service-item .ci-service-card:hover{box-shadow:var(--jk-e-3);transform:translateY(-2px)}

/* 上端の罫線：紺→オレンジで向きが不統一だったのをオレンジ→ゴールドに統一し、
   8px から 3px へ落とす */
.ci-service-item .ci-service-card::before{
  height:3px;
  background:linear-gradient(90deg,var(--jk-orange),var(--jk-gold));
}
/* 右下の装飾円（140px）はカード外へはみ出して切れていたので消す */
.ci-service-item .ci-service-card::after{content:none;display:none}

.ci-service-item .ci-service-content{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:10px;
  width:100%;
}
.ci-service-item .ci-service-content h3{
  margin:0;
  font-size:var(--jk-fs-lg);
  font-weight:700;
  line-height:1.5;
  color:var(--jk-text);
}
.ci-service-item .ci-service-content p{
  margin:0;
  font-size:var(--jk-fs-sm);
  line-height:1.85;
  color:var(--jk-muted);
}

/* ボタン：紺＋下線を ink の secondary に。最下部へ固定して高さを揃える */
.ci-service-item .ci-service-btn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  padding:0 16px;
  background:var(--jk-ink);
  color:#fff;
  border:0;
  border-radius:10px;
  font-size:var(--jk-fs-sm);
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:none;
}
.ci-service-item .ci-service-btn:hover{background:var(--jk-ink-3);color:#fff;text-decoration:none}

@media (max-width:600px){
  .ci-service-list{grid-template-columns:1fr;gap:var(--jk-s-4)}
  .ci-service-item .ci-service-card{padding:18px}
}
/* --------------------------------------------------------------------------
   25. 8大特典カードの詰め（セクション24の補正）
   -------------------------------------------------------------------------- */

/* post-70.css が .ci-service-card に min-height:340px を入れており、
   本文が3行のカードでもボタンまで約120pxの空きができていた。
   グリッドの align-items:stretch で行内の高さは揃うので固定値は不要。 */
.ci-service-item .ci-service-card{min-height:0}

/* ボタンの下線が消えない。.ci-service-btn に text-decoration:none を書いた
   ルールが post-70.css・インライン・本ファイルに計3つあるのに computed が
   underline のままで、CSSOM を全走査しても勝っている宣言を特定できなかった。
   インラインで none を !important 指定すると解消することは実測済みなので、
   この2プロパティに限って !important を使う。 */
.ci-service-item .ci-service-btn,
.ci-service-item .ci-service-btn:hover,
.ci-service-item .ci-service-btn:focus{
  text-decoration:none!important;
}
/* --------------------------------------------------------------------------
   26. Elementor グローバル設定の差し替え
   Kit 6 がインストール直後のまま（水色 #6EC1E4 / 緑 #61CE70 / Roboto）で、
   今後 Elementor で要素を足すたびにブランド外の色と書体が混ざる状態だった。
   Elementor エディタが壊れている（本体4.1.4 / Pro 4.1.2）ため Kit のデータは
   触らず、uploads/elementor/css/post-6.css と同じ .elementor-kit-6 セレクタで
   CSS 変数を上書きする。子テーマは post-6.css より後に読まれるので順序で勝つ。
   -------------------------------------------------------------------------- */
.elementor-kit-6{
  /* #6EC1E4 → 見出しの色。ブランドの主色はボタン側で使うのでここは ink 系 */
  --e-global-color-primary:var(--jk-text);
  /* #54595F → ダーク面 */
  --e-global-color-secondary:var(--jk-ink);
  /* #7A7A7A → 本文 */
  --e-global-color-text:var(--jk-text-2);
  /* #61CE70（緑）→ アクセント。白背景の文字でも AA を満たす orange-deep */
  --e-global-color-accent:var(--jk-orange-deep);

  /* Roboto / Roboto Slab → 和文。読み込みは functions.php の jkck-fonts */
  --e-global-typography-primary-font-family:"Zen Kaku Gothic New";
  --e-global-typography-primary-font-weight:700;
  --e-global-typography-secondary-font-family:"Zen Kaku Gothic New";
  --e-global-typography-secondary-font-weight:500;
  --e-global-typography-text-font-family:"Zen Kaku Gothic New";
  --e-global-typography-text-font-weight:400;
  --e-global-typography-accent-font-family:"Zen Kaku Gothic New";
  --e-global-typography-accent-font-weight:600;
}
/* --------------------------------------------------------------------------
   27. カート・支払い（WooCommerce Blocks）
   Blocks の CSS は #66-67 で子テーマ(62)より後に読まれるため、
   すべて body 前置きで詳細度を上げている。
   Google Pay / Apple Pay などの決済ブランドボタンは配色を変えてはいけないので
   一切触らない（.wc-block-cart__payment-options 配下は対象外）。
   -------------------------------------------------------------------------- */

/* 商品説明に埋め込まれた画像がカート行の中で原寸表示され、
   1行が 280px 以上に膨らんでいた（実測 300×208）。
   サムネイルは別枠にあるのでカート内では出さない。 */
body .wc-block-cart-item__product img,
body .wc-block-components-product-metadata img{display:none}

/* 行 */
body .wc-block-cart-items__header{
  border-bottom:1px solid var(--jk-line);
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--jk-muted);
}
body .wc-block-cart-items__row{border-bottom:1px solid var(--jk-line)}
body .wc-block-cart-item__image img{
  width:64px;
  height:64px;
  object-fit:cover;
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-sm);
}
body .wc-block-components-product-name{
  font-size:14.5px;
  font-weight:700;
  line-height:1.6;
  color:var(--jk-text);
  text-decoration:none;
}
body .wc-block-components-product-price,
body .wc-block-components-formatted-money-amount{
  font-family:var(--jk-ff-mono);
  font-variant-numeric:tabular-nums;
  color:var(--jk-text);
}
body .wc-block-components-product-metadata{font-size:12px;color:var(--jk-muted);line-height:1.7}

/* 数量ステッパー */
body .wc-block-components-quantity-selector{
  border:1px solid var(--jk-line-2);
  border-radius:10px;
  overflow:hidden;
  background:var(--jk-paper);
}
body .wc-block-components-quantity-selector__button{
  min-width:38px;
  min-height:38px;
  color:var(--jk-text);
  background:transparent;
  border:0;
}
body .wc-block-components-quantity-selector__button:hover{background:var(--jk-paper-3)}
body .wc-block-components-quantity-selector__input{
  font-family:var(--jk-ff-mono);
  font-variant-numeric:tabular-nums;
  color:var(--jk-text);
  border:0;
}

/* 削除リンク */
body .wc-block-cart-item__remove-link{
  color:var(--jk-muted);
  text-decoration:none;
  font-size:12px;
}
body .wc-block-cart-item__remove-link:hover{color:var(--jk-danger)}

/* 右カラムの合計（カード化） */
body .wp-block-woocommerce-cart-order-summary-block,
body .wc-block-components-totals-wrapper{
  background:var(--jk-paper);
}
body .wp-block-woocommerce-cart-order-summary-block{
  padding:18px 20px;
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  box-shadow:var(--jk-e-1);
}
body .wc-block-components-totals-item__label{font-size:13.5px;color:var(--jk-text)}
body .wc-block-components-totals-item__value{
  font-family:var(--jk-ff-mono);
  font-variant-numeric:tabular-nums;
  color:var(--jk-text);
}
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:var(--jk-fs-xl);
  font-weight:700;
}

/* クーポンのアコーディオン */
body .wc-block-components-panel__button{
  font-size:13.5px;
  font-weight:700;
  color:var(--jk-text);
  text-decoration:none;
}

/* 入力欄（支払い画面のフォーム） */
body .wc-block-components-text-input input,
body .wc-block-components-text-input textarea,
body .wc-block-components-select__container select{
  min-height:46px;
  padding:0 14px;
  background:var(--jk-paper);
  color:var(--jk-text);
  border:1px solid var(--jk-line-2);
  border-radius:10px;
  font-family:var(--jk-ff-jp);
  font-size:15px;
}
body .wc-block-components-text-input.is-active input:focus,
body .wc-block-components-text-input input:focus{
  border-color:var(--jk-orange);
  box-shadow:0 0 0 4px rgba(247,101,3,.14);
  outline:none;
}
body .wc-block-components-checkout-step__title{
  font-size:var(--jk-fs-lg);
  font-weight:700;
  color:var(--jk-text);
}
body .wc-block-components-checkout-step__description{font-size:12.5px;color:var(--jk-muted)}

/* 通知 */
body .wc-block-components-notice-banner{
  border-radius:var(--jk-r-md);
  font-size:13.5px;
}

@media (max-width:600px){
  body .wp-block-woocommerce-cart-order-summary-block{padding:16px}
  body .wc-block-cart-item__image img{width:56px;height:56px}
}
/* --------------------------------------------------------------------------
   28. Stripe の決済ボタンが切れる問題（セクション27の補正）
   .wc-block-components-express-payment__event-buttons > li が 48px 固定で、
   中の StripeElement が 56px あるため 8px ずつはみ出して
   黒い帯のように見えていた。決済ボタン自体の配色は一切触らない。
   -------------------------------------------------------------------------- */
body .wc-block-components-express-payment__event-buttons > li{
  height:auto;
  min-height:0;
  margin-bottom:10px;
}

/* --------------------------------------------------------------------------
   29. LearnDash の学習画面（ブロック版レイアウト）
   コース詳細・レッスン・クイズは ld-layout / ld-tab-bar / ld-accordion の
   新レイアウトで、LD30 の旧テンプレートとは別系統。
   このレイアウトは :root にトークンを公開しているので、セレクタを1つずつ
   追わずトークンを差し替える。

   ただし宣言元は2か所あり、LearnDash のブロックレイアウト用シートが
   全69枚中68番目（子テーマは61番目）で :root を再宣言している。同じ :root
   では順序で負けるため、html:root（詳細度 0,1,1 > 0,1,0）で勝たせている。
   !important は使わない。
   -------------------------------------------------------------------------- */
html:root{
  /* アクセント：青 → オレンジ。白背景の文字でも AA を満たす深いオレンジ */
  --ld-color-primitives-blue-500:#C24E02;
  --ld-color-primitives-blue-800:#A03F01;
  --ld-color-primitives-blue-200:#F0C481;
  --ld-color-primitives-blue-175:#F5E3C4;
  --ld-color-primitives-blue-150:#F7E9D2;
  --ld-color-primitives-blue-100:#FFF6EF;
  --ld-color-brand-tertiary:#F76503;

  /* 進捗バー：黒 → オレンジ→ゴールドの系統に合わせる */
  --ld-color-progress-bar-fg:#F76503;
  --ld-color-progress-bar-bg:#EDEFF3;

  /* 意味色 */
  --ld-color-semantic-success:#1B7F4E;
  --ld-color-system-validation-success:#1B7F4E;
  --ld-color-primitives-green-500:#1B7F4E;
  --ld-color-primitives-red-500:#C2401B;

  /* 文字と面：青みがかったグレーを中性色に置き換える */
  --ld-color-system-body-text:#3A4150;
  --ld-color-system-subtle:#6B7280;
  --ld-color-system-light-2:#F7F8FA;
  --ld-color-system-middle-gray-light:#EDEFF3;
  --ld-color-field-border:#D3D7DE;
  --ld-color-primitives-grey-100:#F7F8FA;
  --ld-color-primitives-grey-140:#E4E6EB;
  --ld-color-primitives-grey-150:#D3D7DE;
  --ld-color-primitives-grey-350:#6B7280;
  --ld-color-primitives-grey-500:#6B7280;
  --ld-color-primitives-grey-800:#3A4150;
  --ld-color-primitives-grey-900:#14161B;
}

/* タブバー：現在のタブをオレンジの下線で示す */
.ld-tab-bar__tabs{border-bottom:1px solid var(--jk-line)}
.ld-tab-bar__tab{
  font-family:var(--jk-ff-jp);
  font-size:14px;
  font-weight:700;
}
.ld-tab-bar__tab[aria-selected="true"]{
  color:var(--jk-orange-deep);
  box-shadow:inset 0 -2px 0 var(--jk-orange);
}

/* 右カラムのカード（クローズド / 修了報酬 / Includes）をカード意匠に揃える */
.ld-layout__sidebar > *,
.ld-layout aside > div{
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  box-shadow:var(--jk-e-1);
  padding:18px 20px;
}
.ld-layout__sidebar h2,
.ld-layout__sidebar h3,
.ld-layout aside h2,
.ld-layout aside h3{
  font-size:var(--jk-fs-lg);
  font-weight:700;
  color:var(--jk-text);
}

/* アイキャッチ */
.ld-featured-image img{
  border-radius:var(--jk-r-md);
  aspect-ratio:16/9;
  object-fit:cover;
  width:100%;
}

/* アコーディオン（コースコンテンツ） */
.ld-accordion{
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  overflow:hidden;
}
/* LearnDash も当セクションもヘッダーに padding を持たせておらず、
   「学べる動画コンテンツ」と「すべて展開」が枠線にべたづきしていた
   （本文側は .ld-accordion__section が 12px 持っているので、ヘッダーだけ
   左端が揃っていない状態だった）。横だけサイドバーのカード（18px 20px）に
   合わせる。縦は LearnDash の見出しマージンが効いているので触らない。 */
.ld-accordion__header{
  background:var(--jk-paper-2);
  border-bottom:1px solid var(--jk-line);
  padding:0 20px;
}
.ld-accordion__heading{font-size:var(--jk-fs-lg);font-weight:700;color:var(--jk-text)}
.ld-accordion__item{border-bottom:1px solid var(--jk-line)}
.ld-accordion__item:last-child{border-bottom:0}
.ld-accordion__item-header{min-height:52px}
.ld-accordion__item-title{font-size:14px;font-weight:700;color:var(--jk-text)}
.ld-accordion__item-attribute,
.ld-accordion__item-attribute-label{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  color:var(--jk-muted);
}
.ld-accordion__expand-button{
  color:var(--jk-text);
  font-size:var(--jk-fs-sm);
  font-weight:700;
}
/* --------------------------------------------------------------------------
   30. LearnDash 単一ページのアイキャッチ重複
   Astra の単一投稿用アイキャッチ
   （.ast-single-post-featured-section.ast-article-image-container--wide）が
   sfwd-courses などにも適用され、1188×668 の原寸画像が本文カードを
   突き抜けて表示されていた。LearnDash 側の .ld-featured-image が本文内で
   同じ画像を出しているので完全な重複。LearnDash の投稿タイプに限って伏せる。
   ブログ記事側のアイキャッチには影響しない。
   -------------------------------------------------------------------------- */
.single-sfwd-courses .ast-single-post-featured-section,
.single-sfwd-lessons .ast-single-post-featured-section,
.single-sfwd-topic .ast-single-post-featured-section,
.single-sfwd-quiz .ast-single-post-featured-section{
  display:none;
}

/* 万一 .ld-featured-image 側が無いテンプレートでも破綻しないよう、
   表示される場合は比率を固定しておく */
.single-sfwd-courses .ast-single-post-featured-section img,
.single-sfwd-lessons .ast-single-post-featured-section img{
  aspect-ratio:21/9;
  object-fit:cover;
  width:100%;
  border-radius:var(--jk-r-md);
}
/* --------------------------------------------------------------------------
   31. 空になったカテゴリーラベルを隠す
   functions.php の翻訳で商品カテゴリー「Uncategorized」を空文字にしているため、
   空の要素が余白だけ残らないようにする。
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product .ast-woo-product-category:empty{display:none}
/* --------------------------------------------------------------------------
   32. 無料ダウンロード商品のボタン
   これらの商品では「カートに追加」ではなくダウンロードが主アクションなので
   primary（オレンジ→ゴールド）にする。クラスに alt も add_to_cart_button も
   付かないため、セクション4の分類では secondary(ink) に落ちてしまっていた。
   -------------------------------------------------------------------------- */
.woocommerce a.button.jkck-dl-button,
.woocommerce ul.products li.product a.button.jkck-dl-button,
a.jkck-dl-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--jk-s-2);
  background:linear-gradient(135deg,var(--jk-orange) 0%,var(--jk-gold) 100%);
  color:var(--jk-text-inv);
  border:0;
  border-radius:8px;
  box-shadow:var(--jk-e-gold);
  font-weight:700;
  text-align:center;
  text-decoration:none;
}
.woocommerce a.button.jkck-dl-button:hover,
.woocommerce ul.products li.product a.button.jkck-dl-button:hover,
a.jkck-dl-button:hover{
  background:linear-gradient(135deg,var(--jk-orange-hi) 0%,#F0C481 100%);
  color:var(--jk-text-inv);
}
/* 下向き矢印でダウンロードだと分かるようにする */
.jkck-dl-button::before{
  content:"\2193";
  font-family:var(--jk-ff-mono);
  font-weight:700;
  opacity:.85;
}

/* 商品ページ側 */
.jkck-dl-wrap{display:flex;align-items:center;gap:var(--jk-s-3);flex-wrap:wrap;margin:var(--jk-s-4) 0}
.jkck-dl-wrap .jkck-dl-button{min-height:48px;padding:0 26px;font-size:var(--jk-fs-md)}
.jkck-dl-meta{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  letter-spacing:.06em;
  color:var(--jk-muted);
}

/* --------------------------------------------------------------------------
   33. ヘッダーの追い込み
   ・常時固定（デスクトップ／モバイル両方）
   ・メニューをページ中央、「マイページ」だけ右端
   ・SNSアイコンを公式ロゴに差し替え
   -------------------------------------------------------------------------- */

/* --- 33-1. 常時固定 -------------------------------------------------------
   モバイルヘッダー（#ast-mobile-header）も #masthead の中にあるので、
   ここ1か所で両方が固定になる。
   ログイン中は管理バーが position:fixed で上に居座るため、WordPress が
   html に出している --wp-admin--admin-bar--height ぶん下げる
   （未ログインなら変数が無いので 0px にフォールバックする）。 */
#masthead{
  position:sticky;
  top:var(--wp-admin--admin-bar--height,0px);
  z-index:99;
}
/* 600px 以下では WordPress が管理バーを absolute にしてスクロールで流すので、
   オフセットを戻さないとヘッダーが 46px 下に浮いてしまう。 */
@media (max-width:600px){
  #masthead{top:0}
}

/* --- 33-2. メニューを中央、「マイページ」だけ右端 -------------------------
   Astra のプライマリ行は grid で、ロゴ＝左カラム／メニュー＝右カラムの
   2カラム構成（実測 463px / 1122px）。右カラムの中で中央寄せしても
   「ロゴを除いた残り幅の中央」になり、ページ中央から 420px ずれる。
   そこで両セクションを同じセルに重ね、メニューだけ行の全幅で中央に置く。
   重ねた側がロゴのクリックを奪わないよう pointer-events を切り、
   リンクだけ戻している。 */
@media (min-width:922px){
  .ast-main-header-wrap .ast-builder-grid-row{grid-template-columns:1fr}
  .ast-main-header-wrap .site-header-primary-section-left,
  .ast-main-header-wrap .site-header-primary-section-right{grid-row:1;grid-column:1}
  .ast-main-header-wrap .site-header-primary-section-left{justify-content:flex-start}
  .ast-main-header-wrap .site-header-primary-section-right{
    justify-content:flex-start;
    pointer-events:none;
  }
  .ast-main-header-wrap .site-header-primary-section-right a,
  .ast-main-header-wrap .site-header-primary-section-right button{pointer-events:auto}
  /* 右セクション自体は行の全幅（1605px）になるが、その中の
     ast-builder-layout-element が flex:0 1 auto でメニュー幅（667px）のまま
     左に寄ってしまう。ここを伸ばさないと中央寄せも右端固定も効かない。
     さらに .main-navigation は inline-flex で内容幅に縮むので、
     block レベルの flex に変えて親いっぱいに広げる。 */
  .ast-main-header-wrap .site-header-primary-section-right > *{flex:1 1 auto;min-width:0}
  .ast-main-header-wrap .site-header-primary-section-right .main-navigation{display:flex;flex:1 1 auto}
  /* Astra は .ast-main-header-bar-alignment に margin-left:auto を当てて
     メニューを右へ押し出している。これが残っていると幅も 667px のままで、
     中央寄せも右端固定も効かない。 */
  .ast-main-header-wrap .site-header-primary-section-right .ast-main-header-bar-alignment{
    flex:1 1 auto;
    margin-left:0;
  }

  #ast-hf-menu-1{position:relative;flex:1 1 auto;justify-content:center}
  /* 右端に固定する2項目（カート・マイページ）はセクション36で扱う。
     絶対配置でフローから外すので、残りの項目はページ中央にそろう。 */
}

/* --- 33-3. SNSアイコンを公式ロゴへ ---------------------------------------
   もとは Astra のソーシャルビルダーが出す Font Awesome の単色グリフで、
   しかも YouTube が青 rgb(85,125,188) になっていた。
   Instagram と YouTube は公式配色の SVG（data URI）に差し替える。
   Facebook は元グリフが「円から f を抜いた形」なので、白い丸を背面に敷いて
   グリフを公式ブルーで塗れば公式と同じ見え方になる（パスを持ち込まない）。 */
.ast-below-header-bar .header-social-item{
  width:34px;height:34px;padding:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.ast-below-header-bar .header-social-item[href*="instagram.com"] .ahfb-svg-iconset,
.ast-below-header-bar .header-social-item[href*="youtube.com"] .ahfb-svg-iconset{display:none}

.ast-below-header-bar .header-social-item[href*="instagram.com"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0.28' cy='1.02' r='1.25'%3E%3Cstop offset='0' stop-color='%23FFD776'/%3E%3Cstop offset='0.25' stop-color='%23F3736B'/%3E%3Cstop offset='0.56' stop-color='%23C32E92'/%3E%3Cstop offset='1' stop-color='%235B51D8'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Crect x='8.6' y='8.6' width='14.8' height='14.8' rx='4.6' fill='none' stroke='%23fff' stroke-width='2.1'/%3E%3Ccircle cx='16' cy='16' r='3.9' fill='none' stroke='%23fff' stroke-width='2.1'/%3E%3Ccircle cx='21.4' cy='10.7' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
}
.ast-below-header-bar .header-social-item[href*="youtube.com"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect y='5.4' width='32' height='21.2' rx='5.6' fill='%23FF0000'/%3E%3Cpath d='M13.1 10.9 22.5 16 13.1 21.1Z' fill='%23fff'/%3E%3C/svg%3E");
}
.ast-below-header-bar .header-social-item[href*="facebook.com"]{
  background-color:#fff;
  border-radius:50%;
}
.ast-below-header-bar .header-social-item[href*="facebook.com"] svg{fill:#1877F2}

.ast-below-header-bar .header-social-item:hover{opacity:.82}

/* --------------------------------------------------------------------------
   34. 8大特典グリッドの幅解放
   post-70.css が .ci-service-list に max-width:1180px を入れており、
   4列にすると1枚 277px まで痩せてしまう。枠を外して親（1625px）を使わせる。
   -------------------------------------------------------------------------- */
@media (min-width:1280px){
  .ci-service-flow .ci-service-list{max-width:none}
}

/* --------------------------------------------------------------------------
   35. フッター
   住所7件と「プライバシーポリシー・セキュリティーポリシー」は Elementor
   テンプレート（elementor_library 417）側から削除し、サイトマップを
   MEMBER / SERVICE / INFORMATION の3列に組み替えた（高さ 1246px → 615px）。
   変更前の JSON は下書き投稿 956 にバックアップ済み。
   ここは見た目の仕上げだけを担当する。

   注意：一部で .elementor-element-<id> を使っている。Elementor 上で器を
   作り直すと ID が変わって効かなくなるので、その時はここを直す。
   -------------------------------------------------------------------------- */

/* フッターの立ち上がりに金の細い線を引いて、本文との境界をはっきりさせる */
.elementor-location-footer{
  position:relative;
  border-top:1px solid var(--jk-gold-line);
}

/* 列見出しは「金のラベル」として扱う */
.elementor-location-footer .elementor-widget-heading{
  padding-bottom:9px;
  margin-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
/* post-417.css の要素個別指定
   .elementor-417 .elementor-element.elementor-element-4855639c .elementor-heading-title
   が 0,4,0 で勝つため、body[class] を足して 0,4,1 にする。
   この個別指定は MEMBER 列にだけ付いているので、放置すると3列のうち
   1列だけ白のままという不整合になる。 */
body[class] .elementor-location-footer .elementor-widget-heading .elementor-heading-title{
  font-family:var(--jk-ff-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--jk-gold);
}

/* リンクは既定を淡く、ホバーで白へ。わずかに右へ出して反応を見せる */
.elementor-location-footer .elementor-icon-list-items{gap:1px}
.elementor-location-footer .elementor-icon-list-item{line-height:1.85}
.elementor-location-footer .elementor-icon-list-item > a,
.elementor-location-footer .elementor-icon-list-text{
  font-size:16.5px;
  font-weight:700;
  color:rgba(255,255,255,.82);
  transition:color .18s ease,transform .18s ease;
}
.elementor-location-footer .elementor-icon-list-item > a:hover{
  color:#fff;
  transform:translateX(3px);
  text-decoration:none;
}

/* 写真の帯は角を丸めて、装飾として整える */
.elementor-location-footer .elementor-widget-image-carousel img{
  border-radius:var(--jk-r-sm);
}

/* コピーライト行：上に区切りを入れて締める */
.elementor-location-footer .elementor-element-308f95a3{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.elementor-location-footer .elementor-element-308f95a3 p{
  margin:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.6);
}

/* モバイルではロゴ列とサイトマップを縦に積む（Elementor 側で 100% 指定済み）。
   3列は2列に落として、指で押せる高さを確保する。 */
@media (max-width:781px){
  .elementor-location-footer .elementor-widget-heading{margin-bottom:8px}
  .elementor-location-footer .elementor-icon-list-item{line-height:2.1}
  .elementor-location-footer .elementor-icon-list-item > a,
  .elementor-location-footer .elementor-icon-list-text{font-size:15.5px}
  body[class] .elementor-location-footer .elementor-widget-heading .elementor-heading-title{font-size:13px}
}

/* --------------------------------------------------------------------------
   36. ヘッダーメニューのアイコンと、右端のユーティリティ2項目
   -------------------------------------------------------------------------- */

/* アイコンは mask で描く。background-image ではなく mask にすると
   background-color:currentColor が効くので、通常時・ホバー時・現在ページの
   文字色にアイコンがそのまま追従する（色を二重管理しなくて済む）。
   ::before を付ける項目を明示列挙しているのは、ドロワーCTAのような
   --jk-ic を持たない項目に空の四角が出るのを防ぐため。 */
.main-header-menu > li.menu-item-168 > a::before,
.main-header-menu > li.menu-item-169 > a::before,
.main-header-menu > li.menu-item-170 > a::before,
.main-header-menu > li.menu-item-172 > a::before,
.main-header-menu > li.menu-item-186 > a::before,
.main-header-menu > li.menu-item-845 > a::before,
.main-header-menu > li.menu-item-850 > a::before{
  content:'';
  flex:0 0 auto;
  width:16px;height:16px;
  margin-right:7px;
  background-color:currentColor;
  -webkit-mask:var(--jk-ic) center/contain no-repeat;
  mask:var(--jk-ic) center/contain no-repeat;
}
.main-header-menu > li.menu-item-168 > a{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='18.8' height='14' rx='3'/%3E%3Cpath d='M10.2 9.6 15.6 12l-5.4 2.4Z' fill='%23000'/%3E%3C/svg%3E")}
.main-header-menu > li.menu-item-169 > a{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.5'/%3E%3Cpath d='M4.8 20c0-3.8 3.3-6.2 7.2-6.2s7.2 2.4 7.2 6.2'/%3E%3C/svg%3E")}
.main-header-menu > li.menu-item-170 > a{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.4 12 4l9 7.4'/%3E%3Cpath d='M5.7 10.6V20h12.6v-9.4'/%3E%3C/svg%3E")}
.main-header-menu > li.menu-item-172 > a{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.6' cy='19' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='17.4' cy='19' r='1.4' fill='%23000' stroke='none'/%3E%3Cpath d='M2.8 4h2.4l2.7 10.6h10.3L21.2 7.4H6.2'/%3E%3C/svg%3E")}
.main-header-menu > li.menu-item-186 > a{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.2h7l4 4V20.8h-11z'/%3E%3Cpath d='M9.4 12.4h6.2M9.4 16h6.2'/%3E%3C/svg%3E")}
.main-header-menu > li.menu-item-845 > a{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2a5 5 0 0 0-5 5v3.9L5.6 17h12.8L17 13.1V9.2a5 5 0 0 0-5-5z'/%3E%3Cpath d='M10 19.2a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.main-header-menu > li.menu-item-850 > a{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.6' width='18' height='12' rx='2'/%3E%3Cpath d='M9 7.6V6.2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.4'/%3E%3Cpath d='M3 12.4h18'/%3E%3C/svg%3E")}

/* デスクトップは「カート」と「マイページ」を右端のユーティリティとして扱う。
   どちらも絶対配置でフローから外すので、残りの項目はページ中央にそろう。

   --jk-nav-right-w は「マイページ」1項目分の幅。マイページ側に width として
   当てているので、カートの right 値と必ず一致する（片方だけ変わってズレない）。
   ラベルを長くする場合はこの値も広げること。 */
@media (min-width:922px){
  :root{
    --jk-nav-right-w:142px;              /* マイページ1項目分 */
    --jk-nav-cart-w:100px;               /* カート1項目分 */
    /* 項目幅を統一すると5項目で 915px 必要になる。CTA はその残りに収まる
       幅にしないと折り返す。16vw で 1701px 以上なら必ず入る計算。 */
    --jk-cta-w:clamp(200px,16vw,420px);
    --jk-nav-gap:14px;                   /* CTAとカートの間 */
    --jk-nav-item-w:183px;               /* メニュー1項目の統一幅（最長=業務支援サービス） */
  }

  /* 右端のユーティリティは3つとも絶対配置で右から積む。
       ... [CTA][カート][マイページ]  ← 行の右端
     フローから外すのでメニューは行の全幅を使ったまま中央に置ける。
     幅を変数で固定しているので、隣り合う要素の right 値が食い違わない。 */
  #ast-hf-menu-1 > li.menu-item-169{
    position:absolute;top:0;bottom:0;right:0;
    width:var(--jk-nav-item-w);
    display:flex;align-items:center;
  }
  #ast-hf-menu-1 > li.menu-item-172{
    position:absolute;top:0;bottom:0;
    right:var(--jk-nav-item-w);
    width:var(--jk-nav-item-w);
    display:flex;align-items:center;
  }

  /* 2段組みだったヘッダーを1段にしたので、CTAボタンも同じ行に入る。
     カート・マイページの左に来るよう、その2つ分だけ内側に置く。 */
  .ast-main-header-wrap .site-header-primary-section-right{position:relative}
  .ast-main-header-wrap .site-header-focus-item.ast-header-button-2{
    position:absolute;
    top:50%;
    right:calc(var(--jk-nav-item-w) * 2 + var(--jk-nav-gap));
    transform:translateY(-50%);
    z-index:2;
    width:var(--jk-cta-w);
  }
  .ast-main-header-wrap .ast-header-button-2 .ast-builder-button-wrap{width:100%}
  .ast-main-header-wrap .ast-header-button-2 .ast-custom-button-link{
    /* 既定は display:inline で、inline のままだと width が無視されて
       枠（460px）を 587px まで突き抜ける。flex にして幅を効かせる。 */
    display:flex;
    /* もとの装飾は 2段目（.ast-below-header-bar）を前提にした指定だったため、
       1段目へ移した時点で背景が外れて素のテキストリンクになっていた。
       ここで改めてボタンとして塗る。 */
    background:linear-gradient(135deg,var(--jk-orange),var(--jk-gold));
    color:#fff;
    border:0;
    border-radius:8px;
    font-weight:700;
    box-shadow:0 6px 16px rgba(247,101,3,.22);
    width:100%;
    align-items:center;
    justify-content:center;
    text-align:center;
    /* ラベルは2行想定（JSが「がくる！」の後ろに改行を入れる）。
       pre-line にすることでその改行が効く。 */
    white-space:pre-line;
    line-height:1.38;
    /* CTA を細くした（統一幅のメニューに場所を譲るため）ので、
       2行目「住宅建築コーディネーターのいるお店 登録フォーム」（23字）が
       入る文字サイズと左右余白に詰める。ここを緩めると3行に割れる。 */
    padding:8px 10px;
    font-size:clamp(10px,.58vw,11.5px);
    letter-spacing:0;
  }

  /* メニューが CTA の下に潜らないよう、右側3つ分の幅を padding で除ける。
     入り切らない幅では折り返して2行になる（重なるより折り返す方がまし）。 */
  /* ロゴを画面の左端に置くため、ヘッダー行だけコンテンツ幅の制限を外す。
     セクション19の body .ast-container（0,1,1）より詳細度が高い 0,2,0。
     結果としてロゴは左端、CTA・カート・マイページは右端に付く。 */
  .ast-main-header-wrap .ast-container{
    max-width:none;
    padding-left:0;
    padding-right:0;
  }
  .ast-main-header-wrap .site-header-primary-section-left{padding-left:18px}

  /* 項目幅を一番長い「業務支援サービス」に合わせて統一する。
     実測で 183px（16.5px 時）。CSS では兄弟の最大幅を計算できないので、
     実測値を変数で持ち、文字サイズを変える中間幅では別の値に切り替える。 */
  /* カート・マイページも含めて全項目を同じ幅にそろえる。
     右端の2つは絶対配置なので、幅の変数をそのまま right のオフセットに
     使い回すことで、隣り合う位置が必ず一致する。 */
  #ast-hf-menu-1 > li{
    flex:0 0 var(--jk-nav-item-w);
    width:var(--jk-nav-item-w);
  }
  #ast-hf-menu-1 > li > a{
    width:100%;
    justify-content:center;
  }

  #ast-hf-menu-1{
    flex-wrap:wrap;
    /* 左はロゴ、右は CTA・カート・マイページ の場所を確保して、
       残った幅の中央にメニューを置く。入り切らない幅では折り返す。 */
    padding-left:150px;
    /* CTA は画面右下のフローティングボタンへ移した（セクション47）。
       ヘッダー右端に残るのはカート・マイページの2つだけなので、
       確保する幅もその2項目分にする。ここに CTA 分を残すとメニューが
       左へ寄ったままになる。 */
    padding-right:calc(var(--jk-nav-item-w) * 2 + 12px);
  }
}

/* --------------------------------------------------------------------------
   37. トップのお知らせリスト
   旧実装は Elementor HTMLウィジェット内の <style> にあり、こうなっていた。
   ・矢印が 60×44 に border-radius:50% → Astra のボタン padding が効いて楕円
   ・矢印の縦位置がカード列の中心から 29px 上にずれていた
   ・矢印がカードの上に重なっていた
   ・カテゴリチップが青 #2563EB（サイト全体から青は排除しているのに残存）
   ・カードにリンクが無く、記事も存在しない静的ダミー4枚
   実データ描画に作り直したのでスタイルもここへ移した。

   2026-09-08、横スクロールのスライダーをやめ、jkck.jp トップの
   「大切なお知らせ」と同じ「日付｜タグ｜タイトル」の1カラムリストにした（依頼）。
   下の寸法・配色は jkck.jp の実測値。
   ・行 grid 110px + 132px + 1fr（gap 14px、jkck.jp は 256px 一括指定で同値）
   ・日付 14px/500 #3A3A3A ／ タイトル 20px/600 line-height 1.7 #253044
   ・ラベル 13px/700 padding 4px 12px radius 999px 文字 #1A1A1A、幅 132px 固定
   ・罫線 1px #E1E4E8
   実装: astra-child/news-block.php
   -------------------------------------------------------------------------- */
.ci-news-inner{width:100%;max-width:none}

/* 見出しと「お知らせ一覧」ボタンを両端に置く */
.ci-news-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--jk-s-4);
  margin-bottom:var(--jk-s-5);
}
.ci-news-label{
  margin:0 0 4px;
  font-family:var(--jk-ff-mono);
  font-size:11.5px;font-weight:700;letter-spacing:.18em;
  color:var(--jk-orange-deep);
}
.ci-news-title{margin:0;font-size:26px;font-weight:800;line-height:1.4;color:var(--jk-text)}

.ci-news-all{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;
  background:var(--jk-paper);
  border:1px solid var(--jk-line-2);border-radius:var(--jk-r-pill);
  font-size:13px;font-weight:700;color:var(--jk-text);
  text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ci-news-all::after{content:'→';font-family:var(--jk-ff-mono)}
.ci-news-all:hover{background:var(--jk-ink);border-color:var(--jk-ink);color:#fff}

/* Astra の a 下線は .ci-news-* の詳細度では消せない。body[class] を前置して1段上げる。
   （旧カード実装では text-decoration:none と書いてあるのに下線が残っていた） */
body[class] .ci-news-all,
body[class] .ci-news-all:hover,
body[class] .ci-news-all:focus,
body[class] .ci-news-all:visited{text-decoration:none}

/* 絞り込みバー。見た目は /column/ のバー（.jkn-tags / .jkn-tag）をそのまま使う。
   あちらのクラスはページに閉じていないので、ここでは間隔だけ足す。 */
.ci-news-filter{margin-bottom:var(--jk-s-4)}

/* jkck.jp は白いページ地の上に罫線を引くだけで済むが、members の地は #E0E0E0。
   1px #E1E4E8 の罫線は灰の上では見えないので、リストを白い面に載せる。
   面の寸法は /column/ の一覧（.jkn-scroll）と揃えてある。 */
.ci-news-list{
  list-style:none;margin:0;
  padding:8px 12px;
  background:var(--jk-paper);
  border:1px solid var(--jk-line-2);border-radius:var(--jk-r-md);
}
.ci-news-row{border-bottom:1px solid #E1E4E8}
/* 面の中では末尾の罫線が「続きがある」ように見えるので落とす */
.ci-news-row:last-child{border-bottom:none}

/* 絞り込みで0件になったとき。行の高さは jkck.jp の1行ぶんに合わせる。 */
.ci-news-row--empty{
  padding:16px 8px;
  font-size:15px;color:var(--jk-muted);
}
.ci-news-list[aria-busy="true"]{opacity:.55;transition:opacity .12s ease}

/* 列は grid-template-areas で決める。モバイルでタイトルを2段目に落とすとき、
   order を使うと日付とタグの並び順まで面倒を見る必要が出る。 */
.ci-news-link{
  display:grid;
  grid-template-columns:110px 132px minmax(0,1fr);
  grid-template-areas:"date tags title";
  column-gap:14px;
  align-items:center;
  padding:16px 8px;
  color:inherit;
}

/* Astra は a に下線を付ける。.ci-news-* は詳細度で負けるので body[class] を前置する
   （旧カード実装では text-decoration:none と書いてあるのに下線が残っていた）。 */
body[class] .ci-news-link,
body[class] .ci-news-link:hover,
body[class] .ci-news-link:focus{text-decoration:none}

.ci-news-row:hover{background:var(--jk-paper-2)}
body[class] .ci-news-row:hover .ci-news-row__title{color:var(--jk-orange-deep)}

.ci-news-date{
  grid-area:date;
  font-size:14px;font-weight:500;color:#3A3A3A;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* タグは記事に付いている全部を縦に積む。1件だけ出していた頃の名残で
   1行にまとめると、2つ以上付いた記事でタイトルの行頭が揃わなくなる。 */
.ci-news-tags{
  grid-area:tags;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:4px;
}
.ci-news-tag{
  box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  width:132px;
  padding:4px 12px;
  border-radius:var(--jk-r-pill);
  font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1.5;
  white-space:nowrap;
  background:#EEF0F3;color:#1A1A1A;
}

/* 配色は jkck.jp の実効値（50%透過）。鍵は news_tag のターム ID。
   slug には「活動報告」のように日本語のものがあり、属性セレクタに日本語を
   書くと配信時の文字コード次第で外れるため使わない。 */
.ci-news-tag[data-tag-id="73"]{background:rgba(255,222,89,.5)}   /* ニュース */
.ci-news-tag[data-tag-id="74"]{background:rgba(0,131,143,.5)}    /* 活躍事例 */
.ci-news-tag[data-tag-id="75"]{background:rgba(74,87,180,.5)}    /* 資格発行・更新 */
.ci-news-tag[data-tag-id="76"]{background:rgba(55,71,79,.5)}     /* 本部 */
.ci-news-tag[data-tag-id="79"]{background:rgba(109,76,65,.5)}    /* 支部 */
.ci-news-tag[data-tag-id="80"]{background:rgba(123,31,162,.5)}   /* イベント */
.ci-news-tag[data-tag-id="82"]{background:rgba(46,125,50,.5)}    /* 活動報告 */
.ci-news-tag[data-tag-id="99"]{background:rgba(198,40,40,.5)}    /* 重要 */
/* メディア掲載情報だけ jkck.jp 側で不透明の赤に上書きされている */
.ci-news-tag[data-tag-id="98"]{background:#D32F2F;color:#FFFFFF}
/* この2つは jkck.jp では色が外れている。会員限定はターム改名（member →
   members-only）でセレクタが当たらなくなり、会員限定一部公開は公開側の
   一覧に色付きで出る機会が無い。members では両方とも出るので色を与える。 */
.ci-news-tag[data-tag-id="100"]{background:rgba(69,39,160,.5)}   /* 会員限定 */
.ci-news-tag[data-tag-id="163"]{background:rgba(239,108,0,.5)}   /* 会員限定一部公開 */

.ci-news-row__title{
  grid-area:title;
  font-size:20px;font-weight:600;line-height:1.7;color:#253044;
  transition:color .18s ease;
}

.ci-news-empty{
  padding:28px;
  background:var(--jk-paper);
  border:1px dashed var(--jk-line-2);border-radius:var(--jk-r-md);
  font-size:13.5px;color:var(--jk-muted);text-align:center;
}

/* モバイルは日付とタグを1段目、タイトルを2段目に落とす。
   132px 固定のままだと本文の実効幅が 200px を割る。 */
@media (max-width:781px){
  .ci-news-head{flex-direction:column;align-items:flex-start;gap:14px}
  .ci-news-title{font-size:21px}

  .ci-news-link{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "date tags"
      "title title";
    column-gap:12px;row-gap:8px;
    padding:14px 4px;
  }
  .ci-news-tags{flex-direction:row;flex-wrap:wrap;gap:6px}
  .ci-news-tag{width:auto;font-size:12px;padding:3px 10px}
  .ci-news-row__title{font-size:16px;line-height:1.6}
}

/* --------------------------------------------------------------------------
   38. ヘッダーメニューの文字サイズ
   Astra はカスタマイザーの指定をインラインCSSで出すため、ID セレクタで
   確実に上に立つ（デスクトップ #ast-hf-menu-1 / ドロワー #ast-hf-mobile-menu）。
   アイコンも文字に合わせて 16px → 18px に上げる。
   文字が大きくなると「マイページ」の実寸も伸びるので、
   セクション36の --jk-nav-right-w を 126px → 142px に合わせて広げてある。
   -------------------------------------------------------------------------- */
#ast-hf-menu-1 > li > a,
#ast-hf-mobile-menu > li > a{
  font-size:16.5px;
  letter-spacing:.01em;
}
#ast-hf-menu-1 > li > a::before,
#ast-hf-mobile-menu > li > a::before{
  width:18px;height:18px;
  margin-right:8px;
}

/* --------------------------------------------------------------------------
   39. フッターのSNSアイコン
   もとは X と Facebook の2つで、どちらも link.url が「#」の飾りだった。
   Elementor の icon ウィジェット3つ（Instagram / Facebook / YouTube）に
   差し替え、見た目はヘッダー（セクション33-3）と同じ公式ロゴに揃える。

   Instagram と YouTube は公式配色の SVG（data URI）に置き換え、
   Facebook は元グリフが「円から f を抜いた形」なので白い丸を背面に敷いて
   公式ブルーで塗る。href で狙うのでアイコンの入れ替えに強い。
   -------------------------------------------------------------------------- */
.elementor-location-footer a.elementor-icon{
  width:30px;height:30px;
  padding:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  transition:opacity .18s ease;
}
.elementor-location-footer a.elementor-icon[href*="instagram.com"] svg,
.elementor-location-footer a.elementor-icon[href*="youtube.com"] svg{display:none}

.elementor-location-footer a.elementor-icon[href*="instagram.com"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0.28' cy='1.02' r='1.25'%3E%3Cstop offset='0' stop-color='%23FFD776'/%3E%3Cstop offset='0.25' stop-color='%23F3736B'/%3E%3Cstop offset='0.56' stop-color='%23C32E92'/%3E%3Cstop offset='1' stop-color='%235B51D8'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Crect x='8.6' y='8.6' width='14.8' height='14.8' rx='4.6' fill='none' stroke='%23fff' stroke-width='2.1'/%3E%3Ccircle cx='16' cy='16' r='3.9' fill='none' stroke='%23fff' stroke-width='2.1'/%3E%3Ccircle cx='21.4' cy='10.7' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
}
.elementor-location-footer a.elementor-icon[href*="youtube.com"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect y='5.4' width='32' height='21.2' rx='5.6' fill='%23FF0000'/%3E%3Cpath d='M13.1 10.9 22.5 16 13.1 21.1Z' fill='%23fff'/%3E%3C/svg%3E");
}
.elementor-location-footer a.elementor-icon[href*="facebook.com"]{
  background-color:#fff;
  border-radius:50%;
}
/* Elementor の要素個別指定
   .elementor-417 .elementor-element.<id> .elementor-icon svg{fill:#FDFEFF}
   が 0,4,0 で勝ち、白い丸に白い f で見えなくなっていた。
   body[class] を足して 0,4,2 にする。 */
body[class] .elementor-location-footer a.elementor-icon[href*="facebook.com"] svg{
  display:block;
  width:100%;height:100%;
  fill:#1877F2;
}
.elementor-location-footer a.elementor-icon:hover{opacity:.82}

/* --------------------------------------------------------------------------
   40. ヘッダー／フッターの配色
   紺（#001f4a）を地にして、メニューはホバー・現在ページで行の高さいっぱいの
   オレンジ帯にする（参考画像と同じ「四角いブロックが乗る」表現）。
   帯を行の高さいっぱいにするため、リンク側に height:100% を当てて
   角丸を切っている。角丸が残ると帯が浮いて見える。
   -------------------------------------------------------------------------- */
/* ヘッダー・フッターの地色。色名に縛られないよう shell という名前にしている
   （紺 #001f4a から #202020 へ変えた経緯があるため）。 */
:root{--jk-shell:#202020}

/* 地色はセクション9の !important 付きルールで当てている（Astra の
   インラインCSSに勝つ必要があるため）。ここでは残りの器だけ塗る。 */
#masthead,
#ast-mobile-header,
.ast-main-header-wrap{background-color:var(--jk-shell)}

.elementor-location-footer,
footer.elementor{background-color:var(--jk-shell)}

@media (min-width:922px){
  #ast-hf-menu-1 > li > a{
    height:100%;
    border-radius:0;
    transition:background-color .16s ease,color .16s ease;
  }
  /* ID セレクタなので、Astra の 0,4,0 の現在ページ指定にも勝つ */
  #ast-hf-menu-1 > li > a:hover,
  #ast-hf-menu-1 > li > a:focus-visible,
  #ast-hf-menu-1 > li.current-menu-item > a,
  #ast-hf-menu-1 > li.current_page_item > a{
    background-color:var(--jk-orange);
    /* Astra が .site-header .main-header-menu ... 系（0,4,0）に !important 付きで
       文字色を当ててくる場面があるため、こちらも !important で確定させる。
       アイコンは currentColor なので白に追従する。 */
    color:#fff!important;
  }
}

/* ドロワーも同じ考え方でそろえる */
@media (max-width:921px){
  #ast-hf-mobile-menu > li > a:hover,
  #ast-hf-mobile-menu > li.current-menu-item > a{
    background-color:var(--jk-orange);
    color:#fff;
  }
}

/* --------------------------------------------------------------------------
   41. 1段組みヘッダーの詰め（中間幅）
   1段に入る要素はロゴ + メニュー5項目 + CTA + カート + マイページ。
   2056px と 1600px では収まるが、1280px では約60px 足りず折り返していた。
   中間幅だけ文字・パディング・右側3つの幅を詰めて1段を保つ。
   1024px 付近はどう詰めても入り切らないので、そこは折り返しに任せる
   （Astra のモバイルヘッダーは 921px 未満で切り替わる）。
   -------------------------------------------------------------------------- */
/* 統一幅にした結果、1段が成立する下限が上がった。
   ・183px 版（16.5px 文字）が入るのは 1701px 以上
   ・159px 版（15px 文字）が入るのは 1416px 以上
   そこで切替を 1700px に置き、1416px 未満は折り返しに任せる。 */
@media (min-width:922px) and (max-width:1900px){
  :root{
    --jk-nav-right-w:118px;
    --jk-nav-cart-w:88px;
    --jk-nav-gap:10px;
    /* 文字が 15px になるので統一幅も詰める（実測の最長 159px） */
    --jk-nav-item-w:159px;
    /* 統一幅にすると 5項目で 795px 必要になり、CTA が 336px のままでは
       約50px 足りずに折り返す。CTA を細くして場所を作る。 */
    /* CTA の下限は「2行目が1行に収まる幅」。これ未満にすると3行に割れる。
       2行目は 10px 時に約233px 必要。さらに内側のラッパーが左右10pxずつ
       食うので、外枠は 233+20+20 = 273px 必要になる。 */
    --jk-cta-w:clamp(273px,16vw,380px);
  }
  #ast-hf-menu-1 > li > a{
    font-size:15px;
    padding-left:8px;
    padding-right:8px;
  }
  #ast-hf-menu-1 > li > a::before{
    width:16px;height:16px;
    margin-right:6px;
  }
  #ast-hf-menu-1{padding-left:124px}
}

/* さらに狭い帯。統一幅を 150px まで詰めて 1450px 付近まで1段を保つ。
   これ以上詰めると「業務支援サービス」が2行に折れるので、ここが下限。 */
@media (min-width:922px) and (max-width:1520px){
  :root{
    --jk-nav-item-w:150px;
    --jk-cta-w:clamp(273px,17vw,320px);
  }
  #ast-hf-menu-1 > li > a{font-size:14.5px;padding-left:6px;padding-right:6px}
  #ast-hf-menu-1{padding-left:110px}
}

/* --------------------------------------------------------------------------
   42. モバイルのメニュー開閉ボタン
   Astra は同じボタンの中でハンバーガー（.ast-menu-svg）と
   閉じる×（.ast-close-svg）を display で入れ替える仕組みを持っている。
   ボタンの位置は開閉で変わらないので「開くボタンと同じ位置に閉じるボタン」は
   この仕組みのままで満たせる。見えづらかったので、四角い枠を与えて
   ボタンだと分かるようにし、アイコンを白で大きくする。
   -------------------------------------------------------------------------- */
@media (max-width:921px){
  #ast-mobile-header .menu-toggle{
    display:grid;
    place-items:center;
    width:46px;height:46px;
    padding:0;
    /* このファイルの前半で .menu-toggle{background:transparent!important} を
       当てている（Astra の青い既定色を消すため）。同じ !important でないと
       勝てないので、ここも !important で塗る。 */
    background:rgba(255,255,255,.10)!important;
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    color:#fff;
  }
  #ast-mobile-header .menu-toggle:hover,
  #ast-mobile-header .menu-toggle[aria-expanded="true"]{
    background:var(--jk-orange)!important;
    border-color:var(--jk-orange);
  }
  #ast-mobile-header .menu-toggle svg{
    width:22px;height:22px;
    fill:currentColor;
  }
  /* 開いている間は×が出る（Astra が display を入れ替える）。
     色指定だけこちらで上書きして、地色に沈まないようにする。 */
  #ast-mobile-header .menu-toggle .ast-close-svg{fill:#fff}
}

/* --------------------------------------------------------------------------
   43. 方眼紙の下地（本文エリア）
   製図用紙に見えるよう、8px の細目と 40px の太目を重ねる二段グリッド。
   罫の色はインクの色（--jk-text）を極薄で使い、白の上でも紙の質感だけが
   残るようにしている（本文の可読性を落とさないため alpha は 0.03 前後）。
   セクションごとに独自の背景を持つブロック（カードなど）はその上に乗るので、
   紙の上にカードが浮いて見える階層になる。
   -------------------------------------------------------------------------- */
/* 2026-08-24: 下地を白から #E0E0E0 に変更した。白いカード（コースカード・
   商品カード・サイドバーの枠・タブ）が地から浮き上がり、階層が読めるようになる。
   罫の alpha は白前提で詰めていた値なので、灰の上でも同じ濃さに見えるよう
   少し上げている（.055→.075 / .028→.042）。 */
#content,
.site-content{
  background-color:#E0E0E0;
  background-image:
    /* 太目 40px */
    linear-gradient(to right,rgba(20,22,27,.075) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(20,22,27,.075) 1px,transparent 1px),
    /* 細目 8px */
    linear-gradient(to right,rgba(20,22,27,.042) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(20,22,27,.042) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;
  background-position:0 0;
  background-attachment:local;
}

/* --------------------------------------------------------------------------
   44. フッターの設計図透かし
   平面図（外壁の二重線・間仕切り・建具の回転軌跡・階段・窓・寸法線）を
   SVG で描いて敷く。写真を使わないので拡大しても崩れず、色も金一色に
   揃えられる。
   ::before に製図グリッドと金のグロー、::after に平面図を分けているのは、
   平面図だけ opacity で薄さを調整したいため（グラデーション側は
   色に alpha を焼き込んでいる）。
   isolation:isolate + z-index:-1 で、フッターの地色より上・本文より下に置く。
   -------------------------------------------------------------------------- */
.elementor-location-footer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.elementor-location-footer::before,
.elementor-location-footer::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
/* 高級住宅の実写を透かしで敷く。使っているのは協会自身の素材
   （メディアID 392 / 1560×1040 / 夕景の外観）で、フッターのカルーセルにも
   入っている写真。外部から持ってきていないので権利関係も明快。

   写真の上に濃い暗幕（0.985〜0.74 の勾配）を重ねているのは、
   ・文字（白と金）のコントラストを確実に保つため
   ・「写真」ではなく「気配」として読ませるため
   の2点。右側だけ薄くして、写真が奥から現れるような奥行きを作る。
   さらに金のグローを乗せて、暗幕の平坦さを消している。 */
/* 写真はフッター自身の background に置く。
   ::before（z-index:-1）に filter を付けると、filter が新しい合成レイヤーを
   作る影響で擬似要素が親の不透明な背景(#202020)の裏へ回り、完全に見えなく
   なった。要素自身の background なら子要素より確実に下に描かれるので、
   透かしの置き場所としてはこちらが正しい。

   夕景の写真は素のままでは #202020 に沈むため、最下層に screen 合成を
   指定して地色と足し合わせ、暗部を持ち上げている（filter を使わずに
   明るくする方法）。その上に下へ向かって濃くなる暗幕を重ね、
   サイトマップとコピーライトの可読性を確保している。 */
.elementor-location-footer{
  background-color:var(--jk-shell);
  background-image:
    radial-gradient(120% 90% at 10% 0%,rgba(233,182,103,.14),transparent 58%),
    linear-gradient(to bottom,
      rgba(32,32,32,.50) 0%,
      rgba(32,32,32,.74) 46%,
      rgba(32,32,32,.88) 76%,
      rgba(32,32,32,.94) 100%),
    url("/wp-content/uploads/2025/11/202205201344440.jpg");
  background-size:auto,auto,cover;
  background-position:center,center,center 30%;
  background-repeat:no-repeat;
  background-blend-mode:normal,normal,screen;
}
/* 平面図 + 製図グリッド（写真の上に線画を重ねて図面らしさを出す） */
.elementor-location-footer::after{
  background-image:
    radial-gradient(120% 90% at 10% 0%,rgba(233,182,103,.55),transparent 58%),
    radial-gradient(90% 80% at 92% 100%,rgba(233,182,103,.30),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 620'%3E%3Cg fill='none' stroke='%23E9B667' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cg stroke-width='2.6'%3E%3Crect x='110' y='76' width='780' height='468'/%3E%3Crect x='124' y='90' width='752' height='440'/%3E%3C/g%3E%3Cg stroke-width='1.9'%3E%3Cpath d='M266 90 V530'/%3E%3Cpath d='M422 90 V530'/%3E%3Cpath d='M124 232 H422'/%3E%3Cpath d='M124 388 H422'/%3E%3Cpath d='M344 232 V388'/%3E%3C/g%3E%3Cg stroke-width='1.5'%3E%3Cpath d='M180 530 V460'/%3E%3Cpath d='M180 460 A70 70 0 0 1 250 530'/%3E%3Cpath d='M344 300 H300'/%3E%3Cpath d='M300 300 A44 44 0 0 1 344 344'/%3E%3Cpath d='M290 232 H360 M290 226 H360'/%3E%3Cpath d='M170 232 H210'/%3E%3Cpath d='M210 232 L190 212'/%3E%3Cpath d='M422 430 V500 M416 430 H428 M416 500 H428'/%3E%3C/g%3E%3Cg stroke-width='1.4'%3E%3Cpath d='M700 76 V90 M800 76 V90 M700 83 H800'/%3E%3Cpath d='M876 200 H890 M876 300 H890 M883 200 V300'/%3E%3Cpath d='M876 360 H890 M876 460 H890 M883 360 V460'/%3E%3Cpath d='M560 530 V544 M680 530 V544 M560 537 H680'/%3E%3Cpath d='M110 120 H124 M110 200 H124 M117 120 V200'/%3E%3C/g%3E%3Cg stroke-width='1.5'%3E%3Crect x='130' y='96' width='130' height='130'/%3E%3Crect x='136' y='102' width='58' height='118' rx='6'/%3E%3C/g%3E%3Cg stroke-width='1.4'%3E%3Crect x='272' y='96' width='62' height='28'/%3E%3Ccircle cx='303' cy='110' r='8'/%3E%3Crect x='348' y='96' width='58' height='58'/%3E%3Ccircle cx='377' cy='125' r='16'/%3E%3C/g%3E%3Cg stroke-width='1.5'%3E%3Crect x='130' y='238' width='130' height='118'/%3E%3Cpath d='M130 262 H260 M130 286 H260 M130 310 H260 M130 334 H260'/%3E%3Cpath d='M195 348 V248 M186 259 L195 248 L204 259'/%3E%3C/g%3E%3Cg stroke-width='1.4'%3E%3Crect x='288' y='246' width='32' height='14'/%3E%3Cellipse cx='304' cy='282' rx='18' ry='24'/%3E%3Cpath d='M304 260 V258'/%3E%3C/g%3E%3Cg stroke-width='1.2'%3E%3Cpath d='M348 236 L418 384'/%3E%3C/g%3E%3Cg stroke-width='1.5'%3E%3Cpath d='M124 436 H266'/%3E%3Crect x='130' y='442' width='44' height='84'/%3E%3C/g%3E%3Cg stroke-width='1.4'%3E%3Crect x='430' y='96' width='204' height='56'/%3E%3Ccircle cx='470' cy='124' r='15'/%3E%3Ccircle cx='560' cy='112' r='7'/%3E%3Ccircle cx='584' cy='112' r='7'/%3E%3Ccircle cx='572' cy='136' r='7'/%3E%3Crect x='648' y='96' width='58' height='58'/%3E%3Crect x='474' y='222' width='150' height='84' rx='4'/%3E%3Crect x='440' y='240' width='26' height='48' rx='4'/%3E%3Crect x='632' y='240' width='26' height='48' rx='4'/%3E%3Crect x='474' y='384' width='170' height='58' rx='8'/%3E%3Crect x='760' y='390' width='96' height='40'/%3E%3C/g%3E%3Cg fill='%23E9B667' stroke='none' font-family='sans-serif'%3E%3Ctext x='640' y='330' font-size='30' letter-spacing='2'%3ELDK%3C/text%3E%3Ctext x='195' y='198' font-size='15' text-anchor='middle'%3E浴室%3C/text%3E%3Ctext x='344' y='200' font-size='15' text-anchor='middle'%3E洗面脱衣%3C/text%3E%3Ctext x='195' y='378' font-size='15' text-anchor='middle'%3E階段%3C/text%3E%3Ctext x='304' y='330' font-size='13' text-anchor='middle'%3EWC%3C/text%3E%3Ctext x='372' y='372' font-size='13' text-anchor='middle'%3E収納%3C/text%3E%3Ctext x='210' y='512' font-size='15' text-anchor='middle'%3E玄関%3C/text%3E%3Ctext x='344' y='412' font-size='13' text-anchor='middle'%3Eホール%3C/text%3E%3C/g%3E%3Cg stroke-width='1.3'%3E%3Ccircle cx='944' cy='566' r='22'/%3E%3Cpath d='M944 588 V548 M936 558 L944 546 L952 558'/%3E%3C/g%3E%3Cg fill='%23E9B667' stroke='none' font-family='sans-serif'%3E%3Ctext x='944' y='543' font-size='12' text-anchor='middle'%3EN%3C/text%3E%3C/g%3E%3Cg stroke-width='1.1'%3E%3Cpath d='M110 588 H890 M110 578 V598 M890 578 V598 M500 578 V598'/%3E%3Cpath d='M74 76 V544 M64 76 H84 M64 544 H84 M64 310 H84'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    ,linear-gradient(to right,rgba(233,182,103,.30) 1px,transparent 1px)
    ,linear-gradient(to bottom,rgba(233,182,103,.30) 1px,transparent 1px)
    ,linear-gradient(to right,rgba(233,182,103,.16) 1px,transparent 1px)
    ,linear-gradient(to bottom,rgba(233,182,103,.16) 1px,transparent 1px);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,repeat,repeat;
  /* 間取り図はできる限り左へ寄せる。left center なら図面が切れずに
     左端いっぱいまで寄る（負のオフセットにすると左側が画面外で切れる）。 */
  background-position:center,center,left center,0 0,0 0,0 0,0 0;
  background-size:auto,auto,auto 132%,64px 64px,64px 64px,16px 16px,16px 16px;
  opacity:.20;
}

@media (max-width:781px){
  .elementor-location-footer::after{
    background-position:left top 8%;
    background-size:190% auto;
    opacity:.12;
  }
}

/* --------------------------------------------------------------------------
   45. 8大特典カードの刷新（誌面レイアウト）
   参考デザインに合わせて、白いカード（枠・影・角丸）をやめ、縦罫だけで
   列を区切る編集的な組みに変える。背景を透過させたので、セクション43の
   方眼紙がそのまま下地として見え、紙面に組まれた記事のように読める。

   各項目の内容に合わせたアイコンを ::before で置く。mask で描いているので
   色は background-color 側で決まり、ホバー時の色替えも1か所で済む。
   -------------------------------------------------------------------------- */

.ci-service-flow .ci-service-list{gap:0}

.ci-service-flow .ci-service-item{position:relative}
.ci-service-flow .ci-service-item::before{
  content:'';
  position:absolute;
  top:22px;bottom:22px;left:0;
  width:1px;
  background:var(--jk-line-2);
}
@media (min-width:1280px){
  .ci-service-flow .ci-service-item:nth-child(4n+1)::before{display:none}
}
@media (min-width:601px) and (max-width:1279px){
  .ci-service-flow .ci-service-item:nth-child(odd)::before{display:none}
}
@media (max-width:600px){
  .ci-service-flow .ci-service-item::before{
    top:auto;left:22px;right:22px;bottom:0;
    width:auto;height:1px;
  }
  .ci-service-flow .ci-service-item:last-child::before{display:none}
}

.ci-service-flow .ci-service-item .ci-service-card{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  min-height:0;
  padding:32px 30px 30px;
}
.ci-service-flow .ci-service-item .ci-service-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}

.ci-service-flow .ci-service-item .ci-service-content::before{
  content:'';
  flex:0 0 auto;
  width:50px;height:50px;
  margin-bottom:20px;
  background-color:var(--jk-orange-deep);
  -webkit-mask:var(--jk-ic) center/contain no-repeat;
  mask:var(--jk-ic) center/contain no-repeat;
  transition:background-color .2s ease;
}
.ci-service-flow .ci-service-item:nth-child(1) .ci-service-content{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='2'/%3E%3Cpath d='M9 20.5h6M12 17v3.5'/%3E%3C/svg%3E")}
.ci-service-flow .ci-service-item:nth-child(2) .ci-service-content{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M3.2 6.4 12 13l8.8-6.6'/%3E%3C/svg%3E")}
.ci-service-flow .ci-service-item:nth-child(3) .ci-service-content{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.4' r='3.2'/%3E%3Ccircle cx='17.2' cy='9.6' r='2.4'/%3E%3Cpath d='M3 19.4c0-3.3 2.7-5.2 6-5.2s6 1.9 6 5.2'/%3E%3Cpath d='M17.2 14.4c2.4 0 3.8 1.5 3.8 4'/%3E%3C/svg%3E")}
.ci-service-flow .ci-service-item:nth-child(4) .ci-service-content{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3' width='11' height='18' rx='2'/%3E%3Cpath d='M6.5 8h5M6.5 12h5'/%3E%3Ccircle cx='17.6' cy='16.6' r='3.4'/%3E%3Cpath d='M17.6 12.8v1.2M17.6 19.2v1.2M13.8 16.6h1.2M20 16.6h1.2'/%3E%3C/svg%3E")}
.ci-service-flow .ci-service-item:nth-child(5) .ci-service-content{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='13' height='9.5' rx='2.4'/%3E%3Cpath d='M6.4 13.5v3.2l3.6-3.2'/%3E%3Crect x='10.5' y='10.5' width='11' height='8' rx='2.4'/%3E%3C/svg%3E")}
.ci-service-flow .ci-service-item:nth-child(6) .ci-service-content{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7.6' width='12.5' height='9.8' rx='2'/%3E%3Cpath d='M7.4 7.6V6.2a2 2 0 0 1 2-2h1.6a2 2 0 0 1 2 2v1.4'/%3E%3Ccircle cx='18' cy='16' r='3.4'/%3E%3Cpath d='M20.5 18.5 22.4 20.4'/%3E%3C/svg%3E")}
.ci-service-flow .ci-service-item:nth-child(7) .ci-service-content{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.6 5.6 4h12.8L21 9.6'/%3E%3Crect x='4' y='9.6' width='16' height='10.4' rx='1.4'/%3E%3Cpath d='M9.2 20v-5.6h5.6V20'/%3E%3C/svg%3E")}
.ci-service-flow .ci-service-item:nth-child(8) .ci-service-content{--jk-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 20 6v5.8c0 4.6-3.4 7.4-8 9-4.6-1.6-8-4.4-8-9V6z'/%3E%3Cpath d='M8.8 12.2l2.3 2.3 4.1-4.5'/%3E%3C/svg%3E")}

.ci-service-flow .ci-service-item h3{
  margin:0 0 12px;
  font-size:18.5px;
  font-weight:800;
  line-height:1.55;
  letter-spacing:.01em;
  color:var(--jk-text);
}
.ci-service-flow .ci-service-item h3 br{display:none}
.ci-service-flow .ci-service-item p{
  margin:0 0 18px;
  font-size:13.5px;
  line-height:1.95;
  color:var(--jk-text-2);
}

.ci-service-flow .ci-service-item .ci-service-btn{
  margin-top:auto;
  width:auto;
  /* ウィジェット内のインラインCSSが .ci-service-btn に
     color:#fff!important と padding を当てている。白文字のままだと
     白地に溶けて見えなくなるので、こちらも !important で確定させる。 */
  padding:0!important;
  background:none;
  border:0;
  border-bottom:1px solid var(--jk-gold-line);
  border-radius:0;
  box-shadow:none;
  color:var(--jk-orange-deep)!important;
  font-size:13px;
  font-weight:700;
  line-height:2.1;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:color .18s ease,border-color .18s ease,gap .18s ease;
}
.ci-service-flow .ci-service-item .ci-service-btn::after{
  content:'→';
  font-family:var(--jk-ff-mono);
}
.ci-service-flow .ci-service-item .ci-service-btn:hover{
  background:none;
  color:var(--jk-ink)!important;
  border-color:var(--jk-ink);
  gap:11px;
}

.ci-service-flow .ci-service-item:hover .ci-service-content::before{
  background-color:var(--jk-orange);
}

/* --------------------------------------------------------------------------
   46. 申請ダイアログ内「掲載先サイト」へのリンク
   申請前に掲載イメージを確認できるよう、リード文の直下に置いている。
   別タブ（target="_blank"）で開くので、入力途中のフォームが失われない。

   注意：このリンクの URL はヘッダーCTAと同じ（お店サイト）なので、
   CTA乗っ取りの判定（shop-form-block.php の isCta）で
   #jkck-shop-dialog 内を除外している。除外しないとダイアログを
   開き直すだけで別タブが開かない。
   -------------------------------------------------------------------------- */
.jkck-dialog__site{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 22px;
  padding:14px 16px;
  background:
    linear-gradient(135deg,rgba(233,182,103,.16),rgba(233,182,103,.05)),
    var(--jk-paper);
  border:1px solid var(--jk-gold-line);
  border-radius:var(--jk-r-md);
  box-shadow:0 1px 2px rgba(11,12,16,.05);
  color:var(--jk-text);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.jkck-dialog__site:hover{
  transform:translateY(-2px);
  border-color:var(--jk-gold);
  box-shadow:0 12px 26px rgba(233,182,103,.26);
  text-decoration:none;
}

/* 左のアイコン（店舗）。金の円に載せて記章のように見せる */
.jkck-dialog__site-ic{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:42px;height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--jk-orange),var(--jk-gold));
}
.jkck-dialog__site-ic::before{
  content:'';
  width:22px;height:22px;
  background-color:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.6 5.6 4h12.8L21 9.6'/%3E%3Crect x='4' y='9.6' width='16' height='10.4' rx='1.4'/%3E%3Cpath d='M9.2 20v-5.6h5.6V20'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.6 5.6 4h12.8L21 9.6'/%3E%3Crect x='4' y='9.6' width='16' height='10.4' rx='1.4'/%3E%3Cpath d='M9.2 20v-5.6h5.6V20'/%3E%3C/svg%3E") center/contain no-repeat;
}

.jkck-dialog__site-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.jkck-dialog__site-eyebrow{
  font-family:var(--jk-ff-mono);
  font-size:10.5px;font-weight:700;letter-spacing:.16em;
  color:var(--jk-orange-deep);
}
.jkck-dialog__site-name{
  font-size:14px;font-weight:800;line-height:1.5;
  color:var(--jk-text);
}
.jkck-dialog__site-note{font-size:11.5px;line-height:1.6;color:var(--jk-muted)}

/* 右端の「別タブで開く」アイコン */
.jkck-dialog__site-go{
  flex:0 0 auto;
  margin-left:auto;
  width:18px;height:18px;
  background-color:var(--jk-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14.5V19a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 19V7.5A1.5 1.5 0 0 1 5 6h4.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14.5V19a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 19V7.5A1.5 1.5 0 0 1 5 6h4.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background-color .18s ease,transform .18s ease;
}
.jkck-dialog__site:hover .jkck-dialog__site-go{
  background-color:var(--jk-orange-deep);
  transform:translate(2px,-2px);
}

@media (max-width:600px){
  .jkck-dialog__site{gap:11px;padding:12px 13px}
  .jkck-dialog__site-ic{width:36px;height:36px}
  .jkck-dialog__site-ic::before{width:19px;height:19px}
  .jkck-dialog__site-name{font-size:13px}
}

/* --------------------------------------------------------------------------
   47. CTA を画面右下のフローティングボタンへ
   参考: jkck.jp の常時表示CTA（スクロール中は右へ逃げ、止まって2秒で戻る）。

   実装は astra-child/fab-block.php。カスタマイザーの
   「ヘッダー ボタン2」の文言とリンクをそのまま読んで、フッターに
   #jkck-fab を出力している。ヘッダー内の Astra ボタンはここで隠す。

   ヘッダー内の要素を position:fixed にする方法は取らなかった。Astra が
   921px 以下でデスクトップ用ヘッダーごと display:none にするため、
   モバイルでは描画されない要素になってしまう。

   なお --jk-cta-w とセクション36の .ast-custom-button-link の装飾は、
   切り戻せるように残してある（今は非表示なので効いていない）。
   -------------------------------------------------------------------------- */

/* ヘッダー内の元のCTA。セクション36の同じセレクタ（0,3,0）より後ろなので
   display が勝つ。2つ目のセレクタは、デスクトップ以外の器に出た場合の保険。 */
.ast-main-header-wrap .site-header-focus-item.ast-header-button-2,
.ast-header-button-2{display:none}

:root{
  /* 正方形の最小サイズ。実際の幅は「一番長い行 + 左右padding」で決まり
     （width:max-content）、高さは aspect-ratio:1 で幅に追従する。
     文字サイズを変えても正方形が崩れない。 */
  --jk-fab-w:176px;
  --jk-fab-bottom:24px;
}

.jkck-fab{
  position:fixed;
  right:0;
  bottom:var(--jk-fab-bottom);
  /* カードを縦に積む。align-items:stretch なので2枚は必ず同じ幅になり、
     aspect-ratio:1 で同じ大きさの正方形にそろう。 */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  row-gap:12px;
  /* 幅は中身（一番長い行）が決める。min-width で下限だけ与える。 */
  width:max-content;
  min-width:var(--jk-fab-w);
  max-width:92vw;
  /* モバイルのドロワー（9999）より下に置く。メニューを開いている間は
     ドロワーが覆うので、CTA を別途隠す必要がない。 */
  z-index:900;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
}

/* スクロール中は右へ逃がす。right:0 なので translateX(100%) で完全に画面外。
   opacity は併用しない（戻り際にちらつくため、移動だけで隠す）。 */
.jkck-fab.is-scrolling{transform:translateX(100%)}

@media (prefers-reduced-motion:reduce){
  .jkck-fab{transition:none}
}

.jkck-fab__link{
  /* 1列4行。上から 導線コピー / アイコン / JKCがいるお店 / 登録申請フォーム。
     並び順は order で決めている（::before は既定だと先頭に来るため）。 */
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  align-content:center;
  row-gap:6px;
  /* 正方形。中身が高いときだけ縦に伸びる（＝文字が切れない）。 */
  aspect-ratio:1 / 1;
  padding:14px 16px;
  text-align:center;
  /* 右端に張り付くので、丸めるのは左側だけ */
  border-radius:16px 0 0 16px;
  background:linear-gradient(135deg,var(--jk-orange),var(--jk-gold));
  color:#fff;
  text-decoration:none;
  box-shadow:-8px 12px 30px rgba(11,12,16,.34);
  transition:transform .2s ease,box-shadow .2s ease;
}
.jkck-fab__link:hover,
.jkck-fab__link:focus-visible{color:#fff;text-decoration:none}

/* 店舗アイコン。2行目に単独で置く。
   mask + currentColor なので文字色に追従する。 */
.jkck-fab__link::before{
  content:'';
  order:2;
  margin:3px 0 1px;
  width:44px;height:44px;
  background-color:currentColor;
  -webkit-mask:var(--jk-fab-ic) center/contain no-repeat;
  mask:var(--jk-fab-ic) center/contain no-repeat;
}
/* カードごとのアイコン。店舗＝登録申請、封筒＝お問い合わせ。 */
.jkck-fab__link--shop{--jk-fab-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.3 9.2 5.2 4.6h13.6l1.9 4.6'/%3E%3Cpath d='M4.7 9.2V20h14.6V9.2'/%3E%3Cpath d='M9.7 20v-5.4h4.6V20'/%3E%3Cpath d='M3.3 9.2h17.4'/%3E%3C/svg%3E")}
.jkck-fab__link--contact{--jk-fab-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='18.8' height='14' rx='2.4'/%3E%3Cpath d='M3.6 6.8 12 13.2l8.4-6.4'/%3E%3C/svg%3E")}

/* 2枚目は地色を落として副次的な導線に見せる。金の細線で締める。 */
.jkck-fab__link--contact{
  background:linear-gradient(135deg,#323232,#1b1b1b);
  border:1px solid var(--jk-gold-line);
  box-shadow:-8px 12px 30px rgba(11,12,16,.42);
}
.jkck-fab__link--contact .jkck-fab__lead{color:var(--jk-gold)}

/* 3枚目（掲示板）は吹き出しのアイコン。地色は2枚目と同じ系統にして、
   オレンジの申請フォームを主導線のまま残す。 */
.jkck-fab__link--board{--jk-fab-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 14.4a2 2 0 0 1-2 2H7.8L3.6 20.2V5.6a2 2 0 0 1 2-2h12.8a2 2 0 0 1 2 2z'/%3E%3Cpath d='M7.4 8.4h9.2'/%3E%3Cpath d='M7.4 11.8h6'/%3E%3C/svg%3E")}
/* 3枚目だけ緑。オレンジ（申請）と黒（問い合わせ）に対して、
   会員どうしの場であることを色で分けている。地はパレットの --jk-ok。 */
.jkck-fab__link--board{
  background:linear-gradient(135deg,var(--jk-ok),#12633B);
  border:1px solid var(--jk-gold-line);
}
.jkck-fab__link--board .jkck-fab__lead{color:var(--jk-gold-soft)}

/* 掲示板はモバイル専用（下の 47-2 で出す）。
   デスクトップは右端の縦カードなので、3枚に増やすと本文の右半分を
   さらに覆うだけになる。あちらは /column/ の右カラムに掲示板が
   常時見えているので、導線としても要らない。 */
.jkck-fab__link--board{display:none}
.jkck-fab__lead{
  order:1;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.3;
  /* 折り返させない。この行が一番長いので、カードの幅はここで決まる。 */
  white-space:nowrap;
  color:rgba(255,255,255,.95);
}
.jkck-fab__main{
  order:3;
  font-size:17px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
}
/* スクロール中のスライドと喧嘩しないよう、ホバーの移動は内側の <a> に当てる */
.jkck-fab:not(.is-scrolling) .jkck-fab__link:hover{
  transform:translateX(-4px);
  box-shadow:-10px 14px 34px rgba(11,12,16,.42);
}

/* Astra の「上へ戻る」ボタンは 2026-08-23 にカスタマイザーで無効化した
   （フローティングCTAと場所を争うだけで、価値が薄かった）。
   保険として、設定が戻された場合でも CTA と重ならないよう隠しておく。
   id セレクタ（1,0,0）より強い 1,0,1 で当てる。 */
body #ast-scroll-top{display:none}

/* 47-2 モバイル（Astra がハンバーガーへ切り替わる 921px 以下）は、
   右端のフローティングをやめて画面下端に固定した2分割バーにする。
   2026-08-24

   縦2枚のカードはモバイルだと本文の右半分を覆ううえ、スクロール連動で
   画面外へ逃げるので「常時目に入る導線」として働いていなかった。
   バーにすれば高さ 58px で固定でき、両方が親指の届く位置にそろう。

   ・導線コピー（.jkck-fab__lead）はここでは落とす。残すと2行ぶん
     高さが増えてバーが本文を圧迫する。本題2行で用は足りる。

   2026-08-27、3枚目（掲示板）を足して3分割にした。
   /column/ は1023px以下で1カラムに落ちるため、掲示板ダイジェストが
   お知らせ20件＋自動読み込みの下に沈んで誰の目にも入らなくなっていた。

   **3分割にした時点で「アイコン左＋本題右」は成り立たなくなる。**
   390px 幅で1枠は130px。左右padding とアイコン26px＋間隔10px を引くと
   本題に残るのは74px しかなく、「登録申請フォーム」8文字は 13.5px で
   108px 要る。文字を9px台まで落とさないと収まらない。
   そこで **アイコンを上・本題を下の縦積み**に変えた。本題が枠の全幅を
   使えるので、320px でも8文字が入る。
   引き換えにバーが 58px → 66px になる（アイコン20px＋本題2行）。
   高さは --jk-fab-bar-h の1か所で、フッターの下駄もこれを見ている。 */
@media (max-width:921px){
  :root{
    /* バーの**外寸**。フッターの下駄はこの値をそのまま確保する。
       枠線1pxぶんを引いた値を中身の min-height に渡す（下）。

       本題は clamp(…,3vw,…) で伸びるので、中身の実高は幅によって動く。
       min-height より高くなるとバーだけ伸びてフッターに食い込むため、
       **一番広いところ（921px）でも中身が収まる**ように上限を決めてある。
         padding 6+6 ＝ 12
         アイコン        20
         行間 1×2        2
         本題2行 12.4px × 1.25 × 2 ＝ 31
         計 65 ＋ 枠線1 ＝ 66 */
    --jk-fab-bar-h:66px;
  }

  .jkck-fab{
    right:0;
    left:0;
    bottom:0;
    flex-direction:row;
    align-items:stretch;
    width:auto;
    min-width:0;
    max-width:none;
    row-gap:0;
    background:var(--jk-ink);
    border-top:1px solid var(--jk-gold-line);
    box-shadow:0 -8px 24px rgba(11,12,16,.30);
    /* iPhone のホームインジケータぶんを内側に足す */
    padding-bottom:env(safe-area-inset-bottom,0px);
  }

  /* 常時表示が目的なので、スクロール中に逃がすのをやめる。
     JS（fab-block.php）は .is-scrolling を付け外しし続けるが、
     移動そのものは CSS が担当しているのでここで無効化すれば足りる。 */
  .jkck-fab.is-scrolling{transform:none}
  .jkck-fab:not(.is-scrolling) .jkck-fab__link:hover{transform:none;box-shadow:none}

  /* ハンバーガーを開いている間だけ引っ込める。
     このテーマのモバイルメニューは fixed のオーバーレイではなくヘッダー内で
     展開する「minimal」型なので、fixed のバーが常に上に乗ってしまう。
     ドロワーの中にも同じ「申請フォーム」CTAがあり二重になる。
     開いている間 Astra が body に .ast-main-header-nav-open を付ける。 */
  body.ast-main-header-nav-open .jkck-fab{display:none}

  /* flex:1 1 0 なので、枚数が2でも3でも等分になる。
     50% と書くと3枚目がはみ出す。 */
  .jkck-fab__link{
    flex:1 1 0;
    min-width:0;
    display:grid;
    grid-template-columns:1fr;
    align-content:center;
    justify-items:center;
    column-gap:0;
    row-gap:1px;
    aspect-ratio:auto;
    /* 枠線は .jkck-fab 側にあるので、その1pxを引いた値が中身の取り分。 */
    min-height:calc(var(--jk-fab-bar-h) - 1px);
    padding:6px;
    border-radius:0;
    box-shadow:none;
    text-align:center;
  }
  /* 区切りは border ではなく inset の box-shadow で描く。
     border は flex-basis の外側に足されるので、線を持つ2枚だけ 1px 広くなり
     3枚が等幅にならない（box-shadow に替える前の実測 129.33 / 130.34 / 130.33）。
     box-shadow はレイアウトに影響しないので、3枚が寸分同じ幅になる。 */
  .jkck-fab__link{border:0}
  .jkck-fab__link--contact,
  .jkck-fab__link--board{box-shadow:inset 1px 0 0 var(--jk-gold-line)}

  /* セクション47で display:none にしてある3枚目を、ここで戻す。 */
  .jkck-fab__link--board{display:grid}

  .jkck-fab__lead{display:none}

  /* アイコンは1行目。order は ::before=2 / .jkck-fab__main=3 のままなので、
     lead が display:none で消えるぶん、アイコンが自然と先頭に来る。 */
  .jkck-fab__link::before{
    grid-column:1;
    margin:0;
    width:20px;
    height:20px;
  }
  /* 320px 幅（1枠 約107px）でも「登録申請フォーム」8文字が収まるところまで縮む。
     nowrap にしておかないと、狭い枠で勝手に折れて3行になりバーが伸びる。 */
  .jkck-fab__main{
    grid-column:1;
    /* 上限 12.4px と line-height 1.25 は、上の --jk-fab-bar-h の
       計算と対になっている。片方だけ動かすとバーがフッターに食い込む。 */
    font-size:clamp(10.5px,3vw,12.4px);
    line-height:1.25;
    white-space:nowrap;
  }

  /* バーがフッターの末尾に重なるので、その高さぶん下駄を履かせる。
     .elementor-location-footer は地色が ink（セクション11）で
     透かしも inset:0（セクション44）なので、padding を足しても継ぎ目は出ない。 */
  .elementor-location-footer{
    padding-bottom:calc(var(--jk-fab-bar-h) + env(safe-area-inset-bottom,0px));
  }
}

/* CTA が抜けて右側の予約幅が縮んだので、十分に広い画面では左右の予約幅を
   そろえてメニューを画面の中央に置く。1600px 未満でそろえると1段に
   収まらなくなる（1280px などのノートで折り返す）ので、上だけに効かせる。
   セクション41の padding-left（124px / 110px）より後ろなので勝つ。 */
@media (min-width:1600px){
  #ast-hf-menu-1{padding-left:calc(var(--jk-nav-item-w) * 2 + 12px)}
}

/* --------------------------------------------------------------------------
   48. ヒーロー下部のキャッチコピー
   もとは「学び・人財・情報がつながり」と「成約を生むプラットフォーム」を
   `.ci-bottom-box`（暗い地色＋金の枠＋角丸＋padding）の2枚に分けていた。
   枠と地色のせいでボタンに見えてしまうため、1つの文にまとめて地色を外した。

   マークアップは Elementor HTMLウィジェット 3a51ed4（page 70 の /0/0）で
   <p class="ci-hero-tagline"> 1つに差し替えてある。変更前のHTMLは
   下書き固定ページ 965 にバックアップ済み。
   ウィジェット内の <style> には .ci-bottom-box の指定がまだ残っているが、
   対応する要素が無くなったので効いていない（切り戻し用に温存）。

   位置は旧2枚と同じ左6% / 下12%。地色が無くなった分、映像の明るい場面でも
   読めるように影を敷いている。
   -------------------------------------------------------------------------- */
.ci-hero .ci-hero-tagline{
  position:absolute;
  left:6%;
  right:6%;
  bottom:12%;
  margin:0;
  background:transparent;
  border:0;
  padding:0;
  color:#fff;
  /* 旧22px → 画面幅に応じて最大38pxまで。26文字なので 1280px 以上なら1行に収まる。 */
  font-size:clamp(19px,2.1vw,38px);
  font-weight:800;
  line-height:1.45;
  letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(11,12,16,.65),0 1px 3px rgba(11,12,16,.5);
}

@media (max-width:600px){
  .ci-hero .ci-hero-tagline{
    left:5%;
    right:5%;
    bottom:8%;
    font-size:19px;
    line-height:1.5;
  }
}

/* --------------------------------------------------------------------------
   49. ログイン画面（/login/）モバイルの説明文
   ログイン画面のデザインは WPCode スニペット「ログイン画面デザイン
   （固定ページ 643 = /login/）」の <style> が持っている。その中に
   @media (max-width:900px){ .jkck-brand p{display:none} } があり、
   「一般社団法人 住宅建築コーディネーター協会の会員専用
   成約を生むプラットフォームです。」がスマホで消えていた。

   スニペット側を直さないのは、WPCode の更新が黙って失敗することがあり、
   ログイン画面の指定がこのファイルの外に散るのを避けたいため。
   インラインの <style> は head のスタイルより後に来るので同着では負ける。
   id を足して (1,1,1) にすれば、順序に関係なく (0,1,1) に勝てる。

   .jkck-brand は min-height（clamp(196px,30svh,300px)）なので、文が増えた
   分だけ素直に伸びる。overflow:hidden があっても切れない（実測 302→368px）。
   地色が暗いので、文字は本文より小さくする代わりに不透明度を上げている。

   font-size を clamp にしているのは、14px 固定だと 320px 幅で
   「…協会」「の」「…です」「。」のように1文字だけ行末に落ちるため。
   3.9vw なら 320px で 12.5px まで詰まり、2行に収まる（実測 266+254px）。
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  #jkck-login .jkck-brand p{
    display:block;
    margin:14px 0 0;
    font-size:clamp(12.5px,3.9vw,14px);
    line-height:1.85;
    color:rgba(255,255,255,.78);
    max-width:none;
  }
}

/* --------------------------------------------------------------------------
   50. 会員限定「学び」「人財」「情報」3つの場（インフォグラフィック）
   参考図版（top.png）の構成をそのまま踏襲しつつ、配色と描画をサイトの
   材質（方眼紙・墨・金・オレンジ）に寄せている。
   ・図版は方眼紙の上に置く「図面」として扱うので、セクション自体は透過。
     カードだけ白い紙として浮かせる。
   ・3つの場の識別色はカードごとに --pl 系の変数で持たせ、1か所で差し替え
     られるようにしてある（参考図版の青は墨紺 #2B3E66 に置換）。
   ・人物イラストは線画（太い round キャップのストロークを二重描きして
     「輪郭のあるチューブ」にする手法）で描き、フッターの設計図透かしや
     ロゴの家形と同じ線の言語に揃えた。
   実装: astra-child/value-block.php
   -------------------------------------------------------------------------- */

.jkv{
  --jkv-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.7 6.3l2.9 2.9 5.7-6.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  max-width:1560px;
  margin:0 auto;
  padding:clamp(48px,5vw,84px) 0 clamp(10px,2vw,26px);
  font-family:var(--jk-ff-jp);
  color:var(--jk-text);
  text-align:left;
}

/* --- 見出し ------------------------------------------------------------- */

.jkv__head{text-align:center;margin:0 0 clamp(20px,2.4vw,30px)}

.jkv__eyebrow{
  display:inline-flex;align-items:center;gap:clamp(12px,1.4vw,20px);
  margin:0 0 12px;
  font-size:clamp(17px,1.9vw,25px);
  font-weight:700;
  letter-spacing:.05em;
  color:var(--jk-text-2);
}
.jkv__eyebrow::before,
.jkv__eyebrow::after{
  content:'';
  width:2px;height:1.35em;
  background:var(--jk-gold);
  border-radius:2px;
}
.jkv__eyebrow::before{transform:rotate(-21deg)}
.jkv__eyebrow::after{transform:rotate(21deg)}

.jkv__title{
  margin:0;
  font-size:clamp(24px,2.85vw,50px);
  font-weight:900;
  line-height:1.5;
  letter-spacing:.005em;
  color:var(--jk-text);
}
.jkv__title b{font-weight:900;white-space:nowrap}
.jkv__title .is-learn{color:#2B3E66}
.jkv__title .is-people{color:var(--jk-orange-deep)}
.jkv__title .is-info{color:#166B42}

.jkv__lead{
  max-width:940px;
  margin:clamp(18px,2vw,26px) auto 0;
  padding:clamp(14px,1.6vw,20px) clamp(16px,2vw,28px);
  background:rgba(233,182,103,.10);
  border:1px solid var(--jk-gold-line);
  border-radius:var(--jk-r-lg);
  font-size:clamp(17px,1.7vw,21px);
  font-weight:700;
  line-height:1.85;
  color:var(--jk-text-2);
  text-align:center;
}

/* --- 3つの場のカード ---------------------------------------------------- */

.jkv__pillars{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}

.jkv-pillar{
  --pl:#2B3E66;
  --pl-txt:#2B3E66;
  --pl-wash:rgba(43,62,102,.14);
  --pl-soft:rgba(43,62,102,.24);
  --pl-line:rgba(43,62,102,.42);

  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(20px,2vw,26px) clamp(18px,1.8vw,24px) clamp(18px,1.8vw,22px);
  background:var(--pl-wash);
  border:1.5px solid var(--pl-line);
  border-radius:20px;
  /* 透過面なので影は輪郭を補う程度に留める。強い影を残すと
     「浮いた白いカード」に見えて透過の意味が消える。
     2026-08-25: 地が白から #E0E0E0 になり、5% では地に埋もれて
     カードの矩形が消えていたので wash/soft/line を一段濃くした。
     脚注(--pl-soft)はカード地(--pl-wash)との差で分離させているので、
     wash を上げたら soft も必ず一緒に上げること（逆転すると脚注が沈む）。 */
  box-shadow:0 1px 2px rgba(11,12,16,.04);
}
/* 天の色帯。カードの識別色をいちばん上で名乗らせる */
.jkv-pillar::before{
  content:'';
  position:absolute;left:22px;right:22px;top:0;
  height:3px;
  background:var(--pl);
  border-radius:0 0 3px 3px;
}

.jkv-pillar--people{
  --pl:var(--jk-orange);
  --pl-txt:var(--jk-orange-deep);
  --pl-wash:rgba(247,101,3,.15);
  --pl-soft:rgba(247,101,3,.26);
  --pl-line:rgba(247,101,3,.48);
}
.jkv-pillar--info{
  --pl:#1B7F4E;
  --pl-txt:#166B42;
  --pl-wash:rgba(27,127,78,.14);
  --pl-soft:rgba(27,127,78,.24);
  --pl-line:rgba(27,127,78,.44);
}

.jkv-pillar__head{
  display:flex;align-items:center;gap:14px;
  margin-bottom:clamp(14px,1.6vw,20px);
}
.jkv-pillar__badge{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:70px;height:70px;
  background:var(--pl);
  border-radius:50%;
  color:#fff;
}
.jkv-pillar--learn .jkv-pillar__badge{color:var(--jk-gold)}
.jkv-pillar__badge svg{width:37px;height:37px;display:block}

.jkv-pillar__name{
  margin:0;
  font-size:clamp(25px,2.2vw,32px);
  font-weight:900;
  line-height:1.3;
  letter-spacing:.01em;
  color:var(--pl-txt);
}
.jkv-pillar__sub{
  margin:5px 0 0;
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  color:var(--pl-txt);
  opacity:.85;
}

.jkv-pillar__list{
  list-style:none;
  margin:0;padding:0;
  display:grid;gap:11px;
}
.jkv-pillar__list li{
  position:relative;
  padding-left:38px;
  font-size:20px;
  font-weight:700;
  line-height:1.6;
  color:var(--jk-text);
}
/* ::before が色付きの丸、::after が白いチェック。
   1枚のデータURIに焼くと色が固定されるので2枚に分けている。 */
.jkv-pillar__list li::before{
  content:'';
  position:absolute;left:0;top:3px;
  width:26px;height:26px;
  background:var(--pl);
  border-radius:50%;
}
.jkv-pillar__list li::after{
  content:'';
  position:absolute;left:6.5px;top:9.5px;
  width:13px;height:13px;
  background:#fff;
  -webkit-mask:var(--jkv-check) center/contain no-repeat;
  mask:var(--jkv-check) center/contain no-repeat;
}
/* 2026-08-26（依頼）: 補足行を赤・太字にし、大きさは親の項目（20px）に揃えた。 */
.jkv-pillar__list small{
  display:block;
  margin-top:4px;
  font-size:20px;
  font-weight:700;
  line-height:1.55;
  color:var(--jk-danger);
}

/* 2026-09-13（依頼）: 「JKCがいるお店 登録制度」から申請ダイアログを開く。

   **下線は常時出す。** 4項目のうちここだけが押せるので、下線が無いと
   クリックできることに気づけない（残り3項目と見分けが付かない）。
   ホバーでは色を識別色（情報＝緑）に変えて反応を返す。

   **詳細度は `body[class]` で上げる。** Astra が
   `.ast-single-post .entry-content a`（0,2,1）で下線を当ててくるので、
   `.jkv-pillar__list a`（0,1,1）では負ける。実際、最初に
   `text-decoration:none` と書いたのに下線が出ていた。
   `body[class]` はこの子テーマで詳細度を1段上げるときの常套手段。 */
body[class] .jkv-pillar__list a{
  color:inherit;
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in srgb, var(--pl) 55%, transparent);
  transition:color .15s ease, text-decoration-color .15s ease;
}
body[class] .jkv-pillar__list a:hover,
body[class] .jkv-pillar__list a:focus-visible{
  color:var(--pl);
  text-decoration-thickness:2px;
  text-decoration-color:var(--pl);
}
body[class] .jkv-pillar__list a:focus-visible{
  outline:2px solid var(--pl);
  outline-offset:3px;
  border-radius:3px;
}

/* --- カード内のイラスト ------------------------------------------------- */

/* 高さを固定して中央に置く。3枚の縦横比が違う（縦長・正方・横長）ので、
   幅で揃えると3枚の占める高さがばらつく。 */
.jkv-pillar__art{
  width:100%;
  max-width:260px;
  align-self:center;
  margin:clamp(12px,1.5vw,18px) 0 clamp(14px,1.6vw,18px);
  height:210px;
}
/* max-height:100% は grid アイテムだと効かないことがあるので、
   枠を確定させて object-fit で内側に収める。 */
.jkv-pillar__art img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
}

.jkv-pillar__note{
  margin-top:auto;
  padding:16px 18px;
  background:var(--pl-soft);
  border-radius:14px;
  font-size:18px;
  font-weight:700;
  line-height:1.75;
  color:var(--pl-txt);
  text-align:center;
}

/* --- カードから相乗効果へ落ちる点線 ------------------------------------- */

/* 3枚のカードと式カードの間隔。線の見える長さそのもの。 */
.jkv__stems{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  height:64px;
}
/* 3枚のカードと下の式カードを結ぶ線。丸帯が無くなって全長が見えるように
   なったので、点線2px/38% では細く頼りなかった。破線3px/70% に上げる。 */
.jkv__stem{
  justify-self:center;
  width:0;height:100%;
  border-left:3px dashed rgba(43,62,102,.70);
}
.jkv__stem:nth-child(2){border-color:rgba(247,101,3,.70)}
.jkv__stem:nth-child(3){border-color:rgba(27,127,78,.45)}

/* --- 相乗効果 ----------------------------------------------------------- */

/* 2026-08-25: 「学び＋人財＋情報＝相談・紹介・成約へ」を1枚のカードに
   統合した。以前は .jkv-syn（白）と .jkv-outcome（緑）を2カラムに
   並べていたが、式として1枚で読ませたいので .jkv-outcome を
   .jkv-syn の中へ移した。ここは器を残すだけ。 */
.jkv__synergy{display:block}

/* 3項目は横並びのまま、文字をアイコンの下に置く。1行に並べて文字を横に
   出すと1項目あたり128pxしか取れず8文字で折り返す。縦積みにすると帯が
   400px近くなって間が空く。この組みなら213px幅・2行に収まる。 */
.jkv-syn{
  position:relative;
  display:flex;align-items:center;
  gap:14px;
  /* 丸帯を撤去したので、上に確保していた 53px の逃げは不要。 */
  padding:clamp(20px,2vw,26px) clamp(14px,1.6vw,20px);
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(11,12,16,.05);
}
.jkv-syn__item{
  flex:1 1 0;min-width:0;
  align-self:flex-start;
  display:flex;flex-direction:column;align-items:center;
  gap:10px;
  text-align:center;
}
.jkv-syn__circle{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:66px;height:66px;
  border-radius:50%;
  color:#fff;
}
.jkv-syn__circle svg{width:31px;height:31px;display:block}
.jkv-syn__item--learn .jkv-syn__circle{background:#2B3E66;color:var(--jk-gold)}
.jkv-syn__item--people .jkv-syn__circle{background:var(--jk-orange)}
.jkv-syn__item--info .jkv-syn__circle{background:#1B7F4E}

.jkv-syn__label{
  display:block;
  margin-bottom:2px;
  font-family:var(--jk-ff-mono);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.jkv-syn__item--learn .jkv-syn__label{color:#2B3E66}
.jkv-syn__item--people .jkv-syn__label{color:var(--jk-orange-deep)}
.jkv-syn__item--info .jkv-syn__label{color:#166B42}

.jkv-syn__text{
  margin:0;
  font-size:16px;
  font-weight:700;
  line-height:1.7;
  color:var(--jk-text);
}

/* 2026-08-25: 丸を 34px → 51px（1.5倍）にした。棒も 16/3.5 → 24/5 に揃える。
   ＝の棒の位置 top/bottom も 12px → 18px（1.5倍）。 */
.jkv-syn__plus,
.jkv-syn__eq{
  position:relative;
  flex:0 0 auto;
  width:51px;height:51px;
  border-radius:50%;
  background:var(--jk-paper-3);
  color:var(--jk-text-2);
}
/* ＋・＝とも、式の記号なのでカードの上下中央に置く（.jkv-syn は
   align-items:center なので、align-self を指定しなければ中央にそろう）。
   以前は入力3項目のアイコンと同じ高さに合わせて上揃えにしていた。 */
/* ＝は＋と同じ配色にする（上のまとめ指定 --jk-paper-3 / --jk-text-2 のまま）。 */
.jkv-syn__eq::before,
.jkv-syn__eq::after{
  content:'';
  position:absolute;left:50%;
  width:24px;height:5px;
  background:currentColor;
  border-radius:2.5px;
  transform:translateX(-50%);
}
.jkv-syn__eq::before{top:18px}
.jkv-syn__eq::after{bottom:18px}
.jkv-syn__plus::before,
.jkv-syn__plus::after{
  content:'';
  position:absolute;top:50%;left:50%;
  background:currentColor;
  border-radius:2.5px;
  transform:translate(-50%,-50%);
}
.jkv-syn__plus::before{width:24px;height:5px}
.jkv-syn__plus::after{width:5px;height:24px}

/* 見出しは横断させ、下段で本文とグラフを並べる。1行の grid で組むと
   「相談・紹介・成約へ」の実寸がグラフの領域に食い込む。 */
.jkv-outcome{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(80px,6.5vw,96px);
  grid-template-areas:
    "title title"
    "text  chart";
  align-items:center;
  align-content:center;
  gap:10px 10px;
  /* カードの中の1要素になったので、外枠だったころより控えめに。
     地は白カードの上なので 065 では出ない。少し上げる。 */
  flex:0 1 clamp(280px,26vw,380px);
  padding:clamp(14px,1.5vw,18px);
  /* 「より価値ある活躍を！」（.jkv-goal__title em）と同じ金。 */
  background:var(--jk-gold);
  border:1px solid var(--jk-gold);
  border-radius:16px;
}
/* 見出しとグラフは水色。金地（#E9B667）の上で読ませる必要があるので、
   淡い水色ではなく深い水色を使う（#08536B で 4.6:1 = AA）。
   中間の水色 #1281A6 だと 2.4:1 で大文字の基準 3:1 すら下回る。 */
.jkv-outcome h3{
  grid-area:title;
  margin:0;
  font-size:clamp(22px,2vw,28px);
  font-weight:900;
  line-height:1.35;
  letter-spacing:.01em;
  white-space:nowrap;
  color:#08536B;
}
.jkv-outcome p{
  grid-area:text;
  margin:0;
  font-size:17px;
  font-weight:700;
  line-height:1.75;
  color:var(--jk-text-2);
}
.jkv-outcome__chart{grid-area:chart;color:#08536B}
.jkv-outcome__chart svg{display:block;width:100%;height:auto}

/* --- 帰結（ダークな銘板） ----------------------------------------------- */

/* 式カードから銘板への導線。2026-08-25 に作り直した。
   以前は 46px の隙間に 28% の細い線矢印を置いただけで、
   ほとんど気づかれない状態だった。

   間隔を倍以上に広げ、矢印は墨地の丸バッジに入れて金で描く。
   直後に来る銘板（墨地＋金）と同じ配色にして、次のブロックの
   予告として機能させる。丸と矢印は同じグリッドセルに重ねる。 */
.jkv__down{
  display:grid;
  place-items:center;
  height:clamp(76px,7vw,104px);
}
.jkv__down::before{
  content:'';
  grid-area:1/1;
  width:64px;height:64px;
  border-radius:50%;
  background:var(--jk-ink);
  box-shadow:0 10px 24px rgba(11,12,16,.30);
}
.jkv__down svg{
  grid-area:1/1;
  display:block;
  width:26px;height:auto;
  color:var(--jk-gold);
}

.jkv-goal{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:clamp(100px,9vw,128px) minmax(0,1fr) clamp(100px,10vw,134px);
  align-items:center;
  gap:clamp(16px,2vw,28px);
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,34px);
  background:linear-gradient(100deg,var(--jk-ink) 0%,var(--jk-ink-2) 58%,#1D2029 100%);
  border-radius:22px;
  box-shadow:0 18px 44px rgba(11,12,16,.20);
}
/* 金の細い内枠。図面の枠線に見せる */
.jkv-goal::before{
  content:'';
  position:absolute;inset:9px;
  border:1px solid var(--jk-gold-line);
  border-radius:14px;
  pointer-events:none;
}
.jkv-goal__house{color:var(--jk-gold);opacity:.72}
.jkv-goal__house svg{display:block;width:100%;height:auto}
.jkv-goal__title{
  margin:0 0 8px;
  font-size:clamp(22px,2.5vw,34px);
  font-weight:900;
  line-height:1.45;
  letter-spacing:.01em;
  color:#fff;
}
.jkv-goal__title em{font-style:normal;color:var(--jk-gold)}
.jkv-goal__text{
  margin:0;
  font-size:17.5px;
  font-weight:500;
  line-height:1.85;
  color:rgba(255,255,255,.74);
}
/* 人物イラストは輪郭も髪も濃色なので、墨地に直に置くと沈む。
   白い円に載せて金の細枠で囲み、肖像のメダルとして扱う。 */
/* 額に入れた肖像として扱う。使っている画像（man2.png 由来）は背景込みで、
   人物が枠いっぱいに収まる構図なので、切り抜かずそのまま額に流し込む。
   aspect-ratio は画像の実寸（340x313）と同じにしてあるので、
   object-fit:cover でもトリミングは起きない。 */
.jkv-goal__person{
  aspect-ratio:340/313;
  overflow:hidden;
  background:var(--jk-paper);
  border:2px solid var(--jk-gold-line);
  border-radius:20px;
}
.jkv-goal__person img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}

/* --- 日本語の折り返し --------------------------------------------------- */

/* 文字を大きくすると「知識・スキルが身につ／く」のように一字だけ次行に
   落ちる行が出る。balance で行長をそろえ、auto-phrase で文節の切れ目を
   優先させる（auto-phrase は未対応ブラウザでは無視されるだけ）。 */
.jkv__title,
.jkv__lead,
.jkv-pillar__note,
.jkv-syn__text,
.jkv-outcome p,
.jkv-goal__text{
  text-wrap:balance;
  word-break:auto-phrase;
}
/* セクション3で見出し全般に text-wrap:balance が当たっている。balance は
   行長をそろえる代わりに切れ目を選ぶので、ここでは「…コーディネーターと／
   して、」という読みにくい位置で割れる。素の詰め込みに戻すと、金色の塊
   （em）の直前で必ず折れる。 */
.jkv-goal__title{word-break:auto-phrase;text-wrap:wrap}

/* 銘板の見出しは1行に収まらないとき「…コーディネーターと／して、」で
   割れる。金色の後半を1つの塊にしておくと、必ずその前で折れる。 */
.jkv-goal__title em{display:inline-block}

/* --- レスポンシブ ------------------------------------------------------- */

/* カード3列が窮屈になる手前で1列に折る */
/* 1280px を割るとカード幅が足りず、自前の改行位置が一字だけ余る行を作る。
   広い幅のときだけ手で折る。 */
@media (max-width:1279px){
  .jkv-pillar__note br{display:none}
}

@media (max-width:899px){
  .jkv__title br{display:none}
}

@media (max-width:1023px){
  .jkv__pillars{grid-template-columns:1fr}

  /* 1列積みでは線が1本になり、画面も狭いので 64px は空きすぎる。 */
  .jkv__stems{grid-template-columns:1fr;height:48px}
  .jkv__stem:nth-child(n+2){display:none}

  /* 3項目＋結論を1行に置くと結論が細くなりすぎる。結論だけ次の行へ回す。

     ＝は flex-basis:100% にしないと1行目の余りに残り「情報」の右隣に
     取り残される。ただし 100% にすると span 自体が伸びて
     border-radius:50% が楕円になる（実測で 946px の帯になった）。
     そこで span は透明な「行」に徹し、丸と棒は擬似要素で中央に描く。
     ::before = 丸 / ::after = 棒2本（背景を2枚重ねる）。 */
  .jkv-syn{flex-wrap:wrap}
  .jkv-syn__eq{
    flex:0 0 100%;
    width:auto;height:51px;
    margin:6px 0;
    background:none;
    border-radius:0;
    align-self:center;
  }
  .jkv-syn__eq::before{
    top:50%;bottom:auto;
    width:51px;height:51px;
    border-radius:50%;
    background:var(--jk-paper-3);
    transform:translate(-50%,-50%);
  }
  .jkv-syn__eq::after{
    top:50%;bottom:auto;
    width:24px;height:17px;
    border-radius:0;
    background:
      linear-gradient(currentColor,currentColor) top/24px 5px no-repeat,
      linear-gradient(currentColor,currentColor) bottom/24px 5px no-repeat;
    transform:translate(-50%,-50%);
  }
  .jkv-outcome{flex:1 1 100%;grid-template-columns:minmax(0,1fr) 92px}
}

/* 3列に割ると1項目90px程度になり成立しないので、1項目1行に戻す */
@media (max-width:767px){
  .jkv-syn{flex-wrap:wrap}
  .jkv-syn__item{
    flex:1 1 100%;
    align-self:auto;
    flex-direction:row;
    align-items:center;
    gap:14px;
    text-align:left;
  }
  /* 縦積みでは記号が行と行の間に来るので左右中央に置く。 */
  .jkv-syn__plus,
  .jkv-syn__eq{margin:0 auto;align-self:auto}
  /* 結論も1行分の幅を取る。 */
  .jkv-outcome{flex:1 1 100%}
}

@media (max-width:600px){
  .jkv{padding-top:36px}
  .jkv__down{height:64px}
  .jkv__down::before{width:52px;height:52px}
  .jkv__down svg{width:22px}
  .jkv__lead{line-height:1.8}
  .jkv-goal{
    grid-template-columns:1fr;
    justify-items:center;
    gap:14px;
    padding:22px 18px;
    text-align:center;
  }
  /* 「住宅建築コーディネーターとして、」は16文字分。390pxの窓では内寸が
     334pxしか無いので20pxが上限。これを超えると「…と／して、」で割れる。 */
  .jkv-goal__title{font-size:20px}
  .jkv-goal__house{width:150px;order:-1}
  .jkv-goal__person{width:112px}
  .jkv-outcome{grid-template-columns:1fr;grid-template-areas:'title' 'text' 'chart';justify-items:center;text-align:center}
  .jkv-outcome__chart{width:120px}
  .jkv-pillar__note{text-align:left}
}

@media (prefers-reduced-motion:no-preference){
  .jkv-pillar{transition:transform .22s ease,box-shadow .22s ease}
  .jkv-pillar:hover{
    transform:translateY(-3px);
    box-shadow:0 1px 2px rgba(11,12,16,.04),0 14px 30px rgba(11,12,16,.07);
  }
}

/* --------------------------------------------------------------------------
   51. 学べる動画（無料／有料の2段組み）
   実装: astra-child/learning-videos-block.php（[jkck_learning_videos]）
   カードそのものはセクション6・16 の LearnDash コースグリッドを使い回す。
   ここは段の見出しと、受付終了カードの見え方だけを足している。
   -------------------------------------------------------------------------- */
/* 2026-08-24 にタブ化した。段の見出し（.jk-lv__head 系）は出力されなくなり、
   種別と本数はセクション52 のタブが持っている。間隔は .jk-feed と
   .jk-feed__foot の余白で決まるので、ここは素の block でよい。 */
.jk-lv{display:block}

/* 受付終了（closed）のカード。写真の彩度を落として現役の動画と分ける。 */
.ld_course_grid.jk-lv-ended article.thumbnail > a img{filter:grayscale(.6);opacity:.78}
.ld_course_grid.jk-lv-ended article.thumbnail:hover > a img{filter:grayscale(.3);opacity:.9}
.ld_course_grid.jk-lv-ended article.thumbnail .entry-title{color:var(--jk-text-2)}

/* リボン：価格の金チップと見分けるため、文字を金から灰に落とす。
   セクション16 が 0,5,1 で書いているので、同じ経路にクラスを1つ足して勝つ。 */
.ld-course-list-items .ld_course_grid article.thumbnail.course .ribbon.jk-ribbon-ended{
  background:rgba(11,12,16,.82);
  color:#E7E9EE;
  border-color:rgba(255,255,255,.24);
  letter-spacing:.1em;
}

/* グリッド自体の折り返しと間隔はセクション6・16 が持っている。 */

/* --------------------------------------------------------------------------
   52. 一覧のタブとスクロール自動読み込み
   実装: astra-child/tabs-block.php（共通）
         astra-child/shop-tabs-block.php（/shop/）
         astra-child/learning-videos-block.php（/learning-videos/）

   タブも絞り込みも中身は素のリンク。JS が動く環境ではクリックを横取りして
   中身だけ差し替え、動かない環境では普通のページ遷移になる。
   ページ送り（WooCommerce）は JS が動くときだけ隠す。
   -------------------------------------------------------------------------- */

.jk-feed{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--jk-s-2) var(--jk-s-5);
  margin:0 0 var(--jk-s-5);
  border-bottom:1px solid var(--jk-line);
}

.jk-feed__tabs{display:flex;gap:var(--jk-s-2);min-width:0}

.jk-feed__tab{
  display:inline-flex;
  align-items:center;
  gap:var(--jk-s-2);
  padding:12px 22px;
  border-radius:10px 10px 0 0;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  color:var(--jk-text-2);
  text-decoration:none;
  white-space:nowrap;
  /* 下地が #E0E0E0 になったので、タブは地より明るくして「つまみ」に見せる。
     選択中を白、未選択をわずかに沈ませた白にして、明度だけで前後関係を出す。 */
  background:var(--jk-paper-2);
  transition:color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.jk-feed__tab:hover{color:var(--jk-text);background:var(--jk-paper)}
/* 下線はコンテナの罫線の上に内側から重ねる。負のマージンで持ち上げると
   タブの高さが揃わなくなるので使わない。
   選択中は白＋上向きの淡い影で、未選択より手前にあるように見せる。 */
.jk-feed__tab.is-current{
  color:var(--jk-text);
  background:var(--jk-paper);
  box-shadow:inset 0 -3px 0 var(--jk-orange),0 -1px 3px rgba(11,12,16,.06);
}

.jk-feed__num{
  padding:2px 9px;
  border-radius:var(--jk-r-pill);
  background:var(--jk-paper-3);
  font-family:var(--jk-ff-mono);
  font-size:13px;
  font-weight:700;
  color:var(--jk-text-2);
}
.jk-feed__tab.is-current .jk-feed__num{background:rgba(247,101,3,.12);color:var(--jk-orange-deep)}

.jk-feed__filter{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:10px}
.jk-feed__chip{
  padding:6px 15px;
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-pill);
  background:var(--jk-paper);
  font-size:13px;
  font-weight:700;
  color:var(--jk-text-2);
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.jk-feed__chip:hover{border-color:var(--jk-text-2);color:var(--jk-text)}
.jk-feed__chip.is-current{background:var(--jk-ink);border-color:var(--jk-ink);color:var(--jk-text-inv)}

/* --- 一覧の足元 --------------------------------------------------------- */

.jk-feed__foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--jk-s-3);
  margin-top:var(--jk-s-6);
}
/* 罠: hidden 属性は UA の display:none でしかないので、.jk-feed__more の
   display:inline-flex に負ける。「もっと見る」と「すべて表示しました」が
   同時に出るので、ここで hidden を効かせ直す。 */
.jk-feed__foot [hidden]{display:none}
/* 番兵。視界に入ったら次を取りに行く目印なので、見えなくてよい。 */
.jk-feed__sentinel{display:block;width:1px;height:1px}

.jk-feed__more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 40px;
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-pill);
  background:var(--jk-paper);
  font-size:15px;
  font-weight:700;
  color:var(--jk-text);
  text-decoration:none;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.jk-feed__more:hover{background:var(--jk-ink);border-color:var(--jk-ink);color:var(--jk-text-inv)}
.jk-feed__foot.is-loading .jk-feed__more{pointer-events:none;opacity:.62}
.jk-feed__foot.is-loading .jk-feed__more::after{
  content:"";
  width:15px;height:15px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:jk-feed-spin .7s linear infinite;
}

@keyframes jk-feed-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .jk-feed__foot.is-loading .jk-feed__more::after{animation:none}
}

.jk-feed__end,
.jk-feed__empty{
  margin:0;
  font-family:var(--jk-ff-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--jk-muted);
}
.jk-feed__error{margin:0;font-size:14px;font-weight:700;color:var(--jk-orange-deep)}

/* 読み上げ用。追加した件数を知らせるだけなので画面には出さない。 */
.jk-feed__status{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* 自動読み込みが効くならページ送りは要らない。JS が動かなければ残す。 */
.jk-feed-js .woocommerce-pagination{display:none}

@media (max-width:600px){
  .jk-feed{gap:var(--jk-s-2)}
  .jk-feed__tabs{width:100%;gap:4px}
  .jk-feed__tab{flex:1 1 0;justify-content:center;gap:6px;padding:12px 8px;font-size:14.5px}
  .jk-feed__num{padding:2px 7px;font-size:12px}
  .jk-feed__filter{width:100%;padding-bottom:8px}
  .jk-feed__more{width:100%;padding:0 20px}
}

/* --------------------------------------------------------------------------
   52. コース詳細（学べる動画の単一ページ）
   2026-08-24

   LearnDash のブロック版テンプレート（.ld-layout）が土台。
   トークンとアクセントはセクション29で既に当てているので、ここは
   「読む順序」と「余白」と「行き止まりの解消」に絞る。

   幅そのものの不整合はセクション19で直している（.learndash が Astra の
   948px に潰されていた）。ここでは触らない。
   -------------------------------------------------------------------------- */

/* 52-1. パンくず ---------------------------------------------------------- */

.jk-cnav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--jk-s-2);
  margin:0 0 var(--jk-s-4);
  font-size:var(--jk-fs-sm);
  line-height:1.6;
  color:var(--jk-muted);
}

.jk-cnav__link{
  color:var(--jk-orange-deep);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.jk-cnav__link:hover{
  border-bottom-color:currentColor;
  text-decoration:none;
}

.jk-cnav__sep{color:var(--jk-line-2)}

/* 現在地は長いコース名がそのまま入るので、1行に抑えて省略する。
   flex の子は min-width:auto で縮まないため min-width:0 が要る。 */
.jk-cnav__current{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--jk-text-2);
}

/* 52-2. アイキャッチ ------------------------------------------------------- */

/* 元は 631x471px（横幅の 75%）あり、内容を伝えない汎用写真が
   ファーストビューの大半を占めていた。16:9 に切って主役を本文に返す。

   2026-08-25: 縦横比を 9:16（＝ 16:9）に揃えるよう指示。
   **aspect-ratio は元から 16/9 だったが max-height:340px が先に頭を打ち、
   720px 幅で 720x340（2.12:1）になっていた。** 比率を効かせるには
   高さの上限を外すしかないので、デスクトップの 340px と
   1024px 以下の 220px（52-6）の両方を削除した。
   高さを抑えたくなったら max-height ではなく幅（max-width）で絞ること。 */
.learndash-wrapper .ld-featured-image,
.learndash-wrapper .ld-featured-image--course{
  aspect-ratio:16/9;
  width:100%;
  object-fit:cover;
  object-position:center;
}

/* 52-3. サイドバー --------------------------------------------------------- */

/* 右カラムは中身が短く、下に大きな空白が残っていた。追従させると
   受講ボタン（受付中）や概要が常に視界に入り、空白も目立たなくなる。
   ヘッダーは #masthead{position:sticky} で 89px 居座るので、その下に置く。 */
@media (min-width:1025px){
  .learndash-wrapper .ld-layout__sidebar{
    position:sticky;
    top:calc(var(--wp-admin--admin-bar--height,0px) + 89px + var(--jk-s-4));
    align-self:start;
  }
}

/* 52-4. カリキュラム ------------------------------------------------------- */

/* レッスンとトピックが同じ字面で並び、親子が読み取れなかった。
   左の罫線で階層を示す。 */
.learndash-wrapper .ld-accordion__items--lessons{
  border-left:2px solid var(--jk-line);
  padding-left:var(--jk-s-4);
  margin-left:var(--jk-s-2);
}

.learndash-wrapper .ld-accordion__item-title{
  font-weight:700;
  color:var(--jk-text);
}

/* 「2 トピック 1 テスト」は 11px の地味なテキストで、あることに気づけない。
   チップにして拾えるようにする。 */
.learndash-wrapper .ld-accordion__item-attribute{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 10px;
  border-radius:var(--jk-r-pill);
  background:var(--jk-paper-3);
  color:var(--jk-text-2);
  font-size:var(--jk-fs-xs);
  font-weight:700;
  line-height:1.8;
}

.learndash-wrapper .ld-accordion__item-attributes{
  display:flex;
  flex-wrap:wrap;
  gap:var(--jk-s-2);
  margin-top:var(--jk-s-2);
}

/* 52-5. 末尾の回遊導線 ----------------------------------------------------- */

.jk-cend{
  margin:var(--jk-s-7) 0 0;
  padding:var(--jk-s-5);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-lg);
  background:var(--jk-paper-2);
  text-align:center;
}

/* 受付終了は「行き止まり」そのものなので、色で他と区別せず
   （終了は失敗ではない）、代わりに一言添えて次へ送る。 */
.jk-cend--ended{
  border-color:var(--jk-gold-line);
  background:linear-gradient(180deg,#FFF9F2 0%,var(--jk-paper-2) 100%);
}

.jk-cend__lead{
  margin:0 0 var(--jk-s-4);
  color:var(--jk-text-2);
  font-size:var(--jk-fs-md);
  line-height:1.8;
}

.jk-cend__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 var(--jk-s-6);
  border-radius:var(--jk-r-pill);
  background:linear-gradient(135deg,var(--jk-orange) 0%,var(--jk-gold) 100%);
  color:var(--jk-text-inv);
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--jk-e-gold);
}

.jk-cend__btn:hover{
  color:var(--jk-text-inv);
  text-decoration:none;
  filter:brightness(1.05);
}

/* 52-6. モバイル ----------------------------------------------------------- */

@media (max-width:1024px){
  /* .ld-layout は grid。既定だとサイドバー（受付終了の告知・修了報酬・
     含まれるもの）が本文より先に来る。受付中は最初に来るのが受講ボタンで
     都合がよいが、受付終了だと「終わっています」だけを読まされて終わる。
     終了時だけ本文を先に出す。

     LearnDash は grid-template-areas:"sidebar" "content" で名前付き配置を
     している。**この場合 order は効かない**（実測でorderは適用されるのに
     並びが変わらなかった）。エリアの並び自体を入れ替える。

     判定は .ld-enrollment__pricing--closed を持つのが子孫なので :has() で
     親から拾う。未対応ブラウザでは既定の順序のままで、壊れはしない。 */
  .learndash-wrapper.ld-layout:has(.ld-enrollment__pricing--closed){
    grid-template-areas:"content" "sidebar";
  }

  .jk-cend{padding:var(--jk-s-4)}
  .jk-cend__btn{width:100%;padding:0 var(--jk-s-4)}
}

/* --------------------------------------------------------------------------
   53. 一覧のタブに「面」を付ける（/learning-videos/ ・ /shop/）
   2026-08-24

   下地を #E0E0E0 にしたことで、選択中の白いタブだけが浮いて、その下の
   カード群が地の上に直接散らばって見えていた。タブの直下に白い面を敷いて
   「タブ＝つまみ / 面＝中身」の関係を作る。

   面の対象は .jk-feed の**次の兄弟**。学べる動画は .learndash-wrap、
   ショップは ul.products で、どちらもタブの直後に来る。共通の器は
   無いので隣接セレクタで拾う。
   -------------------------------------------------------------------------- */

/* タブ行と面をくっつける。下罫線は面の上辺が引き受けるので外す。 */
.jk-feed{
  margin-bottom:0;
  border-bottom:0;
}

.jk-feed + .learndash-wrap,
.jk-feed + ul.products{
  background:var(--jk-paper);
  border:1px solid var(--jk-line-2);
  /* 左上だけ角を立てて、左端のタブと地続きに見せる。 */
  border-radius:0 var(--jk-r-md) var(--jk-r-md) var(--jk-r-md);
  padding:var(--jk-s-5);
}

/* 絞り込みチップは align-items:flex-end で面の上辺に接する。
   1px 持ち上げて、線に乗っているように見せる。 */
.jk-feed__filter{margin-bottom:1px}

/* 「これで全部です」は面の外（地の上）に出る。面との距離を取る。 */
.jk-feed__foot{margin-top:var(--jk-s-5)}

/* カードは白い面の上に載るので、境目が消える。罫線を1段濃い
   --jk-line-2 に上げて輪郭を出す（--jk-line は地が白のとき用）。 */
.jk-feed + .learndash-wrap .ld_course_grid article.thumbnail,
.jk-feed + ul.products li.product{
  border-color:var(--jk-line-2);
}

@media (max-width:600px){
  .jk-feed + .learndash-wrap,
  .jk-feed + ul.products{
    padding:var(--jk-s-4);
    /* 幅いっぱいのタブが並ぶので、左上も丸めてよい。 */
    border-radius:var(--jk-r-md);
  }
}

/* --------------------------------------------------------------------------
   54. お知らせの一覧と記事（jkck.jp から取得して描く）
   2026-08-25

   記事の実体は members に無い。jkck.jp の post_type=news を REST で取って
   ここで描いている（取得は functions.php の jkck-news-source ブロック）。

   一覧・記事とも土台は固定ページ 843（/column/）。記事ページは rewrite で
   同じ固定ページに流し、ショートコードの中で出し分けている。固定ページの
   見出し .entry-title は the_title フィルタが記事タイトルに差し替えるので、
   ここでは触らない。
   -------------------------------------------------------------------------- */

.jkn{
  --jkn-thumb-w:160px;
  max-width:100%;
}

/* --- 絞り込み --- */
.jkn-filter{
  display:flex;
  flex-direction:column;
  gap:var(--jk-s-4);
  margin-bottom:var(--jk-s-5);
  padding-bottom:var(--jk-s-4);
  border-bottom:1px solid var(--jk-line);
}

.jkn-search{display:flex;gap:var(--jk-s-2)}

.jkn-search input[type="search"]{
  flex:1 1 auto;
  min-width:0;
  padding:10px var(--jk-s-3);
  font-size:var(--jk-fs-md);
  color:var(--jk-text);
  background:var(--jk-paper);
  border:1px solid var(--jk-line-2);
  border-radius:var(--jk-r-sm);
}

.jkn-search input[type="search"]:focus{
  outline:2px solid var(--jk-orange);
  outline-offset:1px;
  border-color:var(--jk-orange);
}

.jkn-search button{
  flex:0 0 auto;
  padding:10px var(--jk-s-5);
  font-size:var(--jk-fs-md);
  font-weight:700;
  color:var(--jk-text-inv);
  background:var(--jk-orange);
  border:0;
  border-radius:var(--jk-r-sm);
  cursor:pointer;
}

.jkn-search button:hover{background:var(--jk-orange-hi)}

.jkn-tags{display:flex;flex-wrap:wrap;gap:var(--jk-s-2)}

.jkn-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px var(--jk-s-3);
  font-size:var(--jk-fs-sm);
  line-height:1.4;
  color:var(--jk-text-2);
  text-decoration:none;
  background:var(--jk-paper-2);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-pill);
}

.jkn-tag:hover{color:var(--jk-text);background:var(--jk-paper-3)}

.jkn-tag.is-on{
  color:var(--jk-text-inv);
  background:var(--jk-ink-3);
  border-color:var(--jk-ink-3);
}

.jkn-tag__n{
  font-size:var(--jk-fs-xs);
  font-family:var(--jk-ff-mono);
  opacity:.75;
}

.jkn-result{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--jk-s-3);
  margin:0;
  font-size:var(--jk-fs-md);
  color:var(--jk-muted);
}

.jkn-result__clear{
  color:var(--jk-orange-deep);
  font-weight:700;
}

/* --- 一覧 --- */
.jkn-list{display:flex;flex-direction:column}

.jkn-card{
  display:flex;
  gap:var(--jk-s-4);
  align-items:flex-start;
  padding:var(--jk-s-4) var(--jk-s-2);
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--jk-line);
}

.jkn-card:hover{background:var(--jk-paper-2)}

/* 画像が無い記事は協会ロゴのプレースホルダで埋める */
.jkn-card__thumb{
  flex:0 0 var(--jkn-thumb-w);
  width:var(--jkn-thumb-w);
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:var(--jk-r-sm);
  background:var(--jk-paper-3) var(--jk-ph) center/56px no-repeat;
}

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

.jkn-card__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.jkn-card__meta{display:flex;align-items:center;gap:var(--jk-s-2)}

.jkn-chip{
  display:inline-block;
  padding:3px 10px;
  font-size:var(--jk-fs-xs);
  font-weight:700;
  line-height:1.5;
  color:var(--jk-text-inv);
  text-decoration:none;
  background:var(--jk-ink-3);
  border-radius:var(--jk-r-pill);
}

.jkn-card__date{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-sm);
  color:var(--jk-muted);
}

/* 日本語が一字だけ次行に落ちるのを防ぐ */
.jkn-card__title{
  font-size:var(--jk-fs-lg);
  font-weight:700;
  line-height:1.6;
  color:var(--jk-text);
  text-wrap:balance;
  word-break:auto-phrase;
  /* **auto-phrase は min-content を「一番長い文節」にする。**
     「大阪学院大学高等学校主催フェスティバル登壇」で 352px になり、
     カードが 280px まで縮む狭い画面（375px 未満）でこの幅が下限として残って
     ページ全体に横スクロールが出ていた（2026-08-27 に発見）。
     anywhere は break-word と違い**最小幅の計算そのもの**に効くので、
     箱は縮められるようになる。実際の改行は余裕がある限り auto-phrase の
     文節優先のままで、見た目は変わらない。 */
  overflow-wrap:anywhere;
}

.jkn-card:hover .jkn-card__title{color:var(--jk-orange-deep)}

.jkn-empty,
.jkn-reset{
  margin:var(--jk-s-6) 0;
  text-align:center;
  color:var(--jk-muted);
}

.jkn-reset a{color:var(--jk-orange-deep)}

/* --- ページ送り --- */
.jkn-pager{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--jk-s-2);
  margin-top:var(--jk-s-6);
}

.jkn-pager__n,
.jkn-pager__prev,
.jkn-pager__next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 var(--jk-s-3);
  font-size:var(--jk-fs-md);
  color:var(--jk-text-2);
  text-decoration:none;
  background:var(--jk-paper);
  border:1px solid var(--jk-line-2);
  border-radius:var(--jk-r-sm);
}

a.jkn-pager__n:hover,
.jkn-pager__prev:hover,
.jkn-pager__next:hover{color:var(--jk-text);background:var(--jk-paper-2)}

.jkn-pager__n.is-on{
  color:var(--jk-text-inv);
  background:var(--jk-ink-3);
  border-color:var(--jk-ink-3);
  font-weight:700;
}

.jkn-pager__gap{color:var(--jk-muted)}

/* --- 記事 --- */
.jkn-single__head{margin-bottom:var(--jk-s-5)}

.jkn-single__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--jk-s-2);
  margin-bottom:var(--jk-s-3);
}

.jkn-single__date{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-md);
  color:var(--jk-muted);
}

.jkn-single__title{
  margin:0;
  font-size:clamp(22px,2.4vw,32px);
  font-weight:700;
  line-height:1.5;
  color:var(--jk-text);
  text-wrap:balance;
  word-break:auto-phrase;
}

.jkn-single__thumb{margin:0 0 var(--jk-s-5)}

.jkn-single__thumb img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--jk-r-md);
}

.jkn-single__body{
  font-size:var(--jk-fs-lg);
  line-height:1.9;
  color:var(--jk-text);
}

.jkn-single__body p{margin:0 0 1.2em}
.jkn-single__body img{max-width:100%;height:auto;border-radius:var(--jk-r-sm)}
.jkn-single__body a{color:var(--jk-orange-deep);text-decoration:underline}
.jkn-single__body a:hover{color:var(--jk-orange-deeper)}

.jkn-single__body h2,
.jkn-single__body h3{
  margin:1.8em 0 .6em;
  font-weight:700;
  line-height:1.5;
  text-wrap:balance;
}

.jkn-single__body h2{font-size:var(--jk-fs-2xl)}
.jkn-single__body h3{font-size:var(--jk-fs-xl)}
.jkn-single__body ul,
.jkn-single__body ol{margin:0 0 1.2em;padding-left:1.4em}
.jkn-single__body li{margin-bottom:.4em}

.jkn-back{
  margin-top:var(--jk-s-7);
  padding-top:var(--jk-s-4);
  border-top:1px solid var(--jk-line);
}

.jkn-back a{
  color:var(--jk-orange-deep);
  font-weight:700;
  text-decoration:none;
}

.jkn-back a:hover{text-decoration:underline}

/* --- テーマとの調整 ---

   Astra は a に下線を引く。このCSSはカスケード62番目で、下線の指定には
   詳細度で負けるため body[class] を前置して1段上げて打ち消す。
   本文中のリンクと「一覧へ戻る」は下線を残したいので対象に含めない。 */
body[class] .jkn-card,
body[class] .jkn-tag,
body[class] .jkn-chip,
body[class] .jkn-pager__n,
body[class] .jkn-pager__prev,
body[class] .jkn-pager__next{
  text-decoration:none;
}

/* 記事ページは自前の見出しを使う。テーマのページ見出しと二重になるので隠す。
   jkn-single-page は body_class フィルタが記事ページにだけ付ける。 */
.jkn-single-page .entry-header{
  display:none;
}

/* --- スクロールでの自動読み込み ---

   仕組みは /shop/ ・/learning-videos/ と同じ jk-feed（tabs-block）。
   器は .jkn-filter が data-jk-feed で兼ねる。**.jk-feed クラスは付けない**
   （あちらは横並びのタブバー用で、縦積みのこの帯には合わない）。

   ページ送りは消さずに残し、JS が動くときだけ隠す。html.jk-feed-js は
   スクリプトが走った時点で付く。JS 無効・通信失敗のときは
   そのままページ送りとして使える。 */
.jk-feed-js .jkn-pager{
  display:none;
}

/* 番兵より前に余白を作る。詰まっていると読み込み位置が分かりにくい */
.jkn-list + .jk-feed__foot{
  margin-top:var(--jk-s-5);
}

/* --- モバイル --- */
@media (max-width:767px){
  .jkn-card{
    flex-direction:column;
    gap:var(--jk-s-3);
    padding:var(--jk-s-4) 0;
  }

  .jkn-card__thumb{flex:0 0 auto;width:100%}

  /* 16px を下回ると読みづらい。--jk-fs-md(15px) には落とさない */
  .jkn-card__title{font-size:16px}

  .jkn-search{flex-wrap:wrap}
  .jkn-search input[type="search"]{flex:1 1 100%}
  .jkn-search button{width:100%}

  .jkn-single__body{font-size:16px}
}

/* --------------------------------------------------------------------------
   55. フッター上の写真スライダーを一定速度で流す
   2026-08-25

   Elementor の画像カルーセル（フッターテンプレート 417 のウィジェット 707080c
   ／クラス .tofu-slide）。speed 8000・autoplay delay 0・infinite で1枚ずつ
   送っているが、Swiper の既定の timing-function が **ease** なので、1枚ごとに
   加速→減速を繰り返して波打って見えていた。

   実測（150msごとの移動量）:
     ease   … 6.4 → 5.8 → 5.0 → 4.2 → 3.6 → 3.2 → 2.6 → 2.1 と単調に減速
     linear … 2.7〜2.8 で一定（約18px/秒）

   Elementor のウィジェット設定は触っていない。速度を変えたいときは
   あちらの speed（現在 8000ms）を動かす。
   -------------------------------------------------------------------------- */

.tofu-slide .swiper-wrapper{
  transition-timing-function:linear !important;
}

/* 動き続けるものが苦手な人には流さない。OS の「視差効果を減らす」に従う。

   transition を 0s にするだけだと、autoplay の delay が 0 なので
   **パラパラと高速で切り替わって逆に悪化する**。transform を固定して
   止め、あわせて footer-slider-block.php の JS が autoplay 自体を止める。 */
@media (prefers-reduced-motion: reduce){
  .tofu-slide .swiper-wrapper{
    transform:none !important;
    transition:none !important;
  }
}

/* --------------------------------------------------------------------------
   56. 業務支援サービス（/support/）
   外部LP（campage.jp/jkck/support）を会員サイトへ取り込んだページ。
   構成と文言は元LPのままで、材質だけこのサイトの語彙に置き換えている。
   ・2026-08-25: 依頼により配色だけ元LPへ戻した。方眼紙（セクション43）を
     このページだけ止めて元LPのクリーム #FAF2E7 を地にし、墨（--jk-ink 系）で
     組んでいた面・見出し帯・ボタンを元LPの紺 #244771 へ振り替えている。
     色以外（余白・角丸・影・組み方）は触っていない。
   ・「各セクションは白い面として浮かせ、ヒーローと総合相談だけダーク面で
     強弱を付ける」という構成そのものは変えていない。ダーク面が墨→紺になった。
   ・値の出どころは元LPの :root（--color-primary / --color-secondary ほか）。
     このページ限りのトークンとして .jkck-support-page にまとめてある。
   ・お悩み診断の出し分けは元LPと同じ :has()。ただし対応をIDの列挙ではなく
     data-go / data-for の突き合わせにしたので、項目を増やしてもここは4行のまま。
     :has() 非対応ブラウザ向けに JS が付ける .is-on も or で受ける。
   実装: astra-child/support-block.php
   -------------------------------------------------------------------------- */

/* ページタイトルは重複するので隠す。display:none にすると h1 ごと消えて
   見出しの階層が無くなるため、読み上げと検索には残るよう clip で退避する。 */
.jkck-support-page .entry-header{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* 元LP（campage.jp/jkck/support）の配色。値は元LPの :root と同じもので、
   ページ内の色はすべてここを参照する。サイト共通のトークン（--jk-*）は
   書き換えていないので、他のページには一切影響しない。 */
.jkck-support-page{
  --jks-navy:#244771;            /* 元LP --color-secondary。墨（--jk-ink）の置き換え先 */
  --jks-navy-2:#1B3557;          /* ダーク面のグラデーション用に紺を落としたもの */
  --jks-navy-3:#2E5686;          /* 同・明るい側。ボタンのホバーにも使う */
  --jks-apricot:#E99968;         /* 元LP --color-primary */
  --jks-vermilion:#F15A24;       /* 元LP --color-primary--dark */
  --jks-cream:#FAF2E7;           /* 元LP --color-background。面の中の淡い箱に使う */
  /* ページ上部（ヒーロー〜お悩み診断）の地。2026-08-25 に依頼者から
     単色画像 bg.png で指定されたもの。--jks-cream とは別に持つ。
     ここを --jks-cream に寄せてしまうと、白い面の中の淡い箱
     （診断の結果置き場・チェック済みの項目）まで濃く沈む。 */
  --jks-band:#DE9D70;
  --jks-cream-2:#FDF8F1;         /* クリームより淡い面（ホバー用） */
  --jks-slate:#373E43;           /* 元LP --color-black。本文の文字色 */
  --jks-line:#EADFCC;            /* クリームの地に合わせた罫（元LPは影で枠を表現） */
  --jks-line-2:#DCCDB4;
  --jks-apricot-line:rgba(233,153,104,.45);
}

/* 2026-08-25: このページの文字が小さすぎるとの指摘。タイプスケールを
   一段上げて、下限を 9.5px → 12px にした。
   **トークンの上書きは .jks と .jks-dialog に閉じる。** body（.jkck-support-page）
   に置くと、同じトークンを見ているヘッダー・フッター・管理バーまでこのページ
   だけ大きくなり、ページ間で揃わなくなる。
   ダイアログは wp_footer に出るので .jks の外。両方に書く必要がある。 */
.jks,
.jks-dialog{
  --jk-fs-xs:12px;   /* 元 11px */
  --jk-fs-sm:14px;   /* 元 13px */
  --jk-fs-md:16px;   /* 元 15px */
  --jk-fs-lg:18px;   /* 元 17px */
}

/* 地は途中で切り替わる（2026-08-25・依頼）。
   ・ヒーロー〜お悩み診断 … 元LPのクリーム #FAF2E7
   ・「どんなお悩みもご相談ください！」のカードから下 … 他ページと同じ方眼紙
   方眼紙は**セクション43をそのまま使う**（#content の指定は触らない）。
   切り替わる側のクリームだけを .jks-panel--ink::before で上から被せている。

   ・.jks に stacking context を作っておかないと、z-index:-1 の ::before が
     #content の「背景」より後ろへ回って一切見えなくなる（#content は
     position が付いていないので stacking context にならないため）。
   ・クリームの上端は #content の天まで伸ばしたいが、あいだに Astra の
     コンテナ padding（実測 60px）が入り、しかも幅で変わるので高さが読めない。
     大きめに伸ばして #content 側で clip する。clip なので絶対配置の
     はみ出しがスクロール範囲を広げることもない。 */
body.jkck-support-page #content{overflow:clip}

.jks{
  display:flex;
  flex-direction:column;
  /* セクション間の余白。地の境界（.jks-panel--ink::before）でも使うので変数にする */
  --jks-gap:clamp(20px,2.6vw,34px);
  gap:var(--jks-gap);
  max-width:1180px;
  margin:0 auto;
  padding:clamp(8px,1.4vw,20px) 0 clamp(24px,3vw,48px);
  font-family:var(--jk-ff-jp);
  color:var(--jks-slate);
  /* 上のクリームを #content の背景より前に出すための stacking context */
  position:relative;
  z-index:0;
}
.jks-br-sp{display:none}

/* --- ヒーロー ------------------------------------------------------------ */

.jks-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(30px,4.4vw,62px) clamp(22px,3.4vw,54px);
  /* 2026-08-25: グラデーションを外して紺のベタにした（依頼）。
     2026-08-26: さらに地（--jks-band のアプリコット帯）と同色にした（依頼）。
     eyebrow だけ紺、見出しとリードは白のまま。
     2026-08-26: 地との境目を消す（依頼）ため、枠線・影・角丸も落とした。
     カードとしての輪郭は無く、帯の中に文字が置かれているだけの状態。 */
  background:var(--jks-band);
  border:0;
  border-radius:0;
  box-shadow:none;
}
/* 右下のイラスト（最大290px）に文字が潜り込まない範囲でできるだけ広く取る。
   720px だと 1440px 幅で見出しが3行に折れて「支援しま／す。」になっていた。 */
.jks-hero__body{position:relative;max-width:min(100%,780px)}
.jks-hero__title{
  margin:0;
  font-size:clamp(21px,2.6vw,36px);
  font-weight:900;line-height:1.5;letter-spacing:.005em;
  color:#fff;
}
/* 2026-08-26（依頼）: リードを1.5倍・太字に。15/1.35vw/18 → 22.5/2.025vw/27。
   1.5倍にすると 780px 幅では2行目がイラストの下に潜るので、リードだけ
   イラストの左端（ヒーロー左から約679px）より内側に収める。 */
.jks-hero__lead{
  margin:16px 0 0;
  max-width:min(100%,620px);
  font-size:clamp(22.5px,2.025vw,27px);line-height:1.9;font-weight:700;
  color:#fff;
}
/* 2026-08-26: イラストを1.5倍にした（依頼）。150→225 / 20→30vw / 290→435。 */
.jks-hero__art{
  position:absolute;right:0;bottom:-8px;
  width:clamp(225px,30vw,435px);height:auto;
  pointer-events:none;
}

/* --- 見出し・本文の共通部 ------------------------------------------------ */

.jks-head{margin:0 0 clamp(14px,1.6vw,22px);text-align:center}
.jks-eyebrow{
  display:inline-block;
  margin:0 0 12px;padding:5px 16px;
  background:var(--jks-navy);
  border-radius:var(--jk-r-pill);
  font-size:var(--jk-fs-xs);font-weight:700;letter-spacing:.12em;
  color:#fff;
}
.jks-title{
  margin:0;
  font-size:clamp(19px,2.2vw,30px);
  font-weight:900;line-height:1.55;letter-spacing:.005em;
  color:var(--jks-navy);
}
.jks-lead{margin:12px 0 0;font-size:var(--jk-fs-sm);line-height:1.9;color:var(--jk-muted)}
.jks-body{max-width:860px;margin:0 auto;text-align:center}
.jks-body p{margin:0;font-size:var(--jk-fs-md);line-height:2}
.jks-cta{margin:clamp(18px,2.2vw,30px) 0 0;text-align:center}
.jks-cta .jk-btn{max-width:100%;padding:0 clamp(18px,2.4vw,34px);text-align:center}

/* Astra がインラインで .ast-single-post .entry-content a に underline を当てて
   おり（0,3,1）、.jk-btn（0,1,0）では勝てずボタンに下線が出る。body を前置き
   して 0,3,2 にし、読み込み順に依存せず外す。 */
body .entry-content .jks a.jk-btn{text-decoration:none}

/* ボタンは元LPと同じ紺地に白抜き。サイト共通の .jk-btn（オレンジ〜金の
   グラデーション）を、このページとこのページの申込ダイアログの中だけ差し替える。
   .jk-btn:hover（0,2,0）はこの節より前にあるので、ホバーは .jks を前置きした
   0,3,0 で書かないと通常状態の指定に負ける。高さ・角丸・余白は共通のまま。 */
.jks .jk-btn,
.jks-dialog .jk-btn{
  background:var(--jks-navy);
  color:#fff;
  box-shadow:0 10px 24px rgba(36,71,113,.26);
}
.jks .jk-btn:hover,
.jks .jk-btn:focus-visible,
.jks-dialog .jk-btn:hover,
.jks-dialog .jk-btn:focus-visible{
  background:var(--jks-navy-3);
  color:#fff;
  box-shadow:0 12px 28px rgba(36,71,113,.34);
}
.jks .jk-btn--ghost,
.jks-dialog .jk-btn--ghost{
  background:transparent;
  color:var(--jks-slate);
  border-color:var(--jks-line-2);
  box-shadow:none;
}
.jks .jk-btn--ghost:hover,
.jks-dialog .jk-btn--ghost:hover{background:var(--jks-cream);color:var(--jks-slate)}

.jks-slash{
  margin:0 0 12px;
  text-align:center;
  font-size:var(--jk-fs-sm);font-weight:700;letter-spacing:.04em;
  color:var(--jks-apricot);
}
.jks-slash::before{content:"＼ "}
.jks-slash::after{content:" ／"}

/* --- 面（各サービス） ---------------------------------------------------- */

.jks-panel,
.jks-diag{
  padding:clamp(26px,3.4vw,54px) clamp(18px,3vw,48px);
  background:var(--jk-paper);
  border:1px solid var(--jks-line);
  border-radius:var(--jk-r-lg);
  box-shadow:var(--jk-e-2);
  /* 診断の誘導ボタンから飛んでくるので、ヘッダーの高さぶん余白を取る */
  scroll-margin-top:96px;
}
/* 元LPでは「お悩み総合相談」がアプリコット地の白抜きだった。ここは白い面との
   コントラストを取りたいので、同じ役割を紺の面で受けている。
   このカードが地の切り替え点でもあるので、上に伸ばしたクリームの帯を持たせる。
   境界は「お悩み診断のカードとこのカードのちょうど中間」（2026-08-25 に指示）。
   bottom の内訳は カードの枠の上端（padding box の 100% ＋ border 1px）
   ＋ セクション間の余白の半分。 */
.jks-panel--ink::before{
  content:"";
  position:absolute;
  left:calc(50% - 50vw);width:100vw;
  bottom:calc(100% + 1px + var(--jks-gap) / 2);
  top:-20000px;
  background:var(--jks-band);
  z-index:-1;
  pointer-events:none;
}
.jks-panel--ink{
  position:relative;
  background:linear-gradient(160deg,var(--jks-navy-2) 0%,var(--jks-navy) 100%);
  border-color:var(--jks-apricot-line);
  color:#fff;
}
.jks-panel--ink .jks-title{color:#fff}
.jks-panel--ink .jks-eyebrow{background:rgba(255,255,255,.14);color:var(--jks-apricot)}
.jks-panel--ink .jks-body p{color:var(--jks-cream)}

.jks-art{display:block;width:min(100%,420px);height:auto;margin:clamp(18px,2.4vw,30px) auto 0}
.jks-art--sm{width:min(100%,260px)}

/* --- お悩み診断 ---------------------------------------------------------- */

/* 2026-08-26（依頼）: このセクションだけ「Worries」を1.5倍にし、
   見出しを地（--jks-band）と同じ色にする。ほかのセクションの
   .jks-eyebrow / .jks-title は据え置きなので .jks-diag で閉じる。 */
.jks-diag .jks-eyebrow{font-size:calc(var(--jk-fs-xs) * 1.5)}
.jks-diag .jks-title{color:var(--jks-band)}

.jks-diag__group{margin:0 0 clamp(16px,2vw,24px)}
/* 2026-08-26（依頼）: カテゴリ帯は中央寄せ・1.5倍・太く。 */
.jks-diag__cat{
  margin:0 0 10px;padding:9px 16px;
  background:var(--jks-navy);
  border-radius:var(--jk-r-sm);
  font-size:calc(var(--jk-fs-sm) * 1.5);font-weight:900;letter-spacing:.03em;
  text-align:center;
  color:#fff;
}
.jks-diag__list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:8px;
  margin:0;padding:0;
  list-style:none;
}
.jks-diag__list li{margin:0}
.jks-diag__item{
  display:flex;align-items:center;gap:10px;
  height:100%;min-height:48px;padding:10px 14px;
  background:var(--jk-paper);
  border:1px solid var(--jks-line-2);border-radius:10px;
  font-size:15px;line-height:1.6;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.jks-diag__item:hover{background:var(--jks-cream-2)}
.jks-diag__item input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--jks-apricot)}
.jks-diag__item:has(input:checked){border-color:var(--jks-apricot);background:var(--jks-cream)}

.jks-diag__results{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;
  margin-top:clamp(18px,2.2vw,28px);
  padding:clamp(16px,2vw,24px);
  background:var(--jks-cream);
  border:1px dashed var(--jks-line-2);border-radius:var(--jk-r-md);
}
.jks-diag__placeholder{margin:0;font-size:var(--jk-fs-sm);color:var(--jk-muted)}
.jks-diag__placeholder.is-hidden{display:none}
.jks-diag__go{display:none}
.jks-diag__go.is-on{display:inline-flex}

/* 元LPと同じ出し分け。data-go と data-for の対応が4組あるだけなので、
   チェック項目が増減してもここは触らなくてよい。 */
.jks-diag__wrap:has(.jks-diag__check[data-go="1"]:checked) .jks-diag__go[data-for="1"],
.jks-diag__wrap:has(.jks-diag__check[data-go="2"]:checked) .jks-diag__go[data-for="2"],
.jks-diag__wrap:has(.jks-diag__check[data-go="3"]:checked) .jks-diag__go[data-for="3"],
.jks-diag__wrap:has(.jks-diag__check[data-go="4"]:checked) .jks-diag__go[data-for="4"]{display:inline-flex}
.jks-diag__wrap:has(.jks-diag__check:checked) .jks-diag__placeholder{display:none}

/* --- ご支援実績 ---------------------------------------------------------- */
/* 元LPは表全体が1枚のPNGだった（文字が画像なので拡大しないと読めず、
   モバイルで潰れる）。同じ文言をHTMLに起こしている。 */

/* 箱はちょうど2つ。auto-fit にすると 1024px 幅で 326px×3列が立ち、
   3列目が空いて右に大穴が空くので、素直に2列と書く。 */
.jks-record{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(22px,2.8vw,36px);
}
.jks-record__caption{
  grid-column:1/-1;
  margin:0;
  text-align:center;
  font-size:var(--jk-fs-lg);font-weight:800;letter-spacing:.02em;
  color:var(--jks-navy);
}
.jks-record__box{
  overflow:hidden;
  background:var(--jk-paper);
  border:1px solid var(--jks-line);border-radius:var(--jk-r-md);
  box-shadow:var(--jk-e-1);
}
.jks-record__title{
  margin:0;padding:11px 16px;
  background:var(--jks-navy);
  font-size:var(--jk-fs-md);font-weight:800;letter-spacing:.03em;
  text-align:center;
  color:var(--jk-text-inv);
}
.jks-record__list{margin:0;padding:14px 18px;list-style:none}
.jks-record__list li{
  position:relative;
  margin:0;padding:5px 0 5px 26px;
  font-size:15px;line-height:1.85;
  text-align:left;
}
/* 丸に収まったチェック。::before が円、::after が中の折れ線。 */
.jks-record__list li::before{
  content:"";
  position:absolute;left:0;top:.70em;
  width:16px;height:16px;
  border:1.5px solid var(--jks-apricot);border-radius:50%;
}
.jks-record__list li::after{
  content:"";
  position:absolute;left:4.5px;top:1.02em;
  width:7px;height:3.5px;
  border-left:1.6px solid var(--jks-vermilion);
  border-bottom:1.6px solid var(--jks-vermilion);
  transform:rotate(-45deg);
}

/* --- 申込ダイアログの追加分 ---------------------------------------------- */
/* 枠・入力欄・チェックはセクション23（お店登録フォーム）をそのまま使う。
   ここで足すのは、このフォームにしか出てこない「日付＋時刻」の並びと、
   このページ限りの配色（墨の見出し→紺、オレンジの選択色→アプリコット）。
   .jkck-dialog 側は他ページのフォームも使うので触らない。 */

.jks-dialog .jkck-dialog__head{
  background:var(--jks-navy);
  border-bottom-color:var(--jks-apricot-line);
}
.jks-dialog .jkck-dialog__eyebrow{color:var(--jks-apricot)}
.jks-dialog .jkck-input:focus{
  border-color:var(--jks-navy);
  box-shadow:0 0 0 4px rgba(36,71,113,.14);
}
.jks-dialog .jkck-check input{accent-color:var(--jks-apricot)}
.jks-dialog .jkck-check:hover{background:var(--jks-cream-2)}
.jks-dialog .jkck-check:has(input:checked){border-color:var(--jks-apricot);background:var(--jks-cream)}
/* 「必須」バッジと本文の墨。元LPの --color-red / --color-black に合わせる。 */
.jks-dialog .jkck-req{color:var(--jks-vermilion)}
.jks-dialog .jkck-label{color:var(--jks-slate)}

/* ダイアログ側は直値で書かれているので個別に上げる（下限 12px）。 */
.jks-dialog .jkck-dialog__eyebrow{font-size:12px}   /* 元 10px   */
.jks-dialog .jkck-req{font-size:12px}               /* 元 9.5px  */
.jks-dialog .jkck-hint,
.jks-dialog .jkck-example{font-size:13px}           /* 元 11.5px */
.jks-dialog .jkck-label{font-size:14px}             /* 元 12.5px */
.jks-dialog .jkck-dialog__lede{font-size:15px}      /* 元 13px   */
.jks-dialog .jkck-check{font-size:15px}             /* 元 13.5px */
.jks-dialog .jkck-input{font-size:16px}             /* 元 15px。iOS の自動ズーム対策も兼ねる */

/* 縦幅は画面の90%に固定（2026-08-25 指示）。元は max-height:min(88vh,900px) で
   中身が短いと縮んでいた。dvh はモバイルのアドレスバーを除いた実寸なので、
   非対応ブラウザ向けに vh を先に書いて上書きする。
   .jkck-dialog__inner は max-height:inherit で中身なりに縮むため、
   height:100% にして枠いっぱいに広げる（本文側が flex:1 でスクロールする）。 */
.jks-dialog{
  height:90vh;
  height:90dvh;
  max-height:90vh;
  max-height:90dvh;
}
.jks-dialog .jkck-dialog__inner{height:100%;max-height:none}

/* フォーカスリング（セクション5）はオレンジ。このページだけ元LPの朱に振り替える。
   紺のダイアログヘッダーの上でも白い面の上でも見えるのはこの色だけなので、
   アプリコットではなく朱（--color-primary--dark）を使う。 */
.jkck-support-page a:focus-visible,
.jkck-support-page button:focus-visible,
.jkck-support-page input:focus-visible,
.jkck-support-page select:focus-visible,
.jkck-support-page textarea:focus-visible,
.jkck-support-page [tabindex]:focus-visible{
  outline-color:var(--jks-vermilion);
}

.jks-dialog .jkck-fieldset legend.jkck-label{padding:0;line-height:1.6}
.jks-dialog select.jkck-input{
  appearance:none;-webkit-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
}
.jks-datetime{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.jks-datetime .jkck-input[type="date"]{flex:1 1 190px;min-width:0}
.jks-datetime__unit{display:flex;align-items:center;gap:8px;flex:0 0 auto;font-size:15px}
.jks-datetime__unit select.jkck-input{width:92px}

/* --- 広い画面：幅80% ／ 文字2倍（2026-09-09・依頼） ---------------------- */
/* 依頼は「横幅をブラウザ幅の80%まで広げる」「最小フォントサイズを2倍にする」。
   後者は依頼者の選択により**ページの文字を一律2倍**として実装している。

   **デスクトップだけを対象にする（閾値 1280px）。** 文字を無条件に2倍にすると
   390px 幅では本文30px・見出し72pxとなり、1行に数文字しか入らなくなる。
   1280px はセクション19（コンテンツ幅をビューポート追従にする）と同じ値で、
   Astra の既定コンテナ 988px を 80vw が必ず上回る幅でもある。

   幅について: サイト共通の --jk-wide は min(80vw,1800px) で頭打ちになり、
   さらに Astra のコンテナが左右 20px のパディングを持つため、実効幅は
   1440px 窓で 1112px（77%）、1920px 窓では .jks 自身の max-width:1180px に
   当たって 61% しかなかった。このページに限って**打ち止め・パディング・
   .jks の上限の3つとも外し**、素の 80vw を .jks に持たせる。
   （.jks-panel--ink::before の 100vw の帯や #content の overflow:clip は
   幅に依存しないので、ここは触らなくてよい。）

   文字について: トークン（--jk-fs-*）を2倍にすれば var 参照はまとめて
   追いつくので、個別に書くのは clamp と直値だけで済む。
   .jks 自身は font-size を持たず Astra の body（15px）を継承していたので
   ここで明示する。文字に紐づく寸法（行長の上限・ボタンや入力欄の高さ・
   チェック項目の最小幅・チェックマークの丸）も同じ倍率で送る。
   セクション間の余白・面のパディングは vw 連動の clamp なので据え置き。 */
@media (min-width:1280px){

  /* --- 幅 --- */
  /* セクション19 の body[class] .site-content > .ast-container（0,3,1）と
     同じ詳細度。ここが後ろにあるので上書きできる。 */
  body.jkck-support-page .site-content > .ast-container{
    max-width:none;
    padding-left:0;
    padding-right:0;
  }
  body.jkck-support-page .jks{width:80vw;max-width:80vw}

  /* --- 文字（トークン） --- */
  /* ダイアログは wp_footer に出るので .jks の外。両方に書く必要がある。
     body（.jkck-support-page）に置くとヘッダー・フッターまで巻き込む。 */
  .jks,
  .jks-dialog{
    --jk-fs-xs:24px;   /* 12px */
    --jk-fs-sm:28px;   /* 14px */
    --jk-fs-md:32px;   /* 16px */
    --jk-fs-lg:36px;   /* 18px */
  }
  /* 行間も一緒に指定する。Astra の body から継承する line-height は
     文字サイズを2倍にした分までは開かないので、line-height を自前で
     持っていない要素（ダイアログのチェック項目・ラベルなど）で行が重なる。 */
  .jks{font-size:30px;line-height:1.8}   /* Astra の body 15px の2倍 */
  .jks-dialog{line-height:1.7}

  /* --- 文字（clamp と直値） --- */
  .jks-hero__title{font-size:clamp(42px,5.2vw,72px)}
  .jks-hero__lead{font-size:clamp(45px,4.05vw,54px)}
  .jks-title{font-size:clamp(38px,4.4vw,60px)}
  .jks-diag__item{font-size:30px}
  .jks-record__list li{font-size:30px}
  .jks-datetime__unit{font-size:30px}
  .jks-datetime__unit select.jkck-input{width:184px}
  .jks-datetime .jkck-input[type="date"]{flex:1 1 380px}

  /* --- 文字に紐づく寸法 --- */
  /* 1行の長さの上限。文字が2倍なので同じ行数に収まるよう2倍にする。
     ヒーローのリードだけは右下のイラスト（最大435px）に潜らせないため、
     イラストの左端（ヒーロー右端から435px）より内側で止める。 */
  .jks-hero__body{max-width:min(100%,1560px)}
  .jks-hero__lead{max-width:min(100%,1040px)}
  .jks-body{max-width:1720px}

  /* バッジ・帯・見出しの内側。文字に密着している値なので同率で送る。 */
  .jks-eyebrow{margin-bottom:24px;padding:10px 32px}
  .jks-diag__cat{padding:18px 32px;border-radius:var(--jk-r-md)}
  .jks-record__title{padding:22px 32px}
  .jks-record__caption{font-size:var(--jk-fs-lg)}

  /* チェック項目。300px のままだと 30px の文字が2〜3文字で折れる。 */
  .jks-diag__list{grid-template-columns:repeat(auto-fill,minmax(600px,1fr));gap:16px}
  .jks-diag__item{min-height:96px;padding:20px 28px;gap:20px;border-radius:20px}
  .jks-diag__item input{width:36px;height:36px}

  /* 実績リストのチェックマーク（::before が丸、::after が中の折れ線）。
     top は em 指定なので文字サイズに自動で追従する。丸と線だけ2倍にする。 */
  .jks-record__list{padding:28px 36px}
  .jks-record__list li{padding:10px 0 10px 52px}
  .jks-record__list li::before{width:32px;height:32px;border-width:3px}
  .jks-record__list li::after{
    left:9px;
    width:14px;height:7px;
    border-left-width:3.2px;border-bottom-width:3.2px;
  }

  /* ボタン。共通の .jk-btn は font-size:var(--jk-fs-md) なので文字は自動で
     32px になるが、min-height:46px のままだと上下が詰まる。 */
  .jks .jk-btn,
  .jks-dialog .jk-btn{min-height:92px;padding:0 44px;border-radius:20px}
  .jks-cta .jk-btn{padding:0 clamp(36px,4.8vw,68px)}

  /* --- 申込ダイアログ --- */
  /* 直値で書かれている分（セクション56の前段で 12〜16px に上げてあるもの）を
     さらに2倍にする。枠も広げないと 32px の入力欄が窮屈になる。 */
  .jks-dialog{width:min(92vw,1360px)}
  .jks-dialog .jkck-dialog__eyebrow{font-size:24px}
  .jks-dialog .jkck-req{font-size:24px;margin-left:12px;padding:2px 14px}
  .jks-dialog .jkck-hint{font-size:26px}
  .jks-dialog .jkck-label{font-size:28px}
  .jks-dialog .jkck-dialog__lede{font-size:30px;margin-bottom:40px}
  /* チェック項目は上下パディングが 0（min-height と align-items:center で
     1行ぶんの高さを作る作り）。文字が2倍になると2行・3行に折れるので、
     上下にもパディングを入れて枠を内容なりに伸ばす。 */
  .jks-dialog .jkck-check{font-size:30px;min-height:88px;padding:16px 24px;line-height:1.5}
  .jks-dialog .jkck-input{font-size:32px;min-height:92px;padding:0 28px}
  .jks-dialog .jkck-textarea{min-height:192px;padding:24px 28px}
  .jks-dialog .jkck-dialog__title{font-size:34px}
  .jks-dialog .jkck-dialog__close{width:76px;height:76px;font-size:44px}
  .jks-dialog .jkck-dialog__head{padding:40px 44px}
  .jks-dialog .jkck-dialog__body{padding:40px 44px}
  .jks-dialog .jkck-dialog__foot{padding:32px 44px}
  .jks-dialog .jkck-field{gap:12px;margin-bottom:36px}
  .jks-dialog .jkck-fieldset{margin-bottom:36px}
  .jks-dialog .jkck-checks{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px}
  .jks-dialog .jkck-check input{width:36px;height:36px}
  /* 矢印は背景画像なので、欄が大きくなった分だけ位置と大きさを送る。 */
  .jks-dialog select.jkck-input{
    padding-right:68px;
    background-position:right 24px center;
    background-size:24px 16px;
  }
}

/* --- 狭い画面 ------------------------------------------------------------ */

@media (max-width:782px){
  .jks-br-sp{display:inline}
  /* 2026-08-26: リードを1.5倍にしたら、SP 向けの改行位置（「サポートする」の
     直後）が中途半端な行になったので、ヒーローでは改行させず自然に流す。 */
  .jks-hero__lead .jks-br-sp{display:none}
  /* 2026-08-26: イラスト1.5倍に合わせて、下に空ける分も同じだけ増やす。 */
  .jks-hero{padding-bottom:clamp(144px,39vw,225px)}
  .jks-hero__art{right:50%;transform:translateX(50%);width:clamp(210px,63vw,315px)}
  .jks-diag__list{grid-template-columns:1fr}
  .jks-record{grid-template-columns:1fr}
  .jks-cta .jk-btn{width:100%}
}

/* ==========================================================================
   57. 進行ロック（完了していないレッスンをクリックさせない）
   PHP: astra-child/course-lock-block.php

   LearnDash 5.x のコース内容アコーディオンには「ロック」という状態が無く、
   テンプレートは常にリンクを出す。PHP 側で
     - コース詳細の一覧   … <a> を <span>（.jk-locked__title）に差し替える
     - フォーカスの脇一覧 … <a> から href を落とす（.jk-locked__nav）
   ことで止めているので、ここでは「押せないもの」に見せる。

   ツールチップは LearnDash の .ld-tooltip に相乗りしない。あちらは JS が
   .ld-tooltip--initialized を付けるまで説明文が出っぱなしになる作りで、
   初期化に漏れたときの見た目が悪い。自前で hover / focus を面倒みる。
   ========================================================================== */

.jk-locked{position:relative}

/* --- 見出し本体 ----------------------------------------------------------- */

.learndash-wrapper .jk-locked .jk-locked__title,
.learndash-wrapper .jk-locked .jk-locked__title:hover,
.learndash-wrapper .jk-locked .jk-locked__title:focus,
.learndash-wrapper .jk-locked__nav,
.learndash-wrapper .jk-locked__nav:hover,
.learndash-wrapper .jk-locked__nav:focus{
  color:var(--jk-muted);
  text-decoration:none;
}

/* href の無い <a> と <span> は既定でテキストカーソルになる。押せないことを出す。 */
.learndash-wrapper .jk-locked .jk-locked__title,
.learndash-wrapper .jk-locked__nav{cursor:not-allowed}

.jk-locked__icon{
  flex:0 0 auto;
  margin-right:6px;
  opacity:.75;
  vertical-align:-2px;
}

/* 脇の一覧（フォーカスモード）は既に状態アイコンを持っているので、色だけ落とす。 */
.learndash-wrapper .jk-locked__nav{opacity:.55}
.learndash-wrapper .jk-locked__nav .ld-lesson-title,
.learndash-wrapper .jk-locked__nav .ld-table-list-item-preview{color:inherit}

/* 下部ナビの「次のレッスン」は状態アイコンを持たないので、鍵そのものを出す
   （2026-08-28）。**バイパスできる人にしか付かない印**で、会員は LearnDash が
   --disabled にしているためここには来ない。
   鍵は <a> の開きタグ直後に入るので、ボタンの中身の先頭に並ぶ。 */
.learndash-wrapper .jk-locked__nav--btn{
  opacity:1;                 /* ボタンは薄くしすぎると押せる／押せないより先に読めなくなる */
  color:var(--jk-muted);
  cursor:pointer;            /* 実際に進めるので not-allowed にはしない */
}
.learndash-wrapper .jk-locked__nav--btn > .jk-locked__icon{
  margin-right:2px;
  opacity:.9;
  vertical-align:0;
  align-self:center;
}

/* --- 説明のふきだし ------------------------------------------------------- */

.jk-locked__tip{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  z-index:5;
  max-width:min(280px,90vw);
  padding:6px 10px;
  border:1px solid var(--jk-line-2);
  border-radius:6px;
  background:#fff;
  box-shadow:0 4px 12px rgba(11,12,16,.12);
  color:var(--jk-ink-2);
  font-size:12px;
  line-height:1.5;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s linear;
  pointer-events:none;
}
.jk-locked:hover .jk-locked__tip,
.jk-locked:focus-within .jk-locked__tip{opacity:1;visibility:visible}

@media (max-width:544px){
  .jk-locked__tip{left:auto;right:0}
}

/* ==========================================================================
   58. レッスン画面（フォーカスモード）の共通ヘッダー
   PHP: astra-child/lesson-header-block.php

   LearnDash のフォーカスモードはテーマの header.php を通さないので、
   PHP 側で Astra のヘッダーを <div class="ld-focus"> の先頭に出している。
   ここでは、そのヘッダーと LearnDash の固定要素の重なりを整理する。

   ・.ld-focus は display:flex（サイドバー＋本文の横並び）。折り返しを許して
     ヘッダーだけ行の全幅を取らせると、サイドバーと本文がそのまま次の行に来る。
   ・.ld-focus-header / .ld-focus-sidebar は position:fixed で top を px で
     直書き（管理バーぶんの 32px だけ）している。共通ヘッダーの実測値
     --jk-focus-head を足して下げる。
   ・768px 以下ではフォーカスヘッダーが position:relative、サイドバーが
     position:absolute（top:97px 直書き）に変わる。こちらは
     --jk-focus-drawer（フォーカスヘッダーの下端）で置き換える。
   ========================================================================== */

/* LearnDash は body.ld-in-focus-mode.admin-bar に padding-top:32px を当てている
   （固定ヘッダーが top:32px にいることへの帳尻合わせ）。共通ヘッダーを流し込むと
   これがそのまま「管理バーとヘッダーの間の白い帯」になり、固定ヘッダーの
   位置ともズレる。詳細度を1段上げて（body[class] ＝ 0,3,1）取り消す。 */
body[class].ld-in-focus-mode.admin-bar{
  padding-top:0;
}

body.ld-in-focus-mode .learndash-wrapper .ld-focus{
  position:relative; /* 768px 以下の absolute なサイドバーの基準にする */
  flex-wrap:wrap;
}

body.ld-in-focus-mode #masthead{
  flex:0 0 100%;
  width:100%;
  /* LearnDash の固定ヘッダー・サイドバーが z-index:99。その上に置く。 */
  z-index:101;
}

/* ロゴは共通ヘッダーが持っている。フォーカスヘッダー側の重複を畳む。 */
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo{
  display:none;
}

/* --- 769px 以上（フォーカスヘッダーとサイドバーが position:fixed） -------- */

@media (min-width:769px){
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-header,
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-sidebar{
    top:calc(var(--wp-admin--admin-bar--height,0px) + var(--jk-focus-head,0px));
  }
  /* サイドバーの既定は height:100vh。top を下げたぶん画面外にはみ出すので、
     bottom:0 に任せる。padding-top:50px は「上に固定ヘッダーが乗っている」
     ぶんの逃げなので、下のルールでヘッダーを本文側に寄せたら不要になる。 */
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-sidebar{
    height:auto;
    padding-top:0;
    /* 開閉ボタンは脇の一覧の左端をまたいで置かれている。フォーカスヘッダーと
       同じ z-index:99 だと、後ろに来るヘッダーがボタンの左半分を隠す
       （畳んだときにヘッダーが 50px 手前まで伸びてくるため）。1段上げる。
       共通ヘッダー（101）よりは下に置く。 */
    z-index:100;
  }

  /* フォーカスヘッダーは既定で画面の全幅（left:0/right:0）に伸び、
     ロゴを畳んだぶん「完了としてマーク」が脇の一覧の上まで流れていく。
     本文の列に合わせて畳み、脇の一覧は上まで通す。
     幅の 350px / 50px（畳んだとき）は LearnDash が .ld-focus-main の
     margin-right に使っている値と同じ。 */
  body.ld-in-focus-mode .learndash-wrapper .ld-focus.ld-focus-position-right .ld-focus-header{
    right:350px;
    transition:right .3s ease;
  }
  body.ld-in-focus-mode .learndash-wrapper .ld-focus.ld-focus-position-right.ld-focus-sidebar-collapsed .ld-focus-header{
    right:50px;
  }
}

/* --- 768px 以下（サイドバーはドロワー） ----------------------------------- */

@media (max-width:768px){
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-sidebar{
    top:var(--jk-focus-drawer,97px);
  }
}

/* ==========================================================================
   59. レッスン画面（フォーカスモード）を1画面に収める
   PHP: astra-child/lesson-layout-block.php

   1440x820 で縦 1227px あり、動画を見るだけでスクロールが必要だった。
   内訳は #ld-focus-content の padding 75px（上下 150px）、46px の見出し、
   LearnDash のパンくず（75px）、下部ナビの padding-top 36px×3 と2段組み。

   ・上のフォーカスヘッダーから進捗バーを下部ナビへ移し（PHP）、
     「前のレッスン」「完了としてマーク」は捨てた。769px 以上では
     ヘッダーに残るのがモバイル用のハンバーガーだけなので畳む。
   ・LearnDash のパンくずは脇の一覧の先頭にあるコース名リンクと
     見出し（h1）の繰り返しなので落とす。
   ・769px 以上は「画面の高さ − 管理バー − 共通ヘッダー」を
     .ld-focus-main に確定させ、動画がその余りを取るようにする。
     動画は縦を基準に伸ばすので、横がはみ出す形（縦長・狭い窓）では
     max-height:56.25cqw で頭を抑える（.ld-video をコンテナにしている）。
   ・768px 以下は高さを確定させない。この幅なら詰めるだけで収まるうえ、
     ドロワーになるサイドバーと固定高さの相性が悪い。
   ========================================================================== */

/* --- 全幅で効く整理 ------------------------------------------------------- */

/* パンくず（コース名 / レッスン名）。コース名は脇の一覧の見出しに、
   レッスン名は h1 に同じものが出ている。 */
body.jk-lesson-fit .learndash-wrapper .ld-layout__header{
  display:none;
}

body.jk-lesson-fit .ld-focus #ld-focus-content{
  padding:clamp(14px,1.6vw,22px) clamp(16px,2.4vw,40px);
}

body.jk-lesson-fit .ld-focus #ld-focus-content > h1{
  margin:0 0 var(--jk-s-3);
  font-size:clamp(20px,1.7vw,27px);
  line-height:1.35;
}

/* 説明文。長い回は中だけスクロールさせて、下のバーの位置は動かさない。 */
body.jk-lesson-fit .learndash-wrapper .ld-tab-bar__panel > p{
  margin:var(--jk-s-3) 0 0;
  max-height:5.6em;
  overflow-y:auto;
  font-size:var(--jk-fs-sm);
  line-height:1.7;
  color:var(--jk-text-2);
}

/* --- 下部のバー（進捗＋ナビ） --------------------------------------------- */

/* LearnDash の grid は "previous progress next" / ". back-to-course ." の2段。
   1段目に進捗バーと「学べる動画に戻る」を通し、ナビを2段目に落とす。 */
body.jk-lesson-fit .learndash-wrapper .ld-navigation{
  flex:0 0 auto;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:
    "bar bar back-to-course"
    "previous progress next";
  align-items:center;
  gap:var(--jk-s-2) var(--jk-s-4);
  margin-top:var(--jk-s-3);
  padding-top:var(--jk-s-3);
  border-top:1px solid var(--jk-line);
}

/* 各セルの padding-top:36px が2段ぶん効くと 72px になる。 */
body.jk-lesson-fit .learndash-wrapper .ld-navigation > *{
  padding-top:0;
}

body.jk-lesson-fit .learndash-wrapper .ld-navigation .jk-lesson-progress{
  grid-area:bar;
  display:flex;
  align-items:center;
  min-width:0;
}

body.jk-lesson-fit .learndash-wrapper .ld-navigation__previous{justify-self:start}
body.jk-lesson-fit .learndash-wrapper .ld-navigation__next{justify-self:end}

body.jk-lesson-fit .learndash-wrapper .ld-navigation__back-to-course{
  justify-self:end;
}
body.jk-lesson-fit .learndash-wrapper .ld-navigation__back-to-course-link{
  padding:4px 0;
  font-size:var(--jk-fs-sm);
  color:var(--jk-muted);
  white-space:nowrap;
}
body.jk-lesson-fit .learndash-wrapper .ld-navigation__back-to-course-link:hover,
body.jk-lesson-fit .learndash-wrapper .ld-navigation__back-to-course-link:focus{
  color:var(--jk-orange-deep);
}
body.jk-lesson-fit .learndash-wrapper .ld-navigation__back-to-course-link .ld-svgicon{
  width:18px;
  height:18px;
}

/* --- 進捗バー（ヘッダーから移ってきたもの） ------------------------------- */

body.jk-lesson-fit .learndash-wrapper .jk-lesson-progress .ld-progress{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  margin:0;
  padding:0;
}
body.jk-lesson-fit .learndash-wrapper .jk-lesson-progress .ld-progress-wrap{
  display:flex;
  align-items:center;
  gap:var(--jk-s-3);
  width:100%;
  margin:0;
}
body.jk-lesson-fit .learndash-wrapper .jk-lesson-progress .ld-progress-heading{
  flex:0 0 auto;
  margin:0;
}
body.jk-lesson-fit .learndash-wrapper .jk-lesson-progress .ld-progress-stats{
  display:flex;
  align-items:baseline;
  gap:var(--jk-s-2);
}
body.jk-lesson-fit .learndash-wrapper .jk-lesson-progress .ld-progress-percentage{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-sm);
  font-weight:700;
  color:var(--jk-orange-deep);
}
body.jk-lesson-fit .learndash-wrapper .jk-lesson-progress .ld-progress-steps{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  letter-spacing:.04em;
  color:var(--jk-muted);
}
body.jk-lesson-fit .learndash-wrapper .jk-lesson-progress .ld-progress-bar{
  flex:1 1 auto;
  height:6px;
  min-width:0;
  margin:0;
  border:0;
  border-radius:var(--jk-r-pill);
  background:var(--jk-paper-3);
  overflow:hidden;
}
body.jk-lesson-fit .learndash-wrapper .jk-lesson-progress .ld-progress-bar-percentage{
  height:100%;
  border-radius:inherit;
}

/* --- 560px 以下：下部のバーを3段に ---------------------------------------- */

@media (max-width:560px){
  /* 進捗バーと「学べる動画に戻る」を同じ行に置くと、バーが 60px まで痩せる。 */
  body.jk-lesson-fit .learndash-wrapper .ld-navigation{
    grid-template-areas:
      "bar bar bar"
      "previous progress next"
      "back-to-course back-to-course back-to-course";
  }
  body.jk-lesson-fit .learndash-wrapper .ld-navigation__back-to-course{
    justify-self:center;
  }
  /* 「完了としてマーク」「前へ」「次へ」が2行に折れる。 */
  body.jk-lesson-fit .learndash-wrapper .learndash_mark_complete_button{
    padding:10px 14px;
    font-size:var(--jk-fs-sm);
    white-space:nowrap;
  }
  body.jk-lesson-fit .learndash-wrapper .ld-navigation__label{
    white-space:nowrap;
  }
}

/* --- 768px 以下：ドロワーが文書の丈を伸ばすのを止める --------------------- */

@media (max-width:768px){
  /* 脇の一覧は position:absolute ＋ height:100vh。開始位置が
     --jk-focus-drawer（共通ヘッダー＋フォーカスヘッダーの下）まで下がって
     いるので、その"はみ出し"が丈としてそのままスクロール領域になる
     （390x844 で本文が収まっていても 1008px スクロールした）。
     絶対配置なので親の高さには足されず、見た目にも出ない。 */
  body.jk-lesson-fit .learndash-wrapper .ld-focus .ld-focus-sidebar{
    height:calc(100vh - var(--jk-focus-drawer,97px));
    height:calc(100dvh - var(--jk-focus-drawer,97px));
  }
}

/* --- 769px 以上：縦を確定させる ------------------------------------------- */

@media (min-width:769px){
  /* 進捗バーとアクションを抜いたので、残るのはモバイル用のハンバーガーだけ。 */
  body.jk-lesson-fit .learndash-wrapper .ld-focus .ld-focus-header{
    display:none;
  }

  body.jk-lesson-fit .learndash-wrapper .ld-focus .ld-focus-main{
    height:calc(100vh - var(--wp-admin--admin-bar--height,0px) - var(--jk-focus-head,0px));
    height:calc(100dvh - var(--wp-admin--admin-bar--height,0px) - var(--jk-focus-head,0px));
    display:flex;
    flex-direction:column;
  }

  /* .ld-focus-content → .learndash → .learndash-wrapper → .ld-layout__content
     → .ld-tab-bar → .ld-tab-bar__panel → .ld-video まで、
     高さを流すために全段で flex column ＋ min-height:0 にする。
     どこか1段でも auto に戻ると、動画が余りを取らずに元の 56.25% に戻る。 */
  /* LearnDash は .ld-focus-content に margin:0 auto を当てている。flex の
     交差軸に auto マージンがあると stretch が止まり、幅が中身なりになる
     （1090px の列で 636px まで縮んだ）。width:100% で戻す。 */
  body.jk-lesson-fit .ld-focus #ld-focus-content{
    width:100%;
  }

  body.jk-lesson-fit .ld-focus #ld-focus-content,
  body.jk-lesson-fit .ld-focus #ld-focus-content > .learndash,
  body.jk-lesson-fit .learndash-wrapper.ld-layout,
  body.jk-lesson-fit .learndash-wrapper .ld-layout__content,
  body.jk-lesson-fit .learndash-wrapper .ld-tab-bar,
  body.jk-lesson-fit .learndash-wrapper .ld-tab-bar__panel{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  /* 動画以外が伸びると動画が潰れる。丈のある回は本文側だけスクロールさせる。
     container-type は下の 56.25cqw（＝この幅で 16:9 にしたときの高さ）用。 */
  body.jk-lesson-fit .learndash-wrapper .ld-tab-bar__panel{
    overflow-y:auto;
    container-type:inline-size;
  }

  /* LearnDash は padding-bottom:56.25% ＋ 絶対配置の iframe で比を作っている。
     ここでは縦を先に決めるので、その仕掛けを解いて flex に任せる。

     肝は align-self:center。flex の交差軸は既定で stretch し、stretch した
     ボックスは aspect-ratio を無視して幅いっぱいになる（iframe 側の
     width:100% / height:100% は LearnDash が !important で当てているので
     こちらでは外せない）。stretch を止めると、flex が決めた高さから
     aspect-ratio で幅が出る。max-height:56.25cqw は「幅より縦が勝ってしまう
     窓」で頭を抑えるためのもので、これがあるので max-width は効かない。 */
  body.jk-lesson-fit .learndash-wrapper .ld-video{
    flex:1 1 auto;
    align-self:center;
    aspect-ratio:16/9;
    width:auto;
    max-width:100%;
    height:auto;
    min-height:0;
    max-height:56.25cqw;
    padding:0;
    border-radius:var(--jk-r-sm);
    background:#000;
    overflow:hidden;
  }
  /* **oEmbed は Astra が .ast-oembed-container で包むことがある。**
     あの箱は position:relative + height:0 + padding-bottom:56.25% で比を作る
     ので、**中身の高さは 0**。包まれると iframe の親がこの箱になり、下の
     height:100% が 0 に解決して真っ黒になる（2026-08-28 の報告）。
     同じコースでも包まれるレッスンと包まれないレッスンが混ざる
     （oEmbed のキャッシュが Astra のフィルタより前に作られたか後かで変わる）。
     比は .ld-video 側で作っているので、間に入る箱は高さを素通しさせる。 */
  body.jk-lesson-fit .learndash-wrapper .ld-video > *{
    position:static;
    height:100%;
    min-height:0;
    max-width:none;
    padding:0;
    overflow:visible;
  }
  body.jk-lesson-fit .learndash-wrapper .ld-video iframe{
    position:static;
    display:block;
    width:100%;
    height:100%;
  }
}

/* ==========================================================================
   60. カート／支払いの「面」
   2026-08-25

   ブロック版のカートと支払いは、白い面を持っているのが右の集計カードだけで、
   本体（購入予定リスト・支払いオプション）は方眼紙（セクション43）の上に
   直接置かれていた。罫線も薄いので、どこからどこまでが1つのまとまりなのか
   読み取りにくい。地／面の階層（セクション56）に合わせて紙を敷く。

   WooCommerce Blocks の CSS は #66-67 で子テーマ（#62）より後に来るので、
   body を前置きして詳細度で上回る。
   ========================================================================== */

/* --- カート：購入予定リスト ----------------------------------------------- */

/* 面は table に敷く。親の .wc-block-cart__main は右に 47px の溝
   （padding-right）を持っていて、そこまで白くなってしまうため。 */
/* WooCommerce の cart.css が
   `table.wc-block-cart-items, … td, … th { background: initial !important }`
   を当てている。詳細度では越えられないので、こちらも !important で返す。
   （td / th は透明のままでよいので、テーブル本体だけ塗る） */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items{
  background:var(--jk-paper) !important;
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  padding:var(--jk-s-2) var(--jk-s-5) var(--jk-s-3);
  box-shadow:var(--jk-e-1);
}

/* 見出し行（商品／合計）はラベルとして小さく。 */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items__header{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  letter-spacing:.08em;
  color:var(--jk-muted);
}

/* 最終行の下罫線は面の下辺と重なる。 */
body.woocommerce-cart .wc-block-cart .wc-block-cart-items__row:last-child td{
  border-bottom:0;
}

/* --- 支払い：支払いオプション --------------------------------------------- */

/* 決済方法のカードは枠線だけで中が透けていた（Stripe の入力欄が乗るので
   面積が大きく、方眼紙が透ける影響も大きい）。 */
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option{
  background:var(--jk-paper);
  border-radius:var(--jk-r-md);
  overflow:hidden;
}

/* 「今後の購入に使用するため…」のチェックはカードの外。地の上に残す。 */
body.woocommerce-checkout .wc-block-checkout__payment-method .wc-block-components-checkout-step__content > .wc-block-components-radio-control{
  border-radius:var(--jk-r-md);
}

/* ==========================================================================
   61. マイアカウントの会員証（ダッシュボード先頭）
   PHP: astra-child/account-block.php

   セクション12（マイアカウント全体）・21（受講状況タイル）・22（会員
   ステータスバナー）の続き。ここでは、以前は横長の黒帯だっただけの
   ステータスバナーを「会員証」の中に入れ、名前・メール・在籍状態・
   学習を再開する導線を1枚にまとめる。

   .membership-banner のダーク帯は wp-custom-css（#65／子テーマより後）も
   塗っているが、こちらは .jk-account-card を前置きした 0,2,0 なので
   読み込み順に関係なく勝つ。
   ========================================================================== */

.jk-account-card{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--jk-s-5);
  margin-bottom:var(--jk-s-4);
  padding:clamp(20px,2.4vw,30px);
  border-radius:var(--jk-r-lg);
  /* ヒーローと同じ「暗い紙に金の差し込み」。 */
  background:
    radial-gradient(120% 150% at 100% 0%,rgba(233,182,103,.20),transparent 60%),
    linear-gradient(140deg,var(--jk-ink-2) 0%,var(--jk-ink) 64%);
  color:var(--jk-text-inv);
  box-shadow:var(--jk-e-2);
}

.jk-account-card__id{flex:1 1 260px;min-width:0}

.jk-account-card__kicker{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  font-weight:700;
  letter-spacing:.2em;
  color:var(--jk-gold);
}

/* Astra は .entry-content p に margin-bottom:1.6em を当てている（0,1,1）。
   クラス1つ（0,1,0）では負けるので、要素まで含めて 0,2,1 にする。 */
.jk-account-card p.jk-account-card__name{
  margin:var(--jk-s-2) 0 0;
  font-size:clamp(21px,2.1vw,28px);
  font-weight:700;
  line-height:1.3;
  color:var(--jk-text-inv);
}
.jk-account-card__name span{
  margin-left:6px;
  font-size:var(--jk-fs-md);
  font-weight:500;
  color:rgba(255,255,255,.6);
}

.jk-account-card p.jk-account-card__mail{
  margin:6px 0 0;
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-sm);
  color:rgba(255,255,255,.5);
  overflow-wrap:anywhere;
}

.jk-account-card__side{
  flex:0 1 320px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--jk-s-3);
  min-width:0;
  max-width:100%;
}

/* --- 中に入れたステータスバナー ------------------------------------------- */

.jk-account-card .membership-banner,
.jk-account-card .membership-banner--active,
.jk-account-card .membership-banner--paused{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--jk-s-3);
  margin:0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
}

/* ラベル（入会中／休会中）のチップと説明文・ボタンはセクション22 が
   body 前置き（0,2,1）で持っている。ここで上書きすると詳細度が足りず
   効かないうえ、緑＝在籍・赤＝休会の意味づけも共通なのでそのまま使う。 */

/* --- 学習を再開する ------------------------------------------------------- */

.jk-account-card__cta{
  display:flex;
  flex-direction:column;
  gap:3px;
  max-width:100%;
  padding:11px 20px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--jk-orange) 0%,var(--jk-orange-hi) 100%);
  box-shadow:var(--jk-e-gold);
  text-decoration:none;
}
.jk-account-card__cta:hover,
.jk-account-card__cta:focus{
  filter:brightness(1.07);
  text-decoration:none;
}
.jk-account-card__cta-label{
  font-size:var(--jk-fs-sm);
  font-weight:700;
  color:var(--jk-text-inv);
}
.jk-account-card__cta-title{
  max-width:260px;
  overflow:hidden;
  font-size:var(--jk-fs-xs);
  color:rgba(255,255,255,.85);
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- 受講状況タイル（セクション21）を押せるようにした ---------------------- */

a.jkck-stat{
  display:block;
  color:inherit;
  text-decoration:none;
  transition:background .12s linear;
}
a.jkck-stat:hover,
a.jkck-stat:focus{
  background:var(--jk-paper-2);
  text-decoration:none;
}

/* --- 登録情報の編集を「面」に載せる --------------------------------------- */

.woocommerce-MyAccount-content .wcprof-acc-wrap{
  margin-bottom:var(--jk-s-5);
  padding:6px;
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  background:var(--jk-paper);
  box-shadow:var(--jk-e-1);
}
.woocommerce-MyAccount-content .wcprof-acc-btn{
  width:100%;
  justify-content:space-between;
  border-color:transparent;
  font-size:var(--jk-fs-md);
}

/* --- LearnDash の「あなたの学べる動画」 ------------------------------------ */

/* 会員証・タイル・アコーディオンと続いたあとの区切り。 */
.woocommerce-account .learndash-wrapper.ld-profile{
  margin-top:var(--jk-s-6);
  padding-top:var(--jk-s-5);
  border-top:1px solid var(--jk-line-2);
}
.woocommerce-account .learndash-wrapper.ld-profile .ld-section-heading h3{
  font-size:var(--jk-fs-xl);
  letter-spacing:.01em;
}

@media (max-width:782px){
  .jk-account-card{gap:var(--jk-s-4)}
  .jk-account-card__side{
    flex:1 1 100%;
    align-items:flex-start;
  }
  .jk-account-card .membership-banner{justify-content:flex-start}
  .jk-account-card__cta-title{max-width:min(260px,64vw)}
}

/* ==========================================================================
   62. 決済方法の追加（/my-account/add-payment-method/）
   PHP: astra-child/stripe-form-block.php

   カード番号などの入力欄そのものは Stripe の iframe の中なので、ここでは
   届かない（見た目は Appearance API に渡している）。このセクションが
   受け持つのは iframe の外側 —— 面・見出し・注記・ボタンの位置。

   ・支払い方法が Stripe ひとつだけなので、ラジオは意味がない。隠して
     ラベルをカードの見出しにする。
   ・フォーム全体を白い面に載せ、幅を 640px に絞る。1100px 幅いっぱいの
     カード入力欄は視線の移動が大きすぎる。
   ・「テストモード」の案内は本番キーに切り替えれば出なくなる。
   ========================================================================== */

body.woocommerce-add-payment-method #add_payment_method{
  max-width:640px;
  margin-inline:auto;
  padding:clamp(18px,2vw,26px);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  background:var(--jk-paper);
  box-shadow:var(--jk-e-1);
}

body.woocommerce-add-payment-method #add_payment_method ul.payment_methods{
  margin:0;
  padding:0;
  border:0;
  background:none;
  list-style:none;
}
body.woocommerce-add-payment-method #add_payment_method ul.payment_methods li{
  margin:0;
  padding:0;
  list-style:none;
}

/* 選択肢が1つしかないラジオは操作の余地が無い。 */
body.woocommerce-add-payment-method #add_payment_method input.input-radio{
  display:none;
}
body.woocommerce-add-payment-method #add_payment_method label[for="payment_method_stripe"]{
  display:block;
  margin:0 0 var(--jk-s-4);
  padding:0 0 var(--jk-s-3);
  border-bottom:1px solid var(--jk-line);
  font-size:var(--jk-fs-lg);
  font-weight:700;
  color:var(--jk-text);
}

/* Astra は payment_box を灰色の吹き出し（::before の三角つき）にしている。
   面の中に面を作らない。
   向こうのセレクタが `#add_payment_method #payment div.payment_box`＝**ID 2つ**
   （2,1,2）なので、body を足して 2,1,3 で上回る。クラスをいくら重ねても
   ID 2つには勝てない。 */
body #add_payment_method #payment div.payment_box{
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--jk-text);
}
body #add_payment_method #payment div.payment_box::before{
  display:none;
}

body.woocommerce-add-payment-method #add_payment_method .testmode-info{
  margin:0 0 var(--jk-s-4);
  padding:10px 14px;
  border:1px dashed var(--jk-line-2);
  border-radius:var(--jk-r-sm);
  background:var(--jk-paper-2);
  font-size:var(--jk-fs-sm);
  line-height:1.75;
  color:var(--jk-text-2);
}
body.woocommerce-add-payment-method #add_payment_method .testmode-info strong{
  font-family:var(--jk-ff-mono);
  font-size:var(--jk-fs-xs);
  letter-spacing:.08em;
  color:var(--jk-warn);
}

body.woocommerce-add-payment-method #add_payment_method #wc-stripe-upe-form{
  margin:0;
  padding:0;
  border:0;
}
body.woocommerce-add-payment-method #add_payment_method #wc-stripe-upe-errors:not(:empty){
  margin-top:var(--jk-s-3);
  font-size:var(--jk-fs-sm);
  color:var(--jk-danger);
}

/* カード情報の行き先を1行で書いておく（stripe-form-block.php が出力）。 */
.jk-pay-note{
  display:flex;
  gap:var(--jk-s-2);
  align-items:flex-start;
  margin:var(--jk-s-4) 0 0;
  padding-top:var(--jk-s-4);
  border-top:1px solid var(--jk-line);
  font-size:var(--jk-fs-sm);
  line-height:1.75;
  color:var(--jk-muted);
}
.jk-pay-note svg{
  flex:0 0 auto;
  margin-top:4px;
  color:var(--jk-ok);
}

body.woocommerce-add-payment-method #add_payment_method .form-row{
  display:flex;
  justify-content:flex-end;
  margin:var(--jk-s-4) 0 0;
  padding:0;
}
body.woocommerce-add-payment-method #add_payment_method #place_order{
  min-width:220px;
}

@media (max-width:600px){
  body.woocommerce-add-payment-method #add_payment_method .form-row{
    justify-content:stretch;
  }
  body.woocommerce-add-payment-method #add_payment_method #place_order{
    width:100%;
  }
}

/* --------------------------------------------------------------------------
   63. お知らせ／掲示板の2カラムと掲示板本体
   2026-08-26

   /column/ を左（お知らせ）と右（掲示板ダイジェスト）に割り、/board/ の
   一覧・スレッド・フォームをここでまとめて受け持つ。

   Astra の a には下線がある。.jkb-* は詳細度で負けるので body[class] を
   前置して打ち消す（.jkn-* と同じ対処）。
   -------------------------------------------------------------------------- */

/* 2カラムの器 ------------------------------------------------------------ */
.jkcol{
  display:grid;
  /* 2026-08-28（依頼）: お知らせと掲示板を 1:1 に。以前は右を 380px 固定に
     していた。minmax(0,…) は、中の長い語で列が押し広げられないようにするため
     （grid の既定は min-width:auto）。 */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--jk-s-7);
  align-items:start;
}
.jkcol__main{min-width:0}
.jkcol__side{
  min-width:0;position:sticky;
  /* 固定ヘッダー（#masthead は 89px 居座る）の下に貼り付ける。
     そうしないとスクロール中にカード上部がヘッダーの裏に隠れる。 */
  top:calc(var(--wp-admin--admin-bar--height,0px) + 89px + var(--jk-s-5));
}

@media (max-width:1023px){
  .jkcol{grid-template-columns:1fr;gap:var(--jk-s-6)}
  .jkcol__side{position:static}
}

/* 2026-08-28（依頼）: 狭い画面ではお知らせだけを出す。掲示板は画面下端の
   バー（セクション47-2）の「掲示板」ボタンからダイアログで開く。

   **1023px ではなく 921px で切る。** 2カラムが崩れるのは 1023px 以下だが、
   下端バーが出るのは 921px 以下。1023px で隠すと 922〜1023px の帯で
   /board/ への導線が（ダイジェストの「すべて見る」もバーも）両方消える。
   ヘッダーのメニューに /board/ 単体の項目は無い。 */
@media (max-width:921px){
  .jkcol__side{display:none}
}

/* 共通 -------------------------------------------------------------------- */
body[class] .jkb a{text-decoration:none}
body[class] .jkb a:hover{text-decoration:none}

.jkb{font-family:var(--jk-ff-jp);color:var(--jk-text)}
.jkb-empty{
  margin:0;padding:var(--jk-s-6) var(--jk-s-5);
  text-align:center;color:var(--jk-muted);font-size:var(--jk-fs-md);
  background:var(--jk-paper);border:1px dashed var(--jk-line-2);border-radius:var(--jk-r-md);
}
.jkb-notice{
  margin:0 0 var(--jk-s-4);padding:var(--jk-s-3) var(--jk-s-4);
  border-radius:var(--jk-r-sm);font-size:var(--jk-fs-md);
}
.jkb-notice--error{background:#FDECE8;color:var(--jk-danger);border:1px solid rgba(194,64,27,.28)}
/* ハニーポット。ファイル入力と同じ理由で clip 方式にそろえる（下の
   .jkb-drop__input のコメント参照）。左に飛ばすとダイアログのクリップ領域から
   出るうえ、横スクロールを生むこともある。

   **body[class] を前置しているのは詳細度のため（2026-08-27 に実測・修正）。**
   Astra の input[type="text"]（0,1,1）が .jkb-hp（0,1,0）に勝つので width が
   素通しになり、この箱が 390x46 のまま残っていた。clip は「描画を切る」だけで
   **箱は残る**ので、position:absolute の静的位置（左 44px）から幅いっぱいに
   伸び、スレッド詳細のモバイルで 44px ぶんの横スクロールが出ていた。
   ダイアログの中では display:none なので、そちらでは気づけない。

   高さは 46px のままになる（Astra が min-height をもっと強い詳細度で当てて
   いて、body[class]（0,2,1）でも届かない）。絶対配置で clip 済みだから
   縦には何も起こらないので、!important で殴らずに放ってある。 */
body[class] .jkb-hp{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* チップ ------------------------------------------------------------------ */
.jkb-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--jk-r-pill);
  background:var(--jk-paper-2);border:1px solid var(--jk-line);
  color:var(--jk-text-2);font-size:var(--jk-fs-sm);line-height:1.4;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.jkb-chip:hover{background:var(--jk-paper-3);border-color:var(--jk-line-2)}
.jkb-chip.is-on{background:var(--jk-orange);border-color:var(--jk-orange);color:var(--jk-text-inv)}
.jkb-chip--static{background:transparent;border-color:var(--jk-line);color:var(--jk-muted);padding:2px 8px;font-size:var(--jk-fs-xs)}
.jkb-chip__n{font-family:var(--jk-ff-mono);font-size:var(--jk-fs-xs);opacity:.7}

/* スレッド行 -------------------------------------------------------------- */
.jkb-row{
  position:relative;display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:var(--jk-s-3);align-items:start;
  padding:var(--jk-s-4);
  background:var(--jk-paper);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-md);
  box-shadow:var(--jk-e-1);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.jkb-row + .jkb-row{margin-top:var(--jk-s-3)}
.jkb-row:hover{transform:translateY(-2px);box-shadow:var(--jk-e-2);border-color:var(--jk-line-2)}
.jkb-row:focus-visible{outline:2px solid var(--jk-orange);outline-offset:2px}

.jkb-row__av,.jkb-post__av{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(140deg,var(--jk-gold) 0%,var(--jk-gold-soft) 100%);
  color:var(--jk-ink);font-weight:700;font-size:var(--jk-fs-lg);
}
.jkb-row__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.jkb-row__title{
  color:var(--jk-text);font-weight:700;font-size:var(--jk-fs-md);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.jkb-row__excerpt{
  color:var(--jk-muted);font-size:var(--jk-fs-sm);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.jkb-row__meta{display:flex;align-items:center;gap:var(--jk-s-2);flex-wrap:wrap}
.jkb-row__by{color:var(--jk-muted);font-size:var(--jk-fs-xs)}
.jkb-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.jkb-replies{
  display:inline-flex;align-items:baseline;gap:2px;
  padding:2px 8px;border-radius:var(--jk-r-pill);
  background:var(--jk-paper-3);color:var(--jk-text-2);
}
.jkb-replies__n{font-family:var(--jk-ff-mono);font-weight:700;font-size:var(--jk-fs-sm)}
.jkb-replies__u{font-size:var(--jk-fs-xs)}
.jkb-time{color:var(--jk-muted);font-size:var(--jk-fs-xs)}

.jkb-badge-new{
  position:absolute;top:-6px;left:-6px;
  padding:1px 7px;border-radius:var(--jk-r-pill);
  background:var(--jk-orange);color:var(--jk-text-inv);
  font-family:var(--jk-ff-mono);font-size:9px;letter-spacing:.06em;
  box-shadow:var(--jk-e-gold);
}

/* ダイジェスト（/column/ 右カラム） -------------------------------------- */
.jkb-digest{
  padding:var(--jk-s-5);
  background:var(--jk-paper-2);
  border:1px solid var(--jk-line);
  border-radius:var(--jk-r-lg);
}

/* 2026-09-09: 掲示板エリアの文字が小さいとの指摘（依頼）。
   **下限を 16.5px にした**（元の最小 11px の1.5倍）。
   11 / 13 / 15px の3段がここで 16.5px に揃う。17px（＋スレッドを立てる）と
   20px（見出し「掲示板」）はもともと下限より大きいので据え置き。

   **トークンの上書きは .jkb-digest に閉じる。** `.jkb` に置くと /board/ の
   一覧（.jkb-archive）とスレッド（.jkb-single）まで巻き込む。ダイジェストは
   モバイルのダイアログでも同じ .jkb-digest を描くので、ここ一箇所で両方に効く。
   （同じ手を /support/ の .jks / .jks-dialog で使っている） */
.jkb-digest{
  --jk-fs-xs:16.5px;   /* 元 11px … カテゴリ・投稿者・日時・返信の「件」 */
  --jk-fs-sm:16.5px;   /* 元 13px … 説明文・抜粋・返信数・「掲示板をすべて見る」 */
  --jk-fs-md:16.5px;   /* 元 15px … スレッド見出し・頭文字アイコン */
}

/* 「NEW」バッジだけは 9px 直書きでトークンを見ていない。
   ここが実際の最小なので、下限の対象として個別に上げる。 */
.jkb-digest .jkb-badge-new{font-size:16.5px}
.jkb-digest__title{margin:0;font-size:var(--jk-fs-xl);letter-spacing:.02em}
.jkb-digest__lede{margin:6px 0 var(--jk-s-4);color:var(--jk-muted);font-size:var(--jk-fs-sm);line-height:1.7}
.jkb-digest__cats{display:flex;flex-wrap:wrap;gap:6px;margin:var(--jk-s-4) 0}
.jkb-digest__list{display:block;margin-top:var(--jk-s-4)}
.jkb-digest .jkb-row{padding:var(--jk-s-3);grid-template-columns:32px minmax(0,1fr)}
.jkb-digest .jkb-row__av{width:32px;height:32px;font-size:var(--jk-fs-md)}
.jkb-digest .jkb-row__side{
  grid-column:2;flex-direction:row;align-items:center;gap:var(--jk-s-2);
  justify-content:flex-start;margin-top:2px;
}
.jkb-digest__more{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:var(--jk-s-4);padding:var(--jk-s-3);
  color:var(--jk-orange-deep);font-size:var(--jk-fs-sm);font-weight:700;
  border-top:1px solid var(--jk-line);
}
.jkb-digest__more:hover{color:var(--jk-orange-deeper)}

/* 「スレッドを立てる」 ---------------------------------------------------- */
.jkb-new{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:12px var(--jk-s-4);border:0;border-radius:var(--jk-r-pill);
  background:linear-gradient(120deg,var(--jk-orange) 0%,var(--jk-gold) 140%);
  color:var(--jk-text-inv);font-family:inherit;font-size:var(--jk-fs-md);font-weight:700;
  cursor:pointer;box-shadow:var(--jk-e-gold);
  transition:transform .16s ease,filter .16s ease;
}
.jkb-new:hover{transform:translateY(-1px);filter:brightness(1.05)}
.jkb-new:active{transform:translateY(0)}
.jkb-new__plus{font-size:var(--jk-fs-lg);line-height:1}

/* /board/ 一覧 ------------------------------------------------------------ */
/* 見出しと「スレッドを立てる」は同じ行（2026-08-27）。
   h1 は Astra の .entry-header ではなく jkck_board_render_list() が
   この行の中に出している（.entry-header は astra_single_layout_one_banner_visibility
   で消してある）。.entry-title を併記しているので字送りは Astra のまま。
   狭いと折り返すので gap は行間にも効く値にしてある。 */
.jkb-archive__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--jk-s-4);
  margin-bottom:var(--jk-s-5);flex-wrap:wrap;
}
.jkb-archive__title{margin:0;line-height:1.25}
.jkb-archive .jkb-new{width:auto;padding:10px var(--jk-s-5);flex:0 0 auto}

.jkb-bar{
  display:flex;flex-direction:column;gap:var(--jk-s-3);
  padding:var(--jk-s-4);margin-bottom:var(--jk-s-5);
  background:var(--jk-paper);border:1px solid var(--jk-line);border-radius:var(--jk-r-md);
}
.jkb-search{display:flex;gap:var(--jk-s-2);align-items:center}
.jkb-search__label{position:absolute;left:-9999px}
.jkb-search__input{
  flex:1 1 auto;min-width:0;padding:10px var(--jk-s-4);
  border:1px solid var(--jk-line-2);border-radius:var(--jk-r-pill);
  background:var(--jk-paper-2);font-family:inherit;font-size:var(--jk-fs-md);color:var(--jk-text);
}
.jkb-search__input:focus{outline:2px solid var(--jk-orange);outline-offset:1px;background:var(--jk-paper)}
.jkb-search__go{
  padding:10px var(--jk-s-5);border:0;border-radius:var(--jk-r-pill);
  background:var(--jk-ink);color:var(--jk-text-inv);
  font-family:inherit;font-size:var(--jk-fs-sm);cursor:pointer;
}
.jkb-result{display:flex;align-items:center;gap:var(--jk-s-3);margin:0;font-size:var(--jk-fs-sm);color:var(--jk-muted)}
.jkb-result__n{font-family:var(--jk-ff-mono);color:var(--jk-text-2)}
body[class] .jkb-result__clear{color:var(--jk-orange-deep)}
.jkb-cats{display:flex;flex-wrap:wrap;gap:6px}

.jkb-list{display:block}
.jkb-pager{display:flex;gap:6px;justify-content:center;margin-top:var(--jk-s-6);flex-wrap:wrap}
.jkb-pager__n,.jkb-pager__prev,.jkb-pager__next{
  padding:6px 12px;border-radius:var(--jk-r-sm);
  border:1px solid var(--jk-line);color:var(--jk-text-2);font-size:var(--jk-fs-sm);
}
.jkb-pager__n.is-on{background:var(--jk-orange);border-color:var(--jk-orange);color:var(--jk-text-inv)}
.jkb-pager__gap{
  display:flex;align-items:center;justify-content:center;
  padding:6px 4px;color:var(--jk-muted);font-size:var(--jk-fs-sm);
}
html.jk-feed-js .jkb-pager{display:none}

/* スレッド詳細 ------------------------------------------------------------ */
.jkb-single__head{margin:var(--jk-s-4) 0 var(--jk-s-5)}
.jkb-single__title{margin:var(--jk-s-3) 0 0;font-size:var(--jk-fs-2xl);line-height:1.4}
body[class] .jkb-back a{color:var(--jk-orange-deep);font-size:var(--jk-fs-sm)}

/* 「掲示板へ戻る」ボタン ---------------------------------------------------
   2026-08-28（依頼）: 13px のテキストリンクでは戻り導線が地に埋もれていた。

   **地（方眼紙 #E0E0E0）の上で一番コントラストが立つのは ink。**
   同じページの主役CTA（返信する・スレッドを立てる）はオレンジなので、
   戻り導線はそちらと色を分ける。差し色のゴールドは矢印のバッジだけに使い、
   ページの中で「戻る」が主役より目立つ事故を避ける。

   詳細度: 上の `body[class] .jkb-back a`（0,2,2）に font-size と color を
   持たれているので、クラスを3つ並べて（0,3,1）勝たせている。
   「編集をやめる」は同じ .jkb-back のままなので、あちらは影響を受けない。 */
body[class] .jkb-back .jkb-back__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  /* 左はバッジ（30px）の分だけ詰める。上下 8px でボタンの外寸は 46px。 */
  padding:8px 22px 8px 8px;
  border-radius:var(--jk-r-pill);
  /* 上を明るく落とす。単色より面に厚みが出る。 */
  background:linear-gradient(180deg,var(--jk-ink-3) 0%,var(--jk-ink-2) 100%);
  color:#FFFFFF;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
  /* 落ち影＋内側のハイライト1本。後者があるとエッジが締まる。 */
  box-shadow:0 6px 16px rgba(11,12,16,.22),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}

.jkb-back__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(160deg,var(--jk-gold) 0%,#D9A250 100%);
  /* 矢印は currentColor で描くので、ここの色がそのまま線の色になる。 */
  color:var(--jk-ink);
  box-shadow:0 2px 6px rgba(11,12,16,.28);
  transition:transform .16s ease;
}
.jkb-back__icon svg{display:block}

/* 押すと戻る、を hover で予告する。矢印だけが左へ滑る。 */
body[class] .jkb-back .jkb-back__btn:hover{
  background:linear-gradient(180deg,#2C313C 0%,var(--jk-ink-3) 100%);
  box-shadow:0 10px 22px rgba(11,12,16,.28),inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateY(-1px);
  color:#FFFFFF;
}
.jkb-back__btn:hover .jkb-back__icon{transform:translateX(-3px)}
body[class] .jkb-back .jkb-back__btn:active{transform:translateY(0);box-shadow:var(--jk-e-1)}

/* 地が濃いのでフォーカスリングはオレンジ。外側に離して輪郭と重ねない。 */
.jkb-back__btn:focus-visible{outline:2px solid var(--jk-orange);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  body[class] .jkb-back .jkb-back__btn,
  .jkb-back__icon{transition:none}
  body[class] .jkb-back .jkb-back__btn:hover{transform:none}
  .jkb-back__btn:hover .jkb-back__icon{transform:none}
}
.jkb-single-page .entry-header{display:none}

.jkb-post{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--jk-s-3);
  padding:var(--jk-s-5);background:var(--jk-paper);
  border:1px solid var(--jk-line);border-radius:var(--jk-r-md);
}
/* 返信は面を持たず、ページの下地（灰）が透けて「背景が無い」ように見えていた。
   親投稿（白）より一段沈んだ面を与え、左の罫線で従属を示す。 */
.jkb-thread{display:flex;flex-direction:column;gap:var(--jk-s-3)}
.jkb-post--reply{
  margin-left:var(--jk-s-5);
  padding:var(--jk-s-4) var(--jk-s-5);
  background:var(--jk-paper-3);
  border:1px solid var(--jk-line);
  border-left:3px solid var(--jk-line-2);
  border-radius:var(--jk-r-md);
}
.jkb-post__main{min-width:0}
.jkb-post__head{display:flex;align-items:center;gap:var(--jk-s-3);flex-wrap:wrap;margin-bottom:var(--jk-s-2)}
.jkb-post__name{font-weight:700;font-size:var(--jk-fs-md)}
.jkb-post__time,.jkb-post__edited{color:var(--jk-muted);font-size:var(--jk-fs-xs)}
.jkb-post__body{max-width:70ch;font-size:var(--jk-fs-md);line-height:1.9;overflow-wrap:anywhere}
body[class] .jkb-post__body a{color:var(--jk-orange-deep);text-decoration:underline}
.jkb-post__gone{color:var(--jk-muted);font-style:italic}

.jkb-post__tools{display:flex;gap:6px;margin-left:auto;opacity:0;transition:opacity .15s ease}
.jkb-toolform{display:flex;gap:6px;margin:0}
body[class] .jkb-tool{text-decoration:none;line-height:1.6}
.jkb-post:hover .jkb-post__tools,
.jkb-post:focus-within .jkb-post__tools{opacity:1}
/* 「編集」は a、「削除」は button。**器が flex なので低いほうが引き伸ばされる**
   （タッチ端末では button に min-height:46px が付くため、a の 編集 が 46px へ）。
   引き伸ばされた a は行ボックスが上に残るので、文字だけ上に寄って見えていた
   （2026-08-27 に修正）。中身を中央に置くのは自分の仕事なので、
   両方を inline-flex にして揃える。 */
.jkb-tool{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 10px;border:1px solid var(--jk-line);border-radius:var(--jk-r-pill);
  background:var(--jk-paper);color:var(--jk-text-2);
  font-family:inherit;font-size:var(--jk-fs-xs);cursor:pointer;
}
.jkb-tool:hover{background:var(--jk-paper-3)}
.jkb-tool--danger{color:var(--jk-danger);border-color:rgba(194,64,27,.3)}
.jkb-post.is-confirm .jkb-tool--danger{background:var(--jk-danger);color:var(--jk-text-inv)}
.jkb-post.is-pending{opacity:.55}
.jkb-post.is-failed{opacity:1;border-left-color:var(--jk-danger);background:#FDECE8}
.jkb-editbar{display:flex;gap:var(--jk-s-2);margin:var(--jk-s-3) 0 0}
.jkb-editing{
  padding:var(--jk-s-5);margin-bottom:var(--jk-s-4);
  background:#FFF6EF;border:1px solid rgba(247,101,3,.3);border-radius:var(--jk-r-md);
}
.jkb-editing .jkb-back{margin:var(--jk-s-3) 0 0}

.jkb-replies__head{margin:var(--jk-s-7) 0 var(--jk-s-4);font-size:var(--jk-fs-xl)}
.jkb-replies__head .jkb-replies__n{
  font-family:var(--jk-ff-mono);color:var(--jk-muted);font-size:var(--jk-fs-md);
  padding:0;background:none;
}

/* 画像 -------------------------------------------------------------------- */
.jkb-post__images{display:flex;flex-wrap:wrap;gap:var(--jk-s-2);margin-top:var(--jk-s-3)}
.jkb-shot{padding:0;border:0;background:none;cursor:zoom-in;line-height:0}
.jkb-shot img{
  width:140px;height:100px;object-fit:cover;
  border-radius:var(--jk-r-sm);border:1px solid var(--jk-line);
  transition:transform .16s ease;
}
.jkb-shot:hover img{transform:scale(1.03)}

.jkb-lightbox{
  border:0;padding:0;background:transparent;max-width:92vw;max-height:92vh;
}
.jkb-lightbox::backdrop{background:rgba(11,12,16,.86)}
.jkb-lightbox img{max-width:92vw;max-height:88vh;border-radius:var(--jk-r-md);display:block}
/* 白い丸に濃い×。写真の明るい隅に重なっても沈まないよう、影と縁で浮かせる。
   padding:0 が要る（Astra の `button` が padding:15px 30px を当てるため）。 */
.jkb-lightbox__close{
  position:absolute;top:12px;right:12px;
  display:grid;place-items:center;
  box-sizing:border-box;width:44px;height:44px;padding:0;
  border:1px solid rgba(11,12,16,.14);border-radius:50%;
  background:#fff;color:var(--jk-ink);
  font-size:26px;line-height:1;cursor:pointer;
  box-shadow:0 2px 12px rgba(11,12,16,.45);
}
/* Astra の `button:focus, button:hover`（0,1,1）は1クラスのセレクタに勝つので、
   フォーカスやホバーで背景が --ast-global-color-1（オレンジ）に化ける。
   2クラス（0,2,0）で受け止めて、見た目を保ったままフォーカスを分かるようにする。 */
.jkb-lightbox__close:hover,
.jkb-lightbox__close:focus{background:#fff;color:var(--jk-orange-deep)}
.jkb-lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* 画像の外はどこを押しても閉じられる、と分かるように。 */
.jkb-lightbox{cursor:zoom-out}
.jkb-lightbox img{cursor:default}

.jkb-dialog .jkck-dialog__close:focus{background:rgba(255,255,255,.2)}
.jkb-dialog .jkck-dialog__close:focus-visible{outline:2px solid var(--jk-gold);outline-offset:2px}

/* フォーム ---------------------------------------------------------------- */
.jkb-reply-box{
  margin-top:var(--jk-s-7);padding:var(--jk-s-5);
  background:var(--jk-paper-2);border:1px solid var(--jk-line);border-radius:var(--jk-r-lg);
}
.jkb-reply-box__title{margin:0 0 var(--jk-s-4);font-size:var(--jk-fs-lg)}
.jkb-field{margin-bottom:var(--jk-s-4)}
.jkb-label{display:block;margin-bottom:6px;font-size:var(--jk-fs-sm);font-weight:700;color:var(--jk-text-2)}
.jkb-req{
  margin-left:6px;padding:1px 6px;border-radius:var(--jk-r-sm);
  background:var(--jk-orange);color:var(--jk-text-inv);font-size:9px;font-weight:400;
}
/* 画像を選ぶと本文は任意になる。JS が hidden を立てるので、既定の [hidden] が
   親テーマに潰されていても消えるように明示しておく。 */
.jkb-req[hidden]{display:none}
.jkb-input,.jkb-select,.jkb-ta{
  width:100%;padding:10px var(--jk-s-3);
  border:1px solid var(--jk-line-2);border-radius:var(--jk-r-sm);
  background:var(--jk-paper);font-family:inherit;font-size:var(--jk-fs-md);color:var(--jk-text);
}
.jkb-ta{min-height:96px;line-height:1.8;resize:none;overflow:hidden}
.jkb-input:focus,.jkb-select:focus,.jkb-ta:focus{outline:2px solid var(--jk-orange);outline-offset:1px}
.jkb-count{margin:4px 0 0;text-align:right;color:var(--jk-muted);font-family:var(--jk-ff-mono);font-size:var(--jk-fs-xs)}

.jkb-drop{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:var(--jk-s-2);
  margin-bottom:var(--jk-s-4);padding:var(--jk-s-6) var(--jk-s-5) var(--jk-s-5);
  text-align:center;
  border:1.5px dashed var(--jk-line-2);border-radius:var(--jk-r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(233,182,103,.10) 0%, rgba(233,182,103,0) 60%),
    var(--jk-paper);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.jkb-drop.is-over{
  border-color:var(--jk-orange);border-style:solid;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(247,101,3,.14) 0%, rgba(247,101,3,0) 65%),
    #FFF6EF;
  box-shadow:0 0 0 4px rgba(247,101,3,.10);
}

/* 絵。ドラッグ中はわずかに持ち上げて「受け取れる」ことを示す。 */
.jkb-drop__art{
  display:grid;place-items:center;
  width:64px;height:64px;margin-bottom:2px;
  border-radius:50%;
  background:linear-gradient(150deg,var(--jk-paper-2) 0%,var(--jk-paper-3) 100%);
  color:var(--jk-gold);
  box-shadow:inset 0 0 0 1px var(--jk-line);
  transition:transform .18s ease,color .18s ease;
}
.jkb-drop.is-over .jkb-drop__art{transform:translateY(-3px) scale(1.04);color:var(--jk-orange)}

.jkb-drop__lead{
  margin:0;color:var(--jk-text);font-size:var(--jk-fs-md);font-weight:700;letter-spacing:.01em;
}

/* 「または」を細い罫線ではさむ。 */
.jkb-drop__or{
  display:flex;align-items:center;gap:var(--jk-s-3);
  width:100%;max-width:260px;margin:2px 0 var(--jk-s-2);
  color:var(--jk-muted);font-size:var(--jk-fs-xs);
}
.jkb-drop__or::before,
.jkb-drop__or::after{content:"";flex:1 1 auto;height:1px;background:var(--jk-line)}

/* 入力欄をボタンの上に透明で重ねる。**クリック対象は input そのもの。**
   label[for] や JS の .click() を経由すると環境によってはファイル選択が
   開かないことがあるため、間接経路を持たない形にしてある。
   見た目は下の .jkb-drop__btn-face が受け持つ。 */
.jkb-drop__btn{
  position:relative;display:inline-flex;
  border-radius:var(--jk-r-pill);
}
.jkb-drop__btn-face{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px var(--jk-s-6);
  border-radius:var(--jk-r-pill);
  background:linear-gradient(120deg,var(--jk-orange) 0%,var(--jk-gold) 150%);
  color:var(--jk-text-inv);font-size:var(--jk-fs-md);font-weight:700;
  box-shadow:var(--jk-e-gold);
  transition:transform .16s ease,filter .16s ease;
}
.jkb-drop__input{
  position:absolute;inset:0;
  width:100%;height:100%;
  margin:0;padding:0;border:0;
  opacity:0;cursor:pointer;
  font-size:0;   /* Safari が中のボタンの実寸で広がるのを防ぐ */
}
.jkb-drop__btn:hover .jkb-drop__btn-face{transform:translateY(-1px);filter:brightness(1.06)}
.jkb-drop__btn:active .jkb-drop__btn-face{transform:translateY(0)}
.jkb-drop__input:focus-visible + .jkb-drop__btn-face,
.jkb-drop__btn:focus-within .jkb-drop__btn-face{outline:2px solid var(--jk-orange-deep);outline-offset:3px}

.jkb-drop__note{margin:var(--jk-s-2) 0 0;color:var(--jk-muted);font-size:var(--jk-fs-xs)}

.jkb-thumbs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--jk-s-2);
  width:100%;margin-top:var(--jk-s-4);padding-top:var(--jk-s-4);
  border-top:1px solid var(--jk-line);
}
.jkb-thumbs:empty{margin:0;padding:0;border:0}
.jkb-thumbs--keep{justify-content:flex-start;margin-top:var(--jk-s-2);padding-top:0;border-top:0}
.jkb-thumb{position:relative;line-height:0}
.jkb-thumb img{width:88px;height:66px;object-fit:cover;border-radius:var(--jk-r-sm)}
.jkb-thumb__zoom{
  display:block;padding:0;border:0;border-radius:var(--jk-r-sm);
  background:none;line-height:0;cursor:zoom-in;
}
/* padding を明示しないと Astra の `button`（padding:15px 30px）が効いて、
   幅と高さを指定していても丸ではなく横長の楕円になる。 */
.jkb-thumb__x{
  position:absolute;top:-7px;right:-7px;
  display:grid;place-items:center;
  box-sizing:border-box;width:24px;height:24px;padding:0;
  border:2px solid var(--jk-paper);border-radius:50%;
  background:var(--jk-ink);color:#fff;
  font-size:13px;line-height:1;cursor:pointer;
}
.jkb-thumb__x:hover,
.jkb-thumb__x:focus{background:var(--jk-danger);color:#fff}

.jkb-form__foot{display:flex;align-items:center;gap:var(--jk-s-3);flex-wrap:wrap}
.jkb-form__hint{margin:0;color:var(--jk-muted);font-size:var(--jk-fs-xs)}
/* 送信の結果を出す帯。ボタンの上、フォームの幅いっぱい。
   2026-08-28: 以前は __foot の中で flex:1 1 auto、13px の薄い墨色だった。
   「Ctrl（⌘）+ Enter で送信」と同じ見た目で並ぶうえ幅も足りず、
   「投稿の間隔が短すぎます」が出ていても気づかれなかった。 */
.jkb-form__msg{
  margin:0 0 var(--jk-s-3);
  padding:10px 14px;
  border-radius:var(--jk-r-sm);
  background:var(--jk-paper-2);
  border:1px solid var(--jk-line);
  color:var(--jk-text-2);
  font-size:var(--jk-fs-md);
  line-height:1.7;
}
/* 何も言うことが無いときは帯ごと消す。枠だけ残ると、空なのに何かある顔になる。 */
.jkb-form__msg:empty{display:none}
/* 配色は既存の chip（セクション5付近）と同じ組み合わせを使う。 */
.jkb-form__msg.is-error{
  background:#FBEDE8;
  border-color:#F0D3C8;
  color:var(--jk-danger);
  font-weight:700;
}
.jkb-form__msg.is-ok{
  background:#EAF3EE;
  border-color:#CBE2D6;
  color:var(--jk-ok);
}
.jkb-submit{
  margin-left:auto;padding:10px var(--jk-s-6);border:0;border-radius:var(--jk-r-pill);
  background:var(--jk-ink);color:var(--jk-text-inv);
  font-family:inherit;font-size:var(--jk-fs-md);font-weight:700;cursor:pointer;
  transition:filter .16s ease;
}
.jkb-submit:hover{filter:brightness(1.25)}
.jkb-submit[disabled]{opacity:.5;cursor:progress}
.jkb-submit--sm{margin:0;padding:6px var(--jk-s-4);font-size:var(--jk-fs-sm)}

.jkb-dialog .jkck-dialog__body{padding-top:var(--jk-s-4)}

/* スケルトン（自動読み込み中） -------------------------------------------- */
html.jk-feed-js .jkb-archive .jk-feed__foot.is-loading::before{
  content:"";display:block;height:84px;margin-top:var(--jk-s-3);
  align-self:stretch;
  border-radius:var(--jk-r-md);
  background:linear-gradient(90deg,var(--jk-paper-3) 25%,var(--jk-paper-2) 37%,var(--jk-paper-3) 63%);
  background-size:400% 100%;
  animation:jkb-shimmer 1.3s ease infinite;
}
@keyframes jkb-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* 動きを抑える -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .jkb-row,.jkb-new,.jkb-shot img,.jkb-post__tools{transition:none}
  .jkb-row:hover,.jkb-new:hover{transform:none}
  html.jk-feed-js .jkb-archive .jk-feed__foot.is-loading::before{animation:none}
}
html.jkb-calm .jkb-row:hover{transform:none}

/* スマホ ------------------------------------------------------------------ */
@media (max-width:767px){
  .jkb-post{padding:var(--jk-s-4);grid-template-columns:32px minmax(0,1fr)}
  .jkb-post__av{width:32px;height:32px;font-size:var(--jk-fs-md)}
  .jkb-post--reply{margin-left:var(--jk-s-3);padding:var(--jk-s-4)}
  .jkb-post__tools{opacity:1}          /* ホバーが無いので常に見せる */
  .jkb-shot img{width:104px;height:78px}
  .jkb-search{flex-wrap:wrap}
  .jkb-search__go{width:100%}
}

/* --------------------------------------------------------------------------
   64. 掲示板の全画面ダイアログ（モバイルのフッターバーから開く）
   2026-08-27

   /column/ は1023px以下で1カラムに落ちるので、掲示板ダイジェストが
   お知らせ20件＋自動読み込みの下に沈む。下端バーの3枚目（セクション47-2）
   からこの器を開いて、そこにダイジェストを流し込む。

   **.jkck-dialog が全画面になるのは 600px 以下だが、バーが出るのは 921px 以下。**
   601〜921px でこの器だけ 680px の箱で中央に浮くとちぐはぐなので、
   921px まで全画面を延長する。

   中身は空で出力され、開いたときに wp_ajax_jkck_board_digest から入る
   （jkck-board-render.php / jkck-board-post.php）。
   -------------------------------------------------------------------------- */
@media (max-width:921px){
  .jkb-board-dialog{
    width:100vw;max-width:100vw;
    height:100dvh;max-height:100dvh;
    border:0;border-radius:0;
  }
  /* .jkck-dialog__inner は max-height しか持たないので、中身が短いと
     縦に伸びない。掲示板がまだ数件のときに本文の地色（paper-2）が途中で
     切れ、ダイアログ自身の地色（paper）が下半分に白い帯として出る。
     器いっぱいに伸ばせば、flex:1 1 auto の本文が最後まで塗る。
     お店登録フォームなど他の器は中身が長く、この指定は要らないので
     .jkb-board-dialog に限って当てる。 */
  .jkb-board-dialog .jkck-dialog__inner{height:100%}
}

/* 本文は tabindex="-1" でフォーカスを受けるが、枠は出さない
   （開いた瞬間に器全体が光ると、何を選んだのか分からなくなる）。 */
.jkb-board-dialog__body:focus{outline:none}
.jkb-board-dialog__body:focus-visible{outline:none}

/* ダイジェストは木の看板ごと返ってくる（セクション67）。板を全面に敷きたい
   ので本文の余白は落とす。中身は板の内側の余白（26% 11% 14%）が受けるので、
   詰まって見えることはない。
   （2026-08-28 まではここで .jkb-digest を素に戻していた。板が同じことを
   するようになったので不要。）

   **板は中身なりの高さなので、そのままだとダイアログの下半分に本文の地色
   （paper-2）が残る**（スレッド2件で板 626px / 本文 749px）。本文を縦の
   flex にして板を伸ばし、全面を木で埋める。__inner は static のままなので
   中身は上詰め、下の帯（葉）は bottom に貼り付くので板の下端は常に画面の
   下端に来る。中身が長いときは flex アイテムが縮まないので、これまでどおり
   本文がスクロールする。 */
.jkb-board-dialog__body{
  padding:0;
  display:flex;
  flex-direction:column;
}
.jkb-board-dialog__body .jkb-board--digest{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.jkb-board-dialog__body .jkb-board__frame{
  flex:1 1 auto;
}

.jkb-board-dialog__state{
  margin:0;padding:var(--jk-s-7) var(--jk-s-4);
  text-align:center;color:var(--jk-muted);
  font-size:var(--jk-fs-md);line-height:1.9;
}
.jkb-board-dialog__state--error{color:var(--jk-danger)}
body[class] .jkb-board-dialog__fallback{
  display:inline-block;margin-top:var(--jk-s-3);
  padding:9px 18px;border-radius:var(--jk-r-pill);
  background:var(--jk-orange);color:var(--jk-text-inv);
  font-size:var(--jk-fs-sm);font-weight:700;text-decoration:none;
}

/* --------------------------------------------------------------------------
   65. PWA 保存案内カードをフッターバーの上へ逃がす
   2026-08-27

   「ホーム画面に追加で“アプリ化”」のカードは Elementor の HTMLウィジェット
   （要素 12b26f3）にインライン style で書かれている。
   `position:fixed; inset:auto 16px 16px 16px` なので画面の下端 16px に貼り付き、
   セクション47-2 のフッターバー（外寸66px）に **50px 潜っていた**
   （実測: カード下端 828px / バー上端 786px、852px 高の画面）。
   最後の行「※以後はホーム画面のアイコンから…」が読めない。

   **ウィジェット本体は触らない。** インライン style が相手なので !important が要る。
   この1行を消せば元どおりになる。

   --jk-fab-bar-h はセクション47-2 の中（921px 以下）でしか定義していない。
   デスクトップでは未定義なので **フォールバックの 0px が必要**。
   これが無いと var() が解決できず bottom が auto に落ちて、
   カードが画面の上へ飛ぶ。
   -------------------------------------------------------------------------- */
#pwa-a2hs-popup{
  bottom:calc(var(--jk-fab-bar-h,0px) + 16px + env(safe-area-inset-bottom,0px)) !important;
}

/* --------------------------------------------------------------------------
   66. /board/ の一覧を木の看板に載せる
   2026-08-27

   元画像 board.jpg（1920x1280）を3枚に切って重ねている。
   **1枚のまま敷くと使い物にならない。** 板の内側で使えるのは画像の
   「幅80% x 高さ47%」だけなので、比率を保ったまま敷くとモバイル（393px幅）で
   投稿を置ける高さが 123px しか残らない（＝1件）。
   そこで **上下の縁と鎖はそのまま、中央の木目だけを縦に繰り返す**。

     board-top.webp  y   0〜 564   鎖・板の上縁・金具   幅の 29.375%
     board-mid.webp  y 564〜 754   繰り返すタイル       幅の  9.896%
     board-bot.webp  y 754〜1280   板の下縁と足元の葉   幅の 27.396%

   **接合部を合わせるために、枠の高さをタイルの整数倍に丸めている。**
   タイルは元画像の連続した帯なので、
     上の帯の最終行(563) → タイルの先頭行(564)      継ぎ目なし
     タイルの最終行(753) → 下の帯の先頭行(754)      継ぎ目なし
   になる。だが repeat-y の位相は要素の上端基準なので、高さを自由にすると
   下側でタイルの途中が下の帯にぶつかり、そこに横線が出る。
   隙間をタイルの整数倍にしておけば両端がぴったり合う。
   タイル同士のつなぎ目（753→564）は板の継ぎ目に見えるので目立たない
   （3枚積んで実物で確認済み）。

   round() 非対応のブラウザ向けに、素の height を先に書いてある
   （後の宣言が構文エラーとして捨てられ、前が生き残る）。

   器を3枚に分けている理由:
     .jkb-board        幅の上限とコンテナ。下の cqw はこの幅を指す
     .jkb-board__frame 木を描く。高さもここ
     .jkb-board__inner 板の内側。**ここだけ**が縦スクロール
   frame と inner を分けないと、スクロールで背景まで一緒に流れる。
   -------------------------------------------------------------------------- */
.jkb-board{
  /* cqw が「板の幅」を指すようにする。自分自身は問い合わせ対象にならないので、
     高さを決める __frame は必ず1段内側に置くこと。 */
  container-type:inline-size;
  /* 広い画面で青天井にしない。下の padding は幅に対する％なので、
     幅が伸びるほど上下の余白も増えて中身の取り分が減ってしまう。
     1120px は 1440px のノートPCでコンテンツ幅（1112px）に届く値。
     絞り込みバーと横幅がそろい、板だけ内側に引っ込んで見えなくなる。 */
  max-width:1120px;
  margin:var(--jk-s-5) auto 0;
}

.jkb-board__frame{
  position:relative;
  /* 帯の実寸。すべて板の幅（cqw）に対する割合で、元画像の切り位置と対。
     ここを触ったら画像も切り直すこと。 */
  --jkw-top:29.375cqw;    /*   0〜 564 / 1920 */
  --jkw-bot:27.396cqw;    /* 754〜1280 / 1920 */
  --jkw-tile:9.8958cqw;   /* 564〜 754 / 1920 */

  /* 並びの先頭が手前。中央タイルは最後（＝一番奥）に置く。
     タイルの位相は「上の帯のすぐ下」に固定する。 */
  background-image:
    url("https://members.jkck.jp/wp-content/uploads/2026/08/board-top.webp"),
    url("https://members.jkck.jp/wp-content/uploads/2026/08/board-bot.webp"),
    url("https://members.jkck.jp/wp-content/uploads/2026/08/board-mid.webp");
  background-position:top center,bottom center,center var(--jkw-top);
  background-size:100% auto,100% auto,100% auto;
  background-repeat:no-repeat,no-repeat,repeat-y;

  /* **高さは中身なり（2026-08-28 の依頼）。** スレッドが増えた分だけ板も
     縦に伸び、ページごと普通にスクロールする。__inner の padding（幅基準の％）
     と中身の高さが、そのままここの高さになる。

     以前は 72svh の固定枠にして、溢れたら __inner だけをスクロールさせていた
     （2026-08-27 の指示）。だが投稿が増えても板が伸びないのは意図と違う、と
     いうことで戻した。固定枠に戻すなら、--jkw-want（出したい高さ）を復活させ、
     height をタイルの整数倍に切り上げる計算に差し替え、__inner を
     position:absolute / inset:0 / overflow-y:auto に戻す。

     **引き換えにタイルの位相は下の帯と合わなくなる**（高さがタイルの整数倍に
     ならないため）。実物で見ると板の継ぎ目にしか見えないので、これでよい。 */
  height:auto;
  /* 中身が短いときに上下の帯が重なって板が潰れるのを防ぐ。最低1枚はタイルを挟む。 */
  min-height:calc(var(--jkw-top) + var(--jkw-bot) + var(--jkw-tile));

  border-radius:var(--jk-r-md);
  overflow:hidden;
  box-shadow:var(--jk-e-2);
}

.jkb-board__inner{
  /* 板の内側。％は包含ブロックの**幅**基準なので、background-size:100% の
     拡大率とぴったり一致する（px で書くと幅が変わった瞬間にずれる）。
       上 26%  … 金具の下端が幅の 24.5%。そのすぐ下から
       左右11% … 板の左端 7.3% / 右端 94.5% の内側
       下 10%  … 板の下端は「枠の下から 7.8%」

     中身の高さがそのまま frame の高さになるので、絶対配置にはしない。
     ここを position:absolute / inset:0 にすると板が伸びなくなる。

     2026-08-27 に「中スクロールの器がタッチを捕まえて画面が動かなくなる」
     （overscroll-behavior:contain の実害）を踏んだが、そもそも中で
     スクロールしなくなったので、その手当てごと不要になった。 */
  padding:26% 11% 10%;
}

/* 板の上では行を「貼り紙」に見せる。白い面はそのままだと木から浮くので、
   影を濃いめにして紙が置かれている感じにする。 */
.jkb-board .jkb-row{
  box-shadow:0 6px 16px rgba(40,24,10,.34);
  border-color:rgba(255,255,255,.6);
}
.jkb-board .jkb-row:hover{box-shadow:0 10px 22px rgba(40,24,10,.42)}

/* 0件のときの案内と、自動読み込みの文字は木の上に直接乗る。
   薄い墨色だと木目に負けるので、白抜きに影を付けて読ませる。 */
.jkb-board .jkb-empty{
  background:rgba(255,255,255,.86);
  border-color:rgba(255,255,255,.7);
  color:var(--jk-text-2);
}
.jkb-board .jk-feed__end,
.jkb-board .jk-feed__status,
.jkb-board .jk-feed__empty{
  color:#FBF3E6;
  text-shadow:0 1px 3px rgba(30,16,6,.75);
}

/* --------------------------------------------------------------------------
   67. /column/ 右カラムの掲示板カードを木の看板に載せる
   2026-08-28

   依頼: 掲示板（/board/）の背景に使っている木の看板を、お知らせページの
   右カラムにある掲示板カードにも。**お知らせの一覧と記事は素のまま**
   （一度そちらへ当てたが、依頼の対象はこのカードだった）。

   **木そのものは作り直していない。** 器は .jkb-board / __frame / __inner を
   そのまま使い回している（セクション66）。木の絵・内側の余白・貼り紙の影は
   あちらが1か所で持っていて、ここは載せ方と木の上での文字色だけを足す。
   マークアップは jkck_news_wood_digest_html()。

   /board/ の一覧と違って**高さは中身なり**にする。ダイジェストは2件で
   固定なので、枠を決めて中でスクロールさせる意味がない。
   -------------------------------------------------------------------------- */

.jkb-board--digest{
  /* 板の上限幅（1120px）と上の余白は /board/ の一覧に合わせた値。
     右カラム（380px）ではどちらも要らない。 */
  max-width:none;
  margin:0;
}

/* 高さを中身なりにする指定は、2026-08-28 に板そのもの（セクション66）へ
   移した。ここで重ねて書く必要はもう無い。 */

/* カードが持っていた面（地色・枠・角丸・余白）は板が引き受ける。 */
.jkb-board--digest .jkb-digest{
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
}

/* 板の下の余白を少し広げる。既定の 10% だと「掲示板をすべて見る」が
   板の絵の下端（枠の下から 7.8%）のすぐ上に来て窮屈だった。
   ％は幅基準なので、右カラム 380px でも1カラムの 350px でも同じ比率で効く。 */
.jkb-board--digest .jkb-board__inner{
  padding-bottom:14%;
}

/* 木の上に直接乗る文字。薄い墨色だと木目に負けるので、白抜きに影を付けて
   読ませる（/board/ の「すべて表示しました」と同じ扱い）。 */
.jkb-board--digest .jkb-digest__title,
.jkb-board--digest .jkb-digest__lede,
.jkb-board--digest .jkb-digest__more{
  color:#FBF3E6;
  text-shadow:0 1px 3px rgba(30,16,6,.75);
}
.jkb-board--digest .jkb-digest__more:hover{color:#FFFFFF}

/* 2026-09-09: 説明文が読みにくいとの指摘（依頼）。**落ち影だけでは足りない。**
   この行が乗る木目は明暗の幅が大きく（実測で輝度 0.004〜0.604）、
   明るい板の上ではクリームとのコントラストが 2.15 まで落ちる。
   **色を差し替えても直らない**（濃色にすると今度は暗い節の上で 1.1 になる。
   どちらへ振っても読めない箇所が残る）。

   なので色ではなく**一字ずつの外側に濃茶の輪郭を回す**。輪郭は文字に付いて
   回るので、下の木目が明るくても暗くてもコントラストは 16.8 で一定になる。
   落ち影は輪郭の外へ広げて残す（板から浮いて見える効果はこちらが担う）。

   8方向の text-shadow で描く。`-webkit-text-stroke` は字の内側を削るので
   16.5px の和文だと画数の多い字がつぶれる（paint-order で回避できるが
   HTML テキストへの対応が browser 間で揃わない）。 */
.jkb-board--digest .jkb-digest__lede{
  text-shadow:
    1px 1px 0 #1E1006, -1px 1px 0 #1E1006,
    1px -1px 0 #1E1006, -1px -1px 0 #1E1006,
    1px 0 0 #1E1006, -1px 0 0 #1E1006,
    0 1px 0 #1E1006, 0 -1px 0 #1E1006,
    0 2px 5px rgba(30,16,6,.85);
}

/* 「掲示板をすべて見る」の上の区切り線は、地が白い前提の薄さで木の上では
   ほとんど見えない。濃くしても板に引いた白線にしか見えないので落とす。
   白抜きの文字と余白だけで、行の切れ目は十分に伝わる。 */
.jkb-board--digest .jkb-digest__more{
  border-top:0;
  padding-top:var(--jk-s-4);
}

/* カテゴリのチップも同じ理由で、面と枠を白側へ寄せる。 */
.jkb-board--digest .jkb-chip{
  background:rgba(255,255,255,.88);
  border-color:rgba(255,255,255,.7);
  color:var(--jk-text-2);
}
.jkb-board--digest .jkb-chip:hover{
  background:#FFFFFF;
  border-color:#FFFFFF;
}

/* スレッドの行（白い貼り紙の影）と「まだ書き込みがありません」は、
   セクション66 の .jkb-board 配下の指定がそのまま効くので何も足さない。 */

/* =====================================================================
   68. /column/ の一覧は左カラムの中だけでスクロールする
   =====================================================================
   依頼（2026-08-29）: お知らせ一覧の上下スクロールをブラウザ全体ではなく、
   ヘッダー・フッター・掲示板を除いた「画面左側の枠」の中に閉じる。

   器は3枚。.jkcol__main（画面に貼り付いて高さを決める）/ .jkn（縦 flex で
   高さを流す）/ .jkn-scroll（ここだけ overflow-y:auto）。
   絞り込みバー（.jkn-filter）は枠の外に残す。枠の中に入れると下まで送った
   ときに検索とタグが見えなくなる（/board/ で同じ失敗をしている）。

   2カラムのときだけ効かせる。1023px 以下は1カラムに崩れ、921px 以下は
   掲示板が消える（セクション63）ので、そこで枠に閉じ込めても画面が
   狭くなるだけになる。
   ===================================================================== */

@media (min-width:1024px){

  /* 右カラム（.jkcol__side）と同じ高さから始める。89px はヘッダーの実測値で、
     セクション52・63 と同じ数字（テーマ側に高さの変数が無い）。
     下は 24px（--jk-s-5）空けて画面の底に貼り付かせない。 */
  .jkcol__main{
    position:sticky;
    top:calc(var(--wp-admin--admin-bar--height,0px) + 89px + var(--jk-s-5));
    height:calc(100svh - var(--wp-admin--admin-bar--height,0px) - 89px - var(--jk-s-5) * 2);
    display:flex;
    flex-direction:column;
  }

  /* 高さは全段 flex で流す。min-height:0 を入れないと flex アイテムの既定
     （min-height:auto）で中身の高さまで押し広げられ、枠が画面からはみ出す。 */
  .jkcol__main > .jkn{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  .jkcol__main .jkn-filter{
    flex:0 0 auto;
  }

  .jkcol__main .jkn-scroll{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    /* position:relative は必須。番兵の隣にいる .jk-feed__status（読み上げ用の
       1px、position:absolute）の包含ブロックが sticky な .jkcol__main になり、
       枠でクリップされずにページの overflow へ漏れる。実測でフッターの下に
       1,670px の空白ができていた（docH 3289 → 1617）。 */
    position:relative;
    /* スクロールバーの出入りで中身が横に動かないよう、幅を先に確保する。
       overscroll-behavior は既定（auto）のまま。contain にすると中身が
       短いときにホイールがこの器で止まる（セクション66 の実害）。 */
    scrollbar-gutter:stable;

    /* 面にする（依頼 2026-09-07）。地（#E0E0E0 ＋ 方眼紙）の上にカードが
       直接並んでいて、どこからどこまでが動く領域なのか分からなかった。
       セクション43 の3段（地／面／カード）に合わせて白い紙を敷き、枠で
       スクロール域の輪郭を見せる。右カラムの木の看板と対になる。
       縁は --jk-line だと白い面のまわりで地に溶けるので --jk-line-2。 */
    background:var(--jk-paper);
    border:1px solid var(--jk-line-2);
    border-radius:var(--jk-r-md);
    /* カード自身が上下 16px・左右 8px 持っているので、面の内側は 8px/12px
       だけ足して 24px / 20px 相当にする。右はスクロールバーが出る側。 */
    padding:var(--jk-s-2) var(--jk-s-3);
  }

  /* ホバーの --jk-paper-2（#F7F8FA）は白い面の上ではほぼ見えない。
     セクション43 の「白地前提の値は1段上げる」と同じ扱いで #EDEFF3 にする。 */
  .jkcol__main .jkn-card:hover{background:var(--jk-paper-3)}

  /* 面の底に罫線が1本残らないようにする。自動読み込みで増えても
     last-child は常に最後のカードなので、そのまま追随する。 */
  .jkcol__main .jkn-list .jkn-card:last-child{border-bottom:0}

  /* 番兵（自動読み込みの引き金）は「枠の可視域に入ったら次を読む」で動く。
     IntersectionObserver の rootMargin は root＝ビューポートにしか効かず、
     内側スクロールのクリップには届かないので、600px の先読みを番兵自身の
     大きさでつくる（tabs-block.php の { rootMargin:'600px 0px' } と同じ量）。

     位置をずらす（position:relative; top:-600px）ではだめだった。枠の高さは
     500px 前後しかないので、600px 上げると番兵が枠の外に出てしまい、
     いつまでも交差せず自動読み込みが止まる。高さで作れば枠より大きくても
     必ず一部が枠に入る。占有する高さは -600 + 600 = 0 なので、
     「もっと見る」の位置は動かない。 */
  .jkcol__main .jk-feed__sentinel{
    display:block;
    flex:0 0 auto;
    height:600px;
    margin-top:-600px;
    /* 記事カードの上に600px 重なる。透明なので見えないが、
       これが無いとカードのクリックを奪う。 */
    pointer-events:none;
  }
}

/* =====================================================================
   69. 資料PDFの全ページを見る全画面ビューア（商品詳細）
   =====================================================================
   依頼（2026-09-12）: 商品詳細の資料画像はPDFの1ページ目しか出ていない。
   クリックしたら全ページを全画面でスライドさせたい。

   中身は pdf-preview-block.php が焼いたページ画像を並べた <dialog>。
   送りは scroll-snap に任せる（スワイプも慣性も止まり方もブラウザのものに
   なるので、JS で位置を計算しない）。矢印は scrollBy を呼ぶだけ。

   dialog は既定で幅が中身なり・中央寄せなので、全画面にするには
   width / max-width / height / max-height を4つとも指定する。
   どれか1つでも既定のままだと画面の端に余白が残る。
   ===================================================================== */

/* クリックできることを見た目に出す。画像そのものは WooCommerce の
   ギャラリーなので、こちらは印だけ付ける。 */
.woocommerce-product-gallery.jkck-pdfp-has .woocommerce-product-gallery__image a,
.woocommerce-product-gallery.jkck-pdfp-has .woocommerce-product-gallery__image img{
  cursor:zoom-in;
}

/* 注意: この3つのボタン（開く・閉じる・送り）は、Astra の
   「.menu-toggle, button, .ast-button, …」という長大なボタン規則と
   詳細度が並ぶ（どちらも 0,1,0）。素の状態は後から読まれるこちらが勝つが、
   :hover / :focus は向こうが 0,1,1 で上回る。実際、開いた直後に
   showModal が当てるフォーカスだけで閉じるボタンがオレンジになった。
   状態側は必ずクラス2つ以上（0,2,x）で書くこと。 */

.jkck-pdfp-open{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin:12px 0 0;
  padding:8px 16px;
  border:1px solid #c9ccd1;
  border-radius:999px;
  background:#fff;
  color:#333;
  font-size:14px;
  line-height:1.4;
  box-shadow:none;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.jkck-pdfp-open::before{
  content:"⤢";
  font-size:15px;
  line-height:1;
}
.jkck-pdfp-has .jkck-pdfp-open:hover,
.jkck-pdfp-has .jkck-pdfp-open:focus{
  background:#f4f5f7;
  border-color:#9aa0a6;
  color:#333;
  box-shadow:none;
}
.jkck-pdfp-has .jkck-pdfp-open:focus-visible{
  outline:2px solid #a03f01;
  outline-offset:2px;
}

/* ---- ビューア本体 ---------------------------------------------------- */

dialog.jkck-pdfp{
  width:100vw;
  max-width:100vw;
  height:100dvh;
  max-height:100dvh;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  background:#1b1b1d;
  color:#fff;
}
dialog.jkck-pdfp::backdrop{
  background:rgba(0,0,0,.92);
}

/* 上のバー。画像の上に重ねる（画像側で padding-top を取って逃がす）。 */
.jkck-pdfp__bar{
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}
.jkck-pdfp__count{
  font-size:14px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.jkck-pdfp__close{
  pointer-events:auto;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:24px;
  line-height:1;
  box-shadow:none;
  cursor:pointer;
}
dialog.jkck-pdfp .jkck-pdfp__close:hover,
dialog.jkck-pdfp .jkck-pdfp__close:focus{
  background:rgba(255,255,255,.28);
  color:#fff;
  box-shadow:none;
}
dialog.jkck-pdfp .jkck-pdfp__close:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* ---- ページの並び ---------------------------------------------------- */

.jkck-pdfp__track{
  position:absolute;
  inset:0;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.jkck-pdfp__track::-webkit-scrollbar{ display:none; }
.jkck-pdfp__track:focus{ outline:none; }

.jkck-pdfp__page{
  flex:0 0 100%;
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 上はバー、左右は矢印のぶんを空ける。 */
  padding:52px 64px 20px;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
.jkck-pdfp__page img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  background:#fff;
  box-shadow:0 2px 24px rgba(0,0,0,.5);
}

/* ---- 送りの矢印 ------------------------------------------------------ */

.jkck-pdfp__nav{
  position:absolute;
  z-index:2;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:64px;
  padding:0;
  border:0;
  border-radius:6px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:30px;
  line-height:1;
  box-shadow:none;
  cursor:pointer;
}
dialog.jkck-pdfp .jkck-pdfp__nav:hover,
dialog.jkck-pdfp .jkck-pdfp__nav:focus{
  background:rgba(255,255,255,.26);
  color:#fff;
  box-shadow:none;
}
dialog.jkck-pdfp .jkck-pdfp__nav:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}
.jkck-pdfp__nav--prev{ left:8px; }
.jkck-pdfp__nav--next{ right:8px; }

/* スマホは指で送るほうが早い。矢印を出すと画像が細くなるだけなので
   小さくして端に寄せ、ページの左右パディングも詰める。 */
@media (max-width:600px){
  .jkck-pdfp__page{ padding:48px 8px 16px; }
  .jkck-pdfp__nav{
    width:34px;
    height:48px;
    font-size:24px;
    background:rgba(255,255,255,.10);
  }
  .jkck-pdfp__nav--prev{ left:2px; }
  .jkck-pdfp__nav--next{ right:2px; }
}


/* =====================================================================
   70. 詳細ページの本文とパンくずを2倍にする
   =====================================================================
   依頼（2026-09-13）: /learning-videos/ と /shop/ の詳細ページで、
   **本文の文章とパンくずだけ**を2倍にする。
   タイトル・価格・進捗バー・レッスン一覧・タブの見出し・ボタン・
   ヘッダー・フッター・右端CTA は素のまま。

   はじめ「ヘッダー・フッター込みで全部2倍」で作ったが、範囲を絞る指示が
   出たので作り直した。全部倍にすると入れ物側の手当てが芋づるで要る
   （ヘッダーの統一幅 --jk-nav-item-w、モバイル下端バーの高さ、Elementor
   フッターの行送り）が、**この範囲ならどれも要らない**。本文の器は
   まわりに影響しないので、器に1行当てるだけで済む。
   全部倍にするときの勘所はメモ（jkck-font-scale-page）に残した。

   どちらも「本文の器」に1行当てるだけで済む。中身は文章だけなので、
   器ごと倍にすれば文章だけが倍になり、将来そこに箇条書きや小見出しが
   入っても一緒に追従する。行送りはどちらも倍率指定（コース 1.85 /
   商品 1.85em）なので、文字サイズに自動で追いつく。

   ・コース詳細 … LearnDash の `.ld-tab-bar__panel`
                  （中身はアイキャッチ画像と説明文の <p>）
   ・商品詳細   … WooCommerce の「説明」タブ
                  `.woocommerce-Tabs-panel--description`

   素の本文はどちらも 15px で、Astra の 544px 段だけ 14.5px に落ちる。
   倍にした 30px / 29px もその段で切り替える。
   ===================================================================== */

body.single-sfwd-courses .learndash-wrapper .ld-tab-bar__panel,
body.single-product .woocommerce-Tabs-panel--description{font-size:30px}

@media (max-width:544px){
  body.single-sfwd-courses .learndash-wrapper .ld-tab-bar__panel,
  body.single-product .woocommerce-Tabs-panel--description{font-size:29px}
}

/* パンくず（course-nav-block.php）。素は3段とも 13px なので1回でよい。
   **商品詳細にパンくずは無い。** shop-urls-block.php が
   woocommerce_get_breadcrumb を空配列にして、is_shop() / is_product() では
   <nav> ごと出さないようにしてある（2026-08-25）。倍にする対象が無い。 */
body.single-sfwd-courses .jk-cnav{font-size:26px}