@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@100;200;300;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
/* CSS Document */

/*ブラウザクリア*/
body {
margin: 0;
}

ul {
display: block;
margin-block-end: 0;
margin-block-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
padding-inline-start: 0;
}

p {
display: block;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
margin-block-end: 0;
margin-block-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
}

h2 {
display: block;
font-family: Arial;
font-size: 0;
font-weight: bold;
margin-block-end: 0;
margin-block-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
}

h3 {
font-family: Arial;
}

img{max-width: 100%;}

/*ブラウザクリア*/

.contents_area_{
	padding-bottom: 0;
}

/******************************************************
main page
******************************************************/
#dungarees {
font-style: normal;
font-weight: 500;
line-height: 1.6;
position: relative;
width: 100%;
}


/***** main *****/
#dungarees .main {
background-image: url(img/main_pc.jpg);
background-size: cover;
height: 100vh;
position: relative;
width: 100%;
z-index: -1;
}

#dungarees .main::after {
background: rgba(0, 0, 0, .2);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

#dungarees .main img.main_logo {
display: block;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40%;
z-index: 1;
}

#dungarees .main img.main_logo::after {
content: "";
filter: drop-shadow(0 0 10px #fff);
}

/***** lead *****/
#dungarees .lead {
margin: 160px auto;
text-align: center;
width: 70%;
}

#dungarees .lead p {
max-width: 1080px;
font-size: 1.45rem;
line-height: 2.6;
font-weight: bold;
text-align: justify;
margin: 0 auto;
}

/***** contents *****/
#dungarees .contents {
width: 100%;
}

#dungarees .contents .products {
margin: 0 auto 24px;
text-align: right;
width: 95%;
}

#dungarees .contents .products h3 {
display: block;
font-size: 3.2rem;
}

#dungarees .contents .products p {
font-size: 1.6rem;
font-weight: bold;
}

/** 商品バナー **/
#dungarees .contents .itemBox {
align-items: center;
border: solid 1px #ccc;
display: flex;
width: 100%;
}

#dungarees .contents .item-wrap:not(:first-child) .itemBox {
border-top: 0;
}

#dungarees .contents .itemBox .leftImg {
width: 60%;
}

#dungarees .contents .itemBox .leftImg img {
display: block;
object-fit: cover;
}

#dungarees .contents .itemBox .rightText {
display: block;
text-align: center;
width: 40%;
}

#dungarees .contents .itemBox .rightText h3 {
font-size: 2.4rem;
line-height: 1;
margin-bottom: 8px;
}

#dungarees .contents .itemBox .rightText p {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 24px;
}

#dungarees .contents .itemBox .rightText a {
border: solid 1px #000;
font-family: Arial;
font-weight: bold;
padding: 8px;
width: 200px;
display: block;
margin: 0 auto;
}

/*- バナー内部 -*/
#dungarees .itemDitail {
margin: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .6s ease-out, opacity .6s ease-out;
visibility: hidden;
}

#dungarees .itemDitail.active {
max-height: 3000px;
opacity: 1;
visibility: visible;
}

#dungarees .itemDitail .ditail {
align-items: center;
display: flex;
justify-content: space-between;
margin: 80px auto 120px;
max-width: 1080px;
width: 90%;
}

#dungarees .itemDitail .ditail .ditailText {
text-align: left;
width: 45%;
}

#dungarees .itemDitail .ditail .ditailText p.itemText {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 40px;
line-height: 2;
}

#dungarees .itemDitail .ditail .ditailText p.lot,
#dungarees .itemDitail .ditail .ditailText p.price {
font-family: Arial;
font-size: 1rem;
font-weight: bold;
}

#dungarees .itemDitail .ditail .ditailText a.buy{
background: #000;
width: 200px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
margin-top: 24px;
transition: .6s;
}
#dungarees .itemDitail .ditail .ditailText a.buy::before{
content: "";
background: url(./img/icon_bag.png)no-repeat;
background-size: contain;
width: 20px;
aspect-ratio: 1/1;
display: block;
margin-right: 16px;
margin-left: -24px;
}
#dungarees .itemDitail .ditail .ditailText a.buy::after{
content: "BUY";
color: #fff;
letter-spacing: .1rem;
font-size: .8rem;
}
#dungarees .itemDitail .ditail .ditailText a.buy:hover{
opacity: .6;
transition: .6s;
}

#dungarees .itemDitail .colBox {
max-width: 1080px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto 32px;
width: 90%;
}

#dungarees .itemDitail .colBox a {
display: block;
margin-bottom: 12px;
width: 24%;
}

