@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  src: url('./fonts/zen-kaku-gothic-new-v18-japanese_latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-weight: 700;
  font-style: normal;
  font-display: optional;
  src: url('./fonts/zen-kaku-gothic-new-v18-japanese_latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-weight: 900;
  font-style: normal;
  font-display: optional;
  src: url('./fonts/zen-kaku-gothic-new-v18-japanese_latin-900.woff2') format('woff2');
}

/* =================================================================
  Global Styles & CSS Variables
================================================================== */
:root {
    /* Backgrounds */
    --color-background-base: #F5F6FA;
    --color-surface: #FFFFFF;
    --color-surface-alt: #FAFBFF;

    /* Text */
    --color-text-primary: #1C1F2E;
    --color-text-secondary: #5E637A;
    --color-text-disabled: #666B80;

    /* Links */
    --color-link: #7E8BFF;
    --color-link-hover: #5F6EFF;
    --color-link-active: #4A57E0;
    --color-link-visited: #6B72C9;

    /* Buttons */
    --color-btn-primary-bg: #3A4BFF;
    --color-btn-primary-text: #FFFFFF;
    --color-btn-primary-bg-hover: #2F3FE0;
    --color-btn-primary-bg-disabled: #BFC5FF;

    /* Borders */
    --color-border-default: #E2E4F0;
    --color-border-focus: #C7CCFF;

    /* Dark theme additions */
    --color-dark-background: #0F1226;
    --color-dark-surface: #151936;
    --color-dark-text-primary: #E6E8FF;
    --color-dark-text-secondary: #B7BCE6;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    background-color: var(--color-background-base);
    color: var(--color-text-primary);
}


/* =================================================================
  Animations
================================================================== */
.grain-overlay::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    animation: grain 8s steps(10) infinite;
    opacity: 0.08;
    pointer-events: none;
    will-change: transform; /* GPU合成レイヤーに昇格 → 非合成アニメーション警告を解消 */
}

@keyframes grain {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -10%);
    }

    20% {
        transform: translate(-15%, 5%);
    }

    30% {
        transform: translate(7%, -25%);
    }

    40% {
        transform: translate(-5%, 25%);
    }

    50% {
        transform: translate(-15%, 10%);
    }

    60% {
        transform: translate(15%, 0%);
    }

    70% {
        transform: translate(0%, 15%);
    }

    80% {
        transform: translate(3%, 35%);
    }

    90% {
        transform: translate(-10%, 10%);
    }
}

@keyframes shine {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    30%,
    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}


/* =================================================================
  Component-specific Styles
================================================================== */

/* Header Navigation Hover Effect */
/* Header Navigation Hover Effect Removed */


/* =================================================================
  Company Page Specific Styles
================================================================== */

.company-hero {
    background-image:
        radial-gradient(circle at 20% 80%, rgba(58, 75, 255, 0.1), transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(126, 139, 255, 0.1), transparent 30%);
}

.company-info-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem 1rem;
}

.company-info-dl dt {
    font-weight: bold;
    color: var(--color-text-primary);
    padding-right: 1rem;
    grid-column: 1;
}

.company-info-dl dd {
    color: var(--color-text-secondary);
    grid-column: 2;
}



/* =================================================================
  Blog Page Specific Styles
================================================================== */
.p-blog-archive__hero {
    background-image: radial-gradient(circle at 50% 0%, rgba(126, 139, 255, 0.1), transparent 40%);
}

.l-blog-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

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

@media (min-width: 1024px) {
    .l-blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.c-blog-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
}

.c-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--color-border-focus);
}

.c-blog-card__image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.c-blog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.c-blog-card:hover .c-blog-card__image {
    transform: scale(1.05);
}

.c-blog-card__content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.c-blog-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.c-blog-card__date {
    font-size: 0.875rem;
    color: var(--color-text-disabled);
}

.c-blog-card__category {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: var(--color-surface-alt);
    color: var(--color-text-secondary);
}

.c-blog-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    flex-grow: 1;
    transition: color 0.2s ease;
}

.c-blog-card:hover .c-blog-card__title {
    color: var(--color-link-hover);
}

.c-blog-card__excerpt {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* --- Popo Animation --- */
.c-popo-animation {
    position: relative;
    width: 40px;
    height: 40px;
    align-self: flex-end;
    margin-top: auto;
}

.c-popo-animation__icon {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

.c-blog-card:hover .c-popo-animation__icon {
    transform: translateY(-4px);
}

.c-popo-animation__eyes {
    transition: opacity 0.3s ease;
}

.c-popo-animation__eyes--awake {
    opacity: 0;
}

.c-blog-card:hover .c-popo-animation__eyes--sleepy {
    opacity: 0;
}

.c-blog-card:hover .c-popo-animation__eyes--awake {
    opacity: 1;
}

.c-popo-animation__gleam {
    animation: gleam 2s infinite 0.5s;
    opacity: 0;
}

@keyframes gleam {

    0%,
    20%,
    100% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
}

.c-popo-animation::before,
.c-popo-animation::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    box-shadow: 10px 0 1px 0 #7E8BFF, -15px 15px 0 0 #28D7A4, 20px -10px 0 1px #FF8A43, -5px -15px 0 0 #7E8BFF, 5px 20px 0 0 #FF8A43;
    opacity: 0;
    transition: all 0.5s ease;
}

.c-blog-card:hover .c-popo-animation::before {
    transform: translate(-50%, -50%) rotate(360deg) scale(1.5);
    opacity: 1;
    transition-duration: 0.8s;
}

.c-blog-card:hover .c-popo-animation::after {
    transform: translate(-50%, -50%) rotate(-360deg) scale(1.8);
    opacity: 1;
    transition-duration: 1s;
}


/* =================================================================
  Blog Detail Page Specific Styles
================================================================== */
.p-blog-single__content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.p-blog-single__content>* {
    margin-bottom: 1.5em;
}

.p-blog-single__content h2,
.p-blog-single__content h3 {
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.5;
    margin-top: 2.5em;
    margin-bottom: 1em;
}

.p-blog-single__content h2 {
    font-size: 1.75rem;
    border-bottom: 2px solid var(--color-border-default);
    padding-bottom: 0.5rem;
}

.p-blog-single__content h3 {
    font-size: 1.5rem;
}

.p-blog-single__content a {
    color: var(--color-link);
    text-decoration: underline;
}

.p-blog-single__content blockquote {
    margin: 2em 0;
    padding: 1.5em 2em;
    border-left: 4px solid var(--color-border-focus);
    background-color: var(--color-surface-alt);
    font-style: italic;
}

.p-blog-single__content .wp-block-image {
    max-width: 100%;
    margin: 2em auto;
    text-align: center;
}

.p-blog-single__content .wp-block-image img {
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-default);
}

.p-blog-single__content .wp-block-image figcaption {
    font-size: 0.875rem;
    color: var(--color-text-disabled);
    margin-top: 0.5em;
}

.c-popo-comment {
    margin-top: 4rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border-default);
    padding: 2rem;
    border-radius: 0.75rem;
}

.c-popo-comment__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.c-popo-comment__bubble {
    position: relative;
}

.c-popo-comment__name {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.c-popo-comment__text {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* =================================================================
  Extra Global Variables
================================================================== */
:root {
    --color-link-rgb: 126, 139, 255;
    --card-border-radius: 0.5rem;
}

/* =================================================================
  Privacy Policy & Legal Pages
================================================================== */
.p-legal-hero {
    background-image: radial-gradient(circle at 50% 100%, rgba(126, 139, 255, 0.05), transparent 40%);
}

.l-legal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .l-legal-layout {
        grid-template-columns: 1fr 3fr;
    }
}

.p-legal-nav {
    font-size: 15px; /* 目次も本文（.p-legal-content）と同じ15px */
    position: sticky;
    top: 8rem;
    /* header height + margin */
    align-self: start;
}

.p-legal-nav__title {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-default);
}

.p-legal-nav__list {
    list-style: none;
    padding: 0;
}

.p-legal-nav__item a {
    display: block;
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.p-legal-nav__item a:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-text-primary);
}

.p-legal-nav__item a.active {
    background-color: var(--color-link);
    color: white;
    font-weight: 700;
}

.p-legal-content {
    font-size: 15px; /* 長文の法務ページは15px（サイト基準は18px） */
    line-height: 1.8;
}

/* 導入文（text-lg）も本文と同じ15pxに揃える */
.p-legal-content > p.text-lg,
.p-legal-content p.text-lg {
    font-size: 15px;
    line-height: 1.8;
}

.p-legal-content__section {
    margin-bottom: 4rem;
    padding-top: 2rem;
}

/* 本文中のリンク（お問い合わせフォーム等）は、色と下線でリンクと分かるようにする */
.p-legal-content p a {
    color: var(--color-ai-policy-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.p-legal-content p a:hover {
    text-decoration-thickness: 2px;
}

.p-legal-content__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-border-default);
}

.p-legal-content__subtitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    padding-left: 0.75rem;
    border-left: 3px solid var(--color-link);
}

.p-legal-content__policy-list {
    list-style: none;
    padding: 0;
}

.p-legal-content__policy-list li {
    padding: 1rem 1.25rem;
    background-color: var(--color-surface-alt);
    border-radius: 0.5rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* =================================================================
  Sitemap Page
================================================================== */
.p-sitemap-hero {
    background-image: radial-gradient(circle at 50% 100%, rgba(126, 139, 255, 0.05), transparent 40%);
}

.l-sitemap-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

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

.c-sitemap-group {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: 0.5rem;
    padding: 2rem;
}

.c-sitemap-group__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-default);
}

.c-sitemap-group__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-link);
}

.c-sitemap-group__list {
    list-style: none;
    padding: 0;
}

.c-sitemap-group__list li a {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
    font-weight: 500;
    transition: color 0.2s ease;
}

