Fork: 0
root / d-shop
Transfer to URL with SHA Find file
Newer
Older
d-shop / style.styl
Subaru Hashimoto on 7 Feb 2020 42 KB stylus
Raw Blame History 
@charset "UTF-8"

/*====================================================================
common
====================================================================*/

body 
  margin 0
  color #333
  font-size 13px
  font-family Roboto, Arial, Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif
  letter-spacing 0.06em
  -webkit-text-size-adjust 100%


figure, h1, h2, h3, h4, h5, h6, li, p, ul 
  margin 0
  padding 0


h3 
  font-size 16px


li, ul 
  list-style none


a 
  color #333
  text-decoration none !important

  &active, &hover, &link, &visited 
    color #333
    text-decoration none !important
  

  img 
    border none
  


.blockLink, .btn 
  display block


.itemCb, .searchForm__icofocus, .searchForm__keyfocus 
  outline 0


.clearfix 
  zoom 1

  &after 
    content ""
    display block
    clear both
  


.center 
  text-align center !important


.left 
  text-align left !important


select 
  font-size 16px


.itemCb, select 
  border 1px solid #ddd
  background-color #fff


.hide 
  display none !important


.itemCb 
  border-radius 4px

  .btn-danger 
    background-image none
    background-color #E95F5B
    display block !important
    margin 20px auto 0
  

  #cboxClose 
    display none
  


.btn 
  text-align center
  appearance none
  border none
  border-radius 12px
  -webkit-appearance none
  -moz-appearance none
  cursor pointer


/*====================================================================
.onlyPC, .onlySP
====================================================================*/
@media screen and (min-width 1025px) 
  .onlySP 
    display none !important
  


@media screen and (max-width 1024px) 
  .onlyPC 
    display none !important
  


/*====================================================================
.headerFixed
====================================================================*/

.headerFixed 
  position fixed
  z-index 9960 !important
  height 56px
  width 100%
  top 0

  #baseMenu 
    float right
    padding 7px 6px 0

    li 
      &.base 
        margin-right 10px
        float left
      

      &.cart 
        float left

        img 
          display inline-block
          margin 2px 4px 0 0
        
      
    

    a 
      display table-cell
      background-color rgb(255, 255, 255)
      border-radius 25px
      height 32px
      text-align center
      width 32px
      padding 5px
      vertical-align middle

      img 
        height 25px
        width 25px
        border none
      
    
  


@media screen and (max-width 1024px) 
  .headerFixed 
    z-index 2 !important
  


/*====================================================================
#searchBox
====================================================================*/

#searchBox 
  box-sizing border-box
  padding 13px 8px 0 0
  z-index 100
  float right

  form 
    overflow hidden
  

  input 
    float left
    border-style none
    -webkit-appearance none
    -webkit-box-shadow none
    -moz-box-shadow none
    box-shadow none
    display inline-block
    color #a7a7a7
    vertical-align middle
    font-family Roboto, Arial, Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif
    height 25px
    padding 0 10px
    margin 0
    background transparent
    width 140px
    border 1px solid #c3c3c3
    font-size 12px
    letter-spacing 0.06em
    border-radius 2px
    line-height 16px
  


input 
  &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] 
    -moz-box-shadow none
    -moz-transition border linear 0s,box-shadow linear -1s
    -o-transition border linear 0s,box-shadow linear .0s
  


.uneditable-input 
  -moz-box-shadow none
  -moz-transition border linear 0s,box-shadow linear -1s
  -o-transition border linear 0s,box-shadow linear .0s


select, input[type="file"] 
  height 30px
  line-height 30px


#searchBox 
  button 
    border-style none
    float left
    padding 4px 7px
    color #5e5e5e
    background rgba(255, 255, 255, 0)
    cursor pointer
    height 27px
  

  input 
    &-webkit-input-placeholder, &-moz-placeholder, &-moz-placeholder, &-ms-input-placeholder 
      font-size 12px
    
  


@media screen and (max-width 1024px) 
  #searchBox 
    box-sizing border-box
    padding 30px 0 20px 15px
    float none
    border-bottom 1px solid #fff
    margin 0

    input 
      font-size 16px !important
      height 30px
      width 160px
      letter-spacing 0.06em
      padding 0 10px
      -webkit-appearance none
      border 1px solid #e2e2e2
      line-height 16px
    

    button 
      height 32px
    

    input 
      &-webkit-input-placeholder, &-moz-placeholder, &-moz-placeholder, &-ms-input-placeholder 
        padding-top 1px
      
    
  


/*====================================================================
#spNav
====================================================================*/
@media screen and (max-width 1024px) 
  #spNav__btn 
    position absolute

    span 
      position absolute
      background-color #5e5e5e
      height 2px
      left 0
      width 100%
      border-radius 25px

      &nth-of-type(1) 
        top 0
      

      &nth-of-type(2) 
        top 7px
      

      &nth-of-type(3) 
        bottom 0px
      
    

    left 20px
    top 19px
    height 17px
    width 22px
    position fixed
    z-index 2 !important
    cursor pointer

    &.active span 
      &nth-of-type(1) 
        transform translateY(9px) rotate(-315deg)
      

      &nth-of-type(2) 
        opacity 0
      

      &nth-of-type(3) 
        transform translateY(-9px) rotate(315deg)
      
    
  


