@charset "utf-8";

/***** TOP *****/
.top-nav li:nth-child(n+2) { border-left:1px solid var(--color-gry2); }
.top-nav a { display:block; position:relative; }
.top-nav a::before {
  content:''; position:absolute; width:2.8em; height:2.3em;
  background:no-repeat center / contain; }

.top-nav .guide::before { background-image:url(../img/common/ico-beginner.svg); }
.top-nav .medama::before { background-image:url(../img/common/ico-car.svg); }
.top-nav .store::before { background-image:url(../img/common/ico-shop.svg); }
.top-nav .zaiko::before { background-image:url(../img/common/ico-zaiko.svg); }

.tokuten { margin-bottom:min(6%,40px); }

/* スライド --------------------------- */
#top-slide .pager {
  display:flex;
  margin:5px auto 30px; padding-inline:3px; cursor:pointer;
  li { flex:1; }
  li img { padding:2px; border:3px solid #fff; }
  .thumbnail-current img { border-color:var(--color-sub1); }
}

/* コンテンツリンク上部 --------------------------- */
.top-area-list { display:flex; }
.top-area-list > li { flex:1; }
.top-area-list > li > a { width:100%; }
.top-first { margin-bottom:min(6%,40px); padding-block:1em 2em; }
.top-con-link { display:grid; margin-top:1.3em; gap:.8em; }
.top-con-link a { width:100%; }

/* 在庫数 --------------------------- */
.stock-label {
  width:14em; margin:0 auto .5em; padding:.1em;
  color:var(--color-wht); font-size:1.2em; font-weight:700; text-align:center;
  background-color:var(--color-sub1); border-radius:2em;
}
.stock-num { max-width:690px; margin-bottom:min(5%,43px); margin-inline:auto; gap:3%; }
.stock-num > li { flex:1; }
.stock-num > li > a { display:block; padding:3%; color:var(--color-text); font-weight:700; background-color:var(--color-gry1); border-radius:5px; }
.stock-num .num { margin-block:0; font-size:1.2em; text-align:right; }
.stock-num .num > em { font-size:1.5em; color:var(--color-red); line-height:1.2; }

/* セールバナー --------------------------- */
.bnr-sale { text-align:center; position:relative; }
.bnr-sale::after {
  position:absolute; top:50%; bottom:0; width:100%; z-index:-1;
  content:''; display:block; background-color:var(--color-gry1);
}

/* 目玉車 --------------------------- */
#medama { padding-block:min(6%,40px) min(8.5%,60px); }
#timer { margin-block:min(3%,20px) min(7%,45px); text-align:center; }
#timer .yycountdown-box {
  display:inline-block; padding:0 .8em;
  color:#fff600; font-size:min(5.6vw,24px);
  background:#222; border:2px solid #666; border-radius:1em;
  &::before { content:"終了まで "; font-size:.8em; }
}

/* 閲覧履歴・お気に入り --------------------------- */
.user-action { padding-block:min(8%,70px); }
.user-action .none { padding-left:1em; font-size:1.1em; color:#797979; }
.user-action .none + .ttl-sub { margin-top:min(8%,40px); }


/* キーワード検索 */
.search-keyword-box { max-width:550px; margin:min(8%,30px) auto min(12%,66px); }
.search-keyword-box .ttl-base { margin-bottom:.65em; }
.search-keyword-box > form { display:flex; width:100%; }
.search-keyword-box .txt {
  width:76%; margin:0; padding:1em;
  border-color:var(--color-gry2); border-right:none;
  border-radius:10px 0 0 10px; }
.search-keyword-box .btn { width:24%; font-family:inherit; font-size:1.3em; font-weight:700; color:#fff; background-color:var(--color-base); border-radius:0 10px 10px 0; }


/* 選ばれる理由 --------------------------- */
.ttl-reason { font-size:1.8em; }
.reason-list {  }
.reason-list .slick-track { display:flex; }
.reason-list .slick-slide { height: auto !important; }
.reason-list .slick-slide { padding:10px 5px; }
.reason-box { height:100%; background-color:#fff; border-radius:10px; box-shadow:var(--shadow1); }
.reason-box .label { font-size:1.25em; color:#fff; text-align:center; background-color:var(--color-base); border-radius:10px 10px 0 0; }
.reason-box .label > em { font-size:1.5em; }
.reason-box figure img { width:100%; }
.reason-box .ttl { font-size:1.1em; color:var(--color-sub2); font-feature-settings:"palt"; }
.reason-box .ttl::first-line { font-size:.9em; }
.reason-box .txt { padding:1em 5px 5px 10px; }
.reason-box .txt > p { font-size:.95em; }

.secret { display:grid; grid-template-columns:1fr 110px; gap:20px; }


/* お役立ち情報・ブログ --------------------------- */
.blog-list { margin-block:min(6%,50px); display:grid; gap:1em; }
.blog-list > li { border:1px solid var(--color-gry2); border-radius:10px; box-shadow:var(--shadow1); }
.blog-list a { display:grid; grid-template-columns:20% 1fr; gap:1em; padding:.9em; }
.blog-list p { margin:0; line-height:1.4; }
.blog-list .date { display:block; margin-bottom:.4em; font-size:.9em; }

.blog-cat-list { margin-bottom:2em; display:grid; grid-template-columns:repeat(2,1fr); gap:.75em; }
.blog-cat-list a { display:block; padding:.3em; text-align:center; font-weight:700; border:1px solid var(--color-gry2); border-radius:5px; box-shadow:var(--shadow3); }

/* 最新チラシ --------------------------- */
.top-flyer .unregistered { font-size:min(6vw,28px); font-weight:700; color:var(--color-sub3); text-align:center; }
.top-flyer .flyer { width:min(98%, 880px); margin-inline:auto; margin-bottom:3%; }

/* CM・sns --------------------------- */
.channel { max-width:540px; margin-inline:auto; }
.ttl-sec.youtube img { height:min(7vw,37px); margin-right:10px; vertical-align:middle; }

.sns-list { margin-top:min(7%,60px); width:100%; gap:min(3vw,26px); }
.sns-list > li { flex:1; }
.sns-list .btn-border { width:57%; padding-block:.8em; padding-left:min(28%,145px); line-height:1.1; text-align:left; }
.sns-list .btn-border::before {
  position:absolute; top:0; left:8%;
  content:''; display:block; width:min(15%,67px); height:100%;
  background:no-repeat center / contain; }
  .sns-list .facebook::before { background-image:url(../img/common/sns-facebook.png); }
  .sns-list .instagram::before { background-image:url(../img/common/sns-instagram.png); }

/* 店舗一覧 --------------------------- */
.store-list > li { border:none; }

/* グループ --------------------------- */
.top-group .list .btn-border { width:100%; line-height:1.2; }
.top-group .list img { width:70%; }

.bnr_mb {margin-bottom: 1em;}