@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&family=Noto+Serif+JP:wght@500;600;700&display=swap");
:root{
  --ink:#101b25;--navy:#112a41;--muted:#66737c;--line:#d9e0e4;
  --paper:#f6f8f9;--white:#fff;--blue:#dce8ef;--ease:cubic-bezier(.2,.75,.2,1);
  /* カスタマイザー「デザイン（色・文字サイズ）」で上書きされる初期値 */
  --fs-heading:1;--fs-body:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:"Noto Sans JP",sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
::selection{background:var(--navy);color:#fff}

/* HEADER */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  display:flex;
  align-items:center;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(16,27,37,.08)
}
.logo{width:auto;flex:none;display:flex;align-items:center}
.logo-sub{white-space:nowrap}
.logo-sub{font-weight:700}
.nav{display:flex;margin-left:auto;font-weight:700}
.nav a{position:relative;padding:9px 0}
.nav a{white-space:nowrap;flex:none}
.nav a:after{content:"";position:absolute;left:0;bottom:3px;width:0;height:1px;background:var(--ink);transition:.35s}
.nav a:hover:after{width:100%}
.menu{border:0;border-radius:50%;background:var(--navy);color:#fff;cursor:pointer}

/* HERO */
.hero-title{
  position:absolute;
  font-family:"Noto Serif JP",serif;
  font-weight:600;
  font-size:calc(clamp(54px,8.2vw,148px) * var(--fs-heading));
  line-height:.98;
  letter-spacing:-.1em
}
.hero-title .small{
  display:block;
  font-family:"Noto Sans JP";
  font-weight:800
}
.hero-title .brand-line{display:block}
.season{
  position:absolute;inset:0;background-position:center;background-size:cover;
  opacity:0;transform:scale(1.06);transition:opacity 1.6s var(--ease),transform 6s linear
}
.season.active{opacity:1;transform:scale(1)}
.hero-message{
  position:absolute
}
.hero-message h1{
  margin:0;
  font-weight:800
}
.hero-message p{margin:18px 0 0}
.dot{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid var(--navy);background:#fff;cursor:pointer}
.dot.active{background:var(--navy)}
.scroll{position:absolute;font-size:calc(8px * var(--fs-body));letter-spacing:.22em}
.scroll:after{content:"";display:block;height:28px;width:1px;margin:8px auto 0}

/* COMMON */
.section{padding:120px 4.2vw}
.kicker{font-size:calc(9px * var(--fs-body));letter-spacing:.2em;font-weight:800;color:var(--muted);margin-bottom:16px}
.h2{
  font-family:"Noto Serif JP",serif;font-weight:600;font-size:calc(clamp(42px,6.4vw,105px) * var(--fs-heading));
  line-height:1;letter-spacing:-.09em;margin:0;color:var(--navy)
}
.lead{font-size:calc(12px * var(--fs-body));line-height:2.1;color:var(--muted);max-width:590px}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:end;margin-bottom:72px}

/* MISSION */
.mission-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw}
.mission-statement{font-family:"Noto Serif JP";font-size:calc(clamp(35px,4.7vw,76px) * var(--fs-heading));line-height:1.18;letter-spacing:-.08em}
.mission-statement span{display:block}
.mission-copy{font-size:calc(12px * var(--fs-body));line-height:2.1;color:var(--muted)}
.mini-list{margin-top:45px;border-top:1px solid var(--line)}
.mini-item{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);font-size:calc(11px * var(--fs-body));font-weight:700}
.mini-item span:last-child{font-size:calc(17px * var(--fs-body));font-weight:400}

/* NUMBERS */
.numbers{margin-top:95px;display:grid;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.number{padding:32px 18px;border-right:1px solid var(--line)}
.number:last-child{border-right:0}
.number .label{font-size:calc(9px * var(--fs-body));color:var(--muted);font-weight:700}
.number strong{display:block;font-family:"Noto Serif JP";font-size:calc(clamp(52px,6vw,92px) * var(--fs-heading));line-height:.9;margin:25px 0 10px;color:var(--navy);font-weight:600}
.number small{font-size:calc(10px * var(--fs-body));color:var(--muted)}

/* BUSINESS */
.business-head{display:grid;grid-template-columns:1fr .8fr;gap:7vw;align-items:end;margin-bottom:45px}
.business-num{font-family:Georgia,serif;font-size:calc(12px * var(--fs-heading));color:var(--muted)}

/* CASE */
.case-hero{
  display:grid;grid-template-columns:1fr 1fr;min-height:520px;background:#e8f0f3;overflow:hidden
}
.case-copy{padding:70px 6vw;display:flex;flex-direction:column;justify-content:center}
.case-copy h3{font-family:"Noto Serif JP";font-size:calc(clamp(35px,4.4vw,68px) * var(--fs-heading));line-height:1.12;letter-spacing:-.08em;margin:0 0 22px}
.case-copy p{font-size:calc(11px * var(--fs-body));line-height:2;color:var(--muted);max-width:480px}
.case-visual{position:relative;overflow:hidden}
.case-visual:after{
  content:"CASE STUDY";position:absolute;left:30px;bottom:24px;color:#fff;
  font-size:calc(9px * var(--fs-body));letter-spacing:.22em;text-shadow:0 1px 10px #234
}
.case-visual img{width:100%;height:100%}
.case-links{display:grid;margin-top:12px}
.case-link{padding:28px;border:1px solid var(--line);background:#fff}
.case-link+.case-link{border-left:0}
.case-link .num{font-size:calc(9px * var(--fs-body));color:var(--muted)}
.case-link h4{font-family:"Noto Serif JP"}
.case-link p{font-size:calc(10px * var(--fs-body));line-height:1.8;color:var(--muted)}

/* PEOPLE */
.people-feature{display:grid;grid-template-columns:.8fr 1.2fr;min-height:520px;background:#f0f3f4}
.portrait{background:linear-gradient(135deg,#d9e4e8,#b8c9d1);position:relative;overflow:hidden}
.portrait:before{content:"PORTRAIT";position:absolute;left:25px;bottom:22px;font-size:calc(9px * var(--fs-body));letter-spacing:.2em;color:#fff}
.people-copy{padding:70px 6vw;display:flex;flex-direction:column;justify-content:center}
.people-copy h3{font-family:"Noto Serif JP";font-size:calc(clamp(42px,5vw,78px) * var(--fs-heading));margin:0 0 15px;letter-spacing:-.08em}
.people-copy .role{font-size:calc(10px * var(--fs-body));font-weight:800;letter-spacing:.1em;color:var(--muted)}
.people-copy p{font-size:calc(11px * var(--fs-body));line-height:2;max-width:570px;color:var(--muted)}

/* CTA */
.cta{
  background:var(--navy);color:#fff;min-height:360px;padding:65px 6vw;
  display:flex;justify-content:space-between;align-items:end;gap:30px
}
.cta h2{font-family:"Noto Serif JP";font-size:calc(clamp(42px,5.5vw,90px) * var(--fs-heading));line-height:1;letter-spacing:-.09em;margin:0}
.cta p{font-size:calc(11px * var(--fs-body));line-height:1.9;color:#cbd7df;max-width:470px}
.cta a{display:inline-flex;align-items:center;justify-content:center;border:1px solid #fff;border-radius:999px;padding:12px 23px;font-size:calc(10px * var(--fs-body));font-weight:800;white-space:nowrap}

/* FOOTER */
.footer{padding:65px 4.2vw 25px;background:#0e2235;color:#fff}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
.footer-logo{font-family:Georgia,serif}
.footer-sub{font-size:calc(8px * var(--fs-body));margin-top:10px;color:#c5d1d8}
.footer h4{font-size:calc(10px * var(--fs-heading));margin:0 0 18px}
.footer a{display:block;font-size:calc(9px * var(--fs-body));color:#b9c7cf;margin:9px 0}
.copy{margin-top:55px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:calc(8px * var(--fs-body));color:#91a4b0;display:flex;justify-content:space-between}

/* MOBILE */
@media(max-width:900px){
 .logo{width:auto}
 .hero-title{font-size:calc(58px * var(--fs-heading))}
 .section{padding:80px 20px}.intro,.mission-grid,.business-head,.case-hero,.people-feature{grid-template-columns:1fr}
 .number{padding:24px 10px}.number .label{font-size:calc(8.5px * var(--fs-body));line-height:1.5}.number strong{font-size:calc(40px * var(--fs-heading));margin:14px 0 7px}.number small{font-size:calc(9px * var(--fs-body))}
 .case-visual{min-height:350px;order:-1}
 .people-feature{min-height:0}.portrait{min-height:330px}
 .cta{display:block}.cta a{margin-top:35px}
 .footer-top{grid-template-columns:1fr 1fr}.footer-top>div:first-child{grid-column:1/-1}
 .copy{display:block}.copy span{display:block;margin-top:8px}
}
@media(max-width:540px){
 .hero-title{font-size:calc(48px * var(--fs-heading))}
 .number{padding:20px 7px}.number strong{font-size:calc(32px * var(--fs-heading))}
 .footer-top{grid-template-columns:1fr}
}

/* ===== 地域自殺対策戦略機構 EDITORIAL UPDATE ===== */

/* 4-second opening */
.opening{
  position:fixed;inset:0;z-index:9999;background:#fff;
  display:flex;align-items:center;justify-content:center;
  animation:openingOut .9s cubic-bezier(.2,.75,.2,1) 3.45s forwards;
  pointer-events:none
}
.opening-inner{text-align:center;transform:translateY(15px);animation:openingRise 1.3s cubic-bezier(.2,.75,.2,1) .25s forwards;opacity:0}
.opening-kicker{font-size:calc(11.5px * var(--fs-body));letter-spacing:.28em;font-weight:800;color:var(--muted);margin-bottom:30px}
.opening-en{font-family:Georgia,serif;font-size:calc(17px * var(--fs-heading));letter-spacing:.5em;margin-top:28px;color:var(--muted)}
@keyframes openingRise{to{opacity:1;transform:translateY(0)}}
@keyframes openingOut{to{opacity:0;visibility:hidden}}

/* The H Magazine-style editorial news */
.magazine{
  position:relative;overflow:hidden;padding:115px 0 60px;background:#f7f7f7;
}
.magazine-pattern{
  position:absolute;inset:0;opacity:.45;
  background-image:
    radial-gradient(circle at 30px 30px,transparent 0 28px,#dce1e4 29px 30px,transparent 31px),
    radial-gradient(circle at 120px 80px,transparent 0 44px,#e4e7e9 45px 46px,transparent 47px);
  background-size:180px 110px;
  pointer-events:none
}
.magazine>*:not(.magazine-pattern){position:relative;z-index:1}
.magazine-topline{
  margin:0 28px;padding:0 10px 9px;border-bottom:1px solid #cdd3d7;
  display:flex;align-items:center;gap:9px;font-size:calc(11px * var(--fs-body));letter-spacing:.12em
}
.mag-dot{width:15px;height:15px;background:#10131a;display:inline-block;position:relative}
.mag-dot:after{content:"";position:absolute;width:5px;height:5px;background:#fff;left:5px;top:5px}
.mag-line{height:1px;background:#cdd3d7;flex:1}
.magazine-heading{
  margin:0 28px 52px;padding:40px 10px 22px;background:rgba(250,250,250,.94);
  border-radius:0 0 11px 11px
}
.magazine-heading span{font-size:calc(10px * var(--fs-heading));letter-spacing:.2em;font-weight:800;color:var(--muted)}
.magazine-heading h2{
  margin:15px 0 0;font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:500;font-size:calc(clamp(62px,8vw,130px) * var(--fs-heading));line-height:.86;
  letter-spacing:-.07em;color:var(--ink)
}
.magazine-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(330px,30vw);
  gap:25px;overflow-x:auto;padding:0 28px 24px;scrollbar-width:none
}
.magazine-track::-webkit-scrollbar{display:none}
.mag-card{min-width:0}
.mag-date{
  font-family:Georgia,serif;font-size:calc(15px * var(--fs-heading));letter-spacing:.04em;
  display:flex;align-items:center;gap:18px;margin-bottom:25px
}
.mag-date:after{content:"";height:1px;background:#252a30;flex:1}
.mag-image{
  height:360px;
  border-radius:8px;
  overflow:hidden;
  position:relative;
  background-size:cover;
  background-position:center
}
.mag-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.34))}
.mag-image span{position:absolute;z-index:2;left:17px;bottom:15px;color:#fff;font-size:calc(9px * var(--fs-body));letter-spacing:.18em;font-weight:800}
.mag-category{margin-top:20px;font-size:calc(9px * var(--fs-body));color:var(--muted);letter-spacing:.16em}
.mag-card h3{
  font-size:calc(22px * var(--fs-heading));line-height:1.35;font-weight:500;letter-spacing:-.045em;margin:12px 0
}
.mag-card p{font-size:calc(10px * var(--fs-body));line-height:1.9;color:var(--muted);margin:0 0 22px}
.mag-card a{color:var(--muted);font-size:calc(10px * var(--fs-body));font-weight:700}
.mag-card a b{
  display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;
  background:#ef2428;color:#fff;margin-left:4px;font-size:calc(15px * var(--fs-body))}
.mag-bottom{display:flex;justify-content:space-between;padding:35px 28px 0;font-size:calc(9px * var(--fs-body));letter-spacing:.14em}
.mag-bottom a{font-weight:800}

/* Who We Are-style seminar section */
.who-style{padding:130px 7vw 90px;overflow:hidden}
.who-header{position:relative;z-index:2;margin-bottom:35px}
.who-header .kicker{margin-left:2px}
.who-header h2{
  margin:0;font-family:Arial,"Helvetica Neue",sans-serif;font-size:calc(clamp(65px,9vw,145px) * var(--fs-heading));
  line-height:.83;letter-spacing:-.085em;font-weight:700;color:var(--ink)
}
.who-header p{margin:25px 0 0 4px;max-width:580px;font-size:calc(12px * var(--fs-body));line-height:2;color:var(--muted)}
.who-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:70px 10vw;align-items:center;
  margin-top:-20px
}
.who-tile{position:relative;min-height:350px;display:block}
.who-tile:nth-child(2){margin-top:120px}
.who-tile:nth-child(3){margin-top:-30px}
.who-tile:nth-child(4){margin-top:100px}
.who-copy{position:relative}
.who-copy h3{
  margin:0;font-family:Arial,"Helvetica Neue",sans-serif;font-size:calc(clamp(45px,5.2vw,82px) * var(--fs-heading));
  line-height:.88;letter-spacing:-.075em;font-weight:700;color:var(--ink)
}
.who-copy span{display:block;margin-top:8px;font-size:calc(15px * var(--fs-body));font-weight:500}
.who-photo{
  position:absolute;right:0;top:70px;width:72%;height:280px;border-radius:10px;
  background-size:cover;background-position:center;overflow:hidden;
  transition:transform .75s var(--ease),width .75s var(--ease)
}
.who-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.1),rgba(17,42,65,.18))}
.who-tile:hover .who-photo{transform:translate(8px,-8px);width:75%}
.who-arrow{
  position:absolute;
  width:55px;
  height:55px;
  border:1px solid #f1262c;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:calc(24px * var(--fs-body));
  transition:.4s
}
.who-tile:hover .who-arrow{transform:translateX(8px)}
.who-footer{
  margin-top:100px;padding-top:22px;border-top:1px solid #d8dde0;
  display:flex;justify-content:space-between;font-size:calc(9px * var(--fs-body));letter-spacing:.12em
}
.who-footer a{font-weight:800}

/* Keep the original hero beneath the opening */
.hero{opacity:0;animation:heroIn 1s ease 3.8s forwards}
.header{opacity:0;animation:headerIn .8s ease 3.95s forwards}
/* 他のページから戻ってきたとき（法人名の幕を出さないとき）は、待たずにすぐ表示する */
html.no-opening .hero{animation:heroIn .5s ease 0s forwards}
html.no-opening .header{animation:headerIn .5s ease 0s forwards}
@keyframes heroIn{to{opacity:1}}
@keyframes headerIn{to{opacity:1}}

@media(max-width:900px){
 .magazine-heading{margin-left:20px;margin-right:20px}
 .magazine-topline{margin-left:20px;margin-right:20px}
 .magazine-track{padding-left:20px;padding-right:20px;grid-auto-columns:minmax(290px,82vw)}
 .mag-image{height:320px}
 .mag-bottom{padding-left:20px;padding-right:20px}
 .who-style{padding:90px 20px 65px}
 .who-grid{grid-template-columns:1fr;gap:70px;margin-top:10px}
 .who-tile:nth-child(2),.who-tile:nth-child(3),.who-tile:nth-child(4){margin-top:0}
 .who-tile{min-height:300px}
 .who-photo{width:74%;height:230px;top:55px}
 .who-copy h3{font-size:calc(57px * var(--fs-heading))}
 .who-footer{display:block;margin-top:65px}.who-footer a{display:block;margin-top:15px}
}

/* ===== FINAL VISUAL DIRECTION: editorial / 22-century-like minimalism ===== */
.logo-word{font-family:"Noto Serif JP",serif;line-height:1.05;font-weight:700}
.logo-sub{letter-spacing:.08em;margin-top:3px}

/* service editorial diagram */
.service-principle{border-top:3px solid #111;margin:75px 0 55px;padding:30px 0 0}
.service-principle h3{font-family:"Noto Serif JP",serif;font-size:calc(clamp(28px,4vw,58px) * var(--fs-heading));font-weight:600}
.service-principle p{max-width:780px;font-size:calc(12px * var(--fs-body));line-height:2;margin:30px 0 0;color:var(--muted)}
.service-diagram{margin:30px 0 80px;display:flex;align-items:center;justify-content:center}
.diagram-core{width:190px;height:190px;border-radius:50%;border:1px solid #333;background:#f4edcf;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;z-index:3}
.diagram-core span{font-size:calc(11px * var(--fs-heading));color:var(--muted)}.diagram-core strong{font-family:"Noto Serif JP",serif;line-height:1.15;margin-top:8px}
.diagram-node{position:absolute;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;z-index:2}
.diagram-node:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(20,30,40,.08)}
.diagram-node small{color:#fff;font-size:calc(9px * var(--fs-body));letter-spacing:.1em}
.diagram-node b{font-family:"Noto Serif JP",serif;line-height:1.25;margin:15px 0 8px}
.diagram-node span{line-height:1.7;color:var(--muted)}

/* social media grid */
.mlink-section{padding:125px 0 0;background:#fff}
.mlink-heading{text-align:center;padding:0 20px 65px}
.mlink-heading .kicker{display:inline-flex;align-items:center;gap:18px;font-size:calc(10px * var(--fs-heading));letter-spacing:.22em}
.mlink-heading .kicker:before,.mlink-heading .kicker:after{content:"";width:150px;height:1px;background:#222}
.mlink-heading h2{font-family:Arial,sans-serif;font-size:calc(clamp(62px,8vw,125px) * var(--fs-heading));line-height:.85;letter-spacing:-.075em;font-weight:500;margin:20px 0 0}
.mlink-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #222;border-left:1px solid #222}
.mlink-card{min-height:315px;border-right:1px solid #222;border-bottom:1px solid #222;padding:60px 8vw 35px;display:flex;flex-direction:column;align-items:center;text-align:center}
.mlink-icon{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:calc(40px * var(--fs-body))}
.mlink-card h3{font-size:calc(28px * var(--fs-heading));margin:0 0 16px}.mlink-card p{max-width:520px;color:var(--muted);font-size:calc(12px * var(--fs-body));line-height:1.9;margin:0 auto 35px}
.mlink-more{margin-top:auto;width:100%;display:flex;justify-content:flex-end;align-items:center;gap:14px;border-top:1px solid #555;padding-top:14px;font-size:calc(12px * var(--fs-body));font-weight:500}
.mlink-more span{width:42px;height:42px;border:1px solid #222;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(20px * var(--fs-body));transition:.35s}
.mlink-card:hover .mlink-more span{background:#111;color:#fff}

/* application / member */
.access-section{padding:120px 7vw 90px;background:#f6f6f4}
.access-head{display:flex;justify-content:space-between;gap:60px;border-top:3px solid #111;padding-top:28px}
.access-head h2{font-family:"Noto Serif JP",serif;font-size:calc(clamp(34px,4.6vw,70px) * var(--fs-heading));line-height:1.15;margin:0;letter-spacing:-.05em}
.access-head p{max-width:480px;font-size:calc(12px * var(--fs-body));line-height:2;color:var(--muted);margin-top:10px}
.access-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #222;border-left:1px solid #222;margin-top:70px}
.access-card{border-right:1px solid #222;border-bottom:1px solid #222;padding:34px;min-height:260px;transition:.5s var(--ease)}
.access-card:hover{background:#111;color:#fff}
.access-card small{font-size:calc(9px * var(--fs-body));letter-spacing:.15em}.access-card h3{font-family:"Noto Serif JP",serif;font-size:calc(25px * var(--fs-heading));margin:28px 0 12px}.access-card p{font-size:calc(11px * var(--fs-body));line-height:1.9;color:var(--muted);max-width:340px}.access-card span{display:block;margin-top:35px;font-size:calc(11px * var(--fs-body));font-weight:700}.access-card:hover p{color:#ccd2d6}
.member-strip{margin-top:55px;background:#12283b;color:#fff;padding:34px 40px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.member-strip h3{font-family:"Noto Serif JP",serif;font-size:calc(25px * var(--fs-heading));margin:10px 0}.member-strip p{font-size:calc(11px * var(--fs-body));line-height:1.8;color:#ccd4d9;margin:0}
.member-button{border:1px solid #fff;border-radius:999px;padding:14px 22px;font-size:calc(10px * var(--fs-body));white-space:nowrap}

@media(max-width:900px){
 .mlink-grid{grid-template-columns:1fr}.mlink-card{min-height:290px;padding-left:30px;padding-right:30px}
 .mlink-heading .kicker:before,.mlink-heading .kicker:after{width:55px}
 .access-head{display:block}.access-grid{grid-template-columns:1fr}.member-strip{display:block}.member-button{display:inline-block;margin-top:25px}
}

/* V8 seasonal hero + representative message */
.opening-hidden{opacity:0!important;visibility:hidden!important;transition:opacity .8s cubic-bezier(.2,.75,.2,1),visibility 0s linear .8s!important;}
.single-hero-visual{width:62%!important;}
.single-hero-image{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scale(1.015);animation:heroImageIn 1.6s cubic-bezier(.2,.75,.2,1) .2s both;}
@keyframes heroImageIn{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:scale(1.015)}}
.reveal{opacity:1}
.reveal:not(.in){opacity:0;transform:translateY(35px);}
@media(max-width:900px){.single-hero-visual{width:100%!important;}}

/* ===== V8: SUMMER / SPRING HERO ===== */
.seasonal-hero{width:62%!important}
.seasonal-hero .season{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;transform:scale(1.015);
  transition:opacity 1.4s cubic-bezier(.2,.75,.2,1),transform 6s linear;
  filter:saturate(.94) contrast(.98);
}
.seasonal-hero .season.active{opacity:1;transform:scale(1)}
.seasonal-hero .dot{width:9px;height:9px}
.seasonal-hero .dot.active{background:var(--navy)}

/* ===== V8: MESSAGE / MIYAMOTO ===== */
.message-feature{
  align-items:center
}
.message-portrait img{
  mix-blend-mode:multiply
}
.message-copy{
  padding:55px 6vw 55px 5vw;
  background:#fff;
}
.message-heading{text-align:center;margin:0 0 48px}
.message-en{
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-size:calc(clamp(48px,5vw,76px) * var(--fs-heading));
  line-height:.9;
  letter-spacing:-.045em;
  font-weight:500;
}
.message-jp{font-size:calc(11px * var(--fs-body));color:var(--muted);margin-top:12px}
.message-copy h3{
  font-family:"Noto Serif JP",serif;
  font-size:calc(clamp(28px,3.1vw,52px) * var(--fs-heading));
  line-height:1.25;
  letter-spacing:-.07em;
  font-weight:600;
  margin:0 0 30px;
}
.message-copy>p{
  font-size:calc(11px * var(--fs-body));
  line-height:2;
  color:var(--muted);
  margin:0 0 15px;
  max-width:700px;
}
.message-sign{
  text-align:right;
  font-size:calc(10px * var(--fs-body));
  line-height:1.9;
  color:var(--muted);
  margin:28px 0 34px;
}
.message-sign strong{font-size:calc(18px * var(--fs-body));font-weight:500}
.profile-card{
  border:1px solid #d9dee1;
  border-radius:14px;
  padding:0 24px 22px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,28,40,.04);
}
.profile-label{
  display:inline-block;
  margin:0 0 15px;
  padding:7px 17px;
  background:#eeeae3;
  border-radius:0 0 8px 8px;
  font-size:calc(10px * var(--fs-body));
  font-weight:700;
  letter-spacing:.08em;
}
.profile-card p{
  margin:0;
  font-size:calc(10px * var(--fs-body));
  line-height:1.9;
  color:var(--muted);
}

@media(max-width:900px){
  .seasonal-hero{width:100%!important}
  .seasonal-hero .season{background-position:center center}
  .message-portrait{max-height:520px}
  .message-copy{padding:55px 20px 65px}
  .message-heading{margin-bottom:38px}
}

/* ===== V9: FULL-SCREEN FIVE-SEASON HERO ===== */
.hero{
  position:relative
}
.hero-title{
  z-index:8
}
.hero-title .small{font-size:calc(10px * var(--fs-heading));margin-bottom:24px;letter-spacing:.2em}
.hero-title .brand-line{letter-spacing:-.09em}
.hero-message{
  z-index:9
}
.hero-message h1{
  line-height:1.02!important;
  letter-spacing:-.075em!important
}
.hero-message p{
  margin-top:20px;
  font-size:calc(12px * var(--fs-body));
  line-height:2.05
}
.scroll{left:5vw;bottom:25px;z-index:9;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.scroll:after{background:#fff}

/* ===== V10: HERO TEXT LEGIBILITY / SLOW SEASON ROTATION ===== */
.hero-title{
  padding:22px 28px 24px;
  border-radius:2px
}
.hero-title .small{color:var(--muted);text-shadow:none}
.hero-title .brand-line{color:var(--ink);text-shadow:none}
.hero-message{
  border-radius:2px
}
.hero-message h1,.hero-message p{ text-shadow:none !important; }

/* Keep the service principle copy from colliding: one clean, single text panel. */
.service-principle h3{
  display:block;
  width:fit-content;
  max-width:100%;
  margin:22px 0 26px;
  padding:12px 18px;
  background:#fff;
  border:1px solid #222;
  line-height:1.35;
  box-decoration-break:initial;
  -webkit-box-decoration-break:initial;
}

@media(max-width:900px){
  .service-principle h3{width:100%;padding:11px 14px}
}

/* ===== V11: FINAL HERO TEXT / NAV ORDER ===== */
.logo-word{white-space:nowrap}
.hero-title{
  max-width:none;
  width:max-content;
  background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.52) 72%,rgba(255,255,255,0) 100%);
  backdrop-filter:blur(2px);
}
.hero-title .brand-line{white-space:nowrap;font-size:calc(clamp(38px,5.2vw,82px) * var(--fs-heading));line-height:1}
.hero-message{
  left:auto;
  padding:20px 26px 22px;
  text-align:right;
  background:linear-gradient(270deg,rgba(255,255,255,.70) 0%,rgba(255,255,255,.52) 72%,rgba(255,255,255,0) 100%);
  backdrop-filter:blur(2px);
  box-shadow:0 8px 28px rgba(15,28,40,.06)
}
.hero-message h1{
  white-space:nowrap;
  font-size:calc(clamp(34px,4.2vw,68px) * var(--fs-heading))!important;
  color:var(--navy);
  text-shadow:0 2px 10px rgba(255,255,255,.7);
}
.hero-message p{
  margin-left:auto;
  max-width:760px;
  color:#183246;
  font-weight:500;
  text-shadow:0 1px 8px rgba(255,255,255,.85);
}
@media(max-width:900px){
  .hero-title{width:auto;max-width:calc(100vw - 40px);padding:16px 18px 18px}
  .hero-title .brand-line{font-size:calc(clamp(30px,8.5vw,56px) * var(--fs-heading));white-space:nowrap}
  .hero-message{left:auto;padding:16px 18px 18px}
  .hero-message h1{font-size:calc(clamp(24px,7vw,42px) * var(--fs-heading))!important;white-space:nowrap}
  .hero-message p{font-size:calc(10px * var(--fs-body));line-height:1.85}
}

/* ===== V12 USER REQUEST: 1600x800 HERO / BUBBLE PHYSICS / NAVY-WHITE MISSION ===== */
.hero{
  height:auto!important;min-height:0!important;padding-top:76px!important;
  background:#fff;display:flex;justify-content:center;overflow:visible!important;
}
.hero-title{left:4.5%!important;top:13%!important}
.hero-message{right:4.5%!important;bottom:8%!important;max-width:70%!important}
.scroll{display:none!important}

/* Floating bubbles: all four move continuously inside the diagram and repel on contact. */
.service-diagram{
  min-height:720px!important;
  border-radius:32px
}
.service-diagram:before{content:"";position:absolute;inset:20px;border:1px dashed rgba(255,255,255,.28);border-radius:28px;pointer-events:none;z-index:2}
.service-diagram .diagram-core,.service-diagram .diagram-node{--bubble-x:0px;--bubble-y:0px;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.diagram-node{
  width:290px!important;height:290px!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  border:2px solid rgba(17,42,65,.26)!important;
  box-shadow:0 14px 34px rgba(17,42,65,.08);
  transition:box-shadow .25s ease,transform .2s linear!important;
  will-change:transform;
}
.diagram-node:nth-of-type(4){background:linear-gradient(145deg,#eef7f0,#d8eadf)}
.diagram-node:nth-of-type(5){background:linear-gradient(145deg,#edf4fa,#d8e9f5)}
.diagram-node:nth-of-type(6){background:linear-gradient(145deg,#f2f8dc,#e3efbd)}
.diagram-node:nth-of-type(7){background:linear-gradient(145deg,#e7f1ed,#cde2d8)}
.diagram-node small{background:var(--navy)!important;border-radius:999px;padding:7px 11px!important}
.diagram-node b{font-size:calc(25px * var(--fs-body))!important}
.diagram-node span{font-size:calc(10px * var(--fs-body))!important}

.diagram-core strong{font-size:calc(30px * var(--fs-heading))!important}

/* Mission: hard vertical 50/50 navy-white split */
#mission{padding:0!important;background:#fff!important;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
#mission .intro{display:block;margin:0;padding:110px 6vw 55px;background:var(--navy);color:#fff;}
#mission .intro .kicker{color:#a9d36e}
#mission .intro .h2{color:#fff!important}
#mission .intro .lead{display:none}
#mission .mission-grid{display:block;margin:0;padding:110px 6vw 55px;background:#fff;}
#mission .mission-statement{color:var(--navy);font-size:calc(clamp(35px,4vw,68px) * var(--fs-heading));line-height:1.15;margin:0 0 55px}
#mission .mission-copy{color:var(--muted)}
#mission .mini-list{border-top:1px solid #d7dfe3}
#mission .mini-item{border-bottom:1px solid #d7dfe3}
#mission .numbers{grid-column:1/-1;margin:0!important;border-top:1px solid rgba(255,255,255,.16);border-bottom:0;background:#0d2235;color:#fff}
#mission .number{border-color:rgba(255,255,255,.14)}
#mission .number .label,#mission .number small{color:#b7c8d2}
#mission .number strong{color:#a9d36e}

@media(max-width:900px){
  .hero{padding-top:76px!important}
  .hero-title{top:8%!important;left:4%!important}
  .hero-message{right:4%!important;bottom:7%!important;max-width:88%!important}
  .service-diagram{min-height:780px!important}
  .diagram-node{width:185px!important;height:185px!important;padding:22px!important}
  .diagram-node b{font-size:calc(17px * var(--fs-body))!important}
  .diagram-core{width:145px!important;height:145px!important}
  .diagram-core strong{font-size:calc(21px * var(--fs-heading))!important}
  #mission{display:block}
  #mission .intro,#mission .mission-grid{padding:80px 24px 55px}
  #mission .numbers{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:540px){
  .hero-title .brand-line{font-size:calc(clamp(24px,7vw,40px) * var(--fs-heading))!important}
  .hero-message h1{font-size:calc(clamp(22px,6vw,34px) * var(--fs-heading))!important}
  #mission .numbers{grid-template-columns:repeat(3,1fr)}
}

/* ===== V13 FIX: representative portrait framing + stable bubble physics ===== */

.service-diagram{position:relative!important;overflow:hidden!important;isolation:isolate;}
.service-diagram .diagram-node,
.service-diagram .diagram-core{
  position:absolute!important;
  left:0!important;right:auto!important;top:0!important;bottom:auto!important;
  margin:0!important;
  transform:translate3d(0,0,0);
  transition:box-shadow .25s ease!important;
  will-change:transform;
}
.service-diagram .diagram-node:hover{transform:translate3d(var(--bubble-x,0px),var(--bubble-y,0px),0)!important;box-shadow:0 14px 34px rgba(17,42,65,.08)!important;}
.service-diagram .diagram-core{z-index:3!important;}
.service-diagram .diagram-node{z-index:2!important;}

/* ===== V21: ink-outline service medallions (title / rule / description) ===== */
.service-diagram .diagram-node{
  --dn-ink:#4a3d2e;
  --dn-fill:#f6f1e7;
  --dn-edge:rgba(74,61,46,.55);
  color:var(--dn-ink)!important;
  border:1px solid var(--dn-edge)!important;
  box-shadow:none!important;
  padding:24px 20px!important;
  gap:0!important;
  overflow:visible!important;
  container-type:inline-size
}
/* the offset ink arc: a ~150° stroke sitting just outside the rim */
.service-diagram .diagram-node:after{
  content:"";position:absolute;inset:-11px;border-radius:50%;pointer-events:none;
  border:1.4px solid transparent;
  border-left-color:var(--dn-edge);
  border-top-color:var(--dn-edge);
  transform:rotate(-26deg);
}
/* the core reads as a sixth medallion */
.service-diagram .diagram-core{
  --dn-ink:#4a3a22;
  --dn-fill:#f4ecd8;
  --dn-edge:rgba(122,96,46,.62);
  width:290px!important;
  height:290px!important;
  color:var(--dn-ink)!important;
  border:1px solid var(--dn-edge)!important;
  border-radius:50%!important;
  box-shadow:none!important;
  padding:24px 20px!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:visible!important;
  container-type:inline-size
}
.service-diagram .diagram-core:after{
  content:"";position:absolute;inset:-11px;border-radius:50%;pointer-events:none;
  border:1.4px solid transparent;border-left-color:var(--dn-edge);border-top-color:var(--dn-edge);
  transform:rotate(-26deg);
}
.service-diagram .diagram-core strong{
  font-family:"Noto Serif JP",serif!important;font-weight:700;
  font-size:calc(clamp(17px,14cqw,32px) * var(--fs-heading))!important;line-height:1.3!important;letter-spacing:.01em;
  color:var(--dn-ink)!important;margin:0!important;
}
.service-diagram .diagram-core strong:after{
  content:"";display:block;width:42cqw;height:1px;margin:7cqw auto 6cqw;
  background:color-mix(in oklab,var(--dn-ink) 45%,transparent);
}
.service-diagram .diagram-core span,
.service-diagram .diagram-node span{
  background:#111!important;color:#f2efe9!important;
  padding:7px 13px!important;border-radius:2px;
  display:inline-block;
}
.service-diagram .diagram-core span{
  font-size:calc(clamp(9px,4.4cqw,12px) * var(--fs-heading))!important;letter-spacing:.18em;font-weight:700;
}
.service-diagram .diagram-node small{
  display:none!important
}
.service-diagram .diagram-node b{
  font-family:"Noto Serif JP",serif!important;font-weight:700;
  font-size:calc(clamp(17px,14cqw,32px) * var(--fs-heading))!important;line-height:1.3!important;letter-spacing:.01em;
  text-wrap:balance;
  color:var(--dn-ink)!important;margin:0!important;padding:0!important;border:0!important;
}
.service-diagram .diagram-node b:after{
  content:"";display:block;width:42cqw;height:1px;margin:7cqw auto 6cqw;
  background:color-mix(in oklab,var(--dn-ink) 45%,transparent);
}
.service-diagram .diagram-node span{
  font-size:calc(clamp(9.5px,5cqw,14px) * var(--fs-body))!important;line-height:1.8!important;letter-spacing:.01em;
}

/* （ここにあった余分な「}」と、それに巻き込まれて一度も効いていなかった
   スマホ向けの指定を削除。表示は変わらない） */

/* ===== V15 FINAL: requested video hero + clean representative portrait ===== */
.header{height:88px;padding:0 34px;background:rgba(255,255,255,.96)}
.logo-word{font-size:calc(23px * var(--fs-heading))!important;letter-spacing:.08em!important}
.logo-sub{font-size:calc(10px * var(--fs-body))!important;line-height:1.45!important}
.nav{gap:31px;font-size:calc(13px * var(--fs-body))!important}
.menu{width:44px;height:44px;margin-left:28px}
.hero-video{height:100svh;min-height:760px;padding-top:0;background:#111;position:relative;overflow:hidden;isolation:isolate}
.hero-video-bg{position:absolute;inset:0;z-index:0;background:#111;overflow:hidden}
.hero-video-bg video{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
/* remove old seasonal layers when present */
.hero-video .season{display:none!important}
/* WHO WE ARE: stacked kicker -> single-line headline -> lead, tight to the portrait */
#people .intro{display:block!important;margin-bottom:26px!important}
#people .intro .h2{
  font-size:calc(clamp(30px,5.1vw,86px) * var(--fs-heading))!important;white-space:nowrap;
  letter-spacing:-.055em;line-height:1.08;margin:0 0 26px!important;
}
#people .intro .lead{max-width:900px;margin:0}
/* WHO WE ARE block slides in from the left, staggered */
#people .intro .kicker,#people .intro .h2,#people .intro .lead{
  opacity:0
}
#people .intro.slid .kicker,
#people .intro.slid .h2,
#people .intro.slid .lead{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  #people .intro .kicker,#people .intro .h2,#people .intro .lead{opacity:1}
}
#people .message-feature{min-height:0!important;overflow:hidden}
#people .message-portrait,#people .message-copy{
  opacity:0
}
#people .message-feature.slid .message-portrait,
#people .message-feature.slid .message-copy{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  #people .message-portrait,#people .message-copy{opacity:1;transform:none}
}
#people .message-portrait{min-height:0!important;align-items:flex-start!important;padding:0!important;overflow:visible!important}
#people .message-portrait img{width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
@media(max-width:900px){
  #people .intro{margin-bottom:20px!important}
}
/* representative message: pure white, no gray panel */
.message-feature{background:#fff!important;grid-template-columns:.82fr 1.18fr!important;min-height:620px!important}
.message-portrait{background:#fff!important;background-image:none!important;min-height:620px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important;overflow:hidden!important}
.message-portrait:before{display:none!important}
.message-portrait img{width:auto!important;height:auto!important;max-width:790px!important;max-height:620px!important;object-fit:contain!important;object-position:center bottom!important;display:block!important}
@media(max-width:900px){
 .header{height:76px;padding:0 20px}.logo-word{font-size:calc(18px * var(--fs-heading))!important}.logo-sub{font-size:calc(8px * var(--fs-body))!important}.nav{display:none}.menu{margin-left:auto}
 .hero-video{min-height:760px}
 .message-feature{grid-template-columns:1fr!important}.message-portrait{min-height:420px!important}.message-portrait img{max-width:570px!important;max-height:520px!important}
}

/* ===== V18: STATIC 1600x800 HERO / LEGIBLE TITLE ===== */
.hero.hero-static{
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  justify-content:center;
  position:relative!important;
  isolation:isolate
}
.hero-static-bg{
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 72% 35%,rgba(125,169,191,.42) 0%,rgba(61,100,120,.22) 28%,transparent 52%),
    radial-gradient(ellipse at 18% 75%,rgba(194,143,91,.30) 0%,transparent 38%),
    linear-gradient(135deg,#142b3b 0%,#243f4f 38%,#0d1e2b 72%,#07131d 100%)
}
.hero-static-bg:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  z-index:2;
  pointer-events:none
}
.hero-static-video{position:absolute;inset:0;z-index:0;object-position:center;filter:saturate(.95) contrast(1.02)}
.hero-static-bg .hero-glow-b{z-index:1;opacity:.3}
.hero-static-bg .hero-grid{z-index:1;opacity:.06}
.hero-glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.55}
.hero-glow-b{width:48%;height:65%;left:-12%;bottom:-25%;background:radial-gradient(circle,rgba(212,143,78,.42),transparent 67%)}
.hero-grid{position:absolute;inset:0;opacity:.11;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:80px 80px;transform:perspective(700px) rotateX(58deg) scale(1.35) translateY(25%);transform-origin:center bottom}
.hero-title-static{
  left:5%!important;
  top:12%!important;
  z-index:5!important;
  width:auto!important;
  max-width:900px!important;
  padding:0!important;
  background:none!important;
  backdrop-filter:none!important
}
.hero-title-static .small{font-size:calc(13px * var(--fs-heading))!important;letter-spacing:.22em!important;margin-bottom:24px!important}
.hero-title-static .brand-line{font-size:calc(clamp(48px,6.2vw,100px) * var(--fs-heading))!important;line-height:.94!important;letter-spacing:-.075em!important;white-space:nowrap}
.hero-message-static{
  left:5%!important;
  right:auto!important;
  bottom:7%!important;
  z-index:5!important;
  max-width:min(780px,72%)!important;
  backdrop-filter:none!important
}
.hero-message-static h1{font-size:calc(clamp(42px,5vw,78px) * var(--fs-heading))!important;line-height:1.02!important;letter-spacing:-.075em!important;margin:0 0 16px!important;white-space:nowrap}
.hero-message-static .hero-lead-bold{font-size:calc(16px * var(--fs-body))!important;line-height:1.75!important;font-weight:700!important;max-width:720px!important;margin:0 0 7px!important}
.hero-message-static>p:last-child{font-size:calc(12px * var(--fs-body))!important;line-height:1.95!important;max-width:720px!important;margin:0!important}
@media(max-width:1240px) and (min-width:901px){
  .header{padding:0 26px}
  .logo-sub{display:none}
  .logo-word{font-size:calc(19px * var(--fs-heading))!important;letter-spacing:.06em!important}
  .nav{gap:16px!important;font-size:calc(10px * var(--fs-body))!important}
  .menu{width:38px;height:38px;margin-left:16px}
}
@media(max-width:900px){
 .hero-title-static{left:20px!important;top:8%!important;max-width:calc(100% - 40px)!important}
 .hero-title-static .small{font-size:calc(9px * var(--fs-heading))!important;margin-bottom:14px!important}
 .hero-title-static .brand-line{font-size:calc(clamp(28px,8vw,52px) * var(--fs-heading))!important;white-space:nowrap}
 .hero-message-static{left:20px!important;max-width:calc(100% - 40px)!important;border-left-width:5px!important}
 .hero-message-static h1{font-size:calc(clamp(28px,7.5vw,46px) * var(--fs-heading))!important}
 .hero-message-static .hero-lead-bold{font-size:calc(12px * var(--fs-body))!important}
 .hero-message-static>p:last-child{font-size:calc(9px * var(--fs-body))!important;line-height:1.8!important}
 }

/* ===== 役員一覧：右から左へ自動スクロール ===== */
.officers-head{display:flex;align-items:baseline;gap:14px}
.officers-head .kicker{margin-bottom:0}
.officers-hint{font-size:calc(9px * var(--fs-body));letter-spacing:.2em;font-weight:800;color:var(--muted)}
.officers-viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.officers-viewport::-webkit-scrollbar{display:none}
.officers.is-marquee .officers-viewport{
  overflow:hidden;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)
}
.officers-track{display:flex;width:max-content;will-change:transform}
.officers.is-marquee .officers-track{cursor:grab}
.officers.is-dragging .officers-track{cursor:grabbing}
.officer{flex:none;-webkit-user-select:none;user-select:none}
.officer-photo{
  border-radius:50%;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center
}
.officer-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.officer-photo.is-initial{
  font-family:"Noto Serif JP",serif;
  font-weight:600;
  line-height:1;
  color:var(--navy);
  opacity:.45
}
.officer-role{font-weight:800;color:var(--muted)}
.officer-org{color:var(--muted)}
.officer-name{margin:0;letter-spacing:.02em;color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .officers.is-marquee .officers-viewport{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}

/* =========================================================
   下層ページ共通（記事・一覧・検索など）
   ========================================================= */
.subpage{display:block;padding-top:76px;background:#fff}
body.nav-open{overflow:hidden}
@media(max-width:900px){
  body.nav-open .header .nav{
  display:flex;
  flex-direction:column;
  gap:0;
  position:fixed;
  left:0;
  right:0;
  top:76px;
  bottom:0;
  z-index:99;
  padding:18px 28px 40px;
  font-size:calc(14px * var(--fs-body));
  overflow-y:auto
}
  body.nav-open .header .nav a{padding:18px 0;border-bottom:1px solid var(--line)}
}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:calc(9px * var(--fs-body));letter-spacing:.12em;font-weight:700;color:var(--muted)
}
.breadcrumb a:hover{color:var(--ink)}

/* ===== 記事ページ ===== */
.article{max-width:1080px;margin:0 auto;padding:60px 28px 0}
.article-head{max-width:760px}
.article-meta{display:flex;align-items:center;gap:16px;margin:34px 0 20px}
.article-date{
  font-family:Georgia,serif;font-size:calc(15px * var(--fs-heading));letter-spacing:.04em;color:var(--ink)
}
.article-cat{
  font-size:calc(9px * var(--fs-body));letter-spacing:.16em;font-weight:800;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px
}
a.article-cat:hover{color:var(--ink);border-color:var(--ink)}
.article-title{
  font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(28px,3.6vw,50px) * var(--fs-heading));
  line-height:1.35;letter-spacing:-.045em;margin:0;color:var(--ink)
}
.article-lead{
  font-size:calc(12px * var(--fs-body));line-height:2.1;color:var(--muted);margin:24px 0 0;max-width:660px
}
.article-visual{
  margin:46px 0 56px;border-radius:10px;overflow:hidden;position:relative;
  aspect-ratio:16/9;background-size:cover;background-position:center;display:flex;align-items:flex-end
}
.article-visual img{width:100%;height:100%;object-fit:cover;display:block}
.article-visual-label{
  position:relative;z-index:2;margin:22px;color:#fff;
  font-size:calc(9px * var(--fs-body));letter-spacing:.18em;font-weight:800;text-shadow:0 1px 8px rgba(0,0,0,.4)
}

/* 本文（ブロックエディタの出力を読みやすく整える） */
.article-body{max-width:720px;font-size:calc(12.5px * var(--fs-body));line-height:2.15;color:#3f4c55}
.article-body > * + *{margin-top:1.6em}
.article-body p{margin:0}
.article-body h2{
  font-family:"Noto Serif JP",serif;font-weight:600;color:var(--ink);
  font-size:calc(22px * var(--fs-heading));line-height:1.55;letter-spacing:-.03em;
  margin-top:2.6em;padding-bottom:14px;border-bottom:1px solid var(--line)
}
.article-body h3{
  font-family:"Noto Serif JP",serif;font-weight:600;color:var(--ink);
  font-size:calc(17px * var(--fs-heading));line-height:1.6;margin-top:2.2em
}
.article-body h4{font-size:calc(14px * var(--fs-heading));color:var(--ink);margin-top:2em}
.article-body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{opacity:.7}
.article-body strong{font-weight:700;color:var(--ink)}
.article-body ul,.article-body ol{padding-left:1.4em}
.article-body li+li{margin-top:.6em}
.article-body ul li{list-style:disc}
.article-body ol li{list-style:decimal}
.article-body img{border-radius:8px}
.article-body figure{margin:2.4em 0}
.article-body figcaption{
  margin-top:12px;font-size:calc(10px * var(--fs-body));color:var(--muted);line-height:1.8
}
.article-body blockquote{
  margin:2.4em 0;padding:22px 26px;background:var(--paper);
  border-left:2px solid var(--navy);border-radius:0 6px 6px 0;color:var(--muted)
}
.article-body blockquote p{margin:0}
.article-body blockquote p+p{margin-top:1em}
.article-body table{width:100%;border-collapse:collapse;font-size:calc(11px * var(--fs-body))}
.article-body th,.article-body td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.article-body th{background:var(--paper);font-weight:700;color:var(--ink)}
.article-body hr{border:0;border-top:1px solid var(--line);margin:3em 0}
.article-body code{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:2px 6px;font-size:.92em
}
.article-body .wp-block-embed,.article-body iframe{max-width:100%}

.article-pages{margin-top:2.4em;font-size:calc(11px * var(--fs-body));color:var(--muted)}
.article-tags{display:flex;flex-wrap:wrap;gap:10px;margin:56px 0 0;max-width:720px}
.article-tags a{
  font-size:calc(9px * var(--fs-body));letter-spacing:.1em;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px
}
.article-tags a:hover{color:var(--ink);border-color:var(--ink)}

.article-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:70px 0 0
}
.article-nav-item{display:block;background:#fff;padding:30px 26px;min-height:118px}
.article-nav-item.is-next{text-align:right}
.article-nav-item.is-empty{background:var(--paper)}
.article-nav-label{
  display:block;font-size:calc(9px * var(--fs-body));letter-spacing:.14em;font-weight:800;color:var(--muted)
}
.article-nav-title{
  display:block;margin-top:14px;font-size:calc(13px * var(--fs-heading));line-height:1.7;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
a.article-nav-item:hover{background:var(--paper)}

/* ===== 関連記事 / 記事カード ===== */
.related{max-width:1080px;margin:0 auto;padding:80px 28px 20px}
.related-head{margin-bottom:38px}
.related-head h2{
  font-family:"Noto Serif JP",serif;font-weight:600;color:var(--ink);
  font-size:calc(26px * var(--fs-heading));margin:0;letter-spacing:-.04em
}
.related-more{margin-top:38px;text-align:right}
.related-more a{font-size:calc(10px * var(--fs-body));font-weight:800;letter-spacing:.1em;color:var(--ink)}

.news-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.news-card-item{display:block}
.news-card-image{
  aspect-ratio:4/3;border-radius:8px;overflow:hidden;background-size:cover;background-position:center;
  transition:transform .6s var(--ease)
}
.news-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.news-card-item:hover .news-card-image{transform:translateY(-6px)}
.news-card-meta{
  display:flex;gap:14px;margin-top:18px;
  font-size:calc(9px * var(--fs-body));letter-spacing:.14em;font-weight:700;color:var(--muted)
}
.news-card-item h3{
  font-size:calc(16px * var(--fs-heading));line-height:1.6;font-weight:600;letter-spacing:-.02em;
  margin:10px 0 0;color:var(--ink)
}
.news-card-item p{
  font-size:calc(10px * var(--fs-body));line-height:1.95;color:var(--muted);margin:10px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.news-card-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:calc(9px * var(--fs-body));font-weight:800;letter-spacing:.1em;color:var(--muted)
}
.news-card-more b{
  display:inline-flex;width:19px;height:19px;border-radius:50%;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;font-size:calc(13px * var(--fs-body))
}

/* ===== 一覧ページ ===== */
.index-head{max-width:1080px;margin:0 auto;padding:60px 28px 0}
.index-title{margin:38px 0 44px}
.index-title h1{
  font-family:Arial,"Helvetica Neue",sans-serif;font-weight:500;
  font-size:calc(clamp(52px,7vw,110px) * var(--fs-heading));
  line-height:.88;letter-spacing:-.07em;margin:14px 0 0;color:var(--ink)
}
.index-title p{
  font-size:calc(12px * var(--fs-body));line-height:2.1;color:var(--muted);margin:26px 0 0;max-width:600px
}
.index-filter{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.index-filter-item{
  font-size:calc(10px * var(--fs-body));font-weight:700;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:9px 20px
}
.index-filter-item:hover{color:var(--ink);border-color:var(--ink)}
.index-filter-item.is-current{background:var(--navy);border-color:var(--navy);color:#fff}
.index-list{max-width:1080px;margin:0 auto;padding:48px 28px 20px}
.index-empty{font-size:calc(12px * var(--fs-body));line-height:2.2;color:var(--muted)}
.index-empty a{font-weight:800;color:var(--ink)}

.pagination,.navigation.pagination{margin-top:64px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination .page-numbers{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;
  font-size:calc(10px * var(--fs-body));font-weight:700;color:var(--muted)
}
.pagination .page-numbers:hover{color:var(--ink);border-color:var(--ink)}
.pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 記事下CTA */
.article-cta-wrap{max-width:1080px;margin:80px auto 0;padding:0 28px 90px}

@media(max-width:900px){
  .article,.related,.index-head,.index-list{padding-left:20px;padding-right:20px}
  .article-cta-wrap{padding-left:20px;padding-right:20px}
  .news-cards{grid-template-columns:1fr 1fr;gap:30px 22px}
  .article-visual{margin:34px 0 42px}
  .article-nav{grid-template-columns:1fr}
  .article-nav-item.is-next{text-align:left}
  .article-nav-item.is-empty{display:none}
}
@media(max-width:540px){
  .news-cards{grid-template-columns:1fr;gap:34px}
  .article{padding-top:40px}
  .index-head{padding-top:40px}
}

/* ===== The Magazine：自動スクロール＋ドラッグ ===== */
.magazine-viewport{
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:0 28px 24px
}
.magazine-viewport::-webkit-scrollbar{display:none}
.magazine-viewport .magazine-track{overflow:visible;padding:0;width:max-content;gap:0}
.magazine-track .mag-card{margin-right:25px}
.magazine.is-marquee .magazine-viewport{
  overflow:hidden;touch-action:pan-y;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)
}
.magazine.is-dragging .magazine-viewport{cursor:grabbing}
.magazine.is-marquee .magazine-track{will-change:transform}
/* ドラッグ中に画像やテキストが選択されないように */
.magazine.is-marquee .mag-card{-webkit-user-select:none;user-select:none}
.magazine.is-marquee .mag-card img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .magazine.is-marquee .magazine-viewport{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}
/* アイキャッチ画像はカード枠いっぱいに（縦長・横長どちらでも破綻しない） */
.mag-image img{width:100%;height:100%;object-fit:cover;display:block}

/* =========================================================
   カード背景イラスト＋アイキャッチのホバー演出
   ========================================================= */
.mag-bg-1{background-image:url(../img/mag-bg/1-bg5.webp)}
.mag-bg-2{background-image:url(../img/mag-bg/2-bg2.webp)}
.mag-bg-3{background-image:url(../img/mag-bg/3-bg13.webp)}
.mag-bg-4{background-image:url(../img/mag-bg/4-bg4.webp)}
.mag-bg-5{background-image:url(../img/mag-bg/5-bg7.webp)}
.mag-bg-6{background-image:url(../img/mag-bg/6-bg6.webp)}
.mag-bg-7{background-image:url(../img/mag-bg/7-bg11.webp)}
.mag-bg-8{background-image:url(../img/mag-bg/8-bg9.webp)}
.mag-bg-9{background-image:url(../img/mag-bg/9-bg8.webp)}
.mag-bg-10{background-image:url(../img/mag-bg/10-bg12.webp)}
.mag-bg-11{background-image:url(../img/mag-bg/11-bg10.webp)}
.mag-bg-12{background-image:url(../img/mag-bg/12-bg3.webp)}
[class*="mag-bg-"]{background-size:cover;background-position:center;background-repeat:no-repeat}

/* カード全体をリンクに */
a.mag-card{display:block;color:inherit;text-decoration:none}
a.mag-card h3,a.mag-card p,a.mag-card .mag-date,a.mag-card .mag-category{transition:opacity .3s}
a.mag-card:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mag-more{
  display:inline-flex;align-items:center;
  color:var(--muted);font-size:calc(10px * var(--fs-body));font-weight:700
}
.mag-more b{
  display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;
  background:#ef2428;color:#fff;margin-left:4px;font-size:calc(15px * var(--fs-body))
}

/* 背景イラストの上に貼られたアイキャッチ */
.mag-image{transition:none}
.mag-card:hover .mag-image{transform:none}
.mag-image:after{display:none}
.mag-photo{
  position:absolute;inset:0;border-radius:0;overflow:hidden;
  transform:translate3d(0,0,0) scale(1);
  transition:transform .4s var(--ease),border-radius .4s var(--ease),box-shadow .4s var(--ease);
  will-change:transform
}
.mag-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mag-photo:after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.3))
}
.mag-card:hover .mag-photo{
  /* カーソルに合わせて動かすのはやめ、小さくなるだけにする（2026-11-08 依頼） */
  transform:translate3d(0,0,0) scale(.74);
  border-radius:8px;box-shadow:0 22px 46px rgba(16,27,37,.32)
}
/* カテゴリラベルはイラストの上でも読めるように白い錠剤で */
.mag-image .mag-tag{
  position:absolute;z-index:3;left:14px;bottom:14px;
  padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.93);
  color:var(--ink);font-size:calc(9px * var(--fs-body));letter-spacing:.14em;font-weight:800;
  text-shadow:none
}

/* =========================================================
   ヒーロー：動画の上のコピーを「白地＋黒文字」に
   ========================================================= */

/* 法人名（大見出し） */
.hero-title-static{color:var(--ink)!important}
.hero-title-static .small{color:#26343c!important}
.hero-title-static .brand-line{
  color:var(--ink)!important
}

/* メインコピーのパネル */
.hero-message-static{
  border-left:0!important;
  padding:30px 40px 32px!important;
  color:var(--ink)!important
}

@media(max-width:900px){
  .hero-message-static{padding:18px 20px 20px!important}
}

/* =========================================================
   ヒーロー：コピーを右寄せ・背景をさらに透過
   ========================================================= */
.hero-message-static{
  text-align:right!important;
  background:rgba(255,255,255,.56)!important;
  -webkit-backdrop-filter:blur(6px) saturate(1.05);backdrop-filter:blur(6px) saturate(1.05);
  box-shadow:0 14px 42px rgba(16,27,37,.10)!important
}
/* 右寄せに合わせて、幅を絞っている段落を右端に寄せる */
.hero-message-static .hero-lead-bold,
.hero-message-static>p:last-child{margin-left:auto!important;margin-right:0!important}
/* 透過を強めた分、文字の輪郭を白いにじみで補強して可読性を保つ */
.hero-message-static h1{text-shadow:0 1px 10px rgba(255,255,255,.85)!important}
.hero-message-static .hero-lead-bold{text-shadow:0 1px 8px rgba(255,255,255,.9)!important}
.hero-message-static>p:last-child{text-shadow:0 1px 7px rgba(255,255,255,.9)!important}

/* =========================================================
   研修・セミナー：4ステップの写真
   ========================================================= */
.photo-1{background-image:url(../img/seminar/step-1.webp)!important}
.photo-2{background-image:url(../img/seminar/step-2.webp)!important}
.photo-3{background-image:url(../img/seminar/step-3.webp)!important}
.photo-4{background-image:url(../img/seminar/step-4.webp)!important}

/* 映像は最大1600pxで中央寄せなので、広い画面では文字が映像の外（黒帯）に
   はみ出してしまう。映像の左端を基準に配置し直す。 */
@media(min-width:901px){
  .hero-title-static,
  .hero-message-static{
    left:calc(50% - min(800px,50vw) + 40px)!important;
  }
}

/* =========================================================
   ヒーロー：パネルごと右側へ／中の文字は左揃え／映像を少し縦長に
   ========================================================= */
/* 映像の縦幅を拡大（2:1 → 16:9）。画面からはみ出さないよう上限も設定 */

@media(min-width:901px){
  /* パネル（背景＋文字のかたまり）を映像の右側へ。文字は左揃えのまま */
  .hero-message-static{
    left:auto!important;
    right:calc(50% - min(800px,50vw) + 40px)!important;
    text-align:left!important;
  }
  .hero-message-static .hero-lead-bold,
  .hero-message-static>p:last-child{margin-left:0!important;margin-right:0!important}
}

/* 文字の背後に濃い色が残らないよう明示的に打ち消し、黒文字で統一する */
.hero-message-static h1,
.hero-message-static .hero-lead-bold,
.hero-message-static>p:last-child{
  background:none!important;
  -webkit-text-fill-color:currentColor
}
.hero-message-static h1{color:var(--ink)!important}
.hero-message-static .hero-lead-bold{color:var(--ink)!important}
.hero-message-static>p:last-child{color:#26343c!important}

/* =========================================================
   申込・お問い合わせページ（研修セミナー申込／お問い合わせ）
   ========================================================= */
.entry-page{max-width:1240px;margin:0 auto;padding:70px 28px 110px}
.entry-page.is-contact{max-width:none;background:#f2f2f0;padding-left:0;padding-right:0}
.entry-page.is-contact>*{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}

.entry-head{
  display:grid;grid-template-columns:1fr 1fr;gap:40px 6vw;align-items:start;margin-bottom:78px
}
.entry-head .kicker{margin-bottom:18px}
.entry-head h1{
  margin:0;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;
  font-size:calc(clamp(40px,4.6vw,74px) * var(--fs-heading));
  line-height:1.02;letter-spacing:-.055em;color:var(--ink)
}
.entry-lead{
  margin:14px 0 0;font-size:calc(12.5px * var(--fs-body));line-height:2.1;color:var(--muted);max-width:620px
}

.entry-body{
  display:grid;grid-template-columns:minmax(240px,.44fr) 1fr;gap:60px 7vw;align-items:start
}

/* 左：ステップ／相談内容の一覧 */
.entry-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.entry-steps li{border-bottom:1px solid var(--line)}
.entry-steps a{
  display:grid;grid-template-columns:52px 1fr 24px;align-items:center;gap:14px;
  padding:26px 4px;color:var(--ink);transition:padding .35s var(--ease),color .35s
}
.entry-steps a:hover{padding-left:12px}
.entry-steps .num{
  font-size:calc(10px * var(--fs-body));letter-spacing:.12em;font-weight:700;color:var(--muted)
}
.entry-steps .label{font-size:calc(14px * var(--fs-body));font-weight:700;letter-spacing:.02em}
.entry-steps .arrow{text-align:right;font-size:calc(15px * var(--fs-body));color:var(--muted);transition:.35s}
.entry-steps a:hover .arrow{color:var(--ink);transform:translate(2px,-2px)}

/* 右：フォーム */
.entry-form-wrap{border-top:1px solid var(--ink);padding-top:34px}
.entry-form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-notice{
  margin:0 0 28px;padding:18px 22px;border-radius:6px;
  font-size:calc(12px * var(--fs-body));line-height:1.9
}
.form-notice.is-success{background:#eef4f0;border:1px solid #c8d7d1;color:#26343c}
.form-notice.is-error{background:#fdf0f0;border:1px solid #e9c3c3;color:#7a2a2a}

.entry-fields{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.entry-field.is-full{grid-column:1/-1}
/* 受付フォーム：ご相談内容で出し分ける項目・資料のチェック（2026-11-05） */
.entry-field[hidden]{display:none!important}
.entry-label{display:block;margin-bottom:10px;font-size:calc(11px * var(--fs-body));font-weight:700;letter-spacing:.04em;color:var(--ink)}
.entry-checks{display:flex;flex-wrap:wrap;gap:10px 22px}
.entry-checks label{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:calc(12.5px * var(--fs-body));font-weight:500;cursor:pointer}
.entry-field .entry-checks input{width:18px;height:18px;padding:0;accent-color:var(--navy)}
.entry-field label{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:calc(11px * var(--fs-body));font-weight:700;letter-spacing:.04em;color:var(--ink)
}
.entry-field .req{
  font-size:calc(9px * var(--fs-body));font-weight:700;letter-spacing:.08em;
  color:#b03a3a;border:1px solid #e3c2c2;border-radius:3px;padding:2px 6px
}
.entry-field input,
.entry-field select,
.entry-field textarea{
  width:100%;background:#fff;border:1px solid #d6d8d5;border-radius:3px;
  padding:15px 18px;font-size:calc(14px * var(--fs-body));line-height:1.6;color:var(--ink);
  font-family:inherit;transition:border-color .25s,box-shadow .25s
}
.entry-field textarea{resize:vertical;min-height:190px}
.entry-field select{
  appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px),calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat
}
.entry-field input::placeholder,
.entry-field textarea::placeholder{color:#9aa2a6}
.entry-field input:focus,
.entry-field select:focus,
.entry-field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,27,37,.07)
}

.entry-privacy{
  margin:26px 0 0;font-size:calc(10.5px * var(--fs-body));line-height:1.9;color:var(--muted)
}
.entry-privacy a{text-decoration:underline;text-underline-offset:3px}

.entry-submit{
  margin-top:32px;display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;border:0;border-radius:0;cursor:pointer;
  padding:22px 44px;font-size:calc(12px * var(--fs-body));font-weight:700;letter-spacing:.08em;
  transition:background .3s,transform .3s
}
.entry-submit:hover{background:var(--navy);transform:translateY(-2px)}

.entry-extra{margin:90px auto 0;max-width:760px}

@media(max-width:900px){
  .entry-page{padding:44px 20px 80px}
  .entry-page.is-contact>*{padding-left:20px;padding-right:20px}
  .entry-head{grid-template-columns:1fr;gap:22px;margin-bottom:48px}
  .entry-body{grid-template-columns:1fr;gap:46px}
  .entry-fields{grid-template-columns:1fr}
  .entry-steps a{padding:22px 4px}
  .entry-submit{width:100%;justify-content:center;padding:20px 24px}
}

/* SNSカードのクラス名について
   もとは social-xxx という名前だったが、iOSのSafariに入っている
   コンテンツブロッカーが「social」を含むクラスをSNS追跡ボタンとみなして
   非表示にしてしまうため、mlink-xxx に改名した。戻さないこと。 */

/* SNSアイコンを画像に差し替え（各ロゴの形をそのまま活かす） */
.mlink-icon.is-image{
  width:112px;height:112px;border:0;border-radius:0;background:none;
  margin-bottom:22px;padding:0;font-size:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .45s var(--ease)
}
.mlink-icon.is-image img{
  width:100%;height:100%;object-fit:contain;display:block
}
.mlink-card:hover .mlink-icon.is-image{transform:translateY(-4px) scale(1.04)}

/* SNSアイコン：加工していない公式グリフを単色で表示（他3カードと同じ丸枠に統一） */
.mlink-icon.is-glyph{
  border:1px solid #222;
  border-radius:50%;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease)
}
.mlink-icon.is-glyph svg{width:28px;height:28px;fill:currentColor;display:block}
.mlink-card:hover .mlink-icon.is-glyph{background:var(--ink);color:#fff}

/* SNSカード：公式グリフ＋余白＋秋田の特産アイコン */
.mlink-icons{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px
}
.mlink-icons .mlink-icon{margin-bottom:0;flex:none}
.mlink-motif{
  object-fit:contain;
  display:block;
  flex:none;
  transition:transform .5s var(--ease)
}
.mlink-card:hover .mlink-motif{transform:translateY(-4px) scale(1.04)}

/* SNSカード：無加工のカラー公式ロゴ（丸枠なし・形をそのまま活かす） */
.mlink-icon.is-brand{
  border:0;
  border-radius:0;
  background:none;
  margin-bottom:0;
  padding:0;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .5s var(--ease)
}
.mlink-icon.is-brand img{width:100%;height:100%;object-fit:contain;display:block}
.mlink-card:hover .mlink-icon.is-brand{transform:translateY(-4px) scale(1.04)}

/* =========================================================
   ヒーロー：映像はそのまま見せる（白ベールを外す）
   ========================================================= */
.hero-static-bg:after{background:none!important}
/* ベールが無くなる分、法人名は白いにじみを強めて可読性を確保 */
.hero-title-static .brand-line{
  text-shadow:0 2px 20px rgba(255,255,255,.85),0 1px 4px rgba(255,255,255,.95),0 0 2px rgba(255,255,255,.9)!important
}
.hero-title-static .small{
  text-shadow:0 1px 8px rgba(255,255,255,.9)!important
}

/* =========================================================
   SNSカード：カード全体をリンクに／アイコンを大きく・近づける
   ========================================================= */
a.mlink-card{color:inherit;text-decoration:none;cursor:pointer}
a.mlink-card:hover{background:#fafafa}
a.mlink-card:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

.mlink-icons{gap:12px;min-height:120px}
.mlink-icon.is-brand{width:116px;height:116px}
.mlink-motif{width:120px;height:120px}
.mlink-icon.is-glyph{width:84px;height:84px}
.mlink-icon.is-glyph.is-plus{font-size:calc(40px * var(--fs-body))}

@media(max-width:900px){
  .mlink-icons{gap:10px;min-height:96px}
  .mlink-icon.is-brand{width:92px;height:92px}
  .mlink-motif{width:96px;height:96px}
}

/* =========================================================
   スマートフォン最適化（〜640px）
   ヒーローを縦積みにし、重なり・はみ出しを解消する
   ========================================================= */
@media(max-width:640px){

  /* --- ヘッダー：ロゴが1行に収まるように --- */
  .logo-sub{display:none!important}
  .logo-word{font-size:calc(17px * var(--fs-heading))!important;letter-spacing:.04em!important}

  /* --- ヒーロー：テキストは映像の中に重ねる（縦長の映像で余白を確保） --- */
  .hero.hero-static{
  display:block!important
}
  .hero-title-static{
    position:absolute!important;z-index:5!important;
    left:20px!important;right:20px!important;top:96px!important;bottom:auto!important;
    width:auto!important;max-width:none!important;padding:0!important;background:none!important;
    text-align:left!important
  }
  .hero-title-static .small{
  letter-spacing:.18em!important
}
  .hero-title-static .brand-line{
  white-space:nowrap
}
  .hero-message-static{
    position:absolute!important;z-index:5!important;
    left:20px!important;right:20px!important;bottom:22px!important;top:auto!important;
    width:auto!important;max-width:none!important;text-align:left!important;
    padding:16px 17px 18px!important;border-left:5px solid #ef2428!important;
    background:rgba(255,255,255,.74)!important;box-shadow:none!important
  }
  .hero-message-static h1{
    white-space:normal!important;
    font-size:calc(25px * var(--fs-heading))!important;line-height:1.16!important;margin:0 0 10px!important
  }
  .hero-message-static .hero-lead-bold{
    font-size:calc(12px * var(--fs-body))!important;line-height:1.65!important;margin:0 0 6px!important
  }
  .hero-message-static>p:last-child{
    font-size:calc(10px * var(--fs-body))!important;line-height:1.8!important
  }
  .hero-message-static .hero-lead-bold,
  .hero-message-static>p:last-child{
    max-width:none!important;margin-left:0!important;margin-right:0!important
  }

  /* --- 代表あいさつ：ポートレートが「Message」の見出しに重なるのを解消 --- */
  .message-feature{min-height:0!important}
  #people .message-portrait,.message-portrait{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  display:block!important;
  overflow:hidden!important
}
  #people .message-portrait img,.message-portrait img{
  position:relative!important;
  display:block!important;
  height:auto!important;
  max-height:none!important
}
  .message-copy{padding:38px 20px 55px!important}
  .message-heading{margin-bottom:30px!important}
  .message-en{font-size:calc(40px * var(--fs-heading))!important}
  .message-copy h3{font-size:calc(22px * var(--fs-heading))!important;line-height:1.5!important}

  /* --- 事業内容：円の関係図は狭い画面で重なるため非表示。下の一覧で内容は伝わる --- */
  .service-diagram{display:none!important}
  .service-principle{padding:26px 20px 28px!important}
  .service-principle h3{font-size:calc(22px * var(--fs-heading))!important;line-height:1.5!important}

  /* --- 研修・セミナー：写真が見出しに重ならないよう縦積みに --- */
  .who-grid{gap:44px!important}
  .who-tile{min-height:0!important}
  .who-copy h3{font-size:calc(40px * var(--fs-heading))!important}
  .who-copy span{font-size:calc(13px * var(--fs-body))!important}
  .who-photo{
    position:relative!important;right:auto!important;top:auto!important;
    width:100%!important;height:200px!important;margin-top:16px!important
  }
  .who-tile:hover .who-photo{transform:none!important;width:100%!important}
  .who-arrow{
    position:relative!important;left:auto!important;bottom:auto!important;
    margin-top:18px!important;width:46px!important;height:46px!important
  }

  /* --- 余白の調整 --- */
  .section{padding:64px 20px!important}
}

/* モバイルメニュー：ヘッダーの backdrop-filter が固定配置の基準になり、
   開いたメニューがヘッダーの高さで切れてしまうため、開いている間だけ無効化する */
@media(max-width:900px){
  body.nav-open .header{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:#fff!important
  }
}

/* =========================================================
   実績・事例：CASE 01 のビジュアルにイラストを配置
   ========================================================= */
.case-visual{background:#dff2fa!important}
.case-visual img{
  filter:none!important;object-fit:cover;object-position:center;display:block
}
/* 明るいイラストの上でも「CASE STUDY」の文字が読めるように */
.case-visual:before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:1;
  background:linear-gradient(0deg,rgba(12,32,45,.42),rgba(12,32,45,0));pointer-events:none
}
.case-visual:after{z-index:2}

/* SNSアイコン：picture 要素でも並びが崩れないように */
.mlink-icons picture{display:block;flex:none;line-height:0}
.mlink-icon.is-brand picture{width:100%;height:100%}

/* =========================================================
   How We Work（研修・セミナー）：背景にイラストを敷く
   ========================================================= */
.who-style{
  position:relative;
  background:#fff url(../img/section/how-we-work-bg.webp) center top / 800px 800px repeat!important;
  isolation:isolate
}
/* 白いベールで透過を調整（文字の可読性を確保） */
.who-style:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.62) 45%,rgba(255,255,255,.78) 100%)
}
.who-header,
.who-grid,
.who-footer{position:relative;z-index:1}
/* タイルの見出しは背景の線画と重なるので、ごく淡い白のにじみで浮かせる */
.who-copy h3{text-shadow:0 1px 12px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.85)}
.who-copy span{text-shadow:0 1px 8px rgba(255,255,255,.9)}
@media(max-width:640px){
  .who-style{background-size:480px 480px!important;background-position:center top!important}
  .who-style:before{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.72))}
}

/* =========================================================
   理事一覧：ストライプの背景を敷く
   ========================================================= */
.officers{
  isolation:isolate
}
/* 白いベールで濃度を調整（カード内の文字の可読性を確保） */
.officers:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none
}
.officers-head,
.officers-viewport{position:relative;z-index:1}
/* 名前・肩書きが縞に沈まないよう、ごく淡い白のにじみを添える */
.officer-name,.officer-role,.officer-org{text-shadow:0 0 5px rgba(255,255,255,.98),0 1px 10px rgba(255,255,255,.92)}

/* =========================================================
   How We Work：写真の左側（矢印のスペース）を紺色のボックスに
   ========================================================= */
.who-tile{isolation:isolate}
.who-tile:before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:0;top:110px;width:32%;height:240px;
  background:var(--navy);border-radius:10px
}
.who-photo{z-index:2}
.who-copy{z-index:3}
/* 矢印は紺のボックスの中に置き、白抜きにする */
.who-arrow{
  z-index:4;left:26px;bottom:50px;
  border-color:rgba(255,255,255,.55);color:#fff;background:transparent
}
.who-tile:hover .who-arrow{background:#f1262c;border-color:#f1262c;color:#fff}

@media(max-width:900px) and (min-width:641px){
  .who-tile:before{top:95px;height:190px;width:30%}
  .who-arrow{left:20px;bottom:42px}
}
/* スマホは縦積みなのでボックスは置かず、矢印だけ紺の丸に */
@media(max-width:640px){
  .who-tile:before{display:none}
  .who-arrow{
    left:auto;bottom:auto;background:var(--navy);border-color:var(--navy);color:#fff
  }
}

/* 管理画面で「||」を入れたときの、パソコンだけの改行 */
.br-pc{display:inline}
@media(max-width:640px){ .br-pc{display:none} }

/* =========================================================
   文書ページ（プライバシーポリシー等）
   ========================================================= */
.doc-page{max-width:900px;margin:0 auto;padding:80px 28px 110px}
.doc-head{border-bottom:2px solid var(--ink);padding-bottom:26px;margin-bottom:46px}
.doc-head .kicker{display:block;margin-bottom:16px}
.doc-head h1{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(28px,3.6vw,44px) * var(--fs-heading));
  line-height:1.35;letter-spacing:-.03em;color:var(--ink)
}
.doc-updated{margin:16px 0 0;font-size:calc(10.5px * var(--fs-body));color:var(--muted);letter-spacing:.04em}

.doc-body{font-size:calc(13px * var(--fs-body));line-height:2.05;color:#39454d}
.doc-body h2{
  margin:52px 0 18px;padding-left:14px;border-left:4px solid var(--navy);
  font-size:calc(17px * var(--fs-heading));line-height:1.6;font-weight:700;color:var(--ink)
}
.doc-body h3{margin:34px 0 12px;font-size:calc(14px * var(--fs-heading));font-weight:700;color:var(--ink)}
.doc-body p{margin:0 0 20px}
.doc-body ul,.doc-body ol{margin:0 0 22px;padding-left:1.4em}
.doc-body li{margin-bottom:9px}
.doc-body a{text-decoration:underline;text-underline-offset:3px}

.doc-foot{
  display:flex;flex-wrap:wrap;gap:14px 32px;margin-top:70px;padding-top:26px;
  border-top:1px solid var(--line)
}
.doc-foot a{font-size:calc(11.5px * var(--fs-body));font-weight:700;letter-spacing:.04em}
.doc-foot a:hover{color:var(--navy)}

/* =========================================================
   団体概要
   ========================================================= */
.about-page{max-width:1400px;margin:0 auto;padding:80px 28px 110px}

.about-head{
  display:grid;grid-template-columns:1.1fr 1fr;gap:30px 7vw;align-items:start;margin-bottom:58px
}
.about-head .kicker{display:block;margin-bottom:18px}
.about-title{
  margin:0;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:900;
  font-size:calc(clamp(46px,7.4vw,104px) * var(--fs-heading));
  line-height:.95;letter-spacing:-.05em;color:var(--ink)
}
.about-lead{
  margin:0;padding-top:14px;font-size:calc(12.5px * var(--fs-body));line-height:2;color:var(--muted);max-width:46ch
}

.about-panels{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.about-message{
  background:#d2ff00;color:#0d1a10;padding:70px 6% 60px;
  display:flex;flex-direction:column;justify-content:center
}
.about-message-label{
  font-family:Arial,"Helvetica Neue",sans-serif;font-size:calc(10px * var(--fs-body));
  letter-spacing:.24em;font-weight:700;margin-bottom:26px;display:block
}
.about-message h2{
  margin:0 0 30px;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:900;
  font-size:calc(clamp(34px,4.6vw,64px) * var(--fs-heading));
  line-height:1.08;letter-spacing:-.045em
}
.about-message p{margin:0;font-size:calc(11.5px * var(--fs-body));line-height:2;color:#26361b}

.about-info{background:#fff;padding:64px 6% 56px}
.about-info-label{
  display:block;font-family:Arial,"Helvetica Neue",sans-serif;font-size:calc(10px * var(--fs-body));
  letter-spacing:.22em;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--ink)
}
.about-table{margin:0}
.about-row{
  display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line-soft,#e7ebee)
}
.about-row dt{margin:0;font-size:calc(10.5px * var(--fs-body));color:var(--muted);letter-spacing:.06em}
.about-row dd{margin:0;font-size:calc(12px * var(--fs-body));font-weight:700;line-height:1.8;color:var(--ink)}

/* --- アクセス・地図 --- */
.about-access{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:0;margin-top:80px;
  background:#fff;border:1px solid var(--line)
}
.about-access-head{padding:56px 5% 50px;display:flex;flex-direction:column;justify-content:center}
.about-access-head .kicker{display:block;margin-bottom:14px}
.about-access-head h2{
  margin:0 0 24px;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(26px,2.8vw,40px) * var(--fs-heading));line-height:1.3;letter-spacing:-.04em
}
.about-address{margin:0 0 16px;font-size:calc(13px * var(--fs-body));font-weight:700;line-height:1.9;color:var(--ink)}
.about-access-note{margin:0 0 24px;font-size:calc(11.5px * var(--fs-body));line-height:2;color:var(--muted)}
.about-map-link{font-size:calc(11.5px * var(--fs-body));font-weight:700;letter-spacing:.04em}
.about-map-link:hover{color:var(--navy)}
.about-map{min-height:420px;background:#eef2f4}
.about-map iframe{display:block;width:100%;height:100%;min-height:420px}

.about-extra{max-width:820px;margin:70px auto 0}

@media(max-width:900px){
  .about-page{padding:52px 20px 80px}
  .about-head{grid-template-columns:1fr;gap:18px;margin-bottom:34px}
  .about-lead{padding-top:0}
  .about-panels{grid-template-columns:1fr}
  .about-message{padding:44px 24px 40px}
  .about-info{padding:40px 24px 34px}
  .about-row{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .about-access{grid-template-columns:1fr;margin-top:48px}
  .about-access-head{padding:36px 24px 30px}
  .about-map,.about-map iframe{min-height:300px}
}

/* =========================================================
   会員ページ
   ========================================================= */
.members-page{max-width:1120px;margin:0 auto;padding:80px 28px 110px}
.members-head{border-bottom:2px solid var(--ink);padding-bottom:24px;margin-bottom:48px}
.members-head .kicker{display:block;margin-bottom:16px}
.members-head h1{
  margin:0;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:800;
  font-size:calc(clamp(34px,4.6vw,62px) * var(--fs-heading));line-height:1.05;letter-spacing:-.05em
}

/* --- ログイン前 --- */
.members-gate{display:grid;grid-template-columns:1fr .85fr;gap:60px 7vw;align-items:start}
.members-lead{margin:0 0 22px;font-size:calc(13px * var(--fs-body));line-height:2.05;color:var(--ink)}
.members-help{margin:0 0 20px;font-size:calc(11.5px * var(--fs-body));line-height:2;color:var(--muted)}
.members-contact-link{font-size:calc(11.5px * var(--fs-body));font-weight:700}
.members-contact-link:hover{color:var(--navy)}

.members-login{background:#fff;border:1px solid var(--line);padding:36px 34px 34px}
.members-login h2{margin:0 0 24px;font-size:calc(15px * var(--fs-heading));font-weight:700;letter-spacing:.02em}
.members-login label{
  display:block;margin-bottom:8px;font-size:calc(11px * var(--fs-body));font-weight:700;color:var(--ink)
}
.members-login .login-username,
.members-login .login-password{margin-bottom:20px}
.members-login input[type=text],
.members-login input[type=password]{
  width:100%;background:#fff;border:1px solid #d6d8d5;border-radius:3px;
  padding:14px 16px;font-size:calc(14px * var(--fs-body));font-family:inherit;color:var(--ink)
}
.members-login input[type=text]:focus,
.members-login input[type=password]:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,27,37,.07)
}
.members-login .login-remember{margin-bottom:22px;font-size:calc(11px * var(--fs-body));color:var(--muted)}
.members-login .login-remember label{display:inline;font-weight:400;color:var(--muted)}
.members-login input[type=submit]{
  width:100%;background:var(--ink);color:#fff;border:0;cursor:pointer;
  padding:18px 24px;font-size:calc(12px * var(--fs-body));font-weight:700;letter-spacing:.08em;
  transition:background .3s
}
.members-login input[type=submit]:hover{background:var(--navy)}
.members-lost{display:inline-block;margin-top:18px;font-size:calc(10.5px * var(--fs-body));color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* --- ログイン後 --- */
.members-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border:1px solid var(--line);padding:16px 22px;margin-bottom:44px
}
.members-bar p{margin:0;font-size:calc(11.5px * var(--fs-body));color:var(--muted)}
.members-bar strong{color:var(--ink)}
.members-bar a{font-size:calc(11px * var(--fs-body));font-weight:700}
.members-bar a:hover{color:var(--navy)}

.members-welcome{
  margin:0 0 30px;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(22px,2.4vw,32px) * var(--fs-heading));letter-spacing:-.04em
}
.members-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.members-card{background:#fff;border:1px solid var(--line);padding:26px 26px 28px;display:flex;flex-direction:column}
.members-thumb{margin:-26px -26px 20px;overflow:hidden}
.members-thumb img{display:block;width:100%;height:auto}
.members-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.members-date{font-size:calc(10px * var(--fs-body));letter-spacing:.1em;color:var(--muted);font-weight:700}
.members-cat{
  font-size:calc(9.5px * var(--fs-body));letter-spacing:.08em;font-weight:700;
  background:#eef2f4;color:var(--navy);border-radius:999px;padding:4px 12px
}
.members-card h3{margin:0 0 14px;font-size:calc(15px * var(--fs-heading));line-height:1.6;font-weight:700}
.members-desc{font-size:calc(11.5px * var(--fs-body));line-height:1.95;color:var(--muted)}
.members-desc p{margin:0 0 12px}
.members-video{margin:16px 0 4px}
.members-video iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block}
.members-file{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;background:var(--ink);color:#fff;
  font-size:calc(11.5px * var(--fs-body));font-weight:700;letter-spacing:.04em;transition:background .3s
}
.members-file:hover{background:var(--navy);color:#fff}
.members-file span{font-size:calc(9.5px * var(--fs-body));font-weight:400;opacity:.8;letter-spacing:.06em}
.members-empty{
  background:#fff;border:1px dashed var(--line);padding:44px 28px;text-align:center;
  font-size:calc(12px * var(--fs-body));color:var(--muted)
}

@media(max-width:900px){
  .members-page{padding:52px 20px 80px}
  .members-gate{grid-template-columns:1fr;gap:36px}
  .members-grid{grid-template-columns:1fr;gap:24px}
  .members-login{padding:28px 22px 26px}
}

/* ヘッダーの「会員ページ」だけボタン風にして、他のメニューと区別する */
.nav .nav-members{
  background:var(--navy);color:#fff;border-radius:999px;padding:9px 18px!important;
  transition:background .3s
}
.nav .nav-members:hover{background:var(--ink);color:#fff}
.nav .nav-members:after{display:none}
@media(max-width:900px){
  body.nav-open .nav .nav-members{
    display:inline-block;margin-top:14px;border-bottom:0!important;padding:14px 24px!important
  }
}

/* =========================================================
   画面幅に合わせて全体が比例して縮む（901px以上）
   基準：横1512px。固定pxで残っていた箇所を画面幅比に置き換える。
   ========================================================= */
@media(min-width:901px){

  /* 代表あいさつ：ポートレートが縮まず大きいままになる問題 */
  .message-feature{min-height:clamp(400px,41vw,620px)!important}
  .message-portrait{min-height:clamp(400px,41vw,620px)!important}
  .message-portrait img{
    max-width:clamp(420px,52vw,790px)!important;
    max-height:clamp(400px,41vw,620px)!important
  }

  /* 事業内容の関係図 */
  .service-diagram{min-height:clamp(520px,51.6vw,780px)!important}
  .service-diagram .diagram-node,
  .service-diagram .diagram-core{
    width:clamp(190px,19.2vw,290px)!important;
    height:clamp(190px,19.2vw,290px)!important
  }

  /* 研修・セミナーの4タイル */
  .who-tile{min-height:clamp(280px,23vw,350px)}
  .who-photo{height:clamp(220px,18.5vw,280px);top:clamp(52px,4.6vw,70px)}
  .who-tile:before{top:clamp(84px,7.3vw,110px);height:clamp(180px,15.9vw,240px)}

  /* 実績・事例のビジュアル */
  .case-hero{min-height:clamp(400px,34.4vw,520px)}

  /* 団体概要の地図 */
  .about-map,.about-map iframe{min-height:clamp(320px,27.8vw,420px)}
}

/* =========================================================
   日本語の改行を自然な位置にする
   ・見出し … 行の長さを揃えて「1文字だけ次の行」を防ぐ
   ・本文   … 文節の切れ目で折り返す（Chrome / Edge）
   ========================================================= */
:where(h1,h2,h3,h4,h5,p,li,dt,dd,figcaption,.lead,.h2,.label,.business-desc,
       .officer-org,.who-copy span,.mag-card p,.entry-lead,.about-lead){
  word-break:auto-phrase;
  line-break:strict;
}
h1,h2,h3,h4,.h2,
.hero-message-static h1,
.who-copy h3,
.about-title,
.about-message h2,
.doc-head h1,
.members-head h1,
.case-copy h3,
.service-principle h3{
  text-wrap:balance;
}
p,.lead,.mission-copy,.entry-lead,.members-lead,.about-lead,.doc-body p{
  text-wrap:pretty;
}

/* 代表ポートレート：横幅だけでなく画面の高さにも合わせて縮める。
   （ウィンドウを低くしたときに、ヒーロー動画だけ小さくなって
     写真が大きいまま残ってしまうのを防ぐ） */
@media(min-width:901px){
  #people .message-portrait,.message-portrait{
  align-items:flex-end!important;
  justify-content:center!important;
  display:flex!important
}
  #people .message-portrait img,.message-portrait img{
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center bottom!important
}
}

/* =========================================================
   ヒーロー動画：ウィンドウの高さに左右されず、常に同じ比率で表示
   （画面を低くしたときだけ動画が縮む現象をなくす）
   ========================================================= */
@media(min-width:901px){
  /* 写真も高さ連動をやめ、横幅だけに比例させて動画と歩調を合わせる */
  #people .message-feature,
  .message-feature{min-height:clamp(400px,41vw,620px)!important}
  #people .message-portrait,
  .message-portrait{min-height:clamp(400px,41vw,620px)!important}
  #people .message-portrait img,
  .message-portrait img{
    max-width:min(100%,clamp(420px,52vw,790px))!important;
    max-height:clamp(400px,41vw,620px)!important
  }
}

/* =========================================================
   事業内容の関係図：背景を明るいイラストに差し替え
   ========================================================= */
/* 明るい背景に合わせて、内側の点線と円の見え方を調整 */
.service-diagram:before{border-color:rgba(74,61,46,.30)!important}
.service-diagram:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none
}
/* 明るい背景の上でも円がはっきり浮くよう、白地＋影を強める */
.service-diagram .diagram-node,
.service-diagram .diagram-core{
  background:rgba(255,255,255,.95)!important;
  border-color:rgba(74,61,46,.38)!important;
  box-shadow:0 16px 40px rgba(80,66,45,.22),0 2px 6px rgba(80,66,45,.10)!important
}

/* =========================================================
   関係図：背景にごく薄い水色を重ね、円に控えめな色の変化をつける
   ========================================================= */
/* 背景イラストの上に薄い水色のベール（柄は透けたまま、全体が涼しげになる） */
.service-diagram:after{
  background:linear-gradient(180deg,rgba(226,241,248,.46),rgba(214,234,243,.40))!important
}
/* 下地の色も水色寄りに（画像が読み込まれる前もちらつかない） */
.service-diagram{
  background:url("../img/diagram-bg.webp") center/cover no-repeat,#eaf3f8!important
}

/* 5つの円：それぞれ違う色みを、ごく淡く。中央だけ温かいクリームで主役に */
.service-diagram .diagram-node{background:rgba(255,255,255,.94)!important}
.service-diagram .diagram-core{
  background:rgba(253,246,230,.97)!important;border-color:rgba(140,110,58,.42)!important
}

/* =========================================================
   理事一覧：背景を波と山のイラストに差し替え
   ========================================================= */
.officers{
  border-radius:6px
}

/* =========================================================
   モーション（assets/js/motion.js と対）
   効果ごとにブロックを分けてあるので、不要なものは丸ごと削除できる
   ========================================================= */

/* ---------- ② 大見出しが行ごとに立ち上がる ---------- */
.has-lines .ln{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em
}
.has-lines .ln-i{
  display:inline-block;
  transform:translateY(108%);
  opacity:0
}
.has-lines.lines-in .ln-i{transform:translateY(0);opacity:1}

/* パネルの背景も、文字に少し遅れて広がる */
.has-hero-seq .hero-static.hero-ready .hero-message-static{clip-path:inset(0 0 0 0)}

/* 映像をゆっくりズームさせて、引きの絵に呼吸を与える */
.hero-static-video{animation:heroDrift 34s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.06)}}

/* ---------- ⑤ 写真が下から開く ---------- */
.mask-up{clip-path:inset(100% 0 0 0)}
.mask-up.mask-in{clip-path:inset(0 0 0 0)}

/* ---------- ⑥ ヘッダーの挙動 ---------- */
body.is-scrolled .header{
  height:60px;box-shadow:0 1px 0 rgba(16,27,37,.08),0 8px 24px rgba(16,27,37,.06)
}
body.is-scrolled .logo-word{font-size:calc(16px * var(--fs-heading))}
body.is-scrolled .logo-sub{opacity:0;transition:opacity .3s ease}
body.nav-hidden .header{transform:translateY(-100%)}

/* ---------- ⑦ 読み進みバー ---------- */
.scroll-progress{
  position:fixed;left:0;top:0;z-index:120;
  width:100%;height:3px;background:#f1262c;
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none
}
body.nav-hidden .scroll-progress{opacity:.9}

/* ---------- 動きを減らす設定のときは全部止める ---------- */
@media(prefers-reduced-motion:reduce){
  .has-lines .ln-i{transform:none!important;opacity:1!important;transition:none!important}
  .has-hero-seq .hero-static .hero-title-static .small,
  .has-hero-seq .hero-static .hero-title-static .brand-line,
  .has-hero-seq .hero-static .hero-message-static h1,
  .has-hero-seq .hero-static .hero-message-static .hero-lead-bold,
  .has-hero-seq .hero-static .hero-message-static>p:last-child{opacity:1!important;transform:none!important;transition:none!important}
  .has-hero-seq .hero-message-static{transition:none!important}
  .hero-static-video{animation:none!important}
  .mask-up{clip-path:none!important;transition:none!important}
  .header{transition:none!important}
  body.nav-hidden .header{transform:none!important}
  .scroll-progress{display:none}
}

/* =========================================================
   ヒーロー：最初の画面が「ヘッダー＋映像」でちょうど埋まる高さに
   （ヘッダーとの間の黒帯もなくす）
   ========================================================= */
.hero.hero-static{
  padding:var(--hero-pad,88px) 0 0!important;   /* ヘッダーの高さちょうど＝隙間なし */
  background:#fff!important;        /* 余白が出ても黒帯にならないように */
  overflow:hidden!important
}
.hero-static-bg{
  width:100%!important;
  aspect-ratio:auto!important;
  height:calc(100vh - 88px)!important;
  height:var(--hero-h,calc(100svh - 88px))!important;   /* JSで実測した高さ */
  max-height:none!important;
  min-height:380px
}
.hero-static-video{
  width:100%!important;height:100%!important;object-fit:cover!important
}

/* =========================================================
   見出しの行分割の不具合を修正
   ・親の span 用スタイルを継いで小さくなるのを防ぐ
   ・右端の文字が切れるのを防ぐ
   ========================================================= */
.has-lines .ln,
.has-lines .ln-i{
  font:inherit!important;
  letter-spacing:inherit!important;
  color:inherit!important;
  background:none!important;
  text-transform:inherit!important;
  margin-top:0!important
}
.has-lines .ln{
  padding-right:.10em;margin-right:-.10em;
  padding-left:.02em;margin-left:-.02em
}

/* =========================================================
   オープニング中はスクロール禁止
   ========================================================= */
body.opening-lock{overflow:hidden!important;touch-action:none}

/* =========================================================
   ヒーロー：メニューを映像の上に重ね、画面いっぱいを映像にする
   （不要なら motion.js の heroOverlay を false にする）
   ========================================================= */
body.hero-overlay .hero.hero-static{padding-top:0!important}
body.hero-overlay:not(.is-scrolled) .header{
  background:transparent!important;
  box-shadow:none!important;
  border-bottom:0!important
}
/* 映像の上でもロゴとメニューが読めるよう、上部にごく淡い白のかすみを敷く */
body.hero-overlay:not(.is-scrolled) .header:after{
  content:"";position:absolute;left:0;right:0;top:0;height:180%;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 42%,rgba(255,255,255,0) 100%);
  pointer-events:none
}
/* 見出しがメニューと重ならないよう、ヘッダーの高さ分だけ下げる */
body.hero-overlay .hero-title-static{
  top:calc(var(--hdr-h,88px) + 4vh)!important
}
@media(max-width:640px){
  body.hero-overlay .hero-title-static{top:calc(var(--hdr-h,76px) + 3vh)!important}
}

/* =========================================================
   ヒーローの登場：先に「自殺対策を、インフラに。」、
   2秒おいて法人名。どちらも下からゆっくり浮き上がる
   （前の指定を上書きするため、後ろに置いている）
   ========================================================= */
.has-hero-seq .hero-static .hero-title-static .small,
.has-hero-seq .hero-static .hero-title-static .brand-line,
.has-hero-seq .hero-static .hero-message-static h1,
.has-hero-seq .hero-static .hero-message-static .hero-lead-bold,
.has-hero-seq .hero-static .hero-message-static>p:last-child{
  opacity:0;transform:translateY(46px);
  transition:opacity 1.6s ease,transform 1.9s cubic-bezier(.16,.7,.2,1)
}
/* ① メインコピー（0秒〜） */
.has-hero-seq .hero-static.hero-ready .hero-message-static h1{opacity:1;transform:none;transition-delay:0s}
.has-hero-seq .hero-static.hero-ready .hero-message-static .hero-lead-bold{opacity:1;transform:none;transition-delay:.35s}
.has-hero-seq .hero-static.hero-ready .hero-message-static>p:last-child{opacity:1;transform:none;transition-delay:.65s}
/* ② 法人名（2秒後） */
.has-hero-seq .hero-static.hero-ready .hero-title-static .small{opacity:1;transform:none;transition-delay:2.0s}
.has-hero-seq .hero-static.hero-ready .hero-title-static .brand-line{opacity:1;transform:none;transition-delay:2.2s}
/* パネルの白背景も、文字と一緒にゆっくり現れる */
.has-hero-seq .hero-message-static{
  clip-path:none!important;
  opacity:0;transition:opacity 1.8s ease .05s
}
.has-hero-seq .hero-static.hero-ready .hero-message-static{opacity:1}

/* =========================================================
   理事一覧：秋田犬が右から歩いてきて、背景と理事を引っ張ってくる
   （不要なら motion.js の akitaWalk を false に）
   ========================================================= */
.officers{position:relative;overflow:hidden}
.officers-dog{
  position:absolute;
  aspect-ratio:640/613;
  pointer-events:none;
  transform:translateX(var(--dogX,0px));
  transition:transform 6s cubic-bezier(.32,.02,.24,1)
}
.officers-dog i{
  display:block;width:100%;height:100%;
  background:url(../img/section/akita-dog.webp) center bottom/contain no-repeat;
  filter:drop-shadow(0 6px 10px rgba(30,50,70,.14))
}
.officers.dog-walking .officers-dog i{animation:dogStep .58s ease-in-out infinite alternate}
@keyframes dogStep{
  from{transform:translateY(0) rotate(-1.4deg)}
  to{transform:translateY(-6px) rotate(1.4deg)}
}
/* 犬が引っ張る：背景と理事の列が、犬と同じ速さで左へ寄ってくる */
.officers{transition:background-position 6s cubic-bezier(.32,.02,.24,1)}
.officers-viewport{
  transform:translateX(var(--pullX,0px));
  transition:transform 6s cubic-bezier(.32,.02,.24,1),opacity 1.2s ease
}
.officers.dog-pending .officers-viewport{opacity:0}
.officers.dog-pending .officers-head{opacity:0;transition:opacity 1s ease}
.officers .officers-head{transition:opacity 1s ease .6s}

@media(prefers-reduced-motion:reduce){
  .officers-dog{transform:none!important;transition:none!important}
  .officers-viewport{transform:none!important;opacity:1!important;transition:none!important}
  .officers .officers-head{opacity:1!important}
}

/* =========================================================
   秋田犬：到着後、帯の中で遊ぶ
   ========================================================= */
/* 3層に分けて、位置・向き・上下動をそれぞれ独立させる */
.officers-dog .dog-face{
  display:block;
  width:100%;
  height:100%;
  transition:transform .55s cubic-bezier(.3,.7,.3,1)
}
.officers-dog i{transform-origin:60% 100%;position:relative}

/* 進行方向で反転 */
.officers-dog.face-right .dog-face{transform:scaleX(-1)}

/* 歩く（遊びの移動中） */
.officers-dog.stepping i{animation:dogStep .5s ease-in-out infinite alternate}

/* 左端で前足をかけて、外に出ようとする */
.officers-dog.rear i{animation:dogScratch .42s ease-in-out infinite alternate}
@keyframes dogScratch{
  from{transform:translate(0,0) rotate(0)}
  to{transform:translate(-3px,-4px) rotate(-3deg)}
}

/* くんくん嗅ぐ */
.officers-dog.sniff i{animation:dogSniff 1.1s ease-in-out infinite}
@keyframes dogSniff{
  0%,100%{transform:translateY(0) rotate(0)}
  40%{transform:translateY(4px) rotate(-4deg)}
  70%{transform:translateY(2px) rotate(-1deg)}
}

@media(prefers-reduced-motion:reduce){
  .officers-dog i,.officers-dog .dog-face{animation:none!important;transition:none!important}
}

/* =========================================================
   秋田犬：帯からはみ出さない／文字と重ならない足元の余白
   ========================================================= */

/* =========================================================
   理事一覧：見出しを帯の外へ／犬が歩ける「すき間」をつくる
   ========================================================= */
/* 背景の高さは元に戻す（足元の余白をやめる） */
.officers{padding:34px 30px 30px!important}
/* 「BOARD MEMBERS 理事一覧」は背景の外（上）に置く */
.officers-head{top:-42px;left:0}

/* 犬：すき間に収まる大きさに */
.officers-dog{
  left:0
}

/* 立ち上がる動作：足元を軸に、体の幅からはみ出しにくい角度で */
.officers-dog .dog-face{transform-origin:50% 100%}

/* 見出しを帯の外（上）に：構造を変えたので位置指定を戻す */
.officers-wrap{margin-top:66px}
.officers-head{position:static!important;margin:0 0 16px!important}
.officers{margin-top:0!important}

/* =========================================================
   秋田犬：立ち上がる向きを反転（頭が上がる）＋サイズを大きく
   ========================================================= */
.officers-dog.rear .dog-face{transform:rotate(22deg) translateY(-5px)!important}
.officers-dog.rear.face-right .dog-face{transform:scaleX(-1) rotate(22deg) translateY(-5px)!important}

.officers-dog{width:78px!important;bottom:14px}
@media(max-width:900px){
  .officers-dog{width:66px!important}
  }
@media(max-width:640px){
  .officers-dog{width:56px!important;bottom:10px}
  }

/* =========================================================
   2回目以降の表示：オープニングを完全に出さない
   （サイト内を回って戻ってきたときにスクロールが固定されない）
   ========================================================= */
html.no-opening .opening{display:none!important;transition:none!important}

/* =========================================================
   事業内容（OUR APPROACH）— 資料のデザインを踏襲した
   モノクロ・エディトリアル構成
   ・巨大英字／全面写真＋アウトライン文字／目盛り図／01-04
   ・写真は管理画面から差し替え可能（未設定時はテーマ同梱画像）
   ========================================================= */
.approach{
  --ap-ink:#0d0d0d;
  --ap-sub:#5c6469;
  background:#fff!important;
  padding:0!important;
  overflow:visible
}
.approach .kicker{color:var(--ap-sub)}

/* --- 巨大英字（文字数から幅いっぱいの大きさを計算） --- */
.ap-word-row{margin:clamp(18px,2.6vw,40px) 0;line-height:.78}
.ap-word{
  display:block;
  font-family:"Arial Black",Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-weight:900;font-style:normal;
  font-size:min(calc(145vw / var(--ap-len,8)),290px);
  letter-spacing:-.045em;line-height:.78;
  color:var(--ap-ink);
  white-space:nowrap
}

/* --- ① 冒頭 --- */
.ap-intro-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.ap-intro-head .kicker{margin-bottom:0}
.ap-intro-h2{
  margin:0;font-size:calc(clamp(15px,1.5vw,21px) * var(--fs-heading));
  font-weight:700;line-height:1.6;letter-spacing:-.02em;color:var(--ap-ink)
}
.ap-intro-foot{
  display:grid;grid-template-columns:1.1fr .9fr;gap:24px 6vw;align-items:end;
  border-top:2px solid var(--ap-ink);padding-top:22px
}
.ap-intro-ja{
  margin:0;font-weight:800;
  font-size:calc(clamp(22px,2.9vw,42px) * var(--fs-heading));
  line-height:1.35;letter-spacing:-.04em;color:var(--ap-ink)
}
.ap-intro-lead{
  margin:0;font-size:calc(12px * var(--fs-body));line-height:2.05;color:var(--ap-sub);
  justify-self:end;max-width:44ch
}

/* --- ② 写真の上の一文 --- */
.ap-panel-statement::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(10,12,14,.66);
  backdrop-filter:saturate(0) contrast(1.05);
  -webkit-backdrop-filter:saturate(0) contrast(1.05)
}
.ap-panel-statement .ap-word{font-size:min(calc(138vw / var(--ap-len,10)),200px)}

/* --- ③ 循環の目盛り図 --- */
.ap-cycle{max-width:1180px;margin:0 auto}
.ap-cycle-h{
  margin:0 0 clamp(34px,4.4vw,62px);
  font-weight:800;color:var(--ap-ink);
  font-size:calc(clamp(24px,3.4vw,50px) * var(--fs-heading));
  line-height:1.35;letter-spacing:-.045em
}
.ap-axis{display:flex;align-items:flex-start;gap:clamp(10px,1.6vw,26px)}
.ap-axis-end{
  flex:0 0 auto;padding-top:calc(clamp(9px,1vw,14px) - 8px);
  font-weight:800;letter-spacing:-.03em;color:var(--ap-ink);
  font-size:calc(clamp(15px,1.9vw,27px) * var(--fs-heading));line-height:1
}
.ap-axis-bar{
  flex:1 1 auto;position:relative;
  border-top:clamp(5px,.6vw,9px) solid var(--ap-ink);
  display:flex;justify-content:space-around;align-items:flex-start
}
.ap-tick{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0}
.ap-tick i{display:block;width:clamp(4px,.45vw,7px);height:clamp(22px,2.6vw,40px);background:var(--ap-ink)}
.ap-tick b{
  margin-top:10px;font-weight:800;color:var(--ap-ink);
  font-size:calc(clamp(10.5px,1.05vw,15px) * var(--fs-body));line-height:1.5;letter-spacing:-.01em
}
.ap-cycle-lead{
  margin:clamp(30px,3.6vw,54px) 0 0;color:var(--ap-ink);font-weight:700;
  font-size:calc(clamp(13px,1.35vw,19px) * var(--fs-body));line-height:1.95;letter-spacing:-.01em;
  max-width:62ch
}

/* --- ④ 01〜04 --- */
.ap-items{list-style:none;margin:0;padding:0}
.ap-item + .ap-item{margin-top:clamp(44px,5vw,86px);padding-top:clamp(44px,5vw,86px);border-top:1px solid #e2e5e7}
.ap-item-link{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,70px);align-items:center;color:inherit;text-decoration:none
}
/* 資料と同じ交互組み：奇数＝文章が左／写真が右、偶数＝写真が左／文章が右。
   縦の英字はいつも外側（画面の端側）に置く。 */
.ap-item-visual{display:flex;align-items:stretch;gap:clamp(8px,1.4vw,22px);
  flex-direction:row;justify-content:flex-start}
.ap-item:nth-child(odd) .ap-item-link{direction:rtl}
.ap-item:nth-child(odd) .ap-item-link>*{direction:ltr}
.ap-item:nth-child(odd) .ap-item-visual{flex-direction:row-reverse;justify-content:flex-start}
.ap-item-en{
  writing-mode:vertical-rl;text-orientation:sideways;
  font-family:"Arial Black",Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:900;
  font-size:clamp(34px,5.4vw,86px);letter-spacing:-.05em;line-height:1;
  color:var(--ap-ink);white-space:nowrap;align-self:center
}
.ap-item-photo{margin:0;flex:0 1 clamp(200px,26vw,340px);background:#e9ecee;overflow:hidden}
.ap-item-photo img{
  display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.75,.2,1)
}
.ap-item-link:hover .ap-item-photo img{transform:scale(1.045)}
.ap-item-photo.is-empty{
  aspect-ratio:3/4;
  background:repeating-linear-gradient(45deg,#e6e9eb 0 10px,#eef1f2 10px 20px)
}

.ap-item-body{max-width:46ch}
.ap-item-num{
  display:block;font-family:"Arial Black",Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:900;
  font-size:clamp(52px,7.4vw,124px);line-height:.85;letter-spacing:-.06em;color:var(--ap-ink);
  margin-bottom:clamp(14px,1.8vw,28px)
}
.ap-item-h{
  margin:0 0 14px;font-weight:800;color:var(--ap-ink);
  font-size:calc(clamp(19px,2.3vw,34px) * var(--fs-heading));line-height:1.45;letter-spacing:-.04em
}
.ap-item-desc{
  margin:0;color:var(--ap-sub);
  font-size:calc(12px * var(--fs-body));line-height:2;letter-spacing:-.005em
}
.ap-item-desc b{color:var(--ap-ink);font-weight:800;margin-right:.7em}
.ap-item-more{
  display:inline-block;margin-top:18px;font-weight:800;letter-spacing:.04em;color:var(--ap-ink);
  font-size:calc(11px * var(--fs-body));
  border-bottom:2px solid var(--ap-ink);padding-bottom:3px;transition:opacity .3s
}
.ap-item-link:hover .ap-item-more{opacity:.55}

/* --- ⑤ 末尾 --- */
.ap-sustain{margin-top:clamp(60px,7vw,110px);text-align:center}
.ap-sustain-label{
  display:block;font-weight:800;color:var(--ap-ink);letter-spacing:.06em;
  font-size:calc(11px * var(--fs-body));margin-bottom:12px
}
.ap-sustain-lead{
  margin:0;font-weight:800;color:var(--ap-ink);letter-spacing:-.03em;
  font-size:calc(clamp(16px,2vw,28px) * var(--fs-heading));line-height:1.5
}
.ap-sustain .ap-word-row{margin-bottom:0}

/* --- タブレット --- */
@media(max-width:900px){
  .ap-intro-foot{grid-template-columns:1fr;gap:16px}
  .ap-intro-lead{justify-self:start}
  .ap-item-link,.ap-item:nth-child(odd) .ap-item-link{grid-template-columns:1fr;gap:22px;direction:ltr}
  .ap-item-visual,.ap-item:nth-child(odd) .ap-item-visual{justify-content:flex-start;flex-direction:row}
  .ap-item-photo{flex:0 1 min(58vw,300px)}
  .ap-item-body{max-width:none}
}

/* --- スマートフォン --- */
@media(max-width:640px){
  .approach{padding:0!important}
  .ap-word{font-size:min(calc(150vw / var(--ap-len,8)),120px)}
  .ap-panel-statement .ap-word{font-size:min(calc(140vw / var(--ap-len,10)),90px)}
  .ap-axis{flex-direction:column;align-items:stretch;gap:0}
  .ap-axis-end{padding:0 0 10px}
  .ap-axis-end:last-child{padding:10px 0 0;text-align:right}
  .ap-axis-bar{
    border-top:0;border-left:5px solid var(--ap-ink);
    flex-direction:column;justify-content:flex-start;gap:18px;padding-left:0
  }
  .ap-tick{flex-direction:row;align-items:center;text-align:left;gap:12px}
  .ap-tick i{width:26px;height:5px}
  .ap-tick b{margin-top:0}
  .ap-item-en{font-size:clamp(26px,8vw,44px);align-self:flex-start}
  .ap-item-visual{align-items:flex-start}
  .ap-item-photo{flex:1 1 auto;aspect-ratio:4/3}
  .ap-item-photo img{height:100%;aspect-ratio:auto}
  .ap-item-num{font-size:64px}
  .ap-item{overflow:hidden}
  .ap-items{overflow:hidden}

  /* 1枚ずつ画面いっぱいに見せるときの余白（固定ヘッダーのぶんを空ける） */

  .ap-panel .ap-word{font-size:min(calc(150vw / var(--ap-len,8)),120px,22svh)}
  .ap-intro-h2{font-size:calc(15px * var(--fs-heading))}
  .ap-cycle-h{font-size:calc(clamp(20px,5.6vw,28px) * var(--fs-heading))}

  /* 循環図の画面が1画面に収まるよう、余白と行間を詰める */
  .ap-panel-cycle .ap-cycle-h{margin-bottom:min(4.4vw,3.2svh)}
  .ap-panel-cycle .ap-axis-bar{gap:min(3.4vw,2.2svh)}
  .ap-panel-cycle .ap-cycle-lead{
    margin-top:min(3.6vw,2.6svh);line-height:1.8;
    font-size:calc(12.5px * var(--fs-body))
  }
  .ap-panel-cycle .ap-axis-end{padding-bottom:min(2.4vw,1.4svh)}
  .ap-panel-cycle .ap-axis-end:last-child{padding-top:min(2.4vw,1.4svh)}
}

/* 画面が低めの端末では、1枚ずつの見せ方をやめて縦に並べる
   （そのぶん、1枚が画面いっぱいの高さになるようにしてある） */

/* =========================================================
   事業内容：冒頭の3画面を「切り替えて」見せる
   ・スクロールに合わせて、いま出ている画面がすっと消え、
     次の画面が下から浮かび上がる
   ・スマホ／動きを減らす設定／画面が低いときは通常の縦並びに戻す
   ========================================================= */
/* 高さ＝1画面ぶん（固定表示）＋ 枚数ぶんのスクロール量。
   1枚あたり画面の38%＝マウスホイール3回ほどで次の画面に変わる。 */
.ap-slides{position:relative;height:calc(100svh + var(--ap-steps,3) * 30svh)}
/* 携帯では吹き出しを最初から出しておき、画面は2枚だけを切り替える。
   そのぶん、この区間の長さも短くする。 */
@media(max-width:640px){
  .ap-slides{height:calc(100svh + 70svh)}
}

.ap-slides-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;background:#fff
}
body.admin-bar .ap-slides-stage{top:32px;height:calc(100svh - 32px)}

.ap-panel{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:calc(var(--hdr-h,88px) + 3vh) 4.2vw 8vh;
  background:#fff;
  opacity:0;
  transform:translateY(34px);
  pointer-events:none
}
.ap-panel-inner{width:100%}
.ap-panel.is-active{
  opacity:1;
  transform:none;
  pointer-events:auto;
  z-index:2
}
/* すでに通り過ぎた画面は、上へ抜けるように消える */
.ap-panel.is-past{opacity:0;transform:translateY(-34px)}

.ap-panel-statement{background:#111 var(--ap-bg,none) center/cover no-repeat;isolation:isolate}

/* 切り替えの瞬間に一度だけ差し込む、淡い幕
   （次の画面の地の色に合わせて色が変わる） */
.ap-slides-veil{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:#fff;opacity:0
}
@keyframes apVeil{
  0%{opacity:0}
  36%{opacity:.92}
  100%{opacity:0}
}

/* 3枚目のあとは、間を空けずに一覧へ続ける */
.ap-rest{
  position:relative;z-index:3;background:#fff;overflow:hidden;
  padding:clamp(56px,6vw,92px) 4.2vw clamp(72px,9vw,130px)
}

/* 画面の高さに合わせて英字と余白も縮める（縦の狭い画面対策） */
@media(min-width:641px) and (min-height:561px){
  .ap-panel .ap-word{font-size:min(calc(145vw / var(--ap-len,8)),290px,28svh)}
  .ap-panel-statement .ap-word{font-size:min(calc(138vw / var(--ap-len,10)),200px,16svh)}
  .ap-panel .ap-word-row{margin:min(2.6vw,3svh) 0}
  .ap-panel-cycle .ap-cycle-h{margin-bottom:min(4.4vw,5svh)}
  .ap-panel-cycle .ap-cycle-lead{margin-top:min(3.6vw,4.4svh)}
}

/* 切り替え演出をやめる条件：通常の縦並びに戻す */
@media(max-height:620px){
  .ap-slides{height:auto}
  .ap-slides-stage{position:static;height:auto;overflow:visible}
  .ap-panel{
  position:relative;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  min-height:100svh;
  padding:calc(var(--hdr-h,64px) + 20px) 20px 44px;
  overflow:hidden
}
  .ap-panel .ap-panel-inner{width:100%}
  body.admin-bar .ap-slides-stage{top:auto;height:auto}
  .ap-panel-statement{padding:44px 20px}
  .ap-slides-veil{display:none}
  .ap-rest{z-index:auto;padding:56px 20px 64px}
}
@media(prefers-reduced-motion:reduce){
  .ap-slides{height:auto}
  .ap-slides-stage{position:static;height:auto;overflow:visible}
  .ap-panel{position:relative;opacity:1!important;transform:none!important;display:block;overflow:hidden}
  .ap-slides-veil{display:none}
}

/* =========================================================
   事業内容：01〜04 が横からスライドして入ってくる
   写真がある側（＝画面の外側）から滑り込ませる。
   奇数（01・03）は右から、偶数（02・04）は左から。
   JavaScriptが動かない環境では、最初から表示された状態になる。
   ========================================================= */
.has-ap-slide .ap-item{
  opacity:0;
  transform:translateX(clamp(40px,7vw,110px))
}
.has-ap-slide .ap-item:nth-child(even){transform:translateX(clamp(-110px,-7vw,-40px))}
.has-ap-slide .ap-item.slide-in{opacity:1;transform:none}

/* 写真が先、文章がわずかに遅れて追いつく */
.has-ap-slide .ap-item-body{
  opacity:0;
  transform:translateX(clamp(14px,2vw,30px))
}
.has-ap-slide .ap-item:nth-child(even) .ap-item-body{transform:translateX(clamp(-30px,-2vw,-14px))}
.has-ap-slide .ap-item.slide-in .ap-item-body{opacity:1;transform:none}

@media(max-width:640px){
  /* スマホは移動量を控えめに（画面が狭いので大きく動かすと落ち着かない） */
  .has-ap-slide .ap-item{transform:translateX(28px)}
  .has-ap-slide .ap-item:nth-child(even){transform:translateX(-28px)}
  .has-ap-slide .ap-item-body{transform:none}
  /* 表示が終わったら必ず元の位置に戻す。
     この打ち消しを書かないと、上の2行が後から効いてしまい、
     02・04が左にずれたまま固定されて文字が画面の外に出てしまう。 */
  .has-ap-slide .ap-item.slide-in,
  .has-ap-slide .ap-item:nth-child(even).slide-in{transform:none}
  .has-ap-slide .ap-item.slide-in .ap-item-body{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .has-ap-slide .ap-item,
  .has-ap-slide .ap-item-body{opacity:1!important;transform:none!important;transition:none!important}
}

/* =========================================================
   モーション全体をゆっくりにする（ヒーロー動画の文字は対象外）
   ・所要時間を長く、始まりを穏やかに
   ・カーブは cubic-bezier(.2,.7,.15,1)（すっと動いて静かに止まる）で統一
   ========================================================= */
.reveal{
  transform:translateY(46px);
  transition:opacity 1.6s cubic-bezier(.2,.7,.15,1),transform 1.9s cubic-bezier(.2,.7,.15,1)
}
.reveal.in{opacity:1;transform:none}

/* 大見出しの行 */
.has-lines .ln-i{
  transition:transform 1.7s cubic-bezier(.2,.7,.15,1),opacity 1.35s cubic-bezier(.2,.7,.15,1)
}

/* 写真が下から開く */
.mask-up{transition:clip-path 1.9s cubic-bezier(.2,.7,.15,1)}

/* ヘッダーの伸縮 */
.header{
  transition:height .6s cubic-bezier(.2,.7,.15,1),
             transform .7s cubic-bezier(.2,.7,.15,1),
             box-shadow .6s ease,background-color .6s ease
}

/* 事業内容 01〜04 の横スライド */
.has-ap-slide .ap-item{
  transition:opacity 1.5s cubic-bezier(.2,.7,.15,1),transform 1.9s cubic-bezier(.2,.7,.15,1)
}
.has-ap-slide .ap-item-body{
  transition:opacity 1.4s cubic-bezier(.2,.7,.15,1) .26s,
             transform 1.75s cubic-bezier(.2,.7,.15,1) .26s
}

/* 事業内容 1〜3枚目の切り替え */
.ap-panel{transition:opacity .6s ease,transform .8s cubic-bezier(.4,0,.6,1)}
.ap-panel.is-active{
  transition:opacity 1.05s ease .45s,transform 1.35s cubic-bezier(.16,.8,.24,1) .40s
}
.ap-slides-veil.flash{animation:apVeil 1.15s cubic-bezier(.4,0,.3,1)}

/* =========================================================
   WHO WE ARE ／ 代表のあいさつ
   上の項目から順に、ゆっくり横からスライドしてくる
   ========================================================= */
#people .intro .kicker,
#people .intro .h2,
#people .intro .lead{
  transform:translateX(-9%);
  transition:opacity 1.9s cubic-bezier(.2,.7,.15,1),transform 2.3s cubic-bezier(.2,.7,.15,1)
}
#people .intro .kicker{transition-delay:0s}
#people .intro .h2{transition-delay:.34s}
#people .intro .lead{transition-delay:.68s}

#people .message-portrait,
#people .message-copy{
  transition:opacity 2.1s cubic-bezier(.2,.7,.15,1),transform 2.5s cubic-bezier(.2,.7,.15,1)
}
#people .message-portrait{transform:translateX(-11%);transition-delay:.1s}
/* 文章側は箱ごとではなく、中の項目を順番に出す */
#people .message-copy{transform:none!important;opacity:1!important;transition:none!important}

#people .message-copy > *{
  opacity:0;transform:translateX(9%);
  transition:opacity 1.7s cubic-bezier(.2,.7,.15,1),transform 2.05s cubic-bezier(.2,.7,.15,1)
}
#people .message-copy > *:nth-child(1){transition-delay:.45s}
#people .message-copy > *:nth-child(2){transition-delay:.70s}
#people .message-copy > *:nth-child(3){transition-delay:.95s}
#people .message-copy > *:nth-child(4){transition-delay:1.20s}
#people .message-copy > *:nth-child(5){transition-delay:1.45s}
#people .message-copy > *:nth-child(6){transition-delay:1.70s}
#people .message-copy > *:nth-child(7){transition-delay:1.95s}
#people .message-copy > *:nth-child(8){transition-delay:2.20s}
#people .message-copy > *:nth-child(n/**/+9){transition-delay:2.45s}
#people .message-feature.slid .message-copy > *{opacity:1;transform:none}

@media(max-width:640px){
  /* スマホは移動量を控えめに、間隔も少し詰める */
  #people .intro .kicker,#people .intro .h2,#people .intro .lead{transform:translateX(-16px)}
  #people .message-portrait{transform:translateY(24px)}
  #people .message-copy > *{transform:translateX(16px)}
  #people .message-copy > *:nth-child(1){transition-delay:.24s}
  #people .message-copy > *:nth-child(2){transition-delay:.40s}
  #people .message-copy > *:nth-child(3){transition-delay:.56s}
  #people .message-copy > *:nth-child(4){transition-delay:.72s}
  #people .message-copy > *:nth-child(5){transition-delay:.88s}
  #people .message-copy > *:nth-child(6){transition-delay:1.04s}
  #people .message-copy > *:nth-child(7){transition-delay:1.20s}
  #people .message-copy > *:nth-child(n/**/+8){transition-delay:1.36s}
}
@media(prefers-reduced-motion:reduce){
  #people .message-copy > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* 切り替え中は、指やマウスの操作を受け付けない（スマホの慣性対策） */
.ap-slides.is-locked{touch-action:none}

/* =========================================================
   循環図の吹き出し
   目盛りの真上に出て、スクロールに合わせて左から順に移っていく
   ========================================================= */
/* 吹き出しのぶんの余白を、出ていないときも確保しておく（表示がずれないように） */
.ap-cycle .ap-axis{padding-top:clamp(96px,12.5vh,140px)}
.ap-tick{position:relative}

.ap-bubble{
  position:absolute;left:50%;bottom:calc(100% + 20px);
  /* 参考にしたサイトと同じ出方：4%ぶん下から、1秒かけてふわっと浮かび上がる */
  transform:translateX(-50%) translateY(4%);
  opacity:0;pointer-events:none;z-index:3;
  background:#fff;color:var(--ap-ink);
  border:2.5px solid var(--ap-ink);border-radius:50%;
  padding:clamp(14px,1.6vw,20px) clamp(26px,3vw,42px);
  white-space:nowrap;text-align:center;
  font-weight:800;letter-spacing:-.02em;
  font-size:calc(clamp(12px,1.15vw,16px) * var(--fs-body));line-height:1.6;
  transition-duration:1s;
  transition-property:opacity,transform;
  transition-timing-function:cubic-bezier(.165,.84,.44,1)
}
/* しっぽ：外側の線と内側の白を重ねて、輪郭のある三角にする */
.ap-bubble::before,
.ap-bubble::after{content:"";position:absolute;left:50%;width:0;height:0}
.ap-bubble::before{
  bottom:-11px;margin-left:-12px;
  border:12px solid transparent;border-top-color:var(--ap-ink);border-bottom:0
}
.ap-bubble::after{
  bottom:-7px;margin-left:-9px;
  border:9px solid transparent;border-top-color:#fff;border-bottom:0
}
.ap-bubble.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* 出ていない吹き出しの位置に合わせて、目盛りの文字が動かないようにする */
.ap-tick > i,.ap-tick > b{position:relative;z-index:1}

@media(max-width:900px){
  .ap-bubble{font-size:calc(clamp(11px,1.5vw,14px) * var(--fs-body));padding:12px 22px}
}

/* スマホ：吹き出しは目盛りの横に小さく添えて、はじめから出しておく */
@media(max-width:640px){
  .ap-cycle .ap-axis{padding-top:0}
  .ap-bubble{
    position:static;order:3;margin:7px 0 0 38px;
    display:inline-block;align-self:flex-start;
    border-width:2px;border-radius:16px;
    padding:7px 14px;white-space:normal;text-align:left;
    font-size:calc(11px * var(--fs-body));line-height:1.7;
    opacity:1;transform:none
  }
  .ap-bubble.is-on{opacity:1;transform:none}
  .ap-bubble::before,.ap-bubble::after{display:none}
  .ap-tick{flex-wrap:wrap}
}
/* 1枚ずつの見せ方をしないときは、吹き出しは最初から出したままにする */
@media(max-height:620px){
  .ap-bubble{opacity:1!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .ap-bubble{transition:none;opacity:1!important;transform:none!important}
}

/* =========================================================
   秋田犬：名前の後ろを通り、帯の中を自由に遊ぶ
   ・犬は理事カードより奥（名前の後ろを通る）
   ・ボールとフリスビーの小道具を追加
   ========================================================= */
.officers-viewport{position:relative;z-index:3}
.officers-head{position:relative;z-index:3}

/* --- 小道具の共通 --- */
.dog-ball,.dog-disc{
  position:absolute;left:0;bottom:14px;z-index:1;   /* 犬と同じ奥ゆき。理事の写真や文字より奥を通る */
  pointer-events:none;opacity:0;
  transform:translate(var(--px,0px),calc(var(--h,0px) * -1))
}
.dog-ball.on,.dog-disc.on{opacity:1}

/* 野球ボール（縫い目つき） */
.dog-ball::before,.dog-ball::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid #d0433c;
  clip-path:inset(0 62% 0 6%);
  transform:rotate(var(--rot,0deg))
}
.dog-ball::after{clip-path:inset(0 6% 0 62%)}

/* フリスビー */
.dog-disc{
  transform:translate(var(--px,0px),calc(var(--h,0px) * -1)) rotate(calc(var(--rot,0deg) * .04))
}

/* 口にくわえたフリスビー */
.officers-dog .dog-face{position:relative}
.officers-dog .dog-hold{
  position:absolute;
  opacity:0;
  transform:rotate(-12deg) scale(.7);
  transition:opacity .2s ease,transform .3s cubic-bezier(.3,.8,.3,1)
}
.officers-dog.has-disc .dog-hold{opacity:1;transform:rotate(-12deg) scale(1)}

/* --- 秋田犬らしい仕草 --- */
/* 首をかしげる */
.officers-dog.tilt i{animation:dogTilt 1.5s cubic-bezier(.3,.8,.3,1)}
@keyframes dogTilt{
  0%{transform:rotate(0)}
  22%{transform:rotate(-9deg)}
  60%{transform:rotate(-9deg)}
  100%{transform:rotate(0)}
}
/* ぶるぶる身震い */
.officers-dog.shake i{animation:dogShake .7s ease-in-out}
@keyframes dogShake{
  0%,100%{transform:translateX(0) rotate(0)}
  12%{transform:translateX(-3px) rotate(-3deg)}
  28%{transform:translateX(3px) rotate(3deg)}
  44%{transform:translateX(-3px) rotate(-3deg)}
  60%{transform:translateX(3px) rotate(2deg)}
  78%{transform:translateX(-2px) rotate(-1deg)}
}
/* 「遊ぼう」の前傾姿勢（プレイバウ） */
.officers-dog.bow i{animation:dogBow 1.6s cubic-bezier(.3,.8,.3,1)}
@keyframes dogBow{
  0%{transform:rotate(0) translateY(0)}
  20%{transform:rotate(-15deg) translateY(4px)}
  70%{transform:rotate(-15deg) translateY(4px)}
  100%{transform:rotate(0) translateY(0)}
}
/* おすわり */
.officers-dog.sit i{animation:dogSit 2.6s cubic-bezier(.3,.8,.3,1)}
@keyframes dogSit{
  0%{transform:rotate(0) scaleY(1)}
  16%{transform:rotate(7deg) scaleY(.9) translateY(5px)}
  80%{transform:rotate(7deg) scaleY(.9) translateY(5px)}
  100%{transform:rotate(0) scaleY(1)}
}
/* フリスビーを捕るジャンプ（高め・長め） */
.officers-dog.leap i{animation:dogLeap 1.3s cubic-bezier(.25,.7,.3,1)}
@keyframes dogLeap{
  0%{transform:translateY(0) rotate(0)}
  14%{transform:translateY(6px) rotate(3deg)}
  46%{transform:translateY(calc(var(--leapY,88px) * -1)) rotate(-15deg)}
  60%{transform:translateY(calc(var(--leapY,88px) * -.88)) rotate(-9deg)}
  100%{transform:translateY(0) rotate(0)}
}
/* 得意げに胸を張る */
.officers-dog.proud i{animation:dogProud 1.2s ease-in-out}
@keyframes dogProud{
  0%,100%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-5px) rotate(-4deg)}
  65%{transform:translateY(-2px) rotate(-2deg)}
}

@media(prefers-reduced-motion:reduce){
  .dog-ball,.dog-disc,.officers-dog .dog-hold{display:none!important}
  .officers-dog i{animation:none!important}
}

/* =========================================================
   スマートフォン：代表の写真を控えめな大きさに
   ========================================================= */
@media(max-width:640px){
  #people .message-portrait,
  .message-portrait{padding:4px 0 0!important}
  #people .message-portrait img,
  .message-portrait img{
    width:min(58%,250px)!important;max-width:250px!important;
    margin:0 auto!important
  }
}

/* うれしそうに二段跳び（機嫌のよさが出る動き） */
.officers-dog.hop i{animation:dogHop 1.25s cubic-bezier(.3,.7,.35,1)}
@keyframes dogHop{
  0%{transform:translateY(0) rotate(0)}
  10%{transform:translateY(5px) rotate(2deg)}
  28%{transform:translateY(-34px) rotate(-7deg)}
  44%{transform:translateY(0) rotate(0)}
  52%{transform:translateY(4px) rotate(1deg)}
  70%{transform:translateY(-26px) rotate(-5deg)}
  86%{transform:translateY(0) rotate(0)}
  93%{transform:translateY(-7px) rotate(-2deg)}
  100%{transform:translateY(0) rotate(0)}
}
/* 単発のジャンプも、もう少し弾むように */
.officers-dog.jump i{animation:dogJump 1s cubic-bezier(.3,.7,.35,1)}
@keyframes dogJump{
  0%{transform:translateY(0) rotate(0)}
  12%{transform:translateY(5px) rotate(2deg)}
  34%{transform:translateY(-42px) rotate(-8deg)}
  56%{transform:translateY(0) rotate(0)}
  72%{transform:translateY(-15px) rotate(-3deg)}
  88%{transform:translateY(0) rotate(0)}
  94%{transform:translateY(-4px)}
  100%{transform:translateY(0) rotate(0)}
}

/* =========================================================
   秋田犬：その場でうとうと眠る（ZZZ）
   ========================================================= */
.officers-dog .dog-zzz{
  position:absolute;left:46%;bottom:64%;
  width:56%;aspect-ratio:215/190;
  background:url(../img/section/dog-zzz-mizu.webp) center/contain no-repeat;
  /* 濃い帯の上でも沈まないよう、うっすら影を落とす（明るい背景でも縁が立つ） */
  filter:drop-shadow(0 1px 2px rgba(8,52,58,.38));
  opacity:0;transform:translateY(6px) scale(.85);
  transition:opacity .5s ease,transform .6s cubic-bezier(.3,.8,.3,1);
  pointer-events:none
}
.officers-dog.sleep .dog-zzz{
  opacity:1;transform:none;
  animation:dogZzz 2.4s ease-in-out infinite
}
@keyframes dogZzz{
  0%,100%{transform:translateY(0) scale(1);opacity:.95}
  50%{transform:translateY(-7px) scale(1.05);opacity:.7}
}
/* 眠っているあいだ、ゆっくり横に揺れる */
.officers-dog.sleep i{animation:dogSleep 1.6s ease-in-out infinite}
@keyframes dogSleep{
  0%,100%{transform:rotate(-2.2deg) translateY(2px)}
  50%{transform:rotate(2.2deg) translateY(4px)}
}

/* くわえたボール：飛んでくるボールと同じ見た目（白地に赤い縫い目） */
.officers-dog.has-ball .dog-hold{
  opacity:1;
  transform:rotate(0) scale(1);
  border-radius:50%
}
.officers-dog.has-ball .dog-hold::before,
.officers-dog.has-ball .dog-hold::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.4px solid #d0433c;
  clip-path:inset(0 62% 0 6%)
}
.officers-dog.has-ball .dog-hold::after{clip-path:inset(0 6% 0 62%)}

@media(prefers-reduced-motion:reduce){
  .officers-dog .dog-zzz{display:none!important}
  .officers-dog.sleep i{animation:none!important}
}

/* ============================================================
   研修・セミナー（進め方）ページ
   ============================================================ */
.tr-page{max-width:1240px;margin:0 auto;padding:70px 28px 0}

.tr-head{display:grid;grid-template-columns:1fr 1fr;gap:40px 6vw;align-items:end;margin-bottom:56px}
.tr-head .kicker{display:block;margin-bottom:18px}
.tr-head h1{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(38px,4.4vw,70px) * var(--fs-heading));
  line-height:1.12;letter-spacing:-.05em;color:var(--ink)
}
.tr-lead{margin:0;font-size:calc(12.5px * var(--fs-body));line-height:2.1;color:var(--muted);max-width:620px}

/* 4つのタブ */
.tr-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.tr-tab{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:26px 22px 24px;border-right:1px solid var(--line);
  color:var(--muted);transition:color .5s var(--ease),background .5s var(--ease)
}
.tr-tab:last-child{border-right:0}
/* ステップの区切りに置く三角の方向マーク */
.tr-tab+.tr-tab:before{
  content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  width:0;height:0;border:7px solid transparent;border-left:10px solid var(--line);
  border-right:0;z-index:3;transition:border-left-color .5s var(--ease)
}
.tr-tab+.tr-tab:hover:before,
.tr-tab+.tr-tab.is-active:before,
.tr-tab.is-active+.tr-tab:before{border-left-color:var(--navy)}
.tr-tab:after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;
  background:var(--navy);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease)
}
.tr-tab:hover{color:var(--ink);background:rgba(220,232,239,.28)}
.tr-tab.is-active{color:var(--ink);background:rgba(220,232,239,.45)}
.tr-tab.is-active:after{transform:scaleX(1)}
.tr-tab-num{font-size:calc(9px * var(--fs-body));letter-spacing:.16em;font-weight:700;color:var(--muted)}
.tr-tab-jp{font-size:calc(11px * var(--fs-body));font-weight:700;letter-spacing:.02em}

/* 内容 */
.tr-panel{opacity:0;transform:translateY(22px)}
.tr-panel.is-active{
  opacity:1;transform:none;
  transition:opacity 1.05s var(--ease) .12s,transform 1.25s var(--ease)
}
.tr-panel-head{display:grid;grid-template-columns:auto 1fr;gap:0 30px;align-items:start;margin-bottom:30px}
.tr-panel-num{
  font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;
  font-size:calc(clamp(52px,6.4vw,104px) * var(--fs-heading));
  line-height:.86;letter-spacing:-.07em;color:var(--blue)
}
.tr-panel-en{display:block;font-size:calc(10px * var(--fs-body));letter-spacing:.14em;font-weight:700;color:var(--muted);margin-bottom:14px}
.tr-panel-head h2{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(23px,2.7vw,40px) * var(--fs-heading));
  line-height:1.42;letter-spacing:-.03em
}
.tr-panel-body{margin:0 0 46px;font-size:calc(13px * var(--fs-body));line-height:2.25;color:#3c4a55;max-width:760px}

.tr-panel-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:44px 6vw;align-items:start}
.tr-points h3,.tr-output h3{
  margin:0 0 20px;font-size:calc(10.5px * var(--fs-body));letter-spacing:.12em;font-weight:800;
  color:var(--navy);padding-bottom:12px;border-bottom:1px solid var(--line)
}
.tr-points ul{list-style:none;margin:0;padding:0}
.tr-points li{
  position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--line);
  font-size:calc(12.5px * var(--fs-body));line-height:1.95
}
.tr-points li:before{
  content:"";position:absolute;left:2px;top:24px;width:9px;height:1px;background:var(--navy)
}
.tr-output{background:var(--paper);border:1px solid var(--line);padding:30px 30px 34px}
.tr-output h3{border-bottom-color:rgba(16,27,37,.14)}
.tr-output p{margin:0;font-size:calc(12px * var(--fs-body));line-height:2.1;color:#3c4a55}

/* 下部のご案内 */
.tr-cta{
  background:var(--navy);color:#fff;padding:70px 6vw;margin:0 -28px;
  display:grid;grid-template-columns:1fr 1fr;gap:34px 6vw;align-items:end
}
.tr-cta .kicker{display:block;color:#b5c7d2;margin-bottom:16px}
.tr-cta h2{margin:0;font-family:"Noto Serif JP",serif;font-size:calc(clamp(38px,5vw,80px) * var(--fs-heading));line-height:1.06;letter-spacing:-.08em}
.tr-cta p{margin:0 0 26px;font-size:calc(11.5px * var(--fs-body));line-height:2.05;color:#cbd7df;max-width:500px}
.tr-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #fff;border-radius:999px;padding:14px 27px;
  font-size:calc(10.5px * var(--fs-body));font-weight:800;white-space:nowrap;
  transition:background .45s var(--ease),color .45s var(--ease)
}
.tr-cta-btn:hover{background:#fff;color:var(--navy)}

@media(max-width:900px){
  .tr-head{grid-template-columns:1fr;align-items:start}
  .tr-tabs{grid-template-columns:repeat(2,1fr)}
  .tr-tab{padding:18px 14px 16px;border-bottom:1px solid var(--line)}
  .tr-tab:nth-child(2n){border-right:0}
  .tr-tab:nth-child(n/**/+3){border-bottom:0}
  .tr-tab:nth-child(2n/**/+1):before{display:none}
  .tr-panel-head{grid-template-columns:1fr}
  .tr-panel-grid{grid-template-columns:1fr}
  .tr-cta{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .tr-panel,.tr-panel.is-active{opacity:1;transform:none;transition:none}
}

/* ============================================================
   事業内容（個別ページ）
   ============================================================ */
/* 独立した事業なので、ステップの三角マークは出さない */
.tr-tabs.is-plain .tr-tab+.tr-tab:before{display:none}
.bp-tab-name{font-size:calc(13px * var(--fs-body));font-weight:700;line-height:1.5}
.tr-tabs.is-plain .tr-tab{gap:10px}
.tr-tabs.is-plain .tr-tab-num{font-size:calc(9px * var(--fs-body))}

.bp-page .tr-head h1{
  font-size:calc(clamp(30px,3.6vw,58px) * var(--fs-heading));line-height:1.2
}
.bp-main{padding:56px 0 90px}
.bp-side{display:grid;gap:26px;align-content:start}
.bp-target h3{
  margin:0 0 20px;font-size:calc(10.5px * var(--fs-body));letter-spacing:.12em;font-weight:800;
  color:var(--navy);padding-bottom:12px;border-bottom:1px solid var(--line)
}
.bp-target ul{list-style:none;margin:0;padding:0}
.bp-target li{
  position:relative;padding:11px 0 11px 24px;
  font-size:calc(12px * var(--fs-body));line-height:1.9;color:#3c4a55
}
.bp-target li:before{
  content:"";position:absolute;left:3px;top:21px;width:6px;height:6px;
  border-radius:50%;background:var(--blue);border:1px solid var(--navy)
}
.bp-extra{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}

@media(max-width:900px){
  .bp-tab-name{font-size:calc(11.5px * var(--fs-body))}
}

/* ============================================================
   動画の埋め込み（会員ページなど）
   ============================================================ */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0e2235;overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.members-video-link{
  display:inline-block;margin-top:14px;font-size:calc(11.5px * var(--fs-body));
  font-weight:700;text-decoration:underline;text-underline-offset:4px
}
/* ログイン前の案内 */
.members-note{
  margin:26px 0 0;padding:22px 24px;background:var(--paper);border:1px solid var(--line)
}
.members-note h3{
  margin:0 0 12px;font-size:calc(10.5px * var(--fs-body));letter-spacing:.12em;font-weight:800;color:var(--navy)
}
.members-note ul{list-style:none;margin:0;padding:0}
.members-note li{
  position:relative;padding:7px 0 7px 20px;font-size:calc(11.5px * var(--fs-body));line-height:1.9;color:#3c4a55
}
.members-note li:before{
  content:"";position:absolute;left:2px;top:17px;width:7px;height:1px;background:var(--navy)
}

/* ============================================================
   事業ページ・研修ページの携帯表示を詰める
   ============================================================ */
/* タブの番号を四角いバッジにする（パソコンでは番号＋英字を横並び） */
.tr-tab-num b,
.tr-tab-num i{font-style:normal;font-weight:inherit}
.tr-tab-num i{margin-left:6px;color:var(--muted)}
.tr-tab-num b:after{content:" /";color:var(--muted);font-weight:400}

@media(max-width:900px){
  /* --- 見出しまわり --- */
  .tr-page{padding:34px 18px 0}
  .tr-head{gap:14px;margin-bottom:24px}
  .bp-page .tr-head h1{font-size:calc(clamp(26px,7.4vw,34px) * var(--fs-heading));line-height:1.28}
  .tr-lead{font-size:calc(12px * var(--fs-body));line-height:1.95}

  /* --- 事業タブ：番号バッジ＋事業名を横並びにして高さを半分に --- */
  .tr-tabs.is-plain{border-bottom:1px solid var(--ink)}
  .tr-tabs.is-plain .tr-tab{
    display:grid;grid-template-columns:auto 1fr;align-items:center;
    gap:10px;padding:13px 11px;min-width:0
  }
  .tr-tabs.is-plain .tr-tab-num i,
  .tr-tabs.is-plain .tr-tab-num b:after{display:none;content:none}
  .tr-tabs.is-plain .tr-tab-num b{
    display:flex;align-items:center;justify-content:center;
    width:25px;height:25px;border-radius:4px;
    background:var(--blue);color:var(--navy);
    font-size:calc(11px * var(--fs-body));font-weight:800;letter-spacing:0
  }
  .tr-tabs.is-plain .tr-tab.is-active .tr-tab-num b{background:var(--navy);color:#fff}
  .tr-tabs.is-plain .bp-tab-name{
    font-size:calc(12px * var(--fs-body));line-height:1.35;min-width:0;overflow-wrap:anywhere
  }

  /* --- 研修のSTEPタブも少し詰める --- */
  .tr-tabs:not(.is-plain) .tr-tab{padding:13px 12px 12px;gap:3px}
  .tr-tabs:not(.is-plain) .tr-tab-jp{font-size:calc(10.5px * var(--fs-body))}

  /* --- 本文まわりの間延びを詰める --- */
  .bp-main{padding:26px 0 48px}
  .tr-panel-head{gap:6px;margin-bottom:20px}
  .tr-panel-num{font-size:calc(40px * var(--fs-heading))}
  .tr-panel-en{margin-bottom:8px;font-size:calc(9.5px * var(--fs-body))}
  .tr-panel-head h2{font-size:calc(21px * var(--fs-heading));line-height:1.5}
  .tr-panel-body{
    margin-bottom:26px;font-size:calc(12.5px * var(--fs-body));line-height:1.95
  }
  .tr-panel-grid{gap:26px}
  .tr-points h3,.tr-output h3,.bp-target h3{margin-bottom:12px;padding-bottom:9px}
  .tr-points li{padding:10px 0 10px 22px;font-size:calc(12px * var(--fs-body));line-height:1.7}
  .tr-points li:before{top:19px;width:8px}
  .bp-target li{padding:8px 0 8px 21px;font-size:calc(11.5px * var(--fs-body));line-height:1.7}
  .bp-target li:before{top:16px}
  .bp-side{gap:20px}
  .tr-output{padding:18px 18px 20px}
  .tr-output p{font-size:calc(11.5px * var(--fs-body));line-height:1.9}
  .tr-cta{padding:40px 18px;margin:0 -18px}
  .tr-cta p{margin-bottom:20px;font-size:calc(11px * var(--fs-body));line-height:1.9}
  .members-note{padding:18px 18px 16px}
}

/* ============================================================
   携帯：見出しの折り返しが原因で枠からはみ出すのを防ぐ
   （日本語は文節で折り返す設定にしているため、
     文節が画面より長いと、その分だけ横にはみ出してしまう）
   ============================================================ */
@media(max-width:640px){
  :where(h1,h2,h3,h4,.h2){overflow-wrap:anywhere}
  .about-panels>*,.people-feature>*,.message-copy>*,.entry-body>*,.tr-panel-grid>*{min-width:0}
  .about-message h2{font-size:calc(clamp(24px,6.6vw,34px) * var(--fs-heading))}
  /* 行ごとに立ち上がる見出しが、画面より長くならないようにする */
  .has-lines .ln{max-width:100%}
}

/* ============================================================
   秋田犬：小道具をイラストに差し替え（ボール／フリスビー／ごはん）
   ============================================================ */
/* 飛んでくる野球ボール */
.dog-ball{
  width:clamp(18px,1.8vw,26px);aspect-ratio:110/111;
  background:url(../img/section/dog-ball.webp) center/contain no-repeat!important;
  border:0!important;border-radius:0!important;box-shadow:none!important
}
.dog-ball::before,.dog-ball::after{display:none!important}

/* 飛んでくるフリスビー */
.dog-disc{
  width:clamp(30px,3vw,44px);height:auto!important;aspect-ratio:150/63;
  background:url(../img/section/dog-disc.webp) center/contain no-repeat!important;
  border:0!important;border-radius:0!important;box-shadow:none!important
}

/* 口にくわえたフリスビー */
.officers-dog .dog-hold{
  left:-10%;top:24%;
  width:46%;height:0;padding-bottom:calc(46% * 63 / 150);border-radius:0!important;
  background:url(../img/section/dog-disc.webp) center/contain no-repeat!important;
  border:0!important;box-shadow:none!important
}
/* 口にくわえたボール */
.officers-dog.has-ball .dog-hold{
  left:-4%;top:30%;
  width:26%;height:0;padding-bottom:26%;
  background:url(../img/section/dog-ball.webp) center/contain no-repeat!important;
  border:0!important;box-shadow:none!important
}
.officers-dog.has-ball .dog-hold::before,
.officers-dog.has-ball .dog-hold::after{display:none!important}

/* =========================================================
   秋田犬：ごはんを食べる
   ・お皿がすっと現れ、犬が近づいて頭を上下させて食べる
   ・食べ終わるとお皿が消え、満足そうに一度ジャンプする
   ========================================================= */
.dog-bowl{
  --bw:31px;                        /* お皿の幅。実際は表示時に犬の大きさへ合わせる */
  --sh:calc(var(--bw) * .85);       /* 台の高さ。実際の高さは表示時にJavaScriptが測って合わせる */
  position:absolute;left:0;bottom:calc(14px + var(--sh));z-index:1;pointer-events:none;   /* 犬と同じく、理事の名前より奥 */
  width:var(--bw);aspect-ratio:150/100;
  background:url(../img/section/dog-bowl.webp) center bottom/contain no-repeat;
  opacity:0;transform:translate(var(--bx,0px),26px) scale(.9);
  /* 下からふわっと浮かび上がる。少し行き過ぎて戻る動きにしている */
  transition:opacity .55s ease,transform .85s cubic-bezier(.22,1.15,.3,1)
}
/* お皿を置く机。
   絵の中で天板の面（お皿が乗るところ）は、上から8%・下から92%の高さにある。
   台の高さ（--sh）はJavaScriptが犬の鼻先に合わせて決めるので、
   机の高さはそこから逆算する（--sh ÷ .92）。幅は絵の比率どおり。 */
.dog-bowl::before{
  content:"";position:absolute;left:50%;bottom:calc(-1 * var(--sh));
  width:var(--tw,40px);height:calc(var(--sh) / .92);
  transform:translateX(-50%);
  background:url(../img/section/dog-table.webp) center bottom/contain no-repeat;
  z-index:-1                        /* お皿より奥。お皿が机の上に乗って見える */
}
.dog-bowl.on{opacity:1;transform:translate(var(--bx,0px),0) scale(1)}

/* 食べているあいだ、頭を上下に動かす */
.officers-dog.eat.face-right .dog-face{animation:dogEatHeadR 1s ease-in-out infinite}

/* 携帯でもごはんは出す。犬の大きさに合わせてお皿と台を測って置くので、
   小さい画面でも位置はずれない。 */
@media(prefers-reduced-motion:reduce){
  .dog-bowl{display:none!important}
  .officers-dog.eat .dog-face,.officers-dog.eat i{animation:none!important}
}

/* ============================================================
   研修ページ：数字・考え方・結果
   ============================================================ */
.tr-facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
  margin-bottom:clamp(48px,6vw,84px)
}
.tr-fact{padding:26px 20px 28px;border-right:1px solid var(--line)}
.tr-fact:last-child{border-right:0}
.tr-fact strong{
  display:block;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(24px,2.6vw,38px) * var(--fs-heading));
  line-height:1.15;letter-spacing:-.04em;color:var(--navy);margin-bottom:10px
}
.tr-fact span{
  display:block;font-size:calc(10.5px * var(--fs-body));line-height:1.7;color:var(--muted);font-weight:700
}

.tr-why{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:34px 6vw;
  align-items:start
}
.tr-why-head .kicker{display:block;margin-bottom:16px}
.tr-why-head h2{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(24px,3vw,44px) * var(--fs-heading));
  line-height:1.35;letter-spacing:-.04em
}
.tr-why-body p{margin:0 0 20px;font-size:calc(13px * var(--fs-body));line-height:2.2;color:#3c4a55}
.tr-why-body p:last-child{margin-bottom:0}
.tr-why-note{
  padding:16px 20px;background:var(--paper);border-left:3px solid var(--navy);
  font-size:calc(11.5px * var(--fs-body))!important;line-height:1.95!important;color:var(--muted)!important
}

/* 調査結果の取り扱い */
.tr-privacy{
  margin-top:28px;padding:20px 22px;background:var(--paper);border:1px solid var(--line)
}
.tr-privacy h4{
  margin:0 0 10px;font-size:calc(10.5px * var(--fs-body));letter-spacing:.1em;font-weight:800;color:var(--navy)
}
.tr-privacy p{margin:0;font-size:calc(11.5px * var(--fs-body));line-height:1.95;color:#3c4a55}

/* これまでの結果 */
.tr-side{display:grid;gap:24px;align-content:start}
.tr-results{background:var(--navy);color:#fff;padding:26px 26px 22px}
.tr-results h3{
  margin:0 0 20px;font-size:calc(10.5px * var(--fs-body));letter-spacing:.12em;font-weight:800;
  color:#b5c7d2;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.22)
}
.tr-result+.tr-result{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.tr-result strong{
  display:block;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(22px,2.4vw,34px) * var(--fs-heading));line-height:1.15;letter-spacing:-.03em;margin-bottom:8px
}
.tr-result span{display:block;font-size:calc(11px * var(--fs-body));line-height:1.85;color:#cbd7df}

@media(max-width:900px){
  .tr-facts{grid-template-columns:1fr 1fr;margin-bottom:34px}
  .tr-fact{padding:18px 14px 20px}
  .tr-fact:nth-child(2n){border-right:0}
  .tr-fact:nth-child(n/**/+3){border-top:1px solid var(--line)}
  .tr-fact strong{font-size:calc(21px * var(--fs-heading));margin-bottom:7px}
  .tr-fact span{font-size:calc(10px * var(--fs-body))}
  .tr-why{grid-template-columns:1fr;gap:18px}
  .tr-why-head h2{font-size:calc(21px * var(--fs-heading))}
  .tr-why-body p{margin-bottom:16px;font-size:calc(12.5px * var(--fs-body));line-height:1.95}
  .tr-why-note{padding:14px 16px}
  .tr-privacy{margin-top:22px;padding:16px 16px}
  .tr-side{gap:18px}
  .tr-results{padding:20px 20px 18px}
  .tr-results h3{margin-bottom:14px;padding-bottom:10px}
  .tr-result strong{font-size:calc(20px * var(--fs-heading))}
}

/* ============================================================
   研修ページ：矢印のロードマップ
   ============================================================ */
.tr-road{margin:0 0 clamp(38px,4.2vw,58px)}
.tr-road-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:center}
.tr-road-col{position:relative;display:flex;align-items:center}

/* 矢印（シェブロン） */
.tr-road-step{
  position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  min-height:clamp(78px,8vw,104px);
  padding:16px clamp(20px,2.2vw,30px) 16px clamp(30px,3.2vw,44px);
  color:#fff;text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,18px 50%);
  transition:filter .45s var(--ease),transform .45s var(--ease)
}
.tr-road-col:first-child .tr-road-step{
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%)
}
.tr-road-col:nth-child(1) .tr-road-step{background:#2f6d9e}
.tr-road-col:nth-child(2) .tr-road-step{background:#2a5a86}
.tr-road-col:nth-child(3) .tr-road-step{background:#1d4468}
.tr-road-col:nth-child(4) .tr-road-step{background:var(--navy)}
.tr-road-step:hover{filter:brightness(1.12)}
.tr-road-step.is-active{transform:translateY(-3px);filter:brightness(1.16)}
.tr-road-num{
  font-family:Arial,"Helvetica Neue",sans-serif;
  font-weight:700;
  color:rgba(255,255,255,.72)
}
.tr-road-jp{font-size:calc(13px * var(--fs-body));font-weight:800;line-height:1.4;letter-spacing:.01em}
.tr-road-en{font-size:calc(9.5px * var(--fs-body));letter-spacing:.12em;color:rgba(255,255,255,.68)}

/* 吹き出し（上下交互） */
.tr-road-note{
  position:absolute;left:6%;width:112%;max-width:280px;
  font-size:calc(11px * var(--fs-body));line-height:1.75;color:#3c4a55
}
.tr-road-note ul{list-style:none;margin:0;padding:0}
.tr-road-note li{position:relative;padding-left:13px}
.tr-road-note li+li{margin-top:5px}
.tr-road-note li:before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--navy)
}

/* 吹き出しと矢印をつなぐ線と丸 */
.tr-road-stem{
  position:absolute;left:calc(6% + 6px);width:2px;height:34px;background:var(--line)
}
.tr-road-stem:after{
  content:"";position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid var(--navy)
}
.tr-road-col.is-up .tr-road-stem:after{bottom:-5px}
.tr-road-col.is-down .tr-road-stem:after{top:-5px}

/* 下の帯 */
.tr-road-bands{display:grid;grid-template-columns:3fr 1fr;gap:8px;margin-top:14px}
.tr-road-band{
  display:flex;align-items:center;
  padding:13px clamp(18px,2vw,26px) 13px clamp(24px,2.6vw,34px);
  color:#fff;font-size:calc(11px * var(--fs-body));font-weight:700;line-height:1.5;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)
}
.tr-road-band.is-a{background:#7f9bb0;padding-left:clamp(18px,2vw,26px)}
.tr-road-band.is-b{
  background:#4a6d8c;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%)
}

@media(max-width:900px){
  /* スマホは縦に積んで、矢印は下向きにする */
  .tr-road{margin-bottom:34px}
  .tr-road-row{grid-template-columns:1fr;gap:10px}
  .tr-road-col{display:block}
  .tr-road-step,
  .tr-road-col:first-child .tr-road-step{
    flex-direction:row;align-items:center;gap:10px;min-height:0;
    padding:13px 16px 20px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),50% 100%,0 calc(100% - 12px))
  }
  .tr-road-num{flex:0 0 auto}
  .tr-road-jp{flex:1 1 auto;font-size:calc(12.5px * var(--fs-body))}
  .tr-road-en{display:none}
  .tr-road-note{
    position:static;width:auto;max-width:none;
    margin:8px 0 4px;padding:12px 14px;
    background:var(--paper);border-left:3px solid var(--navy);
    font-size:calc(11px * var(--fs-body))
  }
  .tr-road-col.is-up .tr-road-note,
  .tr-road-col.is-down .tr-road-note{bottom:auto;top:auto}
  .tr-road-stem{display:none}
  .tr-road-bands{grid-template-columns:1fr;gap:6px;margin-top:12px}
  .tr-road-band,.tr-road-band.is-b{
    clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),50% 100%,0 calc(100% - 10px));
    padding:12px 16px 19px
  }
}
@media(prefers-reduced-motion:reduce){
  .tr-road-step{transition:none}
}

/* ============================================================
   研修ページ：対象となる方々
   ============================================================ */
.tr-who-head{
  margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--ink);
  font-size:calc(12px * var(--fs-body));letter-spacing:.12em;font-weight:800;color:var(--navy)
}
.tr-who-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:0}
.tr-who-card{padding:6px 30px 4px 0;border-right:1px solid var(--line)}
.tr-who-card:last-child{border-right:0;padding-right:0}
.tr-who-card+.tr-who-card{padding-left:30px}
.tr-who-card h3{
  margin:0 0 12px;font-size:calc(13px * var(--fs-body));font-weight:800;letter-spacing:.02em;
  color:var(--ink);display:flex;align-items:center;gap:9px
}
.tr-who-card h3:before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--blue);border:2px solid var(--navy)
}
.tr-who-card.is-place h3:before{background:var(--navy)}
.tr-who-card p{margin:0;font-size:calc(12px * var(--fs-body));line-height:2;color:#3c4a55}

@media(max-width:900px){
  .tr-who-head{margin-bottom:16px;padding-bottom:11px}
  .tr-who-grid{grid-template-columns:1fr;gap:0}
  .tr-who-card,.tr-who-card:last-child{padding:14px 0;border-right:0;border-bottom:1px solid var(--line)}
  .tr-who-card+.tr-who-card{padding-left:0}
  .tr-who-card:last-child{border-bottom:0}
  .tr-who-card h3{margin-bottom:8px;font-size:calc(12.5px * var(--fs-body))}
  .tr-who-card p{font-size:calc(11.5px * var(--fs-body));line-height:1.9}
}

/* ============================================================
   研修ページ：ロードマップにSTEP表記を入れ、余白を詰める

   ※ style.css に section 全体への余白（3.4rem 2.5rem）があるため、
     クラスで打ち消さないと上下に54pxずつ入ってしまう。
   ============================================================ */
.tr-why,.tr-who,.tr-road{padding:0}
.tr-road-num{font-size:calc(9.5px * var(--fs-body));letter-spacing:.14em}
.tr-why{margin-bottom:clamp(30px,3.4vw,46px)}
.tr-who{margin:0 0 clamp(10px,1.2vw,18px)}
.tr-panels{padding:clamp(28px,3.4vw,46px) 0 clamp(48px,6vw,90px)}

@media(max-width:900px){
  .tr-why{margin-bottom:24px}
  .tr-who{margin-bottom:14px}
  .tr-road-num{font-size:calc(9px * var(--fs-body))}
  .tr-panels{padding:24px 0 48px}
}

/* ============================================================
   ロードマップ：吹き出しと矢印が重ならないようにする
   （余白を変えても崩れないよう、位置を余白から計算する）
   ============================================================ */
.tr-road-col{
  --road-pad-t:98px;   /* 矢印の上に空ける高さ（吹き出し＋線） */
  --road-pad-b:94px;   /* 矢印の下に空ける高さ */
  padding:var(--road-pad-t) 0 var(--road-pad-b)
}
.tr-road-col.is-up .tr-road-note{bottom:calc(100% - var(--road-pad-t) + 44px)}
.tr-road-col.is-up .tr-road-stem{bottom:calc(100% - var(--road-pad-t) + 3px)}
.tr-road-col.is-down .tr-road-note{top:calc(100% - var(--road-pad-b) + 44px)}
.tr-road-col.is-down .tr-road-stem{top:calc(100% - var(--road-pad-b) + 3px)}

@media(max-width:900px){
  .tr-road-col{--road-pad-t:0px;--road-pad-b:0px;padding:0}
}

/* ============================================================
   ロードマップ：押せることを伝える／下の内容とつなげる
   ============================================================ */
/* 押せる合図 */
.tr-road-step{cursor:pointer}
.tr-road-step:after{
  content:"見る";
  position:absolute;right:26px;bottom:11px;
  font-size:calc(8.5px * var(--fs-body));font-weight:800;letter-spacing:.1em;
  color:rgba(255,255,255,.55);
  opacity:0;transform:translateY(3px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)
}
.tr-road-step:hover:after{opacity:1;transform:none}
.tr-road-step.is-active:after{content:"表示中";opacity:1;transform:none;color:rgba(255,255,255,.85)}
.tr-road-step:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

/* 案内文 */
.tr-road-hint{
  margin:0 0 16px;display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 8px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  font-size:calc(10.5px * var(--fs-body));font-weight:700;color:#54636e
}
.tr-road-hint span{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;
  background:var(--blue);color:var(--navy);font-size:9px;
  animation:trHintBob 2.6s ease-in-out infinite
}
@keyframes trHintBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}

/* 選ばれた段階から、下の内容へ向かう三角 */
.tr-panels{position:relative;border-top:2px solid var(--navy)}
.tr-panels:before{
  content:"";position:absolute;top:-2px;left:var(--tr-caret,12.5%);
  transform:translate(-50%,-100%);
  border-left:13px solid transparent;border-right:13px solid transparent;
  border-bottom:13px solid var(--navy);
  transition:left .65s var(--ease)
}
.tr-panels:after{
  content:"";position:absolute;top:-2px;left:var(--tr-caret,12.5%);
  width:64px;height:2px;margin-left:-32px;background:var(--navy);
  transition:left .65s var(--ease)
}

@media(max-width:900px){
  .tr-road-step:after{right:16px;bottom:auto;top:50%;transform:translateY(-50%)}
  .tr-road-step:hover:after,.tr-road-step.is-active:after{transform:translateY(-50%)}
  .tr-road-hint{margin:0 0 14px;padding:6px 13px 6px 7px;font-size:calc(10px * var(--fs-body))}
  /* 携帯は縦積みなので、三角は中央に置く */
  .tr-panels:before,.tr-panels:after{left:50%!important}
}
@media(prefers-reduced-motion:reduce){
  .tr-road-hint span{animation:none}
  .tr-panels:before,.tr-panels:after{transition:none}
}

/* ============================================================
   秋田犬：ごはんの姿勢を直す
   前足を浮かせるのではなく、前足を地面につけたまま
   おしり側を持ち上げて、顔をお皿に近づける。
   （回転の軸を前足のあたりに置くのがポイント）
   ============================================================ */
.officers-dog.eat .dog-face{
  transform-origin:22% 100%;
  animation:dogEatHead 1.05s ease-in-out infinite!important
}
.officers-dog.eat.face-right .dog-face{
  animation-name:dogEatHeadR!important
}
@keyframes dogEatHead{
  0%,100%{transform:rotate(-10deg) translate(2px,0)}
  45%    {transform:rotate(-26deg) translate(4px,3px)}
  60%    {transform:rotate(-24deg) translate(4px,2px)}
}
/* 右を向いて食べるとき。
   ごはんの姿勢は前足（横22%）を軸に回すので、そのまま左右反転すると
   犬の絵ぜんぶが軸のぶんだけ横にずれてしまい、お皿から離れて見えていた。
   反転で生じるずれ（幅の 1 - 22%×2 = 56%）を戻してから反転する。 */
@keyframes dogEatHeadR{
  0%,100%{transform:translateX(56%) scaleX(-1) rotate(-10deg) translate(2px,0)}
  45%    {transform:translateX(56%) scaleX(-1) rotate(-26deg) translate(4px,3px)}
  60%    {transform:translateX(56%) scaleX(-1) rotate(-24deg) translate(4px,2px)}
}
/* 体はごくわずかに前後するだけ（もぐもぐの気配） */
.officers-dog.eat i{animation:dogEatBody .52s ease-in-out infinite!important}
@keyframes dogEatBody{
  0%,100%{transform:translate(0,0)}
  50%    {transform:translate(1.5px,1px)}
}

/* ============================================================
   ページ内リンクの着地位置
   固定ヘッダーの下に見出しが隠れないよう、その高さぶん手前で止める
   ============================================================ */
#business,#people,#mission,#seminar,#cases,#social,#access,#contact,
#news,#officers,#members,#agreements,#results,#entry-form,#tr-road,#tr-why,
.approach,.tr-panels{
  scroll-margin-top:calc(var(--hdr-h,76px) + 18px)
}
#top{scroll-margin-top:0}
body.admin-bar{--adminbar-h:32px}
body.admin-bar #business,body.admin-bar #people,body.admin-bar #mission,
body.admin-bar #seminar,body.admin-bar #cases,body.admin-bar #social,
body.admin-bar #access,body.admin-bar #contact,body.admin-bar #news,
body.admin-bar #members,body.admin-bar #agreements,body.admin-bar #results,
body.admin-bar #entry-form,body.admin-bar #tr-road,body.admin-bar #tr-why{
  scroll-margin-top:calc(var(--hdr-h,76px) + 18px + var(--adminbar-h,0px))
}

/* ============================================================
   事業ページ：サイクル図
   ============================================================ */
.bp-cycle{padding:0;margin:clamp(30px,3.6vw,48px) 0 0}
.bp-cycle-title{
  margin:0 0 clamp(18px,2.2vw,30px);padding-bottom:14px;border-bottom:1px solid var(--ink);
  font-size:calc(12px * var(--fs-body));letter-spacing:.12em;font-weight:800;color:var(--navy)
}
.bp-cycle-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,26%) minmax(0,1fr);
  gap:clamp(18px,2.4vw,34px) clamp(10px,1.6vw,24px);align-items:stretch
}
.bp-cycle-hub{
  grid-column:2;grid-row:1 / span 2;
  position:relative;display:flex;align-items:center;justify-content:center;min-height:230px
}
.bp-cycle-svg{width:100%;max-width:290px;height:auto;display:block}
.bp-cycle-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;font-weight:800;color:var(--navy);line-height:1.45;
  font-size:calc(clamp(13px,1.5vw,19px) * var(--fs-heading));letter-spacing:.02em
}

.bp-cycle-card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) clamp(24px,2.4vw,32px)
}
.bp-cycle-card.is-1{grid-column:1;grid-row:1}
.bp-cycle-card.is-2{grid-column:3;grid-row:1}
.bp-cycle-card.is-4{grid-column:1;grid-row:2}
.bp-cycle-card.is-3{grid-column:3;grid-row:2}
.bp-cycle-card.is-right{text-align:right}

.bp-cycle-head{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;row-gap:3px;align-items:start;margin-bottom:16px
}
.bp-cycle-num{
  grid-column:1;grid-row:1 / span 2;align-self:start;
  font-family:Arial,"Helvetica Neue",sans-serif;font-weight:900;
  font-size:calc(clamp(30px,3.2vw,46px) * var(--fs-heading));line-height:.85;letter-spacing:-.05em
}
.bp-cycle-head h3{
  grid-column:2;grid-row:1;
  margin:0;font-size:calc(clamp(15px,1.7vw,21px) * var(--fs-heading));
  font-weight:800;line-height:1.35;letter-spacing:.01em;color:var(--ink)
}
.bp-cycle-head p{
  grid-column:2;grid-row:2;
  margin:0;font-size:calc(11px * var(--fs-body));line-height:1.7;color:var(--muted)
}
/* 右側の2枚は、数字を外側（右）に置く */
.bp-cycle-card.is-right .bp-cycle-head{grid-template-columns:minmax(0,1fr) auto}
.bp-cycle-card.is-right .bp-cycle-num{grid-column:2;grid-row:1 / span 2}
.bp-cycle-card.is-right .bp-cycle-head h3,
.bp-cycle-card.is-right .bp-cycle-head p{grid-column:1}

.bp-cycle-tasks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bp-cycle-tasks li{
  padding:10px 11px;border-radius:6px;text-align:left;
  overflow-wrap:anywhere;
  font-size:calc(10px * var(--fs-body));line-height:1.6;color:#26333d;
  box-shadow:0 1px 3px rgba(16,27,37,.10)
}
.bp-cycle-bar{position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:0 0 13px 13px}

/* 段階ごとの色 */
.bp-cycle-card.is-1 .bp-cycle-num{color:var(--cyc1)}
.bp-cycle-card.is-2 .bp-cycle-num{color:var(--cyc2)}
.bp-cycle-card.is-3 .bp-cycle-num{color:var(--cyc3)}
.bp-cycle-card.is-4 .bp-cycle-num{color:var(--cyc4)}
.bp-cycle-card.is-1 .bp-cycle-bar{background:var(--cyc1)}
.bp-cycle-card.is-2 .bp-cycle-bar{background:var(--cyc2)}
.bp-cycle-card.is-3 .bp-cycle-bar{background:var(--cyc3)}
.bp-cycle-card.is-4 .bp-cycle-bar{background:var(--cyc4)}
.bp-cycle-card.is-1 .bp-cycle-tasks li{background:color-mix(in srgb,var(--cyc1) 28%,#fff)}
.bp-cycle-card.is-2 .bp-cycle-tasks li{background:color-mix(in srgb,var(--cyc2) 28%,#fff)}
.bp-cycle-card.is-3 .bp-cycle-tasks li{background:color-mix(in srgb,var(--cyc3) 28%,#fff)}
.bp-cycle-card.is-4 .bp-cycle-tasks li{background:color-mix(in srgb,var(--cyc4) 28%,#fff)}
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .bp-cycle-tasks li{background:var(--paper)}
}

@media(max-width:900px){
  .bp-cycle{margin-top:24px}
  .bp-cycle-title{margin-bottom:16px;padding-bottom:11px}
  .bp-cycle-grid{grid-template-columns:1fr;gap:14px}
  .bp-cycle-hub{grid-column:1;grid-row:1;min-height:0;margin-bottom:2px}
  .bp-cycle-svg{max-width:210px}
  .bp-cycle-card,.bp-cycle-card.is-1,.bp-cycle-card.is-2,
  .bp-cycle-card.is-3,.bp-cycle-card.is-4{grid-column:1;grid-row:auto}
  .bp-cycle-card.is-right{text-align:left}
  .bp-cycle-card.is-right .bp-cycle-head{grid-template-columns:auto minmax(0,1fr)}
  .bp-cycle-card.is-right .bp-cycle-num{grid-column:1;grid-row:1 / span 2}
  .bp-cycle-card.is-right .bp-cycle-head h3,
  .bp-cycle-card.is-right .bp-cycle-head p{grid-column:2}
  .bp-cycle-card{padding:16px 16px 22px;border-radius:12px}
  .bp-cycle-head{margin-bottom:13px}
  .bp-cycle-num{font-size:calc(30px * var(--fs-heading))}
  .bp-cycle-head h3{font-size:calc(15px * var(--fs-heading))}
  .bp-cycle-tasks{grid-template-columns:1fr;gap:6px}
  .bp-cycle-tasks li{padding:9px 11px;font-size:calc(10.5px * var(--fs-body))}
}

/* ============================================================
   事業ページの入口に挟む一枚（外から入ってきたときだけ出る）
   ============================================================ */
.bp-curtain{display:none}
html.bp-curtain-on{overflow:hidden}
html.bp-curtain-on body{overflow:hidden}
html.bp-curtain-on .bp-curtain{
  display:flex;position:fixed;inset:0;z-index:99999;
  align-items:center;justify-content:center;
  /* 幕の絵の地色に合わせる。絵を差し替えたら、この色も合わせ直すこと */
  background:#fff;opacity:1;transition:opacity 1s ease
}
html.bp-curtain-on .bp-curtain img{
  display:block;width:100%;height:100%;object-fit:contain;
  animation:bpCurtainIn 1.3s ease both
}
html.bp-curtain-on.bp-curtain-out .bp-curtain{opacity:0;pointer-events:none}
html.bp-curtain-on.bp-curtain-out .bp-curtain img{transform:scale(1.012);transition:transform 1s ease}
@keyframes bpCurtainIn{
  from{opacity:0;transform:scale(1.03)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  html.bp-curtain-on .bp-curtain img{animation:none}
}

/* 図版（画像）版のサイクル図。
   広い画面では画面いっぱいの図版、狭い画面では読めるカードに切り替える。 */
.bp-cycle-fig{margin:0;display:none}
.bp-cycle.has-fig .bp-cycle-fig{display:block}
.bp-cycle-fig>img{display:block;width:100%;max-width:1760px;height:auto;margin:0 auto}
.bp-cycle.has-fig .bp-cycle-lite{display:none}
.bp-cycle.has-fig{margin-top:clamp(22px,2.6vw,36px)}

/* 左右の余白いっぱいまで広げる。clip は横スクロールを増やさずにはみ出しを切る。 */
@supports (overflow-x:clip){
  .chiiki-lp.subpage{overflow-x:clip}
  .bp-cycle.has-fig .bp-cycle-fig{
    width:100vw;margin-left:calc(50% - 50vw);background:#ececec
  }
}

/* 携帯：図版をそのまま貼り、横に動かして見てもらう。
   （文字に起こしたカード表示は縦に長くなり、本文が遠くなるため使わない） */
@media(max-width:860px){
  .bp-cycle.has-fig .bp-cycle-fig{
    display:block;width:auto;margin-left:0;background:#ececec;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    border-radius:6px
  }
  .bp-cycle.has-fig .cyc{width:820px;max-width:none;margin:0}
  .bp-cycle.has-fig .cyc-card{pointer-events:none}
  .bp-cycle.has-fig .cyc-card::after{display:none}
  .bp-cycle.has-fig .bp-cycle-lite{display:none}
  .bp-cycle.has-fig .bp-cycle-hint{display:none}
  .bp-cycle.has-fig .bp-cycle-pan-note{display:block}
}

/* 図版だけのページ（03）。画面いっぱいには広げず、本文の幅に収める。 */
.bp-cycle.is-solo .bp-cycle-fig{
  display:block;width:auto;margin-left:0;background:none
}
.bp-cycle.is-solo .bp-cycle-fig img{max-width:880px}
.bp-cycle-pan-note{display:none;margin:10px 0 0;font-size:calc(10.5px * var(--fs-body));color:var(--muted);text-align:center}
@media(max-width:700px){
  .bp-cycle.is-solo .bp-cycle-fig{
    display:block;width:auto;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#f4f4f0
  }
  .bp-cycle.is-solo .bp-cycle-fig img{width:660px;max-width:none;margin:0}
  .bp-cycle.is-solo .bp-cycle-pan-note{display:block}
}

/* ============================================================
   サイクル図：1〜4のボックスにカーソルを合わせる（押す）と大きく開く
   ============================================================ */
.cyc{position:relative;display:block;max-width:1760px;margin:0 auto}
.cyc-base{display:block;width:100%;height:auto}

.cyc-veil{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:rgba(236,236,236,.74);opacity:0;transition:opacity .35s ease
}
.cyc:not([data-open=""]) .cyc-veil{opacity:1}
.cyc:has(.cyc-card:hover) .cyc-veil{opacity:1}

.cyc-card{
  position:absolute;z-index:2;padding:0;border:0;background:none;
  width:43.5%;height:36.145%;border-radius:2.59%/6%;cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease
}
.cyc-card.is-1{left:2.75%;top:18.072%}
.cyc-card.is-2{left:53.75%;top:18.072%}
.cyc-card.is-3{left:53.75%;top:57.831%}
.cyc-card.is-4{left:2.75%;top:57.831%}

.cyc-crop{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit}
.cyc-crop img{position:absolute;display:block;width:229.885%;max-width:none;height:auto}
.cyc-card.is-1 .cyc-crop img,.cyc-card.is-4 .cyc-crop img{left:-6.322%}
.cyc-card.is-2 .cyc-crop img,.cyc-card.is-3 .cyc-crop img{left:-123.563%}
.cyc-card.is-1 .cyc-crop img,.cyc-card.is-2 .cyc-crop img{top:-50%}
.cyc-card.is-3 .cyc-crop img,.cyc-card.is-4 .cyc-crop img{top:-160%}

.cyc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cyc-card:focus-visible{outline:3px solid #0d6efd;outline-offset:3px}

/* --- 開いたとき（カーソルを合わせた／押した） --- */
.cyc[data-open="1"] .cyc-card.is-1,
.cyc[data-open="2"] .cyc-card.is-2,
.cyc[data-open="3"] .cyc-card.is-3,
.cyc[data-open="4"] .cyc-card.is-4,
.cyc-card:hover,.cyc-card:focus-visible{
  z-index:6;cursor:zoom-out;box-shadow:0 1.2vw 3vw rgba(12,20,28,.28)
}
.cyc[data-open="1"] .cyc-card.is-1,.cyc-card.is-1:hover,.cyc-card.is-1:focus-visible{transform:scale(1.75);transform-origin:0 0}
.cyc[data-open="2"] .cyc-card.is-2,.cyc-card.is-2:hover,.cyc-card.is-2:focus-visible{transform:scale(1.75);transform-origin:100% 0}
.cyc[data-open="3"] .cyc-card.is-3,.cyc-card.is-3:hover,.cyc-card.is-3:focus-visible{transform:scale(1.75);transform-origin:100% 100%}
.cyc[data-open="4"] .cyc-card.is-4,.cyc-card.is-4:hover,.cyc-card.is-4:focus-visible{transform:scale(1.75);transform-origin:0 100%}

/* --- 真ん中の輪。開いた箱の反対側（対角）へ寄る --- */
.cyc-ring{
  position:absolute;left:39%;top:34.82%;width:22%;height:42.41%;z-index:8;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)
}
.cyc-ring img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cyc-ring b{
  position:relative;text-align:center;font-weight:800;color:#f15a24;letter-spacing:.02em;
  font-size:min(2vw,35px);line-height:1.34
}
.cyc[data-open="1"] .cyc-ring,.cyc-card.is-1:hover ~ .cyc-ring,.cyc-card.is-1:focus-visible ~ .cyc-ring{transform:translate(150%,33%) scale(1.3)}
.cyc[data-open="2"] .cyc-ring,.cyc-card.is-2:hover ~ .cyc-ring,.cyc-card.is-2:focus-visible ~ .cyc-ring{transform:translate(-154%,33%) scale(1.3)}
.cyc[data-open="3"] .cyc-ring,.cyc-card.is-3:hover ~ .cyc-ring,.cyc-card.is-3:focus-visible ~ .cyc-ring{transform:translate(-154%,-33%) scale(1.3)}
.cyc[data-open="4"] .cyc-ring,.cyc-card.is-4:hover ~ .cyc-ring,.cyc-card.is-4:focus-visible ~ .cyc-ring{transform:translate(150%,-33%) scale(1.3)}

.bp-cycle-hint{
  margin:14px 0 0;text-align:center;
  font-size:calc(11px * var(--fs-body));color:var(--muted);letter-spacing:.04em
}

@media(prefers-reduced-motion:reduce){
  .cyc-card,.cyc-ring,.cyc-veil{transition-duration:.01ms}
}

/* =========================================================
   理事一覧：写真を大きく、文字も少し大きく、行間は詰める
   ========================================================= */
.officer{
  width:clamp(190px,15.6vw,240px);
  margin-right:clamp(48px,5.2vw,80px)
}
.officer-photo{
  width:clamp(120px,10.4vw,152px);
  height:clamp(120px,10.4vw,152px);
  margin-bottom:13px
}
.officer-photo.is-initial{font-size:calc(50px * var(--fs-heading))}

.officer-role{
  font-size:calc(9.5px * var(--fs-body));letter-spacing:.18em;margin-bottom:4px
}
.officer-org{
  font-size:calc(11px * var(--fs-body));line-height:1.6;margin:0 0 3px;min-height:3.2em
}
.officer-name{
  font-size:calc(20px * var(--fs-heading));line-height:1.35
}

@media(max-width:900px){
  .officer{width:clamp(172px,22vw,210px);margin-right:clamp(40px,5vw,60px)}
  .officer-photo{width:clamp(108px,13vw,132px);height:clamp(108px,13vw,132px)}
  .officer-org{font-size:calc(10.5px * var(--fs-body))}
  .officer-name{font-size:calc(18px * var(--fs-heading))}
}
@media(max-width:640px){
  .officer{width:168px;margin-right:44px}
  .officer-photo{width:104px;height:104px;margin-bottom:11px}
  .officer-org{font-size:calc(10px * var(--fs-body));min-height:3.4em}
  .officer-name{font-size:calc(17px * var(--fs-heading))}
}

/* =========================================================
   理事一覧：背景をアイキャッチの絵（濃い緑）に差し替え
   絵が濃い色なので、白いベールではなく薄い暗幕にして、
   名前と肩書きは白抜きにする。
   ※ 日本画の背景に戻すときは、このかたまりを消して
     officers-bg-eyecatch2.webp を officers-bg-nihonga.webp に戻す。
   ========================================================= */
/* 背景をブランドの絵（白地＋クリーム）に差し替え。
   地が明るいので、暗幕ではなく白いベールにして、文字は濃い色に戻す。 */
.officers{
  background:#fff url(../img/section/officers-bg-brand.webp) center center / cover no-repeat!important
}
.officers:before{
  background:rgba(255,255,255,.50)!important
}
/* 明るい背景の上なので、文字は濃い色。読みやすさは白いにじみで確保する */
.officers .officer-name{
  color:#221815;
  text-shadow:0 1px 2px rgba(255,255,255,1),0 0 6px rgba(255,255,255,.98),0 0 14px rgba(255,255,255,.92),0 2px 18px rgba(255,255,255,.85)
}
.officers .officer-role,
.officers .officer-org{
  color:rgba(34,24,21,.78);
  text-shadow:0 1px 2px rgba(0,40,38,.5),0 2px 10px rgba(0,40,38,.4)
}
.officers .officer-photo{border-color:rgba(255,255,255,.6)}

/* =========================================================
   携帯：理事一覧の背景は、絵の全部が見えるように収める
   （横に切り取ると絵の中の文字が切れてしまうため）
   ========================================================= */
@media(max-width:700px){
  .officers{
    background-size:contain!important;
    background-position:center center!important
  }
}

/* =========================================================
   携帯：ヒーローの法人名を大きく
   1行に収まる範囲でいっぱいまで大きくする
   ========================================================= */
@media(max-width:640px){
  .hero-title-static .brand-line{
    font-size:calc(clamp(28px,9vw,42px) * var(--fs-heading))!important;
    letter-spacing:-.055em!important;
    line-height:1.02!important
  }
  .hero-title-static .small{
    font-size:calc(9.5px * var(--fs-heading))!important;
    margin-bottom:10px!important
  }
}

/* =========================================================
   研修ページ：01〜04は画面の大きさにかかわらず1枚に全部並べる
   ロードマップのボタンは「その段階の説明まで降りる」役目になる
   ========================================================= */
.tr-panels.is-all .tr-panel{
  display:block!important;opacity:1!important;transform:none!important;
  scroll-margin-top:calc(var(--hdr-h,76px) + 14px)
}
.tr-panels.is-all .tr-panel+.tr-panel{
  position:relative;
  margin-top:clamp(34px,5vw,74px);
  padding-top:clamp(32px,4.4vw,64px);
  border-top:1px solid var(--line)
}
/* 段階と段階のあいだの「▼（つづく）」の印。区切り線の上に重ねて置く。
   三角は用意された画像（エメラルド）を使う。 */
.tr-panels.is-all .tr-panel+.tr-panel:before{
  content:"";position:absolute;left:50%;top:0;
  transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 8px #fff
}
.tr-panels.is-all .tr-panel+.tr-panel:after{
  content:"";position:absolute;left:50%;top:0;
  transform:translate(-50%,-40%);
  width:26px;height:13px;
  background:url(../img/section/arrow-down-emerald.webp) center center/contain no-repeat
}
@media(max-width:640px){
  .tr-panels.is-all .tr-panel+.tr-panel:before{width:38px;height:38px;box-shadow:0 0 0 7px #fff}
  .tr-panels.is-all .tr-panel+.tr-panel:after{width:22px;height:11px}
}
/* 1枚に並べるときは、段階を指す三角は出さない */
.tr-panels.is-all:before,
.tr-panels.is-all:after{display:none!important}

/* 各段階の終わりに置く「↑ もどる」ボタン */
.tr-backs{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:clamp(26px,3.2vw,44px)
}
.tr-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px 9px 12px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--navy);text-decoration:none;
  font-size:calc(11px * var(--fs-body));font-weight:700;letter-spacing:.02em;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)
}
.tr-back span{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;flex:none;
  background:var(--blue);color:var(--navy);font-size:10px;line-height:1
}
.tr-back:hover,.tr-back:focus-visible{
  background:rgba(220,232,239,.42);border-color:var(--navy);transform:translateY(-2px)
}
@media(max-width:640px){
  .tr-backs{gap:8px;margin-top:24px}
  .tr-back{padding:8px 13px 8px 9px;font-size:calc(10.5px * var(--fs-body))}
}
@media(prefers-reduced-motion:reduce){
  .tr-back:hover,.tr-back:focus-visible{transform:none}
}

/* =========================================================
   秋田犬：たまに起きるお楽しみ
   ・犬の群れがいっせいに帯を横切る（海物語の魚群のように）
   ・子犬が2〜3匹、親犬のうしろについて行進する
   どちらも理事の写真や名前より奥（z-index:1）を通る。
   ========================================================= */
.dog-pack{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden
}
.dog-runner{
  position:absolute;left:0;bottom:var(--rb,14px);
  width:var(--rw,56px);aspect-ratio:640/613;
  animation:dogRun var(--rd,3.4s) linear var(--rdelay,0s) both
}
.dog-runner .rface{display:block;width:100%;height:100%}
.dog-runner.to-right .rface{transform:scaleX(-1)}
.dog-runner i{
  display:block;width:100%;height:100%;
  background:url(../img/section/akita-dog.webp) center bottom/contain no-repeat;
  filter:drop-shadow(0 4px 7px rgba(30,50,70,.12));
  animation:dogRunStep var(--rs,.32s) ease-in-out infinite alternate
}
@keyframes dogRun{
  from{transform:translateX(var(--rfrom,-120px))}
  to  {transform:translateX(var(--rto,120px))}
}
@keyframes dogRunStep{
  from{transform:translateY(0) rotate(-2deg)}
  to  {transform:translateY(-9%) rotate(2deg)}
}

/* 秋田の行列。犬の群れといっしょに駆け抜ける。 */
.pack-akita{
  position:absolute;left:0;bottom:var(--ab,14px);
  height:var(--ah,260px);aspect-ratio:1442/467;
  animation:dogRun var(--ad,3.4s) linear var(--adelay,0s) both
}
.pack-akita .akita-face{
  display:block;width:100%;height:100%;
  background:url(../img/section/akita-parade7.webp) center bottom/contain no-repeat
}
/* 絵は左へ進む向きなので、右へ走るときだけ返す */
.pack-akita.to-right .akita-face{transform:scaleX(-1)}

/* 子犬の行進。親犬と同じ --dogX を見て、少し遅れてついて行く。
   位置（親についていく動き）と、間合い（遅れ・追いつき）を
   別の入れ物に分けているので、行進の途中でも間合いだけ変えられる。 */
.dog-pup{
  position:absolute;left:0;bottom:14px;z-index:1;pointer-events:none;
  width:var(--pw,44px);aspect-ratio:640/613;
  transform:translateX(var(--dogX,0px));
  transition:transform 6s cubic-bezier(.32,.02,.24,1) var(--pdelay,0s)
}
.dog-pup .pup-lag{
  display:block;position:relative;z-index:0;width:100%;height:100%;
  transform:translateX(var(--poff,0px));
  transition:transform var(--plag,.9s) cubic-bezier(.3,.7,.3,1)
}
.dog-pup .pface{display:block;width:100%;height:100%}
.dog-pup.to-right .pface{transform:scaleX(-1)}
.dog-pup i{
  display:block;width:100%;height:100%;
  background:url(../img/section/akita-dog.webp) center bottom/contain no-repeat;
  filter:drop-shadow(0 4px 7px rgba(30,50,70,.12));
  animation:dogRunStep var(--ps,.38s) ease-in-out infinite alternate
}
/* 置いていかれた子犬が、あわてて追いつくとき */
.dog-pup.hurry i{animation-duration:.22s}

@media(prefers-reduced-motion:reduce){
  .dog-pack,.dog-pup,.pack-akita{display:none!important}
}

/* 群れといっしょに駆けるとき、足の運びも速くする */
.officers-dog.dash i{animation-duration:.3s}

/* うちの犬と、その小道具は、群れや行列の絵に隠れないよう、ひとつ手前に置く。
   （それでも理事の写真と名前（3）より奥のまま。群れと行列は 1。） */
.officers-dog{z-index:2!important}
.dog-ball,.dog-disc,.dog-bowl{z-index:2}

/* =========================================================
   秋田犬：群れが来るのに気づいて「！」が出る
   ========================================================= */
.officers-dog .dog-alert{
  position:absolute;left:50%;bottom:84%;
  width:96%;height:0;padding-bottom:96%;
  background:url(../img/section/dog-alert.webp) center/contain no-repeat;
  filter:drop-shadow(0 3px 6px rgba(20,40,60,.18));
  opacity:0;pointer-events:none;
  transform:translateX(-50%) scale(.3) rotate(-12deg);
  transform-origin:50% 100%;
  transition:opacity .14s ease,transform .34s cubic-bezier(.2,1.7,.4,1)
}
.officers-dog.alert .dog-alert{
  opacity:1;
  transform:translateX(-50%) scale(1) rotate(0deg);
  animation:dogAlertShake .42s ease-in-out .34s 2
}
@keyframes dogAlertShake{
  0%,100%{transform:translateX(-50%) scale(1) rotate(-7deg)}
  50%    {transform:translateX(-50%) scale(1.07) rotate(7deg)}
}
@media(prefers-reduced-motion:reduce){
  .officers-dog .dog-alert{display:none!important}
}

/* =========================================================
   会員ページ：ログインの案内と、資料が複数あるとき
   ========================================================= */
.members-alert{
  margin:0 0 20px;padding:12px 14px;
  border-left:4px solid #d0433c;background:#fdf3f2;
  font-size:calc(11.5px * var(--fs-body));line-height:1.75;color:#8a2b25
}
.members-alert.is-warn{
  border-left-color:#c8912a;background:#fdf8ee;color:#7a5a12
}
/* 資料が複数あるときに、ボタンが詰まらないように */
.members-file+.members-file{margin-top:10px}

/* =========================================================
   見出しの行マスク：文字の上が切れないようにする
   行を1行ずつ下から出す演出のために、各行を overflow:hidden の
   箱で包んでいる。その箱には下側にしか余裕がなかったため、
   行間を詰めた見出し（line-height .83）に日本語を入れると、
   漢字やカタカナの上が箱からはみ出して切れていた。
   上にも同じだけ余裕を作る。位置は変わらない（余白と同じだけ戻すため）。
   ========================================================= */
.has-lines .ln{
  padding-top:.26em;
  margin-top:-.26em!important
}

/* =========================================================
   置いていかれる子犬：気づく「！」・汗・あわてる巻き巻き
   印は .pup-lag の中に入れてあるので、子犬と一緒に動く。
   進む向きに合わせて、左右の置き場所を入れ替える。
   ========================================================= */
.dog-pup .pup-alert,
.dog-pup .pup-sweat,
.dog-pup .pup-dash{
  position:absolute;display:block;pointer-events:none;opacity:0
}

/* ① はっと気づく「！」 */
.dog-pup .pup-alert{
  right:34%;bottom:100%;
  /* びっくりマークは 583x794 の新しい絵に差し替えた。
     線が黒いので、白いふちをつけて体の上でも読めるようにしている。 */
  width:46%;aspect-ratio:583/794;
  background:url(../img/section/pup-alert2.webp) center/contain no-repeat;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px rgba(255,255,255,.9));
  transform:scale(.35) rotate(-14deg);transform-origin:50% 100%;
  transition:opacity .14s ease,transform .32s cubic-bezier(.2,1.7,.4,1)
}
.dog-pup.to-right .pup-alert{right:auto;left:34%;transform:scale(.35) rotate(14deg)}
.dog-pup.notice .pup-alert{opacity:1;transform:scale(1) rotate(-6deg)}
.dog-pup.notice.to-right .pup-alert{transform:scale(1) rotate(6deg)}

/* ② 汗 */
.dog-pup .pup-sweat{
  right:60%;bottom:84%;
  width:54%;aspect-ratio:480/255;
  background:url(../img/section/pup-sweat.webp) center/contain no-repeat;
  transform:translateY(4px) scale(.7);
  transition:opacity .2s ease,transform .3s cubic-bezier(.3,.8,.3,1)
}
.dog-pup.to-right .pup-sweat{right:auto;left:52%}
.dog-pup.sweaty .pup-sweat{
  opacity:.95;transform:none;
  animation:pupSweat 1.1s ease-in-out infinite
}
@keyframes pupSweat{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-9%) scale(1.06)}
}

/* ③ あわてる足もとの巻き巻き（走ってきた側に出す） */
.dog-pup .pup-dash{
  left:62%;bottom:-2%;z-index:-1;      /* 子犬の後ろで舞う土ぼこり */
  width:66%;aspect-ratio:242/196;
  background:url(../img/section/pup-dash.webp) center/contain no-repeat;
  transform:scale(.5);transform-origin:20% 70%;
  transition:opacity .18s ease,transform .3s ease
}
.dog-pup.to-right .pup-dash{left:auto;right:62%;transform:scaleX(-1) scale(.5)}
.dog-pup.hurry .pup-dash{
  opacity:.85;transform:scale(1);
  animation:pupDash .5s linear infinite
}
.dog-pup.hurry.to-right .pup-dash{transform:scaleX(-1) scale(1)}
@keyframes pupDash{
  0%  {opacity:.85}
  50% {opacity:.45}
  100%{opacity:.85}
}

@media(prefers-reduced-motion:reduce){
  .dog-pup .pup-alert,.dog-pup .pup-sweat,.dog-pup .pup-dash{display:none!important}
}

/* =========================================================
   子犬の寄り道：道ばたの花と、ひらひら出てくる蝶
   どちらも帯に置くので、子犬と一緒には動かない（地面にある）。
   ========================================================= */
.pup-flower,
.pup-butterfly{
  position:absolute;display:block;pointer-events:none;
  width:var(--fw,40px);opacity:0
}
/* 花は子犬より後ろ（z-index 0）に置く。万一近づいても子犬を隠さない。
   子犬は z-index:1、親犬は z-index:2。 */
.pup-flower{
  z-index:0;
  aspect-ratio:263/227;
  background:url(../img/section/pup-flower.webp) center bottom/contain no-repeat;
  transform:translateX(-50%) scale(.55);
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,1.5,.35,1)
}
.pup-flower.in{opacity:1;transform:translateX(-50%) scale(1)}

/* 蝶はいちばん手前。--fdir は飛んでいく向き（列の後ろ側）で 1 か -1 が入る。
   .flip は -1 のとき（左へ飛ぶとき）に JS から付く。 */
.pup-butterfly{
  z-index:3;
  aspect-ratio:283/235;
  background:url(../img/section/pup-butterfly.webp) center bottom/contain no-repeat;
  transform:translate(-50%,0) scale(.5)
}
/* 飛んだあとの線（ひらひら）は、ご要望で外した。
   絵は assets/img/section/pup-trail.webp に残してあるので、
   もう一度つけたくなったらここに :before を書き戻せばよい。
   JS が付ける .flip も、そのときの左右の入れ替え用に残してある。 */

/* 花から出てきて、しばらく花のまわりをひらひら（子犬はまだ気づかない）。
   そのあと、行進の来たほうへ、子犬を連れてふらふら流れていく。
   横の数字は蝶の幅に対する割合。合計 500% ＝ 子犬が戻る距離より長いので、
   蝶はいつも子犬の少し先にいる。 */
.pup-butterfly.in{opacity:1;animation:pupFly 5.8s linear both}
@keyframes pupFly{
  0%  {opacity:0;transform:translate(-50%,-27%)  scale(.5) rotate(0deg)}
  6%  {opacity:1;transform:translate(calc(-50% + var(--fdir,1) * 20%),-80%)  scale(.7)  rotate(-6deg)}
  14% {transform:translate(calc(-50% + var(--fdir,1) * 55%),-143%) scale(.85) rotate(-9deg)}
  22% {transform:translate(calc(-50% + var(--fdir,1) * 20%),-75%)  scale(.8)  rotate(7deg)}
  30% {transform:translate(calc(-50% + var(--fdir,1) * 115%),-204%) scale(.9)  rotate(-6deg)}
  44% {transform:translate(calc(-50% + var(--fdir,1) * 300%),-163%) scale(.92) rotate(8deg)}
  58% {transform:translate(calc(-50% + var(--fdir,1) * 490%),-293%) scale(.95) rotate(-7deg)}
  72% {transform:translate(calc(-50% + var(--fdir,1) * 665%),-204%) scale(.97) rotate(7deg)}
  86% {opacity:1;transform:translate(calc(-50% + var(--fdir,1) * 840%),-327%) scale(1) rotate(-5deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--fdir,1) * 980%),-265%) scale(1) rotate(3deg)}
}

/* 花の匂いを嗅いでいるあいだ：少し前かがみになって、足を止める */
.dog-pup.sniffing .pface{transform:rotate(7deg) translateY(4%)}
.dog-pup.sniffing.to-right .pface{transform:scaleX(-1) rotate(7deg) translateY(4%)}
.dog-pup.sniffing i{animation-play-state:paused}

/* 蝶を追いかけているあいだ：来た方をふり返って歩く */
.dog-pup.turnback .pface{transform:scaleX(-1)}
.dog-pup.turnback.to-right .pface{transform:none}

@media(prefers-reduced-motion:reduce){
  .pup-flower,.pup-butterfly{display:none!important}
}

/* =========================================================
   ロゴまわり（assets/img/brand/）
   ・logo-mark      … シンボルだけ（濃い茶）
   ・logo-mark-white… シンボルだけ（白。濃い背景用）
   ・logo-vistras   … シンボル＋VISTRAS（白版もあり）
   ・logo-word      … 法人名の文字組み（白版もあり）
   もとの文字組み（.logo-word / .logo-sub）の指定は残してあるので、
   文字に戻したいときはテンプレート側を戻すだけでよい。
   ========================================================= */
.logo{min-width:0!important;gap:11px}
.logo .logo-mark{
  display:block;height:40px;width:auto;flex:none;
  transition:height .3s ease
}
.logo .logo-img{
  display:block;height:46px;width:auto;
  max-width:min(52vw,400px);object-fit:contain;
  transition:height .3s ease
}
body.is-scrolled .logo .logo-mark{height:34px}
body.is-scrolled .logo .logo-img{height:39px}
@media(max-width:900px){
  .logo{gap:9px}
  .logo .logo-mark{height:31px}
  .logo .logo-img{height:34px}
  body.is-scrolled .logo .logo-mark{height:28px}
  body.is-scrolled .logo .logo-img{height:31px}
}
@media(max-width:520px){
  .logo .logo-mark{height:26px}
  .logo .logo-img{height:28px}
  body.is-scrolled .logo .logo-mark{height:24px}
  body.is-scrolled .logo .logo-img{height:26px}
}

/* オープニング演出（白い画面）の中央、文字の上 */
.opening-mark{
  display:block;margin:0 auto 28px;height:86px;width:auto
}
@media(max-width:600px){.opening-mark{height:64px;margin-bottom:20px}}

/* フッター（濃い紺）：法人名の上に白いロゴ */
.footer-mark{display:block;height:74px;width:auto;margin:0 0 18px;opacity:.95}
@media(max-width:900px){.footer-mark{height:62px}}

/* お問い合わせの帯（紺）：見出しの上に白いマーク */
.cta-mark{display:block;height:44px;width:auto;margin:0 0 18px;opacity:.9}
@media(max-width:900px){.cta-mark{height:36px;margin-bottom:14px}}

/* 記事の本文の終わり：署名のようにマークを置く */
.article-sign{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin:54px auto 10px;max-width:760px;color:var(--line)
}
.article-sign:before,
.article-sign:after{content:"";flex:1;height:1px;background:var(--line)}
.article-sign img{display:block;height:30px;width:auto;opacity:.5}

/* 会員ページ：ログインカードの見出しの上 */
.members-mark{display:block;height:38px;width:auto;margin:0 0 12px}

/* ログインしているときの管理バー（上の黒い帯）のぶん、ヘッダーを下げる。
   訪問者には関係しない（管理バーが出ないので位置は変わらない）。 */
body.admin-bar .header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .header{top:46px}
}

/* =========================================================
   自殺対策担当者の皆様へ（template-staff.php）
   読み物のページなので、1カラムで行間を広めにしている。
   ========================================================= */
.st-page{padding-bottom:0}
.st-head h1{line-height:1.25}
.st-lead{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(clamp(17px,2.1vw,26px) * var(--fs-heading));
  line-height:1.8;color:var(--navy)
}
.st-block{
  max-width:860px;margin:0 auto;
  padding:clamp(34px,4.6vw,64px) 0
}
.st-block+.st-block{border-top:1px solid var(--line)}
.st-block.is-accent{
  position:relative;border-top:none;
  background:var(--paper);border-radius:22px;
  padding:clamp(30px,4.2vw,56px) clamp(20px,3.4vw,46px);
  margin-top:clamp(28px,3.6vw,52px)
}
.st-h2{
  font-family:"Noto Serif JP",serif;font-weight:800;
  font-size:calc(clamp(19px,2.4vw,30px) * var(--fs-heading));
  line-height:1.6;letter-spacing:.02em;margin:0 0 22px;color:var(--navy)
}
.st-p{
  font-size:calc(12px * var(--fs-body));line-height:2.15;
  margin:0 0 1.3em;color:var(--ink)
}
.st-p:last-child{margin-bottom:0}

/* 現場の声。かぎかっこはCSSで付ける */
.st-voices{
  list-style:none;margin:26px 0 30px;padding:0;
  display:grid;gap:10px
}
.st-voices li{
  position:relative;padding:13px 16px 13px 40px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  font-size:calc(11px * var(--fs-body));line-height:1.85;color:var(--muted)
}
.st-voices li:before{
  content:"「";position:absolute;left:14px;top:12px;
  font-family:"Noto Serif JP",serif;font-size:calc(15px * var(--fs-heading));
  color:var(--blue);opacity:.7
}
.st-voices li:after{content:"」"}

/* 次のページへ進むボタン */
.st-cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:30px;padding:20px 24px;border-radius:999px;
  background:var(--navy);color:#fff;
  transition:transform .25s ease,box-shadow .25s ease
}
.st-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(16,40,60,.18)}
.st-cta-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.st-cta-copy strong{font-size:calc(12px * var(--fs-body));font-weight:800}
.st-cta-copy small{font-size:calc(9.5px * var(--fs-body));color:#c7d6e0;line-height:1.7}
.st-cta-arrow{flex:none;font-size:calc(13px * var(--fs-body))}
@media(max-width:600px){
  .st-cta{border-radius:18px;padding:18px 20px}
}

/* 連携している自治体 */
.st-agree-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px
}
.st-agree-item{margin:0}
.st-agree-item img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:14px;border:1px solid var(--line)
}
.st-agree-item figcaption{display:flex;flex-direction:column;gap:3px;margin-top:12px}
.st-agree-item strong{font-size:calc(11px * var(--fs-body));font-weight:800}
.st-agree-item small{font-size:calc(9px * var(--fs-body));color:var(--muted)}
@media(max-width:800px){
  .st-agree-grid{grid-template-columns:1fr 1fr;gap:14px}
}
@media(max-width:520px){
  .st-agree-grid{grid-template-columns:1fr}
}

/* 他のページへ */
.st-links{
  max-width:860px;margin:clamp(30px,4vw,56px) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.st-link{
  display:block;padding:22px 24px;border:1px solid var(--line);border-radius:16px;
  background:#fff;transition:border-color .25s ease,transform .25s ease
}
.st-link:hover{border-color:var(--blue);transform:translateY(-2px)}
.st-link-num{display:block;font-size:calc(9px * var(--fs-body));letter-spacing:.2em;color:var(--blue);font-weight:800;margin-bottom:8px}
.st-link strong{display:block;font-size:calc(12px * var(--fs-body));margin-bottom:6px}
.st-link small{display:block;font-size:calc(9.5px * var(--fs-body));color:var(--muted);line-height:1.75}
@media(max-width:700px){.st-links{grid-template-columns:1fr}}

/* =========================================================
   トップページ：代表あいさつの下の導線と、数字の出どころ
   ========================================================= */
.message-more{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:26px 0 0;padding:18px 22px;border-radius:16px;
  background:var(--navy);color:#fff;
  transition:transform .25s ease,box-shadow .25s ease
}
.message-more:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(16,40,60,.18)}
.message-more-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.message-more-copy strong{font-size:calc(12px * var(--fs-body));font-weight:800}
.message-more-copy small{font-size:calc(9.5px * var(--fs-body));color:#c7d6e0;line-height:1.7}
.message-more-arrow{flex:none}
.profile-links{margin:10px 0 0}
.profile-links a{font-size:calc(9px * var(--fs-body));color:var(--blue);font-weight:800;text-decoration:underline}

/* メニューの項目が1つ増えた（担当者の方へ）ぶん、
   横幅がぎりぎりになる画面では、間隔と文字を少しだけ詰める。 */
@media(max-width:1460px) and (min-width:901px){
  .nav{gap:14px!important;font-size:calc(9.5px * var(--fs-body))!important}
  .logo{gap:9px}
  .logo .logo-img{height:37px}
  .logo .logo-mark{height:32px}
  .menu{margin-left:12px}
  .nav-members{padding:10px 16px!important}
}
.st-agree-link{display:inline-block;margin-top:4px;font-size:calc(9px * var(--fs-body));color:var(--blue);font-weight:800;text-decoration:underline}

/* 実績・事例のカードを4枚にしたので、並びを4列にする。
   （狭い画面では2列 → 1列） */
.case-links{grid-template-columns:repeat(4,1fr)}
.case-link{min-height:172px}
.case-link h4{font-size:calc(19px * var(--fs-heading));margin:26px 0 10px}
@media(max-width:1100px) and (min-width:761px){
  .case-links{grid-template-columns:1fr 1fr}
  .case-link:nth-child(3),.case-link:nth-child(4){border-top:0}
  .case-link:nth-child(3){border-left:1px solid var(--line)}
}

/* =========================================================
   研修ページ：これまでの研修・講座の一覧
   ========================================================= */
.tr-results-list{
  max-width:980px;margin:clamp(40px,5vw,72px) auto 0;
  padding:0 clamp(16px,3vw,24px)
}
.tr-results-head{
  display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:end;
  padding-bottom:18px;border-bottom:1px solid var(--line)
}
.tr-results-head h2{
  font-family:"Noto Serif JP",serif;font-weight:800;
  font-size:calc(clamp(20px,2.6vw,32px) * var(--fs-heading));margin:8px 0 0
}
.tr-results-head p{font-size:calc(10.5px * var(--fs-body));line-height:1.9;color:var(--muted);margin:0}
.tr-results-head strong{color:var(--ink);font-size:calc(13px * var(--fs-body))}
@media(max-width:760px){.tr-results-head{grid-template-columns:1fr}}

.tr-record-list{list-style:none;margin:0;padding:0}
.tr-record{
  display:grid;grid-template-columns:104px 1fr auto;gap:14px;align-items:baseline;
  padding:14px 4px;border-bottom:1px solid var(--line)
}
.tr-record-date{font-size:calc(10px * var(--fs-body));color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.tr-record-title{font-size:calc(11px * var(--fs-body));line-height:1.7}
.tr-record-title small{color:var(--muted);font-size:calc(9px * var(--fs-body))}
.tr-record-cat{
  justify-self:end;font-size:calc(8.5px * var(--fs-body));font-weight:800;
  padding:4px 10px;border-radius:999px;background:var(--paper);color:var(--muted);white-space:nowrap
}
.tr-record-note{margin:16px 0 0;font-size:calc(9px * var(--fs-body));color:var(--muted);line-height:1.8}
@media(max-width:600px){
  .tr-record{grid-template-columns:86px 1fr;row-gap:6px}
  .tr-record-cat{grid-column:2;justify-self:start}
}

/* 実績の数字を4つにして、それぞれ根拠のページへのリンクにした */
.numbers{grid-template-columns:repeat(4,1fr)}
.number{display:block;position:relative;transition:background .25s ease}
a.number:hover{background:var(--paper)}
.number small{display:inline-flex;align-items:center;gap:6px}
.number-arrow{
  display:inline-block;color:currentColor;font-weight:800;
  opacity:0;transform:translateX(-4px);transition:opacity .25s ease,transform .25s ease
}
a.number:hover .number-arrow{opacity:1;transform:none}
@media(max-width:900px){
  .numbers{grid-template-columns:1fr 1fr!important}
  .number:nth-child(2n){border-right:0}
  .number:nth-child(-n/**/+2){border-bottom:1px solid var(--line)}
  .number-arrow{opacity:1;transform:none}
}

/* ミッションの3つの小見出しを、それぞれの事業ページへのリンクにした */
.mini-item{transition:padding-left .25s ease,color .25s ease}
a.mini-item:hover{padding-left:6px}
.mini-arrow{
  display:inline-block;margin-left:10px;font-weight:800;color:currentColor;
  opacity:0;transform:translateX(-4px);transition:opacity .25s ease,transform .25s ease
}
a.mini-item:hover .mini-arrow{opacity:1;transform:none}
@media(max-width:900px){.mini-arrow{opacity:.55;transform:none}}

/* 自治体の取り組み（外部の公開ページへのリンク） */
.st-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.st-case{
  display:flex;flex-direction:column;gap:8px;
  padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;
  transition:border-color .25s ease,transform .25s ease
}
.st-case:hover{border-color:var(--blue);transform:translateY(-2px)}
.st-case strong{font-size:calc(12px * var(--fs-body));line-height:1.6}
.st-case span{font-size:calc(10px * var(--fs-body));line-height:1.8;color:var(--muted)}
.st-case small{
  margin-top:2px;font-size:calc(9px * var(--fs-body));font-weight:800;color:var(--blue);
  display:inline-flex;align-items:center;gap:6px
}
@media(max-width:700px){.st-case-grid{grid-template-columns:1fr}}

/* 大きな見出しが単語の途中で折り返さないようにする（日本語向け） */
/* 折り返し：まず「ふつう」に戻し（Safariなど auto-phrase に未対応の
   ブラウザでは、これが効いて文字がはみ出さない）、対応ブラウザだけ
   文節で折る。keep-all は日本語だと折り返せずに見切れるので使わない。 */
.tr-cta h2,.st-h2,.footer-logo{word-break:normal;word-break:auto-phrase;overflow-wrap:break-word;line-break:strict}

/* フッターの法人名。列の幅に対して大きすぎて「戦／略機構」と割れていた。 */
.footer-logo{font-size:calc(clamp(19px,2vw,26px) * var(--fs-heading));letter-spacing:.1em;line-height:1.5}

/* =========================================================
   ヒーローの2つの入口
   パソコン：白い枠の外、その左側に縦2つ（.is-side）
   スマホ　：枠の中、文章の下に縦2つ（.is-inline）
   中身は同じで、画面の広さで出し分けている。
   ========================================================= */
.hero-entry{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.hero-entry.is-side{
  position:absolute;z-index:6;
  left:clamp(16px,3.2vw,40px);bottom:7%;
  width:min(330px,26vw)
}
.hero-entry.is-inline{display:none;margin-top:16px}
.hero-entry-btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.55);color:#fff;
  backdrop-filter:blur(6px);background:rgba(11,31,46,.42);
  transition:transform .25s ease,box-shadow .25s ease
}
.hero-entry-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(8,22,34,.28)}
.hero-entry-btn.is-staff{background:#fff;border-color:#fff;color:var(--navy)}
.hero-entry-copy{display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0}
.hero-entry-copy strong{font-size:calc(10.5px * var(--fs-body));font-weight:800;white-space:nowrap}
.hero-entry-copy small{font-size:calc(8px * var(--fs-body));opacity:.82;line-height:1.5}
.hero-entry-arrow{flex:none;font-weight:800}
@media(max-width:1240px) and (min-width:901px){
  .hero-entry.is-side{width:min(280px,26vw)}
  .hero-entry-copy small{display:none}
}
@media(max-width:900px){
  .hero-entry.is-inline{gap:8px}
  .hero-entry-copy small{font-size:calc(8px * var(--fs-body))}
}

/* =========================================================
   スマホでの見え方の調整
   ・ヒーローの2つの入口は、白い枠の「外（下）」に置く
   ・事例カードは縦に1列（あとから足した4列指定を打ち消す）
   ・長い見出しが画面からはみ出さないようにする
   ========================================================= */
@media(max-width:900px){
  /* 枠を少し持ち上げて、その下にボタンを2つ置く */
  .hero-message-static{bottom:calc(7% + 126px)!important}
  .hero-entry.is-side{
    display:flex;left:20px;right:20px;width:auto;bottom:7%;gap:8px
  }
  .hero-entry.is-inline{display:none!important}
  .hero-entry-btn{padding:12px 18px}
  .hero-entry-copy strong{font-size:calc(10px * var(--fs-body));white-space:normal}
  .hero-entry-copy small{display:none}

  /* 事例カードは縦に1列 */
  .case-links{grid-template-columns:1fr!important}
  .case-link+.case-link{border-left:1px solid var(--line)!important;border-top:0}

  /* 大きな見出しの折り返し。語の途中で切らず、できれば文節で折る。
     （word-break:auto-phrase に対応していないブラウザでは1つめが効く） */
  .tr-cta h2,.st-h2,.st-lead,.tr-head h1,.index-title h1,
  .who-header h2,#people .intro .h2,.magazine-heading h2{
    word-break:normal;
    word-break:auto-phrase;
    overflow-wrap:break-word
  }
  .tr-cta h2{font-size:calc(clamp(26px,7.4vw,40px) * var(--fs-heading))!important;line-height:1.35}
  .st-lead{font-size:calc(clamp(15px,4.4vw,20px) * var(--fs-body))!important;line-height:1.75}
}

/* スマホでは、見出しの「1行ずつせり上がる」演出をやめる。
   演出のために1行ずつ箱で囲って、はみ出しを隠しているので、
   画面が狭くて文字が折り返すと、下の行が切れて読めなくなるため。 */
@media(max-width:900px){
  .has-lines .ln{
    display:inline!important;overflow:visible!important;
    padding:0!important;margin:0!important
  }
  .has-lines .ln-i{
    display:inline!important;transform:none!important;opacity:1!important;transition:none!important
  }
  /* 「この地域で、自殺対策を動かす。」など、1行固定の見出しを折り返す */
  #people .intro .h2{
    white-space:normal!important;
    font-size:calc(clamp(26px,7.2vw,40px) * var(--fs-heading))!important;
    line-height:1.3!important;letter-spacing:-.03em!important
  }
}

/* スマホでは本文も「文節」で折り返す。
   （対応していないブラウザでは、今までどおりの折り返しになるだけ） */
@media(max-width:900px){
  .chiiki-lp,.subpage,.footer{word-break:auto-phrase}
}

/* スマホで文字の列が細くなりすぎていたところの余白を詰める
   （細い列だと、語の途中で折り返されて読みにくくなるため） */
@media(max-width:900px){
  .about-panels,.about-access{padding-left:0!important;padding-right:0!important}
}

/* 担当者ページの最後の見出しは文字数があるので、少し小さくして
   「まずは教えてください。／話してください」の2行に収める。 */
.st-page .tr-cta h2{
  font-size:calc(clamp(28px,3.4vw,46px) * var(--fs-heading))!important;
  line-height:1.4!important;letter-spacing:-.03em!important
}

/* =========================================================
   団体概要ページ：理事メンバー紹介
   （役員の投稿から出しているので、管理画面で増減・並べ替えできる）
   ========================================================= */
.about-members{margin:90px auto 0;max-width:1180px}
.about-members-head{text-align:center;margin-bottom:46px}
.about-members-head .kicker{display:block;margin-bottom:14px}
.about-members-head h2{
  margin:0 0 18px;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(26px,3vw,40px) * var(--fs-heading));
  letter-spacing:-.03em;line-height:1.35;color:var(--ink);
  word-break:normal;word-break:auto-phrase;overflow-wrap:break-word
}
.about-members-head p{
  margin:0 auto;max-width:640px;
  font-size:calc(11.5px * var(--fs-body));line-height:2;color:var(--muted);
  word-break:normal;word-break:auto-phrase;overflow-wrap:break-word
}
.about-members-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:44px clamp(20px,2.6vw,38px)
}
.about-member{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.about-member-photo{
  width:clamp(120px,11vw,150px);height:clamp(120px,11vw,150px);
  border-radius:50%;overflow:hidden;margin-bottom:18px;
  background:#e8eef1;display:flex;align-items:center;justify-content:center
}
.about-member-photo img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%
}
.about-member-photo.is-initial{
  font-family:"Noto Serif JP",serif;color:#fff;background:var(--navy);
  font-size:calc(46px * var(--fs-heading));line-height:1
}
.about-member-body{min-width:0;width:100%}
.about-member-role{
  display:block;font-size:calc(8.5px * var(--fs-body));letter-spacing:.2em;
  font-weight:800;color:var(--muted);margin-bottom:8px
}
.about-member-name{
  margin:0 0 8px;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(17px * var(--fs-heading));line-height:1.45;
  letter-spacing:.02em;color:var(--ink)
}
.about-member-org{
  margin:0;font-size:calc(9.5px * var(--fs-body));line-height:1.8;color:var(--muted);
  word-break:normal;word-break:auto-phrase;overflow-wrap:break-word
}
@media(max-width:900px){
  .about-members{margin-top:60px}
  .about-members-grid{grid-template-columns:repeat(2,1fr);gap:34px 18px}
  .about-members-head{margin-bottom:32px}
  /* 幅の狭い画面では、写真が列からはみ出さないようにする */
  .about-member-photo{
    width:min(clamp(96px,26vw,130px),100%);height:auto;aspect-ratio:1/1;margin-bottom:14px
  }
  .about-member-photo.is-initial{font-size:calc(34px * var(--fs-heading))}
}
@media(max-width:420px){
  .about-members-grid{gap:28px 14px}
  .about-member-name{font-size:calc(14.5px * var(--fs-heading))}
}

/* =========================================================
   トップページ：代表あいさつの導線を写真の下へ
   （パソコンでは右側のプロフィールと並ぶ位置、スマホでは文章の下）
   ========================================================= */
.message-portrait-col{
  display:flex;flex-direction:column;align-self:stretch;
  background:#fff;min-width:0;padding:0 0 clamp(18px,2vw,26px)
}
#people .message-portrait-col .message-portrait,
.message-portrait-col .message-portrait{
  min-height:0!important;max-height:none!important;flex:1 1 auto
}
.message-portrait-col .message-more{
  margin:0 clamp(14px,1.6vw,24px);padding:15px 18px;border-radius:14px
}
.message-portrait-col .message-more-copy strong{font-size:calc(11px * var(--fs-body))}
.message-portrait-col .message-more-copy small{font-size:calc(8.8px * var(--fs-body));line-height:1.65}
/* パソコンでは写真の下だけ、スマホでは文章の下だけを見せる
   （バナー画像にしたときも取り違えないよう、ここで確実に決める） */
.message-more.is-inline{display:none!important}
@media(max-width:900px){
  .message-portrait-col{padding-bottom:0}
  .message-more.is-under-photo{display:none!important}
  .message-more.is-inline{display:flex!important}
  .message-more.is-inline.is-banner{display:block!important}
}

/* =========================================================
   オープニング（最初の白い画面）の法人名をロゴ画像に
   ========================================================= */
.opening-word{
  display:block;margin:0 auto;width:min(760px,80vw);height:auto
}
@media(max-width:600px){
  .opening-word{width:min(480px,88vw)}
  .opening-kicker{margin-bottom:20px;font-size:calc(9.5px * var(--fs-body));letter-spacing:.22em}
  .opening-en{margin-top:18px;letter-spacing:.34em;font-size:calc(13px * var(--fs-heading))}
}

/* 代表あいさつ：ボタンを PROFILE の枠と同じ高さに置く（JSで位置を計算） */
.message-portrait-col{position:relative}
.message-portrait-col .message-more.is-synced{
  position:absolute;left:clamp(14px,1.6vw,24px);right:clamp(14px,1.6vw,24px);margin:0
}

/* 理事一覧のカードを、団体概要ページの「理事メンバー」への入口にする */
.officer-link{display:block;color:inherit;text-decoration:none;transition:transform .3s ease}
.officer-link:hover,.officer-link:focus-visible{transform:translateY(-4px)}
.officer-link:hover .officer-name,.officer-link:focus-visible .officer-name{color:var(--navy)}
.officer-link:focus-visible{outline:2px solid var(--navy);outline-offset:6px;border-radius:12px}

/* 代表あいさつの導線を、バナー画像1枚にしたとき
   （画像に見出しも説明も入っているので、枠の色や余白は付けない） */
.message-more.is-banner,
.message-portrait-col .message-more.is-banner{
  display:block;padding:0;background:none;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 24px rgba(16,40,60,.14)
}
.message-more.is-banner:hover{box-shadow:0 16px 32px rgba(16,40,60,.22)}
.message-more-img{display:block;width:100%;height:auto}
@media(max-width:900px){
  .message-more.is-banner{border-radius:12px}
}

/* バナーも写真と同じ向きから、文章のあとに続けて現れる */
#people .message-portrait-col .message-more{
  opacity:0;transform:translateX(-11%);
  transition:opacity 1.7s cubic-bezier(.2,.7,.15,1),transform 2.05s cubic-bezier(.2,.7,.15,1);
  transition-delay:1.6s
}
#people .message-feature.slid .message-portrait-col .message-more{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  #people .message-portrait-col .message-more{opacity:1;transform:none;transition:none}
}

/* 代表あいさつの2つの列は、中身の幅につられて割合が変わらないようにする
   （PROFILEの枠を大きくしたときに、写真側の列が細くならないように） */
#people .message-feature > *{min-width:0}

/* PROFILE の枠：バナーに合わせて大きくしたぶん、
   文章が上に寄って下が空いてしまわないよう、上下の真ん中に置く。
   （余りがないときは、これまでどおりの見え方のまま） */
.profile-card{display:flex;flex-direction:column}
.profile-label{flex:none;align-self:flex-start}
.profile-card > p:first-of-type{margin-top:auto}
.profile-card > p:last-child{margin-bottom:auto}

/* バナーは画像の中に「CLICK HERE」が入っているので、別の印は置かない */
.message-more.is-banner{position:relative}

/* =========================================================
   スマホ（とくに iPhone の Safari）を軽くするための調整
   見た目は変えずに、描き直しの重い指定だけを外している
   ========================================================= */
@media(max-width:900px){
  /* ヘッダーの「すりガラス」は、Safariだとスクロールのたびに
     後ろの画面をぼかし直すので重い。白の濃さを上げて代わりにする。 */
  .header{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:rgba(255,255,255,.97)!important
  }
  body.nav-open .header .nav{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:#fff!important
  }
  /* ヒーローの2つのボタンは、動いている映像をぼかしていて、
     1秒間に何十回もぼかし直すことになる。色を少し濃くして代える。 */
  .hero-entry-btn{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:rgba(11,31,46,.56)
  }
  .hero-entry-btn.is-staff{background:#fff}
  /* 映像そのものへの色調整は、1コマごとに掛け直しになるため外す
     （彩度5%・コントラスト2%の差なので、見た目はほぼ変わらない） */
  .hero-static-video{filter:none!important}
  /* カードの背景は、画面の幅に合った軽いほうを使う（1200px角 → 560px角） */
  .mag-bg-1{background-image:url(../img/mag-bg/1-bg5-sp.webp)}
  .mag-bg-2{background-image:url(../img/mag-bg/2-bg2-sp.webp)}
  .mag-bg-3{background-image:url(../img/mag-bg/3-bg13-sp.webp)}
  .mag-bg-4{background-image:url(../img/mag-bg/4-bg4-sp.webp)}
  .mag-bg-5{background-image:url(../img/mag-bg/5-bg7-sp.webp)}
  .mag-bg-6{background-image:url(../img/mag-bg/6-bg6-sp.webp)}
  .mag-bg-7{background-image:url(../img/mag-bg/7-bg11-sp.webp)}
  .mag-bg-8{background-image:url(../img/mag-bg/8-bg9-sp.webp)}
  .mag-bg-9{background-image:url(../img/mag-bg/9-bg8-sp.webp)}
  .mag-bg-10{background-image:url(../img/mag-bg/10-bg12-sp.webp)}
  .mag-bg-11{background-image:url(../img/mag-bg/11-bg10-sp.webp)}
  .mag-bg-12{background-image:url(../img/mag-bg/12-bg3-sp.webp)}
}

/* =========================================================
   よくある質問（/faq/ と、各事業ページの下）
   ========================================================= */
.faq-intro{max-width:820px;margin:0 0 40px}
.faq-nav{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:0 0 34px;margin:0 0 10px;border-bottom:1px solid var(--line)
}
.faq-nav a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:calc(11px * var(--fs-body));font-weight:700;color:var(--ink);
  transition:border-color .25s ease,background .25s ease
}
.faq-nav a:hover{border-color:var(--navy);background:var(--paper)}
.faq-nav a span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--navy);color:#fff;font-size:calc(9px * var(--fs-body))
}
.faq-group{margin:56px 0 0;scroll-margin-top:100px}
.faq-group-head{margin:0 0 14px}
.faq-group-en{
  display:block;font-size:calc(9px * var(--fs-body));letter-spacing:.22em;font-weight:800;
  color:var(--muted);margin:0 0 8px
}
.faq-group-head h2{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(22px,2.4vw,30px) * var(--fs-heading));line-height:1.4;color:var(--ink);
  word-break:normal;word-break:auto-phrase;overflow-wrap:break-word
}
.faq-list{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:22px 4px;cursor:pointer;list-style:none
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:hover .faq-q{color:var(--navy)}
.faq-item summary:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px}
.faq-mark{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;
  font-family:Georgia,serif;font-size:calc(15px * var(--fs-body));font-weight:700;line-height:1
}
.faq-mark.is-q{background:var(--navy);color:#fff}
.faq-mark.is-a{background:#eeeae3;color:var(--ink)}
.faq-q{
  font-size:calc(13.5px * var(--fs-body));font-weight:700;line-height:1.7;color:var(--ink);
  transition:color .2s ease;
  word-break:normal;word-break:auto-phrase;overflow-wrap:break-word
}
.faq-toggle{position:relative;width:18px;height:18px;flex:none}
.faq-toggle::before,.faq-toggle::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;
  background:var(--ink);transition:transform .3s ease
}
.faq-toggle::after{transform:rotate(90deg)}
.faq-item[open] .faq-toggle::after{transform:rotate(0deg)}
.faq-a{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:0 4px 26px
}
.faq-a-body{padding-top:5px;min-width:0}
.faq-a-body p{
  margin:0 0 .9em;font-size:calc(12.5px * var(--fs-body));line-height:2;color:#33414b
}
.faq-a-body p:last-child{margin-bottom:0}
.faq-a-body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.faq-empty{padding:40px 0;color:var(--muted)}
.faq-page .tr-cta{margin-top:90px}

/* 各事業ページの下に置く「よくある質問」 */
.faq-block{max-width:980px;margin:0 auto;padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,90px)}
.faq-block-head{margin:0 0 16px}
.faq-block-head .kicker{display:block;margin:0 0 10px}
.faq-block-head h2{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(22px,2.4vw,30px) * var(--fs-heading));color:var(--ink)
}
.faq-more{
  display:inline-block;margin-top:22px;
  font-size:calc(11.5px * var(--fs-body));font-weight:700;color:var(--navy);
  border-bottom:1px solid currentColor;padding-bottom:2px
}

/* お問い合わせページ：フォームの前の案内 */
.faq-contact-note{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 0 28px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:#fff
}
.faq-contact-note p{margin:0;font-size:calc(11.5px * var(--fs-body));line-height:1.8;color:var(--ink)}
.faq-contact-note a{
  flex:none;font-size:calc(11px * var(--fs-body));font-weight:700;color:var(--navy);
  border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap
}
/* 相談チャットへの案内（2026-11-05） */
.faq-contact-note.is-soudan{margin-bottom:12px;background:#fff8d6;border-color:#e8d58a}

@media(max-width:640px){
  .faq-nav{gap:8px;padding-bottom:26px}
  .faq-nav a{padding:8px 13px}
  .faq-group{margin-top:44px;scroll-margin-top:90px}
  .faq-item summary{gap:12px;padding:18px 0}
  .faq-mark{width:28px;height:28px;font-size:calc(13px * var(--fs-body))}
  .faq-a{gap:12px;padding:0 0 22px}
  .faq-q{font-size:calc(13px * var(--fs-body))}
  .faq-contact-note{flex-direction:column;align-items:flex-start;gap:8px}
}
/* どこかの共通指定（section に余白）で内側に寄ってしまうのを打ち消す */
.faq-page .faq-group{padding:0}
.faq-block{padding-left:0;padding-right:0}
/* お問い合わせの案内は、下の一覧・フォームと左右をそろえる */
.entry-page .faq-contact-note{margin:0 28px 28px}
@media(max-width:640px){.entry-page .faq-contact-note{margin:0 20px 24px}}

/* パンくず：固定ページでは見出しの上に置く（お知らせと同じ見た目） */
.breadcrumb .breadcrumb-sep{color:#b3bcc2}
.breadcrumb [aria-current="page"]{color:var(--ink)}
.breadcrumb.is-page{margin:0 0 30px}
@media(max-width:640px){.breadcrumb.is-page{margin-bottom:22px}}
.entry-page > .breadcrumb.is-page{margin-left:28px;margin-right:28px}
@media(max-width:640px){.entry-page > .breadcrumb.is-page{margin-left:20px;margin-right:20px}}

/* =========================================================
   研修・セミナー（HOW WE WORK）
   原案の構造：
   ・背景は白のまま
   ・大きな「黒い円」が観覧車の軸。上下は枠で切れる
   ・その円の中を、ゴンドラ（写真の円）が弧に沿って回る
   　弧の中心は黒い円と同じなので、ふくらみは左向き
   ・左に縦書きのリード（白地に黒）
   ・右に緑の大見出し。黒い円と白地の両方にまたがる
   寸法は wheel.js がパネルの実寸から計算して変数に入れる。
   ========================================================= */
:root{ --sem-green:#13b86b; --sem-ink:#050505; }

.who-style{
  padding:0!important;
  background:none!important;
  overflow:visible!important
}
.who-style:before{ display:none!important }

/* スクロールのあいだ、この面を画面に貼りつけておく帯。
   帯の中をスクロールしたぶんだけ観覧車が回る（循環図と同じ作り） */
.sem-track{ position:relative;height:calc(100svh + 130svh) }
.sem-panel{
  position:sticky;top:0;
  height:100svh;
  overflow:hidden;
  background:#fff;
  isolation:isolate;
  overflow-anchor:none;
  /* wheel.js が入れる値（読み込み前の暫定値） */
  --cx:56%; --cy:50%; --hub:126%; --R:46%; --d:26%;
  --rot:0deg; --step:40deg
}

/* 観覧車の軸になる黒い円 */
.sem-hub{
  position:absolute;z-index:1;
  left:var(--cx);top:var(--cy);
  height:var(--hub);aspect-ratio:1;
  margin:0;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--sem-ink)
}

/* ---- 縦書きのリード ---- */
.sem-lead{
  position:absolute;z-index:3;margin:0;
  left:clamp(12px,1.8vw,34px);
  top:calc(var(--hdr-h,88px) + clamp(14px,2vw,30px));
  writing-mode:vertical-rl;
  max-height:calc(100% - var(--hdr-h,88px) - clamp(46px,6vw,86px));
  font-size:calc(clamp(14px,1.9vw,30px) * var(--fs-body));
  font-weight:700;line-height:1.75;letter-spacing:.02em;color:#050505
}

/* ---- 見出し ---- */
.sem-head{
  position:absolute;z-index:3;
  left:55%;right:clamp(14px,2.2vw,42px);
  top:calc(var(--hdr-h,88px) + clamp(10px,1.4vw,22px));bottom:clamp(14px,2vw,34px);
  display:flex;flex-direction:column;justify-content:center;
  text-align:left;pointer-events:none
}
.sem-kicker{
  display:block;color:var(--sem-green);
  font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;
  font-size:calc(clamp(9px,.92vw,15px) * var(--fs-body));
  letter-spacing:.24em;margin:0 0 clamp(8px,1.4vw,22px) .25em
}
.sem-title{ margin:0;color:var(--sem-green) }
.sem-ja{
  display:block;font-weight:800;letter-spacing:.005em;line-height:1.03;
  font-size:calc(clamp(34px,min(9vw,15svh),128px) * var(--fs-heading))
}
.sem-en{
  display:block;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;
  letter-spacing:-.045em;line-height:.94;margin-top:.04em;
  font-size:calc(clamp(38px,min(10.6vw,17.5svh),150px) * var(--fs-heading))
}

/* ---- ゴンドラ ---- */
.sem-wheel{ position:absolute;inset:0;z-index:2;pointer-events:none }
.sem-orb{
  position:absolute;left:var(--cx);top:var(--cy);
  width:var(--d);aspect-ratio:1;
  margin:0;
  border-radius:50%;overflow:hidden;background:#c6d1d9;
  pointer-events:auto;text-decoration:none;color:#fff;
  will-change:transform;backface-visibility:hidden;
  font-size:calc(var(--d,260px) * .078);   /* 中の文字は円の大きさに比例させる */
  /* 位置は wheel.js が1つずつ transform に入れる。
     JSが動かないときの保険として、左端に縦に並べておく */
  left:0;top:0;
  transform:translate3d(calc(var(--cx) - var(--R,0px) - var(--d) / 2), calc(var(--i) * var(--d) * 1.2), 0);
  transition:box-shadow .4s var(--ease)
}
.sem-orb:hover{ box-shadow:0 0 0 5px rgba(19,184,107,.45) }
.sem-orb-photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .7s var(--ease)
}
.sem-orb:hover .sem-orb-photo{ transform:scale(1.05) }
.sem-orb:after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(180deg,rgba(5,5,5,0) 50%,rgba(5,5,5,.55) 100%)
}
.sem-orb-num{
  display:inline-block;margin-right:.45em;vertical-align:.06em;
  font-size:.72em;letter-spacing:.08em;opacity:.85
}
.sem-orb-label{
  position:absolute;z-index:2;left:7%;right:7%;bottom:11%;text-align:center
}
.sem-orb-label b{
  display:block;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;
  letter-spacing:-.02em;line-height:1.05;
  font-size:calc(1.36em * var(--fs-heading))
}
.sem-orb-label i{
  display:block;font-style:normal;margin-top:.4em;font-weight:600;
  letter-spacing:.04em;line-height:1.3;
  font-size:calc(.66em * var(--fs-body))
}

/* ---- 下の帯 ---- */
.who-footer{
  margin-top:0!important;padding:22px clamp(20px,7vw,90px) 0!important
}

/* ---- 携帯・タブレット：回さず2列に並べる ---- */
/* ---- 携帯・タブレットの縦向き：円盤は動かさず、5つを扇形に並べて一度に見せる ----
   2026-10-12 改。スクロールで回す観覧車は、携帯では指の動きと噛み合わず扱いにくい。
   携帯では画面に貼りつけるのをやめてふつうに流れる段にし、
   黒い円の左の弧に沿って 01〜04 と「All About」を上から順に並べる（タップで各ページへ）。
   位置と大きさは wheel.js が段の幅から計算する。
   条件は wheel.js の MOBILE_MQ と同じ（縦長の画面、または高さの低い横向きの携帯）。 */
@media(max-aspect-ratio:11/10),(max-width:940px) and (max-height:500px){
  .sem-track:not(.is-flat){ height:auto }
  .sem-track:not(.is-flat) .sem-panel{
    position:relative;top:auto;height:auto;overflow:hidden;
    padding:clamp(40px,9vw,64px) 0 clamp(20px,5vw,40px);
    /* 並び順：見出し → リード → 扇形（HTML ではリードが先にあるため、順番を指定する） */
    display:flex;flex-direction:column
  }
  .sem-track:not(.is-flat) .sem-head{ order:1 }
  .sem-track:not(.is-flat) .sem-lead{ order:2 }
  .sem-track:not(.is-flat) .sem-wheel{ order:3 }
  .sem-track:not(.is-flat) .sem-head{
    position:static;display:block;margin:0 20px;text-align:left
  }
  /* 和文は1行に。英字は「How We / Work」の2行のまま
     （改行を消すと、あいだの空白がなくて HowWeWork とつながってしまうため） */
  .sem-track:not(.is-flat) .sem-ja br{ display:none }
  .sem-track:not(.is-flat) .sem-en br{ display:inline }
  .sem-track:not(.is-flat) .sem-kicker{
    font-size:calc(11px * var(--fs-body));margin-bottom:10px
  }
  .sem-track:not(.is-flat) .sem-ja{
    white-space:nowrap;font-size:calc(clamp(28px,10.4vw,92px) * var(--fs-heading))
  }
  .sem-track:not(.is-flat) .sem-en{
    white-space:nowrap;font-size:calc(clamp(30px,11.4vw,100px) * var(--fs-heading))
  }
  .sem-track:not(.is-flat) .sem-lead{
    position:static;writing-mode:horizontal-tb;max-height:none;max-width:36em;
    margin:14px 20px 0;
    font-size:calc(clamp(13.5px,2.1vw,19px) * var(--fs-body));line-height:1.85
  }
  /* 扇形の場所。高さは wheel.js が入れる */
  .sem-track:not(.is-flat) .sem-wheel{
    position:relative;inset:auto;height:var(--fan-h,520px);margin-top:22px
  }
  /* 黒い円は、扇形の場所の上下で平らに切る（パソコンで枠の上下に切れるのと同じ見え方） */
  .sem-track:not(.is-flat) .sem-hub{
    clip-path:inset(var(--hub-clip,0px) 0 var(--hub-clip,0px) 0)
  }
  .sem-track:not(.is-flat) .sem-orb{
    font-size:calc(var(--d,120px) * .094);
    opacity:1;pointer-events:auto;transition:box-shadow .4s var(--ease)
  }
  .sem-track:not(.is-flat) .sem-orb-label i{ font-size:calc(.8em * var(--fs-body)) }
  .sem-track:not(.is-flat) .sem-orb:active{ box-shadow:0 0 0 5px rgba(19,184,107,.45) }
}

/* ---- 動きを減らす設定の縦長の画面だけは、回さず2列に並べる ----
   観覧車はスクロールに合わせて回るので、回さないと02以降が見えないため。
   wheel.js が .sem-track に is-flat を付ける。 */
.sem-track.is-flat{ height:auto }
.sem-track.is-flat .sem-panel{
  position:static;height:auto;
  padding:32px 20px 38px;background:var(--sem-ink)
}
.sem-track.is-flat .sem-hub{ display:none }
.sem-track.is-flat .sem-lead{
  position:static;writing-mode:horizontal-tb;max-height:none;
  color:#fff;margin:0 0 22px;line-height:2;font-size:calc(14px * var(--fs-body))
}
.sem-track.is-flat .sem-head{ position:static;display:block;margin:0 0 26px;text-align:left }
.sem-track.is-flat .sem-wheel{
  position:static;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,4vw,26px);justify-items:center
}
.sem-track.is-flat .sem-orb{
  position:static!important;transform:none!important;margin:0!important;
  width:min(38vw,190px)!important;height:auto!important;opacity:1!important;
  font-size:calc(min(38vw,190px) * .082)
}

@media(prefers-reduced-motion:reduce){
  .sem-orb,.sem-orb-photo{ transition:none }
}

/* =========================================================
   ヒーロー：イントロ動画（2026-10 / 4K版）
   ---------------------------------------------------------
   映像の中に文字が入っていて、その文字が左右の端まで使われている。
   だから画面の形に合わせて切る（cover）と、必ず文字が欠ける。

   そこで「枠のほうを映像に合わせる」。
   枠をちょうど 16:9 にしてしまえば、切る必要も、
   余白を足す必要もなくなり、映像は一コマ残らず出る。

   幅は、画面に収まる範囲でいちばん大きく取る：
     横幅いっぱい か、（画面の高さ − ヘッダー）× 16/9 の小さいほう。
   ふつうのノートPCでは横幅いっぱいになる。
   ========================================================= */
.hero.hero-static.is-intro{
  /* 切ってよい限界。文字は横 13.1%〜88.0%、縦は 9%〜91% にある。
     ギリギリまで切ると端に寄って見切れたように見えるので、
     文字の外側にさらに 5% の余裕を残す位置で止める。 */
  --crop-min:1.53;   /* これより縦長の窓では、これ以上切らない */
  --crop-max:2.05;   /* これより横長の窓では、これ以上切らない */

  display:block!important;position:relative!important;
  height:100svh!important;min-height:0!important;
  background:#040d1a!important;
  overflow:hidden!important
}
/* 映像はヘッダーの下から始める。重ねると、映像の中の文字が
   メニューの裏に入って読めなくなる。ヘッダーは映像と同じ濃紺なので、
   下げても地続きに見える。
   既存の body.hero-overlay .hero.hero-static{padding-top:0!important} と
   並ぶので、html を足して詳細度を上げている。 */
html body .hero.hero-static.is-intro{padding:var(--hdr-h,88px) 0 0!important}

/* 画面いっぱいに敷く（cover）。ただし切る量に上限をつける。
   窓の形が --crop-min 〜 --crop-max の内側なら、箱は窓と同じ大きさ＝
   完全な全画面。それを超えて極端な形の窓では、箱のほうが小さくなり、
   それ以上は切らない（文字を守るための最後の歯止め）。 */
.is-intro .hero-static-bg{
  position:relative!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;
  width:min(100%,calc((100svh - var(--hdr-h,88px)) * var(--crop-max)))!important;
  height:min(calc(100svh - var(--hdr-h,88px)),calc(100vw / var(--crop-min)))!important;
  min-height:0!important;max-height:none!important;
  aspect-ratio:auto!important;
  margin:0 auto!important;
  background:#040d1a!important
}
.is-intro .hero-static-video{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  filter:none!important
}
/* もとの装飾（光・グリッド・ベール）は濃紺の映像には合わないので外す */
.is-intro .hero-static-bg:after,
.is-intro .hero-glow,
.is-intro .hero-grid{display:none!important}
/* 重ねていた文字は出さない（映像の中に入っているため） */
.is-intro .hero-title-static,
.is-intro .hero-message-static{display:none!important}

/* 読み上げと検索エンジンのためだけに置いてある文字。目には見えない。 */
.hero-sr{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0
}


/* ---- 入口2つ ----
   v12 を0.5秒ごとに測って、いちばん暗くて動きの少ない場所が
   左下のいちばん下の帯（横4〜32%・縦88〜99%）だった。そこに横並びで重ねる。
   2026-10-12 v1.4 に差し替え。この帯に文字が入る場面はない
   （1:15 ごろに飾りのカードが一瞬かかるだけ）ことを全コマで確かめた。 */
.is-intro .hero-entry.is-side{
  position:absolute!important;z-index:6;
  left:clamp(18px,3.2vw,44px)!important;right:auto!important;
  bottom:clamp(18px,3vh,38px)!important;
  transform:none!important;
  width:auto!important;max-width:calc(100% - 40px);
  flex-direction:row!important;gap:12px!important;
  margin:0!important;padding:0!important
}
.is-intro .hero-entry-btn{flex:none}
.is-intro .hero-entry-btn{
  background:rgba(6,18,34,.58);
  border-color:rgba(255,255,255,.5);
  /* v1.4 には白い場面（0:24・0:36・1:51・1:57・2:48 ごろ）がある。
     白いボタンが背景に溶けないよう、うすい影で縁を出す */
  box-shadow:0 6px 20px rgba(4,13,26,.28)
}
.is-intro .hero-entry-btn.is-staff{
  background:#fff;border-color:#fff;color:var(--navy)
}
@media(max-width:1240px) and (min-width:901px){
  .is-intro .hero-entry-copy small{display:none}
}

/* ---- メニューを映像の配色に合わせる ----
   効くのはトップページの最上部にいる間だけ。少しでもスクロールすると
   下は白い紙面になるので、これまで通りの白いヘッダーに戻る。
   スマホでメニューを開いたとき（nav-open）は白い面が出るので除外する。 */
body.home.hero-overlay:not(.is-scrolled):not(.nav-open) .header{
  background:#040d1a!important;
  border-bottom-color:rgba(255,255,255,.14)
}
/* ヘッダーの背景は :after が担っている。映像と地続きに見せたいので、
   ぼかさずに同じ濃紺でそろえる。 */
body.home.hero-overlay:not(.is-scrolled):not(.nav-open) .header:after{
  height:100%;
  background:#040d1a
}
/* ロゴは、はじめから用意してある白い版に差し替える */
body.home.hero-overlay:not(.is-scrolled):not(.nav-open) .logo .logo-mark{
  content:url(../img/brand/logo-mark-white.webp)
}
body.home.hero-overlay:not(.is-scrolled):not(.nav-open) .logo .logo-img{
  content:url(../img/brand/logo-word-white.webp)
}
/* メニューの文字と、ホバーで伸びる下線 */
body.home.hero-overlay:not(.is-scrolled):not(.nav-open) .nav a{color:#fff}
body.home.hero-overlay:not(.is-scrolled):not(.nav-open) .nav a:after{background:#fff}
/* 「会員ページ」は濃紺の塗りだと背景に沈むので、白フチの透明にする */
body.home.hero-overlay:not(.is-scrolled):not(.nav-open) .nav .nav-members{
  background:rgba(255,255,255,.10);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62)
}
body.home.hero-overlay:not(.is-scrolled):not(.nav-open) .nav .nav-members:hover{
  background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px #fff
}
/* ☰ ボタンも同じ扱い */
body.home.hero-overlay:not(.is-scrolled):not(.nav-open) .menu{
  background:rgba(255,255,255,.12);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)
}
/* 白へ戻るときに、パッと切り替わらないように */
.header,.header:after,.nav a,.nav .nav-members,.menu{
  transition:background .35s ease,color .35s ease,box-shadow .35s ease,border-color .35s ease
}

/* ---- スマホ ----
   映像が小さくなるので、ボタンを重ねると映像を隠してしまう。
   ここだけは映像の下に置く。 */
@media(max-width:900px){
  /* スマホは画面が縦長すぎる。cover にすると横26%しか映らず
     映像の中の文字が壊れるので、ここだけは切らずに全部見せ、
     ボタンはその下に縦2つ並べる。 */
  /* スマホは画面が縦長すぎて、切ると映像が成り立たない。
     ここだけは切らずに 16:9 を全部見せ、ボタンはその下に置く。 */
  .hero.hero-static.is-intro{height:auto!important}
  html body .hero.hero-static.is-intro{padding:var(--hdr-h,76px) 0 0!important}
  .is-intro .hero-static-bg{
    position:relative!important;
    top:auto!important;left:auto!important;transform:none!important;
    width:100%!important;height:auto!important;aspect-ratio:16/9!important
  }
  .is-intro .hero-static-video{object-fit:contain!important}
  .is-intro .hero-entry.is-side{
    position:static!important;
    left:auto!important;right:auto!important;bottom:auto!important;
    width:auto!important;max-width:none;
    flex-direction:column!important;
    padding:16px 20px 24px!important
  }
  .is-intro .hero-entry-copy small{display:none}
}

/* =========================================================
   WHO WE ARE / 代表のあいさつ（2026-10・22art.jp を参考に組み直し）
   ---------------------------------------------------------
   組み（どこに何を置くか）はこれまでのまま。
   参考サイト 22art.jp から持ってきたのは「見え方」だけ。
     ・英字の札を小さく潰さず、しっかりした大きさで置く
       （22art：SERVICE＝29.5px / 太さ500）
     ・大見出しは明朝、字間はわずかに「広げる」。詰めない
       （22art：98px / 太さ600 / 行間0.95 / 字間+0.0065em）
     ・言い切りの見出しは明朝の太さ700、行間1.4
     ・本文は16px・行間1.8・字間0.04em、色は薄い灰色ではなく本文色
     ・箱で囲わず、1pxの黒い罫線で区切る（写真の上にも罫線を引く）
     ・PROFILE は黒い丸札（角丸40px・白抜き）
   書体と色はこのサイトのもの（Noto Serif JP ／ 濃紺）のまま。
   ========================================================= */
#people.is-editorial{
  background:#fff;
  padding-top:clamp(90px,11vw,170px);
  padding-bottom:clamp(70px,8vw,120px)
}

/* ---- WHO WE ARE ---- */
#people.is-editorial .intro{
  display:block!important;
  margin-bottom:clamp(80px,11vw,180px)
}
/* 英字の札。22art は小さく潰さず、本文より大きく置いている */
#people.is-editorial .intro .kicker{
  font-family:"Noto Sans JP",sans-serif;
  font-size:calc(23px * var(--fs-body));
  letter-spacing:.022em;
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:clamp(14px,1.6vw,22px)
}
/* 大見出し：明朝・行間はほぼ字の高さまで詰め、字間はわずかに広げる */
#people.is-editorial .intro .h2{
  font-family:"Noto Serif JP",serif;
  white-space:normal!important;
  font-size:calc(clamp(34px,6.6vw,90px) * var(--fs-heading))!important;
  font-weight:600!important;
  line-height:.98!important;
  letter-spacing:.007em!important;
  max-width:none;
  margin:0 0 clamp(30px,4vw,56px)!important
}
/* 本文は薄墨をやめ、本文色で読ませる（22art は黒一色） */
#people.is-editorial .intro .lead{
  max-width:36em!important;
  font-size:calc(12.6px * var(--fs-body));
  line-height:1.8;
  letter-spacing:.04em;
  color:var(--ink)
}

/* ---- 「代表のあいさつ／Message」の見出し ---- */
/* 22art の見出し札は「日本語（明朝・大）→ 英字（小）」の順に積む。
   HTMLの並びは英字が先なので、order で見た目だけ入れ替えている。 */
#people.is-editorial .message-head-block{
  margin-bottom:clamp(44px,5vw,76px)
}
#people.is-editorial .message-heading{
  text-align:left!important;
  margin:0 0 clamp(26px,3vw,44px)!important;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  flex-wrap:nowrap
}
#people.is-editorial .message-jp{
  order:1;
  font-family:"Noto Serif JP",serif;
  font-size:calc(28.3px * var(--fs-body));
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-top:0
}
#people.is-editorial .message-en{
  order:2;
  font-family:"Noto Sans JP",sans-serif!important;
  font-size:calc(10.2px * var(--fs-body))!important;
  line-height:1.5!important;
  letter-spacing:.08em!important;
  font-weight:400!important;
  text-transform:uppercase;
  color:var(--ink)
}
/* 言い切りの一文。22art は明朝の太さ700・行間1.4・字間は＋側 */
#people.is-editorial .message-title{
  font-family:"Noto Serif JP",serif;
  font-size:calc(clamp(24px,3.9vw,46px) * var(--fs-heading));
  line-height:1.4;
  letter-spacing:.014em;
  font-weight:700;
  margin:0;
  max-width:24em
}

/* ---- 写真と本文 ---- */
/* 左は本文。右は「写真 → 肩書と名前 → PROFILE」を積んだ一本の柱。
   置き方はこれまでのまま。 */
#people.is-editorial .message-feature{
  background:#fff!important;
  min-height:0!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:clamp(28px,4.2vw,70px);
  align-items:stretch!important
}
#people.is-editorial .message-portrait-col{
  display:flex!important;flex-direction:column
}
#people.is-editorial .message-copy{order:1}
#people.is-editorial .message-portrait-col{order:2}
/* 22art は写真の上に1pxの罫線を引き、そこから写真を落とす */
#people.is-editorial .message-portrait{
  background:none!important;
  max-width:380px;
  margin:0 0 clamp(14px,1.6vw,22px)!important;
  flex:none;
  border-top:1px solid var(--ink);
  padding-top:0
}
#people.is-editorial .message-portrait img{
  display:block;width:100%!important;height:auto!important
}
#people.is-editorial .message-portrait:before{display:none}
#people.is-editorial .message-copy{
  padding:0!important;
  background:none!important;
  display:block!important
}
#people.is-editorial .message-copy>p:last-of-type{margin-bottom:0}
#people.is-editorial .message-copy>p{
  font-size:calc(12.6px * var(--fs-body));
  line-height:1.8;
  letter-spacing:.04em;
  color:var(--ink);
  max-width:36em;
  margin:0 0 1.75em
}
/* 名前から下のかたまりは、これまでどおり柱の底に寄せて、
   左右の段の下端をそろえる。 */
#people.is-editorial .message-sign{
  text-align:left!important;
  margin:auto 0 0!important;
  padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--ink);
  max-width:none;
  font-size:calc(15.7px * var(--fs-body));
  font-weight:500;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--ink)
}
#people.is-editorial .message-sign strong{
  display:inline-block;
  margin-top:4px;
  font-family:"Noto Serif JP",serif;
  font-size:calc(clamp(26px,3.3vw,40px) * var(--fs-heading));
  font-weight:600;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--ink)
}

/* ---- PROFILE：22art と同じ、黒い丸札 ---- */
#people.is-editorial .profile-card{
  border:0!important;border-radius:0!important;
  box-shadow:none!important;background:none!important;
  padding:clamp(20px,2.2vw,30px) 0 0!important;
  margin-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--ink)!important;
  max-width:none;
  display:block!important
}
#people.is-editorial .profile-label{
  display:inline-block!important;
  margin:0 0 clamp(14px,1.6vw,22px)!important;
  padding:8px 16px!important;
  background:var(--ink)!important;
  color:#fff!important;
  border-radius:40px!important;
  font-size:calc(10.2px * var(--fs-body));
  font-weight:500;
  line-height:1.15;
  letter-spacing:.08em
}
#people.is-editorial .profile-card p{
  font-size:calc(11.8px * var(--fs-body));
  line-height:1.8;
  letter-spacing:.04em;
  color:var(--ink)
}
#people.is-editorial .profile-links{margin-top:clamp(14px,1.6vw,20px)}
#people.is-editorial .profile-links a{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:calc(11px * var(--fs-body));
  font-weight:600;letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:3px;
  transition:opacity .3s ease
}
#people.is-editorial .profile-links a:after{content:"→";font-weight:700}
#people.is-editorial .profile-links a:hover{opacity:.55}

/* ---- 入口のボタンは本文の下。読み終わったところに置く ---- */
#people.is-editorial .message-more{
  display:block!important;
  margin-top:clamp(30px,3.4vw,48px);
  width:100%;max-width:430px
}
#people.is-editorial .message-more img{display:block;width:100%;height:auto}

@media(max-width:900px){
  #people.is-editorial{padding-top:70px;padding-bottom:56px}
  #people.is-editorial .intro{margin-bottom:56px!important}
  #people.is-editorial .intro .kicker{font-size:calc(16px * var(--fs-body))}
  #people.is-editorial .message-feature{grid-template-columns:1fr!important;gap:34px}
  /* 縦に積むときは、写真の柱を先に出す */
  #people.is-editorial .message-copy{order:2}
  #people.is-editorial .message-portrait-col{order:1}
  #people.is-editorial .message-title{max-width:none}
  #people.is-editorial .message-jp{font-size:calc(21px * var(--fs-body))}
  /* バナーは1つだけ置いているので、スマホでも隠さない */
  #people.is-editorial .message-more.is-under-photo{display:block!important}
  /* 縦積みのときは底寄せをやめる */
  #people.is-editorial .message-sign{margin-top:clamp(14px,2vw,22px)!important}
  #people.is-editorial .message-portrait{max-width:300px}
}
/* 理事一覧：いまは実績・事例の下に独立して置いている */
.officers-section{padding-top:clamp(60px,7vw,100px)!important;padding-bottom:clamp(60px,7vw,100px)!important}
.officers-section .officers-wrap{margin-top:0}

/* EVIDENCE の1枚だけの区間：
   止めて読ませるぶんの長さは、事業内容（吹き出しが続く区間）より短くてよい。
   見た目・大きさ・動きは事業内容の①と同じものをそのまま使っている。 */
@media(max-width:640px){
  .ap-slides.ap-slides-solo{height:calc(100svh + 40svh)}
}


/* =========================================================
   WHO WE ARE / 代表のあいさつ：動き（22art.jp を参考）
   ---------------------------------------------------------
   22art は GSAP と Lenis を読み込んでいるが、ここでは同じ見え方を
   このサイトにすでにある仕組み（.intro.slid ／ .message-feature.slid）
   だけで作っている。持ってきた値はすべて 22art の実物から採ったもの。
     ・現れ方：横からではなく「下から32px」、0.4秒、順に0.1秒ずつ
     ・罫線  ：左から引かれる（0.6秒／cubic-bezier(.65,0,.35,1)）
     ・写真  ：黒い幕が上へ上がり、中の写真は1.1倍から等倍へ戻る
               （bdrimgCurtain 0.8s ／ bdrimgAnime 1.2s、
                 ゆるみは cubic-bezier(.16,1,.3,1)）
   ========================================================= */
@keyframes vtLineSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vtCurtain{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes vtCurtainImg{from{transform:scale(1.1)}to{transform:scale(1)}}

/* ---- WHO WE ARE：横からではなく、下から ---- */
#people.is-editorial .intro .kicker,
#people.is-editorial .intro .h2,
#people.is-editorial .intro .lead{
  transform:translateY(32px)!important;
  transition:opacity .4s ease,transform .4s ease!important;
  will-change:transform
}
#people.is-editorial .intro .kicker{transition-delay:0s!important}
#people.is-editorial .intro .h2{transition-delay:.1s!important}
#people.is-editorial .intro .lead{transition-delay:.2s!important}
#people.is-editorial .intro.slid .kicker,
#people.is-editorial .intro.slid .h2,
#people.is-editorial .intro.slid .lead{transform:none!important;opacity:1!important}

/* WHO WE ARE の下に、左から2pxの罫線が引かれる */
#people.is-editorial .intro .kicker{position:relative;padding-bottom:10px}
#people.is-editorial .intro .kicker:after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;will-change:transform
}
#people.is-editorial .intro.slid .kicker:after{
  animation:vtLineSweep .6s cubic-bezier(.65,0,.35,1) .3s forwards
}

/* ---- 見出しのかたまり（代表のあいさつ／MESSAGE／一文） ---- */
#people.is-editorial .message-head-block.reveal{
  transform:translateY(32px);
  transition:opacity .4s ease .1s,transform .4s ease .1s
}
#people.is-editorial .message-head-block.reveal:not(.in){opacity:0;transform:translateY(32px)}
#people.is-editorial .message-head-block.reveal.in{opacity:1;transform:none}

/* ---- 本文：横からではなく、下から。間隔も22artに合わせて詰める ---- */
#people.is-editorial .message-copy > *{
  transform:translateY(32px)!important;
  transition:opacity .4s ease,transform .4s ease!important;
  will-change:transform
}
#people.is-editorial .message-copy > *:nth-child(1){transition-delay:.10s!important}
#people.is-editorial .message-copy > *:nth-child(2){transition-delay:.18s!important}
#people.is-editorial .message-copy > *:nth-child(3){transition-delay:.26s!important}
#people.is-editorial .message-copy > *:nth-child(4){transition-delay:.34s!important}
#people.is-editorial .message-copy > *:nth-child(5){transition-delay:.42s!important}
#people.is-editorial .message-copy > *:nth-child(n + 6){transition-delay:.50s!important}
#people.is-editorial .message-feature.slid .message-copy > *{opacity:1;transform:none!important}

/* ---- 写真：黒い幕が上へ上がる ---- */
#people.is-editorial .message-portrait.is-curtain{
  position:relative;
  overflow:hidden!important;
  border-top:0!important;
  transform:none!important;
  transition:opacity .4s ease .2s!important
}
#people.is-editorial .message-portrait.is-curtain:before{
  display:block!important;content:"";
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:var(--ink);z-index:2;
  transform:scaleY(0);transform-origin:top
}
/* 写真の上の1pxの罫線。これも左から引く */
#people.is-editorial .message-portrait.is-curtain:after{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:var(--ink);z-index:3;transform:scaleX(0);transform-origin:left
}
#people.is-editorial .message-portrait.is-curtain > span{
  display:block;transform:scale(1.1);will-change:transform
}
#people.is-editorial .message-portrait.is-curtain > span img{
  display:block;width:100%;height:auto
}
#people.is-editorial .message-feature.slid .message-portrait.is-curtain:before{
  animation:vtCurtain .8s cubic-bezier(.16,1,.3,1) .2s forwards
}
#people.is-editorial .message-feature.slid .message-portrait.is-curtain > span{
  animation:vtCurtainImg 1.2s cubic-bezier(.16,1,.3,1) .3s forwards
}
#people.is-editorial .message-feature.slid .message-portrait.is-curtain:after{
  animation:vtLineSweep .6s cubic-bezier(.65,0,.35,1) .1s forwards
}

/* ---- 名前と PROFILE の罫線も、順に左から引く ---- */
#people.is-editorial .message-sign,
#people.is-editorial .profile-card{position:relative;border-top:0!important}
#people.is-editorial .message-sign:before,
#people.is-editorial .profile-card:before{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left
}
#people.is-editorial .message-feature.slid .message-sign:before{
  animation:vtLineSweep .6s cubic-bezier(.65,0,.35,1) .35s forwards
}
#people.is-editorial .message-feature.slid .profile-card:before{
  animation:vtLineSweep .6s cubic-bezier(.65,0,.35,1) .5s forwards
}

/* ---- 動きを減らす設定のときは、すべて最初から出ている状態にする ---- */
@media(prefers-reduced-motion:reduce){
  #people.is-editorial .intro .kicker,
  #people.is-editorial .intro .h2,
  #people.is-editorial .intro .lead,
  #people.is-editorial .message-copy > *,
  #people.is-editorial .message-head-block.reveal{
    transform:none!important;opacity:1!important;transition:none!important
  }
  #people.is-editorial .message-portrait.is-curtain:before{display:none!important}
  #people.is-editorial .message-portrait.is-curtain > span{transform:none!important;animation:none!important}
  #people.is-editorial .intro .kicker:after,
  #people.is-editorial .message-portrait.is-curtain:after,
  #people.is-editorial .message-sign:before,
  #people.is-editorial .profile-card:before{transform:scaleX(1)!important;animation:none!important}
}

/* =========================================================
   実績・事例の1枚目：22art.jp のプロジェクトストーリーの組み方
   ---------------------------------------------------------
   ・見出しを縦書きにして細い枠へ入れ、写真の左へ重ねる
   ・見出し札（CASE 01）は右端に縦で置く
   ・飾りの数字は輪郭だけ。四角を2つ、写真の外側に置く
   ・本文は写真の下に2段、入口は「罫線＋丸い矢印」
   差し色は 22art が #2700c2 の紫。このサイトは濃紺が地なので、
   下の --case-accent を変えるだけで色を切り替えられるようにしてある。
   ========================================================= */
#cases .case-hero.is-story{
  --case-accent:#112a41;      /* 22art と同じ紫にするなら #2700c2 */
  --case-gap:clamp(26px,3.4vw,54px);
  display:block!important;
  grid-template-columns:none!important;
  min-height:0!important;
  background:none!important;
  overflow:visible
}

/* ---- 写真まわり ---- */
#cases .case-hero.is-story .case-stage{
  position:relative;
  padding:clamp(34px,4.4vw,72px) 0 clamp(30px,4vw,66px);
  margin-bottom:clamp(26px,3.2vw,48px)
}
#cases .case-hero.is-story .case-visual{
  position:relative;z-index:2;
  width:65%;
  margin-left:17.5%;margin-right:0;
  aspect-ratio:16/11;
  min-height:0!important;
  overflow:hidden;
  background:#dff2fa
}
#cases .case-hero.is-story .case-visual img{
  width:100%;height:100%;object-fit:cover;display:block
}
#cases .case-hero.is-story .case-visual:before,
#cases .case-hero.is-story .case-visual:after{display:none!important}

/* 飾りの四角。写真の左上の外と、右下の外に重ねる */
#cases .case-hero.is-story .case-sq{
  position:absolute;z-index:1;display:block;
  background:var(--case-accent)
}
/* 写真の上へ顔を出す。下半分は写真の裏に隠れる */
#cases .case-hero.is-story .case-sq-a{
  left:28%;top:0;
  width:clamp(90px,11vw,180px);height:clamp(54px,6.4vw,104px)
}
/* 写真の右下の角へまたがせる */
#cases .case-hero.is-story .case-sq-b{
  right:17%;bottom:clamp(10px,1.4vw,26px);z-index:3;
  width:clamp(60px,7.4vw,124px);height:clamp(60px,7.4vw,124px)
}

/* 飾りの数字。輪郭だけで、右上に少しはみ出させる */
#cases .case-hero.is-story .case-num{
  position:absolute;z-index:4;
  right:clamp(6px,1vw,18px);top:0;
  transform:translateY(-40%);
  font-family:"Arial Black",Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-weight:900;font-style:italic;
  font-size:calc(clamp(56px,8vw,128px) * var(--fs-heading));
  line-height:.8;letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:2px var(--case-accent);
  pointer-events:none
}
#cases .case-hero.is-story .case-num:before{content:"#";font-style:italic}

/* ---- 縦書きの見出し。細い枠に入れて写真へ重ねる ---- */
#cases .case-hero.is-story .case-vhead{
  position:absolute;z-index:5;
  /* 枠の中心が、写真の左端に重なる位置に置く（22art と同じ重なり方） */
  left:17.5%;transform:translateX(-50%);
  top:clamp(34px,4.4vw,72px);
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:"Noto Serif JP",serif;
  font-weight:700;
  font-size:calc(clamp(22px,2.9vw,44px) * var(--fs-heading));
  line-height:1.5;letter-spacing:.02em;
  color:var(--ink);
  margin:0;
  padding:clamp(16px,1.8vw,28px) clamp(14px,1.6vw,24px);
  border:1px solid var(--ink);
  background:#fff;
  max-height:calc(100% - clamp(50px,6vw,100px))
}

/* ---- 右端の縦の見出し札 ---- */
#cases .case-hero.is-story .case-vlabel{
  position:absolute;z-index:5;
  /* 写真の右端のすぐ外に立てる */
  right:17.5%;transform:translateX(calc(100% + 14px));
  top:clamp(44px,5.2vw,86px);
  writing-mode:vertical-rl;
  margin:0;
  font-size:calc(14px * var(--fs-body));
  font-weight:600;letter-spacing:.22em;
  color:var(--case-accent)
}

/* ---- 写真の下：本文2段と入口 ---- */
#cases .case-hero.is-story .case-foot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(30px,4.6vw,76px);
  align-items:start
}
#cases .case-hero.is-story .case-foot-body{
  grid-column:1 / -1;
  columns:2;column-gap:clamp(30px,4.6vw,76px);
  margin:0 0 clamp(26px,3vw,44px);
  max-width:none!important;
  font-size:calc(12.6px * var(--fs-body));
  line-height:1.8;letter-spacing:.04em;
  color:var(--ink)
}
#cases .case-hero.is-story .case-more{
  grid-column:1 / -1;
  justify-self:end;
  display:inline-flex;align-items:center;gap:clamp(12px,1.4vw,20px);
  text-decoration:none;color:var(--ink);
  font-size:calc(11.5px * var(--fs-body));
  font-weight:600;letter-spacing:.14em
}
#cases .case-hero.is-story .case-more-rule{
  display:block;width:clamp(50px,6vw,96px);height:1px;background:var(--ink)
}
#cases .case-hero.is-story .case-more-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(34px,3.4vw,46px);height:clamp(34px,3.4vw,46px);
  border-radius:50%;
  background:var(--ink);color:#fff;
  font-size:calc(12px * var(--fs-body));
  transition:transform .4s cubic-bezier(.16,1,.3,1),background-color .3s ease
}
#cases .case-hero.is-story .case-more:hover .case-more-mark{
  transform:translateX(5px);background:var(--case-accent)
}

/* ---- 幅が狭いときは縦書きをやめ、素直に積む ---- */
@media(max-width:900px){
  #cases .case-hero.is-story .case-stage{padding:0 0 clamp(20px,4vw,34px)}
  #cases .case-hero.is-story .case-visual{
    width:100%;margin:0;aspect-ratio:16/10
  }
  #cases .case-hero.is-story .case-sq-b{right:0}
  #cases .case-hero.is-story .case-vhead{
    position:static;transform:none;
    writing-mode:horizontal-tb;text-orientation:mixed;
    max-height:none;margin:0 0 18px;
    font-size:calc(clamp(22px,5.4vw,32px) * var(--fs-heading));
    line-height:1.4;padding:16px 18px
  }
  #cases .case-hero.is-story .case-vlabel{
    position:static;transform:none;writing-mode:horizontal-tb;margin:0 0 12px;letter-spacing:.2em
  }
  #cases .case-hero.is-story .case-num{
    right:4px;top:auto;bottom:-6px;transform:none;
    font-size:calc(clamp(44px,12vw,72px) * var(--fs-heading))
  }
  #cases .case-hero.is-story .case-sq-a{left:auto;right:0;top:-10px;width:88px;height:34px}
  #cases .case-hero.is-story .case-sq-b{width:56px;height:56px}
  #cases .case-hero.is-story .case-foot-body{columns:1}
  #cases .case-hero.is-story .case-more{justify-self:start}
}

/* =========================================================
   代表の写真のまわり：22art.jp の事例紹介と同じ飾り
   ---------------------------------------------------------
   ・写真は細い枠（1px）で囲う。22art の curtainImg と同じ
   ・四角を2つ。ひとつは写真の上へ顔を出し、下半分は写真の裏。
     もうひとつは右下の角にまたがる
   差し色は実績・事例と同じ考え方で、下の1行で切り替えられる。
   ========================================================= */
#people.is-editorial{--people-accent:#112a41}   /* 22art と同じ紫にするなら #2700c2 */

#people.is-editorial .message-portrait-wrap{
  position:relative;
  max-width:380px;
  margin:0 0 clamp(14px,1.6vw,22px);
  padding:clamp(22px,2.6vw,40px) 0 clamp(14px,1.6vw,24px);
  flex:none
}
#people.is-editorial .message-portrait-wrap .message-portrait.is-curtain{
  position:relative;z-index:2;
  max-width:none;
  margin:0!important;
  border:1px solid var(--ink)!important;
  background:#fff!important
}
/* 枠を出したので、上だけに引いていた線はやめる */
#people.is-editorial .message-portrait.is-curtain:after{display:none!important}

#people.is-editorial .msg-sq{
  position:absolute;display:block;
  background:var(--people-accent)
}
/* 写真の上へ顔を出す。下半分は写真の裏に隠れる */
#people.is-editorial .msg-sq-a{
  left:44%;top:0;z-index:1;
  width:38%;height:clamp(44px,5vw,78px)
}
/* 写真の右下の角にまたがる */
#people.is-editorial .msg-sq-b{
  right:-7%;bottom:0;z-index:3;
  width:clamp(48px,5.4vw,84px);height:clamp(48px,5.4vw,84px)
}

@media(max-width:900px){
  #people.is-editorial .message-portrait-wrap{max-width:300px;padding-top:26px}
  #people.is-editorial .msg-sq-a{height:38px}
  #people.is-editorial .msg-sq-b{right:-5%;width:52px;height:52px}
}

/* =========================================================
   代表のあいさつ：2列のまま、右の柱に 22art の縦書きの組みを収める
   ---------------------------------------------------------
   並びはこれまでどおり「本文が左／写真とPROFILEが右」。
   右の柱の中だけで、
     ・言い切りの一文を縦書きにして細い枠へ入れ、
       枠の中心を写真の左端に重ねる
     ・肩書と名前は差し色の縦書きで、写真の右端のすぐ外に1列で
     ・飾りの四角は写真の上と右下の角に
     ・PROFILE と経歴は写真の下
   柱の幅（536px）の内訳は 枠の半分80＋写真380＋間12＋札32 ＝ 504。
   ========================================================= */
#people.is-editorial .msg-stage{
  position:relative;
  padding:clamp(22px,2.6vw,40px) 0 clamp(12px,1.4vw,22px);
  margin:0 0 clamp(18px,2vw,28px)
}
#people.is-editorial .msg-stage .message-portrait-wrap{
  position:relative;z-index:2;
  width:71%;max-width:none;
  margin:0 0 0 15%;
  padding:0
}
#people.is-editorial .msg-stage .message-portrait.is-curtain{
  position:relative;z-index:2;
  max-width:none;margin:0!important;
  border:1px solid var(--ink)!important;
  background:#fff!important
}

/* 飾りの四角 */
#people.is-editorial .msg-stage .msg-sq{
  position:absolute;display:block;background:var(--people-accent)
}
#people.is-editorial .msg-stage .msg-sq-a{
  left:42%;top:0;z-index:1;
  width:28%;height:clamp(36px,4.2vw,64px)
}
#people.is-editorial .msg-stage .msg-sq-b{
  left:76%;bottom:0;z-index:3;
  width:clamp(42px,4.8vw,74px);height:clamp(42px,4.8vw,74px)
}

/* 縦書きの言い切り。枠の中心が写真の左端に重なる */
#people.is-editorial .msg-vhead{
  position:absolute;z-index:5;
  left:15%;transform:translateX(-50%);
  top:clamp(22px,2.6vw,40px);
  bottom:clamp(30px,3.4vw,54px);
  writing-mode:vertical-rl;text-orientation:upright;
  margin:0;
  font-family:"Noto Serif JP",serif;
  font-weight:700;
  font-size:calc(clamp(18px,2.4vw,34px) * var(--fs-heading));
  line-height:1.4;letter-spacing:.015em;
  color:var(--ink);
  padding:14px 10px 10px;
  border:1px solid var(--ink);
  background:#fff
}

/* 縦書きの肩書と名前。写真の右端のすぐ外に1列で */
#people.is-editorial .msg-vlabel{
  position:absolute;z-index:5;
  left:86%;margin-left:clamp(8px,1vw,14px);
  top:clamp(20px,2.4vw,34px);
  z-index:6;
  writing-mode:vertical-rl;
  white-space:nowrap;
  /* 1列で、右下の四角にぶつからない高さに収まる大きさ */
  font-size:calc(clamp(10.5px,1.1vw,16px) * var(--fs-body));
  font-weight:500;line-height:1.3;letter-spacing:.06em;
  color:var(--people-accent)
}

/* PROFILE から下を柱の底へ寄せ、左右2列の下端をそろえる */
#people.is-editorial .message-portrait-col .profile-card{
  margin-top:auto!important
}

/* ---- 幅が狭いときは縦書きをやめ、素直に積む ---- */
@media(max-width:900px){
  #people.is-editorial .msg-stage{padding:0;margin-bottom:18px}
  #people.is-editorial .msg-stage .message-portrait-wrap{
    width:100%;max-width:300px;margin:0
  }
  #people.is-editorial .msg-vhead{
    position:static;transform:none;
    writing-mode:horizontal-tb;text-orientation:mixed;
    margin:0 0 16px;padding:14px 16px;
    font-size:calc(clamp(19px,5vw,28px) * var(--fs-heading));line-height:1.5
  }
  #people.is-editorial .msg-vlabel{
    position:static;margin:12px 0 0;
    writing-mode:horizontal-tb;white-space:normal;
    font-size:calc(13px * var(--fs-body))
  }
  #people.is-editorial .msg-stage .msg-sq-a{left:auto;right:0;top:0;width:80px;height:32px}
  #people.is-editorial .msg-stage .msg-sq-b{display:none}
  #people.is-editorial .message-portrait-col .profile-card{margin-top:clamp(18px,2.4vw,28px)!important}
}

/* =========================================================
   代表のあいさつ：本文と写真を同じ段に置き、高さをそろえる
   ---------------------------------------------------------
   2列×2段にして
     1段目：本文（左）  ／ 写真（右）   ← この2つの高さがそろう
     2段目：バナー（左）／ PROFILE（右）
   写真は枠を段の高さいっぱいに広げ、中の絵は切り抜きで合わせる。
   ========================================================= */
#people.is-editorial .message-feature{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:clamp(22px,2.6vw,38px) clamp(28px,4.2vw,70px)!important;
  align-items:stretch!important
}
#people.is-editorial .message-feature > .message-copy      {grid-column:1;grid-row:1;order:0}
#people.is-editorial .message-feature > .message-portrait-col{grid-column:2;grid-row:1;order:0}
#people.is-editorial .message-feature > .message-copy-foot {grid-column:1;grid-row:2;order:0}
#people.is-editorial .message-feature > .message-col-foot  {grid-column:2;grid-row:2;order:0}

/* 右の柱は、段の高さいっぱいに伸ばす */
#people.is-editorial .message-portrait-col{
  display:block!important;height:100%
}
#people.is-editorial .msg-stage{
  height:100%;
  /* 本文と上端をそろえるため、上の余白はやめる。
     上へ顔を出す四角は、枠の外へ出して見せる。 */
  padding-top:0!important;padding-bottom:0!important;
  margin:0!important
}
#people.is-editorial .msg-stage .msg-sq-a{
  top:calc(-1 * clamp(26px,3vw,44px))
}
#people.is-editorial .msg-stage .message-portrait-wrap{
  height:100%;margin:0!important;padding:0!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain{
  height:100%
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span{
  display:block;height:100%
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top
}
/* 縦書きは段の高さいっぱいに */
#people.is-editorial .msg-vhead{
  top:0!important;bottom:0!important
}
#people.is-editorial .msg-vlabel{
  top:clamp(14px,1.6vw,24px)!important
}

/* 2段目は、上に余計な空きを足さない */
#people.is-editorial .message-col-foot .profile-card{
  margin-top:0!important
}
#people.is-editorial .message-copy-foot .message-more{
  margin-top:0!important
}

@media(max-width:900px){
  #people.is-editorial .message-feature{
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    gap:20px!important
  }
  /* 縦に積むときは、写真 → 本文 → PROFILE → バナー の順 */
  #people.is-editorial .message-feature > .message-portrait-col{grid-column:1;grid-row:auto;order:1}
  #people.is-editorial .message-feature > .message-copy        {grid-column:1;grid-row:auto;order:2}
  #people.is-editorial .message-feature > .message-col-foot    {grid-column:1;grid-row:auto;order:3}
  #people.is-editorial .message-feature > .message-copy-foot   {grid-column:1;grid-row:auto;order:4}
  #people.is-editorial .message-portrait-col,
  #people.is-editorial .msg-stage,
  #people.is-editorial .msg-stage .message-portrait-wrap,
  #people.is-editorial .msg-stage .message-portrait.is-curtain,
  #people.is-editorial .msg-stage .message-portrait.is-curtain > span{height:auto}
  #people.is-editorial .msg-stage .message-portrait.is-curtain > span img{
    height:auto;object-fit:contain
  }
  #people.is-editorial .msg-stage .msg-sq-a{top:0}
}

/* 以前からある「写真は縮小して全部見せる」指定（max-height / object-fit:contain）が
   強く効いているので、この組みのぶんだけ打ち消して、段の高さいっぱいに合わせる。 */
#people.is-editorial .msg-stage{height:100%!important}
#people.is-editorial .msg-stage .message-portrait-wrap{height:100%!important}
#people.is-editorial .msg-stage .message-portrait.is-curtain{
  height:100%!important;max-height:none!important;min-height:0!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span{
  display:block!important;height:100%!important;width:100%!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span img{
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:center top!important
}
@media(max-width:900px){
  #people.is-editorial .msg-stage,
  #people.is-editorial .msg-stage .message-portrait-wrap,
  #people.is-editorial .msg-stage .message-portrait.is-curtain,
  #people.is-editorial .msg-stage .message-portrait.is-curtain > span{height:auto!important}
  #people.is-editorial .msg-stage .message-portrait.is-curtain > span img{
    height:auto!important;object-fit:contain!important
  }
}

/* 高さの「100%」は、grid の中では親まで伝わらずに無視されることがある。
   柱を縦のフレックスにして写真の段を伸ばし、中身は上下を突っ張らせて、
   本文とぴったり同じ高さにする。 */
#people.is-editorial .message-portrait-col{
  display:flex!important;flex-direction:column;height:auto!important
}
#people.is-editorial .msg-stage{
  flex:1 1 auto;min-height:0;position:relative;height:auto!important
}
#people.is-editorial .msg-stage .message-portrait-wrap{
  position:absolute!important;
  left:15%;top:0;bottom:0;width:71%;
  height:auto!important;margin:0!important;padding:0!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain{
  position:absolute!important;inset:0;height:auto!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span{
  position:absolute!important;inset:0;display:block!important;height:auto!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center top!important
}
@media(max-width:900px){
  #people.is-editorial .msg-stage{flex:none;height:auto!important}
  #people.is-editorial .msg-stage .message-portrait-wrap{
    position:static!important;width:100%;max-width:300px;margin:0!important
  }
  #people.is-editorial .msg-stage .message-portrait.is-curtain{position:relative!important;inset:auto}
  #people.is-editorial .msg-stage .message-portrait.is-curtain > span{position:static!important}
  #people.is-editorial .msg-stage .message-portrait.is-curtain > span img{
    height:auto!important;object-fit:contain!important
  }
}

/* 柱に残っていた下の余白（24px）が、写真をそのぶん短くしていた */
#people.is-editorial .message-portrait-col{padding:0!important}

/* 上へ顔を出す四角が、箱の overflow:hidden で切られていたので解除する。
   （中の動きは下から上へのものだけなので、はみ出して困るものはない） */
#people.is-editorial .message-feature{overflow:visible!important}

/* 縦の札は、右下の四角の上で必ず終わるように、下から積む */
#people.is-editorial .msg-vlabel{
  top:auto!important;
  bottom:calc(clamp(42px,4.8vw,74px) + 14px)
}
@media(max-width:900px){
  #people.is-editorial .msg-vlabel{bottom:auto!important}
}

/* =========================================================
   実績・事例：4つのカードを写真のまわりに散らす
   ---------------------------------------------------------
   ・見出しの右に本文（リード＋説明）
   ・写真の上に CASE 01〜04 のカードを重ねる
   ・カードの中は、見出しに合わせて明朝。札だけはサイト共通の
     小さい英字のまま（ほかの見出し札とそろえるため）
   ・入口の行は右下
   ========================================================= */
#cases .cases-lead-col{display:block}
#cases .cases-lead-col .lead{margin:0}
#cases .cases-lead-col .cases-lead-sub{
  margin-top:.9em;
  font-size:calc(11.6px * var(--fs-body));
  color:var(--muted)
}

/* ---- 写真のステージ。カードが下へはみ出すぶんの余白を持たせる ---- */
#cases .case-hero.is-story .case-stage{
  padding:clamp(30px,3.6vw,58px) 0 clamp(80px,9vw,150px)
}
#cases .case-hero.is-story .case-visual{
  width:62%;margin-left:19%
}
#cases .case-hero.is-story .case-vhead{
  left:19%;
  font-size:calc(clamp(20px,2.6vw,38px) * var(--fs-heading));
  bottom:clamp(96px,11vw,180px)
}
#cases .case-hero.is-story .case-sq-a{left:26%;width:clamp(80px,9vw,150px)}
#cases .case-hero.is-story .case-sq-b{
  right:auto;left:74%;bottom:clamp(66px,7.6vw,128px)
}

/* ---- カードを写真のまわりに置く ---- */
#cases .case-links{
  position:absolute;inset:0;z-index:7;
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  pointer-events:none
}
#cases .case-links .case-link{
  position:absolute;
  width:21.5%;
  min-height:0;
  margin:0;
  padding:clamp(14px,1.5vw,22px) clamp(14px,1.5vw,22px) clamp(16px,1.8vw,26px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  pointer-events:auto;
  transition:border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1)
}
#cases .case-links .case-link:hover{
  border-color:var(--ink);transform:translateY(-4px)
}
/* 置き位置。参考画像の重なり方に合わせている */
#cases .case-links .case-link.is-card1{left:26.5%;top:7%}
#cases .case-links .case-link.is-card2{left:68.5%;top:0}
#cases .case-links .case-link.is-card3{left:29%;top:69%}
#cases .case-links .case-link.is-card4{left:77.5%;top:49%}

/* ---- カードの中身。見出しに合わせて明朝に ---- */
#cases .case-links .case-link .num{
  display:block;
  margin:0 0 clamp(10px,1.2vw,16px);
  font-family:"Noto Sans JP",sans-serif;
  font-size:calc(9.2px * var(--fs-body));
  font-weight:600;letter-spacing:.18em;
  color:var(--muted)
}
#cases .case-links .case-link h4{
  margin:0 0 clamp(8px,1vw,14px);
  font-family:"Noto Serif JP",serif;
  font-size:calc(clamp(15px,1.5vw,21px) * var(--fs-heading));
  font-weight:600;line-height:1.45;letter-spacing:.01em;
  color:var(--ink)
}
#cases .case-links .case-link p{
  margin:0;
  font-family:"Noto Serif JP",serif;
  font-size:calc(9.6px * var(--fs-body));
  font-weight:400;line-height:1.95;letter-spacing:.02em;
  color:var(--muted)
}

/* ---- 入口の行は右下 ---- */
#cases .case-hero.is-story .case-foot{
  display:block;margin-top:clamp(-60px,-5vw,-20px)
}
#cases .case-hero.is-story .case-more{justify-self:auto;float:right}
#cases .case-hero.is-story .case-foot:after{content:"";display:block;clear:both}

/* ---- 幅が狭いときは、散らすのをやめて写真の下に並べる ---- */
@media(max-width:900px){
  #cases .case-hero.is-story .case-stage{padding:0 0 clamp(20px,4vw,34px)}
  #cases .case-hero.is-story .case-visual{width:100%;margin:0}
  #cases .case-links{
    position:static;display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:14px!important;margin-top:20px
  }
  #cases .case-links .case-link{
    position:static;width:auto;padding:16px
  }
  #cases .case-links .case-link.is-card1,
  #cases .case-links .case-link.is-card2,
  #cases .case-links .case-link.is-card3,
  #cases .case-links .case-link.is-card4{left:auto;top:auto}
  #cases .case-hero.is-story .case-foot{margin-top:20px}
  #cases .case-hero.is-story .case-more{float:none}
}
@media(max-width:560px){
  #cases .case-links{grid-template-columns:1fr!important}
}

/* 実績・事例の見出しは、参考画像に合わせて1行に収まる大きさにする */
#cases .intro .h2{
  font-size:calc(clamp(28px,3.4vw,52px) * var(--fs-heading))!important;
  line-height:1.25!important;
  letter-spacing:.02em!important;
  white-space:nowrap
}
#cases .intro{align-items:start}
@media(max-width:640px){
  #cases .intro .h2{font-size:calc(clamp(24px,7vw,34px) * var(--fs-heading))!important}
}

/* =========================================================
   WHO WE ARE ／ 代表のあいさつ：海外のレトロ新聞の組み
   ---------------------------------------------------------
   ・紙の地色に黒インク。罫線（太・細）で帯を区切る
   ・題字 → 大見出し → 日付行 → 記事見出し → 段組み本文
   ・1段目の頭は飾り文字（ドロップキャップ）
   ・写真は細い黒枠＋下に説明文（キャプション）
   ・PROFILE は囲み記事
   書体はサイトにあるもの（Noto Serif JP ／ Noto Sans JP）だけで組む。
   ========================================================= */
#people.is-editorial{
  --paper:#faf8f4;
  --ink-rule:var(--ink);
  background:var(--paper)!important;
  padding-top:clamp(56px,6.4vw,100px);
  padding-bottom:clamp(56px,6.4vw,100px)
}

/* ---- 題字（WHO WE ARE）と大見出し ---- */
#people.is-editorial .intro{
  display:block!important;
  text-align:center;
  border-top:4px solid var(--ink-rule);
  border-bottom:3px solid var(--ink-rule);
  padding:clamp(10px,1.2vw,16px) 0 clamp(18px,2.2vw,30px);
  margin-bottom:0!important
}
#people.is-editorial .intro .kicker{
  font-family:"Noto Sans JP",sans-serif;
  font-size:calc(10.5px * var(--fs-body))!important;
  font-weight:700;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink);
  padding:0 0 clamp(10px,1.2vw,16px)!important;
  margin:0 0 clamp(14px,1.8vw,24px)!important;
  border-bottom:1px solid var(--ink-rule);
  transform:none!important
}
#people.is-editorial .intro .kicker:after{display:none!important}
#people.is-editorial .intro .h2{
  font-family:"Noto Serif JP",serif!important;
  font-size:calc(clamp(30px,5vw,72px) * var(--fs-heading))!important;
  font-weight:800!important;
  line-height:1.12!important;
  letter-spacing:-.01em!important;
  margin:0 auto clamp(14px,1.8vw,24px)!important;
  max-width:18em;
  transform:none!important
}
#people.is-editorial .intro .lead{
  max-width:44em!important;margin:0 auto!important;
  font-family:"Noto Serif JP",serif;
  font-size:calc(11.6px * var(--fs-body));
  line-height:1.95;letter-spacing:.01em;
  color:var(--ink);
  transform:none!important
}

/* ---- 日付行（MESSAGE ／ 代表のあいさつ）と記事見出し ---- */
#people.is-editorial .message-head-block{
  margin:0 0 clamp(20px,2.4vw,34px)!important
}
#people.is-editorial .message-heading{
  display:flex!important;flex-direction:row!important;
  align-items:center;justify-content:center;
  gap:clamp(10px,1.2vw,18px);
  padding:clamp(7px,.9vw,11px) 0;
  border-bottom:1px solid var(--ink-rule);
  margin:0 0 clamp(20px,2.4vw,34px)!important
}
#people.is-editorial .message-jp,
#people.is-editorial .message-en{
  order:0!important;
  font-family:"Noto Sans JP",sans-serif!important;
  font-size:calc(9.6px * var(--fs-body))!important;
  font-weight:700!important;
  letter-spacing:.3em!important;
  line-height:1.4!important;
  text-transform:uppercase;
  color:var(--ink)
}
#people.is-editorial .message-jp:before{content:"—";margin-right:.9em;letter-spacing:0}
#people.is-editorial .msg-vhead{
  position:static!important;transform:none!important;
  writing-mode:horizontal-tb!important;text-orientation:mixed!important;
  border:0!important;background:none!important;padding:0!important;
  margin:0 auto!important;max-width:24em;
  text-align:center;
  font-family:"Noto Serif JP",serif;
  font-size:calc(clamp(22px,3.2vw,44px) * var(--fs-heading))!important;
  font-weight:800;line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);
  top:auto!important;bottom:auto!important;left:auto!important
}

/* ---- 本文は段組み。段のあいだに細い罫線 ---- */
#people.is-editorial .message-feature{
  grid-template-columns:minmax(0,1.68fr) minmax(0,1fr)!important;
  gap:clamp(20px,2.4vw,34px) clamp(24px,3vw,46px)!important;
  border-top:3px solid var(--ink-rule);
  padding-top:clamp(20px,2.4vw,34px)
}
#people.is-editorial .message-copy{
  columns:2;column-gap:clamp(22px,2.4vw,38px);
  column-rule:1px solid rgba(16,27,37,.28)
}
#people.is-editorial .message-copy > p{
  font-family:"Noto Serif JP",serif!important;
  font-size:calc(10.6px * var(--fs-body))!important;
  line-height:1.95!important;letter-spacing:.005em!important;
  color:var(--ink)!important;
  text-align:justify;
  margin:0 0 1.15em!important;
  max-width:none!important;
  break-inside:avoid;
  transform:none!important
}
/* 1段目の頭は飾り文字 */
#people.is-editorial .message-copy > p:first-of-type:first-letter{
  float:left;
  font-family:"Noto Serif JP",serif;
  font-size:3.3em;font-weight:800;
  line-height:.86;
  margin:.06em .1em 0 0;
  color:var(--ink)
}

/* ---- 写真は細い黒枠。下に説明文 ---- */
#people.is-editorial .msg-stage{
  display:block;height:auto!important;flex:none
}
#people.is-editorial .msg-stage .message-portrait-wrap{
  position:static!important;width:100%!important;margin:0!important;padding:0!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain{
  position:relative!important;inset:auto;
  height:auto!important;
  aspect-ratio:4/5;
  border:1px solid var(--ink-rule)!important;
  background:var(--paper)!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span{
  position:absolute!important;inset:0
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center top!important;
  filter:grayscale(1) contrast(1.08)
}
#people.is-editorial .msg-caption{
  margin:clamp(7px,.9vw,11px) 0 0;
  padding-bottom:clamp(7px,.9vw,11px);
  border-bottom:1px solid var(--ink-rule);
  font-family:"Noto Serif JP",serif;
  font-size:calc(9.4px * var(--fs-body));
  line-height:1.7;letter-spacing:.02em;
  color:var(--ink)
}

/* ---- PROFILE は囲み記事 ---- */
#people.is-editorial .message-col-foot .profile-card{
  border:1px solid var(--ink-rule)!important;
  border-top:4px solid var(--ink-rule)!important;
  padding:clamp(14px,1.6vw,22px)!important;
  margin:0!important;
  background:none!important
}
#people.is-editorial .message-col-foot .profile-card:before{display:none!important}
#people.is-editorial .profile-label{
  display:block!important;
  background:none!important;color:var(--ink)!important;
  border-radius:0!important;
  padding:0 0 clamp(8px,1vw,12px)!important;
  margin:0 0 clamp(10px,1.2vw,15px)!important;
  border-bottom:1px solid var(--ink-rule);
  text-align:center;
  font-family:"Noto Sans JP",sans-serif;
  font-size:calc(9.4px * var(--fs-body));
  font-weight:700;letter-spacing:.3em
}
#people.is-editorial .profile-card p{
  font-family:"Noto Serif JP",serif!important;
  font-size:calc(9.8px * var(--fs-body))!important;
  line-height:1.85!important;letter-spacing:.005em!important;
  color:var(--ink)!important;
  text-align:justify
}
#people.is-editorial .profile-links{margin-top:clamp(10px,1.2vw,16px)}
#people.is-editorial .profile-links a{
  font-family:"Noto Sans JP",sans-serif;
  font-size:calc(9.6px * var(--fs-body));
  font-weight:700;letter-spacing:.08em;
  border-bottom:1px solid var(--ink-rule)
}

/* ---- 下の帯：入口のバナー ---- */
#people.is-editorial .message-copy-foot{
  border-top:3px solid var(--ink-rule);
  padding-top:clamp(16px,2vw,26px)
}
#people.is-editorial .message-copy-foot .message-more{max-width:100%}

@media(max-width:900px){
  #people.is-editorial .message-feature{grid-template-columns:1fr!important}
  #people.is-editorial .message-copy{columns:1;column-rule:none}
  #people.is-editorial .msg-vhead{font-size:calc(clamp(20px,5.4vw,30px) * var(--fs-heading))!important}
  #people.is-editorial .message-heading{flex-wrap:wrap}
}

/* 新聞の組みの調整
   ・両端そろえ（justify）は、日本語の狭い段だと字間が開いて汚いのでやめる
   ・写真を正方形の切り抜きにし、段の幅を見直して、
     本文の段と写真の段の高さの差を小さくする */
#people.is-editorial .message-feature{
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)!important
}
#people.is-editorial .message-copy > p,
#people.is-editorial .profile-card p{text-align:left!important}
#people.is-editorial .msg-stage .message-portrait.is-curtain{aspect-ratio:1/1}
#people.is-editorial .message-copy > p:first-of-type:first-letter{
  font-size:3em;margin:.08em .12em 0 0
}

/* 段の高さの釣り合い
   ・本文の字を少し大きく、行間も広げて段を長くする
   ・写真は正方形のまま、高さに上限をつけて段を短くする
   これで「本文の段」と「写真の段」の差を縮める。 */
#people.is-editorial .message-copy > p{
  font-size:calc(11.4px * var(--fs-body))!important;
  line-height:2.05!important;
  margin:0 0 1.25em!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain{
  max-height:clamp(240px,24vw,330px);
  margin:0 auto!important;
  width:auto!important;
  aspect-ratio:1/1
}
#people.is-editorial .msg-stage .message-portrait-wrap{
  display:flex;justify-content:center
}
#people.is-editorial .msg-caption{text-align:center}

/* 写真：高さを決めて、正方形の幅をそこから取る
   （高さを「上限」だけにすると幅が決まらず、写真が消えてしまうため） */
#people.is-editorial .msg-stage .message-portrait.is-curtain{
  height:clamp(230px,23vw,320px)!important;
  max-height:none!important;
  width:clamp(230px,23vw,320px)!important;
  aspect-ratio:auto!important
}

/* カードの枠は、採用いただいた画面に合わせて濃い線＋やわらかい影に。
   写真の上に重なるので、薄い線だと輪郭が消えてしまう。 */
#cases .case-links .case-link{
  border-color:var(--ink)!important;
  box-shadow:0 10px 24px rgba(16,27,37,.16)!important
}
#cases .case-links .case-link:hover{
  box-shadow:0 16px 34px rgba(16,27,37,.22)!important
}

/* =========================================================
   実績・事例：参考画像の釣り合いに数値を合わせ直す
   （画像のコンテンツ幅937pxを基準に、割合で換算している）
   ========================================================= */
#cases .intro{margin-bottom:2.2%!important;align-items:start}
#cases .intro .h2{
  font-size:calc(clamp(30px,5.4vw,86px) * var(--fs-heading))!important;
  line-height:1.1!important;letter-spacing:.01em!important;
  margin:0!important;white-space:nowrap
}
#cases .cases-lead-col .cases-lead-sub{
  margin-top:0!important;
  font-size:calc(12.2px * var(--fs-body));
  line-height:1.95
}

/* 写真：幅74% ／ 左から12% ／ 画像に近い縦横比 */
#cases .case-hero.is-story .case-stage{
  padding:3.4% 0 6%!important
}
#cases .case-hero.is-story .case-visual{
  width:74%!important;margin-left:12%!important;
  aspect-ratio:131/100!important
}
/* 縦書きの枠は、中心を写真の左端に合わせたまま、字を大きく */
#cases .case-hero.is-story .case-vhead{
  left:12%!important;
  font-size:calc(clamp(22px,4.1vw,58px) * var(--fs-heading))!important;
  top:5%!important;bottom:14%!important
}
/* 飾りの四角 */
#cases .case-hero.is-story .case-sq-a{
  left:24.6%!important;top:0!important;
  width:13.9%!important;height:7%!important
}
#cases .case-hero.is-story .case-sq-b{
  left:77.9%!important;right:auto!important;
  bottom:9%!important;
  width:9.3%!important;height:0!important;
  padding-bottom:9.3%
}
/* カード：幅25%、置き位置も画像に合わせる */
#cases .case-links .case-link{width:25%!important}
#cases .case-links .case-link.is-card1{left:22%!important;top:5.4%!important}
#cases .case-links .case-link.is-card2{left:66.7%!important;top:0!important}
#cases .case-links .case-link.is-card3{left:23.9%!important;top:67.7%!important}
#cases .case-links .case-link.is-card4{left:74.7%!important;top:42.9%!important}

@media(max-width:900px){
  #cases .intro .h2{white-space:normal;font-size:calc(clamp(24px,7vw,34px) * var(--fs-heading))!important}
  #cases .case-hero.is-story .case-stage{padding:0 0 clamp(20px,4vw,34px)!important}
  #cases .case-hero.is-story .case-visual{width:100%!important;margin:0!important;aspect-ratio:16/11!important}
  #cases .case-links .case-link{width:auto!important}
}

/* カードの高さが参考画像より低かったので、余白と字を上げる
   （目標：幅25%・高さは幅の約0.81倍） */
#cases .case-links .case-link{
  padding:clamp(16px,2.2vw,30px) clamp(16px,2.1vw,28px) clamp(18px,2.4vw,32px)!important
}
#cases .case-links .case-link .num{
  font-size:calc(9.8px * var(--fs-body))!important;
  margin-bottom:clamp(12px,1.5vw,20px)!important
}
#cases .case-links .case-link h4{
  font-size:calc(clamp(16px,1.75vw,24px) * var(--fs-heading))!important;
  margin-bottom:clamp(10px,1.3vw,18px)!important
}
#cases .case-links .case-link p{
  font-size:calc(11.2px * var(--fs-body))!important;
  line-height:1.9!important
}

/* 縦書きの枠の高さも参考画像に合わせる（上8.8% / 下28%） */
#cases .case-hero.is-story .case-vhead{top:8.8%!important;bottom:28%!important}

/* 縦書きが3列に折れて枠が太くなっていたので、字を少し落として2列に収める */
#cases .case-hero.is-story .case-vhead{
  font-size:calc(clamp(20px,3.7vw,52px) * var(--fs-heading))!important
}

/* 枠の高さがぎりぎりで3列に折れていた。少しだけ縦に伸ばして2列に収める
   （2列になれば枠の太さも参考画像どおりになる） */
#cases .case-hero.is-story .case-vhead{
  top:7.5%!important;bottom:24%!important;
  max-height:none!important
}

/* 見出し全体にかかっている text-wrap:balance が、縦書きの行を均等に
   分けようとして3列に折っていた。ここは素直に詰めて2列にする。 */
#cases .case-hero.is-story .case-vhead{
  text-wrap:wrap!important;
  text-wrap-style:auto!important
}

/* 原因：見出しにかかっていた禁則（word-break / line-break）が、
   まだ余裕があるのに行を折って3列にしていた。
   素直な折り返しに戻し、字の大きさも参考画像（約44px）に合わせる。 */
#cases .case-hero.is-story .case-vhead{
  line-break:loose!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  font-size:calc(clamp(20px,3.4vw,48px) * var(--fs-heading))!important
}

/* =========================================================
   実績・事例：見出しをさらに大きく、右の文は少し下げる
   ========================================================= */
#cases .intro .h2{
  font-size:calc(clamp(32px,6.4vw,104px) * var(--fs-heading))!important
}
#cases .cases-lead-col{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:.4em
}
#cases .cases-lead-col .cases-lead-sub{
  margin-top:clamp(20px,2.6vw,44px)!important
}
@media(max-width:900px){
  #cases .intro .h2{font-size:calc(clamp(24px,7.4vw,36px) * var(--fs-heading))!important}
  #cases .cases-lead-col{padding-bottom:0}
  #cases .cases-lead-col .cases-lead-sub{margin-top:14px!important}
}

/* =========================================================
   代表のあいさつ：全画面で見たときの釣り合い
   ・バナーが大きすぎて写真と吊り合っていなかったので幅を抑える
   ・そのぶん写真を大きくし、左右の段の幅も近づける
   ========================================================= */
#people.is-editorial .message-feature{
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain{
  height:clamp(240px,30vw,400px)!important;
  width:clamp(240px,30vw,400px)!important
}
#people.is-editorial .message-copy-foot{
  align-self:start
}
#people.is-editorial .message-copy-foot .message-more{
  max-width:clamp(320px,44vw,560px)!important
}
@media(max-width:900px){
  #people.is-editorial .message-copy-foot .message-more{max-width:100%!important}
}

/* =========================================================
   理事一覧の帯：トップページから団体概要ページへ移した
   見た目・動き（横スクロールと秋田犬）はトップページのときと同じ。
   左右の端だけ、このページの他の段に合わせて詰めている。
   ========================================================= */
.about-page .officers-section{
  padding-left:0!important;
  padding-right:0!important;
  padding-top:clamp(56px,6.4vw,92px)!important;
  padding-bottom:0!important
}

/* =========================================================
   実績・事例のカード番号：いただいた「CASE #01」の意匠に合わせる
   ・丸みのある太い欧文（Fredoka）を、塗りなし＋輪郭線だけで出す
   ・「#01」の側だけ斜体にして、紺色の線を右下へずらして重ねる
   ・色・太さはここの数字だけで変えられる
   ========================================================= */
#cases .case-links .case-link .num{
  display:flex!important;
  align-items:baseline;
  gap:.28em;
  white-space:nowrap;
  font-family:"Titan One","Noto Sans JP",sans-serif!important;
  font-weight:400!important;
  font-size:calc(clamp(17px,1.9vw,26px) * var(--fs-heading))!important;
  line-height:1!important;
  letter-spacing:.005em!important;
  margin:0 0 clamp(12px,1.5vw,20px)!important;
  color:transparent!important;
  -webkit-text-stroke:.058em var(--ink);
  text-stroke:.058em var(--ink);
  transition:-webkit-text-stroke-color .3s ease
}
/* 「#01」：斜体にして、うしろに紺色の線をずらして置く */
#cases .case-links .case-link .num .num-no{
  position:relative;
  isolation:isolate;
  display:inline-block;
  transform:skewX(-11deg);
  transform-origin:0 100%;
  margin-right:.18em
}
#cases .case-links .case-link .num .num-no:before{
  content:attr(data-n);
  position:absolute;
  left:.055em;
  top:.065em;
  z-index:-1;
  color:transparent;
  -webkit-text-stroke:.05em #1d3d5c;
  text-stroke:.05em #1d3d5c
}
#cases .case-links .case-link:hover .num{
  -webkit-text-stroke-color:var(--navy)
}
/* 輪郭線が使えない環境では、塗りつぶしの文字として読めるようにする */
@supports not (-webkit-text-stroke:1px #000){
  #cases .case-links .case-link .num{color:var(--ink)!important}
  #cases .case-links .case-link .num .num-no:before{display:none}
}
@media(max-width:900px){
  #cases .case-links .case-link .num{
    font-size:calc(clamp(16px,4.4vw,22px) * var(--fs-heading))!important;
    margin-bottom:10px!important
  }
}

/* =========================================================
   代表のあいさつ：本文のかたまりを、写真の高さの中央に合わせる
   ---------------------------------------------------------
   画面を広げるほど本文は横に伸びて行数が減るのに、写真は最大400pxで
   止まる。そのため全画面にすると本文の下だけが大きく空いていた。
   本文を上下の中央に置き、余りを上下へ等しく分ける。
   （本文が写真より高いときは、これまでどおり本文の高さで決まる）
   ========================================================= */
#people.is-editorial .message-copy{
  align-self:center!important
}
@media(max-width:900px){
  #people.is-editorial .message-copy{align-self:auto!important}
}

/* =========================================================
   研修ページ：講座でお伝えしていること／受講した生徒の声
   ========================================================= */
.tr-msg,.tr-voices{
  max-width:980px;margin:clamp(48px,6vw,88px) auto 0;
  padding:0 clamp(16px,3vw,24px)
}
.tr-msg-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:12px 6vw;align-items:end;margin-bottom:28px}
.tr-msg-head .kicker{display:block;margin-bottom:12px;grid-column:1}
.tr-msg-head h2{
  grid-column:1;margin:0;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(24px,3vw,40px) * var(--fs-heading));line-height:1.35;letter-spacing:-.04em
}
.tr-msg-head p{grid-column:2;grid-row:1 / span 2;margin:0;font-size:calc(12px * var(--fs-body));line-height:2;color:#3c4a55}
.tr-msg-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.tr-msg-card{padding:26px 30px 26px 0;min-width:0}
.tr-msg-card+.tr-msg-card{padding:26px 0 26px 30px;border-left:1px solid var(--line)}
.tr-msg-card h3{
  display:flex;align-items:center;gap:10px;margin:0 0 16px;
  font-size:calc(13px * var(--fs-body));font-weight:800;letter-spacing:.06em;color:var(--navy)
}
.tr-msg-card h3:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--navy)}
.tr-msg-card.is-receive h3:before{background:transparent;border:2px solid var(--navy);box-sizing:border-box}
.tr-msg-card ul{list-style:none;margin:0;padding:0;counter-reset:trmsg}
.tr-msg-card li{
  position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line);
  font-size:calc(12px * var(--fs-body));line-height:1.95;color:#3c4a55;counter-increment:trmsg
}
.tr-msg-card li:first-child{border-top:0;padding-top:0}
.tr-msg-card li:before{
  content:counter(trmsg,decimal-leading-zero);position:absolute;left:0;top:13px;
  font-family:Georgia,serif;font-size:calc(10px * var(--fs-body));color:var(--muted);letter-spacing:.04em
}
.tr-msg-card li:first-child:before{top:1px}
.tr-msg-link{
  display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;margin-top:22px;
  padding:18px 22px;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;
  transition:background .25s ease,border-color .25s ease
}
.tr-msg-link:hover{background:#fff;border-color:var(--navy)}
.tr-msg-link-label{font-size:calc(9.5px * var(--fs-body));font-weight:800;letter-spacing:.08em;color:var(--muted)}
.tr-msg-link-title{grid-column:1;font-family:"Noto Serif JP",serif;font-weight:600;font-size:calc(14px * var(--fs-body));line-height:1.6}
.tr-msg-link-arrow{grid-column:2;grid-row:1 / span 2;font-weight:800;color:var(--navy);transition:transform .25s ease}
.tr-msg-link:hover .tr-msg-link-arrow{transform:translateX(4px)}

.tr-voice-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--line)}
.tr-voice{
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0;
  padding:22px 22px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)
}
.tr-voice p{margin:0;font-size:calc(12px * var(--fs-body));line-height:1.95;color:var(--ink)}
.tr-voice p:before{content:"“";display:block;font-family:Georgia,serif;font-size:calc(26px * var(--fs-heading));line-height:.8;color:var(--navy);margin-bottom:6px}
.tr-voice span{font-size:calc(9.5px * var(--fs-body));font-weight:800;letter-spacing:.06em;color:var(--muted)}
.tr-voice-media{margin:16px 0 0;font-size:calc(10.5px * var(--fs-body));line-height:1.9;color:var(--muted)}
.tr-voice-media a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;margin-left:6px}

@media(max-width:900px){
  .tr-voice-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .tr-msg-head{grid-template-columns:1fr}
  .tr-msg-head p{grid-column:1;grid-row:auto;font-size:calc(11.5px * var(--fs-body));line-height:1.9}
  .tr-msg-grid{grid-template-columns:1fr}
  .tr-msg-card,.tr-msg-card+.tr-msg-card{padding:20px 0;border-left:0}
  .tr-msg-card+.tr-msg-card{border-top:1px solid var(--line)}
  .tr-msg-card li{font-size:calc(11.5px * var(--fs-body));line-height:1.9}
  .tr-msg-link{padding:16px 18px}
  .tr-voice-list{grid-template-columns:1fr}
  .tr-voice{padding:18px 16px 14px}
}


/* =========================================================
   団体概要：沿革（2026年10月追加）
   ========================================================= */
.about-history{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:30px 6%;margin-top:80px;
  background:#fff;border:1px solid var(--line);padding:56px 5% 50px
}
.about-history-head .kicker{display:block;margin-bottom:14px}
.about-history-head h2{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(26px,2.8vw,40px) * var(--fs-heading));line-height:1.3;letter-spacing:-.04em
}
.about-history-list{list-style:none;margin:0;padding:0;position:relative}
.about-history-list::before{
  content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:#e3e8eb
}
.about-history-list li{
  position:relative;display:grid;grid-template-columns:150px 1fr;gap:6px 24px;align-items:baseline;
  padding:16px 0 16px 32px;border-bottom:1px solid var(--line-soft,#e7ebee)
}
.about-history-list li:last-child{border-bottom:0}
.about-history-list li::before{
  content:"";position:absolute;left:0;top:22px;width:14px;height:14px;border-radius:50%;
  background:#d2ff00;border:2px solid var(--ink);box-sizing:border-box
}
.about-history-date{font-family:Arial,"Helvetica Neue",sans-serif;font-size:calc(11px * var(--fs-body));font-weight:700;letter-spacing:.04em;color:var(--muted)}
.about-history-text{font-size:calc(12.5px * var(--fs-body));font-weight:700;line-height:1.8;color:var(--ink)}
@media(max-width:900px){
  .about-history{grid-template-columns:1fr;margin-top:48px;padding:36px 24px 26px}
  .about-history-list li{grid-template-columns:1fr;padding:12px 0 12px 30px}
  .about-history-list li::before{top:17px}
}


/* =========================================================
   トップ：研修・セミナーの観覧車に5つ目の円（研修ページ全体へ）と、
   下の帯の2つのリンク（2026-10）
   ========================================================= */
.sem-track{ height:calc(100svh + 160svh) }
.sem-orb.is-more{ background:var(--sem-green);color:#050505 }
.sem-orb.is-more:after{ display:none }
.sem-orb.is-more .sem-orb-label{ top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center }
.sem-orb.is-more .sem-orb-label i{ font-size:calc(.78em * var(--fs-body));font-weight:800;line-height:1.5 }
.sem-orb-line{ display:block;white-space:nowrap }
.sem-orb-go{
  display:grid;place-items:center;margin-top:.7em;
  width:2.4em;height:2.4em;border-radius:50%;background:#050505;color:var(--sem-green);
  font-weight:800;transition:transform .35s var(--ease)
}
.sem-orb.is-more:hover .sem-orb-go{ transform:translateX(.3em) }
.sem-orb.is-more:hover{ box-shadow:0 0 0 5px rgba(5,5,5,.25) }
.who-footer-links{ display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:flex-end }
.sem-track.is-flat .sem-orb.is-more{ grid-column:1 / -1 }
@media(max-width:860px){
  .who-footer-links{ display:block }
}

/* トップ：代表あいさつの下の「自殺対策担当者の皆様へ」は、その段の中央に置く */
#people .message-copy-foot{ display:flex;justify-content:center }

/* =========================================================
   代表のあいさつ（携帯・タブレット）：縦に長くなりすぎていたのを詰める（2026-10-12）
   ---------------------------------------------------------
   ・新聞の組みで入れた「本文 1.9 : 写真 1」の2列指定が、携帯用の1列指定より
     後ろにあったため、携帯でも2列のまま残り、本文が画面の半分の幅（約200px）に
     押し込められて縦に長くなっていた。→ 1列に戻す
   ・写真と PROFILE は横に並べ、本文はその下に画面の幅いっぱいで流す
   ・見出しまわりの余白と字の大きさを、携帯向けに少し小さく
   ========================================================= */
@media(max-width:900px){
  #people.is-editorial .message-feature{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;
    grid-template-rows:none!important;
    gap:18px 16px!important;
    padding-top:18px
  }
  #people.is-editorial .message-feature > .message-portrait-col{grid-column:1;grid-row:1;order:0}
  #people.is-editorial .message-feature > .message-col-foot    {grid-column:2;grid-row:1;order:0;align-self:start}
  #people.is-editorial .message-feature > .message-copy        {grid-column:1 / -1;grid-row:2;order:0}
  #people.is-editorial .message-feature > .message-copy-foot   {grid-column:1 / -1;grid-row:3;order:0}
  /* 写真は柱の幅いっぱいの正方形 */
  #people.is-editorial .msg-stage .message-portrait.is-curtain{
    width:100%!important;height:auto!important;aspect-ratio:1/1!important;max-height:none!important
  }
  #people.is-editorial .msg-caption{font-size:calc(10px * var(--fs-body));line-height:1.6}
  /* 本文は1段・画面の幅いっぱい */
  #people.is-editorial .message-copy{columns:1;column-rule:none}
  #people.is-editorial .message-copy > p{
    font-size:calc(13px * var(--fs-body))!important;
    line-height:1.85!important;
    margin:0 0 .9em!important
  }
  #people.is-editorial .profile-card p{font-size:calc(10.6px * var(--fs-body))!important;line-height:1.75!important}
  #people.is-editorial .message-col-foot .profile-card{padding:12px!important}
}
@media(max-width:640px){
  #people.is-editorial{padding-top:44px!important;padding-bottom:40px!important}
  #people.is-editorial .intro{padding:8px 0 16px}
  #people.is-editorial .intro .kicker{margin-bottom:12px!important;padding-bottom:8px!important}
  #people.is-editorial .intro .h2{font-size:calc(clamp(24px,7.4vw,30px) * var(--fs-heading))!important;margin-bottom:10px!important}
  #people.is-editorial .intro .lead{font-size:calc(12px * var(--fs-body));line-height:1.8}
  #people.is-editorial .message-head-block{margin:14px 0 14px!important}
  #people.is-editorial .message-heading{margin-bottom:12px!important}
  #people.is-editorial .msg-vhead{font-size:calc(clamp(19px,5.4vw,24px) * var(--fs-heading))!important}
  #people.is-editorial .message-copy-foot{padding-top:14px}
}

/* 代表のあいさつの見出し：言葉の途中で折り返さない（2026-10-12）
   「、」「。」ごとのまとまり（.ph）は1つの塊にして、塊と塊の間で折り返す。
   携帯では、いちばん長いまとまり（17字）が1行に収まる大きさにする。 */
#people .ph{display:inline-block;max-width:100%}
@media(max-width:640px){
  #people.is-editorial .msg-vhead{font-size:calc(min(5.1vw,24px) * var(--fs-heading))!important;line-height:1.5}
}

/* =========================================================
   トップ：お知らせへの入口を上のほうに（2026-10-21）
   ① ヒーロー左下のボタンに「お知らせ」を足して3つに
   ② ヒーロー右下に、最新のお知らせ1件（日付・題名）と「お知らせ一覧」
   ③ 動画のすぐ下に、最新のお知らせ（最大3件）の細い帯
   表示確認用の【サンプル】記事は出さない（template-front.php で除いている）。
   ========================================================= */
.is-intro .hero-entry-btn.is-news{background:rgba(6,18,34,.58);border-color:rgba(255,255,255,.5)}

/* ② 右下の最新お知らせ。ボタンと同じ高さの1行にそろえる。
   v1.7 を1秒ごとに見て、右下の帯（横60〜100%・縦89.5〜99.5%）には
   字幕が入らないことを確かめた（1:16〜1:18 に飾りのカードの端がかかるだけ）。
   これより上は字幕の行末がかかるので、カードを高くしない。 */
.is-intro .hero-news-box{
  position:absolute;z-index:6;
  right:clamp(18px,3.2vw,44px);bottom:clamp(18px,3vh,38px);
  width:min(500px,38vw)
}
.hero-news{
  width:100%;min-height:50px;box-sizing:border-box;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:999px;
  background:rgba(6,18,34,.66);border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(4,13,26,.28);
  color:#fff;text-decoration:none;text-align:left;
  transition:background .25s ease,transform .25s ease
}
.hero-news:hover{background:rgba(6,18,34,.84);transform:translateY(-2px)}
.hero-news-label{
  flex:none;font-size:10px;font-weight:800;letter-spacing:.14em;line-height:1;
  padding:4px 7px 3px;border-radius:4px;background:#fff;color:var(--navy)
}
.hero-news-date{flex:none;font-size:12px;letter-spacing:.04em;opacity:.85;font-variant-numeric:tabular-nums}
.hero-news-title{
  flex:1;min-width:0;font-size:calc(13px * var(--fs-body));font-weight:700;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.hero-news-arrow{flex:none;font-size:14px;transition:transform .25s ease}
.hero-news:hover .hero-news-arrow{transform:translateX(3px)}
/* 幅が狭いと左下のボタンとぶつかるので、右下の最新お知らせは出さない（すぐ下の帯で見られる） */
@media(max-width:1100px){ .is-intro .hero-news-box{display:none} }

/* ① お知らせボタンは削除（2026-10-22）。ボタンは「担当者の皆様へ」「会員ページ」の2つ */

/* ③ 動画のすぐ下の帯（ヒーローと同じ濃紺で地続きに） */
.news-strip{background:#040d1a;color:#fff;border-top:1px solid rgba(255,255,255,.14)}
.news-strip-in{
  max-width:1240px;margin:0 auto;
  padding:14px clamp(18px,3.2vw,44px);
  display:flex;align-items:center;gap:clamp(14px,2vw,26px)
}
.news-strip-label{
  flex:none;font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1;
  padding:5px 9px 4px;border-radius:4px;background:#fff;color:var(--navy)
}
.news-strip-list{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;gap:0}
.news-strip-list li{flex:1 1 0;min-width:0}
.news-strip-list li + li{border-left:1px solid rgba(255,255,255,.2)}
.news-strip-list a{
  display:flex;align-items:baseline;gap:10px;min-width:0;
  padding:2px clamp(10px,1.4vw,18px);color:#fff;text-decoration:none
}
.news-strip-list a:hover .news-strip-title{text-decoration:underline}
.news-strip-list time{flex:none;font-size:12px;opacity:.75;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.news-strip-cat{flex:none;font-size:10.5px;padding:1px 7px;border:1px solid rgba(255,255,255,.45);border-radius:999px;opacity:.9}
.news-strip-title{min-width:0;font-size:calc(13px * var(--fs-body));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-strip-all{flex:none;font-size:12px;font-weight:700;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px;white-space:nowrap}
.news-strip-all:hover{border-bottom-color:#fff}
@media(max-width:900px){
  .news-strip-in{flex-wrap:wrap;gap:10px 14px;padding:14px 20px 16px}
  .news-strip-list{order:3;flex-basis:100%;flex-direction:column}
  .news-strip-list li + li{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .news-strip-list a{padding:9px 0;flex-wrap:wrap;gap:4px 10px}
  .news-strip-title{flex-basis:100%;white-space:normal;line-height:1.55}
  .news-strip-all{margin-left:auto}
}

/* =========================================================
   入口の帯（お知らせの帯のすぐ下。2026-10-30）
   左＝こどもたちへ（うすい黄色）、右＝自殺対策担当者の皆様へ（うすい水色）。スマホでは縦に2段
   子どもも担当者も、トップの上のほうで自分の入口を見つけられるように
   ========================================================= */
.kids-strip{display:grid;grid-template-columns:1fr 1fr;color:#111;border-bottom:1px solid rgba(0,0,0,.12)}
.kids-strip-in{
  display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);
  padding:14px clamp(18px,3.2vw,44px);
  color:inherit;text-decoration:none;min-width:0
}
.kids-strip-in.is-kids{background:#fff8d6}
.kids-strip-in.is-staff{background:#e7f1f8}
.kids-strip-icon{flex:none;position:relative;width:54px;height:54px;border-radius:50%;border:2px solid #111;background:#fff;overflow:hidden}
.kids-strip-icon img{position:absolute;width:180%;height:auto;max-width:none;left:-37%;top:-57%}
.kids-strip-icon.is-staff{background:#0b1f2e;border-color:#0b1f2e;display:grid;place-items:center}
.kids-strip-icon.is-staff svg{width:30px;height:30px}
.kids-strip-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kids-strip-label{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.12em;line-height:1;padding:5px 10px 4px;border-radius:999px;background:#e98a0c;color:#fff}
.kids-strip-in.is-staff .kids-strip-label{background:#0b1f2e}
.kids-strip-text b{font-size:calc(16px * var(--fs-body, 1));font-weight:800;letter-spacing:.02em;line-height:1.45}
.kids-strip-text small{font-size:12.5px;font-weight:600;color:#555;line-height:1.5}
.kids-strip-go{box-sizing:border-box;flex:none;font-size:13px;font-weight:800;padding:9px 18px;border:2px solid #111;border-radius:999px;background:#fff;white-space:nowrap;transition:background .2s,color .2s}
.kids-strip-in:hover .kids-strip-go,.kids-strip-in:focus-visible .kids-strip-go{background:#111;color:#fff}
.kids-strip-in + .kids-strip-in{border-left:1px solid rgba(0,0,0,.1)}
@media(max-width:1100px){
  .kids-strip-go{padding:8px 14px;font-size:12px}
}
@media(max-width:820px){
  .kids-strip{grid-template-columns:1fr}
  .kids-strip-in + .kids-strip-in{border-left:0;border-top:1px solid rgba(0,0,0,.1)}
  .kids-strip-in{padding:14px 20px}
  .kids-strip-icon{width:46px;height:46px}
  .kids-strip-go{padding:0;border:0;background:none;font-size:20px}
  .kids-strip-go .kids-strip-go-t{display:none}
}


/* =========================================================
   代表のあいさつ：写真を「額装した肖像」に（2026-10-21）
   ---------------------------------------------------------
   ・依頼は「シックに、遺影っぽく」。ただ自殺対策の団体のサイトなので、
     黒いリボン・太い黒枠・菊など、亡くなった方を連想させる印は使わない。
     代わりに、格式のある肖像写真の額（外の細い二重線 → 生成りのマット →
     写真のきわの細い線）と、銀塩写真のような落ち着いたモノクロにする。
   ・名前の下の線はやめる（下の段の罫線と二重に見えていた）。
   ・パソコンでは、写真の額の上端を本文の1行目に、名前の下端を本文の
     最後の行にそろえる。写真の大きさは本文の段の高さで決まる。
   ========================================================= */
#people.is-editorial .msg-caption{
  border-bottom:0!important;padding-bottom:0!important;
  margin:clamp(10px,1vw,14px) 0 0!important;
  text-align:center;line-height:1.5
}
#people.is-editorial .msg-cap-org,
#people.is-editorial .msg-cap-name{display:block}
#people.is-editorial .msg-cap-org{
  font-size:calc(9px * var(--fs-body));letter-spacing:.14em;color:var(--muted)
}
#people.is-editorial .msg-cap-name{
  margin-top:3px;
  font-size:calc(13px * var(--fs-body));font-weight:600;letter-spacing:.32em;
  text-indent:.32em;color:var(--ink)
}

/* 額：外の二重線 → マット → 写真のきわの細い線 */
#people.is-editorial .msg-stage .message-portrait.is-curtain{
  --mat:clamp(12px,6.5%,26px);
  background:#f3efe6!important;
  border:1px solid var(--ink)!important;
  box-shadow:
    inset 0 0 0 4px #f3efe6,
    inset 0 0 0 5px rgba(16,27,37,.55),
    0 14px 28px -18px rgba(16,27,37,.45)!important;
  box-sizing:border-box!important
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span{
  position:absolute!important;inset:var(--mat)!important;
  width:auto!important;height:auto!important;
  outline:1px solid rgba(16,27,37,.4);
  overflow:hidden;background:#fff
}
#people.is-editorial .msg-stage .message-portrait.is-curtain > span img{
  filter:grayscale(1) sepia(.12) contrast(1.04) brightness(1.02)!important
}

@media(min-width:901px){
  /* 段の高さは本文で決め、写真の柱はその高さに合わせる。
     額は柱の左の線（下の PROFILE の枠の左端）にそろえ、名前は額の右に置いて
     下端を本文の最後の行にそろえる。 */
  #people.is-editorial .message-feature{align-items:start!important}
  #people.is-editorial .message-copy{align-self:start!important}
  #people.is-editorial .message-copy > p:last-child{margin-bottom:0!important}
  #people.is-editorial .message-portrait-col{
    position:relative!important;display:block!important;
    align-self:stretch!important;height:auto!important;min-height:0!important;padding:0!important;
    container-type:size
  }
  #people.is-editorial .msg-stage{
    position:absolute!important;inset:0!important;justify-content:flex-start!important;
    display:flex!important;flex-direction:row!important;align-items:stretch!important;
    gap:clamp(16px,1.8vw,28px);
    height:auto!important;padding:0!important;margin:0!important
  }
  #people.is-editorial .msg-stage .message-portrait-wrap{
    position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;
    flex:0 1 auto!important;align-self:stretch!important;
    /* 正方形。一辺は段の高さ（100cqh）、ただし柱の幅の64%まで */
    width:min(100cqh,64cqw)!important;height:auto!important;
    max-width:none!important;min-width:0!important;flex:none!important;
    display:block!important;margin:0!important;padding:0!important
  }
  #people.is-editorial .msg-stage .message-portrait.is-curtain{
    position:absolute!important;inset:0!important;
    width:auto!important;height:auto!important;max-width:none!important;
    max-height:none!important;min-height:0!important;
    aspect-ratio:auto!important;margin:0!important
  }
  #people.is-editorial .msg-caption{
    flex:1 1 auto;min-width:0;align-self:flex-end;
    margin:0!important;text-align:left
  }
  #people.is-editorial .msg-cap-name{text-indent:0}
}
/* 柱が細い幅（901〜1280px）では、名前を額の右に置く余裕がないので、額の下に置く */
@media(min-width:901px) and (max-width:1280px){
  #people.is-editorial .msg-stage{flex-direction:column!important;justify-content:space-between!important;gap:clamp(8px,1vw,12px)}
  #people.is-editorial .msg-stage .message-portrait-wrap{
    /* 正方形のまま。一辺は柱の幅か「段の高さ − 名前の2行ぶん」の小さいほう */
    width:min(100cqw,calc(100cqh - 52px))!important;flex:none!important;
    align-self:center!important;aspect-ratio:1/1!important
  }
  #people.is-editorial .msg-caption{flex:none;align-self:stretch;text-align:center}
  #people.is-editorial .msg-cap-name{text-indent:.32em}
}

/* 動画すぐ下の帯：3件を横に並べず、下へ3行に続ける（2026-10-21） */
@media(min-width:901px){
  .news-strip-in{align-items:flex-start;padding-top:16px;padding-bottom:16px}
  .news-strip-label{margin-top:7px}
  .news-strip-all{margin-top:6px}
  .news-strip-list{flex-direction:column}
  .news-strip-list li{flex:none}
  .news-strip-list li + li{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .news-strip-list a{padding:7px 0}
  .news-strip-list time{width:6.2em}
}

/* =========================================================
   トップ：PROFILE の下に「プロフィールの詳細」（団体概要の代表の項目へ）2026-10-22
   ========================================================= */
#people.is-editorial .profile-links{display:flex;flex-wrap:wrap;gap:8px 22px}

/* =========================================================
   団体概要：代表のプロフィール（2026-10-22）
   ========================================================= */
.about-rep{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:30px 6%;margin-top:80px;
  background:#fff;border:1px solid var(--line);padding:56px 5% 50px;scroll-margin-top:110px
}
.about-rep-head .kicker{display:block;margin-bottom:14px}
.about-rep-head h2{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(clamp(26px,2.8vw,40px) * var(--fs-heading));line-height:1.3;letter-spacing:-.04em
}
.about-rep-body{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:28px 34px;align-items:start}
.about-rep-photo{margin:0;background:#f3efe6;border:1px solid var(--ink);box-shadow:inset 0 0 0 4px #f3efe6,inset 0 0 0 5px rgba(16,27,37,.5);padding:12px}
.about-rep-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center top;filter:grayscale(1) sepia(.12) contrast(1.04)}
.about-rep-title{margin:0;font-size:calc(10.5px * var(--fs-body));font-weight:700;letter-spacing:.06em;color:var(--muted)}
.about-rep-name{margin:6px 0 14px;font-family:"Noto Serif JP",serif;font-weight:700;font-size:calc(clamp(24px,2.4vw,32px) * var(--fs-heading));letter-spacing:.2em}
.about-rep-meta{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 20px}
.about-rep-meta div{display:flex;gap:.8em;font-size:calc(11.5px * var(--fs-body))}
.about-rep-meta dt{color:var(--muted);font-weight:700}
.about-rep-meta dd{margin:0;font-weight:700}
.about-rep-list{margin:0;border-top:1px solid var(--line)}
.about-rep-list > div{display:grid;grid-template-columns:7.5em 1fr;gap:6px 18px;padding:14px 0;border-bottom:1px solid var(--line)}
.about-rep-list dt{font-size:calc(11px * var(--fs-body));font-weight:700;color:var(--muted);letter-spacing:.06em}
.about-rep-list dd{margin:0;font-size:calc(12px * var(--fs-body));line-height:1.85;font-weight:600;color:var(--ink)}
.about-rep-list ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.about-rep-list ul li{position:relative;padding-left:1em}
.about-rep-list ul li::before{content:"・";position:absolute;left:0}
.about-rep-list ul.is-career li{padding-left:0;display:grid;grid-template-columns:8em 1fr;gap:12px}
.about-rep-list ul.is-career li::before{content:none}
.about-rep-when{color:var(--muted);font-weight:700}
.about-rep-links{margin:18px 0 0}
.about-rep-links a{font-size:calc(11px * var(--fs-body));font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.about-rep-links a::after{content:" →"}
@media(max-width:900px){
  .about-rep{grid-template-columns:1fr;margin-top:48px;padding:36px 24px 30px}
  .about-rep-body{grid-template-columns:1fr}
  .about-rep-photo{max-width:200px}
  .about-rep-list > div{grid-template-columns:1fr;gap:4px}
  .about-rep-list ul.is-career li{grid-template-columns:1fr;gap:0}
}
/* 代表のプロフィール：見出しは上、写真と本文はその下に全幅で */
.about-rep{grid-template-columns:1fr;gap:26px}
.about-rep-body{grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:28px clamp(28px,4vw,56px)}
.about-rep-main{min-width:0}
.about-rep-list > div{grid-template-columns:8em minmax(0,1fr)}
.about-rep-list ul.is-career li{grid-template-columns:9em minmax(0,1fr)}
@media(max-width:900px){
  .about-rep-body{grid-template-columns:1fr}
  .about-rep-list > div{grid-template-columns:1fr}
  .about-rep-list ul.is-career li{grid-template-columns:1fr}
}

/* =========================================================
   会員ページ：対象（会員グループ）ごとのタブと、お知らせ・動画・資料（2026-10-24）
   ========================================================= */
.members-bar-note{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}
.mg-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;border-bottom:2px solid var(--ink);padding-bottom:0}
.mg-tab{
  display:inline-block;padding:12px 22px;border:1px solid var(--line);border-bottom:0;
  border-radius:10px 10px 0 0;background:#fff;color:var(--ink);text-decoration:none;
  font-weight:700;font-size:15px;margin-bottom:-2px
}
.mg-tab.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.mg-sec{margin:0 0 70px}
.mg-sec[hidden]{display:none!important}
.mg-head{margin:0 0 26px}
.mg-kicker{display:block;font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--muted)}
.mg-head h3{margin:6px 0 8px;font-family:"Noto Serif JP",serif;font-size:clamp(24px,2.6vw,34px);font-weight:700}
.mg-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}
.mg-unset{margin-top:10px!important;padding:10px 14px;background:#fff7e0;border-radius:8px;color:#6b5200!important}
.mg-block{margin:0 0 40px}
.mg-label{margin:0 0 14px;font-size:13px;letter-spacing:.12em;font-weight:800;padding-left:12px;border-left:4px solid var(--ink)}
.mg-notices{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mg-notices li{border-bottom:1px solid var(--line)}
.mg-notices summary{display:flex;gap:18px;align-items:baseline;padding:16px 4px;cursor:pointer;list-style:none}
.mg-notices summary::-webkit-details-marker{display:none}
.mg-notices summary::after{content:"＋";margin-left:auto;color:var(--muted);font-weight:700}
.mg-notices details[open] summary::after{content:"－"}
.mg-date{flex:none;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.mg-title{font-weight:700;font-size:15px;line-height:1.6}
.mg-notice-body{padding:0 4px 18px;font-size:14px;line-height:1.9}
.mg-notice-body p{margin:0 0 .8em}
.mg-files{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mg-files li{display:grid;gap:4px}
.mg-from{font-size:12px;color:var(--muted)}
@media(max-width:900px){
  .mg-tab{padding:10px 14px;font-size:14px}
  .mg-notices summary{flex-wrap:wrap;gap:4px 12px}
}

/* =========================================================
   会員ページ：デザインの見直し（2026-10-25）
   参考：22art.jp（白地に黒の太い罫線、英語ラベル＋（日本語）の見出し、
   丸いピルの切り替え、細い罫線で区切った一覧、丸の中の矢印）
   色はこのサイトの紺（--ink / --navy）と薄い青（--blue）のまま
   ========================================================= */
.members-page{--mp-en:"Geist","Helvetica Neue",Arial,sans-serif}
.members-page .mp-en{font-family:var(--mp-en);font-weight:600;letter-spacing:.02em}
.members-page .mp-ja{font-size:.62em;font-weight:500;letter-spacing:.06em;margin-left:.5em;color:var(--ink)}

/* 見出し：英語ラベル → 大きな見出し → パンくず → 太い罫線 */
.members-page .members-head{border-bottom:6px solid var(--ink);padding-bottom:34px;margin-bottom:52px}
.members-page .members-head .kicker{
  font-family:var(--mp-en);font-size:calc(15px * var(--fs-heading));font-weight:600;letter-spacing:.04em;
  text-transform:none;color:var(--ink);margin-bottom:10px
}
.members-page .members-head h1{
  font-family:"Noto Serif JP",serif;font-weight:700;letter-spacing:-.02em;
  font-size:calc(clamp(36px,5vw,64px) * var(--fs-heading));line-height:1.2;margin:0 0 18px
}
.members-page .members-head .breadcrumb{margin:0;padding:0}

/* ログイン中の帯 */
.members-page .members-bar{border:0;border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:56px;background:none}
.members-page .members-bar a{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:999px;
  padding:7px 8px 7px 16px;font-size:12px;transition:background .25s,color .25s
}
.members-page .members-bar a:after{content:"→";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px}
.members-page .members-bar a:hover{background:var(--ink);color:#fff}
.members-page .members-bar a:hover:after{background:#fff;color:var(--ink)}

/* 「CONTENTS（会員向けコンテンツ）」 */
.members-page .members-welcome{
  font-family:inherit;font-weight:400;letter-spacing:0;
  font-size:calc(clamp(22px,2.2vw,28px) * var(--fs-heading));
  margin:0 0 26px
}

/* 対象の切り替え：丸いピル（選んでいるものは黒） */
.members-page .mg-tabs{border:0;gap:10px;margin:0 0 54px}
.members-page .mg-tab{
  border:1px solid var(--ink);border-radius:999px;margin:0;padding:9px 22px;
  font-size:13px;font-weight:600;background:#fff;color:var(--ink);transition:background .25s,color .25s
}
.members-page .mg-tab:hover{background:var(--blue)}
.members-page .mg-tab.is-on{background:var(--ink);color:#fff}

/* 対象の見出し */
.members-page .mg-head{margin:0 0 44px}
.members-page .mg-kicker{font-family:var(--mp-en);font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:500}
.members-page .mg-head h3{font-size:calc(clamp(28px,3.4vw,46px) * var(--fs-heading));margin:4px 0 10px;letter-spacing:-.02em}

/* 各ブロックの見出し「NEWS（お知らせ）」 */
.members-page .mg-block{margin:0 0 64px}
.members-page .mg-label{
  border:0;padding:0;margin:0 0 18px;letter-spacing:0;font-weight:400;
  font-size:calc(19px * var(--fs-heading));display:flex;align-items:baseline
}

/* 丸の中の矢印 */
.members-page .mp-arrow{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--ink);margin-left:auto;transition:background .25s,color .25s,transform .25s
}
.members-page .mp-arrow:before{content:"→";font-size:12px;line-height:1}

/* お知らせ・資料の一覧：細い罫線で区切った行（日付｜ピル｜タイトル｜矢印） */
.members-page .mg-notices,
.members-page .mg-files{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);display:block}
.members-page .mg-notices li,
.members-page .mg-files li{border-bottom:1px solid var(--line);display:block}
.members-page .mg-notices summary,
.members-page .mg-file-row{
  display:flex;align-items:center;gap:22px;padding:20px 4px;color:var(--ink);text-decoration:none;cursor:pointer
}
.members-page .mg-notices summary::after,
.members-page .mg-notices details[open] summary::after{content:none;display:none}
.members-page .mg-sec{padding:0}
.members-page .mg-notices summary .mp-arrow{transform:rotate(90deg)}
.members-page .mg-notices details[open] summary .mp-arrow{transform:rotate(-90deg);background:var(--ink);color:#fff}
.members-page .mg-date{
  font-family:var(--mp-en);font-size:13px;letter-spacing:.04em;color:var(--ink);
  padding-right:22px;border-right:1px solid var(--line);min-width:7.6em
}
.members-page .mg-pill{
  flex:none;font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1;
  padding:6px 14px;border-radius:999px;background:var(--blue);color:var(--navy);
  min-width:7.5em;text-align:center
}
.members-page .mg-pill.is-file{font-family:var(--mp-en);min-width:4.5em;background:#fff;border:1px solid var(--ink);color:var(--ink)}
.members-page .mg-title{font-size:14.5px;font-weight:500;line-height:1.65;min-width:0}
.members-page .mg-title .mg-from{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.members-page .mg-size{flex:none;font-family:var(--mp-en);font-size:12px;color:var(--muted);margin-left:auto}
.members-page .mg-size + .mp-arrow{margin-left:0}
.members-page .mg-notices summary:hover .mp-arrow,
.members-page .mg-file-row:hover .mp-arrow{background:var(--ink);color:#fff}
.members-page .mg-file-row:hover .mg-title{text-decoration:underline;text-underline-offset:4px}
.members-page .mg-notice-body{padding:4px 4px 26px calc(7.6em + 45px);font-size:14px;line-height:2}

/* 動画のカード */
.members-page .members-grid{gap:28px}
.members-page .members-card{border:1px solid var(--ink);border-radius:0;padding:24px}
.members-page .members-date{font-family:var(--mp-en);font-size:12.5px;letter-spacing:.04em;color:var(--ink);font-weight:500}
.members-page .members-card h3{font-size:calc(16px * var(--fs-heading))}
.members-page .members-empty{border:1px solid var(--line);border-top:1px solid var(--ink)}

/* ログイン前 */
.members-page .members-gate{padding:0}
.members-page .members-note{background:none;border:0;border-top:1px solid var(--ink);padding:22px 0 0;margin-top:36px}
.members-page .members-login{border:1px solid var(--ink);border-top:6px solid var(--ink)}
.members-page .members-login input[type=submit]{border-radius:999px;padding:16px 24px}
.members-page .members-contact-link{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:999px;padding:9px 10px 9px 20px
}
.members-page .members-contact-link:hover{background:var(--ink);color:#fff}

@media(max-width:900px){
  .members-page .members-head{border-bottom-width:4px;margin-bottom:36px}
  .members-page .mg-tabs{margin-bottom:40px}
  .members-page .mg-tab{padding:8px 16px;font-size:12.5px}
  .members-page .mg-notices summary,
  .members-page .mg-file-row{flex-wrap:wrap;gap:8px 12px;padding:16px 2px;position:relative;padding-right:40px}
  .members-page .mg-date{border:0;padding:0;min-width:0}
  .members-page .mg-pill{min-width:0}
  .members-page .mg-title{flex:1 1 100%;order:3}
  .members-page .mg-size{order:2;margin-left:0}
  .members-page .mg-notices summary .mp-arrow,
  .members-page .mg-file-row .mp-arrow{position:absolute;right:2px;top:50%;margin:-14px 0 0}
  .members-page .mg-notices summary .mp-arrow{transform:rotate(90deg)}
  .members-page .mg-notice-body{padding:0 2px 20px}
}

/* 会員ページ：件数と「もっと見る」、動画は3列（2026-10-25。対象ごとに動画30本ほどまでを想定） */
.members-page [data-more] > [hidden]{display:none!important}
.members-page .mg-count{margin-left:auto;font-family:var(--mp-en);font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.members-page .mg-more{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin:18px 0 0;
  padding:14px 18px;border:1px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .25s,color .25s
}
.members-page .mg-more .mg-more-rest{font-family:var(--mp-en);font-weight:500;font-size:12px;color:var(--muted)}
.members-page .mg-more .mp-arrow{margin-left:0;transform:rotate(90deg);width:24px;height:24px}
.members-page .mg-more:hover{background:var(--ink);color:#fff}
.members-page .mg-more:hover .mg-more-rest{color:#cfd6db}
.members-page .mg-more:hover .mp-arrow{border-color:#fff}
.members-page .mg-videos{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.members-page .mg-videos .members-card{padding:18px 18px 20px}
.members-page .mg-videos .members-card h3{font-size:calc(14.5px * var(--fs-heading));margin-bottom:10px}
.members-page .mg-videos .members-video{margin:6px 0 10px}
.members-page .mg-videos .members-desc{font-size:12px;line-height:1.85}
@media(max-width:1000px){ .members-page .mg-videos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){ .members-page .mg-videos{grid-template-columns:1fr} }

/* トップの研修の円：講座名（日本語）が円の縁で切れないように（2026-10-25。円を「3つの講座＋進め方」に変えたため） */
.sem-orb:not(.is-more) .sem-orb-label i{ letter-spacing:0 }
@media(max-aspect-ratio:11/10),(max-width:940px) and (max-height:500px){
  .sem-track:not(.is-flat) .sem-orb:not(.is-more) .sem-orb-label{ left:4%;right:4% }
  .sem-track:not(.is-flat) .sem-orb:not(.is-more) .sem-orb-label i{ font-size:calc(.72em * var(--fs-body)) }
  .sem-track:not(.is-flat) .sem-orb.is-more .sem-orb-label i{ font-size:calc(.68em * var(--fs-body));letter-spacing:0 }
}

/* メニューに「こどもたちへ」「寄付会員」が増えたぶん（2026-10-30）
   横幅がぎりぎりになる画面で、項目の間隔・文字・ロゴを少し詰める。
   Local の実際の画面で、901〜1960px を5pxずつ、ロゴとメニューが重ならず右端のボタンがはみ出さないことを確かめた */
@media(max-width:1859px) and (min-width:1461px){
  .nav{gap:16px!important;font-size:calc(10.5px * var(--fs-body))!important}
}
@media(max-width:1540px) and (min-width:1461px){
  .nav{gap:11px!important;font-size:calc(10px * var(--fs-body))!important}
}
@media(max-width:1460px) and (min-width:1241px){
  .nav{gap:11px!important;font-size:calc(9px * var(--fs-body))!important}
}
@media(max-width:1240px) and (min-width:901px){
  .header{padding:0 18px!important}
  .nav{gap:10px!important;font-size:calc(9px * var(--fs-body))!important}
  .logo .logo-img{height:30px!important}
  .menu{margin-left:10px!important}
}
@media(max-width:1300px) and (min-width:1241px){
  .logo .logo-img{height:32px!important}
}
@media(max-width:1180px) and (min-width:901px){
  .logo .logo-img{display:none!important}
}
@media(max-width:980px) and (min-width:901px){
  .nav{gap:6px!important;font-size:calc(8.6px * var(--fs-body))!important}
}

/* 代表の写真（2026-10-30）
   横に広い画面では本文が2段組みになって段が低くなり、写真（＝段の高さの正方形）が小さくなりすぎていた。
   本文の段に最低の高さを持たせ、写真の柱もその高さになるようにする（1920px で約365px。柱の幅の64%が上限なのは同じ）
   ※写真の柱そのものに min-height を付けると、柱の中の cqh が 0 になって写真が消えるので、本文の側に付ける */
@media(min-width:1281px){
  #people.is-editorial .message-copy{min-height:min(19vw,400px)!important}
}

/* 代表のあいさつの本文を大きく（2026-10-30）
   パソコンでは 11.4px → 画面の幅に合わせて 12.4px〜14.5px（1440px で12.4px、1920px で14.5px）。スマホは 13px → 13.5px
   ※実際の大きさは、これに「文字の大きさ（本文）」の設定（--fs-body）を掛けたもの */
@media(min-width:901px){
  #people.is-editorial .message-copy > p{font-size:calc(clamp(12.4px,.8vw,14.5px) * var(--fs-body))!important}
}
@media(max-width:900px){
  #people.is-editorial .message-copy > p{font-size:calc(13.5px * var(--fs-body))!important}
}

/* 動画すぐ下のお知らせの帯：左寄せにして、余った幅に本文の書き出しを出す（2026-10-30）
   左の端は、すぐ下の入口の帯（こどもたちへ・担当者の方へ）にそろえる */
.news-strip-in{max-width:none!important;margin:0!important;padding-left:clamp(18px,3.2vw,44px)!important;padding-right:clamp(18px,3.2vw,44px)!important}
.news-strip-list a{align-items:baseline}
.news-strip-title{flex:0 1 auto;max-width:62%}
.news-strip-ex{flex:1 1 0;min-width:0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-strip-ex:before{content:"";display:inline-block;width:1px;height:.9em;margin:0 14px 0 4px;vertical-align:-1px;background:rgba(255,255,255,.3)}
.news-strip-list a:hover .news-strip-ex{color:rgba(255,255,255,.85)}
@media(max-width:900px){
  .news-strip-title{max-width:none}
  .news-strip-ex{display:none}
}

/* =========================================================
   スマホのトップ上部を整理（2026-11-08 依頼「携帯の表記がごちゃごちゃ」）
   ・動画の下の2つの入口ボタンを、縦2段から横1列の小さめに
   ・お知らせの帯は2件までにし、題名は2行で切る
   ========================================================= */
@media(max-width:900px){
  .is-intro .hero-entry.is-side{
    flex-direction:row!important;gap:10px!important;
    padding:14px 16px 16px!important
  }
  .is-intro .hero-entry.is-side .hero-entry-btn{
    flex:1 1 0!important;min-width:0;
    padding:11px 14px!important;font-size:13.5px;line-height:1.4
  }
  .is-intro .hero-entry.is-side .hero-entry-copy strong{font-size:13.5px}
  .news-strip-in{padding:14px 16px 12px!important;gap:10px 12px!important}
  .news-strip-list li:nth-child(n+3){display:none}
  .news-strip-list a{padding:8px 0!important}
  .news-strip-title{
    display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    white-space:normal!important;font-size:14px!important;line-height:1.6!important
  }
}
@media(max-width:380px){
  .is-intro .hero-entry.is-side .hero-entry-btn{padding:10px 10px!important;font-size:12.5px}
  .is-intro .hero-entry.is-side .hero-entry-copy strong{font-size:12.5px}
}

/* お問い合わせの01〜07：いま選んでいる内容に印（2026-11-09） */
.entry-steps a.is-current{padding-left:12px}
.entry-steps a.is-current .num,.entry-steps a.is-current .label{color:#1d3f91}
.entry-steps a.is-current .arrow{color:#1d3f91}