@charset "utf-8";

/**
 *
 * 学校生活: クラブ活動
 *
 */

/*--------------------------------------------------------------------------
  overwrite スタイルの上書き
--------------------------------------------------------------------------*/
#Content{
	background: #fffdf0;
}

/* .cmn_kv_img
-----------------------------------------------------------------*/
.cmn_kv_img{
	background-image: url(../images/kv_img.jpg);
}

/* @SP */
@media all and (max-width: 767px){
	.cmn_kv_img{
		background: none;
	}
	.cmn_kv_ttl img{
		width: auto;
		height: 53px;
	}
}


/*----------------------------------------------------------------------
	about
----------------------------------------------------------------------*/
.about{
	position: relative;
	background: #fff6f9;
	border-bottom: 1px dashed #fe7cab;
	padding-bottom: 68px;
}
.about_inner{

}
.about .inner_base{
	position: relative;
}
.about_txt{
	padding: 70px 0 60px;
	text-align: center;
}

/* .box-wrap
-----------------------------------------------------------------*/
.box-wrap{
	position: relative;
}
.box-wrap .box{
	position: relative;
	padding: 58px 20px 32px;
	background: #fe7cab;
	border-radius: 5px;
	box-sizing: border-box;
}

/* .cheerleading
-----------------------------------------------------------------*/
.cheerleading{
	position: relative;
	margin-bottom: 32px;
}
.cheerleading_img{
	position: absolute;
	right: -20px;
	top: -65px;
	z-index: 2;
}
.cheerleading .box_ttl{
	position: absolute;
	top: -22px;
	left: -33px;
	z-index: 3;
}
.cheerleading th,
.cheerleading td{
	padding: 5px 9px;
	color: #fff;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
}
.cheerleading thead th{
	padding: 10px 5px;
}
.cheerleading thead th + th{
	border-top: 1px solid #ffbed5;
}
.cheerleading thead th:last-child{
	border-left: 1px solid #ffbed5;
}

.cheerleading tbody th.school{
	padding: 5px 0 ;
	font-size: 12px;
	color: #ee297d;
	width: 140px;
	box-sizing: border-box;
	vertical-align: middle;
}
.cheerleading tbody th.school span{
	display: table-cell;
	padding: 11px 8px;
	border-radius: 5px;
	background: #fff;
	width: 135px;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
}
/*
.cheerleading tbody th.rally{
	padding: 5px 0 ;
	font-size: 12px;
	color: #ee297d;
	width: 240px;
	box-sizing: border-box;
	vertical-align: middle;
}*/
.cheerleading tbody th.rally{
	padding: 5px 0 ;
	font-size: 14px;
	border-top: 1px solid #ffbed5;
	border-bottom: 1px solid #ffbed5;
	border-right: 7px solid #fe7cab;
	color: #3b3b3b;
	width: 240px;
	box-sizing: border-box;
	vertical-align: middle;
}

.cheerleading tbody th.rally span{
	display: table-cell;
	padding: 11px 5px;
	border-radius: 5px;
	width: 240px;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
	text-align:left;
}
/*
.cheerleading tbody th.rally span{
	display: table-cell;
	padding: 11px 8px;
	border-radius: 5px;
	background: #fff;
	width: 234px;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
}*/

.cheerleading tbody th.none{
	width: 140px;
	box-sizing: border-box;
	vertical-align: middle;
}

.cheerleading tbody td{
	font-size: 12px;
	border-top: 1px solid #ffbed5;
	border-bottom: 1px solid #ffbed5;
	width: 140px;
	box-sizing: border-box;

}
.cheerleading tbody td span{
	display: inline-block;
	color: #f3ef19;
	font-size: 16px;
	font-weight: bold;
}
.cheerleading tbody td + td{
	border-left: 1px solid #ffbed5;
}

/* .other
-----------------------------------------------------------------*/
.other{

}

/* .box-dance
-----------------------------------------------------------------*/
.box-dance {
	width: 48%;
	min-height: 220px;
	float: left;
	margin-bottom: 32px;
}

.box-brassband {
	width: 48%;
	min-height: 220px;
	float: right;
	margin-bottom: 32px;
}

