@charset "UTF-8";
html, body {
  height: 100%;
}
@media print, screen and (min-width: 768px) {
  html, body {
    min-width: 1260px;
  }
}

* {
  word-break: break-all;
}

main {
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.bg-video,
.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.bg-slide {
  opacity: 0;
  transition: opacity 2s ease;
  z-index: 2;
}
.bg-slide .swiper-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.bg-slide .img02 img {
  object-position: right;
}

/* ズームイン */
@keyframes ZoomIn {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.bg-slide.active {
  opacity: 1;
}
.bg-slide.active .swiper-slide-active img, .bg-slide.active .swiper-slide-duplicate-active img, .bg-slide.active .swiper-slide-prev img {
  animation: ZoomIn 5s linear 0s 1 normal both;
}

.hero-content {
  position: relative;
  z-index: 3;
  color: white;
  text-align: center;
  padding-top: 40vh;
}

.swiper {
  width: 100%;
}

.hero-inner {
  position: absolute;
  top: calc(50% - 122.5px);
  left: calc(50% - 85px);
  z-index: 10;
}
@media only screen and (max-width: 767px) {
  .hero-inner {
    top: calc(50% - 84px);
    left: calc(50% - 45px);
  }
}
.hero-inner .txt01 {
  writing-mode: vertical-rl;
  font-weight: 500;
  color: #fff;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin-bottom: 0;
}
@media print, screen and (min-width: 768px) {
  .hero-inner .txt01 {
    font-size: 38px;
    letter-spacing: 20px;
    text-indent: -60px;
    line-height: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .hero-inner .txt01 {
    font-size: 22px;
    letter-spacing: 6px;
    text-indent: -26px;
    line-height: 45px;
  }
}

.section-title {
  display: flex;
  gap: 14px;
  opacity: 0;
  transform: translateX(-20px);
  transition: 1s;
}
.section-title.scroll-in {
  opacity: 1;
  transform: translateX(0px);
}
.section-title h2 {
  font-size: 28px;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  color: #3A4454;
  line-height: 1;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .section-title h2 {
    font-size: 24px;
  }
}
.section-title span {
  font-family: "Noto Sans";
  position: relative;
  font-size: 16px;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  color: #3A4454;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .section-title span {
    font-size: 14px;
  }
}
.section-title span::after {
  content: "";
  width: 1px;
  height: 20px;
  background-color: #3A4454;
}

#intro {
  box-sizing: border-box;
  background: url("/img/intro_bg.png") no-repeat bottom/cover;
  width: 100%;
  color: #3A4454;
  padding-bottom: 150px;
}
@media print, screen and (min-width: 768px) {
  #intro {
    max-height: 60vw;
    min-height: 900px;
    aspect-ratio: 7/5;
    padding-top: 120px;
  }
}
@media only screen and (max-width: 767px) {
  #intro {
    padding-top: 60px;
    background: url("/img/intro_bg_sp.png") no-repeat bottom/cover;
  }
}
#intro .intro_inner {
  height: 100%;
}
@media print, screen and (min-width: 768px) {
  #intro .intro_inner {
    display: flex;
    align-items: center;
  }
}
#intro .intro_logo {
  width: 260px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 70px;
}
@media only screen and (max-width: 767px) {
  #intro .intro_logo {
    width: 150px;
    margin-bottom: 40px;
  }
}
#intro .txt01 {
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  font-weight: bold;
  line-height: 48px;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(-20px);
  transition: 1s;
}
@media only screen and (max-width: 767px) {
  #intro .txt01 {
    font-size: 22px;
  }
}
#intro .txt01.scroll-in {
  opacity: 1;
  transform: translateY(0px);
}
#intro .txt02 {
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.2em;
  line-height: 32px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(-20px);
  transition: 1s;
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  #intro .txt02 {
    letter-spacing: 0;
  }
}
#intro .txt02:nth-of-type(1) {
  transition-delay: 0.25s;
}
#intro .txt02:nth-of-type(2) {
  transition-delay: 0.75s;
}
#intro .txt02:nth-of-type(3) {
  transition-delay: 1.25s;
}
#intro .txt02:nth-of-type(4) {
  transition-delay: 1.75s;
}
#intro .txt02:nth-of-type(5) {
  transition-delay: 2.25s;
}
#intro .txt02:nth-of-type(6) {
  transition-delay: 2.75s;
}
#intro .txt02:nth-of-type(7) {
  transition-delay: 3.25s;
}
#intro .txt02:nth-of-type(8) {
  transition-delay: 3.75s;
}
#intro .txt02:nth-of-type(9) {
  transition-delay: 4.25s;
}
#intro .txt02:nth-of-type(10) {
  transition-delay: 4.75s;
}
#intro .scroll-in .txt02 {
  opacity: 1;
  transform: translateY(0px);
}

