@charset "UTF-8";
/* CSS Document */

*{
	padding:0;
	margin:0;
}


/* ===================================================
基本設定
=================================================== */
html{
	font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-style: normal;
}

body{
	color: #FFF;
	animation: loading 2s;
}
@keyframes loading {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


.bold{font-weight: 700;}


p{
	font-size:12px;
	line-height: 1.8;
}
p.text{text-align: justify;}

a{
	font-size:12px;
	text-decoration: none;
	color: #FFF;
	transition: all 0.3s;
}
a:hover{opacity: .7;}

ul li{
	list-style: none;
	font-size:10px;
	line-height: 1.5;
}

button {
	background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* セクションの余白 */
section{padding: 40px 32px;}


/* ===================================================
wrapper
=================================================== */
#wrapper{
	background: #821b1f;
}
@media screen and (min-width: 767px) {
	#wrapper{
		background: #f7f4d9;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 390px;
        gap: 32px;
/*		place-content: center;*/
        padding:0 0 0 32px;
	}
}
/*
@media screen and (min-width: 1023px) {
	#wrapper{
        gap: 80px;
        padding:0 80px;
	}
}
*/



/* ===================================================
PC時の右側（スマホデザイン）
=================================================== */
#right-wrap{
    background: #821b1f;
}

.fix-button{
    position: fixed;
    right:20px;
    bottom:20px;
    z-index: 3;
}
.fix-button img{
    width:84px;
    height:84px;
}
@media screen and (min-width: 767px) {
    .fix-button{
        display: none;
    }
}

/* ===================================================
PC時の左側
=================================================== */
#left-wrap{
    display: none;
}
@media screen and (min-width: 767px) {
	#left-wrap{
        display: block;
		height: auto;
		width:100%;
	}
	#left-sticky{
		position:sticky;
		top:32px;
	}
}
@media screen and (min-width: 1023px) {
/*	#left-wrap{padding:0px;}*/
}


/* タイトル */
.pc-header{
    
}

.pc-link{
    position: absolute;
    z-index: 3;
    right: 20px;
    bottom: 0px;
}
.pc-link img{
    width:108px;
    height: 108px;
}


@media screen and (min-width: 1130px) {
    .pc-header{
        display: grid;
        grid-template-columns: 1fr 108px;
    }
    .pc-link{
        position: inherit;
    }
}


.pc-title > a{
    background: #821b1f;
    color: #FFF;
    font-size:24px;
    letter-spacing: 0.04em;
    padding: 8px 22px;
    display: inline-block;
}
.pc-menu ul{
    display: flex;
    gap:10px;
    margin:25px 0;
    flex-wrap: wrap;
}
@media screen and (min-width: 1023px) {
    .pc-menu ul{
        flex-wrap: nowrap;
    }
}

.pc-menu li{
    color:#821b1f;
    text-align: center;
}
.pc-menu li a{
    display: flex;
    justify-content: center;
    align-items: center;
    height:28px;
    background: #FFF;
    padding: 0 22px 2px;
    line-height: 1;
    letter-spacing: 0.08em;
    color:#821b1f;
    border:1px solid #821b1f;
    border-radius: 20px;
    margin-bottom: 6px;
}
.pc-menu li a:hover{
    opacity: 1;
    background: #821b1f;
    color:#FFF;
}
@media screen and (min-width: 1023px) {
    .pc-menu li a{
        font-size: 1vw;
    }
}
@media screen and (min-width: 1230px) {
    .pc-menu li a{
        font-size: 15px;
    }
    
}

/* ===================================================
スライド
=================================================== */

/* ページ読み込み時に画像をふわっと表示 */
.slide {
	opacity: 0;
	animation: fade-up-slide 1s forwards;
	transform: translateY(30px);
	animation-delay: .4s;
}
@keyframes fade-up-slide {
	0% {}
	100% {opacity: 1; transform: translateY(0);}
}


/* ===================================================
スマホ時のスライド
=================================================== */
#sp-slide{
    padding:0 30px 30px;
    margin: 0 auto;
/*    width:calc(100% - 60px) !important;*/
}
#sp-slide .bx-wrapper{
	border: none;
	box-shadow: none;
	margin-bottom:0;
	background: none;
    width:100% !important;
}

#sp-slide .bx-viewport{
	width: auto !important;
    height: auto !important;
/*	height: calc(100dvh - 210px) !important;*/
/*	aspect-ratio: 221 / 400;*/
/*	margin: 0 auto;*/
}

