
/* Dedicated phone composition. It also remains readable when opened on a PC. */
body.mobile-site{width:100%;max-width:600px;margin:0 auto;background:#f3f7fa;overflow-x:clip;}
html{background:#dce5ed;scroll-padding-top:12px;}
.container{width:calc(100% - 32px);}
.site-header{height:66px;}.header-inner{gap:10px;}.site-header .company-logo{width:128px;height:34px;}.site-header .company-logo img{width:133px;left:-2.4px;top:-49.5px;}
.header-line{font-size:12px;padding:6px 10px;gap:7px;white-space:nowrap;}.header-line .line-dot{display:grid;width:32px;height:32px;flex:0 0 32px;font-size:11px;}
.hero{display:grid!important;grid-template-columns:minmax(0,1fr);height:auto!important;min-height:0!important;padding:28px 0 32px!important;gap:0;background:#061528;}
.hero .hero-copy{display:contents;}.hero .hero-overline{grid-area:1/1;position:relative;z-index:2;width:auto;padding:0 16px;margin:0 0 14px;text-align:center;font-size:14px;line-height:1.8;color:#d4e6f4;}
.hero .hero-question{grid-area:2/1;justify-self:center;width:max-content;max-width:calc(100% - 32px);font-size:clamp(48px,14vw,68px);line-height:1.12;margin:0 auto 20px;}
.hero .hero-title-tag{grid-area:3/1;justify-self:center;font-size:22px;padding:6px 16px;margin:0 0 17px;}.hero .hero-title-tag span{font-size:31px;}
.ensemble-art{grid-area:4/1;width:100%;height:auto;object-fit:contain;display:block;margin:0;}
.hero .hero-meta{grid-area:5/1;text-align:center;margin:17px 0 13px;font-size:13px;}
.hero .hero-start{grid-area:6/1;justify-self:center;width:var(--headline-width,280px);max-width:calc(100% - 48px);min-height:54px;font-size:15px;padding:16px 26px;margin:0 auto;border-radius:999px;}
.hero .hero-free{grid-area:7/1;text-align:center;font-size:12px;margin:10px 0 0;}.hero-bottom,.hero-script{display:none!important;}
.benefits-section{padding:13px 0;}.benefits{display:flex;flex-direction:column;}.benefit{display:flex;gap:18px;text-align:left;align-items:center;padding:17px 8px;}.benefit strong{font-size:14px;line-height:1.8;}.benefit .icon-circle{flex:0 0 44px;width:44px;margin:0;}.benefit:not(:last-child):after{bottom:0;top:auto;left:8px;right:8px;width:auto;height:1px;background:#e0e7ef;}
.types-section{padding:34px 0;}.types-title h2{font-size:29px;}.types-title p{font-size:13px;}.type-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.type-name{font-size:12px;padding:7px 6px;white-space:normal;line-height:1.5;}.type-img-wrap.full-card{aspect-ratio:1;}
.diagnosis-section{padding:36px 0 46px;}.diagnosis-title{margin-bottom:22px;}.diagnosis-title h2{font-size:29px;}.diagnosis-title p{font-size:14px;line-height:1.8;}.quiz-card{padding:24px 18px;border-radius:14px;}.q-caption{display:none;}.q-count{font-size:26px;}.question{font-size:20px;line-height:1.7;margin-bottom:20px;}.answers{grid-template-columns:1fr;gap:12px;}.answer{font-size:16px;line-height:1.7;min-height:84px;padding:17px 14px 17px 52px;border-radius:10px;}.answer-key{top:19px;}.back-btn{min-height:48px;font-size:14px;margin-top:8px;padding:12px 0;}.quiz-note{font-size:12px;line-height:1.8;}
.result{border-radius:16px;margin-top:24px;}.result-top{grid-template-columns:1fr;}.result-art{padding:20px 30px!important;height:auto!important;}.result-illustration{width:100%;max-width:330px;aspect-ratio:1;}.result-copy{padding:24px 20px;}.result-name{font-size:26px;line-height:1.5;}.result-code{font-size:17px;}.result-catch{font-size:17px;line-height:1.8;}.style-row{grid-template-columns:65px minmax(0,1fr) 43px;gap:8px;}.style-help{font-size:12px;line-height:1.8;}.result-body{padding:14px;}.info-grid{grid-template-columns:1fr;gap:12px;}.info:first-child,.info:nth-child(2){grid-column:1;}.info{padding:20px;}.info p{font-size:16px;line-height:1.9;}.strengths{grid-template-columns:1fr 1fr;gap:8px;}.strengths li{padding:14px 6px;font-size:14px;}.line-cta{display:grid;grid-template-columns:54px minmax(0,1fr) 16px;gap:12px;padding:18px 14px;}.line-copy{font-size:14px;line-height:1.8;}.line-cta .line-icon{width:54px;height:54px;font-size:16px;}.line-arrow{font-size:20px;}.restart button{min-height:48px;font-size:14px;}
.footer-brand-inner{flex-direction:column;gap:16px;}.footer-divider{height:1px;width:70px;}.footer-message{text-align:center;font-size:14px;}.site-footer{padding:24px 16px;}.demo-note{font-size:12px;line-height:1.8;}
@media(max-width:350px){.container{width:calc(100% - 24px);}.site-header .company-logo{width:107px;height:29px;}.site-header .company-logo img{width:111px;left:-2px;top:-41.3px;}.header-line{font-size:11px;padding:6px 8px;gap:5px;}.hero .hero-question{font-size:48px;}.result-name{font-size:23px;}.line-cta{grid-template-columns:46px minmax(0,1fr);}.line-cta .line-icon{width:46px;height:46px;font-size:14px;}.line-arrow{display:none;}}

/* Mobile only: remove the empty center while preserving the full height. */
.mobile-ensemble{grid-area:4/1;display:grid;grid-template-columns:1fr 1fr;width:100%;gap:0;overflow:hidden;}
.ensemble-half{position:relative;width:100%;aspect-ratio:660.48 / 1024;overflow:hidden;}
.ensemble-half img{position:absolute;top:0;width:232.55814%;height:auto;max-width:none;display:block;}
.ensemble-half-left img{left:0;}.ensemble-half-right img{right:0;}

/* Readable numeral in the animal-type heading. */
.types-title h2 em{display:inline-block;font-family:Arial,'Helvetica Neue',sans-serif;font-size:48px;font-weight:700;font-style:normal;line-height:1.1;letter-spacing:.055em;margin-right:10px;vertical-align:baseline;}
@media(max-width:700px){.types-title h2 em{font-size:43px;}}


/* Match the hero's 16TYPE lettering. */
.types-title h2{font-family:'Noto Sans JP','Yu Gothic',sans-serif;font-weight:900;font-style:italic;letter-spacing:-.04em;}
.types-title h2 em{display:inline-block;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:900;font-style:italic;font-size:54px;line-height:1.05;letter-spacing:.025em;margin-right:8px;vertical-align:baseline;}
@media(max-width:700px){.types-title h2 em{font-size:48px;}}


/* Mobile result typography and solid LINE fill. */
.result .line-cta,.mobile-site .header-line{background:#06c755!important;background-image:none!important;border-color:#06c755!important;color:#fff!important;}
.result .line-cta .line-copy,.result .line-cta .line-arrow{color:#fff!important;background:transparent!important;}
.result .line-cta .line-icon{background:#fff!important;color:#078b3d!important;}
.result .line-cta:hover,.mobile-site .header-line:hover{background:#05ad49!important;}


/* Feather the overlapping image edges instead of exposing a hard join. */
.mobile-ensemble{background:#061528;isolation:isolate;align-items:start;}
.ensemble-half{width:calc(100% + 12px);}
.ensemble-half-left{z-index:1;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 26px),transparent 100%);}
.ensemble-half-right{margin-left:-12px;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 26px,#000 100%);mask-image:linear-gradient(to right,transparent 0,#000 26px,#000 100%);}
