@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*color*/
/*背景色*/
/*ベース文字色*/
/*アクセント色*/
/*アクセント色*/
/*アクセント色*/
/*線*/
/*線*/
/*線*/
/*線*/
/*線*/
/*線2*/
/*font*/
/*layout*/
@keyframes slide {
  0% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }
/*==================================
　　　style.css 上書き
==================================*/
#history {
  position: relative;
  overflow: hidden; }

.his-main-images {
  height: 100vh;
  height: 100svh;
  width: 100vw;
  position: relative; }
  .his-main-images .history-main {
    width: 100%;
    height: 100svh;
    display: block;
    object-fit: cover; }
    .his-main-images .history-main source {
      width: 100%;
      height: 100svh;
      display: block;
      object-fit: cover;
      position: absolute; }
  .his-main-images img {
    width: 100%;
    height: 100svh;
    display: block;
    object-fit: cover;
    position: absolute; }

.history-sub-img {
  opacity: 0;
  position: absolute;
  z-index: 2;
  width: clamp(130px, 20vw, 400px); }

.img01 {
  top: 5%;
  left: 3%; }

.img02 {
  top: 10%;
  right: 11%; }
  @media (min-width: 768px) {
    .img02 {
      top: 10%;
      right: 9%; } }

.img03 {
  top: 25%;
  left: 15%; }
  @media (min-width: 768px) {
    .img03 {
      top: 22%;
      left: 30%; } }

.img04 {
  top: 38%;
  right: 12%; }
  @media (min-width: 768px) {
    .img04 {
      top: 30%;
      right: 18%; } }

.img05 {
  top: 45%;
  left: 4%; }
  @media (min-width: 768px) {
    .img05 {
      top: 45%;
      left: 2%; } }

.img06 {
  top: 50%;
  right: 5%; }
  @media (min-width: 768px) {
    .img06 {
      top: 55%;
      right: 30%; } }

.img07 {
  top: 65%;
  left: 2%; }
  @media (min-width: 768px) {
    .img07 {
      top: 65%;
      left: 14%; } }

.img08 {
  top: 80%;
  right: 12%; }

.history-sub-img {
  opacity: 0;
  transform: translateY(0px);
  transition: all 1s ease; }

.visible-img {
  opacity: 1;
  transform: translateY(0px); }

.reverse-img {
  opacity: 1;
  transform: translateY(0px); }

.max1280 {
  max-width: 1280px;
  margin: 0 auto; }

.speech-4th {
  position: relative; }
  .speech-4th .sign-img {
    position: absolute;
    max-width: 200px;
    bottom: 0;
    /*left: 250px;*/
    right: 50px; }
    @media (max-width: 400px) {
      .speech-4th .sign-img {
        /*padding-right: 20px;*/
        left: 50%; } }

.btn-4th {
  border-radius: 20px;
  border: 1px solid transparent;
  width: 230px;
  height: 38px;
  line-height: 40px;
  font-size: 18px;
  letter-spacing: 0.03em;
  background-color: #e7d614;
  display: block;
  margin: 0 auto;
  color: #fff;
  position: relative;
  z-index: 10;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  transition: .4s; }
  @media (max-width: 767px) {
    .btn-4th {
      width: 160px;
      font-size: 15px; } }
  .btn-4th:hover {
    background-color: transparent;
    color: #e7d614;
    border: 1px solid #e7d614;
    border-radius: 20px; }

.btn-4th_rev {
  background-color: transparent;
  color: #76664f;
  border: 1px solid #76664f;
  border-radius: 20px;
  width: 230px;
  height: 38px;
  line-height: 40px;
  font-size: 18px;
  letter-spacing: 0.03em;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  transition: .4s; }
  @media (max-width: 767px) {
    .btn-4th_rev {
      width: 160px;
      font-size: 15px; } }
  .btn-4th_rev:hover {
    background-color: #76664f;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 20px; }