@charset "utf-8";

/* =============================================================

  "Nano Create Company" About Styles

============================================================= */
body {
  background-image: url(../images/about_bg_gra.webp);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

@media screen and (max-width:780px) {
  body { background-image: url(../images/about_bg_gra_sp.webp); }
}

section { position: relative; }

/*
  Page Header
============================================================= */
.page-header { padding: 200px 0 0; }
.page-header > i.round2 {
  position: absolute;
  top: calc(95 / 1920 * 100vw);
  left: calc(13 / 1920 * 100vw * -1);
}
.page-header > figure { margin: 80px 0 0; }

@media screen and (min-width:1921px) {
  .page-header { padding: calc(200 / 1920 * 100vw) 0 0; }
  .page-header > figure { margin: calc(80 / 1920 * 100vw) 0 0; }
}

@media screen and (max-width:780px) {
  .page-header { padding: calc(175 / 780 * 100vw) 0 0; }
  .page-header > i.round2 {
    top: calc(60 / 780 * 100vw);
    left: calc(313 / 780 * 100vw * -1);
  }
  .page-header > figure { margin: calc(70 / 780 * 100vw) 0 0; }
  .page-header > figure img {
    aspect-ratio: 1 / 1;
    object-position: 90% 50%;
  }
}

/*
  Intro
============================================================= */
.intro { padding: 130px 0; }
.intro .inner {
  position: relative;
  padding: 0 60px;
}
.intro h2 {
  font-family: "Shippori Mincho", serif;
  font-size: 38px;
  font-size: 3.8rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: calc(68 / 38);
  margin: 0 0 60px;
  padding: 0 0 0 270px;
}
.intro p {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .15em;
  line-height: calc(48 / 18);
  margin: 0 0 60px;
  padding: 0 0 0 270px;
}
.intro figure { float: right; }
.intro i {
  position: absolute;
  top: calc(330 / 1920 * 100vw);
  left: calc(30 / 1920 * 100vw * -1);
  width: calc(386 / 1920 * 100vw);
  overflow: hidden;
}
.intro i img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (min-width:1921px) {
  .intro h2 {
    font-size: calc(38 / 1920 * 100vw);
    margin: 0 0 calc(60 / 1920 * 100vw);
  }
  .intro p {
    font-size: calc(18 / 1920 * 100vw);
    margin: 0 0 calc(60 / 1920 * 100vw);
  }
}

@media screen and (max-width:780px) {
  .intro { padding: calc(150 / 780 * 100vw) 0 calc(90 / 780 * 100vw); }
  .intro .inner { padding: 0; }
  .intro h2 {
    font-size: calc(38 / 780 * 100vw);
    margin: 0 0 calc(60 / 780 * 100vw);
    padding: 0;
  }
  .intro p {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(54 / 26);
    margin: 0 0 calc(330 / 780 * 100vw);
    padding: 0;
  }
  .intro figure { float: none; }
  .intro i {
    top: calc(1220 / 780 * 100vw);
    left: calc(40 / 780 * 100vw * -1);
    width: calc(290 / 780 * 100vw);
  }
}

/*
  View with Data
============================================================= */
.view-data { padding: 0 0 240px; }
.view-data > .inner { padding: 0 60px; }
.view-data h2 {
  font-size: 40px;
  font-size: 4.0rem;
  font-weight: 500;
  letter-spacing: .15em;
  line-height: calc(60 / 40);
  margin: 0 0 60px;
}
.data-unit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.data-item {
  height: 330px;
  background-color: var(--white);
  border: solid 1px #e4e4e4;
  border-radius: 20px;
  display: grid;
}
.data-ttl {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-align: center;
  grid-area: 1 / 1;
  transform: translateY(45px);
}
.data-ttl span {
  font-size: calc(14 / 24 * 1em);
  display: block;
}
.data-item figure { grid-area: 1 / 1; }

@media screen and (max-width:780px) {
  .view-data { padding: 0 0 calc(120 / 780 * 100vw); }
  .view-data > .inner { padding: 0; }
  .view-data h2 {
    font-size: calc(40 / 780 * 100vw);
    margin: 0 0 calc(40 / 780 * 100vw)
  }
  .data-unit {
    display: flex;
    flex-direction: column;
    gap: calc(20 / 780 * 100vw) 0;
  }
  .data-item {
    width: 100%;
    height: auto;
    padding: calc(55 / 780 * 100vw) 0 0;
  }
  .data-ttl {
    font-size: calc(30 / 780 * 100vw);
    transform: translateY(0);
  }
  .data-ttl span { line-height: calc(30 / 17); }
}


.image-gallery {
  width: 100%;
  margin: 60px 0 100px;
}
/*
.image-gallery > div {
  width: calc(2194 / 1920 * 100vw);
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0 30px;
  padding: 150px 0 80px;
}
*/
.image-gallery > div figure img {
  height: auto;
  object-fit: cover;
}
/*
.image-gallery > div figure:first-of-type { width: 398px; }
.image-gallery > div figure:nth-of-type(2) { width: 401px; }
.image-gallery > div figure:nth-of-type(3) {
  width: 456px;
  transform: translateY(80px);
}
.image-gallery > div figure:nth-of-type(4) {
  width: 400px;
  transform: translateY(-150px);
}
.image-gallery > div figure:last-of-type { width: 401px; }
*/

@media screen and (max-width:780px) {
  .image-gallery { margin: calc(35 / 780 * 100vw) 0 calc(80 / 780 * 100vw); }
  /*
  .image-gallery > div {
    width: calc(2194 / 780 * 100vw);
    padding: calc(150 / 780 * 100vw) 0 calc(80 / 780 * 100vw);
  }
  .image-gallery > div figure:first-of-type img { width: calc(398 / 780 * 100vw); }
  .image-gallery > div figure:nth-of-type(2) img { width: calc(401 / 780 * 100vw); }
  .image-gallery > div figure:nth-of-type(3) img { width: calc(456 / 780 * 100vw); }
  .image-gallery > div figure:nth-of-type(4) img { width: calc(400 / 780 * 100vw); }
  .image-gallery > div figure:last-of-type img { width: calc(401 / 780 * 100vw); }
  */
}

/*
  Swiper Slide
============================================================= */
.swiper {
  overflow-y: visible;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 150px 0 0;
}
.swiper::-webkit-scrollbar{ display: none; }
.swiper-wrapper { transition-timing-function: linear; }
.swiper-slide.ss03 { transform: translateY(80px); }
.swiper-slide.ss04 { transform: translateY(-150px); }

@media screen and (max-width:780px) {
  .swiper { padding: calc(150 / 780 * 100vw) 0 0; }
  .swiper-slide.ss03 { transform: translateY(calc(80 / 780 * 100vw)); }
  .swiper-slide.ss04 { transform: translateY(calc(150 / 780 * 100vw * -1)); }
}

/*
  Button Unit
============================================================= */
.btn-unit .inner {
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.btn-unit .default-btn { width: 360px; }

@media screen and (max-width:780px) {
  .btn-unit .inner {
    flex-direction: column;
    gap: calc(30 / 780 * 100vw) 0;
  }
  .btn-unit .default-btn { width: calc(540 / 780 * 100vw); }
}

/*
  Decorations
============================================================= */

@media screen and (max-width:780px) {

/* Round
------------------------------------------------------------- */
.dr02 {
  top: calc(310 / 780 * 100vw);
  left: initial;
  right: calc(120 / 780 * 100vw)
}
.dr03 {
  top: calc(3200 / 780 * 100vw);
  right: calc(40 / 780 * 100vw * -1);
}
.dr04 {
  top: calc(6390 / 780 * 100vw);
  right: calc(15 / 780 * 100vw * -1);
}
.dr06 {
  top: calc(2665 / 780 * 100vw);
  right: calc(140 / 780 * 100vw);
  width: calc(100 / 780 * 100vw);
}
.dr01, .dr05 { display: none; }

/* Square
------------------------------------------------------------- */
.ds02 {
  top: calc(3000 / 780 * 100vw);
  left: calc(70 / 780 * 100vw * -1);
}
.ds05 {
  top: calc(8175 / 780 * 100vw);
  left: calc(75 / 780 * 100vw);
}
.ds06 {
  top: calc(5350 / 780 * 100vw);
  right: initial;
  left: calc(43 / 780 * 100vw * -1)
}
.ds01, .ds03, .ds04, .ds07 { display: none; }

/* Triangle
------------------------------------------------------------- */
.dt02 {
  top: calc(1220 / 780 * 100vw);
  left: calc(265 / 780 * 100vw);
}
.dt04 {
  top: calc(4150 / 780 * 100vw);
  left: calc(15 / 780 * 100vw);
}
.dt01, .dt03, .dt05, .dt06, .dt07 { display: none; }

}