/**
 * YAMELOG Design Tokens
 *
 * テーマ全体で使用するデザイントークン（CSS Custom Properties）。
 * カラーパレット、タイポグラフィ、スペーシング、レイアウト等を一元管理する。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   @font-face declarations
   ========================================================================== */

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/NotoSansJP-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/NotoSansJP-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/NotoSansJP-Bold.woff2') format('woff2');
}

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       メインカラー
       ------------------------------------------------------------------ */
    --ym-color-primary: #1e3a5f;
    --ym-color-primary-dark: #152d4a;
    --ym-color-primary-light: #e8eef6;

    /* CTA専用（脱出=緑） */
    --ym-color-cta: #16A34A;
    --ym-color-cta-dark: #15803D;
    --ym-color-cta-light: #F0FDF4;

    /* 心理設計: 痛み増幅ゾーン */
    --ym-color-pain: #0F172A;
    --ym-color-pain-text: #CBD5E1;

    /* 心理設計: 脱出・解放ゾーン */
    --ym-color-escape: #16A34A;
    --ym-color-escape-dark: #14532D;
    --ym-color-bg-escape: #F0FDF4;
    --ym-color-escape-border: #BBF7D0;

    /* ------------------------------------------------------------------
       セカンダリ
       ------------------------------------------------------------------ */
    --ym-color-secondary: #2D3748;

    /* ------------------------------------------------------------------
       テキスト
       ------------------------------------------------------------------ */
    --ym-color-text: #4A5568;
    --ym-color-text-light: #718096;

    /* ------------------------------------------------------------------
       背景
       ------------------------------------------------------------------ */
    --ym-color-bg: #FFFFFF;
    --ym-color-bg-gray: #F7FAFC;
    --ym-color-border: #E2E8F0;

    /* ------------------------------------------------------------------
       星評価
       ------------------------------------------------------------------ */
    --ym-color-star: #F6AD55;

    /* ------------------------------------------------------------------
       ゴールドアクセント（TOP3バッジ、星評価）
       ------------------------------------------------------------------ */
    --ym-color-gold: #d4a843;
    --ym-color-gold-light: #fdf6e3;
    --ym-color-silver: #94a3b8;
    --ym-color-bronze: #b87333;

    /* ------------------------------------------------------------------
       ランキングバッジ背景
       ------------------------------------------------------------------ */
    --ym-color-rank-1: linear-gradient(135deg, #d4a843, #f0d68a);
    --ym-color-rank-2: linear-gradient(135deg, #94a3b8, #cbd5e1);
    --ym-color-rank-3: linear-gradient(135deg, #b87333, #d4956a);

    /* ------------------------------------------------------------------
       プライマリ拡張（グラデーション・ホバー用）
       ------------------------------------------------------------------ */
    --ym-color-primary-50: #f0f4f8;
    --ym-color-primary-100: #d9e2ec;
    --ym-color-primary-200: #bcccdc;
    --ym-color-primary-300: #9fb3c8;
    --ym-color-primary-400: #627d98;
    --ym-color-primary-500: #1e3a5f;
    --ym-color-primary-600: #152d4a;
    --ym-color-primary-700: #0f2035;
    --ym-color-primary-800: #0a1628;
    --ym-color-primary-900: #060e1a;

    /* ------------------------------------------------------------------
       専門家監修バッジ
       ------------------------------------------------------------------ */
    --ym-color-expert: #1e3a5f;
    --ym-color-expert-light: #e8eef6;

    /* ------------------------------------------------------------------
       セマンティック
       ------------------------------------------------------------------ */
    --ym-color-success: #48BB78;
    --ym-color-danger: #F56565;

    /* ------------------------------------------------------------------
       運営形態バッジ
       ------------------------------------------------------------------ */
    --ym-color-badge-lawyer: #805AD5;
    --ym-color-badge-union: #3182CE;
    --ym-color-badge-private: #38A169;

    /* ------------------------------------------------------------------
       タイポグラフィ
       ------------------------------------------------------------------ */
    --ym-font-main: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
    --ym-font-heading: 'Noto Serif JP', 'Noto Sans JP', serif;
    --ym-font-number: 'Inter', 'Noto Sans JP', sans-serif;
    --ym-font-size-xs: 0.75rem;
    --ym-font-size-sm: 0.875rem;
    --ym-font-size-base: 1rem;
    --ym-font-size-lg: 1.125rem;
    --ym-font-size-xl: 1.25rem;
    --ym-font-size-2xl: 1.5rem;
    --ym-font-size-3xl: 1.875rem;
    --ym-font-weight-regular: 400;
    --ym-font-weight-medium: 500;
    --ym-font-weight-bold: 700;
    --ym-line-height-tight: 1.25;
    --ym-line-height-normal: 1.6;

    /* ------------------------------------------------------------------
       スペーシング
       ------------------------------------------------------------------ */
    --ym-space-1: 0.25rem;
    --ym-space-2: 0.5rem;
    --ym-space-3: 0.75rem;
    --ym-space-4: 1rem;
    --ym-space-6: 1.5rem;
    --ym-space-8: 2rem;
    --ym-space-12: 3rem;
    --ym-space-16: 4rem;
    --ym-space-20: 5rem;
    --ym-space-24: 6rem;
    --ym-space-32: 8rem;
    --ym-space-40: 10rem;

    /* ------------------------------------------------------------------
       レイアウト
       ------------------------------------------------------------------ */
    --ym-container-max: 1200px;
    --ym-container-padding: 1rem;
    --ym-sidebar-width: 320px;

    /* ------------------------------------------------------------------
       シャドウ
       ------------------------------------------------------------------ */
    --ym-shadow-sm: 0 1px 3px rgba(30, 58, 95, 0.06);
    --ym-shadow-md: 0 4px 8px rgba(30, 58, 95, 0.08);
    --ym-shadow-lg: 0 12px 24px rgba(30, 58, 95, 0.12);

    /* シャドウ強化 */
    --ym-shadow-card: 0 2px 8px rgba(30, 58, 95, 0.08);
    --ym-shadow-card-hover: 0 8px 24px rgba(30, 58, 95, 0.15);
    --ym-shadow-cta: 0 4px 12px rgba(249, 115, 22, 0.3);

    /* ------------------------------------------------------------------
       ボーダー半径
       ------------------------------------------------------------------ */
    --ym-radius-sm: 4px;
    --ym-radius-md: 8px;
    --ym-radius-lg: 12px;
    --ym-radius-full: 9999px;

    /* ------------------------------------------------------------------
       トランジション
       ------------------------------------------------------------------ */
    --ym-transition-fast: 150ms ease;
    --ym-transition-normal: 300ms ease;

    /* アニメーション */
    --ym-transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --ym-transition-smooth: 400ms cubic-bezier(0.22, 1, 0.36, 1);

    /* ------------------------------------------------------------------
       Z-index
       ------------------------------------------------------------------ */
    --ym-z-dropdown: 100;
    --ym-z-sticky: 200;
    --ym-z-modal: 300;
    --ym-z-header: 400;

    /* ------------------------------------------------------------------
       ダークモード用（後で使用）
       ------------------------------------------------------------------ */
    --ym-dark-bg: #0f172a;
    --ym-dark-bg-card: #1e293b;
    --ym-dark-text: #e2e8f0;
    --ym-dark-text-muted: #94a3b8;
    --ym-dark-border: #334155;
}
/**
 * YAMELOG CSS Reset
 *
 * Josh Comeau 式モダンCSSリセット。
 * ブラウザ間の一貫性を確保し、予測可能なボックスモデルを提供する。
 *
 * @see https://www.joshwcomeau.com/css/custom-css-reset/
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   1. Box sizing model
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================================================
   2. Remove default margin and padding
   ========================================================================== */

*{
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   3. Body defaults
   ========================================================================== */

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   4. Improve media defaults
   ========================================================================== */

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* ==========================================================================
   5. Inherit fonts for form controls
   ========================================================================== */

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* ==========================================================================
   6. Avoid text overflow
   ========================================================================== */

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* ==========================================================================
   7. Improve line wrapping
   ========================================================================== */

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* ==========================================================================
   8. Root stacking context
   ========================================================================== */

#root,
#__next {
    isolation: isolate;
}

/* ==========================================================================
   9. Remove list styles on ul, ol elements with a list role
   ========================================================================== */

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* ==========================================================================
   10. Remove default button styles
   ========================================================================== */

button {
    cursor: pointer;
    background: none;
    border: none;
}

/* ==========================================================================
   11. Anchor element defaults
   ========================================================================== */

a {
    color: inherit;
    text-decoration: inherit;
}

/* ==========================================================================
   12. Remove default table spacing
   ========================================================================== */

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/**
 * YAMELOG Base Styles
 *
 * リセット後の基本スタイル定義。
 * モバイルファースト（375px基準）で設計し、
 * 768px / 1024px の min-width メディアクエリで拡張する。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Body
   ========================================================================== */

body {
    font-family: var(--ym-font-main);
    font-size: var(--ym-font-size-base);
    font-weight: var(--ym-font-weight-regular);
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg);
    line-height: var(--ym-line-height-normal);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--ym-color-primary);
    text-decoration: none;
    transition: color var(--ym-transition-fast);
}

a:hover {
    text-decoration: underline;
    color: var(--ym-color-primary-dark);
}

a:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: 2px;
    border-radius: var(--ym-radius-sm);
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ym-color-secondary);
    font-family: var(--ym-font-heading);
    font-weight: var(--ym-font-weight-bold);
    line-height: var(--ym-line-height-tight);
}

h1 {
    font-size: var(--ym-font-size-2xl);
    margin-bottom: var(--ym-space-6);
}

h2 {
    font-size: var(--ym-font-size-xl);
    margin-bottom: var(--ym-space-4);
}

h3 {
    font-size: var(--ym-font-size-lg);
    margin-bottom: var(--ym-space-3);
}

h4 {
    font-size: var(--ym-font-size-base);
    margin-bottom: var(--ym-space-2);
}

h5 {
    font-size: var(--ym-font-size-sm);
    margin-bottom: var(--ym-space-2);
}

h6 {
    font-size: var(--ym-font-size-xs);
    margin-bottom: var(--ym-space-1);
}

@media (min-width: 768px) {
    h1 {
        font-size: var(--ym-font-size-3xl);
    }

    h2 {
        font-size: var(--ym-font-size-2xl);
    }

    h3 {
        font-size: var(--ym-font-size-xl);
    }
}

/* ==========================================================================
   Paragraphs & Text
   ========================================================================== */

p {
    margin-bottom: var(--ym-space-4);
}

p:last-child {
    margin-bottom: 0;
}

strong,
b {
    font-weight: var(--ym-font-weight-bold);
}

small {
    font-size: var(--ym-font-size-sm);
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul,
ol {
    padding-left: var(--ym-space-6);
    margin-bottom: var(--ym-space-4);
}

li {
    margin-bottom: var(--ym-space-1);
}

/* ==========================================================================
   Layout: Container
   ========================================================================== */

.ym-container {
    max-width: var(--ym-container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--ym-container-padding);
    padding-left: var(--ym-container-padding);
    width: 100%;
}

/* ==========================================================================
   Layout: 2-Column (Main + Sidebar)
   ========================================================================== */

.ym-layout {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-8);
}

.ym-content {
    flex: 1;
    min-width: 0; /* flexbox overflow 防止 */
}

.ym-sidebar {
    width: 100%;
}

@media (min-width: 1024px) {
    .ym-layout {
        flex-direction: row;
        gap: var(--ym-space-12);
    }

    .ym-sidebar {
        width: var(--ym-sidebar-width);
        flex-shrink: 0;
    }
}

/* ==========================================================================
   Section
   ========================================================================== */

.ym-section {
    padding-top: var(--ym-space-8);
    padding-bottom: var(--ym-space-8);
}

@media (min-width: 768px) {
    .ym-section {
        padding-top: var(--ym-space-12);
        padding-bottom: var(--ym-space-12);
    }
}

.ym-section__title {
    font-size: var(--ym-font-size-xl);
    margin-bottom: var(--ym-space-6);
}

@media (min-width: 768px) {
    .ym-section__title {
        font-size: var(--ym-font-size-2xl);
        margin-bottom: var(--ym-space-8);
    }
}

/* ==========================================================================
   Accessibility: Screen Reader Only
   ========================================================================== */

.ym-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ym-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: inherit;
}

/* ==========================================================================
   Utility: Text Alignment
   ========================================================================== */

.ym-text-left {
    text-align: left;
}

.ym-text-center {
    text-align: center;
}

.ym-text-right {
    text-align: right;
}

/* ==========================================================================
   Utility: Display
   ========================================================================== */

.ym-hidden {
    display: none;
}

.ym-block {
    display: block;
}

.ym-inline-block {
    display: inline-block;
}

.ym-flex {
    display: flex;
}

.ym-inline-flex {
    display: inline-flex;
}

/* ==========================================================================
   Utility: Flex Helpers
   ========================================================================== */

.ym-flex-wrap {
    flex-wrap: wrap;
}

.ym-items-center {
    align-items: center;
}

.ym-justify-center {
    justify-content: center;
}

.ym-justify-between {
    justify-content: space-between;
}

.ym-gap-1 {
    gap: var(--ym-space-1);
}

.ym-gap-2 {
    gap: var(--ym-space-2);
}

.ym-gap-3 {
    gap: var(--ym-space-3);
}

.ym-gap-4 {
    gap: var(--ym-space-4);
}

.ym-gap-6 {
    gap: var(--ym-space-6);
}

.ym-gap-8 {
    gap: var(--ym-space-8);
}

/* ==========================================================================
   Utility: Spacing
   ========================================================================== */

.ym-mt-0 {
    margin-top: 0;
}

.ym-mt-4 {
    margin-top: var(--ym-space-4);
}

.ym-mt-8 {
    margin-top: var(--ym-space-8);
}

.ym-mb-0 {
    margin-bottom: 0;
}

.ym-mb-4 {
    margin-bottom: var(--ym-space-4);
}

.ym-mb-8 {
    margin-bottom: var(--ym-space-8);
}

