.frontPage-inner {
  width: 90%;
  max-width: 2000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 100px;
  filter: drop-shadow(0px 20px 6px rgba(0, 0, 0, 0.16));
}

/* first-view */

.frontPage__firstView {
  position: relative;
}

.frontPage__firstViewTextArea {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 80px;
  position: absolute;
  top: 5%;
  left: 5%;
  right: 0;
  bottom: 0;
  z-index: 999;
  width: 80%;
  height: 95%;
  font-weight: bold;
  color: #fff;
}

.frontPage__firstViewText {
  font-size: 32px;
  line-height: 2em;
  white-space: nowrap;
}

.frontPage__firstViewBtn a {
  padding: 16px;
  border-radius: 40px;
  background: var(--btn);
  color: var(--white);
  font-weight: bold;
  text-decoration: none;
}

.frontPage__firstViewBtn i {
  margin-left: 24px;
  font-weight: 500;
  transition: margin-left 0.3s;
}

.frontPage__firstViewBtn a:hover i {
  margin-left: 80px;
}

.swiper-slide img {
  border-radius: 100px 100px 0px 0px;
}

.frontPage__firstViewImg {
  position: relative;
  width: 100vw;
  overflow: hidden;
  &:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: radial-gradient(#000 20%, transparent 0),
      radial-gradient(#000 20%, transparent 0);
    background-position: 0 0, 10px 10px;
    background-size: 4px 4px;
    border-radius: 100px 100px 0px 0px;
  }
}

.frontPage__firstViewImg1 {
  width: 100%;
  height: calc(100vh - 100px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../img/front/AdobeStock_4843944.jpg);
  border-radius: 100px 100px 0px 0px;
}

.frontPage__firstViewImg2 {
  width: 100%;
  height: calc(100vh - 100px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../img/front/AdobeStock_450772149.jpg);
  border-radius: 100px 100px 0px 0px;
}

.frontPage__firstViewImg3 {
  width: 100%;
  height: calc(100vh - 100px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url(../img/front/AdobeStock_621940090.jpg);
  border-radius: 100px 100px 0px 0px;
}

.frontPage__firstViewImg4 {
  width: 100%;
  height: calc(100vh - 100px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../img/front/AdobeStock_509817581.jpg);
  border-radius: 100px 100px 0px 0px;
}

.frontPage__firstViewImg5 {
  width: 100%;
  height: calc(100vh - 100px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../img/anemos/atataAnemosFront.jpeg);
  border-radius: 100px 100px 0px 0px;
}

.swiper-container {
  position: relative;

  overflow: hidden;
}

.frontPage__firstViewSwiperBtnFlex {
  display: flex;
  flex-direction: row-reverse;
  gap: 40px;
  position: absolute;
  bottom: 8%;
  right: 4%;
  z-index: 999;
}

.swiper-button-next-first,
.swiper-button-prev-first,
.swiper-button-next-works,
.swiper-button-prev-works {
  margin-top: none !important;
  transition: transform 0.3s;

  &:hover {
    transform: scale(1.2);
  }
}

.frontPage__firstViewSwiperBtn i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px !important;
  height: 50px !important;
  background-image: none !important;
  background: var(--bg);
  color: white;
  font-size: 1.25rem;
  border-radius: 100vh;
  text-align: center;
}

.swiper-button-next-first:after,
.swiper-button-prev-first:after,
.swiper-button-next-works:after,
.swiper-button-prev-works:after {
  content: none !important;
}

.swiper-pagination {
  margin-right: auto;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 5% !important;
}

.swiper-pagination-bullet {
  background: var(--white) !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--blue) !important;
}

