@charset "UTF-8";
/* ヘッダ（ＰＣ） ファーストビュー用 */
/* sys/base_form.css のコピー ここから */
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
select,
textarea {
  padding: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
}
/* ----ボタン---- */
.btn {
  display: inline-block;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 10px;
}
.btn-default {
  color: #333;
  border: solid 1px #dcdcdc;
  background-color: #e5e5e5;
}
/* ここまで sys/base_form.css のコピー */

/* usr/layout.css のコピー ここから */
.wrapper {
  width: 100%;
  padding-top: 130px;
}
.pane-globalnav {
  position: relative;
  background-color: #f5f5f5;
  color: #000;
}
/* ここまで usr/layout.css のコピー */


/* usr/block.css のコピー ここから */
.block-switch-banner{
  display: none !important;
}
/* ----ヘッダー---- */
.pane-header{
  color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 11;
  background: var(--color-main);
}
.pane-header .container {
  width: calc(100% - 240px);
  min-width: 1200px;
  margin: 0 auto;
  position: relative;
  gap: 0 clamp(7.875rem, -0.75rem + 9.58vw, 10.75rem);
}
.pane-globalnav{
  display: none;
}
.block-header__logo{
  flex-shrink: 0;
}
.block-header__logo a{
  display: flex;
  align-items: flex-start;
  gap: 34px;
}
.block-header__logo a:hover{
  opacity: 1;
}
.block-header__logo a img{
  display: block;
}
.block-header__contents{
  flex: 1;
  padding-top: 22px;
}
.block-header-nav__list{
  display: flex;
  align-items: center;
}
.block-header-nav__list-item{
  flex-grow: 1;
}
.block-header-nav__list-item > a,
.block-header-nav__list-item > span{
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  padding: 20px 0;
  cursor: pointer;
  position: relative;
}
.block-header-nav__list-item:not(:last-child) > a::after,
.block-header-nav__list-item:not(:last-child) > span::after{
  content: "";
  width: 1px;
  height: 24px;
  background: #CCC;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.block-header-nav__list-item > a span,
.block-header-nav__list-item > span span{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.block-header-nav__list-item > a span::before,
.block-header-nav__list-item > span span::before{
  content: "";
  width: 100%;
  min-width: 100px;
  height: 1px;
  background: #FFF;
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .3s;
}
.block-header-nav__list-item > a:hover{
  opacity: 1;
}
.block-header-nav__list-item > a:hover span::before,
.block-header-nav__list-item > span:hover span::before{
  opacity: 1;
}
.block-header__contents-top{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  padding-left: clamp(1.25rem, -29.875rem + 34.58vw, 11.625rem);
}
.block-header-subnav{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.block-header-subnav__item a{
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  position: relative;
  padding: 2px 7px;
}
.block-header-subnav__item a:hover{
  opacity: 1;
  text-decoration: underline;
}
.block-header-subnav__item a::before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
}
.block-header-subnav__item-login a::before,
.block-header-subnav__item-mypage a::before {
  background: url(../../img/usr/common/ico_mypage.png) center center / contain no-repeat;
}
.block-header-subnav__item-bookmark a::before{
  background: url(../../img/usr/common/ico_bookmark.png) center center / contain no-repeat;
}
.block-header-subnav__item-cart a::before{
  background: url(../../img/usr/common/ico_cart.png) center center / contain no-repeat;
}
.block-header-subnav__item-cart-count{
  font-size: 10px;
  font-weight: bold;
  letter-spacing: -0.03em;
  position: absolute;
  top: -3px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: #CB1925;
  border-radius: 50%;
  line-height: 20px;
  display: none;
}
.block-header-subnav__item .hamburger {
  color: #FFF;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 45px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0 7px 2px;
}
.block-header-subnav__item .hamburger:hover {
  text-decoration: underline;
}
.block-header-subnav__item .hamburger__text {
  font-size: 11px;
  font-weight: 500;
  color: #FFF;
}
.block-header-subnav__item .hamburger::before, .block-header-subnav__item .hamburger::after, .block-header-subnav__item .hamburger__text::before {
  content: "";
  position: absolute;
  left: 50%;
  height: 1px;
  width: 16px;
  background-color: #FFF;
  border-radius: 1px;
  transition: 0.3s;
}
.block-header-subnav__item .hamburger::before {
  top: 8px;
  transform: translateX(-50%);
}
.block-header-subnav__item .hamburger::after {
  top: 20px;
  transform: translateX(-50%);
}
.block-header-subnav__item .hamburger__text::before {
  top: 14px;
  transform: translateX(-50%);
}
.block-megamenu__ttl span::after{
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
  display: block;
  transform: translateY(-2px) rotate(45deg);
  margin-left: 8px;
}
.block-header-nav__list-item.is-active .block-megamenu__ttl span::after{
  transform: translateY(2px) rotate(-135deg);
}
.block-megamenu__contents{
  width: calc(100% + 240px);
  min-width: 1200px;
  position: absolute;
  top: 100%;
  left: -120px;
  display: none;
  background: rgba(112,112,112,0.95);
}
.block-megamenu__contents-inner{
  width: calc(100% - 240px);
  min-width: 1200px;
  margin: 0 auto;
  padding: 16px 0 24px;
  position: relative;
}
.block-megamenu__contents-list,
.block-megamenu__contents .block-dynamic-genre--body{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  position: relative;
}
.block-megamenu__contents-list-item a,
.block-megamenu__contents .block-dynamic-genre--row a{
  color: #FFF;
  display: block;
  min-width: 140px;
  padding: 11px 24px;
  position: relative;
}
.block-megamenu__contents-list-item a::after,
.block-megamenu__contents .block-dynamic-genre--row a::after{
  content: "";
  width: 110px;
  min-width: 110px;
  height: 1px;
  background: #FFF;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .3s;
}
.block-megamenu__contents-list-item a:hover,
.block-megamenu__contents-list-item a:hover::after,
.block-megamenu__contents .block-dynamic-genre--row a:hover,
.block-megamenu__contents .block-dynamic-genre--row a:hover::after{
  opacity: 1;
}
.headr-menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  display: none;
}
.headr-menu-bg{
  background: rgba(0,0,0,0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.headr-menu-container{
  width: 616px;
  height: 100%;
  background: #FFF;
  margin-left: auto;
  padding: 100px 80px 50px;
  position: relative;
  overflow-y: auto;
}
.headr-menu-close{
  font-size: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid #CCC;
  position: absolute;
  top: 48px;
  right: 44px;
  cursor: pointer;
}
.headr-menu-close::before,
.headr-menu-close::after{
  content: "";
  width: 16px;
  height: 1px;
  background: var(--color-main);
  position: absolute;
  top: 50%;
  left: 50%;
}
.headr-menu-close::before{
  transform: translate(-50%,-50%) rotate(45deg);
}
.headr-menu-close::after{
  transform: translate(-50%,-50%) rotate(-45deg);
}
.headr-menu-ttl,
.list-item__center.level0{
  font-weight: bold;
  margin: 0 0 5px;
  cursor: auto;
}
#search_genretree_sb .list.level1 > .list-item > .list-item__center{
  display: none;
}
#search_categorytree_sb .list.level2 .list-item {
  padding-left: 1em;
  color: #707070;
}
.headr-menu-list__item a,
.list-item__center{
  display: inline-block;
  padding: 10px 0 10px 1em;
  cursor: pointer;
}
.headr-menu-list__level2 .headr-menu-list__item{
  padding-left: 1em;
}
.headr-menu-list__level2 .headr-menu-list__item a{
  color: #707070;
}
.headr-menu-list__item a:hover{
  text-decoration: underline;
  opacity: 1;
}
.headr-menu-contents{
  display: flex;
  flex-wrap: wrap;
  gap: 72px;
  margin: 0 0 40px;
}
.headr-menu-contents__item{
  width: 180px;
}
.headr-menu-link{
  border-top: 1px solid #CCC;
  padding: 16px 0 0;
}
.headr-menu-link__list{
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.headr-menu-link__list-item a{
  font-size: 12px;
  color: #999;
}

/* ----ヘッダー検索---- */
.block-global-search {
  flex: 1;
}
.block-global-search form {
  position: relative;
}
.block-global-search form .block-global-search--submit {
  width: 42px;
  height: 42px;
  border: 0;
  background: url(../../img/usr/common/ico_search.png) center center / 24px auto no-repeat;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  transition: .3s;
}
.block-global-search form .block-global-search--submit:hover {
  background: url(../../img/usr/common/ico_search.png) center center / 28px auto no-repeat;
}
.block-global-search form .block-global-search--keyword {
  width: 100%;
  height: 44px;
  border: none;
  outline: none;
  font-size: 13px;
  color: #CCC;
  background: none;
  padding: 0 64px 0 24px;
  border: 1px solid #CCC;
  border-radius: 30px;
}
.block-global-search form .block-global-search--keyword:hover{
   border-color: #CCC;
}
.block-global-search form .block-global-search--keyword::placeholder{
  color: #CCC;
}

/* ここまで usr/block.css のコピー */


/* usr/user.css のコピー ここから */

/* fade image in after load */
.lazyload {
  opacity: 0;
}
.lazyloading {
  opacity: 1;
}
.lazyloaded {
  opacity: 1;
  transition: opacity 200ms;
}

/* ここまで usr/user.css のコピー */


ul.block-footer-sns--list > li > a > img {
  height: 100%;
  aspect-ratio: 1 / 1;
}