html, body { 
  margin: 0;
  padding: 0;
  width: 403px; 
}

/* --- セクション1の設定 --- */
.section-top {
  width: 400px;
  height: 834px;
  background-image: url("gazou/Haikei/01.png");
  background-repeat: no-repeat;
  background-size: 400px 834px;
  position: relative;
}
.intro-text {
  position: absolute;
  top: 735px;       /* Y座標 */
  left: 33px;       /* X234だと403pxの幅から大きくはみ出すため、調整が必要かもしれません */
  /* 指定通り X234 にする場合は left: 234px; に書き換えてください */
  
  width: 350px;     /* テキストが折り返されないよう幅を確保 */
  font-size: 12px;
  letter-spacing: 0px; /* 文字間隔9px */
  color: #634643;
  line-height: 1.8;  /* 行間を少し広げて読みやすくしています */
  z-index: 10;
  font-family: "Kaisei Decol", serif; /* 先ほど追加したフォントを適用 */
}

.site-header {
  width: 400px;
  height: 51px;
  display: flex;
  justify-content: flex-end; 
  align-items: center;      
  padding: 0 15px;         
  box-sizing: border-box;  
  background-color: rgba(255, 255, 255, 0.8); 
}

/* ロゴの配置 (X1, Y89) */
.img-logo {
  position: absolute;
  top: 89px;
  left: 1px;
  z-index: 10;
}

/* --- キャラクター配置 (セクション1) --- */
.img-toppiyo {
  position: absolute;
  top: 254px;
  left: 51px;
  z-index: 1;
  animation: slideUp 1.6s ease-out forwards;
}

.img-yama { position: absolute; top: 414px; left: 0px; z-index: 2; }
.img-tepiyo { position: absolute; top: 437px; left: 116px; z-index: 3; }
.img-siro { position: absolute; top: 704px; left: 0px; z-index: 4; }
.img-hukidasi { position: absolute; top: 711px; left: 10px; z-index: 5; }
.img-syoumen { position: absolute; top: 750px; left: 292px; z-index: 5; }

/* --- セクション2の設定 --- */
.section-next {
  width: 400px;
  height: 1307px; 
  background-image: url("gazou/Haikei/haikei2.png");
  background-repeat: no-repeat;
  background-size: 400px 1307px; 
  position: relative;
}

.img-piyotehuri {
  position: absolute;
  top: 827px;  
  left: 138px;
  z-index: 1;
  animation: swing-h 1.0s infinite ease-in-out;
}

.img-piyoimouto {
  position: absolute;
  top: 900px;  
  left: 267px;
  z-index: 2;
  animation: swing-h 1.0s infinite ease-in-out 0.5s;
}

/* --- アニメーション --- */
@keyframes slideUp {
  0% { top: 437px; opacity: 1; }
  100% { top: 254px; opacity: 1; }
}

@keyframes swing-h {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

/* --- セクション3の設定 --- */
.section-three {
  width: 402px;
  height: 3549px; /* haikei3の高さに合わせる */
  background-image: url("gazou/Haikei/haikei3.png");
  background-repeat: no-repeat;
  background-size: 400px 3549px; 
  position: relative;
  /* 前のセクションとの重なりを調整（Y1767から開始するため） */
  margin-top: -4px; /* 2141px - 1767px = 374px 重ねる */
}

/* 3枚目の巨大背景画像 */
.img-haikei3 {
  position: absolute;
  top: 0;
  left: -143px; /* X-143 */
  z-index: -1;  /* キャラクターより後ろに配置 */
}

/* ボールの上下ホバリング (Y2273) */
.img-ball {
  position: absolute;
  top: 524px;   /* 絶対座標Y2273 - セクション開始点Y1767 = 506px */
  left: 233px;   /* X97 */
  z-index: 10;
  animation: hover-v 2.0s infinite ease-in-out;
}

/* 帰宅の左右ホバリング (Y2567) */
.img-kitaku {
  position: absolute;
  top: 800px;   /* 絶対座標Y2567 - セクション開始点Y1767 = 800px */
  left: 25px; /* X-134 */
  z-index: 10;
  animation: hover-h 2.5s infinite ease-in-out;
}

/* --- 新しいアニメーション定義 --- */

/* 上下にふわふわ (上下に10px移動) */
@keyframes hover-v {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
}

/* 左右にふわふわ (左右に15px移動) */
@keyframes hover-h {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(15px); }
}


/* 共通のテキスト装飾 */
/* 共通のテキスト装飾 */
.talk-text {
  position: absolute;
  width: 300px;
  font-size: 15px;
  font-family: "Kaisei Decol", serif;
  font-weight: 700; /* 縁取りをする際は少し太めが見やすいです */
  line-height: 1.5;
  z-index: 20;

  color: #D89B17;
  
  /* --- 修正ポイント：縁取りの設定 --- */
  -webkit-text-stroke: 6px #FFFFFF; /* 縁の太さを指定 */
  paint-order: stroke fill;          /* 縁(stroke)を先に描き、その上に塗りを重ねることで内側を削らない */
  
  /* ドロップシャドウ：縁の外側に影がつくよう調整 */
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3));
}

/* 不要になった疑似要素を削除 */
.talk-text::before {
  display: none;
}

.products-title {
  position: absolute;
  /* 指定座標 */
  top: 2554px; 
  left: 51px;
  
  /* 幅を300px（基準幅403pxに近いサイズ）に設定してセンタリング */
  width: 300px;
  text-align: center;
  
  /* フォント設定 */
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  
  /* 文字装飾 */
  color: #FFFFFF;
  font-size: 40px; /* 必要に応じてサイズ調整してください */
  letter-spacing: 2px;
  
  z-index: 100;
}

/* 説明テキストの配置 */
.description-text {
  position: absolute;
  top: 2900px;
  left: 30px; /* 画面外に出すぎる場合は 20px 等に調整してください */
  width: 350px;
  color: #FFFFFF;
  font-family: "Sawarabi Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  z-index: 100;
  font-weight: bold;
}

/* 画像の配置 */
.img-naisyopiyo {
  position: absolute;
  top: 3100px;
  left: 20px; /* 同様に調整を推奨します */
  z-index: 100;
}

/* ボタンの配置と色の変更 */
.button-container {
  position: absolute;
  top: 3335px; /* 画像(4846px)の横に並ぶよう調整 */
  left: 65px;  /* 画像の右側に配置 */
  width: 280px;
  z-index: 110;
}

.buttonIconText02 {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: 8px 24px; /* 右パディングを調整 */
  font-family: "Sawarabi Gothic", sans-serif;
  font-size: 16px;
  color: #fff;
  text-align: center;
  background-color: #E97228; /* 指定の色に変更 */
  border-radius: 32px;
  cursor: pointer;
  border: none;
}

/* ホバー時の色（少し暗めに） */
@media (any-hover: hover) {
  .buttonIconText02:hover {
    background-color: #d15a12;
    transition: 0.2s;
  }
  .buttonIconText02:hover .buttonIconText02_icon {
    transform: translateX(4px);
    transition: 0.2s;
  }
}

/* アイコン用リセット */
.buttonIconText02_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

.site-footer {
  margin-top: 80px;   /* 上との余白 */
  padding-bottom: 24px;

  text-align: center;
  color: #FFFFFF;
  font-family: "Sawarabi Gothic", sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;

  opacity: 0.9;
}