@media screen and (max-width: 770px) {
  .frontPage__firstViewTextArea {
    width: 80%;
    height: 100%;
    font-weight: bold;
    color: #fff;
    top: 0;
    left: 0;
    width: 100%;
  }

  .frontPage__firstViewImg {
    border-radius: 50px 50px 0 0 !important;
  }

  .frontPage__firstViewImg::after {
    border-radius: 50px 50px 0 0 !important;
  }

  .frontPage__firstViewText {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    width: 90%;
    height: fit-content;
    margin: 0 auto;
    font-size: min(1.5rem, 6vw);
    white-space: normal;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .frontPage__firstViewBtn {
    position: absolute;
    top: 78%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    width: 80%;
    margin: 0 auto;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  .frontPage__firstViewBtn a {
    display: block;
    margin: 0 auto;
    padding: 12px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 40px;
    background: var(--btn);
    color: var(--white);
    text-align: center;
    font-size: 1rem;
  }

  .frontPage__firstViewBtn i {
    margin-left: 24px;
    font-weight: 500;
  }

  .frontPage__firstViewImg {
    position: relative;
    width: 100vw;
    overflow: hidden;
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
      display: block;
      background-color: rgba(0, 0, 0, 0.4);
      background-image: radial-gradient(#000 20%, transparent 0),
        radial-gradient(#000 20%, transparent 0);
      background-position: 0 0, 10px 10px;
      background-size: 4px 4px;
    }
  }

  .frontPage__firstViewImg img {
    height: calc(100vh - 144px);
  }
  .frontPage__firstViewSwiperBtnFlex {
    display: none;
  }

  .frontPage__firstViewBtn i {
    font-weight: 500;
    margin-left: 24px;
  }
}
/* mission */

.frontPage__missionInnerUnder {
  background: var(--white);
}

.frontPage__missionInner {
  background-color: var(--bggradient);
  border-radius: 0px 0px 100px 100px;
}

.frontPage__missionContent {
  width: 90%;
  margin: auto;
}

.frontPage__missionTitle {
  display: flex;
  justify-content: center;

  padding-top: 80px;

  color: var(--bg);
  font-size: 24px;
  font-weight: bold;
}

.frontPage__missionCatchCopy {
  width: 90%;
  margin: 40px auto 0px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5em;
  text-align: center;
}

.frontPage__missionImgWithText {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 80px;
}

.frontPage__missionImgRight {
  display: none;
}

.frontPage__missionImg img {
  border-radius: 8px;
}

.frontPage__missionText {
  font-size: 24px;
  font-weight: bold;
}

.frontPage__missionBtn {
  margin-top: 40px;
}

.frontPage__missionBtn a {
  padding: 16px;
  margin-top: 24px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 40px;
  background: var(--btn);
  color: var(--white);
}

.frontPage__missionBtn i {
  margin-left: 24px;
  font-weight: 500;
  transition: margin-left 0.3s;
}

.frontPage__missionBtn a:hover i {
  margin-left: 80px;
}

@media screen and (max-width: 770px) {
  .frontPage__mission {
    background: var(--bggradient);
  }

  .frontPage__missionContent {
    width: 100%;
  }

  .frontPage__missionTitle {
    padding-top: 40px;
    font-size: 24px;
    font-weight: bold;
    color: var(--bg);
    text-align: center;
  }

  .frontPage__missionInner {
    padding: 0;
    border-radius: 0 0 50px 50px;
  }

  .frontPage__missionCatchCopy {
    width: 90%;
    margin: 20px auto 0;
    padding: 0;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    line-height: 2em;
  }

  .frontPage__missionImgWithText {
    display: block;
    margin-top: 40px;
  }

  .frontPage__missionImg img {
    width: 90%;
    max-height: 248px;
    object-fit: cover;
    border-radius: 0px 40px 40px 0px;
  }

  .frontPage__missionImgRight {
    display: block;
    text-align: right;
  }

  .frontPage__missionImgRight img {
    width: 90%;
    max-height: 248px;
    object-fit: cover;
    border-radius: 40px 0px 0px 40px;
  }

  .frontPage__missionText {
    width: 90%;
    margin: 40px auto 0px;
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 2em;
  }

  .frontPage__missionBtn a {
    display: block;
    width: 80%;
    margin: 40px auto 0px;
    padding: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 40px;
    background: var(--btn);
    color: var(--white);
    text-align: center;
  }

  .frontPage__missionBtn i {
    margin-left: 24px;
    font-weight: 500;
  }
}
/* services */

.frontPage__servicesInner {
  width: 90%;
  margin: auto;
  background: var(--white);
}

.frontPage__servicesTitle {
  display: flex;
  flex-direction: column;
  margin-top: 120px;
}

.frontPage__servicesTitleEn {
  color: var(--bg);
  font-size: 24px;
  font-weight: bold;
}

.frontPage__servicesTitleJpn {
  margin-top: -8px;
  font-size: 2.5rem;
  font-weight: bold;
}

.frontPage__servicesHeader {
  margin-top: 60px;
  color: var(--bg);
  font-weight: bold;
  font-size: 1.75rem;
  border-left: 5px solid;
  padding: 0.25em 0.5em;
  background: #fef5ea;
}

.frontPage__servicesContent {
  display: flex;
  gap: 40px;

  margin-top: 80px;
  padding-bottom: 40px;

  border-bottom: 4px solid #f5f5f5;
}

.frontPage__servicesContentMt40 {
  margin-top: 40px;
}

.frontPage__servicesContentImg {
  flex: 1;
}

.frontPage__servicesContentImg img {
  border-radius: 8px;
}

.frontPage__servicesContentTextArea {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.frontPage__servicesContentTextAreaGenre a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--bg);
  font-weight: bold;
  font-size: 20px;
}

.frontPage__servicesContentTextAreaGenreDetail {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bg);
  font-weight: bold;
}

.frontPage__servicesContentTextAreaTitle {
  font-size: 1.75rem;
  font-weight: bold;
}

.frontPage__servicesContentTextAreaText {
  font-weight: bold;
}

.frontPage__servicesContentTextAreaBtn {
  width: 100%;

  margin-top: 24px;
}

.frontPage__servicesContentTextAreaBtn a {
  padding: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 40px;
  background: var(--btn);
  color: var(--white);
}

.frontPage__servicesContentTextAreaBtn i {
  margin-left: 24px;
  font-weight: 500;
  transition: margin-left 0.3s;
}

.frontPage__servicesContentTextAreaBtn a:hover i {
  margin-left: 80px;
}

.frontPage__servicesGenresInner {
  width: 90%;
  margin: auto;
}

.frontPage__servicesGenres {
  margin-top: 40px;
}

.frontPage__servicesGenresContent {
  display: flex;
  align-items: center;
  gap: 80px;

  margin-top: 40px;

  padding-bottom: 40px;
  border-bottom: 4px solid #f5f5f5;
}

.frontPage__servicesGenresContentImg {
  flex: 1;
}

.frontPage__servicesGenresContentInner {
  flex: 4;
  display: flex;
  align-items: center;
  gap: 40px;
}

.frontPage__servicesGenresContentImg img {
  border-radius: 8px;
}

.frontPage__servicesGenresContentTextArea {
  flex: 3;
}

.frontPage__servicesGenresContentTextAreaTitleEn {
  color: var(--btn);
  font-weight: bold;

  margin-top: -8px;
}

.frontPage__servicesGenresContentTextAreaTitleJpn {
  font-size: 28px;
  font-weight: bold;
}

.frontPage__servicesGenresContentTextAreaText {
  margin-top: 8px;

  font-weight: bold;
}

.frontPage__servicesGenresContentTextAreaTextBtn i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  padding: 16px;
  font-size: 1.25rem;
  font-weight: bold;
  background: var(--bg);
  border-radius: 100vh;
  color: var(--white);
  transition: transform 0.3s;
}

