/* 上書き用CSSファイルです */

/* 形状から探す ナビゲーション */
.shape-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    max-width: 768px;   /* ←1200pxから変更：左カラムをはみ出さない上限 */
    width: 100%;
    box-sizing: border-box;
    margin: 24px auto;
    padding: 0 16px;
}

.shape-nav-item {
    display: block;
    text-align: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.shape-nav-item:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.shape-nav-item img {
    width: 100%;
    max-width: 160px;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .shape-nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 12px;
    }

    .shape-nav-item img {
        max-width: 200px;
    }
}


/* 「公式サイトを見る」ボタン hover時の文字・枠の色 */
#listcard_cta a:hover {
    color: #0693e3 !important;
    border-color: #0693e3 !important;
}

/* 比較表ボタン ホバー（白抜き反転）
   ボタン色は 黄 #fcb900 / 水色 #0693e3 のまま。
   どちらのボタンがどの色でも効くよう、色ごとに指定する。
   （インラインstyle指定・WPプリセット色クラスの両方に対応） */

/* 黄色 #fcb900 */
.ranktable__column__cta a[style*="fcb900" i]:hover,
.ranktable__column__cta a.has-luminous-vivid-amber-background-color:hover {
    background-color: #fff !important;
    color: #fcb900 !important;
    border-color: #fcb900 !important;
}

/* 水色 #0693e3 */
.ranktable__column__cta a[style*="0693e3" i]:hover,
.ranktable__column__cta a.has-vivid-cyan-blue-background-color:hover {
    background-color: #fff !important;
    color: #0693e3 !important;
    border-color: #0693e3 !important;
}