/* Layout: 余白の広い1カラム基調。白→淡い水色→白と背景を切り替え、写真は大きな角丸で。ロゴの「円」を薄い装飾として反復。
   単一テーマ（ブランドのライトトーン）で設計し、背景と文字色はすべて明示。 */
:root{
  --blue:#7EC8E3;        /* メイン：ロゴのライトブルー */
  --blue-ink:#3A94BB;    /* 水色系の文字用（同系色で可読性を確保） */
  --pink:#F3B2CC;        /* アクセント：ロゴの淡いピンク（5〜10%） */
  --pink-ink:#C9678F;    /* ピンク系の小さな文字用 */
  --deep:#3F7FA6;        /* AI・データ基盤セクションのみの補助色 */
  --ink:#2F3337;         /* 本文 */
  --muted:#5E676F;       /* 補足テキスト */
  --line:#D9EAF2;        /* 罫線 */
  --bg:#FFFFFF;
  --bg-soft:#F7FBFD;
  --bg-tint:#EAF5FA;
  --shadow:0 6px 24px rgba(47,90,120,.08);
  --r-card:18px; --r-btn:10px;
  --f-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --f-en:"Inter","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-jp);font-size:16px;line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
@media (min-width:768px){.wrap{padding-inline:40px}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:100;text-decoration:none}
.skip:focus{top:12px}

/* ---------- 共通パーツ ---------- */
.sec{padding-block:88px}
@media (min-width:768px){.sec{padding-block:128px}}
.sec--soft{background:var(--bg-soft)}
.sec--tint{background:var(--bg-tint)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-en);font-weight:600;font-size:.8rem;letter-spacing:.16em;color:var(--blue-ink);margin:0 0 14px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--pink);flex:none}
.h2{font-size:clamp(1.55rem,1.1rem + 1.8vw,2.3rem);font-weight:700;line-height:1.5;letter-spacing:.04em;margin:0 0 28px;text-wrap:balance}
.h3{font-size:1.25rem;font-weight:700;line-height:1.6;margin:0 0 14px}
.lead{font-size:1.05rem;color:var(--ink)}
.prose p{margin:0 0 1.1em;max-width:36em}
.prose p:last-child{margin-bottom:0}
.muted{color:var(--muted)}

