@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/carymo/cabinet/mask50-w-2-2.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;
}