/* ===== ヒーローより下の節（トップ）=====
 * カードは使わない。区切りは罫線と余白だけ。
 * 色はヒーローの2面を受け継ぐ：営業＝緑の面、IT＝白の面。お問い合わせは緑で締める。
 */
:root{--white:#ffffff;--line:#d5e2db;--line-on-green:rgba(255,255,255,.32);
  --gap:clamp(20px,2vw,40px);--measure:40em;--ease-out:cubic-bezier(.2,.7,.2,1)}
.wrap{width:min(100% - var(--pad) * 2,1560px);margin-inline:auto}
:root{--sec-pad:clamp(56px,6.4vw,128px)}
.sec{padding:var(--sec-pad) 0}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) clamp(32px,5vw,120px);align-items:start}
.two--wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
p{text-wrap:pretty}
/* iPhone の Safari は pretty を「段落全体の行をそろえる」と解釈し、手前で折って右に空白を残すため、文節の折り返し（auto-phrase）に対応していないブラウザでは外す（Chrome 系はそのまま） */
@supports not (word-break:auto-phrase){p{text-wrap:wrap}}
.nw{white-space:nowrap}
/* スクロールで立ち上がる：ヒーローの見出しと同じ曲線 */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out) var(--d,0ms),transform .9s var(--ease-out) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.ib{display:inline-block;max-width:100%}   /* 箱が画面幅より長いときだけ中で折る（320px で見出しが欠けていた・2026-10-07） */                         /* 見出しの意味の区切り。区切りの中で折るのは幅が足りないときだけ */

/* 見出し：日本語のみ。大きさは幅に合わせて伸ばす（全画面で縮こまらない） */
.h2{margin:0;font-size:clamp(26px,2.5vw,44px);font-weight:700;line-height:1.4;letter-spacing:.02em}
@media(max-width:340px){.h2{font-size:22px}}   /* 320px 級の画面では 26px だと12字の箱が入らず、最後の1字だけが次の行に落ちていた（2026-10-07） */
.h2--xl{font-size:clamp(44px,5.6vw,120px);line-height:1.1}
.h2--sm{font-size:clamp(22px,1.7vw,34px)}
.h3{margin:0;font-size:clamp(18px,1.25vw,26px);font-weight:700}
.intro{margin:0;max-width:var(--measure);font-size:clamp(16px,1.1vw,22px);line-height:1.9}
.dept{margin:0 0 clamp(12px,1.2vw,20px);font-size:clamp(13px,.8vw,16px);font-weight:500;letter-spacing:.08em;opacity:.8}

/* リンク・ボタン（状態は hover / active / focus-visible まで書く） */
.more{display:inline-block;white-space:nowrap;font-size:clamp(14px,.85vw,17px);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;transition:opacity .2s var(--ease-out)}
.more:hover{opacity:.7}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 40px;border:0;border-radius:2px;
  font:inherit;font-size:clamp(15px,.95vw,18px);font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease-out),background .2s var(--ease-out)}
.btn--light{background:var(--white);color:var(--green)}
.btn--light:hover{background:#e9f6ef}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.more:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #9fe3c0;outline-offset:3px}

/* 行の一覧（困りごと・メディア）：上の罫線で区切る */
.rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.rows li{padding:clamp(20px,1.8vw,32px) 0;border-top:1px solid var(--line)}
.rows h3{margin:0;font-size:clamp(18px,1.3vw,26px);font-weight:700}
.rows p{margin:8px 0 0;color:var(--sub);font-size:clamp(15px,.95vw,19px);line-height:1.8}

/* 営業代行をご活用いただける場面：見出しは全幅、項目は2×2 */
.issues{background:var(--white)}
.rows--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,96px);margin-top:clamp(28px,3vw,56px);border-bottom:0}
.rows--grid li{border-bottom:1px solid var(--line)}
.rows--grid li:nth-child(n+3){border-top:0}