.frontPage__servicesGenresContentTextAreaTextBtn a:hover i {
  transform: scale(1.2);
}
@media screen and (max-width: 770px) {
  .frontPage__servicesGenresInner {
    padding: 0;
    width: 100%;
  }

  .frontPage__servicesInner {
    padding: 0px;
    width: 100%;
  }

  .frontPage__servicesHeader {
    font-size: 1.5rem;
    width: 90%;
    margin: 40px auto 0;
  }

  .frontPage__servicesContent {
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
    border-bottom: 0px;
  }

  .frontPage__servicesGenresContentInner {
    gap: 8px;
  }

  .frontPage__servicesGenres {
    width: 80%;
    margin: auto;
    margin-top: 0px;
  }

  .frontPage__servicesContentImg {
    width: 90%;
    margin-right: 0;
    margin-left: auto;
    border-radius: 10px 0px 0px 10px;
    overflow: hidden;
  }

  .frontPage__servicesContent:nth-child(2n) .frontPage__servicesContentImg {
    margin-left: 0;
    margin-right: auto;
    border-radius: 0px 10px 10px 0px;
  }

  .frontPage__servicesContentImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
  }

  .frontPage__servicesContentReverseSp {
    flex-direction: column-reverse;
  }

  .frontPage__servicesContentTextArea {
    width: 80%;
    margin: auto;
  }
  .frontPage__servicesTitle {
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
  }

  .frontPage__servicesTitleEn {
    font-size: 16px;
  }

  .frontPage__servicesTitleJpn {
    font-size: 1.75rem;
  }

  .frontPage__servicesContentTextAreaTitle,
  .frontPage__servicesGenresContentTextAreaTitleJpn {
    font-size: 24px;
  }

  .frontPage__servicesContentTextAreaText {
    font-size: 16px;
  }

  .frontPage__servicesContentTextAreaBtn a {
    display: block;
    width: 100%;
    text-align: center;
  }

  .frontPage__servicesGenresContent {
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
  }

  .frontPage__servicesGenresContentImg img {
    width: 100vw;
    aspect-ratio: 2/1;
    object-fit: cover;
  }

  .frontPage__servicesContentTextAreaBtn {
    margin-top: 16px;
  }

  .frontPage__servicesGenresContentTextAreaTextBtn i {
    width: 40px;
    height: 40px;
  }
}

