section.title {
	margin-top: 40px;
	padding: 0 7%;
	> div {
		max-width: 800px;
		margin: 0 auto;
		> h1 {
			margin: 0;
			font-size: 36px;
			line-height: 1.3em;
			color: #333;
			font-family: sans-serif;
			font-weight: 700;
			text-align: center;
		}
	}
}
section.event {
	padding: 60px 5% 80px 5%;
	> div {
		max-width: 800px;
		margin: 0 auto;
		> article {
			padding: 30px 0 50px 0;
			border-top: solid 4px #eee;
			> .title {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				column-gap: 20px;
				row-gap: 10px;
				> .text {
					> .date {
						font-size: 1.5rem;
						line-height: 1.3;
						color: #333;
					}
					> .subject {
						font-size: 2.2rem;
						line-height: 1.2;
						color: #333;
						font-weight: 700;
						margin: 10px 0 0 0;
					}
				}
				> .sdgs {
					display: flex;
					flex-wrap: wrap;
					> img {
						margin: 0 4px 4px 0;
					}
				}
			}
			> .body {
				margin-top: 10px;
				font-size: 1.5rem;
				line-height: 1.7;
				color: #333;
				.divnbsp {
					line-height: 65%;
				}
				a {
					text-decoration: underline;
					color: #333;
					&:hover {
						opacity: 0.7;
					}
				}
				img {
					max-width: 100%;
				}
			}
			> .attach {
				> a {
					margin-top: 20px;
					padding: 3px 5px;
					border: solid 1px #888;
					width: 180px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					text-decoration: none;
					&[href]:hover {
						opacity: 0.7;
					}
					> div:nth-of-type(1) {
						font-size: 1.5rem;
						line-height: 1;
						color: #333;
					}
					> div:nth-of-type(2) {
						font-size: 1.3rem;
						line-height: 1;
						color: #fff;
						background-color: #e12;
						padding: 2px 5px;
						border-radius: 3px;
					}
					> div:nth-of-type(3) {
						width: 16px;
						height: 16px;
						background-image: url(../../common/image/icon_external_888.svg);
						background-repeat: no-repeat;
						background-position: 0px -2px;
					}
				}
			}
			> .youtube {
				margin-top: 20px;
				max-width: 600px;
				> div {
					position: relative;
					width: 100%;
					padding-bottom: 56.5%;
					> iframe {
						position: absolute;
						width: 100%;
						height: 100%;
					}
				}
			}
			> .img {
				margin-top: 15px;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 10px;
				@media (max-width:449px) {
					grid-template-columns: 1fr;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}