:root{--bg-alt:#E6E5E2;--surface:#F7F6F4;--silver:#A8A8A8;--silver-lt:#C8C7C3;--gold:#6F5A16;--gold-lt:#83691E;--gold-deep:#6E5311;--ease:cubic-bezier(.4,0,.2,1);}
@font-face { font-family: "Noto Serif JP"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/NotoSerifJP-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif JP"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/NotoSerifJP-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif JP"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/NotoSerifJP-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif JP"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/NotoSerifJP-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
nav { display: flex; gap: 30px; flex-wrap: wrap; }
nav a { font-size: 0.62rem; letter-spacing: 0.3em; color: rgb(59, 59, 59); text-decoration: none; transition: color 0.3s; }
nav a:hover { color: rgb(111, 90, 22); }
.page-sub { font-size: 0.8rem; font-weight: 200; letter-spacing: 0.1em; color: var(--ink-muted); max-width: 560px; margin: 0px auto; line-height: 2; }
.article-body ul { list-style: none; margin: 2em 0px; padding: 26px 28px 26px 32px; background: var(--surface); border: 1px solid var(--gold-rim); box-shadow: rgba(215, 192, 120, 0.14) 0px 0px 0px 1px inset; position: relative; }
.article-body ul::before { content: ""; position: absolute; top: -9px; left: 26px; width: 9px; height: 24px; background: linear-gradient(180deg,var(--gold-lt),var(--gold)); clip-path: polygon(0px 0px, 100% 0px, 100% 78%, 50% 100%, 0px 78%); }
.article-body li { margin-bottom: 0.7em; line-height: 1.95; padding-left: 1.1em; position: relative; }
.article-body li::before { content: "◦"; position: absolute; left: 0px; color: var(--gold-deep); font-size: 0.85em; }
.article-body li:last-child { margin-bottom: 0px; }
.article-body blockquote { margin: 2em auto; max-width: 94%; padding: 22px 30px; background: var(--surface); border-left: 2px solid var(--gold-rim); color: var(--ink-mid); letter-spacing: 0.03em; line-height: 2; position: relative; }
.article-body blockquote::before { content: "｢"; position: absolute; top: 6px; left: 10px; font-size: 1.4rem; color: var(--gold-rim); line-height: 1; }
.article-body blockquote p { margin-bottom: 0px; }
.cta-box { max-width: 680px; margin: 0px auto 60px; padding: 32px 30px; background: var(--surface); border: 1px solid var(--gold-rim); box-shadow: rgba(215, 192, 120, 0.14) 0px 0px 0px 1px inset; text-align: center; }
.cta-box p { font-size: 0.72rem; letter-spacing: 0.06em; line-height: 2; color: var(--ink-mid); margin-bottom: 16px; }
.cta-box .btn-cta { font-family: var(--font); font-size: 0.72rem; letter-spacing: 0.22em; color: rgb(255, 248, 220); background: linear-gradient(135deg,var(--gold),var(--gold-lt)); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 14px 28px; cursor: pointer; box-shadow: rgba(160, 118, 30, 0.24) 0px 3px 20px; text-decoration: none; display: inline-block; }
.cta-box .cta-note { font-size: 0.6rem; letter-spacing: 0.06em; color: var(--ink-muted); margin-top: 12px; }
.related { max-width: 680px; margin: 0px auto 40px; padding: 26px 28px; background: var(--bg-alt); border: 1px solid var(--silver-lt); }
.related-h { font-size: 0.62rem; letter-spacing: 0.4em; color: var(--ink-muted); text-transform: uppercase; text-align: center; margin-bottom: 16px; }
.related a { display: block; font-size: 0.74rem; font-weight: 300; letter-spacing: 0.04em; line-height: 1.85; color: var(--ink-mid); text-decoration: none; padding: 10px 0px; border-bottom: 1px solid var(--silver-lt); transition: color 0.3s; }
.related a:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.related a:hover { color: var(--gold-deep); }
.related a::before { content: "▹ "; color: var(--gold-rim); }
.article-body a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.disclaimer { background: var(--bg-alt); border-top: 1px solid var(--silver-lt); padding: 32px 48px; text-align: center; }
.disclaimer-title { font-size: 0.55rem; letter-spacing: 0.55em; color: var(--ink-muted); text-transform: uppercase; display: block; margin-bottom: 14px; }
.disclaimer-body { font-size: 0.62rem; font-weight: 300; letter-spacing: 0.08em; line-height: 2.2; color: var(--ink-muted); max-width: 680px; margin: 0px auto 12px; }
.disclaimer-note { font-size: 0.55rem; letter-spacing: 0.1em; line-height: 2; color: var(--ink-muted); max-width: 680px; margin: 0px auto; }
footer { padding: 18px 48px; border-top: 1px solid var(--silver-lt); display: flex; align-items: center; justify-content: space-between; background: var(--bg); flex-wrap: wrap; gap: 10px; }
.f-name { font-size: 0.6rem; letter-spacing: 0.4em; color: var(--ink-muted); }
.f-copy { font-size: 0.56rem; letter-spacing: 0.2em; color: var(--ink-muted); }
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: fixed; top: 56px; left: 0px; right: 0px; z-index: 380; background: linear-gradient(rgba(247, 246, 244, 0.996) 0%, rgba(233, 232, 228, 0.996) 100%); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(215, 192, 120, 0.42); box-shadow: rgba(60, 50, 20, 0.13) 0px 10px 30px; display: flex; flex-direction: column; gap: 0px; transform: translateY(-110%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; pointer-events: none; }
.mobile-menu.open { transform: translateY(0px); visibility: visible; pointer-events: auto; }
.mobile-menu a { display: block; padding: 17px 28px; font-size: 0.78rem; letter-spacing: 0.42em; color: rgb(42, 42, 42); text-decoration: none; border-bottom: 1px solid rgba(168, 168, 168, 0.32); transition: color 0.2s, background 0.2s; }
.mobile-menu a:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.mobile-menu a:hover, .mobile-menu a:active { color: rgb(111, 90, 22); background: rgba(215, 192, 120, 0.14); }
@media (max-width: 768px){nav { display: none; }.article-body ul { padding: 22px 20px 22px 26px; }.article-body blockquote { padding: 18px 22px; }}
nav a { white-space: nowrap; }
@media (max-width: 899px){nav { display: none; }}
@media (min-width: 900px){.hamburger { display: none !important; }header { padding: 14px 20px; }nav { display: flex; flex-wrap: nowrap; gap: 14px; }nav a, nav .nav-drop-btn { letter-spacing: 0.1em; font-size: 0.585rem; }}
@media (min-width: 1200px){header { padding: 15px 32px; }nav { gap: 20px; }nav a, nav .nav-drop-btn { letter-spacing: 0.18em; font-size: 0.61rem; }}
@media (min-width: 1440px){header { padding: 15px 48px; }nav { gap: 28px; }nav a, nav .nav-drop-btn { letter-spacing: 0.26em; font-size: 0.64rem; }}
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 0.5em; margin: 0px; padding: 0px; background: none; border: 0px; border-radius: 0px; cursor: pointer; appearance: none; font-family: inherit; font-weight: inherit; line-height: inherit; font-size: 0.62rem; letter-spacing: 0.3em; color: rgb(59, 59, 59); white-space: nowrap; }
.nav-drop-btn:hover, .nav-drop.open > .nav-drop-btn { color: rgb(111, 90, 22); }
.nav-drop-caret { position: relative; display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; font-size: 0px; line-height: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.nav-drop-caret::before { content: ""; position: absolute; left: 1px; top: 0px; width: 5px; height: 5px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); opacity: 0.72; }
.nav-drop.open > .nav-drop-btn .nav-drop-caret { transform: rotate(180deg); }
.nav-drop-panel { position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%) translateY(-7px); min-width: 212px; max-width: calc(-32px + 100vw); padding: 2px 0px 0px; z-index: 12; background: linear-gradient(rgb(247, 246, 244) 0%, rgb(237, 236, 232) 100%); border: 1px solid rgba(215, 192, 120, 0.42); box-shadow: rgba(60, 50, 20, 0.16) 0px 14px 34px, rgba(255, 255, 255, 0.72) 0px 1px 0px inset; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.26s, transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), visibility linear 0.26s; }
.nav-drop.open > .nav-drop-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0px); transition-delay: 0s; }
.nav-drop-panel::before { content: ""; position: absolute; left: 0px; right: 0px; top: -16px; height: 16px; }
.nav-drop-panel a { display: block; padding: 11px 22px; font-size: 0.6rem; letter-spacing: 0.26em; line-height: 1.5; color: rgb(42, 42, 42); text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(168, 168, 168, 0.26); transition: color 0.2s, background 0.2s; }
.nav-drop-panel a:last-of-type { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.nav-drop-panel a:hover, .nav-drop-panel a:focus-visible { color: rgb(111, 90, 22); background: rgba(215, 192, 120, 0.13); }
.nav-drop-note { margin: 0px; padding: 10px 22px 12px; font-size: 0.55rem; letter-spacing: 0.13em; line-height: 1.85; color: rgb(79, 79, 79); border-top: 1px solid rgba(215, 192, 120, 0.42); background: rgba(215, 192, 120, 0.05); }
.mobile-menu { max-height: calc(-56px + 100vh); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu a { position: relative; }
.mm-group { display: block; padding: 16px 28px 9px; font-size: 0.6rem; letter-spacing: 0.42em; color: rgb(111, 90, 22); border-top: 1px solid rgba(215, 192, 120, 0.42); border-bottom: 1px solid rgba(168, 168, 168, 0.24); background: rgba(215, 192, 120, 0.07); }
.mobile-menu .mm-group ~ a { padding-left: 46px; color: rgb(59, 59, 59); }
.mobile-menu .mm-group ~ a::before { content: ""; position: absolute; left: 28px; top: 50%; width: 9px; height: 1px; background: rgba(215, 192, 120, 0.75); transform: translateY(-50%); }
.mm-note { margin: 0px; padding: 12px 28px 13px; font-size: 0.62rem; letter-spacing: 0.13em; line-height: 1.8; color: rgb(79, 79, 79); background: rgba(215, 192, 120, 0.05); border-bottom: 1px solid rgba(168, 168, 168, 0.32); }
.mobile-menu .mm-note ~ a { padding-left: 28px; color: rgb(42, 42, 42); }
.mobile-menu .mm-note ~ a::before { content: none; }
footer { flex-wrap: wrap; }
footer > .f-copy:first-child { text-align: center; font-size: 0.58rem; letter-spacing: 0.24em; line-height: 2; color: var(--ink-mid); }
footer > .f-copy:first-child a { color: inherit; }
footer > .f-copy:first-child a:hover { color: rgb(111, 90, 22); }
@media (min-width: 769px){footer > .f-copy:first-child { flex: 0 0 100%; padding-bottom: 13px; margin-bottom: 5px; border-bottom: 1px solid var(--gold-rim); }}
@media (prefers-reduced-motion: reduce){.nav-drop-panel, .nav-drop-caret { transition: none; }}
@media (min-width: 1000px){a#navSignupLink { background: var(--ink,#191919); color: rgb(247, 246, 244); border: 1px solid var(--ink,#191919); border-radius: 4px; padding: 6px 12px; white-space: nowrap; }a#navSignupLink:hover { opacity: 0.82; color: rgb(247, 246, 244); }a#navAuthLink { padding: 6px 2px; white-space: nowrap; border-bottom: 1px solid var(--silver,#A8A8A8); }body.night a#navSignupLink, html[data-koku="yoru"] a#navSignupLink { background: var(--night-gold,#C9A84C); color: var(--night-bg,#14161B); border-color: var(--night-gold,#C9A84C); }body.night a#navSignupLink:hover, html[data-koku="yoru"] a#navSignupLink:hover { color: var(--night-bg,#14161B); }body.night a#navAuthLink, html[data-koku="yoru"] a#navAuthLink { color: var(--night-ink,#E9E6DE); border-bottom-color: var(--night-gold,#C9A84C); }}
@media (min-width: 900px) and (max-width: 999.98px){a#navSignupLink { border-bottom: 2px solid rgba(160, 130, 40, 0.75); font-weight: 600; }body.night a#navSignupLink, html[data-koku="yoru"] a#navSignupLink { border-bottom-color: var(--night-gold,#C9A84C); }}
#mobileMenu a#mmSignupLink { display: block; margin: 12px 16px 6px; padding: 13px 12px; text-align: center; background: var(--ink,#191919); color: rgb(247, 246, 244); border: 1px solid var(--ink,#191919); border-radius: 4px; }
#mobileMenu a#mmAuthLink { display: block; margin: 0px 16px 10px; padding: 12px; text-align: center; border: 1px solid var(--silver,#A8A8A8); border-radius: 4px; }
body.night #mobileMenu a#mmSignupLink, html[data-koku="yoru"] #mobileMenu a#mmSignupLink { background: var(--night-gold,#C9A84C); color: var(--night-bg,#14161B); border-color: var(--night-gold,#C9A84C); }
body.night #mobileMenu a#mmAuthLink, html[data-koku="yoru"] #mobileMenu a#mmAuthLink { color: var(--night-ink,#E9E6DE); border-color: var(--night-gold,#C9A84C); }