@charset "UTF-8";

.products-wrap .page-content-container-inner {
  padding-inline: 0;
  max-width: unset;
}

.products-wrap .page-bread-crumbs-wrap {
  padding-inline: 20px;
  max-width: 1140px;
  margin-inline: auto;
}

.products-wrap .page-online-btn {
  padding-inline: 20px;
  margin-inline: auto;
}

.products-section {
  padding-inline: 20px;
  max-width: 1140px;
  margin-inline: auto;
}

.products-gray-box {
  background-color: var(--color-bg-light-gray);
  margin-top: 96px;
}

.products-gray-box-inner {
  padding: 32px 20px 0;
}

.products-page-head-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.products-gray-box-img-box img {
  width: 100vw;
}

/* ボタン */
.products-bg-btn {
  text-align: center;
  margin-top: 39px;
  border-radius: 1000px;
  background-image: url('../img/products/news-btn-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  overflow: hidden;
  width: fit-content;
  margin-inline: auto;
}

.products-bg-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-main-blue);
  mix-blend-mode: multiply;
}

.products-bg-btn-link {
  text-decoration: none;
  color: var(--color-white);
  display: block;
  width: 292px;
  height: 86px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 1000px;
  display: grid;
  place-content: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="16" viewBox="0 0 22 16"><path id="パス_754" data-name="パス 754" d="M21.854,8.49a.857.857,0,0,0,.059-.089.97.97,0,0,0,0-.8.844.844,0,0,0-.059-.088.99.99,0,0,0-.177-.238c-.008-.007-.01-.018-.018-.025l-8-7a1,1,0,0,0-1.317,1.5l6,5.248H1A1,1,0,0,0,1,9H18.339l-6,5.247a1,1,0,1,0,1.317,1.505l8-7c.008-.007.01-.017.018-.024a.99.99,0,0,0,.177-.238" transform="translate(0 0)" fill="%23fff"/></svg>');
  background-position: center right 25px;
  background-size: 20px auto;
  background-repeat: no-repeat;
  position: relative;
}

.products-bg-btn-link > span {
  text-align: center;
}

@media print,
screen and (min-width: 768px) {

  .products-bg-bt-wrap {
    text-align: center;
  }

  .products-gray-box-inner {
    padding: 56px 20px 0;
    max-width: 1140px;
    margin-inline: auto;
  }


  /* ボタン */
  .products-bg-btn {
    margin-top: 96px;
    background-image: url('../img/products/news-btn-bg.png');
    display: inline-block;
    transition: opacity var(--hover-duration) var(--hover-timing);
  }

  .products-bg-btn:hover {
    opacity: var(--hover-opacity);
  }

  .products-bg-btn-link {
    width: 474px;
    height: 140px;
    background-position: center right 37px;
    font-size: 18px;
  }
}

.products-main-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.7px;
  margin-top: 25px;
}

@media print,
screen and (min-width: 768px) {
  .products-page-head-title {
    font-size: 36px;
  }

  .products-main-text {
    font-size: 18px;
    margin-top: 34px;
  }
}

/* アンカーリンク */
.products-anchor-link-box {
  padding: 34px 20px;
}

.products-anchor-link-list {
  padding-left: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.products-anchor-link {
  color: var(--color-main-blue);
  font-size: 14px;
  letter-spacing: 0.5px;
  text-decoration: none;
  font-weight: 400;
  padding: 6px 36px 6px 16px;
  font-feature-settings: "palt";
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9.75" height="5.936" viewBox="0 0 9.75 5.936"><path d="M231.709,1712.232l-4.875-4.875,1.061-1.061,3.814,3.814,3.815-3.814,1.061,1.061Z" transform="translate(-226.834 -1706.296)" fill="%23006dd2"/></svg>');
  background-position: right 16px center;
  background-size: 10px;
  background-repeat: no-repeat;
  word-break: break-all;
  background-color: var(--color-white);
  border-radius: 1000px;
}

@media print,
screen and (min-width: 768px) {

  .products-anchor-link-box {
    padding: 32px 20px;
    max-width: 1140px;
    margin-inline: auto;
  }

  .products-anchor-link-list {
    gap: 16px;
  }

  .products-anchor-link {
    font-size: 16px;
    padding: 4px 36px 4px 16px;
    transition: opacity var(--hover-duration) var(--hover-timing);
  }

  .products-anchor-link:hover {
    opacity: var(--hover-opacity);
  }
}

/*
---------------------------------------------------------------------
name: products-slider-container
スライダー
---------------------------------------------------------------------
*/
.products-slider-mv-wrap {
  position: relative;
  background-color: var(--color-main-blue);
  color: var(--color-white);
  min-height: 210px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center top 0;
  overflow: hidden;
}

/* 画像設定 */
#products-01 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-01.png');
}

#products-02 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-02.png');
}

#products-03 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-03.png');
}

#products-04 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-04.png');
}

#products-05 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-05.png');
}

#products-06 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-06.png');
}

#products-07 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-07.png');
}

