@charset "UTF-8";
body {
  font-family: "Hind", sans-serif;
  background-color: #f3f2ef;
  color: #1d1d1f;
  min-height: 100vh;
  max-width: 100％;
}

#navbar {
  z-index: 1;
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

.sticky {
  position: fixed; /* Make it stick/fixed */
}

.header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}

.header__logo {
  display: inline-block;
  margin: 16px 0 0 40px;
  font-size: 32px;
  letter-spacing: 0.24rem;
  font-weight: 100;
  white-space: nowrap;
}

.header__logo span {
  margin-left: 8px;
  font-size: 16px;
  letter-spacing: 0.24rem;
}

.header__logo:link,
.header__logo:visited,
.header__logo:hover,
.top_contact h2 a:link,
.top_contact h2 a:visited,
.instagram__link a:link,
.instagram__link a:visited,
.contact p a:link,
.contact p a:visited,
.nav__link:link,
.nav__link:visited {
  color: #1d1d1f;
  text-decoration: none;
  transition: 0.3s;
}

.nav__link:hover,
.top_contact h2 a:hover,
.instagram__link a:hover,
.contact p a:hover {
  color: #9aa4a7;
}

.breadcrumbs a:link,
.breadcrumbs a:visited {
  padding-right: 16px;
  display: inline-block;
  letter-spacing: 0.11rem;
  color: #9aa4a7;
  text-decoration: none;
  transition: 0.3s;
}

.breadcrumbs a:hover {
  color: #1d1d1f;
}

.breadcrumbs a.current {
  color: #a34d55;
}

.breadcrumbs {
  z-index: 8;
  margin: 16px 0 0 40px;
  padding-top: 16px;
}

.gl_nav_item {
  color: #1d1d1f;
  position: relative;
  text-decoration: none;
}

.gl_nav_item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: #18272F;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.gl_nav_item:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.btn:link,
.btn:hover,
.btn:visited {
  border: 1px solid #dde0e1;
  padding: 8px 24px;
  color: #1d1d1f;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.11rem;
  background-color: #fdfdfd;
  box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgba(0, 0, 0, 0.16);
  transition: 0.3s;
}

.btn:hover {
  border: 1px solid #9aa4a7;
  box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgba(0, 0, 0, 0.24);
}

.black-btn:link,
.black-btn:hover,
.black-btn:visited {
  background-color: #1d1d1f;
  border: 1px solid #dde0e1;
  text-decoration: none;
  padding: 8px 24px;
  display: inline-block;
  letter-spacing: 0.11rem;
  color: #fdfdfd;
  transition: 0.3s;
}

.black-btn:hover {
  border: 1px solid #1d1d1f;
  box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgba(0, 0, 0, 0.24);
}

input.btn {
  background-color: #1d1d1f;
  border: 1px solid #dde0e1;
  text-decoration: none;
  padding: 8px 24px;
  display: inline-block;
  letter-spacing: 0.11rem;
  color: #fdfdfd;
  transition: 0.3s;
}

input.btn:hover {
  border: 1px solid #1d1d1f;
  box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgba(0, 0, 0, 0.24);
}

input.back {
  background-color: #9aa4a7;
  border: 1px solid #dde0e1;
  text-decoration: none;
  padding: 8px 24px;
  display: inline-block;
  letter-spacing: 0.11rem;
  color: #fdfdfd;
  transition: 0.3s;
}

input.back:hover {
  border: 1px solid #1d1d1f;
  box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgba(0, 0, 0, 0.24);
}

.nav ul {
  font-size: 24px;
  padding-right: 40px;
  text-align: right;
  white-space: nowrap;
}

.nav__item {
  padding: 0 0.5rem;
  display: inline-block;
  letter-spacing: 0.18rem;
}

.nav__link img {
  width: 24px;
  margin-bottom: -2px;
}

img.icon__item {
  width: 32px;
  display: inline-block;
  padding-right: 8px;
  margin-bottom: -4px;
}

/* section */
.main {
  padding-bottom: 24px;
  min-height: 100vh;
}

.container {
  width: 980px;
  margin: 0 auto;
}

.about,
.contact {
  padding-top: 24px;
  max-width: 680px;
  margin: 0 auto;
}

.portfolio {
  padding-top: 40px;
}

.footer {
  padding: 16px 0;
  text-align: center;
  font-size: 12px;
}

.title {
  text-align: center;
  background-color: #dde0e1;
  padding: 88px 40px 40px 40px;
}

.title h1 {
  letter-spacing: 0.24rem;
  font-size: 48px;
  font-weight: 100;
}

.title h1 span {
  font-size: 16px;
  display: block;
  letter-spacing: 0.11rem;
}

.top h1,
.about h1 {
  margin-bottom: 24px;
  font-size: 40px;
  letter-spacing: 0.24rem;
  font-weight: 100;
}

.top h2,
.about h2,
.contact_title {
  font-family: "Noto Serif JP", serif;
  margin: 8px 0 8px 0px;
  font-size: 32px;
  letter-spacing: 0.16rem;
  font-weight: 100;
  margin-bottom: 21px;
}

.top h2 span,
.about h2 span {
  font-size: 21px;
}

.main p {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  margin-top: 8px;
  line-height: 1.8;
  letter-spacing: 0.11rem;
  margin-bottom: 40px;
}

