@charset "utf-8";

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

  "Nano Create Company" Service Styles

============================================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  background-image: url(../images/service_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/service_bg_gra_sp.webp); }
}

section { position: relative; }

/*
  Round
============================================================= */
i.round {
  position: absolute;
  z-index: 0;
  top: 2065px;
  right: -100px;
  width: 380px;
  aspect-ratio: 1 / 1;
  display: inline-block;
  animation: spin 30s linear infinite reverse;
}
i.round img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (max-width:780px) {
  i.round {
    top: calc(330 / 780 * 100vw);
    left: initial;
    right: calc(307 / 780 * 100vw * -1);
    width: calc(380 / 780 * 100vw);
  }
}

/*
  Button Styles
============================================================= */
.default-btn.red {
  color: var(--white);
  outline: none;
  background-color: #ffa4a4;
  text-indent: 1.5em;
  padding: 0 0 0 2em;
  display: block;
  margin: auto;
}
.default-btn.red::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2em;
  transform: translateY(-50%);
  width: 19px;
  height: 16px;
  display: inline-block;
  background: url(../images/icon_link_white.svg) no-repeat 0 0 / cover;
}
.default-btn.red::after { background-image: url(../../common/images/button/btn_arrow_red.svg); }

.si02 .default-btn { width: 460px; }

@media screen and (max-width:780px) {
  .default-btn.red::before {
    width: calc(29 / 780 * 100vw);
    height: calc(24 / 780 * 100vw);
  }
  .si02 .default-btn { width: calc(580 / 780 * 100vw); }
}

/*
  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: 75px 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%;
  }
}

/*
  Service Navi
============================================================= */
.service-nav {
  width: 100%;
  height: 80px;
  background: rgba(255,255,255,.8)
}
.service-nav .inner { height: 100%; }
.service-nav ul {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 100px;
}
.service-nav ul li {
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: .05em;

  color: #fd8a8a;
}
.service-nav ul li a {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0 10px;
}
.service-nav ul li a i {
  width: 40px;
  height: 40px;
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
}
.service-nav ul li a i img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media screen and (max-width:780px) {
  .service-nav { height: calc(110 / 780 * 100vw); }
  .service-nav .inner { width: 100%; }
  .service-nav ul { gap: 0 calc(0 / 780 * 100vw); }
  .service-nav ul li { font-size: calc(24 / 780 * 100vw); }
  .service-nav ul li a { gap: 0 5px; }
  .service-nav ul li a i {
    width: calc(40 / 780 * 100vw);
    height: calc(40 / 780 * 100vw);
  }
}

/*
  Service
============================================================= */
.service-unit { padding: 230px 0 210px; }

@media screen and (max-width:780px) {
  .service-unit { padding: calc(120 / 780 * 100vw) 0; }
}

.images-wrap { position: relative; }
.images-wrap img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.images-wrap figure { width: calc(1720 / 1920 * 100vw); }
.service-item:nth-of-type(odd) .images-wrap figure {
  transform: translateX(calc(200 / 1920 * 100vw));
}
.service-item:nth-of-type(odd) .images-wrap figure img {
  border-top-left-radius: 45px;
  border-bottom-left-radius: 45px;
}
.service-item:nth-of-type(even) .images-wrap figure img {
  border-top-right-radius: 45px;
  border-bottom-right-radius: 45px;
}
.images-wrap i {
  position: absolute;
  z-index: 1;
}

@media screen and (max-width:780px) {
  .images-wrap figure { width: calc(760 / 780 * 100vw); }
  .service-item:nth-of-type(odd) .images-wrap figure {
    transform: translateX(calc(20 / 780 * 100vw));
  }
  .service-item:nth-of-type(odd) .images-wrap figure img {
    height: calc(375 / 780 * 100vw);
    border-top-left-radius: calc(45 / 780 * 100vw);
    border-bottom-left-radius: calc(45 / 780 * 100vw);
  }
  .service-item:nth-of-type(even) .images-wrap figure img {
    height: calc(375 / 780 * 100vw);
    border-top-right-radius: calc(45 / 780 * 100vw);
    border-bottom-right-radius: calc(45 / 780 * 100vw);
  }
  .service-item:first-of-type .images-wrap figure img {
    object-position: calc(460 / 780 * 100vw * -1) 50%;
  }
  .service-item:nth-of-type(2) .images-wrap figure img {
    object-position: calc(180 / 780 * 100vw * -1) 50%;
  }
  .service-item:nth-of-type(3) .images-wrap figure img {
    object-position: calc(110 / 780 * 100vw * -1) 50%;
  }
}

.si01 .inner { padding: 130px 60px 0; }
.si02 .inner { padding: 80px 60px 0; }
.si03 .inner { padding: 150px 60px 0; }

.si-header {
  position: relative;
  z-index: 1;
  font-family: "Shippori Mincho", serif;
  letter-spacing: .15em;
}
.si-header h2 {
  font-size: 38px;
  font-size: 3.8rem;
  margin: 0 0 1em;
}
.si-header p {
  position: relative;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: calc(48 / 28);
}
.si-header p small { font-size: calc(18 / 28 * 1em); }

