@charset "utf-8";

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

  "Nano Create Company" Company Styles

============================================================= */
body {
  background-image: url(../images/company_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/company_bg_gra_sp.webp); }
}

section { position: relative; }
.inner { position: relative; }

.sec-heading {
  position: absolute;
  top: 0;
  font-family: "VAG Rundschrift D W03 Light It";
  font-size: 36px;
  font-size: 3.6rem;
  letter-spacing: .2em;
  color: #ffa4a4;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(130px);
}
.sec-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -130px);
  width: 2px;
  height: 120px;
  background-color: #ffa4a4;
  display: block;
}

@media screen and (max-width:780px) {
  .sec-heading { font-size: calc(36 / 780 * 100vw); }
  .sec-heading::before {
    height: calc(120 / 780 * 100vw);
    transform: translate(-50%, calc(130 / 780 * 100vw * -1));
  }
}

/*
  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: 46% 50%;
  }
}

/*
  Policy
============================================================= */
.policy { padding: 0 0 290px; }
.policy .sec-heading { left: 0; }
.policy-items { padding: 135px 0 0; }
.policy-item {
  position: relative;
  font-family: "Shippori Mincho", serif;
}
.policy-item h3 {
  font-size: 38px;
  font-size: 3.8rem;
  letter-spacing: .15em;
  line-height: calc(54 / 38);
  margin: 0 0 40px;
  padding: 0 0 0 270px;
}
.policy-item h3 span {
  font-size: calc(24 / 38 * 1em);
  display: block;
}
.policy-item p {
  font-size: 28px;
  font-size: 2.8rem;
  letter-spacing: .15em;
  line-height: calc(48 / 28);
  padding: 0 0 0 270px;
}

.policy-item.mission { padding: 155px 0 200px; }
.policy-item.mission i:first-of-type {
  position: absolute;
  top: 0;
  left: calc(80 / 1920 * 100vw);
  width: calc(234 / 1920 * 100vw);
  height: calc(146 / 1920 * 100vw);
}
.policy-item.mission i:last-of-type {
  position: absolute;
  top: calc(220 / 1920 * 100vw);
  right: calc(90 / 1920 * 100vw);
  width: calc(254 / 1920 * 100vw);
  height: calc(221 / 1920 * 100vw);
}
.policy-item.vision { padding: 0 0 170px; }
.policy-item.vision i {
  width: calc(876 / 1920 * 100vw);
  height: calc(294 / 1920 * 100vw);
  display: block;
  margin: 0 auto 25px;
}
.policy-item.value i {
  position: absolute;
  top: 0;
  right: calc(130 / 1920 * 100vw);
  width: calc(294 / 1920 * 100vw);
  height: calc(351 / 1920 * 100vw);
}

@media screen and (max-width:780px) {
  .policy { padding: 0 0 calc(190 / 780 * 100vw); }
  .policy .sec-heading { left: calc(60 / 780 * 100vw * -1); }
  .policy-items { padding: calc(155 / 780 * 100vw) 0 0; }
  .policy-item h3 {
    font-size: calc(38 / 780 * 100vw);
    margin: 0 0 calc(40 / 780 * 100vw);
    padding: 0;
  }
  .policy-item p {
    font-size: calc(28 / 780 * 100vw);
    letter-spacing: .075em;
    padding: 0;
  }
  .policy-item.mission { padding: calc(125 / 780 * 100vw) 0 calc(185 / 780 * 100vw); }
  .policy-item.mission i:first-of-type {
    left: 0;
    width: calc(182 / 780 * 100vw);
    height: calc(109 / 780 * 100vw);
  }
  .policy-item.mission i:last-of-type {
    top: calc(225/ 780 * 100vw);
    right: calc(30 / 780 * 100vw * -1);
    width: calc(190 / 780 * 100vw);
    height: calc(166 / 780 * 100vw);
  }
  .policy-item.vision { padding: 0 0 calc(140 / 780 * 100vw); }
  .policy-item.vision i {
    width: 100%;
    height: auto;
    margin: 0 auto calc(25 / 780 * 100vw);
}
  .policy-item.value i {
    top: calc(60 / 780 * 100vw);
    right: calc(55 / 780 * 100vw * -1);
    width: calc(220 / 780 * 100vw);
    height: calc(262 / 780 * 100vw);
  }
}

