/* =============================================================
   空き家まるっと管理 — サイトテーマ (site-theme.css)
   -------------------------------------------------------------
   Webflow/Relume 書き出しCSSの後に読み込むオーバーライドレイヤー。
   既存の webflow CSS は編集せず、このファイルだけを手作業運用する。

   カラー運用ルール:
   - オレンジ #F5A94F は「ボタン背景 + 濃紺文字」の組み合わせのみ許可
     (白地オレンジ文字はコントラスト不足のため禁止)
   - フォーカスリングは 明色背景=#0C7A65 / 濃紺背景=#F5A94F
   ============================================================= */

/* ---------- 1. デザイントークン ---------- */
:root {
  /* ブランド */
  --navy-900: #0E2A45;
  --navy-800: #12314D;
  --navy-700: #1A3A5C;
  --teal-700: #0B6E5B;
  --teal-600: #0C7A65;
  --teal-brand: #0D8A72;
  --orange-brand: #F5A94F;
  --orange-hover: #EC9A38;
  --text-body: #22303C;
  --text-muted: #4A5A68;
  --bg-mist: #EEF4F8;
  --bg-mist-light: #F4F8FB;
  --border: #D3DEE7;
  --white: #FFFFFF;

  /* UI */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(14,42,69,.08), 0 1px 2px rgba(14,42,69,.05);
  --shadow-md: 0 4px 14px rgba(14,42,69,.10);
  --shadow-lg: 0 12px 28px rgba(14,42,69,.14);
  --transition: .18s ease;

  /* 日本語フォントスタック */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;

  /* 既存 Webflow 変数の差し替え(波及して効かせる) */
  --_typography---font-styles--body: var(--font-jp);
  --_typography---font-styles--heading: var(--font-jp);
  --_color-schemes---color-scheme-1--text: var(--text-body);
  --_color-schemes---color-scheme-1--border: var(--border);
  --_ui-styles---radius--small: var(--radius-sm);
  --_ui-styles---radius--medium: var(--radius-md);
  --_ui-styles---radius--large: var(--radius-lg);
}

/* ---------- 2. ベース / タイポグラフィ ---------- */
body {
  font-family: var(--font-jp);
  color: var(--text-body);
  line-height: 1.8;
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
}

p { line-height: 1.9; }

h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3,
.heading-style-h4, .heading-style-h5, .heading-style-h6 {
  color: var(--navy-800);
  font-family: var(--font-jp);
  font-weight: 700;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}

h1, .heading-style-h1 { font-size: 2.75rem; line-height: 1.35; }
h2, .heading-style-h2 { font-size: 2.25rem; line-height: 1.4; }
h3, .heading-style-h3 { font-size: 1.875rem; line-height: 1.4; }
h4, .heading-style-h4 { font-size: 1.5rem;  line-height: 1.5; }
h5, .heading-style-h5 { font-size: 1.25rem; line-height: 1.5; }
h6, .heading-style-h6 { font-size: 1.125rem; line-height: 1.5; }

.text-size-medium { font-size: 1.125rem; line-height: 1.9; }

