@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=keyboard_arrow_right');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=keyboard_arrow_left');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=keyboard_arrow_down');

:root {
	--black: #2C2927;
	--accent: #BAA27A;
	--bg-content: #F8F5F0;
	--border: #A6A6A6;
	--carousel: #737271;
	--red: #DE5D50;
	--noto-serif: "Noto Serif JP", serif;
	--noto-sans: "Noto Sans JP", sans-serif;
}

* {
	font-family: "Noto Sans JP", "YuGothic", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--black);
	font-size: 14px;
}
html {
	scroll-behavior: smooth;
}

body {
	min-width: 375px;
}

section {
	max-width: 1800px;
	margin: 0 auto;
}

.flex {
	display: flex;
	justify-items: center;
	align-items: center;
}

.inner1040,
.inner1160 {
	width: 90%;
	margin: 0 auto;
}

.inner1040 {
	max-width: 1040px;
}

.inner1160 {
	max-width: 1160px;
}

.sp-only {
	display: block;
}

.pc-only {
	display: none;
}

.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
	font-size: 18px;
}

.breadcrumb ul.flex {
	margin-top: 16px;
	margin-bottom: 1rem;
	gap: 0 60px;
	& li:not(:last-child) {
		position: relative;
	}
	& li:not(:last-child) a {
		color: var(--accent);
	}
	& li:not(:last-child)::after {
		content: "\e315";
		display: inline-block;
		position: absolute;
		bottom: 50%;
		transform: translateY(50%);
		font-family: "Material Symbols Outlined";
		font-size: 20px;
		right: 0;
		left: calc(100% + 20px);
	}
}

img {
	width: 100%;
	object-fit: cover;
}

main {
	min-height: 100vh;
}

h1, h2, h3, h4 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-weight: 500;
	line-height: 1.5;
}

@media (hover: hover) {
	a {
		transition: all .2s;
	}
	a:hover {
		opacity: 0.6;
	}
}

@media screen and (min-width: 768px) {
	.inner1040,
	.inner1160 {
		max-width: 1040px;
		width: 90%;
	}

	* {
		font-size: 16px;
	}

	.sp-only {
		display: none;
	}

	.pc-only {
		display: block;
	}


}

/* ヘッダー */
header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: white;
}
h1 {
	width: 120px;
	margin: 0 auto 16px;
}
.header-top {
	display: flex;
	height: 60px;
	padding: 5px;
	& img {
		width: 155px;
		margin-left: 12px;
	}
}
.header-bottom {
	height: 52px;
	border-bottom: solid 1px #A6A6A6;	
}

/* ハンバーガーメニュー */
.hamburger {
	display: block;
	cursor: pointer;
	border-radius: 50%;
	box-sizing: border-box;
	padding: 10px;
	width: 40px;
	height: 40px;
	font-size: 18px;
	text-align: center;
	color: black;
	background: white;
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 1000;
	& i.fa-bars {
		display: inherit;
	}
	& i.fa-times {
		display: none;
	}
}
.hamburger:focus-visible {
	border: 3px solid #33A8D0;
}
.hamburger.hamburger-menu--open {
	& i.fa-bars {
		display: none;
	}
	& i.fa-times {
		display: inherit;
	}
}
.hamburger-inner {
	position: absolute;
	height: calc(100vh - 112px);
	padding: 0 16px 24px;
	transform: translateX(-100%);
	background: white;
	overflow-y: scroll;
	z-index: 1000;
	& .menu-item {
		padding: 2em 0 0;
	}
	& .products_category {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 8px 0;
		margin-top: 8px;
	}
	& .products_category li {
		width: 100%;
	}
	& .products_category li.half {
		width: calc(50% - 4px);
	}
	& .products_category li a {
		display: flex;
		background: #F8F5F0;
		padding: 1em;
		line-height: 2;
		font-family: .9rem;
		position: relative;
		&::after {
			position: absolute;
			content: "\e315";
			display: inline-block;
			right: 6px;
			font-family: "Material Symbols Outlined";
			font-weight: 400;
		}
	}
	& .shop-link .rakuten {
		margin-top: 12px;
		& a {
			display: inline-block;
			width: 100%;
			text-align: center;
			border-radius: 15px;
			background: #BF0000;
		}
		& img {
			height: 60px;
			object-fit: contain;
		}
	}
	& .shop-link .yahoo {
		justify-content: center;
		text-align: center;
		& a {
			display: block;
			padding: 12px;
		}
		& img {
			width: 60%;
			max-height: 40px;
			margin-bottom: 12px;
			object-fit: contain;
		}
		& p {
			color: #33A8D0;
			font-size: 0.9rem;
			word-break: keep-all;
			overflow-wrap: break-word;
		}
	}
}


