/* 画面サイズで切り替えるレスポンシブ */
.p_title {
    width: 100%;
    height: auto;
	color: white;
	background-color: black;
}

.p_top {
    width: 100%;
    height: auto;
	color: white;
	background-color: #444444;
}


@media screen and (min-width:300px){
    /* 300px以上の時に読み込まれる 2*/
  .panel {
	float: left;
    width: 49.8%;
    height: auto;
    margin: 0.1% 0.1%;
	color: white;
	background-color: #444444;
	line-height: 120%;
  }
}

@media screen and (min-width:520px) and (max-width:720px){
    /* 768px以上1024px以下の時に読み込まれる 4*/
  .panel {
	float: left;
    width: 33.08%;
    height: auto;
    margin: 0.1% 0.1%;
	color: white;
	background-color: #444444;
	line-height: 120%;
  }
}
@media screen and (min-width:720px) and (max-width:1024px){
    /* 768px以上1024px以下の時に読み込まれる 4*/
  .panel {
	float: left;
    width: 24.8%;
    height: auto;
    margin: 0.1% 0.1%;
	color: white;
	background-color: #444444;
	line-height: 120%;
  }
}

@media screen and (min-width:1024px) and (max-width:1320px){
    /* 1024px以上の時に読み込まれる 5*/
  .panel {
	float: left;
    width: 19.78%;
    height: auto;
    margin: 0.1% 0.1%;
	color: white;
	background-color: #444444;
	line-height: 120%;
  }
}

@media screen and (min-width:1320px){
    /* 1024px以上の時に読み込まれる 5*/
  .panel {
	float: left;
    width: 12.3%;
    height: auto;
    margin: 0.1% 0.1%;
	color: white;
	background-color: #444444;
	line-height: 120%;
  }
}

/* フレックスグリッド　中央配置用のグリッド */
.centering_parent {
  display: -webkit-flex;
  display: flex;
 /* justify-content: -webkit-center;*/
 /* justify-content: center;*/
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  height: auto;
}