@charset "utf-8";
/* CSS Document */

/* main */
main {
	display: flex;
}

/* article */
article {
	flex: 1;
}

/* aside */
aside {
	width: 10em;
	height: 100%;
	margin: 1% 0 1% 1%;
	padding: 0.7em;
	border: 1px solid #666;
	text-align: left;
	position: sticky;
	top: 0.7%;
	background: #FFF;

	& h1 {
		font-size: 1.1em;
		margin-top: 0;
		float: none;

		&.ls {
			margin: 0.8em 0 0.1em;
		}
	}

	& h3 {
		margin-top: 10px;
	}

	label {
		display:block;
		width: 98%;
		height: 30px;
		margin: 10px 0;
		font-size: 1.2em;
	}
}

@media screen and (max-width:980px){
aside h1 {
	font-size: 25px;
       }
aside h3 {
	margin-bottom: 0.5em;
       }
}

/* img */
.img_c {
	margin-right: 0.5em;
	width: 120px;
	aspect-ratio: 3/5;
	object-fit: cover;
	object-position:50% 5%;
}

.img_cs {
	width: 400px;
}

@media screen and (min-width:1620px){
.img_c {
	width: 200px;
       }
}

@media screen and (max-width:980px){
.img_c {
	width: 100px;
       }
}

.img_logo {
	width: 100%;
	margin-bottom: 0.2em;
}

.b_card {
	height:400px;
}

/* table */
table.ab {
	width: 100%;
	font-syze: 13px;
	-webkit-text-size-adjust: 110%;

	& td:first-child {
		width: 8%;
		white-space: nowrap;
		font-weight: bolder;
	}

	& td:last-child {
		text-align:left;
	}
}

table.wo td {
	padding: 0.1rem 0.5rem;

	&:first-child {
		width: 8%;
		white-space: nowrap;
		border-width: 0 1px 0 0;
		border-color: #b0c4de;
		border-style: solid;
	}
}

/* その他 */
.n_card {
	aspect-ratio: 1.654/1;
	height: 18em;
	padding: 1em;
	border: 1px solid #b0c4de;
	border-radius: 0.5em;
	background: #FFF;
	filter: drop-shadow(0.1em 0.1em 0 #666);
	position: relative;
	display: flex;
	justify-content: flex-end;

	& img {
		position: absolute;
		top: 1em;
		left: 0;
		height: 90%;
	}
}


.n_cardt p {
	margin-block: 0.5em;
	text-align: justify;
}

.n_card a {
	font-size: 1.25em;

	& img {
	position: static;
	height: 2%;
	}
}
@media screen and (min-width:980px){
.n_cardt {
	position: absolute;
	padding: 1em 0.5em;
	left: 35%;
	height: 100%;
	}
}

@media screen and (max-width:980px){
.n_card {
	width: initial;
	height: initial;
	padding: 1em;
	position: relative;
	display: block;

		& p {
			text-align: center;
			margin-top: 0;
		}

		& img {
			width: 30%;
			position: initial;
			transform: initial;
			height: initial;
		}
	}

.n_cardt {
	text-align: center;
	}
}

.marsh img {
	width: 500px;
}

/* section */
.charalist {
	display: flex;
	flex-wrap: wrap;

	> div {
		width: 45%;
		margin: 0 2.5% 2%;
	}
}

@media screen and (max-width:980px){
.charalist div {
	width: 100%;
	margin-inline: 0;
       }
}