/******************************************************************
Theme Name: Exclamテンプレート


MAKE SURE TO READ BELOW BEFORE GETTING STARTED FOR THE FIRST TIME!
------------------------------------------------------------------
|-- 404.php （404エラーページ）
|-- archive-custom_type.php （カスタム投稿一覧ページ）
|-- archive.php （ブログ一覧ページ）
|-- comments.php （コメント）
|-- editor-style.css （エディター用）
|-- favicon.ico （ファビコン）
|-- favicon.png（ファビコン）
|-- footer.php　（フッター）
|-- functions.php （テーマ機能）
|-- header.php （ヘッダー）
|-- index.php　（表紙）
|-- library　（CSS／JS関連ファイルをまとめたフォルダ）
|-- page-custom.php （カスタム固定ページ）
|-- page.php　（固定ページ）
|-- post-formats （投稿フォーマット関連ファイルをまとめたフォルダ）
|-- screenshot.png　（スクリーンショット）
|-- search.php　（検索）
|-- sidebar.php　（サイドバー）
|-- single-custom_type.php （カスタム投稿シングルページ）
|-- single.php　（投稿シングルページ）
|-- style.css （スタイルシート）
|-- taxonomy-custom_cat.php　（カスタム投稿カテゴリーページ）

------------------------------------------------------------------
******************************************************************/

/*
WordPress Probz
So Theme Check (http://wordpress.org/plugins/theme-check/)
is constantly telling me that it needs these classes in the CSS even
though they are in the REAL stylesheet in library/css/style.css.
So we're gonna drop these here to keep it happy.
Great work, Theme Check (eye roll)
*/

/*------------------------------------
サイト初期設定
--------------------------------------*/
#post_not_found {
	text-align:center;
}
#post_not_found .widget {
	max-width:270px;
	margin:30px auto;
}



/*----------------------------------------
$post インフォメーション アーカイブ シングル共通CSS
----------------------------------------*/
#main article {
	margin-bottom:30px;
	padding-bottom:30px;
	border-bottom:1px dotted #ccc;
}
#main .blog_wrap{
	display:flex;
	justify-content:space-between;
}
#main .post_image {
	min-width:200px;
	width:200px;
	height:200px;
	text-align:center;
	margin-right:30px;
}
#main  .post_image a {
	display:block;
	width:100%;
	height:100%;
}
#main .post_image img{
	object-fit:contain;
	height:100%;
	box-shadow: 0 0 7px rgb(0 0 0 / 30%);
}
#main .post_content{
	width:100%;
	position:relative;
	padding-bottom:40px;
}
#main .post_content .title a{
	font-size:24px;
}
#main .post_content .post_meta {
	border-bottom:1px solid #ccc;
	padding:10px 0;
