@charset "UTF-8";
html {font-size: 100%;}

a{text-decoration: none;}
/* ---------header-------------------------------------------------- */
header{width:100%;height:50px;background: darkgreen;
       position: fixed;top:0;}
header h2{font-family: 'Oswald', sans-serif;
          letter-spacing:3px;color:tan;font-size: 30px;text-align: center;padding-top: 3px;}
.modoru{position: absolute;top:5px;left: 20px;text-align: center;
       width: 180px;height: 40px;border-radius: 5px;background-color: red;}
.modoru h3{font-size: 20px;color:white;margin: 6px 0 0;}
.modoru:hover{background: black;}
/* ---------main-------------------------------------------------- */
body{background: beige;}
main{text-align: center;margin-top: 70px;margin-left: 100px;margin-right: 100px;}
img{width: 300px;border-radius: 10px;}

.item h3{font-size: 20px;color:tan;margin-top:-5px;}
.item span{font-size: 18px;padding: 2px 10px 1px 10px;margin-left: 5px;
           border-radius: 5px;background: darkred;color:tan;margin-top:-5px;}
.item span:hover{background: black;}

.container{display: grid;
           margin: auto;
           grid-template-columns: 1fr 1fr 1fr 1fr;
           gap:10px;grid-template-rows: 230px 230px;}
.container{width: 1200px;height: auto;margin-bottom: 100px;}

footer{height: 50px;width: 100%;position: fixed;bottom: 0;
      text-align: center;font-size: 12px;padding-top: 15px;color:tan;background: black;}
/* ---------レスポンシブ-------------------------------------------------- */
@media screen and ( max-width :1500px )
{
body{background: lavenderblush;}
main{text-align: center;margin-top: 70px;margin-left:0px;margin-right:0px;}
img{width: 240px;}
.item h3{font-size: 20px;color:palevioletred;margin-top:-5px;}
.item span{font-size: 18px;padding: 2px 10px 1px 10px;margin-left: 5px;
           border-radius: 5px;background: darkorange;color:yellow;margin-top:-5px;}
.item span:hover{background: darkred;}

.container{display: grid;
          margin: auto;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          gap:10px;grid-template-rows: 190px 190px;}
.container{width:1000px;height: auto;margin-bottom: 100px;}
}

@media screen and ( max-width :1150px )
{
body{background: gainsboro;}
main{text-align: center;margin-top: 70px;margin-left:0px;margin-right:0px;}
img{width: 180px;border-radius: 5px;}
.item h3{font-size: 17px;color:slategray;margin-top:-5px;}
.item span{font-size: 15px;padding: 2px 10px 1px 10px;margin-left: 5px;
           border-radius: 5px;background: black;color:tan;margin-top:-5px;}
.item span:hover{background: darkblue;}

.container{display: grid;
            margin: auto;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap:10px;grid-template-rows: 150px 150px;}
.container{width:800px;height: auto;margin-bottom: 100px;}
}

@media screen and ( max-width :850px )
{
body{background:lavender;}
main{text-align: center;margin-top: 70px;margin-left:0px;margin-right:0px;}
img{width: 200px;}
.item h3{font-size: 17px;color:darkslategray;margin-top:-5px;}
.item span{font-size: 15px;padding: 2px 10px 1px 10px;margin-left: 5px;
           border-radius: 5px;background: darkred;color:tan;margin-top:-5px;}
.item span:hover{background: darkblue;}

.container{display: grid;
              margin: auto;
              grid-template-columns: 1fr 1fr 1fr;
              gap:10px;grid-template-rows: 160px 160px 160px;}
.container{width:700px;height: auto;margin-bottom: 100px;}
}

@media screen and ( max-width :750px )
{
body{background:thistle;}
header{height: 30px;}
header h2{font-size: 18px;padding-top: 1px;padding-left: 20px;}
.modoru{top:0px;left: 0px;width: 120px;height: 30px;border-radius: 0px;}
.modoru h3{font-size: 15px;margin: 5px 0 0;}
main{text-align: center;margin-top: 50px;margin-left:0px;margin-right:0px;}
img{width: 130px;}
.item h3{font-size: 14px;color:#990e2a;margin-top:-5px;}
.item span{font-size: 12px;padding: 2px 10px 1px 10px;margin-left: 5px;
           border-radius: 5px;background: black;color:tan;margin-top:-5px;}
.item span:hover{background: darkred;}

.container{display: grid;
              margin: auto;
              grid-template-columns: 1fr 1fr 1fr;
              gap:0px;grid-template-rows: 120px 120px 120px;}
.container{width:400px;height: auto;margin-bottom: 100px;}
}

@media screen and ( max-width :401px )
{
body{background:thistle;}
header h2{font-size: 15px;letter-spacing:2px;padding-top: 5px;padding-left: 40px;}
.modoru{top:0px;left: 0px;width: 100px;height: 30px;border-radius: 0px;}
.modoru h3{font-size: 12px;margin: 8px 0 0;}
main{text-align: center;margin-top: 50px;margin-left:0px;margin-right:0px;}
img{width: 300px;height:200px;text-align: center;border-radius: 10px;}

.item h3{font-size: 16px;margin-top: 4px;margin-bottom:10px;
         color:#990e2a;}
.item span{font-size: 18px;padding: 5px 10px 3px 10px;
           margin-left: 5px;}

.container{display: block;width: 100%;height: auto;margin-bottom: 70px;}
footer{height: 50px;font-size: 12px;padding-top: 5px;color:tan;background: black;}
}

@media screen and ( max-width :321px )
{
body{background:tan;}
header h2{font-size: 15px;padding-top: 4px;padding-left: 80px;}
img{width: 280px;height:190px;text-align: center;}
}