/* WordPress recommend */
.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 				100%;
	height: 					auto;
}
/**
 * Media Queries Breakpoint
 */
/* =============================================================================
 * Under 320px. 320x568, iPhone 5, iPhone SE, etc.
 * ========================================================================== */
/* -------------------------------------
 * Basic 
 *----------------------------------- */
a {
	text-decoration:	none;
}
a:visited {
	color:						#7B1FA2;	/* Purple */
}
a:link 		{
	color:						#1976D2;	/* Blue */
}
a:hover 	{
	color:						#0097A7;	/* Cyan */
}
a:active 	{
	color:						#388E3C;	/* Green */
}
hr {
	display:					block;
	width:						100%;
	height:						1px;
	background-color:	#E0E0E0;
	color:						#E0E0E0;
	border:						0;
	margin: 					0;
}
img {
	display: 					block;
	margin: 					auto;
	/* width:						auto; */
	height:						auto;
	max-width: 				100%;
	max-height: 			100%;
}
iframe {
	display:					block;
	margin:						auto;
}
textarea {
	max-width:				90%;
}
/* -------------------------------------
 * Layout
 * ---------------------------------- */
body {
	color:						#333333;
	line-height:			1.5;
}
.wrap {
	margin:						0.5rem;
}
.body-footer {
	margin: 					0 auto;
}
/* -------------------------------------
 * Parts
 * ---------------------------------- */
