@charset "utf-8";

/* ------------------------------------全体------------------------------------- */
/* 全体 */
#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%;
}


/* ------------------------------------LINE banner------------------------------------- */


.fixed-line-banner {
    position: fixed;   /* 画面に対して固定 */
    bottom: 20px;      /* 下から20pxの位置（お好みで調整） */
    right: 20px;        /* 左から20pxの位置（お好みで調整） */
    z-index: 9999;     /* 他の要素より上に表示されるようにする */
    width: 270px;      /* バナーの横幅（スマホに合わせて調整） */
    transition: transform 0.3s ease; /* マウスを乗せた時のアニメーション用 */
}

.fixed-line-banner img {
    width: 100%;       /* 親要素の幅いっぱいに画像を表示 */
    height: auto;
    display: block;
    /* 影をつけて少し浮かせる（必要に応じて） */
    filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.2));
}

/* PCでマウスを乗せた時に少し大きくする演出（任意） */
.fixed-line-banner:hover {
    transform: scale(1.05);
}

/* スマホでのサイズ調整（画面が小さい場合） */
@media screen and (max-width: 480px) {
    .fixed-line-banner {
        width: 200px; /* スマホでは少し小さくする */
        bottom: 15px;
        right: 15px;
    }
}


/* ふわふわ揺れるアニメーションを追加する場合 */
.fixed-line-banner {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* ------------------------------------ボタン部分------------------------------------- */

/* --- 親コンテナの設定 --- */
#LP .image-button-container {
  position: relative; 
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: visible; /* ボタンがはみ出しても表示されるように */
}

/* --- 背景画像の設定 --- */
#LP .button-background {
  width: 100%;
  height: auto; 
  display: block;
}

/* --- ボタン本体の設定（ここが修正のメインです） --- */
#LP .btn1 {
  position: absolute; 
  width: 75%;          /* ボタンの横幅（背景に対して） */
  /* bottomの数値で上下位置を調整してください */
  bottom: 10%;          
  left: 50%;           
  /* transformはアニメーション(keyframes)側で制御するため、ここでは書かないか、初期値を設定 */
  transform: translateX(-50%) scale(1);
  border: none; 
  background: none; 
  cursor: pointer; 
  z-index: 2;
  display: block;
  
  /* アニメーションの適用 */
  animation: pulse-animation 1.5s ease-in-out infinite;
}


/* --- ボタン本体の設定（ここが修正のメインです） --- */
#LP .btn2 {
  position: absolute; 
  width: 75%;          /* ボタンの横幅（背景に対して） */
  /* bottomの数値で上下位置を調整してください */
  bottom: 10%;          
  left: 50%;           
  /* transformはアニメーション(keyframes)側で制御するため、ここでは書かないか、初期値を設定 */
  transform: translateX(-50%) scale(1);
  border: none; 
  background: none; 
  cursor: pointer; 
  z-index: 2;
  display: block;
  
  /* アニメーションの適用 */
  animation: pulse-animation 1.5s ease-in-out infinite;
}


/* --- ボタン本体の設定（ここが修正のメインです） --- */
#LP .btn3 {
  position: absolute; 
  width: 75%;          /* ボタンの横幅（背景に対して） */
  /* bottomの数値で上下位置を調整してください */
  bottom: 5%;          
  left: 50%;           
  /* transformはアニメーション(keyframes)側で制御するため、ここでは書かないか、初期値を設定 */
  transform: translateX(-50%) scale(1);
  border: none; 
  background: none; 
  cursor: pointer; 
  z-index: 2;
  display: block;
  
  /* アニメーションの適用 */
  animation: pulse-animation 1.5s ease-in-out infinite;
}


/* --- ボタン本体の設定（ここが修正のメインです） --- */
#LP .btn4 {
  position: absolute; 
  width: 75%;          /* ボタンの横幅（背景に対して） */
  /* bottomの数値で上下位置を調整してください */
  bottom: 5%;          
  left: 50%;           
  /* transformはアニメーション(keyframes)側で制御するため、ここでは書かないか、初期値を設定 */
  transform: translateX(-50%) scale(1);
  border: none; 
  background: none; 
  cursor: pointer; 
  z-index: 2;
  display: block;
  
  /* アニメーションの適用 */
  animation: pulse-animation 1.5s ease-in-out infinite;
}


/* --- ボタン本体の設定（ここが修正のメインです） --- */
#LP .btn5 {
  position: absolute; 
  width: 75%;          /* ボタンの横幅（背景に対して） */
  /* bottomの数値で上下位置を調整してください */
  bottom: 5%;          
  left: 50%;           
  /* transformはアニメーション(keyframes)側で制御するため、ここでは書かないか、初期値を設定 */
  transform: translateX(-50%) scale(1);
  border: none; 
  background: none; 
  cursor: pointer; 
  z-index: 2;
  display: block;
  
  /* アニメーションの適用 */
  animation: pulse-animation 1.5s ease-in-out infinite;
}


#LP .btn6 {
  position: absolute; 
  width: 75%;          /* ボタンの横幅（背景に対して） */
  /* bottomの数値で上下位置を調整してください */
  bottom: 5%;          
  left: 50%;           
  /* transformはアニメーション(keyframes)側で制御するため、ここでは書かないか、初期値を設定 */
  transform: translateX(-50%) scale(1);
  border: none; 
  background: none; 
  cursor: pointer; 
  z-index: 2;
  display: block;
  
  /* アニメーションの適用 */
  animation: pulse-animation 1.5s ease-in-out infinite;
}

#LP .btn7 {
  position: absolute; 
  width: 75%;          /* ボタンの横幅（背景に対して） */
  /* bottomの数値で上下位置を調整してください */
  bottom: 5%;          
  left: 50%;           
  /* transformはアニメーション(keyframes)側で制御するため、ここでは書かないか、初期値を設定 */
  transform: translateX(-50%) scale(1);
  border: none; 
  background: none; 
  cursor: pointer; 
  z-index: 2;
  display: block;
  
  /* アニメーションの適用 */
  animation: pulse-animation 1.5s ease-in-out infinite;
}



#LP .btn-inner img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 【重要】アニメーション：中央寄せ(translateX)を維持しながら拡大(scale)させる --- */
@keyframes pulse-animation {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05); /* 中央を維持したまま1.05倍に */
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

/* --- マウスを乗せた時の挙動 --- */
#LP .btn1:hover {
  animation-play-state: paused; /* 動きを止める */
  transform: translateX(-50%) scale(1.08); /* 少し大きくして固定 */
  transition: transform 0.3s;
}