@charset "utf-8";
/* -------------------- reset -------------------- */
html{font-size:62.5%;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; font-weight: 500; font-feature-settings:"palt"; letter-spacing:0.075em; }
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration: none; }
a img { transition: .2s; }
a:hover, a:hover * { text-decoration: none; transition: .3s; }
/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none; }
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000;  font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #525c53; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
input, textarea, select { border: 1px solid #e6e6e6; border-radius: 5px; padding:0 2%; width:96%; }
select { max-width: 200px; }
img { max-width: 100%; line-height: 1; }
@-moz-document url-prefix(){ 
	*, ::after, ::before { box-sizing: border-box;}
	table { width: 100%; }
}
@media all and (-ms-high-contrast: none) { 
	*, ::after, ::before { box-sizing: border-box;}
	table { width: 100%; }
	#sidebar ul{ display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
	.form-control{
		display: block;
		width: 100%;
		height: calc(1.5em + .75rem + 2px);
		padding: .375rem .75rem;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: #495057;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		border-radius: .25rem;
		transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	}
}


body {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	color:#333;
	background-color: #edf2f7;
	margin: 0;
	padding: 0 0 20px 0;
}
.container {
	margin: 0 auto;
	padding: 20px;
}
.headline{
	font-size:20px;
	font-weight:600;
}
.button{
	display: grid;
	place-content: center;
	width:240px;
	height:50px;
	border-radius:25px;
}


.main-content {
	background-color: #ffffff;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
}
.section-title {
	font-size: 24px;
	margin-bottom: 20px;
}
.buttons-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.button-item {
	flex: 1;
	min-width: 200px;
	background-color: #f0f0f0;
	padding: 20px;
	text-align: center;
	border-radius: 8px;
	transition: background-color 0.3s;
}
.button-item:hover {
	background-color: #e0e0e0;
}
.button-item figure {
	margin: 0;
	padding: 0;
}
.button-item figcaption {
	margin-top: 10px;
	font-size: 16px;
}


/* temp */
.styledForm .deleteButton {
	display: block;
	margin:38px auto;
	width: 320px;
	padding: 16px;
	background-color: #E74C3C;
	color: #fff;
	border: none;
	border-radius: 25px;
	cursor: pointer;
	font-size: 16px;
	text-align:center;
}

.styledForm .deleteButton:hover {
	background-color: #C0392B;
}

/* tooltip */

body .ui-tooltip {
	display: block;
	box-shadow: none;
	background-color: #cc0000;
	padding: 10px;
	border-radius: 4px;
	max-width: 400px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}