@charset "UTF-8";
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styling */
body {
  font-family: "Noto Sans JP", "Inter", sans-serif;
  font-weight: 400;
  color: #434b65;
  line-height: 1.7;
  letter-spacing: 0.05em;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Image Gallery Styling */
.wrapper {
  width: 100%;
  max-width: 750px; /* Limit width on larger screens */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0; /* Spacing between images */
}

.wrapper img {
  width: 100%; /* Images adapt to container width */
  display: block;
  max-width: 100%;
  height: auto;
}

/* Responsive Styling */
@media screen and (min-width: 750px) {
  body {
    padding: 0 20px; /* Add some padding around the gallery for large screens */
  }
}

/* Image container */
.cta-container {
  position: relative;
  width: 100%;
  max-width: 750px; /* Image container width */
}

.cta-container img {
  width: 100%; /* Responsive image */
  height: auto;

}

/* Link areas */
.link-area {
  position: absolute;
  display: block;
  z-index: 10;
}

/* Link 1: Top-left corner */
.link-top {
    bottom: 23.2%;
    right: 15%;
    width: 70%;
    height: 11%;
    background: rgb(0 0 255 / 0%);
}


/* Link 2: Bottom-right corner */
.link-bottom {
    background: rgb(0 0 255 / 0%);
    bottom: 10.2%;
    right: 15%;
    width: 70%;
    height: 11%;
}
/* Background color section */
.bg-purple {
  background: #e0d9f0;
}
.bg-beige {
  background: #fafafa;
}

/*-----------------------------------------
    header
------------------------------------------*/

.header {
  display: flex;                /* 横並びにする基本設定 */
  align-items: center;          /* 縦位置を中央揃え */
  justify-content: space-between; /* 両端に配置（左：ロゴ／右：テキスト）*/
  padding: 10px 20px;           /* 余白 */
  z-index: 2;
}
@media screen and (max-width: 750px) {
  .header {
    padding: 10px 10px;
  }
}

.header-logo img {
  height: 50px;                 /* ロゴサイズ調整（適宜変更）*/
  display: block;
  width: auto;
}
@media screen and (max-width: 750px) {
  .header-logo img {
    height: 23px;               /* ロゴサイズ調整（適宜変更）*/
  }
}

.header-txt {
  font-size: 1.5rem;
    font-weight: bold;

}
@media screen and (max-width: 750px) {
  .header-txt {
    font-size: 0.8rem;
  }
}



/*-----------------------------------------
    mv背景画像
------------------------------------------*/



/* 中のコンテンツ */
.mv-content {
  position: relative;
    z-index: 4;
    font-size: 2.5rem;
    display: inline;
    margin: 0 0 0 5%;
    background-color: #434b65;
    color: #e0d9f0;
    font-weight: bold;
    padding: 4px 0 2px 6px;
    line-height: 1.6;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    top: 26%;
}

.mv-content span {
  background-color: #434b65;
    color: #e0d9f0;
    font-weight: bold;
    padding: 2px 0 0 5px;
}

@media screen and (max-width: 750px) {
  .mv-content {
  position: relative;
        font-size: 1.5rem;
        margin: 0 0 0 5%;
        top: 5%;
}
}



/* 自動クロスフェード（3枚・合計18sサイクル） */
.bg-slider {
  --cycle: 8s;           /* 1周の時間（例：3枚×6秒） */
  --h: 840px;
  position: relative;
  height: var(--h);
  overflow: hidden;
  isolation: isolate;
  margin-top: -160px;
}
@media screen and (max-width: 750px) {
  .bg-slider {
    --h: 438px;
    margin: 0;
  }
}

.bg-slider .bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  animation: fade var(--cycle) linear infinite;
  will-change: opacity;           /* フリッカー防止のヒント */
  backface-visibility: hidden;    /* Safari対策 */
  transform: translateZ(0);       /* iOSでのチラつき軽減 */
}

/* 3枚の等間隔ディレイ（1/3サイクルずつずらす） */
.bg-slider .bg:nth-child(1) { animation-delay: 0s; }
.bg-slider .bg:nth-child(2) { animation-delay: calc(var(--cycle) / 3); }
.bg-slider .bg:nth-child(3) { animation-delay: calc(var(--cycle) * 2 / 3); }

/* フェードの重なりを作る：次が上がる前に前を下げ切らない */
@keyframes fade {
  0%   { opacity: 0; }   /* ここから上がり始め */
  10%  { opacity: 1; }   /* 10%かけてフェードイン */
  30%  { opacity: 1; }   /* 表示キープ */
  40%  { opacity: 0; }   /* 10%かけてフェードアウト */
  100% { opacity: 0; }   /* 待機 */
}

/* 動きを控えたいユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
  .bg-slider .bg { animation: none; }
  .bg-slider .bg:nth-child(1) { opacity: 1; }
}


/*-----------------------------------------
    mvボタン
------------------------------------------*/
.mv-btn {
  position: absolute;
    top: 1200px;
    right: 50%;
    transform: translateX(50%);
}
@media screen and (max-width: 750px) {
  .mv-btn {
        top: 700px;
        right: 50%;
        transform: translateX(50%);
    }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.mv-btn img {
  width: 260px;
    height: auto;
    transition: 0.3s;
    animation: pulse 2s infinite;
}
@media screen and (max-width: 750px) {
  .mv-btn img {
  width: 160px;
        height: auto;
        transition: 0.3s;
}
}

.mv-btn img:hover {
  transform: scale(1.05);
}

/*-----------------------------------------
    追従ボタン
------------------------------------------*/
.cv-fixed-image-button {
  position: fixed;
  bottom: 1rem;
  left: 230px;
  width: 100%;
  padding: 0;
  text-align: center;
  z-index: 9999;
  display: none; /* 初期非表示 */
}

.cv-fixed-image-button img {
  max-width: 270px;
  width: 90%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .cv-fixed-image-button {
    padding: 1px 0;
        bottom: 0;
        text-align: right;
        left: 0;
  }
  .cv-fixed-image-button img {
    max-width: 130px;

  }
}

footer.footer {
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    color: #ffffff;
    background-color: #434b65;
}