@charset "UTF-8";
/* =====================================================
にじよめグッズ
===================================================== */
/*
  レイアウト

  ヘッダー
  - SNSボタン
  - TOPイメージ

  グッズ検索
    - ソート
    - 表示切替
    - 絞り込み

  メインコンテンツ
    - グッズリスト
    - グッズ概要
    - アイコン
    - 注意文

  グッズ詳細
    - オーバーレイ
    - グッズ画像スライダー
    - グッズ詳細

  その他

*/

/* -----------------------------------------------------
レイアウト
----------------------------------------------------- */
#goods {
  background: #e9e9e9;
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  padding-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* for PC */
#goods.pc {
  float: left;
  width: 745px;
  background: none;
  box-shadow: none;
}

/* -----------------------------------------------------
ヘッダー
----------------------------------------------------- */
#goodsHeader {
  margin: 0 0 10px;
  position: relative;
}

/* for PC */
.pc #goodsHeader {
  margin: 0 0 16px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* SNSボタン
----------------------------------------------------- */
.snsWrap {
  height: 40px;
}

#goodsHeader .snsWrap {
  position: absolute;
  left: 5px;
  bottom: 5px;
}

/* for iOS */
.ios .snsWrap {
  font-size: 0;
}

/* for android */
.android .snsWrap {
  letter-spacing: -0.4em;
}

/* for PC */
.pc #goodsHeader .snsWrap {
  left: 60px;
  bottom: 40px;
}

/* ----- 各ボタン格納ボックス ----- */
.snsWrap li {
  width: 18%;
  height: 40px;
  display: inline-block;
  font-size: 14px;
  letter-spacing: normal;
  text-align: center;
}

/* for PC */
.pc .snsWrap li {
  width: 25%;
}

/* ヘッダー用 */
#goodsHeader .snsWrap li {
  width: 40px;
  margin-right: 5px;
}

.snsWrap li a {
  display: inline-block;
  width: 40px;
  height: 0;
  padding-top: 40px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ----- SNSアイコン ----- */
.snsWrap li a::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../../img/contents/goods/icon_01.png) no-repeat 0 -450px;
  background-size: 60px 510px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.snsWrap li a.btnTwitter::after { background-position: 0 -450px; }/* Twitter */
.snsWrap li a.btnLine::after { background-position: -30px -450px; }/* LINE */
.snsWrap li a.btnFacebook::after { background-position: 0 -480px; }/* Facebook */
.snsWrap li a.btnMixi::after { background-position: -30px -480px; }/* mixi */


/* iphone4 portrait */
@media only screen and (max-width : 320px) and (orientation : portrait) {
  /* ヘッダー用 */
  #goodsHeader .snsWrap {
    height: 34px;
  }

  #goodsHeader .snsWrap li {
    width: 34px;
    height: 34px;
  }

  #goodsHeader .snsWrap li a {
    width: 34px;
    padding-top: 34px;
  }
}

/* TOPイメージ
----------------------------------------------------- */
#goodsHeader h1 {
  background: url(../../img/contents/goods/mainpic_01.jpg) center top no-repeat;
  background-size: contain;
  width: 100%;
  height: 0;
  padding-top: 50%;
  line-height: 200%;
  overflow: hidden;
}

/* for PC */
.pc #goodsHeader h1 {
  background: url(../../img/contents/goods/mainpic_02.jpg) center top no-repeat;
  width: 745px;
  padding-top: 250px;
}

/* -----------------------------------------------------
グッズ検索
----------------------------------------------------- */
#goodsSearch {
  background: #4c4b4b;
  border-radius: 2px;
  margin: 0 10px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  padding: 10px;
  position: relative;
  overflow: hidden;
}

/* for PC */
.pc #goodsSearch {
  margin: 0 0 8px;
  padding: 15px;
}

/* ソート
----------------------------------------------------- */
.goodsSort {
  margin: 0 110px 10px 0;
}

/* for PC */
.pc .goodsSort {
  float: left;
  width: 48%;
  margin: 0 2% 0 0;
}

.goodsSort select {
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0 35px 0 10px;
  padding: 0 0 0 10px\9;/* for IE10 and below */
  min-height: 30px;
  line-height: 30px;
  background: url(../../img/contents/goods/icon_01.png) right -270px no-repeat #fff;
  background: #fff\9;/* for IE10 and below */
  background-size: 60px 510px;
  border: none;
  outline: none;
  font-size: 14px;
  border-radius: 2px;
  overflow: hidden;
}