/* ハンバーガーメニュー【開】 */
.hamburger-inner {
	transition: all 0.3s;
}
.hamburger-inner.active {
	pointer-events: auto;
	transform: translateX(0);
	z-index: 100000;
}

/* pagescrolltop */
#pagescrolltop {
	display: block;
	position: fixed;
	width: 60px;
	height: 40px;
	bottom: 68px;
	right: 0;
	border-radius: 8px 0 0 8px;
	background: #fff;
	border: 1px solid var(--red);
	border-right: none;
	z-index: 10;
	cursor: pointer;
	opacity: 0.9;
	&::after {
		display: block;
		content: "\e315";
		width: 40px;
		height: 40px;
		margin: 0 auto;
		font-family: "Material Symbols Outlined";
		font-size: 28px;
		transform: rotate(-90deg);
		text-align: center;
		color: var(--red);
	}
}

@media screen and (min-width: 768px) {
header {
	& .header-top.sp-only {
		display: none;
	}
	& .header-bottom {
		max-width: 1800px;
		height: auto;
		margin: 0 auto;
		border: none;
	}
	& .header-bottom a {
		gap: 20px;
	}
	& .header-bottom h1 {
		display: block;
		margin: 0;
		margin-left: 24px;
		padding: 12px;
	}
	& .header-bottom h1 img {
		width: 110px;
	}
	& .header-bottom h1 img.pc-only {
		height: 28px;
		width: auto;
	}
	& .header-bottom .menu {
		& ul {
			height: 52px;
		}
		& li {
			width: 20%;
		}
		& a {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& li#menu-product {
			position: relative;
		}
		& ul#menu-product-aco {
			position: absolute;
			display: none;
			width: 200px;
			height: auto;
			left: 30%;
			background: #fff;
			border: 1px solid var(--border);
			border-radius: 0.375rem;
			opacity: 0.9;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
			font-weight: 500;
		}
		& ul#menu-product-aco li {
			width: 100%;
		}
		& ul#menu-product-aco a {
			display: inline-block;
			padding: 10px 15px;
			opacity: 1;
		}
		& li#menu-product > a::after {
			position: absolute;
			content: "\e313";
			display: inline-block;
			left: calc(50% + 52px);
			bottom: 50%;
			transform: translateY(50%);
			font-family: "Material Symbols Outlined";
			font-size: 20px;
		}
		& li#menu-product:hover ul#menu-product-aco,
		& li#menu-product:focus-within ul#menu-product-aco {
			display: block;
		}
	}
}
#pagescrolltop {
	bottom: 28px;
}
}

/* フッター */
footer {
	margin-top: 30px;
	background: #fff;
	border-top: 1px solid var(--border);
}
.footer-wrapper {
	flex-flow: column;
	justify-content: start;
	align-items: start;
}
.footer-top {
	width: 100%;
	padding: 40px 0;
}
.footer-top .link {
	margin-bottom: 1rem;
	& li {
		width: 100%;
	}
	& li a {
		display: inline-block;
		padding: 15px 0;
		color: var(--black);
		font-family: "Noto Serif JP", serif;
		font-size: 16px;
	}
}
.footer-top .icon {
	gap: 20px;
}
.footer-bottom {
	position: static;
	padding-left: 0;
	border-left: none;
	border-top: 1px solid #E5E5E5;
	padding: 40px 0;
}
footer small {
	display: inline-block;
	width: 100%;
	padding: 40px 0;
	text-align: center;
	border-top: 1px solid var(--border);
	color: var(--black);
	font-size: 10px;
	font-family: var(--noto-serif);
}

@media screen and (min-width: 768px) {
footer {
	& .footer-wrapper {
		flex-flow: row;
		align-items: stretch;
	}
	& .footer-top {
		width: 50%;
	}
	& .footer-bottom {
		width: 50%;
		padding-left: 24px;
		border-top: none;
		border-left: 1px solid var(--border);
	}
}
}

