@charset "UTF-8";
@import url("reset.css");


/* ----------------------------------------
   カスタムプロパティ
---------------------------------------- */
:root {
	--font-size-70: clamp(2.5rem, 1.648rem + 3.64vw, 4.375rem);
	--font-size-52: clamp(2.938rem, 2.75rem + 0.8vw, 3.25rem);
	--font-size-45: clamp(2.375rem, 2.112rem + 1.12vw, 2.813rem);
	--font-size-3245: clamp(2rem, 1.631rem + 1.58vw, 2.813rem);
	--font-size-36: clamp(1.5rem, 1.05rem + 1.92vw, 2.25rem);
	--font-size-325: clamp(1.656rem, 1.431rem + 0.96vw, 2.031rem);
	--font-size-30: clamp(1.5rem, 1.275rem + 0.96vw, 1.875rem);
	--font-size-28: clamp(1.375rem, 1.15rem + 0.96vw, 1.75rem);
	--font-size-24: clamp(1.125rem, 0.9rem + 0.96vw, 1.5rem);
	--font-size-20: clamp(1rem, 0.85rem + 0.64vw, 1.25rem);
	--font-size-18: clamp(0.813rem, 0.625rem + 0.8vw, 1.125rem);
	--font-size-19: clamp(0.813rem, 0.588rem + 0.96vw, 1.188rem);
	--font-size-16: clamp(0.875rem, 0.6rem + 0.64vw, 1rem);
	--font-size-14: clamp(0.875rem, 0.575rem + 0.48vw, 0.875rem);
}
body {
	font-size: var(--font-size-16);
}

/* ----------------------------------------
   common
---------------------------------------- */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

.file_link a::before {
	font-family: 'Material Symbols Outlined';
	content: "description";
	color: #f00;
	font-size: var(--font-size-20);
}

/* passwd --------------------------------- */

form {
	text-align: center;
}
form p {
	padding: 12px 0;
}
input[type="password"] {
	border: 1px solid #3e3e3e;
	padding: 5px;
	border-radius: 8px;
	text-align: left;
}
input[type="submit"] {
	background-color: #3e3e3e;
	color: #fff;
	padding: 5px 8px;
	cursor: pointer;
}


/* flex --------------------------------- */
.flex_start {
	display: flex;
	justify-content: flex-start;
}
.flex_between {
	display: flex;
	justify-content: space-between;
}
.flex_around {
	display: flex;
	justify-content: space-around;
}


/* ----------------------------------------
   body
---------------------------------------- */

header {
	border-bottom: 2px solid #005ac8;
	padding: 16px 0 8px;
}
.header_inner {
	width: 95%;
	max-width: 1120px;
	margin-inline: auto;
}
main {
	padding: 48px 0 60px;
}
h1 {
	display: block;
	padding-bottom: 60px;
	font-size: var(--font-size-30);
	text-align: center;
	font-weight: bold;
	line-height: 1.4em;
}
.presentation_list {
	width: 95%;
	max-width: 1120px;
	margin-inline: auto;
	padding: 20px 32px;
	font-size: var(--font-size-20);
	background-color: rgb(0 90 200 / .1);
	border-radius: 18px;
	margin-bottom: 36px;
}
.presentation_list_top {
	display: flex;
	gap: 36px;
	color: #3e3e3e;
	font-weight: bold;
}
.presentation_file {
	padding-top: 16px;
	grid-column: span 2;
}
.file_list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--font-size-20);
}
.file_link {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.file_link a {
	display: flex;
	align-items: center;
	color: #3e3e3e;
	padding: 8px 12px;
	border: 1px solid #3e3e3e;
	border-radius: 12px;
}
.file_link a:hover {
	color: #f00;
}
footer {
	display: block;
	padding: 80px 0 12px;
	font-size: var(--font-size-14);
	text-align: center;
}



/* ----------------------------------------
   responsive
---------------------------------------- */

.sp {
	display: none!important;
}

@media screen and (max-width: 570px) {
	.sp {
		display: block!important;
	}
}