@charset "utf-8";
/* =========================================================
   Comtri Corporate — front-2026.css（トップページ専用・2026リニューアル）
   白 × ブルー(#0A85FA) × ディープネイビー(#02214F)
   フラット / スクエア / 罫線とナンバリングで構成する
   ========================================================= */

:root{
  color-scheme:only light;

  /* --- surface --- */
  --white:#FFFFFF;
  --paper:#FDFDFE;
  --ice:#F2F7FC;
  --ice-2:#E7F0F9;

  /* --- ink --- */
  --navy:#02214F;          /* 面（ダークバンド・フッター・ボタン） */
  --navy-2:#062C63;        /* 面のグラデ先 */
  --ink:#0A2350;           /* 見出し */
  --text:#16304F;          /* 本文 */
  --muted:#5D7186;         /* 補助 */

  /* --- accent --- */
  --blue:#0A85FA;          /* キーカラー */
  --blue-lt:#2D9BFE;       /* ラベル・細字 */
  --blue-deep:#0A5FCB;     /* hover */

  /* --- line --- */
  --line:#D9E2EC;
  --line-2:#EAF0F6;
  --line-w:rgba(255,255,255,.22);

  /* --- type --- */
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Meiryo",sans-serif;
  --latin:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --hand:"Klee One","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;

  /* --- metrics --- */
  --wrap:1220px;
  --pad:clamp(20px,5vw,60px);
  --gap:clamp(28px,4vw,56px);
  --sec-y:clamp(64px,8vw,116px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}

.page{
  font-family:var(--sans);
  color:var(--text);
  background:var(--white);
  line-height:1.9;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  overflow-x:clip;
}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.page :where(a){color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* =========================================================
   共通パーツ
   ========================================================= */

/* --- セクションラベル（ABOUT US 等） --- */
.label{
  display:flex;align-items:center;gap:18px;
  font-family:var(--latin);font-weight:700;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);
  margin:0 0 clamp(18px,2.4vw,26px);
}
.label::after{
  content:"";flex:none;width:clamp(28px,4vw,46px);height:1px;
  background:currentColor;opacity:.55;
}
.label.is-plain::after{display:none}
.label.on-navy{color:#fff}
.label.on-navy::after{opacity:.4}

/* --- 見出し --- */
h1,h2,h3{margin:0;color:var(--ink);letter-spacing:.01em}
.h-lg{
  font-size:clamp(1.9rem,4.4vw,3.25rem);
  font-weight:800;line-height:1.3;
}
.h-md{
  font-size:clamp(1.55rem,3.3vw,2.5rem);
  font-weight:800;line-height:1.36;
}
.on-navy .h-lg,.on-navy .h-md,.sec-navy h2{color:#fff}

/* --- 本文 --- */
.lead{margin:0;font-size:clamp(.93rem,1.15vw,1.02rem);line-height:2.1;color:var(--text)}
.on-navy .lead{color:rgba(255,255,255,.82)}

/* --- ボタン --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.9em;
  padding:1.05em 2.1em;
  font-size:.92rem;font-weight:700;letter-spacing:.08em;
  border:1.5px solid transparent;
  transition:background .3s,color .3s,border-color .3s;
}
.btn .ar{flex:none;transition:transform .3s}
.btn:hover .ar{transform:translate(2px,-2px)}
.btn-fill{background:var(--navy);color:#fff}
.btn-fill:hover{background:var(--blue)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--blue);color:#fff}

/* --- テキストリンク（下線つき） --- */
.tlink{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.9rem;font-weight:700;letter-spacing:.06em;
  color:var(--blue);
  padding-bottom:.55em;border-bottom:1px solid currentColor;
  transition:color .3s,gap .3s;
}
.tlink:hover{color:var(--blue-deep);gap:1.1em}
.tlink .ar{flex:none}

/* --- 手書き風アクセント --- */
.hand{
  font-family:var(--hand);font-weight:400;
  line-height:1.75;letter-spacing:.04em;
  transform:rotate(-4deg);
  color:var(--ink);
}
.on-navy .hand,.sec-navy .hand{color:rgba(255,255,255,.9)}

/* --- 画像プレースホルダ（写真差し替え待ち） --- */
.ph{
  position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(10,133,250,.09),rgba(2,33,79,.13)),
    repeating-linear-gradient(45deg,rgba(2,33,79,.04) 0 9px,transparent 9px 18px),
    var(--ice);
  display:grid;place-items:center;
}
.ph::after{
  content:attr(data-ph);
  font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:rgba(2,33,79,.42);text-align:center;line-height:2;
  padding:1.2em;max-width:88%;
}
.sec-navy .ph{background:
  linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05)),
  repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 9px,transparent 9px 18px),
  rgba(255,255,255,.06);}
.sec-navy .ph::after{color:rgba(255,255,255,.62)}

