@charset "UTF-8";
/* ==================== Design Tokens ==================== */
/*
 * デザイントークン
 * 元のSTUDIOサイトはTypeSquare（ゴシックMB101）/ FontPlus（Futura）というライセンスフォントを
 * 使用しているため、ここではNoto Sans JP / Latoで代替している。
 */
:root {
  /* Colors */
  --color-primary: #ff5100;
  --color-white: #ffffff;
  --color-text: #333333;
  --color-text-strong: #111111;
  --color-error: #f23a3c;
  --color-border: #eeeeee;
  --color-placeholder: #cccccc;
  --color-backdrop: rgba(0, 0, 0, 0.16);
  /* Fonts */
  --font-heading: "Noto Sans JP", sans-serif; /* 原本: ゴシックMB101 DB JIS2004 */
  --font-body: "Noto Sans JP", sans-serif; /* 原本: ゴシックMB101 R JIS2004 */
  --font-accent: "Lato", "Noto Sans JP", sans-serif;
  /* Layout */
  --header-height: 92px;
  --header-height-tablet: 118px;
  --header-height-mobile: 64px;
  --content-max-width: 1280px;
  /* Breakpoints (JS/コメント用の参考値。実際の分岐はscss/abstracts/_breakpoints.scssの
     $breakpoints とmedia queryで実装。スマホファースト運用のためmin-width基準） */
  --bp-sm: 320px;
  --bp-md: 840px;
  --bp-lg: 1280px;
  /* Motion */
  --ease-default: cubic-bezier(0.4, 0.4, 0, 1);
  --ease-out-soft: cubic-bezier(0.47, 0, 0.745, 0.715);
}

/* ==================== Base ==================== */
/* リセット & 基本スタイル */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

ul,
dl,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, p {
  margin: 0;
}

/*
 * スクロール先アンカーがヘッダーに隠れないようにするオフセット。
 * ヘッダーの実高さ（下記 Site Header セクション参照）に合わせて、スマホファーストで段階的に切り替える。
 */
main section[id],
.company[id] {
  scroll-margin-top: var(--header-height-mobile);
}

@media screen and (min-width: 768px) {
  main section[id],
  .company[id] {
    scroll-margin-top: var(--header-height-tablet);
  }
}
@media screen and (min-width: 900px) {
  main section[id],
  .company[id] {
    scroll-margin-top: var(--header-height);
  }
}
.divider {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/500;
  overflow: hidden;
}

/* リンク・ボタン共通のホバー挙動 */
a,
button,
.site-header__nav-link,
.mobile-menu__link,
.cta__button {
  transition: opacity 0.3s var(--ease-default), transform 0.3s var(--ease-default);
}

a:hover,
.site-header__nav-link:hover,
.mobile-menu__link:hover,
.cta__button:hover {
  opacity: 0.7;
}

/* ==================== Animations ==================== */
/*
 * スクロール出現アニメーション（IntersectionObserverと連動）
 * js/scrollReveal.js が data-reveal-* 属性の値をCSSカスタムプロパティへ反映し、
 * ビューポートに入ったタイミングで .is-visible を付与する。
 * ※ 画面幅に依存しないため、ブレークポイント分岐は使用しない。
 */
[data-reveal] {
  --reveal-opacity: 0;
  --reveal-transform: translate(0, 30px);
  --reveal-delay: 0ms;
  --reveal-duration: 600ms;
  --reveal-easing: var(--ease-out-soft);
  opacity: var(--reveal-opacity);
  transform: var(--reveal-transform);
  transition: opacity var(--reveal-duration) var(--reveal-easing) var(--reveal-delay), transform var(--reveal-duration) var(--reveal-easing) var(--reveal-delay);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  --reveal-opacity: 1;
  --reveal-transform: translate(0, 0) scale(1, 1);
}

/* 出現アニメーション完了後は、ホバー時の transition 速度を通常の0.3sへ戻す */
.cta__button.is-visible {
  transition: opacity 0.3s var(--ease-default), transform 0.3s var(--ease-default);
}

/* モーダルの開閉フェード */
.modal,
.mobile-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-default), visibility 0.3s var(--ease-default);
}

.modal.is-open,
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.modal__dialog {
  transform: translateY(16px);
  transition: transform 0.3s var(--ease-default);
}

