/* =========================================
   Base Reset & Variables (Design System)
   ========================================= */
:root {
    /* --- 1. Color Palette --- */
    --primary-blue: #1d4ab0;
    --accent-blue: #277aff;  
    --yellow: #ffcc5d;       
    --marker-yellow: #ffff66; /* 蛍光ペンなど */
    --red: #ef4444;          
    --red-hover: #dc2626;    
    --orange: #f59e0b;       
    --orange-text: #f50;
    --white: #ffffff;
    
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-250: #cad0d7;
    --slate-300: #dbedfe;
    --slate-400: #94a3b8;
    --slate-600: #475569;
    --slate-700: #333333;
    
    --grey-200: #ddd;
    --grey-300: #f6f5f2;
    
    --blue-100: #dbeafe;      /* アイコン背景など */
    --blue-350: #b7dbfd;
    --blue-600: #3b82f6;

    /* --- 2. Typography (px Scale) --- */
    --fz-8: 8px;   /* 免責事項・注釈マーク */
    --fz-10: 10px; /* 注釈、プロフ肩書き */
    --fz-13: 13px; /* 会社情報、ボタン小 */
    --fz-14: 14px; /* スマホ基本サイズ、アイコン横 */
    --fz-16: 16px; /* PC基本サイズ、リスト */
    --fz-18: 18px; /* 小見出し、強調 */
    --fz-20: 20px; /* 中見出し (旧:1.25rem等) */
    --fz-22: 22px; /* CTAボタンなど */
    --fz-24: 24px; /* 大見出し、ピックアップ名 */
    --fz-28: 28px; /* セクションタイトル (旧:1.8rem等) */

    /* 記事用固有設定 */
    --article-line-height: 1.8;
    --article-font-size: var(--fz-16);
    --article-spacing: 24px; /* 旧 1.5rem */

    /* --- 3. Shadows --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: var(--white);
    color: var(--slate-700);
    line-height: 1.6;
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

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

/* =========================================
   Layout & Components
   ========================================= */
.max-w-6xl {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 12px; /* 0.75rem -> 12px */
}
@media (max-width: 768px) {
    .max-w-6xl {
        padding: 0px 8px;
    }
}

.header {
    background-color: var(--white);
    border-bottom: 1px solid var(--grey-200);
    box-shadow: var(--shadow-sm);
}

.header-inner {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: var(--fz-16);
    font-weight: 700;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
}

.logo-icon {
    max-width: 20px;
    height: auto;
}

.logo-text {
    line-height: 1;
    margin-left: 4px;
}

.nav-links {
    display: none;
    gap: 24px;
    font-size: var(--fz-16);
    font-weight: 500;
}

@media (min-width: 1024px) {
    .nav-links {
        display: flex;
    }
}

.nav-links a:hover {
    color: var(--accent-blue);
}

.hero {
    background-color: var(--white);
    padding: 0;
    text-align: center;
    overflow: hidden;
}

.hero-main-img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.hero-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: var(--fz-13);
    color: var(--slate-700);
}

@media (max-width: 768px) {
    .hero .max-w-6xl {
        padding-left: 0;
        padding-right: 0;
    }
    .hero-meta-info {
        font-size: var(--fz-10);
        padding: 4px 12px;
    }
}

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

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0;
}

@media (min-width: 1024px) {
    .content-grid {
        grid-template-columns: repeat(12, 1fr);
    }
    .main-content {
        grid-column: span 8;
    }
    .sidebar {
        grid-column: span 4;
    }
}

.card {
    background-color: var(--white);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--grey-200);
    box-shadow: var(--shadow-sm);
    margin-bottom: 32px;
}

