@charset 'UTF-8';

/* ==================================================
  CSS Custom Properties
  値は docs/top_06.psd からの実測値。
  一覧は docs/README.md「4. デザイントークン」を正とする。
================================================== */

:root {
  --color-main: #5cc2cf;
  --color-main-dark: #26c0cc;
  --color-main-darkest: #00adba;
  --color-main-soft: #6fbfd3;
  --color-main-navigation: #5ac1ce;
  --color-main-pale: #a9dceb;
  --color-main-palest: #b5e4ea;

  --color-sub: #3fa7d1;

  --color-accent: #f08300;
  --color-accent-button: #f07d3a;
  --color-accent-circle: #f0823d;
  --color-accent-yellow: #f9c03c;
  --color-accent-yellow-dark: #edb73b;
  --color-accent-yellow-pale: #fdf9d9;
  --color-accent-circle-dark: #ea7933;

  --color-text: #4a5560;
  --color-text-light: #434343;
  --color-text-address: #576063;
  --color-text-link: #535353;
  --color-text-lead: #262626;

  --color-border: #c6c6c6;
  --color-border-line: #c9c9c9;
  --color-border-divider: #e7e7e7;
  --color-border-frame: #e5e5e5;
  --color-border-light: #edf8fa;

  --color-background: #ffffff;
  --color-background-light: #d7ecfa;
  --color-background-blue: #dff0fc;
  --color-background-voice: #dfeffc;
  --color-background-beige: #f8f2ee;
  --color-background-beige-light: #fbf7f2;
  --color-background-beige-tag: #f6f1e8;
  --color-background-beige-card: #eae5d6;

  --color-white: #fff;
  --color-black: #000;

  /* カンプに無い。フォーム確認画面の注意文（check.csv No.164 が赤字を要求）用に追加した */
  --color-error: #d64545;

  /* 選ばれる理由の連携フロー図。支給デザイン（連携フロー図.dc.html）の指定値。
     既存パレットに無い8色。この図でのみ使用する */
  --color-flow-user: #e8f0e2;
  --color-flow-caremanager: #dfeaf8;
  --color-flow-company: #fbe8db;
  --color-flow-arrow: #7ec3ca;
  --color-flow-arrow-down: #f3a469;
  --color-flow-label-border: #f3e2d2;
  --color-flow-goal: #f2a25e;
  --color-flow-goal-text: #ef9a52;

  /* 03first の暮らしのチェック。支給カンプ（gyazo 67f31f56ec5d17db22b30f13fd3c5905）の指定値。
     既存パレットに無い6色。このセクションでのみ使用する */
  --color-check-border: #f0ebe6;
  --color-check-checked: #fdf7f2;
  --color-check-result: #f4f8fc;
  --color-check-advice: #e9f2fb;
  --color-check-button: #5095cc;
  --color-check-button-dark: #4183b8;

  /* 05price のレンタル料金タブ。支給デザイン（1d3b5054de93c62b545a7e1f60ad615e）の実測値。
     既存パレットに無い3色。このタブでのみ使用する。
     青 #1c9ae6 も抽出したが、2つのタブを同じ配色に統一したため使わなくなった（2026-08-25） */
  --color-price-tab-insurance: #e6f6ff;
  --color-price-tab-insurance-border: #c9e6f9;
  --color-price-tab-private: #115cb2;

  /* TOP サービス紹介の間取り図カード。支給された完成イメージ（top_06.png）の実測値。
     既存パレットに無い2色。このセクションでのみ使用する */
  --color-service-green: #59a835;
  --color-service-orange: #f06a07;

  --content-width-small: 800px;
  --content-width-medium: 1000px;
  --content-width-large: 1200px;

  --radius-small: 13px;
  --radius-medium: 15px;
  --radius-large: 30px;
  --radius-card: 33px;
  --radius-section: 100px;
  --radius-round: 9999px;

  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;

  --z-index-base: 1;
  --z-index-header: 100;
  --z-index-navigation: 200;
  --z-index-overlay: 300;
  /* ドロワーはオーバーレイより前面。common.js が生成する .overlay と重なるため */
  --z-index-drawer: 301;
  --z-index-modal: 400;
  --z-index-loading: 500;

  --font-japanese: 'Noto Sans JP', sans-serif;
  --font-display: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --font-english: 'Google Sans', 'Noto Sans JP', sans-serif;
}

.uk-lb{
  cursor: pointer;
}

/* ==================================================
  Base override
  base.css は編集禁止のため、案件のフォント指定だけをここで上書きする。
================================================== */

/* 本文の字間。2026-08-24 本人指示により全ページで広げた。
   規約 CSS_SPEC §23 で文字間の単位は em のため、本文16pxでの1px相当を em で書く。
   個別に letter-spacing を持つ要素（0.05em など計50箇所）はそのままの値が優先される */
.wrapper {
  color: var(--color-text);
  font-family: var(--font-japanese);
  -webkit-font-feature-settings: 'palt'1;
  font-feature-settings: 'palt'1;
  font-size: 16px;
  line-height: 1.875;
  letter-spacing: 0.0625em;
}


/* ==================================================
  Layout: Header
================================================== */

.layout-header {
  position: relative;
  z-index: var(--z-index-header);
  padding-top: 10px;
  padding-bottom: 20px;
  background-color: var(--color-white);
}

/* h1 は header-common の外にあるため、共通化される中身は __row 1つにまとめる */
.layout-header__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 14px;
}

.layout-header__identity {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /* カンプではロゴ左端が x=28。inner1300 の左端(x=13)との差を padding で合わせる */
  padding-left: 15px;
}

/* ページ見出し（h1）。header-common の外に置くため padding-left は自前で持つ。
   padding-right で右カラム（__body）ぶんを空け、__body のテキストと重ならないようにする。

   ここは px で持つ。右カラムの中身は 713px（電話275 ＋ 余白20 ＋ ボタン418）で
   画面幅が変わっても縮まないため、％で空けると inner が狭まったときに追いつかず、
   1170px以下で電話番号が h1 の文字に重なった（2026-07-30 実測・修正）。
   733px = 713px ＋ 文字との間隔20px */
.layout-header__title {
  padding-right: 733px;
  padding-left: 15px;
  color: var(--color-text-lead);
  font-size: 12px;
  font-weight: 350;
  line-height: 1.5;
}

.layout-header__logo-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.layout-header__logo {
  width: 336px;
}

.layout-header__logo a {
  display: block;
}

.layout-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.layout-header__logo--healthrent {
  width: 80px;
}

/* h1 の高さ(18px) + __row の margin-top(14px) を打ち消し、
   カンプどおり h1 と上端を揃える。h1 の文字は padding-right で退避済み */
.layout-header__body {
  min-width: 0;
  margin-top: -32px;
}

.layout-header__utility {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 20px;
}

.layout-header__contact {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.layout-header__telephone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 9px;
}

.layout-header__telephone a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 9px;
}

.layout-header__telephone-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 20px;
}

.layout-header__telephone-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.layout-header__telephone-number {
  color: var(--color-text);
  font-family: var(--font-english);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.layout-header__hours {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.2;
}

.layout-header__button-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 9px;
}

.layout-header__navigation {
  /* カンプではナビ右端(x=1252)がボタン右端(x=1284)より内側にある */
  margin-top: 20px;
  margin-right: 3px;
}

.layout-header__hamburger {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}


/* ヘッダーの追従固定。
   body への .fixed 付与と main への padding-top は common.js が行う（JS_SPEC §9）。
   common.js は `header` タグの高さを測って main の余白にするため、
   固定するのは header タグ自身（.layout-header-outer）でなければならない。
   内側の .layout-header を固定すると header タグの高さが0になり、余白が付かない。
   1025px以上のみ動作する */
.layout-header-outer {
  position: relative;
  z-index: var(--z-index-header);
}

.fixed .layout-header-outer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  box-shadow: 0 0 8px rgb(0 0 0 / 20%);
}


/* PCの狭い側（1025〜1300px）だけの配置。
   ロゴ列528px ＋ 右カラムの中身713px ＝ 1241px 必要だが、inner は
   「画面幅 − 約40px」なので1301pxを下回ると足りず、右カラムが左へはみ出して
   ロゴに重なる（2026-07-30 実測）。横並びを維持するにはロゴを185pxまで
   縮めるしかなく成立しないため、この帯だけ縦に積む。

   境目を1300pxにしたのは、カンプ幅（＝`inner1300` の上限）と同じ値で、
   これを下回る幅はカンプに存在せず外挿になるため。
   1024px以下はドロワーで別の配置になるため range 指定で範囲を切っている */
@media (min-width: 1025px) and (max-width: 1300px) {

  /* 右カラムが h1 の横に来なくなるため、退避用の padding は不要 */
  .layout-header__title {
    padding-right: 15px;
  }

  .layout-header__row {
    gap: 20px;
    flex-wrap: wrap;
  }

  /* h1 の行へ引き上げる負のマージンは、縦に積む配置では不要 */
  .layout-header__body {
    margin-top: 0;
    margin-left: auto;
  }
}


/* ==================================================
  Layout: Main
================================================== */

.layout-main {
  display: block;
}


/* ==================================================
  Layout: Column（一覧ページの記事＋サイドの2カラム）
  カンプに無いため支給の参考画像から起こした（2026-08-26 本人指示）。
  サイドは右。1024px以下は1列に落とし、記事の下にサイドを置く
================================================== */

.layout-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 48px;
}

/* min-width: 0 がないと、中のグリッドや長い見出しが縮まずサイドを押し出す */
.layout-column__main {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 0;
}

.layout-column__side {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 280px;
}

/* サイドに絞り込みを2つ以上並べたときの間隔。
   各ページのstyle.cssに複製しないよう、ここで1回だけ持たせる（CSS_SPEC §38） */
.layout-column__side .component-side-filter+.component-side-filter {
  margin-top: 32px;
}

@media (max-width: 1024px) {
  .layout-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 40px;
  }

  .layout-column__main,
  .layout-column__side {
    width: 100%;
  }
}


/* ==================================================
  Layout: Footer
================================================== */

/* 地色をフッター全体に持たせる。上端の波（component-wave）は
   この地色を白で覆って波形を作るため、波側に色を指定しない */
.layout-footer {
  position: relative;
  margin-top: 80px;
  background-color: var(--color-background-light);
}

.layout-footer__body {
  position: relative;
}

.layout-footer__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 40px;
}

.layout-footer__information {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 310px;
}

.layout-footer__logo {
  width: 312px;
  max-width: 100%;
}

.layout-footer__logo a {
  display: block;
}

.layout-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.layout-footer__address {
  margin-top: 26px;
  color: var(--color-text-address);
  font-weight: 500;
  line-height: 1.875;
  letter-spacing: 0.05em;
}

.layout-footer__telephone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
}

.layout-footer__telephone a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 7px;
}

.layout-footer__telephone-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 20px;
}

.layout-footer__telephone-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.layout-footer__telephone-number {
  color: var(--color-text);
  font-family: var(--font-english);
  font-size: 33px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.layout-footer__hours {
  margin-top: 13px;
  color: var(--color-text-light);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.layout-footer__button-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
  margin-top: 27px;
}

.layout-footer__navigation-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  gap: 40px;
  padding-top: 12px;
}

.layout-footer__station {
  margin-top: 61px;
}

.layout-footer__copyright {
  padding-top: 107px;
  padding-bottom: 33px;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.05em;
}


/* ==================================================
  Component: Navigation（ヘッダーのグローバルナビ）
================================================== */

.component-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px 13px;
}

/* ドロップダウンとの間に余白を作るため、項目の下に padding を足し、
   同じ量の負のマージンで打ち消してナビの行の高さは変えない。
   余白を margin や top で作ると、マウスが余白を通過する間に :hover が外れて
   ドロップダウンが閉じてしまう。padding なら余白も項目の一部なので開いたままになる */
.component-navigation__item {
  /* position は子のドロップダウン（.component-navigation__child-list）の基準 */
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: -12px;
  padding-bottom: 12px;
}

.component-navigation__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.component-navigation__item a::before {
  content: '';
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 4px solid var(--color-main-navigation);
  border-radius: 50%;
  -webkit-transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {

  /* 透過をやめ、丸マーカーの塗りと文字色で反応させる。
     `> a` は親のリンクだけを指す（子リンクは ::before が display: none） */
  .component-navigation__item>a:hover {
    opacity: 1;
  }

  .component-navigation__item>a:hover::before {
    border-color: var(--color-main-darkest);
    background-color: var(--color-main-darkest);
  }

  .component-navigation__item>a:hover .component-navigation__link {
    color: var(--color-main-darkest);
  }
}

.component-navigation__link {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.025em;
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

/* ドロップダウン（PC）。
   カンプに描かれていないため、白背景・角丸13px・影はカテゴリタブと同じ値を
   README §4 のデザイントークンから外挿した。
   hover と focus-within の両方で開くのでキーボード操作でも到達できる。
   タブレット以下は hover が使えないため、下のメディアクエリで常時表示にする。
   基準となる position: relative は .component-navigation__item 側に持たせている */
.component-navigation__child-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-index-navigation);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  max-width: 320px;
  padding: 8px 0;
  border-radius: var(--radius-small);
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
  box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
  opacity: 0;
  visibility: hidden;
  -webkit-transition:
    opacity var(--duration-fast),
    visibility var(--duration-fast);
  transition:
    opacity var(--duration-fast),
    visibility var(--duration-fast);
}

.component-navigation__item:hover .component-navigation__child-list,
.component-navigation__item:focus-within .component-navigation__child-list {
  opacity: 1;
  visibility: visible;
}

/* ドロワーナビには全ページへのリンクを出すが、カンプのグローバルナビには
   これらの項目が無い。1025px以上（ハンバーガーが出ない幅）でだけ隠す。
   見たまま編集画面では選択できるよう下部の [data-element-id] で表示に戻す */
@media (min-width: 1025px) {

  .component-navigation__item--drawer,
  .component-navigation__child-item--drawer {
    display: none;
  }
}

.component-navigation__child-item a {
  padding: 8px 16px;
  position: relative;
}

/* 親項目の丸は子には付けない */
.component-navigation__child-item a::before {
  display: none;
}

.component-navigation__child-item a::after{
  content: "";
  width: 0px;
  height: 3px;
  border-radius: 10px;
  background-color: var(--color-main-darkest);
  display: block;
  position: absolute;
  bottom: 2px;
  left: 15px;
  transition: .5s;
}

.component-navigation__child-item a:hover::after{
      width: calc(100% - 30px);
}

.component-navigation__child-link {
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.025em;
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {

  /* 透過ではなく文字色で反応させる（親項目と同じ方針） */
  .component-navigation__child-item a:hover {
    opacity: 1;
  }

  .component-navigation__child-item a:hover .component-navigation__child-link {
    color: var(--color-main-darkest);
  }
}

@media(max-width:1024px){
  .component-navigation__child-item a::after{
    content: none;
  }
  
  .component-navigation__link{
    font-size: 18px;
    font-weight: 600;
  }
  
  .component-navigation__child-link{
      font-size: 16px;
      font-weight: 500;
  }
}


/* ==================================================
  Component: Footer Navigation
================================================== */

.component-footer-navigation__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  color: var(--color-text-light);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.05em;
}

.component-footer-navigation__title::before {
  content: '';
  display: block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 4px solid var(--color-main-navigation);
  border-radius: 50%;
}

.component-footer-navigation__list {
  margin-top: 4px;
  padding-left: 22px;
}

.component-footer-navigation__item a {
  display: block;
}

.component-footer-navigation__link {
  font-size: 16px;
  line-height: 2.25;
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {

  /* 透過ではなく文字色で反応させる（グローバルナビと同じ方針） */
  .component-footer-navigation__item a:hover {
    opacity: 1;
  }

  .component-footer-navigation__item a:hover .component-footer-navigation__link {
    color: var(--color-main-darkest);
  }
}


/* ==================================================
  Component: Button
================================================== */

.component-button a {
  display: block;
}

.component-button__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  min-height: 53px;
  padding: 8px 20px;
  border-radius: var(--radius-round);
  background-color: var(--color-white);
}

.component-button__icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 23px;
}

/* アイコンは装飾のため疑似要素で描画する（.component-circle-arrow と同じ方針）。
   hover で地色と文字色を反転させる際にアイコンの色も変える必要があるため、
   画像は mask として形だけを使い、色は background-color で指定する。
   mask画像を data URI で埋め込む理由は .component-circle-arrow::before のコメント参照 */
.component-button__icon::before {
  content: '';
  display: block;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-transition: background-color var(--duration-fast) ease;
  transition: background-color var(--duration-fast) ease;
}

.component-button__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.025em;
  /* 文字数が増えても2行に折り返さず、ボタン幅が伸びるようにする */
  white-space: nowrap;
}

/* お問い合わせ（橙・塗り） */
.component-button--contact .component-button__inner {
  background-color: var(--color-accent-button);
  -webkit-transition:
    background-color var(--duration-fast) ease,
    -webkit-box-shadow var(--duration-fast) ease;
  transition:
    background-color var(--duration-fast) ease,
    -webkit-box-shadow var(--duration-fast) ease;
  transition:
    background-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  transition:
    background-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    -webkit-box-shadow var(--duration-fast) ease;
}

/* 中身は image/common/icon_mail.webp（23×18）をbase64化したもの */
.component-button--contact .component-button__icon::before {
  height: 18px;
  background-color: var(--color-white);
  -webkit-mask-image: url('/import/tenant_2/a4a442905bdc73a2fe0f8bc42f2639f3');
  mask-image: url('/import/tenant_2/a4a442905bdc73a2fe0f8bc42f2639f3');
}

