@charset "UTF-8";

img {
  display: block;
  width: 100%;
}

/*--------------------------------------------------------------------------
 header
--------------------------------------------------------------------------*/

.scroll.site-header {
  background-color: rgba(255, 255, 255, 1);
}

.logo a svg {
  fill: #1a1a1a;
}

.scroll .logo a svg {
  fill: #1a1a1a;
}

#global-nav li a,
.nav-wrap-1,
.header-contact-sp>a>span,
.toggle-text::after {
  color: #000;
}

#nav-toggle span {
  background: #000;
}

.header-contact-sp>a>svg {
  fill: #000;
}

.scroll .header-contact-sp>a>svg {
  fill: #fff;
}

.scroll .header-contact-sp>a>span {
  color: #fff;
}

/*--------------------------------------------------------------------------
 main
--------------------------------------------------------------------------*/
h1 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 1rem;
  text-align: right;
  position: absolute;
  top: 52vh;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
}

/*--------------------------------------------------------------------------
	メイン画像
--------------------------------------------------------------------------*/
#main-img {
  width: 100%;
  height: calc(40vh + 60px);
  margin-top: 60px;
  position: relative;
}

.main-img {
  width: 95%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fafafa;
}

.main-title {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main-title>p {
  color: #2c3e50;
  font-size: 3.4rem;
  letter-spacing: 0.05em;
  font-style: italic;
  font-family: 'Josefin Sans', sans-serif;
  text-align: center;
  line-height: 1.2;
}

.main-title>h2 {
  font-size: 1.2rem;
  font-weight: normal;
}


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

@media all and (max-width: 1100px) {}

@media all and (max-width: 1024px) {}

@media all and (max-width: 786px) {

  h1 {
    margin-left: auto;
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 680px) {
  html {
    font-size: calc(100vw/68);
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
  }

  .footer-address,
  .footer-nav {
    width: 100%;
  }

  .footer-nav {
    margin-top: 0;
  }

  .footer-nav ul {
    display: none;
    justify-content: initial;
  }

  .footer-nav-box {
    margin-left: initial;
    margin: 15px auto 0 auto;
    width: 80%;
  }
}

@media screen and (max-width: 480px) {
  html {
    font-size: 62.5%;
  }

  #main-img {
    width: 100%;
    height: calc(30vh + 60px);
  }

  .main-title>p {
    font-size: 2.8rem;
    font-weight: bold;
    font-style: italic;
  }
}