@charset "utf-8";
/***************************************************
information
  filename : control\heading_parts.css;
***************************************************/

/*======== button_parts.css ========*/
/****************** 見出し要素（システムテンプレート） ******************/

/* ** heading_basic start ** */
/****** 01罫線見出し *******/
:root {
/* 共通 */
  --heading01-rod: 0.2em; /* 角丸 */
  --heading01-mg: 1.0rem auto; /* マージン */
  --heading01-pd: 1.3rem 0.3rem; /* パディング */
  --heading01-txt: #232323; /* テキスト色 */
  --heading01-size: 0.2rem; /* ボーダーサイズ */
  --heading01-brd: #232323; /* ボーダー色 */
  --font-heading01: clamp(1.8rem, 2.2vw, 2.8rem); /* フォントサイズ */
  --heading01-pd-l: 1.0rem 1.5rem; /* パディング（左罫線） */
  --heading01-size-l: 0.8rem; /* ボーダーサイズ（左罫線） */
  --heading01-brd-l: #b00000; /* サブボーダー色（左罫線） */
}
@media screen and (max-width: 600px) {
	:root {
	  --heading01-pd: 1.5rem 0.5rem; /* パディング */
	  --heading01-pd-l: 0.5rem 1.5rem; /* パディング（左罫線） */
	}
}
/****** 02背景付き見出し ******/
:root {
/* 共通 */
  --heading02-rod: 0.2em; /* 角丸 */
  --heading02-mg: 1.0rem auto; /* マージン */
  --heading02-pd: 2.0rem 1.5rem; /* パディング */
  --heading02-txt: #fff; /* テキスト色 */
  --heading02-size: 0.2rem; /* ボーダーサイズ */
  --heading02-brd: #232323; /* ボーダー色 */
  --font-heading02: clamp(1.8rem, 2.2vw, 2.8rem); /* フォントサイズ */
  --heading02-pd-l: 1.5rem; /* パディング（左罫線） */
  --heading02-size-l: 0.8rem; /* ボーダーサイズ（左罫線） */
  --heading02-brd-l: #b00000; /* サブボーダー色（左罫線） */
  --heading02-bg: #2b2b2b; /* 背景色 */

/* 0205: 囲み線・背景付き */
  --heading0205-txt: #232323; /* テキスト色 */
  --heading0205-brd: #232323; /* ボーダー色 */
  --heading0205-bg: #f4f4f4; /* 背景色 */

/* 0206: 背景・影を入れたデザイン */
  --heading0206-txt: #fff; /* テキスト色 */
  --heading0206-bg: #0078c4; /* 背景色 */
  --heading0206-sd: 5px 5px 0 #034670; /* 影付き背景 サイズ・影色 */
  --font-heading0206: clamp(2.0rem, 2.5vw, 3.0rem); /* フォントサイズ */

/* 0207: 下線にアクセントを入れたデザイン */
  --heading0207-pd: 1.5rem 0.8rem; /* パディング */
  --heading0207-txt: #232323; /* テキスト色 */
  --heading0207-brd-y: #0078c4; /* アクセントボーダー差色 */
  --heading0207-brd-yu: #232323; /* アクセントボーダー基本色 */
  --heading0207-size: 0.3rem;/* ボーダーサイズ */
  --heading0207-size-b: -0.3rem;/* アクセントボーダー差色位置 */
  --heading0207-size-w: 30%;/* 0207: アクセントボーダー差色横幅 */
  --font-heading0207: clamp(2.0rem, 2.5vw, 3.0rem); /* フォントサイズ */
}
/*** 0301: 背景グラデーション ***/
:root {
/* 共通 */
  --heading03-rod: 0.1em; /* 角丸 */
  --heading03-mg: 1.0rem auto; /* マージン */
  --heading03-pd: 2.0rem 1.5rem; /* パディング */
  --heading03-txt: #fff; /* テキスト色 */
  --font-heading03: clamp(1.8rem, 2.5vw, 3.0rem); /* フォントサイズ */

/* 0301: 背景グラデーション */
  --heading0301-bg-2sbg: #004071; /* 2色グラデーション背景色起点 */
  --heading0301-bg-2ebg: #00e205; /* 2色グラデーション背景色終点 */

/* 0302: 下線グラデーション */
  --heading0302-pd: 2.0rem 1.5rem; /* パディング */
  --heading0302-txt: #232323; /* テキスト色 */
  --heading0302-size: 0.6rem; /* ボーダーサイズ */
  --heading0302-bg-2sbg: #004071; /* 2色グラデーション背景色起点 */
  --heading0302-bg-2ebg: #00e205; /* 2色グラデーション背景色終点 */

/* 0303: 上下線グラデーション */
  --heading0303-txt: #232323; /* テキスト色 */
  --heading0303-size: 0.3rem; /* ボーダーサイズ */
  --heading0303-bg-2sbg: #004071; /* 2色グラデーション背景色起点 */
  --heading0303-bg-2ebg: #00e205; /* 2色グラデーション背景色終点 */

/* 0304: 囲い線グラデーション */
  --heading0304-size: 0.4rem; /* ボーダーサイズ */
  --heading0304-txt: #fff; /* テキスト色 */
  --heading0304-bg-4sbg: #231557; /* 4色グラデーション背景色起点 */
  --heading0304-bg-4cbg: #44107a; /* 4色グラデーション背景色中点1 */
  --heading0304-bg-4tbg: #ff1361; /* 4色グラデーション背景色中点2 */
  --heading0304-bg-4ebg: #fff800; /* 4色グラデーション背景色終点 */
}
@media screen and (max-width: 600px) {
	:root {
	  --heading0302-pd: 1.5rem 0.5rem; /* パディング */
	  --heading0302-size: 0.3rem; /* ボーダーサイズ */
	}
}
/****** 04タグ風見出し ******/
:root {
/* 共通 */
  --heading04-mg: 1.0rem 0; /* マージン */
  --heading04-pd: 1.8rem 1.5rem; /* パディング */
  --heading04-txt: #fff; /* テキスト色 */
  --heading04-bg: #231557; /* 背景色 */
  --font-heading04: clamp(1.8rem, 2.5vw, 3.0rem); /* フォントサイズ */

/* 0401: タグ風見出し左角 */
  --heading0401-rod: 0 0.3rem 0.3rem 0; /* 角丸 */

/* 0402: タグ風見出し右角 */
  --heading0402-rod: 0.3rem 0 0 0.3rem; /* 角丸 */
}
@media screen and (max-width: 600px) {
	:root {
	  --heading04-pd: 1.5rem 1.8rem; /* パディング */
	}
}
/****** 05 リボン風見出し ******/
:root {
/* 共通(背景) */
  --heading_wrap-rod: 0.2em; /* 角丸 */
  --heading_wrap-mg: 2.0rem auto; /* マージン */
  --heading_wrap-bg: #fff; /* 背景色 */
  --heading_wrap-brd: 0.1rem solid #bababa; /* ボーダー指定 */
  --heading_wrap-bbg: 0 0 5px #c4c4c4; /* 影付き背景 サイズ・影色 */
/* 共通 */
  --heading05-mg: 1.0rem auto; /* マージン */
  --heading05-pd: 1.5rem 0;/* パディング */
  --heading05-txt: #fff; /* テキスト色 */
  --heading05-bg: #00a47f; /* 背景色 */
  --heading05-bg-u: #006b53; /* 背景下色 */
  --heading05-bg-s: #0d2f27; /* 背景影色 */
  --heading05-brd-tu: #fff; /* ボーダー色(破線色) */
  --heading05-size-tu: 0.1rem; /* ボーダーサイズ(破線) */
  --font-heading05: clamp(2.0rem, 2.5vw, 3.0rem); /* フォントサイズ */

/* 0501: 左右折り返しのリボンデザイン */
  --heading0501-wrap-mg: -120px auto 0 auto; /* マージン */
  --heading0501-wrap-pd: 10.0rem 3.0rem 3.0rem 3.0rem;/* パディング */
  --heading0501-pd: 2.0rem 1.5rem;/* パディング */
  --heading0501-pd-i: 1.5rem 2.0rem;/* パディング（テキスト） */

/* 0503: 左右山形のリボンステッチ付きデザイン */
  --heading0503-pd: 0.5rem 0;/* パディング */

/* 0504: 右側のみ山形のリボンデザイン */
  --heading0504-pd: 1.3rem 2.0rem;/* パディング */

/* 0505: 右側のみ山形のリボンステッチ付きデザイン */
  --heading0505-pd: 0.5rem 0;/* パディング */

/* 0506: 折り目付きリボンデザイン */
  --heading0506-pd: 1.6rem 1.5rem 2.0rem 3.5rem;/* パディング */
  --heading0506-wrap-mg: -100px 0 0 2.0rem; /* マージン */
  --heading0506-wrap-pd: 10.0rem 3.0rem 3.0rem 3.0rem;/* パディング */

/* 0507: ボックスに折り込んだリボンデザイン */
  --heading0507-mg: 0 -2.0rem; /* マージン */
  --heading0507-pd: 2.0rem 0;/* パディング */
  --heading0507-sd: 0 5px 5px #666; /* 影付き背景 サイズ・影色 */
  --heading0507-wrap-mg: -90px auto 0 auto; /* マージン */
  --heading0507-wrap-pd: 10.0rem 3.0rem 3.0rem 3.0rem;/* パディング */

/* 0508: ボックスに折り込んだリボンステッチ付きデザイン */
  --heading0508-mg: 0 -2.0rem; /* マージン */
  --heading0508-pd: 0.5rem 0;/* パディング */
  --heading0508-sd: 0 5px 5px #666; /* 影付き背景 サイズ・影色 */
  --heading0508-wrap-mg: -90px auto 0 auto; /* マージン */
  --heading0508-wrap-pd: 10.0rem 3.0rem 3.0rem 3.0rem;/* パディング */

/* 0509: 縦リボンデザイン */
  --heading0509-rod: 0.3rem; /* 角丸 */
  --heading0509-mg: 1.0rem auto 0 auto; /* マージン */
  --heading0509-pd: 1.5rem 0;/* パディング */
  --heading0509-txt: #232323; /* リボンタイトルテキスト色 */
  --heading0509-bg: #f1f1f1; /* リボンタイトル背景色 */
  --heading0509-bg-s: #0d2f27; /* 背景影色 */
  --font-heading0509: clamp(2.0rem, 2.5vw, 3.0rem); /* リボンタイトルフォントサイズ */
  --heading0509-txt-ribbon: #fff; /* リボンテキスト色 */
  --heading0509-bg-ribbon: #00a47f; /* リボン背景色 */
  --font-heading0509-ribbon: clamp(2.0rem, 2.0vw, 2.5rem); /* リボンアイコンフォントサイズ */
}
@media screen and (max-width: 600px) {
	:root {
	  --heading0501-wrap-mg: -100px auto 0 auto; /* マージン */
	  --heading0501-wrap-pd: 8.0rem 1.5rem 2.0rem 1.5rem;/* パディング */
	  --heading0506-wrap-mg: -80px 0 0 2.0rem; /* マージン */
	  --heading0506-wrap-pd: 6.0rem 1.5rem 2.0rem 1.5rem;/* パディング */
	  --heading0506-pd: 1.2rem 1.5rem 1.5rem 2.0rem;/* パディング */
	  --heading0507-mg: 0 -2.0rem; /* マージン */
	  --heading0507-wrap-mg: -70px auto 0 auto; /* マージン */
	  --heading0507-wrap-pd: 7.0rem 0.5rem 2.0rem 0.5rem; /* パディング */
	  --heading0507-pd: 1.5rem 0;/* パディング */
	  --heading0508-mg: 0 -2.0rem; /* マージン */
	  --heading0508-pd: 0.5rem 0;/* パディング */
	  --heading0508-wrap-mg: -70px auto 0 auto; /* マージン */
	  --heading0508-wrap-pd: 7.0rem 0.5rem 2.0rem 0.5rem; /* パディング */
	}
}
/****** 06 吹き出し風の見出し ******/
:root {
/* 0601: 吹き出し風の見出し */
/* 共通 */
  --heading06-rod: 0.2em; /* 角丸 */
  --heading06-mg: 1.0rem 0 2.0rem 0; /* マージン */
  --heading06-pd: 2.0rem 1.5rem; /* パディング */
  --heading06-txt: #fff; /* テキスト色 */
  --heading06-bg: #1b1b1b; /* 背景色 */
  --heading06-brd: #b00000; /* ボーダー色 */
  --heading06-size: 0.3rem; /* ボーダーサイズ */
  --font-heading06: clamp(2.0rem, 2.5vw, 3.0rem); /* フォントサイズ */
}
@media screen and (max-width: 600px) {
	:root {
	  --heading06-pd: 1.5rem; /* パディング */
	}
}
/****** 07 特殊見出し ******/
:root {
/* 共通 */
  --heading07-rod: 0.1em; /* 角丸 */
  --heading07-mg: 1.0rem 0; /* マージン */
  --heading07-pd: 1.5rem 2rem 1.5rem 130px; /* パディング */
  --heading07-txt: #232323; /* テキスト色 */
  --heading07-brd: #232323; /* ボーダー色 */
  --heading07-size: 0.2rem; /* ボーダーサイズ */
  --heading07-bg: #ffffff; /* 背景色 */
  --font-heading07: clamp(2.0rem, 2.5vw, 3.0rem); /* フォントサイズ */

/* シンボル */
  --heading07-txt-symbol: #fff; /* シンボルアイコンテキスト色 */
  --heading07-bg-symbol: #232323; /* シンボルアイコン背景色 */
  --font-heading07-symbol: clamp(2.0rem, 2.0vw, 2.5rem); /* シンボルアイコンフォントサイズ */

/* 0702: シンボルあり罫線見出し */
  --heading0702-bg: #eee; /* 背景色 */

/* 0703: サブコピー(content使用)見出し */
  --heading0703-mg: 3.0rem 0 0 0; /* マージン */
  --heading0703-pd: 1.3rem 2.0rem; /* パディング */
  --heading0703-bg: #eee; /* 背景色 */

/* シンボル */
  --heading0703-rod-symbol: 0.3em; /* 角丸 */
  --heading0703-content: 'POINT SAMPLE'; /* 代替えテキスト */
  --heading0703-txt-symbol: #fff; /* シンボルアイコンテキスト色 */
  --heading0703-bg-symbol: #232323; /* シンボルアイコン背景色 */
  --font-heading0703-symbol: clamp(1.2rem, 1.0vw, 1.2rem); /* シンボルアイコンフォントサイズ */
}
@media screen and (max-width: 600px) {
	:root {
	  --heading07-pd: 1.5rem 2rem 1.5rem 70px; /* パディング */
	}
}
/****************** システム利用タイトル ******************/
/****** 所属カテゴリ表示ユニット ******/

