body{
  font-family: "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic UI", "MS PGothic", sans-serif;
}

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

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

.container{
  max-width:920px;
}

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


.d-cell{
  display:table-cell
}

.align-center{
  text-align:center
}

h2{
  margin:1.5rem auto

}

ul,ol{
  padding-left:1.5rem
}

.pad0 div{
  padding:0;
}

.bold{
  font-weight:bold
}

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

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 12px;
  line-height: 2.6;
  font-size: 16pt;
  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;
}

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

main div.container{
  padding:15px 15px;
}

main div.container::nth-child(2n-1){
  //background-color:#fcfcfc;
}

span.refer-text{
  display:block;
  font-size:80%;
  text-align:right
}

span.sub-title{
  font-size:85%;
  display:block;
  text-align:center;
}

.red{
  color:red
}

.f120{
  font-size:1.2rem
}

.f135{
  font-size:1.35rem
}

.f150{
  font-size:1.5rem
}

.f175{
  font-size:1.75rem
}

.container .row{
  margin-bottom:15pt;
}

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