@charset "UTF-8";

/*----------------------------------------フォント----------------------------------------*/
body {
  /******ゴシック******/
  font-family: "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN W3",
    "Arial", "Yu Gothic", "Meiryo", sans-serif;
  /* font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; */
  /******明朝体******/
  /* font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN W3", "Yu Mincho", "MS PMincho", serif; */
  /* font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; */
  color: var(--font-color);
  background-color: #ec81a9;
  font-size: 1.8rem;
}

h1 {
  font-size: 3.6rem;
}

h2 {
  font-size: 2.8rem;
}

h3 {
  font-size: 2.4rem;
}

h4 {
  font-size: 2rem;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  h1 {
    font-size: 3.2rem;
  }

  h2 {
    font-size: 2.4rem;
  }

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.8rem;
  }

  h4 {
    font-size: 1.6rem;
  }
}

/*----------------------------------------共通----------------------------------------*/
.container {
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
}

.inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

section {
  padding: 5em 3%;
}

@media screen and (max-width: 768px) {
  section {
    padding: 5em 5%;
  }
}

/*----------------------------------------header----------------------------------------*/
header {}

.hamburger {
  position: fixed;
  top: 1em;
  right: 1em;
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  transition: all .5s;
  box-sizing: border-box;
  cursor: pointer;
  background: #ec81a9;
  z-index: 10;
}

.hamburger span {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}

.hamburger span:nth-of-type(1) {
  top: 9px;
}

.hamburger span:nth-of-type(2) {
  top: 21px;
}

.hamburger span:nth-of-type(3) {
  top: 32px;
}

.hamburger.active span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-45deg);
  transform: translateY(12px) rotate(-45deg);
}

.hamburger.active span:nth-of-type(2) {
  opacity: 0;
}

.hamburger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
}

.nav {
  position: fixed;
  top: 0;
  --nav-w: 15em;
  right: calc(-1 * var(--nav-w));
  width: var(--nav-w);
  height: 100%;
  padding: 2em;
  background: #ec81a9;
  transition: ease-in 0.2s;
  z-index: 5;
}

.nav.active {
  right: 0;
}

.nav ul {
  list-style: none;
}

.nav a {
  color: #fff;
}

.nav_back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: ease-in 0.2s;
}

.nav_back.active {
  opacity: 0.5;
  pointer-events: all;
  z-index: 1;
}


@media screen and (max-width: 768px) {
  .hamburger {
    top: 0.5em;
    right: 0.5em;
    width: 2.5em;
    height: 2.5em;
  }

  .hamburger span:nth-of-type(1) {
    top: 9px;
  }

  .hamburger span:nth-of-type(2) {
    top: 19px;
  }

  .hamburger span:nth-of-type(3) {
    top: 29px;
  }

  .hamburger.active span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(-45deg);
    transform: translateY(10px) rotate(-45deg);
  }

  .hamburger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-10px) rotate(45deg);
  }
}

/*----------------------------------------teaser----------------------------------------*/
#teaser {
  padding: 0;
}

#teaser picture {
  width: 100%;
}

#teaser img {
  width: 100%;
}

#teaser .color {
  background: #43acea;
}

#teaser .inner {
  padding: 5em 7%;
  font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
  text-align: center;
}

#teaser .inner h2 {
  font-weight: 600;
  color: #fff200;
  margin: 0 auto 1em;
}

#teaser .inner form {
  text-align: center;
}

#teaser .inner form input {
  display: block;
  color: #fff;
  margin: 0 auto;
  box-shadow: inherit;
  background: inherit;
  border: inherit;
  font-size: inherit;
  padding: inherit;
}

#teaser .inner form button {
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 0;
  border: 0px;
  background: none;
  text-shadow: none;
  margin: 2em auto 0;
}

.disabled {
  filter: grayscale(1);
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  #teaser .inner h2 {
    font-size: 1.8rem;
  }
}

#thanks {
  font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
  padding: 2em;
  background: #fff;
  border: 5px solid #43acea;
  border-radius: 1em;
}

/*----------------------------------------footer----------------------------------------*/
footer {
  padding: 0 0 5em;
  text-align: center;
  background: #F6DCE6;
}

footer .bar {
  color: #fff;
  font-weight: 600;
  font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
  padding: 1em;
  background: #ED80A9;
}


footer ul {
  list-style: none;
  max-width: 30em;
  margin: 2em auto;
  text-align: left;
}

footer ul li {
  text-indent: -0.5em;
  padding: 0 0 0 1.5em;
}

footer .contact {}

footer .contact h2 {
  width: 300px;
  font-size: 2.4rem;
  font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
  padding: 0.5em 2em;
  margin: 0 auto;
  color: #fff;
  background: #ED80A9;
  text-align: center;
  border-radius: 2em;
}

footer .contact .title {
  font-size: 2em;
  font-weight: bold;
  margin: 0.5em auto;
}

footer .flex {
  margin: 0 auto 2em;
}

footer .flex p {
  font-size: 1.2em;
  margin: 0 1em;
}

footer .flex p a {}

@media screen and (max-width: 768px) {
  footer {
    font-size: 0.875em;
  }

  footer .inner {
    padding: 0 5%;
  }
}