@charset "UTF-8";

.for-sp {
  display: none;
}

/* --------------------------------------------------------------------
  ヘッダー
--------------------------------------------------------------------- */
#header .header-main .container_ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 30px 0 16px;
}

#header .header-main-area {
  flex: 1;
}

#header .header-main-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

#header .header-main-box+.header-main-box {
  margin: 20px 0 0;
}

#header .header-nav ul {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

#header .header-search {
  position: relative;
  flex: 1;
}

#header .header-search .block-global-search--keyword {
  width: 100%;
  height: 54px;
  padding: 8px 52px 8px 210px;
  border-color: var(--textColor);
}

#header .header-search .block-global-search--select-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  display: flex;
  height: calc(100% - 16px);
  margin: auto;
  background: #EFEFEF;
  border-radius: 4px;
}

#header .header-search .search_type_radio_ {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#header .header-search .block-global-search--select.active {
  font-weight: bold;
  color: #fff;
  background: var(--textColor);
}

#header .header-search .block-global-search--select {
  display: block;
  height: 100%;
  padding: 0 8px;
  font-size: 15px;
  letter-spacing: -0.075em;
  border-radius: 4px;
}

#header .header-search .block-global-search--select_label{
    margin: 0;
    text-align: left;
    font-family: inherit;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    appearance: auto;
    text-rendering: auto;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    padding-block: 1px;
    padding-inline: 6px;
    display: inline-flex;
    align-items: center;
}

#header .header-search .block-global-search--submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 100%;
  background: var(--textColor) url(../../img/usr/common/icon_search_w.png) no-repeat center / 24px;
  border-radius: 0 4px 4px 0;
}

#header .header-main-action {
  display: flex;
  gap: 12px;
}

#header .header-main-action-btn {
  position: relative;
  height: 94px;
  border-radius: 4px;
  transition: opacity .3s;
}

#header .header-main-action-btn:hover {
  opacity: 0.7;
}

#header .header-main-action-btn.header-order {
  width: 130px; /* FO 154->130 */
  background: var(--accentColor);
}

#header .header-main-action-btn.header-cart {
  width: 115px;
  background: #038258;
  background: var(--cartBtnColor);
}

#header .header-main-action:not(.fixed) br {
  display: none;
}

#header .header-main-action-btn a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: none;
}

#header .header-main-action-text {
  font-weight: bold;
  font-size: 16px; /* FO 18->16 */
  line-height: 1.27;
  color: #fff;
  /* 20260416 FO #CT22*/
  display: inline-block;
  width: 6em;
}

#header .header-cart-count {
  /* display: none; */
  position: absolute;
  top: 8px;
  right: 25px;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: #fff;
  background: var(--accentColor);
  border-radius: 50%;
}

#header .header-main-action.fixed {
  position: fixed;
  top: 40%;
  right: 0;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border-radius: 4px 0 0 4px;
  z-index: 100;
}

#header .header-main-action.fixed .header-main-action-btn {
  width: 100px; /* FO 88->100 */
  height: 88px;
}

#header .header-main-action.fixed .header-main-action-btn.header-order {
  border-radius: 4px 0 0 0;
}

#header .header-main-action.fixed .header-main-action-btn.header-cart {
  border-radius: 0 0 0 4px;
}

#header .header-main-action.fixed .header-main-action-btn.header-order .header-main-action-icon {
  width: 22px;
}

#header .header-main-action.fixed .header-main-action-btn a {
  gap: 6px;
}

#header .header-main-action.fixed .header-main-action-btn.header-cart .header-main-action-icon {
  width: 30px;
}

#header .header-main-action.fixed .header-main-action-text {
  font-size: 16px;
  line-height: 1.125;
}

#header .header-main-action.fixed .header-cart-count {
  right: 20px;
}

/* --------------------------------------------------------------------
  グローバルナビ
--------------------------------------------------------------------- */
#header .header-bottom {
  background: var(--bgColor);
  border-bottom: 1px solid var(--borderColor);
}

#header .block-gnav>ul {
  display: flex;
}

#header .block-gnav>ul>li {
  position: relative;
  flex: 1;
}

#header .block-gnav>ul>li#gnav_goodssearch {
  flex: 2;
}

