/* CSS Document */

#support{
	& section{
		padding-top: 70px;
		padding-bottom: 70px;
		&:where(#info, #service) {
			padding-bottom: 0;
		}
		&:where(#voice) {
			background: #fdf8e4;
		}
	}
}

#subject{
	& figure{
		position:relative;
	}
	.headline{
		line-height: 1.2;
	}
}

#service{}

#serviceList{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2.5em;
	@media (max-width: 800px) {
		grid-template-columns: 1fr;
	}
	&>div{
		display: grid;
		box-shadow: 0px 0px 5px 0px #ccc;
		box-sizing: border-box;
		border-radius: 8px;
		overflow: hidden;
		&>div{
			padding: 1em;
		}
	}
	& h4{
		display: grid;
		justify-items: start;
		font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
		font-size: 1.2em;
		&:before{
			content: attr(data-no);
            display: grid;
            align-items: center;
			margin-bottom: 1em;
			padding: 0 1em;
			min-height: 26px;
			font-size: 10px;
			color: #fff;
			background: #b98c00;
			border-radius: 50px;
			letter-spacing: 0.1em;
		}
	}
	& h4+p{
		margin-bottom: 0;
		color: #666;
	}
	& ul{
		margin-top: 1em;
	}
	& li{
		display: grid;
		grid-template-columns: 1em 1fr;
		grid-gap: 0.5em;
		&:before{
			content: "";
			background: #b98c00;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>') center / contain no-repeat;
		}
		&+li{
			margin-top: 0.5em;
		}
	}
	& ul+div{
		margin-top: 1em;
		p{
			margin-bottom: 0;
			font-weight: bold;
		}
		a{
			font-size: 1.6rem;
		}
	}
	& figure{
		margin-bottom: 0;
		order: -1;
	}
}

#price{
	&>div{
		margin-top: 2em;
	}
	& ul.notes{
		margin-top: 1em;
		& li{
			display: grid;
			grid-template-columns: 1em 1fr;
			font-size: 0.85em;
			&:before{
				content: "※";
			}
		}
	}
	.scroll table {
		@media (max-width: 480px) {
			display: block;
			overflow-x: scroll;
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;
		}
	}
	.table{
		& tbody{
			& th{
				width: 12em;
				white-space: normal;
			}
		}
	}
}

#priceStorage{
	.table{
		& tbody{
			& th{
				width: 8em;
				white-space: nowrap;
				&:first-child:not([colspan]):not([rowspan]){
					border-width: 1px 0 0 1px;
				}
			}
		}
	}
}

#voice{}

#voiceList{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1.5em;
	@media (max-width: 800px) {
		grid-template-columns: 1fr;
	}
	& dl{
		display: grid;
		align-content: space-between;
		grid-gap: 1em;
		padding: 1em;
		background: #fff;
		box-shadow: 0px 0px 5px 0px #d4d0ad;
		box-sizing: border-box;
		border-radius: 8px;
		overflow: hidden;
	}
	& dt{
		font-size: 0.8em;
		text-align: right;
	}
	& dd{
		order: -1;
		& p{
			margin: 0.5em 0;
			font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
		}
	}
}

#contact{
	&>div{
		margin: auto;
		padding: clamp(32px, calc(48 / 1200 * 100vw), 48px) clamp(16px, calc(32 / 1200 * 100vw), 32px);
		max-width: 960px;
		background-image: linear-gradient(338deg, rgb(148, 112, 0) 29%, rgb(209, 165, 19));
		color: #fff;
		border-radius: 8px;
		text-align: center;
		@media (max-width: 1000px) {
			margin: 0 15px;
		}
	}
	& h3{
		display: inline-block;
		padding: 0 1rem 1.5rem;
		font-size: 2.6rem;
		font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
		text-align: center;
		border-bottom: 2px solid #fff;
	}
	& p{
		margin: 2rem auto;
		font-size: 1.8rem;
		line-height: 1.6;
		@media (max-width: 800px){
			text-align: left;
		}
		&+p{
			font-size: 1.6rem;
		}
	}
	& div:has(>a){
		display: grid;
		grid-template-columns: min(300px, 100%) min(300px, 100%);
		justify-content: center;
		grid-gap: 1rem 2rem;
		@media (max-width: 800px){
			grid-template-columns: 1fr;
		}
		& a{
			width: 100%;
			font-weight: normal;
			color: #6d4800;
			background: #ffe535;
			border: 2px solid #fff;
			box-shadow: 0px 0px 5px 0px #85641d;
			&:hover{
				color: #fff;
				background: #6d4800;
				opacity: 1;
			}
		}
	}
}



/* Media Queries - wrapper size */
@media (max-width: 1000px) {
}

/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 800px) {
}

/* Media Queries - Smartphone */
@media (max-width: 480px) {
}