.c-sitemap-group__list li a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.c-sitemap-group__list .sub-list {
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

/* =================================================================
  News Archive Page
================================================================== */
.p-news-archive__hero {
    background-image: radial-gradient(circle at 50% 100%, rgba(126, 139, 255, 0.05), transparent 40%);
}

.p-news-archive__year-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.p-news-archive__year-link {
    display: block;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text-secondary);
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

.p-news-archive__year-link:hover {
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border-color: var(--color-border-default);
}

.p-news-archive__year-link--active {
    background-color: var(--color-btn-primary);
    color: white;
    border-color: var(--color-btn-primary);
}

.p-news-archive__year-link--active:hover {
    background-color: var(--color-btn-primary-hover);
    color: white;
}

.p-news-archive__list {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: 0.5rem;
    overflow: hidden;
}

.p-news-archive__list-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-border-default);
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.p-news-archive__list-item:last-child {
    border-bottom: none;
}

.p-news-archive__list-item:hover {
    background-color: var(--color-surface-alt);
}

.p-news-archive__item-date {
    font-weight: 700;
    color: var(--color-text-disabled);
    flex-shrink: 0;
}

.p-news-archive__item-title {
    font-weight: 700;
    color: var(--color-text-primary);
}

.p-news-archive__list-item:hover .p-news-archive__item-title {
    color: var(--color-link-hover);
}

.p-news-archive__pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.p-news-archive__pagination a,
.p-news-archive__pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text-secondary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-default);
    transition: all 0.2s ease-in-out;
}

.p-news-archive__pagination a:hover {
    border-color: var(--color-border-focus);
    color: var(--color-text-primary);
}

.p-news-archive__pagination .current {
    background-color: var(--color-btn-primary);
    color: white;
    border-color: var(--color-btn-primary);
    cursor: default;
}

/* AI x EC News Specifics */
.p-news-archive__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-default);
    padding: 2rem;
    border-radius: var(--card-border-radius);
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .p-news-archive__intro {
        flex-direction: row;
        justify-content: center;
    }
}

.c-editor-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.c-editor-profile__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.c-editor-profile__name {
    font-weight: 700;
    color: var(--color-text-primary);
}

.c-editor-profile__role {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.l-news-archive-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .l-news-archive-container {
        grid-template-columns: 2.5fr 1fr;
    }
}

.c-featured-card {
    display: block;
    background-color: var(--color-surface);
    border-radius: var(--card-border-radius);
    border: 1px solid var(--color-border-default);
    overflow: hidden;
    transition: all 0.3s ease;
}

.c-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    border-color: var(--color-border-focus);
}

@media(min-width: 768px) {
    .c-featured-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.c-featured-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    aspect-ratio: 16/9;
}

.c-featured-card:hover .c-featured-card__image {
    transform: scale(1.05);
}

.p-news-archive__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

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

@media (min-width: 1024px) {
    .p-news-archive__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.c-news-card {
    display: block;
    background-color: var(--color-surface);
    border-radius: var(--card-border-radius);
    border: 1px solid var(--color-border-default);
    overflow: hidden;
    transition: all 0.3s ease;
}

.c-news-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-link);
    box-shadow: 0 0 12px rgba(var(--color-link-rgb), 0.4);
}

.c-news-card__image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.c-news-card:hover .c-news-card__image {
    transform: scale(1.05);
}

.c-news-card__title {
    transition: color 0.3s ease;
}

.c-news-card:hover .c-news-card__title {
    color: var(--color-link-hover);
}

.c-news-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border-default);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.c-news-card__popo-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.c-news-card:hover .c-news-card__popo-icon {
    transform: translateY(-2px);
}

.l-sidebar__widget {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--card-border-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.l-sidebar__widget-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border-default);
}

.c-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.c-tag-cloud a {
    background-color: var(--color-surface-alt);
    color: var(--color-text-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.c-tag-cloud a:hover {
    background-color: var(--color-link);
    color: white;
}

/* =================================================================
  News Detail & Post Styles
================================================================== */
.p-post-detail__body {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}

.p-post-detail__body>* {
    margin-bottom: 1.5em;
}

.p-post-detail__body h2,
.p-post-detail__body h3,
.p-post-detail__body h4 {
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.5;
    margin-top: 2.5em;
    margin-bottom: 1em;
}

.p-post-detail__body h2 {
    font-size: 1.75rem;
    border-bottom: 2px solid var(--color-border-default);
    padding-bottom: 0.5rem;
}

.p-post-detail__body h3 {
    font-size: 1.5rem;
}

.p-post-detail__body h4 {
    font-size: 1.25rem;
}

.p-post-detail__body a {
    color: var(--color-link);
    text-decoration: underline;
}

.p-post-detail__body a:hover {
    color: var(--color-link-hover);
}

.p-post-detail__body ul,
.p-post-detail__body ol {
    padding-left: 1.5em;
}

.p-post-detail__body ul li {
    list-style-type: disc;
}

.p-post-detail__body ol li {
    list-style-type: decimal;
}

.p-post-detail__body li {
    margin-bottom: 0.5em;
}

.p-post-detail__body blockquote {
    margin: 2em 0;
    padding: 1.5em 2em;
    border-left: 4px solid var(--color-border-focus);
    background-color: var(--color-surface-alt);
    font-style: italic;
}

.p-post-detail__body blockquote p:last-child {
    margin-bottom: 0;
}

.p-post-detail__body .wp-block-image {
    max-width: 100%;
}

.p-post-detail__body .wp-block-image img {
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-default);
}

.p-post-detail__body .aligncenter {
    text-align: center;
}

.p-post-detail__body .alignleft {
    float: left;
    margin: 0.5em 1.5em 1em 0;
    max-width: 50%;
}

.p-post-detail__body .alignright {
    float: right;
    margin: 0.5em 0 1em 1.5em;
    max-width: 50%;
}

.p-post-detail__body .wp-block-image figcaption {
    font-size: 0.875rem;
    color: var(--color-text-disabled);
    text-align: center;
    margin-top: 0.5em;
}

.p-post-detail__body>*:after {
    content: "";
    display: table;
    clear: both;
}

.c-btn-external {
    display: inline-block;
    background-color: var(--color-btn-primary);
    color: white !important;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    margin-top: 1em;
}

.c-btn-external:hover {
    background-color: var(--color-btn-primary-hover);
}

.p-post-detail__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border-default);
}

.p-post-detail__nav-link {
    display: block;
    padding: 1rem;
    border: 1px solid var(--color-border-default);
    border-radius: 0.5rem;
    background-color: var(--color-surface);
    max-width: 48%;
    transition: all 0.2s ease;
}

.p-post-detail__nav-link:hover {
    border-color: var(--color-border-focus);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transform: translateY(-2px);
}

.p-post-detail__nav-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-disabled);
}

.p-post-detail__nav-title {
    margin-top: 0.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* =================================================================
  AI x EC News Enhancements
================================================================== */

/* Chat Design (Dialogue) */
.c-chat-ui {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 3rem 0;
}

.c-chat-bubble {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 90%;
}

.c-chat-bubble--right {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.c-chat-bubble__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-surface);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.c-chat-bubble__content {
    background-color: var(--color-surface);
    padding: 1.25rem;
    border-radius: 1rem;
    border-top-left-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--color-border-default);
    position: relative;
    font-size: 0.95rem;
    line-height: 1.6;
}

.c-chat-bubble--right .c-chat-bubble__content {
    background-color: #E8EAFF;
    /* Light blue tint */
    border-radius: 1rem;
    border-top-right-radius: 0;
    border-color: #D1D6FF;
}

.c-chat-bubble__name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
    display: block;
}

.c-chat-bubble--right .c-chat-bubble__name {
    text-align: right;
}

/* User Requested Specific Chat Bubble (Misaki) */
.misaki-bubble {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    max-width: 90%;
}

.misaki-icon img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-surface);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}



.misaki-name {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 0.25rem;
}

/* Comment Section (Gimmicky/Fun) */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment {
    margin-bottom: 2rem;
}

.comment-body {
    background-color: var(--color-surface);
    border: 2px solid var(--color-border-default);
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative;
    font-size: 0.8rem;
}


.comment-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--color-border-default);
    padding-bottom: 0.5rem;
}

.comment-author .avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--color-background-base);
}

.fn {
    font-weight: 700;
    font-style: normal;
    color: var(--color-text-primary);
}

.comment-content p {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.reply a {
    display: inline-block;
    background-color: var(--color-surface-alt);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 0.5rem;
}

.reply a:hover {
    background-color: var(--color-link);
    color: white;
}

/* Comment Form */
.comment-respond {
    background-color: var(--color-surface-alt);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border-default);
    margin-top: 3rem;
}

.comment-reply-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    display: block;
}

.comment-form p {
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.comment-form label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-secondary);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--color-border-default);
    border-radius: 0.5rem;
    background-color: var(--color-surface);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--color-link);
    outline: none;
}

.comment-form .submit {
    background-color: var(--color-btn-primary);
    color: white;
    font-weight: 700;
    padding: 1rem 3rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 4px 6px rgba(58, 75, 255, 0.3);
}

.comment-form .submit:hover {
    background-color: var(--color-btn-primary-hover);
    transform: translateY(-2px);
}

/* =================================================================
  Service Top Page
================================================================== */
.p-service-top__hero {
    background-image: radial-gradient(circle at 20% 20%, rgba(58, 75, 255, 0.1), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(126, 139, 255, 0.1), transparent 40%);
}

.p-service-top__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

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

.p-service-top__card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.p-service-top__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--color-border-focus);
}

.p-service-top__card--ai-mandate:hover {
    border-color: #3A4BFF;
    /* Primary blue */
}

.p-service-top__card--human-mandate:hover {
    border-color: #FF8A43;
    /* Orange for human warmth */
}

.p-service-top__card--ai-seminar:hover {
    border-color: #28D7A4;
    /* Green for growth/learning */
}