/* 表示切替
----------------------------------------------------- */
.goodsLayout {
  position: absolute;
  right: 10px;
  top: 10px;
}

/* ----- レイアウト選択 -----*/
.layoutList {
  overflow: hidden;
  width: 100px;
}

.layoutList li {
  width: 30px;
  height: 0;
  padding-top: 30px;
  line-height: 30px;
  overflow: hidden;
  float: left;
  background: url(../../img/contents/goods/icon_01.png) 0 -300px no-repeat #333;
  background-size: 60px 510px;
  border-radius: 2px;
  cursor: pointer;
}

.layoutList li:nth-of-type(2) {
  margin: 0 5px;
}

/* 横並び表示 */
.goodsLayout .layoutType01 {
  background-position: 0 -300px;
}

.layoutList .layoutType01.selected,
.layoutList .layoutType01:hover {
  background-position: -30px -300px;
  background-color: #e84c80;
}

/* グリッド表示（小） */
.goodsLayout .layoutType02 {
  background-position: 0 -330px;
}

.layoutList .layoutType02.selected,
.layoutList .layoutType02:hover {
  background-position: -30px -330px;
  background-color: #e84c80;
}

/* グリッド表示（大） */
.goodsLayout .layoutType03 {
  background-position: 0 -360px;
}

.layoutList .layoutType03.selected,
.layoutList .layoutType03:hover {
  background-position: -30px -360px;
  background-color: #e84c80;
}

/* 絞り込み
----------------------------------------------------- */
.goodsFilter {
  overflow: hidden;
}

/* for PC */
.pc .goodsFilter {
  width: 50%;
  margin: 2px 0 0;
}

/* ----- 絞り込みボタン ----- */
.goodsFilter li {
  float: left;
  width: 49%;
  text-align: center;
  background: #333;
  height: 26px;
  line-height: 26px;
  color: #aaa;
  box-sizing: border-box;
  font-size: 12px;
  padding-left: 20px;
  position: relative;
  border-radius: 2px;
  cursor: pointer;
}

.goodsFilter li:nth-of-type(1) {
  margin-right: 2%;
}

/* 選択中 */
.goodsFilter li.selected {
  background: #e84c80;
  color: #fff;
  cursor: default;
}

/* ----- チェックアイコン/チェックボックス ----- */
.goodsFilter li::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background: rgba(255,255,255,0.3);
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 2px;
}

.goodsFilter li.selected::before {
  background: rgba(0,0,0,0.3);
}

.goodsFilter li.selected::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  vertical-align: top;
  background: url(../../img/contents/goods/icon_01.png) -5px -245px no-repeat;
  background-size: 60px 510px;
  position: absolute;
  left: 3px;
  top: 3px;
}

/* -----------------------------------------------------
メインコンテンツ
----------------------------------------------------- */
/* グッズリスト
----------------------------------------------------- */
.goodsList {
  padding: 0 5px;
}

/* for iOS */
.ios .goodsList {
  font-size: 0;
}

/* for android */
.android .goodsList {
  letter-spacing: -0.4em;
}

/* for PC */
.pc .goodsList {
  font-size: 0;
  padding: 0;
}

/* ----- 各グッズ包括ボックス ----- */
.goodsList li {
  padding: 0 5px 10px;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  letter-spacing: normal;
}

/* グリッド表示（小） */
.goodsList.layoutType02 li {
  width: 50%;
}

/* for PC 奇数番目余白 */
.pc .goodsList.layoutType02 li:nth-of-type(odd) {
  padding: 8px 8px 8px 0;
}

/* for PC 偶数番目余白 */
.pc .goodsList.layoutType02 li:nth-of-type(even) {
  padding: 8px 0 8px 8px;
}

/* 768px */
@media only screen and (max-width : 768px) and (orientation : landscape) {
  /* 各グッズ包括ボックス 横並び表示 */
  .goodsList.layoutType01 li {
    width: 50%;
  }

  /* 各グッズ包括ボックス グリッド表示（小） */
  .goodsList.layoutType02 li {
    width: 33.3%;
    padding: 0 5px 10px !important;
  }
}

/* 480px */
@media only screen and (max-width : 480px) and (orientation : landscape) {
  /* 各グッズ包括ボックス 横並び表示 */
  .goodsList.layoutType01 li {
    width: auto;
  }
}

