@charset "utf-8";
/* ----------------------- ¥È¥Ã¥× ----------------------- */
.sec {
  position: relative;
  overflow: hidden;
}

:where(.sec) {
  padding: min(10vh, 100px) 0 min(10vh, 100px) 0;
}
:where(.sec .secHeadline) {
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0 0 min(5vh, 60px) 0;
  color: #000;
  font-weight: 500;
  font-style: normal;
}
.sec .secHeadline span:nth-of-type(1) {
  font-size: min(4vw, 16px);
  font-weight: 200;
}
.sec .secHeadline span:nth-of-type(2) {
  font-size: min(4vw, 24px);
  font-weight: 400;
  font-family: 'Sofia Sans Extra Condensed';
}

:where([class*="Inner"]) {
  width: 100%;
  max-width: var(--width-inner);
  margin: 0 auto;
}
:where(.secInner) {
  position: relative;
  width: 100%;
  margin: 0 auto 3em auto;
  max-width: var(--width-inner);
}
:where(.secInner:last-of-type) {
  margin: 0 auto;
}


.flexItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(468px, 1fr));
  padding: 0;
  gap: 2rem;
}
.flexItems:has(.item:only-child) {
  display: block;
}

.flexItems .item {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 12px;
}
.flexItems .item::before {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  background: radial-gradient(circle,rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .75) 100%);
  width: 100%;
  height: 100%;
  transition: all 2s ease;
}
.flexItems .item h3 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  height: fit-content;
  line-height: 1;
  margin: auto;
  color: var(--color01);
  font-weight: 400;
}
.flexItems .item h3 span:nth-of-type(1) {
  font-size: min(3vw, 24px);
  font-weight: 200;
  font-family: 'Afacad Flux';
  letter-spacing: .1em;
  line-height: 1;
}
.flexItems .item h3 span:nth-of-type(2) {
  font-size: min(6vw, 48px);
  font-weight: 400;
  font-family: 'Sofia Sans Extra Condensed';
  letter-spacing: .25em;
  transform: scaleX(.7) scaleY(1.5);
  line-height: .9;
  padding-left: .25em;
}
.flexItems .item h3 span:only-child {
  font-size: min(6vw, 36px);
  font-weight: 400;
}

.flexItems .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: all .5s ease;
}
.flexItems .item:hover img {
  transform: scale(1.05);
}
.flexItems .item:hover::before {
  background: radial-gradient(circle,rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .25) 100%);
}
.top .flexItems .item[href="javascript:void(0)"]:hover::before {
  display: block;
  background: radial-gradient(circle,rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .75) 100%);
}




/* SEC01
______________________________________________ */
.sec01 {
  padding: 0 0 1rem 0;
}
.sec01 .secInner {
  max-width: var(--width-full);
}

/* SEC02
______________________________________________ */
.sec02 {
  padding: 0 0 1rem 0;
}
.sec02 .secInner {
  max-width: var(--width-full);
}

/* SEC03
______________________________________________ */
.sec03 {
  padding: 0 0 1rem 0;
}
.sec03 .secInner {
  max-width: var(--width-full);
}

/* SEC04
______________________________________________ */
.sec04 {
  padding: 2rem 0 min(10vh, 100px) 0;
}
.sec04 .secInner {
  max-width: var(--width-full);
}
.sec04 .secInner .flexItems .item h3 {
  color: var(--color02);
}
.sec04 .secInner .flexItems .item:nth-of-type(2)::before {
  display: none;
}











/******************************/
/* TOP RECOMMEND */
/******************************/
.p-recommend.u-container {
  padding-bottom: 0;
}
/******************************/
/* NEW¡¡ARRIVAL */
/******************************/
.p-new-item.u-container {
  padding-bottom: 0;
}

/******************************/
/* TOP INFORMATION */
/******************************/
.p-information {
  padding-bottom: 0;
}
@media screen and (max-width: 1030px) {
  .p-information {
    padding-bottom: 45px;
  }
}
.p-information__body {
  margin-left: 60px;
  margin-right: 60px;
  line-height: 2;
}
@media screen and (max-width: 1030px) {
  .p-information__body {
    margin-left: 0;
    margin-right: 0;
  }
}
/******************************/
/* TOP FREE */
/******************************/
.p-free__body {
  margin-left: 60px;
  margin-right: 60px;
  line-height: 2;
}
@media screen and (max-width: 1030px) {
  .p-free__body {
    margin-left: 0;
    margin-right: 0;
  }
}