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

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

/******************
#WranglerNeedles
******************/
#WranglerNeedles{
width:100%;
font-family: 'Helvetica Neue','Helvetica','Arial', sans-serif;
background: #fff;
padding-bottom: 0px;
font-size: 16px;
}
#WranglerNeedles a{
text-decoration: none;
transition: .6s;
}

#WranglerNeedles a:hover{
opacity: .5;
transition: .6s;
}

/***************
FV
***************/
#WranglerNeedles .fv_area{
width: 100%;
height: 100%;
background: #000;
padding: 0px;
}

#WranglerNeedles .fv_in{
width: 100%;
margin: 0 auto;
position: relative;
}

#WranglerNeedles .fv_image{
width: 100%;
}

#WranglerNeedles .fv_text_area{
width: 50%;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
margin: 0 auto;
}

#WranglerNeedles .fv_text{
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
margin: 0 auto;
z-index: 2;
}
/***************
FV
***************/

/***************
photo
***************/
#WranglerNeedles .photos{
width: 90%;
margin: 60px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
#WranglerNeedles .photos img{
width: 100%;
}
#WranglerNeedles .photos .photo_img{
width: 48%;
margin-bottom: 4%;
}
#WranglerNeedles .photos .photo_img:nth-of-type(3),#WranglerNeedles .photos .photo_img:nth-of-type(4){
margin-bottom: 0%;
}
/***************
photo
***************/

/***************
item
***************/
#WranglerNeedles .item_area{
background: #000;
padding: 60px 0 10px;
color: #fff;
}
#WranglerNeedles .item_area .item_box{
margin-bottom: 50px;
}
#WranglerNeedles .item_area .item_name{
width: 80%;
margin: 0 auto;
font-size: 1.8rem;
font-weight: 200;
border-bottom: solid 1px #fff;
padding-bottom: 5px;
text-align: center;
letter-spacing: .1em;
}
#WranglerNeedles .tops{
width: 1000px;
margin: 60px auto;
}
#WranglerNeedles .bottoms{
width: 1000px;
margin: 60px auto;
}
#WranglerNeedles .h2{
font-family: 'Shadows Into Light', cursive;
font-size: 3em;
display: flex;
  color: #fff;
}
#WranglerNeedles .h2:after {
  border-top: 2px solid;
  content: "";
  width: 100%;
  margin-top: .6em;
}
#WranglerNeedles .h2:after {
  margin-left: .5em;
}
/***************
item
***************/
/***************
item-info
***************/
#WranglerNeedles .item_A{
width: 70%;
margin: 30px auto 10px;
display: block;
color: #fff;
}
#WranglerNeedles .item_A .image_area{
width: 100%;
margin: 0 auto;
}
#WranglerNeedles .item_box .text_area{
position: static;
width: 90%;
margin: 30px auto;
}
#WranglerNeedles .item_box .text_in{
    position: static;
    background: #363636;
padding: 1.5em;
margin-top: 2em;
line-height: 1.8;
}

#WranglerNeedles .item_box .text_in p{
font-size: .9rem;
}

#WranglerNeedles .item_box .buy_area{
display: block;
  align-items: center;
  margin-top: 0px;
}

#WranglerNeedles .item_box .buy_area p{
margin-right: 0px;
margin-top: 0px;
text-align: center;
font-size: .9em;
}
#WranglerNeedles .item_A .text_area p{
font-size: .95em;
line-height: 1.5;
letter-spacing: 0em;
margin: 0;
bottom: 0;
}
#WranglerNeedles .item_A p:nth-last-of-type(1){
font-size: .95rem;
line-height: 1.6;
text-align: justify;
margin-top: 50px;
}
#WranglerNeedles .item_box a.detail {
pointer-events: all;
border: solid 1px #fff;
padding: 10px 50px;
display: block;
width: 100px;
background: #fff;
margin: 10px auto;
}
#WranglerNeedles .item_box a.detail:hover{
opacity: 1;
}
#WranglerNeedles .item_box a.detail p{
position: relative;
font-size: 1rem;
font-weight: bold;
color: #000;
margin-top: 0px;
}
#WranglerNeedles .item_box a.detail p::after {
content: '';
position: absolute;
top: 7px;
right: -22px;
width: 16px;
height: 6px;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
transform: skew(45deg);
transition: .26s;
}
#WranglerNeedles .item_box a.detail p:hover::after {
right: -35px;
}
/***************
item-info
***************/

/***************
interview
***************/
#WranglerNeedles .intv{
padding: 60px 0;
background: #594a7c;
    color: #fff;
}
#WranglerNeedles .intv .in_inner{
width: 90%;
margin: 0 auto;
display: block;
justify-content: space-between;
	align-items: center;
}
#WranglerNeedles .intv .in_inner img{
height: 130px;
    display: block;
    margin: 0 auto 10px;
}

