.header {
    padding-top: 0px !important;
}
.header .left {
    padding-bottom: 15px !important;
}

@media (min-width: 768px) and (max-width: 959px) {
  .fs-pt-carousel {
    margin-top: 140px;
  }
}
@media (max-width: 959px) {
  .category_summary {
    margin-top: 80px !important;
  }
}
@media (max-width: 767px) {
  .fs-l-checkout {
    margin: 50px 0 100px;
  }
}

@media (min-width: 768px) {
  .fs-l-checkout {
    margin: 100px 0 150px;
  }
}

@media (max-width: 959px) {
  .fs-l-page .fs-l-main {
    margin-top: 12rem !important;
  }
  .fs-l-cart {
    margin-top: 10rem !important;
  }
  .fs-l-account {
    margin-top: 10rem !important;
  }
  .fs-p-aboutTerms {
    margin-top: 10rem !important;
  }
  .fs-p-returnPolicy {
    margin-top: 10rem !important;
  }
  .fsfp {
    margin-top: 12rem !important;
  }
  .fs-p-shopinfo {
    margin-top: 12rem !important;
  }
  .fs-c-productList {
    margin-top: 6rem !important;
  }
  .fs-c-documentArticle {
    margin-top: 12rem !important;
  }
  .fs-p-shopinfo {
    margin-top: 12rem !important;
  }
}

div.poplink {
  top: 50px;
  left: 50px !important;
}

.fs-p-heading--lv2 {
    display: none;
  }
.fr3-item__productName {
    max-height: 64px;
    line-height: 16px;
    overflow: hidden;
}
.fr3-productListCarousel__slide {
    margin-bottom: 1rem;
}
.fr3-item__productPrice {
    font-weight: bold;
    color: #ff0000;
}
h2.aireco-title {
    margin: 0 auto 30px;
    padding: 16px 0 16px 5px;
    border-bottom: 2px solid #11347b;
    font-weight: bold;
    font-size: 1.4em;
}

.fs-pt-carousel {
    opacity: 1; /* 初期状態で透明にする */
    transition: opacity 0.5s ease-in-out; /* なめらかに表示 */
}

/* 大PC用 (16:5.5) */
@media (min-width: 1300px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 5.5;
    width: 100%;
    max-width: 1400px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}

/* 小PC用 (16:5.5) */
@media (min-width: 960px) and (max-width: 1299px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 5.5;
    width: 100%;
    max-width: 1300px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}

/* タブレット用 (16:7) */
@media (min-width: 768px) and (max-width: 959px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 7;
    width: 100%;
    max-width: 960px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}
/* タブレット用 (16:7.5) */
@media (min-width: 580px) and (max-width: 767px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 768px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}
/* スマホ用 (16:9) */
@media (min-width: 510px) and (max-width: 579px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 9.5;
    width: 100%;
    max-width: 600px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}
/* スマホ用 (16:9) */
@media (min-width: 480px) and (max-width: 509px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 10;
    width: 100%;
    max-width: 600px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}
/* スマホ用 (16:9) */
@media (min-width: 420px) and (max-width: 479px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 10.5;
    width: 100%;
    max-width: 600px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}
/* スマホ用 (16:9) */
@media (min-width: 380px) and (max-width: 419px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 11;
    width: 100%;
    max-width: 600px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}
/* スマホ用 (16:9) */
@media (min-width: 348px) and (max-width: 379px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 11.5;
    width: 100%;
    max-width: 600px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}
/* スマホ用 (16:9) */
@media (min-width: 321px) and (max-width: 347px) {
  .flywheel-recommend__frame {
    aspect-ratio: 16 / 13;
    width: 100%;
    max-width: 600px;
    background-color: #f0f0f0;
    overflow: hidden;
  }
}

/* ローディング用のプレースホルダー */
.loading-placeholderrank {
    width: 100%;
    height: 377px; /* 外部コンテンツの高さに合わせる */
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #333;
    font-size: 18px;
    position: relative;
}

