@charset "utf-8";

/* Google Fonts 日本語フォントを読み込む */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

/* ==========================================
   ブランドカラー・フォントカラーのカスタマイズ（Bootstrap変数の上書き）
========================================== */
:root, [data-bs-theme=light]{

   /* ── [便利辞書] pxからremへの一括変換表（タックルベリー式） ── */
   --fs10: 0.625rem;    /* 10px */
   --fs11: 0.6875rem;   /* 11px */
   --fs12: 0.75rem;     /* 12px */
   --fs13: 0.8125rem;   /* 13px */
   --fs14: 0.875rem;    /* 14px */
   --fs15: 0.9375rem;   /* 15px */
   --fs16: 1rem;        /* 16px */
   --fs17: 1.0625rem;   /* 17px */
   --fs18: 1.125rem;    /* 18px */
   --fs19: 1.1875rem;   /* 19px */
   --fs20: 1.25rem;     /* 20px */
   --fs21: 1.3125rem;   /* 21px */
   --fs22: 1.375rem;    /* 22px */
   --fs23: 1.4375rem;   /* 23px */
   --fs24: 1.5rem;      /* 24px */
   --fs25: 1.5625rem;   /* 25px */
   --fs26: 1.625rem;    /* 26px */
   --fs27: 1.6875rem;   /* 27px */
   --fs28: 1.75rem;     /* 28px */
   --fs29: 1.8125rem;   /* 29px */
   --fs30: 1.875rem;    /* 30px */
   --fs31: 1.9375rem;   /* 31px */
   --fs32: 2rem;        /* 32px */
   --fs33: 2.0625rem;   /* 33px */
   --fs34: 2.125rem;    /* 34px */
   --fs35: 2.1875rem;   /* 35px */

   --bs-font-sans-serif: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
   --bs-body-font-family: var(--bs-font-sans-serif);

   /* フォントサイズ・太さ・行間 */
   --bs-body-font-size: var(--fs15);
   --bs-body-font-weight: 500;
   --bs-body-line-height: 1.65;

   /* カラー */
   --bs-body-color: #000000;
   --bs-body-color-rgb: 0, 0, 0;
   --bs-primary: #ca3028;
   --bs-primary-rgb: 202, 48, 40;
   --bs-red: #ca3028;
   --bs-link-color: #ca3028;
   --bs-link-hover-color: #9a1e18;
}
@media only screen and (min-width: 768px) {
:root, [data-bs-theme=light] {
        --bs-body-font-size: var(--fs17);
    }
}

body{
   color: var(--bs-body-color);
}

input, textarea, select {
    font-weight: 400 !important;
}



/* ==========================================
   共通パー
========================================== */
/* セクションタイトル */
.c-sectionTitle {
   text-align: center;
   margin-bottom: 20px;
   font-family: 'Zen Maru Gothic', sans-serif !important;
}
.c-sectionTitle__main {
   font-size: var(--fs26);
   font-weight: 700;
   letter-spacing: 0.05em;
   margin: 0;
}
.c-sectionTitle__sub {
   font-size: var(--fs13);
   font-weight: 700;
   color: var(--bs-primary);
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

/* 共通コンポーネント：外枠線ボタン（c-btnLine） */
.c-btnWrapper {
   width: 100%;
   text-align: center;
}
.c-btnLine {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-width: 300px;
   padding: 12px 40px;
   font-size: var(--fs14);
   font-weight: 700;
   border-radius: 50px;
   text-decoration: none;
   background-color: transparent;
   transition: all 0.3s ease;
   font-family: 'Zen Maru Gothic', sans-serif;
}
.c-btnLine__icon {
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
   font-size: 0.85em;
   color: currentColor;
   transition: all 0.3s ease;
}
.c-btnLine.-primary {
   color: var(--bs-primary);
   border: 1px solid var(--bs-primary);
   background-color: #ffffff;
}
.c-btnLine.-white {
   color: #ffffff;
   border: 1px solid #ffffff;
   background-color: transparent;
}

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

   /* セクションタイトル */
   .c-sectionTitle{
      margin-bottom: 30px;
   }
   .c-sectionTitle__main {
      font-size: var(--fs35);
      margin-bottom: 30px;
   }
   .c-sectionTitle__sub {
      font-size: var(--fs16);
   }
   
   /* 共通コンポーネント：外枠線ボタン（c-btnLine） */
   .c-btnLine {
      max-width: 350px;
      height: 64px;
      padding-top: 0;
      padding-bottom: 0;
      font-size: var(--fs18);
   }
   .c-btnLine__icon {
      right: 24px; 
   }
   .c-btnLine.-primary:hover {
      background-color: var(--bs-primary);
      color: #ffffff;
   }
}
   

