/* 温かな個人ガイド。淡色は面に使い、本文・操作はコントラストを保つ。 */
/* 選択肢と具体的な数字を、読みやすい小さな単位にまとめる。 */
:root {
  --ink: #393c35;
  --muted: #62675e;
  --pink: #b44735;
  --pink-dark: #943a2b;
  --mint: #edf3e9;
  --cream: #fff5e8;
  --line: #e7e4d9;
  --radius: 22px;
  --sage: #4f6e59;
}
.journey-picker { background: #edf3e9; border-radius: 20px; padding: 22px 26px; display: grid; grid-template-columns: minmax(150px,.6fr) minmax(0,1fr); gap: 8px 26px; align-items: center; margin-bottom: 24px; }
.journey-picker label { font-weight: 700; font-size: 15px; }
.journey-picker select,.price-estimator select { width: 100%; min-height: 48px; background: #fffdf9; border: 1px solid #8c9c84; border-radius: 12px; padding: 12px; font: inherit; color: #393c35; }
.journey-picker p { grid-column: 2; font-size: 12px; color: #4f6e59; }
.journey-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.journey-card { background: #fffaf2; border: 1px solid #e7e4d9; border-radius: 22px; padding: 26px; display: flex; flex-direction: column; }
.journey-card[hidden] { display: none; }
.journey-grid:has(.journey-card[hidden]) { grid-template-columns: 1fr; }
.journey-card:only-child { grid-column: 1 / -1; }
.journey-index { color: #4f6e59; font-size: 12px; font-weight: 700; }
.journey-card h3 { font-size: 20px; line-height: 1.8; margin: 12px 0; }
.journey-card p { font-size: 14px; line-height: 1.95; color: #62675e; margin-bottom: 20px; }
.journey-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.journey-links a { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border: 1px solid #d9c6b3; padding: 8px 14px; border-radius: 22px; font-size: 12px; color: #943a2b; background: #fffdf9; }
.journey-links a:hover { background: #f7dfd1; }
.journey-section>.shell>.fine-print { margin-top: 18px; }
.price-estimator { padding: 26px; border-radius: 22px; background: #edf3e9; margin-block: 26px; }
.price-guide .editorial-table table { min-width: 0; }
.price-guide .editorial-table th,.price-guide .editorial-table td { overflow-wrap: anywhere; }
.price-estimator h3 { font-size: 19px; line-height: 1.8; margin-bottom: 18px; }
.price-estimator>label:not(.price-family) { display: block; font-size: 13px; margin-bottom: 8px; font-weight: 700; }
.price-family { display: flex; gap: 10px; align-items: center; min-height: 48px; margin-block: 14px; font-size: 13px; }
.price-family input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: #943a2b; }
.price-result { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.price-result>span { padding: 18px; border: 1px solid #d7dfcf; border-radius: 14px; background: #fffdf9; font-size: 12px; }
.price-result strong { display: block; color: #943a2b; font-size: 25px; margin-top: 8px; }
.article-body .price-estimator .fine-print { font-size: 12px; margin-bottom: 0; }
@media(max-width:600px) {
  .journey-picker { grid-template-columns: 1fr; padding: 20px; gap: 12px; }
  .journey-picker p { grid-column: 1; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-card { padding: 22px; }
  .journey-card h3 { font-size: 18px; }
  .journey-links { flex-direction: column; }
  .price-estimator { padding: 20px; }
  .price-result { grid-template-columns: 1fr; }
}
body { background: #fffdf9; }
h1,h2,h3 { font-family: 'Hiragino Maru Gothic ProN','Yu Gothic',Meiryo,sans-serif; }
h2 { font-size: 30px; font-weight: 700; line-height: 1.65; }
.utility { background: #f1f3ea; color: #50594a; }
.utility a:hover { color: var(--pink-dark); }
.site-header { background: #fffdf9f5; }
.header-inner { min-height: 84px; }
.brand-symbol { background: #e7eee2; color: var(--sage); border-radius: 50%; }
.brand strong { font-weight: 700; }
.brand small { color: var(--sage); }
.header-cta { border-color: #d6dfce; background: var(--mint); color: #405941; border-radius: 30px; }
.header-inner .mobile-menu summary { background: #fffdf9; border-radius: 24px; }
.header-inner .mobile-menu nav { border-radius: 20px; background: #fffdf9; }
.hero { background: #fff7ec; }
.hero-grid { gap: 64px; padding-block: 48px 46px; align-items: center; }
.eyebrow,.section-label { letter-spacing: .05em; color: var(--sage); font-size: 12px; }
.eyebrow { display: inline-flex; background: #eaf0e2; padding: 7px 14px; border-radius: 30px; }
.tiny-dot,.status-dot { background: var(--sage); }
.hero-lead { margin-top: 22px; color: #68634f; font-size: 16px; font-weight: 500; }
.hero h1 { font-size: 35px; line-height: 1.65; margin-top: 10px; font-weight: 750; }
.hero h1>span { display: inline; font-size: inherit; color: var(--ink); }
.hero-benefit-line { margin-top: 18px; font-size: 13px; }
.hero-benefit-line strong { font-size: 21px; }
.hero-benefit-line small { font-size: 11px; margin-top: 3px; }
.hero-description { margin-top: 18px; font-size: 14px; line-height: 2; color: #626454; }
.hero-actions { margin-top: 24px; gap: 18px; }
.button { border-radius: 30px; padding: 16px 24px; font-size: 13px; box-shadow: 0 5px 0 #923b2510; }
.button:hover { transform: translateY(-1px); }
.sub-link { border-color: #c9d4c1; }
.hero-meta { margin-top: 17px; font-size: 10px; }
.welcome-note { display: flex; gap: 13px; align-items: flex-start; margin-top: 22px; max-width: 440px; }
.welcome-avatar { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; color: #7e512a; background: #f6dfb9; font-weight: 700; font-size: 19px; }
.welcome-note p { font-size: 11px; line-height: 1.9; color: #636658; }
.welcome-note strong { font-size: 12px; color: var(--ink); font-weight: 650; }
.welcome-note a { display: block; color: var(--sage); text-decoration: underline; text-underline-offset: 3px; margin-top: 5px; }
.hero-offer { border: 1px solid #e4decf; border-radius: 28px; box-shadow: 8px 10px 0 #eee6d6; background: #fffefa; }
.offer-top { border-radius: 28px 28px 0 0; background: #f7dfd1; padding: 17px 24px; color: #704a35; font-size: 12px; }
.offer-code { display: none; }
.offer-primary { padding-block: 27px 23px; }
.offer-value { font-size: 76px; font-weight: 750; }
.offer-secondary { border-color: #ede5d9; }
.offer-secondary strong { color: var(--pink); }
.offer-arrow { background: #f4ebd9; color: #836b42; }
.offer-note,.offer-caution { font-size: 11px; }
.offer-caution { line-height: 1.9; padding: 19px 26px 23px; }
.hero-bottom { border-color: #e5dfd1; font-size: 12px; gap: 20px; }
.hero-bottom>span { color: var(--sage); letter-spacing: 0; }
.section { padding-block: 68px; }
.soft-section { background: #f2f5ec; }
.schedule-section { background: #fff4e4; }
.purpose-grid { border: 0; border-radius: 0; gap: 16px; overflow: visible; }
.purpose-card { border: 1px solid #e6e2d5; border-radius: 22px; background: #fff6e6; min-height: 190px; padding: 25px 21px 42px; }
.purpose-card:nth-child(2) { background: #fbe9df; }
.purpose-card:nth-child(3) { background: #edf2e7; }
.purpose-card:nth-child(4) { background: #eef1f5; }
.purpose-card+.purpose-card,.purpose-card:nth-child(3),.purpose-card:nth-child(4) { border: 1px solid #e6e2d5; }
.purpose-card:hover { background: #ffefd7; }
.purpose-number { color: #6d725f; }
.purpose-card h3 { font-weight: 700; }
.purpose-card p { font-size: 12px; }
.purpose-arrow { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #ffffffb5; font-size: 20px; }
.start-panel,.article-cta { background: #eef3e6; color: var(--ink); border: 1px solid #dce5d2; border-radius: 26px; }
.start-panel p,.article-cta p,.article-cta .setup-note { color: #5c6553; }
.start-panel .section-label { color: var(--sage); }
.step { border-color: #d6dfca; }
.step h3 { font-weight: 700; }
.article-card { background: #fffefa; border-radius: 22px; }
.article-card:hover { box-shadow: 0 8px 20px #786b4010; border-color: #c6d4bb; }
.tag { border-radius: 20px; color: #49613f; padding: 5px 12px; }
.card-number { color: #6e7867; }
.calculator { border-radius: 26px; }
.calculator input { border-radius: 12px; background: #fffdf8; }
.calc-timeline>span { border-radius: 12px; }
.faq { border-color: #dce2d4; }
.faq:first-child { border-color: #dce2d4; }
.faq summary { font-size: 15px; }
.faq p { font-size: 14px; color: #58634f; }
.editorial-box { padding: 36px; background: #fff5e7; border-radius: 28px; }
footer { background: #eaf0e3; color: #4a5a43; }
.footer-brand { color: #3c5035; }
.footer-brand span { color: var(--pink); }
.footer-bottom { border-color: #cbd8c2; color: #5e6b54; }
.footer-links a:hover { color: var(--pink-dark); }
.article-body p { color: #4f5848; }
.toc { background: #fff3df; }
.guide-essentials { background: #eff4e9; border-color: #d9e3cd; }
.article-body .author-card { background: #fff4e4; border-radius: 24px; }
.author-avatar { background: #f2dab4; color: #795430; }
.benefit-table { border-radius: 22px; }
.benefit-table caption { background: #e8efdf; }
.benefit-table thead th { background: #f7f9f2; }
.mobile-cta { background: #fffdf9f5; }
.mobile-cta>a { border-radius: 28px; }
@media(max-width:1100px) {
  .hero-grid { gap: 35px; }
  .hero h1 { font-size: 30px; }
  .purpose-grid { gap: 12px; }
  .purpose-card { padding-inline: 17px; }
}
@media(max-width:850px) {
  .hero-grid { grid-template-columns: 1fr 1fr; padding-block: 35px; gap: 26px; }
  .hero h1 { font-size: 26px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-description { font-size: 13px; }
  .hero-lead { font-size: 14px; }
  .eyebrow { font-size: 10px; padding: 6px 10px; }
  .offer-value { font-size: 58px; }
  .offer-value>span { font-size: 12px; }
  .offer-top { font-size: 10px; padding: 16px; }
  .offer-caution { padding-inline: 20px; }
  .purpose-card { min-height: 175px; }
  .hero-bottom { font-size: 11px; }
}
@media(max-width:600px) {
  .hero-grid { grid-template-columns: 1fr; padding-block: 26px 30px; gap: 28px; }
  .hero h1 { font-size: 28px; line-height: 1.7; }
  .hero h1>span { font-size: inherit; }
  .hero-lead { margin-top: 16px; font-size: 13px; }
  .hero-benefit-line { font-size: 12px; margin-top: 13px; }
  .hero-benefit-line strong { font-size: 20px; }
  .hero-description { margin-top: 13px; }
  .hero-actions { margin-top: 18px; }
  .hero-actions .button { padding: 15px 22px; font-size: 13px; }
  .hero-meta { margin-top: 14px; }
  .welcome-note { margin-top: 19px; gap: 11px; }
  .welcome-avatar { flex-basis: 36px; height: 36px; font-size: 17px; }
  .welcome-note p { font-size: 11px; }
  .offer-value { font-size: 70px; }
  .offer-value>span { font-size: 14px; }
  .offer-top { font-size: 12px; padding: 17px 22px; }
  .hero-bottom { gap: 8px; }
  .hero-bottom>span { flex-basis: 100%; }
  .hero-bottom>p { font-size: 11px; }
  .hero-bottom>a { font-size: 11px; }
  h2 { font-size: 25px; }
  .section { padding-block: 46px; }
  .section-label { font-size: 11px; }
  .purpose-grid { gap: 12px; }
  .purpose-card { min-height: 182px; padding: 19px 15px 40px; border-radius: 20px; }
  .purpose-card h3 { font-size: 14px; }
  .purpose-card p { font-size: 11px; }
  .start-panel { padding: 26px 22px; }
  .start-panel p,.start-action>p { font-size: 12px; }
  .offer-caution { font-size: 11px; padding-inline: 22px; }
  .editorial-box { width: calc(100% - 36px); padding: 27px 22px; }
  .article-body p { font-size: 14px; }
  .article-cta p { font-size: 12px; }
  .mobile-cta>a { font-size: 12px; }
  .mobile-cta>span { color: #56634b; }
}
@media(prefers-reduced-motion:reduce) {
  .button:hover { transform: none; }
}

/* 特典の違いと、社員K本人の暮らしのヒント。 */
.strength-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.strength-card { min-width: 0; padding: 32px; border-radius: 26px; background: #edf3e9; border: 1px solid #d5e0cd; display: flex; flex-direction: column; align-items: start; }
.strength-card h3 { font-size: 28px; line-height: 1.65; margin: 18px 0; }
.strength-card h3 em { font-style: normal; color: #943a2b; }
.strength-card p { font-size: 14px; line-height: 2; margin-bottom: 18px; }
.strength-card p.strength-note,.strength-note { font-size: 12px; line-height: 1.95; color: #5d6257; }
.strength-card .text-link { margin-top: auto; }
.strength-peach { background: #fff0e4; border-color: #eddbc8; }
.point-comparison { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.point-comparison>span { font-size: 12px; }
.point-comparison strong { display: block; font-size: 26px; color: #943a2b; }
.point-comparison small { font-size: 12px; margin-left: 3px; }
.value-source { font-size: 11px; color: #5d6257; margin-top: 18px; line-height: 2; }
.value-source a { text-decoration: underline; text-underline-offset: 3px; }
.lifestyle-section { background: #f1f5ed; }
.lifestyle-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.lifestyle-panel p { font-size: 14px; line-height: 2.1; margin-top: 20px; }
.lifestyle-panel p.strength-note { font-size: 12px; }
.lifestyle-panel .text-link { margin-top: 20px; }
.experience-label { display: block; margin-top: 12px; color: #5d6257; font-size: 11px; }
.saving-example { background: #fffdf9; border-radius: 20px; padding: 22px; margin-top: 22px; }
.saving-example>span { font-size: 12px; display: block; }
.saving-example>strong { display: block; font-size: 30px; color: #943a2b; line-height: 1.7; }
.saving-example strong>span { font-size: 14px; display: block; }
.saving-examples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.saving-examples>div { padding: 18px; border-radius: 18px; background: #edf3e9; min-width: 0; }
.saving-examples span,.saving-examples small { display: block; font-size: 12px; }
.saving-examples strong { display: block; font-size: 24px; color: #943a2b; margin: 6px 0; }
.saving-examples small { font-size: 10px; }
.connection-estimator { background: #fff3e5; border: 1px solid #e1d6c3; border-radius: 22px; padding: 26px; margin-top: 26px; }
.connection-estimator h3 { font-size: 20px; }
.savings-fields { display: grid; gap: 18px; margin-top: 22px; }
.savings-fields label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.savings-fields input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #8c9c84; border-radius: 10px; padding: 12px; font: inherit; color: #393c35; background: #fffdf9; }
.article-body .connection-estimator p.strength-note { font-size: 12px; margin-top: 18px; }
.savings-result { padding: 22px; background: #fffdf9; border-radius: 18px; margin: 20px 0; overflow-wrap: anywhere; }
.savings-result>span { display: block; font-size: 12px; line-height: 1.9; }
.savings-result strong { display: block; font-size: 30px; line-height: 1.7; color: #943a2b; margin: 7px 0; }
.article-body .connection-estimator p.fine-print { font-size: 11px; }
@media(max-width:850px) { .lifestyle-panel { grid-template-columns: 1fr; gap: 20px; } }
@media(max-width:600px) {
  .strength-grid { grid-template-columns: 1fr; gap: 16px; }
  .strength-card { padding: 24px; }
  .strength-card h3 { font-size: 25px; }
  .saving-examples { gap: 10px; }
  .saving-examples>div { padding: 14px 12px; }
  .saving-examples strong { font-size: 20px; }
  .connection-estimator { padding: 22px 18px; }
  .savings-result { padding: 18px; }
  .savings-result strong { font-size: 26px; }
}

/* 編集ガイドとしての情報階層・回遊・操作の仕上げ */
.page-top.section { padding-top: 28px; }
.page-top h1 { font-size: 34px; line-height: 1.65; }
.page-top .page-description { font-size: 14px; margin-top: 16px; }
.library-result-heading { font-size: 20px; margin-bottom: 20px; }
.page-jumps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 24px; border-bottom: 1px solid var(--line); }
.page-jumps>span { font-size: 11px; color: var(--muted); margin-right: auto; }
.page-jumps a { font-size: 12px; background: #f3f5ed; border: 1px solid #e3e8d9; padding: 9px 14px; border-radius: 24px; min-height: 44px; display: inline-flex; align-items: center; }
.page-jumps a:hover { background: #e6eddb; color: #405334; }
.library-tools { display: flex; gap: 18px; align-items: end; margin-top: 18px; flex-wrap: wrap; }
.library-tools>div { flex: 1; max-width: 500px; }
.guide-search { max-width: none; background: #f4f6ed; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.7fr); gap: 8px 28px; margin-block: 28px; }
.guide-search>label { grid-column: 1; grid-row: 1; }
.guide-search>input { grid-column: 1; grid-row: 2; margin-top: 0; max-width: none; }
.guide-search .library-tools { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.guide-search .library-tools>div { max-width: none; }
.guide-search #search-status { grid-column: 1 / -1; margin-top: 4px; }
.guide-search input { min-height: 48px; border-radius: 12px; }
.library-tools select { width: 100%; min-height: 48px; padding: 11px 14px; margin-top: 9px; background: #fffefa; color: var(--ink); border: 1px solid #b8c5b0; border-radius: 12px; font: inherit; font-size: 14px; }
select:focus-visible,.editorial-table:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.filter-reset { border: 1px solid #bdc9b4; background: #fffefa; border-radius: 22px; min-height: 46px; padding: 10px 18px; color: #405936; font-size: 12px; }
.card-read-time { font-size: 11px; color: #626a58; margin-top: auto; margin-bottom: 16px; }
.article-card .text-link { margin-top: 0; border-top: 1px solid #e7e9de; padding-top: 14px; }
.article-header { max-width: 740px; }
.article-header h1 { font-size: 34px; line-height: 1.65; letter-spacing: .025em; }
.article-meta { font-size: 11px; line-height: 2; }
.article-meta a { text-decoration: underline; text-underline-offset: 3px; }
.article-body section { scroll-margin-top: 115px; }
.article-body p { font-size: 16px; line-height: 2.15; overflow-wrap: anywhere; }
.article-body section>h2 { border-left: 4px solid #cbdabf; padding-left: 18px; font-size: 25px; }
.article-body .author-card h2 { border: 0; padding-left: 0; }
.article-body .checklist-box>p,.article-body .sources p { font-size: 12px; }
.article-body .author-card p,.article-body .article-cta p { font-size: 13px; }
.article-body .author-card h2 { font-size: 18px; }
.aside-box { padding: 20px; background: #fff9ef; top: 102px; max-height: calc(100vh - 122px); overflow-y: auto; }
.aside-box h2 { font-size: 20px; }
.aside-box p { margin-block: 12px; }
.aside-toc { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.aside-toc strong { display: block; font-size: 12px; margin-bottom: 10px; color: #4d6542; }
.aside-toc a { display: block; font-size: 11px; line-height: 1.8; padding: 7px 0; border-bottom: 1px dashed #e3e4d8; }
.editorial-table { overflow-x: auto; margin-top: 28px; border: 1px solid #dfe4d5; border-radius: 20px; background: #fffefa; scrollbar-color: #aebd9f #f1f4e9; }
.editorial-table table { border-collapse: collapse; width: 100%; min-width: 560px; text-align: left; font-size: 12px; line-height: 1.9; }
.editorial-table caption { text-align: left; font-size: 16px; font-weight: 700; padding: 18px 20px; background: #edf3e5; }
.editorial-table th,.editorial-table td { padding: 16px; border-bottom: 1px solid #e4e7db; vertical-align: top; }
.editorial-table thead { background: #f7f8ef; font-size: 11px; }
.editorial-table tbody th { width: 23%; font-weight: 650; color: #4f6543; }
.editorial-table tr:last-child>* { border-bottom: 0; }
.article-body p.editorial-table-note { margin: 14px 4px 30px; font-size: 12px; line-height: 2; }
.editorial-flow { padding: 25px; border-radius: 22px; background: #fff3e3; }
.editorial-flow ol { list-style: none; padding: 0; margin: 20px 0 0; }
.editorial-flow li { position: relative; border-left: 2px solid #d5dfc8; padding: 0 0 24px 24px; margin-left: 7px; }
.editorial-flow li:last-child { padding-bottom: 0; }
.editorial-flow li::before { content: ''; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #b44735; }
.editorial-flow li>span { font-size: 11px; color: #526a43; display: block; }
.editorial-flow strong { font-size: 15px; }
.article-body .editorial-flow p { font-size: 13px; margin-top: 6px; }
.article-calculator .calculator { background: #fff8eb; }
.article-body .calculator p { font-size: 12px; }
.article-body .calculator p.fine-print { font-size: 11px; }
.article-body .calculator .calc-intro { margin: 0; }
@media(max-width:850px) {
  .page-jumps { gap: 9px; }
  .page-jumps>span { flex-basis: 100%; margin-bottom: 4px; }
}
@media(max-width:600px) {
  .page-top h1 { font-size: 27px; }
  .guide-search { grid-template-columns: 1fr; gap: 8px; }
  .guide-search .library-tools { grid-column: 1; grid-row: 3; margin-top: 12px; }
  .page-jumps { padding-block: 21px; }
  .page-jumps a { font-size: 11px; padding: 8px 12px; }
  .article-header h1 { font-size: 27px; }
  .article-body p { font-size: 15px; line-height: 2.1; }
  .article-body section>h2 { font-size: 22px; padding-left: 14px; }
  .article-meta { font-size: 10px; }
  .article-meta>span { margin-inline: 5px; }
  .article-summary { font-size: 14px; }
  .editorial-table table { min-width: 510px; }
  .editorial-table th,.editorial-table td { padding: 13px; }
  .editorial-table caption { font-size: 14px; padding: 16px; }
  .editorial-flow { padding: 22px 18px; }
  .library-tools { align-items: stretch; }
  .library-tools>div { flex-basis: 100%; }
  .filter-reset { align-self: start; }
}