/*====================================================================
.topHeaderBlock
====================================================================*/

.topHeaderBlock 
  height auto
  position relative
  width 100%
  padding 100px 0 60px


.topHeader__wrapper 
  margin 0 auto
  max-width 1140px
  width 100%
  display table

  &.full 
    max-width 1140px
  


.shopName__link, .shopLogo > span 
  display inline-block


.shopName-center 
  text-align center


.shopName-float 
  text-align left
  vertical-align bottom
  display table-cell
  line-height 0


.shopName-center .shopLogo img, .shopName-float .shopLogo img 
  width 255px
  height auto
  vertical-align bottom


.shopLogo > span .logoText 
  word-break break-all
  letter-spacing 0.25em
  line-height 1.0


@media screen and (max-width 1210px) 
  .topHeader__wrapper 
    &.w1140, &.full 
      max-width 94% !important
    
  


@media screen and (max-width 1140px) 
  .topHeader__wrapper.w1070 
    max-width 94% !important
  


@media screen and (max-width 1024px) 
  .topHeaderBlock 
    padding 80px 0 56px
  

  .shopName-float 
    display block
    text-align center
  

  .shopName-center .shopLogo img, .shopName-float .shopLogo img 
    width 210px
  

  .shopLogo > span .logoText 
    max-width 100%
    font-size 26px !important
  


@media screen and (max-width 360px) 
  .shopName-center .shopLogo img, .shopName-float .shopLogo img 
    width 180px
  


@media screen and (max-width 320px) 
  .shopName-center .shopLogo img, .shopName-float .shopLogo img 
    width 150px
  


/*====================================================================
.menus
====================================================================*/

.sp_menu-center 
  margin 50px 0 0 0


.sp_menu-float 
  vertical-align bottom
  display table-cell
  text-align right

  .menus 
    padding 0
  


.sp_menu-center .menus 
  text-align center


.menuList 
  letter-spacing 0.1em


.menuList__item 
  display inline-block
  text-align center

  ahover 
    opacity .5
  


.mainHeaderNavColorhover 
  opacity .5


.menuList__item 
  &not(last-child) 
    margin-right 30px
  

  .current 
    font-weight bold
  


#cateMenu 
  position relative


.category-list 
  display none


.on .category-list 
  position absolute
  top 12px
  color #fff
  font-size 13px
  text-align left
  font-weight normal
  z-index 54
  display block
  padding 17px 0 0


.mainHeaderNavColor 
  display block
  cursor pointer
  color #a2a2a2


.category__list 
  font-size 14px
  text-align left


.category__list--medium 
  font-size 12px

  .category__item 
    padding 0 0 0 12px
    border-bottom none
  


.category__item 
  line-height 2

  a 
    box-sizing border-box
    display block
    width 100%
    height 100%
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  


#appsItemCategoryTag .category__item a 
  color #ffffff

  &link, &visited, &hover, &active 
    color #ffffff
  


.on .category-list 
  &.w250 
    left -85px

    #appsItemCategoryTag 
      width 250px
      height 250px
      border-radius 250px
      padding 60px
      box-sizing border-box
    
  

  &.w300 
    left -105px

    #appsItemCategoryTag 
      width 300px
      height 300px
      border-radius 300px
      padding 60px
      box-sizing border-box
    
  

  &.wSikaku 
    left -25px

    #appsItemCategoryTag 
      width auto
      height auto
      padding 20px
      box-sizing border-box
    
  


