@charset "utf-8";
/* ==========================================================================
   添付ファイル UI / エラーまとめ
   input.html・confirm.html で読み込む。

   【重要】このファイルは css.css / contact2.css より「後」に読み込むこと。
   既存の form.css には
     .form_1 button { width: 100%; padding: 10px; margin: 10px auto; ... }
   のように要素そのものを対象にしたルールがあり、
   同じ詳細度だと後から読み込まれた側が勝つため。

   競合しやすい箇所は `.attach` を前置して詳細度を上げてある。
   `!important` は [hidden] の1か所を除いて使わず、詳細度で解決している。
   ========================================================================== */

/* --------------------------------------------------------------------------
   エラーまとめ（入力エラー時にフォーム上部に表示）
   -------------------------------------------------------------------------- */
.formErrorBox {
	margin: 0 0 20px;
	padding: 15px 20px;
	border: 2px solid #d0121b;
	border-radius: 4px;
	background: #fff5f5;
}

.formErrorBox .formErrorBox__title {
	margin: 0 0 8px;
	color: #d0121b;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
}

.formErrorBox .formErrorBox__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.formErrorBox .formErrorBox__list li {
	position: relative;
	margin: 0;
	padding: 2px 0 2px 16px;
	background: none;
	color: #333;
	font-size: 14px;
	line-height: 1.6;
	list-style: none;
	text-indent: 0;
}

.formErrorBox .formErrorBox__list li::before {
	position: absolute;
	top: 2px;
	left: 0;
	color: #d0121b;
	content: "・";
}

/* --------------------------------------------------------------------------
   添付ファイル（入力画面）共通
   -------------------------------------------------------------------------- */
.attach {
	font-size: 14px;
	line-height: 1.6;
}

/* 既存 CSS の display 指定に負けないようにしておく */
.attach [hidden] {
	display: none !important;
}

/* ul / li の見た目を素の状態に戻す
   （css.css 側でリストマーカーや背景画像が付いている場合の保険） */
.attach ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.attach li {
	margin: 0;
	padding: 0;
	background: none;
	list-style: none;
	text-indent: 0;
}

/* --------------------------------------------------------------------------
   「ファイルを選択」ボタン
   -------------------------------------------------------------------------- */
.attach .attach__button {
	display: inline-block;
	position: relative;
	margin: 0 0 10px;
	overflow: hidden;
	cursor: pointer;
}

/* form.css の input 系ルールに巻き込まれないよう明示的に指定 */
.attach input.attach__buttonInput {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	opacity: 0;
	cursor: pointer;
}

.attach .attach__buttonLabel {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid #0b3d91;
	border-radius: 4px;
	background: #fff;
	color: #0b3d91;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}

.attach .attach__button:hover .attach__buttonLabel {
	background: #0b3d91;
	color: #fff;
}

.attach input.attach__buttonInput:focus-visible + .attach__buttonLabel {
	outline: 2px solid #0b3d91;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   選択中のファイル一覧
   -------------------------------------------------------------------------- */
.attach .attach__list {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.attach .attach__listItem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 6px;
	padding: 10px 12px;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	background: #fafafa;
}

/* min-width: 0 が無いと flex アイテムが縮まず、
   長いファイル名が1文字ずつ折り返して異常に縦長になる */
.attach .attach__listName {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-all;
	overflow-wrap: break-word;
}

.attach .attach__listSize {
	color: #777;
	font-size: 13px;
	white-space: nowrap;
}

/* form.css の `.form_1 button { width: 100%; margin: 10px auto; ... }`（詳細度 0,1,1）を
   0,2,1 で打ち消す。
   width が 100% のままだとファイル名の領域が押し潰される */
.attach button.attach__listRemove {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid #b5b5b5;
	border-radius: 4px;
	background: #fff;
	color: #555;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.attach button.attach__listRemove:hover {
	border-color: #d0121b;
	color: #d0121b;
}

/* --------------------------------------------------------------------------
   確認画面から戻ってきたときの添付済みファイル
   -------------------------------------------------------------------------- */
.attach .attach__kept {
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.attach .attach__keptItem {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 6px;
	padding: 10px 12px;
	border: 1px solid #cfe0f5;
	border-radius: 4px;
	background: #f2f7fd;
}

.attach .attach__keptName {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-all;
	overflow-wrap: break-word;
}

.attach .attach__keptRemove {
	flex: 0 0 auto;
	margin: 0;
	color: #555;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}

.attach .attach__keptRemove input[type="checkbox"] {
	width: auto;
	margin: 0 4px 0 0;
	padding: 0;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   注意書き・エラー
   -------------------------------------------------------------------------- */
.attach .attach__keptNote,
.attach .attach__note {
	margin: 6px 0 0;
	color: #777;
	font-size: 13px;
	line-height: 1.7;
}

.attach .attach__error {
	margin: 0 0 10px;
	color: #d0121b;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   JavaScript 無効時に表示される素の input
   -------------------------------------------------------------------------- */
.attach .attach__slot {
	margin: 0 0 8px;
}

.attach .attach__slot input[type="file"] {
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	font-size: 14px;
}

/* JavaScript が使える場合は input を画面から隠す
   （display: none でも disabled でなければファイルは送信される） */
.attach--enhanced .attach__slots {
	display: none;
}

/* --------------------------------------------------------------------------
   添付ファイル（確認画面）
   -------------------------------------------------------------------------- */
.attachConfirm {
	margin: 0;
	padding: 0;
	list-style: none;
}

.attachConfirm .attachConfirm__item {
	margin: 0;
	padding: 0;
	background: none;
	list-style: none;
	text-indent: 0;
}

.attachConfirm .attachConfirm__item + .attachConfirm__item {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dotted #ccc;
}

.attachConfirm .attachConfirm__name {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.6;
	word-break: break-all;
}

.attachConfirm .attachConfirm__size {
	color: #777;
	font-size: 13px;
}

.attachConfirm .attachThumb {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 0 6px;
	border: 1px solid #dcdcdc;
}

.attachConfirm .attachConfirm__link {
	margin: 0;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   SP
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	.attach .attach__buttonLabel {
		display: block;
		width: 100%;
	}

	.attach .attach__listItem {
		flex-wrap: wrap;
	}

	.attach .attach__listName {
		flex: 1 1 100%;
		width: 100%;
	}

	.attach button.attach__listRemove {
		margin-left: auto;
	}
}