@charset "utf-8";

:root {

}

/* モバイル　ALL */
@media screen and (max-width: 425px) {
	:root {
	}
}

/* タブレット */
@media screen and (min-width:426px) and (max-width: 768px) {
	:root {
	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {
	}
}

/* ノートパソコン L */
@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {
	}
}

/* 2K以上 */
@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {
	}
}

/* 4K以上 */
@media screen and (min-width:2561px) {
	:root {
	}
}








/*
 * ログイン
 */


section#login {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: var(--Margin);
	width: var(--Width);
	padding: var(--Padding);

	& .error {
		color: var(--Color_FF080);
	}

	& form {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc( 1 * var(--BaseSize) );
		margin: auto;
		padding: var(--Padding);
		width: var(--Sake_Article_SectionLogin_Form_width);
		background: var(--Color_FF);
		border: var(--Border);
		border-radius: var(--Border-radius_S);
		& div {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: calc( 1 * var(--BaseSize) );
			width: 100%;
			& label {
				flex-basis: calc( 5 * var(--BaseSize) );
				color: var(--Color_1D080);
				font-size: var(--BaseSize);
			}
			& select {
				flex: 1;
				appearance: none;
				padding: calc( 0.5 * var(--BaseSize) );
				width: 50%;
				font-size: calc( 1 * var(--BaseSize) );
				background: var(--Color_FF100);
				border: var(--Border);
				border-radius: var(--Border-radius_S);
				cursor: pointer;
			}
			& input {
				flex: 1;
				background: none;
				border: none;
				outline: none;
				padding: calc( 0.5 * var(--BaseSize) );
				width: 50%;
				font-size: calc( 1 * var(--BaseSize) );
				appearance: none;
				background: var(--Color_FF100);
				border: var(--Border);
				border-radius: var(--Border-radius_S);
				cursor: pointer;
			}
		}
		& button {
			background: none;
			border: none;
			border-radius: 0;
			outline: none;
			padding: 0;
			margin: 0;
			font: inherit;
			color: inherit;
			cursor: pointer;
			appearance: none;

			display: inline-block;
			width: 80px;
			height: 80px;
			text-decoration: none;
			color: rgba(152, 152, 152, 0.43);/*アイコン色*/
			line-height: 80px;
			font-size: 40px;
			text-align: center;
			overflow: hidden;
			font-weight: bold;
			text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
			background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
			border-radius: var(--Border-radius_L);
			box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
			border-bottom: solid 2px #b5b5b5;
			& i {
				line-height: 80px;
			}

		}
		& button:active {
			/*押したとき*/
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
			border-bottom: none;
		}
	}
}