/* ==========================================================================
   Utility: Font Weight
   ========================================================================== */

.ym-font-regular {
    font-weight: var(--ym-font-weight-regular);
}

.ym-font-medium {
    font-weight: var(--ym-font-weight-medium);
}

.ym-font-bold {
    font-weight: var(--ym-font-weight-bold);
}

/* ==========================================================================
   Utility: Font Size
   ========================================================================== */

.ym-text-xs {
    font-size: var(--ym-font-size-xs);
}

.ym-text-sm {
    font-size: var(--ym-font-size-sm);
}

.ym-text-base {
    font-size: var(--ym-font-size-base);
}

.ym-text-lg {
    font-size: var(--ym-font-size-lg);
}

.ym-text-xl {
    font-size: var(--ym-font-size-xl);
}

.ym-text-2xl {
    font-size: var(--ym-font-size-2xl);
}

.ym-text-3xl {
    font-size: var(--ym-font-size-3xl);
}

/* ==========================================================================
   Utility: Color
   ========================================================================== */

.ym-text-primary {
    color: var(--ym-color-primary);
}

.ym-text-secondary {
    color: var(--ym-color-secondary);
}

.ym-text-light {
    color: var(--ym-color-text-light);
}

.ym-text-success {
    color: var(--ym-color-success);
}

.ym-text-danger {
    color: var(--ym-color-danger);
}

/* ==========================================================================
   Utility: Background
   ========================================================================== */

.ym-bg-white {
    background-color: var(--ym-color-bg);
}

.ym-bg-gray {
    background-color: var(--ym-color-bg-gray);
}

.ym-bg-primary-light {
    background-color: var(--ym-color-primary-light);
}

/* ==========================================================================
   Utility: Border & Radius
   ========================================================================== */

.ym-border {
    border: 1px solid var(--ym-color-border);
}

.ym-border-top {
    border-top: 1px solid var(--ym-color-border);
}

.ym-border-bottom {
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-rounded-sm {
    border-radius: var(--ym-radius-sm);
}

.ym-rounded-md {
    border-radius: var(--ym-radius-md);
}

.ym-rounded-lg {
    border-radius: var(--ym-radius-lg);
}

.ym-rounded-full {
    border-radius: var(--ym-radius-full);
}

/* ==========================================================================
   Utility: Shadow
   ========================================================================== */

.ym-shadow-sm {
    box-shadow: var(--ym-shadow-sm);
}

.ym-shadow-md {
    box-shadow: var(--ym-shadow-md);
}

.ym-shadow-lg {
    box-shadow: var(--ym-shadow-lg);
}

/* ==========================================================================
   Utility: Width
   ========================================================================== */

.ym-w-full {
    width: 100%;
}

/* ==========================================================================
   Utility: Overflow
   ========================================================================== */

.ym-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Responsive: Show/Hide
   ========================================================================== */

.ym-hide-mobile {
    display: none;
}

.ym-show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .ym-hide-mobile {
        display: block;
    }

    .ym-show-mobile {
        display: none;
    }
}

/* ==========================================================================
   WordPress Defaults: Alignment
   ========================================================================== */

.alignleft {
    float: left;
    margin-right: var(--ym-space-4);
    margin-bottom: var(--ym-space-4);
}

.alignright {
    float: right;
    margin-left: var(--ym-space-4);
    margin-bottom: var(--ym-space-4);
}

.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: var(--ym-space-4);
}

/* ==========================================================================
   WordPress Defaults: Clearfix
   ========================================================================== */

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
/**
 * YAMELOG Header Component
 *
 * 固定ヘッダー、デスクトップナビゲーション、検索モーダル、モバイルドロワーメニュー。
 * モバイルファーストで設計し、768px / 1024px で拡張する。
 *
 * 構造:
 *   .ym-header
 *     .ym-header__inner.ym-container
 *       .ym-header__logo > .ym-header__logo-img
 *       .ym-header__nav > .ym-gnav__list (wp_nav_menu)
 *       .ym-header__actions
 *         .ym-header__search-btn > .ym-header__search-icon
 *         .ym-header__hamburger > .ym-header__hamburger-line x3
 *     .ym-search-modal
 *       .ym-search-modal__inner > .ym-search-modal__form
 *         .ym-search-modal__input + .ym-search-modal__submit
 *       .ym-search-modal__close
 *     .ym-drawer
 *       .ym-drawer__overlay
 *       .ym-drawer__panel
 *         .ym-drawer__close
 *         .ym-drawer__nav > .ym-drawer__list (wp_nav_menu)
 *         .ym-drawer__search > .ym-drawer__search-form
 *           .ym-drawer__search-input + .ym-drawer__search-submit
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Header — 固定ヘッダー（ネイビーブルー）
   ========================================================================== */

.ym-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--ym-color-primary);
    box-shadow: var(--ym-shadow-sm);
    z-index: var(--ym-z-header);
    transition: background-color var(--ym-transition-normal),
                box-shadow var(--ym-transition-normal);
}

/* スクロール時の縮小・濃い背景（JSで .is-scrolled を付与） */
.ym-header.is-scrolled {
    background-color: var(--ym-color-primary-dark);
    box-shadow: var(--ym-shadow-md);
}

.ym-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: var(--ym-space-3) var(--ym-container-padding);
    transition: height var(--ym-transition-normal);
}

.ym-header.is-scrolled .ym-header__inner {
    height: 48px;
}

@media (min-width: 768px) {
    .ym-header__inner {
        height: 64px;
        padding-top: var(--ym-space-4);
        padding-bottom: var(--ym-space-4);
    }

    .ym-header.is-scrolled .ym-header__inner {
        height: 52px;
    }
}

/* ==========================================================================
   Logo — 白表示（filter反転）
   ========================================================================== */

.ym-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity var(--ym-transition-fast);
}

.ym-header__logo:hover {
    opacity: 0.85;
    text-decoration: none;
}

.ym-header__logo-img {
    display: block;
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}

@media (min-width: 768px) {
    .ym-header__logo-img {
        height: 32px;
    }
}

/* ==========================================================================
   Desktop Navigation — .ym-header__nav + .ym-gnav__list
   ========================================================================== */

.ym-header__nav {
    display: none;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .ym-header__nav {
        display: flex;
    }
}

/* wp_nav_menu 出力の ul */
.ym-gnav__list {
    display: flex;
    align-items: center;
    gap: var(--ym-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* wp_nav_menu 出力の li */
.ym-gnav__list > .menu-item {
    position: relative;
}

/* wp_nav_menu 出力の a リンク — 白文字 */
.ym-gnav__list > .menu-item > a {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: var(--ym-space-2) var(--ym-space-1);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity var(--ym-transition-fast);
}

/* ホバーアンダーライン（::after の scaleX アニメーション） */
.ym-gnav__list > .menu-item > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ym-transition-normal);
}

.ym-gnav__list > .menu-item > a:hover {
    opacity: 0.85;
    text-decoration: none;
}

.ym-gnav__list > .menu-item > a:hover::after {
    transform: scaleX(1);
}

/* WordPress の current-menu-item クラスで現在ページをハイライト */
.ym-gnav__list > .current-menu-item > a,
.ym-gnav__list > .current-menu-ancestor > a {
    color: #fff;
    font-weight: var(--ym-font-weight-bold);
}

.ym-gnav__list > .current-menu-item > a::after,
.ym-gnav__list > .current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* モバイル: gnav を非表示 */
@media (max-width: 767px) {
    .ym-gnav__list {
        display: none;
    }
}

/* サブメニュー（depth: 2 対応） */
.ym-gnav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: var(--ym-space-2) 0;
    list-style: none;
    background-color: var(--ym-color-bg);
    border-radius: var(--ym-radius-md);
    box-shadow: var(--ym-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--ym-transition-fast),
                visibility var(--ym-transition-fast),
                transform var(--ym-transition-fast);
    z-index: var(--ym-z-dropdown);
}

.ym-gnav__list > .menu-item:hover > .sub-menu,
.ym-gnav__list > .menu-item:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ym-gnav__list .sub-menu .menu-item > a {
    display: block;
    padding: var(--ym-space-2) var(--ym-space-4);
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-text);
    text-decoration: none;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
}

.ym-gnav__list .sub-menu .menu-item > a:hover {
    color: var(--ym-color-primary);
    background-color: var(--ym-color-primary-light);
}

/* ==========================================================================
   Header Actions — 検索ボタン + ハンバーガー
   ========================================================================== */

.ym-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ym-space-1);
    flex-shrink: 0;
}

/* ==========================================================================
   Search Button — 白アイコン
   ========================================================================== */

.ym-header__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: #fff;
    border-radius: var(--ym-radius-md);
    cursor: pointer;
    transition: opacity var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
}

.ym-header__search-btn:hover {
    opacity: 0.85;
    background-color: rgba(255, 255, 255, 0.15);
}

.ym-header__search-icon {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* ==========================================================================
   Hamburger Button (Mobile) — 白ライン
   ========================================================================== */

.ym-header__hamburger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    padding: var(--ym-space-2);
    border-radius: var(--ym-radius-md);
    transition: background-color var(--ym-transition-fast);
}

.ym-header__hamburger:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

@media (min-width: 768px) {
    .ym-header__hamburger {
        display: none;
    }
}

.ym-header__hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
    transition: transform var(--ym-transition-normal),
                opacity var(--ym-transition-normal);
}

/* ハンバーガー → ✕ アニメーション（JSで .is-active を付与） */
.ym-header__hamburger[aria-expanded="true"] .ym-header__hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ym-header__hamburger[aria-expanded="true"] .ym-header__hamburger-line:nth-child(2) {
    opacity: 0;
}

.ym-header__hamburger[aria-expanded="true"] .ym-header__hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Search Modal — .ym-search-modal
   ========================================================================== */

.ym-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    z-index: var(--ym-z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ym-transition-normal),
                visibility var(--ym-transition-normal);
}

.ym-search-modal:not([hidden]) {
    opacity: 1;
    visibility: visible;
}

.ym-search-modal__inner {
    position: relative;
    width: 100%;
    max-width: 640px;
    padding: var(--ym-space-6);
    background-color: var(--ym-color-bg);
    border-radius: var(--ym-radius-lg);
    box-shadow: var(--ym-shadow-lg);
    transform: translateY(-16px);
    transition: transform var(--ym-transition-normal);
}

.ym-search-modal:not([hidden]) .ym-search-modal__inner {
    transform: translateY(0);
}

.ym-search-modal__form {
    display: flex;
    align-items: center;
    gap: var(--ym-space-2);
}

.ym-search-modal__input {
    flex: 1;
    height: 48px;
    padding: 0 var(--ym-space-4);
    font-family: var(--ym-font-main);
    font-size: var(--ym-font-size-base);
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg-gray);
    border: 2px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    outline: none;
    transition: border-color var(--ym-transition-fast);
}

.ym-search-modal__input:focus {
    border-color: var(--ym-color-primary);
}

.ym-search-modal__input::placeholder {
    color: var(--ym-color-text-light);
}

.ym-search-modal__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: none;
    background-color: var(--ym-color-primary);
    color: var(--ym-color-bg);
    border-radius: var(--ym-radius-md);
    cursor: pointer;
    transition: background-color var(--ym-transition-fast);
}

.ym-search-modal__submit:hover {
    background-color: var(--ym-color-primary-dark);
}

.ym-search-modal__submit svg {
    width: 20px;
    height: 20px;
}

.ym-search-modal__close {
    position: absolute;
    top: var(--ym-space-3);
    right: var(--ym-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: var(--ym-font-size-xl);
    color: var(--ym-color-text-light);
    border-radius: var(--ym-radius-md);
    cursor: pointer;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
}

.ym-search-modal__close:hover {
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg-gray);
}

/* ==========================================================================
   Drawer Navigation (Mobile) — .ym-drawer
   ========================================================================== */

.ym-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--ym-z-modal);
    visibility: hidden;
    transition: visibility var(--ym-transition-normal);
}

.ym-drawer:not([hidden]) {
    visibility: visible;
}

@media (min-width: 768px) {
    .ym-drawer {
        display: none;
    }
}

/* オーバーレイ背景 */
.ym-drawer__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--ym-transition-normal);
}

.ym-drawer:not([hidden]) .ym-drawer__overlay {
    opacity: 1;
}

/* パネル（右からスライド） */
.ym-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background-color: var(--ym-color-bg);
    box-shadow: var(--ym-shadow-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--ym-transition-normal);
}

.ym-drawer:not([hidden]) .ym-drawer__panel {
    transform: translateX(0);
}

/* 閉じるボタン */
.ym-drawer__close {
    position: absolute;
    top: var(--ym-space-3);
    right: var(--ym-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    font-size: var(--ym-font-size-2xl);
    color: var(--ym-color-text-light);
    border-radius: var(--ym-radius-md);
    cursor: pointer;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
}

.ym-drawer__close:hover {
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg-gray);
}

/* ドロワー内ナビゲーション */
.ym-drawer__nav {
    padding-top: 56px;
}

/* wp_nav_menu 出力の ul */
.ym-drawer__list {
    list-style: none;
    margin: 0;
    padding: var(--ym-space-4) 0;
}

.ym-drawer__list > .menu-item {
    margin-bottom: 0;
}

.ym-drawer__list > .menu-item > a {
    display: block;
    padding: var(--ym-space-3) var(--ym-space-6);
    font-size: var(--ym-font-size-base);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-text);
    text-decoration: none;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
}

.ym-drawer__list > .menu-item > a:hover {
    color: var(--ym-color-primary);
    background-color: var(--ym-color-primary-light);
    text-decoration: none;
}

/* WordPress current-menu-item */
.ym-drawer__list > .current-menu-item > a {
    color: var(--ym-color-primary);
    border-left: 3px solid var(--ym-color-primary);
}

/* ドロワー内サブメニュー */
.ym-drawer__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ym-drawer__list .sub-menu .menu-item > a {
    display: block;
    padding: var(--ym-space-2) var(--ym-space-6) var(--ym-space-2) var(--ym-space-8);
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-text-light);
    text-decoration: none;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
}

