@charset "utf-8";
/* CSS Document */

/**********BASIC************/

*{
font-family: 'Noto Sans JP', sans-serif;
-webkit-overflow-scrolling: touch;
/*
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
*/
	box-sizing:border-box;
	padding:0;
	margin:0;
}

a:hover{
	opacity:.5;
	transition:ease .2s;
}

body{
	background-color:#e2dfd9;
}

.main{
	padding:0 0 1px 0;
	max-width:760px;
	margin:0 auto;
	background-color:#fff;
	letter-spacing:.2em;
	line-height:1.8em;
	box-shadow:rgba(0,0,0,.2) 0 0 15px 3px;
}

.clear{
	clear:both;
}

.clear hr{
	display:none;
}

/**********BASIC************/


/***********COMMON***********/


div[id^="RVideoPF_"]{
	margin:0 auto 60px auto !important;
}


.item_img{
	margin:20px auto;
}

.item-set{
	text-align: center;
}
.item-set a{
	text-decoration: none;
	display: block;
	border: 2px #333 solid;
	margin: 30px auto 80px auto;
	width: 60%;
	padding: 10px;
	transition: ease .2s;
}

.item-set a:hover{
	border: 2px #111 solid;
	background: #111;
	color: #fff;
	transition: ease .2s;
}
.item-set a::before{
	content: "» アイテムをもっと見る";
	font-weight: bold;
}

.item-set span{
	display: block;
}
.item-set span.name{
}
.item-set span.point{
	color: #f00088;
	font-size: 14px;
	font-weight: bold;
	}
.item-set span.price{
font-size: 30px;
padding:10px;
}

.item-set span.point::before{
	content:"期間限定で";
}

.item-set .point::after {
    content: " POINT GET";
    font-size: 12px;
}

.item-set .price::after {
    content: "円(税込)";
    font-size: 12px;
}


.item-menu{
	width: 85%;
	margin: 0 auto;
}

.item-menu a{
	display: block;
	width: 50%;
	float: left;
	padding: 10px;
	text-decoration: none;
}


.price_inner a.on{
	border:1px #ff0036 solid;
	border-left:18px #ff0036 solid;
}


.item-menu a.on{
	color: #ff0036;
    text-decoration: underline;
}

.item-menu a span{
	font-size: 18px;
	font-weight: bold;
	position: relative;
	top: -40px;
}

.item_icon{
	width: 200px;
}
.pc{
	display:block;
}

.sp{
	display:none;
}

.bar {
  color: #000;
  font-size: 30px;
  text-align: center;
  margin: 0 auto 50px auto;
  padding: 100px 0 0 0; }

.bar::after {
  content: "Copyright 2018 SEETHELIGHT,Inc. All rights reserved.";
  border-top: 1px solid #000;
  margin: 5px 0;
  padding: 5px 0;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 6px; }

.img_text{
	margin:0 auto;
	display:block;
}


.item-menu::before{
	content:"素材から探す";
	display:block;
	background:#000;
	color:#FFF;
	text-align:center;
	padding:5px;
	width:100%;
}

@media screen and (max-width: 800px) {

.price_inner a.on{
	border:1px #ff0036 solid;
	border-left:18px #ff0036 solid;
}


.item-menu a.on{
	border:1px #ff0036 solid;
	border-left:18px #ff0036 solid;
	text-decoration:none;
}



.main{
	padding-top:108px;
}
.sp {
    display: block; }
  .pc {
    display: none; }

.img_text{
	width:100%;
}

.item-menu{
	width: 100%;
	margin: 0 auto;
}

.item-menu a:first-child{
	border-top:1px #666666 dotted;
}

.item-menu a{
	display: block;
	width: 100%;
	float: none;
	padding: 10px;
	text-decoration: none;
	border-bottom:1px #666666 dotted;
}

.item-menu a span{
	font-size: 18px;
	font-weight: bold;
	position: relative;
	top: -20px;
}

.item_icon{
	width: 100px;
}

.item-set a{
	width:90%;
}


}
/***********COMMON***********/


/***********COUPON***********/

