@charset "UTF-8";
@media screen and (min-width: 768px),print {  /* 3枚表示のbxslider
-------------------------------------*/
  .slider-3mai-Box { overflow: hidden; position: relative; width: 100%; background: url('../images/index/h-bg.jpg') top center; padding-bottom: 20px; }
  .slider-3mai-Box .slider-3mai { position: relative; left: 50%; width: 3020px; margin-left: -1510px; }
  .slider-3mai-Box .slider-3mai li { width: 1000px !important; }
  .slider-3mai-Box .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; outline: 0; width: 60px; height: 65px; text-indent: -9999px; z-index: 9999; }
  .slider-3mai-Box .bx-wrapper .bx-prev { left: 950px; background-image: url(../images/index/bx-l.png); background-position: 0 0; }
  .slider-3mai-Box .bx-wrapper .bx-next { right: 950px; background-image: url(../images/index/bx-r.png); background-position: 0 0; }
  .top-img {background: url(../images/index/h-bg.jpg) top center;}
  .top-img img {display: block;  margin: 0 auto; width: 1100px;}
  /* concept -------------------------------------*/
  #concept{ width: 100%; margin: 0 auto; background: url('../images/index/concept-bg.jpg') top center; padding: 30px; }
  #concept .h-list{ width: 1405px; margin: 0 auto ; }
  #concept .h-list li{ float: left; margin-right: 5px; }
  #concept .h-list li:last-child{ float: left; margin-right: 0px; }
  #concept .concept-inner{ width: 1100px; margin: 0 auto ; background: url('../images/index/concept-inner-bg.jpg') top center no-repeat, url('../images/index/concept-inner-bg-btm.jpg') bottom center no-repeat, url('../images/index/concept-inner-bg-center.jpg') top left repeat-y; padding: 55px 0 50px; position: relative; top: -25px; }
  #concept .concept-inner ul{ width: 1145px; margin: 0 auto 30px -20px; }
  #concept .concept-inner ul li{ float: left; margin-right: 40px; }
  #concept .concept-inner ul li:last-child{ float: left; margin-right: 0px; }
  #concept .concept-inner h3{ text-align: center; margin-bottom: 20px; }
  #concept .concept-inner .concept-txt{ text-align: center; margin-bottom: 35px; color: #727171; }
  #concept .concept-inner .point-right{ position: absolute; top: 35px; right: 110px; }
  #concept .concept-inner .point-left{ position: absolute; top: 50px; left: 80px; }
  #concept .concept-inner .point-ttl{ position: absolute; top: -10px; left: 350px; }
  #concept .concept-inner .concept-link{ text-align: center; width: 560px; margin: 0 auto; }

  /* policy -------------------------------------*/
  #policy{ width: 1105px; margin: 0 auto; padding: 75px 0 80px; }
  #policy li{ float: left; margin-right: 40px; text-align: center; font-size:18px;  }
  #policy li p{ color: #f39700; font-weight: bold; }
  #policy li:last-child{ float: left; margin-right: 0px;  }
  #policy h4{ text-align: center; margin-bottom: 20px; font-size: 22px; font-weight: bold; color: #453728; }
  #policy h4:before { content: "＼"; padding: 0 50px 0 0 ; position: relative; top: 10px; }
  #policy h4:after { content: "／"; padding: 0 0 0 50px; position: relative; top: 10px;}
  #policy .ttl-txt{ text-align: center; margin-bottom: 20px; }
    /* style -------------------------------------*/
  #style{ width: 100%; margin: 0 auto; padding: 30px 0 50px; background: url('../images/index/style-bg.jpg') top center ; }
  #style .inner-bg{ width: 1200px; margin: 0 auto; padding:0 50px ; background: url('../images/index/style-inner-bg.jpg') top 80px center no-repeat; }
  #style .inner-bg .left-bx{ float: left; width: 240px; padding-top: 130px; margin-left: 50px; }
  #style .inner-bg .left-bx h5{ padding-left: 25px; margin-bottom: 30px; }
  #style .inner-bg ul{ float: right; }
  #style .inner-bg li{ float: left; width: 220px; margin-right: 20px; }
  #style .inner-bg li p{ background: #fff; padding: 20px 10px; font-size: 12px; }
  #style .inner-bg li:last-child{ float: left; width: 220px; margin-right: 0px; }

  /* cent-link -------------------------------------*/
  #cent-link{ width: 100%; margin: 0 auto; padding: 30px 0 50px; background: url('../images/index/cent-link-bg.jpg') top center ; }
  #cent-link ul{ width: 1005px; margin: 0 auto; }
  #cent-link li{ float: left; margin-right: 40px; text-align: center;  }
  #cent-link li:nth-child(2){ float: left; margin-right: 0px; text-align: center; padding-top: 14px;  }

  /*  top-contact-------------------------------------*/
  #top-contact{ background: #f08200; padding: ;  }
  #top-contact .form-link{ position: relative; width: 1460px; margin: 0 auto; }
  #top-contact figure{ text-align: center; }
  #top-contact .next{ text-align: center;  position: relative; top: -20px; z-index: 99;  }
  #top-contact .link{ text-align: center;  position: relative; top: -70px; z-index: 99;  }
  #top-contact .abs{ position: absolute;  bottom: 80px; right: 300px; z-index: 1000; }
  #top-contact{display: none;;  }

  /*  f-link-bx-------------------------------------*/
