:root{
  --bg:#EAF5F1;           /* ← accentの淡色（暫定） */
  --surface:#ffffff;
  --ink:#101828;          /* メインテキスト */
  --muted:#4A5565;        /* 補足テキスト */
  --line:#E6ECE9;

  --brand:#006045;        /* メインカラー */
  --brand-deep:#004736;   /* brandを少し暗くした補助色 */
  --grad: linear-gradient(135deg, #00C891 0%, #2CC2A0 50%, #41C7E8 100%);

  --shadow: 0 10px 30px rgba(0, 51, 37, .12);
  --radius-lg: 22px; --radius: 14px; --radius-sm: 10px;
  --container: 1120px;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  padding: 40px 0 160px;
  background: linear-gradient(
    135deg,
    #1dca8d 0%,     /* 明るく清涼感のあるグリーン */
    #00b980 40%,    /* メインのグリーン（健康的・ナチュラル） */
    #037a8f 100%
  );
  isolation: isolate;
  z-index: 0;
}


.hero::before,
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;                         /* ← テキストより後ろ */
  pointer-events:none;
}

.hero::before{
  background:url("../images/unsplash_5nI9N2wNcBU.png") center/cover no-repeat;
  opacity: 0.50;
  mix-blend-mode: screen;             
}


.hero-inner{
  position:relative;
  z-index: 1;
}

.hero-copy h1 {
  font-size: clamp(64px, 7vw, 96px); /* 画面に合わせて可変 */
  font-weight: 400;
  line-height: 1.0;
  white-space: normal; /* ← これで改行を防ぐ */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  letter-spacing: -0.02em;
}
/* PC だけ1行キープしたければこっちで nowrap をかける */
@media screen and (min-width: 768px) {
  .hero-copy h1 {
    white-space: nowrap;
  }
}

.hero h1 span {
  background: linear-gradient(90deg, #5EE9B5 0%, #53EAFD 45%, #8EC5FF 100%);
  -webkit-background-clip: text;      /* テキストにグラデを適用 */
  background-clip: text;
  color: transparent;                 /* 通常の塗りつぶしを透明にする */
  -webkit-text-fill-color: transparent; /* Safari対応 */                 /* 少し太めにして見やすく */
  text-shadow: none;                  /* ← 立体感をなくすポイント */
  opacity: 1;
}

p.lead{
  font-size: 48px;
  font-weight: 400;
  margin:30px 0;
}

p.sub{
  font-size: 20px;
  margin:10px 0 80px;
}

.cta-row {
  display: flex;
  gap: 20px;  /* ← 間隔を調整（お好みで 20〜40px くらい） */
  flex-wrap: wrap;  /* スマホで折り返す場合も安心 */
}


.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 30px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(90deg, #00BC7D 0%, #009966 100%);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(0, 60, 40, 0.2);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

 
.btn-primary::after {
  content: "→";
  font-weight: 400;
  transition: transform 0.2s ease;
}

.btn-primary:hover::after {
  transform: translateX(4px);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Noto Sans JP",system-ui,Segoe UI,Roboto;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:var(--container);margin:auto;padding:0 20px}

/* ===== Header ===== */
/* 現在地リンク（aria-current="page"）を緑に */
nav a[aria-current="page"] {
  color: #006045; 
  font-weight: 400;
}

.site-header{position:sticky;top:0;background:#F3F4F6;border-bottom:1px solid var(--line);z-index:50}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:85px;
  gap:16px
}

.nav{display:flex;gap:20px;align-items:center}
.nav a{padding:10px 6px;opacity:.9}
.hamburger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff}
.hamburger span{display:block;width:20px;height:2px;background:#273b32;margin:6px auto}
.btn-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;          /* .small と併用でちょうど良い */
  color:#fff;
  background: var(--brand-deep);     /* 濃い緑 */
  border: 1px solid var(--brand-deep);
  border-radius: 9999px;
  box-shadow: none;
  font-weight: 600;
}

.btn-nav:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn-nav::after{ content:none; }      

/* ===== Buttons ===== */
.btn{display:inline-block;padding:16px 36px;border:1px solid #cfe3db;border-radius:999px;font-weight:400}
.btn.small{
  padding:8px 18px;
  font-size:14px;
  color:#006045;
  background-color: #0099661A;
}

.btn-ghost {
  background: rgba(0, 200, 150, 0.25);
  border: 1px solid rgba(0, 200, 150, 0.4);
  color: #fff;
  border-radius: 9999px;
  padding: 14px 28px;
  font-weight: 500;
  border-color:#FFF;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px); 
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ===== Sections ===== */
.section{padding:72px 0}
.section-narrow{padding:72px 0}
.section-title{
  font-size:clamp(22px,3vw,24px);
  margin:.2em 0 40px;
  color:#4A5565;
}
.center{text-align:center}
.pill{display:inline-block;padding:8px 14px;border:1px solid #cfe4db;border-radius:999px;background:#fff;color:var(--brand-deep);font-weight:600}

/* ===== Grids ===== */
.grid-3{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.grid-2{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}

/* ===== Cards ===== */
/* 見出しブロックを中央に */
.pill.center {
  display: block;           /* ← インライン要素なのでブロック化 */
  width: fit-content;       /* ← テキスト幅にフィット */
  margin: 0 auto 24px;      /* ← 中央寄せ＆下に余白 */
  text-align: center;       /* ← テキストも中央 */
  background: rgba(0, 153, 102, 0.1);
  padding: 8px 32px;
  font-weight:400;
}

.cards .card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.card-media{position:relative}
.card-media img{aspect-ratio: 16/9;object-fit:cover}
.card-media .badge{
  position:absolute;
  left:12px;
  top:12px;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-weight:400;
  font-size:12px;padding:4px 8px;border-radius:999px}
.card.overlay .card-media::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.25) 60%);
}
.card-body{padding:18px}
.card p{color:#5d7066;line-height:1.9}
.card--service{
  background:#fff;
  border:1px solid #E8EFEB;
  border-radius:22px;
  box-shadow:0 12px 28px rgba(10,60,45,.10);
  overflow:hidden;
}

/* 画像ブロックのベース */
.card--service .card-media{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #e8efeb;
}
.card--service .card-media img:first-child{
  width:100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: right center; /* 顔を見せたい場合は right center 推奨 */
  display:block;
}

/* オーバーレイのベース（ここに色は乗せ替える） */
.card--service .card-media::after{
  content:"";
  position:absolute;
  inset:0;
  mix-blend-mode: multiply;
  pointer-events:none;
  z-index:0;
}

/* アイコンとラベル */
.card--service .icon{
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:32px; height:32px;
  z-index:1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  pointer-events:none;
}
.card--service .badge{
  position:absolute;
  left:20px;
  bottom:18px;
  z-index:1;
  color:#fff;
  font-size:16px;
  font-weight:400;
  letter-spacing:.03em;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
  background:none; border:none; padding:0;
}

/* ===== カードごとのグラデ（色だけ変える） ===== */
/* ReCIVA */
.card-media--reciva::after{
  background: linear-gradient(180deg, rgba(0,153,102,0.90) 0%, rgba(0,0,0,0) 100%);
}
/* ポータブルデバイス */
.card-media--device::after{
  background: linear-gradient(180deg, rgba(0,146,184,0.90) 0%, rgba(0,0,0,0) 100%);
}
/* AI解析 */
.card-media--ai::after{
  background: linear-gradient(180deg, rgba(0,122,85,0.90) 0%, rgba(0,0,0,0) 100%);
}

/* 画像ブロックのベースをリセット（余白をゼロ） */
.card--service .card-media{
  position: relative;
  margin: 0;          /* ← これが効きます */
  padding: 0;         /* ← 念のため */
  border: 0;
  border-bottom: 1px solid #e8efeb;
  overflow: hidden;
}

/* 中の画像をカード幅いっぱいに表示 */
.card--service .card-media img:first-child{
  display: block;     /* ← インライン要素の隙間を消す */
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;       /* or height: 100% でもOK（object-fitが効く） */
  object-fit: cover;
  object-position: center; /* 好みに応じて right center 等 */
}

/* ReCIVA */
.card-media--reciva::after{
  background: linear-gradient(
    0deg,                     /* ← 下から上 */
    rgba(0,153,102,0.90) 0%,
    rgba(0,0,0,0) 65%
  );
}

/* ポータブルデバイス */
.card-media--device::after{
  background: linear-gradient(
    0deg,
    rgba(0,146,184,0.90) 0%,
    rgba(0,0,0,0) 65%
  );
}

/* AI解析 */
.card-media--ai::after{
  background: linear-gradient(
    0deg,
    rgba(0,122,85,0.90) 0%,
    rgba(0,0,0,0) 65%
  );
}


/* 本文（既存） */
.card--service .card-body{ padding:20px 18px 22px; background:#fff; }

/* 保険で本文レイヤーを前面へ（不要なはずだけど念のため） */
.card--service .card-body {
  position: relative;
  z-index: 0;
  padding: 20px 18px 22px;
  background: #fff;
}

/* アイコン：左中央 */
.card--service .icon{
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  z-index:2;  /* グラデの上 */
  opacity:.95;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
  pointer-events:none;
}

.card--service .badge{
  position:absolute;
  left:20px;
  bottom:18px;
  top:auto;            /* ← これで左上固定を解除！ */
  z-index:2;           /* グラデの上 */
  color:#fff;
  font-size:16px;
  font-weight:400;
  letter-spacing:.03em;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
  background:none;
  border:none;
  padding:0;
}

.card--service .card-body{
  padding:20px 18px 22px;
  background:#fff;
}

/* アイコン（左中央）：ベースの img ルールを上書き */
.card--service .card-media > img.icon{
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  max-width: none;      /* ← これで img{max-width:100%} を無効化 */
  object-fit: contain;
  z-index: 2;
  opacity: .95;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  pointer-events: none;
}

/* 競合防止：バッジ内アイコンは使わない */
.card--service .badge::before{ content: none !important; }

p.desc-sm {
  font-size: 14px;
  color:#364153;
}

p.desc-lg {
  font-size: 16px;
  color:#364153;
}

/* ===== Wide feature ===== */
.wide-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E8EFEB;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(10, 60, 45, .10);
  overflow: hidden; /* ← カードと画像を一体化 */
}

/* 写真：カードと同じ幅で、上に配置 */
.wide-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* 比率固定 */
  object-fit: cover;
  display: block;
}

/* テキスト：下の白背景部分 */
.wide-body {
  padding: 20px 22px;
  background: #fff;
}

.wide-body h3 {
  margin: .4em 0 .6em;
  font-weight: 400;
  color:#101828;
  font-size: 16px;
}

.wide-body p {
  margin: 0;
  line-height: 1.8;
  color: #4A5565;
  font-size: 15px;
}

/* ======================
   Section Backgrounds
====================== */
.section-white {
  background-color: #ffffff;
}

.section-green {
  background-color: #EAF5F1; /* 薄緑の背景 */
  border-radius: 22px;       /* ← 角丸を追加 */
  padding: 56px 0;           /* ← 中の余白 */
  margin: 64px 0 64px;
}

/* タイトル */
.section-green .section-title {
  text-align: center;
  margin-bottom: 24px;
  color: #364153;
  font-weight: 700;
  font-size: 24px;
}

/* （必要なら下にも余白を入れる場合） */
.section-green:last-of-type {
  margin-bottom: 64px;
}

/* ======================
   Logo Section
====================== */
.logo-section {
  text-align: center;
  margin-top: 48px;
}

.logo-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--brand-deep);
  margin-bottom: 24px;
}

/* ロゴの並び（折り返さず縮小） */
.logo-wall {
  --gap: clamp(16px, 4vw, 40px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  flex-wrap: nowrap;  /* 折り返しなし */
  overflow: visible;
}

/* 4枚が一列に収まるように自動計算（上限255px） */
.logo-wall img {
  width: clamp(120px, calc((100% - 3 * var(--gap)) / 4), 255px);
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.logo-wall img:hover {
  transform: scale(1.03);
}

/* 3つ目のロゴだけ角丸を適用（慶應と同じ丸み） */
.logo-wall img:nth-child(3) {
  border-radius: 12px; /* ← 慶應の角丸値に合わせる */
  overflow: hidden;
}


/* ===== News ===== */
body.top .news-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
body.top .news-cards .news-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 6px 18px rgba(10,60,45,.06)}
body.top .news-card .meta{display:flex;gap:10px;align-items:center;margin-bottom:6px;color:#6b7f75;font-size:14px}
body.top .news-card .tag{
  background:#e6f5ef;
  color:#0b7e6a;
  border-radius:999px;
  padding:8px 12px;
  font-weight:400;
  font-size:12px
}

body.top .news-card h3{
  font-size:16px;
  margin:.3em 0 .6em;
  font-weight: 400;
}
body.top .news-card .link{
  color:#007A55;
  font-weight:400;
  font-size: 14px;
}

/* ── News 見出しのピルを薄緑に ───────────────── */
body.top .news-band .pill{
  background:#EAF5F1;            /* 薄い緑 */
  color:var(--brand-deep);
  display:inline-block;
  padding:8px 24px;
  border-radius:999px;
  font-weight:400;

}

/* ── 「すべて見る」に矢印（→）を付けてホバーで少し動く ───── */
body.top .news-head .btn.small{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
body.top .news-head .btn.small::after{
  content:"\2192";               /* → */
  transition:transform .2s ease;
}
body.top .news-head .btn.small:hover::after{
  transform:translateX(4px);
}

/* ── カード上部のメタ情報：日付の前にPNGアイコン ───────── */
body.top .news-card .meta{
  display:flex;
  align-items:center;
  gap:10px;
  color:#6b7f75;                 /* 既存の補足色に寄せる */
  font-size:14px;
  margin-bottom:6px;
}

/* ←ここで PNG を使う（HTMLはいじらない） */
body.top .news-card .meta time{
  position:relative;
  padding-left:24px;             /* アイコン分の余白 */
}
body.top .news-card .meta time::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  background:url("../images/calender-icon.png") center/contain no-repeat;
  opacity:.8;                    /* 少しトーンを落とす */
}

/*.top .cta-band,
.service .cta-band  {
  background: linear-gradient(135deg, #009966 0%, #007A55 50%, #007595 100%);
  color: #fff;
  margin-bottom: 0;  
  padding-bottom: 0; 
}*/



body.top .cta-inner {
  text-align: center;
  padding: 120px 0;
}

body.top .cta-inner h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 30px);
}

body.top .cta-inner p {
  font-size: 16px;
  opacity: 1.4;
  margin-bottom: 24px;
  line-height: 2.0;
}

body.top .cta-inner .btn {
  font-size: 16px;
}

body.top .btn-primary.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight:400;
  color: #007A55;
  background: #ffffff;              /* ← 不透明な白に固定 */
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 9999px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  isolation: isolate;               /* ← 背景とブレンドしないように */
  mix-blend-mode: normal;           /* ← 念のためブレンド無効化 */
  opacity: 1;                       /* ← 念のため完全不透明 */
}

