@charset "UTF-8";

/* --------------------------------------------------
Box
-------------------------------------------------- */
/* contents box --------------- */
.contentsBlock{
box-sizing:border-box;
position:relative;
width:100%;
padding-bottom: 5%;
}
.contentsFloatingBox{
box-sizing:border-box;
position:relative;
width:94%;
max-width:1100px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 750px) {
  .contentsBlock{
  padding-bottom: 7%;
  }
}

/* --------------------------------------------------
Title
-------------------------------------------------- */
/* ttlComm --------------- */
.ttlComm{
text-align: center;
font-size: 120%;
font-weight: bold;
position: relative;
margin: 0 0 4%;
}
.ttlComm .line{
background: #fff;
padding: 0 2%;
}
.ttlComm .line:before{
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background: #222;
z-index: -1;
}
@media screen and (max-width: 750px) {
  .ttlComm{
  margin: 4% 0 7%;
  }
}

/* ttlComm --------------- */
.ttlComm2{
background: #e92e40;
padding: 15px 4%;
margin: 0 0 3%;
font-weight: bold;
color: #fff;
}
.ttlComm2 .sub{
font-weight: normal;
font-size: 80%;
letter-spacing: 0.1em;
margin-left: 3%;
}

/* --------------------------------------------------
Table
-------------------------------------------------- */


/* --------------------------------------------------
List
-------------------------------------------------- */


/* --------------------------------------------------
Button
-------------------------------------------------- */


/* --------------------------------------------------
Text
-------------------------------------------------- */
.txtMincho{
font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Times New Roman", serif;
font-weight:500;
}
.txtGothic{
font-family: Lato, "Noto Sans Japanese", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
font-weight:500;
}
.txtCenter{
text-align:center;
}
.txtVCenter{
vertical-align:middle;
}
.txtUnderline{
text-decoration:underline;
}
.txtBig{
font-size:115%;
}
.txtSmall{
font-size:85%;
}
.txtWeight{
font-weight:bold;
}
.txtInlineBlc{
text-align:left;
display:inline-block;
}
.txtBlack{
color:#000;
}
.txtRed{
color:#e60000;
}
.errorTxt{
color:#f00;
font-weight: bold;
}
@media screen and (max-width: 750px) {
  .txtForSp{
  text-align:left !important;
  }
  .txtForSp br{
  display:none !important;
  }
  span.txtForSp{
  display:inline-block;
  }
}
@media screen and (min-width: 750px) {
  .br-pc{display:block;}
  .br-sp{display:none;}
}
@media screen and (max-width: 750px) {
  .br-pc{display:none;}
  .br-sp{display:block;}
}

/* --------------------------------------------------
Other Classes
-------------------------------------------------- */
/* Clear fix --------------- */
.clearFix:after{
content:"";
clear:both;
display:block;
}

/* Hide --------------- */
.disnon{
display:none;
}

/* Form required --------------- */
.required,
.nRequired{
background-color:#f02323;
color:#fff;
display:inline-block;
font-weight:normal;
font-size:12px;
margin:0 5px;
padding:0;
text-align:center;
line-height:22px;
width:40px;
}
.nRequired{
background-color:#999;
}
.required.right,
.nRequired.right{
margin-top:5px;
float:right;
}

/* input form --------------- */
.focusAnimation{
border:1px solid #aaa;
transition:all 0.3s ease-in-out 0s;
}
.focusAnimation:focus{
border:1px solid #39c;
box-shadow:0 0 5px #39c;
outline:medium none;
transition:all 0.3s ease-in-out 0s;
}
input.narrowSize{
box-sizing:border-box;
width:20%;
}
input.smallSize{
box-sizing:border-box;
width:35%;
}
input.middleSize{
box-sizing:border-box;
width:55%;
}
input.wideSize{
box-sizing:border-box;
width:80%;
}
input.fullSize{
box-sizing:border-box;
width:100%;
}
textarea.fullSize{
box-sizing:border-box;
width:100%;
height:150px;
}
@media screen and (max-width: 750px) {
  input.narrowSize{
  width:35%;
  }
  input.smallSize{
  width:60%;
  }
  input.middleSize{
  width:100%;
  }
  input.wideSize{
  width:100%;
  }
}

