/* floorguide.css */

.floor-guide {
    margin-bottom: 40px;
}

/* クイックナビゲーション */
.quick-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.quick-nav-item {
    padding: 10px 15px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    margin: 5px;
    transition: all 0.3s ease;
}

.quick-nav-item:hover, .quick-nav-item.active {
    background-color: #010167;
    color: #fff;
}

/* フロア詳細 */
.floor-details {
    margin-top: 20px;
}

.floor-detail {
    display: none;
    animation: fadeIn 0.5s ease;
}

.floor-detail h4 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}

.floor-map {
    height: auto;
    margin: 0 auto 20px;
    display: block;
}

.floor-detail ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.floor-detail li {
    width: 48%;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    font-size: inherit;
    /* 親要素から継承したサイズを使用 */
}

/* テキストの位置を微調整する場合は以下を追加 */
.floor-detail li> :not(.icon-maru):not(.number-icon) {
    display: inline-block;
    vertical-align: middle;
}

.floor-detail li span:first-child {
    margin-right: 10px;
    font-size: 1.2em;
}

/* アイコンの共通スタイル */
[class^="icon-"]:not(.icon-maru)::before {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 20px;
    margin-right: 5px;
    vertical-align: middle;
}

.indent [class^="icon-"],
.indent [class^="icon-"]::before{
    text-indent: 0;
}

[class^="icon-"]:not(.icon-maru)::before {
    line-height: 1;
}

.icon-maru {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    margin-right: 5px !important;

    vertical-align: middle;

    height: 1em;
    aspect-ratio: 1/1;
}

.icon-maru::before {
    content: "●";
    display: inline;
    margin: 0;
    width: auto;
    height: auto;
    color: #000098;
    font-size: 10px;
}

/* 個別のアイコンスタイル */
.icon-surgery::before { content: "🏥";}
.icon-icu::before { content: "🚑";}
.icon-staff::before { content: "👨‍⚕️";}
.icon-restaurant::before { content: "🍽️";}
.icon-shop::before { content: "🛒";}
.icon-reception::before { content: "📋";}
.icon-xray::before { content: "📷";}
.icon-atm::before { content: "💳";}
.icon-post::before { content: "📮";}
.icon-me::before { content: "🔧";}
.icon-outpatient::before { content: "👁️";}
.icon-chemo::before { content: "💉";}
.icon-diabetes::before { content: "🍬";}
.icon-dialysis::before { content: "🩸";}
.icon-rehab::before { content: "🦽";}
.icon-clinical-trial::before { content: "🧪";}
.icon-lecture::before { content: "🎤";}
.icon-treatment::before { content: "💊";}
.icon-explanation::before { content: "💬";}
.icon-exam::before { content: "🔬";}
.icon-endoscopy::before { content: "🔎";}
.icon-library::before { content: "📚";}
.icon-info::before { content: "ℹ️";}
.icon-machine::before { content: "🖥️";}
.icon-payment::before { content: "💰";}
.icon-consultation::before { content: "🤝";}
.icon-pharmacy::before { content: "💊";}
.icon-emergency::before { content: "🚨";}
.icon-support::before { content: "🤲";}
.icon-cafe::before { content: "☕";}
.icon-tv::before { content: "📺";}
.icon-phone::before { content: "📞";} /* 電話 */
.icon-location::before { content: "📍";}
.icon-place::before { content: "🏞️";}
.icon-ring:before { content: "💍"; } /* 指輪のアイコン */
.icon-wig:before { content: "💇"; } /* 髪型のアイコン */
.icon-wig:before { content: "👤🧢"; } /* 人の顔と帽子 */
.icon-wig:before { content: "🧑‍🦰"; } /* 人 */
.icon-wig:before { content: "👱"; } /* 人 */
.icon-no-smoking:before { content: "🚭"; } /* 禁煙アイコン */
.icon-wheelchair::before { content: "♿"; } /* 車椅子アクセス */
.icon-stethoscope::before { content: "🩺"; } /* 聴診器 */
.icon-dna::before { content: "🧬"; } /* DNA（遺伝子検査） */
.icon-bandage::before { content: "🩹"; } /* 絆創膏 */
.icon-thermometer::before { content: "🌡️"; } /* 体温計 */
.icon-mask::before { content: "😷"; } /* マスク */
.icon-sanitizer::before { content: "🧴"; } /* 消毒液 */
.icon-bone::before { content: "🦴"; } /* 整形外科 */
.icon-brain::before { content: "🧠"; } /* 神経科 */
.icon-tooth::before { content: "🦷"; } /* 歯科 */
.icon-ear::before { content: "👂"; } /* 耳鼻科 */
.icon-baby::before { content: "👶"; } /* 小児科 */
.icon-pregnant::before { content: "🤰"; } /* 産婦人科 */
.icon-heart::before { content: "❤️"; } /* ハート */
.icon-manicure:before { content: "💅"; }/* マニキュア */
.icon-nail-care:before { content: "💅✨"; }/* ネイルケア */
.icon-watch:before { content: "⌚"; }/* 腕時計*/
.icon-fire:before { content: "🔥"; } /* 火 */
.icon-glasses:before { content: "👓"; } /* 眼鏡 */
.icon-hearingaid:before { content: "🦻"; } /* 補聴器 */
.icon-lipstick:before { content: "💄"; } /* 口紅 */
.icon-redhair:before { content: "🦰"; } /* 口紅 */

