@charset "UTF-8";

/* campuslife/voice（スチューデントボイス）専用スタイル */
/* campuslife.css から分離。共通のMV・page-content等のベーススタイルはcampuslife.cssを参照 */


[data-pagename="campuslife/voice"] #gradient-bg-img {
    background: url(../../img/bg-grid.jpg) repeat center;
background-size:19px;
}


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


.voice{
padding:6.4vw 0 10.67vw;
width:87.20vw;
margin:0 auto;
}

h2.voice-ttl{
text-align:center;
margin:0 0 6.4vw;
font-size:4.53vw;
line-height:2.35;
}
h2.voice-ttl span{
display:inline-block;
padding:0 4.27vw;
position:relative;
}
h2.voice-ttl span::before{
content:'';
width:0.27vw;
height:10.67vw;
background:#000;
position:absolute;
top:0;
left:0;
transform:rotate(-10deg);
}
h2.voice-ttl span::after{
content:'';
width:0.27vw;
height:10.67vw;
background:#000;
position:absolute;
top:0;
right:0;
transform:rotate(10deg);
}




.voice-cat{
width:100%;
display:flex;
flex-wrap:wrap;
gap:1.07vw 1.87vw;
list-style:none;
margin:0 0 6.40vw;
padding:0;
}

.voice-cat li{
width:calc((100% - 1.87vw) / 2 );
text-align:center;
--dept-color:#000;
}
.voice-cat li:last-child{
width:100%;
}