/* zoom icon --------------- */
.icnZoomArea{
position:relative;
}
.icnZoomArea .icnZoom{
position:absolute;
bottom:0;
right:0;
background:url(../img/common/icon_zoom.png) 50% 50% no-repeat rgba(0,0,0,0.7);
width:35px;
height:35px;
}

/* imgCircle --------------- */
.imgCircle{
border-radius:999px;
}

/* --------------------------------------------------
Top page
-------------------------------------------------- */
/* bnrRegister ------------------*/
.bnrRegister > a{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
border:#d1d1d1 solid 1px;
text-decoration: none;
box-sizing: border-box;
transition: all 0.1s;
}
.bnrRegister > a:hover{
opacity: 0.5;
}
.bnrRegister > a .box{
box-sizing: border-box;
height: 100px;
}
.bnrRegister > a .box:nth-of-type(1){
/*flex: 0 1 70%;*/
flex:1;
background: #f4f4f4;
/*border-right:#d1d1d1 solid 1px;*/
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 0 10%;
}
.bnrRegister > a .box:nth-of-type(1) .ttl{
flex: 1 1 auto;
font-size: 280%;
letter-spacing: 0.1em;
color: #e92e40;
}
.bnrRegister > a .box:nth-of-type(1) .ttl img{
margin-right: 3%;
}
.bnrRegister > a .box:nth-of-type(1) .txt{
/*flex: 1 1 auto;*/
  flex: none;
}
.bnrRegister > a .box:nth-of-type(1) .attention{
flex: 2 1 auto;
color: #fff;
background: #e92e40;
padding: 2px 1%;
font-weight: bold;
text-align: center;
border-radius: 100px;
}
.bnrRegister > a .box:nth-of-type(2){
flex: 0 1 30%;
position: relative;
}
.bnrRegister > a .box:nth-of-type(2) div:nth-of-type(1){
position: absolute;
top:15%;
left: 7%;
color: #00b4ff;
line-height: 1.5;
}
.bnrRegister > a .box:nth-of-type(2) div:nth-of-type(2){
position: absolute;
top:27%;
left: 45%;
}
.bnrRegister > a .box:nth-of-type(2) div:nth-of-type(3){
position: absolute;
top:15%;
right: 7%;
}

/*カラーサンプルプレゼント削除20231213*/
.bnrRegister > a .box:nth-of-type(2){
  display: none;
}

@media screen and (min-width: 1099px) {
  .bnrRegister > a .box:nth-of-type(1) .txt {
    flex: none;
    text-align: right;
    padding-right: 10px;
}
}

@media screen and (max-width: 1100px) {
  .bnrRegister > a{
  align-items: stretch;
  }
  .bnrRegister > a .box{
  height: auto;
  }
  .bnrRegister > a .box:nth-of-type(1){
  flex-wrap: wrap;
/*  flex: 0 1 60%;*/
    flex: 1;
  padding: 1% 5% 2%;
  }
  .bnrRegister > a .box:nth-of-type(1) .ttl{
  flex: 1 1 100%;
  text-align: center;
  margin: 0 0 1%;
  }
  .bnrRegister > a .box:nth-of-type(1) .txt{
  text-align: center;
  margin: 0 1% 0 0;
  }
  .bnrRegister > a .box:nth-of-type(2){
  flex: 0 1 40%;
  padding: 2% 2%;
  text-align: center;
  }
  .bnrRegister > a .box:nth-of-type(2) div:nth-of-type(1){
  position: static;
  }
  .bnrRegister > a .box:nth-of-type(2) div:nth-of-type(1) br{
  display: none;
  }
  .bnrRegister > a .box:nth-of-type(2) div:nth-of-type(2){
  position: static;
  transform: rotate(30deg);
  margin: 1% 0 2%;
  }
  .bnrRegister > a .box:nth-of-type(2) div:nth-of-type(3){
  position: static;
  }
}
@media screen and (max-width: 1100px) and (min-width: 599px){
  .bnrRegister > a .box:nth-of-type(1) .txt{
    flex: none;
  }
}
@media screen and (max-width: 600px) {
  .bnrRegister > a{
  display: block;
  }
  .bnrRegister > a .box:nth-of-type(1){
    border-right: none;
/*    border-bottom: #d1d1d1 solid 1px;*/
    padding: 4% 2%;
  }
  .bnrRegister > a .box:nth-of-type(2){
    padding: 4% 2%;
  }
}

