@charset "UTF-8";
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* foundation/_variables.scss） */
/* ヘッダーの高さ */
/* コンテナ最大幅 */
/* 元ページのコンテンツ表示領域の最大幅 */
/* 文字色 */
/* ハンバーガーメニューで表示中ページに使う文字色 */
/* Contactボタンのメールアイコン色 */
/* ボタン */
/* ヒーロー用ボタンの通常・ホバー背景色 */
/* 文字太さ */
/* 背景色 */
/* indexのContact背景に重ねるオーバーレイ色 */
/* セクション枠線 */
/* サムネイル枠線 */
/* 角の丸み */
/* ボックスシャドウ */
/* Contactの既定の影色 */
/* 主要機能・勤怠管理ページの白背景Contactで共有する影色 */
/* ヘッダーの下部に表示する影 */
/* モバイルナビゲーションの右端に表示する影 */
/* z-index */
/* カラムの並び方 */
/* 1つずつ縦に表示 */
/* 横に2つ並べて表示 */
/* 横に3つ並べて表示 */
/* アニメーション（フェードイン） */
/* 既定の時間 */
/* 既定の遅延 */
/* 余白 */
/* $gutter: 1rem; */ /* 横余白 */
/* 青背景セクション装飾 */
/* ブレークポイント */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* foundation/_reset.scss */
/* foundation/_reset.scss） */
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}

main {
  margin-top: 75px;
}

ul,
li,
ol {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

/* font-awesomeアイコン調整用 */
/* 一時的に記述していますが、移動先が決まり次第他のファイルに移動する予定です。 */
.fa,
.fas,
.far,
.fal,
.fab,
.fa-regular {
  /* Font Awesome 5 Free を読み込んでいる前提 */
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1;
  color: #BDD1D8; /* アイコンの色 */
}

/* layout
  ヘッダーやフッターなど大枠のレイアウト */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* layout/_header.scss */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 11px 10px rgba(204, 204, 204, 0.5);
  z-index: 1000;
  /* ---- 「勤怠管理」の補助テキスト（新機能） ----
     フッターのナビには存在しないため、.l-header 配下に限定する。 */
}
.l-header .c-global-nav__subtext {
  display: block;
  font-size: 0.9rem;
}
@media only screen and (max-width: 767px) {
  .l-header .c-global-nav__subtext {
    display: contents;
  }
}
.l-header {
  /* ---- ヘッダーのリンク文字設定（post-1641.css の元ページの値に合わせる） ---- */
}
.l-header .c-global-nav__link {
  font-size: 0.94rem;
  line-height: 1;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .l-header__nav {
    position: static;
    display: block; /* スマホ時は非表示（JSで開閉） */
  }
}
@media only screen and (min-width: 768px) {
  .l-header__nav {
    flex: 0 0 53.264%;
    min-width: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
  }
  .l-header__nav .c-global-nav {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .l-header__nav {
    /* ---- デスクトップ時、5項目を均等配置にする ---- */
  }
  .l-header__nav .c-global-nav__list {
    gap: 0;
    width: 100%;
    align-items: center;
  }
  .l-header__nav .c-global-nav__item {
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
  }
  .l-header__nav .c-global-nav__link {
    width: auto; /* カラム幅いっぱいにしない */
  }
}
.l-header__inner {
  position: relative; /* ← これがあることで子要素のabsoluteが効く */
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  height: 75px;
  margin: 0 auto;
  padding: 0 0.5rem;
}
.l-header__brand-wrapper {
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .l-header__brand-wrapper {
    flex: 0 0 46.401%;
  }
}
.l-header__brand {
  display: inline-flex;
  align-items: center;
}
.l-header__logo {
  display: block;
  width: 200px;
  height: auto;
}

/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* layout/_footer.scss */
/* =========================================================
  Layout: l-footer（サイト共通フッター）
  ========================================================= */
.l-footer {
  background-color: black; /* フッター全体の背景色 */
  color: white; /* 基本文字色 */
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
  /* ----------------------------------------
    内側コンテナ
    PC: ロゴ左 / ナビ右
    SP: 縦並びセンター
    ---------------------------------------- */
}
.l-footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 767px) {
  .l-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
}
.l-footer {
  /* 会社ロゴ */
}
.l-footer__brand-wrapper {
  flex-shrink: 0;
}
.l-footer__brand {
  display: inline-flex;
  align-items: center;
}
.l-footer__logo {
  display: block;
  width: 200px;
  height: auto;
}
@media (max-width: 767px) {
  .l-footer__logo {
    width: 180px;
  }
}
.l-footer {
  /* ----------------------------------------
    ナビゲーション
    ヘッダーと同じ c-global-nav__list / __item / __link を再利用
    ---------------------------------------- */
  /* ----------------------------------------
    コピーライト
    下部にセンタリングして配置
    ---------------------------------------- */
}
.l-footer__copyright {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: white;
}
.l-footer__copyright a {
  color: inherit;
  text-decoration: none;
}
.l-footer__copyright a:hover, .l-footer__copyright a:focus-visible {
  color: #24afda;
  text-decoration: underline;
}