/* 0801: 所属カテゴリ表示ユニット */
:root {
  --app-mainTi-mg: 0 auto; /* マージン */
  --app-mainTi-pd: 3.0rem 0; /* パディング */
  --app-mainTi-txt: #232323; /* テキスト色 */
  --app-mainTi-bg: #fff; /* 背景色 */
  --app-mainTi-brd: 1px solid #cdcdcd; /* ボーダー指定 */
  --font-mainTi: clamp(1.6rem, 2.0vw, 2.0rem); /* フォントサイズ */

  --app-mainTi_dezpt01-mg: 0 auto; /* マージン */
  --app-mainTi_dezpt01-pd: 3.0rem 1.5rem 2.0rem 1.5rem; /* パディング */
  --app-mainTi_dezpt01-txt: #232323; /* テキスト色 */
  --app-mainTi_dezpt01-bg: none; /* 背景色 */
  --app-mainTi_dezpt01-brd: none; /* ボーダー指定 */
  --font-mainTi_dezpt01: clamp(1.8rem, 3.0vw, 3.0rem); /* フォントサイズ */
}
@media screen and (max-width: 480px) {
	:root {
	  --app-mainTi_dezpt01-pd: 2.0rem 1.0rem;
	  --app-mainTi_dezpt01-brd: 1px solid #cdcdcd;
	}
}
@media screen and (max-width: 600px) {
	:root {
	  --app-mainTi-pd: 1.5rem 0; /* パディング */
	}
}
/****** 主にログインや会員登録等で使用するシステム見出し ******/