@media screen and (max-width 1024px) 
  #mask 
    display none
    opacity .8
    background #333
    z-index 9962 !important
    width 100%
    position fixed
    top 0
    right 0
    bottom 0
    cursor pointer
  

  .sp_menu-center, .sp_menu-float 
    margin 0
    top 0
    left 0
    width 100%
    position fixed
    z-index 9970 !important
  

  .menus 
    background #efefef
    width 300px
    left -300px
    display block
    bottom 0
    -webkit-overflow-scrolling touch
    overflow-y auto
    position fixed
    top 0
    transition .5s
    padding 0
  

  .menus_open 
    -webkit-transform translateZ(0)
    transition .5s
    left 0 !important
  

  .menus_sp 
    width 300px
    height 100%
    overflow-y auto
  

  .menuList 
    margin 0
    padding 0 0 50px
  

  .menuList__item 
    display block
    padding 0
    margin 0 !important
    font-size 12px
    border-bottom 1px solid #fff
    text-align left
  

  .sp_center 
    border-bottom none
  

  .menuList__item a 
    color #111
    display block
    line-height 50px
    width auto
    padding 0 0 0 25px
    font-family 'Gill sans', 'Gill sans MT', 'Lato', Calibri, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif
  

  .mainHeaderNavColor 
    color #111
    display block
    line-height 50px
    width auto
    padding 0 0 0 25px
    font-family 'Gill sans', 'Gill sans MT', 'Lato', Calibri, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif
    cursor default
  

  .menuList__item .category__item a 
    line-height 20px
    margin 0
  

  .category-list 
    background-color #fbfbfb !important
    display block
    padding 0 0 0 25px
    width 100%
    height auto
    box-sizing border-box
  

  .on .category-list 
    position static
    background-color #fbfbfb !important
    border-top 0
    margin 0
    max-width 100%
    border-radius 0
    display block
    padding 0 0 0 25px
    width 100%
    height auto
    box-sizing border-box
  

  .category__item 
    margin 0
    border-bottom 1px dotted #d2d2d2
    display block
    padding 16px 0

    &last-child 
      border-bottom none
    
  

  .category__list--medium .category__item 
    border-bottom none
    padding 12px 0 0px 12px
  

  .on .category-list 
    &.w250, &.w300, &.wSikaku 
      left 0
    

    &.w250 #appsItemCategoryTag, &.w300 #appsItemCategoryTag, &.wSikaku #appsItemCategoryTag 
      width 100%
      height auto
      border-radius 0
      padding 0
      background-color #fbfbfb !important
    
  

  #appsItemCategoryTag .category__item a 
    color #111
    font-size 12px
    padding 0
    display block
    width auto
    margin 0
    font-weight normal

    &link, &visited, &hover, &active 
      color #111
      font-size 12px
      padding 0
      display block
      width auto
      margin 0
      font-weight normal
    
  

  .drawer-form__search 
    width 86%
    margin 12px auto
    padding 1% 2%
    display block
    border 1px solid #e5e5e5
    -webkit-appearance none !important
    border-radius 0
  

  .drawer-category 
    border-top 1px solid #e5e5e5
  

  .drawer-category__list 
    width 100%
    border-bottom 1px solid #e5e5e5
  


@media only screen and (max-width 320px) 
  .menus 
    width 264px
    left -264px
  


/*====================================================================
.menuList__item a.offiS
====================================================================*/

.menuList__item a.offiS 
  border-bottom 1px dotted #a2a2a2


@media screen and (max-width 1024px) 
  .menuList__item a.offiS 
    font-style italic
    border-bottom 0
  


/*====================================================================
.topNotice
====================================================================*/

.topNotice 
  font-size 14px
  margin 30px 0
  background-color #fff
  border-radius 6px
  padding 7% 4%
  text-align center
  display inline-block


/*====================================================================
.mainBLock
====================================================================*/

.mainBLock 
  padding 0


/*====================================================================
.mainImage
====================================================================*/

.mainImage 
  max-width 1140px
  margin 0 auto
  padding 0 0 40px
  display table
  width 100%
  position relative

  a imghover 
    opacity .8
  


@media screen and (max-width 1140px) 
  .mainImage 
    max-width 100%
  


@media screen and (max-width 518px) 
  .mainImage 
    max-width 100%
    padding 0 0 30px
  


/*====================================================================
.headerWrapper
====================================================================*/

.headerWrapper 
  position relative
  max-width 1140px
  margin 0 auto
  clear both
  min-height 100px


.contentHeader 
  min-height 100px
  background-repeat no-repeat
  background-size cover
  background-attachment fixed
  background-position center center

  &.loaded 
    opacity 1
    transition opacity .8s
  


/*====================================================================
.memoBlock
====================================================================*/

.memoBlock 
  margin 0 auto
  padding 0 20px 40px


.infoBlock 
  padding 10px 20px
  text-align center
  max-width 1070px
  margin 0 auto


.infoBlock__title, .infoBlock__titleSub 
  padding 0 0 5px
  font-family 'Gill sans', 'Gill sans MT', 'Lato', Calibri, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif
  letter-spacing 0.15em
  text-align center
  line-height 2.0em
  margin 0 auto


.infoBlock__content, .infoBlock__contentSub 
  font-size 13px
  letter-spacing 0.12em
  line-height 2.0em


.memoBlock.left 
  .infoBlock__content, .infoBlock__contentSub 
    max-width 800px
    margin 0 auto
  


.infoBlock__title02 
  font-family 'Gill sans', 'Gill sans MT', 'Lato', Calibri, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif
  letter-spacing 0.15em
  text-align center
  line-height 2.0
  margin 10px 0


.infoBlock__content02 
  font-size 13px
  letter-spacing 0.15em
  line-height 2.0
  margin 10px 0


@media screen and (max-width 518px) 
  .memoBlock 
    padding 0 20px 30px
  


/*====================================================================
#movie
====================================================================*/

focus 
  outline none


.movie 
  margin 0 0 20px

  a.btn 
    display inline-block
    padding 10px 70px
    border 1px solid #333333
    background rgba(255, 255, 255, 0.5)
    text-align center
    line-height 1
    transition .3s
    border-radius 0px
    cursor pointer
    white-space nowrap
    font-size 14px

    &hover 
      border 1px solid rgba(0, 0, 0, 0.1)
      background rgba(255, 255, 255, 0.5)
    
  


p.movie .waku 