body.top .btn-primary.cta:hover {
  background: #f7f7f7;              /* ← 少しトーン落として hover感 */
  transform: translateY(-1px);
}


/* 矢印のアニメーション */
body.top .btn-primary.cta::after {
  content: "→";
  font-weight: 700;
  transition: transform 0.2s ease;
}

body.top .btn-primary.cta:hover::after {
  transform: translateX(4px);
}

/* CTA専用ピル：白20%透過 */
body.top .cta-pill {
  background: rgba(255, 255, 255, 0.20) !important;  /* ← 透過白 */
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  display: inline-block;
  padding: 10px 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  backdrop-filter: saturate(120%) blur(0px);
}

body.top .cta-pill:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ===== Footer ===== */
/* 外の白セクションの下側を控えめに */
.section-white { padding-bottom: 0px; } /* 0でもOK */

/* セクションの入れ子時は二重パディングを無効化 */
.section > .section {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.site-footer {
  background: #F7F8F8; /* ← やわらかいグレー (#F9FAFBより少し濃い) */
  color: #4A5565;
  margin-top: 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 22px;
  padding: 40px 0 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* ← コピーライト上の線 */
}

.footer-col h4 {
  margin: .3em 0 .6em;
  color: #1E293B;
  font-weight: 400;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin: 1.0em 0;
}

.footer-col a {
  opacity: .9;
  color: #4A5565;
  text-decoration: none;
}

.footer-col.brand p {
  opacity: .9;
  margin: .6em 0 0;
}

.copyright {
  text-align: center;
  padding: 28px 0;
  font-size: 13px;
  color: #6B7280;
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* ← コピーライト直上にも薄い線 */
  background: #F7F8F8; /* ← 全体と統一 */
}

/* === Base: デフォルトは400 === */
body { font-weight: 400; }

/* === 小さめテキストを400で統一 === */
/* 使い回し用ユーティリティ */
.text-sm,
.fw-400 { font-weight: 400 !important; }

/* 既存の“小さい文字”系 */
.desc-sm,
.news-card .meta,
.footer-col li,
.copyright,
small { font-weight: 400; }


/* ===== Responsive ===== */
@media (max-width: 960px){
  .nav{position:fixed;inset:68px 0 0 0;background:#fff;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;padding:16px 20px;transform:translateY(-110%);transition:.25s}
  .hamburger{display:inline-block}
  body.nav-open .nav{transform:none}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .wide-card{grid-template-columns:1fr}
  .hero-inner{padding:72px 0 56px}
}

/*/////////会社概要ページ///////////*/
/* ===========================
   会社概要ページ全体
=========================== */
/*mpany .section:not(.hero-sub) {
  background:#fff;
}
body.company main {
  background: #fff;
}
*/
body.company .section {
  background: #fff;
}
/* ===========================
   Sub Hero（会社概要の冒頭）
=========================== */
.hero-sub {
  position: relative;
  color: var(--ink);
  padding: 80px 0 64px;
  background: #ffffff; /* 白ベースを維持 */
  isolation: isolate;
  overflow: hidden; /* はみ出し防止 */
}

/* 背景グラデ画像を配置 */
.hero-sub::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/hero-sub-bg@2x.png") center/cover no-repeat;
  opacity: 0.95; /* Figmaと同じトーンなら調整OK（0.9〜1.0） */
  pointer-events: none;
  z-index: 0;
}

/* コンテンツは上に載せる */
.hero-sub .container {
  position: relative;
  z-index: 1;
}


/* タイトルとテキスト調整 */
.hero-sub .section-title {
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 400;
  color: #101828;
  margin-bottom: 24px;
}

.hero-sub p {
  color: #364153;
  line-height: 1.9;
  font-size: 18px;
}

/* ピルデザイン */
.hero-sub .pill {
  background: rgba(0, 153, 102, 0.08);
  border: 1px solid rgba(0, 153, 102, 0.2);
  color: #006045;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.hero-sub .pill-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.hero-sub .pill{ 
  background: #0099661A; 
  color: #006045; 
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px; 
  background: #EAF5F1;
  color: #006045;
  font-weight: 400;
  padding: 6px 14px;
  border-radius: 999px;
}

.pill-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.hero-sub .section-title{ 
  font-size: clamp(26px, 3.4vw, 64px); 
  font-weight:400;
  color:#101828;
}

.hero-sub p{ color: #364153; line-height: 1.9; }

/* ===========================
 会社概要
=========================== */
.company .section-title.center {
  font-size: clamp(20px, 2.4vw, 60px); 
  font-weight: 400;
}

.sublead.center{ 
  text-align:center; 
  color:#5D7066; 
  margin:4px 0 36px;
  font-size: 20px;
 }

.mvv-card {
  margin-bottom: 48px;
}

.mvv-card:last-child {
  margin-bottom: 0;
}

.mvv-left{ display:flex; align-items:flex-start; }
.mvv-badge{
  display:block;
  width: 206px;   /* ←大きさはここで調整。小さくしたいなら 160〜190px など */
  height:auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.14));
}

/* 見出しの横並び（アイコン＋テキスト） */
.mvv-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:6px;
}
.mvv-icon{
  width:64px;
  height:64px;
  border-radius:14px;
  object-fit:contain;
  box-shadow:0 8px 18px rgba(0,0,0,0.15);
}
.mvv-label{ font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--brand-deep); opacity:.85; }

.mvv-right h3{ margin:.2em 0 .45em; font-size:clamp(20px, 2.6vw, 24px); font-weight:700; color:var(--ink); }
.mvv-right p{ margin:0 0 .9em; line-height:1.9; color:#5D7066; }
.mvv-right p.minor{ display:flex; align-items:center; gap:10px; font-size:12px; color:#3b5a51; opacity:.9; margin-top:8px; }
.mvv-right p.minor span{ width:44px; height:3px; border-radius:3px; background:linear-gradient(90deg, rgba(0,153,102,.45), rgba(0,122,133,.25)); }

/* ==== MISSIONラベルをシンプルに（枠なし） ==== */
.mvv-label-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-deep);
  opacity: 0.9;
  text-transform: uppercase;
  margin-right: 8px;
}

/* ==== MISSIONラベルとタイトル縦並び ==== */
.mvv-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mvv-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}

.mvv-label-text {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* MISSION */
.mvv-card.mission .mvv-label {
  color: #009966; 
}

/* VISION */
.mvv-card.vision .mvv-label {
  color: #0072BC; 
}

/* VALUES */
.mvv-card.values .mvv-label {
  color: #A347BA; 
}


.mvv-title h3 {
  font-size: clamp(20px, 2.6vw, 36px);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

/* ---- MVVカード全体 ---- */
.mvv-card {
  position: relative;
  display: grid;
  padding: 32px 28px;
  background:
    radial-gradient(700px 260px at 5% -30%, rgba(0,153,102,.08) 0%, rgba(0,0,0,0) 75%), 
    #fff;
  border: 1px solid rgba(0,153,102,0.12); /* うっすら緑枠 */
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 25px rgba(0,60,30,.06);
}

.mvv-top {
  display: flex;
  align-items: center;
  margin-left: 30px;
}

.mvv-num-img {
  width: 206px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.mvv-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mvv-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #009966;
}

.mvv-card h3 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 36px);
  color: #1b2e26;
  font-weight: 400;
}

.mvv-body p {
  margin: 0 0 0.8em;
  color: #4c5f56;
  line-height: 1.9;
  font-size: 20px;
}

.mvv-body {
  margin: 0px 40px 0px 120px;
}

.mvv-body p.minor {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  opacity: 0.9;
  margin-top: 8px;
}