#WranglerNeedles .intv .in_inner .int_side{
width: 100%;
text-align: center;
}

#WranglerNeedles .intv .in_inner .int_side p:nth-of-type(1){
font-size: 1.5em;
font-weight: bold;
margin-bottom: 5px;
}

#WranglerNeedles .intv .in_inner .int_side p:nth-of-type(2){
font-size: .9em;
margin-bottom: 5px;
}

#WranglerNeedles .intv .in_inner .int_side a{
font-size: 1.1em;
font-weight: bold;
color: #fff;
}

#WranglerNeedles .int_text .int_ti{
font-size: 1.4em;
font-weight: bold;
padding-bottom: 10px;
margin: 0px auto 30px;
text-align: center;
border-bottom: solid 1px #fff;
}

#WranglerNeedles .int_text .int_ti .span1{
font-size: 4vw;
}

#WranglerNeedles .int_text .int{
font-weight: bold;
margin: 30px 0 10px;
font-size: 1em;
padding: 15px;
/*background: #eee;*/
text-align: justify;
  text-indent: -1.5em;
  padding-left: 2em;
  line-height: 1.8;
}

#WranglerNeedles .int_text .int::before{
content: "ー";
margin-right: .5em;
}

#WranglerNeedles .int_text .ans{
width: 95%;
font-size: .9em;
line-height: 1.8;
margin: 0 auto;
text-align: justify;
  padding-left: 2em;
}


#WranglerNeedles .int_cont {
width: 90%;
  display: block;
  margin: 0px auto;
  position: relative;
}

#WranglerNeedles .int_text .int_text_in{
width: auto;
/*background: #F7F7F7;*/
padding: 0px 15px 80px;
margin: 0 auto;
}

#WranglerNeedles .int_text {
  max-height: 100px;
  overflow: hidden;
  position: relative;
  /*border-bottom: 1px solid #aaa;*/
  transition: .5s;
  margin-left: 0px;
}

#WranglerNeedles .int_text::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 40%;
    bottom: 0;
    /*background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);*/
    pointer-events: none;
    transition: 1s;
}

#WranglerNeedles .int_cont input {
  visibility: hidden;
}

#WranglerNeedles .int_cont label {
width: 90%;
    position: absolute;
    bottom: -.8em;
    display: block;
    font-size: 1em;
    padding: 15px 0;
    right: 4.5%;
    background: #fff;
    color: #000;
    z-index: 999;
    cursor: pointer;
    text-transform: uppercase;
    margin: 0 auto;
    text-align: center;
    border-radius: 40px;
}

#WranglerNeedles .int_cont label:before {
  content: "続きを読む";
  margin-left: 0px;
  color: #594a7c;
}

#WranglerNeedles .int_cont input:checked + label:before {
  content: "閉じる";
    margin-left: 0px;
    color: #594a7c;
}

#WranglerNeedles input[type=checkbox]:checked ~ .int_text {
 max-height: 1700px;
}

#WranglerNeedles input[type=checkbox]:checked ~ .int_text:before {
 opacity: 0
}
/***************
interview
***************/

/******************
animathion
******************/
#WranglerNeedles .mask_wrapper .mask {
transform: translateX(-101%);
backface-visibility: hidden;
overflow: hidden;
transition: transform .8s .2s;
}
#WranglerNeedles .visible {
opacity: 1;
transform: translateY(0);
}
#WranglerNeedles .mask_wrapper.visible .mask, #WranglerNeedles .mask_title.visible .mask, #WranglerNeedles .mask_btn.visible .mask {
transform: translateX(0%);
}
#WranglerNeedles .mask_wrapper.visible img, #WranglerNeedles .mask_title.visible img, #WranglerNeedles .mask_btn.visible img {
transform: translateX(0%);
}
#WranglerNeedles .mask_wrapper img {
width: 100%;
height: auto;
transform: translateX(101%);
backface-visibility: hidden;
overflow: hidden;
transition: transform .8s .2s;
}
/******************
animathion
******************/

/******************
Slide
******************/
#WranglerNeedles .slide_wrap{
margin: 60px 0;
}
#WranglerNeedles .slide_wrap2{
margin: 60px 0;
}
#WranglerNeedles .slide_wrap3{
margin: 60px 0;
}
#WranglerNeedles .slide{
}
#WranglerNeedles .slick-slider .slide_img{
margin: 0 10px;
}
#WranglerNeedles .slick-slider .slide_img img{
width: 100%;
max-width: 100%;
}
#WranglerNeedles .slider .slick-next, .slider2 .slick-next, .slider3 .slick-next, .slider4 .slick-next, .slider5 .slick-next{
display: none!important;
}
/******************
Slide
******************/