/* 0802: 主にログインや会員登録等で使用するシステム見出し */
:root {
  --app-systemMainTitle-mg: 0.5rem auto; /* マージン */
  --app-systemMainTitle-pd: 2.5rem 0; /* パディング */
  --app-systemMainTitle-txt: #232323; /* テキスト色 */
  --app-systemMainTitle-bg: inherit; /* 背景色 */
  --app-systemMainTitle-brd: 1px solid #cdcdcd; /* ボーダー指定 */
  --font-systemMainTitle: clamp(1.8rem, 2.0vw, 2.5rem); /* フォントサイズ */
}
/*** 主に入力フォームで使用するサブ見出し ***/
/* 0803: 主に入力フォームで使用するサブ見出し */
:root {
/* 大見出し */
  --app-systemFotmTitle-rod: inherit; /* 角丸 */
  --app-systemFotmTitle-mg: 1.0rem auto; /* マージン */
  --app-systemFotmTitle-pd: 1.5rem; /* パディング */
  --app-systemFotmTitle-txt: #232323; /* テキスト色 */
  --app-systemFotmTitle-bg: inherit; /* 背景色 */
  --app-systemFotmTitle-brd: 1px solid #cdcdcd; /* ボーダー指定 */
  --font-systemFotmTitle: clamp(1.6rem, 1.8vw, 2.0rem); /* フォントサイズ */

/* 中見出し */
  --app-systemFotmTitleSub-rod: 0.2em; /* 角丸 */
  --app-systemFotmTitleSub-mg: 1.0rem auto; /* マージン */
  --app-systemFotmTitleSub-pd: 1.0rem 1.5rem; /* パディング */
  --app-systemFotmTitleSub-txt: #232323; /* テキスト色 */
  --app-systemFotmTitleSub-bg: #f4f4f4; /* 背景色 */
  --app-systemFotmTitleSub-brd: inherit; /* ボーダー指定 */
  --font-systemFotmTitleSub: clamp(1.4rem, 1.6vw, 1.8rem); /* フォントサイズ */
}
/* 0804: 編集ボタン付きタイトル */
:root {
  --app-editHeading-rod: 0.5rem; /* 角丸 */
  --app-editHeading-mg: 2.0rem auto; /* マージン */
  --app-editHeading-pd: 0.5rem; /* パディング */
  --app-editHeading-txt: #232323; /* テキスト色 */
  --app-editHeading-bg: #eee; /* 背景色 */
  --app-editHeading-brd: 1px solid #cdcdcd; /* ボーダー指定 */
  --font-editHeading: clamp(1.4rem, 1.6vw, 1.8rem); /* フォントサイズ */
  --app-editHeading-size: 10rem; /* ボタンサイズ */
}
@media screen and (max-width: 600px) {
	:root {
	  --app-editHeading-size: 8rem; /* ボタンサイズ */
	}
}
:root {
/* 0901: サブ見出し付きタイトル（大サイズ） */
  --app-heading0901-txt: #000; /* テキスト色 */
  --app-heading0901-sup-txt: #004072; /* テキスト色 */

/* 0902: サブ見出し付きタイトル（中サイズ） */
  --app-heading0902-txt: #000; /* テキスト色 */
  --app-heading0902-sup-txt: #004072; /* テキスト色 */
}
/* ** heading_basic end ** */

