/* Randoseru diagnosis / mockup-inspired v2 */
body.randoseru-diagnosis-page {
 margin: 0;
 background: #f6f7fa;
 color: #34343c;
 font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
 line-height: 1.7
}
.randoseru-diagnosis, .randoseru-diagnosis * {
 box-sizing: border-box
}
.randoseru-diagnosis, .randoseru-diagnosis img {
 width: 100%;
 height: auto;
}
.randoseru-diagnosis {
 --pink: #f1497d;
 --ink: #33343c;
 --blue: #439dd3;
 --cream: #fff8f0
}
.randoseru-diagnosis [hidden] {
    display: none !important;
}
.randoseru-diagnosis .shell {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 max-width: 480px;
 min-height: 100vh;
 margin: auto;
 background: #fff;
 padding: 34px 26px 36px;
 box-shadow: 0 8px 32px rgba(25, 30, 40, .06)
}
.randoseru-diagnosis .screen[hidden] {
 display: none !important
}
.randoseru-diagnosis .screen {
 position: relative;
 z-index: 1
}
.randoseru-diagnosis .hero:before, .randoseru-diagnosis .hero:after, .randoseru-diagnosis #result:before {
 content: "";
 position: absolute;
 z-index: -1;
 border-radius: 50%;
 opacity: .8
}
.randoseru-diagnosis .hero:before {
 width: 110px;
 height: 110px;
 top: 75px;
 left: -80px;
 background: repeating-linear-gradient(135deg, #dff3fb 0 7px, transparent 7px 14px)
}
.randoseru-diagnosis .hero:after {
 width: 90px;
 height: 90px;
 top: 20px;
 right: -60px;
 background: repeating-linear-gradient(135deg, #fff2c8 0 7px, transparent 7px 14px)
}
.randoseru-diagnosis #result:before {
 width: 100px;
 height: 100px;
 top: 145px;
 left: -70px;
 background: repeating-linear-gradient(135deg, #dff3fb 0 7px, transparent 7px 14px)
}
.randoseru-diagnosis .diagnosis-logo {
margin: 0 auto;
line-height: 0;
}
.randoseru-diagnosis .logo-eyebrow {
 display: block;
 font-size: 17px;
 letter-spacing: .04em;
 color: #29292e;
 transform: rotate(-4deg);
 margin-bottom: 14px
}
.randoseru-diagnosis .logo-main {
 display: block;
 font-size: clamp(42px, 11vw, 58px);
 letter-spacing: -.06em;
 white-space: nowrap;
 text-shadow: 0 2px 0 #fff
}
.randoseru-diagnosis .logo-main--second {
 font-size: clamp(42px, 10.6vw, 55px)
}
.randoseru-diagnosis .logo-main span, .randoseru-diagnosis .logo-inline span {
 display: inline-block
}
.randoseru-diagnosis .logo-main span:nth-child(6n+1), .randoseru-diagnosis .logo-inline span:nth-child(6n+1) {
 color: #f0789b
}
.randoseru-diagnosis .logo-main span:nth-child(6n+2), .randoseru-diagnosis .logo-inline span:nth-child(6n+2) {
 color: #67b9bd
}
.randoseru-diagnosis .logo-main span:nth-child(6n+3), .randoseru-diagnosis .logo-inline span:nth-child(6n+3) {
 color: #f6aa49
}
.randoseru-diagnosis .logo-main span:nth-child(6n+4), .randoseru-diagnosis .logo-inline span:nth-child(6n+4) {
 color: #5a5a60
}
.randoseru-diagnosis .logo-main span:nth-child(6n+5), .randoseru-diagnosis .logo-inline span:nth-child(6n+5) {
 color: #85c579
}
.randoseru-diagnosis .logo-main span:nth-child(6n), .randoseru-diagnosis .logo-inline span:nth-child(6n) {
 color: #d852a1
}
.randoseru-diagnosis .diagnosis-logo--large {

}

.randoseru-diagnosis .sub {
 text-align: center;
 margin: 24px 0 0;
 font-size: 16px;
 font-weight: 800
}
.randoseru-diagnosis .hero-caption {
 text-align: center;
 font-size: 15px;
 font-weight: bold;
 line-height: 1.55;
 margin: 0
}
.randoseru-diagnosis .mascots {
 position: relative;
 margin: 0 -18px;
 text-align: center
}
.randoseru-diagnosis .mascots img {
 display: block;
 width: 100%;
 height: auto;
 max-width: 440px;
 margin: auto
}
.randoseru-diagnosis .intro-card {
 position: relative;
 background: #fffaf4;
 border-radius: 27px;
 padding: 10px 10px 20px;
 margin: 0 0 20px
}
.randoseru-diagnosis .lead {
 white-space: pre-line;
 font-size: 14px;
 margin: 0 0 10px;
 line-height: 1.4;
}
.randoseru-diagnosis .intro-points {
 list-style: none;
 padding: 0;
 margin: 0
}
.randoseru-diagnosis .intro-points li {
 position: relative;
 margin: 0;
 padding: 4px 0 4px 26px;
 font-size: 14px
}
.randoseru-diagnosis .intro-points li:before {
 content: "✓";
 position: absolute;
 left: 0;
 top: 7px;
 font-size: 12px;
 display: grid;
 place-items: center;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #d6b995;
 color: white;
 font-weight: 900
}
.randoseru-diagnosis .primary {
 display: block;
 position: relative;
 width: 100%;
 border: 0;
 border-radius: 100px;
 padding: 16px;
 background: #f1497d;
 color: #fff;
 font-size: 15px;
 font-weight: 800;
 line-height: 1.5;
 text-align: center;
 text-decoration: none;
 cursor: pointer;
 box-shadow: 0 5px 12px rgba(241, 73, 125, .14)
}
.randoseru-diagnosis .primary::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 right: 12px;
 bottom: 0;
 margin: auto;
 width: 8px;
 height: 8px;
 border-top: #fff solid 3px;
 border-right: #fff solid 3px;
 transform: rotate(45deg);
}
.randoseru-diagnosis .primary span {
 position: absolute;
 right: 23px;
 font-size: 25px;
 top: 10px
}
.randoseru-diagnosis .primary:hover {
 background: #e6376e
}
.randoseru-diagnosis .diagnosis-logo--small {
 margin: 6px auto 22px
}
.randoseru-diagnosis .diagnosis-logo--small .logo-eyebrow {
 font-size: 12px;
 margin: 0 0 5px
}
.randoseru-diagnosis .logo-inline {
 display: block;
 font-size: 22px;
 letter-spacing: -.05em;
 white-space: nowrap
}
.randoseru-diagnosis .progress-wrap {
 margin: 0 0 26px
}
.randoseru-diagnosis .step-dots {
 display: flex;
 align-items: center;
 justify-content: space-between;
 position: relative;
 margin: 0 26px
}
.randoseru-diagnosis .step-dots:before {
 content: "";
 height: 3px;
 background: #ededf0;
 position: absolute;
 left: 0;
 right: 0;
 top: 50%;
 transform: translateY(-50%)
}
.randoseru-diagnosis .step-dots span {
 position: relative;
 z-index: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: #e9e9ed;
 color: #8c8c94;
 font-size: 14px;
 font-weight: 800
}
.randoseru-diagnosis .step-dots span.active {
 background: #f1497d;
 color: #fff
}
.randoseru-diagnosis .step-dots span.done {
 background: #f8b6ca;
 color: #fff
}
.randoseru-diagnosis .question-number {
 text-align: center;
 color: #f1497d;
 font-size: 40px;
 font-weight: 900;
 line-height: 1;
 margin: 35px 0 22px
}
.randoseru-diagnosis .question {
 text-align: center;
 font-size: 21px;
 line-height: 1.55;
 white-space: pre-line;
 margin: 0 0 34px;
 font-weight: 800;
 min-height: 70px
}
.randoseru-diagnosis .options {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px
}
.randoseru-diagnosis .option {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 min-height: 208px;
 padding: 20px 12px;
 border: 2px solid transparent;
 border-radius: 22px;
 background: #fff0f4;
 color: #34343c;
 font-size: 15px;
 line-height: 1.55;
 font-weight: 800;
 cursor: pointer;
 overflow-wrap: anywhere
}
.randoseru-diagnosis .option:nth-child(2) {
 background: #e8f5fc
}
.randoseru-diagnosis .option.selected {
 border-color: #f1497d;
 box-shadow: 0 0 0 3px rgba(241, 73, 125, .15)
}
.randoseru-diagnosis .letter {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 border-radius: 50%;
 background: #fff;
 color: #f1497d;
 margin: 0 0 20px;
 font-size: 20px;
 font-weight: 900
}
.randoseru-diagnosis .option:nth-child(2) .letter {
 color: #439dd3
}
.randoseru-diagnosis .back {
 position: relative;
 display: block;
 margin: 42px auto 0;
 padding: 10px 42px;
 border: 1px solid #d4d4d8;
 border-radius: 100px;
 background: #fff;
 color: #999;
 font-size: 15px;
 cursor: pointer
}
.randoseru-diagnosis .back::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 12px;
 bottom: 0;
 margin: auto;
 width: 8px;
 height: 8px;
 border-top: #999 solid 3px;
 border-left: #999 solid 3px;
 transform: rotate(-45deg);
}

