@charset "UTF-8";
/* ========================
  SETTING
======================== */
#UU250729velortop {
  --rate: calc(100vw/750);
}

@media screen and (min-width: 768px) {
  #UU250729velortop {
    --rate: calc(100vw/1400);
  }
}
:root {
  --color-black: #555;
  --color-white: #fff;
  --color-base: var(--color-black);
  --color-bg: #E4E4E4;
}

/* ========================
  BG
======================== */
/* ========================
  RESET
======================== */
.UU250729velortop {
  width: 100%;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .lp {
    padding-bottom: 0 !important;
  }
  .home-content.support-content {
    margin-top: 0 !important;
  }
}
@media screen and (min-width: 768px) {
  body {
    padding-top: 16.3rem;
  }
}
/* ========================
  COMMON
======================== */
body {
  background-color: var(--color-bg);
}

.UU250729velortop {
  color: var(--color-base);
  font-feature-settings: "palt";
  text-justify: inter-ideograph;
  text-align: center;
}
.UU250729velortop img {
  display: block;
  width: 100%;
}
.UU250729velortop__section--img-box > div {
  position: relative;
  background-color: var(--color-bg);
}
.UU250729velortop__section--img-box > div:first-of-type {
  z-index: 2;
}
.UU250729velortop__section--img-box > div:last-of-type {
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .UU250729velortop {
    overflow: hidden;
  }
  .UU250729velortop a:hover {
    opacity: 1;
  }
  .UU250729velortop .pcOnly {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .UU250729velortop .spOnly {
    display: none !important;
  }
  .UU250729velortop__contents--wrap {
    display: flex;
    justify-content: center;
  }
  .UU250729velortop__section {
    max-width: 45rem;
    margin: auto;
  }
  .UU250729velortop__section--wrap {
    width: 50%;
  }
}
/* ========================
  FADE IN
======================== */
.UU250729velortop .js-fadeIn-load,
.UU250729velortop .js-fadeIn-scroll-normal,
.UU250729velortop .js-fadeIn-scroll-fromLeft,
.UU250729velortop .js-fadeIn-scroll-fromRight {
  transition: all 1.5s;
  opacity: 0;
}
.UU250729velortop .js-fadeIn-load.isActive,
.UU250729velortop .js-fadeIn-scroll-normal.isActive,
.UU250729velortop .js-fadeIn-scroll-fromLeft.isActive,
.UU250729velortop .js-fadeIn-scroll-fromRight.isActive {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.UU250729velortop .js-fadeIn-load,
.UU250729velortop .js-fadeIn-scroll-normal {
  transform: translate3d(0, 4rem, 0);
}
.UU250729velortop .js-fadeIn-scroll-fromLeft {
  transform: translate3d(-4rem, 0, 0);
}
.UU250729velortop .js-fadeIn-scroll-fromRight {
  transform: translate3d(4rem, 0, 0);
}
.UU250729velortop .js-fadeIn-scroll-delay-normal .js-delay-show1,
.UU250729velortop .js-fadeIn-scroll-delay-normal .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-normal .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-normal .js-delay-show4,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft .js-delay-show1,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft .js-delay-show4,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight .js-delay-show1,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight .js-delay-show4 {
  transition: all 1.5s;
  opacity: 0;
}
.UU250729velortop .js-fadeIn-scroll-delay-normal.isActive .js-delay-show1,
.UU250729velortop .js-fadeIn-scroll-delay-normal.isActive .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-normal.isActive .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-normal.isActive .js-delay-show4,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft.isActive .js-delay-show1,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft.isActive .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft.isActive .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft.isActive .js-delay-show4,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight.isActive .js-delay-show1,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight.isActive .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight.isActive .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight.isActive .js-delay-show4 {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.UU250729velortop .js-fadeIn-scroll-delay-normal.isActive .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft.isActive .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight.isActive .js-delay-show2 {
  transition-delay: 0.3s;
}
.UU250729velortop .js-fadeIn-scroll-delay-normal.isActive .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft.isActive .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight.isActive .js-delay-show3 {
  transition-delay: 0.6s;
}
.UU250729velortop .js-fadeIn-scroll-delay-normal.isActive .js-delay-show4,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft.isActive .js-delay-show4,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight.isActive .js-delay-show4 {
  transition-delay: 0.9s;
}
.UU250729velortop .js-fadeIn-scroll-delay-normal .js-delay-show1,
.UU250729velortop .js-fadeIn-scroll-delay-normal .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-normal .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-normal .js-delay-show4 {
  transform: translate3d(0, 4rem, 0);
}
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft .js-delay-show1,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-fromLeft .js-delay-show4 {
  transform: translate3d(-4rem, 0, 0);
}
.UU250729velortop .js-fadeIn-scroll-delay-fromRight .js-delay-show1,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight .js-delay-show2,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight .js-delay-show3,
.UU250729velortop .js-fadeIn-scroll-delay-fromRight .js-delay-show4 {
  transform: translate3d(4rem, 0, 0);
}

@media screen and (min-width: 768px) {
  .UU250729velortop .js-fadeIn-load {
    transform: translate3d(0, 0, 0);
  }
}
/* ========================
  SWIPER
======================== */
.UU250729velortop__section--slider .swiper-wrapper > li {
  background-color: var(--color-bg);
}
.UU250729velortop__section--slider .swiper-pagination {
  left: calc(-24 * var(--rate));
  bottom: calc(20 * var(--rate));
  text-align: right;
}
.UU250729velortop__section--slider .swiper-pagination > span {
  width: calc(10 * var(--rate));
  height: calc(10 * var(--rate));
  margin: 0 calc(6 * var(--rate)) !important;
  border: 1px solid var(--color-white);
  background-color: transparent;
  opacity: 1;
}
.UU250729velortop__section--slider .swiper-pagination > span.swiper-pagination-bullet-active {
  background-color: var(--color-white);
}
.UU250729velortop__section--slider-loop .swiper-wrapper {
  transition-timing-function: linear;
}
.UU250729velortop__section--slider-loop .swiper-wrapper > li {
  width: calc(600 * var(--rate));
  margin: 0 calc(3 * var(--rate));
}

@media screen and (min-width: 768px) {
  .UU250729velortop__section--slider .swiper-pagination {
    left: -1.5rem;
    bottom: 1rem;
  }
  .UU250729velortop__section--slider .swiper-pagination > span {
    width: 0.6rem;
    height: 0.6rem;
    margin: 0 0.325rem !important;
  }
  .UU250729velortop__section--slider-loop .swiper-wrapper > li {
    width: 36rem;
    margin: 0 0.15rem;
  }
}
/* ========================
  SECTION TITLE
======================== */
.UU250729velortop__section h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(25 * var(--rate));
  font-size: calc(32 * var(--rate));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
}
.UU250729velortop__section h4::before {
  content: "";
  display: block;
  background-size: contain !important;
}

@media screen and (min-width: 768px) {
  .UU250729velortop__section h4 {
    gap: 1.5rem;
    font-size: 2rem;
  }
}
/* ========================
  FIRST VIEW
======================== */
.UU250729velortop__leadText {
  padding-top: calc(94 * var(--rate));
}
.UU250729velortop__leadText h2 {
  font-size: calc(43 * var(--rate));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.195em;
}
.UU250729velortop__leadText h3 {
  margin-top: calc(42 * var(--rate));
  font-size: calc(29 * var(--rate));
  font-weight: 400;
  line-height: 2.20689655;
  letter-spacing: 0.11em;
}
.UU250729velortop__leadText p {
  margin-top: calc(48 * var(--rate));
  font-size: calc(24 * var(--rate));
  line-height: 2;
  letter-spacing: 0.1em;
}

@media screen and (min-width: 768px) {
  .UU250729velortop__mainVisual {
    position: relative;
    width: 50%;
  }
  .UU250729velortop__mainVisual--img {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .UU250729velortop__mainVisual--inner {
    position: sticky;
    top: var(--header-height);
    left: 0;
    height: calc(100vh - var(--header-height));
    z-index: 1;
  }
  .UU250729velortop__mainVisual--inner img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -o-object-position: top;
       object-position: top;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .UU250729velortop__mainVisual--text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7rem;
    margin: auto;
    text-align: center;
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0.2s;
    z-index: 1;
  }
  .UU250729velortop__mainVisual--text.isActive {
    opacity: 1;
  }
  .UU250729velortop__mainVisual--text > p {
    color: var(--color-white);
  }
  .UU250729velortop__mainVisual--text > p:first-of-type {
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: 0.18em;
  }
  .UU250729velortop__mainVisual--text > p:last-of-type {
    margin-top: 2.4rem;
    font-size: 1.8rem;
    line-height: 2.22222222;
    letter-spacing: 0.12em;
  }
  .UU250729velortop__leadText {
    padding-top: 8rem;
  }
  .UU250729velortop__leadText h2 {
    font-size: 2.5rem;
    letter-spacing: 0.215em;
  }
  .UU250729velortop__leadText h3 {
    margin-top: 2.5rem;
    font-size: 1.7rem;
  }
  .UU250729velortop__leadText p {
    margin-top: 3.2rem;
    font-size: 1.4rem;
    line-height: 2.044;
    letter-spacing: 0.13em;
  }
}
@media screen and (min-width: 1401px) {
  .UU250729velortop__mainVisual--inner img {
    max-width: 100%;
    min-width: 100%;
    min-height: 100%;
  }
}
/* ========================
  BEIGE
======================== */
.UU250729velortop__beige {
  padding-top: calc(151 * var(--rate));
}
.UU250729velortop__beige h4::before {
  width: calc(47 * var(--rate));
  height: calc(55 * var(--rate));
  background: url(../img/beige.png) no-repeat center;
}
.UU250729velortop__beige--img1 {
  width: calc(666 * var(--rate));
  margin: calc(64 * var(--rate)) auto 0;
}
.UU250729velortop__beige--img-box > div {
  width: calc(450 * var(--rate));
}
.UU250729velortop__beige--img-box > div:first-of-type {
  margin-top: calc(98 * var(--rate));
}
.UU250729velortop__beige--img-box > div:last-of-type {
  margin: calc(-248 * var(--rate)) 0 0 auto;
}

@media screen and (min-width: 768px) {
  .UU250729velortop__beige {
    padding-top: 9.1rem;
  }
  .UU250729velortop__beige h4::before {
    width: 2.7rem;
    height: 3.2rem;
  }
  .UU250729velortop__beige--img1 {
    width: 40rem;
    margin: 3.8rem auto 0;
  }
  .UU250729velortop__beige--img-box > div {
    width: 27rem;
  }
  .UU250729velortop__beige--img-box > div:first-of-type {
    margin-top: 6rem;
  }
  .UU250729velortop__beige--img-box > div:last-of-type {
    margin: -14.9rem 0 0 auto;
  }
}
/* ========================
  DARK NAVY
======================== */
.UU250729velortop__darkNavy {
  padding-top: calc(168 * var(--rate));
}
.UU250729velortop__darkNavy h4 {
  justify-content: flex-start;
  padding-left: calc(44 * var(--rate));
}
.UU250729velortop__darkNavy h4::before {
  width: calc(52 * var(--rate));
  height: calc(55 * var(--rate));
  background: url(../img/darkNavy.png) no-repeat center;
}
.UU250729velortop__darkNavy--slider {
  margin-top: calc(64 * var(--rate));
}

@media screen and (min-width: 768px) {
  .UU250729velortop__darkNavy {
    padding-top: 9.9rem;
  }
  .UU250729velortop__darkNavy h4 {
    padding-left: 2.2rem;
  }
  .UU250729velortop__darkNavy h4::before {
    width: 3.5rem;
    height: 3.4rem;
  }
  .UU250729velortop__darkNavy--slider {
    margin-top: 3.8rem;
  }
}
/* ========================
  PINK
======================== */
.UU250729velortop__pink {
  padding-top: calc(220 * var(--rate));
}
.UU250729velortop__pink--img-box > div {
  width: calc(402 * var(--rate));
}
.UU250729velortop__pink--img-box > div:first-of-type {
  margin: 0 calc(42 * var(--rate)) 0 auto;
}
.UU250729velortop__pink--img-box > div:last-of-type {
  margin-top: calc(-296 * var(--rate));
}
.UU250729velortop__pink h4 {
  justify-content: flex-end;
  margin: calc(149 * var(--rate)) calc(37 * var(--rate)) 0 0;
}
.UU250729velortop__pink h4::before {
  width: calc(50 * var(--rate));
  height: calc(50 * var(--rate));
  background: url(../img/pink.png) no-repeat center;
}
.UU250729velortop__pink--slider {
  width: calc(666 * var(--rate));
  margin: calc(61 * var(--rate)) auto 0;
}

@media screen and (min-width: 768px) {
  .UU250729velortop__pink {
    padding-top: 13.3rem;
  }
  .UU250729velortop__pink--img-box > div {
    width: 24rem;
  }
  .UU250729velortop__pink--img-box > div:first-of-type {
    margin: 0 2.5rem 0 auto;
  }
  .UU250729velortop__pink--img-box > div:last-of-type {
    margin-top: -17.6rem;
  }
  .UU250729velortop__pink h4 {
    margin: 8.9rem 2.1rem 0 0;
  }
  .UU250729velortop__pink h4::before {
    width: 3rem;
    height: 3rem;
  }
  .UU250729velortop__pink--slider {
    width: 40rem;
    margin: 4.1rem auto 0;
  }
}
/* ========================
  KHAKI
======================== */
.UU250729velortop__khaki {
  padding-top: calc(167 * var(--rate));
}
.UU250729velortop__khaki h4::before {
  width: calc(53 * var(--rate));
  height: calc(55 * var(--rate));
  background: url(../img/khaki.png) no-repeat center;
}
.UU250729velortop__khaki--img1 {
  margin-top: calc(64 * var(--rate));
}
.UU250729velortop__khaki--img2 {
  width: calc(640 * var(--rate));
  margin: calc(100 * var(--rate)) 0 0 auto;
}
.UU250729velortop__khaki--img3 {
  width: calc(480 * var(--rate));
  margin: calc(81 * var(--rate)) 0 0 calc(40 * var(--rate));
}

@media screen and (min-width: 768px) {
  .UU250729velortop__khaki {
    padding-top: 9.7rem;
  }
  .UU250729velortop__khaki h4::before {
    width: 3.2rem;
    height: 3.4rem;
  }
  .UU250729velortop__khaki--img1 {
    margin-top: 3.9rem;
  }
  .UU250729velortop__khaki--img2 {
    width: 38.4rem;
    margin: 6rem 0 0 auto;
  }
  .UU250729velortop__khaki--img3 {
    width: 28.8rem;
    margin: 4.8rem 0 0 2.4rem;
  }
}
/* ========================
  BLACK
======================== */
.UU250729velortop__black {
  padding-top: calc(167 * var(--rate));
}
.UU250729velortop__black h4::before {
  width: calc(50 * var(--rate));
  height: calc(55 * var(--rate));
  background: url(../img/black.png) no-repeat center;
}
.UU250729velortop__black--slider-loop {
  margin-top: calc(62 * var(--rate));
}
.UU250729velortop__black--img {
  width: calc(360 * var(--rate));
  margin: calc(162 * var(--rate)) auto 0;
}

@media screen and (min-width: 768px) {
  .UU250729velortop__black {
    max-width: initial;
    padding-top: 9.9rem;
  }
  .UU250729velortop__black h4::before {
    width: 3.1rem;
    height: 3.2rem;
  }
  .UU250729velortop__black--slider-loop {
    margin-top: 4rem;
  }
  .UU250729velortop__black--img {
    width: 21.6rem;
    margin: 9.5rem auto 0;
  }
}
/* ========================
  VIEW All
======================== */
.UU250729velortop__viewAll {
  padding: calc(100 * var(--rate)) 0 calc(120 * var(--rate));
}
.UU250729velortop__viewAll > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--rate));
  width: calc(540 * var(--rate));
  height: calc(80 * var(--rate));
  margin: auto;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "メイリオ", sans-serif;
  font-size: calc(22 * var(--rate));
  line-height: 1;
  letter-spacing: 0.075em;
  background-color: #f1f1f1;
}
.UU250729velortop__viewAll > a > span {
  position: relative;
}
.UU250729velortop__viewAll > a > span::before, .UU250729velortop__viewAll > a > span::after {
  content: "";
  display: block;
  position: absolute;
  left: calc(-6 * var(--rate));
  width: calc(10 * var(--rate));
  height: 1px;
  background-color: #555;
  z-index: 1;
}
.UU250729velortop__viewAll > a > span::before {
  top: calc(-6 * var(--rate));
  transform: rotate(45deg);
}
.UU250729velortop__viewAll > a > span::after {
  top: 0;
  transform: rotate(-45deg);
}

@media screen and (min-width: 768px) {
  .UU250729velortop__viewAll {
    padding: 6rem 0 10rem;
  }
  .UU250729velortop__viewAll > a {
    gap: 0.9rem;
    width: 32.4rem;
    height: 4.8rem;
    font-size: 1.3rem;
  }
  .UU250729velortop__viewAll > a > span::before, .UU250729velortop__viewAll > a > span::after {
    width: 0.7rem;
    left: -0.3rem;
  }
  .UU250729velortop__viewAll > a > span::before {
    top: -0.3rem;
  }
  .UU250729velortop__viewAll > a > span::after {
    top: 0.2rem;
  }
}