@charset "utf-8";
/*
Theme Name: kihon
*/
body {
  opacity: 0;
  visibility: hidden;
}
body.fo {
  opacity: 1;
  visibility: visible;
  animation: bodyAnime 0.8s linear forwards;
}
@keyframes bodyAnime {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

#sp-header {
  display: none;
}
.sp-nav {
  display: none;
}
html {
  letter-spacing: 0.1em;
  font-size: 62.5%;
  background-color: #fafbf2;
  font-family: YakuHanJP, "Noto Sans JP", Meiryo, sans-serif;
  overflow-y: scroll;
}
.bg-color {
  position: fixed;
  background-color: #feffef;
}
.bg {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
}
.bg img {
  width: 100%;
  height: 100%;
}
.bg-color {
  opacity: 0.2;
  width: 100vw;
  height: 100vh;

  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: #f7fae1;
}
.fixed-nav {
  position: fixed;
  right: 0;
  width: 20rem;
  height: 100%;
  /* border-left: 0.1rem dashed rgba(117, 77, 8, 0.3); */
  z-index: 1;
}
.border {
  width: 0.2rem;
  height: 100%;
  position: fixed;
  right: 20rem;
  z-index: 9999;
}

.border::before {
  content: "";
  background-image: linear-gradient(
    to bottom,
    #e5d5ba,
    #e5d5ba 4px,
    transparent 4px,
    transparent 12px
  );
  background-size: 4px 12px;
  background-repeat: repeat-y;
  background-position: left bottom;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.logo {
  width: 100%;
  height: 20%;
  position: relative;
  transition: 0.4s;
}

.logo #logo_off {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.4s;
}
.logo #logo_on {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.4s;
}
.logo:hover #logo_on {
  opacity: 0;
  visibility: hidden;
}
.logo:hover #logo_off {
  opacity: 1;
  visibility: visible;
}
.nav-wrapper {
  width: 100%;
  height: 100%;
  height: calc(100vh - 20%);
  position: relative;
}
.nav-txt {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 2rem;
  text-align: center;
  padding: 6.4rem 10% 0;
}
#works-nav {
  margin: auto auto auto; /* サンプル用 中央寄せ  */
  width: 60%; /* BOXの幅              */
  fill: #754d08;
  transition: 0.3s;
}
#works-nav:hover {
  opacity: 0.8;
}
#private-nav {
  transition: 0.3s;
  fill: #754d08;
  margin: 2.4rem auto auto;
  width: 60%;
}

#private-nav:hover {
  opacity: 0.8;
}

.nav-sns {
  position: absolute;
  bottom: 10%;
  display: block;
  width: 100%;
  padding: 0 20% 10%;
  text-align: center;
}

.nav-sns #twi-logo {
  width: 5.4rem;
  height: 5.4rem;
  margin: 0 auto;
  display: block;
  text-align: center;
  margin-bottom: 2rem;
}

.svg-wrapper {
  width: 5.4rem;
  margin: auto;
  height: 5.4rem;
}
.nav-sns #twi-logo {
  width: 100%;
  height: 100%;

  transition: 0.4s;
}
.nav-sns #twi-logo #logo {
  width: 100%;
  height: 100%;

  transition: 0.4s;
}
.nav-sns #twi-logo {
  transition: 0.4s;
}
.nav-sns #twi-logo:hover {
  opacity: 0.8;
}

.nav-sns #insta-logo {
  width: 5.4rem;
  height: 5.4rem;
  margin: auto;
}
.nav-sns #insta-logo #logo {
  width: 100%;
  height: 100%;

  transition: 0.4s;
}
.nav-sns #insta-logo {
  transition: 0.4s;
}
.nav-sns #insta-logo:hover {
  opacity: 0.8;
}

