@charset "utf-8";

/* =========================================================
   watashi.css ── 「私たちについて」ページ専用
   -----------------------------------------------------------
   読み込み順： style.css → micro-interactions.css → watashi.css（最後）
   ・style.css の --c-* トークン、.btn / .btn-ghost / .container /
     header / #d_navi / .site-footer / #page-top をそのまま使う
   ・micro-interactions.css の --line / --mi-ease / 波紋・光沢・
     PAGE TOP（案D）もそのまま効く
   ・top.css は読み込まない（トップページ専用のため）
   ========================================================= */

:root{
  /* --header-h は style.css の :root に集約（ここでは定義しない） */
  --top-wide:   1280px;   /* 新トップの内容幅 */
  --t-blue-pale:#eaf2fa;  /* カードの淡いブルー */
  --t-blue-line:#d7e5f3;
  --t-navy-deep:#0d2350;  /* ONE STOP パネルの一番濃いところ */
  --t-green:    #6cbf3f;  /* ヒーロー波の緑 */
  --t-cyan:     #2f9ad6;  /* ヒーロー波の青 */
  --t-gap:      clamp(16px, 2.2vw, 32px);
}

/* 罫線・イージング：micro-interactions.css の値を借り、
   万一そちらが未読込でも壊れないよう既定値を持たせた別名にする
   （--line: var(--line,…) と自分自身を参照すると循環で無効になるため） */
:root{
  --t-line:        var(--line,        rgba(30,58,138,.14));
  --t-line-strong: var(--line-strong, rgba(30,58,138,.28));
  --t-ease:        var(--mi-ease,     cubic-bezier(.2,0,0,1));
  --t-ease-out:    var(--mi-ease-out, cubic-bezier(.16,1,.3,1));
}

