@charset "UTF-8";
/* =========================================================================
   page-company.css  ―  会社概要ページ（メリハリ版 2026-08-04）
   読み込み順は style.css → common.css → このファイル。
   common.css 側の html body 付き指定を上書きする必要がある箇所だけ、
   こちらも html body を付けている。
   ページ固有の指定のみ。ヘッダー／パンくず／フッターは従来のまま末尾に引き継ぎ。
   ========================================================================= */

:root{
  --navy:#082848;--navy-deep:#04172A;--royal:#1848D8;--cyan:#13AECF;--sky:#7FB4F2;
  --ice-soft:#E8EEF7;--bg:#FBFCFE;--bg-soft:#F3F5FB;
  --text:#0a1a2c;--text-mid:#33475e;--text-mute:#5a6b80;
  --line:rgba(8,40,72,.11);--line-strong:rgba(8,40,72,.13);--line-on-dark:rgba(255,255,255,.14);
  --slant:-22deg;
  --ff:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --measure:544px;            /* 本文の版面幅。右端をそろえるため全段落で共通 */
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--ff);color:var(--text);background:var(--bg);font-size:15px;line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,40px);position:relative;z-index:5;}
section{position:relative;}

/* ---- 和文の折り返し ---------------------------------------------------- */
/* 文節で折る・禁則を厳密に。span.ph は「ここでしか折らない」単位。 */
.ph{display:inline-block;}

