@charset "UTF-8";

/* ===================================
	File Name   : about.css
	Description : ABOUT Page's Layout CSS
	Editor      : Bface Nakamura
	Last Editor : Bface Nakamura
	
	Update Description :
	[2026/10/20] 新規作成
====================================== */

/*========== Style Contents ==========

	 1. Share Elements
   2. Section [about_intro]
	 3. Section [about_outline] 
	 4. Section [about_committee]
	 5. Section [about_target]
	 6. Section [about_achievements]
	 7. Section [about_interview]
	 8. Section [about_scene]
====================================== */



/*===== 1. Share Elements =====*/



/*===== 2. Section [about_intro] =====*/
#about_intro {
	&>div {
		background: var(--accentCl);
		padding: 1rem;

		&>h3 {
			margin-bottom: 1rem;
			font-size: 2rem;
			text-align: center;
		}

		&>div {
			background: var(--baseC);
			padding: 1rem 1.5rem;

			p:not(:first-child) {
				margin-top: 1rem;
			}
		}
	}

	@media (max-width: 768px) {
		&>div {
			&>h3 {
				font-size: 1.6rem;
			}
			&>div {
			padding: 1rem;
		}
		}
	}
}



/*===== 3. Section [about_outline] =====*/
#about_outline {
	dl {
		display: flex;
		align-items: center;
		position: relative;
		border: 0.1rem solid var(--MGC);

		&:not(:last-of-type) {
			border-bottom: none;
		}
	}

	dt {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		position: relative;
		min-width: 25rem;
		padding: 1rem 2rem;
		border: 0.1rem solid var(--LGC);
		background: var(--LGC);
		font-weight: bold;
		font-size: 1.6rem;
		text-align: center;
	}

	dd {
		width: 100%;
		padding: 1rem 2rem;

		b {
			padding-left: 1rem;
			font-size: 1.4rem;
		}
	}

	@media (max-width: 768px) {
		dl {
			flex-direction: column;
			padding-bottom: 1rem;
		}

		dt {
			margin-bottom: 1rem;
			padding: .5rem;
			font-size: 1.4rem;
			line-height: 1;
		}

		dd {
			margin: 0 1rem;
			padding: 0;
			font-size: 1.4rem;
			text-align: center;

		}
	}
}



/*===== 4. Section [about_committee] =====*/
#about_committee {
	p {
		text-align: center;

		&.notice {
			margin-top: .5rem;
			text-align: right;
		}
	}

	ul {
		margin-top: 1rem;
		border: 1rem solid var(--LGC);

		li {
			display: grid;
			grid-template-columns: 8rem 12rem 1fr;
			align-items: center;
			min-height: 4.5rem;
			padding: 1rem 3rem;

			&:nth-child(even) {
				background: var(--LGC);
			}

			em {
				grid-column: 1;
				grid-row: 1;
				margin-right: 2rem;
				font-weight: bold;
				font-size: 1.4rem;
				text-align: center;
			}

			b {
				grid-column: 2;
				grid-row: 1;
				margin-right: 2rem;
				font-weight: bold;
			}

			span {
				grid-column: 3;
				grid-row: 1;
			}
		}
	}
	@media (max-width: 768px) {
		p {
			text-align: left;
		}

		ul {
			font-size: 1.4rem;

			li {
				grid-template-columns: 5rem 9rem 1fr;
				padding: 1rem .5rem;
				em {
					margin-right: .5rem;
					font-size: 1.2rem;
				}
				b {
					margin-right: 1rem;
				}
				span {
					margin-right: 1rem;
				}
			}
		}
	}
}



/*===== 5. Section [about_target] =====*/
#about_target {
	&>ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;

		&>li {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 3;
			row-gap: 0;
			position: relative;

			&>h3 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				margin-bottom: 1rem;
				padding: 1rem;
				background: var(--accentC);
				color: var(--baseC);
				font-size: 2rem;
				text-align: center;
			}

			&>p {
				color: var(--accentC);
				font-weight: 700;
				font-size: 2rem;
				text-align: center;
			}
		}
	}
	> p.notice {
		margin-top: 1rem;
		text-align: right;
	}

	&>a {
		max-width: 60rem;
		margin: 2rem auto 0;
	}

	@media (max-width: 768px) {
		&>ul {
			grid-template-columns: 1fr;
			gap: 1.5rem;

			&>li {
				&>h3 {
					padding: .5rem;
					font-size: 1.6rem;
				}

				&>p {
					font-weight: 700;
					font-size: 1.4rem;
				}
			}
		}
		> p.notice { text-align: left;}
	}
}



