html{
	font-size:10px;	
}

* {
	font-size: 1.2rem;
	color: hsl(var(--col), 0%, 20%);
}

body{
	margin:0;
	width:100%;
	height:100%;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding-bottom: 60px;
}

body > *{
	width: 90%;
	margin-inline: auto;
}

body header{
	width: 100%;
	background: hslfff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32px 5%;
}

body header > a:first-of-type{
	height : 60px;
	> img{
		width : 100%;
	}
}

body header .items{
	display: flex;
	flex-wrap: nowrap;
	gap:16px;
	> *{
		width: auto;
		height: auto;
		padding: 8px 16px;
		font-size: 14px;
		border-radius: 5px;
		position: relative;
		background: hsl(var(--col-skyblue), 90%, 90%);
		color: var(--col-link) !important;
		text-decoration: none;
		border: 1px solid hsl(var(--col-skyblue), 90%, 50%);
	}
}


body > nav{
	margin: -24px;
	display: flex;
	align-items: center;
	width:100%;
	margin-inline:0;
	padding-inline: 5%;
	background: hsl(var(--col-skyblue), 90%, 40%);
	> a:is(:focus,:hover,:visited), > a{
		color: hsl(var(--col),0%,100%);
		text-decoration: none;
		line-height: 1.1;
	}
	> a{
		position: relative;
		flex: 1;
		font-size: 1.6rem;
		padding:16px 24px;
		border-left: 1px solid hsl(var(--col-yellow),100%,90%);
		text-align: center;
	}
	> a:last-of-type{
		border-right: 1px solid hsl(var(--col-yellow),100%,90%);
	}
	> a:hover::after {
		width: 100%;
	}
	
}


body > .articleSearch{
	display: none;
	justify-content: center;
	width: 50%;
	max-width: 500px;
	background: hsl(var(--col),0%,30%);
	border-radius: 5px;
	padding: 16px;
	> *{
		color: hsl(var(--col),0%,30%);
		border-radius: 10px;
		border: none;
	}
	> input{
		width:60%;
	}
}

body > main{
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 24px;
	a:is(:focus,:hover,:visited), a {
		color: var(--col-link);
	}
	> * {
		width: 100%;
	}
	:is(h1, h2, h3){
		position: relative;
		font-size: 2rem;
		margin-bottom:24px;
		text-align: center;
	}
	:is(h1, h2, h3)::after{
		position: absolute;
		content: "";
		top:100%;
		display: block;
		width:120px;
		height:1px;
		left:calc(50% - 60px);
	}
	#guide {
		margin-top: 24px;
		max-width: 600px;
		margin-inline: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		> * {
			width: 100%;
		}
		* {
			font-size: 1.4rem;
		}
	}
	#guide .isTitle {
		font-size: 1.6rem;
		font-weight: bold;
	}
	#guide dl {
		display: flex;
		flex-wrap: wrap;
		> * {
			width: 100%;
		}
		dt {
			font-weight: bold;
		}
		dt:not(:first-of-type) {
			border-top: 1px solid hsl(var(--col), 0%, 60%);
			margin-top: 8px;padding-top: 8px;
		}
	}
}


body main > *:not(.eyecatchWrap) :is(h2, h3){
    margin-top:32px;
}

body main.top > .eyecatchWrap{
	display: flex;
	flex-wrap: wrap;
	gap:24px;
	> :is(div, article) {
		padding:16px;
		border: 1px solid hsl(var(--col),0%,30%);
	}
	> * {
		width:calc((100% - 24px) / 2);
		border-radius: 10px;
		background: hsl(var(--col-skyblue), 90%, 85%);
	}
	.shippingStatus a {
		display: block;
		background: hsl(var(--col-skyblue), 90%, 45%);
		border-radius: 5px;
		text-align: center;
		padding-block:16px;
		margin-top: 24px;
	}
	.isTitle {
		padding-left: 0;
		border-left: none;
		margin-bottom: 8px;
	}
	p {
		font-size: 1.4rem;
	}
	
}

