@charset "utf-8";

/*
*****************************************************************************************

mv pc

*****************************************************************************************
*/

.top-mv {
  padding-top: var(--header-height);
  position: relative;
}

.top-mv-video-wrap {
    position: relative;
}

.top-mv-video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.top-mv-video {
  aspect-ratio: 1920 / 640;
  background: transparent url(/assets/movie/_resource/pages/top/mv.webp) center/contain no-repeat;
}

.top-mv-video__control {
    display: flex;
    /*z-index: 2;*/
    position: absolute;
    right: 64px;
    bottom: 32px;
    align-items: center;
    gap: 8px;
}

@media (max-width:768px) {
  .top-mv-video {
    aspect-ratio: 750 / 860;
    background-image: url(/assets/movie/_resource/pages/top/mv-sp.webp);
  }

  .top-mv-video__control {
    right: 24px;
    bottom: 24px;
    gap: 8px;
  }

  .top-mv-video__control img {
    width: 48px;
    height: auto;
  }
}

.top-mv-video__playpause,
.top-mv-video__sound {
    position: relative;
}

.top-mv-video__playpause a,
.top-mv-video__sound a {
    display: block;
    background: center/contain no-repeat;
}

.top-mv-video__playpause a:not(.active),
.top-mv-video__sound a:not(.active) {
    display: none;
}

.top-mv-video__playpause img,
.top-mv-video__sound img {
    display: block;
    transition: opacity .2s ease-in;
}

.top-mv-video__playpause a:hover img,
.top-mv-video__sound a:hover img {
    opacity: 0;
}

.top-mv-video__play-btn:hover {
    background-image: url(/assets/movie/_resource/play-btn-green.svg);
}
.top-mv-video__pause-btn:hover {
    background-image: url(/assets/movie/_resource/pause-btn-green.svg);
}

.top-mv-video__volume-on-btn:hover {
  background-image: url(/assets/movie/_resource/volume-on-btn-green.svg);
}
.top-mv-video__volume-off-btn:hover {
  background-image: url(/assets/movie/_resource/volume-off-btn-green.svg);
}

/*
*****************************************************************************************

mv sp

*****************************************************************************************
*/

.top-mv--sp {
  position: relative;
}

.top-mv--sp img {
  width: 100%;
}

.top-mv-open-video {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 48px;
  aspect-ratio: 1;
  z-index: 1;
  background: center/contain no-repeat;
}

@media (any-hover: hover) {
  .top-mv-open-video:hover img {
    opacity: 0;
  }
  
  .top-mv-open-video:hover {
    background-image: url(/assets/movie/_resource/video-play-green.svg);
  }
}

/*
*****************************************************************************************

notice_block

*****************************************************************************************
*/

.notice_block {
  border-radius: var(--border-radius-lg);
  border: 3px solid var(--orange);
  background: #fff;
  display: flex;
  overflow: hidden;
}

.notice_title {
  background: var(--orange);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: bold;
  box-sizing: border-box;
  padding: 2em;
}

.notice_txt {
  flex: 1 1 auto;
  padding: 22px 28px 20px;
}

.notice_txt p + p {
  margin-top: 0.9em;
}

.notice-section .banner {
  margin: 30px auto 0;
  width: 1200px;
  max-width: 100%;
  text-align: center;
  position: relative;
}

.notice-section .banner:has(.top-mv-news-link) {
  margin-top: 88px;
}

@media (max-width:768px) {

  .notice_block {
      border-radius: var(--border-radius-md);
      border-width: 2px;
      display: block;
  }
  .notice_title {
      width: auto;
      font-size: inherit;
      padding: 8px 16px;
  }

  .notice_txt {
      padding: 16px 20px;
  }

  .notice-section .banner {
      margin: 24px auto 0;
  }

  .notice-section .banner:has(.top-mv-news-link) {
    margin-top: 10%;
  }

}

.top-mv-news-link {
  position: absolute;
  /* bottom: 8%;
  right: 3%; */
  top: 0;
  right: 0;
  translate: 10% -50%;
  max-width: 138px;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 100%;
  background: var(--green);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 3px 4px #FFB211;
  transition: box-shadow 0.2s ease-out;
}

.top-mv-news-link div {
  padding: 12%;
  padding-top: 16%;
}

.top-mv-news-link img {
  display: block;
}

.top-mv-news-link:hover {
  box-shadow: 0 0 #FFB211;
}

