@charset "UTF-8";
/*--------------------------------------------
  TOP
--------------------------------------------*/
.ofi_wrap {
  position: relative;
}
.ofi_wrap img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#top .top_key .top_slider {
  padding-bottom: 44px;
}
#top .top_key .slick-dotted.slick-slider {
  margin-bottom: 0;
}
#top .top_key .slick-dotted.slick-slider .slick-slide img {
  width: 100%;
}
#top .top_key .slick-dots {
  bottom: 17px;
  line-height: 1;
}
#top .top_key .slick-dots li {
  width: 8px;
  height: 8px;
  position: relative;
  margin: 0 8px;
}
#top .top_key .slick-dots li:before {
  display: none;
}

#top .top_key .slick-dots li button {
  width: 100%;
  height: 100%;
  background: #BBBCBC;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  padding: 0;
}
#top .top_key .slick-dots li.slick-active button {
  background: #595757;
}
#top .top_key .slick-dots li button:before{
  display: none;
}
@media only screen and (max-width:1024px) {
  #top .top_key .slick-dots li {
    width: 9px;
    height: 9px;
    margin: 0 6px;
  }
}
@media only screen and (max-width:480px) {
  #top .top_key .slick-dots li {
    width: 9px;
    height: 9px;
    margin: 0 4px;
  }
}
#top .product.eol {
  padding-top: 0;
}
#top .product .product_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-end;
  max-width: 1100px;
  margin: 0 auto;
}
#top .product .product_list.center {
  justify-content: center;
}
#top .product .product_list li {
  width: 33.3%;
      border-bottom: solid 1px #ccc;
    padding-bottom: 1.5em;
}
#top .product .product_list li .inner {
  padding: 2rem 5rem;
}
#top .product .product_list li:after {
  position: absolute;
  border-right: 1px solid #cccccc;
  margin-left: 1em;
}

#top .product .product_list.center li:first-child {
  border: none;
}
#top .product .product_list li:nth-child(n+4) {
  margin-top: 6rem;
  position: relative;
}

/*
#top .product .product_list li:nth-child(n+4):before {
  content: '';
  width: calc(100% - 2rem);
  height: 1px;
  background: #ccc;
  position: absolute;
  left: 0;
  top: -3rem;
}
*/
#top .product .product_list li:nth-child(even):before {
  right: 0;
  left: inherit;
}
#top .product .product_info {
  margin-top: 3rem;
}
#top .product .product_info .info {
  line-height: 1;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
  margin-top: 1.5rem;
}
#top .product .product_info .info:first-child {
  margin-top: 0;
}
#top .product .product_info .model_name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 2rem;
}
#top .product .btn {
  margin-top: 3rem;
}
#top .movie_wrap {
  margin: 6rem auto 0;
  width:600px;
  height:400px;
  position: relative;
  padding-top: 22.5%;
}
#top .movie_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*お知らせ*/
#top .sec_info {
  background: #f7f7f7;
}
#top .info_box {
  background: #fff;
  padding: 5rem;
}
#top .info_list .inner {
  display: flex;
  align-items: baseline;
  padding: 1.5rem 0;
}
#top .info_list .item {
  border-bottom: 1px solid #eee;
}
#top .info_list .item:first-child {
  border-top: 1px solid #eee;
}
#top .info_list .icon {
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: middle;
}
#top .info_list .icon img {
  display: block;
  height: 16px;
}
#top .info_list .info_top {
  display: flex;
  align-items: baseline;
  width: 100%;
  max-width: calc(9rem + 8em);
}
#top .info_list .info_cat {
  min-width: 8rem;
  background: #970921;
  color: #fff;
  margin-left: 1rem;
  text-align: center;
  font-size: 1.4rem;
}
#top .info_list .info_date {
  max-width: 16rem;
  width: 100%;
}
#top .info_list .info_ttl {
  margin-left: 1rem;
  width: 100%;
  max-width: calc(100% - 17rem);
}
#top .sec_info .btn {
  margin-top: 3rem;
}
#top .main_bnr {
  margin-top: 8rem;
}
#top .bnr_box {
  max-width: 750px;
  margin: 0 auto;
}

@media screen and (min-width: 992px) {
  #top .info_list .inner:hover {
    opacity: 0.7;
  }
  #top .bnr_box a:hover {
    opacity: 0.7;
  }

  
/* 製品一覧 */
.product_list .inner{
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.product_info{
  transition: 0.4s all linear;
}
  .product_list .inner .detail_hov:hover{
background: rgba(0, 0, 0, 0.3);
position: relative;
}
  }
  .product_list .inner .detail_hov:hover:before{
    color: #fff;
  content: '詳細を見る →';
  text-shadow: 0px 0px 4px #222;
  text-align: center;
  position: absolute;
  z-index: 1;
padding: 1em;
    width: 100%;
top: 15%;
font-family:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", Meiryo, 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif;;

  }
}
@media screen and (max-width : 1399px ) {
  
}
@media screen and (max-width : 1199px ) {
  #top .product .product_info .info {
    font-size: 1.6rem;
  }
}
@media screen and (max-width : 991px ) {
  
}
@media screen and (max-width : 767px ) {
/*  #top {
    padding-top: 0;
  }*/
  #top .product .product_list {
    margin: 0;
  }
  #top .product .product_list li {
    width: 100%;
  }
  #top .product .product_list li:not(:first-child) {
    margin-top: 3rem;
  }
  #top .product .product_list li:nth-child(odd) {
    border-right: none;
  }
  #top .product .product_list li .inner {
   padding-bottom: 0;
  }
  #top .product .product_list li:nth-child(n+3):before {
    display: none;
  }
   #top .product .product_list li:not(:first-child) .inner {
     border-top: 1px solid #ccc;
     padding-top: 3rem;
   }
  #top .product .product_list li .product_img img {
    margin: 0 auto;
  }
  #top .product .btn {
    margin-top: 2rem;
  }
  #top .product .product_list li:not(:nth-child(3n)) {
    border-right: none;
  }
  #top .movie_wrap {
    margin-top: 5rem;
    width: 95%;
    padding-top: 56.25%;
    height: 280px;
  }
  /*お知らせ追加20220127*/
  #top .info_list .inner {
    display: block
  }
  #top .info_list .info_top {
    margin-bottom: 0.5rem;
    max-width: 100%;
  }
  #top .info_list .info_date {
    max-width: 100%;
    width: auto;
  }
  #top .info_list .info_cat {
    font-size: 1.3rem;
  }
  #top .info_list .info_ttl {
    margin-left: 0;
    max-width: 100%;
  }
  #top .info_box {
    padding: 3rem 2rem;
  }
  #top .main_bnr {
    margin-top: 4rem;
  }
}
@media screen and (min-width : 576px ) and (max-width : 767px ) {
  
}
@media screen and (max-width : 575px ) {
/*  #top .top_key .slick-dots li {
    width: 10px;
    height: 10px;
  }
  #top .top_key .slick-dots {
    bottom: 5px;
  }
  #top .top_key .slick-dots li button {
    width: 4px;
    height: 4px;
  }*/
}