/* 	margin-bottom:10px; */
	display:flex;
	align-items:center;
}
#main .post_content .post_meta .date {
	font-size:14px;
	margin-right:10px;
}
#main .post_content .post_meta .cat_wrap {
	display:flex;
	flex-wrap:wrap;
}
#main .post_content .post_meta .cat_wrap .cat {
	border-radius:3px;
	font-size:12px;
	font-weight:bold;
	color:#fff;
	padding:0 10px 2px;
	line-height:1em;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-right:5px;
	min-height:20px;
}
#main .post_content .post_meta .tag_wrap {
	position:relative;
	top:-2px;
}
#main .post_content .post_meta .tag_wrap .tag {
	font-size:13px;
	font-style:italic;
	margin-right:10px;
	color:#999;
	line-height:1em;
}
#main .post_content .content_text {
	margin-top:10px;
}
#main .post_content .content_text .text {
	font-size:14px;
	line-height:1.7em;
}
#main .post_content .content_text .text a {
	display:inline-block;
	position:absolute;
	right:0;
	bottom:0;
	font-size:12px;
}
#main .post_content .content_text .text a:after {
	content:"\f105";
	font-family:"FontAwesome";
	margin-left:5px;
}
@media screen and (max-width:767px){
	#main article {
    padding-bottom: 10px;
	}
	#main .post_image {
    min-width: 90px;
    width: 90px;
    height: 90px;
    margin-right: 10px;
	}
	#main .post_content {
    padding-bottom: 20px;
	}
	#main .post_content .sp_wrap {
		display:flex;
		align-items:flex-end;
	}
	#main .post_content .sp_content_wrap {
		width:100%;
	}
	#main .post_content .title a {
    font-size: 18px;
	}
	#main .post_content .post_meta {
		flex-wrap:wrap;
		padding:3px 0 0;
		width:100%;
		margin-bottom:0;
	}
	#main .post_content .post_meta .date {
    font-size: 12px;
    margin-bottom: 5px;    	
	}
	#main .post_content .post_meta .cat_wrap .cat {
		font-size:10px;
		min-height: 17px;
	}
	#main .post_content .post_meta .tag_wrap .tag {
    font-size: 10px;
	}
	#main .post_content .post_meta .tag_wrap {
		width:100%;
	}
	#main .post_content .post_meta span {
		margin-bottom:3px;	
	}
	#main .post_content .content_text .text {
    font-size: 12px;
	}
}
/*----------------------------------------
top_news用上書きcss PCのみ min-width:768px
----------------------------------------*/
@media screen and (min-width:768px){
	#main #top_news {
		margin-bottom:100px;
	}
	#main #top_news article {
	  margin-bottom: 20px;
	  padding:10px 10px;
	}
	#main #top_news .post_image {
		min-width: 100px;
	  width: 100px;
	  height: 100px;
	  margin-right: 20px;
	}
	#main #top_news .post_content .title a {
	   font-size: 18px;
	}
	#main #top_news .post_content {
	  padding-bottom: 20px;
	}
	#main #top_news .post_content .post_meta {
		padding: 5px 0 10px;
		border-bottom: 1px solid #eee;
	}
}
/*----------------------------------------
シングルのみCSS
----------------------------------------*/
.single #main .blog_wrap {
	align-items:flex-end;
} 
.single #main .post_content .title {
	font-size:24px;
}
.single #main .post_content {
	padding-bottom:0;
}
.single #main .content_area {
	margin-top:40px;
	margin-bottom:50px;
}
.single #main .content_area p,.single #main .content_area span,.single #main .content_area strong,.single #main .content_area li,.single #main .content_area dt,.single #main .content_area dd,.single #main .content_area h1,.single #main .content_area h2,.single #main .content_area h3,.single #main .content_area h4,.single #main .content_area h5,.single #main .content_area h6 {
	line-height:2em;
	margin-bottom:20px;
}
.single #main .content_area ruby rt {
	font-size:10px;
}
.single #main .blog_wrap h1 {
	
}

.single .navigation {
	width:100%;
	position:relative;	
}
.single .navigation .alignleft {
	position:absolute;
	left:0;
	top:0;
}
.single .navigation .alignright {
	position:absolute;
	right:0;
	top:0;
}
.single .navigation span:before {
	position:relative;
	top:1px;
}






.post-meta{
	padding-top:5px;
	padding-bottom:10px;
	border-bottom: 1px solid #CCC;
	-webkit-box-shadow: 0 1px 0 #FFF;
	-moz-box-shadow: 0 1px 0 #FFF;
	box-shadow: 0 1px 0 #FFF;
}
.footer-post-meta a{
	color:#00a0e9;
}
.post-date,.post-author,.post-category,.comment-num{
	display:inline-block;
}
.post-category a{
	background-color:rgba(0,0,0,0.8);
	display:inline-block;
	padding:5px 5px;
	border-radius:2px;
	color:#FFF;
	margin-right:5px;
	margin-bottom:5px;
	font-size:11px;
}
.post-category a:hover{
	background-color:#CCC;
}
blockquote{
	padding:30px;
	background:url(images/quote.png) no-repeat left top #F4F4F4;
	margin-bottom:30px;
	display:block;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
}

@media screen and (max-width:767px){
	/*-----ブログ　ここから-----*/
	.post-image{
		float:none !important;
		padding:10px !important;
		text-align:center !important;
		width:auto !important;
	}
	.post-content{
		float:none !important;
		margin:0 !important;
		padding:10px !important;
		width:auto !important;
	}
	/*-----ブログ　ここまで-----*/
}

/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block; }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.image-replacement,
.ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }


/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
  font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
  font-style: italic; }

.alert-help, .alert-info, .alert-error, .alert-success {
  margin: 10px;
  padding: 5px 18px;
  border: 1px solid; }

