@charset "UTF-8";
@media screen and (min-width: 768px),print {  /* 3枚表示のbxslider-------------------------------------*/

.slider-3mai-Box { overflow: hidden; position: relative; width: 100%; }
.slider-3mai-Box .slider-3mai { position: relative; left: 50%; width: 3360px; margin-left: -1680px; }
.slider-3mai-Box .slider-3mai li { width: 1120px !important; }
.slider-3mai-Box .bx-wrapper .bx-controls-direction a { position: absolute; top: 40%; outline: 0; width: 50px; height: 100px; text-indent: -9999px; z-index: 9999; }
.slider-3mai-Box .bx-wrapper .bx-prev { left: 1090px; background-image: url(../images/index/bx-l.jpg); background-position: 0 0; }
.slider-3mai-Box .bx-wrapper .bx-next { right: 1060px; background-image: url(../images/index/bx-r.jpg); background-position: 0 0; }

.side-fix { display: none;}

#bx-main {width:1200px; margin: 0 auto; }

/* page-cold */

.m-new-txt-box{margin-top: 30px;}
.m-new-txt-box .m-new-txt{font-size:16px;letter-spacing:1px;line-height:1.75;text-align:center;color:#111;}
.m-new-txt-box .m-new-txt .txt-bold{font-size:28px;font-weight:bold;}
.m-new-txt-box .new-catalog-btn{width:600px;margin:20px auto 0px;}

#dolive {margin: 0 auto 50px;}
#dolive .ttl{text-align: center; margin: 50px auto 30px;}
#dolive .bx{width: 100%; margin: 0 auto; background: #e5eef2; padding: 50px 0;}
#dolive .bx .ttl1{text-align: center; margin-bottom: 30px;}
#dolive .bx .list{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;}
#dolive .bx .list li{width: 280px; margin-right: 20px;}
#dolive .bx .list li:last-child{margin-right: 0;}


#lineup{ width: 100%; margin: 0 auto;  }
#lineup h2{ text-align: center; margin:15px auto 35px; }
#lineup .inner{ background: url('../images/index/line-bg.jpg') top center repeat-x; padding: 10px 0;}
#lineup ul{ width: 1200px; margin: 0 auto ; position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;}
#lineup ul li{  margin-right: 30px; min-height: 360px; text-align: center; }
#lineup ul li:nth-child(3n){  margin-right: -5px; }
#lineup ul li p{ font-size: 14px; line-height: 1.7; margin-top: 10px;}
#lineup ul li p span{ font-size: 18px; font-weight: bold; }
.catalog{ width: 100%; margin: 0 auto 90px; background: url('../images/index/cata-bg.jpg') bottom 30px center repeat-x; padding-bottom: 0px; text-align: center; }
.catalog .btn{ position: relative; top: -80px; margin-bottom: -30px; }

#reason{ width: 100%; margin: 0 auto; background: url('../images/index/reason-bg.jpg') top center; padding: 30px 0 70px;  }
#reason h3{ text-align: center; margin-bottom: 50px; }
#reason ul{ width: 1097px; margin: 0 auto; }
#reason ul li{ float: left; margin-right: 20px; }
#reason ul li:last-child{ float: left; margin-right: 0px; }
#reason ul li p{ font-size: 14px;text-align: center; line-height: 1.7; }
#reason ul li figure{ margin-bottom: 5px; }

#soudan{ width: 100%; background: url('../images/index/req-bg.jpg') top center; }
#soudan .inner{ width: 900px; margin: 0 auto; position: relative; }
#soudan .inner h4{ text-align: left; margin-left: -145px; position: relative; top: -30px; margin-bottom: 30px; }
#soudan .inner .fuki{ padding-left: 0px; margin-bottom: 30px; }
#soudan .inner .tel{ margin-left: 30px; }
#soudan .inner .btn{ text-align: center; position: relative; bottom: -30px; }
#soudan .inner .point02{ position: absolute; bottom: 0px; left: -160px; }
#soudan .inner .point01{ position: absolute; top: -40px; right: -130px; }
#soudan .inner .point03{ position: absolute; bottom: 0px; right: -260px; }

.bnr-bx{ width: 480px; margin: 0 auto; }
.bnr-bx li{  }
.bnr-bx li:last-child{ }

.land{ text-align: center; margin-bottom: 30px}
.recruit{ text-align: center; margin-bottom: 30px}

.msg{ width: 1100px; margin: 0 auto 130px; }
.msg p{ font-size: 14px; line-height: 1.7;  }



/* page-cold */
/* event -------------------------------------*/
#event{ width: 100%; margin: 0 auto; padding: 40px 0; }
#event h2{ text-align: center; margin-bottom: 50px; position: relative; left: -150px }
#event .btn{ position: absolute; right: 0 ; top: 110px; }
#event .inner-Box{ width: 1100px; margin: 0 auto; position: relative; background: url('../images/index/eve-bg.jpg') bottom center no-repeat; padding: 0 50px; }
#event .system-list{ margin-bottom: 50px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#event .system-list li{ width: 28%; margin-right: 8%; background: #fff; padding: 2% 1% 1% 1%; position: relative; margin-bottom: 20px; border: 1px solid #000; }
#event .system-list li:nth-child(3n){ margin-right: 0;}
#event .system-list li a:hover{ text-decoration: none; }
#event .system-pic{ width: 100%; height: 180px; overflow: hidden; text-align: center; }
#event .system-pic img{ max-width: 100%; max-height: 180px; width: auto; height: auto;}
#event .system-date{ font-size: 0.875em; font-weight: bold; letter-spacing: 0.07em; line-height: 1.6; 
	margin-bottom: 15px; text-align: center; display: block; padding: 8px 12px; background: #282828; color: #fff; }
#event .system-date .date{display:inline-block;}
#event .system-date .time{display: block; font-weight: normal; font-size: 12px;}
#event .system-ttl-01{ font-size: 1em; margin-bottom: 20px; padding: 0 10px 0 10px; line-height: 1.6;}
#event .system-place{ font-size: 0.8em; color: #29874d; margin-bottom: 20px; padding: 0 10px 0 10px;}
#event .system-icon02 span { display: block; position: absolute; top: -35px; left: -20px; }
#event .system-icon02 span img{ width: 60%;}


/* case -------------------------------------*/
#case{ width: 100%; margin:100px auto 50px; padding: 50px 0; }
#case h2{ text-align: center; margin-bottom: 30px;}
#case .btn{ text-align: center; position: relative; top: -70px; right: -430px; }
#case .inner-Box{ width: 100%; margin: 0 auto; position: relative; min-height: 490px;  }
#case .system-pic{ width: 100%; height: 320px; overflow: hidden; text-align: center; }
#case .system-pic img{ width: 100%; height: 320px; }
#case .system-date{ font-size: 0.75em; margin-bottom: 15px; line-height: 1.4;}
#case .system-ttl-01{ font-size: 1em; margin-bottom: 20px; line-height: 1.4; }

.contents-menu{ max-width: 1600px; width: 100%; margin: 0px auto 20px auto; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.contents-menu li{ overflow: hidden; position: relative; text-align: center; height: 320px; width: 25%; position: relative; }
.contents-menu li .caption1{ text-align: center; position: absolute; top: 320px; width: 100%;  opacity: 0.7; left: 0px; background: #000;}
.contents-menu li .caption1 a{ position: relative; color: #fff; display: block; width: 100%; padding: 50px 0; height: 500px; line-height: 2.2; font-size: 14px; }
.contents-menu li .caption1 a:hover{ text-decoration: none; }
.contents-menu li .caption1 .icon{ position: absolute; bottom: 20px; right: 20px; }
.contents-menu li .caption1 .ttl{ display: block; width: 85%; margin: 0 auto; position: relative; top: 70px; font-size:  }


#case .system-category-set { margin-bottom: 15px;}
#case .system-category{ margin-bottom: 1px; font-size: 0.75em; font-weight: bold; color: #fff; text-align: center; padding: 8px; background-color: #ccc;}
#case .icon01{ background: #000; }
#case .icon02{ background: #111; }
#case .icon03{ background: #222; }
#case .icon04{ background: #333; }
#case .icon05{ background: #444; }
#case .system-icon02{ padding: 5px 10px; background: #ccc; position: absolute; top: 35px; left: 0; }

/* staff -------------------------------------*/
#staff{ width: 100%; margin: 0 auto; padding: 80px 0; }
#staff h2{ text-align: center; font-size: 2em; font-weight: bold; margin-bottom: 0px; background: url('../images/index/staff-point.png') bottom center no-repeat; padding-bottom: 70px; }
#staff .btn{ text-align: center; }
#staff .inner-Box{ width: 1100px; margin: 0 auto; }
#staff .system-list{ margin-bottom: 20px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#staff .system-list li{ width: 24%; margin-right: 1.3%; position: relative; margin-bottom: 20px;}
#staff .system-list li:nth-child(4n){ margin-right: 0;}
#staff .system-list li a:hover{ text-decoration: none; }
#staff .system-pic{ max-width: 270px; width: 100%; max-height: 310px; margin-bottom: 20px; overflow: hidden; text-align: center; }
#staff .system-pic img{ max-width: 270px; width: 100%; height: 310px; }
#staff .system-ttl-01{ font-size: 1em; margin-bottom: 20px; line-height: 1.4; text-align: center; }

/* topics -------------------------------------*/
#topics{ width: 100%; margin:0 auto 0px; padding: 70px 0; background: url('../images/index/blog-bg.jpg') top center no-repeat; }
#topics h2{ text-align: left; margin-bottom: 40px;}
#topics .btn{ position: absolute; top: 0; right: 0; }
#topics .inner-Box{ width: 1100px; margin: 0 auto; position: relative;  }
#topics .system-list{ margin-bottom: 50px; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#topics .system-list li{ width: 32%; margin-right: 2%; overflow: hidden; background: #fff; position: relative; border-bottom: 5px solid #48a276; margin-bottom: 5%; padding: 2% 1% 1%;  }
#topics .system-list li:last-child{ margin-right: 0%; }
#topics .system-list li a:hover{ text-decoration: none; }
#topics .system-pic{ width: 40%; height: 120px; margin-bottom: 3%; overflow: hidden; text-align: center; float: left; }
#topics .system-pic img{ width: 100%; height: 120px; }
#topics .ttl-bx{ width: 56%; float: right; }
#topics .system-date{ font-size: 0.6em; margin-bottom: 10px; }
#topics .system-date::before{ content: "■"; }
#topics .system-ttl{ width: 100%; font-size: 0.8em; line-height: 1.4; }

#instagram { width: 1100px; margin: 80px auto; }
#instagram .instagram-ttl { margin-bottom: 50px; text-align: center; font-size: 1.4em; font-weight: bold; }
#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) {

#bx-main { margin-top: 15%; margin-bottom: 7%; }

.m-new-txt-box{ margin-top: -1vw;}
.m-new-txt-box .m-new-txt{font-size:3.865vw;letter-spacing:0.1vw;line-height:1.75;text-align:center;color:#111;}
.m-new-txt-box .m-new-txt .txt-bold{font-size:6.763vw;font-weight:bold;}
.m-new-txt-box .new-catalog-btn{width:86vw;margin:5vw auto 5vw;}

#dolive {margin: 0 auto 5vw;}
#dolive .ttl{width: 80vw; text-align: center; margin: 8vw auto 8vw;}
#dolive .bx{width: 100vw; margin: 0 auto; background: #e5eef2; padding: 8vw 0;}
#dolive .bx .ttl1{text-align: center; margin-bottom: 8vw;}
#dolive .bx .list{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;-webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;}
#dolive .bx .list li{width: 44vw; margin-right: 3vw; margin-bottom: 5vw;}
#dolive .bx .list li:nth-child(2n){margin-right: 0;}


/* page-cold */
#lineup{ width: 100%; margin: 0 auto;  }
#lineup h2{ margin: 0 auto 6vw; width: 30vw;}
#lineup .inner{  }
#lineup ul{ width: 100%; margin: 0 auto ; position: relative; padding: 0 3% }
#lineup ul li{ float: left; width: 49%; margin-right: 2%; min-height: 280px; text-align: center; }
#lineup ul li:nth-child(2n){ float: left; margin-right: 0px; }
#lineup ul li p{ font-size: 14px; line-height: 1.7; }
#lineup ul li p span{ font-size: 18px; font-weight: bold; }

.catalog{ width: 100%; margin: 0 auto 90px; background: url('../sp-images/index/cat-bg.jpg') top center; padding-bottom: 0px; text-align: center;  }
.catalog .cat-ttl{ padding: 0 3%; }
.catalog .cat-txt{ padding: 0 3%; }
.catalog .btn{ position: relative; top: 10px; margin-bottom: -30px; }

#reason{ width: 100%; margin: 0 auto; background: url('../images/index/reason-bg.jpg') top center; padding: 5% 3% ;  }
#reason h3{ text-align: center; margin-bottom: 20px; }
#reason ul{ width: 100%; margin: 0 auto; }
#reason ul li{ text-align: center; margin-bottom: 10%; }
#reason ul li p{ font-size: 14px;text-align: center; line-height: 1.7; }
#reason ul li figure{ margin-bottom: 0px; }

#soudan{ width: 100%; background: url('../images/index/req-bg.jpg') top center; }
#soudan .inner{ width: 100%; margin: 0 auto; position: relative; padding: 0 3% }
#soudan .inner h4{ text-align: center; margin-left: 0%; margin-right: 5%; margin-bottom: 5%; width: 80vw; position: relative; top: -3vw;}
#soudan .inner .fuki{  margin-bottom: 10px; }
#soudan .inner .tel{ text-align: center; margin-bottom: 20px; }
#soudan .inner .req-img{ margin-bottom: -20px; }
#soudan .inner .btn{ text-align: center; position: relative; bottom: -10px; }

.bnr-bx{ width: 100%; margin: 0 auto; padding: 0 3%; }
.bnr-bx li{ text-align: center; margin-bottom: 10%; }

.land{ text-align: center; margin-bottom: 10%; padding: 0 5%}
.recruit{ text-align: center; margin-bottom: 10%;  padding: 0 5%}

.msg{ width: 100%; margin: -11vw auto 5%; padding: 0 3%; }
.msg p{ font-size: 3.6vw; line-height: 1.7;  }

/* page-cold */
/* event -------------------------------------*/
#event{ width: 100%; margin: 0 auto; padding: 5% 3% 5%;}
#event h2{ text-align: center; font-size: 1.4rem; font-weight: bold; margin-bottom: 10%;}
#event .btn{ text-align: center; }
#event .inner-Box{  }
#event .system-list{ margin-bottom: 4%; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#event .system-list li{ width: 49%; margin-right: 2%; background: #fff; position: relative; margin-bottom: 4%; padding: 5% 2% 2% 2%; line-height: 1.4; border: 1px solid #000; }
#event .system-list li:nth-child(2n){ margin-right: 0;}
/* 
#event .system-list li:last-child{ display: none; } */
#event .system-list li a:hover{ text-decoration: none; }
#event .system-pic{ width: 100%; height: 120px; overflow: hidden; text-align: center; }
#event .system-pic img{ max-width: 100%; max-height: 130px; width: auto; height: auto;}
#event .system-date{ font-size: 0.875em; font-weight: bold; letter-spacing: 0.07em;  margin-bottom: 15px; text-align: center; display: block; padding: 8px; background: #282828; color: #fff; }
#event .system-ttl-01{ font-size: 0.8em; margin-bottom: 20px; padding: 0 4% 0 4%; }
#event .system-date .date{}
#event .system-date .time{display: block; font-weight: normal; font-size: 0.875em; padding: 5% 0 2% 0;}


#event .system-place{ font-size: 0.7em; color: #29874d; margin-bottom: 10px; padding: 0 10px; }
#event .system-icon02 span { display: block; position: absolute; top: -11vw; right: -2vw; width: 35%; z-index: 2; }

/* case -------------------------------------*/
#case{ width: 100%; margin: 0 auto; padding: 15% 3%;}
#case h2{ text-align: center; font-size: 1.4rem; font-weight: bold; margin-bottom: 10%;}
#case .btn{ text-align: center; }
#case .inner-Box{ width: 100%; margin: 0 auto; }
#case .system-list{ margin-bottom: 5%; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#case .system-list li{ width: 49%; margin-right: 2%; background: #fff; position: relative; margin-bottom: 4%; line-height: 1.4;}
#case .system-list li:nth-child(2n){ margin-right: 0;}
#case .system-list li:nth-child(n+5){ display: none;}
#case .system-list li a:hover{ text-decoration: none; }
#case .system-pic{ width: 100%; height: 120px; overflow: hidden; text-align: center; margin-bottom: 3%; }
#case .system-pic img{ width: 100%; height: 120px; }
#case .system-date{ font-size: 0.8rem; margin-bottom: 5%; }
#case .system-ttl-01{ font-size: 0.9rem; margin-bottom: 5%; }

/* staff -------------------------------------*/
#staff{ width: 100%; margin: 0 auto; padding: 5% 3% 15%; }
#staff h2{ text-align: center; font-size: 1.4rem; font-weight: bold; margin-bottom: 10%;}
#staff .btn{ text-align: center; }
#staff .inner-Box{ width: 100%; margin: 0 auto; }
#staff .system-list{ margin-bottom: 5%; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#staff .system-list li{ width: 49%; margin-right: 2%; background: #fff; position: relative; margin-bottom: 4%; line-height: 1.4; padding: 1%; }
#staff .system-list li:nth-child(2n){ margin-right: 0;}
#staff .system-list li:nth-child(n+3){ display: none;}
#staff .system-list li a:hover{ text-decoration: none; }
#staff .system-pic{ width: 100%; height: 60vw; margin-bottom: 5%; overflow: hidden; text-align: center; }
#staff .system-pic img{ width: 100%; height: 60vw; }
#staff .system-customer{ font-size: 0.8rem; margin-bottom: 5%; }
#staff .system-customer::before{ content: "■"; }
#staff .system-ttl-01{ font-size: 0.9rem; margin-bottom: 5%; }
#staff .system-category{ }

#blog-news{ width: 100%; margin: 0 auto; }

/* topics -------------------------------------*/
#topics{ width: 100%; padding: 15% 3% 5%; margin-bottom: 10%; background: url('../sp-images/index/blog-bg.jpg') top center no-repeat; }
#topics h2{ text-align: center; margin-bottom: 5%; width: 95%; }
#topics .btn{ text-align: center; }
#topics .inner-Box{ width: 100%; margin: 0 auto;  }
#topics .system-list{ display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#topics .system-list li{ width: 48%; margin-right: 4%; background: #fff; overflow: hidden; position: relative; border-bottom: 1px dotted #ccc; margin-bottom: 5%; padding-bottom: 5%; }
#topics .system-list li:nth-child(2){ margin-right: 0%; }
#topics .system-list li:last-child{ display: none; }
#topics .system-list li a:hover{ text-decoration: none; }
#topics .system-pic{ width: 100%; height: 30vw; margin-bottom: 5%; overflow: hidden; text-align: center; }
#topics .system-pic img{ width: 100%; height: 30vw; }
#topics .system-date{ font-size: 0.8rem; margin-bottom: 3%;padding: 1% 3%}
#topics .system-date::before{ content: "■"; }
#topics .system-ttl{ width: 100%; font-size: 0.9rem; margin-bottom: 5%;  padding: 1% 3%; line-height: 1.5}

}
@media screen and (max-width: 380px) {
  #case .system-list .system-pic { height: 120px; }
  #case .system-list .system-pic img { height: 120px; }
  #casetax-catego .system-list .system-pic { height: 120px; }
  #casetax-catego .system-list .system-pic img { height: 120px; }
  #casetax-reform .system-list .system-pic { height: 120px; }
  #casetax-reform .system-list .system-pic img { height: 120px; }
  #voice .system-list .system-pic { height: 120px; }
  #voice .system-list .system-pic img { height: 120px; }
}
@media screen and (max-width: 321px) {
  #case .system-list .system-pic { height: 100px; }
  #case .system-list .system-pic img { height: 100px; }
  #casetax-catego .system-list .system-pic { height: 100px; }
  #casetax-catego .system-list .system-pic img { height: 100px; }
  #casetax-reform .system-list .system-pic { height: 100px; }
  #casetax-reform .system-list .system-pic img { height: 100px; }
  #voice .system-list .system-pic { height: 100px; }
  #voice .system-list .system-pic img { height: 100px; }
}