.si-summary {
  position: relative;
  width: 100%;
}
.si-summary figure {
  overflow: hidden;
  flex-shrink: 0;
}
.si-summary dl {
  position: relative;
  z-index: 1;
  width: 50%;
}
.si-summary dl dt {
  font-family: "Shippori Mincho", serif;
  font-size: 32px;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: calc(54 / 32);
  letter-spacing: .15em;
  margin: 0 0 .75em;
}
.si-summary dl dd {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: calc(32 / 16);
  letter-spacing: .15em;
}

@media screen and (max-width:780px) {
  .service-unit .inner { padding: 0; }
  .si01 .inner { padding: calc(110 / 780 * 100vw) 0 0; }
  .si02 .inner { padding: calc(80 / 780 * 100vw) 0 0; }
  .si03 .inner { padding: calc(40 / 780 * 100vw) 0 0; }
  .si-header h2 {
    font-size: calc(38 / 780 * 100vw);
    letter-spacing: .15em;
  }
  .si-header p {
    font-size: calc(28 / 780 * 100vw);
    letter-spacing: .15em;
  }
  .si-summary dl { width: 100%; }
  .si-summary dl dt {
    font-size: calc(32 / 780 * 100vw);
    line-height: calc(54 / 32);
  }
  .si-summary dl dd {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(40 / 26);
  }
}

/* Service Item01
------------------------------------------------------------- */
.si01 { padding: 0 0 295px; }
.si01 .images-wrap i {
  bottom: calc(160 / 1920 * 100vw * -1);
  left: calc(240 / 1920 * 100vw);
  aspect-ratio: 377 / 258;
}
.si01 .si-header { margin: 0 0 125px; }
.si01 .si-summary figure img {
  width: initial;
  max-width: 100%;
}
.si01 .ss01 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 165px;
}
.si01 .ss02 { margin: 0 0 195px; }
.si01 .ss03 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 110px;
}
.si01 .ss01 > div, .si01 .ss03 > div {
  width: 50%;
  display: grid;
  justify-content: center;
}
.si01 .ss01 figure { width: 400px; }
.si01 .ss02 figure {
  position: absolute;
  top: 50%;
  right: -230px;
  transform: translateY(-50%);
  width: 730px;
}
.si01 .ss02 figure img {
  width: initial;
  max-width: 100%;
}
.si01 .ss03 figure { width: 335px; }

@media screen and (max-width:780px) {
  .si01 { padding: 0 0 calc(295 / 780 * 100vw); }
  .si01 .si-header { margin: 0 0 calc(60 / 780 * 100vw); }
  .si01 .images-wrap i {
    top: calc(298 / 780 * 100vw);
    left: calc(30 / 780 * 100vw);
    width: calc(281 / 780 * 100vw);
  }
  .si01 .ss01 {
    display: block;
    margin: 0 0 calc(130 / 780 * 100vw);
  }
  .si01 .ss01 > div {
    width: auto;
    display: block;
    float: left;
    transform: translateX(calc(30 / 780 * 100vw * -1));
  }
  .si01 .ss01 figure { width: calc(300 / 780 * 100vw); }
  .si01 .ss01 dl { padding: calc(250 / 780 * 100vw) 0 0; }
  .si01 .ss01 dl dt {
    letter-spacing: 0;
    white-space: nowrap;
  }
  .si01 .ss02 figure {
    position: static;
    transform: translateY(0);
    width: calc(548 / 780 * 100vw);
    margin: calc(30 / 780 * 100vw) auto 0;
  }
  .si01 .ss03 {
    display: block;
    margin: 0 0 calc(70 / 780 * 100vw);
  }
  .si01 .ss03 > div {
    width: auto;
    display: block;
    float: left;
    padding: 0 calc(50 / 780 * 100vw) 0 0;
  }
  .si01 .ss03 figure { width: calc(251 / 780 * 100vw); }

}

/* Service Item02
------------------------------------------------------------- */
.si02 { padding: 0 0 310px; }
.si02 .images-wrap i {
  top: calc(410 / 1920 * 100vw);
  left: calc(1355 / 1920 * 100vw);
  aspect-ratio: 263 / 231;
}
.si02 .si-header { margin: 0 0 150px; }

.si02 .si-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.si02 .si-summary figure { width: 100%; }
.si02 .si-summary figure img {
  width: initial;
  max-width: 100%;
}
.si02 .ss01 { margin: 0 0 180px; }
.si02 .ss02 {
  flex-direction: row-reverse;
  margin: 0 0 130px;
}
.si02 .ss03 { margin: 0 0 140px; }
.si02 .si-summary > div {
  width: 50%;
  display: grid;
  justify-content: center;
}
.si02 .ss02 > div { justify-content: right; }
.si02 .ss01 figure { width: 316px; }
.si02 .ss02 figure { width: 480px; }
.si02 .ss03 figure { width: 283px; }

