@charset "UTF-8";
/* ============================================================
   AKASHI RYOKKA CO.,LTD. — Design System
   Concept : Neo-Environmental Trust
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root{
  /* Brand */
  --navy:        #1A2530;
  --navy-900:    #121A22;
  --navy-800:    #1A2530;
  --navy-700:    #24313E;
  --navy-600:    #2E3D4C;
  --slate:       #4A5568;
  --slate-400:   #718096;
  --slate-300:   #A0AEC0;
  --platinum:    #E2E8F0;
  --platinum-50: #F4F7FA;
  --white:       #FFFFFF;
  --cyan:        #00B5D8;
  --logo-green:  #629E48;   /* 正式ロゴマークの指定色 */
  --sapphire:    #3182CE;
  --green:       #35C687;
  --green-deep:  #1F8A5B;
  --grad-ce:     linear-gradient(90deg,var(--cyan),var(--green));

  /* Semantic */
  --bg:          var(--white);
  --bg-alt:      var(--platinum-50);
  --ink:         var(--navy-800);
  --ink-sub:     var(--slate);
  --ink-mute:    var(--slate-400);
  --line:        rgba(26,37,48,.12);
  --line-soft:   rgba(26,37,48,.07);
  --line-dark:   rgba(226,232,240,.14);

  /* Type */
  --sans: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
          "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "游明朝",
           YuMincho, "Hiragino Mincho ProN", serif;
  --en: "Barlow Condensed", "Noto Sans JP", sans-serif;

  /* Layout */
  --header-h: 84px;
  --header-h-sm: 64px;
  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --maxw-narrow: 920px;

  /* Motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.9;
  letter-spacing:.04em;font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .3s var(--e-out),opacity .3s var(--e-out)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p,figure,dl,dd{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
::selection{background:var(--cyan);color:#fff}

/* ---------- 3. Utilities ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.container--narrow{max-width:var(--maxw-narrow)}
.container--wide{max-width:1520px}
.sec{padding-block:clamp(72px,10vw,140px);position:relative}
.sec--tight{padding-block:clamp(56px,7vw,96px)}
.sec--dark{background:var(--navy-900);color:var(--platinum)}
.sec--dark .lead,.sec--dark .txt{color:var(--slate-300)}
.sec--alt{background:var(--bg-alt)}
.center{text-align:center}
.nb{white-space:nowrap;display:inline-block}
.mt-s{margin-top:16px}.mt-m{margin-top:32px}.mt-l{margin-top:56px}.mt-xl{margin-top:80px}

/* Section label : 01 / Our Vision */
.lbl{
  display:flex;align-items:center;gap:14px;
  font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:22px;
}
.lbl::before{content:"";width:40px;height:1px;background:currentColor;flex:none}
.lbl--center{justify-content:center}

/* Headings */
.h-xl{font-size:clamp(30px,5.2vw,60px);font-weight:700;line-height:1.28;letter-spacing:.02em}
.h-l {font-size:clamp(25px,3.6vw,42px);font-weight:700;line-height:1.36;letter-spacing:.03em}
.h-m {font-size:clamp(20px,2.4vw,28px);font-weight:600;line-height:1.5;letter-spacing:.04em}
.h-s {font-size:clamp(16px,1.6vw,19px);font-weight:600;line-height:1.6;letter-spacing:.05em}
.h-serif{font-family:var(--serif);font-weight:500;letter-spacing:.06em}
.h-thin{font-weight:300}
.en-sub{
  display:block;font-family:var(--en);font-size:13px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--slate-400);margin-top:14px;
}
.sec--dark .en-sub{color:var(--slate-300)}
.lead{font-size:clamp(15px,1.35vw,17px);line-height:2.1;color:var(--ink-sub);font-weight:400}
.txt{font-size:15px;line-height:2.05;color:var(--ink-sub)}
.txt + .txt{margin-top:1.4em}
.accent{color:var(--cyan)}

/* Buttons */
.btn{
  --bd:rgba(26,37,48,.28);--fg:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:16px;
  padding:18px 32px;border:1px solid var(--bd);color:var(--fg);
  font-size:13.5px;font-weight:500;letter-spacing:.18em;overflow:hidden;
  transition:color .45s var(--e-out),border-color .45s var(--e-out);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--navy);
  transform:translateY(101%);transition:transform .5s var(--e-out);z-index:0;
}
.btn > *{position:relative;z-index:1}
.btn:hover{color:#fff;border-color:var(--navy)}
.btn:hover::before{transform:translateY(0)}
.btn .ar{width:22px;height:1px;background:currentColor;position:relative;flex:none;transition:width .45s var(--e-out)}
.btn .ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .ar{width:34px}
.btn--cyan{--bd:var(--cyan);--fg:var(--cyan)}
.btn--cyan::before{background:var(--cyan)}
.btn--cyan:hover{color:var(--navy-900);border-color:var(--cyan)}
.btn--light{--bd:rgba(226,232,240,.4);--fg:var(--platinum)}
.btn--light::before{background:var(--platinum)}
.btn--light:hover{color:var(--navy-900);border-color:var(--platinum)}
.btn--fill{--bd:var(--navy);background:var(--navy);color:#fff}
.btn--fill::before{background:var(--cyan)}
.btn--fill:hover{color:var(--navy-900);border-color:var(--cyan)}
.btn--sm{padding:13px 22px;font-size:12px;gap:12px}
.btn--block{width:100%;justify-content:center}

/* Text link */
.tlink{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;letter-spacing:.16em;color:var(--cyan);font-weight:500}
.tlink .ar{width:20px;height:1px;background:currentColor;position:relative;transition:width .4s var(--e-out)}
.tlink .ar::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.tlink:hover .ar{width:32px}

/* Image placeholder — 画像を入れる時は style="background-image:url(...)" を追加 */
.ph{
  position:relative;overflow:hidden;background:
    linear-gradient(140deg,var(--navy-700) 0%,var(--slate) 55%,var(--navy-600) 100%);
  background-size:cover;background-position:center;
}
.ph::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:36px 36px;
}
.ph[data-ph]::after{
  content:attr(data-ph);position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-family:var(--en);font-size:10.5px;letter-spacing:.24em;color:rgba(255,255,255,.5);
  text-transform:uppercase;
}
.ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ph--16x9{aspect-ratio:16/9}
.ph--4x3{aspect-ratio:4/3}
.ph--1x1{aspect-ratio:1/1}
.ph--3x4{aspect-ratio:3/4}
.ph--tall{aspect-ratio:2/3}

/* ---------- 4. Header ---------- */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:120;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .5s var(--e-out),height .4s var(--e-out),box-shadow .5s var(--e-out),border-color .5s;
  border-bottom:1px solid transparent;
}
.hd__in{width:100%;max-width:1520px;margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;gap:32px}
.hd__logo{display:flex;align-items:center;gap:13px;flex:none;color:#fff}
.hd__mark{width:34px;height:34px;flex:none;color:var(--logo-green)}
.hd__name{line-height:1.25}
.hd__name b{display:block;font-size:15.5px;font-weight:600;letter-spacing:.05em;white-space:nowrap}
.hd__name > span{display:block;font-family:var(--en);font-size:9.5px;letter-spacing:.22em;opacity:.65;text-transform:uppercase}
.hd__nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.35vw,24px)}
.hd__nav > li > a,.hd__nav > li > span{
  display:flex;align-items:center;gap:7px;height:var(--header-h);color:#fff;white-space:nowrap;
  font-size:13px;font-weight:500;letter-spacing:.04em;cursor:pointer;position:relative;
}
.hd__nav > li > a::after,.hd__nav > li > span::after{
  content:"";position:absolute;left:0;right:0;bottom:26px;height:1px;background:var(--cyan);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out);
}
.hd__nav > li:hover > a::after,.hd__nav > li:hover > span::after,
.hd__nav > li.is-current > a::after{transform:scaleX(1);transform-origin:left}
.hd__nav .caret{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.hd__cta{display:flex;align-items:center;gap:12px;flex:none}
.hd__tel{color:#fff;text-align:right;line-height:1.2}
.hd__tel b{display:block;font-family:var(--en);font-size:20px;font-weight:500;letter-spacing:.06em}
.hd__tel span{display:block;font-size:9.5px;letter-spacing:.1em;opacity:.6}
.hd.is-solid{background:rgba(18,26,34,.94);backdrop-filter:blur(14px);height:68px;border-bottom-color:var(--line-dark)}
.hd.is-solid .hd__nav > li > a,.hd.is-solid .hd__nav > li > span{height:68px}
.hd.is-hidden{transform:translateY(-100%);transition:transform .5s var(--e-out),background .5s}
.hd--inner{background:rgba(18,26,34,.94);backdrop-filter:blur(14px);border-bottom-color:var(--line-dark)}

/* Dropdown */
.hd__sub{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  min-width:260px;background:rgba(18,26,34,.97);backdrop-filter:blur(14px);
  border:1px solid var(--line-dark);padding:10px;
  opacity:0;visibility:hidden;transition:.4s var(--e-out);
}
.hd__nav > li{position:relative}
.hd__nav > li:hover .hd__sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hd__sub a{display:block;padding:12px 16px;color:var(--platinum);font-size:13px;letter-spacing:.06em;border-left:1px solid transparent}
.hd__sub a:hover{background:rgba(0,181,216,.1);color:#fff;border-left-color:var(--cyan)}
.hd__sub a small{display:block;font-family:var(--en);font-size:9.5px;letter-spacing:.2em;color:var(--slate-400);margin-top:2px;text-transform:uppercase}

/* Hamburger */
.burger{display:none;width:46px;height:46px;position:relative;flex:none;z-index:3}
.burger i{position:absolute;left:11px;width:24px;height:1px;background:#fff;transition:.45s var(--e-out)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:23px}.burger i:nth-child(3){top:29px}
.is-menu .burger i:nth-child(1){top:23px;transform:rotate(45deg)}
.is-menu .burger i:nth-child(2){opacity:0}
.is-menu .burger i:nth-child(3){top:23px;transform:rotate(-45deg)}

/* Drawer */
.drawer{
  position:fixed;inset:0;z-index:110;background:var(--navy-900);
  padding:calc(var(--header-h-sm) + 24px) var(--gut) 60px;overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e-out);
}
.is-menu .drawer{clip-path:inset(0 0 0 0)}
.drawer__list > li{border-bottom:1px solid var(--line-dark)}
.drawer__list > li > a,.drawer__acc{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:19px 2px;color:#fff;font-size:15px;letter-spacing:.08em;text-align:left;
}
.drawer__list small{font-family:var(--en);font-size:10px;letter-spacing:.2em;color:var(--slate-400);text-transform:uppercase}
.drawer__panel{max-height:0;overflow:hidden;transition:max-height .55s var(--e-out)}
.drawer__panel a{display:block;padding:12px 0 12px 18px;color:var(--slate-300);font-size:13.5px;border-left:1px solid var(--line-dark)}
.drawer__panel a:hover{color:var(--cyan)}
.drawer__panel li:last-child a{padding-bottom:20px}
.drawer__acc .pm{position:relative;width:14px;height:14px;flex:none}
.drawer__acc .pm::before,.drawer__acc .pm::after{content:"";position:absolute;background:var(--cyan);transition:.4s var(--e-out)}
.drawer__acc .pm::before{top:6.5px;left:0;width:14px;height:1px}
.drawer__acc .pm::after{left:6.5px;top:0;width:1px;height:14px}
.drawer__acc.is-open .pm::after{transform:rotate(90deg);opacity:0}
.drawer__foot{margin-top:40px;display:grid;gap:12px}

/* ---------- 5. Hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;display:flex;align-items:center;overflow:hidden;background:var(--navy-900)}
.hero__media{position:absolute;inset:0;z-index:0}
/* 将来の動画背景プレースホルダー : <video> をここに差し替え */
.hero__media .ph{position:absolute;inset:0;filter:grayscale(.62) contrast(1.07) brightness(.92);animation:heroZoom 22s var(--e-out) forwards}
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(18,26,34,.72) 0%,rgba(18,26,34,.4) 34%,rgba(18,26,34,.94) 100%),
    linear-gradient(90deg,rgba(18,26,34,.93) 0%,rgba(18,26,34,.66) 42%,rgba(18,26,34,.2) 100%);
}
.hero__grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,rgba(226,232,240,.075) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
}
.hero__scan{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 1px,transparent 1px 4px)}
.hero__in{position:relative;z-index:5;width:100%;height:100%;display:flex;align-items:center}
.hero__copy{color:#fff;padding-block:clamp(90px,12vh,140px) clamp(120px,18vh,180px)}
.hero__lbl{
  display:inline-flex;align-items:center;gap:12px;font-family:var(--en);font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin-bottom:28px;
}
.hero__lbl::before{content:"";width:44px;height:1px;background:currentColor}
.hero__ttl{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,5.4vw,74px);line-height:1.3;letter-spacing:.06em;white-space:nowrap;
}
.hero__ttl .ln{display:block;overflow:hidden}
.hero__ttl .ln > span{display:block;transform:translateY(110%);opacity:0;animation:lnUp 1.15s var(--e-out) forwards}
.hero__ttl .ln:nth-child(2) > span{animation-delay:.16s}
@keyframes lnUp{to{transform:translateY(0);opacity:1}}
.hero__txt{max-width:38em;margin-top:30px;font-size:clamp(13.5px,1.25vw,16px);line-height:2.1;color:rgba(226,232,240,.82);opacity:0;animation:fadeUp 1s var(--e-out) .6s forwards}
.hero__act{margin-top:44px;display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:fadeUp 1s var(--e-out) .8s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero__meta{
  position:absolute;left:var(--gut);right:var(--gut);bottom:34px;z-index:5;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  border-top:1px solid rgba(226,232,240,.16);padding-top:20px;
  opacity:0;animation:fadeUp 1s var(--e-out) 1s forwards;
}
.hero__facts{display:flex;gap:clamp(20px,3.2vw,54px);flex-wrap:wrap}
.hero__fact b{display:block;white-space:nowrap;font-family:var(--en);font-size:clamp(22px,2.5vw,32px);font-weight:500;color:#fff;line-height:1;letter-spacing:.02em}
.hero__fact b i{font-style:normal;font-size:.5em;margin-left:3px;color:var(--cyan)}
.hero__fact > span{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--slate-300);margin-top:9px}
.hero__scroll{display:flex;align-items:center;gap:12px;font-family:var(--en);font-size:10.5px;letter-spacing:.24em;color:var(--slate-300);text-transform:uppercase}
.hero__scroll i{display:block;width:1px;height:44px;background:rgba(226,232,240,.28);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--cyan);animation:scrollLine 2.2s var(--e-io) infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ---------- 6. Page Hero (下層) ---------- */
.phero{position:relative;min-height:clamp(300px,42vw,440px);display:flex;align-items:flex-end;background:var(--navy-900);overflow:hidden;padding-top:var(--header-h)}
.phero__media{position:absolute;inset:0}
.phero__media .ph{position:absolute;inset:0;filter:grayscale(.5) contrast(1.05)}
.phero__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,26,34,.86),rgba(18,26,34,.6) 55%,rgba(18,26,34,.92))}
.phero__in{position:relative;z-index:3;width:100%;padding-bottom:clamp(34px,5vw,64px);color:#fff}
.phero__en{font-family:var(--en);font-size:clamp(11px,1.1vw,13px);letter-spacing:.3em;color:var(--cyan);text-transform:uppercase;display:flex;align-items:center;gap:14px}
.phero__en::before{content:"";width:38px;height:1px;background:currentColor}
.phero__ttl{margin-top:18px;font-size:clamp(27px,4.4vw,50px);font-weight:600;letter-spacing:.06em;line-height:1.3}
.phero__txt{margin-top:20px;max-width:46em;font-size:14.5px;line-height:2;color:rgba(226,232,240,.78)}
.crumb{background:var(--bg-alt);border-bottom:1px solid var(--line-soft)}
.crumb ol{display:flex;flex-wrap:wrap;gap:10px;padding-block:14px;font-size:11.5px;color:var(--ink-mute);letter-spacing:.06em}
.crumb li+li::before{content:"／";margin-right:10px;opacity:.5}
.crumb a:hover{color:var(--cyan)}

/* ---------- 7. Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out)}
[data-rv].is-in{opacity:1;transform:none}
[data-rv="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--e-out)}
[data-rv="mask"].is-in{clip-path:inset(0 0 0 0)}
[data-rv="left"]{transform:translateX(-40px)}
[data-rv="right"]{transform:translateX(40px)}
[data-rv].is-in{transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [data-rv]{opacity:1;transform:none;clip-path:none}
}

/* ---------- 8. Section head ---------- */
.shead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(40px,5vw,68px)}
.shead--center{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:760px;margin-inline:auto}
.shead__r{padding-bottom:6px}