/* ナンバーアイコン */
.number-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background-color: #000080;
    color: white;
    font-size: 14px !important;
    margin-right: 4px;
    margin-left: 8px;
    box-sizing: border-box;
    border-radius: 2px;
    vertical-align: middle;
    text-align: center;
}

/* .number-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    min-width: 24px;
    background-color: #000080;
    color: white;
    font-size: 14px !important; 
    margin-right: 4px;
    margin-left: 4px;
    line-height: 20px;
    padding: 0px 1px;
    box-sizing: border-box;
    border-radius: 2px;
    vertical-align: middle; 
}*/


.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    margin-left: auto;
}

.tooltip::after {
    content: "📍";
    display: inline-block;
    width: 16px;
    height: 16px;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    word-wrap: break-word;
    white-space: normal;
    font-size: 14px;
    white-space: pre-wrap;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    white-space: pre-wrap;
}

.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* アニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* フロア詳細テーブル */
.floor-detail-table {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    margin-top: 20px;
}

.floor-detail-table .left_circle {
    padding-left: 5px !important;
}

.floor-detail-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.floor-detail-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* 3列テーブル */
.three-column-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    width: 100%;
    align-items: stretch;
}

.three-column-layout .column {
    min-width: 0;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.three-column-layout .column ul {
    padding-left: 10px;
    margin: 0;
    list-style-position: outside;
}

.three-column-layout .column li {
    width: 100% !important;
    margin-bottom: 5px;
    display: list-item !important;
}

.floor-detail .three-column-layout ul {
    display: block;
}

.floor-detail .three-column-layout li {
    width: 100%;
}

.beginning_line_circle {
    margin: 0;
    padding: 0 15px;
    list-style-type: none;
    flex-grow: 1;
}

.beginning_line_circle>li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}

.beginning_line_circle>li:before {
    background-color: #000098;
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    position: absolute;
    top: 0.6em;
    left: 0;
    transform: translateY(-50%);
}

.beginning_line_circle>li.br_wo {
    overflow-wrap: break-word;
}

.beginning_line_circle>li>ul {
    margin-top: 0.5rem;
    padding-left: 1rem;
}

.beginning_line_circle>li>ul>li {
    margin-bottom: 0.25rem;
}

