/* 共通の色と寸法。外部フォントを使わず、端末の日本語フォントで表示。 */
:root{--ink:#213b34;--muted:#73807b;--green:#247759;--line:#e4eae6;--surface:#f7f9f6}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--surface);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-size:14px;line-height:1.7}a{color:inherit;text-decoration:none}.site-header{height:84px;max-width:1328px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;letter-spacing:-.7px}.brand-icon{display:grid;place-items:center;width:33px;height:37px;background:var(--green);color:white;border-radius:10px 10px 14px 14px;font-size:23px}.brand-tag{font-size:11px;letter-spacing:0;font-weight:500;color:var(--muted);margin-left:12px}.header-note{font-size:12px;color:var(--muted)}main{max-width:1328px;padding:0 40px;margin:auto}.hero{text-align:center;padding:62px 0 35px}.eyebrow{color:var(--green);font-size:10px;letter-spacing:2.4px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:8px}.eyebrow span{width:6px;height:6px;border-radius:50%;background:#69a886}h1{font-size:42px;letter-spacing:1px;line-height:1.5;margin:16px 0}.mobile-break{display:none}.hero-description{color:var(--muted);font-size:14px;line-height:1.9}.hero-chips{display:flex;justify-content:center;gap:24px;margin-top:22px;color:#648072;font-size:11px}.tool-nav{display:flex;justify-content:center;gap:6px;margin:0 auto 35px;padding:5px;background:#eaf0e9;width:fit-content;border-radius:12px}.tool-nav a{padding:9px 20px;font-size:12px;font-weight:600;border-radius:8px}.tool-nav a:first-child{background:white;box-shadow:0 2px 5px #243c3410}.tool-nav a:hover{background:white}.tool-nav span{font-size:10px;color:#809187;margin-right:5px}.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}.card{padding:26px 24px 20px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 5px 15px #22382c03;display:flex;flex-direction:column}.card-heading{display:flex;justify-content:space-between;align-items:center}.tool-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#edf5ee;color:#367c55;font-size:25px}.tool-icon.blue{background:#edf3f9;color:#577eaa}.tool-icon.purple{background:#f1eef8;color:#8b77ad}.step{font-size:10px;letter-spacing:1.8px;color:#a1aaa5}.card h2{font-size:19px;margin:17px 0 4px;letter-spacing:-.5px}.card-description{font-size:12px;color:var(--muted);margin:0 0 24px}.card form{display:flex;flex-direction:column;flex:1;gap:15px}label{display:block;font-size:11px;font-weight:600;min-width:0}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px}.input-wrap{position:relative;margin-top:7px;min-width:0}.input-wrap span{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);pointer-events:none}input{font:inherit;font-size:17px;font-weight:600;color:var(--ink);width:100%;min-height:48px;border:1px solid #dfe6e1;border-radius:8px;padding:10px 32px 10px 13px;background:#fcfdfb;appearance:textfield}input::-webkit-inner-spin-button{appearance:none}input:focus{outline:2px solid #85bda3;outline-offset:2px}input[aria-invalid=true]{border-color:#c54c43;background:#fff7f6}.input-hint{color:var(--muted);font-size:10px;margin:0;min-height:34px;line-height:1.7}button{border:0;border-radius:8px;background:var(--green);color:white;min-height:47px;padding:11px 14px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-top:auto}button:hover{background:#195c43}button span{font-size:18px;font-weight:400}a:focus-visible,button:focus-visible{outline:3px solid #81b9a0;outline-offset:4px}.result{border-radius:10px;padding:17px 16px;min-height:160px;background:#edf6ee;color:#326a47}.result.warning{background:#fff7e5;color:#886114}.result.danger{background:#fff0ed;color:#ad4237}.result.neutral{background:#f1f4f3;color:#61746a}.result-label{font-size:11px;margin:0;font-weight:600}.result-value{font-size:38px;font-weight:750;line-height:1.35;letter-spacing:-1px;margin:4px 0}.result-value small{font-size:14px;margin-left:5px;letter-spacing:0}.result-detail{font-size:11px;margin:5px 0 0;line-height:1.8}.result-badge{display:inline-block;font-size:10px;border:1px solid currentColor;border-radius:5px;padding:1px 7px;margin-left:8px;vertical-align:middle;letter-spacing:0}.card-note{font-size:10px;color:#859089;line-height:1.8;margin:15px 0 0;min-height:36px}.grade-header,.grade-row{display:grid;grid-template-columns:64px 1fr 1fr;gap:10px;align-items:center}.grade-header{font-size:10px;color:var(--muted);margin-bottom:-10px}.grade-row{font-size:11px;font-weight:600}.grade-row .input-wrap{margin-top:0}.notice{display:flex;gap:13px;background:#eff2eb;border:1px solid #e4e8de;border-radius:12px;padding:20px 24px;margin:28px 0 48px}.notice-icon{border:1px solid #80917a;border-radius:50%;height:19px;min-width:19px;display:grid;place-items:center;font-size:12px;line-height:1;margin-top:3px;color:#6c8066}.notice h2{font-size:12px;margin:0 0 4px}.notice p{font-size:11px;color:#788273;margin:0}footer{border-top:1px solid var(--line);max-width:1248px;margin:auto;padding:23px 0 30px;display:flex;align-items:center;gap:20px;color:#8b958e;font-size:10px}.footer-brand{font-size:13px;font-weight:700;color:#5d7567}footer p{margin:0}footer>span{margin-left:auto}
/* タブレットでは横幅を確保し、スマートフォンではカードを縦に並べる。 */
@media(max-width:1100px){main{padding:0 24px}.site-header{padding:0 24px}.tools{gap:14px}.card{padding:20px 16px}.card h2{font-size:17px}.field-grid{gap:12px 8px}.grade-header,.grade-row{grid-template-columns:56px 1fr 1fr;gap:6px}footer{margin:0 24px}}
@media(max-width:850px){.tools{grid-template-columns:1fr;max-width:560px;margin:auto;gap:22px}.card{padding:25px}.card h2{font-size:21px}.card form{gap:16px}.card-description{margin-bottom:20px}.input-hint{min-height:0}.card-note{min-height:0}.result{min-height:145px}.notice{max-width:560px;margin:24px auto 36px}.brand-tag{display:none}footer{flex-wrap:wrap;gap:8px 18px}footer>span{width:100%;margin:0}.grade-header,.grade-row{grid-template-columns:80px 1fr 1fr;gap:12px}}
@media(max-width:480px){.site-header{height:70px;padding:0 20px}.brand{font-size:18px}.header-note{font-size:9px}main{padding:0 16px}.hero{padding:38px 0 25px}h1{font-size:31px}.mobile-break{display:block}.hero-description{font-size:12px}.hero-chips{gap:16px;font-size:10px}.tool-nav{width:100%;gap:0;margin-bottom:25px}.tool-nav a{flex:1;text-align:center;padding:10px 3px;font-size:10px}.tool-nav span{display:none}.card{padding:22px 18px}.notice{padding:17px}.grade-header,.grade-row{grid-template-columns:66px 1fr 1fr;gap:10px}footer{margin:0 20px}}
/* 必要点数カード内だけに適用し、ほかの計算結果のスタイルを維持。 */
#required-result .required-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 15px;padding-bottom:13px;border-bottom:1px solid currentColor}
#required-result dt{font-size:10px}
#required-result dd{margin:3px 0 0;font-size:21px;font-weight:700;overflow-wrap:anywhere}
#required-result dd small{font-size:11px;font-weight:500}
#required-result .result-value{overflow-wrap:anywhere}
#required-result .result-value small{display:inline-block;font-size:12px;letter-spacing:0}
#required-result .required-message{font-weight:700;margin-top:10px}
/* 説明・使い方・FAQも既存カードと同じ色や角丸で統一する。 */
.field-help{display:block;margin-top:6px;font-size:10px;font-weight:400;color:#596e62;line-height:1.7}
.info-section{margin:40px auto 0}
.info-section h2{font-size:22px;margin:0 0 12px}
.section-intro{color:#596e62;font-size:13px;margin:0 0 20px;max-width:760px}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.info-card{background:white;border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}
.info-card h3{font-size:15px;margin:0 0 10px;line-height:1.8}
.info-card p{font-size:12px;color:#596e62;margin:0;line-height:1.9}
.info-card a{display:inline-block;color:var(--green);font-size:12px;font-weight:600;padding:12px 0;margin-top:8px;text-decoration:underline;text-underline-offset:4px}
.usage-list{padding:0;list-style:none;margin:0}
.step-number{display:block;font-size:11px;letter-spacing:1.5px;color:var(--green);font-weight:700;margin-bottom:12px}
.faq details{background:white;border:1px solid var(--line);border-radius:12px;margin-top:12px}
.faq summary{padding:18px 22px;cursor:pointer;font-size:14px;font-weight:600;border-radius:12px}
.faq summary:hover{background:#edf5ee}
.faq summary:focus-visible{outline:3px solid #81b9a0;outline-offset:3px}
.faq details p{margin:0;padding:0 22px 20px;color:#596e62;font-size:13px;line-height:1.9}
#required-result .required-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:850px){.info-section{max-width:560px}.info-grid{grid-template-columns:1fr;gap:14px}}
@media(max-width:480px){.info-section h2{font-size:20px}.info-card{padding:20px}.faq summary{padding:16px;font-size:13px}.faq details p{padding:0 16px 16px}#required-result .required-summary{grid-template-columns:1fr;gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}