.ym-drawer__list .sub-menu .menu-item > a:hover {
    color: var(--ym-color-primary);
    background-color: var(--ym-color-primary-light);
}

/* ==========================================================================
   Drawer Search — ドロワー内検索フォーム
   ========================================================================== */

.ym-drawer__search {
    padding: var(--ym-space-4) var(--ym-space-6);
    border-top: 1px solid var(--ym-color-border);
}

.ym-drawer__search-form {
    display: flex;
    align-items: center;
    gap: var(--ym-space-2);
}

.ym-drawer__search-input {
    flex: 1;
    height: 40px;
    padding: 0 var(--ym-space-3);
    font-family: var(--ym-font-main);
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg-gray);
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    outline: none;
    transition: border-color var(--ym-transition-fast);
}

.ym-drawer__search-input:focus {
    border-color: var(--ym-color-primary);
}

.ym-drawer__search-input::placeholder {
    color: var(--ym-color-text-light);
}

.ym-drawer__search-submit {
    flex-shrink: 0;
    height: 40px;
    padding: 0 var(--ym-space-4);
    font-family: var(--ym-font-main);
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-bg);
    background-color: var(--ym-color-primary);
    border: none;
    border-radius: var(--ym-radius-md);
    cursor: pointer;
    transition: background-color var(--ym-transition-fast);
}

.ym-drawer__search-submit:hover {
    background-color: var(--ym-color-primary-dark);
}

/* ==========================================================================
   Body offset for fixed header
   ========================================================================== */

.ym-has-fixed-header {
    padding-top: 56px;
}

@media (min-width: 768px) {
    .ym-has-fixed-header {
        padding-top: 64px;
    }
}
/**
 * YAMELOG Footer Component
 *
 * ダークネイビー背景のフッター。4カラムグリッドレイアウト。
 * モバイルは1カラム、タブレットで2カラム、デスクトップで4カラム。
 *
 * Structure:
 *   footer.ym-footer
 *     div.ym-footer__inner.ym-container
 *       div.ym-footer__columns          (grid container)
 *         div.ym-footer__column (x4)    (grid items)
 *           h3.ym-footer__heading
 *           ul.ym-footer__list
 *             li.ym-footer__list-item
 *               a.ym-footer__link
 *           p.ym-footer__description
 *       div.ym-footer__bottom
 *         p.ym-footer__copyright
 *         a.ym-footer__badge
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Footer Root
   ========================================================================== */

.ym-footer {
    background-color: var(--ym-color-primary-700);
    color: rgba(255, 255, 255, 0.85);
    padding-top: var(--ym-space-12);
    padding-bottom: 0;
}

/* ==========================================================================
   Footer Inner
   max-width / padding は .ym-container が処理するため、ここでは不要。
   ========================================================================== */

.ym-footer__inner {
    padding-bottom: var(--ym-space-12);
}

/* ==========================================================================
   Footer Columns (Grid Container)
   ========================================================================== */

.ym-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ym-space-8);
}

@media (min-width: 768px) {
    .ym-footer__columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ym-footer__columns {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Footer Column (Grid Item)
   ========================================================================== */

.ym-footer__column {
    min-width: 0;
}

/* ==========================================================================
   Footer Heading
   ========================================================================== */

.ym-footer__heading {
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0;
    margin-bottom: var(--ym-space-4);
    padding-bottom: var(--ym-space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   Footer Links
   ========================================================================== */

.ym-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ym-footer__list-item {
    margin-bottom: var(--ym-space-2);
}

/* wp_nav_menu が出力する li にはクラスが付かないため、子孫セレクタでも対応 */
.ym-footer__list li {
    margin-bottom: var(--ym-space-2);
}

.ym-footer__link {
    display: inline-block;
    font-size: var(--ym-font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--ym-transition-fast);
}

.ym-footer__link:hover {
    color: #fff;
    text-decoration: underline;
}

/* wp_nav_menu が出力する a タグにはクラスが付かないため、リスト内リンクにも対応 */
.ym-footer__list a {
    display: inline-block;
    font-size: var(--ym-font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--ym-transition-fast);
}

.ym-footer__list a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ==========================================================================
   Footer Description (About Section)
   ========================================================================== */

.ym-footer__description {
    font-size: var(--ym-font-size-sm);
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--ym-line-height-normal);
    margin: 0;
}

/* ==========================================================================
   Footer Bottom (Copyright + Badge)
   ========================================================================== */

.ym-footer__bottom {
    background-color: var(--ym-color-primary-800);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--ym-space-4);
    padding-bottom: var(--ym-space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ym-space-3);
    text-align: center;
}

@media (min-width: 768px) {
    .ym-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.ym-footer__copyright {
    font-size: var(--ym-font-size-xs);
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* ==========================================================================
   JPSM GROUP Badge
   ========================================================================== */

.ym-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-2);
    font-size: var(--ym-font-size-xs);
    color: rgba(255, 255, 255, 0.4);
    padding: var(--ym-space-1) var(--ym-space-3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ym-radius-sm);
    transition: border-color var(--ym-transition-fast), color var(--ym-transition-fast);
}

.ym-footer__badge:hover {
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
}
/**
 * YAMELOG Service Card Component
 *
 * サービスカード。一覧ページ・ランキング・関連サービスで再利用する。
 * 左ボーダーアクセント、hover でシャドウ昇格。
 * モバイルファースト設計：モバイルは縦積み、タブレット以上は横レイアウト。
 *
 * Template: template-parts/content-service-card.php
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Generic Card Base
   ========================================================================== */

.ym-card {
    background-color: #fff;
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-lg);
    box-shadow: var(--ym-shadow-card);
    transition: var(--ym-transition-smooth);
}

.ym-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ym-shadow-card-hover);
    border-color: var(--ym-color-primary-200);
}

/* -- Card Variants -------------------------------------------------------- */

.ym-card--featured {
    border-top: 3px solid var(--ym-color-gold);
}

.ym-card--top3 {
    border-left: 4px solid var(--ym-color-primary);
}

/* -- Card Thumbnail ------------------------------------------------------- */

.ym-card__thumbnail {
    overflow: hidden;
}

.ym-card__thumbnail img {
    transition: var(--ym-transition-smooth);
}

.ym-card:hover .ym-card__thumbnail img {
    transform: scale(1.05);
}

/* ==========================================================================
   Service Card Base
   ========================================================================== */

.ym-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-left: 4px solid var(--ym-color-primary);
    border-radius: var(--ym-radius-md);
    padding: var(--ym-space-4);
    transition: box-shadow var(--ym-transition-normal);
}

.ym-service-card:hover {
    box-shadow: var(--ym-shadow-md);
}

@media (min-width: 768px) {
    .ym-service-card {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--ym-space-6);
        padding: var(--ym-space-6);
    }
}

/* ==========================================================================
   Ranking Variant
   ========================================================================== */

.ym-service-card--ranked {
    padding-top: calc(var(--ym-space-4) + 4px);
}

@media (min-width: 768px) {
    .ym-service-card--ranked {
        padding-top: calc(var(--ym-space-6) + 4px);
    }
}

/* ==========================================================================
   Rank Badge
   ========================================================================== */

.ym-service-card__rank {
    position: absolute;
    top: -1px;
    left: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 36px;
    height: 28px;
    padding: 0 var(--ym-space-2);
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-bold);
    color: #fff;
    background-color: var(--ym-color-text-light);
    border-radius: var(--ym-radius-sm) 0 var(--ym-radius-sm) 0;
    line-height: 1;
    z-index: 1;
}

@media (min-width: 768px) {
    .ym-service-card__rank {
        min-width: 40px;
        height: 32px;
        font-size: var(--ym-font-size-base);
    }
}

.ym-service-card__rank-number {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
}

.ym-service-card__rank-label {
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-medium);
    line-height: 1;
}

/* Rank Color Variants — 1位=金、2位=銀、3位=銅
   テンプレート側で .ym-service-card__rank--{n} クラスを付与して適用 */

.ym-service-card__rank--1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    box-shadow: 0 2px 4px rgba(255, 165, 0, 0.3);
}

.ym-service-card__rank--2 {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    box-shadow: 0 2px 4px rgba(160, 160, 160, 0.3);
}

.ym-service-card__rank--3 {
    background: linear-gradient(135deg, #CD7F32, #B8690E);
    box-shadow: 0 2px 4px rgba(184, 105, 14, 0.3);
}

/* ==========================================================================
   Featured Variant (1位 — フルワイド・強調)
   ========================================================================== */

.ym-service-card--featured {
    border-left-width: 5px;
    border-left-color: #FFD700;
    background: linear-gradient(135deg, #FFFEF5 0%, var(--ym-color-bg) 100%);
    padding: var(--ym-space-6);
}

@media (min-width: 768px) {
    .ym-service-card--featured {
        padding: var(--ym-space-8);
        gap: var(--ym-space-8);
    }

    .ym-service-card--featured .ym-service-card__header {
        width: 140px;
    }

    .ym-service-card--featured .ym-service-card__logo {
        width: 88px;
        height: 88px;
    }

    .ym-service-card--featured .ym-service-card__name {
        font-size: var(--ym-font-size-xl);
    }

    .ym-service-card--featured .ym-service-card__price {
        font-size: var(--ym-font-size-2xl);
    }
}

/* ==========================================================================
   Top3 Variant (2-3位 — 2カラム)
   ========================================================================== */

.ym-service-card--top3 {
    border-left-width: 4px;
}

/* ==========================================================================
   Compact Variant (4-5位 — コンパクトリスト)
   ========================================================================== */

.ym-service-card--compact {
    flex-direction: row;
    align-items: center;
    padding: var(--ym-space-3) var(--ym-space-4);
    gap: var(--ym-space-4);
    border-left-width: 3px;
    border-left-color: var(--ym-color-border);
}

.ym-service-card--compact .ym-service-card__header {
    flex-direction: row;
    align-items: center;
    width: auto;
    margin-bottom: 0;
    text-align: left;
}

.ym-service-card--compact .ym-service-card__logo {
    width: 40px;
    height: 40px;
}

.ym-service-card--compact .ym-service-card__body {
    margin-bottom: 0;
}

.ym-service-card--compact .ym-service-card__price {
    font-size: var(--ym-font-size-lg);
    margin-bottom: var(--ym-space-1);
}

.ym-service-card--compact .ym-service-card__features {
    display: none;
}

.ym-service-card--compact .ym-service-card__footer {
    flex-direction: row;
    align-items: center;
    width: auto;
    border-top: none;
    padding-top: 0;
    gap: var(--ym-space-3);
}

.ym-service-card--compact .ym-service-card__rank {
    position: static;
    min-width: 32px;
    height: 24px;
    font-size: var(--ym-font-size-xs);
    border-radius: var(--ym-radius-sm);
    flex-shrink: 0;
}

.ym-service-card--compact.ym-service-card--ranked {
    padding-top: var(--ym-space-3);
}

/* ==========================================================================
   Card Header (Logo + Info)
   ========================================================================== */

.ym-service-card__header {
    display: flex;
    align-items: center;
    gap: var(--ym-space-3);
    margin-bottom: var(--ym-space-3);
}

@media (min-width: 768px) {
    .ym-service-card__header {
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        width: 120px;
        margin-bottom: 0;
        text-align: center;
    }
}

/* ==========================================================================
   Card Logo
   ========================================================================== */

.ym-service-card__logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.ym-service-card__logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.ym-service-card__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    background-color: var(--ym-color-bg-gray);
}

@media (min-width: 768px) {
    .ym-service-card__logo {
        width: 72px;
        height: 72px;
    }
}

/* ==========================================================================
   Card Info (Name + Badge + Rating)
   ========================================================================== */

.ym-service-card__info {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   Card Name (Title)
   ========================================================================== */

.ym-service-card__name {
    font-size: var(--ym-font-size-lg);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    line-height: var(--ym-line-height-tight);
    margin: 0 0 var(--ym-space-1) 0;
}

.ym-service-card__name-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--ym-transition-fast);
}

.ym-service-card__name-link:hover {
    color: var(--ym-color-primary);
    text-decoration: none;
}

/* ==========================================================================
   Card Badge (Operator Type)
   ========================================================================== */

.ym-service-card__badge {
    margin-bottom: var(--ym-space-1);
}

/* ==========================================================================
   Card Rating
   ========================================================================== */

.ym-service-card__rating {
    display: flex;
    align-items: center;
    gap: var(--ym-space-2);
}

.ym-service-card__review-count {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    white-space: nowrap;
}

/* ==========================================================================
   Card Body (Price + Features)
   ========================================================================== */

.ym-service-card__body {
    flex: 1;
    min-width: 0;
    margin-bottom: var(--ym-space-3);
}

@media (min-width: 768px) {
    .ym-service-card__body {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Card Price
   ========================================================================== */

.ym-service-card__price {
    font-size: var(--ym-font-size-xl);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-primary);
    margin-bottom: var(--ym-space-3);
    line-height: var(--ym-line-height-tight);
}

/* ==========================================================================
   Card Features (Tag List)
   ========================================================================== */

.ym-service-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ym-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   Card Footer (CTA + Actions)
   ========================================================================== */

.ym-service-card__footer {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-3);
    width: 100%;
    margin-top: auto;
    padding-top: var(--ym-space-3);
    border-top: 1px solid var(--ym-color-border);
}

@media (min-width: 768px) {
    .ym-service-card__footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ==========================================================================
   Card CTA
   ========================================================================== */

.ym-service-card__cta {
    flex-shrink: 0;
}

/* ==========================================================================
   Card Actions (Detail Link + Compare)
   ========================================================================== */

.ym-service-card__actions {
    display: flex;
    align-items: center;
    gap: var(--ym-space-4);
}

/* ==========================================================================
   Detail Link
   ========================================================================== */

.ym-service-card__detail-link {
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ym-transition-fast);
}

.ym-service-card__detail-link:hover {
    color: var(--ym-color-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   Compare Checkbox
   ========================================================================== */

.ym-service-card__compare {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-2);
    cursor: pointer;
    white-space: nowrap;
}

.ym-service-card__compare-input {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--ym-color-primary);
    cursor: pointer;
}