/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* layout/_contact-area.scss */
.l-contact-area {
  /* 主要機能・勤怠管理の白背景Contactで影色を共有します。
     背景画像を使うindex用エリアには、部品既定の青い影を適用します。 */
}
.l-contact-area:not(.l-contact-area--index) {
  --contact-link-shadow-color: rgba(232, 232, 232, 0.5);
}
.l-contact-area--index {
  background-image: url(../../img/index/contact-area.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.l-contact-area--index .l-contact-area__overlay {
  background-color: #0170B9;
  opacity: 0.5;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

/* object
  コンポーネント（c-）やユーティリティ（u-） */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_hamburger.scss */
/* ================================
  ハンバーガーボタン全体のラッパー
  （PCでは非表示、タブレット、スマートフォンで表示）
================================ */
.c-hamburger-wrapper {
  display: none; /* PCサイズでは非表示 */
}
@media only screen and (max-width: 767px) {
  .c-hamburger-wrapper {
    display: block; /* スマホサイズで表示 */
    position: absolute; /* 固定化するポイント */
    top: 50%; /* 縦中央に配置 */
    right: 16px; /* 右端からの距離（調整OK） */
    transform: translateY(-50%); /* 完全に中央寄せ */
    z-index: 1001; /* メニューより前面に出す */
  }
}

/* ================================
  ハンバーガーボタン本体
================================ */
.c-hamburger {
  position: relative;
  width: 32px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent; /* 背景を透明にする */
  cursor: pointer; /* カーソルをポインタにする */
  transition: opacity 0.3s ease; /* ホバー時のふわっと感 */
  /* ホバー時の視覚的フィードバック */
}
.c-hamburger:hover {
  opacity: 0.7;
}
.c-hamburger {
  /* バーをまとめて包む要素 */
}
.c-hamburger__bars {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.c-hamburger {
  /* 3本のバー共通の基本スタイル */
}
.c-hamburger__bar {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px; /* 線の太さ */
  background-color: #54595f; /* バーの色 */
  border-radius: 2px; /* 少し角を丸める */
  transition: transform 0.3s ease, top 0.3s ease;
  /* 各バーの位置設定 */
}
.c-hamburger__bar--top {
  top: 0; /* 上のバー */
}
.c-hamburger__bar--middle {
  top: 50%; /* 真ん中のバー */
  transform: translateY(-50%); /* 縦中央揃え */
}
.c-hamburger__bar--bottom {
  bottom: 0; /* 下のバー */
}
.c-hamburger {
  /* ================================
    is-active時のアニメーション変化
    （メニューオープン時に×印に変化）
  ================================ */
}
.c-hamburger.is-active .c-hamburger__bar--top {
  top: 50%; /* 真ん中に移動 */
  transform: translateY(-50%) rotate(45deg); /* 右上がりに回転 */
}
.c-hamburger.is-active .c-hamburger__bar--middle {
  opacity: 0; /* 真ん中の線を消す */
}
.c-hamburger.is-active .c-hamburger__bar--bottom {
  bottom: 50%; /* 真ん中に移動 */
  transform: translateY(50%) rotate(-45deg); /* 右下がりに回転 */
}

/* スマホ用ハンバーガーメニューのバーガーアイコン */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_global-nav.scss */
/* _variables.scss（変数）を読み込む */
.c-global-nav {
  /* ============================================================
      ▼ スマホ表示（767px以下）
     ============================================================ */
}
@media only screen and (max-width: 767px) {
  .c-global-nav {
    position: fixed; /* 画面右からスライドインするため固定配置 */
    top: 0;
    right: 0;
    width: 100%; /* 幅100%を基準に max-width で制限 */
    max-width: 300px; /* メニューの最大幅 */
    height: 100vh; /* 画面の高さ全体を覆う */
    background-color: white; /* 背景色　ナビゲーションバーと同じ色設定 */
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1); /* 右端から出る影 */
    padding-top: 75px; /* ヘッダーの高さ分だけ上に余白を確保 */
    overflow-y: auto; /* メニュー内が長い場合スクロール可能に */
    z-index: 1000; /* ヘッダーより上に表示 */
    /* ---- 初期状態（閉） ----
        transformで右側にオフスクリーン。
        visibilityとopacityで非表示にし、クリックも無効化。
        transitionをOFFにして、読み込み時やリサイズ時の
        チラつきを防止。
    */
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: none;
    /* ---- クリック操作中だけアニメーションON ----
        JavaScriptで .is-animatable クラスを一時的に付与。
        これにより「開閉時のみ」スライドとフェードのtransitionが有効。
        通常時はOFFで安定表示。
    */
  }
  .c-global-nav.is-animatable {
    transition: transform 0.4s ease, opacity 0.2s ease;
  }
  .c-global-nav {
    /* ---- 閉じるときだけ visibility を遅延 ----
        メニューを閉じるとき、transformとopacityが終わる
        0.4秒後にvisibilityをhiddenに変更。
        これにより「パッと消える」問題を防ぎ、自然に消える。
    */
  }
  .c-global-nav.is-animatable:not([data-open=true]) {
    transition: transform 0.4s ease, opacity 0.2s ease, visibility 0s linear 0.4s;
  }
  .c-global-nav {
    /* ---- 開いた状態 ----
        data-open="true" が付いたとき、画面右からスライドイン。
        visibilityとopacityをONにしてフェード表示。
    */
  }
  .c-global-nav[data-open=true] {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}
.c-global-nav {
  /* ============================================================
      ▼ PC表示（768px以上）
     ============================================================ */
  /* ---- リサイズ時の“メニューバーのちらつき”を防止するために必要な設定 ---- */
}
@media only screen and (min-width: 768px) {
  .c-global-nav {
    position: static; /* 通常フロー内配置 */
    width: auto;
    max-width: none;
    height: auto;
    box-shadow: none; /* PC時は影なし */
    padding-top: 0;
    transform: none; /* スライド解除 */
    visibility: visible; /* 常時表示 */
    opacity: 1;
    pointer-events: auto;
    transition: none !important; /* リサイズ時の“ニュッ”防止 */
  }
}
.c-global-nav {
  /* ============================================================
      ▼ ナビリスト設定
     ============================================================ */
}
.c-global-nav__list {
  display: flex;
  flex-direction: column; /* スマートフォンでは縦並び */
  list-style: none;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .c-global-nav__list {
    flex-direction: row; /* PCでは横並び */
    gap: 2rem; /* メニュー間の余白 */
    padding: 0;
  }
}
.c-global-nav {
  /* ---- 各メニュー項目（スマートフォン/PC共通） ---- */
}
.c-global-nav__item {
  position: relative;
}
.c-global-nav {
  /* ============================================================
      ▼ 各リンク設定
     ============================================================ */
}
.c-global-nav__link {
  display: inline-block;
  color: #54595f;
  font-weight: 400;
  width: 100%;
  transition: color 0.3s ease, background-color 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .c-global-nav__link {
    padding: 1rem;
  }
}
.c-global-nav__link {
  /* ---- ホバー・フォーカス時の視覚的フィードバック ---- */
}
.c-global-nav__link:hover, .c-global-nav__link:focus {
  color: #24afda; /* hover時のリンク色 */
}
@media only screen and (max-width: 767px) {
  .c-global-nav__link:hover, .c-global-nav__link:focus {
    background-color: #e3f2f9; /* ホバーやフォーカス時のハイライト背景色 */
  }
}
.c-global-nav {
  /* ---- 現在ページのリンク設定（ハンバーガーメニュー） ---- */
}
@media only screen and (max-width: 767px) {
  .c-global-nav__item--current .c-global-nav__link {
    color: #24afda;
  }
}
.c-global-nav {
  /* ============================================================
      ▼ フッター設定
     ============================================================ */
}
.c-global-nav--footer {
  /* ▼ スマホ幅では通常フローで常時表示にする ▼ */
}
@media (max-width: 767px) {
  .c-global-nav--footer {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    max-width: none;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    padding-top: 0;
    transform: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}
.c-global-nav--footer .c-global-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex-direction: column;
}
@media (min-width: 768px) {
  .c-global-nav--footer .c-global-nav__list {
    display: grid; /* flex を上書きして grid に */
    grid-template-columns: auto auto; /* 左右2カラム */
    justify-content: flex-end;
    row-gap: 0.4rem;
    text-align: left;
  }
}
@media (max-width: 767px) {
  .c-global-nav--footer .c-global-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
}
.c-global-nav--footer {
  /* ▼ ここで 1〜6 個目を縦2列に固定配置する */
  /* リンク数が増減した場合は grid-row の数を調整 */
}
@media (min-width: 768px) {
  .c-global-nav--footer .c-global-nav__item:nth-child(1) {
    grid-column: 1; /* 左カラム1列目 */
    grid-row: 1; /* 1行目 */
  }
  .c-global-nav--footer .c-global-nav__item:nth-child(2) {
    grid-column: 1; /* 左カラム1列目 */
    grid-row: 2; /* 2行目 */
  }
  .c-global-nav--footer .c-global-nav__item:nth-child(3) {
    grid-column: 1; /* 左カラム1列目 */
    grid-row: 3; /* 3行目 */
  }
  .c-global-nav--footer .c-global-nav__item:nth-child(4) {
    grid-column: 2; /* 右カラム2列目 */
    grid-row: 1; /* 1行目 */
  }
  .c-global-nav--footer .c-global-nav__item:nth-child(5) {
    grid-column: 2; /* 右カラム2列目 */
    grid-row: 2; /* 2行目 */
  }
  .c-global-nav--footer .c-global-nav__item:nth-child(6) {
    grid-column: 2; /* 右カラム2列目 */
    grid-row: 3; /* 3行目 */
  }
}
.c-global-nav--footer .c-global-nav__item {
  margin: 0;
}
.c-global-nav--footer .c-global-nav__link {
  display: inline-block;
  font-size: 0.85rem;
  color: white;
  text-decoration: none;
  white-space: nowrap;
  padding: 0;
}
.c-global-nav--footer .c-global-nav__link:hover, .c-global-nav--footer .c-global-nav__link:focus-visible {
  color: #24afda;
  background-color: black;
}

/* PC、スマホ対応グローバルナビゲーション（ヘッダーとフッター共通で使えます） */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_button-hero.scss */
.c-button-hero {
  color: white;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 9999px;
  background-color: #0170B9;
  /* box-shadow: 0 6px 16px rgba(28,120,192,0.25); */ /* 影をつける設定 */
  padding: 1rem 1.6rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
@media (max-width: 767px) {
  .c-button-hero {
    font-size: 1rem;
    width: 100%;
    max-width: 200px; /* ボタン群の最大幅 */
    padding: 1rem 1.2rem;
  }
}
.c-button-hero:hover, .c-button-hero:focus-visible {
  background: #1563a1;
  /* box-shadow: 0 10px 22px rgba(28,120,192,0.32); */ /* 影をつける設定 */
}

/* ヒーローセクション用ボタン */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_button-feature-card.scss */
/* ---- ボタン（feature-card用ボタン） ---- */
.c-button-feature-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #7a7a7a;
  font-weight: 400;
  font-size: 0.95rem;
  background-color: white;
  border: 1px solid #7a7a7a; /* ボタン内の文字色と同じ色設定 */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  width: auto;
  min-height: 44px;
  padding-inline: 1rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.c-button-feature-card:hover, .c-button-feature-card:focus-visible {
  color: white;
  background-color: #24AFDA;
  border: 1px solid #24AFDA; /* 背景色と同じ色設定 */
}
.c-button-feature-card {
  /* ---- 右向き山括弧アイコン ---- */
}
.c-button-feature-card::after {
  content: "›";
  font-size: 0.95rem; /* remで固定。ボタン本体のfont-size(0.95rem)と同じ値にして実効px(15.2px)を維持する。 */
  line-height: 1;
}

/* アイコン付きカード用ボタン */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_button-bg-wave-section.scss */
.c-button-bg-wave-section {
  color: white;
  font-size: 0.95rem;
  border: solid 1px white; /* 文字色と同じ色設定 */
  padding: 0.8rem 1.2rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.c-button-bg-wave-section--bottom {
  background-color: #0A9FD1; /* 背景色と同じ色設定 */
}
.c-button-bg-wave-section:hover, .c-button-bg-wave-section:focus-visible {
  color: white;
  background-color: #0170B9;
  border: 1px solid #0170B9; /* 背景色と同じ色設定 */
}

/* 背景色付きセクション用ボタン */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_column-image-text.scss */
.c-column-image-text {
  /* セクション背景と余白 */
  padding: 1rem 0;
  /* __bg-top,
    __bg-bottom
    背景色を設定したい時にに追加するクラス */
}
.c-column-image-text__bg-top, .c-column-image-text__bg-bottom {
  color: white;
}
.c-column-image-text__bg-top {
  background-color: #24AFDA; /* 背景色に合わせて_bg */
}
.c-column-image-text__bg-bottom {
  background-color: #0A9FD1; /* 青背景 */
}
.c-column-image-text {
  /* ▼ two_column_image_text で生成される要素 ▼ */
  /* 2カラムレイアウト */
}
.c-column-image-text__two-column {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  /* SPでは縦並び */
}
@media (max-width: 767px) {
  .c-column-image-text__two-column {
    flex-direction: column;
  }
}
.c-column-image-text {
  /* 画像エリア */
}
.c-column-image-text__image {
  flex: 1;
  /* 画像エリア内の中心に画像ファイルを配置する */
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-column-image-text__image img {
  border-radius: 20px; /* 角丸は自由 */
  object-fit: cover;
}
.c-column-image-text {
  /* コンテンツエリア */
}
.c-column-image-text__content {
  flex: 1;
}
.c-column-image-text {
  /* テキスト（マーケティング特有の空き） */
}
.c-column-image-text__text--basic-section, .c-column-image-text__text--bg-wave-section {
  display: grid;
  gap: 1.25rem;
  font-size: 1.1rem;
  line-height: 1.8;
}
.c-column-image-text__text--basic-section {
  color: #7a7a7a;
}
.c-column-image-text__text--bg-wave-section {
  color: white;
}
.c-column-image-text__button-wrapper {
  text-align: right;
}
.c-column-image-text {
  /* ---- title-image-content: 見出し→画像→本文の順に並べるレイアウト ---- */
}
.c-column-image-text__two-column--tic-image-first, .c-column-image-text__two-column--tic-content-first {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: 2.5rem;
  row-gap: 2rem;
}
.c-column-image-text__two-column--tic-image-first .c-column-image-text__title, .c-column-image-text__two-column--tic-content-first .c-column-image-text__title {
  grid-area: title;
}
.c-column-image-text__two-column--tic-image-first .c-column-image-text__title .c-section-heading, .c-column-image-text__two-column--tic-content-first .c-column-image-text__title .c-section-heading {
  margin-bottom: 0;
}
.c-column-image-text__two-column--tic-image-first .c-column-image-text__image, .c-column-image-text__two-column--tic-content-first .c-column-image-text__image {
  grid-area: image;
}
.c-column-image-text__two-column--tic-image-first .c-column-image-text__content, .c-column-image-text__two-column--tic-content-first .c-column-image-text__content {
  grid-area: content;
}
.c-column-image-text__two-column--tic-image-first {
  grid-template-areas: "image title" "image content";
}
.c-column-image-text__two-column--tic-content-first {
  grid-template-areas: "title image" "content image";
}
@media (max-width: 767px) {
  .c-column-image-text__two-column--tic-image-first, .c-column-image-text__two-column--tic-content-first {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "title" "image" "content";
    column-gap: 0;
    row-gap: 2.5rem;
  }
}

/* PC時に画像＋テキスト横並びのレイアウト構造のセクション用 */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_section-heading.scss */
/* =========================================================
    Component: section-heading（汎用セクション見出し）
    ---------------------------------------------------------
    左ライン型
   ========================================================= */
.c-section-heading {
  position: relative;
  display: grid; /* ENとJPを縦並び */
  row-gap: 0.5rem; /* ENとJPの隙間 */
  padding-left: 1rem; /* 左ライン本体とタイトル文字間の余白 */
  margin-bottom: 2rem;
  /* ---- 左側ライン本体 ---- */
}
.c-section-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem; /* 左ライン本体の上部の余白調整用 */
  bottom: 0.25rem; /* 左ライン本体の下部の余白調整用 */
  background: transparent;
  border-left: solid 5px #0170B9;
}
.c-section-heading {
  /* ---- 英字見出し（上） ---- */
}
.c-section-heading--en {
  display: inline-block;
  color: #3a3a3a;
  font-size: 0.8rem;
}
.c-section-heading {
  /* ---- 日本語見出し（下） ---- */
}
.c-section-heading--jp {
  font-size: 1.5rem;
  color: #3a3a3a;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 921px) {
  .c-section-heading--jp {
    font-size: 1.3rem;
  }
}
@media (max-width: 767px) {
  .c-section-heading--jp {
    font-size: 1.3rem;
  }
}
.c-section-heading {
  /* ---- 中央寄せ（左ラインを消す） ---- */
}
.c-section-heading.is-center {
  text-align: center;
  padding-left: 0;
}
.c-section-heading.is-center::before {
  display: none;
}
.c-section-heading {
  /* ---- 左ラインを消したい時に設定してください。 ---- */
}
.c-section-heading.is-no-line {
  padding-left: 0;
}
.c-section-heading.is-no-line::before {
  display: none;
}

/* 見出し */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_section-heading-line.scss */
/* =========================================================
    Component: section-heading-line
    ---------------------------------------------------------
    上下ライン型（--lined）
    - 要素修飾子: .block__heading--lined
   ========================================================= */
/* ---- 要素修飾子 ---- */
.c-section-heading-line {
  position: relative;
  color: white;
  font-size: 1.5rem;
  font-weight: 400;
  text-align: left; /* 既定は左揃え */
  line-height: 1;
  padding-left: 0; /* 左ライン余白をリセット */
  margin-block: 2rem;
  /* ---- モバイルでは中央寄せ ---- */
}
@media (max-width: 767px) {
  .c-section-heading-line {
    text-align: center;
    font-size: 1.3rem;
  }
}
.c-section-heading-line {
  /* ---- 上下の水平ライン ---- */
}
.c-section-heading-line::before, .c-section-heading-line::after {
  content: "";
  display: block;
  height: 1px;
  background: white; /* 上下ラインの色　タイトルの文字色と同じ設定 */
}
.c-section-heading-line {
  /* ---- ラインの余白 ---- */
}
.c-section-heading-line::before {
  margin-bottom: 1rem; /* 上部ライン余白 */
}
.c-section-heading-line::after {
  margin-top: 1rem; /* 下部ライン余白 */
}

/* 見出し（上下ライン付き） */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_feature-card.scss */
/* =========================================================
    Component: feature-card（機能カード）
   ========================================================= */
/* ===== カード本体 ===== */
.c-feature-card {
  position: relative;
  display: flex;
  flex-direction: column; /* 縦並び: タイトル→アイコン→ボタン */
  align-items: center; /* カードの中身を中央寄せ */
  justify-content: space-between; /* 縦方向に均等に並べる */
  text-align: center;
  padding: 1rem;
  background-color: white;
  border-radius: 20px; /* カードの角を丸める */
  /* min-height: 220px; */ /* 上段の見た目に近い高さ感 */
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); */ /* 影をつける設定 */
  /* ---- タイトル ---- */
}
.c-feature-card__title {
  color: #3a3a3a;
  /* font-size: 1rem; */
  font-weight: 400;
  /* 改行< br >が入る場合、余計な余白を抑制する */
}
.c-feature-card__title br {
  content: "";
}
.c-feature-card__title-top {
  font-size: 1.2rem;
}
.c-feature-card {
  /* ---- アイコン領域（FA or 画像）---- */
}
.c-feature-card__icon {
  display: grid;
  width: 100%;
  margin-block: 0.5rem;
  place-content: center;
}

/* 機能紹介カード */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_feature-detail.scss */
.c-feature-detail__item {
  display: grid;
  align-items: center;
  gap: 0;
}
@media (max-width: 767px) {
  .c-feature-detail__item {
    grid-template-columns: 100%;
  }
}
.c-feature-detail__item--image-first {
  grid-template-columns: 33.333% 66.667%;
}
.c-feature-detail__item--image-first .c-feature-detail__heading {
  margin-bottom: 1.25rem;
}
@media (max-width: 767px) {
  .c-feature-detail__item--image-first {
    grid-template-columns: 100%;
  }
}
.c-feature-detail__item--content-first {
  grid-template-columns: 66.667% 33.333%;
  padding: 0;
}
@media (max-width: 1024px) {
  .c-feature-detail__item--content-first {
    padding: 0 0.63rem;
  }
}
@media (max-width: 767px) {
  .c-feature-detail__item--content-first {
    grid-template-columns: 100%;
    padding: 0 1.25rem;
  }
}
.c-feature-detail__item--content-first .c-feature-detail__image img,
.c-feature-detail__item--content-first .c-feature-detail__mobile-image img {
  border: 1px solid #c9c9c9;
}
.c-feature-detail__item--content-first .c-feature-detail__image--borderless img,
.c-feature-detail__item--content-first .c-feature-detail__mobile-image--borderless img {
  border: 0;
}
.c-feature-detail__item--content-first .c-feature-detail__heading {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 1.25rem;
  line-height: 1;
}
@media (max-width: 767px) {
  .c-feature-detail__item--content-first .c-feature-detail__heading {
    font-size: 1.3rem;
  }
}
.c-feature-detail__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.63rem;
}
@media (max-width: 767px) {
  .c-feature-detail__image {
    display: none;
  }
}
.c-feature-detail__image a {
  display: block;
}
.c-feature-detail__image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}
.c-feature-detail__image--stacked {
  position: relative;
  padding: 0 2.5rem 2.5rem 0;
  margin-left: 0.63rem;
  overflow: visible;
}
.c-feature-detail__image-first {
  position: relative;
  z-index: 1;
  top: -1rem;
}
.c-feature-detail__mobile-image {
  display: none;
}
@media (max-width: 767px) {
  .c-feature-detail__mobile-image {
    display: block;
    justify-self: center;
    margin-bottom: 1.25rem;
  }
}
.c-feature-detail__mobile-image a {
  display: block;
}
.c-feature-detail__mobile-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}
.c-feature-detail__content {
  min-width: 0;
}
.c-feature-detail__content:not(.c-feature-detail__content--card) {
  padding: 0.63rem;
}
.c-feature-detail__content--card {
  border: 1px solid white;
  border-radius: 20px;
  padding: 1.88rem;
  min-height: 16rem;
  align-content: center;
}
@media (max-width: 767px) {
  .c-feature-detail__content--card {
    min-height: auto;
    padding: 1.25rem;
  }
}
.c-feature-detail__heading {
  font-size: 1.88rem;
  line-height: 1.3;
  color: white;
}
@media (max-width: 921px) {
  .c-feature-detail__heading {
    font-size: 1.56rem;
  }
}
@media (max-width: 767px) {
  .c-feature-detail__heading {
    text-align: center;
  }
}
.c-feature-detail {
  /* 2枚目画像の表示エリアです。
     1枚目の右下に重ねて配置します。 */
}
.c-feature-detail__image-second {
  position: absolute;
  top: 2rem;
  left: 2.5rem;
  z-index: 2;
  width: calc(100% - 2.5rem);
  margin: 0;
}
.c-feature-detail__image-second a {
  display: block;
}
.c-feature-detail__image-second img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}
.c-feature-detail__mobile-image--stacked {
  position: relative;
  padding: 0;
  overflow: visible;
}
@media (max-width: 767px) {
  .c-feature-detail__mobile-image--stacked {
    /* 767px以下は2枚を同じ行に配置し、見出し・本文との重なりを防ぎます。 */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .c-feature-detail__mobile-image--stacked .c-feature-detail__image-first,
  .c-feature-detail__mobile-image--stacked .c-feature-detail__image-second {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    z-index: auto;
  }
  .c-feature-detail__mobile-image--stacked .c-feature-detail__image-first img,
  .c-feature-detail__mobile-image--stacked .c-feature-detail__image-second img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
@media (max-width: 479px) {
  .c-feature-detail__mobile-image--stacked {
    /* 479px以下は元ページに合わせて2枚を縦に配置します。 */
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  .c-feature-detail__mobile-image--stacked .c-feature-detail__image-first,
  .c-feature-detail__mobile-image--stacked .c-feature-detail__image-second {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .c-feature-detail__mobile-image--stacked .c-feature-detail__image-first img,
  .c-feature-detail__mobile-image--stacked .c-feature-detail__image-second img {
    width: auto;
    max-width: 100%;
  }
}
.c-feature-detail__text {
  display: grid;
  gap: 0.5rem;
  font-size: 1.1rem;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .c-feature-detail__text {
    font-size: 1rem;
  }
}

/* 画像＋見出し＋本文の詳細項目 */
/* object/component/_feature-note.scss */
.c-feature-note {
  padding: 0 0.63rem;
  margin-bottom: 3.5rem;
}
.c-feature-note__heading {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1;
  text-align: left;
}
.c-feature-note__divider {
  width: 100%;
  height: 1px;
  background-color: currentColor;
  margin: 1.25rem 0;
}
.c-feature-note__content {
  font-size: 1.1rem;
  line-height: 1.6;
}
.c-feature-note__content ul {
  list-style: disc outside;
  margin: 0 0 1.5em 3em;
  padding: 0;
}
.c-feature-note__content li {
  list-style: inherit;
}
@media (max-width: 1024px) {
  .c-feature-note {
    padding: 0 1.25rem;
  }
}
@media (max-width: 767px) {
  .c-feature-note__heading {
    font-size: 1.3rem;
  }
  .c-feature-note__content {
    font-size: 1rem;
  }
}

/* 見出し＋区切り線＋本文のテキスト形式機能項目 */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_section-divider.scss */
.c-section-divider {
  background-color: #24AFDA;
  padding: 1.25rem;
}
.c-section-divider__line {
  border: 0;
  border-top: 1px dashed white;
  margin: 0;
}
.c-section-divider--compact {
  padding: 0.94rem 0;
}
.c-section-divider--compact > .u-inner--basic {
  padding-block: 0;
}
@media (max-width: 767px) {
  .c-section-divider--compact {
    padding: 0.13rem 0;
  }
}

/* セクション間の区切り線 */
/* object/component/_lightbox.scss */
.c-lightbox {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.c-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
}
.c-lightbox[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: none;
  max-height: none;
  overflow: hidden;
}
.c-lightbox__toolbar {
  position: absolute;
  top: 10px;
  right: 30px;
  z-index: 1;
  display: flex;
  gap: 4px;
}
.c-lightbox__btn {
  background: transparent;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.2s;
  /* reset.scssのFont Awesome共通サイズ指定をLightbox内では上書きします。 */
}
.c-lightbox__btn .fa,
.c-lightbox__btn .fas,
.c-lightbox__btn .far,
.c-lightbox__btn .fal,
.c-lightbox__btn .fab {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.c-lightbox__btn:hover {
  opacity: 1;
}
.c-lightbox__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.c-lightbox__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.c-lightbox__body.is-zoomed {
  overflow: auto;
}
.c-lightbox__body.is-zoomed .c-lightbox__image {
  transform: scale(1.5);
  transform-origin: center;
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.c-lightbox__image {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  cursor: zoom-in;
}
.c-lightbox__info {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color: white;
  padding: 12px 20px;
}
.c-lightbox__title {
  font-size: 0.9rem;
}
.c-lightbox__counter {
  font-size: 0.85rem;
  opacity: 0.7;
}
.c-lightbox__status {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 6px 16px;
  border-radius: 4px;
  pointer-events: none;
}

[data-lightbox] img {
  cursor: zoom-in;
}

/* 画像拡大表示 */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/component/_contact-link.scss */
/* _variables.scss（変数）を読み込む */
/* =========================================================
    Component: contact-link
   ========================================================= */
.c-contact-link {
  position: relative;
  /* 青背景セクション内で本文との間隔を確保する */
}
.c-contact-link--section {
  margin-top: 3rem;
}
.c-contact-link {
  /* 中身ラッパー */
}
.c-contact-link__content {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  background-color: white;
  border: 1px solid #24afda;
  /* 配置先から影色を指定できます。未指定の場合は既存の青色を使います。 */
  box-shadow: 10px 10px 10px 0px var(--contact-link-shadow-color, rgba(5, 136, 202, 0.5));
  padding-block: 1.2rem;
  padding-inline: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7rem;
}
@media (max-width: 767px) {
  .c-contact-link__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }
}
.c-contact-link {
  /* 見出し＋テキスト一式 */
}
.c-contact-link__title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
.c-contact-link {
  /* "Contact" 見出し */
}
.c-contact-link__title {
  color: #24afda;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .c-contact-link__title {
    font-size: 1.6rem;
  }
}
.c-contact-link {
  /* サブテキスト */
}
.c-contact-link__text {
  color: #7a7a7a;
  font-size: 0.95rem;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .c-contact-link__text {
    font-size: 0.9rem;
  }
}
.c-contact-link {
  /* ボタン周りラッパー */
}
.c-contact-link__buttn-wrapper {
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-contact-link__buttn-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
.c-contact-link {
  /* お問い合わせボタン本体
    ※クラス名はHTMLに合わせて buttn のまま */
}
.c-contact-link__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  border: 1px solid #24afda;
  background-color: white;
  color: #24afda;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
@media (max-width: 767px) {
  .c-contact-link__button {
    width: auto;
    padding-inline: 2rem;
  }
}
.c-contact-link__button:hover, .c-contact-link__button:focus-visible {
  background-color: #24afda;
  color: white;
  transform: translateY(-1px);
}
.c-contact-link {
  /* アイコン部分：メールアイコンをCSSで表示 */
}
.c-contact-link__button-icon .fa, .c-contact-link__button-icon .fas, .c-contact-link__button-icon .far, .c-contact-link__button-icon .fal, .c-contact-link__button-icon .fab {
  font-size: large;
  line-height: 1;
  color: #24AFDA;
}
.c-contact-link {
  /* ボタンテキスト */
}
.c-contact-link__button-text {
  display: inline-block;
}

/* お問い合わせフォームへのリンク */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_hero.scss */
/* =========================================================
    Project: Hero
   ========================================================= */
.p-hero {
  position: relative;
  color: #3a3a3a;
  overflow: hidden; /* 画像のはみ出し防止 */
  /* ヒーローの高さと内側余白 */
  min-height: 80vh; /* 端末高に応じて可変させる */
  padding-block: 5rem; /* 上下の余白 */
  padding-inline: 1.5rem; /* 左右の余白（安全域） */
  margin-bottom: 3rem;
}
@media (max-width: 767px) {
  .p-hero {
    /* 削除しないでください。 */
    /* min-height: 64vh; */ /* 端末高に応じて可変させる */
    min-height: unset; /* ChaRMeホームページでの設定 */
    padding-block: 3.5rem 2.5rem;
    margin-bottom: 1.2rem;
  }
}
.p-hero {
  /* トップ画像 */
}
.p-hero__top-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  /* cover基準でトリミングしつつ拡大し過ぎを防げるよう後述で切替 */
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none; /* 背景なので操作不可 */
  /* 超横長だけ contain に変更（ズーム抑制） */
}
@media (min-width: 1600px) {
  .p-hero__top-image {
    object-fit: contain;
  }
}
@media (max-width: 1599px) {
  .p-hero__top-image {
    height: 100%;
  }
}
.p-hero__top-image {
  /* SPで上寄せ（女性の顔に重ならない調整と親コメント方針に合わせる） */
}
@media (max-width: 767px) {
  .p-hero__top-image {
    object-position: center top;
  }
}
.p-hero {
  /* ---------------------------------------------
      コンテンツのレイアウト（中央寄せ／最大幅）
     --------------------------------------------- */
}
.p-hero__content {
  position: relative; /* ::before の上に載せる */
  z-index: 1;
  max-width: 800px; /* 画像最大幅 */
  margin-inline: auto; /* __contentを画面中央に表示させる設定 */
  min-height: inherit; /* 画像最小の高さ */
  /* __content-wrapperの位置調整 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: self-start;
}
@media (max-width: 767px) {
  .p-hero__content {
    max-width: 550px; /* 画像最大幅 */
  }
}
.p-hero__content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直センタリング */
  align-items: center; /* PCは左寄せ */
  gap: 1.25rem; /* 要素間余白 */
}
@media (max-width: 767px) {
  .p-hero__content-wrapper {
    gap: 1rem;
  }
}
@media (max-width: 525px) {
  .p-hero__content-wrapper {
    /* 525px以下では各要素を左端に揃え、人物との重なりを避ける */
    align-items: flex-start;
  }
}
.p-hero {
  /* タイトル */
}
.p-hero__title {
  margin: 0;
  font-weight: 300;
  font-size: 2rem;
  text-align: center;
  line-height: 1.6em;
  letter-spacing: 4px;
}
@media (max-width: 767px) {
  .p-hero__title {
    font-size: 1rem;
  }
}
@media (max-width: 525px) {
  .p-hero__title {
    text-align: left;
  }
}
.p-hero {
  /* サブタイトル */
}
.p-hero__subtitle {
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
}
@media (max-width: 767px) {
  .p-hero__subtitle {
    font-size: 0.9rem;
  }
}
@media (max-width: 525px) {
  .p-hero__subtitle {
    text-align: left;
  }
}
.p-hero {
  /* タイトルとサブタイトルに白フチを付ける */
}
.p-hero__title, .p-hero__subtitle {
  text-shadow: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
}
.p-hero {
  /* ロゴ（画像サイズは比率に依存、幅だけ管理） */
}
.p-hero__logo {
  margin-top: 0.5rem;
}
.p-hero__logo img {
  display: block;
  width: 100%; /* PC大きめ、SPは画面に合わせて小さく */
  max-width: 300px;
  height: auto;
}
@media (max-width: 767px) {
  .p-hero__logo img {
    max-width: 250px;
  }
}
.p-hero {
  /* アクションボタン群（PC横並び→SPで縦並び） */
}
.p-hero__actions {
  display: flex; /* 横並び */
  align-items: center;
  margin-top: 0.5rem;
  gap: 1rem;
  width: 100%;
}
@media (max-width: 767px) {
  .p-hero__actions {
    flex-direction: column; /* 縦並び */
    gap: 0.75rem;
  }
}
@media (max-width: 525px) {
  .p-hero__actions {
    align-items: flex-start;
  }
}

/* ヒーローセクション */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_feature-section.scss */
/* =========================================================
    Project: Features（特徴紹介）横並びカード
    - PC：横並び2カラム
    - SP：縦並び
    - 画像 + テキストのシンプル構成
   ========================================================= */
.p-feature-section {
  display: flex; /* 横並びレイアウト */
  gap: 2rem; /* カード間の余白 */
}
@media (max-width: 767px) {
  .p-feature-section {
    gap: 1rem;
    /* flex-direction: column; */ /* 縦並びに変更 */
  }
}
.p-feature-section {
  /* 各特徴カード（1項目） */
}
.p-feature-section__area {
  flex: 1; /* 均等幅 */
  text-align: center; /* タイトル中央寄せ */
}
.p-feature-section {
  /* 画像ラッパー（比率制御・overflowで安全に） */
}
.p-feature-section__image {
  width: 100%;
  overflow: hidden; /* 画像がはみ出さないように */
  margin-bottom: 1rem; /* 画像とタイトルの間隔 */
}
.p-feature-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 切り抜きで収める */
  display: block; /* 余計な余白を防ぐ */
  /* border-radius: 0.5rem; */ /* 角丸をつける */
}
.p-feature-section {
  /* タイトル文字 */
}
.p-feature-section__title {
  font-size: 1.1rem;
  font-weight: 400;
  color: #3a3a3a;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 767px) {
  .p-feature-section__title {
    font-size: 1rem;
  }
}

/* セクション内の説明文の特徴 */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_main-features-index.scss */
.p-main-features-index__intro-wrapper {
  border: 1px solid #24afda;
  border-radius: 30px 30px 0 0;
  padding: 2rem;
}
.p-main-features-index__intro-image {
  width: 100%;
  max-width: 425px;
  height: auto;
}
.p-main-features-index__intro-title {
  color: #54595f;
  font-size: 1.7rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #54595f; /* colorと同じ色を設定 */
}
.p-main-features-index__intro-text {
  color: #7a7a7a;
}
.p-main-features-index__card-wrapper {
  border: 1px solid #24afda;
  border-radius: 0 0 30px 30px;
  background-color: #24afda; /* borderと同じ色を設定 */
  padding: 2rem;
}
.p-main-features-index__card-area-bottom {
  width: 100%;
  max-width: 980px;
  justify-self: center;
}
.p-main-features-index__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 横に4つ並べる */
}
@media (max-width: 767px) {
  .p-main-features-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 横に2つ並べる */
  }
}
@media (max-width: 525px) {
  .p-main-features-index__grid {
    grid-template-columns: 1fr; /* 縦並び */
    gap: 1rem;
  }
}
.p-main-features-index__feature-card-border-bottom {
  border-bottom: 1px dashed white;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

/* 主要機能紹介 */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_main-features-hero.scss */
/* foundation/_mixins.scss
  プロジェクト共通のSass mixinを定義します。 */
/* セクション下部の斜め装飾SVGのスタイル。
   fill色だけがセクションごとに異なるため、引数で受け取ります。 */
.p-main-features-hero .u-inner--basic {
  max-width: 1140px;
  padding: 0;
}
.p-main-features-hero__intro, .p-main-features-hero__overview {
  position: relative;
  isolation: isolate;
}
.p-main-features-hero__intro {
  padding-top: 1.25rem;
}
@media (max-width: 1024px) {
  .p-main-features-hero__intro {
    padding-top: 1.88rem;
  }
}
@media (max-width: 767px) {
  .p-main-features-hero__intro {
    padding-top: 1.88rem;
  }
}
.p-main-features-hero__intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23E3F2F9' d='M0,6V0h1000v100L0,6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media (max-width: 767px) {
  .p-main-features-hero__intro::before {
    height: 150px;
  }
}
.p-main-features-hero__intro .u-inner--basic {
  padding: 0 3.75rem;
}
@media (max-width: 767px) {
  .p-main-features-hero__intro .u-inner--basic {
    padding: 0 1.25rem;
  }
}
.p-main-features-hero__intro .c-section-heading {
  margin-bottom: 2rem;
  row-gap: 0.5rem;
}
.p-main-features-hero__intro .c-section-heading--en {
  font-size: 1.22rem;
  line-height: 1.5;
  color: #24AFDA;
}
.p-main-features-hero__intro .c-section-heading--jp {
  margin-top: 0;
  font-size: 2.53rem;
  line-height: 1.2;
  color: #54595f;
}
@media (max-width: 921px) {
  .p-main-features-hero__intro .c-section-heading--en {
    font-size: 1.11rem;
  }
  .p-main-features-hero__intro .c-section-heading--jp {
    font-size: 2.31rem;
  }
}
@media (max-width: 767px) {
  .p-main-features-hero__intro .c-section-heading--jp {
    font-size: 1.88rem;
  }
}
.p-main-features-hero__intro .c-column-image-text__two-column {
  gap: 1.25rem;
}
.p-main-features-hero__intro .c-column-image-text__text--basic-section {
  gap: 0;
  padding: 0.63rem;
  font-size: 1.2rem;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .p-main-features-hero__intro .c-column-image-text__text--basic-section {
    font-size: 1rem;
  }
}
.p-main-features-hero__intro .c-column-image-text__image {
  flex: 1 1 33%;
}
@media (max-width: 767px) {
  .p-main-features-hero__intro .c-column-image-text__image {
    display: none;
  }
}
.p-main-features-hero__intro .c-column-image-text__content {
  flex: 1 1 66%;
  margin-left: 1.88rem;
}
@media (max-width: 767px) {
  .p-main-features-hero__intro .c-column-image-text__content {
    margin-left: 0;
    padding-bottom: 1.25rem;
  }
}
.p-main-features-hero__image {
  box-shadow: 26px 20px 0 0 rgba(43, 187, 241, 0.5);
  object-fit: cover;
}
.p-main-features-hero .p-main-features-hero__image {
  border-radius: 10rem 10rem 10rem 10rem;
}
.p-main-features-hero__overview {
  padding: 0 1.88rem 0.94rem 1.88rem;
}
@media (max-width: 767px) {
  .p-main-features-hero__overview {
    padding: 0 0.63rem 0 0.63rem;
  }
}
.p-main-features-hero__overview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%2324AFDA' d='M0,6V0h1000v100L0,6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleX(-1) scaleY(-1);
  transform-origin: center;
}
@media (max-width: 767px) {
  .p-main-features-hero__overview::after {
    height: 150px;
  }
}
.p-main-features-hero__overview-frame {
  border: 1px solid #24afda;
  border-radius: 30px;
  padding: 1.25rem;
  margin: 1.25rem 0;
  background-color: #FFFFFF;
}
@media (max-width: 767px) {
  .p-main-features-hero__overview-frame {
    margin: 0;
  }
}
.p-main-features-hero__overview-image {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin-inline: auto;
}
.p-main-features-hero__navigation-area {
  background-color: #24AFDA;
}
.p-main-features-hero__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  justify-content: center;
  padding: 0.63rem 0 1.88rem 0;
}
@media (max-width: 767px) {
  .p-main-features-hero__nav-list {
    padding: 1.25rem 0.31rem 0.94rem 0.31rem;
    row-gap: 0.63rem;
  }
}
.p-main-features-hero__nav-item {
  display: flex;
  flex: 0 0 25%;
  justify-content: center;
  padding-inline: 0.31rem;
}
@media (max-width: 767px) {
  .p-main-features-hero__nav-item {
    flex: 0 0 50%;
  }
}
.p-main-features-hero__nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 40px;
  padding: 0.81rem 1.88rem;
  font-size: 0.94rem;
  border-radius: 3px;
  color: #24AFDA;
  background-color: white;
  border: 1px solid #24AFDA;
}
@media (max-width: 767px) {
  .p-main-features-hero__nav-link {
    width: 100%;
  }
}
.p-main-features-hero__nav-link:hover, .p-main-features-hero__nav-link:focus-visible {
  background-color: #0170B9;
  color: #E3F2F9;
  border-color: #0170B9;
}
.p-main-features-hero__closing-decoration {
  line-height: 0;
  overflow: hidden;
}
.p-main-features-hero__closing-decoration svg {
  display: block;
  position: relative;
  left: 50%;
  width: calc(100% + 1.3px);
  height: 90px;
  transform: translateX(-50%) scaleX(-1);
  fill: #24AFDA;
}
@media (max-width: 767px) {
  .p-main-features-hero__closing-decoration svg {
    height: 60px;
  }
}