/* ---- 共通パーツ -------------------------------------------------------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--royal),var(--cyan));z-index:300;transition:width .12s linear;pointer-events:none;}
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);}
.reveal.armed{opacity:0;transform:translateY(38px);filter:blur(6px);}
.reveal.in{opacity:1;transform:none;filter:blur(0);}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;filter:none!important;}}

.eyebrow{display:flex;align-items:center;gap:14px;font-size:11.5px;font-weight:700;letter-spacing:.3em;color:var(--royal);margin-bottom:22px;}
.eyebrow .rh{width:30px;height:11px;background:currentColor;transform:skewX(var(--slant));flex:none;}
html body h2.dh{font-size:clamp(27px,3.4vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--navy);}
html body .lead{margin-top:18px;font-size:16px;line-height:2;color:var(--text-mute);max-width:36em;}
.accent{color:var(--royal);}
.mk{background:linear-gradient(transparent 62%,rgba(19,174,207,.55) 62%);}

.draw-line{position:absolute;transform:rotate(-41deg);transform-origin:left center;display:flex;align-items:center;pointer-events:none;z-index:1;}
.draw-line .ln{display:block;height:var(--thick,5px);width:0;background:var(--dlc,var(--royal));border-radius:999px;transition:width 1.2s var(--ease);}
.draw-line .dot{flex:none;width:var(--thick,5px);height:var(--thick,5px);border-radius:50%;background:var(--dlc,var(--royal));margin-left:5px;opacity:0;transform:scale(0);transition:opacity .4s ease .9s,transform .5s var(--ease) .9s;}
.draw-line.in .ln{width:var(--len,300px);}
.draw-line.in .dot{opacity:1;transform:scale(1);}
@media(prefers-reduced-motion:reduce){.draw-line{display:none;}}
@media(max-width:760px){.draw-line{display:none;}}

/* ---- 面の切り替え（明→暗→明。上下の余白でリズムを付ける） -------------- */
html body .sec--msg{padding:clamp(76px,9.5vw,140px) 0 clamp(64px,8vw,112px);}
html body .sec--biz{padding:clamp(76px,9vw,124px) 0;}
html body .sec--str{background:var(--bg-soft);padding:clamp(64px,7.5vw,104px) 0;}
html body .sec--val{padding:clamp(84px,10vw,148px) 0;}
html body .sec--profile{background:var(--bg-soft);padding:clamp(56px,6.5vw,88px) 0;}
html body .sec--profile .wrap{max-width:1000px;}
.navy{position:relative;background:var(--navy);color:#fff;overflow:hidden;}
.navy .eyebrow{color:var(--cyan);}
html body .navy--mv{padding:clamp(104px,13.5vw,196px) 0;}

/* ---- HERO ------------------------------------------------------------- */
/* 上下の余白は共通CSS（clamp(120px,12.5vw,170px) / スマホ100px）に任せる。
   ここで指定すると、共通側より後に読まれるぶん強く効いてしまい、
   会社概要だけ見出しの位置が下がっていた。2026-08-07 */
html body .hero{background:var(--navy);color:#fff;overflow:hidden;}
.hero .eyebrow{color:var(--cyan);}  /* 下の間は共通の22pxに任せる 2026-08-07 */
/* 他ページのヒーロー見出し（40〜84px）に合わせる。
   ここだけ46〜112pxで、スマホで明らかに大きかった。2026-08-05 */
/* 大きさは共通CSSに任せる（スマホ24px／PCは clamp）。
   ここで html body 付きで指定すると共通側より強く効いてしまい、
   会社概要だけ見出しが38pxのまま大きく残っていた。2026-08-07 */
.hero h1{font-size:clamp(40px,6vw,84px);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:#fff;}
.hero-rule{height:4px;width:84px;background:var(--cyan);transform:skewX(var(--slant));margin:clamp(30px,3.4vw,46px) 0 22px;}
/* 他ページ（メンバー17px/34em、支援実績17px/36em）に合わせる。
   html body 付きだと共通より強く効いてしまうので、弱い指定にする。2026-08-07 */
.hero .sub{margin-top:24px;font-size:17px;line-height:1.9;color:rgba(255,255,255,.7);max-width:34em;}

/* ---- 代表メッセージ ---------------------------------------------------- */
/* 大（見出し）→中（導入文）→小（本文）→中（引用）→小 の起伏を付ける。 */
html body .sec--msg h2.dh{font-size:clamp(26px,3.9vw,54px);line-height:1.4;max-width:24em;}
.msg-grid{display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,72px);align-items:flex-start;margin-top:clamp(44px,5.5vw,76px);}
html body .portrait{flex:0 1 336px;min-width:260px;position:sticky;top:112px;aspect-ratio:auto;overflow:visible;background:transparent;}
.portrait .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ice-soft);}
html body .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.portrait .tag{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 18px;transform:skewX(var(--slant));transform-origin:left bottom;}
.portrait .tag>span{display:inline-block;transform:skewX(calc(var(--slant) * -1));}
.msg-col{flex:1 1 480px;min-width:300px;}
html body .sec--msg .msg-lead{font-size:19px;line-height:1.95;font-weight:500;color:var(--navy);margin-bottom:26px;max-width:var(--measure);text-align:left;}
.msg-body{display:flex;flex-direction:column;gap:20px;max-width:var(--measure);}
html body .msg-body>p,html body .msg-body>p:first-child{font-size:16px;line-height:2;font-weight:400;color:var(--text-mid);text-align:left;margin:0;}
html body .sec--msg .msg-quote{font-size:clamp(19px,2.1vw,27px);font-weight:700;line-height:1.75;letter-spacing:-.015em;color:var(--navy);max-width:var(--measure);text-align:left;margin:clamp(34px,3.8vw,50px) 0;}
.msg-em{font-weight:700;color:var(--navy);border-bottom:2px solid var(--royal);padding-bottom:2px;}
.sign{margin-top:clamp(32px,3.6vw,46px);font-size:14px;color:var(--text-mute);display:flex;align-items:baseline;gap:12px;}
.sign b{font-weight:800;color:var(--navy);font-size:22px;letter-spacing:.04em;}
/* 1列に切り替える境目は940px。
   写真336px＋間の余白＋本文の最小幅では、940pxを切ると2列に収まらない。
   860pxのままだと、860〜940pxの間で写真だけ横に残り、
   本文がその下へ回り込んで重なって見えていた。2026-08-07 */
@media(max-width:940px){
  html body .portrait{position:static;flex:1 1 100%;}
  .portrait .frame{aspect-ratio:3/2;}
  html body .portrait img{object-position:center 18%;}
}

