@charset "UTF-8";
/*
Theme Name: Community center
Description: コミュニティーセンター用テーマ
Version: 1.1
Author: TECHNO SERVICE
Author URI: https://tecsv.co.jp/
*/


.SP_emergency {
	margin-bottom: 50px;
	padding: 30px 30px 20px !important;
	border:8px solid #CC0000;

}
.SP_emergency h3 {
	padding:0 0 20px 0;
	font-size: 1.6rem;
	font-weight: bold;
	color:#CC0000;
	border-bottom:1px solid #ccc;
text-align: center;
}
.SP_emergency p {
	font-weight: bold;
text-align: left;
}



.font-r {
color:#ff0000;
}


.price_list {
	margin: 0 0 30px;
	padding: 0;
	font-size: 16px;
	list-style: none;
}
.price_list li {
	margin: 0 0 10px;
}
.price_list li a {
	color:#333;
}
.price_list li a:hover {
	color:#d39009;
}


#fee01,
#fee02,
#fee03,
#fee04,
#fee05 {
	padding-top: 30px;
    margin-top: -30px;
}
@media (min-width: 600px){
	#fee01,
	#fee02,
	#fee03,
	#fee04,
	#fee05 {
		padding-top: 180px;
		margin-top: -180px;
	}
}


/*****************************/
/*          section          */
/*****************************/
.sec_info {
	padding:50px 0;
	background-color:#f2f0e1;
}


.sec_nomal {
	padding:50px 0;
}

.sec_white {
	padding:50px 0;
	background-color:#fff;
}

.sec_title {
	margin:0 0 30px 0;
	text-align:center;
}
.sec_bottom {
	margin:20px 0 0;
	text-align:right;
}
@media only screen and (max-width: 39.9375em) {
		.sec_bottom { text-align:center; }
	}


/*****************************/
/*          header           */
/*****************************/

.new_header {
	display: flex;
	justify-content: space-between;
}

.new_header .header_left {
	width: 30%;
}

.new_header .header_right {
	width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}

.new_header .header_right div {}
.new_header .header_right div ul {
	display: flex;
	list-style: none;
	align-items: center;
}
.new_header .header_right div ul li {
	font-size: 16px;
	margin: 0 0 10px 25px;
}
.new_header .header_right div ul li a {
	color:#333;
}
.new_header .header_right div ul li a:hover {
	color:#d39009;
}

.new_header .header_right div ul li .triangle {
	background: #0a5789;
	display: inline-block;
	height: calc(tan(40deg) * 30px / 2);
	width: 10px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	margin: 0 6px 0 0;
}


header {
	z-index: 999;
	position: fixed;
	height: 105px;
	width:100%;
	top: 0;
	background-color:#faf9f3;
	/* background-color:#eee; */
}

header h1 {
	margin: 0;
	padding: 0;
}

header .top_title {
	margin:10px 0 30px;
	padding:0;
}
header a .hed_naavi {
	margin:80px 0 0;
}

header a .hed_naavi2 {
	margin:75px 0 0 6px;
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	header a .hed_naavi2 {
		margin:15px 0 0 3px;
	}
}

/*****************************/
/*        main_visual        */
/*****************************/
#main_visual {
	/* margin: 64px 0 0; */
}
@media (min-width: 600px){
	#main_visual {
		/* margin: 164px 0 0; */
	}
}


/*****************************/
/*         btn navi          */
/*****************************/
.bt_navi {
	text-align:center;
}
.bt_navi a img{
	transition: none;
}
.bt_navi a:hover img ,
.bt_navi a:active img {
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}

/*****************************/
/*           navi            */
/*****************************/

