@charset "utf-8";
/* CSS Document */
.top_sec {
  max-width: 1272px;
  margin: 0 auto;
}
.top_img {
  position: relative;
  height: 400px;
  background-image: url("../img/top/futaba_bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #ffffff;
}
.top_img h1 {
  position: absolute;
  left: 180px;
  top: 140px;
  font-size: 4.2rem;
  line-height: 5.6rem;
  font-weight: 500;
  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
}
.top_txt_img {
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../img/top/main_massage_bg@2x.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 100px;
}
.top_txt_img p {
  max-width: 1000px;
  width: 0 auto;
  font-size: 2.4rem;
  line-height: 4.2rem;
  padding: 20px;
}
@media(max-width:960px) {
  .top_img {
    height: 250px;
    width: auto;
    position: relative;
    background-image: url("../img/top/futaba_bg_mobile@2x.jpg");
    background-position: right;
  }
  .top_img h1 {
    position: absolute;
    top: 70px;
    left: 32px;
    font-size: 2.4rem
  }
  .top_txt_img p {
    font-size: 1.6rem;
  }
  .top_txt_img {
    height: 300px;
  }
}
.about_sec {
  max-width: 1272px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 0 24px;
}
.about_sec_container {
  max-width: 1272px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.about_sec_container li {
  display: inline-block;
  max-width: 392px;
  margin: 0 auto 40px;
  background: #ffffff;
  text-align: center;
  border: solid 1px #333;
  list-style: none;
}
.about_sec_img_futaba{
  margin: 19px auto;
  width: 90%;
  height: auto;
}
.about_sec_img_products,.about_sec_img_head-office {
  width: 100%;
  height: auto;
}

.about_sec_container li i {
  padding-left: 10px;
}
.fa-angle-right{
  font-size: 1.6rem;
}
.about_sec_container li a {
  text-decoration: none;
  text-align: center;
  display: block;
}
@media(max-width:960px) {
  .about_sec_container {
    flex-direction: column;
    align-items: center;
    margin: 0 16px;
  }
  .about_sec_img {
    height: 180px;
  }
}
.product-info {
  max-width: 1272px;
  margin: 0 auto;
}
/*.slider▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
/*横幅100%左右余白無し*/
.slider {
  width: 100%;
  padding: 0;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整10px➡16px*/
.slider .slick-slide {
  margin: 0 1.6rem;
}
/*liに記載されるclassにposition: relative;はテキスト(h4)を画像上に配置する為*/
.slick-slide {
  position: relative;
}

.slider h4 {
  position: absolute;
  left: 60px;
  bottom: 1.6rem;
  text-align: center;
  z-index: 9;
}
.slider img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 40px;
}
/*ドットナビの設定*/
.slick-dots {
  margin: 1.6rem 0; /*ドットナビとslick-slideの余白上20px➡上下16px*/
  text-align: center;
}
.slick-dots li {
  display: inline-block;
  margin: 0 1.4rem; /*ドットナビの間隔5px➡14px*/
}
.slick-dots button {
  display: block;
  outline: none;
  width: 1.6rem; /*ドットボタンのサイズ8px➡14px*/
  height: 1.6rem; /*ドットボタンのサイズ8px➡14px*/
  border-radius: 50%;
  background: #ccc; /*ドットボタンの色*/
  color: transparent;
}
.slick-dots .slick-active button {
  background: #383e42; /*ドットボタンの現在地表示の色*/
}
/*960px以下（タブレット520〜960pxのブレイクポイント）はマウス操作では無くタッチ操作です。
ドットボタンのデザインは、見た目＜操作性！ですので指で押せる間隔や大きさにする。若しくは消す*/
@media (max-width : 959px) {
  .slick-dots {
    margin: 2.6rem 0 1.8rem;
  }
  .slick-dots li {
    margin: 0 2.4rem;
  }
  .slick-dots button {
    width: 2.4rem;
    height: 2.4rem;
    background: #eee;
  }
  .slick-dots .slick-active button {
    background: #383e42;
  }
}
@media (max-width : 519px) {
  .slider .slick-slide {
    margin: 0 0.8rem;
  }
  .slick-slide h3 {
    bottom: 0.8rem;
  }
}