.box-dance .box_ttl,.box-brassband .box_ttl{
	position: absolute;
	top: -25px;
	left: -31px;
	z-index: 3;
}
.box-dance th,
.box-dance td,
.box-brassband th,
.box-brassband td{
	padding: 5px 9px;
	color: #fff;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
}
.box-dance th,
.box-brassband th{
	padding: 5px 0;
	font-size: 12px;
	color: #ee297d;
	/*width: 214px;*/
	box-sizing: border-box;
	vertical-align: middle;
}
.box-dance th span{
	display: table-cell;
	padding: 11px 8px;
	border-radius: 5px;
	background: #fff;
	width: 300px;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
}

.box-brassband th span{
	display: table-cell;
	padding: 11px 8px;
	border-radius: 5px;
	background: #fff;
	width: 350px;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
}
.box-dance td,
.box-brassband td{
	font-size: 12px;
	border-top: 1px solid #ffbed5;
	border-bottom: 1px solid #ffbed5;
	/*width: 150px;*/
	box-sizing: border-box;
}
.box-dance td span,.box-brassband td span{
	display: block;
	color: #f3ef19;
	font-size: 15px;
	font-weight: bold;
}


/* .box-other
-----------------------------------------------------------------*/
.box-other {
	/*width: 534px;*/
	min-height: 220px;
	float: left;
}
.box-other .box_ttl{
	position: absolute;
	top: -20px;
	left: -21px;
	z-index: 3;
}
.box-other th,
.box-other td{
	padding: 5px 9px;
	color: #fff;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
}
.box-other th{
	padding: 5px 12px 5px 0;
	font-size: 12px;
	color: #ee297d;
	box-sizing: border-box;
	vertical-align: middle;
}
.box-other th span{
	display: table-cell;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
}
.box-other th.club{
	padding: 5px 0;
	font-size: 12px;
	width: 110px;
	color: #ee297d;
	box-sizing: border-box;
	vertical-align: middle;
}
.box-other th.club span{
	display: table-cell;
	padding: 11px 8px;
    border-radius: 5px;
	width: 105px;
	height: 50px;
	background: #fff;
	box-sizing: border-box;
	vertical-align: middle;
}
.box-other th.rally{
	padding: 5px 0;
	font-size: 14px;
	border-top: 1px solid #ffbed5;
	border-bottom: 1px solid #ffbed5;
	border-right: 7px solid #fe7cab;
	width: 210px;
	color: #3b3b3b;
	box-sizing: border-box;
	vertical-align: middle;
}
.box-other th.rally span{
	display: table-cell;
	padding: 11px 5px;
	width: 206px;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
	text-align:left;
}
/*修正のためコメントアウト
.box-other th span:first-child{
	border-radius: 5px 0 0 5px;
	background: #ffeef4;
	width: 108px;
	font-size: 12px;
}
.box-other th span:last-child{
	border-radius: 0 5px 5px 0;
	background: #fff;
	width: 208px;
	font-size: 12px;
}
*/
.box-other td{
	font-size: 12px;
	border-top: 1px solid #ffbed5;
	border-bottom: 1px solid #ffbed5;
	/*width: 170px;*/
	box-sizing: border-box;
	line-height: 1.4;
}
.box-other td span{
	display: block;
	color: #f3ef19;
	font-size: 15px;
	font-weight: bold;
}

