@charset "utf-8";


.g3-sitewidth--article{
	max-width: 800px;
}

.u-fill-notice{
	color: #C31111;
}

@scope (article){
	header{
		text-align: center;
		
		& .c-header{
			line-height: 1.5;
			text-align: center;
			border-image: linear-gradient(#F0ECE6 0 0) 1 fill / 0 / 0 100vw;
			padding-block: 2.5em;
			
			&::first-line{
				font-size: .75em;
			}
		}
		
		p{
			line-height: 2.5;
			font-size: 1.25em;
		}
	}
	
	h2{
		line-height: 1.5;
		font-size: 1.75em;
		text-align: center;
		background: linear-gradient(.25turn, #404040 2.25em, #896743 0) no-repeat center top / 3.5em 3px;
		padding-top: .5em;
	}
	
	del{
		color: #999;
	}
	
	& :any-link{
		color: inherit;
		
		&:hover{
			text-decoration-style: double;
		}
	}
	
	@media (any-hover: hover){
		:any-link[href^="tel:"]{
			pointer-events: none;
		}
	}
	
	.c-box-notice{
		border-radius: .5em;
		background: #C31111;
		color: white;
		padding: 1em 1.5em;
		
		max-width: fit-content;
		margin-inline: auto;
		
		& > *{
			margin-block: 0;
		}
	}
	
	.c-label{
		font-size: .65em;
		font-weight: normal;
		color: white;
		background: #C31111;
		border-radius: .5em;
		padding: .25em .5em;
	}
	
}

@media (max-width: 768px){
	figure{
		margin-inline: 0;
	}
}

.news{
	border-bottom: 1px solid #7A7979;
	margin-bottom: 1em;
	padding-bottom: 1em;
	
	& summary{
		cursor: pointer;
		list-style: none;
		background: url(./icon-accordion-open.svg) no-repeat right center / 2em 2em;
		padding-right: 2em;
		
		&:where(.news:open *){
			background-image: url(./icon-accordion-close.svg);
		}
	}
	
	& h3{
		font-size: 1.125em;
		display: flex;
		gap: 0 1.875em;
		margin: 0;
	}
	
	&:open::details-content{
		margin: 1em;
	}
	
}

summary::-webkit-details-marker{
	display: none;
}

@media (max-width: 768px){
	.news{
		& h3{
			flex-direction: column;
			display: revert;
			
			& > *{
				display: block;
			}
		}
	}
}

.c-tab{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em 2.5em;
	
	& .c-tab__item{
		font-size: 1.125em;
		font-weight: bold;
		padding: 0 3.75em .5em;
		
		&:has(:checked){
			border-bottom: 7px solid;
		}
		
		&:not(:has(:checked)){
			color: #666;
			cursor: pointer;
		}
	}
	
	&:has([value="for-browser"]:not(:checked)) ~ #for-browser{
		display: none;
	}
	&:has([value="for-appli"]:not(:checked)) ~ #for-appli{
		display: none;
	}
}

@media (max-width: 768px){
	.c-tab{
		gap: 1.25em;
		
		& .c-tab__item{
			padding: 0 1em .5em;
		}
	}
	
	/* .c-tab{
		justify-content: flex-start;
		
		& .c-tab__item{
			border-left: 7px solid transparent;
			padding: 0 1.25em;
			
			&:has(:checked){
				border-bottom: 0;
				border-color: #666;
			}
		}
	} */
}


.c-faqlist{
	padding-left: 0;
}


.c-faq{
	border-bottom: 1px solid #999;
	padding-block: 1.75em;
	list-style: none;
	
	&:first-child{
		border-top: 1px solid #999;
	}
	
	& h3{
		background: url(./icon-q.svg) no-repeat left center / 1.75em 1.75em;
		margin-block: 0;
		padding-left: 2.75rem;
	}
	
	& .c-faq__body{
		margin-left: 2.75rem;
		
		& > *{
			margin-block: 1rem 0;
		}
	}
	
	& figure{
		text-align: center;
	}
}

.c-split{
	display: flex;
	flex-wrap: wrap;
	gap: 2.5em 1.25em;
	
	& > *{
		flex: 1 1 0;
		
		&:where(img){
			flex: 0 0 auto;
			max-width: 50%;
			align-self: center;
		}
	}
}

@media (max-width: 768px){
	.c-split{
		flex-direction: column;
		
		&.c-split-scroll{
			flex-wrap: nowrap;
			flex-direction: row;
			overflow: auto;
			
			& > *{
				flex: 0 0 auto;
				max-width: 64vw;
			}
		}
		
	}
}

.c-changes{
	& dt{
		font-weight: bold;
		margin-bottom: .5em;
	}
	& dd{
		border-bottom: 1px dotted;
		margin: 0 0 .5em 0;
		padding: 0 0 .5em 2em;
		
		& > *{
			margin-block: 0;
			
			* + &{
				margin-top: 1rem;
			}
		}
	}
}

.c-banners{
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
}