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

          599px以下

*****************************************************************/
@media (max-width: 599px) {

}
/****************************************************************

          768px以下

*****************************************************************/
@media (max-width: 768px) {
/*******************************************************/

/*レイアウト*/

/*******************************************************/
#top-wrapper{
        width: 95%;
        margin: 30px auto;}

#wrapper{
        width: 95%;
        margin: 0 auto;
        background-color: #fff;
}
.br::before {
        content: "\A" ;
        white-space: pre ;}

aside.side{
        display: none;
}
/*******************************************************/

/*ヘッダー*/

/*******************************************************/
header  {
        height: 80px;
}
.sitetitle img{
        padding-top: 18px;
        width: 10%;
        margin: 0 5px;
        float: left;}

.sitetitle h1 a,.sitetitle span a	{
        float: left;
        color: #fff;
        margin-left:5px;
        font-size:1.3rem;
        padding-top: 30px;
        letter-spacing: 1px;
        font-family:'メイリオ';
        font-weight: bold;}

.sitetitle{
        clear: both;}
.adress{display: none;}


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

/*ナビゲーション*/

/*******************************************************/
.mainmenu{
        display:none;}
.nav-drawer {
        position: relative;}
      
/*チェックボックス等は非表示に*/
.nav-unshown {
        display:none;}
      
/*アイコンのスペース*/
#nav-open {
        position: absolute;
        top: 30px;
        right: 10px;
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;}
      
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
        position: absolute;
        height: 3px;/*線の太さ*/
        width: 25px;/*長さ*/
        border-radius: 3px;
        background: #555;
        display: block;
        content: '';
        cursor: pointer;}

#nav-open span:before {
        bottom: -8px;}

#nav-open span:after {
        bottom: -16px;}
      
/*閉じる用の薄黒カバー*/
#nav-close {
        display: none;/*はじめは隠しておく*/
        position: fixed;
        z-index: 99;
        top: 0;/*全体に広がるように*/
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;}
      
/*中身*/
#nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;/*最前面に*/
        width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 330px;/*最大幅（調整してください）*/
        height: 100%;
        background: #fff;/*背景色*/
        transition: .3s ease-in-out;/*滑らかに表示*/
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);/*左に隠しておく*/}
      
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
        display: block;/*カバーを表示*/
        opacity: .5;}
      
#nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);/*中身を表示（右へスライド）*/
        box-shadow: 6px 0 25px rgba(0,0,0,.15);}


.sp-com{
        background-color: #fff;
        color: #000;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 10px;
        margin-bottom: 10px;}

.sp-com img{
        max-width: 20%;
        margin: 0 auto;
}
.com{
        font-size: 1.4rem;
        margin-bottom: 10px;}

.tel,.place{
        font-size: 1.2rem;
        margin-bottom: 5px;
}
.tel a{
        color: #fff;
}

.spmenu{
        text-align: center;
        height: 40px;
        background: #fff;/*背景色*/
        border-left: double 15px #A5CEE6;/*左線*/
        border-right: double 15px #A5CEE6;/*右線*/
        margin-top: 20px;}


.spmenu-title{
        font-size: 1.4rem;
        line-height: 40px;
        color: #fff;
        text-align:center;}

.spmenu-ul{
        margin-bottom: 20px;}