#products-08 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-08.png');
}

#products-09 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-09.png');
}

#products-10 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-10.png');
}

#products-11 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-11.png');
}

#products-12 .products-slider-mv-wrap {
  background-image: url('../img/products/slide/products-12.png');
}

/* ------------------------- */

.products-slider-mv-inner {
  padding: 32px 20px 83px;
}

.products-slider-mv-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-align: center;
  overflow-wrap: anywhere;
}

.products-slider-mv-title + .products-slider-mv-text {
  margin-top: 15px;
}

.products-slider-mv-text {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  word-break: auto-phrase;
  line-height: 2;
  text-align: center;
  font-feature-settings: "palt";
}

@media print,
screen and (min-width: 768px) {
  .products-slider-mv-wrap {
    min-height: 281px;
    background-size: cover;
    background-position: center left 0;
  }

  /* 画像設定 */
  #products-01 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-01-pc.png');
  }

  #products-02 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-02-pc.png');
  }

  #products-03 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-03-pc.png');
  }

  #products-04 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-04-pc.png');
  }

  #products-05 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-05-pc.png');
  }

  #products-06 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-06-pc.png');
  }

  #products-07 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-07-pc.png');
  }

  #products-08 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-08-pc.png');
  }

  #products-09 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-09-pc.png');
  }

  #products-10 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-10-pc.png');
  }

  #products-11 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-11-pc.png');
  }

  #products-12 .products-slider-mv-wrap {
    background-image: url('../img/products/slide/products-12-pc.png');
  }

  /* ------------------------- */

  .products-slider-mv-inner {
    padding: 64px 20px 124px;
    max-width: 1140px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 334px auto;
    column-gap: 48px;
    align-items: center;
  }

  .products-slider-mv-title {
    font-size: 32px;
    text-align: left;
    letter-spacing: 0.6px;
  }

  .products-slider-mv-title + .products-slider-mv-text {
    margin-top: 0;
  }

  .products-slider-mv-text {
    font-size: 14px;
    letter-spacing: 0.6px;
    word-break: auto-phrase;
    line-height: 2.2;
    text-align: left;
  }
}

/* スライド */
.products-slider-wrap {
  overflow: hidden;
}

.products-slider-wrap .swiper-wrapper {
  display: grid;
  grid-auto-flow: column;
  margin-top: -51px;
  position: relative;
}

.products-slider-wrap .swiper {
  overflow: visible;
  padding-inline: 20px;
  padding-bottom: 48.5px;
}

.products-slider-wrap .swiper-slide {
  width: 224px;
  min-height: 272px;
  border: 1px solid var(--color-border-02);
  background-color: var(--color-white);
  padding: 0;
  display: grid;
}

.products-slide-box {
  display: grid;
  align-content: space-between;
  padding: 16px;
}

.products-slide-img-box {
  width: 100%;
}

.products-slide-img-box > img {
  width: 100%;
  object-fit: cover;
}

.products-slide-title {
  font-size: 15px;
  font-weight: 600;
  font-feature-settings: "palt";
  word-break: break-word;
  text-align: center;
  margin-top: 10px;
  color: var(--color-sub-text);
  padding-inline: 16px;
}

.products-slide-text {
  display: none;
}

.products-slide-modal-open-btn-box {
  padding-top: 16px;
}

.slide-modal-open-btn {
  border-radius: 50%;
  border: none;
  padding: 0;
  background-color: var(--color-main-blue);
  width: 32px;
  height: 32px;
  display: block;
  margin-left: auto;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g id="グループ_738" data-name="グループ 738" transform="translate(-1.5)"><line id="線_7" data-name="線 7" x1="12" transform="translate(2.5 7)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><path id="線_7-2" data-name="線 7" d="M12,0H0" transform="translate(8.5 1) rotate(90)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-width="2"/></g></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}

.slide-modal-open-btn > span {
  display: none;
}

@media print,
screen and (min-width: 768px) {

  /* スライド */
  .products-slider-wrap {
    position: relative;
  }

  .products-slider-wrap .swiper-wrapper {
    margin-top: -60px;
    width: fit-content;
  }

  .products-slider-wrap .swiper {
    padding-bottom: 80px;
    max-width: 1140px;
    position: static;
  }

  .products-slider-wrap .swiper-slide {
    width: 264px;
    min-height: 334px;
  }

  .products-slide-box {
    padding: 24px;
    transition: opacity var(--hover-duration) var(--hover-timing);
    cursor: pointer;
  }

  .products-slide-box:hover {
    opacity: 0.4;
  }

  .products-slide-title {
    font-size: 16px;
    margin-top: 5px;
  }

  .products-slide-modal-open-btn-box {
    padding-top: 24px;
  }

  .slide-modal-open-btn {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    margin-right: 0;
    background-size: 16px;
    cursor: pointer;
  }
}

/* ナビゲーションボタン */
.products-slider-btn-prev {
  left: 8px;
  transform: scale(-1);
}

.products-slider-btn-next {
  right: 8px;
}

