/****************************************************************
          769px以上
*****************************************************************/
@media (min-width: 769px) {

/*---------------------------------------------------------------------------------*/
/*全体*/
/*---------------------------------------------------------------------------------*/
	
	
/*******************************************************/
	
/*ヘッダー*/
	
/*******************************************************/
header	{
	padding-top: 10px;}
	
.flexbox{
	display: flex;}
	
.sitetitle	{
	-webkit-flex: 3;
	flex: 3;}
	
	
.sitetitle img	{
	width: 15%;
	height: auto;
	display: block;
	margin: 0 auto;}
	
.sitetitle h1 a,
.sitetitle span a {
	color: #fff;
	margin: 0 auto;
	font-size:2.2rem;
	padding-top: 30px;
	letter-spacing: 1px;
	font-family:'メイリオ';
	font-weight: bold;}
	
.tel{
	font-size:2rem;
	padding-top:25px;}
	
.place{
	font-size: 1.4rem;}
	
/*************************************/
/*ナビゲーション*/
/*************************************/
.nav-drawer	{
	display: none;}

#mainmenu{
	display: block !important;}

.mainmenu ul{
	padding: 20px 3% 5px;
	list-style: none;
	background-color: #fff;
	display: flex;
	justify-content: space-between;}

.mainmenu li{
	display: block;
	flex: 1;
	margin-bottom: 2px;}
	
.mainmenu li:hover{
	border-bottom: #E79BB0 solid 2px;
	margin-bottom: 0;}
	
.mainmenu li a{
	display: block;
	color: #000;
	font-size: 1.6rem;
	text-align: center;
	text-decoration: none;}


/*******************************************************/
	
/*トップページ*/
	
/*******************************************************/
h2 {
	width: 30%;
	margin: 0 auto;
	font-size: 2.5rem;
	text-align: center;
	border-bottom: #F4B68F solid 2px;
}

.aboot_messeage{
	height: 500px;
}

