@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
padding 0 0.5em
text-align center
ahover
opacity .5
.mainHeaderNavColorhover
opacity .5
.menuList__item
¬(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
¬(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
¬(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
