@charset "utf-8";

:root {
  --font-ship: "Shippori Mincho", serif;
  --font-zen: "Zen Kaku Gothic New", sans-serif;
  --font-lora: "Lora", serif;
  --blue: #000F95;
  --dark-blue: #000F3F;
}

.-wb {
  display: inline-block;
}

.-pc {
  display: block;
}

.-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .-pc {
    display: none;
  }

  .-sp {
    display: block;
  }
}

.isHover {
  transition: opacity 300ms 0s ease;
}

@media screen and (min-width: 769px) {
  .isHover:hover {
    opacity: .7;
  }
}


/* ↓↓↓ header ↓↓↓ */
.header {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  container-type: inline-size;
  z-index: 5;
  padding: 24px 0;
  transition: background-color 0.3s ease;
}

.header.-show {
  background-color: rgba(255, 255, 255, 0.7);
}

@media screen and (max-width: 768px){
  .header {
    padding: 16px 0;
    transition: background-color 0.5s ease;
  }
  .header.-active {
    background-color: #fff;
  }
}

.header .logo-wrap {
  margin-left: 43px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 5;
}

@media screen and (max-width: 1280px){
  .header .logo-wrap {
    margin-left: 3.3594cqw;
  }
}

@media screen and (max-width: 768px){
  .header .logo-wrap {
    margin-left: 18px;
    display: grid;
    justify-items: center;
  }
}

.header .logo-wrap .logo {
  width: 142px;
}

@media screen and (max-width: 768px){
  .header .logo-wrap .logo {
    width: 106px;
  }
}

.header .logo-wrap .txt {
  font-family: var(--font-lora);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--blue);
  margin-left: 20px;
}

@media screen and (max-width: 768px){
  .header .logo-wrap .txt {
    margin-left: 0;
  }
}

.header .site-menu {
  margin-right: 32px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 1280px) {
  .header .site-menu {
    margin-right: 2.5cqw;
  }
}

@media screen and (max-width: 768px) {
  .header .site-menu {
    margin-right: 16px;
  }
}

.header .site-menu .site-menu_list {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .header .site-menu .site-menu_list {
    display: none;
  }
}

.header .site-menu .site-menu_list li {
  font-family: var(--font-lora);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--blue);
  padding-left: 45px;
}

@media screen and (max-width: 1280px) {
  .header .site-menu .site-menu_list li {
    padding-left: 3.5156cqw;
  }
}

@media screen and (max-width: 900px) {
  .header .site-menu .site-menu_list li {
    font-size: 1.77778cqw;
  }
}

.header .site-menu .site-menu_list li:first-child {
  padding-left: 0;
}


.header .site-menu .entry-btn {
  width: 156px;
  height: 48px;
  background-image: url(../img/top/entry-btn-bg.jpg);
  margin-left: 38px;
}

@media screen and (max-width: 1280px) {
  .header .site-menu .entry-btn {
    margin-left: 2.96872cqw;
  }
}

@media screen and (max-width: 768px) {
  .header .site-menu .entry-btn {
    margin-left: 0;
    margin-right: 16px;
  }
}

.header .site-menu .entry-btn p {
  position: relative;
  font-family: var(--font-lora);
  font-size: 2.0rem;
  letter-spacing: 0.18em;
  color: #fff;
  padding: 8px 30px;
  z-index: 5;
}

.header .site-menu .entry-btn p::after {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  background-image: url(../img/top/entry-btn-arrow.svg);
  top: 17px;
  right: 28px;
  z-index: 5;
}

.header .site-menu .menu-btn {
  position: relative;
  width: 48px;
  height: 48px;
  background-color: #000F95;
  z-index: 5;
}

.header .site-menu .menu-btn span{
  width: 21px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  transition: ease .3s;
  display: block;
  transform: translateX(-50%);
  left: 50%;
}

.header .site-menu .menu-btn span:nth-child(1) {
  top: 16px;
}

.header .site-menu .menu-btn span:nth-child(2) {
  top: 50%;
}

.header .site-menu .menu-btn span:nth-child(3) {
  bottom: 16px;
}

.header .site-menu .menu-btn.-active span:nth-child(1) {
  width: 28px;
  translate: -3px -1px;
  rotate: -35deg;
}

.header .site-menu .menu-btn.-active span:nth-child(2) {
  opacity: 0;
}

.header .site-menu .menu-btn.-active span:nth-child(3) {
  width: 28px;
  translate: -2px 0px;
  rotate: 35deg;
}

.modal {
  position: fixed;
  width: 100%;
  height: 458px;
  background: url(../img/top/menu-bg.jpg) top left no-repeat;
  background-size: cover;
  z-index: 3;
  right: -100%;
  transition: right 0.3s ease;
}

.modal.-active {
  right: 0;
}

.modal .site-menu_list {
  width: 100%;
  position: absolute;
  top: 120px;
  left: 27px;
  color: #fff;
}

.modal .site-menu_list li {
  position: relative;
  font-family: var(--font-lora);
  font-size: 2.0rem;
  padding-bottom: 25px;
  margin-bottom: 25px;
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.5;
}

.modal .site-menu_list li::after {
  position: absolute;
  content: '';
  width: 85.33333333333333%;
  height: 1px;
  background-color: #fff;
  translate: 0 -50%;
  bottom: 0;
  left: 0;
}

.modal .site-menu_list li:nth-child(3):after {
  display: none;
}

.modal .site-menu_list li .ja{
  font-family: var(--font-lora);
  font-size: 1.6rem;
}