/* Mission（グリーン） */
p.minor.mission {
  color: #009966;
}
p.minor.mission span {
  background: linear-gradient(90deg, rgba(0,153,102,.45), rgba(0,122,133,.25));
}

/* Vision（ブルー） */
p.minor.vision {
  color: #0092B8;
}
p.minor.vision span {
  background: linear-gradient(90deg, rgba(0,146,184,.45), rgba(0,122,133,.25));
}

/* Values（パープル） */
p.minor.values {
  color: #A26ACD;
}

/* Mission（グリーン） */
.mvv-card.mission a {
  color: #009966;
  font-weight: 500;
  transition: color 0.2s ease;
}
.mvv-card.mission a:hover {
  color: #00b377;
}

/* Vision（ブルー） */
.mvv-card.vision a {
  color: #0092B8;
  font-weight: 500;
  transition: color 0.2s ease;
}
.mvv-card.vision a:hover {
  color: #00a4d1;
}

/* Values（パープル／ピンク） */
.mvv-card.values a {
  color: #A347BA;
  font-weight: 500;
  transition: color 0.2s ease;
}
.mvv-card.values a:hover {
  color: #b85ccf;
}

p.minor.values span {
  background: linear-gradient(90deg, rgba(162,106,205,.45), rgba(122,85,173,.25));
}

.mvv-body p.minor span {
  display: inline-block;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(0,153,102,.45), rgba(0,122,133,.25));
}


.mvv-card.mission p.minor span {
  background: linear-gradient(90deg, rgba(0,153,102,.45), rgba(0,122,133,.25)); 
}


.mvv-card.vision p.minor span {
  background: linear-gradient(90deg, rgba(0,146,184,.45), rgba(0,95,160,.25)); 
}


.mvv-card.values p.minor span {
  background: linear-gradient(90deg, rgba(173,64,204,.45), rgba(140,50,170,.25)); 
}

/* ---- リンク ?---- */
.mvv-body a {
  color: #0f8b72;
}

/* ---- レスポンシブ ---- */
@media (max-width: 640px) {
  .mvv-top { flex-direction: column; align-items: flex-start; }
  .mvv-num-img { width: 72px; }
}



/* レスポンシブ：左カラムを小さく、縦積みも綺麗に */
@media (max-width: 860px){
  .mvv-card{
    grid-template-columns: 110px 1fr;
    padding: 22px 20px;
  }
  .mvv-num{ font-size: 60px; }
  .mvv-icon{ width: 40px; height: 40px; }
}
@media (max-width: 560px){
  .mvv-card{
    grid-template-columns: 1fr;   /* 縦並び */
    gap: 10px;
  }
  .mvv-left{ grid-auto-flow: column; align-items: center; gap: 14px; }
  .mvv-num{ font-size: 56px; }
  .mvv-label-text{ font-size: 10px; }
}

.mvv-card.mission {
  background:
    radial-gradient(
      700px 400px at 10% 10%,      /* 左上：柔らかい光 */
      rgba(0,188,125,0.08) 0%,    
      rgba(0,188,125,0.03) 45%,   
      rgba(255,255,255,0.0) 100%
    ),
    radial-gradient(
      600px 300px at 90% 90%,      /* 右下：ごく淡い白グリーン */
      rgba(236,253,245,0.5) 0%,   
      rgba(255,255,255,0.8) 60%,  
      rgba(255,255,255,1) 100%
    ),
    #ffffff;                      /* ベースは白 */
  border: 1px solid rgba(0,153,102,0.12);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0,60,30,.06);
}

/* Vision（ブルー） */
.mvv-card.vision {
  background:
    radial-gradient(
      700px 400px at 10% 10%,      /* 左上：柔らかい光 */
      rgba(0,146,184,0.08) 0%,    
      rgba(0,146,184,0.03) 45%,   
      rgba(255,255,255,0.0) 100%
    ),
    radial-gradient(
      600px 300px at 90% 90%,      /* 右下：ごく淡い白ブルー */
      rgba(236,252,255,0.6) 0%,   
      rgba(255,255,255,0.85) 60%,  
      rgba(255,255,255,1) 100%
    ),
    #ffffff;                      /* ベースは白 */
  border: 1px solid rgba(0,146,184,0.12);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0,60,90,.06);
}

/* Values（パープル） */
.mvv-card.values {
  background:
    radial-gradient(
      700px 400px at 10% 10%,      /* 左上：柔らかい光（パープル） */
      rgba(162,106,205,0.08) 0%,    
      rgba(162,106,205,0.03) 45%,   
      rgba(255,255,255,0.0) 100%
    ),
    radial-gradient(
      600px 300px at 90% 90%,      /* 右下：ごく淡い白ピンク */
      rgba(250,240,255,0.6) 0%,   
      rgba(255,255,255,0.85) 60%,  
      rgba(255,255,255,1) 100%
    ),
    #ffffff;
  border: 1px solid rgba(162,106,205,0.12);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(60,30,90,.06);
}

/* ===========================
   代表メッセージ
=========================== */
.message-section {
  position: relative;
  margin-top: 40px;
}

.message-box p{
  margin: 0 0 .9em;
  color: #364153;
  line-height: 1.9;
}

.message-box{
  position: relative;
  padding: 26px 24px;
  background:
    radial-gradient(900px 360px at 10% -20%, rgba(0,153,102,.10) 0%, rgba(0,0,0,0) 72%),
    #fff;
  border: 1px solid #E8EFEB;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(10,60,45,.08);
}

.message-sign {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px; 
  margin-top: 20px;
  color: #101828;
}

.sign-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
  position: relative;
  padding-left: 28px; 
}

.sign-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px; 
  width: 40px; 
  height: 2px;
  background: linear-gradient(90deg, rgba(0,153,102,0.1),rgba(0,153,102,0.6)); /* ← 緑系のグラデーション */
  border-radius: 2px;
}

.sign-text .name {
  font-weight: 700;
  font-size: 16px;
  margin: 0;
}

.sign-text .title {
  font-weight: 400;
  font-size: 13px;
  opacity: 0.85;
  margin: 2px 0 0;
}


/* ===== 代表メッセージ ===== */
.message-section .message-box{
  position: relative;
  padding: 0;              /* 余白は内側へ寄せる */
  overflow: visible;       /* はみ出しOK（テープ画像用） */
}

.message-section .message-inner{
  position: relative;      
  padding: 50px 50px 80px;
  background: #fff;
  border: 1px solid #E8EFEB;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(10,60,45,.08);
}

/* 左のグリーンライン：カードの上に“かぶせる” */
.message-section .message-inner::before{
  content:"";
  position:absolute;
  top: 3px;               /* ボーダーに被せるため -1px オフセット */
  bottom: 3px;
  left: -1px;
  width: 6px;
  background: linear-gradient(180deg, rgba(0,153,102,.75), rgba(0,153,102,.35));
  border-radius: 18px 0 0 18px; 
  box-shadow: none;
  z-index: 2;             
}

.message-section .message-box::after{
  content:"";
  position:absolute;
  left: 20px;               
  top: -15px;
  width: 28px;
  height: 28px;
  background:url("../images/kyoutyou.png") center/contain no-repeat;
  z-index: 3;              
  pointer-events:none;
}

.message-section .message-inner p {
  line-height: 1.9;       
  margin-bottom: 1.8em; 
}

.message-section .message-inner p:last-child {
  margin-bottom: 0;
}

/* ===========================
   会社情報
=========================== */
.company-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #E8EFEB;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(10, 60, 45, 0.08);
  overflow: hidden;
  margin-top: 32px;
  font-size: 15px;
  color: #364153;
}

.company-table tr {
  border-bottom: 1px solid #E8EFEB;
}

.company-table tr:last-child {
  border-bottom: none;
}

.company-table th {
  width: 180px;
  font-weight: 600;
  text-align: left;
  padding: 18px 22px;
}

.company-table td {
  padding: 18px 22px;
  line-height: 1.8;
  background: #fff;
} 

/* テーブル全体にふんわり角丸影を */
.company-table {
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 60, 30, 0.06);
}

/* モバイル時：縦並び */
@media (max-width: 640px) {
/* 会社情報テーブル：内容（td）のみ下線を引く */
.company-table td {
  border-bottom: 1px solid #e5e7eb; /* 好きな色でOK */
}

/* 最後の行だけ線を消す場合（任意） */
.company-table tr:last-child td {
  border-bottom: none;
}

}

/* ===========================
   沿革（タイムライン）
=========================== */
/* ベースは左余白ナシに戻す */
.timeline{
  list-style: none;
  margin: 0;
  padding: 8px 0;          /* ← padding-left は 0 に */
  position: relative;
  color:#364153;
}

/* 各行の本文がライン右から始まるように“年カラム幅 + 余白”を確保 */
.timeline li{
  position: relative;
  padding: 16px 10px 16px 180px;   /* ← 120px(年) + 20px(隙間) + 20px余裕 */
  line-height: 1.9;
}

/* 左の年：固定幅で右寄せ（absoluteのままでOK） */
.timeline .year{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  text-align: right;
  color: #6B7F75;
  font-weight: 400;
}

/* 中央の縦ライン（年カラムの右端＋隙間の位置 = 140px） */
.timeline::before{
  content:"";
  position:absolute;
  left: 140px;
  top: 20px;
  bottom: 20px;
  width: 2px;
   background: linear-gradient(
    180deg,
    #E5E7EB 0%,      
    #00BC7D 50%,    
    #E5E7EB 100%    
  );
  border-radius: 2px;
}

/* ドット（ラインの中心 = 140px に合うよう left を計算） */
.timeline li::before{
  content:"";
  position:absolute;
  left: 135px;                 /* 140 - (10px+2px*2)/2 = 133 */
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  background: #00A26F;
  box-shadow: 0 0 10px 6px rgba(0,162,111,.25);
  border-radius: 50%;
}

/* モバイルは従来どおり左にライン */
@media (max-width: 640px){
  .timeline { padding: 8px 0 8px 24px; }
  .timeline li{ padding-left: 0; }
  .timeline::before{ left: 8px; }
  .timeline .year{
    position: static;
    width: auto;
    display: block;
    text-align: left;
    margin: 0 0 6px;
    transform: none;
    color: var(--brand-deep);
    font-weight: 700;
  }
  .timeline li::before{ left: -2px; }
}

/* ===========================
   CTA section
=========================== */
/*
.company .cta-band{
   position: relative;
  background: radial-gradient(
      circle at 60% 50%,          
      rgba(0,188,125,0.05) 0%,   
      rgba(0,188,125,0.02) 40%,  
      rgba(0,188,125,0) 100%    
    ),
    linear-gradient(180deg, #ffffff 0%, #f9fdfb 100%);
  color: #101828;
  text-align: center;
  padding: 100px 0 120px;
  overflow: hidden; 
}
.company .cta-inner{ text-align:center; padding:88px 0 }


.company .cta-pill{
  background:none !important;
  border:none !important;
  color:#101828 !important;
  padding:0 !important;
  margin:0 0 8px !important;
  font-weight:400 !important;
}


.company .cta-inner p{
  margin:0 0 24px;
  font-size:16px;
  line-height:2.0;
  color:#364153;
}


.company .cta-buttons{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap }

.company .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; padding:14px 28px; font-size:16px;
  transition:all .25s ease; text-decoration:none;
}


.company .cta-btn--solid{
  color:#fff;
  background: linear-gradient(90deg, #00BC7D 0%, #009966 100%);
  border: none;
  box-shadow: 0 8px 18px rgba(0,60,40,.20);
}
.company .cta-btn--solid::after{
  content:"\2192"; 
  margin-left:10px; transition:transform .2s ease;
}
.company .cta-btn--solid:hover{ transform: translateY(-1px); filter:brightness(1.04) }
.company .cta-btn--solid:hover::after{ transform: translateX(4px) }

.company .cta-btn--ghost{
  color:#007A55;
  background:#fff;
  border:1px solid rgba(0,153,102,.65);
  box-shadow: 0 6px 14px rgba(0,60,40,.10);
}
.company .cta-btn--ghost:hover{ background:#f9fdfb; transform:translateY(-1px) }

@media (max-width:640px){
  .company .cta-inner{ padding:72px 0 }
  .company .cta-buttons{ gap:12px }
  .company .cta-btn{ width:100%; max-width:320px }
}

*/
/* ===========================
   セクション間隔・スクロール補正
=========================== */
/* 見出しジャンプ時にヘッダー(85px)の下に出るよう補正 */
section[id]{ scroll-margin-top: 96px; }

