.leftbar.leftbar.leftbar.leftbar.leftbar.leftbar@charset "utf-8";
/* CSS Document */


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


	サイト共通パーツ用CSS

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


	[version]

	@version   1.0 2021.02.24  New
	@version   1.1 2021.07.05  body.leftNav .siteNav 追加

	@version   2.0 2021.10.04  reset.cssに合わせて改修
	@version   2.1 2022.02.03  パンくず、２列構成（左）追加

	@version   3.0 2022.05.18  大改修（主にスマートギフト用を想定）

	@version   4.0 2022.09.30  body.headerNav廃止
	                           mainNav を siteMainNav に変更
	                           subNav を siteSubNav に変更

	@version   5.0 2023.01.23  ナビゲーション関係を全面改定
	                           .siteMainNavを.siteNav.main に変更
	                           .siteSubNav を.siteNav.sub  に変更
	                           .siteIconNavを.siteNav.icon に変更
                               .siteHeaderMenu を新設
	                           .siteNav を廃止


	[history]

	@history   2021.04.95 littaitomari.jp 実装
	@history   2022.05.18 リンベルスマートギフト実装
	@history   2022.05.18 smilehikita.com 実装


	[CSS]

	1. :root           共通パラメータ
	2. body, html      body, html

	3. .siteMainNav    サイト共通ナビパーツ1 : メインナビ
	4. .siteSubNav     サイト共通ナビパーツ2 : サブナビ
	5. .siteSNSNav     サイト共通ナビパーツ3 : SNSナビ
	6. .siteIconNav    サイト共通ナビパーツ4 : アイコン付きナビ(新規)
	7. .siteTitle      共通パーツ : サイトタイトル(ロゴ)
	8. .siteHeader     サイト共通ヘッダー     















1.          HTMLタグリセット
	        body.headerNav   PCで見たとき、ナビがヘッダーで横並びになる
	        body.leftNav     PCで見たとき左側にメニューが開いた状態で表示される
	        body.rightNav    PCで見たとき右側にメニューが開いた状態で表示される
            ※SPの時はsiteNavと同じハンバーガーメニューになる

	2.     .siteHeader       サイト共通ヘッダー
	3.     .siteMain         メインコンテンツ部分

	3-1.   .siteContent      1列構成、真ん中寄せ
	       .siteContent.hasSidebar           2列構成、右サイドバー
	       .siteContent.hasSidebar.leftbar   2列構成、左サイドバー

	3-2.   .siteContentMain  2列構成、メイン部分
	3-3.   .siteContentSide  2列構成  サイドバー部分
	3-4.   .siteBlock        コンテンツブロック
	4.     .siteBread        パンくずリスト
	5.     .siteNav          サイト共通ナビ (z-index:1100)
    6.     .siteFooter       サイト共通フッター

	7.      .mainNav         ナビ共通パーツ : メインナビ
	8.      .subNav          ナビ共通パーツ : サブナビ
	9.      .contactNav      ナビ共通パーツ : お問い合わせナビ
	10.     .snsNav          ナビ共通パーツ : SNSナビ

	11.     .pageTop         ページTOPボタン      (z-inde:900)
	12.     .siteLoading     ローディング表示     (z-index:2000)
	13.     .siteGDPR        GDPR確認ダイアログ   (z-index:1200)



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




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


	2. body, html


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


:root { }



html {
		
	/* 背景色 */
	--background-color   : #ffffff;
	
	/* フォントファミリー */
	--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;
	--eng-font-family    : "Jost", sans-serif;
	
	/* テキスト色 */
	--text-color: #231815;
	--text-link-color: #0000aa;
	--text-hover-color: #aa0000;

	/* テキストスタイル */
	--font-size : 16px;
	--font-weight : 400;
	--line-height : 1.8;
	
	/* ボタン系のカラー */
	--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;
	
	
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	font-family: var( --gothic-font-family );
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	line-height: var(--line-height);
}


/* padding-topをデザインに合わせて変える */
body {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	color: var(--text-color);
	background-color: var( --background-color );
}

a {
	text-decoration: none;
	color: inherit;
	transition: all 0.3s;
}
a:link,
a:visited { color: var(--text-link-color); }
a:hover,
a:active  { color: var(--text-hover-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 {}







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

	サイト共通ヘッダー

	[想定タグ]

	<header id="header" class="siteHeader">
	<div class="siteHeaderInner">
	<h1 class="siteTitle"><a href="" title=""><img src="img/logo.svg" alt=""></a></h1>
	</div>
	</header>

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


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

	background-color: inherit;
	transition: all 0.5s;
	
	z-index: 1000;
}
.siteHeader::after {
	clear: both;
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	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;
	
	font-size: larger;
	font-weight: inherit;
	text-align: center;
	
	z-index: 1010;
}

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

.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%);
}



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

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



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

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


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

