@charset "utf-8";

/* 非表示
====================================================================================================*/
header .sm, footer .sm, #sidenavi .sm,
header .sm-tab, footer .sm-tab, #sidenavi .sm-tab {
	display: block;
}
header .tab, footer .tab, #sidenavi .tab,
header .pc, footer .pc, #sidenavi .pc,
header .tab-pc, footer .tab-pc, #sidenavi .tab-pc {
	display: none;
}
/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
	header .sm, footer .sm, #sidenavi .sm {
		display: none;
	}
	header .tab, footer .tab, #sidenavi .tab,
	header .sm-tab, footer .sm-tab, #sidenavi .sm-tab,
	header .tab-pc, footer .tab-pc, #sidenavi .tab-pc {
		display: block;
	}
}
/* PC */
@media (min-width: 1024px) {
	header .sm, footer .sm, #sidenavi .sm,
	header .sm-tab, footer .sm-tab, #sidenavi .sm-tab {
		display: none;
	}
	header .pc, footer .pc, #sidenavi .pc,
	header .tab-pc, footer .tab-pc, #sidenavi .tab-pc {
		display: block;
	}
}

/* header
====================================================================================================*/
header {
	box-shadow: 0px 5px 8px rgb(0,0,0,0.1);
}
@media (min-width: 768px) {
	header {
		box-shadow: 0px 0px 10px rgb(0,0,0,0.2);
	}
}
/* header_top
==============================*/
/* タブレット・PC */
@media (min-width: 768px) {
	#header_top {
		display: flex;
		justify-content: space-between;
		gap: 10px;
		background-color: var(--brown_d);
		padding: 6px 10px;
	}
	#header_top > p {
		color: var(--white);
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#header_top > div {
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	#header_top > div > a {
		width: 200px;
		height: 50px;
		padding: 8px 5px 5px;
		color: var(--white);
		font-weight: bold;
		font-size: 24px;
		text-align: center;
		line-height: 1;
		background-color: var(--blue_d);
		border-radius: 0 0 8px 8px;
		position: absolute;
		top: -10px;
		left: 0;
		z-index: 201;
	}
	#header_top > div > a::before, #header_top > div > a::after {
		content: "";
		display: block;
		width: 40px;
		height: 1px;
		background-color: var(--white);
		position: absolute;
		top: 13px;
	}
	#header_top > div > a::before {
		left: 10px;
	}
	#header_top > div > a::after {
		right: 10px;
	}
	#header_top > div > a span {
		display: block;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 1px;
	}
	#header_top > div ul {
		display: flex;
		gap: 20px;
		position: relative;
	}
	#header_top > div ul a {
		color: var(--white);
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
	}
	#header_top > div ul a:hover {
		text-decoration: underline;
	}
}
/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
	#header_top > div {
		width: 100%;
		justify-content: end;
	}
}
/* PC */
@media (min-width: 1024px) {
	#header_top > div ul {
		margin-left: 220px;
	}
	#header_top > div > a:hover {
		background-color: #4A94E6;
	}
}
/* header_upper
==============================*/
#header_upper {
	background-color: var(--white);
	padding: 12px 10px 10px;
  left: 0;
  right: 0;
  top: 0;
	z-index: 200;
	transition: box-shadow .1s ease;
}
.cart#step2 #header_upper, .cart#step3 #header_upper {
	position: static;
}
#header_upper.shadow {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
#header_upper > div {
	width: clamp(300px, 100%, 1300px);
	margin: 0 auto;
	position: relative;
}
#upper_inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
#upper_inner > div {
	display: flex;
	align-items: center;
	gap: 10px;
}
#upper_inner > div:last-child {
	justify-content: end;
	gap: 8px;
}
#logo1 img {
	width: clamp(100px, 30vh, 200px);
}
#header_mypage {
	width: 50px;
}
#header_guest, #header_cart, #sp_menu_btn {
	width: 40px;
}
#header_mypage img, #header_login img, #header_cart img, #sp_menu_btn img {
	width: 30px;
	height: auto;
	margin: 0 auto;
}
#header_cart img {
	margin-left: 0;
}
#upper_inner .icon_title {
	display: block;
	width: 100%;
	font-size: 10px;
	font-weight: bold;
	white-space: nowrap;
	text-align: center;
	color: var(--brown_d);
}
#header_cart {
	position: relative;
}
#cart_in {
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: var(--white);
	background-color: var(--red);
	border-radius: 50%;
	position: absolute;
	top: -3px;
	right: 0px;
}
header [id^="gForm"], header [id^="searchForm_box"]:not(#searchForm_box, #searchForm_box_submit), header [id^="searchForm_board"]:not(#searchForm_board, #searchForm_board_submit) {
	background-color: var(--white);
	border: solid 2px var(--orange_d);
	border-radius: 5px;
}
header [id^="gForm"] {
	padding-right: 40px;
	position: relative;
}
header [id^="gFrame"] {
	border: none;
	width: 100%;
	outline: none;
	height: 40px;
}
header [id^="gKensaku"], #searchForm_box_submit, #searchForm_board_submit {
	text-indent: 50px;
	background: var(--orange_d) url(/img/navigation/icon_search.svg) no-repeat center center / 30px 30px;
	width: 40px;
	height: 40px;
}
header [id^="gKensaku"] {
	border-radius: 0 3px 3px 0;
	position: absolute;
	top: 0;
	right: 0;
}
#searchForm_box_submit, #searchForm_board_submit {
	border-radius: 5px;
	margin-left: auto;
}
#innerCart {
	display: none;
}
/* タブレット・PC */
@media (min-width: 768px) {
	#upper_inner {
		gap: 20px;
	}
	#upper_inner > div:last-child {
		gap: 10px;
	}
	#gForm {
		padding-right: 50px;
		flex: 1;
	}
	#gFrame {
		height: 46px;
	}
	#gKensaku {
		width: 50px;
		height: 46px;
		background-size: 36px 36px;
	}
	/* 検索サジェスト(#suggest) */
	#gForm [id^="suggest"] {
		background-color: var(--white);
		border: 1px solid var(--gray);
		min-width: 300px;
		max-height: 600px;
		z-index: 201;
		box-shadow: 1px 1px 5px rgb(0, 0, 0, 0.5);
		overflow-y: scroll;
		position: absolute;
	}
	#gForm [id^="suggest"] > div {
		padding: 5px;
		overflow: hidden;
		border-bottom: 1px solid var(--gray);
	}
	#gForm [id^="suggest"] > div:has(.item_no) {
		padding-left: 115px;
		position: relative;
		min-height: 110px;
	}
	#gForm [id^="suggest"] > div:has(.item_no) img {
		position: absolute;
		top: 5px;
		left: 5px;
	}
	#gForm [id^="suggest"] img {
		display: inline-block;
		vertical-align: middle;
	}
	#gForm [id^="suggest"] > div:nth-child(2n+1) {
		background-color: var(--gray_l);
	}
	#gForm [id^="suggest"] > div:nth-child(2n) {
		background-color: var(--white);
	}
	#gForm [id^="suggest"] .item_no {
		font-size: 14px;
		color: var(--brown_d);
		padding: 2px 5px;
		background-color: var(--white);
		border: solid 1px var(--brown_d);
		border-radius: 5px;
	}
	#gForm [id^="suggest"] .item_name {
		font-size: 15px;
		color: var(--blue_l);
		text-decoration: underline;
		padding-left: 5px;
	}
	#gForm [id^="suggest"] .item_text {
		display: block;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 6px 0;
		font-size: 15px;
	}
	#gForm [class^="item_icon"] {
		display: inline-block;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		color: var(--white);
		border-radius: 5px;
		padding: 3px 5px;
		margin-right: 5px;
		margin-bottom: 5px;
	}
	#gForm .item_icon_mail {
		background: var(--post);
	}
	#gForm .item_icon50 {
		background: #80AF19;
	}
	#gForm .item_icon60 {
		background: var(--s60);
	}
	#gForm .item_icon80 {
		background: var(--s80);
	}
	#gForm .item_icon100 {
		background: var(--s100);
	}
	#gForm .item_icon120 {
		background: var(--s120);
	}
	#gForm .item_icon140 {
		background: var(--s140);
	}
	#gForm .item_icon160 {
		background: var(--s160);
	}
	#gForm .item_icon170 {
		background: var(--s170);
	}
	#gForm .item_icon180 {
		background: var(--s180);
	}
	#gForm .item_icon200, #gForm .item_icon220, #gForm .item_icon240, #gForm .item_icon260, #gForm .item_icon280 {
		background: var(--s200);
	}
	#gForm .item_iconsoku {
		color: var(--red);
		background: var(--white);
		border: solid 2px var(--red);
		font-weight: bold;
		padding: 2px 5px;
	}
	#gForm [id^="suggest"] .item_size {
		font-size: 15px;
		font-weight: bold;
		color: var(--brown_d);
		margin-right: 5px;
		margin-bottom: 5px;
	}
	#gForm .item_price {
		color: var(--red);
		font-size: 15px;
		font-weight: bold;
	}
}
/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
	#upper_inner > div:first-child {
		width: calc(100% - 140px);
		gap: 20px;
	}
	#logo1 img {
		width: 250px;
	}
	#header_mypage img, #header_login img, #header_cart img, #sp_menu_btn img {
		width: 35px;
	}
	#cart_in {
		top: 0px;
	}
}
/* PC */
@media (min-width: 1024px) {
	#header_upper {
		padding: 15px 10px 12px;
	}
	#gForm {
		margin-left: 10px;
	}
	#upper_inner > div:first-child {
		width: calc(100% - 360px);
	}
	#logo1 img {
		width: 300px;
	}
	#logo2 img {
		width: 100px;
	}
	#logo1:hover, #logo2:hover {
		opacity: 0.8;
	}
	#header_mypage, #header_guest {
		padding: 0;
		width: 300px;
	}
	#header_mypage > a {
		font-size: 12px;
		width: 100%;
	}
	#header_mypage > a > ul {
		display: flex;
		justify-content: space-between;
	}
	#header_mypage > a > ul li {
		color: var(--brown_d);
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#header_mypage > a > ul li:first-child {
		width: calc(100% - 60px);
	}
	.user_point {
		color: var(--red);
		font-weight: bold;
	}
	#header_mypage > ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-content: space-between;
		gap: 10px;
		margin-top: 3px;
	}
	#header_mypage > ul li {
		color: var(--brown_d);
		font-size: 13px;
		font-weight: bold;
		text-align: center;
		background-color: var(--beige_l);
		border: solid 1px var(--brown_l);
		border-radius: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#header_mypage > ul li a {
		display: block;
		font-weight: bold;
		padding: 4px 0;
	}
	#header_cart {
		width: 50px;
		background-color: var(--brown_l);
		border-radius: 5px;
		padding: 8px 7px 6px;
	}
	#header_cart img {
		width: 36px;
		height: 36px;
	}
	#header_mypage > ul li, #header_cart, #header_login {
		box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
		transition: 0.2s;
	}
	#header_mypage > ul li:hover, #header_cart:hover, #header_login:hover {
		transform: translateY(2px);
		box-shadow: none;
		transition: 0.2s;
	}
	#header_beginner {
		transition: 0.2s;
	}
	#header_beginner img {
		filter: drop-shadow(1px 1px 2px rgb(0, 0, 0, 0.2));
	}
	#header_beginner:hover {
		transform: translateY(2px);
		transition: 0.2s;
	}
	#header_beginner:hover img {
		filter: none;
	}
	#header_guest {
		display: flex;
		gap: 10px;
	}
	#header_login {
		width: auto;
		height: 50px;
    color: var(--white);
    background: transparent linear-gradient(180deg, #FFD750 0%, var(--orange_d) 100%) 0% 0% no-repeat padding-box;
    border: 1px solid var(--orange_l);
		font-weight: bold;
    min-width: 10%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px 0 45px;
    border-radius: 5px;
		position: relative;
		flex: 1;
	}
	#header_login::before {
		content: "";
		display: block;
		width: 30px;
		height: 30px;
		background: url(/img/navigation/icon_mypage-white.svg) no-repeat center / 30px 30px;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	#header_login img {
		width: 30px;
		height: 30px;
	}
	#header_login span {
		font-size: 15px;
		font-weight: bold;
		line-height: 1.2;
	}
	#header_login span span {
		display: block;
		font-size: 13px;
	}
	#cart_in {
		width: 24px;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
		top: -5px;
	}
	#upper_inner .icon_title {
		display: none;
	}
	/* ページ内カート(#innerCart)
	==============================*/
	#innerCart {
		width: 650px;
		background: var(--white);
		border: solid 5px var(--orange_d);
		border-radius: 5px;
		position: absolute;
		top: 70px;
		right: 0px;
		box-shadow: 2px 2px 10px rgb(0, 0, 0, 0.6);
		z-index: 202;
	}
	#innerCart:after {
		content: "";
		border: solid 16px transparent;
		border-bottom: solid 20px var(--orange_d);
		position: absolute;
		top: -40px;
		right: 3px;
	}
	#innerCart.open {
		display: block;
	}
	#innerCart h3 {
		color: var(--white);
		font-size: 16px;
		background: var(--orange_d);
		padding: 5px 15px;
		margin-bottom: 0;
	}
	#innerCartBox .deleteBtn:hover, #innerCartSubmit:hover {
		transform: translateY(2px);
		box-shadow: none;
		transition: 0.2s;
	}
	#innerCart table {
		width: 100%;
		border-collapse: separate;
		padding: 0 5px;
	}
	#innerCart tr + tr th, #innerCart tr + tr td {
		border-top: dashed 1px var(--gray);
	}
	#innerCart tr + tr:has(td[rowspan]) th, #innerCart tr + tr:has(td[rowspan]) td {
		border-top: solid 1px var(--gray);
	}
	#innerCart th, #innerCart td {
		border: none;
		text-align: left;
		vertical-align: top;
	}
	#innerCart td {
		vertical-align: top;
	}
	/* #innerCartBox */
	#innerCartBox {
		display: block;
		min-height: 120px;
		max-height: 250px;
		overflow: auto;
		background: url(../img/2017-top-loading.gif) no-repeat center top 20px / 80px 80px;
	}
	#innerCartBox table {
		min-height: 120px;
		background-color: var(--white);
	}
	#innerCartBox tr {
		position: relative;
	}
	#innerCartBox th {
		width: 270px;
		background-color: var(--white);
	}
	#innerCartBox th > a {
		display: block;
		width: 60px;
		height: 60px;
		float: left;
		margin-bottom: 25px;
	}
	#innerCartBox img {
		width: 100%;
		height: 100%;
	}
	#innerCartBox .innerID {
		float: right;
		width: 180px;
		font-size: 14px;
		line-height: 1;
		font-weight: bold;
		margin-bottom: 5px;
	}
	#innerCartBox .innerTitle {
		float: right;
		width: 180px;
	}
	#innerCartBox .innerTitle a {
		display: block;
		color: var(--blue_l);
		font-size: 15px;
	}
	#innerCartBox .innerTitle a:hover {
		text-decoration: underline;
	}
	#innerCartBox td:has(.lot) {
		padding: 10px 5px;
	}
	#innerCartBox .lot, #innerCart .price {
		display: block;
	}
	#innerCartBox .price {
		font-weight: bold;
	}
	#innerCartBox td:has(.deleteBtn) {
		padding: 0;
	}
	#innerCartBox .deleteBtn {
		width: 60px;
		padding: 4px 0;
		color: var(--gray_d);
		background: transparent linear-gradient(180deg, var(--white) 0%, #DEDEDE 100%, var(--gray_l) 100%) 0% 0% no-repeat padding-box;
		border: 1px solid var(--gray);
		border-radius: 5px;
		font-size: 13px;
		font-weight: bold;
		text-align: center;
		line-height: 1;
		box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
		transition: 0.2s;
		cursor: pointer;
		position: absolute;
		left: 10px;
		top: 74px;
	}
	#innerCartBox td:has(.soryo-detail) {
		display: flex;
		justify-content: end;
	}
	#innerCartBox .soryo-detail, #innerCartBox .soryo-img {
		background-color: var(--gray_l);
		padding: 5px 8px;
	}
	#innerCartBox .soryo-detail {
		font-size: 15px;
		width: 140px;
		padding-right: 5px;
		border-radius: 5px 0 0 5px;
	}
	#innerCartBox .soryo-img {
		padding-left: 5px;
		border-radius: 0 5px 5px 0;
	}
	#innerCartBox .soryo-bar-max {
		display: block;
		width: 100px;
		height: 27px;
		border: solid 1px var(--brown_l);
		background-color: var(--white);
		position: relative;
	}
	#innerCartBox .soryo-bar {
		display: block;
		text-align: center;
		line-height: 26px;
		font-weight: bold;
		color: var(--brown_d);
		background: var(--brown_l);
		position: absolute;
		left: 0;
	}
	/* #innerCartGokeiBox */
	#innerCartGokeiBox {
		border-top: solid 5px var(--orange_d);
	}
	#innerCartGokeiBox th, #innerCartGokeiBox td {
		padding: 8px 10px;
	}
	#innerCartGokeiBox th {
		width: 450px;
		background-color: var(--white);
	}
	#innerCartGokeiBox td {
		text-align: right;
	}
	#innerCartGokeiBox select {
		margin-right: 5px;
		appearance: auto;
	}
	#innerCartGokei th, #innerCartGokei td {
		font-size: 20px;
		font-weight: bold;
		padding-bottom: 0;
	}
	#innerCart > p {
		text-align: center;
		margin: 10px 0;
	}
	#innerCartSubmit {
		display: inline-block;
		width: 180px;
		height: 40px;
		padding: 0 10px;
		background: var(--red);
		border: 1px solid var(--red);
		border-radius: 5px;
		box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
		color: var(--white);
		line-height: 40px;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		transition: 0.2s;
		position: relative;
		cursor: pointer;
	}
	#innerCart a:has(#innerCartSubmit):hover {
		opacity: 1;
	}
	/* 個人の場合の送料 */
	#innerCartGokeiBox label:has(.link) {
		display: block;
		margin-top: 5px;
	}
	#innerCartGokeiBox .link {
		color: var(--blue_l);
		cursor: pointer;
	}
	#innerCartGokeiBox .link:hover, #innerCartGokeiBox .message_box a:hover {
		text-decoration: underline;
	}
	#innerCartGokeiBox input#individual {
		display: none;
	}
	#innerCartGokeiBox .message_box {
		height: 0;
		padding: 0;
		font-size: 15px;
		background-color: var(--pink_d);
		border-radius: 5px;
		overflow: hidden;
		opacity: 0;
		transition: 0.8s;
	}
	#innerCartGokeiBox .message_box a {
		color: var(--blue_l);
	}
	#innerCartGokeiBox input#individual:checked ~ .message_box {
		height: 105px;
		padding: 8px;
		opacity: 1;
	}
}
/* header_lower
==============================*/
#header_lower {
	overflow-x: auto;
	background-color: var(--white);
	padding-bottom: 15px;
	margin: 0 10px 0;
}
#header_lower .scroll {
	width: clamp(300px, 100%, 1300px);
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 0 auto;
}
#category_menuBox, #order_menuBox {
	display: grid;
	border-radius: 10px;
	position: relative;
}
#category_menuBox {
	grid-template-columns: 1fr minmax(86px, 1fr) minmax(98px, 1fr) 1fr minmax(96px, 1fr) minmax(116px, 1fr);
	background-color: var(--beige_l);
	flex: 1;
}
#order_menuBox {
	grid-template-columns: 1fr minmax(86px, 1fr);
	background-color: var(--gray_l);
}
#order_menuBox::before, #jp-link::before {
	content: '';
	display: block;
	width: 1px;
	height: 70px;
	border-right: dashed 2px #C4C4C4;
	position: absolute;
	top: 0;
	left: -10px;
}
#category_menuBox li, #order_menuBox li {
	position: relative;
}
#category_menuBox li:nth-of-type(n+2)::after, #order_menuBox li:nth-of-type(n+2)::after {
	content: '';
	display: block;
	width: 1px;
	height: 50px;
	position: absolute;
	left: 0;
	top: 10px;
}
#category_menuBox li:nth-of-type(n+2)::after {
	background-color: var(--brown_l);
}
#order_menuBox li:nth-of-type(n+2)::after {
	background-color: var(--gray);
}
#category_menuBox a, #order_menuBox a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 100%;
	overflow: hidden;
	padding: 5px 7px 8px;
	position: relative;
}
#category_menuBox li a span, #order_menuBox a span {
	font-size: 13px;
	font-weight: bold;
	color: var(--brown_d);
	line-height: 15px;
	white-space: nowrap;
}
#category_menuBox li a img, #order_menuBox a img {
	width: auto;
	height: 40px;
	max-width: none;
}
#order_menuBox li:first-child a::after {
	display: block;
	content: '';
	width: calc(100% - 20px);
	height: 3px;
	border-radius: 5px;
	position: absolute;
	left: 10px;
	bottom: 5px;
	background-image: linear-gradient(90deg, limegreen,cyan,magenta,yellow);
}
:is(#category_menuBox, #order_menuBox) li {
  background-repeat: no-repeat;
  background-position: center 4px;
  background-size: 100px;
}
#jp-link {
	display: block;
	position: relative;
	padding-right: 2px;
}
#jp-link img {
	box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
	transition: 0.2s;
	border-radius: 8px;
}
#jp-link:hover img {
	transform: translateY(2px);
	box-shadow: 0px 0px 1px rgb(0, 0, 0, 0.3);
	transition: 0.2s;
}
#jp-link img {
	max-width: none;
}
/* タブレット・PC */
@media (min-width: 768px) {
	#header_lower {
		margin: 0;
	}
}
/* PC */
@media (min-width: 1024px) {
	#category_menuBox {
		grid-template-columns: 1.2fr 1.2fr minmax(96px, 1fr) minmax(86px, 1fr) minmax(98px, 1fr) minmax(116px, 1fr);
	}
	#category_menuBox a:hover::after, #order_menuBox li:last-child a:hover::after {
		display: block;
		content: '';
		width: calc(100% - 20px);
		height: 3px;
		border-radius: 5px;
		position: absolute;
		left: 10px;
		bottom: 5px;
		-webkit-transition: .3s;
		transition: .3s;
	}
	#category_menuBox a:hover::after {
		background-color: var(--orange_d);
	}
	#order_menuBox li:last-child a:hover::after {
		background-color: var(--gray);
	}
	#category_menuBox li:nth-of-type(1) {
		order: 1;
	}
	#category_menuBox li:nth-of-type(2) {
		order: 4;
	}
	#category_menuBox li:nth-of-type(3) {
		order: 5;
	}
	#category_menuBox li:nth-of-type(4) {
		order: 2;
	}
	#category_menuBox li:nth-of-type(5) {
		order: 3;
	}
	#category_menuBox li:nth-of-type(6) {
		order: 6;
	}
}
/* sub_menu
==============================*/
/* PC */
@media (min-width: 1024px) {
	#sub_menu {
		width: 100%;
		max-width: 1300px;
		margin: 0 auto;
		position: absolute;
		top: 200px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 199;
	}
	#sub_menu > ul, #sub_menu > div {
		padding: 20px;
		background-color: var(--white);
		border-radius: 8px;
		box-shadow: 0px 0px 10px rgb(0,0,0,0.2);
		transform: translateZ(1px);
		margin: 0 10px;
		display: grid;
		gap: 0px 20px;
	}
	#sub_menu > ul > li > span, #sub_menu > ul > li > a, #sub_menu > div > a {
		color: var(--brown_d);
		font-size: 18px;
		font-weight: bold;
		border-bottom: solid 2px var(--brown_l);
		display: block;
		margin-bottom: 10px;
		position: relative;
	}
	#sub_menu .more_right {
		position: absolute;
		top: 0;
		right: 0;
		font-weight: normal;
	}
	/* #discount_listBox */
	#discount_listBox {
		grid-template-columns: 1fr 2fr 2fr;
	}
	#discount_listBox ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 70px);
		gap: 10px;
	}
	#discount_listBox ul li {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		line-height: 1;
		border: solid 1px var(--gray);
		border-radius: 5px;
		box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
		transition: 0.2s;
		min-width: 0;
	}
	#discount_listBox li:nth-of-type(1) ul {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 70px);
	}
	#discount_listBox li:nth-of-type(1) li {
		color: var(--red);
	}
	#discount_listBox li:nth-of-type(2) li {
		font-size: 25px;
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(1) {
		color: var(--s50);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(2) {
		color: var(--s60);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(3) {
		color: var(--s80);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(4) {
		color: var(--s100);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(5) {
		color: var(--s120);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(6) {
		color: var(--s140);
	}
	#discount_listBox li:nth-of-type(3) li:not(:last-child) {
		color: var(--white);
	}
	#discount_listBox li:nth-of-type(3) li:nth-of-type(1), #discount_listBox li:nth-of-type(3) li:nth-of-type(5) {
		background-color: var(--yamato);
	}
	#discount_listBox li:nth-of-type(3) li:nth-of-type(2) {
		background-color: var(--white);
	}
	#discount_listBox li:nth-of-type(3) li:nth-of-type(3), #discount_listBox li:nth-of-type(3) li:nth-of-type(4) {
		background-color: var(--post);
	}
	#discount_listBox li:nth-of-type(3) li:last-child {
		color: var(--gray_d);
	}
	#discount_listBox li li:hover {
		transform: translateY(2px);
		box-shadow: none;
		transition: 0.2s;
	}
	#discount_listBox li a {
		display: block;
		padding: 10px;
		font-weight: bold;
	}
	#discount_listBox li:nth-of-type(2) li a {
		padding: 7px 10px 10px;
	}
	#discount_listBox li:nth-of-type(3) li:not(:last-child) a {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}
	#discount_listBox li:nth-of-type(3) li:nth-of-type(1) a, #discount_listBox li:nth-of-type(3) li:nth-of-type(2) a, #discount_listBox li:nth-of-type(3) li:nth-of-type(4) a {
		padding: 5px 10px 10px;
	}
	#discount_listBox li:nth-of-type(3) li:nth-of-type(1) img, #discount_listBox li:nth-of-type(3) li:nth-of-type(2) img, #discount_listBox li:nth-of-type(3) li:nth-of-type(4) img {
		height: 30px;
	}
	#discount_listBox li:nth-of-type(2) li span:first-child {
		font-size: 16px;
		font-weight: bold;
		vertical-align: middle;
	}
	#discount_listBox li li span:not(li:nth-of-type(2) li span:first-child) {
		display: block;
		padding: 5px 0;
		font-size: 13px;
		font-weight: bold;
		border-radius: 3px;
		background-color: var(--white);
		white-space: nowrap;
		overflow: hidden;
	}
	#discount_listBox li:nth-of-type(1) li span {
		border: solid 1px var(--red);
		margin-top: 7px;
	}
	#discount_listBox li:nth-of-type(2) li span {
		margin-top: 3px;
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(1) span:last-child {
		border: solid 1px var(--s50);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(2) span:last-child {
		border: solid 1px var(--s60);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(3) span:last-child {
		border: solid 1px var(--s80);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(4) span:last-child {
		border: solid 1px var(--s100);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(5) span:last-child {
		border: solid 1px var(--s120);
	}
	#discount_listBox li:nth-of-type(2) li:nth-of-type(6) span:last-child {
		border: solid 1px var(--s140);
	}
	#discount_listBox li:nth-of-type(3) li:nth-of-type(1) span, #discount_listBox li:nth-of-type(3) li:nth-of-type(5) span {
		border: solid 1px var(--yamato);
		color: var(--yamato);
	}
	#discount_listBox li:nth-of-type(3) li:nth-of-type(2) span, #discount_listBox li:nth-of-type(3) li:nth-of-type(3) span, #discount_listBox li:nth-of-type(3) li:nth-of-type(4) span {
		border: solid 1px var(--post);
		color: var(--post);
	}
	#discount_listBox li:nth-of-type(3) li:last-child span {
		border: solid 1px var(--gray_d);
		margin-top: 7px;
	}
	/* category_listBox */
	#category_listBox {
		grid-template-columns: repeat(2, 1fr);
	}
	#category_listBox ul {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(9, 1fr);
		gap: 10px;
		color: var(--brown_d);
	}
	#category_listBox ul a:hover {
		text-decoration: underline;
	}
	#category_listBox ul li {
		padding-left: 45px;
		height: 36px;
		line-height: 36px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		position: relative;
	}
	#category_listBox ul li::before {
		content: "";
		display: block;
		width: 36px;
		height: 36px;
		position: absolute;
		left: 0;
		top: 0;
		background-image: url(/img/navigation/thumbnail_category_all.jpg);
		background-repeat: no-repeat;
		background-size: auto;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(1)::before {
		background-position: 0px 0px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(2)::before {
		background-position: -46px 0px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(3)::before {
		background-position: -92px 0px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(4)::before {
		background-position: -138px 0px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(5)::before {
		background-position: -184px 0px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(6)::before {
		background-position: -230px 0px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(7)::before {
		background-position: -276px 0px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(8)::before {
		background-position: -322px 0px;
		display: none;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(9)::before {
		background-position: -368px 0px;
		display: none;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(10)::before {
		background-position: 0px -92px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(11)::before {
		background-position: -46px -92px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(12)::before {
		background-position: -92px -92px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(13)::before {
		background-position: -138px -92px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(14)::before {
		background-position: -184px -92px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(15)::before {
		background-position: -230px -92px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(16)::before {
		background-position: -276px -92px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(17)::before {
		background-position: -322px -92px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(18)::before {
		background-position: -368px -92px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(n+19):nth-of-type(-n+20)::before {
		background-position: -46px -46px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(n+21):nth-of-type(-n+25)::before {
		background-position: 0px -46px;
	}
	#category_listBox li:nth-of-type(1) ul li:nth-of-type(n+26):nth-of-type(-n+27)::before {
		background-position: -92px -46px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(1)::before {
		background-position: 0px -138px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(2)::before {
		background-position: -46px -138px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(3)::before {
		background-position: -92px -138px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(4)::before {
		background-position: -138px -138px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(5)::before {
		background-position: -184px -138px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(6)::before {
		background-position: -230px -138px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(7)::before {
		background-position: -276px -138px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(8)::before {
		background-position: -322px -138px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(9)::before {
		background-position: -368px -138px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(10)::before {
		background-position: 0px -184px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(11)::before {
		background-position: -46px -184px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(12)::before {
		background-position: -92px -184px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(13)::before {
		background-position: -138px -184px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(14)::before {
		background-position: -184px -184px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(15)::before {
		background-position: -230px -184px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(16)::before {
		background-position: -276px -184px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(17)::before {
		background-position: -322px -184px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(18)::before {
		background-position: -368px -184px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(19)::before {
		background-position: 0px -230px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(20)::before {
		background-position: -46px -230px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(21)::before {
		background-position: -92px -230px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(22)::before {
		background-position: -138px -230px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(23)::before {
		background-position: -184px -230px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(24)::before {
		background-position: -230px -230px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(25)::before {
		background-position: -276px -230px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(26)::before {
		background-position: -322px -230px;
	}
	#category_listBox li:nth-of-type(2) ul li:nth-of-type(27)::before {
		background-position: -368px -230px;
	}
	/* #kansyo_listBox */
	#kansyo_listBox ul {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px ,1fr));
		gap: 10px;
	}
	#kansyo_listBox li {
		height: 70px;
		border: solid 1px var(--gray);
		border-radius: 5px;
		background-color: var(--white);
		position: relative;
		box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
		transition: 0.2s;
		overflow: hidden;
	}
	#kansyo_listBox li:hover {
		transform: translateY(2px);
		box-shadow: none;
		transition: 0.2s;
	}
	#kansyo_listBox li a {
		display: block;
		width: 100%;
		height: 100%;
		color: var(--brown_d);
		font-weight: bold;
		line-height: 70px;
		padding-left: 130px;
		position: relative;
	}
	#kansyo_listBox li a::after {
		content: "";
		display: block;
		width: 120px;
		height: 69px;
		border-radius: 5px 0 0 5px;
		position: absolute;
		top: 0;
		left: 0;
		background-image: url(/img/navigation/thumbnail_kansyo_all.jpg);
		background-repeat: no-repeat;
		background-size: auto;
	}
	#kansyo_listBox li:nth-of-type(1) a::after {
		background-position: 0px 0px;
	}
	#kansyo_listBox li:nth-of-type(2) a::after {
		background-position: -130px 0px;
	}
	#kansyo_listBox li:nth-of-type(3) a::after {
		background-position: -260px 0px;
	}
	#kansyo_listBox li:nth-of-type(4) a::after {
		background-position: -390px 0px;
	}
	#kansyo_listBox li:nth-of-type(5) a::after {
		background-position: -520px 0px;
	}
	#kansyo_listBox li:nth-of-type(6) a::after {
		background-position: -650px 0px;
	}
	#kansyo_listBox li:nth-of-type(7) a::after {
		background-position: 0px -80px;
	}
	#kansyo_listBox li:nth-of-type(8) a::after {
		background-position: -130px -80px;
	}
	#kansyo_listBox li:nth-of-type(9) a::after {
		background-position: -260px -80px;
	}
	#kansyo_listBox li:nth-of-type(10) a::after {
		background-position: -390px -80px;
	}
	#kansyo_listBox li:nth-of-type(11) a::after {
		background-position: -520px -80px;
	}
	#kansyo_listBox li:nth-of-type(12) a::after {
		background-position: -650px -80px;
	}
	/* #order_listBox */
	#order_listBox > ul {
		display: grid;
		gap: 10px
	}
	#order_listBox > ul > li {
		background-color: var(--white);
		border: solid 1px var(--gray);
		border-radius: 5px;
		position: relative;
		box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
		transition: 0.2s;
	}
	#order_listBox > ul:nth-of-type(1) li {
		border-radius: 0 5px 5px 5px;
	}
	#order_listBox > ul > li:hover {
		transform: translateY(2px);
		box-shadow: none;
		transition: 0.2s;
	}
	#order_listBox > ul > li a {
		display: block;
		height: 100%;
	}
	#order_listBox dt {
		line-height: 1.2;
		font-weight: bold;
		color: var(--brown_d);
	}
	#order_listBox dd {
		color: var(--brown_d);
		font-size: 15px;
	}
	#order_listBox > ul:nth-of-type(1) {
		grid-template-columns: 3fr 2fr;
		margin: 30px 0 10px;
	}
	#order_listBox > ul:nth-of-type(1) a {
		padding: 10px 10px 10px 130px;
		min-height: 120px;
		position: relative;
	}
	#order_listBox > ul:nth-of-type(1) > li a::before {
		content: "";
		display: block;
		width: 100px;
		height: 100px;
		position: absolute;
		top: 10px;
		left: 10px;
		background-image: url(/img/navigation/thumbnail_order_all.jpg);
		background-repeat: no-repeat;
		background-size: auto;
		border-radius: 5px;
	}
	#order_listBox > ul:nth-of-type(1) li:nth-of-type(1) a::before {
		background-position: 0px 0px;
	}
	#order_listBox > ul:nth-of-type(1) li:nth-of-type(2) a::before {
		background-position: -110px 0px;
	}
	#order_listBox > ul:nth-of-type(1) span {
		position: absolute;
		left: -1px;
		top: -30px;
		color: var(--white);
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		padding: 3px 0;
		width: 260px;
		border-radius: 5px 5px 0 0;
	}
	#order_listBox > ul:nth-of-type(1) li:nth-of-type(1) span {
		background-color: var(--red);
	}
	#order_listBox > ul:nth-of-type(1) li:nth-of-type(2) span {
		background-color: var(--blue_d);
	}
	#order_listBox > ul:nth-of-type(1) dt {
		font-size: 20px;
		margin-bottom: 5px;
	}
	#order_listBox > ul:nth-of-type(1) li:nth-of-type(1) ul {
		display: flex;
		gap: 8px;
		margin-top: 8px;
	}
	#order_listBox > ul:nth-of-type(1) li:nth-of-type(1) ul li {
		border: solid 2px var(--red);
		border-radius: 5px;
		background-color: var(--pink_l);
		color: var(--red);
		font-size: 14px;
		font-weight: bold;
		padding: 5px;
	}
	#order_listBox > ul:nth-of-type(2) {
		grid-template-columns: repeat(4, 1fr);
	}
	#order_listBox > ul:nth-of-type(2) a {
		padding: 10px;
	}
	#order_listBox > ul:nth-of-type(2) dt {
		font-size: 16px;
		margin-bottom: 10px;
	}
	#order_listBox > ul:nth-of-type(2) dd {
		padding-left: 70px;
		position: relative;
		background-repeat: no-repeat;
		background-position: top left;
		background-size: 65px;
		position: relative;
	}
	#order_listBox > ul:nth-of-type(2) dd::before {
		content: "";
		display: block;
		width: 65px;
		height: 65px;
		position: absolute;
		top: 0px;
		left: 0px;
		background-image: url(/img/navigation/thumbnail_order_all.jpg);
		background-repeat: no-repeat;
		background-size: auto;
		border-radius: 5px;
	}
	#order_listBox > ul:nth-of-type(2) li:nth-of-type(1) dd::before {
		background-position: 0px -110px;
	}
	#order_listBox > ul:nth-of-type(2) li:nth-of-type(2) dd::before {
		background-position: -75px -110px;
	}
	#order_listBox > ul:nth-of-type(2) li:nth-of-type(3) dd::before {
		background-position: -150px -110px;
	}
	#order_listBox > ul:nth-of-type(2) li:nth-of-type(4) dd::before {
		background-position: -225px -110px;
	}
	#order_listBox > ul:nth-of-type(2) li:nth-of-type(5) dd::before {
		background-position: -300px -110px;
	}
	#order_listBox > ul:nth-of-type(2) li:nth-of-type(6) dd::before {
		background-position: -375px -110px;
	}
	#order_listBox > ul:nth-of-type(2) li:nth-of-type(7) dd::before {
		background-position: -450px -110px;
	}
	#order_listBox > ul:nth-of-type(2) li:nth-of-type(8) dd::before {
		background-position: -525px -110px;
	}
}
/* sp_nav
==============================*/
body.is-locked {
  position: fixed;
  overflow: hidden;
  width: 100%;
	left: 0;
  right: 0;
}
#sp_menu button:focus, #sp_menu_btn:focus {
  outline: none;
}
#sp_nav {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
#sp_nav.open {
  pointer-events: auto;
	display: block;
	overscroll-behavior: contain;
}
/* オーバーレイ */
#sp_nav_overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  z-index: 1;
}
#sp_nav.open #sp_nav_overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 閉じるボタン + メニュー */
#sp_menu {
  position: fixed;
  top: 10px;
  right: 0; 
  width: 80%;
  max-width: 400px;
  height: calc(100% - 20px);
  transform: translateX(calc(100% + 40px));
  transition: transform 0.6s ease;
  z-index: 2;
  overflow: visible;
  will-change: transform;
}
#sp_nav.open #sp_menu {
  transform: translateX(0);
}
/* 閉じるボタン */
#sp_menu button {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: calc(100% + 8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  background: none;
  border: none;
  cursor: pointer;
}
#sp_nav.open #sp_menu button {
  opacity: 1;
  pointer-events: auto;
}
/* メニュー */
#sp_menu > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 10px 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--white);
  border-radius: 10px 0 0 10px;
  box-shadow: -10px 0 20px rgba(0, 0, 0, 0.2);
}
#step2 #sp_menu > div, #step3 #sp_menu > div {
	position: static;
}
#sp_menu > div > dl > dt {
	background-color: var(--beige_d);
	color: var(--brown_d);
	font-weight: bold;
	padding: 10px;
}
#sp_menu dd {
	padding: 0 10px;
}
#sp_mypage dd {
	padding: 10px 10px 15px;
}
#sp_mypage dt {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#sp_mypage dd > span, #sp_mypage dd > span span {
	font-weight: bold;
}
#sp_mypage ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 10px;
}
#sp_mypage li {
	background-color: var(--beige_l);
	border: solid 1px var(--brown_l);
	border-radius: 5px;
	box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
	color: var(--brown_d);
	text-align: center;
	font-size: 13px;
	font-weight: bold;
}
#sp_mypage li a {
	font-weight: bold;
	display: block;
	padding: 10px 0;
	height: 100%;
}
#sp_guest dd {
	text-align: center;
}
#sp_guest dd a {
	margin: 15px 0;
	font-size: 15px;
}
#sp_inquiry {
	padding: 10px;
	background-color: var(--pink_l);
	border: solid 2px var(--pink_d);
	border-radius: 8px;
	margin: 0px 10px 15px;
	text-align: center;
}
#sp_inquiry p {
	font-size: 15px;
	font-weight: bold;
	color: var(--brown_d);
	margin-bottom: 10px;
}
#sp_inquiry a {
	font-size: 15px;
	padding: 0 10px 0 8px;
	margin: 0;
}
@media (min-width: 360px) {
	#sp_inquiry div {
		display: inline-block;
		padding-right: 60px;
		margin: 0 auto;
		position: relative;
	}
	#sp_inquiry div::after {
		content: "";
		display: block;
		width: 80px;
		height: 65px;
		background: url(/img/hakomaru/hakomaru-hyoko4.png) no-repeat center / contain;
		position: absolute;
		bottom: -18px;
		right: -8px;
	}
}
#sp_search > dd > * + *, #sp_feature ul li + li, #sp_help ul li + li  {
	border-top: dashed 2px var(--gray);
}
#sp_search dd > form {
	margin: 15px 0;
}
#sp_search dd > div:has(form) {
	padding: 15px 0;
}
div:has(#searchForm_box, #searchForm_board) > span {
	display: block;
	font-weight: bold;
	font-size: 15px;
	margin-bottom: 5px;
}
div:has(#searchForm_box, #searchForm_board) > span span {
	font-weight: normal;
	margin-left: 5px;
}
#searchForm_box, #searchForm_board {
	display: flex;
	align-items: center;
}
#searchForm_box span, #searchForm_board span {
	font-size: 17px;
	margin: 0 5px;
}
#searchForm_box input[type=number], #searchForm_board input[type=number] {
	text-align: center;
	padding: 5px 0;
}
#searchForm_box input[type=number] {
	width: calc((100% - 90px)/3);
}
#searchForm_board input[type=number] {
	width: calc((100% - 68px)/2);
}
#sp_search dl dt, #sp_feature ul li,  #sp_help ul li {
	font-weight: bold;
	font-size: 15px;
	position: relative;
}
#sp_search dl dt {
	padding: 15px 0;
}
#sp_search dl dt::before, #sp_search dl dt::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 18px;
	width: 3px;
	height: 16px;
	background-color: var(--gray);
}
#sp_search dl dt::before {
	rotate: 90deg;
}
#sp_search dl dt::after {
	transition: rotate .3s;
}
#sp_search dl:has(.open) dt::after {
	rotate: 90deg;
}
#sp_search dl dd {
	max-height: 0;
  opacity: 0;
  overflow: hidden;
	transform: translateY(-10px);
	transition: all 0.5s ease;
}
#sp_search .open + dd {
	opacity: 1;
  transform: translateY(0);
}
#sp_search dl:nth-of-type(1) .open + dd {
	max-height: calc(51px * 45);
}
#sp_search dl:nth-of-type(2) .open + dd {
	max-height: calc(51px * 6);
}
#sp_search dl:nth-of-type(3) .open + dd {
	max-height: calc(51px * 8);
}
#sp_search dd > dl span {
	display: block;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
	color: var(--brown_d);
	background-color: var(--beige_d);
	border-radius: 5px;
	padding: 0 10px;
	margin-top: 10px;
}
#sp_search dd > dl span + ul li:first-child {
	border-top: none;
}
#sp_search ul li {
	border-top: solid 1px var(--gray);
	position: relative;;
}
#sp_search ul li::after, #sp_feature ul li::after, #sp_help ul li::after  {
	content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: solid 2px var(--brown_l);
  border-bottom: solid 2px var(--brown_l);
  transform: rotate(-45deg);
  position: absolute;
	top: 21px;
	right: 10px;
}
#sp_search ul li a, #sp_feature dd a, #sp_help dd a {
	display: block;
	font-size: 15px;
}
#sp_feature dd a, #sp_help dd a {
	padding: 15px 0;
	font-weight: bold;
}
#sp_search ul li a {
	height: 50px;
	line-height: 50px;
}

