/* 目次
====================================================================================================
#0 解説とルール
#1 リセット
#2 ベース
#3 フレーム
#4 グローバル
#5 ヘッダー
#6 フッター
#7 コンテンツ
　#7-1 ヘッダー
　#7-2 フッター
　#7-3 レイアウト
　#7-4 ベーススタイル
　#7-5 プロジェクトスタイル
　#7-6 ユーティリティスタイル
*/


/* ====================================================================================================
 * #0 解説とルール
 * ====================================================================================================*/

/* ----------------------------------------------------------------------------------------------------
 * #0-1 HTMLフレーム
 * ----------------------------------------------------------------------------------------------------*/

/*
body
├ header.FrmHed
│├ nav.GlbNavPri
││├ ul.GlbNavPri__List
││└ div.GlbNavPri__Drawer
│├ div.TopCov
││└ nav.GlbNavSec
││　└ ul.GlbNavSec__List
│└ div.GlbTpc
├ div.FrmMain
│├ article.FrmPri
││├ header.FrmPri__Hed
│││├ ul.topic-path
│││└ h1
││├ div.FrmPri__Cnte
│││├ div.FrmPri__Cnte__Smr
│││└ div.FrmPri__Cnte__WpEdt（WPグーテンベルグ専用）
││└ footer.FrmPri__Fot
│└ div.FrmSec
└ footer.FrmFot
*/

/* ----------------------------------------------------------------------------------------------------
 * #0-2 CSS命名規則
 * ----------------------------------------------------------------------------------------------------*/

/* 
下記BrainBEMdingをベースに単語選択などを考慮してアレンジ。レイヤーの概念は用いない
https://zenn.dev/kagan/articles/css-brain-bemding

idはformやJavaScriptなど以外では用いない
クラスを以下の6つに分類

■Block
Elementの親要素。Projectを内包。
書き方：他のプロジェクトでは活用できないプロジェクト固有のElementには、接頭辞「P_」を付ける。単語の区切りはパスカルケース（例：FrmHed）

■Element
Blockの子要素。
書き方：親要素とはアンダースコア2つで区切る。単語の区切りはパスカルケース（例：FrmHed__Title）

■Conbine
Blockなどの子要素で親要素のクラスと組み合わせて用いる汎用クラス。Elementではマークアップが冗長になりすぎる場合などに使用。子孫を汚染しないように必ず子セレクタ（>）を用いる。単体では使用不可。
書き方：接頭辞「C_」を付ける。単語の区切りはパスカルケース（例：C_Hed）

■Modifier
BlockもしくはElementの装飾、状態などのバリエーション。単体では使用しない。
書き方：ハイフン2つ（--）で区切る。単語の区切りはスネークケース（例：FrmHed--mobile_device）

■Utility
わずかなスタイルの調整などに用いる便利クラス。単体でも使用可能。
書き方：接頭辞「u_」を付ける。単語の区切りはスネークケース（例：u_size_large）

■Theme
カラーテーマやユーザーの切替で変更となるスタイルに用いるクラス。単体でも使用可能。
書き方：接頭辞「t_」を付ける。単語の区切りはスネークケース（例：t_bgc_dark）
*/

/* ----------------------------------------------------------------------------------------------------
 * #0-3 命名略語
 * ----------------------------------------------------------------------------------------------------*/

