/* CSS変数設定 */
:root {
	/* 固定ヘッダの高さやmarginに設定する値 */
	--fixed-header: 80px;

	/* 固定フッタの高さやmarginに設定する値 */
	--fixed-footer-menu: 40px;
	--fixed-footer-advertising: calc(var(--fixed-footer-menu) + 60px); /* アフィリエイト広告を含めた高さ */
	--safeareainsetbottom: env(safe-area-inset-bottom);

	/* アイコンに関する値 */
	--file-icon-size: 30px; /* ファイルアイコンサイズ */
	--menu-icon-size: 30px; /* メニューアイコンサイズ */
	--check-icon-rm: 0.5rem; /* チェックアイコンの右margin */
	--icon-list-size: 68px; /* アイコンリストのサイズ */
	--password-icon-size: 20px; /* パスワードアイコンサイズ */

	/* フォントに関する値 */
	--font-size: 16px; /* 認証処理まではこのサイズで表示 */
	--font-family: sans-serif;
	--font-weight: initial;

	/* 文字幅 */
	--char2-w: 2.25em; /* 二文字幅 */
	--char3-w: 3.25em; /* 三文字幅 */
	--char4-w: 4.5em; /* 四文字幅 */

	/* ボタン幅 */
	--char1-button-w: 2.25em; /* 一文字幅 */
	--char2-button-w: 3.25em; /* 二文字幅 */
	--char4-button-w: 4.25em; /* 四文字幅 */

	/* ボーダーの設定値 */
	--def-border: 1px solid #7D7D7D;

	/* ラベルの設定値 */
	--def-label-background: #ADD8E6;
}

/* 画面幅 */
@media screen and (min-width: 768px) {
	.app.w-fixed, .header.w-fixed, .content.w-fixed, dialog.w-fixed, .w-fixed {
		width: 750px;
		margin-inline: auto;
	}
}

/*==================== 
* 各要素デフォルト設定 
* ====================*/
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: var(--font-family);
	font-weight: var(--font-weight);
}

/* フォントサイズの反映 */
.main, .dialog-content div, input, select, button, textarea {
	font-size: var(--font-size);
}
.font-large {
	font-size: 1.5rem;
}

/* hover時のリンク設定 */
a:hover:not(.btn-link) {
	color: #FF0000;
	text-decoration: none;
}

/* 訪問済のリンク設定 */
a:visited:not(.btn-link) {
	color: #1A0DAB;
}

