@charset utf-8;

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


	Wordpressテンプレート用CSS)

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


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




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


	.post.tile 一覧


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



.postTiles {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	position: relative;
	width: calc( 100% - 100px );
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}



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

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

	.postTiles {
		display: block;
		width: auto;
		max-width: none;
		margin: 0 20px;
	}
}



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


	一覧ページ用 post article


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



.post.tile {
	display: block;
	position: relative;
	width: calc( 33.33% - 20px );
	margin: 30px 10px;
	padding: 0;
	box-sizing: border-box;
}

/* リンクの個数でpaddingを帰る */
.post.tile.links1 { padding-bottom: 90px }
.post.tile.links2 { padding-bottom: 150px }
.post.tile.links3 { padding-bottom: 210px }
.post.tile.links4 { padding-bottom: 270px }

/* 幅を広く */
.post.tile.featured {
	width: calc( 66.66% - 20px );
}

.post.tile a:link,
.post.tile a:visited { color: inherit; }
.post.tile a:hover,
.post.tile a:active   { color: var(--hover-color); }

.post.tile .tileImage {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
}

.post.tile .tileImage img {
	width: 83.333%;
	height: auto;
	vertical-align: bottom;
}

/* 横長・縦長画像 */
.post.tile.img-horizontal .tileImage img { width: 100%;    }
.post.tile.img-vertical .tileImage img   { width: 66.666%; }



/* 説明部分 */
.tileDesc {
	display: block;
	margin: 20px 0 0 0;
	padding: 0;
	box-sizing: border-box;
}
.tileDesc > * {
	margin: 10px 0 0 0;
	padding: 0;
}
.tileDesc > *:first-child { margin-top: 0; }
.tileDesc > *:last-child  { margin-bottom: 0; }



/* カテゴリー */
.tileCate {
	font-size: smaller;
}


/* キャッチ */
.tileCatch {
}
.tileCatch > *:first-child { margin-top: 0; }
.tileCatch > *:last-child  { margin-bottom: 0; }


/* タイトル */
.tileTitle {
	margin: 0;
	font-size: 20px;
	font-weight: inherit;
	line-height: 1.5;
}

/* 作成者等 */
.tileAuthors {
	font-size: smaller;
	line-height: 1.5;
}
.tileAuthors > *:first-child { margin-top: 0; }
.tileAuthors > *:last-child  { margin-bottom: 0; }


/* ステータス */
.tileStatus {
	margin: 10px 0 0 0;
	color: #888888;
	line-height: 1;
	font-size: smaller;
}

.tileStatus span {
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 5px;
	border-radius: 3px;
	background-color: #aaaaaa;
	color: #ffffff;
}