#movie 
  margin 0 auto
  padding 0 20px 40px
  text-align center

  h3 
    padding 0 0 5px
    font-family 'Gill sans', 'Gill sans MT', 'Lato', Calibri, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif
    letter-spacing 0.15em
    text-align center
    line-height 2.0em
    margin 0 auto
  

  .sub 
    padding 0 0 12px
    line-height 2.0em
  

  .thumb 
    width 373px
    margin 0 auto

    img 
      width 100%
    

    ahover img 
      opacity 0.8
      -moz-opacity 0.8
      -webkit-opacity 0.8
    
  


@media screen and (max-width 518px) 
  #movie 
    padding 0 20px 30px
  


@media screen and (max-width 400px) 
  #movie .thumb 
    width 100%
    text-align center

    img 
      width 90%
    
  


@media screen and (max-width 300px) 
  .movie a.btn 
    padding 10px 10px
    width 100%
    box-sizing border-box
  


/*====================================================================
.whiteArea-item
====================================================================*/

.whiteArea-item 
  background #fff
  padding 0
  margin 0 auto 50px
  clear both
  display table
  width 100%
  max-width 1140px


@media screen and (max-width 1100px) 
  .whiteArea-item 
    display inline-block
    margin 0 2% 50px
    width 96%
  


@media screen and (max-width 640px) 
  .whiteArea-item 
    background #fff
    padding 0
    margin 0 2% 30px
    display block
    width initial
  


/*====================================================================
.mainBLockWrapper
====================================================================*/

.mainBLockWrapper 
  max-width 100%
  margin 0 auto
  width 100%
  background-color #fff

  &.staticWrapper 
    max-width 970px
    margin 0 auto 100px
    display block

    &.full 
      max-width 1140px !important
    
  


@media screen and (max-width 1210px) 
  .mainBLockWrapper.staticWrapper 
    &.w1140 
      max-width 94% !important
      margin 0 auto 50px
      box-sizing border-box
    

    &.full 
      max-width 94% !important
    
  


@media screen and (max-width 1140px) 
  .mainBLockWrapper.staticWrapper.w1070 
    max-width 94% !important
    margin 0 auto 50px
    box-sizing border-box
  


/*====================================================================
.searchResult
====================================================================*/

.searchResult 
  padding 40px 10px
  text-align center


@media screen and (max-width 1070px) 
  .searchResult 
    padding 20px 10px
    text-align center
  


/*====================================================================
.itemCat
====================================================================*/

.itemCat 
  padding 40px 10px
  text-align center

  .breadcrumb__child 
    display inline
    font-size 11px

    &not(last-child)after 
      content " > "
      padding 0 5px
    
  

  .childrenList 
    margin-top 4px
  

  .childrenList__li 
    border-radius 100px
    box-sizing border-box
    display inline-block
    font-size 11px
    min-height 14px
    padding 10px 15px
    margin 8px 4px 0
  


@media screen and (max-width 1024px) 
  .itemCat 
    padding 20px 10px 30px
  


/*====================================================================
.itemBlock
====================================================================*/

.itemBlock 
  max-width 1070px
  margin 20px auto 100px
  display block


.itemBlock__title 
  padding 0 0 20px
  font-family 'Gill sans', 'Gill sans MT', 'Lato', Calibri, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif
  letter-spacing 0.15em
  text-align center
  line-height 2.0em


.itemList 
  padding 0
  list-style none
  width 100%
  display flex
  flex-wrap wrap


.itemList__item 
  margin 0 1% 20px
  width 31.3%
  float left
  background-color rgba(255, 255, 255, 0.92)
  border-radius 6px
  padding 35px 0 15px
  position relative
  transition all 0.25s ease
  -webkit-transition all 0.25s ease
  box-sizing border-box


.itemList__imgbox 
  border-radius 154px
  overflow hidden
  vertical-align middle
  width 280px
  height 280px
  position relative
  margin 0 auto

  img 
    object-fit cover
    object-position center center
    font-family 'object-fit cover; object-position center center;'
    width 100%
    height 100%

    &hover 
      opacity .5
    
  


.itemInfo 
  padding 20px 20px
  text-align center


.itemInfo__title 
  font-size 13px
  font-weight normal
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  -webkit-text-overflow ellipsis
  -o-text-overflow ellipsis
  line-height 15px


.itemInfo__price 
  padding-top 8px

  span 
    display block
    font-size 14px
    color #999
  


@media screen and (max-width 1300px) 
  .itemList__imgbox 
    width 260px
    height 260px
  


@media screen and (max-width 1200px) 
  .itemList__imgbox 
    width 240px
    height 240px
  


@media screen and (max-width 1100px) 
  .itemList__imgbox 
    width 220px
    height 220px
  


@media screen and (max-width 1024px) 
  .itemBlock 
    margin 0px auto 50px
  


@media screen and (max-width 1000px) 
  .itemList__imgbox 
    width 210px
    height 210px
  


@media screen and (max-width 970px) 
  .itemList__item 
    margin 0 1% 15px
  

  .itemInfo 
    padding 20px 10px
  


