:root {
    --qa-chip-child: var(--qa-primary);
    --qa-chip-parent: var(--qa-secondary);
    --qa-shd: rgba(0, 0, 0, 0.54);
}

.qa_header_box {
    position: relative;
    
    width: 100%;
    height: max(calc(100vh / 2.5), 150px);
    background-size: cover;
    background-position: center center;
    background-repeat:  no-repeat;
}

.qa_header_box::before {
    content: '';
    /* ↓暗いオーバーレイを半透明で配置 */
    background-color: var(--qa-shd);
    /* ↓全体を覆うように配置 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.qa_header_box * {
    color: var(--text-on-fill);
}

.qa_header_link {
    position: absolute;
    left: 3%;
    padding-top: 12px;
    width: 100%;
    text-align: start;
}

.qa_header_link * {
    display: inline-block;
    font-size: clamp(4px, calc(100vw/40), 18px);
}

.qa_header_link p::after {
    content: ">";
    padding: 0px 4px;
    font-size: clamp(4px, calc(100vw/40), 18px);
    aspect-ratio: 1;
    margin: auto;
}

.qa_header_title {
    position: absolute;
    top: 50%;
    left: 3%;
    font-weight: bold;
    width: 100%;
    padding: clamp(4px, calc(100vw/40), 18px) 0;
    text-align: start;
    
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.qa_header_title h1 {
    font-size: clamp(8px,calc(100vw/20), 50px);
}

.qa_header_title p {
    font-size: clamp(6px,calc(100vw/30), 30px);
}

.insert_img_box {
    display : block;
    margin: 24px auto;
    width: 50%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.insert_img_box img {
    width: 100%;
    box-shadow: 0 0 0px 0px var(--shd);
    margin: 16px auto;
    transition: box-shadow .5s;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 800px) { 
    .insert_img_box {
        width: min(400px,100%);
    }
}

@media not screen and (max-width: 400px) {
    .insert_img_box img:hover {
        box-shadow: 0 0 8px 4px var(--shd);
        transition: box-shadow .5s;
    }
}

.insert_img_box p {
    text-align: center;
    font-style: italic;
}

.insert_music {
    padding: 24px;
}

.question * {
    text-align: center;
}

.chip_child {
    background-color: var(--qa-chip-child);
    color: var(--text-on-fill);
    border-radius: 100vh;
    width: 4em;
    margin: 8px auto;
}

.chip_parent {
    background-color: var(--qa-chip-parent);
    color: var(--text-on-fill);
    border-radius: 100vh;
    width: 8em;
    margin: 8px auto;
}

ul li {
    text-align: start;
}

ol li {
    text-align: start;
}

#ask_eiko_st_3_box h3 {
    text-align: start;
}

.ask_eiko_st_3_enter {
    margin-bottom: 24px;
}

ul.activities_list,
ul.foods_list {
    column-count: 2;
    max-width: 600px;
    margin: auto;

}


@media screen and (max-width:600px) {
    ul.activities_list,
    ul.foods_list {
        column-count: 1;
        max-width: 280px;
    }
}

ul.activities_list > li,
ul.foods_list > li {
    width: 280px;
}

ul.activities_list > li > ul > li,
ul.foods_list > li > ul > li {
    list-style-type:none;
}

.ranking_block {
    display: flex;
    padding: 8px 8px;
}

.ranking_block p {
    padding: 0 8px;
}

.ranking_chip {
    color: var(--text-on-fill);
    border-radius: 100vh;
    width: 4em;
    flex-shrink: 0;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

#ranking_1 .ranking_chip {
    background-color: gold;
}

#ranking_2 .ranking_chip {
    background-color: silver;
}

#ranking_3 .ranking_chip {
    background-color: #815a2b;
}

#ranking_u4 .ranking_chip {
    background-color: darkgray;
}

.footer_link {
    margin-bottom: 48px;
}

.footer_link p {
    margin: 16px auto;
    text-align:center;
}