/* ---- 写真帯（本文とVISIONの間の“抜き”） ------------------------------- */
.photo-band{width:100%;height:clamp(180px,23vw,330px);overflow:hidden;background:var(--ice-soft);}
.photo-band img{width:100%;height:100%;object-fit:cover;object-position:center 62%;}

/* ---- VISION / MISSION -------------------------------------------------- */
/* ページで最も強い面。VISIONを大きく、MISSIONは一段下げて対で見せる。 */
.navy--mv .eyebrow{margin-bottom:clamp(26px,3vw,40px);}
.mv-vision{font-size:clamp(27px,3.8vw,50px);font-weight:800;line-height:1.42;letter-spacing:-.028em;color:#fff;max-width:19em;}
.mv-vision .mk{background:linear-gradient(transparent 64%,rgba(19,174,207,.5) 64%);}
.mv-rule{height:1px;background:var(--line-on-dark);margin:clamp(40px,5vw,68px) 0;}
.mv-mission{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);align-items:flex-start;}
.mv-mission .eyebrow{flex:0 1 240px;margin:0;padding-top:8px;}
html body .mv-mission p{flex:1 1 460px;font-size:clamp(18px,2.1vw,28px);font-weight:700;line-height:1.75;color:rgba(255,255,255,.82);max-width:26em;}

/* ---- 事業概要 ---------------------------------------------------------- */
/* 2領域の間は1pxの区切り罫。狭い画面では縦積みになり、罫も横向きに変わる。 */
.biz2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line-strong);margin-top:clamp(38px,4.6vw,58px);}
.biz2-card{background:var(--bg);border-top:1px solid var(--navy);padding:clamp(20px,2.4vw,28px) clamp(22px,2.8vw,40px) clamp(20px,2.4vw,30px) 0;}
.biz2-card+.biz2-card{padding:clamp(20px,2.4vw,28px) 0 clamp(20px,2.4vw,30px) clamp(22px,2.8vw,40px);}
.biz2-card .tag{display:flex;align-items:baseline;gap:16px;margin-bottom:6px;}
.biz2-card .tag .no{font-size:clamp(38px,4.8vw,68px);font-weight:800;line-height:.9;letter-spacing:-.04em;color:var(--royal);}
.biz2-card .tag .en{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--text-mute);}
.biz2-card h3{font-size:clamp(21px,2.5vw,30px);font-weight:800;color:var(--navy);letter-spacing:-.02em;margin:14px 0 18px;}
.biz2-card ul{list-style:none;display:flex;flex-direction:column;}
html body .biz2-card li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.8;color:var(--text-mid);}
.biz2-card li::before{content:'';flex:none;width:9px;height:9px;margin-top:8px;background:var(--cyan);}
@media(max-width:700px){
  .biz2-card,.biz2-card+.biz2-card{padding-left:0;padding-right:0;}
}