@media screen and (max-width 900px) 
  .itemList__imgbox 
    width 200px
    height 200px
  


@media screen and (max-width 800px) 
  .itemList__imgbox 
    width 180px
    height 180px
  


@media screen and (max-width 700px) 
  .itemList__imgbox 
    width 160px
    height 160px
  


@media screen and (max-width 640px) 
  .itemList__item 
    width 48%
    margin 0 1% 10px
  

  .itemList__imgbox 
    width 180px
    height 180px
  


@media screen and (max-width 540px) 
  .itemList__imgbox 
    width 160px
    height 160px
  


@media screen and (max-width 440px) 
  .itemList__item 
    padding 20px 0 5px
  

  .itemList__imgbox 
    width 150px
    height 150px
  


@media screen and (max-width 360px) 
  .itemList__item 
    width 96%
    float none
    padding 35px 0 15px
    margin 0 2% 10px
  

  .itemList__imgbox 
    width 210px
    height 210px
  


@media screen and (max-width 270px) 
  .itemList__imgbox 
    width 170px
    height 170px
  


@media screen and (max-width 200px) 
  .itemList__imgbox 
    width 100px
    height 100px
  


/*====================================================================
.itemList__item.soldout
====================================================================*/

.itemList__item 
  &.soldout .itemInfo__price 
    span 
      text-decoration line-through
      line-height 15px
    

    &before 
      content "SOLD OUT"
      color #ffffff
      font-size 11px
      text-decoration none
      background #a2a2a2
      padding 4px 10px
      margin 0 0 5px 0
      border-radius 2px
      box-sizing border-box
      display inline-block
    
  

  .label_image 
    position absolute
    width 65px
    z-index 2
    top 24px
    left 0
    right 0
    margin auto
  


@media screen and (min-width 1025px) 
  .itemList__item.soldout .itemList__imgboxhover 
    position relative

    img 
      opacity 0.3
    

    &after 
      color #000000
      content "SOLD OUT"
      font-size 16px
      display block
      height 100px
      line-height 100px
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      padding 0
      margin auto
      text-align center
      z-index 1
    
  


/*====================================================================
.itemList__item .label_image
====================================================================*/

@media screen and (max-width 1000px) 
  .itemList__item .label_image 
    width 50px
    z-index 1
    top 26px
  


@media screen and (max-width 440px) 
  .itemList__item .label_image 
    top 11px
  


@media screen and (max-width 360px) 
  .itemList__item .label_image 
    top 26px
  


/*====================================================================
.item
====================================================================*/

.itemPhotoBlock 
  position relative
  margin-right 20px

  .label_image 
    position absolute
    left -12px
    top -12px
    width 70px
    z-index 52
  


.itemSlideWrapper 
  margin 0 auto
  position relative

  .bx-wrapper 
    margin-bottom 30px

    .bx-viewport 
      background-color transparent
      border none
      box-shadow none
      left 0
    
  

  .mainImg__item 
    text-align center

    img 
      width 100%
    
  


#itemSlidePager 
  text-align center
  margin 0
  padding 0 0 30px

  &.noslide 
    padding-top 20px
  

  a 
    display inline-block
    opacity .7
    margin 0 10px 10px 0
    padding 0
    text-align center

    &.active 
      opacity 1
    

    img 
      max-width 80px
      max-height 80px
    
  


.itemInfoBlock 
  .itemInfoWrapper 
    padding 0 0 25px
  

  .itemDetail__title 
    font-size 16px
    font-weight normal
    margin-bottom 15px
  

  .itemDetail__price 
    font-size 16px
    margin-bottom 25px
  

  #itemAttention 
    font-size 11px
    margin-bottom 20px
  


#postageOpen 
  color #1d96f7 !important


.itemInfoBlock 
  #itemSelect 
    margin 40px 0 20px

    > div 
      margin 0 0 10px
    

    label 
      display inline-block
      line-height 30px
      width 50px
    

    select 
      height 30px
      width 150px
      cursor pointer
    
  

  .addCartBtn 
    background-color #ff7d7d
    color #fff
    font-size 16px
    line-height 45px
    width 100%

    &.soldout 
      background-color #a2a2a2
      color #ffffff
      cursor default
    
  

  .itemExplain 
    border-top 1px dotted #ddd
    margin 30px 0
    padding 30px 0
    word-break break-all
  

  #widget 
    margin 0px 0 0 10px !important
  

  .widgetLink 
    background-color #3a3a3a !important
    border-radius 2px !important
    color #fff !important
    height auto !important
    font-size 10px !important
    padding 0.5px 5px !important
    text-align center !important
  

  .itemSocial 
    margin-top 20px
    text-align center

    > div 
      display inline-block
      vertical-align top

      &first-child 
        margin 0 10px 10px 0
      
    
  

  .illegalReportBlock 
    border-top 1px dotted #ddd
    font-size 11px
    margin-top 30px
    padding-top 20px
    text-align right
  


.itemDetailCol 
  width 50%
  float left

  &last-child 
    width 50%
    float left
  