/* ==========================================
   独自コンテンツ：商品を探すブロック
========================================== */
.p-topSearch {
   padding: 50px 20px;
}
.p-topSearch__header{
   text-align: center;
   margin-bottom: 10px;
}
.p-topSearch__title{
   font-family: 'Zen Maru Gothic', sans-serif;
   font-size: var(--fs19);
   font-weight: 700;
   color: var(--bs-body-color);
   line-height: 1.3;
   margin: 0;
}

@media only screen and (min-width: 768px) {
   .p-topSearch {
      max-width: 1240px;
      margin: 0 auto;
      padding: 50px 20px 120px;
      box-sizing: border-box;
   }
   .p-topSearch__header{
      margin-bottom: 20px;
   }
   .p-topSearch__title{
      font-size: var(--fs24);
   }
}

/* カテゴリ
---------------------------------- */
.p-topSearch__grid{
   width: 100%;
   margin-bottom: 30px;
}
.p-topSearch__list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 0;
   margin: 0;
   list-style: none;
   justify-content: flex-start;
}
.p-topSearch__item {
   border: 2px solid #ddd;
   border-radius: 8px;
   width: calc((100% - 16px) / 3);
   text-align: center;
}
.p-topSearch__item a {
   display: block;
   text-decoration: none;
   color: var(--bs-body-color);
   padding: 8px 6px;
}
.p-topSearch__icon img {
   max-width: 100%;
   max-height: 100%;
   margin: 0 auto 5px;
}
.p-topSearch__label {
   font-size: var(--fs12);
   font-weight: 700;
   line-height: 1.3;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}
@media only screen and (min-width: 768px) {
   .p-topSearch__grid{
      margin-bottom: 40px;
   }
   .p-topSearch__list {
      gap: 20px 12px;
   }
   .p-topSearch__item {
      width: calc((100% - 80px) / 7);
   }
   .p-topSearch__item a{
      padding: 12px 6px 14px;
   }
   .p-topSearch__icon img {
      max-width: 80px;
      width: 100%;
      height: auto;
      object-fit: contain;
      margin: 0 auto 10px;
   }
   .p-topSearch__label{
      font-size: var(--fs17);
      font-weight: 500;
   }
}
@media only screen and (max-width: 950px) and (min-width: 768px) {
   .p-topSearch__list {
      gap: 16px 8px;
   }
   .p-topSearch__item{
      width: calc((100% - 48px) / 7);
   }
   .p-topSearch__label {
      font-size: var(--fs15);
   }
}

/* シーンから探す
---------------------------------- */
.p-topScene__grid{
   width: 100%;
   margin-bottom: 30px;
}
.p-topScene__list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 0;
   margin: 0;
   list-style: none;
   justify-content: flex-start;
}
.p-topScene__item {
   width: calc((100% - 8px) / 2); 
   border: 2px solid #ddd;         
   border-radius: 8px;             
   background-color: #ffffff;
   list-style: none;
   overflow: hidden;
}
.p-topScene__item a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color: var(--bs-body-color);
   width: 100%;
   height: 100%;
}
.p-topScene__thumb {
    width: 100%;
    aspect-ratio: 4 / 2.5;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
}
.p-topScene__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.p-topScene__label {
   font-size: var(--fs12);
   font-weight: 700;
   line-height: 1.3;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 2.6em;
   word-break: break-all;
}
@media only screen and (min-width: 768px) {
   .p-topScene__grid{
      margin-bottom: 40px;
   }
   .p-topScene__list {   
      gap: 20px 16px;
   }
   .p-topScene__item {
      width: calc((100% - 64px) / 5) ;
      /*min-width: 160px;*/
   }
   .p-topScene__thumb{
      aspect-ratio: 4 / 2;
   }
   .p-topScene__label {
      font-size: var(--fs17);
      font-weight: 500;
      padding: 14px 0;
      line-height: 1.4;
   }
}
@media only screen and (max-width: 950px) and (min-width: 768px) {
   .p-topScene__list {   
      gap: 20px 10px;
   }
   .p-topScene__item {
      width: calc((100% - 40px) / 5);
   }
   .p-topScene__label {
      font-size: var(--fs15);
   }
}