.modal.is-open .modal__dialog {
  transform: translateY(0);
}

.mobile-menu__panel {
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-default);
}

.mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .modal,
  .mobile-menu,
  .modal__dialog,
  .mobile-menu__panel {
    transition: none !important;
  }
  .cta__button-wrap::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__bubble::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ==================== 静的ページ（プライバシーポリシー等） ==================== */
.legal {
  width: 100%;
  padding: calc(var(--header-height-mobile) + 40px) 24px 60px;
  background: var(--color-white);
}

/* .policy-hero の直後に続くページ（独自ヘッダーで、site-headerの高さ分の
   オフセットが不要）ではこちらで padding-top を打ち消す */
.legal--policy {
  padding-top: 48px;
}

.legal__inner {
  width: 100%;
  max-width: 886px;
  margin: 0 auto;
}

.legal__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: 8px;
}

.legal__updated {
  font-family: var(--font-accent);
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 32px;
}

.legal__section {
  margin-top: 32px;
}

.legal__heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: 12px;
}

.legal__text {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
}

/* sm: 見出しと本文を縦積み / md以上: 左に見出し・右に本文の2カラム */
.legal__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.legal__intro-lead {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-strong);
}
@media screen and (min-width: 768px) {
  .legal__intro-lead {
    flex: 0 0 40%;
    font-size: 22px;
  }
}

.legal__intro-text {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .legal__intro-text {
    flex: 1;
    font-size: 15px;
  }
}

@media screen and (min-width: 768px) {
  .legal__intro {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
}
.legal__list {
  margin: 8px 0 0;
  padding-left: 1.4em;
}

.legal__list li {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
  list-style: disc;
}

/* 01〜06の番号付きセクション。区切り線 + 左に大きな番号 + 右に見出し・本文の2カラム。 */
.legal__numbered {
  border-bottom: 2px solid var(--color-text-strong);
}

.legal__section--numbered {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 0;
  padding: 32px 0;
  border-top: 2px solid var(--color-text-strong);
}

.legal__section-number {
  flex-shrink: 0;
  width: 50px;
  font-family: var(--font-accent);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
}

.legal__section-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.legal__section-heading {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-strong);
}

.legal__section-text {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--color-text-strong);
}

.legal__section-list {
  padding-left: 1.4em;
}

.legal__section-list li {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--color-text-strong);
  list-style: disc;
}

@media screen and (min-width: 768px) {
  .legal__section--numbered {
    gap: 40px;
    padding: 48px 0;
  }
  .legal__section-number {
    width: 90px;
    font-size: 40px;
  }
  .legal__section-heading {
    font-size: 28px;
  }
  .legal__section-text,
  .legal__section-list li {
    font-size: 16px;
  }
}
/* 相談・報告についての緑カード。ページ中央に配置し、黒のハードシャドウで浮かせる。 */
.legal__contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
  margin: 48px auto 0;
  padding: 32px;
  background: #9cff55;
  border: 3px solid var(--color-text-strong);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--color-text-strong);
  margin-bottom: 50px;
}

.legal__contact-eyebrow {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-strong);
}

.legal__contact-heading {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-strong);
}

.legal__contact-text {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--color-text-strong);
}

.legal__contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 16px 36px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  border: 3px solid var(--color-text-strong);
  border-radius: 999px;
  transition: opacity 0.3s var(--ease-default);
}

.legal__contact-button:hover {
  opacity: 0.85;
}

@media screen and (min-width: 768px) {
  .legal__contact-card {
    padding: 48px;
  }
  .legal__contact-heading {
    font-size: 34px;
  }
  .legal__contact-text {
    font-size: 16px;
  }
}
.legal__link {
  color: var(--color-primary);
  text-decoration: underline;
}

.legal__back {
  display: inline-block;
  margin-top: 48px;
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .legal {
    padding: calc(var(--header-height-tablet) + 40px) 40px 80px;
  }
  .legal--policy {
    padding-top: 80px;
  }
  .legal__title {
    font-size: 30px;
  }
}
@media screen and (min-width: 900px) {
  .legal {
    padding-top: calc(var(--header-height) + 40px);
  }
  .legal--policy {
    padding-top: 80px;
  }
}
/* ==================== セクハラ防止方針ページ 専用ヘッダー ==================== */
/* このページのみ静的（非fixed）の白背景ヘッダーを使用するため site-header とは分離 */
.policy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.policy-header__logo img {
  width: 125px;
  height: auto;
}

