@charset "utf-8";

html {
  font-size: 100%;
}

body {
  color: #2b2a27;
  /*一般的にはbodyタグに対してフォントを指定をする*/
  /*総称フォント名は引用符で囲わない(フォントファミリー名は囲う)*/
  /*指定したフォントが全て表示されなかった場合に備えて最低限の指定として最後に総称フォントのゴシック体(sans-serif)や明朝体(serif)を指定しておこう*/
  /*欧文フォント名は日本語フォント名よりも先に指定する*/
  font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif;
}

img {
  max-width: 100%;
}

ul {
  /*リストの先頭のマーク*/
  list-style: none;
}

a {
  color: #2b2a27;
}

#mainvisual img {
  /*親要素に対して100％*/
  width: 100%;
  /*画面サイズに対して100％(viewport height)*/
  height: 100vh;
  /*object-fit=置換要素 アスペクト比を維持したまま要素のコンテンツボックス全体を埋めるように拡大縮小される→オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合はオブジェクトの方が合うように切り取られる*/
  object-fit: cover;
  /*置換要素の中身の配置を指定(この場合センターの上部)*/
  object-position: center top;
  margin-bottom: 80px;
}

.text {
  text-align: center;
  padding: 0 20px;
  margin-bottom: 80px;
}

.text .site-title {
  margin-bottom: 20px;
}

.text .btn {
  /*aタグはデフォルトの状態ではinline要素*/
  /*aタグでブロック要素を囲む場合はinline要素のままではなくdisplay:inline-block;あるいはdisplay:block;でblock要素に変えておくと不具合発生防止になる*/
  /*HTML5以降はaタグでdivやpなどのblock要素を囲んでもOK*/
  /*aタグでaタグを囲む（入れ子）aタグでformを囲むのはNG*/
  display: inline-block;
  border: solid 1px #2b2a27;
  font-size: 0.875rem;
  padding: 18px 60px;
  text-decoration: none;
}

.flex {
  display: flex;
  margin-bottom: 60px;
}

.flex li {
  width: calc(100%/3);
}

.flex li img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  vertical-align: bottom;
}

#footer {
  font-size: 0.75rem;
  padding: 20px;
  text-align: center;
}

#footer .sns {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#footer .sns li {
  margin: 0 10px;
}

@media screen and (max-width: 834px) {
  .flex {
    flex-direction: column;
  }

  .flex li {
    width: 100%;
  }
}