/***************
slide-item
***************/
#WranglerNeedles ul.slide-item,
#WranglerNeedles ul.slide-item-second{
margin-bottom: 1em;
display: block;
margin: 0 auto;
}
#WranglerNeedles ul.slide-item {
width: 100%;
height: auto;
}
#WranglerNeedles ul.slide-item li.slick-slide li{
height: auto;
}
#WranglerNeedles ul.slide-item li.slick-slide img {
width: 100%;
}
#WranglerNeedles ul.slide-item.slick-initialized .slick-slide{
margin: 0 auto;
display: block;
/*width: 350px!important;*/
height: auto!important;
}
#WranglerNeedles .slide-item{
opacity: 0;
transition: opacity .3s linear;
}
#WranglerNeedles .slide-item.slick-initialized{
opacity: 1;
}
#WranglerNeedles ul.slide-item-bottom img{
height: 160px;
margin: 0 auto;
display: block;
}
#WranglerNeedles ul.slide-item.slick-initialized.slick-slider.slick-dotted .slick-list{
width: 100% !important;
}
/***************
slide-item
***************/

/***************
slick-option
***************/
#WranglerNeedles button{
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
#WranglerNeedles .slick-slide{
outline:none;
}
#WranglerNeedles .slick-slide:not(.slick-current) {
opacity: .5;
}
#WranglerNeedles .slick-slide img{
margin: 0 auto;
display: block;
width: 100%;
}
#WranglerNeedles .slick-initialized{
opacity: 1
}
#WranglerNeedles .slide-arrow{
position: absolute;
top: 50%;
margin-top: -15px;
}
#WranglerNeedles .prev-arrow{
content: '';
width: 30px;
height: 30px;
margin-top: -5px;
border-top: solid 2px #000;
border-right: solid 2px #000;
transform: rotate(225deg);
position: absolute;
top: 50%;
left: 10px;
z-index: 5;
}
#WranglerNeedles .next-arrow{
content: '';
width: 30px;
height: 30px;
margin-top: -5px;
border-top: solid 2px #000;
border-right: solid 2px #000;
transform: rotate(45deg);
position: absolute;
top: 50%;
right:10px;
z-index: 5;
}
#WranglerNeedles .slick-dotted.slick-slider {
margin: 0 auto;
width: 100% !important;
}
#WranglerNeedles .slick-dots2 {
position: absolute;
bottom: 5px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%; 
}
#WranglerNeedles .slick-dots2 li {
position: relative;
display: inline-block;
height: 15px; 
width: 10px;
margin: 0 5px;
padding: 0;
cursor: pointer; 
}
#WranglerNeedles .slick-dots2 li button {
border: 0;
background:transparent; 
display: block; 
height: 20px; 
width: 20px; 
outline: none;
line-height: 0px; 
font-size: 0px; 
color: transparent;
padding: 5px;
cursor: pointer; 
}
#WranglerNeedles .slick-dots2 li button:hover, .slick-dots2 li button:focus {
outline: none;
}
#WranglerNeedles .slick-dots2 li button:hover:before, .slick-dots2 li button:focus:before {
opacity: 1;
}
#WranglerNeedles .slick-dots2 li button:before {
position: absolute;
top: 0;
left: 0; 
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 50px;
line-height: 20px;
text-align: center;
color: #000;
opacity: 1;
-webkit-font-smoothing:antialiased;
-moz-osx-fontsmoothing:grayscale;
}
#WranglerNeedles .slick-dots2 li
.slick-active button:before {
color: black; 
opacity: 0.75;
}
#WranglerNeedles .slick-dots2 li button:before{
font-family: 'slick';
font-size: 10px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '●';
text-align: center;
opacity: 1;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#WranglerNeedles .slick-dots2 li.slick-active button:before
{
opacity: 1;
color:#C294DA; 
}
/***************
slick-option
***************/

/******************
fade
******************/
.sa {opacity: 0;transition: all 2s ease;width: 100%;}
.sa.show {opacity: 1;transform: none;}
.sa--lr {transform: translate(-200px, 0);}
.sa--rl {transform: translate(200px, 0);}
.sa--up {transform: translate(0, 100px);}
.sa--down {transform: translate(0, -100px);}
.sa--scaleUp {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL {transform: rotate(180deg);}
.sa--rotateR {transform: rotate(-180deg);}
/******************
fade
******************/

/******************
#WranglerNeedles
******************/