/* works */

.frontPage__works {
  overflow: hidden;
}

.frontPage__worksTitle {
  padding-top: 80px;
}

.frontPage__worksTitleEn {
  color: var(--bg);
  font-size: 24px;
  font-weight: bold;
}

.frontPage__worksJpn {
  margin-top: -8px;
  font-size: 40px;
  font-weight: bold;
}

.frontPage__worksInnerUnder {
  border-radius: 100px;
  background: var(--bggradient);
}

.frontPage__worksInner {
  width: 90%;
  margin: auto;
}

.frontPage__worksContainer {
  margin-top: 60px;
}

.worksPost__content {
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

.worksPost__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
}

.worksPost__thumbnail {
  overflow: hidden;
  border-radius: 8px;
}

.worksPost__thumbnail img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s;
  background-color: #fff;
}

.worksPost__thumbnailNoImg img {
  object-fit: contain;
}

.worksPost__content:hover .worksPost__thumbnail img {
  transform: scale(1.1);
}

.worksPost__dateSp {
  margin-top: 24px;
}

.worksPost__category {
  padding: 8px;
  line-height: 1em;
  background: var(--bg);
  color: var(--white);
  border-radius: 40px;
}

.worksPost__category ul {
  margin: 0px;
  padding: 8px;
  border-radius: 40px;
  background: var(--bg);
  list-style: none;
}

.worksPost__date {
  font-weight: lighter;
  color: #505050;
}

.worksPost__title {
  margin-top: 24px;
}

.frontPage__worksBtn {
  margin-top: 100px;
  text-align: center;
}

.frontPage__worksBtn a {
  padding: 16px 20px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 40px;
  background: var(--btn);
  color: var(--white);
  transition: padding 0.3s;
}

.frontPage__worksBtn a:hover {
  padding: 16px 80px;
}

.frontPage__worksBtn i {
  margin-left: 24px;
  font-weight: 500;
}

.frontPage__worksTitleContainer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.frontPage__worksSwiper {
  overflow: inherit !important;
}

.frontPage__worksSwiperBtnFlex {
  display: flex;
  flex-direction: row-reverse;
  gap: 40px;
}

a.worksPost__content {
  display: block;
  box-sizing: border-box;
  padding: 0 24px;
}

.frontPage__worksSwiperBtn {
  position: relative !important;
}

.frontPage__worksSwiperBtn i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-image: none !important;
  background: var(--bg);
  color: white;
  font-size: 1.25rem;
  border-radius: 100vh;
  text-align: center;
}