/*===== 6. Section [about_achievements] =====*/
#about_achievements {
	max-width: 108rem;
	background-color: var(--LGC);
	padding: 3rem 2rem;
	& > div {
		display: flex;
		justify-content: center;
		gap: 5rem;
		padding: 3rem 0;
		& > div {
			display: flex;
			align-items: center;
			gap: 4rem;
			&:first-of-type {
				padding-right: 5rem;
				border-right: 0.1rem solid var(--GC);
			}
			& > figure {
				width: 8rem;
				height: 8rem;
				& img {
					height: 100%;
				}
			}
			& > div {
				& > span {
					display: block;
					font-size: 2.4rem;
				}
				& > em {
					display: block;
					font-weight: bold;
					font-size: 6rem;
					font-family: 'Open Sans', sans-serif;
					& > span {
						margin-left: .5rem;
						font-size: 3rem;
						font-family: 'Noto Sans JP', sans-serif;
					}
				}
				& > em + em {
					font-size: 4rem;
					& > span {
						font-size: 2.4rem;
					}
				}
			}
		}
	}
	& > a {
		max-width: 60rem;
		margin: 2rem auto 0;
	}
	@media (max-width: 768px) {
		padding: 2rem 1rem;

		&>div {
			flex-direction: column;
			gap: 2rem;
			padding: 1rem 0 0;

			&>div {
				justify-content: center;

				&:first-of-type {
					padding-right: 0;
					padding-bottom: 2rem;
					border-right: initial;
					border-bottom: 0.1rem solid var(--GC);
				}

				&>figure {
					width: 5rem;
					height: 5rem;
				}

				&>div {
					&>span {
						font-size: 1.8rem;
					}

					&>em {
						font-size: 3.6rem;
						line-height: 1.2;

						&>span {
							font-size: 1.8rem;
						}
					}

					&>em+em {
						font-size: 2.8rem;

						&>span {
							font-size: 1.6rem;
						}
					}
				}
			}
		}
	}
}



/*===== 7. Section [about_interview] =====*/
#about_interview {
	&>div {
		margin-top: 4rem;

		&:first-of-type {
			margin-top: 0;
		}

		&.is_open {
			& .qa_more {
				display: flex;
				flex-direction: column;
				gap: .5rem;
				max-height: 400rem;
			}

			& .read_more_row::before {
				display: none;
			}

			& .read_more_btn {
				& .arrow {
					transform: rotate(180deg);
				}

				& .label_open {
					display: none;
				}

				& .label_close {
					display: inline;
				}
			}
		}
	}

	& h3 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-bottom: 1rem;
		padding: 1rem;
		background: var(--accentC);
		color: var(--baseC);
		font-size: 2rem;
		text-align: center;
	}

	& figure {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
		margin: 0 0 2.5rem;

		& img {
			width: 100%;
			height: auto;
			display: block;
		}
	}

	& .qa {
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}

	& .qa_row {
		display: flex;
		gap: 1.5rem;
		align-items: flex-start;

		&>span {
			flex: none;
			width: 5rem;
			font-size: 1.4rem;
			font-weight: 700;
			padding: 1rem 0 0;
		}

		& p {
			margin: 0;
			font-size: 1.6rem;
			flex: 1;
		}

		&.q {
			& p {
				background: var(--LGC);
				padding: 1rem 1.5rem;
			}
		}

		&.a {
			margin-bottom: 1rem;

			& span {
				color: var(--accentC);
			}

			& p {
				padding: .5rem 1.5rem;
			}
		}
	}

	& .qa_preview {
		margin-bottom: 0.5rem;

		& .qa_row.a p {
			height: 5rem;
			overflow: hidden;
		}
	}

	& .qa_more {
		display: none;
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.35s ease;
	}

	& .read_more_row {
		margin-top: .5rem;
		width: 100%;
		text-align: center;
		position: relative;

		&::before {
			content: "";
			display: block;
			width: 100%;
			height: 4rem;
			margin-top: -5.5rem;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--baseC));
			pointer-events: none;
		}
	}

	& .read_more_btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: var(--baseC);
		color: var(--accentC);
		border: 0.1rem solid var(--accentC);
		font-size: 1.4rem;
		font-weight: 700;
		padding: 0.8rem 2rem;
		border-radius: 99.9rem;
		cursor: pointer;
		font-family: inherit;
		transition: background 0.2s ease, color 0.2s ease;

		&:hover {
			background: var(--accentC);
			color: var(--baseC);
		}

		& .arrow {
			display: inline-block;
			transition: transform 0.25s ease;
		}

		& .label_close {
			display: none;
		}
	}

	@media (max-width: 768px) {
		&>div {
      margin-top: 2.5rem;
    }
		h3 {
			padding: .5rem;
			font-size: 1.6rem;
		}

		& figure {
			grid-template-columns: 1fr;
			gap: 1rem;
			margin: 0 0 1rem;
		}

		& .qa_row {
			gap: .5rem;

			span {
				width: 5rem;
				font-size: 1.4rem;
				padding-top: 0.5rem;
			}

			p {
				padding: .5rem;
				font-size: 1.4rem;
			}

			&.q {
				& p {
					padding: .5rem;
				}
			}

			&.a {
				margin-bottom: .5rem;

				& p {
					padding: .5rem;
				}
			}
		}
	}
}



/*===== 8. Section [about_scene] =====*/
#about_scene {
	&>div:first-of-type {
		position: relative;
		max-width: 64rem;
		margin: 3rem auto 0;

		& iframe {
			aspect-ratio: 16 / 9;
			width: 100%;
			height: 100%;
		}
	}

	&>div:last-of-type {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem;
		max-width: 113.6rem;
		margin: 2rem auto 0;
	}

	@media (max-width: 768px) {
		&>div:last-of-type {
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem;
		}
	}
}