@charset utf-8;

/** ===============================================================================================


	Wordpressテンプレート用CSS)

	@author  K.Sekioka of HEVIZ Co.,Ltd.


	1. .post           記事・固定ページ共通
	2. .post.tile      記事一覧表示用
	3. .post.single    記事詳細
	4. .post.page      固定ページ
	5. .posts.archive  記事一覧ページ


=================================================================================================== **/

:root {
	
	--text-color: #231815;
	--text-link-color: inherit;
	--text-hover-color: #cc0000;
	
	/* ボタン系のカラー */
	--button-text-color: #231815;
	--button-background-color: #e0e0e0;

	--button-hover-text-color: #ffffff;
	--button-hover-background-color: #cc0000;
	
	--button-select-text-color: #ffffff;
	--button-select-background-color: #444444;
}




/** ===========================================================================


	記事一覧 .posts
	記事詳細 .post

	記事一覧用パーツ  .postsXxx
	記事詳細用パーツ  .postXxx


=============================================================================== **/


.post,
.posts {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.posts::after.
.post::after { content:"."; display:block; width:0; height:0; clear:both; visibility:hidden; overflow:hidden; }

.postInner,
.posstInner {
	box-sizing: border-box;
}


/* ヘッダー */
.postHeader,
.postsHeader {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postHeaderInner,
.postsHeaderInner {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}



/* 中心部分    */
.postMain,
.postsMain {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postMainInner,
.postsMainInner {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}


/* フッター部分 */
.postFooter,
.postsFooter {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postFooterInner,
.postsFooterInner {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}


/* 横並びにする可能性(主に.post.tileで使用) */
.postCols,
.postsCols {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postCol {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


/* 画像 (.post.tileのみ使用) */
.postImage {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.postImage img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
	transform: translate( -50%, -50% );
	transition: all 0.5s;
}

.postImage a:hover img {
	width: 110%;
	height: 110%;
}


/* 日付 */
.postDate {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: smaller;
}

/* タイトル */
.postTitle,
.postsTitle {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 30px;
	font-weight: 700;
}
.postTitle a:link,
.postTitle a:visited,
.postTitles a:link,
.postTitles a:visited {
	color: inherit;
}

/* カテゴリー一覧 */
.postCategories {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: smaller;
}

.postCategories ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
}

.postCategories li {
	display: block;
	position: relative;
	margin: 2px 2px 0 0;
	padding: 0;
	box-sizing: border-box;
}

.postCategories a {
	display: block;
	margin: 0;
	padding: 0 15px;
	box-sizing: border-box;
	transition: all 0.3s;
}
.postCategories a:link,
.postCategories a:visited {
	color: var(--button-text-color);
	background-color: var(--button-background-color);
}
.postCategories a:hover,
.postCategories a:active {
	color: var(--button-hover-text-color);
	background-color: var(--button-hover-background-color);
}


/* ハッシュタグ */
.postTags {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: smaller;
}

.postTags ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.postTags li {
	display: inline-block;
	margin: 0 1em 0 0;
	padding: 0;
}

.postTags a {
	text-decoration: none;
	transition: all 0.3s;
}
.postTags a::before {
	content: "#";
}
.postTags a:link,
.postTags a:visited { color: inherit; }
.postTags a:hover,
.postTags a:active { color: var(--text-hover-color); }



/* 簡単な説明 */
.postExcerpt,
.postsExcerpt {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.postExcerpt::after,
.postsExcerpt::after {
	content: "";
	display: block;
	clear: both;
}


/* 詳細な説明 */
.postContent,
.postsContent {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.postContent::after,
.postsContent::after {
	content: "";
	display: block;
	clear: both;
}


/* 詳細はこちらボタン */
.postMore {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postMore a {
	display: block;
	position: relative;
	margin: 0 10px;
	padding: 20px;
	box-sizing: border-box;
		
	background-color: var(--button-background-color);
	color: var(--button-text-color);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	
	transition: all 0.3s;
}

.postMore a:link,
.postMore a:visited {
	background-color: var(--button-background-color);
	color: var(--button-text-color);
}
.postMore a:hover,
.postMore a:active {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
}


/* 次ページへのリンクボタン */
.postNext {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postNext a {
	display: block;
	position: relative;
	margin: 0 10px;
	padding: 10px 100px;
	box-sizing: border-box;
	
	text-decoration: none;
	text-align: center;
}
.postNext a::after {
	content: "";
	display: block;
	position: absolute;
	right: 20px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--button-text-color);
	border-bottom: 0;
	border-left: 0;
	transform: translateY(-50%) rotate(45deg);
}
.postNext a:link,
.postNext a:visited {
	color: var(--button-text-color);
	background-color: var(--button-background-color);
}
.postNext a:link::after,
.postNext a:link::active {
	border-color: var(--button-text-color);
}
.postNext a:hover,
.postNext a:active {
	color: var(--button-hover-text-color);
	background-color: var(--button-hover-background-color);
}
.postNext a:hover::after,
.postNext a:active::after {
	border-color: var(--button-hover-text-color);
}

.postNext a span {
	display: block;
	font-size: smaller;
}


/* ページネーション(詳細ページ用) */
.postPages {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postPages h3 {
	display: none;
}

.postPages a.post-page-numbers,
.postPages span.post-page-numbers {
	display: block;
	position: relative;
	margin: 0 1px 1px 0;
	padding: 12px 15px;
	box-sizing: border-box;

	line-height: 1;
	color: var(--button-text-color);
	text-decoration: none;
	background-color: var(--button-background-color);
	transition: all 0.3s;
}

.postPages span.post-page-numbers.current {
	color: var(--button-select-text-color);
	background-color: var(--button-select-background-color);
	font-weight: 700;
}

.postPages a.post-page-numbers:link,
.postPages a.post-page-numbers:visited {
	color: var(--button-text-color);
	background-color: var(--button-background-color);
}
.postPages a.post-page-numbers:hover,
.postPages a.post-page-numbers:action {
	color: var(--button-hover-text-color);
	background-color: var(--button-hover-background-color);
}


/* お問い合わせ */
.postContact {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* お問い合わせ中は本文を表示しない */
.post.contact-error .postContent,
.post.contact-back .postContent,
.post.contact-confirm .postContent,
.post.contact-submit .postContent {
	display: none;
}


/* 投稿一覧(一覧ページのみ) */
.postsList {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postsList .post.tile {
	width: calc( 25% - 20px );
	margin: 10px;
}


/* ページネーション(一覧ページのみ) */
.postsPages {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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

.postsPages .nav-links {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postsPages span.page-numbers,
.postsPages a.page-numbers {
	display: block;
	position: relative;
	margin: 0 1px 1px 0;
	padding: 12px 15px;
	box-sizing: border-box;

	line-height: 1;
	color: var(--button-text-color);
	text-decoration: none;
	background-color: var(--button-background-color);
	transition: all 0.3s;	
}

.postsPages span.page-numbers.current {
	color: var(--button-select-text-color);
	background-color: var(--button-select-background-color);
	font-weight: 700;
}

.postsPages a.page-numbers:link,
.postsPages a.page-numbers:visited {
	color: var(--button-text-color);
	background-color: var(--button-background-color);
}

.postsPages a.page-numbers:hover,
.postsPages a.page-numbers:active {
	color: var(--button-hover-text-color);
	background-color: var(--button-hover-background-color);
}


/* 間隔調整 */
.postHeaderInner > *,
.postsHeaderInner > * { margin: 20px 0; }
.postHeaderInner > *:first-child,
.postsHeaderInner > *:first-child { margin-top: 0; }
.postHeaderInner > *:last-child,
.postsHeaderInner > *:last-child { margin-bottom: 0; }

.postMainInner > *,
.postsMainInner > * { margin: 50px 0; }
.postMainInner > *:first-child,
.postsMainInner > *:first-child { margin-top: 0; }
.postMainInner > *:last-child,
.postsMainInner > *:last-child  { margin-bottom: 0; }

.postFooterInner > *,
.postsFooterInner > * { margin: 20px 0; }
.postFooterInner > *:first-child,
.postsFooterInner > *:first-child { margin-top: 0; }
.postFooterInner > *:last-child,
.postsFooterInner > *:last-child { margin-bottom 0; }




/** for tablet --------------------- **/

@media screen and (max-width:1024px) and (min-width:768px) {
	
	/* タイトル */
	.postTitle,
	.postsTitle {
		font-size: 26px;
	}

	/* カテゴリー一覧 */
	.postCategories a {
		padding: 0 10px;
	}

	/* 詳細はこちらボタン */
	.postMore a {
		padding: 15px 20px;
		font-size: inherit;
	}
}


/** for smart phone ---------------- **/

@media screen and (max-width:767px) {

	/* 画像 (.post.tileのみ使用) */
	.postImage {
	}

	/* タイトル */
	.postTitle,
	.posts .postsTitle {
		font-size: 24px;
	}

	/* 詳細はこちらボタン */
	.postMore {
		display: block;
	}

	.postMore a {
		margin: 5px 0;
		padding: 10px 20px;
		font-size: inherit;
	}
	.postMore a:first-child { margin-top: 0; }
	.postMore a:last-child  { margin-bottom: 0; }
	
	
	/* 次ページへのリンクボタン */
	.postNext {
		display: block;
	}

	.postNext a {
		margin: 5px 0;
		padding: 10px 50px;
	}

	/* ページネーション */
	.postPages {  }
	
	/* 投稿一覧(一覧ページのみ) */
	.postsList {
		display: block;
	}

	.postsList .post.tile {
		width: auto;
		margin: 20px 0;
	}
	.postsList .post.tile:first-child { margin-top: 0; }
	.postsList .post.tile:last-child  { margin-bottom: 0; }
}



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


	記事共通             .post ( 記事詳細 .post.single / 固定ページ .post.page )

	[想定タグ]
	<article id="" class="post [single|page]">
	<div class="postInner">
	<header class="postHeader">
	<div class="postHeaderInner">
	<div class="postCategories"><ul>
	<li><a href="#">カテゴリー1</a></li>
	<li><a href="#">カテゴリー2</a></li>
	</ul></div>
	<h1 class="postTitle">タイトル</h1>
	<div class="postTags"><ul>
	<li><a href="#">タグ1</a></li>
	<li><a href="#">タグ2</a></li>
	</ul></div>
	</div>
	</header>
	<div class="postMain">
	<div class="postMainInner">
	<div class="postContent">本文</div>
	</div>
	</div>
	<footer class="postFooter">
	<div class="postFooterInner">
	</div>
	</footer>
	</div>
	</article>


	一覧ページ用各POST    .post.tile

	[想定タグ]
	<article id="" class="post tile">
	<div class="postInner postCols">
	<div class="postCol col1">
	<div class="postImage"><a href="#"><img src="" alt=""></a></div>
	</div>
	<div class="postCol col2">
	<div class="postCategories"><ul>
	<li><a href="#">カテゴリー1</a></li>
	<li><a href="#">カテゴリー2</a></li>
	</ul></div>
	<h2 class="postTitle"><a href="#">タイトル</a></h2>
	<div class="postExcerpt">簡単な説明</div>
	<div class="postTags"><ul>
	<li><a href="#">タグ1</a></li>
	<li><a href="#">タグ2</a></li>
	</ul></div>
	<div class="postMore"><a href="#">詳しくはこちら</a></div>
	</div>
	</div>
	</article>


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



/* 一覧ページ用各POST .post.tile ------ */

.post.tile {
}

/* ブロック */
.post.tile .postCols {}

.post.tile .postCol.col1 {
	margin: 0;
}
.post.tile .postCol.col2 {
	margin: 10px 0 0 0;
}
.post.tile .postCol.col2 > * { margin: 10px 0; }
.post.tile .postCol.col1 > *:first-child { margin-top: 0; }
.post.tile .postCol.col1 > *:last-child  { margin-bottom: 0; }

/* ヘッダー */
.post.tile .postHeader {
	margin: 10px 0 0;
	padding: 0;
}
.post.tile .postHeaderInner > * {
	margin: 10px 0;
}

/* タイトル */
.post.tile .postTitle {
	font-size: inherit;
}

/* 詳細はこちら */
.post.tile .postMore {
	display: block;
}

.post.tile .postMore a { margin: 5px 0; }
.post.tile .postMore a:first-child { margin-top: 0; }
.post.tile .postMore a:last-child  { margin-bottom: 0; }



/** for tablet --------------------- **/

@media screen and (max-width:1024px) and (min-width:768px) {
	
	/* 記事共通 */
	.post {
	}
}


/** for smart phone ---------------- **/

@media screen and (max-width:767px) {

}



/** ===========================================================================


	一覧ページ用 post article


=============================================================================== **/




/** for tablet --------------------- **/

@media screen and (max-width:1024px) and (min-width:768px) {
}



/** for Smart Phone ---------------- **/

@media screen and (max-width:767px) {
	
	.post.tile {
		width: auto;
		margin: 30px 0;
	}
}




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


	詳細ページ .post.single
	固定ページ .post.page


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






/** for tablet ------------------- **/

@media screen and (max-width:1024px) and (min-width:768px) {

	/* ヘッダー */
	.post.single .postHeader,
	.post.page .postHeader {
		padding: 20px 0;
	}

	.post.single .postHeaderInner,
	.post.page .postHeaderInner {
		width: calc( 100% - 60px );
	}

	/* タイトル */
	.post.single .postTitle,
	.post.page .pageTitle {
		font-size: 26px;
	}

	/* 中心部 */
	.post.single .postMain,
	.post.page .postMain {
		padding: 30px 0;
	}

	.post.single .postMainInner,
	.post.page .postMainInner {
		width: calc( 100% - 60px );
	}

	/* フッター */
	.post.single .postFooterInner,
	.post.page .postFooterInner {
		width: calc( 100% - 60px );
	}
}


/** for smart phone ---------------- **/

@media all and (max-width:767px) {
	
	.post.single,
	.post.page {
	}
	
	/* ヘッダー */
	.post.single .postHeader,
	.post.page .postHeader {
		padding: 10px 0;
	}

	.post.single .postHeaderInner,
	.post.page .postHeaderInner {
		width: auto;
		max-width: none;
		margin: 0 20px;
	}

	/* タイトル */
	.post.single .postTitle,
	.post.page .pageTitle {
		font-size: 22px;
	}
	
	
	/* 中心部 */
	.post.single .postMain,
	.post.page .postMain {
		padding: 20px 0;
	}
	
	/* 中心部 */
	.post.single .postMainInner,
	.post.page .postMainInner {
		width: auto;
		max-width: none;
		margin: 0 20px;
	}

	/* フッター */
	.post.single .postFooterInner,
	.post.page .postFooterInner {
		width: auto;
		max-width: none;
		margin: 0 20px;
	}
}




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


	ニュース枠


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



.block.posts.news .postsRows {
	margin: 30px 0 0 0;
	padding: 0;
	border: 1px solid #ddd;
}

.block.posts.news .postsRows ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.block.posts.news .newsRow {
	margin: 0;
	padding: 0;
	border-top: 1px solid #ddd;
}
.block.posts.news .newsRow:first-child {
	border-top: 0;
}

.block.posts.news .newsRow a {
	display: block;
	position: relative;
	margin: 0;
	padding: 10px;
}
.block.posts.news .newsRow a:link,
.block.posts.news .newsRow a:visited { color: inherit; }
.block.posts.news .newsRow a:hover,
.block.posts.news .newsRow a:active  { color: var( --hover-color ); }

.block.posts.news .newsRow dl {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	margin: 0;
	padding: 0;
}

.block.posts.news .newsRow dt {
	width: 10em;
	margin: 0;
	padding: 0 1em;
	box-sizing: border-box;
	
	font-size: inherit;
	font-weight: 400;
}

.block.posts.news .newsRow dd {
	width: calc( 100% - 7em );
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	font-size: inherit;
	font-weight: 400;
}


/** for smart phone **/
@media all and (max-width:767px) {
	
	.block.posts.news .postsRows {
	}

	.block.posts.news .newsRow dl {
		display: block;
	}

	.block.posts.news .newsRow dt {
		width: auto;
		margin: 0;
		padding: 0;
		font-size: smaller;
	}

	.block.posts.news .newsRow dd {
		width: auto;
		margin: 5px 0 0 0;
	}
}



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


	組み込み用カテゴリーブロック


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



.block.posts.category {}

.block.posts.category .postsList {
	width: auto;
	max-width: none;
	margin-left: -10px;
	margin-right: -10px;
}


/* カルーセルにする場合 */
.block.posts.category .hvSlider {
	margin: 30px -10px 0;
}

.block.posts.category .hvSlider .screen > ul {
    align-items: stretch;
}

.block.posts.category .hvSlider .screen > ul > li {
    width: 0.25%;
	background-color: transparent;
}


.block.posts.category .hvSlider .post.tile {
    width: auto;
    margin: 0 10px;
}


/** for smart phone **/
@media all and (max-width:767px) {
	
	/* カルーセルにする場合 */
	.block.posts.category .hvSlider .screen > ul > li {
	    width: 1%;
	}
}



/** for Smart Phone --------------------------------- **/

@media all and (max-width:767px) {
}



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


	404ページ


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



.notFound {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.notFoundInner {
	display: block;
	position: relative;
	width: calc( 100% - 100px );
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

.notFoundHeader {
	display: block;
	position: relative;
	margin: 0;
	padding: 50px 0;
}

.notFoundTitle {
	margin: 0;
	padding: 0;
	
	font-size: 40px;
	font-weight: 400;
	text-align: center;
}

.notFoundTitle strong {
	font-size: 50px;
	font-weight: 700;
	padding-right: 0.5em
}

.notFoundContent {
	display: block;
	position: relative;
	margin: 0;
	padding: 50px 0 0 0;
	box-sizing: border-box;
	text-align: center;
}

.notFoundContent p {}

.notFoundContent > *:first-child { margin-top: 0; }
.notFoundContent > *:last-child  { margin-bottom: 0; }

.notFoundFooter {}

.notFoundButton {
	display: block;
	position: relative;
	margin: 100px auto 0;
	padding: 0;
	text-align: center;
}

.notFoundButton a {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin: 0;
	padding: 20px 50px;
	
	background-color: #444444;
	color: #ffffff;
	font-size: larger;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: 1;
}
.notFoundButton a:hover {
	background-color: var( --hover-color );
	color: #ffffff;
}



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


	woocommerce用 : 商品サマリー


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


.product.summary {}

.product.summary .productInner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.product.summary .productImages {
	width: 40%;
}


.product.summary .productImages img {
	width: 100%;
	height: auto;
}

.product.summary .productText {
	width: 60%;
	padding: 0 0 0 40px;
}