/* ボタンデフォルト設定 */
button, .btn-link {
	cursor: pointer;
	background-color: #001E43;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 0.5rem;
	padding: 0.5rem;
	/* 中央寄せ */
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-link {
	text-decoration: none;
	border: solid 2px #000000;
}

button:hover, .btn-link:hover {
	opacity: 0.7;
	border-bottom: 2px solid #000;
}
a.img-link:hover {
	opacity: 0.7;
}
a.img-link > img, .img-in-text > img {
	vertical-align: middle;
}

/* 反転ボタン */
button.invert {
	background-color: #FFFFFF;
	color: #001E43;
	border: 2px solid #001E43;
}

/* リストデフォルト設定 */
ol, ul {
	padding-left:0;
}
li {
	list-style: none;
	padding-left: 1rem;
}
ol.li-unset > li, ul.li-unset > li {
	list-style: unset;
	padding-inline: 0;
}

/* タイトル */
h1,h2,h3,h4,h5,h6 {
	text-align: center;
	margin: 0.5rem 0;
}

/* テキストエリア */
textarea {
	height: 80px;
	padding: 8px;
}
textarea.h-medium {
	height: 150px;
}
textarea.auto-sizing {
	field-sizing: content;
	min-height: min-content;
}

/* paddingの初期化 */
input {
	padding: revert;
}

/* チェックボックスのサイズ固定(iOSでサイズが変わるため) */
input[type=checkbox] {
	min-width: var(--font-size);
}

/* 読み取り専用時 */
input[type=text]:read-only, textarea:read-only {
	background-color: #FEFEFE;
}

/* 操作不可に設定したエリア内の表示 */
[inert]:not(dialog) {
	opacity: 0.5;
}
dialog[inert] * {
	opacity: 0.8;
}

/*==================== 
* デフォルトコンテナ 
* ====================*/
.app {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin: auto;
}

.header {
	width: 100%;
	z-index: 150;
}

.header, .content {
	background-color: #FFFFFF;
}

.content {
	width: 100%;
}

/* ヘッダー上部固定時の設定 */
.header.fixed-header {
	position: sticky;
	inset: 0;
	z-index: 1000;
}

/* ヘッダー上部固定画面でページ内リンクがある場合の設定 */
html.fixed-header-anchor-link {
	scroll-padding-top: 100px;
}

/* フッター固定時の設定(コンテンツの高さが自動で決まらない場合を対象とする) */
.app.fixed-footer .main:not(.auto-height) {
	margin-bottom: calc(var(--safeareainsetbottom) + var(--fixed-footer-menu));
}
.main {
	display: flex;
	flex-direction: row;
}

/*==================== 
* マージン・パディング
* ====================*/
/* 下 */
.mb-0, .f-row.mb-0 {
	margin-bottom: 0;
}
.mb-1, .f-row.mb-1 {
	margin-bottom: 0.25rem;
}
.mb-2, .f-row.mb-2 {
	margin-bottom: 0.5rem;
}
.mb-3, .f-row.mb-3 {
	margin-bottom: 1rem;
}
.mb-4, .f-row.mb-4 {
	margin-bottom: 1.5rem;
}
.mb-5, .f-row.mb-5 {
	margin-bottom: 2rem;
}
.pb-0 {
	padding-bottom: 0;
}
.pb-1 {
	padding-bottom: 0.25rem;
}
.pb-2 {
	padding-bottom: 0.5rem;
}
.pb-3 {
	padding-bottom: 1rem;
}
.pb-4 {
	padding-bottom: 1.5rem;
}
.pb-5 {
	padding-bottom: 2rem;
}

/* 上 */
.mt-0 {
	margin-top: 0;
}
.mt-1 {
	margin-top: 0.25rem;
}
.mt-2 {
	margin-top: 0.5rem;
}
.mt-3 {
	margin-top: 1rem;
}
.mt-4 {
	margin-top: 1.5rem;
}
.mt-5 {
	margin-top: 2rem;
}
.pt-0 {
	padding-top: 0;
}
.pt-1 {
	padding-top: 0.25rem;
}
.pt-2 {
	padding-top: 0.5rem;
}
.pt-3 {
	padding-top: 1rem;
}
.pt-4 {
	padding-top: 1.5rem;
}
.pt-5 {
	padding-top: 2rem;
}

/* 左 */
.ml-0 {
	margin-left: 0;
}
.ml-1 {
	margin-left: 0.25rem;
}
.ml-2 {
	margin-left: 0.5rem;
}
.ml-3 {
	margin-left: 1rem;
}
.ml-4 {
	margin-left: 1.5rem;
}
.ml-5 {
	margin-left: 2rem;
}
.pl-1 {
	padding-left: 0.25rem;
}
.pl-2 {
	padding-left: 0.5rem;
}
.pl-3 {
	padding-left: 1rem;
}
.pl-4 {
	padding-left: 1.5rem;
}
.pl-5 {
	padding-left: 2rem;
}

/* 右 */
.mr-1 {
	margin-right: 0.25rem;
}
.mr-2 {
	margin-right: 0.5rem;
}
.mr-3 {
	margin-right: 1rem;
}
.mr-4 {
	margin-right: 1.5rem;
}
.mr-5 {
	margin-right: 2rem;
}
.pr-1 {
	padding-right: 0.25rem;
}
.pr-2 {
	padding-right: 0.5rem;
}
.pr-3 {
	padding-right: 1rem;
}
.pr-4 {
	padding-right: 1.5rem;
}
.pr-5 {
	padding-right: 2rem;
}

/* オート */
.mt-auto {
	margin-top: auto;
}
.mb-auto {
	margin-bottom: auto;
}
.m-auto {
	margin: auto;
}
.ml-auto {
	margin-left: auto;
}
.mr-auto {
	margin-right: auto;
}

/* 全方向 */
.p-0 {
	padding: 0;
}
.p-1 {
	padding: 0.25rem;
}
.p-2 {
	padding: 0.5rem;
}
.p-3 {
	padding: 1rem;
}
.p-4 {
	padding: 1.5rem;
}
.p-5 {
	padding: 2rem;
}
.m-0 {
	margin: 0;
}
.m-1 {
	margin: 0.25rem;
}
.m-2 {
	margin: 0.5rem;
}
.m-3 {
	margin: 1rem;
}
.m-4 {
	margin: 1.5rem;
}
.m-5 {
	margin: 2rem;
}

/*==================== 
* 幅設定
* ====================*/
.w-100 {
	width: 100%;
}
.w-50 {
	width: 50%;
}
.w-25 {
	width: 25%;
}
.w-0 {
	width: 0;
}
.w-fit {
	width: fit-content;
}
.w-char2 {
	width: var(--char2-w);
}

/*==================== 
* 高さ設定
* ====================*/
.h-100 {
	height: 100%;
}
.h-auto {
	height: auto;
}

/*==================== 
* ボーダー設定
* ====================*/
.border-0, img.border-0, .icon-area.border-0 {
	border: 0;
}
.border-top-0, tr:first-child > th.border-top-0 {
	border-top: 0;
}
.border-1 {
	border: 1px solid;
}
.border-black {
	border-color: #000000;
}
.border-bottom {
	border-bottom: 1px solid;
}

/*==================== 
* クラス
* ====================*/
.container {
	margin: auto;
}

/* 子要素を同じ行にして左右に配置する */
.child-element-line {
	display:flex;
	justify-content: space-between;
}

/* 要素の非表示 */
.display-none, div.display-none {
	display: none;
}

/* インライン要素 */
.inline, .icon-area.inline {
	display: inline;
}

/* ブロック要素 */
.block {
	display: block;
}

/* flexbox */
.d-flex {
	display: flex;
}

/*  横並び*/
.f-row {
	display: flex;
	align-items: stretch;
	margin-bottom: 5px;
}
.f-row.f-item-center, .f-item-center, .g-item-center {
	align-items: center;
}
.f-row > .f-self-center, .f-self-center, .g-self-center {
	align-self: center;
}
.g-row-center {
	place-items: center;
}
.f-row > .f-self-stretch {
	align-self: stretch;
}

/* 余白を埋める */
.f-row > .f-1, .f-1 {
	flex: 1;
	min-width: 0;
}

/* flexbox：中央寄せ */
.justify-content-center {
	justify-content: center;
}

/* テキストの省略 */
.text-truncate {
	white-space: nowrap;
	overflow: hidden;
}

/* テキストの途中改行 */
.word-break-all {
	word-break: break-all;
}

/* テキストのXX寄せ */
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right, div.text-right {
	text-align: right;
}

/* メッセージエリア */
#message-area {
	margin-bottom: 5px;
	min-height: 1.5rem;
}
/* 画面幅が最大767pxまでの場合 */
@media (max-width: 767px) {
	#message-area {
		font-size: 0.75rem;
	}
}

