@charset "UTF-8";

/* ドロワーメニュー専用のスタイルをスコープ化 */
.ws-drawer {
    /* CSS変数を使用してカスタマイズを容易に */
    --ws-drawer-width: 340px;
    --ws-drawer-bg-gradient: linear-gradient(to bottom, #26ccff, #0026ac);
    --ws-drawer-btn-width: 20px;
    --ws-drawer-btn-height: 60px;
    --ws-drawer-btn-bg-gradient: linear-gradient(to bottom, #26ccff, #0026ac);
    --ws-drawer-btn-active-bg: #ff0;
    --ws-drawer-overlay-bg: rgba(0, 0, 0, 0.3);
    --ws-drawer-overlay-blur: 1px;
    --ws-text-color: #000;
    --ws-text-hover-color: #FFD700;
    --ws-link-color: #fff;
    --ws-link-hover-color: #FFD700;
    --ws-link-hover-underline-offset: 3px;
    /* --ws-menu-heading-color: #F5F5F7; */
    --ws-menu-heading-color: #ff0;
    --ws-line-dot-color: #fff;
    --ws-line-dot-active-color: #ff0;

    /* 必要なグローバルスタイルをスコープ内に移動 */
    color: var(--ws-text-color);
    background: #fff;

    /* フォント関連スタイル */
    text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset;
    text-rendering: optimizeSpeed;
    touch-action: manipulation;
    position: relative; /* 子要素の基準を設定 */
    z-index: 1001;
}

/* ダークモード用のスタイルをhtml.dark-modeに連動 */
html.dark-mode .ws-drawer {
    --ws-link-color: #CFCFD1;
    --ws-link-hover-color: #4C95F7;
    --ws-menu-heading-color: #F5F5F7;
    --ws-drawer-btn-bg-gradient: linear-gradient(to bottom, #0056b3, #0056b3);
    --ws-drawer-bg-gradient: #1D1D1F;
}

html.dark-mode .ws-drawer .ws-drawer__link + .ws-drawer__link {
    border-top: 0.5px solid rgba(255, 255, 255, 0.3);
}

/* ドロワーがアクティブなときの設定 */
.ws-drawer--active {
    overflow: hidden;
    touch-action: none;
}

.ws-drawer--active body {
    overflow: hidden;
}

/* リンク設定 */
.ws-drawer a {
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* ドロワーメニューのタイトル設定 */
.ws-drawer__menu-heading {
    font-size: 20px;
    margin-bottom: 0.5em;
    font-weight: 700;
    padding-left: 0.6em;
    color: var(--ws-menu-heading-color);
}

/* ドロワーボタンの設定 */
.ws-drawer__btn {
    user-select: none;
    position: fixed;
    top: calc(50vh - var(--ws-drawer-btn-height) / 2); /* ビューポートの中央に配置 */
    left: 0;
    z-index: 1000;
    width: var(--ws-drawer-btn-width);
    height: var(--ws-drawer-btn-height);
    background: var(--ws-drawer-btn-bg-gradient);
    border-radius: 0 8px 8px 0;
    opacity: 0; /* 初期値を0に設定 */
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
                opacity 0.3s ease-in-out;
}

/* ボタンが表示状態のとき */
.ws-drawer__btn--visible {
    opacity: 1;
}

/* 初回ロード後にトランジションを適用 */
.ws-drawer__btn--initialized {
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
                opacity 0.3s ease-in-out;
}

/* ドロワーボタンのスライド位置調整 */
.ws-drawer--active .ws-drawer__btn {
    transform: translateX(var(--ws-drawer-width));
}

/* LED風のドットスタイル */
.ws-drawer__btn-dot {
    pointer-events: none;
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: var(--ws-line-dot-color);
    border-radius: 50%;
    opacity: 0.4;
    transition: background-color 0.3s, opacity 0.3s;
}

/* ドットの位置調整 */
.ws-drawer__btn-dot:nth-child(1) { top: 10px; }
.ws-drawer__btn-dot:nth-child(2) { top: 26px; }
.ws-drawer__btn-dot:nth-child(3) { top: 42px; }

/* ドットがアクティブ状態のとき */
.ws-drawer__btn-dot--active {
    background: var(--ws-line-dot-active-color);
    opacity: 1;
}

/* ドットがホバー状態のとき */
.ws-drawer__btn-dot--hover {
    background: var(--ws-line-dot-color);
    opacity: 1;
}

/* ドロワーアクティブ時のドット色（必要に応じて） */
.ws-drawer--active .ws-drawer__btn-dot {
    background: var(--ws-line-dot-active-color);
    opacity: 1;
}

/* ドロワーメニューの基本設定 */
.ws-drawer__menu {
    pointer-events: none;
    position: fixed;
    top: 0;
    right: 100%;
    z-index: 500;
    width: 80%;
    max-width: var(--ws-drawer-width);
    height: 100%;
    background: var(--ws-drawer-bg-gradient);
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* メニューアクティブ時の表示 */
.ws-drawer--active .ws-drawer__menu {
    overflow-y: auto;
    pointer-events: auto;
    transform: translateX(100%);
}

/* メニューのコンテンツ設定 */
.ws-drawer__content {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    margin: 2em 0;
    padding: 0 15px;
    transform: translateX(-30px);
    transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
}

/* メニューアクティブ時のコンテンツ表示 */
.ws-drawer--active .ws-drawer__content {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* メニュー内のリンク設定 */
.ws-drawer__link {
    user-select: none;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ws-link-color);

    text-decoration: none;                   /* 追加：リセット */
    display: flex;                           /* 追加：ランク＆タイトルを横並び */
    align-items: center;                     /* 追加：縦中央揃え */
}

/* メニューリンクのホバー効果 */
.ws-drawer__link:hover {
    color: var(--ws-link-hover-color);
    /* text-decoration: underline; */
    text-decoration: none;                   /* 追加：下線リセット */
    text-underline-offset: var(--ws-link-hover-underline-offset);
}

/* 追加：ホバー時にタイトルだけ下線 */
.ws-drawer__link:hover .title {
    text-decoration: underline;              /* 追加 */
    text-underline-offset: var(--ws-link-hover-underline-offset); /* 追加 */
}

/* メニューリンクの境界線 */
.ws-drawer__link + .ws-drawer__link {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* メニュー内のアイコン */
.ws-drawer__link-icon {
    margin-right: 5px;
}

/* メニュー展開時のオーバーレイ設定 */
.ws-drawer__overlay {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 400;
    width: 100%;
    height: 100%;
    background: var(--ws-drawer-overlay-bg);
    transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    backdrop-filter: blur(var(--ws-drawer-overlay-blur));
}

/* オーバーレイのアクティブ状態 */
.ws-drawer--active .ws-drawer__overlay {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

/* 変更：.rank → .wsd-rank */
.ws-drawer__link .wsd-rank {
    margin-right: 5px;                       /* 追加 */
    text-decoration: none;                   /* 追加：下線抑制 */
    flex-shrink: 0;                          /* 追加：幅固定 */
}



/* メディアクエリ: フォントサイズ調整 */
@media screen and (min-width: 801px) {
    .ws-drawer {
        font-size: 0.83333vw;
    }

    .ws-drawer a[href^="tel"] {
        pointer-events: none;
        cursor: default;
    }
}

@media screen and (min-width: 1440px) {
    .ws-drawer {
        font-size: 12px;
    }
}

/* ホバーが可能なデバイスでのオーバーレイのカーソル設定 */
@media (any-hover: hover) {
    .ws-drawer--active .ws-drawer__overlay {
        cursor: pointer;
    }
}