/* ===================================================================

	CSS information
	author     :  (株)ジョイメイト
	browser    :  IE6.0,Firefox3.0
	since      :  2009.06.16
	
	style info :  共通部分設定
	
	tips ：
	デフォルト設定をリセット
	基本設定

=================================================================== */


/*--------------------------------------------------------------------------------
	デフォルト設定をリセット
-------------------------------------------------------------------------------- */
html {
	overflow-y: scroll;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th {
	text-align: left;
}
q:before,q:after {
	content: '';
}
object,
embed {
	vertical-align: top;
}
hr,legend {
	display: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}
img,abbr,acronym,fieldset {
	vertical-align: bottom;
	border: 0;
}
li {
	list-style-type: none;
}


/*--------------------------------------------------------------------------------
	基本設定
-------------------------------------------------------------------------------- */
body {
	background: #fff;
	color: #333;
	font-size: medium;
	font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 1.7;
	overflow-x: clip;
}
* html body {	/* for IF6 */
	font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

/*-------------------- リンク --------------------*/
a {
/*	text-decoration: underline;*/
	text-decoration: none;
	transition: 0.3s;
}
a:link {
	color: #333;
}
a:active {
	color: #333;
}
a:visited {
	color: #333;
}
a:hover {
	color: #a0d925;
/*	color: #333;*/
/*	text-decoration: none;*/
}

/*-------------------- 基本の表 --------------------*/
table {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}
table th {
	text-align: center;
	vertical-align: top;
	padding: 8px 16px;
	background: #eeeeee;
	border: 1px #bebebe solid;
}
table td {
	border: 1px #bebebe solid;
	padding: 8px 16px;
}

/*--------------------------------------------------------------------------------
	ページ全体
-------------------------------------------------------------------------------- */
body {
/*	background: url(https://img13.shop-pro.jp/PA01074/761/etc/bg.gif) left top repeat;*/
	padding-top: 4px;
	position: relative;
}
body::before {
	content: "";
	background: url(https://img13.shop-pro.jp/PA01074/761/etc_base64/aGVhZGVyX2Jn.png?cmsp_timestamp=20250624123728);
	width: 100%;
	height: 4px;
	display:block;
	position:absolute;
	top: 0;
	left: 0;
}
body::after {
	content: "";
	background: url(https://img13.shop-pro.jp/PA01074/761/etc_base64/aW1hZ2UtYmc.jpg?cmsp_timestamp=20250624113718) center center no-repeat;
	background-size: cover;
	display:block;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -10;
}

#page {
/*	width: 830px;*/
	width: 784px;/*800px - 8px * 2*/
	height: auto;
	margin: 0 auto;
	padding: 0 8px;
/*	background: url(https://img13.shop-pro.jp/PA01074/761/etc/page_bg.gif) left top repeat-y;*/
	background: #fff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}
#container {
/*	width: auto;
	height: auto;
	position: relative;*/
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	column-gap: 32px;
}
p {
	margin-bottom: 1em;
}
.strong {
	font-weight: bold;
}
.small {
	font-size: small;
}
.atten {
	font-weight: bold;
	color: red;
}
.center {
	text-align: center;
}
.liNotice {
	margin-left: 0;
	padding-left: 0;
}
.liNotice li {
	padding-left: 1.5em;
	position: relative;
}
.liNotice li::before {
	content: "※";
	display: inline-block;
	position: absolute;
	left: 0;
}

/*--------------------------------------------------------------------------------
	ヘッダー部分
-------------------------------------------------------------------------------- */
#header {
/*	width: 100%;*/
/*	height: 200px;*/
/*	background: url(https://img13.shop-pro.jp/PA01074/761/etc/header_bg.gif) left top repeat-x;*/
/*}
#headerInner {*/
	width: 100%;/* 784px//800px;*/
	height: 200px;
/*	margin: 0 auto;*/
/*	padding: 0 15px 0 15px;*/
/*	background: url(https://img13.shop-pro.jp/PA01074/761/etc/headerInner_bg.gif) left top no-repeat;*/
/*	position: relative;*/
	display: grid;
	grid-template-columns: 293px 1fr;
	grid-template-rows: 86px 1fr;
	row-gap: 15px;
}
.headerLogo {
	margin: 0;
	width: 277px;
	height: 78px;
	justify-self: end;
	align-self: end;
/*	position: absolute;
	top: 0;
	left: 24px;*/
}
/*#headerInner ul {*/
.headerLinks {
/*	width: auto;
	height: auto;
	position: absolute;
	top: 15px;
	right: 24px;*/
	font-size: x-small;
	padding-top: 15px;
	display: flex;
	justify-content: flex-end;
	column-gap: 10px;
}
/*#headerInner ul li {*/
/*.headerLinks li {
	float: left;
	margin-left: 10px;
}*/
.headerCatch {
	margin-bottom: 0;
	grid-column: 1 / 3;
	justify-self: center;
}
.fax {
	width: 170px;
	height: 70px;
	margin-bottom: 0;
	position: absolute;
	top: 47px;
	right: 24px;
}
.print {
	width: 170px;
	height: 70px;
	margin-bottom: 0;
	position: absolute;
	top: 123px;
	right: 24px;
}


/*--------------------------------------------------------------------------------
	メインコンテンツ部分
-------------------------------------------------------------------------------- */
#main {
/*	width: 595px;*/
	width: 560px;
	min-height: 1650px;
/*	padding: 10px 0 0 235px;*/
}
/** html #main {
	height: 1500px;
}*/
#main a {
	text-decoration: underline;
}
.pageHeader {
  color: #000;
  background: repeating-linear-gradient(-45deg, #20b9d9, #20b9d9 3px,#32c2e1 3px, #32c2e1 7px);
  font-size: 18px;
  font-weight: 700;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff,
    -2px 2px 0 #fff, 2px -2px 0 #fff,
    0px 2px 0 #fff,  0 -2px 0 #fff,
    -2px 0 0 #fff, 2px 0 0 #fff;
  text-box: trim-both cap alphabetic;
  padding: 16px 32px;
  margin-bottom: 16px;
  border-radius: 4px;
}
#pkz {
	font-size: 13px;
	margin-bottom: 10px;
}
.pageHeader + #pkz {
	margin-top: -6px;
}
.section {
/*	width: auto;
	height: auto;
	margin: 10px 28px 20px 0;*/
	margin: 10px 0 20px;
}
.sectionHeadline {
	margin-bottom: 16px;
	padding: 8px 16px;
	background: #eeeeee;
	border-left: 5px solid #48d1cc;
	border-bottom: 1px solid #48d1cc;
}
.grayBgHeadline {
	margin: 32px 0 16px;
	padding: 8px 16px 6px;
	background: #eeeeee;
	border-radius: 2px;
}