.policy__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-strong);
  border: 1.5px solid var(--color-text-strong);
  border-radius: 999px;
  transition: opacity 0.3s var(--ease-default);
}

.policy-header__back:hover {
  opacity: 0.6;
}

@media screen and (min-width: 768px) {
  .policy-header {
    padding: 22px 40px;
  }
  .policy-header__logo img {
    width: 170px;
  }
  .policy-header__back {
    padding: 14px 28px;
    font-size: 15px;
  }
}
/* ==================== セクハラ防止方針ページ Hero ==================== */
/* スマホファーストで再構成。sm: テキスト→カードの縦積み / md以上: 左右2カラム。 */
.policy-hero {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 80px 20px;
  background: var(--color-primary);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .policy-hero {
    padding: 80px 40px;
  }
}

.policy-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1180px;
}
@media screen and (min-width: 768px) {
  .policy-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 64px;
  }
}

.policy-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .policy-hero__text {
    width: auto;
  }
}

.policy-hero__eyebrow {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-white);
}

.policy-hero__title {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-white);
}
@media screen and (min-width: 768px) {
  .policy-hero__title {
    font-size: 39px;
  }
}

.policy-hero__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 380px;
  padding: 32px;
  background: var(--color-white);
  border: 3px solid var(--color-text-strong);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--color-text-strong);
  transform: rotate(3deg);
}

.policy-hero__line {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .policy-hero__line {
    font-size: 19px;
  }
}

.policy-hero__line--blue {
  padding: 6px 16px;
  color: var(--color-white);
  background: #20b6ef;
}

.policy-hero__line--green {
  align-self: flex-start;
  margin-left: 32%;
  padding: 6px 16px;
  color: var(--color-text-strong);
  background: #9cff55;
}

.policy-hero__line--plain {
  margin: 0;
  color: var(--color-text-strong);
}

/* ==================== Site Header ==================== */
/*
 * スマホファーストで再構成。
 *   sm: ハンバーガーメニュー表示 / ナビ非表示 / 小さいヘッダー
 *   md: ハンバーガーメニューのまま / ヘッダーとロゴをタブレットサイズへ
 *   lg: 横並びナビ表示 / ハンバーガー非表示 / フルサイズヘッダー
 * (旧実装ではナビが1140px以下で非表示になる一方、ハンバーガーは768px以下でしか
 *  表示されず、769〜1140pxの間でどちらも出ない抜け漏れがあったため、
 *  ブレークポイント統一に合わせて解消した)
 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height-mobile);
  padding: 0 18px;
  background: transparent;
}

.site-header__logo img {
  width: 125px;
  height: auto;
}

.site-header__nav {
  display: none;
  align-items: center;
  gap: 8px;
}

.site-header__nav-link {
  padding: 10px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: #000000;
  text-align: center;
  line-height: 1.4;
}

/* ハンバーガーメニュー（PC未満で表示） */
.site-header__menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
}

.site-header__menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #000000;
  transition: transform 0.3s var(--ease-default), opacity 0.3s var(--ease-default);
}

@media screen and (min-width: 768px) {
  .site-header {
    height: var(--header-height-tablet);
    padding: 0 30px;
  }
  .site-header__logo img {
    width: 211px;
  }
  .site-header__menu-btn {
    width: 81px;
    height: 81px;
  }
}
@media screen and (min-width: 900px) {
  .site-header {
    height: var(--header-height);
  }
  .site-header__nav {
    display: flex;
  }
  .site-header__menu-btn {
    display: none;
  }
}
/* ==================== Mobile Drawer Menu ==================== */
/* 開閉状態はJS付与の.is-open/.is-closingで制御するため、幅による分岐は持たない */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}

.mobile-menu.is-open,
.mobile-menu.is-closing {
  display: block;
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80vw;
  max-width: 320px;
  background: var(--color-white);
  padding: 80px 32px 32px;
  display: flex;
  flex-direction: column;
}

.mobile-menu__close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  line-height: 1;
  width: 40px;
  height: 40px;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mobile-menu__link {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: #000000;
}

.main-visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1800/2500;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .main-visual {
    aspect-ratio: 2300/1294;
  }
}

