@charset "utf-8";
/*
 * トップの最初の画面の補助スタイル（2026-09-26 追加）
 * scss/_object/_project/_top-hero.scss と対の手書きCSS。styles.css は SCSS 再ビルド不可のため編集しない。
 * - 製品名（.p-section-top-hero__product）を英語の見出しの上に出す
 * - スマホでは「製品名、見出し、キャッチ、資料請求ボタン、説明文、イラスト」の順に並べ、ボタンを最初の画面に入れる
 * - 導入企業ロゴの枠（.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: #006428;
  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 <= 767px) {
  .p-section-top-hero__product {
    order: 0;
    font-size: 0.16rem;
    text-align: left;
  }
  .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;
  }
}

/*
 * 導入企業ロゴの枠（2026-09-28 追加）
 * - 地を白にする（元は薄い緑 #f0faf0）
 * - キービジュアルの直下に置いたとき：元の位置（セミナー枠の後ろ）用の PC の上余白 1.5rem を無くし、
 *   下の「解決できる課題」の枠との間を空けて、ロゴがキービジュアルと次の枠の中ほどに来るようにする
 */
.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;
  }
}
@media only screen and (width <= 767px) {
  .p-section-top-hero + .p-section-top-company {
    margin-bottom: 0.3rem;
  }
}

/*
 * 導入企業ロゴを1行で右から左へ流し続ける（2026-09-29 追加。js/company-marquee.js と対）
 * - 本文のロゴは1つの ul。JS が複製をつなげて枠に is-marquee を付けたら流す
 * - 流さないとき（JS が動かない、「視差効果を減らす」設定）は折り返して全部見せる
 * - ロゴの大きさは PC で幅 2.35rem（元の 175×64px の約1.34倍）、スマホは元のまま
 * - マウスを載せている間は止める
 */
.p-section-top-company .c-slider-keyvisual__slider {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.p-section-top-company .c-slider-keyvisual__list {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.28rem;
}
.p-section-top-company .c-slider-keyvisual__list > li.c-slider-keyvisual__item {
  flex-shrink: 0;
  margin: 0 0.2rem;
  padding-right: 0;
}
.p-section-top-company.is-marquee .c-slider-keyvisual__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-slider-keyvisual__list {
  flex-wrap: nowrap;
}
@media (hover: hover) {
  .p-section-top-company.is-marquee .c-slider-keyvisual__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-slider-keyvisual__list > li.c-slider-keyvisual__item {
    width: 2.35rem;
  }
  .p-section-top-company .c-slider-keyvisual__image {
    height: auto;
    aspect-ratio: 175 / 64;
  }
}
@media only screen and (width <= 767px) {
  .p-section-top-company .c-slider-keyvisual__list {
    row-gap: 0.2rem;
  }
  .p-section-top-company .c-slider-keyvisual__list > li.c-slider-keyvisual__item {
    margin: 0 0.12rem;
  }
}

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

/*
 * 最初の画面の見出しを日本語に（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>
 * - 英語の見出しの下にあった同じ意味のキャッチ（お客様の理想を、もっと早くカタチに。）は見出しへ移したので本文から消し、その分の余白を見出しの下に付ける
 * - 日本語は 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: #006428;
  font-style: normal;
}
@media print, (width >= 768px) {
  .p-section-top-hero .p-section-top-hero__heading {
    font-size: inherit;
    margin-bottom: 0.22rem;
  }
  .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.2rem;
  }
  .p-section-top-hero__catch {
    font-size: 0.32rem;
  }
}