#dungarees .itemDitail .colBox a img {
display: block;
width: 100%;
}

#dungarees .itemDitail a.close {
border: solid 1px #000;
display: block;
font-family: Arial;
font-weight: bold;
margin: 0 auto 120px;
padding: 10px 40px;
width: 160px;
text-align: center;
}

/*--------------------------
modal
---------------------------*/
.modal {
background-color: rgba(0, 0, 0, .5);
display: none;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}

.modal-content {
background-color: #fff;
margin: 16px auto;
padding: 20px;
width: 80%;
}

.modal .modal-content .icon .close {
aspect-ratio: 1 / 1;
cursor: pointer;
height: auto;
position: absolute;
right: 30px;
top: 30px;
transition: .6s ease;
width: 30px;
z-index: 0;
}

.modal .modal-content .icon .close:before,
.modal .modal-content .icon .close:after {
background-color: #333;
content: "";
display: inline-block;
height: 30px;
position: absolute;
width: 1px;
}

.modal .modal-content .icon .close:hover {
opacity: .6;
}

.modal .modal-content .icon .close::before {
transform: rotate(-45deg);
}

.modal .modal-content .icon .close::after {
transform: rotate(45deg);
}

/*--------------------------
slide
---------------------------*/
.slide {
aspect-ratio: 1 / 1;
background: #fff;
margin: 0;
overflow: hidden;
position: relative;
width: 100%;
}

.slide img {
display: block;
height: 100%;
position: absolute;
width: 100%;
/*opacity: 0;
animation: slideAnime 8s ease infinite; }
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }*/
}


@keyframes slideAnime {
0% {
opacity: 0;
}

25% {
opacity: 1;
}

50% {
opacity: 1;
}

75% {
opacity: 0;
}

100% {
opacity: 0;
}
}

/*--------------------------
slide
---------------------------*/

#dungarees .slide_wrap {
margin-left: 32px;
width: 40%;
}

#dungarees ul.slide-item-second {
display: block;
margin: 0 auto;
margin-bottom: 1em;
}

#dungarees ul.slide-item {
height: auto;
width: 100%;
}

#dungarees ul.slide-item li.slick-slide li {
height: auto;
}

#dungarees ul.slide-item li.slick-slide img {
width: 100%;
}

#dungarees ul.slide-item.slick-initialized .slick-slide {
display: block;
/*width: 350px!important;*/
height: auto !important;
margin: 0 auto;
}

#dungarees .slide-item {
opacity: 1;
/*transition: opacity .3s linear;*/
}

#dungarees .slide-item.slick-initialized {
opacity: 1;
}

#dungarees ul.slide-item-bottom img {
display: block;
height: 160px;
margin: 0 auto;
}

#dungarees ul.slide-item.slick-initialized.slick-slider.slick-dotted .slick-list {
width: 100% !important;
}

/***************
slide-item
***************/

/***************
slick-option
***************/
#dungarees button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
border-radius: 0;
margin: 0;
outline: none;
padding: 0;
}

#dungarees .slick-slide {
outline: none;
}

#dungarees .slick-slide:not(.slick-current) {
opacity: 1;
}

#dungarees .slick-slide img {
display: block;
margin: 0 auto;
width: 100%;
}

#dungarees .slick-initialized {
opacity: 1;
}


#dungarees .slide-arrow {
margin-top: -15px;
position: absolute;
top: 50%;
}

#dungarees button.prev-arrow {
border-radius: 50px;
display: block;
height: 45px;
left: -32px;
margin-top: -10px;
position: absolute;
width: 45px;
z-index: 4;
}

#dungarees button.next-arrow {
border-radius: 50px;
display: block;
height: 45px;
margin-top: -10px;
position: absolute;
right: -32px;
width: 45px;
z-index: 4;
}

#dungarees button.prev-arrow::before {
border-right: solid 2px #000;
border-top: solid 2px #000;
content: "";
content: "";
height: 24px;
left: 5px;
margin-top: -5px;
position: absolute;
top: 45%;
transform: rotate(225deg);
width: 24px;
z-index: 5;
}

#dungarees button.next-arrow::before {
border-right: solid 2px #000;
border-top: solid 2px #000;
content: "";
content: "";
height: 24px;
margin-top: -5px;
position: absolute;
right: 5px;
top: 45%;
transform: rotate(45deg);
width: 24px;
z-index: 5;
}

#dungarees .slick-dotted.slick-slider {
margin: 0 auto;
width: auto !important;
}