/* listItems --------------- */
.listItems{
display: flex;
flex-wrap: wrap;
justify-content: start;
align-items: stretch;
}
.listItems .product_item{
width: 15.833%;
box-sizing: border-box;
border:#d1d1d1 solid 1px;
padding: 2px;
margin: 0 0 1% 1%;
font-size: 85%;
line-height: 1.5;
}
.listItems .product_item:nth-of-type(6n+1){
margin-left: 0
}
.listItems .product_item .productImage{
text-align: center;
margin: 0 0 5%;
border:#d1d1d1 solid 1px;
overflow: hidden;
display: table;
width: 100%;
padding: 2%;
box-sizing: border-box;
}
.listItems .product_item .productImage a{
display: table-cell;
vertical-align: middle;
}
.listItems .product_item .productContents h3,
.listItems .product_item .productContents .pricetxt,
.listItems .product_item .productContents .comment{
padding: 0 3%;
}
.listItems .product_item .productContents .comment{
color: #888;
font-size: 90%;
margin: 5% 0;
}
.listItems .product_item .productContents .btn a{
display: block;
text-decoration: none;
text-align: center;
background: #adadad;
margin: 5% 0 0;
padding: 2% 2%;
color: #fff;
transition: all 0.3s;
white-space: nowrap;
}
.listItems .product_item .productContents .btn a:hover{
background: #e92e40;
}
.listItems .product_item .productContents .btn a:after{
content: "Details";
}
.listItems .product_item .productContents .btn a:hover:after{
content: "商品ページへ";
}
@media screen and (max-width: 1100px) {
  .listItems .product_item{
  width:19.2%;
  margin: 0 0 1% 1%;
  }
  .listItems .product_item:nth-of-type(6n+1){
  margin: 0 0 1% 1%;
  }
  .listItems .product_item:nth-of-type(5n+1){
  margin-left: 0;
  }
}
@media screen and (max-width: 850px) {
  .listItems .product_item{
  width:24.25%;
  margin: 0 0 1% 1%;
  }
  .listItems .product_item:nth-of-type(5n+1){
  margin: 0 0 1% 1%;
  }
  .listItems .product_item:nth-of-type(4n+1){
  margin-left: 0;
  }
}
@media screen and (max-width: 750px) {
    .listItems .product_item .productImage{
    margin: 0 0 10%;
    }
    .listItems .product_item .productContents .comment{
    margin: 10% 0 10%;
    }
    .listItems .product_item .productContents .btn a{
    margin: 10% 0 0;
    padding: 6% 5%;
    }
}
@media screen and (max-width: 600px) {
  .listItems .product_item{
  width:32.66%;
  margin: 0 0 1% 1%;
  }
  .listItems .product_item:nth-of-type(4n+1){
  margin: 0 0 1% 1%;
  }
  .listItems .product_item:nth-of-type(3n+1){
  margin-left: 0;
  }
}
@media screen and (max-width: 450px) {
  .listItems .product_item{
  width:49%;
  margin: 0 0 1% 1%;
  }
  .listItems .product_item:nth-of-type(3n+1){
  margin: 0 0 1% 1%;
  }
  .listItems .product_item:nth-of-type(2n+1){
  margin-left: 0;
  }
}

