/*--全CSS共通------------------------------------------------------------------------------------------*/
body {
  font-family: "Montserrat", "Noto Sans JP", "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", sans-serif; /*   フォントの指定*/
  margin: 0; /*   ページ全体のマージンをゼロ*/
  padding: 0; /*   ページ全体のパディングをゼロに*/
  height: 100%; /*   高さを画面いっぱいに設定*/
  overflow-x: hidden; /*   スクロールを無効化*/
  font-weight: bold; /*   フォントの太さ */
  background-color: #FFECD8; /*   背景色 */
}




/*--headerの設定--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
header {
  position: fixed; /*   ヘッダーを固定*/
  top: 0; /*   上部に固定*/
  width: 100%; /*   ヘッダーの幅*/
  background-color: #e29bd6; /*   ヘッダーの背景色*/
  display: flex; /*   ヘッダーをflexboxに変更*/
  justify-content: center; /*   ヘッダー内の要素を横方向中央に配置*/
  align-items: center; /*   ヘッダー内の要素を縦方向中央に配置*/
  min-height: 45px; /*   ヘッダーの最小高さ*/
  z-index: 2; /*   ヘッダーのz-index*/
}

/*--タイトルロゴ--------------------------------------------------------*/
.title_img {
  width: 200px; /*   画像の幅を調整 */
  transition: opacity 0.3s ease; /*   透過効果の遷移時間を調整 */
  display: block; /*   画像をブロックレベル要素に変更 */
}

/* 文字の配置調整 */
.logo-text {
  position: absolute; /*   絶対位置指定 */
  bottom: 5px;  /*   少し上げる */
  right: 24%;   /*   画像の右端にもう少し近づける */
  font-size: 13px; /*   文字サイズを調整 */
  color: white; /*   文字色を白に変更 */
  background: rgba(0, 0, 0, 0.1); /*   半透明の背景 */
  padding: 2px 4px; /*   内側の余白を追加 */
  border-radius: 3px; /*   枠線を丸みを追加 */
  white-space: nowrap; /*   文字の改行を防ぐ */
  pointer-events: none; /*   文字をクリックできないようにする */
}

/* マウスホバー時の透過効果 */
.logo-link:hover .title_img {
  opacity: 0.65; /*   透過率を調整 */
}


/*--スマホ用------------------------------------------------------------*/
@media (max-width: 768px) {
  .title_img {
    width: 160px; /*   画像の幅を調整 */
  }

  .logo-text {
    right: 12%; /*   画像の右端にもう少し近づける */
  }
}

/*--タブレット用--------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  main {
    padding-top: 155px; /*   ヘッダーの高さ分の余白を追加 */
  }

  .title_img {
    width: 190px; /*   画像の幅を調整 */
  }

  .logo-text {
    right: 12%; /*   画像の右端にもう少し近づける */
  }
}

/*--Apple Watch用------------------------------------------*/
@media (max-width: 200px) {
  .title_img {
    width: 80px; /*   Apple Watch向けにさらに縮小 */
  }

  .logo-text {
    right: 2%;   /*   テキストの位置をさらに中央寄りに調整 */
    font-size: 8px; /*   テキストサイズも小さく調整 */
  }
}




/*--mainの設定--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
main {
  background-color: #FFECD8; /*   背景色 */
  margin: 0; /*   余白を削除 */
  padding: 40px 20px; /*   上下40px、左右20pxの余白を設定 */
}

.buy-title {
  font-size: 28px; /*   文字サイズを調整 */
  margin-top: 34px; /*   上部に余白を追加 */
  text-align: center; /*   文字を中央寄りに配置 */
}

.buy-item {
  border-radius: 16px; /*   枠線を丸みを追加 */
  background-color: #fff; /*   背景色 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /*   影を追加 */
  padding: 24px; /*   内側の余白を追加 */
  max-width: 700px; /*   最大幅を設定 */
  margin: 0 auto 40px; /*   上部に余白を追加 */
  box-sizing: border-box; /*   ボックスサイズを含める */
  transition: transform 0.2s; /*   アニメーションの指定 */
}

.buy-item:hover {
  transform: translateY(-5px); /*   少し上に移動 */
}

.buy-stream-box1 {
  padding-top: 0px;
}

.buy-stream-box2 {
  padding-top: 0px;
}

.buy-stream-box3 {
  padding-top: 2px;
}

.buy-stream-box4 {
  padding-top: 0px;
}

.buy-around-box1 {
  padding-top: 0px;
}

.buy-around-box2 {
  padding-top: 0px;
}

.buy-around-box3 {
  padding-top: 0px;
}

.buy-around-box4 {
  padding-top: 0px;
}

