body {
  font-family: "Noto Sans JP", sans-serif;
  color: #222;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ビューポートの高さを100%に設定 */
}
body a {
  color: rgb(39, 183, 188);
  text-decoration: none;
}

.top-logo {
  width: 300px;
  height: auto;
  display: block;
  margin: 1rem auto;
}

main {
    flex: 1; /* メインコンテンツが残りのスペースを占める */
}

#slideshow-container {
  position: relative;
  width: 100%;
  height: 300px;
  margin: .5rem auto;
  overflow: hidden;
  border-radius: 0;
  background: #f5f5f5;
}


#slideshow-container .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#slideshow-container .slide.is-active {
  opacity: 1;
}

.h1-text{
  margin: .5rem;
  color:rgb(88, 89, 90);
  line-height: 1.2;
  font-size: 0.9rem !important;
  font-weight: normal !important;
}
.h1-text .gradient_text{
  font-weight: bold;
  background: -webkit-linear-gradient(356deg, #0090F7, #BA62FC, #F2416B, #F55600);
  background: linear-gradient(94deg, #0090f7, #ba62fc, #f2416b, #f55600);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.contents-title{
  text-align: center;
}
.contents-title span{
  display: inline-block;
  border-bottom : solid 2px rgb(192, 175, 114);
  font-size: 1.5rem;
  font-weight: 500;
}
.contents-subtitle{
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #acafb1;
  font-size: 1.2rem;
  font-weight: 400;
}

.pause-area{
  margin: 2.5rem 1rem;
  text-align: center;
}
.pause-area .pause-details{
  margin-top: 1rem;
  display: inline-block;
  text-align: left;
  font-size: 1rem;
  line-height: 1.2;
  width: 70%;
}
.alert-title{
  color: rgb(220, 53, 69);
}
.alert-text{
  color: rgb(220, 53, 69);
  font-weight: 600;
  font-size: 1.1rem;
}

.commingsoon-image {
  margin: 1rem auto;
  text-align: center;
}

.commingsoon-image video {
  width: 100%;
  max-width: 750px;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

@media (max-width: 750px) {
  .commingsoon-image video {
    max-width: 100%;
  }
}

.about-area{
  margin: 3rem 1rem;
  padding: 0 5rem;
}
.about-content {
  margin-top: 2rem;
}
.about-content .about-left,
.about-content .about-right{
  display: inline-block;
  width: 49%;
  position: relative;
  margin: 0;
  padding: 0;
}
.about-content .about-left h4{
  position: relative;
  z-index: 2;
  color: rgb(39, 183, 188);
  text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
  font-weight: 700;
  font-size: 1.5rem;
  margin:0;
}
.about-content .about-left h5{
  position: relative;
  z-index: 2;
  color: #222;
  text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
  font-weight: 500;
  font-size: 1.25rem;
  margin:0;
}
.about-content .about-left .about-badges{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 130px;
  padding: .5rem 5rem;
  gap: 1rem;
}
.about-content .about-left .about-badges .badge{
  text-align: center;
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.about-content .about-left .about-badges .badge::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 55%
  );
  transform: translateX(-100%);
  animation: shine 3s infinite;
}
@keyframes shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.about-content .about-left .about-badges .badge img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.piston-image{
  width: 70px;
  height: auto;
  position: absolute;
  animation: pistonMove 3s infinite ease-in-out;
  opacity: 0.9;
  z-index: 1;
}
.bgp-pine{ top: 10px; right: 20px; }
.bgp-mango{ bottom: 110px; left: 10px; }
.bgp-whale{ bottom: 80px; right: 5px; }
@media (min-width: 1200px) {
  .bgp-pine{ top: 20px; right: 20px; }
  .bgp-mango{ bottom: 100px; left: 10px; }
  .bgp-whale{ bottom: 40px; right: 5px; }
}
@keyframes pistonMove {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(30px); }
  100% { transform: translateY(0); }
}
.about-content .about-right {
  vertical-align: top;
}
.about-content .about-right img{
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1000px) {
  .about-content .about-left,
  .about-content .about-right{
    width: 100%;
  }
}
@media (max-width: 750px) {
  .about-area{
    padding: 0 .5rem;
  }
  .about-content .about-left .about-badges{
    height: 130px;
    padding: .5rem 3rem;
  }
}

.about-bottom{
  width: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.about-bottom .about-bottom-col{
  width: 30%;
  height: 100%;
}
.about-bottom .about-bottom-col iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 8px;
  object-fit: cover;
}
@media (max-width: 1000px) {
  .about-bottom{
    flex-direction: column;
  }
  .about-bottom .about-bottom-col{
    width: 100%;
  }
}

.features-area{
  margin: 3rem 1rem;
  padding: 0 5rem;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
.feature-card {
  background: #fff;
  border-radius: .5rem;
  padding: 0;
  text-align: center;
  border: 1px solid #e0e0e0;
}
.feature-image {
  width: 100%;
  margin-bottom: .5rem;
}
.feature-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: .5rem .5rem 0 0;
}
.feature-card h3 {
  color: #222;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.feature-card p {
  text-align: left;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0.5rem .5rem;
}

@media (max-width: 1000px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 750px) {
  .features-area {
    padding: 0 0.5rem;
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

}


.news-area{
  margin: 3rem 1rem;
  padding: 0 5rem;
}
.news-slider{
  margin-top: 2rem;
  --gap: 1.25rem;
  --cards-per-view: 4; /* PC: 4枚表示 */
  overflow: hidden;
  width: 100%;
}
.news-track{
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform .6s ease;
}
.news-card{
  flex: 0 0 calc((100% - var(--gap) * (var(--cards-per-view) - 1)) / var(--cards-per-view));
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: .5rem;
  overflow: hidden;
}
.news-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.news-body{ padding: .75rem; text-align: left; }
.news-meta{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.chip{
  display:inline-block; padding:.2rem .5rem; border-radius:.75rem;
  font-size:.75rem; color:#fff;
}
.chip.is-notice{ background:#27b7bc; }
.chip.is-media{ background:rgb(41, 167, 225); }
.chip.is-campaign{ background:#c0af72; }
.date{ color:#888; font-size:.8rem; }
.news-title{ margin:.25rem 0; font-size:1rem; font-weight:600; color:#222; }
.news-excerpt{ margin:0; color:#555; font-size:.9rem; line-height:1.6; }

@media (max-width: 1000px){
  .news-area{ padding: 0 3rem; }
  .news-slider{ --cards-per-view: 2; } /* タブレット: 2枚表示 */
}
@media (max-width: 750px){
  .news-area{ padding: 0 .5rem; }
  .news-slider{ --cards-per-view: 1; } /* スマホ: 1枚表示(幅100%) */
}

.news-excerpt{ 
  margin:0; 
  color:#555; 
  font-size:.9rem; 
  line-height:1.6;
  max-height: 6em; /* 約6行分 */
  overflow: hidden;
  position: relative;
}
.news-excerpt::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95));
  pointer-events: none;
}


footer{
  color:#fff;
  background-color: #666 !important;
  font-size: .8rem;
  padding: .5rem;
  padding-bottom: 10px; /* フッターの内側の余白 */
  text-align: center; /* テキストを中央揃え */
}

.footer-logo {
  width: 250px;
  height: auto;
  display: block;
  margin: .1rem auto;
}
.copyright-text{
  text-align: center;
  margin-top: .5rem;
}


@media (max-width: 750px) {
  #slideshow-container {
    height: unset;
    aspect-ratio: 2.16 / 1;
    background-color: #fff;
  }
  .pause-area .pause-details{
    width: 98%;
    line-height: 1.1;
    font-size: .95rem;
  }
}

@media (min-width: 1300px) {
  .about-area{
    padding: 0 10%;
  }
  .features-area{
    padding: 0 10%;
  }
}