/* blcTopBottom --------------- */
.blcTopBottom{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: start;
}
.blcTopBottom #news_area{
width:100%;
}
#news_area .ttlComm2{
margin: 0 0 0;
padding-top: 0;
padding-bottom: 0;
height: 60px;
line-height: 60px;
}
#news_area .news_contents{
border:#d1d1d1 solid 1px;
padding: 3% 3%;
height: 280px;
overflow: auto;
box-sizing: border-box;
}
#news_area .news_contents .newslist{
margin: 0 0 3%;
padding: 0 0 3%;
border-bottom: #999 dotted 2px;
}
#news_area .news_contents .newslist:nth-last-of-type(1){
margin: 0 0 0;
padding: 0 0 0;
border-bottom: none;
}
#news_area .news_contents .newslist .date{
color: #e92e40;
}
.blcTopBottom .boxFacebook{
width:45%;
}
.blcTopBottom .boxFacebook .inner{
width: 100%;
}
@media screen and (max-width: 750px) {
  #news_area .news_contents{
  padding: 6% 5%;
  height: 280px;
  }
  #news_area .news_contents .newslist{
  margin: 0 0 7%;
  padding: 0 0 6%;
  }
}
@media screen and (max-width: 520px) {
  .blcTopBottom{
  display: block;
  }
  .blcTopBottom #news_area{
  width:100%;
  }
  .blcTopBottom .boxFacebook{
  width:100%;
  }
}

/* bnrOutlet --------------- */
.bnrOutlet a{
box-sizing: border-box;
display: block;
text-decoration: none;
border:#d1d1d1 solid 4px;
position: relative;
transition: all 0.1s;
}
.bnrOutlet > a:hover{
opacity: 0.5;
}
.bnrOutlet .bg{
background: url(../img/common/bnr_outlet_img01.png) right 9% top 50% no-repeat, url(../img/common/bnr_outlet_img02.png) left 9% top 50% no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bnrOutlet .box{
box-sizing: border-box;
padding: 3% 3%;
text-align: center;
position: relative;
z-index: 1;
}
.bnrOutlet .box .ttl{
text-align: center;
font-size: 200%;
font-weight: bold;
color: #e92e40;
line-height: 1;
margin: 0 0 1%;
text-shadow: 
#fff 2px 0px 5px, #fff -2px 0px 5px,
#fff 0px -2px 5px, #fff -2px 0px 5px,
#fff 2px 2px 5px, #fff -2px 2px 5px,
#fff 2px -2px 5px, #fff -2px -2px 5px,
#fff 1px 2px 5px, #fff -1px 2px 5px,
#fff 1px -2px 5px, #fff -1px -2px 5px,
#fff 2px 1px 5px, #fff -2px 1px 5px,
#fff 2px -1px 5px, #fff -2px -1px 5px,
#fff 1px 1px 5px, #fff -1px 1px 5px,
#fff 1px -1px 5px, #fff -1px -1px 5px;
}
.bnrOutlet .box .txt{
font-size: 90%;
font-weight: bold;
background: #e92e40;
color: #fff;
border-radius: 999px;
line-height: 1;
padding: 10px 5%;
display: inline-block;
text-align: center;
}
@media screen and (max-width: 450px) {
  .bnrOutlet .box .ttl{
  font-size: 170%;
  margin: 0 0 3%;
  }
  .bnrOutlet .box{
  padding: 6% 3%;
  }
}

/* --------------------------------------------------
contact page
-------------------------------------------------- */
/* intro ------------------*/
.contactPage .intro{
margin: 0 0 3%;
}

/* form ------------------*/
.contactPage table th{
width: 28%;
}