.top {
	text-align:				center;
	vertical-align: 	middle;
	margin:						0.25rem;
}
.body-header .main-menu-title {
	display: 					none;
}
/* Searchform ----------------------- */
.searchform {
	margin:						0.25rem 0;
	text-align:				center;
	vertical-align: 	middle;
}
.searchform input{
	text-align:				left;
	vertical-align: 	middle;
	font-size:				1rem;
	padding: 					0.25rem;
	border-radius:		0.25rem;
}
.searchform .searchbutton {
	margin-left:			0.25rem;
	padding:					0.1rem 1rem;
}
/* Pagination ----------------------- */
.pagination {
	text-align: 			center;
}
.pagination span,
.pagination a {
	text-align:				center;
	display:					inline-block;
	vertical-align:		middle;
	padding:					0.25rem;
	height:						1.5rem;
	width:						1.5rem;
	border:						1px solid #E0E0E0; /* Grey */
	border-radius:		0.25rem;
}
.pagination .dots {
	border: 					none;
}
.pagination .current {
	border: 					none;
}
.pagination .page-numbers {
	display:					none;
}
.pagination .current, .pagination .prev, .pagination .next {
	display: 					inline-block;
	width: 						calc(100% / 3 - 0.9rem);
}
/* Menu ----------------------------- */
.menu-wrap li {
	text-align: 			center;
	vertical-align: 	middle;
	display:					inline-block;
	margin:						0.25rem 0;
	padding:					0.25rem 0.5rem;
	overflow:					hidden;
	white-space:			nowrap;
	text-overflow:		ellipsis;
	border:						1px solid #E0E0E0;	/* Grey */
	border-radius:		0.25rem;
}
.menu-wrap li {
	width:						calc(100% / 2 - 1.4rem);
}
#menu-special-menu li {
	text-align:				left;
	width:						calc(100% - 1.4rem);
}
.footer-menu {
	text-align: 			center;
}
.footer-menu li {
	margin:						0.25rem 1rem 0.25rem 1rem;
	padding:					0;
	width:						auto;
	border:						none;
}
/* Comment -------------------------- */
li.comment {
	margin:						0.5rem;
	list-style-type:	none;
}
li.comment img {
	margin:						0.5rem;
}
.comment-respond h3,
.comment-respond p {
	margin:						0.5rem;
}
p.comment-form-comment label {
	vertical-align:		top;
}
/* Article -------------------------- */
article * {
	max-width:				100%;
}
article p {
	margin:						0.5rem;
}
article ul {
	margin: 					0.5rem;
}
/* Articel h */
article h1,
article h2, 
article h3, 
article h4, 
article h5, 
article h6 {
	margin: 					0.5rem;
	color: 						#494949;
	background: 			transparent;
}
article h1 {
	font-size:				1.6rem;
	padding: 					0 0.8rem;
	background: 			transparent;
	border-left:			solid 0.8rem #81C4F9;
}
article h2 {
	font-size:				1.5rem;
	padding:					0 0.7rem;
	border-left:			solid 0.7rem #81C4F9;
}
article h3 {
	font-size:				1.4rem;
	padding:					0 0.6rem;
	border-left:			solid 0.6rem #81C4F9;
}
article h4 {
	font-size:				1.3rem;
	padding:					0 0.5rem;
	border-left:			solid 0.5rem #81C4F9;
}
article h5 {
	font-size:				1.2rem;
	padding:					0 0.4rem;
	border-left:			solid 0.4rem #81C4F9;
}
article h6 {
	font-size:				1.1rem;
	padding:					0 0.3rem;
	border-left:			solid 0.3rem #81C4F9;
}
/* Article table --------------------- */
article table {
	margin: 					0.5rem auto;
	width:						calc(100% - 1rem);
}
article table th,
article table td {
	padding:					0.25rem 0.25rem;
	border:						1px solid #E0E0E0;
	vertical-align:		middle;
}
article table td.thumbnail {
	width:						76px;
	height:						76px;
	padding:					0;
}
article table td p {
	margin:						0;
}
article table td .article-meta {
	text-align:				right;
	font-size:				0.8rem;
}
/* Article meta --------------------- */
article header .article-meta {
	margin:						0 0.5rem;
}
.article-meta {
	text-align:				right;
	font-size: 				0.8rem;
}
.date 			{
	display:					inline-block;
}
.views {
	display:					inline-block;
	margin-left: 			0.5rem;
}
/* Article list --------------------- */
.thumbnail-culumn {
	display:					inline-block;
	vertical-align:		middle;
	width: 						75px;
	height: 					75px;
}
.title-culumn {
	width: 						calc(100% - 75px - 1.5rem);
	line-height:			1;
	display:					inline-block;
	vertical-align:		middle;
	padding-left:			0.5rem;
}
.article-title {
	margin: 					0.5rem 0;
	overflow:					hidden;
	white-space:			nowrap;
	text-overflow:		ellipsis;
}
.article-list>li {
	border-top:				1px solid #E0E0E0; /* Grey */
}
.thumbnail-culumn {
	border-right:			1px solid #E0E0E0; /* Grey */
} 
/* Breadcrumb ----------------------- */
.breadcrumb-icon {
	margin-right: 		0.5rem;
}
.breadcrumb-separater {
	margin: 					0 0.5rem;
}
/* Tag ----------------------------- */
.tag-wrap a {
    position:				relative;
    display:				inline-block;
    width:					auto;
    height:					1.6rem;
    line-height:		1.6rem;
		font-size:			0.9rem;
    color:					#fff;
    background: 		#2196F3;			/* blue */
    margin: 				0.4rem 0.8rem 0.4rem 0;
    padding: 				0 0.25rem;
		border-radius:	0 0.1rem 0.1rem 0;
    left: 					1rem;
    white-space: 		nowrap;
    transition: 		200ms background-color;
}
.tag-wrap a::before {
    content: 				"";
    position:	 			absolute;
    display: 				block;
    width: 					0;
    height: 				0;
    margin: 				0;
    padding: 				0;
    top: 						0;
    left: 					-0.8rem;
    border-top   : 	solid 0.8rem transparent;
    border-right : 	solid 0.8rem #2196F3;		/* blue */
    border-bottom: 	solid 0.8rem transparent;
    border-left  : 	0;
    transition: 		200ms border-right-color;
}
.tag-wrap a:hover {
  background: 			#0097A7;
}
.tag-wrap a:hover::before {
  border-right-color: #0097A7;
}
/* others ----------------------------*/
.custom-html-widget {
	margin-bottom:		0.5rem;
}
/* Wordpress required */
.wp-caption {
}
.wp-caption-text {
	text-align:				center;
	font-size:				0.8rem;
}
.sticky {
}
.screen-reader-text {
}
.bypostauthor {
}
.alignright {
	text-align:				right;
}
.alignleft {
	text-align:				left;
}
.aligncenter {
	text-align:				center;
}
.gallery-caption {
}
/* Over 360px, for 360x640 (Galaxy S5). */
@media screen and (min-width: 360px) {
}
/* Over 375px, for 375x667 (iPhone 6, 7). */
@media screen and (min-width: 375px) {
}
/* Over 414px, for 414x736 (iPhone 6 Plus, 7 Plus). */
@media screen and (min-width: 414px) {
}
/* Over 768px, for 768x1024 (iPad vertical). */
@media screen and (min-width: 768px) {
}
/* ========================================================================== */
/* Over 1000px, for 1024x768 (iPad horizontal).																*/
/* ========================================================================== */
@media screen and (min-width: 1000px) {
	/* -------------------------------------
	 * Layout
   * ---------------------------------- */
	.sp {
		display: 				none;
	}	
	#main-frame {
		width:					990px;
		margin:					0 auto;
	}
	main {
		display:				inline-block;
		vertical-align: top;
		width: 					calc(100% - 346px - 24px - 10px);
	}
	nav {
		display:				inline-block;
		vertical-align: top;
		width:					346px;
		height: 				100%;
		margin-left:		24px;
	}
	.body-header .wrap, .body-footer .wrap {
		width:					990px;
		margin:					0.5rem auto;
	}	
	/* -------------------------------------
   * Parts
   * ---------------------------------- */ 
	/* Pagination */
	.pagination .page-numbers {
		display:				inline-block;
		width: 					1.5rem;
	}
	/* Menu ----------------------------- */
	/* Main menu */
	.body-header .menu-wrap .main-menu li,
	.body-footer .menu-wrap .main-menu li {
		text-align:			center;
		display:				inline-block;
		width: 					calc(100% / 4 - 24px);
		margin:					0.25rem 0;
	}
	/* Navigation menu */
	.menu-wrap li {
		display:				block;
		width:					calc(100% - 1.2rem);
		text-align:			left;
		margin:					0.5rem;
	}
	nav .menu-wrap li {
		border:					none;
		margin:					0;
	}
	/* Footer menu */
	.body-footer .footer-menu li {
		display:				inline-block;
		width:					auto;
	} 
}
/* Over 1200px, for 1366x768 (PC WXGA). */
@media screen and (min-width: 1200px) {
	#main-frame, .body-header .wrap, .body-footer .wrap {
		width: 					1190px;
	}
}
/* Over 1600px, for 1920x1080 (PC FHD). */
@media screen and (min-width: 1600px) {
}