@charset "UTF-8";

/* genre-nav */
@media all {
	.genre-nav .button.border-rainbow > span {
		justify-content: center;
		padding: 0;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.genre-nav {
			margin: 60rem auto 0;
			width: 250rem;
		}
		.genre-item + .genre-item {margin-top: 15rem;}
		.genre-nav .button {
			width: 250rem;
			height: 40rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.genre-nav {margin: 100rem auto 120rem;}
		.genre-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			row-gap: 30rem;
		}
		.genre-list::after {
			content: '';
			display: block;
			width: 300rem;
		}
		.genre-nav .button {
			width: 300rem;
			height: 50rem;
			font-size: 16rem;
		}
	}
}

/* faq-section */
@media all {
	.faq-dt {
		position: relative;
		background-color: var(--bg-lightblue);
		font-family: var(--lineseed);
		font-weight: bold;
		color: var(--main-blue);
		line-height: 1.5;
	}
	.faq-q {
		position: absolute;
		background: linear-gradient(135deg, #f00, #b507de 65%);/* , #00a2e7); */
		color: transparent;
		background-clip: text;
	}

	.faq-dd a {
		color: var(--main-red);
		text-decoration: underline;
	}

	.faq-dl .notice {
		color: var(--txt-gray);
		font-size: 80%;
	}
	.faq-dl .notice.red {color: var(--main-red);}

	/* sp */
	@media only screen and (max-width: 767px) {
		.faq-section {padding: 80rem 25rem 0;}
		.faq-section:last-child {padding-bottom: 140rem;}
		.main-header-ttl.pc-left {text-align: left;}
		.main-header-ttl.pc-left::after {left: 0;}

		.faq-dl {margin-top: 40rem;}
		.faq-dt {
			padding: 15rem .5em 15rem 38rem;
			background-color: var(--bg-lightblue);
			font-size: 15rem;
		}
		.faq-dd + .faq-dt {margin-top: 40rem;}
		.faq-q {
			top: 11rem;
			left: 8rem;
			font-size: 19rem;
		}

		.faq-dd {
			margin-top: 12rem;
			padding: 0 16rem;
			text-align: justify;
			line-height: 2;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.faq-section {margin-top: 100rem;}

		.faq-dl {margin-top: 40rem;}
		.faq-dt {
			padding: 12rem 1em 11rem 55rem;
			background-color: var(--bg-lightblue);
			font-size: 18rem;
		}
		.faq-dd + .faq-dt {margin-top: 26rem;}
		.faq-q {
			top: 8rem;
			left: 18rem;
			font-size: 22rem;
		}

		.faq-dd {
			margin-top: 8rem;
			padding: 0 18rem;
			line-height: 2.5;
		}
		.faq-dd a {transition: opacity .3s;}
		.faq-dd a:hover {opacity: .7;}

		.site-footer {margin-top: 150rem;}
	}
}











/* template-section */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}