@media print {

	.siteHeader {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
	}
}


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


	framework : サイトメインコンテンツ部分

	[想定タグ]
	<main class="siteMain">
	<div class="siteMainInner">

	</div>
	</main>


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


.siteMain {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.siteMain::after {
	clear: both;
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	visibility:hidden;
}

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

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


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

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



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

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


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

@media print {}




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


	framework : ナビゲーションツリー

	[想定タグ]
	<nav class="siteNav humberger-main">
	<div class="siteNavInner">

	<h3 class="siteNavTitle">ナビの見出し</h3>

	<div class="siteNavRow">
	<ul class="siteNavCols">
	<li class="siteNavCol hasChild"><a href="">メインカテゴリー1(子要素あり)</a>
		<div class="siteNavRow">
		<ul class="siteNavCols">
		<li class="siteNavCol"><a href="">サブカテゴリー1</a></li>
		<li class="siteNavCol"><a href="">サブカテゴリー2</a></li>
		</ul>
		</div>
	</li>
	<li class="siteNavCol"><a href="">メインカテゴリー1</a></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 auto;
	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;
	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; }


/** パーツ : SNSナビ ------------------- **/

.siteNav.sns {}

.siteNav.sns .siteNavRow {}

.siteNav.sns .siteNavCols {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}

.siteNav.sns .siteNavCol {
	width: 4em;
	margin: 10px 1em;

	text-align: center;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	line-height: 1;
}
.siteNav.sns .siteNavCol::after   {

}
.siteNav.sns .siteNavCol.twitter::after   { content: "X";         }
.siteNav.sns .siteNavCol.facebook::after  { content: "facebook";  }
.siteNav.sns .siteNavCol.instagram::after { content: "instagram"; }
.siteNav.sns .siteNavCol.youtube::after   { content: "youtube";   }
.siteNav.sns .siteNavCol.line::after      { content: "line";      }
.siteNav.sns .siteNavCol.note::after      { content: "note";      }
.siteNav.sns .siteNavCol.voicy::after     { content: "voicy";     }


.siteNav.sns .siteNavCol a {
	padding: 0;
}

