@charset "utf-8";


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


	サイト共通パーツ用CSS

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


	[version]

	@version   7.0 2025.04.15  New  jQuery.siteCommon.css と post.cssを統合


	[history]

	@history   2025.05.xx gozairi.com リニューアル実装


	[CSS]

	1.    :root               共通パラメータ
	2.    body, html          body, html
	3.    .siteHeader         サイト共通ヘッダー
	4.    .siteBread          パンくずリスト 2022年2月3日追加
	4.    .siteMain           メインコンテンツ部分
	5.    .siteBlock          各コンテンツブロック
	6.    .siteHumberger      ハンバーガーメニューボタン
	7.    .siteNav            サイト共通ナビゲーションツリー
	8.    .siteMenu           サイト共通ナビゲーション枠
	9.    .siteFooter         サイト共通フッター
	10.   .sitePageTop        ページTOPボタン                    (z-index:800)
	11.   .siteSVG            SVGを格納しておくスペース(非表示)

	12.   .siteLoading        オプションパーツ : ローディング表示   (z-index:2000)
	13.   .siteSplash         オプションパーツ : Splash画面
	14.   .siteGDPR           オプションパーツ : GDPR確認ダイアログ (z-index:1050)
	15.   .siteModal          モーダルWindow

	16.   .scrollBar          ユーティリティ : 疑似スクロールバー
	17.   .hasSideBar         ユーティリティ : サイトバーがある場合の配置


	[ wordpress用 ]

	18.   .posts              記事一覧
	19.   .post               記事詳細
	20.   .tile               一覧用各POST
	21.   .newsRow            ニュース一覧用 記事1行
	22.   .notFound           404ページ


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



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


	1. 共通パラメータ root


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



:root {

	/* テキスト関係 */
	--text-color          : #231815;
	--text-reverse-color  : #231815;
	--link-color          : #0000aa;
	--visited-color       : #0000aa;
	--hover-color         : #E80685;
	
	/* 背景 */
	--background-color    : #ffffff;
	
	/* ボタン */
	--button-text-color: #231815;
	--button-background-color: #e0e0e0;
	--button-hover-text-color: #ffffff;
	--button-hover-background-color: #cc0000;
	
	/* フォント */
	--gothic-font-family : "Jost" , "Noto Sans JP" , "YuGothic" , "Yu Gothic medium" , "Hiragino Sans" , Meiryo , sans-serif;
	--mincho-font-family : "Cormorant Garamond" , "Noto Serif JP" , "YuMincho" , "Yu Mincho" , "Hiragino Mincho ProN" , serif;

}



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


	2. body, html


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

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


/* padding-topをデザインに合わせて変える */
body {
	display: block;
	position: relative;
	margin: 0;
	padding: 130px 0 0 0;
	box-sizing: border-box;

	font-family: var( --gothic-font-family );
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	
	background-color: var( --background-color );
}



/** for Tablet ---------------------------------- **/

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


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

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


/** for Print ----------------------------------- **/

@media print {
}




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


	.siteHeader      サイト共通ヘッダー

	[想定タグ]
	<header id="" class="siteHeader">
	<div class="siteHeaderInner">
	<h1 class="siteHeaderTitle"><a href="/" title="xxx" rel="home"><img src="" alt=""></a></h1>
	</div>
	</header>


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



.siteHeader {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	background-color: inherit;
	z-index:1000;
	transition: all 0.5s;
}
.siteHeader::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

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