.spmenu-content{
        padding: 0 3%;
        margin: 0 2% 15px;
        padding-top: 5px;
        text-align:center;
        background-color: #fff;}

.spmenu-ul ul{
        width: 95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;}


.spmenu-ul li{
        -webkit-flex: 1;
        flex: 1;
        text-align: center;
        font-size: 1.3rem;
        padding:15px 0;
        border-bottom: dotted 1px #333;}

.spmenu-ul li:first-child{
        border-right: dotted 1px #333;}

.sp-merumaga{
        display: flex;
        width: 95%;
        margin: 10px auto;
}
.sp-merumaga-button{
        -webkit-flex: 1;
        flex: 1;}

.button-it{
        background-color: #000;
        width: 70%;
        text-align: center;
        padding:15px 5px;
        margin: 3px auto 0;
        border: solid 1px #9F1E28;}

.button-it a{
        color:#fff;
        font-size: 1.3rem;}


.sp-merumaga-annai{
        -webkit-flex: 2;
        flex: 2;}

.sp-merumaga-title{
        font-size: 1.4rem;
        text-align: center;}

.sp-merumaga-expla{
        width: 85%;
        margin: 0 auto;
        font-size: 1.2rem;}

.sp-book{
        display: flex;
        width: 90%;
        margin: 10px auto;}

.sp-book-image{
        -webkit-flex: 1;
        flex: 1;}

.sp-book-annai{
        -webkit-flex: 2.5;
        flex: 2.5;}

.sp-book-title{
        width: 80%;
        margin: 0 auto;
        font-size: 1.4rem;}

/*******************************************************/
	
/*フッター*/
	
/*******************************************************/
footer {padding-top: 20px;}
	
footer,footer a {
	color: #fff;
	font-size: 1.2rem;}
	
.logo-foot{
        width: 10%;
	margin: 0 auto;}

.company-foot{
        padding-top: 10px;
        text-align: center;}

.footmenu{
	-webkit-flex: 1;
	flex: 1;}

.footmenu ul{
	display: flex;
	justify-content: space-around;
	width: 90%;
	margin: 30px auto 0;}
        
.foot-contact{
        display: none;}

.copyright{
	text-align:center;
        padding:20px 0;
        padding-bottom: 70px;}
	
#fixedTop{
	padding: 15px 20px;
	right: 15px;
	bottom: 15px;
	color: #fff;
	text-align: center;
	display: none;
	background: #000;
	position: fixed;
	z-index: 99;
	border: solid 2px #9F1E28;}
/*******************************************************/

/*トップページ*/

/*******************************************************/
.topshow{
	padding-top: 20px;
}
.etomoji {/*親div*/
	position: relative;/*相対配置*/}

.etomoji img {
	width: 100%;}
  
.etomoji p {
	position: absolute;/*絶対配置*/
	color: white;/*文字は白に*/
	font-weight: bold; /*太字に*/
	font-size: 1.4em;/*サイズ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{
        margin-bottom: 50px;
        padding-bottom: 30px;
        background-color: #fff;}

.top-block{
        text-align: center;
        height: 60px;
        background: #000;/*背景色*/
        border-left: double 15px #9F1E28;/*左線*/
        border-right: double 15px #9F1E28;/*右線*/
}
.top-h2-1{
        font-size: 1.6rem;
        color: #fff;
        padding-top:5px;
        text-align:center;}

.top-h2-2{
        font-size: 1.6rem;
        line-height: 60px;
        color: #fff;
        text-align:center;
        margin-top: 30px;}

.main_content {
        width: 94%;
        margin: 0 auto;
        padding:0 10px}

.main_content p{
        font-size: 1.3rem;
        text-indent: 1.5rem;
        margin-top: 10px;}

h3.top-topics {
	font-size: 1.6rem;
	text-align: left;
	padding:15px 0 5px;
	border-bottom: solid 3px #B3B3B3;
        position: relative;
        margin-bottom: 5px;}
	
h3.top-topics:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #9F1E28;
	bottom: -3px;
	width: 30%;}

.topnews{
        width: 90%;
        margin: 0 auto;}

.news-time,.column_cat{
        padding:3px 3px;
        font-size: 1.1rem;
        background-color:#000;
        border-left: double 5px #9F1E28;/*左線*/
        border-right: double 5px #9F1E28;/*右線*/
        color:#fff;}

.news-title {
        margin-top: 2px;
        margin-bottom: 5px;}

.news-title a{
        font-size: 1.3rem;}

.p-last{
        margin-bottom: 20px;}

        
/*タブ切り替え全体のスタイル*/
.tabs {
        margin-top: 20px;
	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;
        padding-top: 10px;
	border-bottom: 3px solid #9F1E28;
	background-color: #000;
	font-size: 1.3rem;
	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;
	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: 10px auto 10px;
	font-size: 1.3rem;}

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



/*************************************/
/*サイドバー*/
/*************************************/
.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: #9F1E28 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: #9F1E28 solid 4px;
	padding: 10px 0;}

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

.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;}
        


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

/*コラム一覧*/

/*******************************************************/
h1.column-titile{
	font-size: 2.1rem;
	text-align: center;
	padding: 8px 10px;
	background-color: #000;
	color: #fff;
	border-bottom: #9F1E28 solid 4px;
	box-shadow:  0 0 8px gray;}

.column-arc{
        width: 90%;
        margin: 20px auto;
        box-shadow:  0 0 8px gray;}

.column-arc img{
        max-width: 95%;
        margin: 0 auto;
        padding: 10px 0;}

.column-sentence{
        width: 95%;
        margin: 0 auto;
        padding-bottom: 15px;}

.column-span{
        font-size:1.3rem;}

.column-sentence h2{
        display: inline;}

.column-excerpt{
        display: none;
}

.column-span{
        font-size: 1.6rem;
}
.column-info{
        display: flex;
        justify-content:space-between;
        padding: 5px 0 10px;
        font-size: 1.0rem;}

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

.more{
        font-size: 1.2rem;
        text-align: center;
        padding:5px 15px;
        background-color: #000;
        color: #fff;
        border: #9F1E28 solid 2px;
        width: 30%;
        margin: 0 auto;
        border-radius: 10px; 
}

.more a{
        font-size: 1.2rem;
        text-align: center;
        color: #fff; 
}
/*******************************************************/

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

/*******************************************************/
.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: 50%;
	margin: 0 auto;}

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

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

.colside-inner ul {
        width: 38%;
	margin: 0 auto;
	padding-bottom: 15px;
  }
  
  .colside-inner li {
	font-size: 1.3rem;
	margin-bottom: 10px;
  }
  .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%}
/*******************************************************/

/*投稿ページ*/

/*******************************************************/
.single-ctitle{
	padding:6px 16px 0;
	height: 65px;
	background: #000;/*背景色*/
	border-left: double 15px #9F1E28;/*左線*/
	border-right: double 15px #9F1E28;/*右線*/}

.single-title{
	font-size: 2.1rem;
	padding: 8px 18px;
	background-color: #000;
	color: #fff;
	border-bottom: #BE1309 solid 4px;
        box-shadow:  0 0 8px gray;}
 
.single-ctitle p{
	text-align: center;
        font-size: 1.0rem;
        color: #fff;}

.single-ctitle span{
        font-size: 1.4rem;
        color: #fff;}

.single-title p{
        font-size: 1.1rem;
        text-align: center;}

.single-title h1,.single-ctitle h1{
        display: inline;}


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

.single_content{
        background-color: #fff;}

.single_content img{
        margin: 0 auto;}

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

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

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

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

.single_content ul {
        font-size: 1.3rem;
        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: 0.9rem;
        margin-top: 5px;
        padding: 0 1%;
        display: flex;
        justify-content:space-between;}

.column-single-info a{
        text-decoration: none;
        color: #000;}

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

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

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

/*******************************************************/
.nav-links{
	text-align: center;
        padding-top: 5px;
        margin-bottom: 40px;}

.page-numbers{
	display: inline-block;
	padding: 5px 8px;
	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;}
        
/*******************************************************/

/*パンくず*/

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

/*終了サイン*/
}