#footer-top {
  text-align: center;
  letter-spacing: 1px;
  padding: 0 1rem 0 1rem;
}
#footer-under {
  text-align: center;
  padding: 2rem 0 2rem;

  letter-spacing: 1px;
}
.footer-txt {
  width: calc(100% - 20rem);
}
.footer_color {
  background-color: transparent;
  margin-top: 5.6rem;
}
@media screen and (max-width: 1040px) {
  .nav-sns #twi-logo {
    width: 5.6rem;
    height: 5.6rem;
  }
  .border {
    right: 16rem;
  }
  .nav-sns #insta-logo {
    width: 5.6rem;
    height: 5.6rem;
  }
  .nav-sns {
    bottom: 10%;
  }
  .fixed-nav {
    width: 16rem;
  }
  .nav-txt {
    font-size: 1.6rem;
    /* padding: 4.8rem 12% 0; */
    font-weight: bold;
  }
  #works-nav {
    width: 100%;
  }
  #private-nav {
    width: 100%;
  }
  .footer-txt {
    width: calc(100% - 16rem);
  }
}

@media screen and (max-width: 800px) {
  .border {
    display: none;
  }
  footer {
    width: 100%;
  }
  .footer-txt {
    width: 100%;
  }
  #sp-header {
    position: fixed;
    width: 100vw;
    height: 10.4rem;
    padding: 2.4rem 2.4rem 0;
    display: flex;
    justify-content: space-between;
    z-index: 5;
  }
  #sp-header .logo {
    width: 6.4rem;
    height: 6.4rem;
  }
  #sp-header .logo img {
    width: 100%;
    height: 100%;
  }
  #sp-header .ham {
    padding: 2px;
    width: 4.4rem;
    height: 4rem;
    cursor: pointer;
  }

  #sp-header .ham span {
    transition: 0.4s;
    width: 4rem;
    height: 0.2rem;
    background-color: #744c08;
    display: block;
  }
  #sp-header .ham span:nth-of-type(1) {
    transform: translateY(1rem);
  }
  #sp-header .ham span:nth-of-type(2) {
    transform: translateY(2.4rem);
  }
  #sp-header .ham span.show:nth-of-type(1) {
    transform: translateY(1.6rem);
  }
  #sp-header .ham span.show:nth-of-type(2) {
    transform: translateY(1.4rem);
  }
  #sp-header .ham span.show {
    background-color: #fff;
  }
  .sp-nav {
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #744c08;
    z-index: 4;
    transition: 0.4s;
    padding: 20rem 8rem 8rem;
    opacity: 0;
    visibility: hidden;
  }

  #sp-header .logo {
    position: relative;
  }
  #sp-header .logo #sp-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: 0.4s;
  }
  #sp-header .logo #sp-logo.color {
    opacity: 0;
    visibility: hidden;
  }
  #sp-header .logo #sp-logo-white {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
  }
  #sp-header .logo #sp-logo-white.white {
    opacity: 1;
    visibility: visible;
  }
  /* #sp-logo-white {
    opacity: 0;
    visibility: hidden;
  } */
  .sp-nav.nav-open {
    opacity: 1;
    visibility: visible;
  }
  .sp-nav .g-nav {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .sp-nav .txt {
    width: 100%;
    margin: auto;
  }
  .sp-nav .txt p {
    position: relative;
    display: block;
    width: 100%;
  }
  .sp-nav .txt p:hover {
    opacity: 0.8;
  }
  .sp-nav .sns {
    display: block;
    z-index: 4;
    margin: auto;
    margin-top: 6rem;

    display: flex;
  }
  .sp-nav .twi {
    width: 5.4rem;
    height: 5.4rem;
  }

  .sp-nav .sns .twi a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .sp-nav .insta {
    width: 5.4rem;
    height: 5.4rem;
  }
  .sp-nav .sns .insta a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .sp-nav .sns svg:hover {
    opacity: 0.8;
  }
  .sp-nav .sns .insta {
    margin-left: 2rem;
  }
  .sp-nav .txt p {
    font-weight: bold;
    font-size: 5.6rem;
    line-height: 2;
    color: #fff;
  }
  .fixed-nav {
    display: none;
  }
}
@media screen and (max-width: 520px) {
  .fixed-nav {
    display: none;
  }
  .sp-nav .txt p {
    font-size: 4rem;
    line-height: 2.5;
  }

  .sp-nav {
    padding: 16rem 4rem 4rem;
  }
}