.header-logo {
    position: relative;
    z-index: 1000;
    width: 100%;
    background-color: #313336;
}

/* Flexboxを使用して画像を横並びにする */
.images-row {
    display: flex;
    justify-content: space-around;
    /* 画像の間に均等なスペースを作成 */
    align-items: center;
    /* 画像を垂直方向の中央に配置 */
}

.images-row img {
    height: 100px;
    /* 画像の高さを固定 */
    max-width: 100%;
    /* 画像がそのコンテナの幅を超えないように設定 */
}

/* 画面幅が600px以下の場合のスタイル */
@media (max-width: 600px) {
    .images-row img {
        height: 50px;
        /* 画像の高さを小さくする */
        max-width: 50%;
    }
}

/* font-family: roboto; */
#content {
    /* font-family: 'Roboto'; */
    color: #393939;
}

/* アニメーションのクラスを追加 */
.slide-up-effect {
    transform: translateY(30px);
    /* 少し下から */
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.slide-up-effect.slide-up-start {
    transform: translateY(0);
    opacity: 1;
}

.landing_screen_body {
    min-height: 500px;
    max-width: 585px;
    width: 100%;
    border-radius: 10px;
    padding: 40px;
    position: relative;
    display: flex;
    align-items: center;
    margin: 5%;
}

/* smartphone */
@media (max-width: 600px) {
    .landing_screen_body {
        padding: 20px;
        margin: 5%;
        min-height: 70vh;
        max-width: 90%;
    }
}

.question_screen_body {
    min-height: 500px;
    max-height: 90vh;
    max-width: 585px;
    width: 100%;
    border-radius: 10px;
    padding: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5% auto;
}

.screen_body {
    background: rgba(255, 255, 255, 0.86);
    /* background: rgba(145, 145, 145, 0.76); */

}

.wrapper_footer {
    position: fixed;
    bottom: -20;
    width: 100%;
    background-color: #313336;
    /* padding: 10px 0; */
    text-align: center;
    color: #fff;
    align-items: center;
    justify-content: center;
    display: flex;
    /* border radius bottom only 10px */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media (max-width: 600px) {
    .question_screen_body {
        padding: 20px;
        margin: 5%;
        height: 75vh;
        max-height: 75vh;
        max-width: 90%;
    }
}


.question_heading {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.question_sub_heading {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.question_sub_text {
    font-size: 1.1rem;
    margin-bottom: 20px;
    /* color: #555; */
}


.footer-button {
    width: 100px;
}

.option_div {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #888;
    padding: 5px 10px;
    margin-right: 10px;
}

/* selected also black */
.form-check-input:checked {
    background-color: #000;
    border-color: #000;
}

/* forcused  */
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
    /* shadow color */
}

.option_div label {
    width: 100%;
}


/* result bar */
.semicircle-progress{
    display: block;
    /* height: 220px; */
    position: relative;

}
.semicircle-progress svg {
    width: 250px;
    height: 'auto';
    /* viewBoxのサイズを調整 */
}
.semicircle-progress svg path {
    stroke-linecap: round;
    stroke-width: 6px;
}

.semicircle-progress svg path.progress-dark{
    stroke-dasharray: 198;
    /* transition: width .5s ease-in-out; */

}

span.progress-count{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.semicircle-progress .progress-count{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* font-size: 1.5rem; */
    color: #000;
}
.progress-count p {
    margin: 0;
    padding: 0;
    font-size: 2rem;
}