@charset "utf-8";
/***************************************************
information
  filename : app_basic_dez.css;
***************************************************/

/*======== basic_parts.css ========*/

/* ** basic start ** */
/********* 基本設定 *********/
:root {
/* body */
  --body-bg: #ffffff; /* body背景色 */
  --body-popup-bg: #ffffff; /* body-popup-背景色 */
  --body-txt: #000000; /* 基本テキスト */
  --font-html: 62.5%; /* 基本フォント */
  --font-body: 1.6rem; /* bodyフォント */
  --font-face: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /* bodyフォントフェイス */

/* #wrapper */
  --wrap-bg: inherit; /* wrapper背景色 */

/* #header */
  --app-header-cr: inherit; /* header背景色 */
  --app-header-txt: #000; /* headerテキスト色 */

/* #headerSub */
  --app-header-sub-cr: #fff; /* header-sub背景色 */
  --app-header-sub-txt: #000; /* header-subテキスト色 */

/* #contents */
  --app-contents-cr: #fff; /* contents背景色 */
  --app-contents-txt: #000; /* contentsテキスト色 */

/* #footerSub */
  --app-footer-sub-cr: #fff; /* footer-sub背景色 */
  --app-footer-sub-txt: #000; /* footer-subテキスト色 */

/* #footer */
  --app-footer-cr: #222222; /* footer背景色 */
  --app-footer-txt: #fff; /* footerテキスト色 */

/* #spheader */
  --app-spheader-cr: #fff; /* spheader背景色 */
  --app-spheader-txt: #000; /* spheaderテキスト色 */

/* #spfooter */
  --app-spfooter-cr: #222222; /* spfooter背景色 */
  --app-spfooter-txt: #fff; /* spfooterテキスト色 */

/* 2カラム */
  --app-mainCln-cr: inherit; /* 2カラムmainCln背景色 */
  --app-sideCln-cr: inherit; /* 2カラムsideCln背景色 */

}
/* ===================================================================================
for ipad max-width: 600px-1100px
=================================================================================== */
@media screen and (min-width:600px) and ( max-width:1100px) {
	:root {
	/* body */
	  --font-html: 62.5%; /* 基本フォント */
	  --font-body: 1.6rem; /* bodyフォント */
	}
}
/* ===================================================================================
for SP max-width: 600px
=================================================================================== */
@media screen and (max-width: 600px) {
	:root {
	/* body */
	  --font-html: 62.5%; /* 基本フォント */
	  --font-body: 1.6rem; /* bodyフォント */
	}
}
/* ** basic end ** */

/* ** link start ** */
/* 基本リンク */
:root {
/* LINK */
  --app-link-txt: inhelit; /* テキスト色:link */
  --app-visited-txt: inhelit; /* テキスト色:visited */
  --app-hover-txt: inhelit; /* テキスト色:hover */
  --app-active-txt: inhelit; /* テキスト色:active */

/* link_box */
  --linkbox-bg: #fff; /* linkbox背景色 */
}
/* ** link end ** */

/* ** colorbox_basic start ** */
/********* インラインポップ設定 *********/
:root {
/* colorbox */
  --colorbox-bg: #eeeeee; /* インラインポップ全体背景色 */
  --colorbox-opacity: 0.6; /* インラインポップ背景透過率 */
  --colorbox-filter: 60; /* インラインポップ背景透過率 */
  --colorbox-Content-bg: inhelit; /* #cboxContent　インラインポップ枠背景色 */
  --colorbox-Content-mg: 4.0rem; /* #cboxContent　インラインポップ枠マージン */
  --colorbox-Content-pd: 0.5rem; /* #cboxContent　インラインポップ枠パディング */
  --colorbox-rod: 1.0rem; /* インラインポップ角指定 */
  --colorbox-sd: 0 0 0.5rem #cdcdcd; /* インラインポップ影指定 */

  --colorbox-cboxIframe-bg: inhelit; /* .cboxIframe */
  --colorboxError-brd: 1px solid #000; /* インラインポップボーダー指定（エラー用） */
  --colorbox-Loaded-bg: inhelit; /* #cboxLoadedContent 枠線 */
  --colorbox-LoadedGraphic-bg: url(../../../core_sys/common/images/colorbox/type02/loading.gif); /* #cboxLoadingGraphic ローディング画像 */
  --colorbox-LoadedOverlay-bg: #000; /* #cboxLoadingOverlay */
  --colorbox-Title-txt: #000; /* #cboxTitle */
  --colorbox-controls-bg: url(../../../core_sys/common/images/colorbox/type02/controls.png); /* #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose ボタン画像 */

  --closeBtn-bg: #999; /* インラインポップ閉じるボタン色 */
}
@media screen and (max-width: 600px) {
	:root {
	  --colorbox-Content-mg: 0; /* #cboxContent　インラインポップ枠マージン */
	}
}
/* ** colorbox_basic end ** */

