@charset "utf-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * [共通パーツ]
 * .ah-heading / --white       - セクション見出し（日本語のみ・900・字間0.1em）。参考サイト title01 相当
 * .ah-btn / --accent          - 丸型ボタン（radius40px＋●インジケータ＋hover反転）。参考サイト btn01 相当
 * .ah-btn-wrap                - ボタンを中央寄せするラッパー
 * .ah-bg-offwhite             - bg-solid の色 modifier（#FEFEFC）。main.css に該当色がないため追加
 * .ah-catch / __word--pink|green|orange - 理念キャッチ（白抜き＋3色縁取り）。TOPと会社概要で共通
 * .sp-text-center             - SPで本文を左寄せにする一括指定から除外したいときに付ける
 *
 * [ヘッダー]
 * .ah-header                  - header-sticky を「通常フロー→スクロールでfixed」に変更
 * .ah-logo--img / --footer    - 画像ロゴ（logo.png）。ヘッダー64px／追従時48px／フッター56px
 * .ah-nav                     - グローバルナビの日本語のみ表示（EN段なし）調整
 * .ah-header-contact / -time  - ヘッダー右の電話＋受付時間
 * .ah-header-cta              - ヘッダーのLINE CTAボタン（ピンク・pill）
 * .ah-tel-white / .ah-sp-nav-time - SPナビ内の電話・受付時間
 *
 * [下層共通]
 * .subpage-wrapper（上書き）    - 下層ページのアーチ形背景（参考サイト bg-maru 相当）
 * .ah-page-title / __icon / __ja - 下層ページのタイトル（deco.png のイラスト＋日本語タイトル／背景画像なし）
 * .ah-gallery__item           - Lightbox用の写真ギャラリーセル
 * .ah-flow                    - 1日の流れ（timeline）の文字サイズ・バッジ幅調整＋PC2カラム化
 *
 * [TOP]（top-custom.css）
 * #slide-wrapper / #slideshow / #catch / .top_deco - MV（参考サイトと同一構造）
 * .slide-img                  - MV仮スライドのフェード切り替え（Swiper不使用・is-active切替）
 * .ah-greet / __side / __center / __deco   - 想いセクション（参考サイト greet-area 相当）
 * .ah-biz / __item / __img / __label / __body / __text / __more - 事業内容のホバータブ
 *
 * [各ページ]
 * .ah-bnr__item               - 導線バナーのホバー浮き上がり
 * .ah-news / .ah-archive      - お知らせ一覧・月別アーカイブの装飾
 * .ah-map / .ah-access-box    - 地図・住所ボックスの角丸
 * .ah-relation__*             - 3事業の関係図（中央＝あったかホーム＋3事業カード）
 * .ah-value / __body / __mark - 会社概要「大切にしていること」（左に項目／右にロゴマーク）
 * .ah-point-section / .ah-point__* - 「小規模・家庭的だからできること」強調セクション
 * .ah-contact-way__*          - お問い合わせ方法3カラム（LINE／フォーム／電話）
 * .ah-form__*                 - フォームのラベル・必須バッジ／CMSフォーム（form-pattern-2）の上書き
 * .ah-thanks / __icon / __lead / __tel - 送信完了ページ（thanks.php）
 * .ah-report__*               - 求人の取材レポートカード
 * .ah-voice__*                - 求人のスタッフの声
 * .ah-entry__*                - お知らせ詳細記事
 * .ah-cta / -heading          - お問い合わせCTA帯の色・サイズ調整
 * .ah-footer-body / -nav / -bottom / .ah-sns - フッター（白背景／コピーライト帯）
 * .ah-sp-bar                  - SP下部固定ボタンの文字・アイコン拡大（参考サイト #sp_btn 相当）
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * ■ 構造不足
 *   - ヘッダーが「通常フロー（透過・背景なし）→スクロールでfixed」になる型がない
 *     （header-bar=常時fixed / header-sticky=absolute の2種のみ）→ .ah-header で補完
 *   - ホバーで幅が広がるタブ型パネル（ホバータブ）のcomponentがない → .ah-biz で補完
 *   - 中央ハブ＋複数要素を点線でつなぐ「関係図」のcomponentがない → .ah-relation で補完
 *   - Q&A形式ではない「インタビュー（質問見出し＋回答）」の型がない → .ah-voice で補完
 *   - CMS差し替え前提のダミーフォーム（ラベル＋必須バッジ）の型がない → .ah-form で補完
 *
 * ■ 装飾パターン不足
 *   - 参考サイト bg-maru のような「幅150%のゆるやかな曲線で背景を敷く」装飾がない
 *     （wave-divider はセクション境界の帯のみ）→ .ah-point-section::before で補完
 *   - 縦書き（writing-mode: vertical-rl）のラベル装飾がない → .ah-biz__label で補完
 *
 * ■ 状態不足
 *   - btn に「hoverで白背景＋文字色をベースカラーに反転」する modifier がない
 *     （btn--solid の hover は sub_color 塗り）→ .ah-btn で補完
 *   - ボタン内の●インジケータが hover で内側に動く演出がない → .ah-btn::after で補完
 *
 * ■ 値の粒度不足
 *   - fz utility に 15 の刻みがない（14の次が16）
 *   - card-icon__text が 1rem（10px）固定で本文としては小さく、utility 併用が前提になる
 *
 * ■ 指定方向不足
 *   - 特になし（position utility で対応できた）
 *
 */