.component-button--contact .component-button__text {
  color: var(--color-white);
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

/* 外部サイトへ（白・影） */
.component-button--external .component-button__inner {
  -webkit-box-shadow: 0 0 6px rgba(74, 85, 96, 0.14);
  box-shadow: 0 0 6px rgba(74, 85, 96, 0.14);
  -webkit-transition: background-color var(--duration-fast) ease;
  transition: background-color var(--duration-fast) ease;
}

.component-button--external .component-button__icon {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  width: 17px;
}

/* 中身は image/common/icon_external_link.webp（17×17）をbase64化したもの */
.component-button--external .component-button__icon::before {
  height: 17px;
  background-color: var(--color-text);
  -webkit-mask-image: url('/import/tenant_2/1d270f04db90b40a2122df1f4783dbcd');
  mask-image: url('/import/tenant_2/1d270f04db90b40a2122df1f4783dbcd');
}

.component-button--external .component-button__text {
  color: var(--color-text);
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {

  /* 地色と文字色を入れ替える（.component-arrow-button と同じ方針）。
     --contact は白地にするとヘッダーの白背景でボタンの輪郭が消えるため、
     inset の影で内側に枠線を描く。border と違いボタンの寸法が変わらない */
  .component-button a:hover {
    opacity: 1;
  }

  .component-button--contact a:hover .component-button__inner {
    background-color: var(--color-white);
    -webkit-box-shadow: inset 0 0 0 2px var(--color-accent-button);
    box-shadow: inset 0 0 0 2px var(--color-accent-button);
  }

  .component-button--contact a:hover .component-button__icon::before {
    background-color: var(--color-accent-button);
  }

  .component-button--contact a:hover .component-button__text {
    color: var(--color-accent-button);
  }

  .component-button--external a:hover .component-button__inner {
    background-color: var(--color-text);
  }

  .component-button--external a:hover .component-button__icon::before {
    background-color: var(--color-white);
  }

  .component-button--external a:hover .component-button__text {
    color: var(--color-white);
  }
}

/* 白い背景のパネルに置くと --external が背景と同化するため、地色を反転させた
   （2026-08-26 本人指示）。考え方は .component-arrow-button--fill と同じ。
   --external と併用する。hover では通常と逆に、白地＋ブランド色の文字へ戻す */
.component-button--fill .component-button__inner {
  min-width: 250px;
  background-color: var(--color-main-dark);
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition:
    background-color var(--duration-fast) ease,
    -webkit-box-shadow var(--duration-fast) ease;
  transition:
    background-color var(--duration-fast) ease,
    -webkit-box-shadow var(--duration-fast) ease;
  transition:
    background-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  transition:
    background-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    -webkit-box-shadow var(--duration-fast) ease;
}

.component-button--fill .component-button__icon::before {
  background-color: var(--color-white);
}

.component-button--fill .component-button__text {
  color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {

  /* 白地に戻す際、輪郭が消えないよう inset の影で内側に枠線を描く
     （--contact の hover と同じ手法。border と違いボタンの寸法が変わらない） */
  .component-button--fill a:hover .component-button__inner {
    background-color: var(--color-white);
    -webkit-box-shadow: inset 0 0 0 2px var(--color-main-dark);
    box-shadow: inset 0 0 0 2px var(--color-main-dark);
  }

  .component-button--fill a:hover .component-button__icon::before {
    background-color: var(--color-main-dark);
  }

  .component-button--fill a:hover .component-button__text {
    color: var(--color-main-dark);
  }
}

/* SPは1列に縦積みされるため、PCの min-width をやめて幅をそろえる。
   タップ領域も広くなる（375px時の利用可能幅は320px） */
@media (max-width: 599px) {
  .component-button--fill {
    width: 100%;
  }

  .component-button--fill .component-button__inner {
    width: 100%;
    min-width: 0;
  }
}

/* ヘッダー・フッターのボタンは横幅を揃える */
.layout-header__button-list .component-button {
  width: auto;
  min-width: 203px;
}

.layout-footer__button-list .component-button {
  width: 307px;
}


/* ==================================================
  Component: Drawer Overlay
  .overlay は common.js が生成する既存class（BEM例外）。
  ドロワーが開いていないときは表示もクリックもさせない。
================================================== */

.overlay {
  display: none;
}


/* ==================================================
  Component: Hamburger Button
  .site-header__hamburger は common.js が参照する既存class（BEM例外）
  button タグは使わない（README 確認事項14）。クリック判定は親が持つ
================================================== */

.component-hamburger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: var(--radius-small);
  background-color: var(--color-main);
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

.component-hamburger::before,
.component-hamburger::after {
  content: '';
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--color-white);
}


/* ==================================================
  Component: Station Card（フッターの事業所一覧）
================================================== */

.component-station-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 25px minmax(0, 1fr) 25px minmax(0, 1fr);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 37px 25px;
}

.component-station-card {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-large);
  background-color: var(--color-white);
}

.component-station-card__badge {
  position: absolute;
  top: 12px;
  left: 36px;
  z-index: var(--z-index-base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 350;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* カンプ 327×240 = 73.4% → up-ofi-75（誤差 +1.6%） */
.component-station-card__image {
  overflow: hidden;
  border-radius: var(--radius-small);
  background-color: var(--color-border-frame);
}

.component-station-card__name {
  margin-top: 25px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.component-station-card__address {
  margin-top: 21px;
  line-height: 1.875;
  letter-spacing: 0.05em;
}

/* 郵便番号。「〒」は Google Sans にグリフが無いため変数側で Noto Sans JP へ落ちる */
.component-station-card__postal {
  font-family: var(--font-english);
}

.component-station-card__location {
  line-height: 1.875;
  letter-spacing: 0.05em;
}

.component-station-card__map-mark {
  display: inline-block;
  width: 13px;
  margin-left: 6px;
  vertical-align: middle;
}

.component-station-card__map-mark a {
  display: block;
}

.component-station-card__map-mark img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-transform var(--duration-fast) ease;
  transition: -webkit-transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease, -webkit-transform var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {

  /* alt が意味を持つ画像なので mask 化して色を変えることはできない
     （アクセシブルな名前が消える）。透過をやめ、拡大で反応させる */
  .component-station-card__map-mark a:hover {
    opacity: 1;
  }

  .component-station-card__map-mark a:hover img {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

/* 連絡先は「ラベル」と「番号」を別要素にする。
   .tel は要素内のテキスト全体から数字を拾うため、番号だけを .tel にする必要がある */
.component-station-card__contact-list {
  display: block;
}

.component-station-card__contact-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 0.35em;
  line-height: 1.875;
  letter-spacing: 0.05em;
}

.component-station-card__contact-label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* 電話番号・FAX・営業時間。数字が主なので Google Sans で揃える（2026-08-24 本人指示）*/
.component-station-card__contact-number,
.component-station-card__contact-text {
  min-width: 0;
  font-family: var(--font-english);
}

/* 地図はGoogleマップの埋め込み（iframe）。
   「マップで開く」リンクとピンのラベルはGoogle側が描画する */
.component-station-card__map {
  overflow: hidden;
  margin-top: 24px;
  aspect-ratio: 320 / 251;
  border-radius: var(--radius-small);
}

.component-station-card__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.component-station-card__area {
  margin-top: 25px;
  padding: 16px 20px;
  border: 5px solid var(--color-border-light);
  border-radius: var(--radius-small);
  background-color: var(--color-white);
}

.component-station-card__area-title {
  color: var(--color-main-soft);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.875;
  letter-spacing: 0.05em;
}

.component-station-card__area-text+.component-station-card__area-text {
  margin-top: 14px;
}

.component-station-card__area-label {
  font-weight: 700;
  line-height: 1.875;
  letter-spacing: 0.05em;
}

.component-station-card__area-district {
  line-height: 1.875;
  letter-spacing: 0.05em;
}


/* ==================================================
  Component: Section Title（和文見出し＋英字ラベル）
================================================== */

.component-section-title {
  position: relative;
}

.component-section-title--center {
  text-align: center;
}

/* 行間は 1.3（2026-08-06 本人指示）。カンプ実測は 41.7px（1.05）だったが、
   2行になる見出しが窮屈なため全ページで 1.3 に変更した */
.component-section-title__main {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.075em;
  color: var(--color-text);
}

.component-section-title__accent {
  font-size: 50px;
  letter-spacing: 0.1em;
}

/* 見出しに添えるサブタイトル。__main の中に span で入れると
   BudouX（js-text-adjust）が innerHTML を作り直す際にタグを壊すため、
   兄弟要素として分ける。2026-08-24 本人指示 */
.component-section-title__sub {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.075em;
  color: var(--color-text);
}

.component-section-title__number {
  font-family: var(--font-english);
  font-size: 68px;
  letter-spacing: 0.075em;
  color: var(--color-main-soft);
}

.component-section-title__unit {
  font-size: 51px;
  letter-spacing: 0.075em;
  color: var(--color-main-soft);
}

.component-section-title__decoration {
  position: absolute;
  top: -43px;
  left: 324px;
  display: block;
  width: 47px;
}

.component-section-title__decoration img {
  display: block;
  width: 100%;
}

/* セクション見出しの英字ラベル。2026-08-24 本人指示により Google Sans を使う */
.component-section-title__label {
  margin-top: 21px;
  font-family: var(--font-english);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-main-soft);
}

.component-section-title--blue .component-section-title__label {
  color: var(--color-sub);
}

@media (max-width: 1024px) {
  .component-section-title__main {
    font-size: 32px;
  }

  .component-section-title__sub {
    font-size: 22px;
  }

  .component-section-title__accent {
    font-size: 40px;
  }

  .component-section-title__number {
    font-size: 54px;
  }

  .component-section-title__unit {
    font-size: 41px;
  }

  .component-section-title__decoration {
    top: -34px;
    left: 260px;
    width: 38px;
  }

  .component-section-title__label {
    margin-top: 16px;
    font-size: 14px;
  }
}

@media (max-width: 599px) {
  .component-section-title__main {
    font-size: 26px;
  }

  .component-section-title__sub {
    font-size: 18px;
  }

  .component-section-title__accent {
    font-size: 32px;
  }

  .component-section-title__number {
    font-size: 44px;
  }

  .component-section-title__unit {
    font-size: 34px;
  }

  .component-section-title__decoration {
    display: none;
  }
}


/* ==================================================
  Component: Section Tint（セクションの地色と角丸）
  下層ページが白一色で単調だったため、地色を交互に敷いて変化をつける（2026-08-06 本人指示）。
  新しい色は作らず、TOPで使っている --color-background-blue / --color-background-beige だけを使う。
  色付きセクションの上端を角丸にするのはTOPの「ご利用料金」と同じ考え方。
  ページ最後の色付きセクション（--last）は下端も丸める（TOPの「よくあるご質問」と同じ）。
  Modifier を付けない素の状態は「白いセクション」で、装飾を絶対配置するための起点になる。
  2026-08-12：06rental 専用だった project-rental--blue 等をここへ格上げした
================================================== */
.component-section-tint {
  position: relative;
}

.component-section-tint--blue {
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background-color: var(--color-background-blue);
}

.component-section-tint--beige {
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background-color: var(--color-background-beige);
}

.component-section-tint--last {
  border-radius: var(--radius-section);
}

@media (max-width: 1024px) {

  .component-section-tint--blue,
  .component-section-tint--beige {
    border-radius: 60px 60px 0 0;
  }

  .component-section-tint--last {
    border-radius: 60px;
  }
}

@media (max-width: 599px) {

  .component-section-tint--blue,
  .component-section-tint--beige {
    border-radius: 40px 40px 0 0;
  }

  .component-section-tint--last {
    border-radius: 40px;
  }
}


/* ==================================================
  Component: Section Decoration（セクション端に置くイラスト装飾）
  TOPに実在するイラストだけを再配置する。新しいモチーフ・新しい素材は作らない。
  親には component-section-tint（position: relative）が必要。

  【配置の原則（2026-08-12 本人指示「絶対に被らないように」を受けて変更）】

  装飾は本文の「横」ではなく「セクションの境目（上下の余白帯）」に置く。
  横によける方式は、画面幅がPCの下限（1025px）付近になると本文が画面幅いっぱいに
  広がるため、必ずどこかの幅で文字に重なる（1025〜1150pxで実測）。

  使えるのは「このセクションの上余白＋前のセクションの下余白」の帯。
  実測すると PC で上余白80px・前セクションの下端の空きは最小30px（06rental）なので、
  どのページでも確実に空いているのは 110px。装飾の高さはこの中に収める。
  そのため人物イラストは72px幅（高さ107px）、半円は48px幅（同99px）にしている。
  幅によって装飾を消したりはしない。

  【計測時の注意】スクロールインアニメーション（fead-*）は表示前の要素を
  transform で下へずらしているため、そのまま測ると重なりを誤検出する。
  検証時は fead 要素の transform と opacity を打ち消してから測ること。
  値を変えるときは 375 / 768 / 1024 / 1025 / 1100 / 1440px の6幅で実測する。
================================================== */
.component-section-decoration {
  position: absolute;
  z-index: var(--z-index-base);
}

.component-section-decoration img {
  display: block;
  width: 100%;
}

/* 波線のちらし（TOPの「初めてご利用の方」の first_illust_01）。
   高さは幅の約0.82倍。PCはTOPの表示サイズ124px＝画像の等倍に合わせる
   （高さ102px。余白帯110pxに収まる。2026-08-25 本人指示） */
.component-section-decoration--line-right {
  top: -20px;
  right: 4%;
  width: 124px;
}

.component-section-decoration--line-left {
  top: -20px;
  left: 4%;
  width: 124px;
}

/* 人物イラスト（price_illust_01 / 02）。高さは幅の1.35〜1.62倍と縦長。
   右側はTOPの表示サイズ118pxに合わせる（2026-08-25 本人指示）。
   ただし118px固定にすると高さが160pxになり、上に書いた余白帯110pxに収まらない。
   画面が広いときは本文（最大1000px）の外側に逃げられるので被らないが、
   1025px付近では逃げ場が無く 10fall_prevention の見出しに被った（実測）。
   そのため画面幅に追従させ、狭いときだけ余白帯に収まる幅まで縮める。
   到達点を1595pxから1280pxへ早めた（2026-08-26 本人指示）。
   カンプ幅1300px前後でTOPと同じ118pxになり、1025px側の76pxは変えていない */
.component-section-decoration--person-right {
  top: -24px;
  right: 3%;
  /* values 76px-118px view 1025px-1280px */
  width: clamp(76px, calc(16.47vw - 92.8px), 118px);
}

/* 左側は118pxにすると 06rental / 07service / 09maintenance で見出しと本文に被る
   （2026-08-25 実測）。余白帯110pxに収まる64pxのままにしている */
.component-section-decoration--person-left {
  top: -24px;
  left: 3%;
  width: 64px;
}

/* 黄色い半円（TOPの「よくあるご質問」の faq_illust_01 / 02）。
   高さは幅の約2.05倍と縦長。PCはTOPの表示サイズに合わせる
   （faq_illust_01 = 77px / faq_illust_02 = 60px。2026-08-24 本人指示）。
   余白帯（80px）には収まらず、セクションの角丸へ乗り上げる形になる。
   これはTOPと同じ見え方であり、意図した状態 */
/* 1025px（PC下限）の77px/60pxは実測値のまま維持し、1920px（ワイドデスクトップの目安）
   まではvwで滑らかに拡大、そこから上は100px/80pxで打ち止め（person-rightと同じ考え方）。
   セクション自体は画面幅100%のため、広い画面でも小さく見えないようにする */
.component-section-decoration--circle-left {
  top: -22px;
  left: 0;
  /* values 77px-100px view 1025px-1920px */
  width: clamp(77px, calc(2.57vw + 50.66px), 100px);
}

.component-section-decoration--circle-right {
  top: -22px;
  right: 0;
  /* values 60px-80px view 1025px-1920px */
  width: clamp(60px, calc(2.23vw + 37.14px), 80px);
}

/* 上下の余白が64pxに縮むため、それに収まる大きさへ */
@media (max-width: 1024px) {

  .component-section-decoration--line-right,
  .component-section-decoration--line-left {
    top: -16px;
    width: 92px;
  }

  .component-section-decoration--circle-left,
  .component-section-decoration--circle-right {
    top: -16px;
    width: 36px;
  }

  /* 人物イラストは本文幅が768pxまで狭まるため、この幅から隠す（2026-08-06 決定を維持）*/
  .component-section-decoration--person-right,
  .component-section-decoration--person-left {
    display: none;
  }
}

/* 余白帯が96pxに縮むため、さらに小さくする */
@media (max-width: 599px) {
  .component-section-decoration--line-right {
    top: -50px;
    right: 3%;
    width: 56px;
  }

  .component-section-decoration--line-left {
    top: -8px;
    left: 3%;
    width: 56px;
  }

  .component-section-decoration--circle-left,
  .component-section-decoration--circle-right {
    top: -14px;
    width: 28px;
  }
}

/* 波線のちらし（first_illust_01）を常時ゆらゆら揺らす。
   2026-08-24 本人指示。全ページ共通。左右どちらの配置でも同じ動き。
   transform-origin を上端にして「上から吊られて揺れる」形にする */
@-webkit-keyframes component-section-decoration-sway {

  0%,
  100% {
    -webkit-transform: rotate(-4deg) translateY(0);
    transform: rotate(-4deg) translateY(0);
  }

  50% {
    -webkit-transform: rotate(4deg) translateY(-6px);
    transform: rotate(4deg) translateY(-6px);
  }
}

@keyframes component-section-decoration-sway {

  0%,
  100% {
    -webkit-transform: rotate(-4deg) translateY(0);
    transform: rotate(-4deg) translateY(0);
  }

  50% {
    -webkit-transform: rotate(4deg) translateY(-6px);
    transform: rotate(4deg) translateY(-6px);
  }
}

.component-section-decoration--line-right img,
.component-section-decoration--line-left img {
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: component-section-decoration-sway 4s ease-in-out infinite;
  animation: component-section-decoration-sway 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

  .component-section-decoration--line-right img,
  .component-section-decoration--line-left img {
    -webkit-animation: none;
    animation: none;
  }
}


/* ==================================================
  Component: Photo Text（写真＋本文の2カラム）
  下層の4箇所で同じ組み方をしていたため共通化した（CSS_SPEC §5・§38）。
  写真を左右どちらに置くかはHTMLの記述順で決める（Modifierは持たせない）。
  写真の幅・比率・装飾の位置は箇所ごとに違うため、各セクション側で上書きする。

  写真の比率は base.css の up-ofi- を img の親に付けて指定する。
  本文の方が背が高くなる箇所では up-h-100% を併用すると、写真が本文の高さまで
  伸びる（up-ofi- は最低比率として効く）。
================================================== */

.component-photo-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 48px;
  margin-top: 60px;
}

.component-photo-text__visual {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.component-photo-text__photo {
  overflow: hidden;
  border-radius: 25px;
}

/* 写真が本文より背が高いときに本文を縦中央へ置く。
   本文の方が背が高いときは何も起きない */
.component-photo-text__body {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  min-width: 0;
}

/* 写真（up-ofi-）は position: relative を持つため、DOM順で後ろにある写真が
   イラストより前面に来る。イラストは写真の上に乗せる */
.component-photo-text__decoration {
  position: absolute;
  z-index: calc(var(--z-index-base) + 1);
}

.component-photo-text__decoration img {
  display: block;
  width: 100%;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: component-section-decoration-sway 4s ease-in-out infinite;
  animation: component-section-decoration-sway 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

  .component-photo-text__decoration img {
    -webkit-animation: none;
    animation: none;
  }
}

@media (max-width: 1024px) {

  .component-photo-text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 40px;
  }

  .component-photo-text__visual {
    width: 100%;
  }

  /* 縦積みでは align-self: center が幅の基準を「中身の最大幅」にしてしまう。
     中身に固定幅の要素（ボタンなど）があるとそれに引っ張られてはみ出すため、
     横幅いっぱいに固定する */
  .component-photo-text__body {
    width: 100%;
  }
}

@media (max-width: 599px) {

  .component-photo-text {
    gap: 28px;
    margin-top: 28px;
  }
}

/* タブレットでも2カラムを保つ。本文が長い箇所で、縦積みにすると
   写真と本文が大きく離れてしまうため */
@media (max-width: 1024px) {

  .component-photo-text--tablet-columns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 32px;
  }
}

@media (max-width: 599px) {

  .component-photo-text--tablet-columns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
  }
}


