@charset "UTF-8";

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "NotoSansJpR", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none
}

/*=========================================================

First View　ファーストビュー

==========================================================*/
.fv {
  height: 474px;
  position: relative;
  color: var(--white);

  /* ビデオ */
  video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 20px;
    left: 0;
    aspect-ratio: 16/9;
    z-index: -100;
  }
}

/* ---------------------------------------------------------
  PC（画面幅 768px 以上）
  First View　ファーストビュー
---------------------------------------------------------- */
@media (min-width: 768px) {
  .fv {
    height: 680px;
  }

  /* 英文ページ */
  .fv.en {
    height: 740px;
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  First View　ファーストビュー
---------------------------------------------------------- */
@media (min-width: 1024px) {

  .fv,
  /* 英文ページ */
  .fv.en {
    height: 100vh;
    min-height: 768px;

    video {
      width: 106.6%;
      height: 106.6%;
      top: -30px;
      left: -8px;
    }
  }
}


/* =========================================================
  First View ファーストビュー コンテナー
========================================================== */
.fv {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 24px;
    padding-bottom: 18px;
    height: 100%;

    .item-container {
      margin-top: auto;
      width: 100%;

    }

    .logo {
      display: none;
    }

    & hgroup {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: 14px;
      margin-top: auto;
      margin-bottom: 21px;
      font-family: "NotoSerifJpB";
      color: var(--white);
      user-select: none;

      & h1 {
        font-family: "NotoSerifJpB";
        font-size: 36px;
        font-weight: 700;
        line-height: 48px;
      }

      & p {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0.54px;
      }
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 768px 以上）
  First View ファーストビュー コンテナー
---------------------------------------------------------- */
@media (min-width: 768px) {
  .fv {
    .container {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 0;
      padding-top: 262px;

      .item-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        height: 720px;
        overflow-x: auto;
        overflow-y: hidden;
      }

      .logo {
        width: 486px;
        height: auto;
      }

      & hgroup {
        margin-top: 0;
        gap: 28px;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);

        & br {
          display: none;
        }

        & h1 {
          /* 画面幅1024pxのとき、フォントサイズ60pxを基準 60 / (1024/100)*/
          font-size: clamp(48px, 5.859375vw, 60px);
          /* 画面幅1024pxのとき、ラインヘイト48pxを基準 48 / (1024/100)*/
          line-height: clamp(38px, 4.6875vw, 48px);
          text-align: center;
        }

        & p {
          /* 画面幅1024pxのとき、フォントサイズ24pxを基準 24 / (1024/100)*/
          font-size: clamp(19px, 2.34375vw, 24px);
          line-height: 24px;
          letter-spacing: 0.72px;
          text-align: center;
        }
      }
    }
  }

  /* 英文ページ */
  .fv.en {
    .container {
      padding-top: 280px;

      & hgroup {
        /* margin-top: 30px; */
        margin-top: 0;
        margin-bottom: 0;
        gap: 24px;
        font-family: "CardoB";

        & h1 {
          font-size: clamp(48px, 5.859375vw, 60px);
          line-height: clamp(68px, 4.6875vw, 70px);

          & br {
            display: block;
          }
        }
      }
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  First View ファーストビュー コンテナー
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .fv {
    .container {
      padding-right: 24px;
      padding-bottom: 71px;
      position: relative;

      .logo {
        display: block;
        position: absolute;
        top: 37px;
        left: 24px;
      }

      & hgroup {
        & h1 {
          margin-left: 48px;
        }
      }
    }
  }

  /* 英文ページ */
  .fv.en {
    .container {
      padding-top: 220px;

      .main-business {
        margin-top: 60px;
      }
    }
  }
}


/* ==========================================================
  First View ファーストビュー 主要事業
========================================================== */
.fv {
  overflow: hidden;

  .container {
    .main-business {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      gap: 4px;
      min-height: 34px;
      overflow-x: auto;
      overflow-y: hidden;
      -ms-overflow-style: none;
      scrollbar-width: none;

      &:-webkit-scrollbar {
        display: none;
      }

      cursor: grab;
      user-select: none;
      touch-action: pan-x;

      &:active {
        cursor: grabbing;
      }
    }

    .tag {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      height: 34px;
      padding: 12px 17px;
      font-family: "NotoSansJpM";
      font-size: var(--px12);
      white-space: nowrap;
      color: var(--primary);
      background-color: var(--white);
      border-radius: 100vmax;
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 768px 以上）
  First View ファーストビュー 主要事業
---------------------------------------------------------- */
@media (min-width: 768px) {
  .fv {
    .container {
      .main-business {
        /* margin-top: 43PX; */
        margin-top: 120PX;
        width: 100%;

        .tag {
          /* 画面幅1366pxのとき、フォントサイズ14pxを基準 14 / (1366/100)*/
          font-size: clamp(var(--px12), 1.02489vw, var(--px14));
        }
      }
    }
  }

  .fv.en {
    .container {
      .main-business {
        margin-top: 100PX;
      }
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  First View ファーストビュー 主要事業
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .fv {
    .container {
      .main-business {
        width: auto;
        cursor: default;

        &:active {
          cursor: default;
        }
      }
    }
  }

  /* 英文ページ */
  .fv.en {
    .container {
      .main-business {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: 72px;
      }
    }

  }
}


/* ==========================================================
  SP First View ファーストビュー バナー
========================================================== */
.banner-container-sp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 4px;

  & a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .banner {
    position: relative;

    & img {
      width: 100%;
      height: auto;
    }

    .banner__inner {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-line-pack: end;
      align-content: flex-end;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 20px 24px;
      color: var(--white);
      font-size: var(--px18);
      font-family: "NotoSerifJpSB";

      .icon {
        display: inline-block;
        margin-left: auto;
        width: 36px;
        height: 36px;
        background: url(../img/common/icon_nav_arrow.svg) center / contain no-repeat;
        -webkit-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
      }
    }

    &:hover {
      .banner__inner {
        .icon {
          background-image: url(../img/common/icon_nav_arrow_hover.svg);
        }
      }
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 768px 以上）
  SP First View ファーストビュー バナー
---------------------------------------------------------- */
/* 非表示 */
@media (min-width: 768px) {
  .banner-container-sp {
    display: none;
  }
}

/* ---------------------------------------------------------
  PC First View ファーストビュー バナー
---------------------------------------------------------- */
.banner-container-pc {
  display: none;
}

/* ---------------------------------------------------------
  PC（画面幅 768px 以上）
  PC First View ファーストビュー バナー
---------------------------------------------------------- */
@media (min-width: 768px) {
  .banner-container-pc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    max-width: 1024px;
    margin-top: 33px;
    padding-right: 24px;

    & a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

    .banner {
      position: relative;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
      flex: 1 1 0;
      max-width: 100%;

      & img {
        width: 100%;
        height: auto;
        border: 2px solid var(--white);
      }

      .banner__inner {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
        padding-right: 22px;
        color: var(--white);
        /* 画面幅1366pxのとき、フォントサイズ24pxを基準 24 / (1366/100)*/
        font-size: clamp(var(--px20), 1.756954vw, var(--px24));
        line-height: 24px;
        font-family: "NotoSerifJpSB";

        .icon {
          display: inline-block;
          width: 48px;
          height: 48px;
          background: url("../img/common/icon_nav_arrow.svg") center / contain no-repeat;
          -webkit-transition: 0.3s ease;
          -o-transition: 0.3s ease;
          transition: 0.3s ease;
        }
      }

      &:hover {
        .banner__inner {
          .icon {
            background-image: url(../img/common/icon_nav_arrow_hover.svg);
          }
        }
      }
    }

  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  PC First View ファーストビュー バナー
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .banner-container-pc {
    padding-right: 0;
  }
}



/*=========================================================

Main メインコンテンツ

==========================================================*/
.container {
  /* max-width: 1232px; */
  max-width: 1280px;
  margin-inline: auto;
}

section {
  & h2 {
    font-family: "CardoR";
    font-size: 40px;
    font-weight: 400;
    line-height: normal;
    color: var(--primary);
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Main メインコンテンツ
---------------------------------------------------------- */
@media (min-width: 1024px) {
  section {
    & h2 {
      font-size: 64px;
    }
  }
}



/*=========================================================

News ニュース

==========================================================*/
.news {
  background-color: #DFE6EA;
  /* 横スクロールバー非表示にする */
  overflow-x: hidden;

  .container {
    padding: 56px 24px;

    /* お知らせ一覧を見るリンク */
    .link-news-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      margin-left: auto;
      color: var(--primary);

      & a {
        display: flex;
        align-items: center;
        color: var(--primary);

        .icon {
          display: inline-block;
          width: 36px;
          height: 36px;
          margin-left: 12px;
          background: url("../img/common/icon_nav_arrow_hover.svg") center / contain no-repeat;
          -webkit-transition: 0.3s ease;
          -o-transition: 0.3s ease;
          transition: 0.3s ease;
        }

        &:active,
        &:visited {
          color: var(--primary);
        }
      }

      &:hover {
        .icon {
          background-image: url(../img/common/icon_nav_arrow_transparent_hover.svg);
        }
      }
    }

    /* PCで非表示 */
    .link-news-list.pc {
      display: none;
    }

    /* SPで表示 */
    .link-news-list.sp {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-top: 24px;
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  News ニュース
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .news {
    .container {
      padding: 60px 24px;

      /* PCで表示 */
      .link-news-list.pc {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }

      /* SPで非表示 */
      .link-news-list.sp {
        display: none;
      }

    }
  }
}

/* ==========================================================
  News ニュース タブメニュー
========================================================== */
.tab-container {
  margin-bottom: 15px;

  .news-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1px;
    padding: 1px;

    & button {
      border: none;
    }

    .tab {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      box-sizing: border-box;
      padding: 8px 0;
      outline: 1px solid var(--primary);
      background-color: var(--white);
      cursor: pointer;
      font-size: var(--px15);
      font-family: "NotoSansJpSB";
      -webkit-transition: background-color 0.3s;
      -o-transition: background-color 0.3s;
      transition: background-color 0.3s;
    }

    /* 選択状態 */
    .tab.active {
      background-color: var(--primary);
      color: var(--white);
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  News ニュース タブメニュー
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .tab-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 61px;

    .news-tabs {
      width: 608px;
    }
  }
}

/* ==========================================================
  News ニュース リスト
========================================================== */
.news-list-container {
  position: relative;
  padding: 24px;
  background-color: var(--white);

  .news-list {
    max-width: 1188px;
    list-style: none;
    margin: 0;
    padding: 0;

    .news-item {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 10px 0;
      margin-bottom: 10px;
      border-radius: 5px;

      .news-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 12px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

        /* 日付 */
        .news-date {
          font-family: "RobotoB";
          font-size: var(--px16);
          color: var(--primary);
        }

        /* ラベル */
        .news-label {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          width: 100px;
          height: 28px;
          font-family: "NotoSansJpB";
          font-size: var(--px15);
          line-height: 15px;
          color: var(--white);
          padding: 4px 10px;
          border-radius: 3px;
          white-space: nowrap;
          border-radius: 100vmax;
          background-color: var(--primary);
        }
      }

      /* タイトル */
      .news-title {
        padding: 18px 0;
        border-bottom: 1px solid var(--primary);

        & a {
          font-family: "NotoSerifJpSB";
          font-size: var(--px16);
          line-height: 1.5;
          text-decoration: none;
          color: var(--primary);

          &:hover {
            opacity: .3;
          }
        }
      }
    }
  }
}



/*=========================================================

Category カテゴリー　#スタイルは category.css

==========================================================*/



/*=========================================================

Our New Service ニューサービス

==========================================================*/
.our-new-service {
  background-color: #DFE6EA;
}

/* ==========================================================
  Our New Service ニューサービス コンテナー
========================================================== */
.our-new-service {
  .container {
    padding: 56px 24px;
  }
}

/* ==========================================================
  Our New Service ニューサービス　バナー
========================================================== */
.our-new-service {
  .container {
    .banner-container {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: 16px;
      padding-top: 24px;

      .banner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        background-color: var(--white);

        & img {
          display: block;
          width: 100%;
          height: auto;
          -webkit-transition: all .3S;
          -o-transition: all .3S;
          transition: all .3S;

          &:hover {
            opacity: 0.2;
          }
        }
      }
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 768px 以上）
  Our New Service ニューサービス　バナー
---------------------------------------------------------- */
@media (min-width: 768px) {

  .our-new-service {
    .container {
      .banner-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;

        .banner {
          -webkit-box-flex: 1;
          -ms-flex: 1 1 0px;
          flex: 1 1 0;
          max-width: 100%;

          & img {
            -o-object-fit: cover;
            object-fit: cover;
            max-width: 400px;
          }
        }
      }
    }
  }
}


/*=========================================================

Footer フッター

==========================================================*/

.footer {
  background-color: var(--primary);
  color: var(--white);
  overflow-x: hidden;

  & a {
    text-decoration: none;
  }

  .container {
    padding: 24px;
    margin-inline: auto;
    /* max-width: 1232px; */
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Footer フッター
---------------------------------------------------------- */
 @media (min-width: 1024px) {
  .footer {
    .container {
      padding: 60px 24px;
    }
  }
}


/* ==========================================================
  Footer フッターロゴ
========================================================== */
.footer {
  .container {
    .logo-footer {
      width: 211px;
      height: auto;
      margin-bottom: 24px;
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Footer フッターロゴ
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .footer {
    .container {
      .logo-footer {
        width: 292px;
        margin-bottom: 60px;
      }
    }
  }
}


/*==========================================================
Footer フッターメニュー
==========================================================*/
.footer-menu {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  margin: 0;

  /* 見出し（サブメニューあり） */
  .footer-menu-trigger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    color: var(--white);
    font-size: var(--px15);
    font-family: "NotoSansJpSB";
    line-height: 18px;
    padding-bottom: 12px;
    cursor: pointer;

    &:hover {
      color: var(--white);
    }
  }

  /* 見出し（サブメニューなし） */
  .menu-link {
    display: block;
    padding-bottom: 12px;
    font-family: "NotoSansJpSB";
    font-size: var(--px16);
    color: var(--white);

    &:hover {
      color: var(--accent);
    }
  }

  /* サステナビリティのカラム */
  .menu-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
  }

  /* SP画面でサブメニュー内のメインメニュー項目を表示（アコーディオン対策） */
  .footer-menu-item .footer-menu-item-submenu {

    #menu-item-campany,
    #menu-item-about,
    #menu-item-ir,
    #menu-item-sustainability {
      display: list-item;
    }
  }
}

/* 採用情報のセレクタ */
li.menu-column>div.footer-menu-item.no-submenu:last-child>a {
  padding-bottom: 0;
}

/* ---------------------------------------------------------
  PC（画面幅 768px 以上）
  Footer フッターメニュー
---------------------------------------------------------- */
@media (min-width: 768px) {
  .footer-menu {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Footer フッターメニュー
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .footer-menu {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);

    /* 見出し */
    .footer-menu-trigger {
      padding-bottom: 28px;

      &:hover {
        color: var(--accent);
      }
    }

    /* サブメニューなし */
    .footer-menu-item.no-submenu {
      margin-top: 18px;
    }

    /* SP画面で表示（アコーディオン対策）しているサブメニュー内のメインメニュー項目を非表示 */
    .footer-menu-item .footer-menu-item-submenu {

      #menu-item-campany,
      #menu-item-about,
      #menu-item-ir,
      #menu-item-sustainability {
        display: none;
      }
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1366px 以上）
  Footer フッターメニュー
---------------------------------------------------------- */
@media (min-width: 1366px) {
  .footer-menu {
    gap: 92px;
  }
}


/*==========================================================
Footer メニューアイコン
==========================================================*/
/* Icon　プラス */
.footer {
  .icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 1px 1px 0 8px;
    position: relative;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    background: var(--white);
    border-radius: 50%;

    &:before,
    &:after {
      content: "";
      display: block;
      position: absolute;
      background-color: var(--primary);
      -webkit-transition: background 0.2s;
      -o-transition: background 0.2s;
      transition: background 0.2s;
    }

    &:before {
      width: 70%;
      height: 1px;
      left: 15%;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    &:after {
      width: 1px;
      height: 70%;
      left: 50%;
      top: 15%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }
}

/* Icon　マイナス　閉じる */
.footer {
  .footer-menu-item.is-open .icon {
    transform: rotate(90deg);

    &:before {
      opacity: 0;
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Footer メニューアイコン
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .footer {
    .icon {
      display: none;
    }
  }
}


/*==========================================================
Footer フッターサブメニュー
==========================================================*/
.footer .footer-menu-item-submenu {
  list-style: disc;
  padding-left: 28px;
  margin: 0;
  max-height: 0;
  font-family: "NotoSansJpR";
  font-size: var(--px14);
  overflow: hidden;
  -webkit-transition: max-height 0.35s ease;
  -o-transition: max-height 0.35s ease;
  transition: max-height 0.35s ease;

  & li {
    margin-bottom: 12px;

    /* マーカー */
    &:hover {
      color: var(--accent);
    }

    /* リンク */
    & a {
      color: var(--white);

      &:hover {
        color: var(--accent);
      }
    }
  }
}

.footer {

  /* サブメニューの高さ（多めに設定） */
  .footer-menu-item.is-open {
    .footer-menu-item-submenu {
      max-height: 500px;
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Footer フッターサブメニュー
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .footer .footer-menu-item-submenu {
    max-height: none;
    overflow: visible;

    & li {
      margin-bottom: 16px;
    }
  }
}


/*==========================================================
Footer フッターボトム
==========================================================*/
footer .footer-bottom {
  color: var(--primary);
  font-size: var(--px14);
  line-height: 14px;
  background-color: var(--white);
  margin-inline: auto;
  margin-left: calc(((100vw - 100%) / 2) * -1);
  margin-right: calc(((100vw - 100%) / 2) * -1);

  .footer-bottom-container {
    padding: 16px 24px 19px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  & img {
    width: 72px;
    height: 72px;
  }

  .footer-menu {
    font-family: "NotoSansJpR";
    font-size: var(--px14);

    & a {
      color: var(--primary);
    }
  }

  .copy-right {
    margin-top: 21px;
    margin-bottom: 0;
    font-family: "NotoSansJpR";
  }
}

/* ---------------------------------------------------------
  PC（画面幅 768px 以上）
  Footer フッターボトム
---------------------------------------------------------- */
@media (min-width: 768px) {
  footer .footer-bottom {
    .footer-menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Footer フッターボトム
---------------------------------------------------------- */
@media (min-width: 1024px) {
  footer .footer-bottom {
    .footer-bottom-container {
      display: block;
      position: relative;
      margin-inline: auto;
      max-width: 1366px;
      padding: 21px 67px;

      .footer-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        gap: 16px;

        & li {
          &:after {
            content: "|";
            margin-left: 16px;
          }

          &:last-child {
            &:after {
              content: none;
            }
          }
        }
      }

      .copy-right {
        margin-top: 18px;
      }

      .logo-jpx {
        position: absolute;
        top: 4px;
        right: 67px;
      }
    }
  }
}



/*==========================================================

Back to top トップに戻るボタン

==========================================================*/
/* 初期設定 */
:root {
  --backtotop-bottom-normal: 40px;
  --backtotop-bottom-end: 212px;
}

/* ボタン */
#backToTop {
  position: fixed;
  right: 15px;
  bottom: var(--backtotop-bottom-normal);
  width: 32px;
  height: 32px;
  border: none;
  background: url(/assets/img/common/back_to_top.svg) center / cover no-repeat;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s, bottom 0.3s;
  -o-transition: opacity 0.3s, bottom 0.3s;
  transition: opacity 0.3s, bottom 0.3s;
  z-index: 1000;
}

/* 表示 */
#backToTop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ---------------------------------------------------------
  PC（画面幅 768px 以上）
  Back to top トップに戻るボタン
---------------------------------------------------------- */
@media screen and (min-width: 768px) {
  :root {
    --backtotop-bottom-end: 212px;
  }
}

/* ---------------------------------------------------------
  PC（画面幅 1024px 以上）
  Back to top トップに戻るボタン
---------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  :root {
    --backtotop-bottom-end: 140px;
  }

  #backToTop {
    right: 40px;
    width: 48px;
    height: 48px;
  }
}