/* --- セクション枠 --- */
.sec{padding-block:var(--sec-y)}
.sec-tint{background:linear-gradient(180deg,var(--ice) 0%,#EDF4FB 100%)}
.sec-navy{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;
}
.sec-navy .lead,.sec-navy p{color:rgba(255,255,255,.82)}

/* --- スクロールイン --- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}
.rv.d2{transition-delay:.18s}
.rv.d3{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding-top:clamp(104px,11vw,140px);
  padding-bottom:clamp(48px,6vw,80px);
  background:
    radial-gradient(1000px 520px at 78% 8%,rgba(10,133,250,.07),transparent 62%),
    linear-gradient(180deg,#FBFCFE 0%,#FFFFFF 62%);
}
.hero-grid{
  display:grid;gap:clamp(30px,4vw,54px);
  grid-template-columns:1fr;
  align-items:center;
}
@media(min-width:980px){
  .hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(36px,4vw,64px)}
}

.hero h1{
  font-size:clamp(2.05rem,4.5vw,4.1rem);
  font-weight:800;line-height:1.24;letter-spacing:.005em;
  margin:0 0 clamp(20px,2.4vw,28px);
}
.hero h1 .hl{color:var(--blue)}
.hero .sub{
  margin:0 0 clamp(28px,3.4vw,38px);
  font-size:clamp(.96rem,1.3vw,1.1rem);
  font-weight:500;color:var(--text);line-height:2;
}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-cta .btn-line{background:#fff}
.hero-cta .btn-line:hover{background:var(--ink)}

.hero-stats{
  margin-top:clamp(32px,4vw,46px);
  padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line);
  display:flex;align-items:flex-start;
  gap:clamp(24px,4vw,52px);
}
.hero-stats .st{position:relative;padding-right:clamp(24px,4vw,52px)}
.hero-stats .st + .st{border-left:1px solid var(--line);padding-left:clamp(24px,4vw,52px)}
.hero-stats .n{
  display:flex;align-items:baseline;gap:.15em;
  font-family:var(--latin);font-weight:800;
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  line-height:1.1;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;
}
.hero-stats .n em{
  font-style:normal;font-family:var(--sans);
  font-size:.46em;font-weight:700;letter-spacing:.04em;
}
.hero-stats .t{
  margin:.5em 0 0;font-size:.78rem;font-weight:600;
  letter-spacing:.08em;color:var(--muted);
}

/* --- 写真コラージュ --- */
.hero-art{
  display:grid;gap:10px;
  grid-template-columns:1.32fr 1fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
  min-height:clamp(320px,42vw,520px);
}
.hero-art > *{min-height:0;min-width:0}
.hero-art .a1{grid-row:1 / span 2;position:relative}
.hero-art .a1 img,.hero-art .a2 img,.hero-art .a3 img{width:100%;height:100%;object-fit:cover}
.hero-art .a1 .ph,.hero-art .a2 .ph,.hero-art .a3 .ph{width:100%;height:100%}
.hero-quote{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,28px);
  background:linear-gradient(180deg,transparent,rgba(2,33,79,.82) 58%);
  color:#fff;
}
.hero-quote p{
  margin:0;font-size:clamp(.95rem,1.5vw,1.24rem);
  font-weight:700;line-height:1.65;letter-spacing:.04em;
  text-shadow:0 2px 14px rgba(2,33,79,.5);
}
.hero-quote .br{color:var(--blue);font-weight:800}

/* =========================================================
   ABOUT US
   ========================================================= */
.about-grid{
  display:grid;gap:clamp(26px,3.4vw,52px);
  grid-template-columns:1fr;align-items:start;
}
@media(min-width:900px){
  .about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.about h2{position:relative;display:inline-block}
.about h2 .br{color:var(--blue);font-weight:700}
.about-right{display:flex;flex-direction:column;gap:clamp(22px,3vw,32px);align-items:flex-start}
@media(min-width:900px){
  .about-right{padding-top:.6em}
  .about-right .tlink{align-self:flex-end}
}

/* =========================================================
   SERVICE
   ========================================================= */
.svc-grid{
  display:grid;gap:clamp(26px,3.4vw,48px);
  grid-template-columns:1fr;align-items:start;
}
@media(min-width:900px){
  .svc-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr)}
}

.svc-visual{position:relative;align-self:stretch}
.svc-visual .ph,.svc-visual img{width:100%;height:100%;min-height:clamp(260px,38vw,520px);object-fit:cover}
/* 1カラム時は縦長写真が伸び切らないよう高さを固定する */
@media(max-width:899px){
  .svc-visual .ph,.svc-visual img{height:clamp(280px,56vw,440px);min-height:0}
}
.svc-visual .cap{
  position:absolute;left:clamp(16px,2vw,24px);bottom:clamp(16px,2vw,24px);
  font-family:var(--latin);font-weight:700;
  font-size:.66rem;letter-spacing:.2em;line-height:2.1;
  color:#fff;text-shadow:0 1px 10px rgba(2,33,79,.6);
}