.siteNav.sns .siteNavCol svg   {
	display: block;
	width: 25px;
	height: auto;
	margin: 0 auto 0.5em;
	vertical-align: bottom;
}
.siteNav.sns .siteNavCol.twitter svg   { fill: #000000; }
.siteNav.sns .siteNavCol.facebook svg  { fill: #32508E; }
.siteNav.sns .siteNavCol.instagram svg { fill: #32508E; }
.siteNav.sns .siteNavCol.youtube svg   { fill: #FF0000; }
.siteNav.sns .siteNavCol.line svg      { fill: #00B300; }
.siteNav.sns .siteNavCol.note svg      { fill: #000000; }
.siteNav.sns .siteNavCol.voicy svg     { fill: #ff7d32; }



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

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



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

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


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

@media print {}




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


	framework : メニュー枠

	[想定タグ]
	<div class="siteMenu humberger">
	<div class="siteMenuInner">

	<h2 class="siteMenuTitle hasLogo"><a href=""><img src="" alt=""<span>ホーム</span></a></h2>

	</div>
	</div>

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


.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: 1010;
	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 ); }

.siteMenuClose a:link::before,
.siteMenuClose a:link::after,
.siteMenuClose a:visited::before,
.siteMenuClose a:visited::after  { color: var(--text-color); }
.siteMenuClose a:hover::before,
.siteMenuClose a:hover::after,
.siteMenuClose a:active::before,
.siteMenuClose a:active::after  { color: var(--text--hovercolor); }


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



/* ハンバーガーで開閉するメニュー */
.siteMenu.humberger {
}

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



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

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



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

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


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

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



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


	framework : ハンバーガーメニューアイコン

	[想定タグ]
	<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;
}

.siteHumberger a {
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.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: var( --text-color );
	
	opacity: 1;
    transition: all 0.3s;
}
.siteHumbergerBar.bar01 { top: 20%; transform: none; }
.siteHumbergerBar.bar02 { top: 50%; transform: none; }
.siteHumbergerBar.bar03 { top: 80%; transform: none; }

.siteHumberger a::after {
	content: "MENU";
	display: none;
	position: relative;
	margin: 3px 0 0 0;
	padding: 0;
	box-sizing: border-box;
	
	font-size: 10px;
	font-weight: 700;
	color: var( --text-color );
	text-align: center;
	line-height: 1;
	
	transition: all 0.3s;
}


/* hover */
.siteHumberger a:link,
.siteHumberger a:visited,
.siteHumberger a:link .siteHumbergerBar,
.siteHumberger a:visited .siteHumbergerBar {
	background-color: var( --text-color );
}
.siteHumberger a:hover,
.siteHumberger a:active,
.siteHumberger a:hover .siteHumbergerBar,
.siteHumberger a:active .siteHumbergerBar {
	background-color: var( --text-hover-color );
}

/* メニューのが開いている時 */
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 a::after {
	content: "CLOSE";
}


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

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



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

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


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

@media print {
	
	.siteHumberger {
		display: none;
	}
}




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


	framework : サイト共通フッター

	[想定タグ]
	<footer id="footer" class="siteFooter">
	<div class="siteFooterInner">
	<h2 class="siteFooterTitle"><a href=""><img src="" alt="">XXX株式会社</a></h2>
	<div class="siteFooterCopyright"><span>Copyright </span>&copy; HEVIZ Co.,Ltd.<span> All Rights Reserved.</span></div>
	</div>
	</footer>


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


.siteFooter {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.siteFooter::after {
	clear: both;
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	visibility:hidden;
}

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


/* パーツ : タイトル ----- */

.siteFooterTitle {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
		
	font-size: inherit;
	text-align: center;
	line-height: 1;
	white-space: nowrap;
}

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

.siteFooterTitle img,
.siteFooterTitle svg {
	display: block;
	margin: 0 auto 5px;
	vertical-align: bottom;	
}


/* パーツ : コピーライト ------- */

.siteFooterCopyright {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	font-size: smaller;
	text-align: center;
}



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

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



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

@media all and (max-width:767px) {
	
	/* パーツ : コピーライト ------- */
	.siteFooterCopyright span {
		display: none;
	}
}


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

@media print {
	
	/* パーツ : タイトル ----- */
	.siteFooterTitle {
		display: none;
	}
}



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


	ページTOPボタン   (z-inde:900)

	[想定タグ]
	<div class="sitePageTop"><a></a></div>


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


.sitePageTop {
		
	--sitePageTop-text-color: #f0f0f0;
	--sitePageTop-background-color: rgba(0,0,0,0.6);
	--sitePageTop-hover-background-color: rgba(0,0,0,0.9);
	
	display: block;
	position: fixed;
	right: 0;
	bottom: -100px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	opacity: 0;
	transition: all 0.5s;
	z-index: 900;
}

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

	background-color: var( --sitePageTop-background-color );
	transition: all 0.3s;
}
.sitePageTop a::before {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 25%;
	margin: 0;
	padding: 0 0 25%;
	box-sizing: border-box;

	border-top:3px solid var( --sitePageTop-text-color );
	border-right:3px solid var( --sitePageTop-text-color );
	background-color: transparent;
	
	transform: translate(-50% , -50%) rotate(-45deg);
	transition: all 0.3s;
}
.sitePageTop a::after {
	content: "PAGE TOP";
	display: block;
	position: absolute;
	left: 0;
	top: 70%;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	transition: all 0.3s;

	color: var( --sitePageTop-text-color );
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

.sitePageTop a:hover {
	background-color: var( --sitePageTop-hover-background-color );
}


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



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

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



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

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


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

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




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

	フリーワード検索フォーム

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


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

.siteFreewordInner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-end;
	width: 250px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

input[type="search"].siteFreewordSearch {
	display: block;
	width: calc( 100% - 60px );
	max-width: none;
	margin: 0;
	padding: 0 0.5em;
	box-sizing: border-box;

	color: inherit;
	font-family: var( --gothic-font-family );
	font-size: inherit;
	line-height: 38px;

	box-shadow: 0px 0px 0px 0px;

	background-color: #ffffff;
	border: 1px solid #888888;
	border-radius: 0;

	outline: none;
	appearance: none;
}
input[type="search"].siteFreewordSearch::placeholder { color:#ccc; }

input[type="submit"].siteFreewordSubmit {
	display: block;
	width: 60px;
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	color: var( --button-text-color );
	font-family: var( --gothic-font-family );
	font-size: inherit;
	line-height: 38px;
	text-align: center;

	box-shadow: 0px 0px 0px 0px;

	background-color: var( --button-background-color );
	border: 1px solid var( --button-background-color );
	border-radius: 0;

	outline: none;
	appearance: none;
	cursor: pointer;

	transition: all 0.3s;
}
input[type="submit"].siteFreewordSubmit:hover {
	color            : var( --button-hover-text-color );
	background-color : var( --button-hover-background-color );
	border-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 {

	.siteHumberger {
		display: none;
	}
}












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


	フリーワード検索フォーム


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



/*
.siteNav.freeword {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-end;
	width: auto;
	max-width: none;
}

.siteNav.freeword input {
	display: block;
}

.siteNav.freeword input.search-field {
	width: calc( 100% - 60px );
	border-left: 0;
	border-top: 0;
	border-right: 0;
	border-color: #ddd;
}
*/

















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


	.siteContent     コンテンツブロック

	<div class="siteContent">[コンテンツ]</div>


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



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

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




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

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

	.siteContent {
		width: calc(100% - 60px);
	}
}


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

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

	.siteContent {
		width: auto;
		margin: 0 20px;
	}
}



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


	.siteBlock      各ブロック


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



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



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


	.hasSideBar       サイトバーがある場合の配置


	<div class="hasSidebar [left]">
	<div class="hasSidebarMain"></div>
	<div class="hasSidebarSide"></div>
	</div>


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



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






























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


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

	[想定タグ]
	<div class="siteBread">
	<ul>
	<li class="home"><a href="">ホーム</a></li>
	<li><a href="">階層1</a></li>
	<li><a href="">階層2</a></li>
	<li>名称</li>
	</ul>
	</div>


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



.siteBread {
	display: block;
	position: relative;
	width: calc(100% - 100px);
	margin: 10px auto;
	padding: 0;
	font-size: smaller;
}

.siteBread a {
	display: block;
	position: relative;
	margin: 0;
	padding: 0 30px 0 0;
	color: inherit;
	text-decoration: none;
	transition: all 0.3s;
}
.siteBread a::after {
	content: "";
	display: block;
	position: absolute;
	right: 15px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin: 0;
	padding: 0;
	border-top: 1px solid #888888;
	border-right: 1px solid #888888;
	transform: translateY(-50%) rotate(45deg);
}

.siteBread a:link,
.siteBread a:visted { color: inherit; }
.siteBread a:hover,
.siteBread a:active { color: inherit; text-decoration: underline; }


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

.siteBread li {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}


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

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

	.siteBread {
		width: calc(100% - 60px);
	}
}
	


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

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


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

@media print {
	
	.siteBread {
		display: none;
	}
}



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


	パーツ : ローディング表示 .siteLoading

	[想定タグ]
	<!-- start site loading -->
	<div class="siteLoading">
	<div class="logo"><img src="" alt="ロゴ"></div>

	<!-- 読み込みステータスバー表示 -->
	<div class="status"><div class="bar"></div></div>

	<!-- 読み込みクルクル -->
	<div class="circle">
	<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>
	<!-- end site loading -->


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



.siteLoading {
	display : block;
	position : fixed;
	left : 0;
	top : 0;
	width : 100%;
	height : 100%;
	margin : 0;
	padding : 0;
	color : #231916;
	background-color : #ffffff;
	z-index : 2000;
	transition: all 0.5s;
}

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

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

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

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

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

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

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

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


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



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


	.siteSplash       パーツ : 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;
}

.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;
	text-decoration: none;
}
.siteSplashSkip a:link,
.siteSplashSkip a:visited { color: inherit; }









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


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


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

@media print {

	.siteGDPR {
		display: none;
	}	
}



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


	モーダルWindow


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



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


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

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


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

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


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

@media print {
	.siteModal {
		display: none;
	}
}



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


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


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



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



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

@media print {
	
	.siteSVG {
		display:none;
	}
}



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


	.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: #d0d0d0;
	border-radius: 5px;
	transition: all 0.2s;
}

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



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

	wordpress テンプレート共通パーツ

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



/* タイトル ----- */

.siteTileTitle,
.siteArchiveTitle,
.sitePostTitle {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	font-size: 2rem;
	font-weight: 700;
	line-height: calc( var(--line-height) / 2 );
}

.siteTileTitle {
	font-size: 1rem;
	font-weight: 700;
	line-height: var(--line-height);
}

.siteTileTitle a,
.siteArchiveTitle a,
.sitePostTitle a {
	color: inherit;
	text-decoration: none;
}

.siteTileTitle a:link,
.siteArchiveTitle a:link,
.sitePostTitle a:link { color: inherit; }
.siteTileTitle a:visited,
.siteArchiveTitle a:visited,
.sitePostTitle a:visited { color: inherit; }
.siteTileTitle a:hover,
.siteArchiveTitle a:hover,
.sitePostTitle a:hover { color: var(--text-hover-color); }
.siteTileTitle a:active,
.siteArchiveTitle a:active,
.sitePostTitle a:active { color: var(--text-hover-color); }


/** 日付 ----- */

.siteTileDate,
.sitePostDate {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	font-size: smaller;
	line-height: 1.3;
}


/* カテゴリー一覧 ----- */

.siteTileCategories,
.sitePostCategories {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	margin: 0.8rem 0;
	padding: 0;
	box-sizing: border-box;
}

.siteTileCategories a,
.sitePostCategories a {
	display: block;
	position: relative;
	margin: 0 0.2em 0.2em 0;
	padding: 0.2em 1em;
	box-sizing: border-box;

	text-decoration: none;
	text-align: center;
	font-size: smaller;
	line-height: 1.2;
	white-space: nowrap;

	background-color: var(--button-background-color);
	color: var(--button-text-color);
	transition: all 0.3s;
}

.siteTileCategories a:first-child,
.sitePostCategories a:first-child {
	margin-left: 0;
}
.siteTileCategories a:last-child,
.sitePostCategories a:last-child {
	margin-right: 0;
}

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


/* タグ一覧 ----- */

.siteTileTags,
.sitePostTags {
	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;
}

.siteTileTags a,
.sitePostTags a {
	display: block;
	position: relative;
	margin: 0 1em 0.2em 0;
	padding: 0;
	box-sizing: border-box;
	
	color: inherit;
	text-decoration: none;
	font-size: smaller;
	line-height: 1.2;
}
.siteTileTags a::before,
.sitePostTags a::before {
	content: "#";
}

.siteTileTags a:first-child,
.sitePostTags a:first-child { margin-left: 0; }
.siteTileTags a:last-child,
.sitePostTags a:last-child { margin-right: 0; }

.siteTileTags a:link,
.sitePostTags a:link { color: inherit; }
.siteTileTags a:visited,
.sitePostTags a:visited { color: inherit; }
.siteTileTags a:hover,
.sitePostTags a:hover { color: var(--text-hover-color); }
.siteTileTags a:active,
.sitePostTags a:active { color: var(--text-hover-color); }


/* 日付 ----- */

.siteTileDate,
.siteArchiveDate,
.sitePostDate {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: smaller;
}


/* 概要 ------ */

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


.siteTileExcerpt > *:first-child,
.siteAechiveExcerpt > *:first-child,
.sitePostExcerpt > *:first-child { margin-top: 0; }
.siteTileExcerpt > *:last-child,
.siteAechiveExcerpt > *:last-child,
.sitePostExcerpt > *:last-child { margin-bottom: 0; }


/* 本文 ------ */

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

.siteTileContent > *:first-child,
.siteAechiveContent > *:first-child,
.sitePostContent > *:first-child { margin-top: 0; }
.siteTileContent > *:last-child,
.siteAechiveContent > *:last-child,
.sitePostContent > *:last-child { margin-bottom: 0; }



/* MOREボタン ----- */

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

.siteTileMore a {
	display: block;
	position: relative;
	margin: 10px 0;
	padding: 10px;
	box-sizing: border-box;
	transition: all 0.3s;
	
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	
	color: var(--button-text-color);
	background-color: var(--button-background-color);
}

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




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

	一覧表示用

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


.siteTile {
	display: block;
	position: relative;
	width: calc( 25% - 20px );   /* ４列想定 */
	margin: 10px;
	padding: 0;
	box-sizing: border-box;
}

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

.siteTileImage {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.siteTileImage 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;
}
.siteTileImage a:hover img {
	width: 110%;
	height: 110%;
}

.siteTileInner > * { margin: 10px 0; }
.siteTileInner > *:first-child { margin-top: 0; }
.siteTileInner > *:last-child  { margin-bottom: 0; }

.siteTileRow > * { margin: 10px auto; }
.siteTileRow > *:first-child { margin-top: 0; }
.siteTileRow > *: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) {

	.siteTile {
		width: 100%;
		margin: 10px 0;
	}
}


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