/* ---------- 内側コンテナ（下層の .l-wide と同じ考え方の広い版） ---------- */
.l-top{
  max-width: var(--top-wide);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ヒーローが画面最上部から始まるので main には余白を入れない */
.page-top2 main#main{ padding-top:0; }

/* 共通：見出し */
.t-about, .t-biz, .t-corp, .t-cta{ background:#fff; }

/* 共通：「◯◯を見る →」リンク */
.t-more{ margin:0; }
.t-more a,
.t-more.as-text{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-size:.95rem;
  font-weight:700;
  color:var(--c-navy);
  border-bottom:1px solid var(--t-line-strong);
  padding-bottom:.28em;
  transition:color .25s var(--t-ease), border-color .25s var(--t-ease);
}
.t-more a:hover{ text-decoration:none; border-color:var(--c-navy); }
.t-more .t-arrow{
  margin-left:auto;
  font-style:normal;
  transition:transform .3s var(--t-ease-out);
}
.t-more a:hover .t-arrow{ transform:translateX(5px); }
.t-more-lg a{ font-size:1.05rem; min-width:14em; }
.t-more.is-on-navy a{ color:#fff; border-color:rgba(255,255,255,.4); }
.t-more.is-on-navy a:hover{ border-color:#fff; }


/* =========================================================
   1. ヒーロー
   ========================================================= */
.t-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(520px, 52vw, 720px);
  padding:calc(var(--header-h) + 40px) 0 0;
  background:
    linear-gradient(168deg,
      #bcd9f1 0%,
      #d5e8f7 26%,
      #e9f2fa 52%,
      #ffffff 88%);
}

/* 右側の写真。左端はグラデーションへ溶かす */
.t-hero-media{
  position:absolute;
  z-index:0;
  top:0; right:0; bottom:0;
  width:min(70%, 1080px);
  pointer-events:none;
}
.t-hero-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  -webkit-mask-image:linear-gradient(102deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 16%, rgba(0,0,0,.45) 36%, rgba(0,0,0,.9) 58%, #000 72%);
          mask-image:linear-gradient(102deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 16%, rgba(0,0,0,.45) 36%, rgba(0,0,0,.9) 58%, #000 72%);
}

.t-hero-inner{
  position:relative;
  z-index:2;
  padding-top:clamp(20px, 4vw, 56px);
}
.t-hero-title{
  margin:0 0 1.1em;
  color:#17356f;
  font-size:clamp(1.9rem, 3.3vw, 3rem);
  font-weight:700;
  line-height:1.55;
  letter-spacing:.05em;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.t-hero-lead{
  margin:0;
  max-width:34em;
  font-size:clamp(.9rem, 1.05vw, 1rem);
  line-height:2.1;
  color:#243a5e;
}

/* 下端の波 */
.t-hero-wave{
  position:absolute;
  z-index:1;
  left:0; right:0; bottom:-1px;
  width:100%;
  height:clamp(70px, 9vw, 130px);
  display:block;
}
.t-hero-wave .w-fill{ fill:#fff; }
.t-hero-wave .w-line{ fill:none; stroke-width:5; stroke-linecap:round; }
.t-hero-wave .w-green{ stroke:var(--t-green); }
.t-hero-wave .w-blue{  stroke:var(--t-cyan); }


/* =========================================================
   ヘッダーの追記分（ロゴ下のタグライン／資料請求ボタン）
   ※ style.css は書き換えず、このページで足すぶんだけ
   ========================================================= */
/*.logo-text{ display:flex; flex-direction:column; line-height:1.25; }
.logo-sub{
  font-size:11px;
  font-weight:400;
  letter-spacing:.02em;
  color:#3b4a68;
  transition:color .4s ease;
}
*/
header.scrolled .logo-sub{
  color:var(--c-note); }

.header-cta{
  display:flex;
  align-items: center;
  flex-direction: row-reverse;
  gap:10px;
}
.btn-request{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 20px;
  border:1px solid rgba(0,30,80,.35);
  border-radius:6px;
  /*background:rgba(255,255,255,.9);
  color:var(--c-navy);*/
  background:var(--c-navy);
  color:#fff;
  font-size:13px;
  white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.btn-request:hover{
  background:#fff;
  border-color:var(--c-navy);
  color:var(--c-navy);
  text-decoration:none;
}

/* =========================================================
   2. トップメッセージ／企業理念／歴史
   ========================================================= */
.t-about{ padding:clamp(36px, 5vw, 64px) 0 clamp(24px, 3vw, 40px); }
.t-about-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--t-gap);
  align-items:stretch;
}

.t-card{
  display:grid;
  grid-template-columns:44% 1fr;
  overflow:hidden;
  border-radius:2px;
  background:#fff;
  min-height:250px;
}
.t-card.is-photo-left{ grid-template-columns:42% 1fr; }
.t-card:not(.is-photo-left){ grid-template-columns:1fr 44%; }
.t-card.is-tinted{ background:var(--t-blue-pale); }

.t-card-media{ overflow:hidden; }
.t-card-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s var(--t-ease-out);
}
.t-card:hover .t-card-media img{ transform:scale(1.05); }
.t-card.is-sepia .t-card-media img{ filter:sepia(.55) saturate(.75) contrast(1.02); }

.t-card-body{
  display:flex;
  flex-direction:column;
  padding:clamp(16px, 1.5vw, 22px) clamp(14px, 1.35vw, 19px);
}
.t-card-title{
  margin:0 0 .8em;
  font-size: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem);
  color:var(--c-navy);
  letter-spacing:.06em;
}
.t-card-catch{
  margin:0 0 .8em;
  font-size: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem);
  font-weight:700;
  line-height:1.8;
  color:var(--c-navy);
}
.t-card-text{
  margin:0 0 1.4em;
  font-size:.875rem;
  line-height:1.95;
  color:var(--c-text);
}
.t-card .t-more{ margin-top:auto; }
.t-card .t-more a{ font-size:.78rem; }


/* =========================================================
   3. 事業の紹介 ＋ ONE STOP SOLUTION
   ========================================================= */
.t-biz{ padding:clamp(16px, 2vw, 28px) 0; }
.t-biz-grid{
  display:grid;
  grid-template-columns:minmax(250px, 26%) 1fr;
  gap:16px;
  align-items:stretch;
}

.t-biz-lead{
  display:flex;
  flex-direction:column;
  padding:clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 34px);
  background:linear-gradient(150deg, #f5f7fa 0%, #e8ecf2 100%);
  border-radius:2px;
}
.t-biz-title{
  margin:0 0 1em;
  font-size:clamp(1.2rem, 1.6vw, 1.55rem);
  color:var(--c-navy);
  letter-spacing:.08em;
}
.t-biz-text{
  margin:0 0 2.2em;
  font-size:.88rem;
  line-height:2.1;
  letter-spacing:.02em;
}
.t-biz-lead .t-more{ margin-top:auto; }

/* ---- ONE STOP パネル ---- */
.t-onestop{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:2px;
  color:#fff;
  background:
    radial-gradient(120% 90% at 50% 34%, rgba(70,150,235,.55) 0%, rgba(20,60,130,0) 62%),
    linear-gradient(160deg, #1b3f80 0%, #143166 45%, var(--t-navy-deep) 100%);
}
/* 斜めに走る光の筋（画像なしで質感を出す） */
.t-onestop::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:
    repeating-linear-gradient(72deg, rgba(255,255,255,.055) 0 1px, rgba(255,255,255,0) 1px 26px),
    repeating-linear-gradient(-64deg, rgba(120,190,255,.05) 0 1px, rgba(255,255,255,0) 1px 34px);
  pointer-events:none;
}
/* 中央の横方向のフレア */
.t-onestop::after{
  content:"";
  position:absolute;
  z-index:0;
  left:-10%; right:-10%; top:24%;
  height:26%;
  background:radial-gradient(60% 50% at 50% 50%, rgba(150,205,255,.32), rgba(150,205,255,0) 70%);
  filter:blur(6px);
  pointer-events:none;
}
.t-onestop-inner{
  position:relative;
  z-index:1;
  padding:clamp(20px, 2.4vw, 34px) clamp(18px, 2.4vw, 40px) clamp(22px, 2.6vw, 34px);
  text-align:center;
}

.t-onestop-pill{
  display:inline-block;
  margin:0 0 1.1em;
  padding:.42em 1.5em;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  font-size:clamp(.82rem, .95vw, .92rem);
  letter-spacing:.04em;
  background:rgba(255,255,255,.08);
}
.t-onestop-title{
  margin:0 0 .35em;
  color:#fff;
  font-family:"Times New Roman","Hiragino Mincho ProN",serif;
  font-size:clamp(1.7rem, 3.1vw, 2.9rem);
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.2;
}
.t-onestop-sub{
  margin:0 0 clamp(14px, 1.8vw, 26px);
  font-size: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem);
  letter-spacing:.03em;
  color:rgba(255,255,255,.94);
}

/* ---- 5ステップの円 ---- */
.t-flow{
  list-style:none;
  margin:0 0 clamp(16px, 2vw, 26px);
  padding:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(2px, .6vw, 10px);
}
.t-flow-item{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.t-flow-circle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.25em;
  width: clamp(4.375rem, 3.2386rem + 5.6818vw, 7.5rem);
  aspect-ratio:1/1;
  border-radius:50%;
  background:#fff;
  color:var(--c-navy);
  box-shadow:0 4px 14px rgba(0,20,60,.28);
  transition:transform .35s var(--t-ease-out), box-shadow .35s var(--t-ease);
}
.t-flow-circle svg{
  width:clamp(22px, 2.3vw, 32px);
  height:clamp(22px, 2.3vw, 32px);
}
.t-flow-label{
  font-size: clamp(0.75rem, 0.4591rem + 0.3545vw, 0.95rem);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
  white-space:nowrap;
}
.t-flow-item:hover .t-flow-circle{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,20,60,.36);
}
.t-flow-text{
  margin:.9em 0 0;
  font-size: clamp(0.75rem, 0.7045rem + 0.2273vw, 0.875rem);
  line-height:1.75;
  color:rgba(255,255,255,.9);
}

/* 円と円のあいだの矢印 */
.t-flow-arrow{
  flex:0 0 auto;
  align-self:flex-start;
  margin-top:clamp(30px, 3.3vw, 47px);
  width:clamp(10px, 1.2vw, 16px);
  height:10px;
  position:relative;
}
.t-flow-arrow::before{
  content:"";
  position:absolute;
  inset:0;
  border-top:2px solid rgba(255,255,255,.85);
  border-right:2px solid rgba(255,255,255,.85);
  width:9px; height:9px;
  transform:rotate(45deg);
  left:50%; margin-left:-4px;
}

.t-onestop-btn{ margin:0; }
.t-onestop-btn .btn{
  min-width:clamp(180px, 20vw, 260px);
  justify-content:center;
  padding:.7em 1.8em;
  background:linear-gradient(180deg, #24478f 0%, #16295e 100%);
  border-color:rgba(255,255,255,.55);
  font-size:clamp(.85rem, 1vw, 1rem);
}
.t-onestop-btn .btn:hover{
  background:linear-gradient(180deg, #2c56ac 0%, #1c3572 100%);
  border-color:#fff;
}


/* =========================================================
   4. 基本情報 ＋ CSR
   ========================================================= */
.t-corp{ padding:clamp(16px, 2vw, 28px) 0; }
.t-corp-grid{
  display:grid;
  grid-template-columns:minmax(250px, 26%) 1fr;
  gap:16px;
  align-items:stretch;
}

/* ---- 基本情報（濃紺） ---- */
.t-info{
  display:flex;
  flex-direction:column;
  padding:clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 28px);
  background:var(--c-bg-footer);
  color:#fff;
  border-radius:2px;
}
.t-info-title{
  margin:0 0 1em;
  color:#fff;
  font-size:clamp(1.05rem, 1.3vw, 1.25rem);
  letter-spacing:.08em;
}
.t-info-list{ margin:0 0 1.6em; }
.t-info-row{
  display:grid;
  grid-template-columns:5em 1fr;
  gap:0 .8em;
  padding:.45em 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.9rem;
  line-height:1.85;
}
.t-info-row dt{ color:var(--c-note-on-navy); }
.t-info-row dd{ margin:0; color:#fff; }
.t-info .t-more{ margin-top:auto; }
.t-info .t-more a{ font-size:.82rem; }

/* ---- CSR ---- */
.t-csr{
  padding:clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 30px);
  background:var(--t-blue-pale);
  border-radius:2px;
}
.t-csr-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:clamp(14px, 1.6vw, 22px);
}
.t-csr-title{
  margin:0 0 .5em;
  font-size:clamp(1.05rem, 1.3vw, 1.25rem);
  color:var(--c-navy);
  letter-spacing:.08em;
}
.t-csr-lead{
  margin:0;
  font-size:.9rem;
  line-height:1.95;
}
.t-csr-head .t-more{ padding-top:.4em; }
.t-csr-head .t-more a{ font-size:.9rem; }

.t-csr-list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(8px, 1vw, 16px);
}
.t-csr-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--t-line);
  border-radius:2px;
  overflow:hidden;
  color:var(--c-text);
  transition:border-color .3s var(--t-ease), box-shadow .3s var(--t-ease), transform .3s var(--t-ease);
}
.t-csr-card:hover{
  text-decoration:none;
  border-color:var(--t-line-strong);
  box-shadow:0 8px 20px rgba(21,42,84,.14);
  transform:translateY(-3px);
}
.t-csr-photo{
  display:block;
  overflow:hidden;
  aspect-ratio:16/10;
}
.t-csr-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s var(--t-ease-out);
}
.t-csr-card:hover .t-csr-photo img{ transform:scale(1.06); }
.t-csr-label{
  display:flex;
  align-items:center;
  gap:.3em;
  flex:1;
  padding:.75em .8em;
  font-size:.8rem;
  line-height:1.55;
  color:var(--c-navy-deep);
}
.t-csr-label .t-arrow{
  margin-left:auto;
  font-style:normal;
  flex:none;
  transition:transform .3s var(--t-ease-out);
}
.t-csr-card:hover .t-csr-label .t-arrow{ transform:translateX(4px); }