.buy-tool-box1 {
  padding-top: 0px;
}

.buy-tool-box2 {
  padding-top: 0px;
}

.buy-tool-box3 {
  padding-top: 0px;
}

.buy-tool-box4 {
  padding-top: 0px;
}

/*--スマホ用------------------------------------------------------------*/
@media (max-width: 768px) {
  .buy-item:hover {
    transform: none; /* ホバー時の移動を無効にする */
  }
}

/*--タブレット用--------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  .buy-item:hover {
    transform: none; /* ホバー時の移動を無効にする */
  }
}




/*--sidebarの設定------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* サイドバーの設定 */
.sidebar {
  position: fixed; /*   サイドバーを固定 */
  top: 50%; /*   サイドバーを上部に配置 */
  left: 20px; /*   サイドバーを左側に配置 */
  transform: translateY(-50%); /*   サイドバーを上部に配置 */
  display: flex; /*   サイドバーを横並びにする */
  flex-direction: column; /*   サイドバーを縦並びにする */
  gap: 28px; /*   各要素間の間隔 */
  z-index: 1; /*   サイドバーのz-index */
}

/* 正方形の設定 */
.square {
  width: 80px; /*   正方形の幅 */
  height: 80px; /*   正方形の高さ */
  background-color: #E29BD6; /*   正方形の背景色 */
  position: relative; /*   正方形を相対位置にする */
  overflow: hidden; /*   内部のコンテンツを隠す */
  border-radius: 10px; /*   正方形の角丸 */
  transition: all 0.3s ease; /*   アニメーションの遷移時間を調整 */
  display: flex; /*   正方形を横並びにする */
  justify-content: center; /*   正方形を横方向中央に配置 */
  align-items: center; /*   正方形を縦方向中央に配置 */
}

/* 画像設定 */
.square img {
  width: 100%; /*   画像の幅 */
  height: 100%; /*   画像の高さ */
  object-fit: cover; /*   画像を正方形に合わせる */
  transition: opacity 0.2s ease; /*   フェードアウトのアニメーション */
}

/* 文字設定: 初期状態では非表示 */
.square .text {
  display: none; /*   文字を非表示 */
  position: absolute; /*   文字を絶対位置にする */
  top: 50%; /*   文字を上部に配置 */
  left: 50%; /*   文字を左側に配置 */
  transform: translate(-50%, -50%); /*   文字を中央に配置 */
  color: white; /*   文字の色 */
  font-size: 16px; /*   文字のサイズ */
  text-align: center; /*   文字を中央寄せ */
  font-weight: bold; /*   文字の太さ */
  white-space: nowrap; /*   改行を防止 */
  transition: opacity 0.5s ease; /*   文字のフェードイン */
}

/* ホバー時に右に伸び、画像を消して文字を表示 */
.square:hover {
  width: 200px; /*   ホバー時の幅 */
}

.square:hover img {
  opacity: 0.1; /*   画像をフェードアウト */
}

.square:hover .text {
  display: block; /*   文字を表示 */
  opacity: 1; /*   文字をフェードイン */
}


/*--スマホ用------------------------------------------------------------*/
@media (max-width: 768px) {
  .square {
    width: 35px; /*   正方形の幅 */
    height: 35px; /*   正方形の高さ */
    margin-left: -19px; /*   左側に余白を追加 */
  }

  .square .text {
    font-size: 12px; /*   文字サイズを調整 */
  }

  /* ホバー時の変化を無効化 */
  .square:hover {
    width: 35px !important; /*   幅 */
    background-color: #E29BD6 !important; /*   背景色 */
  }

  .square:hover img {
    opacity: 1 !important; /*   画像をフェードイン */
  }

  .square:hover .text {
    display: none !important; /*   文字を非表示 */
    opacity: 0 !important; /*   文字を透明化 */
  }
}

/*--タブレット用--------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  .square {
    width: 80px; /*   正方形の幅 */
    height: 80px; /*   正方形の高さ */
  }

  /* ホバー時の変化を無効化 */
  .square:hover {
    width: 80px !important; /*   幅 */
    background-color: #E29BD6 !important; /*   背景色 */
  }

  .square:hover img {
    opacity: 1 !important; /*   画像をフェードイン */
  }

  .square:hover .text {
    display: none !important; /*   文字を非表示 */
    opacity: 0 !important; /*   文字を透明化 */
  }
}