.svc-list{
  display:grid;gap:clamp(24px,3vw,40px) clamp(24px,3.4vw,52px);
  grid-template-columns:1fr;
}
@media(min-width:620px){.svc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

.svc-item{display:block;padding-top:2px}
.svc-num{
  display:flex;align-items:center;gap:12px;
  margin-bottom:.9em;
}
.svc-num::before{
  content:"";flex:none;width:11px;height:11px;background:var(--blue);
}
.svc-num i{
  font-style:normal;font-family:var(--latin);font-weight:700;
  font-size:.95rem;letter-spacing:.1em;color:var(--blue);
}
.svc-num::after{content:"";flex:1;height:1px;background:var(--line)}

.svc-item h3{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:800;line-height:1.5;
  margin-bottom:.7em;
  transition:color .3s;
}
.svc-item h3 .ar{flex:none;color:var(--ink);transition:transform .3s,color .3s}
.svc-item:hover h3{color:var(--blue)}
.svc-item:hover h3 .ar{color:var(--blue);transform:translateX(4px)}
.svc-item p{
  margin:0;font-size:.86rem;line-height:1.95;color:var(--muted);
}

/* =========================================================
   SERVICE MAP（帯）
   ========================================================= */
.smap{background:linear-gradient(90deg,var(--ice) 0%,#EDF4FB 55%,#E6EFF9 100%)}
.smap-inner{
  padding-block:clamp(22px,3vw,34px);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,2.2vw,30px);
}
.smap-head{flex:none;padding-right:clamp(14px,2.4vw,32px);border-right:1px solid var(--line)}
.smap-head .label{margin:0 0 .4em}
.smap-head p{margin:0;font-size:.8rem;font-weight:700;color:var(--ink);letter-spacing:.04em}

.smap-steps{
  flex:1;display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(10px,1.6vw,22px);
}
.smap-step{text-align:center;flex:1 1 auto;min-width:110px}
.smap-step b{
  display:block;font-size:clamp(.88rem,1.2vw,1rem);font-weight:800;
  color:var(--ink);line-height:1.5;
}
.smap-step span{
  display:block;margin-top:.3em;
  font-size:.7rem;color:var(--muted);letter-spacing:.03em;line-height:1.7;
}
.smap-arrow{flex:none;color:var(--blue);opacity:.7}
@media(max-width:860px){
  .smap-head{border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px;width:100%}
  .smap-arrow{display:none}
  .smap-steps{gap:16px}
  .smap-step{flex:1 1 42%;text-align:left}
}

/* =========================================================
   OUR STRENGTH（ネイビー帯）
   ========================================================= */
.str-top{
  display:grid;gap:clamp(24px,3vw,44px);
  grid-template-columns:1fr;align-items:center;
  margin-bottom:clamp(36px,5vw,64px);
}
@media(min-width:940px){
  .str-top{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
.str-top h2{
  font-size:clamp(1.8rem,4.2vw,3rem);
  font-weight:800;line-height:1.34;color:#fff;
}
.str-top h2 .qt{color:rgba(255,255,255,.55);font-weight:700}
.str-art{position:relative}
.str-art .ph,.str-art img{width:100%;aspect-ratio:16/9;object-fit:cover}
.str-art .hand{
  position:absolute;right:4px;bottom:-2.9em;
  font-size:clamp(.8rem,1.15vw,.95rem);text-align:right;
}

.str-grid{
  display:grid;gap:clamp(22px,3vw,0px);
  grid-template-columns:1fr;
}
@media(min-width:760px){
  .str-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .str-grid .str-item + .str-item{
    border-left:1px solid var(--line-w);
    padding-left:clamp(20px,3vw,44px);
  }
  .str-grid .str-item{padding-right:clamp(20px,3vw,44px)}
}
.str-item .svc-num::before{background:var(--blue)}
.str-item .svc-num i{color:#fff}
.str-item .svc-num::after{background:var(--line-w)}
.str-item h3{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:800;color:#fff;margin-bottom:.6em;line-height:1.5}
.str-item p{margin:0;font-size:.84rem;line-height:1.95;color:rgba(255,255,255,.72)}

/* =========================================================
   OUR MEDIA
   ========================================================= */
.media-grid{
  display:grid;gap:clamp(26px,3.4vw,48px);
  grid-template-columns:1fr;
}
@media(min-width:880px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.media-card{
  display:grid;gap:clamp(16px,2.2vw,28px);
  grid-template-columns:1fr;align-items:center;
}
@media(min-width:520px){.media-card{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}}
.media-card .shot{overflow:hidden}
.media-card .shot img,.media-card .shot .ph{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.media-card:hover .shot img{transform:scale(1.05)}
.media-card h3{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:800;margin-bottom:.6em}
.media-card p{margin:0 0 1.3em;font-size:.84rem;line-height:1.95;color:var(--muted)}

/* =========================================================
   代表ブログ
   ========================================================= */
.bl-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:clamp(24px,3vw,40px);
}
.bl-head .ttl .jp-label{
  display:block;margin-bottom:.7em;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--blue);
}
.bl-grid{
  display:grid;gap:clamp(26px,3.4vw,48px);
  grid-template-columns:1fr;align-items:start;
}
@media(min-width:900px){.bl-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}}

/* ピックアップ */
.bl-pick .thumb{position:relative;overflow:hidden}
.bl-pick .thumb img,.bl-pick .thumb .ph{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.bl-pick:hover .thumb img{transform:scale(1.04)}
.bl-pick .badge{
  position:absolute;left:0;bottom:0;
  background:var(--blue);color:#fff;
  padding:.62em 1.3em;
  font-family:var(--latin);font-weight:700;font-size:.68rem;letter-spacing:.2em;
}
.bl-pick time{
  display:block;margin:1.2em 0 .5em;
  font-family:var(--latin);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;color:var(--muted);
}
.bl-pick h3{
  font-size:clamp(1.1rem,1.8vw,1.42rem);font-weight:800;line-height:1.6;
  transition:color .3s;
}
.bl-pick:hover h3{color:var(--blue)}

/* リスト */
.bl-list{display:flex;flex-direction:column}
.bl-row{
  display:grid;grid-template-columns:clamp(88px,15vw,132px) minmax(0,1fr) auto;
  gap:clamp(14px,2vw,24px);align-items:center;
  padding-block:clamp(16px,2.2vw,24px);
  border-bottom:1px solid var(--line);
}
.bl-list .bl-row:first-child{padding-top:0}
.bl-row .thumb{overflow:hidden}
.bl-row .thumb img,.bl-row .thumb .ph{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.bl-row:hover .thumb img{transform:scale(1.05)}
.bl-row time{
  display:block;margin-bottom:.45em;
  font-family:var(--latin);font-size:.76rem;font-weight:600;
  letter-spacing:.1em;color:var(--muted);
}
.bl-row h3{font-size:clamp(.93rem,1.3vw,1.06rem);font-weight:800;line-height:1.6;transition:color .3s}
.bl-row:hover h3{color:var(--blue)}
.bl-row .ar{flex:none;color:var(--ink);transition:transform .3s,color .3s}
.bl-row:hover .ar{color:var(--blue);transform:translateX(4px)}
@media(max-width:560px){
  .bl-row{grid-template-columns:clamp(74px,22vw,100px) minmax(0,1fr)}
  .bl-row .ar{display:none}
}

/* =========================================================
   RECRUIT / PARTNER
   ========================================================= */
.recr-grid{
  display:grid;gap:clamp(26px,3.4vw,48px);
  grid-template-columns:1fr;align-items:center;
}
@media(min-width:900px){
  .recr-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
}
.recr-grid h2{margin-bottom:.7em}
.recr-grid .lead{margin-bottom:clamp(22px,3vw,32px)}
.recr-art{position:relative}
.recr-art img,.recr-art .ph{width:100%;aspect-ratio:16/8;object-fit:cover}
.recr-art .hand{
  position:absolute;right:clamp(14px,2.4vw,28px);top:clamp(14px,2.4vw,26px);
  font-size:clamp(.82rem,1.15vw,1rem);text-align:right;
  /* 写真の明暗に左右されないよう白抜き＋影で置く */
  color:#fff;text-shadow:0 1px 12px rgba(2,33,79,.75),0 0 3px rgba(2,33,79,.5);
}

/* =========================================================
   LET'S TALK
   ========================================================= */
.talk{position:relative;overflow:hidden;background:linear-gradient(120deg,#EEF5FC 0%,#F6FAFD 48%,#E9F2FB 100%)}
.talk-grid{
  position:relative;z-index:2;
  display:grid;gap:clamp(24px,3vw,44px);
  grid-template-columns:1fr;align-items:center;
}
@media(min-width:880px){
  .talk-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,auto)}
}
.talk h2{margin-bottom:.55em}
.talk .lead{margin:0}
.talk .deco{
  position:absolute;right:clamp(-6px,3vw,52px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:.06em;
  font-size:clamp(4.6rem,9vw,8.4rem);line-height:.72;font-weight:400;
  color:rgba(10,133,250,.16);
  pointer-events:none;user-select:none;z-index:1;
}
.talk .deco i{font-style:normal;display:block}
.talk .deco i:last-child{align-self:flex-end;transform:translateX(.42em)}
@media(max-width:880px){.talk .deco{display:none}}