.itemPhotoBlock 
  margin 30px 0 30px 30px


.itemInfoBlock 
  margin 30px


@media screen and (max-width 1300px) 
  .itemSlideWrapper 
    padding 0
  


@media screen and (max-width 1024px) 
  #itemSlidePager 
    padding 5px 0 10px

    a 
      &last-child 
        margin-right 0
      

      &.active 

      img 
        max-width 45px
        max-height 45px
      
    
  

  .itemSlideWrapper .bx-wrapper 
    margin-bottom 10px
  

  .itemInfoBlock .itemInfoWrapper 
    padding 0
  

  .itemPhotoBlock .label_image 
    left -9px
    top -9px
    width 50px
    z-index 1
  


@media screen and (max-width 1024px) 
  .itemSlideWrapper 
    padding 0

    .mainImg__item img 
      border-radius 0
      margin 0 auto
      width auto
      max-height 640px
      max-width 100%
    
  


@media screen and (max-width 640px) 
  .itemBLock 
    padding 15px 15px
  

  .itemDetailCol 
    width 100%
    float none
    margin 0 0 10px

    &last-child 
      margin 0 auto
      width 100%
      float none
    
  

  .itemPhotoBlock, .itemInfoBlock 
    margin 0
  


/*====================================================================
.staticContainer
====================================================================*/

.staticContainer 
  padding 30px 60px


@media screen and (max-width 1024px) 
  .staticContainer 
    padding 30px 20px
  


/*====================================================================
.sBlock
====================================================================*/

.sBlock 
  h1, h2 
    border-bottom 1px dotted #ddd
    font-size 22px
    letter-spacing 0.1em
    margin 0 0 35px
    padding-bottom 25px
    text-align center
    font-weight normal
    font-family 'Gill sans', 'Gill sans MT', 'Lato', Calibri, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif
  

  p 
    font-size 13px
    line-height 2.0
    word-wrap break-word
  

  .inquirySection 
    p 
      font-weight 700
      text-align center
      margin 50px 0 30px
    

    form 
      dl 
        margin 0 auto
        width 80%
      

      dt 
        margin 0 0 10px
      

      span 
        color #E95F5B
        font-size 12px

        &before 
          content '  '
        
      

      dd 
        margin 0 0 30px

        input 
          border 1px solid #ddd
          border-radius 3px
          height 40px
          padding 0 2%
          width 96%
        

        textarea 
          border 1px solid #ddd
          border-radius 3px
          height 40px
          padding 0 2%
          width 96%
          height 70px
          padding 2%
        
      

      .control-panel 
        padding 30px 0 10px
        text-align center

        input 
          -webkit-appearance button
          background-color #666
          border none
          border-radius 5px
          color #fff
          line-height 40px
          display inline-block
          font-size 16px
          width 60%
        
      
    

    &#inquiryConfirmSection dd 
      background-color #f4f4f4
      border-radius 3px
      padding 15px 10px
    

    &#inquiryCompleteSection > 
      p 
        padding 40px 0 80px
      

      a 
        display block
        margin 50px 0 0
        text-align center
      
    
  

  #law h3 
    margin-top 20px
    font-size 14px
  

  #privacy 
    h3 
      margin-bottom 20px
    

    dl 
      dt 
        font-weight 700
        margin 0 0 5px
      

      dd 
        margin 0 0 15px
      
    
  

  &.blogBlock .blog_title h2 
    word-wrap break-word
    font-weight normal
    border-bottom none
    font-size 20px
    letter-spacing .1em
    line-height 2.0 !important
    margin 0
    padding-bottom 10px
    text-align left
  


@media screen and (max-width 1024px) 
  .sBlock 
    h1, h2 
      font-size 18px
      margin 0 0 30px
      padding-bottom 20px
    

    .inquirySection 
      form 
        dl 
          width 94%
        

        .control-panel 
          padding 10px 0
        
      

      &#inquiryCompleteSection > a 
        text-align center
      

      form dd 
        input, textarea 
          font-size 16px
          -webkit-appearance none
        
      
    
  


/*====================================================================
#law, #privacy
====================================================================*/

/*====================================================================
.blog
====================================================================*/

.main #about 
  &.blogListMain > .blog_inner 
    padding 0 0 40px 0 !important
    margin 0 auto 40px
  

  &.blogDetail > .blog_inner 
    padding 0 0 40px !important
  

  &.blogListMain .blog_publish, &.blogDetail .blog_publish 
    margin 0 0 20px !important
  

  &.blogListMain .publish_date, &.blogDetail .publish_date 
    color #999
    font-size 11px !important
    margin 0 !important
  

  > .blog_inner .blog_contents 
    line-height 2.0
    height auto !important
  

  .blog_contents img 
    max-width 100%
    height auto
  

  &.blogListMain .read_more 
    text-align center
    position static !important
    padding-top 25px !important

    a 
      background-color #999
      border-radius 2px
      box-sizing border-box
      color #fff !important
      font-size 11px
      padding 6px 30px
      text-align center
      font-weight normal !important
      display inline-block
    
  