.section-title {
    font-size: var(--fz-20);
    font-weight: 700;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title-icon {
    background-color: var(--accent-blue);
    color: var(--white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fz-14);
}

.border-left-title {
    border-left: 4px solid var(--accent-blue);
    padding-left: 12px;
    margin-bottom: 16px;
}

.intro-text {
    font-size: var(--fz-14);
    color: var(--slate-600);
    margin-bottom: 16px;
}

.section-title-band {
    position: relative;
    background-color: var(--accent-blue);
    color: var(--white);
    text-align: center;
    padding: 16px;
    border-radius: 4px;
    margin-top: 24px;
    margin-bottom: 24px;
    font-size: var(--fz-28);
    font-weight: 700;
    display: block;
}

.section-title-band[data-badge]:not([data-badge=""])::before {
    content: attr(data-badge);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-blue);
    color: var(--white);
    font-size: var(--fz-18);
    font-weight: 700;
    padding: 4px 20px;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

.section-title-band[data-badge]:not([data-badge=""])::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: var(--primary-blue) transparent transparent transparent;
}

.title-icon {
    background-color: var(--white);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 8px;
    padding: 0px 3.25px;
}

@media (max-width: 768px) {
    .section-title-band {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.detail-section-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0px;
    padding: 7px 20px;
    color: var(--primary-blue);
    font-size: var(--fz-20);
    font-weight: bold;
    letter-spacing: 0.05em;
    background: repeating-linear-gradient(
        -45deg,
        var(--slate-300) 0px,
        var(--slate-300) 4px,
        var(--blue-350)  0px,
        var(--blue-350)  5px
    );
}

.detail-section-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 8px solid var(--slate-300);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.detail-section-text {
    color: var(--slate-600);
    margin-bottom: 16px;
    text-align: center;
}

@media (max-width: 768px) {
    .detail-section-title {
        padding: 6px 30px;
    }
    .detail-section-title::after {
        bottom: -6px;
        border-top: 6px solid var(--slate-300);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
    }
}

.reviewer-comment-box {
    position: relative;
    background-color: var(--yellow); /* 色の変数化 */
    border-radius: 12px;
    padding: 16px;
    margin: 40px 0px;
}

.reviewer-comment-box .detail-section-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 0;
    z-index: 2;
    white-space: nowrap;
}

.reviewer-comment-inner {
    position: relative;
    background-color: var(--white);
    padding: 30px 20px 20px;
    background-image: 
        linear-gradient(90deg, var(--grey-300) 1px, transparent 1px),
        linear-gradient(0deg, var(--grey-300) 1px, transparent 1px);
    background-size: 20px 20px;
}

.comment-item {
    margin-bottom: 30px;
}
.comment-item:last-child {
    margin-bottom: 0;
}

.comment-title {
    display: flex;
    align-items: center;
    color: var(--orange-text);
    font-size: var(--fz-18);
    font-weight: bold;
    border-bottom: 1px solid var(--orange-text);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.check-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: var(--orange-text);
    border-radius: 50%;
    position: relative;
    margin-right: 8px;
    flex-shrink: 0;
}
.check-icon::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 8px;
    width: 5px;
    height: 10px;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(45deg);
}

.comment-text {
    font-size: var(--fz-16);
    line-height: 1.8;
    color: var(--slate-700); /* 色の変数化 */
    margin: 0;
}

@media (max-width: 768px) {
    .comment-title {
        font-size: var(--fz-16);
        padding-bottom: 4px;
        margin-bottom: 12px;
        line-height: 1.5;
    }
    .check-icon {
        width: 17px;
        height: 17px;
        margin-right: 7px;
        margin-bottom: 2px;
    }
    .check-icon::after {
        top: 3px;
        left: 6px;
        width: 3px;
        height: 7px;
    }
    .comment-text {
        font-size: var(--fz-14);
        line-height: 1.5;
    }
}

.marker-yellow {
    /* 色の変数化 */
    background: linear-gradient(transparent 50%, var(--marker-yellow) 50%);
    font-weight: bold;
}

.pickup-card {
    background-color: var(--white);
    border-radius: 12px;
    border: 1px solid var(--accent-blue);
    overflow: hidden;
    margin-bottom: 50px;
}

.pickup-header {
    background: repeating-linear-gradient(
        -45deg,
        var(--accent-blue),
        var(--accent-blue) 10px,
        var(--blue-600) 10px,
        var(--blue-600) 20px
    );
    color: var(--white);
    text-align: center;
    padding: 12px;
    font-weight: 700;
    font-size: var(--fz-18);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.pickup-body {
    padding: 24px;
}

.pickup-company-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.pickup-company-name {
    font-size: var(--fz-24);
    font-weight: 700;
    color: var(--slate-700);
    display: flex;
    align-items: center;
    gap: 12px;
}

.pickup-company-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
}

