/*------------------------------------------------------------------------------*/
/* 全画面共通スタイルシート                                                            */
/*------------------------------------------------------------------------------*/
body {
	background-color: #ffffff;
	margin: 0;
	font-family: 'Noto Sans', sans-serif;
	overflow-x: hidden;
}

button, input{
	font-family: 'Noto Sans', sans-serif;
}

/* ヘッダー部分：濃い青 */
.header-top {
	background-color: #0070c0;
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
}

/* バージョン表示部分：薄い青 */
.header-bottom {
	background-color: #9dc3e6;
	color: #333;
	padding: 4px 5px;
	text-align: right;
	font-size: 12px;
	font-weight: bold;
}

h1 {
	font-size: 30px;
	margin-bottom: 1rem;
	color: #000;
}

/************* エラーメッセージ*************/
.error-message-area {
	min-height: 1em;			/* メッセージが空でも確保したい領域 */
	display: block;				/* メッセージが空でも確保したい領域 */
	color: #dc3545;			/* Bootstrapの .text-danger 相当 */
	text-align: center;			/* Bootstrapの .text-center 相当 */
	word-break: normal;			/* Bootstrapの .text-break 相当 */
	padding-left: 0.25rem;		/* Bootstrapの .px-1 相当 */
	padding-right: 0.25rem;		/* Bootstrapの .px-1 相当 */
}

/************* ボタン共通 *************/
/* エリア全体の調整 */
.button-container {
	display: flex;
	justify-content: center;
	gap: 50px;						/* ボタン同士の間隔 */
	margin-top: 3rem;
}

/* ボタンデザイン */
.button-container button {
	display: inline-block;
	padding: 8px 40px;				/* 上下左右の余白 */
	background-color: #0070c0;
	color: #ffffff;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	
	/* 角丸とグレーの外枠 */
	border: 3px solid #7f7f7f;	/* グレーの太めのボーダー */
	border-radius: 12px;			/* 角の丸み */
	cursor: pointer;
	transition: background-color 0.2s;
}

/* スマホ用： 指で触れている間や、クリックした瞬間の反応 */
.button-container button:active {
	background-color: #005a9e;	/* 色を濃くする */
	transform: scale(0.96);			/* ほんの少し小さくして「押し込み感」を出す */
}

/* PC用： マウスを乗せた時の反応 */
.button-container button:hover {
    background-color: #005a9e;   /* 少し暗くして「押せる感」を出す */
    color: #ffffff;
}

/************* テキストボックス共通 *************/
/* すべてのプレースホルダーを薄くする */
::placeholder {
	opacity: 0.5 !important;
}

/* エラー時に枠線を赤くする */
.is-invalid {
    border: 2px solid #dc3545 !important;		/* 赤い枠線 */
    background-color: #fff8f8;				/* 薄い赤の背景 */
}

/************* ラベル共通 *************/
/* 必須項目のラベルに赤色の * を付ける */
label.required::after {
	content: " *";
	color: #dc3545; /* エラーと同じ赤色 */
	margin-left: 4px;
}