@charset utf-8;

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


	Wordpressテンプレート用CSS)

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


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



:root {
	--text-color: #231815;
	--hover-color : #cc0000;
	--button-color : #444444;
	--button-text-color : #ffffff;
}




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


	タイル（一覧表示用パーツ）共通


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




/* Moreボタン */
.tileMore {
	margin: 10px 0 0 0;
}

.tileMore a {
	display: block;
	position: relative;
	margin: 0;
	padding: 20px;
		
	background-color: #f0f0f0;
	color: inherit;
	font-size: larger;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

.tileMore a:hover {
	background-color: var( --hover-color );
	color: #ffffff;
}







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


	タイル（大サイズ : 1行に1つ）


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



.tile.row {
}

.tile.row .tileInner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.tile.row .tileImage {
	width: 50%;
	padding: 0 0 50%;
}

.tile.row .tileText {
	width: 50%;
	padding-left: 30px;
}

.tile.row .tileTitle {
	font-size: larger;
}


/* for smart phone */
@media all and (max-width:767px) {
	
	.tile.row .tileInner {
		display: block;
	}

	.tile.row .tileImage {
		width: 100%;
		padding: 0 0 100%;
	}

	.tile.row .tileText {
		width: auto;
		padding: 20px 20px;
		padding-left: 20px;
	}

	.tile.row .tileTitle {
		font-size: larger;
	}
}



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


	埋め込みブロック共通


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



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

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


/* 見出し部分 */
.insertHeader {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

.insertHeader a {
	color: inherit;
	text-decoration: none;
}
.insertHeader a:link,
.insertHeader a:visited { color: inherit; }
.insertHeader a:hover,
.insertHeader a:active  { color: var( --hover-color ); }


/* タイトル */
.insertTitle {
	margin: 0;
	padding: 0;
	font-size: 30px;
	font-weight: 700;
}

/* タグ */
.insertTag {
	display: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
}
.insertTag::before {
	content: "#";
}


/* コンテンツ部分 */
.insertContent {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


/* コンテンツ部分(タイル一覧) ------- */

.insertContent.tiles {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	position: relative;
	margin: 0;
	padding: 0;
}

.insertContent.tiles .tile {
	width: calc( 25% - 20px);
	margin: 50px 10px 0;
}


/* タイル一覧（カルーセル） --------- */

.insertContent.slider {
	margin-top: 50px;
}

.insertContent.slider .tile {
	width: auto;
	margin: 0 10px;
}

/* カルーセルの調整 */
.insertContent.slider .hvSlider .screen > ul {
     align-items: stretch;
}

.insertContent.slider .hvSlider .screen > ul > li {
    width: 0.25%;
}



/* タイル一覧(row一覧) ------------- */

.inserContent.rows {}

.insertContent.rows > *:first-child {
	margin-top: 0;
}



/* 詳しくボタン */
.insertMore {
	display: block;
	position: relative;
	margin: 50px 0 0 0;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
}

.insertMore a {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 15px 40px;
	
	background-color: var( --button-color );
	color: var( --button-text-color );
	font-size: larger;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: 1;
}
.insertMore a:hover {
	background-color: var( --hover-color );
	color: var( --button-text-color );
}



/* for smart phone */
@media all and (max-width:767px) {
	
	
	/* タイトル */
	.insertTitle {
		font-size: 24px;
	}

	
	/* タイル一覧（カルーセル） --------- */

	.insertContent.slider {
		margin-top: 30px;
	}

	/* カルーセルの調整 */
	.insertContent.slider .hvSlider .screen > ul > li {
	    width: 1%;
	}
	
	.insertContent.slider .hvSlider .pointer {
	    position: relative;
	    left: auto;
	    bottom: auto;
		width: auto;
	    margin: 10px 0 0 0;
	}
}










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


	埋め込みブロック : POST一覧（rowサイズ)


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



.insert.posts.rows {}

.insert.posts.rows .insertHeader {
	display: none;
}

.insert.posts.rows .tile {
	margin-top: 50px;
}
.insert.posts.rows .tile:first-child {
	margin-top: 0;
}



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


	埋め込みブロック : カテゴリー一覧 rows


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



.insert.categories.rows {}

.insert.categories.rows .insertHeader {
	display: none;
}

.insert.categories.rows .tile {
	margin-top: 50px;
}

.insert.categories.rows .insertContent > *:first-child {
	margin-top: 0;
}




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


	埋め込みブロック : サブカテゴリー tiles 一覧


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



.insert.subcategories.tiles {
	
	
	
}



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


	埋め込みブロック : サブカテゴリー row 一覧


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



.insert.subcategories.rows {}

.insert.subcategories.rows .insertHeader {
	display: none;
}

.insert.subcategories.rows .insertContent .tile.row {
	width: auto;
	margin-top: 50px;
}

.insert.subcategories.rows .insertContent.rows > *:first-child {
	margin-top: 0;
}



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


	主に一覧ページのヘッダー部分


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



.pageHeader {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.pageHeaderInner {}

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

.pageHeaderVisual.video {}

.pageHeaderVisual video {}

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

.pageHeaderTitle {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 28px;
	font-weight: 700;
}

.pageHeaderTitle span {
	display: inline-block;
	padding: 5px 10px 5px 40px;
	background-color: rgba( 255,255,255,0.9);
}

.pageHeaderTitle img {
	display: block;
	position: absolute;
	left: 10px;
	top: 10px;
	width: 30px;
	height: auto;
}

.pageHeaderDescription {
	margin: 30px 0 0 0;
}

.pageHeaderDescription span {
	display: inline-block;
	padding: 5px 10px;
	background-color: rgba( 255,255,255,0.9);
}


.pageHeader.category {}




/* ビジュアルがある時 */
.pageHeader.hasVisual .pageHeaderInner {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;	
}

.pageHeader.hasVisual .pageHeaderVisual { width: 70%; }
.pageHeader.hasVisual .pageHeaderText   { width: 50%; padding-left: 30px; margin-right: -20% }


/* ビデオがある時 */
.pageHeaderVisual.video {
	padding: 0 0 37.5%;
	overflow: hidden;
}

.pageHeaderVisual video {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
}


/* 画像がある時 */
.pageHeaderImage {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 56.25%;
	overflow: hidden;
}

.pageHeaderImage img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 105%;
	height: auto;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
}


/* ビジュアルが無い時 */
.pageHeader.noVisual .pageHeaderInner {
	display: block;
	width: calc( 100% - 100px );
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 0;
}
.pageHeader.noVisual .pageHeaderText {
	width: auto;
} 



/* for smart phone */
@media all and (max-width:767px) {
	
	
	.pageHeaderTitle {
		font-size: 22px;
	}

	.pageHeaderTitle img {
		left: 8px;
		top: 10px;
		width: 25px;
	}

	.pageHeaderDescription br {
		display: none;
	}

	.pageHeaderDescription span {
		display: inline;
		padding: 0;
		background-color: transparent;
	}


	/* ビジュアルがある時 */
	.pageHeader.hasVisual .pageHeaderInner {
		display: block;
	}

	.pageHeader.hasVisual .pageHeaderVisual { width: auto; }
	.pageHeader.hasVisual .pageHeaderText   { width: auto; padding: 0 30px 30px; padding-left: 30px; margin-right: 0; }

	.pageHeader.hasVisual .pageHeaderTitle {
		position: absolute;
		left: 5%;
		width: 90%;
		bottom: calc( 100% + 60px );
		box-sizing: border-box;
	}
	

	/* ビデオがある時 */
	.pageHeaderVisual.video {
		padding: 0 0 125%;
		border: 1px soilid #ff0000;
	}

	.pageHeaderVisual video {
		width: 250%;
	}


	/* 画像がある時 */
	.pageHeaderImage {
		padding: 0 0 125%;
	}

	.pageHeaderImage img {
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 190% !important;
		max-width: none !important;
		height: auto;
		margin: 0;
		padding: 0;
		transform: translate(-50%, -50%);
	}


	/* ビジュアルが無い時 */
	.pageHeader.noVisual .pageHeaderInner {
		width: calc( 100% - 60px );
		padding: 30px 0;
	}
}



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


	主に一覧ページのコンテンツ部分


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



/* タイル一覧 */
.pageContent.tiles {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
}

.pageContent.tiles .tile {
	width: calc( 25% - 20px );
	margin: 50px 10px 0;
}



/* for Tablet */
@media all and ( max-width:1024px ) and ( min-width:768px ) {
}


/* for Smart Phone */
@media all and ( max-width:767px ) {
	
	/* タイル一覧 */
	.pageContent.tiles {
		display: block;
	}
	
	.pageContent.tiles .tile {
		width: auto;
		margin: 30px 0 0;
	}	
}



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


	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;
}