@charset 'UTF-8';

/* =============================================================================
//	タケフ管材Webサイト 共通スタイルシート
// -----------------------------------------------------------------------------
//	配置場所: (DocumentRoot)/css/common.css
// -----------------------------------------------------------------------------
//	変更履歴:
//	2023-07-22	A.Ishii			新規作成（スケルトンのみ）
// -----------------------------------------------------------------------------
//	character set = UTF-8 / indent tab = 2
//	コードはUTF-8、インデントTAB=2で整形しています
// ============================================================================= */

/* -----------------------------------------------------------------------------
//	カスタムプロパティ
// ----------------------------------------------------------------------------- */

:root {
	/* ------------------------------------------------------------------
	//	標準的なカラーパレット
	// ------------------------------------------------------------------ */
	--colorpal-tkz-page-fg:				#000000;	/* ページの前景色   */
	--colorpal-tkz-page-bg:				#ffffff;	/*   〃    背景色   */
	--colorpal-tkz-box-fg:				#000000;	/* 矩形の前景色     */
	--colorpal-tkz-box-bg:				#ffffff;	/*   〃    背景色   */
	--colorpal-tkz-box-bdr:				#000000;	/*   〃    枠線色   */
	--colorpal-tkz-table-bdr:			#000000;	/* テーブルの枠線色 */
	--colorpal-tkz-table-thbg:		#ffdfbf;	/*   〃    TH背景色 */
	--colorpal-tkz-table-tdbg:		#eef7ff;	/*   〃    TD背景色 */
	--colorpal-tkz-ttl-fg:				#000000;	/* 見出しの文字色   */
	--colorpal-tkz-ttl-bg:				#ffffff;	/*   〃    背景色   */
	--colorpal-tkz-ttl-fg2:				#000000;	/* 見出しの文字色２ */
	--colorpal-tkz-ttl-bg2:				#ffdfbf;	/*   〃    背景色２ */
	--colorpal-tkz-txt-fg:				#333333;	/* 本文の文字色     */
	--colorpal-tkz-txt-bg:				#ffffff;	/*   〃    背景色   */
	--colorpal-tkz-btn-fg:				#000000;	/* ボタンの文字色   */
	--colorpal-tkz-btn-bg:				#ffffff;	/*   〃    背景色   */
	--colorpal-tkz-next-bg:				#7eb8eb;	/* 次へ進むボタン   */
	--colorpal-tkz-next-fg:				#000000;	/*   〃    文字色   */
	--colorpal-tkz-back-bg:				#f0f0f0;	/* キャンセル・取消 */
	--colorpal-tkz-back-fg:				#000000;	/*   〃    文字色   */
	--colorpal-tkz-disable-bg:		#cccccc;	/* 不活性なボタン   */
	--colorpal-tkz-disable-fg:		#999999;	/*   〃    文字色   */
	--colorpal-tkz-action-bg:			#0979db;	/* 押下時のボタン   */
	--colorpal-tkz-action-fg:			#ffffff;	/*   〃    文字色   */

	--colorpal-tkz-swtch-bg:			#7297e3;	/* 選択されたスイッチ */
	--colorpal-tkz-swtch-fg:			#ffffff;	/*   〃    文字色   */
	--colorpal-tkz-lnk-fg:				#0979db;	/* アンカーリンク   */
	--colorpal-tkz-errmsg-fg:			#f00000;	/* エラーメッセージ */
	--colorpal-tkz-errmsg-bg:			#ffcccc;	/*   〃    背景色   */
	--colorpal-tkz-errmsg-bdr:		#f00000;	/*   〃    枠線色   */
	--colorpal-tkz-debug-fg:			#cc00ff;	/* デバッグ用表示   */
	--colorpal-tkz-debug-bg:			#ffffff;	/*   〃    背景色   */

	/* ブロック別の指定色 */
	--colorpal-tkz-header-fg:			#0979db;	/* ヘッダー文字色   */
	--colorpal-tkz-header-bg:			#ffffff;	/*   〃    背景色   */
	--colorpal-tkz-header-bdr:		#0979db;	/*   〃    仕切り線 */
	--colorpal-tkz-content-bg:		#ffffff;	/* メイン  背景色   */
	--colorpal-tkz-content-bdr:		#0979db;	/*   〃    仕切り線 */
	--colorpal-tkz-marker-fg:			#ffffff;	/* マーカー文字色   */
	--colorpal-tkz-marker-bg:			#3d94df;	/*   〃    背景色   */
	--colorpal-tkz-footer-fg:			#0979db;	/* フッター文字色   */
	--colorpal-tkz-footer-bg:			#ffffff;	/*   〃    背景色   */
	--colorpal-tkz-footer-bdr:		#0979db;	/*   〃    仕切り線 */

	/* モバイルメニュー */
	--colorpal-tkz-mobile-fg:			#000000;	/* メニュー文字色   */
	--colorpal-tkz-mobile-bg:			#f9fcff;	/*   〃    背景色   */
	--colorpal-tkz-mobile-bdr:		#0979db;	/*   〃    仕切り線 */

	/* ------------------------------------------------------------------
	//	コンテンツの標準サイズ
	// ------------------------------------------------------------------ */
	--metrics-tkz-main-height:		200px;		/* メインコンテンツの最小高さ */
	--metrics-tkz-main-margin-v:	10px;			/*   〃          マージン(縦) */
	--metrics-tkz-main-margin-h:	10px;			/*   〃             〃   (横) */
	--metrics-tkz-max-width:			1280px;		/* コンテンツの最大幅         */
	--metrics-tkz-min-width:			280px;		/* コンテンツの最小幅         */
	--metrics-tkz-header-height:	44px;			/* ヘッダ部の高さ             */
	--metrics-tkz-mobile-btn-h:		44px;			/* モバイルメニューボタン(高) */
	--metrics-tkz-mobile-btn-w:		44px;			/*   〃                  (幅) */
	--metrics-tkz-mobile-menu-h:	40px;			/*   〃            リスト(高) */
	--metrics-tkz-mobile-menu-w:	200px;		/*   〃            リスト(幅) */

	/* ------------------------------------------------------------------
	//	ボーダー（枠線）
	// ------------------------------------------------------------------ */
	--border-tkz-line-width:			1px;			/* 線の太さ   */
	--border-tkz-line-style:			solid;		/*  〃 種類   */
	--border-tkz-line-color:			#000000;	/*  〃 色     */
	--corner-tkz-radius-large:		12px;			/* 角丸の半径(大) */
	--corner-tkz-radius-small:		6px;			/*   〃      (小) */

	/* ------------------------------------------------------------------
	//	ボタン
	// ------------------------------------------------------------------ */
	--button-tkz-confirm-bg:			#ffdfbf;		/* 記入内容を確認するのボタン       */
	--button-tkz-common-border:		2px;				/* ボタンの枠線                     */	
	--button-tkz-send-bg:					#ffdfbf;		/* この内容で送信のボタン           */
	--button-tkz-back-bg:					#f0f0f0;		/* 修正のボタン                     */
	--button-tkz-ok-bg:						#ffdfbf;		/* お問い合わせページに戻るのボタン */	

	
	/* ------------------------------------------------------------------
	//	フォントセット
	// ------------------------------------------------------------------ */
	--fontfamily-tkz-std-set:			/* 標準的な文字セット */
			-apple-system,
			BlinkMacSystemFont,
			'Helvetica Neue',
			'Hiragino Sans',
			'Hiragino Kaku Gothic ProN',
			'游ゴシック体',
			YuGothic,
			'游ゴシック Medium',
			'Yu Gothic Medium',
			'Yu Gothic',
			'MS PGothic',
			'ＭＳ Ｐゴシック',
			sans-serif;

}