/* サイトタイトル */
.siteHeaderTitle {
	display: block;
	position: relative;
	width: 200px;
	height: 80px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

.siteHeaderTitle a,
.siteHeaderTitle a:link,
.siteHeaderTitle a:visited,
.siteHeaderTitle a:hover,
.siteHeadertitle a:active { color: inherit; }

.siteHeaderTitle img,
.siteHeaderTitle svg {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: auto;
	height: auto;
	
	/* ここで大きさ調整 */
	max-width: 80%;
	max-height: 80%;
	
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	vertical-align: bottom;
	transform: translate(-50%, -50%);
}


/** for Tablet ---------------------------------- **/

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


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

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


/** for Print ----------------------------------- **/

@media print {}




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


	.siteBread      パンくずリスト 2022年2月3日追加

	[想定タグ]
	<!-- start site bread -->
	<div class="siteBread">
	<div class="siteBreadInner">

	<ul class="siteBreadCols">
	<li class="siteBreadCol"><a href="">ホーム</a></li>
	<li class="siteBreadCol"><a href="">階層2</a></li>
	<li class="siteBreadCol here">現在のページ</li>
	</ul>

	</div>
	</div>
	<!-- end site bread -->


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



.siteBread {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: smaller;
}

.siteBread a {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	color: inherit;
	text-decoration: none;
	transition: all 0.3s;
}
.siteBread a:link,
.siteBread a:visted { color: inherit; }
.siteBread a:hover,
.siteBread a:active { color: inherit; text-decoration: underline; }

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

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

.siteBreadCol,
.siteBread li {
	display: block;
	position: relative;
	margin: 0;
	padding: 0 30px 0 0;
	box-sizing: border-box;
}
.siteBreadCol::after,
.siteBread li::after {
	content: "";
	display: block;
	position: absolute;
	right: 15px;
	top: 50%;
	width: 10px;
	height: 8px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	clip-path: polygon(0% 0%, 0% 100%,50% 50%);
	background-color: var(--text-color);
	transform: translate(50%,-50%);
}

/* 現在のページ */
.siteBreadCol.here,
.siteBread li.here  {
	display: none;
	padding: 0;
}
.siteBreadCol.here::after,
.siteBread li.here::after {
	display: none;
}


/* 間隔を調整 */
.siteBreadInner > * { margin: 5px 0; }
.siteBreadInner > *:first-child { margin-top: 0; }
.siteBreadInner > *:last-child  { margin-bottom: 0; }



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

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


/** for Mobile Phone ---------------------------- **/

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


/** for Print ----------------------------------- **/

@media print {
	
	/* 印刷では表示しない */
	.siteBread {
		display: none;
	}
}




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


	.siteMain    メインコンテンツ部分

	<!-- start site main content -->
	<main class="siteMain">
	<div class="siteMainInner">
	[コンテンツ]
	</div>
	</main>
	<!-- end site main content -->


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



.siteMain {
	display: block;
	position: relative;
	min-height: 80vh;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.siteMain::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

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



/** for Tablet ----------------------------------- **/

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


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

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


/** for Print ----------------------------------- **/

@media print {}



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


	.siteBlock      各ブロック

	<!-- start site block -->
	<section id="XXX" class="siteBlock XXX">
	<div class="siteBlockInner">
	<header class="siteBlockHeader">
	<h2 class="siteBlockTitle"><a href="#">[ブロックのタイトル]</a></h2>
	</header>
	<main class="siteBlockMain">
	[ブロックの中身]
	</main>
	<footer class="siteBlockFooter">
	<div class="siteBlockMore"><a href="#">詳細はこちら</a></div>
	</footer>
	</div>
	</section>
	<!-- end site block -->


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



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

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

.siteBlockHeader,
.siteBlockMain,
.siteBlockFooter {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}


/* ブロックのタイトル */
.siteBlockTitle {
	font-size: 24px;
	line-height: 1.3;
}

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

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

.siteBlockMore a {
	display: block;
	position: relative;
	margin: 0;
	padding: 10px 30px;
	box-sizing: border-box;

	color: var( --button-text-color );
	font-size: inherit;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
	text-decoration: none;
	
	background-color: var( --button-background-color );
	transition: all 0.5s;
}
.siteBlockMore a:link,
.siteBlockMore a:visited {
	color: var( --button-text-color );
	background-color: var( --button-background-color );
}
.siteBlockMore a:hover,
.siteBlockMore a:active {
	color: var( --button-hover-text-color );
	background-color: var( --button-hover-background-color );
}


/** for Tablet ----------------------------------- **/

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


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

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


/** for Print ----------------------------------- **/

@media print {}



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


	ハンバーガーメニューボタン

	[想定タグ]
	<div class="siteHumberger"><a>
	<span class="siteHumbergerIcon">
	<span class="siteHumbergerBar bar01"></span>
	<span class="siteHumbergerBar bar02"></span>
	<span class="siteHumbergerBar bar03"></span>
	</span>
	</a></div>


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



.siteHumberger {
	display: block;
	position: fixed;
	right: 20px;
	top: 20px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	z-index: 1100;
	
	font-size: 0;
}

.siteHumberger a {
	cursor: pointer;
}

.siteHumbergerIcon {
	display: block;
	position: relative;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

.siteHumbergerBar {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: #000000;
	
	opacity: 1;
    transition: all 0.3s;
}
.siteHumbergerBar.bar01 { top: 15%; transform: translateY(-50%); }
.siteHumbergerBar.bar02 { top: 50%; transform: translateY(-50%); }
.siteHumbergerBar.bar03 { top: 85%; transform: translateY(-50%); }

.siteHumberger::after{
	content: "メニュー";
	display: block;
	position: relative;
	margin: 5px 0 0 0;
	padding: 0;
	box-sizing: border-box;
	
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	line-height: 1;
}



/* メニューの開閉 ------------------------------ */

body.openHumbergerMenu {
	overflow: hidden;
}
body.openHumbergerMenu .siteHumbergerBar.bar01 { top: 50%; opacity: 1; transform: rotate( 45deg); }
body.openHumbergerMenu .siteHumbergerBar.bar02 { top: 50%; opacity: 0; transform: rotate(  0deg); }
body.openHumbergerMenu .siteHumbergerBar.bar03 { top: 50%; opacity: 1; transform: rotate(-45deg); }

body.openHumbergerMenu .siteHumberger::after{
	content: "閉じる";
}

body.openHumbergerMenu .siteMenu.humberger {
	bottom: 0%;
}



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


	サイト共通ナビゲーションツリー

	[想定タグ]
	<nav class="siteNav xxx">
	<div class="siteNavInner">
	<h3 class="siteNavTitle">ナビのタイトル</h3>
	<div class="siteNavRow">
	<ul class="siteNavCols">
	<li class="siteNavCol [hasChild] [open]"><a href="">第一階層</a></li>
		<div class="siteNavRow">
		<ul class="siteNavCols">
		<li class="siteNavCol"><a href="">第二階層</a></li>
		</ul>
		</div>
	</li>
	</ul>
	</div>
	</div>
	</nav>


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



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

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

/* ナビのタイトル */
.siteNavTitle {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 階層 */
.siteNavRow {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: all 0.3s;
}

.siteNavCols {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
}

.siteNavCol {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 1.2em;
}

.siteNavCol a {
	display: block;
	position: relative;
	margin: 0;
	padding: 10px 30px 10px 10px;
	box-sizing: border-box;
	cursor: pointer;
	
	color: var(--text-color);
	text-decoration: none;
}
.siteNavCol a::before {
	content: "";
	display: none;
	position: absolute;
	left: auto;
	right: 10px;
	top: 50%;
	width: 7px;
	height: 10px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
	background-color: var(--text-color);
	transform: translate( -50%, -50% ) rotate( 0deg );
	transition: all 0.3s;
}


/* 子要素あり(開閉する) */
.siteNavCol.hasChild {}

.siteNavCol.hasChild > a::before {
	transform: translate( -50% , -50% ) rotate( 90deg );
}

.siteNavCol.hasChild > .siteNavRow {
/*
	max-height: 0px;
	overflow: hidden;
*/
}

/* 子要素を展開している場合 */
.siteNavCol.hasChild.open {}

.siteNavCol.hasChild.open > a::before {
	transform: translate( -50% , -50% ) rotate( -90deg );
}

.siteNavCol.hasChild.open > .siteNavRow {
/*	max-height: 1000px; */
}


/* 第2階層以降 */
.siteNavRow .siteNavRow {}

.siteNavCols .siteNavCols {
	padding: 5px 0px 5px 1em;
}

.siteNavCol .siteNavCol {}


/* 中身の間隔調整 */
.siteNavInner > * { margin: 30px 0; }
.siteNavInner > *:first-child { margin-top: 0; }
.siteNavInner > *:last-child  { margin-bottom: 0; }



/** for Tablet ---------------------------------- **/

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


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

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


/** for Print ----------------------------------- **/

@media print {
}


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


	サイト共通ナビゲーション枠

	[想定タグ]

	<!-- start site menu -->
	<div class="siteMenu XXXX">
	<div class="siteMenuInner">
	[メニュー .siteNav 等]
	<p class="siteMenuClose"><a>CLOSE</a></p>
	</div>
	</div>
	<!-- end site menu -->


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



.siteMenu {
	display: block;
	position: fixed;
	left: 0;
	right: auto;
	top: auto;
	bottom: 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;	

	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
	
	z-index: 900;
	transition: all 1s;
	
	background-color: inherit;
	color: inherit;
}

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

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

.siteMenuClose a {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 30px 0 0 0;
	box-sizing: border-box;

	color: var(--text-color);
	text-align: center;
	font-size: smaller;
	cursor: pointer;
}
.siteMenuClose a::before,
.siteMenuClose a::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 15px;
	width: 30px;
	height: 1px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: var(--text-color);
}
.siteMenuClose a::before { transform: translateX(-50%) rotate( -45deg ); }
.siteMenuClose a::after  { transform: translateX(-50%) rotate(  45deg ); }


/* マージンを一定間隔にする */
.siteMenuInner > * { margin: 50px 0; }
.siteMenuInner > *:first-child { margin-top: 0; }
.siteMenuInner > *:first-child { margin-bottom: 0; }



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


/** for Smart Phone ------------------------------ **/
@media all and (max-width:767px) {
}


/** for Print ------------------------------------ **/
@media print {

	/* 印刷では表示しない */
	.siteMenu {
		display: none;
	}
}




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


	.siteFooter     サイト共通フッター

	[想定タグ]

	<!-- start site common footer -->
	<footer id="" class="siteFooter">
	<div class="siteFooterInner">
	<p class="siteFooterCopyright"><span>Copyright </span>&copy; AAAAA Co.,Ltd.<span> All Rights Reserved.</span></p>
	</div>
	</footer>
	<!-- end site common footer -->


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



.siteFooter {
	display: block;
	position: relative;
	margin: 0;
	padding: 50px;
	box-sizing: border-box;
	transition: all 0.5s;
}

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

.siteFooter a {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s;
}
.siteFooter a:link,
.siteFooter a:visited,
.siteFooter a:hover,
.siteFooter a:active { color: inherit; }


/* Copyright */
.siteFooterCopyright {
	clear: both;
	font-size: smaller;
	text-align: center;
}


/* マージンを一定間隔にする */
.siteFooterInner > * { margin: 50px 0; }
.siteFooterInner > *:first-child { margin-top: 0; }
.siteFooterInner > *:last-child  { margin-bottom: 0; }



/** for Tablet ----------------------------------- **/

@media all and (max-width:1024px) and (min-width:768px) {
	.siteFooter {
		padding: 50px 30px;
	}
}


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

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

	.siteFooter {
		padding: 30px;
	}

	/* Copyright */
	.siteFooterCopyright span {
		display: none;
	}
}



/** for Print ----------------------------------- **/

@media print {}




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


	.sitePageTop       ページTOPボタン   (z-inde:800)

	[想定タグ]

	<!-- start page top -->
	<div class="sitePageTop"><a>PAGE TOP</a></div>
	<!-- end page top -->


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



.sitePageTop {
	display: block;
	position: fixed;
	right: 0;
	bottom: -100px;
	margin: 0;
	padding: 0;
	opacity: 0;
	transition: all 0.5s;
	z-index: 900;
	
	font-size: 8px;
	text-align: center;
}

.sitePageTop a {
	display: block;
	position: relative;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 35px 0 0 0;
	box-sizing: border-box;
	cursor: pointer;

	color: #f0f0f0;
	text-decoration: none;
	
	background-color: rgba(0,0,0,0.6);
	transition: all 0.3s;
}
.sitePageTop a::before {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 15px;
	width: 40%;
	padding: 0 0 40% 0;
	box-sizing: border-box;
	border-top:1px solid #f0f0f0;
	border-right:1px solid #f0f0f0;
	transform: translateX(-50%) rotate(-45deg);
}

.sitePageTop a:hover { 
	color: #f0f0f0;
}


/* スクロールで出てくる */
body.scrolled .sitePageTop {
	bottom: 0;
	opacity: 1;
}



/** for Tablet ---------------------------------- **/

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


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

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


/** for Print ----------------------------------- **/

@media print {
	display: none;
}




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


	.siteSVG    SVGを格納しておくスペース(非表示)


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



.siteSVG {
	display:block;
	position:absolute;
	visibility:hidden;
	right:0;
	bottom:0;
	width: 0;
	height: 0
}



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


	ローディング表示 .siteLoading

	[想定タグ]
	<!-- start site loading -->
	<div class="siteLoading">
	<div class="siteLoadingInner">
	<div class="siteLoadingLogo"><img src="" alt="ロゴ"></div>
	<div class=".siteLoadingStatus"><div class="bar"></div></div>
	<div class=".siteLoadingCircle">
	<svg width="40px" height="40px" viewBox="0 0 40 40">
	<path d="M20,7.5c-0.8,0-1.5-0.7-1.5-1.5V1.5C18.5,0.7,19.2,0,20,0s1.5,0.7,1.5,1.5V6C21.5,6.8,20.8,7.5,20,7.5z"/>
	<path d="M27,9.4c-0.3,0-0.5-0.1-0.7-0.2c-0.7-0.4-1-1.3-0.5-2L28,3.2c0.4-0.7,1.3-1,2-0.5s1,1.3,0.5,2l-2.3,3.9 C28,9.1,27.5,9.4,27,9.4z"/>
	<path d="M32.1,14.5c-0.5,0-1-0.3-1.3-0.8c-0.4-0.7-0.2-1.6,0.5-2l3.9-2.3c0.7-0.4,1.6-0.2,2,0.5c0.4,0.7,0.2,1.6-0.5,2l-3.9,2.3 C32.6,14.4,32.4,14.5,32.1,14.5z"/>
	<path d="M38.5,21.5H34c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h4.5c0.8,0,1.5,0.7,1.5,1.5S39.3,21.5,38.5,21.5z"/>
	<path d="M36,30.8c-0.3,0-0.5-0.1-0.7-0.2l-3.9-2.3c-0.7-0.4-1-1.3-0.5-2c0.4-0.7,1.3-1,2-0.5l3.9,2.3c0.7,0.4,1,1.3,0.5,2 C37,30.5,36.5,30.8,36,30.8z"/>
	<path d="M29.3,37.5c-0.5,0-1-0.3-1.3-0.8l-2.3-3.9c-0.4-0.7-0.2-1.6,0.5-2c0.7-0.4,1.6-0.2,2,0.5l2.3,3.9c0.4,0.7,0.2,1.6-0.5,2 C29.8,37.5,29.5,37.5,29.3,37.5z"/>
	<path d="M20,40c-0.8,0-1.5-0.7-1.5-1.5V34c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5v4.5C21.5,39.3,20.8,40,20,40z"/>
	<path d="M10.7,37.5c-0.3,0-0.5-0.1-0.7-0.2c-0.7-0.4-1-1.3-0.5-2l2.2-3.9c0.4-0.7,1.3-1,2-0.5c0.7,0.4,1,1.3,0.5,2L12,36.8 C11.8,37.3,11.3,37.5,10.7,37.5z"/>
	<path d="M4,30.8c-0.5,0-1-0.3-1.3-0.8c-0.4-0.7-0.2-1.6,0.5-2l3.9-2.3c0.7-0.4,1.6-0.2,2,0.5c0.4,0.7,0.2,1.6-0.5,2l-3.9,2.3 C4.5,30.7,4.2,30.8,4,30.8z"/>
	<path d="M6,21.5H1.5C0.7,21.5,0,20.8,0,20s0.7-1.5,1.5-1.5H6c0.8,0,1.5,0.7,1.5,1.5S6.8,21.5,6,21.5z"/>
	<path d="M7.9,14.5c-0.3,0-0.5-0.1-0.7-0.2L3.2,12c-0.7-0.4-1-1.3-0.5-2c0.4-0.7,1.3-1,2-0.5l3.9,2.3 c0.7,0.4,1,1.3,0.5,2C8.9,14.2,8.4,14.5,7.9,14.5z"/>
	<path d="M13,9.4c-0.5,0-1-0.3-1.3-0.8L9.5,4.7C9,4,9.3,3.1,10,2.7c0.7-0.4,1.6-0.2,2,0.5l2.3,3.9c0.4,0.7,0.2,1.6-0.5,2 C13.5,9.3,13.3,9.4,13,9.4z"/>
	</svg>
	</div>
	</div>
	</div>
	<!-- end site loading -->


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



.siteLoading {
	display : block;
	position : fixed;
	left : 0;
	top : 0;
	width : 100%;
	height : 100%;
	margin : 0;
	padding : 0;
	box-sizing: border-box;

	z-index: 2000;
	background-color : #ffffff;
	transition: all 0.5s;
}

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

/* ロゴ等 */
.siteLoadingLogo {
	display: block;
	position: absolute;
	left: 25%;
	bottom: 50%;
	width: 50%;
	margin: 0 0 10px 0;
	padding: 0;
	text-align: center;
}

.siteLoadingLogo img,
.siteLoadingLogo svg {
	max-width: 200px;
	vertical-align: bottom;
	fill:#a0a0a0;
}

/* ステータスバー */
.siteLoadingStatus {
	display : block;
	position : absolute;
	left : 0;
	top : 0;
	width : 100%;
	height : 3px;
	margin : 0;
	padding : 0;
	overflow : hidden;
}

.siteLoadingBar{
	display : block;
	position : absolute;
	left: 0;
	top:0;
	width : 1%;
	height : 100%;
	margin : 0;
	padding : 0;
	background-color : #000000;
	transition: all 0.5s;
}

/* Circle */
.siteLoadingCircle {
	display: block;
	position: absolute;
	left: 50%;
	top:50%;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50px);
}

.siteLoadingCircle svg {
    display: block;
    position: relative;
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

@keyframes siteLoadingAnim {
    0%  { opacity:0; }
    70% { opacity:1; }
}

.siteLoadingCircle svg path {
    fill:#000000;
    animation-name: siteLoadingAnim;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    opacity:1;
}
.siteLoadingCircle svg path:nth-of-type(1)  { animation-delay: 0; }
.siteLoadingCircle svg path:nth-of-type(2)  { animation-delay: 100ms; }
.siteLoadingCircle svg path:nth-of-type(3)  { animation-delay: 200ms; }
.siteLoadingCircle svg path:nth-of-type(4)  { animation-delay: 300ms; }
.siteLoadingCircle svg path:nth-of-type(5)  { animation-delay: 400ms; }
.siteLoadingCircle svg path:nth-of-type(6)  { animation-delay: 500ms; }
.siteLoadingCircle svg path:nth-of-type(7)  { animation-delay: 600ms; }
.siteLoadingCircle svg path:nth-of-type(8)  { animation-delay: 700ms; }
.siteLoadingCircle svg path:nth-of-type(9)  { animation-delay: 800ms; }
.siteLoadingCircle svg path:nth-of-type(10) { animation-delay: 900ms; }
.siteLoadingCircle svg path:nth-of-type(11) { animation-delay: 1000ms; }
.siteLoadingCircle svg path:nth-of-type(12) { animation-delay: 1100ms; }


/* body.readyで引っ込む */
.siteLoading.complete {
	display: none;
}


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


/** for Smart Phone ----------------------------- **/
@media all and (max-width:767px) {
}


/** for Print ----------------------------------- **/
@media print {
	display: none;
}



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


	.siteSplash       パーツ : Splash画面

	[想定タグ]
	<!-- start site splash -->
	<div class="siteSplash">
	<div class="siteSplashInner">
	<div class="siteSplashScene scene01">[シーン1]</div>
	<div class="siteSplashScene scene02">[シーン2]</div>
	<div class="siteSplashScene scene03">[シーン3]</div>
	<div class="siteSplashSkip"><a>Skip</a></div>
	</div>
	</div>
	<!-- end site splash -->


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



body.splash {
	overflow: hidden;
}


.siteSplash {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	background-color: #f0f0f0;
	transition: all 0.5s;
	z-index: 2100;
}
body.splash .siteSplash {
	display: block;
}

.siteSplashInner {
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
}

.siteSplashScene {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	opacity: 0;
}

.siteSplashSkip {
	display: block;
	position: absolute;
	right: 30px;
	bottom: 30px;
	margin: 0;
	padding: 0;
	
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	
	z-index: 2100;
}

.siteSplashSkip a {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}
.siteSplashSkip a:link,
.siteSplashSkip a:visited { color: inherit; }


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


/** for Smart Phone ----------------------------- **/
@media all and (max-width:767px) {}


/** for Print ----------------------------------- **/
@media print {
	display: none;
}



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


	.siteGDPR      GDPR確認ダイアログ (z-index:1050)

	[想定タグ]
	<!-- start GDPR -->
	<div class="siteGDPR">
	<div class="desc">
	<p>当ウェブサイトでは、お客様の利便性の改善やサービス向上などを目的とした、Google Analyticsによるアクセスログ解析のためにクッキーを使用しています。詳細は<a href="#">プライバシー・ポリシー</a>をご参照ください。</p>
	</div>
	<div class="buttons"><ul>
	<li class="accept"><a>承認する</a></li>
	<li class="denied"><a>承認しない</a></li>
	</ul></div>
	<div class="close"><a><svg viewBox="0 0 40 40"><use xlink:href="#svg-close"></use></svg></a></div>
	</div>
	<!-- end GDPR -->


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



.siteGDPR {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 100%;
	bottom: auto;
	width: 100%;
	margin: 0;
	padding: 20px 40px;
	box-sizing: border-box;
	
	background-color:#f0f0f0;
	z-index: 1050;
	
	transform: translateY(100%);
	transition: all 1s;
}

.siteGDPR .desc {
	width: 65%;
	margin: 0;
	padding: 0 20px 0 0;
	box-sizing: border-box;
}

.siteGDPR .desc p {
	margin: 0;
}

.siteGDPR .buttons {
	width: 25%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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

.siteGDPR .buttons li {
/*	width: 48%; */
	margin: 1px 0;
	padding: 0;
	list-style-type: none;
	box-sizing: border-box;
}

.siteGDPR .buttons li.accept {}

.siteGDPR .buttons a {
	display: block;
	padding: 15px 10px;
	
	background-color: #444444;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-size: larger;
	cursor: pointer;
	
	transition: all 0.3s;
}

.siteGDPR .buttons li.denied a {
	padding: 5px 10px;
	background-color: #c0c0c0;
	font-size: inherit;
}

.siteGDPR .buttons li a:hover,
.siteGDPR .buttons li a:active  { 
	color: #fffff;
	background-color: #cc0000;
}

.siteGDPR .close {
	display: block;
	position: absolute;
	right: 10px;
	top: 10px;
}

.siteGDPR .close a {
	cursor: pointer;
}

.siteGDPR .close svg {
	width: 20px;
	height: 20px;
	fill: #444444;
	transition: all 0.3s;
}

.siteGDPR .close a svg:hover,
.siteGDPR .close a svg:active  {
	fill: #cc0000;
}


/* 表示 */
body.ready .siteGDPR.open {
	top: auto;
	bottom: 0;
	transform: translateY(0%);
}


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

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


/* for smart phone */
@media all and (max-width:767px) {
	
	.siteGDPR {
		display: block;
		padding: 20px 40px;
	}

	.siteGDPR .desc {
		width: auto;
		padding: 0;
	}

	.siteGDPR .buttons {
		width: auto;
		margin: 20px 0 0 0;
	}
}



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


	.siteModal     モーダルWindow

	[想定タグ]

	<!-- start site modal -->
	<div class="siteModal">
	<div class="siteModalBg"></div>
	<div class="siteModalInner">
	[コンテンツ]
	</div>
	<div class="siteModalClose"><a>CLOSE</a></div>
	</div>
	<!-- end site modal -->


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



.siteModal {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 1200;
	
	transition: all 0.5s;
}

.siteModalBg {
	display: block;
	position: absolute;
	left: 0;
	top:0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	background-color: rgba(0,0,0,0.8);
	cursor: pointer;
}

.siteModalInner {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
/*
	min-width: 100px;
	min-height: 100px;
*/
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	background-color:#ffffff;
	color: #231815;
	
	transform: translate(-50%, -50%);
}

.siteModalClose {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	padding: 0;
	transform: translate(50%, -50%);
	z-index: 1201;
}

.siteModalClose a {
	display: block;
	position: relative;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	z-index: 1210;
	
	border-radius: 50%;
	background-color: #888888;
	
	font-size: 1px;
	text-indent: -9999px;
	overflow: hidden;
}

.siteModalClose a::before,
.siteModalClose a::after {
	content: "";
	display: block;
	position: absolute;
	left: 20%;
	top: 50%;
	width: 60%;
	height: 2px;
	background-color: #ffffff;
	transition: all 0.3s;
}
.siteModalClose a::before { transform: rotate(45deg); }
.siteModalClose a::after  { transform: rotate(-45deg); }


/* モーダルの開閉 */
@keyframes siteModalAnim {
	0%   { top: 100%; visibility: hidden;  }
	1%   { top: 100%; visibility: visible; }
	100% { top:    0; visibility: visible; }
}
@keyframes siteModalAnimRev {
	0%   { top:    0; visibility: visible; }
	99%  { top: 100%; visibility: visible; }
	100% { top:    0; visibility: hidden;  }
}
.siteModal {
	top: 100%;
	visibility: hidden;
}

.siteModal.open {
	animation-name: siteModalAnim;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.siteModal.close {
	animation-name: siteModalAnimRev;
	animation-duration: 0.5s;
	animation-timing-function: ease-in;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/* Youtube用モーダル */
.siteModal.youtube .siteModalInner{
	width: 60%;
	width: 70%;
	padding: 0 0 33.75%;
	padding: 0 0 39.375%;
}

.siteModal.youtube iframe {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 1;
}



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


	.scrollBar      ユーティリティ : 疑似スクロールバー


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



/* スクロール対象 */
.scrollBarTarget {}

/* 親要素 */
.scrollBarWrapper {}

/* スクロールバー本体 */
.scrollBar {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 10px;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	z-index:20;

	overflow: hidden;
	cursor: pointer;
	
	background-color: transparent;
}

/* スクロールバー中身 */
.scrollBarInner {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 90%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;

	background-color: #c0c0c0;
	border-radius: 5px;
}

/*  */
.scrollBarWrapper.scroll .scrollBar {
	display: block;
} 



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


	.hasSideBar       ユーティリティ : サイトバーがある場合の配置


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



.hasSidebar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
}
.hasSidebar > *:first-child { margin-top: 0; }
.hasSidebar > *:last-child  { margin-bottom: 0; }

.hasSidebar > .hasSidebarMain {
	display: block;
	position: relative;
	width: calc( 100% - 320px );
	margin: 0 20px 0 0;
	padding: 0;
	box-sizing: border-box;
}
.hasSidebar > .hasSidebarMain > *:first-child { margin-top: 0; }
.hasSidebar > .hasSidebarMain > *:last-child  { margin-bottom: 0; }

.hasSidebar > .hasSidebarSide {
	display: block;
	position: relative;
    width: 300px;
    margin: 0;
    padding: 0;
	box-sizing: border-box;
} 
.hasSidebar > .hasSidebarSide > *:first-child { margin-top:0; }
.hasSidebar > .hasSidebarSide > *:last-child  { margin-bottom: 0; }



/* サイドバーがある場合(左) */
.hasSidebar.left {
	flex-direction: row-reverse;
}

.hasSidebar.left > .hasSidebarMain {
	margin: 0 0 0 20px;
}


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

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

	.hasSidebar > .hasSidebarMain {
		width: calc( 100% - 270px );
	}

	.hasSidebar > .hasSidebarSide {
	    width: 250px;
	} 
}



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

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

	.hasSidebar {
		display: block;
	}

	.hasSidebar > .hasSidebarMain {
		width: auto;
		margin: 0;
	}
	.hasSidebar > .hasSidebarMain::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	.hasSidebar > .hasSidebarSide,
	.hasSidebar.left > .hasSidebarMain {
	    width: auto;
	    margin: 20px 0 0 0;
	}
	.hasSidebar > .hasSidebarSide::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
}



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


	(wordpressテンプレート用)
	記事一覧 .posts
	記事詳細 .post

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


	[想定タグ]

	※主に、記事詳細ページを想定
	<!-- start post -->
	<article id="XXX" class="post [single|page] XXX">
	<div class="postInner">

	<header class="postHeader">
	<div class="postHeaderInner">
	<ul class="postCategories">
	<li class="postCategory"><a href="#">カテゴリー</a></li>
	</ul>
	<h2 class="postTitle">ページのタイトル</h2>
	<ul class="postTags">
	<li class="postTag"><a href="#">#タグ</a></li>
	</ul>
	<p class="postDate">XXXX.XX.XX</p>
	</div>
	</header>

	<div class="postMain">
	<div class="postMainInner">
	<div class="postContent">記事の内容</div>
	<div class="postMore"><a href="#">次のページへ</a></div>
	<div class="postPages">....[ページリンク]</div>
	</div>
	</div>

	<footer class="postFooter">
	<div class="postFooterInner">
	</div>
	</footer>

	</div>
	</article>
	<!-- end post -->

	※主に、記事一覧ページを想定

	<!-- start posts -->
	<section id="XXX" class="posts XXX">
	<div class="postsInner">

	<header class="postsHeader">
	<div class="postsHeaderInner">
	<h2 class="postsTitle">ページのタイトル</h2>
	</div>
	</header>

	<div class="postsMain">
	<div class="postsMainInner">
	<div class="postsContent">記事の内容</div>
	<div class="postsList">
	記事一覧( .tile )
	</div>
	<div class="postsPages">....[ページリンク]</div>
	</div>
	</div>

	<footer class="postsFooter">
	<div class="postsFooterInner">
	</div>
	</footer>

	</div>
	</section>
	<!-- end posts -->



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



.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 {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}


/* ヘッダー    */
/* 中心部分    */
/* フッター部分 */
.postHeader,
.postsHeader,
.postMain,
.postsMain,
.postFooter,
.postsFooter {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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



/* 画像 */
.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: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	object-fit: contain;
}


/* タイトル */
.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;
}

.postsTitle span {
	display: inline-block;
	vertical-align: middle;
	padding: 0 0 0 1em;
	font-size: smaller;
	font-weight: 400;
}




/* カテゴリー一覧(詳細のみ) */
.postCategories,
.postsCategories {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	list-style-type: none;
	font-size: smaller;
}

.postCategory,
.postsCategory {
	display: block;
	position: relative;
	margin: 2px 2px 0 0;
	padding: 0;
	box-sizing: border-box;
}

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

.postCategory.sel a,
.postsCategory.sel a {
	color: var( --text-color );
	background-color: transparent;
}


/* ハッシュタグ(詳細のみ) */
.postTags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
}

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

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