.top-mv-news-link::after {
  content: '';
  width: 10%;
  aspect-ratio: 1;
  background: url(/assets/images/_resource/shared/icons/icon-arrow-small-white.svg) center/contain no-repeat;
  position: absolute;
  translate: -50% 0;
  left: 50%;
  bottom: 7%;
  rotate: 90deg;
}

@media screen and (max-width: 768px) {
  .top-mv-news-link {
    width: 15%;
    translate: 5% -50%;
  }
}

@media screen and (max-width: 576px) {
  .top-mv-news-link {
    box-shadow: 1px 2px #FFB211;
  }
}

/*
*****************************************************************************************

ブランドサイト

*****************************************************************************************
*/

  
  .swiper-wrapper, 
  .swiper-slide {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .brand_list {
    
  }
  .brand_list a {
    display: block;
    text-decoration: none;
    border: solid 1px #ddd;
    box-sizing: border-box;
    border-radius: 15px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    /* margin: 0 4px; */
    background: #fff;
  }
  .brand_list a img {
    width: 100%;
  }
  .brand_list a p {
    display: block;
    text-align: center;
    color: #444;
    font-size: 15px;
    padding: 12px 0;
  }
  .brand_list a p span {
    display: inline-block;
  }
  .brand_list ul.slick-dots {
    display: none;
  }
  
  
  @media screen and (max-width: 993px) {
    
    .brand_list {
      
    }
    .brand_list a {
      border: solid 1px #ddd;
      box-sizing: border-box;
      border-radius: 10px;
      overflow: hidden;
      /* margin: 0 4px; */
    }
    .brand_list a p {
      display: block;
      text-align: center;
      color: #444;
      font-size: 15px;
    }
    .brand_list ul.slick-dots {
      display: none;
    }
  }
  @media screen and (max-width: 768px) {
    .brand_list {
      /* width: 100%; */
      /* padding: 20px 10px; */
      /* box-sizing: border-box; */
    }
    .brand_list a {
      border: solid 1px #ddd;
      box-sizing: border-box;
      border-radius: 10px;
      overflow: hidden;
      /* margin: 0 4px; */
    }
    .brand_list a p {
      display: block;
      text-align: center;
      color: #444;
      font-size: 14px;
      padding: 8px 3px;
      box-sizing: border-box;
    }
    .brand_list ul.slick-dots {
      display: none;
    }
  }
  @media screen and (max-width: 640px) {
    .brand_list {
      width: 100%;
      padding: 20px 10px;
      box-sizing: border-box;
    }
    .brand_list a {
      border: solid 1px #ddd;
      box-sizing: border-box;
      border-radius: 10px;
      overflow: hidden;
      /* margin: 0 4px; */
    }
    .brand_list a p {
      display: block;
      text-align: center;
      color: #444;
      font-size: 14px;
    }
    .brand_list ul.slick-dots {
      display: none;
    }
  }
  @media screen and (max-width: 480px) {
    .brand_list {
      width: 100%;
      padding: 0px 10px;
      box-sizing: border-box;
    }
    .brand_list a {
      border: solid 1px #ddd;
      box-sizing: border-box;
      border-radius: 10px;
      overflow: hidden;
      /* margin: 0 4px; */
    }
    .brand_list a p {
      display: block;
      text-align: center;
      color: #444;
      font-size: 12px;
    }
    .brand_list ul.slick-dots {
      display: none;
    }
  }
/*
*****************************************************************************************

プロ向けサイト

*****************************************************************************************
*/

@media (any-hover: hover) {
  :where(.orange) .btob-list :where(a:any-link:hover) .content-caption-subtitle {
      color: var(--orange);
  }
}

/*
*****************************************************************************************

キャンペーン・トピックス

*****************************************************************************************
*/

.topic-slider {
  --swiper-pagination-top: 100%;
  --swiper-pagination-bottom: auto;
}


/* 2603 */
.products-caption {
  text-align: center;
  font-weight: 700;
  margin: 20px 0 0;
  font-size: 18px;
  color: #515151;
}
.top-page .gfooter {
  margin-top: 0;
}

.news-release .news-list .table_column .news_date, .news-release .news-wrap .news-list-in .day {
  color: var(--black);
}
.news-release .news-list .table_column .news_date .news_icon.news_icon.news {
  background-color: #fff8e3;
}

.content-list .content-item {
  flex-grow: 0;
}