/*
Theme Name: DATAPOT 2026
Theme URI: https://datapot.com/
Author: datapot llc.
Description: DATAPOT — ITで、できるをつくる。オレンジをアクセントにした明快なコーポレートテーマ。
Version: 1.3.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: datapot2026
*/

/* =============================================================
   1. Tokens
   ============================================================= */
:root{
  --orange:#E45F14;
  --orange-d:#C74D08;
  --orange-l:#FDF1E9;
  --ink:#14171C;
  --body:#424345;
  --muted:#767A80;
  --muted-l:#9BA0A6;
  --bg:#FFFFFF;
  --bg-alt:#F9F8F6;
  --line:#E7E4DF;
  --line-s:#F0EEEA;
  --ok:#3F7A46;   /* 営業中を示す緑 */

  --f-jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-en:"Inter","Helvetica Neue",Arial,sans-serif;

  --wrap:1200px;
  --pad:24px;
  --sec-y:clamp(52px,5.4vw,80px);
  --r:4px;
  --sh:0 2px 14px rgba(20,23,28,.06);
  --sh-h:0 10px 30px rgba(20,23,28,.11);
}

/* =============================================================
   2. Base
   ============================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--f-jp);font-size:16px;line-height:1.9;
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
button{font:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
section[id],div[id]{scroll-margin-top:96px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 共通パーツ ------------------------------------------------- */
.en-label{
  font-family:var(--f-en);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
}
.sec-head{display:flex;align-items:flex-start;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.sec-head h2{
  font-size:clamp(19px,1.9vw,23px);font-weight:700;color:var(--ink);
  line-height:1.5;letter-spacing:.05em;white-space:nowrap;
}
.sec-head .lead{font-size:13.5px;line-height:1.95;color:var(--muted);flex:1;min-width:240px;padding-top:3px}
.sec-head .more{margin-left:auto;white-space:nowrap;padding-top:4px}

.link-more{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;color:var(--orange);
  transition:color .18s;
}
.link-more::after{content:"→";font-family:var(--f-en)}
.link-more:hover{color:var(--orange-d)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:17px 40px;background:var(--orange);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.04em;border-radius:var(--r);
  transition:background .18s;
}
.btn:hover{background:var(--orange-d)}
.btn .ar{font-family:var(--f-en)}
.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--bg-alt)}

/* =============================================================
   3. Header
   ============================================================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 12px rgba(20,23,28,.05)}
.header-in{display:flex;align-items:center;gap:20px;height:94px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand img{height:36px;width:auto}
.brand .tagline{font-size:12.5px;color:var(--muted);letter-spacing:.04em;white-space:nowrap}

.gnav{margin-left:auto}
.gnav ul{display:flex;align-items:center;gap:34px}
.gnav a{
  font-size:14.5px;font-weight:700;color:var(--ink);
  letter-spacing:.04em;padding-block:6px;transition:color .18s;
}
.gnav a:hover{color:var(--orange)}

.header-cta{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  padding:13px 26px;background:var(--orange);color:#fff;
  font-size:14.5px;font-weight:700;border-radius:var(--r);
  transition:background .2s,transform .2s;
}
.header-cta:hover{background:var(--orange-d)}
.header-cta svg{width:17px;height:17px;flex-shrink:0}

.nav-toggle{display:none;width:44px;height:44px;margin-left:auto;position:relative}
.nav-toggle span{
  position:absolute;left:11px;width:22px;height:2px;background:var(--ink);
  transition:transform .25s,opacity .2s;
}
.nav-toggle span:nth-child(1){top:16px}
.nav-toggle span:nth-child(2){top:22px}
.nav-toggle span:nth-child(3){top:28px}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* =============================================================
   4. Hero
   ============================================================= */
.hero{
  position:relative;overflow:hidden;background:#fff;
  margin-top:-94px;padding-top:94px;
  /* 2400×1000 の写真を切り落としすぎない高さを確保する */
  min-height:clamp(430px,35vw,545px);
  display:flex;align-items:center;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 46%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(97deg,#fff 0%,#fff 33%,rgba(255,255,255,.97) 41%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.24) 58%,rgba(255,255,255,0) 66%),
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 16%);
}
.hero__in{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin-inline:auto;padding:clamp(24px,2.4vw,34px) var(--pad) clamp(24px,2.4vw,34px)}
.hero__copy{max-width:585px}
.hero h1{
  font-size:clamp(29px,3.4vw,44px);font-weight:700;color:#1D2127;
  line-height:1.62;letter-spacing:.05em;margin-bottom:clamp(18px,2.2vw,26px);
}
.hero h1 .sm{font-size:.78em}
.hero .lead{font-size:clamp(14px,1.05vw,15.5px);line-height:2.05;color:#3F4143;margin-bottom:clamp(22px,2.6vw,30px)}
.hero .btn{padding:16px 38px;font-size:15.5px}
.hero__en{
  margin-top:clamp(22px,2.6vw,32px);font-family:var(--f-en);
  font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--muted-l);
}
.hero__words{
  position:absolute;top:clamp(104px,9vw,120px);right:max(var(--pad),calc(50vw - var(--wrap)/2 + var(--pad)));
  z-index:2;text-align:right;font-family:var(--f-en);
  font-size:clamp(12px,1.25vw,16px);font-weight:600;letter-spacing:.26em;
  line-height:2.05;color:#fff;padding:14px 18px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.hero__words::before{
  content:"";position:absolute;inset:-40px -46px -34px -40px;z-index:-1;
  background:radial-gradient(ellipse at 62% 50%,rgba(16,18,22,.62) 0%,rgba(16,18,22,.42) 42%,rgba(16,18,22,.16) 66%,rgba(16,18,22,0) 82%);
}

/* =============================================================
   5. News
   ============================================================= */