/* ==================== Hero ==================== */
/*
 * スマホファーストで再構成。
 *   sm: SP用ビジュアル画像 / テキストを縮小
 *   md: PC用ビジュアル画像 / テキストは通常サイズだが横幅は控えめ
 *   lg: フル幅レイアウト
 */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  overflow: hidden;
}

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.hero__visual-picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 24px 36px;
}

.hero__bubble-wrap {
  position: relative;
  width: 100%;
}

.hero__bubble {
  display: none;
  position: absolute;
  top: 6px;
  right: -12px;
  width: 40%;
  pointer-events: none;
}

/*
 * hero-bubble.gif（374フレーム/21MB）を静止PNG1枚 + CSSアニメーションで再現。
 * 元GIFの動き：ポップイン（弾むように拡大→収束）した後、静止したまま長く待機し、
 * ループの最後で一瞬消えて最初に戻る、を無限に繰り返す（15秒周期）。
 * .hero__bubble 自体は data-reveal（--reveal-delay: 1500ms）でフェードインするため、
 * 同じ .is-visible 付与タイミングでアニメーションを開始する。
 */
.hero__bubble::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1200/1000;
  background-image: url("../assets/img/hero-bubble.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
}

.hero__bubble.is-visible::before {
  animation: hero-bubble-pop 15s ease-out infinite;
}

@keyframes hero-bubble-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  2% {
    opacity: 1;
    transform: scale(1.15);
  }
  3% {
    transform: scale(0.94);
  }
  4% {
    transform: scale(1.04);
  }
  5%, 97% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}
.hero__lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__lead-line,
.hero__message {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.71;
  color: var(--color-text-strong);
  text-align: left;
}

.hero__submessage {
  display: flex;
  flex-direction: column;
}

.hero__submessage p {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.71;
  color: var(--color-text-strong);
}

@media screen and (min-width: 768px) {
  .hero__inner {
    max-width: 645px;
    gap: 24px;
    padding: 0 40px 60px;
  }
  .hero__bubble {
    display: block;
    top: auto;
    bottom: 0;
    right: -52px;
  }
  .hero__lead-line,
  .hero__message,
  .hero__submessage p {
    font-size: 20px;
    line-height: 1.8;
  }
}
@media screen and (min-width: 900px) {
  .hero__inner {
    padding: 28px 0 60px;
  }
}
.hero__lead-line {
  --reveal-delay: 300ms;
  --reveal-duration: 400ms;
}

.hero__bubble {
  --reveal-delay: 1500ms;
  --reveal-duration: 500ms;
}

.hero__message {
  --reveal-delay: 300ms;
  --reveal-duration: 400ms;
}

.hero__submessage p {
  --reveal-duration: 400ms;
}
.hero__submessage p:nth-child(1) {
  --reveal-delay: 300ms;
}
.hero__submessage p:nth-child(2) {
  --reveal-delay: 400ms;
}
.hero__submessage p:nth-child(3) {
  --reveal-delay: 500ms;
}

/* ==================== Inner Cheer Leadingとは ==================== */
/*
 * スマホファーストで再構成。
 *   sm: 吹き出し演出は非表示 / プロフィールは縦並びで中央寄せ
 *   md: 吹き出し演出を表示 / プロフィールは横並び（PCデザイン基準）
 *   lg: プロフィール行のgapのみさらに拡大
 * (旧実装は max-width:1140/768/480 の3段階だったが、320/840/1280の
 *  3ブレークポイントに統合。768px側の値をsm（最小幅=320でも破綻しない値）の
 *  基準として採用し、769px超で使われていたデスクトップデザインをmd以降に割り当てている)
 */
.icl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 20px;
  background: var(--color-primary);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .icl {
    padding-bottom: 130px;
  }
}

.icl__inner {
  padding: 0 20px;
}
@media screen and (min-width: 768px) {
  .icl__inner {
    padding: 20px 60px;
  }
}
@media screen and (min-width: 1200px) {
  .icl__inner {
    padding: 20px 200px;
  }
}

.icl__intro {
  position: relative;
  margin-bottom: 120px;
}
@media screen and (min-width: 768px) {
  .icl__intro {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin-bottom: 70px;
    gap: 40px;
  }
}

/* 「恋バナしよ！」バッジ（PC版）。.icl__intro を基準にabsolute配置し、
   本文の左下・イントロブロックの外側にはみ出す形で表示する（smでは非表示）。 */
