@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Noto+Sans+JP:wght@300&display=swap');
@charset "utf-8";

/* *****共通設定***** */
main{
    display: block;
    background-color: transparent;
}
main .btn{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 1.5rem;
}
h1 { font-size: 4.5rem; }
h2, h3{
   color: #401f0f;
}
.gray {
    color: #6c757d;
}
.card{
    border-color: #e0c7b2;
}
.img-thumbnail {
    width: 100%;
    padding: .25rem;
    background-color: transparent;
    border: none;
}

/* ヘッダー(navbar) */
.navbar{
    border-bottom: 1px solid #a29080;
    background-color: #000000;
}
.navbar .navbar-collapse{
    flex-grow: 0;
}
.navbar .navbar-brand{
    height: 50px;
}
.navbar .navbar-brand img{
    height: 100%;
}
.navbar .navbar-nav .active > .nav-link{
    color: #ffce11;
}
.navbar .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(251,251,241,1);
}

/* フッター */
#footer{
    background-color: #563322;
}
#footer .container{
    color: #e0c7b2;
}
#footer .footer-ttl{
    font-size: 1rem;
    font-weight: bold;
    margin: 1.5rem 0;
    color: #ffce11;
}
#footer address p,
#footer #footer-news li{
    margin-bottom: 0.5rem;
}
#footer #footer-news ul{
    margin: 0;
    padding: 0
}
#footer #footer-news ul{
    list-style: none;
}
#footer #footer-news li span{
    display: inline-block;
    margin-right: 0.5rem;
}
#footer #copyright{
    border-top: 1px solid #774831;
    background-color: #401f0f;
    color: #e0c7b2;
}
#footer img {
	width: 360px;
}

/* *****トップページ***** */
/* メイン画像 */
h1{
    font-weight: bold !important;
    color: #000000;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;

}
#page-top h1 + span {
    font-size: 3rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
    display: block;
}
#page-top .jumbotron-fluid{
    height: 100dvh;
    background-color: #f1efff;
    border-bottom: #dddddd;
    background: url("../img/top-main.jpg") no-repeat center center;
    background-size:cover;
}
#page-top .jumbotron-fluid .container{
    height: 100%;
}
#page-top .jumbotron-fluid .btn{
    padding-left: 3rem;
    padding-right: 3rem;
    margin-top: 1.5rem;
    font-weight: bold;
	border-width: 3px;
    border-color: #fff;
}

/* 各セクション */
#page-top section{
    border-bottom: 1px solid #e0c7b2;
    background-color: #fbfbf2;
	padding: 5rem 0;
}
#page-top section:nth-child(odd){
    background-color: #e0c7b2;
}
#page-top section .container > h2{
    margin-bottom: 30px;
    font-size: 2.5rem;
}
#page-top section .container > h2 + p{
    max-width: 700px;
	margin: 0 auto 50px;
}
#sec1 h3{
    font-size: 1.4rem;
}

#sec2 {
    line-height: 180%;
}
#sec2 .row{
    min-height: 160px;
    color: #2f2f2f;
}
#sec4 .card-body .clearfix p,
#sec4 .card-body .clearfix h3{
    margin-left: 115px;
    line-height: 130%;
}
#sec4 .card-body .card-title{
    margin-bottom: 5px;
    color: #401f0f;
}
#sec4 .card-body .card-subtitle{
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: #968075;
}
#sec4 img {
    width: 100%;
}
#sec4 .btn {
    width: 100%;
	background-color: #401f0f;
	border: none;
	padding: 1rem 0;
}

#sec5 article > .row {
    border: 1px solid #dddddd;
}
#sec5 > div:nth-child(1) img {
    width: 100%;
}
/*#sec4 > div:nth-child(2){
    margin-left: 220px;
}*/
#sec5 h3{
    margin-bottom: 0.1rem;
}
#sec5 article > div div header {
	padding: 10px;
}

/* *****下層ページ***** */

#breadcrumb-wrapper{
    border-bottom: 1px solid #a29080;
}
#breadcrumb-wrapper,
.breadcrumb{
    font-size: 0.9rem;
    background-color: #563322;
}
.breadcrumb a{
    color: rgba(255,255,255,.5);
}
.breadcrumb a:hover,
.breadcrumb a:focus{
    color: rgba(255,255,255,1);
}
.breadcrumb-item+.breadcrumb-item::before{
    content: ">";
    padding-right: 1rem;
    color: rgba(255,255,255,.5);
}
.breadcrumb-item.active{
    color: #ffffff;
}
h1.page-ttl {
    font-size:2rem; 
}
#page h1 + span {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
    display: block;
}