/* -----------------------------------------------------------------------------
//	共通要素
// ----------------------------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
}

body {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	color: var(--colorpal-tkz-page-fg);
	background-color: var(--colorpal-tkz-page-bg);
	font-family: var(--fontfamily-tkz-std-set);
	font-feature-settings: 'palt';
	max-width: var(--metrics-tkz-max-width);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	line-height: 1em;
	color: var(--colorpal-tkz-ttl-fg);
	margin: 0
}

h1 {font-size: 2em;}

h2 {font-size: 1.5em;}

h3 {font-size: 1.2em;}

p {
	color: var(--colorpal-tkz-txt-fg);
	margin: 0
}

a {
	color: var(--colorpal-tkz-lnk-fg);
}

ul {
	margin-top: 0;
	margin-bottom: 0;
}

li {
	color: var(--colorpal-tkz-txt-fg);
	margin: 0;
	list-style: none;
}

span.cBlockLabel {
	/* display: block; */
	display: none;
	position: absolute;
	font-size: 9px;
	left: calc(50% - 50px);
}


/* -----------------------------------------------------------------------------
//	ヘッダ部
// ----------------------------------------------------------------------------- */
#iContentHead {
	position: relative;
	min-height: var(--metrics-tkz-mobile-btn-h);
	margin-top: 5px;
	color: var(--colorpal-tkz-header-fg);
	background-color: var(--colorpal-tkz-header-bg);
	border-bottom: 1px solid var(--colorpal-tkz-header-bdr);
}

