/* 既存記事プレビューのスタイルを新規記事で共用 */
html { scroll-behavior: smooth; }
        @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
            line-height: 1.8;
            color: #333;
        }
        .container {
            max-width: 1180px;
            margin: 0 auto;
            padding: 2em 1.5em;
        }
        .article-header-image {
            margin: 0 0 24px;
        }
        .article-header-image img {
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
        }
        .article-header-image.article-lp-width {
            max-width: 860px;
            margin-left: auto;
            margin-right: auto;
        }
        .article-grid {
            display: grid;
            grid-template-columns: minmax(0, 800px) 300px;
            gap: 32px;
            align-items: start;
        }
        .article-grid-no-sidebar {
            display: block;
            max-width: 800px;
            margin: 0 auto;
        }
        .article-grid-no-sidebar.article-lp-width {
            max-width: 860px;
        }
        .article-main {
            min-width: 0;
        }
        .article-sidebar {
            border-left: 1px solid #e5e5e5;
            padding-left: 22px;
            color: #555;
            font-size: 0.92em;
        }
        .article-sidebar h2 {
            margin: 0 0 12px;
            padding: 0 0 8px;
            border-bottom: 1px solid #ddd;
            background: none;
            color: #333;
            font-size: 1em;
        }
        .article-sidebar ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .article-sidebar li {
            margin: 0;
            border-bottom: 1px solid #eee;
        }
        .article-sidebar a {
            display: block;
            padding: 10px 0;
            color: #333;
            text-decoration: none;
        }
        .article-sidebar a:hover {
            color: #0066cc;
        }
        h1 { font-size: 1.8em; margin-bottom: 0.3em; }
        .subtitle { font-size: 1.1em; color: #666; margin-bottom: 2em; }
        h2 { font-size: 1.4em; margin: 2em 0 0.8em; border-bottom: 2px solid #4a7c59; padding-bottom: 0.3em; }
        h3 { font-size: 1.1em; margin: 1.5em 0 0.5em; background: #f6f6f6; padding: 9px 14px; font-weight: 700; border-radius: 4px; }
        .article-main h3 { margin-top: 2em; }
        p { margin-bottom: 1em; }
        img { max-width: 100%; height: auto; margin: 1em 0; }
        ul, ol { margin: 1em 0 1em 1.5em; }
        li { margin-bottom: 0.5em; }
        a { color: #0066cc; }
        .article-end-cta {
            clear: both;
            margin: 4em 0 0;
            padding: 26px 0 0;
            border-top: 1px solid rgba(128, 128, 128, 0.38);
        }
        .article-end-cta-label {
            display: inline-flex;
            align-items: center;
            margin: 0 0 22px;
            padding: 4px 12px;
            border: 1px solid rgba(74, 124, 89, 0.42);
            border-radius: 999px;
            background: rgba(74, 124, 89, 0.1);
            color: #4a7c59;
            font-size: 0.82em;
            font-weight: 700;
            line-height: 1.4;
        }
        .article-cta-block {
            margin: 0 0 22px;
            padding: 18px 20px;
            border: 2px solid rgba(74, 124, 89, 0.3);
            border-radius: 6px;
            background: rgba(74, 124, 89, 0.045);
            box-shadow: 0 14px 30px rgba(31, 45, 35, 0.22), 0 3px 8px rgba(31, 45, 35, 0.14);
        }
        .article-cta-block:last-child {
            margin-bottom: 0;
        }
        .article-cta-title {
            display: block;
            margin: 0 0 16px;
            padding: 9px 14px;
            border: 1px solid #3f704d;
            color: #fff;
            background: #4a7c59;
            border-radius: 4px;
            font-size: 1.1em;
            font-weight: 700;
            line-height: 1.45;
        }
        .article-cta-block--kintaro .article-cta-title, .article-main .overview-button[data-shine] { position: relative; overflow: hidden; }
        .article-cta-block--kintaro .article-cta-title::after, .article-main .overview-button[data-shine]::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
            transform: translateX(-120%);
        }
        .article-cta-block--kintaro .article-cta-title.is-shining::after, .article-main .overview-button.is-shining::after { animation: kintaro-heading-shine 1.25s ease-out both; }
        @keyframes kintaro-heading-shine { to { transform: translateX(120%); } }
        @media (prefers-reduced-motion: reduce) { .article-cta-block--kintaro .article-cta-title.is-shining::after, .article-main .overview-button.is-shining::after { animation: none; } }
        .article-cta-title:not(:first-child) {
            margin-top: 1.4em;
        }
        .article-cta-block.article-cta-block-AdobeCC-Amazon .article-cta-title {
            background: #3d6549;
        }
        .article-cta-block.article-cta-block-PatternSwatch-LP {
            border-color: rgba(95, 99, 104, 0.5);
            background: rgba(95, 99, 104, 0.055);
            box-shadow: 0 14px 30px rgba(44, 47, 50, 0.22), 0 3px 8px rgba(44, 47, 50, 0.14);
        }
        .article-cta-block.article-cta-block-PatternSwatch-LP .article-cta-title {
            border-color: #4f5357;
            background: #4f4e2f;
        }
        .article-cta-block a {
            color: #005ea8 !important;
            font-weight: 500 !important;
            text-decoration: underline !important;
            text-decoration-thickness: 1px !important;
            text-underline-offset: 0.16em !important;
        }
        .article-cta-block a:hover,
        .article-cta-block a:focus {
            color: #004b87 !important;
            text-decoration-thickness: 1.5px !important;
        }
        .article-cta-block img {
            max-width: 100%;
            height: auto;
        }
        .article-cta-block--kintaro { position: relative; cursor: pointer; }
        .article-cta-block--kintaro a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
        .article-cta-block--kintaro:focus-within { outline: 3px solid #005ea8; outline-offset: 3px; }
        .article-cta-block--kintaro p { padding-right: 145px; }
        .article-cta-block--kintaro .kintaro-cta-illustration { position: absolute; right: 12px; bottom: 0; width: 130px; height: auto; margin: 0; pointer-events: none; transform: scaleX(-1); }
        @media (max-width: 600px) {
            .article-cta-block--kintaro p { padding-right: 100px; }
            .article-cta-block--kintaro .kintaro-cta-illustration { width: 95px; right: 6px; }
        }
        .article-tags {
            clear: both;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 2.4em 0 0;
        }
        .article-tag {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 5px 14px;
            border: 1px solid #d8dde2;
            border-radius: 8px;
            background: #fff;
            color: #22303a;
            font-size: 0.9em;
            font-weight: 600;
            line-height: 1.35;
            text-decoration: none;
        }
        .article-tag:hover,
        .article-tag:focus {
            border-color: #9aa7b1;
            color: #0066cc;
            text-decoration: none;
        }
        .article-prev-next-nav {
            clear: both;
            margin: 2.2em 0 0;
            padding: 1em 0 0;
            border-top: 1px solid #e5e5e5;
        }
        .article-prev-next-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 24px;
        }
        .article-prev-next-link,
        .article-prev-next-spacer {
            display: flex;
            align-items: flex-start;
            min-height: 0;
            padding: 6px 0;
            color: #333;
            text-decoration: none;
        }
        .article-prev-next-link-prev {
            justify-content: flex-start;
            text-align: left;
        }
        .article-prev-next-link-next {
            justify-content: flex-end;
            text-align: right;
        }
        .article-prev-next-body {
            min-width: 0;
        }
        .article-prev-next-label {
            display: block;
            margin: 0 0 2px;
            color: #777;
            font-size: 0.76em;
            font-weight: 400;
            line-height: 1.4;
        }
        .article-prev-next-title {
            display: block;
            color: #333;
            font-size: 0.92em;
            font-weight: 600;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }
        .article-prev-next-arrow {
            flex: 0 0 auto;
            color: #888;
            font-size: 1.35em;
            line-height: 1.3;
        }
        .article-prev-next-link-prev .article-prev-next-arrow {
            margin-right: 8px;
        }
        .article-prev-next-link-next .article-prev-next-arrow {
            margin-left: 8px;
        }
        .article-prev-next-link:hover .article-prev-next-title,
        .article-prev-next-link:focus .article-prev-next-title {
            color: #0066cc;
        }
        .article-main .speech-wrap {
            clear: both;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin: 0 0 32px;
        }
        .article-main .speech-person {
            flex: 0 0 82px;
            text-align: center;
        }
        .article-main .speech-icon {
            margin: 0;
        }
        .article-main .speech-icon-image {
            display: block;
            width: 72px !important;
            height: 72px !important;
            margin: 0 auto !important;
            border: 2px solid #d0d0d0;
            border-radius: 50%;
            background: #fff;
            object-fit: cover;
        }
        .article-main .speech-icon-image.kintaro-icon { object-position: right center; }
        .article-main .speech-icon-image.kurumi-icon { object-position: left center; transform: scaleX(-1); }
        .article-main .speech-name {
            margin-top: 6px;
            font-size: 13px;
            line-height: 1.4;
        }
        .article-main .speech-balloon {
            position: relative;
            flex: 1 1 auto;
            max-width: calc(100% - 102px);
            min-height: 56px;
            margin: 0;
            padding: 10px 14px;
            border: 2px solid #d0d0d0;
            border-radius: 6px;
            background: #fff;
        }
        .article-main .speech-balloon::before,
        .article-main .speech-balloon::after {
            content: "";
            position: absolute;
            top: 22px;
            width: 0;
            height: 0;
            border-style: solid;
        }
        .article-main .speech-balloon::before {
            left: -14px;
            border-width: 8px 14px 8px 0;
            border-color: transparent #d0d0d0 transparent transparent;
        }
        .article-main .speech-balloon::after {
            left: -10px;
            border-width: 7px 12px 7px 0;
            border-color: transparent #fff transparent transparent;
        }
        .article-main .speech-wrap.sbp-r {
            flex-direction: row-reverse;
        }
        .article-main .speech-wrap.sbp-r .speech-balloon::before {
            left: auto;
            right: -14px;
            border-width: 8px 0 8px 14px;
            border-color: transparent transparent transparent #d0d0d0;
        }
        .article-main .speech-wrap.sbp-r .speech-balloon::after {
            left: auto;
            right: -10px;
            border-width: 7px 0 7px 12px;
            border-color: transparent transparent transparent #fff;
        }
        .article-main .speech-balloon p {
            margin: 0;
        }
        @media (max-width: 900px) {
            .article-grid {
                display: block;
            }
            .article-sidebar {
                border-left: 0;
                border-top: 1px solid #e5e5e5;
                margin-top: 36px;
                padding: 22px 0 0;
            }
        }
        @media (max-width: 600px) {
            .container { padding: 1em; }
            h1 { font-size: 1.4em; }
            .article-prev-next-grid { grid-template-columns: 1fr; }
            .article-prev-next-link,
            .article-prev-next-spacer { padding: 10px 0; }
            .article-prev-next-link-prev { border-bottom: 1px solid #eee; }
            .article-main .speech-wrap { gap: 12px; }
            .article-main .speech-person { flex-basis: 66px; }
            .article-main .speech-icon-image { width: 58px !important; height: 58px !important; }
            .article-main .speech-icon-image.kintaro-icon { object-position: right center; }
        .article-main .speech-icon-image.kurumi-icon { object-position: left center; transform: scaleX(-1); }
        .article-main .speech-name { margin-top: 5px; font-size: 11px; }
            .article-main .speech-balloon { max-width: calc(100% - 78px); padding: 9px 12px; }
        }
        .article-main table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .94em; }
        .article-main th, .article-main td { border: 1px solid #d7e1da; padding: .65em .75em; text-align: left; }
        .article-main th { background: #edf4ee; }
        .article-main .nouki-table th[scope="row"] { background: #f4f8f5; font-weight: bold; word-break: keep-all; }
        .article-main .nouki-table th.table-group { background: #dce9df; text-align: left; }
        .article-main .nouki-table small { font-size: .82em; color: #5c655f; font-weight: normal; }
        .article-main .nouki-table.mark-table th[scope="col"], .article-main .nouki-table.mark-table td { text-align: center; }
        .article-main .nouki-table.mark-table td.stop { color: #c62828; font-weight: bold; }
        .article-main .nouki-table.step-table th:first-child { white-space: nowrap; text-align: center; }
        @media(max-width:600px) { .article-main .nouki-table { font-size: .86em; } .article-main .nouki-table th, .article-main .nouki-table td { padding: .5em .45em; } }
        @media(max-width:600px) { .article-main .nouki-table.mark-table th[scope="col"], .article-main .nouki-table.mark-table td { padding-left: .15em; padding-right: .15em; white-space: nowrap; } }
        .article-main .kintaro-section-banner { margin: 1.8em 0 0; }
        .article-main .kintaro-section-banner a { display: block; border-radius: 8px; transition: transform .15s ease, box-shadow .15s ease; }
        .article-main .kintaro-section-banner a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(36, 80, 50, .28); }
        .article-main .kintaro-section-banner a:focus-visible { outline: 3px solid #005ea8; outline-offset: 3px; }
        .article-main .kintaro-section-banner img { display: block; width: 100%; height: auto; margin: 0; border-radius: 8px; box-shadow: 0 2px 8px rgba(36, 80, 50, .22); }
        @media (prefers-reduced-motion: reduce) { .article-main .kintaro-section-banner a { transition: none; } .article-main .kintaro-section-banner a:hover { transform: none; } }
        .article-main .article-note { color: #666; text-align: right; }
        .article-main .map-link, .article-main .external-link { font-size: .85em; text-align: right; }
        .article-main .overview { display: flex; gap: 24px; align-items: center; margin: 1.6em 0 2em; }
        .article-main .overview img { width: 45%; margin: 0; border-radius: 5px; }
        .article-main .overview-body { flex: 1; }
        @media(max-width: 600px) { .article-main .overview { display: block; } .article-main .overview img { width: 100%; margin-bottom: 1em; } }
        .article-main .article-hero { display: block; width: 100%; height: auto; border-radius: 5px; margin: 1.2em 0 1.6em; }
        .breadcrumbs-kintaro { margin: -16px 0 28px; font-size: .85em; color: #666; }
        .related-kintaro { margin: 70px 0 110px; padding: 0; }
        .related-kintaro details { border: 0; }
        .related-kintaro summary { display: block; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; color: #333; }
        .related-kintaro summary::-webkit-details-marker { display: none; }
        .related-kintaro summary::before { content: "▶ "; }
        .related-kintaro details[open] summary::before { content: "▼ "; }
        .related-kintaro ul { list-style: none; margin: 0; padding: 0; line-height: 1.7; }
        .related-kintaro li { display: inline; margin: 0; padding: 0 4px 0 6px; border-left: 1px solid #999; }
        .related-kintaro a { color: #484848; font-size: 12px; text-decoration: none; }
        .related-kintaro a:hover { text-decoration: underline; }
        .site-footer-bottom { margin: 0 -50px -50px; padding: 10px 10px 14px; border-top: 2px solid #363636; background: #f8f8f8; color: #8c8c8c; text-align: center; font-size: 12px; line-height: 1.5; }
        .site-footer-bottom .back-top { text-align: right; font-size: 11px; }
        .site-footer-bottom p { margin: 12px 0 0; }
        .site-footer-bottom a { color: #00e; text-decoration: none; }
        @media(max-width:600px) { .related-kintaro { margin: 45px 0 65px; } .site-footer-bottom { margin: 0 -20px -35px; } }
        body { background: #f1f1f1; }
        .container { max-width: 900px; padding: 0; background: #fff; box-shadow: 0 0 14px rgba(0,0,0,.08); min-height: 100vh; }
        .article-grid-no-sidebar.article-lp-width { max-width: none; }
        .legacy-site-body { padding: 0 50px 50px; }
        .site-brand-kintaro { padding: 22px 0 14px; color: #3f704d; font-weight: 700; }
        .site-brand-kintaro { display: flex; align-items: center; gap: 8px; } .site-brand-kintaro img { width: 26px; height: 26px; margin: 0; border-radius: 50%; object-fit: cover; }
        .article-main h1 { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 300px; margin: 0 -50px 32px; padding: 30px 48px; color: #254b31; position: relative; overflow: hidden; background: #f8f3d8; font-size: 1.8em; line-height: 1.5; }
        .article-main h1 .header-art { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-width: none; object-fit: fill; }
        .article-main h1 span { position: relative; z-index: 1; display: block; width: 60%; padding: 8px; background: rgba(255,255,255,.82); border-radius: 6px; font-size: .82em; }
        .article-main h2 { border: 0; border-left: 6px solid #4a7c59; border-radius: 4px 12px 12px 4px; background: #edf5ee; padding: 14px 20px; color: #315b3b; font-size: 1.25em; }
        @media(max-width: 600px) { .container { padding: 0; } .legacy-site-body { padding: 0 20px 35px; } .article-main h1 { margin: 0 -20px 24px; padding: 24px; min-height: 145px; font-size: 1.1em; } }

/* 商品概要のバナー全体をリンクにし、既存の横並び幅を保つ */
.article-main .overview .overview-banner { flex: 0 0 45%; }
.article-main .overview .overview-banner img { display: block; width: 100%; height: auto; }
@media(max-width:600px) { .article-main .overview .overview-banner { display: block; } .article-main .overview .overview-banner img { margin-bottom: 1em; } }

/* 商品概要の注意書きとボタンの文字が1文字だけ次の行へ落ちないようにする */
.kintaro-site .article-main .overview .article-note { text-wrap: balance; }
@media(max-width:400px) { .kintaro-site .article-main .overview .overview-button { padding-left: 10px; padding-right: 10px; text-wrap: balance; } }

/* 概要の注意書きはボタンの右下に置く */
.kintaro-site .article-main .overview .overview-button + .article-note { margin: .7em 0 0; }

/* Dark Readerでは白い光が暗い帯に変わるので、後ろを明るくして光らせる */
html[data-darkreader-mode] .article-cta-block--kintaro .article-cta-title::after,
html[data-darkreader-mode] .article-main .overview-button[data-shine]::after {
    background: none !important;
    -webkit-backdrop-filter: brightness(1.8);
    backdrop-filter: brightness(1.8);
    -webkit-mask-image: linear-gradient(110deg, transparent 35%, #000 50%, transparent 65%);
    mask-image: linear-gradient(110deg, transparent 35%, #000 50%, transparent 65%);
}