html{ padding : 0; margin : 0; }
body{
	padding : 1.5rem;
	margin : 0;
}
body::before{
	content : '';
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 40vw;
	max-height : 50%;
	background-image : url("./titlebg.jpg");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}

h1{
	position : relative;
	z-index : 1;
	padding : 0;
	margin : 20% 0 0 0;
	text-align : center;
}
h1 > img{
	border : solid 1px #CCC;
	box-shadow : .25rem .25rem .5rem rgba( 0, 0, 0, .15 );
}

address{
	display : flex;
	justify-content : center;
	gap : 1.5rem;
	font-style : normal;
}
address > p{
	padding : 0;
	margin : 0;
	color : #1D6492;
	font-size : 1.5rem;
}
address > p > a{
	color : inherit;
	text-decoration : inherit;
	font-weight : bold;
}

#slogan{
	display : flex;
	justify-content : center;
	gap : 2rem;
	margin-top : 8rem;
}
#slogan > div{
	width : 20rem;
	height : 20rem;
	padding : 2rem;
	background-color : #7FDDB8;
	border-radius : 10rem;
	box-sizing : border-box;
	text-align : center;
	overflow : hidden;
}
#slogan > div > img{
	width : 6rem;
	height : 6rem;
}
#slogan > div > hr{
	width : 80%;
	margin : 1rem auto;
	border : 0;
	border-bottom : solid 1px #1D9264;
}
#slogan > div > p:nth-child(3){
	padding : 0;
	margin : 0;
	color : #0D6234;
	font-size : 1.5rem;
	font-weight : bold;
}
#slogan > div > p:nth-child(4){
	width : 70%;
	padding : 0;
	margin : 1rem auto 0 auto;
	color : #0D6234;
	font-size : 1.125rem;
	word-break : keep-all;
}

#catchphrase{
	display : flex;
	justify-content : center;
	margin : 8rem 0 0 0;
}
#catchphrase > div{
	display : flex;
	flex-direction : column;
	gap : .75rem;
	position : relative;
}
#catchphrase > div::before{
	content : '';
	position : absolute;
	left : -3rem;
	top : .5rem;
	bottom : .5rem;
	width : .5rem;
	border : solid .5rem #1D6492;
	border-right : 0;
}
#catchphrase > div::after{
	content : '';
	position : absolute;
	right : -3rem;
	top : .5rem;
	bottom : .5rem;
	width : .5rem;
	border : solid .5rem #1D6492;
	border-left : 0;
}
#catchphrase > div > p{
	display : flex;
	align-items : center;
	gap : .5rem;
	padding : 0;
	margin : 0;
	font-size : 1.5rem;
	font-weight : bold;
}
#catchphrase > div > p::before{
	content : '';
	width : .75rem;
	height : .75rem;
	background-color : #000;
}

#goods{
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : 1rem;
	margin-top : 8rem;
}
#goods > h3{
	padding : 1.75rem 2.5rem;
	background-color : #0D6234;
	border-radius : .5rem;
	color : #FFF;
	font-size : 2rem;
}
#goods > ul{
	display : grid;
	grid-template-columns: repeat( 4, auto );
	gap : 1rem;
	max-width : 54rem;
	padding : 0;
	margin : 0;
}
#goods > ul > li{
	position : relative;
	list-style : none;
	display : flex;
	flex-direction : column;
	border-radius : .75rem;
	overflow : hidden;
}
#goods > ul > li > img{
	width : 100%;
	height : 100%;
}
#goods > ul > li > p{
	display : flex;
	align-items : center;
	justify-content : center;
	padding : .75rem 0;
	margin : 0;
	background-color : #0D5234;
	color : #FFF;
	text-align : center;
	font-weight : bold;
	font-size : 1.25rem;
}

#price{
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : 1rem;
	margin-top : 8rem;
	margin-bottom : 8rem;
}
#price > h3{
	padding : 1.75rem 2.5rem;
	background-color : #1D6492;
	border-radius : .5rem;
	color : #FFF;
	font-size : 2rem;
}
#price > #price-table{
	display : grid;
	gap : .25rem;
	max-width : 48rem;
	width : 100%;
}
#price > #price-table > div{
	display : grid;
	grid-template-columns : 15rem auto 10rem;
	background-color : #E9F0FF;
	border-radius : .5rem;
	color : #333;
	font-size : 1.25rem;
	overflow : hidden;
}
#price > #price-table > div > div{
	display : flex;
	justify-content : center;
	align-items : center;
	padding : .75rem 1rem;
}

#price > #price-table > div.thead{
	background-color : #FFE9AC;
	font-weight : bold;
	font-size : 1rem;
}
#price > #price-table > div > div.row2{ grid-row : 1 / 3; }
#price > #price-table > div > div.row3{ grid-row : 1 / 4; }
#price > #price-table > div > div.row4{ grid-row : 1 / 5; }
#price > #price-table > div > div.row5{ grid-row : 1 / 6; }
#price > #price-table > div > div.price{
	justify-content : flex-end;
	color : #039;
	font-weight : bold;
}

