@charset "UTF-8";
div#page16_bf2025_body{
    max-width: 1000px;
    color: #333;
	margin: 0 auto;
  font-size: 16px;
	padding: 0;
}

div#page16_bf2025_body a:hover,
div#page16_bf2025_body a:focus,
div#page16_bf2025_body a:active,
div#page16_bf2025_body button:hover,
div#page16_bf2025_body button:focus,
div#page16_bf2025_body button:active{ /* リンク操作時の指定をリセット */
  opacity: 1;
  color: #fff;
}

#contents{   /* position: fixed;有効化のため */
  transform: none;
  will-change: auto;
}

div#page16_bf2025_body .top{
	position:relative;
	width:100%;
	height: 420px;
	overflow:hidden;
	margin-bottom: 0;  /* ←ここを確認 */
    border: none;      /* 不要な線がある場合も消す */
}
div#page16_bf2025_body .top_img{
	position:absolute;
	inset:0;
    width: 100%; 
    height: 100%; 
	object-fit: cover;
	z-index:0;
}
div#page16_bf2025_body .all-botan {
  position: fixed;
  top: 480px;
  right: calc(50% - 500px + 30px); /* 1000px / 2 = 500px、＋余白30px */
  z-index: 1000;
  
  display: inline-grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #b89045;       /* 金色 */
  
  width: 150px;
  height: 150px;
  border-radius: 50%;        /* 真円にする */
  font-weight: 350;
  font-size: 18px;
  line-height: 1.3;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* 内側の白リング */
div#page16_bf2025_body .all-botan::before {
  content: "";
  position: absolute;
  inset: 6px; /* 外周からの余白 */
  border: 3px solid rgba(255, 255, 255, 0.5); /* ← 白60%透明 */
  border-radius: 50%;
}

div#page16_bf2025_body .all-botan:hover {
  background: #b145c2;
  transform: translateY(-2px);
}

div#page16_bf2025_body .container{
	background-color: #f7f7f7;
	margin:0 0 0;
	padding: 0 0 20px;
  width: auto;
}
div#page16_bf2025_body h1{
  text-align: center;
  font-size: 2.2em;
	font-weight: 800;
	letter-spacing: -0.08em;
	padding: 30px 0 10px 0;
	margin-top:0;
  border-bottom: none;
}
div#page16_bf2025_body h1::before,
div#page16_bf2025_body h1::after{
  display: none;
}
div#page16_bf2025_body .osusume_block {
  background: #000;
  color: #fff;
  padding: 24px 30px;        /* ← 左右に30pxの内側余白 */
  border-radius: 16px;
  margin: 0 auto 40px;       /* ← 中央寄せ（上下の間隔40px） */
  max-width: 960px;          /* ← 幅の上限を960pxに */
  box-sizing: border-box;    /* ← padding込みで940pxに計算 */
}
div#page16_bf2025_body .osusume_block h2{
  position:relative;
  font-size:1.6em;
  font-weight: 500;
  margin-bottom:30px;
  padding: 0 0 0 25px; /* ← 文字と縦バーの間に余白 */
  margin-left: -30px;   /* ← 左paddingぶんだけ外へずらす */
  width: calc(100% + 30px); /* ← はみ出したぶん幅を補う */
  border-bottom: none;
}
div#page16_bf2025_body .osusume_block h2::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  width: 12px;           /* 縦バーの太さ */
  height: 114%;         /* タイトルの高さに合わせる */
  background: #266efc;  /* 青色 */
}
div#page16_bf2025_body .osusume_block h2::after{
  display: none;
}
div#page16_bf2025_body .osusume_block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
} /* ← このカッコを閉じ忘れない！ */

/* ▼ 3列レイアウト（3つの商品） */
div#page16_bf2025_body .osusume_container3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ▼ 2列レイアウト（4つの商品） */
div#page16_bf2025_body .osusume_container2 {
  grid-template-columns: repeat(2, 1fr);
}
div#page16_bf2025_body .osusume_block.is-2cols h2 {
  position:relative;
  font-size:1.6em;
  font-weight:500;
  margin-bottom:30px;
  padding-left:25px;
  margin-left:-80px;
  width:calc(100% + 80px);
}
div#page16_bf2025_body .osusume_block.is-2cols {
  padding-left: 80px;
  padding-right: 80px;
}

div#page16_bf2025_body .osusume_block li{
  overflow:hidden;
}
div#page16_bf2025_body .osusume_image img{
  width:100%;
  height: 100%;
  display:block;
  object-fit:cover;
}
div#page16_bf2025_body .osusume_text{
  padding:12px;
}
div#page16_bf2025_body .osusume_text h3{
  font-size:16px;
  color:#f9e2af;
  margin:0 0 4px;
}
div#page16_bf2025_body .osusume_text p{
  font-size:15px;
  line-height:1.5;
}

/* コンテナ：ボタン中央寄せ */
div#page16_bf2025_body .cat-botan-wrap {
  text-align: center;       /* 中央寄せ */
  margin: 30px 0;
}

