@charset "UTF-8";

/* ==========================================================================
   detail.css - 物件詳細ページ & 怪異演出スタイル
   ========================================================================== */

/* --- 1. 基本設定 --- */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --gray-medium: #666666;
    --gray-light: #f4f4f4;
    --border-color: #e0e0e0;
    --accent-color: #d1561f;
    --font-mincho: 'Shippori Mincho', serif;
    --font-sans: 'Noto Sans JP', sans-serif;
    
    --horror-red: #8b0000;
    --horror-bg: #111111;
    --horror-text: #cccccc;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    transition: background-color 0.5s ease, filter 0.5s ease;
}

/* 詳細ページのコンテナ */
.detail-container { 
    background: #fff; 
    padding: 40px; 
    border: 1px solid #ddd; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    max-width: 900px;
    margin: 0 auto 60px;
}

/* パンくずリスト */
.breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 20px;
    color: var(--gray-medium);
}
.breadcrumb a {
    color: var(--accent-color);
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

/* --- 2. ヘッダー --- */
.detail-header {
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.detail-header .detail-title {
    font-family: var(--font-mincho);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-color);
}
.detail-header .detail-address {
    font-size: 16px;
    color: var(--gray-medium);
}

/* --- 3. 新フォトギャラリー (HOME'S風) --- */
.photo-gallery {
    margin-bottom: 40px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 4px;
}

/* 画像の巨大化を防ぐための枠組み */
.photo-frame {
    width: 100%;
    height: 450px;       /* 高さを450pxに固定 */
    background: #000;    /* 背景を黒に */
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;    /* はみ出しを隠す */
    border: 1px solid #ddd;
}

/* 枠内の画像 */
.photo-frame img {
    max-width: 100%;     /* 幅は枠に合わせる */
    max-height: 100%;    /* 高さも枠に合わせる */
    object-fit: contain; /* 比率を保って収める */
    display: block;
}

.thumb-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.thumb-item {
    width: 100px;
    height: 75px;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: all 0.2s;
    background: #fff;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb-item.active {
    border-color: var(--accent-color);
    opacity: 1;
}

.thumb-item:hover { opacity: 1; }

/* --- 4. 物件情報テーブル --- */
.detail-info { margin-bottom: 40px; border-top: 1px solid #eee; }
.info-row { display: flex; border-bottom: 1px solid #eee; padding: 20px 0; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #eee; }
.info-item { display: flex; padding: 20px 0; }
.label { width: 120px; font-weight: bold; color: #555; flex-shrink: 0; }
.value { flex-grow: 1; }

.price-row .price {
    font-size: 32px;
    color: var(--accent-color);
    font-weight: bold;
    font-family: Arial, sans-serif;
}

/* 設備タグ */
.eq-tag {
    display: inline-block;
    background: #f0f0f0;
    padding: 4px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 13px;
    color: #444;
}

/* --- 5. お問い合わせボタン --- */
.detail-action { text-align: center; margin-top: 40px; }
.contact-btn {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    padding: 18px 60px;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(178, 58, 43, 0.3);
    transition: all 0.3s;
}
.contact-btn:hover {
    background: #9e3326;
    transform: translateY(-2px);
}

/* --- 6. 怪異演出・ハイスイ文字 --- */
.glitch-text { color: red; animation: glitch 0.3s infinite; }
@keyframes glitch { 
    0% { transform: translate(0); } 
    20% { transform: translate(-2px, 2px); } 
    40% { transform: translate(-2px, -2px); } 
    60% { transform: translate(2px, 2px); } 
    80% { transform: translate(2px, -2px); } 
    100% { transform: translate(0); } 
}

/* --- 7. 怪異モード (Infection) --- */
body.hidden-mode { background-color: #e8e4e0; color: #222; }
body.hidden-mode header { border-bottom-color: #222 !important; }
body.hidden-mode .logo-img { mix-blend-mode: multiply; filter: invert(100%) hue-rotate(180deg) contrast(120%); opacity: 0.8; }

body.hidden-mode .photo-frame img, 
body.hidden-mode .thumb-item img { 
    filter: sepia(40%) contrast(110%) brightness(90%) grayscale(20%); 
}
body.hidden-mode .price-row .price { color: var(--horror-red); font-family: 'Courier New', monospace; text-shadow: 1px 1px 0px rgba(0,0,0,0.1); }
body.hidden-mode .contact-btn { background-color: var(--horror-red); color: #000; border: 1px solid #330000; box-shadow: none; font-family: "Courier New", monospace; letter-spacing: 2px; }
body.hidden-mode .contact-btn:hover { background-color: #000; color: #ff0000; border-color: #ff0000; box-shadow: 0 0 15px rgba(255, 0, 0, 0.4); }

/* --- 8. レスポンシブ --- */
@media (max-width: 768px) {
    .detail-container { padding: 20px; }
    .detail-header .detail-title { font-size: 22px; }
    
    /* ギャラリーのレスポンシブ */
    .photo-frame { height: 250px; }
    .thumb-item { width: 70px; height: 52.5px; }
    
    .info-row, .info-item { flex-direction: column; }
    .label { margin-bottom: 5px; color: #888; font-size: 13px; }
    .info-grid { grid-template-columns: 1fr 1fr; }
    .contact-btn { width: 100%; font-size: 16px; }
}