/* 最後のCTAとフッターの余白調整（間を詰める） */
.company .cta-band{ margin-bottom: 0; }
.company .cta-inner{ padding: 72px 0; }
.company .site-footer{ margin-top: 0; }

/* ===========================
   ページ遷移アニメーション
=========================== */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
  body{
    animation: pageFade .35s ease-out both;
  }
  @keyframes pageFade{
    from{ opacity: 0; transform: translateY(4px); }
    to{ opacity: 1; transform: none; }
  }
}

/* ===========================
   全ページ共通：ヘッダーのお問い合わせボタンを濃い緑に固定
=========================== */
header .btn.small,
.site-header .btn.small,
.header-inner .btn.small {
  color: #fff !important;
  background: var(--brand-deep) !important; /* #004736 */
  border: 1px solid var(--brand-deep) !important;
  box-shadow: 0 6px 16px rgba(0,71,54,.18) !important;
}

/* hover時 */
header .btn.small:hover,
.site-header .btn.small:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* active/focus */
header .btn.small:active {
  transform: translateY(0);
  filter: brightness(0.98);
}
header .btn.small:focus-visible {
  outline: 2px solid #7cd3b3;
  outline-offset: 2px;
}

/* ヘッダーの「お問い合わせ」ボタンは矢印なしに固定 */
.site-header .btn.small::after,
.site-header .btn.btn-primary.small::after,
header .btn.small::after {
  content: none !important;
}


/*/////////サービス紹介ページ///////////*/
/* ===== Service page scope ===== */
body.service .section:not(.service-hero){ background:#fff; }

/* サービスページはページ全体を白で塗る */
body.service main { 
  background: #fff;
}

/* 念のため：セクションも白を徹底（hero以外は既に指定済みでもOK） */
body.service .section { 
  background: #fff;
}

/* Hero（会社概要のhero-subと同系の淡グラデ） */
.service-hero{
  position:relative;
  padding: 88px 0 64px;
  color:#101828;
  background:
    radial-gradient(1100px 520px at 18% 18%, rgba(94,233,181,.20) 0%, rgba(83,234,253,.16) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #ffffff 0%, #f9fdfb 100%);
  border-bottom:1px solid #edf3f0;
}
.service-hero .section-title{ font-size: clamp(28px, 4vw, 48px); font-weight:400; margin:6px 0 8px; }
.service-hero .sublead{ color:#5D7066; }

.section-overview {
  position: relative;
  padding: 100px 0;
  background:
    radial-gradient(
      100px 100px at 45% 20%,/*
      600px 300px at 85% 20%, */
      rgba(0, 212, 146, 0.45) 0%, /* グリーンの強め発光 */
      rgba(0, 211, 242, 0.2) 40%, /* ブルー系の柔らかい発光 */
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(180deg, #ffffff 0%, #f9fdfb 100%);
  border: none;
  overflow: hidden;
}

.section-overview img {
  width: 100%;
  height: auto;
  border: none;
  box-shadow: none;
  border-radius: 18px;  
}

/* テキスト側 */
.section-overview .text-block {
  color: #364153;
  line-height: 1.9;
  font-size: 16px;
}

/* ピル（Overview） */
.section-overview .pill {
  background: rgba(0,153,102,0.08);
  color: #006045;
  border: 1px solid rgba(0,153,102,0.2);
  border-radius: 9999px;
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
}
.overview-media .glow{
  content:""; position:absolute; inset:auto; left:10%; bottom:-10px; width:60%; height:60%;
  background: radial-gradient(260px 120px at 50% 0%, rgba(0,188,125,.25), rgba(255,255,255,0));
  filter: blur(10px); border-radius:9999px; pointer-events:none;
}
.overview-body .h3{ font-size:22px; margin:.4em 0 .6em; }

/* ===========================
   コア技術セクション
=========================== */
.section-core {
  position: relative;
  padding: 100px 0;
  background: radial-gradient(
      900px 600px at 20% 10%, 
      rgba(0,188,125,0.08) 0%, 
      rgba(0,188,125,0.02) 45%, 
      rgba(255,255,255,0.0) 100%
    ),
    linear-gradient(180deg, #ffffff 0%, #f9fdfb 100%);
  text-align: center;
  overflow: hidden;
}

.section-core .section-title {
  font-size: 24px;
  font-weight: 600;
  color: #4A5565;
  margin-bottom: 100px;
}

.section-core .sublead {
  color: #364153;
  font-size: 18px;
  margin-bottom: 48px;
}

/* ===========================
   カード
=========================== */
.core-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  justify-content: center;
}

.core-card {
  background: #ffffff;
  border: 1px solid #E8EFEB;
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(10,60,45,.08);
  padding: 32px 28px;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.core-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10,60,45,.12);
}

.core-card .icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* カード内テキスト */
.core-card h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #101828;
  font-weight: 400;
}

.core-card p {
  margin: 0;
  font-size: 15px;
  color: #4A5565;
  line-height: 1.8;
}




/* 強み（2段） */
.strength-row{ 
  display:grid; 
  grid-template-columns: 1.1fr 1fr; 
  gap:24px; 
  align-items:center; 
  margin:50px 0;
}

.strength-row.reverse{ grid-template-columns: 1fr 1.1fr; }
.strength-row.reverse .strength-media{ order:2; }
.strength-row.reverse .strength-card{ order:1; }

.strength-media img{
  width:100%; 
  border-radius:18px;
  display:block; object-fit:cover;
  box-shadow: 0 18px 50px #00BC7D33;
}

.strength-card{
  position:relative; 
} 

.strength-card h3{ 
  margin:.2em 0 .6em; 
  font-size:20px; 
  font-weight:400;
  color:#101828;
 }

/* ===========================
   大学名リスト（緑背景ボックス・チェック画像版）
=========================== */
.university-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.university-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(234, 245, 241, 0.8); /* #EAF5F1 */
  border: 1px solid rgba(0, 153, 102, 0.25);
  border-radius: 10px;
  padding: 12px 18px;
  color: #101828;
  font-size: 18px;
  line-height: 1.6;
  transition: background 0.2s ease;
}

.university-item:hover {
  background: rgba(234, 245, 241, 1);
}

/* チェックアイコン（画像を直接挿入したい場合のサイズ調整） */
.university-item img.icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}

/* チェック付きリスト（水色トーン） */
.checklist {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist li {
  position: relative;
  background: #F7FBFD; /* ← やさしい水色背景 */
  border: 1px solid rgba(0,146,184,0.25); /* ← ブルー寄りの淡い線 */
  border-radius: 10px;
  padding: 14px 16px 14px 48px;
  color: #364153;
  line-height: 1.8;
  font-size: 18px;
}

/* チェックアイコン（画像） */
.checklist li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("../images/checkbox-icon.png") center/contain no-repeat; /* ← 水色トーンの画像 */
  opacity: 0.9;
}



/* 連携・実績 */
.partner-grid{ display:grid; gap:18px; grid-template-columns: repeat(3,1fr); margin-top:18px; }
.partner-card{
  padding:18px 18px 20px; border-radius:18px; background:#fff; border:1px solid #E8EFEB;
  box-shadow:0 12px 28px rgba(10,60,45,.08);
}

.partner-card h3{ 
  margin:.4em 0 .4em; 
  font-size:16px; 
  font-weight:400;
}

.partner-card p{ color:#4A5565; font-size:14px; line-height:1.8; }
.partner-ic{ 
  width:64px;
  height:64px;
  object-fit:contain; }


/* 共同研究プロジェクト・提携企業セクション */
.section.section-white {
  position: relative;
  z-index: 2; /* CTAのグラデが上にかぶらないように */
}

/* CTA（グラデ帯）との重なり防止 */
.cta-band {
  position: relative;
  z-index: 1;
}


/* ===========================
   Serviceページ専用 CTA（濃い緑）
=========================== */
/*.service .section.section-white {
  margin-bottom: 120px;
}
.section.section-white,
.service .cta-band {
  background: linear-gradient(135deg, #009966 0%, #007A55 50%, #007595 100%);
  color: #fff;
  margin-bottom: 0;
  padding-bottom: 0;
}

.service .container .cta-inner {
  text-align: center;
  padding: 120px 0;
}

.service .pill center .cta-pill {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  display: inline-block;
  padding: 10px 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  backdrop-filter: saturate(120%) blur(0px);
}

.service .cta-inner p {
  font-size: 16px;
  opacity: 1;
  margin-bottom: 24px;
  line-height: 2;
}

.service .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* 
.service .cta-btn--solid {
  color: #007A55;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 9999px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.service .cta-btn--solid:hover {
  background: #f7f7f7;
  transform: translateY(-1px);
}

.service .cta-btn--ghost {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
  border-radius: 9999px;
  padding: 14px 28px;
  transition: all 0.3s ease;
}
.service .cta-btn--ghost:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.service .cta-btn--solid::after,
.service .cta-btn--ghost::after {
  content: "→";
  margin-left: 8px;
  transition: transform 0.2s ease;
}
.service .cta-btn--solid:hover::after,
.service .cta-btn--ghost:hover::after {
  transform: translateX(4px);
}
*/

/* ===========================
   Serviceページ専用 CTA（濃い緑）
=========================== */

/* CTAセクション自体 */
body.service .cta-band {
  /* 背景は一番下の共通指定（::before）で付けているので、
     ここは余白・文字色だけ担当でOK */
  position: relative;
  padding: 100px 0;
  margin: 0;
  color: #fff;
  overflow: visible;
}

/* CTA内レイアウト */
body.service .cta-inner {
  text-align: center;
  padding: 120px 0;
}

/* ピル（「サービスに関するご質問・ご相談」みたいな小見出し） */
body.service .cta-pill {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  display: inline-block;
  padding: 10px 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  backdrop-filter: saturate(120%) blur(0px);
  margin-bottom: 16px;
}

/* 説明文 */
body.service .cta-inner p {
  font-size: 16px;
  opacity: 1;
  margin-bottom: 24px;
  line-height: 2;
}

/* ボタン並び */
body.service .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ボタン共通 */
body.service .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 14px 28px;
  font-size: 16px;
  transition: all 0.25s ease;
  text-decoration: none;
}

/* 左：白ボタン */
body.service .cta-btn--solid {
  color: #007A55;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
body.service .cta-btn--solid:hover {
  background: #f7f7f7;
  transform: translateY(-1px);
}

/* 右：透過ボタン */
body.service .cta-btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
body.service .cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

/* 矢印 */
body.service .cta-btn--solid::after,
body.service .cta-btn--ghost::after {
  content: "→";
  margin-left: 8px;
  transition: transform 0.2s ease;
}
body.service .cta-btn--solid:hover::after,
body.service .cta-btn--ghost:hover::after {
  transform: translateX(4px);
}


@media (max-width: 640px){
  .bg-soft::before{
    background:
      radial-gradient(
        600px 320px at 50% 0%,
        rgba(0,188,125,.08) 0%,
        rgba(0,188,125,.03) 45%,
        rgba(0,188,125,0) 100%
      ),
      #fff;
  }
}


/* SP */
@media (max-width: 960px){
  .overview{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .strength-row, .strength-row.reverse{ grid-template-columns:1fr; }
  .partner-grid{ grid-template-columns:1fr; }
}

/* CTA 本体は普通に中央＆パディングだけ */
.company .cta-band{
  position: relative;
  padding: 100px 0;   /* 余白はパディングで確保 */
  margin: 0;          /* セクション間の隙間は出さない */
}

/*.company .cta-band::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 auto;  
  left: 50%;
  transform: translateX(-50%); 
  width: 100vw;                
  background: linear-gradient(135deg,#009966 0%,#007A55 50%,#007595 100%);
  z-index: -1;                 
}*/

.company .cta-band::before{
    content:"";
    position: absolute;
  background: radial-gradient(
      circle at 60% 50%,          /* 円の中心位置（右上寄りなど調整可能） */
      rgba(0,188,125,0.05) 0%,   /* 中心の濃さ */
      rgba(0,188,125,0.02) 40%,  /* 中間 */
      rgba(0,188,125,0) 100%     /* 外側は透明 */
    ),
    linear-gradient(180deg, #ffffff 0%, #f9fdfb 100%);
  color: #101828;
  text-align: center;
  inset: 0 auto 0 auto;  
  left: 50%;
  transform: translateX(-50%); 
  width: 100vw;                
  z-index: -1;                 
}


/* 中のコンテンツ幅はコンテナで制御（既存のままでOK） */
.cta-band .container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* 念のためフッター前の余白を消す */
.site-footer{ margin-top: 0; }

/* ===========================
   Newsページ
=========================== */
body.news .news-filter-section {
  position: relative;
  padding: 80px 0 40px;
  overflow: hidden; /* ←はみ出し防止 */
  background: #ffffff;
}

/* ぼかし円（背景グラデの正体） */
body.news .news-filter-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  width: 384px;   /* Figmaと同じ */
  height: 384px;  /* Figmaと同じ */
  background: rgba(0, 188, 125, 0.14); /* #00BC7D の5% */
  border-radius: 50%;
  filter: blur(128px);
  z-index: 0;
}

/* フィルタ本体は上にて z-index: 1 */
body.news .news-filter {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 60px 0 40px;
}

body.news .news-filter__label {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

body.news .news-filter__list {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 各ボタン */
body.news .news-filter__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid #e3e8ef;
  border-radius: 9999px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #444;
  transition: all .25s ease;
  box-shadow: 0 3px 6px rgba(0,0,0,0.04);
}

/* アイコン部分（差し替えOK） */
body.news .news-filter__item span {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.news .news-filter__item span::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* アイコン画像（仮） */
body.news .news-filter__item[data-category="all"] span::before {
  background-image: url("../images/book-icon.png");
}

body.news .news-filter__item[data-category="press"] span::before {
  background-image: url("../images/bookblack-icon.png");
}

body.news .news-filter__item[data-category="joint"] span::before {
  background-image: url("../images/man-icon.png");
}

body.news .news-filter__item[data-category="event"] span::before {
  background-image: url("../images/happy-icon.png");
}

body.news .news-filter__item[data-category="info"] span::before {
  background-image: url("../images/bell-icon.png");
}

/* ホバー */
body.news .news-filter__item:hover {
  background: rgba(0, 150, 136, 0.05);
  border-color: #d0e7e4;
}

/* ▼ アクティブ切り替え（JSで .is-active を付ける想定） */
body.news .news-filter__item.is-active {
  background: linear-gradient(   
    90deg,
    #00BC7D 0%,
    #00B8DB 100%
  ) !important;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 12px rgba(0,0,0,0.10);
}

/* アクティブ時アイコン白にしたい場合（SVGをSVGフィルターで白にできるなら） */
body.news .news-filter__item.is-active span::before {
  filter: brightness(0) invert(1);
}

/* News 一覧 */
body.news .news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* カード本体 */
body.news .news-card {
  display: flex;
  gap: 24px;
  padding: 24px 28px;
  border: 1px solid #E5E7EB;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 52, 96, 0.08);
}

/* 左側：日付＋カテゴリ */
body.news .news-card__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 140px;
}

/* 日付（カレンダーアイコン付き） */
body.news .news-card__date {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  color: #667085;
}

body.news .news-card__date::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("../images/calender-icon.png"); /* 好きなアイコンに差し替え */
  background-size: contain;
  background-repeat: no-repeat;
}

/* 全カテゴリ共通（ベース） */
body.news .news-card__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}

/* --- プレスリリースだけ色付き --- */
body.news .news-card__category--press {
  color: #0f9f6e;
  background: #e6f7f0;
  border-color: #d1f0e4;
}

/* --- 共同研究 / イベント / お知らせ → 無彩色 --- */
body.news .news-card__category--joint,
body.news .news-card__category--event,
body.news .news-card__category--info {
  background: #ffffff;
  border: 1px solid #bbbdbd;
  color: #4b5563;
  box-shadow: 0 10px 30px rgba(15, 52, 96, 0.08);
  transition: box-shadow .25s ease, transform .25s ease;
}


/* 右側：タイトル・本文・リンク */
body.news .news-card__body {
  flex: 1;
}

body.news .news-card__title {
  font-size: 16px;
  font-weight: 400;
  color: #111827;
  line-height: 1.6;
  margin-bottom: 8px;
}

body.news .news-card__excerpt {
  font-size: 16px;
  line-height: 1.8;
  color: #4b5563;
  margin-bottom: 12px;
}

body.news .news-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #10b981;
  text-decoration: none;
}

body.news .news-card__link::after {
  content: "›";
  font-size: 16px;
  transform: translateY(1px);
}

body.news .news-card__link:hover {
  text-decoration: underline;
}

/* ホバー時のカード */
body.news .news-card:hover {
  box-shadow: 0 14px 40px rgba(15, 52, 96, 0.12);
  transform: translateY(-1px);
  transition: box-shadow .25s ease, transform .25s ease;
}

body.news .news-list {
  max-width: 1200px; /* ← サイト全体の共通幅に合わせる */
  margin: 0 auto;
  padding: 0px 24px 100px; /* ← ヘッダーや他ページと合わせる余白 */
}

body.news .cta-inner{ text-align:center; padding:88px 0 }

/* 上の小見出しは“文字のみ”に（ピル風は解除） */
body.news .cta-pill{
  background:none !important;
  border:none !important;
  color:#101828 !important;
  padding:0 !important;
  margin:0 0 8px !important;
  font-weight:400 !important;
}

/* 説明文（中央・少し細め） */
body.news .cta-inner p{
  margin:0 0 24px;
  font-size:16px;
  line-height:2.0;
  color:#364153;
}

/* ボタン配置 */
body.news .cta-buttons{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap }

/* — ボタン（CTA専用スコープ） — */
body.news .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; padding:14px 28px; font-size:16px;
  transition:all .25s ease; text-decoration:none;
}

