@charset "utf-8";
/* 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;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
}

h2 {
  display: block;
  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;
  background-color: #3c4764;
}

/******************************************************
main
******************************************************/
#Wrangler_25FW {
  font-family: arial, "yu-gothic-pr6n", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  width: 100%;
}

#Wrangler_25FW a {
  transition: 0.6s;
}
#Wrangler_25FW a:hover {
  opacity: 0.4;
  transition: 0.6s;
  transform: scale(1.1, 1.1);
  transform-origin: left;
}

#Wrangler_25FW h3 {
  font-family: "nelson-rugged", sans-serif;
  color: #fff;
}
/***** main *****/
#Wrangler_25FW .main {
  height: auto;
  position: relative;
  width: 100%;
}
img.logo {
  position: absolute;
  z-index: 99;
  bottom: 5%;
  right: 1.5%;
  width: 24%;
}

.main_slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  margin: auto;
  background: #fff;
}

/*=== 画像の設定 ======================================= */
.main_slide img {
  display: block;
  position: absolute;
  /* 画像のサイズを表示エリアに合せる */
  width: inherit;
  height: inherit;
  opacity: 0;
  animation: slideAnime 12s ease infinite;
  object-fit: cover;
}

/*=== スライドのアニメーションを段差で開始する ========= */
.main_slide img:nth-of-type(1) {
  animation-delay: 0s;
}
.main_slide img:nth-of-type(2) {
  animation-delay: 4s;
}
.main_slide img:nth-of-type(3) {
  animation-delay: 8s;
}

/*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/******************************************************
main
******************************************************/

/******************************************************
inner_contents
******************************************************/
.inner_contents {
}

.inner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/**** lead ****/
.lead {
  padding: 120px 0;
}
.lead p {
  color: #fff;
  font-size: 1rem;
  line-height: 2;
  text-align: center;
}

.lead p.jp {
  font-weight: 500;
  font-family: "noto-sans-jp", sans-serif;
  margin-bottom: 64px;
}
.lead p.eng {
  font-family: "futura-pt", sans-serif;
  font-weight: 600;
}

/***** movie *****/
.movie {
  width: 80%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  margin: 0px auto 160px;
}
.movie .video {
  bottom: 0;
  left: 0;
  overflow: hidden;
  right: 0;
  top: 0;
}
.movie .video iframe {
  box-sizing: border-box;
  height: 56.25vw;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh;
}

/**** style ****/

/* 共通 */
.style_area {
  width: 100%;
  margin: 0 auto;
}

.style_area .style {
  position: relative;
  display: block;
  padding-top: 160%;
}

.style_area .style .title {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 99;
}

.style_area .style h3 {
  color: #fff;
  font-size: 3.2rem;
}
.style_area h3.no {
  font-size: 4.8rem;
  margin-left: 1rem;
}

.style_area .style .photo {
  position: absolute;
}
.style_area .item a p {
  color: #fff;
  font-size: 1.2rem;
    font-family: "futura-pt", sans-serif;
  font-weight: 400;
}
/* style01 */

.style_area .style_01 .no1 {
  top: 3%;
  right: 20%;
}
.style_area .style_01 .photo_01 {
  width: 33%;
  top: 2%;
  left: 15%;
}

.style_area .style_01 .photo_02 {
  width: 28%;
  top: 12%;
  right: 13%;
}

.style_area .style_01 .item {
  width: 100%;
  text-align: left;
  margin-top: 30px;
  z-index: 10;
}

.style_area .style_01 .item a p {
  color: #fff;
  font-size: 1.2rem;
}

.style_area .style_01 .photo_03 {
  width: 31%;
  top: 49%;
  right: 12%;
}

.style_area .style_01 .photo_04 {
  width: 32%;
  top: 40%;
  left: 11%;
}

.style_area .style_01 .photo_05 {
  width: 44%;
  bottom: 4%;
  left: 0%;
}
.style_area .style_01 .photo_05 img {
  width: 49%;
}

/* style02 */

.style_area .style_02 .no2 {
  top: 3%;
  left: 15%;
}
.style_area .style_02 .photo_01 {
  width: 33%;
  top: 12%;
  left: 15%;
}

.style_area .style_02 .photo_02 {
  width: 24%;
  top: 16%;
  right: 13%;
}

.style_area .style_02 .item {
  width: 100%;
  text-align: left;
  margin-top: 30px;
  z-index: 10;
}

.style_area .style_02 .item a p {
  color: #fff;
  font-size: 1.2rem;
}

.style_area .style_02 .photo_03 {
  width: 28%;
  top: -18%;
  right: 12%;
}

.style_area .style_02 .photo_04 {
  width: 33%;
  top: 44%;
  right: 11%;
}

.style_area .style_02 .photo_05 {
  display: block;
  width: 24%;
  bottom: 10%;
  left: 15%;
}
.style_area .style_02 .photo_05 img:last-of-type {
  width: 90%;
  margin: 24px 0 0 auto;
}