#works {
  background-color: #F9F9F6;
  padding-top: 38px;
  padding-bottom: 40px;
  color: #3A4454;
  /*  .section-title{
      display: flex;
      gap: 14px;
      opacity: 0;
      transform: translateX(-20px);
      transition: 1s;
      &.scroll-in{
        opacity: 1;
        transform: translateX(0px);
      }
  
      h2{
        font-size: 28px;
        letter-spacing: 0.2em;
        writing-mode: vertical-rl; 
        color: #3A4454;
        line-height: 1;
      }
      span{
        font-family: "Noto Sans";
        position: relative;
        font-size: 16px;
        letter-spacing: 0.2em;
        writing-mode: vertical-rl; 
        color: #3A4454;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        line-height: 1;
        &::after{
          content:"";
          width: 1px;
          height: 20px;
          background-color: #3A4454;
        }
      }
    }*/
}
@media only screen and (max-width: 767px) {
  #works {
    padding-top: 35px;
  }
}
#works .works-inner {
  display: flex;
  gap: 44px;
}
@media only screen and (max-width: 767px) {
  #works .works-inner {
    flex-direction: column;
    align-items: center;
  }
}
#works .work-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  #works .work-item-wrapper {
    gap: 40px;
  }
}
@media print, screen and (min-width: 768px) {
  #works .work-item-wrapper {
    width: 990px;
  }
}
#works .work-item-wrapper .work-item {
  position: relative;
  display: flex;
}
@media only screen and (max-width: 767px) {
  #works .work-item-wrapper .work-item {
    flex-wrap: wrap;
  }
}
@media print, screen and (min-width: 768px) {
  #works .work-item-wrapper .work-item {
    flex-direction: row-reverse;
    align-items: flex-start;
    margin-top: -40px;
    padding-top: 40px;
  }
}
#works .work-item-wrapper .work-item .item-img {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(20px);
  transition: 1s;
}
@media print, screen and (min-width: 768px) {
  #works .work-item-wrapper .work-item .item-img {
    margin-top: 45px;
    margin-left: -20px;
    width: 580px;
    height: 471px;
    z-index: 10;
  }
}
@media only screen and (max-width: 767px) {
  #works .work-item-wrapper .work-item .item-img {
    width: 100%;
  }
}
@media print, screen and (min-width: 768px) {
  #works .work-item-wrapper .work-item .item-img {
    transition-delay: 0.5s;
  }
}
#works .work-item-wrapper .work-item .item-img img {
  object-fit: cover;
  width: 100%;
}
#works .work-item-wrapper .work-item.scroll-in .item-img {
  opacity: 1;
  transform: translateX(0px);
}
#works .work-item-wrapper .work-item .item-content {
  box-sizing: border-box;
  background-color: #fff;
  padding: 40px 45px;
  width: 430.5px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-20px);
  transition: 1s;
}
@media only screen and (max-width: 767px) {
  #works .work-item-wrapper .work-item .item-content {
    width: 100%;
    padding: 30px 22px;
  }
}
#works .work-item-wrapper .work-item .item-content .item-title {
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  #works .work-item-wrapper .work-item .item-content .item-title {
    font-size: 16px;
  }
}
#works .work-item-wrapper .work-item .item-content .item-txt {
  font-family: "Noto Sans JP";
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 40px;
}
#works .work-item-wrapper .work-item .item-content .list-title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}
@media only screen and (max-width: 767px) {
  #works .work-item-wrapper .work-item .item-content .list-title {
    font-size: 14px;
  }
}
#works .work-item-wrapper .work-item .item-content .list-title::after {
  content: "";
  width: 175px;
  height: 1px;
  background-color: #3A4454;
}
@media only screen and (max-width: 767px) {
  #works .work-item-wrapper .work-item .item-content .list-title::after {
    width: 133px;
  }
}
#works .work-item-wrapper .work-item .item-content .list-item li {
  font-size: 14px;
  font-family: "Noto Sans JP";
}
#works .work-item-wrapper .work-item.scroll-in .item-content {
  opacity: 1;
  transform: translateY(0px);
}

#result {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #EEEDEC;
  color: #3A4454;
}
@media only screen and (max-width: 767px) {
  #result {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
#result .result-inner {
  display: flex;
  gap: 44px;
}
@media only screen and (max-width: 767px) {
  #result .result-inner {
    flex-direction: column;
    align-items: center;
  }
}
#result .result-item-wrapper {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  #result .result-item-wrapper {
    width: 100%;
    gap: 30px;
  }
}
@media print, screen and (min-width: 768px) {
  #result .result-item-wrapper {
    gap: 35px 68px;
    width: 990px;
  }
}
#result .result-item-wrapper .result-unit {
  display: flex;
  gap: 25px;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  #result .result-item-wrapper .result-unit {
    width: 100%;
  }
}
#result .result-item-wrapper .result-unit .unit-img {
  width: 136px;
  height: 102px;
  flex-shrink: 0;
}
#result .result-item-wrapper .result-unit .unit-content {
  width: 300px;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  gap: 10px;
}
@media only screen and (max-width: 767px) {
  #result .result-item-wrapper .result-unit .unit-content {
    width: auto;
    margin-top: 10px;
    gap: 8px;
  }
}
#result .result-item-wrapper .result-unit .unit-content .unit-year {
  font-size: 16px;
  font-family: "Noto Sans JP";
  line-height: 1;
}
#result .result-item-wrapper .result-unit .unit-content .unit-title {
  font-size: 16px;
  font-family: "Noto Sans JP";
  font-weight: bold;
}

