/* 離脱防止ポップアップ「オンライン英会話診断」 markup: /ranking/modal_sodp.php / script: /js/sodp.js */
.sodp-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:rgba(0,0,0,.5);box-sizing:border-box}
.sodp-overlay[hidden]{display:none}
.sodp-overlay *,.sodp-overlay *::before,.sodp-overlay *::after{box-sizing:border-box}
html.sodp-lock{overflow:hidden}

.sodp-modal{position:relative;width:100%;max-width:690px;font-family:"Noto Sans JP",sans-serif;color:#333}
.sodp-close{position:absolute;top:-16px;right:-12px;z-index:2;width:40px;height:40px;padding:0 0 2px;border:2px solid #555;border-radius:50%;background:#fff;color:#333;font-size:22px;line-height:1;cursor:pointer}
.sodp-body{max-height:calc(100vh - 48px);overflow:hidden auto;background:#fff;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.sodp-head{padding:20px 48px;background:#1EC8AC;color:#fff;text-align:center;font-weight:700;font-size:clamp(15px,3.6vw,19px);line-height:1.4}
.sodp-inner{display:flex;flex-direction:column;gap:24px;padding:22px clamp(16px,4vw,26px) 28px}
.sodp-sp{display:none}
.sodp-head,.sodp-question,.sodp-option,.sodp-text{word-break:auto-phrase}

/* 進捗 */
.sodp-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:540px;margin:0 auto;padding:0;list-style:none}
.sodp-steps[hidden]{display:none}
.sodp-steps::before,.sodp-steps::after{content:"";position:absolute;left:12.5%;top:8px;height:3px}
.sodp-steps::before{right:12.5%;background:#DDE3E8}
.sodp-steps::after{width:var(--sodp-progress,0%);background:#1EC8AC}
.sodp-steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:700;font-size:16px;color:#9AA4AC}
.sodp-steps li::before{content:"";width:19px;height:19px;border-radius:50%;background:#DDE3E8}
.sodp-steps li.is-done,.sodp-steps li.is-current{color:#333}
.sodp-steps li.is-done::before,.sodp-steps li.is-current::before{background:#1EC8AC}

/* 質問 */
.sodp-question{margin:0 0 20px;padding-bottom:13px;font-weight:700;font-size:clamp(15px,3.6vw,18px);line-height:1.5;color:#333;background:repeating-linear-gradient(-45deg,#1EC8AC 0 2px,transparent 2px 5px) left bottom/100% 5px no-repeat}
.sodp-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sodp-option{display:flex;align-items:center;justify-content:center;min-height:66px;margin:0;padding:10px 12px;border:2px solid #E1E6EB;border-radius:6px;background:#fff;color:#333;font:inherit;font-size:15px;line-height:1.5;text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.sodp-option:hover{border-color:#1EC8AC}
.sodp-option.is-selected{border-color:#12A58C;background:#E8F8F4}

/* 結果 */
.sodp-result{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.sodp-banner{display:block;align-self:stretch;float:none;width:auto;margin:0;line-height:0;text-align:center}
.sodp-banner img{display:block;float:none;width:auto;height:auto;max-width:min(100%,310px);max-height:310px;margin:0 auto}
.sodp-text{font-weight:700;font-size:clamp(15px,3.6vw,18px);line-height:1.7;color:#111111}
.sodp-text p{margin:0}
.sodp-marker{background:linear-gradient(transparent 50%,#FFE500 50%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sodp-red{color:#E53935}
.sodp-cta{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:326px;min-height:56px;padding:12px 40px;border-radius:8px;background:#1EC8AC;box-shadow:0 4px 0 #129C85;color:#fff;font-weight:700;font-size:16px;text-decoration:none}
.sodp-cta::after{content:"";position:absolute;right:20px;top:50%;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;transform:translateY(-50%)}
.sodp-cta:hover{opacity:.85;color:#fff}

@media screen and (max-width:767px){
  .sodp-sp{display:inline}
  .sodp-head{padding:16px 40px}
  .sodp-options{grid-template-columns:1fr}
  .sodp-steps li{font-size:13px}
  .sodp-cta{width:92%;max-width:none;min-height:64px;padding:20px 44px;border-radius:10px;font-size:18px}
  .sodp-cta::after{right:18px;border-width:9px 0 9px 14px}
}