:root {
  --cream: #f7f2e8;
  --paper: #fffdf8;
  --ink: #173f3a;
  --ink-2: #28524c;
  --text: #263b38;
  --muted: #677875;
  --line: #ded9ce;
  --orange: #c65332;
  --orange-dark: #b84e30;
  --gold: #f0bd61;
  --sage: #8fb5a4;
  --blue: #a9c7d7;
  --shadow: 0 18px 50px rgba(27, 61, 56, .1);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; line-height: 1.75; letter-spacing: .015em; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid rgba(223, 107, 69, .45); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid rgba(23,63,58,.09); background: rgba(255,253,248,.93); backdrop-filter: blur(14px); }
.header-inner { max-width: 1200px; height: 76px; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: var(--gold); background: var(--ink); box-shadow: 0 5px 12px rgba(23,63,58,.18); }
.brand > span:last-child { display: grid; line-height: 1.15; }
.brand strong { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 21px; letter-spacing: .1em; color: var(--ink); }
.brand small { margin-top: 4px; font-size: 9px; letter-spacing: .12em; color: var(--muted); }
.global-nav { display: flex; align-items: center; gap: 25px; }
.global-nav a { font-size: 13px; font-weight: 700; color: #3d5551; transition: color .2s; }
.global-nav a:hover { color: var(--orange); }
.global-nav .nav-search { display: flex; align-items: center; gap: 7px; padding-left: 18px; border-left: 1px solid var(--line); }
.menu-button { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); place-items: center; cursor: pointer; }