/*
  Profile
============================================================= */
.profile { padding: 0 0 315px; }
.profile .sec-heading { left: 0; }
.profile .inner { padding: 0 60px 0 0; }
.overview { padding: 0 0 0 140px; }
.overview table {
  width: 100%;
  border-top: solid 1px #d4d4d4;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: .05em;
  line-height: calc(30 / 16);
}
.overview table th {
  width: 22%;
  padding: 1em 0 1em 45px;
  font-weight: 400;
  background-color: #fcf9ea;
  border-bottom: solid 1px #d4d4d4;
}
.overview table td {
  padding: 1em 30px;
  border-bottom: solid 1px #d4d4d4;
}

@media screen and (max-width:780px) {
  .profile { padding: 0 0 calc(185 / 780 * 100vw); }
  .profile .sec-heading { left: calc(60 / 780 * 100vw * -1); }
  .profile .inner { padding: 0; }
  .overview { padding: 0; }
  .overview table {
    width: 100%;
    font-size: calc(26 / 780 * 100vw);
  }
  .overview table th {
    width: 25%;
    padding: 1em .75em;
    line-height: 1.4;
  }
  .overview table td {
    padding: 1em .75em;
    line-height: 1.4;
  }
}

/*
  Business Office
============================================================= */
.office { padding: 0 0 320px; }
.office .inner { padding: 0 60px; }
.office .sec-heading { right: 0; }

.office-name {
  font-family: "Shippori Mincho", serif;
  font-size: 24px;
  font-size: 2.4rem;
  letter-spacing: .15em;
  line-height: calc(36 / 24);
  margin: 0 0 1em;
  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: flex-start;
}
.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;
}
.tf-num i {
  width: 51px;
  height: auto;
  display: inline-block;
  margin: .25em .5em 0 0;
}
.tf-num i img { vertical-align: top; }

@media screen and (max-width:780px) {
  .office { padding: 0 0 calc(170 / 780 * 100vw); }
  .office .inner { padding: 0; }
  .office .sec-heading { right: calc(60 / 780 * 100vw * -1); }
  .office-name {
    font-size: calc(30 / 780 * 100vw);
    line-height: calc(48 / 30);
  }
  .office-name + p {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(40 / 26);
  }
  .office-summary li {
    font-size: calc(26 / 780 * 100vw);
    line-height: calc(40 / 26);
  }
  .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);
  }
  .tf-num i { width: calc(71 / 780 * 100vw); }
}

/* Office
------------------------------------------------------------- */
.office-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 45px;
  margin: 0 0 100px;
}
.office-item:nth-of-type(2) { padding: 0 0 0 300px; }
.office-item:nth-of-type(2) i {
  position: absolute;
  left: 0;
  top: 100px;
  width: 360px;
  height: 286px;
  /*
  top: calc(100 / 1920 * 100vw);
  width: calc(360 / 1920 * 100vw);
  height: calc(286 / 1920 * 100vw);
  */
  display: inline-block;
}
.office-item > figure { width: 400px; }

@media screen and (max-width:780px) {
  .office-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    margin: 0 0 calc(100 / 780 * 100vw);
  }
  .office-item > figure {
    width: calc(400 / 780 * 100vw);
    transform: translateX(calc(20 / 780 * 100vw * -1));
  }
  .office-item:nth-of-type(odd) > div { transform: translateX(calc(255 / 780 * 100vw)); }
  .office-item:nth-of-type(2) { padding: 0; }
  .office-item:nth-of-type(2) i {
    top: calc(140 / 780 * 100vw);
    left: calc(25 / 780 * 100vw);
    width: calc(270 / 780 * 100vw);
    height: calc(215 / 780 * 100vw);
  }
  .office-item:nth-of-type(2) > figure { transform: translateX(calc(280 / 780 * 100vw)); }
}

