/* 全てのページに適用される設定 */
html {
  font-size: 16px;
  font-family: sans-serif;
}
* {
  box-sizing: border-box;
}
p, li, td {
    line-height: 1.7;
}
body {
  margin: 0 0 0 0;
}
a:link {
  color: #253958;
  text-decoration: none;
}
a:visited {
  color: #253958;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
img {
  max-width: 100%;
}

/* 全てのページに適用 - ヘッダー */
.logo {
  text-align: center;
  margin: 30px 0 0 0;
}
.nav ul {
  margin: 30px 0 30px 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: 50px;
}

/* 全てのページに適用 - メイン */
main { 
  margin: 30px auto 50px auto;
  max-width: 1200px;
  text-align: center;
}

/* 個別のスタイル */
/* index.html pet.html figure.html */
.hero {
  zoom: 1.6;
  margin: 20px 0 20px 0;
}

.heromobile {
  display: none;
}

.intro {
  padding-bottom: 20px;
  font-size: 1.1rem;
  letter-spacing: 0.1rem
}

.caption {
  text-align: right;
  margin: 7px 30px 0 0
} 
.works {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 50px;
}
.boder{
  margin: 60Px 0 20px 0;
  border-bottom: 1px solid #abaaba;
  padding: 0 0 10px 0;
}

.gaiyo{
margin: 30px auto;
text-align: left;
}
.pro-name {
  border-collapse: collapse ;
  width: 100% ;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  }

.pro-name th, .pro-name td {
  border: 1px solid #abaaba;
  padding: 20px;
  vertical-align: middle;
}

.pro-name th {
  width: 120px;
  text-align: left;
  vertical-align: middle;
}
a:hover {
  text-decoration: underline;
  }

/* 全てのページに適用 - フッター */
.gotop{
  width: 150px;
  margin: auto 
}
.caption2 {
  margin-top: 4px;
  text-align: center
}



 /* モバイル対応 */
 @media(max-width: 767px) {
  .nav ul {
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 4%;
    margin: 20px 0 20px 0 
  }  

  .logo {
  padding: 0 4%;
 }
  main{
  padding: 0 4%;
  }
   
  .heromobile {
  display: block;
 }

 .hero {
  display: none;
 }
  .intro{
    font-size: 0.9rem;
    margin: -20px 0 0 0
 }
   .works {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  /* 全てのページに適用 - フッター */
.gotop{
  width: 100px;
  margin: auto 
}
}