@charset "utf-8";


.floatR{
       float: none; 
    }
.floatL{
       float: none; 
    }

.itemA {
    width: 96%;
    margin: 0 auto 40px;
    text-align: center;
}

.itemA img{
    width: 92%;
}

.container_grid01 {
    width: 96%;
    margin: 0 auto;
    text-align: center;
    color:#fff;
}

.container_grid01 img{
    width: 92%;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/*PC*/

@media print, screen and (min-width: 768px) and ( max-width:939px){
    #container {
    width: 96%;
    color: #fff;
    margin: 110px auto 0;
    }
    
    .itemA img{
    width: 100%;
    }
    
    .container_grid01 img{
    width: 96%;
    }

    
    .floatR{
       float: right; 
    }
    .floatL{
       float: left; 
    }
    
    
    .itemA{
        width: 96%;
        text-align: left;
        margin: 0 auto;
    }
    
     .itemA .floatR.image{
        width: 48%;
        padding-left: 3%;
    }
    
    .itemA .floatL.image{
        width: 48%;
        padding-right: 3%;
    }
    
    .itemA img.floatR {
        display: inline-block;
        margin-left: 30px;
    }
    
    .container_grid01{ 
        width: 96%;
        margin: 0 auto;
        display: grid;
        gap: 4px;
    -ms-grid-columns: 49.5% 49.5%;
    grid-template-columns: 49.5% 49.5%;
    -ms-grid-rows: auto auto auto auto auto ;
    grid-template-rows:  auto auto auto auto auto ;
    }
    
    .container_grid01 .box_01{
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        text-align: left;
    }
    
    .container_grid01 .box_02{
             grid-column: 2 / 3;
        grid-row: 1 / 2;
        padding-top: 100px;
        text-align: left;
    }
    
    .container_grid01 .box_03{
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        padding-top: 50px;
        text-align: left;
    }
    
    .container_grid01 .box_04{
        grid-column: 2 / 3;
        grid-row: 2 / 5;
        text-align: right;
    }
    
    .container_grid01 .box_05{
        grid-column: 1 / 2;
        grid-row: 4 / 6;
        text-align: left;
    }
    
    .container_grid01 .box_06{
             grid-column: 2 / 3;
        grid-row: 5 / 6;
        padding-top: 50px;
        text-align: left;
    }
}

@media print, screen and (min-width: 940px) {
    
    .itemA{
        width: 940px;
        margin:0 auto;
        text-align: left;
    }

     .itemA .floatR {
        display: inline-block;
        margin-left: 30px;
        text-align: right;
    }
    
    .itemA img.floatR {
        display: inline-block;
        margin-left: 30px;
    }
    
     .itemA .floatL {
        display: inline-block;
        margin-right: 30px;
    }   
    .itemA img{
        width: 381px;
    }
    
    .floatR{
       float: right; 
    }

  .floatR .name02{background:#0131ff;padding-left: 8px;line-height: 1.3;display: inline-block;padding: 4px 10px 4px 10px;text-align: right;/* margin: 0px auto; *//* width: 170px; */}   
    .floatL{
       float: left; 
    }
  .floatL .name02{background:#0131ff;padding-left: 8px;line-height: 1.3;display: inline-block;padding: 4px 10px 4px 10px;text-align: right;/* margin: 0px auto; *//* width: 170px; */}     
    
    .container_grid01{
        width: 940px;
        margin: 0 auto;
        display: grid;
        text-align: center;
        gap: 2px;
    -ms-grid-columns: 468px 468px;
    grid-template-columns: 468px 468px;
    -ms-grid-rows: 455px 150px 455px 150px 455px ;
    grid-template-rows:  455px 150px 455px 150px 455px ;
    }
    
    .container_grid01 img{
    width: 381px;
    }
    
    .container_grid01 .box_01{
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        text-align: left;
    }
    
    .container_grid01 .box_02{
             grid-column: 2 / 3;
        grid-row: 1 / 2;
        padding-top: 100px;
        text-align: left;
    }
    
    .container_grid01 .box_03{
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        padding-top: 50px;
        text-align: left;
    }
    
    .container_grid01 .box_04{
        grid-column: 2 / 3;
        grid-row: 2 / 5;
        text-align: right;
    }
    
    .container_grid01 .box_05{
        grid-column: 1 / 2;
        grid-row: 4 / 6;
        text-align: left;
    }
    
    .container_grid01 .box_06{
             grid-column: 2 / 3;
        grid-row: 5 / 6;
        padding-top: 50px;
        text-align: left;
    }
    /*
    columns 3
    rows 6
    */
}

/*SP*/
@media screen and (max-width: 767px) {
 #container {text-align:left;color: #fff;}

  #container img{
   text-align:center;
   margin: 0 4%;
  }

.itemA {
  text-align:left;
} 

 #container img{
     margin-top:30px
 }
    
}