.randoseru-diagnosis .result-ribbon {
 position: relative;
 margin: -20px auto 0;
}
.randoseru-diagnosis .result-title {
 text-align: center;
 font-size: 24px;
 line-height: 1.4;
 color: #ef4b80;
 margin: 0 0 8px;
 font-weight: 900;
 white-space: pre-line;
}

.randoseru-diagnosis .result-art img {
 display: block;
 width: 100%;
 height: auto;
 max-width: 430px;
 margin: 0 auto -8px
}
.randoseru-diagnosis .result-copy {
 background: #fff1f5;
 border-radius: 24px;
 padding: 20px 22px;
 font-size: 15px;
 line-height: 1.85
}
.randoseru-diagnosis .result-copy p {
 margin: 0 0 12px
}
.randoseru-diagnosis .result-copy p:last-child {
 margin: 0
}
.randoseru-diagnosis .next {
 position: relative;
 text-align: center;
 font-size: 18px;
 color: #f1497d;
 margin: 28px 0 10px;
}
.randoseru-diagnosis .next::after {
 content: "";
 display: block;
 position: relative;
 bottom: 0;
 left: 0;
 right: 0;
 width:0;
height:0;
 margin: auto;
border-style:solid;
border-width: 10px 10px 0 10px;
border-color: #f1497d transparent transparent transparent;
}
.randoseru-diagnosis .restart {
 display: block;
 margin: 25px auto 0;
 border: 0;
 background: none;
 text-decoration: underline;
 color: #777;
 font-size: 14px;
 text-decoration: none;
 cursor: pointer
}
.randoseru-diagnosis .sr-only {
 position: absolute !important;
 width: 1px;
 height: 1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap
}
.randoseru-diagnosis button {
 font-family: inherit
}
.randoseru-diagnosis button:focus-visible, .randoseru-diagnosis a:focus-visible {
 outline: 3px solid #2477bb;
 outline-offset: 3px
}
@media(max-width:390px) {
 .randoseru-diagnosis .shell {
  padding: 22px 18px 30px
 }
 .randoseru-diagnosis .logo-main {
  font-size: 42px
 }
 .randoseru-diagnosis .logo-main--second {
  font-size: 40px
 }
 .randoseru-diagnosis .logo-inline {
  font-size: 19px
 }
 .randoseru-diagnosis .option {
  font-size: 14px;
  min-height: 190px
 }
 .randoseru-diagnosis .step-dots {
  margin: 0 12px
 }
}
.brand {
 margin: 40px auto 0;
}
.brand img {
 display: block;
 width: 150px;
 height: auto;
 margin: 0 auto;
}
@media(min-width:700px) {
 .randoseru-diagnosis .shell {
  margin: 28px auto;
  border-radius: 24px;
  min-height: calc(100vh - 56px)
 }
}
@media(prefers-reduced-motion:reduce) {
 .randoseru-diagnosis * {
  transition: none !important
 }
}