@charset "UTF-8";
*{
  margin: 0;padding: 0;box-sizing: border-box;
  /* outline: 2px solid #ff0;　間違いをcheck */
}
img{
  vertical-align: bottom;
  max-width: 100%;/* フルードイメージの設定 */
}
ul{
    list-style: none;
}
a{
  text-decoration: none;
}
body{
  color: #2e2e2e;
}
/* pcレイアウト */
header{
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 0;
}
h1{
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 36px;
  margin-bottom: 8px;
}
.tag-line{
  font-size: 14px;
}
.g-nav{
  height: 50px;
  background-color: #31597f;
  margin-bottom: 80px;
}
.g-nav ul{
  max-width: 960px;
  display: flex;
  margin: 0 auto;
}
.g-nav li{
  width: 25%;
}
.g-nav a{
  color: #fff;
  display: block;
  line-height: 50px;
  text-align: center;
  border-left: 5px solid #ffffff;
  transition: 0.3s;
  font-family: "Zen Maru Gothic", serif;
}
.g-nav li:last-of-type>a{
  border-right: 5px solid #ffffff;
}
.g-nav a:hover{
  background-color: #4f7293;
}
main{
  max-width: 960px;
  margin: 0 auto 100px;
  font-family: "Zen Maru Gothic", serif;
}
.main-visual{
  width: 100%;
  aspect-ratio: 1/0.4;/* 横、縦の比率 */  /* height: 360px;の代わり */
  margin-bottom: 80px;
}
.main-visual>img{
  object-fit: cover;
  object-position: center 20% ;
  width: 100%;
  height: 100%;
}
.main-copy{
  text-align: center;
  margin-bottom: 80px;
}
.main-copy>h2{
  font-size: 30px;
  margin-bottom: 30px;
}
.lead{
  line-height: 2.5;
  font-size: 18px;
}
.sp{
  display: none;
}
@media (max-width:640px){
  .sp{
    display: block;
}}
.content-wrapper{
  display: flex;
  gap: 0 30px;/* 上下、左右の余白 */
  margin-bottom: 80px;
}
.conten-box{
  width: calc((100% - 60px) / 3);
}
.content-box>h3{
  font-size: 20px;
  margin-bottom: 8px;
}
.photo{
  width: 100%;
  aspect-ratio: 4/2.5;/*   height: 200px; */
  margin-bottom: 10px;
}
.photo>img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.text{
  line-height: 1.7;
}
.map-wrapper>h2{
  font-size: 28px;
  text-align: center;
  margin-bottom: 10px;
}
.map-inner{
  aspect-ratio: 2/0.5;/* height: 300px; */
  text-align: center;
}
.map-inner>iframe{
  width: 100%;
  height: 100%;
}
footer{
  padding: 20px 0;
  background-color: #2e69a0;
}
footer>p{
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
}
.sns{
  max-width: 960px;
  display: flex;
  gap: 0 20px;
  margin: 0 auto;
}
.sns>li{
  width: 40px;
}

/* 960px以下の時 */
@media (max-width:960px){
  header{
    text-align: center;
  }
h1{
  font-size: 28px;
}
.tag-line{
  font-size: 10px;
}
.g-nav li:first-of-type>a{
  border-left: 0
}
.g-nav li:last-of-type>a{
  border-right: 0
}
.content-wrapper{
padding: 0 10px;
}
}
/* 640px以下の時 */
@media (max-width:640px){
  .g-nav{
    height: 100px;
  }
  .g-nav>ul{
    flex-wrap: wrap
  }
  .g-nav li{
    width: 50%;
  }
  .g-nav a{
    border-left: 2px solid #ffffff;
  }
  .g-nav li:nth-of-type(3)>a{
    border-left: 0;
  }
  .g-nav li:nth-of-type(n+3)>a{
    border-top: 2px solid #ffffff;
  }
  .main-copy>h2{
    font-size: 22px;
  }
  .lead{
    font-size: 14px;
  }
  .content-wrapper{
    flex-direction: column;
    gap: 50px 0;
    padding: 0 25px;
  }
  .conten-box{
    width: 100%;
  }
  .map-wrapper{
    padding: 0 25px;
  }
  .map-inner{
    aspect-ratio: 1/.5;
  }
  .sns{
    padding-left: 10px;
  }
}