/* 日付(詳細のみ) */
.postDate {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: smaller;
}


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

.postContent > *:first-child,
.postsContent > *:first-child { margin-top: 0; }
.postContent > *:last-child,
.postsContent > *:last-child { margin-bottom: 0; }






/* 詳細はこちらボタン      */
/* 次ページへのリンクボタン */
.postMore {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postMore a {
	display: block;
	position: relative;
	margin: 5px 10px;
	padding: 20px 50px;
	box-sizing: border-box;
		
	background-color: var(--button-background-color);
	color: var(--button-text-color);
	line-height: 1.3;
	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);
}

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



/* .postPages  ページネーション(詳細ページ用)  */
/* .postsPages ページネーション(一覧ページ用)  */
.postsPages {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.postPages,
.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;
}

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

.postPages a.post-page-numbers,
.postPages span.post-page-numbers,
.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;
}

.postPages span.post-page-numbers.current,
.postsPages span.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,
.postsPages a.page-numbers:link,
.postsPages a.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,
.postsPages a.page-numbers:hover,
.postsPages a.page-numbers:active {
	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-left: -10px !important;
	margin-right: -10px !important;
	padding: 0;
	box-sizing: border-box;
}

/*
.postsList .post.tile {
	width: calc( 100% / 4 - 20px );
	margin: 10px;
}
*/