.icl__intro-koibana {
  display: none;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .icl__intro-koibana {
    display: block;
    position: absolute;
    left: 89px;
    bottom: -233px;
    width: 242px;
    height: auto;
    z-index: 1;
  }
}

.icl__intro-text {
  min-width: 0;
}
@media screen and (min-width: 768px) {
  .icl__intro-text {
    max-width: 640px;
  }
}

/* バッジクラスター（応援グッズのイラスト）。.icl__intro を基準にabsolute配置し、
   本文の右上にはみ出す形で表示する（smでは非表示）。 */
.icl__intro::before {
  content: "";
  display: none;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .icl__intro::before {
    display: block;
    position: absolute;
    top: -40px;
    right: -132px;
    width: 20px;
    aspect-ratio: 450/414;
    background: url("../assets/img/icl-deco-4.gif") center/contain no-repeat;
    padding-right: clamp(250px, 35vw, 470px);
  }
}
@media screen and (min-width: 900px) {
  .icl__intro::before {
    right: -100px;
    width: 420px;
  }
}

.icl__heading {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: 50px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .icl__heading {
    font-size: 32px;
    margin-bottom: 70px;
    text-align: left;
  }
}

.icl__lead {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: left;
}
.icl__lead br {
  display: none;
}
.icl__lead .icl__lead-br--always {
  display: inline;
}
@media screen and (min-width: 768px) {
  .icl__lead br {
    display: inline;
    font-size: 12px;
  }
}

.icl__tag {
  width: 300px;
  height: auto;
  margin: 0 auto;
}

/*
 * プロフィール行。元データ（Studioのpage-views JSON）から実測した
 * 座標をそのまま利用しているため、写真まわりの吹き出しやバッジ、
 * 「Cheerleader」の大見出しラベルが行の外側にはみ出して重なる（md/lg限定）。
 * .icl 側の overflow:hidden はセクション全体の水平スクロール対策なので、
 * このはみ出し自体はセクションの縦方向の余白内に収まる想定。
 */
.icl__profile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .icl__profile {
    align-items: flex-start;
  }
}

/* 大きな「Cheerleader」ラベル（md/lgのみ。smは icl__profile-name--role-mobile が担う） */
.icl__profile-role {
  display: none;
  position: absolute;
  top: -78px;
  left: 0;
  right: 20px;
  height: 96px;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-white);
  text-align: left;
}

.icl__profile-visual {
  position: relative;
  flex: none;
  width: 160px;
}
@media screen and (min-width: 768px) {
  .icl__profile-visual {
    margin-top: 60px;
  }
}

.icl__profile-photo {
  position: relative;
  z-index: 2;
  display: block;
  width: 160px;
  height: auto;
}

.icl__profile-deco {
  position: absolute;
  pointer-events: none;
}

/* 恋バナしよ！（SP版・小サイズ） */
.icl__profile-deco--koibana-sp {
  display: block;
  top: -95px;
  left: -93px;
  width: 160px;
  height: auto;
}

/* いったん飲みながら話そ！（写真の左下 / smでは右下） */
.icl__profile-deco--nomikai {
  left: auto;
  right: -80px;
  bottom: -100px;
  width: 160px;
  height: auto;
}

.icl__profile-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 70px;
}
@media screen and (min-width: 768px) {
  .icl__profile-body {
    margin-top: 25px;
  }
}

.icl__profile-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-white);
  text-align: center;
}

/* SP用の「Cheerleader」表記。md/lgでは icl__profile-role が代わりに表示される */
.icl__profile-name--role-mobile {
  display: block;
}

.icl__profile-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.icl__profile-sns img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  object-fit: cover;
}

.icl__profile-text {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-white);
  text-align: left;
}
@media screen and (min-width: 768px) {
  .icl__profile-text {
    font-size: 16px;
    padding-right: 122px;
  }
}