.news{padding-block:clamp(36px,3.4vw,52px) var(--sec-y);background:#fff}
.news__grid{display:grid;grid-template-columns:1fr 300px;gap:clamp(32px,4vw,56px);align-items:start}

.news-tabs{display:flex;gap:6px;margin-left:8px;margin-top:-6px}
.news-tabs button{
  padding:9px 22px;font-size:14px;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.news-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.news-tabs button:hover{color:var(--ink)}

.news-list li{border-bottom:1px solid var(--line-s)}
.news-list li:first-child{border-top:1px solid var(--line-s)}
.news-list a{
  display:grid;grid-template-columns:104px 92px 1fr;align-items:center;gap:20px;
  padding:19px 8px;
}
.news-list .date{font-family:var(--f-en);font-size:13.5px;color:var(--muted);letter-spacing:.03em}
.news-list .cat{
  justify-self:start;padding:4px 13px;border-radius:2px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  background:var(--orange-l);color:var(--orange);white-space:nowrap;
}
.news-list .cat[data-cat="product"]{background:#EEF3F8;color:#3D6E9E}
.news-list .ttl{font-size:15px;font-weight:500;color:var(--ink);line-height:1.7;transition:color .18s}
.news-list a:hover .ttl{color:var(--orange)}
.news-list .empty{padding:28px 8px;color:var(--muted);font-size:14.5px}

.news-side{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.news-side__img{aspect-ratio:16/9;background:var(--bg-alt);overflow:hidden}
.news-side__img img{width:100%;height:100%;object-fit:cover}
.news-side__body{padding:22px 22px 24px}
.news-side h3{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.7;margin-bottom:10px}
.news-side p{font-size:13.5px;line-height:1.95;color:var(--muted);margin-bottom:16px}

/* =============================================================
   6. Services
   ============================================================= */
.services{padding-block:var(--sec-y);background:var(--bg-alt)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.svc-card{
  display:flex;flex-direction:column;padding:34px 28px 30px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .18s;
}
.svc-card:hover{border-color:var(--muted-l)}
.svc-card__icon{width:44px;height:44px;margin-bottom:22px;color:var(--ink)}
.svc-card__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
.svc-card h3{font-size:16px;font-weight:700;color:var(--ink);line-height:1.6;letter-spacing:.03em;margin-bottom:13px}
.svc-card p{font-size:13.5px;line-height:1.95;color:var(--body);margin-bottom:16px}
.svc-card p:not(.svc-card__tags){flex:1}
.svc-card .link-more{font-size:13.5px}

/* =============================================================
   7. Purpose
   ============================================================= */
.purpose{background:var(--bg-alt)}
.purpose__grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:stretch}
.purpose__media{position:relative;min-height:420px}
.purpose__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 34%}
.purpose__body{background:#fff;padding:clamp(44px,5vw,76px) clamp(28px,4vw,64px)}
.purpose .en-label{display:block;margin-bottom:16px}
.purpose h2{font-size:clamp(20px,2.1vw,26px);font-weight:700;color:var(--ink);line-height:1.62;letter-spacing:.04em;margin-bottom:22px}
.purpose p{font-size:15px;line-height:2.15;margin-bottom:18px}
.purpose .btn{margin-top:16px}

.merits{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:clamp(38px,4vw,52px);padding-top:clamp(32px,3.6vw,42px);border-top:1px solid var(--line)}
.merit__icon{width:38px;height:38px;margin-bottom:14px;color:var(--orange)}
.merit__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
.merit h3{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.03em;margin-bottom:8px}
.merit p{font-size:12.5px;line-height:1.85;color:var(--muted);margin:0}

/* =============================================================
   8. Company
   ============================================================= */
.company{padding-block:var(--sec-y);background:#fff}
.company__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,5vw,72px);align-items:start}
.company__intro p{font-size:14.5px;line-height:2.15;margin-bottom:16px}
.company dl{border-top:1px solid var(--line)}
.company .row{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:17px 4px;border-bottom:1px solid var(--line-s);align-items:baseline}
.company dt{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;font-family:var(--f-en)}
.company dd{margin:0;font-size:14.5px;color:var(--ink);line-height:1.85}
/* 届出番号・登録番号などの補足は本文と同じ色・大きさで読ませる */
.company dd .note{display:block;font-size:14.5px;color:var(--ink);margin-top:3px}
/* 注意書きだけは色で区別する */
.company dd .note--alert{font-size:13px;color:var(--orange-d)}

/* =============================================================
   9. Contact CTA
   ============================================================= */
.cta{padding-block:clamp(56px,6vw,84px);background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(228,95,20,.28) 0%,rgba(228,95,20,0) 68%);
}
.cta__in{position:relative;display:flex;align-items:center;gap:clamp(28px,4vw,56px);flex-wrap:wrap}
.cta h2{font-size:clamp(20px,2.1vw,26px);font-weight:700;line-height:1.62;letter-spacing:.04em}
.cta p{font-size:14.5px;line-height:2;color:rgba(255,255,255,.72);margin-top:14px;max-width:560px}
.cta .actions{margin-left:auto;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta .mail{font-family:var(--f-en);font-size:13.5px;color:rgba(255,255,255,.66);letter-spacing:.03em}
.cta .mail a:hover{color:#fff;text-decoration:underline}

/* =============================================================
   10. Partners
   ============================================================= */
.partners{padding-block:var(--sec-y);background:var(--bg-alt)}
.partners__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:820px}
.partner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:170px;padding:30px 26px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);transition:border-color .18s;
}
.partner:hover{border-color:var(--muted-l)}
.partner img{max-height:56px;width:auto;object-fit:contain}
.partner.is-wide img{max-height:46px}
.partner.is-tall img{max-height:82px}
.partner .name{font-size:12.5px;color:var(--muted);letter-spacing:.03em;text-align:center}

/* =============================================================
   12. 下層ページ共通
   ============================================================= */
.page-head{padding-block:clamp(48px,6vw,76px) clamp(28px,3vw,40px);background:var(--bg-alt);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(21px,2.3vw,28px);font-weight:700;color:var(--ink);line-height:1.5;letter-spacing:.04em}
.page-head .en-label{display:block;margin-bottom:12px}
.page-body{padding-block:clamp(48px,6vw,80px)}
.entry{font-size:15.5px;line-height:2.1}
.entry h2{font-size:24px;font-weight:900;color:var(--ink);margin:2em 0 .8em;padding-bottom:.4em;border-bottom:1px solid var(--line)}
.entry h3{font-size:19px;font-weight:900;color:var(--ink);margin:1.8em 0 .6em}
.entry p{margin-bottom:1.6em}
.entry a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{margin:0 0 1.6em;padding-left:1.4em;list-style:disc}
.entry ol{list-style:decimal}
.entry li{margin-bottom:.5em}
.entry img{border-radius:var(--r);margin-block:1.2em}
.entry blockquote{margin:1.6em 0;padding:20px 24px;background:var(--bg-alt);border-left:3px solid var(--orange);font-size:14.5px}
.entry code{background:var(--bg-alt);padding:.15em .45em;border-radius:3px;font-size:.92em}

.post-meta{display:flex;align-items:center;gap:16px;margin-top:16px;font-size:13px;color:var(--muted)}
.post-meta .cat{padding:4px 13px;border-radius:2px;background:var(--orange-l);color:var(--orange);font-weight:700;font-size:11.5px}
.post-nav{display:flex;justify-content:space-between;gap:20px;margin:56px 0 0;padding-top:28px;border-top:1px solid var(--line);font-size:13.5px}
.post-nav a{color:var(--body);transition:color .2s}
.post-nav a:hover{color:var(--orange)}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:48px}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding-inline:12px;
  border:1px solid var(--line);border-radius:var(--r);font-family:var(--f-en);font-size:14px;color:var(--body);transition:all .2s;
}
.pagination .page-numbers:hover{border-color:var(--orange);color:var(--orange)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}

