@charset "UTF-8";

.wrapper {
  padding-top: 80px;
  position: relative;
  margin: 0 auto;
}

/* ////////////
header
//////////// */

.header__wrapper {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 375px;
}
.header {
  width: 310px;
  position: fixed;
  top: 80px;
  left: 7.5%;
  z-index: 1;
}
.navi-wrap {
  padding-left: 20px;
}
.logo {
  width: 70%;
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
}
.logo::before {
  content: "";
  position: absolute;
  top: -115px;
  left: -30px;
  width: 15px;
  height: calc(100% + 115px);
  background-color: #E6141E;
}
.g-navi__list {
  display: block;
}
.g-navi__item {
  font-size: 2rem;
  margin-bottom: 70px;
  transition: transform 0.3s;
}
.g-navi__item a{
  color: #A3BABF;
}
@media (hover: hover) and (pointer: fine) {
  .g-navi__item:hover a{
    color: #131313;
  }
}
.g-navi__item a.current {
  color: #131313;
}
@media screen and (min-width: 1280px) {
  .header__wrapper {
    justify-content:flex-end;
  }
  .header {
    width: 310px;
    position: fixed;
    top: 80px;
    left: 140px;
  }
}
@media screen and (max-width: 767px) {
  .g-navi__item a.current {
    color: #A3BABF;
  }
}
.g-navi__item:first-child a{
  display: none;
}

@media screen and (max-width: 767px) {
  .wrapper {
    padding-top: 150px;
  }
  .header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #fff;
    padding-top: 34px;
    padding-left: 7.5%;
  }
  .header__wrapper {
    display: block;
    padding-bottom: 130px;
  }
  .logo {
    width: 156px;
    margin-bottom: 18px;
  }
  .logo::before {
    left: -35px;
  }
  /* ハンバーガーメニュー */
  #sp-hamburger {
    position: fixed;
    top: 10px;
    right: 7.5%;
    z-index: 200;
  }
  #sp-hamburger .icon {
    background-color: transparent;
    position: relative;
    height: 60px;
    width: 45px;
    z-index: 200;
  }
  #sp-hamburger .icon span {
    position: absolute;
    left: 15px;
    width: 30px;
    height: 2px;
    background-color: #E6141E;
    border-radius: 8px;
    transition: ease 0.75s;
  }
  #sp-hamburger .icon span:nth-of-type(1) {
    top: 18px;
  }
  #sp-hamburger .icon span:nth-of-type(2) {
    top: 30px;
  }
  #sp-hamburger .icon span:nth-of-type(3) {
    bottom: 16px;
  }
  #sp-hamburger .icon.open span:nth-of-type(1) {
    top: 28px;
    transform: rotate(45deg);
  }
  #sp-hamburger .icon.open span:nth-of-type(2) {
    opacity: 0;
  }
  #sp-hamburger .icon.open span:nth-of-type(3) {
    top: 28px;
    transform: rotate(-45deg);
  }
  .g-navi__list {
    display: none;
    padding-top: 60px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    z-index: 90;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .g-navi__item {
    margin-bottom: 40px;
  }
  .g-navi__item a {
    color: #fff;
    font-size: 1.8rem;
    text-decoration: none;
  }
  .g-navi__item:first-child a{
    display: block;
  }
}
@media screen and (max-width: 400px) {
  .logo::before {
    left: -30px;
  }
}


/* /////////////
下層ページ共通
/////////////// */
.main-container {
  width: 68.5%;
}

@media screen and (max-width: 1000px) {
  .main-container { width: 60%; }
}
@media screen and (max-width: 767px) {
  .main-container { width: 100%; }
}
@media screen and (min-width: 1440px) {
  .main-container { width: 78%; }
}


/* page-category */
.page-category {
  display: none;
}
@media screen and (max-width: 767px) {
  .page-category {
    font-size: 2.6rem;
    position: relative;
    display: inline-block; 
    margin-bottom: 40px;
  }
  .wrapper--works-archive .page-category {
    margin-bottom: 0px;
  }
  .page-category::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 110%;
    height: 1px;
    background: #000;
    right: 0;
    width: calc(100% + 100vw - 246%);

    transform: translateY(-50%);
  }
  .wrapper--competition .page-project::after {
    width: calc(100% + 100vw - 242%);
  }
  .wrapper--competition .page-category::after {
    width: calc(100% + 100vw - 228%);
  }
}

/* section-cintainer */
.section-container {
  padding: 140px 0 110px 46.5%;
  background-color: #E8EEEF;
}
.section-title {
  font-size: 3rem;
  /* position: relative; */
  display: flex;
  align-items: center;  
  /* padding-right: 35px; */
  margin-bottom: 80px;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #131313;
  margin-left: 25px;
}
.media .section-title::after {
  background: #fff;
}

@media screen and (max-width: 767px) {
  .section-container {
    padding: 88px 8% 80px ;
    background-color: #E8EEEF;
  }
  .profile__container {
    text-align: center;
  }
  .section-title {
    font-size: 2.6rem;
    margin-bottom: 50px;
    margin-left: 8%;
  }
  .section-container {
    padding: 88px 0 118px;
  }
}