#delivresult{
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : 1rem;
	margin-top : 8rem;
	margin-bottom : 8rem;
}
#delivresult > h3{
	padding : 1.75rem 2.5rem;
	background-color : #1D6492;
	border-radius : .5rem;
	color : #FFF;
	font-size : 2rem;
}

#multi{
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : 1rem;
}
#multi > h3{
	padding : 1.75rem 2.5rem;
	background-color : #1D6492;
	border-radius : .5rem;
	color : #FFF;
	font-size : 2rem;
}
#multi > div{
	display : grid;
	grid-template-columns: repeat( 2, 1fr );
	gap : .25rem;
	max-width : 54rem;
	margin-bottom : 2rem;
}
#multi > div > h4{
	grid-column : 1 / 3;
	padding : 0;
	margin : 0 0 .5rem 0;
	text-align : center;
	font-size : 1.25rem;
}
#multi > div > img{
	display : block;
	width : 100%;
	border-radius : .5rem;
	overflow : hidden;
}

#catchphrase2{
	display : flex;
	justify-content : center;
	margin : 8rem 0 20rem 0;
}
#catchphrase2 > div{
	display : flex;
	flex-direction : column;
	gap : .75rem;
	position : relative;
}
#catchphrase2 > div::before{
	content : '';
	position : absolute;
	left : -3rem;
	top : .5rem;
	bottom : .5rem;
	width : .5rem;
	border : solid .5rem #1D6492;
	border-right : 0;
}
#catchphrase2 > div::after{
	content : '';
	position : absolute;
	right : -3rem;
	top : .5rem;
	bottom : .5rem;
	width : .5rem;
	border : solid .5rem #1D6492;
	border-left : 0;
}
#catchphrase2 > div > p{
	display : flex;
	align-items : center;
	gap : .5rem;
	padding : 0;
	margin : 0;
	color : #1D6492;
	font-size : 2rem;
	font-weight : bold;
}


@media ( max-width : 50rem ){
	
	#slogan{ zoom : .75; }
}

@media ( max-width : 40rem ){

	h1 > img{ max-width : 100%; }
	address > p{ font-size : 1.125rem; }

	#slogan{
		flex-direction : column;
		gap : .5rem;
		margin-top : 4rem;
		zoom : 1;
	}
	#slogan > div{
		display : grid;
		grid-template-columns: 5rem 3rem auto;
		width : auto;
		height : auto;
		padding : 1rem;
		border-radius : 1rem;
	}
	#slogan > div > img{
		width : 5rem;
		height : 5rem;
		grid-column : 1 / 2;
		grid-row : 1 / 3;
	}
	#slogan > div > hr{
		width : 0;
		border-right : solid 1px #1D9264;
		grid-column : 2 / 3;
		grid-row : 1 / 3;
	}
	#slogan > div > p:nth-child(3){
		grid-column : 3 / 4;
		grid-row : 1 / 2;
		text-align : left;
		font-size : 1.25rem;
	}
	#slogan > div > p:nth-child(4){
		grid-column : 3 / 4;
		grid-row : 2 / 3;
		margin : 0;
		text-align : left;
		font-size : .875rem;
	}

	#catchphrase{ margin-top : 4rem; }

	#goods{ margin-top : 4rem; }
	#goods > h3{
		padding : 1rem 1.5rem;
		font-size : 1.25rem;
	}
	#goods > ul{ grid-template-columns : repeat( 2, 1fr ); }
	#goods > ul > li > p{
		padding : .5rem;
		font-size : 1rem;
	}

	#price > #price-table > div{
		grid-template-columns : 10rem auto 7rem;
		font-size : 1rem;
	}
	#price > #price-table > div > div{ padding : .5rem .75rem; }

	#delivresult{ margin-top : 4rem; }
	#delivresult > div > img{ max-width : 100%; }

}

@media ( max-width : 26rem ){
	
	address{
		flex-direction: column;
		align-items : center;
		gap : .25rem;
	}
	address > p{ font-size : 1.125rem;}

	#price{
		margin-left : -1.25rem;
		margin-right : -1.25rem;
	}
	#price > #price-table > div{
		grid-template-columns : 7.5rem auto 5.5rem;
		font-weight : bold;
		font-size : .95rem;
	}
	#price > #price-table > div > div{ padding : .25rem .5rem; }
	#price > #price-table > div > div.price{ font-size : 1rem; }

	#multi > h3{ text-align : center; }
	#multi > h3 > i{ display : block; }
	#multi > div{ grid-template-columns : 1fr; }
	#multi > div > h4{ grid-column : 1 / 2; }
	

	#catchphrase2{
		width : 70%;
		margin : 5rem auto;
		text-align : center;
	}
	#catchphrase2 > div > p{
		word-break: keep-all;
		font-size : 1.5rem;
	}

}