@media screen and (min-width: 768px) {
  .icl__tag {
    display: none;
  }
  .icl__lead {
    max-width: 760px;
    font-size: 16px;
  }
  .icl__profile {
    flex-direction: row;
    text-align: left;
    margin-top: 160px;
  }
  .icl__profile-role {
    display: block;
  }
  .icl__profile-visual,
  .icl__profile-photo {
    width: 206px;
  }
  .icl__profile-deco--koibana-sp {
    display: none;
  }
  .icl__profile-deco--nomikai {
    left: 12px;
    right: auto;
    bottom: -163px;
    width: 258px;
  }
  .icl__profile-body {
    align-items: flex-start;
  }
  .icl__profile-name,
  .icl__profile-name--role-mobile,
  .icl__profile-text {
    text-align: left;
  }
  .icl__profile-name--role-mobile {
    display: none;
  }
  .icl__profile-name {
    margin: 0;
    text-align: center;
    font-size: 20px;
  }
}
@media screen and (min-width: 900px) {
  .icl__profile {
    gap: 65px;
  }
}
/* ==================== What We Do ==================== */
/*
 * スマホファーストで再構成。各カード（.whatwedo__item）はテキスト（.whatwedo__item-head）と
 * 2つのアイコンカード（.whatwedo__item-cards > .whatwedo__card）で構成。
 *   sm: カード縦積み（1〜3を上から順に表示）/ 各カード内はアイコン2つを横並び
 *   md: 1〜3を横並び3カラムに / 各カラム内はアイコン2つを縦積み・左揃えに / 文字・アイコンサイズを拡大
 */
.whatwedo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 20px;
  background: var(--color-white);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .whatwedo {
    padding: 80px 20px;
  }
}

.whatwedo__heading {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: 70px;
}
@media screen and (min-width: 768px) {
  .whatwedo__heading {
    font-size: 40px;
    margin-bottom: 100px;
  }
}

.whatwedo__deco {
  display: none;
}

.whatwedo__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 912px;
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  .whatwedo__list {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    max-width: 1080px;
    gap: 40px;
  }
}

.whatwedo__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 460px;
}
@media screen and (min-width: 768px) {
  .whatwedo__item {
    flex: 110;
    align-items: center;
    gap: 50px;
  }
}

.whatwedo__item-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.whatwedo__item-number {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

.whatwedo__item-label {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .whatwedo__item-label {
    font-size: 18px;
  }
}

.whatwedo__item-cards {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 25px;
}
@media screen and (min-width: 768px) {
  .whatwedo__item-cards {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 48px;
  }
}

.whatwedo__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}

.whatwedo__card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-strong);
  line-height: 1.4;
  white-space: nowrap;
}
.whatwedo__card-label::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.whatwedo__card-icon {
  width: auto;
  height: 97px;
}

@media screen and (min-width: 768px) {
  .whatwedo__item-head {
    justify-content: center;
  }
  .whatwedo__item-number {
    font-size: 36px;
  }
  .whatwedo__card {
    align-items: center;
  }
  .whatwedo__card-label {
    font-size: 14px;
    justify-content: center;
  }
  .whatwedo__card-icon {
    max-width: none;
  }
}
/* ==================== Safe Work Policy ==================== */
/* スマホファーストで再構成。sm: カードは縦積み（本文→バッジ） / md: 横並びで本文とバッジを左右配置。 */
.safety-policy {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 40px 20px;
  background: var(--color-white);
}

.safety-policy__card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "eyebrow eyebrow" "heading heading" "text text" "tags tags" "badge button";
  row-gap: 16px;
  column-gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 920px;
  padding: 32px 24px;
  background: #fff7ef;
  border: 3px solid var(--color-text-strong);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--color-text-strong);
}
@media screen and (min-width: 768px) {
  .safety-policy__card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 48px 40px;
  }
}

.safety-policy__content {
  display: contents;
}
@media screen and (min-width: 768px) {
  .safety-policy__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
    width: 100%;
  }
}

.safety-policy__eyebrow {
  grid-area: eyebrow;
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.safety-policy__heading {
  grid-area: heading;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-strong);
}
@media screen and (min-width: 768px) {
  .safety-policy__heading {
    font-size: 30px;
  }
}

.safety-policy__text {
  grid-area: text;
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  font-weight: 700;
  color: var(--color-text);
}
@media screen and (min-width: 768px) {
  .safety-policy__text {
    font-size: 15px;
  }
}

.safety-policy__tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.safety-policy__tag {
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-strong);
  background: #fff;
  border: 1.5px solid var(--color-text-strong);
  border-radius: 999px;
}
@media screen and (min-width: 768px) {
  .safety-policy__tag {
    font-size: 14px;
  }
}

