/* カスタマイズ用CSS */
:root {
    --accent-color: #ff1493; /*firebrick #b22222 */
    --sub-color: #E8BF2D;
    --bg-gray: #fafafa;
}

html {
    font-family: Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, "sans-serif";
}
html {
 overflow-x: hidden;
 overflow-y: scroll; -webkit-overflow-scrolling: touch
 }

body {
    overflow-x: hidden;
    color: black;
}

.txt_white {
    color: white;
}

.text_white p {
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 0px 1px 0 #000, 0-1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;
}

.txt_black {
    color: black;
}

.txt_black p {
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.simple_square_btn {
    display: block;
    width: 160px;
    margin-right: auto;
    margin-left: auto;
    padding: 0.6rem 0.8em;
    text-align: center;
    text-decoration: none;
}

.simple_square_btn:hover {
    opacity: 0.8;
    cursor: pointer;
    text-decoration: none;
    color: var(--accent-color);
}

.btn_white {
    color: #000;
    background: white;
    border: #333333 1px solid;
}

.btn_black {
    color: #fff;
    background: black;
    border: #ffffff 1px solid;
}

.ec-shelfRole {
    margin: 10% auto;
}

.ec-secHead {
    font-size: 1.5rem;
    font-weight: bold;
}

.ec-secHeading {
    text-align: center;
}

.ec-blockBtn--action {
    background-color: #000000;
    border-color: #000000;
}

.ec-blockBtn--action:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.reverse {
    flex-direction: row-reverse;
}

/*--- 背景色あり ---*/
.bg-fill-gray {
    background-color: var(--bg-gray);
    margin-top: 0;
    padding-top: 10%;
}

/* 区切り線一括 */
.ec-headerRole {
    border-bottom: 2px solid var(--accent-color);
    margin-bottom: 20px;
}

/*--------------------------------
	　ヘッダー
--------------------------------*/
.headerLogo {
    width: 95% !important;
    height: auto;
    margin: 0 auto;
}

@media screen and (min-width:481px) {

    /*　画面サイズが480pxからはここを読み込む　*/
    .headerLogo {
        width: 450px !important;
        height: auto;
    }
}

/*--- 検索ボックス ---*/

.ec-headerSearch:after {
  content: " ";
  display: table;
}
.ec-headerSearch:after {
  clear: both;
}
.ec-headerSearch .ec-headerSearch__category {
  float: none;
}
.ec-headerSearch .ec-headerSearch__category .ec-select {
  overflow: hidden;
  width: 100%;
  margin: 0;
  text-align: center;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select {
  width: 100%;
  cursor: pointer;
  padding: 8px 24px 8px 8px;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: black;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select option {
  color: #000;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
  display: none;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
  position: relative;
  border: 0;
  background: #c0c0c0;
  color: black;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
  position: absolute;
  top: 0.8em;
  right: 0.4em;
  width: 0;
  height: 0;
  padding: 0;
  content: "";
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid black;
  pointer-events: none;
}
.ec-headerSearch .ec-headerSearch__keyword {
  position: relative;
  color: #525263;
  border: 1px solid #ccc;
  background-color: #f6f6f6;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
  width: 100%;
  height: 34px;
  font-size: 16px;
  border: 0 none;
  padding: 0.5em 50px 0.5em 1em;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  margin-bottom: 0;
}
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
  width: 22px;
  height: 22px;
}
.ec-headerSearch .ec-headerSearch__keywordBtn {
  border: 0;
  background: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-55%);
  display: block;
  white-space: nowrap;
  z-index: 1;
}

@media only screen and (min-width: 768px) {
  .ec-headerSearch .ec-headerSearch__category {
    float: left;
    width: 43%;
  }
  .ec-headerSearch .ec-headerSearch__category .ec-select select {
    max-width: 165px;
    height: 36px;
  }

.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
  border-top-right-radius: inherit;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.ec-headerSearch .ec-headerSearch__keyword {
  float: right;
  width: 57%;
  border-bottom-left-radius: inherit;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
  font-size: 12px;
}
}

/*--------------------------------
	　フッター
--------------------------------*/
.ec-footerRole {
    background: white;
    border-top: 2px solid var(--accent-color);
}

.ec-footerNavi {
    color: black;
}

.ec-footerTitle {
    color: black;
}

.footerLogo {
    width: 55%;
    height: auto;
    margin: 0 auto;
}

@media screen and (min-width:481px) {

    /*　画面サイズが480pxからはここを読み込む　*/
    .footerLogo {
        width: 250px !important;
        height: auto;
    }
}

/*--------------------------------
	　ドロワー
--------------------------------*/
.ec-drawerRole {
    background: white;
}

.ec-drawerRole .ec-headerLinkArea {
    background-color: white;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
    color: black;
}

/*--------------------------------
	　トップページバナー
--------------------------------*/
.ec-sliderRole {
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    margin-bottom: 24px;
}

.main_banner {
    display: flex;
}

.banner-img {
    width: 100%;
    /* 幅を100%に設定 */
    max-width: 60%;
    padding-bottom: 10%;
    position: relative;
}

.banner-img img {
    width: 100%;
    /* 幅を100%に設定 */
    height: 120%;
    /* 高さを100%に設定 */
    object-fit: cover;
    /* 画像を正方形に切り抜くための設定 */
}

.banner-text {
    width: 40%;
    margin-right: 20px;
    /* テキストを画像の右側に配置する際の余白 */
    padding-top: 10%;
}

@media screen and (max-width: 767px) {

    /* スマートフォンの表示に適用するCSS */
    .main_banner,
    .main_banner.reverse {
        flex-direction: column;
        /* 要素を縦方向に配置 */
        align-items: flex-start;
        /* 要素を左揃えにする */
    }

    .banner-img {
        width: 100%;
        /* 幅を100%に設定 */
        max-width: 100%;
        padding-bottom: 100%;
        /* 高さを正方形にするため、パディングの割合を設定 */
        position: relative;
        /* 子要素の位置を制御するための設定 */
    }

    .banner-img img {
        position: absolute;
        /* 画像の位置を絶対位置に設定 */
        width: 100%;
        /* 幅を100%に設定 */
        height: 100%;
        /* 高さを100%に設定 */
        object-fit: cover;
        /* 画像を正方形に切り抜くための設定 */
    }

    .banner-text {
        width: 100%;
        margin-top: 20px;
        /* テキストを画像の下に配置する際の余白 */
        padding-top: 0;
    }
}

.main_banner h3 {
    margin: 20px 0;
    padding: 0;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.main_banner p {
    width: 90%;
    text-align: left;
    margin: 5% 5%;
    padding: 0;
    font-size: 1.0rem;
}

.ec-categoryRole .ec-secHeading {
    text-align: center;
}

.secCategory .ec-secHeading {
    text-align: center;
}

/*--------------------------------
	　アイキャッチ
--------------------------------*/
.ec-catcherRole {
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
    margin-bottom: 24px;
}

.catcherList {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 90%;
    margin: 5% auto;
}

.catcherList__item {
    width: calc(90% / 2);
    margin-right: 10%;
    margin-bottom: 5%;
}

.catcherList__item:nth-child(2n) {
    margin-right: 0;
}

.catcher-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catcher-text {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    /* テキストを画像の下に配置する際の余白 */
    padding-top: 0;
}

.catcher-text a {
    color: black;
    text-decoration: none;
}

.catcher-text a:hover {
    color: var(--accent-color);
}

.catcher-text i {
    padding-left: 10px;
}

@media screen and (max-width: 767px) {
    .catcherList {
        width: 100%;
    }

    .catcherList__item {
        width: 100%;
        margin-right: 0;
    }

    .catcherList__item:nth-child(2n) {
        margin-right: 0;
    }

    .catcherList__item:nth-child(4n) {
        margin-right: 0;
    }

    .catcher-img {
        width: 100%;
        /* 幅を100%に設定 */
        max-width: 100%;
        padding-bottom: 100%;
        /* 高さを正方形にするため、パディングの割合を設定 */
        position: relative;
        /* 子要素の位置を制御するための設定 */
    }

    .catcher-img img {
        position: absolute;
        /* 画像の位置を絶対位置に設定 */
        width: 100%;
        /* 幅を100%に設定 */
        height: 100%;
        /* 高さを100%に設定 */
        object-fit: cover;
        /* 画像を正方形に切り抜くための設定 */
    }
}

/*--------------------------------
	　商品一覧ページ
--------------------------------*/
.ec-shelfGrid .ec-shelfGrid__item form {
    margin-top: auto;
}

.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
    margin-top: 0;
}

.ec-shelfGrid .ec-shelfGrid__item a {
    margin-bottom: 10px;
}

.price02-default {
    margin-top: 10px;
    font-weight: bold;
}

.ec-shelfGrid .ec-shelfGrid__item-image {
    position: relative;
}
.product-img_soldout {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%) rotate(-10deg);
    -webkit-transform: translate(-50%,-50%) rotate(-10deg);
    transform: translate(-50%,-50%) rotate(-10deg);
    margin:0;
    z-index: 1000;
    background-color: rgba(255, 20, 147, 0.6);
    color: white;
    width: 100%;
    padding: 5px;
}