/* ↑↑↑ header ↑↑↑ */

/* ↓↓↓ fv ↓↓↓ */
.fv {
  width: 100%;
}

.fv .image {
  position: relative;
  width: 100%;
  container-type: inline-size;
}

.fv .text {
  position: absolute;
  width: 49.219cqw;
  top: 24.84372cqw;
  right: 6.09372cqw;
  filter: drop-shadow(0 0 20px rgba(0, 104, 182, 0.6));
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .fv .text {
    width: 100%;
    top: 40cqw;
    right: 0;
  }
}
/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ description ↓↓↓ */
.description {
  position: relative;
  aspect-ratio: 256 / 163;
  width: 100%;
  background: url(../img/top/description-image_pc.jpg) no-repeat center bottom;
  background-size: cover;
  container-type: inline-size;
}

@media screen and (max-width: 768px) {
  .description {
    aspect-ratio: 375/ 653;
    background: url(../img/top/description-image_sp.jpg) no-repeat center bottom;
    background-size: cover;
  }
}

.description .text-block {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  column-gap: 75px;
  translate: -50% 0;
  top: 6.25cqw;
  left: 50%;
}

@media screen and (max-width: 1280px) {
  .description .text-block {
    column-gap: 5.8594cqw;
  }
}

@media screen and (max-width: 768px) {
  .description .text-block {
    column-gap: 0;
    top: 14.9334cqw;
  }
}

.description .text-block .text {
  font-family: var(--font-ship);
  font-size: 1.8rem;
  font-weight: 500;
  color: #fff;
  writing-mode: vertical-rl;
  line-height: 2.5em;
}

@media screen and (max-width: 1280px) {
  .description .text-block .text {
    font-size: 1.40625cqw;
  }
}

@media screen and (max-width: 768px) {
  .description .text-block .text {
    font-size: 4.26666cqw;
    line-height: 2.3;
  }
}

/* ↑↑↑ description ↑↑↑ */

/* ↓↓↓ business ↓↓↓ */
#business {
  position: relative;
  width: 100%;
  height: min(76.485vw, 979px);
  background-image: url(../img/top/business-bg_pc.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

@media screen and (max-width: 768px){
  #business {
    aspect-ratio: 375 / 1800;
    position: relative;
    width: 100%;
    height: unset;
    background-image: url(../img/top/business-bg_sp.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

#business .inner {
  display: grid;
  justify-items: center;
  max-width: 1280px;
  padding: 0 80px;
  margin: 0 auto;
  container-type: inline-size;
}

@media screen and (max-width: 768px){
  #business .inner {
    max-width: 768px;
    padding: 0 7.2cqw;
  }
}

#business .ttl-wrap {
  margin-top: 5.35711cqw;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 768px) {
  #business .ttl-wrap {
    margin-top: 15.5762cqw;
  }
}

#business .ttl-wrap .ttl{
  font-family: var(--font-lora);
  font-size: 6.42857cqw;
  font-weight: 400;
  letter-spacing: 0.25em;
}

@media screen and (max-width: 768px) {
  #business .ttl-wrap .ttl{
    font-size: 14.95326cqw;
  }
}

#business .ttl-wrap .sub-ttl {
  font-family: var(--font-ship);
  font-size: 1.60714cqw;
  font-weight: 700;
  margin-top: -15px;
}

@media screen and (max-width: 768px){
  #business .ttl-wrap .sub-ttl{
    font-size: 5.60748cqw;
  }
}

#business .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc((100% - 10.7143cqw) / 2));
  margin-top: 4.2857cqw;
  column-gap: 10.7143cqw;
}

@media screen and (max-width: 768px){
  #business .container {
    display: grid;
    grid-template-columns: 100cqw;
    margin-top: 15.5762cqw;
    row-gap: 31.1526cqw;
  }
}

#business .container .block {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

@media screen and (max-width: 768px){
  @media screen and (max-width: 768px){
    #business .container .block {
      display: grid;
      grid-template-rows: none;
      grid-row: unset;
    }
  }
}

#business .container .block .ttl {
  font-family: var(--font-ship);
  font-size: 2.14286cqw;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px){
  #business .container .block .ttl {
    font-size: 6.23052cqw;
    margin-bottom: 6.23052cqw;
  }
}

#business .container .block .txt {
  font-family: var(--font-zen);
  font-size: 1.42857cqw;
  font-weight: 400;
  text-align: justify;
  word-break: break-all;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: #fff;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px){
  #business .container .block .txt {
    font-size: 4.98441cqw;
    margin-bottom: 7.788cqw;
  }
}

#business .container .block .content-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 5.35711cqw;
}

@media screen and (max-width: 768px){
  #business .container .block .content-list {
    margin-bottom: 14.0186cqw;
    gap: 3.1152cqw;
  }
}

#business .container .block .content-list .item {
  width: calc((100% - 20px) / 3);
  aspect-ratio: 158 / 32;
  background-color: black;
  font-family: var(--font-ship);
  font-size: 1.42857cqw;
  font-weight: 700;
  color: #fff;
  display: grid;
  align-items: center;
  justify-items: center;
}

@media screen and (max-width: 768px){
  #business .container .block .content-list .item {
    aspect-ratio: 155 / 30;
    width: calc((100% - 3.1152cqw) / 2);
    font-size: 4.6729cqw;
    font-weight: 700;
  }
}

#business .container .block .pickup {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 3.0357cqw  3.5714cqw;
}

