/*
Theme Name: NENE'S_Theme
Author: NENE'S
Version: 1.0
*/


/* ─── Reset & Base ─────────────────────────────────────────────────────────── */
/* 全要素に共通する初期化とボックスモデル設定 */
* {
  box-sizing: border-box;    /* パディングとボーダーを含めたサイズ計算にする */
  margin: 0;                 /* デフォルトのマージンをリセット */
  padding: 0;                /* デフォルトのパディングをリセット */
}
/* HTML 要素のベースフォントサイズ */
html {
  font-size: 16px;           /* rem/em の基準となるサイズ */
}
/* BODY 要素の基本スタイル */
body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  color: #333;               /* テキストのデフォルトカラー */
  line-height: 1.6;          /* 行間を1.6倍に設定 */
  background: #fff;          /* 背景色を白に設定 */
}
/* コンテナ幅とセンタリング */
.container {
  width: 100%;               /* ビューポート幅いっぱい */
  max-width: 1200px;         /* 最大幅1200px */
  padding: 0 1rem;           /* 左右に余白を追加 */
  margin: 1rem auto;         /* 上下1rem・水平中央寄せ */
}
/* 2. 横スクロール禁止 */
html, body {
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: none; /* ラバーバンド抑制 */
}
/* 3. 画像をはみ出さない */
img,
.image-slider img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* ─── Links & Buttonsの共通スタイル ──────────────────────────────────────────────────────── */
/* iOS Safari の自動リンク解除 */
a[x-apple-data-detectors] {
  color: inherit;
  text-decoration: none;
}

/* 電話・メールリンク（Android含む） */
a[href^="tel"],
a[href^="mailto"] {
  color: inherit;
  text-decoration: none;
}

/* Gmailアプリなどでの下線除去 */
u + #body a {
  color: inherit;
  text-decoration: none;
}
/* ボタンの共通スタイル */
.btn {
  display: inline-block;     /* インラインブロックにしてサイズ指定可能に */
  padding: 0.75rem 1.5rem;   /* 上下0.75rem、左右1.5remの余白 */
  border-radius: 4px;        /* 角を4px丸める */
  font-weight: bold;         /* 太字 */
  text-align: center;        /* テキストを中央寄せ */
  cursor: pointer;           /* カーソルを指アイコンに */
  transition: opacity 0.2s ease; /* ホバー時にフェードするアニメーション */
  width: auto;               /* 自動幅 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn:hover {
  opacity: 0.8;              /* ホバー時に20%透明に */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* プライマリーボタン */
.btn-primary {
  background-color: #f8a100; /* ボタン背景色 */
  color: #fff;               /* 文字色を白に */
}
/* 詳細ボタン用クラス（.btn を継承） */
.btn-detail {
  /* inherits .btn padding & auto width */
}
/* ボタンを中央寄せするユーティリティ */
.btn-wrap {
  text-align: center;        /* 内部のボタンを中央寄せ */
  margin: 3rem 0;            /* 上下マージン調整 */
}




/* 汎用見出し */
.section-title {
  position: relative;          /* 擬似要素を絶対配置するため */
  font-weight: 700;
  text-align: center;
  margin-bottom: 2.5rem;       /* 見出しと本文の間隔 */
}

/* 下線付きバージョン */
.title-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.75rem;            /* 見出しから少し離す */
  transform: translateX(-50%); /* センター合わせ */
  width: 80%;                  /* ここが実際の線の長さ */
  max-width: 200px;            /* スマホでもはみ出さない上限 */
  height: 4px;                 /* 線の太さ */
  background: #5d9650;         /* 好みの色に変更可 */
  border-radius: 2px;          /* 丸み（任意） */
}

/* PC で線を長くしたい場合だけ上書き */
@media (min-width: 992px) {
  .title-underline::after {
    width: 50%;
    max-width: 300px;
  }
}


@media (max-width: 600px) {
  .section-news h2,
  .section-about h2,
  .section-services h2,
  .section-flow h2,
  .section-usage-flow h2,
  .section-faq h2,
  .section-recruit h2,
  .section-access h2,
  .section-contact h2 {
    font-size: 1.25rem;
  }
}





