@charset "Shift_JIS";

/* =============================================================
   Target: 30s Women - Calm & Elegant Pastel Theme
   Encoding: Shift_JIS
   ============================================================= */

/* 全体の基本設定 */
* {
    box-sizing: border-box;
    font-size: 15px;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
    line-height: 1.7;
    color: #4f4a45; /* 柔らかいチャコールグレー */
}

body {
    background-color: #fdfaf5; /* 非常に淡いベージュ（温かみ） */
    margin: 0;
    padding: 0;
    text-align: center;
}

/* リンクのデザイン */
a {
    color: #a67c52; /* 落ち着いたゴールド系ブラウン */
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: #d4a373;
    text-decoration: underline;
}

/* レイアウトコンテナ */
#container {
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    padding: 20px;
}

/* ヘッダー・エリア情報 */
#map-header {
    width: 100% !important;
    max-width: 800px;
    background-color: #f2ece9 !important; /* グレージュ */
    border: none !important;
    border-radius: 8px;
    padding: 20px;
    margin: 20px auto !important;
}

.map-title {
    font-size: 22px;
    font-weight: bold;
    color: #6d5d5d;
}

/* テーブル共通設定 */
.station-table, .image-table, .search-items, .company-station-table {
    width: 100% !important;
    max-width: 800px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e0d6d0 !important;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px auto !important;
}

/* テーブルの見出し */
.station-table th, .search-items td.search-title, .image-table td.yachin {
    background-color: #f7ede2 !important; /* 落ち着いたパステルピンクベージュ */
    color: #8c7878 !important;
    padding: 12px;
    border: 1px solid #e0d6d0 !important;
    font-weight: bold;
}

/* テーブルのセル */
.station-table td, .image-table td, .search-items td {
    background-color: #ffffff !important;
    padding: 12px;
    border: 1px solid #f0e9e5 !important;
    vertical-align: middle;
}

/* 家賃・更新情報の強調表示 */
span.yachin, .update-time, span.red {
    color: #c97c7c !important; /* くすみレッド（大人っぽいアクセント） */
    font-weight: bold;
    font-size: 1.1em;
}

/* ボタン（検索など） */
input[type="submit"], .search-items td.search-button {
    background-color: #a67c52 !important;
    color: #ffffff !important;
    border-radius: 4px;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
}

/* =============================================================
   レスポンシブデザイン (Mobile Layout)
   ============================================================= */
@media screen and (max-width: 768px) {
    #container {
        padding: 10px;
    }

    /* テーブルを縦並びに変換 */
    .station-table, .station-table tbody, .station-table tr, .station-table td, .station-table th,
    .image-table, .image-table tbody, .image-table tr, .image-table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* 画像のレスポンシブ対応 */
    img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 4px;
    }

    /* スマホ時は見出しを目立たせる */
    .station-table th {
        background-color: #f2ece9 !important;
    }
    
    .image-table td.odd-img {
        text-align: center !important;
    }
}

/* スマホ向けの表示設定（画面幅768px以下の場合） */
@media screen and (max-width: 768px) {
  
  /* テーブルの各要素をブロック要素に変更して縦に並べる */
  table, tbody, tr, td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ヘッダー（項目名）を非表示にする */
  thead {
    display: none;
  }

  /* 2つのtrをひとくくり（カード）に見せるための調整 */
  /* 物件ごとの区切りを分かりやすくする */
  tr:nth-of-type(2n+1) {
    border-top: 2px solid #ddd; /* カードの上の境界線 */
    padding-top: 10px;
    background-color: #f9f9f9; /* 少し背景色をつけてカード感を出す */
  }

  tr:nth-of-type(2n) {
    border-bottom: 2px solid #ddd; /* カードの下の境界線 */
    margin-bottom: 20px; /* カード同士の隙間 */
    padding-bottom: 10px;
    background-color: #f9f9f9;
  }

  /* 各セルのレイアウト調整 */
  td {
    border: none !important;
    padding: 5px 10px !important;
    text-align: left !important;
  }

  /* 価格を強調する */
  .yachin {
    font-size: 1.2rem;
    font-weight: bold;
    color: #d9534f;
  }

  /* 写真やアイコンのサイズを調整 */
  td img {
    max-width: 100%;
    height: auto;
  }

  /* 2行目の詳細テキスト部分を読みやすく */
  td.leftodd[colspan="4"] {
    font-size: 0.9rem;
    line-height: 1.5;
    border-top: 1px dotted #ccc !important;
    margin-top: 5px;
  }

  /* 詳細ページへのボタン画像などを右寄せにするなど */
  td[rowspan="2"] {
    text-align: right !important;
  }
}