.sBlock.blogBlock .blog_inner 
  .blog_head_image 
    margin 0 0 16px

    img 
      max-width 100%
    
  

  .social 
    ul 
      text-align center
    

    li 
      display inline-block
      margin-right 8px
    
  


.paginate li 
  line-height 10px !important


@media screen and (max-width 1024px) 
  .sBlock.blogBlock .blog_title h2 
    font-size 18px
  


@media screen and (max-width 650px) 
  .youtube, .vimeo 
    width 100%
    height 22em
  


@media screen and (max-width 414px) 
  .youtube, .vimeo 
    height 15em
  


@media screen and (max-width 375px) 
  .youtube, .vimeo 
    height 13em
  


@media screen and (max-width 320px) 
  .youtube, .vimeo 
    height 12em
  


/*====================================================================
.about
====================================================================*/

.aboutImage 
  text-align center
  max-width 1140px
  margin 0 auto

  &.full 
    max-width 1140px
  

  img 
    width 100%
    vertical-align top
  


.aboutBlock 
  p 
    text-align center
  

  a 
    border-bottom 1px dotted #a2a2a2 !important

    &active, &hover, &link, &visited 
      border-bottom 1px dotted #a2a2a2 !important
    
  


@media screen and (max-width 970px) 
  .aboutImage 
    &.full 
      max-width 100%
    

    max-width 100%

    img 
      width 100%
    
  


/*====================================================================
.shopSNS
====================================================================*/

.shopSNS 
  padding 20px 0 30px


.shopSNSList 
  text-align center


.shopSNSList__item 
  display inline-block
  margin 0 4px


.shopSNSList__link 
  background-color #d8d8d8
  border-radius 17px
  box-sizing border-box
  display block
  height 34px
  padding 8px 0 0
  text-align center
  width 34px


.shopSNSList__icon 
  color #fff
  font-size 18px


/*====================================================================
.footer
====================================================================*/

.footer 
  margin-top 5%
  width 100%

  .footerMenu 
    display inline-block
    font-size 12px
    text-align center
  

  .footerMenu__item 
    display inline-block
    margin 10px 15px 0

    #i18 > div 
      position relative
    
  


.footerWrapper 
  position relative


.footer 
  .footerMenu__item #i18 
    .currency, .lang 
      display inline-block
    

    select 
      border 1px solid #ddd
      cursor pointer
      font-size 11px
      min-width inherit
      background-color #fff
      padding 4px 10px
      margin 0
    
  

  .footerSocial > div 
    display inline-block
    margin 0 5px
    vertical-align top
  

  .copy 
    color #a2a2a2
    font-size 12px
    margin-top 40px
    vertical-align bottom
    text-align center
  


.footerWrapper 
  height auto
  padding 30px 20px
  max-width 1070px
  margin 0 auto


.footerMenu 
  width 100%


.footer .rBlock 
  display inline-block
  width 100%


.footerSocial 
  padding 20px 0 0
  text-align center


@media screen and (max-width 1024px) 
  .footer .footerMenu__item 
    display block
    text-align center
    margin 0

    &not(last-child) 
      margin 0 0 15px
    
  

  #i18 
    .controlGroup 
      display table
      margin 0 auto 10px
    

    .controlLabel, .controls 
      display table-cell
    

    .controlLabel 
      padding 0 20px 0 0
    

    .input.select 
      position relative
    
  

  .catContainer 
    position relative
  


/*====================================================================
#page-top, html,body(-scroll)
====================================================================*/

#page-top 
  display block
  position fixed
  bottom 30px
  right 30px
  width 35px
  z-index 50
  margin 0px

  img 
    width 100%
    border none
  


/*====================================================================
.msg_startButton
====================================================================*/

.msg_startButton
  background-color #666!important

  span
    color #fff!important



/*====================================================================
.full .w1140 .w1070
====================================================================*/

.full 
  max-width 100%


.itemBlock.full, .memoBlock.full, .whiteArea-item.full, .w1140 
  max-width 1140px !important


.w1070 
  max-width 1070px !important


@media screen and (max-width 1140px) 
  .full 
    max-width 100%
  

  .itemBlock.full, .memoBlock.full, .whiteArea-item.full, .w1140 
    max-width 100% !important
  


@media screen and (max-width 1070px) 
  .w1070 
    max-width 100% !important
  


/*====================================================================
design Layout
====================================================================*/

.Roboto 

.MSMincho 
  font-family "ＭＳ Ｐ明朝", MS PMincho,"ヒラギノ明朝 Pro W3", Hiragino Mincho Pro, serif
  letter-spacing 0.06em
  line-height 1.5


.HiraKaku 
  font-family "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro,"メイリオ", Meiryo, Osaka,"ＭＳ Ｐゴシック", MS PGothic,"sans-serif"
  letter-spacing 0.06em


.MSGothic 
  font-family "ＭＳ ゴシック", MS Gothic,"Osaka−等幅","Osaka-mono", monospace
  letter-spacing 0.06em
  line-height 1.5


.non 

