body.sub    {
    background-position: center top 78.125vw;
}

.key:before {
    height: 92.447vw;
}

main section .inner .box > .flex  {
    gap: min(3.9683vw, 60px);
}

main section .inner .box > .flex .maincol   {
    flex: 1;
}

.history main section .inner .box > .flex .maincol h3  {
    gap: min(1.3228vw, 20px);
    background: #FFFFFF;
    border-width: 1px 0px;
    border-style: solid;
    border-color: #999999;
    box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
}
main section .inner .box > .flex .maincol dl   {
    position: relative;
    overflow-y: visible;
}
main section .inner .box > .flex .maincol dl:after   {
    content: "";
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: rgba(255,255,255,0.25);
}

.history main section .inner .box > .flex .maincol dl:before    {
    content: "";
    width: 14.5%;
    height: 100%;
    background-color: #E60012;
    position: absolute;
    left: -1.35%;
    bottom: 0;
    z-index: 0;
}

main section#h1 .inner .box > .flex .maincol dl:before {
    height: calc(100% + 50px);
    border-radius: 7.25vw 7.25vw 0 0;
}

main section#h4 .inner .box > .flex .maincol dl:before  {
    bottom: auto;
    top: 0;
    height: calc(100% + 50px);
    border-radius:0 0 7.25vw 7.25vw ;
}

main section .inner .box > .flex .maincol dl div.flex  {
    gap: 7.2%;
    align-items: stretch;
    position: relative;
    z-index: 2;
}

.award main section .inner .box > .flex .maincol dl div.flex   {
    gap: 0;
}

.award main section .inner .box > .flex .maincol dl div.flex:not(:last-of-type)  {
    border-bottom: 1px dashed #999999;

}
main section .inner .box > .flex .maincol dl div.flex dt   {
    width: 11.6%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history main section .inner .box > .flex .maincol dl div.flex dt   {
    padding: min(1.9841vw, 30px) 0;
}

.award main section .inner .box > .flex .maincol dl div.flex dt   {
    align-items: flex-start;
    padding: min(1.3228vw, 20px) 0;
}

.award main section .inner .box > .flex .maincol dl div.flex dt > span  {
    height: min(2.6455vw, 40px);
}

main section .inner .box > .flex .maincol dl div.flex:not(:last-of-type) dt:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;    
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}

.history main section .inner .box > .flex .maincol dl div.flex dt,
.history main section .inner .box > .flex .maincol dl div.flex dt * {
    line-height: 140%;
    color: white;
}

.award main section .inner .box > .flex .maincol dl div.flex dt,
.award main section .inner .box > .flex .maincol dl div.flex dt * {
    line-height: 1;
}


main section .inner .box > .flex .maincol dl div.flex dd   {
    flex: 1;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    position: relative;
}

.history main section .inner .box > .flex .maincol dl div.flex dd    {
    gap: min(3.3069vw, 50px);
}
main section .inner .box > .flex .maincol dl div.flex dd > span:not(.imgarea)    {
    flex: 1;
}

.history main section .inner .box > .flex .maincol dl div.flex:not(:last-of-type) dd:after  {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 65.55%;
    border-bottom: 1px dashed #999999;
}

