/* Google Fonts読み込み */
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');

/* Yomogiフォント直接指定 */
.company-intro p {
  font-family: 'Yomogi', cursive;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: #5d4e3a;
}

.greeting-content p {
  font-family: 'Yomogi', cursive;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: #5d4e3a;
}

/* ヒーロー見出しのフォント色修正 */
.hero-content h1 {
  color: white;
}

/* CSS変数定義 */
:root {
  /* カラーパレット */
  --primary-color: #8b5a2b;
  --secondary-color: #d4956b;
  --accent-green: #6b8e23;
  --accent-orange: #ff9633;
  --text-color: #3d2f1f;
  --bg-color: #f7f3ed;
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  
  /* レイアウト変数 */
  --header-height: 120px;
  --header-height-mobile: 80px;
  --nav-position-mobile: 74px;
  --section-padding: 4rem 0;
  --section-padding-mobile: 2rem 0;
  --container-max-width: 1200px;
  --container-padding: 0 2rem;
  --container-padding-mobile: 0 1rem;
  
  /* スペーシング変数 */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 3rem;     /* 48px */
  --spacing-xxl: 4rem;    /* 64px */
  --spacing-xxxl: 6rem;   /* 96px */
  
  /* === ボーダー・角丸 === */
  --border-radius-sm: 6px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 15px;
  --border-radius-full: 50%;
  --border-width: 1px;
  --border-width-thick: 2px;
  
  /* === シャドウ === */
  --box-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  --box-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --box-shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
  --box-shadow-xl: 0 15px 35px rgba(0,0,0,0.2);
  
  /* === トランジション === */
  --transition-fast: all 0.15s ease;
  --transition: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  
  /* === フォント === */
  --font-main: 'Hiragino Kaku Gothic Pro', sans-serif;
  --font-accent: 'Yomogi', cursive;
  --font-mono: 'Courier New', monospace;

  /* === フォントサイズ === */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-5xl: 3rem;     /* 48px */
  
  /* === フォントウェイト === */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* === 行間 === */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* === Z-index === */
  --z-dropdown: 1000;
  --z-header: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 2000;
  --z-popover: 1060;
  --z-tooltip: 3000;
  
  /* === グリッド === */
  --grid-gap: 1.5rem;
  --grid-gap-sm: 1rem;
  --grid-gap-lg: 2rem;
}

/* リセットCSS */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-color);
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 見出し要素 */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-color);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

/* 段落 */
p {
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-relaxed);
}

/* リンク */
a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  text-decoration: underline;
}

/* 画像 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リスト */
ul, ol {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-lg);
}

li {
  margin-bottom: var(--spacing-xs);
}

/* テーブル */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-sm);
}

th, td {
  padding: var(--spacing-sm);
  text-align: left;
  border-bottom: var(--border-width) solid var(--gray-200);
}

th {
  font-weight: var(--font-weight-semibold);
  background-color: var(--gray-100);
}

/* フォーム要素 */
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ===========================
   LAYOUT.CSS統合部分（統合後）
   ===========================
   以下は元layout.cssの内容を統合
   ========================== */

/* === ヘッダー上部（連絡先情報） === */
.header-top {
  background: rgba(61, 47, 31, 0.2);
  padding: 0.1rem 0;
  font-size: var(--font-size-xs);
}

.header-top-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--container-padding);
  display: flex;
  justify-content: flex-end;
}

.contact-info {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.contact-info span {
  color: var(--white);
  font-weight: var(--font-weight-medium);
}

.phone {
  color: var(--white);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: var(--transition);
  padding: 0.15rem 0.4rem;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

.phone:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  text-decoration: none;
}

/* === メインヘッダー === */
.header {
  background: var(--primary-color);
  padding: 0.1rem 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-fixed);
  box-shadow: var(--box-shadow-md);
}

.header-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--container-padding);
  position: relative;
  min-height: 50px;
}

/* === ロゴ === */
.logo {
  color: var(--white);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition: var(--transition);
}

.logo:hover {
  color: var(--bg-color);
  text-decoration: none;
}