.ym-service-card__compare-label {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    transition: color var(--ym-transition-fast);
}

.ym-service-card__compare:hover .ym-service-card__compare-label {
    color: var(--ym-color-text);
}

/* ==========================================================================
   Card Grid Layout
   ========================================================================== */

.ym-service-card-grid {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-4);
}

@media (min-width: 768px) {
    .ym-service-card-grid {
        gap: var(--ym-space-6);
    }
}

/* 2-3列グリッド（コンパクト表示用） */
.ym-service-card-grid--compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ym-space-4);
}

@media (min-width: 768px) {
    .ym-service-card-grid--compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ym-service-card-grid--compact {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* コンパクトグリッド内のカードは縦レイアウト維持 */
.ym-service-card-grid--compact .ym-service-card {
    flex-direction: column;
}

.ym-service-card-grid--compact .ym-service-card__header {
    flex-direction: row;
    width: auto;
    text-align: left;
}

/* ==========================================================================
   Price Display (yamelog_price_display)
   ========================================================================== */

.ym-price {
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-primary);
    white-space: nowrap;
}

.ym-price__yen {
    font-size: 0.85em;
}

.ym-price__tax {
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-regular);
    color: var(--ym-color-text-light);
    margin-left: 2px;
}

/* ==========================================================================
   Feature Tags (yamelog_feature_tags)
   ========================================================================== */

.ym-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ym-space-1) var(--ym-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ym-features__item {
    display: inline-flex;
}

.ym-features__label {
    display: inline-block;
    padding: 2px var(--ym-space-2);
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-primary);
    background-color: var(--ym-color-primary-light);
    border-radius: var(--ym-radius-sm);
    white-space: nowrap;
    line-height: 1.5;
}

/* ==========================================================================
   Logo Placeholder (No Image Fallback)
   ========================================================================== */

.ym-service-card__logo-placeholder,
.ym-ranking-item__logo-placeholder,
.ym-service-hero__logo-placeholder,
.ym-sidebar__service-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--ym-color-primary);
    color: #fff;
    font-family: var(--ym-font-heading);
    font-weight: var(--ym-font-weight-bold);
    border-radius: var(--ym-radius-md);
}

.ym-service-card__logo-placeholder {
    font-size: var(--ym-font-size-xl);
}

.ym-ranking-item__logo-placeholder {
    font-size: var(--ym-font-size-xl);
}

.ym-service-hero__logo-placeholder {
    font-size: var(--ym-font-size-3xl);
}

.ym-sidebar__service-logo-placeholder {
    font-size: var(--ym-font-size-sm);
    border-radius: var(--ym-radius-sm);
}
/**
 * YAMELOG Rating Component
 *
 * 星評価表示（アイコン + 数値）と評価分布バー表示。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Stars (Inline Rating)
   ========================================================================== */

.ym-stars {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-1);
}

.ym-stars__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: var(--ym-color-gold);
}

.ym-stars__icon--empty {
    fill: var(--ym-color-border);
}

.ym-stars__icon--half {
    position: relative;
}

/* 半星: clip-path で左半分のみ表示 */
.ym-stars__icon--half-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    fill: var(--ym-color-gold);
    clip-path: inset(0 50% 0 0);
}

.ym-stars__value {
    font-family: var(--ym-font-number);
    font-size: var(--ym-font-size-lg);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    margin-left: var(--ym-space-1);
    line-height: 1;
}

.ym-stars__count {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    margin-left: var(--ym-space-1);
}

/* Stars size variants */
.ym-stars--sm .ym-stars__icon {
    width: 14px;
    height: 14px;
}

.ym-stars--sm .ym-stars__value {
    font-size: var(--ym-font-size-sm);
}

.ym-stars--lg .ym-stars__icon {
    width: 24px;
    height: 24px;
}

.ym-stars--lg .ym-stars__value {
    font-size: var(--ym-font-size-xl);
}

/* ==========================================================================
   Rating Bar (Distribution)
   ========================================================================== */

.ym-rating-bar {
    display: flex;
    align-items: center;
    gap: var(--ym-space-2);
    margin-bottom: var(--ym-space-2);
}

.ym-rating-bar:last-child {
    margin-bottom: 0;
}

.ym-rating-bar__label {
    flex-shrink: 0;
    width: 36px;
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-text);
    text-align: right;
    white-space: nowrap;
}

.ym-rating-bar__track {
    flex: 1;
    height: 8px;
    background-color: var(--ym-color-bg-gray);
    border-radius: var(--ym-radius-full);
    overflow: hidden;
}

.ym-rating-bar__fill {
    height: 100%;
    background: linear-gradient(135deg, var(--ym-color-secondary), var(--ym-color-primary));
    border-radius: var(--ym-radius-full);
    min-width: 0;
    transition: width var(--ym-transition-normal);
}

.ym-rating-bar__count {
    flex-shrink: 0;
    width: 32px;
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    text-align: right;
}

/* ==========================================================================
   Rating Summary Block
   ========================================================================== */

.ym-rating-summary {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-4);
    padding: var(--ym-space-4);
    background-color: var(--ym-color-bg-gray);
    border-radius: var(--ym-radius-md);
}

@media (min-width: 768px) {
    .ym-rating-summary {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--ym-space-8);
        padding: var(--ym-space-6);
    }
}

.ym-rating-summary__overall {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: var(--ym-space-2);
}

.ym-rating-summary__score {
    font-family: var(--ym-font-number);
    font-size: var(--ym-font-size-3xl);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    line-height: 1;
}

.ym-rating-summary__total {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
}

.ym-rating-summary__bars {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   Progressive Enhancement
   ========================================================================== */

/* Progressive enhancement: hide stars only when JS is ready */
.ym-stars--js-ready .ym-stars__icon {
    opacity: 0;
    transform: scale(0.5);
}
.ym-stars--revealed .ym-stars__icon {
    opacity: 1;
    transform: scale(1);
}
/**
 * YAMELOG Badge Component
 *
 * 運営形態バッジ（弁護士、労働組合、民間）、確認済み、おすすめなど。
 * pill 型の小さなインラインラベル。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Badge Base
   ========================================================================== */

.ym-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-1);
    padding: 2px var(--ym-space-2);
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-medium);
    line-height: 1.4;
    color: #fff;
    background-color: var(--ym-color-text-light);
    border-radius: var(--ym-radius-full);
    white-space: nowrap;
    vertical-align: middle;
}

/* ==========================================================================
   Operator Type Badges
   ========================================================================== */

/* 弁護士 */
.ym-badge--lawyer {
    background-color: var(--ym-color-badge-lawyer);
}

/* 労働組合 */
.ym-badge--union {
    background-color: var(--ym-color-badge-union);
}

/* 民間 */
.ym-badge--private {
    background-color: var(--ym-color-badge-private);
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

/* 確認済み */
.ym-badge--verified {
    background-color: var(--ym-color-success);
}

.ym-badge--verified::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* おすすめ */
.ym-badge--recommended {
    background-color: var(--ym-color-primary);
}

/* ==========================================================================
   Outline Variants
   ========================================================================== */

.ym-badge--outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

.ym-badge--outline.ym-badge--lawyer {
    color: var(--ym-color-badge-lawyer);
}

.ym-badge--outline.ym-badge--union {
    color: var(--ym-color-badge-union);
}

.ym-badge--outline.ym-badge--private {
    color: var(--ym-color-badge-private);
}

.ym-badge--outline.ym-badge--verified {
    color: var(--ym-color-success);
}

.ym-badge--outline.ym-badge--recommended {
    color: var(--ym-color-primary);
}

/* ==========================================================================
   Size Variant
   ========================================================================== */

.ym-badge--lg {
    padding: var(--ym-space-1) var(--ym-space-3);
    font-size: var(--ym-font-size-sm);
}

/* ==========================================================================
   Editor Badges
   ========================================================================== */

.ym-badge--editor {
    font-weight: var(--ym-font-weight-bold);
    padding: var(--ym-space-1) var(--ym-space-3);
    font-size: var(--ym-font-size-xs);
}

.ym-badge--editor-recommended {
    background: linear-gradient(135deg, #0F766E, #0D9488);
    color: #fff;
}

.ym-badge--editor-cospa {
    background: linear-gradient(135deg, #F97316, #FB923C);
    color: #fff;
}

.ym-badge--editor-beginner {
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    color: #fff;
}

.ym-badge--editor-lawyer_safe {
    background: linear-gradient(135deg, #805AD5, #9F7AEA);
    color: #fff;
}

.ym-service-card__editor-badge {
    margin-bottom: var(--ym-space-1);
}

/* ==========================================================================
   Rank Badge (Circle — Gold / Silver / Bronze)
   ========================================================================== */

.ym-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-family: var(--ym-font-number);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    line-height: 1;
}

.ym-rank-badge--1 {
    background: linear-gradient(135deg, #d4a843, #f0d68a);
    box-shadow: 0 2px 8px rgba(212, 168, 67, 0.4);
}

.ym-rank-badge--2 {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
}

.ym-rank-badge--3 {
    background: linear-gradient(135deg, #b87333, #d4956a);
}

.ym-rank-badge--default {
    background: var(--ym-color-primary-400);
}

/* ==========================================================================
   Expert Badge (Supervised-by indicator)
   ========================================================================== */

.ym-expert-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-2);
    padding: var(--ym-space-1) var(--ym-space-3);
    background: var(--ym-color-expert-light);
    border: 1px solid var(--ym-color-primary-200);
    border-radius: var(--ym-radius-full);
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-primary);
}

.ym-expert-badge__icon {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   Update Badge (Last-updated indicator)
   ========================================================================== */

.ym-update-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-1);
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
}
/**
 * YAMELOG Button Component
 *
 * CTA・セカンダリ・アウトラインなどのボタンスタイル。
 * モバイル固定フッターのスティッキーCTAもここで定義。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Button Base
   ========================================================================== */

.ym-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ym-space-2);
    padding: var(--ym-space-2) var(--ym-space-4);
    font-family: var(--ym-font-main);
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-medium);
    line-height: 1.5;
    color: var(--ym-color-bg);
    background-color: var(--ym-color-primary);
    border: 2px solid transparent;
    border-radius: var(--ym-radius-md);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ym-transition-fast),
                color var(--ym-transition-fast),
                border-color var(--ym-transition-fast),
                box-shadow var(--ym-transition-fast),
                transform var(--ym-transition-fast);
    -webkit-user-select: none;
    user-select: none;
}

.ym-btn:hover {
    background-color: var(--ym-color-primary-dark);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--ym-shadow-sm);
}

.ym-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.ym-btn:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: 2px;
}

.ym-btn:disabled,
.ym-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   Primary Button
   ========================================================================== */

.ym-btn--primary {
    background-color: var(--ym-color-primary);
    color: #fff;
}

.ym-btn--primary:hover {
    background-color: var(--ym-color-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--ym-shadow-sm);
}

.ym-btn--primary:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   CTA Wrapper (yamelog_affiliate_button)
   ========================================================================== */

.ym-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ym-space-2);
}

.ym-cta__tag {
    display: flex;
    justify-content: center;
}

.ym-cta__sub {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    margin: 0;
    text-align: center;
}

/* ==========================================================================
   Affiliate Text Link (yamelog_affiliate_link)
   ========================================================================== */

.ym-affiliate-link {
    color: var(--ym-color-primary);
    font-weight: var(--ym-font-weight-medium);
    text-decoration: underline;
    transition: color var(--ym-transition-fast);
}

.ym-affiliate-link:hover {
    color: var(--ym-color-primary-dark);
}

/* ==========================================================================
   CTA Button — オレンジグラデーション + バウンス
   ========================================================================== */

.ym-btn--cta {
    padding: var(--ym-space-3) var(--ym-space-8);
    font-size: var(--ym-font-size-base);
    font-weight: var(--ym-font-weight-bold);
    background: linear-gradient(135deg, var(--ym-color-cta), var(--ym-color-cta-dark));
    color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
    transition: transform var(--ym-transition-bounce),
                box-shadow var(--ym-transition-bounce);
}

.ym-btn--cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--ym-shadow-cta);
    color: #fff;
}

.ym-btn--cta:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(249, 115, 22, 0.3);
}

.ym-btn--cta:focus-visible {
    outline: 2px solid var(--ym-color-cta);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .ym-btn--cta {
        padding: var(--ym-space-4) var(--ym-space-12);
        font-size: var(--ym-font-size-lg);
    }
}

/* ==========================================================================
   Secondary Button — 白背景 + ネイビーボーダー
   ========================================================================== */

.ym-btn--secondary {
    background-color: #fff;
    color: var(--ym-color-primary);
    border-color: var(--ym-color-primary);
}

.ym-btn--secondary:hover {
    background-color: var(--ym-color-primary-50);
    color: var(--ym-color-primary);
    border-color: var(--ym-color-primary);
    box-shadow: none;
    transform: none;
}

.ym-btn--secondary:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Ghost Button — 透明背景、テキストのみ
   ========================================================================== */

.ym-btn--ghost {
    background-color: transparent;
    color: var(--ym-color-primary);
    border-color: transparent;
    box-shadow: none;
}

.ym-btn--ghost:hover {
    background-color: var(--ym-color-primary-50);
    color: var(--ym-color-primary);
    box-shadow: none;
    transform: none;
}

.ym-btn--ghost:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Outline Button
   ========================================================================== */

.ym-btn--outline {
    background-color: transparent;
    color: var(--ym-color-primary);
    border-color: var(--ym-color-primary);
}

.ym-btn--outline:hover {
    background-color: var(--ym-color-primary);
    color: #fff;
}

.ym-btn--outline:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

.ym-btn--sm {
    padding: var(--ym-space-1) var(--ym-space-3);
    font-size: var(--ym-font-size-xs);
    border-radius: var(--ym-radius-sm);
}

.ym-btn--lg {
    padding: var(--ym-space-3) var(--ym-space-6);
    font-size: var(--ym-font-size-lg);
}

/* ==========================================================================
   Block Button (Full Width)
   ========================================================================== */