.map_content,.donate_content,
.contact_content{
	height: 500px;
}
.map_map {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
/*******************************************************/
	
/*フッター*/
	
/*******************************************************/
footer {padding-top: 30px;}
	
footer,footer a {
	color: #000;
	font-size: 1.6rem;}
	
	
.copyright{
	text-align:center;
	padding:20px 0;}
	
#fixedTop{
	font-size: 2rem;
	padding: 15px 20px;
	right: 10px;
	bottom: 10px;
	color: #F0E68C;
	text-align: center;
	display: none;
	background: #fff;
	position: fixed;
	z-index: 99;
	border: solid 2px #B2D9A5;}

/*******************************************************/
	
/*トップページ*/
	
/*******************************************************/	
.topshow{
	padding-top: 20px;
}
.etomoji {/*親div*/
	position: relative;/*相対配置*/}

.etomoji img {
	width: 60%;
	display: block;
	margin: 0 auto;}
  
.etomoji p {
	position: absolute;/*絶対配置*/
	color: white;/*文字は白に*/
	font-weight: bold; /*太字に*/
	font-size: 4.5em;/*サイズ2倍*/
	font-family :Quicksand, sans-serif;/*Google Font*/}

.etomoji .vi1 {
	top: 20%;
	left: 10%;}

.etomoji .vi2 {
	top: 20%;
	left: 10%;
	text-align: center;}

.etomoji .vi3 {
	top: 20%;
	left: 10%;
	text-align: center;}
  

.main{
	-webkit-flex: 7;
	flex: 7;
	-webkit-order: 2;
	order: 2;
	margin-left: 2%;}
	
.side{
	-webkit-flex: 3;
	flex: 3;
	-webkit-order: 1;
	order: 1;
	margin-right: 3%;}
	
.main_inner{
	background-color: #ffffff;
	margin-bottom: 50px;
	padding-bottom: 20px;
	box-shadow:  0 0 8px gray;}
	
.top-block{
	text-align: center;
	height: 57px;
	line-height:52px;
	background: #000;/*背景色*/
	border-left: double 15px #9F1E28;/*左線*/
	border-right: double 15px #9F1E28;/*右線*/}
	
.top-h2-1,.top-h2-2{
	font-size: 1.8rem;
	color: #fff;}
	
.main_content{
	padding: 0 3%;
	margin-bottom: 15px;
	padding-top: 5px;}
	
.main_content p{
	width: 90%;
	margin: 10px auto 15px;
	font-size: 1.6rem;
	text-indent: 1.5rem;}
	
h3.top-topics {
	width: 95%;
	margin: 0 auto;
	font-size: 1.6rem;
	text-align: left;
	padding:10px 0 5px;
	border-bottom: solid 3px #B3B3B3;
	position: relative;}
	
h3.top-topics:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #9F1E28;
	bottom: -3px;
	width: 30%;}
	
.topnews li{
	padding: 6px 0;
	margin-left: 5%;}

.topnews li a{
	display: block;}
	
.news-time,.column_cat{
	width: 110px;
	text-align: center;
	float: left;
	padding:1px 5px;
	margin-left: 10px;
	font-size: 1.2rem;
	background-color:#000;
	color:#fff;
	border-radius: 15px;}

.news-title	{
	padding-left: 140px;
	font-size: 1.6em;}
		
h3.top-trainmenu {
	width: 95%;
	margin: 0 auto;
	font-size: 1.6rem;
	text-align: left;
	padding:10px 0 5px;
	border-bottom: solid 3px #B3B3B3;
	position: relative;}
		
h3.top-trainmenu:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #9F1E28;
	bottom: -3px;
	width: 30%;}

.tabs {
	margin-top: 50px;
	padding-bottom: 10px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 90%;
	margin: 0 auto;}
	  
.tab_item {
	width: calc(100%/3);
	height: 50px;
	border-bottom: 3px solid #9F1E28;
	background-color: #000;
	line-height: 50px;
	font-size: 16px;
	text-align: center;
	color: #fff;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;}

.tab_item:hover {
	opacity: 0.75;}
	
input[name="tab_item"] {
	display: none;}
	
.tab_content {
	display: none;
	padding: 5px 5px;
	clear: both;
	overflow: hidden;}
	
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
	display: block;}
	
.tabs input:checked + .tab_item {
	background-color: #9F1E28;
	color: #fff;}	

.top-table{
	width: 95%;
	margin: 5px auto 10px;
	font-size: 1.6rem;}

.top-table th{
	width: 20%;
	border: solid 1px;
	padding:15px;
	background-color: #feedf3;}
	
.top-table td{
	width: 80%;
	border: solid 1px;
	padding:1.6rem;}

/*************************************/
/*サイドバー*/
/*************************************/
.side-merumaga,
.side-menu,.side-cominfo{
	background: #ffffff;
	box-shadow:  0 0 8px gray;
	margin: 0 0 50px 0;}

.merumaga-title{
	text-align:center;
	color: #fff;
	background-color: #000;
	border-bottom: #A11C24 solid 4px;
	padding: 5px 0;}

.merumaga-title p{
	font-size: 1.0rem;}

.merumaga-title h3{
	font-size: 1.8rem;}

.merumaga-inner{
	width: 70%;
	margin: 0 auto;
	padding-top:10px;
	padding-bottom: 10px;}

.merumaga-inner p{
	font-size: 1.5rem;}

.merumaga-button{
	width:70%;
	margin: 0 auto;}

.merumaga-annai{
	margin-top: 10px;
	padding:15px;
	background:#333;
	color:#fff;
	text-align:center;
	font-size: 1.5rem;
	display:block;}

.merumaga-annai:hover{background:#555;}

.menu-title{
	text-align:center;
	color: #fff;
	font-size: 1.8rem;
	background-color: #000;
	border-bottom: #A11C24 solid 4px;
	padding: 10px 0;}

.side-menu li a{
	display: block;
	font-size: 1.5rem;
	padding: 15px 50px;}

.side-menu li a:hover {
	color: #ffffff;
	background: #000000;}

.book-innar img{
	width: 50%;
	margin: 0 auto;
	padding-top: 10px;}

.book-innar p{
	font-size: 1.4rem;
	width: 65%;
	margin: 5px auto;
	padding: 10px 0;}


.cominfo{
	width:90%;
	margin: 0 auto;
	padding-top: 15px;
	padding-bottom: 10px;
	background-color: #fff;
	border-radius: 0 0 10px 10px / 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px / 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px / 0 0 10px 10px;}

.cominfo p{
	font-size: 1.4rem;
	padding: 0 12px;
	margin-bottom:5px;}

.cominfo li{
	font-size: 1.2rem;
	padding-left: 20px;
	margin-bottom:5px;}

/*******************************************************/

/*コラム*/

/*******************************************************/
.colmain,.single-main{
	-webkit-flex: 7;
	flex: 7;
	-webkit-order: 1;
	order: 1;
	margin-right: 4%;}

.colside,.single-side{
	-webkit-flex: 3;
	flex: 3;
	-webkit-order: 2;
	order: 2;
	margin-left: 2%;}

h1.column-titile{
	font-size: 24px;
	text-align: center;
	padding: 8px 10px;
	background-color: #000;
	color: #fff;
	border-bottom: #BE1309 solid 4px;
	box-shadow:  0 0 8px gray;}

.colwrapp{
	background-color: #ffffff;
	padding: 10px 2%;
	margin-bottom: 50px;
	box-shadow:  0 0 8px gray;}



.column-arc{
	display: flex;
	margin: 40px 15px;
	height: 200px;}

.column-thumb{
	-webkit-flex: 4;
	flex: 4;
	padding-right:10px;}

.column-sentence{
	-webkit-flex: 6;
	flex: 6;
	padding-left: 10px;}

.column-span{
	font-size:20px;}

.column-sentence h2{
	display: inline;}

.column-info{
	display: flex;
	padding:5px 1%;
	border-top:2px solid #000;
	font-size: 1.4rem;}

.column-time{
	-webkit-flex: 4;
	flex: 4;}

.column-info p{
	-webkit-flex: 6;
	flex: 6;}

.column-sentence{
	font-size: 1.4rem;
	color: #333;}

.column-cat-modi{
	margin-left: 8px;}

.more	{
	float: right;
	text-align:center;
	width: 80px;
	margin-top: 10px;;
	padding: 3px 4px;
	font-size: 1.3rem;
	background-color: #000;
	color: #fff;
	border-radius: 15px}

/*******************************************************/

/*コラムのサイドバー*/

/*******************************************************/
.column-prof,.column-popular{
	background-color: #fff;}

.colside-inner{
	margin-bottom: 30px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.column-prof-image{
	width: 60%;
	margin: 0 auto;}

.column-prof-name{
	text-align: center;
	font-size: 1.5rem;}

.column-prof-intro{
	padding: 15px 35px;
	font-size: 1.3rem;}

.colside-inner ul {
	margin-left: 48%;
	padding-bottom: 15px;
  }
  
  .colside-inner li {
	font-size: 1.3rem;
	line-height: 25px;
  }
  .colside-inner li i{
	margin-right: 3px;
  }


.column-rank{
	display: flex;
	width: 90%;
	margin: 0 auto;
	padding: 15px 0;
	border-bottom: solid 1px #c0c0c0;}

.colside-thumb{
	-webkit-flex: 3;
	flex: 3;
	-webkit-order: 1;
	order: 1;}

.colside-column-title{
	-webkit-flex: 7;
	flex: 7;
	-webkit-order: 2;
	order: 2;
	font-size: 1.2rem;
	padding: 5px 3%}
/*******************************************************/

/*ページネーション*/

/*******************************************************/
.nav-links{
	text-align: center;
	padding-top: 30px;}

.page-numbers{
	display: inline-block;
	padding: 6px 10px;
	margin: 0 3px;
	background-color: #f2f2f2;}

a.page-numbers:hover{
	background-color: #a58a9b;
	color: #fff;}

.page-numbers.current{
	background-color: #9F1E28;
	color: #fff;}

.screen-reader-text{
	display: none;}

/*******************************************************/

/*固定ページ*/

/*******************************************************/
.page_title{
	text-align: center;
	height: 57px;
	line-height:52px;
	background: #000;/*背景色*/
	border-left: double 15px #9F1E28;/*左線*/
	border-right: double 15px #9F1E28;/*右線*/}

.page_title h1{
	font-size: 2.2rem;
	color: #fff;}

.page_content h2			{
	font-size: 2.0rem;
	width: 90%;
	padding: 0.8em;/*文字周りの余白*/
	margin: 20px auto;
	color: #fff;/*文字色*/
	background: #000;/*背景色*/
	border-bottom: solid 10px #E5AC1D;/*下線*/}

.page_content h3{
	font-size: 1.7rem;
	width: 88%;
	margin: 10px auto;
	padding: 0.5em;/*文字周りの余白*/
	color: #fff;/*文字色*/
	background: #000;/*背景色*/
	border-left: solid 10px #9F1E28;/*左線（実線 太さ 色）*/}

.page_content h4{
	font-size: 1.6rem;
	width: 60%;
	margin-left: 6%;
	padding: 0.3em 0.3em 0.1em 0.3em;/*文字周りの余白*/
	color: #000;/*文字色*/
	border-bottom: solid 3px #9F1E28;/*左線（実線 太さ 色）*/}

.page_content ul {
	font-size: 1.5rem;
	padding: 0.5em 1em 0.5em 2.3em;
	margin-bottom: 20px;
	position: relative;}
	
.page_content ul li {
	line-height: 1.3;
	padding: 0.3em 0;
}
	
.page_content ul li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0da";
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: gray; /*アイコン色*/}
/*******************************************************/

/*投稿ページ*/

/*******************************************************/
.single-ctitle{
	text-align: center;
	padding-top:10px;
	height: 65px;
	background: #000;/*背景色*/
	border-left: double 15px #9F1E28;/*左線*/
	border-right: double 15px #9F1E28;/*右線*/}


.single-title{
	text-align: center;
	padding:10px;
	background: #000;/*背景色*/
	border-left: double 15px #9F1E28;/*左線*/
	border-right: double 15px #9F1E28;/*右線*/}

.single-ctitle p{
	font-size: 1.3rem;
	color: #fff;}

.single-ctitle span{
	font-size: 2.2rem;
	color: #fff;}
		
.single-title h1,.single-ctitle h1{
	display: inline;
	font-size: 2.2rem;
	color: #fff;}

.single-innar{
	width: 85%;
	margin: 0 auto;}

.single_content{
	background-color: #fff;
	margin-bottom: 30px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}

.single_content img{
	margin: 0 auto;}

.single_content h2{
	font-size: 2.0rem;
	padding: 0.8em;/*文字周りの余白*/
	margin: 20px 0;
	color: #fff;/*文字色*/
	background: #000;/*背景色*/
	border-bottom: solid 10px #E5AC1D;/*下線*/
}

.single-innar p{
	font-size: 1.5rem;
	text-indent: 1.5rem;
	margin-bottom: 20px;
}

.single-innar a{
	text-decoration: underline;
	color: #1a0dab;}

.single-innar a:hover{
	color : #9F1E28;}	


.single_content ul {
	font-size: 1.5rem;
	padding: 0.5em 1em 0.5em 2.3em;
	margin-bottom: 20px;
	position: relative;}
	
.single_content ul li {
	line-height: 1.3;
	padding: 0.3em 0;}
	
.single_content ul li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0da";
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: gray; /*アイコン色*/}

.column-single-info{
	font-size: 1.5rem;
	margin-top: 5px;
	padding: 0 1%;
	display: flex;}

.topic-single-info{
	text-align: right;
	font-size: 1.5rem;
	margin: 5px 2% 20px;
}
.column-single-info a{
	text-decoration: none;
	color: #000;}

.column-single-modi{
	margin-left: 20px;}

.maetsugi{
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	padding: 20px 0;
	border-top: solid 2px #ccc;
}

.previ,.next{
	font-size: 1.3rem;
	color: #000;
}
.previ a,.next a{
	text-decoration: none;
	font-size: 1.3rem;
	color: #000;
}

/*******************************************************/

/*パンくず*/

/*******************************************************/
.breadcrumb-inner{
	font-size: 1.5rem;
	padding: 8px 0 8px 10px;
}
.breadcrumb-inner div{
	display: inline;
}

/*******************************************************/

/*ブログカード*/

/*******************************************************/
.blog-card {
	background: #fbfaf8;
	border:1px solid #ddd;
	word-wrap:break-word;
	max-width:100%;
	border-radius:5px;
	margin: 30px;
	/* sp用 ※4 */}

.blog-card:hover {
	background: #fee;}

.blog-card a {
text-decoration: none;}

.blog-card-thumbnail {
	float:left;
	padding:10px;}

.blog-card-thumbnail img {
	display: block;
	padding: 0;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;}

.blog-card-content {
	line-height:120%;}

.blog-card-title {
	color: #333;
	display: block;
	padding:10px;
	font-size: 1.4rem;
	line-height: 1.5em;}

.blog-card-excerpt {
	color:#333;
	margin:0 10px 10px;
	font-size: 1.3rem;
	line-height: 1.5em;}

.blog-card .clear {
	clear: both;}

}
/****************************************************************
			1190px以上
*****************************************************************/
@media (min-width: 1190px) {
#top-wrapper,#wrapper,.header-inner,
.top-slideshow,.breadcrumb-inner{
	max-width: 1190px;}

.header-inner,#wrapper,
.top-slideshow,.breadcrumb-inner{
	margin: 0 auto;}

#top-wrapper{
	margin: 40px auto 0;}
}