/* 主要機能ページ 導入エリア */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_main-features-hero.scss */
/* object/project/_main-features-feature-section.scss
  主要機能ページの各セクション（顧客管理・Sales management等）で共通する
  feature-detail レイアウト・見出しエリア・本文エリアの設定をまとめます。 */
/* 本文エリア上部の斜め装飾SVG（白）。各セクション共通の形状・塗り色です。 */
.p-main-features-feature-section {
  margin-bottom: 1rem;
}
.p-main-features-feature-section .u-inner--basic {
  max-width: 1140px;
  padding: 0;
}
.p-main-features-feature-section__heading-area .c-section-heading {
  margin-bottom: 0;
}
.p-main-features-feature-section__heading-area {
  /* 見出し色は元ページの --e-global-color-primary / --e-global-color-text に対応します。
    変数名は初回実装時の顧客管理セクション由来ですが、全セクション共通の値・役割です。 */
}
.p-main-features-feature-section__heading-area .c-section-heading--en {
  color: #BDD1D8;
  font-size: 1.25rem;
  line-height: 1.2;
}
.p-main-features-feature-section__heading-area .c-section-heading--jp {
  color: #7A7A7A;
  font-size: 2.5rem;
  line-height: 1.4;
}
@media (max-width: 921px) {
  .p-main-features-feature-section__heading-area .c-section-heading--en {
    font-size: 1.14rem;
  }
  .p-main-features-feature-section__heading-area .c-section-heading--jp {
    font-size: 1.88rem;
  }
}
.p-main-features-feature-section__body {
  position: relative;
  isolation: isolate;
  background-color: #24AFDA;
  color: white;
  padding: 0 0 0.63rem 0;
}
.p-main-features-feature-section__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0,6V0h1000v100L0,6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleX(-1);
  z-index: 0;
}
@media (max-width: 1024px) {
  .p-main-features-feature-section__body::before {
    height: 90px;
  }
}
.p-main-features-feature-section__body > .u-inner--basic {
  position: relative;
  z-index: 1;
}
.p-main-features-feature-section {
  /* 「オプション機能」バッジです。
    feature_detail マクロの heading_note_modifier に指定して使用します。
    顧客管理・営業管理・問い合わせ集約セクション共通です。 */
}
.p-main-features-feature-section__option-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 1rem;
  text-align: center;
  font-size: 0.89rem;
  font-weight: 400;
  color: white;
  border: 1px solid white;
  border-radius: 3px;
  padding: 0.25rem 0.75rem;
}
.p-main-features-feature-section {
  /* contact-link パーシャルの余白設定。
    顧客管理・営業管理セクション共通です。 */
}
.p-main-features-feature-section .c-contact-link {
  margin: 0.6rem;
}
.p-main-features-feature-section {
  /* 下部の斜め装飾SVG（opacity-tilt）。
    顧客管理・営業管理セクション共通です。 */
}
.p-main-features-feature-section__closing-decoration {
  line-height: 0;
  overflow: hidden;
}
.p-main-features-feature-section__closing-decoration svg {
  display: block;
  position: relative;
  left: 50%;
  width: calc(100% + 1.3px);
  height: 90px;
  transform: translateX(-50%) scaleX(-1);
  fill: #24AFDA;
}
@media (max-width: 767px) {
  .p-main-features-feature-section__closing-decoration svg {
    height: 60px;
  }
}

