/* ==========================================================
   pages.css … ページごとの専用デザイン
   （トップのキービジュアル・カテゴリの顔写真・エリア一覧・
     お問い合わせフォーム・検索・404）
   ========================================================== */

/* ---------- トップ：キービジュアル（ピックアップ記事のスライド） ---------- */
.an-kv { position: relative; overflow: hidden; background: var(--ph); }
.an-kv__track { position: relative; height: 480px; }
@media (min-width: 1024px) { .an-kv__track { height: 640px; } }
.an-kv__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; display: block; }
.an-kv__slide.is-active { opacity: 1; z-index: 1; }
.an-kv__slide img { width: 100%; height: 100%; object-fit: cover; }
.an-kv__slide::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.an-kv__caption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 28px; color: #fff;
  display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 1024px) { .an-kv__caption { bottom: 56px; gap: 12px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } }
@media (max-width: 1023px) { .an-kv__caption { padding: 0 20px; } }
.an-kv__label { align-self: flex-start; background: var(--ac); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 4px; }
.an-kv__title { font-size: 22px; font-weight: 900; line-height: 1.45; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.an-kv__more { font-size: 13px; font-weight: 700; }
@media (min-width: 1024px) { .an-kv__title { font-size: 40px; max-width: 760px; } .an-kv__more { font-size: 15px; } }
.an-kv__dots { position: absolute; z-index: 3; right: 20px; bottom: 30px; display: flex; gap: 6px; }
@media (min-width: 1024px) { .an-kv__dots { right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); bottom: 60px; } }
.an-kv__dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.an-kv__dots button.is-active { width: 24px; background: #fff; }

/* ---------- カテゴリ・エリアの「顔写真」 ---------- */
.an-hero-img { background: var(--ph); }
.an-hero-img img { width: 100%; height: 240px; object-fit: cover; }
@media (min-width: 1024px) {
  .an-cathead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
  .an-hero-img { border-radius: 20px; overflow: hidden; }
  .an-hero-img img { height: 380px; }
  .an-cathead .an-pagehead { padding-top: 0; }
}
@media (max-width: 1023px) { .an-cathead .an-hero-img { margin: 0 calc(var(--gutter) * -1); order: -1; } .an-cathead { display: flex; flex-direction: column; } }

/* 「導入ページ」（固定ページで自由に作る部分）の入れ物 */
.an-intro { padding: 24px 0 0; }
.an-intro .an-content { gap: 20px; }
@media (min-width: 1024px) { .an-intro { padding-top: 48px; } }

/* ---------- エリア一覧 ---------- */
.an-areas { display: flex; flex-direction: column; }
.an-areacard { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.an-areacard .an-thumb { width: 120px; flex-shrink: 0; }
.an-areacard__body { display: flex; flex-direction: column; gap: 4px; }
.an-areacard__name { font-size: 17px; font-weight: 900; }
.an-areacard__desc { font-size: 12px; color: #555; line-height: 1.7; }
@media (min-width: 1024px) {
  .an-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .an-areacard { flex-direction: column; border-bottom: 0; padding: 0; }
  .an-areacard .an-thumb { width: 100%; aspect-ratio: 16 / 10; }
  .an-areacard__name { font-size: 22px; }
  .an-areacard__desc { font-size: 14px; }
}

/* ---------- お問い合わせフォーム（Contact Form 7 にも対応） ---------- */
.an-form, .wpcf7 form { display: flex; flex-direction: column; gap: 22px; max-width: 680px; }
.an-form label, .wpcf7 label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.an-form input[type="text"], .an-form input[type="email"], .an-form textarea, .an-form select,
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select {
  width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid #CFCAC5; border-radius: 8px;
  font: inherit; font-size: 15px; font-weight: 400; background: #fff;
}
.an-form textarea, .wpcf7 textarea { padding: 12px 14px; min-height: 160px; }
.wpcf7 .wpcf7-list-item { display: block; margin: 0 0 6px; font-weight: 400; }
.wpcf7 input[type="radio"], .wpcf7 input[type="checkbox"] { accent-color: var(--ac); }
.wpcf7 input[type="submit"], .an-form button[type="submit"] {
  min-height: 54px; border: 0; border-radius: 8px; background: var(--ac); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.an-required { font-style: normal; font-size: 10px; color: #fff; background: var(--ac); border-radius: 3px; padding: 1px 6px; margin-left: 6px; }

/* ---------- 検索・404 ---------- */
.an-searchbox { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--ac); border-radius: 8px; max-width: 640px; }
.an-searchbox input { flex: 1; border: 0; font: inherit; font-size: 15px; outline: none; background: none; }
.an-searchbox button { border: 0; background: none; color: var(--ac); cursor: pointer; padding: 0; display: flex; }
.an-empty { padding: 32px 0; font-size: 14px; color: #555; line-height: 1.9; }