/* Anytime
------------------------------------------------------------- */
.anytime-unit {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0 100px;
  margin: 0 0 120px;
}
.anytime-item > figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.anytime-item .office-name { margin: 1em 0; }
.anytime-item .office-summary { padding: 0 0 0 135px; }
.anytime-unit > i {
  position: absolute;
  /*
  top: calc(20 / 1920 * 100vw * -1);
  right: calc(170 / 1920 * 100vw * -1);
  width: calc(328 / 1920 * 100vw);
  height: calc(504 / 1920 * 100vw);
  */
  top: -20px;
  right: -170px;
  width: 328px;
  height: 504px;
  display: inline-block;
}

@media screen and (max-width:780px) {
  .anytime-unit {
    display: block;
    margin: 0;
  }
  .anytime-item {
    width: fit-content;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .anytime-item:first-of-type { transform: translateX(calc(20 / 780 * 100vw * -1)); }
  .anytime-item:last-of-type {
    float: right;
    transform: translate(calc(70 / 780 * 100vw * -1), 0);
  }
  .anytime-item > figure {
    width: calc(315 / 780 * 100vw);
    margin: auto;
  }
  .anytime-item .office-name {
    font-size: calc(26 / 780 * 100vw);
    text-align: center;
  }
  .anytime-item .office-summary { padding: 0; }
  .anytime-item .office-summary li { justify-content: center; }
  .anytime-item .tf-num { justify-content: center; }
  .anytime-unit > i {
    top: calc(545 / 780 * 100vw);
    right: calc(118 / 780 * 100vw * -1);
    width: calc(246 / 780 * 100vw);
    height: calc(378 / 780 * 100vw);
  }
}

/* Affiliated Corporation
------------------------------------------------------------- */
.affiliated-corp-unit { position: relative; }
.affiliated-corp {
  display: flex;
  align-items: center;
  gap: 0 47.5px;
}
.affiliated-corp > figure { width: 400px; }
.affiliated-corp .office-name i {
  width: 34px;
  display: inline-block;
  transform: translateY(-5px);
  margin: 0 10px 0 0;
}
.affiliated-corp-unit > i {
  position: absolute;
  /*
  top: calc(285 / 1920 * 100vw);
  left: calc(250 / 1920 * 100vw * -1);
  width: calc(372 / 1920 * 100vw);
  height: calc(341 / 1920 * 100vw);
  */
  top: 285px;
  left: -250px;
  width: 372px;
  height: 341px;
  display: inline-block;
}

@media screen and (max-width:780px) {
  .affiliated-corp {
    width: fit-content;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0;
  }
  .affiliated-corp > figure { width: calc(315 / 780 * 100vw); }
  .affiliated-corp .office-name i { width: calc(34 / 780 * 100vw); }
  .affiliated-corp .office-name {
    font-size: calc(26 / 780 * 100vw);
    text-align: left;
    margin: 1em 0;
  }
  .affiliated-corp-unit > i {
    top: calc(120 / 780 * 100vw);
    left: calc(270 / 780 * 100vw);
    width: calc((372 * .75) / 780 * 100vw);
    height: calc((341 * .75) / 780 * 100vw);
    transform: scaleX(-1)
  }
}


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

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

/* Round
------------------------------------------------------------- */
.dr02 {
  top: calc(310 / 780 * 100vw);
  left: initial;
  right: calc(120 / 780 * 100vw)
}
.dr01, .dr03, .dr04, .dr05 { display: none; }

/* Square
------------------------------------------------------------- */
.ds01, .ds02, .ds03, .ds04, .ds05, .ds06, .ds07 { display: none; }

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

}

/*
  Round
============================================================= */
i.round {
  position: absolute;
  top: 120px;
  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 { display: none; }
}