/* style03 */

.style_area .style_03 .no3 {
  top: 3%;
  left: 15%;
}
.style_area .style_03 .photo_01 {
  width: 33%;
  top: 12%;
  left: 15%;
}

.style_area .style_03 .photo_02 {
  width: 33%;
  top: 20%;
  right: 12%;
}

.style_area .style_03 .item {
  width: 100%;
  text-align: left;
  margin-top: 30px;
  z-index: 10;
}

.style_area .style_03 .item a p {
  color: #fff;
  font-size: 1.2rem;
}

.style_area .style_03 .photo_03 {
  width: 28%;
  top: -18%;
  right: 12%;
}

.style_area .style_03 .photo_04 {
  width: 36%;
  top: 54%;
  right: 12%;
}

.style_area .style_03 .photo_05 {
  width: 24%;
  bottom: 32%;
  left: 20%;
}

.style_area .style_03 .photo_06 {
  width: 32%;
  bottom: 2%;
  left: 12%;
}

/* 画像切り替え */
.fade_photo {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.fade {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

.fade img {
  display: block;
  width: 100%;
  height: auto;
  /* object-fit: cover;
transition: opacity 4s ease-in-out; */
}

.fade img.bottom {
  position: relative;
  opacity: 1;
}

.fade.start img.bottom {
  animation: fadeOut 8s forwards;
}

.fade img.top {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  object-fit: cover;
}
.fade.start img.top {
  animation: fadeIn 8s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/******************************************************
inner_contents
******************************************************/

/******************************************************
bottom_area
******************************************************/
.bottom_area {
  width: 100%;
  margin-top: 64px;
  padding-bottom: 120px;
  text-align: center;
}

.bottom_area h3 {
  font-size: 1.6rem;
  margin-bottom: 64px;
}
.slider {
  width: 100%;
  overflow: hidden;
}

.slide-track {
  display: flex;
  width: calc(200px * 20); /* 画像の幅 × 枚数 (10枚×2) */
  animation: scroll 40s linear infinite;
}

.slide-track img {
  width: 240px; /* 画像サイズを揃える */
  height: auto;
  margin-right: 10px;
  object-fit: cover;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* 画像10枚分流したらリセット */
}

/******************************************************
bottom_area
******************************************************/

/******************
fade
*******************/
.sa {
  opacity: 0;
  transition: all 2s 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(0.5);
}

.sa--scaleDown {
  transform: scale(1.5);
}

.sa--rotateL {
  transform: rotate(180deg);
}

.sa--rotateR {
  transform: rotate(-180deg);
}

/******************
fade
*******************/

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

.spR {
  order: 1;
}
.spL {
  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;
  }

  /******************************************************
main
******************************************************/
  #Wrangler_25FW {
    font-family: arial, "yu-gothic-pr6n", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
    position: relative;
    width: 100%;
  }

  #Wrangler_25FW a {
    transition: 0.6s;
  }
  #Wrangler_25FW a:hover {
    opacity: 0.4;
    transition: 0.6s;
    transform: scale(1.1, 1.1);
    transform-origin: left;
  }

  /***** main *****/
  #Wrangler_25FW .main {
    margin-top: 0px;
  }
  img.logo {
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 50%;
  }

  .main_slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.9;
    margin: auto;
    background: #fff;
  }

  /******************************************************
main
******************************************************/

  /******************************************************
inner_contents
******************************************************/

  .inner {
    width: 100%;
    max-width: 750px;
  }

  /**** lead ****/
  .lead {
    padding: 80px 0 0px;
  }
  .lead p {
    width: 90%;
    margin: 0 auto;
    color: #fff;
    font-size: 0.8rem;
    line-height: 2;
  }

  .lead p.jp {
    margin-bottom: 32px;
  }
  .lead p.eng {
    font-size: 0.7rem;
  }

  /***** movie *****/
  .movie {
    width: 100%;
    margin: 64px auto;
  }

  /**** style ****/

  /* 共通 */
  .style_area {
    width: 100%;
    margin: 0 auto;
  }

  .style_area .style {
    position: relative;
    display: block;
  }

