/* CSS Document */

#welfare{
	padding: 0;
	& header+section{
		@media (max-width: 767.98px) {
			padding-top: 2em;
		}
		@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
			padding-top: 4em;
		}
	}
	& section{
		display: grid;
		padding-top: 0;
		@media (max-width: 767.98px) {
			grid-gap: 1em;
			padding-top: 1em;
		}
		@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 2em;
		}
		h3{
			justify-self: center;
			display: block;
			padding: 0.6em 1em;
			font-family: 'Racing Sans One', 'Noto Serif JP', serif;
			font-size: 2em;
			position: relative;
			color: #fff;
			@media (min-width: 767.98px) {
				grid-column: 1 / 3;
			}
			&:before{
				content: "";
				position: absolute;
				inset: 0;
				z-index: -1;
			}
			#netflix &{
				display: none;
			}
		}
		& dl{
			display: flex;
			flex-direction: column;
			@media (max-width: 767.98px) {
				padding: 1em 1.5em;
			}
			@media (min-width: 768px) and (max-width: 991.98px) {
				padding: 1em 1.5em;
			}
			@media (min-width: 992px) {
				padding: 1.5em 2em;
			}
		}
		& dt{
			display: flex;
			flex-direction: column;
			align-items: center;
			grid-gap: 0.5em;
			margin-bottom: 1em;
			padding-bottom: 1em;
			border-bottom: 2px solid #e60021;
			font-size: 1.2em;
			font-weight: 500;
			line-height: 1.4;
			text-align: center;
		}
		& dd{
			line-height: 1.7em;
		}
	}
}

#netflix{
	dl{
		border: 2px solid #e60021;
		@media (max-width: 767.98px) and (orientation: landscape), (min-width: 768px) {
			grid-column: 1 / 3;
		}
		& dt{
			margin-bottom: 0.5em;
            padding-top: 0;
            padding-bottom: 0.5em;
			font-family: "aptos", sans-serif;
			font-weight: 700;
			font-size: clamp(2em, calc(40 / 1200 * 100vw), 2.5em);
			color: #e60021;
		}
	}
}

#refresh{
	h3{
		&:before{
			background-color: #0092E5;
		}
	}
	dl{
		border: 2px solid #0092E5;
		& dt{
			border-color: #0092E5;
		}
	}
}

#discount{
	h3{
		&:before{
			background: #fccf00;
		}
	}
	dl{
		border: 2px solid #fccf00;
		& dt{
			border-color: #fccf00;
			}
	}
}

#gift{
	h3{
		&:before{
			background: #6fb92c;
		}
	}
	dl{
		border: 2px solid #6fb92c;
		& dt{
			border-color: #6fb92c;
		}
	}
}

#other{
	h3{
		&:before{
			background: #F06DC0;
		}
	}
	dl{
		border: 2px solid #F06DC0;
		& dt{
			border-color: #F06DC0;
		}
	}
}

#memory{
	padding-bottom: 2em;
	& ul{
		display: grid;
	}
	& li{
		& a{
			display: flex;
			flex-direction: column;
			align-items: center;
			grid-gap: 0.5em;
			background: #fff;
			color: inherit;
			border: 2px solid currentColor;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			&:hover{
				color: #0092E5;
				text-decoration: none;
			}
		}
		& i{
			font-size: 2em;
		}
	}
	@media (max-width: 767.98px) {
		& ul{
			grid-gap: 1em 2em;
		}
		& li{
			& a{
				padding: 1em;
			}
		}
	}
	@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
		& ul{
			grid-template-columns: repeat(3, 1fr);
		}
	}
	@media (min-width: 768px) and (max-width: 991.98px) {
		& ul{
			grid-gap: 3em;
		}
		& li{
			& a{
				padding: 1em 1.5em;
			}
		}
	}
	@media (min-width: 992px) {
		& ul{
			grid-gap: 4em;
		}
		& li{
			& a{
				padding: 1em 2em;
				font-size: 1.2em;
			}
		}
	}
	@media (min-width: 1145px) {
		padding-bottom: 4em;
	}
}