/* 同じ機能項目の余白・導入レイアウトを主要機能と勤怠管理で共有します。 */
:is(.p-main-features-feature-section__body, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) > .u-inner--basic {
  max-width: 1140px;
  padding: 0.63rem 1rem;
}
@media only screen and (max-width: 767px) {
  :is(.p-main-features-feature-section__body, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) > .u-inner--basic {
    padding: 0.63rem;
  }
}

:is(.p-main-features-feature-section, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) .c-feature-detail__item--content-first {
  margin-bottom: 3.75rem;
}
:is(.p-main-features-feature-section, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) .c-feature-detail__item--content-first:last-child {
  margin-bottom: 1.88rem;
}
@media (max-width: 767px) {
  :is(.p-main-features-feature-section, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) .c-feature-detail__item--image-first .c-feature-detail__heading {
    font-size: 1.44rem;
  }
}
:is(.p-main-features-feature-section, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) .c-feature-detail__item--intro {
  padding: 0 3.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1024px) {
  :is(.p-main-features-feature-section, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) .c-feature-detail__item--intro {
    padding: 0 1.88rem;
  }
}
@media (max-width: 767px) {
  :is(.p-main-features-feature-section, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) .c-feature-detail__item--intro {
    padding: 0 1.25rem;
  }
}
:is(.p-main-features-feature-section, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) .c-feature-detail__item--intro .c-feature-detail__content {
  margin-top: 3.13rem;
  margin-left: 1.25rem;
}
@media (max-width: 767px) {
  :is(.p-main-features-feature-section, .p-work-manage__daily-work-data, .p-work-manage__feature-sections) .c-feature-detail__item--intro .c-feature-detail__content {
    margin-left: 0;
  }
}