nav {
	z-index: 998;
	color:#fff;
	background-color:#0a5789;
	text-align:center;
	position: fixed;
	height: 64px;
	width:100%;
	top: 0;
}
@media (min-width: 600px){
	nav {
		top: 100px;
	}
}

	nav .navi div {
		margin:10px 0;
		font-weight:bold;
		border-left:1px solid #fff;
	}
		nav .navi div:last-child { border-right:1px solid #fff; }
	nav .navi div a {
		padding:10px 0;
		color:#fff;
		display:block;
	}
	nav .navi div a:hover {
		color:#57c9ff;
	}
		.menu {
			position: relative;
			width: 100%;
			*zoom: 1;
		}

		.menu > li {
			display: block;
			width: 100%;
			padding:4px 0;
		}

		.menu > li.menu_top {
			position: relative;
		}
		.menu > li.menu_top a {}

		ul.menu_second {
			visibility: hidden;
			opacity: 0;
			z-index: 1;
		}

		li.menu_top ul.menu_second {
			position: absolute;
			top: 30px;
			left:-20px;
			width: 100%;
			background: #0a5789;
			-webkit-transition: all .2s ease;
			transition: all .2s ease;
		}

		li.menu_top:hover ul.menu_second {
			top: 44px;
			visibility: visible;
			opacity: 0.85;
			filter:alpha(opacity=85);
			-ms-filter: "alpha( opacity=85 )";
		}

		.menu_second li {
			border-top: 1px solid #fff;
			list-style:none;
		}
		.menu_second li:first-child {
			padding:10px 0 0 0;
			border-top: none;
		}

		.menu_second li a:hover {
			background: #111;
		}




/*****************************/
/*           event           */
/*****************************/

#event_body {
	display: flex;
	flex-wrap: wrap;
}
#event_body_archive {
	display: flex;
	flex-direction: column;
}

#event_body .event_box {
	width:30%;
	margin:0 1.6% 20px;
	padding:0;
	background-color:#fff;
	border:1px solid #e0d9b0;
	position:relative;
}
#event_body_archive .event_box {
	width:100%;
	margin:0 0 20px;
	padding:0;
	background-color:#fff;
	border:1px solid #e0d9b0;
	position:relative;
}


#event_body .event_box:hover,
#event_body_archive .event_box:hover {
	background-color:#faf9f3;
}

#event_body .event_box a,
#event_body_archive .event_box a {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-indent:-9999px;
}

#event_body .event_body,
#event_body_archive .event_body  {
	width:100%;
	padding:12px 15px;
}
#event_body .event_body h4,
#event_body_archive .event_body h4 {
	margin:0 0 15px 0;
	padding:5px 0 15px 0;
	color:#2e97d8;
	font-weight:bold;
	font-size: 16px;
	font-size:1.000rem;
	border-bottom:1px dashed #ccc;
}

#event_body .event_body .day_title  {
	display:inline-block;
	width:100%;
	margin:0 10px 0 0;
	padding:3px 0;
	text-align:center;
	font-size: 12px; font-size:0.750rem;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background-color:#dcd6b3;
	color:#333;
}
#event_body_archive .event_body .day_title  {
	display: inline-block;
	margin:0 10px 0 0;
	padding:3px 15px;
	text-align:center;
	font-size: 12px; font-size:0.750rem;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background-color:#dcd6b3;
	color:#333;
}


#event_body .event_body .day,
#event_body_archive .event_body .day  {
	margin:10px 0 0;
	padding:0 0 10px;
	line-height:1.8;
	font-size: 14px;
	border-bottom:1px dashed #ccc;
}
#event_body .event_body .day span {
	margin:0 0 0 -3px;
	font-size: 12px;
}
#event_body_archive .event_body .day span {
	font-size: 12px;
}

#event_body .event_body .text,
#event_body_archive .event_body .text {
	margin:15px 0 10px;
	padding:0;
	font-size: 14px;
	font-size:0.875rem;
}