.p-service-top__card-number {
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.p-service-top__card-number--ai-mandate {
    color: #3A4BFF;
}

.p-service-top__card-number--human-mandate {
    color: #FF8A43;
}

.p-service-top__card-number--ai-seminar {
    color: #28D7A4;
}

.p-service-top__card-title {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.p-service-top__card-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    min-height: 1.5em;
}

.p-service-top__card-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.p-service-top__card-link {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: auto;
    transition: transform 0.2s ease;
}

.p-service-top__card-link::after {
    content: "→";
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.p-service-top__card:hover .p-service-top__card-link::after {
    transform: translateX(4px);
}

.p-service-top__card-link--ai-mandate {
    color: #3A4BFF;
}

.p-service-top__card-link--human-mandate {
    color: #FF8A43;
}

.p-service-top__card-link--ai-seminar {
    color: #28D7A4;
}

/* =================================================================
  Service Detail Pages (Shared & Specific)
  - AI Mandate
  - Human Mandate
  - AI Seminar
================================================================== */

/* Hero Section */
.p-ai-mandate-hero,
.p-human-mandate-hero,
.p-ai-seminar-hero {
    background-color: var(--color-background-base);
    /* Adjust if specific bg needed */
    position: relative;
    overflow: hidden;
}

.p-ai-mandate-section__title,
.p-human-mandate-section__title,
.p-ai-seminar-section__title {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--color-text-primary);
}

@media (min-width: 768px) {

    .p-ai-mandate-section__title,
    .p-human-mandate-section__title,
    .p-ai-seminar-section__title {
        font-size: 2.5rem;
    }
}

/* Problems Section */
.p-ai-mandate-problems__list,
.p-human-mandate-problems__list,
.p-ai-seminar-problems__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {

    .p-ai-mandate-problems__list,
    .p-human-mandate-problems__list,
    .p-ai-seminar-problems__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.p-ai-mandate-problems__item,
.p-human-mandate-problems__item,
.p-ai-seminar-problems__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background-color: var(--color-surface);
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border-default);
    font-weight: 700;
    color: var(--color-text-primary);
}

.p-ai-mandate-problems__icon,
.p-human-mandate-problems__icon,
.p-ai-seminar-problems__icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    /* Prevent icon from shrinking */
}

.p-ai-mandate-problems__icon {
    color: #3A4BFF;
}

.p-human-mandate-problems__icon {
    color: #FF8A43;
}

.p-ai-seminar-problems__icon {
    color: #28D7A4;
}

/* Features Section */
.p-ai-seminar-features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .p-ai-seminar-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.p-ai-seminar-features__item {
    background-color: var(--color-surface);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border-default);
    text-align: left;
}

.p-ai-seminar-features__icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background-color: rgba(40, 215, 164, 0.1);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.p-ai-seminar-features__icon {
    width: 2rem;
    height: 2rem;
    color: #28D7A4;
}

.p-ai-seminar-features__item-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.p-ai-seminar-features__item-text {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Commitments Section */
.p-ai-mandate-commitments__grid,
.p-human-mandate-commitments__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {

    .p-ai-mandate-commitments__grid,
    .p-human-mandate-commitments__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {

    .p-ai-mandate-commitments__grid,
    .p-human-mandate-commitments__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.p-ai-mandate-commitments__item,
.p-human-mandate-commitments__item {
    background-color: var(--color-surface);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border-default);
    text-align: center;
}

.p-ai-mandate-commitments__icon-wrapper,
.p-human-mandate-commitments__icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.p-ai-mandate-commitments__icon-wrapper {
    background-color: rgba(58, 75, 255, 0.1);
}

.p-human-mandate-commitments__icon-wrapper {
    background-color: rgba(255, 138, 67, 0.1);
}

.p-ai-mandate-commitments__icon,
.p-human-mandate-commitments__icon {
    width: 2rem;
    height: 2rem;
}

.p-ai-mandate-commitments__icon {
    color: #3A4BFF;
}

.p-human-mandate-commitments__icon {
    color: #FF8A43;
}

.p-ai-mandate-commitments__item-title,
.p-human-mandate-commitments__item-title {
    font-size: 1.125rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.p-ai-mandate-commitments__item-text,
.p-human-mandate-commitments__item-text {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    text-align: left;
}

/* Workflow Section */
.p-ai-mandate-workflow__steps,
.p-human-mandate-workflow__steps,
.p-ai-seminar-workflow__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {

    .p-ai-mandate-workflow__steps,
    .p-human-mandate-workflow__steps,
    .p-ai-seminar-workflow__steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.p-ai-mandate-workflow__step,
.p-human-mandate-workflow__step,
.p-ai-seminar-workflow__step {
    background-color: var(--color-background-base);
    /* Or surface depending on section bg */
    padding: 2rem;
    border-radius: 1rem;
    position: relative;
    border: 1px solid var(--color-border-default);
}

/* If section is surface, step should be base, or vice versa. 
   Assuming section is surface for workflow in some cases. 
   Let's force surface for step to be safe against different section bgs */
.p-ai-mandate-workflow__step,
.p-human-mandate-workflow__step,
.p-ai-seminar-workflow__step {
    background-color: var(--color-surface);
}


.p-ai-mandate-workflow__step-number,
.p-human-mandate-workflow__step-number,
.p-ai-seminar-workflow__step-number {
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.p-ai-mandate-workflow__step-number {
    color: #3A4BFF;
}

.p-human-mandate-workflow__step-number {
    color: #FF8A43;
}

.p-ai-seminar-workflow__step-number {
    color: #28D7A4;
}

.p-ai-mandate-workflow__step-title,
.p-human-mandate-workflow__step-title,
.p-ai-seminar-workflow__step-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.p-ai-mandate-workflow__step-text,
.p-human-mandate-workflow__step-text,
.p-ai-seminar-workflow__step-text {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Sections Padding */
.p-ai-mandate-section,
.p-human-mandate-section,
.p-ai-seminar-section {
    padding: 5rem 0;
}

@media (min-width: 768px) {

    .p-ai-mandate-section,
    .p-human-mandate-section,
    .p-ai-seminar-section {
        padding: 8rem 0;
    }
}

/* AI Seminar: Credentials Section */
.p-ai-seminar-credentials__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .p-ai-seminar-credentials__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .p-ai-seminar-credentials__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.p-ai-seminar-credentials__card {
    background-color: var(--color-surface);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid rgba(40, 215, 164, 0.2);
    position: relative;
    overflow: hidden;
}

.p-ai-seminar-credentials__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #28D7A4, #4A9EFF);
}

.p-ai-seminar-credentials__card--google::before {
    background: linear-gradient(90deg, #4285F4, #34A853);
}

.p-ai-seminar-credentials__card--microsoft::before {
    background: linear-gradient(90deg, #00BCF2, #7B5EA7);
}

.p-ai-seminar-credentials__provider {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.p-ai-seminar-credentials__provider--google {
    color: #4285F4;
}

.p-ai-seminar-credentials__provider--microsoft {
    color: #00BCF2;
}

.p-ai-seminar-credentials__name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.p-ai-seminar-credentials__date-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: rgba(40, 215, 164, 0.12);
    color: #28D7A4;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    width: fit-content;
}

/* AI Seminar: Authority / Profile Section */
.p-ai-seminar-authority {
    background-color: var(--color-background-base);
}

.p-ai-seminar-authority__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .p-ai-seminar-authority__inner {
        grid-template-columns: 1fr 1fr;
    }
}

.p-ai-seminar-authority__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.p-ai-seminar-authority__stat {
    text-align: center;
    padding: 1.5rem 1rem;
    background-color: var(--color-surface);
    border-radius: 1rem;
    border: 1px solid rgba(40, 215, 164, 0.15);
}

.p-ai-seminar-authority__stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: #28D7A4;
    line-height: 1;
}

.p-ai-seminar-authority__stat-unit {
    font-size: 1rem;
    font-weight: 700;
    color: #28D7A4;
}

.p-ai-seminar-authority__stat-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
    line-height: 1.4;
}

.p-ai-seminar-authority__catch {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-text-primary);
    line-height: 1.6;
}

@media (min-width: 768px) {
    .p-ai-seminar-authority__catch {
        font-size: 1.75rem;
    }
}

.p-ai-seminar-authority__catch mark {
    background: linear-gradient(transparent 60%, rgba(40, 215, 164, 0.3) 60%);
    color: inherit;
    padding: 0;
}

.p-ai-seminar-authority__body {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-top: 1rem;
}

/* AI Seminar: Freshness Banner */
.p-ai-seminar-freshness {
    background: linear-gradient(135deg, rgba(40, 215, 164, 0.1) 0%, rgba(74, 158, 255, 0.1) 100%);
    border: 1px solid rgba(40, 215, 164, 0.3);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 2.5rem;
}

.p-ai-seminar-freshness__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    color: #28D7A4;
}

.p-ai-seminar-freshness__title {
    font-size: 1rem;
    font-weight: 800;
    color: #28D7A4;
    margin-bottom: 0.375rem;
}

.p-ai-seminar-freshness__text {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* AI Seminar: Features updated */
.p-ai-seminar-features__item {
    background-color: var(--color-background-base);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(40, 215, 164, 0.1);
}

/* Comment Submit Button Fix */
#respond .submit,
#respond input[type="submit"] {
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* Fix for iOS/Safari */
}

#respond .submit:hover,
#respond input[type="submit"]:hover {
    background-color: var(--color-btn-primary-bg-hover);
}

/* =================================================================
  Component: Chat UI (.c-chat)
================================================================== */
.c-chat {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.c-chat__icon {
    flex-shrink: 0;
    width: 80px;
    text-align: center;
}

.c-chat__icon img {
    width: 80px;
    height: 80px !important;
    /* Force height to match width */
    aspect-ratio: 1 / 1;
    /* Ensure square aspect ratio */
    border-radius: 50%;
    /* Make icon circular */
    object-fit: cover;
    border: 2px solid var(--color-border-default);
    margin-bottom: 0.5rem;
    background-color: #fff;
    padding: 2px;
}

.c-chat__name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: 0.25rem;
}

/* Optional: Triangle arrow for speech bubble */
.c-chat__body::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: -10px;
    width: 20px;
    height: 20px;
    background-color: var(--color-surface);
    border-left: 1px solid var(--color-link);
    border-bottom: 1px solid var(--color-link);
    transform: rotate(45deg);
    z-index: 1;
    /* Ensure visibility */
}