#iHeaderTitle {
	display: block;
	font-size: 12px;
	margin-left: var(--metrics-tkz-main-margin-h);
}

#iSiteLogo {
	height: var(--metrics-tkz-header-height);
}

#iSiteLogo span {
	display: block;
	margin-left: 10px;
}

#iSiteLogo span img {
	height: var(--metrics-tkz-header-height);
}


/* -------------------------------------------------------------
//	モバイル用ナビゲーション（メニュー）
// ------------------------------------------------------------- */
#iMobileMenu {
	margin-left: 0;
	position: absolute;
	z-index: 2;
	width: var(--metrics-tkz-mobile-menu-w);
	top: var(--metrics-tkz-mobile-btn-h);
	right: 0;
}

/* ---------------------------------------------
//	表示切替用トグルSW（CheckBoxで生成）
// --------------------------------------------- */
#iMobileMenuBtn {
	display: none;
}

/* ---------------------------------------------
//	メニュー開閉ボタン（LABELで生成）
// --------------------------------------------- */

/* -------------------------------------
//	CLOSE時（初期状態）
// ------------------------------------- */
#iMobileMenuBtn + label,
#iMobileMenuBtn + label::before,
#iMobileMenuBtn + label::after {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 32px;
	height: 4px;
	background-color: var(--colorpal-tkz-mobile-bdr);
}

#iMobileMenuBtn + label {
	border-style: solid;
	border-width: 20px 6px;
	border-color: var(--colorpal-tkz-header-bg);
	margin-top: -44px;
	transition: background-color 200ms ease-out;
}

#iMobileMenuBtn + label::before,
#iMobileMenuBtn + label::after {
	content: "";
	display: block;
	transition: transform 200ms ease-out;
}

#iMobileMenuBtn + label::before {
	margin-top: -10px;
	transform-origin: 28px 7px;
}

#iMobileMenuBtn + label::after {
	margin-top: 10px;
	transform-origin: 28px -3px;
}

/* -------------------------------------
//	OPEN時（展開状態）
// ------------------------------------- */
#iMobileMenuBtn:checked + label {
	background-color: #FFFFFF;
}

#iMobileMenuBtn:checked + label::before {
	transform: rotate(-45deg);
}

#iMobileMenuBtn:checked + label::after {
	transform: rotate(45deg);
}