.award main section .inner .box > .flex .maincol dl div.flex dd > span.singletopic  {
    border-bottom: 1px dashed #999999;
    min-height: min(2.6455vw, 40px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: min(0.6614vw, 10px);
    padding: min(1.3228vw, 20px) 0  min(1.3228vw, 20px) min(1.3228vw, 20px);
}

.award main section .inner .box > .flex .maincol dl div.flex dd > span.singletopic .label   {
    width: min(5.2910vw, 80px);
    height: min(1.9841vw, 30px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: min(0.9921vw, 15px);
}

.award main section .inner .box > .flex .maincol dl div.flex dd > span.singletopic .label.bg_blue   {
    background-color: #233F75;
}

.award main section .inner .box > .flex .maincol dl div.flex:not(:last-of-type) dd > span:last-of-type {
    border-bottom: 0;
}

.award main section .inner .box > .flex .maincol dl div.flex dd > span.singletopic .text {
    display: block;
    width: 100%;
    flex: 1;
}

main section .inner .box > .flex .maincol dl div.flex dd .imgarea  {
    aspect-ratio: 8/5;
    width: 28.6%;
    border-radius: min(0.6614vw, 10px);
    overflow: clip;
}

main section .inner .box > .flex .maincol dl div.flex dd .imgarea img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main section .inner .box > .flex .asidecol  {
    position: relative;
    width: min(2.5vw, 48px);
    min-height: 54.8946vw;
    overflow: visible;
}

main section .inner .box .buttonarea {
    display: flex;
    width: 100%;
}

main section .inner .box > .flex .asidecol .buttonarea {
    position: absolute;
    top: 0;
    left: min(2.6455vw, 40px);
    transform-origin: left top;
    transform: rotate(90deg);
    width: 54.8946vw;
}

main section .inner .box .buttonarea .button {
    gap: min(0.6614vw, 10px);
    width: 100%;
}

main section .inner .box .buttonarea .button a   {
    width: 25%;
    height: min(2.6455vw, 40px);
}

main section .inner .box > .flex .asidecol .buttonarea .button a {
    width: min(13.2276vw, 200px);
}

main section .inner .box .buttonarea .button a.current   {
    pointer-events: none;
    background-color: #EEEEEE;
}

main section .inner .box .buttonarea .button a:after {
    content: "▼";
    color: #F00;
    font-size: min(0.5291vw, 8px);
    position: absolute;
    right: min(0.9921vw, 15px);
}

@media screen and (max-width: 834px)    {
    body.sub    {
        background-position: center top 199vw;
    }
    .key:before {
        height: 199vw;
    }
    
    .history main section .inner .box > .flex .maincol dl:before {
        width: 23.58%;
        left: -2.36%;
    }
    
    main section .inner .box > .flex .maincol dl div.flex dt    {
        width: 18.86%;
    }
    
    .history main section#h1 .inner .box > .flex .maincol dl:before {
        height: calc(100% + 10vw);
        width: 23.58%;
        border-radius: 10vw 10vw 0 0;
    }
    
    .history main section#h4 .inner .box > .flex .maincol dl:before  {
        bottom: auto;
        width: 23.58%;
        top: 0;
        height: calc(100% + 10vw);
        border-radius:0 0 10vw 10vw;
    }
    
    .history main section .inner .box > .flex .maincol dl div.flex dt   {
        padding: 5.09vw 0 5.09vw;
    }
    
    main section .inner .box > .flex .maincol dl div.flex dt    {
        align-items: flex-start;
        padding: 5.09vw 0 5.09vw;
    }

    main section .inner .box > .flex .maincol dl div.flex dd    {
        align-items: flex-end;
        padding: 5.09vw 0 5.09vw;
    }

    main section .inner .box > .flex .maincol dl div.flex dd span:not(.imgarea) {
        width: 100%;
        display: flex;
        align-items: center;
    }

    main section .inner .box > .flex .maincol dl div.flex dd .imgarea   {
        width: 29.85vw !important;
        border-radius: 1.27vw !important;
        padding: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .award main section .inner .box .buttonarea .button {
        flex-wrap: wrap;
        gap: 2.04vw;
    }
    
    .award main section .inner .box .buttonarea .button a   {
        width: calc((100% - 2.04vw) / 2);
        height: 10.18vw;
        border-radius: 5.09vw;
    }
    
    .award main section .inner .box .buttonarea .button a:after {
        font-size: 2.04vw;
        right: 2.54vw;
    }
    
    .award main section .inner .box > .flex .maincol h3.underline,
    .award main section .inner .box > .flex .maincol h3.underline *   {
        line-height: 1;
        padding-bottom: 1.27vw;
    }
    
    .award main section .inner .box > .flex .maincol dl div.flex dt {
        width: 31.05%;
    }
    
    .award main section .inner .box > .flex .maincol dl div.flex dt > span  {
        height: 10.18vw;
    }
    
    .award main section .inner .box > .flex .maincol dl div.flex dd    {
        padding: 0;
    }
    
    .award main section .inner .box > .flex .maincol dl div.flex dd > span.singletopic  {
        align-items: flex-start;
        padding-left: 0;
    }
    
    .award main section .inner .box > .flex .maincol dl div.flex dd > span.singletopic .label   {
        width: 20.36vw !important;
        height: 7.63vw;
        margin: 1.27vw 0 1.27vw;
        border-radius: 3.82vw;
    }
}