/*----- constant -----*/
:root {
	--font-serif: "Noto Serif JP",serif;
	--font-sans: "Noto Sans JP",sans-serif;

	--color-background: #e6ddd3;
}
/*----- html body -----*/
html {
	overflow-y: scroll;
	overflow-x: hidden;
	background-color: var(--color-background);
	> body {
		margin: 0;
		font-family: var(--font-sans);
		font-feature-settings: "palt" 1;
		line-break: strict;
		overflow-x: hidden;
		min-height: 100vh;
		scroll-behavior: smooth;
		text-rendering: optimizeSpeed;
		background-image: url(../image/leather_beige.png);
	}
}
/*----- selection -----*/
::selection {
	color: #fff;
	background-color: #6f5f43;
}
/*----- <wbr><span>...</span> は改行させない -----*/
wbr {
	&:after {
		content: "\00200B";		/*ゼロ幅スペース*/
	}
	+ span {
		white-space: nowrap;
	}
}

/*-------------------------------*/

/*
@mixin stitch_beige {		//@include stitch_beige;
	border-image-source: url(../image/stitch_beige.svg);
	border-image-slice: 30;
	border-image-width: 30px;
	border-image-repeat: round;
}
@mixin stitch_beige_inside {		//@include stitch_beige_inside;
	border-image-source: url(../image/stitch_beige_inside.svg);
	border-image-slice: 30;
	border-image-width: 30px;
	border-image-repeat: round;
}
*/

/*----- section -----*/
section,
header {
	display: grid;
	grid-template-columns: 1fr 1100px 1fr;
	column-gap: 5px;
	margin: 5px;
	min-height: 100px;
	@media (width <= 1100px) {
		> div:nth-of-type(1),
		> div:nth-of-type(3) {
			display: none;
		}
		grid-template-columns: 100%;
	}
	> div {
		background-color: rgba(255,255,255,0.5);
		border-image-source: url(../image/stitch_beige.svg);
		border-image-slice: 30;
		border-image-width: 30px;
		border-image-repeat: round;
		&:nth-of-type(2) {
		}
	}
}
/*----- section.header -----*/
section.header {
	> div {
		&:nth-of-type(1) {
			background-color: rgba(255,255,200,0.2);
		}
		&:nth-of-type(2) {
			padding: 15px;
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			column-gap: 20px;
			row-gap: 3px;
			> h1 {
				font-size: 1.8rem;
				line-height: 1.2;
				color: #fff;
				text-shadow: -1px -1px 1px rgba(0,0,0,0.2);
				font-weight: 700;
			}
			> h2 {
				font-size: 1rem;
				line-height: 1.5;
				color: #fff;
				text-shadow: -1px -1px 1px rgba(0,0,0,0.2);
				font-weight: 500;
			}
		}
	}
}
/*----- header -----*/
header {
	> div {
		&:nth-of-type(3) {
			background-color: rgba(200,255,200,0.2);
		}
		&:nth-of-type(2) {
			padding: 15px;
			position: relative;
			background-color: rgba(240,200,150,0.3);
			border-image-source: url(../image/stitch_beige.svg);
			border-image-slice: 30;
			border-image-width: 30px;
			border-image-repeat: round;
			> img.thread {
				position: absolute;
				right: -62px;
				top: -42px;
			}
			> h2 {
				font-size: 1rem;
				line-height: 1.5;
				color: #7b6246;
				font-weight: 400;
			}
			> h1 {
				margin-top: 7px;
				font-size: 1.8rem;
				line-height: 1.2;
				color: #300;
				font-weight: 700;
			}
			> h3 {
				margin-top: 10px;
				font-size: 1rem;
				line-height: 1.5;
				color: #7b6246;
				font-weight: 400;
			}
		}
	}
}
/*----- adsense -----*/
section.adsense {
	> div {
		&:nth-of-type(2) {
			padding: 15px;
			background-color: rgba(255,200,255,0.1);
		}
	}
}
/*----- usage -----*/
section.usage {
	> div {
		&:nth-of-type(2) {
			padding: 15px;
			font-size: 0.9rem;
			line-height: 1.7;
			color: #7b6246;
			font-weight: 400;
			a {
				color: #74593a;
				&[target="_blank"] {
					padding-right: 18px;
					background-image: url(../image/mark_external_ccb.svg);
					background-repeat: no-repeat;
					background-position: right 4px top 60%;
				}
				&:hover {
					opacity: 0.7;
				}
			}
			img {
				max-width: 100%;
			}
			div.code {
				overflow-x: auto;
				display: grid;
				font-size: 0.8rem;
			}
		}
	}
}
section.usage {
	&:nth-of-type(4n - 4) {
		> div:nth-of-type(1) {
			background-color: rgba(100,100,255,0.1);
		}
	}
	&:nth-of-type(4n - 3) {
		> div:nth-of-type(3) {
			background-color: rgba(255,200,150,0.1);
		}
	}
	&:nth-of-type(4n - 2) {
		> div:nth-of-type(1) {
			background-color: rgba(200,200,255,0.1);
		}
	}
	&:nth-of-type(4n -1) {
		> div:nth-of-type(3) {
			background-color: rgba(200,255,100,0.1);
		}
	}
}
/*----- bottom -----*/
section.bottom {
	> div {
		&:nth-of-type(2) {
			padding-block: 50px;
		}
	}
}