/* slick1 */
.slick1 {
	& img {
		width: 100%;
		height: auto;
	}
	& .slick-prev:before,
	& .slick-next:before {
		position: absolute;
		content: '\e315';
		top: 50%;
		transform: translateY(-50%);
		font-size: 100px;
		font-family: "Material Symbols Outlined";
		font-weight: 300;
		color: #737271;
	}
	& .slick-prev {
		left: 10%;
		z-index: 10;
		transform: translateY(-50%) scale(-1, 1);
	}
	& .slick-next {
		right: 10%;
	}
	& .slick-slide img {
		opacity: 1;
		transition: all .5s;
	}
}

/* slick2 */
.slick2 {
	margin-top: 120px;
	& .slick-prev:before,
	& .slick-next:before {
		position: absolute;
		content: '\e315';
		top: 50%;
		transform: translateY(-50%);
		font-size: 68px;
		font-family: "Material Symbols Outlined";
		font-weight: 300;
		color: #737271;
	}
	& .slick-prev {
		left: 20%;
		z-index: 10;
		&::before {
			transform: translateY(-50%) scale(-1, 1);
		}
	}
	& .slick-next {
		right: 25%;
	}
	& .slick-slide img {
		opacity: 1;
		transition: all .5s;
	}
	& .slick-slide.slick-center img {
		opacity: 1;
	}
}

/* slick【PC】 */
@media screen and (min-width: 768px) {
.slick1 {
	& .slick-slide img {
		opacity: 0.5;
	}
	& .slick-slide.slick-center img {
		opacity: 1;
	}
}
.slick2 {
	margin-top: 200px;
	& .slick-slide img {
		opacity: 0.5;
	}
	& .slick-slide.slick-center img {
		opacity: 1;
	}
}
}

/* button_ec.php【SP】 */
.button-ec {
	position: fixed;
	width: 90%;
	height: 268px;
	left: 50%;
	transform: translateX(-50%);
	border: 1px solid #CE433C;
	border-radius: 12px 12px 0 0;
	background: var(--red);
	transition: all .3s;
	z-index: 10;
	& .nav {
		justify-content: center;
		height: 60px;
		gap: 20px;
		cursor: pointer;
	}
	& .nav img {
		width: 24px;
		height: auto;
	}
	& button {
		position: absolute;
		top: 5px;
		right: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.5em;
		height: 1.5em;
		border-radius: 50%;
		background: #fff;
		cursor: pointer;
	}
	& button i {
		color: var(--red);
	}
	& ul {
		flex-flow: column;
		gap: 12px;
		margin-bottom: 20px;
	}
	& p.title {
		align-content: center;
		height: 60px;
		color: #fff;
		font-weight: 500;
	}
	& li {
		width: 90%;
		height: 88px;
		margin: 0 auto;
		background: #fff;
	}
	& li a {
		flex-flow: column;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	& .rakuten img {
		width: auto;
		height: 80px;
	}
	& .yahoo a {
		gap: 6px;
	}
	& .yahoo img {
		width: 65%;
		max-width: 260px;
		height: auto;
	}
	& .yahoo p {
		font-size: .8rem;
		color: #33A8D0;
		word-break: keep-all;
		overflow-wrap: break-word;
		text-align: center;
	}
}
/* 閉じてるとき */
.button-ec.close {
	bottom: -208px;
	& button {
		display: none;
	}
}
.button-ec.close:focus {
	border: 3px solid #33A8D0;
}
/* 開いてるとき */
.button-ec.open {
	bottom: 0;
	& button {
		display: flex;
	}
}


@media screen and (min-width: 768px) {
.button-ec {
	display: flex;
	width: 364px;
	height: 300px;
	right: -304px;
	left: inherit;
	bottom: -10%;
	transform: translateY(50%);
	border-radius: 12px 0 0 12px;
	& .nav {
		flex-flow: column;
		width: 60px;
		height: 100%;
		gap: 0;
	}
	& p.title {
		height: 60%;
		writing-mode: vertical-rl;
		text-align: center;
	}
	& ul {
		justify-content: center;
		margin-bottom: 0;
	}
	& li {
		width: 280px;
		height: 100px;
		margin-right: 12px;
	}
	& .rakuten img {
		height: 92px;
	}
	& .yahoo a {
		gap: 12px;
	}
	& .yahoo p {
		line-height: 1.2;
	}
	& .yahoo img {
		width: 75%;
	}
}
.button-ec.close {
	bottom: -60px;
	transform: translateY(-50%);
}
.button-ec.open {
	right: 0;
	bottom: -60px;
	transform: translateY(-50%);
}
}