/* 主要機能ページ 共通feature-detail設定 */
/* object/project/_main-features-customer-management.scss
   顧客管理・分析機能セクション固有の設定です。
   共通設定は _main-features-feature-section.scss にあります。 */
.p-main-features-customer-management .c-feature-detail__item--intro .c-feature-detail__image {
  /* 元ページの column-gap-default 由来 10px + 画像ウィジェット由来 16px の合算です。
     下だけ 56px: 画像側の総高さを増やし、align-items: center で中央配置される本文の位置を下げる再構築上の補正です。 */
  padding: 1.63rem 1.63rem 3.5rem;
}

/* 主要機能ページ 顧客管理セクション */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_main-features-sales-management.scss
   営業・商談状況管理セクション固有の設定です。
   共通設定は _main-features-feature-section.scss にあります。 */
.p-main-features-sales-management .c-feature-detail__item--intro .c-feature-detail__image {
  /* 元ページ elementor-element-194f05c 由来の余白です。 */
  padding: 1rem;
}
.p-main-features-sales-management {
  /* 販売支援パートの本文エリアです。
     営業分析パートと異なり上部の斜めSVG装飾を表示しません。
     背景色は共通 __body クラスから継承します。
     元ページ elementor-element-ae1e059 に対応します。 */
}
.p-main-features-sales-management__selling-body::before {
  display: none;
}
.p-main-features-sales-management {
  /* 販売支援パート導入項目の画像余白です。
     元ページ elementor-element-7bf4c63 に対応します。 */
}
.p-main-features-sales-management__selling-intro .c-feature-detail__image {
  padding: 0.63rem 1rem;
}