/* ---------- 9. Business cards ---------- */
.biz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.biz__i{position:relative;background:var(--bg);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;min-height:340px;overflow:hidden;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .5s var(--e-out)}
.biz__i::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out)}
.biz__i:hover{background:var(--navy-900);color:#fff}
.biz__i:hover::after{transform:scaleX(1)}
.biz__i:hover .biz__no,.biz__i:hover .biz__d{color:var(--slate-300)}
.biz__no{font-family:var(--en);font-size:11px;letter-spacing:.24em;color:var(--slate-400);transition:color .5s}
.biz__ic{margin-top:26px;width:46px;height:46px;color:var(--cyan)}
.biz__t{margin-top:auto;padding-top:34px;font-size:19px;font-weight:600;letter-spacing:.06em}
.biz__t small{display:block;font-family:var(--en);font-size:10px;letter-spacing:.2em;color:var(--cyan);margin-bottom:9px;text-transform:uppercase}
.biz__d{margin-top:14px;font-size:13.5px;line-height:1.95;color:var(--ink-sub);transition:color .5s}
.biz__i .tlink{margin-top:22px}

/* ---------- 10. Safety grid (動きのあるグリッド) ---------- */
.sgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,20px)}
.scard{
  position:relative;overflow:hidden;background:var(--navy-800);
  border:1px solid var(--line-dark);display:flex;flex-direction:column;justify-content:flex-end;
  min-height:230px;padding:clamp(20px,2.2vw,30px);color:#fff;isolation:isolate;
}
.scard .ph{position:absolute;inset:0;z-index:-2;filter:grayscale(.45) contrast(1.04);transition:transform 1.1s var(--e-out),filter .8s var(--e-out)}
.scard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,26,34,.3) 0%,rgba(18,26,34,.9) 78%)}
.scard:hover .ph{transform:scale(1.07);filter:none}
.scard__no{font-family:var(--en);font-size:10.5px;letter-spacing:.24em;color:var(--cyan);margin-bottom:12px}
.scard__t{font-size:clamp(16px,1.6vw,20px);font-weight:600;letter-spacing:.05em;line-height:1.55}
.scard__d{margin-top:12px;font-size:12.8px;line-height:1.9;color:rgba(226,232,240,.72)}
.scard--a{grid-column:span 7;min-height:clamp(300px,32vw,420px)}
.scard--b{grid-column:span 5}
.scard--c{grid-column:span 5}
.scard--d{grid-column:span 4}
.scard--e{grid-column:span 3}
.scard--flat{background:transparent;border-color:var(--line-dark);justify-content:flex-start}
.scard--flat::before{display:none}
.scard--flat .scard__t{color:#fff}
.sfig{display:flex;align-items:baseline;gap:8px;font-family:var(--en);color:var(--cyan);margin-bottom:6px}
.sfig b{font-size:clamp(34px,4.4vw,56px);font-weight:500;line-height:1}
.sfig span{font-size:14px;letter-spacing:.1em}

/* ---------- 11. Emblems ---------- */
.embs{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:0;border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark)}
.emb{
  background:var(--navy-900);border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:26px 16px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:14px;transition:background .5s var(--e-out);
}
.emb:hover{background:var(--navy-700)}
.emb__m{width:60px;height:60px;color:var(--platinum);opacity:.62;transition:.5s var(--e-out)}
.emb:hover .emb__m{opacity:1;color:var(--cyan);transform:translateY(-3px)}
.emb__t{font-size:12.5px;font-weight:500;letter-spacing:.05em;line-height:1.6;color:var(--platinum)}
.emb__y{font-family:var(--en);font-size:10px;letter-spacing:.18em;color:var(--slate-400)}



/* ---------- 11c. 「庭 心技創」ロゴマーク ---------- */
.niwa{display:block;width:clamp(92px,9.5vw,128px);height:auto}
.niwa--lg{width:clamp(120px,14vw,190px)}
.niwa--light{filter:brightness(0) invert(1)}
/* ---------- 11b. Certification marks (実マーク・モノトーン処理) ---------- */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:clamp(10px,1.2vw,18px)}
.cert{
  background:#fff;border:1px solid rgba(26,37,48,.1);padding:24px 16px 18px;
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out);
}
.cert:hover{transform:translateY(-5px);box-shadow:0 22px 46px -24px rgba(0,0,0,.55)}
.cert__m{
  display:block;width:100%;height:88px;background-size:contain;background-position:center;background-repeat:no-repeat;
  filter:none;opacity:1;transition:filter .5s var(--e-out),opacity .5s var(--e-out);
}
.cert:hover .cert__m{filter:none;opacity:1}
.cert__img{display:block;width:100%;height:100%;object-fit:contain}
.cert__t{font-size:12px;font-weight:600;letter-spacing:.03em;line-height:1.55;color:var(--navy);margin-top:auto}
.cert__y{font-family:var(--en);font-size:10px;letter-spacing:.18em;color:var(--slate-400)}

/* ---------- 12. Stepper (SVG infographic) ---------- */
.step{position:relative;margin-top:clamp(40px,5vw,64px)}
.step__svg{width:100%;height:auto;overflow:visible}
.step__path{fill:none;stroke:var(--line-dark);stroke-width:1.5}
.step__prog{fill:none;stroke:var(--cyan);stroke-width:1.5;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.4s var(--e-out)}
.is-in .step__prog{stroke-dashoffset:0}
.step__dot{fill:var(--navy-900);stroke:var(--cyan);stroke-width:1.5;opacity:0;transition:opacity .6s var(--e-out)}
.is-in .step__dot{opacity:1}
.is-in .step__dot:nth-of-type(1){transition-delay:.3s}
.is-in .step__dot:nth-of-type(2){transition-delay:.85s}
.is-in .step__dot:nth-of-type(3){transition-delay:1.4s}
.is-in .step__dot:nth-of-type(4){transition-delay:1.95s}
.step__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);margin-top:22px}
.stepc{border-top:2px solid var(--cyan);padding-top:20px}
.stepc__y{font-family:var(--en);font-size:11px;letter-spacing:.22em;color:var(--cyan)}
.stepc__t{margin-top:10px;font-size:16px;font-weight:600;letter-spacing:.05em;color:#fff}
.stepc__d{margin-top:11px;font-size:12.6px;line-height:1.9;color:var(--slate-300)}
.stepc__q{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-dark);font-size:11.5px;color:var(--slate-400);line-height:1.8}

/* ---------- 13. Carousel (横スクロール) ---------- */
.carou{position:relative}
.carou__track{
  display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gut);padding-bottom:26px;scrollbar-width:none;-ms-overflow-style:none;
  scroll-padding-inline:var(--gut);cursor:grab;
}
.carou__track::-webkit-scrollbar{display:none}
.cslide{flex:0 0 clamp(268px,32vw,430px);scroll-snap-align:start}
.cslide__img{position:relative;overflow:hidden}
.cslide__img .ph{transition:transform 1.1s var(--e-out)}
.cslide:hover .cslide__img .ph{transform:scale(1.06)}
.cslide__tag{position:absolute;top:16px;left:16px;z-index:2;display:inline-block;padding:6px 13px;background:rgba(18,26,34,.82);backdrop-filter:blur(6px);border:1px solid rgba(0,181,216,.4);font-family:var(--en);font-size:10px;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
.cslide__b{padding-top:24px}
.cslide__n{font-family:var(--en);font-size:11px;letter-spacing:.22em;color:var(--slate-400)}
.cslide__t{margin-top:12px;font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:.05em;line-height:1.55}
.cslide__d{margin-top:13px;font-size:13.2px;line-height:1.95;color:var(--ink-sub)}
.sec--dark .cslide__d{color:var(--slate-300)}
.sec--dark .cslide__t{color:#fff}
.carou__ui{display:flex;align-items:center;gap:18px;margin-top:6px}
.carou__bar{flex:1;height:1px;background:var(--line);position:relative}
.sec--dark .carou__bar{background:var(--line-dark)}
.carou__bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--cyan);width:22%;transition:transform .18s linear}
.carou__btns{display:flex;gap:10px;flex:none}
.cbtn{width:48px;height:48px;border:1px solid var(--line);display:grid;place-items:center;transition:.4s var(--e-out)}
.sec--dark .cbtn{border-color:var(--line-dark);color:var(--platinum)}
.cbtn:hover{background:var(--cyan);border-color:var(--cyan);color:var(--navy-900)}
.cbtn:disabled{opacity:.3;pointer-events:none}
.cbtn svg{width:16px;height:16px}