#sp-slide .slide{
    width: auto !important;
/*	height: calc(100dvh - 210px) !important;*/
	aspect-ratio: 221 / 400;
	margin: 0 auto;
    transition: all .5s;
}



/* ===================================================
PC時のスライド
=================================================== */
#pc-slide .bx-wrapper{
	display: none !important;
    width: 100%;
	border: none;
	box-shadow: none;
	margin-bottom:0;
	background: none;
}
/*
#pc-slide .bx-wrapper .bx-pager{bottom: -23px;}
#pc-slide .bx-wrapper .bx-pager.bx-default-pager a{
	background:#898989;
	width: 8px;
    height: 8px;
    margin: 0 8px;
}
#pc-slide .bx-wrapper .bx-pager.bx-default-pager a.active{
	background:#231815;
}
*/

/*
#pc-slide .bx-wrapper .bx-prev {
	background: url(../img/prev.svg) no-repeat;
}
#pc-slide .bx-wrapper .bx-next {
	right: 0;
	background: url(../img/next.svg) no-repeat;
}
#pc-slide .bx-wrapper .bx-next:hover{background-position:0 0;}
*/

#pc-slide .bx-viewport {
	container-type: inline-size;
}

#pc-slide .slide {
	height: calc(100vh - 262px);
	min-height: calc((100vw - 406px - 40px * 3) / 2);
/*	min-height: calc(100cqw / 2);*/
	max-height: calc((100vw - 406px - 40px * 3) * 690 / 1034);
/*	max-height: calc(100cqw * 690 / 1034);*/
} 

#pc-slide img{
	object-fit: cover;
	top: 0;
	width: 100% !important;
	height: 100%;
}

@media screen and (min-width: 767px) {
    #pc-slide {padding-bottom: 60px;}
	#pc-slide .bx-wrapper{display: block !important;}
}
@media screen and (min-width: 1023px) {
	#pc-slide .slide {
		min-height: calc((100vw - 356px - 80px * 3) / 2);
/*		min-height: calc(100cqw / 2);*/
		max-height: calc((100vw - 356px - 80px * 3) * 690 / 1034);
/*		max-height: calc(100cqw * 690 / 1034);*/
	}
}


/* ===================================================
スクロールするコンテンツ枠
=================================================== */
#content-wrap{
	width:100%;
	background:#c6a958;
	margin: 0px auto 0;
    padding-top: 0px;
}
#content-wrap img{
    max-width: 100%;
    display:block;
}


/*
@media screen and (min-width: 767px) {
	#content-wrap{
		max-width: 406px;
		margin: 0 0 0 0px;		
	}
}
*/


/* ===================================================
ヘッダー 
=================================================== */
header{
	text-align: center;
	padding-top:40px;
	height: 140px;
    box-sizing: border-box;
    margin-bottom:40px;
}

.header-inner{
    margin-bottom: 20px;
}
.header-inner-sns{
    display: flex;
    gap: 15px;
    text-align: left;
    padding: 0 32px;
}
.header-inner-sns img{width:20px;}
.header-inner-sns a:last-child img{width:10px;}

.header-title h1{
	font-size:22px;
    letter-spacing: 0.04em;
    font-weight: 500;
    display: inline-block;
}
.header-title a{
    pointer-events: none;
    font-size:22px;
}
.header-title p{
	font-size: 9px;
	letter-spacing: 0;
/*	margin: 30px 0 0px 0;*/
}

/*
@media screen and (min-width: 767px) {
	header{
		padding-top:50px;
		height: auto;
        margin-bottom:10px;
	}
	.header-inner{
		display: flex;
    	justify-content: space-between;
   		align-items: flex-start;
	}
	.header-inner-title p{
		display: block;
		letter-spacing: 0.1em;
	}
	.header-text p{
		margin: 18px 0 0px 0;
		padding:0;
	}
	.header-inner-title a{pointer-events:auto;}
}
@media screen and (min-width: 1023px) {
    .header-inner-title{
		display: flex;
    	align-items: center;
    	flex-shrink: 0;
        margin-bottom:0px;
	}
    .header-inner-title p{margin-left: 33px;}
}
*/


/* ヘッダーナビゲーション */
.menu{
	width:24px;
	height:24px;
	position: fixed;
    top: 40px;
	right: 32px;
	z-index: 99;
    cursor: pointer;
    transition: all 0.3s;
}
.menu:hover{opacity: .7;}

