body{
  //font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}

a {
  color:inherit;
  text-decoration:none
}

a:link:hover,
a:link:focus{
  text-decoration:underline
}


.site-header h1{
  font-size:20pt;
  display:table;
  height:100%;
  margin:0;
  padding:0;
}

.text-blue{
  color:#0059AA;
  font-weight:bold;
  text-shadow: 1px 1px 1px rgba(200,200,200,0.6);
}

.text-orange{
  font-weight:bold;
  font-size:20pt;
  color:orange;
}
.main-title{
  display:block;
  padding:0 15px
}
.eyecatch-text{
  color:#0a9e0a;
  font-weight:bold;
  text-shadow: 1px 1px 1px rgba(240,240,240,0.6);
  font-size:32pt;
  padding:0 15px;
  font-family: "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic UI", "MS PGothic", sans-serif;

}

.d-cell{
  display:table-cell
}

.align-center{
  text-align:center
}

.probrem-area{
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  padding:80px 0;
  text-align:center
}

.probrem1{
  background-image:url(../img/image06-1b.png);
}

.probrem2{
  background-image:url(../img/image07-2b.png)
}

.probrem3{
  background-image:url(../img/image08-3b.png)
}

.probrem-area a{
  text-decoration: none;
}

.probrem-area a:hover,
.probrem-area a:focus{
  text-decoration: underline;
  color:rgb(255, 199, 95);
}


.text-suggestion{
  font-size:24pt;
  margin:10px auto;
  text-align:center;
}

h3{
  font-size:120%
}

.main-image-area{
  background-image:url(../img/image03.jpg);
  background-size:100%;
  height:640px;
  background-repeat:no-repeat;
  padding:30px 0;
}

.main-title{
  width:100%;
}

.main-title img{
  width:80%;
}


.main-image-text{
  width:70%
}

.lattice-nm{
  background-image:url(../img/image05.png);
  background-size:750px;
  background-position: center top;
}

.lattice-blue{
  background-image:url(../img/image18.png);
  background-size:750px;
  background-position: center top;
}

.tab-ui-sentence-area{
  border-radius: 3px 10px 3px 0;
  box-shadow:3px 0px 5px rgba(60,60,60,0.5);
  background-color:white;
  padding:10px 10px 35px 10px;
  height:calc(100% - 102px);
  font-size:16pt
}

.tab-ui-sentence-area h3{
  font-size:135%;
  text-align:center;
  font-family:inherit;
  line-height:2.6;
  font-weight:bold;
}

.tab-ui-sentence-area h3.title-1{
  color:#F6AB00
}

.tab-ui-sentence-area h3.title-2{
  color:#A9CE05
}

.tab-ui-sentence-area h3.title-3{
  color:#00ADA9
}

.tab-ui-sentence-area h3.title-4{
  color:#E85369
}

.pad0 div{
  padding:0;
}

div.button-area{
  text-align:right
}

a.detail{
  line-height:2.2;
  padding:0 10px;
  color:white;
  font-weight:bold;
  font-size:80%
  border-radius:5px;
}

a.detail.detail1{
  border:3px solid #F6AB00;
  background-color:#F6AB00;

}
a.detail.detail2{
  border:3px solid #A9CE05;
  background-color:#A9CE05;

}
a.detail.detail3{
  border:3px solid #00ADA9;
  background-color:#00ADA9;

}
a.detail.detail4{
  border:3px solid #E85369;
  background-color:#E85369;

}

main span.mail a{
  display: inline-block;
  border: 1px solid rgb(17,140,207);
  background-color: rgb(17,140,207);
  color:white;
  border-radius:3px;
  padding: 0 15px;
  line-height: 2.6;
  font-size: 26pt;
  margin:60px auto 30px;
  font-weight:bold;
}

main span.mail a:hover,
main span.mail a:focus{
  text-decoration:none;
  color:white;
  opacity:0.6
}

footer{
  padding:20px 0;
}

footer h3{
  font-size:140%
}

footer span{
  display:block
}

footer .company-contact .mail{
  font-size:18pt;
}

footer .company-info{
  font-size:10.5pt
}

footer .company-contact h3{
  font-size:12pt;
}

footer .company-contact .tel{
  font-size:24pt;
}

footer .company-contact .mail{
  font-size:18pt;
}



.sm-visible{
  display:none;
  visibility:hidden;
  opacity:0;
}

span.icon{
 display: inline-block;
 width: 30px;
 height: 20px;
 vertical-align: baseline;
 text-align: center;
 line-height: 1.6;
 font-size: 160%;
}

.modal-content {background-color:unset;}

@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%;
  }

  .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);
  }
}
@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;
  }
}