/* 左：緑の塗りボタン */
body.news .cta-btn--solid{
  color:#fff;
  background: linear-gradient(90deg, #00BC7D 0%, #009966 100%);
  border: none;
  box-shadow: 0 8px 18px rgba(0,60,40,.20);
}
body.news .cta-btn--solid::after{
  content:"\2192"; /* → */
  margin-left:10px; transition:transform .2s ease;
}
body.news .cta-btn--solid:hover{ transform: translateY(-1px); filter:brightness(1.04) }
body.news .cta-btn--solid:hover::after{ transform: translateX(4px) }

/* 右：白地＋緑枠ボタン */
body.news .cta-btn--ghost{
  color:#007A55;
  background:#fff;
  border:1px solid rgba(0,153,102,.65);
  box-shadow: 0 6px 14px rgba(0,60,40,.10);
}
body.news .cta-btn--ghost:hover{ background:#f9fdfb; transform:translateY(-1px) }



/* SPレイアウト */
@media (max-width: 768px) {
  body.news .news-card {
    flex-direction: column;
    padding: 20px 18px;
    gap: 16px;
  }

  body.news .news-card__meta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }

  body.news .news-card__date {
    padding-left: 24px;
  }

  body.news .news-card__title {
    font-size: 16px;
  }
}

body.news .cta-band.cta-news {
  position: relative;
  background: #ffffff;
  color: var(--text-main);
  padding: 80px 0;
  overflow: hidden;
}

body.news .cta-band.cta-news::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(0,188,125,0.10) 0, rgba(0,188,125,0) 55%),
    radial-gradient(circle at 90% 80%, rgba(0,117,149,0.10) 0, rgba(0,117,149,0) 55%);
  z-index: -1;
}

body.news main {
  background: #fff;
}
body.news .section {
  background: #fff;
}

/* ===========================
   Top / Service 共通 CTA 調整
=========================== */

/* セクション本体：高さ・余白調整 */
body.top .cta-band,
body.service .cta-band {
  position: relative;
  margin-top: 80px;         /* ← 上のセクションとの余白 */
  padding: 40px 0 56px;     /* ← 縦の長さ（お好みで 40〜80px に調整OK） */
  color: #fff;
  overflow: visible;
}

/* 中身の余白もここで詰める（前の 120px を上書き） */
body.top .cta-inner,
body.service .cta-inner {
  text-align: center;
  padding: 24px 0;          /* ← ここを小さくするとさらに縦が縮む */
}

/* Top / Service：濃いグラデ背景を横幅いっぱいに */
body.top .cta-band::before,
body.service .cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;             /* ← 画面幅100％に固定 */
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #009966 0%, #007A55 50%, #007595 100%);
  z-index: -1;
}

/* ===========================
   会社概要ページ CTA（横幅いっぱい＋高さ調整）
=========================== */

.company .cta-band {
  position: relative;
  margin-top: 80px;       /* ← 上の沿革との間 */
  padding: 48px 0 64px;   /* ← 縦の高さ（好みで調整OK） */
  text-align: center;
  background: transparent;
  overflow: visible;
}

/* 中身の余白も控えめに（以前の 88px などを上書き） */
.company .cta-inner {
  padding: 24px 0;
}

/* 背景グラデを横幅いっぱいに広げる */
.company .cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;           /* ← 画面幅ぴったり */
  height: 100%;
  transform: translateX(-50%);
  background:
    radial-gradient(
      circle at 60% 50%,
      rgba(0,188,125,0.05) 0%,
      rgba(0,188,125,0.02) 40%,
      rgba(0,188,125,0) 100%
    ),
    linear-gradient(180deg, #ffffff 0%, #f9fdfb 100%);
  z-index: -1;            /* ← テキストの背面に */
}