.menu span{
	width: 100%;
  	height: 2px;
  	background-color: #FFF;
  	position: relative;
  	transition: ease .4s;
	display: block;
}
.menu span:nth-child(1) {top: 0;}
.menu span:nth-child(2) {margin: 6px 0;}
.menu span:nth-child(3) {bottom: 0;}

.menu.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.menu.active span:nth-child(2) {background-color: transparent;}
.menu.active span:nth-child(3) {
  top: -11px;
  transform: rotate(-45deg);
}

/*
@media screen and (min-width: 767px) {
	.menu{right: 16%;}
}
@media screen and (min-width: 767px) {
	.menu{display: none;}
}
*/


nav{
	width: 100%;
	height: calc(100dvh - 80px);
    padding: 40px 0;
	position: fixed;
	top:0;
	opacity: 0;
	transition: ease .4s;
	z-index: -1;
}
/* backdrop-filterが有効なブラウザはblur表示にする */
	@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  	nav {
		background: rgba(255, 255, 255, 0.6);
		-webkit-backdrop-filter: blur(8px);
		-moz-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		}
	}


nav ul li{line-height: 3;}
nav ul li a{
    color:#821b1f;
    font-size: 17px;
}
nav ul li.sp-home{
	display: inline-block;
    margin-bottom: 60px;
	opacity: 1 !important;
	line-height: 1.4;
    background: #821b1f;
    padding: 5px 10px;
}
nav ul li.sp-home a{font-size: 17px; color: #FFF;}

nav ul li.no-current{opacity: .6;}



nav.active{
	opacity: 1;
	z-index: 2;
}
@media screen and (min-width: 767px) {
	nav{
        max-width: 390px;
/*
		height: auto;
		padding: 0;
		position: relative;
		opacity: 1;
        z-index: 2;
*/
	}
/*
	nav ul li{text-align: right; line-height: 2;}
	nav ul li.sp-home{display: none;}
*/
	
/*	 backdrop-filterが有効なブラウザはblur表示にする */
/*
	@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  	nav {
		background: none;
		}
	}
*/

}



/* ===================================================
　共通設定
=================================================== */

/* セクションタイトル */
.titleH2{
    text-align: center;
    letter-spacing: 0.08em;
    margin-bottom:30px;
}

h3{
    font-size:13px;
    text-align: center;
    position: relative;
    margin-bottom: 25px;
}
h3::after{
    content: "";
    display: block;
    width:20px;
    height: 1px;
    background: #FFF;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
h3.long-line::after{
    width:124px;
}



/* ふわっと表示させる */
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1;
}



/* ===================================================
ABOUT
=================================================== */

#about{padding: 0;}

/* テキスト */
.about-text{
    background: url("../img/about-bg.jpg") no-repeat center;
    background-size: cover;
    padding: 40px 32px;
}
.about-text p{
    line-height: 2;
}


/* aboutコンテンツ */
.about-con{
    padding: 40px 0 0;
}
.about-con-item{
    background: #821b1f;
}
.about-item-text{
    padding: 20px;
    
}
.about-item-text .en{line-height: 1.4;}
.about-con-item:not(:last-child) .about-item-text p:first-child{
    font-size:17px;
    margin-bottom:10px;
}
.about-con-item:not(:last-child){
    margin:0 42px 40px;
}

.about-con-item-last{
    margin:0;
}
.about-con-item-last .about-item-text{
    padding: 0 42px 20px;
    color:#821b1f;
}
.about-con-item-last img, .about-con-item img{width:100%;}


/* ページ読み込み時にアイテムをふわっと表示 */
/*
.about-con-item{
	opacity: 0;
	animation: fade-up 1s forwards;
	transform: translateY(30px);
	animation-delay: 1s;
}
*/
/* 画像を表示するタイミングをずらす */
/*
.about-con-item:nth-child(2){animation-delay: 1.2s;}
.about-con-item:nth-child(3){animation-delay: 1.4s;}
.about-con-item:nth-child(4){animation-delay: 1.6s;}

@keyframes fade-up {
	0% {}
	100% {opacity: 1; transform: translateY(0);}
}
*/



/* ===================================================
STAFF
=================================================== */

#staff{
    padding: 40px 0;
    background: #821b1f;
}

/* テキスト */
.staff-text{
    padding: 0px 42px 30px;
}
.staff-text p{
    line-height: 2;
}

