@charset "UTF-8";

/* ---------------------------------
   カラー変数定義
---------------------------------- */

:root {
  /* --- 共通カラー --- */
  --border-color: #F4898C;         /* ピーチ */
  --accent-color: #606BA2;         /* ヘザーパープル */
  --headline-color: #4B558B;       /* アイサビ（藍錆） */
  --text-color: #151515;           /* 標準文字色 */
  --bg-base: #FAF7F5;              /* ミルキーホワイト（共通背景） */

  /* --- 介護サービス用（.service） --- */
  --service-accent1: #A8C97F;      /* 若草色 */
  --service-accent2: #F7E3A2;      /* カスタード */
  --service-bg: #F9F8F5;           /* ペールベージュ系背景 */

  /* --- 法人案内用（.company） --- */
  --company-accent1: #A6D1D8;      /* ティール */
  --company-accent2: #8B8C90;      /* グレー */
  --company-bg: #F5F8FA;           /* クール系ペールブルー背景 */

  /* --- 採用ページ用（.recruit） --- */
  --recruit-accent1: #FFAD5C;      /* サーモンオレンジ */
  --recruit-accent2: #A3D37A;      /* ライムグリーン */
  --recruit-bg: #FFF9F2;           /* ミルキーオレンジ背景 */

	/* カラー変数（テーマ共通） */
  --company-link-color: #4b558b;      /* 通常リンク色 */
  --company-link-hover: #F4898C;      /* ホバー時リンク色 */

}


/* =========================
   共通ユーティリティ
   ========================= */
