@charset "UTF-8";
@media screen and (max-width: 980px) {
  #fv h2{ font-size: 3rem; width: 420px; }
  #fv h2 span.bg{ font-size: 3rem; width: 375px;}
  #fv h2 span small{ font-size: 3rem; }
  #fv h2 em{ font-size: 4.6rem;}
  #fv h2 span.kerning{ font-size: 3rem;}
  #fv .imgBox{ width: calc(100% - 430px);}
}
@media screen and (max-width: 850px) {
  header nav ul > li{ margin-right: 15px;}
  header h1{ margin-right: 10px;}
  header ul.cvBtn > li:first-child{ margin-right: 15px;}
  header ul.cvBtn .btnBox a{ width: 90px; font-size: 1.2rem; padding: 5px;}
  .showBr br{display: block;}

}
@media screen and (max-width: 768px) {
  .noneSP{ display: none!important;}
  .showSP{ display: block!important;}
  header{ position: static;}
  header nav{ display: none;}
  header ul.cvBtn{ display: none;}

  #fv::after{ display: none;}
  img.fv_img_sp{ width: 100%;}


  /*-- --*/
  section h2{ font-size: 2.4rem; margin-bottom: 50px;}
  section h2 span{ font-size: 1.2rem; margin-bottom: 12px;}

  .campBox{ padding-top: 40px; padding-left: 20px; padding-right: 20px;}
  .campBox .btnBox{ margin-top: 30px;}
  p.catch_txt{ font-size: 1.5rem; letter-spacing: 12px; margin-bottom: 10px;}
  h2.txt_under_dec span{
    font-size: 2.2rem;
    line-height: 1.5em;
    background: linear-gradient(transparent 60%, #FFE600 0%);
  }
  p.catch_txt::before,
  p.catch_txt::after{
    width: 15px;
    height: 14px;
    margin-right: 15px;
    background: url(../img/dec_item01_sp.png) no-repeat center center;
    background-size: contain;
  }
  p.catch_txt::after{ margin-right: 0; margin-left: 0;}
  .btnBox a{ max-width: 290px;}
  .campBox.pd01{ padding-bottom: 18px; padding-top: 55px;}
  .campBox.pd02{ padding-bottom: 32px; padding-top: 38px;}


  /*-- form --*/
  #form{ padding: 20px 20px 50px;}
  .form_s01{ max-width: 280px; }
  .form_s01 dl{ flex-flow: column;}
  .form_s01 dl > dt,
  .form_s01 dl > dd{ width: 100%;}
  .form_s01 dl > dt,
  .form_s01 dl > dt:nth-last-child(2){ margin-bottom: 8px;}
  .form_s01 dl > dd{ margin-bottom: 16px;}
  .form_s01 .btnBox{ margin-top: 32px;}
  .confirm .form_s01 dl > dd.txtArea{ width: 100%;}
  .complate p{ font-size: 1.6rem;}
  .linkBox{ margin-top: 50px;}
  .inquiry header{ height: 80px;}
  .confirm .form_s01 dl > dd.select01::after{ top: 12px;}


  /*-- header --*/
  header > div{ width: 100%; padding: 13px 15px; box-sizing: border-box;}
  header h1{ width: 178px;}
  img.umu_logo_h{ width: 25.6vw; min-width: 82px;}

  /*-- fv --*/
  #fv{ padding: 0 15px 0; height: auto;}
  #fv .flexBox{ margin-top: 10px;}
  #fv .introBox{ width: 100%; max-width: 100%;}
  #fv h2 picture img{ width: 90vw;}
  #fv .introBox > p{ font-size: 1.4rem; margin-bottom: 35px;}
  #fv h2,
  #fv h2 span.fs01{ font-size: 7.5vw; letter-spacing: 0.1em; width: 100%; }
  #fv h2 span.fs01{ text-align: left;}
  #fv h2 span.bg{ font-size: 7.5vw; letter-spacing: 0.13em; width: auto;}
  #fv h2 span.bg.pd02{ padding-left: 15px; padding-right: 15px;}
  #fv h2 span small{ font-size: 7.5vw; letter-spacing: 0; margin-bottom: 7px; display: inline-block;}
  #fv h2 em{ font-size: 10.6vw; letter-spacing: 0.09em;}
  #fv h2 span.kerning{ font-size: 7.8vw; letter-spacing: 0.128em;}
  #fv h2 span.kerning.k01{ letter-spacing: -0.45em;}


  /*-- service --*/
  #service{ padding: 0 0 48px; margin-top: 25px;}
  #service .inbox{ padding: 10px 20px;}
  #setp{ padding-bottom: 25px; padding-top: 25px;}
  #setp h4 > span{ margin-bottom: 20px; font-size: 1.8rem;}
  dl.dl_step{ max-width: 278px; margin: 0 auto;}
  dl.dl_step > dt{ font-size: 1.6em; width: 80px; text-align: center; padding-top: 12px;}
  dl.dl_step > dd{ width: calc(100% - 80px); padding: 19px 15px;}
  dl.dl_step > dd > em{ font-size: 1.4rem;}
  dl.dl_step > dd,
  dl.dl_step > dd > span{ font-size: 1.2rem;}
  dl.dl_step > dt::after{ bottom: -12px;}
  ul.list_txt{ flex-flow: column; margin-bottom: 25px; margin-top: 40px;}
  ul.list_txt > li{ width: 100%; margin-right: 0; font-size: 1.6rem; margin-top: 40px;}
  ul.list_txt > li:first-child{ margin-top: 0;}
  .t_style01{ font-size: 2.4rem;}
  img.app_img01{ max-width: 280px;}
  img.title_img01{ max-width: 240px;}
  section#service h2{ padding-bottom: 35px;}
  #service .mg01{ margin-top: 30px;}
  p.txt01{ font-size: 1.4rem; text-align: left; text-align: justify; width: 275px; margin-left: auto; margin-right: auto;}

  /*-- prof --*/
  #prof{ padding-top: 25px; padding-top: 25px;}
  #prof .flexBox{ display: block;}
  #prof .flexBox > .txtBox > p.sub_t{ text-align: center;}
  #prof .flexBox > .txtBox > h3.name{ text-align: center;}
  #prof .flexBox > .txtBox > p{ font-size: 1.2rem; max-width: 290px; margin: 0 auto;}
  #prof .flexBox > .txtBox > h3.name > span{ font-size: 1.6rem; margin-bottom: 10px;}
  #prof .flexBox > .imgBox{ display: none;}
  img.sp_img01{ max-width: 240px; margin: 0 auto 20px;}
  .comment{ flex-flow: column; padding: 15px 20px 27px; max-width: 280px; margin: 35px auto 0;}
  .comment > img{ margin-left: 0; width: 23px; height: 19px; margin-bottom: 10px;}
  .comment > p{ font-size: 1.2rem;}


  /*-- point --*/
  #point{ padding-top: 50px; padding-bottom: 10px;}
  section#point h2{ margin-bottom: 42px;}
  ul.list_icon{ flex-flow: column;}
  ul.list_icon > li{ width: 100%; margin-bottom: 38px;}
  ul.list_icon > li > p{ font-size: 1.4rem; font-weight: 600;}
  img.icon{ width: 34px; margin-bottom: 14px;}

  /*-- faq --*/
  #faq{ padding: 50px 20px 32px;}
  ul.list_waku{ flex-flow: column;}
  ul.list_waku > li{ width: 100%; margin-top: 16px; padding: 24px 20px; min-height: auto;}
  ul.list_waku > li:nth-child(2){ margin-top: 16px;}
  ul.list_waku > li > h3{ padding-left: 40px;}
  ul.list_waku > li > h3::before{ left: 0;}

  /*-- footer --*/
  footer nav ul{ max-width: 230px;}
  footer nav ul > li{ margin-right: 24px; margin-bottom: 28px;}
  footer nav ul > li:nth-child(2){ margin-right: 0;}


  /*-- page --*/
  .wrap{ padding-top: 0;}

  /*-- slide --*/
  .loop{ width: 900%; margin-top: 20px;}
  .slideBox{ padding-bottom: 20px;}
  .slideBox h3{ font-size: 1.6rem;}

  /*-- moveBox --*/
  .moveBox{ padding-bottom: 0px;}
  .moveBox iframe { width: 90%; height: 50vw; min-height: 163px; min-width: 290px;}
}

@media screen and (max-width: 400px) {
  #fv h2 span.bg{ padding-left: 2.5vw; padding-right: 2.5vw;}
  #fv h2 span.bg.pd02{ padding-left: 3vw; padding-right: 4vw;}
  #fv h2 span small{ padding-left: 2px; }
  #fv h2, #fv h2 span.fs01{ letter-spacing: 0.08em;}
  /*
  #fv h2,
  #fv h2 span.fs01{ font-size: 2.4rem; letter-spacing: 3.2px; width: 320px; }
  #fv h2 span.bg{ font-size: 2.4rem; letter-spacing: 3.2px; width: 280px;}
  #fv h2 span small{ font-size: 2.4rem; letter-spacing: 3.2px; }
  #fv h2 em{ font-size: 3.4rem; letter-spacing: 3.2px;}
  #fv h2 span.kerning{ font-size: 2.5rem; letter-spacing: 3.2px;}
  #fv h2 span.kerning.k01{ letter-spacing: -11.8px;}
  */
}

@media screen and (max-width: 330px) {
}