.c-chat__body {
    flex-grow: 1;
    background-color: var(--color-surface);
    border: 1px solid var(--color-link);
    /* distinct border color */
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: visible !important;
    /* Allow triangle to stick out */
}

/* 
   Auto-style WP Media & Text block in AI x EC News details 
   to look like chat bubbles 
*/
/* 
   Auto-style WP Media & Text block in AI x EC News details 
   to look like chat bubbles 
*/
#single-ai-ec-news-article .wp-block-media-text {
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    grid-template-columns: 80px 1fr !important;
    /* Force fixed icon width */
}

/* Common Bubble Styles (Popo Default) */
#single-ai-ec-news-article .wp-block-media-text .wp-block-media-text__content {
    background-color: #FAFBFF;
    /* Pale Blue (Popo) */
    border: 1px solid var(--color-border-default);
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: visible !important;
    /* Allow triangle to stick out */
}

/* Misaki Bubble (Detected via 'has-media-on-the-right' class) */
/* Override alignment to be LEFT even if editor setting was Right */
#single-ai-ec-news-article .wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 80px 1fr !important;
    /* Keep icon on left (column 1) */
    direction: ltr;
    /* Ensure LTR */
}

/* Fix grid placement for "media on right" to actually appear on LEFT */
#single-ai-ec-news-article .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    grid-column: 1 !important;
    /* Force to first column */
    grid-row: 1;
}

#single-ai-ec-news-article .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    grid-column: 2 !important;
    /* Force to second column */
    grid-row: 1;
    background-color: #FFF5F5;
    /* Pale Pink (Misaki) */
    border-color: var(--color-border-default);
}

#single-ai-ec-news-article .wp-block-media-text .wp-block-media-text__media {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
    background-color: transparent;
}

#single-ai-ec-news-article .wp-block-media-text .wp-block-media-text__media img {
    width: 80px;
    height: 80px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border-default);
    padding: 2px;
    background-color: #fff;
}

#single-ai-ec-news-article .wp-block-media-text .wp-block-media-text__content::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: -10px;
    width: 20px;
    height: 20px;
    background-color: #FAFBFF;
    /* Match Popo BG */
    border-left: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
    transform: rotate(45deg);
    z-index: 1;
}

/* Update Triangle for Misaki */
#single-ai-ec-news-article .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content::before {
    background-color: #FFF5F5;
    /* Match Misaki BG */
}

/* Update Triangle for Misaki */
.single-ai_ec_news .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content::before {
    background-color: #FFF5F5;
    /* Match Misaki BG */
}


@media (max-width: 768px) {
    .c-chat {
        gap: 1rem;
    }

    .c-chat__icon {
        width: 60px;
    }

    .c-chat__icon img {
        width: 60px;
        height: 60px;
    }

    .c-chat__body {
        padding: 1rem;
    }

    .c-chat__body::before {
        top: 1.5rem;
    }
}

/* =================================================================
  User Custom Chat Classes (.misaki-bubble etc)
================================================================== */
/* User Requested Specific Chat Bubble (Misaki) */
/* User Requested Specific Chat Bubble (Misaki) */
.misaki-bubble {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    max-width: 90%;
    /* Left alignment by default */
    margin-right: auto;
    margin-left: 0;
    flex-direction: row;
    /* Icons on left */
}





/* Popo Bubble (Standard/Left) Styling Update */
.c-chat-bubble__content {
    background-color: #FAFBFF;
    /* Pale Blue */
    border: 1px solid var(--color-border-default);
    /* ... rest of base styles ... */
}

.c-chat-bubble__content::before {
    background-color: #FAFBFF;
    /* Match bg */
}




/* =================================================================
  News Archive Styles (List Layout)
================================================================== */
.p-news-archive__year-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.p-news-archive__year-link {
    display: block;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--color-border-default);
    border-radius: 9999px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-weight: 700;
    transition: all 0.2s;
}

.p-news-archive__year-link:hover,
.p-news-archive__year-link.current {
    background-color: var(--color-text-primary);
    color: white;
    border-color: var(--color-text-primary);
}

.p-news-archive__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border-default);
}

.p-news-archive__list-item {
    display: flex;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border-default);
    text-decoration: none;
    transition: all 0.2s ease;
    gap: 2rem;
}

.p-news-archive__list-item:hover {
    background-color: var(--color-surface-alt);
    padding-left: 1rem;
    padding-right: 1rem;
}

.p-news-archive__item-date {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    min-width: 6em;
    font-weight: 700;
    font-feature-settings: "palt";
}

.p-news-archive__item-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    flex: 1;
    line-height: 1.6;
}

.p-news-archive__list-item:hover .p-news-archive__item-title {
    color: var(--color-link);
}

@media (max-width: 768px) {
    .p-news-archive__list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1.25rem 0;
    }

    .p-news-archive__item-date {
        font-size: 0.8rem;
    }

    .p-news-archive__item-title {
        font-size: 1rem;
    }
}

/* =================================================================
  Antigravity Optimization - News Detail
================================================================== */

/* Layout Helpers for "Logical" Classes */
.l-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.l-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .l-row {
        gap: 40px;
    }
}

.l-col-left {
    width: 100%;
}

.l-col-right {
    width: 100%;
}

@media (min-width: 1024px) {
    .l-col-left {
        width: 25%;
        flex-shrink: 0;
    }

    .l-col-right {
        width: calc(75% - 40px);
        /* 75% minus gap */
    }
}

/* Specific Component Styles (Un-nested) */
.c-news-detail__mv {
    width: 100%;
    margin-bottom: 3rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .c-news-detail__mv {
        margin-bottom: 4rem;
    }
}

.c-news-detail__mv img,
.c-news-detail__mv-placeholder {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    /* Mobile ratio */
}

@media (min-width: 768px) {

    .c-news-detail__mv img,
    .c-news-detail__mv-placeholder {
        aspect-ratio: 16 / 7;
        /* Wide ratio */
    }
}

.c-news-detail__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.4;
    color: var(--color-text-primary);
}

@media (min-width: 768px) {
    .c-news-detail__title {
        font-size: 2rem;
    }
}

/* Meta List */


@media (min-width: 1024px) {
    .c-meta-list {
        position: sticky;
        top: 8rem;
        /* header offset */
    }
}

.c-meta-item {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

.c-meta-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--color-text-disabled);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.c-meta-value {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    margin-left: 0;
    font-weight: 500;
}

.c-meta-value a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

/* =================================================================
  Conversation UI Component (AISHA Brand Harmony)
================================================================== */
.c-conversation-bubble {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 2rem 0;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    /* Fallback */
}

.c-conversation-bubble__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Soft shadow */
    border: 1px solid #f0f0f0;
}

.c-conversation-bubble__icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.c-conversation-bubble__body {
    position: relative;
    background-color: #fff9f9;
    /* Soft Warm Tone */
    border: 1px solid #f9ecec;
    padding: 1.5rem;
    border-radius: 12px;
    line-height: 1.8;
    color: #444;
    flex-grow: 1;
}

/* Triangle */
.c-conversation-bubble__body::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -8px;
    width: 16px;
    height: 16px;
    background-color: #fff9f9;
    border-left: 1px solid #f9ecec;
    border-bottom: 1px solid #f9ecec;
    transform: rotate(45deg);
}

.c-conversation-bubble__name {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #b58d8d;
    /* Muted accent color */
    margin-bottom: 0.5rem;
}

.c-conversation-bubble__text {
    margin: 0;
    font-size: 0.95rem;
}

/* Mobile Responsiveness */
@media (max-width: 560px) {
    .c-conversation-bubble {
        gap: 12px;
    }

    .c-conversation-bubble__icon {
        width: 48px;
        height: 48px;
    }
}

.c-meta-value a:hover {
    color: var(--color-link);
}

/* =================================================================
  Re-Architecture: News Layout (Advanced 2-Column -> 3-Column Role)
================================================================== */
.l-news-layout {
    padding: 4rem 0;
    background-color: #f8f9fa;
}

.l-grid-system {
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    /* Left:Recent, Center:Main, Right:Widgets */
    gap: 40px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (max-width: 1024px) {
    .l-grid-system {
        grid-template-columns: 1fr;
        /* Mobile/Tablet: 1 Column */
        display: flex;
        flex-direction: column;
    }
}

.c-main-content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    order: 2;
    /* Desktop: Center */
}

@media (max-width: 1024px) {
    .c-main-content {
        order: 1;
        /* Mobile: Top */
        padding: 20px;
        width: 100%;
    }
}

.c-sidebar-recent {
    order: 1;
    /* Desktop: Left */
}

@media (max-width: 1024px) {
    .c-sidebar-recent {
        order: 2;
        /* Mobile: After Content */
        width: 100%;
    }
}

.c-sidebar-widgets {
    order: 3;
    /* Desktop: Right */
}

@media (max-width: 1024px) {
    .c-sidebar-widgets {
        order: 3;
        /* Mobile: Bottom */
        width: 100%;
    }
}

/* Typography & Parts */
.p-entry__header {
    margin-bottom: 2rem;
}

.p-entry__date {
    display: block;
    color: #888;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.p-entry__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-primary);
}

.p-entry__mv {
    margin-bottom: 2rem;
}

.p-entry__mv img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* Sidebar Components */
.c-sidebar-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-bottom: 2px solid #111;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    color: #111;
}

.c-recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-recent-item {
    margin-bottom: 1.5rem;
}

.c-recent-item a {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.c-recent-item a:hover {
    opacity: 0.8;
}

.c-recent-item a:hover .c-recent-item__title {
    color: var(--color-link);
}

.c-recent-item__img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background-color: #eee;
}

.c-recent-item__img img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    display: block;
}

.c-recent-item__info {
    display: flex;
    flex-direction: column;
}

.c-recent-item__info time {
    font-size: 0.7rem;
    color: #999;
    margin-bottom: 2px;
    font-weight: 700;
}

.c-recent-item__title {
    font-size: 0.85rem;
    line-height: 1.4;
    display: block;
    font-weight: 500;
    transition: color 0.2s;
}

/* Widgets */
.c-widget {
    margin-bottom: 2.5rem;
}

