/* =========================================================
   subpage.css
   下層ページ（会社概要 / 事業紹介 / お問い合わせ）専用のスタイル
   ※ 色・フォント・余白などのトークンは common.css の :root を参照
   ========================================================= */

/* ---------- Header（下層ページは明るい背景の上に載るため文字色を濃く） ---------- */
.is-sub .header{ color:var(--c-text); }

/* ---------- Page hero ---------- */
.phero{
  position:relative; overflow:hidden; background:#eef1f3;
  padding:calc(var(--header-h) + 56px) 0 64px;
}
/* オープニングと同じ「白い丸」のモチーフ */
.phero__dots{ position:absolute; inset:0; pointer-events:none; }
.phero__dots span{
  position:absolute; border-radius:50%; background:#fff;
  animation:pfloat 14s ease-in-out infinite alternate;
}
.phero__dots span:nth-child(1){ width:340px; height:340px; right:-60px;  top:-90px; }
.phero__dots span:nth-child(2){ width:180px; height:180px; right:22%;    bottom:-70px; animation-delay:-4s; }
.phero__dots span:nth-child(3){ width:110px; height:110px; right:8%;     bottom:22%;  animation-delay:-8s; }
.phero__dots span:nth-child(4){ width:220px; height:220px; left:-80px;   bottom:-110px; animation-delay:-2s; }
.phero__dots span:nth-child(5){ width:64px;  height:64px;  right:36%;    top:26%;     animation-delay:-6s; }
@keyframes pfloat{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(14px,-18px,0); } }
/* 視覚効果を減らす設定のとき：丸のゆらぎを止める */
@media (prefers-reduced-motion:reduce){ .phero__dots span{ animation:none; } }

