@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ（事務長AI / jimucho-ai.jp）
    Version: 1.1.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
   事務長AI ── サイト独自のデザイン（CEO 2026-09-05）
   ここから下が追記ぶん。上のヘッダーは消さないこと。
   ========================================================= */

:root{
  --ja-navy:#0b2a44;
  --ja-navy-2:#123a5e;
  --ja-cyan:#22d3ee;
  --ja-blue:#3b82f6;
  --ja-violet:#7c6cf3;
  --ja-ink:#0f172a;
  --ja-mute:#44566b;  /* 2026-09-21 #5b6b7f(5.45:1)から。白地で7.51:1。オーナー「色が薄くて見にくい」 */
  --ja-line:rgba(148,178,204,.28);
  --ja-bg-soft:#f5f8fb;
  --ja-radius:16px;
  --ja-shadow:0 18px 50px -22px rgba(11,42,68,.45);
}

/* ---------- 1. 動く背景（ヒーロー） ---------- */
.ja-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#08203a 0%,#0b2a44 45%,#123a5e 100%);
  color:#fff;
  isolation:isolate;
}
.ja-hero::before{
  content:"";
  position:absolute; inset:-40% -20%;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(34,211,238,.36), transparent 62%),
    radial-gradient(34% 38% at 78% 30%, rgba(124,108,243,.34), transparent 62%),
    radial-gradient(42% 46% at 55% 82%, rgba(59,130,246,.30), transparent 64%);
  filter:blur(28px);
  animation:ja-drift 22s ease-in-out infinite alternate;
  z-index:-2;
}
.ja-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(78% 68% at 50% 42%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(78% 68% at 50% 42%,#000 30%,transparent 100%);
  z-index:-1;
}
@keyframes ja-drift{
  0%   {transform:translate3d(0,0,0) scale(1);}
  50%  {transform:translate3d(2.5%,-2%,0) scale(1.06);}
  100% {transform:translate3d(-2.5%,2.5%,0) scale(1.03);}
}
@media (prefers-reduced-motion:reduce){
  .ja-hero::before{animation:none;}
}

/* ---------- 2. 文字まわり ---------- */
.ja-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:12.5px; letter-spacing:.16em; font-weight:700;
  padding:.5em 1.1em; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ja-hero h1,.ja-hero h2{ letter-spacing:.01em; }
.ja-grad{
  background:linear-gradient(96deg,var(--ja-cyan) 0%,#8ab4ff 48%,var(--ja-violet) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.ja-lead{ color:rgba(255,255,255,.86); }

/* ---------- 3. ボタン ---------- */
.ja-btn .wp-block-button__link,
a.ja-btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:700; border-radius:999px;
  padding:1em 2.2em;
  background:linear-gradient(96deg,var(--ja-cyan),var(--ja-blue) 60%,var(--ja-violet));
  color:#04121f !important; border:0;
  box-shadow:0 12px 30px -12px rgba(34,211,238,.8);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.ja-btn .wp-block-button__link:hover,a.ja-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px -14px rgba(34,211,238,.9);
  filter:brightness(1.06);
}
.ja-btn-ghost .wp-block-button__link{
  border-radius:999px; padding:1em 2.2em; font-weight:700;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  color:#fff !important;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .22s ease, transform .22s ease;
}
.ja-btn-ghost .wp-block-button__link:hover{
  background:rgba(255,255,255,.18) !important; transform:translateY(-2px);
}

/* ---------- 4. カード（ガラス／白） ---------- */
.ja-glass .wp-block-column,
.ja-glass.wp-block-column{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--ja-radius);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.ja-cards .wp-block-column{
  background:#fff;
  border:1px solid var(--ja-line);
  border-radius:var(--ja-radius);
  box-shadow:0 10px 34px -24px rgba(11,42,68,.5);
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.ja-cards .wp-block-column:hover{
  transform:translateY(-5px);
  border-color:rgba(34,211,238,.55);
  box-shadow:0 26px 54px -26px rgba(11,42,68,.55);
}
.ja-cards .wp-block-column h3{
  position:relative; padding-left:.85em;
}
.ja-cards .wp-block-column h3::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--ja-cyan),var(--ja-violet));
}