#dungarees .slick-dots {
bottom: 5px;
display: block;
list-style: none;
margin: -40px auto !important;
padding: 0;
position: absolute;
text-align: center;
width: 100%;
}

#dungarees .slick-dots li {
cursor: pointer;
display: inline-block;
height: 24px;
margin: 0 0;
padding: 0;
position: relative;
width: 24px;
}

#dungarees .slick-dots li button {
background: transparent;
border: 0;
color: transparent;
cursor: pointer;
display: block;
font-size: 0;
height: 4px;
line-height: 0;
outline: none;
padding: 4px;
width: 4px;
}

#dungarees .slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}

#dungarees .slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}

#dungarees .slick-dots li button:before {
background: #ccc;
border-radius: 50px;
content: "";
font-family: inherit;
-webkit-font-smoothing: antialiased;
height: 16px;
left: 0;
line-height: 8px;
opacity: 1;
-moz-osx-fontsmoothing: grayscale;
position: absolute;
text-align: center;
top: 0;
width: 16px;
}

#dungarees .slick-dots li.slick-active button:before {
background: #000;
border: solid 3px #ccc;
border-radius: 50px;
content: "";
height: 10px;
opacity: 1;
width: 10px;
}


/***************
slick-option
***************/

@media only screen and (max-width: 750px) {
#dungarees .contents .zoomscroll-arae figure.item {
margin: 0 auto;
width: 90%;
}

.parascroll-container {
position: sticky;
top: 0;
z-index: -1;
}

.sticky-wrapper {
position: relative;
z-index: 1;
}

.sticky {
position: relative;
z-index: 2;
}

.sticky._second {
padding-top: 8px;
}

.sticky>div {
padding-top: 80px;
}

.sticky._second>.zoomscroll-arae {
padding-bottom: 0;
}

#dungarees .contents .wrap._anti {
padding-bottom: 80px;
}
}

/***** fade *****/
#dungarees .sa {
opacity: 0;
transition: all 2s ease-in;
}

#dungarees .sa.show {
opacity: 1;
transform: none;
}

/******************************************************
main page
******************************************************/


/******************
fade
*******************/
.sa {
opacity: 0;
transition: all 1s ease;
}

.sa.show {
opacity: 1;
transform: none;
}

.sa--lr {
transform: translate(-100px, 0);
}

.sa--rl {
transform: translate(100px, 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
*******************/

/********オーダー**********/
.oA {
order: 1;
}

.oB {
order: 2;
}

/********オーダー**********/

.pc {
display: block !important;
}

.sp {
display: none !important;
}

@media only screen and (max-width: 750px) {
.pc {
display: none !important;
}

.sp {
display: block !important;
}

.contents_area_ {
padding-top: 43px;
}

/******************************************************
main page
******************************************************/

/***** main *****/
#dungarees .main {
background-image: url(img/main_sp.jpg);
background-size: cover;
height: 100vh;
position: relative;
width: 100%;
z-index: -1;
}

#dungarees .main img.main_logo {
width: 72%;
}


/***** lead *****/
#dungarees .lead {
margin: 80px auto;
text-align: center;
width: 80%;
}

#dungarees .lead p {
font-size: .9rem;
line-height: 2;
}


/***** contents *****/
#dungarees .contents {
width: 100%;
}

#dungarees .contents .products {
margin: 0 auto 24px;
text-align: center;
}

#dungarees .contents .products h3 {
font-size: 2rem;
}

#dungarees .contents .products p {
font-size: 1rem;
}

/** 商品バナー **/
#dungarees .contents .itemBox {
border: none;
position: relative;
width: 100%;
}

#dungarees .contents .itemBox .leftImg {
width: 100%;
}

#dungarees .contents .itemBox .leftImg img {
display: block;
object-fit: cover;
}

#dungarees .contents .itemBox .rightText {
color: #fff;
display: block;
left: 50%;
position: absolute;
text-align: center;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
z-index: 1;
}

#dungarees .contents .itemBox .rightText h3 {
font-size: 2.4rem;
}

#dungarees .contents .itemBox .rightText p {
font-weight: bold;
margin-bottom: 40px;
}

#dungarees .contents .itemBox .rightText a {
background-color: #fff;
border: solid 1px #fff;
}

/*- バナー内部 -*/

#dungarees .itemDitail .ditail {
flex-wrap: wrap;
margin: 80px auto 80px;
width: 100%;
}

#dungarees .itemDitail .ditail .ditailText {
margin: 0 auto 64px;
width: 80%;
}

