@charset "UTF-8";

/* ヘッダーナビのホバーエフェクト */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0;
    background-color: #3B82F6; transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }


/* =========================================================
   となりの医療 TOP背景
========================================================= */

body {
    background-color: #fffefa;
}

body > main {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            180deg,
            #fffefa 0%,
            #f8fcff 34%,
            #fffefa 62%,
            #f4fbff 100%
        );
}

/* 下部用の背景画像。11〜12をまたいで1枚で表示する */
body > main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1280px;
    z-index: 0;
    pointer-events: none;
    background-image: url("../img/tonarino-bg-warm.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    opacity: 0.78;
}

/* section 基本 */
body > main > section,
body > main > section.bg-white,
body > main > section.bg-bgbase {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
    background-color: transparent !important;
}

/* section疑似要素は基本OFF */
body > main > section::before,
body > main > section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: none;
}

/* section 内の実コンテンツを背景より前面へ */
body > main > section > * {
    position: relative;
    z-index: 1;
}

/* 既存 .main-img / searchform.css の背景指定を無効化 */
.main-img,
.tonarino-search-section {
    background-image: none !important;
    background-color: transparent !important;
}

.tonarino-search-overlay {
    background: transparent !important;
}


/* =========================================================
   1. FV検索
========================================================= */
body > main > section:nth-of-type(1) {
    background-color: #fffefa !important;
}

body > main > section:nth-of-type(1)::before {
    display: block;
    background-image: url("../img/tonarino-bg-warm.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    opacity: 1;
}

body > main > section:nth-of-type(1)::after {
    display: block;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.42) 58%,
            rgba(255, 255, 255, 0.86) 100%
        );
}


/* =========================================================
   2. エリアから探す
========================================================= */



/* =========================================================
   3. 主要診療科
========================================================= */
body > main > section:nth-of-type(3) {
    background:
        linear-gradient(
            180deg,
            rgba(235, 247, 255, 0.82) 0%,
            rgba(244, 251, 255, 0.78) 100%
        ) !important;
}


/* =========================================================
   4. 新着医療機関・薬局
========================================================= */
body > main > section:nth-of-type(4) {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 253, 246, 0.90) 100%
        ) !important;
}


/* =========================================================
   5. 専門的な治療・薬局サービス
========================================================= */
body > main > section:nth-of-type(5) {
    background:
        linear-gradient(
            180deg,
            rgba(234, 247, 255, 0.84) 0%,
            rgba(240, 250, 255, 0.80) 100%
        ) !important;
}


/* =========================================================
   6. となりの医療特集
========================================================= */
body > main > section:nth-of-type(6) {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 253, 246, 0.90) 100%
        ) !important;
}


/* =========================================================
   7. ドクターインタビュー
========================================================= */
body > main > section:nth-of-type(7) {
    background:
        linear-gradient(
            180deg,
            rgba(235, 247, 255, 0.82) 0%,
            rgba(244, 251, 255, 0.78) 100%
        ) !important;
}


/* =========================================================
   8. ドクターブログ
========================================================= */
body > main > section:nth-of-type(8) {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 253, 246, 0.90) 100%
        ) !important;
}


/* =========================================================
   9. お知らせ
========================================================= */
body > main > section:nth-of-type(9) {
    background:
        linear-gradient(
            180deg,
            rgba(235, 247, 255, 0.84) 0%,
            rgba(244, 251, 255, 0.80) 100%
        ) !important;
}


/* =========================================================
   10. バナー
========================================================= */
body > main > section:nth-of-type(10) {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 253, 246, 0.90) 100%
        ) !important;
}


/* =========================================================
   11. 掲載広告
   main::before の下部背景画像を見せる
========================================================= */
body > main > section:nth-of-type(11) {
    background:
        linear-gradient(
            180deg,
            rgba(235, 247, 255, 0.50) 0%,
            rgba(255, 253, 246, 0.38) 100%
        ) !important;
}

body > main > section:nth-of-type(11)::after {
    display: block;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.24) 0%,
            rgba(255, 255, 255, 0.10) 46%,
            rgba(255, 255, 255, 0.18) 100%
        );
}


/* =========================================================
   12. 運営会社情報
========================================================= */
body > main > section:nth-of-type(12) {
    background:
        linear-gradient(
            180deg,
            rgba(255, 253, 246, 0.38) 0%,
            rgba(244, 251, 255, 0.42) 100%
        ) !important;
}

body > main > section:nth-of-type(12)::after {
    display: block;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.28) 100%
        );
}


/* カードの読みやすさを少し補強 */
body > main .rounded-2xl,
body > main .rounded-3xl,
body > main .tonarino-search-card {
    box-shadow:
        0 8px 24px rgba(59, 130, 246, 0.08),
        0 2px 8px rgba(15, 23, 42, 0.04);
}