/* ---------- 3. リンク ---------- */
a { color: inherit; }
.text-style-link {
  color: var(--teal-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
.text-style-link:hover { color: var(--teal-600); }

/* ---------- 4. ボタン ---------- */
.button {
  border: 1px solid var(--orange-brand);
  background-color: var(--orange-brand);
  color: var(--navy-900);
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: .875rem 1.75rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.button:hover {
  background-color: var(--orange-hover);
  border-color: var(--orange-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* セカンダリ = 濃紺ソリッド(ページ中盤の主要CTA) */
.button.is-secondary {
  border: 1px solid var(--navy-800);
  background-color: var(--navy-800);
  color: var(--white);
}
.button.is-secondary:hover {
  background-color: var(--navy-700);
  border-color: var(--navy-700);
}
.button.is-secondary.is-alternate { color: var(--white); }

.button.is-small { padding: .625rem 1.25rem; min-height: 40px; }

/* ナビ内CTA(is-secondary is-small)はオレンジで統一 */
.navbar1_menu-buttons .button {
  border-color: var(--orange-brand);
  background-color: var(--orange-brand);
  color: var(--navy-900);
}
.navbar1_menu-buttons .button:hover {
  background-color: var(--orange-hover);
  border-color: var(--orange-hover);
}

/* 濃紺バンド内のセカンダリ = 白アウトライン */
.band-navy-cta .button.is-secondary {
  background-color: transparent;
  border: 2px solid rgba(255,255,255,.85);
  color: var(--white);
}
.band-navy-cta .button.is-secondary:hover {
  background-color: rgba(255,255,255,.12);
  border-color: var(--white);
}

/* キーボードフォーカス */
.button:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: 2px;
}
.band-navy .button:focus-visible,
.band-navy-cta .button:focus-visible,
.page-area .section_header46 .button:focus-visible {
  outline-color: var(--orange-brand);
}

/* ---------- 5. ナビバー ---------- */
.navbar1_component {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.navbar1_link {
  color: var(--navy-800);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}
.navbar1_link:hover { color: var(--teal-700); background-color: var(--bg-mist); }
.navbar1_dropdown-toggle {
  color: var(--navy-800);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}
.navbar1_dropdown-toggle:hover { color: var(--teal-700); }
/* デスクトップのみ。モバイル(<=991px)ではWebflowが枠なしフラット表示にするため触らない */
@media screen and (min-width: 992px) {
  .navbar1_dropdown-list.w--open {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background-color: var(--white);
  }
}
.navbar1_dropdown-link {
  color: var(--navy-800);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}
.navbar1_dropdown-link:hover { color: var(--teal-700); background-color: var(--bg-mist); }
.navbar1_dropdown-link.w--current,
.navbar1_link.w--current { color: var(--teal-700); }

/* ブランド(ロゴ+タグライン)を縦積みで整列 */
.navbar1_brand-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.navbar1_logo-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
/* ロゴマーク(1枚目)と文字ロゴ(2枚目)のサイズ。旧インライン height の置き換え */
.navbar1_logo-link .navbar1_logo:first-child {
  height: 38px;
  width: auto;
  margin-right: 10px;
}
.navbar1_logo-link .navbar1_logo:last-child {
  max-height: 30px;
  width: auto;
}
/* ロゴ下タグライン(旧インライン0.6rem→整理) */
.navbar_tagline {
  font-size: .6875rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  max-width: 340px;
}
@media screen and (max-width: 991px) {
  .navbar_tagline { display: none; }
}

/* ---------- 6. セクション背景バンド ---------- */
.section_header1 { background-color: var(--bg-mist-light); }
.section_pricing18 { background-color: var(--bg-mist); }
.section_faq7 { background-color: var(--bg-mist); }

/* sticky ナビの裏に見出しが隠れないようアンカー着地位置をオフセット */
#price, #faq { scroll-margin-top: 6rem; }

.band-mist { background-color: var(--bg-mist); }
.band-plain { background-color: var(--white); }

.band-navy { background-color: var(--navy-900); }
.band-navy :is(h1, h2, h3, h4, p),
.band-navy :is(.heading-style-h1, .heading-style-h2, .text-size-medium) {
  color: var(--white);
}

.band-navy-cta { background-color: var(--navy-800); }
.band-navy-cta :is(h1, h2, h3, h4, p),
.band-navy-cta :is(.heading-style-h1, .heading-style-h2, .text-size-medium) {
  color: var(--white);
}

/* ---------- 7. ヒーロー(index) ---------- */
.hero_title { margin-bottom: 3rem; line-height: 1.5; }
.header1_image-wrapper { box-shadow: var(--shadow-md); }
.header1_content-left .heading-style-h1 { position: relative; }
/* 左カラム見出し下のティールアクセントバー */
.header1_content-left .margin-bottom.margin-small::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4px;
  margin-top: 1.25rem;
  background-color: var(--teal-600);
  border-radius: 2px;
}

/* ---------- 8. サービスカード(layout300) ---------- */
.layout300_item {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.layout300_item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.layout300_item .heading-style-h5 { color: var(--navy-800); }

/* ---------- 9. メリットカード(layout239) ---------- */
.layout239_item {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.merit_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background-color: var(--bg-mist);
  color: var(--teal-600);
}
.merit_icon svg { width: 2.25rem; height: 2.25rem; }

/* ---------- 10. 事例カード(testimonial22) ---------- */
.testimonial22_card {
  border-left: 4px solid var(--teal-700);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.testimonial22_card .testimonial22_content-top { position: relative; }
.testimonial_label {
  display: block;
  font-weight: 700;
  color: var(--navy-800);
  padding-bottom: .5rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--border);
}
.testimonial_quote {
  display: block;
  color: var(--teal-600);
  margin-bottom: .5rem;
}
.testimonial_quote svg { width: 1.75rem; height: 1.75rem; }

/* ---------- 11. 料金プラン(pricing18) ---------- */
.pricing18_plan {
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pricing18_plan:hover { box-shadow: var(--shadow-md); }
/* 基本プラン(先頭)をハイライト */
.pricing18_grid-list > .pricing18_plan:first-child {
  border: 2px solid var(--teal-600);
  box-shadow: var(--shadow-md);
  position: relative;
}
.pricing18_grid-list > .pricing18_plan:first-child::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background-color: var(--teal-600);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.pricing18_plan .heading-style-h6 {
  color: var(--teal-700);
  letter-spacing: .06em;
}
.pricing18_plan .heading-style-h1 {
  font-size: 2.25rem;
  color: var(--navy-800);
}
.pricing18_icon-wrapper { color: var(--teal-600); }
.pricing18_feature { font-size: 1.0625rem; line-height: 1.7; }
.pricing18_feature.is-note { color: var(--text-muted); font-size: .9375rem; }
.pricing18_note {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  max-width: 44rem;
  margin: 2.5rem auto 0;
  padding: 1rem 1.25rem;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange-brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.75;
  text-align: left;
}
.pricing18_note::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .1em;
  background-color: var(--orange-brand);
  -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>');
          mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>');
}

/* ---------- 12. ご利用の流れ(flow_steps) ---------- */
.flow_steps {
  list-style: none;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
.flow_step {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 2rem;
}
.flow_step::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--teal-600);
  box-shadow: 0 0 0 4px rgba(12,122,101,.15);
  z-index: 1;
}
.flow_step::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1.2rem;
  bottom: -.4rem;
  width: 2px;
  background-color: var(--border);
}
.flow_step:last-child { padding-bottom: 0; }
.flow_step:last-child::after { display: none; }
.flow_step p { margin: 0; }
.flow_step strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy-800);
  margin-bottom: .5rem;
}

/* ---------- 13. FAQ(details/summary アコーディオン) ---------- */
.section_faq7 .faq7_list { grid-row-gap: 1rem; }
details.faq7_item {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq7_question {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  color: var(--navy-800);
}
.faq7_question::-webkit-details-marker { display: none; }
.faq7_question:hover { background-color: var(--bg-mist); }
.faq7_question:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: -2px;
}
.faq7_chevron {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--teal-700);
  transition: transform var(--transition);
}
details.faq7_item[open] .faq7_chevron { transform: rotate(180deg); }
.faq7_answer { padding: 0 1.5rem 1.25rem; }
.faq7_answer p { margin: 0; }

