@charset "utf-8";
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;  
}
body{
  font-family: sans-serif;
  line-height: 1;
  color: #fff;
  background: #cbc8c3;

}
ul{
  list-style: none;
}
a{
  color: inherit;
  text-decoration: none;
  display: block;
}
img{
  max-width: 100%;
  vertical-align: bottom;
  border: 4px solid rgb(76, 148, 193);
}



/*共通幅*/

.container{
  max-width: 900px;
  margin:  0 auto;
  padding-inline: 30px;
}


/*header*/
header{
  background-color: #161b29;  
}
header .container{
  height: 170px;
  background: url(../img/top.jpg)
    no-repeat
    center/contain;
}
@media screen and (min-width:450px) {
  header .container{
    height: 240px;
    background: url(../img/top.jpg)
      no-repeat
      center/contain;
  }  
}
@media screen and (min-width:540px) {
  header .container{
    height: 270px;
    background: url(../img/top.jpg)
      no-repeat
      center/contain;
  }  
}
@media screen and (min-width:820px) {
  header .container{
    height: 450px;
    background: url(../img/top.jpg)
      no-repeat
      center/cover;
  }  
}


main a{
  width: fit-content;
  transition: 350ms;
}
main a:hover{
  scale: 1.05;
}

/*navigaition*/
nav{
background: 
linear-gradient(#fff,#ccc);
}
nav ul{
  display: flex;
}
nav li{ 
  width:  calc(1/3*100%);
  text-align: center;
  }
nav a{
  line-height: 50px;
}
nav a:hover{
background: linear-gradient(#ccc, #fff);
}



h2{
  margin-top: 60px;
  padding: 50px 0 30px;
  font-size: 30px;
}
p{
  padding-top: 20px;
}

/*
main ul li{
margin-bottom: 20px;
}
main a{
color: #00f;
text-decoration: underline;
}
main a:hover{
color: #f00;
}
*/

.pf{
  max-width: 400px;  
  height: auto;

}


.cw{
  max-width: 600px;
  height: auto0;
}
.cw img{
  padding: 20px;
  background: #fff;
}



/*-----------------
---サイト制作演習---
-----------------*/
.grid-site ul{
  margin: 0 auto;
  max-width: 600px;
}
.grid-site li{
  margin: 20px 0;
  padding: 30px;
  background: #f1f1f1;
  color: #333;
  font-size: 14px; 
}
.grid-site a{
  object-fit: cover;
  margin-bottom: 20px;
}
.grid-site img{
  margin-inline: auto;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
}

@media screen and (min-width:680px) {
  .grid-site ul{
  max-width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 20px;  
  }
  .grid-site li{
    margin: 0;
    padding: 20px;
    font-size: 14px;
  }
  .grid-site img{
    margin-inline: auto;
    padding: 10px;
    width: 300px;
  }
}

@media screen and (min-width:960px) {

  .grid-site img{
    max-width: 1800px;
    background: #fff;
  }
}

footer{
  margin-top: 50px;
  padding: 20px 0;
  background: #888;
  text-align: center;
}