.tester-page { min-height:100vh; height:auto; color:#343e56; background:#f7faff; font-size:17px; font-weight:500; line-height:1.7; opacity:1; animation:none; overflow-x:clip; }
.tester-page [hidden] { display:none !important; }
.tester-page .container { width:min(1160px,calc(100% - 48px)); }
.tester-page button, .tester-page input, .tester-page textarea { font:inherit; }
.tester-page svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.tester-page .tester-icons { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.tester-page button { cursor:pointer; }
.tester-page a, .tester-page button, .tester-page label { -webkit-tap-highlight-color:transparent; }
.tester-page button:focus-visible, .tester-page a:focus-visible { outline:3px solid #9476db; outline-offset:4px; }
.tester-header { background:rgba(255,255,255,.95); border-bottom:1px solid #eeedf7; }
.tester-header .nav { min-height:78px; gap:24px; padding:16px 0; flex-wrap:nowrap; }
.tester-header .brand { min-width:0; }
.tester-header #toplogo { width:215px; height:auto; }
.tester-nav { display:flex; gap:25px; margin-left:auto; color:#5d5877; font-size:15px; font-weight:700; }
.tester-nav a:hover { color:#7957c5; }
.tester-back { padding:9px 17px; border:1px solid #e1d8f6; border-radius:999px; color:#7155a8; background:#faf8ff; font-size:14px; font-weight:700; white-space:nowrap; }
.tester-preview { padding:10px 20px; color:#6e6682; background:#eeeafb; text-align:center; font-size:13px; font-weight:600; }
.tester-preview span { margin-right:9px; color:#7454b3; font-size:11px; font-weight:900; letter-spacing:.08em; }
.tester-hero { position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:55px; padding-top:35px; padding-bottom:40px; align-items:center; }
.tester-eyebrow { margin:0 0 10px; color:#8066bd; font-size:12px; font-weight:800; letter-spacing:.12em; }
.tester-hero-copy { min-width:0; }
.tester-hero-copy > .tester-eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:19px; color:#776095; font-size:13px; letter-spacing:.08em; animation:testerHeroFade .6s ease .04s both; }
.tester-hero-copy > .tester-eyebrow::before { width:25px; height:3px; flex-shrink:0; border-radius:999px; background:linear-gradient(90deg,#54abe8,#a582d8); content:''; }
.tester-hero h1 { margin:0 0 22px; color:#2d3651; font-size:50px; font-weight:900; line-height:1.45; letter-spacing:.015em; }
.tester-title-intro { display:block; margin-bottom:12px; color:#45506b; font-size:clamp(22px,.64em,30px); font-weight:800; animation:testerHeadlineIntro .7s cubic-bezier(.16,1,.3,1) .1s both; }
.tester-title-main { position:relative; isolation:isolate; display:flex; width:max-content; max-width:100%; align-items:center; gap:.13em; white-space:nowrap; animation:testerHeadlineEnter .8s cubic-bezier(.16,1,.3,1) .24s both; }
.tester-title-main::after { position:absolute; z-index:-1; left:7px; right:0; bottom:-4px; height:.17em; border-radius:999px; background:linear-gradient(90deg,rgba(83,166,234,.18),rgba(161,125,221,.2),rgba(227,160,196,.15)); content:''; transform-origin:left; animation:testerHeadlineUnderline .75s cubic-bezier(.16,1,.3,1) .7s both; }
.tester-title-speed { position:relative; display:inline-block; padding:.01em .18em .06em; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:.27em; color:#fff; background:linear-gradient(125deg,#3b9de3,#8462d7); box-shadow:0 7px 18px rgba(118,97,194,.18),inset 0 1px 0 rgba(255,255,255,.3); letter-spacing:.02em; transform:skewX(-5deg); animation:testerSpeedPop .75s cubic-bezier(.34,1.56,.64,1) .34s both; }
.tester-title-speed::after { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.45) 50%,transparent 75%); content:''; pointer-events:none; transform:translateX(-150%); animation:testerTitleShine 1s ease .65s both; }
.tester-title-rest { display:inline-block; background:linear-gradient(105deg,#438fd6,#8662cf 68%,#cb74a7); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.tester-lead { margin:0; color:#5b637e; font-size:20px; font-weight:700; animation:testerHeroFade .65s ease .45s both; }
.tester-hero-art { position:relative; padding:17px 6px; }
.tester-hero-art > img { position:relative; width:100%; height:auto; padding:9px; border-radius:23px; background:#fff; box-shadow:0 14px 45px rgba(98,101,159,.13); animation:testerArtFloat 7s ease-in-out infinite; }
.tester-art-glow { position:absolute; inset:-30px -25px; border-radius:50%; background:radial-gradient(ellipse,rgba(139,204,245,.21),rgba(192,178,246,.16) 53%,transparent 70%); }
.tester-art-star { position:absolute; font-size:32px; animation:testerStar 5s ease-in-out infinite; }
.tester-art-star.is-blue { left:-18px; top:-9px; color:#8eb5e3; }
.tester-art-star.is-pink { right:-11px; bottom:2px; color:#d695ba; font-size:26px; animation-delay:-2s; }
.tester-layout { display:grid; grid-template-columns:.93fr 1.07fr; gap:25px; align-items:start; padding-bottom:65px; }
.tester-panel { min-width:0; padding:29px; border:1px solid #e6e3f3; border-radius:25px; background:#fff; box-shadow:0 8px 35px rgba(68,87,132,.04); animation:testerPanelIn .5s ease both; }
.tester-application { animation-delay:.1s; }
.tester-panel-heading { display:flex; margin-bottom:24px; align-items:center; gap:12px; }
.tester-panel-heading h2 { margin:0; color:#424960; font-size:25px; font-weight:900; line-height:1.5; }
.tester-heading-icon { display:grid; width:43px; height:43px; flex-shrink:0; place-items:center; border-radius:14px; color:#6c9ac1; background:#edf6fd; }
.tester-heading-icon.is-purple { color:#9370c6; background:#f2ecfd; }
.tester-points { padding:0; margin:0; list-style:none; }
.tester-points li { display:flex; padding:20px 0; align-items:flex-start; gap:14px; border-top:1px solid #eeeaf5; }
.tester-points li:first-child { padding-top:5px; border-top:0; }
.tester-points li:last-child { padding-bottom:2px; }
.tester-point-icon { display:grid; width:42px; height:42px; margin-top:2px; place-items:center; flex-shrink:0; border-radius:13px; color:#658fb8; background:#edf5ff; transition:transform .3s; }
.tester-point-icon.is-mint { color:#4e9d89; background:#eef9f4; }
.tester-point-icon.is-pink { color:#bd79a4; background:#fff0f7; }
.tester-point-icon.is-lime { color:#799955; background:#f1f8e9; }
.tester-point-icon.is-purple { color:#9674bd; background:#f4eefc; }
.tester-points h3 { margin:0 0 7px; color:#55506b; font-size:18px; font-weight:800; line-height:1.75; }
.tester-points p { margin:0; color:#706a83; font-size:16px; line-height:1.9; }
.tester-field { margin-bottom:23px; }
.tester-field label { display:flex; margin-bottom:11px; align-items:center; gap:8px; flex-wrap:wrap; color:#574e6b; font-size:18px; font-weight:700; }
.tester-field-number { display:grid; width:27px; height:27px; margin-right:2px; place-items:center; flex-shrink:0; border-radius:8px; color:#8567b9; background:#f0eafa; font-size:14px; font-weight:800; }
.tester-required, .tester-optional { display:inline-block; font-size:12px; font-weight:700; line-height:1.8; }
.tester-required { padding:1px 8px; border-radius:6px; color:#b25a7e; background:#fff0f5; }
.tester-optional { color:#82768f; }
.tester-input { display:block; width:100%; min-width:0; min-height:53px; padding:12px 14px; border:1.5px solid #ded8ea; border-radius:12px; outline:none; color:#48435e; background:#fcfcff; font-size:17px !important; font-weight:500; line-height:1.8; transition:border-color .2s,box-shadow .2s,background .2s; }
.tester-input::placeholder { color:#8a8299; }
.tester-input:focus { border-color:#9b7ad5; background:#fff; box-shadow:0 0 0 4px #f1ebfc; }
.tester-textarea { min-height:143px; resize:vertical; }
.tester-help { margin:8px 2px 0; color:#83768f; font-size:13px; }
.tester-field-footer { display:flex; margin-top:9px; justify-content:space-between; gap:10px; color:#897c94; font-size:13px; }
.tester-primary-button, .tester-secondary-button { position:relative; display:inline-flex; min-height:54px; padding:13px 23px; align-items:center; justify-content:center; gap:12px; border:1px solid transparent; border-radius:14px; font-size:17px !important; font-weight:800; transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s; }
.tester-primary-button { color:#fff; background:linear-gradient(115deg,#398ada,#8559d0); box-shadow:0 7px 20px rgba(120,94,196,.19); }
#testerForm > .tester-primary-button { width:100%; }
.tester-primary-button svg { width:21px; height:21px; transition:transform .25s; }
.tester-primary-button:hover { transform:translateY(-3px); box-shadow:0 11px 25px rgba(120,94,196,.25); }
.tester-primary-button:hover svg { transform:translateX(4px); }
.tester-primary-button:active { transform:scale(.98); }
.tester-secondary-button { color:#78648e; border-color:#ded4ea; background:#fff; }
.tester-error { margin:0 0 15px; padding:12px 14px; border-radius:11px; color:#aa4f78; background:#fff0f5; font-size:15px; line-height:1.8; }
.tester-footer { padding:26px 0; border-top:1px solid #e9e3f2; background:#fff; }
.tester-footer > div { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.tester-footer img { width:170px; height:auto; }
.tester-footer a { color:#866e9d; font-size:14px; }
.tester-dialog { width:min(700px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:29px; overflow:auto; border:1px solid #fff; border-radius:24px; color:#5e4c70; background:#fff; box-shadow:0 24px 100px rgba(58,46,80,.18); }
.tester-dialog::backdrop { background:rgba(57,45,80,.3); backdrop-filter:blur(7px); }
.tester-dialog[open] { animation:testerDialogIn .3s cubic-bezier(.22,.8,.25,1) both; }
.tester-dialog-heading { display:flex; margin-bottom:23px; align-items:center; justify-content:space-between; gap:15px; }
.tester-dialog-heading h2 { margin:0; color:#66507b; font-size:25px; font-weight:800; }
.tester-dialog-close { display:grid; width:38px; height:38px; padding:0; place-items:center; flex-shrink:0; border:0; border-radius:50%; color:#9579ac; background:#f3edf9; font-size:26px !important; line-height:1; }
.tester-review { padding:21px; margin:0; border:1px solid #e6def1; border-radius:17px; background:#fdfbff; }
.tester-review > div { margin-bottom:20px; }
.tester-review > div:last-child { margin-bottom:0; }
.tester-review dt { margin-bottom:6px; color:#896d9a; font-size:14px; }
.tester-review dd { margin:0; color:#655075; font-size:17px; font-weight:600; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.tester-review-note { padding:13px 15px; margin:18px 0 0; border-radius:11px; color:#826991; background:#f4eef9; font-size:14px; line-height:1.8; }
.tester-dialog-actions { display:flex; padding-top:22px; align-items:center; justify-content:space-between; gap:12px; }
.tester-done { position:fixed; width:min(620px,calc(100% - 32px)); padding:38px 26px; text-align:center; }
.tester-done-icon { display:grid; width:77px; height:77px; margin:0 auto 22px; place-items:center; border-radius:26px; color:#55a28b; background:#eaf9f2; }
.tester-done-icon svg { width:37px; height:37px; }
.tester-done[open] .tester-done-icon { animation:testerCheckPop .6s cubic-bezier(.34,1.56,.64,1) both; }
.tester-done h2 { margin:0 0 17px; color:#805e9a; font-size:26px; font-weight:800; }
.tester-done > p:not(.tester-eyebrow):not(.tester-review-note) { margin:0; color:#81658e; font-size:16px; line-height:1.9; }
.tester-done .tester-primary-button { margin-top:23px; }
.tester-done-star { position:absolute; top:53px; color:#99acd9; font-size:29px; opacity:0; }
.tester-done[open] .tester-done-star { animation:testerDoneStar 1.5s ease-out both; }
.tester-done-star.star-left { left:21%; --star-direction:-30px; }
.tester-done-star.star-right { right:21%; color:#df9fc1; --star-direction:30px; animation-delay:.1s !important; }
@media (hover:hover) { .tester-points li:hover .tester-point-icon { transform:translateY(-2px) rotate(-7deg); } }
/* 表示時だけ順に現れ、読み始める頃には見出しの動きを止める。 */
@keyframes testerHeroFade { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes testerHeadlineIntro { from { opacity:0; transform:translateY(15px); filter:blur(3px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes testerHeadlineEnter { from { opacity:0; transform:translateX(-25px); } to { opacity:1; transform:none; } }
@keyframes testerSpeedPop { 0% { transform:translateX(-8px) scale(.8) skewX(-5deg); } 65% { transform:scale(1.04) skewX(-5deg); } 100% { transform:scale(1) skewX(-5deg); } }
@keyframes testerHeadlineUnderline { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes testerTitleShine { from { transform:translateX(-150%); } to { transform:translateX(150%); } }
@keyframes testerArtFloat { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(0); } }
@keyframes testerStar { 0%,100% { opacity:.6; transform:rotate(-10deg) scale(.9); } 50% { opacity:1; transform:rotate(10deg) scale(1.1); } }
@keyframes testerPanelIn { from { opacity:0; transform:translateY(13px); } to { opacity:1; transform:none; } }
@keyframes testerDialogIn { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes testerCheckPop { from { transform:scale(.65) rotate(-10deg); } to { transform:scale(1) rotate(0); } }
@keyframes testerDoneStar { 0% { opacity:0; transform:translateY(10px) scale(.5); } 25% { opacity:1; } 100% { opacity:0; transform:translate(var(--star-direction),-27px) rotate(40deg) scale(1); } }
@media (max-width:1000px) { .tester-hero { gap:35px; } .tester-hero h1 { font-size:39px; } .tester-panel { padding:24px; } .tester-panel-heading { gap:10px; } .tester-panel-heading h2 { font-size:22px; } .tester-points h3 { font-size:17px; } .tester-points p { font-size:15px; } .tester-nav { display:none; } }
@media (max-width:800px) { .tester-layout { grid-template-columns:1fr; max-width:640px; } .tester-hero { grid-template-columns:1fr 1fr; gap:25px; } .tester-hero h1 { font-size:clamp(26px,4vw,32px); } .tester-lead { font-size:16px; } .tester-points li { padding:17px 0; } .tester-points h3 { font-size:18px; } .tester-points p { font-size:16px; } }
@media (max-width:600px) {
  .tester-page .container { width:calc(100% - 28px); }
  .tester-header .nav { min-height:66px; padding:12px 0; gap:12px; }
  .tester-header #toplogo { width:162px; }
  .tester-back { padding:8px 10px; font-size:12px; }
  .tester-preview { padding:9px 10px; font-size:12px; }
  .tester-preview span { margin-right:5px; font-size:10px; }
  .tester-hero { grid-template-columns:1fr; gap:12px; padding-top:27px; padding-bottom:29px; }
  .tester-eyebrow { font-size:11px; }
  .tester-hero h1 { font-size:clamp(27px,8.5vw,44px); margin-bottom:21px; line-height:1.45; }
  .tester-hero-copy > .tester-eyebrow { margin-bottom:17px; font-size:12px; }
  .tester-title-intro { margin-bottom:13px; }
  .tester-lead { font-size:17px; margin-bottom:14px; }
  .tester-hero-art { width:88%; max-width:410px; margin:0 auto; padding-top:19px; padding-bottom:15px; }
  .tester-hero-art > img { padding:7px; border-radius:17px; }
  .tester-art-glow { inset:-15px; }
  .tester-art-star.is-blue { left:-14px; top:-3px; font-size:26px; }
  .tester-art-star.is-pink { right:-10px; font-size:23px; }
  .tester-layout { gap:19px; padding-bottom:40px; }
  .tester-panel { padding:22px 19px; border-radius:21px; }
  .tester-panel-heading { margin-bottom:21px; gap:10px; }
  .tester-panel-heading h2 { font-size:22px; }
  .tester-heading-icon { width:36px; height:36px; border-radius:11px; }
  .tester-heading-icon svg { width:21px; height:21px; }
  .tester-points li { gap:12px; padding:18px 0; }
  .tester-point-icon { width:34px; height:34px; border-radius:11px; }
  .tester-point-icon svg { width:21px; height:21px; }
  .tester-points h3 { font-size:17px; margin-bottom:6px; }
  .tester-points p { font-size:15px; line-height:1.9; }
  .tester-field label { font-size:17px; gap:7px; }
  .tester-field { margin-bottom:22px; }
  .tester-input { font-size:16px !important; padding:11px 12px; min-height:51px; }
  .tester-textarea { min-height:155px; }
  .tester-primary-button, .tester-secondary-button { font-size:16px !important; min-height:53px; padding:13px 17px; }
  .tester-footer img { width:145px; }
  .tester-footer a { font-size:12px; }
  .tester-dialog { padding:23px 17px; max-height:calc(100dvh - 26px); border-radius:21px; }
  .tester-dialog-heading h2 { font-size:22px; }
  .tester-review { padding:18px 15px; }
  .tester-review dd { font-size:16px; }
  .tester-dialog-actions { flex-direction:column-reverse; }
  .tester-dialog-actions button { width:100%; }
  .tester-done { padding:31px 18px; }
  .tester-done h2 { font-size:23px; }
  .tester-done br { display:none; }
  .tester-done > p:not(.tester-eyebrow):not(.tester-review-note) { font-size:15px; }
}
@media (max-width:360px) { .tester-header #toplogo { width:145px; } .tester-panel { padding:21px 16px; } .tester-panel-heading h2 { font-size:21px; } .tester-points h3 { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { .tester-page *, .tester-page *::before, .tester-page *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .tester-done-star { display:none; } }