div#page16_bf2025_body .cat-botan {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 80px;
  background: #266efc;        /* 青背景 */
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  border-radius: 40px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

/* 白丸（右側）を ::before で作る */
div#page16_bf2025_body .cat-botan::before {
  content: '';
  position: absolute;
  right: 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-240px); /* ← 初期位置（やや左に隠す） */
  transition: transform 0.6s ease;
}

/* 矢印を ::after で作る */
div#page16_bf2025_body .cat-botan::after {
  content: '→';
  position: absolute;
  right: 26px;
  font-size: 30px;
  color: #2979ff;
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* hoverで動く */
div#page16_bf2025_body .cat-botan:hover::before {
  transform: translateX(0); /* 白丸が右にスライド */
}

div#page16_bf2025_body .cat-botan:hover::after {
  opacity: 1; /* 矢印がフェードイン */
}

/* ===== トップへ戻るボタン（二重矢印）===== */
div#page16_bf2025_body .to-top {
  position: fixed;
  bottom: 60px; /* all-botan の少し上 */
  right: calc(50% - 500px + 23px); /* body幅1000pxの右端に合わせる */
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 1000;
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.2s;
}

/* 二重矢印を::beforeと::afterで表現 */
div#page16_bf2025_body .to-top::before,
div#page16_bf2025_body .to-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-left: 3px solid #5d6d84;
  border-top: 3px solid #5d6d84;
  transform: rotate(45deg);
}

/* 上下に少しずらして二重矢印に */
div#page16_bf2025_body .to-top::after {
  top: 7px;
}
div#page16_bf2025_body .to-top::before {
  top: 0;
}

/* ホバーで少し明るく・浮かせる */
div#page16_bf2025_body .to-top:hover {
  opacity: 1;
  transform: translateY(-3px);
}

@media screen and (max-width : 899px ){
div#page16_bf2025_body .all-botan {
    right: 10px;               /* 右からの距離 */
    top: 300px;
}
}

@media screen and (max-width: 599px) {
  /* ===== 全体 ===== */
  div#page16_bf2025_body {
    max-width: 100%;
    font-size: 14px;
    margin: 0;
    padding: 0 10px;
  }

  div#page16_bf2025_body .top {
    height: auto;
  }

  div#page16_bf2025_body .top_img{
    position: static;                  /* ← absoluteを解除 */
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }

  /* ===== 固定ボタン（右上）を少し小さく ===== */
  div#page16_bf2025_body .all-botan {
    position: fixed;           /* ← ページ全体で固定 */
    right: 20px;               /* 右からの距離 */
    top: 73vh;              /* 下からの距離 */
  
    width: 110px;
    height: 110px;
    font-size: 15px;
}
/* 矢印を ::after で作る */
div#page16_bf2025_body .cat-botan::after {
  right: 22px;
  font-size: 28px;
}

div#page16_bf2025_body  h1{
    font-size: 1.8em;
	font-weight: 800;
	letter-spacing: -0.08em;
	padding: 30px 0 10px 0;
	margin-top:0;
}
  /* ===== おすすめブロック全体 ===== */
div#page16_bf2025_body .osusume_block {
    width: calc(100% - 50px);  /* ← 背景より左右20px小さく */
    margin: 0 auto 30px;       /* 中央寄せ */
    padding: 30px;
    border-radius: 10px;
    box-sizing: border-box;
  }

  div#page16_bf2025_body .osusume_block.is-2cols {
    --padX: 30px; /* ← 通常と同じ幅に戻す */
    padding-left: 30px;   /* ← 80px を打ち消す */
      padding-right: 30px;
  }
  div#page16_bf2025_body .osusume_block.is-2cols h2 {
    margin-left: -30px;
    width: calc(100% + 30px);
  }

  div#page16_bf2025_body .osusume_block h2 {
    font-size: 1.6em;
    margin-left: -30px;
    width: calc(100% + 30px);
  }

  div#page16_bf2025_body .osusume_block h2::before {
    width: 12px;
    height: 110%;
  }

  /* ===== グリッド列数を1列に ===== */
  div#page16_bf2025_body .osusume_container2,
  div#page16_bf2025_body .osusume_container3{
    grid-template-columns: 1fr !important;
  }

  div#page16_bf2025_body .osusume_text h3 {
    font-size: 14px;
  }

  div#page16_bf2025_body .osusume_text p {
    font-size: 13px;
  }

  /* ===== カテゴリボタン（cat-botan） ===== */
  div#page16_bf2025_body .cat-botan {
    width: 250px;
    height: 70px;
    font-size: 16px;
  }

  div#page16_bf2025_body .cat-botan::before {
    width: 50px;
    height: 50px;
    transform: translateX(-180px); /* ← 小さいサイズに合わせ調整 */
  }

  div#page16_bf2025_body .cat-botan::after {
    font-size: 24px;
  }

	/* スマホ時は画面右端固定 */
  div#page16_bf2025_body .to-top {
    right: 37px;
    bottom: 15px; /* all-botan の上に表示 */
  }
}