/* ==================================================
  Component: Wave（セクション上端の波）
  「白いSVGの波を上から重ねて地色を隠す」方式。地色は親要素の background-color
  なので、セクションごとに色が違っても wave_white.svg 1枚で足りる。
  layer を親の200%幅にし、背景1タイルを layer の50%（＝親と同じ幅）にすることで
  translateX(-50%) がちょうど1タイル分になり、画面幅を問わず継ぎ目なくループする。
  背景の位置ではなく transform を動かすのは、再描画を起こさないため。
  高さは設置場所ごとに上書きする（TOPのMV／お客様のお声／フッター）。
================================================== */

.component-wave {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.component-wave__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  background-image: url('/import/tenant_2/fujiseni-kaigo.a-bisu.jp/html/image/common/wave_white.svg');
  background-repeat: repeat-x;
  background-size: 50% 100%;
  will-change: transform;
  -webkit-animation: component-wave-flow 18s linear infinite;
  animation: component-wave-flow 18s linear infinite;
}

/* 手前ほど背が低く（波の線が上にくる）、不透明にする。
   奥から順に重ねることで、上から白→薄い地色→濃い地色と段階が付く */
.component-wave__layer--back {
  height: 100%;
  opacity: 0.3;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
}

.component-wave__layer--mid {
  height: 70%;
  opacity: 0.5;
  -webkit-animation-duration: 13s;
  animation-duration: 13s;
  animation-direction: reverse;
}

.component-wave__layer--front {
  height: 40%;
}

/* 上端を白で塗れない場所（前のセクションの装飾が波に重なる等）用。
   上下を反転して「地色の波が下から立ち上がる」形にする。波より上は透明のまま。
   反転するため、青いSVG（wave.svg = --color-background-light と同色）を使う。
   scaleY は Block に掛ける。layer に掛けると translateX のアニメーションに上書きされる */
.component-wave--up {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

.component-wave--up .component-wave__layer {
  background-image: url('/import/tenant_2/fujiseni-kaigo.a-bisu.jp/html/image/common/wave.svg');
}

@-webkit-keyframes component-wave-flow {

  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@keyframes component-wave-flow {

  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {

  .component-wave__layer {
    -webkit-animation: none;
    animation: none;
  }
}


/* ==================================================
  Component: Page Heading（下層ページのメインビジュアル）
  カンプに下層デザインが無いため、TOPの配色・書体スケールから外挿した。
  見出しは component-section-title を流用し、独自の装飾は足さない。
================================================== */

.component-page-heading__body {
  padding-top: 72px;
  padding-bottom: 40px;
  background-color: var(--color-background-light);
}

.component-page-heading__inner {
  text-align: center;
}

.component-page-heading__title {
  display: inline-block;
  text-align: left;
}

/* フッターの波を上下反転して使う。反転すると平坦な水色側が上に来るため、
   その部分が帯の続きになる（body の padding-bottom を 40px に抑えているのはこのため）。
   画像の端2行は半透明で、白い背景に接すると白い線として見える。
   拡大縮小で数px にじむため、幅に対して1%だけ帯側へ重ねて隠す */
/* 波は wave.svg を repeat-x で敷き、background-position を1タイル分ずらし続けることで
   途切れず流し続ける（2026-07-30 本人指示。SVGの使用許可を得た）。
   SVGはタイルできる形（左右の端で傾きが一致）に作ってあるため継ぎ目が出ない。
   層ごとに不透明度・波の大きさ・速度・向きを変えて奥行きを出している */
.component-page-heading__wave {
  position: relative;
  height: 90px;
  margin-top: -1px;
  overflow: hidden;
}

/* 幅を「画面幅＋1タイル」にして、1タイルぶん translateX で動かす。
   background-position を動かすと毎フレーム再描画が走って重いため transform を使う */
.component-page-heading__wave-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + 1000px);
  background-image: url('/import/tenant_2/fujiseni-kaigo.a-bisu.jp/html/image/common/wave.svg');
  background-repeat: repeat-x;
  background-position: 0 100%;
  will-change: transform;
  -webkit-animation: page-heading-wave 18s linear infinite;
  animation: page-heading-wave 18s linear infinite;
}

.component-page-heading__wave-layer--front {
  z-index: calc(var(--z-index-base) + 2);
  background-size: 1000px 100%;
}

.component-page-heading__wave-layer--mid {
  z-index: calc(var(--z-index-base) + 1);
  background-size: 1000px 74%;
  opacity: 0.5;
  -webkit-animation-duration: 13s;
  animation-duration: 13s;
  animation-direction: reverse;
}

.component-page-heading__wave-layer--back {
  z-index: var(--z-index-base);
  background-size: 1000px 52%;
  opacity: 0.3;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
}

/* 1タイル（1000px）ぶん動かすと同じ絵柄に戻るため、継ぎ目なく流れ続ける */
@-webkit-keyframes page-heading-wave {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}

@keyframes page-heading-wave {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
}

/* 動きを減らす設定にしている端末では止める */
@media (prefers-reduced-motion: reduce) {
  .component-page-heading__wave-layer {
    -webkit-animation: none;
    animation: none;
  }
}

@media (max-width: 1024px) {
  .component-page-heading__body {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .component-page-heading__wave {
    height: 70px;
  }

  /* 幅が狭いと波が横に伸びすぎるため、タイルも縮める。
     移動量はタイル幅と一致させる必要があるため、幅と keyframes も合わせて変える */
  .component-page-heading__wave-layer {
    width: calc(100% + 700px);
    background-size: 700px 100%;
    -webkit-animation-name: page-heading-wave-tb;
    animation-name: page-heading-wave-tb;
  }

  .component-page-heading__wave-layer--mid {
    background-size: 700px 74%;
  }

  .component-page-heading__wave-layer--back {
    background-size: 700px 52%;
  }
}

@-webkit-keyframes page-heading-wave-tb {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-700px);
    transform: translateX(-700px);
  }
}

@keyframes page-heading-wave-tb {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-700px);
    transform: translateX(-700px);
  }
}

@media (max-width: 599px) {
  .component-page-heading__body {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .component-page-heading__wave {
    height: 48px;
  }

  .component-page-heading__wave-layer {
    width: calc(100% + 480px);
    background-size: 480px 100%;
    -webkit-animation-name: page-heading-wave-sp;
    animation-name: page-heading-wave-sp;
  }

  .component-page-heading__wave-layer--mid {
    background-size: 480px 74%;
  }

  .component-page-heading__wave-layer--back {
    background-size: 480px 52%;
  }
}

@-webkit-keyframes page-heading-wave-sp {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-480px);
    transform: translateX(-480px);
  }
}

@keyframes page-heading-wave-sp {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-480px);
    transform: translateX(-480px);
  }
}


/* ==================================================
  Component: Breadcrumb（下層ページのパンくず）
  HTML_SPEC §19-5 の構造に合わせる。構造化データ属性は付けない。
================================================== */

.component-breadcrumb {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* 長いページ名でも画面外へはみ出させない（HTML_SPEC §10）。
   flex では項目が折り返しの単位になり、長いページ名の項目が丸ごと次の行へ落ちるため、
   インラインで並べて文字単位で折り返す */
.component-breadcrumb__list {
  display: block;
}

.component-breadcrumb__item {
  display: inline;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* 区切りの山括弧。content に文字を置かず枠線で描く。
   左右の余白は、flex の gap をやめたぶんを margin で持たせている */
.component-breadcrumb__item:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  margin-left: 10px;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  vertical-align: middle;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ページ名が長いときに行の途中で折り返せるよう、リンクの中身もインラインにする */
.component-breadcrumb__link {
  display: inline;
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {

  /* 透過ではなく文字色で反応させる（README §4「hoverの方針」） */
  .component-breadcrumb__item a:hover {
    opacity: 1;
  }

  .component-breadcrumb__item a:hover .component-breadcrumb__link {
    color: var(--color-main-darkest);
  }
}

@media (max-width: 599px) {
  .component-breadcrumb__item {
    font-size: 12px;
  }
}


/* ==================================================
  Component: Table（表組み）
  TOPに表が無いためカンプからは決められない。
  区切り線・文字サイズはTOPのトークンから外挿している。
================================================== */

.component-table table {
  width: 100%;
  /* 上端の線。行ごとの線は th / td の border-bottom で引いている */
  border-top: 1px solid var(--color-border-divider);
  border-left: 1px solid var(--color-border-divider);
  border-collapse: collapse;
}

.component-table th,
.component-table td {
  padding: 20px 18px;
  border-bottom: 1px solid var(--color-border-divider);
  font-size: 16px;
  line-height: 1.875;
  text-align: left;
  vertical-align: top;
}

/* 表の右端にも縦線を入れる（左端は th の地色が境目になるため不要） */
.component-table td {
  border-right: 1px solid var(--color-border-divider);
}

.component-table th {
  width: 240px;
  background-color: var(--color-background-light);
  font-weight: 500;
}

/* 見出し列が「1日～15日」のように短い表。240pxだと間延びするため詰める（05price） */
.component-table--narrow th {
  width: 160px;
}

@media (max-width: 1024px) {
  .component-table th {
    width: 200px;
  }

  .component-table--narrow th {
    width: 140px;
  }
}

@media (max-width: 599px) {

  /* 2列だと見出し列が潰れるため縦積みにする */
  .component-table tr,
  .component-table th,
  .component-table td {
    display: block;
    width: 100%;
  }

  .component-table th,
  .component-table td {
    padding: 12px 16px;
  }

  .component-table th {
    border-bottom: 0;
  }
}


/* ==================================================
  Component: Circle Arrow（丸い矢印アイコン）
================================================== */

.component-circle-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border: 3px solid var(--color-main-dark);
  border-radius: 50%;
  /* hover で枠線と地色を反転させるため（--fill 側は個別に指定している） */
  -webkit-transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

/* 矢印は装飾のため疑似要素で描画する（CSS_SPEC §30「疑似要素の装飾」/ §31）。
   支給の icon_arrow_right_white.webp は中身が白ではなく青（RGB 12,86,222）のため、
   画像は mask として形だけを使い、色はCSSで指定する。
   これにより hover 時の色反転も、画像を増やさずCSSだけで行える。

   mask画像は data URI で埋め込む。mask-image は background-image と違い
   CORSの対象になるため、file:// で開いたときに外部ファイル参照では読み込めず
   矢印が消える（ローカル確認ができなくなる）。中身は
   image/common/icon_arrow_right_blue.webp（12×8）をそのままbase64化したもので、
   画像を差し替えるときはここも合わせて更新する */
.component-circle-arrow::before {
  content: '';
  display: block;
  width: 12px;
  height: 8px;
  background-color: var(--color-main-dark);
  -webkit-mask: url('/import/tenant_2/9ebd743580480ecb301c1b0625f00354') no-repeat center / contain;
  mask: url('/import/tenant_2/9ebd743580480ecb301c1b0625f00354') no-repeat center / contain;
  -webkit-transition: background-color var(--duration-fast) ease;
  transition: background-color var(--duration-fast) ease;
}

/* ブラウザのスクロールアンカリングを止める（2026-08-06）。
   アコーディオンやFAQを開くと、開いた高さのぶんブラウザが自動でスクロール位置を
   ずらすため、クリックした見出しが画面の上へ流れてしまう
   （06rental のSTEP1で実測1,468pxのずれ）。
   .wrapper 配下をアンカーの候補から外すことで、見出しの位置が動かなくなる */
.wrapper {
  overflow-anchor: none;
}


.component-circle-arrow--fill {
  width: 38px;
  height: 38px;
  border-width: 0;
  background-color: var(--color-main-dark);
  -webkit-transition: background-color var(--duration-fast) ease;
  transition: background-color var(--duration-fast) ease;
}

/* 中身は image/common/icon_arrow_right_white.webp（16×12）をbase64化したもの */
.component-circle-arrow--fill::before {
  width: 16px;
  height: 12px;
  background-color: var(--color-white);
  -webkit-mask-image: url('/import/tenant_2/512ae8f35f36016cc3aadaed555a202c');
  mask-image: url('/import/tenant_2/512ae8f35f36016cc3aadaed555a202c');
}

/* 「一覧へ戻る」など前へ向かう矢印。画像を増やさず、同じmask画像を左右反転して使う
   （component-pagination__prev と同じ手法） */
.component-circle-arrow--back::before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}


/* ==================================================
  Component: Arrow Button（白いピル型ボタン＋丸矢印）
================================================== */

.component-arrow-button {
  width: 382px;
  max-width: 100%;
}

.component-arrow-button a {
  display: block;
}

.component-arrow-button__inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 81px;
  /* 矢印は右端に絶対配置する。左右の余白を矢印の占有幅（right 16px + 幅 38px + 逃げ 6px）で
     揃えることで、テキストはボタンの中央に来て、矢印だけが右端に固定される */
  padding: 12px 60px;
  border: 2px solid var(--color-main-pale);
  border-radius: var(--radius-round);
  background-color: var(--color-white);
  -webkit-transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    -webkit-box-shadow var(--duration-fast) ease,
    -webkit-transform var(--duration-fast) ease;
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    -webkit-box-shadow var(--duration-fast) ease,
    -webkit-transform var(--duration-fast) ease;
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    transform var(--duration-fast) ease;
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    transform var(--duration-fast) ease,
    -webkit-box-shadow var(--duration-fast) ease,
    -webkit-transform var(--duration-fast) ease;
}

.component-arrow-button__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  letter-spacing: 0.075em;
  color: var(--color-text);
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

.component-arrow-button .component-circle-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* 「一覧へ戻る」は矢印が左を向くため、位置も左端へ移す。
   __inner の padding は左右対称なのでテキストは中央のまま重ならない */
.component-arrow-button .component-circle-arrow--back {
  right: auto;
  left: 16px;
}

/* 枠線は基本スタイルの 2px をそのまま使う。影付きだけ枠線を消していたが、
   2026-08-26 本人指示で枠線ありに戻した（border-width の上書きを削除） */
.component-arrow-button--shadow .component-arrow-button__inner {
  -webkit-box-shadow: 2px 5px 0 0 var(--color-main-soft);
  box-shadow: 2px 5px 0 0 var(--color-main-soft);
}

@media (hover: hover) and (pointer: fine) {

  /* base.css の a:hover { opacity: 0.6 } では色が濁るため、
     このコンポーネントでは透過をやめて配色の反転で表現する（CSS_SPEC §35） */
  .component-arrow-button a:hover {
    opacity: 1;
  }

  .component-arrow-button a:hover .component-arrow-button__inner {
    border-color: var(--color-main-dark);
    background-color: var(--color-main-dark);
  }

  .component-arrow-button a:hover .component-arrow-button__text {
    color: var(--color-white);
  }

  .component-arrow-button a:hover .component-circle-arrow--fill {
    background-color: var(--color-white);
  }

  .component-arrow-button a:hover .component-circle-arrow--fill::before {
    background-color: var(--color-main-dark);
  }

  /* 影付きのボタンは、影の分だけ沈ませて「押されている」状態を作る。
     移動量と影の縮小量を同じ 5px にすることで、ボタンの右下端の位置が変わらない */
  .component-arrow-button--shadow a:hover .component-arrow-button__inner {
    -webkit-box-shadow: 0 0 0 0 var(--color-main-soft);
    box-shadow: 0 0 0 0 var(--color-main-soft);
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
  }
}

/* 白い背景のセクションに置くと白いボタンが背景と同化するため、
   地色を反転させたボタンを用意した（2026-08-06 本人指示）。
   hover では通常のボタンと逆に、白地＋ブランド色の文字へ戻す */
.component-arrow-button--fill .component-arrow-button__inner {
  border-color: var(--color-main-dark);
  background-color: var(--color-main-dark);
}

.component-arrow-button--fill .component-arrow-button__text {
  color: var(--color-white);
}

.component-arrow-button--fill .component-circle-arrow--fill {
  background-color: var(--color-white);
}

.component-arrow-button--fill .component-circle-arrow--fill::before {
  background-color: var(--color-main-dark);
}

@media (hover: hover) and (pointer: fine) {
  .component-arrow-button--fill a:hover .component-arrow-button__inner {
    border-color: var(--color-main-dark);
    background-color: var(--color-white);
  }

  .component-arrow-button--fill a:hover .component-arrow-button__text {
    color: var(--color-main-dark);
  }

  .component-arrow-button--fill a:hover .component-circle-arrow--fill {
    background-color: var(--color-main-dark);
  }

  .component-arrow-button--fill a:hover .component-circle-arrow--fill::before {
    background-color: var(--color-white);
  }
}

@media (max-width: 1024px) {

  /* ご利用料金のボタンは2列グリッドで1列 約349px になるため、PCと同じ左右60pxでは
     「福祉用具レンタル制度を見る」が2行になり行ごとに高さが変わる。矢印の位置を
     右へ寄せて左右の余白を詰める */
  .component-arrow-button__inner {
    padding: 12px 50px;
  }

  .component-arrow-button .component-circle-arrow {
    right: 10px;
  }

  .component-arrow-button .component-circle-arrow--back {
    left: 10px;
  }
}

@media (max-width: 599px) {
  .component-arrow-button__inner {
    min-height: 68px;
    padding: 10px 56px;
  }

  .component-arrow-button .component-circle-arrow {
    right: 12px;
  }

  .component-arrow-button .component-circle-arrow--back {
    left: 12px;
  }

  .component-arrow-button__text {
    font-size: 16px;
  }
}


/* ==================================================
  Component: More Link（記事一覧を見る）
================================================== */

.component-more-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.component-more-link__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 18px;
}

