/* .css */
@charset "utf-8";

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;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: #fff;
    padding: 10px;
}
header h1 {
    margin: 0;
}
aside{
    background-color: #444;
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav {
    background-color: #444;
    color: #fff;
    padding: 10px;
    text-align: center;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
}


.breadcrumb {
    background-color: #eee;
    padding: 10px;
    text-align: center;
}
.breadcrumb a {
    color: #333;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}
.container {
    display: grid;
    gap: 10px;
    padding: 10px;
}

/* メディアクエリで幅768px以上の場合 */
@media (min-width: 768px) {
    .container {
        grid-template-columns: 70% 30%;
    }

    main {
        grid-column: 1 / 2;
    }

    aside {
        grid-column: 2 / 3;
    }

    article {
        grid-column: 1 / 2;
    }

    section {
        grid-column: 2 / 3;
    }
}
main, aside, article, section {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: left;
}
.c{ 
    width: 750px;
    background: #CCFFCC;
  }
div.sample p:last-child{
  background-color:#00ccff;
     }
 .child{
    padding: 0.5rem;
    border: 1px solid blue;}    
  #child{
     margin: 10px 100px 0px 2px; 
     padding: 20px;}
  table.sample tr {background-color:#CCFFCC;}/* 293行目から移動している */
  table.sample tr:nth-last-child(3) {background-color:#FFCCCC;}
  .child3{}
    
  .parent{border: 1px solid rgb(233, 223, 223); }  
 
#container {            
    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: 400px;
  border-style: solid;  
  background: #87CEFA;
}		
#border{magin: 3px 20px 5px 30px;}	

.crumbs ol {
    list-style-type: none;
    padding-left: 9px;
    line-height: 1.8em;
    background-color: #444;
    color: #fff;
  }
.crumbs a{color: rgb(73, 217, 207);}
  
footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

/* メディアクエリで幅768px以下の場合 */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }

    nav ul li {
        display: block;
        margin: 5px 0;
    }
}
 /* メディアクエリで幅768px以下の場合 */
 @media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin-right: 0;
        margin-bottom: 5px;
    }
}