@media all and (max-width: 767px){

	.about{
		background-size: 394px auto;
		border-top: 1px dashed #fe7cab;
		padding-bottom: 40px;
	}
	.about:after{
		height: 27px;
		bottom: 37px;
		background-position: -12px 0;
		background-size: auto 27px;
	}
	.about_inner{
		background-position: -12px 40px;
		background-size: auto 29px;
	}
	.about_txt{
		padding: 42px 0 25px;
		text-align: center;
	}
	.about_txt img{
		width: 295px;
		height: auto;
	}

	/* .box-wrap
	-----------------------------------------------------------------*/
	.box-wrap{
		position: relative;
	}
	.box-wrap .box{
		position: relative;
		padding: 38px 14px 22px;
		background: #fe7cab;
		border-radius: 5px;
		box-sizing: border-box;
	}

	/* .cheerleading
	-----------------------------------------------------------------*/
	.cheerleading{
		position: relative;
		margin-bottom: 25px;
	}
	.cheerleading_img{
		position: relative;
		right: 0;
		top: 0;
		text-align: center;
	}
	.cheerleading_img img{
		width: 198px;
		height: auto;
	}
	.cheerleading .box{
		margin-top: 14px;
		padding-top: 40px;
	}
	.cheerleading .box_ttl{
		left: 5px;
		top: 0;
	}
	.cheerleading .box_ttl{
		left: -19px;
		top: -25px;
	}
	.cheerleading .box_ttl img{
		width: 221px;
		height: auto;
	}
	.cheerleading th,
	.cheerleading td{
		padding: 2px 4px;
	}
	.cheerleading table{
		width: 100%;
	}
	.cheerleading thead th{
		padding: 6px 5px 5px;
		font-size: 8px;
	}
	.cheerleading tbody th{
		padding: 2px 5px 2px 0;
		font-size: 8px;
		line-height: 1.4;
		color: #ee297d;
		width: 40%;
	}
	.cheerleading tbody th span{
		padding: 5px 4px;
	}
	.cheerleading tbody td{
		font-size: 7px;
	}
	.cheerleading tbody td span{
		margin-top: 2px;
		font-size: 11px;
	}
	.cheerleading tbody td + td{
		border-left: 1px solid #ffbed5;
	}
	
	.cheerleading tbody th.school{
	padding: 2px ;
	font-size: 8px;
	color: #ee297d;
	width: 25%;
	box-sizing: border-box;
	vertical-align: middle;
}
.cheerleading tbody th.school span{
	display: table-cell;
	padding: 11px 8px;
	border-radius: 5px;
	background: #fff;
	width: 170px;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
}
	
	.cheerleading tbody th.rally{
	padding: 2px ;
	font-size: 9px;
	border-top: 1px solid #ffbed5;
	border-bottom: 1px solid #ffbed5;
	border-right: 5px solid #fe7cab;
	color: #3b3b3b;
	width: 50%;
	box-sizing: border-box;
	vertical-align: middle;
}
.cheerleading tbody th.rally span{
	display: table-cell;
	padding: 11px 5px;
/*	border-radius: 5px;*/
/*	background: #fff;*/
	width: 341px;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
}
/*	
	.cheerleading tbody th.rally{
	padding: 2px ;
	font-size: 8px;
	color: #ee297d;
	width: 50%;
	box-sizing: border-box;
	vertical-align: middle;
}
.cheerleading tbody th.rally span{
	display: table-cell;
	padding: 11px 8px;
	border-radius: 5px;
	background: #fff;
	width: 341px;
	height: 50px;
	box-sizing: border-box;
	vertical-align: middle;
}
*/
.cheerleading tbody th.none{
	width: 25%;
	box-sizing: border-box;
	vertical-align: middle;
}


	/* .other
	-----------------------------------------------------------------*/
	.other{

	}

	/* .box-dance
	-----------------------------------------------------------------*/
	.box-dance,.box-brassband {
		width: 100%;
		min-height: initial;
		min-height: auto;
		float: none;
		margin-bottom: 25px;
	}
	.box-dance .box_ttl,.box-brassband .box_ttl{
		position: absolute;
		top: -18px;
		left: -15px;
		z-index: 3;
	}
	.box-dance .box_ttl img,.box-brassband .box_ttl img{
		width: 150px;
		height: auto;
	}
	.box-dance table,.box-brassband table {
		width: 100%;
	}
	.box-dance th,
	.box-dance td,
	.box-brassband th,
	.box-brassband td{
		padding: 2px 4px;
		color: #fff;
		line-height: 1.2;
		text-align: center;
		vertical-align: middle;
	}
	.box-dance th,.box-brassband th{
		padding: 2px 5px 2px 0;
		font-size: 9px;
		color: #ee297d;
		width: 55%;
	}
	.box-dance th div,.box-brassband th div {
		display: table;
		width: 100%;
	}
	.box-dance th span,.box-brassband th span{
		display: table-cell;
		padding: 11px 8px;
		border-radius: 5px;
		background: #fff;
		width: 100%;
		height: 50px;
	}
	.box-dance td,.box-brassband td{
		font-size: 8px;
		border-top: 1px solid #ffbed5;
		border-bottom: 1px solid #ffbed5;
		width: 40%;
		box-sizing: border-box;
	}
	.box-dance td span,.box-brassband td span{
		display: block;
		color: #f3ef19;
		font-size: 11px;
		font-weight: bold;
	}


	/* .box-other
	-----------------------------------------------------------------*/
	.box-other {
		width: 100%;
		min-height: initial;
		min-height: auto;
		float: none;
	}
	.box-other .box_ttl{
		position: absolute;
		top: -18px;
		left: -15px;
		z-index: 3;
	}
	.box-other .box_ttl img{
		width: 116px;
		height: auto;
	}
	.box-other table {
		width: 100%;
	}
	.box-other th,
	.box-other td{
		padding: 2px 4px;
		color: #fff;
		line-height: 1.2;
		text-align: center;
		vertical-align: middle;
	}
	.box-other th{
		padding: 2px 5px 2px 0;
		font-size: 8px;
		color: #ee297d;
		box-sizing: border-box;
		vertical-align: middle;
		width: 55%;
	}
	.box-other th div {
		display: table;
		width: 100%;
	}
	.box-other th span{
		display: table-cell;
		height: 50px;
		padding: 0 5px;
		box-sizing: border-box;
		vertical-align: middle;
	}
	.box-other th.club{
	padding: 2px;
	font-size: 8px;
	width: 25%;
	color: #ee297d;
	box-sizing: border-box;
	vertical-align: middle;
}
	.box-other th.club span{
	display: table-cell;
	padding: 11px 8px;
    border-radius: 5px;
	width: 171px;
	height: 50px;
	background: #fff;
	box-sizing: border-box;
	vertical-align: middle;
}

.box-other th.rally{
	padding: 2px;
	font-size: 9px;
	border-top: 1px solid #ffbed5;
	border-bottom: 1px solid #ffbed5;
	border-right: 5px solid #fe7cab;
	width: 50%;
	color: #3b3b3b;
	box-sizing: border-box;
	vertical-align: middle;
}
.box-other th.rally span{
	display: table-cell;
	padding: 11px 5px;
	width: 341px;
	height: 50px;
/*	border-radius: 5px;*/
/*	background: #fff;*/
	box-sizing: border-box;
	vertical-align: middle;
}
	
	/*修正のためコメントアウト
	.box-other th span:first-child{
		border-radius: 5px 0 0 5px;
		background: #ffeef4;
		width: 35%;
		font-size: 8px;
	}
	.box-other th span:last-child{
		border-radius: 0 5px 5px 0;
		background: #fff;
		width: 65%;
		font-size: 8px;
	}
	*/
	.box-other td{
		font-size: 9px;
		border-top: 1px solid #ffbed5;
		border-bottom: 1px solid #ffbed5;
		width: 40%;
		box-sizing: border-box;
		line-height: 1.4;
	}
	.box-other td span{
		display: block;
		color: #f3ef19;
		font-size: 11px;
		font-weight: bold;
	}
}