.component-more-link__text {
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: 0.075em;
  color: var(--color-text-link);
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {

  /* 透過ではなく配色の変化で表現する（.component-arrow-button と同じ方針） */
  .component-more-link a:hover {
    opacity: 1;
  }

  .component-more-link a:hover .component-more-link__text {
    color: var(--color-main-darkest);
  }

  .component-more-link a:hover .component-circle-arrow {
    border-color: var(--color-main-darkest);
    background-color: var(--color-main-darkest);
  }

  .component-more-link a:hover .component-circle-arrow::before {
    background-color: var(--color-white);
  }
}


/* ==================================================
  Component: Category Tab（カテゴリ絞り込み）
================================================== */

.component-category-tab {
  padding: 22px 39px;
  border-radius: var(--radius-round);
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
  box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
}

.component-category-tab__list, [data-element-id] .component-category-tab__list>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: baseline;
}

.component-category-tab__item {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.025em;
  color: var(--color-text);
}

.component-category-tab__item a {
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

/* 一覧ページで現在表示中のカテゴリ。タブは文字だけの作りなので、
   下線や背景を足さず配色と太さで表す。
   状態classは a ではなく li 側に付ける（HTML §5-2 / CSS §14） */
.component-category-tab__item.is-current a {
  font-weight: 500;
  color: var(--color-main-darkest);
}

@media (hover: hover) and (pointer: fine) {

  /* 透過ではなく文字色で反応させる。色は li 側にあるため a では継承値から変える */
  .component-category-tab__item a:hover {
    opacity: 1;
    color: var(--color-main-darkest);
  }
}

@media (max-width: 1024px) {
  .component-category-tab {
    padding: 16px 24px;
  }

  .component-category-tab__list {
    gap: 8px 20px;
  }

  .component-category-tab__item {
    font-size: 14px;
  }
}


/* ==================================================
  Component: Side Filter（一覧ページのサイドに置く絞り込み）
  カンプに無いため支給の参考画像から起こした（2026-08-26 本人指示）。
  カテゴリとアーカイブが同じ見た目なので、1つのパーツにまとめている（CSS_SPEC §39）
================================================== */

.component-side-filter__label {
  font-family: var(--font-english);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-main-darkest);
}

.component-side-filter__list {
  margin-top: 12px;
  padding: 0 20px;
  border: 1px solid var(--color-main);
  border-radius: var(--radius-small);
  background-color: var(--color-white);
}

.component-side-filter__item {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.025em;
  color: var(--color-text);
}

/* 区切りの点線は項目の間だけに出す。上下端には出さない */
.component-side-filter__item+.component-side-filter__item {
  border-top: 1px dotted var(--color-border-divider);
}

/* 行全体をクリック範囲にする（HTML_SPEC §5-3） */
.component-side-filter__item a {
  display: block;
  padding: 14px 4px;
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

/* 現在表示中の絞り込み。状態classは a ではなく li 側に付ける（HTML §5-2 / CSS §14） */
.component-side-filter__item.is-current a {
  font-weight: 500;
  color: var(--color-main-darkest);
}

@media (hover: hover) and (pointer: fine) {

  /* 透過ではなく文字色で反応させる（.component-category-tab と同じ方針） */
  .component-side-filter__item a:hover {
    opacity: 1;
    color: var(--color-main-darkest);
  }
}


/* ==================================================
  Component: Pagination（一覧ページの番号送り）
  カンプに無いためTOPの配色・角丸から外挿した。番号は丸、現在ページだけ塗る。
  番号の件数・前後の有無はA-BiSU側の設定で増減するため、
  どれが欠けても崩れない並べ方にしている（HTML_SPEC §13）
================================================== */

.component-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px 20px;
}

.component-pagination__numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

/* 2桁でも丸が崩れないよう、幅は min-width と左右 padding で持つ */
.component-pagination__item a,
.component-pagination__current {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 12px;
  border: 1px solid var(--color-main-pale);
  border-radius: var(--radius-round);
  background-color: var(--color-white);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-text);
  -webkit-transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.component-pagination__current {
  border-color: var(--color-main-darkest);
  background-color: var(--color-main-darkest);
  color: var(--color-white);
}

/* 前後は文字ではなく矢印で示す。矢印画像を増やさないよう .component-circle-arrow を流用し、
   番号の丸と高さ・地色をそろえる（枠線の太さだけが番号と異なり、送りのボタンだと分かる）*/
.component-pagination__prev .component-circle-arrow,
.component-pagination__next .component-circle-arrow {
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
}

/* 前へは同じmask画像を左右反転して使う */
.component-pagination__prev .component-circle-arrow::before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

@media (hover: hover) and (pointer: fine) {

  /* 透過ではなく配色の変化で表現する（.component-more-link と同じ方針） */
  .component-pagination a:hover {
    opacity: 1;
  }

  .component-pagination__item a:hover {
    border-color: var(--color-main-darkest);
    background-color: var(--color-main-darkest);
    color: var(--color-white);
  }

  /* 番号と同じく、地色を塗って中身を白へ反転させる */
  .component-pagination a:hover .component-circle-arrow {
    border-color: var(--color-main-darkest);
    background-color: var(--color-main-darkest);
  }

  .component-pagination a:hover .component-circle-arrow::before {
    background-color: var(--color-white);
  }
}

@media (max-width: 599px) {

  /* 前後のリンクと番号を1行に並べる（2026-08-26 本人指示）。
     番号が増えたときは .component-pagination__numbers の中だけで折り返すため、
     前後のリンクが押し出されて溢れることはない */
  .component-pagination {
    gap: 12px 24px;
  }

  .component-pagination__item a,
  .component-pagination__current {
    min-width: 40px;
    min-height: 40px;
    padding: 4px 10px;
    font-size: 15px;
  }

  .component-pagination__prev .component-circle-arrow,
  .component-pagination__next .component-circle-arrow {
    width: 40px;
    height: 40px;
  }
}


/* ==================================================
  List: News（お知らせ一覧）
================================================== */

.list-news {
  border-top-width: 0;
}

.list-news__item {
  border-bottom: 1px solid var(--color-border-line);
}

.list-news__item a {
  display: block;
}

.list-news__link {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 128px 32px 168px 32px minmax(0, 1fr);
  grid-template-columns: 128px 168px minmax(0, 1fr);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px 32px;
  padding: 32px 12px;
}

.list-news__date {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

/* カテゴリは .js-split-tag でカンマ区切りが span に分割される（HTML §12-3）。
   丸枠は span 側に当てる。span が増えても折り返すだけで崩れない */
.list-news__category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 4px;
}

.list-news__category span {
  padding: 5px 8px;
  border-radius: var(--radius-round);
  background-color: var(--color-background-beige-tag);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.075em;
  text-align: center;
  color: var(--color-text);
}

/* 1件のときは列幅（168px）いっぱいに広げ、従来の見た目を保つ */
.list-news__category span:only-child {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.list-news__title {
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {

  /* 透過ではなく記事タイトルの文字色で反応させる。
     日付・カテゴリは補助情報なので色を変えない */
  .list-news__item a:hover {
    opacity: 1;
  }

  .list-news__item a:hover .list-news__title {
    color: var(--color-main-darkest);
  }
}

/* 一覧ページがサイド付きの2カラムになり日付の列が余るため、日付だけ詰める */
@media (max-width: 1024px) {
  .list-news__link {
    -ms-grid-columns: 90px 168px minmax(0, 1fr);
    grid-template-columns: 90px 168px minmax(0, 1fr);
  }
}

@media (max-width: 599px) {
  .list-news__link {
    -ms-grid-columns: auto 12px minmax(0, 1fr);
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    padding: 18px 0;
  }

  .list-news__title {
    grid-column: 1 / -1;
    font-size: 16px;
  }

  .list-news__category {
    -ms-grid-column-align: start;
    justify-self: start;
  }

  .list-news__category span {
    padding-right: 14px;
    padding-left: 14px;
  }

  /* SPは1列に積むため列幅が無い。広げずに文字幅のままにする */
  .list-news__category span:only-child {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
  }
}


/* ==================================================
  List: News Detail（お知らせ詳細の記事部分）
  カンプに無いためTOPの書体スケール（README §4「見出しスケール」）から外挿した
================================================== */

.list-news-detail__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px 20px;
}

.list-news-detail__date {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

/* 一覧のカテゴリタグと同じ見た目にそろえている（.list-news__category）。
   Block が違うため値を共有できず、同じ値を書いている。
   丸枠は .js-split-tag が作る span 側に当てる（HTML §12-3） */
.list-news-detail__category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 4px;
}

.list-news-detail__category span {
  padding: 5px 14px;
  border-radius: var(--radius-round);
  background-color: var(--color-background-beige-tag);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.075em;
  color: var(--color-text);
}

.list-news-detail__title {
  margin-top: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border-line);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text);
}

.list-news-detail__body {
  margin-top: 32px;
}

@media (max-width: 1024px) {
  .list-news-detail__title {
    font-size: 22px;
  }
}

@media (max-width: 599px) {
  .list-news-detail__head {
    gap: 10px 14px;
  }

  .list-news-detail__title {
    margin-top: 16px;
    padding-bottom: 18px;
    font-size: 20px;
  }

  .list-news-detail__body {
    margin-top: 24px;
  }
}


/* ==================================================
  List: Editor Content（CMS本文）
  内部タグへclassを付けられない領域。この Block 内に限ってタグセレクタを使う
  （CSS_SPEC §41）。サイト全体の h2 / p には絶対に書かない
================================================== */

.list-editor-content {
  font-size: 16px;
  line-height: 1.875;
  color: var(--color-text);
}

.list-editor-content>*:first-child {
  margin-top: 0;
}

/* 見出しの装飾は、下層ページで使っている見出し階層（component-tab__title の下線 /
   __subtitle の縦線 / __minor-title の色）から外挿している。
   CMS本文だけ別系統の装飾にしない */
.list-editor-content h2 {
  margin-top: 48px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-divider);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-main-darkest);
}

.list-editor-content h3 {
  margin-top: 40px;
  margin-bottom: 20px;
  padding-left: 14px;
  border-left: 4px solid var(--color-main);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

/* h3 との差は縦線の太さと色で出す */
.list-editor-content h4 {
  margin-top: 32px;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 2px solid var(--color-main-pale);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-main-darkest);
}

.list-editor-content p {
  margin-top: 24px;
}

.list-editor-content ul,
.list-editor-content ol {
  margin-top: 24px;
}

.list-editor-content ol {
  padding-left: 1.5em;
  list-style: decimal;
}

/* 番号は既存の丸バッジ（component-tab__number）ほど強くせず、色と太さだけで示す */
.list-editor-content ol>li::marker {
  font-weight: 700;
  color: var(--color-main-darkest);
}

.list-editor-content ul {
  list-style: none;
}

.list-editor-content ul>li {
  position: relative;
  padding-left: 20px;
}

/* 行頭の丸は既存の箇条書き（component-tab__list-item）と同じ寸法・色に揃えている */
.list-editor-content ul>li::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-main);
}

.list-editor-content li+li {
  margin-top: 8px;
}

.list-editor-content a {
  text-decoration: underline;
  color: var(--color-main-darkest);
}

.list-editor-content img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-top: 32px;
}

/* CMSの埋め込み動画は width / height が属性で入るため、枠に収まるよう上書きする
   （表の横スクロールと同じ考え方） */
.list-editor-content iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin-top: 32px;
}

/* CMSの表は列数が分からないため、はみ出す場合は横スクロールで見せる */
.list-editor-content table {
  width: 100%;
  margin-top: 32px;
  border-top: 1px solid var(--color-border-divider);
}

.list-editor-content th,
.list-editor-content td {
  padding: 16px;
  border-right: 1px solid var(--color-border-divider);
  border-bottom: 1px solid var(--color-border-divider);
  text-align: left;
}

.list-editor-content th {
  background-color: var(--color-background-light);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .list-editor-content h2 {
    margin-top: 40px;
    font-size: 22px;
  }
}

@media (max-width: 599px) {
  .list-editor-content h2 {
    margin-top: 32px;
    font-size: 20px;
  }

  .list-editor-content h3 {
    margin-top: 28px;
    font-size: 18px;
  }

  .list-editor-content h4 {
    margin-top: 24px;
    font-size: 17px;
  }

  .list-editor-content p,
  .list-editor-content ul,
  .list-editor-content ol {
    margin-top: 20px;
  }

  .list-editor-content th,
  .list-editor-content td {
    padding: 12px;
  }
}


/* ==================================================
  List: Blog（ブログ一覧）
================================================== */

.list-blog,[data-element-id] .list-blog>div {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 28px;
}

[data-element-id] .list-blog{
  display: block;
}

.list-blog__item>a {
  display: block;
  height: 100%;
}

.list-blog__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

/* 比率固定は base.css の up-ofi-75 で行う（カンプ 279×209 = 74.9%、誤差 +0.1%）。
   width / height / object-fit / position は up-ofi 側が持つため案件側で書かない */
.list-blog__image {
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--color-border-frame);
}

/* 丸枠は .js-split-tag が作る span 側に当てる（HTML §12-3）。
   data-mh で揃えた親の高さに span を追従させるため align-items は stretch のまま */
.list-blog__category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-item-align: start;
  align-self: flex-start;
  align-items: flex-start;
  gap: 4px;
  margin-top: 29px;
}

.list-blog__category span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 4px 15px;
  border-radius: var(--radius-round);
  background-color: var(--color-background-beige-light);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.075em;
  color: var(--color-text-light);
}

/* 2行を超える分は内側の span に付けた base.css の up-reader2 で省略する。
   data-mh を持つ要素には直接 up-reader2 を付けない（社内の共通手順・2026-08-12）。
   matchHeight は測定中に対象要素の display を block へ戻すため、
   同じ要素に line-clamp を付けると測定のあいだだけ省略が無効になり、
   省略前の高さ（実測：長いタイトル1件で150px）を行の高さとして採用してしまう。
   子の span に付けておけば display を戻されないため、測定値も2行に収まる */
.list-blog__title {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.875;
  color: var(--color-text);
}

/* 画像は up-ofi 側で親いっぱいに絶対配置されている。親の overflow: hidden で
   はみ出しを隠すため、transform だけで拡大できる */
