@charset "UTF-8";


@media screen and (min-width: 768px) {
h3{	white-space:nowrap; }
}

/*--------------------------------------------------------------------------------
topimage
--------------------------------------------------------------------------------*/

@media all and (max-width: 767px) {
	#topimage { margin-bottom: 20px; }
}
@media screen and (min-width: 768px) {
	#topimage { margin-bottom: 40px; }
}

/*--------------------------------------------------------------------------------
about
--------------------------------------------------------------------------------*/
#about .lead .bg{
	display: inline-block;
	background: #f2e725;
}

@media all and (max-width: 767px) {
	#about .lead{
		text-align: center;
		font-size: 2.3rem;
		font-weight: 500;
		line-height: 1.3;
		margin-bottom:40px;
	}
	#about .noda{
		width: 200px;
		text-align:center;
		margin:auto;
	}
}

@media screen and (min-width: 768px) {
	#about .lead{
		font-size: 3rem;
		font-family: 'Noto Sans Japanese', sans-serif;
		font-weight: 500;
		line-height: 1.3;
		margin-bottom:60px;
	}
	#about .lead .font-m {
		font-size: 2rem;
		font-weight: normal;
	}
	#about .container { background:url(img/noda.jpg) bottom right no-repeat; background-size: 35%; }
	#about .noda{ display: none; }
}

/*--------------------------------------------------------------------------------
activities
--------------------------------------------------------------------------------*/
#activities .lead .font-xl {
	font-size: 4.8rem;
}
#activities .lead .font-m {
	font-size: 1.8rem;
	font-weight: normal;
}
@media all and (max-width: 767px) {
#activities .lead{
	text-align:center;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom:30px;
}
}
@media screen and (min-width: 768px) {
#activities .lead{
	text-align:center;
	font-size: 2.8rem;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom:30px;
}
}

#activities #system.card {
	border: #0073bd 3px solid;
	border-radius: 2px;
}

#activities #kigyou, #activities #syain, #activities #smile {
	position:relative;
}
.icon_x {
	position:absolute;
	top: 230px;
	right: -10px;
}

/*----------------------------------------*----------------------------------------
news
----------------------------------------*----------------------------------------*/




/*----------------------------------------*----------------------------------------
membership
----------------------------------------*----------------------------------------*/

#membership table{
	margin-right:10px;
}
#membership .table-basic th, .table-basic td {
	font-size:1.4rem;
	white-space:nowrap;
}



/*----------------------------------------
list
----------------------------------------*/

#news li {
	border-bottom: 1px solid rgba(255,255,255,.5);
	padding: 10px 0;
}
#news li img { vertical-align: middle; }
#news .date { font-size: 1.3rem; }
#news .cat {
	font-size: 1.3rem;
	text-decoration: none;
	color: #fff;
	background: rgba(41,127,188,1);
	display: inline-block;
	padding: 0 5px;
	width: 100px;
	text-align: center;
	transition: background .2s linear;
}
#news .cat a{
	color:#fff;
	text-decoration:none;
}
#news .cat:hover { background: rgba(41,127,188,.5); }
#news .title { color: #333; }
#news .title:hover { color: #f00; }
#news .excerpt { font-size: 1.3rem; }

/* OLを使用する場合 */

#news ol li { margin-bottom: 7px; }
#news ol li:last-child { margin-bottom: 0; }
#news ol .date { margin-right: 10px; }
#news ol .cat { margin-right: 10px; }

@media all and (max-width: 767px) {
#news ol li .title { display: block; }
}

/* .mediaを使用する場合 */

#news .media { margin-bottom: 10px; }
#news .media:last-child { margin-bottom: 20px; }
#news .media-body { vertical-align: middle; }
#news .media .date { margin-right: 10px; }
#news .media .title {
	display: block;
	margin: 3px 0;
}

/*----------------------------------------*----------------------------------------
parallax
----------------------------------------*----------------------------------------*/
#parallax { background: url(img/parallax.jpg) fixed; }

@media screen and (max-width: 767px) {
#parallax { display: none; }
}

@media screen and (min-width: 768px) {
#parallax.parallax-window { min-height: 200px; }
}