/* =============================================================
   14. Responsive
   ============================================================= */
@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .gnav ul{gap:24px}
  .brand .tagline{display:none}
}
@media (max-width:900px){
  .news__grid{grid-template-columns:1fr}
  .news-side{display:flex;gap:20px;align-items:center}
  .news-side__img{flex:0 0 200px;aspect-ratio:4/3}
  .purpose__grid{grid-template-columns:1fr}
  .purpose__media{min-height:280px}
  .company__grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  .gnav{
    position:fixed;inset:76px 0 auto;margin:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--sh);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.25s;
  }
  .nav-open .gnav{transform:none;opacity:1;visibility:visible}
  .gnav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 20px}
  .gnav li{border-bottom:1px solid var(--line-s)}
  .gnav a{display:block;padding:16px 4px;font-size:15px}
  .gnav a::after{display:none}
  .header-cta{margin-left:10px;padding:11px 16px;font-size:13.5px}
  .header-cta .txt{display:none}
  .hero__words{display:none}
  .hero__media img{opacity:.8}
  .hero__media::after{background:linear-gradient(178deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.88) 40%,rgba(255,255,255,.8) 100%)}
  .hero__copy{max-width:none}
  .hero h1{line-height:1.72}
  .cta__in{flex-direction:column;align-items:flex-start}
  .cta .actions{margin-left:0}
}
@media (max-width:640px){
  :root{--pad:18px}
  .sec-head{gap:16px;margin-bottom:28px}
  .sec-head h2{white-space:normal}
  .sec-head .more{margin-left:0}
  .news-tabs{width:100%;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .news-tabs button{padding:9px 14px;white-space:nowrap}
  .svc-grid{grid-template-columns:1fr;gap:16px}
  .merits{grid-template-columns:1fr;gap:22px}
  .news-list a{grid-template-columns:1fr;gap:6px;padding:16px 4px}
  .news-list .date{font-size:12.5px}
  .news-list .cat{font-size:11px}
  .news-side{display:block}
  .news-side__img{flex:none;aspect-ratio:16/9}
  .company .row{grid-template-columns:1fr;gap:4px;padding:14px 4px}
  .footer-in{gap:20px}
  .copyright{margin-left:0;width:100%}
  .btn{width:100%;padding:16px 24px}
  .hero .btn{width:auto}
}

/* =============================================================
   15. Contact page
   ============================================================= */
.page-head__lead{margin-top:16px;max-width:680px;font-size:14.5px;line-height:2;color:var(--muted)}
.ct-grid{display:grid;grid-template-columns:290px 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.ct-side{display:grid;gap:14px;position:sticky;top:100px}
.ct-blk{padding:22px 24px;background:var(--bg-alt);border-radius:var(--r)}
.ct-blk .k{display:block;font-family:var(--f-en);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.ct-blk p{font-size:14px;line-height:1.9;color:var(--body)}
.ct-blk .phone{font-family:var(--f-en);font-size:22px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.ct-blk .mail{font-family:var(--f-en);font-size:15px;color:var(--ink);word-break:break-all}
.ct-blk .mail:hover{color:var(--orange)}
.ct-blk .note{font-size:12.5px;color:var(--muted);margin-top:6px}

.ct-form{padding:clamp(28px,3.4vw,44px);border:1px solid var(--line);border-radius:var(--r);background:#fff}

/* フォーム本体（[datapot_contact_form] のマークアップに対応） */
.ct-form form{display:grid;gap:26px}
.ct-form .fld{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start}
.ct-form .fld > label{display:flex;align-items:center;gap:10px;padding-top:13px;font-size:14.5px;font-weight:700;color:var(--ink)}
.ct-form .req,.ct-form .opt{
  padding:3px 9px;border-radius:2px;font-family:var(--f-en);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
}
.ct-form .req{background:var(--orange-l);color:var(--orange)}
.ct-form .opt{background:var(--bg-alt);color:var(--muted)}
.ct-form .inp{
  width:100%;padding:13px 16px;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s,box-shadow .2s;
}
.ct-form .inp:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(228,95,20,.12)}
.ct-form textarea.inp{min-height:210px;line-height:1.9;resize:vertical}
.ct-form .hint{display:flex;justify-content:space-between;gap:12px;margin-top:7px;font-size:12px;color:var(--muted-l)}

.ct-form .cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ct-form .cat{display:flex;align-items:center;gap:11px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .2s,background .2s}
.ct-form .cat:hover{border-color:var(--muted-l);background:var(--bg-alt)}
.ct-form .cat input{position:absolute;opacity:0;width:0;height:0}
.ct-form .cat .box{position:relative;flex:0 0 18px;width:18px;height:18px;border:1px solid var(--muted-l);border-radius:50%;transition:border-color .2s}
.ct-form .cat .box::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .18s}
.ct-form .cat input:checked ~ .box{border-color:var(--orange)}
.ct-form .cat input:checked ~ .box::after{transform:scale(1)}
.ct-form .cat input:checked ~ .lb{color:var(--ink);font-weight:700}
.ct-form .cat input:focus-visible ~ .box{outline:2px solid var(--orange);outline-offset:2px}
.ct-form .cat .lb{font-size:14px;color:var(--body);line-height:1.5}
.ct-form .cat .en{display:block;font-family:var(--f-en);font-size:11px;color:var(--muted-l);letter-spacing:.04em}
.ct-form .cat:has(input:checked){border-color:var(--orange);background:var(--orange-l)}

.ct-form .pv{padding:20px 22px;background:var(--bg-alt);border-radius:var(--r);font-size:12.5px;line-height:1.95;color:var(--muted)}
.ct-form .pv h4{font-family:var(--f-en);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}

.ct-form .agree{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14.5px;color:var(--ink)}
.ct-form .agree input{position:absolute;opacity:0;width:0;height:0}
.ct-form .agree .box{position:relative;flex:0 0 22px;width:22px;height:22px;border:1px solid var(--muted-l);border-radius:3px;transition:.2s}
.ct-form .agree .box svg{position:absolute;inset:3px;width:14px;height:14px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .18s}
.ct-form .agree input:checked ~ .box{background:var(--orange);border-color:var(--orange)}
.ct-form .agree input:checked ~ .box svg{opacity:1}
.ct-form .agree input:focus-visible ~ .box{outline:2px solid var(--orange);outline-offset:2px}

.ct-form .actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:6px}
.ct-form .actions .note{font-size:12px;color:var(--muted-l)}
.ct-form .submit{
  margin-left:auto;padding:17px 52px;background:var(--orange);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.04em;border-radius:var(--r);
  transition:background .35s;
}
.ct-form .submit:hover{background:var(--orange-d)}

.ct-form .done{
  padding:24px 26px;margin-bottom:28px;border-radius:var(--r);
  background:#F1F7F1;border:1px solid #CFE3CF;font-size:14px;line-height:1.95;color:#2E5A32;
}
.ct-form .done b{display:block;font-size:16px;margin-bottom:6px;color:#24471F}
.ct-form .done .pfx,.ct-form .done .mute{display:none}

@media (max-width:900px){
  .ct-grid{grid-template-columns:1fr}
  .ct-side{position:static;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}
@media (max-width:640px){
  .ct-form{padding:22px 18px}
  .ct-form .fld{grid-template-columns:1fr;gap:10px}
  .ct-form .fld > label{padding-top:0}
  .ct-form .cats{grid-template-columns:1fr}
  .ct-form .submit{width:100%;margin-left:0}
  .ct-form .actions{flex-direction:column-reverse;align-items:stretch}
}

/* =============================================================
   16. Contact Form 7 対応
   （実際のお問い合わせページは CF7 で組まれているため）
   ============================================================= */
.ct-form .wpcf7-form-control-wrap{display:block;width:100%}
.ct-form .wpcf7-form-control.wpcf7-text,
.ct-form .wpcf7-form-control.wpcf7-email,
.ct-form .wpcf7-form-control.wpcf7-tel,
.ct-form .wpcf7-form-control.wpcf7-textarea,
.ct-form .wpcf7-form-control.wpcf7-select{
  width:100%;padding:13px 16px;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s,box-shadow .2s;
}
.ct-form .wpcf7-form-control.wpcf7-textarea{min-height:210px;line-height:1.9;resize:vertical}
.ct-form .wpcf7-form-control:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(228,95,20,.12)}

/* ご相談内容（ラジオ）をカード状に */
.ct-form .cats .wpcf7-form-control-wrap,
.ct-form .cats .wpcf7-form-control.wpcf7-radio{display:contents}
.ct-form .cats .wpcf7-list-item{margin:0;display:block}
.ct-form .cats .wpcf7-list-item > label{
  display:flex;align-items:center;gap:11px;width:100%;min-height:52px;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;font-size:14px;color:var(--body);cursor:pointer;
  transition:border-color .2s,background .2s;
}
.ct-form .cats .wpcf7-list-item > label:hover{border-color:var(--muted-l);background:var(--bg-alt)}
.ct-form .cats .wpcf7-list-item input[type=radio]{
  margin:0;width:17px;height:17px;flex-shrink:0;accent-color:var(--orange);cursor:pointer;
}
.ct-form .cats .wpcf7-list-item:has(input:checked) > label{
  border-color:var(--orange);background:var(--orange-l);color:var(--ink);font-weight:700;
}

/* 同意チェック */
.ct-form .agree .wpcf7-form-control-wrap,
.ct-form .agree .wpcf7-form-control.wpcf7-acceptance{display:block;width:100%}
.ct-form .agree .wpcf7-list-item{margin:0;display:block}
.ct-form .agree .wpcf7-list-item > label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:14.5px;line-height:1.8;color:var(--ink)}
.ct-form .agree .wpcf7-list-item input[type=checkbox]{
  position:static !important;opacity:1 !important;pointer-events:auto !important;
  margin:4px 0 0;width:19px;height:19px;flex-shrink:0;accent-color:var(--orange);cursor:pointer;
}

/* 送信ボタン */
.ct-form .wpcf7-submit{
  margin-left:auto;padding:17px 52px;background:var(--orange);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.04em;border:0;border-radius:var(--r);
  cursor:pointer;transition:background .35s;
}
.ct-form .wpcf7-submit:hover{background:var(--orange-d)}
.ct-form .wpcf7-submit:disabled{opacity:.55;cursor:default}

/* バリデーション・送信結果 */
.wpcf7-not-valid-tip{margin-top:7px;font-size:12.5px;color:#C0392B}
.wpcf7-response-output{
  margin:24px 0 0 !important;padding:16px 20px;border:1px solid var(--line);
  border-radius:var(--r);font-size:14px;line-height:1.9;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{border-color:#E4B4AC;background:#FDF4F2;color:#A5372A}
.wpcf7 form.sent .wpcf7-response-output{border-color:#CFE3CF;background:#F1F7F1;color:#2E5A32}
.wpcf7 form.submitting .wpcf7-response-output{border-color:var(--line);background:var(--bg-alt);color:var(--muted)}
.wpcf7-spinner{background-color:var(--orange)}

@media (max-width:640px){
  .ct-form .wpcf7-submit{width:100%;margin-left:0}
}

/* =============================================================
   17. ステータスバー（ヒーロー直下）
   ============================================================= */
.statusbar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statusbar__in{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.statusbar .cell{padding:15px 28px 15px 0;border-right:1px solid var(--line-s)}
.statusbar .cell:first-child{padding-left:0}
.statusbar .cell:last-child{border-right:0}
.statusbar .k{font-family:var(--f-en);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:7px}
.statusbar .v{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.7}
.statusbar .v small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px}

/* =============================================================
   18. 予約箱セクション
   ============================================================= */
.product{padding-block:var(--sec-y);background:#fff}
.product__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,4vw,58px);align-items:center}
.product .en-label{display:block;margin-bottom:14px}
.product h3{font-size:clamp(19px,1.9vw,23px);font-weight:700;color:var(--ink);letter-spacing:.05em;line-height:1.55;margin-bottom:16px}
.product p{font-size:13.5px;line-height:2.1;color:var(--body);margin-bottom:14px}
.product .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 24px;padding-top:22px;border-top:1px solid var(--line)}
.product .facts .n{font-family:var(--f-en);font-size:23px;font-weight:600;color:var(--ink);line-height:1.2}
.product .facts .k{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.product__media{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,30px);display:flex;align-items:center}
.product__media img{width:100%;height:auto}

/* =============================================================
   19. ロゴ帯（自社サービス）
   ※ 現在トップページでは非表示。掲載サービスが増えたら
      front-page.php のコメントを外すと復活します。
   ============================================================= */
.logos{padding-block:clamp(34px,3.6vw,48px);background:var(--bg-alt);border-top:1px solid var(--line)}
.logos__row{display:flex;align-items:center;justify-content:center;gap:clamp(40px,7vw,96px);flex-wrap:wrap}
.logos__row a,.logos__row span{display:block;transition:opacity .18s}
.logos__row a:hover{opacity:.7}
.logos__row img{width:auto;object-fit:contain}
.logos__row .is-wide img{max-height:44px}
.logos__row .is-tall img{max-height:66px}

/* =============================================================
   20. Footer
   ============================================================= */
.site-footer{background:#fff;border-top:1px solid var(--line);padding-block:clamp(40px,4vw,56px) 26px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.footer-brand{display:inline-flex;align-items:center;gap:14px}
.footer-brand img{height:32px;width:auto}
.footer-brand .tagline{font-size:12.5px;color:var(--muted)}
.footer-addr{margin-top:18px;font-size:12.5px;line-height:2;color:var(--muted)}
.footer-addr b{display:inline-block;min-width:3.6em;font-weight:700;color:var(--body)}
.footer-addr a{color:var(--body)}
.footer-addr a:hover{color:var(--orange)}
.footer-col h5{font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.footer-col ul{display:grid;gap:7px}
.footer-col a{display:inline-block;font-size:13px;line-height:1.7;color:var(--body);transition:color .2s}
.footer-col a:hover{color:var(--orange)}

.security-action{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:clamp(28px,3vw,40px);padding:20px 24px;
  background:var(--bg-alt);border-radius:var(--r);
}
.security-action img{width:66px;height:66px;flex:none}
.security-action p{font-size:12px;line-height:1.95;color:var(--muted);margin:0;flex:1;min-width:260px}
.security-action strong{color:var(--ink)}
.security-action a{color:var(--body);text-decoration:underline;text-underline-offset:2px}
.security-action a:hover{color:var(--orange)}

.footer-bottom{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line-s)}
.footer-bottom .copyright{font-family:var(--f-en);font-size:12px;color:var(--muted-l);letter-spacing:.02em}
.footer-bottom .place{margin-left:auto;font-family:var(--f-en);font-size:11.5px;color:var(--muted-l);letter-spacing:.04em}

.to-top{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--ink);color:#fff;border-radius:50%;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,visibility .25s,transform .25s,background .2s;
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--orange)}
.to-top svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:900px){
  .statusbar__in{grid-template-columns:repeat(2,1fr)}
  .statusbar .cell{padding:16px 20px 16px 0}
  .statusbar .cell:nth-child(2){border-right:0}
  .statusbar .cell:nth-child(3),.statusbar .cell:nth-child(4){border-top:1px solid var(--line-s)}
  .product__grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > :first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .statusbar__in{grid-template-columns:1fr}
  .statusbar .cell{border-right:0;border-top:1px solid var(--line-s);padding:14px 0}
  .statusbar .cell:first-child{border-top:0}
  .product .facts{grid-template-columns:1fr;gap:12px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .security-action{padding:18px}
  .footer-bottom .place{margin-left:0;width:100%}
  .to-top{right:14px;bottom:14px;width:42px;height:42px}
}

/* サービスカードのタグ */
.svc-card__tags{font-size:11.5px;line-height:1.8;color:var(--muted-l);letter-spacing:.02em;margin:-6px 0 18px !important;padding-top:14px;border-top:1px dashed var(--line)}

/* お問い合わせセクションに背景写真を敷いたとき */
.cta__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.cta__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.cta__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,18,22,.93) 0%,rgba(16,18,22,.88) 50%,rgba(16,18,22,.85) 100%);
}
.cta.has-media::before{opacity:.6}