@media screen and (max-width: 768px){
  #business .container .block .pickup {
    padding: 10.9033cqw 7.788cqw;
  }
}

#business .container .block .pickup .ttl {
  font-family: var(--font-ship);
  font-size: 2.14286cqw;
  font-weight: 600;
  letter-spacing: 0.12em;
  position: absolute;
  translate: -50% 0;
  top: -1.875cqw;
  left: 50%;
  color: #000;
}

@media screen and (max-width: 768px){
  #business .container .block .pickup .ttl {
    font-size: 6.23052cqw;
    position: absolute;
    translate: -50% 0;
    top: -5.6076cqw;
    left: 50%;
    color: #000;
  }
}

#business .container .block .pickup .ttl::before,
#business .container .block .pickup .ttl::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 3.2cqw;
  background-color: #000;
  rotate: 225deg;
  top: 0.3571cqw;
}

#business .container .block .pickup .ttl::before {
  left: -1.7857cqw;
}

#business .container .block .pickup .ttl::after {
  right: -1.7857cqw;
}

@media screen and (max-width: 768px){
  #business .container .block .pickup .ttl::before,
  #business .container .block .pickup .ttl::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 9.035cqw;
    background-color: #000;
    rotate: 225deg;
  }

  #business .container .block .pickup .ttl::before {
    left: -6.23052cqw;
  }

  #business .container .block .pickup .ttl::after {
    right: -6.23052cqw;
  }
}

#business .container .block .pickup .sub-ttl {
  font-family: var(--font-zen);
  font-size: 1.60714cqw;
  font-weight: 500;
  color: var(--blue);
  margin-bottom: 12px;

  &.-en {
    font-size: 1.78571cqw;
  }
}

@media screen and (max-width: 768px){
  #business .container .block .pickup .sub-ttl {
    font-size: 4.98441cqw;
    margin-bottom: 4.36136cqw;
    &.-en {
      font-size: 4.98441cqw;
    }
  }
}

#business .container .block .pickup .text {
  font-family: var(--font-zen);
  font-size: 1.42857cqw;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.7;
  text-align: justify;
  word-break: break-all;
  margin-bottom: 8px;
}

@media screen and (max-width: 768px){
  #business .container .block .pickup .text {
    font-family: var(--font-zen);
    font-size: 4.36136cqw;
  }
}

#business .container .block .pickup .caption {
  font-family: var(--font-zen);
  font-size: 1.25cqw;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-align: justify;
  word-break: break-all;
}

@media screen and (max-width: 768px){
  #business .container .block .pickup .caption {
    font-size: 3.73831cqw;
  }
}

/* ↑↑↑ business ↑↑↑ */

/* ↓↓↓ works ↓↓↓ */
#works {
  width: 100%;
  container-type: inline-size;
  background-color: #D4D6DE;
}

#works .ttl-wrap {
  margin: 100px 0 40px;
  text-align: center;
  color: var(--blue);
}

@media screen and (max-width: 1280px){
  #works .ttl-wrap {
    margin: 7.8125cqw 0 3.125cqw;
  }
}

@media screen and (max-width: 768px){
  #works .ttl-wrap {
    margin: 17.0666cqw 0 6.4cqw;
  }
}

#works .ttl {
  font-family: var(--font-lora);
  font-size: 7.2rem;
  letter-spacing: 0.25em;
  line-height: 1;
}

@media screen and (max-width: 1280px){
  #works .ttl {
    font-size: 5.625cqw;
  }
}

@media screen and (max-width: 768px){
  #works .ttl {
    font-size: 12.8cqw;
  }
}

#works .sub-ttl {
  font-family: var(--font-ship);
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 10px;
}

@media screen and (max-width: 1280px){
  #works .sub-ttl {
    font-size: 1.40625cqw;
    margin-top: 0.78122cqw;
  }
}

@media screen and (max-width: 768px){
  #works .sub-ttl {
    font-size: 4.8cqw;
    margin-top: 0.78122cqw;
  }
}

#works .block {
  width: 100%;
  height: min(52.266vw, 669px);
  background: url(../img/top/works-bg01_pc.jpg) no-repeat center center;
  background-size: cover;
}

#works .block.architecture {
  background: url(../img/top/works-bg02_pc.jpg) no-repeat center center;
  background-size: cover;
}

#works .block.electrical {
  background: url(../img/top/works-bg03_pc.jpg) no-repeat center center;
  background-size: cover;
}

#works .block.affairs {
  height: min(54.532vw, 698px);
  background: url(../img/top/works-bg04_pc.jpg) no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 768px){
  #works .block {
    aspect-ratio: 375 / 842;
    width: 100%;
    height: unset;
    background: url(../img/top/works-bg01_sp.jpg) no-repeat center center;
    background-size: auto 100%;
  }
  #works .block.architecture {
    aspect-ratio: 375 / 892;
    background: url(../img/top/works-bg02_sp.jpg) no-repeat center center;
    background-size: auto 100%;
  }
  
  #works .block.electrical {
    aspect-ratio: 375 / 747;
    background: url(../img/top/works-bg03_sp.jpg) no-repeat center center;
    background-size: auto 100%;
  }
  
  #works .block.affairs {
    aspect-ratio: 375 / 855;
    height: unset;
    background: url(../img/top/works-bg04_sp.jpg) no-repeat center center;
    background-size: auto 100%;
  }
}

#works .block .inner {
  position: relative;
  max-width: 1280px;
  padding: 80px 64px 90px;
  margin: 0 auto;
  container-type: inline-size;
}