/* アニメーションのスタイル */
.loading-animationrank {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fr3-item__imageContainer {
    width: 100%; /* コンテナを100%に設定 */
    position: relative;
    padding-bottom: 100%; /* 例として4:3のアスペクト比を設定。画像に応じてこの値を調整します。 */
    background-color: #f0f0f0; /* 画像が表示されるまでグレーの背景を表示します。 */
}

.fr3-item__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の縦横比を維持してコンテナに収めます。 */
    transition: opacity 0.5s ease-in; /* フェードイン効果を追加して画像表示を滑らかにします。 */
    opacity: 0;
}

.fr3-item__image[src] {
    opacity: 1; /* 画像が読み込まれたら表示されるようにします。 */
}

<!--future AI recommend用CSSここまで（最上段固定）-->

<!--基本CSSを書き換えてみるここから-->
.fs-c-productList .fs-c-productName__name {
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10 !important;
    overflow: hidden;
    max-height: 10em !important;
}

.mark-icons {
 width:5.4em;
}

/* PC用 */
@media (min-width: 960px) {
  .fsfp {
    margin-top: 1rem;
  }
}
/* タブレット用 */
@media (min-width: 760px) and (max-width: 959px) {
  .fsfp {
    margin-top: 10rem;
  }
}
/* タブレット用 */
@media (min-width: 580px) and (max-width: 759px) {
  .fsfp {
    margin-top: 7rem;
  }
}
/* スマホ用 */
@media (max-width: 579px) {
  .fsfp {
    margin-top: 4rem;
  }
}

/* PC用 */
@media (min-width: 960px) {
  .row-cols-3pc2sm>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto !important;
    width: 33.3333333333% !important;
  }
}
/* タブレット用 */
@media (min-width: 580px) and (max-width: 959px) {
  .row-cols-3pc2sm>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto !important;
    width: 50% !important;
  }
}
/* スマホ用 */
@media (max-width: 579px) {
  .row-cols-3pc2sm>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto !important;
    width: 50% !important;
  }
}

/* PC用 */
@media (min-width: 960px) {
  .row-cols-4pc3tb2sm>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto !important;
    width: 25% !important;
  }
}
/* タブレット用 */
@media (min-width: 580px) and (max-width: 959px) {
  .row-cols-4pc3tb2sm>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto !important;
    width: 33.3333333333% !important;
  }
}
/* スマホ用 */
@media (max-width: 579px) {
  .row-cols-4pc3tb2sm>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto !important;
    width: 50% !important;
  }
}

<!--フリーページのページ内リンクボタン用ここから-->
.freepagetop-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.freepagetop-buttons a {
  display: inline-block;
  text-align: center;
  padding: 10px 10px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #286dd4;
  color: #FFFFFF;
  transition: background-color 0.3s, color 0.3s;
}

.freepagetop-buttons a:hover {
  background-color: #00259e;
  color: #fff;
}

.freepagetop-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