/* 間隔調整 */
.postHeaderInner > *,
.postsHeaderInner > * { margin: 20px 0; }
.postMainInner > *,
.postsMainInner > *   { margin: 50px 0; }
.postFooterInner > *,
.postsFooterInner > * { margin: 20px 0; }

.postHeaderInner > *:first-child,
.postsHeaderInner > *:first-child,
.postMainInner > *:first-child,
.postsMainInner > *:first-child,
.postFooterInner > *:first-child,
.postsFooterInner > *:first-child { margin-top: 0; }

.postHeaderInner > *:last-child,
.postsHeaderInner > *:last-child,
.postMainInner > *:last-child,
.postsMainInner > *:last-child,
.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;
	}
}


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

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



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


	一覧用各POST    .tile

	[想定タグ]
	<article id="XXX" class="tile XXX [hasImage|noImage]">
	<div class="tileInner">

	<div class="tileRow image">
	<div class="postImage"><a href="#" title="タイトル"><img src="画像URL" alt="画像alt"></a></div>
	</div>
	<div class="tileRow text">
	<ul class="postCategories">
	<li class="tileCategory"><a href="#">カテゴリー1</a></li>
	</ul>
	<h3 class="tileTitle"><a href="#">タイトル</a></h3>
	<ul class="tileTags">
	<li class="tileTag"><a href="#">タグ1</a></li>
	</ul>
	<p class="tileDate">XXXX.XX.XX</p>
	<div class="tileExcerpt">簡単な説明</div>
	<div class="tileMore"><a href="#">詳しくはこちら</a></div>
	</div>
	</div>
	</article>


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



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

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

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

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

