/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  margin-bottom: 60px;
  						margin-bottom: 0;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /* fix other elements on the page moving (in Chrome) */
  -webkit-transform: translateZ(0);
}
/** THEME
===================================*/
#keyimg {
  min-width: 100%;
  overflow: hidden; //横スクロールさせないようにする
  background-color: #000;
}
#keyimg .bx-wrapper {
  margin: 0 auto 0 auto;
  position: relative;
  background-color: #000;
}
#keyimg .bx-viewport {
  background: transparent !important;
  border: 0;
  overflow: visible !important;
  height: 512px !important;
  position: relative;
  z-index: 2;
  background-color: #fff !important;
}
#keyimg .bx-viewport::before  { content: ""; background-color: rgba(0,0,0,0.2); position: absolute; width: 100%; height:100%; top: 0; bottom: 0; left: -100%; z-index: 399 !important; }
#keyimg .bx-viewport::after  { content: ""; background-color: rgba(0,0,0,0.2); position: absolute; width: 100%; height:100%; top: 0; bottom: 0; right: -100%; z-index: 399 !important; }
#keyimg ul.bxslider li { /*background-color: #000;*/ }
#keyimg ul.bxslider li a { display: block; width:100%; height: 100%; }
#keyimg ul.bxslider li a img  { opacity: 1; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
#keyimg ul.bxslider li a:hover img { opacity: 0.8; }
@media screen and (max-width: 1024px) {
  #keyimg .bx-viewport { height: auto !important; }
}
@media screen and (max-width: 640px) {
  #keyimg .bx-viewport { height:90vw !important; }
  #keyimg ul.bxslider li a img  { opacity: 1; }
  #keyimg .bx-viewport::before  { display:none; }
  #keyimg .bx-viewport::after  { display:none; }
}
#keyimg ul.bxslider li.active a img  { opacity: 1;	-webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
#keyimg div.bx-wrapper div.bx-controls-direction a { display: block; width:38px; height:140px; background-color:#fff; color:#000; background-size:auto 34px; background-position: center center !important; top:186px; }
#keyimg div.bx-wrapper div.bx-controls-direction a.bx-prev { left: -38px !important; background-image:url("https://www.appi.co.jp/dir_jp/uploads/2020/03/top-slider-prev.png") !important; }
#keyimg div.bx-wrapper div.bx-controls-direction a.bx-next { right: -38px !important; background-image:url("https://www.appi.co.jp/dir_jp/uploads/2020/03/top-slider-next.png") !important; }
#keyimg div.bx-wrapper div.bx-controls-direction a:hover { }




div.topics-slide { min-width: 100%; overflow: hidden; margin:0 auto 0 auto; box-sizing: border-box;}
div.topics-slide div.bx-wrapper { margin: 0 auto 60px auto; box-sizing: border-box; position: relative; max-width: 1024px !important; height:auto; }
div.topics-slide div.bx-wrapper ul.topics-list-slide { margin:0 0 0 -12px;}
div.topics-slide div.bx-wrapper ul.topics-list-slide li { box-sizing: border-box; margin:0 12px 0 12px; }
div.topics-slide div.bx-wrapper ul.topics-list-slide li a { text-decoration: none; color:#000; }
div.topics-slide div.bx-wrapper ul.topics-list-slide li a div.n-list4-photo { width:100%; height: auto; box-sizing: border-box;}
div.topics-slide div.bx-wrapper ul.topics-list-slide li a h3 { font-size: 16px; font-weight:bold; margin:7px 0 5px 0; }
div.topics-slide div.bx-wrapper ul.topics-list-slide li a p { margin:0 0 3px 0; }
div.topics-slide div.bx-wrapper div.bx-pager { bottom:-30px; }
div.topics-slide div.bx-wrapper div.bx-controls-direction a { display: block; width:38px; height:168px; background-color:#fff; color:#000; background-size:auto 34px; background-position: center center !important; top:16px; }
div.topics-slide div.bx-wrapper div.bx-controls-direction a.bx-prev { left: -38px !important; background-image:url("https://www.appi.co.jp/dir_jp/uploads/2020/03/top-slider-prev.png") !important; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
div.topics-slide div.bx-wrapper div.bx-controls-direction a.bx-next { right: -38px !important; background-image:url("https://www.appi.co.jp/dir_jp/uploads/2020/03/top-slider-next.png") !important; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
div.topics-slide div.bx-wrapper div.bx-controls-direction a.bx-prev:hover { background-image:url("https://www.appi.co.jp/dir_jp/uploads/2020/03/top-slider-prev-ho.png") !important; background-color:#000; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
div.topics-slide div.bx-wrapper div.bx-controls-direction a.bx-next:hover { background-image:url("https://www.appi.co.jp/dir_jp/uploads/2020/03/top-slider-next-ho.png") !important; background-color:#000; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
@media screen and (max-width: 640px) {
  div.topics-slide { width:100%; margin:0 auto 0 auto; }
  div.topics-slide div.bx-wrapper { width: 100%; margin:20px 0 60px 0; padding:0 2% 0 2%; }
  div.topics-slide div.bx-wrapper ul.topics-list-slide li {  }
  div.topics-slide div.bx-wrapper ul.topics-list-slide li a { display: block; text-decoration: none; color:#000; padding:0; font-size:2vw; }
  div.topics-slide div.bx-wrapper ul.topics-list-slide li a h3 { margin:7px 0 0 0; font-size:2.5vw !important; color:#000 !important; }
  div.topics-slide div.bx-wrapper ul.topics-list-slide li a p { margin:3px 0 3px 0; font-size:2,5vw !important; color:#000 !important; }
  div.topics-slide div.bx-wrapper ul.topics-list-slide li a p.updatetime { margin:3px 0 3px 0; font-size:2vw !important; color:#000 !important; }
  div.topics-slide div.bx-wrapper div.bx-pager { bottom:-25px; right:0; left:0; width: 100%; }
  div.topics-slide div.bx-wrapper div.bx-viewport { width: auto; padding-bottom:1.5%; border-bottom:1px solid #bfbfbf; }
}