:root{
	--font-family-serif: Georgia, 'Times New Roman', Times, serif;
	font-size: 8px;
}
html, body {
	/* font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 500; */
	line-height: 1.6em;
	letter-spacing: 0.1rem;
	font-size: 1.6rem;
	color: #1b1d1f;
}

body {
	background-image: url(../img/bg_point-wave.png);
}
nav {
	height: 6rem;
	background-color: #1a1a1a;
}

header {
	/* height: 410px; */
}
main {
	/* width: 1040px;
	margin-left: auto;
	margin-right: auto; */
	background-image: url(../img/bg_main_washi.png);
}

footer {
	height: 10rem;
	background-color: #c0273d;
}
.page {
	margin: 2rem 3rem 1rem;
	padding: 0 1rem;
}

.navbar {
	padding: .5rem 3rem;
}

.page-nav_item {
	height: 20px;
	width: auto;
}

.inner-content {
	padding: 3rem 0;
}

.section_header {
	margin-bottom: 2rem;
	height: 6rem;
	background-repeat: no-repeat;
	background-size: 120%;
    background-position: center left -20px;
}

.section_sub-header {
	height: 3rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
	background-size: contain;
	background-repeat: no-repeat;
}

.products {
	width: 100%;
	margin: 0 0rem 2rem;
	padding-top: 2rem;
	padding-left: 4rem;
	padding-right: 4rem;
	padding-bottom: 1rem;
	background-image: url(../img/bg_line_left.gif), url(../img/bg_line_right.gif), url(../img/bg_section-3_sayagata.png);
	background-position-x: left, right, left;
	background-repeat: repeat-y, repeat-y, repeat;
}

.products-block {
	padding-left: 78px;
	border-radius: 0.2rem;
	border-style: solid;
	background-repeat: no-repeat;
	background-size: 70px auto;
}

.products-block.raw {
	border-color: #c0273d;
	background-color: #c0273d;
	background-image: url(../img/products-type_raw.png);
}

.products-block.boiled {
	border-color: #1a1a1a;
	background-color: #1a1a1a;
	background-image: url(../img/products-type_boiled.png);
}

.products-content {
	background-color: #f1f1f1;
	margin: 0;
	padding: 0.5rem 1rem;
	font-size: 1.2em;
}

.products dd {
	text-align: right;
}

.text-price {
	color: #c0273d;
	font-size: 1.5em;
	font-family: Georgia, 'Times New Roman', Times, serif;
}

.text-price::after {
    content: "円";
    color: black;
    font-size: 0.5em;
    font-family: auto;
}

.text-caption {
	font-size: 0.8em;
}

.auto-image-sizing {
	width: 100%;
	height: auto;
}

.purchase-block {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.map-bg {
}

#page_top {
	position: fixed;
	z-index: 1000;
    top: 80vh;
    right: 0px;
}
#page_top a {
	color: #fff;
    text-align: center;
    text-decoration: none;
	padding: 2rem 3rem;
	background-color: rgba(16, 16, 16, 0.7);
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}
/* #page_top a:hover {
    background-color: #666;
    text-decoration: none;
} */

#wrapper {
	padding: 0;
}

#hero {
	height: 45.6vw;
	max-width: 540px;
	max-height: 256px;
	background-image: url(../img/hero.jpg);
	background-size: cover;
	background-position-x: center;
}

#content-lead {
	font-size: 1.1em;
	line-height: 1.6em;
	margin: 2rem 0 3rem;
}
#page-nav {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 60px;
	padding-left: 30px;
	padding-right: 30px;
	background-image: url(../img/body-nav_wave_left.png), url(../img/body-nav_wave_right.png), url(../img/bg_body-nav.png);
	background-position: left -30px bottom, right -30px bottom, left top;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-size: contain, contain, cover;
}

#content-1 {
	background-image: url(../img/bg_line_left.gif), url(../img/bg_line_right.gif);
	background-position: left top, right top;
	background-repeat: repeat-y, repeat-y;
}