/* 営業代行（緑の面） */
.sales{background:var(--green);color:var(--on-green)}
.sales .two{align-items:end}
.sales .consult{align-items:start}               /* 小見出しと本文の上端を揃える */
.steps-lead{margin:12px 0 0;font-size:clamp(15px,.95vw,19px);line-height:1.8;opacity:.9}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(36px,3.6vw,72px) 0 0;border-top:1px solid var(--line-on-green);border-bottom:1px solid var(--line-on-green)}
.facts div{padding:clamp(20px,2vw,36px) clamp(16px,2vw,40px)}
.facts div + div{border-left:1px solid var(--line-on-green)}
.facts div:first-child{padding-left:0}
.facts dt{font-size:clamp(13px,.85vw,16px);font-weight:500;opacity:.85}
.facts dd{margin:6px 0 0;font-size:clamp(36px,3.6vw,76px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.facts small{margin-left:.15em;font-size:.4em;font-weight:700}
.sales > .wrap > .h3{margin-top:clamp(40px,4.4vw,88px)}
/* 工程：番号の下に罫線、その下に小見出し */
.steps{list-style:none;margin:clamp(20px,2vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,1.6vw,32px)}
.steps .no{display:block;padding-bottom:12px;border-bottom:1px solid var(--line-on-green);font-size:clamp(14px,.9vw,18px);font-weight:700;font-variant-numeric:tabular-nums;opacity:.85}
.steps h4{margin:16px 0 0;font-size:clamp(16px,1.05vw,21px);line-height:1.5}
.steps p{margin:8px 0 0;font-size:clamp(14.4px,.85vw,17px);line-height:1.8;opacity:.9}
/* 5列のとき：見出しが2行になる列があっても、説明文の始まる高さを5列でそろえる（行を親の格子に合わせる） */
/* 1280px未満では列が狭く、列ごとに行数がばらつくため、5列にせず1列で並べる */
@media (max-width:1279px){ .steps{grid-template-columns:minmax(0,1fr);gap:28px} }
@media (min-width:1280px){
  .steps{grid-template-rows:auto auto auto;row-gap:0}
  .steps li{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
}
.consult{margin-top:clamp(40px,4.4vw,88px);padding-top:clamp(24px,2.4vw,40px);border-top:1px solid var(--line-on-green)}
.consult p{margin:0;max-width:var(--measure);font-size:clamp(15px,.95vw,19px);line-height:1.9}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;margin-top:clamp(40px,4vw,72px)}

/* 自社で開発している理由 */
.why{background:var(--white)}
.why .body p{margin:0;max-width:var(--measure);font-size:clamp(16px,1.05vw,21px);line-height:1.95}
.why .body p + p{margin-top:1.2em}

/* IT部門（白の面） */
.it{background:var(--paper);--cols:minmax(0,5fr) minmax(0,6fr) minmax(0,3fr)}   /* 行ごとに列の幅が変わらないよう固定 */
.it .h2{margin-bottom:clamp(32px,3.6vw,64px)}
.svc{display:grid;grid-template-columns:var(--cols);gap:var(--gap) clamp(32px,4vw,96px);align-items:baseline;
  padding:clamp(28px,2.6vw,48px) 0;border-top:1px solid var(--line)}
.svc + .svc{border-bottom:1px solid var(--line)}
.svc__name h3{margin:0;font-size:clamp(22px,1.9vw,40px);font-weight:700;line-height:1.2;white-space:nowrap}   /* 「業務改善コンサルティング」を名前の途中で折らない。列幅から逆算した上限 */
.svc__name p{margin:8px 0 0;color:var(--sub);font-size:clamp(14px,.85vw,17px);font-weight:500}
.svc__desc{margin:0;max-width:var(--measure);color:var(--sub);font-size:clamp(15px,.95vw,19px);line-height:1.9}
.others-h{margin-top:clamp(48px,5vw,96px)}
.others{list-style:none;margin:clamp(16px,1.6vw,24px) 0 0;padding:0;border-bottom:1px solid var(--line)}
.others li{display:grid;grid-template-columns:var(--cols);gap:8px clamp(32px,4vw,96px);align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.others b{font-size:clamp(15px,.95vw,19px)}
.others span{color:var(--sub);font-size:clamp(14.4px,.9vw,18px);line-height:1.8}
.svc .more,.others .more{justify-self:end}

/* メディア */
.media{background:var(--white)}
.rows--link a{display:grid;gap:6px;text-decoration:none}
.rows--link .src{font-weight:700;font-size:clamp(16px,1.05vw,21px)}
.rows--link span:last-child{color:var(--sub);font-size:clamp(15px,.95vw,19px);line-height:1.8}
.rows--link a:hover .src{text-decoration:underline;text-underline-offset:4px}

/* 代表メッセージと会社情報：左のメッセージは緑の面（白い文字）、右の会社情報は白の面 */
.company{background:#eaf5ef;--pl:var(--green)}   /* 会社情報の側は薄い緑。メッセージの緑の面と見分けがつくように */
/* 代表メッセージの面は、下のお問い合わせ（--green）と続いて見えないよう色を変える（2026-10-05 本人：案a 深い緑） */
.company{--pl:var(--msg-bg,#05603c)}
.company .plane{display:block}                  /* 背景の案に関係なく、この節は常に2面 */
.message{color:var(--msg-fg,var(--on-green));padding-right:clamp(0px,2vw,40px)}
.message .dept{opacity:.85}
.statement{margin:0;font-size:clamp(22px,1.8vw,36px);font-weight:700;line-height:1.6;letter-spacing:.02em}
.message__body{margin:clamp(24px,2.4vw,40px) 0 0;padding-top:clamp(20px,2vw,32px);border-top:1px solid var(--line-on-green);
  font-size:clamp(15px,.95vw,19px);line-height:1.95;opacity:.92}
.message .sign{margin:20px 0 0;text-align:right;font-size:clamp(14px,.85vw,17px);opacity:.85}
.message .sign span{margin-left:1em;font-size:1.3em;font-weight:700}
.company .h2{margin-bottom:clamp(16px,1.6vw,28px)}
.info{margin:0;border-bottom:1px solid var(--line)}
.info div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.info dt{color:var(--sub);font-size:clamp(14.4px,.9vw,17px)}
.info .biz-list span{display:inline-block}       /* 事業ごとにひとかたまり。区切りの「／」以外で折らない */
.info dd{margin:0;font-size:clamp(14.4px,.9vw,17px);line-height:1.8}

/* お問い合わせ（緑の面） */
.contact,.sec--green{background:var(--green);color:var(--on-green)}
.contact .intro{margin-top:20px}
.contact .note{margin:16px 0 0;font-size:clamp(14px,.85vw,17px);opacity:.85}
.form{display:grid;gap:20px}
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.form label{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:clamp(14.4px,.85vw,17px);font-weight:500}
.form label > input,.form label > textarea{flex:0 0 100%}
.form .req{font-size:13px;opacity:.85}
.form input,.form textarea{width:100%;padding:14px 16px;border:1px solid transparent;border-radius:2px;background:var(--white);color:var(--ink);font:inherit;font-size:16px}
.form textarea{resize:vertical}
.form .btn{justify-self:start;margin-top:8px}
.hp{position:absolute;left:-9999px}
.form__status{margin:0;min-height:1.5em}

/* フッター：ロゴ＋メニューと、コピーライトの2段だけ（会社の住所は会社情報にあるので繰り返さない） */
.foot{padding:clamp(36px,3.6vw,56px) 0 28px;background:var(--white);border-top:1px solid var(--line);color:var(--ink)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.foot__logo{display:block;width:108px;line-height:0}
.foot__logo img{width:100%;height:auto}       /* ロゴは元の画像の色のまま（塗り替えない） */
.foot__nav{display:flex;flex-wrap:wrap;gap:10px 32px;font-size:14.4px;font-weight:500}
.foot__nav a{text-decoration:none;white-space:nowrap}
.foot__nav a:hover{color:var(--green)}
.foot__sub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--sub);font-size:13px}
.foot__sub a{text-decoration:none}
.foot__sub a:hover{text-decoration:underline}

@media (max-width:860px){
  .two,.two--wide{grid-template-columns:minmax(0,1fr)}
  .rows--grid{grid-template-columns:minmax(0,1fr)}
  .rows--grid li:nth-child(n+2){border-top:0}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts div{padding:18px 0}
  .facts div + div{border-left:0;border-top:1px solid var(--line-on-green)}
  .facts dd{font-size:44px}
  .steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .svc,.others li{grid-template-columns:minmax(0,1fr);gap:10px}
  .svc .more,.others .more{justify-self:start}
  .f2{grid-template-columns:minmax(0,1fr)}
  .info div{grid-template-columns:6em minmax(0,1fr)}
}

/* ===== 背景（面が走る＋方眼。2026-10-06 確定）=====
 * 「攻」「築」はヒーローだけで使う（セクションで使うとうるさい：2026-10-05 本人）。
 * 3案共通：緑の面は右上から薄く光を当てて、平らに見せない（Caltiva LP の決めごと）。
 */
.sec{position:relative;overflow:hidden;isolation:isolate}
.sec > .wrap{position:relative;z-index:1}
.sales,.contact,.sec--green{background:radial-gradient(ellipse 70% 80% at 100% 0%,rgba(255,255,255,.13),rgba(255,255,255,0) 70%),var(--green)}

/* 案1 面が走る：ヒーローの「2面に割る」を各節で小さく繰り返す。節が画面に入ると、面が左から走って列の間で止まる */
.plane{display:none;position:absolute;z-index:0;top:0;bottom:0;left:0;background:var(--pl);
  transform:scaleX(0);transform-origin:left;transition:transform 1.15s cubic-bezier(.77,0,.18,1)}
.bg-1 .plane{display:block}
.seen > .plane{transform:none}
.why{--pl:#eaf5ef}   /* 「ご活用いただけます」の節は左右で色を分けない（2026-10-05 本人） */

/* 模様＝方眼（辺を薄く）で確定（2026-10-06 本人。回路・等高線・十字・方眼は外した）。右上を濃く、左下にもそれより薄く入れ、文字の後ろ（中央）は薄れさせる。
 * 面（案1）より上に重ねる（面は不透明なので、下に置くと面の部分だけ模様が消える） */
.bg-2 .sec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--pat);background-size:var(--pat-size);background-position:var(--pat-pos,-1px -1px);background-repeat:var(--pat-rep,repeat);
  --m:radial-gradient(ellipse 80% 90% at 100% 0%,#000 10%,transparent 75%),radial-gradient(ellipse 60% 70% at 0% 100%,rgba(0,0,0,.5) 5%,transparent 70%);
  -webkit-mask-image:var(--m);mask-image:var(--m)}
/* 方眼（辺を薄く）：交点に近いほど濃く、辺の真ん中は極めて薄い */
.p-soft .sec{--pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2256%22%20height%3D%2256%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22h%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2256%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.22%22/%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.025%22/%3E%0A%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.025%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.22%22/%3E%3C/linearGradient%3E%0A%3ClinearGradient%20id%3D%22v%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2256%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.22%22/%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.025%22/%3E%0A%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.025%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.22%22/%3E%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2256%22%20height%3D%221%22%20fill%3D%22url%28%23h%29%22/%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2256%22%20fill%3D%22url%28%23v%29%22/%3E%3C/svg%3E");--pat-size:56px 56px;--pat-pos:0 0}
.p-soft :is(.sales,.contact,.sec--green){--pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2256%22%20height%3D%2256%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22h%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2256%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.24%22/%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.03%22/%3E%0A%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.03%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.24%22/%3E%3C/linearGradient%3E%0A%3ClinearGradient%20id%3D%22v%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2256%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.24%22/%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.03%22/%3E%0A%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.03%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.24%22/%3E%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2256%22%20height%3D%221%22%20fill%3D%22url%28%23h%29%22/%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2256%22%20fill%3D%22url%28%23v%29%22/%3E%3C/svg%3E")}


@media (max-width:860px){
  .bg-1 .plane,.company .plane{display:none}
  .message{margin:calc(var(--sec-pad) * -1) calc(var(--pad) * -1) 0;padding:var(--sec-pad) var(--pad) 48px;background:var(--pl)}
  .company .two > :last-child{padding-top:28px}
  .bg-1 .why{background:#eaf5ef}
}
@media (prefers-reduced-motion:reduce){ .plane{transition:none;transform:none} }

/* 送信後の完了表示（トップのお問い合わせ。下層ページは sub.css にも同じ指定がある） */
.form-success{padding-top:8px}
.form-success h3{margin:0;font-size:clamp(20px,1.5vw,28px)}
.form-success p{margin:12px 0 0;font-size:clamp(15px,.95vw,19px);line-height:1.8}