/**
 * トップページ専用のスタイル（About セクションと施工事例カードは common.css）
 *
 * 1. 動画とキャッチコピー
 * 2. お知らせ
 * 3. Business
 * 4. 施工事例（見出し部分）
 * 5. 下部の画像タイル
 */

/* ==========================================================
   1. 動画とキャッチコピー
   ========================================================== */
.cover-top-movie-title {
  position: relative;
  line-height: .7;
}
.text-top-movie {
  position: absolute;
  bottom: 12%;
  left: 3%;
  color: #fff;
  font-size: 4.6em;
  font-weight: 600;
}
.text-title {
  line-height: .3;
}
.text-title-sub {
  line-height: .3;
  font-size: 39px;
}
@media screen and (max-width: 600px) {
  .cover-top-movie-title video {
    height: 80vh;
    object-fit: cover;
  }
  .text-top-movie {
    max-width: 100%;
    font-size: 2.3em;
  }
  .text-title-sub {
    font-size: 18px;
  }
}

/* ==========================================================
   2. お知らせ
   ========================================================== */
.cover-top-news {
  display: flex;
  width: 100%;
  color: #fff;
  background: #607d8b;
}
.top-news-title {
  background: #435f6d;
}
.top-news-text {
  padding: 0 70px;
}
.top-news-contents {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 30px;
}
.news-ticker-text {
  font-size: .8em;
}
.news-ticker-text a {
  color: #fff;
  transition: .5s;
}
.news-ticker-text:hover a {
  opacity: .7;
}
@media screen and (max-width: 600px) {
  .top-news-title {
    width: 25%;
  }
  .top-news-text {
    padding: 0 0 0 15px;
  }
  .top-news-contents {
    padding: 0 15px;
  }
}

/* ==========================================================
   3. Business
   ========================================================== */
.top-business-sec {
  position: relative;
  padding-top: 80px;
}
.cover-top-business {
  max-width: 1600px;
  margin: 0 auto;
}
.left-cover-top-business {
  padding-top: 50px;
}
.right-cover-top-business {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1400px;
  margin-bottom: 50px;
  padding: 0;
}
.right-cover-top-business li {
  width: 48%;
  margin: 50px 0 20px;
  list-style: none;
}
.right-cover-top-business li img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
/* 背景の大きな英字 */
.cover-business-background-text {
  position: absolute;
  right: 70px;
  bottom: 0;
  z-index: -1;
}
.business-background-text {
  color: #f0f3f7;
  font-size: 10em;
  font-weight: 700;
}
@media screen and (max-width: 600px) {
  .right-cover-top-business {
    display: block;
  }
  .right-cover-top-business li {
    width: 100%;
  }
  .cover-business-background-text {
    right: 0;
    bottom: 2%;
  }
  .business-background-text {
    font-size: 4em;
  }
}

/* 背景の薄いグレーの帯（画面に入ると左右から伸びる。main.js が .is-visible を付ける） */
.top-business-background-toleft,
.top-business-background-toright {
  position: absolute;
  width: 92%;
  height: 48%;
}
.top-business-background-toleft {
  right: 0;
}
.top-business-background-toright {
  left: 0;
}
.top-business-background-toleft::before,
.top-business-background-toright::before {
  content: '';
  position: absolute;
  top: 0;
  display: block;
  width: 0;
  height: 100%;
  background: #fafafa;
  transition: 2.2s;
}
.top-business-background-toleft::before {
  right: 0;
}
.top-business-background-toright::before {
  left: 0;
}
.top-business-background-toleft.is-visible::before,
.top-business-background-toright.is-visible::before {
  width: 100%;
}

/* ==========================================================
   4. 施工事例（見出し部分）
   ========================================================== */
.top-service-sec {
  padding: 60px 0 50px;
}
@media screen and (max-width: 600px) {
  .top-service-sec {
    margin-top: 30px;
    padding: 30px 0 0;
  }
}

/* ==========================================================
   5. 下部の画像タイル（template-parts/front/links.php）
   ========================================================== */
.top-category-sec {
  margin: 140px 0 120px;
}
.cover-top-category {
  width: 100%;
  margin: 0 auto;
}
.cover-top-category ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-left: 0;
  overflow: hidden;
  list-style: none;
}
.cover-top-category li {
  width: 30%;
  margin-bottom: 40px;
  overflow: hidden;
}
.category-tile {
  height: 260px;
  background-size: cover;
  background-position: center;
}
.category-tile:hover {
  transform: scale(1.04);
  transition-duration: 1.5s;
}
.category-tile--01 { background-image: url(/wp-content/uploads/2021/12/240_F_232275575_KPWZKbBDlboo0K5LTxYrboQNuRw4XxUh.jpg); }
.category-tile--02 { background-image: url(/wp-content/uploads/2021/12/1000_F_295578728_IBwhX6MS5jtVcUZZke36dhlxMVLH2BxB.jpg); }
.category-tile--03 { background-image: url(/wp-content/uploads/2021/12/240_F_282023709_33FTer7cxPxadtZ8xm22FVsVs2KGOWyI.jpg); }
.category-tile--04 { background-image: url(/wp-content/uploads/2021/12/240_F_281897358_3rj9ZBSZHo5s0L1ug7uuIHadSxh9Cc75.jpg); }
.category-tile--05 { background-image: url(/wp-content/uploads/2021/12/240_F_282982490_lW3HEsTNO3XRcfJV9VKidJRchXbdXEj9.jpg); }
.category-tile--06 { background-image: url(/wp-content/uploads/2022/01/240_F_271532779_LizYlX9U9wckiKRBVlVtToPalvcF11cC.jpeg); }
.category-contents {
  height: 260px;
  background-color: rgba(0, 0, 0, .25);
  transition: .5s;
}
.category-contents:hover {
  background-color: rgba(0, 0, 0, 0);
}
.category-contents h3 {
  margin: 0;
  color: #fff;
  line-height: 260px;
  text-align: center;
}
@media screen and (max-width: 600px) {
  .cover-top-category li {
    width: 49%;
    margin-bottom: 10px;
  }
  .category-tile {
    height: 180px;
  }
  .category-contents h3 {
    line-height: 180px;
  }
}