@media screen and (max-width: 1280px){
  #works .block .inner {
    padding: 6.25cqw 5cqw 7.03122cqw;
  }
}

@media screen and (max-width: 768px){
  #works .block .inner {
    height: 100%;
    padding: 14.9333cqw 7.2cqw;
    container-type: unset;
  }
}

#works .block .tab {
  position: relative;
  width: 46.875cqw;
  margin: 0 auto 3.0382cqw;
  z-index: 3;
}

#works .block.architecture .tab {
  width: 78.125cqw;
}

#works .block.electrical .tab {
  width: 31.25cqw;
}

@media screen and (max-width: 768px){
  #works .block .tab,
  #works .block.architecture .tab,
  #works .block.electrical .tab{
    width: 100%;
    margin: 0 auto;
  }
}

#works .tab .list {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px){
  #works .tab .list {
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 25px;
  }
}

#works .block .tab .list .item {
  display: grid;
  justify-content: center;
  align-items: end;
  position: relative;
  width: calc(100% / 3);
  font-family: var(--font-zen);
  font-size: 1.73611cqw;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
  color: #fff;
  padding-bottom: 1.3889cqw;
  cursor: pointer;
}

#works .block.architecture .tab .list .item {
  width: calc(100% / 5);
}

#works .block.electrical .tab .list .item {
  width: calc(100% / 2);
}

@media screen and (max-width: 768px){
  #works .block .tab .list .item,
  #works .block.architecture .tab .list .item,
  #works .block.electrical .tab .list .item {
    width: calc(100% / 2);
    font-size: 4.26666cqw;
    padding-bottom: 1.6cqw;
  }
}

#works .tab .list .item::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #80879F;
  position: absolute;
  translate: -50% 0;
  bottom: 0;
  left: 50%;
}

#works .tab .list .item.-active::after {
  background-color: #fff;
}

#works .job {
  position: absolute;
  font-family: var(--font-ship);
  font-size: 8.68056cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.9));
  writing-mode: vertical-rl;
  color: #fff;
  line-height: 1;
  top: 6.94441cqw;
  left: 5.55552cqw;
  z-index: 2;
}

#works .block.architecture .job,
#works .block.affairs .job {
  right: 5.55552cqw;
}

@media screen and (max-width: 768px){
  #works .job {
    font-size: 17.06666cqw;
    left: 7.2cqw;
    top: 45.3333cqw;
  }

  #works .block.architecture .job {
    left: unset;
    right: 7.2cqw;
    top: 60.5334cqw;
  }

  #works .block.electrical .job {
    left: 7.2cqw;
    top: 37.8666cqw;
  }

  #works .block.affairs .job {
    left: unset;
    right: 7.2cqw;
    top: 50.6666cqw;
  }
}

#works .tab-panel {
  width: 100%;
  /* display: none; */
}

#works .tab-panel.-show {
  display: block;
}

#works .tab-panel img {
  width: 56.164cqw;
  margin-left: 4.7743cqw;
}

#works .block.architecture .tab-panel img,
#works .block.affairs .tab-panel img {
  margin-left: 39.0625cqw;
}

@media screen and (max-width: 768px){
  #works .tab-panel img {
    position: absolute;
    width: 78.935cqw;
    margin-left: 0;
    top: 13.1285cqw;
    right: -7.2cqw;
  }

  #works .block.architecture .tab-panel img {
    margin-left: 0;
    top: 13.9666cqw;
    left: -7.2cqw;
  }

  #works .block.electrical .tab-panel img {
    margin-left: 0;
    top: 20.9496cqw;
    right: -7.2cqw;
  }

  #works .block.affairs .tab-panel img {
    margin-left: 0;
    top: 12.5698cqw;
    left: -7.2cqw;
  }
}

#works .tab-panel .text-block {
  position: absolute;
  width: 41.667cqw;
  padding:  3.4722cqw;
  background-image: url(../img/top/works-textbg.jpg);
  color: #fff;
  top: 3.0382cqw;
  right: 0.86802cqw;
  /* top: 16.49302cqw;
  right: 6.94441cqw; */
}

#works .block.architecture .tab-panel .text-block {
  left: 0.86802cqw;
}

#works .block.affairs .tab-panel .text-block {
  top: 3.0382cqw;
  left: 0.86802cqw;
}

@media screen and (max-width: 768px){
  #works .tab-panel .text-block {
    position: absolute;
    width: 93.6cqw;
    padding: 11.2cqw 7.4666cqw;
    top: 59.4973cqw;
    left: -7.2cqw;
  }

  #works .block.architecture .tab-panel .text-block {
    left: unset;
    right: -7.2cqw;
    top: 56.704cqw;
  }

  #works .block.electrical .tab-panel .text-block {
    top: 67.039cqw;
  }

  #works .block.affairs .tab-panel .text-block {
    left: unset;
    right: -7.2cqw;
    top: 56.704cqw;
  }
}

#works .tab-panel .text-block .text01 {
  font-family: var(--font-ship);
  font-size: 1.73611cqw;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 2.1701cqw;
}

@media screen and (max-width: 768px){
  #works .tab-panel .text-block .text01 {
    font-size: 4.26666cqw;
    line-height: 1.8;
    margin-bottom: 4.26666cqw;
  }
}

#works .tab-panel .text-block .text02 {
  font-family: var(--font-zen);
  font-size: 1.38889cqw;
  text-align: justify;
  word-break: break-all;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