/*
単語は3文字もしくは4文字に略す
▼構造
Frm = Frame
Hed = Header
Fot = Footer
Pri = Primary
Sec = Secondary
Wrp = Wrapper
Inn = Inner
Body = Body
Cnte = Content（Countと区別するため4文字）
Main = Main
Sub = Sub
Glb = Global（前ページ共通のコンポーネント）
Loc = Local（特定の子ページのみのコンポーネント）
Topp = Top page（トップページのみのコンポーネント）
Lay = Layout
Ptn = Pattern
Cov = Cover
Smr = Summary
Grp = Group（section要素で分ける程ではない情報のかたまり）
Item = Item
Ins = Inside（表示しない内部的な要素、チェックボックスなど）
Hn = Horizontal
VT = Vertical
▼機能
Nav = Navigation
Utl = Utility
Tpc = Topic（何らかのインフォメーションが存在する場合のみ表示するコンポーネント）
Idx = Index（ページ内の目次）
Ttl = Title
Cnt = Count
Err = Error
Mgr = Manager
Msg = Message
Btn = Button
Edt = Editor
Open = Open
Clo = Close
Lbl = Label
Prg = Progress
Tbl = Table
▼数値・単位
Num = Number
Max = Maximum
Min = Minimum
Full = Full
Sml = Small
Med = Medium
Lag = Large
Top = Top
Mid = Middle
Btm = Bottom
Std = Standard
▼メディア
Txt = Text
Pic = Picture
Icon = Icon
Fig = Figure
▼スタイル
Pad = Padding
Mgn = Margin
Bgc = Backgorund color
Bdc = Border color
Color = Color（Clearと区別するため全文字）
▼その他
Wp = WordPress
Id = ID
Pc = PC
Mob = Mobile
Pos = Position
Src = Source
Tmp = Temporary
Var = Variable
Alt = Alternate
User = User
Sel = Select
Cur = Current
Cmp = Complete
Stf = Staff
Clr = Clear
Hil = Highlight
Cha = Character（文字）
Cst = Customer
*/


/* ====================================================================================================
 * #1 リセット
 * ====================================================================================================*/

/* Josh's Custom CSS Reset
   https://www.joshwcomeau.com/css/custom-css-reset/ */

*,*::before,*::after {
	box-sizing: border-box
}
* {
	margin: 0
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased
}
picture,video,canvas,svg {
	display: block;
	max-width: 100%
}
input,button,textarea,select {
	font: inherit
}
p,h1,h2,h3,h4,h5,h6 {
	overflow-wrap: break-word
}
ul,ol {
	padding-inline-start: 0;
}
#root,#__next {
	isolation: isolate
}


/* ====================================================================================================
 * #2 ベース
 * ====================================================================================================*/