/*-- トップに戻るボタンの設定 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.scroll-to-top {
  position: fixed;
  bottom: 30px; /*   下部から30pxの余裕 */
  right: 30px; /*   右側から30pxの余裕 */
  width: 50px; /*   ボタンの幅 */
  height: 50px; /*   ボタンの高さ */
  background-color: #e29bd6; /*   背景色 */
  color: #fff; /*   テキストカラー（白） */
  border-radius: 50%; /*   丸い形状 */
  display: flex; /*   中央揃え用 */
  justify-content: center; /*   中央揃え */
  align-items: center; /*   中央揃え */
  text-decoration: none; /*   下線を削除 */
  font-size: 32px; /*   テキストサイズ */
  z-index: 1000; /*   他の要素より前面に表示 */
  opacity: 0; /*   初期状態は非表示 */
  visibility: hidden; /*   初期状態は非表示 */
  transition: opacity 0.3s ease, visibility 0.3s ease; /*   アニメーション効果 */
}

.scroll-to-top span {
  position: relative;
  top: -2px; /*   テキストを上に移動 */
}

/* ボタンが表示される状態 */
.scroll-to-top.show {
  opacity: 1; /*   透明度の表示 */
  visibility: visible; /*   場所の表示 */
}

/* ボタンのホバー時のスタイル */
.scroll-to-top:hover {
  background-color: #a36699; /*   ホバー時の色 */
}


/*--スマホ用------------------------------------------------------------*/
@media (max-width: 768px) {
  .scroll-to-top {
    width: 40px; /*   ボタンの幅 */
    height: 40px; /*   ボタンの高さ */
    font-size: 24px; /*   テキストサイズ */
    bottom: 70px; /*   下部から70pxの余裕 */
    right: 20px; /*   右側から20pxの余裕 */
  }
}




/*--footerの設定----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
footer {
  width: 100%; /*   フッターの幅 */
  text-align: center; /*   フッター内のテキストを中央寄せ */
  padding: 15px 0; /*   フッター内の余白 */
  margin-bottom: 30px; /* フッターの下部に余裕を追加 */
}

/* 横線の幅を調整 */
footer::before {
  content: ""; /*   空のコンテンツ */
  display: block; /*   ブロックレベル要素にする */
  width: 50%; /*   横線の幅 */
  height: 1px; /*   横線の太さ */
  background-color: rgba(0, 0, 0, 0.4); /*   横線の色 */
  margin: 0 auto; /*   中央寄せ */
  margin-top: -15px; /*   横線をフッターの上部に配置 */
}

/* フッター内の画像のスタイル */
.footer-images {
  display: flex; /*   フレックスボックスにする */
  justify-content: space-evenly;  /*   画像間を均等に配置 */
  margin-bottom: 10px; /*   画像とリンクの間に少しスペース */
  width: 65%; /*   画像全体の幅を制限 */
  margin-left: auto; /*   左端から中央に寄せる */
  margin-right: auto; /*   右端から中央に寄せる */
}

.footer-image {
  width: 325px; /*   画像のサイズを調整 */
  height: 240px; /*   画像の高さ */
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; /*   アニメーションの指定 */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); /*   初期状態で影を画像に合わせて自然に付ける */
}

/* ホバー時のふわっとしたアニメーション */
.footer-image:hover {
  transform: translateY(-3px) scale(1.05); /*   少し上に移動し、軽く拡大 */
  opacity: 0.9; /*   少し透明に */
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)); /*   ホバー時の影を強調 */
}

/* フッター内のリンクのスタイル（そのまま） */
.footer_link {
  list-style: none; /*   リストスタイルを削除 */
  padding: 0; /*   リストの内側の余白を削除 */
  margin: 0; /*   リストの外側の余白を削除 */
  display: flex; /*   リンクを横並びにする */
  justify-content: center; /*   リンクを中央に配置 */
}

.footer_link li {
  margin: 0 10px; /*   リンク間のスペース */
}

.footer_link a {
  text-decoration: none; /*   リンクの下線を削除 */
  color: #000; /*   リンクの色 */
}


/* フッター内のリンク */
.footer_link {
  list-style: none; /*   リストスタイルを削除 */
  margin: 0; /*   リストの外側の余白を削除 */
  padding: 0; /*   リストの内側の余白を削除 */
  display: flex; /*   リンクを横並びにする */
  justify-content: center; /*   リンクを横方向中央に配置 */
  flex-wrap: wrap; /*   リンクを折り返す */
  gap: 20px; /*   リンク間の間隔を一定に保つ */
}

/* リンク一つずつの設定 */
.footer_link li {
  display: inline-block; /*   リンクを横並びにする */
  position: relative; /*   リンクを相対位置にする */
}

/* 最後のリンクの間に線を非表示にする */
.footer_link li:last-child::after {
  display: none; /*   最後のリンクの間に線を非表示 */
}