/* ---------- 14. Company / Timeline ---------- */
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,6vw,100px);align-items:start}
.split--rev > *:first-child{order:2}
.dl{border-top:1px solid var(--line)}
.dl > div{display:grid;grid-template-columns:minmax(120px,.32fr) 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.dl dt{font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--ink-mute)}
.dl dd{font-size:14.5px;line-height:1.95;color:var(--ink)}
.sec--dark .dl{border-color:var(--line-dark)}
.sec--dark .dl > div{border-color:var(--line-dark)}
.sec--dark .dl dt{color:var(--slate-400)}
.sec--dark .dl dd{color:var(--platinum)}
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.sec--dark .tl::before{background:var(--line-dark)}
.tl__i{position:relative;padding-bottom:38px}
.tl__i:last-child{padding-bottom:0}
.tl__i::before{content:"";position:absolute;left:-34px;top:7px;width:11px;height:11px;border:1px solid var(--cyan);background:var(--bg);border-radius:50%}
.sec--dark .tl__i::before{background:var(--navy-900)}
.tl__i::after{content:"";position:absolute;left:-31.5px;top:10px;width:5px;height:5px;background:var(--cyan);border-radius:50%;opacity:0;transition:opacity .5s var(--e-out) .3s}
.tl__i.is-in::after{opacity:1}
.tl__y{font-family:var(--en);font-size:14px;letter-spacing:.16em;color:var(--cyan)}
.tl__t{margin-top:7px;font-size:16px;font-weight:600;letter-spacing:.05em}
.tl__d{margin-top:9px;font-size:13.4px;line-height:1.95;color:var(--ink-sub)}
.sec--dark .tl__d{color:var(--slate-300)}

/* Figures / stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sec--dark .stats{border-color:var(--line-dark)}
.sec--dark .stat{border-right-color:var(--line-dark);border-bottom-color:var(--line-dark)}
.stat{background:var(--bg);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(24px,3vw,36px)}
.sec--dark .stat{background:var(--navy-900)}
.stat__l{font-family:var(--en);font-size:10.5px;letter-spacing:.22em;color:var(--slate-400);text-transform:uppercase}
.stat__v{margin-top:14px;white-space:nowrap;font-family:var(--en);font-size:clamp(32px,4vw,50px);font-weight:500;line-height:1;letter-spacing:.02em}
.stat__v i{font-style:normal;font-size:.42em;margin-left:5px;color:var(--cyan);letter-spacing:.06em}
.stat__d{margin-top:12px;font-size:12.4px;color:var(--ink-sub);line-height:1.85}
.sec--dark .stat__d{color:var(--slate-300)}

/* ---------- 15. Flower / Shop ---------- */
.shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2.6vw,36px)}
.shopc{border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;transition:.5s var(--e-out)}
.shopc:hover{transform:translateY(-6px);box-shadow:0 24px 60px -30px rgba(26,37,48,.45)}
.shopc__img{position:relative;overflow:hidden}
.shopc__badge{position:absolute;left:0;top:20px;z-index:2;background:var(--navy-900);color:var(--cyan);font-family:var(--en);font-size:10px;letter-spacing:.2em;padding:8px 16px;text-transform:uppercase}
.shopc__b{padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;flex:1}
.shopc__t{font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:.05em}
.shopc__t small{display:block;font-family:var(--en);font-size:10.5px;letter-spacing:.2em;color:var(--cyan);margin-bottom:8px;text-transform:uppercase}
.shopc__d{margin-top:16px;font-size:13.6px;line-height:1.95;color:var(--ink-sub)}
.shopc__info{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:18px;display:grid;gap:9px}
.shopc__info div{display:grid;grid-template-columns:76px 1fr;gap:12px;font-size:12.6px;line-height:1.8}
.shopc__info dt{color:var(--ink-mute);letter-spacing:.08em}
.shopc__act{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}

/* Slot : 受注/注文システム 埋め込み枠 */
.slot{
  position:relative;border:1px dashed rgba(0,181,216,.45);background:
    linear-gradient(180deg,rgba(0,181,216,.05),rgba(0,181,216,.01));
  padding:clamp(30px,4.5vw,64px);text-align:center;
}
.slot::before{
  content:attr(data-slot);position:absolute;top:-1px;left:-1px;
  background:var(--cyan);color:var(--navy-900);font-family:var(--en);font-size:10px;
  letter-spacing:.2em;padding:6px 14px;text-transform:uppercase;
}
.slot__t{font-size:clamp(18px,2.2vw,26px);font-weight:600;letter-spacing:.05em;margin-top:10px}
.slot__d{margin-top:16px;font-size:13.6px;line-height:2;color:var(--ink-sub);max-width:56em;margin-inline:auto}
.sec--dark .slot__d{color:var(--slate-300)}
.slot__spec{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);text-align:left}
.sec--dark .slot__spec{border-color:var(--line-dark)}
.sec--dark .slot__spec > div{border-right-color:var(--line-dark);border-bottom-color:var(--line-dark)}
.slot__spec > div{background:var(--bg);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px}
.sec--dark .slot__spec > div{background:var(--navy-900)}
.slot__spec b{display:block;font-size:13px;font-weight:600;letter-spacing:.05em}
.slot__spec span{display:block;margin-top:8px;font-size:12.2px;color:var(--ink-sub);line-height:1.8}
.sec--dark .slot__spec span{color:var(--slate-300)}
.slot__spec .no{font-family:var(--en);font-size:10.5px;letter-spacing:.2em;color:var(--cyan)}

/* ---------- 16. Works ---------- */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(18px,2.2vw,32px)}
.wcard{display:flex;flex-direction:column}
.wcard__img{position:relative;overflow:hidden}
.wcard__img .ph{transition:transform 1s var(--e-out)}
.wcard:hover .wcard__img .ph{transform:scale(1.06)}
.wcard__cat{position:absolute;left:0;bottom:0;z-index:2;background:var(--navy-900);color:var(--platinum);font-size:11px;letter-spacing:.14em;padding:7px 14px}
.wcard__t{margin-top:18px;font-size:16px;font-weight:600;letter-spacing:.05em;line-height:1.6}
.wcard__m{margin-top:9px;font-size:12.2px;color:var(--ink-mute);letter-spacing:.06em}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line);padding:9px 17px;font-size:12.2px;letter-spacing:.08em;color:var(--ink-sub);transition:.35s var(--e-out)}
.chip:hover,.chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logos li{background:var(--bg);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 14px;text-align:center;font-size:12.4px;letter-spacing:.06em;color:var(--ink-sub);display:grid;place-items:center;min-height:82px}
.sec--dark .logos{border-color:var(--line-dark)}
.sec--dark .logos li{border-right-color:var(--line-dark);border-bottom-color:var(--line-dark)}
.sec--dark .logos li{background:var(--navy-900);color:var(--slate-300)}

/* ---------- 17. News ---------- */
.news{border-top:1px solid var(--line)}
.news li{border-bottom:1px solid var(--line-soft)}
.news a{display:grid;grid-template-columns:110px 122px 1fr;gap:20px;align-items:center;padding:22px 6px;transition:.4s var(--e-out)}
.news a:hover{padding-left:16px;color:var(--cyan)}
.news time{font-family:var(--en);font-size:13px;letter-spacing:.12em;color:var(--slate-400)}
.news .cat{font-size:10.5px;letter-spacing:.14em;border:1px solid var(--line);padding:5px 0;text-align:center;color:var(--ink-mute)}
.news .ttl{font-size:14.4px;line-height:1.75}

/* ---------- 18. FAQ / Accordion ---------- */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line-soft)}
.faq__q{width:100%;display:flex;gap:18px;align-items:flex-start;padding:24px 4px;text-align:left;font-size:15px;font-weight:500;letter-spacing:.04em;line-height:1.7}
.faq__q .mk{font-family:var(--en);color:var(--cyan);font-size:17px;flex:none;line-height:1.5}
.faq__q .pm{margin-left:auto;position:relative;width:14px;height:14px;flex:none;margin-top:7px}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:var(--slate);transition:.4s var(--e-out)}
.faq__q .pm::before{top:6.5px;left:0;width:14px;height:1px}
.faq__q .pm::after{left:6.5px;top:0;width:1px;height:14px}
.faq__q.is-open .pm::after{transform:rotate(90deg);opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height .55s var(--e-out)}
.faq__a > div{padding:0 4px 26px 36px;font-size:13.8px;line-height:2;color:var(--ink-sub)}

/* ---------- 19. Form ---------- */
.form{display:grid;gap:26px}
.field{display:grid;gap:10px}
.field label{font-size:12.6px;font-weight:600;letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.req{font-size:10px;letter-spacing:.1em;background:var(--cyan);color:var(--navy-900);padding:3px 8px;font-weight:600}
.opt{font-size:10px;letter-spacing:.1em;border:1px solid var(--line);color:var(--ink-mute);padding:3px 8px}
.field input,.field select,.field textarea{
  width:100%;padding:15px 16px;border:1px solid var(--line);background:var(--bg-alt);
  font:inherit;font-size:14.5px;color:var(--ink);transition:.35s var(--e-out);border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);background:#fff;box-shadow:0 0 0 3px rgba(0,181,216,.13)}
.field textarea{min-height:170px;resize:vertical;line-height:1.9}
.field .note{font-size:11.6px;color:var(--ink-mute);line-height:1.75}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.8;color:var(--ink-sub)}
.check input{width:17px;height:17px;flex:none;margin-top:4px;accent-color:var(--cyan)}

/* ---------- 20. CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--navy-900);color:#fff}
.cta .ph{position:absolute;inset:0;opacity:.3;filter:grayscale(.7)}
.cta__in{position:relative;z-index:2;padding-block:clamp(60px,8vw,110px);text-align:center}
.cta__ttl{font-family:var(--serif);font-size:clamp(24px,3.6vw,42px);font-weight:500;letter-spacing:.08em;line-height:1.5}
.cta__box{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);text-align:left;max-width:1140px;margin-inline:auto}
.cta__c{background:rgba(18,26,34,.86);padding:clamp(26px,3vw,38px)}
.cta__c .en-sub{margin-top:0;color:var(--cyan)}
.cta__c b{display:block;font-family:var(--en);font-size:clamp(26px,3.4vw,40px);font-weight:500;letter-spacing:.04em;margin-top:12px}
.cta__c p{font-size:12.6px;color:var(--slate-300);margin-top:10px;line-height:1.85}
.cta__c .btn{margin-top:18px}

/* ---------- 21. Footer ---------- */
.ft{background:var(--navy-900);color:var(--platinum);border-top:1px solid var(--line-dark)}
.ft__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(34px,5vw,80px);padding-block:clamp(52px,6vw,84px)}
.ft__logo{display:flex;align-items:center;gap:13px}
.ft__logo svg{width:38px;height:38px;color:var(--logo-green)}
.ft__logo b{display:block;font-size:17px;font-weight:600;letter-spacing:.12em}
.ft__logo span{display:block;font-family:var(--en);font-size:9.5px;letter-spacing:.22em;color:var(--slate-400);text-transform:uppercase}
.ft__addr{margin-top:26px;font-size:12.8px;line-height:2;color:var(--slate-300);font-style:normal}
.ft__nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:26px}
.ft__nav h4{font-family:var(--en);font-size:10.5px;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase;margin-bottom:16px}
.ft__nav li{margin-bottom:11px}
.ft__nav a{font-size:12.8px;color:var(--slate-300);letter-spacing:.04em}
.ft__nav a:hover{color:var(--cyan)}
.ft__bar{border-top:1px solid var(--line-dark);padding-block:22px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.ft__bar small{font-family:var(--en);font-size:10.5px;letter-spacing:.14em;color:var(--slate-400)}
.ft__bar ul{display:flex;flex-wrap:wrap;gap:22px}
.ft__bar a{font-size:11.6px;color:var(--slate-300)}
.totop{position:fixed;right:22px;bottom:22px;z-index:90;width:50px;height:50px;background:var(--navy);color:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:.5s var(--e-out);border:1px solid var(--line-dark)}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--cyan);color:var(--navy-900)}
.totop svg{width:14px;height:14px}

