@charset "UTF-8";

/* ----------------------------------------------

ヘッダー

---------------------------------------------- */
/* HBGメニュー */
@media only screen and (max-width: 1024px) {
  #shopHeader .sb-toggle-left {
    margin: 21px 0;
  }
}
/* ロゴ */
#shopHeader h1 a,
#shopHeader h1 img {
  max-height: 55px;
}
@media only screen and (max-width: 1024px) {
  #shopHeader h1 a,
  #shopHeader h1 img {
    max-height: 40px;
  }
}

/* ヘッダー下SPメニュー
---------------------------------------------- */
header#mainHeader .sp_nav {
  width: 100%;
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: #656ca1;
}
header#mainHeader .sp_nav li {
  position: relative;
}
header#mainHeader .sp_nav li::before {
  content: "";
  display: block;
  position: absolute;
  top: 15%;
  left: 0%;
  width: 1px;
  height: 70%;
  background-color: #ffffff;
}
header#mainHeader .sp_nav li:first-child::before {
  display: none;
}
header#mainHeader .sp_nav li a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff !important;
}
header#mainHeader .sp_nav li.cashmere a {
  position: relative;
}
header#mainHeader .sp_nav li.cashmere a::before {
  content: "";
  display: block;
  width: 100%;
  height: 18px;
  margin-bottom: -15px;
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/63573955d3196/header-stole.png")
    center center/contain no-repeat;
}
header#mainHeader .sp_nav li.apparel a {
  position: relative;
}
header#mainHeader .sp_nav li.apparel a::before {
  content: "";
  display: block;
  width: 100%;
  height: 18px;
  margin-bottom: -15px;
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/69c27797ece27/sidebar-apparel-bg.png")
    center center/contain no-repeat;
}
@media only screen and (max-width: 1024px) {
  header#mainHeader .sp_nav {
    display: grid;
  }
}

/* ----------------------------------------------

コンテンツ

---------------------------------------------- */
/* ヘッダー下SPメニュー表示に伴い隙間を設ける */
@media only screen and (max-width: 1024px) {
  #sb-site {
    padding-top: 50px;
  }
}

/* ----------------------------------------------

レフトナビ

---------------------------------------------- */
/* 共通
---------------------------------------------- */
#category-menu {
  padding-top: 38px;
}
.sideTitle {
  letter-spacing: 0em;
  margin: 0 0 20px 0;
  border-bottom: 1px solid #0e0c3f;
}
.side-link {
  display: block;
}
.sb-slidebar
  nav
  #category-menu
  .category-list
  .appsItemCategoryTag_child
  a:before,
#category-menu .category-list .appsItemCategoryTag_lowerchild li a:before,
.side-link li a:before,
.sec-ttl .view-all a:before {
  display: none;
}

/* 検索
---------------------------------------------- */
.sidebar .itemSearch__form .itemSearch__field {
  width: 71%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 12px;
  background-color: #fcfcfd;
  margin-bottom: 0 !important;
  font-size: 12px;
}
.sidebar .itemSearch__form .itemSearch__btn {
  font-size: 12px;
  width: 25%;
  height: 40px;
  font-weight: 700;
  border-radius: 4px;
  color: #fff;
  background-color: #0e0c3f !important;
}
.sidebar .itemSearch__form .itemSearch__btn span::before {
  display: none;
}
/* カテゴリー
---------------------------------------------- */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_child
  > a {
  padding: 0 0 0 19px !important;
  margin-bottom: 10px;
  position: relative;
}
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_child
  > a::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
}
/* --- 親カテゴリーのアイコン ---
   旧: :nth-child(1)〜(6) =「上から何番目か」で画像を紐付けていたため、
       管理画面でカテゴリーを並べ替えるとアイコンが総崩れになる状態でした。
   新: カテゴリーID（リンク先URLの末尾の数字）で紐付けています。
       → 管理画面で並び順を自由に変えてもアイコンはズレません。
       → カテゴリーを追加したら、この下にブロックを1つ足すだけでOKです。
       → IDは管理画面のカテゴリー編集URL、または公開サイトのリンク先URLで確認できます。 */

/* バーゲン-Up to50%OFF- */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_child
  > a[href$="/categories/4051508"]::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0d273f7b6/sidebar-saletag.png")
    center center/contain no-repeat;
}
/* アパレル */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_child
  > a[href$="/categories/7204270"]::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/69c25971bd3e9/sidebar-apparel.png")
    center center/contain no-repeat;
}
/* カシミヤ100% */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_child
  > a[href$="/categories/3360611"]::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0d35aa115/sidebar-stole.png")
    center center/contain no-repeat;
}
/* カシミヤ混シルク */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_child
  > a[href$="/categories/3823311"]::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0d35aa115/sidebar-stole.png")
    center center/contain no-repeat;
}
/* サイズから選ぶ */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_child
  > a[href$="/categories/4728524"]::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0d2d55b2f/sidebar-size.png")
    center center/contain no-repeat;
}
/* 色から選ぶ */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_child
  > a[href$="/categories/4728552"]::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0cf8cf350/sidebar-color.png")
    center center/contain no-repeat;
}

