/* ===== 元々 <style> ブロックにあった共通スタイル ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#f3f1ed;font-family:"Zen Kaku Gothic New",sans-serif;color:#2b2926;-webkit-font-smoothing:antialiased;line-height:1.8}

@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes popin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* ===== 各要素のインラインstyleから書き出したクラス ===== */
.page{min-height:100vh; background:#f3f1ed; padding:40px 20px 80px;}
.page__inner{max-width:680px; margin:0 auto;}
.header{display:flex; align-items:center; margin-bottom:14px;}
.header__link{display:inline-block; line-height:0;}
.header__logo{height:26px; width:auto; display:block;}
.intro{background:#fff; border:1px solid #e3ddd3; border-radius:4px; border-top:3px solid #54399f; padding:44px 44px 40px; animation:fadein .4s ease;}
.intro__logo{display:block; width:100%; max-width:440px; height:auto; margin:0 auto;}
.intro__title{font-size: 32px; font-weight: 900; line-height: 1.45; color: #54399f; margin-top: 20px; letter-spacing: .01em; text-wrap: balance; text-align: center;}
.intro__lead{font-size: 15px; color: #6f6960; line-height: 1.95; margin-top: 16px; text-wrap: pretty; text-align: center;}
.intro__lead-strong{font-size: 18px;}
.intro__steps{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#e3ddd3; border:1px solid #e3ddd3; border-radius:4px; margin-top:28px;}
.intro__step{background:#fff; padding:18px 18px; display:flex; flex-direction:column; gap:8px;}
.intro__step-num{font-family: 'IBM Plex Mono',monospace; font-size: 20px; font-weight: 600; color: #6a4fc0; letter-spacing: .08em;}
.intro__step-text{font-size:13px; color:#4a453f; line-height:1.7;}
.intro__step-num--accent{font-family: 'IBM Plex Mono',monospace; font-size: 20px; font-weight: 600; color: #f5b50a; letter-spacing: .08em;}
.intro__error{background:#fdf1ee; border:1px solid #e3b3a5; border-radius:4px; padding:14px 16px; margin-top:22px; font-size:13px; color:#a23e3e; line-height:1.8;}
.intro__start-btn{width: 100%; box-sizing: border-box; margin-top: 26px; background: #54399f; color: #FFD105; border: none; border-radius: 4px; padding: 17px; font-size: clamp(16px, 5vw, 25px); font-weight: 700; font-family: inherit; cursor: pointer; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .18s; height: auto;}
.arrow-icon{font-family:'IBM Plex Mono',monospace;}
.intro__note{text-align:center; font-size:11.5px; color:#a39c91; line-height:1.8; margin-top:20px;}
.quiz{background:#fff; border:1px solid #e3ddd3; border-radius:4px; padding:38px 40px 34px; animation:fadein .35s ease;}
.quiz__head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.quiz__step-label{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#54399f; font-weight:600; letter-spacing:.06em;}
.quiz__progress-label{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#a39c91;}
.quiz__progress-track{height:5px; background:#ede9e2; border-radius:99px; overflow:hidden; margin-bottom:26px;}
.quiz__progress-bar{height:100%; border-radius:99px; background:linear-gradient(90deg,#6a4fc0,#54399f); transition:width .4s cubic-bezier(.4,1.2,.5,1);}
.quiz__title{font-size:23px; font-weight:900; line-height:1.55; color:#54399f; text-wrap:pretty;}
.quiz__help{font-size:13px; font-weight:700; color:#54399f; line-height:1.8; margin-top:10px;}
.quiz__options{display:flex; flex-direction:column; gap:11px; margin-top:24px;}
.quiz__option-btn{text-align:left; background:#fff; border:1.5px solid #e3ddd3; border-radius:4px; padding:16px 17px; font-family:inherit; font-size:14px; color:#3a352f; line-height:1.7; cursor:pointer; display:flex; gap:14px; align-items:flex-start; white-space:pre-line; transition:all .15s;}
.quiz__option-num{font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600; color:#6a4fc0; flex-shrink:0; margin-top:1px;}
.quiz__option-label{font-weight:700;}
.quiz__back-btn{margin-top:24px; background:none; border:none; color:#8c867d; font-family:'IBM Plex Mono',monospace; font-size:12.5px; cursor:pointer; letter-spacing:.04em;}
.thinking-overlay{position:fixed; inset:0; background:rgba(23,23,23,.45); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50;}
.thinking-card{width:min(88vw,360px); background:#fff; border-radius:22px; padding:26px 24px 22px; text-align:center; box-shadow:0 20px 48px rgba(0,0,0,.2); animation:popin .28s cubic-bezier(.34,1.56,.64,1) both;}
.thinking-card__label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em; color:#6a4fc0; font-weight:600;}
.thinking-card__img{width:min(58vw,190px); height:auto; display:block; margin:14px auto 0;}
.thinking-card__title{font-size:16px; font-weight:900; color:#54399f; margin-top:14px; line-height:1.6;}
.thinking-card__desc{font-size:12px; color:#6f6960; margin-top:6px; line-height:1.8;}
.result{animation:fadein .4s ease;}
.result__header{background:#fff; border:1px solid #e3ddd3; border-radius:6px; border-top:4px solid #54399f; padding:38px 40px 20px; box-shadow:0 6px 20px rgba(84,57,159,.08);}
.result__badge{display:inline-flex; align-items:center; gap:8px; background:#eee7fa; color:#54399f; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; font-weight:700; padding:5px 12px; border-radius:99px;}
.result__title{font-size:32px; font-weight:900; color:#54399f; margin-top:14px; line-height:1.4; text-wrap:balance;}
.result__title-highlight{background:linear-gradient(transparent 60%,#ffe98a 60%);}
.result__lead{font-size:13.5px; color:#6f6960; margin-top:10px; line-height:1.8;}
.rank1{background:#fff; border:1px solid #d9cef0; border-radius:4px; border-left:4px solid #54399f; padding:24px 26px; margin-top:14px;}
.rank__head{display:flex; align-items:center; gap:14px;}
.rank1__pos{flex-shrink: 0; width: 60px; height: 60px; border-radius: 4px; background: #54399f; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono',monospace; font-weight: 600; font-size: 36px;}
.rank1__category{font-size: 18px; color: #7a6fae; font-weight: 600; font-family: 'IBM Plex Mono',monospace; letter-spacing: .06em;}
.rank1__name{font-size: 23px; font-weight: 900; color: #2b2926; line-height: 1.3;}
.rank1__tagline{font-size:18px; font-weight:700; color:#54399f; line-height:1.6; margin-top:16px;}
.rank1__detail{font-size:13.5px; color:#4a453f; line-height:1.9; margin-top:12px;}
.rank1__reason{font-size:13.5px; font-weight:700; color:#2b2926; line-height:1.9; margin-top:12px; border-left:2px solid #4ba585; padding-left:14px;}
.rank1__stats{display:flex; gap:26px; margin-top:18px; padding-top:16px; border-top:1px solid #ede8e0; flex-wrap:wrap;}
.stat__label{font-family:'IBM Plex Mono',monospace; font-size:10px; color:#a39c91; letter-spacing:.1em;}
.rank1__stat-value{font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; color:#2b2926; margin-top:4px;}
.stat__level{display:flex; align-items:center; gap:8px; margin-top:7px;}
.stat__bars{display:flex; gap:3px;}
.stat__bar{width:18px; height:4px;}
.rank1__diff-text{font-size:11.5px; color:#6f6960;}
.rank1__match{font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; color:#4ba585; margin-top:4px;}
.rank1__budget-note{font-size:11px; color:#a39c91; line-height:1.7; margin-top:8px;}
.rank1__note{background:#fef6dd; border:1px solid #f1d27a; border-radius:4px; padding:13px 15px; margin-top:10px; font-size:12.5px; color:#876311; line-height:1.7;}
.rank1__note-label{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; font-weight:600; display:block; margin-bottom:4px;}
.rank1__consult-btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px; background:#54399f; border:none; color:#fff; font-size:13.5px; font-weight:700; padding:13px; border-radius:4px; cursor:pointer; font-family:inherit; transition:transform .15s;}
.rank-rest-list{display:flex; flex-direction:column; gap:14px; margin-top:14px;}
.rank-rest{background:#fff; border:1px solid #e3ddd3; border-radius:4px; border-left:4px solid #c7bfe0; padding:22px 24px;}
.rank-rest__pos{flex-shrink: 0; width: 48px; height: 48px; border-radius: 4px; background: #f0ece4; color: #8c867d; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono',monospace; font-weight: 600; font-size: 28px;}
.rank-rest__category{font-size: 15px; color: #9b93b0; font-weight: 600; font-family: 'IBM Plex Mono',monospace; letter-spacing: .05em;}
.rank-rest__name{font-size: 19px; font-weight: 900; color: #2b2926; line-height: 1.3;}
.rank-rest__tagline{font-size:15px; font-weight:700; color:#6a4fc0; line-height:1.6; margin-top:14px;}
.rank-rest__detail{font-size:13px; color:#4a453f; line-height:1.85; margin-top:10px;}
.rank-rest__reason{font-size:13px; font-weight:700; color:#2b2926; line-height:1.85; margin-top:10px; border-left:2px solid #4ba585; padding-left:12px;}
.rank-rest__stats{display:flex; gap:22px; margin-top:16px; padding-top:14px; border-top:1px solid #ede8e0; flex-wrap:wrap;}
.rank-rest__stat-value{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:#2b2926; margin-top:4px;}
.stat__bar--rest{width:16px; height:4px;}
.rank-rest__diff-text{font-size:11px; color:#6f6960;}
.rank-rest__match{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:#4ba585; margin-top:4px;}
.rank-rest__note{background:#fef6dd; border:1px solid #f1d27a; border-radius:4px; padding:12px 14px; margin-top:10px; font-size:12px; color:#876311; line-height:1.7;}
.rank-rest__note-label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em; font-weight:600; display:block; margin-bottom:4px;}
.rank-rest__consult-btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px; background:#fff; border:1.5px solid #9b93b0; color:#6a4fc0; font-size:13px; font-weight:700; padding:11px; border-radius:4px; cursor:pointer; font-family:inherit; transition:all .15s;}
.focus-note{border-left:3px solid #f5b50a; background:#fef6dd; padding:15px 18px; margin-top:14px; border-radius:0 4px 4px 0; font-size:13px; color:#6f6960; line-height:1.8;}
.text-strong{color:#2b2926;}
.info-card{background:#fff; border:1px solid #e3ddd3; border-radius:4px; padding:20px 22px; margin-top:14px;}
.cond__label{font-size:13px; font-weight:700; color:#54399f; margin-bottom:12px;}
.item-list{display:flex; flex-direction:column; gap:9px;}
.cond__item{display:flex; justify-content:space-between; align-items:center; font-size:13px;}
.item__link{color:#54399f; font-weight:700;}
.cond__item-group{color:#2b2926; font-weight:700; font-size:11.5px; display:block; margin-top:1px;}
.cond__item-badge{font-size:10.5px; font-weight:700; color:#4ba585; background:#e9f5ef; border-radius:99px; padding:4px 11px; white-space:nowrap; flex-shrink:0;}
.creative-cta{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid #e3ddd3; border-radius:4px; padding:18px 22px; margin-top:14px;}
.creative-cta__text{font-size:12.5px; color:#6f6960; line-height:1.7;}
.creative-cta__btn{flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px solid #54399f; color:#54399f; font-size:12.5px; font-weight:700; padding:10px 20px; border-radius:4px; text-decoration:none; white-space:nowrap; transition:all .15s; cursor:pointer; font-family:inherit;}
.consult-done{background:#f0f8f3; border:1px solid #cfe8da; border-radius:4px; padding:32px 30px; margin-top:18px; text-align:center;}
.consult-done__label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:#2f6b48; font-weight:700;}
.consult-done__title{font-size:18px; font-weight:900; color:#1f4d33; margin-top:10px;}
.consult-done__desc{font-size:13px; color:#2f6b48; margin-top:8px; line-height:1.8;}
.consult-form{background:#fff; border:1px solid #d9cef0; border-radius:4px; padding:28px 26px; margin-top:18px;}
.consult-form__title{font-size:17px; font-weight:900; color:#2b2926;}
.consult-form__desc{font-size:12.5px; color:#6f6960; margin-top:6px; line-height:1.7;}
.consult-form__media-box{background:#f7f5fb; border:1px solid #e3ddf0; border-radius:4px; padding:14px 16px; margin-top:14px;}
.form-label{font-size:12.5px; color:#4a453f; font-weight:700;}
.consult-form__media-options{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.consult-form__media-option{display:flex; align-items:center; gap:8px; font-size:13.5px; color:#2b2926;}
.media-rank-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#54399f; font-weight:700;}
.media-rank-tag--other{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#6a4fc0; font-weight:700;}
.consult-form__fields{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
.required-mark{color:#a23e3e;}
.form-input{display:block; width:100%; margin-top:5px; padding:10px 12px; border:1px solid #dcd6cb; border-radius:4px; font-size:14px; font-family:inherit; box-sizing:border-box;}
.form-textarea{display:block; width:100%; margin-top:5px; padding:10px 12px; border:1px solid #dcd6cb; border-radius:4px; font-size:14px; font-family:inherit; box-sizing:border-box; resize:vertical;}
.form-error{font-size:12.5px; color:#a23e3e; line-height:1.6;}
.consult-form__agree-label{display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#6f6960; line-height:1.7;}
.consult-form__agree-checkbox{margin-top:3px; flex-shrink:0;}
.policy-link{color:#54399f; text-decoration:underline;}
.consult-form__actions{display:flex; gap:10px; margin-top:6px;}
.submit-btn{flex:1; background:#f5b50a; color:#4a2f00; font-size:14.5px; font-weight:700; padding:13px; border:none; border-radius:4px; cursor:pointer; font-family:inherit;}
.cancel-btn{background:#fff; border:1px solid #e3ddd3; color:#6f6960; font-size:13px; padding:13px 18px; border-radius:4px; cursor:pointer; font-family:inherit;}
.consult-cta{background:#54399f; border-radius:4px; padding:32px 30px; margin-top:18px; text-align:center;}
.consult-cta__img{width:min(58%,220px); height:auto; display:block; margin:0 auto 20px; border-radius:16px; box-shadow:0 14px 30px rgba(0,0,0,.28);}
.consult-cta__title{font-size:19px; font-weight:900; color:#fff;}
.consult-cta__desc{font-size:13px; color:#d8cdf0; margin-top:8px; line-height:1.8;}
.consult-cta__btn{display:inline-flex; align-items:center; gap:8px; background:#f5b50a; color:#4a2f00; font-size:15px; font-weight:700; padding:15px 36px; border:none; border-radius:4px; cursor:pointer; margin-top:18px; font-family:inherit; transition:transform .15s;}
.email-done{background:#f0f8f3; border:1px solid #cfe8da; border-radius:4px; padding:22px; margin-top:14px; text-align:center;}
.email-done__text{font-size:12.5px; color:#2f6b48;}
.email-done__desc{font-size:12px; color:#4a453f; margin-top:12px; line-height:1.7;}
.email-done__consult-btn{display:inline-flex; align-items:center; gap:6px; background:#54399f; color:#fff; font-size:13.5px; font-weight:700; padding:12px 26px; border:none; border-radius:4px; cursor:pointer; margin-top:10px; font-family:inherit;}
.email-capture__title{font-size:13px; font-weight:700; color:#2b2926;}
.email-capture__desc{font-size:12px; color:#a39c91; margin-top:4px;}
.email-capture__form{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.email-capture__input{flex:1; min-width:200px; padding:10px 12px; border:1px solid #dcd6cb; border-radius:4px; font-size:14px; font-family:inherit; box-sizing:border-box;}
.email-capture__submit-btn{background:#54399f; color:#fff; font-size:13.5px; font-weight:700; padding:11px 20px; border:none; border-radius:4px; cursor:pointer; font-family:inherit;}
.email-capture__error{font-size:12px; color:#a23e3e; margin-top:8px;}
.email-capture__trigger-wrap{text-align:center; margin-top:14px;}
.email-capture__trigger-btn{background:none; border:none; color:#54399f; font-size:12.5px; font-weight:700; text-decoration:underline; cursor:pointer; font-family:inherit;}
.restart-wrap{text-align:center; margin-top:22px;}
.restart-btn{background:#fff; border:1px solid #e3ddd3; color:#6f6960; font-family:inherit; font-size:13px; font-weight:700; padding:11px 26px; border-radius:4px; cursor:pointer;}
.budget-disclaimer{text-align:center; font-size:11px; color:#a39c91; line-height:1.9; margin-top:20px;}
.footer{text-align:center; margin-top:28px; padding-top:18px; border-top:1px solid #e3ddd3; display:flex; flex-direction:column; align-items:center; gap:7px;}
.footer__copyright{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#a39c91; letter-spacing:.04em;}
.footer__links{display:flex; align-items:center; gap:14px; font-size:11px;}
.footer__link{color:#8c867d; text-decoration:underline; text-underline-offset:2px;}

/* ===== ホバー時のスタイル（style-hover属性から変換） ===== */
.intro__start-btn:hover{background:#452f86;}
.quiz__option-btn:hover{border-color:#6a4fc0; background:#f6f3fc;}
.quiz__back-btn:hover{color:#54399f;}
.rank1__consult-btn:hover{transform:translateY(-2px);}
.rank-rest__consult-btn:hover{background:#6a4fc0; color:#fff; border-color:#6a4fc0;}
.creative-cta__btn:hover{background:#54399f; color:#fff;}
.consult-cta__btn:hover{transform:translateY(-2px);}
.restart-btn:hover{border-color:#54399f; color:#54399f;}