.style_area .style .title{
  position: relative;
  margin-left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

  .style_area .style h3 {
    font-size: 1.6rem;
  }
  .style_area h3.no {
    font-size: 2.4rem;
    margin-left: 1rem;
  }

  .style_area .style_01 .no1,
.style_area .style_02 .no2,
.style_area .style_03 .no3{
  position: static;   /* これが肝：absoluteをやめる */
  top: auto;
  right: auto;
  left: auto;
  transform: none;
  margin: 0 auto;     /* 念のため */
}
/* すでに定義済みのこれが親で効いてるので中央に揃います */
.style_area .style .title{
  position: relative;
  margin-left: 0;
  width: 100%;
  display: flex;
  justify-content: center;  /* 水平中央 */
  align-items: center;       /* 垂直方向も揃えたいなら */
}

  /* style01 */
  .style_area .style {
    /* background: url(img/sampleA.png); */
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 0;
  }

  .style_area .style_01 .photo_01 {
    width: 100%;
  }


  .style_area .style_01 .photo_02 {
    width: 60%;
    margin-top: 48px;
  }

  .style_area .style_01 .item.sp {
    display: flex !important;
    width: 100%;
    margin-top: 16px;
    justify-content: center;
    gap: 16px;
  }

  .style_area .item.sp a p {
    font-size: 0.8rem;
  }

  .style_area .style_01 .photo_03 {
    width: 60%;
    margin: 48px 0 0 auto;
  }

  .style_area .style_01 .photo_04 {
    width: 100%;
    margin-top: 48px;
  }

  .style_area .style_01 .photo_05 {
    width: 80%;
    margin: 48px auto 0;
  }
  .style_area .style_01 .photo_05 img {
    width: 100%;
  }

  /* style02 */

  .style_area .style_02 {
    margin-top: 64px;
  }

  .style_area .style_02 .photo_01 {
    width: 100%;
    top: 12%;
    left: 15%;
  }
   .style_area .style_02 .photo_01 .item{
width: 90%;
margin: 16px auto 0;
gap: 8px;
   }
  .style_area .style_02 .photo_02 {
    width: 80%;
    top: 16%;
    right: 13%;
    margin-top: 48px;
  }

    .style_area .style_02 .item {
    margin-top: 16px;
}

  .style_area .style_02 .item01 {
    display: flex !important;
    width: 100%;
    justify-content: center;
    gap: 16px;
  }

  .style_area .style_02 .item02 {
    display: flex !important;
    width: 100%;
    justify-content: flex-start;
    gap: 0px;
    flex-wrap: wrap;
  }

  .style_area .style_02 .item a p {
    color: #fff;
    font-size: 0.8rem;
  }

  .style_area .style_02 .photo_03 {
    width: 100%;
    top: -18%;
    right: 12%;
    margin-top: 48px;
  }

  .style_area .style_02 .photo_04 {
    width: 90%;
    top: 44%;
    right: 11%;
    margin: 48px auto 0;
  }

  .style_area .style_02 .photo_05 {
    display: block;
    width: 80%;
    bottom: 10%;
    left: 15%;
    margin: 48px auto 0;
  }
  .style_area .style_02 .photo_05 img:last-of-type {
    width: 100%;
    margin: 0 auto;
  }

  /* style03 */

  .style_area .style_03 {
    margin-top: 64px;
  }

  .style_area .style_03 .photo_01 {
    width: 100%;
    top: 12%;
    left: 15%;
  }

  .style_area .style_03 .photo_02 {
    width: 80%;
    top: 16%;
    right: 13%;
    margin: 48px auto 0;
  }

  .style_area .style_03 .item {
    margin-top: 16px;
}

  .style_area .style_03 .item02 {
    display: flex !important;
    width: 100%;
    margin-top: 16px;
    justify-content: center;
    gap: 16px;
  }

  .style_area .style_03 .item a p {
    color: #fff;
    font-size: 0.8rem;
  }

  .style_area .style_03 .photo_03 {
    width: 100%;
    margin-top: 48px;
  }

  .style_area .style_03 .photo_04 {
    width: 90%;
    margin: 48px auto 0;
  }

  .style_area .style_03 .photo_05 {
    width: 90%;
    margin: 48px auto 0;
    text-align: left;
  }
  .style_area .style_03 .photo_05 img {
    width: 80%;
  }

  .style_area .style_03 .photo_06 {
    width: 90%;
    margin: 48px auto 0;
    text-align: right;
  }
  .style_area .style_03 .photo_06 img {
    width: 80%;
  }

  .item03 {
    display: block;
  }

  .photo_01 .item03 {
    margin-left: 48px;
  }

  .style_area .style .photo {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }

  /* 画像切り替え */
  .fade_photo {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .fade {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
  }

  .fade img {
    display: block;
    width: 100%;
    height: auto;
    /* object-fit: cover;
transition: opacity 4s ease-in-out; */
  }

  .fade img.bottom {
    position: relative;
    opacity: 1;
  }

  .fade img.top {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .fade.start img.top {
    animation: fadeIn 8s forwards;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }

  /******************************************************
inner_contents
******************************************************/

  /******************************************************
bottom_area
******************************************************/
  .bottom_area {
    width: 100%;
    margin-top: 64px;
    padding-bottom: 120px;
  }

  .bottom_area h3 {
    font-size: 1.2rem;
  }
  .slider {
    width: 100%;
    overflow: hidden;
  }

  .slide-track {
    display: flex;
    width: calc(200px * 20); /* 画像の幅 × 枚数 (10枚×2) */
    animation: scroll 40s linear infinite;
  }

  .slide-track img {
    width: 240px; /* 画像サイズを揃える */
    height: auto;
    margin-right: 10px;
    object-fit: cover;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    } /* 画像10枚分流したらリセット */
  }

  /******************************************************
bottom_area
******************************************************/
}