body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

dialog.dialog_abort {
    border: gray solid 1px;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px #0004;
/*    
    display: flex;
    flex-direction: column;
    padding: 2rem;
    width: 35rem;
*/
  }
  
input[type=checkbox] { transform: scale(2.0);margin-bottom: 16px; }
select { transform: scale(1.2);margin:4px auto 4px 16px;}
label {margin-left: 10px;}
H1, h2, p ,table{text-align:center;margin: 2px 8px 2px 8px;margin-left: auto;margin-right: auto;}
button {
    display: block;
    margin: 0 auto 10px auto;
    padding: 5px;
    width: 200px;
    font-size: 16px;
    text-align:center;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.02857em;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    margin: auto;
    }
.abort_OR {
    background-color:#E97131;
}
.abort_GR {
    background-color:#33CC33;
}
.abort_AQ {
    background-color:#00B0F0;
}
button.abort img {opacity: 100%;}
button.abort5 img {opacity: 100%;}
button.abort7 img {opacity: 100%;}

.inst {text-align:center}
.time {position: absolute; right: 0;}
.sec {font-size: 48px;}
.jp {font-size: 28px; text-align: center; margin-bottom: 10px;}
button.ans5 {font-size: 24px; padding: 10px; width: 350px; border-radius: 10px; background-color: #CCF;border-radius: 10px;}
button.ans5:hover {background-color: #FFC;}

/*
button.abort {pointer-events: fill; width: 120px;font-size: 20px;color: #000;text-align:center;margin: 0 auto 10px auto;min-width: 80px;min-height: 28px;border-radius: 10px;}
*/
button.abort {  pointer-events: fill;
                border: none;  margin: auto 0 auto auto; 
                padding: unset; width: 26px; height: 26px; 
            }


button.abort5 {pointer-events: fill; border: none;  margin: auto 0 auto auto; padding: unset; width: 26px; height: 26px; }
button.abort7 {pointer-events: fill; border: none;  margin: auto 0 auto auto; padding: unset; width: 26px; height: 26px; }

button.abort-pc {width: 120px;font-size: 20px;color: #000;text-align:center;margin: 0 auto 10px auto;min-width: 80px;min-height: 28px;border-radius: 10px;}
button.abort-sp {width: 120px;font-size: 20px;color: #000;text-align:center;margin: 0 auto 10px auto;min-width: 80px;min-height: 28px;border-radius: 10px;}


button.ans5-pc {width: 350px;font-size: 24px;color: #FFF;text-align:center;border: 1px solid #33CC33;margin: 0 auto 10px auto;min-width: 200px;background: linear-gradient(#92E092, #33CC33);min-height: 48px;border-radius: 10px;}
button.ans5-pc:hover {border: 1px solid #155a15;}
button.ans5-pc:active {border: 1px solid #3c753c; background: radial-gradient(circle farthest-side, #258525, #104610);}
button.ans5-pc:disabled {border: 1px solid #dcdcdc; background: radial-gradient(circle farthest-side, #dcdcdc, #dcdcdc);}
button.ans5-sp { width: 320px; font-size: 24px; color: #FFF; text-align:center;  border: 1px solid #33CC33; margin: 0 auto 10px auto; min-width: 200px; background: linear-gradient(#BEEEBE , #33CC33); min-height: 48px; border-radius: 10px;}
button.ans5-sp:hover {border: 1px solid #155a15;}
button.ans5-sp:active {border: 1px solid #3c753c; background: radial-gradient(circle farthest-side, #258525, #104610);}
button.ans5-sp:disabled {border: 1px solid #dcdcdc; background: radial-gradient(circle farthest-side, #dcdcdc, #dcdcdc);}

button.ans7-pc { width: 350px; font-size: 24px; color: #FFF; text-align:center;  border: 1px solid #0074f0; margin: 0 auto 10px auto; min-width: 200px; background: linear-gradient(#82E4F7 , #00B0F0); min-height: 48px; border-radius: 10px;}
button.ans7-pc:hover {border: 1px solid #234451;}
button.ans7-pc:active {border: 1px solid #21647e; background: radial-gradient(circle farthest-side, #004cf0, #10285c);}
button.ans7-pc:disabled {border: 1px solid #dcdcdc; background: radial-gradient(circle farthest-side, #dcdcdc, #dcdcdc);}

button.ans7-sp { width: 320px; font-size: 24px; color: #FFF; text-align:center;  border: 1px solid #0074f0; margin: 0 auto 10px auto; min-width: 200px; background: linear-gradient(#82E4F7 , #00B0F0); min-height: 48px; border-radius: 10px;}
button.ans7-sp:hover {border: 1px solid #234451;}
button.ans7-sp:active {border: 1px solid #21647e; background: radial-gradient(circle farthest-side, #004cf0, #10285c);}
button.ans7-sp:disabled {border: 1px solid #dcdcdc; background: radial-gradient(circle farthest-side, #dcdcdc, #dcdcdc);}

/*
button.ans5-pc {font-size: 24px; padding: 10px; width: 350px; border-radius: 10px; background: linear-gradient(0deg, #BEEEBE , #33CC33 , #BEEEBE); background-color: #0A0;color:white;border-radius: 10px;}
button.ans5-pc:hover {background-color: #FFC;color:black; background: linear-gradient(0deg, #e2eebe , #b5cc33 , #e2eebe); background-color: #b5cc33;}
button.ans5-sp {font-size: 24px; padding: 10px; width: 320px; border-radius: 10px; background: linear-gradient(0deg, #BEEEBE , #33CC33 , #BEEEBE); background-color: #0A0;color:white;border-radius: 10px;}
button.ans5-sp:hover  {font-size: 24px; padding: 10px; width: 320px; border-radius: 10px; background: linear-gradient(0deg, #BEEEBE , #33CC33 , #BEEEBE); background-color: #0A0;color:white;border-radius: 10px;}

button.ans7 {font-size: 24px; padding: 10px; width: 350px; border-radius: 10px; background-color: #CCF;border-radius: 10px;}
button.ans7:hover {background-color: #FFC;}

button.ans7-pc {font-size: 24px; padding: 10px; width: 350px; border-radius: 10px; background: linear-gradient(0deg, #82E4F7 , #00B0F0 , #82E4F7); background-color: #0A0;color:white;border-radius: 10px;}
button.ans7-pc:hover {background-color: #FFC;color:black; background: linear-gradient(0deg, #e2eebe , #b5cc33 , #e2eebe); background-color: #b5cc33;}
button.ans7-pc:disabled { background:unset; background-color: gray;color:black;border-radius: 10px; font-size: 24px; padding: 10px; width: 350px; border-radius: 10px;}
button.ans7-sp {font-size: 24px; padding: 10px; width: 320px; border-radius: 10px; background: linear-gradient(0deg, #82E4F7 , #00B0F0 , #82E4F7); background-color: #0A0;color:white;border-radius: 10px;}
button.ans7-sp:hover  {font-size: 24px; padding: 10px; width: 320px; border-radius: 10px; background: linear-gradient(0deg, #82E4F7 , #00B0F0 , #82E4F7); background-color: #0A0;color:white;border-radius: 10px;}
button.ans7-sp:disabled { background:unset; background-color: gray;color:black;border-radius: 10px; font-size: 24px; padding: 10px; width: 320px; border-radius: 10px;}
*/



.cd_base {
    position: relative;
    width: 128px;
    height: 128px;
}
.cd_over1 {
    position: absolute;
    z-index: 1;
    width: 128px;
    height: 128px;
}
.cd_over2 {
    display:none;
    position: absolute;
    z-index: 1;
    width: 128px;
    height: 128px;
    left: 0px;
    top: -12px;
}
.cd_over3 {
    position: absolute;
    z-index: 1;
    width: 128px;
    height: 128px;
    left: 0px;
    top: 50%;
}
div.q{
    font-size: 48px;
    text-align: center;
    margin-bottom: 30px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.sec5-pc {font-size: 32px;visibility: visible;width: 128px; height: 128px;}
.sec5-sp {font-size: 32px;visibility: visible;width: 128px; height: 128px;}
.eng5-pc {text-align: center; margin-bottom: 30px;}
.eng5-sp {text-align: center; margin-bottom: 30px;}
.sec7-pc {font-size: 32px;visibility: visible;width: 128px; height: 128px;}
.sec7-sp {font-size: 32px;visibility: visible;width: 128px; height: 128px;}
.eng7-pc {text-align: center; margin-bottom: 30px;}
.eng7-sp {text-align: center; margin-bottom: 30px;}
.img {width: 128px; height: 128px;object-fit: cover;}

.cntdownNone {display: block;width: 128px; height: 128px;visibility: hidden;}
.cntdown3{display: block;visibility: visible;background-image: url("img/CountDownParts3.png");background-repeat: no-repeat;}
.cntdown2{display: block;visibility: visible;background-image: url("img/CountDownParts2.png");background-repeat: no-repeat;}
.cntdown1{display: block;visibility: visible;background-image: url("img/CountDownParts1.png");background-repeat: no-repeat;}
.cntdown0{display: block;visibility: visible;background-image: url("img/CountDownParts0.png");background-repeat: no-repeat;}

.centering{margin-right:auto; margin-left:auto;min-width: 760px;text-align: center;text-align: -moz-center;}

.top {height: calc(100dvh - 120px); overflow-y: auto;}
.a {margin-bottom: 50px;}

H1.H1_OR {color: #E97131;margin-bottom: 0px;}
H1.H1_GR {color: #33CC33;margin-bottom: 0px;}
H1.H1_AQ {color: #00B0F0;margin-bottom: 0px;}

H2.H2_OR {color: #E97131;margin-bottom: 0px;}
H2.H2_GR {color: #33CC33;margin-bottom: 0px;}
H2.H2_AQ {color: #00B0F0;margin-bottom: 0px;}
.copyright {
    &::before {
        content:"© 2025 ATR Learning Technology Co.,Ltd."
    }
}

.HEADER_CLOSE {pointer-events: none; position:absolute; z-index:10; width: 100%;max-width: 760px; height:32px; margin-top: 3px;}

/*.ZONE_UP {height: calc(100dvh - 120px - env(safe-area-inset-bottom)); overflow-y: auto;overflow-x: hidden;}*/
.ZONE_UP {position: relative; height: calc(100dvh - env(safe-area-inset-bottom)); overflow-y: auto;overflow-x: hidden;}
.HEADER_OR {width: 100vw; height: 40px;background-color:#E97131;margin-top: 0px;text-align:left;color:white;font-size: 15px;}
.HEADER_GR {width: 100vw; height: 40px;background-color:#33CC33;margin-top: 0px;text-align:left;color:white;font-size: 15px;}
.HEADER_AQ {width: 100vw; height: 40px;background-color:#00B0F0;margin-top: 0px;text-align:left;color:white;font-size: 15px;}
/*
.FOOTER {height: 100px;  width: 100%;  position: relative; }
*/
/*.FOOTER { max-height: 120px; height: 120px;padding-bottom: env(safe-area-inset-bottom);}*/
.FOOTER { background-color: #FFFFFF00; max-height: 110px; height: 110px;bottom: env(safe-area-inset-bottom);
    position:absolute;width: 100vw;
    pointer-events: none;
    text-align: center;
    z-index: 5;
}

.FOOTER_SPACER {width: 100vw; height: 120px;background-color:#FFF0;}

.FOOTER_OR {width: 100vw; height: 44px;background-color:#E97131;
    text-align:center;color:black;font-size: 8px;
    position: absolute; top: calc(100% - 20px - 24px - env(safe-area-inset-bottom));
    z-index: -1; margin: auto auto 0px auto; width: 98%;
    pointer-events: fill; 
}
.FOOTER img{pointer-events: none; height: 120px;margin-top: -42px;background-color:#3388FF00}

.FOOTER_OR img{z-index: 2; height: 120px;margin-top: -20px;pointer-events: none;}
.FOOTER_OR H2{height: 24px;margin-top: 20px; background-color: #FFF; padding: 0px 0px 7px 0px;}


.FOOTER_GR {width: 100vw; height: 44px;background-color:#33CC33;
    text-align:center;color:black;font-size: 8px;
    position: absolute; top: calc(100% - 20px - 24px - env(safe-area-inset-bottom));
    z-index: -1; margin: auto auto 0px auto; width: 98%;
    pointer-events: fill;  
}
.FOOTER_GR img{z-index: 2; height: 120px;margin-top: -20px; pointer-events: none;}
.FOOTER_GR H2{height: 24px;margin-top: 20px; background-color: #FFF; padding: 0px 0px 7px 0px;}

.FOOTER_AQ {width: 100vw; height: 44px;background-color:#00B0F0;
    margin-top: 0px;text-align:center;color:black;font-size: 8px;
    position: absolute; top: calc(100% - 20px - 24px - env(safe-area-inset-bottom));
    z-index: -1; margin: auto auto 0px auto; width: 98%;
    pointer-events: fill;  
}
.FOOTER_AQ img{z-index: 2; height: 120px;margin-top: -20px;pointer-events: none;}
.FOOTER_AQ H2{height: 24px;margin-top: 20px; background-color: #FFF; padding: 0px 0px 7px 0px;}

@media screen and (max-width: 767px) {
    .FOOTER_OR img{margin: -48px auto auto auto; height: 70px;}
    .FOOTER_GR img{margin: -48px auto auto auto; height: 70px;}
    .FOOTER_AQ img{margin: -48px auto auto auto; height: 70px;}
}


button.opening {width: 200px;font-size: 16px;color: #FFF;text-align:center;border: 1px solid #ed7d35;margin: 0 auto 10px auto;min-width: 200px;background: linear-gradient(#F2A881 , #E97131);min-height: 48px;border-radius: 10px;}
button.opening:hover {border: 1px solid #68422b;}
button.opening:active {border: 1px solid #882c31; background: radial-gradient(circle farthest-side, #cd3301, #ad2a00);}
button.opening:disabled {border: 1px solid #dcdcdc; background: radial-gradient(circle farthest-side, #dcdcdc, #dcdcdc);}

button.openingGR {width: 200px;font-size: 16px;color: #FFF;text-align:center;border: 1px solid #33CC33;margin: 0 auto 10px auto;min-width: 200px;background: linear-gradient(#6fe36f, #33CC33);min-height: 48px;border-radius: 10px;}
button.openingGR:hover {border: 1px solid #155a15;}
button.openingGR:active {border: 1px solid #3c753c; background: radial-gradient(circle farthest-side, #258525, #104610);}
button.openingGR:disabled {border: 1px solid #dcdcdc; background: radial-gradient(circle farthest-side, #dcdcdc, #dcdcdc);}

button.openingAQ { width: 200px; font-size: 16px; color: #FFF; text-align:center;  border: 1px solid #0074f0; margin: 0 auto 10px auto; min-width: 200px; background: linear-gradient(#82E4F7 , #00B0F0); min-height: 48px; border-radius: 10px;}
button.openingAQ:hover {border: 1px solid #234451;}
button.openingAQ:active {border: 1px solid #21647e; background: radial-gradient(circle farthest-side, #004cf0, #10285c);}
button.openingAQ:disabled {border: 1px solid #dcdcdc; background: radial-gradient(circle farthest-side, #dcdcdc, #dcdcdc);}
/*
button.abort {width: 110px;font-size: 16px;text-align:unset;margin: unset;min-width: 110px; min-height: 48px;border-radius: 10px;}


 
button.opening {font-size: 16px; padding: 10px; width: 200px; border-radius: 10px; text-align:center; background: linear-gradient(0deg, #F2A881 , #E97131 , #F2A881);color:white;border-radius: 10px;}
button.opening:hover {background-color: orange;color:black}
button.opening:disabled {font-size: 16px; padding: 10px; width: 200px; border-radius: 10px; text-align:center; background:unset; background-color: gray;color:black;border-radius: 10px;}

button.openingGR {font-size: 16px; padding: 10px; width: 200px; border-radius: 10px; text-align:center; background: linear-gradient(0deg, #BEEEBE , #33CC33 , #BEEEBE);color:white;border-radius: 10px;}
button.openingGR:hover {background-color: orange;color:black}
button.openingGR:disabled {font-size: 16px; padding: 10px; width: 200px; border-radius: 10px; text-align:center; background:unset; background-color: gray;color:black;border-radius: 10px;}

button.openingAQ {font-size: 16px; padding: 10px; width: 200px; border-radius: 10px; text-align:center; background: linear-gradient(0deg, #82E4F7 , #00B0F0 , #82E4F7);color:white;border-radius: 10px;}
button.openingAQ:hover {background-color: orange;color:black}
button.openingAQ:disabled {font-size: 16px; padding: 10px; width: 200px; border-radius: 10px; text-align:center; background:unset; background-color: gray;color:black;border-radius: 10px;}

*/


.baloon {
    border: 3px solid #e7f0F9;
    /*display: flex;*/
    padding: 4px 12px 4px 12px;
    position: relative;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    min-height: 48px;
    border-radius: 15px;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #e7f0F9;
}

.baloon_L {
    border: 3px solid #e7f0F9;
    /*display: flex;*/
    padding: 4px 12px 4px 12px;
    position: relative;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    min-height: 48px;
    border-radius: 15px;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #e7f0F9;
}
.baloon_L::before  {
    top: 50%;
    left: -16px;
    width: 0;
    height: 0;
    content: "";
    display: block;
    position: absolute;
    border-top: 0px solid transparent;
    border-right: 14px solid #f0f0f0;
    border-bottom: 28px solid transparent;
}
.baloon_L::after  {
    top: 50%;
    left: -16px;
    width: 0;
    height: 0;
    content: "";
    display: block;
    position: absolute;
    border-top: 0px solid transparent;
    border-right: 15px solid #e7f0F9;
    border-bottom: 28px solid transparent;
}
.baloon_B {
    border: 3px solid #e7f0F9;
    /*display: flex;*/
    padding: 4px 12px 4px 12px;
    position: relative;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    min-height: 48px;
    border-radius: 15px;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #e7f0F9;
}
.baloon_B::before  {
    top:  calc(100% + 4px);
    left: calc( 50% - 15px);     
    right: calc( 50% - 20px);
    width: 0;
    height: 0;
    content: "";
    display: block;
    position: absolute;
    border-top: 15px solid #0000004a;     
    border-left: 15px solid transparent;    
    border-right: 15px solid transparent; 

}
.baloon_B::after  {
    top: calc(100% - 0px);
    left: calc( 50% - 15px);
    right: calc( 50% - 20px);
    width: 0;
    height: 0;
    content: "";
    display: block;
    position: absolute;
    border-top: 15px solid #e7f0F9;     
    border-left: 15px solid transparent;    
    border-right: 15px solid transparent; 
}
.baloon_BR {
    border: 3px solid #e7f0F9;
    /*display: flex;*/
    padding: 4px 12px 4px 12px;
    position: relative;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    min-height: 48px;
    border-radius: 15px;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #e7f0F9;
}
.baloon_BR::before  {
    top:  calc(100% + 4px);
    left: calc( 80% - 15px);     
    right: calc( 80% - 20px);
    width: 0;
    height: 0;
    content: "";
    display: block;
    position: absolute;
    border-top: 15px solid #0000004a;     
    border-left: 15px solid transparent;    
    border-right: 15px solid transparent; 

}
.baloon_BR::after  {
    top: calc(100% - 0px);
    left: calc( 80% - 15px);
    right: calc( 80% - 20px);
    width: 0;
    height: 0;
    content: "";
    display: block;
    position: absolute;
    border-top: 15px solid #e7f0F9;     
    border-left: 15px solid transparent;    
    border-right: 15px solid transparent; 
}
.baloon_TR {
    border: 3px solid #e7f0F9;
    /*display: flex;*/
    padding: 4px 12px 4px 12px;
    position: relative;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    min-height: 48px;
    border-radius: 15px;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #e7f0F9;
}
.baloon_TR::before  {
    bottom:  calc(100% + 0px);
    left: calc( 90% - 7px);     
    right: calc( 90% - 20px);
    width: 0;
    height: 0;
    content: "";
    display: block;
    position: absolute;
    border-bottom: 11px solid #0000004a;
    border-left: 15px solid transparent;    
    border-right: 15px solid transparent; 
}

.baloon_TR::after  {
    bottom: calc(100% - 0px);
    left: calc( 90% - 15px);
    right: calc( 90% - 20px);
    width: 0;
    height: 0;
    content: "";
    display: block;
    position: absolute;
    border-bottom: 15px solid #e7f0F9;     
    border-left: 15px solid transparent;    
    border-right: 15px solid transparent; 
}
.test_play_div {
    display: block;
}
/*
.speechGrid_baloon_L  { min-height: '48px'; display: 'flex'; justify-content: 'flex-start';flex-direction: 'column'; padding: '4px 12px 4px 12px'; position: 'relative';background-color: '#e7f0F9';
    border: '3px solid #e7f0F9'; border-radius: '15px'; box-shadow: '3px 3px 3px rgba(0,0,0,0.4)'};

.speechGrid_baloon_L:before {
content: '""';
position: 'absolute';
display: 'block';
width: '0';
height: '0';
left: '-16px';
top: '6px';        
border-right: '14px solid #f0f0f0';
border-top: '0px solid transparent';
border-bottom: '28px solid transparent';
};
.speechGrid_baloon_L:after {
content: '""';
position: 'absolute';
display: 'block';
width: '0';
height: '0';
left: '-16px';                   
top: '4px';        
border-right: '15px solid #e7f0F9';  
border-top: '0px solid transparent';
border-bottom: '28px solid transparent';
}; 
*/


.c-arrow-label {
    width: 100%;
    max-width: 960px;
    display: flex;
    align-items: center;
}
.c-arrow-label__item {
    width: calc( 100% / 5 );
    position: relative;
    background-color: rgb(103, 201, 77);
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 50px;
    width: 100%;
    &:not(:first-child) {
        &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -5px;
        border-top: solid 25px rgb(103, 201, 77);
        border-bottom: solid 25px rgb(103, 201, 77);
        border-left: solid 20px  transparent;
        }
        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        border-top: solid 25px #fff;
        border-bottom: solid 25px #fff;
        border-left: solid 20px  transparent;
        border-right: solid 5px #fff;
        }
    }
}
.LG-arrow-label__item {
    width: calc( 100% / 5 );
    position: relative;
    background-color: lightgrey;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 50px;
    width: 100%;
    &:not(:first-child) {
        &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -5px;
        border-top: solid 25px lightgrey;
        border-bottom: solid 25px lightgrey;
        border-left: solid 20px  transparent;
        }
        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        border-top: solid 25px #fff;
        border-bottom: solid 25px #fff;
        border-left: solid 20px  transparent;
        border-right: solid 5px #fff;
        }
    }
}
.OR-arrow-label__item {
    width: calc( 100% / 5 );
    position: relative;
    background-color: #E97131;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 50px;
    width: 100%;
    &:not(:first-child) {
        &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -5px;
        border-top: solid 25px #E97131;
        border-bottom: solid 25px #E97131;
        border-left: solid 20px  transparent;
        }
        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        border-top: solid 25px #fff;
        border-bottom: solid 25px #fff;
        border-left: solid 20px  transparent;
        border-right: solid 5px #fff;
        background-color: lightgrey;
        }
    }
}
.ORLG-arrow-label__item {
    width: calc( 100% / 5 );
    position: relative;
    background-color: lightgrey;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 50px;
    width: 100%;
    &:not(:first-child) {
        &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -5px;
        border-top: solid 25px lightgrey;
        border-bottom: solid 25px lightgrey;
        border-left: solid 20px  transparent;
        }
        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        border-top: solid 25px #fff;
        border-bottom: solid 25px #fff;
        border-left: solid 20px  transparent;
        border-right: solid 5px #fff;
        background-color: #E97131;
        }
    }
}
.GR-arrow-label__item {
    width: calc( 100% / 5 );
    position: relative;
    background-color: #33CC33;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 50px;
    width: 100%;
    &:not(:first-child) {
        &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -5px;
        border-top: solid 25px #33CC33;
        border-bottom: solid 25px #33CC33;
        border-left: solid 20px  transparent;
        }
        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        border-top: solid 25px #fff;
        border-bottom: solid 25px #fff;
        border-left: solid 20px  transparent;
        border-right: solid 5px #fff;
        background-color: lightgrey;
        }
    }
}
.GRLG-arrow-label__item {
    width: calc( 100% / 5 );
    position: relative;
    background-color: lightgrey;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 50px;
    width: 100%;
    &:not(:first-child) {
        &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -5px;
        border-top: solid 25px lightgrey;
        border-bottom: solid 25px lightgrey;
        border-left: solid 20px  transparent;
        }
        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        border-top: solid 25px #fff;
        border-bottom: solid 25px #fff;
        border-left: solid 20px  transparent;
        border-right: solid 5px #fff;
        background-color: #33CC33;
        }
    }
}
.AQ-arrow-label__item {
    width: calc( 100% / 5 );
    position: relative;
    background-color: #00B0F0;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 50px;
    width: 100%;
    &:not(:first-child) {
        &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -5px;
        border-top: solid 25px #00B0F0;
        border-bottom: solid 25px #00B0F0;
        border-left: solid 20px  transparent;
        }
        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        border-top: solid 25px #fff;
        border-bottom: solid 25px #fff;
        border-left: solid 20px  transparent;
        border-right: solid 5px #fff;
        background-color: lightgrey;
        }
    }
}
.AQLG-arrow-label__item {
    width: calc( 100% / 5 );
    position: relative;
    background-color: lightgrey;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    height: 50px;
    width: 100%;
    &:not(:first-child) {
        &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -5px;
        border-top: solid 25px lightgrey;
        border-bottom: solid 25px lightgrey;
        border-left: solid 20px  transparent;
        }
        &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        border-top: solid 25px #fff;
        border-bottom: solid 25px #fff;
        border-left: solid 20px  transparent;
        border-right: solid 5px #fff;
        background-color: #00B0F0;
        }
    }
}

@media print, screen and (min-width: 768px) {
    div.sp { display: none; width: calc(100% - 16px); margin: 0 8px 0 8px;}
    div.pc { display: block; width: calc(100% - 16px); margin: 0 8px 0 8px; } 
    img.sp,
    span.sp { display: none; }
    img.pc,
    span.pc { display: inline; }
    
    .centering{margin-right:auto;margin-left:auto;width: 760px;text-align: center;}
}
@media screen and (max-width: 767px) {
    div.sp { display: block; width: calc(100% - 16px); margin: 0 8px 0 8px; } 
    div.pc { display: none; }
    img.sp,
    span.sp { display: inline; }
    img.pc,
    span.pc { display: none; }
    p {font-size: 12px;}
    .centering{margin-right:auto; margin-left:auto;width:100%;min-width: 350px;}
    
}
.playBTN {
    width:64px;
    height:64px;
    padding:unset;
    margin:0 auto 20px auto;
    background-color:cornflowerblue;
    border-width: 0;
}
.playBTN:disabled {
    background-color:gray;
}

.dialog_button {
    font-size: 13px;
    width: 100px;
    margin: 20px 20px 0 20px;
}