#company {
  color: #3A4454;
  background-color: #F9F9F6;
  padding-top: 80px;
  padding-bottom: 120px;
}
@media only screen and (max-width: 767px) {
  #company {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media print, screen and (min-width: 768px) {
  #company .company-item-wrapper {
    width: 990px;
  }
}
#company .company-inner {
  display: flex;
  gap: 44px;
}
@media only screen and (max-width: 767px) {
  #company .company-inner {
    flex-direction: column;
    align-items: center;
  }
}
#company .message-container {
  display: flex;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  #company .message-container {
    flex-direction: row-reverse;
    padding-top: 70px;
    margin-top: -70px;
  }
}
@media only screen and (max-width: 767px) {
  #company .message-container {
    flex-direction: column;
    gap: 45px;
  }
}
#company .message-container .message-box {
  flex-shrink: 0;
  background-color: #fff;
  box-sizing: border-box;
}
@media print, screen and (min-width: 768px) {
  #company .message-container .message-box {
    margin-top: 45px;
    margin-left: -45px;
    padding: 40px 45px 40px 80px;
    width: 693px;
  }
}
@media only screen and (max-width: 767px) {
  #company .message-container .message-box {
    padding: 40px 15px;
    width: 100%;
  }
}
#company .message-container .message-box .message-title {
  display: inline-block;
  font-size: 21px;
  font-weight: bold;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
#company .message-container .message-box .message-txt {
  display: inline-block;
  font-size: 16px;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 768px) {
  #company .message-container .message-box .message-img {
    width: 342px;
    height: 448px;
    position: absolute;
    left: 0;
    top: 70px;
  }
}
@media only screen and (max-width: 767px) {
  #company .message-container .message-box .message-img {
    width: calc(100% - 30px);
    margin: 0px auto 50px;
  }
}
#company .message-container .message-box .img-note {
  margin-top: 20px;
}
@media print, screen and (min-width: 768px) {
  #company .message-container .message-box .img-note {
    position: absolute;
    left: 0;
    top: 520px;
  }
}
@media only screen and (max-width: 767px) {
  #company .message-container .message-box .img-note {
    text-align: right;
  }
}
#company .message-container .message-box .img-note .txt01 {
  display: block;
  font-size: 16px;
  font-weight: bold;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  letter-spacing: 0.2em;
}
#company .message-container .message-box .img-note .txt02 {
  display: inline-block;
  margin-top: 10px;
  font-size: 21px;
  font-weight: bold;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  letter-spacing: 0.2em;
}
#company .company-container {
  margin-top: 40px;
}
@media print, screen and (min-width: 768px) {
  #company .company-container {
    padding-top: 70px;
  }
}
@media only screen and (max-width: 767px) {
  #company .company-container {
    margin-top: 60px;
  }
}
#company .company-box {
  padding: 40px 80px 40px 45px;
  background-color: #fff;
}
@media only screen and (max-width: 767px) {
  #company .company-box {
    padding: 40px 15px;
  }
}
#company .company-box .company-title {
  display: inline-block;
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 60px;
  letter-spacing: 0.2em;
}
#company .company-box .deta-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
#company .company-box .deta-list dl {
  display: flex;
  gap: 13px;
  padding-bottom: 25px;
  border-bottom: 1px solid #EEEDEC;
}
@media only screen and (max-width: 767px) {
  #company .company-box .deta-list dl {
    flex-direction: column;
  }
}
#company .company-box .deta-list dl dt {
  width: 148px;
  font-size: 16px;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  #company .company-box .deta-list dl dt {
    width: 100%;
  }
}
#company .company-box .deta-list dl dd {
  width: auto;
  font-size: 16px;
  letter-spacing: 0.1em;
}

#contact {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #3A4454;
  color: #fff;
  text-align: center;
}
#contact .txt01 {
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-bottom: 25px;
}
#contact .txt02 {
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  #contact .txt02 {
    letter-spacing: 0.15em;
  }
}
#contact .txt03 {
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-top: 5px;
  margin-bottom: 25px;
}
@media only screen and (max-width: 767px) {
  #contact .txt03 {
    letter-spacing: 0.15em;
  }
}
#contact .txt04 {
  font-size: 16px;
  letter-spacing: 0.2em;
}
@media only screen and (max-width: 767px) {
  #contact .txt04 {
    font-size: 14px;
    letter-spacing: 0.1em;
  }
}
#contact .contact-tel {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
  justify-content: center;
}
#contact .contact-tel span {
  font-size: 38px;
  letter-spacing: 0.2em;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  #contact .contact-tel span {
    font-size: 32px;
    letter-spacing: 0.15em;
  }
}
#contact .contact-tel img {
  width: 25px;
  gap: 20px;
  filter: invert(96%) sepia(8%) saturate(404%) hue-rotate(356deg) brightness(110%) contrast(95%);
}

/*# sourceMappingURL=page_top.css.map */