/*----------------------------------------------------------------------
	block
----------------------------------------------------------------------*/
.block{
	padding: 124px 0 114px;
}
.block_inner{
	padding: 30px 28px 68px;
}
.block_hdg{
	position: relative;
	width: 534px;
	margin: 0 auto;
	line-height: 50px;
	text-align: center;
	background: #d91c5c;
}
.block_hdg:before,
.block_hdg:after{
	content: '';
	position: absolute;
	width: 8px;
	height: 28px;
	top: 50%;
	margin-top: -14px;
	background: no-repeat 0 0;
	background-size: 8px auto;
}
.block_hdg:before{
	left: -8px;
	background-image: url(../images/ttl_bg_frame01.png);
}
.block_hdg:after{
	right: -8px;
	background-image: url(../images/ttl_bg_frame02.png);
}
.block_hdg img{
	vertical-align: middle;
}
.block_comment{
	position: absolute;
	bottom: -27px;
	right: -19px;
	z-index: 2;
}

/* .units
-----------------------------------------------------------------*/
.units{
	margin-top: 40px;
}
.units .unit{
	margin: 0 20px;
	float: left;
	width: 412px;
}
.units .unit_hdg{
	position: relative;
	text-align: center;
	line-height: 40px;
	border-radius: 5px;
}
.units .unit01 .unit_hdg{
	background: #7fc858;
}
.units .unit02 .unit_hdg{
	background: #1eb9e2;
}
.units .unit_hdg:after{
	content: '';
	position: absolute;
	bottom: -12px;
	left: 50%;
	width: 22px;
	height: 12px;
	margin-left: -11px;
	background: no-repeat 0 0;
	background-size: 22px auto;
}
.units .unit01 .unit_hdg:after{
	background-image: url(../images/ttl_bg_arrow01.png);
}
.units .unit02 .unit_hdg:after{
	background-image: url(../images/ttl_bg_arrow02.png);
}
.units .unit_hdg img{
	width: auto;
	height: 16px;
	vertical-align: middle;
}
.units .unit_cont{
	margin-top: 30px;
}
.units .unit_cont ul{
	float: left;
	width: 50%;
}
.units .unit_cont li{
	height: 32px;
	padding-left: 76px;
	display: table;
	font-size: 13px;
	background: no-repeat 0 50%;
}
.units .unit_cont li + li{
	margin-top: 8px;
}
.units .unit_cont .cate01{
	background-image: url(../images/ico_cate01.png);
}
.units .unit_cont .cate02{
	background-image: url(../images/ico_cate02.png);
}
.units .unit_cont .cate03{
	background-image: url(../images/ico_cate03.png);
}
.units .unit_cont li > span{
	display: table-cell;
	vertical-align: middle;
}
.units .unit_cont li .str{
	display: block;
	font-size: 11px;
	line-height: 1.1;
}