.safety-policy__bottom {
  display: contents;
}
@media screen and (min-width: 768px) {
  .safety-policy__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
  }
}

.safety-policy__button {
  grid-area: button;
  justify-self: start;
  align-self: center;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  transition: opacity 0.3s var(--ease-default);
  border: 1.5px solid var(--color-text-strong);
}
@media screen and (min-width: 768px) {
  .safety-policy__button {
    margin-top: 0;
    gap: 10px;
    padding: 14px 45px;
    font-size: 14px;
  }
}

.safety-policy__button:hover {
  opacity: 0.85;
}

.safety-policy__button-arrow {
  font-size: 14px;
}

.safety-policy__badge {
  grid-area: badge;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  background: #9cff55;
  border: 3px solid var(--color-text-strong);
  border-radius: 50%;
  margin-top: 16px;
  transform: rotate(8deg);
}
@media screen and (min-width: 768px) {
  .safety-policy__badge {
    width: 200px;
    height: 200px;
    margin-top: 0;
  }
}

.safety-policy__badge-no {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-text-strong);
}
@media screen and (min-width: 768px) {
  .safety-policy__badge-no {
    font-size: 44px;
  }
}

.safety-policy__badge-label {
  font-family: var(--font-accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--color-text-strong);
}
@media screen and (min-width: 768px) {
  .safety-policy__badge-label {
    font-size: 13px;
  }
}

/* ==================== CTA（最新事例 / お問い合わせ） ==================== */
/* スマホファーストで再構成。smを最小値として、mdでPCデザインへ切り替える。 */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 19px;
  width: 100%;
  padding: 40px 24px;
  background: var(--color-white);
}

.cta__button-wrap {
  position: relative;
}

.cta__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 374px;
  max-width: 90vw;
  height: 49px;
  background-color: #fb6000;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.cta__button-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
}

/*
 * cta-deco-ok.gif（374フレーム/11MB）を静止PNG1枚 + CSSアニメーションで再現。
 * 元GIFの動き：ポップイン（弾むように拡大→収束）した後、静止したまま長く待機し、
 * ループの最後で一瞬消えて最初に戻る、を無限に繰り返す。
 * 同じ挙動を @keyframes のスケール＋opacityで再現し、静止区間はCPU/GPU負荷ゼロにする。
 */
.cta__button-wrap::before {
  content: "";
  position: absolute;
  bottom: -97px;
  right: 30px;
  width: 120px;
  aspect-ratio: 6/5;
  height: auto;
  background-image: url("../assets/img/cta-deco-ok.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  transform-origin: center;
  animation: cta-deco-pop 15s ease-out infinite;
}
@media screen and (min-width: 768px) {
  .cta__button-wrap::before {
    bottom: -143px;
    right: -120px;
    width: 200px;
  }
}

@keyframes cta-deco-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  1% {
    opacity: 1;
    transform: scale(1.2);
  }
  2% {
    transform: scale(0.9);
  }
  3% {
    transform: scale(1.05);
  }
  4%, 97% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}
@media screen and (min-width: 768px) {
  .cta {
    gap: 23px;
    padding: 60px 24px;
  }
  .cta__button {
    height: 70px;
  }
  .cta__button-label {
    font-size: 20px;
  }
}
/* ==================== 会社概要 ==================== */
/*
 * スマホファーストで再構成。
 *   sm: ラベルと説明を縦積み / 文字サイズ最小
 *   md: 横並び表示 / 文字サイズ中間
 *   lg: 文字サイズ最大（PCデザイン基準）
 */
.company__table {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.8;
  color: #333;
  padding: 60px 40px 20px;
}
@media screen and (min-width: 768px) {
  .company__table {
    font-size: 16px;
    padding: 100px 90px 56px;
  }
}

.company__row {
  margin-bottom: 4px;
}
.company__row dt,
.company__row dd {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .company__row {
    display: flex;
  }
  .company__row dt {
    flex: none;
    width: 160px;
  }
  .company__row dd {
    flex: 1;
  }
}

.company__business-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.company__business-list li::before {
  content: "・";
}

/* ==================== Footer ==================== */
/* スマホファーストで再構成。smを最小値として、mdでPCデザインへ切り替える。 */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 40px 24px;
  background: var(--color-primary);
}