/*-------------------- 商品リンク --------------------*/
.goodsList {
	display: grid;
	grid-template-columns: repeat(auto-fill, 256px);
	gap: 24px 16px;
}
.goodsList_item a {
	text-decoration: none !important;
	padding: 0 16px;
	width: cacl(100% - 16px * 2);
	display: grid;
	place-content: center;
	place-items: center;
}
.goodsList_item a:hover {
	color: #333;
	opacity: 0.7;
}
.goodsList_title {
	text-align: center;
}
.goodsList_img {
	width: 160px;
	aspect-ratio: 1 / 1;
	display: grid;
	place-content: center;
}
.goodsList_price {
	background: #f5f5f5;
	font-size: 14px;
	text-align: center;
	padding: 5px;
	width: calc(100% - 5px * 2);
}

/*-------------------- ページャー --------------------*/
.pagerPosition {
	font-size: 14px;
	margin: 16px 0;
}
.pager {
	font-size: 14px;
	margin-top: 32px;
	display: flex;
	justify-content: space-between;
}
.pager_item.prev,
.pager_item.next {
	color: #bebebe;
	display: flex;
	align-items: center;
}
.pager_item svg {
	width: 24px;
	aspect-ratio: 1 / 1;
}
.pager_item:has(a) svg {
	stroke: #1da6c3;
}

/*-------------------- ご利用ガイド --------------------*/
/*---------- 送料・配送方法 ----------*/
table.guideTable th {
	vertical-align: middle;
}
table.thNowrap th {
	white-space: nowrap;
}
/*table.send {
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}
table.send th {
	width: 70px;
	padding: 5px;
	background: #eeeeee;
	border: 1px #000000 solid;
}
table.send td {
	padding: 5px;
	border: 1px #000000 solid;
}*/
/*table.sendType {
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}
table.sendType th {
	width: 200px;
	padding: 5px;
	background: #eeeeee;
	border: 1px #000000 solid;
}
table.sendType td {
	padding: 5px;
	border: 1px #000000 solid;
}*/
/*---------- お支払い方法 ----------*/
/*table.pay {
	width: 100%;
	height: auto;
	margin-bottom: 1em;
	padding-top: 5px;
}
table.pay th {
	width: 70px;
	padding: 5px;
	background: #eeeeee;
	border: 1px #000000 solid;
}
table.pay td {
	padding: 5px;
	border: 1px #000000 solid;
}*/
/*---------- お届け日 ----------*/
/*table.day {
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}
table.day th {
	width: 120px;
	padding: 5px;
	background: #eeeeee;
	border: 1px #000000 solid;
}
table.day td {
	padding: 5px;
	border: 1px #000000 solid;
}*/