/* 主要機能ページ 営業・商談状況管理セクション */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_main-features-other.scss */
/* =========================================================
    Project: main-features-other（その他セクション）
   ========================================================= */
.p-main-features-other {
  padding-block: 2rem;
}
.p-main-features-other__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1000px;
  margin-block-start: 1.25rem;
  margin-inline: auto;
  padding-inline: 0.63rem;
}
@media (max-width: 767px) {
  .p-main-features-other__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== その他用カードmodifier ===== */
.c-feature-card--other {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  background-color: transparent;
  border-radius: 0;
  padding: 1.3rem;
  gap: 0 0.63rem;
}
.c-feature-card--other .c-feature-card__icon {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  margin-block: 0;
  align-self: center;
}
.c-feature-card--other .c-feature-card__icon i {
  font-size: 30px;
}
.c-feature-card--other .c-feature-card__content {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
}
@media (max-width: 767px) {
  .c-feature-card--other {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    row-gap: 0.63rem;
  }
  .c-feature-card--other .c-feature-card__icon {
    grid-column: 1;
    grid-row: 1;
  }
  .c-feature-card--other .c-feature-card__content {
    grid-column: 1;
    grid-row: 2;
    gap: 0.63rem;
  }
}
.c-feature-card--other .c-feature-card__title {
  color: #54595f;
  font-size: 1.13rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}
@media (min-width: 768px) and (max-width: 921px) {
  .c-feature-card--other .c-feature-card__title {
    font-size: 1.03rem;
  }
}
@media (max-width: 767px) {
  .c-feature-card--other .c-feature-card__title {
    font-size: 0.86rem;
    line-height: 1.25;
  }
}
.c-feature-card--other .c-button-feature-card {
  color: #24afda;
  background-color: white;
  border: 1px solid #24afda;
  font-size: 0.81rem;
  min-height: auto;
  padding: 0.38rem 0.94rem;
  border-radius: 5px;
}
.c-feature-card--other .c-button-feature-card:hover, .c-feature-card--other .c-button-feature-card:focus-visible {
  color: white;
  background-color: #24AFDA;
  border: 1px solid #24AFDA;
}
.c-feature-card--other .c-button-feature-card {
  /* 元ページにないボタン右向き記号を非表示にする */
}
.c-feature-card--other .c-button-feature-card::after {
  display: none;
}

/* 主要機能ページ その他セクション */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_download-pamphlet.scss */
/* =========================================================
    Project: p-download-pamphlet
   ========================================================= */
.p-download-pamphlet {
  /* 資料ダウンロードの枠線 */
}
.p-download-pamphlet__wrapper {
  border: 1px solid #24afda;
  border-radius: 30px;
  box-shadow: 0px 0px 10px 0px rgba(36, 175, 218, 0.5019607843);
  padding: 2rem;
}
.p-download-pamphlet {
  /* 見出し */
}
.p-download-pamphlet__title {
  font-size: 1.6rem;
  font-weight: 300;
  color: #24AFDA;
  text-align: center;
  line-height: 1.4;
  width: 100%;
  max-width: 300px;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: dashed 1px #e3f2f9;
  justify-self: center;
}
.p-download-pamphlet {
  /* グリッドでパンフレット一覧を表示 */
}
.p-download-pamphlet__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 横に3つ並べて表示 */
}
@media (max-width: 767px) {
  .p-download-pamphlet__grid {
    grid-template-columns: 1fr; /* 1つずつ縦に表示 */
  }
}
.p-download-pamphlet {
  /* 各アイテム */
}
.p-download-pamphlet__item-wrapper {
  width: 100%;
  justify-items: center;
  text-align: center;
}
@media (max-width: 767px) {
  .p-download-pamphlet__item-wrapper {
    margin-bottom: 3rem;
  }
  .p-download-pamphlet__item-wrapper:last-child {
    margin-bottom: 0;
  }
}
.p-download-pamphlet {
  /* パンフレットサムネイル画像 */
}
.p-download-pamphlet__image-wrapper {
  width: 100%;
  max-width: 100px;
  margin-bottom: 1rem;
  justify-self: center;
}
.p-download-pamphlet__image {
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 10px 0px rgba(36, 175, 218, 0.5019607843); /* サムネイルのボックスシャドウ */
  object-fit: cover;
}
.p-download-pamphlet {
  /* パンフレットタイトル（2行程度までの想定です） */
}
.p-download-pamphlet__item-title {
  color: #0170B9;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  transition: color 0.15s ease;
}
.p-download-pamphlet__item-title:hover {
  color: #24afda;
}

/* 資料ダウンロード */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_environment.scss */
/* =========================================================
    Project: p-environment（動作環境）
   ========================================================= */
.p-environment {
  /* -----------------------------------------
      コンテンツ本体（ネットワーク環境／対応ブラウザ）
      PC: 2カラム / SP: 1カラム
     ----------------------------------------- */
}
.p-environment__content {
  width: 100%;
  max-width: 760px;
  justify-self: center;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 横に2列で表示する */
}
@media (max-width: 767px) {
  .p-environment__content {
    grid-template-columns: 1fr; /* 縦に1列で表示する */
    gap: 1.5rem;
    text-align: center;
  }
}
.p-environment {
  /* 各項目ブロック */
}
.p-environment__item {
  font-size: 0.95rem;
  line-height: 1.8;
}
.p-environment {
  /* 項目タイトル */
}
.p-environment__item-title {
  color: #3a3a3a;
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
}
.p-environment {
  /* 箇条書き */
}
.p-environment__list {
  color: #7a7a7a;
  padding-left: 1.2rem;
  margin: 0;
}
@media (max-width: 767px) {
  .p-environment__list {
    padding-left: 0;
  }
}
.p-environment__list-item {
  padding-left: 0;
}

/* 動作環境 */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_news.scss */
/* =========================================================
  Project: p-news（お知らせ一覧）
  ========================================================= */
.p-news {
  background-color: #e3f2f9; /* お知らせセクション独自の背景色 */
  /* 一覧ボックス（白い枠部分） */
}
.p-news__list {
  width: 100%;
  max-width: 760px;
  justify-self: center;
  margin-top: 2rem;
  background-color: white;
  border: 1px solid #d4e4ee;
  border-radius: 2px;
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}
@media (max-width: 767px) {
  .p-news__list {
    padding: 1rem 1.25rem;
  }
}
.p-news {
  /* 各お知らせ行 */
}
.p-news__item {
  display: grid;
  color: #7a7a7a;
  text-decoration: none;
  grid-template-columns: auto 1fr;
  column-gap: 2rem;
  align-items: baseline;
  padding-block: 0.2rem;
  /* border-bottom: 1px solid #eef4f8;*/ /* 各お知らせ行の間に区切り線を入れる設定 */
  /*  &:last-child { */
  /* border-bottom: none; */ /* 各お知らせ行の間に区切り線を入れる設定 */
  /*  } */
  /*  &:hover, */
  /*  &:focus-visible { */
  /* background-color: #f5fbff; */ /* ホバー時に背景色が変わる設定 */
  /*  } */
}
@media (max-width: 767px) {
  .p-news__item {
    row-gap: 0.25rem;
  }
}
.p-news {
  /* 日付 */
}
.p-news__item-date {
  color: #7a7a7a;
  font-size: 0.9rem;
  white-space: nowrap;
}
.p-news {
  /* タイトルリンク部分 */
}
.p-news__item-title {
  color: #7a7a7a;
  font-size: 0.95rem;
  line-height: 1.8;
}
.p-news__item-title a {
  color: #0170B9;
  text-decoration: underline;
}
.p-news__item-title a:hover, .p-news__item-title a:focus-visible {
  color: #24afda;
}

