/* カスタマイズ用CSS */
/*-- GNM update 20241112 start--*/
/***********************************************************************
slime_header ver.1.1
***********************************************************************/
/* ▼▼▼ 文字・アイコン・背景色や横幅の変更ここから ▼▼▼
***********************************************************************/
.slim_header {
max-width : none; /* ヘッダー横幅制限したい場合は1130pxに変更 */
background : rgba( 255,255,255,0);/* 背景色を変更 */
}
.slim_header .ec-headerTitle a,
.slim_header .ec-headerNav .ec-headerNav__itemLink ,
.slim_header .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon ,
.slim_header .ec-cartNavi ,
.slim_header .ec-categoryNaviRole__title ,
.slim_header .ec-categoryNaviRole {
color: #000; /* ヘッダー基本的な文字・アイコン色を変更 */
}
@media (min-width :768px){
.slim_header:hover {
background : rgba( 255,255,255,0.5);/* 背景色を変更 */
}
.slim_header .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon ,
.slim_header .ec-cartNavi {
color: #000; /* PC時アイコンの色を変更 */
}
.slim_header .ec-categoryNaviRole li a{
width: 180px;/* カテゴリの横幅変更はこちら */
color: #000; /* カテゴリの文字色を変更 */
background : rgba( 255,255,255,0.8);/* カテゴリの背景色変更はこちら rgba(255,255,255,0.8) ←
#fffなどの形式でも指定可能 */
}
.slim_header .ec-categoryNaviRole ul ul{
left: 180px; /* カテゴリ横幅変更時に合わせて同じ数値に変更 */
}
.slim_header .ec-categoryNaviRole li a:hover {
background : rgba( 250,250,250,0.8);/* カテゴリhover時の背景色変更はこちら
rgba(255,255,255,0.8) ← #fff などの形式でも指定可能 */
}
.slim_header .ec-categoryNaviRole li ul:before {
color: #000; /* カテゴリの>(アローアイコン)の色変更はこちら */
}
}
/* メインコンテンツ外枠の横幅固定を外す */
.ec-layoutRole .ec-layoutRole__contents {
max-width : none; /* 1150px; */
}
/* スライドショーの横幅固定を外す */
.ec-sliderRole {
max-width : none; /* 1130px; */
padding-left : 0; /* 20px; */
padding-right : 0; /* 20px; */
}
/* ▲▲▲ 文字・アイコン・背景色や横幅の変更ここまで ▲▲▲
***********************************************************************/
.slim_header {
display : flex;
justify-content : space-between;
align-items : center;
position : relative;
padding : 15px 30px;
z-index : 999;
}
.slim_header .ec-headerTitle {
font-size : 18px;
font-weight : bold;
margin : 0 0 0 30px;
}
.slim_header .ec-headerNav {
margin-right : 0;
}
.slim_header .ec-headerNaviRole {
width: auto;
max-width : none;
padding : 0;
margin : 0 0 0 auto;
}
.slim_header .ec-headerNav .ec-headerNav__item {
font-size : 14px;
}
.slim_header .ec-headerNav .ec-headerNav__itemIcon {
display : inline-block;
margin-right : 5px;
margin-left : 5px;
font-size : 18px;
}
.slim_header .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon {
display : inline-block;
}
.slim_header .ec-cartNavi {
padding : 3px 0 0 10px;
}
.slim_header .ec-headerNavSP {
top: 8px;
}
.slim_header .ec-headerNav {
display : none;
}
.slim_header .ec-categoryNaviRole {
display : none;
}
@media (min-width :768px){
.front_page .slim_header {
position : fixed;
top: 0;
left: 0;
width: 100%;
transition : 0.4s;
}
.slim_header a:hover {
text-decoration : none;
opacity : 0.8;
}
.slim_header .ec-headerTitle {
margin : 0;
}
.slim_header .ec-headerNav {
margin-right : 20px;
}
.slim_header .ec-headerNav .ec-headerNav__item {
margin : 0 10px;
}
.slim_header .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon {
display : none; /*アイコン表示したい場合はinleine-block に変更*/
}
.slim_header .ec-headerNav .ec-headerNav__item a{
font-size : 14px;
font-weight : bold;
}
.slim_header .ec-cartNavi {
padding : 12px 17px 10px;
}
.slim_header .ec-headerNav {
display : block;
}
.slim_header .ec-categoryNaviRole {
position : relative;
padding : 0;
font-size : 14px;
font-weight : bold;
color: #000;
margin-right : 18px;
transform : translateY( 1px);
max-width : none;
width: auto;
display : block;
}
.slim_header .ec-categoryNaviRole__title {
cursor : pointer;
}
.slim_header .ec-categoryNaviRole__item {
position : absolute;
top: 0;
left: 0;
display : none;
padding-top : 45px;
}
.slim_header .ec-categoryNaviRole:hover .ec-categoryNaviRole__item {
display : block;
}
.slim_header .ec-categoryNaviRole ul{
margin : 0;
padding : 0;
}
.slim_header .ec-categoryNaviRole ul ul{
position : absolute;
top: 0;
}
.slim_header .ec-categoryNaviRole ul ul li{
display : none;
}
.slim_header .ec-categoryNaviRole li:hover >ul>li{
display : block;
}
.slim_header .ec-categoryNaviRole li{
list-style : none;
position : relative;
box-sizing : border-box;
}
.slim_header .ec-categoryNaviRole li a{
display : block;
padding : 15px;
}
.slim_header .ec-categoryNaviRole li ul:before {
content : "\f054" ;
font-family : "Font Awesome 5 Free" ;
font-weight : 900;
font-size : 10px;
position : absolute;
top: 18px;
right: auto;
left: -20px;
}
}
/***********************************************************************
slime_header ここまで
***********************************************************************/

