@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url(./swiper-bundle.css);


/*--------------------------------------------
■［変数］
--------------------------------------------*/
:root {
	--color-def: #333;
	--color-mute: #abb8c3;
	--color-red1: #cf2e2e;
	--color-orange1: #ff6400;
	--color-blue1: #0693e3;
	--color-green1: #00d084;
	--color-gray1: #565657;
	--color-gray2: #888;
	--color-lgray1: #F2F2F2;
	--color-lgray2: #ddd;
	--color-black: #000;
	--color-white: #fff;

	--font-def: 'Noto Sans JP',"游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;

}


/*--------------------------------------------
■［body］
--------------------------------------------*/
html {
}

body, input, textarea, td, th {
	line-height: 2.05;
	font-family: var(--font-def);
	font-size: 16px;
	color: var(--color-def);
	font-weight: 500;
	letter-spacing: .03em;
}

* {
	box-sizing: border-box;
}



/*--------------------------------------------
■［リンク］
--------------------------------------------*/

a {
	color: #4da6ff;
	text-decoration: none;
}

.btn,
button,
a {
	transition: all .3s ease-out;
}
.btn:hover,
button:hover,
a:hover {
	filter: brightness(150%);
}


/*--------------------------------------------
■［icon］
--------------------------------------------*/

i.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	display: inline-block;
	vertical-align: middle;
	margin-top: -0.2em;
	font-size: 1.4em;
}



/*--------------------------------------------
■［img］
--------------------------------------------*/

img {
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	vertical-align: middle;
}

/*--------------------------------------------
■［header］
--------------------------------------------*/

header {
	max-width: 1100px;
	padding: 0 10px;
	margin: 0 auto;
	padding-top: 1.375em;
	padding-bottom: 0.9375em;
	display: flex;
}
header h1 {
}
header h1 a {
	display: block;
	display: flex;
	gap: 1em;
}
header h1 img {
	width: 7em;
}
header h1 strong {
	font-weight: 700;
	text-decoration: none;
	color: var(--color-def);
}
header ul {
	margin-left: auto;
	display: flex;
	gap: 2em;
	font-size: 0.86em;
}
header ul li a {
	display: flex;
	gap: 0.3em;
	align-items: center;
	color: var(--color-def) !important;
}
header ul li a i.material-symbols-outlined {
	margin: 0;
	color: var(--color-orange1) !important;
}

/*--------------------------------------------
■［footer］
--------------------------------------------*/

footer {
	background-color: var(--color-gray2);
	color: var(--color-white);
	text-align: center;
	font-size: 0.76em;
	padding: 1em;
	font-weight: 400;
}
p#topofpage {
	position: sticky;
	bottom: 70px;
	max-width: 1100px;
	margin: 30px auto 70px auto;
	height: 0;
}
p#topofpage a {
	width: 40px;
	height: 40px;
	background-color: var(--color-orange1);
	color: var(--color-white);
	display: block;
	position: relative;
	margin-left: auto;
}
p#topofpage a i {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 1em;
	height: 1em;
	font-size: 30px;
	line-height: 1;
	font-variation-settings:'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

/*--------------------------------------------
■［facebox］
--------------------------------------------*/
#facebox {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: none;
}
#facebox .popup {
	max-width: 100%;
	max-height: 90vh;
	width: 980px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	z-index: 1200;
	cursor: default;
}
#facebox table {
	margin: 0 auto;
}

/*--------------------------------------------
■［breadcrumbs］
--------------------------------------------*/
nav#breadcrumbs {
	background-color: var(--color-lgray1);
	padding: 10px;
	margin-bottom: 2.5em;
}
nav#breadcrumbs ul {
	background-color: var(--color-lgray1);
	padding: 0;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	font-size: 0.86em;
	color: var(--color-mute);
	gap: 0 0.5em;
	line-height: 1;
}
nav#breadcrumbs ul li a {
	display: flex;
	align-items: center;
	color: var(--color-def);
}
nav#breadcrumbs ul li a:after {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	display: inline-block;
	color: var(--color-mute);
	content: "\e5cc";
	margin-left: 0.5em;
}



/*--------------------------------------------
■［contents］
--------------------------------------------*/
div#contents {
	max-width: 1100px;
	width: 100%;
	padding: 40px 10px;
	margin: 0 auto;
	display: flex;
	flex-direction: row-reverse;
}