.c-widget ul {
    list-style: none;
    padding: 0;
}

.c-widget ul li {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.c-widget ul li a {
    color: #555;
    text-decoration: none;
    display: block;
    padding: 3px 0;
    border-bottom: 1px dashed #eee;
}

.c-widget ul li a:hover {
    color: var(--color-link);
}

/* Search Form Minimal styling */
/* Search Form Minimal styling - Removed (Moved to searchform.php) */

/* =================================================================
  Refined Layout & Functional Enhancement (Antigravity v2)
================================================================== */

/* =================================================================
   9. Chat Bubble Styles (Conversation UI)
   ================================================================== */

/* Common Bubble Container */
/* Common Bubble Container */
.misaki-bubble,
.popo-bubble {
    display: block;
    /* Changed from flex to block to allow float */
    margin-bottom: 2rem;
    width: 100%;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid transparent;
}

/* Icons */
.misaki-icon,
.popo-icon {
    float: left;
    /* Float icon to left */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    /* For emoji fallback */
    border: 2px solid rgba(255, 255, 255, 0.8);
    margin-right: 1rem;
    /* Space between icon and name */
    margin-bottom: 0;
    /* Reduced to pull text up */
}

/* Clearfix for Bubble */
.misaki-bubble::after,
.popo-bubble::after {
    content: "";
    display: table;
    clear: both;
}

.misaki-icon img,
.popo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text Area Base */
.misaki-text,
.popo-text {
    font-size: 0.95rem;
    line-height: 1.6;
    /* Updated to 1.6 from 1.8 */
    color: var(--color-text-body);
    width: 100%;
    overflow: visible;
    /* Ensure it wraps around float */
    display: block;
    /* Force remove inner styles */
    border: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.misaki-name,
.popo-name {
    display: flex;
    align-items: center;
    height: 30px;
    /* Reduced from 50px */
    margin-bottom: 0;
    padding-top: 4px;
    /* Optical alignment with icon top */
    font-size: 0.9rem;
    color: var(--color-text-subtle);
    font-weight: 700;
}

/* --- Misaki (Right / Student / User) --- */
/* --- Misaki (Right / Student / User) --- */
.misaki-bubble {
    background-color: transparent;
    /* No background */
    border-color: #D1D6FF;
    /* CI Light Lavender */
}

/* --- Popo (Left / Teacher / Assistant) --- */
.popo-bubble {
    background-color: transparent;
    /* Pale Blue background on PARENT */
    border-color: #D1D6FF;
}

/* Mobile Adjustments */
@media (max-width: 640px) {

    .misaki-bubble,
    .popo-bubble {
        padding: 1rem;
        gap: 0.75rem;
    }

    .misaki-icon,
    .popo-icon {
        width: 40px;
        height: 40px;
    }

    .misaki-text,
    .popo-text {
        font-size: 0.9rem;
    }
}

.p-news-detail__mv img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1.618 / 1;
    /* Golden Ratio */
    object-fit: cover;
}

/* Refined Grid System */
.l-grid-system {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 0;
    /* Tight grid with borders */
    background-color: #f8f9fa;
    max-width: 1280px;
    /* Ensure consistency with l-container */
}

/* Column Styles */
.c-sidebar-recent {
    padding: 40px 30px 40px 0;
    border-right: 1px solid #eee;
    /* Left Col Right Border */
    order: 1;
}

.c-main-content {
    background-color: #ffffff;
    padding: 60px 50px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.02);
    /* Subtle elevation */
    order: 2;
    width: 100%;
    /* Ensure filling grid cell */
}

.c-sidebar-widgets {
    padding: 40px 0 40px 30px;
    border-left: 1px solid #eee;
    /* Right Col Left Border */
    order: 3;
}

/* Typography Enhancement */
.e-content {
    line-height: 1.8;
    /* Tightened line-height (was 2.0) */
    letter-spacing: 0.03em;
    color: #333;
    font-size: 1rem;
}

.e-content p {
    margin-bottom: 2.5rem;
}

/* Mobile & Tablet Responsiveness (Accordion) */
@media (max-width: 1024px) {
    .l-grid-system {
        display: flex;
        flex-direction: column;
        background-color: transparent;
    }

    .c-sidebar-recent,
    .c-sidebar-widgets {
        padding: 30px 20px;
        border: none;
        width: 100%;
        background-color: #f8f9fa;
        /* Sidebar bg on mobile */
    }

    .c-main-content {
        order: 1;
        padding: 30px 20px;
        box-shadow: none;
        margin-bottom: 2rem;
    }

    .c-sidebar-recent {
        order: 2;
        margin-bottom: 2rem;
    }

    .c-sidebar-widgets {
        order: 3;
    }

    /* Accordion Logic */
    .js-accordion {
        border-bottom: 1px solid #eee;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .js-accordion:last-child {
        border-bottom: none;
    }

    .js-accordion-trigger {
        cursor: pointer;
        position: relative;
        display: block;
        margin-bottom: 0;
        padding-right: 20px;
        /* Space for icon */
    }

    .js-accordion-trigger::after {
        content: '+';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 300;
        font-size: 1.2rem;
    }

    .js-accordion.is-open .js-accordion-trigger::after {
        content: '-';
    }

    .js-accordion-content {
        display: none;
        /* Initial state */
        padding-top: 20px;
    }

    .js-accordion.is-open .js-accordion-content {
        display: block;
    }
}

/* =================================================================
  Article Detail Refinement & Author Profile (Antigravity v3)
================================================================== */

/* 1. Meaningful Headings */
.e-content h2 {
    font-size: 1.5rem;
    padding-left: 15px;
    border-left: 3px solid #111;
    /* Strong accent line */
    margin: 4rem 0 2rem;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.e-content h3 {
    font-size: 1.25rem;
    margin: 3rem 0 1.5rem;
    display: flex;
    align-items: center;
    font-weight: 700;
}

.e-content h3::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #eee;
    margin-left: 20px;
}

/* 2. Refined Conversation Bubble (Nuance Color) */
.c-conversation-bubble__body {
    background-color: #fcf8f8 !important;
    /* Very pale shell pink */
    border: 1px solid #f3ebeb !important;
}

.c-conversation-bubble__body::before {
    background-color: #fcf8f8 !important;
    border-left: 1px solid #f3ebeb !important;
    border-bottom: 1px solid #f3ebeb !important;
}

.c-conversation-bubble__name {
    color: #9d8080 !important;
    /* Muted text color */
}

/* 3. Author Box (Popo) */
.c-author-box {
    margin-top: 6rem;
    padding-top: 4rem;
    border-top: 1px dashed #ddd;
}

.c-author-box__inner {
    display: flex;
    gap: 30px;
    background: #fdfdfd;
    padding: 30px;
    border-radius: 8px;
    align-items: center;
    border: 1px solid #f5f5f5;
}

.c-author-box__figure {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-author-box__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-author-box__desc {
    flex-grow: 1;
}

.c-author-box__label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: #999;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.c-author-box__name {
    font-size: 1.15rem;
    margin: 0.2rem 0 0.8rem;
    color: #111;
    font-weight: 700;
}

.c-author-box__text {
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
    color: #666;
}

@media (max-width: 768px) {
    .c-author-box__inner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .c-author-box__figure {
        margin: 0 auto;
    }
}

/* =============================================
   Article Credit Section (Supervision note + Writer/Supervisor cards)
   ============================================= */

.c-article-credit {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 2px solid #E2E4F0;
}

/* --- Supervision note banner --- */
.c-article-credit__note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #F5F6FA;
    border-left: 3px solid #3A4BFF;
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: #5E637A;
    line-height: 1.75;
}

.c-article-credit__note-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.c-article-credit__note p {
    margin: 0;
}

.c-article-credit__note a {
    color: #3A4BFF;
    font-weight: 700;
    text-decoration: none;
}

.c-article-credit__note a:hover {
    text-decoration: underline;
}

/* --- Section heading --- */
.c-article-credit__heading {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #9AA0B8;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

/* --- 2-column grid (PC) / 1-column (mobile) --- */
.c-article-credit__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .c-article-credit__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Individual credit card --- */
.c-credit-card {
    background: #fdfdfd;
    border: 1px solid #E2E4F0;
    border-radius: 14px;
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.2s;
}

.c-credit-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

.c-credit-card--supervisor {
    background: #fdfdfd;
    border-color: #E2E4F0;
}

.c-credit-card__role {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #9AA0B8;
    margin-bottom: 1rem;
}

.c-credit-card__figure {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.1rem;
    background: #fff;
    box-shadow: 0 4px 16px rgba(58, 75, 255, 0.1);
    flex-shrink: 0;
    position: relative;
}

.c-credit-card__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-credit-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: #1C1F2E;
    margin: 0 0 0.65rem;
    line-height: 1.4;
}

.c-credit-card__text {
    font-size: 0.8rem;
    line-height: 1.75;
    color: #5E637A;
    margin: 0 0 1.1rem;
    flex-grow: 1;
}

.c-credit-card__link {
    display: inline-block;
    font-size: 0.8rem;
    color: #3A4BFF;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    padding: 0.4rem 1rem;
    border: 1px solid #C7CCFF;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s;
}

.c-credit-card__link:hover {
    background: #3A4BFF;
    color: #fff;
    text-decoration: none;
}

/* 4. Post Navigation */
.c-post-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    gap: 2rem;
}

.c-post-nav div {
    width: 45%;
    flex-grow: 1;
}

.c-post-nav div a {
    text-decoration: none;
    color: #111;
    font-size: 0.9rem;
    display: block;
    transition: all 0.3s ease;
    line-height: 1.5;
    padding: 1.5rem;
    border-radius: 8px;
    background-color: transparent;
}

.c-post-nav div a:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-text-primary);
}

.c-post-nav__label {
    display: block;
    font-size: 0.7rem;
    color: #bbb;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.c-post-nav__next {

    text-align: right;
}

/* =================================================================
  Senior Frontend Standards: Note.com/Anthropic Style (Antigravity v5)
================================================================== */

