@charset "UTF-8";

/* ----------------------------------
 Layout
---------------------------------- */
/* 共通 */
.wrapper { width: 100%; min-width: 1200px; background: #fff; overflow-x: hidden;}
.pane-globalnav { position: relative;}

/* 標準 */
.container { width: auto;}
.pane-contents { padding: 30px 0 50px 0;}
:has(.pane-footer .block-footer-box-frame) .pane-contents { 
	min-height: calc(100vh - 570px);
}
.pane-contents .container {
  width: auto;
  max-width: var(--layout-max-width);
  padding: var(--layout-base-padding);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pane-contents .container .pane-left-menu  { width: 230px; margin: 0;}
.pane-contents .container .pane-main       { width: 100%; margin: 0 auto;}
.pane-contents .container .pane-left-menu + .pane-main { width: calc(100% - 290px);}
.pane-contents .container .pane-right-menu { width: 100%; margin: 80px auto 0;}

/* 購入フロー */
.pane-order-contents { padding-top: 50px; padding-bottom: 50px;}
.pane-order-contents .container {
  width: auto;
  max-width: var(--layout-max-width);
  padding: var(--layout-base-padding);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* ----------------------------------
 MenuBg
---------------------------------- */
.bgfilter { width: 100%; height: 100%; background: rgba(51,51,51,0.6); position: absolute; top: 0; left: 0; z-index: 100; display: none;}
.bgfilter.menu-on,
.bgfilter.category-menu-on { display: block;}

/* ----------------------------------
 Header
---------------------------------- */
.pane-header { height: var(--layout-header-height); position: relative;}
.pane-header #header_box {
  width: 100%;
	min-width: 1200px;
  height: var(--layout-header-height);
  padding: 4px 60px 0;
	border-radius: 0 0 60px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
	background: #FFF;
	box-shadow: var(--box-shadow);
}
.pane-header:not(.pane-order-header) #header_box { position: fixed; top: 0; left: 0; z-index: 103;}
.pane-header #header_box .block-header-logo { width: 230px; min-width: 230px; padding: 0 60px 0 0; margin: 0; line-height: 1.0;}
.pane-header #header_box .block-header-logo a { transition: var(--transition);}
.pane-header #header_box .block-header-logo a:hover { opacity: var(--opacity);}

.pane-header #header_box .block-headermenu { margin: 0 auto 0 0;}
.pane-header #header_box .block-headermenu-list { padding-right: 40px; display: flex; align-items: center; column-gap: 32px;}
.pane-header #header_box .block-headermenu-list > li { height: 64px; font-size: var(--font-size-main); font-weight: 700; word-break: keep-all; display: flex; align-items: center; cursor: pointer;}
.pane-header #header_box .block-headermenu-list > li > a { font-size: var(--font-size-main); font-weight: 700; text-decoration: none; color: var(--color-base); transition: var(--transition);}
.pane-header #header_box .block-headermenu-list > li > a:hover { color: var(--color-sub);}
.pane-header #header_box .block-headermenu-list > li > a::after {
  content: '';
  width: 8px;
  height: 8px;
	margin: 0 0 0 10px;
  border-right: var(--color-base) 1px solid;
  border-top: var(--color-base) 1px solid;
  position: relative;
	top: -2px;
  display: inline-block;
  transform: rotate(45deg);
	transition: var(--transition); 
}
.pane-header #header_box .block-headermenu-list > li > a:hover::after { border-color: var(--color-sub);}
.pane-header #header_box .block-headermenu-list li.hmenu-category { transition: var(--transition);}
.pane-header #header_box .block-headermenu-list li.hmenu-category::after {
  content: '';
  width: 8px;
  height: 8px;
	margin: 0 0 0 10px;
  border-right: var(--color-base) 1px solid;
  border-top: var(--color-base) 1px solid;
  position: relative;
	top: -2px;
  display: block;
  transform: rotate(135deg);
	transition: var(--transition); 
}
.pane-header #header_box .block-headermenu-list li.hmenu-category:hover { color: var(--color-sub);}
.pane-header #header_box .block-headermenu-list li.hmenu-category:hover::after { border-color: var(--color-sub);}
.pane-header #header_box .block-headermenu-list li.hmenu-category.active { color: var(--color-sub);}
.pane-header #header_box .block-headermenu-list li.hmenu-category.active::after { border-color: var(--color-sub); display: block;	top: 2px; transform: rotate(-45deg);}

