@charset "UTF-8"; .shadow{ box-shadow: 0 2px 8px #999; } .al-l{ text-align: left; } .al-r{ text-align: right; } .al-c{ text-align: center; } body { background: #0f1116; margin:0; } body, span, input, select, textarea { color: #555555; font-family: "メイリオ", Meiryo, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 15px; font-weight: 300; } a { color: #2186bf; text-decoration: none; } a:hover,a:active,a:focus{ color: #f60; text-decoration: underline; } p { margin: 0 0 2em 0; line-height: 150%; } .image { border: 0; position: relative; } .image.fit { display: block; } .image.fit img { display: block; width: 100%; } .image.feature { display: block; margin: 0 0 2em 0; } .image.feature img { display: block; width: 100%; } .image.featured { position: static; display: block; margin: 0; } .image.featured img { display: block; width: 100%; } /* Edge */ @supports (-ms-ime-align:auto) { .wrapper { background-repeat: no-repeat; background-repeat: center top; background-size: contain; background-attachment: fixed; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); } } /* Firefox */ @-moz-document url-prefix(){ .wrapper { background-repeat: no-repeat; background-repeat: center top; background-size: contain; background-attachment: fixed; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); } } /* iphone */ .iphone{ .wrapper { background-repeat: no-repeat; background-repeat: center top; background-size: contain; background-attachment: fixed; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); } } /* android */ .android{ .wrapper { padding-top: 10em; padding-bottom: 2em; background-repeat: no-repeat; background-repeat: center top; background-size: contain; background-attachment: fixed; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); } } /*--画像ゆっくり半透明--*/ .fade{ -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .fade:hover{ opacity: 0.6; filter: alpha(opacity=60); } /*--画像枠内--*/ .object-fit-img{ object-fit: cover; object-position: bottom; font-family: 'object-fit: cover; object-position: bottom;' } /*--------------------------------------- 見出し ---------------------------------------*/ h1 a, h2 a, h3 a{ color: inherit; text-decoration: none; } /* サイトタイトル */ h1{ color: #ffffff; font-size: 4.5em; font-weight: bold; text-align: center; text-shadow: 0 0 10px #000000, 0 0 20px #000000; margin-bottom: 20px; line-height: 1.1em; } @media only screen and (max-width : 600px){ h1{ font-size: 2.5em; } } /* サイト説明文 */ h3{ margin: 30px 0; background: rgba(73,76,66,0.8); color: #ffffff; font-size: 1.75em; font-weight: normal; text-align: center; padding: 1em; border-radius: 6px; } @media only screen and (max-width : 600px){ h3{ font-size: 1.2em; font-weight: normal; } } /* 小見出し */ h2{ color: #ffffff; font-size: 2em; font-weight: bold; text-align: center; text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000; line-height: 1.1em; } @media only screen and (max-width : 600px){ h2{ font-size: 1.5em; font-weight: bold; } } /*--------------------------------------- 背景 ---------------------------------------*/ .wrapper:after { content: ""; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKV2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wMy0xMFQxMzo0MDo1NiswOTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDMtMTBUMTY6MTc6MDUrMDk6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDMtMTBUMTY6MTc6MDUrMDk6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQyZjYxZTc1LTFhZWUtNjY0OS04YmQwLTQxYmEyNmRkNWQ5ZiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjAwZDc1OWJiLTA5M2EtYTE0Mi1iOWM3LTY5MzA2NGE5MzY2ZiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmY5NWU5NDNhLTE5ZjktODY0My04ZWZmLTYwODhiODkyMjYwNSIgdGlmZjpPcmllbnRhdGlvbj0iMSIgdGlmZjpYUmVzb2x1dGlvbj0iNzIwMDAwLzEwMDAwIiB0aWZmOllSZXNvbHV0aW9uPSI3MjAwMDAvMTAwMDAiIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiIGV4aWY6Q29sb3JTcGFjZT0iNjU1MzUiIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSI4IiBleGlmOlBpeGVsWURpbWVuc2lvbj0iOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6Zjk1ZTk0M2EtMTlmOS04NjQzLThlZmYtNjA4OGI4OTIyNjA1IiBzdEV2dDp3aGVuPSIyMDE4LTAzLTEwVDEzOjQwOjU2KzA5OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpkN2U4ZjYwNy1hZTE0LTgxNGItOGY3Ni1jNTA1ZTQzNzI3NTMiIHN0RXZ0OndoZW49IjIwMTgtMDMtMTBUMTQ6MjA6MDMrMDk6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmVjYTYzYmRkLWIyOGYtYmU0Yi1iYjdiLTY4MGQ2NzZkNTcwZSIgc3RFdnQ6d2hlbj0iMjAxOC0wMy0xMFQxNjoxNzowNSswOTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NDJmNjFlNzUtMWFlZS02NjQ5LThiZDAtNDFiYTI2ZGQ1ZDlmIiBzdEV2dDp3aGVuPSIyMDE4LTAzLTEwVDE2OjE3OjA1KzA5OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDplY2E2M2JkZC1iMjhmLWJlNGItYmI3Yi02ODBkNjc2ZDU3MGUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Zjk1ZTk0M2EtMTlmOS04NjQzLThlZmYtNjA4OGI4OTIyNjA1IiBzdFJlZjpvcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Zjk1ZTk0M2EtMTlmOS04NjQzLThlZmYtNjA4OGI4OTIyNjA1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HyW+tAAAAEJJREFUCJmNzbENgAAIBdEzbsFKDMVUDEALQ307Y5TCK19zJwBIcnczqyruJHV3RPBsV2BVSaza3cdXZyYzf/xeegExqTcBsw+eNAAAAABJRU5ErkJggg=="); opacity: 0.6; top: 0; left: 0; bottom: 0; right: 0; position: fixed; z-index: -1; width:100vw; height:100vh; } .wrapper:before { content: ""; background-image: url(https://thumbnail.image.rakuten.co.jp/@0_mall/clubits/cabinet/05481152/imgrc0086225822.jpg?_ex=700x700); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); position: fixed; width:100vw; height:100vh; top: 0; left: 0; bottom: 0; right: 0; z-index: -2; } .wrapper { padding-top: 10em; padding-bottom: 2em; display: block; position: relative; z-index: 1; background-repeat: no-repeat; background-repeat: center top; background-size: cover; background-attachment: fixed; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); } /*--------------------------------------- トップページ ---------------------------------------*/ #top_page .item img { border-radius: 10px 10px 0 0; background: #0f1116; } #top_page main { padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } #top_page .item { width: calc(33.3% - 10px); } #top_page .box { position:relative; height:330px; padding: 1em 2em; background: #eee; text-align: left; margin-bottom: 20px; border-radius: 0px 0px 10px 10px; } @media only screen and (max-width: 1000px){ #top_page main {padding: 10px;} #top_page .item {width:calc(50% - 10px);} } @media only screen and (max-width: 600px){ #top_page main {padding: 5px;} #top_page .item {width: 100%;} } /*--------------------------------------- 商品個別ページ ---------------------------------------*/ #item_page .innner { position: relative; background: #FFFFFF; padding: 20px; border-radius: 6px; } #item_page .innner:not(:last-child) { margin-bottom : 20px; } #item_page .item img { border-radius: 10px 10px 0 0; background: #0f1116; } #item_page main { padding: 20px; } #item_page #item_images , #item_page #item_info { display: flex; flex-wrap: wrap; justify-content: space-between; } #item_page #item_images a{ display: block; width: calc(33.3% - 10px); margin-bottom: 20px; } #item_page .box{ width: calc(50% - 10px); } #item_page #itemPrice { border-radius: 10px; background: #F0DDD5; color: #555555; height: 120%; font-size: 1.5em; line-height: 1.8em; } @media only screen and (max-width: 600px){ #item_page main {padding: 5px;} #item_page #item_images a{width:calc(100%);} #item_page .box {width:calc(100%);} #item_page #item_images a:not(:first-child){display:none;} } twitterwidget { margin: 10px auto !important; } /*--------------------------------------- トップ(ページ最上部)へ ---------------------------------------*/ #page-top{ font-size: 80px; position: fixed; z-index:1000000; bottom: 60px; right: 20px; text-decoration: none; color: #4284F0 !important; display: block; } #page-top:hover{ text-decoration: none; opacity: 0.8; color: #4284F0 !important; } @media screen and (max-width: 600px){ #page-top{ bottom: 50px; right: 10px; font-size: 65px; } } /*--------------------------------------- ページナビ ---------------------------------------*/ #page-navi a , #page-navi span{ display : inline-block; padding : 10px; color : #FFFFFF; background : #1B2B32; text-decoration : none !important; font-size : 1.5em; margin : 0 auto; border-radius: 8px; } #page-navi a:hover { color : #FFFFFF !important; opacity: 0.5; text-decoration : none !important; } #page-navi a:visited{ color : #FFFFFF !important; text-decoration : none !important; } #page-navi .gray{ color : #333333 !important; } #page-navi a { cursor : pointer; } #page-navi a { cursor : pointer; } /*--------------------------------------- 購入&詳細ボタン ---------------------------------------*/ div:not(#item_page) .buy-button { position: absolute; bottom: 0; right: 0; text-align:center; width: 100%; } .buy-button { text-align:center; } .buy-button a{ display : inline-block; padding : 10px 20px; cursor : pointer; color : #FFFFFF; background : #1B2B32; width: 80%; text-decoration : none !important; font-size : 1.8em; margin : 20px auto; border-radius: 8px; } .buy-button a:hover { color : #FFFFFF !important; opacity: 0.6; text-decoration : none !important; } .buy-button a:visited{ color : #FFFFFF !important; text-decoration : none !important; } @media screen and (max-width: 600px){ .buy-button { position: relative; } } /*--------------------------------------- レビュー ---------------------------------------*/ #reviewAverage .star1{ color: #D1C200; font-size: 1.5em; } #reviewAverage .star2{ color: #999999; font-size: 1.5em; } /*--------------------------------------- ヘッダ ---------------------------------------*/ header , header a , header a:hover , header a:visited { text-decoration : none !important; } #banner { text-align: center; margin-top: -4em; margin-bottom: 6em; padding: 20px; } #banner p { font-size: 1.75em; line-height: 1.75em; } #banner strong, #banner a { color: inherit; } @media only screen and (max-width : 600px){ #banner { text-align: center; margin-top: -7em !important; margin-bottom: 2em; padding: 5px; } } /*--------------------------------------- フッタ ---------------------------------------*/ footer , footer a , footer a:hover , footer a:visited { color : #FFFFFF !important; text-decoration : none !important; } #copyright { color: #ffffff; text-align: center; display: block; padding: 1em 0 0 0; } #copyright a { text-decoration: none; }