.ym-btn--block {
    display: flex;
    width: 100%;
}

/* ==========================================================================
   Sticky CTA (Mobile Fixed Footer)
   ========================================================================== */

.ym-btn--sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: var(--ym-z-sticky);
    border-radius: 0;
    padding: var(--ym-space-3) var(--ym-space-4);
    font-size: var(--ym-font-size-base);
    font-weight: var(--ym-font-weight-bold);
    background-color: var(--ym-color-primary);
    color: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    transform: none;
}

.ym-btn--sticky:hover {
    background-color: var(--ym-color-primary-dark);
    transform: none;
}

@media (min-width: 768px) {
    .ym-btn--sticky {
        position: static;
        width: auto;
        border-radius: var(--ym-radius-md);
        box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
    }
}

/* ==========================================================================
   Escape Button — 深緑グラデーション（解放ゾーンCTA）
   ========================================================================== */

.ym-btn--escape {
    padding: var(--ym-space-3) var(--ym-space-8);
    font-size: var(--ym-font-size-base);
    font-weight: var(--ym-font-weight-bold);
    background: linear-gradient(135deg, var(--ym-color-escape), var(--ym-color-escape-dark));
    color: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4);
    transition: transform var(--ym-transition-bounce),
                box-shadow var(--ym-transition-bounce);
}

.ym-btn--escape:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.5);
    color: #fff;
}

.ym-btn--escape:active {
    transform: scale(0.98);
}

.ym-btn--escape:focus-visible {
    outline: 2px solid var(--ym-color-escape);
    outline-offset: 2px;
}

/* ==========================================================================
   XL Button Size
   ========================================================================== */

.ym-btn--xl {
    padding: var(--ym-space-4) var(--ym-space-12);
    font-size: var(--ym-font-size-lg);
    border-radius: var(--ym-radius-lg);
}

@media (min-width: 768px) {
    .ym-btn--xl {
        font-size: var(--ym-font-size-xl);
        padding: var(--ym-space-4) var(--ym-space-16);
    }
}

/* ==========================================================================
   Full Width Button
   ========================================================================== */

.ym-btn--full {
    display: flex;
    width: 100%;
}

/* ==========================================================================
   Outline White Button (for dark backgrounds)
   ========================================================================== */

.ym-btn--outline-white {
    background-color: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.ym-btn--outline-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
}

/* ==========================================================================
   Arrow inside button
   ========================================================================== */

.ym-btn__arrow {
    display: inline-block;
    transition: transform var(--ym-transition-fast);
}

.ym-btn:hover .ym-btn__arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   Icon within Button
   ========================================================================== */

.ym-btn__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ym-btn--sm .ym-btn__icon {
    width: 14px;
    height: 14px;
}

.ym-btn--lg .ym-btn__icon,
.ym-btn--cta .ym-btn__icon {
    width: 20px;
    height: 20px;
}
/**
 * YAMELOG Form Component
 *
 * フォーム入力要素とフィルタUI。
 * テキスト入力、セレクト、チェックボックス、レンジスライダー。
 * フィルタのモバイル折りたたみ対応。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Form Container
   ========================================================================== */

.ym-form {
    width: 100%;
}

/* ==========================================================================
   Form Group
   ========================================================================== */

.ym-form__group {
    margin-bottom: var(--ym-space-4);
}

.ym-form__group:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Label
   ========================================================================== */

.ym-form__label {
    display: block;
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-secondary);
    margin-bottom: var(--ym-space-2);
}

.ym-form__label--required::after {
    content: '*';
    color: var(--ym-color-danger);
    margin-left: var(--ym-space-1);
}

/* ==========================================================================
   Text Input
   ========================================================================== */

.ym-form__input {
    display: block;
    width: 100%;
    padding: var(--ym-space-2) var(--ym-space-3);
    font-family: var(--ym-font-main);
    font-size: var(--ym-font-size-base);
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    line-height: var(--ym-line-height-normal);
    transition: border-color var(--ym-transition-fast),
                box-shadow var(--ym-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.ym-form__input::placeholder {
    color: var(--ym-color-text-light);
    opacity: 0.7;
}

.ym-form__input:focus {
    outline: none;
    border-color: var(--ym-color-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.ym-form__input:disabled {
    background-color: var(--ym-color-bg-gray);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Validation states */
.ym-form__input--error {
    border-color: var(--ym-color-danger);
}

.ym-form__input--error:focus {
    box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.15);
}

.ym-form__error {
    display: block;
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-danger);
    margin-top: var(--ym-space-1);
}

/* ==========================================================================
   Select
   ========================================================================== */

.ym-form__select {
    display: block;
    width: 100%;
    padding: var(--ym-space-2) var(--ym-space-8) var(--ym-space-2) var(--ym-space-3);
    font-family: var(--ym-font-main);
    font-size: var(--ym-font-size-base);
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5568' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ym-space-3) center;
    background-size: 12px;
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    line-height: var(--ym-line-height-normal);
    transition: border-color var(--ym-transition-fast),
                box-shadow var(--ym-transition-fast);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.ym-form__select:focus {
    outline: none;
    border-color: var(--ym-color-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

/* ==========================================================================
   Checkbox Group
   ========================================================================== */

.ym-form__checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ym-space-3);
}

.ym-form__checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-2);
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-text);
    cursor: pointer;
}

.ym-form__checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ym-color-primary);
    cursor: pointer;
}

.ym-form__checkbox-item input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ym-color-primary);
    cursor: pointer;
}

/* ==========================================================================
   Range Slider
   ========================================================================== */

.ym-form__range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--ym-color-bg-gray);
    border-radius: var(--ym-radius-full);
    outline: none;
    cursor: pointer;
}

.ym-form__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--ym-color-primary);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: var(--ym-shadow-sm);
    cursor: pointer;
    transition: transform var(--ym-transition-fast);
}

.ym-form__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--ym-color-primary);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: var(--ym-shadow-sm);
    cursor: pointer;
}

.ym-form__range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.ym-form__range-values {
    display: flex;
    justify-content: space-between;
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    margin-top: var(--ym-space-1);
}

/* ==========================================================================
   Filter Form
   ========================================================================== */

.ym-filter {
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    overflow: hidden;
}

.ym-filter__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ym-space-3) var(--ym-space-4);
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-filter__section {
    padding: var(--ym-space-4);
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-filter__section:last-child {
    border-bottom: none;
}

.ym-filter__section-title {
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ym-space-3);
}

/* ==========================================================================
   Filter Toggle (Mobile)
   ========================================================================== */

.ym-filter__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ym-space-2);
    width: 100%;
    padding: var(--ym-space-3) var(--ym-space-4);
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-primary);
    background: none;
    border: 1px solid var(--ym-color-primary);
    border-radius: var(--ym-radius-md);
    cursor: pointer;
    transition: background-color var(--ym-transition-fast);
}

.ym-filter__toggle:hover {
    background-color: var(--ym-color-primary-light);
}

.ym-filter__toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--ym-transition-normal);
}

.ym-filter__toggle--open .ym-filter__toggle-icon {
    transform: rotate(180deg);
}

@media (min-width: 768px) {
    .ym-filter__toggle {
        display: none;
    }
}

.ym-filter__body {
    display: none;
}

.ym-filter__body--open {
    display: block;
}

@media (min-width: 768px) {
    .ym-filter__body {
        display: block;
    }
}

/* ==========================================================================
   Filter Actions
   ========================================================================== */

.ym-filter__actions {
    display: flex;
    gap: var(--ym-space-2);
    padding: var(--ym-space-4);
    border-top: 1px solid var(--ym-color-border);
}
/**
 * YAMELOG Table Component
 *
 * データテーブル（比較表、スペック表）。
 * モバイルでは横スクロール対応。
 * モバイルファースト設計。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Table Wrapper (Responsive Horizontal Scroll)
   ========================================================================== */

.ym-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
}

.ym-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.ym-table-wrap::-webkit-scrollbar-track {
    background-color: var(--ym-color-bg-gray);
}

.ym-table-wrap::-webkit-scrollbar-thumb {
    background-color: var(--ym-color-border);
    border-radius: var(--ym-radius-full);
}

/* Scroll hint (mobile shadow) */
.ym-table-wrap--scrollable {
    position: relative;
}

.ym-table-wrap--scrollable::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.06), transparent);
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--ym-transition-fast);
}

.ym-table-wrap--scrolled-end::after {
    opacity: 0;
}

/* ==========================================================================
   Table Base
   ========================================================================== */

.ym-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: var(--ym-font-size-sm);
    line-height: var(--ym-line-height-normal);
    background-color: var(--ym-color-bg);
}

/* ==========================================================================
   Table Head
   ========================================================================== */

.ym-table__head {
    background-color: var(--ym-color-bg-gray);
}

.ym-table__head th {
    padding: var(--ym-space-3) var(--ym-space-4);
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--ym-color-border);
}

/* ==========================================================================
   Table Body
   ========================================================================== */

.ym-table__body tr {
    border-bottom: 1px solid var(--ym-color-border);
    transition: background-color var(--ym-transition-fast);
}

.ym-table__body tr:last-child {
    border-bottom: none;
}

.ym-table__body tr:hover {
    background-color: var(--ym-color-bg-gray);
}

.ym-table__body td {
    padding: var(--ym-space-3) var(--ym-space-4);
    color: var(--ym-color-text);
    vertical-align: middle;
}

/* ==========================================================================
   Table Cell Variants
   ========================================================================== */

/* Row header (sticky first column) */
.ym-table__row-header {
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-secondary);
    white-space: nowrap;
    background-color: var(--ym-color-bg-gray);
    position: sticky;
    left: 0;
    z-index: 1;
}

/* Numeric cell */
.ym-table__cell--number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Highlight cell */
.ym-table__cell--highlight {
    color: var(--ym-color-primary);
    font-weight: var(--ym-font-weight-bold);
}

/* Success cell */
.ym-table__cell--success {
    color: var(--ym-color-success);
}

/* Danger cell */
.ym-table__cell--danger {
    color: var(--ym-color-danger);
}

/* Center aligned cell */
.ym-table__cell--center {
    text-align: center;
}

/* ==========================================================================
   Table Variant: Spec Table
   ========================================================================== */

.ym-table--spec {
    min-width: auto;
}

.ym-table--spec th,
.ym-table--spec td {
    padding: var(--ym-space-3) var(--ym-space-4);
}

.ym-table--spec th {
    width: 35%;
    background-color: var(--ym-color-bg-gray);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-text-light);
    font-size: var(--ym-font-size-sm);
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
}

.ym-table--spec td {
    font-weight: var(--ym-font-weight-regular);
}

.ym-table--spec tr {
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-table--spec tr:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Table Variant: Compare Table
   ========================================================================== */

.ym-table--compare {
    min-width: 700px;
    table-layout: fixed;
}

.ym-table--compare th,
.ym-table--compare td {
    text-align: center;
    padding: var(--ym-space-3) var(--ym-space-4);
    width: auto;
}

.ym-table--compare th:first-child,
.ym-table--compare td:first-child {
    text-align: left;
    width: 160px;
    position: sticky;
    left: 0;
    background-color: var(--ym-color-bg-gray);
    z-index: 1;
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-text-light);
    font-size: var(--ym-font-size-xs);
}

.ym-table--compare .ym-table__head th:first-child {
    background-color: var(--ym-color-bg-gray);
}

/* Compare column highlight */
.ym-table--compare .ym-table__col--best {
    background-color: var(--ym-color-primary-light);
}

/* ==========================================================================
   Table Variant: Striped
   ========================================================================== */

.ym-table--striped .ym-table__body tr:nth-child(even) {
    background-color: var(--ym-color-bg-gray);
}

.ym-table--striped .ym-table__body tr:nth-child(even):hover {
    background-color: var(--ym-color-border);
}

/* ==========================================================================
   Table Variant: Compact
   ========================================================================== */

.ym-table--compact th,
.ym-table--compact td {
    padding: var(--ym-space-2) var(--ym-space-3);
    font-size: var(--ym-font-size-xs);
}

/* ==========================================================================
   Table Caption
   ========================================================================== */

.ym-table__caption {
    padding: var(--ym-space-3) var(--ym-space-4);
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    text-align: left;
    caption-side: bottom;
}

/* ==========================================================================
   Table Check / Cross Icons
   ========================================================================== */

.ym-table__icon--check {
    display: inline-block;
    width: 18px;
    height: 18px;
    color: var(--ym-color-success);
}

.ym-table__icon--cross {
    display: inline-block;
    width: 18px;
    height: 18px;
    color: var(--ym-color-danger);
}

.ym-table__icon--dash {
    display: inline-block;
    width: 18px;
    height: 18px;
    color: var(--ym-color-text-light);
}

/* ==========================================================================
   Responsive: Desktop Enhancements
   ========================================================================== */

@media (min-width: 768px) {
    .ym-table {
        font-size: var(--ym-font-size-base);
    }

    .ym-table__head th {
        padding: var(--ym-space-4) var(--ym-space-6);
        font-size: var(--ym-font-size-sm);
    }

    .ym-table__body td {
        padding: var(--ym-space-4) var(--ym-space-6);
    }
}
/**
 * YAMELOG Review Item Component
 *
 * 口コミカード。サービス情報、投稿者属性、星評価、良い点/気になった点、
 * 退職結果、利用時期・投稿日を表示する。
 * モバイルファースト設計。BEM記法 (.ym-review-item__*)。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Review Card — .ym-review-item
   ========================================================================== */

.ym-review-item {
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    padding: var(--ym-space-4);
    margin-bottom: var(--ym-space-4);
    transition: box-shadow var(--ym-transition-normal);
}

.ym-review-item:hover {
    box-shadow: var(--ym-shadow-sm);
}

.ym-review-item:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .ym-review-item {
        padding: var(--ym-space-6);
    }
}

/* ==========================================================================
   Header — .ym-review-item__header
   ========================================================================== */

.ym-review-item__header {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-2);
    margin-bottom: var(--ym-space-3);
}