.list-blog__image img {
  -webkit-transition: -webkit-transform var(--duration-normal) ease;
  transition: -webkit-transform var(--duration-normal) ease;
  transition: transform var(--duration-normal) ease;
  transition: transform var(--duration-normal) ease, -webkit-transform var(--duration-normal) ease;
}

@media (hover: hover) and (pointer: fine) {

  /* 透過はさせず（本人指示）、画像の拡大だけで反応を出す */
  .list-blog__item a:hover {
    opacity: 1;
  }

  .list-blog__item a:hover .list-blog__image img {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }
}

@media (max-width: 1024px) {
  .list-blog {
    -ms-grid-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
}

@media (max-width: 599px) {
  .list-blog {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 20px 10px;
  }

  .list-blog__category {
    margin-top: 16px;
  }
}


/* ==================================================
  List: Voice（お客様のお声一覧）
  公開画面では js/script.js が Swiper のclassを付与してスライダーになる。
  見たまま編集画面ではclassが付かないため、下記の横スクロールのまま編集できる。
================================================== */

.list-voice {
  padding-bottom: 8px;
  overflow-x: auto;
}

.list-voice.swiper {
  padding-bottom: 0;
  overflow-x: hidden;
}

.list-voice__inner, [data-element-id] .list-voice__inner>div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 22px;
}

/* Swiper 起動後は spaceBetween が余白を作るため gap は無効化する */
.list-voice .swiper-wrapper {
  gap: 0;
}

.list-voice__item {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 352px;
}

.list-voice__item a {
  display: block;
}

/* 比率固定は base.css の up-ofi-70 で行う（カンプ 352×252 = 71.6%、誤差 -1.6%） */
.list-voice__image {
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.list-voice__image img {
  -webkit-transition: -webkit-transform var(--duration-normal) ease;
  transition: -webkit-transform var(--duration-normal) ease;
  transition: transform var(--duration-normal) ease;
  transition: transform var(--duration-normal) ease, -webkit-transform var(--duration-normal) ease;
}

/* hover で画像に重ねる氏名の帯（2026-08-27 本人指示）。
   帯のマークアップ（__cover）がある箇所にだけ出る。PCのみ（本人指示）。
   __image は base.css の up-ofi- により position: relative、overflow: hidden なので、
   帯は画像の全面へ広がり、角丸と枠線の内側で切り取られる。
   地色は --color-main-darkest を透かした値（選択中のタブと同じ「水色地に白文字」） */
.list-voice__cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index-base);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 173, 186, 0.72);
  opacity: 0;
  -webkit-transition: opacity var(--duration-normal) ease;
  transition: opacity var(--duration-normal) ease;
}

/* 氏名は「イニシャル ＋ 様」。イニシャルだけカスタムコンテンツが入れ、
   「様」はHTML側の固定文字にしている（本人指示 2026-08-27）。
   イニシャルは「N.Y」のように複数文字になるため、CSSの ::first-letter では分けられない。
   span が消えてもサイズが変わるだけで崩れない（HTML_SPEC §2-2） */
.list-voice__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--color-white);
}

.list-voice__initial {
  font-family: var(--font-english);
  font-size: 30px;
}

@media (hover: hover) and (pointer: fine) {

  /* 透過はさせず（本人指示）、画像の拡大だけで反応を出す */
  .list-voice__item a:hover {
    opacity: 1;
  }

  .list-voice__item a:hover .list-voice__image img {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
  }

  .list-voice__item a:hover .list-voice__cover {
    opacity: 1;
  }
}

/* 一覧ページ・レコメンド用。TOPは横スクロール（Swiper）だが、こちらは格子に並べる。
   Swiper は起動しない（js-voice-slider を付けていない） */
.list-voice--grid {
  padding-bottom: 0;
  overflow-x: visible;
}

.list-voice--grid .list-voice__inner,[data-element-id] .list-voice--grid .list-voice__inner>div {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 22px;
}

[data-element-id] .list-voice--grid .list-voice__inner{
  display: block;
}

.list-voice--grid .list-voice__item {
  width: auto;
}

@media (max-width: 1024px) {
  .list-voice--grid .list-voice__inner {
    -ms-grid-columns: (minmax(0, 1fr))[2];
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .list-voice__item {
    width: 280px;
  }

  .list-voice--grid .list-voice__inner {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .list-voice--grid .list-voice__item {
    width: auto;
  }
}


/* ==================================================
  Component: Slider Navigation（スライダーの前後ボタン）
  Swiper の navigation で使う。Swiper が付与する swiper-button-disabled で
  端に到達した状態を表す。
  button タグは使わない（README 確認事項14）。Swiper が __item を直接
  navigation として扱い、role="button" と aria-label を付ける
================================================== */

.component-slider-navigation__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-main-dark);
  cursor: pointer;
  -webkit-transition:
    background-color var(--duration-fast) ease,
    opacity var(--duration-fast) ease;
  transition:
    background-color var(--duration-fast) ease,
    opacity var(--duration-fast) ease;
}

/* 矢印は装飾のため疑似要素で描画する（.component-circle-arrow--fill と同じmask画像） */
.component-slider-navigation__item::before {
  content: '';
  display: block;
  width: 16px;
  height: 12px;
  background-color: var(--color-white);
  -webkit-mask: url('/import/tenant_2/512ae8f35f36016cc3aadaed555a202c') no-repeat center / contain;
  mask: url('/import/tenant_2/512ae8f35f36016cc3aadaed555a202c') no-repeat center / contain;
  -webkit-transition: background-color var(--duration-fast) ease;
  transition: background-color var(--duration-fast) ease;
}

.component-slider-navigation__item--prev::before {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.component-slider-navigation__item.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

/* スライド数が表示枚数以下でスクロール不要なときは Swiper が付ける。
   Swiper側のCSSは swiper-button-prev / next にしか効かないため案件側で指定する */
.component-slider-navigation__item.swiper-button-lock {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .component-slider-navigation__item:hover {
    opacity: 1;
    background-color: var(--color-white);
    -webkit-box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
    box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
  }

  .component-slider-navigation__item:hover::before {
    background-color: var(--color-main-dark);
  }

  .component-slider-navigation__item.swiper-button-disabled:hover {
    opacity: 0.3;
    background-color: var(--color-main-dark);
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .component-slider-navigation__item.swiper-button-disabled:hover::before {
    background-color: var(--color-white);
  }
}

@media (max-width: 599px) {
  .component-slider-navigation__item {
    width: 40px;
    height: 40px;
  }
}


/* ==================================================
  List: FAQ（よくあるご質問）
  開閉は common.js の .js-toggle を使用する。
  開くと直後の兄弟要素へ .is-active、見出し側へ .is-parent が付く。
================================================== */

.list-faq__item+.list-faq__item {
  margin-top: 18px;
}

/* hover での地色変更は本人指示で廃止した（2026-08-25）。
   白い背景のセクションでは白いカードが地と同化するため枠線を足すが、
   該当するのは 03first だけなので style.css の .page-first で限定している
   （01index / 13faq はベージュ地、11daily_living_aids は水色地）*/
.list-faq__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 22px;
  min-height: 78px;
  padding-right: 32px;
  border-radius: var(--radius-round);
  background-color: var(--color-white);
  cursor: pointer;
}

.list-faq__badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 88px;
  padding-left: 16px;
  padding-bottom: 5px;
  border-radius: var(--radius-round) 0 0 var(--radius-round);
  background-color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.list-faq__question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 0;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
}

/* 開閉操作の button タグは使わない（README 確認事項14）。
   クリック判定は親の .js-toggle が持つ */

.list-faq__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 28px;
  -webkit-transition: -webkit-transform var(--duration-fast) ease;
  transition: -webkit-transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease, -webkit-transform var(--duration-fast) ease;
}

.list-faq__icon img {
  display: block;
  width: 100%;
}

.list-faq__head.is-parent .list-faq__icon {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

/* common.js の slideToggle は height だけをアニメーションさせるため、
   開閉する要素に padding を持たせると開いた瞬間に padding 分だけ高さが跳ねる。
   余白は中の .list-faq__answer 側に持たせて、この要素の高さを 0 から動かす */
.list-faq__body {
  display: none;
}

.list-faq__answer {
      padding: 20px 32px 20px 90px;
    font-size: 16px;
    line-height: 1.875;
    color: var(--color-text);
    background-color: #fff;
    transform: translateY(5px);
    border-radius: var(--radius-round);
    position: relative;
}

.list-faq__answer::before {
    content: "A";
    position: absolute;
    top: 15px;
    left: 40px;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--color-main-darkest);
}

@media (max-width: 599px) {
  .list-faq__head {
    gap: 14px;
    min-height: 64px;
    padding-right: 16px;
  }

  .list-faq__badge {
    width: 56px;
    font-size: 26px;
  }

  .list-faq__question {
    font-size: 16px;
  }

  .list-faq__icon {
    width: 20px;
  }

  .list-faq__answer {
    padding: 16px 16px 16px 58px;
        border-radius: 30px;
  }
  
  .list-faq__answer::before{
    left: 26px;
    font-size: 26px;
  }
}


/* ---- Modifier: フラット表示（13faq のみ）----
   アコーディオンにせず、設問と回答を常に開いた状態で縦に並べる（2026-08-26 本人指示）。
   開閉しないため .js-toggle と .list-faq__icon は付けない。
   バッジは丸にし、設問・回答の行頭をバッジ幅ぶん揃える。
   縦位置は baseline で揃える（バッジ内の文字と設問・回答の文字のベースラインが一致する） */
.list-faq--flat .list-faq__item+.list-faq__item {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-divider);
}

.list-faq--flat .list-faq__head {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 16px;
  min-height: 0;
  padding-right: 0;
  border-radius: 0;
  background-color: transparent;
  cursor: auto;
}

.list-faq--flat .list-faq__badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-family: var(--font-english);
  font-size: 26px;
  letter-spacing: 0;
  padding: 0;
}

/* 回答のバッジは設問と色を分ける（2026-08-26 本人指示） */
.list-faq__badge--answer {
  background-color: var(--color-main);
}

.list-faq--flat .list-faq__question {
  padding: 0;
}

.list-faq--flat .list-faq__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 16px;
  margin-top: 16px;
}

.list-faq--flat .list-faq__answer {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 0;
  padding: 0;
}

.list-faq--flat .list-faq__answer::before{
  content: none;
}

@media (max-width: 599px) {
  .list-faq--flat .list-faq__item+.list-faq__item {
    margin-top: 24px;
    padding-top: 24px;
  }

  .list-faq--flat .list-faq__head {
    gap: 12px;
  }

  .list-faq--flat .list-faq__badge {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .list-faq--flat .list-faq__body {
    gap: 12px;
    margin-top: 12px;
  }
}


/* ==================================================
  Responsive: 1024px以下
================================================== */

@media (max-width: 1024px) {
  .layout-header {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .layout-header__row {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 0;
  }

  .layout-header__title {
    display: none;
  }

  .layout-header__logo-list {
    gap: 24px;
  }

  .layout-header__logo {
    width: 240px;
  }

  .layout-header__logo--healthrent {
    width: 66px;
  }

  /* ドロワー（.header__main は common.js が参照する既存class）
     オーバーレイ(--z-index-overlay)より前面に置く */
  .layout-header__body {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-index-drawer);
    /* PCで上端を揃えるための負のマージンを打ち消す（ドロワーは top:0 が基準） */
    margin-top: 0;
    width: 380px;
    max-width: 86%;
    height: 100%;
    padding: 88px 24px 40px;
    overflow-y: auto;
    background-color: var(--color-white);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform var(--duration-normal) ease;
    transition: -webkit-transform var(--duration-normal) ease;
    transition: transform var(--duration-normal) ease;
    transition: transform var(--duration-normal) ease, -webkit-transform var(--duration-normal) ease;
  }

  .drawer-active .layout-header__body {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .layout-header__utility {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 16px;
  }

  .layout-header__telephone {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .layout-header__telephone-number {
    font-size: 28px;
  }

  .layout-header__hours {
    text-align: center;
  }

  .layout-header__button-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
  }

  .layout-header__navigation {
    margin-top: 24px;
  }

  .component-navigation {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 0;
  }

  /* ドロワーではドロップダウンが常時表示なので、PCで足した余白は打ち消す */
  .component-navigation__item {
    display: block;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .component-navigation__item a {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* ドロワー内では hover が使えないため、子リストは常に表示して字下げする */
  .component-navigation__child-list {
    position: relative;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 0 0 24px;
    border-radius: 0;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }
  
  .component-navigation__child-list::before{
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--color-border-divider);
    position: absolute;
    top: 0;
    left: 5px;
    display: block;
  }

  .component-navigation__child-item a {
    padding: 10px 0 10px 10px;
  }
  
  .component-navigation__child-item a::before{
    content: "";
    width: 5px;
    height: 2px;
    background-color: var(--color-text);
    display: block;
    position: absolute;
    top: 22px;
    left: 0;
    border: none;
  }

  .layout-header__button-list .component-button {
    width: 100%;
  }

  /* common.js はドロワーを閉じるときも .overlay を作り直すため、
     要素の有無ではなく drawer-active の有無で表示を制御する */
  .drawer-active .overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-overlay);
    width: 100%;
    height: 100%;
    background-color: rgba(74, 85, 96, 0.4);
  }

  .layout-footer .component-wave {
    height: 150px;
  }

  .layout-footer__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 40px;
  }

  .layout-footer__information {
    width: 100%;
  }

  .layout-footer__navigation-list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding-top: 0;
  }

  .layout-footer__button-list .component-button {
    width: 100%;
    max-width: 307px;
  }

  .component-station-list {
    -ms-grid-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .layout-footer__copyright {
    padding-top: 56px;
  }
}


/* ==================================================
  Responsive: 599px以下
================================================== */

@media (max-width: 599px) {
  .layout-header__body{
    max-width: unset;
    width: 100%;
  }
  
  .layout-header__row {
    gap: 12px;
  }

  .layout-header__identity {
    padding-left: 0;
  }

  .layout-header__logo-list {
    gap: 5px;
  }

  .layout-header__logo {
    width: 240px;
  }

  .layout-header__logo--healthrent {
    width: 40px;
  }

  .layout-footer {
    margin-top: 48px;
  }

  .layout-footer .component-wave {
    height: 90px;
  }

  .layout-footer__telephone-number {
    font-size: 28px;
  }

  .layout-footer__navigation-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 24px;
  }

  .component-station-list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .component-station-card {
    padding: 20px;
  }

  .layout-footer__copyright {
    padding-top: 40px;
  }
}

/* ============================================================
   Utility（CSS_SPEC §9）
   base.css の up- クラスで不足する値のみをここに追加する。
   style.css には追加しない。
   ============================================================ */

/* --- 文節の位置だけで改行する（2026-08-12 追加）-----------------
   script.js の initTextAdjust() が BudouX で文節を判定し <wbr> を挿む。
   base.css L10 の word-break: break-word のままだと <wbr> 以外の位置でも
   折り返してしまうため、keep-all で「勝手に折り返さない」状態にする。
   overflow-wrap: anywhere は保険。BudouX の読み込みに失敗して <wbr> が
   1つも入らなかった場合でも、keep-all だけだと文字が枠から溢れるため、
   その時は従来どおりどこでも折り返させる。
   スタイルは js- クラスに書けない（CSS_SPEC §11）ため、
   .js-text-adjust とは別にこのUtilityを併記する */