/* ---------- 22. Misc ---------- */
.marq{overflow:hidden;border-block:1px solid var(--line-dark);padding-block:16px;background:var(--navy-900)}
.marq__in{display:flex;gap:56px;width:max-content;animation:marq 38s linear infinite}
.marq span{font-family:var(--en);font-size:13px;letter-spacing:.28em;color:var(--slate-400);white-space:nowrap;text-transform:uppercase}
.marq span i{color:var(--cyan);font-style:normal;margin-right:14px}
@keyframes marq{to{transform:translateX(-50%)}}
.notice{border-left:2px solid var(--cyan);background:var(--bg-alt);padding:20px 24px;font-size:13.2px;line-height:1.95;color:var(--ink-sub)}
.sec--dark .notice{background:rgba(255,255,255,.03);color:var(--slate-300)}
.tbl{border-top:1px solid var(--line);font-size:13.6px}
.tbl th,.tbl td{border-bottom:1px solid var(--line-soft);padding:16px 14px;text-align:left;vertical-align:top;line-height:1.85}
.tbl th{background:var(--bg-alt);font-weight:600;letter-spacing:.08em;width:220px;color:var(--ink-sub)}
.tbl--scroll{overflow-x:auto}
.list-dot li{position:relative;padding-left:20px;font-size:13.8px;line-height:2;color:var(--ink-sub)}
.list-dot li::before{content:"";position:absolute;left:0;top:.88em;width:7px;height:1px;background:var(--cyan)}
.sec--dark .list-dot li{color:var(--slate-300)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(22px,3vw,44px)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(20px,2.4vw,32px)}
.card{border:1px solid var(--line);padding:clamp(24px,2.8vw,36px);background:var(--bg)}
.sec--dark .card{border-color:var(--line-dark);background:rgba(255,255,255,.02)}
.sec--dark .card__t{color:#fff}
.sec--dark .h-l,.sec--dark .h-m,.sec--dark .h-s{color:#fff}
.sec--dark .txt{color:var(--slate-300)}
.sec--dark .tl__t,.sec--dark .stepc__t{color:#fff}
.card__n{font-family:var(--en);font-size:11px;letter-spacing:.22em;color:var(--cyan)}
.card__t{margin-top:14px;font-size:17px;font-weight:600;letter-spacing:.05em;line-height:1.6}
.card__d{margin-top:13px;font-size:13.3px;line-height:1.95;color:var(--ink-sub)}
.sec--dark .card__d{color:var(--slate-300)}
.flow{counter-reset:f;display:grid;gap:0;border-top:1px solid var(--line)}
.flow__i{background:var(--bg);border-bottom:1px solid var(--line);padding:clamp(22px,2.6vw,32px);display:grid;grid-template-columns:74px 1fr;gap:24px;align-items:start}
.flow__i::before{counter-increment:f;content:"0" counter(f);font-family:var(--en);font-size:30px;color:var(--cyan);letter-spacing:.04em;line-height:1}
.flow__t{font-size:16.5px;font-weight:600;letter-spacing:.05em}
.flow__d{margin-top:11px;font-size:13.3px;line-height:1.95;color:var(--ink-sub)}

/* Honeypot（スパム対策の不可視フィールド） */
.hp-wrap{position:absolute !important;left:-9999px !important;top:auto !important;
  width:1px;height:1px;overflow:hidden;pointer-events:none}

/* ---------- 23. Responsive ---------- */
@media (max-width:1520px){
  .hd__cta .btn--sm{padding:12px 16px;font-size:12px;gap:8px}
  .hd__cta{gap:9px}
}
@media (max-width:1400px){
  .hd__tel{display:none}
}
@media (max-width:1380px){
  .hd__name b{font-size:14.5px}
}
@media (max-width:1180px){
  .hd__logo .hd__name > span{display:none}
  .hd__nav > li > a,.hd__nav > li > span{font-size:12.3px}
}
@media (max-width:1024px){
  .hd__name b{font-size:15.5px}
}
/* 1400px未満：グループ外部サイトのリンクはドロワー／フッターへ集約し、ナビを詰める */
@media (max-width:1399px){
  .hd__nav > li.uk{display:none}
  .hd__nav{gap:clamp(9px,1.15vw,18px)}
  .hd__nav > li > a,.hd__nav > li > span{font-size:12.6px}
}
/* 1200px未満：ナビが収まらないためハンバーガーへ切替 */
@media (max-width:1199px){
  :root{--header-h:var(--header-h-sm)}
  .hd__nav,.hd__cta .btn{display:none}
  .hd__cta{margin-left:auto}
  .burger{display:block;margin-left:auto}
}
@media (max-width:1024px){
  .shead{grid-template-columns:1fr;gap:22px;align-items:start}
  .split{grid-template-columns:1fr;gap:36px}
  .split--rev > *:first-child{order:0}
  .step__cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .biz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scard--a,.scard--b,.scard--c,.scard--d,.scard--e{grid-column:span 6}
  .scard--a{min-height:280px}
}
@media (max-width:720px){
  body{font-size:15px}
  .btn{padding:16px 24px;gap:12px;letter-spacing:.12em}
  .btn span{white-space:nowrap}
  .hero{min-height:560px}
  .hero__meta{display:none}
  .hero__copy{padding-block:clamp(80px,11vh,120px) clamp(40px,6vh,70px)}
  .hero__act{margin-top:34px}
  .hero__act .btn{flex:1 1 auto;justify-content:center}
  .sgrid{grid-template-columns:1fr}
  .biz{grid-template-columns:1fr}
  .scard--a,.scard--b,.scard--c,.scard--d,.scard--e{grid-column:span 1;min-height:220px}
  .step__cards{grid-template-columns:1fr}
  .news a{grid-template-columns:1fr;gap:9px;padding:18px 4px}
  .news .cat{justify-self:start;padding:5px 14px}
  .row2{grid-template-columns:1fr}
  .ft__top{grid-template-columns:1fr}
  .dl > div{grid-template-columns:1fr;gap:7px}
  .tbl th{width:auto}
  .tbl th,.tbl td{display:block;width:100%}
  .flow__i{grid-template-columns:1fr;gap:12px}
  .cta__box{text-align:center}
  .carou__track{padding-inline:20px;scroll-padding-inline:20px}
  .stat__v,.hero__fact b{white-space:normal}
  .stat__v i,.hero__fact b i{white-space:nowrap;display:inline-block}
  .stats{grid-template-columns:1fr 1fr}
}

/* ============================================================
   24. TOP PAGE v2 — Green accent / Scroll experience
   ============================================================ */

/* Utilities */
.accent-g{color:var(--green)}
.lbl--green{color:var(--green)}
.grad-txt{background:linear-gradient(94deg,#fff 28%,var(--green) 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn--green{--bd:var(--green);--fg:var(--green)}
.btn--green::before{background:var(--green)}
.btn--green:hover{color:var(--navy-900);border-color:var(--green)}
.marq__in span:nth-child(even) i{color:var(--green)}

/* Scroll progress bar (top) */
.sbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none}
.sbar i{display:block;height:100%;background:var(--grad-ce);transform-origin:left;transform:scaleX(0)}

/* Page side navigation */
.pgnav{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:95;display:none}
@media (min-width:1380px){.pgnav{display:block}}
.pgnav ul{display:grid;gap:14px;justify-items:end}
.pgnav a{display:flex;align-items:center;gap:11px}
.pgnav span{font-family:var(--en);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-400);opacity:0;transform:translateX(8px);transition:.4s var(--e-out)}
.pgnav i{width:7px;height:7px;border-radius:50%;border:1px solid rgba(113,128,150,.75);flex:none;transition:.4s var(--e-out)}
.pgnav a:hover span,.pgnav a.is-act span{opacity:1;transform:none}
.pgnav a.is-act i{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(53,198,135,.18)}
.pgnav a.is-act span{color:var(--green)}

/* Hero — green glow & label */
.hero__glow{position:absolute;z-index:2;right:-12%;bottom:-24%;width:58vw;height:58vw;pointer-events:none;
  background:radial-gradient(closest-side,rgba(53,198,135,.16),transparent 70%)}
.hero .hero__lbl{color:var(--green)}

/* Business hover line → cyan-green gradient */
.biz__i::after{background:var(--grad-ce)}

/* ---------- Skill tree (HR) ---------- */
.sktree{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,26px)}
.sktree__wrap{position:relative;overflow-x:auto;border:1px solid var(--line-dark);
  background:
    radial-gradient(1100px 420px at 18% 0%,rgba(0,181,216,.07),transparent 60%),
    radial-gradient(900px 480px at 92% 100%,rgba(53,198,135,.1),transparent 60%),
    var(--navy-900);
  padding:clamp(18px,2.4vw,34px)}
.sktree__wrap::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(226,232,240,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(226,232,240,.045) 1px,transparent 1px);
  background-size:44px 44px}
.sktree__svg{min-width:940px;width:100%;height:auto;display:block;position:relative;z-index:1}
.sktree__hint{position:relative;z-index:1;margin-top:10px;font-family:var(--en);font-size:10px;letter-spacing:.2em;color:var(--slate-400);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.sktree__hint::before{content:"";width:26px;height:1px;background:var(--green)}
.st-l{fill:none;stroke:rgba(226,232,240,.14);stroke-width:1.5}
.st-g{fill:none;stroke:var(--green);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--e-out)}
.is-grown .st-g{stroke-dashoffset:0}
.st-g.g2{transition-delay:.4s}
.st-g.g3,.st-g.g4,.st-g.g5{transition-delay:.85s}
.st-g.g6,.st-g.g7,.st-g.g8{transition-delay:1.3s}
.st-node{opacity:0;transform:scale(.55);transform-box:fill-box;transform-origin:center;transition:opacity .6s var(--e-out),transform .6s var(--e-out);cursor:pointer;outline:none}
.is-grown .st-node{opacity:1;transform:none}
.st-node.d1{transition-delay:.25s}
.st-node.d2{transition-delay:.6s}
.st-node.d3{transition-delay:1.05s}
.st-node.d4{transition-delay:1.5s}
.st-c{fill:var(--navy-800);stroke:rgba(226,232,240,.35);stroke-width:1.2;transition:.45s var(--e-out)}
.st-halo{fill:none;stroke:rgba(53,198,135,0);stroke-width:1;stroke-dasharray:3 5;transition:.45s var(--e-out)}
.st-no{font-family:var(--en);font-size:14px;letter-spacing:.08em;fill:var(--slate-300);text-anchor:middle;transition:fill .45s}
.st-t{font-size:13px;font-weight:600;letter-spacing:.06em;fill:var(--platinum);text-anchor:middle}
.st-s{font-family:var(--en);font-size:9px;letter-spacing:.22em;fill:var(--slate-400);text-anchor:middle;text-transform:uppercase}
.st-node:hover .st-c,.st-node:focus-visible .st-c{stroke:var(--green)}
.st-node.is-active .st-c{stroke:var(--green);fill:rgba(53,198,135,.12);filter:drop-shadow(0 0 14px rgba(53,198,135,.45))}
.st-node.is-active .st-halo{stroke:rgba(53,198,135,.6)}
.st-node.is-active .st-no{fill:var(--green)}
.sktree__panel{border:1px solid var(--line-dark);background:rgba(255,255,255,.02);padding:clamp(22px,2.6vw,38px);display:grid;grid-template-columns:minmax(240px,.72fr) 1.28fr;gap:clamp(20px,3.4vw,56px);align-items:start}
.stp__stage{font-family:var(--en);font-size:11px;letter-spacing:.24em;color:var(--green);text-transform:uppercase}
.stp__t{margin-top:12px;font-size:clamp(19px,1.9vw,23px);font-weight:600;letter-spacing:.05em;color:#fff;line-height:1.5}
.stp__y{margin-top:6px;font-family:var(--en);font-size:12px;letter-spacing:.16em;color:var(--slate-400)}
.stp__d{font-size:13.2px;line-height:2;color:var(--slate-300)}
.stp__q{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:8px}
.stp__q li{border:1px solid rgba(53,198,135,.4);color:var(--green);font-size:11px;letter-spacing:.08em;padding:6px 12px}
.stp__n{margin-top:14px;font-size:11.5px;color:var(--slate-400);line-height:1.8}
.sktree__panel.is-swap .stp__t,
.sktree__panel.is-swap .stp__d,
.sktree__panel.is-swap .stp__q{animation:stpIn .5s var(--e-out)}
@keyframes stpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:720px){.sktree__panel{grid-template-columns:1fr;gap:18px}}

/* ---------- UVP pinned scrollytelling ---------- */
.uvp{position:relative;background:var(--navy-900)}
.uvp__pin{padding-block:clamp(64px,9vw,120px)}
.uvp__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(26px,4vh,46px)}
.uvp__count{font-family:var(--en);font-weight:500;font-size:clamp(34px,4.4vw,64px);line-height:1;color:rgba(226,232,240,.14);letter-spacing:.04em;white-space:nowrap}
.uvp__count b{font-weight:500;color:var(--green)}
.uvp__view{overflow:hidden}
.uvp__track{display:flex;gap:clamp(18px,2.2vw,34px);padding-inline:var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:22px;scroll-padding-inline:var(--gut);
  scrollbar-width:none;-ms-overflow-style:none}