.site-footer__logo {
  width: 120px;
  height: auto;
}

.site-footer__copyright {
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  text-align: center;
}

@media screen and (min-width: 768px) {
  .site-footer {
    padding: 80px 24px 60px;
  }
  .site-footer__logo {
    width: 160px;
  }
}
/* ==================== お問い合わせモーダル ==================== */
/*
 * 画面幅に依存しないレイアウト（min(90vw, 560px)などの流体単位で対応）のため、
 * ブレークポイント分岐は使用しない。
 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.modal.is-open {
  pointer-events: auto;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop);
}

.modal__dialog {
  position: relative;
  width: min(90vw, 560px);
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px 32px;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  line-height: 1;
  width: 36px;
  height: 36px;
}

.modal__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 24px;
}

.modal__form {
  display: flex;
  flex-direction: column;
}

.modal__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.modal__label {
  font-family: var(--font-accent);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
}

.modal__required {
  color: var(--color-error);
  margin-left: 5px;
}

.modal__input,
.modal__textarea,
.modal__select {
  width: 100%;
  font-family: var(--font-accent);
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 10px 16px;
  line-height: 1.4;
}

.modal__input {
  height: 50px;
}

.modal__textarea {
  height: 160px;
  resize: vertical;
}

.modal__select {
  height: 50px;
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%), linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.modal__select:invalid {
  color: var(--color-placeholder);
}

.modal__input::placeholder,
.modal__textarea::placeholder {
  color: var(--color-placeholder);
}

.modal__input:focus,
.modal__textarea:focus,
.modal__select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.modal__checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-bottom: 16px;
  cursor: pointer;
}

.modal__checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.modal__checkbox-label {
  font-family: var(--font-accent);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}

.modal__checkbox-link {
  color: var(--color-primary);
  text-decoration: underline;
}

.modal__submit {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: 700;
  border-radius: 4px;
  text-align: center;
  transition: opacity 0.3s var(--ease-default);
}

.modal__submit:hover {
  opacity: 0.85;
}

.modal__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal__result {
  margin-top: 12px;
  font-family: var(--font-accent);
  font-size: 14px;
  text-align: center;
  min-height: 1.4em;
}

.modal__result[data-state=success] {
  color: #2a9d5c;
}

.modal__result[data-state=error] {
  color: var(--color-error);
}

/* ==================== フローティングバナー ==================== */
/*
 * ページ下部に固定表示される「展示会キャストなら、チャマップ」バナー。
 * スクロール開始直後に js/floatingBanner.js が .is-visible を付与し、
 * フェード＋スライドインで出現する（初期状態は非表示・下にオフセット）。
 */
.floating-banner {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 60px);
  max-width: 420px;
  padding: 10px 16px 10px 10px;
  background: var(--color-white);
  border: 3px solid var(--color-text-strong);
  border-radius: 16px;
  box-shadow: 0 6px 18px var(--color-backdrop);
  opacity: 0;
  transform: translate(-50%, 24px);
  transition: opacity 0.5s var(--ease-out-soft), transform 0.5s var(--ease-out-soft);
  pointer-events: none;
}

.floating-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.floating-banner__illust {
  flex: none;
  width: 84px;
  height: auto;
}

.floating-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.floating-banner__lead {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-strong);
  white-space: nowrap;
}

.floating-banner__brand {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1.2;
  white-space: nowrap;
}

.floating-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 4px;
  padding: 6px 0 6px 10px;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  text-align: center;
  transition: opacity 0.3s var(--ease-default);
}

.floating-banner__cta:hover {
  opacity: 0.85;
}

.floating-banner__arrow {
  font-size: 9px;
}

@media screen and (min-width: 768px) {
  .floating-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    gap: 20px;
    width: auto;
    max-width: 480px;
    padding: 16px 28px 16px 16px;
    border-width: 4px;
    border-radius: 20px;
    transform: translate(0, 24px);
  }
  .floating-banner.is-visible {
    transform: translate(0, 0);
  }
  .floating-banner__illust {
    width: 120px;
  }
  .floating-banner__lead {
    font-size: 14px;
  }
  .floating-banner__brand {
    font-size: 30px;
  }
  .floating-banner__cta {
    font-size: 15px;
    padding: 10px 20px;
  }
  .floating-banner__arrow {
    font-size: 11px;
  }
}