@charset "UTF-8";

/********************************************
screens smaller than 690
********************************************/

@media only screen and (min-width:690px) and (max-width:1120px) {
    /********************************************
screens smaller than 690
********************************************/
  
  .subtitle03_sample01 {
    width: 96%;
}

    /********************************************
layout
********************************************/
.image-grid li {
    width: 25%;
    height: auto;
    padding: 2%;
    box-sizing: border-box;
}
.section,
.section02,
.section_cream,
.section_cream_in,
.section_cream03_in {
    max-width: 100%;
    box-sizing: border-box;
}
.flow_contact_deliver {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}
.box2_left {
    max-width: 49%;
    margin-right: 2%;
}
.box2_right {
    max-width: 49%;
}
    
.controls ul.splitter li {
    width: 24%;
    height: auto;
    margin: 0 .5%;
}

.sales_promotion_box_left {
    width: 68%;
    float: left;
    margin-right: 2%;
}

.sales_promotion_box_right {
    width: 30%;
    float: right;
}
.sales_promotion_list .list_in {
    float: left;
    display: block;
    width: 19.2%;
    height: 100px;
    margin: 1% 0 1% 1%;
    box-sizing: border-box;
}
.sales_promotion_list .list_in:first-child {
    margin: 1% 0;
}
  

.voice_box02_left01 {
    width: 30%;
    margin-right: 2%;
}
.voice_box02_right01 {
    width: 68%;
}
.voice_box02_left02 {
    width: 68%;
    margin-right: 2%;
}
.voice_box02_right02 {
    width: 30%;
}
.voice_box02_left01 img,
.voice_box02_right02 img {  
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.trouble_box {
    width: 48%;
    height: auto;
    margin-right: 4%;
    box-sizing: border-box;
}
.trouble_box_area {
    height: 250px;
}
.trouble_box01,
.trouble_box02,
.trouble_box03,
  .trouble_box04 {
    height: 250px;
  }
.trouble_box01_hover,
.trouble_box02_hover,
.trouble_box03_hover,
  .trouble_box04_hover {
    height: 250px;
  }
.trouble_box01_hover a,
.trouble_box02_hover a,
.trouble_box03_hover a,
.trouble_box04_hover a {
    height: auto;
    box-sizing: border-box;
}
    .banner_four_list {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
  
    /********************************************
screens smaller than 690
********************************************/
}