.uvp__track::-webkit-scrollbar{display:none}
.uslide{flex:0 0 clamp(292px,34vw,500px);scroll-snap-align:start;transition:opacity .6s var(--e-out)}
.uslide__img{position:relative;overflow:hidden}
.uslide__tag{position:absolute;top:14px;left:14px;z-index:2;display:inline-block;padding:6px 13px;background:rgba(18,26,34,.85);backdrop-filter:blur(6px);border:1px solid rgba(53,198,135,.45);font-family:var(--en);font-size:10px;letter-spacing:.2em;color:var(--green);text-transform:uppercase}
.uslide__no{position:absolute;right:14px;bottom:8px;z-index:2;font-family:var(--en);font-size:clamp(44px,4.6vw,64px);font-weight:500;line-height:1;color:var(--green);transition:.6s var(--e-out);text-shadow:0 2px 18px rgba(18,26,34,.6)}
.uslide__t{margin-top:20px;font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:.05em;line-height:1.55;color:#fff}
.uslide__d{margin-top:12px;font-size:13.2px;line-height:1.95;color:var(--slate-300)}
.uvp__foot{display:flex;align-items:center;gap:22px;margin-top:clamp(26px,4vh,46px);flex-wrap:wrap}
.uvp__bar{flex:1;min-width:160px;height:2px;background:var(--line-dark);overflow:hidden}
.uvp__bar i{display:block;height:100%;background:var(--grad-ce);transform-origin:left;transform:scaleX(1);transition:transform .25s linear}
.uvp__foot .tlink{color:var(--green)}
@media (min-width:1024px){
  .uvp.is-pin{height:480vh}
  .uvp.is-pin .uvp__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:0;padding-top:var(--header-h)}
  .uvp.is-pin .uvp__track{overflow:visible;scroll-snap-type:none;padding-bottom:0;will-change:transform}
  .uvp.is-pin .uslide{opacity:.35}
  .uvp.is-pin .uslide.is-on{opacity:1}
  .uvp.is-pin .uslide:not(.is-on) .uslide__no{color:transparent;-webkit-text-stroke:1px rgba(226,232,240,.4)}
  .uvp.is-pin .uvp__bar i{transform:scaleX(0)}
}

/* ---------- Social / Facebook ---------- */
.fbx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3.5vw,56px);align-items:start}
.snsc{display:flex;align-items:center;gap:18px;border:1px solid var(--line);padding:20px 22px;background:var(--bg);transition:.45s var(--e-out)}
.snsc + .snsc{margin-top:14px}
.igf{margin-bottom:clamp(44px,5.5vw,72px)}
.igf__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,1.8vw,22px)}
.igf__acc{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.igf__acc b{display:block;font-size:15px;letter-spacing:.04em}
.igf__acc small{display:block;margin-top:2px;font-size:11px;letter-spacing:.08em;color:var(--ink-mute)}
.igf__ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);color:var(--green-deep)}
.igf__ic svg{width:20px;height:20px}
.igf__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px)}
.igf__i{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#E7ECE9}
.igf__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s var(--e-out)}
.igf__i:hover .igf__img{transform:scale(1.06)}
.igf__ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(22,35,29,0);opacity:0;transition:.4s}
.igf__i:hover .igf__ov{opacity:1;background:rgba(22,35,29,.42)}
.igf__ov svg{width:30px;height:30px}
.igf__v{position:absolute;top:10px;right:10px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.igf__v svg{width:20px;height:20px}
@media (max-width:720px){ .igf__grid{grid-template-columns:repeat(2,1fr)} }
.snsc:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(26,37,48,.4)}
.snsc__ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid var(--line);color:var(--green)}
.snsc__ic svg{width:20px;height:20px}
.snsc b{display:block;font-size:14.5px;font-weight:600;letter-spacing:.05em}
.snsc small{display:block;font-family:var(--en);font-size:10px;letter-spacing:.18em;color:var(--slate-400);margin-top:3px;text-transform:uppercase}
.snsc .ar{margin-left:auto;width:22px;height:1px;background:currentColor;position:relative;flex:none;transition:width .4s var(--e-out)}
.snsc .ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.snsc:hover .ar{width:34px;color:var(--green)}
.fbx__embed{position:relative;border:1px solid var(--line);background:var(--bg-alt);min-height:600px;overflow:hidden}
.fbx__embed::before{content:"Facebook Timeline";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--en);font-size:11px;letter-spacing:.3em;color:var(--ink-mute);text-transform:uppercase}
.fbx__embed iframe{position:relative;z-index:2;display:block;width:100%;height:640px;border:0}
@media (max-width:900px){
  .fbx{grid-template-columns:1fr}
  .fbx__embed{min-height:480px}
  .fbx__embed iframe{height:520px}
}

/* ============================================================
   25. TOP PAGE v3 — Soft & Warm / Scene-switching scroll
   ============================================================ */

/* ----- Palette remap : steel navy → warm forest & cream ----- */
.tp{
  --navy:#22352C;    --navy-900:#18251F; --navy-800:#20312A;
  --navy-700:#2A3E35; --navy-600:#33483E;
  --slate:#54655C;   --slate-400:#7A8B80; --slate-300:#A9BDB0;
  --platinum:#EDF2EA; --platinum-50:#F6F4EC;
  --cyan:#4E9C6E;                        /* 技術アクセントも葉の緑へ */
  --green:#5FB584;   --green-deep:#3D7D5B;
  --grad-ce:linear-gradient(90deg,#7CC29A,#4E9C6E);
  --bg:#FBF8F2;      --bg-alt:#F3EEE4;
  --ink:#2B3A33;     --ink-sub:#5A6B62;  --ink-mute:#84948A;
  --line:rgba(43,58,51,.14); --line-soft:rgba(43,58,51,.08);
  --line-dark:rgba(234,240,233,.14);
}

/* ----- Scene background layer (fixed, crossfades per section) ----- */
.scenebg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#F6F3EC}
.scenebg__i{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.07);
  transition:opacity 1.3s var(--e-out),transform 2.6s var(--e-out)}
.scenebg__i.is-on{opacity:1;transform:scale(1)}
.scenebg__i::after{content:"";position:absolute;inset:0}
.scenebg__i--paper::after{background:linear-gradient(180deg,rgba(251,248,242,.88),rgba(251,248,242,.8) 50%,rgba(251,248,242,.9))}
.scenebg__i--forest::after{background:linear-gradient(180deg,rgba(20,32,26,.84),rgba(20,32,26,.76) 50%,rgba(22,35,29,.88))}
@media (prefers-reduced-motion:reduce){.scenebg__i{transition:opacity .3s;transform:none}}

/* Sections become translucent veils over the scene */
.tp .sec{background:rgba(251,248,242,.62)}
.tp .sec--alt{background:rgba(243,238,228,.55)}
.tp .sec--dark{background:rgba(22,35,29,.78)}
.tp .uvp{background:rgba(22,35,29,.78)}
.tp .marq{background:rgba(22,35,29,.85);border-color:rgba(234,240,233,.1)}

/* Scene snapping は廃止：少しのスクロールで直前のシーン頭へ引き戻される挙動の原因のため
   （背景のシーン切替は IntersectionObserver 側で動くので影響なし） */
.tp .sec--full{min-height:100svh;display:flex;align-items:center}
.tp .sec--full > .container{width:100%}

/* ----- Softening : rounded, warm, human ----- */
.tp .h-l,.tp .h-m{font-family:var(--serif);font-weight:500;letter-spacing:.05em}
.tp .btn{border-radius:999px}
.tp .ph::before{display:none}
.tp .hero__grid,.tp .hero__scan{display:none}

