.fy-portal {
	max-width: 720px;
	margin: 1em auto;
	padding: 20px;
	border: 1px solid #f0ddc2;
	border-radius: 8px;
	background: #fdf8f2;
	font-size: 16px;
	line-height: 1.7;
}
.fy-portal *,
.fy-portal *::before,
.fy-portal *::after {
	box-sizing: border-box;
}

/* hidden属性が付いた要素は、他の display 指定に関わらず必ず非表示にする */
.fy-portal [hidden] {
	display: none !important;
}

/* 項目名は枠内のプレースホルダー等で分かるため、視覚的には非表示にしつつ
   スクリーンリーダー用には残しておく */
.fy-portal__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* テーマ(SWELL)側の見出しデザイン(アイコン用の余白・背景・枠線など)を
   打ち消して、余白を詰める。 */
.fy-portal__heading,
.fy-portal__subheading {
	min-height: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}
.fy-portal__heading::before,
.fy-portal__heading::after,
.fy-portal__subheading::before,
.fy-portal__subheading::after {
	content: none !important;
	display: none !important;
}
.fy-portal__heading {
	margin: 0 0 0.6em !important;
	font-size: 1.2em;
	font-weight: 700;
	color: #a85a1e;
}
.fy-portal__subheading {
	margin: 1em 0 0.4em !important;
	font-size: 1.05em;
	font-weight: 700;
	color: #a85a1e;
}

.fy-portal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.8em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid #f0ddc2;
}
.fy-portal__logout {
	color: #c06f28;
}

.fy-portal__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 0.8em;
	border-bottom: 2px solid #f0ddc2;
}
.fy-portal__tab {
	appearance: none;
	border: none;
	background: none;
	margin: 0 0 -2px;
	padding: 10px 14px;
	font-size: 0.95em;
	font-weight: 700;
	font-family: inherit;
	color: #a85a1e;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}
.fy-portal__tab:hover {
	color: #c1440e;
}
.fy-portal__tab.is-active {
	color: #c1440e;
	border-bottom-color: #e08a3e;
}

.fy-portal__login {
	max-width: 340px;
	margin: 0 auto;
}
.fy-portal__login .login-username input,
.fy-portal__login .login-password input {
	width: 100%;
	padding: 8px;
	margin-top: 4px;
	border: 1px solid #e8cda3;
	border-radius: 4px;
}
.fy-portal__login p {
	margin-bottom: 1em;
}
.fy-portal__login .login-submit input {
	appearance: none;
	border: none;
	border-radius: 6px;
	background: #e08a3e;
	color: #fff;
	font-weight: 700;
	padding: 10px 24px;
	cursor: pointer;
}

.fy-portal__denied {
	color: #c1440e;
	font-weight: 700;
}

.fy-portal__success {
	margin-bottom: 0.6em;
	padding: 8px 12px;
	background: #eef7e8;
	border: 1px solid #b7d9a3;
	border-radius: 6px;
	color: #3d6b26;
	font-weight: 700;
}

.fy-portal__copy-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.fy-portal__copy-note {
	margin-top: 6px;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 0.88em;
	font-weight: 700;
}
.fy-portal__copy-note--info {
	background: #fbe9d4;
	color: #a85a1e;
}
.fy-portal__copy-note--success {
	background: #eef7e8;
	border: 1px solid #b7d9a3;
	color: #3d6b26;
}

.fy-portal__section {
	margin-bottom: 1em;
	padding: 10px 16px 14px;
	background: #fff;
	border: 1px solid #f0ddc2;
	border-radius: 6px;
}

.fy-portal__picker {
	display: flex;
	gap: 10px;
	margin-bottom: 0.6em;
}
.fy-portal__picker select,
.fy-portal__picker-filter {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	box-sizing: border-box;
	padding: 4px 8px;
	border: 1px solid #e8cda3;
	border-radius: 4px;
}
.fy-portal__picker .fy-portal__btn {
	height: 34px;
	box-sizing: border-box;
	padding: 0 16px;
	display: flex;
	align-items: center;
}

.fy-portal__client-info {
	margin-bottom: 0.6em;
	padding: 10px 12px;
	background: #fbe9d4;
	border-radius: 6px;
	font-size: 0.92em;
}
.fy-portal__client-info p {
	margin: 2px 0;
}

.fy-portal__form {
	margin-top: 0.6em;
}

.fy-portal__label {
	display: block;
	margin-bottom: 10px;
	font-size: 0.9em;
	font-weight: 700;
	color: #444;
}
.fy-portal__label input,
.fy-portal__label textarea,
.fy-portal__label select {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 6px 8px;
	font-size: 1em;
	font-weight: 400;
	border: 1px solid #e8cda3;
	border-radius: 4px;
}

/*
 * 「ゴースト風」ラベル: 項目名を上の別行ではなく、枠内に薄いプレースホルダーとして表示する。
 * クリック(フォーカス)すると即座に薄くなって消え、値を入力すればそのまま見えなくなる。
 * ラベル自体はスクリーンリーダー用に残す(視覚的にのみ非表示)。
 */
.fy-portal__label--ghost .fy-portal__label-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}
.fy-portal__label--ghost input,
.fy-portal__label--ghost textarea {
	margin-top: 0;
}
.fy-portal__label--ghost input::placeholder,
.fy-portal__label--ghost textarea::placeholder {
	color: rgba(74, 45, 8, 0.4);
	opacity: 1;
	transition: opacity 0.12s ease;
}
.fy-portal__label--ghost input:focus::placeholder,
.fy-portal__label--ghost textarea:focus::placeholder {
	opacity: 0;
}