#header .block-gnav>ul>li:not(:first-child)::before,
#header .block-gnav>ul>li .block-gnav--item-link .block-gnav--item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 40px;
  margin: auto;
  background: var(--borderColor);
}

#header .block-gnav>ul>li .block-gnav--item-link {
  display: flex;
}

#header .block-gnav>ul>li .block-gnav--item {
  position: relative;
  display: block;
  width: 100%;
  padding: 26px 0 20px;
  text-align: center;
  border-bottom: 5px solid var(--bgColor);
  transition: all .3s;
}

#header .block-gnav>ul>li .block-gnav--item span {
  position: relative;
  padding: 0 0 0 17px;
  font-weight: bold;
  font-size: 20px;
  line-height: 1;
}

#header .block-gnav>ul>li .block-gnav--item span::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  height: 11px;
  margin: auto;
  background: var(--themeColor);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#header .block-gnav>ul>li .block-gnav--item-link .block-gnav--item span::before {
  transform: rotate(90deg);
}

#header .block-gnav>ul>li .block-gnav--item:hover,
#header .block-gnav>ul>li .block-gnav--item.active {
  color: var(--themeColor);
  border-color: var(--themeColor);
}

#header .block-gnav .block-gnav-menu {
  display: none;
}

#header .block-gnav:has(.block-gnav-category-btn.active) .block-gnav-menu .block-gnav-genre {
  display: none !important;
}

#header .block-gnav:has(.block-gnav-genre-btn.active) .block-gnav-menu .block-gnav-category {
  display: none !important;
}

#header .block-gnav .block-gnav-menu .block-gnav-menu--bg {
  position: fixed;
  /*top: 160px;*/
  left: 0;
  width: 100%;
  height: calc(100% - 160px);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: none;
  /* 20260515 FO #105 Add */
  pointer-events: none;
}

#header .block-gnav .block-gnav-menu .block-gnav-menu--frame {
  position: absolute;
  top: 100%;
  left: 0;
  width: auto;
  max-width: none;
  z-index: 99;
  /* 20260415 FO #105 メニューの高さ制限*/
  max-height: calc(100vh - 160px); 
  display: inline-flex;
}

/* 20260415 FO #105 メニューをスクロール */
#header .block-gnav .block-gnav-category,
#header .block-gnav .block-gnav-genre,
#header .block-gnav .block-gnav-menu--item-inner,
#header .block-gnav .block-gnav-menu--item-child-1,
#header .block-gnav .block-gnav-menu--item-child-2,
#header .block-gnav .block-gnav-menu--item-child-3 {
  max-height: calc(100vh - 225px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 20260415 FO #105 メニュー内のスクロールバー */
#header .block-gnav .block-gnav-category::-webkit-scrollbar,
#header .block-gnav .block-gnav-genre::-webkit-scrollbar,
#header .block-gnav .block-gnav-menu--item-child-1::-webkit-scrollbar,
#header .block-gnav .block-gnav-menu--item-child-2::-webkit-scrollbar,
#header .block-gnav .block-gnav-menu--item-child-3::-webkit-scrollbar {
  width: 6px;
}

#header .block-gnav .block-gnav-category::-webkit-scrollbar-thumb,
#header .block-gnav .block-gnav-genre::-webkit-scrollbar-thumb,
#header .block-gnav .block-gnav-menu--item-child-1::-webkit-scrollbar-thumb,
#header .block-gnav .block-gnav-menu--item-child-2::-webkit-scrollbar-thumb,
#header .block-gnav .block-gnav-menu--item-child-3::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
/* 20260415 FO #105 Firefox */
#header .block-gnav .block-gnav-category,
#header .block-gnav .block-gnav-genre,
#header .block-gnav [class*="block-gnav-menu--item-child-"] {
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

#header .block-gnav:has(.block-gnav-genre-btn.active) .block-gnav-menu .block-gnav-menu--frame {
  left: 227px; /*273*/
}

#header .block-gnav .block-gnav-menu--inner {
  display: flex;
  align-items: flex-start;
  /* 20260515 FO #105 Add */
  position: relative;
}

#header .block-gnav .block-gnav-menu--title {
  padding: 8px 20px;
  border-bottom: 1px solid #dedede;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  color: #222;
  background: #f7f7f7;
}