/* リンクの設定 */
.footer_link a {
  text-decoration: none; /*   下線を削除 */
  color: #333; /*   リンクの色 */
  position: relative; /*   リンクを相対位置にする */
}

/* マウスホバー時の下線アニメーション */
.footer_link a::after {
  content: ""; /*   空のコンテンツ */
  position: absolute; /*   下線を絶対位置にする */
  left: 0; /*   下線を左側に配置 */
  bottom: -2px; /*   下線を下部に配置 */
  width: 100%; /*   下線の幅 */
  height: 1px; /*   下線の高さ */
  background-color: #333; /*   下線の色 */
  transform: scaleX(0); /*   下線を非表示 */
  transition: transform 0.3s ease; /*   アニメーションの遷移時間を調整 */
}

.footer_link a:hover::after {
  transform: scaleX(1); /*   マウスホバー時に下線を表示 */
}


/*--スマホ用------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
  /* フッターのパディング調整 */
  footer {
    padding: 10px 0; /*   スマホ版の余白 */
  }

  .footer-images {
    display: flex !important; /*   強制的にフレックスに */
    flex-direction: column !important; /*   強制的に縦並びに */
    align-items: center; /*   中央揃え */
    width: 100%; /*   スマホでは幅いっぱいに広げてもOK */
  }

  .footer-images img {
    margin-bottom: -30px; /*   画像同士の縦間隔 */
  }

  /* リンクの間隔を調整 */
  .footer_link {
    gap: 15px; /*   スマホでは少し間隔を狭める */
    font-size: 13px; /*   フォントサイズを小さく */
    margin-top: 20px; /*   上部に余白を追加 */
  }

  .footer_link li {
    margin: 5px 0; /*   スマホ版の余白 */
  }

  .footer-image:hover {
    transform: none !important; /*   ホバー時の変化を無効化 */
    opacity: 1 !important; /*   画像をフェードイン */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); /*   初期状態で影を画像に合わせて自然に付ける */
  }

  .footer_link a:hover::after {
    transform: scaleX(0) !important; /*   下線を非表示 */
  }
}

/*--Macbook用--------------------------------------------------------*/
@media (max-width: 1280px) {
  .footer-images {
    flex-direction: row; /*   横並び（デフォルト維持） */
    justify-content: center; /*   中央に寄せる */
    gap: 20px; /*   画像間スペース */
    width: 80%; /*   幅を広げすぎないように調整 */
    margin: 0 auto; /*   中央寄せ */
  }

  .footer-images img {
    width: 300px; /*   横幅を調整 */
    height: auto; /*   高さを自動調整 */
  }
}

/*--タブレット用--------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  /* フッターのパディング調整 */
  footer {
    padding: 10px 0; /*   スマホ版の余白 */
  }

  .footer-images {
    align-items: center; /*   中央揃え */
    width: 100%; /*   スマホでは幅いっぱいに広げてもOK */
  }

  .footer-images img {
    width: 250px; /*   横幅を調整 */
    height: auto; /*   高さを自動調整 */
    margin-bottom: 10px; /*   画像同士の縦間隔 */
  }

  /* リンクの間隔を調整 */
  .footer_link {
    gap: 30px; /*   スマホでは少し間隔を狭める */
  }

  .footer_link li {
    margin: 5px 0; /*   スマホ版の余白 */
  }

  .footer-image:hover {
    transform: none !important; /*   ホバー時の変化を無効化 */
    opacity: 1 !important; /*   画像をフェードイン */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); /*   初期状態で影を画像に合わせて自然に付ける */
  }

  .footer_link a:hover::after {
    transform: scaleX(0) !important; /*   下線を非表示 */
  }
}

/*--Apple Watch用------------------------------------------*/
@media (max-width: 200px) {
  /* フッターのパディング調整 */
  footer {
    padding: 10px 0; /*   スマホ版の余白 */
  }

  .footer-images {
    flex-direction: column; /*   縦に並べる */
    align-items: center; /*   中央揃え */
    width: 100%; /*   スマホでは幅いっぱいに広げてもOK */
  }

  .footer-images img {
    margin-bottom: 10px; /*   画像同士の縦間隔 */
    width: 100px; /*   横幅を調整 */
    height: auto; /*   高さを自動調整 */
  }

  /* リンクの間隔を調整 */
  .footer_link {
    display: flex; /*   フレックスボックスにする */
    flex-direction: column; /*   縦並びにする */
    gap: 10px; /*   項目間の間隔 */
    font-size: 10px; /*   フォントサイズを小さく */
    align-items: center; /*   中央揃え（お好みで） */
  }

  .footer_link li {
    margin: 0; /*   上下の余白リセット（gapで管理） */
  }
}