.products-slider-btn-prev.swiper-button-disabled,
.products-slider-btn-next.swiper-button-disabled {
  display: none;
}

.products-slider-btn-prev,
.products-slider-btn-next {
  width: 48px;
  height: 48px;
  background-color: var(--color-bg-black);
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 48px);
  z-index: 10;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="16" viewBox="0 0 22 16"><path id="パス_754" data-name="パス 754" d="M21.854,8.49a.857.857,0,0,0,.059-.089.97.97,0,0,0,0-.8.844.844,0,0,0-.059-.088.99.99,0,0,0-.177-.238c-.008-.007-.01-.018-.018-.025l-8-7a1,1,0,0,0-1.317,1.5l6,5.248H1A1,1,0,0,0,1,9H18.339l-6,5.247a1,1,0,1,0,1.317,1.505l8-7c.008-.007.01-.017.018-.024a.99.99,0,0,0,.177-.238" transform="translate(0 0)" fill="%23fff"/></svg>');
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-position: center;
}

@media print,
screen and (min-width: 768px) {

  /* ナビゲーションボタン */
  .products-slider-btn-prev {
    left: 25px;
    transform: scale(-1);
  }

  .products-slider-btn-next {
    right: 25px;
  }

  .products-slider-btn-prev,
  .products-slider-btn-next {
    width: 60px;
    height: 60px;
    top: calc(50% + 60px);
    background-size: 20px auto;
    transition: opacity var(--hover-duration) var(--hover-timing);
    cursor: pointer;
  }

  .products-slider-btn-prev:hover,
  .products-slider-btn-next:hover {
    opacity: var(--hover-opacity);
  }
}

/*
---------------------------------------------------------------------
name: products-slide-modal-wrap
モーダル
---------------------------------------------------------------------
*/

.page-content-container-inner {
  position: relative;
}

.products-slide-modal-wrap {
  width: 100%;
  position: fixed;
  z-index: 100;
  inset: 0;
}

.products-slide-modal-bg {
  position: absolute;
  inset: 0;
  background-color: #003061;
  opacity: 0.8;
  z-index: 90;
}

.products-slide-modal-box {
  position: absolute;
  width: 100%;
  height: fit-content;
  margin: auto;
  inset: 0;
  padding-inline: 20px;
}

.products-slide-modal-box-inner {
  padding: 46px 20px 63.5px;
  position: relative;
  inset: 0;
  width: 100%;
  height: fit-content;
  background-color: var(--color-white);
  z-index: 100;
}

.products-slide-modal-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid var(--color-main-blue);
  background-color: var(--color-white);
  border-radius: 50%;
  display: block;
  margin-left: auto;
  background-color: var(--color-white);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31.212" height="31.212" viewBox="0 0 31.212 31.212"><defs><clipPath id="clip-path"><rect id="長方形_36" data-name="長方形 36" width="31.212" height="31.212" transform="translate(0 0)" fill="none"/></clipPath></defs><g id="グループ_191" data-name="グループ 191" transform="translate(0 0)"><g id="グループ_190" data-name="グループ 190" clip-path="url(%23clip-path)"><line id="線_30" data-name="線 30" x2="28.177" y2="28.177" transform="translate(1.517 1.517)" fill="none" stroke="%23006dd2" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.035"/><line id="線_31" data-name="線 31" x1="28.177" y2="28.177" transform="translate(1.518 1.517)" fill="none" stroke="%23006dd2" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.035"/></g></g></svg>');
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.products-slide-modal-btn span {
  display: none;
}

.products-slide-modal-img-box {
  text-align: center;
  margin-top: 25px;
}

.products-slide-modal-img-box > img {
  width: 100%;
}

.products-slide-modal-title {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-bg-black);
}

.products-slide-modal-text {
  font-size: 15px;
  margin-top: 5px;
  font-weight: 400;
  color: var(--color-bg-black);
  letter-spacing: 0.5px;
  line-height: 2;
}

.products-slide-modal-text a {
  color: var(--color-main-blue);
}

@media print,
screen and (min-width: 768px) {
  .products-slide-modal-box {
    max-width: 820px;
  }

  .products-slide-modal-box-inner {
    padding: 53px 84px 84px;
  }

  .products-slide-modal-btn {
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
    background-size: 14px;
    transition: opacity var(--hover-duration) var(--hover-timing);
  }

  .products-slide-modal-btn:hover {
    opacity: var(--hover-opacity);
  }

  .products-slide-modal-btn span {
    display: none;
  }

  .products-slide-modal-img-box {
    text-align: center;
    margin-top: 25px;
  }

  .products-slide-modal-img-box > img {
    width: 450px;
  }

  .products-slide-modal-title {
    margin-top: 20px;
    font-size: 26px;
  }

  .products-slide-modal-text {
    font-size: 16px;
    margin-top: 20px;
  }

  .products-slide-modal-text a {
    transition: opacity var(--hover-duration) var(--hover-timing);
  }

  .products-slide-modal-text a:hover {
    opacity: var(--hover-opacity);
  }
}