/*
E1 Rate View
*/
html,
body {
    margin: 0;
    padding: 0;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
    height: 100%;
    font-size: 2.0vw;
}

@media (min-width: 1340px) {
    html {
        font-size: 26px;
    }
}

body {
    min-height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    background: #000 url(../img/bg.png) repeat scroll 0 0;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    color: #fff;
    text-align: center;
}

img,
canvas {
    border: none;
    display: inline-block;
    vertical-align: middle;
}

a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid transparent;
    line-height: 1.2;
    
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:hover,
a:active {
    border-bottom-color: #6db3d4;
    color: #6db3d4;
}

label {
    display: inline-block;
    cursor: pointer;
    border: 0 none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1, h2, h3, nav, header {
    font-family: 'Wallpoet', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}

::selection ,
::-moz-selection {
    background: #6db3d4;
    color: #03070a;
}

/*
===============================================================
Utils
===============================================================
*/

.system__ui__hidden {
    opacity: 0.01;
    position: fixed;
    bottom: 0;
    left: 0;
}

.system__ui__fullscreen {
    opacity: 0.01;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 768px) {
    .sp {
        display: none!important;
    }
}

@media (max-width: 767px) {
    .pc {
        display: none!important;
    }
}

/*
Logo and Flag
*/
.flag,
.logo {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    border: none;
    background: transparent none no-repeat scroll center center;
    -webkit-background-size: 100% auto;
    background-size: contain;
    min-width: 1em;
    
    -webkit-user-select: none;
    user-select: none;
}

.flag::before,
.logo::before {
    content: '';
    display: block;
    padding-top: 100%;
}

.flag::before {
    padding-top: 66.6667%;
}

.flag > span,
.logo > span {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.01;
}

.logo.logo__eaffe1 {
    background-image: url(../img/logo_eaff_e1_1.png);
}

.logo.logo__aieleven {
    background-image: url(../img/logo_aieleven1.png);
}

.logo.logo__brave {
    background-image: url(../img/logo_brave1.png);
}

.logo.logo__brave::before {
    padding-top: 31.06796%;
}

.flag.flag__cn {
    background-image: url(../img/flags/cn.png);
}

.flag.flag__hk {
    background-image: url(../img/flags/hk.png);
}

.flag.flag__kr {
    background-image: url(../img/flags/kr.png);
}

.flag.flag__jp {
    background-image: url(../img/flags/jp.png);
}

.flag.flag__tp {
    background-image: url(../img/flags/tp.png);
}

/*
Boxes
*/
.box__octo {
    display: block;
    position: relative;
    margin: 2em 0;
    -webkit-user-select: none;
    user-select: none;
}

.box__octo__inner,
.box__octo::before,
.box__octo::after {
    content: '';
    display: block;
    position: relative;
    background: transparent url(../img/frame1m_sp.png) no-repeat scroll 0 0;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    padding-top: 3.1%;
}

.box__octo__inner {
    padding: 0.5em 4.166667%;
    margin: 0;
    background-repeat: repeat-y;
}

.box__octo::before {
    background-image: url(../img/frame1t_sp.png);
}

.box__octo::after {
    background-image: url(../img/frame1b_sp.png);
    background-position: left bottom;
}

@media (min-width: 768px) {
    .box__octo::before,
    .box__octo::after {
        padding-top: 1.70%;
    }
    
    .box__octo__inner {
        background-image: url(../img/frame1m.png);
    }
    
    .box__octo::before {
        background-image: url(../img/frame1t.png);
    }
    
    .box__octo::after {
        background-image: url(../img/frame1b.png);
    }
}

.box__octo__inner header {
    padding: -0.5em 0 1em;
}

.box__octo__inner header > * {
    margin: 0 auto;
    font-size: 3rem;
}

@media (min-width: 768px) {
    .box__octo__inner header > * {
        padding: 0 0 0.5em;
        font-size: 1.3rem;
    }
}

/*
text styles
*/
.text__sub {
    font-size: 0.7em;
}

/*
layout flagment
*/
.layout__versus {
    display: flex;
    font-family: 'Wallpoet', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin: 2em auto;
    position: relative;
}
@media (min-width: 768px) {
    .layout__versus {
        margin: 1em auto;
    }
}

.layout__versus::after {
    content: 'VS';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
}

@media (min-width: 768px) {
    .layout__versus::after {
        font-size: 1em;
    }
}

.layout__versus .area__team {
    position: relative;
    text-align: center;
    width: 33.333%;
    font-size: 1.5em;
}

@media (min-width: 768px) {
    .layout__versus .area__team {
        width: 16.666667%;
        font-size: 0.8em;
    }
}

.layout__versus .area__flag,
.layout__versus .area__name {
    display: inline-block;
    font-family: 'Wallpoet', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}

.layout__versus .area__flag {
    width: 6rem;
}

.layout__versus .area__name {
    display: block;
    margin-top: 0.5em;
}

/*
===============================================================
Layout
===============================================================
*/

.root > .page {
    display: flex;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    overflow: hidden;
    flex-flow: column;
    /*
    justify-content: center;
    */
    align-content: center;
}

.root > .page > * {
    max-width: 1200px;
    margin: 0 2vw;
    color: #fff;
}

@media (min-width: 768px) {
    .root > .page > * {
        width: 90vw;
        margin: 0 auto;
    }
}

.root > .screen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/*
footer
*/
.page__footer {
    font-size: 1em;
    display: none;
}

/*
header
*/
.page__header {
    position: relative;
    margin: 0 2vw;
}

.page__header h1 {
    margin: 3.72vw;
}

.page__header .logo.logo__eaffe1 {
    width: 9.733vw;
    position: absolute;
    top: 0;
    left: 0;
}

.page__header .logo.logo__aieleven {
    width: 16vw;
}

.page__header .logo.logo__brave {
    width: 13.8667vw;
    position: absolute;
    top: 0;
    right: 0;
}

@media (min-width: 768px) {
    .page__header {
        margin: 0;
    }
    
    .page__header h1 {
        margin: 1em;
    }
    
    .page__header .logo.logo__eaffe1 {
        width: 6.6667%;
    }
    
    .page__header .logo.logo__aieleven {
        width: 8.3333%;
    }
    
    .page__header .logo.logo__brave {
        width: 9.1666666%;
    }
}

/*
navi
*/
.page__header .system__menu {
    display: none;
    position: absolute;
    top: -3.72vw;
    left: -4vw;
    width: 100vw;
    height: 100vh;
    
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.page__header .system__menu::before {
    content: '';
    display: block;
    padding-top: 23.5%;
}

#system__menuopen:checked + * .page__header .system__menu {
    display: block;
    opacity: 1;
}

@media (min-width: 768px) {
    .page__header .system__menu {
        display: block;
        position: relative;
        opacity: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }
    
    .page__header .system__menu::before {
        display: none;
    }
    
    
    .page__header .system__menu .system__ui__close {
        display: none;
    }
}

.page__header nav {
    display: flex;
    justify-content: center;
    flex-flow: column;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

@media (min-width: 768px) {
    .page__header nav {
        flex-flow: row;
        justify-content: space-between;
        max-height: auto;
    }
}

.system__menu__title,
.page__header nav::before,
.page__header nav a {
    display: block;
    letter-spacing: 0.025em;
    border-top: 0.1em solid #00a2e6;
    border-bottom: 0.1em solid #00a2e6;
    -webkit-font-feature-settings: "palt" 1;
    font-feature-settings: "palt" 1;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 2rem;
    line-height: 1;
    margin: 0;
    padding: 0.75em 0;
    position: relative;
}

.page__header nav::before {
    content: ' ';
    color: transparent;
    border: transparent;
}

.system__menu__title {
    position: relative;
    z-index: 10;
    pointer-events: none;
}

/* .system__menu__title::after {
    content: '';
    display: block;
    width: 1.3em;
    height: 1.3em;
    background: transparent url(../img/arrow1sp.png) no-repeat scroll center center;
    background-size: 90% auto;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translate(0, -50%);
    transition: transform 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
} */

.page__header nav a {
    border-top: 0 none;
}

.page__header nav a::after {
    display: none;
}

.system__menu__title,
.page__header nav a:hover,
.root.type__aieleven .page__header nav .link__aieleven,
.root.type__matchdata .page__header nav .link__matchdata,
.root.type__matchplayer .page__header nav .link__matchplayer {
    background-color: rgba(0, 74, 107, 0.9);
}

.root.type__aieleven .page__header nav .link__aieleven,
.root.type__matchdata .page__header nav .link__matchdata,
.root.type__matchplayer .page__header nav .link__matchplayer {
    display: none;
}

#system__menuopen:checked + * .system__menu__title::after {
    transform: rotate(180deg) translate(0, 50%);
}

@media (min-width: 768px) {
    .page__header nav a {
        background: transparent;
        border-top: 0 none;
        border-bottom: 0.1em solid transparent;
        text-align: center;
        color: #6db3d4;
        font-size: 1rem;
        line-height: 1;
        padding: 0;
    }

    .page__header nav::before {
        display: none;
    }

    .page__header nav a:hover,
    .root.type__aieleven .page__header nav .link__aieleven,
    .root.type__matchdata .page__header nav .link__matchdata,
    .root.type__matchplayer .page__header nav .link__matchplayer {
        display: block;
        border-bottom-color: #6db3d4;
        color: #6db3d4;
        background: transparent;
        opacity: 1;
    }
    
    .system__menu__title {
        display: block;
        font-size: 1.7rem;
        border: 0 none;
        background: transparent;
        color: #fff;
        padding: 0.5em 0 0;
        pointer-events: none;
    }
    
    .system__menu__title::after {
        display: none;
    }
}

/*
stage
*/
.page__stage {
    font-family: 'Squada One', sans-serif;
}

.page__stage > * {
    opacity: 0;
    transition: opacity 0.5s linear 0.1s;
    pointer-events: none;
}

.js__loaded .page__stage > * {
    opacity: 1;
    pointer-events: all;
}

.page__stage > header {
    margin: 0 -2vw;
    opacity: 1;
}

.screen__realtime,
.screen__log {
    display: block;
    margin: 0 auto;
    position: relative;
}

.screen__realtime > canvas,
.screen__log > canvas {
    width: 100%;
    height: auto;
    pointer-events: none;
}

/*
data table
*/
.table__data,
.table__data th,
.table__data td,
.table__data tr {
    border: 0 none;
    border-collapse:  collapse;
}

.table__data {
    margin: 0 auto 1em;
}

@media (min-width: 768px) {
    .table__data {
        max-width: 64%;
    }
}

.table__data thead th {
    font-family: 'Wallpoet', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 1.5em;
    padding: 0.1em 1em;
    text-align: left;
}

@media (min-width: 768px) {
    .table__data thead th {
        font-size: 0.9em;
    }
}

.table__data thead th + th {
    text-align: center;
}

.table__data thead th:last-child {
    text-align: right;
}

.table__data tbody th {
    font-weight: normal;
    text-transform: lowercase;
    font-size: 1.7em;
    text-align: right;
    padding-right: 0.5em;
}

@media (min-width: 768px) {
    .table__data tbody th {
        font-size: 1em;
    }
}

.table__data tbody td {
    padding: 0.25em 0;
}

/*
realtime
*/
.section__realtime .section__body {
    display: flex;
    flex-direction: column;
}

.section__realtime .layout__versus {
    width: 100%;
}

@media (min-width: 768px) {
    
    .section__realtime .section__body {
        flex-direction: column-reverse;
    }
    
    .section__realtime .layout__versus {
        position: relative;
        width: 95%;
        margin-bottom: 0;
    }
    
    .section__realtime .layout__versus .area__team {
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .section__realtime .layout__versus .area__team + .area__team {
        flex-direction: row-reverse;
    }
    
    .section__realtime .layout__versus .area__flag,
    .section__realtime .layout__versus .area__name {
        margin: 0;
    }
    
    .section__realtime .layout__versus .area__flag {
        width: 2em;
        margin-right: 0.5em;
    }
    
    .section__realtime .layout__versus .area__team + .area__team .area__flag {
        margin-left: 0.5em;
        margin-right: 0;
    }
}

/*
log
*/
.section__timeline .section__body {
    display: flex;
    flex-direction: column;
    position: relative;
}

.section__timeline .layout__versus {
    width: 100%;
}

@media (min-width: 768px) {
    .section__timeline .layout__versus {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: flex-start;
    }
    
    .section__timeline .layout__versus::after {
        display: none;
    }
    
    .section__timeline .layout__versus .area__flag {
        width: 5rem;
    }
}


/*
ATTACKING QUALITY
*/
.section__attacking-quality{
    margin-bottom: 180px;
}
.section__attacking-quality__title{
    font-size: 3rem;
}
@media (min-width: 768px) {
    .section__attacking-quality__title{
        font-size: 1.3rem;
    }
}
.section__attacking-quality__total-score{
    display: flex;
    width: 86%;
    margin: auto auto 30px auto;
    font-size: 6rem;
    /* background: #00a2e6; */
}
@media (min-width: 768px) {
    .section__attacking-quality__total-score{
        display: flex;
        width: 86%;
        margin: auto auto 30px auto;
        font-size: 3rem;
        
    }
}
.section__attacking-quality__total-score-left{
    width: 50%;
    color: #ff0000;
    margin: 0;
}
.section__attacking-quality__total-score-right{
    width: 50%;
    color: #005e8a;
    margin: 0;
}
/*
    ATTACKING QUALITY - bar graph
*/
.section__attacking-quality__bar-graph{
    background-image: url(../img/graph_attacking-quality/soccer-field.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    padding-bottom: 1%;
}
.section__attacking-quality__bar-graph-wrapper{
    width: 84%;
    display: flex;
    justify-content: space-between;
    margin: auto;
}
.section__attacking-quality__bar-graph-wrapper > * {
    width: calc(100%/6); 
}
.section__attacking-quality__bar-graph-01,
.section__attacking-quality__bar-graph-02,
.section__attacking-quality__bar-graph-03,
.section__attacking-quality__bar-graph-04,
.section__attacking-quality__bar-graph-05,
.section__attacking-quality__bar-graph-06
{
    display: flex;
    flex-direction: column;
}
/*棒グラフとの距離*/
.section__attacking-quality__bar-graph-name{
    padding-bottom: 20px;
    font-size: 2rem;
}
@media (min-width: 768px) {
    .section__attacking-quality__bar-graph-name{
        padding-bottom: 20px;
        font-size: 1.3rem;
    }
}

/* cylinder1  */
.section__attacking-quality__bar-graph-01-cylinder-wrapper{
    margin: auto auto 0 auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    position: relative;
}
@media (min-width: 768px) {
    .section__attacking-quality__bar-graph-01-cylinder-wrapper{
        margin: auto auto 0 auto;
        padding: 10px 10px 10px 10px;
        position: relative;
    }
}

/* キャップ */
.section__attacking-quality__bar-graph-01-cylinder-top{
    background: #FE0E18;
    width: 24px;
    height: 7px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    bottom: 6px;
    z-index: 100;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-01-cylinder-top{
        background: #FE0E18;
        width: 40px;
        height: 14px;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        position: absolute;
        bottom: 12px;
        z-index: 100;
    }
}
.section__attacking-quality__bar-graph-01-cylinder-body{
    background: linear-gradient(180deg, #fe0e16d6 0%, #720305cb 100%);
    width: 24px;
    height: 4px;
    border: 1px solid #FFFFFF;
    border-radius: 0 0 30px 30px / 0 0 15px 15px;
    position: relative;
    bottom: 0;
    left: 0;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-01-cylinder-body{
        background: linear-gradient(180deg, #fe0e16d6 0%, #720305cb 100%);
        width: 40px;
        height: 10px;
        border: 1px solid #FFFFFF;
        border-radius: 0 0 30px 30px / 0 0 15px 15px;
        position: relative;
        bottom: 0;
        left: 0;
    }
}
/* cylinder2  */
.section__attacking-quality__bar-graph-02-cylinder-wrapper{
    margin: auto auto 0 auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    position: relative;
}
@media (min-width: 768px) {
    .section__attacking-quality__bar-graph-02-cylinder-wrapper{
        margin: auto auto 0 auto;
        padding: 10px;
        position: relative;
    }
}
/* キャップ */
.section__attacking-quality__bar-graph-02-cylinder-top{
    background: #FE0E18;
    width: 24px;
    height: 7px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    bottom: 6px;
    z-index: 100;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-02-cylinder-top{
        background: #FE0E18;
        width: 40px;
        height: 14px;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        position: absolute;
        bottom: 12px;
        z-index: 100;
    }
}
.section__attacking-quality__bar-graph-02-cylinder-body{
    background: linear-gradient(180deg, #fe0e16d6 0%, #720305cb 100%);
    width: 24px;
    height: 4px;
    border: 1px solid #FFFFFF;
    border-radius: 0 0 30px 30px / 0 0 15px 15px;
    position: relative;
    bottom: 0;
    left: 0;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-02-cylinder-body{
        background: linear-gradient(180deg, #fe0e16d6 0%, #720305cb 100%);
        width: 40px;
        height: 10px;
        border: 1px solid #FFFFFF;
        border-radius: 0 0 30px 30px / 0 0 15px 15px;
        position: relative;
        bottom: 0;
        left: 0;
    }
}
/* cylinder3  */
.section__attacking-quality__bar-graph-03-cylinder-wrapper{
    margin: auto auto 0 auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    position: relative;
}
@media (min-width: 768px) {
    .section__attacking-quality__bar-graph-03-cylinder-wrapper{
        margin: auto auto 0 auto;
        padding: 10px;
        position: relative;
    }
}
/* キャップ */
.section__attacking-quality__bar-graph-03-cylinder-top{
    background: #FE0E18;
    width: 24px;
    height: 7px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    bottom: 6px; 
    z-index: 100;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-03-cylinder-top{
        background: #FE0E18;
        width: 40px;
        height: 14px;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        position: absolute;
        bottom: 12px; 
        z-index: 100;
    }
}
.section__attacking-quality__bar-graph-03-cylinder-body{
    background: linear-gradient(180deg, #fe0e16d6 0%, #720305cb 100%);
    width: 24px;
    height: 4px;
    border: 1px solid #FFFFFF;
    border-radius: 0 0 30px 30px / 0 0 15px 15px;
    position: relative;
    bottom: 0;
    left: 0;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-03-cylinder-body{
        background: linear-gradient(180deg, #fe0e16d6 0%, #720305cb 100%);
        width: 40px;
        height: 10px;
        border: 1px solid #FFFFFF;
        border-radius: 0 0 30px 30px / 0 0 15px 15px;
        position: relative;
        bottom: 0;
        left: 0;
    }
}
/* cylinder4  */
.section__attacking-quality__bar-graph-04-cylinder-wrapper{
    margin: auto auto 0 auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    position: relative;
}
@media (min-width: 768px) {
    .section__attacking-quality__bar-graph-04-cylinder-wrapper{
        margin: auto auto 0 auto;
        padding: 10px;
        position: relative;
    }
}
/* キャップ */
.section__attacking-quality__bar-graph-04-cylinder-top{
    background: #005E8A;
    width: 24px;
    height: 7px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    bottom: 6px; /*下のheight+4になる*/
    z-index: 100;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-04-cylinder-top{
        background: #005E8A;
        width: 40px;
        height: 14px;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        position: absolute;
        bottom: 12px; /*下のheight+4になる*/
        z-index: 100;
    }
}
.section__attacking-quality__bar-graph-04-cylinder-body{
    background: linear-gradient(180deg, #005e8adb 0%, #00293Cdb 100%);
    width: 24px;
    height: 4px;
    border: 1px solid #FFFFFF;
    border-radius: 0 0 30px 30px / 0 0 15px 15px;
    position: relative;
    bottom: 0;
    left: 0;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-04-cylinder-body{
        background: linear-gradient(180deg, #005e8adb 0%, #00293Cdb 100%);
        width: 40px;
        height: 10px;
        border: 1px solid #FFFFFF;
        border-radius: 0 0 30px 30px / 0 0 15px 15px;
        position: relative;
        bottom: 0;
        left: 0;
    }
}
/* cylinder5  */
.section__attacking-quality__bar-graph-05-cylinder-wrapper{
    margin: auto auto 0 auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    position: relative;
}
@media (min-width: 768px) {
    .section__attacking-quality__bar-graph-05-cylinder-wrapper{
        margin: auto auto 0 auto;
        padding: 10px;
        position: relative;
    }
}
/* キャップ */
.section__attacking-quality__bar-graph-05-cylinder-top{
    background: #005E8A;
    width: 24px;
    height: 7px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    bottom: 6px;
    z-index: 100;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-05-cylinder-top{
        background: #005E8A;
        width: 40px;
        height: 14px;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        position: absolute;
        bottom: 12px;
        z-index: 100;
    }
}
.section__attacking-quality__bar-graph-05-cylinder-body{
    background: linear-gradient(180deg, #005E8Adb 0%, #00293Cdb 100%);
    width: 24px;
    height: 4px;
    border: 1px solid #FFFFFF;
    border-radius: 0 0 30px 30px / 0 0 15px 15px;
    position: relative;
    bottom: 0;
    left: 0;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-05-cylinder-body{
        background: linear-gradient(180deg, #005E8Adb 0%, #00293Cdb 100%);
        width: 40px;
        height: 10px;
        border: 1px solid #FFFFFF;
        border-radius: 0 0 30px 30px / 0 0 15px 15px;
        position: relative;
        bottom: 0;
        left: 0;
    }
}
/* cylinder6  */
.section__attacking-quality__bar-graph-06-cylinder-wrapper{
    margin: auto auto 0 auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    position: relative;
}
@media (min-width: 768px) {
    .section__attacking-quality__bar-graph-06-cylinder-wrapper{
        margin: auto auto 0 auto;
        padding: 10px;
        position: relative;
    }
}
/* キャップ */
.section__attacking-quality__bar-graph-06-cylinder-top{
    background: #005E8A;
    width: 24px;
    height: 7px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    bottom: 6px;
    z-index: 100;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-06-cylinder-top{
        background: #005E8A;
        width: 40px;
        height: 14px;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        position: absolute;
        bottom: 12px;
        z-index: 100;
    }
}
.section__attacking-quality__bar-graph-06-cylinder-body{
    background: linear-gradient(180deg, #005E8Adb 0%, #00293Cdb 100%);
    width: 24px;
    height: 4px;
    border: 1px solid #FFFFFF;
    border-radius: 0 0 30px 30px / 0 0 15px 15px;
    position: relative;
    bottom: 0;
    left: 0;
}
@media (min-width: 540px) {
    .section__attacking-quality__bar-graph-06-cylinder-body{
        background: linear-gradient(180deg, #005E8Adb 0%, #00293Cdb 100%);
        width: 40px;
        height: 10px;
        border: 1px solid #FFFFFF;
        border-radius: 0 0 30px 30px / 0 0 15px 15px;
        position: relative;
        bottom: 0;
        left: 0;
    }
}

/* 結果の数字 */
.section__attacking-quality__bar-graph-result{
    font-size: 2rem;
}

@media (min-width: 768px) {
    .section__attacking-quality__bar-graph-result{
        font-size: 1.4rem;
    }
}