/* お知らせ */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_work-manage.scss
   勤怠管理ページ専用のスタイルです。 */
/* ページ見出し */
.p-work-manage__heading {
  padding-top: 90px;
}
@media (max-width: 1024px) {
  .p-work-manage__heading {
    padding-top: 30px;
  }
}
.p-work-manage__heading .c-section-heading {
  margin-bottom: 0;
  row-gap: 0;
}
.p-work-manage__heading .c-section-heading--en {
  font-size: 1.25rem;
  line-height: 1.2;
  color: #24AFDA;
}
.p-work-manage__heading .c-section-heading--jp {
  font-size: 2.5rem;
  line-height: 1.4;
  color: #0170B9;
}
@media (max-width: 921px) {
  .p-work-manage__heading .c-section-heading--en {
    font-size: 1.14rem;
  }
  .p-work-manage__heading .c-section-heading--jp {
    font-size: 1.88rem;
  }
}

/* メイン画像エリア（青背景） */
.p-work-manage__hero-image {
  background-color: #24AFDA;
  position: relative;
  padding: 0 0 25px;
}
@media (max-width: 1024px) {
  .p-work-manage__hero-image {
    padding: 10px 10px 30px;
  }
}
@media (max-width: 767px) {
  .p-work-manage__hero-image {
    padding: 10px 10px 20px;
  }
}
.p-work-manage__hero-image {
  /* u-inner--basicの既定値（max-width:1200px, padding:2rem）を
     元ページの画像コンテナに合わせてページ内限定で調整します。 */
}
.p-work-manage__hero-image > .u-inner--basic {
  max-width: 1140px;
  padding: 0;
}

/* tilt形状のSVG装飾（セクション上部） */
.p-work-manage__tilt-decoration {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}
.p-work-manage__tilt-decoration svg {
  display: block;
  position: relative;
  left: 50%;
  width: calc(100% + 1.3px);
  height: 100px;
  transform: translateX(-50%) rotateY(180deg);
  fill: #fff;
}

/* 白背景のカードエリア */
.p-work-manage__hero-card {
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 0 23px 0 rgba(204, 204, 204, 0.5);
  margin: 40px 20px 0;
  padding: 10px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* メイン画像 */
.p-work-manage__hero-image-element {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* YouTube動画セクション（青背景） */
.p-work-manage__youtube {
  background-color: #24AFDA;
  padding: 1rem 0;
}

/* YouTube内側コンテナ（最大幅制限） */
.p-work-manage__youtube-inner {
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .p-work-manage__youtube-inner {
    max-width: 660px;
  }
}
@media (max-width: 767px) {
  .p-work-manage__youtube-inner {
    padding-inline: 20px;
  }
}

/* 16:9動画ラッパー */
.p-work-manage__video-wrapper {
  aspect-ratio: 16/9;
}
.p-work-manage__video-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 導入ブロック「毎日の業務データを勤怠管理にも活用」 */
.p-work-manage__daily-work-data {
  background-color: #24AFDA;
  color: white;
  /* 再構築上の余白: YouTube動画と導入ブロック間の視覚的な区切りを確保する */
  padding: 20px 0 0;
}
.p-work-manage__daily-work-data .c-feature-detail__text {
  font-size: 1.13rem;
}
@media (max-width: 921px) {
  .p-work-manage__daily-work-data .c-feature-detail__text {
    font-size: 1.03rem;
  }
}

/* 機能詳細ブロック（業務報告一体化・残業休暇申請） */
.p-work-manage__feature-sections {
  background-color: #24AFDA;
  color: white;
  /* dailyブロックとの間隔は元HTML d86bf05のmargin-bottom:20px相当です。 */
  padding: 1.25rem 0 3.13rem;
}
@media (max-width: 1024px) {
  .p-work-manage__feature-sections {
    padding: 1.25rem 0 2.5rem;
  }
}
@media (max-width: 767px) {
  .p-work-manage__feature-sections {
    padding: 1.25rem 0 1.25rem;
  }
}
.p-work-manage__feature-sections {
  /* 元ページの業務情報活用ブロック固有の画像・本文余白です。
     グリッドや表示順は共通のfeature-detailコンポーネントを再利用します。 */
}
.p-work-manage__feature-sections--customer-understanding .c-feature-detail__item--content-first .c-feature-detail__mobile-image img {
  width: 70%;
  max-width: 100%;
  margin-inline: auto;
}
.p-work-manage__feature-sections .c-feature-detail__heading {
  line-height: 1.3;
}

/* 勤怠管理ページ：関連機能カードグリッド */
.p-work-manage__feature-card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 980px;
  margin: 2.5rem auto 0;
  padding-inline: 0.63rem;
}
@media (max-width: 767px) {
  .p-work-manage__feature-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}
.p-work-manage__feature-card-grid .c-feature-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  line-height: 1.5;
}
.p-work-manage__feature-card-grid .c-feature-card__title-text {
  display: block;
  width: 100%;
  text-align: center;
}
.p-work-manage__feature-card-grid .c-feature-card__icon {
  order: -1;
}
.p-work-manage__feature-card-grid .c-feature-card__icon i {
  font-size: 1.88rem;
  color: #BDD1D8;
}

/* パネル直前の40pxは親の内側に確保し、マージンの相殺による青背景の途切れを防ぎます。 */
.p-work-manage__feature-sections:has(+ .p-work-manage__panel-sections) {
  padding-bottom: 2.5rem;
}
.p-work-manage__feature-sections:has(+ .p-work-manage__panel-sections) > .u-inner--basic {
  padding-bottom: 0;
}
.p-work-manage__feature-sections:has(+ .p-work-manage__panel-sections) > .u-inner--basic > .c-feature-detail__item:last-child {
  margin-bottom: 0;
}

/* 1つ目のパネル下余白はパネル側で管理します。 */
.p-work-manage__panel-sections + .p-work-manage__feature-sections {
  padding-top: 0;
}
.p-work-manage__panel-sections + .p-work-manage__feature-sections > .u-inner--basic {
  padding-top: 0;
}

/* 淡色パネル型の機能詳細ブロック */
.p-work-manage__panel-sections {
  background-color: #24AFDA;
  /* post-4880.css: 9494e8eのmargin-top:40px / bottom:80px。 */
  padding: 2.5rem 0 5rem;
}
@media (max-width: 767px) {
  .p-work-manage__panel-sections {
    padding: 0 0 3.75rem;
  }
}
.p-work-manage__panel-sections {
  /* f371926の下余白 + 元の親コンテナ下10px + 外側セクション下余白。
     2つ目は次が区切り線のため、1つ目とは下余白を分けます。 */
}
.p-work-manage__panel-sections--closing {
  padding-bottom: 3.75rem;
}
@media (max-width: 1024px) {
  .p-work-manage__panel-sections--closing {
    padding-top: 1.88rem;
    padding-bottom: 4.38rem;
  }
}
@media (max-width: 767px) {
  .p-work-manage__panel-sections--closing {
    padding-top: 0;
  }
}
.p-work-manage__panel-sections > .u-inner--basic {
  max-width: 1140px;
  padding: 0;
}