.utility-text-phrase {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 「※」で始まる注記のぶら下げインデント（2026-08-25 本人指示）。
   2行目以降が ※ の下に回り込まず、本文の頭でそろう。
   base.css に同等のUtilityは無い（CSS_SPEC §9） */
.utility-text-note {
  padding-left: 1em;
  text-indent: -1em;
}

/* --- セクション間の余白 ---------------------------------------
   base.css の up-my-* / up-py-* は5px刻み・最大100px・レスポンシブ縮小なし。
   セクション間はカンプの実測値が60〜150pxで、かつタブレット・SPで縮める必要が
   あるため、段階と縮小率を持つUtilityを別に用意する。
   段階: xlarge 150 / large 120 / medium 100 / small 80 / xsmall 60
   縮小: 1024px以下で0.8倍 / 599px以下で0.6倍
   -------------------------------------------------------------- */

[class*='utility-section-m'],
[class*='utility-section-p'] {
  --section-xlarge: 150px;
  --section-large: 120px;
  --section-medium: 100px;
  --section-small: 80px;
  --section-xsmall: 60px;
}

.utility-section-my-xlarge {
  margin-top: var(--section-xlarge);
  margin-bottom: var(--section-xlarge);
}

.utility-section-mt-xlarge {
  margin-top: var(--section-xlarge);
}

.utility-section-mb-xlarge {
  margin-bottom: var(--section-xlarge);
}

.utility-section-my-large {
  margin-top: var(--section-large);
  margin-bottom: var(--section-large);
}

.utility-section-mt-large {
  margin-top: var(--section-large);
}

.utility-section-mb-large {
  margin-bottom: var(--section-large);
}

.utility-section-my-medium {
  margin-top: var(--section-medium);
  margin-bottom: var(--section-medium);
}

.utility-section-mt-medium {
  margin-top: var(--section-medium);
}

.utility-section-mb-medium {
  margin-bottom: var(--section-medium);
}

.utility-section-my-small {
  margin-top: var(--section-small);
  margin-bottom: var(--section-small);
}

.utility-section-mt-small {
  margin-top: var(--section-small);
}

.utility-section-mb-small {
  margin-bottom: var(--section-small);
}

.utility-section-my-xsmall {
  margin-top: var(--section-xsmall);
  margin-bottom: var(--section-xsmall);
}

.utility-section-mt-xsmall {
  margin-top: var(--section-xsmall);
}

.utility-section-mb-xsmall {
  margin-bottom: var(--section-xsmall);
}

.utility-section-py-xlarge {
  padding-top: var(--section-xlarge);
  padding-bottom: var(--section-xlarge);
}

.utility-section-pt-xlarge {
  padding-top: var(--section-xlarge);
}

.utility-section-pb-xlarge {
  padding-bottom: var(--section-xlarge);
}

.utility-section-py-large {
  padding-top: var(--section-large);
  padding-bottom: var(--section-large);
}

.utility-section-pt-large {
  padding-top: var(--section-large);
}

.utility-section-pb-large {
  padding-bottom: var(--section-large);
}

.utility-section-py-medium {
  padding-top: var(--section-medium);
  padding-bottom: var(--section-medium);
}

.utility-section-pt-medium {
  padding-top: var(--section-medium);
}

.utility-section-pb-medium {
  padding-bottom: var(--section-medium);
}

.utility-section-py-small {
  padding-top: var(--section-small);
  padding-bottom: var(--section-small);
}

.utility-section-pt-small {
  padding-top: var(--section-small);
}

.utility-section-pb-small {
  padding-bottom: var(--section-small);
}

.utility-section-py-xsmall {
  padding-top: var(--section-xsmall);
  padding-bottom: var(--section-xsmall);
}

.utility-section-pt-xsmall {
  padding-top: var(--section-xsmall);
}

.utility-section-pb-xsmall {
  padding-bottom: var(--section-xsmall);
}

@media (max-width: 1024px) {
  .utility-section-my-xlarge {
    margin-top: calc(var(--section-xlarge) * 0.8);
    margin-bottom: calc(var(--section-xlarge) * 0.8);
  }

  .utility-section-mt-xlarge {
    margin-top: calc(var(--section-xlarge) * 0.8);
  }

  .utility-section-mb-xlarge {
    margin-bottom: calc(var(--section-xlarge) * 0.8);
  }

  .utility-section-my-large {
    margin-top: calc(var(--section-large) * 0.8);
    margin-bottom: calc(var(--section-large) * 0.8);
  }

  .utility-section-mt-large {
    margin-top: calc(var(--section-large) * 0.8);
  }

  .utility-section-mb-large {
    margin-bottom: calc(var(--section-large) * 0.8);
  }

  .utility-section-my-medium {
    margin-top: calc(var(--section-medium) * 0.8);
    margin-bottom: calc(var(--section-medium) * 0.8);
  }

  .utility-section-mt-medium {
    margin-top: calc(var(--section-medium) * 0.8);
  }

  .utility-section-mb-medium {
    margin-bottom: calc(var(--section-medium) * 0.8);
  }

  .utility-section-my-small {
    margin-top: calc(var(--section-small) * 0.8);
    margin-bottom: calc(var(--section-small) * 0.8);
  }

  .utility-section-mt-small {
    margin-top: calc(var(--section-small) * 0.8);
  }

  .utility-section-mb-small {
    margin-bottom: calc(var(--section-small) * 0.8);
  }

  .utility-section-my-xsmall {
    margin-top: calc(var(--section-xsmall) * 0.8);
    margin-bottom: calc(var(--section-xsmall) * 0.8);
  }

  .utility-section-mt-xsmall {
    margin-top: calc(var(--section-xsmall) * 0.8);
  }

  .utility-section-mb-xsmall {
    margin-bottom: calc(var(--section-xsmall) * 0.8);
  }

  .utility-section-py-xlarge {
    padding-top: calc(var(--section-xlarge) * 0.8);
    padding-bottom: calc(var(--section-xlarge) * 0.8);
  }

  .utility-section-pt-xlarge {
    padding-top: calc(var(--section-xlarge) * 0.8);
  }

  .utility-section-pb-xlarge {
    padding-bottom: calc(var(--section-xlarge) * 0.8);
  }

  .utility-section-py-large {
    padding-top: calc(var(--section-large) * 0.8);
    padding-bottom: calc(var(--section-large) * 0.8);
  }

  .utility-section-pt-large {
    padding-top: calc(var(--section-large) * 0.8);
  }

  .utility-section-pb-large {
    padding-bottom: calc(var(--section-large) * 0.8);
  }

  .utility-section-py-medium {
    padding-top: calc(var(--section-medium) * 0.8);
    padding-bottom: calc(var(--section-medium) * 0.8);
  }

  .utility-section-pt-medium {
    padding-top: calc(var(--section-medium) * 0.8);
  }

  .utility-section-pb-medium {
    padding-bottom: calc(var(--section-medium) * 0.8);
  }

  .utility-section-py-small {
    padding-top: calc(var(--section-small) * 0.8);
    padding-bottom: calc(var(--section-small) * 0.8);
  }

  .utility-section-pt-small {
    padding-top: calc(var(--section-small) * 0.8);
  }

  .utility-section-pb-small {
    padding-bottom: calc(var(--section-small) * 0.8);
  }

  .utility-section-py-xsmall {
    padding-top: calc(var(--section-xsmall) * 0.8);
    padding-bottom: calc(var(--section-xsmall) * 0.8);
  }

  .utility-section-pt-xsmall {
    padding-top: calc(var(--section-xsmall) * 0.8);
  }

  .utility-section-pb-xsmall {
    padding-bottom: calc(var(--section-xsmall) * 0.8);
  }

}

@media (max-width: 599px) {
  .utility-section-my-xlarge {
    margin-top: calc(var(--section-xlarge) * 0.6);
    margin-bottom: calc(var(--section-xlarge) * 0.6);
  }

  .utility-section-mt-xlarge {
    margin-top: calc(var(--section-xlarge) * 0.6);
  }

  .utility-section-mb-xlarge {
    margin-bottom: calc(var(--section-xlarge) * 0.6);
  }

  .utility-section-my-large {
    margin-top: calc(var(--section-large) * 0.6);
    margin-bottom: calc(var(--section-large) * 0.6);
  }

  .utility-section-mt-large {
    margin-top: calc(var(--section-large) * 0.6);
  }

  .utility-section-mb-large {
    margin-bottom: calc(var(--section-large) * 0.6);
  }

  .utility-section-my-medium {
    margin-top: calc(var(--section-medium) * 0.6);
    margin-bottom: calc(var(--section-medium) * 0.6);
  }

  .utility-section-mt-medium {
    margin-top: calc(var(--section-medium) * 0.6);
  }

  .utility-section-mb-medium {
    margin-bottom: calc(var(--section-medium) * 0.6);
  }

  .utility-section-my-small {
    margin-top: calc(var(--section-small) * 0.6);
    margin-bottom: calc(var(--section-small) * 0.6);
  }

  .utility-section-mt-small {
    margin-top: calc(var(--section-small) * 0.6);
  }

  .utility-section-mb-small {
    margin-bottom: calc(var(--section-small) * 0.6);
  }

  .utility-section-my-xsmall {
    margin-top: calc(var(--section-xsmall) * 0.6);
    margin-bottom: calc(var(--section-xsmall) * 0.6);
  }

  .utility-section-mt-xsmall {
    margin-top: calc(var(--section-xsmall) * 0.6);
  }

  .utility-section-mb-xsmall {
    margin-bottom: calc(var(--section-xsmall) * 0.6);
  }

  .utility-section-py-xlarge {
    padding-top: calc(var(--section-xlarge) * 0.6);
    padding-bottom: calc(var(--section-xlarge) * 0.6);
  }

  .utility-section-pt-xlarge {
    padding-top: calc(var(--section-xlarge) * 0.6);
  }

  .utility-section-pb-xlarge {
    padding-bottom: calc(var(--section-xlarge) * 0.6);
  }

  .utility-section-py-large {
    padding-top: calc(var(--section-large) * 0.6);
    padding-bottom: calc(var(--section-large) * 0.6);
  }

  .utility-section-pt-large {
    padding-top: calc(var(--section-large) * 0.6);
  }

  .utility-section-pb-large {
    padding-bottom: calc(var(--section-large) * 0.6);
  }

  .utility-section-py-medium {
    padding-top: calc(var(--section-medium) * 0.6);
    padding-bottom: calc(var(--section-medium) * 0.6);
  }

  .utility-section-pt-medium {
    padding-top: calc(var(--section-medium) * 0.6);
  }

  .utility-section-pb-medium {
    padding-bottom: calc(var(--section-medium) * 0.6);
  }

  .utility-section-py-small {
    padding-top: calc(var(--section-small) * 0.6);
    padding-bottom: calc(var(--section-small) * 0.6);
  }

  .utility-section-pt-small {
    padding-top: calc(var(--section-small) * 0.6);
  }

  .utility-section-pb-small {
    padding-bottom: calc(var(--section-small) * 0.6);
  }

  .utility-section-py-xsmall {
    padding-top: calc(var(--section-xsmall) * 0.6);
    padding-bottom: calc(var(--section-xsmall) * 0.6);
  }

  .utility-section-pt-xsmall {
    padding-top: calc(var(--section-xsmall) * 0.6);
  }

  .utility-section-pb-xsmall {
    padding-bottom: calc(var(--section-xsmall) * 0.6);
  }

}


/* ==================================================
  Component: Checklist（暮らしのチェックリスト）
  チェック済みを表示する形式（--static）。06rental / 08handrails / 09maintenance /
  10fall_prevention / 11daily_living_aids の5ページで使う。
  カンプに無いためTOPの白いカード・角丸・配色から外挿した。
  ユーザーがチェックする 03first は支給カンプが別にあるため、
  style.css の project-first-check で専用に組んでいる（2026-08-25）
================================================== */

/* 白いセクションに置くと地色と同化するため、枠線で輪郭を出す（2026-08-26 本人指示） */
.component-checklist {
  padding: 30px;
  border: 3px solid var(--color-main-pale);
  border-radius: var(--radius-large);
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
  box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
}

/* 原稿に見出しがある5ページで使う。サイズは README §4 の「中見出し・カード見出し」
   20px / Medium に合わせている（component-step__title などと同じ階層） */
.component-checklist__title {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-divider);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  color: var(--color-main-darkest);
}

.component-checklist__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 0px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 0px;
}

.component-checklist__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
}

/* チェックできない表示専用。チェック済みの印を疑似要素で描く。
   ::before が丸い地色、::after が白いチェック（2026-08-26 本人指示で丸を追加）。
   マスクを ::after に移すことで、丸とチェックの色を両方トークンで持てる */
.component-checklist--static .component-checklist__item {
  position: relative;
  padding-left: 32px;
}

.component-checklist--static .component-checklist__item::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-main-darkest);
}

.component-checklist--static .component-checklist__item::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 1px;
  width: 20px;
  height: 20px;
  background-color: var(--color-white);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8 14.2 3.8 10l1.4-1.4L8 11.4l6.8-6.8L16.2 6z"/></svg>') no-repeat center / 20px 20px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8 14.2 3.8 10l1.4-1.4L8 11.4l6.8-6.8L16.2 6z"/></svg>') no-repeat center / 20px 20px;
}

/* 結果は3件書いておき、script.js が該当する1件だけに is-current を付ける。
   JSが動かない場合は先頭の1件が出る（HTML §16「JS前提のHTMLにしない」） */
.component-checklist__message {
  display: none;
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: var(--radius-small);
  background-color: var(--color-border-light);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  text-align: center;
  color: var(--color-main-darkest);
}

.component-checklist__message.is-current {
  display: block;
}

@media (max-width: 1024px) {
  .component-checklist {
    padding: 32px;
  }
}

@media (max-width: 599px) {
  .component-checklist {
    padding: 24px 20px;
    border-radius: var(--radius-medium);
  }

  .component-checklist__title {
    margin-bottom: 16px;
    padding-bottom: 12px;
    font-size: 17px;
  }

  .component-checklist__list {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 0px;
  }

  .component-checklist__item {
    font-size: 15px;
  }

  .component-checklist__message {
    margin-top: 24px;
    padding: 16px 18px;
    font-size: 15px;
  }
}


/* ==================================================
  Component: Step（手順・流れ）
  03first のレンタルまでの流れ・06rental の住宅改修の流れで使う。
  件数が増減しても崩れないよう、縦に積んで左に番号を置く
================================================== */

.component-step__item {
  position: relative;
  padding: 28px 32px 28px 40px;
  border-radius: var(--radius-large);
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
  box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
}

/* 手順のあいだに下向きの矢印を置く（2026-08-06 本人指示・2026-08-12 に共通化）。
   画像は増やさず、CSSの三角で描く。矢印のぶん間隔を広げている */
.component-step__item+.component-step__item {
  margin-top: 46px;
}

.component-step__item+.component-step__item::before {
  content: '';
  position: absolute;
  top: -32px;
  left: 50%;
  border-top: 14px solid var(--color-main-pale);
  border-right: 11px solid transparent;
  border-left: 11px solid transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.component-step__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-divider);
}

.component-step__number {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-family: var(--font-english);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-main-darkest);
}

.component-step__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
}

.component-step__body {
  margin-top: 16px;
}

.component-step__text {
  font-size: 16px;
  line-height: 1.875;
  color: var(--color-text);
}

@media (max-width: 1024px) {
  .component-step__item {
    padding: 24px;
  }

  .component-step__number,
  .component-step__title {
    font-size: 18px;
  }
}

@media (max-width: 599px) {
  .component-step__item {
    padding: 20px;
    border-radius: var(--radius-medium);
  }

  .component-step__item+.component-step__item {
    margin-top: 38px;
  }

  .component-step__item+.component-step__item::before {
    top: -27px;
    border-top-width: 12px;
    border-right-width: 9px;
    border-left-width: 9px;
  }

  .component-step__number,
  .component-step__title {
    font-size: 17px;
  }

  .component-step__body {
    margin-top: 12px;
  }
}


/* ==================================================
  Component: Accordion（見出しで開閉する本文）
  09maintenance の「福祉用具ごとに確認するポイント」で使う。
  設問と回答ではないため list-faq とは分けている。
  開閉は common.js の .js-toggle（開閉対象は直後の兄弟要素）
================================================== */

.component-accordion__item {
  border-radius: var(--radius-large);
  background-color: var(--color-white);
  border: 3px solid var(--color-border-frame);
  overflow: hidden;
}

.component-accordion__item+.component-accordion__item {
  margin-top: 16px;
}

.component-accordion__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  cursor: pointer;
}

.component-accordion__title {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-main-darkest);
  display: flex;
  align-items: baseline;
}

/* 開閉操作の button タグは使わない（README 確認事項14）。
   クリック判定は親の .js-toggle が持つ */

.component-accordion__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 24px;
  -webkit-transition: -webkit-transform var(--duration-fast) ease;
  transition: -webkit-transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease, -webkit-transform var(--duration-fast) ease;
}

.component-accordion__icon img {
  display: block;
  width: 100%;
}

.component-accordion__head.is-parent .component-accordion__icon {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

/* common.js の slideToggle は height だけをアニメーションさせるため、
   開閉する要素に padding を持たせると開いた瞬間に padding 分だけ高さが跳ねる。
   余白は中の .component-accordion__inner 側に持たせる */
.component-accordion__body {
  display: none;
}

.component-accordion__inner {
  padding: 4px 28px 28px;
}

.component-accordion__text {
  font-size: 16px;
  line-height: 1.875;
  color: var(--color-text);
}

.component-accordion__text+.component-accordion__text {
  margin-top: 12px;
}

.component-accordion__point-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: var(--radius-small);
  background-color: var(--color-background-blue);
}

/* 行頭の点。項目が増減しても崩れない */
.component-accordion__point-item {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
}

.component-accordion__point-item::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-main);
}

@media (max-width: 599px) {
  .component-accordion__item {
    border-radius: var(--radius-medium);
  }

  .component-accordion__head {
    gap: 14px;
    padding: 18px 20px;
  }

  .component-accordion__title {
    font-size: 17px;
  }

  .component-accordion__icon {
    width: 20px;
  }

  .component-accordion__inner {
    padding: 2px 20px 20px;
  }

  .component-accordion__point-list {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 18px;
  }
}


/* ==================================================
  Component: Tab（タブ切り替え）
  10fall_prevention / 05price / 07service で使う。
  切り替えは common.js の .tabWrap（.tabBtn li と .tabItem の個数を一致させる）。
  common.js が付ける状態classは `active` 固定のため is- ではなくその名前を使う
================================================== */

/* 行方向の間隔は、選択中のボタンの下に出るドット（.active::after）の
   占有ぶん（7px + 8px）を見込んで広げてある。列方向は各所で上書きする */
.component-tab__button-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  row-gap: 24px;
}

/* 状態classは a ではなく li に付く（HTML_SPEC §5-2 で a へのclass付与は禁止）。
   li は位置の基準と文字設定だけを持ち、枠線・地色・角丸は a 自体に付ける。
   クリック範囲とデザイン範囲を一致させるため（HTML_SPEC §5-4 / check.csv No.117）。
   影をやめて枠線にしたのも同じく 2026-08-27 本人指示 */
