@charset "UTF-8";
/*-------------------------------------------------------------------------------------------------------
*********************************************************************************************************
*********************************************************************************************************
******
****** SPスタイル
******
*********************************************************************************************************
*********************************************************************************************************
-------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------
******************************************************************************
** style
******************************************************************************
----------------------------------------------------------------------------*/
/* ==== contents === */
.sp {
  display: block; }

.pc {
  display: none; }

img {
  max-width: 100%; }

.tel {
  pointer-events: auto; }

a {
  transition: .3s; }

a:hover {
  opacity: .7; }

/*----------------------------------------------------------------------------
******************************************************************************
** header
******************************************************************************
----------------------------------------------------------------------------*/
.ec-headerSearch .ec-headerSearch__keyword {
  width: 100%;
  background-color: #fff;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #000; }

.ec-headerNaviRole {
  max-width: 1600px;
  height: 60px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 999;
  background: #fff;
  padding: 10px;
  box-sizing: border-box; }
  .ec-headerNaviRole.member_header {
    top: 40px; }
    .ec-headerNaviRole.member_header .ec-headerNavSP {
      top: 45px; }

.hd_member_link {
  width: 100%;
  display: flex;
  justify-content: center;
  background: linear-gradient(135deg, #b8b566, #a0a060);
  padding: 5px;
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  z-index: 999; }
  .hd_member_link a {
    display: flex;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding: 0 5px; }
    .hd_member_link a:hover {
      border-bottom: 1px solid #B4AF28; }
      .hd_member_link a:hover .txt::before {
        right: 0; }
    .hd_member_link a .name {
      font-size: 12px; }
    .hd_member_link a .title {
      font-size: 14px;
      padding: 0 10px; }
    .hd_member_link a .txt {
      font-size: 12px;
      position: relative;
      padding-right: 12px; }
      .hd_member_link a .txt::before {
        content: "";
        width: 8px;
        height: 8px;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: calc(50% - 4px);
        right: 3px;
        transition: .3s; }

.sp_pt {
  padding-top: 60px; }

.sp_pt_member {
  padding-top: 95px; }

.hd_block {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .hd_block .hd_logo {
    width: 100px;
    position: absolute;
    left: calc(50% - 50px); }
  .hd_block .hd_nav {
    display: none; }
    .hd_block .hd_nav .nav_list {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      justify-content: flex-start; }
      .hd_block .hd_nav .nav_list li {
        position: relative; }
        .hd_block .hd_nav .nav_list li:hover .nav_clist {
          display: block;
          animation: nav_active 1s ease 0s 1 alternate; }
      .hd_block .hd_nav .nav_list a {
        text-decoration: none;
        color: #000;
        padding: 5px 20px;
        display: block; }
        .hd_block .hd_nav .nav_list a .en {
          display: block;
          font-size: 16px; }
        .hd_block .hd_nav .nav_list a .ja {
          display: block;
          font-size: 12px;
          text-align: center; }
  .hd_block .hd_item {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    .hd_block .hd_item .ec-headerNaviRole__search {
      margin-top: 0; }
    .hd_block .hd_item .ec-headerRole__cart .ec-cartNavi {
      padding: 10px;
      min-width: 0;
      background: #fff;
      height: auto; }
    .hd_block .hd_item .fa-fw {
      width: 1.5em; }

/*----------------------------------------------------------------------------
******************************************************************************
** global nav
******************************************************************************
----------------------------------------------------------------------------*/
/*
.nav_bg {}

.nav {
    box-shadow: inset 0 0 5px 5px #222;
    background: #333;
    color: #fff;
    height: calc(100% + 500px);
    padding-bottom: 500px;
    z-index: 100;
    width: 70%;
    overflow-x: none;
    overflow-y: auto;
    top: 0px;
    right: -70%;
    position: fixed;
    -webkit-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

.nav_list > li > a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 1.5em;
    color: #fff;
    font-weight: bold;
    display: block;
    padding: 1em 1.5em;
    text-decoration: none;
    position: relative;
    &:hover {
        box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.3);
    }
    &::after {
        content: attr(data-text);
        display: block;
    }
    img{
        display: none;
    }
}

.nav_clist > li > a {
    background-color: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    display: block;
    font-size: 1.3em;
    padding: 1em 2em;
    text-decoration: none;
    &:hover, &.current {
        background-color: rgba(0, 0, 0, 6);
        box-shadow: 0 0 4px rgba(255, 0, 0, 0.2);
    }
}

.nav_glist > li > a {
    background-color: rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    display: block;
    font-size: 1.1em;
    padding: 1em 3em;
    text-decoration: none;
    &:hover, &.current {
        background-color: rgba(0, 0, 0, 1);
        box-shadow: 0 0 4px rgba(255, 0, 0, 0.2);
    }
}

.sp_nav_open {
    right: 0 !important;
}

.sp_nav_trigger {
    cursor: pointer;
    z-index: 1000;
    position: fixed !important;
    top: 25px;
    right: 15px;
    margin-top: -5px;
    width: 36px;
    height: 24px;
    span {
        display: inline-block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #000;
        border-radius: 4px;
        -webkit-transition: all .4s;
        transition: all .4s;
        box-sizing: border-box;
        &:nth-of-type(1) {
            top: 0;
        }
        &:nth-of-type(2) {
            top: 10px;
        }
        &:nth-of-type(3) {
            bottom: 0;
        }
    }
    &::after {
        position: absolute;
        left: 0;
        bottom: -20px;
        content: 'MENU';
        display: block;
        width: 100%;
        padding-top: 20px;
        color: #000;
        font-size: 10px;
        text-decoration: none;
        text-align: center;
        -webkit-transition: all .4s;
        transition: all 0.4s;
    }
    &.active {
        &::after {
            content: 'CLOSE';
            bottom: -25px;
            color: #fff;
        }
        span {
            &:nth-of-type(1) {
                -webkit-transform: translateY(10px) rotate(-45deg);
                -ms-transform: translateY(10px) rotate(-45deg);
                transform: translateY(10px) rotate(-45deg);
                background: #fff;
            }
            &:nth-of-type(2) {
                opacity: 0;
                background: #fff;
            }
            &:nth-of-type(3) {
                -webkit-transform: translateY(-10px) rotate(45deg);
                -ms-transform: translateY(-10px) rotate(45deg);
                transform: translateY(-10px) rotate(45deg);
                background: #fff;
            }
        }
    }
}
*/
/*----------------------------------------------------------------------------
******************************************************************************
** content
******************************************************************************
----------------------------------------------------------------------------*/
.front_page .ec-layoutRole__contents {
  max-width: none; }
  .front_page .ec-layoutRole__contents .ec-sliderRole {
    max-width: none; }
    .front_page .ec-layoutRole__contents .ec-sliderRole .slick-initialized .slick-slide {
      margin: 0 20px; }

.ec-newItemRole {
  width: 100%; }
  .ec-newItemRole .new_item_ttl {
    text-align: center; }
    .ec-newItemRole .new_item_ttl .en {
      font-size: 24px;
      color: #000;
      display: inline-block;
      position: relative;
      padding: 0 30px; }
      .ec-newItemRole .new_item_ttl .en::before {
        content: "";
        width: 20px;
        height: 1px;
        background: #000;
        position: absolute;
        top: calc(50% - 0.5px);
        left: 0; }
      .ec-newItemRole .new_item_ttl .en::after {
        content: "";
        width: 20px;
        height: 1px;
        background: #000;
        position: absolute;
        top: calc(50% - 0.5px);
        right: 0; }
    .ec-newItemRole .new_item_ttl .ja {
      text-align: center;
      display: block;
      font-size: 14px;
      color: #000; }
  .ec-newItemRole .ec-newItemRole__list {
    margin: 50px 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    .ec-newItemRole .ec-newItemRole__list .ec-newItemRole__listItem {
      width: calc(100% / 2);
      margin: 0; }

.ec-recomendRole {
  width: 100%;
  margin: 30px 0; }
  .ec-recomendRole .recomend_ttl {
    text-align: center; }
    .ec-recomendRole .recomend_ttl .en {
      font-size: 24px;
      color: #000;
      display: inline-block;
      position: relative;
      padding: 0 30px; }
      .ec-recomendRole .recomend_ttl .en::before {
        content: "";
        width: 20px;
        height: 1px;
        background: #000;
        position: absolute;
        top: calc(50% - 0.5px);
        left: 0; }
      .ec-recomendRole .recomend_ttl .en::after {
        content: "";
        width: 20px;
        height: 1px;
        background: #000;
        position: absolute;
        top: calc(50% - 0.5px);
        right: 0; }
    .ec-recomendRole .recomend_ttl .ja {
      text-align: center;
      display: block;
      font-size: 14px;
      color: #000; }
  .ec-recomendRole .ec-recomendRole__list {
    margin: 50px 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; }
    .ec-recomendRole .ec-recomendRole__list .ec-recomendRole__listItem {
      width: calc(100% / 2 - 5px);
      margin-right: 10px; }
      .ec-recomendRole .ec-recomendRole__list .ec-recomendRole__listItem:nth-child(2n) {
        margin-right: 0; }
      .ec-recomendRole .ec-recomendRole__list .ec-recomendRole__listItem a {
        text-decoration: none;
        color: #000; }
        .ec-recomendRole .ec-recomendRole__list .ec-recomendRole__listItem a .ttl01 {
          font-size: 14px; }
        .ec-recomendRole .ec-recomendRole__list .ec-recomendRole__listItem a .price {
          font-size: 14px; }

.ec-categoryRole {
  width: 100%;
  background: #fff; }
  .ec-categoryRole .category_ttl {
    text-align: center; }
    .ec-categoryRole .category_ttl .en {
      font-size: 24px;
      color: #000;
      display: inline-block;
      position: relative;
      padding: 0 30px; }
      .ec-categoryRole .category_ttl .en::before {
        content: "";
        width: 20px;
        height: 1px;
        background: #000;
        position: absolute;
        top: calc(50% - 0.5px);
        left: 0; }
      .ec-categoryRole .category_ttl .en::after {
        content: "";
        width: 20px;
        height: 1px;
        background: #000;
        position: absolute;
        top: calc(50% - 0.5px);
        right: 0; }
    .ec-categoryRole .category_ttl .ja {
      text-align: center;
      display: block;
      font-size: 14px;
      color: #000; }
  .ec-categoryRole .ec-categoryRole__list {
    margin: 50px 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; }
    .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem {
      width: 100%;
      height: 180px;
      margin: 0;
      margin-bottom: 15px;
      transition: .3s;
      overflow: hidden;
      position: relative;
      /* iida 追記 */ }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem .bg {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        transition: .3s; }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:hover .bg {
        transform: scale(1.05); }
        .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:hover .bg .en {
          transform: scale(0.95); }
        .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:hover .bg .ja {
          transform: scale(0.95); }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:nth-child(2n) {
        margin-right: 0; }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:nth-child(1) .bg {
        background: url(../img/top/cate01_bg.png) center no-repeat;
        background-size: cover; }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:nth-child(2) .bg {
        background: url(../img/top/cate02_bg.png) center no-repeat;
        background-size: cover; }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:nth-child(3) .bg {
        background: url(../img/top/cate03_bg.png) center no-repeat;
        background-size: cover; }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:nth-child(4) .bg {
        background: url(../img/top/cate04_bg.png) center no-repeat;
        background-size: cover; }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:nth-child(5) .bg {
        background: url(../img/top/cate05_bg.png) center no-repeat;
        background-size: cover; }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem:nth-child(6) .bg {
        background: url(../img/top/cate06_bg.png) center no-repeat;
        background-size: cover; }
      .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem a {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;
        text-decoration: none;
        padding: 50px 0;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem a .en {
          font-size: 22px;
          display: block;
          margin-bottom: 5px;
          width: 100%;
          margin-bottom: 0; }
        .ec-categoryRole .ec-categoryRole__list .ec-categoryRole__listItem a .ja {
          font-size: 14px;
          display: block; }

/*----------------------------------------------------------------------------
******************************************************************************
** footer
******************************************************************************
----------------------------------------------------------------------------*/
.ec-blockTopBtn {
  display: none !important; }

.ec-footerRole {
  background: #f3f3f3;
  width: 100%;
  border-top: none;
  padding: 30px 10px; }
  .ec-footerRole .ec-footerRole__inner {
    max-width: 1200px; }
    .ec-footerRole .ec-footerRole__inner .ft_logo {
      width: 130px;
      margin: 30px auto;
      display: block; }
    .ec-footerRole .ec-footerRole__inner .ft_sns {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 50px; }
      .ec-footerRole .ec-footerRole__inner .ft_sns a {
        padding: 10px 15px; }
        .ec-footerRole .ec-footerRole__inner .ft_sns a img {
          max-width: 100%;
          width: auto; }
    .ec-footerRole .ec-footerRole__inner .ec-footerNavi {
      color: #000;
      margin-bottom: 50px; }
      .ec-footerRole .ec-footerRole__inner .ec-footerNavi .ec-footerNavi__link a {
        text-decoration: none; }

.ft_copy {
  font-size: 0.9em;
  text-align: center;
  width: 100%;
  background: #222222;
  color: #fff;
  padding: 10px;
  box-sizing: border-box; }

.guide_block {
  margin-top: 30px; }
  .guide_block .box {
    margin-bottom: 50px; }
    .guide_block .box .guide_ttl {
      font-size: 24px;
      position: relative;
      padding-left: 10px;
      margin-bottom: 20px; }
      .guide_block .box .guide_ttl::before {
        content: "";
        width: 2px;
        height: 100%;
        background: #ccc;
        position: absolute;
        top: 0;
        left: 0; }
    .guide_block .box p {
      font-size: 16px;
      line-height: 2em; }
    .guide_block .box a {
      text-decoration: none;
      color: #525263; }
    .guide_block .box.contact {
      padding: 20px;
      background: #f3f3f3; }

.ec-pageHeader h1 {
  font-size: 20px; }

.matomegai_block {
  margin-top: 30px; }
  .matomegai_block .box {
    margin-bottom: 50px; }
    .matomegai_block .box .matomegai_ttl {
      font-size: 24px;
      position: relative;
      padding-left: 10px;
      margin-bottom: 20px; }
      .matomegai_block .box .matomegai_ttl::before {
        content: "";
        width: 2px;
        height: 100%;
        background: #ccc;
        position: absolute;
        top: 0;
        left: 0; }
    .matomegai_block .box p {
      font-size: 16px;
      line-height: 2em;
      margin-bottom: 1em; }
    .matomegai_block .box a {
      text-decoration: none;
      color: #525263; }
    .matomegai_block .box.contact {
      padding: 20px;
      background: #f3f3f3; }
    .matomegai_block .box .matomegai_tb table {
      width: 100%;
      max-width: 400px; }
      .matomegai_block .box .matomegai_tb table tr th {
        padding: 10px;
        background: #ddd; }
      .matomegai_block .box .matomegai_tb table tr td {
        padding: 10px; }
      .matomegai_block .box .matomegai_tb table tr:nth-child(2n-1) td {
        background: #eee; }

.add_banner_240530 {
  width: 150px; }

#news-ticker-container {
  overflow: hidden;
  /* コンテンツがコンテナを超える場合に非表示にする */
  height: 40px;
  /* コンテナの高さを設定 */
  display: flex;
  /* フレックスボックスモデルを適用 */
  justify-content: center;
  /* 主軸方向に空間を挿入して要素間隔を最大にする */
  align-items: center;
  /* 交差軸方向に要素を中央揃えにする */ }

#news-ticker {
  position: absolute;
  /* ティッカーの位置を設定 */
  transition: transform 0.8s ease-in-out;
  /* transformプロパティの変化を0.8秒間で緩やかに適用する */ }

#controls {
  display: flex;
  /* フレックスボックスモデルを適用 */
  align-items: center;
  /* 交差軸方向に要素を中央揃えにする */
  justify-content: flex-end;
  /* 主軸の終端に要素を配置 */
  gap: 10px;
  /* 各要素間のギャップを設定 */
  margin-right: 20px; }
  #controls #prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    transition: background-color 0.3s ease;
    left: 5px; }
  #controls #next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    transition: background-color 0.3s ease;
    right: 5px; }

#controls button {
  height: 30px;
  /* ボタンの高さを設定 */
  line-height: 30px;
  /* ボタン内のテキストの行高を設定 */
  display: flex;
  /* フレックスボックスモデルを適用 */
  align-items: center;
  /* 交差軸方向に要素を中央揃えにする */
  color: #fff;
  background: #333; }

@keyframes slide-up {
  from {
    transform: translateY(100%);
    /* アニメーション開始時、要素を下（Y軸方向）に100%移動 */ }
  to {
    transform: translateY(0);
    /* アニメーション終了時、要素の位置を初期状態（Y軸方向0%）に戻す */ } }