/* フッター全体のコンテナ */
#footer_s {
  width: 100%;
  background-color: #f8f8f8;
  padding: 30px 15px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* 会社情報の親要素をFlexboxに変更 */
#company_imfomation {
  display: flex;
  flex-wrap: wrap; /* 画面が狭い時に折り返す */
  justify-content: center;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* 左右のリストの float を解除 */
.position_float_left, 
.position_float_right {
  float: none !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 会社名のスタイル */
.position_float_right .title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 2px solid #0055aa; /* アクセントのライン */
  display: inline-block;
}

/* 定義リスト（dl/dt/dd）の整形 */
#company_imfomation dl {
  display: flex;
  margin: 5px 0;
}

#company_imfomation dt {
  width: 85px; /* ラベルの幅を固定して揃える */
  font-weight: bold;
  flex-shrink: 0;
}

#company_imfomation dd {
  margin: 0;
  flex-grow: 1;
}

/* フッターリンクエリア */
#area_footerlink {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

#area_footerlink a {
  color: #0055aa;
  text-decoration: none;
  margin: 0 5px;
}

/* 最下部コピーライト */
#area_bottom {
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
  color: #666;
}

/* --- スマホ向けの微調整 --- */
@media screen and (max-width: 600px) {
  #company_imfomation {
    flex-direction: column; /* 縦並びにする */
    align-items: center;
  }

  #company_imfomation dl {
    flex-direction: column; /* 住所やTELも縦に並べて読みやすく */
    margin-bottom: 10px;
  }

  #company_imfomation dt {
    width: 100%;
  }
}

/* font color="red" と指定されている箇所をCSSで強制的に強化 */
font[color="red"], 
font[color="#ff0000"] {
    display: inline-block;
    font-weight: bold !important;
    line-height: 1.6;
    /* 必要であればここで文字サイズなども調整可能 */
    /* font-size: 1.1em; */
}

/* その中にあるリンクの色も強制的に赤にする */
font[color="red"] a,
font[color="#ff0000"] a {
    color: #ff0000 !important;
    text-decoration: underline !important;
    font-weight: bold;
}

/* fontタグのcolor属性がredに設定されている箇所を強制的に赤く太くする */
font[color="red"], 
font[color="#ff0000"] {
    color: #ff0000 !important;   /* 強制的に赤にする */
    font-weight: bold !important; /* 強制的に太字にする */
}

/* その中にあるリンク（こちら）も強制的に赤にする */
font[color="red"] a, 
font[color="#ff0000"] a {
    color: #ff0000 !important;
    text-decoration: underline !important;
}

/* 駅別一覧の物件詳細コメントエリアを左揃えにする */
td.im_l, 
td div[style*="text-align: center"],
#wrapper table td {
    text-align: left !important;
    vertical-align: top;
    padding: 10px;
}

/* もし特定のコメント部分だけを狙い撃ちしたい場合 */
font[size="2"] {
    display: block;
    text-align: left !important;
    max-width: 600px; /* 横に広がりすぎないように調整 */
    margin: 5px 0;
}

/* --- 物件画像に動きをつける --- */
/* 画像の親要素をはみ出し禁止にする */
td img {
    transition: transform 0.3s ease; /* 0.3秒かけてゆっくり動かす */
}

/* マウスを乗せた時に少し大きくする */
td img:hover {
    transform: scale(1.1); /* 1.1倍に拡大 */
    z-index: 10;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 影をつけて浮き上がらせる */
}

/* --- リンクボタンやテキストに動きをつける --- */
a:hover {
    transition: all 0.3s ease;
    opacity: 0.8; /* 少し透明にする */
    text-decoration: none;
}

/* 枠線があるボタンなどの場合、少し浮かせる */
.together_inquiry a:hover, 
.together_hope a:hover,
.btn-common:hover {
    transform: translateY(-2px); /* 2px上に浮かせる */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 影を強くする */
}