/* グッズ概要
----------------------------------------------------- */
/* ----- 包括リンク ----- */
.goodsList li > a {
  color: #333;
  text-decoration: none;
  position: relative;
  display: block;
}

/* グリッド表示（小） */
.goodsList.layoutType02 li > a {
  width: 100%;
  height: 100%;
}

/* ----- グッズ概要ボックス ----- */
.item {
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  background: #f6f6f6;
}

/* for PC */
.pc .item {
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* グリッド表示（小） */
.layoutType02 .item {
  width: 100%;
  height: 100%;
}

/* ----- グッズ画像 ----- */
.item dt {
  background: #fff;
  position: relative;
  height: 0;
  padding-top: 78%;
}

/* 横並び表示 */
.layoutType01 .itemImage {
  padding-top: 44%;
  float: left;
  width: 40%;
}

.itemImage img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ----- グッズ概要テキスト（グッズ名/説明/価格） ----- */
.item dd {
  padding: 4px 10px 0;
}

.item dd.itemName {
  padding: 10px 10px 0;
  line-height: 1.3;
}

.item dd.itemPrice {
  padding: 4px 10px 10px;
}

/* for PC */
.pc .item dd {
  padding: 10px 15px 0;
}

.pc .item dd.itemName {
  padding: 15px 15px 0;
}

.pc .item dd.itemPrice {
  padding: 10px 15px 15px;
}

/* 横並び表示 */
.layoutType01 .item dd {
  margin-left: 40%;
  padding: 5px 10px 0;
  word-wrap: break-word;
  width: 60%;
  box-sizing: border-box;
}

.layoutType01 .item dd:nth-of-type(1) {
  padding: 10px 10px 0;
}

/* グリッド表示（小） */
.layoutType02 .item dd {
  font-size: 14px;
}

/* ----- グッズ名 ----- */
.itemName {
  max-height: 3.2em;
  overflow: hidden;
}

/* 481px - 768px */
@media only screen and (min-width : 481px) and (max-width : 768px) and (orientation : landscape) {
  /*  横並び表示 */
  .layoutType01 .itemName {
    font-size: 14px;
  }

  /* for android */
  .android .layoutType01 .itemName {
    font-size: 14px;
  }
}

/*  グリッド表示（小） */
.layoutType02 .itemName {
  height: 2.4em;
}

/* for PC グリッド表示（小） */
.pc .layoutType02 .item dd.itemName {
  font-size: 18px;
  height: auto;
}

/* ----- 価格 ----- */
.itemPrice {
  color: #e84c80;
}

/* 481px - 768px */
@media only screen and (min-width : 481px) and (max-width : 768px) and (orientation : landscape) {
  /*  横並び表示 */
  .layoutType01 .itemPrice {
    font-size: 14px;
  }

  /* for android */
  .android .layoutType01 .itemPrice {
    font-size: 14px;
  }
}

/* for PC  グリッド表示（小） */
.pc .layoutType02 .item dd.itemPrice {
  font-size: 18px;
}

/* 税込 */
.itemPrice span {
  font-size: 12px;
  margin-left: -3px;
}

/* ----- グッズ説明 ----- */
.itemDescription {
  max-height: 3.7em;
  font-size: 11px;
  overflow: hidden;
}

/* 横並び表示 */
.layoutType01 .itemDescription {
  max-height: 4.2em;
}

/* グリッド表示（小） */
.layoutType02 .itemDescription {
  display: none;
}

/* for PC グリッド表示（小） */
.pc .layoutType02 .itemDescription {
  display: block;
  max-height: 4em;
  font-size: 12px;
  overflow: hidden;
}

.itemDescription p {
  margin-bottom: 1em;
  width: 100%;
  font-size: 11px;
  color: #666;
  line-height: 1.3;
}

.itemDescription p:last-child {
  margin-bottom: 0;
}

/* for PC */
.pc .itemDescription p {
  line-height: 1.4;
  font-size: 12px;
}

/* アイコン
----------------------------------------------------- */
.goodsList a::after {
  content: "";
  display: none;
  width: 60px;
  height: 60px;
  background: url(../../img/contents/goods/icon_01.png) 0 0 no-repeat;
  background-size: 60px 510px;
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 5;
}

/* 新作 */
.goodsList .new a::after {
  background-position: 0 0;
  display: block;
}

/* 推奨 */
.goodsList .recommend a::after {
  background-position: 0 -60px;
  display: block;
}

/* 在庫少 */
.goodsList .small a::after {
  background-position: 0 -120px;
  display: block;
}

/* 完売 */
.goodsList .soldOut a::after {
  background-position: 0 -180px;
  display: block;
}

/* for PC */
.pc .goodsList a::after {
  width: 90px;
  height: 90px;
  background-size: 90px 765px;
}

.pc .goodsList .recommend a::after { background-position: 0 -90px; }/* 推奨 */
.pc .goodsList .small a::after { background-position: 0 -180px; }/* 在庫少 */
.pc .goodsList .soldOut a::after { background-position: 0 -270px; }/* 完売 */

/* 注意文
----------------------------------------------------- */
.goodsNotice {
  padding: 10px;
  color: #999;
  font-size: 11px;
}

/* -----------------------------------------------------
グッズ詳細
----------------------------------------------------- */
/* オーバーレイ
----------------------------------------------------- */
#goodsOverlay {
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  display: none;
  z-index: 6000;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  line-height: 1.4;
  box-sizing: border-box;
}