.fy-portal__row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.fy-portal__row .fy-portal__label {
	flex: 1 1 160px;
	min-width: 0;
}
.fy-portal__row .fy-portal__label--qty {
	flex: 0 1 100px;
}

.fy-portal__checkbox {
	display: block;
	margin-bottom: 12px;
	font-size: 0.9em;
	font-weight: 400;
}

.fy-portal__item-card {
	margin-bottom: 14px;
	padding: 14px;
	background: #fdf8f2;
	border: 1px solid #e8cda3;
	border-radius: 6px;
}
.fy-portal__item-card .fy-portal__row {
	margin-bottom: 0;
}
.fy-portal__item-card .fy-portal__label {
	margin-bottom: 10px;
}
.fy-portal__item-card .fy-manual-input {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 8px;
	border: 1px solid #e8cda3;
	border-radius: 4px;
}
.fy-portal__item-card .fy-portal-item-remove {
	margin-top: 4px;
}
.fy-portal__item-name {
	margin: 0 0 10px;
	font-weight: 700;
	color: #444;
}

/*
 * 発注書フォームの「卸業者」「納入場所」などの囲み(旧 fieldset/legend)。
 * テーマ側が fieldset/legend タグに独自スタイルを当てていて高さが揃わなかったため、
 * div/span で自作し、見出しは枠線に重ねた小さなラベルとして絶対配置で表示している。
 */
.fy-portal__fieldset,
.fy-portal__fieldset--compact {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* 卸業者・申込日・納入希望日・午前午後・時刻・納入場所で高さを揃えるための共通の最小高さ */
	min-height: 42px;
}
/* 卸業者・申込日・納入希望日・午前午後・時刻(1項目だけの枠)は、高さを完全に固定して揃える */
.fy-portal__fieldset--compact {
	height: 42px;
}

.fy-portal__fieldset {
	margin-bottom: 10px;
	padding: 6px 14px;
	border: 1px solid #e8cda3;
	border-radius: 4px;
}
.fy-portal__fieldset label {
	margin-right: 14px;
	white-space: nowrap;
}
/* 納入場所のようにラジオボタンが横並びになる囲みは、行方向に中央揃えする */
.fy-portal__fieldset:not(.fy-portal__fieldset--compact) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	row-gap: 6px;
}

.fy-portal__legend {
	position: absolute;
	top: -9px;
	left: 10px;
	padding: 0 6px;
	background: #fff;
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.2;
	color: #a85a1e;
	white-space: nowrap;
}

/*
 * プルダウン・日付など、枠内に薄い文字を重ねられない項目用のコンパクト表示。
 */
.fy-portal__fieldset--compact {
	margin-bottom: 10px;
	padding: 0 10px;
}
.fy-portal__fieldset--compact select,
.fy-portal__fieldset--compact input {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	/*
	 * date型・text型・selectはテーマ側の入力欄スタイルの影響でブラウザ既定の高さが
	 * それぞれ微妙に異なる(特にdate型が大きくなりがち)ため、!importantで高さを固定し、
	 * どの項目でも同じ見た目になるようにする。
	 */
	height: 26px !important;
	min-height: 0 !important;
	max-height: 26px !important;
	margin: 0 !important;
	padding: 2px !important;
	line-height: 1.2 !important;
	font-size: 1em !important;
	font-weight: 400 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
.fy-portal__fieldset--compact select:focus,
.fy-portal__fieldset--compact input:focus {
	outline: none;
}
/* 日付欄のカレンダーアイコンの余白が高さを押し広げないようにする */
.fy-portal__fieldset--compact input[type="date"]::-webkit-calendar-picker-indicator {
	padding: 1px;
	margin: 0;
}
.fy-portal__row .fy-portal__fieldset {
	flex: 1 1 160px;
	min-width: 0;
}

.fy-portal__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
	background: #fff;
	font-size: 0.92em;
}
.fy-portal__table th,
.fy-portal__table td {
	border: 1px solid #f0ddc2;
	padding: 8px;
	text-align: left;
}
.fy-portal__table thead th {
	background: #fbe9d4;
	color: #7a4210;
}
.fy-portal__table input {
	width: 100%;
	padding: 6px;
	border: 1px solid #e8cda3;
	border-radius: 4px;
}

.fy-portal__note {
	font-size: 0.85em;
	color: #888;
}

.fy-portal__btn {
	appearance: none;
	border: 1px solid #d97a56;
	border-radius: 6px;
	background: #fff;
	color: #c1440e;
	font-weight: 700;
	padding: 8px 16px;
	cursor: pointer;
}
.fy-portal__btn:hover {
	background: #c1440e;
	border-color: #c1440e;
	color: #fff;
}
.fy-portal__btn--primary {
	background: #e08a3e;
	border-color: #e08a3e;
	color: #fff;
	padding: 12px 24px;
	font-size: 1.05em;
}
.fy-portal__btn--primary:hover {
	background: #c06f28;
	border-color: #c06f28;
}

@media ( max-width: 480px ) {
	.fy-portal {
		padding: 16px;
	}
	.fy-portal__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	.fy-portal__tab {
		flex: none;
	}
	.fy-portal__picker {
		flex-direction: column;
	}
	.fy-portal__table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}