/* footer
====================================================================================================*/
footer {
	margin-top: 30px;
}
/* #footer_contents
==============================*/
#footer_contents, #footer_sitemap > ul, #footer_other, #footer_cart > div {
	margin: 0 auto;
	width: clamp(300px, 100%, 1320px);
}
#footer_info, #footer_about, #footer_contact, #footer_other {
	padding: 0 10px;
	margin-bottom: 20px;
}
/* footer_info
==============================*/
/* アースダンボールの紹介資料(PDF) */
#catalog_info {
	padding: 12px;
	background-color: var(--white);
	border: solid 1px var(--gray);
	border-radius: 10px;
	margin-bottom: 30px;
}
#catalog_info dt {
	font-size: 18px;
	font-weight: bold;
	color: var(--brown_d);
	margin-bottom: 5px;
}
#catalog_info dd {
	display: flex;
	gap: 5px;
}
#catalog_info dd p {
	flex: 1;
}
#catalog_info dd > a img {
	width: 110px;
	height: auto;
}
/* 営業日カレンダー */
footer .calendar {
  margin: 0 auto;
}
footer .calendar p {
	padding: 5px;
	background-color: var(--beige_l);
	color: var(--brown_d);
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}
footer .calendar dl {
	margin-bottom: 5px;
}
footer .calendar dt {
	float: left;
	width: 70px;
	padding: 4px 0;
	color: var(--white);
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	background-color: var(--brown_d);
	border-radius: 3px;
	margin-right: 8px;
	margin-bottom: 5px;
}
footer .calendar dd {
	display: block;
	padding: 4px 0;
	color: var(--black);
	font-size: 15px;
	margin-bottom: 5px;
}
.iframe-box {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
}
.iframe-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 460px;  /* 元サイズ */
  height: 170px;
  border: 0;
  transform-origin: 0 0;
}
/* タブレット・PC */
@media (min-width: 768px) {
	#footer_info {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20px;
	}
	#catalog_info {
		min-height: 180px;
		position: relative;
	}
	#catalog_info .more_right {
		display: inline-block;
		margin-top: 10px;
	}
}
/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
	#catalog_info {
		width: calc(100% - 400px);
		padding: 15px;
	}
	#catalog_info dd > a img {
		width: 150px;
	}
	footer .calendar {
		width: 380px;
	}
}
/* PC */
@media (min-width: 1024px) {
	#footer_info {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20px;
	}
	#catalog_info {
		width: calc(100% - 480px);
		padding: 20px 220px 20px 20px;
	}
	#catalog_info dt {
		margin-bottom: 5px;
	}
	#catalog_info dd > a img {
		width: 200px;
		position: absolute;
		top: 20px;
		right: 20px;
	}
	footer .calendar {
		width: 460px;
	}
	footer .calendar dl {
		display: flex;
		align-items: center;
	}
	footer .calendar dd + dt {
		margin-left: 15px;
	}
}
/* footer_about
==============================*/
#footer_about dl {
	margin-bottom: 30px;
}
#footer_about dt {
	padding: 5px;
	background-color: var(--beige_l);
	margin-bottom: 10px;
}
#footer_about dt a {
	color: var(--brown_d);
	font-size: 20px;
	font-weight: bold;
}
#footer_about dd {
	line-height: 1.5;
}
#footer_about dd .red {
	font-weight: bold;
}
#footer_about dd a {
	color: var(--blue_l);
}
#footer_about dl:nth-of-type(1) img {
	margin-top: 10px;
}
#footer_about dl:nth-of-type(3) {
	position: relative;
}
#footer_about dl:nth-of-type(3) dl dt {
	display: inline-block;
	padding: 3px 10px;
	color: var(--white);
	font-size: 16px;
	font-weight: bold;
	background-color: var(--brown_d);
	border-radius: 3px;
	margin-bottom: 5px;
}
#footer_about dl:nth-of-type(3) dl dd + dt {
	margin-top: 10px;
}
#footer_about dl:nth-of-type(3) dl + a {
	display: none;
}
@media (min-width: 500px) {
	#footer_about dl:nth-of-type(3) dl + a {
		display: block;
		position: absolute;
		left: 340px;
		bottom: 0;
	}
	#footer_about dl:nth-of-type(3) dl + a img {
		width: 120px;
		height: 60px;
	}
}
/* PC */
@media (min-width: 1024px) {
	#footer_about {
		display: grid;
		grid-template-columns: 1fr 1fr 460px;
		gap: 40px;
	}
	#footer_about dl {
		margin-bottom: 0;
	}
	#footer_about dl:nth-of-type(2) {
		position: relative;
	}
	#footer_about dl:nth-of-type(2)::before, #footer_about dl:nth-of-type(2)::after {
		content: "";
		width: 1px;
		height: 100%;
		background-color: var(--brown_l);
		position: absolute;
		top: 0;
	}
	#footer_about dl:nth-of-type(2)::before {
		left: -20px;
	}
	#footer_about dl:nth-of-type(2)::after {
		right: -20px;
	}
}
/* footer_contact
==============================*/
#footer_contact {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#footer_contact li {
	width: 100%;
	padding: 20px 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--beige_d);
	border-radius: 10px;
}
#footer_contact li p:first-child {
	padding: 1px 0 2px 30px;
	color: var(--brown_d);
}
#footer_contact li:nth-of-type(1) p:first-child {
	background: url(/img/icon/title-tel.svg) no-repeat 0px / 24px 24px;
}
#footer_contact li:nth-of-type(2) p:first-child {
	background: url(/img/icon/title-fax.svg) no-repeat 0px / 24px 24px;
}
#footer_contact li:nth-of-type(3) p:first-child {
	background: url(/img/icon/title-mail.svg) no-repeat 0px / 24px 24px;
}
#footer_contact li p:first-child span {
	font-weight: bold;
}
#footer_contact li:nth-of-type(1) a, #footer_contact li:nth-of-type(2) p + span, #footer_contact li:nth-of-type(2) p + span a {
	font-size: 40px;
	font-weight: bold;
	color: var(--brown_d);
}
#footer_contact li:nth-of-type(1) p:last-child, #footer_contact li:nth-of-type(2) p:last-child {
	color: var(--brown_d);
}
#footer_contact .button-brown {
	margin: 20px 0;
}
@media (min-width: 360px) {
	#footer_contact .button-brown {
		margin: 20px 45px 20px 0;
	}
	#footer_contact .button-brown::after {
		content: '';
		display: block;
		width: 80px;
		height: 70px;
		background: url(/img/hakomaru/hakomaru-mail.png) no-repeat center / 80px auto;
		background-size: cover;
		position: absolute;
		top: -17px;
		right: -45px;
	}
}
/* タブレット・PC */
@media (min-width: 768px) {
	#footer_contact li p:first-child span {
		font-size: 20px;
	}
}
/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
	#footer_contact {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}
