@charset "UTF-8";

/* 共通部分
-------------------------------------------  */
html {
      font-size: 100%;
}
body {
      font-family:"Avenir", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
      line-height:1.7;
          color: #656262;

      }
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

/* 大きな背景画像　*/
.big-bg {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* 見出し ---------- */
.pagetitle {
  font-size:  5rem;
  font-family: 'Philosopher', serif;
  text-transform: uppercase;
  font-weight: normal;
}

/* HEADER
-------------------------------------------  */
.page-header {
  display: flex;
  justify-content: space-between;
}

.logo {
    width: 210px;
    margin-top: 14px
}

.main-nav{
  display: flex;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-top: 34px;
  list-style: none;
}
.main-nav li {
  margin-left: 36px;
}
.margin-nav a {
  color: #656262;
}
.main-nav a:hover {
  color: #f94e4e;
}


/* HOME ---------- */
#home {
 background-image: url(../images/main-bg .jpg);
 min-height: 50vh;
}
.home-content .pagetitle{
 text-align: center;
 max-width: 560px;
 margin-top: 6%;
 margin-bottom: 50px;
}


/* ABOUT ---------- */
#about {
 background-image: url(../images/main-bg .jpg);
 min-height: 100vh;
}

.about-content .page-title{
  max-width: 560px;
  margin-top: 6%;
  margin-bottom: 50px;
 }


/* GALLERY ------------- */
#gallery {
  background-image: url(../images/main-bg .jpg);
  min-height: 0vh;
}
.gallery-content .page-title{
  max-width: 560px;
  margin-top: 10%;
}

.gallery-content p {
  font-size: 1.125rem;
  margin: 10px 0 0;
}

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 6%;
  margin-bottom: 50px;
}


/* フッター　
--------------------*/
footer {
  background: #656262;
  text-align: center;
  padding: 26px 0;
}
footer p {
  color: #fff;
  font-size: 0.875rem;
}

/* モバイル版 -------*/
@media (max-width: 600px) {
.pagetitle {
  font-size: 2.5rem;
}
.page-header {
  flex-direction: column;
  align-items: center;
}

/* HEADER */
.main-nav {
  font-size: 1rem;
  margin-top: 100px;
}
.main-nav li {
  margin: 0 20px;
}

/* HOME */
.home-content {
  margin-top: 20%;
}
/* ABOUT */
  .about-content {
    margin-top: 20%;
  }
/* GALLERY */
  .gallery-content {
    margin-top: 20%;
  }