.pickup-point {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--red);
    margin-bottom: 24px;
}

.pickup-point-icon {
    font-size: var(--fz-24);
    line-height: 1;
}

.pickup-point-text {
    font-weight: 700;
    color: var(--slate-700);
    line-height: 1.5;
}

.pickup-footer {
    text-align: center;
    margin-top: 16px;
}

.pickup-img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .pickup-point {
        gap: 0;
    }
}

.top3-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.top3-item {
    background-color: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 16px;
}

.top3-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.top3-name {
    font-weight: 700;
    font-size: var(--fz-16);
    color: var(--slate-700);
}

.top3-rating {
    background-color: var(--slate-50);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--fz-13);
    font-weight: 700;
    color: var(--slate-700);
    margin-bottom: 12px;
    border: 1px solid var(--slate-100);
}

.top3-rating .stars {
    color: var(--orange);
    font-size: var(--fz-14);
}

.top3-desc {
    font-size: var(--fz-13);
    color: var(--slate-600);
    border-left: 3px solid var(--red);
    padding-left: 8px;
    line-height: 1.4;
}

.top3-name-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: 0.2s;
}

.top3-name-link:hover .top3-name {
    color: var(--accent-blue);
    text-decoration: underline;
}

.top3-external-icon {
    width: 25px;
    height: 25px;
    filter: brightness(0) opacity(0.4); 
}

@media (min-width: 1024px) {
    .sidebar .section-title-band {
        background-color: transparent;
        color: var(--slate-700);
        text-align: left;
        padding: 0 0 8px 0;
        border-radius: 0;
        margin-top: 0;
        margin-bottom: 16px;
        border-bottom: 2px solid var(--accent-blue);
    }

    .sidebar .section-title-band::before,
    .sidebar .section-title-band::after {
        display: none;
    }

    .sticky-card {
        position: sticky;
        top: 32px;
        z-index: 10;
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
    font-size: var(--fz-10);
}

@media (min-width: 1024px) {
    .stats-grid {
        font-size: var(--fz-14);
    }
}

.stats-item {
    background-color: var(--slate-50);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--grey-200);
}

.stats-number {
    display: block;
    color: var(--accent-blue);
    font-weight: 700;
    font-size: var(--fz-18);
}

.comparison-section {
    margin-bottom: 48px;
}

.main-content {
    min-width: 0;
}

.table-container {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    background-color: var(--white);
    width: 100%;
}

.table-container table {
    min-width: 1020px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fz-13);
    text-align: center;
}

thead {
    background-color: var(--grey-300);
    color: var(--slate-700);
    font-weight: 700;
    border-bottom: 1px solid var(--grey-200);
}

th, td {
    padding: 16px 10px;
    border-right: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
    min-width: 90px;
}

.comparison-section td:nth-child(2),
.comparison-section td:nth-child(4),
.comparison-section td:nth-child(5) {
    white-space: nowrap;
}

.sticky-col {
    position: sticky;
    left: 0;
    z-index: 20;
    background-color: var(--white);
    box-shadow: inset -1px 0 0 0 var(--grey-200);
}

th.sticky-col,td.sticky-col {
    padding: 8px 0px;
}

th.sticky-col {
    background-color: var(--grey-300);
}

.company-logo-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 2px;
}

.company-logo-img {
    display: block;
    max-width: 120px;
    height: auto;
    border: 1px solid var(--slate-250);
    padding: 11px;
    background-color: var(--white);
    border-radius: 4px;
}

.btn-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 120px;
    padding: 6px 16px 6px 6px;
    box-shadow: var(--shadow-lg);
    transition: 0.2s;
    background-color: var(--red);
    color: var(--white);
    border-radius: 4px;
    font-size: var(--fz-13);
    font-weight: 800;
}

.btn-table:hover { background-color: var(--red-hover); }