@media (min-width: 768px) {
    .ym-review-item__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--ym-space-3);
    }
}

/* ==========================================================================
   Service Link — .ym-review-item__service
   ========================================================================== */

.ym-review-item__service {
    flex-shrink: 0;
}

.ym-review-item__service-link {
    display: inline-block;
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-primary);
    text-decoration: none;
    padding: var(--ym-space-1) var(--ym-space-2);
    background-color: var(--ym-color-primary-light);
    border-radius: var(--ym-radius-sm);
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
}

.ym-review-item__service-link:hover {
    color: var(--ym-color-primary-dark);
    background-color: rgba(15, 118, 110, 0.15);
}

/* ==========================================================================
   Author Info — .ym-review-item__author
   ========================================================================== */

.ym-review-item__author {
    display: flex;
    align-items: center;
    gap: var(--ym-space-2);
    flex-wrap: wrap;
}

.ym-review-item__author-info {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
}

/* ==========================================================================
   Verified Badge — .ym-review-item__verified
   ========================================================================== */

.ym-review-item__verified {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-1);
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-success);
    white-space: nowrap;
}

.ym-review-item__verified svg {
    width: 14px;
    height: 14px;
    fill: var(--ym-color-success);
    flex-shrink: 0;
}

/* ==========================================================================
   Rating — .ym-review-item__rating
   ========================================================================== */

.ym-review-item__rating {
    display: flex;
    align-items: center;
    gap: var(--ym-space-2);
    flex-shrink: 0;
}

/* ==========================================================================
   Title — .ym-review-item__title
   ========================================================================== */

.ym-review-item__title {
    font-size: var(--ym-font-size-base);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    margin: 0 0 var(--ym-space-3);
    line-height: var(--ym-line-height-tight);
}

@media (min-width: 768px) {
    .ym-review-item__title {
        font-size: var(--ym-font-size-lg);
    }
}

/* ==========================================================================
   Body — .ym-review-item__body
   ========================================================================== */

.ym-review-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-3);
    margin-bottom: var(--ym-space-3);
}

@media (min-width: 768px) {
    .ym-review-item__body {
        flex-direction: row;
        gap: var(--ym-space-4);
    }
}

/* ==========================================================================
   Section (Pros / Cons) — .ym-review-item__section
   ========================================================================== */

.ym-review-item__section {
    flex: 1;
    padding: var(--ym-space-3) var(--ym-space-4);
    border-radius: var(--ym-radius-sm);
    font-size: var(--ym-font-size-sm);
    line-height: var(--ym-line-height-normal);
}

/* -- Pros variant --------------------------------------------------------- */

.ym-review-item__section--pros {
    background-color: rgba(72, 187, 120, 0.08);
    border-left: 3px solid var(--ym-color-success);
}

/* -- Cons variant --------------------------------------------------------- */

.ym-review-item__section--cons {
    background-color: rgba(245, 101, 101, 0.08);
    border-left: 3px solid var(--ym-color-danger);
}

/* ==========================================================================
   Section Title — .ym-review-item__section-title
   ========================================================================== */

.ym-review-item__section-title {
    display: flex;
    align-items: center;
    gap: var(--ym-space-2);
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-bold);
    letter-spacing: 0.05em;
    margin: 0 0 var(--ym-space-2);
}

.ym-review-item__section-title svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ym-review-item__section-title--pros {
    color: var(--ym-color-success);
}

.ym-review-item__section-title--cons {
    color: var(--ym-color-danger);
}

/* ==========================================================================
   Section Text — .ym-review-item__text
   ========================================================================== */

.ym-review-item__text {
    margin: 0;
    color: var(--ym-color-text);
    font-size: var(--ym-font-size-sm);
    line-height: var(--ym-line-height-normal);
}

/* ==========================================================================
   Footer — .ym-review-item__footer
   ========================================================================== */

.ym-review-item__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ym-space-2) var(--ym-space-4);
    padding-top: var(--ym-space-3);
    border-top: 1px solid var(--ym-color-border);
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
}

/* ==========================================================================
   Result Badge — .ym-review-item__result
   ========================================================================== */

.ym-review-item__result {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-1);
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-medium);
    padding: var(--ym-space-1) var(--ym-space-2);
    border-radius: var(--ym-radius-sm);
    white-space: nowrap;
}

.ym-review-item__result--success {
    color: var(--ym-color-success);
    background-color: rgba(72, 187, 120, 0.1);
}

.ym-review-item__result--partial {
    color: var(--ym-color-star);
    background-color: rgba(246, 173, 85, 0.1);
}

.ym-review-item__result--failure {
    color: var(--ym-color-danger);
    background-color: rgba(245, 101, 101, 0.1);
}

/* ==========================================================================
   Date / Posted — .ym-review-item__date, .ym-review-item__posted
   ========================================================================== */

.ym-review-item__date,
.ym-review-item__posted {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-1);
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    white-space: nowrap;
}

/* ==========================================================================
   Review List Container (kept for layout context)
   ========================================================================== */

.ym-review-list {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-4);
}

@media (min-width: 768px) {
    .ym-review-list {
        gap: var(--ym-space-6);
    }
}

/* ==========================================================================
   Review Empty State (kept for layout context)
   ========================================================================== */

.ym-review-empty {
    text-align: center;
    padding: var(--ym-space-12) var(--ym-space-4);
    color: var(--ym-color-text-light);
    font-size: var(--ym-font-size-sm);
}

.ym-review-empty__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--ym-space-4);
    opacity: 0.4;
}
/**
 * YAMELOG Breadcrumb Component
 *
 * パンくずナビゲーション。区切り文字は「>」。
 * 構造化データ（BreadcrumbList）対応を想定。
 * モバイルファースト設計。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Breadcrumb Container
   ========================================================================== */

.ym-breadcrumb {
    padding: var(--ym-space-3) 0;
    margin-bottom: var(--ym-space-4);
    font-size: var(--ym-font-size-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .ym-breadcrumb {
        font-size: var(--ym-font-size-sm);
        padding: var(--ym-space-4) 0;
        margin-bottom: var(--ym-space-6);
    }
}

/* ==========================================================================
   Breadcrumb List
   ========================================================================== */

.ym-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: var(--ym-space-1);
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

/* ==========================================================================
   Breadcrumb Item
   ========================================================================== */

.ym-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ym-space-1);
    margin-bottom: 0;
}

/* ==========================================================================
   Breadcrumb Separator
   ========================================================================== */

.ym-breadcrumb__sep {
    color: var(--ym-color-border);
    font-size: var(--ym-font-size-xs);
    line-height: 1;
    user-select: none;
}

/* ==========================================================================
   Breadcrumb Link
   ========================================================================== */

.ym-breadcrumb__link {
    color: var(--ym-color-text-light);
    transition: color var(--ym-transition-fast);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ym-breadcrumb__link:hover {
    color: var(--ym-color-primary);
    text-decoration: underline;
}

.ym-breadcrumb__link:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: 2px;
    border-radius: var(--ym-radius-sm);
}

@media (min-width: 768px) {
    .ym-breadcrumb__link {
        max-width: none;
    }
}

/* ==========================================================================
   Breadcrumb Current Page
   ========================================================================== */

.ym-breadcrumb__current {
    color: var(--ym-color-text);
    font-weight: var(--ym-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

@media (min-width: 768px) {
    .ym-breadcrumb__current {
        max-width: none;
    }
}

/* ==========================================================================
   Breadcrumb Home Icon
   ========================================================================== */

.ym-breadcrumb__home-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--ym-color-text-light);
    transition: color var(--ym-transition-fast);
}

.ym-breadcrumb__link:hover .ym-breadcrumb__home-icon {
    color: var(--ym-color-primary);
}
/**
 * YAMELOG Pagination Component
 *
 * ページネーション。active / prev / next / 情報表示。
 * モバイルファースト設計。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Pagination Container
   ========================================================================== */

.ym-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ym-space-4);
    padding: var(--ym-space-8) 0;
}

/* ==========================================================================
   Pagination List
   ========================================================================== */

.ym-pagination__list {
    display: flex;
    align-items: center;
    gap: var(--ym-space-1);
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

/* ==========================================================================
   Pagination Item
   ========================================================================== */

.ym-pagination__item {
    margin-bottom: 0;
}

.ym-pagination__item a,
.ym-pagination__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: var(--ym-space-1) var(--ym-space-2);
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    text-decoration: none;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast),
                border-color var(--ym-transition-fast);
    -webkit-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .ym-pagination__item a,
    .ym-pagination__item span {
        min-width: 40px;
        height: 40px;
        font-size: var(--ym-font-size-base);
    }
}

.ym-pagination__item a:hover {
    color: var(--ym-color-primary);
    border-color: var(--ym-color-primary);
    background-color: var(--ym-color-primary-light);
    text-decoration: none;
}

.ym-pagination__item a:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Active Page
   ========================================================================== */

.ym-pagination__item--active span {
    color: #fff;
    background-color: var(--ym-color-primary);
    border-color: var(--ym-color-primary);
    cursor: default;
}

/* ==========================================================================
   Disabled (Prev/Next at boundary)
   ========================================================================== */

.ym-pagination__item--disabled span {
    color: var(--ym-color-border);
    background-color: var(--ym-color-bg-gray);
    border-color: var(--ym-color-border);
    cursor: not-allowed;
}

/* ==========================================================================
   Dots (Ellipsis)
   ========================================================================== */

.ym-pagination__item--dots span {
    border: none;
    background: none;
    color: var(--ym-color-text-light);
    min-width: 24px;
    padding: 0;
}

/* ==========================================================================
   Prev/Next Icons
   ========================================================================== */

.ym-pagination__item--prev svg,
.ym-pagination__item--next svg {
    width: 16px;
    height: 16px;
}

.ym-pagination__item--prev a,
.ym-pagination__item--next a {
    gap: var(--ym-space-1);
}

/* ==========================================================================
   Page Info Text
   ========================================================================== */

.ym-pagination__info {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    text-align: center;
}

.ym-pagination__info strong {
    color: var(--ym-color-secondary);
    font-weight: var(--ym-font-weight-bold);
}
/**
 * YAMELOG Sidebar Component
 *
 * サイドバー。人気ランキング、運営形態リスト、新着口コミ。
 * モバイルファースト設計。BEM記法（ym-sidebar__*）。
 *
 * クラス名は sidebar.php テンプレートと完全一致。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Sidebar Container
   ========================================================================== */

.ym-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-6);
}

/* ==========================================================================
   Section Base（白背景ウィジェット）
   ========================================================================== */

.ym-sidebar__section {
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    overflow: hidden;
}

/* ==========================================================================
   Section Title
   ========================================================================== */

.ym-sidebar__title {
    display: flex;
    align-items: center;
    gap: var(--ym-space-2);
    padding: var(--ym-space-4);
    margin: 0;
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    border-bottom: 1px solid var(--ym-color-border);
    background-color: var(--ym-color-bg-gray);
}

/* ==========================================================================
   人気サービスTOP5 ランキング
   ========================================================================== */

.ym-sidebar__ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ranking;
}

.ym-sidebar__ranking-item {
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-sidebar__ranking-item:last-child {
    border-bottom: none;
}

.ym-sidebar__ranking-link {
    display: flex;
    align-items: center;
    gap: var(--ym-space-3);
    padding: var(--ym-space-3) var(--ym-space-4);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--ym-transition-fast);
}

.ym-sidebar__ranking-link:hover {
    background-color: var(--ym-color-bg-gray);
    text-decoration: none;
}

/* --- 順位番号 --- */

.ym-sidebar__ranking-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-text-light);
    background-color: var(--ym-color-bg-gray);
    border-radius: var(--ym-radius-full);
    flex-shrink: 0;
    line-height: 1;
}

/* 1位: 金 */
.ym-sidebar__ranking-item:nth-child(1) .ym-sidebar__ranking-rank {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #fff;
}

/* 2位: 銀 */
.ym-sidebar__ranking-item:nth-child(2) .ym-sidebar__ranking-rank {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    color: #fff;
}

/* 3位: 銅 */
.ym-sidebar__ranking-item:nth-child(3) .ym-sidebar__ranking-rank {
    background: linear-gradient(135deg, #CD7F32, #B8690E);
    color: #fff;
}

/* --- ロゴ --- */

.ym-sidebar__ranking-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--ym-radius-sm);
    object-fit: contain;
    border: 1px solid var(--ym-color-border);
    background-color: var(--ym-color-bg-gray);
    flex-shrink: 0;
}

/* --- サービス情報 --- */

.ym-sidebar__ranking-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-1);
}

.ym-sidebar__ranking-name {
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ym-sidebar__ranking-meta {
    display: flex;
    align-items: center;
    gap: var(--ym-space-2);
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
}

.ym-sidebar__ranking-price {
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-text-light);
}

/* ==========================================================================
   運営形態別リスト
   ========================================================================== */

.ym-sidebar__type-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ym-sidebar__type-item {
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-sidebar__type-item:last-child {
    border-bottom: none;
}

.ym-sidebar__type-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ym-space-3) var(--ym-space-4);
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast),
                border-color var(--ym-transition-fast);
}

.ym-sidebar__type-link:hover {
    color: var(--ym-color-primary);
    background-color: var(--ym-color-primary-light);
    text-decoration: none;
}

/* 運営形態カラーアクセント: 弁護士(紫)、労組(青)、民間(緑) */
.ym-sidebar__type-item:nth-child(1) .ym-sidebar__type-link {
    border-left-color: var(--ym-color-badge-lawyer);
}

.ym-sidebar__type-item:nth-child(2) .ym-sidebar__type-link {
    border-left-color: var(--ym-color-badge-union);
}

.ym-sidebar__type-item:nth-child(3) .ym-sidebar__type-link {
    border-left-color: var(--ym-color-badge-private);
}