/* ** loading_parts start ** */
/****************** ローディング ******************/
:root {
  --app-loading-bg: #ff9c1f; /* ローディング背景色 */
}
/* ** loading_parts end ** */

/* ** layout_basic start ** */
/********* 画面幅設定 *********/
:root {
/**** 基本横幅固定サイズ ****/
  --app-ptWdW-width: 1200px; /* 基本幅 */
  --app-ptWdM-width: 960px; /* コンテンツ基本幅(広) */
  --app-ptWdC-width: 800px; /* コンテンツ基本幅 */
  --app-ptWdS-width: 750px; /* コンテンツ基本幅(狭) */
  --app-ptWdFW-width: 500px; /* フォーム基本幅(広) */
  --app-ptWdFS-width: 400px; /* フォーム基本幅(狭) */

/**** 基本横幅パーセンテージサイズ ****/
  --app-ptWdIW-width-pct: 98%; /* 基本幅% */
  --app-ptWdIM-width-pct: 90%; /* コンテンツ基本幅(広)% */
  --app-ptWdIC-width-pct: 85%; /* コンテンツ基本幅% */
  --app-ptWdIS-width-pct: 80%; /* コンテンツ基本幅(狭)% */

/**** 2カラム横幅固定サイズ（基本） ****/
  --app-mainClnDK-width: 800px; /* 2カラムメイン幅 */
  --app-sideClnDK-width: 360px; /* 2カラムサイド幅 */

/**** 2カラム横幅パーセンテージサイズ（基本） ****/
  --app-mainClnD-width-pct: 65%; /* 2カラムメイン幅% */
  --app-sideClnD-width-pct: 32%; /* 2カラムサイド幅%  */

/**** 2カラム横幅固定サイズ（コンテンツ幅広） ****/
  --app-mainClnSK-width: 960px; /* 2カラムメイン幅(広) */
  --app-sideClnSK-width: 220px; /* 2カラムサイド幅(狭) */

/**** 2カラム横幅パーセンテージサイズ（コンテンツ幅広） ****/
  --app-mainClnS-width-pct: 75%; /* 2カラムメイン幅(広)% */
  --app-sideClnS-width-pct: 22%; /* 2カラムサイド幅(狭)% */
}
/* ===================================================================================
for ipad max-width: 600px-1200px
=================================================================================== */
@media screen and (min-width:600px) and ( max-width:1200px) {
	:root {
	/**** 基本横幅固定サイズ ****/
	  --app-ptWdW-width: 96%; /* 基本幅 */
	  --app-ptWdM-width: 90%; /* コンテンツ基本幅(広) */
	  --app-ptWdC-width: 85%; /* コンテンツ基本幅 */
	  --app-ptWdS-width: 80%; /* コンテンツ基本幅(狭) */
	  --app-ptWdFW-width: 500px; /* フォーム基本幅(広) */
	  --app-ptWdFS-width: 400px; /* フォーム基本幅(狭) */

	/**** 基本横幅パーセンテージサイズ ****/
	  --app-ptWdIW-width-pct: 96%; /* 基本幅% */
	  --app-ptWdIM-width-pct: 90%; /* コンテンツ基本幅(広)% */
	  --app-ptWdIC-width-pct: 85%; /* コンテンツ基本幅% */
	  --app-ptWdIS-width-pct: 80%; /* コンテンツ基本幅(狭)% */

	/**** 2カラム横幅固定サイズ（基本） ****/
	  --app-mainClnDK-width: 68%; /* 2カラムメイン幅 */
	  --app-sideClnDK-width: 32%; /* 2カラムサイド幅 */

	/**** 2カラム横幅パーセンテージサイズ（基本） ****/
	  --app-mainClnD-width-pct: 68%; /* 2カラムメイン幅% */
	  --app-sideClnD-width-pct: 32%; /* 2カラムサイド幅%  */

	/**** 2カラム横幅固定サイズ（コンテンツ幅広） ****/
	  --app-mainClnSK-width: 75%; /* 2カラムメイン幅(広) */
	  --app-sideClnSK-width: 22%; /* 2カラムサイド幅(狭) */

	/**** 2カラム横幅パーセンテージサイズ（コンテンツ幅広） ****/
	  --app-mainClnS-width-pct: 75%; /* 2カラムメイン幅(広)% */
	  --app-sideClnS-width-pct: 22%; /* 2カラムサイド幅(狭)% */
	}
}
/* ===================================================================================
for SP max-width: 600px
=================================================================================== */
@media screen and (max-width: 600px) {
	:root {
	/* 画面幅 */

	/**** 基本横幅固定サイズ ****/
	  --app-ptWdW-width: 100%; /* 基本幅 */
	  --app-ptWdM-width: 100%; /* コンテンツ基本幅(広) */
	  --app-ptWdC-width: 100%; /* コンテンツ基本幅 */
	  --app-ptWdS-width: 100%; /* コンテンツ基本幅(狭) */
	  --app-ptWdFW-width: 100%; /* フォーム基本幅(広) */
	  --app-ptWdFS-width: 100%; /* フォーム基本幅(狭) */

	/**** 基本横幅パーセンテージサイズ ****/
	  --app-ptWdIW-width-pct: 100%; /* 基本幅% */
	  --app-ptWdIM-width-pct: 100%; /* コンテンツ基本幅(広)% */
	  --app-ptWdIC-width-pct: 100%; /* コンテンツ基本幅% */
	  --app-ptWdIS-width-pct: 100%; /* コンテンツ基本幅(狭)% */

	/**** 2カラム横幅固定サイズ（基本） ****/
	  --app-mainClnDK-width: 100%; /* 2カラムメイン幅 */
	  --app-sideClnDK-width: 100%; /* 2カラムサイド幅 */

	/**** 2カラム横幅パーセンテージサイズ（基本） ****/
	  --app-mainClnD-width-pct: 100%; /* 2カラムメイン幅% */
	  --app-sideClnD-width-pct: 100%; /* 2カラムサイド幅%  */

	/**** 2カラム横幅固定サイズ（コンテンツ幅広） ****/
	  --app-mainClnSK-width: 100%; /* 2カラムメイン幅(広) */
	  --app-sideClnSK-width: 100%; /* 2カラムサイド幅(狭) */

	/**** 2カラム横幅パーセンテージサイズ（コンテンツ幅広） ****/
	  --app-mainClnS-width-pct: 100%; /* 2カラムメイン幅(広)% */
	  --app-sideClnS-width-pct: 100%; /* 2カラムサイド幅(狭)% */
	}
}
/* ** layout_basic end ** */