/* ─── Header & Navigation ─────────────────────────────────────────────────── */
/* サイトヘッダー全体 */
.site-header {
  background: #fff;           /* 背景白 */
  border-bottom: 1px solid #e0e0e0; /* 下線を薄いグレーで */
  position: sticky;           /* スクロール追従 */
  top: 0;                     /* 上端に固定 */
  z-index: 100;               /* 上に重ねる */
}
/* ヘッダー内ラッパー */
.header-inner {
  display: flex;              /* 横並びレイアウト */
  align-items: center;        /* 垂直中央揃え */
  justify-content: space-between; /* 左右に要素を配置 */
  padding: 1rem 0;            /* 上下パディング */
}
/* ロゴ画像 */
#logo img {
  height: 50px;               /* ロゴを縮小 */
  width: auto;                /* アスペクト比を保つ */
  display: block;
}

#logo {
  display: flex;
  align-items: center;
  gap: 1rem; /* ロゴとテキストの間隔 */
}
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 1rem; /* 画像とテキストの間隔 */
}

.site-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}

/* ▼ スマホ（768px以下）のときだけ文字サイズを変更 */
@media (max-width: 768px) {
  .site-name {
    font-size: 0.7rem;   /* 小さめにする */
    white-space: normal; /* 必要に応じて改行を許可 */
  }
  .logo-wrap {
  gap: 0.25rem;               /* テキストと画像の間隔を縮小 */
  align-items: left; 
}
  .logo-wrap img {
    height: 35px;               /* スマホ用に少し小さく */
  }
}

/* グローバルナビリスト */
.global-nav ul {
  list-style: none;           /* デフォルトのリストマーカーを消去 */
  display: flex;              /* 横並び */
  gap: 1rem;                  /* アイテム間隔 */
}
/* ナビリンク */
.global-nav a {
  padding: 0.5rem 0.75rem;    /* リンク内の余白 */
  border-radius: 3px;         /* リンクの角丸 */
  transition: background 0.2s ease; /* ホバー時背景色変化 */
}
.global-nav a:hover {
  background: #f0f0f0;        /* ホバー時に薄いグレー背景 */
}

.site-header .header-inner {
  max-width: none;
  width: 100%;
  padding: 0 1rem;  /* 必要なら左右余白だけ残す */
  margin: 0 auto;
}