/* スタッフ一覧 */
.staff-member{
    padding: 0 42px 45px;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;/* スマホでの慣性スクロールを有効に */
    scrollbar-width: none; /* Firefoxでスクロールバーを非表示に */
    -ms-overflow-style: none; /* IE, Edgeでスクロールバーを非表示に */
}
/* Chrome, Safari (WebKit系) のスクロールバー自体を非表示に */
.staff-member::-webkit-scrollbar {
  display: none;
}
.staff-member-item{
    max-width: 128px;
    flex-shrink: 0;
}
.staff-item-text > span{
    font-size:10px;
    color: #821b1f;
    background: #FFF;
    padding:5px;
    margin:15px 0 8px;
    display: inline-block;
}
.staff-item-text p{
    font-size: 11px;
    line-height: 1.6;
}
.staff-item-text p span{
    font-size: 12.5px;
}



.expand {/*全体*/
  max-height: 75px;
    font-size: 10px;
    line-height: 1.5;
  overflow: hidden;
  position: relative;
  transition: .5s;
}
.expand p{margin-top: 20px;}

 
.staff-item-text{position: relative;}

.staff-item-text input {/*input要素は隠しておく*/
  visibility: hidden;
    display: none;
}
 
.staff-item-text label {/*ボタン部分のスタイル*/
    width:18px;
    height: 18px;
  position: absolute;
  bottom: -38px;
  display: block;
  left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  z-index:1;
  cursor: pointer;
  text-transform: uppercase;
}
 
.staff-item-text label:before {/*閉じている際のボタンのテキスト*/
  content: "";
    background: url("../img/plus.svg") no-repeat;
    display: inline-block;
    width:18px;
    height: 18px;
    
}
 
.staff-item-text input:checked + label:before {/*開いているときは:checked状態なので、その際はボタンテキストを変える*/
  content: "";
      transform: rotate(45deg);
}
 
input[type=checkbox]:checked ~ .expand {
 max-height: 500px;
}
 
input[type=checkbox]:checked ~ .expand:before {
 opacity: 0
}


/* ===================================================
NEWS
=================================================== */
#news{padding: 40px 32px;}

#news .link-button a{
    
    width:120px;
    height:25px;
    margin: 30px auto 0;
    border: 1px solid #FFF;
    text-align: center;
    font-size:12px;
    line-height: 1;
    padding-top: 5px;
}
#news .link-button{
    display: flex;
    justify-content: center;
    align-items: center;
}

#news a span{
    display: block;
    font-size:8px;
}

.news-list #sb_instagram,
.news-list #sbi_images{padding:0 !important;}


/* Instagramテキスト表示 */
#news #sbi_images .sbi_item {
/*    width: calc(190px / 650px * 100%) !important;*/
    overflow: visible;
    margin-bottom: calc(10px + 12px + 2em * 17 / 12) !important;
    font-size: 12px;
    line-height: 1.4166666667;
}
#news .sbi-screenreader{
    display:block !important;
    text-align: left !important;
    overflow: hidden !important;
}
#news #sb_instagram .sbi-screenreader{
    position: absolute;
    bottom: calc(-8px - 2em * 17 / 12);
    left: 0;
    width: 100% !important;
    height: 2.8333333333em !important;
    font-size: 12px;
    line-height: 1.4166666667 !important;
    text-indent: 0 !important;
    letter-spacing: 0.05em;
}



/* ===================================================
MATCH
=================================================== */
#match{
    padding: 40px 0;
    background: #821b1f;
}

.match-tab ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap:3px;
    border-bottom: none;
}
.match-tab ul li {
    width: 80px;
    padding: 2px 0px;
    text-align: center;
    background:#FFF;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    color: #231815;
    letter-spacing: 0.08em;
    border: 1px solid #231815;
}
.match-tab ul li.selected { 
    background-color: #ddaf80; 
}
.match-tab ul li:not(.selected):hover { 
    color: #ccc; 
}

.match-tab-content { 
/*    display: none; */
    visibility:hidden;
    height:0;
}
.match-tab-content.selected { 
/*    display: block; */
    visibility: inherit;
    height: auto;
    animation: fadeIn 0.3s ease;
    margin-top: 20px;
}
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}


#match:has(#result-tab.selected) {
  background-color: #b15a43;
}



.tab-item{
    width: 230px !important;
    background: #FFF;
    padding:10px;
    color: #231815;
    letter-spacing: 0.08em;
}
.tab-item + p{
    font-size:9px;
}
.date{
    text-align: center;
}
.date p{line-height: 1.2;}
.date .year{font-size:11px;}
.date .day{font-size:22px;}
.date .time{font-size:12px;}