.event_cate { padding:12px 15px; }
.course { background-color:#0776a7; }
.event { background-color:#ed6d1f; }
.club { background-color:#956c53; }

@media only screen and (max-width: 39.9375em) {
	#event_body {
		flex-direction: column;
	}
	#event_body .event_box {
		width:90%;
		margin:0 auto 20px;
	}
}



/* .event_box { padding:0 20px 20px; }
.event_box_inner {
	position:relative;
	margin:0;
	padding:0;
	background-color:#fff;
}
.event_box_inner:hover {
	background-color:#faf9f3;
}
 .event_box_inner a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-indent:-9999px;
}


.event_cate { padding:12px 15px; }
.course { background-color:#0776a7; }
.event { background-color:#ed6d1f; }
.classroom { background-color:#956c53; }

.event_body {
	height:300px;
	width:100%;
	padding:12px 15px;
	border:1px solid #e0d9b0;
}
.event_body h4 {
	margin:0 0 15px 0;
	padding:5px 0 15px 0;
	color:#2e97d8;
	font-weight:bold;
	font-size: 16px;
	font-size:1.000rem;
	border-bottom:1px dashed #ccc;
}
.event_body .day,
.event_body .time {
	margin:10px 0 0;
	padding:0 0 10px;
	line-height:1.8;
	font-size: 14px;
	border-bottom:1px dashed #ccc;
}
.event_body .day span {
	margin:0 0 0 -5px;
	font-size: 12px;
}

.event_body .day_title,
.event_body .time_title {
	display:inline-block;
	width:80px;
	margin:0 10px 0 0;
	padding:3px 0;
	text-align:center;
	font-size: 12px; font-size:0.750rem;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background-color:#dcd6b3;
	color:#333;
}
.event_body .text {
	margin:15px 0 0;
	padding:0;
	font-size: 14px;
	font-size:0.875rem;
}

@media only screen and (max-width: 39.9375em) {
	.event_body {
		height:100%;
	}
	} */


/*****************************/
/*            News           */
/*****************************/

.news {}
.news ul { list-style:none; }
.news ul li {
	padding:20px 15px;
	font-weight:bold;
	border-top:1px solid #d2c9c4;
}
.news ul li:last-child { border-bottom:1px solid #d2c9c4; }
.news ul li span { margin:0 15px 0 0; color:#333; font-weight:normal;}
.news ul li i {
	margin:0 10px 0 0;
	color:#0776a7;
}

@media only screen and (max-width: 39.9375em) {
	.news ul { margin:0; }
	}


/*****************************/
/*           footer          */
/*****************************/

.shitei {
	padding: 50px 0 10px 0;
	text-align:center;
	font-size: 10px;
	font-size:0.625rem;
}
.shitei p {
	margin:0;
	padding:15px 0 0;
}

footer {
	margin:0;
	padding:30px 0;
	color:#fff;
	background-color:#0a5789;
}
footer a { color:#fff; }
footer h3 {
	margin:0 0 25px 0;
	font-size: 22px;
	font-size:1.375rem;
	font-weight:bold;
}
footer p {
	margin:0;
	font-size: 16px;
	font-size:1.000rem;
}
footer ul {
	margin:0;
	font-size: 12px;
	font-size:0.750rem;
	line-height:1.750rem;
}
footer ul li {
	margin:0;
	padding:0;
	list-style:none;
}
footer ul li ul {
	margin:0 0 10px 0;
}
footer ul li ul li {
	margin:0 0 0 20px;
	list-style: circle;
}

footer address {
	margin:20px 0 0 0;
	font-style:normal;
	font-size: 12px;
	font-size:0.750rem;
}

@media only screen and (max-width: 39.9375em) {
		footer h3 { text-align:center; }
		footer p { text-align:center; }
		footer address { text-align:center; padding:20px 0 0 0; }
		footer ul {
			margin:0 20px 20px;
		}
		.foot_address {
			margin: 0;
			padding: 0 0 20px 0;
		}
	}


/*****************************/
/*            side           */
/*****************************/
.side {}
.side_inner {
	padding:20px;
	border:1px solid #e0d9b0;
	background-color:#fff;
}
.side_inner h4 {
	padding:0 0 15px 0;
	color:#2e97d8;
	font-weight:bold;
	font-size: 16px;
	font-size:1.000rem;
	border-bottom:1px dashed #ccc;
}
.side_inner ul {
	margin:0 20px;
	list-style:none;
	line-height:2;
}
.side_inner ul li {
	position: relative;
}
.side_inner ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .8em;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.side_inner ul ul {
	margin:0 10px 15px;
	line-height:2;
}
.side_inner ul ul li {
	position: relative;
	font-size: 14px;
	font-size:0.875rem;
}
.side_inner ul ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: 0.92em;
	left: -1em;
	width: 4px;
	height: 4px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


/*****************************/
/*         facilitie        */
/*****************************/

.facilitie {}
.facilitie h4 {
	font-size: 20px; font-size:1.250rem;
	font-weight:bold;
}
.facilitie ul {
	margin-bottom:40px;
}


.facilitie_body tbody {
	font-size: 16px;
	font-size:1rem;
	line-height:1.500rem;
}
.facilitie_body tbody tr {
	background-color:#fff;
}
.facilitie_body tbody th {
	padding:15px;
	text-align:left;
	font-weight:lighter;
	border:1px solid #e0d9b0;
	background-color:#f4f1cf;
}
.facilitie_body tbody td {
	padding:15px;
	text-align:left;
	border:1px solid #e0d9b0;
	background-color:#fff;
}



/*****************************/
/*           notes           */
/*****************************/

.notes {}
.notes table {}
.notes table th {
	padding:15px;
	text-align:left;
	font-size: 16px;
	font-size:1rem;
	border:1px solid #ccc;
}
.notes table td {
	padding:15px;
	text-align:left;
	border:1px solid #ccc;
}
.notes table td ul {
	line-height:1.900rem;
}



/*****************************/
/*          guidance         */
/*****************************/

.guidance {}
.guidance .guidance_box {
	padding:10px;
}
.guidance .guidance_box .guidance_box_inner {
	padding:10px;
	text-align:center;
	border:1px solid #e0d9b0;
}
.guidance .guidance_box .guidance_box_inner img {
	margin:0 0 10px 0;
}
.guidance .guidance_box .guidance_box_inner a img{
	transition: all 0s ease;
	-moz-transition: all 0s ease;
	-webkit-transition: all 0s ease;
	-o-transition: all 0s ease;
	-ms-transition: all 0s ease;
	-khtml-transition: all 0s ease;
}

.guidance table {}
.guidance table th {
	padding:15px;
	text-align:left;
	font-size: 16px;
	font-size:1rem;
}
.guidance table td {
	padding:15px 25px;
	text-align:left;
	font-size: 12px;
	font-size:0.750rem;
	line-height:1.500rem;
}



.guidance .sub_menu {
	margin: 0;
	padding:15px 25px;
	border:1px solid #e0d9b0;
}
.guidance .sub_menu p {
	margin:0;
	line-height:2;
}
.guidance .sub_menu_title {
	margin:0;
	font-weight:bold;
}
.guidance .sub_menu ul {
	margin:0 20px;
	list-style:none;
	line-height:2;
}
.guidance .sub_menu ul li {
	position: relative;
}
.guidance .sub_menu ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .8em;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.guidance ol.flow {
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.guidance ol.flow li {
margin: 0 0 20px 0;
padding:0 10px 30px;
}
.guidance ol.flow li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border:none;
}

.guidance ol.flow dl {
margin: 0;
}

.guidance ol.flow dt {
padding: 0;
font-size: 20px; font-size:1.250rem;
}
.guidance ol.flow dt span {
margin: 0 10px 0 0;
color: #8E8E8E;
}

.guidance ol.flow dd {
margin: 0;
font-size: 14px;
font-size:0.875rem;
}

.usage_fee {}

.usage_fee thead th {
	padding:10px;
	text-align:center;
	border:1px solid #e0d9b0;
	background-color:#f4f1cf;
}

.usage_fee tbody {
	background-color:#faf9f3;
	border:none;
}
.usage_fee tbody th {
	padding:10px;
	text-align:center;
	border:1px solid #e0d9b0;
	font-size: 14px;
	font-size:0.875rem;
	background-color:#fff;
}
.usage_fee tbody td {
	padding:10px;
	text-align:right;
	font-size: 16px;
	font-size:1.000rem;
	border:1px solid #e0d9b0;
	background-color:#fff;
}






.usage_fee .kome_ul {
	margin:0 15px 50px;
	font-size: 14px;
	font-size:0.875rem;
	list-style:none;
	text-indent:-1em;
}
.usage_fee .kome_ul li {
	margin:0 0 10px 0;
}
.usage_fee .fee_ul li {
	margin:0 0 10px 0;
	font-size: 14px;
	font-size:0.875rem;
}

.usage_fee .back_top {
	text-align:right;
}

.fee02table {}
.fee02table tbody th {
	text-align:left;
	font-weight:normal;
}
.fee02table tbody td {
	text-align:left;
}






/* Tablet */
@media only screen and (max-width: 39.9375em) {

  /* usage_fee_table  */
  .tableBlock.usage_fee_table table,
  .tableBlock.usage_fee_table02 table {
	  margin:0 0 80px 0;
  }
  .tableBlock.usage_fee_table table,
  .tableBlock.usage_fee_table table caption,
  .tableBlock.usage_fee_table table thead,
  .tableBlock.usage_fee_table table tbody,
  .tableBlock.usage_fee_table table tr,
  .tableBlock.usage_fee_table table tr th,
  .tableBlock.usage_fee_table table tr td {
    display:block;
  }
  .tableBlock.usage_fee_table table tr {
	  margin:0 0 20px 0;
  }
  .tableBlock.usage_fee_table table tr th,
  .tableBlock.usage_fee_table table tr td {
    margin:-1px; /* borderが二重になるのを防ぐ */
  }
  .tableBlock.usage_fee_table table tr th {
	  background-color:#f4f1cf;
  }
  .tableBlock.usage_fee_table table thead {
      display:none;
  }
  .tableBlock.usage_fee_table table tbody tr td[data-th]:before {
    content: attr(data-th) "";
    display: inline-block;
	font-size: 14px;
	font-size:0.875rem;
    margin-right:0.8em;
	color:#9D9D9D;
  }


  /* usage_fee_table02  */
  .tableBlock.usage_fee_table02 table,
  .tableBlock.usage_fee_table02 table caption,
  .tableBlock.usage_fee_table02 table thead,
  .tableBlock.usage_fee_table02 table tbody,
  .tableBlock.usage_fee_table02 table tr,
  .tableBlock.usage_fee_table02 table tr th {
    display:block;
	background-color:none;
  }
  .tableBlock.usage_fee_table02 table tr th {
    margin:-1px; /* borderが二重になるのを防ぐ */
	background-color:#f4f1cf;
	text-align:center;
	font-weight:bold;
  }
  .tableBlock.usage_fee_table02 table tr {
    margin:0 0 20px 0;
	border:1px solid #e0d9b0;
  }
  .tableBlock.usage_fee_table02 table tr td {
    display:list-item;
    list-style:disc inside;
    border:none;
  }
  .tableBlock.usage_fee_table02 table tr td + td {
    padding-top:0;
  }
  .tableBlock.usage_fee_table02 table thead {
      display:none;
  }

}









/*****************************/
/*            room           */
/*****************************/

.room {}
.room h2 {
	font-size: 24px;
	font-size:1.500rem;
}
.room table {
	font-size: 14px;
	font-size:0.875rem;
}

.room table caption {
	text-align:left;
}
.room table .table_cap {
	text-align:right;
	font-weight:lighter;
	font-size: 10px;
	font-size:0.625rem;
}

.room_slider {
	margin:0 0 80px 0;
}
.room_body {
	width:100%;
	padding:15px 15px 0;
	border:1px solid #e0d9b0;
}

.room_body_title {
	float:left;
	display:inline-block;
	width:80px;
	margin:0 10px 0 0;
	padding:3px 0;
	text-align:center;
	font-size: 12px;
	font-size:0.750rem;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background-color:#dcd6b3;
	color:#333;
}
.room_body .text {
	margin:10px 0 20px;
	font-size: 14px;
	font-size:0.875rem;
}




/*****************************/
/*            post           */
/*****************************/

.post {}
.post h2 {
	font-size: 24px;
	font-size:1.500rem;
}

.post_body {
	width:100%;
	padding:25px;
	border:1px solid #e0d9b0;
	background-color:#fff;
}

.post_body_title {
	/* float:left; */
	display:inline-block;
	width:150px;
	margin:5px 10px 0 0;
	padding:3px 0;
	text-align:center;
	font-size: 14px;
	font-size:0.875rem;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background-color:#dcd6b3;
	color:#333;
}


.post_body .event_date,
.post_body .event_time,
.post_body .event_text{
	padding-top:4px;
	font-size: 20px;
	font-size:1.250rem;
}

.post_body .post_text {
	margin:0 0 30px 0;
	ffont-size: 20px;
	font-size:1.250rem;
}

.post_ct {
	padding:20px;
	color:#fff;
}
.post_body .course { background-color:#0776a7; }
.post_body .event { background-color:#ed6d1f; }
.post_body .classroom { background-color:#956c53; }

.post_body tbody tr {
	background-color:#fff;
}
.post_body tbody th {
	padding:15px;
	text-align:left;
	font-weight:lighter;
	border:1px solid #e0d9b0;
	background-color:#f4f1cf;
}
.post_body tbody td {
	padding:15px;
	text-align:left;
	border:1px solid #e0d9b0;
	background-color:#fff;
}




/*****************************/
/*     friendly_japanese     */
/*****************************/


.friendly_japanese {
}
.friendly_japanese h3 {
	margin:0 0 20px 0;
	padding:5px;
	border-bottom:5px solid #0a5789;
}
.friendly_japanese h4 {
	margin:0 0 15px 0;
	padding:0 10px 10px;
	border-left:2px solid #ccc;
	border-bottom:1px solid #ccc;
}
.friendly_japanese p {
	margin:0 0 80px 15px;
	font-size: 22px;
	font-size:1.375rem;
	line-height:3.000rem;
}

.friendly_japanese ul {
	margin:0 0 80px 35px;
	font-size: 22px;
	font-size:1.375rem;
	line-height:2.500rem;
}
.friendly_japanese ul li {
	margin:0 0 30px 0;
}







.emergency {
margin-bottom:40px;
	padding:20px 40px;
	border:1px solid #ccc;
	background-color:#fff;
}
.emergency ul {
	padding:0 20px;
	list-style: none;
}
.emergency ul li {
	padding: 0 0 10px 0;
}

.emergency_title {
	margin:0 40px 20px;
	font-weight:bold;
}
.emergency_subheader {margin:0 40px;}
.emergency_text {
	margin:40px 40px 0;
	text-align:left;
	line-height:1.8rem;
}




/*  facility_banner */
.facility_banner {
	margin:0 auto 50px;
}

.facility_banner_inner {
	margin:0 10px 15px;
	padding:20px;
	width:220px;
	display: inline-block;
	background-color: #0a5789;
	text-align: center;
	color:#fff;
	font-size: 1rem;
	position: relative;
	z-index: 1;
	font-weight: bold;
}

.facility_banner_inner a {
	width: 100%;
	color:#fff;
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent:-9999px;
  z-index: 2;
}

.facility_banner_inner:hover {
	background-color: #87ceeb;
}