@charset "UTF-8";
/* =========================================================
   プライムス トップページ リスタイル (2026-09-15)
   白ベース＋方眼紙グリッド / 六角形マスク / 青・コーラル・淡水色の3色
   ※ index.html 専用。style.css・mv.css の「後」に読み込む上書きレイヤー。
     下層ページと共有の style.css 本体は書き換えない。
   ========================================================= */

:root{
  --r-blue:#1f56cf;          /* メイン青（見出し・リンク） */
  --r-blue-d:#153a8f;        /* 濃青 */
  --r-navy:#122554;          /* フッター / 本文の濃色 */
  --r-ink:#1b2942;           /* 本文 */
  --r-coral:#e8604c;         /* アクセント（CTA） */
  --r-coral-d:#cf4835;
  --r-cyan:#a9d9ef;          /* 図形の欠片（淡水色） */
  --r-cyan-l:#daeef8;
  --r-grid:#dfe8f0;          /* 方眼紙の線 */
  --r-line:#d9e3ef;          /* 罫線 */
  --r-grad:linear-gradient(90deg,#3d7ae8 0%,#1f56cf 100%);
  --r-hex:polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
}

/* ---------- 方眼紙グリッド（32px） ---------- */
.r-grid{
  background-color:#fff;
  background-image:
    linear-gradient(var(--r-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--r-grid) 1px, transparent 1px);
  background-size:32px 32px;
  background-position:center top;
}
/* 少しだけ水色が差した方眼（News など） */
.r-grid--tint{
  background-color:#f6fafd;
}

/* ---------- 図形の欠片 / 線画アイコン ---------- */
.deco{position:absolute;z-index:0;pointer-events:none;display:block}
.deco--dot{border-radius:50%;background:var(--r-cyan)}
.deco--ring{border-radius:50%;border:2px solid var(--r-cyan);background:none}
.deco--ring-c{border-radius:50%;border:2px solid rgba(232,96,76,.55);background:none}
.deco--tri{
  width:0;height:0;background:none;
  border-left:14px solid transparent;border-right:14px solid transparent;
  border-bottom:24px solid var(--r-cyan);
}
.deco--tri-c{border-bottom-color:rgba(232,96,76,.65)}
.deco--hex{background:var(--r-cyan-l);clip-path:var(--r-hex)}
.deco--hex-c{background:rgba(232,96,76,.16)}
.deco--hexline{
  background:var(--r-cyan);clip-path:var(--r-hex);
  -webkit-mask:linear-gradient(#000,#000) content-box exclude, linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box exclude, linear-gradient(#000,#000);
  padding:3px;
}
.deco-icon{position:absolute;z-index:0;pointer-events:none;color:var(--r-blue);opacity:.09}
.deco-icon svg{display:block;width:100%;height:auto}

@media (prefers-reduced-motion:no-preference){
  .deco{animation:rFloat 9s ease-in-out infinite}
  .deco:nth-of-type(2n){animation-duration:11s;animation-delay:-2.5s}
  .deco:nth-of-type(3n){animation-duration:13s;animation-delay:-5s}
  @keyframes rFloat{
    0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
    50%{transform:translate3d(0,-14px,0) rotate(6deg)}
  }
}
@media (max-width:768px){
  .deco-icon{display:none}
  .deco{opacity:.7}
}

/* =========================================================
   HEADER
   ========================================================= */
.header{background:rgba(31,86,207,.82);border-color:rgba(255,255,255,.9)}
.btn-contact{
  background:linear-gradient(90deg,var(--r-coral) 0%,#f07a63 100%);
  box-shadow:0 4px 14px rgba(232,96,76,.38);
}
.btn-contact:hover{box-shadow:0 8px 22px rgba(232,96,76,.5)}
.gnav-dd a{color:var(--r-blue-d)}
.gnav-dd a:hover{background:var(--r-blue);color:#fff}
.gnav__dot,.drawer__dot{background:var(--r-coral)}
.drawer{background:linear-gradient(160deg,#3d7ae8 0%,#1f56cf 100%)}
.drawer__contact{background:var(--r-coral)}

/* =========================================================
   共通パーツ
   ========================================================= */
.en-head__a,.en-head--blue,.en-head--bw .en-head__a,.en-head.en-head--bw{
  background:var(--r-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.en-head__b{color:rgba(31,86,207,.18)}

/* more-btn: 白地・青枠・青文字（方眼の上で締まる） */
.more-btn{
  border:1.5px solid var(--r-blue);
  background:#fff;color:var(--r-blue);
  font-weight:700;
}
.more-btn__arw{background:var(--r-blue)}
.more-btn:hover{background:var(--r-blue);color:#fff;border-color:var(--r-blue)}
.more-btn:hover .more-btn__arw{background:#fff}
.more-btn:hover .more-btn__arw svg path{stroke:var(--r-blue)}

/* =========================================================
   MV → About への遷移（白へ着地）
   ※ mv.js のロジックは触らず、色だけ差し替え
   ========================================================= */
.mvx__fill{
  background:linear-gradient(180deg,
    rgba(31,86,207,.92) 0%,
    rgba(94,143,225,.85) 34%,
    rgba(214,229,246,.95) 68%,
    #ffffff 100%);
}

/* =========================================================
   ABOUT  白＋方眼
   ========================================================= */
.about--land{
  background-color:#fff;
  background-image:
    linear-gradient(var(--r-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--r-grid) 1px, transparent 1px);
  background-size:32px 32px;
  padding-top:clamp(130px,20vh,240px);
  padding-bottom:150px;
  overflow:hidden;
}
.about--land::before{display:none}          /* 濃紺グラデを撤去 */
.about--land .about__label{color:var(--r-coral);font-weight:700;letter-spacing:.06em}
.about--land .about__title{color:var(--r-navy)}
.about--land .about__text{color:var(--r-ink)}
.about--land .en-head__b{color:rgba(31,86,207,.18)}
.about--land .more-btn{background:#fff}
.about--land .more-btn__txt{color:var(--r-blue)}
.about--land .more-btn:hover{background:var(--r-blue)}
.about--land .more-btn:hover .more-btn__txt{color:#fff}
/* 見出しの下に短いコーラルの罫
   ※ .en-head は an-clip の clip-path で切られるため、親の .about__head に置く */
.about__head{position:relative;padding-bottom:22px}
.about__head::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;background:var(--r-coral);
}

/* =========================================================
   BUSINESS  紺ベタ → 白＋方眼
   ========================================================= */
.business{
  background:#fff;
  background-image:
    linear-gradient(var(--r-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--r-grid) 1px, transparent 1px);
  background-size:32px 32px;
  padding-bottom:150px;
}
/* 上部の写真帯は残しつつ、下端を白へ溶かす */
.business__band{
  height:360px;
  background-image:
    linear-gradient(180deg,
      rgba(18,37,84,.42) 0%,
      rgba(31,86,207,.28) 38%,
      rgba(255,255,255,.72) 82%,
      #ffffff 100%),
    url(../img/top/business-band.png);
}
.business__tex{display:none}
.business__inner{padding-top:470px}
.business__label{color:var(--r-coral);font-weight:700;letter-spacing:.06em}
.business__head .en-head{position:relative}

.biz-row{box-shadow:inset 0 1px 0 var(--r-line)}
.biz-row--last{box-shadow:inset 0 1px 0 var(--r-line),inset 0 -1px 0 var(--r-line)}
.biz-row__num{color:var(--r-coral);font-weight:600}
.biz-row__title{color:var(--r-navy)}
.biz-row__desc{color:var(--r-ink)}
/* 写真は六角形マスク */
.biz-row__img{
  border-radius:0;
  clip-path:var(--r-hex);
  background:var(--r-cyan-l);
}
.biz-row__img::after{display:none}          /* 濃紺の乗算オーバーレイを撤去 */
.biz-slide__pager .swiper-pagination-bullet{background:#fff;opacity:.7}
.biz-slide__pager .swiper-pagination-bullet-active{opacity:1}
/* ghost ボタン → 白地・青 */
.more-btn--ghost{background:#fff;border-color:var(--r-blue);color:var(--r-blue)}
.more-btn--ghost .more-btn__arw{background:var(--r-blue);border:none}
.more-btn--ghost .more-btn__arw svg path{stroke:#fff}
.more-btn--ghost:hover{background:var(--r-blue);color:#fff;border-color:var(--r-blue)}
.more-btn--ghost:hover .more-btn__arw{background:#fff}
.more-btn--ghost:hover .more-btn__arw svg path{stroke:var(--r-blue)}

/* =========================================================
   CASE
   ========================================================= */
/* 施工実績は方眼を敷かず純白（2026-09-15 齋藤様ご要望） */
.case{
  background:#fff;
  background-image:none;
}
.case__inner,.case-slider,.case__more{position:relative;z-index:1}
.case__label{color:var(--r-coral);font-weight:700;letter-spacing:.06em}
.case__intro{color:var(--r-ink)}
.case-card__img{
  border-radius:0;
  clip-path:var(--r-hex);
  background:var(--r-cyan-l);
}
.case-card__img::after{background:rgba(31,86,207,.06)}
.case-card__title{color:var(--r-navy);font-weight:700}
.tag{background:var(--r-blue)}

/* =========================================================
   NEWS
   ========================================================= */
.news{
  background-color:#f6fafd;
  background-image:
    linear-gradient(var(--r-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--r-grid) 1px, transparent 1px);
  background-size:32px 32px;
}
.news__blob{
  background:none;background-color:rgba(169,217,239,.30);
  filter:blur(60px);opacity:.9;
}
.news__label{color:var(--r-coral);font-weight:700;letter-spacing:.06em}
.news-card{
  background:#fff;border:1px solid var(--r-line);border-radius:22px;
}
.news-card:hover{border-color:var(--r-blue);box-shadow:0 10px 26px rgba(31,86,207,.12)}
.news-card__date{color:var(--r-blue);font-weight:600}
.news-card__cat{background:var(--r-blue)}
.news-card__title{color:var(--r-navy)}

/* =========================================================
   CONTACT  = コーラルの大CTA
   ========================================================= */
.contact{background:var(--r-coral)}
.contact::after{
  background:linear-gradient(120deg,rgba(232,96,76,.94) 0%,rgba(207,72,53,.90) 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.contact__inner{padding-top:120px}
.contact__title{color:#fff}
.contact__sub{color:rgba(255,255,255,.95)}
.contact__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  margin-top:34px;height:62px;padding:0 44px;border-radius:50px;
  background:#fff;color:var(--r-coral);
  font:700 16px/1 var(--f-jp);
  box-shadow:0 10px 26px rgba(80,20,10,.22);
  transition:transform var(--dur-hover) var(--ease-gentle),box-shadow var(--dur-hover) var(--ease-gentle);
}
.contact:hover .contact__btn{transform:translateY(-3px);box-shadow:0 16px 34px rgba(80,20,10,.28)}
.contact__btn svg{display:block}

/* =========================================================
   FOOTER  = 紺（全体が白なので引き締め役）
   ========================================================= */
.footer{background:var(--r-blue);padding-top:100px}
.footer__company{color:#fff}
.footer__addr p{color:rgba(255,255,255,.78)}
.footer__tel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.footer__tel-label{color:rgba(255,255,255,.85)}
.footer__tel-num{color:#fff}
.footer__tel-num img{filter:brightness(0) invert(1)}
.footer__tel-hours{color:rgba(255,255,255,.55)}
.footer__divider{background:rgba(255,255,255,.22)}
.fcol__head{color:#fff}
.fcol__subs a{color:rgba(255,255,255,.62)}
.fcol__head:hover{color:var(--r-cyan)}
.fcol__subs a:hover{color:#fff}
.footer__copy{color:rgba(255,255,255,.38)}
.footer__cert{margin-top:56px}
.footer__cert img{background:#fff;padding:12px 18px;border-radius:12px}
/* Contact（コーラル）→ フッター（紺）の継ぎ目を細いグラデで繋ぐ */
.footer::before{
  content:"";display:block;position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,var(--r-coral) 0%,var(--r-blue) 100%);
}
.footer{position:relative}

/* =========================================================
   1440〜1560px：固定幅1440のコンテナが画面端に張り付くのを防ぐ左右余白
   （元デザイン基準は1920。1920以上では従来どおり変化なし）
   ========================================================= */
@media (min-width:769px) and (max-width:1560px){
  .about__inner,.business__inner,.case__inner,.news__inner{
    width:auto;max-width:1440px;margin-left:auto;margin-right:auto;
    padding-left:40px;padding-right:40px;
  }
  .biz-row{width:auto;max-width:1440px;margin:0 auto;padding-left:40px;padding-right:40px}
  .biz-row__inner{width:100%;max-width:1200px}
  .news__list{width:auto;flex:1 1 auto;min-width:0}
  .case__intro{margin-left:auto;width:712px;max-width:56%}
  /* .footer__inner / .footer__nav / .footer__cols は全ページ共通なので common.css へ移設（10/8） */
}

/* =========================================================
   SP 調整
   ========================================================= */
@media (max-width:768px){
  .about--land{padding-top:clamp(90px,16vh,160px);padding-bottom:100px}
  .business__band{height:300px}
  .business__inner{padding-top:400px}
  .contact__inner{padding-top:96px}
  .contact__btn{height:54px;padding:0 30px;font-size:14px;margin-top:26px}
  .about__head .en-head::after{bottom:-14px;width:48px;height:3px}
  /* 六角形は幅が狭いと切り込みが強すぎるので緩める */
  .biz-row__img,.case-card__img{
    clip-path:polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
  }
}

/* ヘッダーのナビ文字を42pxバーの縦中央に（ドットは文字の下に絶対配置） */
.gnav__item a,.gnav__trigger{justify-content:center;gap:0;height:42px;position:relative}
.gnav__dot{position:absolute;bottom:2px;left:50%;margin-left:-3px}

/* =========================================================
   10/8 トップ：タブレット（769〜1280px）
   ========================================================= */
@media (min-width:769px) and (max-width:1280px){
  .about__head{width:auto;flex:0 0 30%}
  .about__body{width:auto;flex:1 1 0;min-width:0;margin-left:40px}
  .biz-row__inner{gap:48px}
  .biz-row__body{width:auto;flex:1 1 0;min-width:0}
  .biz-row__img{width:min(550px,46%);height:auto;aspect-ratio:550/300}
  .biz-row__desc--keep{white-space:normal}
  .news__left{width:auto;flex:0 0 30%}
}
@media (min-width:769px) and (max-width:1024px){
  .biz-row__inner{flex-direction:column;align-items:stretch;gap:40px}
  .biz-row__body{order:2}
  .biz-row__img{order:1;width:100%;max-width:640px;margin:0 auto}
  .about__inner,.news__inner{flex-direction:column}
  .about__head,.news__left{flex:none;width:auto}
  .about__body{margin-left:0;margin-top:60px}
  .news__left{gap:40px}
  .case__intro{max-width:none;width:auto;margin-left:0;margin-top:40px}
  .case__head{display:block}
}