.tileRow.image {}

.tileRow.text {
	margin: 10px 0 0 0;
}


/* 画像 (真四角にトリミング) */
.tileImage {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 100%;
	box-sizing: border-box;
	overflow: hidden;
}

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

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


/* タイトル */
.tileTitle {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: inherit;
	font-weight: 700;
}


/* カテゴリー一覧 */
.tileCategories {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	list-style-type: none;
	font-size: smaller;
}

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

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


/* ハッシュタグ */
.tileTags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
	font-size: smaller;
}

.tileTag {
	display: block;
	position: relative;
	margin: 0 1em 0 0;
	padding: 0;
	box-sizing: border-box;
}
.tileTag a::before {
	content: "#";
}


/* 日付(詳細のみ) */
.tileDate {
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: smaller;
}


/* 説明 */
.tileContent {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.tileContent::after { content: ""; display: block; clear: both; }



/* 詳細はこちらボタン      */
/* 次ページへのリンクボタン */
.tileMore {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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

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

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


/* 間隔調整 */
.tileRow > * { margin: 10px 0; }
.tileRow > *:first-child { margin-top: 0; }
.tileRow > *:last-child  { margin-bottom 0; }




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

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

}


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

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

	/* 縦一列に */
	.tile {
		width: auto;
		margin: 10px 0;
	}
}