:root {
    /* 1. Base Variables per Senior Architect Spec */
    --color-text-body: #333333;
    --color-text-muted: #666666;
    --color-text-subtle: #999999;
    --color-bg-base: #ffffff;
    --color-bg-subtle: #f9fafb;
    /* Anthropic-like calm gray */
    --color-border-light: #eeeeee;
    --color-accent-intelligent: #111111;
    /* Minimalist Black */

    --font-base-size: 18px;
    --font-line-height: 1.9;
    /* Calm reading */
    --font-family-base: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --spacing-unit: 8px;
    --spacing-sm: 16px;
    /* 2 units */
    --spacing-md: 32px;
    /* 4 units */
    --spacing-lg: 64px;
    /* 8 units */
    --spacing-xl: 96px;
    /* 12 units */

    --layout-content-width: 820px;
    /* ~45 chars * 18px */
    --layout-sidebar-width: 300px;
    --layout-gap: 60px;
}

/* 2. Global Reset for Reading Context */
.l-note-layout {
    background-color: var(--color-bg-base);
    color: var(--color-text-body);
    font-family: var(--font-family-base);
    font-size: var(--font-base-size);
    line-height: var(--font-line-height);
    padding-bottom: var(--spacing-xl);
    -webkit-font-smoothing: antialiased;
}

/* 3. Hero Section: "First Reading Moment" */
.p-news-hero {
    /* Integrated, not heavy */
    width: 100%;
    max-width: var(--layout-content-width);
    margin: 0 auto var(--spacing-lg);
    text-align: left;
    padding: 0 var(--spacing-sm);
}

.p-news-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.p-news-hero__cat a {
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1px solid var(--color-border-light);
    padding: 4px 14px;
    border-radius: 100px;
    /* Fully rounded pill */
    transition: all 0.2s ease;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.p-news-hero__cat a:hover {
    border-color: var(--color-text-subtle);
    color: var(--color-text-body);
}

.p-news-hero__title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    /* Responsive H1 32-40px */
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.02em;
    /* Tight editorial feel */
    margin-bottom: var(--spacing-md);
    color: var(--color-accent-intelligent);
}

.p-news-hero__visual {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--color-bg-subtle);
}

.p-news-hero__visual img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1.91 / 1;
    /* Calm cinematic ratio */
    object-fit: cover;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    /* Very subtle lift */
}

/* 4. Layout Grid: 2-Column (Content + Sidebar) */
.l-note-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--layout-sidebar-width);
    gap: var(--layout-gap);
    max-width: calc(var(--layout-content-width) + var(--layout-sidebar-width) + var(--layout-gap));
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
    align-items: start;
}

/* 5. Main Content Typography (Strict Rules) */
.l-note-main {
    max-width: 100%;
    /* Constrained by grid, but ensuring no overflow */
}

.l-note-main .e-content {
    font-size: var(--font-base-size);
    /* Tighter line height for better density */
    line-height: 1.7;
    color: var(--color-text-body);
}

.l-note-main .e-content p {
    /* Slightly tighter paragraph spacing */
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
    /* Optional: text-align: justify; if requested, but left is usually calmer */
}

.l-note-main .e-content h2 {
    font-size: 1.5rem;
    /* ~24px */
    font-weight: 700;
    margin: var(--spacing-lg) 0 var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
    /* Minimal divider */
    color: var(--color-accent-intelligent);
    padding-left: 0;
    border-left: none;
    /* Reset v3 styles */
}

.l-note-main .e-content h3 {
    font-size: 1.25rem;
    /* ~20px */
    font-weight: 700;
    margin: var(--spacing-md) 0 var(--spacing-sm);
    color: var(--color-text-body);
}

.l-note-main .e-content ul,
.l-note-main .e-content ol {
    margin-bottom: var(--spacing-md);
    padding-left: 1.5em;
    color: var(--color-text-muted);
}

.l-note-main .e-content li {
    margin-bottom: 0.5em;
}

/* 6. Author Profile (Post-Article) */
.l-note-main .c-author-box {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background-color: var(--color-bg-subtle);
    border-radius: 8px;
    border: none;
    /* No hard borders */
}

.l-note-main .c-author-box__inner {
    background: transparent;
    padding: 0;
    gap: var(--spacing-md);
    border: none;
}

.l-note-main .c-author-box__figure {
    width: 80px;
    height: 80px;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.l-note-main .c-author-box__name {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.l-note-main .c-author-box__text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* 7. Sidebar: Secondary & Quiet */
.l-note-sidebar {
    padding-top: var(--spacing-sm);
    /* Align visually with text content */
}

.l-note-sidebar .c-widget {
    margin-bottom: var(--spacing-lg);
    border-bottom: none;
    /* Remove dividers */
}

.l-note-sidebar .c-sidebar-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-subtle);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    border: none;
}

/* Sidebar List Links (e.g., Categories) */
.l-note-sidebar .c-widget__content ul li a {
    font-size: 0.8rem;
    color: var(--color-text-body);
    text-decoration: none;
    display: block;
    padding: 0.5rem 0.75rem;
    margin: 0 -0.75rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.l-note-sidebar .c-widget__content ul li a:hover {
    color: var(--color-accent);
    background-color: var(--color-bg-surface);
}

/* Recent Posts Mini in Sidebar */
.c-recent-item-mini a {
    display: block;
    padding: 0.5rem 0.75rem;
    margin: 0 -0.75rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.c-recent-item-mini a:hover {
    background-color: var(--color-bg-surface);
}

.c-recent-list-mini__title {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 4px;
    color: var(--color-text-body);
    transition: color 0.2s;
}

.c-recent-item-mini a:hover .c-recent-list-mini__title {
    color: var(--color-accent);
    text-decoration: none;
}

/* 8. Mobile Responsiveness */
@media (max-width: 1024px) {
    .l-note-grid {
        grid-template-columns: 1fr;
        /* Single column */
        gap: var(--spacing-lg);
        max-width: 600px;
        /* Optimal reading width on mobile/tablet */
    }

    .l-note-sidebar {
        order: 2;
        /* Move to bottom */
        padding-top: var(--spacing-lg);
        border-top: 1px solid var(--color-border-light);
    }

    .p-news-hero__title {
        font-size: 1.75rem;
    }

}

/* =================================================================
  Editorial-Grade Refinements (v6)
================================================================== */

/* 1. Editorial Lead Paragraph */
.p-news-hero__lead {
    font-size: 1.125rem;
    /* ~20px */
    line-height: 1.8;
    color: var(--color-text-body);
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.p-news-hero__lead p {
    margin-bottom: 0;
}

/* 2. Visual Treatment: "Pause", not "Headline" */
.p-news-hero__visual {
    background-color: transparent;
    /* Remove subtle bg if it distracts */
    border-radius: 6px;
    /* Ensure content width match */
    max-width: 100%;
    margin-bottom: var(--spacing-xl);
    /* Big breath before body */
}

.p-news-hero__visual img {
    box-shadow: none;
    /* Remove shadow for flatter, calmer look */
    border: 1px solid rgba(0, 0, 0, 0.03);
    /* Extremely subtle definition */
    filter: saturate(0.95);
    /* Slightly muted for "calm" */
}

/* 3. Sidebar: Visually Secondary */
.l-note-sidebar {
    opacity: 0.85;
    /* Reduce overall visual weight */
    transition: opacity 0.3s;
}

.l-note-sidebar:hover {
    opacity: 1;
}

.l-note-sidebar .c-recent-list-mini__title {
    font-weight: 400;
    /* Regular weight, not bold */
    color: var(--color-text-muted);
    /* Dark gray, not black */
}

.l-note-sidebar .c-sidebar-label {
    color: #bbb;
    /* Even lighter label */
}

/* 4. Vertical Rhythm & Breathing Space */
.l-note-main .e-content h2 {
    margin-top: calc(var(--spacing-xl) * 1.2);
    /* More space before H2 */
    margin-bottom: var(--spacing-md);
    font-size: 1.6rem;
    letter-spacing: 0.08em;
}

.l-note-main .e-content p {
    margin-bottom: 2.2em;
    /* Generous paragraph spacing */
}

/* =================================================================
  Technical SEO & UX Refinement (v7)
================================================================== */

/* 1. Reading Time */
.p-news-hero__readtime {
    font-size: 0.85rem;
    color: var(--color-text-subtle);
    background: var(--color-bg-subtle);
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: auto;
    /* Push to right if flex */
}

/* 2. Table of Contents (TOC) */
.c-toc {
    background-color: var(--color-bg-subtle);
    border-radius: 8px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    border: 1px solid var(--color-border-light);
}

.c-toc__title {
    font-weight: 700;
    margin-bottom: 0;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.c-toc__title::after {
    content: '-';
    font-weight: 300;
}

.c-toc.js-toc-accordion:not(.is-open) .c-toc__title::after {
    content: '+';
}

.c-toc__list {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: 1.2em;
    list-style: decimal;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    display: block;
}

.c-toc.js-toc-accordion:not(.is-open) .c-toc__list {
    display: none;
}

.c-toc__list li {
    margin-bottom: 0.5em;
}

.c-toc__list a {
    text-decoration: none;
    color: var(--color-text-body);
}

.c-toc__list a:hover {
    color: var(--color-link);
}

/* 3. Related Posts (Engagement) */
.c-related-posts {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid var(--color-border-light);
}

.c-related-posts__heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

/* Grid and Card styles removed in favor of Tailwind in single-ai_ec_news.php */

@media (max-width: 768px) {
    /* .c-related-posts__grid removed */

    .p-news-hero__meta {
        flex-wrap: wrap;
    }

    .p-news-hero__readtime {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
    }
}

/* =================================================================
  Single Template Structure Refinement (v8)
================================================================== */

/* 1. Category Label (Top) */
.p-news-hero__cat-wrapper {
    margin-bottom: var(--spacing-sm);
}

.p-news-hero__cat {
    display: inline-block;
    /* Ensure the pill style from v5 applies here if selector matches, 
       otherwise re-apply if it was specific to .p-news-hero__cat a */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text-subtle);
    text-transform: uppercase;
}

/* 2. Title Spacing */
.p-news-hero__title {
    margin-bottom: var(--spacing-sm);
    /* Tighter to meta */
    line-height: 1.3;
}

/* 3. Meta (Below Title) */
.p-news-hero__meta {
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    /* Spacer before Lead */
    border-top: none;
    padding-top: 0;
}

/* 4. Visual Margin (Rhythm) */
.p-news-hero__visual {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* 5. Mobile Adjustments for v8 */
@media (max-width: 768px) {
    .p-news-hero__title {
        font-size: 1.75rem;
    }

    .l-container {
        /* Override inline style if needed, but inline usually wins.
           Mobile might need less top margin. */
        margin-top: 30px !important;
    }
}

/* =================================================================
  AISHA GLOBAL DESIGN SYSTEM 2026 (v9)
  Concept: "Calm, Intellectual, Trustworthy"
================================================================== */

:root {
    /* A) TYPOGRAPHY SYSTEM */
    --font-family-base: "Zen Kaku Gothic New", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-family-code: "Fira Code", Consolas, Monaco, monospace;

    --font-size-base: 18px;
    --font-size-sm: 15px;
    --font-size-xs: 13px;

    --line-height-base: 1.8;
    --line-height-heading: 1.4;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* B) COLOR & CI SYSTEM */
    /* Primary / Accent */
    --color-primary: #111111;
    /* Intelligent Black */
    --color-accent: #0056b3;
    /* Reliable Blue (Links) */
    --color-accent-hover: #004494;

    /* Backgrounds */
    --color-bg-body: #ffffff;
    --color-bg-surface: #f9fafb;
    /* Calm Gray */
    --color-bg-input: #ffffff;

    /* Text */
    --color-text-main: #333333;
    /* Dark Gray for reading */
    --color-text-sub: #666666;
    /* Muted */
    --color-text-disabled: #767676;

    /* Borders */
    --color-border: #e5e7eb;
    --color-border-hover: #d1d5db;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
    --space-xxl: 96px;

    /* UI Globals */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pill: 9999px;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* GLOBAL RESET & BASE STYLES */
html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-main);
    background-color: var(--color-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* C) LINK STYLES */
a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--color-accent);
    opacity: 0.8;
}

/* Text links in content should be obvious but calm */
.e-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    border-bottom: none;
}