/* 小見出し・テキスト・ボタンはそのまま使う場合はこれだけ残せばOK */
.company .cta-pill{
  background:none !important;
  border:none !important;
  color:#101828 !important;
  padding:0 !important;
  margin:0 0 8px !important;
  font-weight:400 !important;
}

.company .cta-inner p{
  margin:0 0 24px;
  font-size:16px;
  line-height:2.0;
  color:#364153;
}

.company .cta-buttons{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}

.company .cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  padding:14px 28px;
  font-size:16px;
  text-decoration:none;
  transition:all .25s ease;
}

.company .cta-btn--solid{
  color:#fff;
  background: linear-gradient(90deg, #00BC7D 0%, #009966 100%);
  border:none;
  box-shadow:0 8px 18px rgba(0,60,40,.20);
}
.company .cta-btn--solid::after{
  content:"\2192";
  margin-left:10px;
  transition:transform .2s ease;
}
.company .cta-btn--solid:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}
.company .cta-btn--solid:hover::after{
  transform:translateX(4px);
}

.company .cta-btn--ghost{
  color:#007A55;
  background:#fff;
  border:1px solid rgba(0,153,102,.65);
  box-shadow:0 6px 14px rgba(0,60,40,.10);
}
.company .cta-btn--ghost:hover{
  background:#f9fdfb;
  transform:translateY(-1px);
}

/* ===========================
   お問い合わせページ
=========================== */

/* ページ全体トーン */
body.contact main {
  background: #fff;
}

/* ===========================
   Contact Hero（他ページと完全統一）
=========================== */

body.contact .contact-hero {
  position: relative;
  padding: 80px 0 70px;
  background: #ffffff;          /* hero-sub と同じ真っ白ベース */
  isolation: isolate;           /* はみ出し防止（hero-sub と同じ） */
  overflow: hidden;
}

/* 背景グラデ画像（hero-sub と全く同じ仕組み） */
body.contact .contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/hero-sub-bg@2x.png") no-repeat center/cover;
  opacity: 0.95;                /* hero-sub に合わせる。必要なら 0.9～1 で調整 */
  pointer-events: none;
  z-index: 0;
}

/* Hero の中身を最前面へ */
body.contact .contact-hero .container {
  position: relative;
  z-index: 1;
}

.contact-hero__inner {
  position: relative;
}

.contact-summary__label,
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px !important;
  background: rgba(0,153,102,0.08)!important;
  border: 1px solid rgba(0,153,102,0.2)!important;
  color: #006045;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
}

.contact-pill__icon {
  font-size: 12px;
}

.contact-hero__title {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  color: #101828;
}

.contact-hero__lead {
  margin: 0;
  font-size: 16px;
  color: #364153;
  line-height: 1.9;
}

.contact-summary__text {
  font-size: 16px;
  color: #364153;
  margin-bottom: 28px;
}

.contact-email-card {
  max-width: 520px;
  margin: 0 auto 32px;
  padding: 36px 28px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(10,60,45,.12);
  border: 1px solid #E8EFEB;
  display: flex;
  flex-direction: column;   /* ← ★縦に並べる */
  align-items: center;      /* ← ★中央揃え */
  text-align: center;       /* ← ★文字も中央に */
  gap: 18px;                /* ← アイコンとテキストの間隔 */
}

.contact-email-card__icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
}

.contact-email-card__label {
  font-size: 12px;
  color: #6B7280;
  margin: 0 0 4px;
}

.contact-email-card__address {
  font-size: 18px;
  color: #009966;
  font-weight: 500;
}

.contact-email-card__note {
  font-size: 13px;
  color: #6B7280;
  margin: 6px 0 0;
}

.contact-summary__btn {
  margin-top: 4px;
}

.contact-form {
  padding: 40px 0 72px;
  background: #f5faf8;
}

.contact-form__pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,153,102,0.08);
  color: #006045;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
  border: 1px solid rgba(0,153,102,0.2)!important;
}

.contact-form__desc {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 24px;
}

.contact-form__card {
  max-width: 820px;
  margin: 0 auto;
  padding: 30px 28px 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(15, 118, 110, 0.18);
  border: 1px solid #E8EFEB;
}

.contact-form__row {
  margin-bottom: 18px;
}

/* 2カラム行 */
.contact-form__row--2col {
  display: flex;
  gap: 24px;
}

.contact-form__row--2col > div {
  flex: 1;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; 
  padding: 14px 28px;
}

.contact-form__submit .btn-icon {
  width: 18px;
  height: 18px;
}


.contact-form__label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #374151;
}

.req {
  color: #EF4444;
  margin-left: 4px;
  font-size: 12px;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #D1E2DB;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  background: #fff;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: #00BC7D;
  box-shadow: 0 0 0 2px rgba(0,188,125,0.15);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 160px;
}

.contact-form__actions {
  margin-top: 22px;
}

.contact-form__submit {
  min-width: 180px;
}

/* 送信ボタン：左 → 右 グラデーション */
.contact-form__submit {
  background: linear-gradient(
    90deg,
    #00BC7D 0%,
    #00B8DB 100%
  );
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(0, 150, 120, 0.25);
  transition: opacity .25s ease;
}

.contact-form__submit:hover {
  opacity: 0.9;
}

.contact-form__submit:active {
  opacity: 0.8;
}

/* ::after を完全に消す（矢印が被る対策） */
.contact-form__submit::after {
  content: none !important;
}


/* ④ FAQカード */
.contact-info {
  padding: 120px 80px;
  background: #ffffff;
}

.contact-info__pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #EAF5F1;
  color: #006045;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 40px;
border: 1px solid rgba(0,153,102,0.2);
}

.contact-info__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.contact-info-card {
  text-align: left;
  padding: 30px 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #E8EFEB;
  box-shadow: 0 12px 30px rgba(10,60,45,.08);
}

.contact-info-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 400;
  color: #111827;
}

.contact-info-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 16px;
  color: #4B5563;
  line-height: 2.4;
}


.contact-form__card {
  background: linear-gradient(
    135deg,
    rgba(236, 253, 245, 0.45) 0%,   
    rgba(255, 255, 255, 0.8) 40%,   
    rgba(236, 254, 255, 0.45) 100%
  );
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 80, 60, 0.06);
  backdrop-filter: blur(0px);
}

.contact-form__submit::after {
  content: none !important;
}

/* 全体のベースは白にしておく（フッターまで） */
body.contact main {
  background:#ffffff;
}


/* ▼ フォームとその下の説明セクションは真っ白に固定 */
body.contact .contact-form-section,
body.contact .contact-notes-section {
  background:#ffffff;
}


body.contact .contact-info__grid {
  max-width: 820px;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr); /* 2カラム維持 */
  gap: 24px;
}



body.contact {
  background: #ffffff;
}

/* 箇条書きの丸を緑に */
body.contact .contact-info-card ul li::marker {
  color: #00BC7D;
  font-size: 16px;
}




/* レスポンシブ */
@media (max-width: 768px) {
  .contact-form__row--2col {
    grid-template-columns: 1fr;
  }
  .contact-info__grid {
    grid-template-columns: 1fr;
  }
  .contact-email-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===========================
   お問い合わせページ 最終調整
=========================== */

/* ページ全体は白ベース */
body.contact,
body.contact main {
  background: #ffffff;
}

/* Hero（上の大きいグラデセクション）は
   既存の .contact-hero の指定を使うのでここでは触らない */

/* ① お問い合わせ先セクション：うっすらグラデーション */
body.contact .contact-summary {
  padding: 64px 0 40px;
  background:
    radial-gradient(
      900px 400px at 50% 0%,
      rgba(0,188,125,0.07) 0%,
      rgba(0,188,125,0.0) 65%
    ),
    #ffffff;
}

/* ② フォームセクションは真っ白（カードだけグラデ） */
body.contact .contact-form {
  background: #ffffff;
}

/* ③ 下のFAQカードセクションも真っ白 */
body.contact .contact-info {
  background: #ffffff;
}

/* 余計な ::before グラデは念のためオフ */
body.contact .contact-summary::before,
body.contact .contact-form::before {
  content: none !important;
}

/* ==== お問い合わせ先セクションのグラデを最優先で適用 ==== */
body.contact section.contact-summary {
  padding: 64px 0 40px; /* ここで余白もまとめて指定 */
  background: linear-gradient(135deg, #009966 0%, #007A55 50%, #007595 100%);
    #ffffff !important;
}
/*ここらへんから*/
/* 基本は白ベース */
body,
body.home,
body.front-page {
  background: #ffffff;
}

/* もし .section で背景をグリーンにしていたら一旦リセット */
.section {
  padding: 80px 0;
  background: #ffffff;
}

/* ロゴ帯だけ淡いグリーン */
.section-green {
  background: #f3fbf7;
}

/* News 帯：上が少しグラデ、カードは白いボックス */
.news-band {
  background: linear-gradient(180deg, #f5fdf9 0%, #ffffff 100%);
}

.news-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.news-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 24px 22px 26px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.cta-band {
  background: linear-gradient(90deg, #00bc7d 0%, #00b8db 100%);
  padding: 72px 0;
  color: #ffffff;
}

.cta-inner {
  text-align: center;
}

.cta-band .cta-pill {
  background: rgba(255, 255, 255, 0.15);
}

.cta-band .btn.btn-primary.cta {
  background: #ffffff;
  color: #009966;
}

/* ===== Top：連携機関・企業セクション（home/front-page） ===== */
body.home .section.section-green,
body.front-page .section.section-green {
  background: #ffffff;          /* セクション自体は白 */
  padding: 72px 0;
}

body.home .section.section-green > .container,
body.front-page .section.section-green > .container {
  background: #f3fbf7;          /* うっすら緑の箱 */
  border-radius: 22px;
  padding: 40px 32px 44px;
  box-shadow: 0 10px 30px rgba(0, 60, 30, 0.06);
}

body.home .section.section-green .section-title,
body.front-page .section.section-green .section-title {
  margin-bottom: 32px;
}

/* ===== Top：News 帯（home/front-page） ===== */
body.home .news-band,
body.front-page .news-band {
  position: relative;
  background: #ffffff;
  padding: 72px 0;
  overflow: hidden;
}

body.home .news-band::before,
body.front-page .news-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(0, 188, 125, 0.04);
  filter: blur(120px);
  z-index: 0;
}

body.home .news-band .container,
body.front-page .news-band .container {
  position: relative;
  z-index: 1;
}

/* 見出し行：左に「News」、右に「すべて見る」 */
body.home .news-band .news-head,
body.front-page .news-band .news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* カレンダーアイコン（dateの左） */
body.home .news-card .meta time,
body.front-page .news-card .meta time {
  position: relative;
  padding-left: 24px;
}
body.home .news-card .meta time::before,
body.front-page .news-card .meta time::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("../images/calender-icon.png") center/contain no-repeat;
  opacity: .8;
}

/* 「続きを読む →」を緑に */
body.home .news-card .link,
body.front-page .news-card .link {
  color: #007A55;
  font-weight: 400;
  font-size: 14px;
}

/* ===== Top：CTA お問い合わせ帯（home/front-page） ===== */
body.home .cta-band,
body.front-page .cta-band {
  position: relative;
  background: linear-gradient(
    135deg,
    #009966 0%,
    #007A55 45%,
    #007595 100%
  );
  margin-top: 80px;
  padding: 100px 0px;
  color: #ffffff;
  overflow: hidden;
}

/* Top では ::before は使わない（他ルールの影響を切る） */
body.home .cta-band::before,
body.front-page .cta-band::before {
  content: none !important;
}

body.home .cta-inner,
body.front-page .cta-inner {
  text-align: center;
  padding: 0;
}
 
body.home .cta-band .cta-pill,
body.front-page .cta-band .cta-pill {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.7) !important;
}

body.post-type-archive-news .cta-band .cta-pill {
  color: #0F2F28 !important;     /* 黒みのグリーン系 */
  border-color: #0F2F28 !important;
}

body.page-company .cta-band .cta-pill {
  color: #0F2F28 !important;
  border-color: #0F2F28 !important;
}

body.page-service .cta-band .cta-pill {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.7) !important;
}