/* -------------------------------------
//	mobile用メニューリストの本体
// ------------------------------------- */
#iMobileMenu ul.cLv01 {
	border-top: 1px solid;
	border-top-color: transparent;
	list-style: none;
	/* margin-top: 10px; */
	opacity: 0.95;
	font-weight: bold;
}

#iMobileMenu li {
	display: block;
	margin-right: 0;
	transition: height 200ms ease-in-out;
	height: 0;
	width: 100%;
}

#iMobileMenu ul.cLv01 > li {
	border-bottom: 1px solid;
	border-bottom-color: transparent;
}

#iMobileMenu li span {
	display: block;
	height: auto;
	font-size: 0;
	line-height: 0;
	padding-left: 12px;
}

#iMobileMenu ul.cLv01 > li > span {
	border-left:1px solid;
	border-right:	1px solid;
	border-left-color: transparent;
	border-right-color: transparent;
}

#iMobileMenu li span a {
	display: inline-block;
	height: auto;
	width: 100%;
	border-radius: 0;
	position: relative;
	color: var(--colorpal-tkz-mobile-fg);
	text-decoration: none;
}

#iMobileMenu li a::after {
	content: "";
	height: var(--metrics-tkz-mobile-menu-h);
	width: 16px;
	position: absolute;
	top: 0;
	right: 0;
	background-image: url(../img/iconset.png);
	background-size: 90px;
	background-position: 20px 10px; /* アイコンOFF */
}

/* -------------------------------------
//	OPEN時（展開状態）
// ------------------------------------- */
#iMobileMenuBtn:checked ~ ul.cLv01 {
	border-top-color: var(--colorpal-tkz-mobile-bdr);
}

#iMobileMenuBtn:checked ~ ul.cLv01 > li {
	height: var(--metrics-tkz-mobile-menu-h);
	border-bottom-color: var(--colorpal-tkz-mobile-bdr);
	background-color:    var(--colorpal-tkz-mobile-bg);
}

#iMobileMenuBtn:checked ~ ul.cLv01 > li.cLv02Head {
	height: auto;
}

#iMobileMenuBtn:checked ~ ul.cLv01 > li.cLv02Head span label::after {
	background-position: -1px -19px; /* ▼アイコンON */
}

#iMobileMenuBtn:checked ~ ul.cLv01 > li > span {
	font-size: 16px;
	line-height: var(--metrics-tkz-mobile-menu-h);
	border-left-color:  var(--colorpal-tkz-mobile-bdr);
	border-right-color: var(--colorpal-tkz-mobile-bdr);
}

#iMobileMenuBtn:checked ~ ul.cLv01 > li > span a::after {
	background-position: 0 12px; /* L1が展開時にアイコンON */
}


/* -----------------------------------------------------------------------------
//	グローバルメニュー部（タブレット・PC用）
// ----------------------------------------------------------------------------- */
#iContentMenu {
	display: none;
	position: relative;
}

#iMainMenu {
	font-size: 18px;
	position: absolute;
	top: -36px;
	right: 0;
	z-index: 1;
}

#iMainMenu li {
	display: inline-block;
	margin-right: 1em;
}

#iMainMenu li:nth-child(4) {
	display: none;
}

#iMainMenu li a {
	text-decoration: none;
}


/* -----------------------------------------------------------------------------
//	ボディ部（コンテンツ本体）
// ----------------------------------------------------------------------------- */
#iContentBody {
	position: relative;
	min-height: var(--metrics-tkz-main-height);
	padding: var(--metrics-tkz-main-margin-v) var(--metrics-tkz-main-margin-h);
	background-color: var(--colorpal-tkz-content-bg);
	margin-top: 0.5em;
}

#iContentBody div.cNormal input[type="text"],
#iContentBody div.cNormal textarea {
	background-color: var(--colorpal-tkz-box-bg);
	border: 1px solid var(--colorpal-tkz-box-bdr);
}

