@charset "UTF-8";

html {
  font-size: 10px;
}

@media screen and (max-width: 1400px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}

/*-------------------------
 common
-------------------------*/
.l-container {
  width: 100%;
  margin: auto;
}

#feature {
  margin: 0 auto;
  font-feature-settings: "palt";
  width: 100%;
  text-align: center;
  overflow: clip;
  font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo, メイリオ, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.feature-inner {
  margin: 0 auto -9.5rem;
}

.feature img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}

.feature a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.feature a:link,
.feature a:visited {
  color: #000;
}

.feature a:hover {
  opacity: 0.5;
}

.feature figure {
  transition: background-color 0.3s ease-in-out;
  background: #fff;
}

.feature figure a:hover {
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 1);
}

.feature figure:hover {
  background-color: rgba(255, 255, 255, 1);
}

/*-------------------------
 fade
-------------------------*/
#feature .fadeIn {
  opacity: 0;
  transition: all ease 1s;
}

#feature .fadeIn.is-show {
  opacity: 1;
}

/** top **/
#feature .fadeTop {
  opacity: 0;
  transform: translateY(10rem);
  transition: all ease 1s;
}

#feature .fadeTop.is-show {
  opacity: 1;
  transform: translateY(0);
}

#feature .fadeTop.--1.is-show {
  transition-delay: 0.5s;
  opacity: 1;
}

/** left **/
#feature .fadeLeft {
  opacity: 0;
  transform: translateX(10rem);
  transition: all ease 1s;
}

#feature .fadeLeft.is-show {
  opacity: 1;
  transform: translateX(0);
}

#feature .fadeLeft.--1.is-show {
  transition-delay: 0.5s;
  opacity: 1;
}

/*-------------------------
  credit
-------------------------*/
#feature .creditList a {
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1.85;
  font-family: "pragmatica", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.sec1 .creditList {
  text-align: left;
  transform: translateX(-2.8rem);
  margin-bottom: -0.7rem;
}

.sec2 .creditList {
  width: 34.2813rem;
  transform: translateX(9.7rem);
  margin-top: 2.5rem;
}

.sec2 .creditList ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  gap: 0 1.1rem;
}

.sec2 .creditList ul li:nth-child(5) {
  margin: 0 0 0 -0.5rem;
}

.sec3 .creditList {
  width: 34.21821rem;
  margin-top: 2.5rem;
}

.sec3 .creditList ul li:nth-child(4) {
  margin: 0 0 0 -0.6rem;
  transform: translateX(0.5rem);
}


.sec3 .creditList ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 0 1.1rem;
}

.sec4 .creditList {
  margin-top: 2.5rem;
  text-align: left;
}

.sec5 .creditList {
  transform: translateX(2.8rem);
  margin-bottom: -0.7rem;
  text-align: left;
}

.sec6 .creditList {
  width: 24.06377rem;
  margin-top: 2.5rem;
}

.sec6 .creditList ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 0 1.1rem;
}

.sec6 .creditList ul li:nth-child(3) {
  margin: 0 0 0 -0.6rem;
  transform: translateX(0.8rem);
}

.sec7 .creditList {
  width: 23.38477rem;
  position: absolute;
  bottom: -0.6rem;
  transform: translateX(49rem);
}

.sec7 .creditList ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 0 1rem;
}

.sec7 .creditList ul li:nth-child(5) {
  margin: 0 0 0 -0.9rem;
  transform: translateX(1rem);
}


/*-------------------------
  top
-------------------------*/
#feature .hero {
  width: 95rem;
  margin: 0 auto;
  transform: translateX(-1.5rem);
}

#feature .hero p {
  margin: 5.7rem auto 0;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 2;
  transform: translateX(1.5rem);
}

/*-------------------------
  content
-------------------------*/
#feature .sec1 {
  margin-top: 7.5rem;
}

#feature .sec2 {
  margin-top: 14rem;
}

