.main-image-area{
  height:620px;
}

.probrem-text{
  vertical-align:middle;
  margin:0;
  padding:0;
}

.probrem-text span{
  background-color: rgba(250,250,250,0.4);
  line-height: 2.6;
  font-size: 26pt;
  display: block;
  width: 100%;
  text-shadow: 1px 2px 2px rgba(30,30,30,0.4);
  font-weight: bold;
  font-family: "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic UI", "MS PGothic", sans-serif;
}
p{
  font-size:16pt
}

.melit-area{
  margin-bottom:60px
}

.melit-area h2{
  font-weight:bold;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}

.melit-area h3{
  font-weight:bold;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
  font-size:26pt;
  text-shadow:1px 1px 3px rgba(20,20,20,0.4)
}

.melit1-title{
  color:#F6AB00;
}
.melit2-title{
  color:#A9CE05;
}
 .melit3-title{
  color:#00ADA9;
}
.melit4-title{
  color:#E85369;
}

@media screen and (max-width:1399px){
  .main-image-area{
    height:580px
  }
}

@media screen and (max-width:1199px){
  .site-header h1{
    font-size:18pt
  }
  
  .eyecatch-text{
    font-size:32pt
  }

  .tab-ui-sentence-area h3{
    font-size:125%;
  }
  .main-image-area{
    height:440px
  }
}

@media screen and (max-width:991px){
  .site-header h1{
    font-size:13pt;
  }
  .main-image-area{
    height:340px;
  }
  .main-title img{
    width:80%;
  }
  .eyecatch-text{
    font-size:20pt
  }

  .text-orange{
    font-size:16pt
  }

  .text-suggestion{
    font-size:20pt;
  }  
  
  .tab-ui-sentence-area{
    height:calc(100% - 72px);
    font-size:14pt
  }
}
@media screen and (max-width:767px){
  .site-header h1{
    font-size:12pt;
  }
  .main-image-area{
    height:260px;
    padding:0
  }
  .main-title{
    padding:0
  }
  .main-title img{
    width:100%;
  }
  
.probrem-text span{
  font-size:22pt;
  line-height:1.7
}  
  p{
    font-size:14pt;
  }

  .eyecatch-text{
    font-size:16pt;
    padding:0
  }

  .text-orange{
    font-size:12pt
  }
    
  .text-suggestion{
    font-size:18pt;
  }  
  .tab-ui-sentence-area{
    height:calc(100% - 48px);
  }
  .melit-area h3{
    font-size:18pt;
  }
  
  
}
@media screen and (max-width:576px){
  .site-header{
  
  }
  .site-header h1{
    font-size:16pt;
    margin:5px auto
  }

  .main-image-area{
    height:260px
  }
  .main-image-text{
    width:100%
  }
  
  .eyecatch-text{
    font-size:16pt;
  }
  
  .probrem-area{
    padding:60px 0;
  }
  
  .tab-ui-sentence-area h3{
    font-size:120%;
    line-height:1.4;

  }
  .text-suggestion{
    text-align:left;
  }  
  
  .tab-ui-sentence-area{
    height:calc(100% - 64px);
  }
  
  h2.melit{
    color:white;
    font-weight:bold;
    background-color:rgb(17,140,207);
    line-height:2.6
  }
  
  .sm-visible{
    display:inherit;
    visibility:visible;
    opacity:1;
  }
  
  .sm-invisible{
    display:none;
    visibility:hidden;
  }
  
  .sm-mg0{
    margin:0 auto;
  }
}