.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 28px;border-radius:var(--r-btn);font-weight:700;font-size:1rem;text-decoration:none;letter-spacing:.05em;transition:background .2s,color .2s,box-shadow .2s,transform .2s;border:2px solid var(--blue)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn--main{background:var(--blue);color:#fff;text-shadow:0 1px 1px rgba(40,100,130,.35)}
.btn--main:hover{background:#6BBBD8;border-color:#6BBBD8;box-shadow:var(--shadow)}
.btn--sub{background:#fff;color:var(--blue-ink)}
.btn--sub:hover{background:var(--bg-tint)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-ink);text-decoration:none;border-bottom:1.5px solid var(--blue);padding-bottom:2px}
.link:hover{color:var(--deep);border-color:var(--deep)}
.link svg{width:16px;height:16px}

.photo{border-radius:20px;overflow:hidden;background:var(--bg-tint)}
.photo img{width:100%;height:100%;object-fit:cover}
.arc{position:absolute;pointer-events:none;color:var(--blue)}
.arc svg{width:100%;height:100%;display:block}

/* ---------- ヘッダー ---------- */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.header.is-scrolled{border-color:var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.logo{display:block;flex:none}
.logo img{height:40px;width:auto}
.gnav{display:none}
.gnav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.gnav a{display:block;padding:8px 11px;border-radius:8px;font-size:.88rem;font-weight:500;text-decoration:none;white-space:nowrap}
.gnav a:hover{background:var(--bg-tint)}
.gnav .gnav__cta{background:var(--blue);color:#fff;font-weight:700;padding:10px 18px;margin-left:8px;text-shadow:0 1px 1px rgba(40,100,130,.35)}
.gnav .gnav__cta:hover{background:#6BBBD8}
.menu-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:48px;height:48px;padding:0 12px;border:0;background:var(--bg-tint);border-radius:12px;cursor:pointer}
.menu-btn span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.spnav{border-top:1px solid var(--line);background:#fff;max-height:calc(100dvh - 72px);overflow:auto}
.spnav ul{list-style:none;margin:0;padding:8px 20px 12px}
.spnav li{border-bottom:1px solid var(--line)}
.spnav a{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;text-decoration:none;font-weight:500}
.spnav a small{font-family:var(--f-en);font-size:.72rem;letter-spacing:.14em;color:var(--blue-ink)}
.spnav .btns{padding:8px 20px 28px;margin-top:0}
.spnav .btn{flex:1 1 100%}
@media (min-width:1140px){.gnav{display:block}.menu-btn,.spnav{display:none!important}}

/* ---------- ファーストビュー ---------- */
.hero{position:relative;overflow:hidden;padding-block:28px 72px;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.hero__grid{display:grid;gap:36px;align-items:center}
.hero__media{position:relative}
.hero__media .photo{aspect-ratio:4/3}
.hero__media .photo img{object-position:74% 50%}
.hero__media .arc{width:62%;aspect-ratio:1;right:-14%;top:-18%;opacity:.35;z-index:-1}
.hero__catch{font-size:clamp(2rem,1.25rem + 3.4vw,3.35rem);font-weight:700;line-height:1.45;letter-spacing:.06em;margin:0 0 22px}
.hero__catch .dot{position:relative;display:inline-block}
.hero__catch .dot::after{content:"";position:absolute;left:50%;top:-.16em;width:.22em;height:.22em;border-radius:50%;background:var(--pink);transform:translateX(-50%)}
.hero__sub{font-size:clamp(1.02rem,.95rem + .4vw,1.2rem);font-weight:500;line-height:1.9;margin:0 0 28px}
.hero__desc{font-size:.95rem;color:var(--muted);padding-left:18px;border-left:2px solid var(--line)}
.hero__desc p{margin:0 0 .8em}
.hero__desc p:last-child{margin:0}
.hero__desc strong{color:var(--ink);font-weight:500}
@media (min-width:960px){
  .hero{padding-block:56px 110px}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:64px}
  .hero__media{order:2}
  .hero__media .photo{aspect-ratio:1/1.02;border-radius:28px 28px 28px 120px}
}
@media (max-width:959px){.hero__media{order:-1}.hero__text{min-width:0}}

/* ---------- 目的別ナビ ---------- */
.paths{padding-block:0 8px;background:var(--bg-soft)}
.paths__box{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow);padding:28px 22px;transform:translateY(-40px);margin-bottom:-40px}
.paths__title{font-size:.95rem;font-weight:700;margin:0 0 18px;text-align:center}
.paths__grid{display:grid;gap:12px}
.path{display:grid;grid-template-columns:48px minmax(0,1fr) 20px;align-items:center;gap:14px;padding:16px 16px;border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-color .2s,background .2s}
.path:hover{border-color:var(--blue);background:var(--bg-soft)}
.path__icon{width:48px;height:48px;border-radius:50%;background:var(--bg-tint);display:grid;place-items:center;color:var(--blue-ink)}
.path__icon svg{width:24px;height:24px}
.path--recruit .path__icon{background:#FCEBF2;color:var(--pink-ink)}
.path__who{display:block;font-weight:700;font-size:1rem;line-height:1.5}
.path__what{display:block;font-size:.85rem;color:var(--muted);line-height:1.6}
.path__arrow{color:var(--blue-ink)}
@media (min-width:860px){
  .paths__box{padding:30px 32px}
  .paths__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}

/* ---------- iYCについて ---------- */
.about__grid{display:grid;gap:48px;align-items:center}
.about__mark{position:relative;max-width:340px;margin-inline:auto;width:100%}
.about__mark .circle{display:flex;justify-content:center;background:transparent}
.about__mark img{width:62%;max-width:210px;height:auto;object-fit:contain}
.about__mark figcaption{text-align:center;margin-top:18px;font-family:var(--f-en);font-weight:600;letter-spacing:.12em;font-size:.85rem;color:#2F3337}
.name-parts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;padding:0;list-style:none}
.name-parts li{display:inline-flex;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:.9rem}
.name-parts b{font-family:var(--f-en);color:var(--blue-ink);font-size:1.05rem}
.philo{display:grid;gap:14px;margin:36px 0 0}
.philo div{background:var(--bg-soft);border-radius:14px;padding:18px 22px}
.philo dt{font-size:.8rem;font-weight:700;color:var(--blue-ink);letter-spacing:.08em;margin-bottom:4px}
.philo dd{margin:0;font-weight:700;font-size:1.05rem;line-height:1.7}
@media (min-width:900px){
  .about__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:88px}
  .philo{grid-template-columns:1fr 1fr}
}

/* ---------- 事業 ---------- */
.biz__head{max-width:720px;margin-bottom:36px}
.biz__grid{display:grid;gap:28px}
.biz-card{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.biz-card__media{aspect-ratio:16/9;background:var(--bg-tint)}
.biz-card__media img{width:100%;height:100%;object-fit:cover}
.biz-card__body{padding:30px 26px 34px;display:flex;flex-direction:column;flex:1}
.biz-card__label{display:inline-block;align-self:flex-start;font-size:.8rem;font-weight:700;letter-spacing:.06em;background:var(--bg-tint);border-radius:999px;padding:3px 14px;color:var(--blue-ink);margin:0 0 8px}
.biz-card .prose p{font-size:.97rem}
.biz-card .foot{margin-top:auto;padding-top:26px}
.biz-card--ai .biz-card__label{color:var(--deep);background:#E1EEF6}
.biz-card--ai .biz-card__media{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--bg-tint) 0%,#DCEDF6 100%);position:relative;overflow:hidden}
.flow{display:flex;align-items:center;gap:8px;padding:20px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.flow span{background:#fff;border:1px solid #C9E1EE;border-radius:10px;padding:8px 12px;font-size:.82rem;font-weight:500;color:var(--deep);white-space:nowrap}
.flow i{font-style:normal;color:var(--deep);opacity:.6;font-family:var(--f-en)}
.biz-card--ai .arc{width:70%;aspect-ratio:1;right:-22%;bottom:-40%;opacity:.35;color:var(--deep)}
@media (min-width:900px){.biz__grid{grid-template-columns:1fr 1fr;gap:32px}.biz-card__body{padding:36px 38px 40px}}

/* ---------- エンジニア像 ---------- */
.ideal__head{text-align:left;max-width:760px}
.ideal__formula{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ideal__formula .x{color:var(--pink-ink);font-family:var(--f-en);font-weight:500}
.cards3{display:grid;gap:18px;margin-top:20px}
.ideal__close{margin:44px 0 0;font-weight:700;font-size:1.08rem;line-height:1.9;text-align:center;text-wrap:balance}
.ideal__close::before{content:"";display:block;width:26px;height:4px;border-radius:2px;background:var(--pink);margin:0 auto 18px}
.v-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:30px 26px}
.v-card__icon{width:56px;height:56px;border-radius:16px;background:var(--bg-tint);color:var(--blue-ink);display:grid;place-items:center;margin-bottom:20px}
.v-card__icon svg{width:28px;height:28px}
.v-card__en{font-family:var(--f-en);font-weight:600;font-size:.78rem;letter-spacing:.16em;color:var(--blue-ink);margin:0}
.v-card h3{font-size:1.3rem;margin:2px 0 8px}
.v-card p{margin:0;color:var(--muted)}
@media (min-width:860px){.cards3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* ---------- 採用 ---------- */
.recruit{position:relative;overflow:hidden}
.recruit__grid{display:grid;gap:44px;align-items:start}
.wishes{list-style:none;margin:22px 0;padding:0;display:grid;gap:8px}
.wishes li{display:flex;align-items:center;gap:12px;font-weight:700}
.wishes li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink);flex:none}
.recruit__media{position:relative}
.recruit__media .photo{aspect-ratio:4/3}
.recruit__media .photo img{object-position:50% 38%}
.recruit__media figcaption{font-size:.85rem;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:8px}
.recruit__media figcaption::before{content:"";width:18px;height:2px;background:var(--pink);border-radius:2px}
.recruit__media .arc{width:46%;aspect-ratio:1;left:-12%;bottom:-14%;opacity:.5;color:var(--pink);z-index:0}
.recruit__media .photo{position:relative;z-index:1}
@media (min-width:960px){
  .recruit__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px}
  .recruit__media{position:sticky;top:110px}
}

/* ---------- 代表メッセージ ---------- */
.message__grid{display:grid;gap:44px;align-items:center}
.message__media{position:relative}
.message__media .photo{aspect-ratio:4/5;border-radius:24px}
.message__media .photo img{object-position:52% 40%}
.message__media .arc{width:70%;aspect-ratio:1;right:-16%;top:-10%;opacity:.3;z-index:-1}
.sign{margin-top:32px;display:flex;flex-direction:column;gap:2px}
.sign span{font-size:.85rem;color:var(--muted)}
.sign strong{font-size:1.4rem;letter-spacing:.2em;font-weight:700}
@media (min-width:900px){
  .message__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:88px}
}
@media (max-width:899px){.message__media{max-width:440px;width:100%}.message__media .photo{aspect-ratio:1/1}}

/* ---------- パートナー ---------- */
.partner__box{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:44px 24px;display:grid;gap:40px}
.consult{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.consult li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;padding:16px 18px;background:var(--bg-soft);border-radius:14px}
.consult .ic{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--blue-ink);display:grid;place-items:center;border:1px solid var(--line)}
.consult .ic svg{width:20px;height:20px}
.consult b{display:block;font-size:1rem;line-height:1.6}
.consult small{display:block;color:var(--muted);font-size:.85rem;line-height:1.6}
.consult .soon{display:inline-block;font-size:.7rem;font-weight:700;color:var(--deep);background:var(--bg-tint);border-radius:6px;padding:1px 8px;margin-left:6px;vertical-align:2px}
@media (min-width:900px){.partner__box{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;padding:64px}}

/* ---------- 会社情報・フッター ---------- */
.company{padding-block:80px 64px;background:#fff;border-top:1px solid var(--line)}
.company__grid{display:grid;gap:36px}
.company dl{margin:0;display:grid}
.company dl div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.company dt{color:var(--muted);font-weight:500}
.company dd{margin:0}
.plate{margin:0;border-radius:20px;overflow:hidden;background:#a88f7e;box-shadow:var(--shadow)}
.plate img{width:100%;height:auto;aspect-ratio:1400/622;object-fit:contain;display:block}
@media (min-width:900px){.company__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}}
.footer{background:var(--bg-tint);padding-block:52px 32px;font-size:.9rem}
.footer__top{display:grid;gap:32px}
.footer__nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.footer__nav a{text-decoration:none}
.footer__nav a:hover{color:var(--blue-ink);text-decoration:underline}
.sns{display:flex;gap:10px;margin-top:16px}
.sns a{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink)}
.sns svg{width:18px;height:18px}
.copy{margin-top:40px;padding-top:20px;border-top:1px solid #D2E6F0;font-family:var(--f-en);font-size:.78rem;color:var(--muted)}
@media (min-width:860px){.footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.footer__nav ul{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* ---------- 動き（モーション） ----------
   方針：動きは伝わるが、文章は待たせない。端末の「動きを減らす」設定時はすべて停止し、最初から表示。 */
:root{--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* 桜ゾーン：ファーストビュー〜目的別ナビ〜ABOUT。背景はゾーンにまとめ、花びらと図形を内容の後ろに */
.sakura-zone{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 38%,var(--bg-soft) 56%,#fff 68%)}
.sakura-zone .hero,.sakura-zone .paths{background:transparent}
.sakura-zone > section,.sakura-zone > nav{position:relative;z-index:2}
.hero__grid{position:relative;z-index:1}
.sakura{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
.floaters{position:absolute;inset:0;z-index:0;pointer-events:none}
.fl{position:absolute;display:block;border-radius:50%;will-change:transform}
.fl--ring{border:2px solid rgba(126,200,227,.38)}
.fl--soft{background:radial-gradient(circle at 35% 35%,rgba(126,200,227,.22),rgba(126,200,227,.06) 70%,transparent 72%)}
.fl--arc{border-radius:0;color:rgba(126,200,227,.5)}
.fl--arc svg{width:100%;height:100%;display:block}
.fl--1{width:180px;height:180px;left:-60px;top:14%;animation:float-a 16s ease-in-out infinite alternate}
.fl--2{width:340px;height:340px;left:34%;top:4%;animation:float-b 22s ease-in-out infinite alternate}
.fl--4{width:120px;height:120px;right:6%;top:52%;animation:float-b 18s ease-in-out infinite alternate-reverse}
.fl--5{width:420px;height:420px;right:-140px;top:66%;animation:float-a 24s ease-in-out infinite alternate-reverse}
.fl--7{width:260px;height:260px;left:-90px;bottom:3%;animation:spin-drift 30s ease-in-out infinite alternate}
@media (max-width:767px){
  .fl--1{width:110px;height:110px;left:-50px;top:4%}
  .fl--2{width:220px;height:220px;left:auto;right:-80px;top:28%}
  .fl--4{width:80px;height:80px;top:58%}
  .fl--5{width:260px;height:260px;right:-120px;top:76%}
  .fl--7{width:180px;height:180px;left:-80px}
}
@keyframes float-a{0%{transform:translate(0,0)}50%{transform:translate(26px,-22px)}100%{transform:translate(-14px,30px)}}
@keyframes float-b{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-34px,24px) scale(1.06)}}
@keyframes float-c{0%{transform:translate(0,0)}100%{transform:translate(18px,-26px)}}
@keyframes spin-drift{0%{transform:rotate(0) translate(0,0)}100%{transform:rotate(28deg) translate(16px,-20px)}}

/* 下部セクションの漂う円・輪・円弧（上部と同じ系統） */
#business,#ideal,#recruit,#message,#partner,#company{position:relative;overflow:hidden;isolation:isolate}
#business>.wrap,#ideal>.wrap,#recruit>.wrap,#message>.wrap,#partner>.wrap,#company>.wrap{position:relative;z-index:1}
.fl[style*="--s"]{width:var(--s);height:var(--s)}
.fl--white{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.75),rgba(255,255,255,.25) 68%,transparent 71%)}
.fa{animation:float-a 20s ease-in-out infinite alternate}
.fb{animation:float-b 24s ease-in-out infinite alternate}
.fc{animation:float-c 14s ease-in-out infinite alternate-reverse}
.fd{animation:spin-drift 28s ease-in-out infinite alternate}
@media (max-width:767px){
  .fl[style*="--s"]{width:calc(var(--s)*.6);height:calc(var(--s)*.6)}
  .fl--pc{display:none}
}
/* ページ内の円弧もゆっくり漂う */
.arc svg{animation:spin-drift 26s ease-in-out infinite alternate;transform-origin:50% 50%}
.recruit__media .arc svg{animation-duration:20s;animation-direction:alternate-reverse}
.final .arc svg,.axis .arc svg{animation:none}

/* ファーストビューの登場 */
.motion .hero__catch,.motion .hero__sub,.motion .hero__desc,.motion .hero__text .btns{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1s var(--ease-out)}
.motion .hero__media .photo{opacity:0;transform:translateY(30px) scale(1.06);clip-path:inset(14% 0 0 0 round 28px);transition:opacity 1s var(--ease),transform 1.6s var(--ease-out),clip-path 1.4s var(--ease-out)}
.motion .hero__media .arc{opacity:0;transition:opacity 1.6s var(--ease) .7s}
.motion.is-loaded .hero__catch,.motion.is-loaded .hero__sub,.motion.is-loaded .hero__desc,.motion.is-loaded .hero__text .btns{opacity:1;transform:none}
.motion.is-loaded .hero__sub{transition-delay:.15s}
.motion.is-loaded .hero__desc{transition-delay:.28s}
.motion.is-loaded .hero__text .btns{transition-delay:.4s}
.motion.is-loaded .hero__media .photo{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0);transition-delay:.15s}
.motion.is-loaded .hero__media .arc{opacity:.35}
.motion .hero__catch .dot::after{transform:translateX(-50%) scale(0);transition:transform .7s cubic-bezier(.34,1.7,.64,1) .95s}
.motion.is-loaded .hero__catch .dot::after{transform:translateX(-50%) scale(1)}

/* スクロール表示：文章はすぐ・短く／写真とカードは大きめの移動と時間差 */
.motion .rv-text{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease-out)}
.motion .rv-media{opacity:0;transform:translateY(56px);transition:opacity 1s var(--ease),transform 1.3s var(--ease-out);transition-delay:var(--d,0s)}
.motion .rv-photo{opacity:0;transform:translateY(40px) scale(1.04);clip-path:inset(12% 0 0 0 round 20px);transition:opacity 1s var(--ease),transform 1.4s var(--ease-out),clip-path 1.3s var(--ease-out);transition-delay:var(--d,0s)}
.motion .rv-text.is-in,.motion .rv-media.is-in{opacity:1;transform:none}
.motion .rv-photo.is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0)}
/* カード・リスト終了後はホバー用のtransitionに戻す */
.motion .rv-media.is-done{transition-delay:0s}

/* ホバー（控えめ） */
.btn{will-change:auto}
@media (hover:hover){
  .btn:hover{transform:translateY(-3px)}
  .btn--main:hover{box-shadow:0 8px 20px rgba(58,148,187,.28)}
  .btn--sub:hover{border-color:var(--blue-ink);box-shadow:0 6px 16px rgba(47,90,120,.1)}
  .btn:active{transform:translateY(0)}
  .link{background:linear-gradient(var(--deep),var(--deep)) 0 100%/0 1.5px no-repeat;transition:color .2s,background-size .35s var(--ease)}
  .link:hover{background-size:100% 1.5px}
  .link svg{transition:transform .2s}
  .link:hover svg{transform:translateX(4px)}
  .motion .biz-card.is-done,.biz-card{transition:transform .4s var(--ease),box-shadow .4s var(--ease),opacity 1s var(--ease)}
  .biz-card:hover{box-shadow:0 16px 36px rgba(47,90,120,.14)}
  .path{transition:border-color .2s,background .2s,transform .3s var(--ease)}
  .path:hover{transform:translateY(-2px)}
  .path__arrow{transition:transform .2s}
  .path:hover .path__arrow{transform:translateX(4px)}
  .motion .v-card.is-done,.v-card{transition:transform .4s var(--ease),border-color .4s,box-shadow .4s,opacity 1s var(--ease)}
  .v-card:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 12px 28px rgba(47,90,120,.1)}
  .v-card__icon{transition:transform .4s var(--ease)}
  .v-card:hover .v-card__icon{transform:rotate(-6deg) scale(1.06)}
}

@media (prefers-reduced-motion:reduce){
  .sakura{display:none}
  .fl,.arc svg{animation:none!important}
  .motion .rv-text,.motion .rv-media,.motion .rv-photo,.motion .hero__catch,.motion .hero__sub,.motion .hero__desc,.motion .hero__text .btns,.motion .hero__media .photo{opacity:1!important;transform:none!important;clip-path:none!important}
  .btn:hover,.biz-card:hover,.v-card:hover,.path:hover{transform:none}
}



/* ---------- ABOUT：左に紹介文、右に写真 ---------- */
.about__grid{gap:36px}
.about__media{margin:0;position:relative}
.about__media .photo{aspect-ratio:1400/622;border-radius:18px;background:#EEEBE6;box-shadow:0 10px 30px rgba(47,90,120,.10)}
.about__media .photo img{object-fit:contain;object-position:50% 50%}
#about.sec{padding-block:72px}
@media (min-width:900px){
  #about.sec{padding-block:104px}
  .about__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px}
  .about__media .photo{border-radius:22px}
}

/* ---------- 大きな日本語見出しは丸みのある書体（本文・英字は従来どおり） ---------- */
:root{--f-round:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif}
.h2,.hero__catch{font-family:var(--f-round);font-weight:700}
.hero__catch{word-break:keep-all;overflow-wrap:anywhere;font-size:clamp(1.85rem,1.2rem + 2.4vw,2.6rem);letter-spacing:.04em}

/* ---------- OUR ENGINEERS：技術 × 人間力 × 主体性 ---------- */
.ideal__formula{display:flex;flex-wrap:nowrap;align-items:center;gap:0;margin:6px 0 4px}
.ideal__formula .word{position:relative;white-space:nowrap;font-family:var(--f-round);font-weight:700;font-size:clamp(1.55rem,1.1rem + 1.8vw,2.3rem);letter-spacing:.06em;line-height:1.3;color:#2F3337;padding-bottom:12px}
.ideal__formula .word::after{content:"";position:absolute;left:50%;bottom:0;width:1.1em;height:3px;border-radius:3px;transform:translateX(-50%);background:rgba(126,200,227,.6)}
.ideal__formula .word--pink::after{background:rgba(243,178,204,.75)}
/* 「×」：細い2本線で描き、言葉より小さく・グレーで */
.ideal__formula .x{position:relative;flex:none;width:.42em;height:.42em;margin:0 .55em 12px;font-size:clamp(1.55rem,1.1rem + 1.8vw,2.3rem)}
.ideal__formula .x::before,.ideal__formula .x::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:1.5px;border-radius:2px;background:#9AA3AA;transform:translate(-50%,-50%) rotate(45deg)}
.ideal__formula .x::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media (max-width:480px){
  .ideal__formula .word,.ideal__formula .x{font-size:1.45rem}
  .ideal__formula .word{padding-bottom:10px;letter-spacing:.04em}
  .ideal__formula .x{margin:0 .45em 10px}
}
@media (max-width:339px){.ideal__formula .word,.ideal__formula .x{font-size:1.3rem}}
.motion .ideal__formula.rv-text .word::after{transform:translateX(-50%) scaleX(0);transition:transform .7s var(--ease-out) .25s}
.motion .ideal__formula.rv-text .word:nth-child(3)::after{transition-delay:.37s}
.motion .ideal__formula.rv-text .word:nth-child(5)::after{transition-delay:.49s}
.motion .ideal__formula.rv-text.is-in .word::after{transform:translateX(-50%) scaleX(1)}
@media (prefers-reduced-motion:reduce){.motion .ideal__formula .word::after{transform:translateX(-50%)!important}}
.cards3{margin-top:28px}

/* 3つの力カード：アイコンと英字ラベルを横並びにして縦幅を圧縮 */
.v-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;align-content:start;padding:22px 24px 24px}
.v-card__icon{width:44px;height:44px;border-radius:12px;margin-bottom:0}
.v-card__icon svg{width:22px;height:22px}
.v-card__en{grid-column:2}
.v-card h3{grid-column:1/-1;margin:14px 0 4px;font-size:1.2rem}
.v-card p:not(.v-card__en){grid-column:1/-1;line-height:1.75}

/* ---------- 会社概要：表だけで1カラムにまとめ、フッターへ自然につなげる ---------- */
.company{padding-block:64px 56px}
.company__grid{display:block;max-width:880px}
.company .h2{margin-bottom:8px}
.company dl div{grid-template-columns:7.5em minmax(0,1fr);padding:13px 0}
@media (min-width:900px){
  .company{padding-block:88px 72px}
  .company__grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;max-width:1000px;align-items:start}
  .company dl{border-top:1px solid var(--line)}
}
@media (max-width:480px){.company dl div{grid-template-columns:6em minmax(0,1fr);gap:12px;font-size:.92rem}}
.footer{padding-block:44px 28px}