@media print {

}



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


	差し込みブロック用

	[想定タグ]

	<section id="" class="siteBlock">
	<div class="siteBlockInner">

	<header class="siteBlockHeader">
	<div class="siteBlockHeaderInner">
	<h2 class="siteBlockTitle">[タイトル]</h2>
	[ヘッダー]
	</header>

	<main class="siteBlockMain">
	<div class="siteBlockMainInner">
	[メイン]
	</div>
	</main>

	<footer class="siteBlockFooter">
	<div class="siteBlockFooterInner">
	<div class="siteBlockMore"><a href="#">MORE</a></div>
	[フッター]
	</div>
	</footer>

	</div>
	</section>



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


.siteBlock,
.siteBlockHeader,
.siteBlockMain,
.siteBlockFooter {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.siteBlock::after,
.siteBlockHeader::after,
.siteBlockMain::after,
.siteBlockFooter::after {
	clear: both;
	content:"";
	display:block;
	position: absolute;
	right:0;
	bottom: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	visibility:hidden;
}

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


/* タイトル */
.siteBlockTitle {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.siteBlockTitle a {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s linear;
}

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



/* MOREボタン */
.siteBlockMore {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.siteBlockMore a {
	display: block;
	position: relative;
	margin: 10px;
	padding: 15px 40px;
	box-sizing: border-box;
	
	font-size: larger;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	
	transition: all 0.3s linear;
}
.siteBlockMore a,
.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 );	
}

.siteBlockMore a:first-child { margin-left: 0; }
.siteBlockMore a:last-child  { margin-right: 0; }




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

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

}


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

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

	/* MOREボタン */
	.siteBlockMore {
		display: block;
	}

	.siteBlockMore a {
		margin: 10px 0;
	}

	.siteBlockMore a:first-child { margin-top: 0; }
	.siteBlockMore a:last-child  { margin-bottom: 0; }
}



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