@media screen and (max-width: 770px) {
  .frontPage__worksInnerUnder {
    border-radius: 50px;
  }
  .frontPage__worksInner {
    padding: 0;
    border-radius: 50px;
  }
  .frontPage__worksTitle {
    padding-top: 20px;
  }

  .frontPage__worksTitleContainer {
    padding-top: 40px;
    width: 90%;
    margin: auto;
  }

  div#slide__works {
    width: 100%;
    margin: 60px auto 0;
  }

  .frontPage__worksTitleEn {
    color: var(--btn);
    font-weight: bold;
    font-family: 16px;
  }

  .frontPage__worksJpn {
    font-size: 28px;
    font-weight: bold;
  }

  .frontPage__worksContainer {
    display: grid;
    margin-top: 24px;
  }

  a.worksPost__content {
    padding: 0 16px;
  }

  .worksPost__thumbnailNoImg img {
    object-fit: contain !important;
  }

  .worksPost__thumbnail {
    overflow: hidden;
  }

  .worksPost__thumbnail img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    transition: border-radius 0.6s;
  }

  .worksPost__category a {
    padding: 8px;
    color: var(--white);
    background: var(--btn);
    border-radius: 24px;
  }

  .worksPost__title {
    margin-top: 16px;
  }

  .worksPost__titleSp a {
    color: #000 !important;
  }

  .frontPage__worksBtn a {
    display: inline-block;
    width: 100%;
    padding: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 40px;
    background: var(--btn);
    color: var(--white);
    text-align: center;
  }

  .frontPage__worksBtn {
    margin-top: 60px;
  }

  .frontPage__worksBtn i {
    margin-left: 24px;
    font-weight: 500;
  }

  .frontPage__worksSwiperBtnFlex {
    gap: 20px;
  }

  .frontPage__worksSwiperBtn i {
    width: 40px;
    height: 40px;
  }
}

/* news */
.frontPage__newsInner {
  width: 90%;
  margin: auto;
}

.frontPage__newsTitle {
  margin-top: 120px;
}

.frontPage__newsTitleEn {
  color: var(--bg);
  font-size: 24px;
  font-weight: bold;
}

.frontPage__newsTitleJpn {
  margin-top: -8px;
  font-size: 40px;
  font-weight: bold;
}

.frontPage__newsContainer {
  margin: 40px auto;
}

a.newsPost__content {
  display: block;
  padding: 32px 16px;
  color: #000;
  border-bottom: 1px #bebebe solid;
  transition: background-color 0.3s;
}

a.newsPost__content:first-child {
  border-top: 1px #bebebe solid;
}

a.newsPost__content:hover {
  background-color: var(--bggradient);
}

.newsPost__detail {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.newsPost__category {
  flex: initial;
  margin: 0px;
  padding: 8px;
  border-radius: 40px;
  background: var(--bg);
  list-style: none;
  line-height: 1em;
  color: #fff;
}

.newsPost__date {
  font-weight: normal;
}

.newsPost__title {
  flex: 1.5;
  line-height: 1.5em;
  font-size: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.newsPost__info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.frontPage__newsBtn {
  margin-top: 80px;
  text-align: center;
}

.frontPage__newsBtn a {
  padding: 16px 20px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 40px;
  background: var(--btn);
  color: var(--white);
  transition: padding 0.3s;
}

.frontPage__newsBtn a:hover {
  padding: 16px 80px;
}

.frontPage__newsBtn i {
  margin-left: 24px;
  font-weight: 500;
}

@media screen and (max-width: 770px) {
  .frontPage__newsInner {
    padding: 0;
    width: 90%;
    margin: auto;
  }
  .frontPage__newsTitle {
    margin-top: 80px;
  }
  .frontPage__newsTitleEn {
    font-size: 16px;
    text-align: center;
  }
  .frontPage__newsTitleJpn {
    font-size: 28px;
    text-align: center;
  }
  .newsPost__info {
    flex-direction: column;
  }
  .newsPost__title {
    font-size: 1rem;
    line-height: 2em;
  }
  .frontPage__newsBtn a {
    display: inline-block;
    width: 100%;
    padding: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 40px;
    background: var(--btn);
    color: var(--white);
    text-align: center;
  }
  a.newsPost__content {
    padding: 24px 0;
  }
  .newsPost__category {
    font-size: 0.9rem;
  }
}