/* ** heading01 start ** */
/* ** heading01 end ** */
/* ** heading0101 start ** */
/* ** heading0101 end ** */
/* ** heading0102 start ** */
/* ** heading0102 end ** */
/* ** heading0103 start ** */
/* ** heading0103 end ** */
/* ** heading0104 start ** */
/* ** heading0104 end ** */
/* ** heading0105 start ** */
/* ** heading0105 end ** */
/* ** heading0106 start ** */
/* ** heading0106 end ** */
/* ** heading0107 start ** */
/* ** heading0107 end ** */
/* ** heading0108 start ** */
/* ** heading0108 end ** */
/* ** heading0109 start ** */
/* ** heading0109 end ** */
/* ** heading0110 start ** */
/* ** heading0110 end ** */
/* ** heading0201 start ** */
/* ** heading0201 end ** */
/* ** heading0202 start ** */
/* ** heading0202 end ** */
/* ** heading0203 start ** */
/* ** heading0203 end ** */
/* ** heading0204 start ** */
/* ** heading0204 end ** */
/* ** heading0205 start ** */
/* ** heading0205 end ** */
/* ** heading0206 start ** */
/* ** heading0206 end ** */
/* ** heading0207 start ** */
/* ** heading0207 end ** */
/* ** heading0301 start ** */
/* ** heading0301 end ** */
/* ** heading0302 start ** */
/* ** heading0302 end ** */
/* ** heading0303 start ** */
/* ** heading0303 end ** */
/* ** heading0304 start ** */
/* ** heading0304 end ** */
/* ** heading0401 start ** */
/* ** heading0401 end ** */
/* ** heading0402 start ** */
/* ** heading0402 end ** */
/* ** heading0501 start ** */
/* ** heading0501 end ** */
/* ** heading0502 start ** */
/* ** heading0502 end ** */
/* ** heading0503 start ** */
/* ** heading0503 end ** */
/* ** heading0504 start ** */
/* ** heading0504 end ** */
/* ** heading0505 start ** */
/* ** heading0505 end ** */
/* ** heading0506 start ** */
/* ** heading0506 end ** */
/* ** heading0507 start ** */
/* ** heading0507 end ** */
/* ** heading0508 start ** */
/* ** heading0508 end ** */
/* ** heading0509 start ** */
/* ** heading0509 end ** */
/* ** heading0601 start ** */
/* ** heading0601 end ** */
/* ** heading0602 start ** */
/* ** heading0602 end ** */
/* ** heading0603 start ** */
/* ** heading0603 end ** */
/* ** heading0701 start ** */
/* ** heading0701 end ** */
/* ** heading0702 start ** */
/* ** heading0702 end ** */
/* ** heading0703 start ** */
/* ** heading0703 end ** */
/* ** heading0801 start ** */
/* ** heading0801 end ** */
/* ** heading0802 start ** */
/* ** heading0802 end ** */
/* ** heading0803 start ** */
/* ** heading0803 end ** */
/* ** heading0804 start ** */
/* ** heading0804 end ** */