#overlayContent {
  box-sizing: border-box;
  background: #f6f6f6;
  box-shadow: 0px 0px 8px #171a24;
  font-size: 14px;
  color: #333;
  text-align: left;
  opacity: 0;
  min-height: 100%;
  width: 100%;
  position: relative;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* for PC */
.pc #overlayContent {
  width: 640px;
  margin: 0 auto 30px;
  right: 0;
  border-radius: 5px;
  left: 0;
  top: 30px;
  position: absolute;
  min-height: 700px;
}

/* オーバーレイ有効時 */
.active #overlayContent {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

/* 768px */
@media only screen and (max-width : 768px) and (orientation : landscape) {
  #overlayContent {
    width: 60%;
    margin: 20px auto;
    border-radius: 10px;
    overflow: hidden;
  }
}

/* ----- 閉じるボタン ----- */
.btnClose {
  width: 30px;
  height: 0;
  padding-top: 30px;
  line-height: 30px;
  overflow: hidden;
  background: url(../../img/contents/goods/icon_01.png) -30px -240px no-repeat #555;
  background-size: 60px 510px;
  border-radius: 15px;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  right: 5px;
  top: 53px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  opacity: 0.5;
}

/* for PC */
.pc .btnClose {
  right: -15px;
  top: -15px;
  opacity: 1;
}