body .anyArticle{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	caption {
		width: 100%;
		font-size: 1.8rem;
		font-weight: bold;
		background: hsl(var(--col-orange), 80%, 60%);
		padding: 4px 8px;
		border-radius: 5px;
		color: hsl(var(--col-orange), 80%, 97%);
	}
	:is(tbody, tfoot) {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		width: 100%;
		tr {
			width: 100%;
		}
	}
	tbody tr {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
	}
	tbody tr td {
		background: #fff;
		width: calc((100% - (8px * 5)) / 6);
		padding: 8px;
		border-radius: 5px;
		border: 1px solid hsl(var(--col-skyblue), 75%, 50%);
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		> * {
			width: 100%
		}
		img {
			width: 100%;
		}
		.addCart {
			text-decoration: none;
			font-size: 1.4rem;
			border-radius: 10px;
			text-align: center;
			background: hsl(var(--col-red), 75%, 50%);
			padding-block: 8px;
			align-items: center;
			display: flex;
			line-height: 1;
			justify-content: center;
		}
		.addCart::before {
			content: "カートに追加";
			color: hsl(var(--col-red), 75%, 97%);
		}
	}
	tbody tr.innerLink td {
		width: calc((100% - 8px) / 2);
		border: none;
		a {
			display: block;
			width: 100%;
			background: var(--col-link);
			padding: 4px 16px;
			text-align: center;
			border-radius: 5px;
			color: #fff;
			font-size: 1.6rem;
			padding-block: 8px;
		}
	}
	tfoot tr {
		display: flex;
		gap: 12px;
		justify-content: center;
		align-items: center;
		* {
			font-size: 1.6rem;
		}
		td:is(:first-of-type, :last-of-type) a {
			padding: 4px 24px;
			background: hsl(var(--col-skyblue), 90%, 95%);
			border: 1px solid hsl(var(--col-skyblue), 90%, 60%);
			border-radius: 5px;
			text-align: center;
		}
	}
}

:is(.anyFilter, .anyFilterForTop) {
	width: 100%;
	background: #fff;
	gap: 16px;
	display: flex;
	flex-wrap: wrap;
	caption {
		width: 100%;
		font-size: 1.8rem;
		font-weight: bold;
	}
	:is(tbody, tfoot) {
		width: 100%;
	}
	tbody {
		order: 100;
	}
	:is(tbody, tfoot) tr {
		display: flex;
		flex-wrap: wrap;
		gap: 16px 8px;
		th {
			width: 100%;
		}
	}
	tbody tr th {
		margin-block: 8px;
		text-align: center;
		font-size: 1.6rem;
	}
	tbody tr td {
		width: calc((100% - 16px * 3) / 4);
		border-radius: 5px;
		a {
			display: block;
			border: 1px solid hsl(var(--col-skyblue), 75%, 50%);
			background: hsl(var(--col-skyblue), 75%, 97%);
			padding: 4px 8px;
			border-radius: 5px;
			font-size: 1.4rem;
		}
	}
	tbody tr td.full {
		width: 100%;
		text-align: center;
		a {
			border: none;
			display: inline-block;
			width: auto;
			min-width: 400px;
			padding: 4px 24px;
			border-radius: 5px;
			background: hsl(var(--col-orange), 75%, 50%);
			color: #fff;
		}
	}
	tfoot tr {
		justify-content: center;
	}
	
	tfoot tr td {
		width: 40px;
		a {
			display: block;
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.6rem;
			border-radius: 50%;
			background: var(--col-link);
			color: #fff;
		}
	}
}


body :is(.pager,.isPageLinks){
	display: flex;
	flex-wrap: wrap;
	gap:16px;
	justify-content: center;
	margin-top: 32px;
}

body :is(.pager,.isPageLinks) > *{
	border: 1px solid hsl(var(--col),0%,90%);
	background: hsl(var(--col),0%,35%);
	padding:8px 24px;
	border-radius: 5px;
}

body :is(.pager,.isPageLinks) > .focus{
	background: hsl(var(--col-yellow),75%,40%);
}

