@charset "UTF-8";

/* --------------------------- */
/* -------- signup.jsp -------- */
/* --------------------------- */
.signup-nav {
	border: 1px solid green;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 28px 0;
	text-align: center;
	font-size: 16px;
}

/* フォーム全体 */
#signup-form {
	width: 100%;
}

.logins {
	display: block;
	position: relative;
	margin-bottom: 7px;
	padding-left: 12px;
	font-size: 15px;
}

.logins::before {
	content: "";
	width: 6px;
	height: 28px;
	background-color: green;
	position: absolute;
	left: 0;
	top: 0;
}

.logins-bottom {
	margin-bottom: 16px;
}

/* 注意事項 */
.input-note {
	display: block;
	margin-top: 3px;
	margin-bottom: 5px;
	font-size: 11px;
	color: #333;
}

/* 入力欄 */
.signup-input {
	width: 100%;
	margin: 1px 0 20px 0;
	box-sizing: border-box;
	border-radius: 8px;
	border: 1px solid green;
	padding: 6px 10px;
	font-size: 14px;
	background-color: #ffffff;
}

/* 入力中 */
.signup-input:focus {
	outline: none;
	border: 2px solid green;
}

/* ボタンエリア */
.form-buttons {
	display: flex;
	justify-content: right;
	gap: 28px;
}

/* 会員登録画面-ボタンたち */
.reset-button, .signup-button {
	width: 144px;
	height: 40px;
	border-radius: 6px;
	cursor: pointer;
	background-color: green;
	color: white;
	border: 1px solid green;
	font-weight: 450;
	font-size: 14px;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.35);
	transition: 0.2s;
}

.reset-button:hover, .signup-button:hover {
	background-color: #ffffff;
	color: green;
	border-color: green;
}

/* 新規登録・ログインリンク */
.acount-msg {
	text-decoration: none;
	font-size: 12px;
	display: block;
	text-align: right;
	color: blue;
	margin: 24px 0 0 8px;
}

.acount-msg:visited {
	color: blue;
	text-decoration: none;
}

.acount-msg:hover {
	text-decoration: none;
	color: #1d6fb8;
	text-shadow: #333;
}

/*言語切り替えボタン*/
.lang-switch {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/*padding: 10px 20px;*/
	font-weight: bold;
	gap: 8px;
	color: #ccc;
}

/* リンク（JP/EN）の共通デザイン */
.lang-switch a {
	text-decoration: none;
	color: #666;
	padding: 4px 8px;
	border-radius: 4px;
	transition: all 0.3s ease;
}

.lang-switch a:hover {
	background-color: #f0f0f0;
	color: #333;
}

/* --------------------------- */
/* -------- login.jsp -------- */
/* --------------------------- */

/* フォーム全体 */
#login-form {
	width: 100%;
}

#login-label-top {
	margin-top: 101px;
}

/* 入力欄 */
.login-input {
	width: 100%;
	margin: 12px 0 20px 0;
	box-sizing: border-box;
	border-radius: 8px;
	border: 1px solid green;
	padding: 6px 10px;
	font-size: 14px;
	background-color: #ffffff;
}

/* 入力中 */
.login-input:focus {
	outline: none;
	border: 2px solid green;
}

/* ログインボタン */
.login-button {
	width: 100%;
	height: 48px;
	border-radius: 6px;
	cursor: pointer;
	background-color: green;
	color: white;
	border: 1px solid green;
	font-weight: 450;
	font-size: 107%;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.35);
	transition: 0.2s;
}

.login-button:hover {
	background-color: #ffffff;
	color: green;
	border-color: green;
}
/* エラーメッセージ */
.error-message {
	height: 18px;
	margin: 12px 0 12px 0;
	color: red;
	text-align: center;
	font-size: 13px;
	line-height: 18px;
	background-color: #ffffff;
}
/* ---------------------------- */
/* -------- mypage.jsp -------- */
/* ---------------------------- */

/* マイページ全体 */
.mypage {
	padding: 8px 12px 90px;
}

/* 各機能エリア */
.mypage section {
	border-bottom: 1px solid #008040;
	padding-bottom: 12px;
	margin-bottom: 12px;
}

.mypage section:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* 共通見出し */
.profile, .multilingual, .alert, .logout {
	font-weight: 600;
}

/* 共通ボタン */
.profile-edit input[type="submit"], .alert-setting input[type="submit"],
	.logout-user input[type="submit"] {
	height: 40px;
	background-color: green;
	color: white;
	border: 1px solid green;
	border-radius: 10px;
	padding: 0 14px;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	outline: none;
	cursor: pointer;
	transition: 0.2s;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.35);
}