/*--------------------------------------------
■［サイドナビ］
--------------------------------------------*/
div#sidemenu {
	width: 260px;
	float: none;
	font-size: 1em;
}
div.side, #extra {
	float: none;
	width: auto;
	clear: none;
}
div.section#keywordSearchSideCatalog {
	padding: 0;
	width: auto;
	height: auto;
	background: none;
	margin: 0;
}
div#sidemenu div#sub > ul > li:not(.catalogtop) {
	background-color: var(--color-lgray1);
	padding: 10px;
}
div#sidemenu div#sub > ul > li + li {
	margin-top: 15px;
}
div#sidemenu div#sub > ul > li.catalogtop a {
	color: var(--color-def);
	display: block;
}
div#sidemenu div#sub > ul > li.catalogtop a i {
	color: var(--color-orange1);
}
div#sidemenu div#sub > ul > li:not(.catalogtop) h2 {
	margin: -10px;
	margin-bottom: 10px;
	background-color: var(--color-orange1);
	color: var(--color-white);
	display: block;
	background-image: none;
	padding: 15px;
	line-height: 1;
	font-weight: 700;
	font-size: 1em;
	background-image: none;
	border: none;
}
div#sidemenu div#sub > ul > li:not(.catalogtop) h2 span {
	background-image: none;
	border: none;
	width: auto;
	height: auto;
	text-indent: 0;
	padding: 0;
}
div#sidemenu div#sub > ul > li:not(.catalogtop) h2 span img {
	display: none;
}
.keywordSearch input.keyword {
	background-image: none;
	width: 11em;
	height: auto;
}
input[type="text"], input[type="password"] {
	border: 1px solid var(--color-mute);
	height: auto;
	padding: 0.5em;
	border-radius: 0.2em;
	font-size: 1em;
	line-height: 1.3;
}
.btn.matte.search {
	width: auto;
	background-image: none;
	background-color: var(--color-orange1);
	padding: 0.6em;
	border-radius: 0.2em;
	text-indent: 0;
	height: auto;
	line-height: 1.3;
	color: var(--color-white);
	font-size: 0.86em;
	vertical-align: middle;
}
.btn.matte.search:before {
	content: "検索";
}
ul.scope {
	display: flex;
	gap: 1em;
	font-size: 0.76em;
}
ul.scope img {
	display: none;
}
.keywordSearch ul.scope input {
	position: inherit;
	left: auto;
	top: auto;
	width: auto;
	height: auto;
	margin-right: 0.2em;
	vertical-align: middle;
}
div#sidemenu div#sub > ul > li.category ul > li + li {
	border-top: 1px solid var(--color-mute);
}
div#sidemenu div#sub > ul > li.category ul > li a {
	display: block;
	padding: 0.5em 1.5em 0.5em 0;
	font-weight: 500;
	color: var(--color-def);
	position: relative;
	line-height: 1.3;
}
div#sidemenu div#sub > ul > li.category ul > li a:after {
	width: 1em;
	height: 1em;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	content: "\e5cc";
	color: var(--color-orange1);
}

label {
	cursor: pointer;
}
label input[type="checkbox"],
label input[type="radio"] {
	display: none;
}
label input[type="checkbox"] + span,
label input[type="radio"] + span {
	color: var(--color-gray1);
	display: inline-block;
	padding-left: 1.5em;
	position: relative;
}
label input[type="checkbox"]:disabled + span,
label input[type="radio"]:disabled + span {
	color: var(--color-mute);
}
label input[type="checkbox"]:checked + span,
label input[type="radio"]:checked + span {
	color: var(--color-def);
}
label input[type="checkbox"] + span:before,
label input[type="radio"] + span:before {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	color: var(--color-mute);
	content: "\e836";
	position: absolute;
	left: 0;
	top: 0.3em;
	font-size: 1.4em;
	line-height: 1;
}
label input[type="checkbox"] + span:before {
	content: "\e835";
}
label input[type="checkbox"]:checked + span:before,
label input[type="radio"]:checked + span:before {
	color: var(--color-orange1);
	font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	content: "\e86c";
}
label input[type="checkbox"]:checked + span:before {
	color: var(--color-orange1);
	content: "\e834";
}
label input[type="checkbox"]:disabled + span:before,
label input[type="radio"]:disabled + span:before {
	color: var(--color-mute);
}
div.side div.section {
	padding: 0;
	background-image: none;
}
div.side div.section div.inner {
	padding: 0;
	background-image: none;
}
#sideLogin ul.option li, #header div.utility ul.subNavi li, .ca {
	background-image: none;
}
p#addingComment {
	border-bottom: 1px solid var(--color-mute);
	margin-bottom: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-weight: 400;
	font-size: 0.86em;
}
p#addingComment a {
	display: block;
	padding: 0.3em;
	border-radius: 0.3em;
	color: var(--color-white);
	background-color: var(--color-white);
	color: var(--color-orange1);
	border: 2px solid var(--color-orange1);
	text-align: center;
	font-weight: 700;
	font-size: 1em;
}
#addingStockInfo p {
	font-size: 0.86em;
	color: var(--color-gray1);
	margin: 0;
	font-weight: 400;
	line-height: 1.4;
}
div.section {
	margin-bottom: 0;
}
div.section#keywordSearchSide {
	width: auto;
	height: auto;
	background: none;
}

