@charset "utf-8";
/*
 * トップの最初の画面の補助スタイル（2026-09-26 追加）
 * scss/_object/_project/_top-hero.scss と対の手書きCSS。styles.css は SCSS 再ビルド不可のため編集しない。
 * - 製品名（.p-section-top-hero__product）を英語の見出しの上に出す
 * - スマホでは「製品名、見出し、キャッチ、資料請求ボタン、説明文、イラスト」の順に並べ、ボタンを最初の画面に入れる
 *   （見出しの絶対配置と、それ用の上の余白 2rem をやめる）
 * - 導入企業ロゴの枠（.p-section-top-company）の地の色と、キービジュアルの直下に置いたときの余白（2026-09-28 追加）
 * - 導入企業ロゴを1行で右から左へ流し続ける（2026-09-29 追加。js/company-marquee.js と対）
 * - キービジュアルの縦を縮める（2026-09-29 追加。PC でロゴの帯を最初の画面に入れる）
 */
.p-section-top-hero__product {
  margin: 0 0 0.12rem;
  color: #1663b0;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
@media print, (width >= 768px) {
  .p-section-top-hero__product {
    font-size: 0.2rem;
  }
}
@media only screen and (width < 768px) {
  .p-section-top-hero {
    padding-top: 0.9rem;
  }
  .p-section-top-hero__product {
    order: 0;
    font-size: 0.16rem;
    text-align: left;
  }
  .p-section-top-hero .c-heading {
    position: static;
    order: 1;
  }
  .p-section-top-hero__content-sub {
    order: 2;
    margin: 0.2rem 0 0.22rem;
  }
  .p-section-top-hero__content-button {
    order: 3;
    margin-top: 0.12rem;
  }
  .p-section-top-hero__content-detail {
    order: 4;
    margin-top: 0.26rem;
  }
  .p-section-top-hero__banner {
    order: 5;
    margin: 0.3rem auto 0.6rem;
  }
}

/*
 * 導入企業ロゴの枠（2026-09-28 追加）
 * - 地を白にする（元は薄い青 #f0f5fa）
 * - キービジュアルの直下に置いたとき：元の位置（セミナー枠の後ろ）用の PC の上余白 1.5rem を無くし、
 *   下の「アナログで普段やっていることを」の枠との間を空けて、ロゴがキービジュアルと次の枠の中ほどに来るようにする
 *   （スマホはその枠に上余白 0.6rem があるので足さない）
 */
.p-section-top-company {
  background-color: #fff;
}
.p-section-top-hero + .p-section-top-company {
  margin-top: 0;
}
@media print, (width >= 768px) {
  .p-section-top-hero + .p-section-top-company {
    margin-bottom: 0.6rem;
  }
}

/*
 * 導入企業ロゴを1行で右から左へ流し続ける（2026-09-29 追加。js/company-marquee.js と対）
 * - 本文のロゴは1つの ul。JS が複製をつなげて枠に is-marquee を付けたら流す
 * - 流さないとき（JS が動かない、「視差効果を減らす」設定）は折り返して全部見せる
 * - 地が白で枠が見えないので、ロゴの周りの余白（10px 15px）をなくしてロゴそのものを大きく見せる
 * - ロゴの大きさは PC で幅 1.95rem（元の 145×53px の約1.34倍）、スマホは 1.75rem
 * - マウスを載せている間は止める
 */
.p-section-top-company .c-list-company__slider {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.p-section-top-company .c-list-company__inner {
  display: flex;
  justify-content: center;
}
.p-section-top-company .c-list-company__list {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.3rem;
}
.p-section-top-company .c-list-company__list > li.c-list-company__item {
  flex-shrink: 0;
  margin: 0 0.2rem;
}
.p-section-top-company .c-list-company__image {
  padding: 0;
}
.p-section-top-company.is-marquee .c-list-company__inner {
  justify-content: flex-start;
  width: max-content;
  animation: fc-company-marquee var(--company-marquee-duration, 60s) linear infinite;
}
.p-section-top-company.is-marquee .c-list-company__list {
  flex-wrap: nowrap;
}
@media (hover: hover) {
  .p-section-top-company.is-marquee .c-list-company__inner:hover {
    animation-play-state: paused;
  }
}
@keyframes fc-company-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media print, (width >= 768px) {
  .p-section-top-company .c-list-company__list > li.c-list-company__item {
    width: 1.95rem;
  }
}
@media only screen and (width < 768px) {
  .p-section-top-company .c-list-company__list {
    row-gap: 0.2rem;
  }
  .p-section-top-company .c-list-company__list > li.c-list-company__item {
    margin: 0 0.12rem;
  }
}

/*
 * キービジュアルの縦を縮める（2026-09-29 追加）
 * - PC（1440×900）で、直下の導入企業ロゴの帯が最初の画面に入る高さにする（約2割短く）
 * - PC：上の余白 0.84rem を 0.5rem に。ボタンの下の余白（__wrapper の 0.78rem＋下の余白 0.6rem）を詰める。
 *   イラストは画面幅に比例して大きくなり枠の下へはみ出すので、下の余白は広い画面ほど増やしてロゴの見出しにかぶらないようにする
 * - スマホ：上の余白 0.9rem を 0.7rem に、イラストの枠を 2rem から 1.5rem に縮め、上下の余白を詰める（約2割短く）
 */
@media print, (width >= 768px) {
  .p-section-top-hero {
    padding: 0.5rem 0 max(0.3rem, calc(5.2vw - 0.45rem));
  }
  .p-section-top-hero__wrapper {
    margin-bottom: 0;
  }
}
@media only screen and (width < 768px) {
  .p-section-top-hero {
    padding-top: 0.7rem;
  }
  .p-section-top-hero__banner {
    height: 1.5rem;
    margin: 0.05rem auto 0.2rem;
  }
}

/*
 * 最初の画面の見出しを日本語に（2026-10-08 追加）
 * - 英語の見出し（Outfit・6vw）をやめ、製品名とキャッチを h1 にまとめる（本文はページ6の本文）
 *   <h1 class="c-heading p-section-top-hero__heading">
 *     <span class="p-section-top-hero__product">製品名</span>
 *     <span class="p-section-top-hero__catch">キャッチ<em class="p-section-top-hero__catch-em">強調</em></span>
 *   </h1>
 * - 下のキャッチ（準備・打合せ・資料作成をひとつに。）はそのまま残し、PC は見出しとの間を 0.1rem 空ける
 * - 日本語は Noto Sans JP の太字。PC は画面幅の 4%（上限 0.64rem）、スマホは 0.32rem（375px で約30px）で、2行目の10字が1行に収まる
 */
.p-section-top-hero .p-section-top-hero__heading {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
  margin-top: 0;
}
.p-section-top-hero__heading .p-section-top-hero__product {
  display: block;
}
.p-section-top-hero__catch {
  display: block;
  color: #1e1e1e;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.p-section-top-hero__catch-em {
  color: #1663b0;
  font-style: normal;
}
@media print, (width >= 768px) {
  .p-section-top-hero .p-section-top-hero__heading {
    font-size: inherit;
    margin-bottom: 0.1rem;
  }
  .p-section-top-hero__catch {
    font-size: min(4vw, 0.64rem);
  }
}
@media only screen and (width < 768px) {
  .p-section-top-hero .p-section-top-hero__heading {
    font-size: inherit;
    margin-bottom: 0;
  }
  .p-section-top-hero__catch {
    font-size: 0.32rem;
  }
}