.maru 
  background url(https//basefile.s3.amazonaws.com/125naroom-theshop-jp/58254e3551022/bg-maru.jpg)
  background-repeat repeat


.sikaku 
  background url(https//basefile.s3.amazonaws.com/125naroom-theshop-jp/58254e50ea5c3/bg-sikaku.jpg)
  background-repeat repeat


.sima 
  background url(https//basefile.s3.amazonaws.com/125naroom-theshop-jp/58254e6938581/bg-sima.jpg)
  background-repeat repeat


.maruWaku 
  border-radius 154px


.sikakuWaku 
  border-radius 0


.onT 

.onI, .selonT 
  display none !important


.selonI 

/*====================================================================
sale app
====================================================================*/

.sale 
  .itemInfo__price span 
    color #c70e00
    font-weight bold
    font-size 14px
  

  .off-text 
    border-radius 2px
    display inline-block
    padding 4px 10px
    font-size 11px
    color #fff
    margin 5px 0 0
    background #c70e00
  

  .normal-price 
    color #999
    font-size 11px
  


.itemInfoBlock .sale-itemDetail 
  margin-bottom 20px

  .itemDetail__price 
    font-size 26px
    margin-bottom 0
    color #c70e00
    font-weight bold
  

  .off-text 
    border-radius 2px
    display inline-block
    padding 4px 10px
    font-size 12px
    color #fff
    margin 0 0 4px
    background #c70e00
  

  .normal-price 
    color #999
    font-size 11px
  


/*====================================================================
販売期間設定App
====================================================================*/

.itemList__item 
  .waitingForSale 
    color #0076d7
    font-size 13px
    font-weight bold
    background #ffffff
    border 2px solid #0076d7
    border-radius 2px
    height 40px
    z-index +1
    position absolute
    top 50%
    left 0
    right 0
    width 140px
    margin -20px auto 0
    letter-spacing 0.12em
    display flex
    justify-content center
    align-items center
    font-family "Quicksand", "Arial", "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", "Meiryo, sans-serif", "serif"
    box-sizing border-box
  

  .endOfSale 
    display flex
    justify-content center
    align-items center
    background #a2a2a2
    border-radius 2px
    color #ffffff
    font-size 11px
    width 80px
    height 20px
    margin 0 auto 5px
  


.itemInfoBlock 
  .waitingForSale 
    color #ffffff
    font-size 14px
    background #0076d7
    border-radius 2px
    height 42px
    width 100%
    margin 20px 0
    letter-spacing 0.12em
    display flex
    justify-content center
    align-items center
  

  .endOfSale 
    color #ffffff
    font-size 14px
    background #a2a2a2
    border-radius 4px
    height 50px
    width 100%
    margin 20px 0
    letter-spacing 0.12em
    display flex
    justify-content center
    align-items center
  

  .salesPeriod--term, .salesPeriod--willStart 
    color #0076d7
    font-size 15px
    font-weight bold
    background #ffffff
    border 3px solid #0076d7
    border-radius 2px
    padding 15px 10px
    margin -24px 0 20px
    letter-spacing 0.03em
    display flex
    justify-content center
    align-items center
    text-align center
  

  .salesPeriod--finish 
    color #787878
    font-size 15px
    font-weight bold
    background #ffffff
    border 3px solid #a2a2a2
    border-radius 2px
    padding 15px 10px
    margin -24px 0 20px
    letter-spacing 0.03em
    display flex
    justify-content center
    align-items center
    text-align center
  

  .purchaseButton__btn 
    display block
    text-align center
    appearance none
    border none
    border-radius 2px
    -webkit-appearance none
    -moz-appearance none
    cursor pointer
    background-color #333
    color #fff
    font-size 14px
    line-height 40px
    width 100%

    &hover 
      opacity 0.7
      transition all 0.25s ease
      -webkit-transition all 0.25s ease
    

    &.purchaseButton__btn--comingSoonStay 
      cursor default
      background #ffffff
      border-top 3px solid #0076d7
      border-bottom 3px solid #0076d7
      border-radius 0
      color #0076d7
      font-weight bold

      &hover 
        opacity 1
      
    
  


#salesPeriodModal .salesPeriodModal__btn--submit 
  background #000000 !important


@media screen and (max-width 767px) 
  .itemInfoBlock .salesPeriod--term 
    font-size 13px
    padding 15px 7px
  


/*====================================================================
予約販売App
====================================================================*/

.preOrder 
  .preOrder__label 
    color #ffffff
    font-size 14px
    background #0076d7
    border-radius 2px
    height 42px
    width 100%
    margin 20px 0
    letter-spacing 0.12em
    display flex
    justify-content center
    align-items center
  

  .preOrder__data 
    color #0076d7
    font-size 15px
    font-weight bold
    background #ffffff
    border 3px solid #0076d7
    border-radius 2px
    padding 15px 10px
    margin -24px 0 20px
    letter-spacing 0.03em
    display flex
    justify-content center
    align-items center
    text-align center
  


@media screen and (max-width 767px) 
  .preOrder .preOrder__data 
    font-size 13px
    padding 15px 7px