/* 余白の多い上品なコーポレートサイト。ロゴはトリオキャリアのものをそのまま使い、色はロゴの青緑（#00919c）と紺（#005c87）から取る。
   明るい1テーマで作る（会社サイトの見本のため） */
:root{
  --ink:#1f2a33; --text:#4a5560; --muted:#8a949c; --bg:#fbfaf7; --bg2:#eef4f4; --line:#dfe5e6;
  --teal:#00919c; --navy:#005c87;
  --c1:#d99a77; --c2:#7fb59a; --c3:#a593d4; --c4:#7aa9d1;
  --memo:#fff6bf; --memo-ink:#5c4b00;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Meiryo","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  --en:"Jost","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.9;letter-spacing:.04em}
a{color:inherit}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--ink);line-height:1.5;text-wrap:balance;font-family:var(--mincho)}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}
.en{font-family:var(--en);font-weight:400;letter-spacing:.18em;text-transform:uppercase}
.eyebrow{font-family:var(--en);font-size:13px;color:var(--teal);font-weight:500;letter-spacing:.32em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:22px;height:8px;background:radial-gradient(circle,var(--teal) 3px,transparent 3.5px) 0 0/8px 8px repeat-x}
.eyebrow+.sub{font-family:var(--mincho);font-size:clamp(24px,2.8vw,34px);color:var(--ink);margin-top:10px;letter-spacing:.1em;line-height:1.4}
section{scroll-margin-top:70px}

/* 試作の帯 */
.proto{background:var(--memo);color:var(--memo-ink);font:500 12px/1.6 var(--sans);text-align:center;padding:5px 12px}

/* ヘッダー */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:3px solid var(--teal);box-shadow:0 1px 0 var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:#fff}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:20px}
.hd .logo img{width:170px;height:auto}
.gnav{display:flex;gap:28px;font-size:13.5px;letter-spacing:.1em;font-weight:500}
.gnav a{text-decoration:none;color:var(--ink);position:relative;padding:6px 0}
.gnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.gnav a:hover::after,.gnav a:focus-visible::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.menu-btn span{position:absolute;left:9px;right:9px;height:1px;background:var(--ink);transition:transform .3s,opacity .3s}
.menu-btn span:nth-child(1){top:14px}.menu-btn span:nth-child(2){top:20px}.menu-btn span:nth-child(3){top:26px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .menu-btn{display:block}
  .gnav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:#fff;padding:6px max(20px,env(safe-area-inset-right,0px)) 18px max(20px,env(safe-area-inset-left,0px));display:none}
  .gnav.open{display:flex}
  .gnav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
  .hd .logo img{width:150px}
}

/* ヒーロー：左に縦書きのことば、右に写真と動画（表示されるたびに最初から） */
.hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);min-height:min(82vh,760px);background:var(--bg)}
.hero .copy{position:relative;display:flex;align-items:center;justify-content:center;gap:26px;padding:40px 20px}
.hero .copy h1{writing-mode:vertical-rl;white-space:nowrap;font-size:clamp(28px,3.4vw,46px);letter-spacing:.32em;line-height:1.7;color:var(--ink)}
.hero .copy .side{writing-mode:vertical-rl;font:400 12px var(--en);letter-spacing:.42em;color:var(--teal);text-transform:uppercase}
.hero .copy .dots3{position:absolute;left:max(20px,env(safe-area-inset-left,0px));bottom:30px;display:flex;gap:7px}
.hero .copy .dots3 i{width:9px;height:9px;border-radius:50%;background:var(--teal)}
.hero .copy .dots3 i:nth-child(2){background:#2bb3a7}.hero .copy .dots3 i:nth-child(3){background:var(--navy)}
.hero .copy>*{animation:up 1.4s cubic-bezier(.2,.7,.2,1) both}
.hero .copy>*:nth-child(2){animation-delay:.3s}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.stage{position:relative;overflow:hidden;border-bottom-left-radius:120px;background:#dfe6e7}
.stage .sl{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;visibility:hidden}
.stage .sl.on{opacity:1;visibility:visible}
.stage .sl img,.stage .sl video{width:100%;height:100%;object-fit:cover}
.stage .sl img{transform:scale(1.08);transition:transform 9s ease-out}
.stage .sl.on img{transform:scale(1)}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.35));pointer-events:none}
.stage .cap{position:absolute;left:clamp(30px,8%,120px);bottom:24px;z-index:3;color:#fff;font-size:13.5px;letter-spacing:.1em}
.stage .cap .en{font-size:12px;margin-right:10px;opacity:.85}
.stage .ctrl{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:26px;z-index:3;display:flex;gap:8px}
.stage .ctrl button{background:none;border:0;padding:8px 0;cursor:pointer;width:30px}
.stage .ctrl button i{display:block;height:2px;background:rgba(255,255,255,.45);position:relative;overflow:hidden}
.stage .ctrl button.on i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:prog var(--dur,6s) linear both}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;min-height:0}
  .stage{order:-1;aspect-ratio:4/3;border-bottom-left-radius:60px}
  .stage .ctrl{bottom:auto;top:12px}
  .stage .cap{left:24px;bottom:16px;font-size:12.5px}
  .hero .copy{padding:34px 20px 30px;justify-content:flex-start;gap:16px}
  .hero .copy h1{writing-mode:horizontal-tb;font-size:26px;letter-spacing:.16em}
  .hero .copy .side{writing-mode:horizontal-tb;letter-spacing:.3em}
  .hero .copy{flex-direction:column;align-items:flex-start}
  .hero .copy .dots3{position:static;order:-1}
}