/* ---- STRENGTH ---------------------------------------------------------- */
/* 01〜03は手順として横に並べ、それらを統合する04だけネイビーの帯で独立させる。 */
.str-head .eyebrow{margin-bottom:18px;}
.str-head h2{font-size:clamp(22px,2.6vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.35;color:var(--navy);}
.str-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(34px,4vw,52px);}
.str{background:#fff;padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,32px);}
.str .no{display:block;font-size:clamp(34px,4.2vw,58px);font-weight:800;line-height:.85;letter-spacing:-.04em;color:var(--royal);}
.str h4,.str h3{font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.6;margin:clamp(18px,2vw,26px) 0 12px;}
html body .str p{font-size:13.5px;line-height:1.9;color:var(--text-mute);}
.str-sum{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,44px);background:var(--navy);color:#fff;padding:clamp(26px,3vw,40px) clamp(24px,3vw,44px);}
.str-sum .no{flex:none;font-size:clamp(34px,4.2vw,58px);font-weight:800;line-height:.85;letter-spacing:-.04em;color:var(--cyan);}
.str-sum h4,.str-sum h3{font-size:clamp(18px,2vw,25px);font-weight:800;letter-spacing:-.02em;line-height:1.5;color:#fff;}
html body .str-sum p{flex:1 1 320px;font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.74);max-width:34em;}

/* ---- 行動指針 ---------------------------------------------------------- */
/* 4行の帯。見出し列を310pxで固定し、どの行も同じ位置から説明文が始まる。 */
.val-head{margin-bottom:clamp(34px,4vw,56px);}
.val-row{display:flex;flex-wrap:wrap;gap:clamp(14px,2.2vw,34px);align-items:flex-start;padding:clamp(26px,3vw,38px) 0;border-top:1px solid rgba(8,40,72,.12);}
.val-row:last-of-type{border-bottom:1px solid rgba(8,40,72,.12);}
.val-row .no{flex:none;width:clamp(64px,7vw,116px);font-size:clamp(38px,5.2vw,78px);font-weight:800;line-height:.85;letter-spacing:-.04em;color:var(--royal);}
.val-row h3{flex:1 1 230px;max-width:310px;font-size:clamp(19px,2.2vw,28px);font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.45;}
.val-row h3 .en{display:block;font-size:.5em;font-weight:700;letter-spacing:.1em;color:var(--text-mute);margin-top:8px;}
html body .val-row p{flex:1 1 300px;font-size:14.5px;line-height:1.95;color:var(--text-mute);max-width:32em;}

/* ---- 会社情報（最も静かな面） ------------------------------------------ */
.profile-split{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:flex-start;}
.profile-split .head{flex:0 1 200px;}
.profile-split .head .eyebrow{margin-bottom:14px;}
.profile-split .head h2{font-size:clamp(20px,2.1vw,26px);font-weight:800;letter-spacing:-.02em;color:var(--navy);}
.profile{flex:1 1 460px;margin:0;}
.prow{display:flex;flex-wrap:wrap;gap:6px 28px;padding:16px 0;border-bottom:1px solid var(--line);}
.prow dt{flex:0 0 132px;font-size:13px;font-weight:700;color:var(--navy);line-height:1.8;}
.prow dd{flex:1 1 240px;margin:0;font-size:14px;line-height:1.8;color:var(--text-mute);}

/* =========================================================================
   以下、ヘッダー／ドロワー／パンくず／フッターは従来のまま（変更なし）
   ========================================================================= */
/* ===== inline static header (no dc-import — paints with page) ===== */
    .gpnav{position:fixed;top:16px;left:0;right:0;z-index:200;display:flex;justify-content:center;padding:0 16px;font-family:var(--ff);}
    .gpnav .bar{display:flex;align-items:center;gap:clamp(14px,2vw,30px);background:rgba(255,255,255,.97);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border:1px solid rgba(255,255,255,.6);box-shadow:0 14px 38px rgba(15,42,74,.16),inset 0 1px 0 rgba(255,255,255,.7);border-radius:9999px;padding:11px 14px 11px 26px;max-width:1180px;width:100%;}
    .gpnav .lg{display:flex;align-items:center;flex:none;margin-right:auto;}
    .gpnav .lg img{height:60px;width:auto;display:block;}
    .gpnav .menu{display:flex;align-items:center;gap:clamp(14px,2vw,26px);}
    .gpnav .menu>a,.gpnav .dd>a{font-size:14px;font-weight:500;color:#082848;white-space:nowrap;transition:color .2s;display:inline-flex;align-items:center;gap:5px;}
    .gpnav .menu a:hover,.gpnav .dd:hover>a{color:#1848D8;}
    .gpnav a.active{color:#1848D8;font-weight:700;}
    .gpnav .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .25s;}
    .gpnav .dd{position:relative;display:flex;align-items:center;height:44px;}
    .gpnav .dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;}
    .gpnav .dd .panel{display:flex;flex-direction:column;gap:2px;position:absolute;top:48px;left:50%;transform:translateX(-50%) translateY(8px);min-width:260px;background:#fff;border:1px solid rgba(15,42,74,.1);border-radius:16px;box-shadow:0 18px 44px rgba(15,42,74,.16);padding:10px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;}
    .gpnav .dd:hover .panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
    .gpnav .dd:hover .caret{transform:rotate(225deg);}
    .gpnav .panel a{display:flex;flex-direction:column;gap:3px;padding:12px 15px;border-radius:10px;transition:background .2s;}
    .gpnav .panel a:hover{background:#DCEEFE;}
    .gpnav .panel .en{font-size:11px;font-weight:700;letter-spacing:.1em;color:#1848D8;}
    .gpnav .panel .lb{font-size:14.5px;font-weight:600;color:#082848;}
    .gpnav .cta{display:inline-flex;align-items:center;gap:9px;background:#082848;color:#fff;font-size:14px;font-weight:600;padding:9px 10px 9px 18px;border-radius:9999px;white-space:nowrap;flex:none;transition:background .25s;}
    .gpnav .cta:hover{background:#1848D8;}
    .gpnav .cta .c{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#082848;font-size:13px;}
    .gpnav .menu>a.cta{color:#fff;}
    .gpnav .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:11px;}
    .gpnav .burger span{display:block;height:2px;width:100%;background:#082848;border-radius:2px;transition:transform .28s,opacity .2s;}
    #gpdrawer{position:absolute;opacity:0;pointer-events:none;}
    .gpdrawer{position:fixed;top:84px;left:12px;right:12px;bottom:12px;z-index:199;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(15,42,74,.22);overflow-y:auto;padding:18px clamp(20px,5vw,28px) 28px;display:none;}
    #gpdrawer:checked ~ .gpdrawer{display:block;}
    #gpdrawer:checked ~ .gpnav .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    #gpdrawer:checked ~ .gpnav .burger span:nth-child(2){opacity:0;}
    #gpdrawer:checked ~ .gpnav .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .gpdrawer a{display:block;font-size:16px;font-weight:600;color:#082848;text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(15,42,74,.06);}
    .gpdrawer .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;color:#1848D8;margin:18px 0 4px;}
    .gpdrawer .cta{display:flex;align-items:center;justify-content:center;gap:8px;background:#082848;color:#fff;font-size:16px;font-weight:600;text-decoration:none;padding:16px;border-radius:9999px;margin-top:22px;border:none;}
    @media(max-width:980px){.gpnav .menu{display:none;}.gpnav .burger{display:flex;}}
    @media(min-width:981px){.gpnav .burger{display:none;}.gpdrawer{display:none!important;}}

  
  
    /* breadcrumbs (page end, above footer) */
    .crumbs{background:var(--bg);border-top:1px solid var(--line);}
    .crumbs .cwrap{max-width:1100px;margin:0 auto;padding:20px clamp(20px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12.5px;color:var(--text-mute);}
    .crumbs a{color:var(--text-mute);transition:color .2s;}
    .crumbs a:hover{color:var(--royal);}
    .crumbs .sep{opacity:.45;}
    .crumbs .cur{color:var(--navy);font-weight:600;}
  
    .f-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(32px,5vw,64px);align-items:start;}
    .f-grid nav a{transition:color .28s cubic-bezier(.22,1,.36,1);}
    .f-grid nav a:hover{color:#fff;}
    @media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr;}}
    @media(max-width:520px){.f-grid{grid-template-columns:1fr;}}


/* 引き渡し前の手直し 2026-08-05
   日本語で両端揃えにすると、行ごとに字間が伸び縮みして読みにくい。
   左揃えに統一する。 */
html body .sec--msg .msg-lead,
html body .sec--msg .msg-quote,
html body .msg-col p{ text-align:left; }

/* 両端揃えは取り消しました。2026-08-07
   カタカナを割らない指定（.nbk）と組み合わさると、
   折り返せない塊のぶん行の残りが引き伸ばされ、
   「大 き な 可 能 性 を」のように字間が大きく開いてしまうためです。
   右端は多少ガタつきますが、字間が開くより読みやすいと判断しました。 */
html body .msg-body>p,
html body .msg-body>p:first-child{
  text-align:left;
}