@charset "UTF-8";

/* campuslife/club（部活動）専用スタイル */
/* 共通のl-mv・page-content（accent-mosaic）等のベーススタイルはcampuslife.cssを参照 */


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


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

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



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


.club-dance,
.club-gekidan,
.club-bas,
.club-wo{
margin:0 0 56px;
}


.md-dance{
display:block;
margin:0 auto 6.40vw;
width:45.87vw;
}
.md-gekidan{
display:block;
margin:0 auto 6.40vw;
width:47.47vw;
}
.md-bas{
display:block;
margin:0 auto;
width:87.20vw;
}
.md-wo{
display:block;
margin:0 auto 6.40vw;
width:87.20vw;
}

.bas-caption{
text-align:center;
margin:2.13vw 0 6.40vw;
font-size:3.20vw;
line-height:1.75;
}



/* 部活動スライダー(SP): 左右のスライドは出さず1枚のみ表示。pagination・矢印はvw基準(375px)で配置 */
[data-pagename="campuslife/club"] .l-slider--common .slide-img {
width:100%;
aspect-ratio:748/407;
border-radius:4.27vw;
overflow:hidden;
}

[data-pagename="campuslife/club"] .l-slider--common .slide-img img {
width:100%;
height:100%;
object-fit:cover;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-container-initialized {
padding-bottom:0 !important;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-pagination {
bottom:1.07vw !important;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-prev,
[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-next {
top:50% !important;
width:5.33vw !important;
height:5.33vw !important;
margin:0 !important;
transform:translateY(-50%) !important;
background-color:transparent !important;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-prev {
left:3.67vw !important;
right:auto !important;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-next {
right:3.67vw !important;
left:auto !important;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-prev img,
[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-next img {
width:5.33vw;
height:5.33vw;
display:block;
}




.club-desc{
width:100%;
font-size:3.73vw;
line-height:1.93;
margin:0 auto 6.40vw;
}

.adv-com{
width:100%;
background:url(../../img/bg-grid.jpg) repeat;
background-size:5.07vw;
border:0.27vw dotted #000;
padding:4.27vw;
font-size:3.20vw;
line-height:1.75;
margin:0 auto 4.27vw;
}
 .com-ttl{
font-size:3.20vw;
line-height:1.5;
font-weight:bold;

border-bottom:0.27vw dotted #adadad;
margin:0 0 2.13vw;
}


.club-dance .com-ttl{ color:#005CD4; }
.club-gekidan .com-ttl{ color:#F00072; }
.club-bas .com-ttl{ color:#008145; }
.club-wo .com-ttl{ color:#FF5A00; }



.club-acc{
width:100%;
margin:0 auto 10.67vw;
}
.club-acc dt{
width:100%;
height:10.67vw;
border:0.27vw solid #adadad;
border-radius:2.13vw;
display:flex;
align-items:center;
font-size:3.73vw;
padding:0 11.73vw 0 3.20vw;
position:relative;
background:#fff;
}

.club-acc 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;
}
.club-acc dt.is-open{
background:#000;
border-radius:2.13vw 2.13vw 0 0;
color:#fff;
}

.club-acc 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;
}

.club-acc dd{
display:none;
background:#f4f4f4;
padding:4.27vw 2.13vw;
border-radius:0 0 2.13vw 2.13vw;
}
.clubT{
width:100%;
font-size:3.20vw;
}
.clubT th{
padding:2.13vw;
border-bottom:0.27vw solid #adadad;
text-align:left;
vartical-align:top;
}

.club-dance .clubT th{ color:#005CD4; }
.club-gekidan .clubT th{ color:#F00072; }
.club-bas .clubT th{ color:#008145; }
.club-wo .clubT th{ color:#FF5A00; }


.clubT td{
padding:2.13vw;
border-bottom:0.27vw solid #adadad;
}
.clubT th.nb,
.clubT td.nb{
border:0;
}

.icon-sns{
display:flex;
gap:2vw;
margin:2vw 0 0;
}


.icon-x a{
display:block;
width:10.67vw;
height:10.67vw;
background:url(../../img/icon-x.svg) no-repeat;
background-size:10.67vw;
}
.icon-insta a{
display:block;
width:10.67vw;
height:10.67vw;
background:url(../../img/icon-instagram.svg) no-repeat;
background-size:10.67vw;
}




@media (min-width: 768px) {

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

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

h2.club-ttl{
font-size:28px;
line-height:1.5;
text-align:center;
position:relative;
margin:0 0 64px;
}
h2.club-ttl span{
display:inline-block;
padding:0 28px;
position:relative;
}
h2.club-ttl span::before{
content:'';
width:1px;
height:72px;
background:#000;
position:absolute;
top:0;
left:0;
transform:rotate(-10deg);
}
h2.club-ttl span::after{
content:'';
width:1px;
height:72px;
background:#000;
position:absolute;
top:0;
right:0;
transform:rotate(10deg);
}

.club-dance,
.club-gekidan,
.club-bas,
.club-wo{
margin:0 0 56px;
}


.md-dance{
display:block;
margin:0 auto 24px;
width:325px;
}
.md-gekidan{
display:block;
margin:0 auto 24px;
width:334px;
}
.md-bas{
display:block;
margin:0 auto;
width:621px;
}
.bas-caption{
margin:16px 0 24px;
font-size:16px;
line-height:1.75;
}

.md-wo{
display:block;
margin:0 auto 24px;
width:620px;
}

/* 部活動一覧スライダー: メインスライド748×407・左右のスライドが奥へ回り込む重なりレイアウト */
[data-pagename="campuslife/club"] .l-slider--common .slide-img {
width:748px;
height:407px;
border-radius:16px;
overflow:hidden;
position:relative;
left:50%;
transform:translateX(-50%);
transition:transform 0.3s;
}

[data-pagename="campuslife/club"] .l-slider--common .slide-img img {
width:100%;
height:100%;
object-fit:cover;
}

/* 左右の小さいスライドは748×407のボックスをscale(0.525)で縮小表示（393×214相当）。widthやheightを直接切り替えるとアニメーションしないため、transformのscaleで縮小・拡大がアニメーションするようにしている */
[data-pagename="campuslife/club"] .l-slider--common .swiper-slide-prev .slide-img,
[data-pagename="campuslife/club"] .l-slider--common .swiper-slide-next .slide-img {
transform:translateX(-50%) scale(0.525);
}

[data-pagename="campuslife/club"] .l-slider--common .swiper-slide-active {
position:relative;
z-index:3;
}

[data-pagename="campuslife/club"] .l-slider--common .swiper-slide-prev,
[data-pagename="campuslife/club"] .l-slider--common .swiper-slide-next {
z-index:1;
}

/* メインスライド(748px)と左右スライド(393px)が137px重なる位置までtranslateXで寄せる */
[data-pagename="campuslife/club"] .l-slider--common .swiper-slide-prev {
transform:translateX(-13.5px) !important;
}

[data-pagename="campuslife/club"] .l-slider--common .swiper-slide-next {
transform:translateX(13.5px) !important;
}

/* ページネーション: メインスライド(748px)の bottom:16px に重ねて配置 */
[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-container-initialized {
padding-bottom:0 !important;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-pagination {
bottom:16px !important;
}

/* 矢印ボタン: 専用SVGをw32×h32でメインスライドの縦中央・左右25pxに配置 */
[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-prev,
[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-next {
top:50% !important;
width:32px !important;
height:32px !important;
margin:0 !important;
transform:translateY(-50%) !important;
background-color:transparent !important;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-prev {
left:calc(50% - 349px) !important;
right:auto !important;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-next {
right:calc(50% - 349px) !important;
left:auto !important;
}

[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-prev img,
[data-pagename="campuslife/club"] .l-slider.l-slider--common .swiper-button-next img {
width:32px;
height:32px;
display:block;
}

.club-desc{
width:715px;
font-size:22px;
line-height:1.7;
margin:0 auto 24px;
}

.adv-com{
width:715px;
background:url(../../img/bg-grid.jpg) repeat;
background-size:19px;
border:1px dotted #000;
padding:24px 16px;
font-size:16px;
line-height:1.75;
margin:0 auto 24px;
}
 .com-ttl{
font-size:16px;
line-height:1.5;
font-weight:bold;

border-bottom:1px dotted #adadad;
margin:0 0 8px;
}


.club-dance .com-ttl{ color:#005CD4; }
.club-gekidan .com-ttl{ color:#F00072; }
.club-bas .com-ttl{ color:#008145; }
.club-wo .com-ttl{ color:#FF5A00; }

.club-acc{
width:715px;
margin:0 auto 56px;
}
.club-acc dt{
width:100%;
height:54px;
border:1px solid #adadad;
border-radius:12px;
display:flex;
align-items:center;
font-size:20px;
padding:0 62px 0 24px;
position:relative;
}

.club-acc 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;
}
.club-acc dt.is-open{
background:#000;
border-radius:12px 12px 0 0;
color:#fff;
}

.club-acc 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;
}

.club-acc dd{
display:none;
background:#f4f4f4;
padding:24px 16px;
border-radius:0 0 12px 12px;
}
.clubT{
width:100%;
font-size:16px;
}
.clubT th{
padding:8px;
border-bottom:1px solid #adadad;
text-align:left;
vartical-align:top;
}

.club-dance .clubT th{ color:#005CD4; }
.club-gekidan .clubT th{ color:#F00072; }
.club-bas .clubT th{ color:#008145; }
.club-wo .clubT th{ color:#FF5A00; }


.clubT td{
padding:8px;
border-bottom:1px solid #adadad;
}
.clubT th.nb,
.clubT td.nb{
border:0;
}


.icon-sns{
display:flex;
margin:16px 0 0;
gap:16px;
}


.icon-x a{
display:block;
width:72px;
height:72px;
background:url(../../img/icon-x.svg) no-repeat;
background-size:72px;
}
.icon-insta a{
display:block;
width:72px;
height:72px;
background:url(../../img/icon-instagram.svg) no-repeat;
background-size:72px;
}


/* END PC CSS */
}