/* ----- Bright & cheerful first view ----- */
.tp .hero{background:#F5F2E9}
.tp .hero__media .ph{filter:saturate(1.08) brightness(1.06) contrast(.98)}
.tp .hero__overlay{background:
  linear-gradient(180deg,rgba(252,250,244,.94) 0%,rgba(252,250,244,.48) 44%,rgba(252,250,244,.96) 100%),
  linear-gradient(90deg,rgba(252,250,244,.96) 0%,rgba(252,250,244,.7) 44%,rgba(252,250,244,.16) 100%)}
.tp .hero__glow{right:auto;left:-14%;bottom:-30%;
  background:radial-gradient(closest-side,rgba(124,194,154,.35),transparent 70%)}
.tp .hero__glow2{position:absolute;z-index:2;right:-10%;top:-18%;width:46vw;height:46vw;pointer-events:none;
  background:radial-gradient(closest-side,rgba(95,181,132,.22),transparent 70%)}
.tp .hero .hero__lbl{color:var(--green-deep)}
.tp .hero__ttl{color:#233B30}
.tp .hero .grad-txt{background:linear-gradient(94deg,#2F5D46 24%,#5FB584 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tp .hero__txt{color:#51635A}
.tp .hero__meta{border-top-color:rgba(43,58,51,.16)}
.tp .hero__fact b{color:#233B30}
.tp .hero__fact b i{color:var(--green-deep)}
.tp .hero__fact > span{color:#84948A}
.tp .hero__scroll{color:#84948A}
.tp .hero__scroll i{background:rgba(43,58,51,.18)}
.tp .btn--leaf{--bd:transparent;background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.tp .btn--leaf::before{background:#2F5D46}
.tp .btn--leaf:hover{color:#fff;border-color:#2F5D46}
.tp .btn--ink{--bd:rgba(43,58,51,.4);--fg:#2B3A33}
.tp .btn--ink::before{background:#2B3A33}
.tp .marq{background:rgba(252,250,244,.92);border-color:var(--line-soft)}
.tp .marq span{color:#84948A}
.tp .marq span i{color:var(--green-deep)}
.tp .marq__in span:nth-child(even) i{color:var(--green)}

/* Transparent header turns dark-on-light over the bright hero */
html.tp-page .hd:not(.is-solid) .hd__logo,
html.tp-page .hd:not(.is-solid) .hd__nav > li > a,
html.tp-page .hd:not(.is-solid) .hd__nav > li > span,
html.tp-page .hd:not(.is-solid) .hd__tel{color:#233B30}
html.tp-page .hd:not(.is-solid) .burger i{background:#233B30}
html.tp-page .hd:not(.is-solid) .btn--cyan{--bd:#3D7D5B;--fg:#2F5D46}
html.tp-page .hd:not(.is-solid) .btn--cyan::before{background:#3D7D5B}
html.tp-page .hd:not(.is-solid) .btn--cyan:hover{color:#fff}
.tp .biz{border:0;gap:clamp(12px,1.4vw,18px)}
.tp .biz__i{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.82);overflow:hidden;
  transition:background .5s var(--e-out),box-shadow .5s var(--e-out),transform .5s var(--e-out),border-color .5s var(--e-out)}
/* トップは明るいカードのため、ホバーでも文字色は濃いまま保つ（暗転ホバーの打ち消し） */
.tp .biz__i:hover{background:#fff;color:var(--ink);border-color:rgba(47,93,70,.28);
  transform:translateY(-4px);box-shadow:0 20px 44px -26px rgba(35,59,48,.42)}
.tp .biz__i:hover .biz__t{color:var(--ink)}
.tp .biz__i:hover .biz__d{color:var(--ink-sub)}
.tp .biz__i:hover .biz__no{color:var(--slate-400)}
.tp .stats{border:0;gap:clamp(10px,1.2vw,14px)}
.tp .stat{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.78)}
.tp .sec--dark .stats{border:0}
.tp .sec--dark .stat{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.tp .scard{border-radius:18px}
.tp .scard .ph{filter:saturate(1.02)}
.tp .cert{border-radius:16px;border-color:rgba(43,58,51,.08)}
.tp .cert__m{filter:none;opacity:1}
.tp .card{border-radius:16px}
.tp .shopc{border-radius:20px;overflow:hidden}
.tp .shopc__badge{border-radius:0 999px 999px 0}
.tp .wcard__img{border-radius:16px;overflow:hidden}
.tp .wcard__cat{border-radius:0 12px 0 12px}
.tp .uslide__img{border-radius:16px}
.tp .sktree__wrap,.tp .sktree__panel{border-radius:20px}
.tp .sktree__wrap::before{opacity:.22}
.tp .slot{border-radius:20px;border-color:rgba(78,156,110,.5);
  background:linear-gradient(180deg,rgba(78,156,110,.07),rgba(78,156,110,.02))}
.tp .slot::before{border-radius:20px 0 12px 0}
.tp .fbx__embed{border-radius:20px}
.tp .snsc{border-radius:16px}
.tp .snsc__ic{border-radius:12px}
.tp .news .cat{border-radius:999px}
.tp .notice{border-radius:0 14px 14px 0}
.tp .cbtn{border-radius:50%}
.tp ::selection{background:var(--green);color:#fff}

/* ----- Fix : stat rows stack vertically ----- */
.tp .stat__l,.tp .stat__v,.tp .stat__d{display:block}

/* ----- Header / footer harmonize with the warm palette ----- */
html.tp-page .hd .btn{border-radius:999px}
html.tp-page .hd .btn--cyan{--bd:#7CC29A;--fg:#D9EDE1}
html.tp-page .hd .btn--cyan::before{background:#5FB584}
html.tp-page .hd .btn--cyan:hover{color:#16211C;border-color:#5FB584}
html.tp-page .hd__nav > li > a::after,
html.tp-page .hd__nav > li > span::after{background:#5FB584}
html.tp-page .hd__sub{background:rgba(20,32,26,.97);border-color:rgba(234,240,233,.14)}
html.tp-page .hd__sub a:hover{background:rgba(95,181,132,.12);border-left-color:#5FB584}
html.tp-page .drawer .btn{border-radius:999px}
html.tp-page .drawer .btn--cyan{--bd:#7CC29A;--fg:#D9EDE1}
html.tp-page .drawer .btn--cyan::before{background:#5FB584}
html.tp-page .drawer__panel a:hover{color:#7CC29A}
html.tp-page .drawer__acc .pm::before,html.tp-page .drawer__acc .pm::after{background:#7CC29A}
html.tp-page .hd.is-solid{background:rgba(20,32,26,.92)}
html.tp-page .drawer{background:#18251F}
html.tp-page .cta{background:#16211C}
html.tp-page .cta__c{background:rgba(22,33,28,.86)}
html.tp-page .ft{background:#16211C}
html.tp-page .totop{background:#22352C;border-color:rgba(234,240,233,.14)}
html.tp-page .totop:hover{background:#5FB584;color:#16211C}

/* ============================================================
   26. TOP PAGE v4 — Original hero「庭窓」 / 植え替える.com 導線
   ============================================================ */

/* ----- Hero v4 : 縦書き見出し × アーチ型フォトコラージュ ----- */
.tp .hero2{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,44px);overflow:hidden;padding-top:clamp(86px,12vh,130px);
  background:#FAF7F0;padding:calc(var(--header-h) + 20px) 0 200px}
.tp .hero2::before{content:"";position:absolute;z-index:0;left:-14%;bottom:-30%;width:54vw;height:54vw;border-radius:50%;
  background:radial-gradient(closest-side,rgba(124,194,154,.3),transparent 70%)}
.tp .hero2::after{content:"";position:absolute;z-index:0;right:-10%;top:-24%;width:46vw;height:46vw;border-radius:50%;
  background:radial-gradient(closest-side,rgba(95,181,132,.18),transparent 70%)}
.tp .hero2__video{position:absolute;inset:0;z-index:0;overflow:hidden}
.tp .hero2__video video{width:100%;height:100%;object-fit:cover;display:block}
.tp .hero2__video::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(252,250,244,.96) 0%,rgba(252,250,244,.88) 40%,rgba(252,250,244,.5) 74%,rgba(252,250,244,.32) 100%),
    linear-gradient(180deg,rgba(252,250,244,.5) 0%,rgba(252,250,244,0) 30%,rgba(252,250,244,.42) 100%)}
.tp .hero2__mark{position:absolute;z-index:1;right:clamp(24px,7vw,120px);top:clamp(120px,18vh,190px);
  width:clamp(200px,22vw,340px);height:auto;opacity:1;pointer-events:none;
  filter:drop-shadow(0 18px 40px rgba(43,58,51,.18))}
.tp .hero2__in{position:relative;z-index:2;width:100%}
.tp .hero2__copy{max-width:44em}
.tp .hero2__lbl{display:inline-flex;align-items:center;gap:12px;font-family:var(--en);font-size:11.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--green-deep)}
.tp .hero2__lbl::before{content:"";width:40px;height:1px;background:currentColor}
.tp .hero2__txt{margin-top:22px;font-size:clamp(13.5px,1.2vw,15.5px);line-height:2.2;color:#51635A;max-width:30em}
.tp .hero2__act{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.tp .hero2__facts{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px}
.tp .hero2__facts li{border:1px solid rgba(43,58,51,.16);border-radius:999px;padding:7px 16px;
  font-size:11.8px;color:#51635A;background:rgba(255,255,255,.6);white-space:nowrap}
.tp .hero2__facts b{color:#233B30;font-family:var(--en);font-weight:500;font-size:13px;letter-spacing:.04em;margin-right:2px}
.tp .hero2__ttl{font-family:var(--serif);font-weight:500;color:#233B30;
  font-size:clamp(36px,4.6vw,62px);line-height:1.42;letter-spacing:.06em;margin:0 0 26px}
.tp .hero2__ttl span{display:block}
.tp .hero2__ttl .grad-g{background:linear-gradient(120deg,#2F5D46 22%,#5FB584 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tp .hero2__art{position:relative;justify-self:end;width:min(100%,470px);aspect-ratio:10/11}
.tp .hero2__arch{position:absolute;right:0;top:0;width:76%;height:84%;
  border-radius:999px 999px 28px 28px;background-size:cover;background-position:center;
  box-shadow:0 34px 70px -34px rgba(43,58,51,.4)}
.tp .hero2__circle{position:absolute;left:0;bottom:5%;width:44%;aspect-ratio:1/1;border-radius:50%;
  background-size:cover;background-position:center;border:7px solid #FAF7F0;
  box-shadow:0 22px 46px -22px rgba(43,58,51,.35)}
.tp .hero2__chip{position:absolute;left:5%;top:1%;width:33%;aspect-ratio:1/1;border-radius:26px;
  background-size:cover;background-position:center;border:7px solid #FAF7F0;transform:rotate(-5deg);
  box-shadow:0 20px 42px -22px rgba(43,58,51,.3)}
.tp .hero2__badge{position:absolute;right:-8px;bottom:13%;width:clamp(86px,8vw,116px);height:auto;
  filter:drop-shadow(0 12px 26px rgba(43,58,51,.3))}
.tp .hero2__badge .spin{transform-origin:50px 50px;animation:heroSpin 28s linear infinite}
@keyframes heroSpin{to{transform:rotate(360deg)}}
/* ----- ヒーロー帯の斜め背景ブロック ----- */
.tp .hero2__slab{position:absolute;left:-5%;right:-5%;bottom:-14%;height:52%;z-index:1;
  background:linear-gradient(115deg,#2F5D46 0%,#356A50 60%,#3D7D5B 100%);
  transform:rotate(-2.5deg);pointer-events:none}
@media (max-width:760px){
  .tp .hero2__slab{height:30%;bottom:-10%;transform:rotate(-3deg)}
}

/* ----- ヒーロー内 流れるメディアの帯 ----- */
.tp .hero2__band{position:relative;z-index:2;transform:rotate(-2.5deg) scale(1.06)}
.tp .hband__track{display:flex;width:max-content;animation:hbandflow 70s linear infinite}
.tp .hband__list{display:flex;gap:clamp(12px,1.6vw,24px);padding-right:clamp(12px,1.6vw,24px);margin:0;list-style:none}
.tp .hband__cell{flex:none;width:clamp(210px,23vw,380px);aspect-ratio:16/10.5;border-radius:16px;
  background-size:cover;background-position:center;overflow:hidden;
  box-shadow:0 22px 44px -28px rgba(24,37,31,.55)}
.tp .hband__cell--video video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes hbandflow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tp .hband__track{animation:none}}

.tp .hero2__scroll{position:absolute;right:calc(var(--gut) + 6px);left:auto;bottom:22px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--en);font-size:10px;letter-spacing:.26em;color:#84948A;text-transform:uppercase}

/* ----- ヒーロー内 最新お知らせカード ----- */
.tp .hero2__newswrap{position:absolute;left:0;right:0;bottom:26px;z-index:3;pointer-events:none}
.tp .hero2__news{pointer-events:auto;max-width:620px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border:1px solid rgba(43,58,51,.1);border-radius:18px;
  padding:15px 22px 8px;box-shadow:0 20px 46px -26px rgba(43,58,51,.38)}
.hnews__head{display:flex;align-items:center;gap:10px}
.hnews__head b{font-size:13.5px;font-weight:700;letter-spacing:.08em;color:#233B30}
.hnews__en{font-family:var(--en);font-size:10px;letter-spacing:.24em;color:var(--green-deep);text-transform:uppercase}
.hnews__more{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--green-deep);white-space:nowrap}
.hnews__list{margin-top:8px;border-top:1px solid rgba(43,58,51,.08)}
.hnews__list li + li{border-top:1px solid rgba(43,58,51,.06)}
.hnews__list a{display:flex;gap:14px;align-items:baseline;padding:8px 2px;font-size:12.8px;color:#3D4E45}
.hnews__list time{font-family:var(--en);font-size:11.5px;letter-spacing:.06em;color:var(--green-deep);flex:none}
.hnews__list .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hnews__list a:hover .t{color:var(--green-deep)}
@media (max-width:1023px){
  .tp .hero2{align-items:stretch}
  .tp .hero2__newswrap{position:static;margin-top:30px;pointer-events:auto}
  .tp .hero2__news{max-width:none}
  .tp .hero2__scroll{display:none}
}
/* 高さが低い画面では重なり防止のため通常フローに切り替え */
@media (min-width:1024px) and (max-height:830px){
  .tp .hero2{padding-bottom:64px;align-items:stretch}
  .tp .hero2__newswrap{position:static;margin-top:34px;pointer-events:auto}
  .tp .hero2__news{max-width:640px}
  .tp .hero2__scroll{display:none}
}
.tp .hero2__scroll i{width:1px;height:36px;background:rgba(43,58,51,.2);position:relative;overflow:hidden}
.tp .hero2__scroll i::after{content:"";position:absolute;inset:0;background:var(--green-deep);
  animation:scrollLine 2.2s var(--e-io) infinite}
@media (max-width:1023px){
  .tp .hero2{padding-bottom:76px}
  .tp .hero2__ttl{font-size:clamp(31px,8vw,44px);line-height:1.5}
  .tp .hero2__mark{width:clamp(110px,26vw,170px);top:calc(var(--header-h) + 18px);right:16px;
    filter:drop-shadow(0 10px 22px rgba(43,58,51,.16))}
  .tp .hero2__video::after{background:
    linear-gradient(180deg,rgba(252,250,244,.94) 0%,rgba(252,250,244,.82) 55%,rgba(252,250,244,.6) 100%)}
}

/* ----- Vision Story : スクロールで理念が一節ずつ展開 ----- */
.tp .story{position:relative;background:#16211C;color:#F2F6F1}
.tp .story__pin{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:110px 20px}
.tp .story__bgi{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.07);transition:opacity 1.1s var(--e-out),transform 2.4s var(--e-out)}
.tp .story__bgi::after{content:"";position:absolute;inset:0;background:rgba(15,25,20,.84)}
.tp .story__bgi.is-on{opacity:1;transform:scale(1)}
.tp .story__lbl{position:absolute;top:clamp(80px,12vh,120px);left:50%;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:14px;white-space:nowrap;
  font-family:var(--en);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#7CC29A}
.tp .story__lbl::before,.tp .story__lbl::after{content:"";width:34px;height:1px;background:rgba(124,194,154,.5)}
.tp .story__frames{position:relative;z-index:2;width:min(100%,900px);height:min(52vh,400px)}
.tp .story__f{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;opacity:0;transform:translateY(34px);transition:opacity .75s var(--e-out),transform .75s var(--e-out);pointer-events:none}
.tp .story__f.is-on{opacity:1;transform:none}
.tp .story__no{font-family:var(--serif);font-size:15px;color:#7CC29A;letter-spacing:.3em;text-indent:.3em;
  margin-bottom:24px;display:flex;flex-direction:column;align-items:center;gap:12px}
.tp .story__no::after{content:"";width:1px;height:30px;background:rgba(124,194,154,.5)}
.tp .story__t{font-family:var(--serif);font-weight:500;font-size:clamp(23px,3.5vw,42px);line-height:1.95;
  letter-spacing:.08em;color:#F5F8F3;margin:0}
.tp .story__t em{font-style:normal;color:#8FD1AC}
.tp .story__sub{margin-top:24px;font-size:12.5px;letter-spacing:.24em;color:#A9BDB0}
.tp .story__logo{width:64px;height:64px;color:#7CC29A;margin-bottom:24px}
.tp .story__prog{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;
  width:min(320px,60%);height:2px;background:rgba(255,255,255,.14);overflow:hidden;border-radius:2px}
.tp .story__prog i{display:block;height:100%;background:var(--grad-ce);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.tp .story.is-pin{height:440vh}
.tp .story.is-pin .story__pin{position:sticky;top:0;height:100svh;min-height:0}
/* 静的フォールバック（モバイル・reduced-motion） */
.tp .story:not(.is-pin) .story__pin{padding:110px 20px 90px}
.tp .story:not(.is-pin) .story__frames{height:auto;display:grid;gap:70px}
.tp .story:not(.is-pin) .story__f{position:static;opacity:1;transform:none;pointer-events:auto}
.tp .story:not(.is-pin) .story__bgi[data-i="0"]{opacity:1;transform:none}
.tp .story:not(.is-pin) .story__prog{display:none}

/* ----- スキルツリーの選択色：下層ページと同じブルー（--cyan #00B5D8）に統一 ----- */
.tp .st-node:hover .st-c,
.tp .st-node:focus-visible .st-c{stroke:#00B5D8}
.tp .st-node.is-active .st-c{stroke:#00B5D8;fill:rgba(0,181,216,.12);
  filter:drop-shadow(0 0 14px rgba(0,181,216,.45))}
.tp .st-node.is-active .st-halo{stroke:rgba(0,181,216,.6)}
.tp .st-node.is-active .st-no{fill:#00B5D8}

/* ----- 植え替える.com バナー ----- */
.tp .ukbn{margin-top:clamp(36px,5vw,60px);position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(115deg,#2F5D46,#3D7D5B 55%,#5FB584);color:#fff;
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);
  padding:clamp(24px,3.4vw,44px) clamp(22px,4vw,56px);flex-wrap:wrap}
.tp .ukbn::before{content:"❀";position:absolute;right:-16px;top:-40px;font-size:150px;line-height:1;opacity:.12;pointer-events:none}
.tp .ukbn__ic{width:64px;height:64px;flex:none;border-radius:18px;background:rgba(255,255,255,.15);display:grid;place-items:center}
.tp .ukbn__ic svg{width:34px;height:34px}
.tp .ukbn__b{flex:1;min-width:260px}
.tp .ukbn__lbl{font-family:var(--en);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#BFE6CF}
.tp .ukbn__t{margin-top:8px;font-size:clamp(18px,2.2vw,24px);font-weight:600;letter-spacing:.04em;line-height:1.5}
.tp .ukbn__d{margin-top:8px;font-size:13px;color:rgba(255,255,255,.86);line-height:1.9}
.ukbn__btn{flex:none;display:inline-flex;align-items:center;gap:10px;background:#fff;color:#2F5D46;
  border-radius:999px;padding:15px 30px;font-weight:700;font-size:14px;letter-spacing:.06em;transition:.3s}
.ukbn__btn::after{content:"↗";font-size:15px}
.ukbn__btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(0,0,0,.45);opacity:1}

/* 写真つきバナー（植え替える.com 本家メインビジュアルを使用） */
.tp .ukbn--photo{min-height:320px;align-items:center}
.tp .ukbn--photo::before,.tp .ukbn--photo::after{display:none}
.tp .ukbn__photo{position:absolute;inset:0;background-size:cover;background-position:right center;border-radius:inherit}
.tp .ukbn--photo .ukbn__b{position:relative;z-index:1;max-width:42%;min-width:0}
.tp .ukbn--photo .ukbn__btn{display:inline-flex;margin-top:20px}
/* 中間幅〜スマホ：写真を全面背景にして緑のオーバーレイ＋テキストを重ねる */
@media (max-width:1099px){
  .tp .ukbn--photo{min-height:0;padding:clamp(26px,4.5vw,46px) clamp(22px,4.5vw,48px)}
  .tp .ukbn__photo{background-position:72% center}
  .tp .ukbn__photo::after{content:"";position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(100deg,
      rgba(38,84,60,.97) 0%,rgba(38,84,60,.9) 42%,
      rgba(42,89,64,.55) 74%,rgba(47,93,70,.25) 100%)}
  .tp .ukbn--photo .ukbn__b{max-width:34em}
}
@media (max-width:560px){
  .tp .ukbn__photo::after{background:linear-gradient(180deg,
      rgba(38,84,60,.9) 0%,rgba(38,84,60,.94) 100%)}
}

/* ----- Online shop showcase（トップの「お花のオンライン注文」） ----- */
.tp .oshop{position:relative;margin-top:clamp(36px,5vw,60px);border-radius:28px;overflow:hidden;
  background:linear-gradient(135deg,#FFFDF8 0%,#F6F1E4 48%,#E9F3E8 100%);
  border:1px solid rgba(43,58,51,.08);padding:clamp(28px,4vw,54px);
  box-shadow:0 30px 70px -40px rgba(43,58,51,.25)}
.tp .oshop::before{content:"❀";position:absolute;right:-30px;top:-48px;font-size:190px;line-height:1;
  color:rgba(95,181,132,.12);pointer-events:none;transform:rotate(15deg)}
.tp .oshop::after{content:"❀";position:absolute;left:-40px;bottom:-70px;font-size:230px;line-height:1;
  color:rgba(214,133,155,.12);pointer-events:none;transform:rotate(-12deg)}
.tp .oshop__head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(26px,4vw,52px);align-items:center;text-align:left}
.tp .oshop__ph{position:relative;min-height:300px}
.tp .oshop__p1{position:absolute;inset:0 0 34px 40px;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 46px -26px rgba(43,58,51,.5);transform:rotate(1.5deg)}
.tp .oshop__p2{position:absolute;left:0;bottom:0;width:52%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  border:6px solid #fff;box-shadow:0 16px 34px -18px rgba(43,58,51,.45);transform:rotate(-3deg)}
.tp .oshop__p1 img,.tp .oshop__p2 img{width:100%;height:100%;object-fit:cover;display:block}
.tp .oshop__badge{display:inline-flex;align-items:center;gap:8px;background:var(--green-deep);color:#fff;
  border-radius:999px;padding:8px 22px;font-family:var(--en);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.tp .oshop__t{margin-top:18px;font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.8vw,32px);
  letter-spacing:.05em;color:#233B30;line-height:1.6}
.tp .oshop__t em{font-style:normal;color:var(--green-deep)}
.tp .oshop__d{margin-top:12px;font-size:13.5px;line-height:2;color:#5A6B62}
.tp .oshop__cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);margin-top:clamp(24px,3vw,38px)}
.tp .oshop__card{position:relative;background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid rgba(43,58,51,.08);transition:.4s var(--e-out)}
.tp .oshop__card:hover{transform:translateY(-6px);box-shadow:0 24px 46px -24px rgba(43,58,51,.4)}
.tp .oshop__img{display:block;aspect-ratio:1/1;background-size:cover;background-position:center}
.tp .oshop__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.tp .oshop__body b{font-size:14.5px;letter-spacing:.04em;color:#233B30}
.tp .oshop__price{font-family:var(--en);font-size:19px;font-weight:600;color:var(--green-deep)}
.tp .oshop__price small{font-family:var(--sans);font-size:10.5px;color:#84948A;margin-left:4px;font-weight:400}
.tp .oshop__price--tba{font-family:var(--sans);font-size:13.5px;font-weight:500;color:#5B6B61;letter-spacing:.02em}
.tp .oshop__go{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;
  background:var(--green-deep);color:#fff;display:grid;place-items:center;font-size:15px;transition:.35s var(--e-out)}
.tp .oshop__card:hover .oshop__go{transform:translateX(3px);background:#2F5D46}
.tp .oshop__steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:clamp(24px,3vw,36px)}
.tp .oshop__steps li{background:rgba(255,255,255,.75);border:1px dashed rgba(61,125,91,.35);border-radius:16px;
  padding:18px 14px;text-align:center}
.tp .oshop__steps .ic{width:48px;height:48px;margin:0 auto;border-radius:50%;background:rgba(95,181,132,.16);
  color:var(--green-deep);display:grid;place-items:center}
.tp .oshop__steps .ic svg{width:24px;height:24px}
.tp .oshop__steps b{display:block;margin-top:10px;font-size:13.5px;color:#233B30;letter-spacing:.04em}
.tp .oshop__steps small{display:block;margin-top:5px;font-size:11.5px;color:#84948A;line-height:1.8}
.tp .oshop__cta{position:relative;z-index:1;margin-top:clamp(24px,3vw,36px);text-align:center}
.tp .oshop__note{margin-top:12px;font-size:12px;color:#84948A}
.tp .oshop__note a{color:var(--green-deep);text-decoration:underline}
@media (max-width:860px){
  .tp .oshop__head{grid-template-columns:1fr;gap:26px}
  .tp .oshop__ph{min-height:235px}
  .tp .oshop__p1{inset:0 0 30px 26%;transform:rotate(1deg)}
  .tp .oshop__p2{width:44%;bottom:4px;transform:rotate(-2.5deg)}
  .tp .oshop__cards{grid-template-columns:1fr}
  .tp .oshop__steps{grid-template-columns:1fr}
}

/* ----- ヘッダー／フッターの 植え替える.com リンク ----- */
.hd__nav > li.uk > a{color:#7CC29A}
.hd__nav .ext{font-style:normal;font-size:10px;margin-left:3px;opacity:.85}
html.tp-page .hd:not(.is-solid) .hd__nav > li.uk > a{color:#3D7D5B}
.drawer__list .uk-note{color:#7CC29A}
.ft__uk{margin-top:18px;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(124,194,154,.4);
  border-radius:999px;padding:10px 20px;font-size:12.5px;color:#A9CDB6}
.ft__uk:hover{border-color:#7CC29A;color:#CFE8DA}
.ft__uk b{color:#7CC29A}
.ft__uk::after{content:"↗";font-size:12px}

/* ============================================================
   28. ブロック塀診断 特設ページ — セルフチェック等
   ============================================================ */
.bw-alert{border:1px solid rgba(214,86,79,.35);background:rgba(214,86,79,.05);padding:clamp(22px,3vw,34px);border-radius:2px}
.bw-alert__t{font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:.05em;line-height:1.7;color:#B0413B}
.bw-alert__d{margin-top:12px;font-size:13.6px;line-height:2;color:var(--ink-sub)}
.bwc{border:1px solid var(--line);background:var(--bg)}
.bwc__head{background:var(--navy-900);color:#fff;padding:18px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bwc__head b{font-size:15.5px;letter-spacing:.06em}
.bwc__head span{font-family:var(--en);font-size:10.5px;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase}
.bwc__list{display:grid}
.bwc__i{display:flex;gap:16px;align-items:flex-start;padding:18px 24px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .3s}
.bwc__i:hover{background:var(--bg-alt)}
.bwc__i input{width:20px;height:20px;flex:none;margin-top:4px;accent-color:#C0564F}
.bwc__i b{display:block;font-size:14.5px;font-weight:600;letter-spacing:.04em;line-height:1.7}
.bwc__i small{display:block;margin-top:4px;font-size:12px;color:var(--ink-mute);line-height:1.8}
.bwc__res{padding:22px 24px;border-top:2px solid var(--navy)}
.bwc__res .r-ttl{font-size:15px;font-weight:700;letter-spacing:.05em}
.bwc__res .r-txt{margin-top:8px;font-size:13.2px;line-height:1.95;color:var(--ink-sub)}
.bwc__res.is-ok .r-ttl{color:var(--cyan)}
.bwc__res.is-warn .r-ttl{color:#C77A2B}
.bwc__res.is-danger{background:rgba(214,86,79,.06)}
.bwc__res.is-danger .r-ttl{color:#B0413B}
.bw-law{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,26px)}
.bw-law .card b.num{display:block;font-family:var(--en);font-size:26px;color:var(--cyan);letter-spacing:.04em}

/* ---------- 24. Article (お知らせ／コラム本文) ---------- */
.art{font-size:15.5px;line-height:2.05;color:var(--ink)}
.art > *:first-child{margin-top:0}
.art p{margin:1.5em 0;color:var(--ink-sub)}
.art h2{
  margin:2.6em 0 1em;padding:0 0 14px;font-size:clamp(19px,2.2vw,25px);font-weight:600;
  letter-spacing:.04em;line-height:1.55;color:var(--ink);border-bottom:1px solid var(--line);position:relative;
}
.art h2::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--cyan)}
.art h3{margin:2.2em 0 .9em;font-size:clamp(16px,1.8vw,19px);font-weight:600;letter-spacing:.04em;line-height:1.6;color:var(--ink);padding-left:16px;border-left:3px solid var(--cyan)}
.art h4{margin:1.9em 0 .8em;font-size:16px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.art strong,.art b{font-weight:600;color:var(--ink)}
.art a{color:var(--sapphire);text-decoration:underline;text-underline-offset:3px}
.art a:hover{color:var(--cyan)}
.art ul,.art ol{margin:1.4em 0;padding-left:0}
.art ul > li{position:relative;padding-left:22px;margin-bottom:.7em;color:var(--ink-sub)}
.art ul > li::before{content:"";position:absolute;left:0;top:.95em;width:9px;height:1px;background:var(--cyan)}
.art ol{counter-reset:ai}
.art ol > li{position:relative;padding-left:32px;margin-bottom:.7em;color:var(--ink-sub)}
.art ol > li::before{counter-increment:ai;content:counter(ai);position:absolute;left:0;top:.15em;width:21px;height:21px;border:1px solid var(--cyan);color:var(--cyan);font-family:var(--en);font-size:12px;display:grid;place-items:center}
.art img{margin:0 auto;display:block;max-width:100%;height:auto}
.art figure{margin:2em 0}
.art figcaption{margin-top:12px;font-size:12.5px;color:var(--ink-mute);text-align:center;line-height:1.8}
.art blockquote{margin:2em 0;padding:22px 26px;background:var(--bg-alt);border-left:2px solid var(--cyan);font-size:14.5px;line-height:2}
.art blockquote p{margin:.6em 0;color:var(--ink-sub)}
.art table{margin:0;font-size:14px}
.art th,.art td{border:1px solid var(--line);padding:13px 15px;text-align:left;vertical-align:top;line-height:1.85}
.art th{background:var(--bg-alt);font-weight:600;color:var(--ink-sub)}
.art .tbl--scroll{margin:2em 0}
.art hr{margin:2.6em 0;border:0;border-top:1px solid var(--line)}
.art iframe{max-width:100%;margin:2em auto;display:block}

/* 記事メタ・ナビ */
.ameta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.ameta time{font-family:var(--en);font-size:14px;letter-spacing:.12em;color:var(--slate-300)}
.acat{display:inline-block;font-size:11px;letter-spacing:.1em;padding:6px 14px;border:1px solid rgba(0,181,216,.5);color:var(--cyan)}
.acat--solid{background:var(--navy-900);border-color:var(--navy-900);color:var(--platinum)}
.apager{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;border-top:1px solid var(--line);padding-top:26px;margin-top:clamp(40px,5vw,64px)}
.apager > div a{font-size:13px;color:var(--ink-sub);letter-spacing:.04em;line-height:1.7;display:block}
.apager > div a:hover{color:var(--cyan)}
.apager .nx{text-align:right}
.apager small{display:block;font-family:var(--en);font-size:10.5px;letter-spacing:.2em;color:var(--slate-400);margin-bottom:6px;text-transform:uppercase}
.apager .to-list{white-space:nowrap}

/* 記事カード（コラム一覧） */
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:clamp(20px,2.4vw,32px)}
.acard{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--bg);transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.acard:hover{transform:translateY(-5px);box-shadow:0 22px 50px -28px rgba(26,37,48,.5)}
.acard__img{position:relative;overflow:hidden}
.acard__img .ph{transition:transform 1s var(--e-out)}
.acard:hover .acard__img .ph{transform:scale(1.06)}
.acard__cat{position:absolute;left:0;top:14px;z-index:2;background:var(--navy-900);color:var(--cyan);font-size:10.5px;letter-spacing:.12em;padding:6px 13px}
.acard__b{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.acard__d{font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--slate-400)}
.acard__t{margin-top:10px;font-size:15px;font-weight:600;line-height:1.7;letter-spacing:.03em}
.acard__x{margin-top:12px;font-size:12.6px;line-height:1.9;color:var(--ink-mute)}
.acard .tlink{margin-top:auto;padding-top:16px}

@media (max-width:720px){
  .art{font-size:15px}
  .apager{grid-template-columns:1fr;gap:14px}
  .apager .nx{text-align:left}
  .apager .to-list{justify-self:start}
}

/* ---------- 25. 代表プロフィール ---------- */
.prof{position:sticky;top:calc(var(--header-h) + 28px)}
.prof__img{border:0;max-width:320px}
.prof__name{margin-top:22px;padding-top:18px;border-top:2px solid var(--cyan)}
.prof__role{display:block;font-size:11.5px;letter-spacing:.16em;color:var(--ink-mute)}
.prof__jp{display:block;margin-top:8px;font-size:clamp(20px,2.1vw,24px);font-weight:600;letter-spacing:.14em;color:var(--ink)}
.prof__en{display:block;margin-top:6px;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--slate-400);text-transform:uppercase}
.prof__sub{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:12.5px;letter-spacing:.08em;color:var(--ink-mute)}
.prof__note{margin-top:14px;font-size:11.5px;line-height:1.8;color:var(--ink-mute)}
@media (max-width:1024px){ .prof{position:static;max-width:400px} .prof__img{max-width:280px} }
.prof--r{margin-left:auto;max-width:360px}
@media (max-width:1024px){ .prof--r{margin-left:0} }
 .people__ph{max-width:300px} }

/* ---------- 26. アクセス（地図埋め込み） ---------- */
.map{position:relative;aspect-ratio:16/10;border:1px solid var(--line);background:var(--bg-alt);overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.acc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:start}
.acc__dl{border-top:1px solid var(--line)}
.acc__dl > div{display:grid;grid-template-columns:minmax(84px,.26fr) 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.acc__dl dt{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--ink-mute)}
.acc__dl dd{font-size:14.5px;line-height:1.85;color:var(--ink)}
.acc__tel{display:block;font-family:var(--en);font-size:clamp(26px,3vw,34px);font-weight:500;letter-spacing:.04em;line-height:1.15;color:var(--ink)}
.acc__tel:hover{color:var(--cyan)}
.acc__fax{display:block;margin-top:8px;font-family:var(--en);font-size:17px;letter-spacing:.04em;color:var(--ink-sub)}
.acc__act{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){
  .acc{grid-template-columns:1fr;gap:28px}
  .map{aspect-ratio:4/3}
}

/* 社訓 */
.prec{position:relative;padding-left:38px;margin-bottom:14px;font-size:14px;line-height:1.9;color:var(--ink-sub);counter-increment:pc}
.prec::before{content:counter(pc);position:absolute;left:0;top:.1em;width:24px;height:24px;border:1px solid var(--cyan);color:var(--cyan);font-family:var(--en);font-size:12px;display:grid;place-items:center}

/* ----- 人材・労務: 保有資格サマリー ----- */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.qcell{background:#fff;border:1px solid rgba(43,58,51,.1);border-radius:14px;padding:16px 18px;
  display:flex;align-items:baseline;gap:12px}
.qcell b{font-family:var(--en);font-weight:500;font-size:30px;color:var(--green-deep);line-height:1}
.qcell b small{font-size:12px;color:#84948A;font-family:var(--sans);font-weight:400;margin-left:2px}
.qcell span{font-size:12.5px;font-weight:600;color:#233B30;line-height:1.6}

/* ----- SDGs Actionブロック ----- */
.sdg{padding:clamp(30px,4vw,48px) 0;border-top:1px solid rgba(43,58,51,.1)}
.sdg:first-child{border-top:0;padding-top:0}
.sdg__head{display:flex;gap:22px;align-items:flex-start}
.sdg__icon{width:clamp(84px,9vw,120px);height:auto;border-radius:10px;flex:none}
.sdg__no{font-family:var(--en);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green-deep)}
.sdg__t{font-family:var(--serif);font-size:clamp(19px,2.2vw,25px);font-weight:600;letter-spacing:.04em;margin-top:6px;color:#233B30}
.sdg__lead{margin-top:8px;font-size:13.5px;color:#5A6B62;line-height:1.9}
.sdg-icons{display:flex;flex-wrap:wrap;gap:12px}
.sdg-icons img{width:clamp(84px,10vw,120px);height:auto;border-radius:8px}
@media (max-width:640px){.sdg__head{flex-direction:row;gap:14px}.sdg__icon{width:72px}}

/* ----- Vision deck : 理念のスタッキングカード ----- */
.vdeck{position:relative;z-index:2;padding:clamp(60px,9vh,110px) 0 clamp(40px,6vh,80px)}
.vdeck__lbl{font-family:var(--en);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:clamp(18px,3vh,30px)}
.vdeck__stack{max-width:1080px;margin-inline:auto;padding:0 var(--gut)}
.vcard{position:sticky;top:calc(84px + var(--i) * 16px);height:min(74vh,620px);
  border-radius:28px;overflow:hidden;margin-bottom:clamp(26px,4vh,44px);
  display:flex;align-items:flex-end;
  box-shadow:0 -12px 40px -22px rgba(24,37,31,.35),0 30px 60px -30px rgba(24,37,31,.5)}
.vcard__bg{position:absolute;inset:0;background-size:cover;background-position:center}
.vcard__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(12deg,rgba(16,28,22,.88) 18%,rgba(16,28,22,.45) 52%,rgba(16,28,22,.12) 100%)}
.vcard__in{position:relative;z-index:1;padding:clamp(26px,4.5vw,60px);color:#F3F6F2;width:100%}
.vcard__no{position:absolute;right:clamp(20px,4vw,48px);top:calc(-1 * clamp(120px,26vh,240px));
  font-family:var(--serif);font-size:clamp(90px,15vw,170px);line-height:1;color:rgba(255,255,255,.14);font-weight:600}
.vcard__sub{font-size:12px;letter-spacing:.28em;color:#9FC3AB;margin-bottom:14px}
.vcard__t{font-family:var(--serif);font-weight:500;font-size:clamp(24px,4vw,44px);line-height:1.8;letter-spacing:.06em}
.vcard__t em{font-style:normal;background:linear-gradient(120deg,#8FD7AC 20%,#D9EEC9 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#8FD7AC}
.vcard--fin{background:linear-gradient(135deg,#FFFDF8 0%,#F6F1E4 46%,#E9F3E8 100%);
  align-items:center;justify-content:center;text-align:center}
.vcard--fin .vcard__in{color:#233B30}
.vcard--fin .vcard__sub{color:var(--green-deep)}
.vcard--fin .vcard__t{font-size:clamp(28px,4.6vw,52px)}
.vcard--fin .vcard__t em{background:linear-gradient(120deg,#2F5D46 22%,#5FB584 92%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#2F5D46}
.vcard__logo{width:clamp(56px,7vw,84px);height:auto;color:var(--green-deep);margin-bottom:18px;opacity:.9}
.vcard__co{margin-top:16px;font-size:12px;letter-spacing:.3em;color:#84948A}
@media (max-width:760px){
  .vcard{height:min(66vh,540px);top:calc(70px + var(--i) * 10px);border-radius:20px}
  .vcard__no{top:auto;bottom:calc(100% - clamp(80px,18vh,140px))}
}