/* ============================================================
   ★「NEW」枠：一番上のカテゴリーに必ずNEWアイコンを付ける★

   上のID指定とは違い、これだけは「一番上」という”位置”で紐付けています。
   → 一番上に置いたカテゴリーが何であれ、必ずNEWアイコンになります。
   → 時期に合わせてカテゴリー名を変えても（例：秋の新作→冬の新作）、
     カテゴリーを作り直してIDが変わっても、そのまま使えます。

   ■ 使い方
     管理画面 Apps「商品カテゴリー」で、NEWにしたいカテゴリーを一番上へ移動するだけ。

   ■ 画像の差し替え（必須）
     下の url("...") を、アップロードしたイラストのURLに差し替えてください。
     ※現在は暫定で既存のセールタグ画像を入れてあります。

   ■ 注意
     ・このルールはID指定より優先されます。そのため、例えば「バーゲン」を
       一番上に置くと、セールタグではなくNEWアイコンが表示されます。
     ・イラストが横長の場合は、下の width と、さらに上にある
       「> a」の padding-left（19px）を合わせて広げてください。
       例）横長バッジなら width: 32px; / padding-left: 38px;
   ============================================================ */
#category-menu
  .category-list
  #appsItemCategoryTag
  li.appsItemCategoryTag_child:first-child
  > a::before {
  /* ↓ ここをNEWイラストのURLに差し替える */
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/6a7be96e6ef63/tanakyu_new_icon.png")
    center center/contain no-repeat;
  /* イラストの大きさ調整（横長なら width を広げる） */
  width: 16px;
  height: 16px;
}

#category-menu .category-list .appsItemCategoryTag_lowerchild {
}
#category-menu .category-list .appsItemCategoryTag_lowerchild li {
  font-size: 12px;
}

/* --- 「色から選ぶ」の子カテゴリーにカラーパレットを表示 ---
   カテゴリー名の右側に丸いカラーチップを出します。
   「色から選ぶ」(ID:4728552) の直下の子カテゴリーだけが対象で、
   他の親カテゴリー（サイズから選ぶ 等）の子には出ません。

   ■ 色を変えたいとき  → 下の各ブロックの background の値を書き換えてください。
   ■ 色を追加したいとき → ブロックをコピーし、URL末尾のカテゴリーIDと色を変えてください。
   ■ 画像に差し替えたいとき → background の値を下記の形式にしてください。
        background: url("画像のURL") center center/contain no-repeat;             */

/* カラーチップの形（共通） */
#category-menu
  .category-list
  #appsItemCategoryTag
  a[href$="/categories/4728552"]
  + .appsItemCategoryTag_lowerchild
  li
  a::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* 各色の指定（並び順は問いません／カテゴリーIDで紐付け） */
/* グリーン系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728553"]::after {
  background: #5f8d4e;
}
/* ブルー系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728554"]::after {
  background: #3f6fa8;
}
/* イエロー/オレンジ系 ※2色なので斜め half-half */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728555"]::after {
  background: linear-gradient(135deg, #f2c14e 0 50%, #e8862b 50% 100%);
}
/* ベージュ系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728579"]::after {
  background: #ddc9a3;
}
/* レッド系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728556"]::after {
  background: #b83b3b;
}
/* ピンク系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728557"]::after {
  background: #e191ab;
}
/* パープル系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728558"]::after {
  background: #7a5ba6;
}
/* ホワイト系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728559"]::after {
  background: #ffffff;
}
/* グレー系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728560"]::after {
  background: #9b9b9b;
}
/* ブラウン系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728566"]::after {
  background: #7a5232;
}
/* ブラック系 */
#category-menu
  .category-list
  #appsItemCategoryTag
  .appsItemCategoryTag_lowerchild
  li
  a[href$="/categories/4728561"]::after {
  background: #222222;
}