.external-icon {
    position: absolute;
    right: 0.5px;
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.table-medal-pos {
    position: absolute;
    top: -13px;
    left: -13px;
}

.highlight-text { color: var(--red); font-weight: 600; }

.annotation-text {
    font-size: var(--fz-10);
    color: var(--slate-700);
    margin-left: 4px;
}

.annotation-mark {
    font-size: var(--fz-8);
    color: var(--slate-700);
    vertical-align: super;
    margin-left: 2px;
}

td[data-eval] {
    font-size: var(--fz-13);
    color: var(--slate-700);
    line-height: 1.3;
    vertical-align: middle;
    text-align: center;
}

td[data-eval]::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 5px auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

td[data-eval="a"]::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23ef4444' stroke-width='8'/%3E%3Ccircle cx='50' cy='50' r='22' fill='none' stroke='%23ef4444' stroke-width='8'/%3E%3C/svg%3E"); 
}
td[data-eval="b"]::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23f59e0b' stroke-width='8'/%3E%3C/svg%3E"); 
}
td[data-eval="c"]::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L95 90 L5 90 Z' fill='none' stroke='%2394a3b8' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E"); 
}
td[data-eval="d"]::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L90 90 M90 10 L10 90' fill='none' stroke='%2394a3b8' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E"); 
}
td[data-eval="e"]::before { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 50 L80 50' fill='none' stroke='%23cbd5e1' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E"); 
}

.table-logo-img {
    display: block;
    max-width: 60px;
    margin: 5px auto;
}

.table-expand-wrapper {
    position: relative;
    max-height: 550px;
    overflow: hidden;
    transition: max-height 0.1s;
}

.table-expand-wrapper.is-open {
    max-height: 2000px;
    transition: max-height 0.4s ease-in-out;
}

.expand-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(to bottom, rgba(201, 11, 11, 0) 0%, rgba(255,255,255,1) 80%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 15px;
    z-index: 30;
}

.table-expand-wrapper.is-open .expand-fade {
    position: static;
    height: auto;
    background: transparent;
    padding-top: 16px;
    padding-bottom: 0;
}

.btn-expand {
    background-color: var(--white);
    border: 1px solid var(--slate-400);
    color: var(--slate-700);
    padding: 12px 32px;
    border-radius: 9999px;
    font-size: var(--fz-13);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: 0.2s;
    font-family: inherit;
}

.btn-expand:hover {
    background-color: var(--slate-50);
}

.medal-icon {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 32px;
    object-fit: contain;
    z-index: 10;
}

.rank-card {
    background-color: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 48px;
    contain: content;
}

.rank-card-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rank-card-header {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 12px 16px 12px 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.card-medal-pos {
    position: absolute;
    left: 8px;
    top: 53%;
    transform: translateY(-50%);
    width: 36px;
    height: 40px;
}

.banner-wrapper {
    width: 100%;
    aspect-ratio: 1200 / 630;
    background-color: var(--slate-50);
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .rank-card-header {
        padding-left: 48px;
    }
    .rank-card-body {
        padding: 16px;
    }
}

.rank-label { 
    font-weight: 700; 
    letter-spacing: 0.1em; 
    font-size: var(--fz-24); 
}
.rating-label { 
    font-size: var(--fz-14);
    color: var(--orange);
}
.rank-card-body { padding: 24px; }

@media (max-width: 768px) {
    .rank-card-body { padding: 16px; }
}

.company-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 10px 0 40px 0;
}

@media (min-width: 1024px) {
    .company-layout { flex-direction: row; }
}

.company-logo {
    width: 50%;
    background-color: var(--white);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey-200);
    color: var(--slate-400);
    font-weight: 700;
}

.company-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

@media (max-width: 768px) {
    .company-logo {
        display: none;
    }
    .company-layout {
        gap: 0;
    }
}

.company-catchphrase {
    color: var(--primary-blue);
    font-size: var(--fz-20);
    margin: 8px 0;
    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-underline-offset: 4px;
    text-align: center;
    font-weight: bold;
}

.check-list {
    list-style: none;
    font-size: var(--fz-16);
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

.company-info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 40px 0;
    font-size: var(--fz-13);
    border: 1px solid var(--grey-200);
}
.company-info-table th {
    background-color: var(--grey-300);
    padding: 8px;
    width: 30%;
}
.company-info-table td {
    padding: 8px;
}