/* =========================================================
   5. 採用情報 ＋ お問い合わせ
   ========================================================= */
.t-cta{ padding:clamp(16px, 2vw, 28px) 0 clamp(40px, 5vw, 72px); }
.t-cta-grid{
  display:grid;
  grid-template-columns:50% 1fr;
  gap:16px;
  align-items:stretch;
}

/* ---- 採用（写真背景） ---- */
.t-recruit{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:block;
  min-height:clamp(180px, 17vw, 240px);
  border-radius:2px;
  color:#fff;
}
.t-recruit-bg{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--t-ease-out);
}
.t-recruit::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(95deg,
    rgba(11,31,58,.88) 0%,
    rgba(11,31,58,.72) 34%,
    rgba(11,31,58,.18) 62%,
    rgba(11,31,58,.05) 100%);
}
.t-recruit:hover{ text-decoration:none; }
.t-recruit:hover .t-recruit-bg{ transform:scale(1.05); }
.t-recruit-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  height:100%;
  padding:clamp(22px, 2.6vw, 40px);
}
.t-recruit-title{
  font-size:clamp(1.25rem, 1.9vw, 1.8rem);
  font-weight:700;
  letter-spacing:.5em;
  margin-bottom:.5em;
}
.t-recruit-text{
  font-size:clamp(.98rem, 1.15vw, 1.12rem);
  line-height:2;
  margin-bottom:1.6em;
}
.t-recruit .t-more.as-text{
  margin-top:auto;
  color:#fff;
  border-color:rgba(255,255,255,.5);
  font-size:.85rem;
}
.t-recruit:hover .t-more.as-text{ border-color:#fff; }
.t-recruit:hover .t-arrow{ transform:translateX(5px); }

/* ---- お問い合わせ ---- */
.t-contact{
  display:grid;
  grid-template-columns:1fr 34%;
  border-radius:2px;
  overflow:hidden;
  background:linear-gradient(120deg, #dbeaf8 0%, #eaf2fa 60%, #f4f8fc 100%);
}
.t-contact-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(22px, 2.6vw, 40px);
}
.t-contact-title{
  margin:0 0 .5em;
  font-size:clamp(1.05rem, 1.45vw, 1.4rem);
  color:var(--c-navy);
  letter-spacing:.06em;
}
.t-contact-text{
  margin:0 0 1.5em;
  font-size:.92rem;
}
.t-contact-btns{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
}
.t-contact-btns .btn{
  min-width:clamp(140px, 14vw, 190px);
  justify-content:center;
  padding:.65em 1.6em;
  font-size:.88rem;
  background:#fff;
  border-color:#fff;
  color:var(--c-navy);
  box-shadow:0 2px 8px rgba(21,42,84,.12);
}
.t-contact-btns .btn:hover{
  background:var(--c-navy);
  border-color:var(--c-navy);
  color:#fff;
}
.t-contact-photo{ overflow:hidden; }
.t-contact-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}