/* 4事業：横に並んだ縦長の写真。触れたものが広がる */
.panels{display:flex;gap:8px;height:clamp(380px,46vw,560px);margin-top:40px}
.panel{position:relative;flex:1;overflow:hidden;border-radius:6px;text-decoration:none;color:#fff;transition:flex 0.8s cubic-bezier(.2,.7,.2,1)}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(10,30,40,.72))}
.panels:hover .panel{flex:.8}.panels .panel:hover,.panels .panel:focus-visible{flex:2.2}
.panel:hover img{transform:scale(1.04)}
.panel .t{position:absolute;left:20px;right:20px;bottom:22px;z-index:2}
.panel .n{font:300 13px var(--en);letter-spacing:.3em;display:flex;align-items:center;gap:10px}
.panel .n::after{content:"";width:28px;height:1px;background:currentColor}
.panel h3{color:#fff;font-size:clamp(17px,1.7vw,22px);letter-spacing:.12em;margin-top:8px;white-space:nowrap}
.panel small{display:block;font-size:12.5px;letter-spacing:.06em;opacity:.9;margin-top:2px}
@media (max-width:760px){.panels{flex-direction:column;height:auto}.panel{height:180px;flex:none!important}}

/* 理念：左に大きなことば、右に説明 */
.philo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:60px;padding-block:110px 90px;align-items:start}
.philo .big{font-family:var(--mincho);font-size:clamp(30px,4vw,54px);color:var(--ink);line-height:1.5;letter-spacing:.08em}
.philo .big em{font-style:normal;color:var(--teal)}
.philo p{margin:0;font-size:15.5px;line-height:2.2}
.philo .two{display:grid;gap:0;margin-top:30px}
.philo .two div{border-top:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:110px 1fr;gap:4px 18px}
.philo .two div:last-child{border-bottom:1px solid var(--line)}
.philo .two .en{font-size:12px;color:var(--teal);grid-row:span 2;padding-top:5px}
.philo .two b{font-family:var(--mincho);font-size:19px;color:var(--ink)}
.philo .two span{font-size:14.5px;line-height:1.9}
@media (max-width:760px){.philo{grid-template-columns:1fr;gap:28px;padding-block:72px 56px}.philo .two div{grid-template-columns:1fr}.philo .two .en{grid-row:auto}}

/* ABOUT：左に写真（後ろに青緑の面をずらして重ねる）、右に文字 */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center;padding-block:40px 110px}
.about .ph{position:relative}
.about .ph::before{content:"";position:absolute;inset:28px -28px -28px 28px;background:var(--bg2);border-radius:6px}
.about .ph img{position:relative;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:6px}
.about .tx p{margin:20px 0 0;font-size:15px;line-height:2.1}
.link-more{display:inline-flex;align-items:center;gap:14px;margin-top:26px;font:500 13px var(--en);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--teal)}
.link-more::after{content:"";width:36px;height:1px;background:currentColor;transition:width .35s}
.link-more:hover::after{width:56px}
@media (max-width:800px){.about{grid-template-columns:1fr;gap:44px;padding-block:20px 72px}.about .ph::before{inset:16px -12px -16px 16px}}

/* 事業紹介 */
.biz-intro{background:var(--bg2);padding-block:96px 96px}
.biz-intro p{margin:18px 0 0;max-width:36em;font-size:15px;line-height:2.1}