.cta-container { margin-top: 24px; }

.btn-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    background-color: var(--red);
    color: var(--white);
    font-weight: 700;
    padding: 16px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    transition: 0.2s;
    font-size: var(--fz-22);
}

.btn-cta:hover {
    background-color: var(--red-hover);
    transform: translateY(-2px);
}

.btn-cta .external-icon {
    position: static;
    width: 32px;
    height: 32px;
}

.btn-cta[data-badge]:not([data-badge=""]) {
    margin-top: 32px;
}

.btn-cta[data-badge]:not([data-badge=""])::before {
    content: attr(data-badge);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--yellow);
    color: var(--slate-700);
    font-size: var(--fz-13);
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    z-index: 2;
}

.btn-cta[data-badge]:not([data-badge=""])::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: var(--yellow) transparent transparent transparent;
    z-index: 2;
}

.sidebar-title {
    font-size: var(--fz-18);
    font-weight: 700;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--grey-200);
    padding-bottom: 8px;
}

.profile-flex {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    background-color: var(--blue-100); /* 色の変数化 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fz-24);
}

.profile-name { font-weight: 700; }
.profile-job { font-size: var(--fz-10); color: var(--slate-600); line-height: 1; }
.profile-desc { font-size: var(--fz-13); color: var(--slate-600); }

.article-list { display: flex; flex-direction: column; gap: 8px; }

.article-item { display: flex; gap: 12px; align-items: center; }
.article-thumb { width: 80px; height: 48px; background-color: var(--grey-200); border-radius: 4px; overflow: hidden; }

.article-title { font-size: var(--fz-13); font-weight: 700; line-height: 1.25; transition: 0.2s; }
.article-item:hover .article-title { color: var(--accent-blue); }

.footer {
    background-color: var(--slate-700);
    color: var(--slate-400);
    padding: 16px;
    font-size: var(--fz-13);
    text-align: center;
}

.disclaimer { 
    margin-bottom: 16px;
    font-size: var(--fz-8);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
}

.footer-links a:hover { color: var(--white); }

.copyright {
    padding-top: 8px;
    border-top: 1px solid var(--slate-700); /* 色の変数化 */
}

.review-item {
    background-color: var(--grey-300);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--slate-100);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.review-author {
    font-size: var(--fz-13);
    font-weight: 700;
    color: var(--primary-blue);
}

.review-stars {
    color: var(--orange);
    font-size: var(--fz-13);
}

.review-text {
    font-size: var(--fz-14);
    color: var(--slate-700);
    line-height: 1.7;
    margin: 0;
}

.review-slider {
    position: relative;
    width: 100%;
    padding: 0 20px;
    overflow: hidden;
    margin-bottom: 20px;
}

.review-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    gap: 16px;
    padding: 10px 0;
}

.review-item {
    flex: 0 0 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .review-item {
        flex: 0 0 calc((100% - 32px) / 3); 
    }
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid var(--grey-200);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fz-13);
    font-weight: 500;
    color: var(--slate-600);
    transition: 0.2s;
}

.slider-btn:hover {
    background-color: var(--slate-50);
}

.slider-btn.prev { left: 0px; }
.slider-btn.next { right: 0px; }

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}
/* =========================================
   コラム記事一覧（サイドバー・LP下部用）
   ========================================= */
.column-widget {
    margin-bottom: 32px;
}

.column-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.column-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: opacity 0.2s;
    background-color: var(--white);
}

.column-item:hover {
    opacity: 0.7;
}

.column-img-wrap {
    width: 120px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--slate-50);
}

.column-img-wrap img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.column-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.column-title {
    font-size: var(--fz-13);
    font-weight: 700;
    line-height: 1.4;
    color: var(--slate-700);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.column-tag {
    align-self: flex-start;
    font-size: var(--fz-10);
    color: var(--slate-600);
    border: 1px solid var(--grey-200);
    padding: 2px 10px;
    border-radius: 9999px;
    background-color: var(--white);
    line-height: 1.2;
}

.btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 9999px;
    font-size: var(--fz-14);
    font-weight: 700;
    color: var(--slate-700);
    transition: background-color 0.2s;
    position: relative;
}