.voice-cat li[data-department="artist"]       { --dept-color:#005CD4; }
.voice-cat li[data-department="soundcreator"] { --dept-color:#00B6AB; }
.voice-cat li[data-department="staff"]        { --dept-color:#FF5A00; }
.voice-cat li[data-department="tuning"]       { --dept-color:#FF9100; }
.voice-cat li[data-department="repair"]       { --dept-color:#8D67CF; }
.voice-cat li[data-department="craft"]        { --dept-color:#00B700; }

.voice-cat li a{
width:100%;
height:7.47vw;
display:flex;
align-items:center;
justify-content:center;
padding:0 2.13vw;
border:1px solid var(--dept-color);
border-radius:999px;
color:var(--dept-color);
background:#fff;
font-size:3.2vw;
font-weight:500;
text-decoration:none;
text-align:center;
}


.sv-list{
display:flex;
flex-wrap:wrap;
gap:6.40vw 2.13vw;
margin:0 0 6.40vw;
}
.sv-list li{
width:calc((100% - 2.13vw) / 2);
}

.sv-thumb{
border-radius:4.27vw;
aspect-ratio: 159 / 169;
overflow:hidden;
margin:0 0 2.13vw;
}
.sv-thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.sv-date{
text-align:center;
font-size:2.67vw;
line-height:1;
margin:0 0 2.13vw;
font-weight:bold;
color:#adadad;
}
.sv-txt p{
font-weight:normal;
font-size:3.20vw;
line-height:1.75;
}
.sv-txt p a{
color:#000;
font-weight:normal;
text-decoration:none;
}

.vc-label{
text-decoration:none;
font-size:2.67vw;
line-height:1;
font-weight:normal;
text-align:center;
margin:0 0 2.13vw
}
.vc-label a{
text-decoration:none;
font-weight:normal;
}

.vc-craft{ color:#00B700; }
.vc-artist{ color:#005CD4; }
.vc-soundcreator{ color:#00B6AB; }
.vc-staff{ color:#FF5A00; }
.vc-tuning{ color:#FF9100; }
.vc-repair{ color:#8D67CF; }


[data-pagename="campuslife/voice"] .l-pagination .pagination-list{
display:flex;
align-items:center;
justify-content:center;
gap:4.27vw;
margin:6.40vw 0 0;
}

[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers{
display:flex;
align-items:center;
justify-content:center;
font-size:6.93vw;
line-height:1;
padding:5.60vw 0.53vw 1.33vw;
color:#000;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers:not(.prev):not(.next){
width:auto;
height:auto;
margin:0;
border-radius:0;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.is-current{
background-color:#14B4FF;
color:#fff;
}

[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.prev,
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.next{
position:relative;
top:2.2vw;
width:6.40vw;
height:6.40vw;
padding:0;
margin:0;
background:#000;
border-radius:1.33vw;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.prev .icon,
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.next .icon{
display:none;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.prev::before,
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.next::before{
content:"";
width:2.13vw;
height:2.13vw;
border-style:solid;
border-color:#fff;
border-width:0.53vw 0.53vw 0 0;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.prev::before{
transform:rotate(-135deg);
margin-left:1.07vw;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.next::before{
transform:rotate(45deg);
margin-right:1.07vw;
}


@media (min-width: 768px) {

.mv-stu-voice{
background:url(../../img/mv-voice.jpg) no-repeat center;
background-size:cover;
width:100%;
height:372px;
}

.voice{
padding:40px 0 56px;
width:1260px;
margin:0 auto;
}

h2.voice-ttl{
text-align:center;
margin:0 0 40px;
font-size:28px;
line-height:1.43;
}
h2.voice-ttl span{
padding:0 26px;
position:relative;
}
h2.voice-ttl span::before{
content:'';
width:1px;
height:40px;
background:#000;
position:absolute;
top:0;
left:0;
transform:rotate(-10deg);
}
h2.voice-ttl span::after{
content:'';
width:1px;
height:40px;
background:#000;
position:absolute;
top:0;
right:0;
transform:rotate(10deg);
}



.voice-cat{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px 16px;
margin:0 0 40px;
}

.voice-cat li{
width:calc((100% - 32px) / 3);
}
.voice-cat li:last-child{
width:calc((100% - 32px) / 3);
}
.voice-cat li a{
width:100%;
height:45px;
display:flex;
padding:0;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:500;
}


.sv-list{
display:flex;
flex-wrap:wrap;
gap:40px;
margin:0 0 40px;
}
.sv-list li{
width:calc((100% - 120px) / 4);
}

.sv-thumb{
border-radius:16px;
aspect-ratio: 285 / 303;
overflow:hidden;
margin:0 0 16px;
}
.sv-thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.sv-date{
text-align:center;
font-size:16px;
line-height:1;
margin:0 0 8px;
font-weight:bold;
color:#adadad;
}
.sv-txt p{
font-weight:normal;
font-size:16px;
line-height:1.75;
}
.sv-txt p a{
color:#000;
font-weight:normal;
text-decoration:none;
}





.vc-label{
text-decoration:none;
font-size:16px;
line-height:1;
font-weight:normal;
text-align:center;
margin:0 0 12px
}
.vc-label a{
text-decoration:none;
font-weight:normal;
}

.vc-craft{ color:#00B700; }
.vc-artist{ color:#005CD4; }
.vc-soundcreator{ color:#00B6AB; }
.vc-staff{ color:#FF5A00; }
.vc-tuning{ color:#FF9100; }
.vc-repair{ color:#8D67CF; }


[data-pagename="campuslife/voice"] .l-pagination{
margin:0;
}

[data-pagename="campuslife/voice"] .l-pagination .pagination-list{
margin:24px 0 55px;
gap:24px;
}

[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers{
font-size:40px;
padding:31px 3px 7px;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.is-current{
background-color:#14B4FF;
color:#fff;
}

[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.prev,
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.next{
top:12px;
width:36px;
height:36px;
border-radius:8px;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.prev::before,
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.next::before{
width:8px;
height:8px;
border-width:2px 2px 0 0;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.prev::before{
margin-left:4px;
}
[data-pagename="campuslife/voice"] .l-pagination .pagination-list .page-numbers.next::before{
margin-right:4px;
}



/* END PC CSS */
}