@charset "UTF-8";

/* campuslife/club/bas（オリジナルバンド活動）専用スタイル */
/* 共通のl-mv・page-content（accent-mosaic）等のベーススタイルはcampuslife.css、部活動全体の共通スタイルはclub.cssを参照 */

[data-pagename="campuslife/club/bas"] #gradient-bg-img {
    background: #fff;
}


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


.bas01{
padding:6.40vw 0;
width:87.20vw;
margin:0 auto;
}

h2.bas-ttl{
font-size:4.53vw;
line-height:1.5;
text-align:center;
}
h2.bas-ttl span{
padding:0 3.73vw;
position:relative;
display:inline-block;
margin:0 0;
}
h2.bas-ttl span::before{
content:'';
width:0.27vw;
height:10.67vw;
background:#000;
position:absolute;
top:calc(50% - 5.33vw);
transform:rotate(-15deg);
left:0;
}
h2.bas-ttl span::after{
content:'';
width:0.27vw;
height:10.67vw;
background:#000;
position:absolute;
top:calc(50% - 5.33vw);
transform:rotate(15deg);
right:0;
}
h3.md-bas01{
width:100%;
margin:0 auto;
position:relative;
bottom:-2.67vw;
z-index:100;
}


.bas-point{
width:87.20vw;
margin:0 auto;
background:url(../../img/bg-grid.jpg) repeat;
background-size:5.07vw;
padding:6.40vw 4.27vw;
display:flex;
flex-direction:column;
gap:6.40vw;
}
.bas-point li{
width:100%;
}




.bas02{
padding:10.67vw 0;
width:100%;
background:url(../../img/bg-dots.jpg) repeat;
background-size:32.00vw;
margin:0 auto;
}

.md-bas02{
width:87.20vw;
margin:0 auto;
position:relative;
bottom:-4.27vw;
z-index:10;
}
.bas{
width:87.20vw;
margin:0 auto;
background:url(../../img/bg-grid.jpg) repeat;
background-size:5.07vw;
padding:6.40vw;
}
.bas-band{
display:flex;
flex-wrap:wrap;
gap:8.53vw;
}
.bas-band li{
width:100%;
font-size:3.20vw;
line-height:1.75;
}
.bas-band-ttl{
text-align:center;
font-size:4.80vw;
line-height:1.5;
display:block;
}
.bas-band-ttl span{
display:block;
position:relative;
}
.bas-band-ttl span::before{
content:'';
width:0.27vw;
height:10.67vw;
background:#000;
position:absolute;
top:calc(50% - 5.33vw);
transform:rotate(-15deg);
left:3.20vw;
}
.bas-band-ttl span::after{
content:'';
width:0.27vw;
height:10.67vw;
background:#000;
position:absolute;
top:calc(50% - 5.33vw);
transform:rotate(15deg);
right:3.20vw;
}

.bas-band-thumb{
width:100%;
margin:0 0 4.27vw;
}
.bas-band-name{
font-size:7.47vw;
line-height:1;
font-weight:normal;
color:#14B4FF;
margin:0 0 4.27vw;
display:block;
position:relative;
letter-spacing:-.05em;
}
.bas-band-name::after{
content:'';
width:100%;
height:0.27vw;
background:#14B4FF;
position:absolute;
bottom:1.33vw;
left:0;
}




.bas03{
background:#F0FF82;
padding:6.40vw 0 14.40vw;
width:100%;
}

.md-bas03{
width:87.20vw;
margin:0 auto 7.20vw;
}

.bas-flow{
width:87.20vw;
margin:0 auto;
display:flex;
flex-direction:column;
gap:14.93vw;
}
.bas-flow li{
padding:6.40vw;
background:#fff;
position:relative;
}
.bas-flow-ttl{
width:100%;
height:9.60vw;
position:absolute;
top:-4.80vw;
left:0;
z-index:2;
}
.bas-col{
display:flex;
flex-wrap:wrap;
gap:4.27vw;
align-items:center;
margin:0 0 4.27vw;
}
.bas-img{
}
.bas-txt{
font-size:3.20vw;
line-height:1.75;
}

.bas-qa-blk{
display:flex;
flex-direction:column;
gap:4.27vw;
}

.bas-qa{
width:100%;
}

.bas-qa dt{
width:100%;
border:0.27vw solid #adadad;
border-radius:2.13vw;
display:flex;
align-items:center;
font-size:3.73vw;
line-height:1.35;
padding:2.5vw 11.73vw 2.5vw 11.20vw;
position:relative;
}
.bas-qa dt::before{
content:'';
width:5.87vw;
height:4.4vw;
mask-image:url(../../img/txt-q.svg);
mask-repeat:no-repeat;
background-color:#000;
mask-size:5.87vw;
position:absolute;
top:calc(50% - 2.2vw);
left:3.20vw;
}

.bas-qa dt.is-open::before{
background-color:#fff;
}




.bas-qa dt::after{
content:'';
width:6.40vw;
height:6.40vw;
background:url(../../img/acc-icon-plus.svg) no-repeat center / cover;
position:absolute;
top:calc(50% - 3.20vw);
right:3.20vw;
}
.bas-qa dt.is-open{
background:#14B4FF;
border:0.27vw solid #14B4FF;
border-radius:2.13vw 2.13vw 0 0;
color:#fff;
}

.bas-qa dt.is-open::after{
content:'';
width:6.40vw;
height:6.40vw;
background:url(../../img/acc-icon-minus.svg) no-repeat center / cover;
position:absolute;
top:calc(50% - 3.20vw);
right:3.20vw;
}

