:root {
    --gray: #616161;
    --red: #E42737;
    --green: #93D462;
}

.gray {
    --maincolor: var(--gray);
}

.red {
    --maincolor: var(--red);
}

.green {
    --maincolor: var(--green);
}

.seimei__detail__inner {
    padding: 0 15px 15px;
    margin-bottom: 0px;
}

.seimei__detail {
    background: #d9d9d9;
    padding: 0px 0;
}



.result__title {
    margin: 0;
    font-size: clamp(10px, calc((35/ 600)*100vw), 35px);
    text-align: center;
    margin-top: 30px;
}

.result__explanation {
    font-size: clamp(10px, calc((35/ 600)*100vw), 35px);
    text-align: center;
    margin-bottom: 0;
}

.result__explanation p {
    padding: 10px 15px;
    border-radius: 10px;
    color: #fff;
    background-color: #111111;
    margin: 0;
    display: inline-block;
}

.result__gogyo,
.result__gokaku {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail__item {
    border: 2px solid var(--maincolor);
    border-radius: 10px;
    padding: clamp(10px, calc((20/ 600)*100vw), 20px);
    font-size: 14px;
    background: #fff;
}

.detail__kikkyo {
    height: clamp(50px, calc((80/ 600)*100vw), 80px);
    width: clamp(50px, calc((80/ 600)*100vw), 80px);
    background: var(--maincolor);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(16px, calc((20/ 600)*100vw), 20px);
    font-weight: bold;
    color: #fff;
    text-align: center;
}

.detail__num {
    font-size: clamp(20px, calc((40/ 600)*100vw), 40px);
}

.detail__name {
    font-size: clamp(20px, calc((40/ 600)*100vw), 40px);
    font-weight: bold;
    color: var(--maincolor);
}

.detail__head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(0px, calc((10/ 600)*100vw), 10px);
    border-bottom: 1px dashed #000;
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-right: clamp(0px, calc((20/ 600)*100vw), 20px);
}

.detail__num {
    flex: 1;
}

.detail__body {
    font-size: 14px;
    line-height: 1.6;
}

.title__red {
    color: var(--red);
}

.niun__head {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.niun__head>div {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}



.niun__head svg {
    width: 50px;
    height: auto;
    fill: #bebebe;
}

.niun__head {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.niun__head>div {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.niun__head svg {
    width: 50px;
    height: auto;
    fill: #bebebe;
}

.niun__body {
    display: flex;
    gap: 10px;
}


.niun__detail {
    display: flex;
    background: var(--maincolor);
    border-radius: 10px;
    color: #fff;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    flex: 1;
}

@media screen and (max-width:400px) {
    .niun__detail {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 5px;

    }
}

.niun__detail--heading {
    width: clamp(30px, calc((50/ 600)*100vw), 50px);
    height: clamp(30px, calc((50/ 600)*100vw), 50px);
    background: #ffffff;
    border-radius: 100px;
    font-weight: bold;
    color: var(--maincolor);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, calc((16/ 600)*100vw), 16px);
}

.niun__tenkaku {
    font-size: clamp(12px, calc((16/ 600)*100vw), 14px);
    font-weight: bold;
}

.niun__chikaku {
    font-size: clamp(16px, calc((20/ 600)*100vw), 20px);
}





.niun__heading {
    margin-bottom: 10px;
}

.niun__detail--body {
    flex: 1;
}

.seimei__link a {
    font-weight: bold;
    font-size: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid;
    gap: 5px;
    padding-bottom: 5px;
}

.seimei__link svg {
    fill: #000;
}

.seimei__link {
    text-align: center;
    margin-top: 20px;
}

.seimei__link a span {
    display: flex;
}

.detail__kikkyo.kikkyo_kin {
    background: #ceaa7b;
}

.detail__kikkyo.kikkyo_mizu {
    background: #51DBD3;
}

.detail__kikkyo.kikkyo_hi {
    background: #F1594D;
}

.detail__kikkyo.kikkyo_tuchi {
    background: #616161;
}

.detail__kikkyo.kikkyo_ki {
    background: #72c845;
}

.seimei__bottomlink:before {
    content: "";
    display: block;
    width: 50%;
    background: url(../../static/images/name/seimei__lastlink_ex.png);
    background-size: cover;
    height: auto;
    aspect-ratio: 1575 / 342;
    background-position: center;
    margin: auto;
}

.seimei__bottomlink {
    background: linear-gradient(rgb(255 255 255) 20%, rgb(0 0 0 / 0%) 20%), url(../../static/images/name/seimei__lastlink_bk.png) 20%;
    background-repeat: no-repeat;
    background-size: cover;
}

/*  */


.seimei_shindanbox_result .retry_button {
    width: 60%;
}

@media screen and (max-width: 375px) {
    .seimei_shindanbox_result .retry_button {
        width: 80%;
    }
}

.explanation__title {
    font-weight: bold;
    font-size: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding-bottom: 5px;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.explanation__title span svg {
    fill: #000;
}

.explanation__title span {
    display: flex;
}


.nameIndex__itemHead {
    font-size: clamp(20px, calc((40 / 600) * 100vw), 40px);
    align-items: baseline;
}

.nameIndex__itemHead .ruby {
    font-size: 12px;
}

.nameIndex__subItem {
    background: #F4F4F4;
    padding: 10px;
    margin-bottom: 10px;
}

.nameIndex__subItem:last-child {
    margin-bottom: 0;
}

.nameIndex__subHead {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 5px;
}

.nameIndex__subHead .ruby {
    font-size: 12px;
}

.nameIndex__itemImage {
    max-width: 400px;
    margin: 0 auto 20px;
}

.nameIndex__bottomLink a {
    background: #BA1F1D;
    color: #fff;
    border: 3px solid #111111;
    box-shadow: 2px 2px 0 #111111;
    padding: 20px;
    font-size: clamp(18px, 4vw, 24px);
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    display: block;
    text-align: center;
}

.nameIndex__bottomLink a:after {
    content: "";
    background: url(../../static/images/arrow_right_wh.svg);
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%) translateX(-50%);
    right: 0;
}

.nameIndex__exList {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.onom_formtext {
    background: #ededed;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #616161;
    line-height: 1.6;
}

.seimei_result_imagebox {
    width: 100%;
    margin: 0;
    padding: 0;
}