/* グッズ画像スライダー
----------------------------------------------------- */
.itemImageSlider {
  margin-bottom: 15px;
  background: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* for PC */
.pc .itemImageSlider {
  margin-bottom: 20px;
}

.itemImageContainer {
  width: 9999px;
}

/* ----- スライド1つ分 ----- */
.itemImageContainer li {
  float: left;
  width: 100%;
  height: 0;
  overflow: hidden;
  position: relative;
}

/* 1 item */
li.slideItem:first-child:nth-last-child(1) {
  padding-top: 100%;
}

/* 2 items */
li.slideItem:first-child:nth-last-child(2),
li.slideItem:first-child:nth-last-child(2) ~ li.slideItem {
  padding-top: 50%;
}

/* 3 items */
li.slideItem:first-child:nth-last-child(3),
li.slideItem:first-child:nth-last-child(3) ~ li.slideItem {
  padding-top: 33.3%;
}

/* 4 items */
li.slideItem:first-child:nth-last-child(4),
li.slideItem:first-child:nth-last-child(4) ~ li.slideItem {
  padding-top: 25%;
}

/* 5 items */
li.slideItem:first-child:nth-last-child(5),
li.slideItem:first-child:nth-last-child(5) ~ li.slideItem {
  padding-top: 20%;
}

/* 6 items */
li.slideItem:first-child:nth-last-child(6),
li.slideItem:first-child:nth-last-child(6) ~ li.slideItem {
  padding-top: 16.6%;
}

/* 7 items */
li.slideItem:first-child:nth-last-child(7),
li.slideItem:first-child:nth-last-child(7) ~ li.slideItem {
  padding-top: 14.2%;
}

/* 8 items */
li.slideItem:first-child:nth-last-child(8),
li.slideItem:first-child:nth-last-child(8) ~ li.slideItem {
  padding-top: 12.5%;
}

/* 9 items */
li.slideItem:first-child:nth-last-child(9),
li.slideItem:first-child:nth-last-child(9) ~ li.slideItem {
  padding-top: 1.1%;
}

/* 10 items */
li.slideItem:first-child:nth-last-child(10),
li.slideItem:first-child:nth-last-child(10) ~ li.slideItem {
  padding-top: 10%;
}

/* 打ち消し */
.slideItem.item {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: none;
}

/* ----- 画像中央配置 ----- */
.slideItem img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ----- 左右送り戻しボタン ----- */
.btnPrev,
.btnNext {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 24px;
  height: 0;
  padding-top: 60px;
  line-height: 60px;
  overflow: hidden;
  background: #555;
  border-radius: 3px;
  z-index: 10;
  cursor: pointer;
  opacity: 0.5;
}

.btnPrev {
  left: 5px;
}

.btnNext {
  right: 5px;
}

/* for PC */
.pc .btnPrev,
.pc .btnNext {
  width: 30px;
}

.pc .btnPrev {
  left: 10px;
}

.pc .btnNext {
  right: 10px;
}

/* arrowアイコン */
.btnPrev::after,
.btnNext::after {
  content: "";
  display: block;
  height: 30px;
  width: 24px;
  background: url(../../img/contents/goods/icon_01.png) -3px -420px no-repeat;
  background-size: 60px 510px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.btnNext::after { background-position: -3px -390px; }

/* ディセーブル表示 */
.disabled {
  cursor: default;
  -moz-pointer-events: none;
  -webkit-pointer-events: none;
  pointer-events: none;
  opacity: 0.1;
}

/* グッズ詳細
----------------------------------------------------- */
.itemDetails {
  overflow: hidden;
  min-height: 100%;
  border-radius: 5px;
}

.itemDetails dl {
  padding: 0 10px 15px;
}

/* for iOS */
.ios .itemDetails dl {
  font-size: 0;
}

/* for android */
.android .itemDetails dl {
  letter-spacing: -0.4em;
}

/* for PC */
.pc .itemDetails dl {
  font-size: 0;
  padding: 0 15px 20px;
}

.itemDetails dt,
.itemDetails dd {
  padding: 0 0 10px;
  font-size: 14px;
  letter-spacing: normal;
}

/* ----- グッズ名 ----- */
.itemDetails .itemName {
  max-height: none;
  font-size: 20px;
}

/* for PC */
.pc .itemDetails .itemName {
  font-size: 24px;
}

/* ----- グッズ説明 ----- */
.itemDetails .itemDescription {
  max-height: none;
}

.itemDetails .itemDescription p{
  font-size: 13px;
  line-height: 1.4;
}

/* for PC */
.pc .itemDetails .itemDescription p {
  font-size: 14px;
}

/* ----- 価格 ----- */
.itemDetails .itemPrice {
  color: #e84c80;
  font-size: 20px;
  display: inline-block;
  width: 60%;
  vertical-align: middle;
}

/* for PC */
.pc .itemDetails .itemPrice {
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
  width: 40%;
  padding-bottom: 0;
}

.itemDetails.new .itemPrice::before {
  content: "新作";
  font-size: 12px;
  display: inline-block;
  height: 18px;
  padding: 0 5px;
  line-height: 18px;
  background: #e84c80;
  color: #fff;
  vertical-align: middle;
  border-radius: 2px;
  margin-right: 5px;
}

/* for PC */
.pc .itemDetails.new .itemPrice::before {
  font-size: 14px;
  height: 22px;
  padding: 0 10px;
  line-height: 22px;
  margin-right: 10px;
}

/* ----- 在庫 ----- */
.itemDetails .itemStock {
  display: inline-block;
  vertical-align: middle;
  width: 40%;
  text-align: right;
}

/* for PC */
.pc .itemDetails .itemStock {
  width: 25%;
  text-align: left;
  padding-bottom: 0;
}

/* ----- オーバーレイSNSボタン ----- */
.itemDetails dd.snsWrap {
  text-align: center;
  padding: 0;
}

/* for PC */
.pc .itemDetails dd.snsWrap {
  display: inline-block;
  vertical-align: middle;
  width: 35%;
  font-size: 0;
}

/* -----------------------------------------------------
その他
----------------------------------------------------- */
.scrollStop {
  overflow: hidden;
}

.scrollStop #contentsWrap,
.scrollStop #contents {
  z-index: auto;
}