@media only screen and (max-width: 1024px) {
  .sidebar #category-menu .category-list .appsItemCategoryTag_lowerchild li {
    display: block;
  }
}
/* サイドリンク
---------------------------------------------- */
/* 共通 */
.side-link ul {
}
.side-link li {
  margin: 0 0 10px 0px;
}
.side-link li a {
  padding-left: 19px;
}
.side-link li a:hover {
  padding-left: 22px;
}
.side-link li a::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
}
.side-link li a:hover::before {
  width: 14px;
}
/* インフォメーション */
.side-link.information li:nth-child(1) a::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e1a5047275/sidebar-information.png")
    center center/contain no-repeat;
}
.side-link.information li:nth-child(2) a::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0d18560e1/sidebar-news.png")
    center center/contain no-repeat;
}
.side-link.information li:nth-child(3) a::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0d07e806a/sidebar-contact.png")
    center center/contain no-repeat;
}
.side-link.information li:nth-child(4) a::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0d1fb9bb0/sidebar-privacy.png")
    center center/contain no-repeat;
}
.side-link.information li:nth-child(5) a::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0cf1d8de1/sidebar-caution.png")
    center center/contain no-repeat;
}
/* リンク */
.side-link.sns li:nth-child(1) a::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0d10c821a/sidebar-instagram.png")
    center center/contain no-repeat;
}
.side-link.sns li:nth-child(2) a::before {
  background: url("https://basefile.akamaized.net/tanakakyu-base-shop/634e0d41a1241/sidebar-youtube.png")
    center center/contain no-repeat;
}

/* ----------------------------------------------

ハンバーガーメニュー

---------------------------------------------- */
/* 検索
---------------------------------------------- */
.sb-slidebar .itemSearch {
  margin-bottom: 0px;
}
.sb-slidebar #x_itemSearchForm {
  border-radius: 0px;
  padding: 0;
  border: none;
}
.sb-slidebar .itemSearch input[type="text"] {
  width: 71%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-left: 12px;
  padding-right: 12px;
  background-color: #fcfcfd;
  box-sizing: border-box;
}
.sb-slidebar .itemSearch .itemSearch__btn {
  font-size: 12px;
  width: 25%;
  height: 40px;
  font-weight: 700;
  border-radius: 4px;
  color: #fff;
  background-color: #0e0c3f !important;
}
.sb-slidebar .itemSearch .itemSearch__btn span::before {
  display: none;
}
/* カテゴリー
---------------------------------------------- */
.sb-slidebar nav #category-menu .category-list .appsItemCategoryTag_child > a {
  font-weight: 700 !important;
  margin: 22px 0 14px 0 !important;
  font-size: 14px;
}
.sb-slidebar
  nav
  #category-menu
  .category-list
  .appsItemCategoryTag_child:first-child
  > a {
  margin: 0px 0 10px 0 !important;
}
.sb-slidebar
  nav
  #category-menu
  .category-list
  .appsItemCategoryTag_child
  .appsItemCategoryTag_lowerchild {
  display: block !important;
}
.sb-slidebar
  nav
  #category-menu
  .category-list
  .appsItemCategoryTag_child
  .appsItemCategoryTag_lowerchild
  li {
  padding: 0 0 12px 0;
}
.sb-slidebar
  nav
  #category-menu
  .category-list
  .appsItemCategoryTag_child
  .appsItemCategoryTag_lowerchild
  li
  a {
  margin: 0 0 0 0;
  font-size: 13px;
  line-height: 1.4em;
}
.sb-slidebar
  nav
  #category-menu
  .category-list
  .appsItemCategoryTag_child
  .appsItemCategoryTag_lowerchild
  li
  a:hover {
  padding: 0px 0px 0px 13px !important;
}
/* サイドリンク
---------------------------------------------- */
/* 共通 */
.sb-slidebar nav .side-link ul li {
  margin-bottom: 10px;
}
.sb-slidebar nav .side-link ul li a {
  font-size: 13px;
}

/* ----------------------------------------------

商品ページ

---------------------------------------------- */
/* 価格
---------------------------------------------- */
.item-detail .purchase .itemPrice h3 {
  font-size: 22px;
}
/* 商品説明カスタム
---------------------------------------------- */
.ItemDetailCustom.pc-only {
  display: block;
  max-width: 600px;
  margin: 10% auto 0%;
}
.ItemDetailCustom.sp-only {
  display: none;
}
#appsItemDetailCustom
  #appsItemDetailCustomTag
  .appsItemDetailCustomTag_heading {
  margin: 2em 0em 0em 0em !important;
  text-align: justify;
  font-size: 15px;
  font-weight: 700;
}
#appsItemDetailCustom
  #appsItemDetailCustomTag
  .appsItemDetailCustomTag_description {
  margin: 0.5em 0em 3em 0em !important;
  text-align: justify;
  font-size: 13px;
  font-weight: 500;
}
#appsItemDetailCustom #appsItemDetailCustomTag .appsItemDetailCustomTag_image {
  margin-bottom: 2em !important;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
#appsItemDetailCustom
  #appsItemDetailCustomTag
  .appsItemDetailCustomTag_youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
#appsItemDetailCustom
  #appsItemDetailCustomTag
  .appsItemDetailCustomTag_youtube
  iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 780px) {
  .ItemDetailCustom.pc-only {
    display: none;
  }
  .ItemDetailCustom.sp-only {
    display: block;
  }
}