/* フッターは style.css の共通4カラム（.footer-grid）を使用。
   このページ専用のフッター指定は持たない。 */


/* =========================================================
   スクロール登場アニメ（js/top2.js が [data-reveal] に .is-in を付ける）
   ── 詳細度は micro-interactions.css に合わせて :where() で 0,1,0 に落とす
   ========================================================= */
.js-anim :where([data-reveal]){
  opacity:0;
  transform:translateY(20px);
  filter:blur(5px);
  transition:opacity .8s var(--t-ease-out), transform .8s var(--t-ease-out), filter .8s var(--t-ease-out);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.js-anim :where([data-reveal].is-in){
  opacity:1;
  transform:none;
  filter:none;
}
/* ONE STOP の円は少し遅れて順に灯る */
.js-anim .t-flow-item{
  opacity:0;
  transition:opacity .6s var(--t-ease-out);
  transition-delay:calc(.3s + var(--i, 0) * 90ms);
}
.js-anim .t-onestop.is-in .t-flow-item{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .js-anim :where([data-reveal]){
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .js-anim .t-flow-item{ opacity:1 !important; }
  .t-card-media img, .t-csr-photo img, .t-recruit-bg{ transition:none !important; }
}


/* =========================================================
   レスポンシブ
   ========================================================= */

/* --- ノートPC（〜1240px）：ヘッダーの詰め --- */
@media (max-width:1240px){
  header{ padding:0 20px; }
  .logo-sub{ display:none; }                 /* ロゴ下のタグラインは省略 */
  .dropmenu > li > a{ padding:0 10px; font-size:12.5px; }
  .dropmenu > li > a::before{ left:10px; right:10px; }
  .header-cta{ gap:8px; }
  .page-top2 .btn-contact,
  .btn-request{ padding:8px 12px; font-size:12px; }
  .t-csr-label{ font-size:.8rem; }
}

/* --- タブレット（〜1080px） --- */
@media (max-width:1080px){
  .t-about-grid{ grid-template-columns:1fr 1fr; }
  .t-about-grid > :first-child{ grid-column:1 / -1; }
  .t-card.is-photo-left{ grid-template-columns:38% 1fr; }

  .t-biz-grid,
  .t-corp-grid,
  .t-cta-grid{ grid-template-columns:1fr; }

  .t-csr-list{ grid-template-columns:repeat(3, 1fr); }
  .t-recruit{ min-height:220px; }
}

/* --- SP（〜767px） --- */
@media (max-width:767px){
  .l-top{ padding-inline:16px; }


  .t-hero{
    display:flex;
    flex-direction:column;
    min-height:0;
    /* SP は 見出し → 写真 の順。波は写真の下端に重ねる */
    padding:calc(var(--header-h) + 24px) 0 0;
    background:linear-gradient(170deg, #c7dff3 0%, #e3eff9 45%, #fff 92%);
  }
  .t-hero-inner{ order:1; }        /* SP は見出しを先に読ませる */
  .t-hero-media{
    order:2;
    position:relative;
    inset:auto;
    width:100%;
    height:clamp(190px, 50vw, 260px);
    margin-top:22px;
  }
  .t-hero-img{
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 20%);
  }
  .t-hero-inner{ padding-top:0; }
  .t-hero-title{ font-size:clamp(1.5rem, 6.4vw, 2rem); }
  .t-hero-lead{ font-size:.85rem; line-height:1.95; }
  .t-hero-lead br{ display:none; }
  .t-hero-wave{ height:52px; }

  .t-about-grid{ grid-template-columns:1fr; }
  .t-card,
  .t-card.is-photo-left,
  .t-card:not(.is-photo-left){ grid-template-columns:1fr; min-height:0; }
  .t-card-media{ height:clamp(150px, 40vw, 210px); order:-1; }
  .t-card-text br,
  .t-biz-text br,
  .t-csr-lead br{ display:none; }

  /* ONE STOP：5つの円を折り返し、矢印は隠す */
  .t-flow{ flex-wrap:wrap; gap:14px 10px; }
  .t-flow-item{ flex:0 0 calc(33.333% - 8px); }
  .t-flow-arrow{ display:none; }
  .t-flow-circle{ width:clamp(66px, 25vw, 144px); }
  .t-flow-label{ white-space:normal; }
  .t-onestop-title{ font-size:clamp(1.4rem, 7vw, 1.9rem); }

  .t-csr-list{ grid-template-columns:repeat(2, 1fr); }
  .t-csr-head{ flex-direction:column; gap:12px; }

  .t-contact{ grid-template-columns:1fr; }
  .t-contact-photo{ height:clamp(140px, 38vw, 190px); order:-1; }
  .t-contact-btns .btn{ flex:1 1 100%; }

}

@media (max-width:430px){
  .t-flow-item{ flex:0 0 calc(50% - 6px); }
}