/* CSS Document */

#pagePath{
	display: none;
}

#main{
	margin-bottom: clamp(64px, calc(128 / 1200 * 100dvw), 128px);
}

#outline{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1200px);
	justify-content: center;
	margin-top: clamp(24px, calc(64 / 1200 * 100dvw), 64px);
	& ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
		grid-gap: 16px clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 0.5em;
		align-items: center;
		min-height: 48px;
		padding: 0.25em 1em;
		border: 1px solid #ccc;
		border-radius: 24px;
		color: inherit;
		font-weight: 500;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: #f1841f;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="5 8 10 2 0 2 5 8"/></svg>') no-repeat center / contain;
		}
		&:hover{
			background: #f1841f;
			border-color: transparent;
			color: #fff;
			&:after{
				background: currentColor;
			}
		}
	}
}

#marketing{
	display: grid;
	grid-row-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	width: min(var(--wrap-fit), 1200px);
	margin-inline: auto;
	margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	scroll-margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	& h2{
		font-weight: 700;
		font-size: clamp(24px, calc(64 / 1200 * 100dvw), 64px);
		line-height: 1.25;
	}
	& h2+div{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 4px;
			min-width: min(100%, 420px);
			min-height: 48px;
			padding:0.25em 1em;
			background: #f1841f;
			border-radius: 24px;
			color: #fff;
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 10px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><line x1=".5" y1="5" x2="9.5" y2="5"/><polyline points="7 2.5 9.5 5 7 7.5"/></svg>') no-repeat center / contain;
			}
			&:hover{
				background: var(--color);
			}
		}
	}
	& figure{
		grid-row: 2;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 16px;
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr;
		column-gap: clamp(40px, calc(56 / 1200 * 100dvw), 56px);
		& h2+div{
			align-self: start;
			justify-content: start;
		}
		& figure{
			grid-column: 2;
			grid-row: 1 / 3;
		}
	}
}

#useful{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1200px);
	justify-content: center;
	margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	padding: clamp(48px, calc(64 / 1200 * 100dvw), 64px) 0 clamp(48px, calc(80 / 1200 * 100dvw), 80px) 0;
	background: #fff6f5;
	overflow: hidden;
	& h2{
		position: relative;
		padding-bottom: 16px;
		font-weight: 700;
		font-size: clamp(24px, calc(64 / 1200 * 100dvw), 64px);
		line-height: 1.25;
		text-align: center;
		&:after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100dvw;
			border-bottom: 1px dashed currentColor;
		}
	}
	#usefulList{
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
}

#usefulList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 216px), 1fr));
	grid-gap: clamp(40px, calc(64 / 1200 * 100dvw), 64px) clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	& section{
		position: relative;
		display: grid;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 16px;
		}
		&:hover{
			& h3{
				color: #f1841f;
				&:before{
					background: var(--color);
				}
			}
		}
	}
	& h3{
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 8px;
		order: 1;
		font-weight: 700;
		letter-spacing: 0.025em;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			align-self: start;
			aspect-ratio: 1;
			width: 40px;
			transition: all 0.2s ease-out;
		}
		&:before{
			background: #f1841f;
			border-radius: 100%;
		}
		&:after{
			content: "";
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / 10px;
		}
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 16px;
		}
	}
}

#information{
	display: grid;
	grid-row-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	width: min(var(--wrap-fit), 1200px);
	margin-inline: auto;
	margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	scroll-margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	& h2{
		font-weight: 700;
		font-size: clamp(24px, calc(64 / 1200 * 100dvw), 64px);
		line-height: 1.25;
	}
	@media (min-width: 992px) {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr;
		column-gap: clamp(40px, calc(56 / 1200 * 100dvw), 56px);
		#informationList{
			grid-column: 2;
			grid-row: 1 / 3;
			align-self: start;
		}
		#informationLink{
			align-self: start;
			justify-content: start;
		}
	}
}

#informationList{
	display: grid;
	border-bottom: 1px solid #ccc;
	& section{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px;
		min-height: 104px;
		padding: 16px 48px 16px 0;
		border-top: 1px solid #ccc;
		&:has(a):hover{
			& h3{
				color: #f1841f;
			}
		}
	}
	& h3{
		order: 1;
		width: 100%;
		font-weight: 700;
	}
	& h3+div{
		display: contents;
		& ul{
			display: contents;
		}
		& li{
			font-weight: 500;
			font-size: 12px;
			line-height: 1;
			&[class]{
				padding: 2px 0.5em;
				color: #fff;
				text-transform: uppercase;
			}
			&:not([class]){
				display: grid;
				grid-template-columns: auto 1fr auto;
				column-gap: 0.25em;
				&:before,
				&:after{
					content: "-";
				}
			}
			&.tagCheck{
				background: #436aca;
			}
			&.tagNew{
				background: #5c9937;
			}
		}
		& time{
			font-weight: 500;
			font-size: 12px;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: inherit;
			font-size: 0;
			&:before,
			&:after{
				content: "";
				position: absolute;
				top: 50%;
				right: 0;
				aspect-ratio: 1;
				width: 40px;
				transition: all 0.2s ease-out;
				transform: translateY(-50%);
			}
			&:before{
				background: #f1841f;
				border-radius: 100%;
			}
			&:after{
				content: "";
				background: #fff;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / 10px;
			}
			&:hover{
				&:before{
					background: var(--color);
				}
				&:after{
					background: #fff;
				}
			}
		}
	}
}

#informationLink{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		min-height: 48px;
		min-width: min(100%, 240px);
		padding: 4px 24px;
		background: #f1841f;
		border-radius: 24px;
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		text-align: center;
		letter-spacing: 0.1em;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 10px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / contain;
		}
		&:hover{
			background: var(--color);
			color: #fff;
		}
	}
}

#wanted{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1200px);
	justify-content: center;
	margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	padding: clamp(48px, calc(64 / 1200 * 100dvw), 64px) 0 clamp(48px, calc(80 / 1200 * 100dvw), 80px) 0;
	background: #fff6f5;
	overflow: hidden;
	& h2{
		position: relative;
		padding-bottom: 16px;
		font-weight: 700;
		font-size: clamp(24px, calc(64 / 1200 * 100dvw), 64px);
		line-height: 1.25;
		text-align: center;
		&:after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100dvw;
			border-bottom: 1px dashed currentColor;
		}
	}
	#wantedList{
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
}

#wantedList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 216px), 1fr));
	grid-gap: clamp(40px, calc(64 / 1200 * 100dvw), 64px) clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	& section{
		position: relative;
		display: grid;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 16px;
		}
		&:hover{
			& h3{
				color: #f1841f;
				&:before{
					background: var(--color);
				}
			}
		}
	}
	& h3{
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 8px;
		order: 1;
		font-weight: 700;
		letter-spacing: 0.025em;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			align-self: start;
			aspect-ratio: 1;
			width: 40px;
			transition: all 0.2s ease-out;
		}
		&:before{
			background: #f1841f;
			border-radius: 100%;
		}
		&:after{
			content: "";
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="7 2.5 9.5 5 7 7.5"/><line x1=".5" y1="5" x2="9.5" y2="5"/></svg>') no-repeat center / 10px;
		}
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 16px;
		}
	}
}