/* 元ページ9494e8eの画像＋本文パネル。次の同デザイン項目でも使用します。 */
.p-work-manage__feature-panel {
  background-color: #E3F2F9;
  color: #7a7a7a;
  margin-inline: 2rem;
}
.p-work-manage__feature-panel .c-feature-detail__image {
  padding: 3.13rem 0 3.13rem 1.88rem;
}
.p-work-manage__feature-panel .c-feature-detail__image img {
  min-width: 12rem;
  max-width: 100%;
}
.p-work-manage__feature-panel .c-feature-detail__content {
  padding: 3.13rem 1.88rem 3.13rem 0;
}
.p-work-manage__feature-panel .c-feature-detail__heading {
  color: #0170B9;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .p-work-manage__feature-panel .c-feature-detail__heading .u-text-br-md {
    display: block;
  }
}
@media (max-width: 767px) {
  .p-work-manage__feature-panel .c-feature-detail__heading .u-text-br-sp {
    display: block;
  }
}
.p-work-manage__feature-panel .c-feature-detail__text {
  color: #7a7a7a;
}
.p-work-manage__feature-panel .p-work-manage__feature-panel-note-marker {
  font-size: 0.6em;
}
.p-work-manage__feature-panel .p-work-manage__feature-panel-note {
  font-size: 0.9rem;
  text-align: right;
}
@media (max-width: 1024px) {
  .p-work-manage__feature-panel {
    margin-inline: 1.25rem;
  }
  .p-work-manage__feature-panel .c-feature-detail__image {
    padding: 1.88rem;
  }
  .p-work-manage__feature-panel .c-feature-detail__image img {
    min-width: 12rem;
    max-width: 100%;
  }
  .p-work-manage__feature-panel .c-feature-detail__content {
    padding: 1.88rem;
  }
}
@media (max-width: 767px) {
  .p-work-manage__feature-panel .c-feature-detail__content {
    padding: 1.25rem;
  }
  .p-work-manage__feature-panel .c-feature-detail__mobile-image img {
    width: 60%;
    min-width: 15.63rem;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* 勤怠管理ページ */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/project/_404.scss */
/* =========================================================
    Project: 404
   ========================================================= */
.p-404-page {
  min-width: 320px;
  background-color: #24AFDA;
}

.p-404 {
  margin-top: 0;
}
.p-404__section {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 8rem 1.5rem;
  overflow: hidden;
  color: white;
  background-color: #24AFDA;
}
.p-404__shape {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5rem;
  pointer-events: none;
}
.p-404__shape--top {
  top: 0;
}
.p-404__shape--bottom {
  bottom: 0;
  transform: scaleY(-1);
}
.p-404__shape svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.p-404__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 40rem;
  text-align: center;
}
.p-404__code {
  font-size: clamp(4rem, 10vw, 7.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
}
.p-404__title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.2;
}
.p-404__message {
  font-size: 1rem;
  line-height: 1.8;
}
.p-404__button {
  min-width: 10rem;
  margin-top: 1rem;
}
@media (max-width: 525px) {
  .p-404__section {
    padding-inline: 1rem;
  }
  .p-404__shape {
    height: 3.5rem;
  }
  .p-404__message {
    font-size: 0.94rem;
  }
}

/* 404ページ */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/utility/_bg-wave.scss */
.u-bg-wave {
  position: relative;
  overflow: hidden; /* ウェーブがはみ出さぬようにする */
  /* ---- 上部、下部セクションの共通設定 ---- */
}
.u-bg-wave::before, .u-bg-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 80px; /* ウェーブの高さ調整用 */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  transform-origin: center; /* 左右反転時の基準点 */
}
.u-bg-wave {
  /* ---- 上部のセクション用 ---- */
}
.u-bg-wave--top::before, .u-bg-wave--top::after {
  /* ▼ ウェーブを1枚の背景SVGで描画 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 131.1' preserveAspectRatio='none'><path fill='%23ffffff' d='M0 0L2600 0 2600 69.1 0 0z'/><path fill='%23ffffff' opacity='0.5' d='M0 0L2600 0 2600 69.1 0 69.1z'/><path fill='%23ffffff' opacity='0.25' d='M2600 0L0 0 0 130.1 2600 69.1z'/></svg>");
}
.u-bg-wave--top {
  /* ---- セクション上部のウェーブ ---- */
}
.u-bg-wave--top::before {
  top: -1px; /* 細い線が見えないようにする調整用 */
  transform: scaleX(-1); /* ウェーブの向き調整用 */
}
.u-bg-wave--top {
  /* ---- セクション下部のウェーブ ---- */
}
.u-bg-wave--top::after {
  bottom: -1px; /* 細い線が見えないようにする調整用 */
  transform: scaleY(-1); /* ウェーブの向き調整用 */
}
.u-bg-wave {
  /* ---- 下部のセクション用 ---- */
}
.u-bg-wave--bottom {
  margin-top: -5rem;
  /* == 削除しないでください。 == */
  /* ▼ 波を1枚の背景SVGで描画 */
  /* ---- ChaRMeホームページ独自の設定です。 ---- */
}
.u-bg-wave--bottom::before {
  top: -1px; /* 細い線が見えないようにする調整用 */
  /*  transform: scaleX(-1); */ /* ウェーブの向き調整用 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 131.1' preserveAspectRatio='none'><path fill='%2324AFDA' d='M0 0L2600 0 2600 69.1 0 0z'/><path fill='%2324AFDA' opacity='0.5' d='M0 0L2600 0 2600 69.1 0 69.1z'/><path fill='%2324AFDA' opacity='0.25' d='M2600 0L0 0 0 130.1 2600 69.1z'/></svg>"); /* ChaRMeホームページの場合だと、ウェーブ部分が他のセクションに重なるので、色を調整したSVGを設定しています。 */
}
.u-bg-wave--bottom::after {
  bottom: -1px; /* 細い線が見えないようにする調整用 */
  transform: scale(-1, -1);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 131.1' preserveAspectRatio='none'><path fill='%23ffffff' d='M0 0L2600 0 2600 69.1 0 0z'/><path fill='%23ffffff' opacity='0.5' d='M0 0L2600 0 2600 69.1 0 69.1z'/><path fill='%23ffffff' opacity='0.25' d='M2600 0L0 0 0 130.1 2600 69.1z'/></svg>"); /* ウェーブの向き調整用 */
}

/* 背景色があるセクションの装飾（ウェーブ） */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/utility/_text-br.scss */
/* =========================================================
    text-break Utilities: responsive line text-breaks
    u-text-br-sp  … SPだけ改行
    u-text-br-md  … 中画面から改行
    u-text-br-lg  … 大画面から改行
   ========================================================= */
/* 基本：初期は非表示 */
.u-text-br-sp,
.u-text-br-md,
.u-text-br-lg {
  display: none;
}

/* ---- SP（〜767px）だけ改行 ---- */
@media (max-width: 767px) {
  .u-text-br-sp {
    display: block;
    width: auto;
    height: 0;
    line-height: 0;
    overflow: hidden;
  }
}

/* ---- md（768px〜1024px）だけ改行 ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .u-text-br-md {
    display: block;
    width: auto;
    height: 0;
    line-height: 0;
    overflow: hidden;
  }
}

/* ---- lg（1025px〜）だけ改行 ---- */
@media (min-width: 1025px) {
  .u-text-br-lg {
    display: block;
    width: auto;
    height: 0;
    line-height: 0;
    overflow: hidden;
  }
}

/* 改行設定 */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/utility/_order.scss */
/* =========================================================
    Utility: Order（flex/grid要素の並び順制御）
    ---------------------------------------------------------
    ・.u-order-1 ～ .u-order-12
    ・ブレークポイント別: .u-order-md-1 / .u-order-lg-3 など
   ========================================================= */
/* 汎用: order 1〜12 を自動生成 */
.u-order-1 {
  order: 1;
}

.u-order-2 {
  order: 2;
}

.u-order-3 {
  order: 3;
}

.u-order-4 {
  order: 4;
}

.u-order-5 {
  order: 5;
}

.u-order-6 {
  order: 6;
}

.u-order-7 {
  order: 7;
}

.u-order-8 {
  order: 8;
}

.u-order-9 {
  order: 9;
}

.u-order-10 {
  order: 10;
}

.u-order-11 {
  order: 11;
}

.u-order-12 {
  order: 12;
}

/* ブレークポイント別（$breakpointsマップを使用） */
@media (max-width: 525px) {
  .u-order-sp-1 {
    order: 1;
  }
  .u-order-sp-2 {
    order: 2;
  }
  .u-order-sp-3 {
    order: 3;
  }
  .u-order-sp-4 {
    order: 4;
  }
  .u-order-sp-5 {
    order: 5;
  }
  .u-order-sp-6 {
    order: 6;
  }
  .u-order-sp-7 {
    order: 7;
  }
  .u-order-sp-8 {
    order: 8;
  }
  .u-order-sp-9 {
    order: 9;
  }
  .u-order-sp-10 {
    order: 10;
  }
  .u-order-sp-11 {
    order: 11;
  }
  .u-order-sp-12 {
    order: 12;
  }
}
@media (max-width: 767px) {
  .u-order-md-1 {
    order: 1;
  }
  .u-order-md-2 {
    order: 2;
  }
  .u-order-md-3 {
    order: 3;
  }
  .u-order-md-4 {
    order: 4;
  }
  .u-order-md-5 {
    order: 5;
  }
  .u-order-md-6 {
    order: 6;
  }
  .u-order-md-7 {
    order: 7;
  }
  .u-order-md-8 {
    order: 8;
  }
  .u-order-md-9 {
    order: 9;
  }
  .u-order-md-10 {
    order: 10;
  }
  .u-order-md-11 {
    order: 11;
  }
  .u-order-md-12 {
    order: 12;
  }
}
@media (max-width: 1024px) {
  .u-order-lg-1 {
    order: 1;
  }
  .u-order-lg-2 {
    order: 2;
  }
  .u-order-lg-3 {
    order: 3;
  }
  .u-order-lg-4 {
    order: 4;
  }
  .u-order-lg-5 {
    order: 5;
  }
  .u-order-lg-6 {
    order: 6;
  }
  .u-order-lg-7 {
    order: 7;
  }
  .u-order-lg-8 {
    order: 8;
  }
  .u-order-lg-9 {
    order: 9;
  }
  .u-order-lg-10 {
    order: 10;
  }
  .u-order-lg-11 {
    order: 11;
  }
  .u-order-lg-12 {
    order: 12;
  }
}
/* 以下、削除する予定です */
/* =========================================================
    Order Utilities: flexible item ordering
    u-order-1 … 基本順序
    u-order-sp-1 … SP時だけ順序変更
    u-order-md-1 … タブレット時だけ順序変更
    u-order-lg-1 … PC時だけ順序変更
   ========================================================= */
/* ----- 基本（全画面） ----- */
/* ----- SP（〜767px） ----- */
/* ----- MD（768px〜1024px） ----- */
/* ----- LG（1025px〜） ----- */
/* 画面幅に応じて表示順を変更する */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/utility/_inner.scss */
.u-inner {
  width: 100%;
  margin-inline: auto;
}
.u-inner--basic {
  max-width: 1200px;
  padding: 2rem 2rem;
}
.u-inner--bg-wave-section {
  max-width: 1200px;
  padding: 5rem 2rem;
}
.u-inner--contact-area {
  padding: 3rem 1.5rem;
  position: relative;
}

/* 各セクションの余白調整用 */
/* common.scss（SCSSエントリーポイント）
  共通の設定を読み込む場所です。
  FLOCSS＋BEMでSCSSを作成。
  common.css にビルドされます。 */
/* foundation
  初期設定／リセット／変数／関数 */
/* object/utility/_animation-fade-in.scss */
/* =========================================================
  Utility: simple fade-in on scroll
  使い方：
  - 要素に .u-animation-fade-in を付けるだけでフェードインが追加されます。（JSが inview 時に .is-inview を付与）
  - animation-fade-in.jsとセットで利用してください。
  ---------------------------------------------------------
  任意：
  - data-fade-delay="200"    : 遅延（ms）
  - data-fade-duration="800" : 再生時間（ms）
  - data-fade-once="false"   : ビューポート外に出たら再び非表示（既定は一度きりで保持）
  ========================================================= */
.u-animation-fade-in {
  --fade-duration: 700ms;
  --fade-delay: 0ms;
  opacity: 0;
  transition: opacity var(--fade-duration) ease var(--fade-delay);
}

/* 画面に入ったら表示（JSが付与） */
.u-animation-fade-in.is-inview {
  opacity: 1;
}

/* アニメーション */

/*# sourceMappingURL=common.css.map */