.ym-sidebar__type-count {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    background-color: var(--ym-color-bg-gray);
    padding: var(--ym-space-1) var(--ym-space-2);
    border-radius: var(--ym-radius-full);
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.ym-sidebar__type-link:hover .ym-sidebar__type-count {
    background-color: var(--ym-color-bg);
}

/* ==========================================================================
   新着口コミ
   ========================================================================== */

.ym-sidebar__review-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ym-sidebar__review-item {
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-sidebar__review-item:last-child {
    border-bottom: none;
}

.ym-sidebar__review-link {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-1);
    padding: var(--ym-space-3) var(--ym-space-4);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--ym-transition-fast);
}

.ym-sidebar__review-link:hover {
    background-color: var(--ym-color-bg-gray);
    text-decoration: none;
}

.ym-sidebar__review-service {
    font-size: var(--ym-font-size-xs);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-primary);
    line-height: var(--ym-line-height-tight);
}

.ym-sidebar__review-title {
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--ym-line-height-tight);
}

.ym-sidebar__review-date {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    line-height: var(--ym-line-height-tight);
}

/* ==========================================================================
   Sticky（デスクトップ）
   ========================================================================== */

@media (min-width: 1024px) {
    .ym-sidebar {
        position: sticky;
        top: calc(64px + var(--ym-space-6));
        max-height: calc(100vh - 64px - var(--ym-space-12));
        overflow-y: auto;
    }

    .ym-sidebar::-webkit-scrollbar {
        width: 4px;
    }

    .ym-sidebar::-webkit-scrollbar-thumb {
        background-color: var(--ym-color-border);
        border-radius: var(--ym-radius-full);
    }
}
/**
 * YAMELOG Accordion Component
 *
 * アコーディオン（FAQ用）。開閉アニメーション付き。
 * アクセシビリティ（aria-expanded、aria-controls）対応を想定。
 * モバイルファースト設計。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Accordion Container
   ========================================================================== */

.ym-accordion {
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    overflow: hidden;
}

/* ==========================================================================
   Accordion Item
   ========================================================================== */

.ym-accordion__item {
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-accordion__item:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Accordion Trigger
   ========================================================================== */

.ym-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ym-space-4);
    width: 100%;
    padding: var(--ym-space-4);
    font-family: var(--ym-font-main);
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-medium);
    color: var(--ym-color-secondary);
    text-align: left;
    background-color: var(--ym-color-bg);
    border: none;
    cursor: pointer;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
    line-height: var(--ym-line-height-normal);
}

@media (min-width: 768px) {
    .ym-accordion__trigger {
        padding: var(--ym-space-4) var(--ym-space-6);
        font-size: var(--ym-font-size-base);
    }
}

.ym-accordion__trigger:hover {
    background-color: var(--ym-color-bg-gray);
}

.ym-accordion__trigger:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: -2px;
}

/* ==========================================================================
   Accordion Label (FAQ Q prefix)
   ========================================================================== */

.ym-accordion__label {
    display: flex;
    align-items: flex-start;
    gap: var(--ym-space-3);
    flex: 1;
    min-width: 0;
}

.ym-accordion__label-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-bold);
    color: #fff;
    background-color: var(--ym-color-primary);
    border-radius: var(--ym-radius-full);
    flex-shrink: 0;
    line-height: 1;
}

.ym-accordion__label-text {
    flex: 1;
    padding-top: var(--ym-space-1);
}

/* ==========================================================================
   Accordion Icon (+/- or Chevron)
   ========================================================================== */

.ym-accordion__icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ym-accordion__icon::before,
.ym-accordion__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--ym-color-text-light);
    border-radius: 1px;
    transition: transform var(--ym-transition-normal),
                background-color var(--ym-transition-fast);
}

.ym-accordion__icon::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.ym-accordion__icon::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

/* Chevron variant */
.ym-accordion__icon--chevron {
    width: 20px;
    height: 20px;
    color: var(--ym-color-text-light);
    transition: transform var(--ym-transition-normal),
                color var(--ym-transition-fast);
}

.ym-accordion__icon--chevron::before,
.ym-accordion__icon--chevron::after {
    display: none;
}

/* ==========================================================================
   Accordion Content
   ========================================================================== */

.ym-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ym-transition-normal);
}

.ym-accordion__content-inner {
    padding: 0 var(--ym-space-4) var(--ym-space-4);
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-text);
    line-height: var(--ym-line-height-normal);
}

@media (min-width: 768px) {
    .ym-accordion__content-inner {
        padding: 0 var(--ym-space-6) var(--ym-space-6);
    }
}

/* Answer prefix for FAQ */
.ym-accordion__answer-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-primary);
    background-color: var(--ym-color-primary-light);
    border-radius: var(--ym-radius-full);
    flex-shrink: 0;
    margin-right: var(--ym-space-3);
    margin-bottom: var(--ym-space-2);
    float: left;
    line-height: 1;
}

/* ==========================================================================
   Open State
   ========================================================================== */

.ym-accordion__item--open .ym-accordion__trigger {
    background-color: var(--ym-color-bg-gray);
}

.ym-accordion__item--open .ym-accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.ym-accordion__item--open .ym-accordion__icon::before,
.ym-accordion__item--open .ym-accordion__icon::after {
    background-color: var(--ym-color-primary);
}

.ym-accordion__item--open .ym-accordion__icon--chevron {
    transform: rotate(180deg);
    color: var(--ym-color-primary);
}

.ym-accordion__item--open .ym-accordion__content {
    max-height: 2000px;
}

/* ==========================================================================
   Variant: Bordered (Each item separate)
   ========================================================================== */

.ym-accordion--bordered {
    border: none;
    border-radius: 0;
}

.ym-accordion--bordered .ym-accordion__item {
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    margin-bottom: var(--ym-space-3);
    overflow: hidden;
}

.ym-accordion--bordered .ym-accordion__item:last-child {
    margin-bottom: 0;
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-accordion--bordered .ym-accordion__item--open {
    border-color: var(--ym-color-primary);
    box-shadow: var(--ym-shadow-sm);
}

/* ==========================================================================
   Variant: Flush (No outer border)
   ========================================================================== */

.ym-accordion--flush {
    border: none;
    border-radius: 0;
}

.ym-accordion--flush .ym-accordion__item {
    border-bottom: 1px solid var(--ym-color-border);
}

.ym-accordion--flush .ym-accordion__item:last-child {
    border-bottom: none;
}
/**
 * YAMELOG Skeleton Component
 *
 * スケルトンローディング（カード、テキスト、画像プレースホルダー）。
 * shimmer アニメーション付き。
 * モバイルファースト設計。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Shimmer Animation
   ========================================================================== */

@keyframes ym-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ==========================================================================
   Skeleton Base
   ========================================================================== */

.ym-skeleton {
    background: linear-gradient(
        90deg,
        var(--ym-color-bg-gray) 25%,
        var(--ym-color-border) 37%,
        var(--ym-color-bg-gray) 63%
    );
    background-size: 200% 100%;
    animation: ym-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--ym-radius-sm);
}

/* ==========================================================================
   Text Skeleton
   ========================================================================== */

.ym-skeleton--text {
    height: 14px;
    margin-bottom: var(--ym-space-2);
    border-radius: var(--ym-radius-sm);
}

.ym-skeleton--text:last-child {
    width: 60%;
    margin-bottom: 0;
}

.ym-skeleton--text-sm {
    height: 12px;
}

.ym-skeleton--text-lg {
    height: 18px;
}

.ym-skeleton--heading {
    height: 24px;
    width: 70%;
    margin-bottom: var(--ym-space-3);
}

.ym-skeleton--heading-lg {
    height: 32px;
    width: 50%;
    margin-bottom: var(--ym-space-4);
}

/* ==========================================================================
   Circle Skeleton (Avatar / Logo)
   ========================================================================== */

.ym-skeleton--circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ym-skeleton--circle-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.ym-skeleton--circle-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* ==========================================================================
   Rectangle Skeleton (Image)
   ========================================================================== */

.ym-skeleton--rect {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: var(--ym-radius-md);
}

.ym-skeleton--rect-square {
    padding-bottom: 100%;
}

/* ==========================================================================
   Card Skeleton
   ========================================================================== */

.ym-skeleton--card {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-3);
    padding: var(--ym-space-4);
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-left: 4px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    animation: none;
}

@media (min-width: 768px) {
    .ym-skeleton--card {
        flex-direction: row;
        gap: var(--ym-space-6);
        padding: var(--ym-space-6);
    }
}

.ym-skeleton--card .ym-skeleton__header {
    display: flex;
    align-items: center;
    gap: var(--ym-space-3);
}

@media (min-width: 768px) {
    .ym-skeleton--card .ym-skeleton__header {
        flex-direction: column;
        align-items: center;
        width: 100px;
        flex-shrink: 0;
    }
}

.ym-skeleton--card .ym-skeleton__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-2);
}

.ym-skeleton--card .ym-skeleton__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--ym-space-3);
    border-top: 1px solid var(--ym-color-border);
}

@media (min-width: 768px) {
    .ym-skeleton--card .ym-skeleton__footer {
        flex-direction: column;
        width: 160px;
        flex-shrink: 0;
        border-top: none;
        border-left: 1px solid var(--ym-color-border);
        padding-top: 0;
        padding-left: var(--ym-space-6);
        justify-content: center;
        gap: var(--ym-space-2);
    }
}

/* Named skeleton elements */
.ym-skeleton__logo {
    width: 48px;
    height: 48px;
    border-radius: var(--ym-radius-md);
}

@media (min-width: 768px) {
    .ym-skeleton__logo {
        width: 60px;
        height: 60px;
    }
}

.ym-skeleton__title {
    height: 18px;
    width: 50%;
}

.ym-skeleton__badge {
    height: 20px;
    width: 60px;
    border-radius: var(--ym-radius-full);
}

.ym-skeleton__rating {
    height: 18px;
    width: 120px;
}

.ym-skeleton__price {
    height: 24px;
    width: 100px;
}

.ym-skeleton__text-line {
    height: 14px;
    width: 100%;
}

.ym-skeleton__text-line--short {
    width: 75%;
}

.ym-skeleton__text-line--xs {
    width: 40%;
}

.ym-skeleton__btn {
    height: 40px;
    width: 120px;
    border-radius: var(--ym-radius-md);
}

.ym-skeleton__btn--block {
    width: 100%;
}

/* ==========================================================================
   Review Skeleton
   ========================================================================== */

.ym-skeleton--review {
    padding: var(--ym-space-4);
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    animation: none;
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-3);
}

@media (min-width: 768px) {
    .ym-skeleton--review {
        padding: var(--ym-space-6);
    }
}

.ym-skeleton--review .ym-skeleton__meta {
    display: flex;
    align-items: center;
    gap: var(--ym-space-3);
}

.ym-skeleton__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ym-skeleton__meta-tag {
    height: 22px;
    width: 56px;
    border-radius: var(--ym-radius-sm);
}

.ym-skeleton__meta-lines {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-1);
    flex: 1;
}

/* ==========================================================================
   Skeleton List (Multiple Cards)
   ========================================================================== */

.ym-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-4);
}

@media (min-width: 768px) {
    .ym-skeleton-list {
        gap: var(--ym-space-6);
    }
}

/* ==========================================================================
   Accessibility: Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ym-skeleton,
    .ym-skeleton--card .ym-skeleton__logo,
    .ym-skeleton--card .ym-skeleton__title,
    .ym-skeleton--card .ym-skeleton__badge,
    .ym-skeleton--card .ym-skeleton__rating,
    .ym-skeleton--card .ym-skeleton__price,
    .ym-skeleton--card .ym-skeleton__text-line,
    .ym-skeleton--card .ym-skeleton__btn,
    .ym-skeleton--review .ym-skeleton__meta-tag,
    .ym-skeleton--review .ym-skeleton__avatar {
        animation: none;
    }
}
/**
 * YAMELOG Modal Component
 *
 * モーダルダイアログ。オーバーレイ、コンテンツ、クローズボタン。
 * アクセシビリティ（focus trap、aria 属性）対応を想定。
 * モバイルファースト設計。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Modal Overlay
   ========================================================================== */

.ym-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--ym-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ym-space-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ym-transition-normal),
                visibility var(--ym-transition-normal);
}

.ym-modal-overlay--visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Modal Container
   ========================================================================== */

.ym-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - var(--ym-space-8));
    background-color: var(--ym-color-bg);
    border-radius: var(--ym-radius-lg);
    box-shadow: var(--ym-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(0.98);
    transition: transform var(--ym-transition-normal);
}

.ym-modal-overlay--visible .ym-modal {
    transform: translateY(0) scale(1);
}

/* ==========================================================================
   Modal Variant: Large
   ========================================================================== */

.ym-modal--lg {
    max-width: 720px;
}

/* ==========================================================================
   Modal Variant: Small
   ========================================================================== */

.ym-modal--sm {
    max-width: 400px;
}

/* ==========================================================================
   Modal Variant: Full Screen (Mobile)
   ========================================================================== */

.ym-modal--fullscreen {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    height: 100%;
}

@media (min-width: 768px) {
    .ym-modal--fullscreen {
        max-width: 720px;
        max-height: calc(100vh - var(--ym-space-8));
        border-radius: var(--ym-radius-lg);
        height: auto;
    }
}

/* ==========================================================================
   Modal Header
   ========================================================================== */

.ym-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ym-space-4);
    padding: var(--ym-space-4) var(--ym-space-6);
    border-bottom: 1px solid var(--ym-color-border);
    flex-shrink: 0;
}

.ym-modal__title {
    font-size: var(--ym-font-size-lg);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    margin: 0;
    line-height: var(--ym-line-height-tight);
}

/* ==========================================================================
   Modal Close Button
   ========================================================================== */

.ym-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--ym-color-text-light);
    border-radius: var(--ym-radius-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
}

.ym-modal__close:hover {
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg-gray);
}

.ym-modal__close:focus-visible {
    outline: 2px solid var(--ym-color-primary);
    outline-offset: 2px;
}

.ym-modal__close-icon {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Modal Body
   ========================================================================== */

.ym-modal__body {
    padding: var(--ym-space-6);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-text);
    line-height: var(--ym-line-height-normal);
}

/* ==========================================================================
   Modal Footer
   ========================================================================== */

.ym-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ym-space-3);
    padding: var(--ym-space-4) var(--ym-space-6);
    border-top: 1px solid var(--ym-color-border);
    flex-shrink: 0;
}

