<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";

#gcont1 {
    display: grid; /* グリッドレイアウト */
	grid-template-rows: auto auto;
    grid-template-columns: 1fr;
	
	grid-column-gap: 5px;
    grid-row-gap: 5px;
    justify-items: stretch;
    align-items: stretch;
	
	
	 grid-template-areas:
	 "areaB"
	 "areaA";
}

#itemA {
	grid-area: areaA;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
#itemB {
    grid-area: areaB;
    //background: #8f8;
	padding: 10px;
	
	/*display: flex;
  justify-content: center;
  align-items: center;
  */
}

#gcont2 {
    display: grid; /* グリッドレイアウト */
	grid-template-rows: 1fr;
    grid-template-columns: 1fr;
	
	grid-column-gap: 1px;
    grid-row-gap: 1px;
    justify-items: stretch;
    align-items: stretch;
	
	
	 grid-template-areas:
	 "areaCa"
	 "areaCb"
	 "areaCc";
}
#itemCa {
    grid-area: areaCa;
    background: #f88;
	padding: 0px;
}
#itemCb {
    grid-area: areaCb;
    background: #8f8;
	padding: 0px;
}
#itemCc {
    grid-area: areaCc;
    background: #f8f;
	padding: 0px;
}
@media screen and (min-width:1000px) {
	
	#gcont1 {
    display: grid; /* グリッドレイアウト */
	grid-template-columns: 300px 1fr;
	grid-template-rows: 1fr;
    
	
	 grid-template-areas:
        "areaA areaB";
        
}
#gcont2 {
    display: grid; /* グリッドレイアウト */
	grid-template-columns: 2fr 2fr;
	grid-template-rows: 1fr 1fr;
    //grid-template-rows: 1fr calc(1fr - 30px);
	
	 grid-template-areas:
        "areaCa areaCc"
		"areaCb areaCc";
        
}
#itemA {
	padding-right: 40px;
}	
	
}
</pre></body></html>