/* =============================================================
   21. Motion — 「浮かせない・影を落とさない」動きの文法
   ・テキスト … 罫線の下から組み上がるようにスライドアップ
   ・画像   … マスクが引かれて現れ、内側はゆっくり寄りが戻る
   ・線     … 左から引かれる
   ============================================================= */
:root{
  --ease:cubic-bezier(.22,.68,.28,1);   /* ゆっくり止まる */
  --ease-mask:cubic-bezier(.62,.05,.2,1); /* マスク用・キレのある動き */
}

/* 基本のあらわれ方：位置は動かさず、濃度だけ */
.reveal{opacity:0;transition:opacity .9s var(--ease)}
.reveal.is-in{opacity:1}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}

/* 見出し：マスクの下から立ち上がる（JSが .rise__i を差し込む） */
.rise{display:block;overflow:hidden}
.rise__i{display:block;transform:translateY(106%);transition:transform 1s var(--ease)}
.is-in .rise__i,.rise.is-in .rise__i{transform:none}

/* 画像：マスクが下から引かれ、内側の寄りが戻る
   ※ position は指定しない。要素側の absolute/relative を壊さないため
      （.cta__media は absolute で背景として敷いている） */
.img-in{overflow:hidden}
.news-side__img,.product__media{position:relative}
.img-in::after{
  content:"";position:absolute;inset:0;z-index:2;background:var(--bg);
  transform-origin:bottom;transition:transform 1.05s var(--ease-mask);
}
.img-in.is-in::after{transform:scaleY(0)}
.img-in > img{transform:scale(1.08);transition:transform 1.6s var(--ease)}
.img-in.is-in > img{transform:none}