.red   { color: #CC0000; }

/* テキスト色 */
.text-border   { color: var(--border-color); }
.text-accent   { color: var(--accent-color); }
.text-headline { color: var(--headline-color); }
.text-default  { color: var(--text-color); }

/* 背景色 */
.bg-base       { background-color: var(--bg-base); }

/* 枠線 */
.border-common { border: 1px solid var(--border-color); }

/* =========================
   サービスページ用
   ========================= */
.text-service1 { color: var(--service-accent1); }
.text-service2 { color: var(--service-accent2); }
.bg-service    { background-color: var(--service-bg); }

/* =========================
   法人案内ページ用
   ========================= */
.text-company1 { color: var(--company-accent1); }
.text-company2 { color: var(--company-accent2); }
.bg-company    { background-color: var(--company-bg); }

/* =========================
   採用ページ用
   ========================= */
.text-recruit1 { color: var(--recruit-accent1); }
.text-recruit2 { color: var(--recruit-accent2); }
.bg-recruit    { background-color: var(--recruit-bg); }


/* ---------------------------------
   汎用　
---------------------------------- */
/* thだけ改行しない */
.th-nowrap th {
  white-space: nowrap;
}

/* <br>自動削除対策 */
.is { display: inline !important; }


/* ---------------------------------
   Google Material Symbols Rounded 基本設定
---------------------------------- */

/* ベースアイコンスタイル */
.icon-symbol {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  color: var(--accent-color);
}

.icon-rounded [data-icon]::before {
  content: attr(data-icon);
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4em;
  line-height: 1;
  font-size: 1.4rem;  /* ←適宜調整可能 */
  color: inherit;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------
   Google Material Symbols Rounded 用 汎用アイコン呼び出し（個別使用用）
---------------------------------- */

/* 汎用：HTML内で <span data-icon="language"></span> のように記述すればOK */
[data-icon]::before {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  content: attr(data-icon);
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  color: var(--accent-color);
  -webkit-font-smoothing: antialiased;
}


/* ---------------------------------
   Google Material Symbols Rounded 用 チェックアイコンリスト
---------------------------------- */

.icon_checklist {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.icon_checklist li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.6em;
  font-size: 16px;
  line-height: 1.6 !important;
  text-indent: 0;
  list-style: none;
}

.icon_checklist li::before {
  content: 'select_check_box';
  font-family: 'Material Symbols Rounded';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--accent-color);
  font-size: 1.2em;
  line-height: 1;
  width: 1.5em;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}


/* ---------------------------------
   Google Material Symbols Rounded 用 digits × circle（縦並び）
---------------------------------- */

ol.digits-circle {
  counter-reset: digits-counter;
  list-style: none;
  padding: 0;
  margin: 10px;
}

ol.digits-circle li {
  margin-bottom: 4rem;
  background-color: transparent;
  padding: 12px 12px 16px 20px;
  position: relative;
  list-style: none;
}

ol.digits-circle li:not(:last-child):after {
  display: block;
  font-family: 'Material Symbols Rounded';
  content: 'expand_more'; /* ↓アイコン（旧：\e90e） */
  color: var(--service-accent2);
  font-size: 2.4em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0;
  -webkit-font-smoothing: antialiased;
}


/* 外枠（任意） */
.radius-s li {
  border: 3px solid var(--service-accent2);
  border-radius: 1em;
}


/* タイトル行 */
ol.digits-circle li h3 {
  padding: 0;
  position: relative;
  color: var(--headline-color);
  line-height: 1.7;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

/* 番号バッジ */
ol.digits-circle li h3:before {
  content: counter(digits-counter);
  counter-increment: digits-counter;
  font-family: inherit;
  background-color: var(--service-accent2);
  color: var(--accent-color);
  display: inline-block;
  text-align: center;
  line-height: 28px;
  width: 28px;
  height: 28px;
  font-size: 1em;
  border-radius: 50%;
}


/* ---------------------------------
   カラムの横並び
---------------------------------- */

/* 基本Flexグリッド */
.flex-grid {
  display: flex;
  flex-wrap: wrap;
}

/* カラム数指定（1〜6まで） */
.flex-grid[class*="cols-"] > * {
  flex: 1 1 0;
  min-width: 0; /* テキストのはみ出し防止 */
}

.cols-1 > * { flex-basis: 100%; }
.cols-2 > * { flex-basis: calc(50% - var(--gap)); }
.cols-3 > * { flex-basis: calc(33.333% - var(--gap)); }
.cols-4 > * { flex-basis: calc(25% - var(--gap)); }
.cols-5 > * { flex-basis: calc(20% - var(--gap)); }
.cols-6 > * { flex-basis: calc(16.666% - var(--gap)); }

/* 余白指定（gap） */
.flex-grid { --gap: 1rem; gap: var(--gap); }
.gap-1 { --gap: 0.5rem; }
.gap-2 { --gap: 1rem; }
.gap-3 { --gap: 1.5rem; }
.gap-4 { --gap: 2rem; }

/* 縦揃えオプション */
.align-top    { align-items: flex-start; }
.align-center { align-items: center; }
.align-bottom { align-items: flex-end; }

/* --- スマホ（768px以下）では必ず縦積み --- */
@media (max-width: 768px) {
  .flex-grid[class*="cols-"] > * {
    flex-basis: 100% !important;
  }
}


/* --- スマホ時は改行を非表示にして中黒に置換 --- */
@media screen and (max-width: 768px) {
  br.is-pc + span::before {
    content: "・";
    display: inline;
  }
}



/* ---------------------------------
   YouTube　などの動画埋め込み用　
---------------------------------- */
/* 汎用 YouTube/Vimeo 埋め込み用ラッパー */
.embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;  /* アスペクト比を統一（親要素の幅に追従） */
  background: #000;
  overflow: hidden;
}

/* 既存 iframe の固定サイズを打ち消してスケーリング */
.embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  max-width: 100%;
}

/* MP4用（iframeと同じ挙動でフィット） */
.embed > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  max-width: 100%;
  object-fit: cover; /* デフォルトは“余白なしでトリミング気味” */
}

/* 枠内に全体を収めたいとき（上下や左右に余白が出てもOK） */
.embed.video--contain > video { object-fit: contain; background:#000; }

/* とにかく全面で見せたいとき（多少のトリミングOK） */
.embed.video--cover   > video { object-fit: cover; }

/* 機関誌PDFボタン */
.newsletter-button {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;

  /* 通常 */
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  background: #ffffff;

  transition: all .25s ease;
}

.newsletter-button:hover {
  background: var(--headline-color);
  border-color: var(--headline-color);
  color: #ffffff;
}