html { 
	font-size: 62.5%; /* 10px */
}
body, body *, body *::before, body *::after {
	outline:none;
}
body {
	background:#FFF;
}
.noto {
	font-family: 'Noto Sans JP', sans-serif;
}
.lato {
	font-family: 'Lato', sans-serif;
}
.mon {
	font-family: 'Montserrat', sans-serif;
}

/* =responsive
-------------------------------------------------------------- */
.tabletsp {
	display:none !important;
}
.tablet {
	display:none !important;
}
.sp {
	display:none !important;
}

/* =color
-------------------------------------------------------------- */
:root {
	--color-white:#FFFFFF;
	--color-blue:#5a8ca8;
	--color-black:#364551;
	--color-beige:#ede9e6;
}


/* =structure
-------------------------------------------------------------- */

.container {
	width:100%;
}
.wrapper {
	width:100%;
	margin:0 auto;
	position: relative;
}
.contents {
	max-width:1170px;
	width:85%;
	margin:0 auto;
	position: relative;
}
.flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	-ms-flex-pack: space-between;
	-webkit-align-items: flex-start;
	-moz-align-items: flex-start;
	-ms-align-items: flex-start;
	align-items: flex-start;
}


/* =ヘッダー
-------------------------------------------------------------- */
header.header {
	width:100%;
	padding:15px 0 0 0;
	position: relative;
}
header.header .logo {
	display: block;
	font-size:2.8rem;
	font-weight:bold;
	text-align: center;
}
header.header .logo a {
	color:var(--color-black);
	letter-spacing:0.1em;
}

/* =cp001
-------------------------------------------------------------- */
.mainwrap {
	max-width:800px;
	width:90%;
	margin:0 auto;
}

.slider {
	padding:15px 0;
}
.slider img {
	display: block;
	width:100%;
	height:auto;
}
.thumbnail .thumb-box {
	padding:0 6px;
	opacity:0.3;
}
.thumbnail img {
	display: block;
	width:100%;
	height:auto;
}
.thumbnail .slick-track {
  transform: unset !important;
}
.thumbnail .slick-current {
  opacity: 1;
}

.lineup {
	padding:20px 0;
}
.item {
	color:#000;
}
.item.flex {
	align-items:center;
}
.item .thumb {
	width:18%;
}
.item .thumb img {
	display: block;
	width:100%;
	height:auto;
}
.item .text {
	width:78%;
}
.item .text .title {
	font-size:1.45rem;
	font-weight:bold;
	line-height:1.8em;
}
.item .info {
	padding:10px 0 0 0;
}
.item .info.flex {
	justify-content:flex-start;
}
.item .info .volume {
	font-size:1.3rem;
	line-height:1.7rem;
}
.item .info .price {
	font-size:1.7rem;
	font-weight:600;
	margin:0 0 0 20px;
}
.item .info .price span {
	font-size:1.2rem;
	padding:0 0 0 0.3em;
}

@media screen and (min-width:800px) {
	.item .text .title {
		font-size:3.3rem;
	}
	.item .info {
		padding:30px 0 0 0;
	}
	.item .info .volume {
		font-size:2.4rem;
		line-height:5rem;
	}
	.item .info .price {
		font-size:4rem;
	}
	.item .info .price span {
		font-size:2rem;
	}
}


.btn {
	max-width:400px;
	width:100%;
	margin:0 auto;
	padding:0 0 60px 0;
}
.btn a.flex {
	width:100%;
	justify-content:center;
	align-items:center;
	background:#997959;
	color:#FFF;
	font-size:1.5rem;
	padding:22px 0;
}
.btn a:hover {
	background:#000;
}
.btn .icon {
	width:26px;
}

@media screen and (min-width:800px) {
	.btn {
		max-width:600px;
	}
	.btn a.flex {
		font-size:3rem;
		padding:32px 0;
		border-radius:60px;
	}
	.btn .icon {
		width:40px;
	}
}

.btn .icon img {
	display: block;
	width:100%;
	height:auto;
}
.btn .label {
	padding:0 0 0 10px;
}

.images img {
	display: block;
	width:100%;
	height:auto;
}
.set2, .set3 {
	padding:0 0 30px 0;
}
.setitem {
	padding: 0 0 30px 0;
}

footer {
	width:90%;
	margin:0 auto;
	padding:0 0 40px 0;
}
.footmenu {
	width:100%;
}
.footmenu a {
	display: block;
	font-size:1.8rem;
	color:#000;
	padding:10px 0 10px 20px;
	position: relative;
}
.footmenu a::before {
	content:'\f0da';
	font-family:'font Awesome 5 free';
	font-weight:bold;
	position: absolute;
	font-size:2.4rem;
	top:5px;
	left:0;
}
.copyright {
	padding:30px 0 0 0;
	font-size:1.2rem;
	text-align: center;
}

@media screen and (min-width:800px) {
	.footnav.flex {
		justify-content:center;
	}
	.footmenu {
		width:auto;
		margin:0 20px;
	}
}