/* News カテゴリタグのデザイン */
.news-cards .tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid #54A58C; /* 薄めの緑系の枠 */
  border-radius: 999px;
  color: #54A58C;
  background: #fff;
}

/* --- Newsカード全体の枠・レイアウト --- */
.news-card {
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease;
}

.news-card:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

/* --- 日付アイコンと日付 --- */
.news-card .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280; /* グレー */
  font-size: 14px;
  margin-bottom: 8px;
}

.news-card .meta time {
  font-weight: 500;
}

/* --- タグ（プレスリリース・お知らせ・イベント） --- */
.news-card .tag {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #cce3d8;
  background: #f6fffa;
  color: #2c8f6b;
  display: inline-block;
  margin-left: 8px;
}

/*　タグ色の個別対応（必要なら） */
.tag-press {
  background: #fff7f4;
  color: #d86c47;
  border-color: #f3c7b8;
}

.tag-info {
  background: #f4faff;
  color: #3a87c9;
  border-color: #c5dbf0;
}

.tag-event {
  background: #fef9ff;
  color: #c455c4;
  border-color: #e7c5ea;
}

/* --- タイトル（本文見出し） --- */
.news-card h3 {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;  /* ← 細めに */
  margin-bottom: 12px;
  color: #333;
}

/* --- 続きを読む（緑色に） --- */
.news-card .link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #2c8f6b !important;
  font-size: 14px;
  font-weight: 500;
}

.news-card .link:hover {
  opacity: 0.7;
}

/* ===== News タグ色 ===== */

/* 
.tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 999px;
  font-weight: 500;
  border: 1px solid #ddd;
  background-color: #fff;
}*/

/* プレスリリース → 緑 */
.tag-press {
  color: #0F8B62;
  border-color: #0F8B62;
  background-color: rgba(15, 139, 98, 0.05);
}

/* お知らせ・イベント → グレー */
.tag-info,
.tag-event {
  color: #7C7C7C;
  border-color: #D5DCDC;
  background-color: rgba(0, 0, 0, 0.03);
}

.meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ベースのタグ（共通デザインだけ） */
.news-card .tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  margin-left: 8px;
  /* ↓ ここは消す or コメントアウトにしておく */
  /* border: 1px solid #ccc3d8;
  background: #ffffff;
  color: #2c8f6b; */
}

/* プレスリリースだけ緑 */
.news-card .tag-press {
  color: #0F8B62;
  border: 1px solid #0F8B62;
  background: rgba(15, 139, 98, 0.05);
}

/* お知らせ・イベントはグレー */
.news-card .tag-info,
.news-card .tag-event {
  color: #7C7C7C;
  border: 1px solid #D5DCDC;
  background: /*rgba(0, 0, 0, 0.03)*/#FFF;
}

/*
.news-band .btn.small::after {
  content: " →";
  font-size: 14px;
  margin-left: 6px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}*/

.news-band .btn.small:hover::after {
  opacity: 1;
}

/* ========== Contact 共通 ========== */

body.page-template-お問い合わせ .site-header,
body.page-id-xxx .site-header {
  /* 必要あれば contact 専用調整ここに */
}

/* ① hero 部分（トップと似た雰囲気の淡いグラデ） */
.contact-hero {
  padding: 100px 0 120px;
  background: url('../images/hero-sub-bg@2x.png') no-repeat center/cover;
}

.page-hero__title {
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 20px;
  color: #0f172a;
}

.page-hero__lead {
  font-size: 16px;
  line-height: 1.8;
  color: #475569;
}

.page-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 999px;
  
  /* うっすらミント背景 */
  background: rgba(0, 150, 102, 0.06);

  /* 枠は極薄の緑 */
  border: 1px solid rgba(0, 150, 102, 0.20);

  color: #0F8B62;
  font-weight: 500;
  margin-bottom: 20px;
}

.pill-icon {
  width: 14px;
  height: 14px;
}

/* ② メールアドレスカード */
.contact-summary {
  padding: 40px 0 24px;
}

.contact-summary__label {
  font-size: 14px;
  letter-spacing: .08em;
  color: #6b7280;
}

.contact-summary__text {
  margin-top: 4px;
  margin-bottom: 24px;
  color: #374151;
}

.contact-email-card {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  display: flex;
  gap: 16px;
  align-items: center;
}

.contact-email-card__icon img {
  width: 64px;
  height: 64px;
}

.contact-email-card__label {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

.contact-email-card__address {
  font-size: 18px;
  font-weight: 500;
  color: #0f8b62;
  text-decoration: none;
}

.contact-email-card__address:hover {
  text-decoration: underline;
}

.contact-email-card__note {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

/* ③ フォームまわり */
.contact-form {
  padding: 40px 0 64px;
}

.contact-form__head {
  margin-bottom: 24px;
}

.contact-form__pill {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  margin-bottom: 8px;
}

.contact-form__desc {
  color: #4b5563;
  font-size: 14px;
}

.contact-form__card {
  max-width: 840px;
  margin: 0 auto;
  padding: 24px 24px 32px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.contact-form__row {
  margin-bottom: 16px;
}

.contact-form__row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .contact-form__row--2col {
    grid-template-columns: 1fr;
  }

  .contact-email-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.contact-form__label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
}

.req {
  color: #ef4444;
  margin-left: 4px;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: #0f8b62;
  box-shadow: 0 0 0 1px rgba(15,139,98,0.15);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 160px;
}

.contact-form__actions {
  margin-top: 24px;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 16px 30px;
}

.btn-icon {
  width: 18px;
  height: 18px;
}

/* ④ ご案内カード */
.contact-info {
  padding: 60px 0 80px;
}

.contact-info__pill {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  margin-bottom: 24px;
}

.contact-info__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .contact-info__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .contact-info__grid {
    grid-template-columns: 1fr;
  }
}

.contact-info-card {
  text-align: left;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.contact-info-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.contact-info-card ul {
  padding-left: 18px;
  margin: 0;
}

.contact-info-card li {
  font-size: 13px;
  line-height: 1.7;
  color: #4b5563;
}

/* お問い合わせ先セクション全体のうっすらグラデーション */
body.contact .contact-summary {
  position: relative;
  overflow: hidden;
  padding: 80px 0 120px;
}

/* 背景のグラデーションを大きく広げる */
body.contact .contact-summary::before {
  content: "";
  position: absolute;
  inset: -40% -10%;  /* 上下左右に少しはみ出させて広くする */
  background:
    radial-gradient(circle at center,
      rgba(15, 139, 98, 0.30) 0%,   /* 真ん中ちょい濃い */
      rgba(15, 139, 98, 0.05) 40%,  /* だんだん薄く */
      rgba(255, 255, 255, 0) 75%    /* 透明にフェードアウト */
    );
  z-index: -1;  /* 中身より奥に */
}


/* 中身を前面へ */
.contact-summary .container {
  position: relative;
  z-index: 2;
}

.contact-info__pill,
.contact-form__pill,
.contact-summary__label {
  display: inline-block;
  padding: 8px 20px;
  background: #e4f7ef;
  border: 1px solid #bde9d8;
  border-radius: 999px;
  color: #0d8a6d;
  font-size: 14px;
  margin-bottom: 24px;
}

/* お問い合わせフォーム（カード全体の背景） */
.contact-form__card {
  background: linear-gradient(
    135deg,
    rgba(230, 255, 245, 0.10) 0%,
    rgba(240, 255, 250, 0.15) 30%,
    rgba(235, 250, 255, 0.20) 60%,
    rgba(225, 245, 255, 0.25) 100%
  );
  padding: 80px 60px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(2px);
}

/* FAQ グリッドを 2列に */
.contact-info__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}

/* SPでは1列に */
@media (max-width: 768px) {
  .contact-info__grid {
    grid-template-columns: 1fr;
  }
}


.contact-info-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
  text-align: left;
}

/* タイトル */
.contact-info-card h3 {
  font-size: 15px;
  margin-bottom: 12px;
  color: #111827;
}

/* 箇条書き */
.contact-info-card ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 14px;
  color: #4b5563;
}

.contact-info-card li + li {
  margin-top: 4px;
}

/* お問い合わせについて セクションの背景グラデ */
.contact-info {
  position: relative;
  padding: 56px 0 72px;
  overflow: hidden;
}

.contact-info::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 120%;
  height: 140%;
  background: radial-gradient(
    circle at center,
    rgba(215, 248, 234, 0.85) 0%,
    rgba(215, 248, 234, 0.0) 70%
  );
  z-index: -1;
}
/* フォームと「お問い合わせについて」カードの横幅をそろえる */
.contact-form__card,
.contact-info__grid {
  max-width: 840px;
  margin: 0 auto;
}

/* お問い合わせについて：グリッド配置 */
.contact-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}

/* 各カード */
.contact-info-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(12, 34, 23, 0.08);
  padding: 30px 24px;
  text-align: left;
  font-size: 16px;        /* 本文16px */
}

/* 見出しも16pxでOK（少し太字） */
.contact-info-card h3 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 12px;
}

/* カード本文・行間 */
.contact-info-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.contact-info-card li {
  position: relative;
  padding-left: 18px;     /* 丸とテキストの距離 */
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 2.4;       /* ← 行間 2.4 */
}

/* 緑の丸（ドット） */
.contact-info-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;            /* テキストの縦中心に合わせる */
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0F8B62;    /* 緑 */
}


/* =========================
   News 一覧（アーカイブ）ヒーロー
   ========================= */

/* .section の白背景を打ち消しつつ、ニュース用の背景を当てる */
body.post-type-archive-news .page-hero--news {
  position: relative;
  padding: 96px 0 80px;
  background: none; /* .section { background:#fff; } を上書き */
  overflow: hidden;
}

body.post-type-archive-news .page-hero--news::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/bg-news-hero.png") center/cover no-repeat; 
}

/* テキストのレイアウト（会社概要／サービスとトーンを揃える） */
body.post-type-archive-news .page-hero--news .page-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f8b62;
  margin-bottom: 16px;
}

body.post-type-archive-news .page-hero--news .page-hero__title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

body.post-type-archive-news .page-hero--news .page-hero__lead {
  font-size: 15px;
  line-height: 1.9;
  color: #4b5563;
}


/* Coming Soonカード */
.partner-card--coming-soon {
  flex: 0 1 260px;
  min-height: 160px;
  padding: 24px 20px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.partner-card__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 999px;
  color: #0f8b62;
}

.nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  margin: 0;
  padding: 0;
}

