@charset "UTF-8";

li > a {
  text-decoration: none;
  margin-left: 20px;
}
li > a:link {
  color: #0d0d0d;
}
li > a:visited {
  color: #0d0d0d;
}
li > a:hover {
  color: #0d0d0d;
  text-decoration: underline;
}
li > a:active {
  color: #0d0d0d;
}

* {
  box-sizing: border-box;
}
/*-------------------------
pc用
-------------------------*/
@media only screen and (min-width: 601px) {

body {
/*font-size: 18px;*/
color: #333333;
}

/* ヘッダー */
header {
display: flex;
justify-content: space-between;
margin: 0 auto;
}

/* 見出し１ */
h1 {
text-align: left;
margin: 9px auto;
margin: 0 20px;
}

h1 img {
height: 40px;
text-align: left;
}

/* ナビゲーション */
nav ul {
text-align: right;
list-style: none;
display: flex;
/* padding: 0 0 0 40px; */
}

nav ul li {
margin: 0 20px;
}

/* ナビゲーションの装飾 */
/* 擬似クラス　特定（限定）の時に使う */
nav > a {
text-decoration: none;
color: #0d0d0d;
}

/* 一番大きな写真 */
#mainvisual img {
width: 100%;
object-fit: cover;
}

/* メインビジュアル */
main {
height: 1400px;
}

/* about */
#about {
width: 350px;
margin: 0 auto;
display: flex;
}

h2 {
font-weight: 700;
text-decoration: underline;
width: 100%;
text-align: center;
margin: 90px 0 20px 0;
}

#about img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 20px;
}

#about-right {
display: block;
}
#about-right h4 {
font-size: 2px;
width: 200px;
}

#about-right p {
width: 360px;
font-size: 13px;
}


/* works */
.works {
display: flex;
justify-content: center;
} 

.works section {
width: 230px;
margin: 0 10px;
text-align: center;
}

.works img {
width: 230px;
height: 150px;
}

.works h4 {
font-size: 18px;
font-weight: 700;
}

.works p {
font-size: 12px;
}

/*team*/
.team{
background-color: #f5f5f5;
padding-top: 1px;
padding-bottom: 50px;
margin-top: 90px;
}
.team1 {
display: flex;
justify-content: space-evenly;
margin: 0 auto;
margin-bottom: 30px;
} 

.team1 section {
width: 20%;
margin: 0px;
text-align: center;
}

.team1 img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
}

hr{
height: 1px;
width: 100%;
background-color: #000;
border: none;
}

.team2 {
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  } 
  
  .team2 section {
  width: 20%;
  margin: 0px;
  text-align: center;
  }
  
  .team2 img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  }

  .name{
    margin-bottom: 0;
    padding-bottom: 0;
    text-align: right;
    font-weight: bold;
  }
  
  hr{
  height: 1px;
  width: 100%;
  background-color: #000;
  border: none;
  }

.team p {
  font-size:12px;
}

#fav {
  font-size: 11px;
  padding-bottom: 10px;
}

/* フッター */
footer p {
text-align: center;
}

}


























/*----------------------------------
sp用
----------------------------------*/

@media only screen and (max-width: 600px) {

body {
/*font-size: 18px;*/
color: #333333;
}
    
/* ヘッダー */
header {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 100%;
}
    
/* 見出し１ */
h1 {
text-align: left;
margin: 9px auto;
}
    
h1 img {
width: 120px;
}
    
/* ナビゲーション */
nav ul {
text-align: right;
list-style: none;
display: flex;
/* padding: 0 0 0 40px; */
}
    
nav ul li {
margin: 0 20px;
}
    
/* ナビゲーションの装飾 */
/* 擬似クラス　特定（限定）の時に使う */
nav > a {
text-decoration: none;
color: #0d0d0d;
}
  
/* 一番大きな写真 */
  
#mainvisual img {
  width: 100%;
/*height: calc(100vh - 60px);*/
}

/* メインビジュアル */
main {
width: 100%;
text-align: center;
}

/* about */  
h2 {
font-weight: 700;
text-decoration: underline;
/*text-decoration: none;
border-bottom: 1px solid black;
padding-bottom: 2px;*/
}
    
#about img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}

/* works*/
.works {
margin: auto;
} 
    
section img {
width: 100%;
height: auto;
}

.name {
  font-weight: bold;
}

/* フッター */
footer p {
text-align: center;
}
    
}