.coupon {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #666;
  z-index: 90;
  cursor:pointer;}
  .coupon .point_data {
    display: block;
    padding: 3px 2px;
    float: left;
    width: 76%; }
    .coupon .point_data .txt {
      text-align: center;
      color: #fff;
      font-size: 9px; }
    .coupon .point_data .parsent {
      padding: 3px 0;
      color: #fff;;
      font-size: 18px;
      border: 1px solid;
      width: 100%;
      text-align: center;
	  font-weight: bold;
	  }
  .coupon .now {
    display: block;
    padding: 3px 2px;
    float: left;
    width: 24%; }
    .coupon .now .now_in {
      background-color: rgba(255, 255, 255, 0.2);
      padding: 5px 0; }
    .coupon .now .now_num {
      color: #fff;
      text-align: center;
      font-size: 9px; }
    .coupon .now .num_counter {
      padding: 1px 0;
      color: #fff;
      font-size: 12px;
      width: 100%;
      text-align: center; }
    .coupon .now .now_data {
      color: #fff;
      padding: 3px 0;
      font-size: 9px;
      width: 100%;
      text-align: center; }


/***********COUPON***********/


/***********LIST***********/

.top_title{
	margin: 5px auto 20px auto;
    text-align: center;
    display: block;
    font-size: 16px;
}

.item_12{
	font-size:12px;
	letter-spacing:1em;
	text-align:center;
	margin:50px 0 0 0;
}

.lineup{
	margin:20px auto 30px auto;
	width:80%;
}

.lineup img{
	width:calc(100% / 6);
	float:left;
	padding:4px;
	border-radius:100px;
}

/**/
.page_top {
  opacity: 0;
  width: 45px;
  height: 45px;
  border-radius: 80px;
  text-align: center;
  position: fixed;
  bottom: 93px;
  right: 10px;
  padding: 10px;
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-transition: ease 1s;
  transition: ease 1s; }

.page_top::before{
	content:">";
	transform:rotate(-90deg) scaleY(2);
	font-size: 17px;
	display:block;
}

.page_top.on {
  opacity: 1;
  z-index: 100;
  -webkit-transition: ease 1s;
  transition: ease 1s; }

.page_top:hover {
  opacity: 0; }

.page_top.on:hover {
  opacity: 1; }

.page_top img {
  position: relative;
  top: 4px;
  left: 0; }

.state {
  width: 100%;
  padding: 10px; }

.reset_text {
  text-align: center;
  width: 100%;
  font-size: 10px;
  padding: 8px 0;
  border-bottom: 1px dotted; }

.counter {
  width: 100%;
  text-align: center;
  margin: 10px 0 0;
  font-size: 12px; }