/* お知らせメッセージ */
.notice-msg {
	background-color: #FFFFFF;
	color: #000000;
}
/* 警告メッセージ */
.warn-msg {
	background-color: #FFFFCC;
	color: #FF0000;
}
/* エラーメッセージ */
.err-msg {
	background-color: #ffe5e2;
	color: #FF0000;
}

/* 期限切れ色 */
.expired-color {
	background-color: #D3D3D3;
}

/* テキスト(赤) */
.text-red {
	color: #FF0000;
	font-weight: bold;
}

/* 右寄せリンク */
.right-link {
	text-align: right;
}

/* テキストの折り返し防止 */
.text-nowrap {
	white-space: nowrap;
}

/* flexboxの縦並べ */
.f-column {
	flex-direction: column;
}

/* disabledのinput要素をテキストとして表示 */
input.disabled-text:disabled, textarea.disabled-text:disabled {
	border: none;
	/* iphone対応 */
	-webkit-text-fill-color: #000000;
	opacity: 1;
}

/* アイコン一覧表示エリア */
.icon-list-area {
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	place-items: center;
	margin: 0;
}
.icon-list-area img, .dialog-header.big-icon-img-area img {
	height: var(--icon-list-size);
	width: var(--icon-list-size);
}
.single-icon.sub-grid {
	grid-column: initial;
	place-items: center;
}