.logo-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-full);
  background-color: var(--accent-orange);
  box-shadow: 0 2px 8px rgba(255, 150, 51, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.logo-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.company-name {
  height: 100px;
  max-height: 100px;
}

.company-name img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* === ナビゲーション === */
.nav {
  display: flex;
  gap: var(--spacing-lg);
  transition: var(--transition);
}

.nav a {
  color: var(--white);
  text-decoration: none;
  transition: var(--transition);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
}

.nav a::before {
  content: '';
  width: 30px;
  height: 30px;
  background-image: url('../images/ieicon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  opacity: 0.9;
  transition: var(--transition);
}

.nav a:hover {
  color: var(--bg-color);
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.nav a:hover::before {
  opacity: 1;
  filter: brightness(1.1);
}

/* === モバイルメニューボタン === */
.mobile-menu {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: var(--font-size-3xl);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-sm);
  transition: var(--transition);
  line-height: 1;
  z-index: calc(var(--z-fixed) + 1);
}

.mobile-menu:hover {
  background: rgba(255,255,255,0.2);
}

/* === メインコンテンツ === */
.main-content {
  margin-top: var(--header-height);
}

/* === 基本レイアウト === */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--container-padding);
}

/* === 全ページ統一セクション余白設定（修正追加） === */
.main-content .section {
  padding-top: var(--spacing-lg);    /* 4rem = 64px */
  padding-bottom: var(--spacing-lg);  /* 2rem = 32px */
  margin-top: 0;
  margin-bottom: 0;
}

/* === セクションタイトル === */
.section-title {
  text-align: center;
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-xl);
  color: var(--primary-color);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-weight: var(--font-weight-bold);
}

.section-title::before {
  content: '';
  width: 60px;
  height: 60px;
  background-image: url('../images/ieicon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 3px;
  background: var(--secondary-color);
  border-radius: var(--border-radius-sm);
}

/* === フッター === */
.footer {
  background: var(--primary-color);
  color: var(--white);
  padding: var(--spacing-xl) 0 var(--spacing-sm);
}

.footer-content {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--container-padding);
  text-align: center;
}

.footer-company {
  margin-bottom: var(--spacing-sm);
}

.footer-company h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xs);
  color: var(--bg-color);
  font-weight: var(--font-weight-bold);
}

.footer-company p {
  margin-bottom: 0.3rem;
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.9);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  border-top: 1px solid var(--secondary-color);
  font-size: var(--font-size-sm);
}

.footer-bottom a {
  color: var(--bg-color);
  margin-top: var(--spacing-xs);
  display: inline-block;
  transition: var(--transition);
}