/* 背景として敷く画像用（::after を暗幕に使っているのでマスクは重ねない） */
.zoom-in > img{transform:scale(1.06);transition:transform 2s var(--ease)}
.zoom-in.is-in > img{transform:none}
.services .img-in::after,.partners .img-in::after{background:var(--bg-alt)}

/* 罫線：左から引かれる */
.rule-in{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.rule-in.is-in{transform:none}
.sec-head{position:relative}
.services .sec-head::after,.news .sec-head::after,
.company .sec-head::after,.partners .sec-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease);
}
.services .sec-head.is-in::after,.news .sec-head.is-in::after,
.company .sec-head.is-in::after,.partners .sec-head.is-in::after{transform:none}

/* =============================================================
   22. ヒーローの入場
   ============================================================= */
.hero__veil{
  position:absolute;inset:0;z-index:3;background:#fff;
  transform-origin:left;transition:transform 1.15s var(--ease-mask);
}
.hero-ready .hero__veil{transform:scaleX(0)}

.hero__media img{transform:scale(1.1);transition:transform 2s var(--ease)}
.hero-ready .hero__media img{transform:none}
/* 入場後は静止させる（動き続けるものは置かない） */

.hero h1,.hero .lead,.hero .btn-wrap,.hero__en{opacity:0}
.hero-ready h1,.hero-ready .lead,.hero-ready .btn-wrap,.hero-ready .hero__en{
  opacity:1;transition:opacity .9s var(--ease);
}
.hero-ready h1{transition-delay:.34s}
.hero-ready .lead{transition-delay:.5s}
.hero-ready .btn-wrap{transition-delay:.62s}
.hero-ready .hero__en{transition-delay:.74s}
.hero h1 .rise__i{transition:transform 1.05s var(--ease) .34s}
.hero-ready h1 .rise__i{transform:none}