#header .block-gnav .block-gnav-menu--sub-title-1,
#header .block-gnav .block-gnav-menu--sub-title-2,
#header .block-gnav .block-gnav-menu--sub-title-3 {
  display: none;
  /*width: calc(100% - 40px);*/
  width: 227px;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  color: #222;
}

#header .block-gnav .block-gnav-menu--sub-title-1 {
  border-bottom: 1px solid #dedede;
  background: #eaeaea;
}

#header .block-gnav .block-gnav-menu--sub-title-2 {
  border-bottom: 1px solid #cecece;
  background: #dedede;
}

#header .block-gnav .block-gnav-menu--sub-title-3 {
  border-bottom: 1px solid #bfbfbf;
  background: #cecece;
}

#header .block-gnav .block-gnav-menu--item-frame {
  flex-shrink: 0;
  width: 227px; /* 273px*/
  background: #fff;
  border: 1px solid var(--borderColor);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 6px rgb(0, 0, 0, 0.16);
}

#header .block-gnav .block-gnav-menu--item-frame .block-gnav-menu--main-title {
  margin: 0 0 28px;
  padding: 8px 20px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  color: #222;
  background: #f7f7f7;
  display: none;
}

#header .block-gnav .block-gnav-menu--item-frame .block-gnav-menu--item h2 {
  margin: 0;
  border-bottom: 2px solid #e8e8e8;
  font-size: 16px;
  font-weight: normal;
  color: #111;
  text-align: left;
  display: none;
}

#header .block-gnav .block-gnav-category,
#header .block-gnav .block-gnav-genre,
#header .block-gnav .block-gnav-maker {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#header .block-gnav .block-dynamic-category-tree .header-category-tree-root a,
#header .block-gnav .block-dynamic-genre-tree .header-genre-tree-root a,
#header .block-gnav .block-dynamic-maker-tree .header-maker-tree a {
  position: relative;
  display: block;
  padding: 12px 16px;
  font-size: 16px;
}

#header .block-gnav .block-dynamic-category-tree .header-category-tree-root a::after,
#header .block-gnav .block-dynamic-genre-tree .header-genre-tree-root a::after,
#header .block-gnav .block-dynamic-maker-tree .header-maker-tree a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16px;
  width: 4px;
  height: 8px;
  margin: auto;
  background: var(--themeColor);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#header .block-gnav .block-dynamic-category-tree .header-category-tree-root a:hover,
#header .block-gnav .block-dynamic-genre-tree .header-genre-tree-root a:hover,
#header .block-gnav .block-dynamic-maker-tree .header-maker-tree a:hover {
  background: var(--bgColor);
}

#header .block-gnav .block-dynamic-category-tree .nolink_,
#header .block-gnav .block-dynamic-genre-tree .nolink_,
#header .block-gnav .block-dynamic-maker-tree .nolink_ {
  display: block;
  padding: 4px 28px 4px 20px;
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  border: 0;
  color: #999;
}

#header .block-gnav .block-gnav-menu--item-child-1-frame,
#header .block-gnav .block-gnav-menu--item-child-2-frame,
#header .block-gnav .block-gnav-menu--item-child-3-frame {
  flex-shrink: 0;
  width: 227px; /*273*/
}

#header .block-gnav .block-gnav-genre {
  margin-left: 0; 
}

#header .block-gnav .block-gnav-menu--item h2 {
  margin: 0;
  padding: 10px 16px;
  font-size: 14px;
}

#header .block-gnav .block-gnav-menu--item-child-1,
#header .block-gnav .block-gnav-menu--item-child-2,
#header .block-gnav .block-gnav-menu--item-child-3 {
  display: none;
  background: #fff;
  border: 1px solid var(--borderColor);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 6px rgb(0, 0, 0, 0.16);
  overflow-x: hidden;
  overflow-y: auto;
}

#header .block-gnav .header-category-tree-child a,
#header .block-gnav .header-genre-tree-child a {
  position: relative;
  display: block;
  padding: 12px 16px;
  font-size: 16px;
}

#header .block-gnav .header-category-tree-child a:hover,
#header .block-gnav .header-genre-tree-child a:hover {
  background: var(--bgColor);
}

#header .block-gnav .header-category-tree-child:has(.header-category-tree-child-title),
#header .block-gnav .header-genre-tree-child:has(.header-genre-tree-child-title) {
  display: none;
}