.tileStatus.newrelease span { background-color: #ff0000; }
.tileStatus.onsale span     { background-color: #c11825; }
.tileStatus.develop span    { background-color: #F4A002; }
.tileStatus.none            { display: none; }


/* 概要 */
.tileExcerpt {
	display: block;
}

.tileExcerpt table {
	display: none;
}


/* ハッシュタグ一覧 */
.post.tile .tileHashtags {
	font-size: smaller;
}

.post.tile .tileHashtags ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.post.tile .tileHashtags li {
	margin: 0 1em 0 0;
	padding: 0;
}

.post.tile .tileHashtags a:link,
.post.tile .tileHashtags a:visited {
	color: inherit;
}


/* Links */
.post.tile .tileLinks {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	margin: 0;
	padding: 0;
}

.post.tile .tileLinks ul {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
}

.post.tile .tileLinks li {
	margin: 3px 0 0 0;
	padding: 0;
}

.post.tile .tileLinks a {
	display: block;
	position: relative;
	margin: 0;
	padding: 20px 30px 20px 50px;
	
	border-top: 1px solid #231815;

	color: #231815;
	font-size: inherit;
	font-weight: 700;
	text-align: center;
	line-height: 1;
	
	background-color: #ffffff;
}

.tileLinks svg {
	display: block;
	position: absolute;
	left: 10px;
	top: 50%;
	width: 25px;
	height: 25px;
	margin: 0;
	padding: 0;
	fill: #231815;
	transform: translateY(-50%);
}

.post.tile .tileLinks a:link,
.post.tile .tileLinks a:visited {
	border-color : #231815;
	color: #231815;
}

.post.tile .tileLinks a:hover,
.post.tile .tileLinks a:active {
	background-color : #231815;
	color: #ffffff;
	transition: all 0.3s;
}

.post.tile .tileLinks a:hover svg {
	fill: #ffffff;
	transition: all 0.3s;
}






/* ボタン */
.tileBtns {
	display: none;
	position: relative;
}

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

.tileBtns li {
	margin: 10px 0 0 0;
	padding: 0;
}
.tileBtns li:first-child {
	margin: 0;
}

.tileBtns a {
	display: block;
	position: relative;
	margin: 0;
	padding: 15px 65px 15px 30px;
	box-sizing: border-box;
	
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	line-height: 1;
	
	background-color: #888888;
	border-radius: 5px;
}
.post.tile .tileBtns a:link,
.post.tile .tileBtns a:visited { color: #ffffff; background-color: #888888; }
.post.tile .tileBtns a:hover,
.post.tile .tileBtns a:active  { color: #ffffff; background-color: #c11825; }

.tileBtns svg {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    fill: #ffffff;
}

.tileBtns li.more {}

.tileBtns li.download {}



/* タイトル等を縦書きにする場合 */
.post.tile.title-vertical .tileDesc {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}
.post.tile.title-vertical .tileDesc > * {
	margin: 0 5px;
	padding: 0;
}
.post.tile.title-vertical .tileDesc > *:first-child { margin-top: 0; margin-right: 0; }
.post.tile.title-vertical .tileDesc > *:last-child  { margin-bottom: 0; margin-left: 0; }

.post.tile.title-vertical .tileCate,
.post.tile.title-vertical .tileCatch,
.post.tile.title-vertical .tileAuthors,
.post.tile.title-vertical .tileTitle {
    -webkit-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	line-height: 1.3;
}



/* product用 */

.post.tile.product .tileExcerpt {
	display: none;
}








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

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

	.post.tile .tileImage img,
	.post.tile.img-horizontal .tileImage img,
	.post.tile.img-vertical .tileImage img {
		width: 100%;
	}
}


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


	タイル一覧用のソート等


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


.postTilesQueries {
	display: block;
	position: relative;
	width: calc( 100% - 100px );
	max-width: 1200px;
	margin: 30px auto 0;
	padding: 0;
}
.postTilesQueries::after { content:"."; display:block; width:0; height:0; clear:both; visibility:hidden; overflow:hidden; }

.postTilesCount {
	margin: 20px 0 0 0;
	padding: 0;
	text-align: center;
}

.postTilesCount strong {}



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

@media all and (max-width:767px) {
	
	.postTilesQueries {
		width: auto;
		max-width: none;
		margin: 30px 20px 0;
	}
}



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


	詳細ページ用 post article


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


/*
.post.single {
	display: block;
	position: relative;
	margin: 0 0 50px;
	padding: 0;
}
*/

.singleHeader {
	display: block;
	position: relative;
	margin: 0;
	padding: 30px 50px;	
	background-color: #f0f0f0;
}


/* アイキャッチ画像 */
.singleImage {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
}

.singleImage img {
	width: 100%;
	vertical-align: bottom;
}


/* タイトル等、概要 */
.singleDesc {
	display: block;
	position: relative;
	margin: 0;
	padding: 20px 50px;
	box-sizing: border-box;
}
/* 間隔の調整 */
.singleDesc > * { 
	margin: 50px 0 0 0;
	padding: 0;
	box-sizing: border-box;
}
.singleDesc > *:first-child { margin-top: 0; }



/* カテゴリー */
.singleCategories {
	display: block;
	position: relative;
	margin: 10px 0 0 0;
	font-size: smaller;
}

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

.singleCategories li {
	margin: 0;
	padding: 0;
}

.singleCategories  a {
	text-decoration: none;
}
.singleCategories  a:link,
.singleCategories  a:visited { color: inherit; }


/* タイトル */
.singleTitle {
	margin: 10px 0 0 0;
	font-size: 26px;
	font-weight: inherit;
}

/* 作者など */
.singleAuthors {
	font-size: smaller;
}
.singleAuthors > *:first-child { margin-top: 0; }
.singleAuthors > *:last-child  { margin-bottom: 0; }


/* キャッチ */
.singleCatch {
	font-size: larger;
}
.singleCatch > *:first-child { margin-top: 0; }
.singleCatch > *:last-child  { margin-bottom: 0; }


/* 概要 */
.singleExcerpt {
	width: 100%;
	box-sizing: border-box;
}

.singleExcerpt table th,
.singleExcerpt table td {
	border-left: 0;
	border-right: 0;
	font-size: smaller;
}
.singleExcerpt table td:first-child {
	white-space: nowrap;
}


/* スペック */
.singleSpecs {
	display: block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	font-size: smaller;
}

.singleSpecs ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.singleSpecs li {
	margin: 0 1.5em 0 0;
	padding: 0;
	list-style-type: none;
	box-sizing: border-box;
}

.singleSpecs li.else {
	width: 100%;
	margin: 0;
}

.singleSpecs svg {
	width: 20px;
	height: auto;
	margin-right: 0.2em;
	vertical-align: middle;
}

.singleSpecs a:link,
.singleSpecs a:visited { color:inherit; }




/* ステータス表示 ----------- */

.singleStatus {
	margin: 10px 0 0 0;
	color: #888888;
	line-height: 1;
	font-size: smaller;
}

.singleStatus span {
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 5px;
	border-radius: 3px;
	background-color: #aaaaaa;
	color: #ffffff;
}

.singleStatus.newrelease span { background-color: #ff0000; }
.singleStatus.onsale span     { background-color: #c11825; }
.singleStatus.develop span    { background-color: #F4A002; }
.singleStatus.none            { display: none; }


/* 配送 ---------------------- */

.singleShipping {
	text-align: right;
}

.singleShipping .caution {
	margin: 0;
	font-size: smaller;
}



/* ダウンロード */
/* 外部リンク */
.singleDownload,
.singleExternal {
	display: block;
	position: relative;
	margin: 10px 0 0 0;
	text-align: left;
}

.singleDownload a,
.singleExternal a {
	display: block;
	position: relative;
	margin: 0;
	padding: 20px 30px 20px 65px;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	line-height: 1;
	
/*	background-color: #c7303b; */
	background-color: #888888;
	border-radius: 5px;
}

.singleDownload svg,
.singleExternal svg {
	display: block;
	position: absolute;
	left: 20px;
	top: 50%;
	width: 25px;
	height: 25px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	fill: #ffffff;
}

.singleDownload a:hover,
.singleExternal a:hover {
	color: #ffffff;
	background-color: #c7303b;
}



/* 現在のページ */
.singlePaged {
	display: block;
	position: relative;
	margin: 20px 20px 0;
	padding: 20px 0 0 0;
	font-size: larger;
}

.singlePaged dl {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 10px 15px;
}

.singlePaged dt {
	margin: 0;
	padding: 0;
}

.singlePaged dd {
	margin: 0;
	padding: 0 0 0 1em;
}


/* 本文 */
.post.single .singleContent {
	width: calc( 100% - 100px );
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px;
	box-sizing: border-box;
	
	background-color: #ffffff;
}


/* ページ送り */
.singlePagenation {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	
	width: calc( 100% - 100px );
	max-width: 1200px;
	margin: 50px auto 0;
	padding: 20px;
	box-sizing: border-box;
	
	font-size: larger;
	font-weight: inherit;
	line-height: 1;
	
	border-top: 5px solid #f0f0f0;
}

.singlePagenation h3 {
	margin: 0;
	padding: 0 0.5em 0 0;
	font-size: inherit;
	font-weight: inherit;
}

.singlePagenation span {
	display: block;
	margin: 0 2px;
	padding: 10px 15px;
	background-color: #ffffff;
	color: #444444;
	border:1px solid #444444;
	font-weight: 700;
}

.singlePagenation a {
	display: block;
	margin: 0 2px;
	padding: 10px 15px;
	background-color: #444444;
	color: #ffffff;
	border:1px solid #444444;
}

.singlePagenation a:hover,
.singlePagenation a:active { color: #ffffff; border-color: var( --hover-color ); background-color: var( --hover-color ); }



/* タグ一覧 */
.singleTags {
	font-size: smaller;
}

.singleTags ul {
	list-style-type: none;
}

.singleTags li {
	display: inline-block;
	margin: 3px 1em 3px 0;
}

.singleTags a:link,
.singleTags a:visited { color: inherit; text-decoration: none; }
.singleTags a:hover,
.singleTags a:active  { color: inherit; text-decoration: underline; }



/* アイキャッチ画像がある場合 */
.has-post-thumbnail {}

.has-post-thumbnail .singleHeader {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.has-post-thumbnail .singleImage                { width: 50%; }
.has-post-thumbnail.img-horizontal .singleImage { width: 60%; }
.has-post-thumbnail.img-vertical .singleImage   { width: 40%; }

.has-post-thumbnail .singleDesc {
	width: 40%;
	padding: 0 0 0 50px;
}




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

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


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

	.singleHeader {
		padding: 0;
	}


	/* 間隔の調整 */
	.singleDesc > * { 
		margin: 30px 0 0 0;
	}


	/* タイトル */
	.singleTitle {
		font-size: larger;
	}


	/* キャッチ */
	.singleCatch {
		font-size: inherit;
	}


	/* 概要 */
	.singleExcerpt {
		width: auto;
	}


	/* スペック */
	.singleSpecs {
		width: auto;
	}


	/* 現在のページ */
	.singlePaged {
		font-size: inherit;
	}


	/* 本文 */
	.post.single .singleContent {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 20px;
	}

	/* アイキャッチ画像がある場合 */
	.has-post-thumbnail .singleHeader {
		display: block;
	}

	.has-post-thumbnail .singleImage,
	.has-post-thumbnail.img-horizontal .singleImage,
	.has-post-thumbnail.img-vertical .singleImage   { width: auto; }

	.has-post-thumbnail .singleDesc {
		width: auto;
		padding: 20px;
	}
	
	
	
	/*  */
	
}



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


	関連商品


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


.posts.related {
	display: block;
	position: relative;
	width: calc( 100% - 100px );
	max-width: 1200px;
	margin: 50px auto 0;
	padding: 0;
}

.posts.related .relatedTitle {
	display: block;
	position: relative;
	margin: 0;
	padding: 0 0 10px;
	text-align: center;
	
	font-size: 24px;
	font-weight: 700;
    border-bottom: 5px solid rgba(0,0,0,0.1);
}
.posts.related .relatedTitle::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 100%;
	width: 4em;
	height: 5px;
	margin: 0;
	padding: 0;
	background-color: #c7303b;
	transform: translateX(-50%);
}

.posts.related .postTiles {
	justify-content: center;
	width: auto;
	max-width: none;
	margin: 0;
}



.posts.related .post.tile {
	width: calc( 25% - 20px );
}

.posts.related .post.tile .tileTitle {
    font-size: inherit;
}




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


	固定ページ用 post article


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



.post.single.page {
	display: block;
	position: relative;
	margin: 0 0 50px;
	padding: 0;
}

.post.single.page .singleTitle {
	text-align: center;
}




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


	商品アーカイブsection


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



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

.posts.archive .archiveHeader {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 50px;
	background-color: #f0f0f0;
}

.posts.archive .archiveTitle {
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
	
	font-size: 30px;
	font-weight: inherit;
}

.posts.archive .archiveDescription {
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
}
.posts.archive .archiveDescription > *:first-child { margin-top: 0; }
.posts.archive .archiveDescription > *:last-child  { margin-bottom: 0; }

.posts.archive .archivePosts {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	position: relative;
	width: calc( 100% - 100px );
	max-width: 1200px;
	margin: 50px auto 0;
	padding: 0;
}

.posts.archive .post.tile {}

.posts.archive .post.tile.featured {}

.posts.archive .archiveQuery {
	margin: 30px 0 0 0;
	text-align: center;
	font-size: larger;
	font-weight: inherit;
}



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

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

	
	.posts.archive .archiveHeader {
		padding: 30px;
	}
	
	.posts.archive .archiveTitle {
		font-size: 20px;
	}
}








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


	パーツ : アーカイブページ用ページ送り

	<nav class="navigation pagination" aria-label="投稿">
	<h2 class="screen-reader-text">投稿ナビゲーション</h2>
	<div class="nav-links">
	<span aria-current="page" class="page-numbers current">1</span>
	<a class="page-numbers" href="https://sumu.wiez.net/?paged=2&amp;cat=39">2</a>
	<a class="next page-numbers" href="https://sumu.wiez.net/?paged=2&amp;cat=39">NEXT</a>
	</div>
	</nav>


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



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

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

.pagination .nav-links {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 0;
}

.pagination .page-numbers {
	display: block;
	position: relative;
	margin: 2px;
	padding: 10px 15px;
	
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	
	color: #ffffff;
	border: 1px solid #444444;
	background-color: #444444;
}

.pagination .page-numbers:hover {
	color: #ffffff;
	border-color: #cc0000;
	background-color: #cc0000;
	transition: all 0.3s;
}

.pagination .page-numbers.current {
	font-weight: 700;
	color: #444444;
	background-color: #ffffff;
	border-color: #444444;
}

.pagination .page-numbers.prev {}

.pagination .page-numbers.next {}