/* 価格から探す
---------------------------------- */
.p-topPrice__list{
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 0;
   margin: 0;
   list-style: none;
   justify-content: flex-start;
}
.p-topPrice__item {
   width: calc((100% - 8px) / 2); 
   border: 1px solid #ddd;         
   border-radius: 50px;             
   background-color: #ffffff;
   list-style: none;
}
.p-topPrice__item a {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 14px 8px;
   text-decoration: none;
   color: var(--bs-body-color);
   width: 100%;
   height: 100%;
}
.p-topPrice__label {
   font-size: var(--fs13);
   font-weight: 500;            
   line-height: 1.2;
   text-align: center;
   word-break: break-all;
}
@media only screen and (min-width: 768px) {
   .p-topPrice__list {
      gap: 20px 6px;
   }
   .p-topPrice__item {
      width: calc((100% - 30px) / 6);
   }
   .p-topPrice__label {
      font-size: var(--fs17);
   }
}
@media only screen and (max-width: 950px) and (min-width: 768px) {
   .p-topPrice__list {
      gap: 20px 10px;
   }
   .p-topPrice__item {
      width: calc((100% - 20px) / 3);
   }
   .p-topPrice__label {
      font-size: var(--fs15);
   }
}


/* 検索
---------------------------------- */
.p-topKeyword{
   margin-top: 56px;
}
.p-topKeyword__box {
   background-color: #fcf4f4;
   border: 1px solid var(--bs-primary);
   border-radius: 10px;
   padding: 24px 16px;
   max-width: 750px;
   margin: 0 auto;
   position: relative;
}
.p-topKeyword__deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    display: block;
}
.p-topKeyword__deco img {
   width: 100%;
   height: auto;
   display: block;
}
.p-topKeyword__deco--left {
    width: 40px;
    left: -14px;
    bottom: -8px;
    transform: rotate(-12deg);
}
.p-topKeyword__deco--right {
   width: 50px;
   right: -14px;
   bottom: -8px;
}
.p-topKeyword__form {
   display: block;
   width: 100%;
   margin: 0;
}
.p-topKeyword__inputWrapper {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   background-color: #ffffff;
   border: 1px solid #d6d6d6;
   border-radius: 30px;
   padding: 2px 6px 2px 18px;
   box-sizing: border-box;
}
.p-topKeyword__input {
   flex: 1;
   border: none;
   background: transparent;
   padding: 6px 0;
   font-size: var(--fs14);
   outline: none;
   color: var(--bs-body-color);
}
.p-topKeyword__submitBtn {
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
}
.p-topKeyword__input::placeholder{
   color: #a6a6a6;
}
.p-topKeyword__tagList{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 4px;
   padding: 0;
   margin: 8px 0 0;
   list-style: none
}
.p-topKeyword__tagItem a {
    display: inline-block;
    font-size: var(--fs12);
    color: var(--bs-body-color);
    text-decoration: none;
    padding: 4px 8px;
    background-color: #ffffff;
    border-radius: 50px;
}

@media only screen and (min-width: 768px) {
   .p-topKeyword{
      background: url(../img/front/bg_keyword_sparkle.webp) center no-repeat;
      background-size: 100%;
   }
   .p-topKeyword__box{
      padding: 24px 70px;
   }
   .p-topKeyword__deco--left{
      width: 75px;
      left: -50px;
      bottom: 12px;
   }
   .p-topKeyword__deco--right{
      width: 110px;
      right: -50px;
      bottom: 10px;
   }
   .p-topKeyword__inputWrapper{
      padding: 4px 10px 4px 20px;
   }
   .p-topKeyword__input{
      font-size: var(--fs17);
   }
   .p-topKeyword__submitBtn{
      font-size: var(--fs24);
   }
   .p-topKeyword__tagList{
      margin: 18px 0 0;
   }
   .p-topKeyword__tagItem a{
      font-size: var(--fs15);
      padding: 7px 20px;
   }
}


