@charset "UTF-8";

header{
       width: 100%
       height: 20%;
       background-size: cover ;
       margin-right: auto;
       marginleft: auto;
       color: white;                         
}

#container {
           width: 100%;
           height: 100%;
           margin: 0px auto;
           display: flex;
           flex-direction: row;
}

nav li{
       display: inline;
       list-style-type: none;
       padding-right: 30px;
}

footer{
  color:yellow;
  background-color:blue;
}

main {
      width: 100%;
      height: 100%;
      margin: 1px auto;
      background-color:white;
      
}
#shape {width: 600px;
       height: 150px; 
       background-image: linear-gradient(to right, #89ffff ,white);
}

#material {width: 600px;
           height: 180px;
           background-image: linear-gradient(to right, #ff99ff ,white);
}

#feature {width: 1000px;
           height: 550px;
           background-image: linear-gradient(to right, #ffffa3 ,white);
}

#spec {width: 600px;
           height: 230 px;
           background-image: linear-gradient(to right, #ffc1ff ,white);
}

/* ▼表全体の装飾 */
table {
  border-collapse: collapse; /* セルの境界線を共有 */
  border-radius: 16px;
  padding: 0.8em;
}

/* ▼各セルの装飾 */
td {
  border: 0px solid silver;  /* 表の罫線(=セルの枠線)4px silver */
  padding: 5px auto;       /* セル内側の余白量 */
   text-align : right;
}

tr:nth-child(odd) { background:white;
}


p {
   text-align : center;
}

aside {
       background-color :light blue;
}

h2 {
    font-family: sans-serif;
    font-style: gothic;
    color: White;
    font-size : 24pt;
    background-color : darkblue;
}

h1 {
    font-family:"Times New Roman";
    font-style:italic;
    color : darkblue;
    font-weight: normal;
    font-size : 48pt;
}

h3 {
    font-family:"gothic";
    color : black;
    font-size : 18pt;
    background-color : 
}

img{ float: right;}

div{
  position: relative;
}

.banner{
  position: absolute;
  top: 10;
  left: 10;
}

#big{list-style-type:"■" ;
}

#small{list-style-type:disc
}