/* ** flex_basic start ** */
/* ** flex_basic end ** */

/* ** mg_basic start ** */
/****************** レイアウト枠マージン指定 ******************/
:root {
/* レイアウト枠マージン指定 */
  --app-ptMgW-mg: 4.0rem; /* マージン大 */
  --app-ptMgM-mg: 2.5rem; /* マージン中 */
  --app-ptMgS-mg: 1.0rem; /* マージン小 */
}
/* ===================================================================================
for ipad max-width: 600px-1100px
=================================================================================== */
@media screen and (min-width:800px) and ( max-width:1100px) {
	:root {
	/* レイアウト枠マージン指定 */
	  --app-ptMgW-mg: 3.5rem; /* マージン大 */
	  --app-ptMgM-mg: 2.0rem; /* マージン中 */
	  --app-ptMgS-mg: 0.5rem; /* マージン小 */
	}
}
/* ===================================================================================
for SP max-width: 600px
=================================================================================== */
@media screen and (max-width: 600px) {
	:root {
	/* レイアウト枠マージン指定 */
	  --app-ptMgW-mg: 2.0rem; /* マージン大 */
	  --app-ptMgM-mg: 1.0rem; /* マージン中 */
	  --app-ptMgS-mg: 0.25rem; /* マージン小 */
	}
}
/* ** mg_basic end ** */

/* ** pd_basic start ** */
/****************** レイアウト枠パディング指定 ******************/
:root {
/* レイアウト枠マージン指定 */
  --app-ptPdW-pd: 4.0rem; /* マージン大 */
  --app-ptPdM-pd: 2.5rem; /* マージン中 */
  --app-ptPdS-pd: 1.0rem; /* マージン小 */
}
/* ===================================================================================
for ipad max-width: 600px-1100px
=================================================================================== */
@media screen and (min-width:800px) and ( max-width:1100px) {
	:root {
	/* レイアウト枠マージン指定 */
	  --app-ptPdW-pd: 3.5rem; /* マージン大 */
	  --app-ptPdM-pd: 2.0rem; /* マージン中 */
	  --app-ptPdS-pd: 0.5rem; /* マージン小 */
	}
}
/* ===================================================================================
for SP max-width: 600px
=================================================================================== */
@media screen and (max-width: 600px) {
	:root {
	/* レイアウト枠マージン指定 */
	  --app-ptPdW-pd: 2.0rem; /* マージン大 */
	  --app-ptPdM-pd: 1.0rem; /* マージン中 */
	  --app-ptPdS-pd: 0.25rem; /* マージン小 */
	}
}
/* ** pd_basic end ** */

/* ** scroll_bar start ** */
/****************** スクロールバー指定 ******************/
:root {
  --app-scrollBartrack-cr: #eee;
  --app-scrollBar-cr: #000;
}
/* ** scroll_bar end ** */

/* ** header_design01_bg start ** */


/* ** header_design01_bg end ** */

/* ** header_design02_bg start ** */

/* ** header_design02_bg end ** */

/* ** header_design03_bg start ** */

/* ** header_design03_bg end ** */

/* ** header_design04_bg start ** */

/* ** header_design04_bg end ** */

/* ** header_design05_bg start ** */

/* ** header_design05_bg end ** */

/* ** header_design06_bg start ** */

/* ** header_design06_bg end ** */

/* ** footer_design01 start ** */

/* ** footer_design01 end ** */

/* ** footer_design02 start ** */

/* ** footer_design02 end ** */