:root{--color-primary:#1a73e8;--color-primary-dark:#1557b0;--color-bg:#f8f9fa;--color-surface:#ffffff;--color-text:#202124;--color-text-secondary:#5f6368;--color-border:#dadce0;--color-success:#0d904f;--color-error:#d93025;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--font-sans:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;--font-mono:"SFMono-Regular","Consolas","Liberation Mono","Menlo",monospace;--radius:8px;--radius-sm:4px;--shadow:0 1px 3px rgba(0,0,0,0.1);--shadow-md:0 4px 12px rgba(0,0,0,0.1);--header-height:56px;--max-width:1200px}[data-theme="dark"]{--color-primary:#8ab4f8;--color-primary-dark:#669df6;--color-bg:#1a1a2e;--color-surface:#16213e;--color-text:#e8eaed;--color-text-secondary:#9aa0a6;--color-border:#3c4043;--color-success:#81c995;--color-error:#f28b82;--shadow:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.3)}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--color-primary:#8ab4f8;--color-primary-dark:#669df6;--color-bg:#1a1a2e;--color-surface:#16213e;--color-text:#e8eaed;--color-text-secondary:#9aa0a6;--color-border:#3c4043;--color-success:#81c995;--color-error:#f28b82;--shadow:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.3)}}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);line-height:1.7;min-height:100vh;display:flex;flex-direction:column}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}ul,ol{list-style:none}.header{position:sticky;top:0;z-index:100;background-color:var(--color-surface);border-bottom:1px solid var(--color-border);height:var(--header-height)}.header__inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-md);display:flex;align-items:center;justify-content:space-between;height:100%}.header__logo{font-size:1.25rem;font-weight:700;color:var(--color-text);text-decoration:none;display:flex;align-items:center;gap:var(--space-sm)}.header__logo:hover{text-decoration:none;color:var(--color-primary)}.header__logo-icon{width:28px;height:28px;flex-shrink:0}.header__right{display:flex;align-items:center;gap:var(--space-md)}.nav{display:none}.nav__list{display:flex;gap:var(--space-lg)}.nav__link{color:var(--color-text-secondary);font-size:0.875rem;font-weight:500;padding:var(--space-xs) 0;transition:color 0.2s}.nav__link:hover{color:var(--color-primary);text-decoration:none}.theme-toggle{background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;padding:var(--space-xs) var(--space-sm);color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;width:36px;height:36px;transition:color 0.2s,border-color 0.2s}.theme-toggle:hover{color:var(--color-primary);border-color:var(--color-primary)}.theme-toggle__icon{width:20px;height:20px}.theme-toggle__icon--dark{display:block}.theme-toggle__icon--light{display:none}[data-theme="dark"] .theme-toggle__icon--dark{display:none}[data-theme="dark"] .theme-toggle__icon--light{display:block}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle__icon--dark{display:none}:root:not([data-theme="light"]) .theme-toggle__icon--light{display:block}}.hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:var(--space-sm);width:36px;height:36px}.hamburger__line{display:block;width:20px;height:2px;background-color:var(--color-text);border-radius:1px;transition:transform 0.3s,opacity 0.3s}.hamburger.is-active .hamburger__line:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.is-active .hamburger__line:nth-child(2){opacity:0}.hamburger.is-active .hamburger__line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-nav{display:none;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background-color:var(--color-surface);z-index:99;padding:var(--space-lg);overflow-y:auto}.mobile-nav.is-open{display:block}.mobile-nav__list{display:flex;flex-direction:column;gap:var(--space-sm)}.mobile-nav__link{display:block;padding:var(--space-md);color:var(--color-text);font-size:1rem;border-radius:var(--radius-sm);transition:background-color 0.2s}.mobile-nav__link:hover{background-color:var(--color-bg);text-decoration:none}.main{flex:1;max-width:var(--max-width);margin:0 auto;padding:var(--space-lg) var(--space-md);width:100%}.main--with-sidebar{display:block}.hero{text-align:center;padding:var(--space-2xl) 0}.hero__title{font-size:1.75rem;font-weight:700;margin-bottom:var(--space-md);color:var(--color-text)}.hero__description{font-size:1rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto}.tool-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg);margin-top:var(--space-xl)}.tool-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-lg);transition:box-shadow 0.2s,transform 0.2s;text-decoration:none;color:inherit;display:block}.tool-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none;color:inherit}.tool-card__icon{width:40px;height:40px;margin-bottom:var(--space-md);color:var(--color-primary)}.tool-card__name{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-sm);color:var(--color-text)}.tool-card__description{font-size:0.875rem;color:var(--color-text-secondary);line-height:1.6}.ad-slot{text-align:center;min-height:0;overflow:hidden;margin:var(--space-md) auto;max-width:var(--max-width)}.ad-slot:empty{display:none}.ad-slot--sidebar{display:none}.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);font-size:0.8125rem;color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.breadcrumb__item{display:flex;align-items:center;gap:var(--space-xs)}.breadcrumb__item::before{content:">";color:var(--color-text-secondary)}.breadcrumb__item:first-child::before{display:none}.breadcrumb__link{color:var(--color-text-secondary)}.breadcrumb__link:hover{color:var(--color-primary)}.breadcrumb__current{color:var(--color-text)}.tool{margin-bottom:var(--space-xl)}.tool__header{margin-bottom:var(--space-lg)}.tool__title{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-sm)}.tool__subtitle{font-size:0.9375rem;color:var(--color-text-secondary)}.tool__body{display:flex;flex-direction:column;gap:var(--space-md)}.tool__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.textarea{width:100%;min-height:200px;padding:var(--space-md);font-family:var(--font-mono);font-size:0.875rem;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);resize:vertical;line-height:1.6;transition:border-color 0.2s}.textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(26,115,232,0.15)}.textarea--output{background-color:var(--color-bg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-family:var(--font-sans);font-size:0.875rem;font-weight:500;line-height:1.5;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background-color 0.2s,color 0.2s,border-color 0.2s;white-space:nowrap}.btn--primary{background-color:var(--color-primary);color:#fff}.btn--primary:hover{background-color:var(--color-primary-dark)}.btn--secondary{background-color:transparent;color:var(--color-primary);border-color:var(--color-border)}.btn--secondary:hover{background-color:var(--color-bg)}.btn--danger{background-color:transparent;color:var(--color-error);border-color:var(--color-border)}.btn--danger:hover{background-color:rgba(217,48,37,0.05)}.btn__icon{width:16px;height:16px;flex-shrink:0}.label{display:block;font-size:0.875rem;font-weight:500;margin-bottom:var(--space-xs);color:var(--color-text)}.select{padding:var(--space-sm) var(--space-md);font-family:var(--font-sans);font-size:0.875rem;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:28px}.select:focus{outline:none;border-color:var(--color-primary)}.input{padding:var(--space-sm) var(--space-md);font-family:var(--font-sans);font-size:0.875rem;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color 0.2s}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(26,115,232,0.15)}.feedback{position:fixed;bottom:var(--space-lg);left:50%;transform:translateX(-50%) translateY(100px);background-color:var(--color-text);color:var(--color-bg);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius);font-size:0.875rem;font-weight:500;z-index:1000;opacity:0;transition:transform 0.3s,opacity 0.3s;pointer-events:none}.feedback.is-visible{transform:translateX(-50%) translateY(0);opacity:1}.feedback--success{background-color:var(--color-success);color:#fff}.feedback--error{background-color:var(--color-error);color:#fff}.error-message{color:var(--color-error);font-size:0.8125rem;margin-top:var(--space-xs)}.result{display:grid;grid-template-columns:1fr;gap:var(--space-md)}.result__item{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-md)}.result__label{font-size:0.75rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-xs)}.result__value{font-size:1.25rem;font-weight:600;font-family:var(--font-mono)}.section{margin-bottom:var(--space-2xl)}.section__title{font-size:1.25rem;font-weight:700;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:2px solid var(--color-primary)}.section__content{color:var(--color-text);line-height:1.8}.section__content p{margin-bottom:var(--space-md)}.section__content h3{font-size:1.0625rem;font-weight:600;margin-top:var(--space-lg);margin-bottom:var(--space-sm)}.section__content ul,.section__content ol{margin-bottom:var(--space-md);padding-left:var(--space-lg)}.section__content ul{list-style:disc}.section__content ol{list-style:decimal}.section__content li{margin-bottom:var(--space-xs)}.related-tools{margin-top:var(--space-2xl)}.related-tools__title{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-md)}.related-tools__list{display:grid;grid-template-columns:1fr;gap:var(--space-md)}.related-tools__link{display:block;padding:var(--space-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);transition:border-color 0.2s}.related-tools__link:hover{border-color:var(--color-primary);text-decoration:none}.page{max-width:800px;margin:0 auto}.page__title{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-lg)}.page__content{line-height:1.8}.page__content h2{font-size:1.25rem;font-weight:700;margin-top:var(--space-2xl);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}.page__content h3{font-size:1.0625rem;font-weight:600;margin-top:var(--space-lg);margin-bottom:var(--space-sm)}.page__content p{margin-bottom:var(--space-md)}.page__content ul,.page__content ol{margin-bottom:var(--space-md);padding-left:var(--space-lg)}.page__content ul{list-style:disc}.page__content ol{list-style:decimal}.page__content li{margin-bottom:var(--space-xs)}.page__updated{font-size:0.8125rem;color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.footer{background-color:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-2xl) var(--space-md);margin-top:auto}.footer__inner{max-width:var(--max-width);margin:0 auto}.footer__grid{display:grid;grid-template-columns:1fr;gap:var(--space-xl);margin-bottom:var(--space-xl)}.footer__section-title{font-size:0.875rem;font-weight:700;margin-bottom:var(--space-md);color:var(--color-text)}.footer__list{display:flex;flex-direction:column;gap:var(--space-sm)}.footer__link{color:var(--color-text-secondary);font-size:0.8125rem;transition:color 0.2s}.footer__link:hover{color:var(--color-primary);text-decoration:none}.footer__bottom{padding-top:var(--space-lg);border-top:1px solid var(--color-border);text-align:center;font-size:0.75rem;color:var(--color-text-secondary)}.faq__item{margin-bottom:var(--space-lg)}.faq__question{font-weight:600;margin-bottom:var(--space-sm)}.faq__answer{color:var(--color-text-secondary);line-height:1.7}.tabs{display:flex;gap:0;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-md)}.tabs__item{padding:var(--space-sm) var(--space-md);font-family:var(--font-sans);font-size:0.875rem;font-weight:500;color:var(--color-text-secondary);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color 0.2s,border-color 0.2s}.tabs__item:hover{color:var(--color-primary)}.tabs__item.is-active{color:var(--color-primary);border-bottom-color:var(--color-primary)}@media (min-width:768px){.hero__title{font-size:2rem}.hero__description{font-size:1.125rem}.tool-grid{grid-template-columns:repeat(2,1fr)}.result{grid-template-columns:repeat(2,1fr)}.related-tools__list{grid-template-columns:repeat(2,1fr)}.footer__grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1024px){.nav{display:block}.hamburger{display:none}.hero__title{font-size:2.25rem}.tool-grid{grid-template-columns:repeat(3,1fr)}.main--with-sidebar{display:grid;grid-template-columns:1fr 300px;gap:var(--space-xl)}.ad-slot--sidebar{display:block}.result{grid-template-columns:repeat(4,1fr)}.related-tools__list{grid-template-columns:repeat(3,1fr)}.footer__grid{grid-template-columns:repeat(4,1fr)}}.tool-container{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-lg);margin-bottom:var(--space-xl)}.tool-container h1{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-sm)}.tool-container__lead{color:var(--color-text-secondary);font-size:0.9375rem;margin-bottom:var(--space-lg)}.tool-input{margin-bottom:var(--space-md)}.tool-input label{display:block;font-size:0.875rem;font-weight:500;margin-bottom:var(--space-xs)}.tool-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-md)}.tool-output{margin-bottom:var(--space-md)}.tool-output label{display:block;font-size:0.875rem;font-weight:500;margin-bottom:var(--space-xs)}.success-message{color:var(--color-success);font-size:0.8125rem;margin-top:var(--space-xs)}.tab-group{display:flex;gap:0;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-md)}.tab-btn{padding:var(--space-sm) var(--space-md);font-family:var(--font-sans);font-size:0.875rem;font-weight:500;color:var(--color-text-secondary);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color 0.2s,border-color 0.2s}.tab-btn:hover{color:var(--color-primary)}.tab-btn--active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.tool-description{margin-top:var(--space-xl);line-height:1.8}.tool-description h2{font-size:1.125rem;font-weight:700;margin-top:var(--space-xl);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}.tool-description h3{font-size:1rem;font-weight:600;margin-top:var(--space-lg);margin-bottom:var(--space-sm)}.tool-description p{margin-bottom:var(--space-md);color:var(--color-text-secondary)}.related-tools{margin-top:var(--space-2xl)}.related-tools h2{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-md)}.related-tools ul{display:grid;grid-template-columns:1fr;gap:var(--space-sm)}.related-tools li a{display:block;padding:var(--space-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);transition:border-color 0.2s}.related-tools li a:hover{border-color:var(--color-primary);text-decoration:none}@media (min-width:768px){.related-tools ul{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.related-tools ul{grid-template-columns:repeat(3,1fr)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}