@charset "UTF-8";
/* ---------------------------------------------------------
	Tablet "Portrait" + PC || 768px~
----------------------------------------------------------*/
@media only screen and (min-width: 768px) {
	html {
		background-color: var(--color-ultra-light-grey);
	}
	a {
		-webkit-transition: all 0.25s;
		-moz-transition: all 0.25s;
		transition: all 0.25s;
	}
	#wrapper {
		padding: 2rem;
		max-width: 800px;
		background: var(--color-white);
	}
	header hgroup .-bg {
		background-image: url("../images/img_hero@2x.jpg");
		background-image: image-set(url("../images/img_hero@2x.avif") type("image/avif"), url("../images/img_hero@2x.webp") type("image/webp"), url("../images/img_hero@2x.jpg") type("image/jpeg"));
	}
	nav .-index-container ul li a {
		position: relative;
	}
	nav .-index-container ul li a:hover, .-list-4 > li a:hover {
		color: var(--color-green);
	}
	nav .-index-container > ul > li > ul > li {
		padding: 0 0 0 4rem;
	}
	nav .-index-container > ul > li > ul > li::before {
		top: 1.125rem;
		left: 2rem;
	}
	footer .-button a {
		padding: 1rem 2rem;
	}
	footer .-button a:hover {
		color: var(--color-white);
		background-color: var(--color-black);
	}
	footer .-button a i {
		right: 2rem;
	}
	footer .-button a:hover i {
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M24 0l-6 22-8.129-7.239 7.802-8.234-10.458 7.227-7.215-1.754 24-12zm-15 16.668v7.332l3.258-4.431-3.258-2.901z" /></svg>') no-repeat center center;
	}
	#gototop {
		bottom: 2rem;
		right: 2rem;
		width: 5rem;
		height: 5rem;
	}
	#gototop:hover {
		opacity: .6;
	}
	#gototop a {
		padding: 1rem;
	}
	#gototop a i {
		margin: 0 auto 0.5rem;
		width: 2rem;
		height: 2rem;
	}
	#gototop a span {
		font-size: var(--font-size-s);
	}
	.-subtitle-2 {
		width: 50%;
	}
	.-list-1 > li::before, .-list-2 > li::before, .-list-3 > li::before {
		top: 0.125rem;
	}
	.-columns {
		display: flex;
		justify-content: space-between;
	}
	.-columns .-column.-merit, .-columns .-column.-demerit {
		margin: 0;
		width: 49%;
	}
	.-list-2 {
		margin: 0 auto;
		padding: 2rem 1rem;
		list-style: none;
	}
	.-list-2 > li, .-list-3 > li {
		font-size: var(--font-size-md);
	}
	.-list-3 > li {
		padding: 2rem;
	}
	th, td {
		font-size: var(--font-size-s);
	}
	td a:hover {
		color: var(--color-green);
	}
}