/* ─── Hamburger Menu ──────────────────────────────────────────────────────── */
/* ハンバーガーアイコン */
.hamburger {
  display: flex;              /* 常時表示に変更 */
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 1rem;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

/* グローバルナビ：デフォルトは非表示、.open で表示 */
.global-nav {
  display: none;              /* ナビは隠しておく */
}
.global-nav.open {
  display: block;             /* toggle 時に開く */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.global-nav.open ul {
  flex-direction: column;
  padding: 1rem 0;
}
.global-nav.open li + li {
  margin-top: 0.5rem;
}
/* ─── Hero Section ───────────────────────────────────────────────────────── */
/* ヒーローセクション全体 */
/* ラップ用コンテナ */
.section-images-text {
  align-items: start;
  margin: 0 auto 2rem;
  max-width: 1200px;
}

/* ：画像をスライド切り替えするラッパー */
.image-slider {
  position: relative; /* 子要素を重ねるために relative 指定 */
  width: 100%;
  aspect-ratio: 16 / 6;  /* または height: 300px; のように固定でもOK */
  max-height:1000px;      /* 万一ワイド画面でも伸びすぎない安全策 */
  height: auto;
  overflow: hidden; /* はみ出た画像を隠す */
}

/* 切り替える画像スタイル */
.image-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;            /* ← 高さ100%に変更 */
  object-fit: cover;       /* ← はみ出さずフィットさせる */
  opacity: 0;
  animation: fadeSlide 12s infinite;
  transition: opacity 1s ease-in-out;
  border-radius: 4px;
}

/* ▼ 画像ごとに表示タイミングをずらす */
.image-slider img:nth-child(1) {
  animation-delay: 0s;
}
.image-slider img:nth-child(2) {
  animation-delay: 4s;
}
.image-slider img:nth-child(3) {
  animation-delay: 8s;
}

/* ▼ フェードイン・アウトのアニメーション定義 */
@keyframes fadeSlide {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  40%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

.image-slider .catch-copy{
  position:absolute;
  bottom: 5rem;          /* 写真左下に配置 */
  left:15rem;
  z-index:10;         /* 画像より大きい数値に */
  pointer-events:none;/* クリック透過 */
  transform: translateX(-50%);
  padding:0.4rem 1rem;
  font-weight:600;
  font-size:clamp(0.7rem,2vw,1.6rem); /* レスポンシブ文字サイズ */
  color:#555;
  white-space:nowrap;
  font-family: 'Shippori Mincho B1', serif;

  /* 白 → 透明へフェードアウトする背景 */
  background: linear-gradient(to right,
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, 0.7) 20%,
  rgba(255, 255, 255, 0.75) 50%,
  rgba(255, 255, 255, 0.7) 80%,
  rgba(255, 255, 255, 0) 100%);
    /* border-radius: 4px; */
    width: 70vw;  /* ← 背景の実幅を広げる（お好みで80vwなどもOK） */
    max-width: 100%;  /* 必要に応じて制限 */
    text-align: center;
}

/* 600px 以下でやや小さく */
@media (max-width:600px){
  .image-slider .catch-copy{
    font-size:0.9rem;
    padding: 0.4rem 1rem;
    bottom:1.5rem;          /* 写真左下に配置 */
    left:7rem;
    max-width: 90%;
  }
    .image-slider{
    aspect-ratio:16 / 10; 
  }
}





/* ─── News Section ───────────────────────────────────────────────────────── */
/* お知らせセクション全体 */
.section-news {
  padding: 2rem 0;            /* 上下2rem */
  background: #FBFBE9; 
}
.section-news h2 {
  text-align: center;         /* 中央揃え */
  margin-bottom: 1.5rem;      /* 下マージン */
}
/* お知らせリスト：縦並び＆下線 */
.section-news .news-list {
  display: block;             /* 縦並び */
  list-style: none;           /* マーカー消去 */
  margin: 0 auto 1rem;        /* 中央寄せ＋下マージン */
  padding: 0;                 /* パディングリセット */
  max-width: 500px;           /* 最大幅 */
}
.section-news .news-list li {
  padding: 0.5rem 0;          /* 上下余白 */
  border-bottom: 1px solid #ccc; /* 下線 */
}
.section-news .news-list time {
  display: inline-block;      /* 固定幅に */
  width: 8rem;                /* 日付幅 */
  color: #666;                /* 日付色 */
  margin-right: 0.5rem;       /* タイトルとの間隔 */
}

/* ─── Gray Background Sections ────────────────────────────────────────────── */
/* 各セクション共通のグレー背景とパディング */
/* .section-images, */
/* .section-news, */ 
.section-about,
.section-services,
.section-flow,
.section-usage-flow,
.section-faq,
.section-recruit,
.section-access,
.section-contact {
  background: #FBFBE9;        /* 背景グレー */
  padding: 2rem 0;            /* 上下パディング */
}

/* ─── About / Service Type Explanation ───────────────────────────────────── */
/* セクションタイトル共通 */
.section-about h2,
.section-services h2,
.section-flow h2,
.section-usage-flow h2,
.section-faq h2,
.section-recruit h2,
.section-access h2,
.section-contact h2 {
  text-align: center;         /* 中央揃え */
  margin-bottom: 3rem;        /* 下マージン */
}
/* セクション本文 */
.section-about p,
.section-services p,
.container p {
  text-align: left;         /* 中央揃え */
  max-width: 800px;           /* 最大幅 */
  margin: 0 auto 2rem;        /* 横中央＋下マージン */
}


/* ─── 特徴リスト（対象者・勤務時間・目的）───────────────────────────────────── */
.features{
  display: grid;  /* 200 px 幅のカードが入るだけ並び、入らなければ自動で折り返す */
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  justify-content: center;   /* ← これで列グループを中央寄せ */
  justify-items: center;     /* ← 各セルの中身も中央に揃える */
  max-width: 500px;
  margin: 0 auto 2rem;
  font-size: 0.8rem;
}


/* 正方形カード */
.feature-item.square{
  aspect-ratio:1 / 1;
  max-width:200px;          /* 大きくなり過ぎないよう上限を置く */

  /* 中身を中央に置くための Flex */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  padding:1rem 0.2rem 0.2rem;
  background:#f8a100;
  border-radius:18px;
  color:#fff;
}

.feature-item.square p{
  text-align:center;
}

/* 見出しの下余白を軽く調整 */
.feature-item.square h3{
  margin:0 0 .5rem;
}
@media (max-width: 600px) {
  .feature-item.square h3 {
    font-size: 0.8rem;
  }
  .feature-item.square{
  aspect-ratio:1 / 1;
  width:100%;               /* 列幅にフィットさせる */
  max-width:130px;          /* 大きくなり過ぎないよう上限を置く */
  padding:1rem 0 0;
}
}



/* ─── Facility Overview ──────────────────────────────────────────────────── */
/* サービスギャラリーのグリッド設定 */
/* セクション全体に左右 16px の余白 */
.section-services {
  padding-inline: 16px;  /* padding-left & padding-right */
}

/* ------ サービスギャラリー（2列固定） ------ */
.section-services .service-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));/* 常に2列 */
  gap:8px;          /* 画像同士の間隔を狭める */
  max-width:800px;  /* 必要なら調整 */
  margin-inline:auto;
}

