@charset "utf-8";
#root {
  overflow: hidden;
}
.pg__fv {
    background-image: url(https://kisatosandworld.com/system_panel/uploads/images/pg-fv-history.png);
}

.history {
  padding-top: clamp(3.75rem, 1.25rem + 5.21vw, 7.5rem);
}
.history__inner {
  padding: 0 clamp(1.25rem, -9.917rem + 23.26vw, 18rem);
}
.accordion-header {
      background-color: #FFF;
    padding: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem) clamp(1.125rem, 0.542rem + 1.22vw, 2rem);
  padding-right: 50px;
    margin: clamp(1.25rem, 0.083rem + 2.43vw, 3rem) 0 0;
    transition: background .3s ease;
    cursor: pointer;
    position: relative;
}
.accordion-header::before,
.accordion-header::after{
  position:absolute;
  content:'';
  top:0;
  right:clamp(1.25rem, 0.083rem + 2.43vw, 3rem);
  bottom:0;
  width:clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
  height:clamp(0.125rem, 0.042rem + 0.17vw, 0.25rem);
  margin:auto;
  background:#151E2F;
}
.accordion-header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
.accordion-header.active::after {
  transform:rotate(0deg);
}
.accordion-header h2 {
  padding-left: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
  position: relative;
    font-size: clamp(1.125rem, 0.875rem + 0.52vw, 1.5rem);
    font-weight: 700;
  display: flex;                /* タイトルと丸を横並びにする */
  align-items: center;
}
.accordion-header h2::before{
      position: absolute;
    content: "";
  display: block;
    left: 0;
    background-color: #FE4401;
    height: clamp(0.5rem, 0.25rem + 0.52vw, 0.875rem);
  width: clamp(0.5rem, 0.25rem + 0.52vw, 0.875rem);
  border-radius: 50%;
}
.accordion-content {
  display: block;
      padding: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem) clamp(2.5rem, 0.833rem + 3.47vw, 5rem);
    display: flex;
    flex-direction: column;
    row-gap: clamp(1.25rem, 0.083rem + 2.43vw, 3rem);
}
.history__item {
      display: flex;
    flex-direction: column;
    row-gap: clamp(0.625rem, 0.292rem + 0.69vw, 1.125rem);
}
.history-item__text a {
  text-decoration: underline;
}
.history-item__year {
      font-size: clamp(1.125rem, 1.042rem + 0.17vw, 1.25rem);
    font-weight: 500;
    font-family: "Zen Kaku Gothic New", sans-serif;
}
.history-item__content {
      font-weight: 400;
    font-family: "Zen Kaku Gothic New", sans-serif;
      display: flex;
    flex-direction: column;
    row-gap: 11px;
}

.slider {
      padding-top: clamp(5rem, 1.667rem + 6.94vw, 10rem);
    padding-bottom: clamp(10.938rem, 6.229rem + 9.81vw, 18rem);
    position: relative;
}
.swiper {
    position: relative;
    z-index: 100;
  width: 100vw;
}
.swiper-wrapper {
  transition-timing-function: linear;
}
.swiper-slide img {
  height: auto;
  width: 100%;
    aspect-ratio: 387/239;
    object-fit: cover;
}

.view__btn {
        position: absolute;
    bottom: clamp(5rem, 1.667rem + 6.94vw, 10rem);
    z-index: 200;
    width: 100%;
    display: flex;
    justify-content: center;
}
.view-btn {
        position: relative;
    width: clamp(8.063rem, 2.896rem + 10.76vw, 15.813rem);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    padding-top: clamp(1.875rem, 1.458rem + 0.87vw, 2.5rem);
    justify-content: center;
    text-decoration: none;
    background-image: url("https://kisatosandworld.com/system_panel/uploads/images/orange-btn-bg.png");
    background-size: cover;
    background-position: center;
}
/* オレンジグラデーション */
.view-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(232, 80, 28, 0.92) 0%,
    rgba(232, 80, 28, 0.8) 50%,
    rgba(232, 80, 28, 0) 100%
  );
  z-index: 1;
}
/* テキスト */
.view-btn__text {
      position: relative;
    z-index: 2;
    color: #fff;
    font-size: clamp(1.063rem, 0.396rem + 1.39vw, 2.063rem);
    line-height: 1.5;
    font-weight: 900;
    text-align: center;
    font-family: serif;
    letter-spacing: 0.08em;
}
/* 線 */
.view-btn__line {
        position: absolute;
    left: 50%;
        width: clamp(3.75rem, 2.167rem + 3.3vw, 6.125rem);
    bottom: clamp(2.375rem, 0.5rem + 3.91vw, 5.188rem);
    transform: translateX(-50%);
    height: 1px;
    background: rgba(255,255,255,0.9);
    z-index: 2;
}
/* 点 */
.view-btn__glow {
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
      width: clamp(0.875rem, 0.458rem + 0.87vw, 1.5rem);
    height: clamp(0.875rem, 0.458rem + 0.87vw, 1.5rem);
  border-radius: 50%;
  background: #fff;
  filter: blur(1px);
  transition:
    left 0.9s cubic-bezier(.65,.05,.36,1),
    width 0.9s ease,
    height 0.9s ease,
    background 0.9s ease;
}
/* ホバー */
.view-btn:hover .view-btn__glow {
  left: calc(100% - 14px);
  background: radial-gradient(
    circle,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.9) 25%,
    rgba(255,255,255,0.45) 55%,
    rgba(255,255,255,0.12) 80%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(2px);
}



@media (max-width: 767px) {
  .accordion-header h2::before {
    top: 8px;
  }
}