#iContentBody div.cError input[type="text"],
#iContentBody div.cError textarea {
	background-color: var(--colorpal-tkz-errmsg-bg);
	border: 1px solid var(--colorpal-tkz-errmsg-bdr);
}


/* -----------------------------------------------------------------------------
//	フッタ部
// ----------------------------------------------------------------------------- */
#iContentFoot {
	position: relative;
	min-height: 16px;
	color: var(--colorpal-tkz-footer-fg);
	background-color: var(--colorpal-tkz-footer-bg);
	border-top: 1px solid var(--colorpal-tkz-footer-bdr);
	/* margin-top: var(--metrics-tkz-main-margin-v); */
}

#iCopyright {
	display: block;
	font-size: 12px;
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	line-height: 2em;
	text-align: right;
	margin-right: var(--metrics-tkz-main-margin-h);
}


/* -----------------------------------------------------------------------------
//	ページ先頭へのスクロールバックボタン
// ----------------------------------------------------------------------------- */
#iPageTopBtn {
	width: 64px;
	height: 64px;
	position: fixed;
	right: 16px;
	bottom: 16px;
	opacity: 0.7;
	z-index: 2;
}

#iPageTopBtn a {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	text-decoration: none;
}

#iPageTopBtn a::before{
	content: '\1F51D';
	position: absolute;
	display: block;
	width: 64px;
	height: 64px;
	font-size: 64px;
	font-family: inherit;
	/*color: #FFFFFF;*/
	line-height: 64px;
	top: 0;
	left: 0;
	margin: auto;
	text-align: center;
}


/* =============================================================================
//	レスポンシブ設定
// ============================================================================= */

/* -----------------------------------------------------------------------------
//	スマホ用 Width ≧ 320 px (320 ～ 359 px)
// ----------------------------------------------------------------------------- */
@media print, screen and (min-width: 320px) {}


/* -----------------------------------------------------------------------------
//	スマホ用 Width ≧ 360 px (360 ～ 413 px)
// ----------------------------------------------------------------------------- */
@media print, screen and (min-width: 360px) {}


/* -----------------------------------------------------------------------------
//	スマホ用 Width ≧ 414 px (414 ～ 479 px)
// ----------------------------------------------------------------------------- */
@media print, screen and (min-width: 414px) {}


/* -----------------------------------------------------------------------------
//	スマホ用 Width ≧ 480 px (480 ～ 639 px)
// ----------------------------------------------------------------------------- */
@media print, screen and (min-width: 480px) {}


/* -----------------------------------------------------------------------------
//	タブレット用 Width ≧ 640 px (640 ～ 767 px)
// ----------------------------------------------------------------------------- */
@media print, screen and (min-width: 640px) {

#iMobileMenu {
	display: none;
}

#iContentMenu {
	display: block;
}

#iContentBody {
	margin-top: 1.5em;
}

}


/* -----------------------------------------------------------------------------
//	タブレット用 Width ≧ 768 px (768 ～ 899 px)
// ----------------------------------------------------------------------------- */
@media print, screen and (min-width: 768px) {}


/* -----------------------------------------------------------------------------
//	タブレット用 Width ≧ 900 px (900 ～ 1023 px)
// ----------------------------------------------------------------------------- */
@media print, screen and (min-width: 900px) {

#iMainMenu li:nth-child(4) {
	display: inline-block;
}

}


/* -----------------------------------------------------------------------------
//	タブレット・ＰＣ用 Width ≧ 1024 px (1024 ～ 1179 px)
// ----------------------------------------------------------------------------- */
@media print, screen and (min-width: 1024px) {}


/* -----------------------------------------------------------------------------
//	タブレット・ＰＣ用 Width ≧ 1180 px
// ----------------------------------------------------------------------------- */
@media print, screen and (min-width: 1180px) {}


/* =============================================================================
//	印刷対応（A4縦）
// ============================================================================= */
@media print {

body {width: 1024px;}

#iPageTopBtn {display: none;}

}