@media screen and (max-width: 768px){
  #works .tab-panel .text-block .text02 {
    font-size: 3.73333cqw;
  }
}
/* ↑↑↑ works ↑↑↑ */

/* ↓↓↓ enviroment ↓↓↓ */
.enviroment {
  width: 100%;
  container-type: inline-size;
  background-color: #D4D6DE;
}

.enviroment .inner {
  max-width: 1280px;
  padding: 100px 80px;
  margin: 0 auto;
  container-type: inline-size;
}

@media screen and (max-width: 1280px){
  .enviroment .inner {
    padding: 7.8125cqw 6.25cqw;
  }
}

@media screen and (max-width: 768px){
  .enviroment .inner {
    max-width: 768px;
    padding: 16.3727cqw 0;
  }
}

.enviroment .ttl-wrap {
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 3.5714cqw;
}

@media screen and (max-width: 768px){
  .enviroment .ttl-wrap {
    margin-bottom: 8cqw;
  }
}

.enviroment .ttl-wrap .ttl {
  font-family: var(--font-lora);
  font-size: 7.85714cqw;
  letter-spacing: 0.25em;
  line-height: 1;
  color: #fff;
}

@media screen and (max-width: 768px){
  .enviroment .ttl-wrap .ttl {
    font-size: 12.8cqw;
    letter-spacing: 0.15em;
  }
}

.enviroment .ttl-wrap .sub-ttl {
  position: absolute;
  font-family: var(--font-ship);
  font-size: 2.5cqw;
  font-weight: 700;
  letter-spacing: 0.1em;
  translate: -50% 0;
  left: 50%;
  bottom: 0;
}

@media screen and (max-width: 768px){
  .enviroment .ttl-wrap .sub-ttl {
    font-size: 4.8cqw;
  }
}

.enviroment .text {
  font-family: var(--font-zen);
  font-size: 1.42857cqw;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 3.5714cqw;
}

@media screen and (max-width: 768px){
  .enviroment .text {
    width: 85.33333333%;
    font-size: 4.26666cqw;
    text-align: justify;
    word-break: break-all;
    letter-spacing: 0.01em;
    margin: 0 auto 12cqw;
  }
}

.enviroment .new-employee {
  width: 100%;
  padding: 5.35711cqw 6.4286cqw;
  background: url(../img/top/new-employee-bg_pc.jpg) no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee {
    aspect-ratio: 320 / 1262;
    width: 85.33333333%;
    padding: 10.6666cqw 6.4cqw;
    margin: 0 auto;
    background: url(../img/top/new-employee-bg_sp.jpg) no-repeat;
    background-size: cover;
  }
}

.enviroment .new-employee .ttl {
  font-family: var(--font-ship);
  font-size: 2.14286cqw;
  text-align: center;
  color: #fff;
  margin-bottom: 1.3393cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .ttl {
    font-size: 4.8cqw;
    margin-bottom: 6.4cqw;
  }
}

.enviroment .new-employee .job-list {
  display: flex;
  justify-content: center;
  column-gap: 0.894cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .job-list {
    justify-content: space-between;
    column-gap: 0;
  }
}

.enviroment .new-employee .item {
  font-family: var(--font-zen);
  font-size: 1.42857cqw;
  padding: 0.3571cqw 2.5cqw 0.4464cqw;
  font-weight: 700;
  color: #fff;
  background-color: #000;
  line-height: 1;
  margin-bottom: 3.5714cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .item {
    font-size: 3.73332cqw;
    padding: 1.0667cqw 4.2666cqw;
    margin-bottom: 8cqw;
  }
}

.enviroment .new-employee .all {
  display: flex;
  column-gap: 3.5714cqw;
  margin-bottom: 2.6786cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .all {
    display: grid;
    column-gap: 3.5714cqw;
    margin-bottom: 10.6666cqw;
  }
}

.enviroment .new-employee .all .text-wrap {
  width: 40.715cqw;
  color: #fff;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .all .text-wrap {
    width: 100%;
    color: #fff;
  }
}

.enviroment .new-employee .all .text-wrap .text01 {
  font-family: var(--font-ship);
  font-size: 1.78571cqw;
  font-weight: 600;
  margin-bottom: 2.2321cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .all .text-wrap .text01 {
    font-size: 4.26666cqw;
    margin-bottom: 5.6cqw;
  }
}

.enviroment .new-employee .all .text-wrap .text02 {
  font-family: var(--font-zen);
  font-size: 1.42857cqw;
  letter-spacing: 0.05em;
  text-align: justify;
  word-break: break-all;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .all .text-wrap .text02 {
    font-size: 3.73332cqw;
    margin-bottom: 5.6cqw;
  }
}

.enviroment .new-employee .all img {
  width: 42.858cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .all img {
    width: 100%;
  }
}

.enviroment .new-employee .Individual .text01 {
  font-family: var(--font-ship);
  font-size: 1.78571cqw;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.78571cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .Individual .text01 {
    font-size: 4.26666cqw;
    margin-bottom: 5.6cqw;
  }
}

.enviroment .new-employee .Individual .content {
  display: flex;
  column-gap: 3.125cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .Individual .content {
    display: grid;
    row-gap: 4.26666cqw;
  }
}

.enviroment .new-employee .Individual .content .card {
  width: calc(100% - 70px);
  background-color: #fff;
  padding: 2.6786cqw 2.14286cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .Individual .content .card {
    width: 100%;
    padding: 6.4cqw 4.26666cqw;
  }
}