@media (min-width: 960px) {
  .freepagetop-buttons {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 580px) and (max-width: 959px) {
  .freepagetop-buttons {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 579px) {
  .freepagetop-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}
<!--フリーページのページ内リンクボタン用ここまで-->

<!--基本CSSを書き換えてみるここまで-->

<!--スライドバナーの横幅指定ここから-->
.fs-c-slick .slick-slide img { width: 1080px !important; height: auto !important; }
<!--スライドバナーの横幅指定ここまで-->

<!--左右中央寄せinlineここから-->
.jyptc { text-align: center !important; }
.jyptr { text-align: right !important; }
.jyptl { text-align: left !important; }
<!--左右中央寄せinlineここまで-->

<!--左右中央寄せblockここから-->
.jypcenter { margin: 0 auto !important; }
<!--左右中央寄せblockここまで-->

<!--最大横幅設定ここから-->
.maxw-1 { max-width: 100px !important; margin: 0 auto !important; }
.maxw-2 { max-width: 200px !important; margin: 0 auto !important; }
.maxw-3 { max-width: 300px !important; margin: 0 auto !important; }
.maxw-4 { max-width: 400px !important; margin: 0 auto !important; }
.maxw-5 { max-width: 500px !important; margin: 0 auto !important; }
.maxw-6 { max-width: 600px !important; margin: 0 auto !important; }
.maxw-7 { max-width: 700px !important; margin: 0 auto !important; }
.maxw-8 { max-width: 800px !important; margin: 0 auto !important; }
.maxw-9 { max-width: 900px !important; margin: 0 auto !important; }
.maxw-10 { max-width: 1000px !important; margin: 0 auto !important; }
.maxw-11 { max-width: 1100px !important; margin: 0 auto !important; }
.maxw-12 { max-width: 1200px !important; margin: 0 auto !important; }
.maxw-13 { max-width: 1300px !important; margin: 0 auto !important; }
.maxw-14 { max-width: 1400px !important; margin: 0 auto !important; }
<!--最大横幅設定ここまで-->

<!--最大横幅％設定ここから-->
.maxwp-1 { max-width: 10% ; }
.maxwp-2 { max-width: 20% ; }
.maxwp-3 { max-width: 30% ; }
.maxwp-4 { max-width: 40% ; }
.maxwp-5 { max-width: 50% ; }
.maxwp-6 { max-width: 60% ; }
.maxwp-7 { max-width: 70% ; }
.maxwp-8 { max-width: 80% ; }
.maxwp-9 { max-width: 90% ; }
.maxwp-10 { max-width: 100% ; }
<!--最大横幅％設定ここまで-->

<!--余白設定marginここから-->
.mt-1 { margin-top: 1rem !important; }
.mt-2 { margin-top: 2rem !important; }
.mt-3 { margin-top: 3rem !important; }
.mt-4 { margin-top: 4rem !important; }
.mt-5 { margin-top: 5rem !important; }
.mt-6 { margin-top: 6rem !important; }
.mt-7 { margin-top: 7rem !important; }
.mt-8 { margin-top: 8rem !important; }
.mt-9 { margin-top: 9rem !important; }
.mt-10 { margin-top: 10rem !important; }
.mb-1 { margin-bottom: 1rem !important; }
.mb-2 { margin-bottom: 2rem !important; }
.mb-3 { margin-bottom: 3rem !important; }
.mb-4 { margin-bottom: 4rem !important; }
.mb-5 { margin-bottom: 5rem !important; }
.mb-6 { margin-bottom: 6rem !important; }
.mb-7 { margin-bottom: 7rem !important; }
.mb-8 { margin-bottom: 8rem !important; }
.mb-9 { margin-bottom: 9rem !important; }
.mb-10 { margin-bottom: 10rem !important; }
.mr-1 { margin-right: 1rem !important; }
.mr-2 { margin-right: 2rem !important; }
.mr-3 { margin-right: 3rem !important; }
.mr-4 { margin-right: 4rem !important; }
.mr-5 { margin-right: 5rem !important; }
.mr-6 { margin-right: 6rem !important; }
.mr-7 { margin-right: 7rem !important; }
.mr-8 { margin-right: 8rem !important; }
.mr-9 { margin-right: 9rem !important; }
.mr-10 { margin-right: 10rem !important; }
.ml-1 { margin-left: 1rem !important; }
.ml-2 { margin-left: 2rem !important; }
.ml-3 { margin-left: 3rem !important; }
.ml-4 { margin-left: 4rem !important; }
.ml-5 { margin-left: 5rem !important; }
.ml-6 { margin-left: 6rem !important; }
.ml-7 { margin-left: 7rem !important; }
.ml-8 { margin-left: 8rem !important; }
.ml-9 { margin-left: 9rem !important; }
.ml-10 { margin-left: 10rem !important; }
<!--余白設定marginここまで-->

<!--余白設定paddingここから-->
.pt-1 { padding-top: 1rem !important; }
.pt-2 { padding-top: 2rem !important; }
.pt-3 { padding-top: 3rem !important; }
.pt-4 { padding-top: 4rem !important; }
.pt-5 { padding-top: 5rem !important; }
.pt-6 { padding-top: 6rem !important; }
.pt-7 { padding-top: 7rem !important; }
.pt-8 { padding-top: 8rem !important; }
.pt-9 { padding-top: 9rem !important; }
.pt-10 { padding-top: 10rem !important; }
.pb-1 { padding-bottom: 1rem !important; }
.pb-2 { padding-bottom: 2rem !important; }
.pb-3 { padding-bottom: 3rem !important; }
.pb-4 { padding-bottom: 4rem !important; }
.pb-5 { padding-bottom: 5rem !important; }
.pb-6 { padding-bottom: 6rem !important; }
.pb-7 { padding-bottom: 7rem !important; }
.pb-8 { padding-bottom: 8rem !important; }
.pb-9 { padding-bottom: 9rem !important; }
.pb-10 { padding-bottom: 10rem !important; }
.pr-1 { padding-right: 1rem !important; }
.pr-2 { padding-right: 2rem !important; }
.pr-3 { padding-right: 3rem !important; }
.pr-4 { padding-right: 4rem !important; }
.pr-5 { padding-right: 5rem !important; }
.pr-6 { padding-right: 6rem !important; }
.pr-7 { padding-right: 7rem !important; }
.pr-8 { padding-right: 8rem !important; }
.pr-9 { padding-right: 9rem !important; }
.pr-10 { padding-right: 10rem !important; }
.pl-1 { padding-left: 1rem !important; }
.pl-2 { padding-left: 2rem !important; }
.pl-3 { padding-left: 3rem !important; }
.pl-4 { padding-left: 4rem !important; }
.pl-5 { padding-left: 5rem !important; }
.pl-6 { padding-left: 6rem !important; }
.pl-7 { padding-left: 7rem !important; }
.pl-8 { padding-left: 8rem !important; }
.pl-9 { padding-left: 9rem !important; }
.pl-10 { padding-left: 10rem !important; }
<!--余白設定paddingここまで-->

<!--画像の角を丸くするここから-->
.jypimgr-1 { border-radius: 1%; }
.jypimgr-2 { border-radius: 2%; }
.jypimgr-3 { border-radius: 3%; }
.jypimgr-4 { border-radius: 4%; }
.jypimgr-5 { border-radius: 5%; }
.jypimgr-6 { border-radius: 6%; }
.jypimgr-7 { border-radius: 7%; }
.jypimgr-8 { border-radius: 8%; }
.jypimgr-9 { border-radius: 9%; }
.jypimgr-10 { border-radius: 10%; }
.jypimgr-15 { border-radius: 15%; }
.jypimgr-20 { border-radius: 20%; }
.jypimgr-25 { border-radius: 25%; }
.jypimgr-30 { border-radius: 30%; }
.jypimgr-35 { border-radius: 35%; }
.jypimgr-40 { border-radius: 40%; }
.jypimgr-45 { border-radius: 45%; }
.jypimgr-50 { border-radius: 50%; }
<!--画像の角を丸くするここまで-->

<!--画像のボーダーカラー指定ここから-->
.jypbc-white { border: solid 1px #ffffff; }
.jypbc-black { border: solid 1px #000000; }
.jypbc-gray { border: solid 1px #808080; }
.jypbc-silver { border: solid 1px #c0c0c0; }
.jypbc-maroon { border: solid 1px #800000; }
.jypbc-red { border: solid 1px #ff0000; }
.jypbc-purple { border: solid 1px #800080; }
.jypbc-fuchsia { border: solid 1px #ff00ff; }
.jypbc-green { border: solid 1px #008000; }
.jypbc-lime { border: solid 1px #00ff00; }
.jypbc-olive { border: solid 1px #808000; }
.jypbc-yellow { border: solid 1px #ffff00; }
.jypbc-navy { border: solid 1px #000080; }
.jypbc-blue { border: solid 1px #0000ff; }
.jypbc-teal { border: solid 1px #008080; }
.jypbc-aqua { border: solid 1px #00ffff; }
.jypbc-lightgreen { border: solid 1px #90ee90; }
.jypbc-lightgrey { border: solid 1px #d3d3d3; }
.jypbc-lightpink { border: solid 1px #ffb6c1; }
.jypbc-beige { border: solid 1px #f5f5dc; }
.jypbc-brown { border: solid 1px #a52a2a; }
.jypbc-magenta { border: solid 1px #ff00ff; }
.jypbc-crimson { border: solid 1px #dc143c; }
.jypbc-darkblue { border: solid 1px #00008b; }
.jypbc-orange { border: solid 1px #ffa500; }
.jypbc-pink { border: solid 1px #ffc0cb; }
.jypbc-plum { border: solid 1px #dda0dd; }
.jypbc-gold { border: solid 1px #ffd700; }
.jypbc-skyblue { border: solid 1px #87ceeb; }
.jypbc-snow { border: solid 1px #fffafa; }
.jypbc-indigo { border: solid 1px #4b0082; }
.jypbc-ivory { border: solid 1px #fffff0; }
.jypbc-khaki { border: solid 1px #f0e68c; }
.jypbc-lavender { border: solid 1px #e6e6fa; }
.jypbc-violet { border: solid 1px #ee82ee; }
.jypbc-yellowgreen { border: solid 1px #9acd32; }
<!--画像のボーダーカラー指定ここまで-->

<!--バナー透過率調整ここから-->
p.opac1 img:hover { opacity: 1.0; }
p.opac2 img:hover { opacity: 0.8; }
p.opac3 img:hover { opacity: 0.6; }
p.opac4 img:hover { opacity: 0.4; }
p.opac5 img:hover { opacity: 0.2; }
p.opac6 img:hover { opacity: 0; }
<!--バナー透過率調整ここまで-->

<!--テキストカラー指定ここから-->
.jypfc-white { color: #ffffff; }
.jypfc-black { color: #000000; }
.jypfc-gray { color: #808080; }
.jypfc-silver { color: #c0c0c0; }
.jypfc-maroon { color: #800000; }
.jypfc-red { color: #ff0000; }
.jypfc-purple { color: #800080; }
.jypfc-fuchsia { color: #ff00ff; }
.jypfc-green { color: #008000; }
.jypfc-lime { color: #00ff00; }
.jypfc-olive { color: #808000; }
.jypfc-yellow { color: #ffff00; }
.jypfc-navy { color: #000080; }
.jypfc-blue { color: #0000ff; }
.jypfc-teal { color: #008080; }
.jypfc-aqua { color: #00ffff; }
.jypfc-lightgreen { color: #90ee90; }
.jypfc-lightgrey { color: #d3d3d3; }
.jypfc-lightpink { color: #ffb6c1; }
.jypfc-beige { color: #f5f5dc; }
.jypfc-brown { color: #a52a2a; }
.jypfc-magenta { color: #ff00ff; }
.jypfc-crimson { color: #dc143c; }
.jypfc-darkblue { color: #00008b; }
.jypfc-orange { color: #ffa500; }
.jypfc-pink { color: #ffc0cb; }
.jypfc-plum { color: #dda0dd; }
.jypfc-gold { color: #ffd700; }
.jypfc-skyblue { color: #87ceeb; }
.jypfc-snow { color: #fffafa; }
.jypfc-indigo { color: #4b0082; }
.jypfc-ivory { color: #fffff0; }
.jypfc-khaki { color: #f0e68c; }
.jypfc-lavender { color: #e6e6fa; }
.jypfc-violet { color: #ee82ee; }
.jypfc-yellowgreen { color: #9acd32; }
<!--テキストカラー指定ここまで-->

<!--テキスト太さ指定ここから-->
.jypfw-normal { font-weight: normal; }
.jypfw-bold { font-weight: bold; }
.jypfw-lighter { font-weight: lighter; }
.jypfw-bolder { font-weight: bolder; }
<!--テキスト太さ指定ここまで-->

<!--テキスト大きさ指定emここから-->
.jypfs-em03 { font-size: 0.3em; }
.jypfs-em04 { font-size: 0.4em; }
.jypfs-em05 { font-size: 0.5em; }
.jypfs-em06 { font-size: 0.6em; }
.jypfs-em07 { font-size: 0.7em; }
.jypfs-em08 { font-size: 0.8em; }
.jypfs-em09 { font-size: 0.9em; }
.jypfs-em1 { font-size: 1.1em; }
.jypfs-em2 { font-size: 1.2em; }
.jypfs-em3 { font-size: 1.3em; }
.jypfs-em4 { font-size: 1.4em; }
.jypfs-em5 { font-size: 1.5em; }
.jypfs-em6 { font-size: 1.6em; }
.jypfs-em7 { font-size: 1.7em; }
.jypfs-em8 { font-size: 1.8em; }
.jypfs-em9 { font-size: 1.9em; }
.jypfs-em10 { font-size: 2.0em; }
<!--テキスト大きさ指定emここまで-->

<!--テキスト大きさ指定pxここから-->
.jypfs-size10 { font-size: 10px; }
.jypfs-size11 { font-size: 11px; }
.jypfs-size12 { font-size: 12px; }
.jypfs-size13 { font-size: 13px; }
.jypfs-size14 { font-size: 14px; }
.jypfs-size15 { font-size: 15px; }
.jypfs-size16 { font-size: 16px; }
.jypfs-size17 { font-size: 17px; }
.jypfs-size18 { font-size: 18px; }
.jypfs-size19 { font-size: 19px; }
.jypfs-size20 { font-size: 20px; }
.jypfs-size21 { font-size: 21px; }
.jypfs-size22 { font-size: 22px; }
.jypfs-size23 { font-size: 23px; }
.jypfs-size24 { font-size: 24px; }
<!--テキスト大きさ指定pxここまで-->

<!--テキストアンダーライン指定ここから-->
.jypul-none { text-decoration: none; }
.jypul-dot { text-decoration: underline dotted; }
.jypul-wave { text-decoration: underline wavy; }
.jypul-double { text-decoration: underline double; }
.jypul-ol { text-decoration: underline overline; }
<!--テキストアンダーライン指定ここまで-->

<!--背景カラー指定ここから-->
.jypbg-white { background-color: #ffffff; }
.jypbg-black { background-color: #000000; }
.jypbg-gray { background-color: #808080; }
.jypbg-silver { background-color: #c0c0c0; }
.jypbg-maroon { background-color: #800000; }
.jypbg-red { background-color: #ff0000; }
.jypbg-purple { background-color: #800080; }
.jypbg-fuchsia { background-color: #ff00ff; }
.jypbg-green { background-color: #008000; }
.jypbg-lime { background-color: #00ff00; }
.jypbg-olive { background-color: #808000; }
.jypbg-yellow { background-color: #ffff00; }
.jypbg-navy { background-color: #000080; }
.jypbg-blue { background-color: #0000ff; }
.jypbg-teal { background-color: #008080; }
.jypbg-aqua { background-color: #00ffff; }
.jypbg-lightgreen { background-color: #90ee90; }
.jypbg-lightgrey { background-color: #d3d3d3; }
.jypbg-lightpink { background-color: #ffb6c1; }
.jypbg-beige { background-color: #f5f5dc; }
.jypbg-brown { background-color: #a52a2a; }
.jypbg-magenta { background-color: #ff00ff; }
.jypbg-crimson { background-color: #dc143c; }
.jypbg-darkblue { background-color: #00008b; }
.jypbg-orange { background-color: #ffa500; }
.jypbg-pink { background-color: #ffc0cb; }
.jypbg-plum { background-color: #dda0dd; }
.jypbg-gold { background-color: #ffd700; }
.jypbg-skyblue { background-color: #87ceeb; }
.jypbg-snow { background-color: #fffafa; }
.jypbg-indigo { background-color: #4b0082; }
.jypbg-ivory { background-color: #fffff0; }
.jypbg-khaki a { background-color: #f0e68c; }
.jypbg-lavender { background-color: #e6e6fa; }
.jypbg-violet { background-color: #ee82ee; }
.jypbg-yellowgreen { background-color: #9acd32; }
.jypbg-bell { background-color: #f7f5f4; }
<!--背景カラー指定ここまで-->

<!--水平線の装飾ここから-->
.jyphr-solid { border-top: 1px solid #aaa; }
.jyphr-dotted { border-top: 1px dotted #aaa; }
.jyphr-dashed { border-top: 1px dashed #aaa; }
.jyphr-double { border-top: 1px double #aaa; }
<!--水平線の装飾ここから-->

<!--ボタン裏カラー指定ここから-->
.btn.jypbtn-white a { background-color: #ffffff; }
.btn.jypbtn-black a { background-color: #000000; }
.btn.jypbtn-gray a { background-color: #808080; }
.btn.jypbtn-silver a { background-color: #c0c0c0; }
.btn.jypbtn-maroon a { background-color: #800000; }
.btn.jypbtn-red a { background-color: #ff0000; }
.btn.jypbtn-purple a { background-color: #800080; }
.btn.jypbtn-fuchsia a { background-color: #ff00ff; }
.btn.jypbtn-green a { background-color: #008000; }
.btn.jypbtn-lime a { background-color: #00ff00; }
.btn.jypbtn-olive a { background-color: #808000; }
.btn.jypbtn-yellow a { background-color: #ffff00; }
.btn.jypbtn-navy a { background-color: #000080; }
.btn.jypbtn-blue a { background-color: #0000ff; }
.btn.jypbtn-teal a { background-color: #008080; }
.btn.jypbtn-aqua a { background-color: #00ffff; }
.btn.jypbtn-lightgreen a { background-color: #90ee90; }
.btn.jypbtn-lightgrey a { background-color: #d3d3d3; }
.btn.jypbtn-lightpink a { background-color: #ffb6c1; }
.btn.jypbtn-beige a { background-color: #f5f5dc; }
.btn.jypbtn-brown a { background-color: #a52a2a; }
.btn.jypbtn-magenta a { background-color: #ff00ff; }
.btn.jypbtn-crimson a { background-color: #dc143c; }
.btn.jypbtn-darkblue a { background-color: #00008b; }
.btn.jypbtn-royalblue a { background-color: #4169e1; }
.btn.jypbtn-orange a { background-color: #ffa500; }
.btn.jypbtn-pink a { background-color: #ffc0cb; }
.btn.jypbtn-plum a { background-color: #dda0dd; }
.btn.jypbtn-gold a { background-color: #ffd700; }
.btn.jypbtn-skyblue a { background-color: #87ceeb; }
.btn.jypbtn-snow a { background-color: #fffafa; }
.btn.jypbtn-indigo a { background-color: #4b0082; }
.btn.jypbtn-ivory a { background-color: #fffff0; }
.btn.jypbtn-khaki a { background-color: #f0e68c; }
.btn.jypbtn-lavender a { background-color: #e6e6fa; }
.btn.jypbtn-violet a { background-color: #ee82ee; }
.btn.jypbtn-yellowgreen a { background-color: #9acd32; }
<!--ボタン裏カラー指定ここまで-->

<!--ボタン幅指定ここから-->
.btn.jypbtn-100 a { max-width: 100%; }
.btn.jypbtn-90 a { max-width: 90%; }
.btn.jypbtn-80 a { max-width: 80%; }
.btn.jypbtn-70 a { max-width: 70%; }
.btn.jypbtn-60 a { max-width: 60%; }
.btn.jypbtn-50 a { max-width: 50%; }
.btn.jypbtn-40 a { max-width: 40%; }
.btn.jypbtn-30 a { max-width: 30%; }
<!--ボタン幅指定ここまで-->

<!--ボタン内テキスト太さ指定ここから-->
.btn.jypfw-normal a { font-weight: normal; }
.btn.jypfw-bold a { font-weight: bold; }
.btn.jypfw-lighter a { font-weight: lighter; }
.btn.jypfw-bolder a { font-weight: bolder; }
<!--ボタン内テキスト太さ指定ここまで-->

<!--画像の最大表示領域幅指定ここから-->
.jypimg100 img { max-width: 100%; height: auto;}
.jypimg95 img { max-width: 100%; height: auto; margin: 0 5%;}
.jypimg90 img { max-width: 100%; height: auto; margin: 0 10%;}
.jypimg85 img { max-width: 100%; height: auto; margin: 0 15%;}
.jypimg80 img { max-width: 100%; height: auto; margin: 0 20%;}
.jypimg75 img { max-width: 100%; height: auto; margin: 0 25%;}
.jypimg70 img { max-width: 100%; height: auto; margin: 0 30%;}
.jypimg65 img { max-width: 100%; height: auto; margin: 0 35%;}
.jypimg60 img { max-width: 100%; height: auto; margin: 0 40%;}
.jypimg55 img { max-width: 100%; height: auto; margin: 0 45%;}
.jypimg50 img { max-width: 100%; height: auto; margin: 0 50%;}
.jypimg45 img { max-width: 100%; height: auto; margin: 0 55%;}
.jypimg40 img { max-width: 100%; height: auto; margin: 0 60%;}
.jypimg35 img { max-width: 100%; height: auto; margin: 0 65%;}
.jypimg30 img { max-width: 100%; height: auto; margin: 0 70%;}
.jypimg25 img { max-width: 100%; height: auto; margin: 0 75%;}
.jypimg20 img { max-width: 100%; height: auto; margin: 0 80%;}
.jypimg15 img { max-width: 100%; height: auto; margin: 0 85%;}
.jypimg10 img { max-width: 100%; height: auto; margin: 0 90%;}
.jypimg5 img { max-width: 100%; height: auto; margin: 0 95%;}
<!--画像の最大表示領域幅指定ここまで-->

<!--ulの左右余白を消すここから-->
.itemtoprow {
padding-right: calc(var(--bs-gutter-x) * 0)!important;
padding-left: calc(var(--bs-gutter-x) * 0)!important;
}
<!--ulの左右余白を消すここまで-->

<!--lightbox2の画像を中央表示する指定ここから-->
.lightboxOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}
.lightbox {
    position: fixed;
    top: 50%;
    left: 50%;
<!--    transform: translate(0%, 20%);-->
    z-index: 10000;
}
/* スマホ用 */
<!-- @media (max-width: 768px) {
    .lightbox {
        transform: translate(0%, 50%);
    }
}-->
<!--lightbox2の画像を中央表示する指定ここまで-->

<!--再入荷お知らせモーダルウィンドウのCSSここから-->
.modal-sainyuka__wrap {
    display: inline-block;
}

.modal-sainyuka__wrap input {
    display: none;
}

.modal-sainyuka__open-label,
.modal-sainyuka__close-label {
    cursor: pointer;
}

.modal-sainyuka__open-label {
    color: #ff0000;
    font-size: 1.2em;
}

.modal-sainyuka__open-label:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #4f96f6;
}

.modal-sainyuka {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.modal-sainyuka__open-input:checked + label + input + .modal-sainyuka {
    display: block;
    animation: modal-sainyuka-animation .6s;
}

.modal-sainyuka__content-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 650px;
    background-color: #fefefe;
    z-index: 2;
    border-radius: 5px;
}

.modal-sainyuka__close-label {
    background-color: #777;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    width: 36px;
    height: 36px;
    line-height: 1.5;
    text-align: center;
    display: table-cell;
    position: fixed;
    top: -15px;
    right: -2%;
    z-index: 99999;
    font-size: 1.4em;
}

.modal-sainyuka__content {
    max-height: 50vh;
    overflow-y: auto;
    padding: 39px 45px 40px;
}

.modal-sainyuka__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
}

@keyframes modal-sainyuka-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 520px) {
    .modal-sainyuka__open-label {
        max-width: 90%;
    }

    .modal-sainyuka__close-label {
        top: -17px;
        right: -4%;
    }

    .modal-sainyuka__content-wrap {
        width: 90vw;
    }

    .modal-sainyuka__content {
        padding: 35px;
        max-width: 100%;
    }
}
<!--再入荷お知らせモーダルウィンドウのCSSここまで-->

<!--再入荷お知らせボタン内リストのCSSここから-->
.list-sainyuka {
    position: relative;
    padding: 1.5em 1em 1em 2.5em;
    border: 2px solid #2589d0;
}

.list-sainyuka > div {
    position: absolute;
    top: .5em;
    left: 1em;
    padding: 0 .5em;
    background-color: #fff;
    color: #2589d0;
    font-weight: 600;
}

.list-sainyuka ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
    text-align: left!important;
}

.list-sainyuka li {
    padding: .3em .3em .3em 0;
}

.list-sainyuka li::marker {
    color: #2589d0;
    font-size: 1.1em;
}
<!--再入荷お知らせボタン内リストのCSSここまで-->

<!--カテゴリ説明文開始-->
.category_summary {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.category_summary .jypicon {
  float: left;
  margin-right: -90px;
  width: 80px;
  margin-left: 5px;
}

.category_summary .fkds {
  width: 100%;
  vertical-align: bottom;
  margin-bottom: 1.0em;
}

.expl {
  display: inline-block;
  position: relative; 
  margin: 10px 0 0 120px;
  padding: 15px 12px;
  border-radius: 12px;
  background: #fce2c4;
}

.expl:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 20px; 
  left: -22px;
  border: 12px solid transparent;
  border-right: 12px solid #fce2c4;
}

.expl p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
<!--カテゴリ説明文終了-->


<!--スマホ用ヘッダーカテゴリ終了-->
.sphdcate{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}
.sphdcate li{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}
.sphdcate li a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 10px;
}
@media(max-width:800px){
    .sphdcate{
        flex-wrap: wrap;
    }
    .sphdcate li{
        width: calc(100% / 8)
    }
}

<!--スマホ用ヘッダーカテゴリ終了-->