/* ---------- 5. 「面倒 → 自動」のビフォーアフター ---------- */
.ja-flow{ display:grid; gap:18px; grid-template-columns:1fr auto 1fr; align-items:stretch; }
@media (max-width:781px){ .ja-flow{ grid-template-columns:1fr; } }
.ja-flow__box{
  border-radius:var(--ja-radius); padding:22px 24px; border:1px solid var(--ja-line);
}
.ja-flow__box h4{ margin:0 0 12px; font-size:15px; letter-spacing:.04em; }
.ja-flow__box ul{ margin:0; padding-left:1.1em; font-size:14px; line-height:2; }
.ja-flow__before{ background:#fbfcfd; color:var(--ja-mute); }
/* 🔴 取り消し線はやめた。院長の今のやり方を否定して見えるため（Codex指摘 2026-09-05） */
.ja-flow__before li{ list-style:none; position:relative; padding-left:1.4em; }
.ja-flow__before li::before{
  content:""; position:absolute; left:0; top:.72em; width:12px; height:1.5px;
  background:#a9b6c4;
}
.ja-flow__before ul{ padding-left:0; }
.ja-flow__after{
  background:linear-gradient(160deg,#0b2a44,#123a5e); color:#fff; border-color:transparent;
  box-shadow:var(--ja-shadow);
}
.ja-flow__after li{ color:rgba(255,255,255,.92); }
.ja-flow__arrow{
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--ja-cyan);
  animation:ja-nudge 1.9s ease-in-out infinite;
}
@media (max-width:781px){ .ja-flow__arrow{ transform:rotate(90deg); } }
@keyframes ja-nudge{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(6px);} }
@media (max-width:781px){
  @keyframes ja-nudge{ 0%,100%{transform:rotate(90deg) translateX(0);} 50%{transform:rotate(90deg) translateX(6px);} }
}

/* ---------- 6. スクロールで浮かび上がる ---------- */
/* 🔴 JSが動かないときは、隠さない。
   .ja-js は main.js の先頭で <html> に付く。付いていなければ最初から見える。 */
.ja-js .ja-reveal{ opacity:0; transform:translateY(22px); }
.ja-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.ja-reveal.d1.is-in{ transition-delay:.08s; }
.ja-reveal.d2.is-in{ transition-delay:.16s; }
.ja-reveal.d3.is-in{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  .ja-reveal{ opacity:1; transform:none; }
}

/* ---------- 7. 節の見出し ---------- */
.ja-sec-ttl{ text-align:center; }
.ja-sec-ttl::after{
  content:""; display:block; width:56px; height:3px; margin:14px auto 0; border-radius:3px;
  background:linear-gradient(90deg,var(--ja-cyan),var(--ja-violet));
}
.ja-soft{ background:var(--ja-bg-soft); }