.enviroment .new-employee .Individual .content .card .job {
  position: relative;
  font-family: var(--font-ship);
  font-size: 1.42857cqw;
  font-weight: 600;
  color: var(--blue);
  padding-left: 1.78571cqw;
  margin-bottom: 1.0714cqw;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .Individual .content .card .job {
    font-size: 4.26666cqw;
    padding-left: 5.3334cqw;
    margin-bottom: 2.1334cqw;
  }
}

.enviroment .new-employee .Individual .content .card .job::after {
  content: '';
  width: 0.894cqw;
  height: 0.894cqw;
  background-color: #000F95;
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  left: 0;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .Individual .content .card .job::after {
    width: 2.67cqw;
    height: 2.67cqw;
  }
}

.enviroment .new-employee .Individual .content .card .txt {
  font-family: var(--font-zen);
  font-size: 1.25cqw;
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-align: justify;
  word-break: break-all;
}

@media screen and (max-width: 768px){
  .enviroment .new-employee .Individual .content .card .txt {
    font-size: 3.73332cqw;
  }
}

.enviroment .other {
  width: 100%;
  padding: 5.35711cqw 6.4286cqw 0;
}

@media screen and (max-width: 768px){
  .enviroment .other {
    width: 85.33333333%;
    margin: 12cqw auto 0;
    padding: 0;
  }
}

.enviroment .other .text-block {
  display: flex;
  margin-bottom: 3.5714cqw;
}

@media screen and (max-width: 768px){
  .enviroment .other .text-block {
    display: grid;
    margin-bottom: 8cqw;
  }
}

.enviroment .other .text-block .engineer {
  width: 54.8cqw;
}

@media screen and (max-width: 768px){
  .enviroment .other .text-block .engineer {
    width: 100%;
    margin-bottom: 5.3334cqw;
  }
}

.enviroment .other .text-block .engineer p {
  font-family: var(--font-ship);
  font-size: 1.78571cqw;
  font-weight: 600;
  margin-bottom: 1.3393cqw;
}

@media screen and (max-width: 768px){
  .enviroment .other .text-block .engineer p {
    font-size: 4.8cqw;
    line-height: 1.8;
    margin-bottom: 3.73332cqw;
  }
}

.enviroment .other .text-block .engineer .job-list {
  display: flex;
  column-gap: 0.894cqw;
}

@media screen and (max-width: 768px){
  .enviroment .other .text-block .engineer .job-list {
    display: flex;
    column-gap: 2.1334cqw;
  }
}

.enviroment .other .text-block .engineer .job-list .item {
  font-family: var(--font-zen);
  font-size: 1.42857cqw;
  padding: 0.3571cqw 2.5cqw 0.4464cqw;
  font-weight: 700;
  color: #fff;
  background-color: #000;
  line-height: 1;
}

@media screen and (max-width: 768px){
  .enviroment .other .text-block .engineer .job-list .item {
    font-family: var(--font-zen);
    font-size: 3.73332cqw;
    padding: 1.0667cqw 4.2666cqw;
    font-weight: 700;
    color: #fff;
    background-color: #000;
    line-height: 1;
  }
}

.enviroment .other .text-block .txt {
  width: 97.145cqw;
  font-family: var(--font-zen);
  font-size: 1.42857cqw;
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-align: justify;
  word-break: break-all;
}

@media screen and (max-width: 768px){
  .enviroment .other .text-block .txt {
    width: 100%;
    font-size: 4.26666cqw;
  }
}

.enviroment .other .img-block {
  display: flex;
  justify-content: center;
  position: relative;
  column-gap: 4.01782cqw;
  padding-bottom: 4.01782cqw;
  margin-bottom: 3.125cqw;
}

@media screen and (max-width: 768px){
  .enviroment .other .img-block {
    display: grid;
    row-gap: 8cqw;
    justify-items: center;
    position: relative;
    padding-bottom: 13.3334cqw;
    margin-bottom: 13.3334cqw;
  }
}

.enviroment .other .img-block .image {
  width: 40.179cqw;
}

@media screen and (max-width: 768px){
  .enviroment .other .img-block .image {
    width: 85%;
  }
}

.enviroment .other .img-block::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  translate: -50% 0;
  bottom: 0;
  left: 50%;
}

.enviroment .other .text-block .abroad {
  display: flex;
  align-items: center;
  width: 54.8cqw;
  height: fit-content;
}

@media screen and (max-width: 768px){
  .enviroment .other .text-block .abroad {
    display: grid;
    align-items: unset;
    width: unset;
  }
}

.enviroment .other .text-block .abroad p {
  font-family: var(--font-ship);
  font-size: 1.78571cqw;
  font-weight: 600;
}

@media screen and (max-width: 768px){
  .enviroment .other .text-block .abroad p {
    font-family: var(--font-ship);
    font-size: 4.8cqw;
    font-weight: 600;
    margin-bottom: 3.73332cqw;
  }
}

.enviroment .other .text-block .abroad .job {
  height: fit-content;
  font-family: var(--font-zen);
  font-size: 1.42857cqw;
  font-weight: 700;
  padding: 0.3571cqw 2.5cqw 0.4464cqw;
  margin-left: 1cqw;
  color: #fff;
  background-color: #000;
  line-height: 1;
}

@media screen and (max-width: 768px){
  .enviroment .other .text-block .abroad .job {
    width: fit-content;
    height: unset;
    font-size: 3.73332cqw;
    padding: 1.0667cqw 4.2666cqw;
    margin-left: 0;
    margin-bottom: 5.3334cqw;

  }
}