.profile-edit input[type="submit"]:hover, .alert-setting input[type="submit"]:hover,
	.logout-user input[type="submit"]:hover {
	background-color: #ffffff;
	color: green;
	border-color: green;
}

.alert-setting input[type="submit"], .logout-user input[type="submit"] {
	width: 90px;
}

/* ログアウトボタンの文字中央揃え調整 */
.logout-user input[type="submit"] {
	padding: 0;
}

/* プロフィール */
.profile-edit {
	background-color: #fff;
	border: 1px solid #008080;
	border-radius: 12px;
	padding: 14px 16px 12px;
	margin: 0 23px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.user-id, .nickname {
	width: 250px;
	margin: 14px auto 6px;
	font-weight: 450;
	text-align: left;
}

.user-id div, .nickname div {
	width: 100%;
	margin: 4px 0 0;
	padding: 8px 12px;
	border: 1px solid #008080;
	border-radius: 8px;
	background-color: #fafafa;
	text-align: center;
	box-sizing: border-box;
}

.profile-edit form {
	width: fit-content;
	margin: 6px 8px 4px auto;
}

/* 編集ボタン */
.profile-edit input[type="submit"] {
	min-width: 68px;
	height: 34px;
	line-height: 34px;
	padding: 0 12px;
}

/* 多言語機能 */
.multilingual-feature {
	margin: 0 23px;
}

.multilingual-feature form {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
}

.pull-input {
	width: 126px;
	height: 30px;
	padding: 2px 8px;
	border: 1px solid #777;
	border-radius: 2px;
	background-color: #ffffff;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
}

.pull-input:hover {
	border-color: green;
}

.pull-input:focus {
	outline: none;
	border: 1px solid green;
}

/* アラート機能 */
.alert-setting {
	margin: 0 23px;
}

.alert-form {
	width: 100%;
}

.alert-row {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	margin-top: 8px;
}

.alert-item {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	font-size: 14px;
}

.alert-label {
	width: 72px;
	font-weight: 500;
}

.alert-unit {
	font-size: 14px;
}

.alert-setting input[type="text"], .alert-setting input[type="number"] {
	width: 150px;
	height: 32px;
	box-sizing: border-box;
	padding: 4px 8px;
	border: 1px solid #008080;
	border-radius: 5px;
	font-size: 14px;
	background-color: #ffffff;
}

.alert-setting input[type="text"]:focus, .alert-setting input[type="number"]:focus
	{
	outline: none;
	border: 2px solid #008080;
}

.alert-button-area {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

/* ログアウト */
.logout-user {
	margin: 0 23px;
}

.logout-user form {
	width: fit-content;
	margin-left: auto;
}

/* --------------------------------- */
/* -------- mypage_edit.jsp -------- */
/* --------------------------------- */
.success-message {
	color: green;
	height: 16px;
	margin: 12px 0 12px 0;
	text-align: center;
	font-size: 13px;
	line-height: 18px;
	background-color: #ffffff;
}

.alert-success-message, .alert-error-message {
	height: 14px;
	margin: 4px 0 4px 0;
	text-align: center;
	font-size: 13px;
	line-height: 18px;
	background-color: #ffffff;
}

.alert-success-message {
	color: #008040;
}

.alert-error-message {
	color: red;
}

/* 中身が空のときは非表示 */
.alert-success-message:empty, .alert-error-message:empty {
	display: none;
}

.edit-button {
	width: 95px;
	height: 40px;
	border-radius: 6px;
	cursor: pointer;
	background-color: green;
	color: white;
	border: 1px solid green;
	font-weight: 450;
	font-size: 14px;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.35);
	transition: 0.2s;
}

.edit-button:hover {
	background-color: #ffffff;
	color: green;
	border-color: green;
}

.progfile-edit-nav {
	text-align: left;
	font-weight: bold;
	margin: 8px auto;
}

.profile_edit_area {
	width: 340px;
	margin: 10px auto;
	background-color: white;
	border: 1px solid green;
	padding: 12px;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.35);
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.profile-edit-form {
	width: 230px;
	margin: 10px auto;
}

.edit-input {
	width: 100%;
	margin: 1px 0 20px 0;
	box-sizing: border-box;
	border-radius: 8px;
	border: 1px solid green;
	padding: 6px 10px;
	font-size: 14px;
	background-color: #ffffff;
}

.edit-input:focus {
	outline: none;
	border: 1px solid green;
}

.form-buttons {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 35px;
	margin-top: 4px;
}