/* japan-japan.com 運営者情報の4ページ（mu-plugins/jj-about.php）。角丸0・影0・書体は --sans・差し色は赤 #d10a11
   動きは日本の題材だけ：1 日の丸がのぼる 2 判子を押す 3 新幹線が駅名標の線路を走る 4 路線図を電車が走る
   5 切符に改札ばさみと確認の判子 6 招き猫が手招きする 7 見出しの下に筆の線が引かれる 8 部品が下から出る（サイトの .rise と同じ値）
   読む文字は動かさない。隠すのは html.jja-js のときだけ（JS が無くても全部見える） */
.jja{--jr:#d10a11;--jr2:#a80009;--jcream:#fdfdf6;--jsand:#f3efe7;--jline:#e6e2dc;--jgrey:#5a5a5a}
.jja-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 頭：駅名標 ── */
.jja-hero{background:#fff;border-bottom:1px solid var(--jline);overflow:hidden}
.jja-hero__in{max-width:1180px;margin:0 auto;padding:36px 24px 44px}
.jja-sign{max-width:860px;margin:0 auto}
.jja-hero--about .jja-hero__in{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.jja-hero--about .jja-sign{max-width:none;margin:0;min-width:0}
.jja-photo{position:relative;width:min(280px,74vw);aspect-ratio:1/1;margin:0 auto}
.jja-sun{position:absolute;left:6%;top:1%;width:88%;aspect-ratio:1/1;border-radius:50%;background:var(--jr)}
.jja-photo__img{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;max-width:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%),linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 82%,transparent 100%),linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);mask-composite:intersect}
.jja-hanko{position:absolute;right:-5%;bottom:-4%;width:27%;height:auto;transform:rotate(-7deg)}
.jja-sign__top{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.jja-num{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border:4px solid var(--jr);background:#fff;color:#111;font-family:var(--sans);line-height:1}
.jja-num b{font-size:13px;font-weight:800;letter-spacing:.04em}
.jja-num i{margin-top:3px;font-style:normal;font-size:20px;font-weight:800}
.jja-sign__line{font:700 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--jgrey)}
.jja-sign__h{margin:0;font-family:var(--sans);font-weight:800;color:#000}
.jja-sign__k{display:block;margin:0 0 6px;font:700 14px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--jr)}
.jja-sign__name{display:block;font-weight:800;font-size:clamp(38px,10.6vw,64px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.jja-hero--about .jja-sign__name{font-size:clamp(42px,11.6vw,76px);line-height:1.05}
html:not([lang^="en"]) .jja-sign__name{letter-spacing:0}
.jja-sign__read{margin:10px 0 0;font:500 17px/1.5 var(--sans);letter-spacing:.04em;color:var(--jgrey)}
.jja-sign__role{margin:4px 0 0;font:700 17px/1.5 var(--sans);color:#111}
.jja-track{position:relative;height:32px;margin-top:22px;overflow:hidden;border-bottom:3px solid #111}
.jja-trainbox{position:absolute;left:0;right:0;bottom:0;height:28px}
.jja-train{position:absolute;left:10px;bottom:0;width:168px;height:28px;display:block}
.jja-band{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 12px;background:var(--jr);color:#fff}
.jja .jja-st{display:inline-flex;align-items:center;gap:6px;min-height:52px;min-width:0;color:#fff;font:700 13px/1.25 var(--sans);text-decoration:none;word-break:keep-all}
@media(min-width:600px){.jja-band{gap:36px;padding:0 14px}.jja .jja-st{gap:8px;font-size:15px}}
.jja .jja-st:hover,.jja .jja-st:focus-visible{text-decoration:underline;text-underline-offset:4px}
.jja-st--next{margin-left:auto;text-align:right}
.jja-here{display:none;position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;border:5px solid #111;box-sizing:border-box}
@media(min-width:600px){.jja-here{display:block}}
.jja-facts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;margin:24px 0 0;padding:0;border-top:1px solid var(--jline)}
.jja-facts li{margin:0;padding:14px 0 12px;border-bottom:1px solid var(--jline)}
.jja-n{display:block;font:800 40px/1 var(--sans);letter-spacing:-.02em;color:#000;font-variant-numeric:tabular-nums}
.jja-facts span{display:block;margin-top:6px;font:500 14px/1.45 var(--sans);color:var(--jgrey)}
.jja-dek{max-width:640px;margin:22px 0 0;font:400 18px/1.6 var(--sans);color:#131313}
.jja-upd{margin:10px 0 0;font:500 11px/14px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#747474}
@media(min-width:900px){
  .jja-hero__in{padding:60px 40px 64px}
  .jja-hero--about .jja-hero__in{grid-template-columns:380px minmax(0,1fr);gap:64px;align-items:center}
  .jja-photo{width:380px}
  .jja-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .jja-n{font-size:46px}
}

/* ── 本文 ── */
.jja .jja-main{padding-top:44px;padding-bottom:72px}
.jja .jja-body{display:block;max-width:640px;margin:0 auto}
.jja .jja-body h2{position:relative;padding-bottom:16px}
.jja .jja-body h2::after{content:"";position:absolute;left:-2px;bottom:0;width:104px;height:10px;transform-origin:left center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7C10 3 22 2 40 3s50-2 76 1c3 1 2 4-1 5-20 2-45 0-70 2-18 1-32 1-42-1-2-1-3-2-1-3z' fill='%23d10a11'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.jja .jja-body .jja-wide{width:calc(100vw - 48px);max-width:1040px;margin:28px 0 36px calc(50% - min(520px,50vw - 24px))}
@media(min-width:900px){.jja .jja-body .jja-wide{width:calc(100vw - 96px);margin-left:calc(50% - min(520px,50vw - 48px))}}

/* 路線図 */
.jja .jja-body .jja-routes{background:var(--jcream);padding:22px 18px 16px;box-sizing:border-box}
.jja-routes svg{display:block;width:100%;height:auto;margin:0 auto}
.jja-routes svg text{font-family:var(--sans)}
.jja-routes__w{display:none!important}
.jja-routes__t{max-width:400px}
.jja .jja-body .jja-routes figcaption{margin-top:12px;font:500 14px/1.5 var(--sans);color:var(--jgrey);text-align:center}
@media(min-width:760px){.jja-routes__w{display:block!important}.jja-routes__t{display:none!important}.jja .jja-body .jja-routes{padding:28px 32px 20px}}

/* 切符 */
.jja-tickets{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.jja-ticket{position:relative;min-width:0;overflow:hidden;padding:16px 18px 22px 28px;background:var(--jsand);background-image:repeating-linear-gradient(135deg,rgba(209,10,17,.06) 0 2px,transparent 2px 9px)}
.jja-ticket::before{content:"";position:absolute;left:11px;top:0;bottom:0;border-left:2px dashed #b9b1a3}
.jja-ticket__head{display:flex;justify-content:space-between;gap:8px;font:700 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#6b6457}
.jja .jja-body .jja-ticket__n{display:block;margin-top:12px;font:800 44px/1 var(--sans);letter-spacing:-.02em;color:var(--jr)}
.jja .jja-body .jja-ticket__h{margin:10px 0 6px;font:800 20px/1.3 var(--sans);color:#000}
.jja .jja-body .jja-ticket__p{margin:0;font:400 15.5px/1.65 var(--sans);color:#222}
.jja-punch{position:absolute;right:28px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff}
.jja-ticket .jja-stamp{position:absolute;right:14px;top:38px;width:72px;height:72px;transform:rotate(-12deg);opacity:.92}
@media(min-width:760px){.jja-tickets{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}

/* ほかのサイト（次の路線の駅名標） */
.jja .jja-body a.jja-sister{display:block;margin:28px 0 36px;padding:20px 20px 0;background:#fff;border:1px solid #111;color:#111;text-decoration:none}
.jja-sister__k{display:block;font:700 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jgrey)}
.jja-sister__row{display:flex;align-items:center;gap:12px;margin-top:12px}
.jja-num--kd{border-color:#1d4f9c}
.jja-sister__name{font:800 30px/1.2 var(--sans);color:#000}
.jja-sister__read{display:block;margin-top:8px;font:500 15px/1.5 var(--sans);letter-spacing:.04em;color:var(--jgrey)}
.jja-sister__d{display:block;margin-top:10px;font:400 16px/1.65 var(--sans);color:#222}
.jja-sister__band{display:flex;justify-content:space-between;align-items:center;min-height:48px;margin:18px -20px 0;padding:0 16px;background:#1d4f9c;color:#fff;font:700 15px/1 var(--sans)}
.jja-sister__band span:last-child{transition:transform .2s}
.jja-sister:hover .jja-sister__band span:last-child{transform:translateX(5px)}

/* 招き猫とボタン */
.jja-cat{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 20px 30px;background:var(--jcream);text-align:center;box-sizing:border-box}
.jja-neko{display:block;width:150px;height:auto;flex:none}
.jja-paw{transform-box:view-box;transform-origin:147px 152px}
.jja-bell{transform-box:view-box;transform-origin:100px 146px}
.jja .jja-body a.jja-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 16px;box-sizing:border-box;background:var(--jr);color:#fff;font:800 16px/1.3 var(--sans);text-decoration:none}
@media(min-width:420px){.jja .jja-body a.jja-btn{gap:10px;padding:14px 26px;font-size:17px}}
.jja .jja-body a.jja-btn:hover,.jja .jja-body a.jja-btn:focus-visible{background:var(--jr2)}
.jja .jja-body .jja-cat__body p{margin:12px 0 0;font:400 15px/1.6 var(--sans);color:var(--jgrey)}
@media(min-width:760px){.jja-cat{flex-direction:row;justify-content:center;gap:44px;padding:30px 40px 32px;text-align:left}.jja-neko{width:170px}}

/* 出どころの順番（縦の路線） */
.jja-vline{position:relative}
.jja .jja-body .jja-vline ol{list-style:none;margin:0;padding:0}
.jja .jja-body .jja-vline li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;margin:0;padding:0 0 24px}
.jja .jja-body .jja-vline li:last-child{padding-bottom:0}
.jja .jja-body .jja-vline li:not(:nth-last-child(-n+2))::before{content:"";position:absolute;z-index:0;left:19px;top:22px;bottom:-22px;width:6px;background:var(--jr)}
.jja-stn{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;box-sizing:border-box;background:#fff;border:5px solid var(--jr);font:800 17px/1 var(--sans);color:#111}
.jja .jja-body .jja-vline h3{margin:8px 0 4px;font:800 19px/1.3 var(--sans);color:#000}
.jja .jja-body .jja-vline p{margin:0;font:400 15.5px/1.65 var(--sans);color:#222}
.jja-vline__x .jja-stn{border-color:#8a8a8a;color:#8a8a8a}
.jja .jja-body .jja-vline__x h3,.jja .jja-body .jja-vline__x p{color:var(--jgrey)}
.jja-vtrain{position:absolute;left:14px;top:48px;width:16px;height:calc(var(--jja-vh,104px) - 78px);z-index:2;pointer-events:none;display:none}
.jja-vtrain i{position:absolute;left:0;top:0;width:16px;height:26px;box-sizing:border-box;background:#fff;border:3px solid #111}
.jja-vtrain i::after{content:"";position:absolute;left:2px;right:2px;top:4px;height:6px;background:#1b2a4a}

/* AI の使い方（横の路線） */
.jja-flow{background:var(--jcream);padding:28px 12px 22px;box-sizing:border-box;overflow:hidden}
.jja-flow__in{position:relative}
.jja .jja-body .jja-flow ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0}
.jja-flow__in::before{content:"";position:absolute;z-index:0;left:12.5%;right:12.5%;top:19px;height:6px;background:var(--jr)}
.jja .jja-body .jja-flow li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:0 4px;text-align:center}
.jja-flow li>span{font:700 13px/1.4 var(--sans);color:#111;word-break:keep-all;overflow-wrap:anywhere}
.jja-flow .jja-stamp{position:absolute;left:50%;top:-22px;width:54px;height:54px;margin-left:10px;transform:rotate(-12deg);opacity:.92;z-index:4}
.jja-ftrain{position:absolute;left:calc(12.5% + 26px);right:calc(12.5% + 54px);top:11px;height:22px;z-index:2;pointer-events:none;display:none}
.jja-ftrain i{position:absolute;left:0;top:0;width:28px;height:22px;box-sizing:border-box;background:#fff;border:3px solid #111}
.jja-ftrain i::after{content:"";position:absolute;left:3px;right:3px;top:3px;height:6px;background:#1b2a4a}
@media(min-width:760px){.jja-flow{padding:32px 24px 26px}.jja-flow li>span{font-size:16px}}

/* ── 動き（JS が動いていて、動きを減らす設定でないときだけ） ── */
@keyframes jja-sun{from{transform:scale(.3);opacity:.25}to{transform:none;opacity:1}}
@keyframes jja-stamp{0%{transform:rotate(-18deg) scale(2.1);opacity:0}55%{transform:rotate(-7deg) scale(.9);opacity:1}78%{transform:rotate(-7deg) scale(1.05)}100%{transform:rotate(-7deg) scale(1);opacity:1}}
@keyframes jja-stamp-h{0%{transform:rotate(-18deg) scale(1.7);opacity:.2}55%{transform:rotate(-7deg) scale(.92);opacity:1}100%{transform:rotate(-7deg) scale(1);opacity:1}}
@keyframes jja-stamp-r{0%{transform:rotate(-26deg) scale(2);opacity:0}60%{transform:rotate(-12deg) scale(.9);opacity:.92}100%{transform:rotate(-12deg) scale(1);opacity:.92}}
@keyframes jja-stamp-rh{0%{transform:rotate(-26deg) scale(1.6);opacity:.2}60%{transform:rotate(-12deg) scale(.92);opacity:.92}100%{transform:rotate(-12deg) scale(1);opacity:.92}}
@keyframes jja-run{0%{transform:translateX(0)}36%,100%{transform:translateX(calc(100% + 190px))}}
@keyframes jja-punch{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes jja-paw{0%,50%,100%{transform:rotate(0)}12%,36%{transform:rotate(-20deg)}24%{transform:rotate(-2deg)}}
@keyframes jja-bell{0%,50%,100%{transform:rotate(0)}12%{transform:rotate(10deg)}24%{transform:rotate(-8deg)}36%{transform:rotate(5deg)}}
@keyframes jja-vrun{0%{transform:translateY(0)}72%,100%{transform:translateY(100%)}}
@keyframes jja-frun{0%{transform:translateX(0)}72%,100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:no-preference){
  .jja-js .jja-sun{animation:jja-sun .9s cubic-bezier(.2,.8,.2,1) both}
  .jja-js .jja-hanko{animation:jja-stamp .55s cubic-bezier(.3,1.3,.5,1) .85s both}
  .jja-js .jja-photo:hover .jja-hanko{animation:jja-stamp-h .45s cubic-bezier(.3,1.3,.5,1) both}
  .jja-js .jja-train{left:auto;right:100%}
  .jja-js .jja-on .jja-trainbox{animation:jja-run 11s cubic-bezier(.35,.05,.3,1) .9s infinite}
  .jja-js .jja-rise{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
  .jja-js .jja-rise.jja-in{opacity:1;transform:none}
  .jja-js .jja-body h2::after{transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .jja-js .jja-body h2.jja-in::after{transform:none}
  .jja-js .jja-punch{transform:scale(0)}
  .jja-js .jja-in .jja-punch{animation:jja-punch .3s cubic-bezier(.3,1.7,.5,1) .55s both}
  .jja-js .jja-ticket:nth-child(2).jja-in .jja-punch{animation-delay:.75s}
  .jja-js .jja-ticket:nth-child(3).jja-in .jja-punch{animation-delay:.95s}
  .jja-js .jja-ticket .jja-stamp,.jja-js .jja-flow .jja-stamp{opacity:0}
  .jja-js .jja-ticket.jja-in .jja-stamp{animation:jja-stamp-r .5s cubic-bezier(.3,1.3,.5,1) 1.35s both}
  .jja-js .jja-flow.jja-in .jja-stamp{animation:jja-stamp-r .5s cubic-bezier(.3,1.3,.5,1) 1s both}
  .jja-js .jja-ticket.jja-in:hover .jja-stamp{animation:jja-stamp-rh .45s cubic-bezier(.3,1.3,.5,1) both}
  .jja-js .jja-on .jja-paw{animation:jja-paw 3.4s ease-in-out .4s infinite}
  .jja-js .jja-on .jja-bell{animation:jja-bell 3.4s ease-in-out .4s infinite}
  .jja-js .jja-vtrain,.jja-js .jja-ftrain{display:block}
  .jja-js .jja-on .jja-vtrain{animation:jja-vrun 7s cubic-bezier(.4,0,.3,1) .6s infinite}
  .jja-js .jja-on .jja-ftrain{animation:jja-frun 6s cubic-bezier(.4,0,.3,1) .6s infinite}
}
@media(prefers-reduced-motion:reduce){.jja-dot{display:none}}
html:not(.jja-js) .jja-dot{display:none}