body > .article > .articleInfo{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	> * {
		width: 100%;
	}
	* {
		font-size: 1.4rem;
	}
	caption {
		font-size: 1.8rem;
		font-weight: bold;
		text-align: left;
	}
	:is(tbody, tfoot, thead) tr {
		width: 100%;
		display: flex;
	}
	tbody {
		display: flex;
		gap: 0;
		flex-wrap: wrap;
	}
	tbody tr:not(.thumb) {
		padding: 4px 8px;
		background: hsl(var(--col-skyblue), 90%, 90%);
	}
	tbody tr:not(.full) {
		gap: 8px;
		th {
			text-align: left;
			width: 30%;
		}
		* {
			font-size: 1.4rem;
		}
	}
	tbody tr:nth-of-type(even) {
		background: hsl(var(--col-skyblue), 90%, 97%);
	}
	tbody tr.thumb {
		background: none;
	}
	.full td {
		width: 100%;
		img {
			width: 100%;
		}
	}
	.any {
		flex-wrap: wrap;
		gap: 8px;
	}
	tbody tr.any  th{
		width: 100%;
	}
	:is(thead, tfoot) tr td {
		width: 100%;
	}
	.addCart{
		width:100%;
		text-decoration: none;
		background: hsl(var(--col-red), 90%, 60%);
		border-radius: 10px;
		font-size: 1.8rem;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-block: 8px;
		color: yellow;
		font-size: 1.6rem;
		font-weight: bold;
	}
}

body .cart > .items{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
	:is(.list, .inputField){
		width: calc(70% - 32px);
	}
}

body .cart > .items :is(.list){
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	> li{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px;
		border: 1px solid hsl(var(--col-skyblue), 75%, 50%);
	}
	> li > *{
		width:calc((100% - (8px * 3)) / 4);
		border: 1px solid hsl(var(--col),0%,40%);
		text-align: center;
		border-radius: 5px;
	}
	> li .title{
		width: 100%;
		border: none;
		text-align: left;
	}
}

body .cart > .items .totalWrap{
	width: 30%;
	background: hsl(var(--col-skyblue), 75%, 90%);
	padding: 8px;
	border: 1px solid hsl(var(--col-skyblue), 75%, 60%);
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	> *{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 8px;
		gap: 16px;
		border-bottom: 1px dotted hsl(var(--col-skyblue), 75%, 60%);
	}
	.createNodePriceMinMsg {
		color: #000 !important;
		* {
			color: #000 !important;
		}
	}
	> *:first-of-type{
		margin-top: -1px;
	}
	> * > span{
		width: calc(65% - 16px);
		font-size: 1.6rem;
	}
	> * > span:first-of-type{
		width:35%;
		text-align: right;
	}
	> * > span.note{
		width:100%;
		color: hsl(var(--col-yellow),75%,40%);
		font-size: 1.4rem;
		line-height: 120%;
	}
	> * > span.note br{
		margin-block:8px ;
	}
}

body .cart > .items .orders a{
	display: block;
	background: hsl(var(--col-red),75%,50%);
	padding:16px 24px;
	font-size: 1.6rem;
	color: #fff;
	width: 100%;
	text-align: center;
	border-radius: 10px;
}

body main.smallWidth {
	max-width: 600px;
	margin-inline: auto;
}

body :is(.cart,.memberIdx,.confirmation,.contact) > .items .inputField{
	padding:8px 24px;
	> div:not(:first-of-type) {
		margin-top: 16px;
	}
	> * > *,
	> .separate > * > *{
		display: block;
		width: 100%;
	}
}