.component-tab__button {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.component-tab__button a {
  display: block;
  padding: 14px 28px;
  border: 2px solid var(--color-border-divider);
  border-radius: var(--radius-round);
  background-color: var(--color-white);
  color: var(--color-text);
  -webkit-transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .component-tab__button:hover a {
    border-color: var(--color-main-darkest);
    background-color: var(--color-main-darkest);
    color: var(--color-white);
    opacity: 1;
  }
}

.component-tab__button.active a {
  border-color: var(--color-main-darkest);
  background-color: var(--color-main-darkest);
  color: var(--color-white);
}

/* 選択中のタブを示すドット。background-color: inherit で a の地色をそのまま受け取るため、
   配色を上書きしているタブ（05price のレンタル料金など）でも自動で同じ色になる。
   位置の基準は li（position: relative） */
.component-tab__button.active a::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: var(--radius-round);
  background-color: inherit;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* Modifier: アイコンで切り替えるタブ（09maintenance 2026-08-31 本人指示）。
   ピル型ボタンをやめ、丸アイコン＋ラベルの組み合わせにする。
   仕組み（tabWrap/tabBtn/tabItem）は base の component-tab と同じで、
   ボタン内側の見た目だけをこのModifierで上書きする */
.component-tab--icon .component-tab__button-list {
  -webkit-column-gap: 32px;
  -moz-column-gap: 32px;
  column-gap: 32px;
}

.component-tab--icon .component-tab__button a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
  .component-tab--icon .component-tab__button:hover a {
    background-color: transparent;
    color: var(--color-text);
  }
}

.component-tab--icon .component-tab__button-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 2px solid var(--color-border-divider);
  border-radius: var(--radius-round);
  background-color: var(--color-white);
  -webkit-transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
  transition:
    border-color var(--duration-fast) ease,
    background-color var(--duration-fast) ease;
}

.component-tab--icon .component-tab__button-icon img {
  display: block;
  width: 62%;
}

.component-tab--icon .component-tab__button-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  -webkit-transition: color var(--duration-fast) ease;
  transition: color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .component-tab--icon .component-tab__button:hover .component-tab__button-icon {
    border-color: var(--color-main-darkest);
    background-color: var(--color-background-blue);
  }
}

.component-tab--icon .component-tab__button.active a {
  background-color: transparent;
}

.component-tab--icon .component-tab__button.active .component-tab__button-icon {
  border-color: var(--color-main-darkest);
  background-color: var(--color-background-blue);
}

.component-tab--icon .component-tab__button.active .component-tab__button-label {
  color: var(--color-main-darkest);
  font-weight: 700;
}

/* base の色付きドット（a の地色を継承）は透明地では見えないため出さない。
   選択状態はアイコンの枠色とラベルの太字で示す */
.component-tab--icon .component-tab__button.active a::after {
  content: none;
}

/* 詳細の開閉ボタン（2026-08-31 本人指示・本人支給デザイン参考）。
   本文（component-tab__body）は既定で閉じておき、アイコンを押すか
   このボタンを押すと開く。開閉自体は common.js の .js-toggle（アコーディオンと同じ仕組み）。
   ラベルの出し分け（詳細を表示⇔閉じる）は is-parent の有無だけで切り替える（JS側に文言を持たせない） */
.component-tab--icon .component-tab__toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 24px auto 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-main-darkest);
}

.component-tab--icon .component-tab__toggle-text--hide {
  display: none;
}

.component-tab--icon .component-tab__toggle.is-parent .component-tab__toggle-text--show {
  display: none;
}

.component-tab--icon .component-tab__toggle.is-parent .component-tab__toggle-text--hide {
  display: inline;
}

/* 開閉の向き（下向き→上向き）。回転だと動きが不自然なため、component-accordion__icon と
   同じ scale(1,-1) の上下反転にする（2026-08-31 本人指示）。三角形はCSSのborderで描く */
.component-tab--icon .component-tab__toggle-icon {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  -webkit-transition: -webkit-transform var(--duration-fast) ease;
  transition: -webkit-transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease, -webkit-transform var(--duration-fast) ease;
}

.component-tab--icon .component-tab__toggle.is-parent .component-tab__toggle-icon {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

/* 本文は既定で閉じる。開閉のアニメーションは common.js の slideToggle が
   インラインの display/height を直接操作するため、is-active に対する
   display 指定はここでは不要（component-accordion__body と同じ考え方） */
.component-tab--icon .component-tab__body {
  display: none;
  margin-top: 24px;
}

@media (max-width: 599px) {
  .component-tab--icon .component-tab__button-list {
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 16px;
  }

  .component-tab--icon .component-tab__button-icon {
    width: 56px;
    height: 56px;
  }

  .component-tab--icon .component-tab__button-label {
    font-size: 13px;
  }
}

.component-tab__body {
  margin-top: 32px;
  padding: 36px 40px;
  border-radius: var(--radius-large);
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
  box-shadow: 0 0 7px 0 rgba(160, 160, 160, 0.24);
}

/* 先頭の項目にはHTML側で active を書いておく。
   JSが動かない環境でも1件は表示される（HTML_SPEC §16）。
   common.js も読み込み時に先頭へ active を付けるため、二重に付いても問題ない */
.component-tab__item {
  display: none;
}

.component-tab__item.active {
  display: block;
}

.component-tab__title {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-divider);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-main-darkest);
}

.component-tab__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.875;
  color: var(--color-text);
}

/* パネル内の見出し（05price）。パネルのタイトルが4段目のため、
   この2つは5段目・6段目にあたる。h5 を使わない決定（2026-07-28）により div で書く。
   タブ内の見出し4段は、セクション見出し40pxとの落差が大きく小見出しが本文と同寸だったため、
   2026-08-26 の本人指示で1段ずつ上げた（README §4 の見出しスケール表からの意図的な逸脱） */
.component-tab__subtitle {
  margin-top: 36px;
  padding-left: 14px;
  border-left: 4px solid var(--color-main);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
}

.component-tab__minor-title {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-main-darkest);
}

/* 番号付きの小見出し。原稿の丸数字（①②）をやめてCSSで丸バッジを描く（2026-08-26 本人指示）。
   flex にすることで、見出しが2行に折り返しても本文が番号の下へ回り込まない。
   span が編集画面で削除されても、残るのはテキストだけなので崩れない（HTML_SPEC §2-2） */
.component-tab__minor-title--numbered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

/* 番号バッジ。小見出し（--numbered）と注意書きの箇条書き（__order-item）で共用する。
   padding-top と letter-spacing は、字面を丸の中央に見せるための調整（2026-08-26 本人指示） */
.component-tab__number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding-top: 2px;
  border-radius: var(--radius-round);
  background-color: var(--color-main-darkest);
  color: var(--color-white);
  font-family: var(--font-english);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* ※の注記。本文より一段小さく、続けて並べたときは行間ぶんだけ空ける */
.component-tab__note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-light);
}

.component-tab__note+.component-tab__note {
  margin-top: 4px;
}

/* 表の直前に置く小さな見出し（「レンタル開始月」など） */
.component-tab__table-title {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
}

.component-tab__item .component-table {
  margin-top: 10px;
}

/* 行頭に点を置く箇条書き。__point-list と違い1カラムで長文も入る */
.component-tab__list {
  display: -ms-grid;
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.component-tab__list-item {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.875;
  color: var(--color-text);
}

.component-tab__list-item::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-main);
}

/* 行頭記号を原稿の文字（❶〜❺）で持つリスト。折り返しを記号の右へ揃える */
.component-tab__order-list {
  display: -ms-grid;
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

/* 原稿の❶〜❺をCSSの番号バッジに置き換えた（2026-08-26 本人指示）。
   flex にすることで、2行目以降が番号の下へ回り込まない */
.component-tab__order-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.875;
  color: var(--color-text);
}

/* 図版。素材が届くまでは placehold.jp の仮画像が入る。
   差し替えで縦横比が変わっても崩れないよう、高さは画像に任せる */
.component-tab__figure {
  overflow: hidden;
  margin-top: 28px;
  border-radius: var(--radius-large);
}

.component-tab__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.component-tab__point {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: var(--radius-small);
  background-color: var(--color-background-blue);
}

.component-tab__point-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-main-darkest);
}

.component-tab__point-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin-top: 12px;
}

/* 行頭の点。項目が増減しても崩れない */
.component-tab__point-item {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
}

.component-tab__point-item::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-main);
}

/* 注意喚起の内容を入れる枠（07service の「危険ポイント」）。
   __point と同じ形にして地色だけ変える。並べたときに役割の違いが分かる */
.component-tab__danger {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: var(--radius-small);
  background-color: var(--color-background-beige);
}

.component-tab__danger-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-main-darkest);
}

/* 枠の中の本文は行間ぶんの余白で足りるため、通常より詰める */
.component-tab__danger .component-tab__text {
  margin-top: 12px;
}

/* パネルごとの導線。項目の末尾に中央寄せで置く。
   ボタンが2つ以上入る場合（05price）は折り返す */
.component-tab__action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.component-tab__item-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-divider);
}

.component-tab__item-footer-title {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-main-darkest);
}

.component-tab__item-footer-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
}

@media (max-width: 1024px) {
  .component-tab__body {
    padding: 32px;
  }
}

@media (max-width: 599px) {
  .component-tab__button-list {
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
  }

  .component-tab__button {
    font-size: 14px;
  }

  .component-tab__button a {
    padding: 10px 13px;
  }

  .component-tab__body {
    margin-top: 24px;
    padding: 24px 15px;
    border-radius: var(--radius-medium);
  }

  .component-tab__title {
    font-size: 20px;
  }

  .component-tab__point,
  .component-tab__danger {
    padding: 16px 18px;
  }

  .component-tab__point-list {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }

  .component-tab__subtitle {
    margin-top: 28px;
    padding-left: 10px;
    border-left-width: 3px;
    font-size: 18px;
  }

  .component-tab__minor-title {
    margin-top: 20px;
    font-size: 17px;
  }

  .component-tab__note {
    font-size: 13px;
  }

  .component-tab__list-item,
  .component-tab__order-item {
    font-size: 15px;
  }

  .component-tab__list-item::before {
    top: 10px;
  }

  .component-tab__figure {
    margin-top: 24px;
  }

  .component-tab__action {
    margin-top: 24px;
  }
}


/* ==================================================
  Component: Form（お問い合わせフォーム）
  構造は HTML_SPEC §11-1 のまま。カンプに無いためTOPの配色・角丸から外挿した。
  A-BiSU はバリデーション時に input/select/textarea を
  .actual_object_error_wrapper の div で囲む（§11-4）。
  そのラッパーが増えても崩れないよう、幅は必ず100%にして
  「直接の子である」ことに依存する指定は書かない
================================================== */

.component-form__list {
  border-top: 1px solid var(--color-border-divider);
}

.component-form__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 260px 24px minmax(0, 1fr);
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border-divider);
}

.page-contact-confirm .component-form__item{
  align-items: baseline;
}

.component-form__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}

.component-form__required,
.component-form__optional {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: var(--radius-round);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.component-form__required {
  background-color: var(--color-accent-button);
  color: var(--color-white);
}

.component-form__optional {
  background-color: var(--color-border-divider);
  color: var(--color-text-light);
}

.component-form__data {
  min-width: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
}

/* input と textarea は .actual_object_error_wrapper で囲まれても幅が変わらないよう
   親ではなくタグ側で100%にする（§11-4）。
   タグセレクタは a・img 以外にも外部仕様で class を付けられない要素へ使う（CSS §16-6 の考え方） */
.component-form__data input,
.component-form__data textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background-color: var(--color-white);
  font: inherit;
  color: var(--color-text);
  -webkit-transition: border-color var(--duration-fast) ease;
  transition: border-color var(--duration-fast) ease;
}

.component-form__data textarea {
  min-height: 200px;
  resize: vertical;
}

.component-form__data input:focus,
.component-form__data textarea:focus {
  outline: none;
  border-color: var(--color-main-darkest);
}

/* A-BiSU がバリデーション時に差し込むラッパー。
   Grid や Flex の直接の子が input でなくなっても崩れないようにする */
.component-form__data .actual_object_error_wrapper {
  display: block;
  width: 100%;
}

.component-form__radio-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 12px;
}

.component-form__radio-item ,.component-form__radio-item .actual_object_error_wrapper{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  column-gap: 20px;
  row-gap: 10px;
}

/* accent-color や appearance:none + background-image は実機・ブラウザで見え方が揺れるため、
   input は非表示にして label::before（枠）／::after（選択時のドット）で描画する */
.component-form__radio-item input {
  display: none;
}

.component-form__radio-item label {
  position: relative;
  padding-left: 26px;
  line-height: 1;
  cursor: pointer;
}

.component-form__radio-item label::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-white);
}

.component-form__radio-item input:checked+label::before {
  border-color: var(--color-main-darkest);
}

.component-form__radio-item input:checked+label::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 4px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--color-main-darkest);
}

.component-form__postal-code {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.component-form__postal-mark {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* 郵便番号は桁数が決まっているので短くする。住所欄と縦に並べる */
.component-form__postal-code input {
  max-width: 200px;
}

.component-form__address {
  margin-top: 12px;
}

/* 確認画面の注意文。check.csv No.164 が赤字を求めている。
   カンプに無いため色は新規に足した（--color-error） */
.component-form__notice {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-error);
}

.component-form__confirm,
.component-form__button-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 32px;
}