/* アイコンエリア */
.icon-area {
	border: 1px solid #000000;
	background-color: #FFFFFF;
	width: calc(var(--file-icon-size) + 0.25rem);
	height: calc(var(--file-icon-size) + 0.25rem);
	padding: 1px;
	/* 中央寄せ */
	display: flex;
	justify-content: center;
	align-items: center;
}
/* アイコン */
.icon-area > img, .main button > img {
	width: var(--file-icon-size);
	height: var(--file-icon-size);
}

/* ファイルアイコン */
.file-icon {
	width: var(--file-icon-size);
	height: var(--file-icon-size);
}

/* マウスカーソル */
.cur-pointer {
	cursor: pointer;
}
.cur-auto, div.cur-auto {
	cursor: auto;
}

/* メニュー画面のボタンエリア */
.menu-btn-area > button {
	margin-bottom: 0.5rem;
}

/* ボタン内の画像を中央寄せ */
button > img {
	align-items: center;
	display: grid;
}

/* スクロールテキストを表示するエリア */
.scroll-text-area {
	overflow-y: scroll;
	height: 150px;
	background-color: #EEEEEE;
}

/* 水平方向の幅超過時のスクロール設定 */
.overflow-x-auto {
	overflow-x: auto;
}

/*==================== 
* パスワードエリア
* ====================*/
.password-area {
	position: relative;
	flex: 1;
}
.password-area > input {
	padding-right: 3rem;
}
.password-area > img {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	right: 10px;
	width: var(--password-icon-size);
	height: var(--password-icon-size);
}

/*==================== 
* ボタン
* ====================*/
/* 新規作成 */
button[name=new], button[name=add], .btn-link.new {
	background-color: #A1C5F4;
	color: #000000;
}

/* 複製 */
button[name=copy] {
	background-color: #FFF1AB;
	color: #000000;
}

/* 削除、取消、停止 */
button[name=delete], button[name=cancel], button[name=suspend] {
	background-color: #EB5757;
}

/* 終了 */
button[name=end] {
	background-color: #FFA500;
	color: #000000;
}

/* チェック中 */
button[name=now-check] {
	background-color: #9F021E;
}

/* アコーディオンの全開・全閉、閉じる */
button.accordion, button.btn-none, button.close, button.icon {
	background-color: transparent;
	border: none;
	padding: 0;
}

/*==================== 
* 枠なしボタン(アイコン表示時等)
* ====================*/
.icon-btn {
	background-color: #FFFFFF;
	border: none;
}
.icon-btn:hover {
	border: none;
}

/*==================== 
* リンク風ボタン 
* ====================*/
.link-btn {
	margin-block: 0;
	padding-block: 0;
	border: none;
	background-color: #00000000;
	color: #1A0DAB;
	display: inline-block;
	text-align: left;
	font-weight: var(--font-weight);
	border-radius: 0;
	text-decoration: underline;
}
.link-btn:hover {
	color: #FF0000;
	opacity: 1;
	border: none;
	text-decoration: none;
}