@media print {

}



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


	詳細ページ枠 ( single.php )
	固定ページ枠 ( page.php )

	[想定タグ]

	<article id="" class="sitePost (single|page)">
	<div class="sitePostInner">

	<header class="sitePostHeader">
	<div class="sitePostHeaderInner">
	[ヘッダー]
	</div>
	</header>

	<main class="sitePostMain">
	<div class="sitePostMainInner">
	[メイン]
	</div>
	</main>

	<footer class="sitePostFooter">
	<div class="sitePostFooterInner">
	[フッター]
	</div>
	</footer>

	</div>
	</article>


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


.sitePost,
.sitePostHeader,
.sitePostMain,
.sitePostFooter {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.sitePostInner,
.sitePostHeaderInner,
.sitePostMainInner,
.sitePostFooterInner {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
.sitePost::after,
.sitePostHeader::after,
.sitePostMain::after,
.sitePostFooter::after { content:""; display:block; height:0; clear:both; visibility:hidden; }



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

	記事一覧枠 ( archive.php )

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


.siteArchive,
.siteArchiveHeader,
.siteArchiveMain,
.siteArchiveFooter {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.siteArchiveInner,
.siteArchiveHeaderInner,
.siteArchiveMainInner,
.siteArchiveFooterInner {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
.siteArchiveInner::after,
.siteArchiveHeaderInner::after,
.siteArchiveMainInner::after,
.siteArchiveFooterInner::after { content:""; display:block; height:0; clear:both; visibility:hidden; }



/** 記事一覧 ----------------- **/

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

.siteArchiveListInner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
}

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


/** POST一覧 ページネーション ------ **/

.siteArchivePages {
	display: block;
	margin: 50px 0;
	padding: 0;
	box-sizing: border-box;
}

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

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

.siteArchivePages span.page-numbers,
.siteArchivePages 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;	
}

.siteArchivePages span.page-numbers.current {
	color: var( --text-color );
	background-color: transparent;
	font-weight: 700;
}

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

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



/*+ 間隔調整 ---------- **/

.siteArchiveInner:first-child,
.siteArchiveHeaderInner:first-child,
.siteArchiveMainInner:first-child,
.siteArchiveFooterInner:first-child {
	margin-top: 0;
}

.siteArchiveInner:last-child,
.siteArchiveHeaderInner:last-child,
.siteArchiveMainInner:last-child,
.siteArchiveFooterInner: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) {

	/** 記事一覧 ----------------- **/

	.siteArchiveList {
		margin: 10px 0;
	}
}


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

@media print {

}















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


	ニュース枠


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



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