.game{
    margin: 10px;
    padding: 15px 0;
    border-top:1px solid #821b1f;
    border-bottom:1px solid #821b1f;
    display: grid;
    grid-template-columns: 1fr 16px 1fr;
    align-items: center;
}
.game p{line-height: 1.3;}
.game div{
    text-align: center;
}
.game img{
    width:38px;
    height: 38px;
    margin: 0 auto 6px;
    border-radius: 50%;
}
.game .game-team{font-size:9px;}
.game .game-point{font-size:22px;}
.game .vs{margin-top: 40px;}





/* ===================================================
Team Activities
=================================================== */
#team {padding: 40px 42px;}

/* 練習日・月謝 */
.team-table{text-align: center;}
.team-table:nth-child(2) {margin-bottom:30px;}
.team-table p{
    font-size:13px;
    background: #821b1f;
    color:#FFF;
    display: inline-block;
    margin: 0 0 10px;
    padding: 5px;
    min-width: 60px;
    letter-spacing: 0.08em;
}
.table1{
    border-collapse: collapse;
    width: 100%;
}
.table1 th, .table1 td {
    background-color: #FFF;
    color:#821b1f;
    padding: 10px;
    font-size:11px;
}
.table1 tr:not(:last-child){border-bottom: 1px solid #821b1f;}
.table1 th{
    border-right: 1px solid #821b1f;
    font-weight: 500;
    letter-spacing: 0.08em;
}
.table1 td{text-align: left;}


.table2 td{text-align: center;}
.table2 td:first-of-type{border-right: 1px solid #821b1f;}

.team-tablebox{
    position:relative;
}
.hosoku{
    font-size:10px;
    color:#821b1f;
    position: absolute;
    right: 0;
    top:-15px;
}



/* 練習場所 */
.team-practice{
    margin-top: 40px;
}

.gmap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9のアスペクト比 */
    height: 0;
}

.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.team-practice p{
    font-size:10px;
    text-align: center;
    margin-bottom: 20px;
}

.team-img{
    margin-top:40px;
}
.team-img img{
    width:230px;
    margin: 0 auto;
}


#team ul li{
    font-size:10px;
    letter-spacing: 0.08em;
    line-height: 1.5;
    padding-left: 1em;
    text-indent: -1em;
}


/* 大会・戦歴・卒団後 */
.team-list{
    margin-top: 40px;
}
.team-list p{
    font-size:10px;
    margin-bottom: 20px;
}

.center-box{
    text-align: center;
}
.center-box p, .center-box ul {
    display: inline-block;
    text-align: left;
}

ul.result li{
    background: url("../img/cup.svg") no-repeat;
    background-position: left center;
    padding-left: 20px !important;
    background-size: 9px;
}


/* ===================================================
Contact
=================================================== */
#contact {
    padding: 40px 42px;
    background:#efefef;
}

/* セクションタイトル */
#contact .titleH2{
    color:#821b1f;
}

.contact-con{
    max-width: 140px;
    margin:0 auto;
    letter-spacing: 0.03em;
}
.contact-con a{
    color:#821b1f;
    text-decoration: none;
}

.contact-tel::before{
    content:"";
    display: inline-block;
    background: url("../img/tel.svg") no-repeat;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    position: relative;
    top: 1px;
}
.contact-mail::before{
    content:"";
    display: inline-block;
    background: url("../img/mail.svg") no-repeat;
    width: 11px;
    height: 10px;
    margin-right: 5px;
    position: relative;
    top: 2px;
}


/* ===================================================
フッター
=================================================== */
footer{
    height: 38px;
	background:#821b1f;
	color:#FFF;
	display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
}

footer p{
    font-size:9px;
    margin-right: 10px;
}

footer img{width:10px;}
footer a:last-child img{width:5px;}



/* ===================================================
404
=================================================== */
#page404-wrapper{
    background: #f7f4d9;
}
#page404{
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 32px 160px;
    color: #821b1f;
    position: relative;
}

#page404 h1{margin-top: 60px;}
#page404 p{margin: 30px 0;}

#page404 .parts-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    color: #821b1f;
    font-size: 16px;
    max-width: 550px;
    height: 60px;
    padding: 0 20px;
    border: 1px solid #821b1f;
    border-radius: 50px;
}
#page404 .parts-btn:hover{
    opacity: 1;
    background: #821b1f;
    color: #FFF;
}

@media screen and (min-width: 620px) {
    #page404{
        height: calc(100vh - 230px);
    }
}