/* トップのファーストビュー：左は黒地に白の見出し、右に縞模様のビジュアル（左右それぞれ水島が選んだ案の組み合わせ） */
.banner{background:#191919;overflow:hidden;isolation:isolate}
#top-banner-layers{transform:translate(-50%,-50%) translateX(38%)!important}
.banner__background::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#191919 0%,#191919 50%,rgba(25,25,25,.6) 63%,rgba(25,25,25,0) 75%)}
.banner__body__text{left:0;right:0;width:auto!important;top:215px!important;transform:none!important;text-align:left!important}
.banner__body__text>*{max-width:1120px;margin-left:auto;margin-right:auto;padding:0 16px;box-sizing:border-box}
.banner__body__text h1,.banner__body__text p{text-shadow:none!important}

/* サイト共通の * { font-family: Gill Sans } が子要素（em）にも効き、数字や英字が欧文書体になるため、ファーストビュー内はすべて Noto Sans JP にそろえる */
.top .banner .banner__body__text,.top .banner .banner__body__text *{font-family:"Noto Sans JP",sans-serif!important;text-shadow:none!important}
/* 見出しは「WEB経由で作れる／マーケティング会社」で改行して3行（2行だと右の縞模様に重なる） */
.top .banner .tophero__title{margin:0 auto;font-size:46px;line-height:1.4;font-weight:700;letter-spacing:.02em;color:#fff}
.top .banner .tophero__title em{font-style:normal;color:#ff2a36}
.top .banner .tophero__desc{margin:28px auto 0;font-size:20px;line-height:1.9;font-weight:500;color:rgba(255,255,255,.82)}
.top .banner .tophero__cta{display:flex;gap:16px;margin-top:32px}
.top .banner .tophero__btn{display:inline-flex;align-items:center;justify-content:center;min-width:200px;height:56px;border-radius:28px;font-weight:700;color:#fff!important;text-decoration:none;transition:opacity .2s}
.top .banner .tophero__btn:hover{opacity:.85}
.top .banner .tophero__btn--dark{background:#fff;color:#191919!important}
.top .banner .tophero__btn--red{background:#d70c19}

/* 縞模様のSVGは幅1440px固定のため、広い画面では相対的に左へ寄って見出しに近づく。右へ逃がす */
@media screen and (min-width:1600px){#top-banner-layers{transform:translate(-50%,-50%) translateX(52%)!important}}

@media screen and (max-width:767px){
  #top-banner-layers{transform:translate(-50%,-50%) translateX(20%)!important;opacity:.35}
  .banner__background::after{background:rgba(25,25,25,.6)}
  /* スマホはコピーを通常の流れに置き、お知らせ欄をその下に続ける（重なり防止） */
  .top .banner{height:auto!important}
  .top .banner .banner__body{height:auto!important;min-height:0!important;padding:0!important}
  .top .banner .banner__body__text{position:relative!important;top:auto!important;padding:120px 0 40px}
  .top .banner .tophero__title{font-size:26px;line-height:1.5;letter-spacing:0}
  .top .banner .tophero__desc{margin-top:18px;font-size:15px;line-height:1.8}
  .top .banner .tophero__desc br{display:none}
  .top .banner .tophero__cta{flex-direction:column;gap:12px;margin-top:24px}
  .top .banner .tophero__btn{width:100%;height:52px}
}

/* 取引先ロゴを27社→37社に増やしたので、流れる速さを元に合わせて1周を延ばす（40s×37/27） */
.top .logos__slider{animation-duration:28.5s;will-change:transform;backface-visibility:hidden}
/* 上下の段に別々の会社を振り分けた（apply_logos_split.py）。段ごとに社数が違うので、同じ速さ（約156px/秒）になるよう1周の秒数を段ごとに変える。
   上段19社28.5秒・下段18社27秒（秒数の比を社数の比19:18とぴったり同じにする。四捨五入した秒数だと速さがわずかに違い、上下の段が少しずつずれていく）。社数が変わったら apply_logos_split.py が出す値に合わせる */
.top .logos__slider--b{animation-duration:27s}
/* SPも下段を出す（下段は上段と別の会社なので、隠すと半分の会社が出なくなる） */
@media screen and (max-width:767px){.top .logos__slider--b{display:flex}}

/* ---------- POLICY（旧VISION）：左側にポリシー3項目。apply_top_policy.py ---------- */
.top .vision .policy{position:relative;z-index:1;max-width:620px;margin-top:8px}
.top .vision .policy,.top .vision .policy *{font-family:"Noto Sans JP",sans-serif}
.top .vision .policy__title{margin:0 0 28px;font-size:32px;line-height:1.4;font-weight:700;color:#fff}
.top .vision .policy__list{list-style:none;margin:0 0 40px;padding:0}
.top .vision .policy__list li{display:flex;align-items:baseline;gap:20px;padding:22px 0;border-top:1px solid rgba(255,255,255,.18)}
.top .vision .policy__list li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.top .vision .policy__num{flex:0 0 auto;font-size:15px;font-weight:700;letter-spacing:.08em;color:#ff2a36}
.top .vision .policy__list p{margin:0;font-size:19px;line-height:1.7;font-weight:700;color:#fff}
@media screen and (max-width:767px){
  .top .vision .policy__title{font-size:22px;margin-bottom:16px}
  .top .vision .policy__list li{gap:14px;padding:16px 0}
  .top .vision .policy__list p{font-size:15px}
}

/* ---------- SERVICE：業態別の3枠＋事業リンク（参考: white-link.com）。apply_top_service.py ---------- */
.top .service .svc{display:grid;grid-template-columns:1fr 1fr;gap:48px 40px;margin-top:48px;position:relative;z-index:1}
.top .service .svc,.top .service .svc *{font-family:"Noto Sans JP",sans-serif}
.top .service .svc__group--wide{grid-column:1/-1}
/* 横に並ぶ2枠は、説明文の行数が違っても黒帯の高さをそろえる */
.top .service .svc__group:not(.svc__group--wide){display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.top .service .svc__head{background:#191919;padding:26px 32px}
.top .service .svc__title{display:flex;align-items:center;gap:12px;margin:0;font-size:24px;line-height:1.4;font-weight:700;color:#fff}
.top .service .svc__title::before{content:"";flex:0 0 8px;width:8px;height:8px;background:#D70C18}
.top .service .svc__desc{margin:10px 0 0;font-size:14px;line-height:1.8;color:rgba(255,255,255,.8)}
.top .service .svc__links{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;margin-top:8px;align-self:start}
.top .service .svc__group:not(.svc__group--wide) .svc__links{grid-template-columns:1fr}
.top .service .svc__link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px dashed rgba(25,25,25,.35);color:#191919;text-decoration:none;font-size:16px;font-weight:700;transition:color .2s}
.top .service .svc__link:hover{color:#D70C18}
.top .service .svc__arrow{position:relative;flex:0 0 36px;width:36px;height:36px;background:rgba(25,25,25,.08)}
.top .service .svc__arrow::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -6px;border-top:2px solid #191919;border-right:2px solid #191919;transform:rotate(45deg)}
.top .service .svc__link:hover .svc__arrow{background:#D70C18}
.top .service .svc__link:hover .svc__arrow::after{border-color:#fff}
/* ページ未作成の事業は名前だけ（矢印なし・クリック不可）。高さは矢印付きの行にそろえる */
.top .service .svc__link--plain{min-height:36px;cursor:default}
.top .service .svc__link--plain:hover{color:#191919}
.top .service .svc__soon{margin:0;padding:20px 0;border-bottom:1px dashed rgba(25,25,25,.35);font-size:16px;font-weight:700;color:rgba(25,25,25,.45)}
@media screen and (max-width:767px){
  .top .service .svc{grid-template-columns:1fr;gap:32px;margin-top:32px}
  .top .service .svc__group:not(.svc__group--wide){display:block}
  .top .service .svc__head{padding:20px}
  .top .service .svc__title{font-size:19px}
  .top .service .svc__links{grid-template-columns:1fr}
  .top .service .svc__link,.top .service .svc__soon{font-size:15px;padding:16px 0}
}

/* SERVICEの装飾画像の透明な枠が上の動画カード（Prock）に重なり、クリックできなくなるのを防ぐ（2026-11-06） */
.service__decor,.service__decor::before,.service__decor::after{pointer-events:none}