.ym-modal__footer--between {
    justify-content: space-between;
}

.ym-modal__footer--stack {
    flex-direction: column;
}

@media (min-width: 768px) {
    .ym-modal__footer--stack {
        flex-direction: row;
    }
}

/* ==========================================================================
   Body: Lock Scroll When Modal Open
   ========================================================================== */

.ym-body--modal-open {
    overflow: hidden;
}
/**
 * YAMELOG Toast Component
 *
 * トースト通知。success / error / info バリアント。
 * 画面右上に表示、自動消滅アニメーション付き。
 * モバイルファースト設計。
 *
 * @package Yamelog
 * @since 1.0.0
 */

/* ==========================================================================
   Toast Container (Notification Stack)
   ========================================================================== */

.ym-toast-container {
    position: fixed;
    top: calc(56px + var(--ym-space-4));
    right: var(--ym-space-4);
    z-index: calc(var(--ym-z-modal) + 100);
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-3);
    max-width: calc(100vw - var(--ym-space-8));
    width: 360px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .ym-toast-container {
        top: calc(64px + var(--ym-space-6));
        right: var(--ym-space-6);
    }
}

/* Mobile: center bottom */
@media (max-width: 479px) {
    .ym-toast-container {
        top: auto;
        bottom: var(--ym-space-4);
        right: var(--ym-space-4);
        left: var(--ym-space-4);
        width: auto;
        max-width: none;
    }
}

/* ==========================================================================
   Toast Base
   ========================================================================== */

.ym-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ym-space-3);
    padding: var(--ym-space-4);
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
    box-shadow: var(--ym-shadow-lg);
    pointer-events: auto;
    position: relative;
    transform: translateX(100%);
    opacity: 0;
    transition: transform var(--ym-transition-normal),
                opacity var(--ym-transition-normal);
}

.ym-toast--visible {
    transform: translateX(0);
    opacity: 1;
}

.ym-toast--exiting {
    transform: translateX(100%);
    opacity: 0;
}

@media (max-width: 479px) {
    .ym-toast {
        transform: translateY(100%);
    }

    .ym-toast--visible {
        transform: translateY(0);
    }

    .ym-toast--exiting {
        transform: translateY(100%);
    }
}

/* ==========================================================================
   Toast Icon
   ========================================================================== */

.ym-toast__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ==========================================================================
   Toast Content
   ========================================================================== */

.ym-toast__content {
    flex: 1;
    min-width: 0;
}

.ym-toast__title {
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    margin: 0;
    line-height: var(--ym-line-height-tight);
}

.ym-toast__message {
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
    line-height: var(--ym-line-height-normal);
    margin-top: var(--ym-space-1);
}

/* ==========================================================================
   Toast Close
   ========================================================================== */

.ym-toast__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--ym-color-text-light);
    border-radius: var(--ym-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--ym-transition-fast),
                background-color var(--ym-transition-fast);
}

.ym-toast__close:hover {
    color: var(--ym-color-text);
    background-color: var(--ym-color-bg-gray);
}

.ym-toast__close-icon {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   Toast Progress Bar (Auto-dismiss)
   ========================================================================== */

.ym-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 var(--ym-radius-md) var(--ym-radius-md);
    transition: width linear;
}

/* ==========================================================================
   Toast Variant: Success
   ========================================================================== */

.ym-toast--success {
    border-left: 4px solid var(--ym-color-success);
}

.ym-toast--success .ym-toast__icon {
    color: var(--ym-color-success);
}

.ym-toast--success .ym-toast__progress {
    background-color: var(--ym-color-success);
}

/* ==========================================================================
   Toast Variant: Error
   ========================================================================== */

.ym-toast--error {
    border-left: 4px solid var(--ym-color-danger);
}

.ym-toast--error .ym-toast__icon {
    color: var(--ym-color-danger);
}

.ym-toast--error .ym-toast__progress {
    background-color: var(--ym-color-danger);
}

/* ==========================================================================
   Toast Variant: Info
   ========================================================================== */

.ym-toast--info {
    border-left: 4px solid var(--ym-color-primary);
}

.ym-toast--info .ym-toast__icon {
    color: var(--ym-color-primary);
}

.ym-toast--info .ym-toast__progress {
    background-color: var(--ym-color-primary);
}

/* ==========================================================================
   Toast Variant: Warning
   ========================================================================== */

.ym-toast--warning {
    border-left: 4px solid var(--ym-color-star);
}

.ym-toast--warning .ym-toast__icon {
    color: var(--ym-color-star);
}

.ym-toast--warning .ym-toast__progress {
    background-color: var(--ym-color-star);
}
/**
 * アニメーション CSS
 *
 * @package YAMELOG
 */

/* ==========================================================================
   スクロールフェードイン
   ========================================================================== */
.ym-animate-fade {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ym-transition-smooth),
                transform 0.6s var(--ym-transition-smooth);
}

.ym-animate-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   スタガーアニメーション（子要素を順番に表示）
   ========================================================================== */
.ym-animate-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ym-animate-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.ym-animate-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.ym-animate-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.ym-animate-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.ym-animate-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.ym-animate-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; }

/* ==========================================================================
   カウンター
   ========================================================================== */
.ym-counter {
    font-family: var(--ym-font-number);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   読了プログレスバー
   ========================================================================== */
.ym-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--ym-color-primary), var(--ym-color-cta));
    z-index: calc(var(--ym-z-header) + 1);
    transition: width 0.1s linear;
}

/* ==========================================================================
   prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ym-animate-fade,
    .ym-animate-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ym-progress-bar {
        transition: none !important;
    }
}
/**
 * YAMELOG Dark Mode
 *
 * システムのダークモード設定に応じて自動でダークテーマを適用する。
 * variables.css で定義済みの --ym-dark-* トークンを使用。
 *
 * @package Yamelog
 * @since 1.0.0
 */

@media (prefers-color-scheme: dark) {
    :root {
        --ym-color-bg: var(--ym-dark-bg);
        --ym-color-bg-gray: #1e293b;
        --ym-color-border: var(--ym-dark-border);
        --ym-color-text: var(--ym-dark-text);
        --ym-color-text-light: var(--ym-dark-text-muted);
        --ym-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --ym-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
        --ym-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
        --ym-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
        --ym-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    body {
        background-color: var(--ym-dark-bg);
        color: var(--ym-dark-text);
    }

    /* カード */
    .ym-service-card,
    .ym-card,
    .ym-column-card,
    .ym-review-item {
        background-color: var(--ym-dark-bg-card);
        border-color: var(--ym-dark-border);
    }

    /* テーブル */
    .ym-specs-table th,
    table th {
        background-color: rgba(30, 58, 95, 0.3);
    }
    .ym-specs-table td,
    table td {
        border-color: var(--ym-dark-border);
    }

    /* 入力フォーム */
    input, select, textarea {
        background-color: var(--ym-dark-bg-card);
        border-color: var(--ym-dark-border);
        color: var(--ym-dark-text);
    }

    /* サイドバー */
    .ym-sidebar__section {
        background-color: var(--ym-dark-bg-card);
        border-color: var(--ym-dark-border);
    }

    /* 記事コンテンツ */
    .ym-column-single__content blockquote {
        background-color: rgba(30, 58, 95, 0.2);
        border-left-color: var(--ym-color-primary-400);
    }

    /* ヒーローセクション — ダーク時はさらに暗く */
    .ym-top-hero {
        background: linear-gradient(180deg, var(--ym-color-primary-900), var(--ym-color-primary-800));
    }

    /* 画像の明るさ調整 */
    img:not([src*=".svg"]) {
        filter: brightness(0.9);
    }
}
/**
 * YAMELOG Floating TOC Styles
 * FAB + ドロワー。コラム記事ページ専用。
 *
 * @package YAMELOG
 */

/* ==========================================================================
   1. FAB Button
   ========================================================================== */

.ym-toc-fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: var(--ym-color-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.4);
    transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
}

.ym-toc-fab--visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.ym-toc-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.5);
}

.ym-toc-fab:active {
    transform: scale(0.95);
}

/* ==========================================================================
   2. Drawer Container
   ========================================================================== */

.ym-toc {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    visibility: hidden;
}

.ym-toc--open {
    pointer-events: auto;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   2-1. Overlay
   -------------------------------------------------------------------------- */

.ym-toc__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
}

.ym-toc--open .ym-toc__overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   2-2. Panel
   -------------------------------------------------------------------------- */

.ym-toc__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background-color: var(--ym-color-bg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.ym-toc--open .ym-toc__panel {
    transform: translateX(0);
}

/* --------------------------------------------------------------------------
   2-3. Header
   -------------------------------------------------------------------------- */

.ym-toc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ym-space-4) var(--ym-space-5);
    border-bottom: 1px solid var(--ym-color-border);
    flex-shrink: 0;
}

.ym-toc__title {
    font-family: var(--ym-font-heading);
    font-size: var(--ym-font-size-lg);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
}

.ym-toc__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--ym-radius-sm);
    background-color: transparent;
    color: var(--ym-color-text-light);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ym-toc__close:hover {
    background-color: var(--ym-color-bg-gray);
    color: var(--ym-color-text);
}

/* --------------------------------------------------------------------------
   2-4. List
   -------------------------------------------------------------------------- */

.ym-toc__list {
    flex: 1;
    overflow-y: auto;
    padding: var(--ym-space-4) 0;
    -webkit-overflow-scrolling: touch;
}

.ym-toc__link {
    display: block;
    padding: var(--ym-space-2) var(--ym-space-5);
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-text);
    text-decoration: none;
    line-height: var(--ym-line-height-normal);
    border-left: 3px solid transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.ym-toc__link:hover {
    color: var(--ym-color-primary);
    background-color: var(--ym-color-primary-light);
}

.ym-toc__link--h3 {
    padding-left: calc(var(--ym-space-5) + var(--ym-space-4));
    font-size: var(--ym-font-size-xs);
    color: var(--ym-color-text-light);
}

.ym-toc__link--active {
    color: var(--ym-color-primary);
    border-left-color: var(--ym-color-primary);
    background-color: var(--ym-color-primary-light);
    font-weight: var(--ym-font-weight-medium);
}
/**
 * YAMELOG Column CTA Styles
 * 記事中間+末尾のCTAボックス。
 *
 * @package YAMELOG
 */

/* ==========================================================================
   CTA Box
   ========================================================================== */

.ym-article-cta {
    margin: var(--ym-space-10) 0;
}

.ym-article-cta__inner {
    padding: var(--ym-space-6) var(--ym-space-5);
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f7f4 100%);
    border: 1px solid rgba(15, 118, 110, 0.15);
    border-radius: var(--ym-radius-lg);
    text-align: center;
}

@media (min-width: 768px) {
    .ym-article-cta__inner {
        padding: var(--ym-space-8) var(--ym-space-10);
    }
}

.ym-article-cta__heading {
    font-family: var(--ym-font-heading);
    font-size: var(--ym-font-size-lg);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    line-height: var(--ym-line-height-tight);
    margin: 0 0 var(--ym-space-3);
}

@media (min-width: 768px) {
    .ym-article-cta__heading {
        font-size: var(--ym-font-size-xl);
    }
}

.ym-article-cta__text {
    font-size: var(--ym-font-size-sm);
    color: var(--ym-color-text-light);
    line-height: var(--ym-line-height-normal);
    margin: 0 0 var(--ym-space-5);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .ym-article-cta__text {
        font-size: var(--ym-font-size-base);
    }
}

.ym-article-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ym-space-3);
    align-items: center;
}

@media (min-width: 480px) {
    .ym-article-cta__actions {
        flex-direction: row;
        justify-content: center;
    }
}

.ym-article-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ym-space-3) var(--ym-space-6);
    font-size: var(--ym-font-size-sm);
    font-weight: var(--ym-font-weight-bold);
    text-decoration: none;
    border-radius: var(--ym-radius-md);
    transition: all 0.2s ease;
    min-width: 200px;
}

.ym-article-cta__btn--primary {
    background: linear-gradient(135deg, var(--ym-color-escape) 0%, var(--ym-color-escape-dark) 100%);
    color: #fff;
    border: 2px solid var(--ym-color-escape);
}

.ym-article-cta__btn--primary:hover {
    background: linear-gradient(135deg, var(--ym-color-escape-dark) 0%, #0f3d1f 100%);
    border-color: var(--ym-color-escape-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
}

.ym-article-cta__btn--secondary {
    background-color: var(--ym-color-bg);
    color: var(--ym-color-escape-dark);
    border: 2px solid var(--ym-color-escape);
}

.ym-article-cta__btn--secondary:hover {
    background-color: var(--ym-color-bg-escape);
    color: var(--ym-color-escape-dark);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   End CTA variant
   -------------------------------------------------------------------------- */

.ym-article-cta--end {
    margin-top: var(--ym-space-12);
    margin-bottom: 0;
}

.ym-article-cta--end .ym-article-cta__inner {
    background: linear-gradient(135deg, var(--ym-color-bg-escape) 0%, #dcfce7 100%);
    border-color: var(--ym-color-escape-border);
}
/**
 * YAMELOG Radar Chart Component
 *
 * @package Yamelog
 * @since 1.0.0
 */

.ym-radar-chart {
    margin-bottom: var(--ym-space-8);
}

.ym-radar-chart__heading {
    font-size: var(--ym-font-size-xl);
    font-weight: var(--ym-font-weight-bold);
    color: var(--ym-color-secondary);
    margin: 0 0 var(--ym-space-4);
}

.ym-radar-chart__wrap {
    display: flex;
    justify-content: center;
    padding: var(--ym-space-4);
    background-color: var(--ym-color-bg);
    border: 1px solid var(--ym-color-border);
    border-radius: var(--ym-radius-md);
}

.ym-radar-chart__canvas {
    max-width: 360px;
    max-height: 360px;
    width: 100%;
    height: auto;
}

@media (max-width: 480px) {
    .ym-radar-chart__canvas {
        max-width: 280px;
        max-height: 280px;
    }
}