#feature .sec3 {
  margin-top: 13.3rem;
}

#feature .sec4 {
  margin-top: 13.3rem;
}

#feature .sec5 {
  margin-top: 16rem;
}

#feature .sec6 {
  margin-top: 16rem;
}

#feature .sec7 {
  margin-top: 10rem;
}

#feature .flex-block {
  display: flex;
}

#feature .inner {
  justify-content: space-between;
}

#feature .sec1 .inner {
  width: 78rem;
  margin: auto;
  transform: translateX(-1rem);
}

#feature .sec1 .set {
  display: flex;
  flex-direction: row-reverse;
  align-items: end;
  margin-top: 8rem;
}

#feature .sec2 .inner {
  width: 92rem;
  margin: auto;
  position: relative;
  z-index: 20;
}

#feature .sec3 .inner {
  width: 86rem;
  margin: auto;
  justify-content: center;
}

#feature .sec3 .inner:last-child {
  margin-top: 10rem;
  gap: 6rem;
  transform: translateX(-5.1rem);
}

#feature .sec4 .inner {
  width: 132rem;
  margin: auto;
}

#feature .sec4 .set:last-child {
  display: flex;
  gap: 1rem;
  margin-top: 12rem;
}

#feature .sec5 .inner {
  width: 107.5rem;
  margin: auto;
  transform: translateX(-2.1rem);
}

#feature .sec5 .set {
  display: flex;
  align-items: end;
}

#feature .sec6 .inner {
  width: 110rem;
  margin: auto;
  flex-direction: row-reverse;
  transform: translateX(-1.1rem);
}

#feature .sec6 .set:last-child {
  margin: 10rem 0 0 4rem;
}

#feature .sec7 .inner {
  width: 96rem;
  margin: auto;
  transform: translateX(1rem);
}

#feature .sec7 .set {
  display: flex;
  align-items: end;
  margin-top: 16rem;
}

#feature .bg01 {
  width: 15rem;
}

#feature .bg02 {
  width: 59.2rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

#feature .bg03 {
  width: 15rem;
  transform: translateX(4rem);
}

#feature .bg04 {
  width: 12rem;
  position: absolute;
  bottom: 3.7rem;
  transform: translateX(36rem);
}

#feature .bg05 {
  width: 20rem;
  position: absolute;
  top: 0;
  transform: translateX(-2rem);
}

#feature .bg06 {
  width: 12rem;
  position: absolute;
  bottom: 23.5rem;
  transform: translateX(38rem);
  z-index: 8;
}

#feature .img01 {
  width: 38rem;
}

#feature .img02 {
  width: 44rem;
  margin-top: 14rem;
}

#feature .img03 {
  width: 44rem;
  height: fit-content;
  margin-top: 14rem;
}

#feature .img04 {
  margin: 8.1rem 15rem 0 0;
  width: 38rem;
}

#feature .img04 img {
  position: relative;
  z-index: 10;
}

#feature .img05 {
  width: 32rem;
}

#feature .img06 {
  width: 42rem;
  position: relative;
  z-index: 10;
  margin-top: 14rem;
}

#feature .img07 {
  width: 34rem;
}

#feature .img08 {
  width: 40rem;
}

#feature .img09 {
  width: 40rem;
}

#feature .img10 {
  width: 44rem;
  position: relative;
  z-index: 10;
  margin: 14rem 0 0 8rem;
}

#feature .img11 {
  width: 30rem;
  margin: 2rem 2rem 0 0;
}

#feature .img12 {
  position: relative;
  z-index: 10;
}

#feature .img12 img {
  width: 46rem;
}

#feature .img13 {
  width: 30rem;
}

#feature .img14 {
  width: 30rem;
  margin-top: 1rem;
}

#feature .img15 {
  width: 46rem;
}

#feature .img16 {
  width: 34rem;
  height: fit-content;
}

#feature .btn {
  margin: 12rem auto 13rem;
  width: 32rem;
}