.f-link-bx{ width: 1100px ; margin: 0 auto -60px; position: relative; top: -125px; background: url('../images/index/f-link-bx-bg.jpg ') top center ; padding: 50px ; }
.f-link-bx li{ float: left; margin-right: 20px; text-align: center; }
.f-link-bx li figure{ margin-bottom: 15px; }
.f-link-bx li:last-child{ float: left; margin-right: 0px; }
.f-link-bx li:nth-child(2){ float: left; margin-top: -23px; }

  /*  seo-------------------------------------*/
#seo-zone{ width: 1100px; margin: 0 auto 70px; }
#seo-zone .left{ float: left; }
#seo-zone .right{ float: right; }
#seo-zone .seo{ width: 530px; border: 1px solid #e2e2e2; padding: 40px 50px ;  }
#seo-zone .seo p{ font-size: 12px; color: #727171; }
#seo-zone .seo h6{ text-align: center; margin-bottom: 25px; }
#seo-zone .seo .gree-txt{ text-align: center; font-size: 18px; color: #000; margin-bottom: 15px; }



  /* case -------------------------------------*/
  #case { background: url('../images/index/case-bg.jpg') top center; padding-top: 48px; padding-bottom: 48px; }
  #case .Box { width: 1100px; margin-left: auto; margin-right: auto; }
  #case .ttl { margin-bottom: 24px; }
  #case .ttl-Box { margin-bottom: 60px; position: relative; }
  #case .system-list { margin-bottom: -10px; }
  #case .system-list a:hover { text-decoration: none; }
  #case .system-list a:hover .system-ttl { text-decoration: underline; }
  #case .system-list ul { padding: 60px 0 0; }
  #case .system-list li { width: 260px; margin-right: 20px; margin-bottom: 50px; }
  #case .system-list li:nth-child(4n) { margin-right: 0; }
  #case .system-list .system-pic { width: 260px; height: 225px; }
  #case .system-list .system-pic img { width: 260px; height: 225px; }
  #case .system-list .system-pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
  #case .system-list .system-ttl { font-family: Meiryo; color: #453728; font-size: 13px; font-weight: 400; line-height: 1.65; padding: .5em; letter-spacing: .5px; }
  #case .system-icon01 a{ position: absolute; bottom: 20px; right: 0px; background: #443526; width: 240px; padding: 15px 0 ; color: #fff; text-align: center; }
  #case .system-icon02 a{ position: absolute; bottom: 20px; right: 280px; background: #443526; width: 240px; padding: 15px 0 ; color: #fff; text-align: center; }
  /* voice -------------------------------------*/
  #voice { background: url('../images/index/voice-bg.jpg') top center; }
  #voice .Box { width: 1200px; margin-left: auto; margin-right: auto; padding-top: 30px; padding-left: 48px; padding-right: 48px; padding-bottom: 72px; }
  #voice .ttl-Box { position: relative; top: 50px; left: 130px; }
  #voice .rel-Box { position: relative;  }
  #voice .system-list a:hover { text-decoration: none; }
  #voice .system-list a:hover .system-ttl { text-decoration: underline; }
  #voice .system-list li { width: 1200px; margin: 0 auto; background: #fff; padding-left: 150px; }
  #voice .system-list li article{ position: relative; top: 85px;  }
  #voice .system-list .system-ttl { width: 360px;font-size: 18px; line-height: 1.65; font-weight: bold; }
  #voice .system-list .system-pic { width: 360px; height: 270px; margin-bottom: 12px; float: right; position: relative; top: -120px; right: 145px; outline: 1px solid #000; border: 10px solid #fff; }
  #voice .system-list .system-pic img { width: 340px; height: 252px; }
  #voice .system-list .system-pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
  #voice .system-list .system-icon-set { margin-left: -70px;}
  #voice .system-list .system-icon01 { background: #443526; width: 240px; color: #fff; text-align: center; float: left;  }
  #voice .system-list .system-icon02 { background: #443526; width: 240px; color: #fff; text-align: center; float: left; margin-left: 20px; }
  #voice .system-list .system-icon01 a,
  #voice .system-list .system-icon02 a { color: #fff;padding: 15px 0 ; display: block;}
  #voice .system-list .system-customer { color: #44a4b8; font-size: 14px; font-weight: 400; line-height: 1.65; }
  #voice .system-list .system-customer .system-area { display: inline-block; margin-right: 1em; padding-left: 1.3em; text-indent: -1.3em; margin-bottom: 4px; }
  #voice .system-list .system-customer .system-area:before { content: url('../images/common/address-bef.jpg'); margin-right: .3em; }
  #voice .system-list .system-customer .system-name { display: inline-block; margin-bottom: 4px; }
  #voice .system-list .text-set { float: left; width: 360px;}
  /* web-magazine -------------------------------------*/
  #sns #blog { width: 490px; background: #fff; padding: 40px 30px 20px; }
  #sns #blog a:hover { text-decoration: none; }
  #sns #blog a:hover .system-ttl { text-decoration: underline; }
  #sns #blog li { padding-bottom: .8em; margin-bottom: 1em; border-bottom: 1px dotted #4c4c4c; width: 100%;	}
  #sns #blog li:last-child { border-bottom: none; margin-bottom: 0; }
  #sns #blog li img{ max-width: 80px; max-height: 80px; width: auto; height: auto; float: left; margin-right: 22px; }
  #sns #blog .system-scr-Box { box-sizing: border-box; overflow-y: scroll; transform: translateZ(0); padding: .8em; height: 299px; background-color: #fff; }
  #sns #blog .system-scr-Box .system-date { color: #44a3b8; font-size: 12px; margin-bottom: .3em; }
  #sns #blog .system-scr-Box .system-date:before { content: url('../images/common/address-bef.jpg'); margin-right: .1em; }
  #sns #blog .system-scr-Box .system-ttl { font-family: Meiryo; color: #383231; font-size: 14px; font-weight: 400; line-height: 1.8; padding-left: .1em; padding-right: .1em; }
  /* sns -------------------------------------*/
  #sns { background-color: #e0e0da; padding-top: 64px; padding-bottom: 32px;  }
  #sns .mb-01 { margin-bottom: 120px; }
  #sns .Box { width: 1000px; margin-left: auto; margin-right: auto; }
  #sns .Box h2{ height: 35px; padding-top: 10px; }
  #sns .ttl-Box { margin-bottom: 20px; padding-left: .5em; background: url('../images/index/sns-ttl-bg.jpg') bottom left repeat-x; padding-bottom: 23px; }
  #sns .ttl-Box span{ background: #443526; width: 150px; padding: 10px 0; text-align: center; color: #fff; font-weight: bold; }
  #sns .ttl-Box .ttl .en { margin-right: 1em; }
  #sns .ttl-Box .ttl .jp { line-height: 1; }
  #sns #news { width: 490px; background: #fff; padding: 40px 30px 20px; }
  #sns #news a:hover { text-decoration: none; }
  #sns #news a:hover .system-ttl { text-decoration: underline; }
  #sns #news li { padding-bottom: .8em; margin-bottom: 1em; border-bottom: 1px dotted #4c4c4c; width: 100%; }
  #sns #news li:last-child { border-bottom: none; margin-bottom: 0; }
  #sns #news li img{ max-width: 80px; max-height: 80px;width: auto; height: auto; float: left; margin-right: 22px; }
  #sns #news .system-scr-Box { box-sizing: border-box; overflow-y: scroll; transform: translateZ(0); padding: .8em; height: 299px; background-color: #fff; }
  #sns #news .system-scr-Box .system-date { color: #44a3b8; font-size: 12px; margin-bottom: .3em; }
  #sns #news .system-scr-Box .system-date:before { content: url('../images/common/address-bef.jpg'); margin-right: .1em; }
  #sns #news .system-scr-Box .system-ttl { font-family: Meiryo; color: #383231; font-size: 14px; font-weight: 400; line-height: 1.8; padding-left: .1em; padding-right: .1em; }
  #sns #facebook { width: 490px; }
  /* instagram -------------------------------------*/
  #instagram { width: 1100px; margin: 0 auto 80px; position: relative; clear: both;}
  #instagram .instagram-ttl { position: absolute; left: 50%; top: 50%; margin-top: -80px; margin-left: -80px;}
  #instagram .instagram li{width: 136px;height: 136px;border-bottom: 1px solid #fff;border-right: 1px solid #fff; float: left; text-align: center; overflow: hidden;}
  #instagram .instagram li img{ width: 100%; height: auto;}
  }

