@charset "utf-8";

/* --- 基本設計 --- */
:root { 
    --mw-black: #222; 
    --mw-gray-text: #444;
    --mw-light-text: #666;
    --mw-border: #e0e0e0; 
    --mw-bg-gray: #f8f8f8; 
    --mw-font-size-base: 15px; 
}

/* --- パンくずリスト --- */
.mw-breadcrumb {
    background: #fff;
    padding: 15px 20px;
}
.mw-breadcrumb-inner {
    max-width: 1100px;
    margin: 0 auto;
    font-size: 11px;
    color: var(--mw-light-text);
    letter-spacing: 0.05em;
}
.mw-breadcrumb-inner a {
    color: var(--mw-light-text);
    text-decoration: none;
    transition: color 0.3s;
}
.mw-breadcrumb-inner a:hover {
    color: var(--mw-black);
}
.mw-breadcrumb-inner span {
    margin: 0 8px;
    font-size: 9px;
    color: #ccc;
}
.mw-breadcrumb-inner strong {
    font-weight: normal;
    color: var(--mw-black);
}

/* --- スライダー --- */
.mw-shop-visual-slider { width: 100%; aspect-ratio: 21 / 9; position: relative; overflow: hidden; background: #f5f5f5; }
.mw-slider-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.mw-slider-item.active { opacity: 1; z-index: 1; }

/* --- コンテナ --- */
.mw-shop-container { max-width: 1100px; margin: 0 auto; padding: 40px 20px; color: var(--mw-black); font-size: var(--mw-font-size-base); }

/* --- ヘッダー --- */
.mw-shop-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 60px; }
.mw-shop-header h1 { font-size: 28px; font-weight: bold; letter-spacing: 0.05em; margin: 0; line-height: 1.2; }
.mw-btn-instagram { display: flex; align-items: center; text-decoration: none; color: var(--mw-black); transition: opacity 0.3s; position: relative; top: -1px; }
.mw-btn-instagram:hover { opacity: 0.6; }
.mw-instagram-logo-img { width: 18px; height: 18px; object-fit: contain; margin-right: 8px; }
.mw-sns-account { font-size: 13px; font-weight: bold; letter-spacing: 0.05em; }

/* --- 情報カラム --- */
.mw-content-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 100px; margin-bottom: 80px; }
.mw-info-section { margin-bottom: 25px; border-left: 1px solid var(--mw-border); padding-left: 20px; background: transparent; }
.mw-info-section h2 { font-size: 14px; font-weight: bold; margin-bottom: 10px; color: var(--mw-light-text); letter-spacing: 0.1em; background: none; padding: 0; }
.mw-info-section p { font-size: 15px; line-height: 1.8; margin-bottom: 3px; color: var(--mw-gray-text); }
.mw-info-section a { color: var(--mw-gray-text); text-underline-offset: 4px; }
.mw-map-area { margin-top: 15px; border: 1px solid var(--mw-border); line-height: 0; overflow: hidden; }

/* 注釈span */
.mw-info-section p span { display: block; font-size: 12px; color: var(--mw-light-text); margin-top: 2px; letter-spacing: 0.02em; }
.mw-info-section p > a + span { display: inline-block; margin-left: 0.5em; margin-top: 0; }