/** for print ----------------------- **/

@media print {
	
}



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


	.newsRow wordpress用 : ニュース一覧用 記事1行

	<dl class="newsRow">
	<dt class="newsRowDate">YYYY.mm.dd</dt>
	<dd class="newsRowText"><a class="newsRowCategory" href="">[ニュースカテゴリー]</a><a href="xx">ニュース記事タイトルまたは概要</a></dd>
	</dl>


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


/* 一覧 */
.newsRows {}

/* ニュース1行 */
.newsRow {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.newsRow a {
	text-decoration: none;
	transition: all 0.3s;
}

/*
.newsRow a:link,
.newsRow a:visited { color: inherit; }
.newsRow a:hover,
.newsRow a:active { color: var( --hover-color ); }
*/

.newsRowDate {
	width: 6em;
	margin: 0;
	padding: 0.2em 0 0 0;
	box-sizing: border-box;
	
	font-size: smaller;
	font-weight: inherit;
}

.newsRowText {
	width: calc( 100% - 6em );
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.newsRow a.newsRowCategory {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0.5em 0 0;
	padding: 0.1em 0.5em;
	box-sizing: border-box;
	
	background-color: var( --button-background-color );
	color: var( --button-text-color );
	font-size: smaller;
}

.newsRow a.newsRowCategory:hover {
	background-color: var( --button-hover-background-color );
	color: var( --button-hover-text-color );
}



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


	.notFound  wordpress用 : 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;
}