.phero__inner{ position:relative; z-index:1; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; font-size:12.5px; color:var(--c-text-sub); }
.breadcrumb li + li::before{ content:"/"; margin-right:8px; color:#b4bdc4; }
.breadcrumb a:hover{ color:var(--c-accent-dark); }
.phero__en{
  margin-top:28px; display:flex; align-items:flex-start; gap:14px;
  font-family:var(--f-en); font-weight:300; font-size:clamp(48px, 2rem + 4vw, 96px); line-height:1; letter-spacing:.01em; color:var(--c-text);
}
.phero__en::after{ content:""; flex:none; width:9px; height:9px; margin-top:.15em; border-radius:50%; background:var(--c-accent); }
.phero__title{ margin-top:20px; font-size:clamp(16px, .9rem + .4vw, 20px); font-weight:500; letter-spacing:.2em; }
.phero__lead{ margin-top:36px; max-width:640px; color:var(--c-text-sub); }
@media (max-width:767px){
  .phero{ padding:calc(var(--header-h) + 32px) 0 48px; }
  .phero__en{ margin-top:20px; }
  .phero__dots span:nth-child(1){ width:200px; height:200px; right:-70px; top:-40px; }
  .phero__dots span:nth-child(2){ width:120px; height:120px; }
  .phero__dots span:nth-child(5){ display:none; }
}

/* ---------- Common section head（TOPと同じ小ラベル＋h2） ---------- */
.sec-head{ margin-bottom:56px; }
.sec-head--center{ text-align:center; }
.sec-head .h2{ margin-top:20px; }
.section--sub{ background:var(--c-bg-sub); }
@media (max-width:767px){ .sec-head{ margin-bottom:36px; } }

/* 未確定情報のマーク（公開前に差し替え） */
.todo{
  display:inline-block; padding:2px 10px; border-radius:var(--radius-pill);
  background:#fff4d6; color:#8a6400; font-size:13px; font-weight:500; letter-spacing:.04em;
}

/* =========================================================
   会社概要
   ========================================================= */
/* 企業理念（三方良し） */
.mission__body{ max-width:880px; margin:0 auto; text-align:center; }
.mission__title{ font-size:clamp(36px, 1.6rem + 2.6vw, 64px); font-weight:700; letter-spacing:.2em; line-height:1.3; }
.mission__trio{ margin-top:40px; display:flex; justify-content:center; gap:clamp(12px, 2vw, 28px); }
.mission__trio li{
  display:grid; place-items:center; width:clamp(96px, 16vw, 168px); aspect-ratio:1; border-radius:50%;
  background:var(--c-accent-light); color:var(--c-accent-dark);
  font-size:clamp(14px, .8rem + .5vw, 19px); font-weight:500; letter-spacing:.08em;
}
.mission__trio li:nth-child(2){ background:var(--c-accent); color:#fff; }
.mission__text{ margin-top:56px; text-align:left; }
.mission__text p + p{ margin-top:24px; }
@media (max-width:767px){
  .mission__trio{ margin-top:28px; }
  .mission__text{ margin-top:40px; }
}

/* 代表メッセージ */
.message__lead{
  /* スマホでも「〜テクノロジーで、」が1行に収まるよう、画面幅に合わせて縮める */
  font-size:min(clamp(22px, 1.1rem + 1.3vw, 36px), 4.6vw); font-weight:500; line-height:1.7; letter-spacing:.08em;
  padding-left:28px; border-left:3px solid var(--c-accent);
}
/* 左：画像＋あしらい／右：本文 */
.message__grid{ margin-top:64px; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(40px, 6vw, 96px); align-items:stretch; }
.message__side{ display:flex; flex-direction:column; }
.message__photo{ position:relative; z-index:1; margin:0; }
.message__photo .ph{ aspect-ratio:1/1; border-radius:var(--radius-l); }
/* 画像の後ろから重なって現れる、薄いグリーンの丸
   margin-top を負の値（画像幅に対する%）にして、画像の下部に潜り込ませる */
.message__deco{ position:relative; flex:1; min-height:200px; margin-top:-24%; }
.message__deco span{ position:absolute; aspect-ratio:1; border-radius:50%; }
.message__deco span:nth-child(1){ width:64%; right:-12%; top:0;    background:#e4f0d2; }
.message__deco span:nth-child(2){ width:40%; left:-10%;  top:24%;  background:#edf5e1; }
.message__deco span:nth-child(3){ width:22%; right:8%;   top:56%;  background:#e4f0d2; opacity:.8; }
.message__deco span:nth-child(4){ width:14px; left:34%;  top:80%;  background:var(--c-accent); }
/* 画像が表示されたあと、丸が画像の後ろから順に出てくる */
.js .message__deco span{
  opacity:0; transform:translateY(-40%) scale(.6);
  transition:opacity 1s var(--ease), transform 1.2s var(--ease);
}
.js .message__side.is-in .message__deco span{ opacity:1; transform:none; }
.js .message__side.is-in .message__deco span:nth-child(1){ transition-delay:.4s; }
.js .message__side.is-in .message__deco span:nth-child(2){ transition-delay:.6s; }
.js .message__side.is-in .message__deco span:nth-child(3){ transition-delay:.8s; }
.js .message__side.is-in .message__deco span:nth-child(4){ transition-delay:1s; }
@media (prefers-reduced-motion:reduce){
  .js .message__deco span{ transform:none; transition:opacity .4s ease; }
}
.message__text p + p{ margin-top:24px; }
.message__statement{
  margin:2.4em 0 !important; font-size:clamp(22px, 1.1rem + 1.4vw, 36px);
  font-weight:700; line-height:1.6; letter-spacing:.1em; color:var(--c-accent-dark);
}
@media (max-width:1023px){ .message__grid{ grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:40px; } }
@media (max-width:767px){
  .message__lead{ padding-left:16px; }
  .message__grid{ margin-top:36px; grid-template-columns:1fr; gap:32px; }
  .message__deco{ display:none; }
}

.outline{ border-top:1px solid var(--c-border); }
.outline__row{ display:grid; grid-template-columns:220px 1fr; gap:32px; padding:28px 8px; border-bottom:1px solid var(--c-border); }
.outline__row dt{ font-weight:500; color:var(--c-text); position:relative; padding-left:18px; }
.outline__row dt::before{ content:""; position:absolute; left:0; top:.8em; width:6px; height:6px; border-radius:50%; background:var(--c-accent); }
.outline__row dd{ margin:0; color:var(--c-text); }
.outline__row dt small, .outline__row dd small{ display:block; color:var(--c-text-sub); font-size:13px; font-weight:400; }
.outline__sub{ margin-top:16px; color:var(--c-text-sub); font-size:14px; }
.outline__list{ display:grid; gap:4px; }
.outline__list li{ position:relative; padding-left:16px; }
.outline__list li::before{ content:""; position:absolute; left:0; top:.95em; width:8px; height:1px; background:var(--c-text-sub); }
.outline__offices{ display:grid; gap:20px; }
.outline__offices strong{ font-weight:500; display:block; }
@media (max-width:767px){
  .outline__row{ grid-template-columns:1fr; gap:8px; padding:22px 4px; }
}

.access__grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.access-card{ background:#fff; border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 30px 60px -40px rgba(20,32,42,.35); }
.access-card__map{ aspect-ratio:16/10; background:linear-gradient(135deg,#e9eef1 0%,#f2f8e9 100%); }
.access-card__map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.35); }
.access-card__body{ padding:32px 36px 36px; }
.access-card__name{ font-size:20px; font-weight:500; letter-spacing:.1em; display:flex; align-items:center; gap:12px; }
.access-card__name::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c-accent); }
.access-card__addr{ margin-top:16px; font-style:normal; color:var(--c-text-sub); }
.access-card__addr a{ color:var(--c-text); text-decoration:underline; text-decoration-color:var(--c-border); text-underline-offset:4px; }
.access-card .tlink{ margin-top:20px; }
@media (max-width:1023px){ .access__grid{ grid-template-columns:1fr; } }
@media (max-width:767px){ .access-card{ border-radius:24px; } .access-card__body{ padding:24px 22px 28px; } }

/* =========================================================
   事業紹介
   ========================================================= */
.svc-index{ padding-bottom:var(--section-pad); }
/* サービス一覧：2列2段（スマホは1列）。PC幅ではサービス名を改行しない */
.svc-nav{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
@media (min-width:1024px){ .svc-nav__name{ white-space:nowrap; } }
.svc-nav a{
  display:flex; align-items:center; gap:14px; padding:20px 20px; border-radius:var(--radius-l);
  background:#fff; border:1px solid var(--c-border);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.svc-nav a:hover{ border-color:var(--c-accent); box-shadow:0 14px 30px -18px rgba(106,154,42,.45); transform:translateY(-2px); }
.svc-nav__num{ font-family:var(--f-en); font-weight:300; font-size:28px; color:var(--c-accent); line-height:1; }
.svc-nav__name{ font-weight:500; font-size:14.5px; line-height:1.5; flex:1; word-break:keep-all; letter-spacing:.04em; }
.svc-nav__arrow{ color:var(--c-accent-dark); transition:transform .3s var(--ease); }
.svc-nav a:hover .svc-nav__arrow{ transform:translateY(3px); }
@media (max-width:767px){ .svc-nav{ grid-template-columns:1fr; gap:10px; } .svc-nav a{ padding:16px 18px; } }

.svc-detail{ scroll-margin-top:calc(var(--header-h-sm) + 16px); }
.svc-detail__head{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:end; }
.svc-detail__num{ font-family:var(--f-en); font-weight:200; font-size:clamp(64px, 3rem + 4vw, 120px); line-height:.85; color:var(--c-accent); }
.svc-detail__name{ font-size:clamp(26px, 1.3rem + 1.2vw, 40px); font-weight:500; letter-spacing:.1em; line-height:1.4; word-break:keep-all; }
.svc-detail__catch{ margin-top:12px; font-size:clamp(16px, .9rem + .3vw, 19px); font-weight:500; line-height:1.7; word-break:keep-all; color:var(--c-accent-dark); }
.svc-detail__photo{ margin-top:48px; aspect-ratio:21/9; border-radius:var(--radius-xl); }
.svc-detail__body{ margin-top:56px; display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(40px, 6vw, 96px); align-items:start; }
.svc-detail__desc p + p{ margin-top:16px; }
.svc-points{ background:#fff; border-radius:var(--radius-l); padding:32px 32px 28px; border:1px solid var(--c-border); }
.section--sub .svc-points{ border-color:transparent; }
.svc-points__h{ font-family:var(--f-en); font-size:12px; font-weight:500; letter-spacing:.2em; color:var(--c-accent-dark); text-transform:uppercase; }
.svc-points__h + *{ margin-top:14px; }
.svc-points__h:not(:first-child){ margin-top:28px; }
.svc-points__list{ display:grid; gap:10px; }
.svc-points__list li{ position:relative; padding-left:28px; font-weight:500; }
.svc-points__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:16px; height:16px; border-radius:50%;
  background:var(--c-accent-light); box-shadow:inset 0 0 0 5px var(--c-accent-light), inset 0 0 0 16px var(--c-accent);
}
.svc-points__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.svc-points__tags li{ padding:6px 16px; border-radius:var(--radius-pill); background:var(--c-accent-light); color:var(--c-accent-dark); font-size:14px; font-weight:500; }
@media (max-width:1023px){ .svc-detail__body{ grid-template-columns:1fr; } }
@media (max-width:767px){
  .svc-detail__head{ grid-template-columns:1fr; gap:12px; }
  .svc-detail__photo{ margin-top:32px; aspect-ratio:4/3; border-radius:20px; }
  .svc-detail__body{ margin-top:36px; }
  .svc-points{ padding:24px 22px; }
}

/* =========================================================
   お知らせ詳細（news/*.html）
   ========================================================= */
.article{ max-width:800px; margin:0 auto; }
.article__head{ padding-bottom:32px; border-bottom:1px solid var(--c-border); }
.article__date{ font-family:var(--f-en); font-size:14px; letter-spacing:.08em; color:var(--c-accent-dark); }
.article__title{ margin-top:12px; font-size:clamp(22px, 1.1rem + .9vw, 30px); font-weight:500; line-height:1.6; letter-spacing:.06em; }
.article__body{ margin-top:48px; }
.article__body > * + *{ margin-top:24px; }
.article__body h2{
  margin-top:56px; padding-left:16px; border-left:3px solid var(--c-accent);
  font-size:clamp(18px, 1rem + .4vw, 22px); font-weight:500; line-height:1.6; letter-spacing:.06em;
}
.article__body ul{ display:grid; gap:6px; }
.article__body ul li{ position:relative; padding-left:20px; }
.article__body ul li::before{ content:""; position:absolute; left:2px; top:.85em; width:6px; height:6px; border-radius:50%; background:var(--c-accent); }
.article__body figure{ margin:40px 0 0; }
.article__body figure .ph{ aspect-ratio:16/9; border-radius:var(--radius-l); }
.article__body figcaption{ margin-top:10px; font-size:13px; color:var(--c-text-sub); }
.article__body a{ color:var(--c-accent-dark); text-decoration:underline; text-underline-offset:4px; }
.article__body a:hover{ text-decoration:none; }
.article__foot{ margin-top:72px; padding-top:48px; border-top:1px solid var(--c-border); text-align:center; }
.article__foot .btn:hover .arrow, .article__foot .btn:focus-visible .arrow{ transform:translateX(-5px); }
@media (max-width:767px){
  .article__head{ padding-bottom:24px; }
  .article__body{ margin-top:32px; }
  .article__body h2{ margin-top:44px; }
  .article__foot{ margin-top:56px; padding-top:36px; }
  .article__foot .btn{ width:100%; }
}

/* =========================================================
   お問い合わせ
   ========================================================= */
.cform__grid{ display:grid; grid-template-columns:minmax(0, 340px) 1fr; gap:clamp(40px, 6vw, 96px); align-items:start; }
.cform__aside{ position:sticky; top:calc(var(--header-h-sm) + 32px); }
.cform__aside .h2{ font-size:clamp(20px, 1rem + .8vw, 26px); }
.cform__aside p{ margin-top:20px; }
.tel-card{ margin-top:32px; padding:24px 26px; border-radius:var(--radius-l); background:var(--c-bg-sub); }
.tel-card + .tel-card{ margin-top:12px; }
.tel-card__name{ font-size:14px; font-weight:500; }
.tel-card__num{ margin-top:4px; display:inline-flex; align-items:center; gap:10px; font-family:var(--f-en); font-size:24px; font-weight:400; letter-spacing:.04em; color:var(--c-text); }
.tel-card__num svg{ color:var(--c-accent); }
.tel-card__num:hover{ color:var(--c-accent-dark); }
.tel-card__sub{ font-size:13px; color:var(--c-text-sub); }

.steps{ display:flex; gap:0; margin:0 0 40px; padding:0; list-style:none; counter-reset:step; }
.steps li{
  flex:1; position:relative; text-align:center; font-size:13px; color:var(--c-text-sub); padding-top:40px; font-weight:500;
}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:50%; top:0; transform:translateX(-50%); width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--f-en); font-size:13px;
  background:#fff; border:1px solid var(--c-border); color:var(--c-text-sub); z-index:1;
}
.steps li:not(:last-child)::after{ content:""; position:absolute; top:15px; left:50%; width:100%; height:1px; background:var(--c-border); }
.steps li.is-current{ color:var(--c-text); }
.steps li.is-current::before, .steps li.is-done::before{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.steps li.is-done::after{ background:var(--c-accent); }

.cform__card{ background:#fff; border-radius:var(--radius-xl); padding:clamp(28px, 4vw, 56px); box-shadow:0 30px 70px -45px rgba(20,32,42,.4); border:1px solid var(--c-border); }
.field{ display:grid; grid-template-columns:200px 1fr; gap:12px 28px; padding:22px 0; border-bottom:1px solid var(--c-border); }
.field:first-of-type{ padding-top:0; }
.field__label{ font-weight:500; padding-top:12px; display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.field__req, .field__opt{ font-size:11px; padding:2px 9px; border-radius:var(--radius-pill); line-height:1.6; font-weight:500; letter-spacing:.06em; margin-top:3px; }
.field__req{ background:var(--c-accent); color:#fff; }
.field__opt{ background:var(--c-bg-sub); color:var(--c-text-sub); }
.field__control{ min-width:0; }
.input, .select, .textarea{
  width:100%; font:inherit; font-size:16px; letter-spacing:.04em; color:var(--c-text);
  background:var(--c-bg-sub); border:1px solid transparent; border-radius:var(--radius-m);
  padding:13px 16px; transition:border-color .25s, background-color .25s, box-shadow .25s;
}
.textarea{ min-height:200px; resize:vertical; line-height:1.8; }
.select{ appearance:none; -webkit-appearance:none; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6670' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; }
.input:hover, .select:hover, .textarea:hover{ border-color:var(--c-border); }
.input:focus, .select:focus, .textarea:focus{ outline:none; background:#fff; border-color:var(--c-accent); box-shadow:0 0 0 4px rgba(133,181,57,.18); }
.input::placeholder, .textarea::placeholder{ color:#a3adb5; }
.is-invalid .input, .is-invalid .select, .is-invalid .textarea{ border-color:#d0534a; background:#fff; }
.field__error{ display:none; margin-top:8px; font-size:13px; color:#c0392b; }
.is-invalid .field__error{ display:block; }
.field__note{ margin-top:8px; font-size:13px; color:var(--c-text-sub); }

.choices{ display:flex; flex-wrap:wrap; gap:10px; padding-top:4px; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice span{
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:var(--radius-pill);
  border:1px solid var(--c-border); background:#fff; cursor:pointer; font-size:14.5px;
  transition:border-color .25s, background-color .25s, color .25s;
}
.choice span::before{ content:""; width:14px; height:14px; border-radius:50%; border:1px solid #b4bdc4; background:#fff; transition:inherit; flex:none; }
.choice input:checked + span{ border-color:var(--c-accent); background:var(--c-accent-light); color:var(--c-accent-dark); font-weight:500; }
.choice input:checked + span::before{ border-color:var(--c-accent); box-shadow:inset 0 0 0 3px #fff; background:var(--c-accent); }
.choice input:focus-visible + span{ outline:2px solid var(--c-accent-dark); outline-offset:3px; }

.form-actions{ margin-top:36px; display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.form-actions .btn{ min-width:260px; min-height:60px; font-size:16px; }
.btn--ghost{ border:1px solid var(--c-border); color:var(--c-text-sub); background:#fff; }
.btn--ghost:hover{ border-color:var(--c-text-sub); color:var(--c-text); }

.confirm{ border-top:1px solid var(--c-border); }
.confirm__row{ display:grid; grid-template-columns:200px 1fr; gap:28px; padding:20px 0; border-bottom:1px solid var(--c-border); }
.confirm__row dt{ font-weight:500; }
.confirm__row dd{ margin:0; white-space:pre-wrap; word-break:break-word; }
.confirm__row dd:empty::before{ content:"—"; color:#a3adb5; }
.cform__lead{ margin-bottom:28px; color:var(--c-text-sub); }
.form-error{ margin-top:24px; padding:14px 18px; border-radius:var(--radius-m); background:#fdecea; color:#c0392b; font-size:14px; }
.form-error a{ text-decoration:underline; text-underline-offset:3px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.btn:disabled{ opacity:.6; cursor:wait; }

.complete{ text-align:center; padding:24px 0 8px; }
.complete__icon{ width:72px; height:72px; margin:0 auto; border-radius:50%; background:var(--c-accent-light); display:grid; place-items:center; color:var(--c-accent); }
.complete__title{ margin-top:24px; font-size:22px; font-weight:500; letter-spacing:.1em; }
.complete p{ margin-top:16px; color:var(--c-text-sub); }
.complete .complete__note{ font-size:13.5px; }
.complete .btn{ margin-top:32px; }

[hidden]{ display:none !important; }

@media (max-width:1023px){
  .cform__grid{ grid-template-columns:1fr; }
  .cform__aside{ position:static; }
}
@media (max-width:767px){
  .field, .confirm__row{ grid-template-columns:1fr; gap:8px; }
  .field__label{ padding-top:0; }
  .form-actions .btn{ width:100%; min-width:0; }
  .steps{ margin-bottom:28px; }
  .tel-card__num{ font-size:22px; }
}

/* =========================================================
   事業紹介：サービス詳細（写真＋紹介文・特徴カード・活用例／導入効果）
   ========================================================= */
.svc-detail__intro{ margin-top:48px; }
.svc-detail__intro .svc-detail__photo{ margin-top:0; }
.svc-detail__lead{ margin-top:48px; max-width:880px; }
/* PC：写真と紹介文を横並び */
@media (min-width:1024px){
  .svc-detail__intro{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:clamp(40px, 5vw, 72px); align-items:center; }
  .svc-detail__intro .svc-detail__photo{ margin-top:0; aspect-ratio:4/3; }
  .svc-detail__intro .svc-detail__lead{ margin-top:0; max-width:none; }
}
.svc-detail__lead p{ font-size:clamp(15px, .88rem + .2vw, 17px); line-height:2.05; }
.svc-detail__lead p + p{ margin-top:20px; }

.svc-block{ margin-top:80px; }
.svc-block__h{ display:flex; align-items:baseline; gap:16px; font-size:clamp(20px, 1rem + .6vw, 24px); font-weight:500; letter-spacing:.1em; }
.svc-block__en{ font-family:var(--f-en); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--c-accent-dark); display:inline-flex; align-items:center; gap:12px; }
.svc-block__en::before{ content:""; width:24px; height:1px; background:var(--c-accent); }

/* 特長カード */
.feat-grid{ margin-top:28px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.feat-grid--4{ grid-template-columns:repeat(4, 1fr); }
.feat-card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius-l); overflow:hidden;
  padding:0 0 28px; transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.section--sub .feat-card{ border-color:transparent; }
.feat-card:hover{ border-color:#cfe2b0; box-shadow:0 18px 36px -24px rgba(106,154,42,.45); transform:translateY(-3px); }
.feat-card__img{ aspect-ratio:16/10; }
.feat-card__img img{ transition:transform .8s var(--ease); }
.feat-card:hover .feat-card__img img{ transform:scale(1.04); }
.feat-card__title, .feat-card__text{ padding:0 26px; }
.feat-card__title{ margin-top:22px; font-size:17px; font-weight:700; line-height:1.6; letter-spacing:.06em; word-break:keep-all; }
.feat-card__text{ margin-top:10px; font-size:14.5px; line-height:1.9; color:var(--c-text-sub); }
/* 写真なし表示：body に is-feat-noimg があるとき、写真を隠して上辺にアクセントの線を付ける */
.is-feat-noimg .feat-card{ position:relative; padding-top:32px; }
.is-feat-noimg .feat-card::before{ content:""; position:absolute; left:26px; top:0; width:40px; height:3px; border-radius:0 0 3px 3px; background:var(--c-accent); }
.is-feat-noimg .feat-card__img{ display:none; }
.is-feat-noimg .feat-card__title{ margin-top:0; }

/* 活用例・導入効果 */
.effect-grid{ margin-top:28px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.effect-card{
  position:relative; overflow:hidden; text-align:center;
  padding:40px 28px 36px; border-radius:var(--radius-xl);
  background:linear-gradient(160deg, var(--c-accent-light) 0%, #fff 70%);
  border:1px solid #e1eed0;
}
.effect-card::after{ content:""; position:absolute; right:-36px; top:-36px; width:120px; height:120px; border-radius:50%; background:#fff; opacity:.7; }
.effect-card__icon{
  position:relative; z-index:1; display:grid; place-items:center; margin:0 auto; width:76px; height:76px; border-radius:50%;
  background:var(--c-accent); color:#fff; box-shadow:0 12px 24px -12px rgba(106,154,42,.7);
}
.effect-card__icon svg{ width:34px; height:34px; }
.effect-card__title{ position:relative; z-index:1; margin-top:22px; font-size:18px; font-weight:700; letter-spacing:.08em; line-height:1.6; word-break:keep-all; }
.effect-card__text{ position:relative; z-index:1; margin-top:10px; font-size:14.5px; line-height:1.9; color:var(--c-text-sub); }


@media (max-width:1023px){
  .feat-grid, .feat-grid--4{ grid-template-columns:repeat(2, 1fr); }
  .effect-grid{ grid-template-columns:repeat(3, 1fr); gap:14px; }
  .effect-card{ padding:32px 18px 28px; }
}
@media (max-width:767px){
  .svc-detail__intro{ margin-top:32px; }
  .svc-detail__intro .svc-detail__photo{ margin-top:0; }
  .svc-detail__lead{ margin-top:28px; }
  .svc-block{ margin-top:56px; }
  .svc-block__h{ flex-direction:column; gap:8px; }
  .feat-grid, .feat-grid--4{ grid-template-columns:1fr; gap:12px; margin-top:20px; }
  .feat-card{ padding-bottom:22px; }
  .feat-card__title, .feat-card__text{ padding:0 20px; }
  .feat-card__title{ margin-top:18px; font-size:16px; }
  .is-feat-noimg .feat-card{ padding-top:24px; }
  .is-feat-noimg .feat-card::before{ left:20px; }
  .is-feat-noimg .feat-card__title{ margin-top:0; }
  .effect-grid{ grid-template-columns:1fr; gap:12px; margin-top:20px; }
  .effect-card{ display:grid; grid-template-columns:60px 1fr; gap:2px 16px; text-align:left; padding:22px 20px; border-radius:20px; }
  .effect-card__icon{ width:60px; height:60px; margin:0; grid-row:span 2; }
  .effect-card__icon svg{ width:28px; height:28px; }
  .effect-card__title{ margin-top:0; font-size:16px; }
  .effect-card__text{ margin-top:0; }
}