/* 画像はアスペクト比を保ったまま幅だけ 100% */
.section-services .service-gallery img {
  width: 100%;
  height: auto;      /* ← 比率維持 */
  display: block;
  border-radius: 4px;
}
.section-services .container {
  text-align: center; /* ul を中央に寄せるために必要 */
}
.section-services ul {
  display: inline-block;       /* コンテンツ幅に合わせる */
  text-align: left;            /* テキストは左揃え */
  margin: 0 auto 24px auto;    /* 上下マージンあり、左右中央 */
  padding-left: 1em;           /* リストのインデント */
}

@media (min-width:992px){
  .section-services .service-gallery{
    grid-template-columns:repeat(4,minmax(0,1fr));/* 4列 */
  }
}


/* ─── Job Contents & Daily Flow ───────────────────────────────────────────── */
/* 仕事内容カード：グリッド3列で正方形・中央揃え */
.section-flow .job-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 幅に応じて折り返す */
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto 2rem;
}

.section-flow .job-card {
  aspect-ratio: 1 / 1;             /* 正方形を維持 */
  width: 100%;                     /* グリッド幅に合わせる */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.section-flow .job-card h3{
  font-size: 1.1rem;
}
.section-flow .job-card img {
  width: 100%;              /* カードに対しての相対幅 */
  height: auto;            /* 縦横比を維持 */
  object-fit: contain;       /* アスペクト比を維持して中に収める */
  margin: 1.5rem 0;
}

@media (max-width: 768px) {
  .section-flow .job-cards {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;         /* セル中身を中央 */
    padding: 0 1rem;
  }

  .section-flow .job-card {
    width: 100%;
    max-width: 300px;
    min-width: 200px;
    min-height: 200px;
    aspect-ratio: auto; /* ← 正方形制約を解除 */
    height: auto;       /* 高さを自動に */
  }
.section-flow .job-card img {
    margin: 1rem 0;
    width: 100%;              /* カードに対しての相対幅 */
}

.section-flow .job-card h3{
    font-size: 1em;
}
.br-sp-only {
  display: inline; /* or block／inline-block as needed */
}
}
.br-sp-only {
  display: none;
}



/* ─── タイムライン風スケジュール ─────────────────────────────────────────── */
/* グリッド2列で破線区切り */
.timeline {
  max-width: 800px;
  margin: 0 auto 2rem;
}
.timeline ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.timeline li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  column-gap: 1rem;
  row-gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed #ccc; /* 破線 */
  padding-bottom: 0.75rem;
}
.timeline li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.timeline .time {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: right;
  align-self: start;
  color: #5D9650;
}

