main {
	padding-bottom: 100px;
	
	> h1, > section > * {
		padding-left: 15px;
		padding-right: 15px;
		@media screen and ( min-width: 390px ) {
			& {
				padding-left: calc( 50vw - 180px );
				padding-right:  calc( 50vw - 180px );
			}
		}
		@media screen and ( min-width: 400px ) {
			& {
				padding-left: 20px;
				padding-right: 20px;
			}
		}
		@media screen and ( min-width: 740px ) {
			& {
				padding-left: calc( 50vw - 350px );
				padding-right:  calc( 50vw - 350px );
			}
		}
		@media screen and ( min-width: 800px ) {
			& {
				padding-left: 50px;
				padding-right: 50px;
			}
		}
		@media screen and ( min-width: 1300px ) {
			& {
				padding-left: calc( 50vw - 600px );
				padding-right:  calc( 50vw - 600px );
			}
		}
	}
	
	> h1 {
		font-size: 1.6rem;
		background: #ccccdd;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	> section > h2 {
		font-size: 1.4rem;
		background: #eeeeee;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 30px;
		&::before {
			content: "【";
		}
		&::after {
			content: "】";
		}
	}
	
	> section {
		display: block;
		padding-bottom: 50px;
	}
	
	[role="summary"] {
		dl {
			display: flex;
			flex-wrap: wrap;
			> * {
				padding-bottom: 10px;
			}
			> dt {
				width: 5em;
				text-align: right;
				&::after {
					content: "：";
				}
			}
			> dd {
				width: calc( 100% - 5em );
			}
		}
	}
	
	[role="skill"] {
		table {
			width: 100%;
			th, td {
				padding: 5px 20px;
			}
			th {
				font-weight: bold;
			}
			thead th {
				background: #cbb1ff;
				word-break: keep-all;
				white-space: nowrap;
				text-align: center;
			}
			tbody {
				th {
					background: #d0d0ff;
				}
				td {
					background: #afe7af;
					ul {
						padding-left: 20px;
					}
					li {
						list-style: disc;
					}
				}
			}
		}
		@media screen and ( max-width: 740px ) {
			table, thead, tbody, tr, th, td {
				display: block;
			}
			thead {
				display: none;
			}
			th {
				text-align: center;
			}
			th,td {
				padding: 10px;
			}
		}
	}
	
	[role="work"] {
		table {
			width: 100%;
			th, td {
				padding: 5px 20px;
			}
			th {
				font-weight: bold;
			}
			thead th {
				background: #cbb1ff;
				word-break: keep-all;
				white-space: nowrap;
				text-align: center;
			}
			tbody {
				th {
					background: #d0d0ff;
				}
				td {
					background: #afe7af;
					&:nth-child(3) {
						word-break: keep-all;
						white-space: nowrap;
					}
					ul {
						padding-left: 20px;
					}
					li {
						list-style: disc;
					}
				}
			}
		}
		@media screen and ( max-width: 1000px ) {
			thead {
				display: none;
			}
			table, tbody {
				display: block;
			}
			tr {
				display: flex;
				flex-wrap: wrap;
			}
			th, td {
				display: block;
				border: #ffffff solid 1px;
				box-sizing: border-box;
				&::before {
					display: block;
					font-size: 0.75em;
					font-weight: normal;
					text-decoration: underline;
				}
				&:nth-child(1) {
					width: 100%;
					&::before {
						content: "会社名";
					}
				}
				&:nth-child(2) {
					width: 40%;
					&::before {
						content: "職務カテゴリ";
					}
				}
				&:nth-child(3) {
					width: 60%;
					&::before {
						content: "勤続年数";
					}
				}
				&:nth-child(4) {
					width: 40%;
					&::before {
						content: "顧客属性";
					}
				}
				&:nth-child(5) {
					width: 60%;
					&::before {
						content: "業務内容";
					}
				}
			}
		}
		@media screen and ( max-width: 740px ) {
			th,td {
				padding: 10px;
				&:nth-child(n) {
					width: 100%;
				}
			}
		}
	}
	
	[role="edu"] {
		li {
			margin-left: 40px;
			padding-bottom: 5px;
			list-style: disc;
			span {
				font-size: 0.88em;
			}
		}
	}
	
	[role="persona"] {
		li {
			padding: 10px 20px;
			border-style: dashed;
			border-color: transparent transparent #cccccc;
			border-width: 0 0 1px;
			&:first-child {
				border-top-color: #cccccc;
				border-top-width: 1px;
			}
		}
		h3 {
			margin-top: 30px;
			font-size: 1.2rem;
			text-decoration: underline;
			font-weight: bold;
		}
	}
}

aside {
	p {
		font-size: 0.75rem;
		text-align: right;
	}
}