body :is(.cart, .memberIdx) > .items .inputField > .separate{
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

body :is(.cart, .memberIdx) > .items .inputField > .postalCode{
	display: flex;
	align-items: center;
}

body :is(.cart, .memberIdx) > .items .inputField > .postalCode a{
	width: auto;;
	display: inline-block;
	padding:8px 24px;
	border-radius: 5px;
	background: hsl(var(--col),0%,40%);
}

body :is(.cart, .memberIdx, .confirmation, .contact) form {
	:is(input[type=text], input[type=number], textarea) {
		border-color: hsl(var(--col), 0%, 20%);
	}
}

body :is(.cart, .memberIdx) > .items .inputField > .separate > *{
	width:calc((100% - 24px) / 2)
}

body :is(.cart, .memberIdx, .confirmation, .contact) > .items .inputField > .submitWrap{
	justify-content: center;
}

body :is(.cart, .memberIdx, .confirmation, .contact) > .items .inputField > .submitWrap > *
{
	width:auto;
	color: #000;
	display: inline-block;
}

body :is(.cart,.memberIdx,.contact) > .items .inputField input{
	max-width: 600px;
}

body :is(.cart,.memberIdx,.contact) > .items .inputField :is(textarea,input){
	color: hsl(var(--col),0%,30%);
}

body :is(.cart,.memberIdx,.contact) > .items .jqueryFilterMsg{
	width:100%;
}

body > :is(.memberIdx,.member,.confirmation,.contact){
	width:50%;
	max-width:600px;
}

body :is(.memberIdx,.confirmation) > .items .inputField input{
	max-width: none;
}

body :is(.cart,.memberIdx,.confirmation,.contact) > .items .inputField > *:not(.submitWrap){
	padding-inline:0 ;
}

body :is(.cart,.memberIdx,.confirmation,.contact) > .items .inputField > *.w100{
	width:100%;
}

body :is(.cart,.memberIdx,.confirmation,.contact) > .items .inputField > *.w100 input{
	width: 100%;
	max-width: none;
}

body .memberIdx .inputMode{
	display: flex;
	gap:24px;
	justify-content: flex-end;
	margin-top: 32px;
	.inputMode a{
		text-align: center;
		width: calc((100% - 24px) / 2);
		background:hsl(var(--col),0%,40%);
		border-radius: 5px;
		padding: 4px 24px;
	}	
}

body .memberIdx 
body .member > *{
	margin-bottom: 24px;
}

body .member nav{
	display: flex;
	gap:24px;
	> *{
		padding: 8px 16px;
		flex: 1;
		background: hsl(var(--col-skyblue), 75%, 95%);
		border-radius: 5px;
		text-align: center;
	}
	.orders{
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}
	.orders > *{
		width: 100%;;
		border-bottom: 1px solid hsl(var(--col),0%,90%);
		padding-block: 16px;
	}
	.orders > * > *{
		display: block;
	}
	
}

body .guide p br{
	margin-block: 8px;
}

body .guide section p:not(:first-of-type){
	margin-top: 24px;
}

body .guide section p:last-of-type{
	border-bottom: 1px solid hsl(var(--col),0%,30%);
	padding-bottom: 24px;
}

body .contact .caution{
	padding:16px;
	text-align: center;
	border: 8px solid hsl(var(--col),0%,20%);
	p{
		text-align: left;
	}
	.title{
		text-align: center;
		font-size: 1.8rem;
		font-weight: bold;
	}
	a{
		margin: 32px auto 0;
		display: inline-block;
		padding:8px 64px;
		font-size: 1.6rem;
		background: hsl(var(--col-red),75%,50%);
		border-radius: 10px;
		color: #fff;
	}
}

.bulkArticleWrap{
	position: relative;
	background:url('/img/css/bulk.webp') ;
	border-radius: 20px;
	padding-block:24px;
}

.bulkArticleWrap::before{
	display: block;
	content: "";
	position: absolute;
	z-index: 1;
	background: hsla(var(--col),0%,0%,.75);
	border: 1px solid hsl(var(--col),0%,70%);
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	border-radius: 20px;
}

.bulkArticleWrap > *{
	position: relative;
	display: block;
	z-index: 2;
	width:100%;
	max-width: 600px;
	margin-inline: auto;
}

.bulkArticleWrap h2{
	color: yellow;
	font-size: 2.5rem;
	border-style: none;
}

.bulkArticleWrap > .description > *{
	z-index: 3;
	color: #fff;
	font-size: 1.6rem;
}

.bulkArticleWrap > .description > *:not(:last-of-type){
	margin-bottom: 8px;
}

.bulkArticleWrap a{
	background: hsl(var(--col-red),100%,50%);
	padding-block:16px;
	border-radius: 10px;
	text-align: center;
	margin-top: 16px;
	font-size: 1.6rem;
	color: #fff;
}

.bulkArticleWrap a:is(:hover,:visited){
	color: #fff;
}