@charset "utf-8";
            /*
            base css
            */
            body {
                font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
                font-size: 15px;
                line-height: 1.5;
                color: #333;
            }
html {                                            /*　　css_font追加ここから　　*/
	font-size: 112.5%;
	font-size: clamp(                          /*  =======このclamp説明は こちら= =  https://hail2u.net/blog/setting-basic-font-size-with-clamp.html  ========  */
		100%,
		(100vw - 640px) * 0.004 + 100%,
		125%
	);
}    
 
body {
  /* font-size: 1.125em;   */
  background-color: #E0FFFF;
}
.parent {
  padding: 0.5em;
  font-size: 1.5em;
}
.child {
  padding: 0.5em;
}
h1,h2{font-size: 1.3em;} /*　　css_font追加ここまで　　*/


body{
   margin: 5px;
   width: 1191px; 
   background: pink;
    display: grid;
     grid: "h h h"
             "a b c"
             "f f f";
     grid-template-columns: auto 1fr 20%; 
}
header{
  display: flex;
    flex-direction: row;
  
     position: center;
    width: 1191px; 
    grid-area: h;
    background: #aaa;
    border-radius:10px 10px 0 0;
   
}
h1{
margin-left:50px;
}
.nav{
  justify-content: right;
}
article{ 
  color: #000000;
  padding: 10px 20px 10px 20px; 
  background: #E0FFFF;
  grid-area: b; 
  min-width: 12em;   /*12em*/  
}
nav{ 
   background: #CC0066;
  grid-area: a;    /* auto min-width */ 
}
side{ 
 background: #CC3333;
  grid-area: c; 
  min-width: 200px;     /*12em*/
}
footer {
    width: 1191px;
    text-align: center;
    font-size: 1.5em; 
    grid-area: f;
    background: #aaa;
    border-radius: 0 0 30px 30px;
}
.c{ 
  width: 800px;
  background: #CCFFCC;}
   
div.sample p:last-child {background-color:#00ccff;}/* 240行目から移動している */
    
#child{
   margin: 10px 100px 0px 2px; 
   padding: 20px;}
.c{ background: #CCFFCC;}
     

table.sample tr {background-color:#CCFFCC;}/* 293行目から移動している */
table.sample tr:nth-last-child(3) {background-color:#FFCCCC;}
.child3{}


		#container {             /*============================== 以下 421行目から移動している */
		  width: 600px;
		}
		#div1 {
		  
		  width:300px;
		  float: left;
		  border: 1px solid;
		}
		#div2 {
		 
		  border: 1px solid;
		}
		#div3 {
		  width:300px;
		  float: left;
		  border: 1px solid;
		}
		#div4 {
		  border: 1px solid;
		}
		#div3 {
		  width:300px;
		  float: left;
		  border: 1px solid;
		}
		#div4 {
		  border: 1px solid;
		}
		#div5 {
		  width:300px;
		  float: left;
		  border: 1px solid;
		}
		#div6 {
		  border: 1px solid;
		}
		#div7 {
		  width:300px;
		  float: left;
		  border: 1px solid;
		}
		#div8 {
		  border: 1px solid;
		}
		
p.sample1 {border-style: none; background: #ADD8E6;}
p.sample2 {border-style: hidden; background: #B0C4DE;}
p.sample3 {border-style: solid; background: #87CEFA;}
p.sample4 {border-style: double; background: #B0E0E6;}
p.sample5 {border-style: groove; background: #AFEEEE;}
p.sample6 {border-style: ridge; background: #87CEEB;}
p.sample7 {border-style: inset; background: #66CDAA;}
p.sample8 {border-style: outset; background: #7FFFD4;}
p.sample9 {border-style: dashed; background: #98FB98;}
p.sample10 {border-style: dotted; background: #90EE90;}
p.sample11 {border-style: solid double; background: #F0E68C;}
p.sample12 {border-style: solid double groove; background: #EEE8AA;}
p.sample13 {border-style: solid double groove ridge; background: #FFE4B5;}
		
h1.sample3 {
  padding: 5px;
  width: 450px;
  border-style: solid;  
  background: #87CEFA;
}		
#border{magin: 3px 20px 5px 30px;}	
.crumbs ol {
  list-style-type: none;
  padding-left: 9px;
  line-height: 1.8em;
  color: #fff;
}
.crumbs a{color: rgb(73, 217, 207);}