.btn-more:hover {
    background-color: var(--slate-50);
}

.btn-more::after {
    content: "";
    position: absolute;
    right: 20px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--slate-700);
    border-right: 2px solid var(--slate-700);
    transform: rotate(45deg);
}

@media (max-width: 768px) {
    .column-img-wrap {
        width: 100px; 
    }
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--grey-200);
    cursor: pointer;
    transition: 0.2s;
}

.dot.active {
    background-color: var(--accent-blue);
    transform: scale(1.2);
}

.legal-page {
    padding: 48px 0;
    line-height: 1.7;
}

.legal-page h2 {
    font-size: var(--fz-18);
    color: var(--slate-700);
    font-weight: 700; 
    margin: 24px 0 16px;
}

.legal-page p {
    font-size: var(--fz-16);
    color: var(--slate-600);
    font-weight: 500;
    line-height: 1.7;
    margin-bottom: 16px;
}

.legal-page ul {
    list-style: disc;
    color: var(--slate-600);
    margin-left: 24px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .legal-page {
        padding: 32px 0;
    }
    .legal-page h2 {
        font-size: var(--fz-16);
    }
    .legal-page p {
        font-size: var(--fz-14);
        margin-bottom: 10px;
    }
    .legal-page ul {
        font-size: var(--fz-14);
        margin-left: 16px;
        margin-bottom: 16px;
    }
}

.article-container {
    padding: 32px 0;
}

.article-body {
    background: var(--white);
    padding: 32px;
    border-radius: 12px;
}

.article-title {
    font-size: var(--fz-28);
    font-weight: 700;
    color: var(--slate-700);
    line-height: 1.3;
    margin-bottom: 16px;
}

.article-body h2 {
    position: relative;
    font-size: var(--fz-22);
    color: var(--primary-blue);
    padding: 12px 16px;
    background-color: var(--slate-50);
    border-left: 5px solid var(--accent-blue);
    margin: 48px 0 24px;
}

.article-body h3 {
    font-size: var(--fz-20);
    color: var(--slate-700);
    margin: 32px 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.article-body h3::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--yellow);
    border-radius: 50%;
}

.article-body p {
    font-size: var(--article-font-size);
    line-height: var(--article-line-height);
    margin-bottom: var(--article-spacing);
    color: var(--slate-700);
}

.article-body ul {
    margin-bottom: var(--article-spacing);
    padding-left: 24px;
}
.article-body li {
    margin-bottom: 8px;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

/* =========================================
   記事ページ専用コンポーネント (article.html)
   ========================================= */

/* --- パンくずリスト --- */
.breadcrumbs {
    padding: 16px 0;
    font-size: var(--fz-12);
    color: var(--slate-600);
}
.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.breadcrumbs li {
    display: flex;
    align-items: center;
}
.breadcrumbs li a {
    text-decoration: underline;
    text-decoration-color: var(--slate-250);
}
.breadcrumbs li a:hover {
    color: var(--accent-blue);
}
.breadcrumbs li:not(:last-child)::after {
    content: ">";
    margin-left: 8px;
    color: var(--slate-400);
    font-size: var(--fz-10);
}

/* --- 記事ヘッダー --- */
.article-header {
    margin-bottom: 40px;
}
.article-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
/* 既存の .column-tag を流用しますが、記事内用に少し調整したい場合は上書き不要でそのまま使えます */

.article-meta {
    display: flex;
    gap: 16px;
    font-size: var(--fz-12);
    color: var(--slate-600);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--grey-200);
}

/* --- 監修者ボックス (E-E-A-T) --- */
.article-supervisor-box {
    background-color: var(--slate-50);
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}
.supervisor-label {
    font-size: var(--fz-12);
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 12px;
}
.article-supervisor-box .profile-flex {
    margin-bottom: 0; /* 既存クラスの余白をリセット */
}

.article-eyecatch {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 16px;
}