html {
	height: 100vh;
	height: -webkit-fill-available;
	font-family: Lato, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 62.5%; /* ブラウザ標準の16pxを10px相当にする設定。子要素はrem指定することで「1.6rem = 16px」の様になる */
}
body {
	overflow-x: hidden;
	min-width: 350px;
	height: 100vh;
	height: -webkit-fill-available;
	color: black;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.7;
}
body .u_bgc_dark {
	color: white;
}
*:link,
*:visited {
	color: black;
}
a:hover,
label:hover {
	color: rgb(56,119,209);
	cursor: pointer;
}
.u_bgc_dark *:link,
.u_bgc_dark *:visited {
	color: white;
}
.u_bgc_dark a:hover,
.u_bgc_dark label:hover {
	color: rgb(68,147,255);
}
* {
	transition:
		color .2s cubic-bezier(0.230, 1.000, 0.320, 1.000),
		opacity .2s cubic-bezier(0.230, 1.000, 0.320, 1.000),
		background-color .2s cubic-bezier(0.230, 1.000, 0.320, 1.000),
		border-color .2s cubic-bezier(0.230, 1.000, 0.320, 1.000),
		width .3s ease,
		height .3s ease,
		transform .4s cubic-bezier(0.230, 1.000, 0.320, 1.000),
		top .4s cubic-bezier(0.230, 1.000, 0.320, 1.000),
		bottom .4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

.DispTabOnly {
	display: none;
}
.DispTabLess {
	display: none;
}
.DispMobOnly {
	display: none;
}
@media screen and ( max-width:1200px ) {
	.DispPcOnly {
		display: none !important;
	}
	.DispTabOnly {
		display: initial;
	}
	.DispTabLess {
		display: initial;
	}
}
@media screen and ( max-width:900px ) {
	.DispTabMore {
		display: none !important;
	}
	.DispTabOnly {
		display: none !important;
	}
	.DispMobOnly {
		display: initial;
	}
}
.IconBtn {
	font-size: 2.5rem;
}
@media screen and ( max-width:900px ) {
	.IconBtn {
		font-size: 2rem;
	}
}
.InsAlt {
	display: none;
}

/* FAアイコンが長男かつ、br改行以外の弟を持つ場合に適用 */
.fa-solid:first-child + *:not(br),
.fa-regular:first-child + *:not(br),
.fa-brands:first-child + *:not(br) {
	margin-left: 0.5em;
}


/* ====================================================================================================
 * #3 フレーム
 * ====================================================================================================*/

.FrmWrp {
	overflow-x: hidden;
	overflow-y: hidden;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100vh;
	height: -webkit-fill-available;
}
.FrmGlb {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 230px;
	padding-right: 30px;
}
.FrmMain {
	display: flex;
	flex: 1;
	flex-direction: column;
}
.FrmCnte {
	overflow-y: scroll;
	display: flex;
	flex: 1;
	border: 1px solid rgb(230,230,230);
	border-top-left-radius: 20px;
}
.FrmPri {
	padding: 30px 60px;
}
.FrmSec {
	
}


/* ====================================================================================================
 * #4 グローバル
 * ====================================================================================================*/

.FrmGlb__Ttl {
	display: block;
	padding: 30px 0 30px 30px;
}
.FrmGlb__Ttl * {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.GlbNavPc__Item {
	position: relative;
	margin-bottom: 10px;
	list-style: none;
	line-height: 2.5rem;
	font-size: 1.6rem;
}
.GlbNavPc__Item a {
	display: block;
	width: 100%;
	padding: 10px 15px 10px 30px;
	border-radius: 0 10px 10px 0;
	text-decoration: none;
}
.GlbNavPc__Item a:hover,
.GlbNavPc__Item a:active {
	background: #b4d9f0;
	color: black;
}
.GlbNavPc__Item .fa-solid {
	font-size: 1.8rem;
}
.GlbNavPc .fa-solid:first-child + *:not(br) {
	margin-left: 1em;
}
.FrmGlb__Fot a {
	display: block;
	margin-left: 30px;
	margin-bottom: 20px;
}
.FrmGlb__Fot img {
	width: 100%;
	height: auto;
}


/* ====================================================================================================
 * #5 ヘッダー
 * ====================================================================================================*/

.FrmHed {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 30px 15px 0;
	user-select: none;
}
.P_MySearchForm {
	display: flex;
	justify-content: space-between;
    align-items: center;
    overflow: hidden;
	background: rgb(240,240,240);
	border-radius: 10px;
}
.P_MySearchForm__Field {
	width: 300px;
	padding: 5px 15px;
	background: rgba(255,255,255,0);
	border: none;
	box-sizing: border-box;
	outline: none;
}
.P_MySearchForm__Label {
	padding: 0 15px;
	cursor: pointer;
}
.P_MySearchForm__Submit {
	display: none;
}


/* ====================================================================================================
 * #6 フッター
 * ====================================================================================================*/




/* ====================================================================================================
 * #7 コンテンツ
 * ====================================================================================================*/

/* ----------------------------------------------------------------------------------------------------
 * #7-1 コンテンツ / ヘッダー
 * ----------------------------------------------------------------------------------------------------*/



/* ----------------------------------------------------------------------------------------------------
 * #7-2 コンテンツ / フッター
 * ----------------------------------------------------------------------------------------------------*/



/* ----------------------------------------------------------------------------------------------------
 * #7-3 コンテンツ / レイアウト
 * ----------------------------------------------------------------------------------------------------*/

/* パターン/リスト
.PtnList
└ .PtnList__Hed
└ .PtnList__Body
　└ table.PtnList__Body__Tbl
*/
.PtnList {
	overflow: hidden;
	background: white;
	border: 1px solid rgb(230,230,230);
	border-radius: 15px;
	box-shadow: rgb(229, 234, 236) 0px 2px 12px;
}
@media screen and ( max-width:500px ) {
	.PtnList {
		border-radius: 0;
		box-shadow: rgb(216,221,221) 0px 2px 12px;
	}
}
.PtnList__Hed {
	display: inline-block;
	padding: 0.5em 1em;
	background: rgb(206,219,234);
	border-bottom-right-radius: 5px;
	font-size: 1.6rem;
}
.PtnList__Hed a{
	text-decoration: none;
}
.PtnList__Hed > * + * {
	margin-left: 0.8em;
}
.PtnList__Hed > *:first-child {
	font-weight: bold;
}
.PtnList__Body {
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
}
@media screen and ( max-width:500px ) {
	.PtnList__Body {
		padding: 10px;
	}
}

/* パターン/カード
.PtnCard
└ .PtnCard__Item
　├ .PtnCard__Item__Cnte
　│├ .C_Hed（無しでもOK）
　│├ .C_Body
　│└ .C_Fot（無しでもOK）
　└ .PtnCard__Item__Utl（無しでもOK）
*/
.PtnCard {
	
}
.PtnCard__Item {
	position: relative;
	overflow: hidden;
	display: flex;
	-max-width: 600px;
	background: rgb(255,255,255);
	border: 1px solid rgb(230,230,230);
	border-radius: 15px;
	box-shadow: rgb(229, 234, 236) 0px 2px 12px;
}
.AltDisp__FrmSec:checked ~ .FrmMain .AltDisp__FrmSecCnte--frm_pri:checked + .PtnCard__Item {
	transform: translatex(10px);
}
@media screen and ( max-width:900px ) {
	.PtnCard__Item {
		flex-direction: column;
	}
}
@media screen and ( max-width:500px ) {
	.PtnCard__Item {
		border-radius: 0;
		box-shadow: rgb(216,221,221) 0px 2px 12px;
	}
}
.PtnCard > .PtnCard__Item ~ .PtnCard__Item {
	margin-top: 20px;
}
@media screen and ( max-width:900px ) {
	.PtnCard__Item + * {
		margin-top: 20px;
	}
}
.PtnCard__Item__Cnte {
	flex: 1;
}
.PtnCard__Item__Cnte i {
	margin-right: 0.4em;
}
.PtnCard__Item__Cnte > .C_Hed {
	display: flex;
	justify-content: space-between;
	padding: 0.6em 1em;
	font-size: 1.6rem;
	font-weight: bold;
}
.PtnCard__Item__Cnte > .C_Hed > * {
	flex: 1;
}
.PtnCard__Item__Cnte > .C_Hed a{
	text-decoration: none;
}
.PtnCard__Item__Cnte > .C_Body {
	display: flex;
	justify-content: space-between;
	padding: 0.6em 1em;
}
.PtnCard__Item__Cnte > .C_Body > * {
	flex: 1;
}
.PtnCard__Item__Cnte > .C_Fot {
	display: inline-block;
	padding: 0.5em 1em;
	background: rgb(250,250,250);
	border-top-right-radius: 5px;
	color: rgb(50,50,50);
	font-size: 1.2rem;
}
.PtnCard__Item__Cnte > .C_Fot > * {
	display: inline;
}
.PtnCard__Item__Cnte > .C_Fot > * + * {
	padding-left: 1em;
}
@media screen and ( max-width:700px ) {
	.PtnCard__Item__Cnte > .C_Body--swipe {
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		scroll-padding: 20px;
		flex-wrap: nowrap;
		padding-bottom: 10px;
		margin-right: 0;
		margin-bottom: 10px;
	}
}
@media screen and ( max-width:500px ) {
	.PtnCard__Item__Cnte > .C_Body {
		padding: 10px;
		margin-bottom: -10px;
	}
	.PtnCard__Item__Cnte > .C_Body--swipe {
		scroll-padding: 10px;
		margin-bottom: 0;
	}
}
@media screen and ( max-width:1200px ) {
	.PtnCard__Item__Cnte > .C_Body > * {
		max-width: none;
	}
}
@media screen and ( max-width:900px ) {
	.PtnCard__Item__Cnte > .C_Body > * {
		min-width: 300px;
	}
}
@media screen and ( max-width:700px ) {
	.PtnCard__Item__Cnte > .C_Body--swipe > * {
		scroll-snap-align: center;
		flex: none;
		width: calc(100% - 20px);
		min-width: auto;
		margin-bottom: 0;
	}
	.PtnCard__Item__Cnte > .C_Body--swipe > *:first-child {
		scroll-snap-align: start;
	}
	.PtnCard__Item__Cnte > .C_Body--swipe > *:last-child {
		scroll-snap-align: end;
	}
}
@media screen and ( max-width:500px ) {
	.PtnCard__Item__Cnte > .C_Body > * {
		margin-bottom: 10px;
	}
	.PtnCard__Item__Cnte > .C_Body--swipe > * {
		margin-right: 10px;
		margin-bottom: 0;
	}
}
.PtnCard__Item__Utl {
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.PtnCard__Item__Utl__Hil { /* Hil = Highlight */
	padding: 5px 10px;
	background-color: black;
	border-bottom-left-radius: 5px;
	color: white;
	text-align: center;
}
.PtnCard__Item__Utl__Hil--priority {
	background-color: rgb(213, 0, 0);
}
@media screen and ( max-width:900px ) {
	.PtnCard__Item__Utl {
		flex-direction: row;
		margin: 0 20px 20px;
	}
}
@media screen and ( max-width:500px ) {
	.PtnCard__Item__Utl {
		margin: 0 10px 10px;
	}
}
@media screen and ( max-width:900px ) {
	.PtnCard__Item__Utl > .C_Inn {
		flex-direction: row;
	}
}

@media screen and ( max-width:900px ) {
	.PtnCard__Item__Utl > .C_Inn > * + * {
		margin-top: 0;
		margin-left: 10px;
	}
}
.PtnCard__Item__Utl label {
	display: block;
	padding: 15px;
}

/* ----------------------------------------------------------------------------------------------------
 * #7-4 コンテンツ / ベーススタイル
 * ----------------------------------------------------------------------------------------------------*/

.FrmPri__Inn > * + * {
	margin-top: 40px;
}
@media screen and ( max-width:900px ) {
	.FrmPri__Inn > * + * {
		margin-top: 20px;
	}
}
/* 要素固有 */
figcaption {
	text-align: center;
	font-size: 1.2rem;
}

/* table要素 */
.Tbl {
	width: 100%;
	border-collapse: collapse;
}
.Tbl--ptn_list {
	width: auto;
}
.Tbl th,
.Tbl td {
	padding: 0.2em 0.6em;
	background: white;
}
.Tbl thead th {
	border-bottom: 1px solid rgb(150,150,150);
	color: rgb(100,100,100);
	font-size: 1.2rem;
	font-weight: 400;
}
.Tbl thead th:first-child {
	border-top-left-radius: 5px;
}
.Tbl thead th:last-child {
	border-top-right-radius: 5px;
}
.Tbl tbody tr:nth-child(even) > * {
	background: rgb(250,250,250);
}
.Tbl tbody th {
	text-align: left;
	font-weight: 600;
}
.Tbl tbody tr:last-child {
	border-bottom: 1px solid rgb(230,230,230);
}
.Tbl i {
	margin-right: 0.4em;
}
.Tbl tbody tr:hover > * {
	background-color: rgb(240,240,240);
}

/* dl要素 */
.Dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.Dl > * {
	padding: 0.2em 0.6em;
}
.Dl > *:nth-child(odd) {
	width: 6em;
	border-right: 1px solid rgb(150,150,150)-;
	color: rgb(100,100,100);
	font-size: 1.2rem;
	font-weight: 600-;
}
.Dl--cha_many > *:nth-child(odd) {
	width: 8em;
}
.Dl > *:nth-child(even) {
	width: calc(100% - 6em);
}
.Dl--cha_many > *:nth-child(even) {
	width: calc(100% - 8em);
}
.Dl > *:nth-child(4n),
.Dl > *:nth-child(4n-1) {
	background: rgb(250,250,250);
}
.Dl dt:hover,
.Dl dt:hover + dd {
	background-color: rgb(240,240,240);
}

/* トピックパス */
.TpcPath { /* ul要素を使用 */
	display: flex;
	list-style: none;
	font-size: 1.2rem;
}
.TpcPath > * + *::before {
	content: '\f054';
	margin-left: 0.8em;
	margin-right: 0.8em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

/* コンテンツグループ */
.CnteGrp {
	overflow: hidden;
	border-radius: 7px;
	border: 1px solid rgb(220,220,220);
}
@media screen and ( min-width:701px ) {
	.CnteGrp:hover {
		z-index: 2;
		border-color: rgb(200,200,200);
		box-shadow: rgb(229, 234, 236) 0px 2px 12px;
	}
}
.CnteGrp .CnteGrp + .CnteGrp {
	margin-top: 5px;
}
.CnteGrp__Hed {
	padding: 0.5em 1em;
	background: rgb(250,250,250);
	font-weight: 600;
}
@media screen and ( min-width:701px ) {
	.CnteGrp:hover .CnteGrp__Hed {
		border-color: black;
	}
}
.CnteGrp__Hed--multi {
	display: flex;
	justify-content: space-between;
}
.CnteGrp__Body {
	padding: 15px;
}
.CnteGrp .CnteGrp .CnteGrp__Body {
	padding: 10px;
}
@media screen and ( max-width:700px ) {
	.CnteGrp__Body {
		padding: 10px 0 0;
	}
}
.CnteGrp__Body > * + * {
	margin-top: 10px;
}

/* 水平リスト */
.HnList {
	overflow: hidden;
	display: flex;
}
.HnList:hover {
	background-color: rgb(240,240,240);
}
.HnList > * {
	flex: 1;
	padding: 0.2em 0.6em 0.1em;
	border-bottom: 3px solid rgb(240,240,240);
	text-align: center;
}
.HnList > * + * {
	margin-left: 1px;
}
.HnList--with_ttl > :nth-child(2) {
	margin-left: 0;
}
.HnList--with_ttl > *:first-child {
	flex: none;
	padding-bottom: calc(0.1em + 3px);
	border-right: 1px solid rgb(150,150,150);
	border-bottom: none;
	font-weight: 600;
}
.HnList > .C_Sel {
	border-bottom-color: rgb(56,119,209);
}
.HnList--prg > .C_Sel {
	border-bottom-color: rgb(0,179,18);
}
.HnList i {
	margin-right: 0.4em;
}

/* タグアイコン */
.TagIcon {
	padding: 5px 10px;
	background: white;
	border: 1px solid rgb(230,230,230);
	border-radius: 5px;
	text-align: center;
	font-size: 1.2rem;
}
.TagIcon--priority {
	background-color: rgb(213, 0, 0);
	border: none;
	color: white;
}
.TagIcon i {
	font-size: 1.6rem;
}

/* プログレスバー */
.PrgBar {
	display: flex;
}
.PrgBar > * {
	flex: 1;
	display: block;
	height: 10px;
	background: rgb(0,179,18);
}
.PrgBar > *:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.PrgBar > * + * {
	margin-left: 1px;
}
.PrgBar > *:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.PrgBar > *.C_Cur ~ * {
	background: rgb(240,240,240);
}

/* ボタン */
.Btn {
	display: inline-block;
	padding: 0.2em 0.8em;
	background: rgb(250,250,250);
	border: 2px solid rgb(230,230,230);
	border-radius: 100px;
	text-decoration: none;
	font-size: 1.6rem;
}
.Btn:hover {
	border-color: rgb(56,119,209);
}
.u_bgc_dark .Btn {
	background-color: white;
	border-color: white;
	color: black;
}
.u_bgc_dark .Btn:hover {
	border-color: rgb(68,147,255);
	color: rgb(56,119,209);
}
.Btn--highlight {
	background-color: rgb(56,119,209);
	border-color: rgb(56,119,209);
	color: white;
}
.Btn--highlight:hover {
	background-color: rgb(68,147,255);
	color: white;
}
.u_bgc_dark .Btn--highlight {
	background-color: rgb(68,147,255);
	border-color: rgb(68,147,255);
	color: white;
}
.u_bgc_dark .Btn--highlight:hover {
	border-color: white;
	color: white;
}
.Btn--sml {
	font-size: 1.2rem;
}

/* ----------------------------------------------------------------------------------------------------
 * #7-5 コンテンツ / プロジェクトスタイル
 * ----------------------------------------------------------------------------------------------------*/

/* ボタン */
.Btn--current_user {
	padding: 0 0.8em;
	font-size: 1.2rem;
}

/* コンテンツグループ */
.CnteGrp .Tbl--operation tr > *:nth-child(n+2),
.Tbl--frm_sec_order tr > *:nth-child(n+2) {
	white-space: nowrap;
}
.FrmSec__Cnte__Action > .CnteGrp__Body {
	overflow-y: scroll;
	max-height: 300px;
}

/* アイコン */
.Icon__Maker {
	padding: 0.2em 0.5em;
	background: black;
	border-radius: 5px;
	color: white;
	font-weight: bold;
}
.Icon__Maker--honda {
	background: rgb(204,0,0);
}
.Icon__Maker--honda::before {
	content: "H";
}
.Icon__Maker--yamaha {
	background: rgb(17,18,115);
}
.Icon__Maker--yamaha::before {
	content: "Y";
}
.Icon__Maker--kawasaki {
	background: rgb(102,204,51);
}
.Icon__Maker--kawasaki::before {
	content: "K";
	color: black;
}
.Icon__Maker--suzuki {
	background: rgb(255,255,0);
}
.Icon__Maker--suzuki::before {
	content: "S";
	color: black;
}
.Icon__Maker--bmw {
	background: rgb(0,102,177);
}
.Icon__Maker--bmw::before {
	content: "B";
}
.Icon__Maker--ducati {
	background: rgb(203,21,23);
}
.Icon__Maker--ducati::before {
	content: "D";
}
.Icon__Maker--ktm {
	background: rgb(255,102,0);
}
.Icon__Maker--ktm::before {
	content: "K";
	color: black;
}
.Icon__Maker--hd {
	background: black;
}
.Icon__Maker--hd::before {
	content: "H";
	color: rgb(250,102,0);
}
.Icon__Maker--triumph {
	background: black;
}
.Icon__Maker--triumph::before {
	content: "T";
}
.Icon__Maker--mv_agusta {
	background: rgb(36,160,206);
}
.Icon__Maker--mv_agusta::before {
	content: "M";
}
.Icon__Maker--aprilia {
	background: rgb(255,0,0);
}
.Icon__Maker--aprilia::before {
	content: "a";
}
.Icon__Maker--moto_guzzi  {
	background: black;
}
.Icon__Maker--moto_guzzi::before {
	content: "M";
}
.Icon__Maker--husqvana  {
	background: rgb(0,37,80);
}
.Icon__Maker--husqvana::before {
	content: "H";
}
.Icon__Maker--gasgas {
	background: rgb(203,13,37);
}
.Icon__Maker--gasgas::before {
	content: "G";
}
.Icon__Maker--royal_enfield  {
	background: rgb(238,199,0);
}
.Icon__Maker--royal_enfield::before {
	content: "R";
	color: rgb(226,73,0);
}
.Icon__Maker--other {
	background: rgb(50,50,50);
}
.Icon__Maker--other::before {
	content: "?";
}

/* ----------------------------------------------------------------------------------------------------
 * #7-6 コンテンツ / ユーティリティスタイル
 * ----------------------------------------------------------------------------------------------------*/

/* アイコン配色 */
.fa-house.coloring {
	color: rgb(122,158,206);
}
.fa-user.coloring {
	color: rgb(226,160,142);
}
.fa-wrench.coloring {
	color: rgb(137,153,155);
}
.fa-box.coloring {
	color: rgb(188,165,102);
}
.fa-ellipsis.coloring {
	color: rgb(100,100,100);
}
.fa-circle-check.coloring {
	color: rgb(0,179,18);
}
.fa-camera.coloring {
	color: rgb(100,100,100);
}
.fa-motorcycle.coloring {
	color: rgb(100,100,100);
}
.fa-comment.coloring {
	color: rgb(127,204,122);
}
.fa-circle-info.coloring {
	color: rgb(0,179,18);
}
.fa-circle-exclamation.coloring {
	color: rgb(246, 191, 38);
}
.fa-triangle-exclamation.coloring {
	color: rgb(213, 0, 0);
}
.fa-link.coloring {

}
.fa-line.coloring {
	color: rgb(0,185,0);
}

/* フォント */
.u_color_none {
	color: rgb(50, 50, 50);
}
.u_color_strawberry {
	color: rgb(213, 0, 0);
}
.u_color_orange {
	color: rgb(244, 81, 30);
}
.u_color_banana {
	color: rgb(246, 191, 38);
}
.u_color_muscat {
	color: rgb(51, 182, 121);
}
.u_color_watermelon {
	color: rgb(11, 128, 67);
}
.u_color_soda {
	color: rgb(3, 155, 229);
}
.u_color_blueberry  {
	color: rgb(63, 81, 181);
}
.u_color_grape {
	color: rgb(142, 36, 170);
}
.u_color_lavender {
	color: rgb(121, 134, 203);
}
.u_color_peach {
	color: rgb(230, 124, 115);
}

.u_font_large {
	font-size: 1.8rem;
}
.u_font_bold {
	font-weight: bold;
}


/* ====================================================================================================
 * モーダルウィンドウ
 * ====================================================================================================*/

.Modal {
	z-index: 2000;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center
}
.Modal:not(:target) {
  opacity: 0;
  visibility: hidden;
}
.Modal:target {
  opacity: 1;
  visibility: visible;
}
.Modal::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}
.Modal__Overlay {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .7)
}
.Modal__Utl {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	box-shadow: rgba(0,0,0,.3) 0px 2px 30px;
}
.Modal__Utl > * {
	display: inline-block;
	padding: 0.5em 1em;
	background-color: white;
	text-decoration: none;
	font-size: 1.6rem;
}
.Modal__Utl > *:first-child {
	border-bottom-left-radius: 12px;
}
.Modal__Utl > *:last-child {
	border-bottom-right-radius: 12px;
}
.Modal__Utl__Backward {
	background-color: rgb(0,179,18);
	color: white;
}
.Modal__Utl__Backward:hover {
	background-color: rgb(0,206,22);
	color: white;
}
.Modal__Utl__Forward {
	background-color: rgb(56,119,209);
	color: white;
}
.Modal__Utl__Forward:hover {
	background-color: rgb(68,147,255);
	color: white;
}
.Modal__Utl > * > * + * {
	margin-left: 0.5em;
}
.Modal__Cnte {
	position: relative;
	z-index: 2;
	display: inline-block;
	width: 70%;
	max-width: 600px;
	padding: 40px;
	background: white;
	border-radius: 15px;
	box-shadow: rgba(0,0,0,.3) 0px 2px 30px;
	vertical-align: middle
}