@media (max-width: 600px) {
  .timeline .time {
    font-size: 1rem;
  }
}

.timeline .content {
  line-height: 1.6;
}
.daily-schedule h3{
  text-align: center;
  margin: 3rem 0 1rem 0;
}
/* ─── Usage Flow ─────────────────────────────────────────────────────────── */
/* ご利用までの流れリスト（span 対象バージョン） */
.flow-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 500px;
  margin: 0 auto;
}

.flow-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 1.5rem 2rem;
  line-height: 1.8;
}

.flow-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: #333;
  text-align: center;
}

.flow-card p {
  font-size: 0.95rem;
  color: #444;
  text-align: left;
}

@media (max-width: 600px) {
  .flow-cards {
  max-width: 320px;
}
  .flow-card h3 {
    font-size: 1rem;
  }
  .flow-card p {
    font-size: 0.85rem;
  }
}

/* 矢印用の span に三角形を */
.flow-arrow {
  display: flex;                      /* フレックス指定 */
  justify-content: center;           /* 横方向中央 */
  align-items: center;               /* 縦方向中央（なくてもOK） */
  margin: 1rem 0;                    /* カード間に余白 */
}

.flow-arrow::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 24px solid orange;
}

@media (max-width: 768px) {
  .flow-arrow {
    margin: 0;
  }
}

/* ─── よくある質問 ─────────────────────────────────────────────────────── */
/* 隠しチェックボックス */
.accordion-checkbox {
  display: none;
}

/* 質問部分（ラベル） */
.accordion-label {
  display: block;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  margin-bottom: 0.25rem;
}
/* プラス／マイナスアイコン */
.accordion-label::after {
  content: '+';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 1.25rem;
}
/* チェック時はマイナスに */
.accordion-checkbox:checked + .accordion-label::after {
  content: '−';
}

/* 回答部分 */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: #fff;
  padding: 0 1rem;
  margin-bottom: 1rem;
}
/* チェック時に展開 */
.accordion-checkbox:checked + .accordion-label + .accordion-content {
  max-height: 300px; /* 必要に応じて増減 */
  padding: 1rem;
}


/* ─── Recruitment ───────────────────────────────────────────────────────── */
/* 利用者募集ボックス */
.section-recruit .recruit-box {
  background: #fff;
  border: 8px dotted #C0E4DE;
  border-radius: 2rem;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
}
.section-recruit .recruit-box h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.section-recruit .recruit-box p,
.section-recruit .recruit-box ul {
  margin-bottom: 0.9rem;
  line-height: 1.6;
}
.section-recruit .recruit-box ul {
  padding-left: 1.5rem;
  list-style: disc inside;
}





@media (max-width: 768px) {
.section-recruit .recruit-box ul {
  margin-bottom: 0.9rem;
}
}






/* ─── Access & Map ───────────────────────────────────────────────────────── */
/* マップコンテナ */
.map-container {
  width: 100%;
  height: 300px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.section-access p {
  text-align: center;
  font-style: normal;
  color: #555;
  margin-bottom: 0;

}


/* ─── Contact Form 7 対応 ────────────────────────────────────────────────── */
/* フォーム全体 */
.section-contact .wpcf7-form {
  max-width: 600px;      /* 元の .contact-form と同じ幅 */
  margin: 0 auto;        /* 中央寄せ */
}

/* 残りのテキストをセンター揃え */
.section-contact .container p {
  text-align: center;
}

/* ラベル */
.section-contact .wpcf7-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: bold;
}