/* ////////////////
404-page
/////////////////*/
.notfound-page {
  margin-top: 110px;
}
.notfound-image {
  margin: 0 0 65px 0;
}
.notfound__footer {
  background-color: #131313;
  transition: .3s;
}

@media (hover: hover) and (pointer: fine) {
  .notfound__footer:hover {
    background-color: #E6141E;
  }
}
.notfound__footer-link {
  display: block;
  padding: 15px 23px;
  text-align: end;
  color: #fff;
  font-size: 2rem;
  text-decoration: none;
  position: relative;
}
.link-allow {
  position: relative;

}
.link-allow::after {
  content: " ＞";
  margin-left: 0.25em;
}

@media screen and (max-width: 767px) {
  .notfound-page {
    margin-top: 50px;
  }
  .notfound-image {
    margin: 0 40px 35px 20px;
  }
  .notfound__footer-link {
    font-size: 1.8rem;
  }
}


/* /////////////
footer
/////////////// */

/* contact */
.contact__info-unit{
  padding-right: 50px;
}
.contact__text {
  font-size: 2rem;
  margin-bottom: 70px;
}
.contact__mail a,
.contact__tel a {
  text-decoration: underline;
  text-decoration-color: #131313;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  color: #131313;
  transition: color .3s, text-decoration-color .3s;
}

@media (hover: hover) and (pointer: fine) {
  .contact__mail a:hover,
  .contact__tel a:hover {
    color: #E6141E;
    text-decoration-color: #E6141E;
  }
}
.contact__office {
  font-size: 2.6rem;
  margin-bottom: 40px;
}
.contact__address-container {
  font-size: 1.6rem;
}
.contact__address {
  margin-bottom: 10px;
}
.contact__access {
  margin-bottom: 40px;
}
.contact__info {
  margin-bottom: 40px;
}
.info-space--tel {
  margin-left: 44px;
}
.info-space--fax {
  margin-left: 41px;

}
.info-space--mail {
  margin-left: 30px;
}
.contact__map {
  position: relative;
  width: 100%;
  max-width: 480px;
}
.contact__map iframe {
  width: 100%;
  aspect-ratio: 16/11;
}
.footer__copyright-wrap {
  background-color: #131313;
  padding: 40px 0;
  text-align: center;
}
.footer__copyright {
  font-size: 1.2rem;
}
iframe {
  filter: grayscale(50%);
}
.footer {
  position: relative;
}
.page-top--button {
  position: absolute;
  display: block;
  bottom: 130px;
  right: 7.5%;
  width: 83px;
}
.footer__copyright {
  color: #fff;
}


@media screen and (min-width: 1280px) {
  .page-top--button {
    right: 0;
    transform: translateX(420%);
    left: 50%;
  }
}
@media screen and (max-width: 767px) {
  .contact__info-unit {
    padding: 0 8%;
  }
  .contact__text {
    font-size: 1.8rem;
    margin-bottom: 50px;
  }
  .contact__office {
    font-size: 2.2rem;
    margin-bottom: 40px;
  }
  .contact__address-container {
    font-size: 1.2rem;
  }
  .contact__info {
    font-size: 1.6rem;
    margin-bottom: 40px;
  }
  .contact__map {}
  .footer {
    position: relative;
  }
  .page-top--button {
    position: absolute;
    display: block;
    bottom: 130px;
    right: 7.5%;
    width: 83px;
  }
  .footer__copyright {
    font-size: 1.2rem;
  }
}

/* ---Animate.css--- */
.invisible {
	visibility: hidden;
}
/* アニメーション */
.animate__animated.animate__delay-05s{
  animation-delay:0.5s;
}
.animate__duration-125s {
  animation-duration: 1.25s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animate__fadeIn {
  animation-name: fadeIn;
  animation-duration: 2s !important;
  animation-timing-function: ease-in-out;
}
@keyframes fadeInFast {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animate__fadeInFast {
  animation-name: fadeInFast;
  animation-duration: .7s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes fadeInUpShort {
  0% {
  opacity:0;
  transform:translate3d(0,20%,0)
  }
  to {
  opacity:1;
  transform:translateZ(0)
  }
}
.animate__fadeInUpShort {
  animation-name:fadeInUpShort;
  animation-duration: 0.5s;
}
@keyframes fadeInUpSlowShort {
  0% {
  opacity:0;
  -webkit-transform:translate3d(0,5%,0);
  transform:translate3d(0,5%,0)
  }
  to {
  opacity:1;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
  }
}
.animate__fadeInUpSlowShort {
  animation-name:fadeInUpSlowShort;
  animation-duration: 1.5s;

}
.animate__fadeIn {
  animation-name:fadeIn;
  animation-duration: 0.5s;
}
.invisible {
  visibility: hidden;
}
@keyframes fadeInUpSlowShort {
  0% {
  opacity:0;
  transform:translate3d(0,5%,0)
  }
  to {
  opacity:1;
  transform:translateZ(0)
  }
}