/*
Theme Name: type-TN18
Author: TN
Version: 1.8, 2020.01
*/

/*------------------------------------------------------------
	base
------------------------------------------------------------ */
* { box-sizing:border-box; }
html { font-size: 10px; webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; padding: 0; font: 14px/1.6 "Yu Gothic", YuGothic, "游ゴシック体", "Helvetica", "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Geneva", "Arial", "Verdana", sans-serif; height: 100%; background-color:#fff; color:#000; }
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,figure{ margin: 0px; padding: 0px; }
ul { list-style-type: none; }
img { border: none; }
input,textarea,select { font-size: 1em; }
form { margin: 0px; }
table {	border-collapse:collapse; font-size: 100%; border-spacing: 0; }
/*link*/
a { border:0; text-decoration:none; color: inherit; transition: all .2s ease-in-out; }
a:hover { text-decoration: none; color:inherit; }
.linkText { color:#09c; padding-top:5px; text-decoration:underline; line-height:2.2; }
.linkText:hover { color:#09c; }
/*text*/
h1, h2, h3, h4, h5, h6 { text-align: left; line-height:1.6; line-break: strict; color: #000; font-weight: normal; letter-spacing:1px; }
h1 { font-size: 34px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { font-weight: normal; font-size: 14px; line-height: 1.7; color: #000; }
@font-face {
   font-family: helve;
   src: url('Helvetica-Bold-Font.ttf');
}
@font-face {
   font-family: helve-nml;
   src: url('Helvetica.ttc');
}

.caption { font-size : -webkit-calc(1em - 2px) ; font-size : calc(1em - 2px) ; }
.point { color:#f00 !important; }
.textC { text-align:center !important; }
.textL { text-align:left !important; }
.textR { text-align:right !important; }
.fsM { font-size:18px; }
.bpb0 { margin:0 !important; padding:0 !important; border:0 !important; }
.minc { font-family:游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; }
.itlc { font-style:italic; }
.obli { font-style:oblique; }
.helve { font-family:ren; font-weight:normal !important; }
/*strong*/
strong { color:#f00; font-weight: bold; }
b { color:#000; font-weight: bold; }
em, i { font-style: italic; }
.normal { font-weight:normal !important; }

/* IMG */
img { display:block; margin:0 auto; padding:0; border: 0; max-width:100%; }
img.center { display:block; margin:0 auto; }
img.left { float: left; margin: 0 15px 0 0; border: 0; }
img.right { float: right; margin: 0 0 0 15px; border: 0; }
a img { transition: all .2s ease-in-out; }
a:hover img { opacity:.70; }
.w100 { width:100%; }
.wMax100 { max-width:100%; }
.cR { border-radius:10px; }
img.bd999 { border:1px solid #999; }
/* clearfx */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after{ clear: both; }
.cf { zoom: 1; } /* For IE 6/7 */

/* LIST */
ul { margin-bottom: 0; list-style: none outside; }
ol { margin-bottom: 0; list-style: decimal; margin-left: 2.2em; }
ul.square, ul.circle { margin-left: 2em; }
ul.square { list-style: square outside; }
ul.circle { list-style: disc outside; }
ul ul.circle, ul ul.square { margin-top: 4px; margin-bottom: 5px; }

/* HR */
hr { border-width: 1px 0 0 0; border-style: solid; border-color: #000; height: 1px; }
hr.dot { border-width: 1px 0 0 0; border-style: dotted; border-color: #000; height: 1px; }
hr.dash { border-width: 1px 0 0 0; border-style: dashed; border-color: #000; height: 1px; }


/* Margin */
.btmMgn0 { margin-bottom:0 !important; }
.btmMgn-s { margin-bottom:5% !important; }
.btmMgn-m { margin-bottom:7% !important; }
.btmMgn-l { margin-bottom:10% !important; }
.btmMgn-fnt { margin-bottom:.6em !important; }

.topMgn0 { margin-top:0 !important; }
.topMgn-s { margin-top:5% !important; }
.topMgn-m { margin-top:7% !important; }
.topMgn-l { margin-top:10% !important; }

/* Padding */
.btmPad0 { padding-bottom:0 !important; }
.btmPad-s { padding-bottom:5% !important; }
.btmPad-m { padding-bottom:7% !important; }
.btmPad-l { padding-bottom:10% !important; }

.topPad0 { padding-top:0 !important; }
.topPad-s { padding-top:5% !important; }
.topPad-m { padding-top:7% !important; }
.topPad-l { padding-top:10% !important; }

.all0 { margin:0 !important; padding:0 !important; border:0 !important; background:none !important; }

i { font-size:calc(1em + 2px); }

@media(max-width:767px) {
h1 { font-size: 2rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.7rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.4rem; }
p { font-size: 1.3rem; }
.caption { font-size : 1.1rem; }
ul.square, ul.circle { margin-left: 1.5em; }
}
@media(max-width:320px) {
h6 { font-size: 1.4rem; }
p { font-size: 1.3rem; }
}


/*------------------------------------------------------------
	header - nav
------------------------------------------------------------ */
header { position: absolute; width:100%; padding:0; z-index: 999; background: rgba(0,0,0,1); top:0; border-bottom:1px solid #999; }
.inner { width:80%; height:80px; margin: 0 auto; padding:0; display:flex; align-items:center; justify-content: flex-end;}
header h1, header p { line-height:1; font-size:1em;}
header.fixed { position: fixed !important; top:0 !important; bottom:inherit !important; width:100%; background: rgba(0,0,0,1); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);}
header.fixed .inner { height:80px; }
header h1 a { display:block; }
.lg-ct { display:none; }

#mobile-head { margin-right:auto; align-items:center;}
header nav ul { display:flex; }
header nav li { margin-left:2em; font-family:helve; letter-spacing:1px; min-height:80px; display: flex; align-items: center; color:#000; text-decoration:none; font-size:1vw;}
header.fixed nav li { min-height: 80px; }
header nav a { position:relative; display:block; color:#fff; text-decoration:none; font-size:1vw; text-align:center; line-height:1; letter-spacing:2px;}
header nav a:hover { color:#fff; }
header nav li.snsi { display:flex; }
header nav li.snsi a { display:block; margin-left:.6em; width:34px; height:34px; background:rgba(255,255,255,1); color:#000; border-radius:50%; display: flex; align-items: center; justify-content: center; font-size:1.3vw; letter-spacing:0; }
header nav li.snsi a i { position:relative; left:1px; }
/*hover*/
header nav a:after, header nav a.on:after{
  position: absolute;
  bottom: -.4em;
  content: "";
  display: inline-block;
  width: 0;
  height: 1px; 
  background: #fff;
  transition:all .25s ease;
}
header nav li.cart a:before, header nav li.cart a:after, header nav li.cart a.on:before, header nav li.cart a.on:after,
header nav a:after, header nav a.on:after{ left: 0; }
header nav li.drop li a:after{ left: .6em; }
header nav li.drop li:first-child a:after{ left: 0; }
header nav a.on:after, header nav a:hover:after{ width:100%; }
header nav li.cart a:hover { background-color:#f0f0f0;}
header nav li.snsi a:after, header nav li.snsi a.on:after{ display:none; }
header nav li.snsi a:hover { background:rgba(255,255,255,.8)}
  
/* Toggle Button */
#nav-toggle { display: none; position: relative; width:30px; height:24px; cursor: pointer; z-index: 999; margin-left:auto; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height:2px; width: 100%; background: #fff; left: 0; transition: .35s ease-in-out; border-radius: 20px; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 11px; }
#nav-toggle span:nth-child(3) { top: 22px; }


@media(max-width:767px) {
header, header.fixed { position:fixed; top:0; left:0; margin:0; background: rgba(0,0,0,1); }
header, .inner { width: 100%; padding: 0; height:80px; }
header h1, header p { margin:0; width:65%; }
header h1 svg, header p svg { width:100%; }
.lg-ct { width: 16%;display: flex; }
.lg-ct a { width:40%; display:block; }
.lg-ct a:first-child { margin-right:auto; }
#mobile-head {
width: 90%;
margin:0 auto;
padding:0;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
header.fixed .logo, header .logo {
position: absolute;
left: 0;
top: 10px;
}
header nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top:0;
left:-100vw;
background:#000;
width: 100%;
height:100vh;
text-align: center;
padding:0;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
transition: .25s ease-in-out;
z-index: 998;
overflow:scroll;
-webkit-overflow-scrolling: touch;
}
header nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 14px;
align-items: flex-start;
width:100%;
}
header nav > ul { 
width: 100%;
padding:20% 0 0;
margin-left: auto;
overflow:scroll;
-webkit-overflow-scrolling: touch;
}

header nav ul li {
position: relative;
padding:0;
min-height:auto;
text-align:left;
font-size:1.7rem;
font-weight:normal;
display:block;
width:100%;
border-bottom:1px solid #666;
}
header nav ul li:first-child { border-top:1px solid #666; }
header nav ul li.splast {border-bottom:1px solid #666; }
header nav ul li a,
header.fixed nav ul li a {
width: 100%;
display: block;
padding: .8em 1em;
text-align:left;
font-size:1.7rem;
font-weight:normal;
}

header nav li.snsi { border:0; justify-content: center; margin:10% 0 0;}
header nav li.snsi a { width:42px; height:42px; font-size:2rem; margin:0 2%; }
header nav li.snsi a i { position:relative; left:1px; }
header nav ul li::after {
content: "\f105";
font-family: FontAwesome;
position: absolute;
top: 50%;
right: 3%;
transform: translate(-50%,-50%);
transition: all .2s ease-in-out;
color: #999;
display:block;
}
header nav ul li.snsi::after {display:none; }

header nav ul li a.onlySp, header.fixed nav ul li a.onlySp, header nav ul li a span, header.fixed nav ul li a span { font-size:1.5rem; color:#b0b0b0; }

#nav-toggle, #post-menu {
display: block;
}
/* #nav-toggle 切り替えアニメーション */
header.open #nav-toggle span { background:#e8e8e8; }
header.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
header.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
header.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/* nav スライドアニメーション */
header.open nav {
/* nav top + #mobile-head height */
-moz-transform: translateX(100vw);
-webkit-transform: translateX(100vw);
transform: translateX(calc(100vw));
}

header nav ul { flex-direction:column;}
header nav li { margin-left:0;}
header nav a:before, header nav a:after, header nav a.on:before, header nav a.on:after { display:none; }

}
@media(max-width:320px) {
header nav > ul { width: 100%; }
header nav ul li a, header.fixed nav ul li a { font-size:1.4rem; }
}


/*------------------------------------------------------------
	COMMON
------------------------------------------------------------ */
section { position:relative; width:100%; margin:0; padding:5% 0 0; overflow:hidden; }
.ins { position:relative; width:80%; margin:0 auto; }
.ins.brd { border-bottom:1px solid #000; padding-bottom:5%; }
.ins.min { width:70%; }
.ins.mins { width:60%; margin-bottom:10%; }
.ins.min-s { width:50%; margin-bottom:5%; }
.ins.w100 { width:100%; }
.ins hr { margin:2.5% 0; }
h2 { position:relative; font-size:26px; text-align:center; margin:0 0 .3em; padding:0; line-height:1; letter-spacing:1px; font-family:helve; font-style:oblique; font-weight: normal; }

/* column */
.clmBox { position:relative; display:flex; flex-flow: row wrap; justify-content: space-between; }
.clmBox.normal { justify-content:flex-start; align-items:flex-start; }
.clmBox.cont-rev { justify-content:flex-end; align-items:flex-start; }
.clmBox.ali-rev { justify-content:flex-start; align-items:flex-end; }
.clmBox.all-rev { justify-content:flex-end; align-items:flex-end; }
.htmach { align-items:stretch; }
.clmBox > li { display:block; padding:0; border:0; position:relative; }
.clmBox > li.clmBox { display:flex; }
.clm2 > li, .clm2 .clms { width:47%; }
.clm3 > li, .clm3 .clms { width:32%; margin-bottom:4%; }
.clm4 > li, .clm4 .clms { width:24%; }
.clm5 > li, .clm5 .clms { width:19%; }
.clm2.box2 .clms { width:50%; }
.clms { position:relative; }
.clm3::after{content:"";display: block;width:32%;}
.clm4::before{content:"";display: block;width:24%;order:1;}
.clm4::after{content:"";display: block;width:24%;}
.clm5 .empty{width:19%; margin:0;}
.clms { margin-bottom:2%; }
.clm2 li img, .clm3 li img, .clm4 li img, .clm5 li img, .clms img { width:100%; height:auto; }
.worksBox img, .jny img { display: block; max-height:30%; object-fit: cover; object-position: 50% 0%; }
.imgauto img { width:auto !important; }
.alignC { align-self:center; }
.alignC img { display:block; margin:auto; }
.clumn { display:flex !important; flex-direction:column; align-items: flex-start;}
.clmBox.nowrap { flex-wrap:nowrap; align-items: flex-start; }
.last-end-row { margin-right:auto; }
.last-end-clm { margin-top:auto; }

@media(max-width:767px) {
section { padding:10% 0 0; }
.ins { width:90%; margin:0 auto; }
.ins.min { width:90%; }
.ins.mins, .ins.min-s { width:90%; margin-bottom:10%; }
.ins img { max-width:100%; }
.ins.brd { padding-bottom:10%; }

.clm2 li, .clm2 .clms, .clm3 li, .clm3 .clms, .clm4 li, .clm4 .clms, .clm5 li, .clm5 .clms { width:100%; margin-bottom:0; }
.clm2 li { margin-bottom:8%; }
.clm2 li:last-child { margin-bottom:0; }
.clm3 li, .clm3 .clms, .clm4 li, .clm4 .clms, .clm5 li, .clm5 .clms { width:48%; }
.clm4::before{content:"";display: block;width:48.5%;order:1;}
.clm4::after{content:"";display: block;width:48.5%;}

h2 { font-size:2.4rem; margin-bottom:.4em; }

a.gopage { font-size:2rem; letter-spacing:3px; margin:1.2em auto 0; padding:.1em 1em; }
.arrowLink { font-size:180%; bottom:0; }

}

@media(max-width:320px) {
h2 { font-size:1.9rem; letter-spacing:2px; }
h2 span { font-size:1.4rem; letter-spacing:1px; }
}

/*------------------------------------------------------------
	BUTTON
------------------------------------------------------------ */
button, [type="button"], [type="reset"], [type="submit"] { background:none; border:0; }
button:active { color:#fff; }
.btns {font-family:helve-nml; font-style:oblique; color:#fff; text-align:center; margin:5% auto 0; padding:.5em 1.5em; width:300px; background:rgba(0,0,0,1); display:block; letter-spacing:2px; }
.btns.cnt { margin-bottom:5%; }
.btns:hover { background:rgba(0,0,0,.7); color:#fff; text-decoration:none !important; }

/*hover*/
.btns.cnt:hover { background:#555; }
.btns.cnt:active { color:#fff; }
.btns-more a:hover i { padding-left:1em; }

@media(max-width:767px) {
.btns { margin:10% auto 0; padding:.8em 1.25em; width:80%; font-size:1.0rem; }
.btns.cnt { margin-bottom:5%; }
.btns:hover { background:rgba(0,0,0,.7); color:#fff; text-decoration:none !important; }
}

/*------------------------------------------------------------
	TOP
------------------------------------------------------------ */
main { padding-bottom:10%; }
.marktxt { position:absolute; left: 5%; top: 6%; font-family:helve; font-style:oblique; font-size:20px; color:#fff; font-weight:normal !important; letter-spacing:1px; }
.marktxt.new { color:#ff0; }
.linefont {
color: #fff; font-style: inherit; font-size:42px; letter-spacing:2px;
text-shadow:
1px 1px 0 #000, -1px -1px 0 #000,
-1px 1px 0 #000, 1px -1px 0 #000,
0px 1px 0 #000,  0-1px 0 #000,
-1px 0 0 #000, 1px 0 0 #000;
}
.ins > h6 { text-align:center; font-weight:bold; }
@media(max-width:767px) {
main { padding-bottom:15%; }
.marktxt { left:8%; top:3%; font-size:1.6rem; }
.linefont { font-size:2.6rem; }
}

/*SLIDER*/
.topSl { padding:80px 0 0; }
.topSl .swiper-container img {position:absolute; left:0; right:0; top:-5%; bottom:0; margin:auto; z-index:999; width:25.5%; }
.topSl .swiper-slide { width:100vw; height:calc(100vh - 80px); position:relative; background-position:50% 0%; background-repeat:no-repeat; background-size:cover; display:flex; align-items: flex-end; padding: 5%; }

.topSl .swiper-slide { width:100vw; height:0;  padding-top: 70%; position:relative; background-position:50% 0%; background-repeat:no-repeat; background-size:cover; display:flex; align-items: flex-end; }

.topSl .swiper-slide:nth-child(1) { background-image:url(../images/top/top-kv-1.jpg);}
.topSl .swiper-slide:nth-child(2) { background-image:url(../images/top/top-kv-2.jpg);}
.topSl .swiper-slide:nth-child(3) { background-image:url(../images/top/top-kv-4.jpg);}
.topSl .swiper-slide:nth-child(4) { background-image:url(../images/top/top-kv-3.jpg);}
.topSl .swiper-slide h2, .topSl .swiper-slide p { text-align:left; color:#fff; font-size:16px; }
.topSl .swiper-slide h2 { font-size:52px; margin-bottom:.2em; }
@media(max-width:767px) {
.topSl { padding:80px 0 0; }
.topSl .swiper-slide { height:calc(70vh - 80px); padding:12% 6%; }
.topSl .swiper-slide h2, .topSl .swiper-slide p { font-size:1.25rem; }
.topSl .swiper-slide h2 { font-size:4rem; margin-bottom:.2em; }
}

/*PICKUP*/
.pickup { padding:0; display:flex;}
.pickup div { position:relative; width:50%; min-height:450px; padding: 5%; background-position:50% 0; background-repeat:no-repeat; background-size:cover; display: flex; flex-wrap:wrap; flex-direction: column; justify-content: flex-end; align-items: center;}
.pickup div:nth-child(1) { background-image:url(../images/top/pickup-1woman.jpg) ;}
.pickup div:nth-child(2) { background-image:url(../images/top/pickup-2man.jpg) ;}
.pickup div h4, .pickup div h6 { text-align:center; color:#ff0000; letter-spacing: 0; }
/*.pickup div h4, .pickup div h6 { text-align:center; color:#fff; letter-spacing: 0; }*/
.pickup div h4 { font-size:32px; font-family:helve; line-height:1.0;  font-style: italic; }
.pickup div h6 { font-weight:bold; }
.pickup div a { margin-top:10%; }
.pickup .btns { width:200px; }
@media(max-width:767px) {
.pickup div { min-height:300px; }
.pickup div:nth-child(1) { background-image:url(../images/top/pickup-1woman.jpg); background-position:50% 0; }
.pickup div:nth-child(2) { background-image:url(../images/top/pickup-2man.jpg);background-position: 50% 0; }
.pickup div h4 { font-size:1.5rem; }
.pickup div h6 { font-size:1.0rem; }
.pickup div a { margin-top:20%; }
.pickup .btns { width:100%; }
}

/*NEW ITEM*/
.mainimg { position:relative; margin: 0 0 0; padding: 0; width: 100%; height: 0; padding-top: 57.142857%; background-image:url("../images/blacklabel/202002/bl-kv-20200226.jpg"); background-position:50% 50%; background-repeat:no-repeat; background-size:cover; display: flex; justify-content: center; align-items: center;  background-color: #000; }
.mainimg2 { position:relative; margin: 0 0 0; padding: 0; width: 100%; height: 0; padding-top: 64.2857%; background-image:url("../images/blacklabel/202002/bl-kv-20200226-2.jpg"); background-position:50% 50%; background-repeat:no-repeat; background-size:cover; display: flex; justify-content: center; align-items: center;  background-color: #000; }
.mainimg p {   position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); margin: auto; }
.mainimg2 p {   position: absolute; top: 50%; margin: auto; text-align: center; }
.mainimg p img, .mainimg2 p img { width: 600px; height: auto; }
.newitem h2 { margin:1.2em auto .8em; }
.newitem h5 { font-size:18px; text-align:center;  }
.newitem img.bl-logo  { width: 400px; margin-bottom: 60px; }
@media(max-width:767px) {
.mainimg { min-height:450px; margin-bottom: 0; background-position: center top; }
.mainimg p img, .mainimg2 p img { width: 400px; height: auto; }
.newitem h5 { font-size:1.25rem; }
.newitem img.bl-logo  { width: 60%!important; }
}


/*NEWS*/
.news ul { margin-top:3%; }
.news li { padding:1.5em 15%; line-height:1.4; border-bottom:1px solid #000; }
.news li:first-child { border-top:1px solid #000; }
.news .textbtn { margin-left:auto; text-decoration:underline; letter-spacing:1px; }
.news .textbtn i { padding-left:.5em; }
.news a:hover { text-decoration:underline; }
.news li > span, .news li > time { font-family:helve; font-style:oblique; color:#999; display:inline-block; margin-right:1em; }
.news.newslist .ins { border:0; padding-bottom:0; }
.news.newslist li { margin-bottom:3%; padding-bottom:3%; line-height:1.4; border-bottom:1px solid #000; display:block; }
@media(max-width:767px) {
.news ul { margin:5% auto 0; width:90%; }
.news li { padding:5%; font-size:1.4rem; }
.news li:nth-child(4) { display:none; }
.news span { font-size:1.2rem;}
}



/* ABOUT */
.about  { margin-top:3%;  margin-bottom: 80px; }
.about p.about-txt  { text-align: center; font-size: 18px; line-height: 2.0; }
.about p.about-txt img  { margin: 0 auto 40px; text-align: center; width: 300px;  }
@media(max-width:767px) {
.about p.about-txt  { font-size: 14px; line-height: 2.0; }
.about p.about-txt img  { margin: 0 auto 40px; width: 50%;  }
}



/*SEARCH*/
#searchform { position:relative; margin-top:3%; }
#searchform .form-control { width:100%; border: 1px solid #000; }
#searchform .form-control { padding:1em; font-size: 16px; color: #222; border: 1px solid #000; }
#searchform input[type="submit"] { position:absolute; top:0; bottom:0; margin:auto; right:1%; font-family:FontAwesome; font-size:20px; display:block; }
.form-control:focus {
border-color: #666;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 0, 0, .3);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 0, 0, .3);
}
@media(max-width:767px) {
}

/*------------------------------------------------------------
	トップページ 新2列 ITEM LIST
------------------------------------------------------------ */

.new-itemlist-ul{
      list-style-type: none;
      padding: 0;
      margin: 0;

}



.item{

      color: white;
      margin: 5px;
      float: left;
      width: calc(50% - 10px);
padding-bottom:20px;
}


/*------------------------------------------------------------
	ITEM LIST
------------------------------------------------------------ */
.itemlist, .related { font-style:oblique; font-family:helve; }
.itemlist ul, .related ul { margin-top:5%; }
.itemlist img, .related img { border:1px solid #000; margin:0 0 1em; }
.itemlist p, .related p { text-align:center; margin:0 0; font-size:16px; line-height:1.2; }
.itemlist p span, .related p span { display:block; font-size:calc(1em - 2px); }
.itemlist p span b { display:  inline; color: #ff0000; padding-left: 5px; font-weight: normal!important; }
.itemlist li i { width:26px; height:26px; display:flex; justify-content: center; align-items: center; color:#fff; background:#000; position:absolute; top:10px; left:10px; z-index:10; font-size: inherit; font-style: inherit; font-family:helve; line-height:1; }
@media(max-width:767px) {
.itemlist img, .related img { border:1px solid #000; margin:0 0 5px; }
.itemlist p, .related p { margin:0.4em 0 1.5em; font-size:1.1rem; }
}


/*------------------------------------------------------------
	DETAIL
------------------------------------------------------------ */
.bdc { padding: calc(80px + 2%) 0 0; }
.bdc ul { display:flex; flex-wrap: wrap; border-bottom:1px solid #000; padding:0 0 2%; }
.bdc ul li { position:relative; font-family:helve; font-style:oblique; }
.bdc ul li a { position:relative; display:block; padding-right:1.2em; margin-right:.5em; }
.bdc ul li a::after {
content: "\f105";
font-family: FontAwesome;
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%,-50%);
transition: all .2s ease-in-out;
color: #000;
display:block;
}

.dtl .ins > img { margin:0 0 3%; }
.dtl h1, .dtl h2, .dtl h3, .dtl h4, .dtl h5, .dtl h6, .dtl .cartBox a, .dtl .cartBox button { font-family:helve; line-height:1.2; font-weight:normal; letter-spacing: normal; }
.dtl h1 { font-size: 2.0em;  margin-bottom: 0.25em; font-style: italic;  }
.dtl h5 { font-style: italic; }
.dtl .price {  font-size: 1.4em; margin: 0.75em 0; text-align:left; }
.dtl .price span { font-size:calc(1em - 6px); padding-left:.8em; }
.dtl .desc { padding-top:5%; }
.dtl .desc h3 { padding-bottom:.4em; margin-bottom:1.0em; border-bottom:1px solid #000; font-size: 1.2em; }
.dtl .desc h4 { font-style: oblique; }
.dtl .desc p {  font-size: 1.0em; margin-bottom: 1.0em; }

.dtl .cartBox a, .dtl .cartBox button { position:relative; display:block; width:100%; color:#fff; background: rgba(0,0,0,1); padding:0 1em; text-align:center; font-style:oblique; font-size:16px; letter-spacing:2px; margin-bottom: 1.5em; }
.dtl .cartBox a span, .dtl .cartBox button span { background:url(../images/common/icon_cart.svg) 0 50% no-repeat; background-size:32px; display: inline-block; padding: 1.4em 0 1em 44px; }
.dtl .cartBox a:hover, .dtl .cartBox button:hover { background: rgba(0,0,0,.7); }

/*cart button*/
.dtl .cartBox form { position:relative; display:block; width:100%; color:#fff; background: rgba(0,0,0,1); padding:0 1em; text-align:center; cursor: pointer; transition: all .2s ease-in-out;}
.dtl .cartBox form:hover { background: rgba(0,0,0,.7); }
.dtl .cartBox form input[type="submit"] { background:url(../images/common/icon_cart.svg) 0 50% no-repeat; background-size:32px; display: inline-block; padding: 1.4em 0 1em 44px; font-style:oblique; font-size:16px; letter-spacing:2px; color:#fff; font-family:helve;}
.dtl .cartBox form input[type="text"] { width:10%; margin-left:1em; text-align:right; }

/*item pics*/
.flex-direction-nav a { top:21vw;}
.flex-control-thumbs { margin:4% 0 0; display:flex; flex-flow: row wrap; justify-content: space-between; position:relative; bottom:inherit; }
.flex-control-thumbs li { width: 24%; float:none; margin:0 0 1.5%; display:block; }
.flex-control-thumbs::before{content:"";display: block;width:24%;order:1;}
.flex-control-thumbs::after{content:"";display: block;width:24%;}
.flex-control-thumbs li img { border:1px solid #000; }
#slides li, #carousel .flex-direction-nav li { margin:0 !important; }
.slides img { opacity:1; transition: all .2s ease-in-out; border:1px solid #000; }
.flex-active-slide img{ opacity:1;}

/*banner*/
.bnrs a { width:100%; margin-bottom:5%; display:inline-block; }
.bnrs a:last-child { margin:0 auto; }

/*RELATED*/
.related .ins { padding:5% 0; border-top:1px solid #000; border-bottom:1px solid #000; }
.related h2 { text-align:left; font-style:normal; }

@media(max-width:767px) {
.bdc { padding: calc(80px + 4%) 0 0; }
.bdc ul { padding:0 0 4%; }
.bdc ul li { font-size:1.2rem; }
.dtl .ins > img { margin:0 auto 10%; width:60%; }
.dtl .desc h3 {margin-bottom:1em; }
.dtl .price { margin: 1.5em 0 1em; }
.dtl .cartBox a span, .dtl .cartBox button span { padding: 1em 0 .8em 44px;}
.circle li { margin-bottom:3%; }
	
/*cart button*/
.dtl .cartBox form input[type="submit"] { font-size:1.5rem; padding: 2em 0 2em 44px; }
.dtl .cartBox form input[type="text"] { width:20%; }
	
/*item pics*/
.flex-direction-nav a { top:54vw;}
.flex-control-thumbs { margin:0; }
.flex-control-thumbs li { width: 32%; float:none; margin:0 0 1.5%; display:block; }
.flex-control-thumbs::before{ display:none;}
.flex-control-thumbs::after{width:32%;}

/*RELATED*/
.related .ins { padding:8% 0 4%; }
.related h2 { font-size:1.8rem; }

}


/*------------------------------------------------------------
	BLACK PAGE
------------------------------------------------------------ */
.black { background:#000; }
.black * div, .black * ul, .black * li { border-color:#fff !important; }
.black h1, .black h2, .black h3, .black h4, .black h5, .black h6, .black p, .black a, .black li { color:#fff; }
.black * .btns { background: rgba(255,255,255,1); color:#000; }
.black * .btns:hover { background: rgba(255,255,255,.7); }
.black .bdc ul { border-bottom: 1px solid #999 !important; }
.black .bdc ul li a::after { color:#fff; }
.black .cboxElement p { color: #fff; }
.black .desc h3 { border-color: #fff; }
.black .desc.cartBox a { border: 1px solid #fff!important; }
section.imgbg { margin: 0 auto 0px; padding: 0; width: 100%;  background-color: #000!important; background: url("../images/blacklabel/202002/imgbg-1.jpg") center center no-repeat; background-size: contain; }
section.imgbg img.bl-image { width: 80%; height: auto; margin: 0 auto 40px; text-align: center; z-index: 100; }
@media(max-width:767px) {
section.imgbg img.bl-image { width: 100%; height: auto; }
}

/* pickup */
section.pickup-img { margin: 0 auto 0px; padding: 0; width: 100%;  }
section.pickup-img img { width: 80%; height: auto; margin: 0 auto 40px; text-align: center; z-index: 100; }

@media(max-width:767px) {
section.pickup-img img { width: 100%; height: auto; }
}



/*------------------------------------------------------------
	form
------------------------------------------------------------ */
.contact { padding:6% 8%; }
input[type="text"], [type="password"] { padding:.6em .8em; }


/* iOSでのデフォルトスタイルをリセット */
input[type="submit"], input[type="button"], input[type="reset"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: none; transition: none; text-decoration:none !important; cursor:pointer; transition: all .2s ease-in-out; 
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


@media(max-width:767px) {
}



/*------------------------------------------------------------
	SWIPER
------------------------------------------------------------ */
.topSl .swiper-container, .topSl .swiper-container2 { width: 100%; height: 100%; }
.dtl .swiper-wrapper { transform:none !important; }
.swiper-pagination { position: absolute; bottom:3% !important; }
.swiper-pagination-bullet { width: 10px; height: 10px; background:#f6f6f6; opacity:1; }
.swiper-pagination-bullet-active { background: #888;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin:0 6px; }

@media(max-width:767px) {
}

/* ------------------------------
   loopSlider
------------------------------ */
.simply-scroll-container {
    position: relative;
}
.simply-scroll-clip {
    position: relative;
    overflow: hidden;
}
.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.simply-scroll-list li {
    padding: 0;
    margin: 0;
    width: 400px;
    height: auto;
    float: left;
}
.simply-scroll-list li img {
    display: block;
    width: 100%;
}



/*------------------------------------------------------------
	footer
------------------------------------------------------------ */
a.pagetop { position:fixed; right:1.5%; bottom:3%; background: rgba(0,0,0,.2); color:#fff; padding:.7em .5em .6em .7em; display:block; font-family:ren; font-size:18px; letter-spacing:4px; z-index:9900; border:1px solid rgba(255,255,255,.3); }
a.pagetop:hover { padding:1em .5em .9em .7em; }

footer { position:relative; margin:0; padding:2% 0; background:#000; border-top:1px solid #999; }
footer p { color:#fff; text-align:center; margin:0; padding:0; letter-spacing:1px; font-size:10px; }
footer .menu { margin:3% 0; display:flex; justify-content:center; flex-wrap: wrap; align-items:center; padding:0; }
footer .menu a { position:relative; display:block; margin:0 0 0; padding:0 1.5em; color:#fff; cursor:pointer; background:url(../images/common/linkline.svg) 0 50% no-repeat; }
footer .menu a:last-child { background:url(../images/common/linkline.svg) 100% 50% no-repeat, url(../images/common/linkline.svg) 0 50% no-repeat; }
footer .menu a:hover { text-decoration:underline; }

@media(max-width:767px) {
a.pagetop { right:3%; padding:.6em .5em .4em .6em; font-size:1.4rem; letter-spacing:3px; }
footer { padding:8% 0 6%; }
footer img { margin:0 auto 5%; width:60%; }
footer .menu { width:100%; margin:0 auto; }
footer .menu a { margin:1.2em 0 0; font-size:1.4rem; width: 58%; text-align: center; background:url(../images/common/linkline.svg) 100% 50% no-repeat, url(../images/common/linkline.svg) 0 50% no-repeat;}
footer p { margin:10% 0 0; padding:0; }
}


/*------------------------------------------------------------
	320px
------------------------------------------------------------ */
@media(max-width:320px) {
.col2 li, .col2 li:nth-child(2n) { position:relative; width:94%; }
.blogs li p.cate { font-size:1.1rem; padding:.3em .6em; }
.small-container { padding-bottom: 200%; /* 高さ */ }
input[type="submit"], .inqBtn { font-size:1.6rem; }
img.logo { float:none !important; margin:0 auto 0; display:block; }
p.footInfo { padding:0; }
}


/*------------------------------------------------------------
	others
------------------------------------------------------------ */
@media(min-width:767px) {
	.onlySp { display:none !important; }
}
@media(max-width:767px) {
	.onlyPc { display:none !important; }
}
@media(max-width:411px) {
	.small-container { padding-bottom: 172%; /* 高さ */ }
}







/*------------------------------------------------------------
	items portfolio
------------------------------------------------------------ */
#portfolio {
}

#portfolio-navigation {
text-align: center;
margin-bottom: 0;
}

#portfolio-navigation .navbar-nav {
display: flex;
justify-content: center;
/* 種類が3種以上で開放
justify-content: space-between; */
flex-wrap:wrap;
float: none;
}
#portfolio-navigation .navbar-nav>li { width:15%; text-align:center;  box-sizing:border-box; margin:0 1%; }

#portfolio-navigation .navbar-nav>li>.filter {
font-weight: 300;
font-size:12px;
line-height:1;
padding:.8em 0;
margin:0 ;
width:100%;
color: #000;
background: transparent;
box-sizing: border-box;
transition: all 0.3s;
outline: none;
box-shadow: none;
cursor: pointer;
border:1px solid #000;
}

#portfolio-navigation .navbar-nav>li>.filter:hover,
#portfolio-navigation .navbar-nav>li>.filter:focus,
#portfolio-navigation .navbar-nav>li>.filter.nolink {
background:#e6e6e6;
}

#portfolio-navigation .navbar-nav>li>.filter.mixitup-control-active, 
#portfolio-navigation .navbar-nav>li>.filter.mixitup-control-active:hover,
#portfolio-navigation .navbar-nav>li>.filter.mixitup-control-active:focus {
color: #ffffff;
background: #000;
box-shadow: none;
width:100%;
box-sizing:border-box;
}

.portfolio-grid {
margin-top: 25px;
font-size: 0.1px;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
}

.portfolio-grid:before {
content: '';
display: block;
width: 24%;
margin: .9% .5% 0;
order:1;
}
.portfolio-grid:after {
content: '';
display: block;
width: 24%;
margin: .9% .5% 0;
}

.portfolio-grid .grid-item, .portfolio-grid .gap {
position: relative;
display: block;
margin:.9% .5% 0;
width: 24%;
}
.portfolio-grid .gap { background:none; }

.portfolio-grid .grid-item img {
width: 100%;
height:auto;
border: 1px solid #ccc; 
margin-bottom: 10px;
display:block;
}
.portfolio-grid .grid-item img:hover {
opacity:1;
}


#portfolio .btn {
display: block;
margin: 52px auto 0;
text-align:center;
border-radius:100px;
}

.cboxElement p { font-size: 12px; font-weight: bold;  text-align: center; color: #000;  line-height: 1.25; margin-bottom: 15px; }
.cboxElement p span { display: block; font-weight: normal; }
.cboxElement p span b { display:  inline; color: #ff0000; padding-left: 5px; font-weight: normal; }
@media only screen and (max-width: 767px) {
.cboxElement p { font-size: 10px; font-weight: bold;  }
}

@media only screen and (max-width: 767px) {
.carousel-caption .h1 img { width: 40%; }
.portfolio-grid .grid-item, .portfolio-grid .gap { width: 48%; margin:2% 1% 0; }
.portfolio-grid:after , .portfolio-grid:before { display:none; }
#portfolio-navigation .navbar-nav>li { width:48%; margin-bottom:2.5%; }
.portfolio-grid { margin-top:0; }
#portfolio-navigation .navbar-nav>li>.filter {font-size:1.2rem;padding: 0.8em 0;}
}





/*  company + law */
h1.comp { font-size: 1.8em; line-height: 1.5; font-family: helve; letter-spacing: 0; }
p.comp {  font-size: 1.2em; line-height: 1.5; }
table.company  { margin: 40px auto; width: 100%; }
table.company  th { background: #aaa; border: solid 1px #ccc;  color: #fff;  padding: 10px; }
table.company td {border: solid 1px #ccc; padding: 10px; }
@media screen and (max-width: 768px) {
td:last-child { border-bottom: solid 1px #ccc; width: 100%; }
td { width: 80%;  }
th, td { border-bottom: none; display: block; width: 100%; }
}


/* news page */
div.information { width: 100%; margin: 0 auto; padding: 1.5em; border-top: 1px  solid #ccc;  }
div.information.last { width: 100%; margin: 0 auto; padding: 1.5em; border-top: 1px  solid #ccc; border-bottom: 1px  solid #ccc }
div.information p { font-size: 1.0em; color: #000; margin: 0; text-align: left; }
div.information p span { color: #999; padding-right: 20px; }
div.information img { margin: 10px 0 0; text-align: left; width: 400px; }
@media screen and (max-width: 768px) {
div.information img { margin: 10px auto 0; text-align: center; width: 100%; }
div.information p span { display: block; }
}



/*  */
.divlink {
    position: relative;
    z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.divlink a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 100; /* 必要であればリンク要素の重なりのベース順序指定 */
}


.store-list h2{
margin-top: 40px; 
}

.store-list h3{
text-align: center; 
margin-top: 20px; 
margin-bottom:15px;
}

.shop-na {
color: #1a31dc;
}