.home-hero { position: relative; overflow: hidden; min-height: 660px; padding: 82px max(6vw, 28px) 88px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); align-items: center; gap: 60px; background: radial-gradient(circle at 77% 28%, rgba(240,189,97,.2), transparent 29%), linear-gradient(135deg, #f8f3e9 0%, #f4eee1 63%, #edf1e9 100%); }
.home-hero::before { content: ""; position: absolute; width: 360px; height: 360px; left: -190px; top: 70px; border: 1px solid rgba(23,63,58,.08); border-radius: 50%; box-shadow: 0 0 0 50px rgba(23,63,58,.018), 0 0 0 105px rgba(23,63,58,.012); }
.hero-text { position: relative; z-index: 2; max-width: 620px; justify-self: end; }
.eyebrow { margin: 0 0 12px; color: var(--orange-dark); font-size: 12px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.hero-text > .eyebrow::before { content: ""; display: inline-block; width: 30px; height: 1px; margin: 0 10px 4px 0; background: var(--orange); }
.hero-text h1 { margin: 0; color: var(--ink); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(48px, 4.9vw, 74px); font-weight: 600; line-height: 1.22; letter-spacing: .02em; }
.hero-text h1 em { position: relative; color: var(--orange-dark); font-style: normal; }
.hero-text h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 9px; z-index: -1; border-radius: 50%; background: rgba(240,189,97,.34); }
.hero-lead { margin: 24px 0 23px; color: #49615d; font-size: 17px; font-weight: 600; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.button { min-height: 50px; padding: 12px 20px; border: 1px solid transparent; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: white; background: var(--orange); box-shadow: 0 10px 22px rgba(184,78,48,.22); }
.button.primary:hover { background: var(--orange-dark); }
.button.ghost { border-color: #c9cfc7; color: var(--ink); background: rgba(255,255,255,.55); }
.privacy-note { margin: 13px 0 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }

.article-search { position: relative; }
.article-search.compact { max-width: 525px; }
.search-field { min-height: 56px; padding: 0 17px; display: flex; align-items: center; gap: 11px; border: 1px solid #d9d3c7; border-radius: 14px; background: white; box-shadow: 0 12px 30px rgba(28,63,56,.08); color: var(--orange); }
.search-field input { width: 100%; height: 54px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 14px; }
.search-field input::placeholder { color: #899490; }
.search-results { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; max-height: 390px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow); }
.search-results a { padding: 11px 12px; display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; border-radius: 10px; }
.search-results a:hover { background: var(--cream); }
.search-results strong { font-size: 13px; }
.search-results span { grid-column: 1; color: var(--muted); font-size: 11px; }
.search-results svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--orange); }
.search-results p { padding: 16px; margin: 0; font-size: 13px; color: var(--muted); }

.hero-visual { position: relative; width: min(500px, 100%); height: 465px; justify-self: start; }
.hero-visual::before { content: ""; position: absolute; inset: 36px 13px 30px 30px; border: 1px solid rgba(23,63,58,.1); border-radius: 45% 55% 48% 52%; transform: rotate(-5deg); }
.visual-card { position: absolute; border: 8px solid #fff; background: #fff; box-shadow: 0 24px 48px rgba(30,66,58,.16); }
.visual-card small { position: absolute; left: 10px; bottom: 9px; padding: 3px 8px; border-radius: 99px; color: var(--ink); background: rgba(255,255,255,.9); font-size: 10px; font-weight: 800; }
.old-photo { z-index: 2; left: 12px; top: 36px; width: 220px; height: 265px; transform: rotate(-7deg); background: #cbbd9f; }
.old-photo .tape { position: absolute; z-index: 3; top: -19px; left: 75px; width: 72px; height: 27px; transform: rotate(6deg); background: rgba(238,217,164,.74); }
.portrait-placeholder { position: absolute; inset: 20px 18px 38px; overflow: hidden; background: linear-gradient(145deg,#9c9079,#ded0ae); filter: sepia(.42); }
.portrait-placeholder::before { content: ""; position: absolute; width: 78px; height: 78px; left: 48px; top: 36px; border-radius: 45% 48% 52% 45%; background: #5d5a4e; }
.portrait-placeholder::after { content: ""; position: absolute; width: 135px; height: 120px; left: 18px; bottom: -42px; border-radius: 50% 50% 20% 20%; background: #67675b; }
.portrait-placeholder span:first-child { position: absolute; z-index: 2; width: 65px; height: 2px; left: 62px; top: 85px; transform: rotate(-35deg); background: rgba(250,245,225,.4); }
.portrait-placeholder span:last-child { position: absolute; z-index: 2; width: 1px; height: 160px; left: 34px; top: 20px; transform: rotate(12deg); background: rgba(250,245,225,.45); }
.product-photo { z-index: 3; right: 8px; top: 5px; width: 208px; height: 210px; transform: rotate(6deg); background: linear-gradient(150deg,#dceade,#f4ead0); }
.bottle { position: absolute; left: 69px; top: 39px; width: 65px; height: 118px; border-radius: 11px 11px 21px 21px; background: linear-gradient(90deg,#345e56,#709385 55%,#284d46); box-shadow: 0 18px 15px rgba(23,63,58,.2); }
.bottle::before { content: ""; position: absolute; width: 30px; height: 22px; left: 17px; top: -19px; border-radius: 4px 4px 0 0; background: #d8b66e; }
.bottle::after { content: "NAO"; position: absolute; left: 9px; right: 9px; top: 50px; padding: 7px 0; text-align: center; color: var(--ink); background: #f0dfb7; font: 700 10px serif; letter-spacing: .1em; }
.shine { position: absolute; width: 12px; height: 12px; right: 23px; top: 27px; border-radius: 50%; background: var(--gold); box-shadow: 16px 9px 0 -4px var(--orange); }
.video-frame { z-index: 4; right: 55px; bottom: 15px; width: 260px; height: 185px; transform: rotate(-2deg); background: #294b46; }
.video-person { position: absolute; inset: 13px 13px 42px; overflow: hidden; background: linear-gradient(135deg,#8cb0a0,#d5c494); }
.video-person::before { content: ""; position: absolute; width: 55px; height: 55px; left: 77px; top: 18px; border-radius: 50%; background: #536d61; }
.video-person::after { content: ""; position: absolute; width: 112px; height: 80px; left: 48px; bottom: -31px; border-radius: 55px 55px 0 0; background: #3d5a53; }
.caption-lines { position: absolute; left: 34px; right: 34px; bottom: 50px; z-index: 3; display: grid; place-items: center; gap: 5px; }
.caption-lines i { width: 77%; height: 5px; border-radius: 5px; background: rgba(255,255,255,.88); }
.caption-lines i:last-child { width: 54%; }
.visual-thread { position: absolute; z-index: 1; width: 250px; height: 130px; left: 90px; top: 205px; border: 2px dashed rgba(223,107,69,.35); border-width: 0 0 2px 2px; border-radius: 0 0 0 80px; transform: rotate(-8deg); }
.visual-spark { position: absolute; color: var(--orange); font-size: 27px; }
.visual-spark.one { right: 10px; top: 235px; }
.visual-spark.two { left: 15px; bottom: 72px; color: var(--gold); }

.home-section { max-width: 1160px; margin: 0 auto; padding: 100px 28px; }
.diagnosis-section { position: relative; z-index: 5; margin-top: -38px; padding-top: 0; padding-bottom: 68px; }
.quick-diagnosis { padding: 32px 35px 30px; border: 1px solid #e5dfd3; border-radius: 24px; background: white; box-shadow: var(--shadow); }
.diagnosis-heading { display: grid; grid-template-columns: 140px 1fr; align-items: end; column-gap: 20px; }
.diagnosis-heading > span { grid-row: 1 / span 2; align-self: center; color: var(--orange-dark); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.diagnosis-heading h2 { margin: 0; color: var(--ink); font-family: "Yu Mincho", serif; font-size: 26px; }
.diagnosis-heading p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.diagnosis-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 25px 0 17px; }
.diagnosis-options button { min-height: 82px; padding: 13px; display: flex; align-items: center; gap: 11px; text-align: left; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: #fff; cursor: pointer; transition: border .2s, background .2s, transform .2s; }
.diagnosis-options button:hover, .diagnosis-options button.selected { border-color: var(--sage); background: #f0f6f1; transform: translateY(-2px); }
.option-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); background: #edf3ee; }
.diagnosis-options strong, .diagnosis-options small { display: block; }
.diagnosis-options strong { font-size: 13px; }
.diagnosis-options small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.diagnosis-next { padding-top: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; border-top: 1px solid #eee9df; }
.diagnosis-next p { margin: 0; color: var(--muted); font-size: 12px; }
.diagnosis-next a { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-dark); font-size: 13px; font-weight: 800; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-dark); font-size: 13px; font-weight: 800; }

.section-heading { max-width: 690px; margin-bottom: 36px; }
.section-heading.row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.section-heading h2 { margin: 0 0 8px; color: var(--ink); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(31px, 3.3vw, 44px); line-height: 1.4; letter-spacing: .03em; }
.section-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.category-card { min-height: 240px; padding: 25px 22px; display: flex; flex-direction: column; border: 1px solid transparent; border-radius: var(--radius); transition: transform .2s, box-shadow .2s; }
.category-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.category-card.repair { background: #edf4f5; border-color: #d5e3e6; }
.category-card.edit { background: #eef5ef; border-color: #dbe7db; }
.category-card.purpose { background: #fbf1e9; border-color: #edddcf; }
.category-card.video { background: #f3eff7; border-color: #dfd8e7; }
.category-icon { width: 50px; height: 50px; margin-bottom: 22px; display: grid; place-items: center; border-radius: 15px; color: white; background: var(--ink); }
.category-card > strong { color: var(--ink); font-family: "Yu Mincho", serif; font-size: 20px; }
.category-card > span:not(.category-icon) { margin-top: 7px; color: var(--muted); font-size: 12px; }
.category-card b { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 6px; color: var(--orange-dark); font-size: 12px; }
.problem-chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.problem-chips a { padding: 8px 11px 8px 14px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 99px; color: #485e5a; background: white; font-size: 11px; font-weight: 700; }

.featured-section { max-width: none; padding-left: max(calc((100vw - 1104px)/2), 28px); padding-right: max(calc((100vw - 1104px)/2), 28px); background: var(--cream); }
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.featured-card { overflow: hidden; border: 1px solid #ded8cc; border-radius: var(--radius); background: white; }
.featured-art { position: relative; height: 165px; display: grid; place-items: center; color: white; overflow: hidden; }
.featured-art::before, .featured-art::after { content: ""; position: absolute; border-radius: 50%; }
.featured-art::before { width: 160px; height: 160px; left: -40px; top: 55px; background: rgba(255,255,255,.15); }
.featured-art::after { width: 95px; height: 95px; right: 20px; top: -35px; border: 1px solid rgba(255,255,255,.3); }
.featured-card.blue .featured-art { background: #5f8998; }
.featured-card.green .featured-art { background: #648b75; }
.featured-card.orange .featured-art { background: #bc7356; }
.featured-art svg { position: relative; z-index: 2; }
.featured-art span { position: absolute; width: 110px; height: 8px; border-radius: 8px; background: rgba(255,255,255,.2); transform: rotate(-18deg); }
.featured-art span:last-child { width: 64px; margin-top: 45px; margin-left: 70px; }
.featured-card > div:last-child { padding: 24px; }
.featured-card p { margin: 0 0 7px; color: var(--orange-dark); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.featured-card h3 { margin: 0 0 11px; color: var(--ink); font-family: "Yu Mincho", serif; font-size: 18px; line-height: 1.65; }
.featured-card h3 + span { display: block; color: var(--muted); font-size: 12px; }
.featured-card a { margin-top: 17px; display: flex; align-items: center; gap: 5px; color: var(--orange-dark); font-size: 12px; font-weight: 800; }

.tools-section { padding-top: 105px; }
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.tool-card { padding: 22px 23px; display: flex; gap: 18px; border: 1px solid var(--line); border-radius: 17px; background: white; transition: border .2s, transform .2s, box-shadow .2s; }
.tool-card:hover { border-color: var(--sage); transform: translateY(-3px); box-shadow: 0 15px 30px rgba(23,63,58,.08); }
.tool-card > span { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--ink); background: #eef4ef; }
.tool-card strong { color: var(--ink); font-size: 15px; }
.tool-card p { margin: 5px 0 10px; color: var(--muted); font-size: 11px; }
.tool-card b { display: flex; align-items: center; gap: 4px; color: var(--orange-dark); font-size: 11px; }

.trust-section { max-width: none; padding-left: max(calc((100vw - 1104px)/2), 28px); padding-right: max(calc((100vw - 1104px)/2), 28px); display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; color: white; background: var(--ink); }
.trust-copy h2 { margin: 0 0 20px; color: white; font-family: "Yu Mincho", serif; font-size: clamp(28px, 3vw, 40px); line-height: 1.55; }
.trust-copy > p:not(.eyebrow) { color: #c8d7d3; font-size: 13px; }
.trust-copy .eyebrow, .trust-copy .text-link { color: #f4bd72; }
.trust-points { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 10px; }
.trust-points > div { min-height: 195px; padding: 22px 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.04); }
.trust-points svg { margin-bottom: 24px; color: var(--gold); }
.trust-points strong { display: block; font-size: 13px; }
.trust-points p { margin: 7px 0 0; color: #adbfbb; font-size: 10px; }

.site-footer { color: #45605b; background: #ece9df; }
.footer-inner { max-width: 1104px; margin: auto; padding: 70px 28px 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.footer-intro strong { color: var(--ink); font-family: "Yu Mincho", serif; font-size: 25px; letter-spacing: .1em; }
.footer-intro p { max-width: 390px; color: var(--muted); font-size: 12px; }
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.footer-links div { display: grid; align-content: start; gap: 9px; }
.footer-links b { margin-bottom: 6px; color: var(--ink); font-size: 12px; }
.footer-links a { font-size: 11px; }
.footer-links a:hover { color: var(--orange-dark); }
.footer-bottom { padding: 18px max(calc((100vw - 1104px)/2), 28px); border-top: 1px solid #d7d2c7; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-bottom p { margin: 0; max-width: 700px; font-size: 9px; }
.footer-bottom small { font-size: 9px; white-space: nowrap; }

@media (max-width: 980px) {
  .global-nav { gap: 13px; }
  .global-nav a { font-size: 11px; }
  .home-hero { grid-template-columns: 1fr .82fr; gap: 28px; }
  .hero-visual { transform: scale(.84); transform-origin: left center; }
  .diagnosis-options { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: 1fr 1fr; }
  .featured-card:last-child { display: none; }
  .trust-section { grid-template-columns: 1fr; gap: 45px; }
}

@media (max-width: 760px) {
  body.nav-open { overflow: hidden; }
  .header-inner { height: 65px; padding: 0 18px; }
  .brand strong { font-size: 19px; }
  .brand small { display: none; }
  .menu-button { display: grid; }
  .global-nav { position: fixed; inset: 65px 0 auto; max-height: 0; overflow: hidden; padding: 0 22px; display: grid; gap: 0; background: var(--paper); opacity: 0; transition: max-height .28s, opacity .2s, padding .28s; }
  .global-nav.is-open { max-height: calc(100vh - 65px); padding-top: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--line); opacity: 1; box-shadow: 0 20px 40px rgba(23,63,58,.12); }
  .global-nav a { padding: 13px 2px; border-bottom: 1px solid #eee9df; font-size: 14px; }
  .global-nav .nav-search { padding-left: 2px; border-left: 0; }
  .home-hero { min-height: auto; padding: 58px 20px 62px; grid-template-columns: 1fr; gap: 38px; }
  .hero-text { justify-self: stretch; }
  .hero-text h1 { font-size: clamp(43px, 13vw, 60px); }
  .hero-lead { font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .hero-visual { width: 100%; height: 350px; transform: scale(.78); transform-origin: top center; margin-bottom: -75px; }
  .diagnosis-section { margin-top: -18px; padding: 0 15px 52px; }
  .quick-diagnosis { padding: 25px 18px; border-radius: 19px; }
  .diagnosis-heading { display: block; }
  .diagnosis-heading > span { display: block; margin-bottom: 5px; }
  .diagnosis-heading h2 { font-size: 22px; }
  .diagnosis-options { grid-template-columns: 1fr; }
  .diagnosis-options button { min-height: 70px; }
  .diagnosis-next { align-items: flex-start; flex-direction: column; gap: 5px; }
  .home-section { padding: 76px 20px; }
  .section-heading.row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .section-heading h2 { font-size: 31px; }
  .category-grid, .featured-grid, .tools-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 215px; }
  .featured-card:last-child { display: block; }
  .featured-section, .trust-section { padding-left: 20px; padding-right: 20px; }
  .tool-card { padding: 18px; }
  .trust-points { grid-template-columns: 1fr; }
  .trust-points > div { min-height: 0; }
  .trust-points svg { margin-bottom: 13px; }
  .footer-inner { padding: 55px 20px 40px; grid-template-columns: 1fr; gap: 35px; }
  .footer-bottom { padding: 18px 20px; align-items: flex-start; flex-direction: column; gap: 9px; }
}

@media (max-width: 380px) {
  .hero-text h1 { font-size: 41px; }
  .hero-visual { transform: scale(.69); margin-left: -18px; }
  .category-card { padding: 21px 19px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Editorial pages */
.breadcrumb { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 8px; color: #7a8985; font-size: 10px; white-space: nowrap; overflow: hidden; }
.breadcrumb a { color: #4e6964; }
.breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; }
.article-main { background: #fffdf8; }
.article-main > .breadcrumb { padding: 24px 28px 0; }
.article-header { max-width: 900px; margin: 0 auto; padding: 58px 28px 48px; text-align: center; }
.article-header h1 { margin: 0; color: var(--ink); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(34px, 4.5vw, 54px); font-weight: 600; line-height: 1.45; letter-spacing: .02em; }
.article-header > p:not(.eyebrow) { max-width: 720px; margin: 20px auto 0; color: var(--muted); font-size: 14px; }
.promo-note { margin-top: 18px; display: inline-block; padding: 5px 10px; border-radius: 99px; color: #6a6255; background: #f2eee5; font-size: 9px; }
.article-layout { max-width: 1100px; margin: 0 auto; padding: 0 28px 100px; display: grid; grid-template-columns: minmax(0, 740px) 230px; gap: 70px; align-items: start; }
.article-body { min-width: 0; overflow-wrap: anywhere; }
.article-body > section { margin-top: 70px; }
.article-body > section:first-child { margin-top: 0; }
.article-body h2 { margin: 0 0 25px; padding-bottom: 14px; border-bottom: 1px solid #e5dfd3; color: var(--ink); font-family: "Yu Mincho", serif; font-size: 27px; line-height: 1.55; }
.article-body h3 { color: var(--ink); }
.article-body p { font-size: 14px; line-height: 2; }
.quick-answer { padding: 30px 32px; border: 1px solid #dfd8c9; border-radius: 19px; background: linear-gradient(145deg,#faf4e7,#f1f6ef); box-shadow: 0 14px 30px rgba(23,63,58,.07); }
.quick-answer.has-options { padding: 22px; background: #f6f8f4; box-shadow: none; }
.quick-answer > span { display: flex; align-items: center; gap: 8px; color: var(--orange-dark); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.quick-answer > .quick-answer-only { margin: 11px 0 0; color: #2b4540; font-family: "Yu Mincho", serif; font-size: 17px; font-weight: 600; line-height: 2; }
.judgement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.judgement-grid > div { padding: 24px; border-radius: 16px; }
.judgement-grid .can { border: 1px solid #d5e5db; background: #eff6f1; }
.judgement-grid .hard { border: 1px solid #ecdcd2; background: #fbf2ec; }
.judgement-grid h3 { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.judgement-grid .can h3 { color: #356653; }
.judgement-grid .hard h3 { color: #9f573d; }
.judgement-grid ul { margin: 0; padding-left: 20px; }
.judgement-grid li { margin: 6px 0; font-size: 12px; }
.step-list { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.step-list > li { padding: 22px 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; border-bottom: 1px dashed #ddd8cf; }
.step-list > li > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: white; background: var(--ink); font: 800 11px system-ui; }
.step-list > li > div { min-width: 0; }
.step-list h3 { margin: 0 0 6px; font-size: 16px; }
.step-list p { margin: 0; color: var(--muted); font-size: 13px; }
.software-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.software-grid>div{min-width:0;padding:19px;display:grid;gap:5px;border:1px solid #dedbd2;border-radius:14px;background:#fff}.software-grid strong{color:var(--ink);font-size:16px}.software-grid span,.software-grid small{color:#6a7773;font-size:12px}.software-grid p{margin:5px 0;line-height:1.75}.check-list-plain,.finish-checks,.step-actions{margin:18px 0 0;padding:0;display:grid;gap:9px;list-style:none}.check-list-plain li,.finish-checks li{display:flex;align-items:flex-start;gap:9px;color:#3f5752;line-height:1.75}.check-list-plain svg,.finish-checks svg{flex:0 0 auto;margin-top:5px;color:#4f8a70}.step-actions{margin-top:13px;padding-left:19px;list-style:disc}.step-actions>li{display:list-item;padding:0 0 0 3px;border:0;grid-template-columns:none;gap:0;color:#425651;font-size:13px;line-height:1.8}.step-tip{margin-top:15px!important;padding:13px 15px;border-radius:10px;color:#65523c!important;background:#fff5e7}.operation-figure{max-width:100%;margin:22px 0 4px;overflow:hidden}.operation-figure img{width:100%;height:auto;border:1px solid #dfd9ce;border-radius:16px;background:#f6f1e7}.operation-figure figcaption{margin-top:9px;color:#6c7471;font-size:12px;line-height:1.7;overflow-wrap:anywhere}.trouble-list{display:grid;gap:10px}.trouble-list details{padding:16px 18px;border:1px solid #dfdbd1;border-radius:12px;background:#fff}.trouble-list summary{color:var(--ink);font-weight:800;cursor:pointer}.trouble-list p{margin:10px 0 0}.official-sources{margin-top:30px;padding-top:20px;border-top:1px solid #e6e0d6}.official-sources strong{color:var(--ink);font-size:13px}.official-sources ul{margin:9px 0 0;padding-left:20px}.official-sources a{color:#346e64;text-decoration:underline;overflow-wrap:anywhere}
.caution { margin-top: 22px; padding: 18px 20px; display: flex; gap: 14px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: #f9f5eb; }
.caution > svg { flex: 0 0 auto; margin-top: 3px; color: #a16f24; }
.caution strong { color: #785a2d; font-size: 12px; }
.caution p { margin: 3px 0 0; color: #6d6658; font-size: 11px; line-height: 1.85; }
.decision-box { margin: 70px 0 0; padding: 36px; border-radius: 22px; color: white; background: linear-gradient(135deg,#173f3a,#28594f); box-shadow: 0 20px 46px rgba(23,63,58,.17); }
.decision-box.neutral { color: var(--text); border: 1px solid var(--line); background: #f3f1e9; box-shadow: none; }
.decision-label { color: #f4c77c; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.decision-label small { margin-left: 6px; padding: 2px 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 8px; }
.decision-box h2 { margin: 10px 0 13px; padding: 0; border: 0; color: white; font-size: 24px; }
.decision-box.neutral h2 { color: var(--ink); }
.decision-box p { margin: 0; color: #d4e1de; font-size: 13px; }
.decision-box.neutral p { color: var(--muted); }
.decision-box .cta-support { margin-top: 12px; color: #abc2bc; font-size: 11px; }
.decision-box .cta-provider-note { margin-top: 12px; color: #d4e1de; font-size: 12px; }
.cta-actions { margin-top: 25px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.decision-box .button.primary { background: var(--orange); }
.secondary-link { color: #f2c989; font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.request-list { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; list-style: none; }
.request-list li { padding: 12px 14px; display: flex; align-items: center; gap: 9px; border: 1px solid #e4dfd5; border-radius: 11px; background: white; font-size: 12px; }
.request-list svg { flex: 0 0 auto; color: #52806d; }
.inline-tool { margin-top: 18px; padding: 17px 18px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 13px; border: 1px solid #d7e4da; border-radius: 14px; background: #f0f6f1; }
.inline-tool > svg:first-child { color: var(--ink); }
.inline-tool > span { min-width: 0; }
.inline-tool strong, .inline-tool small { display: block; }
.inline-tool strong { color: var(--ink); font-size: 13px; }
.inline-tool small { color: var(--muted); font-size: 9px; }
.inline-tool > svg:last-child { color: var(--orange); }
.faq-section details { border-bottom: 1px solid var(--line); }
.faq-section summary { padding: 19px 4px; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; }
.faq-section details p { margin: 0; padding: 0 4px 20px; color: var(--muted); font-size: 12px; }
.article-sidebar { position: sticky; top: 100px; display: grid; gap: 13px; }
.side-box { padding: 20px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.side-box strong { margin-bottom: 7px; color: var(--ink); font-size: 12px; }
.side-box a, .side-box span { color: var(--muted); font-size: 10px; }
.side-diagnosis { padding: 21px; display: grid; border-radius: 15px; color: white; background: var(--orange); }
.side-diagnosis svg { margin-bottom: 20px; }
.side-diagnosis strong { font-family: "Yu Mincho", serif; font-size: 18px; line-height: 1.5; }
.side-diagnosis span { margin-top: 8px; font-size: 9px; opacity: .8; }
.related-section { max-width: none; padding: 80px max(calc((100vw - 1044px)/2), 28px); background: var(--cream); }
.related-section > div:first-child h2 { margin: 0 0 28px; color: var(--ink); font-family: "Yu Mincho", serif; font-size: 30px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.related-grid a { padding: 22px; display: flex; flex-direction: column; border: 1px solid #e0dace; border-radius: 16px; background: white; }
.related-grid span { color: var(--orange-dark); font-size: 9px; font-weight: 800; }
.related-grid strong { margin: 7px 0 8px; color: var(--ink); font-family: "Yu Mincho", serif; font-size: 15px; line-height: 1.6; }
.related-grid p { margin: 0; color: var(--muted); font-size: 10px; }
.related-grid b { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 5px; color: var(--orange-dark); font-size: 10px; }

/* Hub and utility pages */
.hub-main { background: var(--paper); }
.hub-hero { padding: 25px max(calc((100vw - 1000px)/2), 28px) 85px; text-align: center; background: linear-gradient(180deg,#f7f2e8,#fffdf8); }
.hub-hero .breadcrumb { margin-bottom: 60px; text-align: left; }
.hub-hero h1 { max-width: 850px; margin: 0 auto; color: var(--ink); font-family: "Yu Mincho", serif; font-size: clamp(38px, 5vw, 59px); font-weight: 600; line-height: 1.45; }
.hub-hero > p:not(.eyebrow) { max-width: 720px; margin: 22px auto 28px; color: var(--muted); font-size: 14px; }
.hub-help-first { max-width: 720px; margin: 34px auto 16px; padding: 24px; border: 1px solid #d7e2da; border-radius: 18px; text-align: left; background: #fff; box-shadow: 0 15px 34px rgba(23,63,58,.08); }
.hub-help-first > span { color: var(--orange-dark); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.hub-help-first h2 { margin: 6px 0 0; color: var(--ink); font-family: system-ui,-apple-system,"Segoe UI",sans-serif; font-size: 23px; line-height: 1.55; }
.hub-help-first p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.hub-help-first > div { margin-top: 17px; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.hub-help-first .button { display: inline-flex; align-items: center; gap: 8px; }
.hub-help-first .button small { margin-left: 3px; padding: 2px 5px; border-radius: 4px; color: #fff; background: rgba(0,0,0,.18); font-size: 8px; }
.hub-help-first > div > a:not(.button), .hub-diagnosis-link { color: #346e64; font-size: 12px; font-weight: 800; text-decoration: underline; }
.hub-diagnosis-link { width: max-content; max-width: 100%; margin: 14px auto 0; display: flex; align-items: center; gap: 6px; }
.hub-points { max-width: 1050px; margin: -36px auto 0; padding: 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hub-points > div { padding: 25px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 12px 30px rgba(23,63,58,.06); }
.hub-points span { color: var(--orange); font-size: 9px; font-weight: 900; }
.hub-points strong { margin-top: 12px; display: block; color: var(--ink); font-family: "Yu Mincho", serif; font-size: 17px; }
.hub-points p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.hub-list { max-width: 1120px; margin: 0 auto; padding: 100px 28px; }
.article-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.article-card-grid a { min-height: 260px; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 17px; background: white; transition: transform .2s, box-shadow .2s; }
.article-card-grid a:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.article-card-grid span { color: var(--orange-dark); font-size: 9px; font-weight: 800; }
.article-card-grid h2 { margin: 10px 0; color: var(--ink); font-family: "Yu Mincho", serif; font-size: 17px; line-height: 1.65; }
.article-card-grid p { margin: 0; color: var(--muted); font-size: 10px; }
.article-card-grid b { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 5px; color: var(--orange-dark); font-size: 10px; }
.static-main, .search-page, .not-found { max-width: 900px; min-height: 60vh; margin: 0 auto; padding: 32px 28px 100px; }
.static-main > header, .search-page > header { padding: 70px 0 48px; }
.static-main h1, .search-page h1, .not-found h1 { margin: 0; color: var(--ink); font-family: "Yu Mincho", serif; font-size: clamp(36px, 5vw, 52px); }
.static-main header > p:last-child, .search-page header > p:last-child { color: var(--muted); font-size: 14px; }
.static-main article { max-width: 720px; }
.static-main article h2 { margin-top: 50px; padding-bottom: 11px; border-bottom: 1px solid var(--line); color: var(--ink); font: 600 24px "Yu Mincho", serif; }
.static-main article p { font-size: 14px; line-height: 2.1; }
.search-page .article-search { max-width: 760px; }
.search-page .search-results { position: static; margin-top: 12px; max-height: none; }
.search-hints { margin-top: 25px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.search-hints strong { margin-right: 8px; color: var(--ink); }
.search-hints span { padding: 6px 10px; border-radius: 99px; background: var(--cream); }
.not-found { padding-top: 110px; text-align: center; }
.not-found > p:first-child { margin: 0; color: var(--orange); font-size: 14px; font-weight: 900; letter-spacing: .2em; }
.not-found > p { color: var(--muted); }
.not-found .button { margin: 20px 10px; }

@media (max-width: 980px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .article-sidebar { display: none; }
  .article-card-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .article-main > .breadcrumb { padding-left: 20px; padding-right: 20px; }
  .article-header { padding: 43px 20px 36px; text-align: left; }
  .article-header h1 { font-size: 33px; }
  .article-layout { padding: 0 20px 75px; }
  .article-body > section { margin-top: 55px; }
  .article-body h2 { font-size: 24px; }
  .quick-answer { padding: 24px 21px; }
  .quick-answer > .quick-answer-only { font-size: 16px; }
  .judgement-grid { grid-template-columns: 1fr; }
  .step-list > li { grid-template-columns: 39px minmax(0, 1fr); gap: 13px; }
  .step-list > li > span { width: 36px; height: 36px; border-radius: 11px; }
  .operation-figure { width: calc(100vw - 40px); max-width: none; margin-left: -52px; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .operation-figure img { width: 720px; max-width: none; }
  .operation-figure figcaption { position: sticky; left: 0; width: calc(100vw - 40px); padding-right: 12px; background: var(--paper); }
  .decision-box { padding: 28px 21px; }
  .decision-box h2 { font-size: 22px; }
  .cta-actions { align-items: stretch; flex-direction: column; }
  .cta-actions .button { width: 100%; }
  .request-list { grid-template-columns: 1fr; }
  .related-section { padding: 65px 20px; }
  .related-grid { grid-template-columns: 1fr; }
  .hub-hero { padding-left: 20px; padding-right: 20px; }
  .hub-hero .breadcrumb { margin-bottom: 42px; }
  .hub-hero h1 { font-size: 36px; }
  .hub-points { grid-template-columns: 1fr; padding: 0 20px; }
  .hub-list { padding: 75px 20px; }
  .article-card-grid { grid-template-columns: 1fr; }
  .article-card-grid a { min-height: 225px; }
  .static-main, .search-page { padding-left: 20px; padding-right: 20px; }
}

/* Interactive tools */
.tools-page { max-width: 1100px; margin: 0 auto; padding: 85px 28px 110px; }
.tools-page > header, .tool-page > header { max-width: 760px; }
.tools-page > header h1, .tool-page > header h1 { margin: 0; color: var(--ink); font-family: "Yu Mincho", serif; font-size: clamp(38px, 5vw, 58px); line-height: 1.45; }
.tools-page > header > p:last-child, .tool-page > header > p:last-child { color: var(--muted); font-size: 14px; }
.tools-page-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tools-page-grid > a { min-height: 185px; padding: 27px; display: grid; grid-template-columns: 52px 1fr; gap: 19px; border: 1px solid var(--line); border-radius: 19px; background: white; transition: transform .2s, box-shadow .2s; }
.tools-page-grid > a:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tools-page-grid > a > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: var(--ink); background: #edf4ef; }
.tools-page-grid h2 { margin: 0; color: var(--ink); font-family: "Yu Mincho", serif; font-size: 19px; }
.tools-page-grid p { margin: 7px 0 13px; color: var(--muted); font-size: 11px; }
.tools-page-grid b { display: flex; align-items: center; gap: 5px; color: var(--orange-dark); font-size: 11px; }
.tool-page { max-width: 1050px; margin: 0 auto; padding: 28px 28px 110px; }
.tool-page > header { margin: 68px auto 45px; text-align: center; }
.tool-icon { width: 62px; height: 62px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 19px; color: var(--gold); background: var(--ink); }
.tool-panel { max-width: 880px; margin: 0 auto; padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 18px 45px rgba(23,63,58,.08); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.form-field { display: grid; align-content: start; gap: 7px; }
.form-field > span { color: var(--ink); font-size: 11px; font-weight: 800; }
.form-field input, .form-field select, .form-field textarea, .material-row input, .material-row select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #d8d4ca; border-radius: 10px; outline: 0; color: var(--text); background: #fffdf9; font-size: 13px; }
.form-field textarea { min-height: 105px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .material-row input:focus, .material-row select:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(143,181,164,.15); }
.form-field select:disabled { opacity: .55; }
.form-help { margin: 18px 0 0; color: var(--muted); font-size: 10px; }
.field-error { margin: 18px 0 0; padding: 12px; border-radius: 10px; color: #8e4937; background: #fbede8; font-size: 11px; }
.tool-result, .calculation-result { margin-top: 28px; padding: 28px; border-radius: 17px; background: #edf5ef; }
.tool-result.attention, .calculation-result.warn { background: #fbf0e9; }
.tool-result > span, .calculation-result > span { color: #4e7965; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.tool-result.attention > span, .calculation-result.warn > span { color: #a85c42; }
.tool-result h2 { margin: 7px 0 8px; color: var(--ink); font: 600 23px/1.55 "Yu Mincho", serif; }
.tool-result p, .calculation-result p { margin: 0; color: var(--muted); font-size: 12px; }
.tool-result > div { margin-top: 19px; display: flex; align-items: center; gap: 16px; }
.tool-result > div > a:not(.button) { color: var(--orange-dark); font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.segmented { margin-bottom: 28px; padding: 4px; display: inline-flex; border-radius: 12px; background: #eeeae1; }
.segmented button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.segmented button.active { color: var(--ink); background: white; box-shadow: 0 3px 10px rgba(23,63,58,.08); }
.calculation-result { display: grid; }
.calculation-result strong { margin: 6px 0 0; color: var(--ink); font: 600 clamp(27px, 4vw, 39px) "Yu Mincho", serif; }
.calculation-result small { margin-bottom: 10px; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 11px; }
.table-wrap th { padding: 13px; text-align: left; color: var(--ink); background: #edf3ee; }
.table-wrap td { padding: 13px; border-bottom: 1px solid #e5e0d7; white-space: nowrap; }
.check-list { margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.check-list label { cursor: pointer; }
.check-list input { position: absolute; opacity: 0; pointer-events: none; }
.check-list span { min-height: 48px; padding: 10px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: 11px; }
.check-list svg { color: #b7bfbb; }
.check-list input:checked + span { border-color: #8eb6a2; color: var(--ink); background: #eff6f1; }
.check-list input:checked + span svg { color: #3f725d; }
.chapter-plan { margin-top: 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.chapter-plan > div { padding: 14px 10px; display: grid; border: 1px solid var(--line); border-radius: 11px; background: #fffdf9; }
.chapter-plan span { color: var(--orange); font-size: 8px; font-weight: 900; }
.chapter-plan strong { margin-top: 8px; color: var(--ink); font-size: 11px; }
.chapter-plan small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.organizer-actions { display: flex; gap: 10px; }
.organizer-actions button:disabled { opacity: .5; cursor: not-allowed; }
.material-table { margin-top: 22px; display: grid; gap: 8px; overflow-x: auto; }
.material-row { min-width: 760px; display: grid; grid-template-columns: 28px 1.35fr .7fr 1fr .75fr 34px; align-items: center; gap: 7px; }
.material-row > span { color: var(--muted); font-size: 9px; text-align: center; }
.material-row input, .material-row select { min-height: 42px; padding: 7px 9px; font-size: 10px; }
.material-row > button { width: 34px; height: 34px; border: 0; border-radius: 8px; color: #9b4f3a; background: #faede8; cursor: pointer; }
.empty-state { margin-top: 22px; padding: 50px 20px; display: grid; place-items: center; text-align: center; border: 1px dashed #cdc8bc; border-radius: 14px; color: var(--muted); }
.empty-state svg { margin-bottom: 12px; color: var(--sage); }
.empty-state strong { color: var(--ink); font-size: 13px; }
.empty-state p { margin: 5px 0 0; font-size: 10px; }
.request-tool .form-grid { grid-template-columns: 1fr 1fr; }
.request-tool .form-field:nth-child(3), .request-tool .form-field:nth-child(4) { grid-column: auto; }
.request-preview { margin-top: 28px; padding: 24px; border-radius: 15px; color: white; background: var(--ink); }
.request-preview > span { color: var(--gold); font-size: 10px; font-weight: 900; }
.request-preview pre { margin: 13px 0 20px; white-space: pre-wrap; color: #dce8e5; font: 12px/1.9 "Yu Gothic", sans-serif; }
.tool-privacy { max-width: 880px; margin: 18px auto 0; padding: 17px 20px; display: flex; gap: 13px; border-radius: 13px; color: #536b67; background: #f1efe7; }
.tool-privacy > svg { flex: 0 0 auto; margin-top: 2px; }
.tool-privacy strong { color: var(--ink); font-size: 11px; }
.tool-privacy p { margin: 3px 0 0; font-size: 9px; }

@media (max-width: 700px) {
  .tools-page, .tool-page { padding-left: 20px; padding-right: 20px; }
  .tools-page-grid { grid-template-columns: 1fr; }
  .tools-page-grid > a { min-height: 0; padding: 22px; grid-template-columns: 45px 1fr; }
  .tools-page-grid > a > span { width: 45px; height: 45px; }
  .tool-page > header { margin-top: 48px; text-align: left; }
  .tool-page > header .tool-icon { margin-left: 0; }
  .tool-page > header h1 { font-size: 34px; }
  .tool-panel { padding: 23px 18px; }
  .form-grid, .form-grid.three, .request-tool .form-grid { grid-template-columns: 1fr; }
  .check-list { grid-template-columns: 1fr; }
  .tool-result > div { align-items: stretch; flex-direction: column; }
  .chapter-plan { grid-template-columns: 1fr 1fr; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
}

[data-contact-link] { display: none; }

/* Contact */
.contact-page { max-width: 900px; margin: 0 auto; padding: 30px 28px 110px; }
.contact-page > header { max-width: 720px; padding: 65px 0 40px; }
.contact-page > header h1 { margin: 0; color: var(--ink); font: 600 clamp(38px,5vw,54px)/1.45 "Yu Mincho", serif; }
.contact-page > header > p:last-child { color: var(--muted); font-size: 13px; }
.contact-form { padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow); }
.contact-intro { margin-bottom: 28px; padding: 18px 20px; border-radius: 13px; background: #f4f1e8; }
.contact-intro strong { color: var(--ink); font-size: 12px; }
.contact-intro ul { margin: 7px 0 0; padding-left: 18px; color: var(--muted); font-size: 10px; }
.contact-form .form-field.full { grid-column: 1 / -1; }
.contact-form .form-field > span small { color: var(--muted); font-weight: 500; }
.contact-form .form-field > span b { color: var(--orange-dark); font-size: 9px; }
.contact-form .form-field > small { justify-self: end; color: var(--muted); font-size: 9px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent-check { margin: 24px 0; display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: 10px; cursor: pointer; }
.consent-check input { margin-top: 4px; }
.contact-message { margin: 0 0 18px; padding: 14px; border-radius: 10px; font-size: 11px; }
.contact-message.success { color: #2d634e; background: #eaf5ee; }
.contact-message.error { color: #8f4734; background: #faece7; }

/* Admin */
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 235px 1fr; background: #f3f2ee; }
.admin-shell ~ .site-footer, body:has(.admin-shell) > .site-header { display: none; }
.admin-nav { position: sticky; top: 0; height: 100vh; padding: 25px 17px 20px; display: flex; flex-direction: column; color: white; background: var(--ink); }
.admin-brand { padding: 4px 8px 27px; display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: 9px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-brand > span { grid-row: 1 / span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--gold); background: rgba(255,255,255,.08); }
.admin-brand strong { font-family: "Yu Mincho", serif; font-size: 16px; letter-spacing: .08em; }
.admin-brand small { color: #9db5af; font-size: 8px; }
.admin-nav nav { margin-top: 22px; display: grid; gap: 5px; }
.admin-nav nav button { padding: 11px 13px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; color: #b8cbc6; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.admin-nav nav button:hover, .admin-nav nav button.active { color: white; background: rgba(255,255,255,.09); }
.admin-user { margin-top: auto; padding: 14px 10px 4px; display: grid; border-top: 1px solid rgba(255,255,255,.1); }
.admin-user strong { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.admin-user span { color: #92aaa4; font-size: 8px; overflow: hidden; text-overflow: ellipsis; }
.admin-user a { margin-top: 8px; color: #edbd75; font-size: 9px; }
.admin-content { min-width: 0; padding: 35px 42px 80px; }
.admin-content > header { margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.admin-content > header p { margin: 0; color: var(--muted); font-size: 9px; }
.admin-content > header h1 { margin: 2px 0 0; color: var(--ink); font: 600 30px "Yu Mincho", serif; }
.admin-content > header > div:last-child { display: flex; gap: 8px; }
.admin-content > header a, .admin-content > header button { padding: 8px 11px; border: 1px solid #d7d3c9; border-radius: 9px; color: #4c625e; background: white; font-size: 9px; cursor: pointer; }
.admin-notice { margin-bottom: 17px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; font-size: 10px; }
.admin-notice.success { color: #2d644d; background: #e8f4ec; }
.admin-notice.error { color: #8d4634; background: #faeae5; }
.admin-notice button { border: 0; color: inherit; background: transparent; text-decoration: underline; cursor: pointer; }
.admin-loading { padding: 80px; text-align: center; color: var(--muted); font-size: 11px; }
.admin-stats { margin-bottom: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.admin-stats > div { padding: 22px; display: grid; align-content: start; min-height: 160px; border: 1px solid #e0ddd4; border-radius: 14px; background: white; }
.admin-stats > div > svg { margin-bottom: 13px; color: var(--sage); }
.admin-stats small { color: var(--muted); font-size: 9px; }
.admin-stats strong { margin-top: 5px; color: var(--ink); font-size: 18px; }
.admin-stats p { margin: 8px 0 0; color: var(--muted); font-size: 9px; }
.status-dot { width: 10px; height: 10px; margin-bottom: 18px; border-radius: 50%; background: #b8b8b4; box-shadow: 0 0 0 5px #eee; }
.status-dot.on, .contact-preview.on .status-dot { background: #4d9a73; box-shadow: 0 0 0 5px #e2f1e8; }
.admin-card { margin-bottom: 18px; padding: 25px; border: 1px solid #e0ddd4; border-radius: 15px; background: white; }
.admin-card-heading { margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-card-heading h2 { margin: 0; color: var(--ink); font-size: 15px; }
.admin-card-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.event-list { display: grid; }
.event-list > div { padding: 11px 2px; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px; border-top: 1px solid #eeeae3; }
.event-state { width: max-content; padding: 3px 7px; border-radius: 99px; color: #5c6966; background: #eeefec; font-size: 8px; }
.event-state.sent { color: #397154; background: #e7f4eb; }
.event-state.failed { color: #95503d; background: #f9e9e4; }
.event-list strong { color: #3c5350; font-size: 10px; }
.event-list time { color: var(--muted); font-size: 8px; }
.admin-empty { padding: 35px 10px; text-align: center; color: var(--muted); font-size: 10px; }
.admin-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.admin-switch input { position: absolute; opacity: 0; }
.admin-switch span { position: relative; width: 42px; height: 23px; border-radius: 99px; background: #c6c9c5; transition: background .2s; }
.admin-switch span::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: transform .2s; box-shadow: 0 2px 5px rgba(0,0,0,.16); }
.admin-switch input:checked + span { background: #4c9671; }
.admin-switch input:checked + span::after { transform: translateX(19px); }
.admin-switch b { min-width: 24px; color: var(--muted); font-size: 9px; }
.admin-switch.small span { width: 35px; height: 20px; }
.admin-switch.small span::after { width: 14px; height: 14px; }
.admin-switch.small input:checked + span::after { transform: translateX(15px); }
.contact-preview { margin-bottom: 22px; padding: 17px; display: flex; align-items: center; gap: 16px; border-radius: 11px; background: #f2f2ef; }
.contact-preview.on { background: #edf6f0; }
.contact-preview .status-dot { margin: 0; flex: 0 0 auto; }
.contact-preview strong { color: var(--ink); font-size: 11px; }
.contact-preview p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.admin-field { max-width: 620px; display: grid; gap: 7px; }
.admin-field > span { color: var(--ink); font-size: 10px; font-weight: 800; }
.admin-field input, .program-row > input { min-height: 42px; padding: 8px 11px; border: 1px solid #d7d3ca; border-radius: 9px; outline: 0; font-size: 11px; }
.admin-field small { color: var(--muted); font-size: 8px; }
.mail-status { margin-top: 17px; display: flex; flex-wrap: wrap; gap: 7px; }
.mail-status span { padding: 5px 8px; border-radius: 7px; color: #8c543f; background: #faece7; font-size: 8px; }
.mail-status span.ok { color: #3e7358; background: #e8f4ec; }
.admin-inline-error { margin-top: 16px; padding: 10px; border-radius: 8px; color: #904b39; background: #faeae5; font-size: 9px; }
.admin-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 9px; }
.admin-actions .button { min-height: 42px; font-size: 10px; }
.program-list { display: grid; gap: 12px; }
.program-row { padding: 17px; display: grid; grid-template-columns: 210px 1fr 65px; gap: 9px; border: 1px solid #e5e2da; border-radius: 11px; }
.program-title { display: flex; align-items: center; gap: 9px; }
.program-title > div { display: grid; min-width: 0; }
.program-title strong { color: var(--ink); font-size: 10px; }
.program-title small { color: var(--muted); font-size: 7px; }
.program-row > button { border: 0; border-radius: 8px; color: white; background: var(--ink); font-size: 9px; cursor: pointer; }
.program-row > p { grid-column: 2 / -1; margin: 0; color: #9b4a38; font-size: 8px; }
.fallback-note { grid-column: 2 / -1; color: var(--muted); font-size: 7px; }
.admin-help { margin: 13px 0 0; color: var(--muted); font-size: 9px; }
.admin-denied { min-height: 70vh; padding: 100px 25px; text-align: center; }
.admin-denied h1 { color: var(--ink); font: 600 35px "Yu Mincho", serif; }
.admin-denied p { color: var(--muted); }
.admin-denied a { color: var(--orange-dark); font-weight: 800; }

@media (max-width: 850px) {
  .admin-shell { grid-template-columns: 74px 1fr; }
  .admin-nav { padding-left: 10px; padding-right: 10px; }
  .admin-brand { grid-template-columns: 1fr; padding: 3px 0 22px; }
  .admin-brand > span { grid-row: auto; margin: auto; }
  .admin-brand strong, .admin-brand small, .admin-nav nav button:not(.active) { font-size: 0; }
  .admin-brand strong, .admin-brand small { display: none; }
  .admin-nav nav button { justify-content: center; padding: 12px; }
  .admin-nav nav button.active { font-size: 0; }
  .admin-user strong, .admin-user span { display: none; }
  .admin-user a { writing-mode: vertical-rl; }
  .admin-content { padding: 28px 22px 70px; }
  .admin-stats { grid-template-columns: 1fr; }
  .program-row { grid-template-columns: 1fr 60px; }
  .program-title { grid-column: 1 / -1; }
  .program-row > p, .fallback-note { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .contact-page { padding-left: 20px; padding-right: 20px; }
  .contact-form { padding: 23px 18px; }
  .contact-form .form-grid { grid-template-columns: 1fr; }
  .contact-form .form-field.full { grid-column: auto; }
  .admin-shell { display: block; }
  .admin-nav { position: static; width: 100%; height: auto; padding: 10px 14px; flex-direction: row; align-items: center; }
  .admin-brand { padding: 0; border: 0; }
  .admin-nav nav { margin: 0 auto; display: flex; }
  .admin-nav nav button, .admin-nav nav button.active { padding: 9px; font-size: 0; }
  .admin-user { margin: 0; padding: 0; border: 0; }
  .admin-user a { writing-mode: initial; font-size: 0; }
  .admin-user a::after { content: "退出"; font-size: 8px; }
  .admin-content { padding: 24px 15px 60px; }
  .admin-content > header { align-items: flex-start; flex-direction: column; }
  .admin-card { padding: 20px 16px; }
  .admin-card-heading { align-items: flex-start; }
  .event-list > div { grid-template-columns: 62px 1fr; }
  .event-list time { grid-column: 2; }
}

/* Upload package: public shell */
.skip-link { position: fixed; z-index: 999; left: 16px; top: -80px; padding: 10px 14px; color: #fff; background: var(--ink); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.hero-picture { position: relative; max-width: 590px; justify-self: start; }
.hero-picture::before { content: ""; position: absolute; inset: -22px 28px 22px -22px; border: 1px solid rgba(23,63,58,.14); border-radius: 30px; transform: rotate(-2deg); }
.hero-picture img { position: relative; width: 100%; height: auto; border: 9px solid #fff; border-radius: 20px; box-shadow: var(--shadow); transform: rotate(1.5deg); }
.hero-search { max-width: 525px; margin-top: 28px; }
.hero-search > label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 13px; font-weight: 800; }
.hero-search > div { min-height: 57px; padding: 0 9px 0 17px; display: flex; align-items: center; border: 1px solid #d9d3c7; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(28,63,56,.08); }
.hero-search input { width: 100%; height: 54px; border: 0; outline: 0; background: transparent; }
.hero-search button { width: 43px; height: 43px; border: 0; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--ink); cursor: pointer; }
.diagnosis-banner { position: relative; z-index: 5; margin-top: -36px; padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid #e5dfd3; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.diagnosis-banner h2 { margin: 0; color: var(--ink); font: 600 27px/1.5 "Yu Mincho",serif; }
.diagnosis-banner p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.category-grid { grid-template-columns: repeat(5,1fr); }
.category-card.blue { background:#edf4f5;border-color:#d5e3e6 }.category-card.sepia{background:#f5f0e6;border-color:#e4dac5}.category-card.green{background:#eef5ef;border-color:#dbe7db}.category-card.orange{background:#fbf1e9;border-color:#edddcf}.category-card.purple{background:#f3eff7;border-color:#dfd8e7}
.featured-card.tone-0 .featured-art{background:#5f8998}.featured-card.tone-1 .featured-art{background:#648b75}.featured-card.tone-2 .featured-art{background:#a65f48}
.promo-note,.decision-label small { font-size: 12px; }
.footer-bottom p,.footer-bottom small { font-size: 12px; }
.footer-links a,.footer-links b,.tool-card p,.tool-card b { font-size: 13px; }
.is-hidden { display: none !important; }
.wide { width: 100%; }
.button.secondary { color: var(--ink); border-color: #bfc9c2; background: #fff; }
.button.danger { min-height: 38px; padding: 8px 13px; color: #8e3527; border-color: #e5b7ac; background: #fff3ef; }
.search-page { max-width: 1100px; margin: auto; padding: 70px 28px 110px; }
.search-page header h1 { margin: 0 0 24px; color: var(--ink); font: 600 clamp(35px,5vw,55px)/1.4 "Yu Mincho",serif; }
.search-form { display: flex; gap: 10px; max-width: 720px; }
.search-form input { flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; font-size: 16px; }
.search-count { margin: 35px 0 18px; color: var(--muted); }
.not-found { max-width: 760px; min-height: 58vh; margin: auto; padding: 100px 28px; }
.not-found h1 { color: var(--ink); font: 600 clamp(36px,6vw,58px) "Yu Mincho",serif; }
.not-found .search-form { margin: 24px 0; }
.request-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.request-preview { margin-top: 0; align-self: start; position: sticky; top: 95px; }
.privacy-check { margin: 20px 0; display: flex !important; grid-template-columns: 20px 1fr !important; gap: 10px !important; align-items: start; }
.privacy-check input { width: 18px !important; min-height: 18px !important; margin-top: 4px; }
.privacy-check a { color: var(--orange-dark); text-decoration: underline; }
.contact-form > label:not(.honeypot):not(.privacy-check) { margin-bottom: 19px; display: grid; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 800; }
.contact-form > label > span { color: var(--orange-dark); font-size: 12px; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%;min-height:50px;padding:11px 13px;border:1px solid #d8d4ca;border-radius:10px;background:#fffdf9;font-size:16px; }
.contact-form textarea { resize: vertical; }
.form-note { color: var(--muted); font-size: 12px; }

/* Upload package: setup and admin */
.setup-body,.admin-body { min-height:100vh;background:#f1f0eb; }
.admin-shell { min-height:auto;max-width:1120px;margin:0 auto;padding:36px 22px;display:block;background:transparent; }
.admin-shell.narrow { max-width:760px; }
.admin-shell > .admin-brand { max-width:max-content;margin:0 auto 22px;color:var(--ink);border:0; }
.admin-shell > .admin-brand small { color:var(--muted);font-size:11px; }
.admin-panel { margin-bottom:22px;padding:30px;border:1px solid #dedbd3;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(23,63,58,.06);scroll-margin-top:90px; }
.admin-panel h1,.admin-panel h2 { margin:0 0 10px;color:var(--ink);font-family:"Yu Mincho",serif; }
.admin-panel h1 { font-size:34px; }.admin-panel h2{font-size:27px}.admin-panel h3{margin-top:28px;color:var(--ink);font-size:16px}.admin-panel>p{color:var(--muted);font-size:14px}
.admin-top { position:sticky;z-index:60;top:0;min-height:72px;padding:10px max(calc((100vw - 1200px)/2),22px);display:flex;align-items:center;justify-content:space-between;gap:25px;color:#fff;background:var(--ink); }
.admin-top .admin-brand { padding:0;border:0;color:#fff; }
.admin-top .admin-brand small { color:#a9bfba;font-size:10px; }
.admin-top-actions { display:flex;align-items:center;gap:18px;font-size:13px; }.admin-top-actions form{margin:0}.link-button{padding:0;border:0;color:#f2c07a;background:transparent;cursor:pointer;font-weight:800}
.admin-layout { max-width:1200px;margin:auto;padding:28px 22px 90px;display:grid;grid-template-columns:190px 1fr;gap:24px; }
.admin-nav { position:sticky;top:99px;height:max-content;padding:12px;display:grid;gap:3px;border:1px solid #ddd9cf;border-radius:14px;color:var(--ink);background:#fff; }
.admin-nav a { padding:10px 11px;border-radius:8px;font-size:13px;font-weight:700; }.admin-nav a:hover{background:#eef4ef}
.admin-main { min-width:0; }.admin-main>.notice{margin-bottom:20px}
.admin-form { display:grid;gap:17px; }.admin-form fieldset{padding:20px;border:1px solid var(--line);border-radius:13px}.admin-form legend{padding:0 7px;color:var(--ink);font-weight:900}.admin-form label{display:grid;gap:6px;color:var(--ink);font-size:13px;font-weight:800}.admin-form label small{color:var(--muted);font-size:11px;font-weight:500}.admin-form input,.admin-form select,.admin-form textarea,.program-row input{width:100%;min-height:47px;padding:9px 12px;border:1px solid #d4d0c7;border-radius:9px;background:#fffdf9;font-size:15px}.admin-form textarea{min-height:110px}.admin-form code{font-size:13px}
.requirement-list,.mail-status { margin:20px 0;display:flex;flex-wrap:wrap;gap:8px }.status-pill{width:max-content;padding:5px 10px;border-radius:99px;font-size:12px;font-weight:900}.status-pill.ok{color:#2f684f;background:#e6f3e9}.status-pill.ng{color:#8d3e30;background:#fae8e3}.status-pill.off{color:#5d6663;background:#eceeeb}
.notice { padding:15px 17px;border-radius:11px;font-size:14px }.notice.success{color:#285f48;background:#e8f4ec}.notice.error{color:#873c2e;background:#fae9e4}.notice ul{margin:8px 0 0;padding-left:20px}
.panel-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:20px }.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:23px}.stat-grid>div{padding:18px;border-radius:12px;background:#f4f3ee}.stat-grid span,.stat-grid strong{display:block}.stat-grid span{color:var(--muted);font-size:11px}.stat-grid strong{margin-top:7px;color:var(--ink);font-size:16px}.text-ok{color:#2d704f!important}.text-muted{color:#666!important}
.switch-row { display:flex!important;grid-template-columns:none!important;flex-direction:row;align-items:center;gap:9px!important }.switch-row input{width:20px!important;min-height:20px!important}.switch-row.compact{font-size:12px}.inline-form{margin-top:14px}.empty{padding:18px;border-radius:10px;color:var(--muted);background:#f6f5f1;font-size:13px}
.program-row { margin-top:13px;padding:18px;display:grid;grid-template-columns:185px minmax(220px,1fr) 90px 80px;align-items:end;gap:12px;border:1px solid var(--line);border-radius:12px }.program-row>div{display:grid;align-self:center}.program-row small{color:var(--muted);font-size:10px}.program-row label{display:grid;gap:5px;font-size:11px;font-weight:800}.program-row .button{min-height:45px}
.backup-list{margin-top:19px;display:grid}.backup-list>div{padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #eeeae3}.backup-list span{display:grid}.backup-list small{color:var(--muted);font-size:11px}.backup-list form{margin:0}.table-wrap table{font-size:13px}
.backup-actions{display:flex!important;grid-auto-flow:column;align-items:center;gap:8px}.backup-actions .button{min-height:38px;padding:8px 13px}
.period-tabs{display:flex;gap:7px;margin:18px 0}.period-tabs a{padding:7px 12px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:12px;font-weight:800}.period-tabs a.active{border-color:var(--ink);color:#fff;background:var(--ink)}
.analytics-chart{min-height:155px;margin:20px 0;padding:18px 12px 8px;display:flex;align-items:flex-end;gap:5px;overflow-x:auto;border-radius:12px;background:#f6f5f1}.analytics-chart>div{min-width:21px;display:grid;align-items:end;justify-items:center;gap:6px}.analytics-chart span{width:12px;min-height:3px;border-radius:5px 5px 0 0;background:var(--accent)}.analytics-chart small{font-size:9px;white-space:nowrap;writing-mode:vertical-rl}.analytics-chart .empty{width:100%;align-self:center}
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.analytics-grid>div{min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px}.analytics-grid h3{margin-top:0}.analytics-grid table{width:100%;border-collapse:collapse}.analytics-grid th,.analytics-grid td{padding:8px 6px;border-bottom:1px solid #eeeae3;text-align:left;overflow-wrap:anywhere}.analytics-grid th:last-child,.analytics-grid td:last-child{text-align:right}.analytics-grid td small{display:block;color:var(--muted)}
.analytics-maintenance{margin-top:20px;padding:16px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;border-radius:12px;background:#f6f5f1}.analytics-maintenance form,.analytics-maintenance p{margin:0}.analytics-maintenance p{flex:1;min-width:210px}

@media (max-width:980px){.category-grid{grid-template-columns:repeat(3,1fr)}.admin-layout{grid-template-columns:150px 1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}.program-row{grid-template-columns:1fr 80px}.program-row>div,.program-row>label:first-of-type{grid-column:1/-1}}
@media (max-width:760px){.global-nav:not(.is-open){visibility:hidden;pointer-events:none}.global-nav.is-open{overflow-y:auto}.home-hero{display:block;padding-top:50px}.hero-picture{margin:50px auto 0}.diagnosis-banner{margin-top:0;align-items:stretch;flex-direction:column}.category-grid{grid-template-columns:1fr 1fr}.request-grid{grid-template-columns:1fr}.request-preview{position:static}.admin-layout{display:block;padding:14px}.admin-nav{position:static;margin-bottom:15px;grid-template-columns:repeat(3,1fr)}.admin-nav a{text-align:center}.admin-panel{padding:22px 17px}.admin-top{position:static}.admin-top .admin-brand small{display:block}.stat-grid{grid-template-columns:1fr 1fr}.program-row{grid-template-columns:1fr}.program-row>*{grid-column:1!important}.analytics-grid{grid-template-columns:1fr}.search-form{align-items:stretch;flex-direction:column}}
@media (max-width:420px){.category-grid,.stat-grid{grid-template-columns:1fr}.admin-nav{grid-template-columns:repeat(2,1fr)}.hero-text h1{font-size:43px}.admin-top-actions a{display:none}}

/* Keep secondary copy readable without weakening the visual hierarchy. */
.brand small,.diagnosis-options small,.featured-card p,.featured-card h3+span,.trust-points p,.footer-links a,.footer-bottom p,.footer-bottom small,.breadcrumb,.promo-note,.decision-label,.inline-tool small,.side-box a,.side-box span,.side-diagnosis span,.related-grid span,.related-grid p,.related-grid b,.hub-points span,.hub-points p,.article-card-grid span,.article-card-grid p,.article-card-grid b,.form-help,.tool-result>span,.calculation-result>span,.chapter-plan span,.chapter-plan small,.material-row>span,.material-row input,.material-row select,.empty-state p,.request-preview>span,.tool-privacy p,.contact-intro ul,.contact-form .form-field>span b,.contact-form .form-field>small,.consent-check,.contact-message{font-size:12px}
.decision-label small{font-size:11px}
.admin-content>header p,.admin-content>header a,.admin-content>header button,.admin-notice,.admin-stats small,.admin-stats p,.admin-card-heading p,.event-state,.event-list strong,.event-list time,.admin-empty,.admin-switch b,.contact-preview p,.admin-field>span,.admin-field small,.mail-status span,.admin-inline-error,.admin-actions .button,.program-title strong,.program-title small,.program-row>button,.program-row>p,.fallback-note,.admin-help,.admin-panel p,.admin-panel label,.admin-panel small,.admin-nav a{font-size:12px}

/* Keep mandatory promotion labels readable without competing with the answer. */
.promo-note{padding:0;border-radius:0;color:#7d776d;background:transparent;font-size:9px;font-weight:400;letter-spacing:0}
.decision-label small{margin-left:4px;padding:0;border:0;color:rgba(255,255,255,.54);font-size:8px;font-weight:500;letter-spacing:.02em;vertical-align:1px}

/* Put the outsourcing path inside the answer, before the DIY path. */
.quick-outsource{min-width:0;margin-top:16px;padding:24px;border-radius:15px;color:#fff;background:linear-gradient(135deg,#173f3a,#28594f)}
.quick-outsource>span{display:block;color:#efbd76;font-size:11px;font-weight:900;letter-spacing:.06em}
.quick-outsource h2{margin:5px 0 0;padding:0;border:0;color:#fff;font-size:24px;line-height:1.55}
.quick-answer .quick-outsource-reason{margin:12px 0 0;color:#d4e1de;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13px;font-weight:400;line-height:1.85}
.quick-answer .quick-outsource-material{margin:13px 0 0;padding:11px 13px;border-radius:9px;color:#f4f8f6;background:rgba(255,255,255,.1);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:12px;font-weight:400;line-height:1.75}
.quick-answer .quick-outsource-material strong{display:block;margin-bottom:2px;color:#efbd76;font-size:10px;letter-spacing:.03em}
.quick-answer .quick-outsource-caution{margin:9px 0 0;color:#d4e1de;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:11px;font-weight:400;line-height:1.75}
.quick-answer .quick-outsource-safety{margin:12px 0 0;padding:10px 12px;border-radius:9px;color:#ffe2cb;background:rgba(91,42,20,.42);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:11px;font-weight:600;line-height:1.75}
.quick-answer .quick-outsource-provider{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);color:#c8d8d3;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:12px;font-weight:400;line-height:1.8}
.quick-outsource-link{max-width:100%;min-width:0;margin-top:17px;padding:13px 15px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 10px;border-radius:10px;color:#fff;background:var(--orange-dark);text-decoration:none}
.quick-outsource-link>strong{min-width:0;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.quick-outsource-link>svg{grid-column:2;grid-row:1;flex:0 0 auto}
.quick-outsource-link>small{grid-column:1/-1;color:#fff;font-size:9px;line-height:1.45}
.quick-outsource-link b{margin-left:3px;color:#fff;font-size:9px}
.quick-self{min-width:0;margin-top:14px;padding:19px 20px;border:1px solid #d8dfd8;border-radius:13px;background:#fff}
.quick-self>span{display:block;color:#58746c;font-size:10px;font-weight:900;letter-spacing:.06em}
.quick-self h3{margin:5px 0 0;font-size:16px;line-height:1.55}
.quick-answer .quick-self-text{margin:8px 0 0;color:#53655f;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13px;font-weight:400;line-height:1.85}
.quick-answer .quick-self-software{margin:8px 0 0;padding:10px 12px;border-radius:9px;color:#35534d;background:#eef5f0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:12px;font-weight:600;line-height:1.75}
.quick-self>a{margin-top:11px;display:inline-flex;align-items:center;gap:6px;color:#27695c;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.quick-self>a>svg{flex:0 0 auto}
.plain-terms{margin:30px 0 0;padding:17px 19px;border:1px solid #dce4df;border-radius:13px;background:#f7faf8}
.plain-terms>strong{color:#355d54;font-size:12px}
.plain-terms dl{margin:11px 0 0;display:grid;gap:9px}
.plain-terms dl>div{display:grid;grid-template-columns:minmax(80px,auto) minmax(0,1fr);gap:11px;align-items:start}
.plain-terms dt{color:var(--ink);font-size:11px;font-weight:900}
.plain-terms dd{margin:0;color:#5b6d67;font-size:11px;line-height:1.7}
.operation-figure.compact-figure{max-width:390px;margin-left:auto;margin-right:auto}

/* Give readers who do not want to learn editing a direct, plain-language route. */
.guide-service-choices{margin:30px 0;padding:24px;border:1px solid #d6e1dc;border-radius:16px;background:#f4f8f5}
.guide-service-choices>span{display:block;color:#497068;font-size:11px;font-weight:900;letter-spacing:.05em}
.guide-service-choices>h2{margin:5px 0 7px!important;padding:0!important;border:0!important;font-size:23px!important;line-height:1.5!important}
.guide-service-choices>p{margin:0;color:#52645f;font-size:13px;line-height:1.85}
.guide-service-choices>div{margin-top:17px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.guide-service-choices a{min-width:0;padding:14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 9px;border:1px solid #cad8d2;border-radius:11px;color:var(--ink);background:#fff;text-decoration:none}
.guide-service-choices a>svg{grid-row:1/3;color:#49786e}
.guide-service-choices a>strong{min-width:0;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.guide-service-choices a>small{grid-column:2;color:#66746f;font-size:10px;line-height:1.45}
.guide-service-choices a>b{grid-column:1/-1;margin-top:7px;display:flex;align-items:center;gap:5px;color:#27695c;font-size:11px}
.hub-help-first .hub-help-safety{margin-top:12px;padding:10px 12px;border-radius:9px;color:#704630;background:#fff0e4;font-size:11px;font-weight:700;line-height:1.75}

/* Explain unfamiliar software before naming it, then provide the official route. */
.software-grid>.software-card{align-content:start;gap:7px}
.software-card>.software-type{min-height:3.5em;color:#52645f;font-size:12px;line-height:1.75}
.software-card>strong{margin-top:3px;font-size:17px;line-height:1.45}
.software-card>.software-meta{display:flex;flex-wrap:wrap;gap:6px}
.software-card>.software-meta>span{padding:3px 7px;border-radius:99px;color:#5f6f6a;background:#f0f3ef;font-size:10px;line-height:1.45}
.software-card>p{padding-top:10px;border-top:1px solid #ece8df;color:#586964;font-size:12px}
.software-card>p>b{color:#344b45}
.software-links{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:7px}
.software-links>a{min-height:34px;padding:7px 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid #b8cbc3;border-radius:8px;color:#275f54;background:#f7fbf8;font-size:11px;font-weight:800;line-height:1.45;text-decoration:none}
.software-links>a:hover{border-color:#6c998b;background:#edf6f1}
.software-links>a>svg{flex:0 0 auto}

@media (max-width:700px){.quick-answer.has-options{padding:18px}.quick-outsource{padding:21px 18px}.quick-outsource h2{font-size:20px}.quick-outsource-link{width:100%}.quick-self{padding:17px 16px}.plain-terms dl>div{grid-template-columns:1fr;gap:2px}.hub-help-first{padding:20px 18px}.hub-help-first h2{font-size:20px}.hub-help-first>div{align-items:stretch;flex-direction:column}.hub-help-first .button{width:100%;justify-content:center}.guide-service-choices{padding:20px 17px}.guide-service-choices>div{grid-template-columns:1fr}.operation-figure.compact-figure{width:min(100%,300px);max-width:300px;margin-left:auto;margin-right:auto;overflow:visible}.operation-figure.compact-figure img{width:100%;max-width:100%;height:auto}.operation-figure.compact-figure figcaption{position:static;width:auto;padding-right:0}}
@media (max-width:620px){.software-grid{grid-template-columns:1fr}.software-card>.software-type{min-height:0}}

/* Keep the size guide compact and scrollable instead of stretching the page. */
.tool-page .table-wrap{max-width:100%;border:1px solid #dfe3dc;border-radius:13px;overflow-x:auto}
.tool-page .table-wrap table{min-width:560px;table-layout:fixed;font-size:12px}
.tool-page .table-wrap th,.tool-page .table-wrap td{padding:11px 12px;white-space:normal;overflow-wrap:anywhere}
.tool-page .table-wrap th:nth-child(1){width:22%}
.tool-page .table-wrap th:nth-child(2){width:25%}
.tool-page .table-wrap th:nth-child(3){width:35%}
.tool-page .table-wrap th:nth-child(4){width:18%}

/* Responsive layout hardening */
.hero-search input{flex:1 1 auto;width:auto;min-width:0}
.hero-search button{flex:0 0 43px}
.decision-box.neutral .secondary-link{color:#27695c}
.calculation-result strong,.request-preview pre{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.request-preview{min-width:0}

.operation-figure-image{display:block;max-width:100%;overflow:hidden;border-radius:16px;background:#f6f1e7;cursor:zoom-in}
.operation-figure-image img{width:100%;max-width:100%;height:auto}
.figure-open-link{margin-left:8px;display:inline-flex;align-items:center;gap:4px;color:#27695c;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.operation-figure.compact-figure{width:min(100%,300px);max-width:300px;margin-left:auto;margin-right:auto;overflow:visible}
.operation-figure.compact-figure .operation-figure-image,.operation-figure.compact-figure img{width:100%;max-width:100%;height:auto}
.operation-figure.compact-figure figcaption{position:static;left:auto;width:auto;padding-right:0;background:transparent}

.material-field{min-width:0;display:grid;align-content:start;gap:4px}
.material-field>span{color:#52645f;font-size:10px;font-weight:800;line-height:1.4}
.material-field input,.material-field select{min-width:0}

/* Switch to the compact menu before the six desktop links become cramped. */
@media (max-width:860px){
  body.nav-open{overflow:hidden}
  .header-inner{height:65px;padding:0 18px}
  .brand strong{font-size:19px}
  .brand small{display:none}
  .menu-button{display:grid}
  .global-nav{position:fixed;inset:65px 0 auto;max-height:0;overflow:hidden;padding:0 22px;display:grid;gap:0;background:var(--paper);opacity:0;transition:max-height .28s,opacity .2s,padding .28s}
  .global-nav.is-open{max-height:calc(100vh - 65px);overflow-y:auto;padding-top:16px;padding-bottom:28px;border-bottom:1px solid var(--line);opacity:1;box-shadow:0 20px 40px rgba(23,63,58,.12)}
  .global-nav:not(.is-open){visibility:hidden;pointer-events:none}
  .global-nav a{padding:13px 2px;border-bottom:1px solid #eee9df;font-size:14px}
  .global-nav .nav-search{padding-left:2px;border-left:0}
}

@media (max-width:900px){
  .organizer-actions{flex-wrap:wrap}
  .organizer-actions .button{flex:1 1 130px}
  .material-table{overflow:visible}
  .material-row{min-width:0;padding:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:11px;border:1px solid var(--line);border-radius:12px;background:#fffdf9}
  .material-row>span:first-child{grid-column:1/-1;width:max-content;padding:2px 8px;border-radius:99px;text-align:left;color:#fff;background:var(--ink)}
  .material-row>.material-field{min-width:0}
  .material-row>.material-field input,.material-row>.material-field select{font-size:16px}
  .material-row>button{grid-column:2;justify-self:end}
}

@media (max-width:700px){
  .quick-answer.has-options{padding:0;border:0;background:transparent;box-shadow:none}
  .quick-answer.has-options>span{padding:0 2px}
  .tool-page .form-field input,.tool-page .form-field select,.tool-page .form-field textarea,.tool-page .material-row input,.tool-page .material-row select,.tool-page .admin-form input,.tool-page .admin-form select,.tool-page .admin-form textarea{font-size:16px}
}

@media (max-width:680px){
  .operation-figure:not(.compact-figure){overflow:hidden}
  .operation-figure:not(.compact-figure) .operation-figure-image,.operation-figure:not(.compact-figure) img{width:100%;max-width:100%;height:auto}
  .operation-figure:not(.compact-figure) figcaption{position:static;left:auto;width:auto;padding-right:0;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;background:transparent}
}

@media (max-width:640px){
  .admin-form input,.admin-form select,.admin-form textarea,.program-row input{font-size:16px}
  .admin-panel .table-wrap{max-width:100%;overflow-x:auto;border:1px solid #e1ddd4;border-radius:10px;overscroll-behavior-inline:contain}
  .admin-panel .table-wrap::before{content:"表は左右に動かせます";position:sticky;left:0;z-index:1;width:max-content;margin:0;padding:5px 9px;display:block;color:#5d6d68;background:#f3f5f1;font-size:11px;font-weight:700}
  .admin-panel .table-wrap td{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
  .backup-list>div{align-items:stretch;flex-direction:column}
  .backup-list span{min-width:0;overflow-wrap:anywhere}
  .backup-actions{width:100%;display:grid!important;grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .backup-actions .button,.backup-actions form,.backup-actions form .button{width:100%}
  .analytics-maintenance{align-items:stretch;flex-direction:column}
  .analytics-maintenance p{min-width:0}
  .period-tabs{flex-wrap:wrap}
}

@media (max-width:640px){
  .tool-page .table-wrap{border:0;overflow:visible}
  .tool-page .table-wrap table{width:100%;min-width:0;display:block;table-layout:auto}
  .tool-page .table-wrap thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .tool-page .table-wrap tbody{display:grid;gap:10px}
  .tool-page .table-wrap tr{padding:11px;display:grid;grid-template-columns:minmax(0,1fr) minmax(76px,.55fr);grid-template-areas:"use ratio" "finish finish" "pixels pixels";gap:4px 10px;border:1px solid #dfe3dc;border-radius:11px;background:#fffdf9}
  .tool-page .table-wrap td{min-width:0;padding:7px 8px;display:block;border:0;white-space:normal;overflow-wrap:anywhere}
  .tool-page .table-wrap td:nth-child(1){grid-area:use}
  .tool-page .table-wrap td:nth-child(2){grid-area:finish}
  .tool-page .table-wrap td:nth-child(3){grid-area:pixels}
  .tool-page .table-wrap td:nth-child(4){grid-area:ratio}
  .tool-page .table-wrap td::before{content:attr(data-label);margin-bottom:2px;display:block;color:#65746f;font-size:10px;font-weight:800;line-height:1.4}
}

@media (max-width:520px){.category-grid{grid-template-columns:1fr}}

.request-destination{margin-top:22px;padding-top:20px;display:grid;gap:9px;border-top:1px solid rgba(255,255,255,.18)}
.request-destination>strong{color:#fff;font-size:15px;line-height:1.65}
.request-destination>p{margin:0;color:#d4e2de;font-size:12px;line-height:1.8}
.request-destination>.button{width:100%;margin-top:4px;justify-content:center}
.request-destination>.form-help{color:#b9ccc7}
.tool-result .button small,.request-destination .button small{font-size:9px;font-weight:900}
.manual-details{margin:34px 0;border:1px solid #cedbd4;border-radius:17px;background:#fbfdfb;scroll-margin-top:90px;overflow:hidden}
.manual-details>summary{position:relative;padding:21px 54px 21px 22px;display:grid;gap:4px;list-style:none;cursor:pointer}
.manual-details>summary::-webkit-details-marker{display:none}
.manual-details>summary::after{content:"＋";position:absolute;top:50%;right:22px;transform:translateY(-50%);color:#27695c;font-size:24px;font-weight:500}
.manual-details[open]>summary{border-bottom:1px solid #dfe7e2;background:#f1f6f3}
.manual-details[open]>summary::after{content:"−"}
.manual-details>summary>span{color:#8b5a31;font-size:10px;font-weight:900;letter-spacing:.07em}
.manual-details>summary>strong{color:var(--ink);font-size:17px;line-height:1.55}
.manual-details>summary>small{color:#65746f;font-size:12px;line-height:1.65}
.manual-details-body{padding:0 22px 24px}
.manual-details-body>section:first-child{margin-top:24px}
@media (max-width:640px){.manual-details>summary{padding:18px 46px 18px 17px}.manual-details>summary::after{right:17px}.manual-details-body{padding:0 15px 19px}}