/* --- 目次 (TOC) --- */
.article-toc {
    background-color: var(--grey-300);
    border-radius: 8px;
    padding: 24px;
    margin: 32px 0 48px 0;
}
.toc-title {
    font-size: var(--fz-18);
    font-weight: 700;
    color: var(--slate-700);
    text-align: center;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.toc-title::before {
    content: "📋"; /* アイコンはお好みでSVGに変更可 */
}
.article-toc ol {
    margin: 0;
    padding-left: 24px;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: var(--fz-15);
    line-height: 1.8;
}
.article-toc ol ol {
    font-weight: normal;
    font-size: var(--fz-14);
    margin-top: 8px;
    margin-bottom: 8px;
    color: var(--slate-700);
}
.article-toc a {
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}
.article-toc a:hover {
    text-decoration: underline;
    color: var(--accent-blue);
}

/* --- 装飾ボックス（ポイント・注意） --- */
.box-point, .box-warn {
    padding: 20px 24px;
    border-radius: 8px;
    margin: 32px 0;
}
.box-point {
    background-color: var(--slate-50);
    border: 2px solid var(--accent-blue);
}
.box-warn {
    background-color: #fff1f2; /* 薄い赤（一時的直書き、必要ならrootへ） */
    border: 2px solid var(--red);
}
.box-title {
    font-size: var(--fz-18);
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.box-point .box-title { color: var(--accent-blue); }
.box-warn .box-title { color: var(--red); }

.box-title::before {
    content: "💡";
}
.box-warn .box-title::before {
    content: "⚠️";
}
.box-point p, .box-warn p {
    margin-bottom: 0; /* ボックス内テキストの余白リセット */
    font-size: var(--fz-15);
}

/* --- 記事内CTAボックス --- */
.article-cta-box {
    background-color: var(--slate-50);
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    padding: 32px 24px;
    margin-top: 48px;
    text-align: center;
}
.cta-box-title {
    font-size: var(--fz-22);
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.4;
}
.cta-box-text {
    font-size: var(--fz-15);
    color: var(--slate-700);
    margin-bottom: 24px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--white);
    transition: box-shadow 0.2s;
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    font-size: var(--fz-16);
    font-weight: 700;
    color: var(--primary-blue);
    cursor: pointer;
    background-color: var(--slate-50);
    transition: background-color 0.2s;
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none; 
}

.faq-question:hover {
    background-color: var(--slate-100);
}

.faq-question-text {
    flex: 1;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
}

.q-icon {
    color: var(--orange-text);
    font-size: var(--fz-18);
    margin-right: 8px;
    font-weight: 900;
}

.faq-toggle-icon {
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: 16px;
    flex-shrink: 0;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--primary-blue);
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-toggle-icon::before {
    width: 14px;
    height: 2px;
}

.faq-toggle-icon::after {
    width: 2px;
    height: 14px;
}

details[open] .faq-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

details[open] .faq-question {
    background-color: var(--slate-100);
    border-bottom: 1px dashed var(--grey-200);
}

.faq-answer {
    padding: 20px 16px;
    font-size: var(--fz-14);
    line-height: 1.8;
    color: var(--slate-700);
    background-color: var(--white);
    animation: fadeIn 0.3s ease-in-out;
}

.faq-answer p {
    margin: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .faq-question {
        font-size: var(--fz-14);
        padding: 14px;
    }
    .faq-answer {
        font-size: var(--fz-13);
        padding: 16px 14px;
    }
}

@media (max-width: 768px) {
    .logo-ticker-wrapper {
        background-color: var(--white);
        padding: 10px 0px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .logo-ticker {
        width: 100%;
        overflow: hidden;
    }

    .logo-ticker-track {
        display: flex;
        width: max-content;
        animation: ticker 30s linear infinite;
    }

    .logo-ticker-list {
        display: flex;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .logo-ticker-list li {
        padding: 0px 12px;
        flex-shrink: 0;
    }

    .logo-ticker-list img {
        height: 20px; 
        width: auto;
        object-fit: contain;
    }
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-ticker-track {
        animation-play-state: paused;
    }
}

@media (min-width: 769px) {
    .logo-ticker-wrapper {
        display: none;
    }
}