.pane-header #header_box .block-headernav { margin: 0 0 0 auto; display: flex; align-items: center; column-gap: 28px;}
.pane-header #header_box .block-headernav-list { display: flex; align-items: center; column-gap: 56px;}
.pane-header #header_box .block-headernav-list li { height: 64px; word-break: keep-all; position: relative;}
.pane-header #header_box .block-headernav-list li + li::before { content: ''; height: 20px; border-left: var(--border-solid3); position: absolute; left: -28px; top: calc(50% - 10px);}
.pane-header #header_box .block-headernav-list li a {
  width: 100%;
  height: 100%;
  font-size: var(--font-size-sub);
	font-weight: 700;
  text-decoration: none;
  color: var(--color-base);
  display: flex;
  align-items: center;
  transition: var(--transition);
}
.pane-header #header_box .block-headernav-list li a:hover { color: var(--color-sub);}
.pane-header #header_box .block-headernav-buttons { display: flex; align-items: center; column-gap: 16px;}
.pane-header #header_box .block-headernav-buttons li { height: 48px; position: relative; transition: var(--transition);}
.pane-header #header_box .block-headernav-buttons li.hnav-cart { width: 176px;}
.pane-header #header_box .block-headernav-buttons li.hnav-cart a {
  width: 100%;
  height: 100%;
	padding: 0 0 0 20px;
	border: var(--color-yellow) 2px solid;
  border-radius: 72px;
  font-size: var(--font-size-sub);
  font-weight: 700;
	text-decoration: none;
  color: var(--color-brown);
  display: flex;
  justify-content: center;
  align-items: center;
	background-color: var(--color-yellow);
	background-image: url("../../img/usr/common/ico_cart_br.png");
	background-repeat: no-repeat;
	background-position: 16px center;
	-webkit-background-size: 30px auto;
	background-size: 30px auto;
  position: relative;
	cursor: pointer;
	transition: var(--transition);
}
.pane-header #header_box .block-headernav-buttons li.hnav-cart a:hover { background-color: #FFF;}
.pane-header #header_box .block-headernav-buttons li.hnav-cart a::before { content: 'カートを見る'; display: inline;}
.pane-header #header_box .block-headernav-buttons li.hnav-contact { width: 200px;}
.pane-header #header_box .block-headernav-buttons li.hnav-contact .switch { 
  width: 100%;
  height: 100%;
	padding: 0 0 0 24px;
	border: var(--color-orange) 2px solid;
  border-radius: 72px;
  font-size: var(--font-size-sub);
  font-weight: 700;
	text-decoration: none;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
	background-color: var(--color-orange);
	background-image: url("../../img/usr/common/ico_faq_w.png");
	background-repeat: no-repeat;
	background-position: 14px center;
	-webkit-background-size: 20px auto;
	background-size: 20px auto;
	transition: var(--transition);
}
.pane-header #header_box .block-headernav-buttons li.hnav-contact .switch:hover { color: var(--color-orange); background-color: #FFF; background-image: url("../../img/usr/common/ico_faq_or.png");}
.pane-header #header_box .block-headernav-buttons li.hnav-contact .switch::before { content: 'お問い合わせ・FAQ'; display: inline;}
.pane-header #header_box .block-headernav--cart-count {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  font-size: var(--font-size-xsmall);
	color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
	background: var(--color-orange);
	position: absolute;
	top: -2px;
	right: -2px;
}

@media screen and (max-width: 1400px) {
	.pane-header #header_box .block-headermenu-list { column-gap: 15px;}
	.pane-header #header_box .block-headernav-list { column-gap: 20px;}
	.pane-header #header_box .block-headernav-list li + li::before { left: -10px;}
	.pane-header #header_box .block-headernav-buttons { column-gap: 10px;}
}
@media screen and (max-width: 1340px) {
	.pane-header #header_box .block-headermenu-list li { letter-spacing: -1px;}
	.pane-header #header_box .block-headernav-list li { letter-spacing: -1px;}
	.pane-header #header_box .block-headernav-buttons li.hnav-cart { width: 132px;}
	.pane-header #header_box .block-headernav-buttons li.hnav-cart a::before { content: 'カート';}
	.pane-header #header_box .block-headernav-buttons li.hnav-contact { width: 156px;}
	.pane-header #header_box .block-headernav-buttons li.hnav-contact .switch::before { content: 'お問い合わせ';}
}

/* ----------------------------------
 Header POPMENU
---------------------------------- */
#hnav_contact_menu { min-width: 250px; position: absolute; top: 66px; left: 0; z-index: 51; display: none;}
#hnav_contact_menu::before,
#hnav_contact_menu::after {
  content: '';
  border-right: 8px solid transparent;
  border-bottom: 16px solid #DEDEDE;
  border-left: 8px solid transparent;
  display: block;
  position: absolute;
  top: -16px;
  left: calc(50% - 8px);
	z-index: 2;
}
#hnav_contact_menu::after {
  border-bottom: 16px solid #FFF;
	top: -14px;
}
#hnav_contact_menu * { word-break: keep-all;}
#hnav_contact_menu .hnav-contact-menu-inner { padding: 20px; border: #DEDEDE 1px solid; border-radius: var(--border-radius); background: #FFF; box-shadow: var(--box-shadow);}
#hnav_contact_menu .list { margin: 0 0 5px;}
#hnav_contact_menu .list li + li { margin-top: 5px; font-size: var(--font-size-main);}
#hnav_contact_menu .list li a {
  padding: 8px 30px 8px 10px;
  font-size: var(--font-size-main);
  text-decoration: none;
  line-height: var(--line-height-low);
  display: flex;
  align-items: center;
  position: relative;
	transition: var(--transition);
}
#hnav_contact_menu .list li a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: var(--color-base) 2px solid;
  border-top: var(--color-base) 2px solid;
  position: absolute;
  right: 16px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
