@charset "UTF-8";
body {
    margin: 0;
    background-color: #fff0f5;
    display: flex;
    justify-content: center;
}

.container {
    max-width: 480px;
    width: 100%;
    background-color: #ffffff;
}

.container img {
    width: 100%;
    display: block;
}
/*エントリーボタン*/
.entry{
  position: relative;
  text-align: center;
}
.entry img.imagup{
  position: absolute;
  top:87%;
  left: 50%;
  width: 60%;
  transform: translate(-50%,-50%);
  color: #fff;
}



/* スライダーの見た目を整えるコンテナ */
.slider-container {
  width: 100%; 
  margin: 0 auto;    /* 中央揃えにする（不要な場合は削除） */
  overflow: hidden;    /* はみ出した画像を非表示にする */
  touch-action: pan-y; /* 水平方向の指スライドを無効化（垂直は有効） */
  user-select: none;   /* テキスト選択を無効化 */
}

/* 画像を横一列に並べるためのラッパー */
.slider-wrapper {
  display: flex;
  /* transformの変化を0.8秒かけて滑らかに行う */
  transition: transform 0.8s ease-in-out;
}

/* 個々の画像（スライド） */
.slide {
  flex: 0 0 100%; /* 1枚の画像の幅をコンテナの100%（=480px）にする */
  box-sizing: border-box; /* paddingを含めて幅を100%に保つ */
}

/* 画像を親要素の幅に合わせる */
.slide img {
  width: 100%;
  height: auto;
  display: block;
}
/* ▲ここまで【480px固定・手動スライド無効】のCSS▲ */


/*ページTOPボタン*/
#page-top-btn {
    /* 画面に固定する */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;  /* 他の要素より手前に表示 */

    /* ボタンのデザイン */
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* 円形にする */
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none; 
    cursor: pointer;
    font-size: 12px;

    /* 最初は非表示にしておく */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s; 
}

/* JavaScriptで追加されるクラス */
#page-top-btn.visible {
    /* ボタンを表示する */
    opacity: 1;
    visibility: visible;
}