@charset "utf-8";

/* variable ---------------------------------------------*/
:root {
	/*無彩色*/
	--black: #000000;
	--grayish-black: #333333;
	--dark-gray: #666666;
	--gray: #999999;
	--light-gray: #cccccc;
	--pale-gray: #eeeeee;
	--white: #ffffff;

	/*Bootstrap*/
	--bs-danger-bg: #f2dede;
	--bs-danger-border: #ebccd1;
	--bs-danger-text: #a94442;
	--bs-default-bg: #f5f5f5;
	--bs-default-border: #dddddd;
	--bs-default-text: #333333;
	--bs-info-bg: #d9edf7;
	--bs-info-border: #bce8f1;
	--bs-info-text: #31708f;
	--bs-info-bg-dark: #337ab7;
	--bs-info-border-dark: #2e6da4;
	--bs-success-bg: #dff0d8;
	--bs-success-border: #d6e9c6;
	--bs-success-text: #3c763d;
	--bs-warning-bg: #fcf8e3;
	--bs-warning-border: #faebcc;
	--bs-warning-text: #8a6d3b;
	--bs-well-bg: #f5f5f5;
	--bs-well-border: #e3e3e3;

	/*強調（エラー）*/
	--emphasis-red: #F00;
	--emphasis-red-pale: #FEE;

	/*強調（成功）*/
	--emphasis-green: #4B3;
	--emphasis-green-pale: #EFD;

	/*コーポレートカラー*/
	--shima-orange: #ee7800;
	--shima-orange-dark: #dd5500;
	--shima-orange-pale: #ffbb77;
	--shima-orange-whitish: #ffeecc;
}

/* form -------------------------------------------------*/

/*項目グループ
---------------------------*/
.form-group{
	margin-bottom: 3em;
}
.form-group > *:last-child{
	margin-bottom: 0;
}

/*fieldsetの入れ子*/
fieldset.form-group > fieldset.form-group{
	margin-top: 1em;
}
fieldset.form-group > fieldset.form-group > legend{
	margin-top: 0;
}

/*枠で囲われたフィールドセット*/
fieldset.form-group.fieldset-box{
	border: 1px solid var(--bs-default-border);
	padding: 1em;
}
fieldset.form-group.fieldset-box > legend{
	width: auto;
	padding-left: 1em;
	padding-right: 1em;
}
fieldset.form-group.fieldset-box > legend + .item-hl-sub{
	margin-top: 0;
}
fieldset.form-group.fieldset-box fieldset:last-of-type{
	margin-bottom: 0;
}
.form-group > fieldset.form-group.fieldset-box{
	margin-top: 2em;
	margin-bottom: 0;
}


/*項目名（label・legend）
---------------------------*/
/*初期設定*/
.form-group legend{
	color: initial;
	border: initial;
}
.form-group label{
	font-weight: 400;
}

/*項目名（メイン）*/
.form-group .item-hl{
	font-size: 100%;
	font-weight: 700;
	margin-bottom: .5em;
}

/*項目名（サブ）*/
.form-group .item-hl-sub{
	font-size: 100%;
	font-weight: 400;
	line-height: 1.2;
	margin-top: 1.5em;
	margin-bottom: .5em;
}

/*項目名と必須・任意マークを上下中央に揃える*/
.form-group .item-hl,
.form-group .item-hl-sub{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	line-height: 1.5;
}

/*入力ルール*/
span.valid-rule{
	display: block;
	text-align: right;
}

/*文章・リンク
---------------------------*/
/*段落*/
.form-group p{
}

/*段落内テキストリンク*/
.form-group p a{
	text-decoration: underline;
}
.form-group p a:hover,
.form-group p a:focus{
	text-decoration: none;
}

/*新窓リンク*/
.glyphicon-new-window{
	font-size: 80%;
	margin-left: .1em;
	margin-right: .25em;
}

/*エラーメッセージ
---------------------------*/
.form-group .error-msg{
	color: var(--emphasis-red);
}


/*入力要素
---------------------------*/
/*共通class*/
.form-control{
	color: var(--grayish-black);
	background-color: var(--white);
	font-size: 16px;
	box-shadow: none;
	height: inherit;
}

/*テキスト*/
.form-group input[type="text"]{
	width: 100%;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}
.form-group input[type="text"]:read-only{
	cursor: not-allowed;
	background-color: var(--bs-default-border);
}