#hnav_contact_menu .list li a:hover { color: var(--color-sub);}
#hnav_contact_menu .list li a:hover::after { border-right: var(--color-sub) 2px solid; border-top: var(--color-sub) 2px solid;}
#hnav_contact_menu .box { padding: 18px 14px; border-radius: var(--border-radius-half); background: var(--color-bg);}
#hnav_contact_menu .box + .box { margin-top: 12px;}
#hnav_contact_menu .ttl { margin: 0 0 5px; font-size: var(--font-size-sub); font-weight: 500; text-align: center;}
#hnav_contact_menu .number { display: flex; justify-content: center; align-items: center;}
#hnav_contact_menu .number .icon { width: 30px; margin: 0 10px 0 0;}
#hnav_contact_menu .number .text { font-size: 20px; font-weight: 700; color: var(--color-base);}
#hnav_contact_menu .form .design-button-frame { height: 32px;}
#hnav_contact_menu .form .design-button { padding-right: 10px; font-size: var(--font-size-small);}
#hnav_contact_menu .form .design-button::after { right: 10px;}
#hnav_contact_menu .design-close { margin: 12px 0 0 0; text-align: center;}
#hnav_contact_menu .design-close-btn { box-shadow: var(--box-shadow);}

@media screen and (max-width: 1340px) {
	#hnav_contact_menu { left: auto; right: 0;}
	#hnav_contact_menu::before,
	#hnav_contact_menu::after { left: calc(50% + 39px);}
}