div.side div.pager ul.skip li {
	background-image: none;
	background-color: var(--color-orange1);
	position: relative;
	width: 11px;
	height: 0;
	padding-top: 11px;
	overflow: hidden;
}
div.side div.pager ul.skip li.disabled {
	background-image: none;
	background-color: var(--color-mute);
}
div.side div.pager ul.skip li:before {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	content: "\e316";
	width: 1em;
	height: 1em;
	font-size: 11px;
	line-height: 1;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	color: var(--color-white);
	z-index: 1;
	text-indent: 0;
}
div.side div.pager ul.skip li.next:before {
	content: "\e313";
}
div.section#keywordSearchSide {
	padding: 0;
	width: auto;
	height: auto;
	background: none;
}

div.side .siblings li.current, div.side .siblings li a {
	display: flex;
	gap: 10px;
	align-items: center;
}
div.side .siblings li span.name {
	width: 100%;
}



/*--------------------------------------------
■［本文］
--------------------------------------------*/
div#main {
	width: calc(100% - (260px + 30px));
	float: none;
	margin-left: auto;
}
div#main h1 {
	height: auto;
	background-image: none;
	text-indent: 0;
	color: var(--color-def);
	font-size: 1.7em;
	display: block;
	font-weight: 700;
	padding: 0 0 0.5em 0;
	margin: 2em 0 1em 0;
	line-height: 1.3;
}
div#main h2 {
	height: auto;
	background-image: none;
	text-indent: 0;
	color: var(--color-def);
	font-size: 1.4em;
	display: block;
	font-weight: 700;
	padding: 0 0 0.5em 0;
	margin: 2em 0 1em 0;
	border-bottom: 1px solid var(--color-orange1);
	line-height: 1.3;
}
div#main h2 span {
	display: block;
	margin: 0;
	padding: 0;
	border: none;
}
div#main h1:first-child,
div#main h2:first-child {
	margin-top: 0;
}

/*--------------------------------------------
■［レスポンシブ］
--------------------------------------------*/

@media screen and (max-width: 768px) {

	/*--------------------------------------------
	■［header］
	--------------------------------------------*/
	header {
		align-items: center;
	}
	header h1 a {
		align-items: center;
		line-height: 1;
	}
	header h1 strong {
		font-size: 0.76em;
		line-height: 1;
	}
	header ul {
		flex-direction: column;
		line-height: 1;
		gap: 0.5em;
	}


	/*--------------------------------------------
	■［footer］
	--------------------------------------------*/

	p#topofpage {
		position: sticky;
		margin-bottom: 50px;
	}

	
	/*--------------------------------------------
	■［breadcrumbs］
	--------------------------------------------*/
	nav#breadcrumbs {
		padding: 0;
	}
	nav#breadcrumbs ul {
		overflow-x: auto;
		white-space: nowrap;
		height: 30px;
	}
	nav#breadcrumbs ul li {
		margin: auto 0;
	}


	/*--------------------------------------------
	■［contents］
	--------------------------------------------*/
	div#contents {
		padding: 20px 10px;
		display: block;
	}

	/*--------------------------------------------
	■［サイドナビ］
	--------------------------------------------*/
	div#sidemenu {
		width: 100%;
	}
	.keywordSearch input.keyword {
		width: 74vw;
	}


	/*--------------------------------------------
	■［本文］
	--------------------------------------------*/
	div#main {
		width: 100%;
	}
}
@media screen and (max-width: 480px) {
	body, input, textarea, td, th {
		font-size: 3.3vw;
	}
	/*--------------------------------------------
	■［header］
	--------------------------------------------*/
	header {
		padding: 10px;
	}
	header h1 img {
		width: 5em;
	}
	header h1 strong {
		font-size: 0.76em;
		line-height: 1;
	}
	header ul {
		font-size: 0.76em;
	}
}