/* PC */
@media (min-width: 1024px) {
	#footer_contact {
		flex-direction: row;
		justify-content: space-between;
	}
}
/* footer_sitemap
==============================*/
#footer_sitemap {
	background-color: var(--beige_l);
}
#footer_sitemap * {
	color: var(--brown_d);
}
#footer_sitemap dt {
	font-weight: bold;
}
/* スマホ・タブレット */
@media (max-width: 1023px) {
	#footer_sitemap li:has(dl) {
		border-top: 1px solid var(--brown_d);
	}
	#footer_sitemap li:has(dl):first-child {
		border-top: none;
	}
	#footer_sitemap li:has(dl):last-child {
		border-bottom: 1px solid var(--brown_d);
	}
	#footer_sitemap dt {
		display: block;
		padding: 15px;
		margin: 0 auto;
		position: relative;
	}
	#footer_sitemap .footer_open {
		color: var(--white);
		background: var(--brown_d);
	}
	#footer_sitemap dt::before, #footer_sitemap dt::after {
		content: "";
		width: 15px;
		height: 3px;
		background-color: var(--brown_d);
		position: absolute;
		top: 48%;
		right: 20px;
	}
	#footer_sitemap .footer_close::after {
		transform: rotate(90deg);
	}
	#footer_sitemap .footer_open::before, #footer_sitemap .footer_open::after {
		background-color: var(--white);
	}
	#footer_sitemap dd {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transform: translateY(-10px);
		transition: all 0.5s ease;
		padding: 0 15px;
	}
	#footer_sitemap .footer_open + dd {
		opacity: 1;
		transform: translateY(0);
	}
	#footer_sitemap > ul > li:nth-of-type(1) .footer_open + dd {
		max-height: calc(40px * 7);
	}
	#footer_sitemap > ul > li:nth-of-type(2) .footer_open + dd {
		max-height: calc(40px * 7);
	}
	#footer_sitemap > ul > li:nth-of-type(3) .footer_open + dd {
		max-height: calc(40px * 10);
	}
	#footer_sitemap > ul > li:nth-of-type(4) .footer_open + dd {
		max-height: calc(40px * 7);
	}
	#footer_sitemap > ul > li:nth-of-type(5) .footer_open + dd {
		max-height: calc(40px * 8);
	}
	#footer_sitemap > ul > li:nth-of-type(6) .footer_open + dd {
		max-height: calc(40px * 3);
	}
	#footer_sitemap > ul > li:nth-of-type(7) .footer_open + dd {
		max-height: calc(40px * 2);
	}
	#footer_sitemap > ul a {
		display: block;
		height: 40px;
		line-height: 40px;
	}
}
/* PC */
@media (min-width: 1024px) {
	#footer_sitemap {
		padding: 60px 0 30px;
	}
	#footer_sitemap > ul {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 40px 10px;
		max-height: 540px;
		padding: 0 10px;
	}
	#footer_sitemap dt {
		font-size: 18px;
	}
	#footer_sitemap dd li {
		font-size: 15px;
		margin-top: 8px;
		padding-left: 20px;
		position: relative;
	}
	#footer_sitemap dd li::before {
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		border-right: solid 3px var(--brown_l);
		border-bottom: solid 3px var(--brown_l);
		transform: rotate(-45deg);
		position: absolute;
		top: 5px;
		left: 0px;
	}
	#footer_sitemap a:hover {
		text-decoration: underline;
	}
}
/* footer_other
==============================*/
#footer_other {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin: 30px auto 0;
	padding-bottom: 30px;
}
#footer_other > picture:first-child img {
	width: clamp(190px, 25vw, 300px);
}
#footer_other > div > span, #footer_cart > div > div > span {
	font-size: clamp(15px, 4vw, 18px);
	font-weight: bold;
}
#footer_other > div ul, #footer_cart > div > div ul {
	margin-top: 10px;
	font-size: 15px;
}
#footer_other > div li, #footer_cart > div > div li {
	line-height: 1.2;
}
#footer_other > div li + li, #footer_cart > div > div li + li {
	margin-top: 5px;
}
#footer_other .sns {
	display: flex;
	gap: 12px;
}
#footer_other .sns li {
	width: clamp(30px, 5vw, 40px);
	height: auto;
}
/* footer_cart
==============================*/
#footer_cart {
	padding: 30px 10px;
	background-color: var(--beige_l);
}
#footer_cart > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}
.footer_cart_img {
	display: flex;
	align-items: center;
	gap: 20px;
}
.footer_cart_img picture:first-child img {
	width: clamp(200px, 30vw, 300px);
}
#footer_cart > div > div:nth-of-type(2) * {
	color: var(--brown_d);
}
#footer_cart .calendar {
	margin: 0;
	width: 100%;
	max-width: 460px;
}
#footer_cart .calendar p {
	padding: 0;
	font-size: clamp(15px, 4vw, 18px);
}
#footer_cart .calendar dd {
	color: var(--brown_d);
}
/* PC */
@media (min-width: 1024px){
	#footer_cart > div {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		gap: 20px;
	}
}
/* footer_bottom
==============================*/
#footer_bottom {
	padding: 30px 10px 150px;
	text-align: center;
	background-color: var(--brown_d);
}
#footer_bottom * {
	color: var(--white);
}
#footer_bottom ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}
#footer_bottom li {
	padding-right: 10px;
	border-right: solid 1px var(--white);
}
#footer_bottom li:last-child {
	padding: 0;
	border: none;
}
#copyright {
	font-size: 14px;
}
/* PC */
@media (min-width: 1024px) {
	#footer_bottom a:hover {
		text-decoration: underline;
	}
}
/* sidenavi
====================================================================================================*/
#sidenavi {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 200;
}
#sidenavi ul {
	display: none;
}
#sidenavi > a {
	display: block;
	width: 50px;
	height: 50px;
	background: var(--brown_d) url(/img/icon/arrow-white.svg) no-repeat center / 15px;
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
	transition: 0.2s;
	transform: rotate(-90deg);
}
/* タブレット・PC */
@media (min-width: 768px) {
	#sidenavi {
		bottom: 80px;
	}
	#sidenavi > a {
		width: 60px;
		height: 60px;
		background-size: 20px;
	}
}
@media (min-width: 1550px) {
	#sidenavi {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	#sidenavi ul {
		display: block;
	}
	#sidenavi li + li {
		margin-top: 10px;
	}
	#sidenavi li:nth-of-type(-n+2) a, #sidenavi li:last-child div:first-child {
		display: block;
		width: 90px;
		height: 90px;
		padding: 10px 0;
		color: var(--brown_d);
		font-weight: bold;
		font-size: 14px;
	}
	#sidenavi li:nth-of-type(-n+2) a {
		border-radius: 5px;
		box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
		transition: 0.2s;
	}
	#sidenavi li:nth-of-type(1) a {
		background: var(--brown_l) url(/img/navigation/icon_guide.svg) no-repeat center 35px / 45px;
	}
	#sidenavi li:nth-of-type(2) a {
		background: var(--brown_l) url(/img/navigation/icon_faq.svg) no-repeat center 35px / 45px;
	}
	#sidenavi li:last-child div:first-child {
		background: var(--brown_l) url(/img/navigation/icon_mail.svg) no-repeat center 35px / 45px;
	}
	#sidenavi li:last-child {
		border-radius: 5px;
		box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
		transition: 0.2s;
		overflow: hidden;
	}
	#sidenavi li:nth-of-type(-n+2):hover a, #sidenavi li:last-child:hover {
		transform: translateY(2px);
		box-shadow: none;
		transition: 0.2s;
		cursor: pointer;
	}
	#sidenavi > a:hover {
		transform: rotate(-90deg) translateX(-2px);
		box-shadow: none;
		transition: 0.2s;
		cursor: pointer;
	}
	#sidenavi li:last-child div:last-child {
		width: 90px;
		height: auto;
		color: var(--white);
		font-weight: bold;
		font-size: 14px;
		background-color: var(--blue_d);
		padding: 8px 0;
	}
	#sidenavi li:last-child div:last-child span {
		display: block;
		font-size: 13px;
		font-weight: bold;
	}
	#sidenavi > a {
		margin-top: 10px;
		width: 70px;
		height: 70px;
		background-size: 20px;
	}
}
/* 固定ナビあり
==============================*/
/* スマホ（ダンボール箱検索、商品詳細、比較オーダー） */
@media (max-width: 767px) {
	#search #sidenavi, .item-box #sidenavi, .item-board #sidenavi, .item-kansyo #sidenavi, .item-giftbox #sidenavi, #com_order-box #sidenavi {
		bottom: 100px;
	}
}
/* PC（比較オーダー） */
@media (min-width: 1024px) and (max-width: 1550px) {
	#com_order-box:has(#price_navi.open) #sidenavi {
		bottom: 130px;
	}
}