/* IDEAS / SYSTEMS / PEOPLE は一語ずつ */
.hero__words span{display:block;overflow:hidden}
.hero__words i{
  display:block;font-style:normal;transform:translateY(110%);
  transition:transform .95s var(--ease);
}
.hero-ready .hero__words i{transform:none}
.hero-ready .hero__words span:nth-child(1) i{transition-delay:.78s}
.hero-ready .hero__words span:nth-child(2) i{transition-delay:.88s}
.hero-ready .hero__words span:nth-child(3) i{transition-delay:.98s}

/* ステータスバーは区切り線が上から降りる */
.statusbar .cell{position:relative;border-right:0}
.statusbar .cell::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--line-s);
  transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease);
}
.statusbar .cell:last-child::after{display:none}
.statusbar.is-in .cell::after{transform:none}
.statusbar.is-in .cell:nth-child(2)::after{transition-delay:.1s}
.statusbar.is-in .cell:nth-child(3)::after{transition-delay:.2s}

/* =============================================================
   23. 読み進みを示す線（ヘッダー下端）
   ============================================================= */
.scroll-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  will-change:transform;
}

/* 数字のカウント中は字幅を固定して揺れを防ぐ */
.product .facts .n{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal,.hero h1,.hero .lead,.hero .btn-wrap,.hero__en{opacity:1 !important}
  .rise__i,.hero__words i{transform:none !important}
  .img-in::after{transform:scaleY(0) !important}
  .img-in > img,.hero__media img{transform:none !important;animation:none !important}
  .rule-in,.statusbar .cell::after{transform:none !important}
  .hero__veil{display:none}
}

/* =============================================================
   24. ヒーローの常時の気配
   ・写真はマウスとスクロールにわずかに追従（最大8px）
   ・右下でスクロールを促す線が静かに流れる
   ============================================================= */
.hero__scroll{
  position:absolute;z-index:2;bottom:26px;
  right:max(var(--pad),calc(50vw - var(--wrap)/2 + var(--pad)));
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-en);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;color:rgba(255,255,255,.86);
  text-shadow:0 1px 4px rgba(0,0,0,.45);
  opacity:0;transition:opacity .9s var(--ease) 1.15s;
}
.hero-ready .hero__scroll{opacity:1}
.hero__scroll span{
  display:block;width:1px;height:46px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.75));
}

/* 写真が左端で切れて見えないよう、白のかぶせを器の拡張ぶん広げる */


@media (max-width:820px){
  .hero__scroll{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__scroll{opacity:1}
}

/* ステータス表示（ヒーロー下のバー） */
.statusbar .v .dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:9px;vertical-align:1px;background:var(--muted-l);
}
.statusbar [data-state="open"] .dot{background:var(--ok)}
.statusbar [data-state="open"] .lb{color:var(--ok)}
.statusbar [data-state="holiday"] .dot{background:var(--muted-l)}
/* 手動で指定したときの状態 */
.statusbar [data-state="busy"] .dot{background:var(--orange)}
.statusbar [data-state="busy"] .lb{color:var(--orange)}
.statusbar [data-state="away"] .dot{background:var(--muted-l)}

/* =============================================================
   26. 開発セクション（予約箱の下・画像を左に置いて流れに変化をつける）
   ============================================================= */
.product--alt{background:var(--bg-alt)}
.product--alt .product__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.product--alt .product__grid{align-items:stretch}
.product--alt .product__media{
  order:-1;background:transparent;border:0;padding:0;
  border-radius:var(--r);overflow:hidden;display:flex;min-height:320px;
}
.product--alt .product__media img{width:100%;height:100%;object-fit:cover;object-position:42% center;display:block}

.dev-list{display:grid;gap:9px;margin:22px 0 26px;padding-top:20px;border-top:1px solid var(--line)}
.dev-list li{
  position:relative;padding-left:20px;
  font-size:13px;line-height:1.85;color:var(--body);
}
.dev-list li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:7px;height:1px;background:var(--orange);
}

@media (max-width:900px){
  .product--alt .product__grid{grid-template-columns:1fr}
  .product--alt .product__media{order:0}
}

/* フッター：2列目に External を重ねたぶんの調整 */
.footer-col h5.is-second{margin-top:26px}
.footer-col .ext{font-family:var(--f-en);font-size:11px;color:var(--muted-l);margin-left:2px}

/* ボタン内のアイコン */
.btn__icon{width:19px;height:19px;flex:none}

/* =============================================================
   27. 下層ページ（Webサイト制作など）
   ============================================================= */
.lede{max-width:820px;font-size:15.5px;line-height:2.15;color:var(--body)}
.page-body .lede p{margin-bottom:1.2em}

.note-box{
  padding:clamp(26px,3vw,38px);background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
}
.note-box .en-label{display:block;margin-bottom:12px}
.note-box h4{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.03em;line-height:1.6;margin-bottom:14px}
.note-box p{font-size:13.5px;line-height:2;color:var(--body);margin-bottom:1em}
.note-box .link-more{margin-top:4px}

.scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.scope-col h3{
  font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.05em;
  padding-bottom:12px;border-bottom:2px solid var(--ink);
}
.scope-col .dev-list{margin-top:16px;padding-top:0;border-top:0}

.product strong{font-weight:700;color:var(--ink)}

@media (max-width:900px){
  .scope-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .scope-grid{grid-template-columns:1fr}
}

/* =============================================================
   28. 下層ページ：本文の可読性・3カード・フロー・料金
   ============================================================= */
/* 本文をひとまわり大きく */
.product p{font-size:14.5px;line-height:2.05}
.lede{font-size:16px}
.lead-text{
  font-size:17px !important;line-height:1.95 !important;
  font-weight:500;color:var(--ink) !important;letter-spacing:.02em;
}
.lead-text strong{font-weight:700;color:var(--orange)}