/* ==========================================================================
   0. 共通パーツ（見出し・ボタン）
   参考サイト title01：中央揃え・日本語 3.2rem
   参考サイト btn01：max-width 250px / radius 40px / ベタ塗り＋●／hover で反転
   ========================================================================== */
.ah-heading {
  position: relative;
  z-index: 2;
}

.ah-heading .heading__ja {
  display: block;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #382411;
}

.ah-heading .heading-deco-shape {
  margin-top: 14px;
}

.ah-heading--white .heading__ja {
  color: #fff;
}

/* ボタン */
.ah-btn {
  position: relative;
  max-width: 250px;
  padding: 12px 34px;
  border-radius: 40px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ah-btn::after {
  content: "\f111"; /* fa-circle */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 26px;
  font-size: 0.45em;
  transform: translateY(-50%);
  transition: all 0.5s ease;
}

.ah-btn.btn--solid:hover {
  background: #fff;
  color: #ffab12;
  border-color: #ffab12;
}

.ah-btn:hover::after {
  right: 18px;
}

.ah-btn--accent.btn--solid {
  background: #f686a4;
  border-color: #f686a4;
}

.ah-btn--accent.btn--solid:hover {
  background: #fff;
  color: #f686a4;
  border-color: #f686a4;
}

.ah-btn-wrap {
  display: flex;
  justify-content: center;
}

/* 背景色（bg-solid の modifier として使う。main.css に該当色がないため追加）
   例：<section class="section bg-solid ah-bg-offwhite"> */
.ah-bg-offwhite::before {
  background: #FEFEFC;
}

/* 上→下のグラデーション背景（feature.php 3事業／entry_list.php／entry.php で共通）
   例：<section class="section bg-solid ah-bg-gradient"> */
.ah-bg-gradient::before {
  background: linear-gradient(180deg, #FAF7EC 0%, #FEFEFC 100%);
}

/* キャッチコピー（MV catch.png と同じ配色の白抜き縁取り文字）
   TOP「私たちの想い」と company.php「私たちの想い」の理念で共通利用
   ・ピンク #EA57A2 / グリーン #76B920 / オレンジ #F7A617 は catch.png から採色
   ・paint-order: stroke fill で縁取りが文字の内側を侵食しないようにする
   （未対応ブラウザ向けに text-shadow の8方向フォールバックを併記） */
.ah-catch {
  margin-bottom: 30px;
  font-family: "YakuHanJP", "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 4.4rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.ah-catch__word {
  display: inline-block;
  margin: 0 0.15em;
  color: #fff;                                 /* 塗り＝白 */
  paint-order: stroke fill;
  -webkit-text-stroke: 0.14em var(--ah-catch-line);   /* 縁＝各色 */
  text-shadow:
     2px  2px 0 var(--ah-catch-line), -2px  2px 0 var(--ah-catch-line),
     2px -2px 0 var(--ah-catch-line), -2px -2px 0 var(--ah-catch-line),
     2px    0 0 var(--ah-catch-line), -2px    0 0 var(--ah-catch-line),
       0  2px 0 var(--ah-catch-line),    0 -2px 0 var(--ah-catch-line);
}

.ah-catch__word--pink   { --ah-catch-line: #EA57A2; }
.ah-catch__word--green  { --ah-catch-line: #76B920; }
.ah-catch__word--orange { --ah-catch-line: #F7A617; }

/* paint-order 対応ブラウザでは text-shadow のフォールバックを解除し、
   ストロークのみで縁取りを表現する（二重縁取り防止） */
@supports (paint-order: stroke) {
  .ah-catch__word { text-shadow: none; }
}

@media all and (max-width: 896px) {
  .ah-catch { font-size: 3.4rem; margin-bottom: 24px; }
}

@media all and (max-width: 639px) {
  .ah-catch { font-size: 2.6rem; margin-bottom: 20px; letter-spacing: 0.04em; }
}

/* SPでは長めの本文を左寄せにする（中央寄せだと行頭が揃わず読みにくい）
   ・対象は p のみ。見出し（.heading / h2・h3）やキャッチ（.ah-catch）、
     アイコン（.icon）、短いラベル（.text-light）は中央のまま
   ・個別に中央のままにしたい p には .sp-text-center を付ける */
@media all and (max-width: 639px) {
  p.text-center:not(.ah-catch):not(.icon):not(.text-light):not(.sp-text-center),
  p.tcenter:not(.ah-catch):not(.icon):not(.text-light):not(.sp-text-center),
  .sentence p:not(.ah-catch):not(.icon):not(.sp-text-center) {
    text-align: left;
  }

  /* 左寄せにすると行頭・行末が画面端に寄って読みにくいので、
     コンテンツの左右に 15px の余白を確保する
     （main.css は .container=10px / .container-narrow=max-width:95% のみ） */
  .container,
  .container-wide,
  .container-narrow,
  .container-full {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* TOP「私たちの想い」の外枠 .single02 は top-custom.css 側で指定 */
}

/* ==========================================================================
   1. ヘッダー
   参考サイト：#l-header は通常フロー（透過）→ スクロールで fixed + 白背景
   ========================================================================== */
.ah-header {
  position: relative;
  background: transparent;
}

/* ヘッダーだけコンテンツ幅（1124px）より広く取り、ナビを1行に収める */
.ah-header .header__inner {
  max-width: 1560px;
  height: auto;
  padding: 28px 30px 40px;
}

.ah-header.is-fixed {
  background: #fff;
  box-shadow: 0 2px 8px rgba(56, 36, 17, 0.12);
}

.ah-header.is-fixed .header__inner {
  padding: 10px 30px;
}

/* ロゴ（画像ロゴ logo.png） */
.ah-logo {
  flex-shrink: 0;
}

.ah-logo--img img {
  display: block;
  width: auto;
  height: 64px;
  max-width: 100%;
  transition: height 0.3s ease;
}

/* スクロール追従（is-fixed）時は少し小さく */
.ah-header.is-fixed .ah-logo--img img {
  height: 48px;
}

/* フッターは少し小さめ */
.ah-logo--footer img {
  height: 56px;
}

/* グローバルナビ（1行固定・折り返しなし） */
.ah-nav {
  flex-wrap: nowrap;
  margin-right: 24px;
}

.ah-nav .header__nav-item {
  flex-shrink: 0;
}

.ah-nav .header__nav-ja {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #382411;
  margin-top: 0;
}

.ah-nav .header__nav-item a {
  padding: 8px 13px;
  white-space: nowrap;
}

.ah-nav .header__nav-item a:hover .header__nav-ja {
  color: #f686a4;
}

/* ナビの下線（ホバー時／現在ページ）を常に中央基準にする
   main.css では
   ・通常時   : left 50% / width 0
   ・ホバー時 : left 10% / width 80%（transform なし）
   ・現在ページ: left 50% / width 20px / translateX(-50%)
   となっており、「現在ページをホバーした」ときだけ
   left:10% と translateX(-50%) が同時に効いて左へズレていた。
   ここで transform を通常時に一本化し、left は常に 50% に固定する。 */
.ah-nav .header__nav-item a::after {
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.ah-nav .header__nav-item a:hover::after,
.ah-nav .header__nav-item--current a:hover::after {
  left: 50%;
  width: 80%;
}

.ah-nav .header__nav-item--current a::after {
  left: 50%;
  width: 24px;
}

/* ドロップダウン内のリンクには下線を出さない（main.css の指定を維持） */
.ah-nav .header__dropdown-item a::after {
  display: none;
}

/* ヘッダーの電話番号 */
.ah-header .header__tel {
  font-size: 2.5rem;
}

/* ナビ非表示になる 1100px までの間で、幅に応じて詰める */
@media all and (max-width: 1400px) {
  .ah-header .header__inner { padding: 24px 20px 34px; }
  .ah-header.is-fixed .header__inner { padding: 10px 20px; }
  .ah-nav { margin-right: 16px; }
  .ah-nav .header__nav-item a { padding: 8px 9px; }
  .ah-nav .header__nav-ja { font-size: 1.6rem; letter-spacing: 0.04em; }
  .ah-logo--img img { height: 56px; }
  .ah-header .header__tel { font-size: 2.2rem; }
  .ah-header-cta { padding: 9px 16px; font-size: 1.3rem; }
}

@media all and (max-width: 1240px) {
  .ah-nav { margin-right: 10px; }
  .ah-nav .header__nav-item a { padding: 8px 7px; }
  .ah-nav .header__nav-ja { font-size: 1.4rem; letter-spacing: 0; }
  .ah-logo--img img { height: 48px; }
  .ah-header .header__tel { font-size: 1.9rem; }
  .ah-header-time { display: none; }
  .ah-header-cta { padding: 8px 14px; font-size: 1.2rem; }
}

.ah-nav .header__dropdown-item a {
  font-size: 1.25rem;
  background: #fffaf0;
}

.ah-nav .header__dropdown-item a:hover {
  background: #fff3dc;
}

/* ヘッダー右側（電話 + LINE CTA） */
.ah-header-contact {
  text-align: right;
  line-height: 1.3;
}

.ah-header-time {
  font-size: 1.05rem;
  color: #9c8b7a;
  letter-spacing: 0.02em;
}

.ah-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 9999px;
  background: #f686a4;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 3px 10px rgba(246, 134, 164, 0.35);
  transition: all 0.3s ease;
}

.ah-header-cta:hover {
  background: #fff;
  color: #f686a4;
  opacity: 1;
  transform: translateY(-2px);
}

/* SPナビ内の電話・受付時間 */
.ah-tel-white,
.ah-tel-white::before {
  color: #fff;
}

.ah-sp-nav-time {
  margin-top: 4px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   2. お問い合わせCTA
   ========================================================================== */
/* 背景：模様画像（contact-bg.jpg）のみ。柄を見せるため色被せ（フィルター）なし
   ・白文字・白ボタンの視認性は text-shadow / box-shadow 側で確保する */
.ah-cta::before {
  background:
    url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28257/contact-bg.jpg) no-repeat center center;
  background-size: cover; /* 画像は全幅（cover）で表示 */
}

.ah-cta .footer-cta__inner {
  padding: 0 15px;
}

.ah-cta-heading .heading__ja {
  font-size: 3.2rem;
  color: #fff;
  /* 明るい背景でも白が飛ばないよう、密着した影＋広い影の2段掛け */
  text-shadow:
    0 1px 2px rgba(150, 78, 0, 0.55),
    0 3px 12px rgba(150, 78, 0, 0.4);
}

/* 説明・受付時間テキストも影で締める */
.ah-cta .footer-cta__desc {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(150, 78, 0, 0.55),
    0 2px 8px rgba(150, 78, 0, 0.35);
}

/* 電話番号もLINE・メールフォームと同じピル型ボタンに揃える（白地×オレンジ文字） */
.ah-cta .footer-cta__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 320px;
  width: 100%;
  padding: 10px 24px;
  border: 2px solid #fff;
  border-radius: 9999px;
  background: #fff;
  color: #e07c00;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  box-shadow: 0 4px 14px rgba(110, 55, 0, 0.28);
  transition: all 0.3s ease;
}

/* アイコンは main.css の .footer-cta__tel::before（fa-phone）を使う */
.ah-cta .footer-cta__tel::before {
  margin-right: 0;
  font-size: 0.6em;
}

/* hoverは色被せがない＝背景が明るいため、透明化ではなく濃いオレンジ反転 */
.ah-cta .footer-cta__tel:hover {
  background: #e07c00;
  color: #fff;
  box-shadow: 0 6px 18px rgba(110, 55, 0, 0.32);
}

/* 白ボタンは濃いオレンジ文字＋影で背景から浮かせる */
.ah-cta .footer-cta__mail {
  max-width: 320px;
  width: 100%;
  border: 2px solid #fff;
  border-radius: 9999px;
  color: #e07c00;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(110, 55, 0, 0.28);
}

.ah-cta .footer-cta__mail:hover {
  background: #e07c00;
  color: #fff;
  box-shadow: 0 6px 18px rgba(110, 55, 0, 0.32);
}

/* LINEボタンは白フチを付けて背景の柄から輪郭を立てる */
.ah-cta .btn-cta-line {
  border-radius: 9999px;
  font-weight: 700;
  border-color: #fff;
  box-shadow: 0 4px 14px rgba(110, 55, 0, 0.28);
}

.ah-cta .btn-cta-line:hover {
  border-color: #fff;
  box-shadow: 0 6px 18px rgba(110, 55, 0, 0.32);
}

@media all and (max-width: 639px) {
  .ah-cta-heading .heading__ja { font-size: 2.2rem; }
  .ah-cta .footer-cta__tel { font-size: 2.2rem; padding: 9px 18px; }
}

/* ==========================================================================
   2-1. 下層ページヒーロー・下層共通パーツ
   ========================================================================== */
/* 下層ページのアーチ形あしらい（参考サイト design_base_source の .bg-maru 相当）
   ・body のクリーム地（#FAF7EC）の上に白のアーチを敷き、
     ヘッダー帯＝クリーム／本文エリア＝白 に分ける
   ・幅を画面より広く取り、横は 50%（＝アーチ幅を画面外まで伸ばす）／
     縦だけ固定値の border-radius にすることで、
     ページの高さに関係なく弧の深さを一定に保つ（参考サイトは height 依存で深さが変わる）
   ・--deco-top はヘッダー高さ。あしらいをページ最上端（ヘッダー背面）まで伸ばす量。
     TOP（top-custom.css の #slide-wrapper）と同じ値・同じ考え方 */
.subpage-wrapper {
  position: relative;
  --deco-top: 132px; /* 28 + ロゴ64 + 40 */
}

.subpage-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 160%;
  height: 100%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50% 50% 0 0 / 200px 200px 0 0;
  pointer-events: none;
  z-index: -1; /* 背景色付きセクション（bg-solid 等）は上に重なる */
}

/* ヘッダーの高さがブレークポイントで変わるので、--deco-top も合わせて調整
   （値は top-custom.css の #slide-wrapper と同じ） */
@media all and (max-width: 1400px) {
  .subpage-wrapper { --deco-top: 114px; } /* 24 + ロゴ56 + 34 */
}

@media all and (max-width: 1240px) {
  .subpage-wrapper { --deco-top: 106px; } /* 24 + ロゴ48 + 34 */
}

/* 下層ページのタイトル
   参考サイト（design_base_source/service.php）と同じ形。
   背景画像は使わず、イラスト（deco.png）＋日本語タイトルを中央に置くだけ。
   参考サイトの .icon / .title01 の数値をそのまま踏襲している。 */
.ah-page-title {
  position: relative;
  z-index: 2;
  padding: 70px 15px 30px;
  text-align: center;
}

.ah-page-title__icon {
  width: 180px;
  margin: 0 auto 0px;
  text-align: center;
  pointer-events: none;
}

.ah-page-title__icon img {
  display: block;
  width: 100%;
  height: auto;
}

.ah-page-title__ttl {
  margin: 0;
}

.ah-page-title__ja {
  display: block;
  font-family: "YakuHanJP", "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  letter-spacing: 0.1em;
  color: #382411;
}

@media all and (max-width: 896px) {
  .ah-page-title { padding: 50px 15px 20px; }
  .ah-page-title__icon { width: 130px; }
  .ah-page-title__ja { font-size: 2.6rem; }
  /* 画面が狭いほど弧が急に見えるので、縦の角丸を浅くする */
  .subpage-wrapper {
    --deco-top: 90px;
  }
  .subpage-wrapper::before {
    width: 200%;
    border-radius: 50% 50% 0 0 / 150px 150px 0 0;
  }
  .ah-page-title::before,
  .ah-page-title::after { max-width: 50%; }
}

@media all and (max-width: 639px) {
  .ah-page-title { padding: 40px 15px 10px; }
  .ah-page-title__ja { font-size: 2rem; }
  .subpage-wrapper {
    --deco-top: 80px;
  }
  .subpage-wrapper::before {
    border-radius: 50% 50% 0 0 / 100px 100px 0 0;
  }
  .ah-page-title::before,
  .ah-page-title::after { max-width: 60%; opacity: 0.5; }
}

/* 見出し（左ボーダー型）：参考サイト title03 に合わせる */
.heading-bar .heading__ja {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #382411;
}

/* アイコンカード内の丸アイコンを中央に */
.card-icon .icon-circle {
  margin: 0 auto 14px;
}

/* 写真ギャラリー（Lightbox） */
.ah-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(214, 138, 20, 0.15);
}

.ah-gallery__item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ah-gallery__item:hover {
  opacity: 1;
}

.ah-gallery__item:hover img {
  transform: scale(1.06);
}

@media all and (max-width: 639px) {
  .ah-gallery__item img { height: 200px; }
}

/* 1日の流れ（タイムライン） */
.ah-flow .timeline__content {
  font-size: 1.5rem;
}

.ah-flow .timeline__time--badge {
  min-width: 110px;
  text-align: center;
}

/* 項目数が多く縦に長くなるので2カラムに分ける。
   grid ではなく multi-column にしているのは、時系列の並びを
   「左列を上から下 → 右列」に保つため（grid だと左右交互になる） */
.ah-flow .timeline--vertical {
  column-count: 2;
  column-gap: 50px;
  column-rule: 1px dashed #E9E4E0;
}

/* 1項目がカラムの途中で分断されないようにする */
.ah-flow .timeline__row {
  break-inside: avoid;
  page-break-inside: avoid; /* 旧仕様のブラウザ向け */
}

@media all and (max-width: 896px) {
  .ah-flow .timeline--vertical { column-gap: 30px; }
}

@media all and (max-width: 639px) {
  /* SPは1カラムに戻す */
  .ah-flow .timeline--vertical {
    column-count: 1;
    column-rule: none;
  }
  .ah-flow .timeline__content { font-size: 1.3rem; }
  .ah-flow .timeline__time--badge { min-width: 96px; font-size: 1.1rem; }
}

/* ==========================================================================
   2-2. 導線バナー / お知らせ / アクセス（複数ページで使用）
   ========================================================================== */
.ah-bnr__item {
  transition: all 0.3s ease;
}

.ah-bnr__item:hover {
  opacity: 1;
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(214, 138, 20, 0.22);
}

.ah-bnr__item:hover .card-bnr__arrow {
  background: #ffab12;
  color: #fff;
}

.ah-bnr__item .card-bnr__title .heading__ja {
  font-size: 1.6rem;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(56, 36, 17, 0.5);
}

.ah-news {
  padding: 10px 30px;
  border-radius: 20px;
}

.ah-news .news-list__date {
  font-size: 1.7rem;
  letter-spacing: 0.06em;
}

.ah-news .news-list__cat {
  border-radius: 9999px;
  letter-spacing: 0.05em;
}

.ah-news .news-list__title {
  font-weight: 700;
}

.ah-map {
  border-radius: 20px;
}

.embed iframe {
  display: block;
  border: 0;
}

.ah-access-box {
  border-radius: 20px;
}

/* ==========================================================================
   2-3. あったかホームの強み
   ========================================================================== */
/* 「3つの事業がつながる安心」セクションの背景（上→下のグラデーション）
   bg-solid の ::before を使うので、markup は class="section bg-solid ah-feature" */
/* → 共通の .ah-bg-gradient（冒頭の共通パーツ）に移動 */

/* 「大切にしていること」：左に項目リスト／右にロゴマーク */
.ah-value {
  display: flex;
  align-items: center;
  gap: 40px;
}

.ah-value__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ah-value__mark {
  flex: 0 0 auto;
  width: 150px;
  margin-right: 20px; /* 20px 左へ寄せる */
}

.ah-value__mark img {
  display: block;
  width: 100%;
  height: auto;
}

@media all and (max-width: 639px) {
  .ah-value {
    flex-direction: column;
    gap: 20px;
  }
  .ah-value__mark { width: 110px; margin-right: 0; }
}

/* 3事業の関係図 */
/* 中央＝あったかホーム（画像ロゴ）
   ロゴが読めるよう、地色はオレンジベタ塗りではなく白＋オレンジ枠にしている。
   幅は「左右のカードの点線（カード中央）に枠の両端が届く」値を計算で出す。
   カード幅 = (100% - gap48px) / 3 なので、
   左カード中央〜右カード中央の距離 = 100% - カード幅 = (200% + 48px) / 3 */
.ah-relation__center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((233% + 48px) / 3);
  max-width: 100%;
  margin: 0 auto 46px;
  padding: 22px 40px;
  border: 2px solid #ffab12;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(255, 171, 18, 0.25);
}

.ah-relation__center-logo {
  display: block;
  width: auto;
  height: 90px;
  max-width: 100%;
}

.ah-relation__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ah-relation__item {
  position: relative;
  padding: 40px 24px 28px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 4px 16px rgba(214, 138, 20, 0.13);
}

/* 中央（あったかホーム）とつなぐ点線＋三角 */
.ah-relation__item::before {
  content: "";
  position: absolute;
  top: -46px;
  left: 50%;
  width: 0;
  height: 46px;
  border-left: 2px dotted #ffab12;
  transform: translateX(-50%);
}

.ah-relation__icon {
  position: absolute;
  top: -28px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ffab12;
  color: #ffab12;
  font-size: 2.2rem;
  transform: translateX(-50%);
}

.ah-relation__item--2 .ah-relation__icon { border-color: #8fc7a9; color: #8fc7a9; }
.ah-relation__item--3 .ah-relation__icon { border-color: #7fc4d8; color: #7fc4d8; }
.ah-relation__item--2::before { border-left-color: #8fc7a9; }
.ah-relation__item--3::before { border-left-color: #7fc4d8; }

.ah-relation__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #9c8b7a;
}

.ah-relation__name {
  margin-bottom: 10px;
  font-size: 2rem;
  font-weight: 900;
  color: #382411;
}

.ah-relation__text {
  font-size: 1.35rem;
  line-height: 1.8;
}

/* 各事業の「詳しく見る」ボタン（事業内容ページの該当項目へアンカー）
   色はカードごとのテーマ色（アイコン・点線と同色）を --rel-color で共有 */
.ah-relation__item            { --rel-color: #ffab12; }
.ah-relation__item--2         { --rel-color: #8fc7a9; }
.ah-relation__item--3         { --rel-color: #7fc4d8; }

.ah-relation__btn {
  margin-top: 18px;
}

.ah-relation__btn a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border: 2px solid var(--rel-color);
  border-radius: 9999px;
  background: var(--rel-color);
  color: #fff;
  font-family: "Zen Maru Gothic", "YakuHanJP", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ah-relation__btn a::after {
  content: "\f105"; /* fa-angle-right */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.9em;
  transition: transform 0.3s ease;
}

.ah-relation__btn a:hover {
  background: #fff;
  color: var(--rel-color);
  opacity: 1;
}

.ah-relation__btn a:hover::after {
  transform: translateX(4px);
}

@media all and (max-width: 896px) {
  .ah-relation__list { grid-template-columns: 1fr; gap: 46px; }
  /* 1カラムになるので、幅の計算はやめて通常の中央寄せに戻す */
  .ah-relation__center {
    width: 100%;
    max-width: 420px;
    margin-bottom: 40px;
    padding: 16px 28px;
  }
  .ah-relation__center-logo { height: 64px; }
  .ah-relation__name { font-size: 1.7rem; }
}

/* 小規模・家庭的だからできること（強調セクション） */
/* 参考サイト bg-maru（幅150%の疑似要素をゆるやかな曲線で敷く）を踏襲 */
.ah-point-section {
  position: relative;
  z-index: 0;
  margin: 60px 0;
}

.ah-point-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 150%;
  z-index: -1;
  background: #F3E8D7;
  border-radius: 50% 50% 50% 50% / 60px 60px 60px 60px;
  transform: translateX(-50%);
}

.ah-point__item {
  position: relative;
  padding: 38px 30px 30px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(180, 110, 10, 0.18);
}

.ah-point__num {
  position: absolute;
  top: -18px;
  left: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f686a4;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(246, 134, 164, 0.35);
}

.ah-point__title {
  margin-bottom: 10px;
  font-size: 2rem;
  font-weight: 900;
  color: #382411;
}

.ah-point__text {
  font-size: 1.45rem;
  line-height: 1.9;
}

@media all and (max-width: 639px) {
  .ah-point-section { margin: 30px 0; }
  .ah-point-section::before { border-radius: 50% 50% 50% 50% / 30px 30px 30px 30px; }
  .ah-point__title { font-size: 1.6rem; }
  .ah-point__text { font-size: 1.3rem; }
}

/* ==========================================================================
   2-4. お問い合わせ
   ========================================================================== */
.ah-contact-way__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 26px 30px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 4px 16px rgba(214, 138, 20, 0.13);
}

.ah-contact-way__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #ffab12;
  color: #fff;
  font-size: 2.6rem;
}

.ah-contact-way__icon--line {
  background: #06c755;
}

/* メールフォームはピンク（LINE=グリーン／電話=オレンジ と色分け） */
.ah-contact-way__icon--mail {
  background: #f686a4;
}

.ah-contact-way__item--mail {
  box-shadow: 0 4px 16px rgba(214, 100, 140, 0.16);
}

.ah-contact-way__title {
  margin-bottom: 10px;
  font-size: 2rem;
  font-weight: 900;
  color: #382411;
}

.ah-contact-way__text {
  margin-bottom: 25px;
  font-size: 1.35rem;
  line-height: 1.8;
}

.ah-contact-way__item .btn,
.ah-contact-way__item .btn-cta-line,
.ah-contact-way__item .btn-cta-tel {
  margin-top: auto;
}

/* フォーム */
.ah-form__row {
  margin-bottom: 24px;
}

.ah-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 1.45rem;
  font-weight: 700;
  color: #382411;
}

.ah-form__req {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 9999px;
  background: #f686a4;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  vertical-align: middle;
}

.ah-form textarea.form-input {
  min-height: 160px;
  resize: vertical;
}

/* --------------------------------------------------------------------------
   CMSフォーム（cms_ajax / form-pattern-2）の見た目調整
   CMS側のCSSが後から読み込まれて競合するため、!important で上書きする
   -------------------------------------------------------------------------- */
/* 送信ボタン：サイト共通の .ah-btn（ピル型・オレンジ・中央寄せ）に合わせる */
.ah-form .submit-btn,
.submit-btn {
  display: block !important;
  max-width: 300px !important;
  width: 100% !important;
  margin: 30px auto 0 !important;
  padding: 14px 30px !important;
  border: 2px solid #ffab12 !important;
  border-radius: 9999px !important;
  background: #ffab12 !important;
  color: #fff !important;
  font-family: "YakuHanJP", "Zen Maru Gothic", sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-align: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.ah-form .submit-btn:hover,
.submit-btn:hover {
  background: #fff !important;
  color: #ffab12 !important;
  opacity: 1 !important;
}

/* 送信ボタンを包む要素が左寄せの場合の保険 */
.ah-form .submit-btn-area,
.ah-form .btn-area {
  text-align: center !important;
}

/* 「必須」バッジ：CMS標準の赤（#ff4f4f）をサイトのピンクに変更 */
.form-pattern-2 dl dt:not(.pattern-exclusion) span.required::before {
  color: #fff !important;
  background: #f686a4 !important;
  border-radius: 9999px !important;
}

/* --------------------------------------------------------------------------
   送信完了（thanks.php）
   -------------------------------------------------------------------------- */
.ah-thanks {
  padding: 50px 40px;
}

.ah-thanks__icon {
  display: block;
  margin-bottom: 20px;
  font-size: 6rem;
  line-height: 1;
  color: #ffab12;
}

.ah-thanks__lead {
  margin-bottom: 24px;
  font-family: "YakuHanJP", "Zen Maru Gothic", sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #382411;
}

.ah-thanks__tel {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px dashed #e9e4e0;
}

@media all and (max-width: 639px) {
  .ah-thanks { padding: 34px 20px; }
  .ah-thanks__icon { font-size: 4.4rem; }
  .ah-thanks__lead { font-size: 1.8rem; }
}

/* ==========================================================================
   2-5. 求人情報
   ========================================================================== */
.ah-report {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ah-report__item {
  position: relative;
  padding: 40px 34px 30px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(214, 138, 20, 0.13);
}

.ah-report__label {
  position: absolute;
  top: -16px;
  left: 30px;
  padding: 5px 20px;
  border-radius: 9999px;
  background: #ffab12;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* 画像＋テキストの横並び（偶数ポイントは --reverse で画像を右へ） */
.ah-report__inner {
  display: flex;
  align-items: flex-start;
  gap: 34px;
}

.ah-report__inner--reverse {
  flex-direction: row-reverse;
}

.ah-report__img {
  flex: 0 0 34%;
  max-width: 34%;
}

.ah-report__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

.ah-report__body {
  flex: 1 1 auto;
  min-width: 0;
}

@media all and (max-width: 896px) {
  .ah-report__inner { gap: 24px; }
  .ah-report__img { flex-basis: 40%; max-width: 40%; }
}

.ah-report__title {
  margin-bottom: 14px;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.6;
  color: #382411;
}

.ah-report__text {
  font-size: 1.45rem;
  line-height: 2;
}

/* スタッフの声 */
.ah-voice {
  padding: 34px;
  border-radius: 20px;
  background: #fff;
  border: 2px solid #ffe6bd;
}

.ah-voice__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dotted #e9e4e0;
}

/* スタッフのイラスト（正円のアイコン風） */
.ah-voice__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 2px solid #ffab12;
  border-radius: 50%;
  background: #fff6e4;
}

.ah-voice__avatar--accent {
  border-color: #f686a4;
  background: #fdeef3;
}

.ah-voice__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ah-voice__role {
  font-size: 1.7rem;
  font-weight: 900;
  color: #382411;
}

.ah-voice__q {
  margin-bottom: 6px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffab12;
}

.ah-voice__q::before {
  content: "《";
}

.ah-voice__q::after {
  content: "》";
}

.ah-voice__a {
  margin-bottom: 20px;
  font-size: 1.45rem;
  line-height: 1.95;
}

.ah-voice__a:last-child {
  margin-bottom: 0;
}

@media all and (max-width: 639px) {
  .ah-report__item { padding: 34px 20px 24px; }
  .ah-report__title { font-size: 1.6rem; }
  .ah-report__text { font-size: 1.3rem; }
  /* SPは画像を上、テキストを下に積む */
  .ah-report__inner,
  .ah-report__inner--reverse {
    flex-direction: column;
    gap: 20px;
  }
  .ah-report__img {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
  .ah-voice { padding: 24px 18px; }
  .ah-voice__avatar { width: 60px; height: 60px; }
  .ah-voice__role { font-size: 1.4rem; }
  .ah-voice__a { font-size: 1.3rem; }
}

/* ==========================================================================
   2-6. お知らせ（一覧・詳細）
   ========================================================================== */
.ah-entry__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* 記事の日付（main.css の .news-list__date は 0.9rem と小さいため上書き） */
.ah-entry__meta .news-list__date {
  font-size: 1.8rem;
  letter-spacing: 0.06em;
}

.ah-entry__title {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px dotted #ffcf7e;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.6;
  color: #382411;
}

.ah-entry__body {
  font-size: 1.5rem;
  line-height: 2;
}

.ah-archive .news-cat-nav a {
  display: block;
  padding: 12px 4px;
  color: #382411;
  font-size: 1.35rem;
  font-weight: 700;
}

.ah-archive .news-cat-nav a:hover {
  color: #ffab12;
  opacity: 1;
}

@media all and (max-width: 639px) {
  .ah-entry__title { font-size: 1.8rem; }
  .ah-entry__body { font-size: 1.3rem; }
}

/* ==========================================================================
   3. フッター
   参考サイト：白背景 + 上部にメインカラーの2pxライン、コピーライト帯はメインカラー
   ========================================================================== */
.ah-footer-body {
  position: relative;
  background: #fff;
  padding: 70px 0 60px;
}

.ah-footer-body .footer-body__inner {
  max-width: 1124px;
}

/* ナビは footer-body__inner の外に出し、最下部で横1列・中央寄せにする */
.ah-footer-nav {
  justify-content: center;
  max-width: 1124px;
  margin: 50px auto 0;
  padding: 0 5%;
  gap: 15px 30px;
}

.ah-footer-nav .footer-body__nav-item a {
  position: relative;
  padding-left: 18px;
  font-size: 1.35rem;
  font-weight: 700;
  white-space: nowrap;
}

.ah-footer-nav .footer-body__nav-item a::before {
  content: "\f138"; /* fa-circle-chevron-right */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  /* テキストの行の中央に合わせる（top のみだとアイコンが上へズレる） */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  line-height: 1;
  color: #ffab12;
}

.ah-sns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffab12;
  color: #fff;
  font-size: 1.8rem;
  transition: all 0.3s ease;
}

.ah-sns:hover {
  background: #f686a4;
  opacity: 1;
  transform: translateY(-2px);
}

@media all and (max-width: 896px) {
  .ah-footer-nav { margin-top: 40px; }
}

/* SPはハンバーガーメニューがあるのでフッターナビは非表示 */
@media all and (max-width: 639px) {
  .ah-footer-nav { display: none; }
}

/* --------------------------------------------------------------------------
   SP下部の固定ボタン（sp-fixed-bar）
   参考サイト（design_base_source/css/smartphone.css の #sp_btn）に合わせて
   アイコン 2.2rem / ラベル 1.2rem / パディング 14px と大きめにする。
   main.css の既定は 0.75rem（7.5px）で小さすぎるため上書き。
   -------------------------------------------------------------------------- */
.ah-sp-bar .sp-fixed-bar__link {
  padding: 12px 4px;
  font-family: "YakuHanJP", "Zen Maru Gothic", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.ah-sp-bar .sp-fixed-bar__link i {
  display: block;
  margin-bottom: 6px;
  font-size: 2.2rem;
  line-height: 1;
  color: #ffab12;
}

/* LINEだけブランドカラー */
.ah-sp-bar .sp-fixed-bar__item:nth-child(2) .sp-fixed-bar__link i {
  color: #06c755;
}

.ah-sp-bar .sp-fixed-bar__item:not(:last-child) {
  border-right: 1px solid rgba(255, 171, 18, 0.2);
}

/* ページトップボタンが固定ボタンと重なるので、バーの高さ分だけ上げる
   （バーの表示は 896px 以下。高さ＝12+22+6+約14+12 ≒ 66px + セーフエリア） */
@media all and (max-width: 896px) {
  .page-top {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

.ah-footer-bottom {
  background: #ffab12;
}

.ah-footer-bottom .footer-bottom__copyright {
  color: #fff;
  font-size: 1.2rem;
}