@media screen and (max-width: 767px) { /* event -------------------------------------*/

  #concept{ width: 100%; margin: 0 auto; background: url('../images/index/concept-bg.jpg') top center; padding: 3% 0; }
  #concept .h-list{ width:100%; }
  #concept .h-list li{ float: left; margin-right: 5px; }
  #concept .h-list li:last-child{ float: left; margin-right: 0px; }
  #concept .concept-inner{ width:97%; margin: 0 auto ; background: url('../images/index/concept-inスキーマオルグとはner-bg.jpg') top center no-repeat, url('../images/index/concept-inner-bg-btm.jpg') bottom center no-repeat, url('../images/index/concept-inner-bg-center.jpg') top left repeat-y; padding: 10% 3%; position: relative; top: -20px; }
  #concept .concept-inner ul{ width:95%; margin: 0 auto ; }
  #concept .concept-inner ul li{ float: left; width: 47.5%; margin-right: 5%; margin-bottom: 7%; }
  #concept .concept-inner ul li:nth-child(even){ float: left; margin-right: 0px; }
  #concept .concept-inner h3{ text-align: center; margin-bottom: 20px; }
  #concept .concept-inner .concept-txt{ text-align: center; margin-bottom: 35px; color: #727171; }
  #concept .concept-inner .point-right{width: 20%; position: absolute; top: 10px; right: 15px; }
  #concept .concept-inner .point-left{width: 18%; position: absolute; top: 210px; left: 5px; }
  #concept .concept-inner .point-ttl{ position: absolute; width: 20%; top: -0.8%; left: 15%; }
  #concept .concept-inner .concept-link{ text-align: center; }
/* concept --------------------------------------------------------------------------------*/

  #policy{ width: 100%; margin: 0 auto; padding: 5%; }
  #policy li{ float: none;  text-align: center; font-size:18px; margin-bottom: 7%;  }
  #policy li p{ color: #f39700; font-weight: bold; }
  #policy li:last-child{ float: left; margin-right: 0px;  }
  #policy h4{ text-align: center; margin-bottom: 20px; font-size: 14px; font-weight: bold; color: #453728; text-align: center; }
  #policy h4:before { content: "＼"; padding: 0 5% 0 0 ; position: relative; top: 5px; }
  #policy h4:after { content: "／"; padding: 0 0 0 5%; position: relative; top: 5px;}
  #policy .ttl-txt{ text-align: center; margin-bottom: 15px; }
/* policy --------------------------------------------------------------------------------*/

  #style{ width: 100%; margin: 0 auto 0; padding: 0% 0 3%; background: url('../images/index/style-bg.jpg') top center ; }
  #style .inner-bg{ width:100%; margin: 0 auto; padding:0 0 ;  }
  #style .inner-bg .left-bx{ float: none; width:100%;  }
  #style .inner-bg .left-bx h5{ width: 100%; margin-bottom: 7%; }
  #style .inner-bg .left-bx h5 img{ width: 100%; }
  #style .inner-bg ul{ float: none; width: 95%; margin: 0 auto 34px; }
  #style .inner-bg li{ float: left; width:33.3%;  }
  #style .inner-bg li p{ background: #fff; padding: 20px 10px; font-size: 12px; }
  #style .inner-bg .sp{ width: 85%; margin: 0 auto 10%; }
/* style --------------------------------------------------------------------------------*/

  #cent-link{ width: 100%; margin: 0 auto; padding: 30px 0 50px; background: url('../images/index/cent-link-bg.jpg') top center ; }
  #cent-link ul{ width: 90%; margin: 0 auto; }
  #cent-link li{ width: 80%; margin: 0 auto 10%; }
  #cent-link li p{ font-size: 12px; text-align: center; }
  #cent-link li:nth-child(2){  width: 80%; margin: 0 auto; }
/* cent-link --------------------------------------------------------------------------------*/
  #top-contact{ width: 100%; margin: 0 auto 7%; display: none;}
/* cent-link --------------------------------------------------------------------------------*/

.f-link-bx{ width: 100% ; margin: 0 auto 5%; position: relative ; background: url('../images/index/f-link-bx-bg.jpg ') top center ; padding: 5% 5%;}
.f-link-bx li{ float: none; text-align: center; margin-bottom: 6%; }
.f-link-bx li figure{  }
.f-link-bx li:last-child{ float: left; margin-right: 0px; }
.f-link-bx li:nth-child(2){ float: left;}
/* f-link-bx --------------------------------------------------------------------------------*/

#seo-zone{ width:95%; margin: 0 auto 5%; }
#seo-zone .left{ float: none; }
#seo-zone .right{ float:none; width: 85%; margin: 0 auto; }
#seo-zone .seo{ width:100%; margin-bottom: 5%; border: 1px solid #e2e2e2; padding: 5% ;  }
#seo-zone .seo p{ font-size: 12px; color: #727171; }
#seo-zone .seo h6{ text-align: center; margin-bottom: 2%; }
#seo-zone .seo .gree-txt{ text-align: center; font-size: 18px; color: #000; margin-bottom: 3%; }
/* f-link-bx --------------------------------------------------------------------------------*/

  #event { padding-top: 5.5%; padding-bottom: 5%; background-image: url(../images/index/event-bg.jpg); }
  #event .ttl-01 { margin-bottom: 4.5%; }
  #event .btn { display: none; }
  #event .sp-btn { width: 73.86%; margin-left: auto; margin-right: auto; }
  #event .system-list { width: 69.86%; margin-left: auto; margin-right: auto; margin-bottom: 5%; }
  #event .system-list a .system-icon img:hover { -ms-filter: "alpha( opacity=100 )"; filter: alpha(opacity=100); opacity: 1.0; }
  #event .system-list a:hover { text-decoration: none; }
  #event .system-list a:hover .system-ttl-02 { text-decoration: underline; }
  #event .system-list li:nth-child(n+2) { display: none; }
  #event .system-list li:nth-child(3n) { margin-right: 0; }
  #event .system-list .system-pic-Box { margin-bottom: 16px; }
  #event .system-list .system-pic { text-align: center; position: relative; }
  #event .system-list .system-pic img { max-width: 100%; max-height: 230px; }
  #event .system-list .system-pic .system-icon { left: 0; top: 6px; position: absolute; z-index: 100; }
  #event .system-list .system-pic .system-icon-02 { right: 0; bottom: 0; position: absolute; z-index: 100; }
  #event .system-list .system-ttl-01 { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #ffffff; font-size: 18px; font-weight: 700; line-height: 1.5; padding: 9px 12px; text-align: center; }
  #event .system-list .system-ttl-01 .l-txt { display: inline-block; text-align: left; }
  #event .system-list .system-ttl-01.icon01 { background-color: #deaf5e; }
  #event .system-list .system-ttl-01.icon02 { background-color: #a0c666; }
  #event .system-list .system-ttl-02 { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #010000; font-size: 16px; font-weight: 500; line-height: 1.65; padding-bottom: .5em; margin-bottom: .1em; border-bottom: 1px dotted #000; }
  #event .system-list .system-deta { color: #010000; font-size: 13px; padding-left: .5em; }
  /* case -------------------------------------*/
  #case { padding: 5%; }
  #case .Box { width: 100%; margin-left: auto; margin-right: auto; }
  #case .ttl { width: 60%;  }
  #case .ttl-Box { margin-bottom: 10%; position: relative; }
  #case .system-list {}
  #case .system-list a:hover { text-decoration: none; }
  #case .system-list a:hover .system-ttl { text-decoration: underline; }
  #case .system-list ul { width: 100%; margin: 0 auto; }
  #case .system-list li { width: 47.5%; margin-right: 5%; margin-bottom: 7%; }
  #case .system-list li:nth-child(even) { margin-right: 0; }
  #case .system-list .system-pic { width:100%; height: 32vw; }
  #case .system-list .system-pic img { width:100%; height: 32vw; }
  #case .system-list .system-pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
  #case .system-list .system-ttl { font-family: Meiryo; color: #453728; font-size: 13px; font-weight: 400; line-height: 1.65; padding: .5em; letter-spacing: .5px; }
  #case .system-icon01 a{ background: #443526; width:100%; margin: 0 auto; padding: 5% 7% ; color: #fff; text-align: center; font-weight: bold; }
  #case .system-icon01{ width: 100%; margin: 0 auto 10% ; text-align: center; }
  #case .system-icon02 a{ background: #443526; width:100%; margin: 0 auto; padding: 5% 13.5% ; color: #fff; text-align: center; font-weight: bold; }
  #case .system-icon02{ width: 100%; margin: 0 auto 10%; text-align: center; }
  /* voice -------------------------------------*/
  #voice { background: url('../images/index/voice-bg.jpg') top center; margin-bottom: 10%; }
  #voice .Box { width:100%; margin: auto;  padding: 5%; }
  #voice .ttl-Box { width: 70%; margin-left: -3%; margin-bottom: 3%; }
  #voice .ttl-Box h2 img{ width: 60%;  margin: 10% 0 3% 10%; }
  #voice .rel-Box { position: relative;  }
  #voice .system-list a:hover { text-decoration: none; }
  #voice .system-list a:hover .system-ttl { text-decoration: underline; }
  #voice .system-list li { width:100%; margin: 0 auto; background: #fff;  }
  #voice .system-list li article{  }
  #voice .system-list .system-ttl { font-size: 18px; line-height: 1.65; font-weight: bold; margin: 0 5% 10%; }
  #voice .system-list .system-pic { width:90%; height: 270px; margin: 5% auto 10%;  outline: 1px solid #000; border: 10px solid #fff; }
  #voice .system-list .system-pic img { width:100%; height: 250px; }
  #voice .system-list .system-pic:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha(opacity=80); opacity: 0.8; }
  #voice .system-list .system-icon02 {  background: #443526; width: 80%; margin: 0 auto 10%; color: #fff; text-align: center;  }
  #voice .system-list .system-icon02 a { color: #fff; padding: 7px 0 ; display: block;}
  #voice .system-list .system-customer { color: #44a4b8; font-size: 14px; font-weight: 400; line-height: 1.65; margin: 0 5%;}
  #voice .system-list .system-customer .system-area { display: inline-block; margin-right: 1em; padding-left: 1.3em; text-indent: -1.3em; margin-bottom: 4px; }
  #voice .system-list .system-customer .system-area:before { content: url('../images/common/address-bef.jpg'); margin-right: .3em; }
  #voice .system-list .system-customer .system-name { display: inline-block; margin-bottom: 4px; }
  /* web-magazine -------------------------------------*/
  #blog { width: 90%; margin:0 auto 10%; }
  #blog a:hover { text-decoration: none; }
  #blog a:hover .system-ttl { text-decoration: underline; }
  #blog li { padding-bottom: .8em; margin-bottom: 1em; border-bottom: 1px dotted #4c4c4c; width: 100%; }
  #blog li:nth-child(n+4) { display: none; }
  #blog li:nth-child(3) { border-bottom: none; margin-bottom: 0; }
  #blog .system-scr-Box { padding: .8em; background-color: #fff; border: 2px solid #d8d8d8; }
  #blog .system-scr-Box .system-date { color: #44a3b8; font-size: 12px; margin-bottom: .3em; }
  #blog .system-scr-Box .system-date:before { content: url('../images/common/address-bef.jpg'); margin-right: .1em; position: relative; top: 5px; margin-right: 7px; }
  #blog .system-scr-Box .system-ttl { font-family: Meiryo; color: #383231; font-size: 14px; font-weight: 400; line-height: 1.8; padding-left: .1em; padding-right: .1em; }
  /* sns -------------------------------------*/
  #sns { padding: 8% 0; background: url('../images/index/cent-link-bg.jpg') top center; }
  #sns .mb-01 { margin-bottom: 8%; }
  #sns .Box { width: 100%; margin-left: auto; margin-right: auto; }
  #sns .ttl-Box { margin-bottom: 4%;  }
  #sns .ttl-Box .ttl { width: 45%; }
  #sns .ttl-Box .ttl .en { margin-right: 1em; line-height: 1; }
  #sns .ttl-Box .ttl .jp { line-height: 1; }
  #sns .ttl-Box .sp-btn-02 { width: 40%; }
  #sns #news { width: 90%; margin:0 auto; }
  #sns #news a:hover { text-decoration: none; }
  #sns #news a:hover .system-ttl { text-decoration: underline; }
  #sns #news li { padding-bottom: .8em; margin-bottom: 1em; border-bottom: 1px dotted #4c4c4c; width: 100%; }
  #sns #news li:nth-child(n+4) { display: none; }
  #sns #news li:nth-child(3) { border-bottom: none; margin-bottom: 0; }
  #sns #news .system-scr-Box { padding: .8em; background-color: #fff; border: 2px solid #d8d8d8; }
  #sns #news .system-scr-Box .system-date { color: #44a3b8; font-size: 12px; margin-bottom: .3em; }
  #sns #news .system-scr-Box .system-date:before { content: url('../images/common/address-bef.jpg'); margin-right: .1em; position: relative; top: 5px; margin-right: 7px; }
  #sns #news .system-scr-Box .system-ttl { font-family: Meiryo; color: #383231; font-size: 14px; font-weight: 400; line-height: 1.8; padding-left: .1em; padding-right: .1em; }
  #sns #facebook { display: none; width: 490px; }
  /* instagram -------------------------------------*/
  #instagram { width: 100%; margin: 15% auto; position: relative;}
#instagram .instagram-ttl { position: absolute; left: 50%; top: 50%; margin-top: -80px; margin-left: -80px;}
#instagram .instagram li{width: 25vw;height: 25vw; float: left; text-align: center; overflow: hidden;}
#instagram .instagram li img{ width: 100%; height: auto;}
  /* sp-sns-list -------------------------------------*/
  .sp-sns-list { width: 81.33%; margin-left: auto; margin-right: auto; margin-bottom: 10%; }
  .sp-sns-list li { margin-bottom: 4%; }
@media screen and (max-width: 380px) { #case .system-list .system-pic { height: 120px; }
  #case .system-list .system-pic img { height: 120px; }
  #blog .system-list .system-pic { height: 106px; position: relative; }
  #blog .system-list .system-pic img { height: 106px; } }
@media screen and (max-width: 321px) { #case .system-list .system-pic { height: 90px; }
  #case .system-list .system-pic img { height: 90px; }
  #blog .system-list .system-pic { height: 90px; }
  #blog .system-list .system-pic img { height: 90px; } }