@media screen and (max-width:780px) {
  .si02 { padding: 0 0 calc(210 / 780 * 100vw); }
  .si02 .si-header { margin: 0 0 calc(120 / 780 * 100vw); }
  .si02 .images-wrap i {
    top: initial;
    left: initial;
    bottom: calc(130 / 780 * 100vw * -1);
    right: calc(40 / 780 * 100vw);
    width: calc(201 / 780 * 100vw);
  }
  .si02 .si-summary { display: block; }

  .si02 .ss01 { margin: 0 0 calc(35 / 780 * 100vw); }
  .si02 .ss01 figure { width: calc(237 / 780 * 100vw); }
  .si02 .ss01 > div {
    width: auto;
    display: block;
    float: left;
    padding: 0 calc(45 / 780 * 100vw) 0 0;
  }
  .si02 .ss01 dl { padding: calc(50 / 780 * 100vw) 0 0; }
  .si02 .ss01 dl dt { margin: 0; }
  .si02 .ss01 dl dd { margin: calc(35 / 780 * 100vw) 0 0; }

  .si02 .ss02 { margin: 0 0 calc(80 / 780 * 100vw); }
  .si02 .ss02 > div {
    width: auto;
    display: block;
    float: right;
    transform: translateX(calc(30 / 780 * 100vw));
  }
  .si02 .ss02 figure { width: calc(360 / 780 * 100vw); }
  .si02 .ss02 dl { padding: calc(145 / 780 * 100vw) 0 0; }
  .si02 .ss02 dl dt { white-space: nowrap; }

  .si02 .ss03 { margin: 0 0 calc(70 / 780 * 100vw); }
  .si02 .ss03 > div {
    width: calc(281 / 780 * 100vw);
    justify-content: center;
    float: left;
  }
  .si02 .ss03 figure { width: calc(212 / 780 * 100vw); }
  .si02 .ss03 dl { padding: calc(35 / 780 * 100vw) 0 0; }
  .si02 .ss03 dl { margin: 0; }
  .si02 .ss03 dl dd { margin: calc(45 / 780 * 100vw) 0 0; }
}

/* Service Item03
------------------------------------------------------------- */
.si03 .images-wrap i {
  top: calc(370 / 1920 * 100vw);
  left: calc(220 / 1920 * 100vw);
  aspect-ratio: 246 / 241;
}
.si03 .si-header { margin: 0 0 50px; }
.si03 .si-header p img {
  position: absolute;
  right: -45px;
  bottom: 35px;
  width: 368px;
  transform: rotate(9.8deg);
  aspect-ratio: 1849 / 1050;
}

/* Anytime */
.anytime-unit {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0 110px;
  margin: 0 auto;
}
.anytime-item .office-summary { padding: 0; }

.office-name {
  font-family: "Shippori Mincho", serif;
  font-size: 24px;
  font-size: 2.4rem;
  letter-spacing: .15em;
  line-height: calc(36 / 24);
  margin: 1em auto;
  white-space: nowrap;
}
.office-name + p {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .15em;
  line-height: calc(30 / 18);
  margin: 0 0 1em;
}
.office-summary li {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .15em;
  line-height: calc(30 / 18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.office-summary li span { display: inline-block; }
.gmap {
  position: relative;
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: .05em;
  color: #38a99d;
  display: inline-block;
  padding: 0 0 0 36px;
  margin: 0 0 1.25em;
}
.gmap::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 26px;
  height: 35px;
  display: inline-block;
  background: url(../../common/images/icon_map.svg) no-repeat 0 0 / cover;
}

@media screen and (max-width:780px) {
  .si03 .images-wrap i {
    top: initial;
    left: calc(30 / 780 * 100vw);
    bottom: calc(95 / 780 * 100vw * -1);
    width: calc(182 / 780 * 100vw);
  }
  .si03 .si-header { margin: 0 0 calc(80 / 780 * 100vw); }
  .si03 .si-header h3 { text-align: center; }
  .si03 .si-header p img {
    right: calc(105 / 780 * 100vw * -1);
    bottom: calc(105 / 780 * 100vw * -1);
    width: calc(276 / 780 * 100vw);
    transform: rotate(9.8deg);
  }

  .anytime-unit {
    width: calc(700 / 780 * 100vw);
    margin: 0 0 0 calc(20 / 780 * 100vw * -1);
    gap: 0 calc(70 / 780 * 100vw);
  }
  .anytime-item {
    width: fit-content;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .anytime-item > figure { width: calc(315 / 780 * 100vw); }
  .anytime-item .office-name {
    font-size: calc(26 / 780 * 100vw);
    text-align: center;
  }
  .gmap {
    font-size: calc(26 / 780 * 100vw);
    padding: 0 0 0 calc(46 / 780 * 100vw);
  }
  .gmap::before {
    width: calc(36 / 780 * 100vw);
    height: calc(49 / 780 * 100vw);
  }
}