/* 背景上の白カードを少しだけ透け感ある見た目にする */
body > main .bg-white {
    background-color: rgba(255, 255, 255, 0.92) !important;
}

body > main .bg-gray-50 {
    background-color: rgba(249, 250, 251, 0.86) !important;
}

body > main .bg-blue-50\/50 {
    background-color: rgba(239, 246, 255, 0.62) !important;
}


/* スマホ */
@media (max-width: 767px) {
    body > main::before {
        height: 980px;
        background-size: auto 100%;
        background-position: center bottom;
        opacity: 0.42;
    }

    body > main > section:nth-of-type(1)::before {
        background-size: cover;
        background-position: center top;
    }

    body > main > section:nth-of-type(1)::after {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.34) 0%,
                rgba(255, 255, 255, 0.60) 62%,
                rgba(255, 255, 255, 0.84) 100%
            );
    }

    body > main > section:nth-of-type(11),
    body > main > section:nth-of-type(12) {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.68) 0%,
                rgba(244, 251, 255, 0.68) 100%
            ) !important;
    }
}



/* =========================================================
   search/index.php・search/detail.php 共通背景
========================================================= */

body > main.search-index-main,
body > main.search-detail-main {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            180deg,
            #fffefa 0%,
            #f8fcff 34%,
            #fffefa 62%,
            #f4fbff 100%
        ) !important;
}

/* 上部・下部に背景画像を薄く敷く */
body > main.search-index-main::before,
body > main.search-detail-main::before {
    content: "";
    position: absolute;
    inset: 0;
    height: auto;
    z-index: 0;
    pointer-events: none;
    background-image:
        url("../img/tonarino-bg-warm.png"),
        url("../img/tonarino-bg-warm.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    background-size: 100% auto, 100% auto;
    opacity: 0.42;
}

/* 中身を背景より前面へ */
body > main.search-index-main > :not([class*="z-"]),
body > main.search-detail-main > :not([class*="z-"]) {
    position: relative;
    z-index: 1;
}

/* 検索・詳細ページのカード背景も完全白ではなく少し背景になじませる */
body > main.search-index-main .bg-white,
body > main.search-detail-main .bg-white {
    background-color: rgba(255, 255, 255, 0.94) !important;
}

body > main.search-index-main .bg-gray-50,
body > main.search-detail-main .bg-gray-50 {
    background-color: rgba(249, 250, 251, 0.88) !important;
}

body > main.search-index-main .bg-blue-50,
body > main.search-index-main .bg-blue-50\/50,
body > main.search-detail-main .bg-blue-50,
body > main.search-detail-main .bg-blue-50\/50 {
    background-color: rgba(239, 246, 255, 0.70) !important;
}

/* 検索結果ヘッダーだけ、白ベタではなく背景を見せる */
.search-results-header {
    position: relative;
    overflow: visible;
    isolation: isolate;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.86) 0%,
            rgba(255, 255, 255, 0.72) 100%
        ) !important;
    backdrop-filter: blur(6px);
}

/* 検索結果ヘッダー内に背景画像を表示 */
.search-results-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../img/tonarino-bg-warm.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 0.34;
}

/* ヘッダー内の文字・絞り込みタグを前面へ */
.search-results-header > :not(#loading-overlay) {
    position: relative;
    z-index: 1;
}

#loading-overlay {
    z-index: 20;
}

.bg-accent_orange {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.bg-accent_gold {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.text-accent_gold {
    --tw-text-opacity: 1;
    color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

/* =========================================================
   search/detail.php  専用
========================================================= */

body > main > section.detail-related-search {
    position: relative;
    z-index: 2;
    overflow: visible;
    isolation: auto;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(244, 251, 255, 0.58) 100%
        ) !important;
}

/* TOP背景用の疑似要素が乗らないようにする */
body > main > section.detail-related-search::before,
body > main > section.detail-related-search::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* 関連検索内の小ボタンは通常の白に戻す */
body > main > section.detail-related-search .bg-white {
    background-color: #fff !important;
}


/* =========================================================
   SP固定検索メニュー被り対策
========================================================= */

@media (max-width: 1023px) {
    body > main.search-index-main + footer,
    body > main.search-detail-main + footer {
        padding-bottom: calc(env(safe-area-inset-bottom) + 6rem) !important;
    }
}

@media (max-width: 1023px) {
    body > main.search-index-main + footer + #page-top-btn,
    body > main.search-detail-main + footer + #page-top-btn {
        bottom: calc(env(safe-area-inset-bottom) + 5.75rem) !important;
    }
}


/* =========================================================
   下からスライドインするアニメーション定義
========================================================= */

@keyframes slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.animate-slide-up {
    animation: slide-up 0.3s ease-out forwards;
}


/* =========================================================
   画像モーダル表示中の固定UI非表示
========================================================= */

body.gallery-modal-open header,
body.gallery-modal-open #page-top-btn {
    opacity: 0;
    pointer-events: none;
}