/*-------------------- 名入れ・無料サンプルフォーム --------------------*/
legend {
	width: auto;
	padding: 3px;
	margin-bottom: 3px;
	background: #eeeeee;
	display: inline;
	font-weight: bold;
}
fieldset table {
	width: 100%;
	height: auto;
	margin: 5px 0 15px 0;
}
fieldset table th {
	width: 190px;
	height: auto;
	padding: 5px;
	background: #eeeeee;
	border: 1px #000 solid;
	font-weight: normal;
}
fieldset table td {
	width: auto;
	height: auto;
	padding: 5px;
	border: 1px #000 solid;
}
fieldset table td input {
	width: 300px;
	height: auto;
	padding: 3px;
	font-size: medium;
}
fieldset table td input.mini {
	width: 100px;
	height: auto;
	padding: 3px;
	font-size: medium;
}
fieldset textarea {
	width: 750px;
	height: 200px;
	margin: 5px 0 15px 0px;
	padding: 3px;
}
.button {
	width: auto;
	height: auto;
	margin-top: 15px;
	text-align: center;
}
.button input {
	width: 150px;
	height: auto;
	padding: 20px 0;
	background: #dedede;
	border-top: 1px #bebebe solid;
	border-left: 1px #bebebe solid;
	border-right: 1px #eeeeee solid;
	border-bottom: 1px #eeeeee solid;
	font-size: large;
	font-weight: bold;
}

/*-------------------- 着色タイプごみ袋特設ページ --------------------*/
dl.colortype dt {

}
dl.colortype dd {
	padding-left: 105px;
	margin-bottom: 2em;
}


/*--------------------------------------------------------------------------------
	サブコンテンツ部分
-------------------------------------------------------------------------------- */
#sub {
/*	width: 200px;*/
	width: 192px;
	height: auto;
/*	padding-left: 23px;*/
/*	position: absolute;
	top: 10px;
	left: 0;*/
}
.cart {
/*	width: auto;
	height: auto;*/
	width: 192px;
	height: 76px;
	margin-bottom: 15px;
}
.fax {
	width: auto;
	height: auto;
	margin-bottom: 15px;
}

/*-------------------- 商品リンク --------------------*/
.subCatTitle {
	margin-top: 16px;
}
.itemList li a {
	display: flex;
	padding: 0 16px;
	height: 47px;
	border-bottom: 1px dotted #a0d925;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.itemList li a::after {
	content: "";
	background: url(https://img13.shop-pro.jp/PA01074/761/etc_base64/Y2F0LWxpc3RfYXJyb3c.png?cmsp_timestamp=20250624130642) no-repeat center center;
	background-size: contain;
	width: 9px;
	height: 15px;
}
/*.itemList {
	width: 191px;
	height: auto;
	margin-bottom: 15px;
	border-top: 1px #20b2aa solid;
	font-size: 90%;
}
.itemList a {
	display: block;
	text-decoration: none;
}
.itemList li {
	width: auto;
	height: auto;
	padding: 5px 3px;
	border-bottom: 1px #20b2aa solid;
}*/


/*-------------------- サブメニュー --------------------*/
.subMenu {
/*	padding-top: 15px;*/
	margin-top: 48px;
}
/*.subMenu li {
	width: auto;
	height: auto;
	margin-bottom: 5px;
}*/
.subMenu li a {
	font-size: 14px;
	padding: 0 0 0 4px;
	height: 32px;
	display: flex;
	align-items: baseline;
	column-gap: 8px;
}
.subMenu li a::before {
	content: "";
	background: url(https://img13.shop-pro.jp/PA01074/761/etc_base64/YXJyb3ctYmFkZ2UtcmlnaHQ.png?cmsp_timestamp=20250624131448) no-repeat center center;
	background-size: contain;
	width: 10px;
	height: 10px;
}

/*--------------------------------------------------------------------------------
	フッター部分
-------------------------------------------------------------------------------- */
#footer {
	width: auto;
	height: auto;
	padding: 10px 5px;
	text-align: center;
	font-size: x-small;
}