:root{--bg-primary:#FFFFFF;--bg-secondary:#F7F8FA;--bg-card:#FFFFFF;--text-primary:#1F2933;--text-secondary:#475569;--accent:#1F2F46;--accent-hover:#162234;--accent-light:#E8EDF4;--accent-gold:#B7791F;--accent-gold-hover:#8F5E16;--success:#2F7D5C;--success-bg:#F0F7F3;--warning:#B7791F;--warning-bg:#FBF7EF;--danger:#A83131;--danger-bg:#FAF0F0;--border:#D9DEE7;--shadow:0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 2px 4px rgba(0,0,0,0.05);--shadow-lg:0 4px 12px rgba(0,0,0,0.06);--max-width:1200px;--sidebar-width:300px;--gap:32px;--radius-sm:4px;--radius:6px;--radius-lg:8px;--radius-full:999px;--font-family:'Lexend','Lexend Fallback','Noto Sans JP','Noto Sans JP Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-family-body:'Noto Sans JP','Noto Sans JP Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-base:16px;--line-height:1.8;--navy:#1F2F46;--transition:0.2s ease-out}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}a,button,input,select,textarea{touch-action:manipulation}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html{font-size:var(--font-size-base);scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-family-body);line-height:var(--line-height);color:var(--text-primary);background-color:var(--bg-primary);transition:background-color var(--transition),color var(--transition);min-height:100vh;display:flex;flex-direction:column}::selection{background:var(--accent-light,#DBEAFE);color:var(--accent)}body a{color:var(--accent);text-decoration:none;transition:color var(--transition)}a:hover{color:var(--accent-hover);text-decoration:underline}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{font-family:var(--font-family);font-weight:700;line-height:1.4;color:var(--text-primary)}h1{font-size:1.875rem;margin-bottom:1rem}h2{font-size:1.5rem;margin-bottom:0.75rem;letter-spacing:0.01em}h3{font-size:1.25rem;margin-bottom:0.5rem}h4{font-size:1.125rem;margin-bottom:0.5rem}p{margin-bottom:1rem;color:var(--text-secondary)}.amount{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:700}.amount--positive,.amount--negative,.amount--tax{color:var(--danger)}.site-header{background-color:var(--bg-card);border-bottom:1px solid var(--border);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}.site-header__inner{max-width:var(--max-width);margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;height:60px}.site-header__logo{font-family:var(--font-family);font-size:1.25rem;font-weight:700;color:var(--accent);text-decoration:none;display:flex;align-items:baseline;gap:0.5rem}.site-header__logo:hover{text-decoration:none}.site-header__logo-sub{font-size:0.75rem;font-weight:400;color:var(--text-secondary);letter-spacing:0.02em}.site-header__nav{display:flex;align-items:center;gap:1.5rem}.site-header__nav a{color:var(--text-secondary);font-size:0.875rem;font-weight:500;transition:color var(--transition)}.site-header__nav a:hover{color:var(--accent);text-decoration:none}.site-header__nav a.is-active{color:var(--accent);font-weight:700}.breadcrumb{max-width:var(--max-width);margin:0 auto;padding:0.75rem 1rem;font-size:0.8125rem;color:var(--text-secondary)}.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:0.25rem}.breadcrumb li::after{content:'>';margin-left:0.25rem;color:var(--text-secondary)}.breadcrumb li:last-child::after{content:''}.breadcrumb a{color:var(--text-secondary);font-size:0.8125rem}.breadcrumb a:hover{color:var(--accent)}.page-wrapper{max-width:var(--max-width);margin:0 auto;padding:1.5rem 1rem;display:grid;grid-template-columns:1fr var(--sidebar-width);gap:var(--gap);flex:1}.main-content{min-width:0}.sidebar{display:flex;flex-direction:column;gap:1.5rem}@media (max-width:1024px) and (min-width:769px){.page-wrapper{--sidebar-width:220px;gap:1.5rem}}.sidebar__sticky{position:sticky;top:80px}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-size:0.875rem;font-weight:500;color:var(--text-primary);margin-bottom:0.375rem}.form-group .form-hint{display:block;font-size:0.75rem;color:var(--text-secondary);margin-bottom:0.25rem}.form-control{width:100%;padding:0.625rem 0.875rem;font-size:1rem;font-family:var(--font-family);color:var(--text-primary);background-color:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--transition),box-shadow var(--transition);appearance:none;-webkit-appearance:none}.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.form-control::placeholder{color:var(--text-secondary);opacity:0.6}select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;padding-right:2.5rem}.form-check{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}.form-check input[type="checkbox"],.form-check input[type="radio"]{width:1.125rem;height:1.125rem;accent-color:var(--accent)}.form-row{display:flex;gap:1rem}.form-row .form-group{flex:1}.input-with-suffix{position:relative}.input-with-suffix .form-control{padding-right:2.5rem}.input-with-suffix .suffix{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);color:var(--text-secondary);font-size:0.875rem;pointer-events:none}.result-card{background-color:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:1.5rem;margin-bottom:1.5rem;border:1px solid var(--border)}.result-card__title{font-size:1rem;font-weight:500;color:var(--text-secondary);margin-bottom:0.5rem}.result-card__amount{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:700;line-height:1.2}.result-card--highlight{border-left:4px solid var(--accent)}.result-card--danger{border-left:4px solid var(--danger)}.result-section{opacity:0;transform:translateY(12px);transition:opacity 0.4s ease,transform 0.4s ease}.result-section.is-visible{opacity:1;transform:translateY(0)}.breakdown-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-bottom:1.5rem}.breakdown-table th,.breakdown-table td{padding:0.75rem 1rem;border-bottom:1px solid var(--border);text-align:left;font-size:0.9375rem}.breakdown-table th{font-weight:500;color:var(--text-secondary);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.025em}.breakdown-table td:last-child{text-align:right;font-weight:500}.breakdown-table tbody tr:nth-child(even){background-color:var(--bg-secondary)}.breakdown-table tbody tr:hover{background-color:var(--accent-light)}.breakdown-table tfoot td{font-weight:700;border-top:2px solid var(--border);font-size:1rem}.chart-area{max-width:600px;margin:0 auto 1.5rem;padding:1rem;background-color:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.chart-area canvas{width:100% !important;height:auto !important}.result-chart{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin:1.5rem 0}.result-chart__title{font-size:0.875rem;font-weight:700;color:var(--text-primary);margin-bottom:0.75rem}.result-chart canvas{max-height:280px}.ad-slot{display:flex;align-items:center;justify-content:center;background-color:var(--bg-secondary);border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-secondary);font-size:0.75rem;min-height:90px;margin-bottom:1.5rem;text-align:center}.ad-slot--leaderboard{min-height:90px}.ad-slot--rectangle{min-height:250px;max-width:100%}.ad-slot--sidebar{min-height:250px;width:100%;position:sticky;top:80px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem 1.5rem;font-size:0.9375rem;font-weight:500;font-family:var(--font-family);border:none;border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition),box-shadow var(--transition),transform var(--transition);line-height:1.4;min-height:44px}.btn--primary{background-color:var(--accent);color:var(--bg-primary)}.btn--primary:hover{background-color:var(--accent-hover);box-shadow:var(--shadow-md)}.btn:active,.btn--primary:active,.btn--cta:active{transform:scale(0.97)}.btn--outline{background-color:transparent;color:var(--accent);border:1px solid var(--accent)}.btn--outline:hover{background-color:var(--accent-light)}.btn--sm{padding:0.375rem 0.75rem;font-size:0.8125rem}.btn--line{background-color:#06C755;color:var(--bg-primary)}.btn--line:hover{background-color:#05b04c}.btn--copy{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border)}.btn--copy:hover{background-color:var(--border)}.btn--danger{background-color:var(--danger);color:var(--bg-primary)}.btn--danger:hover{background-color:#B91C1C}.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background-color:var(--text-primary);color:var(--bg-primary);padding:0.75rem 1.5rem;border-radius:var(--radius);font-size:0.875rem;z-index:9999;opacity:0;transition:opacity 0.3s ease,transform 0.3s ease;pointer-events:none}.toast.is-active{opacity:1;transform:translateX(-50%) translateY(0)}.faq-section{margin-bottom:2rem}.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:0.75rem;overflow:hidden}.faq-item summary{padding:1rem 1.25rem;font-weight:700;font-size:0.9375rem;cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.5rem;background:var(--bg-primary);transition:background var(--transition)}.faq-item summary:hover{background:var(--bg-secondary)}.faq-item summary::before{content:'Q.';color:var(--accent);font-weight:700;flex-shrink:0}.faq-item summary::after{content:'';margin-left:auto;width:0.5rem;height:0.5rem;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(-45deg);transition:transform var(--transition);flex-shrink:0}.faq-item[open] summary::after{transform:rotate(45deg)}.faq-item .faq-answer{padding:0 1.25rem 1rem;font-size:0.9375rem;line-height:1.7;color:var(--text-secondary)}.disclaimer{background-color:var(--bg-secondary);border-radius:var(--radius);padding:1.25rem;font-size:0.8125rem;color:var(--text-secondary);line-height:1.7;margin-bottom:1.5rem}.disclaimer strong{color:var(--text-primary)}.disclaimer ul{margin-top:0.5rem;padding-left:1.25rem}.disclaimer li{margin-bottom:0.25rem}.site-footer{background-color:#0F172A;color:#CBD5E1;padding:0;margin-top:auto}.site-footer__disclaimer-bar{background-color:#1E293B;border-bottom:1px solid #334155;padding:1rem}.site-footer__disclaimer-inner{max-width:var(--max-width);margin:0 auto}.site-footer__disclaimer{font-size:0.8rem;color:#CBD5E1;line-height:1.8;margin:0;padding:0.75rem 1rem;border:1px solid #475569;border-radius:var(--radius-sm);background-color:rgba(255,255,255,0.03)}.site-footer__inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:2rem 1.5rem;padding:2.5rem 1rem 1.5rem}.site-footer__brand{display:flex;flex-direction:column;gap:0.75rem;grid-column:1 / -1}.site-footer__logo{font-family:var(--font-family);font-size:1.25rem;font-weight:700;color:var(--bg-primary)}.site-footer__logo-gold{color:var(--accent-gold)}.site-footer__tagline{font-size:0.875rem;color:#94A3B8;line-height:1.6}.footer-category{border-bottom:1px solid #1E293B;padding-bottom:0.5rem}.footer-category summary{list-style:none;cursor:default}.footer-category summary::-webkit-details-marker{display:none}.footer-category summary::after{display:none}.site-footer__heading{font-family:var(--font-family);font-size:0.8125rem;font-weight:700;color:var(--bg-primary);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.75rem;display:flex;align-items:center;justify-content:space-between}.site-footer__links{display:flex;flex-direction:column;gap:0;list-style:none;padding:0;margin:0}.site-footer__links li{padding:4px 0;line-height:1.8}.site-footer__links a{color:#93C5FD;font-size:0.875rem;transition:color var(--transition)}.site-footer__links a:hover{color:var(--bg-primary);text-decoration:underline}.footer-category__more a{color:#93C5FD;font-weight:600;font-size:0.8125rem}.site-footer__bottom{max-width:var(--max-width);margin:0 auto;padding:1.5rem 1rem;border-top:1px solid #1E293B}.site-footer__copy{font-size:0.75rem;color:#7A899E;text-align:center}.related-tools{background-color:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);padding:1.25rem}.related-tools__title{font-size:0.875rem;font-weight:700;margin-bottom:0.75rem;color:var(--text-primary)}.related-tools__list{list-style:none}.related-tools__list li{margin-bottom:0.5rem}.related-tools__list a{display:block;padding:0.5rem 0.75rem;border-radius:var(--radius-sm);color:var(--text-primary);font-size:0.875rem;transition:background-color var(--transition)}.related-tools__list a:hover{background-color:var(--bg-secondary);text-decoration:none}.article-section{margin-bottom:2rem;line-height:var(--line-height)}.article-section h2{border-bottom:2px solid var(--accent);padding-bottom:0.5rem;margin-bottom:1rem}.article-section h3{margin-top:1.5rem;margin-bottom:0.75rem}.article-section ul,.article-section ol{padding-left:1.5rem;margin-bottom:1rem}.article-section li{margin-bottom:0.5rem;color:var(--text-secondary)}.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text-primary);min-width:44px;min-height:44px;align-items:center;justify-content:center}.hamburger svg{display:block}.mobile-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:98;opacity:0;transition:opacity 0.3s ease}.mobile-menu-overlay.is-visible{display:block;opacity:1}body.menu-open{overflow:hidden;position:fixed;width:100%;top:0;left:0}.container{max-width:100% !important;padding:0 !important}.page-wrapper{grid-template-columns:1fr;display:block}.breakdown-table{break-inside:avoid}table{border-collapse:collapse}.amount--positive,.amount--negative,.amount--tax{color:#DC2626}}.container{max-width:var(--max-width);margin:0 auto;padding:0 1rem}.hero{background:radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(135deg,#0F172A 0%,#1E3A8A 100%);background-size:20px 20px,100% 100%;color:var(--bg-primary);padding:3.5rem 1rem 4rem;text-align:center;position:relative}.hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:48px;background:var(--bg-primary);clip-path:ellipse(55% 100% at 50% 100%)}.hero-title{font-size:2.5rem;font-weight:800;color:var(--bg-primary);margin-bottom:0.75rem}.hero-catch{font-size:1.25rem;font-weight:500;color:rgba(255,255,255,0.9);margin-bottom:0.5rem}.hero-desc{font-size:0.9375rem;color:rgba(255,255,255,0.8);max-width:720px;margin:0 auto;line-height:var(--line-height)}.hero-catch__accent{color:#EAB308;font-weight:700}.hero-cta{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}.hero-cta .btn--cta{padding:0.75rem 2rem;font-size:1.0625rem;border-radius:var(--radius-lg)}.hero-cta .btn--outline-white{padding:0.75rem 2rem;font-size:1.0625rem;border-radius:var(--radius-lg);background:transparent;color:var(--bg-primary);border:2px solid rgba(255,255,255,0.5);cursor:pointer;font-family:var(--font-family);font-weight:500;transition:background-color var(--transition),border-color var(--transition)}.hero-cta .btn--outline-white:hover{background:rgba(255,255,255,0.1);border-color:var(--bg-primary)}.hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;margin:1.25rem 0}.hero-trust__badge{display:inline-flex;align-items:center;gap:0.25rem;background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);color:var(--bg-primary);font-size:0.8125rem;font-weight:500;padding:0.375rem 0.75rem;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,0.2)}.tools-section{padding:3rem 0}.tool-category{margin-bottom:2.5rem}.category-title{font-size:1.375rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;letter-spacing:0.02em}.category-icon{font-size:1.25rem;color:var(--accent-gold)}.category-icon svg{stroke:var(--accent-gold)}.category-desc{color:var(--text-secondary);font-size:0.9375rem;margin-bottom:1rem}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.tool-card{display:block;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;text-decoration:none;transition:box-shadow var(--transition),transform var(--transition);position:relative;box-shadow:var(--shadow)}.tool-card--featured{border-color:var(--accent-gold);background:linear-gradient(135deg,rgba(202,138,4,0.03) 0%,rgba(202,138,4,0) 100%)}.tool-card-badge{display:inline-block;background:linear-gradient(135deg,var(--accent-gold) 0%,#D97706 100%);color:#422006;font-size:0.75rem;font-weight:700;padding:0.25rem 0.625rem;border-radius:var(--radius-full);margin-bottom:0.5rem;letter-spacing:0.02em}.tool-card-badge--popular{background:linear-gradient(135deg,#3B82F6,#1D4ED8);color:var(--bg-primary)}.tool-card-icon{width:48px;height:48px;border-radius:50%;background-color:var(--accent-light);display:flex;align-items:center;justify-content:center;margin-bottom:0.75rem;color:var(--accent);transition:background-color var(--transition)}.tool-card-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:0.375rem}.tool-card-desc{font-size:0.8125rem;color:var(--text-secondary);margin-bottom:0;line-height:1.6}.tool-category:nth-child(1) .tool-card{border-top:3px solid var(--accent)}.tool-category:nth-child(2) .tool-card{border-top:3px solid var(--accent-gold)}.tool-category:nth-child(3) .tool-card{border-top:3px solid var(--success)}.tool-category:nth-child(4) .tool-card{border-top:3px solid #6366F1}.about-section{background-color:var(--bg-secondary);padding:3rem 1rem;content-visibility:auto;contain-intrinsic-size:auto 500px}.about-section h2{font-size:1.375rem;margin-bottom:1rem;border-bottom:2px solid var(--accent);padding-bottom:0.5rem}.about-section h3{font-size:1.125rem;margin-top:1.5rem;margin-bottom:0.5rem}.about-content p{color:var(--text-secondary);line-height:var(--line-height);margin-bottom:1rem}.about-content ul{padding-left:1.5rem;margin-bottom:1rem}.about-content li{color:var(--text-secondary);margin-bottom:0.5rem}.toc-card{border-left:4px solid var(--accent)}.toc-card__title{font-size:1.1rem;margin-bottom:0.75rem}.toc-card__list{padding-left:1.25rem;line-height:2.2;font-size:0.9375rem}.toc-card__list a{color:var(--text-primary);text-decoration:none;border-bottom:1px dashed var(--border);transition:color var(--transition)}.toc-card__list a:hover{color:var(--accent);border-bottom-color:var(--accent)}.text-right{text-align:right}.skip-link{position:absolute;top:-100%;left:1rem;background-color:var(--accent);color:var(--bg-primary);padding:0.5rem 1rem;border-radius:var(--radius);z-index:200;font-size:0.875rem}.skip-link:focus{top:0.5rem}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.tool-card,.btn,.faq-item summary,.related-tools__list a,.link-pill{cursor:pointer}.btn--cta{background-color:#F97316;color:var(--bg-primary);font-weight:700;box-shadow:0 2px 8px rgba(249,115,22,0.3)}.btn--cta:hover{background-color:#EA580C;color:var(--bg-primary);box-shadow:0 4px 12px rgba(249,115,22,0.4)}.affiliate-cta{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.5rem;margin:2rem 0}.affiliate-cta__title{font-size:1.125rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary)}.affiliate-cta__cards{display:flex;flex-wrap:wrap;gap:1rem}.affiliate-card{flex:1 1 250px;border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-decoration:none;color:var(--text-primary);background:var(--bg-card);transition:border-color var(--transition),box-shadow var(--transition);cursor:pointer}.affiliate-card__name{display:block;font-weight:700;font-size:1rem;margin-bottom:0.25rem}.affiliate-card__desc{display:block;font-size:0.875rem;color:var(--text-secondary);margin-bottom:0.75rem}.affiliate-card__btn{display:inline-block;background:var(--accent);color:var(--bg-primary);padding:0.375rem 1rem;border-radius:var(--radius-sm);font-size:0.8125rem;font-weight:600}.affiliate-cta__note{margin-top:1rem;font-size:0.75rem;color:var(--text-secondary)}.context-cta{margin:2rem 0}.context-cta__title{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.context-cta__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.context-cta__card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem}.context-cta__name{font-weight:700;font-size:1rem;color:var(--text-primary);margin-bottom:0.5rem}.context-cta__desc{font-size:0.8125rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1rem}.context-cta__btn{display:inline-block;padding:0.5rem 1.25rem;background:var(--accent);color:var(--bg-primary);border-radius:var(--radius);font-size:0.875rem;font-weight:700;text-decoration:none;transition:background var(--transition)}.context-cta__btn:hover{background:var(--accent-hover);color:var(--bg-primary)}.context-cta__note{font-size:0.75rem;color:var(--text-secondary);margin-top:0.75rem}.popular-carousel-wrapper{position:relative}.popular-tools-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:0.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.popular-tools-scroll::-webkit-scrollbar{display:none}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:opacity var(--transition),background var(--transition)}.carousel-arrow--left{left:-12px}.carousel-arrow--right{right:-12px}.carousel-arrow:hover{background:var(--accent-light)}.carousel-arrow:disabled{opacity:0.3;cursor:default;pointer-events:none}.scroll-hint{text-align:center;font-size:0.75rem;color:var(--text-secondary);margin-top:0.5rem;display:none}.next-step-card{background:linear-gradient(135deg,var(--accent-light) 0%,var(--bg-secondary) 100%);border:1px solid var(--border);border-radius:var(--radius-lg,12px);padding:1.25rem 1.5rem;margin:2rem 0;display:flex;align-items:center;gap:1rem}.next-step-card__icon{width:40px;height:40px;background:var(--accent);color:var(--bg-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.25rem}.next-step-card__body{flex:1}.next-step-card__title{font-weight:700;font-size:0.9375rem;margin-bottom:0.25rem;color:var(--text-primary)}.next-step-card__desc{font-size:0.8125rem;color:var(--text-secondary);margin-bottom:0.5rem}.next-step-card__link{display:inline-block;font-size:0.8125rem;font-weight:600;color:var(--accent);text-decoration:none}.next-step-card__link:hover{text-decoration:underline}.supervision-badge{display:inline-flex;align-items:center;gap:0.5rem;background:var(--success-bg);border:1px solid var(--success);border-radius:var(--radius);padding:0.5rem 1rem;font-size:0.8125rem;color:var(--text-primary);margin:1rem 0}.supervision-badge__icon{width:20px;height:20px;flex-shrink:0}.supervision-badge__text{line-height:1.4}.supervision-badge__role{font-weight:700;color:var(--success)}.last-updated{display:inline-flex;align-items:center;gap:0.375rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-full);padding:0.25rem 0.875rem;font-size:0.75rem;color:var(--text-secondary);margin:0.5rem 0;line-height:1.4}.expertise-badge{font-size:0.75rem;background:var(--accent);color:#fff;padding:2px 8px;border-radius:4px;display:inline-block;margin:0.5rem 0}.last-updated__icon{flex-shrink:0;opacity:0.7}.calc-basis{border:1px solid var(--border);border-radius:var(--radius);margin:0.75rem 0 1rem;font-size:0.8125rem;background:var(--bg-card)}.calc-basis__summary{display:flex;align-items:center;gap:0.375rem;padding:0.625rem 1rem;cursor:pointer;color:var(--text-secondary);font-weight:600;user-select:none;list-style:none}.calc-basis__summary::-webkit-details-marker{display:none}.calc-basis__summary::after{content:'';margin-left:auto;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-secondary);transition:transform var(--transition)}.calc-basis[open] .calc-basis__summary::after{transform:rotate(180deg)}.calc-basis__body{padding:0 1rem 0.75rem;border-top:1px solid var(--border)}.calc-basis__label{font-size:0.75rem;color:var(--text-secondary);margin:0.75rem 0 0.375rem}.calc-basis__list{margin:0;padding-left:1.25rem}.calc-basis__list li{color:var(--text-primary);font-size:0.8125rem;line-height:1.6;margin-bottom:0.125rem}.calc-basis__note{font-size:0.75rem;color:var(--text-secondary);margin:0.5rem 0 0;line-height:1.5}.back-to-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--bg-primary);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s;z-index:50}.back-to-top.visible{opacity:1;visibility:visible}.back-to-top:hover{background:var(--accent-hover)}.direct-answer{background:var(--bg-secondary);border-left:4px solid var(--accent);padding:1rem 1.25rem;margin:1rem 0 1.5rem;font-size:1rem;line-height:1.7;color:var(--text-primary);border-radius:0 var(--radius) var(--radius) 0}.direct-answer strong{color:var(--accent)}.share-buttons{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin:1.5rem 0}.share-buttons__label{font-size:0.875rem;font-weight:600;color:var(--text-secondary);margin-right:0.25rem}.share-btn{display:inline-flex;align-items:center;gap:0.375rem;padding:0.5rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--text-primary);font-size:0.8125rem;font-weight:600;cursor:pointer;transition:all var(--transition)}.share-btn:hover{border-color:var(--accent);background:var(--bg-secondary)}.share-btn--x:hover{color:#000}.share-btn--line:hover{color:#06C755}.share-btn--copy:hover{color:var(--accent)}.calc-advanced{border:1px solid var(--border);border-radius:var(--radius-lg);margin:1rem 0;background:var(--bg-card)}.calc-advanced__toggle{display:flex;align-items:center;gap:0.5rem;width:100%;padding:0.875rem 1.25rem;background:none;border:none;cursor:pointer;font-size:0.9375rem;font-weight:600;color:var(--accent);user-select:none}.calc-advanced__toggle::before{content:'';display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid var(--accent);transition:transform var(--transition)}.calc-advanced.is-open .calc-advanced__toggle::before{transform:rotate(90deg)}.calc-advanced__body{display:none;padding:0 1.25rem 1.25rem;border-top:1px solid var(--border)}.calc-advanced.is-open .calc-advanced__body{display:block}.calc-advanced__hint{font-size:0.75rem;color:var(--text-secondary);margin-left:auto}.calc-history{margin:1rem 0 1.5rem}.calc-history__title{font-size:0.875rem;font-weight:600;color:var(--text-secondary);margin-bottom:0.5rem;display:flex;align-items:center;gap:0.375rem}.calc-history__list{display:flex;gap:0.5rem;overflow-x:auto;padding-bottom:0.25rem;-webkit-overflow-scrolling:touch}.calc-history__item{flex-shrink:0;min-width:200px;max-width:280px;padding:0.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color var(--transition)}.calc-history__item:hover{border-color:var(--accent)}.calc-history__summary{font-size:0.875rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calc-history__time{font-size:0.75rem;color:var(--text-secondary);margin-top:0.25rem}.calc-history__restore{font-size:0.75rem;color:var(--accent);margin-top:0.375rem;font-weight:600}.next-tools{margin:2rem 0}.next-tools__title{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem}.next-tools__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0.75rem}.next-tools__card{display:flex;align-items:center;gap:0.75rem;padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:border-color var(--transition),box-shadow var(--transition);cursor:pointer}.next-tools__icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:var(--radius);color:var(--accent)}.next-tools__text{flex:1;min-width:0}.next-tools__name{font-weight:700;font-size:0.9375rem;color:var(--text-primary)}.next-tools__desc{font-size:0.8125rem;color:var(--text-secondary);margin-top:0.125rem}.next-tools__arrow{flex-shrink:0;color:var(--accent);font-size:1.25rem}.seasonal-tools{background:linear-gradient(135deg,rgba(30,58,138,0.05) 0%,rgba(202,138,4,0.05) 100%);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin:2rem 0}.seasonal-tools__header{display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem}.seasonal-tools__icon{font-size:1.25rem}.seasonal-tools__title{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin:0}.seasonal-tools__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.625rem}.seasonal-tools__item{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text-primary);font-weight:600;font-size:0.875rem;transition:border-color var(--transition),box-shadow var(--transition);position:relative}.seasonal-tools__badge{position:absolute;top:-8px;right:8px;background:var(--accent-gold);color:#422006;font-size:0.625rem;font-weight:700;padding:0.125rem 0.5rem;border-radius:var(--radius-full)}.seasonal-tools__name{flex:1}.seasonal-tools__arrow{color:var(--accent);flex-shrink:0}.news-banner{padding:0.5rem 1rem;border-radius:var(--radius);font-size:0.8125rem;font-weight:600;text-align:center;margin-bottom:1rem}.news-banner--info{background:rgba(30,58,138,0.08);color:var(--accent);border:1px solid rgba(30,58,138,0.15)}.news-banner--warning{background:rgba(202,138,4,0.08);color:#92400E;border:1px solid rgba(202,138,4,0.2)}.tool-progress{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin:1.5rem 0}.tool-progress__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.tool-progress__title{font-size:1rem;font-weight:700;color:var(--text-primary);margin:0}.tool-progress__total{font-size:0.75rem;color:var(--accent);font-weight:600;background:rgba(30,58,138,0.08);padding:0.25rem 0.75rem;border-radius:var(--radius-full)}.tool-progress__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.tool-progress__category{display:flex;flex-direction:column;gap:0.375rem}.tool-progress__cat-header{display:flex;justify-content:space-between;align-items:center}.tool-progress__cat-name{font-size:0.875rem;font-weight:600;color:var(--text-primary)}.tool-progress__cat-count{font-size:0.75rem;color:var(--text-secondary)}.tool-progress__bar{height:6px;background:var(--bg-secondary);border-radius:3px;overflow:hidden}.tool-progress__fill{height:100%;background:var(--accent);border-radius:3px;transition:width 0.5s ease}.tool-progress__fill.tool-progress__badge--complete{background:var(--success,#22C55E)}.rate-badge{display:inline-block;background:rgba(34,197,94,0.1);color:#22C55E;padding:4px 12px;border-radius:20px;font-size:0.875rem;margin-top:8px}.tool-progress__fill.tool-progress__badge--half{background:var(--accent-gold)}.tool-progress__complete-label{font-size:0.75rem;color:var(--success,#22C55E);font-weight:700}#news-banner:empty,#seasonal-tools:empty,#tool-progress:empty,#seasonal-banner-slot:empty,#bookmark-list:empty,#calc-history-list:empty{display:none}#news-banner:not(:empty){min-height:48px;contain:content}#seasonal-tools:not(:empty){min-height:200px;contain:content}#tool-progress:not(:empty){min-height:100px;contain:content}#seasonal-banner-slot:not(:empty){min-height:48px;contain:content}.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:transparent;z-index:9999;pointer-events:none}.reading-progress__fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-gold));transition:width 0.1s linear}.form-error{display:none;font-size:0.75rem;color:#EF4444;margin-top:4px}.form-error.show{display:block}input:user-invalid,input.is-invalid{border-color:#EF4444}input:user-valid,input.is-valid{border-color:#22C55E}.sidebar-toc{margin-bottom:1.5rem}.sidebar-toc__title{font-size:0.9375rem;font-weight:700;margin-bottom:0.5rem}.sidebar-toc ol{padding-left:1rem;line-height:2;font-size:0.8125rem}.sidebar-toc a{color:var(--text-secondary);text-decoration:none;transition:color var(--transition),border-left var(--transition);display:block;padding-left:8px;border-left:2px solid transparent}.sidebar-toc a:hover{color:var(--accent)}.sidebar-toc a.active{color:var(--accent);font-weight:600;border-left-color:var(--accent)}.result-share-mini{display:flex;align-items:center;gap:8px;margin:12px 0 20px;font-size:0.8125rem;color:var(--text-secondary)}.share-icon-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;color:var(--text-primary);font-size:0.75rem;transition:all var(--transition);font-family:inherit}.share-icon-btn:hover{border-color:var(--accent);color:var(--accent)}.cookie-consent{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);border-top:1px solid var(--border);padding:1rem;z-index:9998;box-shadow:0 -2px 10px rgba(0,0,0,0.1)}.cookie-consent__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:0.8125rem}.cookie-consent__inner p{margin:0}.cookie-consent__inner a{color:var(--accent)}.cookie-consent__buttons{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;justify-content:center}.cookie-consent__customize{background:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:0.375rem 0.75rem;border-radius:var(--radius);font-size:0.8125rem;cursor:pointer;transition:background-color var(--transition)}.cookie-consent__customize:hover{background:var(--bg-secondary)}.cookie-consent__details{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--border)}.cookie-consent__options{display:flex;flex-direction:column;gap:0.375rem;margin-bottom:0.75rem}.cookie-consent__option{display:flex;align-items:center;gap:0.5rem;font-size:0.8125rem;cursor:pointer;padding:0.375rem 0.5rem;border-radius:var(--radius);transition:background-color var(--transition)}.cookie-consent__option:hover{background:var(--bg-secondary)}.cookie-consent__option input[type="checkbox"]{width:1.125rem;height:1.125rem;accent-color:var(--accent);flex-shrink:0;margin:0}.cookie-consent__option-label{flex:1}.cookie-consent__option-badge{font-size:0.6875rem;background:var(--accent);color:#fff;padding:0.125rem 0.375rem;border-radius:var(--radius);white-space:nowrap}.cookie-consent__save{width:100%}#calc-history:empty::after{content:'まだ履歴がありません';display:block;text-align:center;color:var(--text-muted);font-size:0.875rem;padding:1rem}.link-pills{margin-top:0;display:flex;flex-wrap:wrap;gap:0.5rem}.link-pill{font-size:0.8125rem;font-weight:500;color:var(--accent);padding:0.375rem 0.75rem;border:1px solid var(--accent);border-radius:var(--radius-full);text-decoration:none;background:var(--accent-light);transition:background-color var(--transition),color var(--transition)}.link-pill:hover{background:var(--accent);color:var(--bg-primary);text-decoration:none}.sub-label{font-size:0.875rem;font-weight:600;color:var(--text-secondary);margin-top:1.25rem;margin-bottom:0.5rem}.popular-section{padding:2rem 0 0}.popular-card{min-width:180px;flex-shrink:0;padding:1rem;text-align:center}.popular-card__icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem;color:var(--bg-primary)}.popular-card--blue .popular-card__icon{background-color:var(--accent)}.popular-card--gold .popular-card__icon{background-color:var(--accent-gold)}.popular-card--green .popular-card__icon{background-color:var(--success)}.popular-card--purple .popular-card__icon{background-color:#7C3AED}.popular-card--orange .popular-card__icon{background-color:var(--warning)}.popular-card--blue{border-top:3px solid var(--accent)}.popular-card--gold{border-top:3px solid var(--accent-gold)}.popular-card--green{border-top:3px solid var(--success)}.popular-card--purple{border-top:3px solid #7C3AED}.popular-card--orange{border-top:3px solid var(--warning)}.popular-card__title{font-weight:700;font-size:0.9rem}.popular-card__desc{font-size:0.75rem;color:var(--text-secondary);margin-top:0.25rem}.hero-search{margin-top:1.5rem;max-width:480px;margin-left:auto;margin-right:auto;position:relative}.hero-search__input{width:100%;padding:0.75rem 1rem 0.75rem 2.5rem;border-radius:999px;border:2px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.15);color:var(--bg-primary);font-size:1rem;backdrop-filter:blur(4px);transition:border 0.2s}.hero-search__input:focus{border-color:#2563EB;outline:3px solid rgba(37,99,235,0.5);outline-offset:2px}.hero-search__input::placeholder{color:rgba(255,255,255,0.7)}.hero-search__icon{position:absolute;left:0.85rem;top:50%;transform:translateY(-50%);opacity:0.7}.section-heading{font-size:1.125rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary)}.guide-articles{max-width:900px;margin:2rem auto;padding:0 1rem;content-visibility:auto;contain-intrinsic-size:auto 400px}.guide-articles--wide{max-width:var(--max-width)}.guide-articles__heading{font-size:1.5rem;margin-bottom:1rem}.guide-articles__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.profile-banner{padding:0.75rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:0.875rem;display:flex;align-items:center;gap:0.5rem}.profile-banner--welcome{background:linear-gradient(135deg,rgba(37,99,235,0.08),rgba(202,138,4,0.08));border:1px solid var(--border)}.profile-banner--returning{background:rgba(202,138,4,0.06);border:1px solid rgba(202,138,4,0.2)}.recent-tools{margin:1.5rem auto;max-width:900px;padding:0 1rem}.recent-tools__heading{font-size:1.1rem;font-weight:700;margin-bottom:0.75rem;color:var(--text-primary)}.recent-tools__grid{display:flex;gap:0.75rem;overflow-x:auto;padding-bottom:0.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.recent-tools__grid::-webkit-scrollbar{height:4px}.recent-tools__grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.recent-tools__card{flex-shrink:0;min-width:160px;padding:0.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text-primary);transition:border-color 0.15s,box-shadow 0.15s}.recent-tools__card:hover{border-color:var(--accent);box-shadow:var(--shadow);text-decoration:none}.recent-tools__name{font-weight:600;font-size:0.875rem}.recent-tools__date{font-size:0.75rem;color:var(--text-secondary);margin-top:0.25rem}.homepage-banners{padding-top:1rem}.homepage-banners:empty,.homepage-banners:has(>:empty:only-child){display:none}.ad-slot--hero-below{margin:2rem auto;text-align:center}.sidebar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem}.sidebar-card h3{font-size:0.9375rem;font-weight:700;margin-bottom:0.75rem;color:var(--text-primary)}.sidebar-card ul{list-style:none;padding:0;margin:0}.sidebar-card li{margin-bottom:0.375rem}.sidebar-card a{display:block;padding:0.375rem 0.5rem;border-radius:var(--radius-sm);color:var(--text-primary);font-size:0.8125rem;transition:background-color var(--transition)}.sidebar-card a:hover{background-color:var(--bg-secondary);text-decoration:none}.disclaimer-box{background:var(--bg-secondary);border-radius:var(--radius);padding:1.25rem;margin:1.5rem 0;font-size:0.8125rem;color:var(--text-secondary);line-height:1.7}.disclaimer-box h4{font-size:0.875rem;font-weight:700;color:var(--text-primary);margin-bottom:0.5rem}.disclaimer-box ul{padding-left:1.25rem;margin:0}.disclaimer-box li{margin-bottom:0.25rem}.faq-section,.article-section,.disclaimer,#tool-recommendations{content-visibility:auto;contain-intrinsic-size:auto 500px}.share-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem;margin:2rem 0;padding:1.25rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg)}.share-buttons__label{font-size:0.875rem;font-weight:700;color:var(--text-secondary);margin-right:0.25rem}.share-buttons__btn{display:inline-flex;align-items:center;gap:0.375rem;padding:0.5rem 1rem;border-radius:var(--radius);font-size:0.8125rem;font-weight:600;text-decoration:none;color:var(--bg-primary);transition:opacity 0.2s,transform 0.1s;line-height:1}.share-buttons__btn:hover{opacity:0.85;text-decoration:none;color:var(--bg-primary)}.share-buttons__btn:active{transform:scale(0.96)}.share-buttons__btn--x{background:#000}.share-buttons__btn--line{background:#06C755}.share-buttons__btn--hatena{background:#00A4DE;font-weight:900;font-size:0.875rem}.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg-card,#fff);border-top:1px solid var(--border,#e5e7eb);z-index:1000;padding:0.25rem 0 env(safe-area-inset-bottom,0);box-shadow:0 -2px 10px rgba(0,0,0,0.08)}.mobile-bottom-nav__inner{display:flex;justify-content:space-around;align-items:center;max-width:500px;margin:0 auto}.mobile-bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:0.1875rem;padding:0.5rem 0.25rem;text-decoration:none;color:var(--text-secondary,#6b7280);font-size:0.625rem;font-weight:600;transition:color 0.2s;-webkit-tap-highlight-color:transparent;position:relative;min-width:48px}.mobile-bottom-nav__item:hover{color:var(--accent,#1E3A8A);text-decoration:none}.mobile-bottom-nav__item.active{color:var(--accent,#1E3A8A);font-weight:700}.mobile-bottom-nav__item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:3px;background:var(--accent,#1E3A8A);border-radius:0 0 3px 3px}.mobile-bottom-nav__item svg{width:22px;height:22px}.bookmark-toggle{background:none;border:none;cursor:pointer;padding:8px;color:var(--text-secondary);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);transition:background var(--transition)}.bookmark-toggle:hover{background:var(--bg-secondary)}.bookmark-toggle svg{display:block}.bookmark-page-btn{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.875rem;margin:0.5rem 0 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-full);cursor:pointer;font-size:0.8125rem;font-weight:600;color:var(--text-secondary);transition:all var(--transition);min-height:44px;font-family:inherit}.bookmark-page-btn:hover{border-color:var(--accent-gold);background:rgba(202,138,4,0.06)}.bookmark-page-btn[aria-pressed="true"]{color:var(--accent-gold);border-color:var(--accent-gold);background:rgba(202,138,4,0.06)}.bookmark-page-btn__star{font-size:1.125rem;line-height:1;color:var(--accent-gold)}.bookmarks-section{margin:1.5rem 0}.bookmarks-section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;flex-wrap:wrap;gap:0.5rem}.bookmarks-section__grid{display:flex;gap:0.75rem;overflow-x:auto;padding-bottom:0.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.bookmarks-section__grid::-webkit-scrollbar{height:4px}.bookmarks-section__grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.bookmarks-section__card{flex-shrink:0;min-width:160px;max-width:240px;padding:0.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:var(--text-primary);transition:border-color 0.15s,box-shadow 0.15s;display:flex;flex-direction:column;gap:0.25rem}.bookmarks-section__card:hover{border-color:var(--accent-gold);box-shadow:var(--shadow);text-decoration:none}.bookmarks-section__card-star{color:var(--accent-gold);font-size:0.875rem}.bookmarks-section__card-title{font-weight:600;font-size:0.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bookmarks-section__card-date{font-size:0.75rem;color:var(--text-secondary)}.history-section{margin:1.5rem 0}.history-section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;flex-wrap:wrap;gap:0.5rem}.history-section__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0.75rem}.history-section__card{display:block;padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:var(--text-primary);transition:border-color 0.15s,box-shadow 0.15s}.history-section__card:hover{border-color:var(--accent);box-shadow:var(--shadow);text-decoration:none}.history-section__card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.375rem}.history-section__card-tool{font-weight:700;font-size:0.9375rem;color:var(--text-primary)}.history-section__card-date{font-size:0.75rem;color:var(--text-secondary);white-space:nowrap}.history-section__card-input{font-size:0.8125rem;color:var(--text-secondary);margin-bottom:0.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-section__card-result{font-size:0.875rem;font-weight:600;color:var(--accent);margin-bottom:0.375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-section__card-action{font-size:0.75rem;color:var(--accent);font-weight:600}.tool-grid.hp-collapsed .tool-card:nth-child(n+7){display:none}.hp-show-more-btn{display:block;width:100%;max-width:320px;margin:1.25rem auto 0;padding:0.875rem 1.5rem;background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-lg);color:var(--accent);font-size:0.9375rem;font-weight:700;font-family:var(--font-family);cursor:pointer;text-align:center;transition:background-color var(--transition),border-color var(--transition),transform var(--transition)}.hp-show-more-btn:hover{background:var(--accent-light);border-color:var(--accent)}.hp-show-more-btn:active{transform:scale(0.97)}.tools-section{padding:3.5rem 0}.tools-section:nth-of-type(even){background-color:var(--bg-secondary)}.tools-section:nth-of-type(odd){background-color:var(--bg-primary)}.tool-category{margin-bottom:3.5rem}.tool-category:last-child{margin-bottom:0}body.is-homepage .category-title{font-size:1.625rem;font-weight:800;letter-spacing:0.01em;color:#1E293B;margin-bottom:0.75rem}body.is-homepage .category-desc{font-size:1rem;margin-bottom:1.5rem}body.is-homepage .hero-cta .btn--cta{background:#F97316;color:var(--bg-primary);font-weight:800;font-size:1.125rem;padding:1rem 2.5rem;border-radius:var(--radius-lg);box-shadow:0 4px 14px rgba(249,115,22,0.35);border:none;transition:background-color var(--transition),box-shadow var(--transition),transform var(--transition)}body.is-homepage .hero-cta .btn--cta:hover{background:#EA580C;box-shadow:0 6px 20px rgba(249,115,22,0.45)}body.is-homepage .hero-cta .btn--cta:active{transform:scale(0.97)}body.is-homepage .hero-cta .btn--outline-white{padding:1rem 2.5rem;font-size:1.125rem;font-weight:700}.carousel-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:0.75rem;padding:0.25rem 0}.carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;padding:0;transition:background-color 0.2s,transform 0.2s}.carousel-dot.is-active{background:var(--accent);transform:scale(1.25)}body.is-homepage .carousel-arrow{display:flex;opacity:1;width:40px;height:40px;font-size:1.5rem;border:2px solid var(--border);background:var(--bg-primary);box-shadow:0 2px 8px rgba(0,0,0,0.1)}body.is-homepage .carousel-arrow:hover{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}body.is-homepage .hero-search{max-width:540px;margin-top:2rem}body.is-homepage .hero-search__input{padding:1rem 1.25rem 1rem 3rem;font-size:1.0625rem;border:2px solid rgba(255,255,255,0.4);background:rgba(255,255,255,0.18);backdrop-filter:blur(8px)}body.is-homepage .hero-search__input:focus{border-color:#2563EB;background:rgba(255,255,255,0.25);outline:3px solid rgba(37,99,235,0.4);outline-offset:2px}body.is-homepage .hero-search__input::placeholder{color:rgba(255,255,255,0.8);font-size:0.9375rem}body.is-homepage .hero-search__icon{left:1rem}/* Button aliases (single-dash convenience classes) *//* Form field error state */.form-control.is-error,.form-control:invalid:not(:placeholder-shown){border-color:var(--danger)}/* Table header background */.breakdown-table thead th{background-color:var(--bg-secondary)}/* Ensure form fields have consistent min-height */input.form-control,select.form-control,textarea.form-control{min-height:44px}/* ============================================
 UI/UX Improvements: Form, Results, CTA, Sidebar
 ============================================ */input[type="number"],input[type="text"],select,.form-control{
 border-radius: 8px;
 border: 2px solid var(--border);
 font-size: 1rem;
 height: 48px;
 transition: border-color 0.2s, box-shadow 0.2s;
 padding: 0.625rem 0.875rem;
 background-color: var(--bg-primary);
 color: var(--text-primary);
 width: 100%;
 box-sizing: border-box;
}input[type="number"]:focus,input[type="text"]:focus,select:focus,.form-control:focus{
 outline: none;
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}.result-card{
 background: linear-gradient(135deg, #f0f4ff 0%, var(--bg-card) 100%);
 border-left: 4px solid var(--accent);
 border-radius: var(--radius-lg);
 padding: 1.5rem;
 margin-bottom: 1.5rem;
}.result-card__amount,.result-highlight .amount{
 font-size: 2rem;
 font-weight: 800;
 line-height: 1.3;
 color: var(--accent);
}.result-highlight{
 background: linear-gradient(135deg, #EEF2FF 0%, #DBEAFE 50%, #EFF6FF 100%);
 border-radius: var(--radius-lg);
 padding: 1.5rem;
 margin-bottom: 1.5rem;
 border: 1px solid rgba(30, 58, 138, 0.15);
}.result-highlight .label{
 font-size: 0.875rem;
 font-weight: 500;
 color: var(--text-secondary);
 margin-bottom: 0.5rem;
}.result-highlight .sub{
 font-size: 0.875rem;
 color: var(--text-secondary);
 margin-top: 0.375rem;
}.result-rate{
 font-size: 0.8125rem;
 color: var(--text-secondary);
 margin-top: 0.25rem;
}.btn--cta,.btn--cta:hover{
 transform: translateY(-1px);
 box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}.btn--cta:active{
 transform: translateY(1px) !important;
 box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
}.tool-desc{
 line-height: 1.8;
 max-width: 720px;
 color: var(--text-secondary);
 font-size: 0.875rem;
}.sidebar-links{
 list-style: none;
 padding: 0;
 margin: 0;
}.sidebar-links li{
 margin-bottom: 2px;
}.sidebar-links a{
 display: block;
 padding: 0.5rem 0.75rem;
 border-radius: var(--radius-sm);
 color: var(--text-primary);
 font-size: 0.8125rem;
 text-decoration: none;
 transition: background-color 0.2s, color 0.2s, transform 0.2s;
 border-left: 2px solid transparent;
}.sidebar-links a:hover{
 background-color: var(--accent-light);
 color: var(--accent);
 text-decoration: none;
 border-left-color: var(--accent);
 transform: translateX(2px);
}.sidebar .card{
 border-radius: var(--radius-lg);
 border: 1px solid var(--border);
 padding: 1.25rem;
 box-shadow: var(--shadow);
 transition: box-shadow 0.2s;
}.sidebar .card:hover{
 box-shadow: var(--shadow-md);
}/* Sidebar card unified design */.sidebar-card a,.sidebar .card a{
 display: block;
 padding: 0.5rem 0.75rem;
 border-radius: var(--radius-sm);
 color: var(--text-primary);
 font-size: 0.8125rem;
 text-decoration: none;
 transition: background-color 0.2s, color 0.2s, border-left-color 0.2s;
 border-left: 2px solid transparent;
}.sidebar-card a:hover,.sidebar .card a:hover{
 background-color: var(--accent-light);
 color: var(--accent);
 text-decoration: none;
 border-left-color: var(--accent);
}/* ============================================
 コラム記事 UI/UX 改善
 ============================================ */.article-text{max-width:720px;margin-bottom:1.5rem}.section-heading{margin-top:3rem}.section-heading--sub{margin-top:2rem}.main-content blockquote{border-left:4px solid var(--accent);background:var(--bg-secondary);border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.25rem;margin:1.5rem 0;font-size:0.9375rem;line-height:1.8;color:var(--text-secondary)}.main-content blockquote p{margin-bottom:0.5rem}.main-content blockquote p:last-child{margin-bottom:0}.toc{background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.toc__title{font-size:0.9375rem;font-weight:700;margin-bottom:0.75rem;color:var(--text-primary);display:flex;align-items:center;gap:0.5rem}.toc__list{list-style:none;padding:0;margin:0;counter-reset:toc-counter}.toc__list li{counter-increment:toc-counter;margin-bottom:0.375rem}.toc__list li a{font-size:0.875rem;color:var(--accent);text-decoration:none;display:flex;align-items:baseline;gap:0.5rem;padding:0.25rem 0.5rem;border-radius:var(--radius-sm);transition:background-color 0.2s,color 0.2s}.toc__list li a::before{content:counter(toc-counter) ".";font-weight:600;color:var(--text-secondary);min-width:1.5em}.toc__list li a:hover{background-color:var(--accent-light);color:var(--accent-hover);text-decoration:none}.cta-box{background:linear-gradient(135deg,var(--accent-light,#DBEAFE),var(--bg-secondary));border:none;border-radius:12px;padding:1.5rem 2rem;margin:2rem 0;text-align:center;box-shadow:var(--shadow-md)}.cta-box__title{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin-bottom:0.75rem}.cta-box__text{font-size:0.875rem;color:var(--text-secondary);margin-bottom:1rem}.cta-box__buttons{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center}.cta-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:#F97316;color:var(--bg-primary);text-decoration:none;border-radius:var(--radius);font-weight:700;font-size:0.9375rem;transition:background 0.2s,transform 0.15s,box-shadow 0.2s;box-shadow:0 2px 8px rgba(249,115,22,0.3)}.cta-btn:hover{background:#EA580C;color:var(--bg-primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(249,115,22,0.4);text-decoration:none}.cta-btn:focus-visible{outline:3px solid #F97316;outline-offset:2px}.cta-btn--secondary{background:var(--bg-card,#fff);color:#F97316;border:2px solid #F97316;box-shadow:none}.cta-btn--secondary:hover{background:#FFF7ED;color:#EA580C;box-shadow:0 2px 8px rgba(249,115,22,0.15)}.faq-item{border-bottom:1px solid var(--border);padding:0}.faq-item:last-child{border-bottom:none}.faq-item details{overflow:hidden}.faq-item__question{font-weight:700;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:0.5rem;padding:0.875rem 1rem;min-height:44px;list-style:none;background:var(--bg-secondary);border-radius:var(--radius);margin:0.25rem 0;transition:background-color 0.2s}.faq-item__question::-webkit-details-marker{display:none}.faq-item__question::after{content:"";display:inline-block;width:0.5rem;height:0.5rem;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg);transition:transform 0.3s ease;margin-left:auto;flex-shrink:0}details[open]>.faq-item__question::after{transform:rotate(-135deg)}.faq-item__question:hover{background:var(--accent-light)}.faq-item__question::before{content:'Q';display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;background:var(--accent);color:var(--bg-primary);border-radius:50%;font-size:0.8125rem;font-weight:700}.faq-item__answer{color:var(--text-secondary);font-size:0.9375rem;padding:0.75rem 1rem 1rem 3.25rem;line-height:1.8;animation:faqFadeIn 0.3s ease}@keyframes faqFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.source-references{margin:2rem 0;padding:1.25rem 1.5rem;background:var(--bg-secondary);border-radius:var(--radius-lg,12px);border:1px solid var(--border)}.source-references__title{font-weight:700;font-size:0.9375rem;margin-bottom:0.75rem;color:var(--text-primary)}.source-references__list{list-style:none;padding:0;margin:0}.source-references__list li{margin-bottom:0.5rem;font-size:0.8125rem;line-height:1.6;padding-left:0.25rem}.source-references__list li a{color:var(--accent);text-decoration:none;transition:color 0.2s}.source-references__list li a:hover{text-decoration:underline;color:var(--accent-hover)}.source-references__list li a[target="_blank"]::after,.source-references__list li a[href^="http"]::after{content:" \2197";font-size:0.75em;vertical-align:super;margin-left:0.15em;opacity:0.7}.year-comparison{ margin: 2rem 0; padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border); }.year-comparison__title{ font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }.year-comparison__table{ width: 100%; border-collapse: collapse; }.year-comparison__table th,.year-comparison__table td{ padding: 0.75rem; border-bottom: 1px solid var(--border); }.year-comparison__table th{ text-align: left; font-weight: 600; font-size: 0.875rem; }.year-comparison__table td{ text-align: right; font-variant-numeric: tabular-nums; }.year-comparison__diff{ font-weight: 700; }.year-comparison__diff--positive{ color: var(--success); }.year-comparison__diff--negative{ color: var(--danger); }.year-comparison__summary{ margin-top: 1rem; padding: 1rem; background: var(--success-bg); border-radius: var(--radius); font-size: 0.9375rem; line-height: 1.7; }.year-comparison__summary--negative{ background: var(--danger-bg); }@media (max-width:480px){.site-header__logo-sub{display:none}:root{--font-size-base:15px}.site-header__inner{height:50px;padding:0 0.75rem}.site-header__logo{font-size:1.125rem}.page-wrapper{padding:1rem 0.75rem}.hero{padding:1.5rem 0.75rem 2.5rem}.hero-title{font-size:1.375rem}.hero-catch{font-size:1rem}.hero-desc{font-size:0.875rem}.hero-cta .btn--cta,.hero-cta .btn--outline-white{padding:0.75rem 1.25rem;font-size:0.9375rem}.result-card{padding:1rem}.result-card__amount{font-size:1.25rem}.breakdown-table th,.breakdown-table td{padding:0.5rem 0.5rem;font-size:0.8125rem}.container{padding:0 0.75rem}.share-buttons{flex-wrap:wrap}.btn{padding:0.625rem 1rem;font-size:0.875rem;width:100%;justify-content:center}.btn--sm{width:auto}.form-group{margin-bottom:1rem}.next-step-card{flex-direction:column;text-align:center}.back-to-top{bottom:1rem;right:1rem}.share-buttons{justify-content:center}.share-buttons__label{width:100%;text-align:center;margin-right:0;margin-bottom:0.25rem}.share-buttons__btn{flex:1;min-width:0;justify-content:center;padding:0.625rem 0.5rem}.history-section__grid{grid-template-columns:1fr}}@media (min-width:769px){.sidebar{position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.footer-category{border-bottom:none}.footer-category>summary{pointer-events:none}.footer-category>summary::after{display:none}.footer-category,.footer-category:not([open]){overflow:visible}.footer-category>ul,.footer-category>.site-footer__links,.footer-category:not([open])>ul,.footer-category:not([open])>.site-footer__links{display:flex!important;flex-direction:column}.tool-grid-toggle{display:none !important}.mobile-bottom-nav{display:none !important}}@media (scripting:none){.result-section{opacity:1;transform:none}}@media (max-width:1024px){.site-footer__inner{grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:2rem 1rem}.site-footer__brand{grid-column:1 / -1}}@media (max-width:768px){.site-footer__inner{grid-template-columns:1fr;gap:0;padding:1.5rem 1rem}.site-footer__brand{grid-column:1 / -1;margin-bottom:1rem}.footer-category{padding:0;border-bottom:1px solid #1E293B}.footer-category summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.footer-category summary::after{content:"";display:inline-block;width:8px;height:8px;border-right:2px solid #94A3B8;border-bottom:2px solid #94A3B8;transform:rotate(45deg);transition:transform 0.2s;margin-left:auto;flex-shrink:0}.footer-category[open] summary::after{transform:rotate(-135deg)}.site-footer__heading{margin-bottom:0;padding:0.75rem 0}.site-footer__links{padding-bottom:0.75rem}.site-footer__links a{font-size:0.8rem}.site-footer__disclaimer{font-size:0.75rem}.hamburger{display:inline-flex;position:relative;z-index:101}.site-header__nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background-color:var(--bg-card);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);padding:0.5rem 0;z-index:99;transform:translateY(-10px);opacity:0;visibility:hidden;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s cubic-bezier(0.4,0,0.2,1),visibility 0.3s}.site-header__nav.is-open{transform:translateY(0);opacity:1;visibility:visible}.site-header__nav a{padding:1rem 1.5rem;font-size:1rem;border-bottom:1px solid var(--border);min-height:48px;display:flex;align-items:center;color:var(--text-secondary);transition:color 0.2s,background-color 0.2s;opacity:0;transform:translateY(-8px);transition:opacity 0.25s ease,transform 0.25s ease,color 0.2s,background-color 0.2s}.site-header__nav.is-open a{opacity:1;transform:translateY(0)}.site-header__nav.is-open a:nth-child(1){transition-delay:0.05s}.site-header__nav.is-open a:nth-child(2){transition-delay:0.1s}.site-header__nav.is-open a:nth-child(3){transition-delay:0.15s}.site-header__nav.is-open a:nth-child(4){transition-delay:0.2s}.site-header__nav.is-open a:nth-child(5){transition-delay:0.25s}.site-header__nav.is-open a:nth-child(6){transition-delay:0.3s}.site-header__nav a:hover,.site-header__nav a:focus-visible{background-color:var(--accent-light);color:var(--accent)}.site-header__nav a.is-active{color:var(--accent);font-weight:700;background-color:var(--accent-light);border-left:3px solid var(--accent)}.site-header__nav a:last-child{border-bottom:none}.site-header{position:sticky;top:0;z-index:100}.page-wrapper{grid-template-columns:1fr;gap:1.5rem}.sidebar{order:1}h1{font-size:1.5rem}h2{font-size:1.25rem}.form-group label{font-size:0.9375rem}.form-control{padding:0.75rem 0.875rem;font-size:1rem;min-height:44px}.form-row{flex-direction:column;gap:0}.result-card__amount{font-size:1.5rem}.amount{font-size:1.5rem}.ad-slot--rectangle{max-width:100%}.hero{padding:2rem 1rem 3rem}.hero-title{font-size:1.75rem}.hero-cta{flex-direction:column;align-items:center;gap:0.75rem}.hero-cta .btn--cta,.hero-cta .btn--outline-white{width:100%;max-width:320px;padding:0.875rem 1.5rem;font-size:1rem;justify-content:center}.tool-grid{grid-template-columns:1fr}.breakdown-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.btn{min-height:44px}.cookie-consent__inner{flex-direction:column;text-align:center}.carousel-arrow{display:none}.scroll-hint{display:block}.tool-grid--collapsed .tool-card:nth-child(n+5){display:none}.tool-grid-toggle{display:block;width:100%;padding:0.625rem;margin-top:0.75rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);color:var(--accent);font-size:0.875rem;font-weight:600;cursor:pointer;text-align:center;transition:background-color var(--transition)}.tool-grid-toggle:hover{background:var(--accent-light)}.cookie-consent__inner{flex-direction:column;text-align:center}.mobile-bottom-nav{display:block}body{padding-bottom:60px}body.is-homepage .carousel-arrow{display:flex;width:32px;height:32px;font-size:1.25rem}.carousel-arrow--left{left:-4px}.carousel-arrow--right{right:-4px}.cta-box{padding:1.25rem 1rem}.cta-box__buttons{flex-direction:column;align-items:center}.cta-btn{width:100%;justify-content:center}.faq-item__question{padding:0.75rem 0.75rem;font-size:0.875rem}.faq-item__answer{padding:0.5rem 0.75rem 0.75rem 2.75rem}.year-comparison{ padding: 1rem; }.year-comparison__table th,.year-comparison__table td{ padding: 0.5rem 0.375rem; font-size: 0.8125rem; }}@media (hover:hover){.tool-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);text-decoration:none}.tool-card:hover .tool-card-icon{background-color:var(--accent);color:var(--bg-primary)}.tool-card:hover .tool-card-icon svg{stroke:var(--bg-primary)}.affiliate-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}.next-tools__card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(30,58,138,0.1)}.seasonal-tools__item:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(30,58,138,0.1)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}.reading-progress__fill{transition:none}.faq-item__answer{animation:none}.faq-item__question::after{transition:none}}@media (pointer:coarse){.annual-pills a,.link-pill{min-height:44px;display:inline-flex;align-items:center;padding:0.5rem 0.75rem}}

/* ============================================
   Responsive: 1024px - Tablet Landscape / Small PC
   ============================================ */
@media (max-width: 1024px) {
  .page-wrapper {
    grid-template-columns: 1fr var(--sidebar-width, 200px);
    gap: 1.25rem;
  }
  .sidebar {
    --sidebar-width: 200px;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-desc {
    font-size: 0.9375rem;
  }
  .container {
    padding: 0 1rem;
  }
  .tool-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .history-section__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .cta-box {
    padding: 1.25rem 1.5rem;
  }
  .result-card__amount {
    font-size: 1.75rem;
  }
}

/* ============================================
   Responsive: 600px - Tablet Portrait
   ============================================ */
@media (max-width: 600px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }
  .history-section__grid {
    grid-template-columns: 1fr;
  }
  .breakdown-table {
    font-size: 0.8125rem;
  }
  .breakdown-table th,
  .breakdown-table td {
    padding: 0.5rem 0.375rem;
  }
  .year-comparison__table {
    font-size: 0.8125rem;
  }
  .year-comparison__table th,
  .year-comparison__table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.8125rem;
  }
  .toc {
    padding: 1rem;
  }
  .toc__list li a {
    font-size: 0.8125rem;
    padding: 0.2rem 0.375rem;
  }
  .source-references {
    padding: 1rem;
  }
  .source-references__list li {
    font-size: 0.75rem;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  .hero-cta .btn--cta,
  .hero-cta .btn--outline-white {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* ============================================
   Responsive: 375px - Extra Small Phones (iPhone SE etc.)
   ============================================ */
@media (max-width: 375px) {
  body {
    font-size: 14px;
  }
  :root {
    --font-size-base: 14px;
  }
  .container {
    padding: 0 0.5rem;
  }
  .page-wrapper {
    padding: 0.75rem 0.5rem;
  }
  h1 {
    font-size: 1.25rem;
  }
  h2 {
    font-size: 1.125rem;
  }
  h3 {
    font-size: 1rem;
  }
  .hero {
    padding: 1rem 0.5rem 2rem;
  }
  .hero-title {
    font-size: 1.2rem;
  }
  .hero-catch {
    font-size: 0.875rem;
  }
  .hero-desc {
    font-size: 0.8125rem;
  }
  .hero-cta .btn--cta,
  .hero-cta .btn--outline-white {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
  .result-card {
    padding: 0.75rem;
  }
  .result-card__amount {
    font-size: 1.125rem;
  }
  .breakdown-table th,
  .breakdown-table td {
    padding: 0.375rem 0.25rem;
    font-size: 0.75rem;
  }
  .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }
  .form-control {
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
  }
  .site-header__inner {
    height: 46px;
    padding: 0 0.5rem;
  }
  .site-header__logo {
    font-size: 1rem;
  }
  .cta-box {
    padding: 1rem 0.75rem;
    margin: 1.5rem 0;
  }
  .cta-box__title {
    font-size: 1rem;
  }
  .cta-btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
  .faq-item__question {
    padding: 0.625rem 0.5rem;
    font-size: 0.8125rem;
  }
  .faq-item__answer {
    padding: 0.375rem 0.5rem 0.625rem 2.25rem;
    font-size: 0.875rem;
  }
  .toc {
    padding: 0.75rem;
  }
  .toc__title {
    font-size: 0.875rem;
  }
  .toc__list li a {
    font-size: 0.75rem;
  }
  .source-references {
    padding: 0.75rem 1rem;
  }
  .year-comparison {
    padding: 0.75rem;
  }
  .share-buttons__btn {
    padding: 0.5rem 0.375rem;
    font-size: 0.75rem;
  }
}

/* ============================================
   Dark Mode (auto via prefers-color-scheme)
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #12171F;
    --bg-secondary: #1A212C;
    --bg-card: #1A212C;
    --text-primary: #E2E8F0;
    --text-secondary: #9AA3B0;
    --border: #2A3340;
    --accent-light: #1F2F46;
    --shadow: 0 1px 2px rgba(0,0,0,0.25);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.22);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.25);
    --success-bg: rgba(47,125,92,0.15);
    --warning-bg: rgba(183,121,31,0.15);
    --danger-bg: rgba(168,49,49,0.18);
    --accent: #8AA5C7;
    --accent-hover: #A8BCD5;
    --success: #5DAA83;
    --warning: #D49B4A;
    --danger: #D27878;
  }

  /* Selection */
  ::selection {
    background: var(--accent-light);
    color: #E2E8F0;
  }

  /* Header */
  .site-header {
    background-color: #0F172A;
    border-bottom-color: #334155;
  }
  .site-header__logo {
    color: #93C5FD;
  }

  /* Hero */
  .hero {
    background: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
    background-size: 20px 20px, 100% 100%;
  }
  .hero::after {
    background: #0F172A;
  }

  /* Form controls */
  input[type="number"],
  input[type="text"],
  select,
  .form-control {
    background-color: #0F172A;
    color: #E2E8F0;
    border-color: #334155;
  }
  input[type="number"]:focus,
  input[type="text"]:focus,
  select:focus,
  .form-control:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  }
  select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  }

  /* Result cards */
  .result-card {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  }
  .result-highlight {
    background: linear-gradient(135deg, #1E293B 0%, #1E3A5F 50%, #1E293B 100%);
    border-color: rgba(59, 130, 246, 0.25);
  }

  /* Tables */
  .breakdown-table thead th,
  .breakdown-table tbody tr:nth-child(even) {
    background-color: #1E293B;
  }
  .breakdown-table tbody tr:hover {
    background-color: #1E3A5F;
  }

  /* Buttons */
  .btn--primary {
    color: #fff;
  }
  .btn--copy {
    background-color: #1E293B;
    color: #E2E8F0;
    border-color: #334155;
  }
  .btn--copy:hover {
    background-color: #334155;
  }
  .btn--outline {
    color: #93C5FD;
    border-color: #93C5FD;
  }
  .btn--outline:hover {
    background-color: #1E3A5F;
  }

  /* FAQ */
  .faq-item summary,
  .faq-item__question {
    background: #1E293B;
  }
  .faq-item summary:hover,
  .faq-item__question:hover {
    background: #1E3A5F;
  }

  /* Toast */
  .toast {
    background-color: #E2E8F0;
    color: #0F172A;
  }

  /* Cookie consent */
  .cookie-consent {
    background: #1E293B;
    border-top-color: #334155;
  }

  /* Tool cards */
  .tool-card {
    background-color: #1E293B;
    border-color: #334155;
  }
  .tool-card-icon {
    background-color: #1E3A5F;
  }

  /* CTA box */
  .cta-box {
    background: linear-gradient(135deg, #1E3A5F, #1E293B);
  }
  .cta-btn--secondary {
    background: #1E293B;
    color: #F97316;
  }
  .cta-btn--secondary:hover {
    background: #334155;
  }

  /* About section */
  .about-section {
    background-color: #1E293B;
  }

  /* Disclaimer */
  .disclaimer {
    background-color: #1E293B;
  }

  /* Source references */
  .source-references {
    background: #1E293B;
    border-color: #334155;
  }

  /* Direct answer */
  .direct-answer {
    background: #1E293B;
  }

  /* Share buttons */
  .share-buttons {
    background: #1E293B;
    border-color: #334155;
  }
  .share-btn {
    background: #0F172A;
    color: #E2E8F0;
    border-color: #334155;
  }

  /* Sidebar */
  .related-tools,
  .sidebar-card,
  .sidebar .card {
    background-color: #1E293B;
    border-color: #334155;
  }

  /* Ad slot */
  .ad-slot {
    background-color: #1E293B;
    border-color: #334155;
  }

  /* Next tools cards */
  .next-tools__card {
    background: #1E293B;
    border-color: #334155;
  }
  .next-tools__icon {
    background: #0F172A;
  }

  /* Next step card */
  .next-step-card {
    background: linear-gradient(135deg, #1E3A5F 0%, #1E293B 100%);
    border-color: #334155;
  }

  /* Seasonal tools */
  .seasonal-tools {
    background: linear-gradient(135deg, rgba(30,58,138,0.15) 0%, rgba(202,138,4,0.1) 100%);
    border-color: #334155;
  }
  .seasonal-tools__item {
    background: #1E293B;
    border-color: #334155;
  }

  /* Affiliate */
  .affiliate-cta {
    background: #1E293B;
  }
  .affiliate-card {
    background: #0F172A;
    border-color: #334155;
  }

  /* Context CTA */
  .context-cta__card {
    background: #1E293B;
    border-color: #334155;
  }

  /* TOC */
  .toc {
    background-color: #1E293B;
    border-color: #334155;
  }

  /* Year comparison */
  .year-comparison {
    background: #1E293B;
    border-color: #334155;
  }
  .year-comparison__summary {
    background: rgba(5,150,105,0.15);
  }
  .year-comparison__summary--negative {
    background: rgba(220,38,38,0.15);
  }

  /* Calc basis */
  .calc-basis {
    background: #1E293B;
    border-color: #334155;
  }

  /* Blockquote */
  .main-content blockquote {
    background: #1E293B;
  }

  /* Quick answer (inline style overrides need !important sparingly) */
  .quick-answer,
  [class*="quick-answer"] {
    background: linear-gradient(135deg, #1E293B, #1E3A5F) !important;
  }

  /* News banner */
  .news-banner--info {
    background: rgba(30,58,138,0.2);
    border-color: rgba(30,58,138,0.3);
  }
  .news-banner--warning {
    background: rgba(202,138,4,0.15);
    color: #EAB308;
    border-color: rgba(202,138,4,0.3);
  }

  /* Profile banner */
  .profile-banner--welcome {
    background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(202,138,4,0.1));
    border-color: #334155;
  }
  .profile-banner--returning {
    background: rgba(202,138,4,0.1);
    border-color: rgba(202,138,4,0.25);
  }

  /* Recent tools */
  .recent-tools__card {
    background: #1E293B;
    border-color: #334155;
  }

  /* History / Bookmarks */
  .history-section__card,
  .bookmarks-section__card {
    background: #1E293B;
    border-color: #334155;
  }

  /* Calc history */
  .calc-history__item {
    background: #1E293B;
    border-color: #334155;
  }

  /* Calc advanced */
  .calc-advanced {
    background: #1E293B;
    border-color: #334155;
  }

  /* Disclaimer box */
  .disclaimer-box {
    background: #1E293B;
  }

  /* Chart area */
  .chart-area,
  .result-chart {
    background: #1E293B;
    border-color: #334155;
  }

  /* Back to top */
  .back-to-top {
    background: #3B82F6;
  }
  .back-to-top:hover {
    background: #2563EB;
  }

  /* Supervision badge */
  .supervision-badge {
    background: rgba(5,150,105,0.15);
    border-color: #059669;
  }

  /* Popular cards */
  .popular-card {
    background: #1E293B;
    border-color: #334155;
  }

  /* Link pills */
  .link-pill {
    background: #1E3A5F;
    border-color: #3B82F6;
    color: #93C5FD;
  }
  .link-pill:hover {
    background: #3B82F6;
    color: #fff;
  }

  /* Scrollbar for dark mode */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #0F172A;
  }
  ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #475569;
  }

  /* Image brightness for dark mode readability */
  img:not([src*=".svg"]) {
    opacity: 0.9;
  }

  /* Mobile menu */
  .mobile-bottom-nav {
    background: #0F172A;
    border-top-color: #334155;
  }

  /* Carousel */
  .carousel-arrow {
    background: #1E293B;
    border-color: #334155;
    color: #E2E8F0;
  }
  .carousel-arrow:hover {
    background: #1E3A5F;
  }
}

/* ============================================
   Next Actions CTA
   ============================================ */
.next-actions { margin: 2rem 0; padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius-lg); }
.next-actions h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.next-actions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.next-actions__card { display: block; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: box-shadow 0.2s; }
.next-actions__card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.next-actions__card strong { display: block; color: var(--accent); margin-bottom: 0.25rem; }
.next-actions__card span { font-size: 0.85rem; color: var(--text-secondary); }

/* ============================================
   Print Styles
   ============================================ */
@media print {
  /* --- 1. Hide non-essential UI elements --- */
  .site-header,
  .hamburger,
  .breadcrumb,
  .site-footer,
  .ad-slot,
  #dynamicCTA,
  #shareArea,
  #pdfArea,
  .share-buttons,
  .share-section,
  .sidebar,
  .skip-link,
  .seasonal-banner,
  .cookie-consent,
  .result-share-mini,
  #stickySummary,
  .back-to-top,
  .mobile-bottom-nav,
  .bookmark-toggle,
  .bookmark-page-btn,
  .bookmarks-section,
  .history-section,
  .toast,
  .newsletter-section,
  .hero-cta,
  .hero-search,
  .hero-trust,
  .action-buttons,
  .cl-share-buttons,
  .cl-export-buttons,
  .carousel-arrow,
  .carousel-dots,
  .popular-carousel-wrapper,
  .comparison-toggle,
  .preset-buttons,
  .next-tools,
  .cross-category,
  .newsletter-form,
  #news-banner,
  #seasonal-banner-slot,
  .btn--cta,
  .calc-advanced__toggle,
  .income-slider,
  #tool-progress,
  .homepage-banners {
    display: none !important;
  }

  /* --- 2. Reset backgrounds & colors for ink saving --- */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", serif;
    font-size: 12pt;
    line-height: 1.6;
    padding: 0;
    margin: 0;
  }

  /* --- 3. Restore essential backgrounds --- */
  .result-card,
  .result-highlight,
  .featured-table th,
  .breakdown-table th,
  table th {
    background: #f5f5f5 !important;
  }

  .result-card__amount,
  .result-highlight .amount {
    color: #1E3A8A !important;
    font-size: 1.5rem;
    font-weight: 800;
  }

  /* --- 4. Layout: full width, no sidebar gap --- */
  .page-wrapper {
    display: block !important;
    max-width: 100% !important;
  }

  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  main,
  .main-content,
  #main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem !important;
  }

  /* --- 5. Links: show URL after text --- */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    font-weight: normal;
    word-break: break-all;
  }

  /* Don't show URL for internal nav or anchor links */
  a[href^="#"]::after,
  a[href^="javascript"]::after,
  .site-header a::after,
  .site-footer a::after,
  nav a::after {
    content: none !important;
  }

  /* --- 6. Tables: clean print layout --- */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  th, td {
    border: 1px solid #999 !important;
    padding: 6px 8px !important;
    text-align: left;
  }

  thead {
    display: table-header-group;
  }

  /* --- 7. Page break controls --- */
  h1, h2, h3, h4 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  .result-card,
  .card,
  .faq-item,
  .article-section,
  .comparison-card,
  .direct-answer,
  figure,
  img,
  .chart-container,
  canvas {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  /* --- 8. Images & charts --- */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  canvas {
    max-width: 100% !important;
  }

  /* --- 9. Header info for printed page --- */
  .page-wrapper::before {
    content: "くらしの計算機 (calclife.net) - 印刷日: " attr(data-print-date);
    display: block;
    font-size: 0.75rem;
    color: #666 !important;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }

  /* --- 10. Page margins --- */
  @page {
    margin: 15mm 10mm;
  }

  @page :first {
    margin-top: 10mm;
  }
}

/* ============================================================
   Callout blocks — human-curated content (advice / limits / basis)
   Codex/Gemini recommendation: left-border only, no gradients
   ============================================================ */
.callout{padding:1.25rem 1.5rem;margin:1.5rem 0;font-size:0.9375rem;line-height:1.75;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}
.callout h2,.callout h3{font-size:1rem;margin:0 0 0.75rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap}
.callout p{margin-bottom:0.75rem;color:var(--text-secondary)}
.callout ol,.callout ul{padding-left:1.25rem;margin:0;color:var(--text-secondary)}
.callout li{margin-bottom:0.5rem}
.callout li strong{color:var(--text-primary)}
.callout__label{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:0.02em;padding:2px 8px;border-radius:var(--radius-sm);text-transform:none}
.callout__note{margin-top:0.875rem;font-size:0.8125rem;color:var(--text-secondary);padding-top:0.75rem;border-top:1px dashed var(--border)}
.callout--advice{background:var(--warning-bg);border-color:var(--warning);border-left:3px solid var(--warning);border-right:1px solid var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.callout--advice h2,.callout--advice h3{color:var(--accent-gold-hover)}
.callout--advice .callout__label{background:var(--warning);color:#fff}
.callout--limits{background:var(--danger-bg);border-color:var(--danger);border-left:3px solid var(--danger);border-right:1px solid var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.callout--limits h2,.callout--limits h3{color:var(--danger)}

/* Calculation-basis block — utilitarian grid, no decoration */
.calc-basis-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;margin:1.5rem 0;font-size:0.9375rem}
.calc-basis-box>h2,.calc-basis-box>h3{font-size:1rem;margin:0 0 0.875rem;font-weight:700;color:var(--text-primary)}
.calc-basis-box__grid{display:grid;grid-template-columns:1fr;gap:0.5rem 1rem;row-gap:0.625rem}
@media(min-width:640px){.calc-basis-box__grid{grid-template-columns:140px 1fr}}
.calc-basis-box__grid>dt,.calc-basis-box__grid>div.kbx-key{font-weight:600;color:var(--text-secondary);font-size:0.8125rem;letter-spacing:0.01em}
.calc-basis-box__grid>dd,.calc-basis-box__grid>div.kbx-val{margin:0;color:var(--text-primary);font-size:0.9375rem;line-height:1.7}
.calc-basis-box__grid a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px}
.calc-basis-box__grid a:hover{text-decoration-color:var(--accent)}

/* ============================================================
   Affiliate CTA — 派手化 (CTR 0.6% → 2-3% 狙い 2026-04-27)
   A8 で imp 492 / click 3 が確認できたので、表示は出ている前提。
   見た目を派手にしてCTRを引き上げる。
   ============================================================ */
.affiliate-card{
  background:linear-gradient(135deg,#FFFBEB 0%,#FEF3C7 100%)!important;
  border:2px solid var(--accent-gold,#B7791F)!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
  position:relative;
}
.affiliate-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(249,115,22,.25)!important;
}
.affiliate-card::before{
  content:"無料";
  position:absolute;top:-8px;right:8px;
  background:var(--accent-gold,#B7791F);color:#fff;
  font-size:.6875rem;font-weight:700;
  padding:2px 8px;border-radius:99px;
  letter-spacing:.02em;
}
.affiliate-card__btn{
  background:linear-gradient(135deg,#F97316,#EA580C)!important;
  color:#fff!important;
  font-weight:700!important;
  padding:.5rem 1.25rem!important;
  border-radius:99px!important;
  font-size:.9375rem!important;
  letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(249,115,22,.3);
}
.affiliate-card__btn::after{content:" ▸";font-weight:900;margin-left:.25rem}
.affiliate-card:hover .affiliate-card__btn{
  box-shadow:0 4px 10px rgba(249,115,22,.4);
}

.context-cta__card{
  background:linear-gradient(135deg,#FFFBEB 0%,#FEF3C7 100%)!important;
  border:1px solid var(--border)!important;
  border-top:4px solid var(--accent-gold,#B7791F)!important;
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;
}
.context-cta__card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(249,115,22,.2)!important;
}
.context-cta__card::before{
  content:"無料";
  position:absolute;top:-8px;right:8px;
  background:var(--accent-gold,#B7791F);color:#fff;
  font-size:.6875rem;font-weight:700;
  padding:2px 8px;border-radius:99px;
}
.context-cta__btn{
  background:linear-gradient(135deg,#F97316,#EA580C)!important;
  color:#fff!important;
  font-weight:700!important;
  padding:.625rem 1.5rem!important;
  border-radius:99px!important;
  font-size:.9375rem!important;
  letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(249,115,22,.3);
}
.context-cta__btn::after{content:" ▸";font-weight:900;margin-left:.25rem}
.context-cta__card:hover .context-cta__btn{
  box-shadow:0 4px 10px rgba(249,115,22,.4);
}
.context-cta__title,.affiliate-cta__title{
  color:var(--accent)!important;
  font-weight:800!important;
}

/* ============================================================
   Mobile horizontal-overflow guard (2026-04-25, refined 2026-04-25)
   Prevent any element from forcing the viewport wider than the
   device width, while keeping table cells legible on narrow phones.
   ============================================================ */
html,body{max-width:100vw !important;overflow-x:hidden !important}
img,svg,video,iframe,canvas,pre,code{max-width:100%}
table{max-width:100%}
/* Long-word breaking for prose only — keep table cells & numeric strings intact */
h1,h2,h3,h4,p,li,figcaption,summary,blockquote,dt,dd{overflow-wrap:anywhere !important;word-break:normal !important;max-width:100% !important}
th,td{overflow-wrap:normal;word-break:keep-all;white-space:normal}
.page-wrapper,main,.container,.main-content,.affiliate-cta,.context-cta,.disclaimer,.faq-section,.article-section,.callout,.calc-basis-box,.result-card{max-width:100%}
/* Make wide data tables horizontally scrollable on small screens.
   Wraps any <table> not flagged with .no-mobile-scroll in an auto-scroll container. */
@media(max-width:600px){
  table:not(.no-mobile-scroll){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  table:not(.no-mobile-scroll) th,
  table:not(.no-mobile-scroll) td{white-space:nowrap;padding:0.5rem 0.75rem;font-size:0.8125rem}
}
@media(max-width:480px){
  h1{font-size:1.375rem !important;line-height:1.35}
  h2{font-size:1.1875rem !important;line-height:1.4}
  .breadcrumb,.last-updated,.direct-answer{max-width:100%;word-break:break-word}
  .page-wrapper{padding:1rem 0.5rem}
  /* Trim heavy padding on cards inside narrow viewports */
  .result-card,.callout,.calc-basis-box,.affiliate-cta,.context-cta__card{padding:1rem 0.875rem}
}

/* Page hero image (Top 17 pages on calclife.net) */
.page-hero{max-width:1080px;margin:0 auto 1.5rem;padding:0 1.5rem}
.page-hero img{width:100%;height:auto;display:block;border-radius:12px;background:#F7F8FA}
@media (max-width:768px){.page-hero{padding:0 1rem;margin-bottom:1rem}.page-hero img{border-radius:8px}}

/* ============================================================
   Intent-matched CTA block (injected via scripts/inject-intent-cta.js)
   Displayed prominently above the calculator result to convert
   high-intent users into affiliate clicks.
   ============================================================ */
.intent-cta{
  position:relative;
  margin:2rem 0;
  padding:1.25rem;
  background:var(--bg-secondary,#F8F9FA);
  border:1px solid var(--accent-gold);
  border-left:4px solid var(--accent-gold);
  border-radius:10px;
  box-shadow:0 3px 14px rgba(183,121,31,0.10)
}
.intent-cta__headline{
  font-family:var(--font-family);
  font-size:1.1875rem;
  font-weight:700;
  color:var(--accent);
  margin:0 0 0.375rem;
  line-height:1.4
}
.intent-cta__subhead{
  font-size:0.9375rem;
  color:var(--text-secondary);
  margin:0 0 1.125rem;
  line-height:1.6
}
.intent-cta__cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0.75rem;
  margin-bottom:0.5rem
}
.intent-cta__card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0.375rem;
  padding:0.875rem;
  background:var(--bg-card,#FFFFFF);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-primary) !important;
  text-decoration:none !important;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)
}
.intent-cta__card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-gold);
  box-shadow:0 4px 12px rgba(183,121,31,0.15);
  text-decoration:none !important
}
/* 主役カード（先頭=高優先/高単価）: 全幅・淡い強調・おすすめバッジでクリック集中 */
.intent-cta__cards .intent-cta__card:first-child{
  grid-column:1 / -1;
  padding:1.25rem 1.125rem 1.125rem;
  background:linear-gradient(180deg,#FFF6E2 0%,var(--bg-card,#FFFFFF) 100%);
  border:2px solid var(--accent-gold);
  box-shadow:0 4px 16px rgba(183,121,31,0.18)
}
.intent-cta__cards .intent-cta__card:first-child::after{
  content:"おすすめ";
  position:absolute;
  top:-0.7rem;
  left:1rem;
  background:var(--accent-gold);
  color:#FFFFFF;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.04em;
  padding:0.2rem 0.65rem;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(183,121,31,0.3)
}
.intent-cta__card-title{
  font-family:var(--font-family);
  font-size:0.9375rem;
  font-weight:700;
  color:var(--accent);
  line-height:1.4
}
.intent-cta__cards .intent-cta__card:first-child .intent-cta__card-title{
  font-size:1.125rem
}
.intent-cta__cards .intent-cta__card:first-child .intent-cta__card-desc{
  font-size:0.875rem
}
.intent-cta__card-desc{
  font-size:0.8125rem;
  color:var(--text-secondary);
  line-height:1.55;
  flex:1
}
.intent-cta__card-btn{
  display:inline-block;
  align-self:flex-start;
  margin-top:0.375rem;
  padding:0.5rem 0.875rem;
  background:var(--accent-gold);
  color:#FFFFFF !important;
  font-size:0.8125rem;
  font-weight:700;
  border-radius:6px;
  transition:background var(--transition)
}
.intent-cta__cards .intent-cta__card:first-child .intent-cta__card-btn{
  align-self:stretch;
  text-align:center;
  margin-top:0.625rem;
  padding:0.75rem 1.25rem;
  font-size:0.9375rem;
  box-shadow:0 2px 8px rgba(183,121,31,0.25)
}
.intent-cta__card:hover .intent-cta__card-btn{background:var(--accent-gold-hover)}
.intent-cta__pr{
  font-size:0.7rem;
  color:var(--text-secondary);
  margin:0.5rem 0 0;
  opacity:0.65
}
@media (max-width:600px){
  .intent-cta{padding:1rem 0.875rem;margin:1.5rem 0}
  .intent-cta__headline{font-size:1rem}
  .intent-cta__subhead{font-size:0.8438rem;margin-bottom:0.875rem}
  .intent-cta__cards{grid-template-columns:1fr;gap:0.625rem}
  .intent-cta__card{padding:0.875rem}
  .intent-cta__cards .intent-cta__card:first-child .intent-cta__card-btn{align-self:stretch;text-align:center}
}

/* ============================================================
   計算結果シェアボタン (injected via scripts/inject-share-buttons.js)
   intent-cta より控えめなトーン。X / LINE / URL コピー / 画像保存。
   ============================================================ */
.share-buttons{
  margin:1.5rem 0;
  padding:1rem 1.125rem;
  background:var(--bg-surface,#FFFFFF);
  border:1px solid var(--border,#E5E7EB);
  border-radius:10px;
  box-shadow:0 1px 3px rgba(15,23,42,0.04)
}
.share-buttons__label{
  font-family:var(--font-family);
  font-size:0.875rem;
  font-weight:700;
  color:var(--text-primary,#020617);
  margin:0 0 0.625rem;
  line-height:1.4
}
.share-buttons__row{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.share-buttons__note{
  font-size:0.75rem;
  color:var(--text-secondary,#64748B);
  margin:0.625rem 0 0;
  line-height:1.5;
  opacity:0.85
}
.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:8px 14px;
  border:1px solid transparent;
  border-radius:6px;
  font-family:inherit;
  font-size:0.8125rem;
  font-weight:600;
  line-height:1.3;
  text-decoration:none;
  color:#FFFFFF;
  background:#475569;
  cursor:pointer;
  transition:opacity .15s, transform .15s, background .15s;
  white-space:nowrap
}
.share-btn:hover{opacity:0.9;transform:translateY(-1px)}
.share-btn:active{transform:translateY(0)}
.share-btn:focus-visible{outline:2px solid var(--accent,#1E3A8A);outline-offset:2px}
.share-btn svg{flex-shrink:0;display:block}
.share-btn--x{background:#000000}
.share-btn--line{background:#06C755}
.share-btn--copy{background:#6B7280}
.share-btn--copy.is-copied{background:#10B981}
.share-btn--image{background:#7C3AED}
.share-btn--native{background:var(--accent,#1E3A8A)}
@media (max-width:600px){
  .share-buttons{padding:0.875rem 0.875rem;margin:1.25rem 0}
  .share-buttons__row{gap:6px}
  .share-btn{flex:1 1 calc(50% - 6px);padding:8px 10px;font-size:0.75rem;min-height:40px}
  .share-btn span{overflow:hidden;text-overflow:ellipsis}
}
@media print{
  .share-buttons{display:none !important}
}

/* ============================================================
   スティッキーCTAバー（engagement.js が生成・常時追従）
   ============================================================ */
.cl-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:9990;
  display:flex;align-items:center;gap:0.5rem;
  padding:0.6rem 0.75rem;
  background:linear-gradient(135deg,#1F2F46 0%,#162234 100%);
  box-shadow:0 -2px 14px rgba(0,0,0,0.22);
  transform:translateY(115%);transition:transform 0.35s ease;
}
.cl-sticky-cta.is-visible{transform:translateY(0)}
.cl-sticky-cta__link{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
  text-decoration:none !important;min-width:0;
}
.cl-sticky-cta__txt{
  color:#fff !important;font-weight:700;font-size:0.875rem;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.cl-sticky-cta__btn{
  flex:none;background:var(--accent-gold,#B7791F);color:#fff !important;
  font-weight:700;font-size:0.8125rem;white-space:nowrap;
  padding:0.5rem 0.875rem;border-radius:6px;
}
.cl-sticky-cta__x{
  flex:none;width:30px;height:30px;border:none;
  background:rgba(255,255,255,0.16);color:#fff;border-radius:50%;
  font-size:1.1rem;line-height:1;cursor:pointer;
}
.cl-sticky-cta__x:hover{background:rgba(255,255,255,0.28)}
@media (min-width:768px){
  .cl-sticky-cta{
    left:auto;right:1.5rem;bottom:1.5rem;max-width:380px;
    border-radius:14px;padding:0.875rem 1rem;
  }
  .cl-sticky-cta__txt{-webkit-line-clamp:2}
}
@media print{ .cl-sticky-cta{display:none !important} }

/* ============================================================
   視覚的バナーCTA（inject-top-banner.js が H1直後に配置）
   画像バナーより目立ち・ネイティブで高CTR
   ============================================================ */
.cta-banner{
  display:flex;align-items:center;gap:0.875rem;
  margin:1rem 0 1.5rem;padding:1rem 1.25rem;
  background:linear-gradient(135deg,#B7791F 0%,#8F5E16 100%);
  border-radius:12px;text-decoration:none !important;
  box-shadow:0 4px 14px rgba(183,121,31,0.28);
  transition:transform 0.15s,box-shadow 0.15s;
}
.cta-banner:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(183,121,31,0.4);text-decoration:none !important}
.cta-banner__icon{flex:none;font-size:2rem;line-height:1}
.cta-banner__body{flex:1;min-width:0}
.cta-banner__title{display:block;color:#fff !important;font-weight:700;font-size:1.0625rem;line-height:1.35}
.cta-banner__sub{display:block;color:rgba(255,255,255,0.92) !important;font-size:0.8125rem;margin-top:0.2rem;line-height:1.4}
.cta-banner__btn{
  flex:none;background:#fff;color:#8F5E16 !important;font-weight:700;
  font-size:0.875rem;white-space:nowrap;padding:0.6rem 1rem;border-radius:8px;
}
.cta-banner__pr{font-size:0.7rem;color:var(--text-secondary);margin:0.25rem 0 1rem;text-align:right;opacity:0.7}
@media (max-width:600px){
  .cta-banner{flex-wrap:wrap;gap:0.5rem;padding:0.875rem 1rem}
  .cta-banner__icon{font-size:1.5rem}
  .cta-banner__title{font-size:0.9375rem}
  .cta-banner__btn{width:100%;text-align:center;margin-top:0.25rem}
}

/* ============================================================
   おかえりなさいバー（engagement.js が生成・再訪時の継続率対策）
   localStorageの前回計算結果を表示。個人情報なし。
   ============================================================ */
.cl-welcome-back{
  display:flex;align-items:center;gap:0.5rem;
  margin:0 0 1rem;padding:0.6rem 0.875rem;
  background:var(--accent-light,#E8EDF4);
  border:1px solid var(--accent,#1F2F46);border-radius:8px;
}
.cl-welcome-back__link{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
  text-decoration:none !important;min-width:0;
}
.cl-welcome-back__txt{
  color:var(--accent,#1F2F46) !important;font-weight:600;font-size:0.875rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cl-welcome-back__cta{
  flex:none;color:var(--accent,#1F2F46) !important;font-weight:700;font-size:0.8125rem;
  white-space:nowrap;text-decoration:underline;
}
.cl-welcome-back__x{
  flex:none;width:26px;height:26px;border:none;background:transparent;
  color:var(--accent,#1F2F46);font-size:1.1rem;line-height:1;cursor:pointer;opacity:0.6;
}
.cl-welcome-back__x:hover{opacity:1}
@media (max-width:600px){
  .cl-welcome-back__txt{white-space:normal}
}

/* 次のお金イベント バー（engagement.js が生成・季節リピート捕捉） */
.cl-money-event{
  display:flex;align-items:center;gap:0.5rem;
  margin:0 0 1rem;padding:0.6rem 0.875rem;
  background:var(--warning-bg,#FBF7EF);
  border:1px solid var(--accent-gold,#B7791F);border-radius:8px;
}
.cl-money-event__link{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
  text-decoration:none !important;min-width:0;
}
.cl-money-event__txt{
  color:var(--accent-gold-hover,#8F5E16) !important;font-weight:700;font-size:0.875rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cl-money-event__cta{
  flex:none;color:var(--accent-gold-hover,#8F5E16) !important;font-weight:700;font-size:0.8125rem;
  white-space:nowrap;text-decoration:underline;
}
.cl-money-event__x{
  flex:none;width:26px;height:26px;border:none;background:transparent;
  color:var(--accent-gold,#B7791F);font-size:1.1rem;line-height:1;cursor:pointer;opacity:0.6;
}
.cl-money-event__x:hover{opacity:1}
@media (max-width:600px){
  .cl-money-event__txt{white-space:normal}
}

/* ============================================================
   .next-calc — engagement.js section 11
   結果セクション直後に表示される「次に試したい計算」widget。
   高intent瞬間に内部回遊を促す（pages/session底上げ）。
   ============================================================ */
.next-calc{
  margin:1.5rem 0;
  padding:1rem 1.125rem;
  background:var(--bg-secondary,#F8F9FA);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:8px;
}
.next-calc__head{
  font-size:0.9375rem;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 0.625rem;
  letter-spacing:0.01em;
}
.next-calc__head::before{
  content:"▶ ";
  color:var(--accent);
}
.next-calc__list{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.next-calc__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.75rem 0.875rem;
  background:var(--bg-card,#FFFFFF);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text-primary) !important;
  text-decoration:none !important;
  font-size:0.9375rem;
  font-weight:600;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.next-calc__item:hover{
  border-color:var(--accent);
  transform:translateX(2px);
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
  text-decoration:none !important;
}
.next-calc__arrow{
  color:var(--accent);
  font-weight:700;
  margin-left:1rem;
  flex:none;
}
@media (min-width:768px){
  .next-calc__list{flex-direction:row;flex-wrap:wrap;}
  .next-calc__item{flex:1 1 200px;}
}