/* ---------- 14. ブログ(note最新記事) ---------- */
.section_blog { background-color: var(--white); }
#akiyamarutto-latest-articles {
  list-style: none;
  padding: 2rem 0;
  margin: 0 auto;
  max-width: 40rem;
  display: grid;
  gap: .75rem;
  text-align: left;
}
#akiyamarutto-latest-articles li {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  transition: background-color var(--transition), box-shadow var(--transition);
}
#akiyamarutto-latest-articles li:hover {
  background-color: var(--bg-mist);
  box-shadow: var(--shadow-sm);
}
#akiyamarutto-latest-articles li a {
  color: var(--navy-800);
  font-weight: 500;
  text-decoration: none;
}
#akiyamarutto-latest-articles li a:hover { text-decoration: underline; }
#akiyamarutto-latest-articles li.loading,
#akiyamarutto-latest-articles li.error {
  border-style: dashed;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- 15. フッター ---------- */
.footer7_component { background-color: var(--navy-900); }
.footer7_component .footer7_info-text { color: #E8F0F6; }
.footer7_component .footer7_link {
  color: rgba(255,255,255,.85);
  transition: color var(--transition);
}
.footer7_component .footer7_link:hover { color: var(--white); text-decoration: underline; }
.footer7_component .footer7_credit-text { color: #B9C7D3; }
.footer7_component .footer7_legal-link {
  color: #B9C7D3;
  transition: color var(--transition);
}
.footer7_component .footer7_legal-link:hover { color: var(--white); }
.footer7_component .divider-horizontal { background-color: rgba(255,255,255,.15); }
/* フッター ロゴマーク(1枚目)サイズ。旧インライン height の置き換え */
.footer7_logo-link .footer7_logo:first-child {
  height: 50px;
  width: auto;
  margin-right: 10px;
}
/* 黒文字ロゴ(logo.png)のみ白抜き。ロゴマーク(logomark.png)はそのまま */
.footer7_logo.is-text { filter: brightness(0) invert(1); }
.footer7_company-info { text-align: center; margin: 20px 0; }

/* ---------- 16. エリアページ ヒーロー(page-area スコープ) ---------- */
.page-area .section_header46 {
  --area-hero-image: url("../images/xs-xue-UP9E6hCEb3Y-unsplash-p-1600.jpg");
  background-image: linear-gradient(rgba(14,42,69,.74), rgba(14,42,69,.74)), var(--area-hero-image);
  background-size: cover;
  background-position: center;
}
/* モバイルは軽量画像に差し替え(白文字はオーバーレイで担保) */
@media screen and (max-width: 767px) {
  .page-area .section_header46 {
    --area-hero-image: url("../images/xs-xue-UP9E6hCEb3Y-unsplash-p-800.jpg");
  }
}
.page-area .section_header46 :is(h1, .heading-style-h1, p, .text-size-medium) {
  color: var(--white);
}
/* エリアページ layout71 見出しのアクセントバー */
.page-area .layout71_content-left .heading-style-h2 { position: relative; }
.page-area .layout71_content-left .heading-style-h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4px;
  margin-top: 1.25rem;
  background-color: var(--teal-600);
  border-radius: 2px;
}

/* ---------- 17. お問い合わせページ ---------- */
.section_contact18 { text-align: center; }
.contact18_grid-list {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0 auto;
}
.contact18_item {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  grid-column: 1 / -1;
}
.contact18_item .heading-style-h4 { color: var(--navy-800); }
.form_frame {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}
.form_frame iframe {
  display: block;
  width: 100%;
  min-width: 300px;
  border-radius: var(--radius-md);
}

/* ---------- 18. ユーティリティページ(404/401) ---------- */
.utility_component {
  min-height: 80vh;
  background-color: var(--bg-mist);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 5%;
}
.utility_form-block {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: 32rem;
}
.utility_form-block h3 { color: var(--navy-800); }

/* ---------- 19. キーボードフォーカス(共通) ---------- */
a:focus-visible,
summary:focus-visible,
.w-nav-link:focus-visible,
.w-dropdown-toggle:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: 2px;
  border-radius: 4px;
}
.band-navy a:focus-visible,
.band-navy-cta a:focus-visible,
.footer7_component a:focus-visible,
.page-area .section_header46 a:focus-visible {
  outline-color: var(--orange-brand);
}