/* button には class を付けない（§11-2）。親のBEM classから指定する */
.component-form__button button {
  min-width: 280px;
  padding: 18px 32px;
  border: 1px solid var(--color-main-darkest);
  border-radius: var(--radius-round);
  background-color: var(--color-main-darkest);
  font: inherit;
  font-weight: 500;
  color: var(--color-white);
  cursor: pointer;
  -webkit-transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.component-form__button--back button {
  min-width: 200px;
  border-color: var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {

  /* 透過ではなく地色と文字色を入れ替える（.component-arrow-button と同じ方針） */
  .component-form__button button:hover {
    opacity: 1;
    background-color: var(--color-white);
    color: var(--color-main-darkest);
  }

  .component-form__button--back button:hover {
    background-color: var(--color-border-light);
    color: var(--color-text);
  }
}

@media (max-width: 1024px) {
  .component-form__item {
    -ms-grid-columns: 200px 20px minmax(0, 1fr);
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
  }

  /* タブレット・SPはラジオを1カラムで縦積みにする（本人指示） */
  .component-form__radio-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 12px;
  }
}

/* SPは項目名と入力欄を縦に積む */
@media (max-width: 599px) {
  .component-form__item {
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 20px 0;
  }

  .component-form__title {
    padding-top: 0;
    font-size: 15px;
  }

  .component-form__radio-list {
    gap: 10px;
    padding-top: 0;
  }

  .component-form__data input,
  .component-form__data textarea {
    padding: 10px 14px;
  }

  .component-form__button button,
  .component-form__button--back button {
    min-width: 0;
    width: 100%;
    padding: 10px 15px;
    min-width: 130px;
  }

  .component-form__confirm,
  .component-form__button-list {
    gap: 12px;
    margin-top: 28px;
  }
  
  .component-form__radio-item, .component-form__radio-item .actual_object_error_wrapper{
    flex-direction: column;
    row-gap: 10px;
    align-items: flex-start;
  }
}

/* ==================================================
  Fead 拡張: fead-clip（画像が下端から開いて現れる）
  common.js の fead 系（Version 1.4.9）は「[class*='fead-'] の要素が
  画面に入ったら .mv を付ける」だけなので、JSの追加は不要。
  base.css は編集禁止のため、変種の定義だけをここに置く。
  2026-08-24 本人指示。参考にした挙動は clip-path の inset を下端から開く方式。
================================================== */

/* フェードは使わず clip-path だけで見せる。base.css の [class*='fead'] が
   opacity: 0 を当てているので、base.css の .fead-text / .fead-order と同じ方式で戻す */
.fead-clip {
  opacity: 1;
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

/* base.css の [class*='fead'].mv が transition: 0.5s ease-out を当てているため、
   clip-path の指定で上書きする（common.css は base.css より後に読み込まれる）*/
.fead-clip.mv {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  -webkit-transition: -webkit-clip-path 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-clip-path 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: clip-path 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: clip-path 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}


/* ==================================================
  見たまま編集画面（[data-element-id]）
  A-BiSUの見たまま編集画面では、編集対象を囲む要素に data-element-id が付く。
  base.css はこの属性を使って自身の非表示クラスを打ち消している（755箇所）。
  案件側で「JSが動かないと表示されない要素」を作った場合は、同じ方式で
  ここに打ち消しを書く。**規約4本には記載が無いためこのルールを明記しておく。**
  対象は「原稿テキストが入る要素」だけ。装飾はレスポンシブの挙動をそのまま残す。
================================================== */

/* FAQの回答。閉じた状態が display: none で、開く処理は common.js の
   if (edit_design_check == -1) の中にあるため、編集画面では開けない。
   打ち消さないと回答文を編集できない */
[data-element-id] .list-faq__body {
  display: block;
}

/* 13faq はアコーディオンにしないため、編集画面でも横並びを保つ（2026-08-26） */
[data-element-id] .list-faq--flat .list-faq__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* 09maintenance のアコーディオン。理由は上の FAQ と同じ */
[data-element-id] .component-accordion__body {
  display: block;
}

/* タブ。切り替えは common.js の中（edit_design_check == -1）にあるため
   編集画面では2件目以降を開けない。打ち消さないと本文を編集できない。
   縦に並べて全件を出す */
/* fead-clip。base.css の [data-element-id] [class*='fead-'] は opacity と
   transform しか打ち消さないため、clip-path はここで戻す。
   打ち消さないと編集画面で画像が消える */
[data-element-id] .fead-clip {
  -webkit-clip-path: none;
  clip-path: none;
}

[data-element-id] .component-tab__item {
  display: block;
}

[data-element-id] .component-tab__item {
    border: 3px solid var(--color-text) !important;
    padding: 20px;
}

[data-element-id] .component-tab__item::before {
    background: var(--color-text);
    color: #fff;
    font-size: 12px;
    display: block;
    width: calc(100% + 40px);
    margin: -20px -20px 20px;
    text-align: center;
}

[data-element-id] .component-tab__item:first-of-type::before{
  content: "タブ１";
}

[data-element-id] .component-tab__item:nth-of-type(2)::before{
  content: "タブ２";
}

[data-element-id] .component-tab__item:nth-of-type(3)::before{
  content: "タブ３";
}

[data-element-id] .component-tab__item:nth-of-type(4)::before{
  content: "タブ４";
}

[data-element-id] .component-tab__item:nth-of-type(5)::before{
  content: "タブ５";
}

[data-element-id] .component-tab__item:nth-of-type(6)::before{
  content: "タブ６";
}

[data-element-id] .component-tab__item:nth-of-type(7)::before{
  content: "タブ７";
}

[data-element-id] .component-tab__item:nth-of-type(8)::before{
  content: "タブ８";
}

[data-element-id] .component-tab__item+.component-tab__item {
  margin-top: 32px;
/*   padding-top: 32px;
border-top: 1px solid var(--color-border-divider); */
}

/* グローバルナビのドロップダウン。hoverで開く作りなので編集画面では選択できない。
   absolute のままだと下の内容に重なって編集を妨げるため、
   1024px以下のドロワーと同じく static にして流し込む。
   ただし横並びのままドロップダウンを流し込むと項目が縦長になり
   親リンクの文字が1文字ずつ折り返すため、ナビ自体も縦並びにする */
[data-element-id] .component-navigation {
    align-items: flex-start;
    justify-content: flex-end;
    gap: 30px 40px;
}

/* PCでドロップダウンとの間に空けている余白は、縦並びでは不要 */
[data-element-id] .component-navigation__item {
  display: block;
  margin-bottom: 0;
  padding-bottom: 0;
}

[data-element-id] .component-navigation__child-list {
  position: static;
  padding-left: 24px;
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
}

/* ドロワー専用の項目。公開画面のPCでは隠しているが、編集画面では
   リンク先やテキストを直せるように表示する（display は上のMQより後に書いて勝つ） */
[data-element-id] .component-navigation__item--drawer,
[data-element-id] .component-navigation__child-item--drawer {
  display: block;
}

[data-element-id] .layout-fixed-cta{
    max-width: 768px;
    margin: 10px auto;
}

[data-element-id] .layout-fixed-cta__pattern {
  display: block;
  position: static;
  padding: 8px 12px;
  max-width: 768px;
    margin: 10px auto;
}

[data-element-id] .layout-fixed-cta__item a:after{
  position: absolute;
}

/* 編集中に色が入れ替わり続けると作業しづらいため止める */
/* [data-element-id] .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--contact .layout-fixed-cta__button,
[data-element-id] .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--telephone .layout-fixed-cta__button,
[data-element-id] .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--contact .layout-fixed-cta__outline rect,
[data-element-id] .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--telephone .layout-fixed-cta__outline rect {
  -webkit-animation: none;
  animation: none;
}
 */
/* ==================================================
  Layout: 追従CTAバー（1024px以下のみ表示）

  A-BiSUのA/Bテスト機能で2パターンを出し分ける。

  【重要】A-BiSUのA/Bテストは .layout-fixed-cta をAパターン側の内側に入れてしまい、
  Bパターンにはラッパーが付かない（実サイトで確認済み）。
  そのためバーの固定・背景・表示制御はラッパーではなく __pattern 自体に持たせている。
  .layout-fixed-cta には何も指定しない（display: none を付けるとAパターンが消える）。

  Aパターン：塗りのボタン（お問い合わせ＝青 ／ 電話＝オレンジ）。動きなし
  Bパターン：白地＋枠線のボタン。5秒に1回、枠線が1周ぶん走って
             文字色と枠線の色が入れ替わる
             （お問い合わせ 青⇔オレンジ ／ 電話番号 オレンジ⇔青）
================================================== */

.layout-fixed-cta__pattern {
  display: none;
}

@media (max-width: 1024px) {

  .layout-fixed-cta__pattern {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    padding: 8px 12px;
    /* iPhoneのホームインジケーター領域を避ける。非対応ブラウザでは第1宣言が残る */
    padding-bottom: 8px;
    padding-bottom: calc(8px + constant(safe-area-inset-bottom));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background-color: var(--color-background-blue);
  }

  /* 追従バーがフッター末尾に重なるため、その高さぶんの逃げをつくる */
  .layout-footer {
    padding-bottom: 76px;
  }
}

.layout-fixed-cta__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

/* a タグの親要素には背景色・角丸・影を付けない（HTML_SPEC §5-4）。
   デザインは a の中の __button が持つ */
.layout-fixed-cta__item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
}

/* 枠線を描くSVG（Bパターン）をこの a に重ねるため position を張る */
.layout-fixed-cta__item a {
  display: block;
  position: relative;
}

.layout-fixed-cta__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: var(--radius-small);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--color-white);
}

.layout-fixed-cta__item--contact .layout-fixed-cta__button {
  background-color: var(--color-main-darkest);
}

.layout-fixed-cta__item--telephone .layout-fixed-cta__button {
  background-color: var(--color-accent);
  font-family: var(--font-english);
  font-size: 20px;
  letter-spacing: 0.02em;
  padding-top: 9px;
}

/* 受話器のアイコン。装飾のため疑似要素で描く（CSS_SPEC §31）。
   形は 03first の .project-first-area__detail-label--telephone と同じSVG。
   img を置かないのは、common.js の .tel が textContent から番号を拾うため、
   ボタンの中に番号以外の要素を増やしたくないという理由もある。
   色は currentColor。Aパターン（白文字）でもBパターン（色が入れ替わる文字）でも追従する */
.layout-fixed-cta__item--telephone .layout-fixed-cta__button::before {
  content: '';
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11 11 0 0 0 3.5.56 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.2.2 2.4.56 3.5a1 1 0 0 1-.25 1z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11 11 0 0 0 3.5.56 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.2.2 2.4.56 3.5a1 1 0 0 1-.25 1z"/></svg>') no-repeat center / contain;
  transform: translateY(-1px);
}

@media (max-width: 599px) {

  .layout-fixed-cta__list {
    gap: 8px;
  }

  .layout-fixed-cta__button {
    min-height: 48px;
    padding: 6px 8px;
    font-size: 15px;
  }

  .layout-fixed-cta__item--telephone .layout-fixed-cta__button {
    font-size: 18px;
  }

  .layout-fixed-cta__item--telephone .layout-fixed-cta__button::before {
    width: 16px;
    height: 16px;
  }
}

/* base.css の a:hover { opacity: 0.6 } では色が濁るため打ち消す（CSS_SPEC §35）。
   Bパターンの動きは自動再生なので、hoverでの変化は付けていない */
@media (hover: hover) and (pointer: fine) {

  .layout-fixed-cta__item a:hover {
    opacity: 1;
  }
}


/* --------------------------------------------------
  Bパターン（--draw）：5秒に1回、枠線が1周して色が入れ替わる

  1周期を10秒とし、0秒と5秒の2回、線が1周ぶん走る。
  1周し終わった瞬間に枠線と文字の色を入れ替え、線は消す。
  10秒で元の色に戻るので、見た目は「5秒ごとに色が入れ替わる」になる。

  タブレット・スマートフォンにはhoverが無く、この追従バーは1024px以下でしか
  出ないため、hoverではなく自動再生にしている（2026-09-03 本人指示）。

  枠線は疑似要素の箱を伸ばす方法だと角丸をなぞれないため、
  SVGの矩形（rx付き）の線を stroke-dashoffset で伸ばしている。
  rect には pathLength="100" が付いており、外周の長さが実寸に関係なく100に
  正規化される。そのため stroke-dasharray: 100 と書けば常に外周1周分になる。
-------------------------------------------------- */

.layout-fixed-cta__pattern--draw {
  /* 1周期。5秒に1回動かすので、その2倍を指定する */
  --layout-fixed-cta-cycle: 10s;
}

.layout-fixed-cta__pattern--draw .layout-fixed-cta__button {
  background-color: var(--color-white);
}

/* 枠線と文字の色。keyframes 側で持つため、ここでは初期値だけ置く
   （animationが効かないブラウザではこの色で止まる） */
.layout-fixed-cta__pattern--draw .layout-fixed-cta__item--contact .layout-fixed-cta__button {
  -webkit-box-shadow: inset 0 0 0 3px var(--color-main-darkest);
  box-shadow: inset 0 0 0 3px var(--color-main-darkest);
  color: var(--color-main-darkest);
  -webkit-animation: layout-fixed-cta-base-contact var(--layout-fixed-cta-cycle) step-end infinite;
  animation: layout-fixed-cta-base-contact var(--layout-fixed-cta-cycle) step-end infinite;
}

.layout-fixed-cta__pattern--draw .layout-fixed-cta__item--telephone .layout-fixed-cta__button {
  -webkit-box-shadow: inset 0 0 0 3px var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-accent);
  color: var(--color-accent);
  -webkit-animation: layout-fixed-cta-base-telephone var(--layout-fixed-cta-cycle) step-end infinite;
  animation: layout-fixed-cta-base-telephone var(--layout-fixed-cta-cycle) step-end infinite;
}

/* 線は1本で1周させる。--backward は使わないので隠す
   （HTMLから svg--backward を削除しても問題ない） */
.layout-fixed-cta__outline--backward {
  display: none;
}

/* SVGを180度回しているのは、rect の描画開始点が左上のため。回すと右下から始まる */
.layout-fixed-cta__outline {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index-base);
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.layout-fixed-cta__outline rect {
  x: 1.5px;
  y: 1.5px;
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  rx: var(--radius-small);
  fill: none;
  stroke-width: 3px;
  /* pathLength="100" で外周が100に正規化されている。
     dasharray 100 ＋ dashoffset 100 で「未描画」、dashoffset 0 で「1周ぶん描画」 */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.layout-fixed-cta__pattern--draw .layout-fixed-cta__item--contact .layout-fixed-cta__outline rect {
  stroke: var(--color-accent);
  -webkit-animation:
    layout-fixed-cta-draw var(--layout-fixed-cta-cycle) linear infinite,
    layout-fixed-cta-line-contact var(--layout-fixed-cta-cycle) step-end infinite;
  animation:
    layout-fixed-cta-draw var(--layout-fixed-cta-cycle) linear infinite,
    layout-fixed-cta-line-contact var(--layout-fixed-cta-cycle) step-end infinite;
}

.layout-fixed-cta__pattern--draw .layout-fixed-cta__item--telephone .layout-fixed-cta__outline rect {
  stroke: var(--color-main-darkest);
  -webkit-animation:
    layout-fixed-cta-draw var(--layout-fixed-cta-cycle) linear infinite,
    layout-fixed-cta-line-telephone var(--layout-fixed-cta-cycle) step-end infinite;
  animation:
    layout-fixed-cta-draw var(--layout-fixed-cta-cycle) linear infinite,
    layout-fixed-cta-line-telephone var(--layout-fixed-cta-cycle) step-end infinite;
}

/* 線の進み。12% = 1.2秒で1周し、直後（12.01%）に消して次の出番まで待つ。
   50%（5秒）から2回目が始まり、62% = 6.2秒で1周する */
@-webkit-keyframes layout-fixed-cta-draw {

  0% {
    stroke-dashoffset: 100;
  }

  12% {
    stroke-dashoffset: 0;
  }

  12.01%,
  50% {
    stroke-dashoffset: 100;
  }

  62% {
    stroke-dashoffset: 0;
  }

  62.01%,
  100% {
    stroke-dashoffset: 100;
  }
}

@keyframes layout-fixed-cta-draw {

  0% {
    stroke-dashoffset: 100;
  }

  12% {
    stroke-dashoffset: 0;
  }

  12.01%,
  50% {
    stroke-dashoffset: 100;
  }

  62% {
    stroke-dashoffset: 0;
  }

  62.01%,
  100% {
    stroke-dashoffset: 100;
  }
}

/* 線の色。1回目に塗る色 → 2回目に塗り戻す色。step-end で瞬時に切り替える */
@-webkit-keyframes layout-fixed-cta-line-contact {

  0% {
    stroke: var(--color-accent);
  }

  50% {
    stroke: var(--color-main-darkest);
  }
}

@keyframes layout-fixed-cta-line-contact {

  0% {
    stroke: var(--color-accent);
  }

  50% {
    stroke: var(--color-main-darkest);
  }
}

@-webkit-keyframes layout-fixed-cta-line-telephone {

  0% {
    stroke: var(--color-main-darkest);
  }

  50% {
    stroke: var(--color-accent);
  }
}

@keyframes layout-fixed-cta-line-telephone {

  0% {
    stroke: var(--color-main-darkest);
  }

  50% {
    stroke: var(--color-accent);
  }
}

/* 枠線と文字の色。線が1周し終わる瞬間（12% / 62%）に入れ替える */
@-webkit-keyframes layout-fixed-cta-base-contact {

  0% {
    box-shadow: inset 0 0 0 3px var(--color-main-darkest);
    color: var(--color-main-darkest);
  }

  12% {
    box-shadow: inset 0 0 0 3px var(--color-accent);
    color: var(--color-accent);
  }

  62% {
    box-shadow: inset 0 0 0 3px var(--color-main-darkest);
    color: var(--color-main-darkest);
  }
}

@keyframes layout-fixed-cta-base-contact {

  0% {
    box-shadow: inset 0 0 0 3px var(--color-main-darkest);
    color: var(--color-main-darkest);
  }

  12% {
    box-shadow: inset 0 0 0 3px var(--color-accent);
    color: var(--color-accent);
  }

  62% {
    box-shadow: inset 0 0 0 3px var(--color-main-darkest);
    color: var(--color-main-darkest);
  }
}

@-webkit-keyframes layout-fixed-cta-base-telephone {

  0% {
    box-shadow: inset 0 0 0 3px var(--color-accent);
    color: var(--color-accent);
  }

  12% {
    box-shadow: inset 0 0 0 3px var(--color-main-darkest);
    color: var(--color-main-darkest);
  }

  62% {
    box-shadow: inset 0 0 0 3px var(--color-accent);
    color: var(--color-accent);
  }
}

@keyframes layout-fixed-cta-base-telephone {

  0% {
    box-shadow: inset 0 0 0 3px var(--color-accent);
    color: var(--color-accent);
  }

  12% {
    box-shadow: inset 0 0 0 3px var(--color-main-darkest);
    color: var(--color-main-darkest);
  }

  62% {
    box-shadow: inset 0 0 0 3px var(--color-accent);
    color: var(--color-accent);
  }
}

/* 動きを減らす設定では自動再生を止め、最初の配色で固定する */
@media (prefers-reduced-motion: reduce) {

  .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--contact .layout-fixed-cta__button,
  .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--telephone .layout-fixed-cta__button,
  .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--contact 
  }
}

/* 動きを減らす設定では自動再生を止め、最初の配色で固定する */
@media (prefers-reduced-motion: reduce) {

  .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--contact .layout-fixed-cta__button,
  .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--telephone .layout-fixed-cta__button,
  .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--contact .layout-fixed-cta__outline rect,
  .layout-fixed-cta__pattern--draw .layout-fixed-cta__item--telephone .layout-fixed-cta__outline rect {
    -webkit-animation: none;
    animation: none;
  }
}

/* ==================================================
  Component: Hamburger Button（ドロワーを開いている間の×表示）
================================================== */

.component-hamburger::before,
.component-hamburger::after {
  -webkit-transition: -webkit-transform var(--duration-normal) ease;
  transition: -webkit-transform var(--duration-normal) ease;
  transition: transform var(--duration-normal) ease;
  transition: transform var(--duration-normal) ease, -webkit-transform var(--duration-normal) ease;
}

@media (max-width: 1024px) {
  .drawer-active{overflow: hidden;-ms-touch-action: none;touch-action: none;}

  /* ドロワー(--z-index-drawer)より前面に置く */
  .drawer-active .layout-header__hamburger {
    position: relative;
    z-index: calc(var(--z-index-drawer) + 1);
  }
  
  .drawer-active .component-hamburger::before,.drawer-active .component-hamburger::after{
    top: 50%;
        position: absolute;
  }

  /* 線は gap: 6px ＋ 高さ2pxで、中心から上下4pxの位置にある。
     その4pxを打ち消して重ねてから45度回転させる */
  .drawer-active .component-hamburger::before {
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }

  .drawer-active .component-hamburger::after {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* ==================================================
  Component: Station Card のInstagramアイコン
  __map-mark（Googleマップのピン）と同じ作り。
  alt が意味を持つ画像なので mask 化して色を変えることはできない
================================================== */

.component-station-card__instagram-mark {
  display: inline-block;
  width: 20px;
  margin-left: 6px;
  vertical-align: middle;
}

.component-station-card__instagram-mark a {
  display: block;
}

.component-station-card__instagram-mark img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-transform var(--duration-fast) ease;
  transition: -webkit-transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease;
  transition: transform var(--duration-fast) ease, -webkit-transform var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {

  .component-station-card__instagram-mark a:hover {
    opacity: 1;
  }

  .component-station-card__instagram-mark a:hover img {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}