/* ---------- 8. 数字 ---------- */
.ja-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:781px){ .ja-stats{ grid-template-columns:1fr; } }
.ja-stat{
  text-align:center; padding:22px 16px; border-radius:var(--ja-radius);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ja-stat__num{ font-size:38px; font-weight:800; line-height:1.1; }
.ja-stat__label{ font-size:12.5px; opacity:.82; margin-top:6px; letter-spacing:.06em; }

/* ---------- 9. 細かい調整 ---------- */
.ja-hero .wp-block-buttons{ margin-top:34px; }
.l-content .alignfull{ margin-top:0; }
.ja-note{ font-size:12.5px; color:rgba(255,255,255,.62); }

/* ---------- 10. 3つの事実（数字の帯の代わり） ---------- */
.ja-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:781px){ .ja-facts{ grid-template-columns:1fr; } }
.ja-fact{
  padding:24px 22px; border-radius:var(--ja-radius); text-align:left;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ja-fact__k{
  display:block; margin-bottom:10px;
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  color:var(--ja-cyan);
}
.ja-fact__t{ margin:0; font-size:14px; line-height:1.95; color:rgba(255,255,255,.9); }
.ja-fact__t strong{ color:#fff; }

/* ---------- 11. トップの上の余白を詰める（ヒーローをヘッダーに付ける） ---------- */
.home .l-content{ padding-top:0 !important; margin-top:0 !important; }
.home .l-mainContent__inner{ padding-top:0 !important; }
.home .post_content > .alignfull:first-child{ margin-top:0 !important; }
/* 🔴 全幅はSWELLが元々やっている。自前で上書きすると逆に崩れた（2026-09-05 実測） */


/* =========================================================
   Codexの指摘を受けた手直し（2026-09-05）
   ========================================================= */

/* ---------- 12. スマホで窮屈にならないように ---------- */
.ja-hero h1{ font-size:clamp(26px, 6.2vw, 44px) !important; line-height:1.45 !important; }
.ja-hero h2{ font-size:clamp(22px, 5.2vw, 30px) !important; }
.ja-sec-ttl{ font-size:clamp(21px, 4.8vw, 30px) !important; }
.ja-hero .ja-lead{ font-size:clamp(14px, 3.6vw, 16px) !important; }
.ja-cards .wp-block-column h3{ font-size:clamp(15.5px, 4vw, 17px) !important; }
/* 日本語をきれいに折る */
.ja-hero, .ja-flow, .ja-facts, .ja-cards{
  font-feature-settings:"palt" 1;
  line-break:strict; word-break:normal; overflow-wrap:anywhere;
}

/* ---------- 13. コントラストを確かなものに ---------- */
.ja-lead{ color:#dbe7f2; }          /* 半透明をやめて実色に */
.ja-note{ color:#a9c0d4; }
.ja-fact__t{ color:#e3edf6; }
.ja-flow__after li{ color:#e3edf6; }
.ja-flow__before{ color:#4a5a6b; }

/* ---------- 14. 色の階層を決める ---------- */
/* シアン＝いちばん大事なところだけ。紫は装飾の下支えに回す */
.ja-sec-ttl::after{ background:var(--ja-cyan); width:40px; height:2px; }
.ja-cards .wp-block-column h3::before{ background:var(--ja-cyan); }

/* ---------- 15. 6つの悩みを、流し読みできる連番の一覧に ---------- */
.ja-list{ counter-reset:ja-n; border-top:1px solid var(--ja-line); }
.ja-list__item{
  counter-increment:ja-n;
  display:grid; grid-template-columns:auto 1fr; gap:0 20px;
  padding:22px 4px; border-bottom:1px solid var(--ja-line);
  transition:background .25s ease;
}
.ja-list__item:hover{ background:rgba(34,211,238,.05); }
.ja-list__item::before{
  content:counter(ja-n,decimal-leading-zero);
  font-size:13px; font-weight:800; letter-spacing:.08em;
  color:var(--ja-cyan); padding-top:.35em;
}
.ja-list__ttl{ margin:0 0 6px; font-size:clamp(15.5px,4vw,17.5px); font-weight:700; color:var(--ja-ink); }
.ja-list__txt{ margin:0; font-size:14px; line-height:1.95; color:var(--ja-mute); }
@media (max-width:600px){
  .ja-list__item{ gap:0 14px; padding:18px 2px; }
}

/* ---------- 16. 左揃えにして、視線の起点を作る ---------- */
.ja-left .ja-sec-ttl{ text-align:left; }
.ja-left .ja-sec-ttl::after{ margin-left:0; margin-right:auto; }

/* ---------- 17. ヒーローは、スクロール監視に頼らずCSSだけで出す ---------- */
/* 🔴 いちばん上の画面は「必ず出る」ことが最優先。
   IntersectionObserver が動かない状況（裏タブ・古い端末・JS遅延）でも消えないようにする */
.ja-js .ja-hero .ja-reveal{
  opacity:0; transform:translateY(20px);
  animation:ja-in .85s cubic-bezier(.22,.61,.36,1) .05s forwards;
}
.ja-js .ja-hero .ja-reveal.d1{ animation-delay:.18s; }
.ja-js .ja-hero .ja-reveal.d2{ animation-delay:.32s; }
.ja-js .ja-hero .ja-reveal.d3{ animation-delay:.46s; }
@keyframes ja-in{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .ja-js .ja-hero .ja-reveal{ opacity:1; transform:none; animation:none; }
}

/* ---------- 18. SWELL既定の見出し装飾を、このサイトでは使わない ---------- */
/* 🔴 SWELLは h2 に「紺のベタ塗り＋二重線」を付ける設定になっていた。
   自前のデザインと二重になって重くなるので、ここで完全に外す（2026-09-05 実測） */
.post_content h2.ja-sec-ttl,
.post_content .ja-hero h1,
.post_content .ja-hero h2,
.post_content .ja-hero h3,
.post_content .ja-list__ttl{
  background:none !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.post_content h2.ja-sec-ttl::before,
.post_content .ja-hero h1::before,
.post_content .ja-hero h2::before,
.post_content .ja-hero h1::after,
.post_content .ja-hero h2::after{
  content:none !important; display:none !important;
}
/* 見出しの下線だけ、自前のものを描き直す */
.post_content h2.ja-sec-ttl::after{
  content:"" !important; display:block !important;
  width:40px; height:2px; margin:16px auto 0;
  background:var(--ja-cyan) !important;
  border:0 !important; border-radius:2px;
}
.ja-left .ja-sec-ttl::after{ margin-left:0 !important; margin-right:auto !important; }

/* 明るい帯の見出しは濃い文字／暗い帯の見出しは白 */
.post_content h2.ja-sec-ttl{ color:var(--ja-ink) !important; }
.ja-hero h2.ja-sec-ttl,
.ja-hero h1, .ja-hero h2{ color:#fff !important; }

/* カード内の h3 もSWELLの装飾を外す */
.ja-cards .wp-block-column h3{
  background:none !important; border:0 !important; padding:0 0 0 .85em !important;
  box-shadow:none !important;
}
.ja-cards .wp-block-column h3::after{ content:none !important; }

/* ---------- 19. 線画アイコン（SVG） ---------- */
.ja-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ja-ico, .ja-pipe__ico{
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
/* 悩み一覧のアイコン */
.ja-list__item{ grid-template-columns:auto auto 1fr; }
.ja-list__item .ja-ico{
  width:34px; height:34px; color:var(--ja-accent-ink,#1d5b78);
  margin-top:.1em; opacity:.85;
  transition:color .25s ease, transform .25s ease;
}
.ja-list__item:hover .ja-ico{ color:#0e7c96; transform:translateY(-2px); }
@media (max-width:600px){
  .ja-list__item{ grid-template-columns:auto 1fr; gap:0 12px; }
  .ja-list__item .ja-ico{ display:none; }
}

/* ---------- 20. 撮る → AIが読む → 画面に並ぶ ---------- */
.ja-pipe{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center; gap:10px; margin:0 auto 44px; max-width:820px;
}
.ja-pipe__step{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:26px 14px; border-radius:var(--ja-radius);
  border:1px solid var(--ja-line); background:#fff; color:#1d5b78;
  text-align:center;
}
.ja-pipe__step.-ai{
  background:linear-gradient(160deg,#0b2a44,#123a5e); color:#fff; border-color:transparent;
  box-shadow:var(--ja-shadow);
}
.ja-pipe__step.-ai .ja-pipe__ico{ color:var(--ja-cyan); }
.ja-pipe__ico{ width:44px; height:44px; }
.ja-pipe__t{ font-size:13.5px; font-weight:700; letter-spacing:.02em; }
.ja-pipe__arrow{ display:flex; gap:5px; align-items:center; justify-content:center; }
.ja-pipe__arrow span{
  width:6px; height:6px; border-radius:50%; background:var(--ja-cyan);
  animation:ja-dot 1.5s ease-in-out infinite;
}
.ja-pipe__arrow span:nth-child(2){ animation-delay:.2s; }
.ja-pipe__arrow span:nth-child(3){ animation-delay:.4s; }
@keyframes ja-dot{ 0%,100%{opacity:.25; transform:scale(.8);} 50%{opacity:1; transform:scale(1.15);} }
@media (max-width:781px){
  .ja-pipe{ grid-template-columns:1fr; gap:6px; }
  .ja-pipe__arrow{ transform:rotate(90deg); padding:4px 0; }
}
@media (prefers-reduced-motion:reduce){ .ja-pipe__arrow span{ animation:none; opacity:.7; } }

/* ---------- 21. お問い合わせフォーム ---------- */
.ja-form__row{ display:block; margin:0 0 22px; }
.ja-form__row label{
  display:block; margin-bottom:8px;
  font-size:14px; font-weight:700; color:var(--ja-ink);
}
.ja-req, .ja-any{
  display:inline-block; margin-left:8px; padding:.18em .6em;
  font-size:11px; font-weight:700; letter-spacing:.06em; border-radius:3px;
  vertical-align:2px;
}
.ja-req{ background:#e0f5fa; color:#0e6f88; }
.ja-any{ background:#f0f2f5; color:#7a8794; }
.ja-form input[type=text],
.ja-form input[type=email],
.ja-form input[type=tel],
.ja-form select,
.ja-form textarea{
  width:100%; padding:14px 16px; font-size:16px;   /* 16px未満だとiPhoneが勝手に拡大する */
  border:1px solid var(--ja-line); border-radius:8px;
  background:#fff; color:var(--ja-ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ja-form input:focus, .ja-form select:focus, .ja-form textarea:focus{
  outline:none; border-color:var(--ja-cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.22);
}
.ja-form textarea{ min-height:120px; resize:vertical; }
.ja-form__note{ font-size:13.5px; margin:26px 0 22px; }
.ja-form__note a{ text-decoration:underline; }
.ja-form__submit{ text-align:center; margin:0; }
.ja-form input[type=submit]{
  appearance:none; border:0; cursor:pointer;
  padding:1.05em 3.2em; border-radius:999px;
  font-size:16px; font-weight:800; letter-spacing:.04em;
  color:#04121f;
  background:linear-gradient(96deg,var(--ja-cyan),var(--ja-blue) 60%,var(--ja-violet));
  box-shadow:0 12px 30px -12px rgba(34,211,238,.8);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ja-form input[type=submit]:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.ja-form input[type=submit]:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
/* CF7の案内文 */
.wpcf7-response-output{
  margin:24px 0 0 !important; padding:14px 18px !important;
  border-radius:8px !important; font-size:14px; line-height:1.8;
}
.wpcf7-not-valid-tip{ font-size:12.5px; margin-top:6px; }

/* ---------- 22. ヒーローの写真（2026-09-05 オーナー提供・ChatGPT作） ---------- */
/* トップのヒーローだけ写真を敷く。文字が読めるよう、上から紺を重ねる */
.home .ja-hero:first-of-type{
  background-image:
    linear-gradient(180deg, rgba(8,32,58,.78) 0%, rgba(11,42,68,.86) 55%, rgba(18,58,94,.92) 100%),
    url("/wp-content/uploads/2026/09/hero-clinic.jpg");
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
}
/* 写真の上ではグリッドを薄くする（うるさくなるため） */
.home .ja-hero:first-of-type::after{ opacity:.45; }
@media (max-width:781px){
  .home .ja-hero:first-of-type{ background-position:62% 45%; }
}


/* =========================================================
   記事の視覚部品（2026-09-05）
   ========================================================= */


/* ---------- A. 記事の頭の帯（アイキャッチの代わり） ---------- */
.ja-post-hero{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:22px;
  padding:30px 28px; margin:0 0 34px;
  border-radius:14px;
  background:linear-gradient(135deg,#08203a,#0b2a44 55%,#123a5e);
  color:#fff;
}
.ja-post-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(70% 80% at 78% 50%,#000 10%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 80% at 78% 50%,#000 10%,transparent 100%);
}
.ja-post-hero__ico{
  flex:0 0 auto; width:56px; height:56px;
  fill:none; stroke:#22d3ee; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ja-post-hero__cat{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.18em;
  color:#7fe3f5; margin-bottom:6px;
}
.ja-post-hero__t{ margin:0; font-size:clamp(15px,3.6vw,17px); font-weight:700; line-height:1.7; }
@media (max-width:600px){
  .ja-post-hero{ padding:22px 20px; gap:16px; }
  .ja-post-hero__ico{ width:42px; height:42px; }
}

/* ---------- B. 帯グラフ（構成比） ---------- */
.ja-bars{ margin:30px 0; }
.ja-bars__row{ margin:0 0 14px; }
.ja-bars__head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13.5px; margin-bottom:6px;
}
.ja-bars__name{ font-weight:700; color:#132526; }
.ja-bars__val{ font-weight:800; color:#0e6f88; font-variant-numeric:tabular-nums; }
.ja-bars__track{ height:12px; border-radius:999px; background:#eef2f5; overflow:hidden; }
.ja-bars__fill{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#3b82f6);
  width:0; transition:width 1.1s cubic-bezier(.22,.61,.36,1);
}
.ja-bars.is-in .ja-bars__fill{ width:var(--w,0%); }
.ja-bars__note{ font-size:12px; color:#44566b; margin-top:10px; line-height:1.8; }
@media (prefers-reduced-motion:reduce){
  .ja-bars__fill{ transition:none; width:var(--w,0%); }
}

/* ---------- C. 手順の流れ（横／スマホは縦） ---------- */
.ja-steps{
  display:grid; gap:0; margin:30px 0;
  grid-auto-flow:column; grid-auto-columns:1fr;
  border:1px solid #d9e2e8; border-radius:12px; overflow:hidden;
}
.ja-steps__i{
  padding:20px 14px; text-align:center; background:#fff;
  border-right:1px solid #e6edf1; position:relative;
}
.ja-steps__i:last-child{ border-right:0; }
.ja-steps__n{
  display:inline-block; width:24px; height:24px; line-height:24px; border-radius:50%;
  background:#0b2a44; color:#fff; font-size:12px; font-weight:800; margin-bottom:10px;
}
.ja-steps__t{ font-size:13.5px; font-weight:700; color:#132526; line-height:1.6; }
.ja-steps__d{ font-size:12px; color:#44566b; margin-top:6px; line-height:1.8; }
.ja-steps__i.-hi{ background:linear-gradient(160deg,#0b2a44,#123a5e); }
.ja-steps__i.-hi .ja-steps__t{ color:#fff; }
.ja-steps__i.-hi .ja-steps__d{ color:#c9dced; }
.ja-steps__i.-hi .ja-steps__n{ background:#22d3ee; color:#04121f; }
@media (max-width:781px){
  .ja-steps{ grid-auto-flow:row; }
  .ja-steps__i{ border-right:0; border-bottom:1px solid #e6edf1; }
  .ja-steps__i:last-child{ border-bottom:0; }
}

/* ---------- D. 階段（勤続年数と付与日数など） ---------- */
.ja-stair{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  align-items:end; gap:8px; margin:30px 0 8px; min-height:190px;
}
.ja-stair__c{ text-align:center; }
.ja-stair__b{
  display:block; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#3b82f6,#0b2a44);
  height:var(--h,20%); min-height:14px;
}
.ja-stair__c.-hi .ja-stair__b{ background:linear-gradient(180deg,#22d3ee,#0e7c96); }
.ja-stair__v{ font-size:13px; font-weight:800; color:#0e6f88; margin-bottom:6px; font-variant-numeric:tabular-nums; }
.ja-stair__l{ font-size:11.5px; color:#44566b; margin-top:8px; line-height:1.5; }
@media (max-width:600px){ .ja-stair{ min-height:150px; gap:4px; } .ja-stair__l{ font-size:10px; } }

/* ---------- E. 内訳（大きい数字＋割合） ---------- */
.ja-split{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0; }
@media (max-width:600px){ .ja-split{ grid-template-columns:1fr; } }
.ja-split__i{
  padding:20px 16px; border-radius:12px; border:1px solid #d9e2e8; background:#fff; text-align:center;
}
.ja-split__n{ font-size:26px; font-weight:800; color:#0b2a44; line-height:1.2; font-variant-numeric:tabular-nums; }
.ja-split__k{ font-size:12.5px; font-weight:700; color:#0e6f88; margin-top:8px; }
.ja-split__d{ font-size:12px; color:#44566b; margin-top:6px; line-height:1.8; }

/* ---------- F. 図の下の出典（必ず付ける） ---------- */
.ja-src{
  font-size:11.5px; color:#6b7c8c; line-height:1.9;
  margin:-18px 0 30px; padding-left:1em; border-left:2px solid #dfe7ec;
}
.ja-src a{ color:#0e6f88; text-decoration:underline; }

/* ---------- G. 図まわりの共通 ---------- */
.ja-fig{ margin:34px 0; }
.ja-fig__t{
  font-size:13px; font-weight:800; letter-spacing:.06em; color:#0e6f88;
  margin:0 0 14px; padding-left:.7em; border-left:3px solid #22d3ee;
}

/* ---------- 23. イラスト（透過PNG） ---------- */
/* 🔴 最初 JPEGに変換して透過を白で潰し、さらに画面いっぱいに出して大きすぎた。
   透過PNGのまま、幅を抑えて本文の中に置く（2026-09-05 オーナー指摘） */
.ja-illust{
  margin:8px auto 34px;
  max-width:min(680px, 100%);
  padding:0 20px;
}
.ja-illust img{ display:block; width:100%; height:auto; }
.ja-illust__cap{
  margin:14px 0 0; text-align:center;
  font-size:13px; color:#44566b; line-height:1.9;
}

/* ---------- 24. 「うちは、どうだろう」チェックリスト ---------- */
.ja-check{ margin-top:34px; }
.ja-check__list{ list-style:none; margin:0; padding:0; }
.ja-check__list li{ margin:0 0 10px; }
.ja-check__i{
  display:flex; align-items:flex-start; gap:14px; width:100%;
  padding:17px 20px; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--ja-line); border-radius:12px;
  font-size:15px; line-height:1.7; color:var(--ja-ink);
  transition:border-color .2s ease, background .2s ease, transform .12s ease;
  font-family:inherit;
}
.ja-check__i:hover{ border-color:rgba(34,211,238,.6); }
.ja-check__i:active{ transform:scale(.995); }
.ja-check__box{
  flex:0 0 auto; width:22px; height:22px; margin-top:.1em;
  border:2px solid #c2d1dc; border-radius:6px; position:relative;
  transition:background .2s ease, border-color .2s ease;
}
.ja-check__i.is-on{ border-color:#0e7c96; background:#f0fbfe; }
.ja-check__i.is-on .ja-check__box{ background:#0e7c96; border-color:#0e7c96; }
.ja-check__i.is-on .ja-check__box::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(42deg);
}
.ja-check__out{
  margin-top:26px; padding:28px 24px; border-radius:14px; text-align:center;
  background:linear-gradient(160deg,#0b2a44,#123a5e); color:#fff;
  box-shadow:var(--ja-shadow);
}
.ja-check__count{ font-size:40px; font-weight:800; line-height:1.1; color:var(--ja-cyan); }
.ja-check__count small{ font-size:16px; color:#b9d3e6; margin-left:4px; font-weight:700; }
.ja-check__msg{ margin:14px 0 0; font-size:15px; line-height:2; color:#e3edf6; }
.ja-check__cta{ margin-top:22px; }
@media (max-width:600px){
  .ja-check__i{ padding:15px 16px; font-size:14.5px; gap:12px; }
}

/* ---------- 25. できること（6つの束） ---------- */
.ja-grid6{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px;
}
@media (max-width:900px){ .ja-grid6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .ja-grid6{ grid-template-columns:1fr; } }
.ja-g{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--ja-line); border-radius:14px;
  padding:26px 24px 24px;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.ja-g:hover{
  transform:translateY(-5px); border-color:rgba(34,211,238,.55);
  box-shadow:0 24px 48px -28px rgba(11,42,68,.5);
}
.ja-g::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--ja-cyan),var(--ja-violet));
  transform:scaleX(0); transform-origin:left; transition:transform .32s ease;
}
.ja-g:hover::after{ transform:scaleX(1); }
.ja-g__ico{
  width:38px; height:38px; display:block; margin-bottom:14px;
  fill:none; stroke:#1d5b78; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .26s ease;
}
.ja-g:hover .ja-g__ico{ stroke:#0e9dbb; }
.ja-g__t{
  margin:0 0 10px; font-size:17px; font-weight:800; color:var(--ja-ink);
  background:none !important; border:0 !important; padding:0 !important;
}
.ja-g__t::before, .ja-g__t::after{ content:none !important; }
.ja-g__d{ margin:0; font-size:13.5px; line-height:1.95; color:var(--ja-mute); }
.ja-g__d strong{ color:var(--ja-ink); }

/* ---------- 26. できないこと ---------- */
.ja-cant{ margin-top:34px; display:grid; gap:12px; }
.ja-cant__i{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding:20px 22px; border-radius:12px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:14px; line-height:1.95; color:#e3edf6;
}
.ja-cant__i strong{ color:#fff; }
.ja-cant__x{
  width:22px; height:22px; margin-top:.15em; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); position:relative; flex:0 0 auto;
}
.ja-cant__x::before, .ja-cant__x::after{
  content:""; position:absolute; left:4px; top:8.5px; width:10px; height:2px;
  background:rgba(255,255,255,.75); border-radius:2px;
}
.ja-cant__x::before{ transform:rotate(45deg); }
.ja-cant__x::after{ transform:rotate(-45deg); }

/* ---------- 27. 算定の診断（問い合わせの理由をつくる帯） ---------- */
.ja-offer{
  position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:linear-gradient(140deg,#06192e 0%,#0b2a44 45%,#10344f 100%);
}
.ja-offer::before{
  content:""; position:absolute; inset:-35% -15%; z-index:-2;
  background:
    radial-gradient(40% 44% at 18% 24%, rgba(34,211,238,.30), transparent 62%),
    radial-gradient(36% 40% at 84% 34%, rgba(124,108,243,.26), transparent 62%);
  filter:blur(30px); animation:ja-drift 26s ease-in-out infinite alternate;
}
.ja-offer::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(80% 70% at 50% 40%,#000 25%,transparent 100%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000 25%,transparent 100%);
}
@media (prefers-reduced-motion:reduce){ .ja-offer::before{ animation:none; } }

.ja-offer__grid{
  display:grid; grid-template-columns:1fr auto 1fr; gap:18px;
  align-items:stretch; margin-top:42px;
}
@media (max-width:781px){ .ja-offer__grid{ grid-template-columns:1fr; } }
.ja-offer__col{
  padding:26px 24px; border-radius:14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.ja-offer__col.-out{
  background:linear-gradient(160deg, rgba(34,211,238,.16), rgba(124,108,243,.14));
  border-color:rgba(34,211,238,.42);
  box-shadow:0 20px 46px -26px rgba(34,211,238,.7);
}
.ja-offer__k{
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  color:var(--ja-cyan); margin-bottom:14px;
}
.ja-offer__ul{ margin:0 0 14px; padding-left:1.2em; }
.ja-offer__ul li{ font-size:14.5px; line-height:2; color:#e3edf6; }
.ja-offer__ul li::marker{ color:var(--ja-cyan); }
.ja-offer__ul strong{ color:#fff; }
.ja-offer__note{ margin:0; font-size:12.5px; line-height:1.95; color:#a9c0d4; }
.ja-offer__note strong{ color:#e3edf6; }
.ja-offer__arrow{
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--ja-cyan);
  animation:ja-nudge 2s ease-in-out infinite;
}
@media (max-width:781px){ .ja-offer__arrow{ transform:rotate(90deg); padding:2px 0; } }

/* 安心の3点 */
.ja-safe{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:30px; }
@media (max-width:781px){ .ja-safe{ grid-template-columns:1fr; } }
.ja-safe__i{
  display:flex; align-items:center; gap:12px;
  padding:15px 18px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  font-size:13.5px; line-height:1.6; color:#e3edf6;
}
.ja-safe__c{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--ja-cyan); position:relative;
}
.ja-safe__c::after{
  content:""; position:absolute; left:6.5px; top:3.5px; width:5px; height:9px;
  border:solid #04121f; border-width:0 2.2px 2.2px 0; transform:rotate(42deg);
}

/* =========================================================
   28. 値を揃える（2026-09-05）
   🔴 3度「ださい」と言われた原因のひとつは、値がバラバラだったこと。
   　 余白・角丸・影・色の階層を、ここで一本化する。
   ========================================================= */
:root{
  /* 余白は8の倍数だけ使う */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:40px; --sp-6:56px; --sp-7:80px; --sp-8:96px;
  /* 角丸は3段だけ */
  --r-s:8px; --r-m:14px; --r-l:999px;
  /* 影は2段だけ */
  --sh-1:0 10px 30px -22px rgba(11,42,68,.45);
  --sh-2:0 24px 52px -28px rgba(11,42,68,.55);
  /* 🔵 紫は「装飾のグラデーションの端」だけに使う。単独では使わない */
  --ja-accent:var(--ja-cyan);
}

/* 角丸を3段に寄せる */
.ja-fact, .ja-offer__col, .ja-cant__i, .ja-post-hero,
.ja-check__out, .ja-split__i, .ja-pipe__step, .ja-illust img{ border-radius:var(--r-m); }
.ja-cards .wp-block-column, .ja-g, .ja-check__i, .ja-steps, .ja-fig img{ border-radius:var(--r-m); }
.ja-form input[type=text], .ja-form input[type=email], .ja-form input[type=tel],
.ja-form select, .ja-form textarea{ border-radius:var(--r-s); }

/* 影を2段に寄せる */
.ja-cards .wp-block-column{ box-shadow:var(--sh-1); }
.ja-cards .wp-block-column:hover, .ja-g:hover{ box-shadow:var(--sh-2); }
.ja-flow__after, .ja-offer__col.-out, .ja-check__out{ box-shadow:var(--sh-2); }

/* 🔵 見出しの下線は、紫を混ぜずシアン1色に（どこが大事かを1色で示す） */
.ja-sec-ttl::after{ background:var(--ja-cyan) !important; }
.ja-cards .wp-block-column h3::before{ background:var(--ja-cyan) !important; }
.ja-g::after{ background:linear-gradient(90deg,var(--ja-cyan),#5aa8ff) !important; }

/* 本文の行間を1つに揃える（1.9 / 1.95 / 2.0 が混在していた） */
.ja-g__d, .ja-list__txt, .ja-fact__t, .ja-offer__ul li,
.ja-cant__i, .ja-steps__d{ line-height:1.95; }

/* セクション内の最初と最後の余白を殺す（帯の高さが揃わない原因） */
.wp-block-group > *:first-child{ margin-top:0; }
.wp-block-group > *:last-child{ margin-bottom:0; }