.top_about_title h2,
.top_contact h2,
.instagram__link {
  font-family: "Hind", sans-serif;
  margin: 8px 0 8px 0px;
  font-size: 24px;
  letter-spacing: 0.11em;
  font-weight: 100;
  margin-bottom: 8px;
}

.top_about_title h1,
.top_contact h2 {
  margin-bottom: 8px;
}

.top_about h3,
.about h3,
.card__item h3,
figcaption {
  letter-spacing: 0.11rem;
  font-weight: 100;
}

.top_about {
  padding-top: 24px;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
}

.top_about .top_about_title .top_about .top_about_text {
  padding: 16px;
}

.top_portfolio {
  padding-top: 64px;
  text-align: center;
}

.top_portfolio h1 span {
  font-size: 16px;
  letter-spacing: 0.11rem;
  display: block;
}

.top_portfolio h1 {
  padding-bottom: 40px;
}

.top_contact {
  padding-top: 64px;
  text-align: center;
}

.about__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.about__works ul {
  padding-left: 24px;
  font-family: "Noto Serif JP", serif;
}

.about__works ul li {
  line-height: 1.8;
  letter-spacing: 0.16rem;
}

.categories {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.cards__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding-left: 40px;
  padding-right: 40px;
}

.card__item img {
  width: 100%;
  box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgba(0, 0, 0, 0.16);
  transition: 0.4s;
}

.card__item:hover img {
  box-shadow: 0px 14px 30px 0px rgba(0, 0, 0, 0.1), 0px 55px 55px 0px rgba(0, 0, 0, 0.09), 0px 124px 75px 0px rgba(0, 0, 0, 0.05), 0px 221px 89px 0px rgba(0, 0, 0, 0.01), 0px 346px 97px 0px rgba(0, 0, 0, 0);
}

.pics__container figure {
  max-width: 580px;
  margin: 0 auto 16px auto;
  color: #9aa4a7;
}

figcaption {
  text-align: right;
  padding: 8px 0 8px 0;
}

.thumbs__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding-left: 40px;
  padding-right: 40px;
}

.thumbs__container img {
  width: 100%;
}

.open_btn {
  display: none;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #fdfdfd;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  text-align: center;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 40px;
  letter-spacing: 0.18rem;
  color: #1d1d1f;
  display: block;
  transition: 0.3s;
}

.sub__dir a {
  color: #9aa4a7;
  letter-spacing: 0.11rem;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 16px;
  margin-left: 50px;
}

/* Slideshow container */
.slideshow-container {
  width: 100%;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* The dots/bullets/indicators */
.dot {
  height: 8px;
  width: 8px;
  margin: 24px 2px;
  background-color: #9aa4a7;
  border-radius: 50%;
  display: inline-block;
}

/* Fading animation */
.fade-in-text {
  opacity: 0;
  animation: fadeIn1s 1s linear;
  animation-fill-mode: both;
}

/* ---------------------------- */
/* --- Animation --- */
/* ---------------------------- */
@keyframes fadeIn1s {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.portfolio,
.about,
.top,
.contact {
  opacity: 0;
  animation: fadeIn 2s linear;
  animation-fill-mode: both;
}

/* ---------------------------- */
/* --- Animation --- */
/* ---------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade {
  animation-name: fade;
  animation-duration: 1600ms;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  transition-duration: 2400ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 40px);
}

.fade-in-up8 {
  transform: translate(0, 24px);
}

.fade-in-up16 {
  transform: translate(0, 64px);
}

.fade-in-up32 {
  transform: translate(0, 88px);
}

.fade-in-down {
  transform: translate(0, -60px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

.sp {
  display: none;
}

.error {
  color: #a34d55;
}

.contact_container {
  background-color: #fdfdfd;
  padding: 40px;
}

input[type=text],
input[type=email],
select,
textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid #9aa4a7;
  resize: vertical;
  font-family: "Noto Serif JP", serif;
}

label,
.col-75 p {
  letter-spacing: 0.11rem;
  display: inline-block;
  font-family: "Noto Serif JP", serif;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 16px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 16px;
}

.col-75 p {
  margin-top: 0;
}

.center {
  text-align: center;
  margin-top: 24px;
}

.col-50 {
  float: left;
  width: 50%;
  margin-top: 16px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  .row {
    padding: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .header {
    display: block;
  }
  .pc {
    display: none;
  }
  .sp {
    display: inline;
  }
  .header__logo {
    margin: 8px 0 0 16px;
  }
  nav ul {
    display: none;
  }
  .nav__link img {
    display: inline-block;
    width: 40px;
  }
  .top_btn_container {
    text-align: center;
  }
  .open_btn {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 40px;
    display: inline;
  }
  .sub__link {
    font-size: 16px;
  }
  .sub__dir a {
    display: inline-block;
  }
  .about {
    padding: 16px;
  }
  .about__container,
  .top_contact,
  .contact,
  .top_about {
    padding: 16px;
    display: block;
    margin: 0 auto;
  }
  .top_contact {
    padding-top: 80px;
  }
  .thumbs__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0;
  }
  .cards__container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding-left: 0px;
    padding-right: 0px;
  }
}/*# sourceMappingURL=style.css.map */