@import url(/styles/themes/font/sans-serif.css);
@import url(page-style.css);

:root {
	--gray: #5d656f;
	--blue: #232D55;
	--white: #F6F6F6;

	--jacket-1: 34rem;
}

body {
	/* font-weight: bold; */
	margin: 0;
	letter-spacing: 0;
	background-color: var(--white);
}

.wrapper {
	display: grid;
	grid-template-columns: var(--jacket-1) 1fr;

}

.sidebar {
	--border: 0.125rem;
	background-color: black;
	font-weight: bold;
	width: var(--jacket-1);
	position: fixed;
	top: 0;
	bottom: 0;
	border-right: 0.125rem solid black;

	display: grid;
	grid-gap: var(--border);
	grid-template-rows: 1fr 4fr 2rem;

	& > .row-1 {

		display: grid;
		grid-gap: var(--border);
		grid-template-columns: 4fr 2fr 1.5fr;

		& > .col-1 {
			background-color: var(--gray);
		}

		& > .col-2 {
			background-color: var(--blue);
		}

		& > .col-3 {
			background-color: var(--gray);
		}
	}

	& > .row-2 {
		display: grid;
		grid-gap: var(--border);
		grid-template-columns: 1.6fr 2fr;

		& > .col-1 {
			display: grid;
			grid-template-rows: 2.5fr 3fr;
			grid-gap: var(--border);

			& > .row-1 {
				background-color: var(--blue);
				position: relative;

				.one {
					color: var(--white);
					font-size: 4rem;

					position: absolute;
					right: 8%;
					top: 20%;
				}
			}

			& > .row-2 {
				display: grid;
				grid-gap: var(--border);
				grid-template-columns: 2fr 1fr;

				& > .col-1 { 
					background-color: var(--blue);
				}

				& > .col-2 { 
					background-color: var(--gray);
				}
			}
		}

		& > .col-2 {
			display: grid;
			grid-gap: var(--border);
			grid-template-rows: 1.5fr 4fr;


			& > * {
				background-color: var(--gray);
			}

			& > .row-1 {
				position: relative;
				.reluctant {
					color: var(--white);
					font-size: 0.5em;
					text-align: center;
					position: absolute;
					bottom: 1.5rem;
					left: 4rem;

					img {
						width: 5rem;
					}

					span {
						display: block;
						line-height: 0;
						margin-top: 0.5em;
					}
				}
			}
		}
	}

	& > .row-3 {
		background-color: var(--gray);
	}

	.takumi-chibi {
		position: absolute;
		bottom: 0;
		left: 19rem;
		img {
			width: 14rem;
		}
	}

	img {
		border: none;
	}
}

.main {
	padding: 1rem;
	grid-column-start: 2;
}