.cate-wrap .cate-value {
  -webkit-animation: click_anime01 0.5s;
          animation: click_anime01 0.5s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

.cate-wrap.on .cate-value {
  -webkit-animation: click_anime02 0.5s;
          animation: click_anime02 0.5s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

.price-wrap .price-value {
  -webkit-animation: click_anime01 0.5s;
          animation: click_anime01 0.5s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

.price-wrap.on .price-value {
  -webkit-animation: click_anime02 0.5s;
          animation: click_anime02 0.5s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

@-webkit-keyframes click_anime01 {
  0% {
    color: #c3c3c3;
    border: 2px solid #c3c3c3; }
  40% {
    color: rgba(184, 0, 66, 0.5);
    border: 2px solid rgba(184, 0, 66, 0.5); }
  50% {
    color: #b80042;
    border: 2px solid #b80042; }
  60% {
    color: rgba(184, 0, 66, 0.5);
    border: 2px solid rgba(184, 0, 66, 0.5); }
  100% {
    color: #c3c3c3;
    border: 2px solid #c3c3c3; } }

@keyframes click_anime01 {
  0% {
    color: #c3c3c3;
    border: 2px solid #c3c3c3; }
  40% {
    color: rgba(184, 0, 66, 0.5);
    border: 2px solid rgba(184, 0, 66, 0.5); }
  50% {
    color: #b80042;
    border: 2px solid #b80042; }
  60% {
    color: rgba(184, 0, 66, 0.5);
    border: 2px solid rgba(184, 0, 66, 0.5); }
  100% {
    color: #c3c3c3;
    border: 2px solid #c3c3c3; } }

@-webkit-keyframes click_anime02 {
  0% {
    color: #c3c3c3;
    border: 2px solid #c3c3c3; }
  40% {
    color: rgba(184, 0, 66, 0.5);
    border: 2px solid rgba(184, 0, 66, 0.5); }
  50% {
    color: #b80042;
    border: 2px solid #b80042; }
  60% {
    color: rgba(184, 0, 66, 0.5);
    border: 2px solid rgba(184, 0, 66, 0.5); }
  100% {
    color: #c3c3c3;
    border: 2px solid #c3c3c3; } }

@keyframes click_anime02 {
  0% {
    color: #c3c3c3;
    border: 2px solid #c3c3c3; }
  40% {
    color: rgba(184, 0, 66, 0.5);
    border: 2px solid rgba(184, 0, 66, 0.5); }
  50% {
    color: #b80042;
    border: 2px solid #b80042; }
  60% {
    color: rgba(184, 0, 66, 0.5);
    border: 2px solid rgba(184, 0, 66, 0.5); }
  100% {
    color: #c3c3c3;
    border: 2px solid #c3c3c3; } }

.padding-wrap {
  padding: 2px;
  width: 50%;
  float: left;
  text-align: center;
  color: #676767;
  font-size: 10px; }
  .padding-wrap .cate-value {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 2px solid #c3c3c3;
    color: #c3c3c3;
    font-weight: bold; }
  .padding-wrap .price-value {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 2px solid #c3c3c3;
    color: #c3c3c3;
    font-weight: bold; }

.pop_close_btn {
	display:block;
	text-decoration:none;
  text-align: center;
  width: 90%;
  margin: 10px auto 20px;
  padding: 8px;
  background-color: #343434;
  color: white; }

/**/
.screen_btn {
  position: fixed;
  top: 100px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 40px;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 1.6em;
  border-radius: 100px;
  z-index: 95;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
  cursor:pointer;}

.screen_btn span::before {
    content: "CHECK";
    font-size: 18px;
    color: white;
    position: relative;
    top: 9px;
	}

.screen_btn.on {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: black;
  color: white;
  font-size: 40px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 1em;
  border-radius: 100px;
  z-index: 101;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

.screen_btn.on span::before {
  content: "×";
  font-size: 40px;
  color: white;
  top:0;
  }

.screen.on {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  padding: 20px;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
  width: 100%;
  height: 100%; }

.screen_btn.on {
  display: block; }

.screen {
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: 0 auto;
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }
  .screen .pop-data {
    background-color: #dedede;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    z-index: 91;
    overflow: scroll; }
    .screen .pop-data .cate_box {
      height: 70vmin;
      overflow: scroll;
      background-color: #fff;
      -webkit-overflow-scrolling: touch; }
  .screen .pop-data.on {
    display: block; }
  .screen .title {
    text-align: center;
    width: 100%;
    margin: 0 auto 10px;
    padding: 10px 0 0;
    font-size: 14px; }
  .screen input {
    display: none; }
  .screen label[for^="switch"] {
    display: block;
    float: left;
    text-align: center;
    padding: 10px;
    width: 50%;
    background-color: #a6a6a6; }
  .screen input:checked + label[for^="switch"] {
    background-color: #383838;
    color: white; }

.cate-list label,
.price-list label {
  display: block;
  width: 100%;
  padding: 10px 10px 10px 30px;
  border-bottom: 1px solid; }

.reset_btn {
  text-align: center; }

input:checked + label[for="cate-all"] {
  background-color: #b80042 !important;
  color: white !important;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

input:checked + label[for="cate-other"] {
  background-color: #b80042 !important;
  color: white !important;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

.cate_inner {
  height: 0;
  overflow: hidden;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }
  .cate_inner input:checked + label {
    background-color: #b80042;
    color: white;
    -webkit-transition: ease 0.2s;
    transition: ease 0.2s; }

.cate_box a{
    display: block;
    width: 100%;
    padding: 7px;
    border-bottom: 1px solid;
	text-decoration:none;
	font-size:18px;
	vertical-align:middle;
}

.cate_box a span{
    position: relative;
    top: -18px;
	left:0;
}

.cate_box a.checked{
	border: 1px #ff0036 solid;
    border-left: 12px #ff0036 solid;
	color: #ff0036;
	font-weight:bold;
	-webkit-transition: ease 0.2s;
	transition: ease 0.2s; }


.cate_check:checked + label {
  background-color: #2d2d2d;
  color: white;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

.cate_check:checked + label + .cate_inner {
  background-color: #b0b0b0;
  height: auto;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

.price_inner input:checked + label {
  background-color: #b80042;
  color: white;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s; }

.cate_box .cate-list,
.cate_box .price-list {
  display: none; }

#switch-cate:checked ~ .cate_box .cate-list {
  display: block; }

#switch-price:checked ~ .cate_box .price-list {
  display: block; }

.reset_btn {
  display: none;
  text-align: center;
  width: 90%;
  margin: 10px auto 20px;
  padding: 8px;
  background-color: #343434;
  color: white; }

.reset_btn.on {
  display: block; }

a.cate-off {
  display: none !important; }

a.price-off {
  display: none !important; }


/**/

/***********LIST***********/





/***********SALE***********/

.top_text{
	width:60%;
	margin:40px auto 70px auto;
	font-size:16px;
	line-height:1.7em;
	background:#eee;
	padding:30px 40px;
}

.top_text.white{
	background:#FFF;
	margin: 12px auto 70px auto;
}

.text_box{
	background:#eee;
	padding:45px 25px;
}

.concept_text{
	margin: 5px auto 25px auto !important;
    font-size: 12px;
    text-align: center;
}

.pcitem3{
	width:100%;
}

.pcitem3 a{
	text-decoration:none;
	display:block;
	padding:2px;
	width:calc(100% / 3);
	float:left;
	margin-bottom:2px;
	overflow:hidden;
}

.pcitem3 a img{
	width:100%;
	height:500px;
}

.pcitem2{
	width:100%;
}

.pcitem2 a{
	text-decoration:none;
	display:block;
	padding:2px;
	width:50%;
	float:left;
	margin-bottom:2px;
	overflow:hidden;
}

.pcitem2 a img{
	width:100%;
	height:500px;
}

.pochi{
	display:block;
	width:80%;
	background:#666;
	color:#FFF;
	text-align:center;
	padding:5px;
	margin:10px auto;
}

.pochileft{
	display:block;
	width:55%;
	background:#666;
	color:#FFF;
	text-align:center;
	padding:5px;
	margin-left:150px;
	margin-top:10px;
}


.pochiright{
	display:block;
	width:55%;
	background:#666;
	color:#FFF;
	text-align:center;
	padding:5px;
	margin-left:25px;
	margin-top:10px;
}

.maru {
display: block;
position:relative;
text-align:right;
padding:0 20px;
}


.maru:nth-of-type(2n) {
display: block;
position:relative;
text-align:left;
}

.maru:nth-of-type(2n) a {
	float:left;

}

.maru.one {top:70px;}
.maru.two {top:-60px;}
.maru.three {top:-70px;}
.maru.four {top:10px;}
.maru.five {top:-75px;}
.maru.six {top:-85px;}
.maru.seven {top:-15px;}



.maru a {
display: block;
width:100px;
padding: 5px 5px 3px 0;
margin:0 auto !important;
text-align:center;
word-break: break-all;
width:80px;
text-decoration:none;
color:#000000;
float:right;
}

.maru img {
width: 100%;
height: auto;
margin-bottom: 0px;
padding:0;
border-radius:100px;
}



.items{
	width:100%;
}

.items a{
	text-decoration:none;
	display:block;
	padding:2px;
	width:calc(100% / 3);
	float:left;
	height:450px;
	margin-bottom:2px;
	overflow:hidden;
}

.items a img{
	width:100%;
	transition:ease .2s;
}

.items .text{
	padding:10px;
	background:#FFF;
	height: 400px;
}

.items .text::after{
	content:"商品ページを見る";
	display:block;
	width:80%;
	background:#666;
	color:#FFF;
	text-align:center;
	padding:5px;
	margin:10px auto;
}

.items .text .name{
	display:block;
	border-bottom:1px #666666 dotted;
	margin-bottom:10px;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 35px;
    line-height: 1.5em;
    font-size: 9px;
}

.items .text .price{
	display:block;
	font-size:20px;
}

.items .off{
	background: linear-gradient(-135deg, #F0C, #C00);
	color:#FFF;
	text-align:center;
	display:block;
	font-size:20px;
	font-weight:bold;
}

.items .off::after{
	content:"OFF";
}

.items .text .point{
	display:block;
	color:#f00088;
	font-size:14px;
	font-weight:bold;
}

.items .text .price::after{
	content:"円(税込)";
	font-size:12px;
}

.items .text .point::before{
	content:"POINT×10";
	margin-bottom:5px;
	background:#f00088;
	color:#FFF;
	padding:2px;
	width:100%;
	text-align:center;
	font-size:12px;
	display:block;
}

.items .text .point::after{
	content:" pt GET";
	font-size:12px;
}

/***********SALE***********/



/***********THIS***********/


.loading{
	display:block;
	width:10px;
	height:10px;
	border-radius:100px;
	background:#666;
	position:relative;
	animation:load01 ease-in-out .8s infinite alternate;
	margin:0 30px 0 0;
}

.loading::before{
	content:"";
	display:block;
	width:10px;
	height:10px;
	border-radius:100px;
	background:#666;
	position:relative;
	left:16px;
	animation:load02 ease-in-out .8s infinite alternate;
}

.loading::after{
	content:"";
	display:block;
	width:10px;
	height:10px;
	border-radius:100px;
	background:#666;
	position:relative;
	top: -10px;
	left:32px;
}


@keyframes load01{
	0%{top:0;}
	50%{top:10px;}
	100%{top:0;}
}

@keyframes load02{
	0%{top:10px;}
	50%{top:-10px;}
	100%{top:10px;}
}


/***********THIS***********/



.main.on,.blur.on{
	filter:blur(5px);
}

/**********************/
/**********************/



/**********************/
/**********************/


/**********************/
/**********************/


/**********************/

@media screen and (max-width:800px){

.lineup{
	width:95%;
}

.lineup img{
	width:calc(100% / 4);
}



.top_text{
	margin:0 0 40px 0;
	width:100% !important;
	font-size:14px;
}

.top_text.white{
	margin:0 0 40px 0 !important;
}

.page_top::before{
	position: relative;
	top:0;
    left: -3px;
}


.main{
	width:100%;
}
.comment{
	width:100%;
}
.comment_inner{
	width:100%;
}
.comment .comment_inner .comment_text {
    max-width: calc(100% - 110px);
	font-size:12px;
	padding: 23px 15px;
}

.comment .comment_inner .comment_name::before {
    width: 50px;
    height: 50px;
}

.comment .comment_inner .comment_name span::after {
    font-size: 10px;
}

.top_title{
    margin: 5px auto 15px auto;
    text-align: center;
    display: block;
    font-size: 16px;
}


.top_text{
	width:95%;
}

.profile.on .profile_inner{
	width:90%;
	height:90%;
	top: 5%;
    left: 5%;
    padding: 0 20px;
	overflow:scroll;
}
.profile .profile_comment{
}

.comment .comment_inner .comment_text::before{
	top: 32px;
}
.comment .comment_inner:nth-child(2n) .comment_text::before{
	top: 32px;
}

.review{
    padding: 10px;
	width: 95%;
}

.buy_item a::before{
	display:block;
	width:100%;
	content:"▼購入アイテムを見てみる？▼";
	margin:0 auto 0 auto;
	padding:5px 0 5px 0;
	border-bottom:none;
	font-weight:bold;
	font-size:12px;
	position:relative;
	top:0;
	right:0;
}
.buy_item a{
	display:block;
	width:100%;
	text-align:center;
}
.buy_item a img {
    width: 80px;
	margin:0 auto;
}

.title{
    font-size: 16px;
}

.person_icon::before {
    width: 45px;
    height: 45px;
	/*margin: 0 0 0 -35px;*/
}

.comment {
    padding: 0 0 40px 0;
}

.comment .comment_inner {
    margin: 0 auto 10px auto;
}

.review {
    margin: 10px auto 15px auto;
}


.item img{
	width:80px;
	height:80px;
}
.item_name{
	width:calc(100% - 100px);
	margin:0 0 0 6px;
	font-size:14px;
    top: 0;
}

.review:before{
    position: relative;
	top: -80px;
    left: 0;
	margin-left: 0;
}

.person_info {
    width: calc(100% - 60px);
}


div[id^="RVideoPF_"]{
	width: 100vw !important;
    height: 56.25vw !important;
	margin:0 auto 20px auto !important;
}

}

/**********************/


.staff_icon{
	position:fixed;
	bottom:10px;
	right:0;
	text-align:center;
	font-size:10px;
	background:rgba(255,255,255,0.7);
	padding:5px 10px 0 10px;
	border-radius:5px 0 0 5px;
}

.staff_icon span{
	display:block;
}

.staff_icon img{
	width:45px;
	border-radius:100px;
	padding:3px;
	cursor:pointer;
}

.staff_icon img:hover{
	opacity:.5;
	transition:ease .2s;
}



.items a img.open, .items a span.open, .items a div.open{
	display:block !important;
	opacity:1 !important;
	transition:ease 1s;
}


/*
.comment_text span{
	display:none;
}

.comment_text .loading{
	display:none;
}

.comment_text.open span{
}

.comment_text.open .loading{
		display:block;
	animation:load01 1 ease 1s;
}

@keyframes load01{
	0%{
		display:none;
		opacity:0;
	}
	10%{
		display:block;
		opacity:1;
	}
	100%{
		opacity:0;
		display:none;
	}
}

*/




@media screen and (max-width: 800px) {
  .sp {
    display: block; }
  .pc {
    display: none; }
  .bar {
	  margin: 0 auto 20px auto;
	  padding:65px 0 0 0;}
  .item_frame {
    height: 150vw;
    width: 100%;
    overflow: scroll; }
  .off_img {
    padding: 0;
    margin: 0 auto 30px auto; }
  .screen_btn {
    position: fixed;
    top: 50px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 40px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 0.7em;
    border-radius: 100px;
    z-index: 95;
    -webkit-transition: ease 0.2s;
    transition: ease 0.2s; }
  .screen_btn span::before {
    content: "MENU";
    font-size: 10px;
    color: white;
	position:relative;
	top:11px;
	}
  .screen_btn.on {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: black;
    color: white;
    font-size: 40px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 1em;
    border-radius: 100px;
    z-index: 101;
    -webkit-transition: ease 0.2s;
    transition: ease 0.2s; }
  .screen_btn.on span::before {
    content: "×";
    font-size: 40px;
    color: white;
	position: relative;
    top: -3px;
	}
  .main.on {
    position: fixed;
    top: 0;
    left: 0; }
  .main {
    width: 100%; }
    .main .text {}
  .cate_box {
    height: 100vmin !important; }
  .items a .text {
    padding: 10px; }
  .items a .text::after {
    padding: 8px;
	font-size:11px;
    width: 80%;
    display: block; }

	.items .text .price::before{
		display:none;
		font-size:9px;
	}

	.items .text .name{
    font-size: 9px;
	height: 28px;
    padding-bottom: 7px;
	}

	.items .text .price{
    font-size: 22px;
	}

	.items .text .sale {
    font-size: 22px;
	}

	.items a {
    width: 50%;
	}

.maru {
display: block;
position:relative;
text-align:right;
padding:0 8px;
}


.maru:nth-of-type(2n) {
display: block;
position:relative;
text-align:left;
}

.maru:nth-of-type(2n) a {
	float:left;

}

.maru.one {top:32px;}
.maru.two {top:-30px;}
.maru.three {top:-35px;}
.maru.four {top:-40px;}
.maru.five {top:-35px;}
.maru.six {top:-40px;}
.maru.seven {top:-50px;}



.maru a {
display: block;
width:100px;
padding: 5px 5px 3px 0;
margin:0 auto !important;
text-align:center;
word-break: break-all;
width:70px;
text-decoration:none;
color:#000000;
float:right;
}

.maru img {
width: 100%;
height: auto;
margin-bottom: 0px;
padding:0;
border-radius:100px;
}

	}

@media screen and (max-width: 320px) {
  .items a {
    width: 50%;
    height: 388px; }
  .items .text::after {
    font-size: 12px;
    margin: 20px auto 20px auto !important; } }

@media screen and (min-width: 321px) and (max-width: 375px) {
  .items a {
    width: 50%;
    height: 417px; }
  .items .text::after {
    font-size: 12px;
    margin: 20px auto 20px auto !important;
    padding: 10px; } }

@media screen and (min-width: 376px) and (max-width: 414px) {
  .items a {
    width: 50%;
    height: 436px; }
  .items .text::after {
    font-size: 12px;
    margin: 20px auto 20px auto !important;
    padding: 10px; } }

@media screen and (min-width: 415px) and (max-width: 800px) {
  .items a {
    height: 450px; }
  .items .text::after {
    font-size: 12px;
    margin: 20px auto 20px auto !important;
    padding: 10px; } }