/* お問い合わせフォームのカードを中央寄せ＋幅840pxに */
.contact-form .wpcf7 form,
.contact-form .wpcf7-form {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

/* もし .contact-form__card / .contact-form_card を使っていたらそちらもまとめて */
.contact-form__card,
.contact-form_card {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

nav a[href$="/contact/"][aria-current="page"] {
  color: inherit !important;
  font-weight: inherit !important;
}

/* デフォルトsubmit無効化 */
.wpcf7 input[type="submit"] {
    display: none;
}

/* CF7デフォルトsubmitを消す */
.wpcf7 input[type="submit"] {
  display: none;
}

/* CF7デフォルトsubmitを消す */
.wpcf7 input[type="submit"] {
  display: none;
}

/* カスタムボタン */
.submit-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 38px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #00BC7D, #00B8DB);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  line-height: 1;
  transition: opacity 0.3s ease;
}

.submit-with-icon:hover {
  opacity: 0.9;
}

/* アイコン */
.submit-with-icon img {
  width: 20px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1); /* 白く見せる */
}

/* 共通のスタイル */
.mvv-em {
  font-weight: 600;
}

/* Mission → 緑 */
.mvv-em--mission {
  color: #009966;
}

/* Vision → 青 */
.mvv-em--vision {
  color: #007595;
}

/* Values → 紫 */
.mvv-em--values {
  color: #8200DB;
}

/* お問い合わせカードのリスト */
.contact-info-card ul {
  padding-left: 1.4em;   /* ちょっとだけインデント */
  margin: 0;
}

/* 箇条書きの点だけ緑にする */
.contact-info-card li::marker {
  color: #00B894;  /* 好きなグリーンに変更OK */
}

/* ===== Serviceページ専用 CTA最終調整 ===== */

/* 背景グラデーションをTOPと同じに */
main.service .cta-band {
  position: relative;
  background: linear-gradient(135deg, #009966 0%, #007A55 45%, #007595 100%) !important;
  color: #ffffff !important;
  padding: 72px 0 !important;
  overflow: hidden;
}

/* 万が一 ::before で別のグラデが乗っていたら消す */
main.service .cta-band::before {
  content: none !important;
}

/* 一番上の「お問い合わせ」ピルを白文字＋薄い白背景に戻す */
main.service .cta-band .cta-pill {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
}

/* 説明テキストも白 */
main.service .cta-band p {
  color: #ffffff !important;
}

/* ボタン（白地＋緑文字） */
main.service .cta-band .btn,
main.service .cta-band .btn.btn-primary,
main.service .cta-band .btn.btn-primary.cta {
  background: #ffffff !important;
  color: #007A55 !important;
  border: none !important;
}

/* ボタンホバーも少しだけ明るく */
main.service .cta-band .btn:hover,
main.service .cta-band .btn.btn-primary:hover,
main.service .cta-band .btn.btn-primary.cta:hover {
  filter: brightness(1.04);
}

/* ========== Responsive ========== */
/* ===================================
   TOP HERO – Responsive adjustments
=================================== */
/* ▼ スマホ用〜768px */
@media (max-width: 768px) {

  .hero-inner {
    padding: 40px 20px 48px;
  }

  .hero-copy h1 {
    font-size: 24px;
    line-height: 1.4;
  }

  .hero-copy h1 span {
    display: block;
    margin-top: 4px;
  }

  .hero-copy .lead {
    font-size: 26px;
    margin-top: 16px;
  }

  .hero-copy .sub {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 12px;
  }
}

@media (max-width: 768px) {

  .cta-row {
    display: flex;
    flex-direction: column;   /* 縦並びに */
    align-items: stretch;
    gap: 12px;               /* ボタン間の余白 */
    margin-top: 24px;
  }

  .cta-row .btn {
    justify-content: center; /* テキスト中央寄せ（flexボタンの場合） */
  }

  .cta-row .btn.btn-ghost {
    /* 必要ならここでだけ色や枠を微調整もできる */
  }
}

@media screen and (max-width: 480px) {

  /* ヒーロータイトルのサイズ調整 */
  .hero-copy h1 {
    font-size: 46px;      /* 必要なら 30px や 28px に微調整してOK */
    line-height: 1.3;
  }

  /* 英語の後半だけ改行させたい場合 */
  .hero-copy h1 span {
    display: block;       /* 「Know Myself.」を2行目に落とす */
  }

  /* 余白も少しだけ詰めるとバランス良くなるかも */
  .hero-inner {
    padding: 72px 20px 40px;
  }
}

@media screen and (max-width: 526px) {

  /* タイトル全体の調整 */
  .hero h1 {
    font-size: 46px;     
    line-height: 1.3;
    white-space: normal; 
    overflow: visible;
  }

  /* Know Myself. を強制的に次の行へ */
  .hero h1 span {
    display: block;      /* ←これで「必ず改行」!! */
  }
}

/* 共通（PC含む）で横並びにしている前提 */
.logo-wall {
  display: flex;
  gap: 24px;          /* ここは既存値に合わせてね */
  justify-content: center;
}

/* SP：MVの余白を少し上につめる */
@media (max-width: 767px) {
  .hero-inner {
    padding-top: 15px;  /* 好きに 24〜40pxくらいで調整してOK */
  }
}

/* SP：MVのボタンを横幅いっぱいにしない */
@media (max-width: 767px) {

  .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;          /* ボタン同士の間隔 */
  }

  .hero-cta .btn {
    width: auto;        /* ここで100%指定を打ち消す */
    display: inline-flex;
  }

  .hero-copy br {
    display: none;
  }
}

/* スマホで縦並びにする */
@media screen and (max-width: 767px) {
  .logo-wall {
    flex-direction: column;  /* 縦並び */
    align-items: stretch;    /* 幅いっぱい */
  }

  .logo-wall .partner-card {
    width: 100%;
    max-width: none;
  }
}

/* --- News 共通レイアウト --- */
.news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* 既存の .grid-3 のままでOK。必要なら news 用だけ上書き */
.news-band .grid-3.news-cards {
  /* ここは既存指定があればそのままでもOK */
}

/* ボタンを右寄せ（PC時） */
.news-more {
  margin-top: 24px;
  text-align: right;
}

/* PCデフォルト：上のボタンだけ表示 */
.btn-news-top {
  display: inline-flex;
}
.news-more-sp {
  display: none;
}

@media screen and (max-width: 767px) {

  /* カードを縦並びに */
  .news-band .grid-3.news-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* 上のボタンは非表示、下だけ表示 */
  .btn-news-top {
    display: none;
  }
  .news-more-sp {
    display: block;
    text-align: center;
    margin-top: 20px;
  }
}

/* デフォルト（PC）：下のボタンは非表示 */
.news-more {
  display: none;
}

/* SP：上のボタンを消して、下のボタンを表示 */
@media (max-width: 767px) {
  .news-head .btn {
    display: none;
  }

  .news-more {
    display: block;
    margin-top: 16px;
    text-align: center;
  }

  .news-more .btn {
    display: inline-flex;
  }
}

/* =========================
   SP ハンバーガーメニュー
   ========================= */
.hamburger {
  display: none;           
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 4px 0;
  background-color: #1C3247;
  transition: transform 0.2s ease, opacity 0.2s ease;
}


.sp-nav {
  display: none; 
} 


@media (max-width: 959px) {

  .header-inner {
    position: relative;
  }

  .hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .sp-nav {
    position: absolute;
    top: 56px;            
    left: 0;
    right: 0;
    padding: 16px 20px 20px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 16px 16px;
    display: none;
    z-index: 50;
  }

  .sp-nav.is-open {
    display: block;
  }

  .sp-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sp-nav-item {
    padding: 10px 0;
    border-bottom: 1px dashed #B9C2CC; 
  }

  .sp-nav-item:last-child {
    border-bottom: none;
    margin-top: 12px;
  }

  .sp-nav-item a {
    display: block;
    font-size: 14px;
    color: #1C3247;
    text-decoration: none;
  }


  .sp-nav-item--contact .sp-nav-contact {
    text-align: center;
    padding: 10px 16px;
    background: #0D8C6B;         
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
  }
}

.hamburger.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==== SPドロワーメニュー ==== */

/* 初期状態：非表示 */
.nav-drawer {
  display: none;
}

.nav-overlay {
  display: none;
}

/* 開いたときだけ表示 */
.nav-drawer.is-open {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: #fff;
  padding: 80px 24px 40px;
  box-shadow: -4px 0 16px rgba(0,0,0,.1);
  z-index: 1000;
}

.nav-overlay.is-open {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 999;
}

/* PCではハンバーガー非表示 */
@media (min-width: 960px) {
  .hamburger {
    display: none;
  }
}

/* SPではPCナビ非表示 */
@media (max-width: 959px) {
  .nav-pc {
    display: none;
  }
}

/* 私たちの強み：SPレイアウト調整 */
@media (max-width: 768px) {

  /* 1・2ブロック共通で縦並びにする */
  .strength-row,
  .strength-row.reverse {
    display: flex;
    flex-direction: column;   /* ← ここで reverse を打ち消す */
  }

  /* 上：画像、下：カードに固定 */
  .strength-media {
    order: 1;
    margin-bottom: 24px;      /* 好みで余白調整 */
  }

  .strength-card {
    order: 2;
  }
}

/* サービスページのヒーロータイトル（SP用） */
@media screen and (max-width: 767px) {
  .hero-sub .section-title {
    font-size: clamp(40px, 9vw, 44px);
    line-height: 1.2;
  }
}

@media screen and (max-width: 767px) {
  .contact-email-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .contact-email-card__icon img {
    width: 56px;
    height: 56px;
  }

  .contact-email-card__body {
    text-align: center;
  }

  /* ▼ ここが本命：カード4枚を縦並びにする */
  .contact-info__grid {
    display: grid;
    grid-template-columns: 1fr;  /* 1列だけ */
    gap: 24px;
  }

  .contact-info-card {
    width: 100%;
  }
}


/* SP用微調整 */
@media (max-width: 767px) {
.company .section-title.center {
  font-size: 46px;
  }

.company .section-title {
  margin-left: auto;
  margin-right: auto;
}
  
.mvv-card {
  max-width: 360px;
  margin: 0 auto 24px;
  padding: 28px 24px;
  border-radius: 24px;
}

.mvv-card h3{
  font-size: 30px;
}

/* 01アイコン + MISSION + 見出しの並び */
.mvv-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.mvv-num-img {
  width: 216px;
  height: 216px;
  flex-shrink: 0;
}

.mvv-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mvv-label {
  font-size: 11px;
  letter-spacing: 0.18em;
}

/* 本文 */
.mvv-body p {
  font-size: 16px;
  line-height: 2;
}

  .mvv-card .mvv-body {
    margin: 16px 20px 0;   /* ← 左右20pxくらいの普通の余白にする */
  }

  .mvv-card .mvv-body p {
    max-width: 100%;       /* 念のため幅制限も解除 */
  }


/* Our Mission の行を少し上に余白 */
.mvv-body .minor.mission {
  margin-top: 16px;
  font-size: 12px;
  opacity: .75;
}

}
@media (max-width: 767px) {
  .company .message-section .pill {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}


/* SPで縦並びにする（640px以下） */
@media (max-width: 640px) {
  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
  }

  /* th と td の間に余白をつける */
  .company-table th {
    margin-bottom: 6px;
  }

  /* 各項目セットに余白をつける */
  .company-table tr {
    margin-bottom: 20px;
    display: block;
  }
}