diff --git a/_style.css b/_style.css new file mode 100644 index 0000000..76d461b --- /dev/null +++ b/_style.css @@ -0,0 +1,2181 @@ +@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, a:active, a:hover, a:link, a:visited { + color: #333; + text-decoration: none!important; +} +a img { + border: none; +} +.blockLink, .btn { + display: block; +} +.itemCb, .searchForm__ico:focus, .searchForm__key:focus { + outline: 0; +} +.clearfix { + zoom: 1; +} +.clearfix: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; +} +.itemCb .btn-danger { + background-image: none; + background-color: #E95F5B; + display: block!important; + margin: 20px auto 0; +} +.itemCb #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; +} +.headerFixed #baseMenu { + float: right; + padding: 7px 6px 0; +} +.headerFixed #baseMenu li.base { + margin-right: 10px; + float: left; +} +.headerFixed #baseMenu li.cart { + float: left; +} +.headerFixed #baseMenu li.cart img { + display: inline-block; + margin: 2px 4px 0 0; +} +.headerFixed #baseMenu 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; +} +.headerFixed #baseMenu a 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; +} +#searchBox form { + overflow: hidden; +} +#searchBox 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"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .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; +} +#searchBox input::-webkit-input-placeholder { + font-size: 12px; +} +#searchBox input:-moz-placeholder { + font-size: 12px; +} +#searchBox input::-moz-placeholder { + font-size: 12px; +} +#searchBox input:-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; + } + #searchBox 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; + } + #searchBox button { + height: 32px; + } + #searchBox input::-webkit-input-placeholder { + padding-top: 1px; + } + #searchBox input:-moz-placeholder { + padding-top: 1px; + } + #searchBox input::-moz-placeholder { + padding-top: 1px; + } + #searchBox input:-ms-input-placeholder { + padding-top: 1px; + } +} + + + +/*==================================================================== +#spNav +====================================================================*/ +@media screen and (max-width: 1024px) { + #spNav__btn, #spNav__btn span { + position: absolute; + } + #spNav__btn { + left: 20px; + top: 19px; + height: 17px; + width: 22px; + position: fixed; + z-index: 2 !important; + cursor: pointer; + } + #spNav__btn span { + background-color: #5e5e5e; + height: 2px; + left: 0; + width: 100%; + border-radius: 25px; + } + #spNav__btn span:nth-of-type(1) { + top: 0; + } + #spNav__btn span:nth-of-type(2) { + top: 7px; + } + #spNav__btn span:nth-of-type(3) { + bottom: 0px; + } + #spNav__btn.active span:nth-of-type(1) { + transform: translateY(9px) rotate(-315deg); + } + #spNav__btn.active span:nth-of-type(2) { + opacity: 0; + } + #spNav__btn.active span: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; +} +.topHeader__wrapper.full { + max-width: 1140px; +} +.shopName__link { + display: inline-block; +} +.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, .topHeader__wrapper.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; +} +.sp_menu-float .menus { + padding: 0; +} +.sp_menu-center .menus { + text-align: center; +} +.menuList { + letter-spacing: 0.1em; +} +.menuList__item { + display: inline-block; + text-align: center; +} +.menuList__item a:hover, .mainHeaderNavColor:hover { + opacity: .5; +} +.menuList__item:not(:last-child) { + margin-right: 30px; +} +.menuList__item .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__list--medium .category__item { + padding: 0 0 0 12px; + border-bottom: none; +} +.category__item { + line-height: 2; +} +.category__item a { + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +#appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a:active { + color: #ffffff; +} +.on .category-list.w250 { + left: -85px; +} +.on .category-list.w250 #appsItemCategoryTag { + width: 250px; + height: 250px; + border-radius: 250px; + padding: 60px; + box-sizing: border-box; +} +.on .category-list.w300 { + left: -105px; +} +.on .category-list.w300 #appsItemCategoryTag { + width: 300px; + height: 300px; + border-radius: 300px; + padding: 60px; + box-sizing: border-box; +} +.on .category-list.wSikaku { + left: -25px; +} +.on .category-list.wSikaku #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, .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; + } + .mainHeaderNavColor { + 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; + } + .category__item:last-child { + border-bottom: none; + } + .category__list--medium .category__item { + border-bottom: none; + padding: 12px 0 0px 12px; + } + .on .category-list.w250, .on .category-list.w300, .on .category-list.wSikaku { + left: 0; + } + .on .category-list.w250 #appsItemCategoryTag, .on .category-list.w300 #appsItemCategoryTag, .on .category-list.wSikaku #appsItemCategoryTag { + width: 100%; + height: auto; + border-radius: 0; + padding: 0; + background-color: #fbfbfb !important; + } + #appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a: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; +} +.mainImage a img:hover { + 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; +} +.contentHeader.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, .memoBlock.left .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; +} +.movie 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; +} +.movie a.btn:hover { + border: 1px solid rgba(0,0,0,.1); + background: rgba(255,255,255,.5); +} +p.movie .waku { +} +#movie { + margin: 0 auto; + padding: 0 20px 40px; + text-align: center; +} +#movie 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; +} +#movie .sub { + padding: 0 0 12px; + line-height: 2.0em; +} +#movie .thumb { + width: 373px; + margin: 0 auto; +} +#movie .thumb img { + width: 100%; +} +#movie .thumb a:hover 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; + } + #movie .thumb 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; +} +.mainBLockWrapper.staticWrapper { + max-width: 970px; + margin: 0 auto 100px; + display: block; +} +.mainBLockWrapper.staticWrapper.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; + } + .mainBLockWrapper.staticWrapper.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; +} +.itemCat .breadcrumb__child { + display: inline; + font-size: 11px; +} +.itemCat .breadcrumb__child:not(:last-child):after { + content: " > "; + padding: 0 5px; +} +.itemCat .childrenList { + margin-top: 4px; +} +.itemCat .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; +} +.itemList__imgbox img { + object-fit: cover; + object-position: center center; + font-family: 'object-fit: cover; object-position: center center;'; + width: 100%; + height: 100%; +} +.itemList__imgbox img: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; +} +.itemInfo__price 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; +} +.itemList__item.soldout .itemInfo__price: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; +} +@media screen and (min-width: 1025px) { + .itemList__item.soldout .itemList__imgbox:hover { + position: relative; + } + .itemList__item.soldout .itemList__imgbox:hover img { + opacity: 0.3; + } + .itemList__item.soldout .itemList__imgbox:hover: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 +====================================================================*/ +.itemList__item .label_image { + position: absolute; + width: 65px; + z-index: 2; + top: 24px; + left: 0; + right: 0; + margin: auto; +} +@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; +} +.itemPhotoBlock .label_image { + position: absolute; + left: -12px; + top: -12px; + width: 70px; + z-index: 52; +} +.itemSlideWrapper { + margin: 0 auto; + position: relative; +} +.itemSlideWrapper .bx-wrapper { + margin-bottom: 30px; +} +.itemSlideWrapper .bx-wrapper .bx-viewport { + background-color: transparent; + border: none; + box-shadow: none; + left: 0; +} +.itemSlideWrapper .mainImg__item { + text-align: center; +} +.itemSlideWrapper .mainImg__item img { + width: 100%; +} +#itemSlidePager { + text-align: center; + margin: 0; + padding: 0 0 30px; +} +#itemSlidePager.noslide { + padding-top: 20px; +} +#itemSlidePager a { + display: inline-block; + opacity: .7; + margin: 0 10px 10px 0; + padding: 0; + text-align: center; +} +#itemSlidePager a.active { + opacity: 1; +} +#itemSlidePager a img { + max-width: 80px; + max-height: 80px; +} +.itemInfoBlock .itemInfoWrapper { + padding: 0 0 25px; +} +.itemInfoBlock .itemDetail__title { + font-size: 16px; + font-weight: normal; + margin-bottom: 15px; +} +.itemInfoBlock .itemDetail__price { + font-size: 16px; + margin-bottom: 25px; +} +.itemInfoBlock #itemAttention { + font-size: 11px; + margin-bottom: 20px; +} +#postageOpen { + color: #1d96f7 !important; +} +.itemInfoBlock #itemSelect { + margin: 40px 0 20px; +} +.itemInfoBlock #itemSelect>div { + margin: 0 0 10px; +} + +.itemInfoBlock #itemSelect label { + display: inline-block; + line-height: 30px; + width: 50px; +} +.itemInfoBlock #itemSelect select { + height: 30px; + width: 150px; + cursor: pointer; +} +.itemInfoBlock .addCartBtn { + background-color: #ff7d7d; + color: #fff; + font-size: 16px; + line-height: 45px; + width: 100%; +} +.itemInfoBlock .addCartBtn.soldout { + background-color: #a2a2a2; + color: #ffffff; + cursor: default; +} +.itemInfoBlock .itemExplain { + border-top: 1px dotted #ddd; + margin: 30px 0; + padding: 30px 0; + word-break: break-all; +} +.itemInfoBlock #widget { + margin: 0px 0 0 10px!important; +} +.itemInfoBlock .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; +} +.itemInfoBlock .itemSocial { + margin-top: 20px; + text-align: center; +} +.itemInfoBlock .itemSocial>div { + display: inline-block; + vertical-align: top; +} +.itemInfoBlock .itemSocial>div:first-child { + margin: 0 10px 10px 0; +} +.itemInfoBlock .illegalReportBlock { + border-top: 1px dotted #ddd; + font-size: 11px; + margin-top: 30px; + padding-top: 20px; + text-align: right; +} +.itemDetailCol { + width: 50%; + float: left; +} +.itemDetailCol: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; + } + #itemSlidePager a { + } + #itemSlidePager a:last-child { + margin-right: 0; + } + #itemSlidePager a.active { + } + #itemSlidePager a 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; + } + .itemSlideWrapper .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; + } + .itemDetailCol:last-child { + margin: 0 auto; + width: 100%; + float: none; + } + .itemPhotoBlock { + margin: 0; + } + .itemInfoBlock { + margin: 0; + } +} + + + +/*==================================================================== +.staticContainer +====================================================================*/ +.staticContainer { + padding: 30px 60px; +} +@media screen and (max-width: 1024px) { + .staticContainer { + padding: 30px 20px; + } +} + + + +/*==================================================================== +.sBlock +====================================================================*/ +.sBlock h1, .sBlock 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; +} +.sBlock p { + font-size: 13px; + line-height: 2.0; + word-wrap: break-word; +} +.sBlock .inquirySection p { + font-weight: 700; + text-align: center; + margin: 50px 0 30px; +} +.sBlock .inquirySection form dl { + margin: 0 auto; + width: 80%; +} +.sBlock .inquirySection form dt { + margin: 0 0 10px +} +.sBlock .inquirySection form span { + color: #E95F5B; + font-size: 12px; +} +.sBlock .inquirySection form span:before { + content: ' '; +} +.sBlock .inquirySection form dd { + margin: 0 0 30px; +} +.sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { + border: 1px solid #ddd; + border-radius: 3px; + height: 40px; + padding: 0 2%; + width: 96%; +} +.sBlock .inquirySection form dd textarea { + height: 70px; + padding: 2%; +} +.sBlock .inquirySection form .control-panel { + padding: 30px 0 10px; + text-align: center; +} +.sBlock .inquirySection form .control-panel 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%; +} +.sBlock .inquirySection#inquiryConfirmSection dd { + background-color: #f4f4f4; + border-radius: 3px; + padding: 15px 10px; +} +.sBlock .inquirySection#inquiryCompleteSection>p { + padding: 40px 0 80px; +} +.sBlock .inquirySection#inquiryCompleteSection>a { + display: block; + margin: 50px 0 0; + text-align: center; +} +@media screen and (max-width: 1024px) { + .sBlock h1, .sBlock h2 { + font-size: 18px; + margin: 0 0 30px; + padding-bottom: 20px; + } + .sBlock .inquirySection form dl { + width: 94%; + } + .sBlock .inquirySection form .control-panel { + padding: 10px 0; + } + .sBlock .inquirySection#inquiryCompleteSection>a { + text-align: center; + } + .sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { + font-size: 16px; + -webkit-appearance: none; + } +} + + + +/*==================================================================== +#law, #privacy +====================================================================*/ +.sBlock #law h3 { + margin-top: 20px; + font-size: 14px; +} +.sBlock #privacy h3 { + margin-bottom: 20px; +} +.sBlock #privacy dl dt { + font-weight: 700; + margin: 0 0 5px; +} +.sBlock #privacy dl dd { + margin: 0 0 15px; +} + + + +/*==================================================================== +.blog +====================================================================*/ +.sBlock.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; +} +.main #about.blogListMain > .blog_inner { + padding: 0 0 40px 0 !important; + margin: 0 auto 40px; +} +.main #about.blogDetail > .blog_inner { + padding: 0 0 40px !important; +} +.main #about.blogListMain .blog_publish { + margin: 0 0 20px !important; +} +.main #about.blogDetail .blog_publish { + margin: 0 0 20px !important; +} +.main #about.blogListMain .publish_date, .main #about.blogDetail .publish_date { + color: #999; + font-size: 11px !important; + margin: 0 !important; +} +.main #about > .blog_inner .blog_contents { + line-height: 2.0; + height: auto !important; +} +.main #about .blog_contents img { + max-width: 100%; + height: auto; +} +.main #about.blogListMain .read_more { + text-align: center; + position: static !important; + padding-top: 25px !important; +} +.main #about.blogListMain .read_more 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; +} +.sBlock.blogBlock .blog_inner .blog_head_image img { + max-width: 100%; +} +.sBlock.blogBlock .blog_inner .social ul { + text-align: center; +} +.sBlock.blogBlock .blog_inner .social 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; +} +.aboutImage.full { + max-width: 1140px; +} +.aboutImage img { + width: 100%; + vertical-align: top; +} +.aboutBlock p { + text-align: center; +} +.aboutBlock a, .aboutBlock a:active, .aboutBlock a:hover, .aboutBlock a:link, .aboutBlock a:visited { + border-bottom: 1px dotted #a2a2a2!important; +} +@media screen and (max-width: 970px) { + .aboutImage.full { + max-width: 100%; + } + .aboutImage { + max-width: 100%; + } + .aboutImage 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%; +} +.footer .footerMenu { + display: inline-block; + font-size: 12px; + text-align: center; +} +.footer .footerMenu__item { + display: inline-block; + margin: 10px 15px 0; +} +.footer .footerMenu__item #i18>div, .footerWrapper { + position: relative; +} +.footer .footerMenu__item #i18 .currency, .footer .footerMenu__item #i18 .lang { + display: inline-block; +} +.footer .footerMenu__item #i18 select { + border: 1px solid #ddd; + cursor: pointer; + font-size: 11px; + min-width: inherit; + background-color: #fff; + padding: 4px 10px; + margin: 0; +} +.footer .footerSocial>div { + display: inline-block; + margin: 0 5px; + vertical-align: top; +} +.footer .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; + } + .footer .footerMenu__item:not(:last-child) { + margin: 0 0 15px; + } + #i18 .controlGroup { + display: table; + margin: 0 auto 10px; + } + #i18 .controlLabel, #i18 .controls { + display: table-cell; + } + #i18 .controlLabel { + padding: 0 20px 0 0; + } + #i18 .input.select, .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; +} +#page-top img { + width: 100%; + border: none; +} + + + +/*==================================================================== +.full .w1140 .w1070 +====================================================================*/ +.full { + max-width: 100%; +} +.itemBlock.full, .memoBlock.full, .whiteArea-item.full { + max-width: 1140px !important; +} +.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 { + max-width: 100% !important; + } + .w1140 { + max-width: 100% !important; + } +} +@media screen and (max-width: 1070px) { + .w1070 { + max-width: 100% !important; + } +} + + + +/*==================================================================== +design Layout +====================================================================*/ +.Roboto { +} +.MSMincho { + font-family: "MS P明朝", 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 Pゴシック", MS PGothic,"sans-serif"; + letter-spacing: 0.06em; +} +.MSGothic { + font-family: "MS ゴシック", 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 { + display: none !important; +} +.selonT { + display: none !important; +} +.selonI { +} + + + +/*==================================================================== +sale app +====================================================================*/ +.sale .itemInfo__price span { + color: #c70e00; + font-weight: bold; + font-size: 14px; +} +.sale .off-text { + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 11px; + color: #fff; + margin: 5px 0 0; + background: #c70e00; +} +.sale .normal-price { + color: #999; + font-size: 11px; +} +.itemInfoBlock .sale-itemDetail { + margin-bottom: 20px; +} +.itemInfoBlock .sale-itemDetail .itemDetail__price { + font-size: 26px; + margin-bottom: 0; + color: #c70e00; + font-weight: bold; +} +.itemInfoBlock .sale-itemDetail .off-text { + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 12px; + color: #fff; + margin: 0 0 4px; + background: #c70e00; +} +.itemInfoBlock .sale-itemDetail .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; +} +.itemList__item .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; +} +.itemInfoBlock .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; +} +.itemInfoBlock .salesPeriod--term, .itemInfoBlock .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; +} +.itemInfoBlock .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; +} +.itemInfoBlock .purchaseButton__btn { + display: block; + text-align: center; + appearance: none; + border: none; + border-radius: 2px; + -webkit-appearance: none; + -moz-appearance: none; + cursor: pointer; +} +.itemInfoBlock .purchaseButton__btn { + background-color: #333; + color: #fff; + font-size: 14px; + line-height: 40px; + width: 100%; +} +.itemInfoBlock .purchaseButton__btn:hover { + opacity: 0.7; + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; +} +.itemInfoBlock .purchaseButton__btn.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; +} +.itemInfoBlock .purchaseButton__btn.purchaseButton__btn--comingSoonStay: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 .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; + } +} \ No newline at end of file diff --git a/_style.css b/_style.css new file mode 100644 index 0000000..76d461b --- /dev/null +++ b/_style.css @@ -0,0 +1,2181 @@ +@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, a:active, a:hover, a:link, a:visited { + color: #333; + text-decoration: none!important; +} +a img { + border: none; +} +.blockLink, .btn { + display: block; +} +.itemCb, .searchForm__ico:focus, .searchForm__key:focus { + outline: 0; +} +.clearfix { + zoom: 1; +} +.clearfix: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; +} +.itemCb .btn-danger { + background-image: none; + background-color: #E95F5B; + display: block!important; + margin: 20px auto 0; +} +.itemCb #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; +} +.headerFixed #baseMenu { + float: right; + padding: 7px 6px 0; +} +.headerFixed #baseMenu li.base { + margin-right: 10px; + float: left; +} +.headerFixed #baseMenu li.cart { + float: left; +} +.headerFixed #baseMenu li.cart img { + display: inline-block; + margin: 2px 4px 0 0; +} +.headerFixed #baseMenu 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; +} +.headerFixed #baseMenu a 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; +} +#searchBox form { + overflow: hidden; +} +#searchBox 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"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .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; +} +#searchBox input::-webkit-input-placeholder { + font-size: 12px; +} +#searchBox input:-moz-placeholder { + font-size: 12px; +} +#searchBox input::-moz-placeholder { + font-size: 12px; +} +#searchBox input:-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; + } + #searchBox 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; + } + #searchBox button { + height: 32px; + } + #searchBox input::-webkit-input-placeholder { + padding-top: 1px; + } + #searchBox input:-moz-placeholder { + padding-top: 1px; + } + #searchBox input::-moz-placeholder { + padding-top: 1px; + } + #searchBox input:-ms-input-placeholder { + padding-top: 1px; + } +} + + + +/*==================================================================== +#spNav +====================================================================*/ +@media screen and (max-width: 1024px) { + #spNav__btn, #spNav__btn span { + position: absolute; + } + #spNav__btn { + left: 20px; + top: 19px; + height: 17px; + width: 22px; + position: fixed; + z-index: 2 !important; + cursor: pointer; + } + #spNav__btn span { + background-color: #5e5e5e; + height: 2px; + left: 0; + width: 100%; + border-radius: 25px; + } + #spNav__btn span:nth-of-type(1) { + top: 0; + } + #spNav__btn span:nth-of-type(2) { + top: 7px; + } + #spNav__btn span:nth-of-type(3) { + bottom: 0px; + } + #spNav__btn.active span:nth-of-type(1) { + transform: translateY(9px) rotate(-315deg); + } + #spNav__btn.active span:nth-of-type(2) { + opacity: 0; + } + #spNav__btn.active span: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; +} +.topHeader__wrapper.full { + max-width: 1140px; +} +.shopName__link { + display: inline-block; +} +.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, .topHeader__wrapper.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; +} +.sp_menu-float .menus { + padding: 0; +} +.sp_menu-center .menus { + text-align: center; +} +.menuList { + letter-spacing: 0.1em; +} +.menuList__item { + display: inline-block; + text-align: center; +} +.menuList__item a:hover, .mainHeaderNavColor:hover { + opacity: .5; +} +.menuList__item:not(:last-child) { + margin-right: 30px; +} +.menuList__item .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__list--medium .category__item { + padding: 0 0 0 12px; + border-bottom: none; +} +.category__item { + line-height: 2; +} +.category__item a { + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +#appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a:active { + color: #ffffff; +} +.on .category-list.w250 { + left: -85px; +} +.on .category-list.w250 #appsItemCategoryTag { + width: 250px; + height: 250px; + border-radius: 250px; + padding: 60px; + box-sizing: border-box; +} +.on .category-list.w300 { + left: -105px; +} +.on .category-list.w300 #appsItemCategoryTag { + width: 300px; + height: 300px; + border-radius: 300px; + padding: 60px; + box-sizing: border-box; +} +.on .category-list.wSikaku { + left: -25px; +} +.on .category-list.wSikaku #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, .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; + } + .mainHeaderNavColor { + 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; + } + .category__item:last-child { + border-bottom: none; + } + .category__list--medium .category__item { + border-bottom: none; + padding: 12px 0 0px 12px; + } + .on .category-list.w250, .on .category-list.w300, .on .category-list.wSikaku { + left: 0; + } + .on .category-list.w250 #appsItemCategoryTag, .on .category-list.w300 #appsItemCategoryTag, .on .category-list.wSikaku #appsItemCategoryTag { + width: 100%; + height: auto; + border-radius: 0; + padding: 0; + background-color: #fbfbfb !important; + } + #appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a: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; +} +.mainImage a img:hover { + 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; +} +.contentHeader.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, .memoBlock.left .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; +} +.movie 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; +} +.movie a.btn:hover { + border: 1px solid rgba(0,0,0,.1); + background: rgba(255,255,255,.5); +} +p.movie .waku { +} +#movie { + margin: 0 auto; + padding: 0 20px 40px; + text-align: center; +} +#movie 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; +} +#movie .sub { + padding: 0 0 12px; + line-height: 2.0em; +} +#movie .thumb { + width: 373px; + margin: 0 auto; +} +#movie .thumb img { + width: 100%; +} +#movie .thumb a:hover 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; + } + #movie .thumb 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; +} +.mainBLockWrapper.staticWrapper { + max-width: 970px; + margin: 0 auto 100px; + display: block; +} +.mainBLockWrapper.staticWrapper.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; + } + .mainBLockWrapper.staticWrapper.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; +} +.itemCat .breadcrumb__child { + display: inline; + font-size: 11px; +} +.itemCat .breadcrumb__child:not(:last-child):after { + content: " > "; + padding: 0 5px; +} +.itemCat .childrenList { + margin-top: 4px; +} +.itemCat .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; +} +.itemList__imgbox img { + object-fit: cover; + object-position: center center; + font-family: 'object-fit: cover; object-position: center center;'; + width: 100%; + height: 100%; +} +.itemList__imgbox img: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; +} +.itemInfo__price 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; +} +.itemList__item.soldout .itemInfo__price: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; +} +@media screen and (min-width: 1025px) { + .itemList__item.soldout .itemList__imgbox:hover { + position: relative; + } + .itemList__item.soldout .itemList__imgbox:hover img { + opacity: 0.3; + } + .itemList__item.soldout .itemList__imgbox:hover: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 +====================================================================*/ +.itemList__item .label_image { + position: absolute; + width: 65px; + z-index: 2; + top: 24px; + left: 0; + right: 0; + margin: auto; +} +@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; +} +.itemPhotoBlock .label_image { + position: absolute; + left: -12px; + top: -12px; + width: 70px; + z-index: 52; +} +.itemSlideWrapper { + margin: 0 auto; + position: relative; +} +.itemSlideWrapper .bx-wrapper { + margin-bottom: 30px; +} +.itemSlideWrapper .bx-wrapper .bx-viewport { + background-color: transparent; + border: none; + box-shadow: none; + left: 0; +} +.itemSlideWrapper .mainImg__item { + text-align: center; +} +.itemSlideWrapper .mainImg__item img { + width: 100%; +} +#itemSlidePager { + text-align: center; + margin: 0; + padding: 0 0 30px; +} +#itemSlidePager.noslide { + padding-top: 20px; +} +#itemSlidePager a { + display: inline-block; + opacity: .7; + margin: 0 10px 10px 0; + padding: 0; + text-align: center; +} +#itemSlidePager a.active { + opacity: 1; +} +#itemSlidePager a img { + max-width: 80px; + max-height: 80px; +} +.itemInfoBlock .itemInfoWrapper { + padding: 0 0 25px; +} +.itemInfoBlock .itemDetail__title { + font-size: 16px; + font-weight: normal; + margin-bottom: 15px; +} +.itemInfoBlock .itemDetail__price { + font-size: 16px; + margin-bottom: 25px; +} +.itemInfoBlock #itemAttention { + font-size: 11px; + margin-bottom: 20px; +} +#postageOpen { + color: #1d96f7 !important; +} +.itemInfoBlock #itemSelect { + margin: 40px 0 20px; +} +.itemInfoBlock #itemSelect>div { + margin: 0 0 10px; +} + +.itemInfoBlock #itemSelect label { + display: inline-block; + line-height: 30px; + width: 50px; +} +.itemInfoBlock #itemSelect select { + height: 30px; + width: 150px; + cursor: pointer; +} +.itemInfoBlock .addCartBtn { + background-color: #ff7d7d; + color: #fff; + font-size: 16px; + line-height: 45px; + width: 100%; +} +.itemInfoBlock .addCartBtn.soldout { + background-color: #a2a2a2; + color: #ffffff; + cursor: default; +} +.itemInfoBlock .itemExplain { + border-top: 1px dotted #ddd; + margin: 30px 0; + padding: 30px 0; + word-break: break-all; +} +.itemInfoBlock #widget { + margin: 0px 0 0 10px!important; +} +.itemInfoBlock .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; +} +.itemInfoBlock .itemSocial { + margin-top: 20px; + text-align: center; +} +.itemInfoBlock .itemSocial>div { + display: inline-block; + vertical-align: top; +} +.itemInfoBlock .itemSocial>div:first-child { + margin: 0 10px 10px 0; +} +.itemInfoBlock .illegalReportBlock { + border-top: 1px dotted #ddd; + font-size: 11px; + margin-top: 30px; + padding-top: 20px; + text-align: right; +} +.itemDetailCol { + width: 50%; + float: left; +} +.itemDetailCol: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; + } + #itemSlidePager a { + } + #itemSlidePager a:last-child { + margin-right: 0; + } + #itemSlidePager a.active { + } + #itemSlidePager a 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; + } + .itemSlideWrapper .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; + } + .itemDetailCol:last-child { + margin: 0 auto; + width: 100%; + float: none; + } + .itemPhotoBlock { + margin: 0; + } + .itemInfoBlock { + margin: 0; + } +} + + + +/*==================================================================== +.staticContainer +====================================================================*/ +.staticContainer { + padding: 30px 60px; +} +@media screen and (max-width: 1024px) { + .staticContainer { + padding: 30px 20px; + } +} + + + +/*==================================================================== +.sBlock +====================================================================*/ +.sBlock h1, .sBlock 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; +} +.sBlock p { + font-size: 13px; + line-height: 2.0; + word-wrap: break-word; +} +.sBlock .inquirySection p { + font-weight: 700; + text-align: center; + margin: 50px 0 30px; +} +.sBlock .inquirySection form dl { + margin: 0 auto; + width: 80%; +} +.sBlock .inquirySection form dt { + margin: 0 0 10px +} +.sBlock .inquirySection form span { + color: #E95F5B; + font-size: 12px; +} +.sBlock .inquirySection form span:before { + content: ' '; +} +.sBlock .inquirySection form dd { + margin: 0 0 30px; +} +.sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { + border: 1px solid #ddd; + border-radius: 3px; + height: 40px; + padding: 0 2%; + width: 96%; +} +.sBlock .inquirySection form dd textarea { + height: 70px; + padding: 2%; +} +.sBlock .inquirySection form .control-panel { + padding: 30px 0 10px; + text-align: center; +} +.sBlock .inquirySection form .control-panel 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%; +} +.sBlock .inquirySection#inquiryConfirmSection dd { + background-color: #f4f4f4; + border-radius: 3px; + padding: 15px 10px; +} +.sBlock .inquirySection#inquiryCompleteSection>p { + padding: 40px 0 80px; +} +.sBlock .inquirySection#inquiryCompleteSection>a { + display: block; + margin: 50px 0 0; + text-align: center; +} +@media screen and (max-width: 1024px) { + .sBlock h1, .sBlock h2 { + font-size: 18px; + margin: 0 0 30px; + padding-bottom: 20px; + } + .sBlock .inquirySection form dl { + width: 94%; + } + .sBlock .inquirySection form .control-panel { + padding: 10px 0; + } + .sBlock .inquirySection#inquiryCompleteSection>a { + text-align: center; + } + .sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { + font-size: 16px; + -webkit-appearance: none; + } +} + + + +/*==================================================================== +#law, #privacy +====================================================================*/ +.sBlock #law h3 { + margin-top: 20px; + font-size: 14px; +} +.sBlock #privacy h3 { + margin-bottom: 20px; +} +.sBlock #privacy dl dt { + font-weight: 700; + margin: 0 0 5px; +} +.sBlock #privacy dl dd { + margin: 0 0 15px; +} + + + +/*==================================================================== +.blog +====================================================================*/ +.sBlock.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; +} +.main #about.blogListMain > .blog_inner { + padding: 0 0 40px 0 !important; + margin: 0 auto 40px; +} +.main #about.blogDetail > .blog_inner { + padding: 0 0 40px !important; +} +.main #about.blogListMain .blog_publish { + margin: 0 0 20px !important; +} +.main #about.blogDetail .blog_publish { + margin: 0 0 20px !important; +} +.main #about.blogListMain .publish_date, .main #about.blogDetail .publish_date { + color: #999; + font-size: 11px !important; + margin: 0 !important; +} +.main #about > .blog_inner .blog_contents { + line-height: 2.0; + height: auto !important; +} +.main #about .blog_contents img { + max-width: 100%; + height: auto; +} +.main #about.blogListMain .read_more { + text-align: center; + position: static !important; + padding-top: 25px !important; +} +.main #about.blogListMain .read_more 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; +} +.sBlock.blogBlock .blog_inner .blog_head_image img { + max-width: 100%; +} +.sBlock.blogBlock .blog_inner .social ul { + text-align: center; +} +.sBlock.blogBlock .blog_inner .social 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; +} +.aboutImage.full { + max-width: 1140px; +} +.aboutImage img { + width: 100%; + vertical-align: top; +} +.aboutBlock p { + text-align: center; +} +.aboutBlock a, .aboutBlock a:active, .aboutBlock a:hover, .aboutBlock a:link, .aboutBlock a:visited { + border-bottom: 1px dotted #a2a2a2!important; +} +@media screen and (max-width: 970px) { + .aboutImage.full { + max-width: 100%; + } + .aboutImage { + max-width: 100%; + } + .aboutImage 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%; +} +.footer .footerMenu { + display: inline-block; + font-size: 12px; + text-align: center; +} +.footer .footerMenu__item { + display: inline-block; + margin: 10px 15px 0; +} +.footer .footerMenu__item #i18>div, .footerWrapper { + position: relative; +} +.footer .footerMenu__item #i18 .currency, .footer .footerMenu__item #i18 .lang { + display: inline-block; +} +.footer .footerMenu__item #i18 select { + border: 1px solid #ddd; + cursor: pointer; + font-size: 11px; + min-width: inherit; + background-color: #fff; + padding: 4px 10px; + margin: 0; +} +.footer .footerSocial>div { + display: inline-block; + margin: 0 5px; + vertical-align: top; +} +.footer .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; + } + .footer .footerMenu__item:not(:last-child) { + margin: 0 0 15px; + } + #i18 .controlGroup { + display: table; + margin: 0 auto 10px; + } + #i18 .controlLabel, #i18 .controls { + display: table-cell; + } + #i18 .controlLabel { + padding: 0 20px 0 0; + } + #i18 .input.select, .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; +} +#page-top img { + width: 100%; + border: none; +} + + + +/*==================================================================== +.full .w1140 .w1070 +====================================================================*/ +.full { + max-width: 100%; +} +.itemBlock.full, .memoBlock.full, .whiteArea-item.full { + max-width: 1140px !important; +} +.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 { + max-width: 100% !important; + } + .w1140 { + max-width: 100% !important; + } +} +@media screen and (max-width: 1070px) { + .w1070 { + max-width: 100% !important; + } +} + + + +/*==================================================================== +design Layout +====================================================================*/ +.Roboto { +} +.MSMincho { + font-family: "MS P明朝", 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 Pゴシック", MS PGothic,"sans-serif"; + letter-spacing: 0.06em; +} +.MSGothic { + font-family: "MS ゴシック", 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 { + display: none !important; +} +.selonT { + display: none !important; +} +.selonI { +} + + + +/*==================================================================== +sale app +====================================================================*/ +.sale .itemInfo__price span { + color: #c70e00; + font-weight: bold; + font-size: 14px; +} +.sale .off-text { + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 11px; + color: #fff; + margin: 5px 0 0; + background: #c70e00; +} +.sale .normal-price { + color: #999; + font-size: 11px; +} +.itemInfoBlock .sale-itemDetail { + margin-bottom: 20px; +} +.itemInfoBlock .sale-itemDetail .itemDetail__price { + font-size: 26px; + margin-bottom: 0; + color: #c70e00; + font-weight: bold; +} +.itemInfoBlock .sale-itemDetail .off-text { + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 12px; + color: #fff; + margin: 0 0 4px; + background: #c70e00; +} +.itemInfoBlock .sale-itemDetail .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; +} +.itemList__item .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; +} +.itemInfoBlock .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; +} +.itemInfoBlock .salesPeriod--term, .itemInfoBlock .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; +} +.itemInfoBlock .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; +} +.itemInfoBlock .purchaseButton__btn { + display: block; + text-align: center; + appearance: none; + border: none; + border-radius: 2px; + -webkit-appearance: none; + -moz-appearance: none; + cursor: pointer; +} +.itemInfoBlock .purchaseButton__btn { + background-color: #333; + color: #fff; + font-size: 14px; + line-height: 40px; + width: 100%; +} +.itemInfoBlock .purchaseButton__btn:hover { + opacity: 0.7; + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; +} +.itemInfoBlock .purchaseButton__btn.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; +} +.itemInfoBlock .purchaseButton__btn.purchaseButton__btn--comingSoonStay: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 .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; + } +} \ No newline at end of file diff --git a/base.html b/base.html index 2cd2769..d1f5436 100644 --- a/base.html +++ b/base.html @@ -330,12 +330,6 @@ .itemInfoBlock .purchaseButton__btn.purchaseButton__btn--addToCart { background-color:{color:btn--addToCart}; } -.msg_startButton { - background-color: #666!important; -} -.msg_startButton span { - color: #fff!important; -} diff --git a/_style.css b/_style.css new file mode 100644 index 0000000..76d461b --- /dev/null +++ b/_style.css @@ -0,0 +1,2181 @@ +@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, a:active, a:hover, a:link, a:visited { + color: #333; + text-decoration: none!important; +} +a img { + border: none; +} +.blockLink, .btn { + display: block; +} +.itemCb, .searchForm__ico:focus, .searchForm__key:focus { + outline: 0; +} +.clearfix { + zoom: 1; +} +.clearfix: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; +} +.itemCb .btn-danger { + background-image: none; + background-color: #E95F5B; + display: block!important; + margin: 20px auto 0; +} +.itemCb #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; +} +.headerFixed #baseMenu { + float: right; + padding: 7px 6px 0; +} +.headerFixed #baseMenu li.base { + margin-right: 10px; + float: left; +} +.headerFixed #baseMenu li.cart { + float: left; +} +.headerFixed #baseMenu li.cart img { + display: inline-block; + margin: 2px 4px 0 0; +} +.headerFixed #baseMenu 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; +} +.headerFixed #baseMenu a 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; +} +#searchBox form { + overflow: hidden; +} +#searchBox 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"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .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; +} +#searchBox input::-webkit-input-placeholder { + font-size: 12px; +} +#searchBox input:-moz-placeholder { + font-size: 12px; +} +#searchBox input::-moz-placeholder { + font-size: 12px; +} +#searchBox input:-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; + } + #searchBox 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; + } + #searchBox button { + height: 32px; + } + #searchBox input::-webkit-input-placeholder { + padding-top: 1px; + } + #searchBox input:-moz-placeholder { + padding-top: 1px; + } + #searchBox input::-moz-placeholder { + padding-top: 1px; + } + #searchBox input:-ms-input-placeholder { + padding-top: 1px; + } +} + + + +/*==================================================================== +#spNav +====================================================================*/ +@media screen and (max-width: 1024px) { + #spNav__btn, #spNav__btn span { + position: absolute; + } + #spNav__btn { + left: 20px; + top: 19px; + height: 17px; + width: 22px; + position: fixed; + z-index: 2 !important; + cursor: pointer; + } + #spNav__btn span { + background-color: #5e5e5e; + height: 2px; + left: 0; + width: 100%; + border-radius: 25px; + } + #spNav__btn span:nth-of-type(1) { + top: 0; + } + #spNav__btn span:nth-of-type(2) { + top: 7px; + } + #spNav__btn span:nth-of-type(3) { + bottom: 0px; + } + #spNav__btn.active span:nth-of-type(1) { + transform: translateY(9px) rotate(-315deg); + } + #spNav__btn.active span:nth-of-type(2) { + opacity: 0; + } + #spNav__btn.active span: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; +} +.topHeader__wrapper.full { + max-width: 1140px; +} +.shopName__link { + display: inline-block; +} +.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, .topHeader__wrapper.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; +} +.sp_menu-float .menus { + padding: 0; +} +.sp_menu-center .menus { + text-align: center; +} +.menuList { + letter-spacing: 0.1em; +} +.menuList__item { + display: inline-block; + text-align: center; +} +.menuList__item a:hover, .mainHeaderNavColor:hover { + opacity: .5; +} +.menuList__item:not(:last-child) { + margin-right: 30px; +} +.menuList__item .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__list--medium .category__item { + padding: 0 0 0 12px; + border-bottom: none; +} +.category__item { + line-height: 2; +} +.category__item a { + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +#appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a:active { + color: #ffffff; +} +.on .category-list.w250 { + left: -85px; +} +.on .category-list.w250 #appsItemCategoryTag { + width: 250px; + height: 250px; + border-radius: 250px; + padding: 60px; + box-sizing: border-box; +} +.on .category-list.w300 { + left: -105px; +} +.on .category-list.w300 #appsItemCategoryTag { + width: 300px; + height: 300px; + border-radius: 300px; + padding: 60px; + box-sizing: border-box; +} +.on .category-list.wSikaku { + left: -25px; +} +.on .category-list.wSikaku #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, .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; + } + .mainHeaderNavColor { + 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; + } + .category__item:last-child { + border-bottom: none; + } + .category__list--medium .category__item { + border-bottom: none; + padding: 12px 0 0px 12px; + } + .on .category-list.w250, .on .category-list.w300, .on .category-list.wSikaku { + left: 0; + } + .on .category-list.w250 #appsItemCategoryTag, .on .category-list.w300 #appsItemCategoryTag, .on .category-list.wSikaku #appsItemCategoryTag { + width: 100%; + height: auto; + border-radius: 0; + padding: 0; + background-color: #fbfbfb !important; + } + #appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a: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; +} +.mainImage a img:hover { + 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; +} +.contentHeader.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, .memoBlock.left .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; +} +.movie 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; +} +.movie a.btn:hover { + border: 1px solid rgba(0,0,0,.1); + background: rgba(255,255,255,.5); +} +p.movie .waku { +} +#movie { + margin: 0 auto; + padding: 0 20px 40px; + text-align: center; +} +#movie 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; +} +#movie .sub { + padding: 0 0 12px; + line-height: 2.0em; +} +#movie .thumb { + width: 373px; + margin: 0 auto; +} +#movie .thumb img { + width: 100%; +} +#movie .thumb a:hover 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; + } + #movie .thumb 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; +} +.mainBLockWrapper.staticWrapper { + max-width: 970px; + margin: 0 auto 100px; + display: block; +} +.mainBLockWrapper.staticWrapper.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; + } + .mainBLockWrapper.staticWrapper.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; +} +.itemCat .breadcrumb__child { + display: inline; + font-size: 11px; +} +.itemCat .breadcrumb__child:not(:last-child):after { + content: " > "; + padding: 0 5px; +} +.itemCat .childrenList { + margin-top: 4px; +} +.itemCat .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; +} +.itemList__imgbox img { + object-fit: cover; + object-position: center center; + font-family: 'object-fit: cover; object-position: center center;'; + width: 100%; + height: 100%; +} +.itemList__imgbox img: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; +} +.itemInfo__price 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; +} +.itemList__item.soldout .itemInfo__price: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; +} +@media screen and (min-width: 1025px) { + .itemList__item.soldout .itemList__imgbox:hover { + position: relative; + } + .itemList__item.soldout .itemList__imgbox:hover img { + opacity: 0.3; + } + .itemList__item.soldout .itemList__imgbox:hover: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 +====================================================================*/ +.itemList__item .label_image { + position: absolute; + width: 65px; + z-index: 2; + top: 24px; + left: 0; + right: 0; + margin: auto; +} +@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; +} +.itemPhotoBlock .label_image { + position: absolute; + left: -12px; + top: -12px; + width: 70px; + z-index: 52; +} +.itemSlideWrapper { + margin: 0 auto; + position: relative; +} +.itemSlideWrapper .bx-wrapper { + margin-bottom: 30px; +} +.itemSlideWrapper .bx-wrapper .bx-viewport { + background-color: transparent; + border: none; + box-shadow: none; + left: 0; +} +.itemSlideWrapper .mainImg__item { + text-align: center; +} +.itemSlideWrapper .mainImg__item img { + width: 100%; +} +#itemSlidePager { + text-align: center; + margin: 0; + padding: 0 0 30px; +} +#itemSlidePager.noslide { + padding-top: 20px; +} +#itemSlidePager a { + display: inline-block; + opacity: .7; + margin: 0 10px 10px 0; + padding: 0; + text-align: center; +} +#itemSlidePager a.active { + opacity: 1; +} +#itemSlidePager a img { + max-width: 80px; + max-height: 80px; +} +.itemInfoBlock .itemInfoWrapper { + padding: 0 0 25px; +} +.itemInfoBlock .itemDetail__title { + font-size: 16px; + font-weight: normal; + margin-bottom: 15px; +} +.itemInfoBlock .itemDetail__price { + font-size: 16px; + margin-bottom: 25px; +} +.itemInfoBlock #itemAttention { + font-size: 11px; + margin-bottom: 20px; +} +#postageOpen { + color: #1d96f7 !important; +} +.itemInfoBlock #itemSelect { + margin: 40px 0 20px; +} +.itemInfoBlock #itemSelect>div { + margin: 0 0 10px; +} + +.itemInfoBlock #itemSelect label { + display: inline-block; + line-height: 30px; + width: 50px; +} +.itemInfoBlock #itemSelect select { + height: 30px; + width: 150px; + cursor: pointer; +} +.itemInfoBlock .addCartBtn { + background-color: #ff7d7d; + color: #fff; + font-size: 16px; + line-height: 45px; + width: 100%; +} +.itemInfoBlock .addCartBtn.soldout { + background-color: #a2a2a2; + color: #ffffff; + cursor: default; +} +.itemInfoBlock .itemExplain { + border-top: 1px dotted #ddd; + margin: 30px 0; + padding: 30px 0; + word-break: break-all; +} +.itemInfoBlock #widget { + margin: 0px 0 0 10px!important; +} +.itemInfoBlock .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; +} +.itemInfoBlock .itemSocial { + margin-top: 20px; + text-align: center; +} +.itemInfoBlock .itemSocial>div { + display: inline-block; + vertical-align: top; +} +.itemInfoBlock .itemSocial>div:first-child { + margin: 0 10px 10px 0; +} +.itemInfoBlock .illegalReportBlock { + border-top: 1px dotted #ddd; + font-size: 11px; + margin-top: 30px; + padding-top: 20px; + text-align: right; +} +.itemDetailCol { + width: 50%; + float: left; +} +.itemDetailCol: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; + } + #itemSlidePager a { + } + #itemSlidePager a:last-child { + margin-right: 0; + } + #itemSlidePager a.active { + } + #itemSlidePager a 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; + } + .itemSlideWrapper .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; + } + .itemDetailCol:last-child { + margin: 0 auto; + width: 100%; + float: none; + } + .itemPhotoBlock { + margin: 0; + } + .itemInfoBlock { + margin: 0; + } +} + + + +/*==================================================================== +.staticContainer +====================================================================*/ +.staticContainer { + padding: 30px 60px; +} +@media screen and (max-width: 1024px) { + .staticContainer { + padding: 30px 20px; + } +} + + + +/*==================================================================== +.sBlock +====================================================================*/ +.sBlock h1, .sBlock 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; +} +.sBlock p { + font-size: 13px; + line-height: 2.0; + word-wrap: break-word; +} +.sBlock .inquirySection p { + font-weight: 700; + text-align: center; + margin: 50px 0 30px; +} +.sBlock .inquirySection form dl { + margin: 0 auto; + width: 80%; +} +.sBlock .inquirySection form dt { + margin: 0 0 10px +} +.sBlock .inquirySection form span { + color: #E95F5B; + font-size: 12px; +} +.sBlock .inquirySection form span:before { + content: ' '; +} +.sBlock .inquirySection form dd { + margin: 0 0 30px; +} +.sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { + border: 1px solid #ddd; + border-radius: 3px; + height: 40px; + padding: 0 2%; + width: 96%; +} +.sBlock .inquirySection form dd textarea { + height: 70px; + padding: 2%; +} +.sBlock .inquirySection form .control-panel { + padding: 30px 0 10px; + text-align: center; +} +.sBlock .inquirySection form .control-panel 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%; +} +.sBlock .inquirySection#inquiryConfirmSection dd { + background-color: #f4f4f4; + border-radius: 3px; + padding: 15px 10px; +} +.sBlock .inquirySection#inquiryCompleteSection>p { + padding: 40px 0 80px; +} +.sBlock .inquirySection#inquiryCompleteSection>a { + display: block; + margin: 50px 0 0; + text-align: center; +} +@media screen and (max-width: 1024px) { + .sBlock h1, .sBlock h2 { + font-size: 18px; + margin: 0 0 30px; + padding-bottom: 20px; + } + .sBlock .inquirySection form dl { + width: 94%; + } + .sBlock .inquirySection form .control-panel { + padding: 10px 0; + } + .sBlock .inquirySection#inquiryCompleteSection>a { + text-align: center; + } + .sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { + font-size: 16px; + -webkit-appearance: none; + } +} + + + +/*==================================================================== +#law, #privacy +====================================================================*/ +.sBlock #law h3 { + margin-top: 20px; + font-size: 14px; +} +.sBlock #privacy h3 { + margin-bottom: 20px; +} +.sBlock #privacy dl dt { + font-weight: 700; + margin: 0 0 5px; +} +.sBlock #privacy dl dd { + margin: 0 0 15px; +} + + + +/*==================================================================== +.blog +====================================================================*/ +.sBlock.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; +} +.main #about.blogListMain > .blog_inner { + padding: 0 0 40px 0 !important; + margin: 0 auto 40px; +} +.main #about.blogDetail > .blog_inner { + padding: 0 0 40px !important; +} +.main #about.blogListMain .blog_publish { + margin: 0 0 20px !important; +} +.main #about.blogDetail .blog_publish { + margin: 0 0 20px !important; +} +.main #about.blogListMain .publish_date, .main #about.blogDetail .publish_date { + color: #999; + font-size: 11px !important; + margin: 0 !important; +} +.main #about > .blog_inner .blog_contents { + line-height: 2.0; + height: auto !important; +} +.main #about .blog_contents img { + max-width: 100%; + height: auto; +} +.main #about.blogListMain .read_more { + text-align: center; + position: static !important; + padding-top: 25px !important; +} +.main #about.blogListMain .read_more 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; +} +.sBlock.blogBlock .blog_inner .blog_head_image img { + max-width: 100%; +} +.sBlock.blogBlock .blog_inner .social ul { + text-align: center; +} +.sBlock.blogBlock .blog_inner .social 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; +} +.aboutImage.full { + max-width: 1140px; +} +.aboutImage img { + width: 100%; + vertical-align: top; +} +.aboutBlock p { + text-align: center; +} +.aboutBlock a, .aboutBlock a:active, .aboutBlock a:hover, .aboutBlock a:link, .aboutBlock a:visited { + border-bottom: 1px dotted #a2a2a2!important; +} +@media screen and (max-width: 970px) { + .aboutImage.full { + max-width: 100%; + } + .aboutImage { + max-width: 100%; + } + .aboutImage 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%; +} +.footer .footerMenu { + display: inline-block; + font-size: 12px; + text-align: center; +} +.footer .footerMenu__item { + display: inline-block; + margin: 10px 15px 0; +} +.footer .footerMenu__item #i18>div, .footerWrapper { + position: relative; +} +.footer .footerMenu__item #i18 .currency, .footer .footerMenu__item #i18 .lang { + display: inline-block; +} +.footer .footerMenu__item #i18 select { + border: 1px solid #ddd; + cursor: pointer; + font-size: 11px; + min-width: inherit; + background-color: #fff; + padding: 4px 10px; + margin: 0; +} +.footer .footerSocial>div { + display: inline-block; + margin: 0 5px; + vertical-align: top; +} +.footer .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; + } + .footer .footerMenu__item:not(:last-child) { + margin: 0 0 15px; + } + #i18 .controlGroup { + display: table; + margin: 0 auto 10px; + } + #i18 .controlLabel, #i18 .controls { + display: table-cell; + } + #i18 .controlLabel { + padding: 0 20px 0 0; + } + #i18 .input.select, .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; +} +#page-top img { + width: 100%; + border: none; +} + + + +/*==================================================================== +.full .w1140 .w1070 +====================================================================*/ +.full { + max-width: 100%; +} +.itemBlock.full, .memoBlock.full, .whiteArea-item.full { + max-width: 1140px !important; +} +.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 { + max-width: 100% !important; + } + .w1140 { + max-width: 100% !important; + } +} +@media screen and (max-width: 1070px) { + .w1070 { + max-width: 100% !important; + } +} + + + +/*==================================================================== +design Layout +====================================================================*/ +.Roboto { +} +.MSMincho { + font-family: "MS P明朝", 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 Pゴシック", MS PGothic,"sans-serif"; + letter-spacing: 0.06em; +} +.MSGothic { + font-family: "MS ゴシック", 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 { + display: none !important; +} +.selonT { + display: none !important; +} +.selonI { +} + + + +/*==================================================================== +sale app +====================================================================*/ +.sale .itemInfo__price span { + color: #c70e00; + font-weight: bold; + font-size: 14px; +} +.sale .off-text { + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 11px; + color: #fff; + margin: 5px 0 0; + background: #c70e00; +} +.sale .normal-price { + color: #999; + font-size: 11px; +} +.itemInfoBlock .sale-itemDetail { + margin-bottom: 20px; +} +.itemInfoBlock .sale-itemDetail .itemDetail__price { + font-size: 26px; + margin-bottom: 0; + color: #c70e00; + font-weight: bold; +} +.itemInfoBlock .sale-itemDetail .off-text { + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 12px; + color: #fff; + margin: 0 0 4px; + background: #c70e00; +} +.itemInfoBlock .sale-itemDetail .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; +} +.itemList__item .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; +} +.itemInfoBlock .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; +} +.itemInfoBlock .salesPeriod--term, .itemInfoBlock .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; +} +.itemInfoBlock .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; +} +.itemInfoBlock .purchaseButton__btn { + display: block; + text-align: center; + appearance: none; + border: none; + border-radius: 2px; + -webkit-appearance: none; + -moz-appearance: none; + cursor: pointer; +} +.itemInfoBlock .purchaseButton__btn { + background-color: #333; + color: #fff; + font-size: 14px; + line-height: 40px; + width: 100%; +} +.itemInfoBlock .purchaseButton__btn:hover { + opacity: 0.7; + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; +} +.itemInfoBlock .purchaseButton__btn.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; +} +.itemInfoBlock .purchaseButton__btn.purchaseButton__btn--comingSoonStay: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 .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; + } +} \ No newline at end of file diff --git a/base.html b/base.html index 2cd2769..d1f5436 100644 --- a/base.html +++ b/base.html @@ -330,12 +330,6 @@ .itemInfoBlock .purchaseButton__btn.purchaseButton__btn--addToCart { background-color:{color:btn--addToCart}; } -.msg_startButton { - background-color: #666!important; -} -.msg_startButton span { - color: #fff!important; -} diff --git a/style.css b/style.css index 76d461b..f067bac 100644 --- a/style.css +++ b/style.css @@ -1,2181 +1,2163 @@ @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%; + 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; +figure, +h1, +h2, +h3, +h4, +h5, +h6, +li, +p, +ul { + margin: 0; + padding: 0; } h3 { - font-size: 16px; + font-size: 16px; } -li, ul { - list-style: none; +li, +ul { + list-style: none; } -a, a:active, a:hover, a:link, a:visited { - color: #333; - text-decoration: none!important; +a { + color: #333; + text-decoration: none !important; +} +aactive, +ahover, +alink, +avisited { + color: #333; + text-decoration: none !important; } a img { - border: none; + border: none; } -.blockLink, .btn { - display: block; +.blockLink, +.btn { + display: block; } -.itemCb, .searchForm__ico:focus, .searchForm__key:focus { - outline: 0; +.itemCb, +.searchForm__icofocus, +.searchForm__keyfocus { + outline: 0; } .clearfix { - zoom: 1; + zoom: 1; } -.clearfix:after { - content: ""; - display: block; - clear: both; +.clearfixafter { + content: ""; + display: block; + clear: both; } .center { - text-align: center !important; + text-align: center !important; } .left { - text-align: left !important; + text-align: left !important; } select { - font-size: 16px; + font-size: 16px; } -.itemCb, select { - border: 1px solid #ddd; - background-color: #fff; +.itemCb, +select { + border: 1px solid #ddd; + background-color: #fff; } .hide { - display: none !important; + display: none !important; } .itemCb { - border-radius: 4px; + border-radius: 4px; } .itemCb .btn-danger { - background-image: none; - background-color: #E95F5B; - display: block!important; - margin: 20px auto 0; + background-image: none; + background-color: #e95f5b; + display: block !important; + margin: 20px auto 0; } .itemCb #cboxClose { - display: none; + display: none; } .btn { - text-align: center; - appearance: none; - border: none; - border-radius: 12px; - -webkit-appearance: none; - -moz-appearance: none; - cursor: pointer; + 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; - } + .onlySP { + display: none !important; + } } @media screen and (max-width: 1024px) { - .onlyPC { - display: none!important; - } + .onlyPC { + display: none !important; + } } - - - /*==================================================================== .headerFixed ====================================================================*/ .headerFixed { - position: fixed; - z-index: 9960 !important; - height: 56px; - width: 100%; - top: 0; + position: fixed; + z-index: 9960 !important; + height: 56px; + width: 100%; + top: 0; } .headerFixed #baseMenu { - float: right; - padding: 7px 6px 0; + float: right; + padding: 7px 6px 0; } .headerFixed #baseMenu li.base { - margin-right: 10px; - float: left; + margin-right: 10px; + float: left; } .headerFixed #baseMenu li.cart { - float: left; + float: left; } .headerFixed #baseMenu li.cart img { - display: inline-block; - margin: 2px 4px 0 0; + display: inline-block; + margin: 2px 4px 0 0; } .headerFixed #baseMenu 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; + display: table-cell; + background-color: #fff; + border-radius: 25px; + height: 32px; + text-align: center; + width: 32px; + padding: 5px; + vertical-align: middle; } .headerFixed #baseMenu a img { - height: 25px; - width: 25px; - border: none; + height: 25px; + width: 25px; + border: none; } @media screen and (max-width: 1024px) { - .headerFixed { - z-index: 2 !important; - } + .headerFixed { + z-index: 2 !important; + } } - - - /*==================================================================== #searchBox ====================================================================*/ #searchBox { - box-sizing: border-box; - padding: 13px 8px 0 0; - z-index: 100; - float: right; + box-sizing: border-box; + padding: 13px 8px 0 0; + z-index: 100; + float: right; } #searchBox form { - overflow: hidden; + overflow: hidden; } #searchBox 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; + 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"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - -moz-box-shadow: none; - -moz-transition: border linear 0s,box-shadow linear -1s; - -o-transition: border linear 0s,box-shadow linear .0s; +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { + -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; +.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; + border-style: none; + float: left; + padding: 4px 7px; + color: #5e5e5e; + background: rgba(255,255,255,0); + cursor: pointer; + height: 27px; } -#searchBox input::-webkit-input-placeholder { - font-size: 12px; -} -#searchBox input:-moz-placeholder { - font-size: 12px; -} -#searchBox input::-moz-placeholder { - font-size: 12px; -} -#searchBox input:-ms-input-placeholder { - font-size: 12px; +#searchBox input-webkit-input-placeholder, +#searchBox input-moz-placeholder, +#searchBox input-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; - } - #searchBox 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; - } - #searchBox button { - height: 32px; - } - #searchBox input::-webkit-input-placeholder { - padding-top: 1px; - } - #searchBox input:-moz-placeholder { - padding-top: 1px; - } - #searchBox input::-moz-placeholder { - padding-top: 1px; - } - #searchBox input:-ms-input-placeholder { - padding-top: 1px; - } + #searchBox { + box-sizing: border-box; + padding: 30px 0 20px 15px; + float: none; + border-bottom: 1px solid #fff; + margin: 0; + } + #searchBox 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; + } + #searchBox button { + height: 32px; + } + #searchBox input-webkit-input-placeholder, + #searchBox input-moz-placeholder, + #searchBox input-ms-input-placeholder { + padding-top: 1px; + } } - - - /*==================================================================== #spNav ====================================================================*/ @media screen and (max-width: 1024px) { - #spNav__btn, #spNav__btn span { - position: absolute; - } - #spNav__btn { - left: 20px; - top: 19px; - height: 17px; - width: 22px; - position: fixed; - z-index: 2 !important; - cursor: pointer; - } - #spNav__btn span { - background-color: #5e5e5e; - height: 2px; - left: 0; - width: 100%; - border-radius: 25px; - } - #spNav__btn span:nth-of-type(1) { - top: 0; - } - #spNav__btn span:nth-of-type(2) { - top: 7px; - } - #spNav__btn span:nth-of-type(3) { - bottom: 0px; - } - #spNav__btn.active span:nth-of-type(1) { - transform: translateY(9px) rotate(-315deg); - } - #spNav__btn.active span:nth-of-type(2) { - opacity: 0; - } - #spNav__btn.active span:nth-of-type(3) { - transform: translateY(-9px) rotate(315deg); - } + #spNav__btn { + position: absolute; + left: 20px; + top: 19px; + height: 17px; + width: 22px; + position: fixed; + z-index: 2 !important; + cursor: pointer; + } + #spNav__btn span { + position: absolute; + background-color: #5e5e5e; + height: 2px; + left: 0; + width: 100%; + border-radius: 25px; + } + #spNav__btn spannth-of-type(1) { + top: 0; + } + #spNav__btn spannth-of-type(2) { + top: 7px; + } + #spNav__btn spannth-of-type(3) { + bottom: 0px; + } + #spNav__btn.active spannth-of-type(1) { + transform: translateY(9px) rotate(-315deg); + } + #spNav__btn.active spannth-of-type(2) { + opacity: 0; + } + #spNav__btn.active spannth-of-type(3) { + transform: translateY(-9px) rotate(315deg); + } } - - - /*==================================================================== .topHeaderBlock ====================================================================*/ .topHeaderBlock { - height: auto; - position: relative; - width: 100%; - padding: 100px 0 60px; + height: auto; + position: relative; + width: 100%; + padding: 100px 0 60px; } .topHeader__wrapper { - margin: 0 auto; - max-width: 1140px; - width: 100%; - display: table; + margin: 0 auto; + max-width: 1140px; + width: 100%; + display: table; } .topHeader__wrapper.full { - max-width: 1140px; + max-width: 1140px; } -.shopName__link { - display: inline-block; -} -.shopLogo>span { - display: inline-block; +.shopName__link, +.shopLogo > span { + display: inline-block; } .shopName-center { - text-align: center; + text-align: center; } .shopName-float { - text-align: left; - vertical-align: bottom; - display: table-cell; - line-height: 0; + 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; +.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; +.shopLogo > span .logoText { + word-break: break-all; + letter-spacing: 0.25em; + line-height: 1; } @media screen and (max-width: 1210px) { - .topHeader__wrapper.w1140, .topHeader__wrapper.full { - max-width: 94% !important; - } + .topHeader__wrapper.w1140, + .topHeader__wrapper.full { + max-width: 94% !important; + } } @media screen and (max-width: 1140px) { - .topHeader__wrapper.w1070 { - max-width: 94% !important; - } + .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; - } + .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: 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; - } +@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; + margin: 50px 0 0 0; } .sp_menu-float { - vertical-align: bottom; - display: table-cell; - text-align: right; + vertical-align: bottom; + display: table-cell; + text-align: right; } .sp_menu-float .menus { - padding: 0; + padding: 0; } .sp_menu-center .menus { - text-align: center; + text-align: center; } .menuList { - letter-spacing: 0.1em; + letter-spacing: 0.1em; } .menuList__item { - display: inline-block; - text-align: center; + display: inline-block; + text-align: center; } -.menuList__item a:hover, .mainHeaderNavColor:hover { - opacity: .5; +.menuList__item ahover { + opacity: 0.5; } -.menuList__item:not(:last-child) { - margin-right: 30px; +.mainHeaderNavColorhover { + opacity: 0.5; +} +.menuList__itemnot(last-child) { + margin-right: 30px; } .menuList__item .current { - font-weight: bold; + font-weight: bold; } #cateMenu { - position: relative; + position: relative; } .category-list { - display: none; + 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; + 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; + display: block; + cursor: pointer; + color: #a2a2a2; } .category__list { - font-size: 14px; - text-align: left; + font-size: 14px; + text-align: left; } .category__list--medium { - font-size: 12px; + font-size: 12px; } .category__list--medium .category__item { - padding: 0 0 0 12px; - border-bottom: none; + padding: 0 0 0 12px; + border-bottom: none; } .category__item { - line-height: 2; + line-height: 2; } .category__item a { - box-sizing: border-box; - display: block; - width: 100%; - height: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -#appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a:active { - color: #ffffff; +#appsItemCategoryTag .category__item a { + color: #fff; +} +#appsItemCategoryTag .category__item alink, +#appsItemCategoryTag .category__item avisited, +#appsItemCategoryTag .category__item ahover, +#appsItemCategoryTag .category__item aactive { + color: #fff; } .on .category-list.w250 { - left: -85px; + left: -85px; } .on .category-list.w250 #appsItemCategoryTag { - width: 250px; - height: 250px; - border-radius: 250px; - padding: 60px; - box-sizing: border-box; + width: 250px; + height: 250px; + border-radius: 250px; + padding: 60px; + box-sizing: border-box; } .on .category-list.w300 { - left: -105px; + left: -105px; } .on .category-list.w300 #appsItemCategoryTag { - width: 300px; - height: 300px; - border-radius: 300px; - padding: 60px; - box-sizing: border-box; + width: 300px; + height: 300px; + border-radius: 300px; + padding: 60px; + box-sizing: border-box; } .on .category-list.wSikaku { - left: -25px; + left: -25px; } .on .category-list.wSikaku #appsItemCategoryTag { - width: auto; - height: auto; - padding: 20px; - box-sizing: border-box; + 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, .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; - } - .mainHeaderNavColor { - 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; - } - .category__item:last-child { - border-bottom: none; - } - .category__list--medium .category__item { - border-bottom: none; - padding: 12px 0 0px 12px; - } - .on .category-list.w250, .on .category-list.w300, .on .category-list.wSikaku { - left: 0; - } - .on .category-list.w250 #appsItemCategoryTag, .on .category-list.w300 #appsItemCategoryTag, .on .category-list.wSikaku #appsItemCategoryTag { - width: 100%; - height: auto; - border-radius: 0; - padding: 0; - background-color: #fbfbfb !important; - } - #appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a: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 - } + #mask { + display: none; + opacity: 0.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: 0.5s; + padding: 0; + } + .menus_open { + -webkit-transform: translateZ(0); + transition: 0.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; + } + .category__itemlast-child { + border-bottom: none; + } + .category__list--medium .category__item { + border-bottom: none; + padding: 12px 0 0px 12px; + } + .on .category-list.w250, + .on .category-list.w300, + .on .category-list.wSikaku { + left: 0; + } + .on .category-list.w250 #appsItemCategoryTag, + .on .category-list.w300 #appsItemCategoryTag, + .on .category-list.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; + } + #appsItemCategoryTag .category__item alink, + #appsItemCategoryTag .category__item avisited, + #appsItemCategoryTag .category__item ahover, + #appsItemCategoryTag .category__item aactive { + 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; - } +@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; + border-bottom: 1px dotted #a2a2a2; } @media screen and (max-width: 1024px) { - .menuList__item a.offiS { - font-style: italic; - border-bottom: 0; - } + .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; + 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; + padding: 0; } - - - /*==================================================================== .mainImage ====================================================================*/ .mainImage { - max-width: 1140px; - margin: 0 auto; - padding: 0 0 40px; - display: table; - width: 100%; - position: relative; + max-width: 1140px; + margin: 0 auto; + padding: 0 0 40px; + display: table; + width: 100%; + position: relative; } -.mainImage a img:hover { - opacity: .8; +.mainImage a imghover { + opacity: 0.8; } @media screen and (max-width: 1140px) { - .mainImage { - max-width: 100%; - } + .mainImage { + max-width: 100%; + } } @media screen and (max-width: 518px) { - .mainImage { - max-width: 100%; - padding: 0 0 30px; - } + .mainImage { + max-width: 100%; + padding: 0 0 30px; + } } - - - /*==================================================================== .headerWrapper ====================================================================*/ .headerWrapper { - position: relative; - max-width: 1140px; - margin: 0 auto; - clear: both; - min-height: 100px; + 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; + min-height: 100px; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + background-position: center center; } .contentHeader.loaded { - opacity: 1; - transition: opacity .8s; + opacity: 1; + transition: opacity 0.8s; } - - - /*==================================================================== .memoBlock ====================================================================*/ .memoBlock { - margin: 0 auto; - padding: 0 20px 40px; - + margin: 0 auto; + padding: 0 20px 40px; } .infoBlock { - padding: 10px 20px; - text-align: center; - max-width: 1070px; - margin: 0 auto; + 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__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: 2em; + margin: 0 auto; } -.infoBlock__content, .infoBlock__contentSub { - font-size: 13px; - letter-spacing: 0.12em; - line-height: 2.0em; +.infoBlock__content, +.infoBlock__contentSub { + font-size: 13px; + letter-spacing: 0.12em; + line-height: 2em; } -.memoBlock.left .infoBlock__content, .memoBlock.left .infoBlock__contentSub { - max-width: 800px; - margin: 0 auto; +.memoBlock.left .infoBlock__content, +.memoBlock.left .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; + 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; + margin: 10px 0; } .infoBlock__content02 { - font-size: 13px; - letter-spacing: 0.15em; - line-height: 2.0; - margin: 10px 0; + font-size: 13px; + letter-spacing: 0.15em; + line-height: 2; + margin: 10px 0; } @media screen and (max-width: 518px) { - .memoBlock { - padding: 0 20px 30px; - } + .memoBlock { + padding: 0 20px 30px; + } } - - - /*==================================================================== #movie ====================================================================*/ -:focus { - outline: none; +focus { + outline: none; } .movie { - margin: 0 0 20px; + margin: 0 0 20px; } .movie 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; + display: inline-block; + padding: 10px 70px; + border: 1px solid #333; + background: rgba(255,255,255,0.5); + text-align: center; + line-height: 1; + transition: 0.3s; + border-radius: 0px; + cursor: pointer; + white-space: nowrap; + font-size: 14px; } -.movie a.btn:hover { - border: 1px solid rgba(0,0,0,.1); - background: rgba(255,255,255,.5); +.movie a.btnhover { + border: 1px solid rgba(0,0,0,0.1); + background: rgba(255,255,255,0.5); } -p.movie .waku { -} +p.movie .waku, #movie { - margin: 0 auto; - padding: 0 20px 40px; - text-align: center; + margin: 0 auto; + padding: 0 20px 40px; + text-align: center; } +p.movie .waku h3, #movie 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; + 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: 2em; + margin: 0 auto; } +p.movie .waku .sub, #movie .sub { - padding: 0 0 12px; - line-height: 2.0em; + padding: 0 0 12px; + line-height: 2em; } +p.movie .waku .thumb, #movie .thumb { - width: 373px; - margin: 0 auto; + width: 373px; + margin: 0 auto; } +p.movie .waku .thumb img, #movie .thumb img { - width: 100%; + width: 100%; } -#movie .thumb a:hover img { - opacity: 0.8; - -moz-opacity: 0.8; - -webkit-opacity: 0.8; +p.movie .waku .thumb ahover img, +#movie .thumb ahover img { + opacity: 0.8; + -moz-opacity: 0.8; + -webkit-opacity: 0.8; } @media screen and (max-width: 518px) { - #movie { - padding: 0 20px 30px; - } + #movie { + padding: 0 20px 30px; + } } -@media screen and (max-width : 400px) { - #movie .thumb { - width: 100%; - text-align: center; - } - #movie .thumb img { - width: 90%; - } +@media screen and (max-width: 400px) { + #movie .thumb { + width: 100%; + text-align: center; + } + #movie .thumb img { + width: 90%; + } } -@media screen and (max-width : 300px) { - .movie a.btn { - padding: 10px 10px; - width: 100%; - box-sizing: border-box; - } +@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; + 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%; - } + .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; - } + .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; + max-width: 100%; + margin: 0 auto; + width: 100%; + background-color: #fff; } .mainBLockWrapper.staticWrapper { - max-width: 970px; - margin: 0 auto 100px; - display: block; + max-width: 970px; + margin: 0 auto 100px; + display: block; } .mainBLockWrapper.staticWrapper.full { - max-width: 1140px !important; + 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; - } - .mainBLockWrapper.staticWrapper.full { - - max-width: 94% !important; - } + .mainBLockWrapper.staticWrapper.w1140 { + max-width: 94% !important; + margin: 0 auto 50px; + box-sizing: border-box; + } + .mainBLockWrapper.staticWrapper.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; - } + .mainBLockWrapper.staticWrapper.w1070 { + max-width: 94% !important; + margin: 0 auto 50px; + box-sizing: border-box; + } } - - - /*==================================================================== .searchResult ====================================================================*/ .searchResult { - padding: 40px 10px; + padding: 40px 10px; + text-align: center; +} +@media screen and (max-width: 1070px) { + .searchResult { + padding: 20px 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; + padding: 40px 10px; + text-align: center; } .itemCat .breadcrumb__child { - display: inline; - font-size: 11px; + display: inline; + font-size: 11px; } -.itemCat .breadcrumb__child:not(:last-child):after { - content: " > "; - padding: 0 5px; +.itemCat .breadcrumb__childnot(last-child)after { + content: " > "; + padding: 0 5px; } .itemCat .childrenList { - margin-top: 4px; + margin-top: 4px; } .itemCat .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; + 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; - } +@media screen and (max-width: 1024px) { + .itemCat { + padding: 20px 10px 30px; + } } - - - /*==================================================================== .itemBlock ====================================================================*/ .itemBlock { - max-width: 1070px; - margin: 20px auto 100px; - display: block; + 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; + 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: 2em; } .itemList { - padding: 0; - list-style: none; - width: 100%; - display: flex; - flex-wrap: wrap; + 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; + 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; + border-radius: 154px; + overflow: hidden; + vertical-align: middle; + width: 280px; + height: 280px; + position: relative; + margin: 0 auto; } .itemList__imgbox img { - object-fit: cover; - object-position: center center; - font-family: 'object-fit: cover; object-position: center center;'; - width: 100%; - height: 100%; + object-fit: cover; + object-position: center center; + font-family: 'object-fit cover; object-position center center;'; + width: 100%; + height: 100%; } -.itemList__imgbox img:hover { - opacity: .5; +.itemList__imgbox imghover { + opacity: 0.5; } .itemInfo { - padding: 20px 20px; - text-align: center; + 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; + 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; + padding-top: 8px; } .itemInfo__price span { - display: block; - font-size: 14px; - color: #999; + display: block; + font-size: 14px; + color: #999; } -@media screen and (max-width: 1300px){ - .itemList__imgbox { - width: 260px; - height: 260px; - } +@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: 1200px) { + .itemList__imgbox { + width: 240px; + height: 240px; + } } -@media screen and (max-width: 1100px){ - .itemList__imgbox { - width: 220px; - height: 220px; - } +@media screen and (max-width: 1100px) { + .itemList__imgbox { + width: 220px; + height: 220px; + } } @media screen and (max-width: 1024px) { - .itemBlock { - margin: 0px auto 50px; - } + .itemBlock { + margin: 0px auto 50px; + } } -@media screen and (max-width: 1000px){ - .itemList__imgbox { - width: 210px; - height: 210px; - } +@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; - } + .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: 900px) { + .itemList__imgbox { + width: 200px; + height: 200px; + } } -@media screen and (max-width: 800px){ - .itemList__imgbox { - width: 180px; - height: 180px; - } +@media screen and (max-width: 800px) { + .itemList__imgbox { + width: 180px; + height: 180px; + } } @media screen and (max-width: 700px) { - .itemList__imgbox { - width: 160px; - height: 160px; - } + .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; - } + .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; - } + .itemList__imgbox { + width: 160px; + height: 160px; + } } @media screen and (max-width: 440px) { - .itemList__item { - padding: 20px 0 5px; - } - .itemList__imgbox { - width: 150px; - height: 150px; - } + .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; - } + .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; - } + .itemList__imgbox { + width: 170px; + height: 170px; + } } @media screen and (max-width: 200px) { - .itemList__imgbox { - width: 100px; - height: 100px; - } + .itemList__imgbox { + width: 100px; + height: 100px; + } } - - - /*==================================================================== .itemList__item.soldout ====================================================================*/ .itemList__item.soldout .itemInfo__price span { - text-decoration: line-through; - line-height: 15px; + text-decoration: line-through; + line-height: 15px; } -.itemList__item.soldout .itemInfo__price: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; +.itemList__item.soldout .itemInfo__pricebefore { + content: "SOLD OUT"; + color: #fff; + 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; +} +.itemList__item .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__imgbox:hover { - position: relative; - } - .itemList__item.soldout .itemList__imgbox:hover img { - opacity: 0.3; - } - .itemList__item.soldout .itemList__imgbox:hover: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.soldout .itemList__imgboxhover { + position: relative; + } + .itemList__item.soldout .itemList__imgboxhover img { + opacity: 0.3; + } + .itemList__item.soldout .itemList__imgboxhoverafter { + color: #000; + 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 ====================================================================*/ -.itemList__item .label_image { - position: absolute; - width: 65px; - z-index: 2; - top: 24px; - left: 0; - right: 0; - margin: auto; -} @media screen and (max-width: 1000px) { - .itemList__item .label_image { - width: 50px; - z-index: 1; - top: 26px; - } + .itemList__item .label_image { + width: 50px; + z-index: 1; + top: 26px; + } } @media screen and (max-width: 440px) { - .itemList__item .label_image { - top: 11px; - } + .itemList__item .label_image { + top: 11px; + } } @media screen and (max-width: 360px) { - .itemList__item .label_image { - top: 26px; - } + .itemList__item .label_image { + top: 26px; + } } - - - /*==================================================================== .item ====================================================================*/ .itemPhotoBlock { - position: relative; - margin-right: 20px; + position: relative; + margin-right: 20px; } .itemPhotoBlock .label_image { - position: absolute; - left: -12px; - top: -12px; - width: 70px; - z-index: 52; + position: absolute; + left: -12px; + top: -12px; + width: 70px; + z-index: 52; } .itemSlideWrapper { - margin: 0 auto; - position: relative; + margin: 0 auto; + position: relative; } .itemSlideWrapper .bx-wrapper { - margin-bottom: 30px; + margin-bottom: 30px; } .itemSlideWrapper .bx-wrapper .bx-viewport { - background-color: transparent; - border: none; - box-shadow: none; - left: 0; + background-color: transparent; + border: none; + box-shadow: none; + left: 0; } .itemSlideWrapper .mainImg__item { - text-align: center; + text-align: center; } .itemSlideWrapper .mainImg__item img { - width: 100%; + width: 100%; } #itemSlidePager { - text-align: center; - margin: 0; - padding: 0 0 30px; + text-align: center; + margin: 0; + padding: 0 0 30px; } #itemSlidePager.noslide { - padding-top: 20px; + padding-top: 20px; } #itemSlidePager a { - display: inline-block; - opacity: .7; - margin: 0 10px 10px 0; - padding: 0; - text-align: center; + display: inline-block; + opacity: 0.7; + margin: 0 10px 10px 0; + padding: 0; + text-align: center; } #itemSlidePager a.active { - opacity: 1; + opacity: 1; } #itemSlidePager a img { - max-width: 80px; - max-height: 80px; + max-width: 80px; + max-height: 80px; } .itemInfoBlock .itemInfoWrapper { - padding: 0 0 25px; + padding: 0 0 25px; } .itemInfoBlock .itemDetail__title { - font-size: 16px; - font-weight: normal; - margin-bottom: 15px; + font-size: 16px; + font-weight: normal; + margin-bottom: 15px; } .itemInfoBlock .itemDetail__price { - font-size: 16px; - margin-bottom: 25px; + font-size: 16px; + margin-bottom: 25px; } .itemInfoBlock #itemAttention { - font-size: 11px; - margin-bottom: 20px; + font-size: 11px; + margin-bottom: 20px; } #postageOpen { - color: #1d96f7 !important; + color: #1d96f7 !important; } .itemInfoBlock #itemSelect { - margin: 40px 0 20px; + margin: 40px 0 20px; } -.itemInfoBlock #itemSelect>div { - margin: 0 0 10px; +.itemInfoBlock #itemSelect > div { + margin: 0 0 10px; } - .itemInfoBlock #itemSelect label { - display: inline-block; - line-height: 30px; - width: 50px; + display: inline-block; + line-height: 30px; + width: 50px; } .itemInfoBlock #itemSelect select { - height: 30px; - width: 150px; - cursor: pointer; + height: 30px; + width: 150px; + cursor: pointer; } .itemInfoBlock .addCartBtn { - background-color: #ff7d7d; - color: #fff; - font-size: 16px; - line-height: 45px; - width: 100%; + background-color: #ff7d7d; + color: #fff; + font-size: 16px; + line-height: 45px; + width: 100%; } .itemInfoBlock .addCartBtn.soldout { - background-color: #a2a2a2; - color: #ffffff; - cursor: default; + background-color: #a2a2a2; + color: #fff; + cursor: default; } .itemInfoBlock .itemExplain { - border-top: 1px dotted #ddd; - margin: 30px 0; - padding: 30px 0; - word-break: break-all; + border-top: 1px dotted #ddd; + margin: 30px 0; + padding: 30px 0; + word-break: break-all; } .itemInfoBlock #widget { - margin: 0px 0 0 10px!important; + margin: 0px 0 0 10px !important; } .itemInfoBlock .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; + 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; } .itemInfoBlock .itemSocial { - margin-top: 20px; - text-align: center; + margin-top: 20px; + text-align: center; } -.itemInfoBlock .itemSocial>div { - display: inline-block; - vertical-align: top; +.itemInfoBlock .itemSocial > div { + display: inline-block; + vertical-align: top; } -.itemInfoBlock .itemSocial>div:first-child { - margin: 0 10px 10px 0; +.itemInfoBlock .itemSocial > divfirst-child { + margin: 0 10px 10px 0; } .itemInfoBlock .illegalReportBlock { - border-top: 1px dotted #ddd; - font-size: 11px; - margin-top: 30px; - padding-top: 20px; - text-align: right; + border-top: 1px dotted #ddd; + font-size: 11px; + margin-top: 30px; + padding-top: 20px; + text-align: right; } .itemDetailCol { - width: 50%; - float: left; + width: 50%; + float: left; } -.itemDetailCol:last-child { - width: 50%; - float: left; +.itemDetailCollast-child { + width: 50%; + float: left; } .itemPhotoBlock { - margin: 30px 0 30px 30px; + margin: 30px 0 30px 30px; } .itemInfoBlock { - margin: 30px; + margin: 30px; } -@media screen and (max-width:1300px) { - .itemSlideWrapper { - padding: 0; - } +@media screen and (max-width: 1300px) { + .itemSlideWrapper { + padding: 0; + } } @media screen and (max-width: 1024px) { - #itemSlidePager { - padding: 5px 0 10px; - } - #itemSlidePager a { - } - #itemSlidePager a:last-child { - margin-right: 0; - } - #itemSlidePager a.active { - } - #itemSlidePager a 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; - } + #itemSlidePager { + padding: 5px 0 10px; + } + #itemSlidePager alast-child { + margin-right: 0; + } + #itemSlidePager a.active, + #itemSlidePager a 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; - } - .itemSlideWrapper .mainImg__item img { - border-radius: 0; - margin: 0 auto; - width: auto; - max-height: 640px; - max-width: 100%; - } + .itemSlideWrapper { + padding: 0; + } + .itemSlideWrapper .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; - } - .itemDetailCol:last-child { - margin: 0 auto; - width: 100%; - float: none; - } - .itemPhotoBlock { - margin: 0; - } - .itemInfoBlock { - margin: 0; - } + .itemBLock { + padding: 15px 15px; + } + .itemDetailCol { + width: 100%; + float: none; + margin: 0 0 10px; + } + .itemDetailCollast-child { + margin: 0 auto; + width: 100%; + float: none; + } + .itemPhotoBlock, + .itemInfoBlock { + margin: 0; + } } - - - /*==================================================================== .staticContainer ====================================================================*/ .staticContainer { - padding: 30px 60px; + padding: 30px 60px; } @media screen and (max-width: 1024px) { - .staticContainer { - padding: 30px 20px; - } + .staticContainer { + padding: 30px 20px; + } } - - - /*==================================================================== .sBlock ====================================================================*/ -.sBlock h1, .sBlock 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; +.sBlock h1, +.sBlock 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; } .sBlock p { - font-size: 13px; - line-height: 2.0; - word-wrap: break-word; + font-size: 13px; + line-height: 2; + word-wrap: break-word; } .sBlock .inquirySection p { - font-weight: 700; - text-align: center; - margin: 50px 0 30px; + font-weight: 700; + text-align: center; + margin: 50px 0 30px; } .sBlock .inquirySection form dl { - margin: 0 auto; - width: 80%; + margin: 0 auto; + width: 80%; } .sBlock .inquirySection form dt { - margin: 0 0 10px + margin: 0 0 10px; } .sBlock .inquirySection form span { - color: #E95F5B; - font-size: 12px; + color: #e95f5b; + font-size: 12px; } -.sBlock .inquirySection form span:before { - content: ' '; +.sBlock .inquirySection form spanbefore { + content: ' '; } .sBlock .inquirySection form dd { - margin: 0 0 30px; + margin: 0 0 30px; } -.sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { - border: 1px solid #ddd; - border-radius: 3px; - height: 40px; - padding: 0 2%; - width: 96%; +.sBlock .inquirySection form dd input { + border: 1px solid #ddd; + border-radius: 3px; + height: 40px; + padding: 0 2%; + width: 96%; } .sBlock .inquirySection form dd textarea { - height: 70px; - padding: 2%; + border: 1px solid #ddd; + border-radius: 3px; + height: 40px; + padding: 0 2%; + width: 96%; + height: 70px; + padding: 2%; } .sBlock .inquirySection form .control-panel { - padding: 30px 0 10px; - text-align: center; + padding: 30px 0 10px; + text-align: center; } .sBlock .inquirySection form .control-panel 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%; + -webkit-appearance: button; + background-color: #666; + border: none; + border-radius: 5px; + color: #fff; + line-height: 40px; + display: inline-block; + font-size: 16px; + width: 60%; } .sBlock .inquirySection#inquiryConfirmSection dd { - background-color: #f4f4f4; - border-radius: 3px; - padding: 15px 10px; + background-color: #f4f4f4; + border-radius: 3px; + padding: 15px 10px; } -.sBlock .inquirySection#inquiryCompleteSection>p { - padding: 40px 0 80px; +.sBlock .inquirySection#inquiryCompleteSection > p { + padding: 40px 0 80px; } -.sBlock .inquirySection#inquiryCompleteSection>a { - display: block; - margin: 50px 0 0; - text-align: center; +.sBlock .inquirySection#inquiryCompleteSection > a { + display: block; + margin: 50px 0 0; + text-align: center; +} +.sBlock #law h3 { + margin-top: 20px; + font-size: 14px; +} +.sBlock #privacy h3 { + margin-bottom: 20px; +} +.sBlock #privacy dl dt { + font-weight: 700; + margin: 0 0 5px; +} +.sBlock #privacy dl dd { + margin: 0 0 15px; +} +.sBlock.blogBlock .blog_title h2 { + word-wrap: break-word; + font-weight: normal; + border-bottom: none; + font-size: 20px; + letter-spacing: 0.1em; + line-height: 2 !important; + margin: 0; + padding-bottom: 10px; + text-align: left; } @media screen and (max-width: 1024px) { - .sBlock h1, .sBlock h2 { - font-size: 18px; - margin: 0 0 30px; - padding-bottom: 20px; - } - .sBlock .inquirySection form dl { - width: 94%; - } - .sBlock .inquirySection form .control-panel { - padding: 10px 0; - } - .sBlock .inquirySection#inquiryCompleteSection>a { - text-align: center; - } - .sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { - font-size: 16px; - -webkit-appearance: none; - } + .sBlock h1, + .sBlock h2 { + font-size: 18px; + margin: 0 0 30px; + padding-bottom: 20px; + } + .sBlock .inquirySection form dl { + width: 94%; + } + .sBlock .inquirySection form .control-panel { + padding: 10px 0; + } + .sBlock .inquirySection#inquiryCompleteSection > a { + text-align: center; + } + .sBlock .inquirySection form dd input, + .sBlock .inquirySection form dd textarea { + font-size: 16px; + -webkit-appearance: none; + } } - - - /*==================================================================== #law, #privacy ====================================================================*/ -.sBlock #law h3 { - margin-top: 20px; - font-size: 14px; -} -.sBlock #privacy h3 { - margin-bottom: 20px; -} -.sBlock #privacy dl dt { - font-weight: 700; - margin: 0 0 5px; -} -.sBlock #privacy dl dd { - margin: 0 0 15px; -} - - - /*==================================================================== .blog ====================================================================*/ -.sBlock.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; -} .main #about.blogListMain > .blog_inner { - padding: 0 0 40px 0 !important; - margin: 0 auto 40px; + padding: 0 0 40px 0 !important; + margin: 0 auto 40px; } .main #about.blogDetail > .blog_inner { - padding: 0 0 40px !important; + padding: 0 0 40px !important; } -.main #about.blogListMain .blog_publish { - margin: 0 0 20px !important; -} +.main #about.blogListMain .blog_publish, .main #about.blogDetail .blog_publish { - margin: 0 0 20px !important; + margin: 0 0 20px !important; } -.main #about.blogListMain .publish_date, .main #about.blogDetail .publish_date { - color: #999; - font-size: 11px !important; - margin: 0 !important; +.main #about.blogListMain .publish_date, +.main #about.blogDetail .publish_date { + color: #999; + font-size: 11px !important; + margin: 0 !important; } .main #about > .blog_inner .blog_contents { - line-height: 2.0; - height: auto !important; + line-height: 2; + height: auto !important; } .main #about .blog_contents img { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } .main #about.blogListMain .read_more { - text-align: center; - position: static !important; - padding-top: 25px !important; + text-align: center; + position: static !important; + padding-top: 25px !important; } .main #about.blogListMain .read_more 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; + 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; + margin: 0 0 16px; } .sBlock.blogBlock .blog_inner .blog_head_image img { - max-width: 100%; + max-width: 100%; } .sBlock.blogBlock .blog_inner .social ul { - text-align: center; + text-align: center; } .sBlock.blogBlock .blog_inner .social li { - display: inline-block; - margin-right: 8px; + display: inline-block; + margin-right: 8px; } .paginate li { - line-height: 10px !important; + line-height: 10px !important; } -@media screen and (max-width:1024px) { - .sBlock.blogBlock .blog_title h2 { - font-size: 18px; - } +@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: 650px) { + .youtube, + .vimeo { + width: 100%; + height: 22em; + } } -@media screen and (max-width:414px) { - .youtube, .vimeo { - height: 15em; - } +@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: 375px) { + .youtube, + .vimeo { + height: 13em; + } } -@media screen and (max-width:320px) { - .youtube, .vimeo { - height: 12em; - } +@media screen and (max-width: 320px) { + .youtube, + .vimeo { + height: 12em; + } } - - - /*==================================================================== .about ====================================================================*/ .aboutImage { - text-align: center; - max-width: 1140px; - margin: 0 auto; + text-align: center; + max-width: 1140px; + margin: 0 auto; } .aboutImage.full { - max-width: 1140px; + max-width: 1140px; } .aboutImage img { - width: 100%; - vertical-align: top; + width: 100%; + vertical-align: top; } .aboutBlock p { - text-align: center; + text-align: center; } -.aboutBlock a, .aboutBlock a:active, .aboutBlock a:hover, .aboutBlock a:link, .aboutBlock a:visited { - border-bottom: 1px dotted #a2a2a2!important; +.aboutBlock a { + border-bottom: 1px dotted #a2a2a2 !important; +} +.aboutBlock aactive, +.aboutBlock ahover, +.aboutBlock alink, +.aboutBlock avisited { + border-bottom: 1px dotted #a2a2a2 !important; } @media screen and (max-width: 970px) { - .aboutImage.full { - max-width: 100%; - } - .aboutImage { - max-width: 100%; - } - .aboutImage img { - width: 100%; - } + .aboutImage { + max-width: 100%; + } + .aboutImage.full { + max-width: 100%; + } + .aboutImage img { + width: 100%; + } } - - - /*==================================================================== .shopSNS ====================================================================*/ .shopSNS { - padding: 20px 0 30px; + padding: 20px 0 30px; } .shopSNSList { - text-align: center; + text-align: center; } .shopSNSList__item { - display: inline-block; - margin: 0 4px; + 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; + 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; + color: #fff; + font-size: 18px; } - - /*==================================================================== .footer ====================================================================*/ .footer { - margin-top: 5%; - width: 100%; + margin-top: 5%; + width: 100%; } .footer .footerMenu { - display: inline-block; - font-size: 12px; - text-align: center; + display: inline-block; + font-size: 12px; + text-align: center; } .footer .footerMenu__item { - display: inline-block; - margin: 10px 15px 0; + display: inline-block; + margin: 10px 15px 0; } -.footer .footerMenu__item #i18>div, .footerWrapper { - position: relative; -} -.footer .footerMenu__item #i18 .currency, .footer .footerMenu__item #i18 .lang { - display: inline-block; -} -.footer .footerMenu__item #i18 select { - border: 1px solid #ddd; - cursor: pointer; - font-size: 11px; - min-width: inherit; - background-color: #fff; - padding: 4px 10px; - margin: 0; -} -.footer .footerSocial>div { - display: inline-block; - margin: 0 5px; - vertical-align: top; -} -.footer .copy { - color: #a2a2a2; - font-size: 12px; - margin-top: 40px; - vertical-align: bottom; - text-align: center; +.footer .footerMenu__item #i18 > div { + position: relative; } .footerWrapper { - height: auto; - padding: 30px 20px; - max-width: 1070px; - margin: 0 auto; + position: relative; +} +.footer .footerMenu__item #i18 .currency, +.footer .footerMenu__item #i18 .lang { + display: inline-block; +} +.footer .footerMenu__item #i18 select { + border: 1px solid #ddd; + cursor: pointer; + font-size: 11px; + min-width: inherit; + background-color: #fff; + padding: 4px 10px; + margin: 0; +} +.footer .footerSocial > div { + display: inline-block; + margin: 0 5px; + vertical-align: top; +} +.footer .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%; + width: 100%; } .footer .rBlock { - display: inline-block; - width: 100%; + display: inline-block; + width: 100%; } .footerSocial { - padding: 20px 0 0; - text-align: center; + padding: 20px 0 0; + text-align: center; } @media screen and (max-width: 1024px) { - .footer .footerMenu__item { - display: block; - text-align: center; - margin: 0; - } - .footer .footerMenu__item:not(:last-child) { - margin: 0 0 15px; - } - #i18 .controlGroup { - display: table; - margin: 0 auto 10px; - } - #i18 .controlLabel, #i18 .controls { - display: table-cell; - } - #i18 .controlLabel { - padding: 0 20px 0 0; - } - #i18 .input.select, .catContainer { - position: relative; - } + .footer .footerMenu__item { + display: block; + text-align: center; + margin: 0; + } + .footer .footerMenu__itemnot(last-child) { + margin: 0 0 15px; + } + #i18 .controlGroup { + display: table; + margin: 0 auto 10px; + } + #i18 .controlLabel, + #i18 .controls { + display: table-cell; + } + #i18 .controlLabel { + padding: 0 20px 0 0; + } + #i18 .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; + display: block; + position: fixed; + bottom: 30px; + right: 30px; + width: 35px; + z-index: 50; + margin: 0px; } #page-top img { - width: 100%; - border: none; + width: 100%; + border: none; } - - - +/*==================================================================== +.msg_startButton +====================================================================*/ +.msg_startButton { + background-color: #666 !important; +} +.msg_startButton span { + color: #fff !important; +} /*==================================================================== .full .w1140 .w1070 ====================================================================*/ .full { - max-width: 100%; + max-width: 100%; } -.itemBlock.full, .memoBlock.full, .whiteArea-item.full { - max-width: 1140px !important; -} +.itemBlock.full, +.memoBlock.full, +.whiteArea-item.full, .w1140 { - max-width: 1140px !important; + max-width: 1140px !important; } .w1070 { - max-width: 1070px !important; + max-width: 1070px !important; } @media screen and (max-width: 1140px) { - .full { - max-width: 100%; - } - .itemBlock.full, .memoBlock.full, .whiteArea-item.full { - max-width: 100% !important; - } - .w1140 { - max-width: 100% !important; - } + .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; - } + .w1070 { + max-width: 100% !important; + } } - - - /*==================================================================== design Layout ====================================================================*/ -.Roboto { -} +.Roboto, .MSMincho { - font-family: "MS P明朝", MS PMincho,"ヒラギノ明朝 Pro W3", Hiragino Mincho Pro, serif; - letter-spacing: 0.06em; - line-height: 1.5; + font-family: "MS P明朝", 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 Pゴシック", MS PGothic,"sans-serif"; - letter-spacing: 0.06em; + font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Osaka, "MS Pゴシック", MS PGothic, "sans-serif"; + letter-spacing: 0.06em; } .MSGothic { - font-family: "MS ゴシック", MS Gothic,"Osaka−等幅","Osaka-mono", monospace; - letter-spacing: 0.06em; - line-height: 1.5; + font-family: "MS ゴシック", MS Gothic, "Osaka−等幅", "Osaka-mono", monospace; + letter-spacing: 0.06em; + line-height: 1.5; } -.non { -} +.non, .maru { - background: url(https://basefile.s3.amazonaws.com/125naroom-theshop-jp/58254e3551022/bg-maru.jpg); - background-repeat: repeat; + 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; + 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; + background: url("https//basefile.s3.amazonaws.com/125naroom-theshop-jp/58254e6938581/bg-sima.jpg"); + background-repeat: repeat; } .maruWaku { - border-radius: 154px; + border-radius: 154px; } .sikakuWaku { - border-radius: 0; + border-radius: 0; } -.onT { -} -.onI { - display: none !important; -} +.onT, +.onI, .selonT { - display: none !important; + display: none !important; } -.selonI { -} - - - -/*==================================================================== -sale app -====================================================================*/ +.selonI .itemInfo__price span, .sale .itemInfo__price span { - color: #c70e00; - font-weight: bold; - font-size: 14px; + color: #c70e00; + font-weight: bold; + font-size: 14px; } +.selonI .off-text, .sale .off-text { - border-radius: 2px; - display: inline-block; - padding: 4px 10px; - font-size: 11px; - color: #fff; - margin: 5px 0 0; - background: #c70e00; + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 11px; + color: #fff; + margin: 5px 0 0; + background: #c70e00; } +.selonI .normal-price, .sale .normal-price { - color: #999; - font-size: 11px; + color: #999; + font-size: 11px; } .itemInfoBlock .sale-itemDetail { - margin-bottom: 20px; + margin-bottom: 20px; } .itemInfoBlock .sale-itemDetail .itemDetail__price { - font-size: 26px; - margin-bottom: 0; - color: #c70e00; - font-weight: bold; + font-size: 26px; + margin-bottom: 0; + color: #c70e00; + font-weight: bold; } .itemInfoBlock .sale-itemDetail .off-text { - border-radius: 2px; - display: inline-block; - padding: 4px 10px; - font-size: 12px; - color: #fff; - margin: 0 0 4px; - background: #c70e00; + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 12px; + color: #fff; + margin: 0 0 4px; + background: #c70e00; } .itemInfoBlock .sale-itemDetail .normal-price { - color: #999; - font-size: 11px; + 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; + color: #0076d7; + font-size: 13px; + font-weight: bold; + background: #fff; + 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; } .itemList__item .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; + display: flex; + justify-content: center; + align-items: center; + background: #a2a2a2; + border-radius: 2px; + color: #fff; + 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; + color: #fff; + 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; } .itemInfoBlock .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; + color: #fff; + 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; } -.itemInfoBlock .salesPeriod--term, .itemInfoBlock .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; +.itemInfoBlock .salesPeriod--term, +.itemInfoBlock .salesPeriod--willStart { + color: #0076d7; + font-size: 15px; + font-weight: bold; + background: #fff; + 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; } .itemInfoBlock .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; + color: #787878; + font-size: 15px; + font-weight: bold; + background: #fff; + 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; } .itemInfoBlock .purchaseButton__btn { - display: block; - text-align: center; - appearance: none; - border: none; - border-radius: 2px; - -webkit-appearance: none; - -moz-appearance: none; - cursor: pointer; + 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%; } -.itemInfoBlock .purchaseButton__btn { - background-color: #333; - color: #fff; - font-size: 14px; - line-height: 40px; - width: 100%; -} -.itemInfoBlock .purchaseButton__btn:hover { - opacity: 0.7; - transition: all 0.25s ease; - -webkit-transition: all 0.25s ease; +.itemInfoBlock .purchaseButton__btnhover { + opacity: 0.7; + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; } .itemInfoBlock .purchaseButton__btn.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; + cursor: default; + background: #fff; + border-top: 3px solid #0076d7; + border-bottom: 3px solid #0076d7; + border-radius: 0; + color: #0076d7; + font-weight: bold; } -.itemInfoBlock .purchaseButton__btn.purchaseButton__btn--comingSoonStay:hover { - opacity: 1; +.itemInfoBlock .purchaseButton__btn.purchaseButton__btn--comingSoonStayhover { + opacity: 1; } #salesPeriodModal .salesPeriodModal__btn--submit { - background: #000000 !important; + background: #000 !important; } @media screen and (max-width: 767px) { - .itemInfoBlock .salesPeriod--term { - font-size: 13px; - padding: 15px 7px; - } + .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; + color: #fff; + 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 .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; + color: #0076d7; + font-size: 15px; + font-weight: bold; + background: #fff; + 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; - } -} \ No newline at end of file + .preOrder .preOrder__data { + font-size: 13px; + padding: 15px 7px; + } +} diff --git a/_style.css b/_style.css new file mode 100644 index 0000000..76d461b --- /dev/null +++ b/_style.css @@ -0,0 +1,2181 @@ +@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, a:active, a:hover, a:link, a:visited { + color: #333; + text-decoration: none!important; +} +a img { + border: none; +} +.blockLink, .btn { + display: block; +} +.itemCb, .searchForm__ico:focus, .searchForm__key:focus { + outline: 0; +} +.clearfix { + zoom: 1; +} +.clearfix: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; +} +.itemCb .btn-danger { + background-image: none; + background-color: #E95F5B; + display: block!important; + margin: 20px auto 0; +} +.itemCb #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; +} +.headerFixed #baseMenu { + float: right; + padding: 7px 6px 0; +} +.headerFixed #baseMenu li.base { + margin-right: 10px; + float: left; +} +.headerFixed #baseMenu li.cart { + float: left; +} +.headerFixed #baseMenu li.cart img { + display: inline-block; + margin: 2px 4px 0 0; +} +.headerFixed #baseMenu 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; +} +.headerFixed #baseMenu a 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; +} +#searchBox form { + overflow: hidden; +} +#searchBox 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"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .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; +} +#searchBox input::-webkit-input-placeholder { + font-size: 12px; +} +#searchBox input:-moz-placeholder { + font-size: 12px; +} +#searchBox input::-moz-placeholder { + font-size: 12px; +} +#searchBox input:-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; + } + #searchBox 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; + } + #searchBox button { + height: 32px; + } + #searchBox input::-webkit-input-placeholder { + padding-top: 1px; + } + #searchBox input:-moz-placeholder { + padding-top: 1px; + } + #searchBox input::-moz-placeholder { + padding-top: 1px; + } + #searchBox input:-ms-input-placeholder { + padding-top: 1px; + } +} + + + +/*==================================================================== +#spNav +====================================================================*/ +@media screen and (max-width: 1024px) { + #spNav__btn, #spNav__btn span { + position: absolute; + } + #spNav__btn { + left: 20px; + top: 19px; + height: 17px; + width: 22px; + position: fixed; + z-index: 2 !important; + cursor: pointer; + } + #spNav__btn span { + background-color: #5e5e5e; + height: 2px; + left: 0; + width: 100%; + border-radius: 25px; + } + #spNav__btn span:nth-of-type(1) { + top: 0; + } + #spNav__btn span:nth-of-type(2) { + top: 7px; + } + #spNav__btn span:nth-of-type(3) { + bottom: 0px; + } + #spNav__btn.active span:nth-of-type(1) { + transform: translateY(9px) rotate(-315deg); + } + #spNav__btn.active span:nth-of-type(2) { + opacity: 0; + } + #spNav__btn.active span: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; +} +.topHeader__wrapper.full { + max-width: 1140px; +} +.shopName__link { + display: inline-block; +} +.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, .topHeader__wrapper.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; +} +.sp_menu-float .menus { + padding: 0; +} +.sp_menu-center .menus { + text-align: center; +} +.menuList { + letter-spacing: 0.1em; +} +.menuList__item { + display: inline-block; + text-align: center; +} +.menuList__item a:hover, .mainHeaderNavColor:hover { + opacity: .5; +} +.menuList__item:not(:last-child) { + margin-right: 30px; +} +.menuList__item .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__list--medium .category__item { + padding: 0 0 0 12px; + border-bottom: none; +} +.category__item { + line-height: 2; +} +.category__item a { + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +#appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a:active { + color: #ffffff; +} +.on .category-list.w250 { + left: -85px; +} +.on .category-list.w250 #appsItemCategoryTag { + width: 250px; + height: 250px; + border-radius: 250px; + padding: 60px; + box-sizing: border-box; +} +.on .category-list.w300 { + left: -105px; +} +.on .category-list.w300 #appsItemCategoryTag { + width: 300px; + height: 300px; + border-radius: 300px; + padding: 60px; + box-sizing: border-box; +} +.on .category-list.wSikaku { + left: -25px; +} +.on .category-list.wSikaku #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, .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; + } + .mainHeaderNavColor { + 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; + } + .category__item:last-child { + border-bottom: none; + } + .category__list--medium .category__item { + border-bottom: none; + padding: 12px 0 0px 12px; + } + .on .category-list.w250, .on .category-list.w300, .on .category-list.wSikaku { + left: 0; + } + .on .category-list.w250 #appsItemCategoryTag, .on .category-list.w300 #appsItemCategoryTag, .on .category-list.wSikaku #appsItemCategoryTag { + width: 100%; + height: auto; + border-radius: 0; + padding: 0; + background-color: #fbfbfb !important; + } + #appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a: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; +} +.mainImage a img:hover { + 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; +} +.contentHeader.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, .memoBlock.left .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; +} +.movie 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; +} +.movie a.btn:hover { + border: 1px solid rgba(0,0,0,.1); + background: rgba(255,255,255,.5); +} +p.movie .waku { +} +#movie { + margin: 0 auto; + padding: 0 20px 40px; + text-align: center; +} +#movie 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; +} +#movie .sub { + padding: 0 0 12px; + line-height: 2.0em; +} +#movie .thumb { + width: 373px; + margin: 0 auto; +} +#movie .thumb img { + width: 100%; +} +#movie .thumb a:hover 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; + } + #movie .thumb 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; +} +.mainBLockWrapper.staticWrapper { + max-width: 970px; + margin: 0 auto 100px; + display: block; +} +.mainBLockWrapper.staticWrapper.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; + } + .mainBLockWrapper.staticWrapper.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; +} +.itemCat .breadcrumb__child { + display: inline; + font-size: 11px; +} +.itemCat .breadcrumb__child:not(:last-child):after { + content: " > "; + padding: 0 5px; +} +.itemCat .childrenList { + margin-top: 4px; +} +.itemCat .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; +} +.itemList__imgbox img { + object-fit: cover; + object-position: center center; + font-family: 'object-fit: cover; object-position: center center;'; + width: 100%; + height: 100%; +} +.itemList__imgbox img: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; +} +.itemInfo__price 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; +} +.itemList__item.soldout .itemInfo__price: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; +} +@media screen and (min-width: 1025px) { + .itemList__item.soldout .itemList__imgbox:hover { + position: relative; + } + .itemList__item.soldout .itemList__imgbox:hover img { + opacity: 0.3; + } + .itemList__item.soldout .itemList__imgbox:hover: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 +====================================================================*/ +.itemList__item .label_image { + position: absolute; + width: 65px; + z-index: 2; + top: 24px; + left: 0; + right: 0; + margin: auto; +} +@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; +} +.itemPhotoBlock .label_image { + position: absolute; + left: -12px; + top: -12px; + width: 70px; + z-index: 52; +} +.itemSlideWrapper { + margin: 0 auto; + position: relative; +} +.itemSlideWrapper .bx-wrapper { + margin-bottom: 30px; +} +.itemSlideWrapper .bx-wrapper .bx-viewport { + background-color: transparent; + border: none; + box-shadow: none; + left: 0; +} +.itemSlideWrapper .mainImg__item { + text-align: center; +} +.itemSlideWrapper .mainImg__item img { + width: 100%; +} +#itemSlidePager { + text-align: center; + margin: 0; + padding: 0 0 30px; +} +#itemSlidePager.noslide { + padding-top: 20px; +} +#itemSlidePager a { + display: inline-block; + opacity: .7; + margin: 0 10px 10px 0; + padding: 0; + text-align: center; +} +#itemSlidePager a.active { + opacity: 1; +} +#itemSlidePager a img { + max-width: 80px; + max-height: 80px; +} +.itemInfoBlock .itemInfoWrapper { + padding: 0 0 25px; +} +.itemInfoBlock .itemDetail__title { + font-size: 16px; + font-weight: normal; + margin-bottom: 15px; +} +.itemInfoBlock .itemDetail__price { + font-size: 16px; + margin-bottom: 25px; +} +.itemInfoBlock #itemAttention { + font-size: 11px; + margin-bottom: 20px; +} +#postageOpen { + color: #1d96f7 !important; +} +.itemInfoBlock #itemSelect { + margin: 40px 0 20px; +} +.itemInfoBlock #itemSelect>div { + margin: 0 0 10px; +} + +.itemInfoBlock #itemSelect label { + display: inline-block; + line-height: 30px; + width: 50px; +} +.itemInfoBlock #itemSelect select { + height: 30px; + width: 150px; + cursor: pointer; +} +.itemInfoBlock .addCartBtn { + background-color: #ff7d7d; + color: #fff; + font-size: 16px; + line-height: 45px; + width: 100%; +} +.itemInfoBlock .addCartBtn.soldout { + background-color: #a2a2a2; + color: #ffffff; + cursor: default; +} +.itemInfoBlock .itemExplain { + border-top: 1px dotted #ddd; + margin: 30px 0; + padding: 30px 0; + word-break: break-all; +} +.itemInfoBlock #widget { + margin: 0px 0 0 10px!important; +} +.itemInfoBlock .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; +} +.itemInfoBlock .itemSocial { + margin-top: 20px; + text-align: center; +} +.itemInfoBlock .itemSocial>div { + display: inline-block; + vertical-align: top; +} +.itemInfoBlock .itemSocial>div:first-child { + margin: 0 10px 10px 0; +} +.itemInfoBlock .illegalReportBlock { + border-top: 1px dotted #ddd; + font-size: 11px; + margin-top: 30px; + padding-top: 20px; + text-align: right; +} +.itemDetailCol { + width: 50%; + float: left; +} +.itemDetailCol: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; + } + #itemSlidePager a { + } + #itemSlidePager a:last-child { + margin-right: 0; + } + #itemSlidePager a.active { + } + #itemSlidePager a 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; + } + .itemSlideWrapper .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; + } + .itemDetailCol:last-child { + margin: 0 auto; + width: 100%; + float: none; + } + .itemPhotoBlock { + margin: 0; + } + .itemInfoBlock { + margin: 0; + } +} + + + +/*==================================================================== +.staticContainer +====================================================================*/ +.staticContainer { + padding: 30px 60px; +} +@media screen and (max-width: 1024px) { + .staticContainer { + padding: 30px 20px; + } +} + + + +/*==================================================================== +.sBlock +====================================================================*/ +.sBlock h1, .sBlock 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; +} +.sBlock p { + font-size: 13px; + line-height: 2.0; + word-wrap: break-word; +} +.sBlock .inquirySection p { + font-weight: 700; + text-align: center; + margin: 50px 0 30px; +} +.sBlock .inquirySection form dl { + margin: 0 auto; + width: 80%; +} +.sBlock .inquirySection form dt { + margin: 0 0 10px +} +.sBlock .inquirySection form span { + color: #E95F5B; + font-size: 12px; +} +.sBlock .inquirySection form span:before { + content: ' '; +} +.sBlock .inquirySection form dd { + margin: 0 0 30px; +} +.sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { + border: 1px solid #ddd; + border-radius: 3px; + height: 40px; + padding: 0 2%; + width: 96%; +} +.sBlock .inquirySection form dd textarea { + height: 70px; + padding: 2%; +} +.sBlock .inquirySection form .control-panel { + padding: 30px 0 10px; + text-align: center; +} +.sBlock .inquirySection form .control-panel 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%; +} +.sBlock .inquirySection#inquiryConfirmSection dd { + background-color: #f4f4f4; + border-radius: 3px; + padding: 15px 10px; +} +.sBlock .inquirySection#inquiryCompleteSection>p { + padding: 40px 0 80px; +} +.sBlock .inquirySection#inquiryCompleteSection>a { + display: block; + margin: 50px 0 0; + text-align: center; +} +@media screen and (max-width: 1024px) { + .sBlock h1, .sBlock h2 { + font-size: 18px; + margin: 0 0 30px; + padding-bottom: 20px; + } + .sBlock .inquirySection form dl { + width: 94%; + } + .sBlock .inquirySection form .control-panel { + padding: 10px 0; + } + .sBlock .inquirySection#inquiryCompleteSection>a { + text-align: center; + } + .sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { + font-size: 16px; + -webkit-appearance: none; + } +} + + + +/*==================================================================== +#law, #privacy +====================================================================*/ +.sBlock #law h3 { + margin-top: 20px; + font-size: 14px; +} +.sBlock #privacy h3 { + margin-bottom: 20px; +} +.sBlock #privacy dl dt { + font-weight: 700; + margin: 0 0 5px; +} +.sBlock #privacy dl dd { + margin: 0 0 15px; +} + + + +/*==================================================================== +.blog +====================================================================*/ +.sBlock.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; +} +.main #about.blogListMain > .blog_inner { + padding: 0 0 40px 0 !important; + margin: 0 auto 40px; +} +.main #about.blogDetail > .blog_inner { + padding: 0 0 40px !important; +} +.main #about.blogListMain .blog_publish { + margin: 0 0 20px !important; +} +.main #about.blogDetail .blog_publish { + margin: 0 0 20px !important; +} +.main #about.blogListMain .publish_date, .main #about.blogDetail .publish_date { + color: #999; + font-size: 11px !important; + margin: 0 !important; +} +.main #about > .blog_inner .blog_contents { + line-height: 2.0; + height: auto !important; +} +.main #about .blog_contents img { + max-width: 100%; + height: auto; +} +.main #about.blogListMain .read_more { + text-align: center; + position: static !important; + padding-top: 25px !important; +} +.main #about.blogListMain .read_more 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; +} +.sBlock.blogBlock .blog_inner .blog_head_image img { + max-width: 100%; +} +.sBlock.blogBlock .blog_inner .social ul { + text-align: center; +} +.sBlock.blogBlock .blog_inner .social 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; +} +.aboutImage.full { + max-width: 1140px; +} +.aboutImage img { + width: 100%; + vertical-align: top; +} +.aboutBlock p { + text-align: center; +} +.aboutBlock a, .aboutBlock a:active, .aboutBlock a:hover, .aboutBlock a:link, .aboutBlock a:visited { + border-bottom: 1px dotted #a2a2a2!important; +} +@media screen and (max-width: 970px) { + .aboutImage.full { + max-width: 100%; + } + .aboutImage { + max-width: 100%; + } + .aboutImage 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%; +} +.footer .footerMenu { + display: inline-block; + font-size: 12px; + text-align: center; +} +.footer .footerMenu__item { + display: inline-block; + margin: 10px 15px 0; +} +.footer .footerMenu__item #i18>div, .footerWrapper { + position: relative; +} +.footer .footerMenu__item #i18 .currency, .footer .footerMenu__item #i18 .lang { + display: inline-block; +} +.footer .footerMenu__item #i18 select { + border: 1px solid #ddd; + cursor: pointer; + font-size: 11px; + min-width: inherit; + background-color: #fff; + padding: 4px 10px; + margin: 0; +} +.footer .footerSocial>div { + display: inline-block; + margin: 0 5px; + vertical-align: top; +} +.footer .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; + } + .footer .footerMenu__item:not(:last-child) { + margin: 0 0 15px; + } + #i18 .controlGroup { + display: table; + margin: 0 auto 10px; + } + #i18 .controlLabel, #i18 .controls { + display: table-cell; + } + #i18 .controlLabel { + padding: 0 20px 0 0; + } + #i18 .input.select, .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; +} +#page-top img { + width: 100%; + border: none; +} + + + +/*==================================================================== +.full .w1140 .w1070 +====================================================================*/ +.full { + max-width: 100%; +} +.itemBlock.full, .memoBlock.full, .whiteArea-item.full { + max-width: 1140px !important; +} +.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 { + max-width: 100% !important; + } + .w1140 { + max-width: 100% !important; + } +} +@media screen and (max-width: 1070px) { + .w1070 { + max-width: 100% !important; + } +} + + + +/*==================================================================== +design Layout +====================================================================*/ +.Roboto { +} +.MSMincho { + font-family: "MS P明朝", 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 Pゴシック", MS PGothic,"sans-serif"; + letter-spacing: 0.06em; +} +.MSGothic { + font-family: "MS ゴシック", 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 { + display: none !important; +} +.selonT { + display: none !important; +} +.selonI { +} + + + +/*==================================================================== +sale app +====================================================================*/ +.sale .itemInfo__price span { + color: #c70e00; + font-weight: bold; + font-size: 14px; +} +.sale .off-text { + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 11px; + color: #fff; + margin: 5px 0 0; + background: #c70e00; +} +.sale .normal-price { + color: #999; + font-size: 11px; +} +.itemInfoBlock .sale-itemDetail { + margin-bottom: 20px; +} +.itemInfoBlock .sale-itemDetail .itemDetail__price { + font-size: 26px; + margin-bottom: 0; + color: #c70e00; + font-weight: bold; +} +.itemInfoBlock .sale-itemDetail .off-text { + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 12px; + color: #fff; + margin: 0 0 4px; + background: #c70e00; +} +.itemInfoBlock .sale-itemDetail .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; +} +.itemList__item .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; +} +.itemInfoBlock .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; +} +.itemInfoBlock .salesPeriod--term, .itemInfoBlock .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; +} +.itemInfoBlock .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; +} +.itemInfoBlock .purchaseButton__btn { + display: block; + text-align: center; + appearance: none; + border: none; + border-radius: 2px; + -webkit-appearance: none; + -moz-appearance: none; + cursor: pointer; +} +.itemInfoBlock .purchaseButton__btn { + background-color: #333; + color: #fff; + font-size: 14px; + line-height: 40px; + width: 100%; +} +.itemInfoBlock .purchaseButton__btn:hover { + opacity: 0.7; + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; +} +.itemInfoBlock .purchaseButton__btn.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; +} +.itemInfoBlock .purchaseButton__btn.purchaseButton__btn--comingSoonStay: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 .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; + } +} \ No newline at end of file diff --git a/base.html b/base.html index 2cd2769..d1f5436 100644 --- a/base.html +++ b/base.html @@ -330,12 +330,6 @@ .itemInfoBlock .purchaseButton__btn.purchaseButton__btn--addToCart { background-color:{color:btn--addToCart}; } -.msg_startButton { - background-color: #666!important; -} -.msg_startButton span { - color: #fff!important; -} diff --git a/style.css b/style.css index 76d461b..f067bac 100644 --- a/style.css +++ b/style.css @@ -1,2181 +1,2163 @@ @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%; + 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; +figure, +h1, +h2, +h3, +h4, +h5, +h6, +li, +p, +ul { + margin: 0; + padding: 0; } h3 { - font-size: 16px; + font-size: 16px; } -li, ul { - list-style: none; +li, +ul { + list-style: none; } -a, a:active, a:hover, a:link, a:visited { - color: #333; - text-decoration: none!important; +a { + color: #333; + text-decoration: none !important; +} +aactive, +ahover, +alink, +avisited { + color: #333; + text-decoration: none !important; } a img { - border: none; + border: none; } -.blockLink, .btn { - display: block; +.blockLink, +.btn { + display: block; } -.itemCb, .searchForm__ico:focus, .searchForm__key:focus { - outline: 0; +.itemCb, +.searchForm__icofocus, +.searchForm__keyfocus { + outline: 0; } .clearfix { - zoom: 1; + zoom: 1; } -.clearfix:after { - content: ""; - display: block; - clear: both; +.clearfixafter { + content: ""; + display: block; + clear: both; } .center { - text-align: center !important; + text-align: center !important; } .left { - text-align: left !important; + text-align: left !important; } select { - font-size: 16px; + font-size: 16px; } -.itemCb, select { - border: 1px solid #ddd; - background-color: #fff; +.itemCb, +select { + border: 1px solid #ddd; + background-color: #fff; } .hide { - display: none !important; + display: none !important; } .itemCb { - border-radius: 4px; + border-radius: 4px; } .itemCb .btn-danger { - background-image: none; - background-color: #E95F5B; - display: block!important; - margin: 20px auto 0; + background-image: none; + background-color: #e95f5b; + display: block !important; + margin: 20px auto 0; } .itemCb #cboxClose { - display: none; + display: none; } .btn { - text-align: center; - appearance: none; - border: none; - border-radius: 12px; - -webkit-appearance: none; - -moz-appearance: none; - cursor: pointer; + 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; - } + .onlySP { + display: none !important; + } } @media screen and (max-width: 1024px) { - .onlyPC { - display: none!important; - } + .onlyPC { + display: none !important; + } } - - - /*==================================================================== .headerFixed ====================================================================*/ .headerFixed { - position: fixed; - z-index: 9960 !important; - height: 56px; - width: 100%; - top: 0; + position: fixed; + z-index: 9960 !important; + height: 56px; + width: 100%; + top: 0; } .headerFixed #baseMenu { - float: right; - padding: 7px 6px 0; + float: right; + padding: 7px 6px 0; } .headerFixed #baseMenu li.base { - margin-right: 10px; - float: left; + margin-right: 10px; + float: left; } .headerFixed #baseMenu li.cart { - float: left; + float: left; } .headerFixed #baseMenu li.cart img { - display: inline-block; - margin: 2px 4px 0 0; + display: inline-block; + margin: 2px 4px 0 0; } .headerFixed #baseMenu 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; + display: table-cell; + background-color: #fff; + border-radius: 25px; + height: 32px; + text-align: center; + width: 32px; + padding: 5px; + vertical-align: middle; } .headerFixed #baseMenu a img { - height: 25px; - width: 25px; - border: none; + height: 25px; + width: 25px; + border: none; } @media screen and (max-width: 1024px) { - .headerFixed { - z-index: 2 !important; - } + .headerFixed { + z-index: 2 !important; + } } - - - /*==================================================================== #searchBox ====================================================================*/ #searchBox { - box-sizing: border-box; - padding: 13px 8px 0 0; - z-index: 100; - float: right; + box-sizing: border-box; + padding: 13px 8px 0 0; + z-index: 100; + float: right; } #searchBox form { - overflow: hidden; + overflow: hidden; } #searchBox 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; + 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"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - -moz-box-shadow: none; - -moz-transition: border linear 0s,box-shadow linear -1s; - -o-transition: border linear 0s,box-shadow linear .0s; +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { + -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; +.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; + border-style: none; + float: left; + padding: 4px 7px; + color: #5e5e5e; + background: rgba(255,255,255,0); + cursor: pointer; + height: 27px; } -#searchBox input::-webkit-input-placeholder { - font-size: 12px; -} -#searchBox input:-moz-placeholder { - font-size: 12px; -} -#searchBox input::-moz-placeholder { - font-size: 12px; -} -#searchBox input:-ms-input-placeholder { - font-size: 12px; +#searchBox input-webkit-input-placeholder, +#searchBox input-moz-placeholder, +#searchBox input-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; - } - #searchBox 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; - } - #searchBox button { - height: 32px; - } - #searchBox input::-webkit-input-placeholder { - padding-top: 1px; - } - #searchBox input:-moz-placeholder { - padding-top: 1px; - } - #searchBox input::-moz-placeholder { - padding-top: 1px; - } - #searchBox input:-ms-input-placeholder { - padding-top: 1px; - } + #searchBox { + box-sizing: border-box; + padding: 30px 0 20px 15px; + float: none; + border-bottom: 1px solid #fff; + margin: 0; + } + #searchBox 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; + } + #searchBox button { + height: 32px; + } + #searchBox input-webkit-input-placeholder, + #searchBox input-moz-placeholder, + #searchBox input-ms-input-placeholder { + padding-top: 1px; + } } - - - /*==================================================================== #spNav ====================================================================*/ @media screen and (max-width: 1024px) { - #spNav__btn, #spNav__btn span { - position: absolute; - } - #spNav__btn { - left: 20px; - top: 19px; - height: 17px; - width: 22px; - position: fixed; - z-index: 2 !important; - cursor: pointer; - } - #spNav__btn span { - background-color: #5e5e5e; - height: 2px; - left: 0; - width: 100%; - border-radius: 25px; - } - #spNav__btn span:nth-of-type(1) { - top: 0; - } - #spNav__btn span:nth-of-type(2) { - top: 7px; - } - #spNav__btn span:nth-of-type(3) { - bottom: 0px; - } - #spNav__btn.active span:nth-of-type(1) { - transform: translateY(9px) rotate(-315deg); - } - #spNav__btn.active span:nth-of-type(2) { - opacity: 0; - } - #spNav__btn.active span:nth-of-type(3) { - transform: translateY(-9px) rotate(315deg); - } + #spNav__btn { + position: absolute; + left: 20px; + top: 19px; + height: 17px; + width: 22px; + position: fixed; + z-index: 2 !important; + cursor: pointer; + } + #spNav__btn span { + position: absolute; + background-color: #5e5e5e; + height: 2px; + left: 0; + width: 100%; + border-radius: 25px; + } + #spNav__btn spannth-of-type(1) { + top: 0; + } + #spNav__btn spannth-of-type(2) { + top: 7px; + } + #spNav__btn spannth-of-type(3) { + bottom: 0px; + } + #spNav__btn.active spannth-of-type(1) { + transform: translateY(9px) rotate(-315deg); + } + #spNav__btn.active spannth-of-type(2) { + opacity: 0; + } + #spNav__btn.active spannth-of-type(3) { + transform: translateY(-9px) rotate(315deg); + } } - - - /*==================================================================== .topHeaderBlock ====================================================================*/ .topHeaderBlock { - height: auto; - position: relative; - width: 100%; - padding: 100px 0 60px; + height: auto; + position: relative; + width: 100%; + padding: 100px 0 60px; } .topHeader__wrapper { - margin: 0 auto; - max-width: 1140px; - width: 100%; - display: table; + margin: 0 auto; + max-width: 1140px; + width: 100%; + display: table; } .topHeader__wrapper.full { - max-width: 1140px; + max-width: 1140px; } -.shopName__link { - display: inline-block; -} -.shopLogo>span { - display: inline-block; +.shopName__link, +.shopLogo > span { + display: inline-block; } .shopName-center { - text-align: center; + text-align: center; } .shopName-float { - text-align: left; - vertical-align: bottom; - display: table-cell; - line-height: 0; + 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; +.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; +.shopLogo > span .logoText { + word-break: break-all; + letter-spacing: 0.25em; + line-height: 1; } @media screen and (max-width: 1210px) { - .topHeader__wrapper.w1140, .topHeader__wrapper.full { - max-width: 94% !important; - } + .topHeader__wrapper.w1140, + .topHeader__wrapper.full { + max-width: 94% !important; + } } @media screen and (max-width: 1140px) { - .topHeader__wrapper.w1070 { - max-width: 94% !important; - } + .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; - } + .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: 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; - } +@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; + margin: 50px 0 0 0; } .sp_menu-float { - vertical-align: bottom; - display: table-cell; - text-align: right; + vertical-align: bottom; + display: table-cell; + text-align: right; } .sp_menu-float .menus { - padding: 0; + padding: 0; } .sp_menu-center .menus { - text-align: center; + text-align: center; } .menuList { - letter-spacing: 0.1em; + letter-spacing: 0.1em; } .menuList__item { - display: inline-block; - text-align: center; + display: inline-block; + text-align: center; } -.menuList__item a:hover, .mainHeaderNavColor:hover { - opacity: .5; +.menuList__item ahover { + opacity: 0.5; } -.menuList__item:not(:last-child) { - margin-right: 30px; +.mainHeaderNavColorhover { + opacity: 0.5; +} +.menuList__itemnot(last-child) { + margin-right: 30px; } .menuList__item .current { - font-weight: bold; + font-weight: bold; } #cateMenu { - position: relative; + position: relative; } .category-list { - display: none; + 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; + 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; + display: block; + cursor: pointer; + color: #a2a2a2; } .category__list { - font-size: 14px; - text-align: left; + font-size: 14px; + text-align: left; } .category__list--medium { - font-size: 12px; + font-size: 12px; } .category__list--medium .category__item { - padding: 0 0 0 12px; - border-bottom: none; + padding: 0 0 0 12px; + border-bottom: none; } .category__item { - line-height: 2; + line-height: 2; } .category__item a { - box-sizing: border-box; - display: block; - width: 100%; - height: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -#appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a:active { - color: #ffffff; +#appsItemCategoryTag .category__item a { + color: #fff; +} +#appsItemCategoryTag .category__item alink, +#appsItemCategoryTag .category__item avisited, +#appsItemCategoryTag .category__item ahover, +#appsItemCategoryTag .category__item aactive { + color: #fff; } .on .category-list.w250 { - left: -85px; + left: -85px; } .on .category-list.w250 #appsItemCategoryTag { - width: 250px; - height: 250px; - border-radius: 250px; - padding: 60px; - box-sizing: border-box; + width: 250px; + height: 250px; + border-radius: 250px; + padding: 60px; + box-sizing: border-box; } .on .category-list.w300 { - left: -105px; + left: -105px; } .on .category-list.w300 #appsItemCategoryTag { - width: 300px; - height: 300px; - border-radius: 300px; - padding: 60px; - box-sizing: border-box; + width: 300px; + height: 300px; + border-radius: 300px; + padding: 60px; + box-sizing: border-box; } .on .category-list.wSikaku { - left: -25px; + left: -25px; } .on .category-list.wSikaku #appsItemCategoryTag { - width: auto; - height: auto; - padding: 20px; - box-sizing: border-box; + 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, .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; - } - .mainHeaderNavColor { - 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; - } - .category__item:last-child { - border-bottom: none; - } - .category__list--medium .category__item { - border-bottom: none; - padding: 12px 0 0px 12px; - } - .on .category-list.w250, .on .category-list.w300, .on .category-list.wSikaku { - left: 0; - } - .on .category-list.w250 #appsItemCategoryTag, .on .category-list.w300 #appsItemCategoryTag, .on .category-list.wSikaku #appsItemCategoryTag { - width: 100%; - height: auto; - border-radius: 0; - padding: 0; - background-color: #fbfbfb !important; - } - #appsItemCategoryTag .category__item a, #appsItemCategoryTag .category__item a:link, #appsItemCategoryTag .category__item a:visited, #appsItemCategoryTag .category__item a:hover, #appsItemCategoryTag .category__item a: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 - } + #mask { + display: none; + opacity: 0.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: 0.5s; + padding: 0; + } + .menus_open { + -webkit-transform: translateZ(0); + transition: 0.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; + } + .category__itemlast-child { + border-bottom: none; + } + .category__list--medium .category__item { + border-bottom: none; + padding: 12px 0 0px 12px; + } + .on .category-list.w250, + .on .category-list.w300, + .on .category-list.wSikaku { + left: 0; + } + .on .category-list.w250 #appsItemCategoryTag, + .on .category-list.w300 #appsItemCategoryTag, + .on .category-list.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; + } + #appsItemCategoryTag .category__item alink, + #appsItemCategoryTag .category__item avisited, + #appsItemCategoryTag .category__item ahover, + #appsItemCategoryTag .category__item aactive { + 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; - } +@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; + border-bottom: 1px dotted #a2a2a2; } @media screen and (max-width: 1024px) { - .menuList__item a.offiS { - font-style: italic; - border-bottom: 0; - } + .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; + 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; + padding: 0; } - - - /*==================================================================== .mainImage ====================================================================*/ .mainImage { - max-width: 1140px; - margin: 0 auto; - padding: 0 0 40px; - display: table; - width: 100%; - position: relative; + max-width: 1140px; + margin: 0 auto; + padding: 0 0 40px; + display: table; + width: 100%; + position: relative; } -.mainImage a img:hover { - opacity: .8; +.mainImage a imghover { + opacity: 0.8; } @media screen and (max-width: 1140px) { - .mainImage { - max-width: 100%; - } + .mainImage { + max-width: 100%; + } } @media screen and (max-width: 518px) { - .mainImage { - max-width: 100%; - padding: 0 0 30px; - } + .mainImage { + max-width: 100%; + padding: 0 0 30px; + } } - - - /*==================================================================== .headerWrapper ====================================================================*/ .headerWrapper { - position: relative; - max-width: 1140px; - margin: 0 auto; - clear: both; - min-height: 100px; + 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; + min-height: 100px; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + background-position: center center; } .contentHeader.loaded { - opacity: 1; - transition: opacity .8s; + opacity: 1; + transition: opacity 0.8s; } - - - /*==================================================================== .memoBlock ====================================================================*/ .memoBlock { - margin: 0 auto; - padding: 0 20px 40px; - + margin: 0 auto; + padding: 0 20px 40px; } .infoBlock { - padding: 10px 20px; - text-align: center; - max-width: 1070px; - margin: 0 auto; + 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__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: 2em; + margin: 0 auto; } -.infoBlock__content, .infoBlock__contentSub { - font-size: 13px; - letter-spacing: 0.12em; - line-height: 2.0em; +.infoBlock__content, +.infoBlock__contentSub { + font-size: 13px; + letter-spacing: 0.12em; + line-height: 2em; } -.memoBlock.left .infoBlock__content, .memoBlock.left .infoBlock__contentSub { - max-width: 800px; - margin: 0 auto; +.memoBlock.left .infoBlock__content, +.memoBlock.left .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; + 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; + margin: 10px 0; } .infoBlock__content02 { - font-size: 13px; - letter-spacing: 0.15em; - line-height: 2.0; - margin: 10px 0; + font-size: 13px; + letter-spacing: 0.15em; + line-height: 2; + margin: 10px 0; } @media screen and (max-width: 518px) { - .memoBlock { - padding: 0 20px 30px; - } + .memoBlock { + padding: 0 20px 30px; + } } - - - /*==================================================================== #movie ====================================================================*/ -:focus { - outline: none; +focus { + outline: none; } .movie { - margin: 0 0 20px; + margin: 0 0 20px; } .movie 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; + display: inline-block; + padding: 10px 70px; + border: 1px solid #333; + background: rgba(255,255,255,0.5); + text-align: center; + line-height: 1; + transition: 0.3s; + border-radius: 0px; + cursor: pointer; + white-space: nowrap; + font-size: 14px; } -.movie a.btn:hover { - border: 1px solid rgba(0,0,0,.1); - background: rgba(255,255,255,.5); +.movie a.btnhover { + border: 1px solid rgba(0,0,0,0.1); + background: rgba(255,255,255,0.5); } -p.movie .waku { -} +p.movie .waku, #movie { - margin: 0 auto; - padding: 0 20px 40px; - text-align: center; + margin: 0 auto; + padding: 0 20px 40px; + text-align: center; } +p.movie .waku h3, #movie 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; + 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: 2em; + margin: 0 auto; } +p.movie .waku .sub, #movie .sub { - padding: 0 0 12px; - line-height: 2.0em; + padding: 0 0 12px; + line-height: 2em; } +p.movie .waku .thumb, #movie .thumb { - width: 373px; - margin: 0 auto; + width: 373px; + margin: 0 auto; } +p.movie .waku .thumb img, #movie .thumb img { - width: 100%; + width: 100%; } -#movie .thumb a:hover img { - opacity: 0.8; - -moz-opacity: 0.8; - -webkit-opacity: 0.8; +p.movie .waku .thumb ahover img, +#movie .thumb ahover img { + opacity: 0.8; + -moz-opacity: 0.8; + -webkit-opacity: 0.8; } @media screen and (max-width: 518px) { - #movie { - padding: 0 20px 30px; - } + #movie { + padding: 0 20px 30px; + } } -@media screen and (max-width : 400px) { - #movie .thumb { - width: 100%; - text-align: center; - } - #movie .thumb img { - width: 90%; - } +@media screen and (max-width: 400px) { + #movie .thumb { + width: 100%; + text-align: center; + } + #movie .thumb img { + width: 90%; + } } -@media screen and (max-width : 300px) { - .movie a.btn { - padding: 10px 10px; - width: 100%; - box-sizing: border-box; - } +@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; + 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%; - } + .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; - } + .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; + max-width: 100%; + margin: 0 auto; + width: 100%; + background-color: #fff; } .mainBLockWrapper.staticWrapper { - max-width: 970px; - margin: 0 auto 100px; - display: block; + max-width: 970px; + margin: 0 auto 100px; + display: block; } .mainBLockWrapper.staticWrapper.full { - max-width: 1140px !important; + 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; - } - .mainBLockWrapper.staticWrapper.full { - - max-width: 94% !important; - } + .mainBLockWrapper.staticWrapper.w1140 { + max-width: 94% !important; + margin: 0 auto 50px; + box-sizing: border-box; + } + .mainBLockWrapper.staticWrapper.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; - } + .mainBLockWrapper.staticWrapper.w1070 { + max-width: 94% !important; + margin: 0 auto 50px; + box-sizing: border-box; + } } - - - /*==================================================================== .searchResult ====================================================================*/ .searchResult { - padding: 40px 10px; + padding: 40px 10px; + text-align: center; +} +@media screen and (max-width: 1070px) { + .searchResult { + padding: 20px 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; + padding: 40px 10px; + text-align: center; } .itemCat .breadcrumb__child { - display: inline; - font-size: 11px; + display: inline; + font-size: 11px; } -.itemCat .breadcrumb__child:not(:last-child):after { - content: " > "; - padding: 0 5px; +.itemCat .breadcrumb__childnot(last-child)after { + content: " > "; + padding: 0 5px; } .itemCat .childrenList { - margin-top: 4px; + margin-top: 4px; } .itemCat .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; + 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; - } +@media screen and (max-width: 1024px) { + .itemCat { + padding: 20px 10px 30px; + } } - - - /*==================================================================== .itemBlock ====================================================================*/ .itemBlock { - max-width: 1070px; - margin: 20px auto 100px; - display: block; + 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; + 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: 2em; } .itemList { - padding: 0; - list-style: none; - width: 100%; - display: flex; - flex-wrap: wrap; + 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; + 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; + border-radius: 154px; + overflow: hidden; + vertical-align: middle; + width: 280px; + height: 280px; + position: relative; + margin: 0 auto; } .itemList__imgbox img { - object-fit: cover; - object-position: center center; - font-family: 'object-fit: cover; object-position: center center;'; - width: 100%; - height: 100%; + object-fit: cover; + object-position: center center; + font-family: 'object-fit cover; object-position center center;'; + width: 100%; + height: 100%; } -.itemList__imgbox img:hover { - opacity: .5; +.itemList__imgbox imghover { + opacity: 0.5; } .itemInfo { - padding: 20px 20px; - text-align: center; + 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; + 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; + padding-top: 8px; } .itemInfo__price span { - display: block; - font-size: 14px; - color: #999; + display: block; + font-size: 14px; + color: #999; } -@media screen and (max-width: 1300px){ - .itemList__imgbox { - width: 260px; - height: 260px; - } +@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: 1200px) { + .itemList__imgbox { + width: 240px; + height: 240px; + } } -@media screen and (max-width: 1100px){ - .itemList__imgbox { - width: 220px; - height: 220px; - } +@media screen and (max-width: 1100px) { + .itemList__imgbox { + width: 220px; + height: 220px; + } } @media screen and (max-width: 1024px) { - .itemBlock { - margin: 0px auto 50px; - } + .itemBlock { + margin: 0px auto 50px; + } } -@media screen and (max-width: 1000px){ - .itemList__imgbox { - width: 210px; - height: 210px; - } +@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; - } + .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: 900px) { + .itemList__imgbox { + width: 200px; + height: 200px; + } } -@media screen and (max-width: 800px){ - .itemList__imgbox { - width: 180px; - height: 180px; - } +@media screen and (max-width: 800px) { + .itemList__imgbox { + width: 180px; + height: 180px; + } } @media screen and (max-width: 700px) { - .itemList__imgbox { - width: 160px; - height: 160px; - } + .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; - } + .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; - } + .itemList__imgbox { + width: 160px; + height: 160px; + } } @media screen and (max-width: 440px) { - .itemList__item { - padding: 20px 0 5px; - } - .itemList__imgbox { - width: 150px; - height: 150px; - } + .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; - } + .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; - } + .itemList__imgbox { + width: 170px; + height: 170px; + } } @media screen and (max-width: 200px) { - .itemList__imgbox { - width: 100px; - height: 100px; - } + .itemList__imgbox { + width: 100px; + height: 100px; + } } - - - /*==================================================================== .itemList__item.soldout ====================================================================*/ .itemList__item.soldout .itemInfo__price span { - text-decoration: line-through; - line-height: 15px; + text-decoration: line-through; + line-height: 15px; } -.itemList__item.soldout .itemInfo__price: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; +.itemList__item.soldout .itemInfo__pricebefore { + content: "SOLD OUT"; + color: #fff; + 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; +} +.itemList__item .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__imgbox:hover { - position: relative; - } - .itemList__item.soldout .itemList__imgbox:hover img { - opacity: 0.3; - } - .itemList__item.soldout .itemList__imgbox:hover: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.soldout .itemList__imgboxhover { + position: relative; + } + .itemList__item.soldout .itemList__imgboxhover img { + opacity: 0.3; + } + .itemList__item.soldout .itemList__imgboxhoverafter { + color: #000; + 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 ====================================================================*/ -.itemList__item .label_image { - position: absolute; - width: 65px; - z-index: 2; - top: 24px; - left: 0; - right: 0; - margin: auto; -} @media screen and (max-width: 1000px) { - .itemList__item .label_image { - width: 50px; - z-index: 1; - top: 26px; - } + .itemList__item .label_image { + width: 50px; + z-index: 1; + top: 26px; + } } @media screen and (max-width: 440px) { - .itemList__item .label_image { - top: 11px; - } + .itemList__item .label_image { + top: 11px; + } } @media screen and (max-width: 360px) { - .itemList__item .label_image { - top: 26px; - } + .itemList__item .label_image { + top: 26px; + } } - - - /*==================================================================== .item ====================================================================*/ .itemPhotoBlock { - position: relative; - margin-right: 20px; + position: relative; + margin-right: 20px; } .itemPhotoBlock .label_image { - position: absolute; - left: -12px; - top: -12px; - width: 70px; - z-index: 52; + position: absolute; + left: -12px; + top: -12px; + width: 70px; + z-index: 52; } .itemSlideWrapper { - margin: 0 auto; - position: relative; + margin: 0 auto; + position: relative; } .itemSlideWrapper .bx-wrapper { - margin-bottom: 30px; + margin-bottom: 30px; } .itemSlideWrapper .bx-wrapper .bx-viewport { - background-color: transparent; - border: none; - box-shadow: none; - left: 0; + background-color: transparent; + border: none; + box-shadow: none; + left: 0; } .itemSlideWrapper .mainImg__item { - text-align: center; + text-align: center; } .itemSlideWrapper .mainImg__item img { - width: 100%; + width: 100%; } #itemSlidePager { - text-align: center; - margin: 0; - padding: 0 0 30px; + text-align: center; + margin: 0; + padding: 0 0 30px; } #itemSlidePager.noslide { - padding-top: 20px; + padding-top: 20px; } #itemSlidePager a { - display: inline-block; - opacity: .7; - margin: 0 10px 10px 0; - padding: 0; - text-align: center; + display: inline-block; + opacity: 0.7; + margin: 0 10px 10px 0; + padding: 0; + text-align: center; } #itemSlidePager a.active { - opacity: 1; + opacity: 1; } #itemSlidePager a img { - max-width: 80px; - max-height: 80px; + max-width: 80px; + max-height: 80px; } .itemInfoBlock .itemInfoWrapper { - padding: 0 0 25px; + padding: 0 0 25px; } .itemInfoBlock .itemDetail__title { - font-size: 16px; - font-weight: normal; - margin-bottom: 15px; + font-size: 16px; + font-weight: normal; + margin-bottom: 15px; } .itemInfoBlock .itemDetail__price { - font-size: 16px; - margin-bottom: 25px; + font-size: 16px; + margin-bottom: 25px; } .itemInfoBlock #itemAttention { - font-size: 11px; - margin-bottom: 20px; + font-size: 11px; + margin-bottom: 20px; } #postageOpen { - color: #1d96f7 !important; + color: #1d96f7 !important; } .itemInfoBlock #itemSelect { - margin: 40px 0 20px; + margin: 40px 0 20px; } -.itemInfoBlock #itemSelect>div { - margin: 0 0 10px; +.itemInfoBlock #itemSelect > div { + margin: 0 0 10px; } - .itemInfoBlock #itemSelect label { - display: inline-block; - line-height: 30px; - width: 50px; + display: inline-block; + line-height: 30px; + width: 50px; } .itemInfoBlock #itemSelect select { - height: 30px; - width: 150px; - cursor: pointer; + height: 30px; + width: 150px; + cursor: pointer; } .itemInfoBlock .addCartBtn { - background-color: #ff7d7d; - color: #fff; - font-size: 16px; - line-height: 45px; - width: 100%; + background-color: #ff7d7d; + color: #fff; + font-size: 16px; + line-height: 45px; + width: 100%; } .itemInfoBlock .addCartBtn.soldout { - background-color: #a2a2a2; - color: #ffffff; - cursor: default; + background-color: #a2a2a2; + color: #fff; + cursor: default; } .itemInfoBlock .itemExplain { - border-top: 1px dotted #ddd; - margin: 30px 0; - padding: 30px 0; - word-break: break-all; + border-top: 1px dotted #ddd; + margin: 30px 0; + padding: 30px 0; + word-break: break-all; } .itemInfoBlock #widget { - margin: 0px 0 0 10px!important; + margin: 0px 0 0 10px !important; } .itemInfoBlock .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; + 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; } .itemInfoBlock .itemSocial { - margin-top: 20px; - text-align: center; + margin-top: 20px; + text-align: center; } -.itemInfoBlock .itemSocial>div { - display: inline-block; - vertical-align: top; +.itemInfoBlock .itemSocial > div { + display: inline-block; + vertical-align: top; } -.itemInfoBlock .itemSocial>div:first-child { - margin: 0 10px 10px 0; +.itemInfoBlock .itemSocial > divfirst-child { + margin: 0 10px 10px 0; } .itemInfoBlock .illegalReportBlock { - border-top: 1px dotted #ddd; - font-size: 11px; - margin-top: 30px; - padding-top: 20px; - text-align: right; + border-top: 1px dotted #ddd; + font-size: 11px; + margin-top: 30px; + padding-top: 20px; + text-align: right; } .itemDetailCol { - width: 50%; - float: left; + width: 50%; + float: left; } -.itemDetailCol:last-child { - width: 50%; - float: left; +.itemDetailCollast-child { + width: 50%; + float: left; } .itemPhotoBlock { - margin: 30px 0 30px 30px; + margin: 30px 0 30px 30px; } .itemInfoBlock { - margin: 30px; + margin: 30px; } -@media screen and (max-width:1300px) { - .itemSlideWrapper { - padding: 0; - } +@media screen and (max-width: 1300px) { + .itemSlideWrapper { + padding: 0; + } } @media screen and (max-width: 1024px) { - #itemSlidePager { - padding: 5px 0 10px; - } - #itemSlidePager a { - } - #itemSlidePager a:last-child { - margin-right: 0; - } - #itemSlidePager a.active { - } - #itemSlidePager a 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; - } + #itemSlidePager { + padding: 5px 0 10px; + } + #itemSlidePager alast-child { + margin-right: 0; + } + #itemSlidePager a.active, + #itemSlidePager a 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; - } - .itemSlideWrapper .mainImg__item img { - border-radius: 0; - margin: 0 auto; - width: auto; - max-height: 640px; - max-width: 100%; - } + .itemSlideWrapper { + padding: 0; + } + .itemSlideWrapper .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; - } - .itemDetailCol:last-child { - margin: 0 auto; - width: 100%; - float: none; - } - .itemPhotoBlock { - margin: 0; - } - .itemInfoBlock { - margin: 0; - } + .itemBLock { + padding: 15px 15px; + } + .itemDetailCol { + width: 100%; + float: none; + margin: 0 0 10px; + } + .itemDetailCollast-child { + margin: 0 auto; + width: 100%; + float: none; + } + .itemPhotoBlock, + .itemInfoBlock { + margin: 0; + } } - - - /*==================================================================== .staticContainer ====================================================================*/ .staticContainer { - padding: 30px 60px; + padding: 30px 60px; } @media screen and (max-width: 1024px) { - .staticContainer { - padding: 30px 20px; - } + .staticContainer { + padding: 30px 20px; + } } - - - /*==================================================================== .sBlock ====================================================================*/ -.sBlock h1, .sBlock 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; +.sBlock h1, +.sBlock 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; } .sBlock p { - font-size: 13px; - line-height: 2.0; - word-wrap: break-word; + font-size: 13px; + line-height: 2; + word-wrap: break-word; } .sBlock .inquirySection p { - font-weight: 700; - text-align: center; - margin: 50px 0 30px; + font-weight: 700; + text-align: center; + margin: 50px 0 30px; } .sBlock .inquirySection form dl { - margin: 0 auto; - width: 80%; + margin: 0 auto; + width: 80%; } .sBlock .inquirySection form dt { - margin: 0 0 10px + margin: 0 0 10px; } .sBlock .inquirySection form span { - color: #E95F5B; - font-size: 12px; + color: #e95f5b; + font-size: 12px; } -.sBlock .inquirySection form span:before { - content: ' '; +.sBlock .inquirySection form spanbefore { + content: ' '; } .sBlock .inquirySection form dd { - margin: 0 0 30px; + margin: 0 0 30px; } -.sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { - border: 1px solid #ddd; - border-radius: 3px; - height: 40px; - padding: 0 2%; - width: 96%; +.sBlock .inquirySection form dd input { + border: 1px solid #ddd; + border-radius: 3px; + height: 40px; + padding: 0 2%; + width: 96%; } .sBlock .inquirySection form dd textarea { - height: 70px; - padding: 2%; + border: 1px solid #ddd; + border-radius: 3px; + height: 40px; + padding: 0 2%; + width: 96%; + height: 70px; + padding: 2%; } .sBlock .inquirySection form .control-panel { - padding: 30px 0 10px; - text-align: center; + padding: 30px 0 10px; + text-align: center; } .sBlock .inquirySection form .control-panel 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%; + -webkit-appearance: button; + background-color: #666; + border: none; + border-radius: 5px; + color: #fff; + line-height: 40px; + display: inline-block; + font-size: 16px; + width: 60%; } .sBlock .inquirySection#inquiryConfirmSection dd { - background-color: #f4f4f4; - border-radius: 3px; - padding: 15px 10px; + background-color: #f4f4f4; + border-radius: 3px; + padding: 15px 10px; } -.sBlock .inquirySection#inquiryCompleteSection>p { - padding: 40px 0 80px; +.sBlock .inquirySection#inquiryCompleteSection > p { + padding: 40px 0 80px; } -.sBlock .inquirySection#inquiryCompleteSection>a { - display: block; - margin: 50px 0 0; - text-align: center; +.sBlock .inquirySection#inquiryCompleteSection > a { + display: block; + margin: 50px 0 0; + text-align: center; +} +.sBlock #law h3 { + margin-top: 20px; + font-size: 14px; +} +.sBlock #privacy h3 { + margin-bottom: 20px; +} +.sBlock #privacy dl dt { + font-weight: 700; + margin: 0 0 5px; +} +.sBlock #privacy dl dd { + margin: 0 0 15px; +} +.sBlock.blogBlock .blog_title h2 { + word-wrap: break-word; + font-weight: normal; + border-bottom: none; + font-size: 20px; + letter-spacing: 0.1em; + line-height: 2 !important; + margin: 0; + padding-bottom: 10px; + text-align: left; } @media screen and (max-width: 1024px) { - .sBlock h1, .sBlock h2 { - font-size: 18px; - margin: 0 0 30px; - padding-bottom: 20px; - } - .sBlock .inquirySection form dl { - width: 94%; - } - .sBlock .inquirySection form .control-panel { - padding: 10px 0; - } - .sBlock .inquirySection#inquiryCompleteSection>a { - text-align: center; - } - .sBlock .inquirySection form dd input, .sBlock .inquirySection form dd textarea { - font-size: 16px; - -webkit-appearance: none; - } + .sBlock h1, + .sBlock h2 { + font-size: 18px; + margin: 0 0 30px; + padding-bottom: 20px; + } + .sBlock .inquirySection form dl { + width: 94%; + } + .sBlock .inquirySection form .control-panel { + padding: 10px 0; + } + .sBlock .inquirySection#inquiryCompleteSection > a { + text-align: center; + } + .sBlock .inquirySection form dd input, + .sBlock .inquirySection form dd textarea { + font-size: 16px; + -webkit-appearance: none; + } } - - - /*==================================================================== #law, #privacy ====================================================================*/ -.sBlock #law h3 { - margin-top: 20px; - font-size: 14px; -} -.sBlock #privacy h3 { - margin-bottom: 20px; -} -.sBlock #privacy dl dt { - font-weight: 700; - margin: 0 0 5px; -} -.sBlock #privacy dl dd { - margin: 0 0 15px; -} - - - /*==================================================================== .blog ====================================================================*/ -.sBlock.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; -} .main #about.blogListMain > .blog_inner { - padding: 0 0 40px 0 !important; - margin: 0 auto 40px; + padding: 0 0 40px 0 !important; + margin: 0 auto 40px; } .main #about.blogDetail > .blog_inner { - padding: 0 0 40px !important; + padding: 0 0 40px !important; } -.main #about.blogListMain .blog_publish { - margin: 0 0 20px !important; -} +.main #about.blogListMain .blog_publish, .main #about.blogDetail .blog_publish { - margin: 0 0 20px !important; + margin: 0 0 20px !important; } -.main #about.blogListMain .publish_date, .main #about.blogDetail .publish_date { - color: #999; - font-size: 11px !important; - margin: 0 !important; +.main #about.blogListMain .publish_date, +.main #about.blogDetail .publish_date { + color: #999; + font-size: 11px !important; + margin: 0 !important; } .main #about > .blog_inner .blog_contents { - line-height: 2.0; - height: auto !important; + line-height: 2; + height: auto !important; } .main #about .blog_contents img { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } .main #about.blogListMain .read_more { - text-align: center; - position: static !important; - padding-top: 25px !important; + text-align: center; + position: static !important; + padding-top: 25px !important; } .main #about.blogListMain .read_more 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; + 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; + margin: 0 0 16px; } .sBlock.blogBlock .blog_inner .blog_head_image img { - max-width: 100%; + max-width: 100%; } .sBlock.blogBlock .blog_inner .social ul { - text-align: center; + text-align: center; } .sBlock.blogBlock .blog_inner .social li { - display: inline-block; - margin-right: 8px; + display: inline-block; + margin-right: 8px; } .paginate li { - line-height: 10px !important; + line-height: 10px !important; } -@media screen and (max-width:1024px) { - .sBlock.blogBlock .blog_title h2 { - font-size: 18px; - } +@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: 650px) { + .youtube, + .vimeo { + width: 100%; + height: 22em; + } } -@media screen and (max-width:414px) { - .youtube, .vimeo { - height: 15em; - } +@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: 375px) { + .youtube, + .vimeo { + height: 13em; + } } -@media screen and (max-width:320px) { - .youtube, .vimeo { - height: 12em; - } +@media screen and (max-width: 320px) { + .youtube, + .vimeo { + height: 12em; + } } - - - /*==================================================================== .about ====================================================================*/ .aboutImage { - text-align: center; - max-width: 1140px; - margin: 0 auto; + text-align: center; + max-width: 1140px; + margin: 0 auto; } .aboutImage.full { - max-width: 1140px; + max-width: 1140px; } .aboutImage img { - width: 100%; - vertical-align: top; + width: 100%; + vertical-align: top; } .aboutBlock p { - text-align: center; + text-align: center; } -.aboutBlock a, .aboutBlock a:active, .aboutBlock a:hover, .aboutBlock a:link, .aboutBlock a:visited { - border-bottom: 1px dotted #a2a2a2!important; +.aboutBlock a { + border-bottom: 1px dotted #a2a2a2 !important; +} +.aboutBlock aactive, +.aboutBlock ahover, +.aboutBlock alink, +.aboutBlock avisited { + border-bottom: 1px dotted #a2a2a2 !important; } @media screen and (max-width: 970px) { - .aboutImage.full { - max-width: 100%; - } - .aboutImage { - max-width: 100%; - } - .aboutImage img { - width: 100%; - } + .aboutImage { + max-width: 100%; + } + .aboutImage.full { + max-width: 100%; + } + .aboutImage img { + width: 100%; + } } - - - /*==================================================================== .shopSNS ====================================================================*/ .shopSNS { - padding: 20px 0 30px; + padding: 20px 0 30px; } .shopSNSList { - text-align: center; + text-align: center; } .shopSNSList__item { - display: inline-block; - margin: 0 4px; + 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; + 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; + color: #fff; + font-size: 18px; } - - /*==================================================================== .footer ====================================================================*/ .footer { - margin-top: 5%; - width: 100%; + margin-top: 5%; + width: 100%; } .footer .footerMenu { - display: inline-block; - font-size: 12px; - text-align: center; + display: inline-block; + font-size: 12px; + text-align: center; } .footer .footerMenu__item { - display: inline-block; - margin: 10px 15px 0; + display: inline-block; + margin: 10px 15px 0; } -.footer .footerMenu__item #i18>div, .footerWrapper { - position: relative; -} -.footer .footerMenu__item #i18 .currency, .footer .footerMenu__item #i18 .lang { - display: inline-block; -} -.footer .footerMenu__item #i18 select { - border: 1px solid #ddd; - cursor: pointer; - font-size: 11px; - min-width: inherit; - background-color: #fff; - padding: 4px 10px; - margin: 0; -} -.footer .footerSocial>div { - display: inline-block; - margin: 0 5px; - vertical-align: top; -} -.footer .copy { - color: #a2a2a2; - font-size: 12px; - margin-top: 40px; - vertical-align: bottom; - text-align: center; +.footer .footerMenu__item #i18 > div { + position: relative; } .footerWrapper { - height: auto; - padding: 30px 20px; - max-width: 1070px; - margin: 0 auto; + position: relative; +} +.footer .footerMenu__item #i18 .currency, +.footer .footerMenu__item #i18 .lang { + display: inline-block; +} +.footer .footerMenu__item #i18 select { + border: 1px solid #ddd; + cursor: pointer; + font-size: 11px; + min-width: inherit; + background-color: #fff; + padding: 4px 10px; + margin: 0; +} +.footer .footerSocial > div { + display: inline-block; + margin: 0 5px; + vertical-align: top; +} +.footer .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%; + width: 100%; } .footer .rBlock { - display: inline-block; - width: 100%; + display: inline-block; + width: 100%; } .footerSocial { - padding: 20px 0 0; - text-align: center; + padding: 20px 0 0; + text-align: center; } @media screen and (max-width: 1024px) { - .footer .footerMenu__item { - display: block; - text-align: center; - margin: 0; - } - .footer .footerMenu__item:not(:last-child) { - margin: 0 0 15px; - } - #i18 .controlGroup { - display: table; - margin: 0 auto 10px; - } - #i18 .controlLabel, #i18 .controls { - display: table-cell; - } - #i18 .controlLabel { - padding: 0 20px 0 0; - } - #i18 .input.select, .catContainer { - position: relative; - } + .footer .footerMenu__item { + display: block; + text-align: center; + margin: 0; + } + .footer .footerMenu__itemnot(last-child) { + margin: 0 0 15px; + } + #i18 .controlGroup { + display: table; + margin: 0 auto 10px; + } + #i18 .controlLabel, + #i18 .controls { + display: table-cell; + } + #i18 .controlLabel { + padding: 0 20px 0 0; + } + #i18 .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; + display: block; + position: fixed; + bottom: 30px; + right: 30px; + width: 35px; + z-index: 50; + margin: 0px; } #page-top img { - width: 100%; - border: none; + width: 100%; + border: none; } - - - +/*==================================================================== +.msg_startButton +====================================================================*/ +.msg_startButton { + background-color: #666 !important; +} +.msg_startButton span { + color: #fff !important; +} /*==================================================================== .full .w1140 .w1070 ====================================================================*/ .full { - max-width: 100%; + max-width: 100%; } -.itemBlock.full, .memoBlock.full, .whiteArea-item.full { - max-width: 1140px !important; -} +.itemBlock.full, +.memoBlock.full, +.whiteArea-item.full, .w1140 { - max-width: 1140px !important; + max-width: 1140px !important; } .w1070 { - max-width: 1070px !important; + max-width: 1070px !important; } @media screen and (max-width: 1140px) { - .full { - max-width: 100%; - } - .itemBlock.full, .memoBlock.full, .whiteArea-item.full { - max-width: 100% !important; - } - .w1140 { - max-width: 100% !important; - } + .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; - } + .w1070 { + max-width: 100% !important; + } } - - - /*==================================================================== design Layout ====================================================================*/ -.Roboto { -} +.Roboto, .MSMincho { - font-family: "MS P明朝", MS PMincho,"ヒラギノ明朝 Pro W3", Hiragino Mincho Pro, serif; - letter-spacing: 0.06em; - line-height: 1.5; + font-family: "MS P明朝", 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 Pゴシック", MS PGothic,"sans-serif"; - letter-spacing: 0.06em; + font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Osaka, "MS Pゴシック", MS PGothic, "sans-serif"; + letter-spacing: 0.06em; } .MSGothic { - font-family: "MS ゴシック", MS Gothic,"Osaka−等幅","Osaka-mono", monospace; - letter-spacing: 0.06em; - line-height: 1.5; + font-family: "MS ゴシック", MS Gothic, "Osaka−等幅", "Osaka-mono", monospace; + letter-spacing: 0.06em; + line-height: 1.5; } -.non { -} +.non, .maru { - background: url(https://basefile.s3.amazonaws.com/125naroom-theshop-jp/58254e3551022/bg-maru.jpg); - background-repeat: repeat; + 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; + 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; + background: url("https//basefile.s3.amazonaws.com/125naroom-theshop-jp/58254e6938581/bg-sima.jpg"); + background-repeat: repeat; } .maruWaku { - border-radius: 154px; + border-radius: 154px; } .sikakuWaku { - border-radius: 0; + border-radius: 0; } -.onT { -} -.onI { - display: none !important; -} +.onT, +.onI, .selonT { - display: none !important; + display: none !important; } -.selonI { -} - - - -/*==================================================================== -sale app -====================================================================*/ +.selonI .itemInfo__price span, .sale .itemInfo__price span { - color: #c70e00; - font-weight: bold; - font-size: 14px; + color: #c70e00; + font-weight: bold; + font-size: 14px; } +.selonI .off-text, .sale .off-text { - border-radius: 2px; - display: inline-block; - padding: 4px 10px; - font-size: 11px; - color: #fff; - margin: 5px 0 0; - background: #c70e00; + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 11px; + color: #fff; + margin: 5px 0 0; + background: #c70e00; } +.selonI .normal-price, .sale .normal-price { - color: #999; - font-size: 11px; + color: #999; + font-size: 11px; } .itemInfoBlock .sale-itemDetail { - margin-bottom: 20px; + margin-bottom: 20px; } .itemInfoBlock .sale-itemDetail .itemDetail__price { - font-size: 26px; - margin-bottom: 0; - color: #c70e00; - font-weight: bold; + font-size: 26px; + margin-bottom: 0; + color: #c70e00; + font-weight: bold; } .itemInfoBlock .sale-itemDetail .off-text { - border-radius: 2px; - display: inline-block; - padding: 4px 10px; - font-size: 12px; - color: #fff; - margin: 0 0 4px; - background: #c70e00; + border-radius: 2px; + display: inline-block; + padding: 4px 10px; + font-size: 12px; + color: #fff; + margin: 0 0 4px; + background: #c70e00; } .itemInfoBlock .sale-itemDetail .normal-price { - color: #999; - font-size: 11px; + 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; + color: #0076d7; + font-size: 13px; + font-weight: bold; + background: #fff; + 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; } .itemList__item .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; + display: flex; + justify-content: center; + align-items: center; + background: #a2a2a2; + border-radius: 2px; + color: #fff; + 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; + color: #fff; + 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; } .itemInfoBlock .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; + color: #fff; + 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; } -.itemInfoBlock .salesPeriod--term, .itemInfoBlock .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; +.itemInfoBlock .salesPeriod--term, +.itemInfoBlock .salesPeriod--willStart { + color: #0076d7; + font-size: 15px; + font-weight: bold; + background: #fff; + 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; } .itemInfoBlock .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; + color: #787878; + font-size: 15px; + font-weight: bold; + background: #fff; + 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; } .itemInfoBlock .purchaseButton__btn { - display: block; - text-align: center; - appearance: none; - border: none; - border-radius: 2px; - -webkit-appearance: none; - -moz-appearance: none; - cursor: pointer; + 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%; } -.itemInfoBlock .purchaseButton__btn { - background-color: #333; - color: #fff; - font-size: 14px; - line-height: 40px; - width: 100%; -} -.itemInfoBlock .purchaseButton__btn:hover { - opacity: 0.7; - transition: all 0.25s ease; - -webkit-transition: all 0.25s ease; +.itemInfoBlock .purchaseButton__btnhover { + opacity: 0.7; + transition: all 0.25s ease; + -webkit-transition: all 0.25s ease; } .itemInfoBlock .purchaseButton__btn.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; + cursor: default; + background: #fff; + border-top: 3px solid #0076d7; + border-bottom: 3px solid #0076d7; + border-radius: 0; + color: #0076d7; + font-weight: bold; } -.itemInfoBlock .purchaseButton__btn.purchaseButton__btn--comingSoonStay:hover { - opacity: 1; +.itemInfoBlock .purchaseButton__btn.purchaseButton__btn--comingSoonStayhover { + opacity: 1; } #salesPeriodModal .salesPeriodModal__btn--submit { - background: #000000 !important; + background: #000 !important; } @media screen and (max-width: 767px) { - .itemInfoBlock .salesPeriod--term { - font-size: 13px; - padding: 15px 7px; - } + .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; + color: #fff; + 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 .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; + color: #0076d7; + font-size: 15px; + font-weight: bold; + background: #fff; + 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; - } -} \ No newline at end of file + .preOrder .preOrder__data { + font-size: 13px; + padding: 15px 7px; + } +} diff --git a/style.styl b/style.styl new file mode 100644 index 0000000..89a22df --- /dev/null +++ b/style.styl @@ -0,0 +1,2570 @@ +@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 + ¬(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 P明朝", 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 Pゴシック", MS PGothic,"sans-serif" + letter-spacing 0.06em + + +.MSGothic + font-family "MS ゴシック", 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 +