.bas-qa dd{
display:none;
background:#f4f4f4;
padding:4.27vw 4.27vw 4.27vw 10.67vw;
font-size:3.20vw;
line-height:1.75;
border-radius:0 0 2.13vw 2.13vw;
position:relative;
}
.bas-qa dd::before{
content:'';
width:5.33vw;
height:4vw;
mask-image:url(../../img/txt-a.svg);
mask-repeat:no-repeat;
background-color:#DD2525;
mask-size:5.33vw;
position:absolute;
top:4.27vw;
left:3.20vw;
}
.bas-qa dd a{
color:#057BA2;
}







@media (min-width: 768px) {

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

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

h2.bas-ttl{
font-size:28px;
line-height:1.5;
text-align:center;
}
h2.bas-ttl span{
padding:0 80px;
position:relative;
display:inline-block;
margin:0 0 64px;
}
h2.bas-ttl span::before{
content:'';
width:1px;
height:72px;
background:#000;
position:absolute;
top:calc(50% - 36px);
transform:rotate(-15deg);
left:0;
}
h2.bas-ttl span::after{
content:'';
width:1px;
height:72px;
background:#000;
position:absolute;
top:calc(50% - 36px);
transform:rotate(15deg);
right:0;
}
h3.md-bas01{
width:610px;
margin:0 auto;
position:relative;
bottom:-10px;
z-index:100;
}
.bas-point{
width:1260px;
margin:0 auto;
background:url(../../img/bg-grid.jpg) repeat;
background-size:19px;
padding:32px 16px;
display:flex;
flex-direction:column;
gap:32px;
}
.bas-point li{
width:100%;
}


.bas02{
padding:40px 0;
width:100%;
background:url(../../img/bg-dots.jpg) repeat;
background-size:120px;
margin:0 auto;
}

.md-bas02{
width:627px;
margin:0 auto;
position:relative;
bottom:-16px;
z-index:10;
}
.bas{
width:1260px;
margin:0 auto;
background:url(../../img/bg-grid.jpg) repeat;
background-size:19px;
padding:24px;
}
.bas-band{
display:flex;
gap:40px;
}
.bas-band li{
width:calc((100% - 40px) / 2);
font-size:16px;
line-height:1.75;
}
.bas-band-ttl{
text-align:center;
font-size:28px;
line-height:1.5;
display:block;
}
.bas-band-ttl span{
display:block;
position:relative;
}
.bas-band-ttl span::before{
content:'';
width:1px;
height:72px;
background:#000;
position:absolute;
top:calc(50% - 36px);
transform:rotate(-15deg);
left:12px;
}
.bas-band-ttl span::after{
content:'';
width:1px;
height:72px;
background:#000;
position:absolute;
top:calc(50% - 36px);
transform:rotate(15deg);
right:12px;
}

.bas-band-thumb{
width:100%;
margin:0 0 16px;
}
.bas-band-name{
font-size:48px;
line-height:1;
font-weight:normal;
color:#14B4FF;
margin:0 0 16px;
display:block;
position:relative;
letter-spacing:-.05em;
}
.bas-band-name::after{
content:'';
width:100%;
height:1px;
background:#14B4FF;
position:absolute;
bottom:5px;
left:0;
}


.bas03{
background:#F0FF82;
padding:24px 0 40px;
width:100%;
}

.md-bas03{
width:610px;
margin:0 auto 48px;
}

.bas-flow{
width:1260px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:48px;
}
.bas-flow li{
padding:48px 30px 40px;
background:#fff;
position:relative;
}
.bas-flow-ttl{
width:100%;
height:50px;
position:absolute;
top:-25px;
left:0;
z-index:2;
}
.bas-col{
display:flex;
gap:40px;
align-items:center;
margin:0 0 24px;
}
.bas-img{
width:573px;
}
.bas-txt{
width:573px;
font-size:22px;
line-height:1.7;
}

.bas-qa-blk{
display:flex;
flex-direction:column;
gap:24px;
}

.bas-qa{
width:100%;
}

.bas-qa dt{
width:100%;
height:54px;
border:1px solid #adadad;
border-radius:12px;
display:flex;
align-items:center;
font-size:20px;
padding:0 62px 0 54px;
position:relative;
}
.bas-qa dt::before{
content:'';
width:24px;
height:22px;
mask-image:url(../../img/txt-q.svg);
mask-repeat:no-repeat;
background-color:#000;
mask-size:24px;
position:absolute;
top:calc(50% - 11px);
left:24px;
}

.bas-qa dt.is-open::before{
background-color:#fff;
}




.bas-qa dt::after{
content:'';
width:30px;
height:30px;
background:url(../../img/acc-icon-plus.svg) no-repeat center / cover;
position:absolute;
top:calc(50% - 15px);
right:24px;
}
.bas-qa dt.is-open{
background:#14B4FF;
border:1px solid #14B4FF;
border-radius:12px 12px 0 0;
color:#fff;
}

.bas-qa dt.is-open::after{
content:'';
width:30px;
height:30px;
background:url(../../img/acc-icon-minus.svg) no-repeat center / cover;
position:absolute;
top:calc(50% - 15px);
right:24px;
}

.bas-qa dd{
display:none;
background:#f4f4f4;
padding:24px 16px 24px 46px;
font-size:16px;
line-height:1.75;
border-radius:0 0 12px 12px;
position:relative;
}
.bas-qa dd::before{
content:'';
width:24px;
height:22px;
mask-image:url(../../img/txt-a.svg);
mask-repeat:no-repeat;
background-color:#DD2525;
mask-size:24px;
position:absolute;
top:24px;
left:16px;
}

.bas-qa dd a:hover{
color:#057BA2;
}


/* END PC CSS */
}