/*ラジオボタン・チェックボックス（インライン）*/
.form-group .check-option{
	display: inline-block;
	color: var(--grayish-black);
	background-color: var(--white);
	border: 1px solid var(--bs-default-border);
	border-radius: 5px;
	margin-bottom: 5px;
	padding: .5em 1em;
}
.form-group .check-option:hover{
	cursor: pointer;
	background-color: #EFD;
}
.form-group .check-option input[type="checkbox"],
.form-group .check-option input[type="radio"]{
	width: 12px;
	height: 12px;
	margin-right: .5em;
}

/*ラジオボタン・チェックボックス（ブロックに変更）*/
.form-group .check-option.check-option-block{
	display: flex;
	align-items: center;
}
.form-group .check-option.check-option-block input[type="checkbox"],
.form-group .check-option.check-option-block input[type="radio"]{
	margin-top: 0;
}
.form-group .check-option.check-option-block span{
	width: 100%;
}

/*プルダウン*/
.form-group select{
	width: 100%;
	font-size: 16px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.53595%207.43098L0.221883%202.11689C-0.0344102%201.8606%20-0.0344102%201.44508%200.221883%201.18881L0.841684%200.569014C1.09754%200.313159%201.51221%200.312666%201.76866%200.56792L6%204.77943L10.2313%200.56792C10.4878%200.312666%2010.9024%200.313159%2011.1583%200.569014L11.7781%201.18881C12.0344%201.44511%2012.0344%201.86062%2011.7781%202.11689L6.46405%207.43098C6.20776%207.68725%205.79224%207.68725%205.53595%207.43098Z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E');
	background-position: right 10px center;
	background-repeat: no-repeat;
}

/*入力要素ごとの特別な設定
---------------------------*/
/*姓名が分かれた名前欄*/
.item-name-split{
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.item-name-split > div{
	flex-basis: 48%;
}
.item-name-split .item-hl-sub{
	margin-top: 0;
}
.item-name-split + .item-name-split{
	margin-top: 1em;
}

/*単位付き*/
.item-with-unit{
	display: flex;
	flex-flow: nowrap;
	align-items: center;
}
.item-with-unit select{
	padding-left: .5em;
	padding-right: .5em;
}
.item-with-unit span{
	margin: 0 .5em;
}
.item-with-unit > *:first-child{
	margin-left: 0;
}

/*年月日が分かれた「生年月日」欄*/
.item-birthday-split{
	display: flex;
	flex-flow: wrap;
	align-items: center;
}
.item-birthday-split > div:not(:last-of-type){
	margin-right: .5em;
}
.item-birthday-split > div{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}
.item-birthday-split > div > label.item-hl-sub{
	margin: 0 .5em 0;
}
.item-birthday-split > div > *[id*=month],
.item-birthday-split > div > *[id*=day]{
	width: 4em;
}
.item-birthday-split > div > *[id*=year]{
	width: 6em;
}

/*labelと例をインラインで並べたい場合
---------------------------*/
.example-inline{
	display: flex;
	flex-wrap: wrap;
}

/*説明エリア
---------------------------*/
.form-group .dsc{
	margin-bottom: .5em;
}

.form-group .dsc-sub{
	color: var(--dark-gray);
	font-size: 87%;
	margin-bottom: .5em;
}

/*確認エリア
---------------------------*/
.form-group .cnf{
}
.form-group .cnf > *:last-child{
	margin-bottom: 0;
}

/*定義リスト*/
.form-group .cnf dl dd:not(:last-of-type){
	margin-bottom: 1em;
}

/*preテキスト*/
.form-group .cnf pre{
	color: var(--grayish-black);
	background-color: var(--bs-well-bg);
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 100%;
	white-space: pre-wrap;
	border: 1px solid var(--light-gray);
	border-radius: 4px;
	padding: 1em;
}


/*入力エリア
---------------------------*/
.form-group .inp{
}
.form-group .inp + .inp{
	margin-top: 1.5em;
}
.form-group .inp > *:first-child{
	margin-top: 0;
}


/*必須・任意マーク
---------------------------*/
.form-group span.label{
	font-weight: 400;
	margin-left:3px;
	padding: .3em .5em;
}
.form-group span.label.label-required{
	background: var(--shima-orange-whitish);
	color: var(--shima-orange-dark);
	border: 1px solid var(--shima-orange);
}
.form-group span.label.label-optional{
	background-color: var(--light-gray);
	color: var(--grayish-black);
}

/*エラー有無による表示変更
---------------------------*/
.form-group .is-success{
	background-color: var(--emphasis-green-pale);
	border-color: var(--emphasis-green);
	border-width: 2px;
}
.form-group .is-invalid{
	background-color: var(--emphasis-red-pale);
	border-color: var(--emphasis-red);
	border-width: 2px;
}