/*
Theme Name: Lightning
Text Domain: lightning
Theme URI: https://lightning.vektor-inc.co.jp/en/
Description: Lightning is a very simple & easy to customize theme which is based on the Bootstrap. It is also very friendly with custom post types and custom taxonomies. When you add a new one, the breadcrumbs will be adjusted and posts will look beautifully without editing or adding a template files.
Author: Vektor,Inc.
Author URI: https://www.vektor-inc.co.jp
Version: 15.33.1
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Lightning WordPress theme, Copyright (C) 2015-2026 Vektor,Inc.
Lightning WordPress theme is licensed under the GPL.

Lightning WordPress Theme bundles the following third-party resources:

Font Awesome icon font, Copyright 2012 Fonticons, Inc.
its fonts are licensed under the terms of the SIL OFL License 1.1, and its code is licensed under the terms of the MIT license
Source: https://fontawesome.com/

Bootstrap framework, Copyright 2011 Bootstrap Authors and Twitter, Inc.
Bootstrap is licensed under the terms of the MIT license
Source: https://getbootstrap.com/

CSS Simple Tree Shaking
CSS Simple Tree Shaking is licensed under the terms of the GNU General Public License v2 license
Source: https://celtislab.net/
*/

/* ==========================================================================
   お部屋ギャラリー（一覧ページ）用デザイン
   ========================================================================== */

/* タブメニュー全体のデザイン */
.tab-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    cursor: pointer;
    border-bottom: 2px solid #66ccff;
}
.tab-nav li {
    padding: 10px 30px;
    background: #eee;
    color: #333;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
    transition: 0.3s;
}
.tab-nav li.active {
    background: #66ccff !important;
    color: #fff !important;
}

/* 部屋一覧のグリッド */
.room-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.room-item {
    width: calc(25% - 15px); /* 4列表示 */
    text-align: center;
    margin-bottom: 20px;
}
.room-item-inner {
    border: 1px solid #ddd;
    padding: 5px;
    background: #fff;
    transition: 0.3s;
}
.room-item-inner:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.room-item p {
    margin-top: 10px;
    font-weight: bold;
}

/* 料金案内エリア */
.price-info {
    margin-top: 40px;
    padding: 20px;
    border: 2px solid #66ccff;
    border-radius: 10px;
}
.block2 {
    margin-top: 10px;
}
/* ==========================================================================
   お部屋詳細スライダーのデザイン（PC・スマホ共通）
   ========================================================================== */
/* 1. 全体の余白をなくして写真を大きく見せる */
.room-slider-wrapper {
    position: relative;
    padding: 0 !important;
    margin: 0 auto 30px auto !important;
    width: 100% !important;
    overflow: hidden;
}

/* 2. 矢印の共通設定 */
.slick-prev,
.slick-next {
    z-index: 100; /* 重なり順を最優先 */
    width: 40px !important;
    height: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* デフォルトの背景や枠を消す */
    background: none !important; 
}

/* 3. 左矢印：左端から15pxの位置に固定 */
.slick-prev {
    left: 15px !important;
    right: auto !important;
}
/* 4. 右矢印：右端から15pxの位置に固定（ここがズレの原因になりやすい） */
.slick-next {
    right: 15px !important;
    left: auto !important;
}
/* 5. 矢印の見た目（白くて細い） */
.slick-prev:before,
.slick-next:before {
    font-size: 40px !important;
    color: #ffffff !important;
    opacity: 0.8;
    text-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* ホバー（マウスを乗せた）時に少しハッキリさせる */
.slick-prev:hover:before,
.slick-next:hover:before {
    opacity: 1;
}

/* 6. ドット（点々）も写真の横幅に合わせて中央へ */
.slick-dots {
    width: 100% !important;
    left: 0 !important;
    bottom: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

.slick-dots li button:before {
    color: #ffffff !important; /* ドットも白に */
    opacity: 0.5;
    font-size: 10px !important;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #ffffff !important;
}

/* 5. 画像自体の調整 */
.room-slider img {
    border: none !important; /* 枠線を消すとスッキリします */
    width: 100%;
    height: auto;
    display: block;
}

/* スマホ用の微調整 */
@media screen and (max-width: 640px) {
/* スライダー本体の余白をなくす */
   .block1 {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
        border: 1px solid #ddd;
    }
    .block1 table {
        min-width: 650px !important;
    }
    .room-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    /* スライダー本体の余白をなくす */
    .room-slider-wrapper {
        padding: 0 !important;
        margin-bottom: 20px !important;
    }

    /* 矢印を少し小さくし、端に寄せる */
    .slick-prev:before,
    .slick-next:before {
        font-size: 30px !important; /* 少し小さく */
    }

    .slick-prev {
        left: 5px !important; /* 端から5pxの位置へ */
    }

    .slick-next {
        right: 5px !important; /* 端から5pxの位置へ */
    }

    /* ドットの位置を少し下に調整（写真に被りすぎないよう） */
    .slick-dots {
        bottom: 10px !important;
    }
}

/* お部屋詳細：特徴・設備エリア */
.room-features-box {
    background: #f9f9f9;
    padding: 20px;
    border-left: 5px solid #66ccff;
    margin-bottom: 20px;
}

.room-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.room-spec-table th {
    width: 30%;
    padding: 15px;
    background: #eee;
    border: 1px solid #ddd;
    text-align: left;
}

.room-spec-table td {
    padding: 15px;
    border: 1px solid #ddd;
}

/* スマホの時は表の横幅比率を変える */
@media screen and (max-width: 640px) {
    .room-spec-table th {
        width: 40%;
        padding: 10px;
        font-size: 13px;
    }
    .room-spec-table td {
        padding: 10px;
        font-size: 13px;
    }
}