#content-2 {
	background-image: url(../img/bg_line_left.gif), url(../img/bg_line_right.gif), url(../img/bg_section-2_wave.png);
	background-position: left top, right top, left top;
	background-repeat: repeat-y, repeat-y, repeat;
}

#content-3 {
	background-image: url(../img/bg_line_left.gif), url(../img/bg_line_right.gif);
	background-position: left top, right top;
	background-repeat: repeat-y, repeat-y;
}

#section-1_header {
	background-image: url(../img/section-1_header.png);
}

#section-2_header {
	background-image: url(../img/section-2_header.png);
}

#section-3_header {
	background-image: url(../img/section-3_header.png);
}

#section-1_sub-header {
	background-image: url(../img/section-1_sub-header-1.png);
}

#section-2_sub-header-1 {
	background-image: url(../img/section-2_sub-header-1.png);
}

#section-2_sub-header-2 {
	background-image: url(../img/section-2_sub-header-2.png);
}

#section-3_sub-header-1 {
	background-image: url(../img/section-3_sub-header-1.png);
}

#section-3_sub-header-2 {
	background-image: url(../img/section-3_sub-header-2.png);
}

#hidden-map {
	width: 75%;
    margin-left: auto;
    margin-right: auto;
}
#section-1_image-1 {
	width: 100%;
	height: 23.4rem;
	background-image: url(../img/photo_crab_main.jpg);
	background-repeat: no-repeat;
	background-size: contain;
}

#captains-voice {
	padding: 3rem 5rem;
	background-color: #f8f8f8;
}

#captains-voice_header {
	height: 58px;
    margin-bottom: 2rem;
    background-image: url(../img/captains-voice_header.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}

#captains-voice_content {
	margin-top: 2rem;
	padding: 4rem 0;
	background-image: url(../img/blockquote_begin.png), url(../img/blockquote_end.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left top 0.5rem, right bottom;
	background-size: 26px auto;
}

#products-image_single {
	background-image: url(../img/photo_crab-dish.jpg);
	background-repeat: no-repeat;
	background-size: contain;
}

#products-image_package {
	background-image: url(../img/photo_seiko-gani.jpg);
	background-repeat: no-repeat;
	background-size: contain;
}

/* media-query */
@media (min-width: 768px) {
	:root {
		font-size: 8px;
	}
	#hero {
		height: 308px;
		max-width: initial;
		max-height: initial;
	}
	.page {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	.products {
		padding-left: 6rem;
		padding-right: 6rem;	
	}
	.products-block {
		padding-left: 106px;
		background-size: auto;
	}
}
@media (min-width: 992px) {
	:root {
		font-size: 9px;
	}
	#hero {
		height: calc(960px * 0.3596);
	}
	#page-nav{
		height: 80px;
	}
	#page-nav{
		background-position: left top, right top, left top;
		padding-left: 100px;
		padding-right: 100px;
	}
	#section-1_image-1 {
		height: 180px;
	}
	#captains-voice_content {
		padding: 0 10rem;
		background-position: left top 1rem, right bottom 1rem;
		background-size: auto;
	}
	.section_header {
		margin-bottom: 2rem;
		height: 6rem;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.page-nav_item {
		width: 220px;
		height: 30px;
	}
	.products-block {
		padding-left: 78px;
		background-size: 70px auto;
	}

	.map-bg {
		background-image: url(../img/photo_japan-map.png);
		background-repeat: no-repeat;
		background-size: 500px 342px;
		background-position: top 50px right 30px;
	}
}
@media (min-width: 1200px) {
	:root {
		font-size: 10px;
	}
	#hero {
		height: calc(1140px * 0.3596);
	}

	#section-1_image-1 {
		/* width: 100%; */
		height: 220px;
		background-image: url(../img/photo_crab_main.jpg);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.products-block {
		padding-left: 106px;
		background-size: auto;
	}
	.map-bg {
		background-size: 580px 396px;
	}
}