.alert-help {
  border-color: #e8dc59;
  background: #ebe16f; }

.alert-info {
  border-color: #bfe4f4;
  background: #d5edf8; }

.alert-error {
  border-color: #f8cdce;
  background: #fbe3e4; }

.alert-success {
  border-color: #deeaae;
  background: #e6efc2; }

.blue-btn, .comment-reply-link, #submit {
  display: inline-block;
  position: relative;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: white;
  font-size: 0.9em;
  font-size: 34px;
  line-height: 34px;
  font-weight: normal;
  padding: 0 24px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  -webkit-transition: background-color 0.14s ease-in-out;
  transition: background-color 0.14s ease-in-out; }
  .blue-btn:hover, .comment-reply-link:hover, #submit:hover, .blue-btn:focus, .comment-reply-link:focus, #submit:focus {
    color: white;
    text-decoration: none; }
  .blue-btn:active, .comment-reply-link:active, #submit:active {
    top: 1px; }

/*
An example button.
You can use this example if you want. Just replace all the variables
and it will create a button dependant on those variables.
*/
.blue-btn, .comment-reply-link, #submit {
  background-color: #2980b9; }
  .blue-btn:hover, .comment-reply-link:hover, #submit:hover, .blue-btn:focus, .comment-reply-link:focus, #submit:focus {
    background-color: #2574a8; }
  .blue-btn:active, .comment-reply-link:active, #submit:active {
    background-color: #2472a4; }

/*********************
INPUTS
*********************/

/*********************
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Base Mobile Stylesheet

Be light and don't over style since everything here will be
loaded by mobile devices. You want to keep it as minimal as
possible. This is called at the top of the main stylsheet
and will be used across all viewports.

******************************************************************/
/*********************
GENERAL STYLES
*********************/



/*********************
POSTS & CONTENT STYLES
*********************/

/* end .hentry */
.single-title,
.page-title,
.entry-title {
  margin: 0; }

/* want to style individual post classes? Booya! */
/* post by id (i.e. post-3) */
/* general post style */
/* general article on a page style */
/* general style on an attatchment */
/* sticky post style */
/* hentry class */
/* style by category (i.e. category-videos) */
/* style by tag (i.e. tag-news) */
/* post meta */
.byline {
  color: #9fa6b4;
  font-style: italic;
  margin: 0; }

/* entry content */
.entry-content {
  padding: 1.5em 1.5em 0;
  /*
  image alignment on a screen this size may be
  a bit difficult. It's set to start aligning
  and floating images at the next breakpoint,
  but it's up to you. Feel free to change it up.
  */ }
  .entry-content p {
    margin: 0 0 1.5em; }
  .entry-content table {
    width: 100%;
    border: 1px solid #eaedf2;
    margin-bottom: 1.5em; }
    .entry-content table caption {
      margin: 0 0 7px;
      font-size: 0.75em;
      color: #9fa6b4;
      text-transform: uppercase;
      letter-spacing: 1px; }
  .entry-content tr {
    border-bottom: 1px solid #eaedf2; }
    .entry-content tr:nth-child(even) {
      background-color: #f8f9fa; }
  .entry-content td {
    padding: 7px;
    border-right: 1px solid #eaedf2; }
    /*.entry-content td:last-child {
      border-right: 0; }*/
  .entry-content th {
    background-color: #f8f9fa;
    border-bottom: 1px solid #eaedf2;
    border-right: 1px solid #eaedf2; }
    .entry-content th:last-child {
      border-right: 0; }
  .entry-content blockquote {
    margin: 0 0 1.5em 0.75em;
    padding: 0 0 0 0.75em;
    border-left: 3px solid #2980b9;
    font-style: italic;
    color: #9fa6b4; }
  .entry-content dd {
    margin-left: 0;
    font-size: 0.9em;
    color: #787878;
    margin-bottom: 1.5em; }
  .entry-content img {
    margin: 0 0 1.5em 0;
    max-width: 100%;
    height: auto; }
  .entry-content .size-auto,
  .entry-content .size-full,
  .entry-content .size-large,
  .entry-content .size-medium,
  .entry-content .size-thumbnail {
    max-width: 100%;
    height: auto; }
  .entry-content pre {
    background: #323944;
    color: #f8f9fa;
    font-size: 0.9em;
    padding: 1.5em;
    margin: 0 0 1.5em;
    border-radius: 3px; }

/* end .entry-content */
.wp-caption {
  max-width: 100%;
  background: #eee;
  padding: 5px;
  /* images inside wp-caption */ }
  .wp-caption img {
    max-width: 100%;
    margin-bottom: 0;
    width: 100%; }
  .wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: center; }

/* end .wp-caption */
/* image gallery styles */
/* end .gallery */
/* gallery caption styles */
.tags {
  margin: 0; }

/******************************************************************
PAGE NAVI STYLES
******************************************************************/
/*	ページャー  */
.pagination {
  display: flex;
  overflow: hidden;
  margin: 50px auto 0;
  justify-content: center;
  text-align:center;
}
.pagination li {
	display:inline-block;
	padding:0 3px;
}
.pagination ul .page-numbers {
	background:#023f98;
	color:#fff;
	border:1px solid #023f98;
	display:flex;
	justify-content:center;
	align-items:center;
	width:40px;
	height:40px;
	font-size:14px;
}
.pagination ul .page-numbers.current:hover {
	opacity:1;
}
.pagination ul .page-numbers:hover {
	opacity:0.6;
}
.pagination .current {
	background:#fff !important;
	color:#023f98 !important;
}
@media screen and (max-width:767px){
/* 	.pagination li {
		display:inline-block;
		padding:0 2px;
		margin-bottom:10px;
	}
	.pagination ul .page-numbers {
		padding: 5px 10px;
		background:#fff;
		border:1px solid #d2d2d2;
		display:block;
		font-size:13px;
	} */
}
/* end .wp-prev-next */
/******************************************************************
COMMENT STYLES
******************************************************************/
/* h3 comment title */
#comments-title {
  padding: 0.75em;
  margin: 0;
  border-top: 1px solid #f8f9fa;
  /* number of comments span */ }

.commentlist {
  margin: 0;
  list-style-type: none; }

.comment {
  position: relative;
  clear: both;
  overflow: hidden;
  padding: 1.5em;
  border-bottom: 1px solid #f8f9fa;
  /* vcard */
  /* end .commentlist .vcard */
  /* end children */
  /* general comment classes */ }
  .comment .comment-author {
    padding: 7px;
    border: 0; }
  .comment .vcard {
    margin-left: 50px; }
    .comment .vcard cite.fn {
      font-weight: 700;
      font-style: normal; }
    .comment .vcard time {
      display: block;
      font-size: 0.9em;
      font-style: italic; }
      .comment .vcard time a {
        color: #9fa6b4;
        text-decoration: none; }
        .comment .vcard time a:hover {
          text-decoration: underline; }
    .comment .vcard .avatar {
      position: absolute;
      left: 16px;
      border-radius: 50%; }
  .comment:last-child {
    margin-bottom: 0; }
  .comment .children {
    margin: 0;
    /* variations */
    /* change number for different depth */ }
  .comment[class*=depth-] {
    margin-top: 1.1em; }
  .comment.depth-1 {
    margin-left: 0;
    margin-top: 0; }
  .comment:not(.depth-1) {
    margin-top: 0;
    margin-left: 7px;
    padding: 7px; }
  .comment.odd {
    background-color: white; }
  .comment.even {
    background: #f8f9fa; }

/* comment meta */
/* comment content */
.comment_content p {
  margin: 0.7335em 0 1.5em;
  font-size: 1em;
  line-height: 1.5em; }

/* end .commentlist .comment_content */
/* comment reply link */
.comment-reply-link {
  font-size: 0.9em;
  float: right; }

/* end .commentlist .comment-reply-link */
/* edit comment link */
.comment-edit-link {
  font-style: italic;
  margin: 0 7px;
  text-decoration: none;
  font-size: 0.9em; }

/******************************************************************
COMMENT FORM STYLES
******************************************************************/
.comment-respond {
  padding: 1.5em;
  border-top: 1px solid #f8f9fa; }

#reply-title {
  margin: 0; }

.logged-in-as {
  color: #9fa6b4;
  font-style: italic;
  margin: 0; }
  .logged-in-as a {
    color: #5c6b80; }

.comment-form-comment {
  margin: 1.5em 0 0.75em; }

.form-allowed-tags {
  padding: 1.5em;
  background-color: #f8f9fa;
  font-size: 0.9em; }

/* comment submit button */
#submit {
  float: right;
  font-size: 1em; }

/* comment form title */
#comment-form-title {
  margin: 0 0 1.1em; }

/* cancel comment reply link */
/* logged in comments */
/* allowed tags */
#allowed_tags {
  margin: 1.5em 10px 0.7335em 0; }

/* no comments */
.nocomments {
  margin: 0 20px 1.1em; }

/*********************
SIDEBARS & ASIDES
*********************/


.no-widgets {
  background-color: white;
  padding: 1.5em;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 2px;
  margin-bottom: 1.5em; }

/*********************
FOOTER STYLES
*********************/



.sticky {}          /* DO NOT EDIT THIS */
.gallery-caption {} /* THESE ARE USELESS */
.bypostauthor {}    /* THEY ARE ONLY TO KEEP THEME CHECK HAPPY */