/* 「優しさ」3点 */
.kind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kind{padding:32px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.kind__n{
  display:block;font-family:var(--f-en);font-size:12px;font-weight:700;
  letter-spacing:.14em;color:var(--orange);margin-bottom:14px;
}
.kind h3{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.03em;line-height:1.6;margin-bottom:12px}
.kind p{font-size:13.5px;line-height:2;color:var(--body)}

/* 制作の流れ（4工程・横並び） */
.flow-sec{padding-block:var(--sec-y);background:#fff}
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px)}
.flow-step{position:relative;padding-top:24px;border-top:1px solid var(--line)}
.flow-step::before{content:"";position:absolute;left:0;top:-1px;width:32px;height:2px;background:var(--orange)}
.flow-step__no{
  display:block;font-family:var(--f-en);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;color:var(--muted);margin-bottom:12px;
}
.flow-step h3{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.03em;
  line-height:1.5;margin-bottom:12px;
}
.flow-step__tag{
  padding:3px 10px;border-radius:2px;background:var(--orange-l);color:var(--orange);
  font-size:11px;font-weight:700;letter-spacing:.04em;
}
.flow-step p{font-size:13px;line-height:1.95;color:var(--body)}

@media (max-width:900px){
  .flow-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:560px){
  .flow-grid{grid-template-columns:1fr}
}

/* 料金 */
.price-sec{padding-block:var(--sec-y);background:var(--bg-alt)}
.price-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.price-main{padding:clamp(28px,3.4vw,44px);background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.price-main .en-label{display:block;margin-bottom:10px}
.price-main__amount{
  font-family:var(--f-en);font-size:clamp(32px,3.6vw,42px);font-weight:600;
  color:var(--ink);line-height:1.1;letter-spacing:.01em;
}
.price-main__amount .yen{font-size:.42em;font-weight:500;margin-left:4px}
.price-main__amount .from{font-size:.42em;font-weight:500;margin-left:6px;color:var(--muted)}
.price-main__note{font-size:12.5px;color:var(--muted);margin-top:8px}
.price-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;padding-top:26px;border-top:1px solid var(--line)}
.price-cols h4{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.04em;margin-bottom:12px}
.price-cols .dev-list{margin:0;padding-top:0;border-top:0}

.price-note{
  padding:clamp(26px,3vw,36px);background:var(--orange-l);
  border:1px solid #F3DCCB;border-radius:var(--r);color:var(--body);
}
.price-note h3{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.03em;margin-bottom:16px}
.price-note p{font-size:13.5px;line-height:2.05;margin-bottom:1em}
.price-note__em{color:var(--orange-d);font-weight:700;margin-bottom:0 !important}

@media (max-width:900px){
  .kind-grid{grid-template-columns:1fr;gap:14px}
  .price-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .price-cols{grid-template-columns:1fr;gap:20px}
}

/* =============================================================
   29. Webシステム開発ページ
   ============================================================= */
.small-lead{max-width:760px;margin-bottom:34px;font-size:14.5px;line-height:2.1;color:var(--body)}

.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ex{
  display:flex;align-items:flex-start;gap:16px;
  padding:22px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
}
.ex__tag{
  flex:none;margin-top:2px;padding:4px 11px;border-radius:2px;
  background:var(--orange-l);color:var(--orange);
  font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.ex p{font-size:14px;line-height:1.85;color:var(--ink)}
.ex-note{margin-top:28px;font-size:14px;line-height:2;color:var(--body)}

@media (max-width:760px){
  .ex-grid{grid-template-columns:1fr}
}

/* 料金カード内に2つの料金を並べる */
.price-items{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.price-item + .price-item{padding-left:28px;border-left:1px solid var(--line)}
.price-main__amount.is-text{font-family:var(--f-jp);font-size:clamp(24px,2.6vw,30px);font-weight:700;letter-spacing:.04em}
.price-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-s);font-size:12.5px;line-height:1.9;color:var(--muted)}

@media (max-width:640px){
  .price-items{grid-template-columns:1fr;gap:22px}
  .price-item + .price-item{padding-left:0;padding-top:22px;border-left:0;border-top:1px solid var(--line)}
}

/* =============================================================
   30. 会社情報ページ
   ============================================================= */
.sign{
  margin-top:28px !important;padding-top:20px;border-top:1px solid var(--line);
  font-size:15px !important;font-weight:700;color:var(--ink) !important;letter-spacing:.06em;
}
.sign__name{display:inline-block;margin-left:1.2em;white-space:nowrap}

.origin{padding-block:calc(var(--sec-y) + 86px) var(--sec-y);background:#fff}
.origin__box{
  max-width:820px;margin-inline:auto;padding:clamp(32px,4vw,56px);
  background:var(--orange-l);border-radius:var(--r);text-align:center;
}
.origin__box .en-label{display:block;margin-bottom:12px}
.origin__box h2{font-size:clamp(19px,1.9vw,23px);font-weight:700;color:var(--ink);letter-spacing:.05em;margin-bottom:26px}
.origin__lead{
  font-size:clamp(16px,1.6vw,19px);line-height:2;font-weight:500;
  color:var(--ink);letter-spacing:.03em;margin-bottom:24px;
}
.origin__box p{font-size:14px;line-height:2.1;color:var(--body);margin-bottom:1em}
.origin__box p:last-child{margin-bottom:0}
.origin__box strong{font-weight:700;color:var(--orange-d)}

/* 取り組みカードのラベルは英字のまま使う */
.kind__n{text-transform:none}
.kind .link-more{margin-top:14px;font-size:13px}

/* 認定・届出のリスト（項目を増やしても崩れない形） */
.cred-list{display:grid;gap:0;border-top:1px solid var(--line)}
.cred{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(20px,2.6vw,36px);
  align-items:start;padding:26px 4px;border-bottom:1px solid var(--line-s);
}
.cred:last-child{border-bottom:1px solid var(--line)}
.cred__mark{display:flex;align-items:center;justify-content:center;min-height:48px}
.cred__mark img{width:64px;height:64px;object-fit:contain}
.cred__label{
  font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--orange);padding:5px 12px;border:1px solid #F0D9C6;border-radius:2px;
  background:var(--orange-l);white-space:nowrap;
}
.cred__body h3{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.03em;line-height:1.6;margin-bottom:10px}
.cred__body p{font-size:13.5px;line-height:2;color:var(--body);max-width:720px}
.cred__body .link-more{margin-top:10px;font-size:13px}

@media (max-width:640px){
  .cred{grid-template-columns:1fr;gap:14px;padding:22px 4px}
  .cred__mark{justify-content:flex-start;min-height:0}
}

/* 社名の由来：右肩のワンポイント */
.origin__box{position:relative}
.origin__peng{
  position:absolute;left:50%;transform:translateX(-50%);bottom:100%;margin-bottom:18px;
  width:clamp(76px,7.4vw,96px);height:auto;
  pointer-events:none;
}
@media (max-width:640px){
  .origin__peng{width:70px;margin-bottom:12px}
}

