@charset "UTF-8";
/**
 * Theme Name: AMPBase
 * Theme URI: http://developers.mediwill.co.jp/wordpress/ampbase/
 * Description: The basic theme compatible with AMP
 * Author: Hidetoshi Fukushima
 * Author URI: http://developers.mediwill.co.jp/
 * Text Domain:	ampbase
 * Version: 1.0.2
 * Tags: right-sidebar, theme-options, blog
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:					0;
	padding:				0;
	border:					0;
	font-size:			100%;
	font:						inherit;
	vertical-align:	baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse:	collapse;
	border-spacing:		0;
}

/**
 * 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 */
}
h1 {
	font-size:				1.3rem;
	padding: 					0 0.5em;
	color: 						#494949;
	background: 			transparent;
	border-left:			solid 0.5rem #81C4F9;
}
h2 {
	font-size:				1.2rem;
	margin:						0.5rem 0;
	padding:					0 0.4rem;
	color: 						#494949;
	background: 			transparent;
	border-left:			solid 0.4rem #81C4F9;
}
h3 {
	font-size:				1.1rem;
	margin:						0.5rem 0;
	padding:					0 0.3rem;
	color: 						#494949;
	background: 			transparent;
	border-left:			solid 0.3rem #81C4F9;
}
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%;
}
/* -------------------------------------
 * 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;
}
.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;
}
#searchsubmit {
	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 1rem;
	width:						auto;
	border:						none;
}
/* Article -------------------------- */
article * {
	max-width:				100%;
}
article p {
	margin:						0.5rem;
}
article .article-meta {
	margin:						0 0.5rem;
}
article table {
	width:						100%;
}
article table th,
article table td {
	padding:					0.25rem 0.5rem;
	border:						1px solid #E0E0E0;
	vertical-align:		middle;
}
/* Article meta --------------------- */
.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>a>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 ----------------------------- */
/* http://memowomome.hatenablog.com/entry/2015/04/30/072807 */
.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 0.8rem 0 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 ----------------------------*/
/* 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:					980px;
		margin:					0 auto;
	}
	main {
		display:				inline-block;
		vertical-align: top;
		width: 					68%;
	}
	nav {
		display:				inline-block;
		vertical-align: top;
		width:					28%;
		height: 				100%;
		margin-left:		1.5rem;
	}
	.body-header .wrap, .body-footer .wrap {
		width:					980px;
		margin:					0.5rem auto;
	}	
	.body-header .top {
		/* text-align: 		left; */
		/* display:				inline-block; */
		/* width:					calc(100% / 2 - 0.8rem); */
		/* margin-left:		0.5rem; */
	}
	.body-footer .top {
		text-align:			center;
	}
	/* -------------------------------------
   * Parts
   * ---------------------------------- */ 
	.body-header .searchform {
		/* text-align: 		right; */
		/* display:				inline-block; */
		/* width:					calc(100% / 2 - 0.8rem); */
		/* margin-right:		0.5rem; */
	}
	/* Pagination */
	.pagination .page-numbers {
		display:				inline-block;
		width: 					1.5rem;
	}
	/* Menu ----------------------------- */
	/*
	.menu-wrap li:nth-child(1), 
	.menu-wrap li:nth-child(2) 
	{
		margin-top:			0.5rem;
	}
	*/
	/* 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 - 1.4rem);
		margin:					0.25rem 0;
	}
	/* Navigation menu */
	.menu-wrap li {
		display:				block;
		width:					calc(100% - 1.1rem);
		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: 					1180px;
	}
}
/* Over 1600px, for 1920x1080 (PC FHD). */
@media screen and (min-width: 1600px) {
	#main-frame, .body-header .wrap, .body-footer .wrap {
		width: 					1580px;
	}
}