/* ==========================================
   独自コンテンツ：売れ筋ランキングブロック
========================================== */
.p-topRanking{
   padding: 50px 20px 60px;
   background: #fcf4f4;
}
.p-topRanking__tabs {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px 8px;
   margin: 0 auto 25px;
   padding: 0;
   list-style: none;
}
.p-topRanking__tabItem {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   width: calc((100% - 24px) / 3); 
   padding: 8px 0;
   font-size: var(--fs13);
   font-weight: 700;
   text-align: center;
   border-radius: 50px;
   color: var(--bs-primary);
   background-color: #ffffff;
   transition: all 0.3s ease;
   user-select: none;
}
.p-topRanking__tabItem.-active {
   color: #ffffff;
   background-color: var(--bs-primary);
}
.p-topRanking__box{
   margin-bottom: 30px;
}
/* タブパネル基本制御 */
.p-topRanking__panel {
   display: none;
}
.p-topRanking__panel.-active {
   display: block;
}
/* 商品リスト（2カラム仕様） */
.p-topRanking__list {
   display: flex;
   flex-wrap: wrap;
   gap: 16px 8px;
   padding: 0;
   margin: 0;
   list-style: none;
   justify-content: flex-start;
}
.p-topRanking__item {
   position: relative;
   width: calc((100% - 8px) / 2);
   overflow: hidden;
}
.p-topRanking__item a {
   display: block;
   text-decoration: none;
   color: var(--bs-body-color);
}
.p-topRanking__thumb {
   width: 100%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
}
.p-topRanking__thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.p-topRanking__content {
   padding: 8px 0 0;
}
.p-topRanking__name {
   font-size: var(--fs13);
   font-weight: 600;
   line-height: 1.4;
   margin-bottom: 2px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
}
.p-topRanking__price {
   font-size: var(--fs14);
   font-weight: 600;
   color: var(--bs-primary);
   margin: 0;
}
.p-topRanking__tax {
   font-size: var(--fs10);
   font-weight: normal;
   margin-left: 2px;
}

/* 順位バッジ */
.p-topRanking__badge {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--fs11);
   font-weight: 700;
   color: #ffffff;
   background-color: #777777;
}
.p-topRanking__badge.-rank1 { background-color: #bfa15f; }
.p-topRanking__badge.-rank2 { background-color: #a8a8a8; }
.p-topRanking__badge.-rank3 { background-color: #b88a5e; }

@media only screen and (min-width: 768px) {
   .p-topRanking__inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: 10px 20px 10px; 
      box-sizing: border-box;
      position: relative;
   }
   .p-topRanking__tabs {
      justify-content: flex-start;
      gap: 12px;
      margin-bottom: 40px;
   }
   .p-topRanking__tabItem {
      width: 200px;
      height: 64px;
      padding: 0;
      font-size: var(--fs16);
      letter-spacing: 0.05em;
      border-radius: 50px; 
   }

   /* 商品リスト（5カラム仕様）カルーセル */
   .p-topRanking__list {
      display: block;
      flex-wrap: nowrap;
      justify-content: transform;
      gap: 20px;
      margin: 0 -10px;
   }
   .p-topRanking__list .slick-slide {
      padding: 0 10px;
      box-sizing: border-box;
   }
   .p-topRanking__item {
      width: 100%;
      margin: 0;
   }
   .p-topRanking__list .slick-prev,
   .p-topRanking__list .slick-next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-110%); 
      z-index: 10;
      width: 44px;
      height: 44px;
      background-color: #ffffff;
      border: 1px solid var(--bs-primary);
      border-radius: 50%;
      color: var(--bs-primary);
      font-size: var(--fs14);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
   }
   .p-topRanking__list .slick-prev { left: -20px; }
   .p-topRanking__list .slick-next { right: -20px; }
   
   .p-topRanking__list .slick-prev::before,
   .p-topRanking__list .slick-next::before,
   .p-topRanking__list .slick-prev::after,
   .p-topRanking__list .slick-next::after {
      display: none !important;
      content: '' !important;
   }
   .p-topRanking__list .slick-prev:hover,
   .p-topRanking__list .slick-next:hover {
      background-color: var(--bs-primary);
      color: #ffffff;
   }
   .p-topRanking__list .slick-disabled {
      opacity: 0.3;
      cursor: not-allowed;
   }
   
   .p-topRanking__content{
      padding: 12px 0 0;
   }
   .p-topRanking__name {
      font-size: var(--fs17);
   }
   .p-topRanking__price{
      font-size: var(--fs17);
   }
   .p-topRanking__tax{
      font-size: var(--fs13);
   }
   
   /* 順位バッジ */
   .p-topRanking__badge {
      width: 40px;
      height: 40px;
      font-size: var(--fs17);
   }
}