/* --- SHOP FEATURES --- */
.mw-shop-features { margin-bottom: 80px; clear: both; }
.mw-shop-features h2 { font-size: 16px; font-weight: bold; margin-bottom: 30px; text-align: center; letter-spacing: 0.1em; }
.mw-feature-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 30px; }
.mw-feature-item { border: 1px solid var(--mw-border); display: flex; flex-direction: column; background: #fff; text-decoration: none; color: inherit; transition: opacity 0.3s ease; }
.mw-feature-item:hover { opacity: 0.8; }
.mw-feature-img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #eee; line-height: 0; }
.mw-feature-img img { width: 100%; height: 100%; object-fit: cover; }
.mw-feature-detail { padding: 25px; flex-grow: 1; }
.mw-feature-title { font-size: 15px; font-weight: bold; margin-bottom: 10px; display: flex; align-items: center; color: var(--mw-black); }
.mw-feature-title::before { content: ""; display: inline-block; width: 12px; height: 1px; background: var(--mw-black); margin-right: 10px; }
.mw-feature-detail p { font-size: 13px; color: var(--mw-light-text); line-height: 1.7; }

/* --- アクションカード --- */
.mw-action-area { margin-bottom: 60px; }
.mw-action-box { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.mw-action-card { background: var(--mw-bg-gray); padding: 45px 25px; text-align: center; display: flex; flex-direction: column; }
.mw-card-label { font-size: 10px; letter-spacing: 0.2em; color: var(--mw-light-text); margin-bottom: 12px; }
.mw-action-card h3 { font-size: 18px; font-weight: bold; margin-bottom: 15px; }
.mw-card-desc { font-size: 13px; line-height: 1.8; color: var(--mw-gray-text); margin-bottom: 25px; min-height: 3.6em; flex-grow: 1; }

/* 来店予約ボタン（黒） */
.mw-btn-action { display: block; background: var(--mw-black); color: #fff; padding: 16px; text-decoration: none; font-size: 14px; font-weight: bold; transition: background-color 0.3s ease, opacity 0.3s ease; border: 1px solid var(--mw-black); }
.mw-btn-action:hover { background-color: #444; opacity: 0.9; }

/* 3Dプランニングボタン（白） */
.mw-btn-action-outline { display: block; background: #fff; color: var(--mw-black); border: 1px solid var(--mw-black); padding: 16px; text-decoration: none; font-size: 14px; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; }
.mw-btn-action-outline:hover { background-color: var(--mw-black); color: #fff; }

/* --- ニュースボタン --- */
.mw-btn-news { display: flex; align-items: center; justify-content: space-between; padding: 25px 35px; border: 1px solid var(--mw-black); text-decoration: none; color: var(--mw-black); transition: 0.3s; margin-bottom: 80px; }
.mw-btn-news:hover { background: #eee; }
.mw-news-label { font-size: 11px; font-weight: bold; letter-spacing: 0.15em; color: var(--mw-light-text); margin-right: 30px; }
.mw-news-text { font-size: 15px; font-weight: bold; flex-grow: 1; }
.mw-news-arrow { width: 35px; height: 1px; background: var(--mw-black); position: relative; }
.mw-news-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--mw-black); border-right: 1px solid var(--mw-black); transform: rotate(45deg); }

/* --- 展示カテゴリ --- */
.mw-exhibit-categories { margin-bottom: 120px; border-top: 1px solid var(--mw-border); padding-top: 60px; }
.mw-exhibit-categories h2 { font-size: 16px; font-weight: bold; margin-bottom: 12px; text-align: center; letter-spacing: 0.1em; }
.mw-exhibit-note { font-size: 12px; color: var(--mw-light-text); text-align: center; margin-bottom: 30px; line-height: 1.6; }
.mw-category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mw-cat-btn { display: flex; align-items: center; justify-content: center; height: 50px; border: 1px solid var(--mw-border); text-decoration: none; color: var(--mw-black); font-size: 13px; background: #fff; transition: 0.2s; }
.mw-cat-btn:hover { border-color: var(--mw-black); background: var(--mw-black); color: #fff; }

/* --- モバイル対応 --- */
@media (max-width: 768px) {
    .mw-breadcrumb { padding: 10px 15px; }
    .mw-shop-container { padding: 30px 15px; }
    .mw-shop-header { flex-direction: column; align-items: flex-start; margin-bottom: 35px; }
    .mw-header-sns { margin-top: 10px; width: 100%; display: flex; justify-content: flex-end; }
    .mw-shop-header h1 { font-size: 22px; }
    .mw-content-wrapper { grid-template-columns: 1fr; gap: 0; margin-bottom: 50px; }
    .mw-info-section { margin-bottom: 25px; padding-left: 15px; border-left: 1px solid var(--mw-border); background: transparent !important; }
    .mw-info-section h2 { background: transparent !important; padding: 0; margin-bottom: 8px; font-size: 13px; }
    .mw-feature-grid { grid-template-columns: 1fr !important; gap: 20px; }
    .mw-action-box { grid-template-columns: 1fr; gap: 15px; }
    .mw-btn-news { padding: 20px; flex-direction: column; align-items: flex-start; }
    .mw-news-label { margin-bottom: 6px; }
    .mw-news-arrow { display: none; }
    .mw-category-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mw-cat-btn { height: 45px; font-size: 12px; }
    .mw-shop-visual-slider { aspect-ratio: 4 / 3; }
}