/* 見出し脇のワンポイント（白背景のセクションでのみ使う） */
.sec-head{position:relative}
.sec-peng{
  position:absolute;right:0;bottom:-18px;
  width:clamp(112px,11vw,148px);height:auto;
  pointer-events:none;
}
.sec-head:has(.more) .sec-peng{display:none}   /* 「一覧を見る」がある見出しには置かない */

@media (max-width:900px){
  .sec-peng{display:none}
}

/* 本文中に添えるワンポイント（予約箱セクションなど・白背景のみ） */
.inline-peng{
  display:block;width:clamp(104px,10vw,132px);height:auto;
  margin:28px 0 0 auto;pointer-events:none;
}
@media (max-width:900px){ .inline-peng{display:none} }

/* ワンポイントを置いたセクションは、アンカー遷移時に絵が隠れないよう余裕をとる */
#origin{scroll-margin-top:230px}

/* 見出し脇のペンギンを一段下げたいとき */
.sec-peng.is-low{
  bottom:-58px;top:auto;
  width:clamp(84px,8.2vw,112px);
}

/* ボタンと並べて添えるペンギン */
.btn-row{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap}
.btn-row__peng{width:clamp(104px,10vw,132px);height:auto;pointer-events:none}

/* お問い合わせページのサイド先頭 */
.ct-peng{
  width:clamp(110px,11vw,142px);height:auto;
  margin:0 auto 4px;pointer-events:none;
}

@media (max-width:900px){
  .btn-row__peng{display:none}
  .ct-peng{display:none}
}

/* =============================================================
   31. 予約箱 紹介ページ
   ============================================================= */
.yb-video{padding-block:clamp(36px,4vw,56px) 0;background:#fff}
.yb-video__box{
  max-width:900px;margin-inline:auto;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:#000;
}
.yb-video__box video{display:block;width:100%;height:auto}
.yb-video__note{
  max-width:900px;margin:14px auto 0;
  font-size:12.5px;color:var(--muted);text-align:center;
}

/* 導入業種 */
.yb-industry{padding-block:var(--sec-y);background:var(--bg-alt)}
.tag-list{display:flex;flex-wrap:wrap;gap:10px}
.tag-list li{
  padding:9px 18px;background:#fff;border:1px solid var(--line);
  border-radius:999px;font-size:13.5px;color:var(--ink);letter-spacing:.02em;
}

/* 料金プラン */
.yb-plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px)}
.yb-plan{
  display:flex;flex-direction:column;
  padding:clamp(28px,3.4vw,44px);background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
}
.yb-plan .en-label{display:block;margin-bottom:10px}
.yb-plan h3{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:.04em;margin-bottom:16px}
.yb-plan__amount{
  font-family:var(--f-en);font-size:clamp(30px,3.4vw,40px);font-weight:600;
  color:var(--ink);line-height:1.1;letter-spacing:.01em;
}
.yb-plan__amount .yen{font-size:.44em;font-weight:500;margin-left:3px}
.yb-plan__amount .from{font-size:.4em;font-weight:500;margin-left:4px;color:var(--muted)}
.yb-plan__note{font-size:12.5px;color:var(--muted);margin:8px 0 22px}
.yb-plan .dev-list{flex:1;margin:0 0 26px;padding-top:20px;border-top:1px solid var(--line)}
.yb-plan .dev-list strong{font-weight:700;color:var(--orange-d)}
.yb-plan .btn{width:100%}

@media (max-width:760px){
  .yb-plans{grid-template-columns:1fr}
}

/* 動画セクションの導入 */
.yb-video{padding-block:clamp(44px,5vw,72px) 0}
.yb-video__head{max-width:760px;margin:0 auto clamp(26px,3vw,38px);text-align:center}
.yb-video__head .en-label{display:block;margin-bottom:12px}
.yb-video__head h2{
  font-size:clamp(20px,2.1vw,26px);font-weight:700;color:var(--ink);
  letter-spacing:.05em;line-height:1.6;margin-bottom:16px;
}
.yb-video__head p{font-size:14.5px;line-height:2.05;color:var(--body)}

/* =============================================================
   32. 規程・方針ページ（情報セキュリティ基本方針 / プライバシーポリシー）
   ============================================================= */
.doc{max-width:860px}
.doc__lead{font-size:14.5px;line-height:2.15;color:var(--body);margin-bottom:clamp(32px,3.6vw,46px)}

.doc__badge{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:24px 28px;margin-bottom:clamp(30px,3.4vw,42px);
  background:var(--bg-alt);border-radius:var(--r);
}
.doc__badge img{width:88px;height:88px;flex:none}
.doc__badge h2{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.03em;margin-bottom:8px}
.doc__badge p{font-size:13px;line-height:1.95;color:var(--body)}

.doc__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,3vw,38px)}
.doc__list > li{padding-top:22px;border-top:1px solid var(--line)}
.doc__no{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--orange);margin-bottom:10px;
}
.doc__list h3{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:.04em;line-height:1.6;margin-bottom:14px}
.doc__list p{font-size:14px;line-height:2.15;color:var(--body);margin-bottom:1em}
.doc__list p:last-child{margin-bottom:0}
.doc__list .dev-list{margin:0 0 1.2em;padding-top:0;border-top:0}
.doc__list .dev-list li{font-size:13.5px}

.doc__block{margin-top:clamp(36px,4vw,52px);padding-top:26px;border-top:1px solid var(--line)}
.doc__block h2{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:.04em;margin-bottom:20px}
.doc__dl{display:grid;gap:0}
.doc__row{
  display:grid;grid-template-columns:180px 1fr;gap:20px;
  padding:15px 2px;border-bottom:1px solid var(--line-s);align-items:baseline;
}
.doc__row dt{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:.03em}
.doc__row dd{margin:0;font-size:13.5px;line-height:1.95;color:var(--body)}

.doc__contact{
  margin-top:16px;padding:20px 24px;
  background:var(--bg-alt);border-radius:var(--r);
}
.doc__contact p{font-size:13.5px;line-height:1.95;margin-bottom:.6em}
.doc__contact p:last-child{margin-bottom:0}
.doc__contact a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}

.doc__sign{
  margin-top:clamp(36px,4vw,52px);padding-top:24px;border-top:1px solid var(--line);
  font-size:13px;line-height:2;color:var(--muted);
}
.doc__sign-name{margin-top:12px;color:var(--ink);font-weight:700;line-height:1.9}

@media (max-width:640px){
  .doc__row{grid-template-columns:1fr;gap:4px}
  .doc__badge{gap:16px;padding:20px}
  .doc__badge img{width:68px;height:68px}
}

/* お問い合わせサイドのリンク */
.ct-blk .note a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.ct-blk .note a:hover{color:var(--orange-d)}