:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #20374f;
  background: #edf5ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-bottom: 7rem; }
body { margin: 0; font-size: 1rem; line-height: 1.8; }
a { color: #0753ee; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid #ffb321; outline-offset: 5px; }
.page { width: min(100%, 1440px); margin: auto; background: #fff; overflow: hidden; box-shadow: 0 0 55px #bcd3ec45; }
.panel { position: relative; width: 100%; margin: 0; background: #fff; }
.panel picture, .panel picture img { display: block; width: 100%; height: auto; }
.hero { max-width: 1440px; margin: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; background: white; padding: 8px 16px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.sticky-consult { position: fixed; left: 0; right: 0; bottom: 0; background: #ffffffee; border-top: 1px solid #d4e6f2; box-shadow: 0 -4px 15px #19507718; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); z-index: 20; backdrop-filter: blur(12px); }
.line-button { display: block; width: min(100%, 560px); margin: auto; text-decoration: none; transform-origin: center; animation: linePulse 2.8s ease-in-out infinite; will-change: transform; }
.line-button img { display: block; width: 100%; height: auto; }
.line-button:hover, .line-button:focus-visible { animation-play-state: paused; transform: scale(1.045); }
@keyframes linePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .line-button { animation: none; } .line-button:hover, .line-button:focus-visible { transform: none; } }
.legal-footer { padding: 18px 18px 100px; text-align: center; background: #fff; color: #6d8093; font-size: 11px; line-height: 1.6; }
.legal-links { display: flex; justify-content: center; align-items: center; gap: 7px; }
.legal-links a { color: #6d8093; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }
.legal-footer small { display: block; margin-top: 5px; font-size: 10px; color: #91a0ad; }
dialog { border: 1px solid #c9def0; border-radius: 14px; max-width: calc(100% - 32px); width: 430px; padding: 36px 26px; color: #001e45; box-shadow: 0 25px 90px #061f4855; }
dialog::backdrop { background: #00152c99; }
dialog h2 { font-size: 1.4rem; margin: 0 0 1rem; }
dialog p { font-size: 1rem; }
.dialog-close { position: absolute; right: 12px; top: 5px; font-size: 1.6rem; border: 0; background: transparent; color: #001e45; }
.dialog-dismiss { border: 0; border-radius: 8px; background: #0753ee; color: #fff; padding: 8px 20px; font-weight: 700; }
body:has(dialog[open]) { overflow: hidden; }
.legal-page { width: min(100% - 32px, 760px); margin: 0 auto; padding: 48px 0 120px; color: #20374f; }
.legal-page h1 { color: #001e45; line-height: 1.3; }
.legal-page p { font-size: 1rem; }

@media (min-width: 721px) {
  .sticky-consult { padding-left: 28px; padding-right: 28px; }
  .legal-footer { padding-bottom: 125px; }
}

/* Xの教科書：参考ページの追従CTA */
:root { background: #f1f5ff; }
.page { width: min(100%, 1000px); }
.sticky-consult { padding: 14px 20px calc(8px + env(safe-area-inset-bottom)); background: #fffffff2; }
.line-button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(100%, 500px); min-height: 74px; padding: 10px 22px; border: 1px solid #9cf3b9; border-radius: 50px; color: white; background: linear-gradient(175deg,#22dd78 0%,#06c755 53%,#00a947 100%); box-shadow: 0 5px 0 #01843b,0 13px 24px #04983f33,inset 0 2px 1px #98f3be88; font-weight: 800; line-height: 1.35; }
.cta-copy { display: flex; flex-direction: column; align-items: center; font-size: 20px; letter-spacing: .02em; }
.line-symbol { position: relative; display: grid; place-items: center; flex: 0 0 44px; height: 39px; border-radius: 50%; background: white; color: #06a94b; font: 800 12px Arial,sans-serif; }
.line-symbol::after { content: ''; position: absolute; left: 11px; bottom: -5px; border-top: 10px solid white; border-right: 10px solid transparent; transform: rotate(10deg); }
.button-arrow { font: 700 34px/1 Arial,sans-serif; }
.cta-note { margin: 11px 0 0; text-align: center; color: #657386; font-size: 11px; line-height: 1.5; }
.legal-footer { padding-bottom: calc(158px + env(safe-area-inset-bottom)); }
@media(max-width:720px) {
 .sticky-consult { padding: 10px 14px calc(7px + env(safe-area-inset-bottom)); }
 .line-button { min-height: 66px; padding: 9px 17px; gap: 9px; }
 .cta-copy { font-size: clamp(15px,4.4vw,20px); letter-spacing: 0; }
 .line-symbol { flex-basis: 38px; height: 34px; font-size: 11px; }
 .cta-note { font-size: 10px; margin-top: 9px; }
}