.footer-bottom a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* === パンくずナビゲーション === */
.breadcrumb-section {
  background: var(--gray-100);
  padding: var(--spacing-sm) 0;
  border-bottom: var(--border-width) solid var(--gray-200);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.breadcrumb a {
  color: var(--gray-600);
  text-decoration: none;
  transition: var(--transition);
}

.breadcrumb a:hover {
  color: var(--gray-700);
  text-decoration: underline;
}

.breadcrumb .separator {
  color: var(--gray-400);
}

/* ===========================
   LAYOUT.CSS統合部分終了
   ===========================
   以下は元base.cssの内容続行
   ========================== */

/* === ボタンコンポーネント === */
.btn {
  display: inline-block;
  color: #ffffff;
  font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", sans-serif;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 15px;
  position: relative;
  background: rgb(212, 149, 107);
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 30px;
  transition: all 0.3s ease;
  text-align: center;
  cursor: pointer;
  border: none;
  outline: none;
}

.btn:hover {
  text-decoration: none;
  color: #ffffff;
  background: rgb(190, 125, 85);
  transform: translateY(-1px);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 20px;
}

.btn:focus {
  outline: none;
  text-decoration: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 15px, 0 0 0 3px rgba(212, 149, 107, 0.3);
}

.btn:active {
  transform: translateY(0);
  text-decoration: none;
}

.btn:visited {
  color: #ffffff;
  text-decoration: none;
}

.btn:link {
  text-decoration: none;
}

/* プライマリボタン */
.btn-primary {
  background: rgb(212, 149, 107);
  color: #ffffff;
}

.btn-primary:hover {
  background: rgb(190, 125, 85);
  color: #ffffff;
}

/* セカンダリボタン */
.btn-secondary {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-secondary:hover {
  background: #c5895f;
  border-color: #c5895f;
  color: var(--white);
}

/* アウトラインボタン */
.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline:hover {
  background: var(--primary-color);
  color: var(--white);
}

/* 小さいボタン */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* 大きいボタン */
.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

/* 全幅ボタン */
.btn-block {
  width: 100%;
  display: block;
}

/* ===========================
   統一バッジシステム（完全版）
   ========================== */

/* 基本バッジスタイル */
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: white;
  line-height: 1;
  white-space: nowrap;
  margin: 8px;
}

/* 新着バッジ */
.badge.new {
  background: #dc3545;
}

/* 駐車場バッジ */
.badge.parking {
  background: #28a745;
}

/* 日付バッジ */
.badge.date {
  background: var(--primary-color);
}

/* ===========================
   取引種別バッジ（完全版）
   ========================== */

.badge.transaction.売買 { 
  background: #6b8e23; 
  color: white; 
}

.badge.transaction.賃貸 { 
  background: #ff9633; 
  color: white; 
}

.badge.transaction.管理 { 
  background: #8b5a2b; 
  color: white; 
}

.badge.transaction.その他 { 
  background: #7ba428; 
  color: white; 
}

/* ===========================
   物件種別バッジ（日本語class名完全対応）
   ========================== */

/* 売買物件種別 */
.badge.type.マンション { background: #6366f1; color: white; }
.badge.type.一戸建て { background: #10b981; color: white; }
.badge.type.土地 { background: #f59e0b; color: white; }
.badge.type.投資物件 { background: #003366; color: white; }
.badge.type.収益物件 { background: #003366; color: white; }
.badge.type.倉庫 { background: #795548; color: white; }  /* 茶系 */

/* 賃貸物件種別 */
.badge.type.アパート { background: #8b5cf6; color: white; }
.badge.type.店舗 { background: #06b6d4; color: white; }
.badge.type.駐車場 { background: #6c757d; color: white; }

/* 英語class名版（フォールバック用） */
.badge.type.mansion { background: #6366f1; color: white; }
.badge.type.house { background: #10b981; color: white; }
.badge.type.land { background: #f59e0b; color: white; }
.badge.type.investment { background: #003366; color: white; }
.badge.type.apartment { background: #8b5cf6; color: white; }
.badge.type.store { background: #06b6d4; color: white; }
.badge.type.parking-type { background: #6c757d; color: white; }
.badge.type.warehouse { background: #795548; color: white; }  /* 英語版フォールバック */


/* ===========================
   ニュースバッジ（カテゴリー別）
   ========================== */

.badge.news.お知らせ {
    background: #7ba428;
    color: white;
}

.badge.news.つぶやき {
    background: var(--accent-orange);
    color: white;
}

.badge.news.賃貸 {
    background: var(--accent-orange);
    color: white;
}

.badge.news.売買 {
    background: var(--accent-green);
    color: white;
}

.badge.news.管理 {
    background: var(--primary-color);
    color: white;
}

/* === グリッドシステム === */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* === Flexboxユーティリティ === */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* === テキストユーティリティ === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* フォントサイズ */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

/* 色 */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-white { color: var(--white); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-white { background-color: var(--white); }
.bg-gray-100 { background-color: var(--gray-100); }

/* === スペーシングユーティリティ === */
/* マージン */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }
.m-auto { margin: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--spacing-xs); }
.ml-2 { margin-left: var(--spacing-sm); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--spacing-xs); }
.mr-2 { margin-right: var(--spacing-sm); }
.mr-auto { margin-right: auto; }

/* パディング */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-xs); }
.pt-2 { padding-top: var(--spacing-sm); }
.pt-3 { padding-top: var(--spacing-md); }
.pt-4 { padding-top: var(--spacing-lg); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-xs); }
.pb-2 { padding-bottom: var(--spacing-sm); }
.pb-3 { padding-bottom: var(--spacing-md); }
.pb-4 { padding-bottom: var(--spacing-lg); }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: var(--spacing-xs); }
.pl-2 { padding-left: var(--spacing-sm); }
.pl-3 { padding-left: var(--spacing-md); }
.pl-4 { padding-left: var(--spacing-lg); }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: var(--spacing-xs); }
.pr-2 { padding-right: var(--spacing-sm); }
.pr-3 { padding-right: var(--spacing-md); }
.pr-4 { padding-right: var(--spacing-lg); }

/* === 表示・非表示 === */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* === 位置 === */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* === 幅・高さ === */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }

/* === 共通アニメーション === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-slideInUp {
  animation: slideInUp 0.6s ease-out;
}

.animate-bounce {
  animation: bounce 1s infinite;
}