/* ------------------------------------全体------------------------------------- */
/* 全体 */
#LP .wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}


/* その他過去からのものそのまま記載 */
#LP * {
  margin: 0;
  padding: 0;
}

#LP .clear {
  clear: both;
}

#LP img {
  display: block; 
  width: 100%;
  height: auto;
}

#LP a,
#LP a:hover {
  text-decoration: none;
  cursor: pointer;
}

#LP img,
#LP a,
#LP p,
#LP ul,
#LP li,
#LP div,
#LP input,
#LP h1,
#LP h2,
#LP h3,
#LP h4,
#LP h5,
#LP h6,
#LP span,
#LP textarea,
#LP table,
#LP tr,
#LP td {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 0;
  padding: 0
}

#LP {
  font-family: 'Noto Sans TC', serif;
  background-color: #fff;
}

#LP .content {
  max-width: 900px;
  margin: 0 auto;
}

#LP img.flex-img {
  width: auto;
  max-width: 100%;
}


/*排版*/

#LP .flex {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-wrap: wrap;
}

#LP .flex-md {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#LP .flex-md-row-reverse {
  flex-direction: row-reverse;
}

#LP .col-6 {
  width: 50%;
}


/*按鈕*/

#LP .offer,
#LP .offer1,
#LP .offer2,
#LP .relate {
  position: relative;
}

/* .btn {
  position: absolute;
  z-index: 2;
  bottom: 10%;
  transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
} */

#LP .inline {
  display: inline-block;
  width: 50%;
}


/*按鈕定位*/

/* .offer1 .btn {
  bottom: 0;
  width: 78%;
  left: 11.5%;
}

.offer2 .btn {
  bottom: 25%;
  width: 78%;
  left: 11.5%;
} */


/*亮亮*/

#LP .light {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  ;
  overflow: hidden;
  display: block;
  position: relative;
}

#LP .light:after {
  content: '';
  display: block;
  position: absolute;
  left: -60%;
  top: 0;
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  animation: btn 3s infinite ease-in-out;
}


/*亮亮動畫*/

@keyframes btn {
  0% {
      left: -60%;
  }
  100% {
      left: 100%;
  }
}

@-webkit-keyframes btn {
  0% {
      left: -60%;
  }
  100% {
      left: 100%;
  }
}




/*RWD*/

@media screen and (max-width: 1024px) {
  .fv_clock {
      font-size: 8em;
  }
  .clock_ver2 {
      font-size: 2.5em;
  }
}

@media screen and (max-width: 768px) {
  .fv_clock {
      font-size: 6em;
  }
  .clock_ver2 {
      font-size: 2em;
  }
}

@media screen and (max-width: 540px) {
  .fv_clock {
      font-size: 4em;
  }
  .clock_ver2 {
      font-size: 1.5em;
  }
}

@media screen and (max-width: 414px) {
  .fv_clock {
      font-size: 3.3em;
      margin-top: 4%;
  }
}

@media screen and (max-width: 390px) {
  .fv_clock {
      font-size: 3em;
  }
}

@media screen and (max-width: 375px) {
  .fv_clock {
      font-size: 3em;
  }
}

@media screen and (max-width: 360px) {
  .fv_clock {
      font-size: 2.8em;
  }
}

@media screen and (max-width: 320px) {
  .fv_clock {
      font-size: 2.5em;
  }
}


/* ------------------------------------Navメニュー------------------------------------- */
/* スクロール先調整 */
#LP .anchor-offset {
  display: block;
  height: 80px;
  margin-top: -80px;
  visibility: hidden;
}

/* Nav全体の箱 */
header, nav {
    max-width: 900px;
    margin: 0 auto;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #8ff2ff; /* 土台の水色 */
}

.navList {
    list-style: none;
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.navItem {
    width: 25%;
    position: relative;
    display: flex;
    align-items: center;
}

/* 項目間の縦線 */
.navItem:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    border-right: 1px solid #8E8F88;
}

/* リンクボタン本体 */
.navLink {
    display: block;
    text-align: center;
    width: 100%;
    background-color: #de4c3f; /* 濃い青 */
    font-size: 1.4rem;
    /* 【修正点1】下部のパディングを 25px から 40px に広げてスペースを確保 */
    padding: 15px 0 40px 0;
    color: #ffffff;            /* 文字色は白で見やすく */
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: all .3s;
}

/* 下向き矢印 ﹀ */
.navLink::after {
    content: '﹀';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* 【修正点2】下からの位置を 5px から 10px に上げてバランスを調整 */
    bottom: 10px;
    color: #ffffff;            /* 矢印も白に */
    line-height: 1;            /* 矢印の高さのズレを防ぐ */
}

/* ホバー時・現在の位置表示 */
.navLinkFocus,
.navLink:hover {
    background-color: #0000cc; /* ホバー時に少し色を変えると親切です */
    color: #F4FBD9;
}

/* モバイル対応 */
@media (max-width:768px) {
    .navLink {
        font-size: 1.02rem;
        padding: 10px 0 20px 0;
    }
    .navLink::after {
        bottom: 2px;
    }
}


/* ---特定のNavメニューだけ色を変更----- */

/* 「購買商品」専用のスタイル設定 */
.navLink-buy {
    background-color: #1ec059 !important; /* 背景色（例：赤） */
    color: #ffffff !important;            /* 文字色（例：白） */
}

/* 「購買商品」の矢印の色も変更 */
.navLink-buy::after {
    color: #ffffff !important;            /* 矢印の色（例：白） */
}

/* ホバーした時の色も個別に設定する場合 */
.navLink-buy:hover {
    background-color: #0000cc !important; /* ホバー時に少し暗い赤に */
    color: #ffffff !important;
}


/* クリックされて「アクティブ」状態になった時の色 */
.navLinkFocus {
    background-color: #7a7a7a !important; /* 例：さらに濃い青（ダークブルー） */
    color: #ffffff !important;
}




/* ------------------------------------tell部分------------------------------------- */

/* tell */
#LP .image-tell-container {
  position: relative; /* ボタンを重ねる基準 */
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

#LP .tell-background {
  width: 100%;
  height: auto;
  display: block;
}

/* ボタンの配置設定（右下に合わせる） */
#LP .btn {
  position: absolute; 
  width: 38%;          /* 背景画像に対するボタンの横幅 */
  right: 4%;           /* 右端からの余白 */
  bottom: 3%;          /* 下端からの余白 */
  z-index: 2;
  display: block;
  border: none; 
  background: none; 
  cursor: pointer; 
}

/* ボタンエフェクト共通 */
#LP .btn-inner {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;    /* 光彩エフェクトのはみ出しを防止 */
  border-radius: 9999px; /* ボタンの角丸に合わせて調整 */
  animation: pulseButton 2s ease-in-out infinite;
}


/* ボタン画像 */
#LP .btn-inner img {
  display: block;
  width: 100%;
  height: auto;
}

/* 光のエフェクトパーツ（光の帯をシャープにする） */
#LP .btn-inner .shine-light {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,    /* 透明部分を広げる */
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 60%     /* 透明部分を広げる */
  );
  animation: shine 2.5s infinite;
  pointer-events: none;
}

/* 光の移動アニメーション */
@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ボタン拡大縮小アニメーション */
@keyframes pulseButton {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}