.camera-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Lightbox2の閉じるボタン */
body .lb-closeContainer .lb-close {
    position: absolute;
    top: -40px;
    right: calc(100vw - 100% - 40px);
    display: flex;
    justify-content: center;
    /* 水平方向に中央揃え */
    align-items: center;
    /* 垂直方向に中央揃え */
    width: auto;
    height: auto;
    text-align: center;
    outline: none;
    opacity: 0.7;
    background-image: none !important;
    /* ボタンの初期状態の透明度 */
    transition: opacity 0.2s;
    /* ホバー時のアニメーション */
    background: rgba(255, 255, 255, 0.8);
    /* 半透明の白 */
    border: 1px solid rgba(0, 0, 0, 0.5);
    /* 少し濃いめの枠線 */
    border-radius: 50%;
    z-index: 10001;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.lb-outerContainer .lb-close:hover {
    cursor: pointer;
    opacity: 1;
    text-decoration: none;
}

/* 画像を使用しない場合のスタイル */
.lb-outerContainer .lb-close::before {
    content: "×";
    display: block;
    width: 100%;
    line-height: 1;
    font-size: 32px;
    color: #333333c7;
}

/* Lightboxのコンテナに上部の余白を追加 */
.lb-outerContainer {
    margin-top: 40px;
    display: block;
    height: 100%;
}

/* 画像コンテナの調整 */
.lb-container {
    padding: 4px;
}

/* キャプションのスタイル調整 */
.lb-data .lb-caption {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    padding: 0 4px;
}

/* 画像番号のスタイル調整 */
.lb-data .lb-number {
    font-size: 14px;
    padding: 0 4px;
}

/* Lightboxのタイトルのスタイル */
.lb-dataContainer .lb-caption {
    font-size: 20px;
}

/* レスポンシブスタイル */
@media (min-width: 1024px) {

    .floor-detail-table th,
    .floor-detail-table td {
        padding: 6px 8px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    .floor-detail-table th,
    .floor-detail-table td {
        padding: 4px 6px;
        font-size: 0.9em;
    }
}

@media (max-width: 767px) {
    .floor-detail li {
        width: 100%;
    }

    .three-column-layout {
        display: block;
    }

    .three-column-layout .column {
        margin-top: 0;
        margin-bottom: 0rem;
    }

    .three-column-layout .column>* {
        margin-bottom: 0rem;
    }

    .beginning_line_circle {
        padding: 0;
        margin: 0;
    }

    .beginning_line_circle>li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.5rem;
        position: relative;
        padding-left: 1.5em;
    }

    .beginning_line_circle>li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.6em;
        width: 6px;
        height: 6px;
        background-color: #000098;
        border-radius: 50%;
    }

    .beginning_line_circle>li>span.number-icon {
        margin-left: 5px;
    }

    .beginning_line_circle>li>ul {
        padding-left: 16px;
        margin-top: 5px;
    }

    .three-column-layout .column ul.left_circle {
        padding-left: 0;
    }

    .three-column-layout .column ul.left_circle>li {
        padding-left: 1.5rem;
        position: relative;
        display: flex;
        align-items: center;
        min-height: 1.5em;
    }

    .three-column-layout .column ul.left_circle>li:before {
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .three-column-layout .column li {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }

    .three-column-layout .column li a,
    .three-column-layout .column li span {
        display: inline-block;
        padding: 4px 0;
    }

    .three-column-layout .column li>span.icon-maru,
    .three-column-layout .column li>span.number-icon {
        margin-right: 0.5em;
        align-self: flex-start;
    }

    .three-column-layout .column li>.triangle_circle {
        width: 100%;
        padding-left: 1.5em;
        margin-top: 0.5em;
        box-sizing: border-box;
    }

    .three-column-layout .column li>span.icon-maru+.triangle_circle,
    .three-column-layout .column li>span.number-icon+.triangle_circle {
        padding-left: 0;
    }

    .three-column-layout .column li>span.icon-maru~br,
    .three-column-layout .column li>span.number-icon~br {
        display: none;
    }
}

/*  tooltip  */

.tooltip::after {
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
}

.floor-detail-table th,
.floor-detail-table td {
    padding: 8px 6px;
    white-space: normal;
    font-size: 0.85em;
}

.lb-dataContainer .lb-caption {
    font-size: 16px;
}

.tooltip .tooltip-text {
    width: 150px;
    font-size: 12px;
}

.beginning_line_circle {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.beginning_line_circle>li {
    display: flex;
    align-items: baseline;
    padding-left: 1.5em;
    margin-bottom: 0.5rem;
    position: relative;
}

.beginning_line_circle>li::before {
    content: "";
    position: absolute;
    left: 0.5em;
    top: 0.5em;
    width: 4px;
    height: 4px;
    background-color: #000098;
    border-radius: 50%;
}

.beginning_line_circle>li>* {
    flex: 1;
}

.beginning_line_circle>li>br {
    display: none;
}

.beginning_line_circle>li .number-icon,
.beginning_line_circle>li .icon-place {
    flex: 0 0 auto;
    margin-left: 0.5em;
}


@media (max-width: 480px) {

    .floor-detail-table th,
    .floor-detail-table td {
        font-size: 0.8em;
        padding: 4px;
    }
}

/* プリント用スタイル */
@media print {
    .quick-nav {
        display: none;
    }

    .floor-detail {
        display: block !important;
        page-break-inside: avoid;
    }
}



/* 丸の中に三角があるデザイン */

ol.triangle_circle {
    list-style-type: none;
    /* デフォルトのリストスタイルを無効化 */
    font: 14px/1.6 'arial narrow', sans-serif;
    Padding-left: 24px;
    /*パディング*/
}

ol.triangle_circle li {
    position: relative;
    /* 疑似要素の配置のための相対位置指定 */
    padding: 0 0 0 20px;
    /* 左側にパディングを追加 */
    margin: 7px 0 7px 0px;
    /* 上下にマージンを追加 */

}

ol.triangle_circle li:before {
    counter-increment: list;
    /* リストカウンターをインクリメント */
    content: "";
    /* 空のコンテンツを作成 */
    display: block;
    /* ブロック要素として表示 */
    position: absolute;
    /* 絶対位置指定 */
    left: 0px;
    /* 左端に配置 */
    height: 15px;
    /* 高さ15px */
    width: 15px;
    /* 幅15px */
    border-radius: 50%;
    /* 円形に */
    background: #010167;
    /* 背景色を濃紺に */
    top: 50%;
    /* 上端を中央に */
    -moz-transform: translateY(-50%);
    /* Firefox用 垂直方向中央揃え */
    -webkit-transform: translateY(-50%);
    /* Webkit系ブラウザ用 */
    -o-transform: translateY(-50%);
    /* Opera用 */
    -ms-transform: translateY(-50%);
    /* IE用 */
    transform: translateY(-50%);
    /* 標準構文 垂直方向中央揃え */
}

ol.triangle_circle li:after {
    content: "";
    /* 空のコンテンツを作成 */
    display: block;
    /* ブロック要素として表示 */
    position: absolute;
    /* 絶対位置指定 */
    left: 6px;
    /* 左から6px */
    height: 0;
    /* 高さ0 */
    width: 0;
    /* 幅0 */
    border-top: 4px solid transparent;
    /* 透明な上辺 */
    border-bottom: 4px solid transparent;
    /* 透明な下辺 */
    border-left: 5px solid #fff;
    /* 白色の左辺（三角形を作成） */
    top: 50%;
    /* 上端を中央に */
    -moz-transform: translateY(-50%);
    /* Firefox用 垂直方向中央揃え */
    -webkit-transform: translateY(-50%);
    /* Webkit系ブラウザ用 */
    -o-transform: translateY(-50%);
    /* Opera用 */
    -ms-transform: translateY(-50%);
    /* IE用 */
    transform: translateY(-50%);
    /* 標準構文 垂直方向中央揃え */
}



@media (max-width: 767px) {
    /* 丸の中に三角があるデザイン */

    ol.triangle_circle {
        list-style-type: none;
        /* デフォルトのリストスタイルを無効化 */
        font: 14px/1.6 'arial narrow', sans-serif;
        margin-left: 24px;
    }

    ol.triangle_circle li {
        position: relative;
        /* 疑似要素の配置のための相対位置指定 */
        padding: 0 0 0 20px;
        /* 左側にパディングを追加 */
        margin: 0.5rem 0;
        /* 上下のマージンを調整 */
    }

    /* Lightboxのスタイル調整 */
    .lb-outerContainer {
        position: relative;
    }

    .lb-dataContainer {
        position: absolute;
        bottom: -40px;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px;
    }

    .lb-data .lb-details {
        width: 100%;
        text-align: center;
    }

    .lb-data .lb-caption {
        font-size: 14px;
        line-height: 1.4;
        color: #fff;
    }

    .lb-data .lb-number {
        padding-top: 5px;
        font-size: 12px;
        color: #ddd;
    }


    /* コンテナに余白を追加 */
    .lb-container {
        padding-bottom: 40px;
    }

}