/*===============================================
for pc 4K
===============================================*/
@media screen and  ( max-width: 5000px ){
  .flexbox {
   display:flex;
   flex-wrap:wrap;
   margin:auto;
   max-width: 70%;
  }
  .sideM {
   display:flex; 
   align-items: flex-start; 
   align-content: flex-start; 
   justify-content: space-around;
   flex-wrap:wrap; 
   max-width: 24.5%; 
   margin: 0% 0.1%; 
   padding: 1.5% 1.0%;
   border-radius: 10px;
   background-color: #d8e0ff;
  }
  .mainM {
   display:flex;
   flex-wrap:wrap;
   max-width: 74.8%; 
   margin: 0% auto; 
   padding: 1.5% 1.0%;
   background-color:#ffffff;  
   align-items: center;
  }
  .mainM_02 {
    display:flex;
    flex-wrap:wrap;
    max-width: 100%; 
    margin: auto; 
    padding: 1.5% 1.0%;
    background-color:#ffffff;  
    align-items: center;
  }
}
/*===============================================
for pc Full HD
===============================================*/
@media screen and  ( max-width: 3000px ){
  .flexbox {
   display:flex;
   flex-wrap:wrap;
   margin:auto;
   max-width: 100%;
  }
  .sideM {
   display:flex; 
   align-items: flex-start; 
   align-content: flex-start; 
   justify-content: space-around;
   flex-wrap:wrap; 
   max-width: 24.5%; 
   margin: 0% 0.1%; 
   padding: 1.5% 1.0%;
   border-radius: 10px;
   background-color: #d8e0ff;
  }
  .mainM {
   display:flex;
   flex-wrap:wrap;
   max-width: 74.8%; 
   margin: 0% auto; 
   padding: 1.5% 1.0%;
   background-color:#ffffff;  
   align-items: center;
  }
  .mainM_02 {
    display:flex;
    flex-wrap:wrap;
    max-width: 100%; 
    margin: auto; 
    padding: 1.5% 1.0%;
    background-color:#ffffff;  
    align-items: center;
  }
}
/*===============================================
for pc 1441-Full HD
===============================================*/
@media screen and  ( max-width: 1919px ){
  .sideM {
    max-width: 24.5%; 
    margin: 0% 0.2%;
  }
  .mainM {
    max-width: 74.5%; 
    margin: 0% 0.2%;
  }
  .div6_a{
    font-size: 90.5%;   
  }
}
/*===============================================
for pc 2
===============================================*/
@media screen and  ( max-width: 1440px ){
  .flexbox {
    display:flex;
    flex-wrap:wrap;
    margin:auto;
    max-width: 100%;
   }
  .sideM {
    max-width: 24.5%; 
    margin: 0% 0.2%;
  }
  .mainM {
    max-width: 70.5%; 
    margin: 0% 0.2%;
  }
  .h1_W {
    max-width: 99.6%; 
    margin: 0% 0.1% auto;
    margin-bottom:1.5%;
  }
  .wep{
    text-align: center;
  }
  .div6{
    max-width:280px; 
    overflow-y:auto; 
    margin:auto; 
    text-align:left; 
    padding:20px 45px; 
    background:linear-gradient(#ffffff, #d8e0ff); 
    border-radius:3px; 
    box-shadow:0px 2px 2px 1px #6666d2; 
    font-family:メイリオ; 
    font-size:medium;   
  }
  .div6_a{
    font-size: small;   
  }
}
/*===============================================
for pc 2.5
===============================================*/
@media (1081px <= width <= 1439px )  {
  .sideM {
    max-width: 24.0%; 
    margin: 0% 0.2%;
  }
  .mainM {
    max-width: 70.8%; 
    margin: 0% 0.2%;
  }
  .p_Bor{
    max-width: 99%;
    margin: auto;
  }
  .top_pag{
    max-width:100%; 
  }
  .p1afi { 
    margin:20px 0px;
    padding: 0px;
  }
}
/*===============================================
for pc 3
===============================================*/
@media screen and ( max-width:1080px){
  .flexbox {
    display:flex;
    flex-direction:column-reverse;
    flex-wrap:wrap;
    margin:auto;
    max-width: 99.6%;
  }
  .sideM {
    display:block;
    flex-wrap:wrap;
    max-width: 98%; 
    padding: 0% 20.5%;
    margin: auto;
    margin-bottom:1.5%; 
    justify-content: center;
    border-radius: 10px;
  }
  .sideMm {
    display:flex;
    align-items: flex-start;
    flex-wrap:wrap; 
    margin-top:20px;
  }
  .mainM {
    display:flex; 
    flex-wrap:wrap;
    max-width: 98%; 
    margin: 0% 0.1%;
    margin-bottom:1.5%;
    border-radius: 10px; 
  }
  .mainM2 {
    display:flex; 
    flex-wrap:nowrap;
    max-width: 69%; 
    margin: 0% 0.1%;
    border-radius: 10px; 
   }
  .menu_B4_top{
    text-align: center;
  }
  .h1_W {
    max-width: 99.6%; 
    margin: 0% 0.1% auto; 
  }
  .h1-320{
    max-width:80%;  
   }
  .div6_a{
    font-size: medium;   
  }
  .p01_0203{
    max-width:67.5%;
  }
  .p01_0205{
    max-width:67.5%;
  }
  .p1afi { 
    margin:20px 0px;
    padding: 10px;
  }
}
/*===============================================
for tablet 
===============================================*/
@media screen and ( max-width: 1024px ){
  .h1-320{
   max-width:80%;  
  }
  .h2 { 
   font-size: medium;
  }
  .menu_B{
   height:60px; 
   width:80%; 
   background-color:violet; 
   border-radius:15px; 
   margin:auto;
  }
  .p4 { 
   max-width:80%; 
   margin-bottom:20px; 
   padding:20px 0px 20px 0px; 
   background-color:#ec40bb; 
   border-radius:15px;
  }
  .sideM {
   max-width: 90%;
   padding: 0% 20.5%; 
  }
  .mainM {
   max-width: 90%; 
   margin: auto;
  }
  .p01_0203{
   max-width:76.5%;
  }
  .p01_0205{
   max-width:76.5%;
  }
}
/*===============================================
for tablet 2
===============================================*/
@media screen and ( max-width: 1023px ){
  .p01_0203{
    max-width:80.0%;
  }
  .p01_0205{
    max-width:80.0%;
  }  
}
/*===============================================
for tablet 3
===============================================*/
@media screen and ( max-width: 900px ){
  .p01_0203{
    max-width:84.0%;
  }
  .p01_0205{
    max-width:84.0%;
  }
}
/*===============================================
for smartphone
===============================================*/
@media screen and ( max-width: 600px ){
  .h1-320{
   max-width:80%;  
  }
  .p01_02{
   width:80%;
   overflow-y:auto; 
   margin:auto; 
   padding: 1.5%;
   text-align:left; 
   font-size:large;
  }
  .p6_BK {
   max-width:98%;
  }
  .sideM {
   padding: 0% 7.5%;
  }
  .table_mar_l{
   margin: auto; 
   margin-bottom: 15%;
  }
  .tatenki{
   max-width: 100%;
  }
  .tamap{
   max-width: 100%;
  }
  .weat_pag{
   max-width:95%; 
   margin-bottom: 0px; 
  } 
  .p_linC_1{
   max-width: 100%; 
   margin-left: 18px;
  }
  .p_linC_2{
   max-width: 100%; 
   margin-left: 18px;    
  }
  .p01_0203{
    max-width:78.0%;
  }
  .p01_0205{
    max-width:100.0%;
  }
}
/*===============================================
for smartphone 2
===============================================*/
@media screen and ( max-width: 380px ){
  .h2 { 
   font-size: x-small;
  }
  .sideM {
   max-width: 78%; 
  } 
  .mainM {
    max-width: 96%; 
    margin: auto;
  }
  .menu_B4{
   font-size: large;
  }
  .top_pag{
   max-width:99.9%; 
  }
  .p3_1 { 
   font-size: small;
  } 
  .weat_pag{
   max-width:100%; 
   margin-bottom: 0px; 
  }
  .table_mar_l{
   margin: auto; 
   margin-bottom: 10%;
  }
  .table_with{
   width: 200px;
  }
  .p_linC_1{
   margin-left: 10px;
   }  
  .p_linC_2{
   margin-left: 10px;
  }
  .p6_1 { 
   line-height: 1.5em; 
  }
  .div6_a{
    font-size: small;   
  }
  .p01_0203{
    max-width:84.0%;
  }
  .p01_0205{
    max-width:100%;
    padding: 0.5% 3.7%;
  }
  .p01_0206{
    max-width:100%;
  }  
}
/*===============================================
for smartphone 3
===============================================*/
@media screen and ( max-width: 330px ){
  .menu_B4{
    font-size: medium;
   }
  .table_with{
   max-width: 100px;
  }
  .p_linC_1{
   font-size: small;
   margin-left: 10px;
  }
  .p_linC_2{
   font-size: small; 
   margin-left: 10px;
  } 
  .tatenki{
   max-width: 50px; 
   vertical-align: top;
  }
  .tamap{
   max-width: 55px; 
   vertical-align: middle;
  }
  .p6_1 { 
   font-size: 90%; 
  }
  .p3 { 
    font-size: 90%; 
  }
  .div6_a{
    font-size: x-small;   
  } 
}