/* 入力欄・テキストエリア */
.section-contact .wpcf7-form input.wpcf7-form-control,
.section-contact .wpcf7-form textarea.wpcf7-form-control {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 送信ボタン */
.section-contact .wpcf7-form input.wpcf7-form-control.wpcf7-submit {
  /* 元の .btn-detail と同じ見た目に */
  display: inline-block;
  background-color: #f5a623;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  display: block;      /* ブロック要素にして */
  margin: 0 auto;      /* 上下：0、左右：自動マージンで中央揃え */
}
.section-contact .wpcf7-form input.wpcf7-form-control.wpcf7-submit:hover {
  background-color: #d18e1f;
}

/* ボタン幅の上書き */
.section-contact .wpcf7-form .btn-detail,
.section-contact .wpcf7-form input.wpcf7-form-control.wpcf7-submit {
  width: auto;           /* テキストに合わせる */
}

/* エラーメッセージ・送信後メッセージ */
.section-contact .wpcf7-form .wpcf7-response-output {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 4px;
}
.section-contact .wpcf7-form .wpcf7-mail-sent-ok {
  background-color: #e6f9e6;
  border: 1px solid #8fd48f;
  color: #2d662d;
}

/* エラーメッセージ */
.section-contact .wpcf7-form .wpcf7-not-valid-tip,
.section-contact .wpcf7-form .wpcf7-validation-errors {
  color: #c00;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
/* フッター全体 */
.site-footer {
  background: #333;            /* 落ち着いたグレー */
  color: #fff;                 /* 白文字 */
  padding: 1rem 1rem;
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;            /* スマホで折り返し */
  gap: 1rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.footer-logo img {
  height: 40px;
  width: auto;
  display: block;
}

.footer-name {
  font-size: 1.1rem;
  font-weight: bold;
}

.footer-info {
  text-align: right;
  line-height: 1.5;
}

.footer-info p{
  margin: 0;        /* 389行目でかかっているものをリセット*/
  text-align: left;
}

.copyright {
  font-size: 0.8rem;
  color: #aaa;
  margin-top: 0.5rem;
  text-align: center;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-info {
    text-align: center;
  }
}


.footer-links ul {
  list-style: none; /* 箇条書きの点を消す */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /* または row にすれば横並びに */
  gap: 0.5em;
}

.footer-links ul li a {
  color: #ffffff; /* リンクの文字色を #333 に設定 */
  text-decoration: none; /* アンダーライン消したい場合は追加 */
}

.footer-links ul li a:hover {
  text-decoration: underline; /* ホバー時のアクセント */
}





/* ─── Responsive ─────────────────────────────────────────────────────────── */
/* モバイル画面対応（幅768px以下） */
  .global-nav a {
  display: block;               /* クリックしやすく */
  color: #333;                  /* テキスト色 */
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
  }
  .global-nav a:hover {
    background: #f0f0f0;          /* ホバー時に薄グレー */
  }

@media (max-width: 768px) {
  /* ハンバーガーメニューを表示 */
  .hamburger {
    display: flex;
  }
  /* ヘッダー内レイアウト調整 */
  .header-inner {
    position: relative;
  }
  /* ナビを隠して開閉制御 */
  .global-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .global-nav.open {
    display: block;
  }
  .global-nav ul {
    gap: 0;
    padding: 0;
    margin: 0;
    flex-direction: column; 
  }
  .global-nav.open li + li { 
    margin-top: 0.25rem;
  }
  /* ヒーローを縦並びに */
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-images {
    padding: 0;
    grid-template-rows: auto auto;
  }
  .hero-text {
    padding: 1rem 0 0;
  }

  .section-images{
    grid-template-columns: 1fr; /* １列に */
  }
  
  /* カードを包むグリッドコンテナに左右パディングを追加 */
  .section-flow .job-cards,
  .features {
    /* 画面端から2remずつ余白を確保 */
    padding: 0 5rem;
    grid-template-columns: 1fr; /* 1列に */
    grid-template-columns: minmax(0, 1fr);
  }

  /* ご利用までの流れ */
  .section-usage-flow .usage-steps {
    flex-direction: column;
  }
} 






/* ─── ブログ一覧 ─────────────────────────────────────────────────────────── */
.section-blog-list {
  background-color: #faf5e5; /* サイト共通の背景色 */
  padding: 4rem 0;
}
.section-blog-list .section-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.25rem;
}

.post-card {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.post-thumbnail {
  flex: 0 0 300px;
  height: 200px;
  background-color: #f5f5f5;
  overflow: hidden;
}
.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-thumbnail.placeholder {
  /* サムネイルが無い場合の空枠 */
}

.post-meta {
  flex: 1;
  padding-left: 1rem;
  display: flex;
  align-items: center;
}
.date-badge {
  background-color: #f5a623;
  color: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  margin-right: 0.75rem;
  border-radius: 2px;
}
.post-title {
  font-size: 1rem;
  margin: 0;
}
.post-title a {
  color: inherit;
  text-decoration: none;
}

.post-divider {
  border: none;
  border-top: 1px solid #5d9650;
  margin: 2rem 0;
}

/* ページネーションを < 1 2 3 4 5 > 形式に */
.pagination {
  text-align: center;
  margin: 3rem 0;
}
.pagination ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination li {
  margin: 0 0.5rem;
}
.pagination a,
.pagination .page-numbers {
  text-decoration: none;
  color: inherit;
  font-size: 0.875rem;
  margin: 0 0.5rem;
}
.pagination .current {
  font-weight: bold;
  text-decoration: underline;
}

/* ─── レスポンシブ対応 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .post-card {
    flex-direction: column;
    align-items: flex-start; /* テキストは左揃え */
  }
  .post-thumbnail {
    /* 幅・高さを固定 */
    flex: none;  /* flex-grow/shrink/basis をリセット */
    width: 300px;
    height: 200px;
    margin: 0 auto 1rem; /* センター寄せ（お好みで） */
    overflow: hidden;
  }
  

  .post-meta {
    padding-left: 0;
    flex-direction: column;
    align-items: flex-start; /* テキストは左揃え */
  }
  .date-badge {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 480px) {
  .section-blog-list {
    padding: 2rem 0;
  }
  .post-card {
    margin-bottom: 1.5rem;
  }
  .date-badge {
    font-size: 0.75rem;
  }
  .post-title {
    font-size: 0.875rem;
  }
  .pagination a,
  .pagination .page-numbers {
    font-size: 0.75rem;
    margin: 0 0.25rem;
  }
}




/* ─── ブログ個別ページ ─── */

/* Section container and background */
.section-single-post {
  background-color: #faf5e5; /* サイト共通背景色 */
  padding: 4rem 0;
}
.section-single-post .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ─ Breadcrumb Navigation ─ */
.breadcrumb {
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.breadcrumb-divider {
  margin: 0 0.5rem;
}
.breadcrumb .current {
  font-weight: bold;
}

/* ─ Post Title ─ */
.section-single-post .post-title {
  font-size: 2rem;
  text-align: center;
  margin: 1rem 0 2rem;
  color: #3c302b; /* ダークブラウン */
}

/* ─ Featured Image ─ */
.section-single-post .post-thumbnail {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
  overflow: hidden;
}
.section-single-post .post-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ─ Post Meta (date, categories) ─ */
.section-single-post .post-meta {
  font-size: 0.875rem;
  color: #3c302b;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.section-single-post .post-meta time {
  margin-right: 1rem;
}
.section-single-post .post-categories {
  margin-top: 0.5rem; /* カテゴリーが複数行になる場合 */
}
.section-single-post .post-categories a {
  text-decoration: none;
  color: #f5a623; /* オレンジ */
}

/* ─ Post Content ─ */
.section-single-post .post-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #3c302b;
  margin-bottom: 2rem;
}
.section-single-post .post-content p {
  margin-bottom: 1.5rem;
}

/* ページ分割リンク */
.section-single-post .page-links {
  font-size: 0.875rem;
  margin: 2rem 0;
}
.section-single-post .page-links a {
  color: #f5a623;
  margin: 0 0.5rem;
  text-decoration: none;
}

/* ─ Post Tags ─ */
.section-single-post .post-tags {
  font-size: 0.875rem;
  color: #3c302b;
  margin-bottom: 2rem;
}
.section-single-post .post-tags a {
  text-decoration: none;
  color: #f5a623;
  margin-right: 0.5rem;
}

/* ─ Back to List Link ─ */
.section-single-post .back-to-list {
  text-align: center;
  margin-top: 3rem;
}
.section-single-post .back-to-list a {
  display: inline-block;
  font-size: 0.875rem;
  color: #f5a623;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid #f5a623;
  border-radius: 2px;
}
.section-single-post .back-to-list a:hover {
  background-color: #f5a623;
  color: #fff;
}




/* ─── Gutenberg（ブログ）の配置反映テンプレ ─────────────────────────────────────────────────────────── */
/* 中央揃え */
.single .post-content img.aligncenter,
.single .post-content .wp-block-image.aligncenter img,
.single .post-content p.aligncenter img {
  display: block !important;
  margin: 1em auto !important;
  float: none !important;
}
.single .post-content .has-text-align-center,
.single .post-content p.aligncenter {
  text-align: center !important;
}
.single .post-content .wp-block-image.aligncenter {
  text-align: center !important;
}

/* 右揃え */
.single .post-content img.alignright,
.single .post-content .wp-block-image.alignright img,
.single .post-content p.alignright img {
  display: inline;
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}
.single .post-content .has-text-align-right,
.single .post-content p.alignright {
  text-align: right !important;
}
.single .post-content .wp-block-image.alignright {
  text-align: right;
}

/* 左揃え（おまけ） */
.single .post-content img.alignleft,
.single .post-content .wp-block-image.alignleft img,
.single .post-content p.alignleft img {
  display: inline;
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}
.single .post-content .has-text-align-left,
.single .post-content p.alignleft {
  text-align: left !important;
}
.single .post-content .wp-block-image.alignleft {
  text-align: left;
}




/* ─── 花イラスト装飾 ─────────────────────────────────────────────────────────── */
.section-news .container, .features , .section-services , .section-usage-flow , .section-recruit{
  position: relative; /* 装飾画像の基準位置に */
}

.decoration.flower {
  position: absolute;
  width: 120px;
  height: auto;
  z-index: 0; /* カードより後ろに */
  pointer-events: none; /* ユーザー操作をブロックしない */
  z-index: 1;
}

.flower1 {
  top: 10px;
  left: -300px;
}
.flower2 {
  top: -10px;
  right: -130px;
}
.flower3 {
  top: 8px;
  left: 200px;
}
.flower4 {
  top: 20px;
  right: 80px;
}
.flower5 {
  top: -60px;
  right: 80px;
}
.flower6 {
  top: -30px;
  right: 80px;
}
.flower7 {
  top: 10px;
  left: 100px;
}
.flower8 {
  top: 500px;
  left: 50px;
}
.flower9 {
  top: 30px;
  right: 80px;
}
.flower10 {
  top: 50px;
  left: 200px;
}
.flower11 {
  top: 50px;
  right: 80px;
}
.flower12 {
  top: 100px;
  right: 140px;
}
/* ▼ スマホ時はサイズを縮小・位置を調整 */
@media (max-width: 768px) {
  .decoration.flower {
    width: 80px;
  }
  .flower1 {
  top: 200px;
  left: 10px;
}
  .flower2 {
    top: -10px;
    right: 10px;
  }
  .flower3 {
    bottom: -15px;
    left: -10px;
  }
  .flower4 {
  top: -5px;
  right: 20px;
}
.flower5 {
  top: -30px;
  right: 30px;
}
.flower6 {
  top: -30px;
  right: 30px;
}
.flower7 {
  top: 0;
  left: 20px;
}
.flower8 {
  top: 650px;
  left: 20px;
}
.flower9 {
  top: -50px;
  right: -10px;
}
  .flower10 {
  top: 50px;
  left: 10px;
}
.flower11 {
  top: 70px;
  right: 10px;
}
.flower12 {
  top: 50px;
  right: 80px;
}
}