/*==================== 
* トグルボタン 
* ====================*/
button.toggle {
	transition: background-color 1s ease;
}
button.toggle.active {
	background-color: #EB5757;
}

/*==================== 
* 戻るボタン 
* ====================*/
button.back-btn {
	background-color: #D3D3D3;
	color: #001E43;
}

/*==================== 
* グリッド関連
* ====================*/
/* コンテナ */
.grid-container {
	display: grid;
	grid-template-rows: auto;
	row-gap: 0.5rem;
}
/* サブグリッド(親gridの設定を引き継ぐ) */
.sub-grid {
	display: grid;
	grid-column: 1 / -1; /* 要素を画面幅いっぱいに設定 */
	grid-template-columns: subgrid;
}
/* 単体アイテムの中央寄せ（横） */
.grid-item-center {
	justify-self: center;
}
.d-contents {
	display: contents;
}

/*==================== 
* アコーディオン関連
* ====================*/
/* ヘッダエリア */
.list-menu-header {
	background-color: #F0F8FF;
	border: 1px solid #D3D3D3;
	cursor: pointer;
}
/* 開閉エリア */
.switching-target {
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease-out;
}
.switching-target.open {
	grid-template-rows: 1fr;
}
.switching-target-inner {
	overflow: hidden;
}
/* トグルのアイコン表示 */
.toggle-icon {
	position: relative;
}
.toggle-icon:after {
	content: '';
	display: block;
	position: absolute;
	top: 20%;
	right: -0.25rem;
	width: 10px;
	height: 10px;
	border: solid #000000;
	border-width: 2px 2px 0 0;
	transform: rotate(135deg); /* 時計回り */
	transition: .3s;
}
.toggle-icon.open:after {
	top: 35%;
	transform: rotate(-45deg); /* 半時計回り */
}

/*==================== 
* クリック行リスト
* ====================*/
/* カテゴリのヘッダ */
.list-category .list-title-area {
	background-color: #585656E7;
	position: sticky;
	top: var(--fixed-header);
	margin: 0;
}
.list-category h4 {
	text-align: left;
	color: #FFFFFF;
	margin: 0;
}

/* 行のタイトル設定 */
.list-row .title {
	border-bottom: 1px solid #000000;
}
/* カテゴリのヘッダと行のタイトル先頭にスペース追加 */
.list-category h4, .list-row .title {
	padding-left: 1rem;
}
.list-row .title:empty {
	padding-block: calc(var(--font-size) - 5px);
}

/*==================== 
* ヘッダー
* ====================*/
.title-header, .header img, .dialog-header {
	background-color: #C2E7F9;
}
.header img, .dialog-header img, .accordion img, dialog .dialog-close-header img {
	height: var(--menu-icon-size);
	width: var(--menu-icon-size);
}
/*==================== 
* フッター
* ====================*/
.footer {
	margin-bottom: 0;
	/* iPhoneのセーフエリア対応 */
	padding-bottom: var(--safeareainsetbottom);
}
.footer-icon > button, .footer-icon > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.footer-icon > button > img, .footer-icon > a > img {
	height: var(--menu-icon-size);
	width: var(--menu-icon-size);
}
.footer-icon > button {
	padding: 0;
	border: none;
	background-color: #FFFFFF;
	outline: none;
}
/* 固定フッター */
.app.fixed-footer .footer {
	position: fixed;
	bottom: 0;
	background-color: #FFFFFF;
}
.app.fixed-footer {
	margin-bottom: var(--fixed-footer-advertising);
}

/* 画面幅が最大767pxまでの場合 */
@media (max-width: 767px) {
	.footer-icon > button, .footer-icon > a {
		align-items: end;
	}
}