@charset "utf";
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  vertical-align: bottom;
  max-width: 100%;
}
html{
  scroll-behavior: smooth;/* スムーススクロールを有効にする */
}
header{
  background-color: #ffffff8f;
  position: fixed;
  left: 150px;
  top: 150px;
  z-index: 10;
  padding: 20px 30px;
  width: fit-content;
}
body{
  color: #222222;
  font-family: "Klee One", cursive;
}
h1{
  font-family: "Zen Kurenaido", sans-serif;
  font-size: 36px;
}
.g-nav{
  background-color: #d1f055d4;
  position: fixed;
  right: 0;
  top: 0;
  width: 50%;
  height: 50px;
}
.g-nav>ul{
  display: flex;
  justify-content: center;
  gap: 0 30px;
  align-items: center;/* 高さの指定が必要 */
  height: 50px;
}
.g-nav a{ 
  color: #000;
  font-size: 18px;
  padding: 10px 20px;
}
.g-nav a:hover{
  text-decoration: underline 10px #01aaff6a;
  /* text-decoration-skip-ink: none; */
  text-underline-offset: -8px;
}
.main-visual{
  width: 50%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
.main-visual>img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.container{
  width: 50%;
  margin-left: 50%;
  padding-top: 160px;
}
.content-wrapper{
  padding: 0 40px;
  margin-bottom: 160px;
  scroll-margin-top: 70px;
}
.content-wrapper>h2{
  margin-bottom: 10px;
}
.main-photo{
  width: 100%;
  margin-bottom: 20px;
  aspect-ratio: 1/1.2;
}
.main-photo>img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.text{
  line-height: 2;
  margin-bottom: 40px;
}
.photo-wrapper{
  display: flex;
  justify-content: space-between;
}
.photo-wrapper>p{
  width: 48%;
  aspect-ratio: 1.4/1;
}
.photo-wrapper img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.g-map{
  margin-top: 40px;
  width: 100%;
  aspect-ratio: 1.8/1;
}
.g-map>iframe{
  width: 100%;
  height: 100%;
}
footer{
  padding: 20px 0;
  background-color: #46b4c3;
}
footer>p{
  text-align: center;
  color: #fff;
}
@media (max-width:700px){
  header{
    position: absolute;
    left: 0;
    right: 0;
    top: 120px;
    margin: auto;
  }
  h1{
    font-size: 28px;
  }
  .g-nav{
    width: 100%;
    z-index: 20;
  }
  .g-nav>ul{
    gap: 0 10px;
  }
  .main-visual{
    width: 100%;
    position: static;/* positionを無効にする */
  }
  .container{
    width: 100%;
    margin-left: 0;
    padding-top: 100px;
  }
  .content-wrapper{
    margin-bottom: 80px;
  }
  .content-wrapper>h2{
    font-size: 20px;
  }
  .text{
    font-size: 14px;
  }
  .photo-wrapper{
    display: block;
  }
  .photo-wrapper>p{
    width: 100%;
    margin-bottom: 10px;

  }



}