.biz{padding-block:96px 20px}
.biz+.biz{border-top:1px solid var(--line)}
.bhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.bhead .n{font:300 14px var(--en);letter-spacing:.32em;display:flex;align-items:center;gap:12px}
.bhead .n::after{content:"";width:40px;height:1px;background:currentColor}
.bhead h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:.12em;margin-top:8px}
.bhead .co{font-size:13.5px;color:var(--muted);letter-spacing:.12em;margin-top:6px}
.bhead p{margin:22px 0 0;font-size:15px;line-height:2.1}
.bhead .media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/2;background:var(--bg2);box-shadow:18px 18px 0 var(--bg2)}
.bhead .media img,.bhead .media video{width:100%;height:100%;object-fit:cover}
.biz.rev .bhead .media{order:-1}
@media (max-width:860px){.bhead{grid-template-columns:1fr;gap:28px}.biz.rev .bhead .media{order:0}.biz{padding-block:72px 12px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{font:500 12.5px/1 var(--sans);letter-spacing:.06em;border:1px solid currentColor;border-radius:99px;padding:7px 12px}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:26px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:13.5px;letter-spacing:.12em;padding:12px 22px;transition:background .3s,color .3s}
.btn:hover,.btn:focus-visible{background:var(--ink);color:#fff}
.btn .u{font:400 11.5px var(--en);letter-spacing:.08em;opacity:.7}

.sub-h{font-size:15px;letter-spacing:.16em;color:var(--ink);margin:56px 0 18px;display:flex;align-items:center;gap:14px}
.sub-h::after{content:"";flex:1;height:1px;background:var(--line)}
.facs{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fac{min-width:0}
.fac .ph{aspect-ratio:3/2;overflow:hidden;position:relative;background:var(--bg2)}
.fac .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.fac:hover .ph img{transform:scale(1.04)}
.fac .ph .lg{position:absolute;right:10px;bottom:10px;width:58px;height:58px;object-fit:contain;background:#fff;border-radius:50%;padding:6px}
.fac h4{font-size:18px;margin-top:14px;letter-spacing:.06em}
.fac .open{font:400 12px var(--en);letter-spacing:.2em;color:var(--teal)}
dl.spec{display:grid;grid-template-columns:5.5em 1fr;gap:6px 12px;margin:12px 0 0;font:400 13.5px/1.7 var(--sans);color:var(--text)}
dl.spec dt{color:var(--muted)}dl.spec dd{margin:0}
.fac .links{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:13px}
.fac .links a{color:var(--navy);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
@media (max-width:760px){.facs{grid-template-columns:1fr}}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.strip figure{margin:0;overflow:hidden;position:relative}
.strip img,.strip video{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s}
.strip figure:hover img{transform:scale(1.05)}
.strip figcaption{position:absolute;left:10px;bottom:8px;color:#fff;font-size:12.5px;letter-spacing:.08em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media (max-width:640px){.strip{grid-template-columns:1fr 1fr}.strip figure:nth-child(3){display:none}}
details.more{margin-top:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.more summary{cursor:pointer;list-style:none;padding:14px 0;font-size:14px;letter-spacing:.1em;color:var(--ink);display:flex;justify-content:space-between}
details.more summary::after{content:"＋";color:var(--muted)}
details.more[open] summary::after{content:"－"}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font:400 13.5px/1.7 var(--sans);color:var(--text)}
th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
thead th{font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink)}
tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
table.fee{min-width:460px;text-align:center}table.fee th,table.fee td{text-align:center}
.note{font:400 12px/1.7 var(--sans);color:var(--muted);margin-top:8px}

/* でじるみ */
.menus{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.menu{text-align:center;font-size:12.5px;line-height:1.5;color:var(--ink)}
.menu img{aspect-ratio:1/1;height:auto;object-fit:cover;width:100%;border-radius:50%;margin-bottom:8px;transition:transform .5s}
.menu:hover img{transform:scale(1.05)}
@media (max-width:760px){.menus{grid-template-columns:repeat(3,1fr)}}
.tabs{display:flex;flex-wrap:wrap;gap:6px 18px;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;font:13.5px var(--mincho);letter-spacing:.08em;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--c3)}
.tabs button:focus-visible{outline:2px solid var(--c3);outline-offset:2px}
.office{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-top:22px;align-items:start}
.office .ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.office .bn{width:100%;aspect-ratio:4/1;object-fit:cover;margin-bottom:14px}
.office.fade{animation:fd .5s ease both}
@keyframes fd{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:760px){.office{grid-template-columns:1fr}}

/* コールセンター */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.svc div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line)}
.svc b{display:block;color:var(--ink);font-size:15px}
.svc span{display:block;font:400 13px/1.7 var(--sans);margin-top:4px}
.svc em{display:block;font-style:normal;font-size:13.5px;color:var(--navy);margin-top:4px;font-weight:500}
@media (max-width:760px){.svc{grid-template-columns:1fr}}

/* 採用 */
.recruit{background:var(--bg2);padding-block:96px}
.rc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.rc .ph{border-radius:6px;overflow:hidden;aspect-ratio:4/3;position:relative;box-shadow:-18px 18px 0 #fff}
.rc .ph img{width:100%;height:100%;object-fit:cover}
.rc .ph .tag{position:absolute;left:0;bottom:0;background:rgba(255,255,255,.92);color:var(--ink);padding:10px 18px;font-size:14px;letter-spacing:.12em}
.rc h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:.12em;margin-top:8px}
.rc p{margin:20px 0 0;font-size:15px;line-height:2.1}
@media (max-width:860px){.rc{grid-template-columns:1fr;gap:28px}}
.jobs{margin-top:44px;background:#fff;padding:8px 20px 12px}
.jobs table{min-width:680px}

/* コラム・お知らせ・SNS */
.cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
@media (max-width:900px){.cols3{grid-template-columns:1fr}}
.list{list-style:none;margin:16px 0 0;padding:0}
.list li{border-bottom:1px solid var(--line)}
.list a{display:block;padding:14px 0;text-decoration:none;font-size:14px;line-height:1.7;transition:color .3s,padding .3s}
.list a:hover{color:var(--teal);padding-left:6px}
.list time{display:block;font:400 12.5px var(--en);letter-spacing:.12em;color:var(--teal)}
.sns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sns a{display:inline-flex;align-items:center;gap:8px;font:400 13px var(--sans);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:8px 14px;transition:border-color .3s}
.sns a:hover{border-color:var(--ink)}
.sns i{font-style:normal;font-weight:700;color:#fff;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px}

/* 会社概要・お問い合わせ */
.company{padding-block:96px}
.co-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;margin-top:36px}
dl.co{display:grid;grid-template-columns:7em 1fr;margin:0;font:400 14px/1.8 var(--sans)}
dl.co dt,dl.co dd{border-bottom:1px solid var(--line);padding:12px 0;margin:0}
dl.co dt{color:var(--ink)}
.contact{background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;padding:36px 32px;border-radius:6px}
.contact .eyebrow{color:#fff}.contact .eyebrow::before{background:radial-gradient(circle,#fff 3px,transparent 3.5px) 0 0/8px 8px repeat-x}
.contact .tel{font:400 32px/1.2 var(--en);letter-spacing:.08em;margin-top:18px;user-select:all}
.contact small{display:block;font:400 12.5px var(--sans);opacity:.8;margin-top:4px}
.contact a.btn{border-color:#fff;color:#fff}
.contact a.btn:hover{background:#fff;color:var(--ink)}
@media (max-width:860px){.co-grid{grid-template-columns:1fr}}

/* フッター：紺 */
.ft{background:#16303d;color:#c9d6db;padding-block:60px 30px}
.ft .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:40px}
.ft .logo{display:inline-block;background:#fff;padding:10px 14px;border-radius:4px}
.ft .logo img{width:190px}
.ft .addr{font-size:13px;line-height:1.9;margin-top:18px}
.fnav{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px;font-size:13.5px;align-content:start}
.fnav a{text-decoration:none;color:#fff;display:flex;flex-direction:column;padding:10px 0;border-top:1px solid rgba(255,255,255,.15)}
.fnav a span:first-child{font:400 11px var(--en);letter-spacing:.24em;text-transform:uppercase;color:#7fc8cd}
.copy{font:400 11.5px var(--en);letter-spacing:.14em;margin-top:24px;color:#8fa6ae}
@media (max-width:760px){.ft .wrap{grid-template-columns:1fr}.fnav{grid-template-columns:1fr 1fr}}

/* 試作メモ（まとめて最後に） */
.memo{background:var(--memo);color:var(--memo-ink);font:400 13px/1.8 var(--sans);padding:20px 24px;margin-top:40px}
.memo b{font-weight:700}
.memo ul{margin:8px 0 0;padding-left:1.2em}

/* スクロールで出る動き（最初から見えている状態から、少し浮き上がるだけ） */
.rv.on{animation:rv 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rv{from{opacity:.25;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== 複数ページ用の追加 ===== */
.gnav a[aria-current="page"]{color:var(--teal)}
.gnav a[aria-current="page"]::after{transform:scaleX(1)}
.dd{position:relative}
.ddm{position:absolute;left:-14px;top:100%;background:#fff;box-shadow:0 12px 30px -12px rgba(0,40,60,.3);border-top:2px solid var(--teal);padding:8px 0;min-width:200px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s,transform .25s,visibility .25s}
.dd:hover .ddm,.dd:focus-within .ddm{opacity:1;visibility:visible;transform:none}
.ddm a{display:block;padding:8px 16px;font-size:13px}
.ddm a::after{display:none}
.ddm a:hover{background:var(--bg2)}
@media (max-width:900px){.dd{display:block}.ddm{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0}.ddm a{border-bottom:1px solid var(--line);padding:10px 0;font-size:14px}}
.gnav{gap:24px}
@media (max-width:1160px) and (min-width:901px){.gnav{gap:16px;font-size:12.5px}.hd .logo img{width:150px}}

/* ページ見出し */
.phead{background:linear-gradient(135deg,#eaf4f4,#f6f8f7);padding-block:64px 48px;border-bottom:1px solid var(--line)}
.phead h1.sub{font-size:clamp(28px,3.4vw,42px)}
.phead p{margin:14px 0 0;max-width:40em;font-size:15px}
.crumb{font-size:12.5px;color:var(--muted);padding-block:14px 0}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--teal)}

/* 地図 */
.mapsec{padding-block:56px 64px;background:linear-gradient(180deg,var(--bg),#eef5f5)}
.mapgrid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.9fr);gap:36px;align-items:center}
.maptx p{margin:18px 0 0;font-size:15px;line-height:2}
@media (max-width:960px){.mapgrid{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.stats div{border-left:2px solid var(--teal);padding-left:12px}
.stats b{display:block;font:300 clamp(34px,4vw,48px)/1.1 var(--en);color:var(--ink);font-variant-numeric:tabular-nums}
.stats span{font-size:12.5px;color:var(--muted)}
section .stats{margin-bottom:26px}
@media (min-width:961px){.wrap>.stats{grid-template-columns:repeat(4,1fr)}}
.mapbox{min-width:0}
.maps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;align-items:start}
.maps figure{margin:0;background:#fff;border-radius:8px;padding:10px;box-shadow:0 18px 40px -26px rgba(0,60,80,.45);position:relative}
.maps figcaption{position:absolute;left:16px;top:12px;z-index:2;font:500 11px var(--en);letter-spacing:.2em;color:var(--teal);background:rgba(255,255,255,.85);padding:2px 8px;border-radius:99px}
@media (max-width:640px){.maps{grid-template-columns:1fr}}
.kmap{width:100%;height:auto;display:block;overflow:hidden}
.kmap .sea{fill:#e6f1f4}
.kmap .pref{fill:#f7f5ef;stroke:#c9d6d8;stroke-width:.8}
.kmap .pref.on{fill:#fff}
.kmap .ward{fill:none;stroke:#d6e0e2;stroke-width:.6}
.kmap .plabel{font:500 11px var(--sans);fill:#9aa9ad;letter-spacing:.1em;text-anchor:middle}
.kmap .insetbox{fill:none;stroke:var(--teal);stroke-width:1.2;stroke-dasharray:4 3}
.kmap .link{fill:none;stroke:var(--teal);stroke-width:1.1;opacity:.45;stroke-dasharray:600;stroke-dashoffset:600}
.kmap.go .link{animation:draw 1.6s ease forwards;animation-delay:calc(.4s + var(--i)*.12s)}
@keyframes draw{to{stroke-dashoffset:0}}
.kmap .pin{cursor:pointer}
.kmap .pin path{fill:var(--c)}
.kmap .pin .drop{transform-origin:0 0}
.kmap.go .pin .drop{animation:drop .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.2s + var(--i)*.12s)}
@keyframes drop{from{transform:translateY(-26px) scale(.4);opacity:0}to{transform:none;opacity:1}}
.kmap .pin .pulse{fill:var(--c);opacity:0}
.kmap.go .pin .pulse{animation:pulse 2.6s ease-out infinite;animation-delay:calc(1.2s + var(--i)*.15s)}
@keyframes pulse{0%{opacity:.45;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
.kmap .pin .tip{font:700 11px var(--sans);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:3px;opacity:0;transition:opacity .2s}
.kmap .pin:hover .tip,.kmap .pin:focus .tip{opacity:1}
.kmap.tmap .pin .tip,.kmap.mini .pin .tip{opacity:1}
.kmap .pin.off{opacity:.12;pointer-events:none}
.kmap .link.off{opacity:0}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lg-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 12px;font:500 12.5px var(--sans);color:var(--ink);cursor:pointer}
.lg-btn i{width:10px;height:10px;border-radius:50%}
.lg-btn[aria-pressed="false"]{opacity:.45}
.lg-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* 施設カード */
.fgroup{margin-top:36px}
.gh{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:.08em}
.gh i{width:12px;height:12px;border-radius:50%}
.gh small{font:400 12.5px var(--sans);color:var(--muted);margin-left:6px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
.fcard{display:flex;flex-direction:column;background:#fff;border-radius:6px;overflow:hidden;text-decoration:none;box-shadow:0 10px 26px -20px rgba(0,40,60,.5);transition:transform .35s,box-shadow .35s}
.fcard:hover,.fcard:focus-visible{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(0,40,60,.5)}
.fcard .ph{position:relative;aspect-ratio:3/2;overflow:hidden}
.fcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.fcard:hover .ph img{transform:scale(1.05)}
.bz{display:inline-block;font:500 11.5px var(--sans);color:#fff;background:var(--c);border-radius:99px;padding:3px 10px;letter-spacing:.06em}
.fcard .ph .bz{position:absolute;left:10px;top:10px;color:#fff;font-size:11.5px;line-height:1.4}
.fcard .in{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.fcard b{font:600 16px var(--mincho);color:var(--ink);letter-spacing:.04em}
.fcard span{font-size:12.5px;color:var(--muted);line-height:1.6}
.fcard em{font-style:normal;font-size:12.5px;color:var(--teal);margin-top:4px}

/* 事業カード（事業紹介ページ） */
.bcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.bcard{display:grid;grid-template-columns:auto 1fr auto;gap:4px 18px;align-items:center;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px 24px;transition:border-color .3s,transform .3s}
.bcard:hover{border-color:var(--teal);transform:translateY(-3px)}
.bcard .n{font:300 13px var(--en);letter-spacing:.3em;color:var(--teal);grid-row:span 2}
.bcard b{font:600 20px var(--mincho);color:var(--ink)}
.bcard small{font-size:13px;color:var(--muted)}
.bcard em{font-style:normal;color:var(--teal);grid-row:1/3;grid-column:3}
@media (max-width:700px){.bcards{grid-template-columns:1fr}}

/* 施設ページ */
.fhero{background:linear-gradient(135deg,#eaf4f4,#f7f8f6);padding-block:48px}
.fh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:center}
.fhero h1{font-size:clamp(24px,3vw,36px);letter-spacing:.06em;margin-top:12px}
.fhero .addr{margin:12px 0 0;font-size:15px;color:var(--ink)}
.fhero .acc{margin:4px 0 0;font-size:14px}
.fh-btn{display:flex;flex-wrap:wrap;gap:10px}
.fh-btn .btn{margin-top:18px}
.fhero .ph img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;box-shadow:18px 18px 0 #dcebeb}
@media (max-width:800px){.fh-grid{grid-template-columns:1fr;gap:26px}.fhero .ph{order:-1}}
.fbody{padding-block:30px 80px}
.summary{background:#fff;border-left:3px solid var(--teal);border-radius:4px;padding:20px 24px;box-shadow:0 10px 26px -22px rgba(0,40,60,.5)}
.summary h2{font-size:18px;letter-spacing:.08em}
.summary ul{margin:10px 0 0;padding-left:1.2em;font-size:14.5px;line-height:1.9}
.summary .upd{margin:10px 0 0;font-size:12px;color:var(--muted)}
table.info th{width:8em;color:var(--muted);font-weight:500}
table.info td{color:var(--ink)}
.accgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start}
.acclist{margin:0;padding-left:1.2em;font-size:14.5px;line-height:2}
.accgrid .links{display:flex;flex-wrap:wrap;gap:10px}
.minimap{margin:0;background:#fff;border-radius:8px;padding:8px;box-shadow:0 14px 30px -22px rgba(0,60,80,.5)}
@media (max-width:760px){.accgrid{grid-template-columns:1fr}}
.fgal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fgal figure{margin:0}
.fgal figure.wide{grid-column:1/-1}
.fgal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.fgal figure.wide img{aspect-ratio:4/1}
.fgal figcaption{font-size:12.5px;color:var(--muted);margin-top:4px}
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;font-weight:500;color:var(--ink);position:relative}
.qa summary::before{content:"Q.";font:500 15px var(--en);color:var(--teal);margin-right:10px}
.qa summary::after{content:"＋";position:absolute;right:0;color:var(--muted)}
.qa[open] summary::after{content:"－"}
.qa p{margin:0 0 16px;font-size:14.5px;line-height:1.9;padding-left:28px}

/* あゆみ */
.tl{list-style:none;margin:30px 0 0;padding:0 0 0 22px;border-left:1px solid var(--line)}
.tl li{position:relative;padding:0 0 22px 18px;display:grid;grid-template-columns:90px 1fr;gap:14px}
.tl li::before{content:"";position:absolute;left:-28px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px #dff0f0}
.tl time{font:400 15px var(--en);color:var(--teal);letter-spacing:.08em}
@media (max-width:520px){.tl li{grid-template-columns:1fr;gap:0}}

/* お知らせ・お問い合わせ */
.newsec{padding-block:80px 30px}
.ctasec{padding-block:30px 90px}
.ctasec .contact{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}
.ctasec .contact p{margin:10px 0 0;font-size:14.5px;opacity:.9}
@media (max-width:760px){.ctasec .contact{grid-template-columns:1fr}}
.ffac{margin-top:26px;font-size:12.5px}
.ffac>span{font:400 11px var(--en);letter-spacing:.24em;color:#7fc8cd}
.ffac ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.ffac a{color:#c9d6db;text-decoration:none}
.ffac a:hover{color:#fff}
.hero{min-height:min(62vh,560px)}
@media (prefers-reduced-motion:reduce){.kmap .link{stroke-dashoffset:0}}

/* トップのスライド：動画の後ろに静止画を敷く（動画が読み込めない端末でも絵が出る） */
.stage .sl .pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none!important}
.stage .sl video{position:absolute;inset:0}
@media (max-width:760px){.stage .ctrl button{width:22px}.stage .ctrl{gap:6px}}

.hero .copy h1{font-size:clamp(24px,2.6vw,36px);letter-spacing:.24em}
@media (max-width:760px){.hero .copy h1{font-size:24px;letter-spacing:.12em}}

.hero .copy h1 em{font-style:normal;color:var(--teal)}

.hero .copy h1 em.tag{font-size:.62em;letter-spacing:.18em;margin-right:.8em;color:var(--teal)}
@media (max-width:760px){.hero .copy h1 em.tag{display:inline-block;margin:6px 0 0;font-size:.7em}}

/* 改行は文節で（2026-10-19）：見出しは語のまとまりごとに折り返す。Chrome・Edge は本文も文節で折り返す */
.nw{display:inline-block}
body{word-break:auto-phrase}
.maptx h2.sub{font-size:clamp(24px,2.3vw,31px);letter-spacing:.06em}

/* メニューの段差をなくす（2026-10-19）：ドロップダウン付きの「事業紹介」も同じ高さにそろえる */
.gnav{align-items:center}
.gnav>a,.dd>a{display:block}
/* お問い合わせの箱：スマホは1列（2026-10-19） */
.contact{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:760px){.contact{grid-template-columns:minmax(0,1fr);padding:28px 22px}.contact .tel{font-size:28px}}
.co-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:961px){.co-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.co-grid .tbl th{white-space:normal}
/* 施設マップを横に広げる（2026-10-19）：文章は他の段と左をそろえ、地図は画面の右端近くまで */
@media (min-width:961px){
  .mapsec>.wrap{max-width:none;padding-left:max(20px,calc((100% - 1120px)/2));padding-right:max(2.5vw,calc((100% - 1680px)/2))}
  .mapgrid{grid-template-columns:minmax(300px,340px) minmax(0,1fr);gap:clamp(28px,3vw,56px)}
}
/* トップの理念：右側に三者の図と Mission・Credo（2026-10-19）。左の見出しと上をそろえる */
.philo{align-items:start}
@media (min-width:761px){.philo-r{padding-top:46px}}
.philo-r{display:grid;gap:22px}
.philo-r p{font-size:16px;line-height:2.1;color:var(--ink)}
.philo-r .two{margin-top:0}
.philo-r .link-more{justify-self:start}
.trio{width:100%;max-width:420px;height:auto;display:block}
.trio circle{fill-opacity:.12;stroke-width:1.4}
.trio .c1{fill:#00919c;stroke:#00919c}.trio .c2{fill:#005c87;stroke:#005c87}.trio .c3{fill:#6fb7a4;stroke:#3f9a83}
.trio .lb{font:600 15px var(--mincho);fill:var(--ink);text-anchor:middle;letter-spacing:.08em}
.trio .en{font:600 15px var(--en);fill:var(--teal);text-anchor:middle;letter-spacing:.3em}
.trio .en.sm{font-size:10px;letter-spacing:.35em}
.rv.on .trio circle{animation:trioIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.rv.on .trio .c2{animation-delay:.15s}.rv.on .trio .c3{animation-delay:.3s}
@keyframes trioIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.trio circle{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.rv.on .trio circle{animation:none}}
/* でじるみの写真の代わり（掲載許可が出るまで）：でじるみの紫とアイコンの図（2026-10-20） */
.dgart{display:grid;place-content:center;justify-items:center;gap:8px;width:100%;height:100%;min-height:180px;color:#fff;text-align:center;
  background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.22) 0 2px,transparent 2.5px) 0 0/22px 22px,radial-gradient(circle at 80% 10%,#b8a3ff 0,transparent 55%),linear-gradient(135deg,#7d5fe3,#4b3aa3)}
.dgart svg{width:min(150px,46%);height:auto;opacity:.95}
.dgart b{font:700 clamp(18px,2.2vw,26px)/1.2 var(--sans);letter-spacing:.12em}
.dgart small{font:500 12.5px/1.4 var(--sans);letter-spacing:.12em;opacity:.85}
.dgart.abs{position:absolute;inset:0}
.dgart.big svg{width:min(220px,55%)}
.fcard .ph .dgart{position:absolute;inset:0;min-height:0}
.fcard .ph .dgart svg{width:38%}
.fcard .ph .dgart b{font-size:17px}
.menu .mi{display:grid;place-items:center;aspect-ratio:1/1;border-radius:50%;background:linear-gradient(135deg,#7d5fe3,#4b3aa3);color:#fff;margin-bottom:10px}
.menu .mi svg{width:46%;height:auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.menu .mi svg .f{fill:currentColor;stroke:none}
.fhero .ph:has(.dgart){position:relative;aspect-ratio:3/2;border-radius:6px;overflow:hidden;box-shadow:18px 18px 0 #dcebeb}
.bhead .media .dgart{position:absolute;inset:0}
/* ===== WordPress 版で使う部品（お知らせ一覧・記事・お問い合わせフォーム）2026-10-20 ===== */
.cols3.cols2{grid-template-columns:1fr 1fr}
@media (max-width:860px){.cols3.cols2{grid-template-columns:1fr}}
.newsall{padding-block:40px 10px}
.newsall .list a{display:grid;grid-template-columns:120px auto 1fr;gap:4px 16px;align-items:baseline;padding:18px 0;font-size:15px}
.newsall .list time{display:inline}
.newsall .cat{justify-self:start;font:500 11.5px var(--sans);letter-spacing:.08em;color:var(--teal);border:1px solid currentColor;border-radius:99px;padding:1px 10px;white-space:nowrap}
@media (max-width:640px){.newsall .list a{grid-template-columns:auto 1fr}.newsall .list a .tt{grid-column:1/-1}}
.pager{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 0}
.pager a,.pager span{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:4px;text-decoration:none;font:500 14px var(--en)}
.pager .current{background:var(--teal);border-color:var(--teal);color:#fff}
.post{max-width:820px;margin:0 auto;padding-block:40px 80px}
.post .meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font:400 13px var(--en);letter-spacing:.1em;color:var(--teal)}
.post h1{font-size:clamp(24px,3vw,34px);line-height:1.5;letter-spacing:.04em;margin-top:14px}
.post .body{margin-top:32px;font-size:16px;line-height:2;color:var(--ink);word-break:normal;overflow-wrap:anywhere}
.post .body p{margin:0 0 1.2em}.post .body img{max-width:100%;height:auto;border-radius:6px}
.post .body h2{font-size:22px;margin:2em 0 .6em;padding-left:14px;border-left:3px solid var(--teal)}
.post .body h3{font-size:18px;margin:1.6em 0 .5em}
.post .body table{border-collapse:collapse;width:100%}.post .body th,.post .body td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.post .body a{color:var(--teal)}
.post .nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.post .nav a{display:block;text-decoration:none;font-size:14px;line-height:1.6}.post .nav .next{text-align:right}
.post .nav small{display:block;font:500 11px var(--en);letter-spacing:.2em;color:var(--teal)}
.post .back{margin-top:36px}
.empty{padding-block:30px 60px;font-size:15px}
/* お問い合わせフォーム（Contact Form 7） */
.cfsec{padding-block:20px 90px}
.cflead{margin:14px 0 0;font-size:15px}
.cfbox{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(18px,4vw,40px)}
.cfbox table{width:100%;border-collapse:collapse}
.cfbox tr{border-bottom:1px solid var(--line)}
.cfbox th{width:220px;text-align:left;vertical-align:top;padding:20px 16px 20px 0;font-weight:600;font-size:15px;color:var(--ink)}
.cfbox td{padding:14px 0}
.cfbox .alert.caption,.cfbox .caption{color:#c0392b;font-size:12px;font-weight:500;margin-left:4px}
.cfbox input[type=text],.cfbox input[type=email],.cfbox input[type=tel],.cfbox input[type=url],.cfbox textarea,.cfbox select{width:100%;max-width:100%;box-sizing:border-box;font:16px var(--sans);padding:12px 14px;border:1px solid #c9d3d6;border-radius:6px;background:#fbfcfc;color:var(--ink)}
.cfbox textarea{min-height:180px}
.cfbox input:focus,.cfbox textarea:focus,.cfbox select:focus{outline:2px solid var(--teal);outline-offset:1px;background:#fff}
.cfbox input[type=submit],.cfbox button[type=submit]{appearance:none;display:inline-block;margin-top:24px;background:var(--teal);color:#fff;border:0;border-radius:99px;padding:15px 56px;font:600 16px var(--sans);letter-spacing:.12em;cursor:pointer}
.cfbox input[type=submit]:hover{filter:brightness(1.08)}
.cfbox p{font-size:14.5px}
.cfbox .wpcf7-list-item{display:inline-block;margin:6px 18px 6px 0}
.cfbox .wpcf7-not-valid-tip{color:#c0392b;font-size:13px;margin-top:6px;display:block}
.cfbox .wpcf7-response-output{margin:20px 0 0;padding:12px 16px;border-radius:6px;font-size:14px}
.cfbox img{max-width:100%;height:auto}
@media (max-width:700px){.cfbox th,.cfbox td{display:block;width:auto;padding:12px 0 4px}.cfbox td{padding:0 0 16px}.cfbox tr{display:block}}
.phead .phead-t{font-family:var(--mincho);font-size:clamp(28px,3.4vw,42px);color:var(--ink);margin:10px 0 0;letter-spacing:.1em;line-height:1.4}
p,li,dd,figcaption{text-wrap:pretty}