.enviroment .other .surport {
  position: relative;
  width: 100%;
  background-size: 100%;
  background-image: linear-gradient(to right, transparent 1.53688524%, #fff 1.53688524%);
  background-position: right;
  background-repeat: no-repeat;
  padding: 4.01782cqw 4.01782cqw 4.01782cqw 5.35712cqw;
}

@media screen and (max-width: 768px){
  .enviroment .other .surport {
    position: relative;
    width: 100%;
    background: unset;
    background-color: #fff;
    padding: 6.4cqw;
  }
}

.enviroment .other .surport .ttl {
  font-family: var(--font-lora);
  font-size: 2.14286cqw;
  letter-spacing: 0.22em;
  rotate: -90deg;
  color: var(--blue);
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  left: -4.9cqw;
}

@media screen and (max-width: 768px){
  .enviroment .other .surport .ttl {
    font-size: 6.4cqw;
    top: 20.5cqw;
    left: -19cqw;
  }
}

.enviroment .other .surport .text-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media screen and (max-width: 768px){
  .enviroment .other .surport .text-wrap {
    display: grid;
  }
}

.enviroment .other .surport .text-wrap .text01 {
  width: 17.5cqw;
  font-family: var(--font-ship);
  font-size: 1.78571cqw;
  letter-spacing: 0.05em;
  font-weight: 600;
}

@media screen and (max-width: 768px){
  .enviroment .other .surport .text-wrap .text01 {
    width: 100%;
    font-size: 4.26666cqw;
    text-align: center;
    margin-bottom:  4cqw;
  }
}

.enviroment .other .surport .text-wrap .text02 {
  width: 56.25cqw;
  font-family: var(--font-zen);
  font-size: 1.42857cqw;
  letter-spacing: 0.05em;
  text-align: justify;
  word-break: break-all;
}

@media screen and (max-width: 768px){
  .enviroment .other .surport .text-wrap .text02 {
    width: 100%;
    font-size: 3.73332cqw;
  }
}

/* ↑↑↑ enviroment ↑↑↑ */

/* ↓↓↓ aboutUs ↓↓↓ */

#aboutUs {
  width: 100%;
  container-type: inline-size;
  background-color: #000F3F;
}

#aboutUs .inner {
  max-width: 1280px;
  padding: 100px 80px;
  margin: 0 auto;
  container-type: inline-size;
}

@media screen and (max-width: 1280px){
  #aboutUs .inner {
    padding: 7.8125cqw 6.25cqw;
  }
}

@media screen and (max-width: 768px){
  #aboutUs .inner {
    max-width: 768px;
    padding: 17.3333cqw 7.3332cqw;
  }
}

#aboutUs .ttl-wrap {
  margin-bottom: 4.4643cqw;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 768px){
  #aboutUs .ttl-wrap {
    margin-top: unset;
    margin-bottom: 12.461cqw;
  }
}

#aboutUs .ttl-wrap .ttl {
  font-family: var(--font-lora);
  font-size: 6.42857cqw;
  letter-spacing: 0.25em;
}

@media screen and (max-width: 768px){
  #aboutUs .ttl-wrap .ttl {
    font-size: 14.95326cqw;
  }
}

#aboutUs .ttl-wrap .sub-ttl {
  font-family: var(--font-ship);
  font-size: 1.60714cqw;
}

@media screen and (max-width: 768px){
  #aboutUs .ttl-wrap .sub-ttl {
    font-size: 5.60747cqw;
  }
}

#aboutUs .content {
  display: flex;
  flex-wrap: wrap;
  background: url(../img/top/aboutus_bg_pc.png) no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 768px){
  #aboutUs .content {
    background: url(../img/top/aboutus_bg_sp.png) no-repeat;
    background-size: 100%;
  }
}

#aboutUs .content .card {
  position: relative;
}



#aboutUs .content .card:nth-child(3n-2) {
  padding: 2.2321cqw 4.4643cqw 3.125cqw 3.125cqw;
}

#aboutUs .content .card:nth-child(3n-1) {
  padding: 2.2321cqw 4.4643cqw 3.125cqw 4.4643cqw;
}

#aboutUs .content .card:nth-child(3n) {
  padding: 2.2321cqw 3.125cqw 3.125cqw 4.4643cqw;
}

@media screen and (max-width: 768px){
  #aboutUs .content .card:nth-child(3n-2) {
    padding: 9.374cqw 1.5577cqw 10.9033cqw;
  }
  
  #aboutUs .content .card:nth-child(3n-1) {
    padding: 9.374cqw 1.5577cqw 10.9033cqw;
  }
  
  #aboutUs .content .card:nth-child(3n) {
    padding: 9.374cqw 1.5577cqw 10.9033cqw;
  }

}

#aboutUs .content .card img {
  width: 25.179cqw;
}

@media screen and (max-width: 768px){
  #aboutUs .content .card img {
    width: 46.73cqw;
  }
}

#aboutUs .content .card .data-block {
  width: 100%;
  position: absolute;
  translate: -50% 0;
  top: 5.35711cqw;
  left: 50%;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 768px){
  #aboutUs .content .card .data-block {
    top: 14.0186cqw;
  }
}

#aboutUs .content .card .data-block .text01 {
  font-family: var(--font-zen);
  font-size: 1.78571cqw;
  font-weight: 700;
}

@media screen and (max-width: 768px){
  #aboutUs .content .card .data-block .text01 {
    font-size: 4.37456cqw;
  }
}

