@charset "UTF-8";

/* ====================================
	共通スタイル
==================================== */
/* history用上部ナビ */
.history-nav__wrapper {
  border-bottom: 1px solid var(--light-gray);
  padding-bottom: 3rem;
}

.history-nav-pc {
  display: none;
}

.history-nav-pc__list li a,
.history-nav-bottom__list li a {
  width: 100%;
  display: block;
  text-align: center;
}

.history-nav-sp {
  padding-top: 3rem;
}

.history-nav-sp__list {
  width: 100%;
  font-size: 1.4rem;
  padding: 0.8rem;
  text-align: center;
  border: 1px solid #000;
  appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 0.6rem center;
  background-size: 3rem;
}

/* history用下部ナビ */
.history-nav-bottom__wrapper {
  display: none;
}

/* タイトル */
.history__main-title {
  font-size: 3.4rem;
  font-weight: 600;
  text-align: center;
  padding-top: 4rem;
  margin-bottom: 4rem;
}

.history__main-lead {
  font-size: 1.6rem;
  text-align: center;
}

/* ====================================
	ホバー、マウスポインタが有効なデバイス
==================================== */
@media (hover:hover) and (pointer: fine) {

  .history-nav-pc__list a:hover,
  .history-nav-bottom__list a:hover {
    background-color: var(--light-gray);
  }

  .history-nav-pc__list a:hover,
  .history-nav-bottom__list a:hover {
    text-decoration: none;
  }
}

/* ====================================
	480px以上専用スタイル
==================================== */
@media screen and (width >=480px) {}

/* ====================================
	768px未満専用スタイル
==================================== */
@media screen and (width <768px) {}

/* ====================================
	768px以上専用スタイル
==================================== */
@media screen and (width >=768px) {

  .history-nav-sp {
    display: none;
  }

  /* history用下部ナビ */
  .history-nav-bottom__wrapper {
    display: block;
    padding-block: 5rem 3rem;
  }

  .history-nav-bottom__title {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: -2rem;
  }

  .history-nav-bottom {
    margin-top: 5rem;
  }

  .history-nav-bottom__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    gap: 1rem;
    font-size: 1.4rem;
  }

  /* history用下部ナビ */
  .history-nav-bottom__wrapper {
    border-top: 1px solid var(--light-gray);
    padding-block: 5rem 5rem;
  }

  .history-nav-bottom__title {
    font-size: 2.2rem;
    margin-bottom: -1rem;
  }

  .history-nav-bottom {
    margin-top: 5rem;
  }

  .history-nav-pc {
    display: block;
    margin-top: 5rem;
  }

  .history-nav-pc__list,
  .history-nav-bottom__list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    font-size: 1.4rem;
  }

  .history-nav-pc__list li a,
  .history-nav-bottom__list li a {
    transition: ease background-color 0.3s;
  }

  .history-nav-pc__list li a,
  .history-nav-pc__active,
  .history-nav-bottom__list li a,
  .history-nav-bottom__active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 40px;
    font-weight: 300;
    border: 1px solid #000;
  }

  .history-nav-pc__active,
  .history-nav-bottom__active {
    background-color: var(--light-gray);
  }
}

/* ====================================
	768px以上1080px未満専用スタイル
==================================== */
@media screen and (768px <=width < 1080px) {}

/* ====================================
	1080px未満専用スタイル
==================================== */
@media screen and (width <1080px) {}

/* ====================================
	1080px以上専用スタイル
==================================== */
@media print,
screen and (1080px <=width) {

  /* タイトル */
  .history__main-title {
    font-size: 5rem;
    padding-top: 6rem;
  }

  .history__main-lead {
    font-size: 2rem;
  }

  .founder__main-title {
    font-size: 3.4rem;
    margin-bottom: 8rem;
  }

}

/* ====================================
	1200px以上専用スタイル
==================================== */
@media screen and (1200px <=width) {}

/* ====================================
	1280px未満専用スタイル
==================================== */
@media screen and (width <1280px) {}