#dungarees .itemDitail .ditail .ditailText p.itemText {
font-size: 1rem;
margin-bottom: 24px;
}

#dungarees .itemDitail .ditail .ditailText p.lot,
#dungarees .itemDitail .ditail .ditailText p.price {
font-size: .9rem;
text-align: center;
}

#dungarees .itemDitail .ditail .ditailText a.buy{
margin: 24px auto 0;
}
#dungarees .itemDitail .ditail .ditailText a.buy::before{
width: 20px;
margin-right: 16px;
margin-left: -24px;
}
#dungarees .itemDitail .ditail .ditailText a.buy::after{
font-size: .7rem;
}

#dungarees .itemDitail .ditail .ditailText .itemName {
margin-bottom: 40px;
text-align: center;
width: 100%;
}

#dungarees .itemDitail .ditail .ditailText .itemName h3 {
font-size: 3.2rem;
line-height: 1;
}

#dungarees .itemDitail .ditail .ditailText .itemName p {
font-size: 1.2rem;
}

#dungarees .itemDitail .colBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto 32px;
width: 90%;
}

#dungarees .itemDitail .colBox a {
display: block;
margin-bottom: 2%;
width: 49%;
}

#dungarees .itemDitail a.close {
padding: 8px 0;
}

#dungarees .contents .wrap {
flex-wrap: wrap;
margin: 80px auto;
}

/***** slide *****/
#dungarees .slide_wrap {
margin: 0 auto;
width: 80%;
}

#dungarees button.prev-arrow {
left: -24px;
margin-top: -10px;
}

#dungarees button.next-arrow {
margin-top: -10px;
right: -24px;
}

#dungarees button.prev-arrow::before {
height: 18px;
width: 18px;
}

#dungarees button.next-arrow::before {
height: 18px;
width: 18px;
}
#dungarees .slick-dots li {
height: 18px;
width: 18px;
}

#dungarees .slick-dots li button:before {
height: 12px;
width: 12px;
}

#dungarees .slick-dots li.slick-active button:before {
border: solid 2px #ccc;
height: 8px;
width: 8px;
}
#dungarees .slick-dots {
margin: -32px auto !important;
}

/***** modal *****/

#modal .modal-content {
height: 90%;
overflow-y: scroll;
}

#modal .modal-content .modal-item .modal-heading {
margin-top: 32px;
text-align: center;
}

#modal .modal-content .modal-item .modal-heading h3 {
font-size: 2rem;
line-height: 1;
}

#modal .modal-content .modal-item .modal-heading p {
font-size: 1rem;
font-weight: bold;
margin-bottom: 20px;
}

#modal .modal-content .modal-item .modalText {
margin: 0 auto;
width: 80%;
}

#modal .modal-content .modal-item .modalText p {
font-size: 14px;
text-align: justify;
}

#modal .modal-content .modal-item .modalText a.buy{
background: #000;
width: 200px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
transition: .6s;
margin: 24px auto 0;
}
#modal .modal-content .modal-item .modalText a.buy::before{
content: "";
background: url(./img/icon_bag.png)no-repeat;
background-size: contain;
width: 20px;
aspect-ratio: 1/1;
display: block;
margin-right: 16px;
margin-left: -24px;
}
#modal .modal-content .modal-item .modalText a.buy::after{
content: "BUY";
color: #fff;
letter-spacing: .1rem;
font-size: .8rem;
}

#modal .modal-content .modal-item .modalText p.itemText {
margin-bottom: 20px;
}

#modal .modal-content .modal-item .modalText .modalData {
width: 100%;
margin: 0 auto;
}

#modal .modal-content .modal-item .slide_wrap {
margin: 32px auto 0;
}

#modal .modal-content .modal-item .colBox {
display: grid;
gap: 1% 2%;
grid-template-columns: repeat(2, 2fr);
margin: 33px auto 0;
width: 80%;
}

#modal .modal-content .modal-item .colBox a {
display: block;
line-height: 0;
}

#modal .modal-content .modal-item .close {
border: solid 1px #000;
display: block;
font-family: Arial;
font-weight: bold;
margin: 30px auto;
padding: 10px 40px;
width: 160px;
font-size: .8rem;
text-align: center;
}

/***** slide *****/

/***** fade *****/
#dungarees .sa {
opacity: 0;
transition: all 2s ease-in;
}

#dungarees .sa.show {
opacity: 1;
transform: none;
}

/********オーダー**********/
.oA {
order: 2;
}

.oB {
order: 1;
}

/********オーダー**********/
/******************************************************
main page
******************************************************/
}