#aboutUs .content .card .data-block .num {
  font-family: var(--font-ship);
  font-size: 6.25cqw;
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px){
  #aboutUs .content .card .data-block .num {
    font-size: 12.49877cqw;
    line-height: 1.3;
    &.-interval {
      padding-left: 3.1246cqw;
    }
  }
}

#aboutUs .content .card .data-block .num .unit {
  font-size: 2.5cqw;
}

@media screen and (max-width: 768px){
  #aboutUs .content .card .data-block .num .unit {
    font-size: 4.9995cqw;
  }
}

#aboutUs .content .card .data-block .text02 {
  font-family: var(--font-ship);
  font-size: 1.42857cqw;
}

@media screen and (max-width: 768px){
  #aboutUs .content .card .data-block .text02 {
    font-size: 3.73831cqw;
  }
}

/* ↑↑↑ aboutUs ↑↑↑ */

/* ↓↓↓ entry ↓↓↓ */
.entry {
  width: 100%;
  height: min(50vw, 640px);
  background: url(../img/top/entry-bg_pc.jpg) no-repeat center center;
  background-size: cover;
  container-type: inline-size;
}

@media screen and (max-width: 768px){
  .entry {
    aspect-ratio: 375 / 476;
    width: 100%;
    height: unset;
    background: url(../img/top/entry-bg_sp.jpg) no-repeat center center;
    background-size: cover;
    container-type: inline-size;
  }
}

.entry .inner {
  max-width: 1280px;
  padding: 65px 80px;
  margin: 0 auto;
  container-type: inline-size;
} 

@media screen and (max-width: 1280px){
  .entry .inner {
    padding: 5.0781cqw 6.25cqw;
  } 
}

@media screen and (max-width: 768px){
  .entry .inner{
    max-width: 768px;
    padding: 16cqw 7.2cqw 10.6666cqw;
  }
}

.entry .inner .image {
  display: block;
  width: 49.108cqw;
  margin: 0 auto 4.4643cqw;
  filter: drop-shadow(0 0 20px rgba(0, 104, 182, 0.6));
}

@media screen and (max-width: 768px){
  .entry .inner .image {
    display: block;
    width: 84.74cqw;
    margin: 0 auto 10.6666cqw;
  }
}

.entry .inner .entry-btn {
  position: relative;
  width: 100%;
  height: min(16.016vw, 205px);
  display: grid;
  justify-content: center;
  color: #fff;
  text-align: center;
  background: url(../img/top/entry-btnbg_pc.jpg) center center no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px){
  .entry .inner .entry-btn {
    position: relative;
    aspect-ratio: 320 / 177;
    width: 100%;
    height: unset;
    justify-content: start;
    background: url(../img/top/entry-btnbg_sp.jpg) center center no-repeat;
    background-size: cover;
    padding: 9.9687cqw 7.4767cqw;
  }
}

.entry .inner .entry-btn::after {
  content: '';
  position: absolute;
  width: 14.286cqw;
  height: 1px;
  background-color: #fff;
  top: 50%;
  right: 54px;
}

@media screen and (max-width: 768px){
  .entry .inner .entry-btn::after {
    width: 22.745cqw;
    top: 15.5762cqw;
    right: 0;
  }
}

.entry .inner .entry-btn .ttl {
  font-family: var(--font-lora);
  font-size: 6.428568cqw;
  line-height: 1;
  letter-spacing: 0.25em;
  margin: 4.4643cqw 0 0.89282cqw;
}

@media screen and (max-width: 768px){
  .entry .inner .entry-btn .ttl {
    height: fit-content;
    font-size: 12.46106cqw;
    margin: 0 0 3.1154cqw;
    text-align: justify;
    word-break: break-all;
  }
}

.entry .inner .entry-btn .copy {
  height: fit-content;
  font-family: var(--font-ship);
  font-size: 1.60714cqw;
  font-weight: 700;
  line-height: 1;
  background-color: #000;
  padding: 0 2.6786cqw;
  margin-bottom: 4.4643cqw;
}

@media screen and (max-width: 768px){
  .entry .inner .entry-btn .copy {
    width: fit-content;
    font-family: var(--font-ship);
    font-size: 4.36138cqw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: justify;
    word-break: break-all;
    background-color: #000;
    padding: 0 0.9345cqw 0.3114cqw;
    margin-bottom: 1.5576cqw;
  }

  .entry .inner .entry-btn .copy.-sp:last-child {
    margin-bottom: 0;
  }
}


/* ↑↑↑ entry ↑↑↑ */

/* ↓↓↓ footer ↓↓↓ */
.footer {
  width: 100%;
  height: 56px;
  background-color: #000;
  display: grid;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px){
  .footer {
    aspect-ratio: 375 / 66;
    height: unset;
    container-type: inline-size;
  }
}

.footer .copyright {
  font-family: var(--font-lora);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: #fff;
}

@media screen and (max-width: 768px){
  .footer .copyright {
    font-size: 3.1496cqw;
    text-align: center;
  }
}
/* ↑↑↑ footer ↑↑↑ */

.swiper2 {
  width: 100%;
  height: 500px;
  .swiper-slide {
    background-position: center;
    background-size: cover;
    background-color: #000;
    &.slide02 {
      background-color: #ff0000;
    }
    
    &.slide03 {
      background-color: #00ff00;
    }
    
    &.slide04 {
      background-color: #0000ff;
    }
  }
}



.tabbtn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}


@media (max-width: 1280px) {}

@media (max-width: 768px) {}

@media (max-width: 375px) {}