html {
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-size: 20px;
  line-height: 2em;
  font-feature-settings: "palt";
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
    YuGothic, "Yu Gothic Medium", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    Meiryo, sans-serif;
  background: white;
  position: relative;
}
/* article {
    width: 50em;
    margin: 0 auto;
    overflow: hidden;
} */
ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

section {
  position: relative;
}
h1,
h2 {
  margin: 0;
}

img {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.wrapper {
  /* background-color: #343233; */
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

header {
  width: 100%;
  max-width: 370px;
  margin: 0 auto;
  padding: 50px 0;
}

.section-img {
  width: 100%;
  /* max-width: 750px; */
  margin: 0 auto;
}

/* .ttl {
  background-color: #f08200;
  padding: 10px 0 14px;
}

.ttl img {
  width: 80%;
}

.ttl h2 img,
.map-btn img {
  width: min(30vw, 304px);
} */

.map {
  width: 100%;
  max-width: 860px;
  background-color: #fff;
  margin: 0 auto;
  /* padding: 30px;
    position: absolute;
    left: 0;
    bottom: 0; */
}

.g-map {
  width: 76%;
  aspect-ratio: 764/490;
  max-width: 760px;
  margin: 0 auto;
  bottom: min(15vw, 136px);
  left: 0;
  right: 0;
}

.g-map iframe {
  width: 100%;
  height: 100%;
}

.map-btn {
  bottom: min(71vw, 686px);
  left: 0;
  right: 0;
}

.section-img-btn {
  width: clamp(65%, 4vw, 100%);
  max-width: 310px;
  margin: 0 auto;
  position: relative;
  bottom: clamp(60px, 14vw, 90px);
}

.info-ttl {
  width: 100%;
  max-width: 483px;
  margin: 0 auto 50px;
}

.from-text {
  width: 100%;
  max-width: 525px;
  margin: 0 auto 80px;
}

/* .section2 {
  position: relative;
} */

.suehiro .g-map {
  bottom: min(3vw, 38px);
}

.suehiro .map-btn {
  bottom: min(60vw, 588px);
}

.form {
  text-align: center;
}

.form iframe {
  width: min(85.53vw, 857px);
  border: 0;
  /* フォーム高さPC */
  height: 770px;
}

/* フォーム切り替え */
@media screen and (min-width: 626px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}

@media screen and (max-width: 625px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

footer {
  padding-bottom: 64px;
  max-width: 476px;
  margin: 0 auto;
}

.footer-logo {
  margin-bottom: 20px;
}

footer ul {
  display: flex;
  /* justify-content: center; */
  justify-content: space-between;
  /* width: min(54vw, 480px); */
  width: min(94vw, 355px);
  margin: 0 auto;
  align-items: center;
}

footer ul li {
  /* width: calc(100% / 3 - 1em); */
  margin: 0 0.5em;
  max-width: 128px;
}

footer ul li:first-child,
footer ul li:last-child {
  max-width: 54px;
  width: 100%;
}

footer ul li a {
  width: 100%;
}

a img:hover {
  opacity: 0.6;
  transition-duration: 0.3s;
  transform: translate(2px, 2px);
}

nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* width: 2.35em; */
  margin: 0 auto;
  overflow: hidden;
}

nav a {
  margin: 0 0 0.5em;
  display: block;
}

/*****************************
アニメーション
******************************/
/* header, */
/* .toukou,
.suehiro,
.info {
  opacity: 0;
} */

/* 下からフェードアップ */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* その場でフェードイン */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* アニメーション開始遅延 */
.toukou.fadeUp {
  animation-delay: 0.4s;
}

.map-btn {
  animation-delay: 0.6s;
}

.g-map {
  animation-delay: 0.8s;
}

.suehiro.fadeUp,
.info.fadeUp {
  animation-delay: 1s;
}

@media screen and (max-width: 768px) {
  nav {
    display: none;
  }
}

@media screen and (max-width: 625px) {
  header {
    width: 90%;
  }

  .g-map {
    bottom: min(12vw, 136px);
  }

  /* フォームの高さスマホ */
  .form iframe {
    height: 1000px;
  }

  /* footer ul {
    width: min(83vw, 480px);
  } */

  .from-text {
    margin: 0 auto 40px;
  }  
}