/* ----------------------------------
 Globalnav
---------------------------------- */
.pane-globalnav { padding: calc(48px + var(--layout-header-height)) 0 48px; background: #FFF; position: fixed; top: 0; left: 0; z-index: 102; display: none;}
.pane-globalnav .block-globalnav { max-width: var(--layout-max-width); padding: var(--layout-base-padding); margin: 0 auto;}
.pane-globalnav .block-globalnav .design-close { width: 44px; position: absolute; left: calc(50% - 22px); bottom: -64px;}
.pane-globalnav .block-globalnav .design-close .design-close-btn { box-shadow: var(--box-shadow);}
.pane-globalnav .block-globalnav .block-globalnav-category-list { margin: 0 0 24px;}
.pane-globalnav .block-globalnav .block-dynamic-category--body { display: flex; flex-wrap: wrap;}
.pane-globalnav .block-globalnav .block-dynamic-category--row { width: 20%; margin: 0 0 35px 0; font-size: var(--font-size-main);}
.pane-globalnav .block-globalnav .block-dynamic-category--row a {
	padding: 0 55px 0 0;
  font-size: var(--font-size-main);
  text-decoration: none;
  color: var(--color-base);
  display: block;
	position: relative;
}
.pane-globalnav .block-globalnav .block-dynamic-category--row a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: var(--color-base) 2px solid;
  border-top: var(--color-base) 2px solid;
  position: absolute;
  right: 50px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
.pane-globalnav .block-globalnav .block-dynamic-category--row a:hover { text-decoration: none; color: var(--color-sub);}
.pane-globalnav .block-globalnav .block-dynamic-category--row a:hover::after { border-right: var(--color-sub) 2px solid; border-top: var(--color-sub) 2px solid;}

@media screen and (max-width: 1200px) {
	.pane-globalnav .block-globalnav .block-dynamic-category--row  { width: 25%;}
}

/* グローバルナビ＆TOPページ検索窓 */
.block-global-search { max-width: 794px; margin: 0;}
.block-global-search form { width: 100%; height: 56px; display: flex; justify-content: space-between; align-items: center;}
.block-global-search form .block-global-search--keyword {
  width: calc(100% - 56px);
  height: 56px;
  min-height: 56px;
	padding: 0 16px;
  border: var(--border-solid3);
  border-right: none;
	border-radius: 4px 0 0 4px;
	font-size: 18px;
	font-weight: 500;
  display: flex;
  align-items: center;
}
.block-global-search form .block-global-search--submit {
  width: 56px;
  height: 56px;
	border: var(--button-bg2) 2px solid;
	border-radius: 0 4px 4px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
	background: var(--button-bg2) url("../../img/usr/common/ico_search_w.png") no-repeat center center / 32px 32px;
	transition: var(--transition);
}
.block-global-search form .block-global-search--submit:hover {
	opacity: var(--opacity);
}

/* ----------------------------------
 重要なお知らせ
---------------------------------- */
#block_of_top_important_news { padding: 0; margin: 0 0 100px;}
.block-news-list li { margin: 0; border-bottom: var(--border-dot); background: #FFF;}
.block-news-list li .nolink,
.block-news-list li a { padding: 16px 0; text-decoration: none; display: block; position: relative;}
.block-news-list li a:hover { text-decoration: none; color: var(--color-sub);}
.block-news-list dl { display: flex; justify-content: space-between; align-items: center;}
.block-news-list dt { width: 250px; display: flex; align-items: center; position: relative;}
.block-news-list dt::after { content: ''; height: 16px; border-left: var(--border-solid1); display: block; position: absolute; top: calc(50% - 8px); right: 20px;}
.block-news-list dt .icon { width: 86px;}
.block-news-list dt .icon img { height: 24px; vertical-align: top;}
.block-news-list dt .icon .ico-important {
  width: 70px;
  height: 24px;
  display: block;
  font-size: 0;
  background-image: url(../../img/icon/important.png);
	background-repeat: no-repeat;
	background-position: left top;
	-webkit-background-size: 70px 24px;
	background-size: 70px 24px;
}
.block-news-list dt .date { font-size: var(--font-size-main); font-weight: 700; line-height: 1.0;}
.block-news-list dd {
  width: calc(100% - 230px);
	padding: 0 30px 0 0;
  font-size: var(--font-size-main);
  font-weight: 700;
  line-height: 1.0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
	position: relative;
}
.block-news-list li a dd::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: var(--color-base) 2px solid;
  border-top: var(--color-base) 2px solid;
  position: absolute;
  right: 16px;
  top: calc(50% - 4px);
  display: block;
  transform: rotate(45deg);
}
.block-news-list li a:hover dd::after { border-color: var(--color-sub);}

/* ----------------------------------
 重要なお知らせのピックアップ表示
---------------------------------- */
#header_pickup_important_news { padding: 12px 0; background: transparent;}
#header_pickup_important_news .block-news-list { max-width: var(--layout-max-width); padding: var(--layout-base-padding); margin: 0 auto;}
#header_pickup_important_news .block-news-list li { border-bottom: none; background: transparent;}
#header_pickup_important_news .block-news-list li + li { border-top: var(--border-dot);}
#header_pickup_important_news .block-news-list li .nolink,
#header_pickup_important_news .block-news-list li a { background: transparent;}

/* ----------------------------------
 Footer
---------------------------------- */
.pane-footer { padding: 0; margin: 0; position: relative;}
.pane-footer .container { width: 100%; max-width: unset; padding: 0;}
.pane-footer .block-switcher { display: none !important;}
.pane-footer .block-footer-inner { background: var(--color-yellow); position: relative;}
.pane-footer:has(.block-footer-box-frame) .block-footer-inner::before {
	content: '';
	width: 100%;
	height: 48px;
	display: block;
	background-color: #FFF;
	background-image: url("../../img/usr/footer/footer_bg.png");
	background-repeat: no-repeat;
	background-position: top left;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.pane-footer .block-footer-box-frame {
  max-width: 1466px;
  padding: 110px 50px 5px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
	column-gap: 70px;
}
.pane-footer .block-footer-box-frame .block-footer-box { display: flex; flex-direction: column;}
.pane-footer .block-footer-box.head { width: 228px;}
.pane-footer .block-footer-box.head .logo { width: 228px;}
.pane-footer .block-footer-box.head .logo a { transition: var(--transition); display: block;}
.pane-footer .block-footer-box.head .logo a img { transition: var(--transition);}
.pane-footer .block-footer-box.head .logo a:hover img { opacity: 0;}
.pane-footer .block-footer-box.head .logo a:hover { background: url("../../img/usr/common/logo_kantenpapa_w.png") no-repeat left top / 228px auto;}
.pane-footer .block-footer-sns--list { margin: auto 0 40px; display: flex; justify-content: flex-end; flex-wrap: nowrap; column-gap: 24px;}
.pane-footer .block-footer-sns--list li { width: 60px;}
.pane-footer .block-footer-sns--list li a { width: 100%; height: 100%; padding: 10px; transition: var(--transition); display: flex; justify-content: center; align-items: center;}
.pane-footer .block-footer-sns--list li.sns-youtube a { padding: 10px 5px;}
.pane-footer .block-footer-sns--list li a:hover { opacity: var(--opacity);}

.pane-footer .block-footernav--item-list { max-width: 440px; margin: 0 0 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.pane-footer .block-footernav--item-list li { width: 46.26%; margin: 0 0 32px 0; font-size: var(--font-size-main); line-height: var(--line-height-low);}
.pane-footer .block-footernav--item-list li a { color: var(--color-base); text-decoration: none; transition: var(--transition);}
.pane-footer .block-footernav--item-list li a:hover { color: var(--color-sub);}
.pane-footer .block-footernav--item-list li a[target="_blank"]::after {
	content: '';
	width: 14px;
	height: 14px;
	margin: 0 0 0 8px;
	vertical-align: middle;
	display: inline-block;
	background: var(--image-icon-blank);
}
.pane-footer .block-footernav--item-list li a[target="_blank"]:hover::after { background: var(--image-icon-blank-or);}

.pane-footer .block-footer-banner--list { max-width: 480px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.pane-footer .block-footer-banner--list li { width: calc(50% - 8px); margin: 16px 0 0 0; background: #FFF;}
.pane-footer .block-footer-banner--list li:nth-child(1),
.pane-footer .block-footer-banner--list li:nth-child(2) { margin-top: 0;}
.pane-footer .block-footer-banner--list li a { transition: var(--transition);}
.pane-footer .block-footer-banner--list li a:hover { opacity: var(--opacity);}

/* コピーライト */
.pane-footer .block-copyright {
	height: 70px;
	max-width: var(--layout-max-width);
  padding: var(--layout-base-padding);
  margin: 0 auto;
	font-size: var(--font-size-sub);
	color: var(--font-size-base);
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* ページトップへ */
.pane-footer .block-page-top { display: none; position: fixed; top: auto; bottom: 16px; right: 16px; z-index: 2;}
.pane-footer .block-page-top a { width: 54px; height: 54px; border-radius: var(--border-radius-half); display: block; background-color: var(--button-bg2);}
.pane-footer .block-page-top a:after {
  content: '';
  width: 16px;
  height: 16px;
  border-right: #FFF 2px solid;
  border-top: #FFF 2px solid;
  display: block;
  position: absolute;
  left: calc(50% - 8px);
  top: calc(50% - 4px);
  transform: rotate(-45deg);
}

/* ----------------------------------
 LeftFrame Contents
---------------------------------- */
.pane-left-menu .design-headline { margin: 0 0 20px;}
.pane-left-menu .pane-block--title {
	padding: 2px 0 2px 36px;
	margin: 0 0 20px;
	border: none;
	font-size: var(--font-size-H4);
	font-weight: 700;
	line-height: var(--line-height-low);
	color: var(--color-main);
	position: relative;
}
.pane-left-menu .pane-block--title::before {
	content: '';
	width: 24px;
	height: 24px;
	position: absolute;
	top: 0;
	left: 0;
	background-image: var(--ttl-image1);
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: 24px 24px;
	background-size: 24px 24px;
}

/* ボタン */
.pane-left-menu .design-button-frame .design-button { border: var(--button-bg1) 2px solid; background-color: var(--button-bg1);}
.pane-left-menu .design-button-frame .design-button:hover { text-decoration: none; color: var(--button-bg1); background-color: #FFF;}
.pane-left-menu .design-button-frame .design-button:hover::after { border-color: var(--button-bg1);}

/* ツリーパーツ */
.pane-left-menu [class*="block-"][class*="-tree-"][class*="image"] { font-size: 0;}
.pane-left-menu ul[class*="block-"][class*="-tree-"] > li > a + .block-tree-item-opener { width: 40px; height: 48px; position: absolute; top: 0; right: 0; cursor: pointer;}
.pane-left-menu ul[class*="block-"][class*="-tree-"] > li > a + .block-tree-item-opener span { 
	width: 20px;
	height: 20px;
	border-radius: 20px;
	display: block;
	background: var(--button-bg1);
	position: absolute;
	top: calc(50% - 10px);
	right: 12px;
}
.pane-left-menu ul[class*="block-"][class*="-tree-"] > li > a + .block-tree-item-opener span::before,
.pane-left-menu ul[class*="block-"][class*="-tree-"] > li > a + .block-tree-item-opener span::after {
  content: '';
  width: 10px;
  height: 0;
  border: none;
  border-top: #FFF 1px solid;
  display: block;
  position: absolute;
  top: calc(50% - 0.5px);
  right: calc(50% - 5px);
  transform: rotate(0deg);
  transition: all 0.3s;	
}
.pane-left-menu ul[class*="block-"][class*="-tree-"] > li > a + .block-tree-item-opener span::before { transform: rotate(90deg);}
.pane-left-menu ul[class*="block-"][class*="-tree-"] > li > a + .block-tree-item-opener.is-open span::before { transform: rotate(0deg);}

/* カテゴリで探す */
#block_of_categorytree { padding: 0 0 32px; margin: 0 0 32px; border-bottom: var(--border-dot);}
#block_of_categorytree .design-button-frame { height: 48px; margin: 16px 16px 0;}
.pane-left-menu ul.block-category-tree--level-1 > .block-category-tree--item__open,
.pane-left-menu ul.block-category-tree--level-1 > .block-category-tree--item { border-top: 0; border-bottom: var(--border-pane-left-menu);}
.pane-left-menu ul > .block-category-tree--item__open,
.pane-left-menu ul > .block-category-tree--item { border-top: var(--border-pane-left-menu); border-bottom: 0;}
.pane-left-menu ul.block-category-tree--items { padding: 0; background: #FFF;}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-1 { padding: 0;}
.pane-left-menu ul.block-category-tree--items:not(.block-category-tree--level-1) { display: none;}
.pane-left-menu ul.block-category-tree--items li { text-indent: 0px !important;}
.pane-left-menu ul.block-category-tree--items > li { position: relative;}
.pane-left-menu ul.block-category-tree--items > li > a {
  min-height: 48px;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  background-image: var(--image-arrow-bl);
	background-repeat: no-repeat;
	background-position: calc(100% - 14px) center;
	background-size: 12px auto;
}
.pane-left-menu ul.block-category-tree--items > li > a:hover { color: var(--color-sub); background-image: var(--image-arrow-or);}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-1 > li > a { background-color: #FFF;}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-1 > li > a + .block-category-tree--item-opener { height: 48px;}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-3 > li > a { background-color: #FFF;}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-4 > li > a { background-color: #FFF;}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-1 a { padding: 0 24px 0 12px; font-size: var(--font-size-sub); font-weight: 500;}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-2 a { padding: 0 24px 0 24px; font-size: var(--font-size-sub); font-weight: 500;}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-3 a { padding: 0 24px 0 36px; font-size: var(--font-size-sub); font-weight: 500;}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-4 a { padding: 0 24px 0 48px; font-size: var(--font-size-sub); font-weight: 500;}
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-1 a.has-children,
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-2 a.has-children,
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-3 a.has-children,
.pane-left-menu ul.block-category-tree--items.block-category-tree--level-4 a.has-children { min-height: 48px !important; padding-right: 40px !important; background: none;}

/* ジャンルで探す */
#block_of_genretree { padding: 0 0 32px; margin: 0 0 32px; border-bottom: var(--border-dot);}
.pane-left-menu ul.block-genre-tree--level1 > .block-genre-tree--item__open,
.pane-left-menu ul.block-genre-tree--level1 > .block-genre-tree--item { border-top: 0; border-bottom: var(--border-pane-left-menu);}
.pane-left-menu ul > .block-genre-tree--item__open,
.pane-left-menu ul > .block-genre-tree--item { border-top: var(--border-pane-left-menu); border-bottom: 0;}
.pane-left-menu ul.block-genre-tree--items { padding: 0; background: #FFF;}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level1 { padding: 0;}
.pane-left-menu ul.block-genre-tree--items:not(.block-genre-tree--level1) { display: none;}
.pane-left-menu ul.block-genre-tree--items li { text-indent: 0px !important;}
.pane-left-menu ul.block-genre-tree--items > li { position: relative;}
.pane-left-menu ul.block-genre-tree--items > li > a {
  min-height: 48px;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  background-image: var(--image-arrow-bl);
	background-repeat: no-repeat;
	background-position: calc(100% - 14px) center;
	background-size: 12px auto;
}
.pane-left-menu ul.block-genre-tree--items > li > a:hover { color: var(--color-sub); background-image: var(--image-arrow-or);}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level1 > li > a { background-color: #FFF;}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level1 > li > a + .block-genre-tree--item-opener { height: 48px;}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level3 > li > a { background-color: #FFF;}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level4 > li > a { background-color: #FFF;}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level1 a { padding: 0 24px 0 12px !important; font-size: var(--font-size-sub); font-weight: 500;}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level2 a { padding: 0 24px 0 24px !important; font-size: var(--font-size-sub); font-weight: 500;}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level3 a { padding: 0 24px 0 36px !important; font-size: var(--font-size-sub); font-weight: 500;}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level4 a { padding: 0 24px 0 48px !important; font-size: var(--font-size-sub); font-weight: 500;}
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level1 a.has-children,
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level2 a.has-children,
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level3 a.has-children,
.pane-left-menu ul.block-genre-tree--items.block-genre-tree--level4 a.has-children { min-height: 48px !important; padding-right: 40px !important; background: none;}

/* キーワードで探す */
#block_of_searchbox { padding: 0 0 32px; margin: 0 0 32px; border-bottom: var(--border-dot);}
#block_of_searchbox .block-search-box--form form { width: 100%; height: 56px; display: flex; justify-content: space-between; align-items: center;}
#block_of_searchbox .block-search-box--form .block-search-box--keyword {
  width: calc(100% - 40px);
  height: 40px;
  min-height: 40px;
	padding: 0 16px;
  border: var(--border-solid3);
  border-right: none;
	border-radius: 4px 0 0 4px;
	font-size: var(--font-size-sub);
  display: flex;
  align-items: center;
	background: #FFF;
}
#block_of_searchbox .block-search-box--form .block-search-box--search-submit {
  width: 40px;
  height: 40px;
	border: var(--button-bg2) 2px solid;
	border-radius: 0 4px 4px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
	background-color: var(--button-bg2);
	background-image: url("../../img/usr/common/ico_search_w.png");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: 26px 26px;
	background-size: 26px 26px;
	transition: var(--transition);
}
#block_of_searchbox .block-search-box--form .block-search-box--search-submit:hover { opacity: var(--opacity);}
#block_of_searchbox .block-icon-image--search { display: none;}
#block_of_searchbox .block-search-box--search-detail a { font-size: var(--font-size-xsmall); text-decoration: underline; color: var(--color-main);}
#block_of_searchbox .block-search-box--search-detail a:hover { color: var(--color-sub);}

/* カート */
#block_of_jscart { padding: 0 0 32px; margin: 0 0 32px; border-bottom: var(--border-dot); display: none;}

/* 絞り込み */
#block_of_filter { padding: 0 0 32px; margin: 0 0 32px; border-bottom: var(--border-dot); display: none;}
#block_of_filter .js-filter-box > div[class^="block-filter--"][class*="-inner"] { position: relative;}
#block_of_filter .js-filter-box > div[class^="block-filter--"][class*="-inner"]::before {
	content: '';
	width: 20px;
	height: 20px;
	border-radius: 20px;
	display: block;
	background: var(--button-bg1);
	position: absolute;
	top: calc(48px / 2 - 10px);
	right: 12px;
}
.pane-left-menu #block_of_filter .pane-block--subtitle {
  padding: 16px 40px 16px 12px;
  margin: 0;
  border-bottom: var(--border-pane-left-menu);
  font-size: var(--font-size-sub);
  font-weight: bold;
	line-height: 1.0;
  cursor: pointer;
	position: relative;
}
.pane-left-menu .js-filter-box .js-filter-box-inner-label { position: relative;}
.pane-left-menu .js-filter-box .js-filter-box-inner-label::before,
.pane-left-menu .js-filter-box .js-filter-box-inner-label::after {
  content: '';
  width: 10px;
  height: 0;
  border: none;
  border-top: #FFF 1px solid;
	display: block;
  position: absolute;
  top: calc(50% - 0.5px);
  right: 17px;
  transform: rotate(0deg);
  transition: all 0.3s;	
}
.pane-left-menu .block-filter--close .js-filter-box-inner-label::before { transform: rotate(90deg) !important;}
.pane-left-menu .js-filter-box .pane-block--subtitle + div { padding: 15px 0; border-bottom: var(--border-pane-left-menu);}
.pane-left-menu .js-filter-box .pane-block--subtitle + div.block-filter--treelist-inner-accordion { padding: 0;}
.pane-left-menu .block-filter-option-items { padding: 5px 0;}
.pane-left-menu .block-filter-option-items input[type="checkbox"] { vertical-align: top;}
.pane-left-menu .block-filter--treeitem { position: relative;}
.pane-left-menu .block-filter--treeitem-dir > div,
.pane-left-menu .block-filter--treeitem-dir__close > div { transform: unset !important;}
.pane-left-menu span.block-filter--treeitem-dir { width: 30px; height: 43px; display: block; background: #FFF; position: absolute; top: 0; right: 0;}
.pane-left-menu span.block-filter--treeitem-dir > div.block-icon-image--angle-right-bold {
	content: '';
	width: 20px;
	height: 20px;
	border-radius: 20px;
	display: block;
	background: var(--button-bg1);
	position: absolute;
	top: calc(50% - 10px);
	right: 12px;
}
.pane-left-menu span.block-filter--treeitem-dir > div.block-icon-image--angle-right-bold::before,
.pane-left-menu span.block-filter--treeitem-dir > div.block-icon-image--angle-right-bold::after {
  content: '';
  width: 10px;
  height: 0;
	padding: 0;
	margin: 0;
  border: none;
  border-top: #FFF 1px solid;
	display: block;
  position: absolute;
  top: calc(50% - 0.5px);
  right: 5px;
  transform: rotate(0deg);
  transition: all 0.3s;	
}
.pane-left-menu span.block-filter--treeitem-dir.block-filter--treeitem-dir__close > div.block-icon-image--angle-right-bold::before { transform: rotate(90deg) !important;}
.pane-left-menu .block-filter--treeitem-name { 
	padding: 0 24px 0 12px !important;
	font-size: var(--font-size-sub);
	font-weight: normal;
  text-decoration: none;
	display: flex;
	align-items: center;
  background-image: var(--image-arrow-bl);
	background-repeat: no-repeat;
	background-position: calc(100% - 14px) center;
	background-size: 12px auto;
  transition: var(--transition);
}
.pane-left-menu .block-filter--treeitem-name:hover { color: var(--color-sub); background-image: var(--image-arrow-or);}
.pane-left-menu .block-filter--tree-2 > li,
.pane-left-menu .block-filter--tree-3 > li,
.pane-left-menu .block-filter--tree-4 > li { padding: 0;}
.pane-left-menu .block-filter--tree-3 > li .block-filter--treeitem-name { padding-left: 24px !important;}
.pane-left-menu .block-filter--tree-4 > li .block-filter--treeitem-name { padding-left: 36px !important;}

/* お気に入り */
#block_of_left_bookmark { padding: 0 0 32px; margin: 0 0 32px; border-bottom: var(--border-dot);}
#block_of_left_bookmark .inner-box { padding: 0 12px;}
#block_of_left_bookmark .text { margin: 0 0 16px; font-size: var(--font-size-sub);}
#block_of_left_bookmark .design-button-frame { height: 48px;}

/* 製品カタログ */
#block_of_left_catalog { padding: 0 0 32px; margin: 0 0 32px; border-bottom: var(--border-dot);}
#block_of_left_catalog .inner-box { padding: 0 12px;}
#block_of_left_catalog .catalog { width: 156px; margin: 0 auto 12px;}
#block_of_left_catalog .catalog a { transition: var(--transition);}
#block_of_left_catalog .catalog a:hover { opacity: var(--opacity);}
#block_of_left_catalog .design-button-frame { height: 48px;}

/* SNS */
#block_of_left_sns { padding: 0 0 32px; margin: 0 0 32px; border-bottom: var(--border-dot);}
#block_of_left_sns .inner-box { padding: 0 12px;}
#block_of_left_sns .inner-box .list li + li { margin-top: 10px;}
#block_of_left_sns .inner-box .list li a { text-decoration: none; display: flex; justify-content: space-between; align-items: center; transition: var(--transition);}
#block_of_left_sns .inner-box .list li figure { width: 48px; height: 48px; padding: 2px; display: flex; justify-content: center; align-items: center; transition: var(--transition);}
#block_of_left_sns .inner-box .list li.sns-x figure { padding: 8px;}
#block_of_left_sns .inner-box .list li.sns-instagram figure { padding: 7px;}
#block_of_left_sns .inner-box .list li .name  { width: calc(100% - 58px); font-size: var(--font-size-sub); font-weight: 700; transition: var(--transition);}
#block_of_left_sns .inner-box .list li a:hover figure { opacity: var(--opacity);}
#block_of_left_sns .inner-box .list li a:hover .name  { color: var(--color-sub);}

/* ----------------------------------
 RightFrame Contents
---------------------------------- */
/* 閲覧履歴 - アイレコ */
#block_of_itemhistory_aireco { padding: 60px 0 0 0; margin: 0 0 40px; position: relative;}
#block_of_itemhistory_aireco::before { content: ''; width: 200vw; border-top: var(--border-solid3); display: block; position: absolute; top: 0; left: -50vw;}
.page-cart #block_of_itemhistory_aireco { margin-top: 40px;}
.block-recent-item--items { width: 100%; margin: 0 auto;}
.block-recent-item--header {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  font-size: var(--font-size-H2);
  font-weight: 700;
  text-align: left;
  line-height: 1.0;
  letter-spacing: 0.04em;
  color: var(--color-main);
}
.block-recent-item { width: 100%;}
.block-recent-item .block-recent-item--empty-message,
.block-recent-item .block-recent-item--history-message { text-align: center;}
.block-recent-item .block-recent-item--keep-history { display: none;}
.block-recent-item .block-recent-item--keep-history a {
  width: 160px;
  margin: 0 auto;
  padding: 15px 10px;
  border: var(--color-base) 2px solid;
  border-radius: 30px;
  font-size: var(--font-size-small);
  text-align: center;
  text-decoration: none;
  color: var(--color-base);
  display: block;
  background: #fff;
}

/* お問い合わせ */
body:not(.page-top) #block_top_contact { display: none;}
#block_top_contact {
  padding: 50px 140px;
  margin: 0 0 10px;
  border-radius: 120px;
  background: var(--color-cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
	column-gap: 50px;
}
#block_top_contact .block-top-contact-desc {  width: calc(100% - 350px);}
#block_top_contact .title { margin: 0 0 20px; font-size: var(--font-size-H3); line-height: var(--line-height-low); color: var(--color-main);}
#block_top_contact .text  { font-size: var(--font-size-main);}
#block_top_contact .design-button-frame { width: 300px; height: 56px; margin: 0 0 0 auto;}
#block_top_contact .design-button-frame a.design-button { font-size: 18px;}

/* ----------------------------------
 件数・並べ替え
---------------------------------- */
#goods_list_navigation_head_frame { padding: 0 0 16px; margin: 0 0 24px; border-bottom: var(--border-solid3); line-height: 1.0; display: flex; justify-content: space-between; align-items: flex-start;}
#goods_list_navigation_head_frame .pager-total { padding: 0 40px 0 0; font-size: 20px; word-break: keep-all; line-height: 1.0;}
#goods_list_navigation_head_frame .pager-count { font-size: 20px; line-height: 1.0;}
#goods_list_navigation_head_frame .pager-count span { margin: 0 3px 0 0; font-size: 32px; font-weight: 700;}

/* ----------------------------------
 Youtube埋め込み
---------------------------------- */
.youtube-frame { width: 100%; height: 0; padding-top: 56.25%; position: relative; overflow: hidden;}
.youtube-frame iframe { width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0;}