@charset "UTF-8";

/* -----------------------------------------------------------
all star
------------------------------------------------------------*/
#allstarArea div.box{
margin:0 auto;
padding:2em 0;
}

#allstarArea h2{
font-size: 0;
background: url(img/title.png);
background-size: contain;
aspect-ratio:890/472 ;
}

#allstarArea h3{
font-weight: 700;
text-align: left !important;
}

#allstarArea .point{
font-weight: 700;
}

#allstarArea ul{
border: solid 1px #000;
background: #fff;
border-radius: 10px;
}


#allstarArea ul .item1{
background: url(img/img01.png) center center no-repeat;
}
#allstarArea ul .item2{
background: url(img/img02.png) center no-repeat;
}
#allstarArea ul .item3{
background: url(img/img03.png) center no-repeat;
}

#allstarArea ul .item1,
#allstarArea ul .item2,
#allstarArea ul .item3{
aspect-ratio:933/378 ;
background-size: contain;
width:100%;
}

#allstarArea ul p{
width:100%;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;

}

#allstarArea ul .p1 p,
#allstarArea ul .p2 p{
justify-content: space-between;
}


#allstarArea p span.icon{
border: solid 1px #000;
border-radius: 10px;
display: inline-block;
padding: 0 .5em;
text-align: center;
white-space: nowrap;
}



@media all and (min-width: 768px) {
#allstarArea{
background-image: url(img/bg.png);
background-position: center top;
background-size: 100vw;
background-repeat: no-repeat;
}

#allstarArea div.box{
width: 90vw;
max-width: 1080px;
padding:3em 0;
}

#allstarArea .title{
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: center;
}

#allstarArea h2{
width: 40%;
}

#allstarArea .c-txt{
width: 50%;
font-size:min(3vw,200%);
font-weight: 700;
text-align: left !important;
}

#allstarArea h3{
font-size:min(2.5vw,180%);
margin-bottom:.5em;
}

#allstarArea .point{
font-size:min(2.5vw,180%);
margin:3em 0 1em;
}

#allstarArea ul{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2em;
padding: 1em 2em;
}


#allstarArea ul li:first-child{
width: 40%;
}
#allstarArea ul li:nth-child(2){
width: 55%;
}
#allstarArea ul li:nth-child(2) div{
display: flex;
flex-wrap: wrap;
align-content: center;
}

#allstarArea p{
padding: 0;
margin-top: .5em;
font-size:min(1.4vw,100%);
}

#allstarArea ul .p1 .icon{
width:30%;
}
#allstarArea ul .p1 .txt{
width:62%;
}

#allstarArea ul .p2 .icon{
width:15%;
}

#allstarArea ul .p2 .txt{
width:77%;
}


}

@media all and (max-width: 767px) {
#allstarArea div.box{
width: 90%;
}

#allstarArea h2{
width: 80%;
margin:0 auto;
}

#allstarArea .c-txt{
width: 100%;
font-size:5vw;
font-weight: 700;
text-align: center !important;
margin-bottom: 1em;
}

#allstarArea ul{
margin-top: 1em;
padding: 1em;
}

#allstarArea ul li:first-child,
#allstarArea ul li:nth-child(2){
width: 100%;
}
#allstarArea h3{
font-size:3.5vw !important;
margin: 1em 0;
}

#allstarArea .point{
font-size:4vw !important;
margin:2em 0 1em;
}


#allstarArea ul p{
font-size:3vw !important;
margin-top: .5em;
}

#allstarArea ul .p1 .icon{
width:28%;
}
#allstarArea ul .p1 .txt{
width:64%;
}

#allstarArea ul .p2 .icon{
width:12%;
}

#allstarArea ul .p2 .txt{
width:80%;
}

}
/*/ btn back /*/
.btn_back{
display: block;
border:solid 1px  #000;
background:#fff ;
border-radius: 50px;
text-decoration: none;
padding: 1em;
width: 60%;
max-width:200px ;
margin:2em auto;
text-align: center;
}

.btn_back span{
display: block;
font-weight: 700;
font-size: 80%;
}

.btn_back span::after{
content: '▶︎';
margin-left: 1em;
}

.btn_back:hover{
border:solid 1px  #fff;
background:#000 ;
color: #fff;
}


/*/ mov /*/
#allstarArea .mov_box{
margin:.2em auto 0;  
}
#allstarArea .mov_box a{
display: block;
position: relative;
}

#allstarArea .mov_box a:hover{
opacity: .8;
}
#allstarArea .mov_box a .play{
position: absolute;top:0;
background: url(../img/btn_play.svg) center  no-repeat;
width: 100%;
height: 100%;
text-indent: -9999px;
display: block;
}

#allstarArea .mov_box img
{
width: 100%;
aspect-ratio: 16/9;
}


#allstarArea li .mov_box a{
    position:relative;
    line-height:0;
    overflow:hidden;
}

#allstarArea li .mov_box a::after {
    content:"";
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    box-shadow: inset 0px 20px 10px 0px rgba(0, 0, 0, 0.2);
}

@media all and (min-width: 768px) {
#allstarArea .mov_box{
width: 40%;
}
}

@media all and (max-width: 767px) {
#allstarArea .mov_box{
width: 100%;
}
}