/* CSS Document */


@media screen and (max-width:767px){
	
}
@media screen and (min-width:768px) and (max-width:1099px){
  /*TB*/
  /*TB*/
  .m_top60{
    margin-top: 30px !important;
  }
  /*pageheader*/
  .div.pageheader{
    min-height: 100px;
  }
  div.pageheader div.video{
    height: 300px;
    width: 100%;
  }
  div.pageheader div.video::before{
    background-image: url(../img/pattern_01.png);
  }
  div.pageheader div.video video{
    width: 100vw;
  }
  section.contents.system::before{
    top: -200px;
    font-size: 60px;
    line-height: 1em;
  }
  header + * {
    margin-top: -70px;
  }
  /*ページャー*/
  div.pageheader div.inner{
    padding: 0 20px 10px;
    box-sizing: border-box;
    width: 100%;
  }
  /*コンテンツ*/
  .contents.system{
    padding: 60px  0!important;
  }
  .contents.system h2.title{
    font-size: 1.25rem;
    padding-bottom: 30px;
    text-align: center;
  }
  .contents.system > .text{
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 2.5rem;
  }
  /*リスト*/
  .type_01{
    width: 640px;
    margin: 1em auto 0 auto;
  }
  .type_01 li{
    font-size: 16px;
  }
  /**/
  .contents.systemexample{
    padding: 60px 0;
  }
  .contents.systemexample .subtitle{
    font-size: 24px;
    text-align: center;
    line-height: 30px;
    padding: 60px 0 50px 0;
  }
  .contents.systemexample .textwrap{
    width: 640px;
    margin: 0 auto;
  }
  .contents.systemexample .textwrap .text span{
    font-size: 20px;
  }
  .contents.systemexample .text{
    width: 640px;
    line-height: 2.5em;
    font-size: 16px;
    margin: 0 auto;
    flex-wrap: wrap;
    flex-direction: row !important;
  }
  .contents.systemexample .animation.type_02{
    width: 200px;
  }
  /*下のシステムで出来るリスト*/
  .listbox{
    gap:12px;
    width: 640px;
    margin: 1rem auto 1rem;
  }
  .listbox > dl{
    width: calc((640px / 3) - 8px);    
    height: calc((500px / 3) - 8px);
    justify-content: flex-start !important;
  }
  .listbox > dl dt{
    font-size: 16px;
  }
}
@media (orientation: landscape) and (max-width:568px){
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
}
@media screen and (min-width:1100px){
  /*共通*/
  .m_top60{
    margin-top: 60px;
  }
  .m_top40{
    margin-top: 40px;
  }
  /*コンテンツ*/
  .contents.system{
    padding-bottom: 60px !important;
  }
  .contents.system > .text{
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 2.5rem;
  }
  /*リスト*/
  .type_01{
    width: 640px;
    margin: 1em auto 0 auto;
  }
  .type_01 li{
    font-size: 16px;
  }
  /**/
  .contents.systemexample{
    padding: 60px 0;
  }
  .contents.systemexample .subtitle{
    font-size: 24px;
    text-align: center;
    line-height: 30px;
    padding: 60px 0 50px 0;
  }
  .contents.systemexample .textwrap{
    width: 640px;
    margin: 0 auto;
  }
  .contents.systemexample .textwrap .text span{
    font-size: 20px;
  }
  .contents.systemexample .text{
    width: 640px;
    line-height: 2.5em;
    font-size: 16px;
    margin: 0 auto;
    flex-wrap: wrap;
    flex-direction: row !important;
  }
  .contents.systemexample .animation.type_02{
    width: 200px;
  }
  /*下のシステムで出来るリスト*/
  .listbox{
    gap:12px;
    width: 640px;
    margin: 1rem auto 1rem;
  }
  .listbox > dl{
    width: calc((640px / 3) - 8px);    
    height: calc((500px / 3) - 8px);
    justify-content: flex-start !important;
  }
  .listbox > dl dt{
    font-size: 16px;
  }
}