/* ---------- 人物写真のホバー：枠は固定、中の画像だけをゆっくり1.025倍に ----------
   PC（マウス操作・768px以上）のみ。顔の位置を拡大の中心にして、顔が切れないようにする。プレート写真は対象外 */
@media (hover:hover) and (pointer:fine) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  .hero__media .photo img,
  .biz-card:not(.biz-card--ai) .biz-card__media img,
  .recruit__media .photo img,
  .message__media .photo img{transition:transform .5s var(--ease)}
  .hero__media .photo img{transform-origin:74% 45%}
  .biz-card .biz-card__media img{transform-origin:55% 35%}
  .recruit__media .photo img{transform-origin:50% 38%}
  .message__media .photo img{transform-origin:52% 40%}
  .hero__media .photo:hover img,
  .biz-card:not(.biz-card--ai):hover .biz-card__media img,
  .recruit__media .photo:hover img,
  .message__media .photo:hover img{transform:scale(1.025)}
}

/* ---------- AI・データ基盤カード上部：文字を主役に ---------- */
.biz-card--ai .biz-card__media{background:#EAF5FA;position:relative;overflow:hidden}
.biz-card--ai .biz-card__media::before{content:"";position:absolute;width:62%;aspect-ratio:1;right:-18%;bottom:-38%;border-radius:50%;border:1.5px solid rgba(126,200,227,.35);pointer-events:none}
.ai-lead{position:relative;z-index:1;text-align:center;padding:24px;cursor:default;user-select:text}
.ai-lead p{margin:0}
.ai-lead__from{font-size:clamp(.9rem,.85rem + .25vw,1rem);font-weight:500;color:#5E676F;letter-spacing:.06em;margin-bottom:6px!important}
.ai-lead__to{font-size:clamp(1.45rem,1.1rem + 1.4vw,2rem);font-weight:700;color:#2F3337;letter-spacing:.06em;line-height:1.4}
.ai-lead__to::after{content:"";display:block;width:2.2em;height:3px;border-radius:3px;background:rgba(63,127,166,.35);margin:12px auto 0}

/* OUR ENGINEERS：白背景・囲みなしの見出し、カードは淡い水色 */
#ideal.sec--soft{background:#fff}
#ideal .fl--white,#ideal .fl--soft{background:radial-gradient(circle at 35% 35%,rgba(126,200,227,.14),rgba(126,200,227,.04) 68%,transparent 71%)}
.ideal__panel{background:none;padding:0;box-shadow:none;border-radius:0}
.ideal__panel .eyebrow{margin-bottom:14px}
.ideal__panel .ideal__formula{margin:0}
.cards3{margin-top:48px}
#ideal .v-card{background:#EEF7FB;border-color:transparent}
#ideal .v-card__icon{background:#fff}
@media (hover:hover){#ideal .v-card:hover{border-color:transparent;box-shadow:0 10px 24px rgba(47,90,120,.08)}}
@media (max-width:480px){.cards3{margin-top:36px}}

/* ---------- レイアウト調整：パートナー ---------- */
.partner__title{text-wrap:wrap;word-break:keep-all;overflow-wrap:anywhere;line-break:strict;font-size:clamp(1.4rem,1.05rem + 1.6vw,2.05rem);line-height:1.55;margin-bottom:22px}
.partner__box{padding:36px 22px;gap:28px}
.partner__box .btns{margin-top:28px}
.consult{gap:8px;align-self:center}
.consult li{grid-template-columns:34px minmax(0,1fr);gap:12px;padding:10px 14px;border-radius:12px}
.consult .ic{width:34px;height:34px;border-radius:10px}
.consult .ic svg{width:18px;height:18px}
.consult b{font-size:.95rem;line-height:1.5}
@media (min-width:900px){
  .partner__box{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:48px;padding:56px 56px}
}
/* ---------- レイアウト調整：採用 ---------- */
.recruit.sec{padding-block:72px}
.recruit__grid{gap:32px;align-items:center}
.recruit .h2{margin-bottom:20px}
.recruit .wishes{margin:0 0 18px;gap:6px}
.recruit .prose p{margin-bottom:.8em}
.recruit .btns{margin-top:26px}
.recruit__media{margin:0}
.recruit__media .photo{aspect-ratio:4/3}
@media (min-width:960px){
  .recruit.sec{padding-block:104px}
  .recruit__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:56px;max-width:1120px;margin-inline:auto}
  .recruit__media{position:relative;top:auto}
}

/* プレビュー用トースト（本番では削除） */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:.88rem;z-index:80;max-width:calc(100% - 32px);box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* =========================================================
   下層ページ共通（会社紹介・育成への取り組み）
   TOPと同じ色・書体・動きを使い、ページ上部は淡い水色のグラデーション＋漂う円
   ========================================================= */
.has-fl{position:relative;overflow:hidden;isolation:isolate}
.has-fl>.wrap{position:relative;z-index:1}

.page-hero{padding-block:36px 64px;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.crumbs{margin:0 0 36px;font-size:.8rem;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.crumbs li{display:inline-flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid #9AA3AA;border-right:1.5px solid #9AA3AA;transform:rotate(45deg);margin-right:4px}
.crumbs a{text-decoration:none;color:var(--blue-ink)}
.crumbs a:hover{text-decoration:underline}
.page-hero__title{font-family:var(--f-round);font-weight:700;font-size:clamp(1.9rem,1.3rem + 2.4vw,2.8rem);line-height:1.4;letter-spacing:.06em;margin:0 0 18px}
.page-hero__lead{margin:0;max-width:34em;font-size:1rem;line-height:1.95}
.page-toc{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.page-toc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;background:#fff;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:500;transition:border-color .2s,background .2s}
.page-toc a:hover{border-color:var(--blue);background:var(--bg-soft)}
.page-toc svg{width:14px;height:14px;color:var(--blue-ink);transform:rotate(90deg)}
@media (min-width:768px){.page-hero{padding-block:48px 88px}}

/* 会社紹介：代表メッセージ（全文） */
.message--full .message__grid{align-items:start}
.message--full .prose p{max-width:none}
.message--full .h2{margin-bottom:32px}
.sign--line{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 1.2em;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.sign--line span{font-size:.95rem;color:var(--ink);letter-spacing:.08em}
.sign--line strong{font-size:1.35rem}
@media (min-width:900px){.message--full .message__media{position:sticky;top:110px}}

/* TOP：代表メッセージ（抜粋） */
.message__excerpt{font-size:1.02rem}

/* 会社紹介：会社概要（ページ内） */
.company--page{border-top:1px solid var(--line)}

/* 育成ページ：3つの力 */
.why__head{max-width:760px}
.why__head .ideal__formula{margin:4px 0 28px}
.powers{list-style:none;margin:56px 0 0;padding:0;display:grid}
.power{display:grid;gap:22px;padding:36px 0;border-top:1px solid var(--line)}
.power:last-child{border-bottom:1px solid var(--line)}
.power__head{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-items:center;align-content:start}
.power__icon{width:52px;height:52px;border-radius:14px;background:var(--bg-tint);color:var(--blue-ink);display:grid;place-items:center;grid-row:span 2}
.power__icon svg{width:26px;height:26px}
.power--pink .power__icon{background:#FCEBF2;color:var(--pink-ink)}
.power__en{font-family:var(--f-en);font-weight:600;font-size:.76rem;letter-spacing:.16em;color:var(--blue-ink);margin:0}
.power--pink .power__en{color:var(--pink-ink)}
.power__name{font-family:var(--f-round);font-weight:700;font-size:1.55rem;letter-spacing:.06em;line-height:1.4;margin:0}
.power__body{display:grid;gap:18px;min-width:0}
.power__block h4{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:.88rem;font-weight:700;color:var(--blue-ink);letter-spacing:.06em}
.power__block h4::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--blue)}
.power--pink .power__block h4::before{background:var(--pink)}
.power__block p{margin:0}
.power__block ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.power__block li{position:relative;padding-left:20px;line-height:1.8}
.power__block li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.power--pink .power__block li::before{background:var(--pink)}
@media (min-width:900px){
  .power{grid-template-columns:260px minmax(0,1fr);gap:48px;padding:44px 0}
  .power__body{grid-template-columns:1fr 1fr;gap:40px}
}

/* 育成ページ：実施中／準備中 */
.status__head{max-width:760px;margin-bottom:40px}
.status__grid{display:grid;gap:28px}
.status-col{background:#fff;border-radius:var(--r-card);padding:30px 24px 32px;box-shadow:var(--shadow);min-width:0}
.status-col--soon{background:transparent;box-shadow:none;border:1.5px dashed #BBD8E6}
.status-col__title{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 6px;font-size:1.2rem;font-weight:700;line-height:1.5}
.status-col__note{margin:0 0 22px;font-size:.9rem;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:3px 12px;line-height:1.6;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill--now{background:var(--bg-tint);color:var(--blue-ink)}
.pill--soon{background:#E1EEF6;color:var(--deep)}
.pill--soon::before{background:transparent;border:1.5px solid currentColor;width:5px;height:5px}
.status-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.status-item{background:var(--bg-soft);border-radius:14px;padding:20px 20px 22px}
.status-col--soon .status-item{background:#fff}
.status-item h4{margin:0 0 6px;font-size:1.05rem;line-height:1.6}
.status-item p{margin:0;font-size:.95rem;line-height:1.85}
.status-item .tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.status-item .tags li{font-size:.78rem;font-weight:500;color:var(--deep);background:var(--bg-tint);border-radius:8px;padding:2px 10px}
.status-photo{margin:22px 0 0;aspect-ratio:3/2}
.status-photo img{object-position:40% 45%}
@media (min-width:900px){
  .status__grid{grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  .status-col{padding:38px 36px 40px}
}

/* 下層ページ末尾の導線 */
.next{padding-block:72px;background:var(--bg-tint)}
.next__box{display:grid;gap:12px;max-width:760px}
.next__box .h2{margin-bottom:6px}
.next__box p{margin:0}
.next__box .btns{margin-top:22px}
@media (min-width:768px){.next{padding-block:96px}}

/* TOP：OUR ENGINEERS から育成ページへ */
.ideal__more{display:flex;justify-content:center;margin-top:28px}

/* 調整：下層ページの左端をページ上部とそろえる */
.company--page .company__grid{max-width:1180px}
.company--page dl{max-width:760px}
.next{background:var(--bg-soft);border-top:1px solid var(--line)}
.next__box{max-width:1180px}
.next__inner{display:grid;gap:12px;max-width:760px}
/* 現在のページをメニューで示す */
.gnav a[aria-current="page"]{color:var(--blue-ink);background:var(--bg-tint)}
.spnav a[aria-current="page"]{color:var(--blue-ink);font-weight:700}
.footer__nav a[aria-current="page"]{color:var(--blue-ink);font-weight:700}
/* 育成ページ：見出しの横に写真（PC）、下に写真（スマホ） */
.status__head{display:grid;gap:28px;max-width:none}
.status__head .photo{aspect-ratio:3/2;max-width:520px;width:100%}
.status__head .photo img{object-position:40% 45%}
@media (min-width:900px){.status__head{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}.status__head .photo{justify-self:end}}
.status__grid{align-items:stretch}
.status__head .status-photo{margin:0}
.status__head .h2,.next .h2,.status-item h4,.page-hero__title{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- 背景の円・淡い丸・円弧：ページ下部・下層ページも上部と同じ存在感に ----------
   白背景＝淡い水色、淡い水色背景＝白と水色。文字・写真より後ろ（z-index:0）、動きは従来どおり */
#ideal .fl--soft{background:radial-gradient(circle at 35% 35%,rgba(126,200,227,.22),rgba(126,200,227,.06) 70%,transparent 72%)}
.has-fl .fl--white{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.8),rgba(255,255,255,.3) 68%,transparent 71%)}
@media (max-width:767px){
  /* スマホでも装飾が消えないよう、縮小は控えめに */
  .fl[style*="--s"]{width:calc(var(--s)*.74);height:calc(var(--s)*.74)}
}

/* 「AI・データ基盤へ。」も大きな日本語見出しと同じ書体に（サイズ・色・下のラインは維持） */
.ai-lead__to{font-family:var(--f-round)}

/* =========================================================
   採用情報ページ（recruit.html）
   ========================================================= */
/* ファーストビュー：左にメッセージ、右に食事写真 */
.r-hero__grid{display:grid;gap:36px;align-items:center}
.r-hero__title{font-size:clamp(1.85rem,1.2rem + 2.4vw,2.6rem);margin-bottom:22px}
.r-hero__lead p{margin:0 0 .9em;max-width:32em;line-height:1.95}
.r-hero__lead p:last-child{margin-bottom:0}
.r-hero .btns{margin-top:30px}
.r-hero__media{margin:0;position:relative;min-width:0}
.r-hero__media .photo{position:relative;z-index:1;aspect-ratio:4/3;border-radius:24px}
.r-hero__media .photo img{object-position:50% 32%}
.r-hero__media .arc{width:46%;aspect-ratio:1;left:-12%;bottom:-12%;opacity:.45;color:var(--blue);z-index:0}
.r-hero__media figcaption{font-size:.85rem;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:8px}
.r-hero__media figcaption::before{content:"";width:18px;height:2px;background:var(--pink);border-radius:2px}
.r-hero .page-toc{margin-top:44px}
@media (min-width:960px){
  .r-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .r-hero__media .photo{border-radius:28px 28px 120px 28px}
}
@media (max-width:959px){.r-hero__media{max-width:560px}}
/* 人物写真のホバー（PCのみ・枠固定で画像のみ1.025倍） */
@media (hover:hover) and (pointer:fine) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  .r-hero__media .photo img{transition:transform .5s var(--ease);transform-origin:50% 32%}
  .r-hero__media .photo:hover img{transform:scale(1.025)}
}

/* セクション見出し */
.r-head{max-width:760px;margin-bottom:40px}
.r-head .h2{margin-bottom:18px}
.r-head .page-toc{margin-top:8px}
.page-toc--sm a{background:#fff;font-size:.86rem;min-height:40px;padding:6px 16px}

/* iYCで働くこと：カード3枚（TOPの3つの力カードと同じ見た目） */
.work-cards{margin-top:0}
#work .v-card{background:#EEF7FB;border-color:transparent}
#work .v-card__icon{background:#fff}
#work .v-card h3{word-break:keep-all;overflow-wrap:anywhere;line-height:1.55}
#work .v-card p:not(.v-card__en){color:var(--ink)}
@media (hover:hover){#work .v-card:hover{border-color:transparent;box-shadow:0 10px 24px rgba(47,90,120,.08)}}
.r-link-band{display:grid;gap:20px;align-items:center;margin-top:40px;padding:28px 24px;border-radius:var(--r-card);border:1px solid var(--line);background:#fff}
.r-link-band__text p{margin:0}
.r-link-band__text p+p{margin-top:6px;font-size:.95rem}
.r-link-band__formula{display:flex;flex-wrap:wrap;align-items:center;font-family:var(--f-round);font-weight:700;font-size:1.2rem;letter-spacing:.06em}
.r-link-band__formula .x{position:relative;width:.5em;height:.5em;margin:0 .55em}
.r-link-band__formula .x::before,.r-link-band__formula .x::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:1.5px;border-radius:2px;background:#9AA3AA;transform:translate(-50%,-50%) rotate(45deg)}
.r-link-band__formula .x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.r-link-band .btn{justify-self:start}
@media (min-width:900px){.r-link-band{grid-template-columns:minmax(0,1fr) auto;gap:40px;padding:32px 40px}}

/* 募集職種：3つのカード */
.jobs{display:grid;gap:24px}
.job{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow);padding:30px 24px;display:grid;gap:22px;min-width:0;scroll-margin-top:96px}
.job__label{display:inline-block;margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--blue-ink);background:var(--bg-tint);border-radius:999px;padding:3px 14px}
.job__title{font-family:var(--f-round);font-weight:700;font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem);letter-spacing:.05em;line-height:1.45;margin:0 0 10px;word-break:keep-all;overflow-wrap:anywhere}
.job__lead{margin:0;line-height:1.9}
.job__body{display:grid;gap:20px;min-width:0}
.job__block h4{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 8px;font-size:.9rem;font-weight:700;color:var(--blue-ink);letter-spacing:.06em}
.job__block h4::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--blue)}
.job__block ul:not(.tags){margin:0;padding:0;list-style:none;display:grid;gap:6px}
.job__block ul:not(.tags) li{position:relative;padding-left:20px;line-height:1.8}
.job__block ul:not(.tags) li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.job__block p{margin:0 0 10px;line-height:1.85}
.job__plan{background:var(--bg-soft);border-radius:14px;padding:20px 20px 22px}
.job__plan .tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px;padding:0;list-style:none}
.job__plan .tags li{font-size:.8rem;font-weight:500;color:var(--deep);background:#fff;border:1px solid #D2E6F0;border-radius:8px;padding:2px 10px}
.job__note{font-size:.9rem;color:var(--muted)}
.job__foot{padding-top:18px;border-top:1px solid var(--line)}
.job--data .job__label{color:var(--deep);background:#E1EEF6}
.job--data .job__block h4{color:var(--deep)}
.job--data .job__block h4::before,.job--data .job__block ul:not(.tags) li::before{background:var(--deep);opacity:.55}
@media (min-width:900px){
  .jobs{grid-template-columns:1fr 1fr;gap:28px}
  .job{padding:38px 36px;grid-template-rows:auto 1fr auto}
  .job--data{grid-column:1/-1;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto;column-gap:48px}
  .job--data .job__head{grid-column:1;grid-row:1/3}
  .job--data .job__body{grid-column:2;grid-template-columns:1fr}
  .job--data .job__foot{grid-column:2}
}

/* 募集要項：会社概要と同じ表 */
.r-req{border-top:0}
.r-req .company__grid{max-width:1180px}
.r-req dl{max-width:800px}
.r-req dd small{display:block;margin-top:4px;font-size:.85rem;color:var(--muted)}
.req-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.req-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.req-list b{font-weight:700}
.req-list span{font-size:.85rem;color:var(--muted)}
.req-list em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
@media (min-width:900px){.r-req{padding-block:104px}}

/* 選考の流れ：実際の順番なので番号つき */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:none}
.step{position:relative;background:#fff;border-radius:var(--r-card);padding:24px 22px 24px 76px;box-shadow:0 4px 16px rgba(47,90,120,.06)}
.step__no{position:absolute;left:22px;top:22px;width:40px;height:40px;border-radius:50%;background:var(--bg-tint);color:var(--blue-ink);display:grid;place-items:center;font-family:var(--f-en);font-weight:600;font-size:.85rem;letter-spacing:.04em}
.step__title{margin:4px 0 6px;font-size:1.1rem;font-weight:700;line-height:1.5}
.step p{margin:0;font-size:.93rem;line-height:1.8;color:var(--muted)}
.steps__note{margin:24px 0 0;display:flex;align-items:flex-start;gap:10px;font-size:.95rem}
.steps__note::before{content:"";flex:none;width:7px;height:7px;margin-top:.72em;border-radius:50%;background:var(--blue)}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .step{padding:28px 24px 30px}
  .step__no{position:static;margin-bottom:14px}
  .step:not(:last-child)::after{content:"";position:absolute;right:-15px;top:42px;width:10px;height:10px;border-top:1.5px solid var(--blue);border-right:1.5px solid var(--blue);transform:rotate(45deg)}
}
@media (max-width:899px){
  .step:not(:last-child)::after{content:"";position:absolute;left:41px;bottom:-14px;width:2px;height:14px;background:var(--line)}
}

/* 応募方法 */
.entry{display:grid;gap:32px;background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:36px 22px}
.entry__text .h2{margin-bottom:18px}
.entry__text .btns{margin-top:28px}
.entry__mail{background:var(--bg-soft);border-radius:18px;padding:24px 20px;min-width:0;align-self:center}
.entry__mail-label{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;font-size:.92rem;line-height:1.7}
.entry__mail-ic{flex:none;width:32px;height:32px;border-radius:10px;background:#fff;color:var(--blue-ink);display:grid;place-items:center;border:1px solid var(--line)}
.entry__mail-ic svg{width:18px;height:18px}
.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 10px 10px 16px}
.copy-row__addr{flex:1 1 auto;min-width:0;font-family:var(--f-en);font-weight:600;font-size:1.05rem;letter-spacing:.02em;user-select:all;overflow-wrap:anywhere}
.copy-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:1.5px solid var(--blue);border-radius:9px;background:#fff;color:var(--blue-ink);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:background .2s}
.copy-btn svg{width:16px;height:16px}
.copy-btn:hover{background:var(--bg-tint)}
.copy-btn.is-done{background:var(--blue);color:#fff;border-color:var(--blue)}
.entry__subjects{margin:16px 0 0;display:grid;gap:6px}
.entry__subjects div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:10px;font-size:.9rem}
.entry__subjects dt{color:var(--muted)}
.entry__subjects dd{margin:0;font-weight:500}
.entry__fill{margin:12px 0 0;font-size:.85rem;color:var(--muted)}
@media (min-width:900px){.entry{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;padding:56px}}
@media (max-width:480px){.entry .btn{width:100%}.entry__subjects div{grid-template-columns:1fr;gap:0}}

/* 採用ページ：改行位置と職種カードの調整 */
.r-head .h2,.entry .h2,.r-hero__title{word-break:keep-all;overflow-wrap:anywhere}
.btn,.job__foot .link{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
@media (max-width:480px){
  .btn{padding:12px 20px;font-size:.96rem;line-height:1.6}
  .r-req dl div{grid-template-columns:1fr;gap:2px}
  .r-req dt{font-size:.85rem}
}
/* データ基盤（育成枠）：上に職種名と説明、下に「応募条件」と「学びの構想」を左右に */
@media (min-width:900px){
  .job--data{grid-template-columns:1fr;grid-template-rows:auto;column-gap:0}
  .job--data .job__head,.job--data .job__body,.job--data .job__foot{grid-column:auto;grid-row:auto}
  .job--data .job__lead{max-width:40em}
  .job--data .job__body{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start}
}

/* 採用ページ：冒頭はイメージ写真（顔と手元が入るよう、横長のまま表示）、会社の雰囲気は食事写真で */
.r-hero__media .photo{aspect-ratio:3/2}
.r-hero__media .photo img{object-position:52% 50%}
@media (hover:hover) and (pointer:fine) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  .r-hero__media .photo img{transform-origin:45% 30%}
}
@media (min-width:960px){
  .r-hero__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
}
.work-intro{display:grid;gap:28px;align-items:center;margin-bottom:44px}
.work-intro .r-head{margin-bottom:0}
.work-intro__media{margin:0;position:relative;min-width:0;max-width:560px}
.work-intro__media .photo{position:relative;z-index:1;aspect-ratio:4/3;border-radius:22px}
.work-intro__media .photo img{object-position:50% 32%}
.work-intro__media .arc{width:44%;aspect-ratio:1;right:-10%;bottom:-12%;opacity:.4;color:var(--pink);z-index:0}
.work-intro__media figcaption{font-size:.85rem;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:8px}
.work-intro__media figcaption::before{content:"";width:18px;height:2px;background:var(--pink);border-radius:2px}
@media (min-width:960px){.work-intro{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}.work-intro__media{justify-self:end;width:100%}}
@media (hover:hover) and (pointer:fine) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  .work-intro__media .photo img{transition:transform .5s var(--ease);transform-origin:50% 32%}
  .work-intro__media .photo:hover img{transform:scale(1.025)}
}

/* ---------- 採用ページ：背景の丸（塗りつぶしと輪郭を同程度に・境界で切れない配置・分かる程度に漂う） ---------- */
:root{--k:1}
@media (max-width:767px){:root{--k:.72}}
.fl.rf[style]{width:calc(var(--s)*var(--k));height:calc(var(--s)*var(--k))}
.rf--soft{background:radial-gradient(circle at 38% 36%,rgba(126,200,227,.28),rgba(126,200,227,.12) 48%,rgba(126,200,227,0) 70%)}
.rf--deep{background:radial-gradient(circle at 38% 36%,rgba(126,200,227,.36),rgba(126,200,227,.16) 48%,rgba(126,200,227,0) 70%)}
.rf--white{background:radial-gradient(circle at 38% 36%,rgba(255,255,255,.95),rgba(255,255,255,.5) 46%,rgba(255,255,255,0) 70%)}
.fl.rf.fl--ring{border-color:rgba(126,200,227,.42)}
/* 漂う動き：上下左右に最大40px程度。丸ごとに経路・速さ・開始位置を変え、往復でゆっくり */
@keyframes rf1{0%{transform:translate(0,0)}50%{transform:translate(34px,-28px)}100%{transform:translate(-18px,36px)}}
@keyframes rf2{0%{transform:translate(0,0)}50%{transform:translate(-36px,-18px)}100%{transform:translate(22px,-38px)}}
@keyframes rf3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-28px,32px) scale(1.04)}100%{transform:translate(30px,10px) scale(.98)}}
@keyframes rf4{0%{transform:translate(0,0)}50%{transform:translate(26px,34px)}100%{transform:translate(-32px,-20px)}}

/* 採用ページ冒頭のページ内リンク：文字だけ。通常はほんのりピンク、ホバー・クリック・フォーカス時に少し色が深まる */
.r-toc a{gap:0;padding:8px 20px;background:#FFF7F9;border:1px solid #EEDDE3;color:var(--ink);transition:background-color .3s ease,border-color .3s ease}
.r-toc a:hover,.r-toc a:active,.r-toc a:focus-visible{background:#FCEBF1;border-color:#DFB7C5;color:var(--ink)}
.r-toc a:focus-visible{outline:2px solid #DFB7C5;outline-offset:3px}
/* 募集職種の下の3つのリンクも冒頭の5つと同じデザインに（大きさ・色・状態変化をそろえる） */
.page-toc--sm.r-toc a{font-size:.9rem;min-height:44px;padding:8px 20px;background:#FFF7F9;border-color:#EEDDE3}
.page-toc--sm.r-toc a:hover,.page-toc--sm.r-toc a:active,.page-toc--sm.r-toc a:focus-visible{background:#FCEBF1;border-color:#DFB7C5}

/* 採用ページ「技術 × 人間力 × 主体性」：TOPと同じ色使い（文字は濃いグレー、技術・主体性は水色、人間力はピンクの短い線、× は淡いグレー）。
   線の長さ・太さ・余白は採用ページの文字サイズ（1.2rem）に合わせて縮小 */
.r-link-band__formula{margin:0 0 4px}
.r-link-band__formula>span:not(.x){position:relative;padding-bottom:8px;line-height:1.3;color:#2F3337}
.r-link-band__formula>span:not(.x)::after{content:"";position:absolute;left:50%;bottom:0;width:1.1em;height:2px;border-radius:2px;transform:translateX(-50%);background:rgba(126,200,227,.6)}
.r-link-band__formula>span.pk::after{background:rgba(243,178,204,.75)}
.r-link-band__formula .x{margin:0 .55em 8px}
.r-link-band__text p+p{margin-top:12px}

/* 募集要項「想定年収」：経験者・育成枠は淡い水色の小さなラベル（項目名と同じグレー）、説明と金額は通常の太さ */
.req-list li{gap:4px 12px;align-items:center}
.req-tag{display:inline-block;padding:0 8px;border-radius:4px;background:var(--bg-tint);color:var(--muted);font-size:.8rem;font-weight:500;line-height:1.8;letter-spacing:.04em}
.req-list span:not(.req-tag){font-size:.85rem;color:var(--muted)}
.req-list em{font-weight:400}

/* データ基盤エンジニアの説明文：PCは指定の位置で2行、スマホは自然に折り返し */
.nw{white-space:nowrap}
.br-pc{display:none}
@media (min-width:900px){.br-pc{display:inline}.job--data .job__lead{max-width:none}}

/* 育成ページ：準備中欄の開始予定ラベル */
.status-item__label{margin:0 0 8px}
.pill--date{background:#E1EEF6;color:var(--deep)}
.status-item p+p{margin-top:.6em}
/* 育成ページ：補足文を外した「これから始まる育成の取り組み」の見出し下の余白 */
.status-col--soon .status-col__title{margin-bottom:22px}

/* ---------- 育成ページ：見出しの配置と装飾 ----------
   冒頭：GROWTH・「育成への取り組み」・説明文は中央揃え（ボタン・パンくずは左揃えのまま） */
.page-hero--training .eyebrow{display:flex;justify-content:center}
.page-hero--training .page-hero__title{text-align:center}
/* 「技術 × 人間力 × 主体性」：OUR ENGINEERS と見出しを中央に（説明文は左揃えのまま） */
#why .why__head{max-width:none}
#why .why__head .eyebrow{display:flex;justify-content:center}
#why .why__head .ideal__formula{justify-content:center;margin:4px 0 0}
/* 冒頭の説明文も見出しに合わせて中央配置・中央揃え（幅は従来どおり34em以内） */
.page-hero--training .page-hero__lead{margin-inline:auto;text-align:center}
/* 冒頭の2つのリンクボタンも中央に（横並びのまとまり全体を中央、折り返したときも各行を中央） */
.page-hero--training .page-toc{justify-content:center}

/* ---------- 育成ページ 2026-10-16 調整（このページだけに適用） ---------- */
/* 1. 冒頭の説明文：文章の枠を中央に置き、文字も中央揃え（幅は34em以内） */
.page-hero.page-hero--training .page-hero__lead{display:block;max-width:34em;margin-left:auto;margin-right:auto;text-align:center}
/* 2. 冒頭の2つのリンクボタン：白に近いごく淡いピンク。内側の余白を広げて一回り大きく、高さをそろえる */
.page-hero--training .page-toc{justify-content:center;align-items:stretch}
.page-hero--training .r-toc a{min-height:52px;padding:12px 28px;background:#FFFBFC;border-color:#F0E6EA}
.page-hero--training .r-toc a:hover,.page-hero--training .r-toc a:active,.page-hero--training .r-toc a:focus-visible{background:#FFF5F8;border-color:#E8D5DE}
.page-hero--training .r-toc a:focus-visible{outline-color:#E8D5DE}
@media (max-width:480px){.page-hero--training .r-toc a{padding:12px 24px}}
/* 3. 「技術 × 人間力 × 主体性」：下線とラインをやめ、各単語の下側1/4に淡いマーカー（× には付けない） */
#why .why__head .ideal__formula{margin:4px 0 32px}
#why .why__head .ideal__formula .word{padding:0 .12em;background:linear-gradient(transparent 66%,rgba(126,200,227,.32) 66%,rgba(126,200,227,.32) 90%,transparent 90%)}
#why .why__head .ideal__formula .word--pink{background:linear-gradient(transparent 66%,rgba(243,178,204,.4) 66%,rgba(243,178,204,.4) 90%,transparent 90%)}
#why .why__head .ideal__formula .word::after{content:none}
#why .why__head .ideal__formula .x{margin-bottom:0}
/* 「技術 × 人間力 × 主体性」直下の説明文（#why .why__head > .prose の2段落）：枠ごと中央に置き、文字も中央揃え（幅は36em以内） */
#why .why__head > .prose{text-align:center}
#why .why__head > .prose p{max-width:36em;margin-left:auto;margin-right:auto;text-align:center}
#why .why__head > .prose p:last-child{margin-bottom:0}

/* ---------- 会社紹介ページ 2026-10-16 調整（このページだけに適用） ---------- */
/* 冒頭の2つのリンクボタン：育成ページ冒頭と同じ色・大きさ・余白・ホバー（配置は左寄せのまま） */
.page-hero--company .page-toc{align-items:stretch}
.page-hero--company .r-toc a{min-height:52px;padding:12px 28px;background:#FFFBFC;border-color:#F0E6EA;color:var(--ink)}
.page-hero--company .r-toc a:hover,.page-hero--company .r-toc a:active,.page-hero--company .r-toc a:focus-visible{background:#FFF5F8;border-color:#E8D5DE}
.page-hero--company .r-toc a:focus-visible{outline-color:#E8D5DE}
@media (max-width:480px){.page-hero--company .r-toc a{padding:12px 24px}}
/* 代表メッセージ：句・語の途中や1文字だけの行をできるだけ避けて折り返す */
.message--full .prose p{word-break:auto-phrase;text-wrap:pretty}
.message--full .h2{word-break:auto-phrase;text-wrap:balance}
/* 会社概要：長い項目名は読みやすい位置で折り返し、取引銀行は1行ずつ */
.company--page dt{word-break:keep-all;overflow-wrap:anywhere;line-height:1.7}
.company--page dd .bank{display:block}
.company--page dd{overflow-wrap:anywhere}

/* ===== 会社紹介：アクセス ===== */
.access{position:relative;padding-block:80px 88px;background:#fff;border-top:1px solid var(--line)}
.access .h2{margin-bottom:32px}
.access__grid{display:grid;gap:28px}
.access__map{position:relative;border-radius:var(--r-card,20px);overflow:hidden;border:1px solid var(--line);background:var(--bg-soft);aspect-ratio:4/3}
.access__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.access__name{margin:0 0 12px;font-family:"Zen Kaku Gothic New",var(--ff-jp,sans-serif);font-weight:700;font-size:1.25rem;color:var(--ink)}
.access__dl{margin:0;border-top:1px solid var(--line)}
.access__dl div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.access__dl dt{color:var(--muted);font-weight:500}
.access__dl dd{margin:0;overflow-wrap:anywhere;line-height:1.8}
.access__tel{color:inherit;text-decoration:none;font-family:Inter,sans-serif;letter-spacing:.02em}
.access__tel:hover{color:var(--blue-ink,#3F7FA6);text-decoration:underline}
.access__note{margin:18px 0 0;padding:12px 16px;background:#F6FAFC;border-radius:12px;font-size:.92rem}
.access__maplink{margin-top:20px}
@media (min-width:900px){
  .access{padding-block:104px 112px}
  .access__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}
}
@media (max-width:480px){
  .access__dl div{grid-template-columns:4.8em minmax(0,1fr);gap:12px;font-size:.92rem}
  .access__map{aspect-ratio:1/1}
}

/* ===== 会社紹介：代表メッセージ（見出し2行・新しい代表写真） ===== */
.message--full .h2.msg-title{text-wrap:wrap;word-break:normal}
.message--full .message__media .photo img{object-position:62% 40%}
.message--full .message__media .photo img{transform-origin:62% 40%}
@media (min-width:900px){
  .message--full .message__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
}

/* ===== 会社紹介：サイン風の氏名 ===== */
@font-face{font-family:"iYC Sign";src:url("../fonts/zenkurenaido-sign.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.message--full .sign--line strong{font-family:"iYC Sign","Zen Kurenaido",serif;font-weight:400;font-synthesis:none;font-size:1.5rem;letter-spacing:.05em;color:#3D4247;line-height:1.3}
@media (max-width:480px){.message--full .sign--line strong{font-size:1.4rem}}

/* ===== 会社紹介：冒頭エリアだけの桜の花びら ===== */
.hero-petals{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
@media (prefers-reduced-motion:reduce){.hero-petals{display:none}}
/* 冒頭より下の花びら（会社紹介ページのみ。ヘッダーより下の重なり順・操作は透過） */
.page-petals{position:fixed;left:0;top:0;width:100%;height:100%;z-index:40;pointer-events:none;display:block}
@media (prefers-reduced-motion:reduce){.page-petals{display:none}}

/* ===== 会社紹介：会社概要の項目名（PCでは「適格請求書／発行事業者登録番号」の2行。全行の列位置をそろえる） ===== */
@media (min-width:768px){
  .company--page dl div{grid-template-columns:9.6em minmax(0,1fr)}
  .company--page dt .dt-line2{white-space:nowrap}
}
/* 登録番号を項目名の最後の行（「発行事業者登録番号」／スマホでは「登録番号」）のベースラインにそろえる */
.company--page dl .row-invoice dd{align-self:end;line-height:1.7}

/* ===== 採用ページ：募集職種の下の3つのボタン（さらに淡いピンク。冒頭のページ内案内ボタンは対象外） ===== */
.r-toc.r-toc--pale a{background:#FFFBFC;border-color:#F0E6EA}
.r-toc.r-toc--pale a:hover,.r-toc.r-toc--pale a:active,.r-toc.r-toc--pale a:focus-visible{background:#FFF5F8;border-color:#E8D5DE}
.r-toc.r-toc--pale a:focus-visible{outline-color:#E8D5DE}

/* ===== SES事業ページ（ses.html）：写真なし。文字・カード・ステップで構成 ===== */
.ses-hero__catch{font-family:var(--f-round);font-weight:700;font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem);line-height:1.6;letter-spacing:.04em;margin:0 0 20px;color:var(--ink)}
.ses-hero__lead{max-width:38em;display:grid;gap:12px}
.ses-hero__lead p{margin:0;line-height:1.95}
.ses-hero .btns{margin-top:32px}
.ses-areas{display:grid;gap:20px}
.ses-area{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow);padding:30px 24px;min-width:0}
.ses-area__en{margin:0 0 8px;font-family:var(--f-en);font-weight:600;font-size:.75rem;letter-spacing:.14em;color:var(--blue-ink)}
.ses-area__title{margin:0 0 14px;font-family:var(--f-round);font-weight:700;font-size:1.35rem;line-height:1.5;letter-spacing:.04em}
.ses-area__text{margin:0;line-height:1.95}
.ses-values{display:grid;gap:18px}
.ses-value{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 22px;min-width:0}
.ses-value__title{margin:0 0 12px;font-size:1.1rem;font-weight:700;line-height:1.6;padding-top:16px;position:relative}
.ses-value__title::before{content:"";position:absolute;left:0;top:0;width:28px;height:3px;border-radius:2px;background:var(--blue)}
.ses-value--pink .ses-value__title::before{background:var(--pink)}
.ses-value__text{margin:0;line-height:1.9;font-size:.95rem}
.ses-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ses-step{position:relative;background:#fff;border-radius:var(--r-card);box-shadow:0 4px 16px rgba(47,90,120,.06);padding:22px 22px 22px 76px;min-width:0}
.ses-step__no{position:absolute;left:22px;top:20px;width:40px;height:40px;border-radius:50%;background:var(--bg-tint);color:var(--blue-ink);display:grid;place-items:center;font-family:var(--f-en);font-weight:600;font-size:.85rem;letter-spacing:.04em}
.ses-step__title{margin:6px 0 6px;font-size:1.08rem;font-weight:700;line-height:1.5}
.ses-step__text{margin:0;line-height:1.85;font-size:.95rem}
.ses-contact .h2{word-break:keep-all;overflow-wrap:anywhere}
.ses-contact .btns{gap:12px}
@media (min-width:768px){
  .ses-areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .ses-area{padding:38px 36px}
  .ses-step{display:grid;grid-template-columns:44px minmax(0,13em) minmax(0,1fr);align-items:center;gap:28px;padding:24px 32px}
  .ses-step__no{position:static}
  .ses-step__title{margin:0}
}
@media (min-width:900px){
  .ses-values{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .ses-value{padding:32px 28px}
  .ses-steps{max-width:980px}
}
@media (max-width:480px){.ses-contact .btn{width:100%}}
.ses-contact .entry__subjects div{grid-template-columns:auto minmax(0,1fr);gap:12px}
@media (max-width:480px){.ses-contact .entry__subjects div{grid-template-columns:1fr;gap:0}}

/* ===== パートナー企業の方へ（partner.html）：SES事業ページの部品を共用 ===== */
.p-coop__note{margin:28px 0 0;font-size:.95rem;line-height:1.9;color:var(--ink)}
@media (min-width:900px){
  .ses-steps--row{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:none}
  .ses-steps--row .ses-step{display:block;padding:30px 28px 32px}
  .ses-steps--row .ses-step__no{position:static;margin-bottom:16px}
  .ses-steps--row .ses-step__title{margin:0 0 10px}
}

/* ===== お問い合わせ（contact.html）：フォーム ===== */
.cf-card{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:32px 20px 36px;max-width:820px;min-width:0}
.cf-title{margin:0 0 14px;font-family:var(--f-round);font-weight:700;font-size:1.35rem;letter-spacing:.04em}
.cf-steps{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cf-steps li{font-size:.8rem;font-weight:700;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:4px 14px}
.cf-steps li.is-current{color:#fff;background:var(--blue);border-color:var(--blue)}
.cf-form{display:grid;gap:26px}
.cf-fieldset{border:0;margin:0;padding:0;min-width:0}
.cf-field{display:grid;gap:8px;min-width:0}
.cf-label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.98rem;padding:0;margin:0 0 2px}
.cf-badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;line-height:1;padding:5px 8px;border-radius:6px;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);letter-spacing:.04em;flex:none}
.cf-badge--req{background:#FDEEF4;border-color:#F3C9D9;color:#B4466E}
.cf-input{width:100%;max-width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #CFE2EC;border-radius:10px;transition:border-color .2s,box-shadow .2s}
.cf-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(126,200,227,.28)}
.cf-input--short{max-width:22em}
.cf-textarea{min-height:200px;line-height:1.8;resize:vertical}
.cf-hint{margin:0;font-size:.82rem;color:var(--muted);line-height:1.7}
.cf-error{margin:0;font-size:.85rem;font-weight:700;color:#C0392B;line-height:1.6}
.cf-field.is-error .cf-input{border-color:#E08A80;background:#FFF9F8}
.cf-field.is-error .cf-radio span{border-color:#E08A80}
.cf-radios{display:grid;gap:10px}
.cf-radio{position:relative;display:block;cursor:pointer}
.cf-radio input{position:absolute;opacity:0;width:1px;height:1px}
.cf-radio span{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border:1.5px solid #CFE2EC;border-radius:10px;background:#fff;font-size:.95rem;transition:border-color .2s,background .2s}
.cf-radio span::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #B9D3E0;background:#fff;box-sizing:border-box}
.cf-radio input:checked+span{border-color:var(--blue);background:var(--bg-soft)}
.cf-radio input:checked+span::before{border:5px solid var(--blue)}
.cf-radio input:focus-visible+span{box-shadow:0 0 0 4px rgba(126,200,227,.35)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-agree{padding-top:6px;border-top:1px solid var(--line)}
.cf-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;line-height:1.7;padding-top:18px}
.cf-check input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--blue)}
.cf-check a{color:var(--blue-ink);text-decoration:underline}
.cf-check .cf-badge{margin-top:3px}
.cf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.cf-actions--two{margin-top:28px}
.cf-btn{min-width:240px;justify-content:center}
.cf-btn[disabled]{opacity:.6;cursor:wait}
.cf-alert{margin:0;padding:14px 16px;border-radius:12px;background:#FFF6F5;border:1px solid #F1C6C0;color:#8E2B20;font-size:.9rem;line-height:1.7}
.cf-alert p{margin:0}
.cf-alert__sub{margin-top:6px!important;color:var(--ink)}
.cf-alert--error{margin-top:20px}
.cf-lead{margin:0 0 18px;line-height:1.8}
.cf-lead:focus,.cf-done__title:focus{outline:none}
.cf-review{margin:0;border-top:1px solid var(--line)}
.cf-review div{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.cf-review dt{color:var(--muted);font-weight:500}
.cf-review dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}
.cf-done{display:grid;gap:12px}
.cf-done p{margin:0;line-height:1.9}
.cf-done__title{font-family:var(--f-round);font-weight:700;font-size:1.3rem;color:var(--blue-ink)}
.cf-mail{max-width:820px;margin-top:28px;padding:20px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid var(--line)}
.cf-mail__title{margin:0 0 4px;font-weight:700;font-size:.92rem}
.cf-mail__note{margin:0 0 14px;font-size:.85rem;color:var(--muted);line-height:1.7}
.cf-mail__rows{display:grid;gap:10px}
.cf-mail__row{display:grid;gap:6px;min-width:0}
.cf-mail__label{font-size:.8rem;font-weight:700;color:var(--muted)}
.cf-mail .copy-row{padding:6px 6px 6px 14px}
.cf-mail .copy-row__addr{font-size:.95rem}
.cf-mail .copy-btn{min-height:36px;padding:4px 12px}
@media (min-width:768px){
  .cf-card{padding:48px 52px 52px}
  .cf-radios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-mail{padding:22px 28px}
  .cf-mail__rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (max-width:480px){
  .cf-btn{width:100%;min-width:0}
  .cf-review div{grid-template-columns:1fr;gap:2px}
}
.cf-card [hidden]{display:none!important}

/* ===== お問い合わせ：説明文からフォームまでの余白を約半分に ===== */
.page-hero.ct-hero{padding-bottom:16px}
.sec.ct-form{padding-top:24px}
@media (min-width:768px){
  .page-hero.ct-hero{padding-bottom:24px}
  .sec.ct-form{padding-top:32px}
}

/* ===== プライバシーポリシー（privacy.html）：本文を読みやすい幅・行間で ===== */
.page-hero.pp-hero{padding-bottom:32px}
.sec.pp-body{padding-top:40px;background:#fff}
.pp-doc{max-width:46em;min-width:0}
.pp-intro{margin:0 0 40px;line-height:2;font-size:1rem}
.pp-sec{padding-top:32px;margin-top:32px;border-top:1px solid var(--line)}
.pp-sec:first-of-type{margin-top:0}
.pp-sec__title{margin:0 0 16px;font-size:1.15rem;font-weight:700;line-height:1.6;letter-spacing:.04em;color:var(--ink)}
.pp-sec__body{display:grid;gap:14px}
.pp-sec__body p{margin:0;line-height:2;font-size:.97rem;overflow-wrap:anywhere}
.pp-sec__body ul{margin:0;padding:0 0 0 1.4em;display:grid;gap:6px;line-height:1.9;font-size:.97rem}
.pp-sec__body li::marker{color:var(--blue)}
.pp-sec__body a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.pp-org{padding:16px 20px;background:var(--bg-soft);border-radius:12px}
.pp-contact{margin:0;display:grid;gap:6px;font-size:.97rem}
.pp-contact div{display:grid;grid-template-columns:4em minmax(0,1fr);gap:12px}
.pp-contact dt{color:var(--muted)}
.pp-contact dd{margin:0;overflow-wrap:anywhere}
@media (min-width:768px){
  .page-hero.pp-hero{padding-bottom:40px}
  .sec.pp-body{padding-top:56px}
  .pp-sec{padding-top:40px;margin-top:40px}
  .pp-sec__title{font-size:1.25rem}
}
.pp-sec__body p.pp-contact{display:block}
.pp-doc p,.pp-doc li{text-wrap:pretty}

/* ===== 採用ページ：よくあるご質問（開閉式） ===== */
.r-faq{border-top:1px solid var(--line);background:#fff}
.faq-list{max-width:860px;display:grid;gap:12px}
.faq-item{background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;transition:background .2s,border-color .2s}
.faq-item[open]{background:#fff;border-color:#CFE2EC;box-shadow:0 4px 16px rgba(47,90,120,.06)}
.faq-q{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 18px;cursor:pointer;border-radius:16px;font-weight:700;font-size:1rem;line-height:1.7}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}
.faq-q:hover .faq-q__text{color:var(--blue-ink)}
.faq-q:focus-visible{outline:3px solid rgba(126,200,227,.6);outline-offset:2px}
.faq-mark{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-en);font-weight:600;font-size:.9rem;background:#fff;color:var(--blue-ink);border:1px solid var(--line)}
.faq-mark--a{background:#FDEEF4;color:#B4466E;border-color:#F3C9D9}
.faq-icon{position:relative;width:20px;height:20px;flex:none}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;margin-top:-.75px;background:var(--blue-ink);border-radius:1px;transition:transform .25s ease,opacity .25s ease}
.faq-icon::after{transform:rotate(90deg)}
.faq-item[open] .faq-icon::after{transform:rotate(0);opacity:0}
.faq-a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:0 18px 22px}
.faq-a p{margin:0;padding-top:4px;line-height:1.95;font-size:.95rem;text-wrap:pretty}
@media (min-width:768px){
  .faq-q{padding:22px 26px;gap:18px}
  .faq-a{padding:0 26px 26px;gap:18px}
  .faq-a p{padding-right:38px}
}
@media (prefers-reduced-motion:reduce){.faq-icon::before,.faq-icon::after{transition:none}}
.faq-q__text,.faq-a p{word-break:auto-phrase;text-wrap:pretty}
@media (max-width:480px){
  .faq-q{padding:16px 14px;gap:10px}
  .faq-a{padding:0 14px 20px;gap:10px}
  .faq-mark{width:28px;height:28px;font-size:.82rem}
}

/* ===== 採用ページ：募集要項→よくあるご質問→選考の流れ の余白を詰める ===== */
.r-req{padding-bottom:32px}
.sec.r-faq{padding-top:38px;padding-bottom:64px}
#flow.sec{padding-top:48px}
@media (min-width:900px){.r-req{padding-bottom:64px}}
@media (min-width:768px){
  .sec.r-faq{padding-top:50px;padding-bottom:96px}
  #flow.sec{padding-top:72px}
}

/* ===== 採用ページ：スマホでの折り返し（言葉の途中や1文字だけの行を避ける。PC表示は変えない） ===== */
@media (max-width:767px){
  .job__lead,.job li,.r-req dd,.step p,.entry .prose p{word-break:auto-phrase;text-wrap:pretty}
}
@media (max-width:767px){#positions .r-head .page-toc{margin-top:0;padding-top:14px}}

/* ===== 採用ページ：「iYCで働くこと」ボタンの停止位置（このセクションだけ。余白や配置は変えない） ===== */
#work{scroll-margin-top:-56px}
@media (min-width:900px){#work{scroll-margin-top:-98px}}
/* 「募集職種」「募集要項」ボタンの停止位置（この2つのセクションだけ） */
#positions{scroll-margin-top:-56px}
#requirements{scroll-margin-top:-32px}
@media (min-width:900px){
  #positions{scroll-margin-top:-90px}
  #requirements{scroll-margin-top:-97px}
}

/* =========================================================
   会社紹介：企業理念・つなぎのメッセージ・ビジョン（2026-10-20 シャボン玉の背景表現に変更）
   PC：左に見出しと理念・ビジョンの言葉（背後に半透明の泡）／右に想いの本文。スマホは1カラム
   ========================================================= */
.pv-block{padding-block:64px 72px;background:linear-gradient(180deg,var(--bg-tint) 0%,#F3F9FC 18%,#FAFDFE 46%,#F3F9FC 78%,#F3F9FC calc(100% - 96px),#fff 100%)}
.pv__head{position:relative;isolation:isolate;padding:40px 4px 44px}
.pv__head>*:not(.bubbles){position:relative;z-index:1}
.pv__head .eyebrow{margin-bottom:8px}
#vision .pv__head .eyebrow{color:var(--pink-ink)}
.pv__label{margin:0 0 12px;font-family:var(--f-jp);font-weight:700;font-size:.9rem;letter-spacing:.24em;color:var(--muted);line-height:1.6}
.pv__statement{margin:0;font-family:var(--f-round);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);line-height:1.7;letter-spacing:.04em;color:var(--ink)}
.pv__body{margin-top:12px}
.pv__sub{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:.95rem;font-weight:700;letter-spacing:.14em;color:var(--blue-ink);line-height:1.6}
.pv__sub::before{content:"";width:24px;height:1.5px;border-radius:2px;background:var(--blue);flex:none}
#vision .pv__sub::before{background:var(--pink)}
.pv__text p{margin:0 0 .9em;font-size:1rem;line-height:2.05;word-break:auto-phrase;text-wrap:pretty}
.pv__text p:last-child{margin-bottom:0}

/* シャボン玉：中心は透け、縁がほんのり色づき、左上に白い光。文字より後ろに置く */
.bubbles{position:absolute;inset:0;z-index:0;pointer-events:none}
.bb{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 9%,rgba(255,255,255,0) 20%),
             radial-gradient(circle at 50% 50%,rgba(126,200,227,.05) 0,rgba(126,200,227,.10) 52%,rgba(126,200,227,.26) 68%,rgba(126,200,227,.10) 70.5%,rgba(126,200,227,0) 71%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.bb--1{width:398px;height:353px;left:-72px;top:50%;margin-top:-176px;animation:bb-a 18s ease-in-out -3s infinite alternate}
.bb--2{width:140px;height:140px;left:296px;top:-14px;animation:bb-b 15s ease-in-out -7s infinite alternate}
.bb--3{width:64px;height:64px;left:292px;bottom:-4px;animation:bb-c 13s ease-in-out -5s infinite alternate;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,1) 0,rgba(255,255,255,.7) 14%,rgba(255,255,255,0) 30%),radial-gradient(circle,rgba(255,255,255,.55) 0,rgba(255,255,255,.35) 60%,rgba(126,200,227,.22) 69%,rgba(126,200,227,0) 71%)}
/* 企業理念：水色と白の泡 */
.bubbles--blue .bb--1{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0,rgba(255,255,255,.5) 8%,rgba(255,255,255,0) 18%),radial-gradient(circle,rgba(126,200,227,.10) 0,rgba(126,200,227,.15) 52%,rgba(126,200,227,.25) 67%,rgba(126,200,227,.09) 70.5%,rgba(126,200,227,0) 71%)}
/* ビジョン：水色の世界観に、淡いピンクの泡をアクセントとして */
.bubbles--mix .bb--1{left:-70px;width:440px;height:423px;margin-top:-211px;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0,rgba(255,255,255,.5) 8%,rgba(255,255,255,0) 18%),radial-gradient(circle at 60% 62%,rgba(243,178,204,.10) 0,rgba(126,200,227,.11) 48%,rgba(126,200,227,.22) 67%,rgba(243,178,204,.12) 70.5%,rgba(243,178,204,0) 71%)}
.bubbles--mix .bb--2{left:auto;right:6%;top:4px;width:132px;height:132px;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 10%,rgba(255,255,255,0) 22%),radial-gradient(circle,rgba(243,178,204,.08) 0,rgba(243,178,204,.16) 52%,rgba(243,178,204,.36) 68%,rgba(243,178,204,.12) 70.5%,rgba(243,178,204,0) 71%)}
.bubbles--mix .bb--3{left:46%;bottom:0}
@keyframes bb-a{0%{transform:translate(0,0)}100%{transform:translate(14px,-12px)}}
@keyframes bb-b{0%{transform:translate(0,0)}100%{transform:translate(-12px,16px)}}
@keyframes bb-c{0%{transform:translate(0,0)}100%{transform:translate(10px,-14px)}}
@media (prefers-reduced-motion:reduce){.bb{animation:none!important}}

/* つなぎのメッセージ：四角い帯ではなく、ふちが溶けるカプセル型のやわらかい形 */
.pv-bridge{position:relative;max-width:900px;margin:40px auto;padding:34px 48px;text-align:center;border-radius:999px;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(220,238,247,.95) 0%,rgba(222,239,247,.92) 34%,rgba(227,241,248,.85) 70%,rgba(234,245,250,.42) 90%,rgba(234,245,250,0) 100%)}
.pv-bridge__text{position:relative;margin:0}
.pv-bridge__lead{display:block;font-family:var(--f-round);font-weight:700;font-size:clamp(1.06rem,.96rem + .45vw,1.25rem);letter-spacing:.12em;line-height:1.8;color:var(--ink)}
.pv-bridge__lead::after{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--pink);margin:10px auto 8px;box-shadow:-14px 0 0 -1px rgba(243,178,204,.5),14px 0 0 -1px rgba(243,178,204,.5)}
.pv-bridge__rest{display:block;font-size:clamp(.94rem,.9rem + .2vw,1.02rem);letter-spacing:.08em;line-height:2;color:#4A5157}
.pv-bridge__dot{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,1) 0,rgba(255,255,255,.6) 16%,rgba(255,255,255,0) 32%),radial-gradient(circle,rgba(255,255,255,.4) 0,rgba(126,200,227,.14) 58%,rgba(126,200,227,.34) 68%,rgba(126,200,227,0) 71%)}
.pv-bridge__dot--l{width:46px;height:46px;left:6%;top:-10px}
.pv-bridge__dot--r{width:28px;height:28px;right:9%;bottom:-6px;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,1) 0,rgba(255,255,255,.6) 16%,rgba(255,255,255,0) 32%),radial-gradient(circle,rgba(255,255,255,.4) 0,rgba(243,178,204,.18) 58%,rgba(243,178,204,.4) 68%,rgba(243,178,204,0) 71%)}

/* 代表メッセージへ：同じごく淡い水色から白へ自然に移す（会社紹介ページのみ） */
.pv-block + .message--full.sec{padding-top:72px;background:#fff}

/* 会社紹介ページの背景の円：白抜きの円・輪郭の円を少しはっきり */
.rf--bright{background:radial-gradient(circle at 38% 36%,rgba(255,255,255,1),rgba(255,255,255,.7) 46%,rgba(255,255,255,0) 70%)}
.fl.rf.fl--ring.rf--ring-strong,.page-hero--company .fl.rf.fl--ring,.message--full .fl.rf.fl--ring{border-color:rgba(126,200,227,.58)}
.page-hero--company .rf--soft{background:radial-gradient(circle at 38% 36%,rgba(126,200,227,.36),rgba(126,200,227,.16) 48%,rgba(126,200,227,0) 70%)}

/* 会社紹介：冒頭エリア。他ページより薄く見えないよう、水色を少しはっきり */
.page-hero.page-hero--company{background:linear-gradient(180deg,#fff 0%,#F1F8FC 34%,var(--bg-tint) 100%)}

@media (min-width:900px){
  .pv-block{padding-block:96px 96px;background:linear-gradient(180deg,var(--bg-tint) 0%,#F3F9FC 18%,#FAFDFE 46%,#F3F9FC 78%,#F3F9FC calc(100% - 120px),#fff 100%)}
  .pv{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:72px;align-items:center}
  .pv__head{padding:64px 8px 68px}
  .pv__head .pv__statement{font-size:clamp(1.5rem,.9rem + 1.25vw,1.85rem)}
  .pv__body{margin-top:0}
  .pv-bridge{margin:48px auto;padding:40px 72px}
  .pv-block + .message--full.sec{padding-top:104px}
}
@media (max-width:899px){
  .bb--1{width:265px;height:240px;left:-52px;margin-top:-120px}
  .bb--2{width:104px;height:104px;left:auto;right:4px;top:0}
  .bb--3{width:52px;height:52px;left:auto;right:30%;bottom:4px}
  .bubbles--mix .bb--1{width:296px;height:283px;margin-top:-150px}
  .bubbles--mix .bb--2{width:96px;height:96px;right:2px}
}
@media (max-width:767px){
  .pv__head{padding:30px 2px 30px}
  .pv__text p{font-size:.97rem;line-height:2}
  .pv-bridge{margin:36px -12px;padding:34px 26px;border-radius:120px/90px;
    background:radial-gradient(ellipse 52% 50% at 50% 50%,rgba(220,238,247,.95) 0%,rgba(222,239,247,.92) 34%,rgba(227,241,248,.85) 72%,rgba(234,245,250,.38) 92%,rgba(234,245,250,0) 100%)}
  .pv-bridge__dot--l{width:34px;height:34px;left:8%;top:-4px}
  .pv-bridge__dot--r{width:22px;height:22px;right:10%;bottom:0}
}
@media (max-width:419px){.pv__head .pv__statement{font-size:1.42rem}}
@media (max-width:359px){.pv__statement{font-size:1.32rem;letter-spacing:.02em}}

/* 会社紹介：冒頭の説明文（文の途中で不自然に折り返さないよう幅を広げる） */
.page-hero--company .page-hero__lead{max-width:none;word-break:auto-phrase;text-wrap:pretty}

@media (max-width:767px){.pv-block .fl--pc{display:none}}

/* 会社紹介：会社概要は白背景で情報を読みやすく（塗りの円は使わず、輪郭の円のみ控えめに）。罫線を少しはっきり */
.company.company--page{background:#fff;border-top-color:#DCEAF1}
.company--page dl div{border-bottom-color:#D2E3EC}
@media (min-width:900px){.company--page dl{border-top-color:#D2E3EC}}
.company--page .fl.rf.fl--ring{border-color:rgba(126,200,227,.32)}
@media (max-width:767px){.company--page .fl--pc{display:none}}
/* 代表メッセージの署名：書式はVersion 57のまま、氏名の文字サイズのみ約13%小さく（PC 1.5rem→1.3rem／スマホ 1.4rem→1.22rem） */
.message--full .sign--line strong{font-size:1.3rem}
@media (max-width:480px){.message--full .sign--line strong{font-size:1.22rem}}

/* =========================================================
   SES事業ページ：ファーストビューの写真（2026-10-20追加）
   左に見出し・本文・ボタン、右に3名の打ち合わせ写真。スマホは文章の下に写真
   ========================================================= */
.ses-hero__grid{display:grid;gap:40px;align-items:center}
.ses-hero__text{min-width:0}
.ses-hero__media{position:relative;margin:0;min-width:0;max-width:560px}
.ses-hero__media .photo{position:relative;z-index:1;aspect-ratio:4/3;border-radius:24px;box-shadow:0 14px 36px rgba(47,90,120,.10)}
.ses-hero__media .photo img{object-position:50% 45%}
.ses-hero__media .arc{width:44%;aspect-ratio:1;left:-12%;bottom:-13%;opacity:.42;color:var(--blue);z-index:0}
@media (min-width:960px){
  .ses-hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px}
  .ses-hero__media{max-width:none;justify-self:end;width:100%}
  .ses-hero__media .photo{border-radius:28px 28px 120px 28px}
}
@media (max-width:767px){
  .ses-hero__grid{gap:32px}
  .ses-hero__media .photo{border-radius:20px}
  .ses-hero__media .arc{width:40%;left:-8%;bottom:-10%}
}
@media (hover:hover) and (pointer:fine) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  .ses-hero__media .photo img{transition:transform .5s var(--ease);transform-origin:50% 45%}
  .ses-hero__media .photo:hover img{transform:scale(1.025)}
}

/* プライバシーポリシー：本文エリアの円の装飾（中盤〜下部にも配置）。スマホでは本文に重なりやすい輪郭の円を非表示 */
@media (max-width:767px){.pp-body .fl--pc{display:none}}

/* 採用情報：冒頭の6つのページ内ボタンのみ、育成・会社紹介ページと同じ淡いピンクに（2026-10-20）。ホバー時の色・動きは従来どおり */
.r-hero .page-toc.r-toc:not(.page-toc--sm) a{background:#FFFBFC;border-color:#F0E6EA}
.r-hero .page-toc.r-toc:not(.page-toc--sm) a:hover,.r-hero .page-toc.r-toc:not(.page-toc--sm) a:active,.r-hero .page-toc.r-toc:not(.page-toc--sm) a:focus-visible{background:#FCEBF1;border-color:#DFB7C5}

/* TOP「あなたに合った情報へ」：文字サイズを調整（2026-10-20）。タイトル18px／カード見出し17.5px／説明文14.5px
   言葉の切れ目で改行されるよう、HTML側で言葉のまとまりごとに区切り、アイコン・矢印との間隔とカード内側の余白を少し詰めて文字幅を確保 */
.paths__title{font-size:1.125rem}
.path__who{font-size:1.09375rem}
.path__what{font-size:.90625rem}
.path{gap:12px;padding:16px 14px}

/* 全ページ共通：水色のメインボタン（ヘッダーの「お問い合わせ」を含む）の白文字に、ごく薄い濃いブルーの影（2026-10-21）。文字の太さは700のまま */
.btn--main,.gnav .gnav__cta{text-shadow:0 1px 2px rgba(22,70,94,.42),0 0 1px rgba(22,70,94,.30)}

/* 育成への取り組み：冒頭2ボタンの停止位置（2026-10-21）。固定ヘッダーの下に、見出しまわりの最初の要素が適度な余白（PC約56px／スマホ約48px）を空けて止まるよう、セクション上の余白分を差し引く */
#why,#programs{scroll-margin-top:-55px}
@media (min-width:768px){#why,#programs{scroll-margin-top:-87px}}

/* 育成への取り組み：冒頭2ボタンをE案（白＋ピンクアクセント・下向き矢印）に変更（2026-10-21）。他ページのページ内ボタンは対象外 */
.page-hero--training .r-toc a{background:#FFFFFF;border-color:#E4AAC2;color:#363036;gap:10px;padding-right:14px}
.page-hero--training .r-toc a::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6.5 12.5 12 18l5.5-5.5' fill='none' stroke='%23A85B7F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat,#F7DCE7;transition:background-color .3s ease}
.page-hero--training .r-toc a:hover,.page-hero--training .r-toc a:active,.page-hero--training .r-toc a:focus-visible{background:#FFF7FA;border-color:#D995B1}
.page-hero--training .r-toc a:hover::after,.page-hero--training .r-toc a:active::after,.page-hero--training .r-toc a:focus-visible::after{background-color:#F2CADB}
.page-hero--training .r-toc a:focus-visible{outline-color:#D995B1}
@media (max-width:480px){.page-hero--training .r-toc a{padding-right:14px}}

/* 会社紹介（冒頭5個）・採用情報（冒頭6個＋募集職種内3個）のページ内ボタン：E案（矢印なし）に統一（2026-10-21）
   育成ページの冒頭2ボタン（矢印あり）・その他のボタンは対象外。大きさ・配置・停止位置は従来どおり */
.page-hero--company .r-toc a,
.r-hero .page-toc.r-toc:not(.page-toc--sm) a,
.page-toc--sm.r-toc.r-toc--pale a{background:#FFFFFF;border-color:#E4AAC2;color:#363036}
.page-hero--company .r-toc a:hover,.page-hero--company .r-toc a:active,.page-hero--company .r-toc a:focus-visible,
.r-hero .page-toc.r-toc:not(.page-toc--sm) a:hover,.r-hero .page-toc.r-toc:not(.page-toc--sm) a:active,.r-hero .page-toc.r-toc:not(.page-toc--sm) a:focus-visible,
.page-toc--sm.r-toc.r-toc--pale a:hover,.page-toc--sm.r-toc.r-toc--pale a:active,.page-toc--sm.r-toc.r-toc--pale a:focus-visible{background:#FFF7FA;border-color:#D995B1}
.page-hero--company .r-toc a:focus-visible,.r-hero .page-toc.r-toc:not(.page-toc--sm) a:focus-visible,.page-toc--sm.r-toc.r-toc--pale a:focus-visible{outline-color:#D995B1}

/* 会社紹介：冒頭5ボタンの停止位置（2026-10-21）。固定ヘッダーの下に適度な余白（PC約56px／スマホ約48px）を空けて各セクションの最初の要素が見えるよう調整。
   ビジョンは見出しの上の泡まで隠れずに見える位置。セクションの余白・レイアウトは変更しない */
#vision{scroll-margin-top:52px}
#message{scroll-margin-top:-39px}
#overview{scroll-margin-top:-35px}
#access{scroll-margin-top:-51px}
@media (min-width:768px){
  #vision{scroll-margin-top:45px}
  #message{scroll-margin-top:-67px}
  #overview{scroll-margin-top:-51px}
  #access{scroll-margin-top:-68px}
}

/* =========================================================
   パートナー企業の方へ：ファーストビューの写真（2026-10-21追加）
   PC：左に文章、右に写真（文章ブロックの縦中央）。スマホ：文章→ボタン→写真
   ========================================================= */
.p-hero__media .photo{aspect-ratio:3/2}
.p-hero__media .photo img{object-position:50% 50%}
@media (min-width:960px){
  .p-hero__grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:52px}
  .p-hero__media{align-self:center;margin-top:24px}
  .p-hero__media .photo{border-radius:24px 24px 96px 24px}
}
@media (max-width:767px){
  .p-hero__grid > .p-hero__text > .btns{margin-top:0}
  .p-hero__text{display:grid;gap:32px}
}

/* お問い合わせフォーム：Turnstile（ロボットではないことの確認）の表示欄（確認画面の送信ボタンの上）2026-10-25 */
.cf-ts{margin-top:24px}
.cf-ts__widget{min-height:65px}
.cf-ts__note{margin:8px 0 0;font-size:.85rem;color:var(--muted);line-height:1.7}