@media all and (max-width: 767px){

	.block{
		padding: 60px 0 70px;
		overflow: hidden;
	}
	.block_inner{
		padding: 20px 20px 25px;
	}
	.block_hdg{
		width: 100%;
		line-height: 40px;
	}
	.block_hdg:before,
	.block_hdg:after{
		width: 7px;
		height: 25px;
		margin-top: -12px;
		background-size: 7px auto;
	}
	.block_hdg:before{
		left: -7px;
	}
	.block_hdg:after{
		right: -7px;
	}
	.block_hdg img{
		width: 107px;
		height: auto;
	}
	.block_comment{
		width: 193px;
		left: 50%;
		right: auto;
		bottom: -15px;
		margin-left: -6px;
	}


	/* .units
	-----------------------------------------------------------------*/
	.units{
		margin-top: 35px;
	}
	.units .unit{
		margin: 0 4px;
		float: none;
		width: auto;
		position: relative;
		z-index: 3;
	}
	.units .unit + .unit{
		margin-top: 30px;
	}
	.units .unit_hdg{
		line-height: 30px;
	}
	.units .unit_hdg:after{
		bottom: -7px;
		width: 15px;
		height: 7px;
		margin-left: -8px;
		background-size: 15px auto;
	}
	.units .unit_hdg img{
		height: 13px;
	}
	.units .unit_cont{
		margin-top: 24px;
	}
	.units .unit_cont li{
		padding: 6px 0 6px 60px;
		font-size: 11px;
		line-height: 1.2;
		background-size: 53px auto;
		height: auto;
	}
	.units .unit_cont li + li{
		margin-top: 10px;
	}
	.units .unit_cont .cate01{
		background-image: url(../images/ico_cate01_sp.png);
	}
	.units .unit_cont .cate02{
		background-image: url(../images/ico_cate02_sp.png);
	}
	.units .unit_cont .cate03{
		background-image: url(../images/ico_cate03_sp.png);
	}
	.units .unit_cont li .str{
		font-size: 10px;
	}


}


@media all and (max-width: 375px){
	.block_comment{
		width: 180px;
	}
}

/*2018.06.22 追記*/
@media all and (max-width: 767px){
.is_pc {
	display: none;
}
}

/*2020.05.15 追記*/
.new::after {
    display: inline-block;
    /*margin-left: 5px;*/
	margin: 5px 0 0 5px;
    padding: 2px 3px;
    color: #FFF;
    border: 1px solid #ee6b90;
	background: #ee6b90;
    font-size: 10px;
    line-height: 1;
    content: 'NEW';
}