.e-content a:hover {
    color: var(--color-accent-hover);
    text-decoration-thickness: 2px;
    border-bottom: none;
}

.e-content img {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

/* D) HEADING STYLES */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-primary);
    margin-top: 0;
}

/* E) BUTTON SYSTEM (.c-btn) */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-pill);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none !important;
    line-height: 1.5;
}

.c-btn--primary {
    background-color: var(--color-primary);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.c-btn--primary:hover {
    background-color: #333;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.c-btn--secondary {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text-main) !important;
}

.c-btn--secondary:hover {
    background-color: var(--color-bg-surface);
    border-color: var(--color-text-sub);
}

/* F) FORM ELEMENTS */
input,
textarea,
select {
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    padding: 8px 12px;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px;
    /* Match rounded-lg of Staff card */
    background-color: #ffffff;
    color: var(--color-text-main);
    transition: border-color 0.2s;
    box-shadow: none !important;
    /* Force removal of any shadow */
    -webkit-appearance: none;
    /* Remove OS styles */
    appearance: none;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-text-sub) !important;
    box-shadow: none !important;
}

/* G) UTILITY OVERRIDES */
/* Ensure Archive Dropdown matches system */
select[name="archive-dropdown"] {
    max-width: 100%;
    cursor: pointer;
}

/* ===== FRONT PAGE: AI LIBRARY TAG CLOUD MARQUEE ===== */
@keyframes fp-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.fp-marquee-track {
    display: flex;
    width: max-content;
    animation: fp-marquee 40s linear infinite;
}
.fp-marquee-track--reverse {
    animation: fp-marquee 32s linear infinite reverse;
}
.fp-marquee-track--slow {
    animation: fp-marquee 52s linear infinite;
}
.fp-marquee-row:hover .fp-marquee-track,
.fp-marquee-row:hover .fp-marquee-track--reverse,
.fp-marquee-row:hover .fp-marquee-track--slow {
    animation-play-state: paused;
}

/* Fix mobile tap targets */
@media (max-width: 768px) {

    a,
    button,
    input,
    select {
        min-height: 44px;
        /* Apple Human Interface Guidelines */
    }
}

/* 9. Comments Section Refinement */
.comment-list {
    list-style: none;
    margin: 3rem 0;
    padding: 0;
    border-top: none;
    /* Removed for Box Style */
}

.comment-list .comment {
    border-bottom: none;
    /* Removed for Box Style */
    padding: 0;
    margin-bottom: 1.5rem;
}

/* Comment Box Hover Effect - REMOVED (Keep gray border) */
/* 
.comment-body:hover {
    border-color: var(--color-accent) !important;
    box-shadow: none !important;
} 
*/

.comment-list .comment:last-child {
    border-bottom: none;
}

/* Flex layout for Author Meta */
.comment-meta {
    display: flex;
    align-items: center;
    /* If flex-direction is row (default), justify-content: flex-start puts them left to right */
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/* Author: Icon Left, Name Right */
.comment-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: auto;
    /* Push meta data if any to right */
}

.comment-author .avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
    background-color: var(--color-bg-subtle);
}

.comment-author .fn {
    font-style: normal;
    font-weight: 700;
    font-size: 0.85rem;
    /* Name size */
    color: var(--color-text-body);
}

.comment-author .says {
    display: none;
}

.comment-metadata {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

.comment-metadata a {
    color: inherit;
    text-decoration: none;
}

/* Comment Content: Readable */
.comment-content {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-body);
    /* Mobile-first: No indent, just block */
    padding-left: 0;
    margin-top: 0.5rem;
}

/* Desktop: Indent to align with text */
@media (min-width: 640px) {
    .comment-content {
        /* Align with 36px icon + 0.75rem gap = ~48px */
        padding-left: calc(36px + 0.75rem);
        margin-top: 0;
    }
}

/* Reply Button: Simple & Wide */
.comment-reply-link {
    display: inline-block;
    padding: 6px 24px;
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 80px;
    text-align: center;
}

.comment-reply-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: var(--color-bg-base);
}

/* =================================================================
   Co-author Banner (Cute & Stylish)
   ================================================================== */
.c-co-author-banner {
    display: block;
    margin-top: -10px;
    /* Pull up to overlap/connect with visual */
    background: #fff;
    border: 2px dashed #e0d4d4;
    border-radius: 8px;
    padding: 12px 20px;
    text-align: center;
    color: #8a7b7b;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s, box-shadow 0.2s;
}

.c-co-author-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
    color: var(--color-link);
    border-color: var(--color-link-light);
}

.c-co-author-banner::before {
    /* "Masking Tape" effect */
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 80px;
    height: 24px;
    background-color: rgba(255, 245, 230, 0.8);
    border-left: 1px dotted rgba(0, 0, 0, 0.05);
    border-right: 1px dotted rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    opacity: 0.9;
}

/* =================================================================
   TOC Refinement
   ================================================================== */
.c-toc {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem !important;
    /* Reduce bottom margin */
    font-size: 0.9rem;
    /* Smaller total font size */
}

.c-toc__title {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: #666;
}

.c-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-toc__list li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.25em;
}

.c-toc__list li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: #d1d6ff;
    border-radius: 50%;
    transform: translateY(-50%);
}

.c-toc__list a {
    text-decoration: none;
    color: var(--color-text-body);
}

.c-toc__list a:hover {
    color: var(--color-link);
}

.c-toc__list li a {
    text-decoration: none;
    color: var(--color-text-primary);
    transition: color 0.2s;
    font-size: 0.9rem;
}

.c-toc__list li a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

/* =================================================================
  12. Popo Banner
================================================================== */

.home-popo-banner {
    /* Margin handled by active context (utility classes) */
    position: relative;
    z-index: 50;
}

/* Custom Text Shadow for AI Label */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.home-popo-banner__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.home-popo-banner__card {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 16px);
    padding: clamp(10px, 1.8vw, 18px);
    border-radius: 18px;

    /* Standard Card Design */
    background: var(--color-surface);
    border: 1px solid var(--color-border-default);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    /* Animation props */
    opacity: 0;
    transform: translateY(10px);
    /* Reduced delay as it is in a dedicated section */
    animation: popoCardEntry 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

@media (prefers-color-scheme: dark) {
    .home-popo-banner__card {
        background: var(--color-dark-surface);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
}

.home-popo-banner__popo {
    flex: 0 0 auto;
    width: clamp(60px, 8vw, 120px);
    /* Smaller Popo on mobile */
}

.popo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.popo__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.popo__eyelid {
    opacity: 0;
    will-change: opacity;
    animation: popoBlink 8s infinite steps(1, end);
}

@keyframes popoBlink {

    0%,
    94%,
    100% {
        opacity: 0;
    }

    95%,
    96% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popo__eyelid {
        animation: none;
        opacity: 0;
    }
}

.home-popo-banner__title {
    font-size: clamp(12px, 1.4vw, 18px);
    /* Smaller title on mobile */
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px 0;
    /* Reduced margin */
    color: var(--color-text-primary);
}

@media (prefers-color-scheme: dark) {
    .home-popo-banner__title {
        color: var(--color-dark-text-primary);
    }
}

.home-popo-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    /* Compact button */
    border-radius: 10px;
    font-size: 11px;
    /* Smaller font for CTA */
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-primary);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

@media (min-width: 768px) {
    .home-popo-banner__cta {
        font-size: 13px;
        padding: 8px 14px;
    }
}

.home-popo-banner__cta:hover {
    transform: translateY(-1px);
    background: rgba(0, 0, 0, 0.08);
}

.home-popo-banner__cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-color-scheme: dark) {
    .home-popo-banner__cta {
        border-color: rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-dark-text-primary);
    }

    .home-popo-banner__cta:hover {
        background: rgba(255, 255, 255, 0.15);
    }
}

