@charset "UTF-8";
/********************************************************************
  top
********************************************************************/
#sobaside251225 #top{
  background-image:
	url("/auto/images/fix/feature/251225_sobaside/pcc/campaign__bg.jpg");
  background-repeat: no-repeat;
}

#sobaside251225 #top .top__wrap{
  margin: 0 auto;
  width: 550px;
}

/*カウントbox*/
#sobaside251225 #top .top__count-box{
  padding: 20px 20px 20px 20px;
  border: solid 5px #d2ae56;
  background: #fff;
  background-image:
	url("/auto/images/fix/feature/251225_sobaside/pcc/campaign__countbox-bg--top-left.png"),      /* 左上 */
	url("/auto/images/fix/feature/251225_sobaside/pcc/campaign__countbox-bg--top-right.png"),     /* 右上 */
	url("/auto/images/fix/feature/251225_sobaside/pcc/campaign__countbox-bg--bottom-right.png"),  /* 右下 */
	url("/auto/images/fix/feature/251225_sobaside/pcc/campaign__countbox-bg--bottom-left.png");   /* 左下 */
  background-position:
  left top,
  right 7% top 10%,
  right bottom 10%,
  left 5% bottom 30%;
  background-repeat: no-repeat;
  border-radius: 20px;
}

#sobaside251225 #top .top__count-box .top__count-box--bg-orange,
#sobaside251225 #top .top__count-box .top__count-box--bg-lightblue{
  padding: 5px 5px 0px 5px;
  font-size: 4rem;
  color: #fff;
  border-radius: 5px;
}

#sobaside251225 #top .top__count-box .top__count-box--bg-orange{
  background: #ea5505;
}

#sobaside251225 #top .top__count-box .top__count-box--bg-lightblue{
  background: #2fb4bb;
}

/********************************************************************
  書影共通
********************************************************************/
/*背景色*/
#sobaside251225 #toshikoshi-soba{background: #ea5505;}
#sobaside251225 #wanko-soba{background: #2fb4bb;}

/*セクション共通*/
#sobaside251225 #toshikoshi-soba,
#sobaside251225 #wanko-soba{
  padding: 20px 0 40px 0;  
}

#sobaside251225 .contents__wrap{
  margin: 0 auto;
  width: 700px;
}

#sobaside251225 .contents__box{
  padding: 30px 30px 30px 30px;
  background: #fbf7ee;
  border-radius: 20px;
  column-gap: 2%;
  row-gap: 30px;
}

#sobaside251225 .contents__box li{
  box-sizing: border-box;
  flex: 0 0 calc((100% - 2% * 3) / 4);
  /* flex: 0 0 calc(...) の意味
  - 最初の 0 → flex-grow: 0（余白があっても広がらない）
  - 次の 0 → flex-shrink: 0（狭くなっても縮まらない）
  - calc(...) → flex-basis（アイテムの基本幅を指定）
  → 「伸びない・縮まない・この幅で固定」という設定
  */
}

/********************************************************************
  bottom
********************************************************************/
#sobaside251225 #bottom{
  padding: 60px 0 60px 0;
  margin: 0 auto;
  width: 770px;
	background:  url("/auto/images/fix/feature/251225_sobaside/pcc/campaign__bg.jpg");
  background-repeat: no-repeat;
}