@charset "UTF-8";

/* cooperation ページ (/cooperation) 専用スタイル */

[data-pagename="cooperation"] #gradient-bg-img {
    background-image: none;
    background-color: #fff;
}


.mb0{ margin-bottom:0 !important; }
.mb8{ margin-bottom:2.13vw !important; }
.mb16{ margin-bottom:4.27vw !important; }
.mb24{ margin-bottom:6.40vw !important; }
.mb32{ margin-bottom:8.53vw !important; }
.mb40{ margin-bottom:10.67vw !important; }

.fc-b{ color:#057BA2; }
.fc-m{ color:#F00072; }
.fwm{ font-weight:500; }
.fwb{ font-weight:bold; }




.mv-coop{
width:100%;
height:83.20vw;
background:url(../../img/mv-live-sp.jpg) no-repeat center center;
background-size:cover;
margin:0;
position:relative;
}



.coop-header{
background:#14B4FF;
padding:6.40vw 0 10.67vw;
}


.page-anc{
width:87.20vw;
margin:0 auto;
display:flex;
flex-wrap:wrap;
gap:2.13vw;
}
.page-anc li{
width:87.20vw;
border-bottom:0.27vw solid #fff;
position:relative;
}

.page-anc li::after{
content:'';
width:1.87vw;
height:1.87vw;
border-right:0.53vw solid #fff;
border-bottom:0.53vw solid #fff;
transform:rotate(45deg);
position:absolute;
top:calc(50% - 1.87vw);
right:1.87vw;
}

.page-anc li a{
width:87.20vw;
display:block;
padding:2.40vw 2.13vw;
font-size:3.73vw;
line-height:1.2;
color:#fff;
font-weight:normal;
text-decoration:none;
}


.c-container{
width:100%;
margin:0 auto;
padding:10.67vw 0 14.93vw;
font-size:3.20vw;
line-height:1.75;
font-weight:normal;
}

.content-wrap{
width:87.20vw;
margin:0 auto;
}


h2.md01{
font-size:8.00vw;
line-height:1;
margin:0 0 6.40vw;
}


h3.md01{
font-size:4.80vw;
line-height:1;
padding-left:1.87vw;
border-left:0.80vw solid #14B4FF;
margin:0 0 4.27vw;
}

.coop-lead{
font-size:4.8vw;
line-height:1.5;
font-weight:bold;
margin:0 0 6.40vw;
}



.live-info{
display:grid;
grid-template-columns:1fr;
gap:4vw;
margin:0 0 10.67vw;
}

.andmore{
text-align:center;
font-size:4.27vw;
font-weight:900;
}

.live-logos{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:3.20vw;
align-items:center;
margin:0 0 6.4vw;
}

.live-logos li:nth-child(1){ width:68.00vw; }
.live-logos li:nth-child(2){ width:84.53vw; }
.live-logos li:nth-child(3){ width:33.60vw; }
.live-logos li:nth-child(4){ width:46.13vw; }



@media (max-width: 767px) {
.live-image{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
margin-bottom:6.40vw;
overflow:hidden;
}
.live-image picture,
.live-image img{
display:block;
width:100%;
}
}

.live-point li{
display:grid;
grid-template-columns:15.47vw 1fr;
gap:2.40vw;
align-items:center;
margin:0 0 5.33vw;
font-size:4.80vw;
line-height:1.2;
font-weight:bold;
color:#0099DA;
}
.point-num{
width:15.47vw;
}

.live-mov{
width:100%;
margin:0 auto 6.40vw;
aspect-ratio:16/9;
overflow:hidden;
}
.live-mov iframe{
width:100%;
height:100%;
aspect-ratio:16/9;
}


.live-info figure{
position:relative;
}
.live-name{
width:100%;
height:8.53vw;
background:rgba(0,0,0,.6);
position:absolute;
bottom:0;
left:0;
text-align:center;
font-size:3.73vw;
line-height:8.53vw;
color:#fff;
}
.live-name::after{
content:'';
width:4.27vw;
height:4.27vw;
background:url(../../img/icon-external.svg) no-repeat;
background-size:4.27vw;
position:absolute;
top:2.13vw;
right:4.27vw;
}
.live-caption{
font-size:2.67vw;
line-height:1.2;
margin:1.33vw 0;
}

[data-pagename="cooperation"] .l-modal .modal-content{
background-color:#000;
color:#fff;
}
[data-pagename="cooperation"] .l-modal .modal-content a{
color:#fff;
}


.ind{
display:flex;
flex-wrap:wrap;
gap:2vw;
}
.ind li{
width:calc((100% - 2.00vw) / 2);
}
.ind-thumb{
width:100%;
height:32.00vw;
margin:0 0 2.13vw;
}
.ind-attrib{
border:0.27vw solid #057BA2;
width:100%;
height:4.27vw;
font-size:2.67vw;
line-height:1.6;
text-align:center;
margin:0 0 2.13vw;
color:#057BA2;
}
.ind-name{
font-size:3.20vw;
line-height:1.25;
font-weight:bold;
}





@media (min-width: 768px) {

.mb0{ margin-bottom:0 !important; }
.mb8{ margin-bottom:8px !important; }
.mb16{ margin-bottom:16px !important; }
.mb24{ margin-bottom:24px !important; }
.mb32{ margin-bottom:32px !important; }
.mb40{ margin-bottom:40px !important; }


.mv-coop{
width:100%;
height:372px;
background:url(../../img/mv-live-pc.jpg) no-repeat center center;
background-size:cover;
margin:0;
}


.c-container{
width:100%;
margin:0 auto;
padding:40px 0 56px;
font-size:16px;
line-height:1.75;
}

.content-wrap{
width:1260px;
margin:0 auto;
}
.coop-lead{
font-size:24px;
line-height:1.6;
margin:0 0 32px;
}

.coop-header{
background:#14B4FF;
padding:32px 0;
}

.page-anc{
width:1260px;
margin:0 auto;
display:flex;
gap:40px;
}
.page-anc li{
width:283px;
border-bottom:1px solid #fff;
position:relative;
}

.page-anc li::after{
content:'';
width:10px;
height:10px;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
transform:rotate(45deg);
position:absolute;
top:calc(50% - 10px);
right:14px;
}

.page-anc li a{
width:283px;
display:block;
padding:0 8px 12px;
font-size:16px;
line-height:1.5;
color:#fff;
font-weight:normal;
text-decoration:none;
}



h2.md01{
font-size:42px;
line-height:1;
margin:0 0 24px;
}


h3.md01{
font-size:24px;
line-height:1.375;
padding-left:11px;
border-left:5px solid #14B4FF;
margin:0 0 24px;
}


.live-logos{
display:flex;
gap:24px;
align-items:center;
}

.live-logos li:nth-child(1){ width:340px; }
.live-logos li:nth-child(2){ width:423px; }
.live-logos li:nth-child(3){ width:168px; }
.live-logos li:nth-child(4){ width:231px; }

.live-image{
margin:0 0 24px;
}

.live-point li{
display:flex;
gap:16px;
align-items:center;
margin:0 0 32px;
font-size:32px;
line-height:1.5;
font-weight:bold;
color:#0099DA;
}
.point-num{
width:103px;
}

.live-mov{
width:520px;
margin:0 auto 40px;
aspect-ratio:16/9;
overflow:hidden;
}
.live-mov iframe{
width:100%;
height:100%;
aspect-ratio:16/9;
}


.live-info{
grid-template-columns:repeat(3, 1fr);
gap:24px 40px;
margin:0 0 40px;
}

.live-info figure{
position:relative;
}
.live-name{
width:100%;
height:36px;
background:rgba(0,0,0,.6);
position:absolute;
bottom:0;
left:0;
text-align:center;
font-size:16px;
line-height:36px;
color:#fff;
}
.live-name::after{
content:'';
width:20px;
height:20px;
background:url(../../img/icon-external.svg) no-repeat;
background-size:20px;
position:absolute;
top:8px;
right:16px;
}
.live-caption{
font-size:14px;
line-height:1.2;
margin:5px 0;
}


.andmore{
text-align:center;
font-size:24px;
font-weight:900;
}

.ind{
display:flex;
flex-wrap:wrap;
gap:40px;
}
.ind li{
width:calc((100% - 80px) / 3);
}
.ind-thumb{
width:100%;
height:296px;
margin:0 0 16px;
}
.ind-attrib{
border:1px solid #057BA2;
width:100%;
height:27px;
font-size:16px;
line-height:1.6875;
text-align:center;
margin:0 0 16px;
color:#057BA2;
}
.ind-name{
font-size:18px;
line-height:1.33;
font-weight:bold;
}




/* END PC CSS */
}