#page article {
    padding: 5rem 0;
}

#page section {
    padding-bottom: 5rem;
}
#page section:last-child {
    padding-bottom: 0rem;
}

#page h1 + small {
    font-size: 1.5rem;
    color: #ffffff;
    line-height: 110%;
    margin-top: 0.2rem;
}
#page .jumbotron{
    background-color: #f1efff;
    border-bottom: #dddddd;
    background: url("../img/top-main.jpg") no-repeat center center;
    background-size:cover;
    border-radius: initial;
}
#page .jumbotron .container{
    padding: 0;
}
#page .jumbotron .container p{
    margin-bottom: 0;
}
#page h2 + p{
    margin: 0 0 1.2rem;
}
#page main img{
    max-width: 100%;
}
#page .sample-title{
    display: flex;
    align-items: center;
    text-align: center;	
}

#page .sample-title::after {
    border-top: 3px dotted;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
    margin-left: 0.5em;
}
#page .sample-title span{
    background-color: #fbfbf2;
}
#page .sample-subtitle{
    font-size: 1.5rem;
    font-weight: bold;
    color: #401f0f;
}

/* *****フォーム***** */

.form1 label{
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.form1 input,
.form1 textarea,
.form1 select{
    max-width: 768px;
}
.form1 .form-group{
    margin-bottom: 2rem;
}

/* *****湯ラボ診断へのリンクバナー***** */

.yulab-banner {
  display: block;
  width: 400px;
  max-width: 100%;
  padding: 18px 20px;
  text-align: center;
  background: #6b8f71;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.yulab-banner:hover {
  background: #355c3a;   /* 濃い緑 */
  color: #ffd700;        /* 黄色 */
  text-decoration: none; /* 下線なし */
}

/* *****Q毎ページを分けるCSS***** */

.question-page {
  display: none;
}

.question-page.active {
  display: block;
}

.diagnosis-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

/* 質問の選択肢全体 */
.question-page label {
    display: block;
    font-size: 0.5rem;      /* 文字を大きく */
    line-height: 2.2;       /* 行間を広く */
    margin-bottom: 12px;    /* 選択肢間の余白 */
    padding-left: 15px;     /* 左側の余白 */
    cursor: pointer;
}

/* ラジオボタン */
.question-page input[type="radio"] {
    margin-right: 12px;     /* ボタンと文字の間 */
    margin-left: 10px;      /* 左端との余白 */
    transform: scale(1.3); /* ボタンを大きく */
}

.question-page h3 {
    margin-bottom: 30px;
}


/* =========================================================
   診断スタート画面
   PDFレイアウト準拠
   ========================================================= */
html,
body.diagnosis-start-page {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body.diagnosis-start-page {
    overflow: hidden;
    background: #15110e;
}

.diagnosis-start-page .diagnosis-start {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
    background-image: url("../img/start_background.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* PDF：右端・上端から各20px */
.diagnosis-start__logomark {
    position: absolute;
    z-index: 2;
    top: calc(20px + env(safe-area-inset-top));
    right: calc(20px + env(safe-area-inset-right));
    display: block;
    width: min(16vw, 60px);
    height: auto;
}

.diagnosis-start__content {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: calc(55px + env(safe-area-inset-bottom));
    padding-left: max(20px, env(safe-area-inset-left));
}

/* PDF上の表示幅に合わせて約75％へ縮小 */
.diagnosis-start__logotype {
    display: block;
    width: min(46vw, 237px);
    height: auto;
    margin: 0 0 300px;
}

/* PDF上の表示幅に合わせて約80％へ縮小 */
.diagnosis-start__button {
    display: block;
    width: min(51vw, 262px);
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.diagnosis-start__button img {
    display: block;
    width: 100%;
    height: auto;
}

.diagnosis-start__button:hover,
.diagnosis-start__button:focus-visible {
    opacity: 0.9;
    transform: translateY(-2px);
    outline: none;
}

.diagnosis-start__button:active {
    transform: translateY(0);
}

/* 高さが低い端末でも画面内に収める */
@media (max-height: 720px) {
    .diagnosis-start__logotype {
        width: min(54vw, 276px);
        margin-bottom: clamp(100px, 22vh, 160px);
    }

    .diagnosis-start__button {
        width: min(60vw, 308px);
    }
}


/* =========================================================
   診断説明画面
   tojilabo_app_20260724 2-6.pdf 準拠
   ========================================================= */
html,
body.diagnosis-about-page {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body.diagnosis-about-page {
    overflow: hidden;
    background: #c6d8e5;
}

.diagnosis-about-page .diagnosis-about {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background-image: url("../img/diagnosis_background_pc.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-tap-highlight-color: transparent;
}

.diagnosis-about__content {
    position: absolute;
    z-index: 1;
    top: calc(24vh + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 50px);
    max-width: 248px;
}

.diagnosis-about__title,
.diagnosis-about__body {
    display: block;
    width: 100%;
    height: auto;
}

.diagnosis-about__body {
    margin-top: 45px;
}

.diagnosis-about:focus-visible {
    outline: 2px solid rgba(49, 77, 91, 0.7);
    outline-offset: -4px;
}

/* スマートフォンでは縦位置・余白をPDF指定値に固定 */
@media (max-width: 767.98px) {
    .diagnosis-about-page .diagnosis-about {
        background-image: url("../img/diagnosis_background_sp.jpg");
        background-position: center center;
    }

    .diagnosis-about__content {
        top: calc(24vh + env(safe-area-inset-top));
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 50px);
        max-width: 248px;
    }

    .diagnosis-about__body {
        margin-top: 45px;
    }
}

/* 小型端末でも説明が上部に収まるよう比率を保って縮小 */
@media (max-width: 374px), (max-height: 650px) {
    .diagnosis-about__content {
        top: calc(18vh + env(safe-area-inset-top));
    }

    .diagnosis-about__body {
        margin-top: 30px;
    }
}


/* 診断説明画面：PCのみタイトル・説明文を中央配置 */
@media (min-width: 768px) {
    .diagnosis-about__content {
        left: 50%;
        transform: translateX(-50%);
        width: min(541px, calc(100vw - 80px));
    }
}


/* =========================================================
   診断説明画面：背景画像表示の固定
   ========================================================= */
body.diagnosis-about-page {
    min-height: 100vh;
    min-height: 100svh;
    background-color: #c6d8e5;
    background-image: url("../img/diagnosis_background_pc.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.diagnosis-about-page .diagnosis-about {
    min-height: 100vh;
    min-height: 100svh;
    background-color: transparent;
    background-image: url("../img/diagnosis_background_pc.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* PC：背景を維持したままタイトル・説明文だけ中央配置 */
@media (min-width: 768px) {
    body.diagnosis-about-page,
    .diagnosis-about-page .diagnosis-about {
        background-image: url("../img/diagnosis_background_pc.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .diagnosis-about__content {
        left: 50%;
        transform: translateX(-50%);
        width: min(541px, calc(100vw - 80px));
    }
}

/* スマートフォン：従来どおりSP背景・左寄せ */
@media (max-width: 767.98px) {
    body.diagnosis-about-page,
    .diagnosis-about-page .diagnosis-about {
        background-image: url("../img/diagnosis_background_sp.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .diagnosis-about__content {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* =========================================================
   診断画面：タイトル画像とロゴの配置
   ========================================================= */
.section-title{
    position: relative;
    margin: 77px 0 30px;
}

/* タイトル画像 */
.section-title-image{
    display: block;
    width: 80%;
    height: auto;
}

/* ロゴ */
.section-title-logo{
    position: absolute;

    /* タイトル画像の上に配置 */
    top: -12px;

    /* タイトル画像の右端に合わせる */
    right: 0;

    width: 29px;
    height: 29px;

    object-fit: contain;

    z-index: 10;
}

/* =========================================================
   診断結果画面：画像タイトル・右上ロゴ・再診断ボタン
   tojilabo_app_20260724 2-20.pdf 準拠
   ========================================================= */
.result-topbar {
    position: relative;
    display: block;
    min-height: 0;
    margin: 0;
}

.result-top-logo {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    display: block;
    width: 72px;
    height: auto;
}

.result-title-block {
    margin: 0 0 30px;
    padding-right: 98px;
}

.result-title-image {
    display: block;
    width: 100%;
    height: auto;
}

.result-image-heading {
    margin: 0 0 18px;
}

.result-image-heading img {
    display: block;
    width: 80%;
    height: auto;
}

.result-image-heading--match {
    margin-bottom: 18px;
}

.result-retry {
    text-align: center;
}

.result-retry__link {
    display: inline-block;
    width: min(330px, 86%);
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.result-retry__link img {
    display: block;
    width: 100%;
    height: auto;
}

.result-retry__link:hover,
.result-retry__link:focus-visible {
    opacity: 0.9;
    transform: translateY(-2px);
    outline: none;
}

.result-retry__link:active {
    transform: translateY(0);
}

@media (max-width: 600px) {
    .result-top-logo {
        width: 60px;
    }

    .result-title-block {
        margin-bottom: 24px;
        padding-right: 78px;
    }

    .result-image-heading,
    .result-image-heading--match {
        margin-bottom: 15px;
    }

    .result-retry__link {
        width: min(330px, 92%);
    }
}

/* =========================================================
   診断結果画面：「あなたに合う一湯」画像ボックス
   box_top / box_center / box_bottom と画像ラベルを使用
   ========================================================= */

.diagnosis-result-page .perfect-card--image {
    position: relative;
    display: block;
    margin: 0 0 34px;
    padding: 0;
    background: transparent;
    overflow: visible;
}

/* 旧CSSの切り欠き装飾を停止 */
.diagnosis-result-page .perfect-card--image::before,
.diagnosis-result-page .perfect-card--image::after,
.diagnosis-result-page .perfect-card--image .perfect-notch-right {
    display: none;
    content: none;
}

.diagnosis-result-page .perfect-box {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 元画像の比率をそのまま維持 */
.diagnosis-result-page .perfect-box--top {
    aspect-ratio: 610 / 472;
}

.diagnosis-result-page .perfect-box--center,
.diagnosis-result-page .perfect-box--bottom {
    aspect-ratio: 610 / 300;
}

/* 画像同士の継ぎ目を出さない */
.diagnosis-result-page .perfect-box + .perfect-box {
    margin-top: -1px;
}

.diagnosis-result-page .perfect-box__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

.diagnosis-result-page .perfect-box__content {
    position: absolute;
    z-index: 2;
}

/* 商品画像 */
.diagnosis-result-page .perfect-box__content--products {
    inset: 8% 8% 7%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagnosis-result-page .perfect-card--image .product-pair {
    display: grid;
    grid-template-columns: 1.35fr .8fr;
    align-items: end;
    gap: 7%;
    width: 86%;
    height: 100%;
    margin: 0 auto;
}

.diagnosis-result-page .perfect-card--image .product-pair img {
    display: block;
    width: 100%;
    height: 76%;
    max-height: none;
    object-fit: contain;
    align-self: center;
}

/* 湯質・香り説明 */
.diagnosis-result-page .perfect-box__content--detail {
    top: 50%;
    right: 7%;
    left: 20%;
    transform: translateY(-50%);
}

.diagnosis-result-page .perfect-box__label {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 3.2%;
    display: block;
    width: 9.5%;
    height: auto;
    max-height: 78%;
    transform: translateY(-50%);
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.diagnosis-result-page .perfect-card--image .perfect-copy h3 {
    margin: 0 0 4px;
    font-size: clamp(17px, 2.9vw, 20px);
    line-height: 1.35;
    letter-spacing: .12em;
    font-weight: 600;
    white-space: pre-line;
}

.diagnosis-result-page .perfect-card--image .perfect-copy .description {
    margin: 0 0 4px;
    font-size: clamp(13px, 2.15vw, 16px);
    line-height: 1.6;
    letter-spacing: .06em;
}

.diagnosis-result-page .perfect-card--image .meta-line {
    margin: 0;
    font-size: clamp(10px, 1.75vw, 13px);
    line-height: 1.7;
    letter-spacing: .06em;
    white-space: pre-line;
}

@media (max-width: 600px) {
    .diagnosis-result-page .perfect-card--image {
        margin-bottom: 28px;
    }

    .diagnosis-result-page .perfect-box__content--products {
        inset: 7% 5% 6%;
    }

    .diagnosis-result-page .perfect-card--image .product-pair {
        width: 90%;
        gap: 4%;
    }

    .diagnosis-result-page .perfect-card--image .product-pair img {
        height: 74%;
    }

    .diagnosis-result-page .perfect-box__content--detail {
        right: 5%;
        left: 20%;
    }

    .diagnosis-result-page .perfect-box__label {
        left: 3%;
        width: 9.5%;
        max-height: 80%;
    }

    .diagnosis-result-page .perfect-card--image .perfect-copy h3 {
        margin-bottom: 2px;
        font-size: clamp(14px, 4.2vw, 17px);
        line-height: 1.3;
    }

    .diagnosis-result-page .perfect-card--image .perfect-copy .description {
        margin-bottom: 2px;
        font-size: clamp(10px, 3.25vw, 13px);
        line-height: 1.45;
    }

    .diagnosis-result-page .perfect-card--image .meta-line {
        font-size: clamp(8px, 2.7vw, 11px);
        line-height: 1.45;
    }
}


/* =========================================================
   診断結果画面：診断タイトル幅に合わせた全体幅調整
   既存デザイン・画像・表示内容は変更しない
   ========================================================= */
body.diagnosis-result-page .page {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 30px 25px 42px;
}

body.diagnosis-result-page .section-title,
body.diagnosis-result-page .result-image-heading,
body.diagnosis-result-page .perfect-card--image,
body.diagnosis-result-page .recommend-list,
body.diagnosis-result-page .bottom-rule,
body.diagnosis-result-page .result-retry {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

body.diagnosis-result-page .perfect-box,
body.diagnosis-result-page .perfect-box__background {
    width: 100%;
}

@media (max-width: 359px) {
    body.diagnosis-result-page .page {
        max-width: 320px;
        padding-right: 25px;
        padding-left: 25px;
    }
}

/* Shared typography: Inter for Latin, Noto Sans JP for Japanese glyphs. */
body,
body * {
  font-family: 'Inter', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif !important;
  font-weight: 300 !important;
}

/* Editable text with the original diagnosis artwork proportions. */
.text-heading {
  position:relative;
  container-type:inline-size;
  margin:0;
  color:#314b57;
}
.text-heading:not(.text-heading--dashed)::before {
  content:"";
  position:absolute;
  left:0;
  top:23%;
  bottom:15%;
  border-left:1px solid currentColor;
}
.text-heading__ja,.text-heading__en {display:block;padding-inline-start:4%}
.text-heading__ja {
  font-size:clamp(12px,7cqi,38px);
  line-height:1.37;
  letter-spacing:.14em;
  border-bottom:1px solid currentColor;
}
.text-heading__en {
  padding-top:1.6%;
  font-size:clamp(10px,5.2cqi,28px);
  line-height:1.35;
}
.text-heading--dashed {width:80%}
.text-heading--dashed .text-heading__ja,
.text-heading--dashed .text-heading__en {padding-inline-start:1%}
.text-heading--dashed .text-heading__ja {
  font-size:6.5cqi;
  border-bottom:0;
  padding-bottom:2%;
  background:repeating-linear-gradient(90deg,currentColor 0 2.45%,transparent 2.45% 4.6%) left bottom/100% 1px no-repeat;
}
.diagnosis-about__content {container-type:inline-size}
.diagnosis-about__body {
  padding-inline-start:4%;
  color:#314b57;
  font-size:7cqi;
  line-height:1.5;
  letter-spacing:.12em;
}
.diagnosis-about__body small {display:block;text-align:right;font-size:.72em}
.diagnosis-start__button,.result-retry__link,
.diagnosis-nav .nav-btn:not(.submit),.confirmation-button-area .confirmation-back {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  border-radius:999px;
  background:#314b57;
  color:#fff;
  line-height:1.2;
  letter-spacing:.14em;
}
.diagnosis-start__button {
  position:relative;
  aspect-ratio:410 / 134;
  background:rgba(255,255,255,.8);
  color:#314b57;
  font-size:clamp(13px,4vw,22px);
  letter-spacing:.07em;
}
.diagnosis-start__button .text-chevron {position:absolute;right:12%}
.diagnosis-nav .nav-btn.back,.confirmation-button-area .confirmation-back {
  background:#c4d0d9;
  color:#314b57;
}
.diagnosis-nav .nav-btn:not(.submit) {font-size:16px}
.text-chevron {
  display:inline-block;
  width:.43em;
  height:.43em;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.text-chevron--back {transform:rotate(-135deg)}
.result-retry__link {display:inline-flex;aspect-ratio:330 / 98}
.diagnosis-result-page .perfect-box__label {
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:58 / 200;
  border:1px solid #314b57;
  border-radius:999px;
  color:#314b57;
  writing-mode:vertical-rl;
  font-size:clamp(10px,3.5vw,14px);
  letter-spacing:.13em;
  line-height:1;
}

.diagnosis-start__button:any-link {
  color:#314b57;
  text-decoration:none;
}
.result-retry__link:any-link {
  color:#fff;
  text-decoration:none;
}
.result-retry__link + .result-retry__link {margin-top:12px}
.diagnosis-nav .nav-btn,.confirmation-button-area button {text-decoration:none}