/*おすすめ商品*/
[class="img-flex-"] {
	margin-bottom: 20px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
    flex-wrap: wrap;
}
/* 1190px以下で6列 → 3列 */
@media screen and (max-width: 1190px) {
	.flex-col6::after,
	.flex-col6 .flex-child { width: calc( (100% - 20px) / 3 ); }
}
/* 991px以下で6列 → 2列 */
@media screen and (max-width: 991px) {
	.flex-col6::after,
	.flex-col6 .flex-child { width: calc( (100% - 20px) / 2 ); }
}

/* 991px以下*/
@media screen and (max-width: 991px) {
.ec-searchnavRole__actions select {
    visibility: visible; /* 常に表示させる設定 */
}
}

span.loading03, span.loading03:after {
  display: inline-block;
  width: 20px;
  /*height: 20px;*/
  background-repeat: no-repeat;
  background-image:
  -webkit-gradient(radial,1 center,0,1 center,1,from(#de3b0a),color-stop(0.5,#de3b0a),color-stop(0.9,transparent),to(transparent)),
  -webkit-gradient(radial,center 1,0,center 1,1,from(#de3b0a),color-stop(0.5,#de3b0a),color-stop(0.9,transparent),to(transparent)),
  -webkit-gradient(radial,19 center,0,19 center,1,from(#de3b0a),color-stop(0.5,#de3b0a),color-stop(0.9,transparent),to(transparent)),
  -webkit-gradient(radial,center 19,0,center 19,1,from(#de3b0a),color-stop(0.5,#de3b0a),color-stop(0.9,transparent),to(transparent));
  background-image:
  -webkit-radial-gradient(10% 50%, 1px 1px, #de3b0a, #de3b0a 95%, #de3b0a 95%, transparent),
  -webkit-radial-gradient(50% 10%, 1px 1px, #de3b0a, #de3b0a 95%, #de3b0a 95%, transparent),
  -webkit-radial-gradient(90% 50%, 1px 1px, #de3b0a, #de3b0a 95%, #de3b0a 95%, transparent),
  -webkit-radial-gradient(50% 90%, 1px 1px, #de3b0a, #de3b0a 95%, #de3b0a 95%, transparent);
  background-image:
  radial-gradient(1px 1px at 10% 50%, #de3b0a, #de3b0a 95%, transparent),
  radial-gradient(1px 1px at 50% 10%, #de3b0a, #de3b0a 95%, transparent),
  radial-gradient(1px 1px at 90% 50%, #de3b0a, #de3b0a 95%, transparent),
  radial-gradient(1px 1px at 50% 90%, #de3b0a, #de3b0a 95%, transparent);
}
span.loading03 {
  position: relative;
  margin: 0 10px;
  vertical-align: middle;
  -webkit-animation: animation03 2s linear infinite;
  animation: animation03 2s linear infinite;
}
span.loading03:after {
  position: absolute;
  content: " ";
  left: 0;
  top: 0;
  margin: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@-webkit-keyframes animation03 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes animation03 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*
トピック01（アイテム1列）

*/
.ec-topicRole01 {
  padding: 40px 0;
  background: #F8F8F8;
}
.ec-topicRole01 .ec-topicRole01__list {
  display: block;
  flex-wrap: wrap;
}
.ec-topicRole01 .ec-topicRole01__listItem {
  margin-bottom: 20px;
  width: 100%;
  height: auto;
}
.ec-topicRole01 .ec-topicRole01__listItemTitle {
  margin-top: 0.5em;
  font-size: 14px;
  color: black;
  font-weight: bold; /* 太文字にする */
}

/*main_bottom1*/
#main_bottom1 .ec-role {
    width: 100%; /* 親要素全体の幅を100%に設定 */
    display: block; /* ブロック要素として表示 */
    box-sizing: border-box; /* 幅や高さにpaddingとborderを含める */
}

#main_bottom1 .ec-newItemRole__list {
    display: flex; /* アイテムをフレックスボックスで配置 */
    flex-wrap: wrap; /* アイテムが親要素を越えないように折り返す */
    justify-content: space-between; /* アイテム間に均等なスペースを配置 */
    margin: 0 -5px; /* 親要素の左右にマイナスのマージンを設定して隙間を調整 */
}

#main_bottom1 .ec-newItemRole__listItem {
    flex: 1 0 24%; /* 各アイテムの幅を24%に設定、アイテムの幅を均等に広げる */
    margin: 0 0.5%; /* アイテム間に0.5%のマージンを追加して隙間を狭くする */
        margin-bottom: 10px; /* アイテム下部に10pxの間隔を追加 */
    box-sizing: border-box; /* 幅や高さにpaddingとborderを含める */
}

#main_bottom1 .ec-newItemRole__listItem img {
    width: 100%; /* 画像の幅を親アイテムに合わせて100%に設定 */
    height: auto; /* 画像の縦横比を保ちながら高さを自動調整 */
        border-radius: 5px; /* 画像の角を5px丸めて、柔らかい印象を与える */
    object-fit: cover; /* 画像の縦横比を維持し、親要素にフィットさせて切り取られるように調整 */
}
#main_bottom1 .ec-newItemRole__listItem:hover {
    transform: scale(1.1);
}
/* タイトルと価格の間隔を狭くする */
#main_bottom1 .ec-newItemRole__listItemTitle {
    margin-bottom: 0.5px; /* 下部の余白を狭める */
}
/* 価格のスタイリング */
#main_bottom1 .ec-newItemRole__listItemPrice {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #fff; /* 白色 */
    background-color: #000; /* 黒色背景 */
    padding: 3px 20px;
    border-radius: 20px;
    display: inline-block;
}


.ec-secHeading.recommend-title {
    margin-top: 20px; /* 上部に20pxのスペース */
}

/*トピック01（アイテム1列）*/

.ec-topicRole01 {
  padding: 40px 0;
  background: #FFFFFF;
}
.ec-topicRole01 .ec-topicRole01__list {
  display: block;
  flex-wrap: wrap;
}
.ec-topicRole01 .ec-topicRole01__listItem {
  margin-bottom: 20px;
  width: 100%;
  height: auto;
}
.ec-topicRole01 .ec-topicRole01__listItemTitle {
  margin-top: 0.5em;
  font-size: 14px;
  color: black;
  font-weight: bold; /* 太文字にする */
}

/*商品一覧表示変更*/
/* 商品名 */
.product-name {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000; /* 黒色 */
    margin-bottom: 5px;
}

/* 製品仕様などの説明 */
.product-description {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #666; /* グレー */
    margin-bottom: 5px;
}

/* 全体のコンテナにスペースを設定 */
.product-info {
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* 要素を縦方向に配置 */
    align-items: flex-start; /* 左揃え */
    gap: 10px; /* 価格、数量、カートボタンの間隔を10pxに設定 */
}

/* 価格部分 */
.product-price {
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #fff; /* 白色 */
    background-color: #000; /* 黒色背景 */
    padding: 5px 25px;
    border-radius: 25px;
    display: inline-block;
}

/* 数量部分 */
.product-quantity {
    display: flex; /* ラベルと入力欄を横並びに */
    align-items: center; /* 縦方向の中央揃え */
    gap: 8px; /* ラベルと入力欄の間隔を8pxに設定 */
    font-size: 14px; /* 数量ラベルの文字サイズ */
    color: #000; /* 数量ラベルの文字色 */
}

/* 数量入力欄のスタイル */
.product-quantity input[type="number"] {
    width: 50px; /* 入力欄の横幅を50pxに設定 */
    height: 30px; /* 入力欄の高さを30pxに設定 */
    font-size: 14px; /* 入力欄の文字サイズを14pxに設定 */
    text-align: center; /* 数字を中央揃えにする */
    border: 1px solid #ccc; /* 入力欄の枠線を薄いグレーに設定 */
    border-radius: 5px; /* 入力欄の角を丸くする */
    padding: 0 5px; /* 入力欄の内側余白を設定 */
    box-sizing: border-box; /* パディングを含めたサイズ調整 */
}
/* ランキング */
.ranking-page {
    width: 100%;
    max-width: 1200px; /* ページ全体の最大幅 */
    margin: 0 auto; /* 中央揃え */
}

.ranking-list {
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 20px; /* 各アイテム間の余白 */
    justify-content: center; /* コンテンツを中央揃え */
}

.ranking-item {
    flex: 1 1 200px; /* 基本幅200px、アイテムが収まりきらない場合に縮小 */
    max-width: 200px; /* アイテムの最大幅を固定 */
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box; /* パディングを含めた幅を計算 */
}

.ranking-number {
    background-color: #c71585;
    color: #fff;
    font-size: 18px;
    padding: 5px;
}

.product-image {
    width: 100%;
    height: auto;
}

.product-info {
    padding: 10px;
}

.product-name {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0;
}

.product-price {
    color: #ffffff;
    font-size: 14px;
}

.product-rating {
    font-size: 12px;
    color: #666;
}
.ranking-item:hover {
    transform: scale(1.1);
}    
/* ウィンドウ幅が狭い場合の調整 */

@media (max-width: 768px) {
    .ranking-item {
        flex: 1 1 150px; /* 基本幅150pxに縮小 */
        max-width: 150px; /* 最大幅も150pxに変更 */
    }
}

@media (max-width: 480px) {
    .ranking-item {
        flex: 1 1 100%; /* 狭い場合は1列表示 */
        max-width: 100%; /* 幅を親要素に合わせる */
    }
}
/* 点滅する赤文字のスタイル */
@keyframes blink {
    0% { color: red; }
    50% { color: transparent; }
    100% { color: red; }
}

.recommend-title .ec-secHeading__ja01 {
    animation: blink 2s infinite;
}
.ec-secHeading .ec-secHeading__ja01 {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.15em;
  vertical-align: 2px;
}