@media (max-width: 768px) {
    .home-popo-banner__card {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-popo-banner__popo {
        width: clamp(96px, 24vw, 140px);
    }
}

/* =================================================================
  13. UI Gimmicks (Popo Card, Accent Line, etc.)
================================================================== */

/* 13.1 Popo Card Animations */
.home-popo-banner__card {
    /* Initial state for entry animation */
    opacity: 0;
    transform: translateY(10px);
    animation: popoCardEntry 1s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

@keyframes popoCardEntry {
    to {
        opacity: 1;
        transform: translateY(-4px);
        /* Lift up slightly */
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
        /* Soft shadow */
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-popo-banner__card {
        animation: none;
        opacity: 1;
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }
}

.home-popo-banner__card:hover {
    transform: translateY(-5px);
    /* Move 1px up from -4px */
}

/* 13.2 Headline Accent Line */
.headline-accent {
    position: relative;
    display: inline-block;
}

.headline-accent::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #C4B9FF, #A5F3FC, #C4B9FF);
    /* Soft light purple & blue */
    background-size: 300% 100%;
    animation: headlineFlow 6s linear infinite;
    opacity: 0.9;
    filter: hue-rotate(var(--scroll-hue-rotate, 0deg));
    /* Scroll effect */
}

@keyframes headlineFlow {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* 13.3 Popo Modal */
.popo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.popo-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.popo-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 18, 38, 0.7);
    /* Deep navy semi-transparent */
    backdrop-filter: blur(8px);
}

.popo-modal__content {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.is-open .popo-modal__content {
    transform: translateY(0);
}

@media (prefers-color-scheme: dark) {
    .popo-modal__content {
        background: rgba(21, 25, 54, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--color-dark-text-primary);
    }
}

.popo-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.popo-modal__close:hover {
    background: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    .popo-modal__close:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .popo-modal__close svg {
        stroke: var(--color-dark-text-primary);
    }
}

/* 13.4 Scroll-Linked Effects (Variables) */
:root {
    --scroll-hue-rotate: 0deg;
}

/* Apply delicate background shift on body or specific section if desired. 
   For now, we'll just keep it prepared for JS to update if we want to use it 
   on specific elements, or we can use it on the hero grain overlay opacity or similar. */
/* =================================================================
   Headline Accent Animation (Flowing Gradient Underline)
================================================================== */
.headline-accent {
    position: relative;
    display: inline-block;
    z-index: 1;
    /* Ensure text is above */
}

.headline-accent::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    /* Slight offset */
    width: 100%;
    height: 8px;
    /* Thickness of the marker */
    background: linear-gradient(120deg, #22D3EE, #3A4BFF, #D946EF, #F472B6, #22D3EE);
    background-size: 300% 100%;
    border-radius: 2px;
    opacity: 0.4;
    /* Translucent marker style */
    z-index: -1;
    /* Behind text */
    animation: gradientFlow 4s linear infinite;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* =================================================================
   Article FAQ Section (.article-faq)
   ポポダッシュボードから記事末尾に自動挿入されるFAQブロック
================================================================== */
.article-faq {
    margin: 3rem 0 2rem;
}

.article-faq h2 {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #9AA0B8;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    /* Reset article h2 overrides */
    padding-left: 0;
    border-left: none;
    border-bottom: none;
    background: none;
}

.article-faq dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Q & A セット */
.article-faq dt {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1C1F2E;
    margin-bottom: 0;
    padding: 0.8rem 1rem 0.8rem 2.75rem;
    position: relative;
    line-height: 1.6;
    background: #F5F6FA;
    border-radius: 8px 8px 0 0;
    border: 1px solid #E2E4F0;
    border-bottom: 1px solid #ecedf5;
}

/* Q marker badge */
.article-faq dt::before {
    content: 'Q';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    font-weight: 900;
    color: #3A4BFF;
    background: rgba(58, 75, 255, 0.1);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    letter-spacing: 0;
}

.article-faq dd {
    font-size: 0.9rem;
    color: #5E637A;
    line-height: 1.85;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0.8rem 1rem 0.8rem 2.75rem;
    background: #ffffff;
    border-radius: 0 0 8px 8px;
    border: 1px solid #E2E4F0;
    border-top: none;
    position: relative;
}

/* A marker */
.article-faq dd::before {
    content: 'A';
    position: absolute;
    left: 0.75rem;
    top: 0.8rem;
    font-size: 0.65rem;
    font-weight: 900;
    color: #9AA0B8;
    background: #F0F1F8;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .article-faq dt,
    .article-faq dd {
        padding-left: 2.5rem;
    }
}

/* =================================================================
  Cookie Banner（改正電気通信事業法 外部送信規律への対応）
================================================================== */
.c-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-dark-surface);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1rem 1.5rem;
}

.c-cookie-banner.is-visible {
    transform: translateY(0);
}

.c-cookie-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.c-cookie-banner__text {
    color: var(--color-dark-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.7;
    flex: 1;
    min-width: 220px;
    margin: 0;
}

.c-cookie-banner__link {
    color: var(--color-link);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.c-cookie-banner__link:hover {
    color: var(--color-link-hover);
}

.c-cookie-banner__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.c-cookie-banner__detail {
    color: var(--color-dark-text-secondary);
    font-size: 0.8125rem;
    text-decoration: underline;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.c-cookie-banner__detail:hover {
    color: var(--color-dark-text-primary);
}

.c-cookie-banner__btn {
    background-color: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    font-family: inherit;
}

.c-cookie-banner__btn:hover {
    background-color: var(--color-btn-primary-bg-hover);
}

.c-cookie-banner__text--short,
.c-cookie-banner__btn--short {
    display: none;
}

@media (max-width: 640px) {
    .c-cookie-banner {
        padding: 0.75rem 1rem;
    }
    .c-cookie-banner__inner {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }
    .c-cookie-banner__text {
        font-size: 0.75rem;
        line-height: 1.5;
        min-width: 0;
    }
    .c-cookie-banner__text--full {
        display: none;
    }
    .c-cookie-banner__text--short {
        display: inline;
    }
    .c-cookie-banner__btn--full {
        display: none;
    }
    .c-cookie-banner__btn--short {
        display: inline;
    }
    .c-cookie-banner__detail {
        display: none;
    }
    .c-cookie-banner__btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.875rem;
        flex-shrink: 0;
    }
}

/* =================================================================
  AI Policy Page
================================================================== */
:root {
    --color-ai-policy-accent: #6366F1;
    --color-ai-policy-accent-light: rgba(99, 102, 241, 0.06);
    --color-ai-policy-accent-border: rgba(99, 102, 241, 0.35);
}

.p-ai-policy-hero {
    background-image:
        radial-gradient(circle at 10% 80%, rgba(99, 102, 241, 0.08), transparent 35%),
        radial-gradient(circle at 90% 20%, rgba(168, 85, 247, 0.05), transparent 30%);
}

.p-ai-policy-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ai-policy-accent);
    margin-bottom: 1rem;
}

.p-ai-policy-meta {
    border-left: 3px solid var(--color-ai-policy-accent);
    padding-left: 1.25rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 2;
}

/* --- 目次 --- */
.p-ai-policy-toc {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 4rem;
}

.p-ai-policy-toc__title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-disabled);
    margin-bottom: 1.25rem;
}

.p-ai-policy-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p-ai-policy-toc__item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border-default);
}

.p-ai-policy-toc__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.p-ai-policy-toc__num {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-ai-policy-accent);
    min-width: 1.75rem;
    font-variant-numeric: tabular-nums;
}

.p-ai-policy-toc__link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1.5;
}

.p-ai-policy-toc__link:hover {
    color: var(--color-ai-policy-accent);
    text-decoration: none;
}

/* --- セクション共通 --- */
.p-ai-policy-section {
    margin-bottom: 5rem;
}

.p-ai-policy-section__header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-border-default);
}

.p-ai-policy-section__num {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-ai-policy-accent);
    white-space: nowrap;
}

.p-ai-policy-section__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
}

@media (min-width: 768px) {
    .p-ai-policy-section__title {
        font-size: 1.5rem;
    }
}

/* --- 強調ボックス（コールアウト） --- */
.c-ai-policy-callout {
    border-left: 3px solid var(--color-ai-policy-accent);
    padding: 1.25rem 1.5rem;
    background-color: var(--color-ai-policy-accent-light);
    border-radius: 0 0.5rem 0.5rem 0;
    margin-bottom: 2rem;
}

.c-ai-policy-callout__quote {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.c-ai-policy-callout__body {
    color: var(--color-text-secondary);
    line-height: 1.8;
    font-size: 0.9rem;
    margin: 0;
}

/* --- サブセクション --- */
.p-ai-policy-subsection {
    margin-bottom: 2.5rem;
}

.p-ai-policy-subsection__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-primary);
    padding-left: 0.875rem;
    border-left: 3px solid var(--color-ai-policy-accent);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* --- リスト --- */
.p-ai-policy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p-ai-policy-list li {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-border-default);
    color: var(--color-text-secondary);
    line-height: 1.75;
    font-size: 0.9rem;
    align-items: flex-start;
}

.p-ai-policy-list li:last-child {
    border-bottom: none;
}

.p-ai-policy-list li::before {
    content: '';
    width: 5px;
    height: 5px;
    min-width: 5px;
    background-color: var(--color-ai-policy-accent);
    border-radius: 50%;
    margin-top: 0.6rem;
    flex-shrink: 0;
}

/* --- タグバッジ --- */
.p-ai-policy-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.75rem;
}

.c-ai-policy-tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    border: 1px solid var(--color-ai-policy-accent-border);
    color: var(--color-ai-policy-accent);
    background-color: var(--color-ai-policy-accent-light);
    letter-spacing: 0.02em;
}

/* AI活用方針ページの本文は、プライバシーポリシー等の法務ページと同じ15px */
.p-ai-policy-hero p.text-base,
.p-ai-policy-section p,
.p-ai-policy-section li,
.c-ai-policy-callout__body {
    font-size: 15px;
}

/* --- フッターノート --- */
.p-ai-policy-footer-note {
    border-top: 1px solid var(--color-border-default);
    padding-top: 2rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
    color: var(--color-text-disabled);
    font-size: 0.8125rem;
    line-height: 1.8;
}