/* ---------- 20. レスポンシブ ---------- */
@media screen and (max-width: 991px) {
  h1, .heading-style-h1 { font-size: 2.5rem; }
  h2, .heading-style-h2 { font-size: 2rem; }
}
@media screen and (max-width: 767px) {
  h1, .heading-style-h1 { font-size: 2.25rem; }
  h2, .heading-style-h2 { font-size: 1.875rem; }
  h3, .heading-style-h3 { font-size: 1.625rem; }
  h4, .heading-style-h4 { font-size: 1.375rem; }
  .pricing18_plan .heading-style-h1 { font-size: 2rem; }
  .layout239_item { padding: 2rem 1.5rem; }
}
@media screen and (max-width: 479px) {
  h1, .heading-style-h1 { font-size: 1.75rem; }
  h2, .heading-style-h2 { font-size: 1.5rem; }
  h3, .heading-style-h3 { font-size: 1.375rem; }
  h5, .heading-style-h5 { font-size: 1.1875rem; }
  .text-size-medium { font-size: 1.0625rem; }
  .flow_step { padding-left: 2rem; }
}

/* ---------- 21. モーション低減 ---------- */
/* 注: 本ファイルは原則 !important 不使用だが、下記はモーション低減の
   定番実装として既存アニメーションを確実に無効化するため意図的に使用。 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .layout300_item:hover,
  .button:hover { transform: none; }
}