#header .block-gnav .header-category-tree-child .header-category-tree-child-title,
#header .block-gnav .header-genre-tree-child .header-genre-tree-child-title {
  display: none;
}

#header .block-gnav .header-category-tree-child-wrap-image,
#header .block-gnav .header-genre-tree-child-wrap-image {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 15px;
}

#header .block-gnav .header-category-tree-child-wrap-image figure,
#header .block-gnav .header-genre-tree-child-wrap-image figure {
  display: block;
  width: 112px;
  margin: 0;
}

#header .block-gnav .header-category-tree-child-image,
#header .block-gnav .header-genre-tree-child-image {
  width: 100%;
}

#header .block-gnav .header-category-tree-child-comment,
#header .block-gnav .header-genre-tree-child-comment {
  width: calc(100% - 124px);
  color: #222;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
}

#header .block-gnav .header-goods-alert {
  font-size: 16px;
  font-weight: normal;
}

#header .block-gnav .category-not-exists,
#header .block-gnav .genre-not-exists,
#header .block-gnav .maker-not-exists {
  display: none;
}


/* --------------------------------------------------------------------
  PC/SP切り替え
--------------------------------------------------------------------- */
.change_mode_ {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 24px 0;
  background: #222;
  display: none;
}

.change_mode_ a,
.change_mode_ span {
  display: block;
  width: 240px;
  padding: 8px 2px;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  text-align: center;
  background: #fff;
}

.change_mode_ a {
  cursor: pointer;
}

.change_mode_ span {
  background: #707070;
}

/* --------------------------------------------------------------------
  フッター
--------------------------------------------------------------------- */
#footer {
  margin: 120px 0 0;
}

#footer .block-page-top {
  position: fixed;
  top: auto;
  bottom: 165px;
  right: 54px;
  z-index: 99;
}

#footer .block-page-top a {
  position: relative;
  display: block;
  width: 65px;
  height: 65px;
  font-size: 0;
  background: var(--themeColor);
  border: 1px solid var(--themeColor);
  border-radius: 4px;
}

#footer .block-page-top a::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transition: all .3s;
  transform: translateX(-50%) rotate(-45deg);
}

#footer .block-page-top a:hover {
  background: #fff;
}

#footer .block-page-top a:hover::before {
  border-color: var(--themeColor);
}

#footer .footer-top {
  padding: 66px 0 56px;
  background: var(--bgColor);
}

#footer .footer-top .container_ {
  display: flex;
  justify-content: space-between;
  gap: 100px;
}

#footer .footer-bottom {
  padding: 22px 0 45px;
  background: var(--themeColor);
}

#footer .footer-about-address {
  margin: 12px 0 0;
}

#footer .footer-about-address .address {
  font-size: 18px;
}

#footer .footer-about-address-flex {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 0;
}

#footer .footer-about-address .contact {
  font-size: 20px;
  line-height: 1.15;
}

#footer .footer-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 48px;
}

#footer .footer-btn.company {
  width: 88px;
  height: 38px;
  background: #fff;
  border: 1px solid var(--borderColor);
  border-radius: 4px;
}

#footer .footer-btn.company:hover {
  color: var(--accentColor);
}

#footer .footer-btn.issue {
  width: 200px;
  margin: 20px 0 0;
}

#footer .footer-btn.contact {
  width: 200px;
  margin: 10px 0 0;
}

#footer .footer-nav {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

#footer .footer-nav-title {
  font-weight: bold;
  font-size: 20px;
}

#footer .footer-nav-list {
  display: flex;
  flex-direction: column;
  margin: 10px 0 0;
}

#footer .footer-nav-list a {
  position: relative;
  font-size: 16px;
  line-height: 2.25;
  color: var(--themeColor);
}

#footer .footer-nav-list a::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 8px;
  margin-right: 7px;
  background: var(--themeColor);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#footer .footer-nav-list a:hover {
  color: var(--accentColor);
}

#footer .footer-security {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#footer .footer-security li a {
  display: block;
}

#footer .footer-security li a:hover {
  opacity: 0.7;
}

#footer .footer-copyright {
  margin: 22px 0 0;
  font-size: 14px;
  text-align: center;
  color: #fff;
}