/* ===========================
  左固定サイドバー
=========================== */
.sidebar{
  position: fixed;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%); /* 画面の縦中央 */
  width: 200px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  z-index: 1000;

  /* 高さは成り行き。ただし画面より長い場合に備える */
  max-height: calc(100vh - 40px);
  overflow-y: auto;

  padding: 2.5em 0;
  box-sizing: border-box;
}

/* ▼ 初期：非表示（ふわっと用） */
.sidebar{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(-8px); /* ちょい左から出る */
  transition: opacity .35s ease, transform .35s ease, visibility .35s ease, left .35s ease;
}

/* ▼ スクロールしたら表示 */
.sidebar.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* ▼ footer付近は非表示 */
.sidebar.is-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(-8px);
}

/* ▼ ユーザーが閉じた状態（つまみだけ見せる） */
.sidebar.is-collapsed{
  left: -170px;
}

/* ▼ 閉じたときは中身を少し見えにくくする */
.sidebar.is-collapsed > div{
  pointer-events: none;
}

/* ▼ つまみボタン */
.sidebar .sidebar_toggle{
  position: absolute;
  top: 0;
  right: 34px;
  transform: translateX(100%);
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius:3px;
  background: #333;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 1001;
  box-shadow: 2px 3px 8px rgba(0,0,0,.2);
  transition: background .25s ease, opacity .25s ease;
}

.sidebar .sidebar_toggle:hover{
  background: #555;
}

.sidebar.is-collapsed .sidebar_toggle{
  pointer-events: auto;
}

/* ===== sidebar 内だけに適用 ===== */
.sidebar .inner_contact,
.sidebar .inner_line,
.sidebar .inner_mail,
.sidebar .inner_purchase01,
.sidebar .inner_purchase02,
.sidebar .inner_purchase03,
.sidebar .inner_bnr01,
.sidebar .inner_bnr02,
.sidebar .inner_bnr03 {
  position: relative;
  margin: 0;
  padding: 0.3em 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 5px;
}

.sidebar .inner_contact {
  background-color: #ff8a2a;
}
.sidebar .inner_line {
  background-color: #05c756;
}
.sidebar .inner_mail {
  background-color: #0670c7;
}
.sidebar .inner_purchase01 {
  background-color: #CA0201;
  height:60px;
}

.sidebar .inner_purchase02 {
  background-color: #09204A;
  height:60px;
}

.sidebar .inner_purchase03 {
  background-color: #461900;
  height:60px;
}

.sidebar .inner_bnr01,
.sidebar .inner_bnr02,
.sidebar .inner_bnr03 {
  background-color: #E1D8BF;
  height:50px;
}

.sidebar .inner_contact p,
.sidebar .inner_line p,
.sidebar .inner_mail p,
.sidebar .inner_purchase01 p,
.sidebar .inner_purchase02 p,
.sidebar .inner_purchase03 p {
  font-size: 1em;
  padding: 0;
  margin: 0;
  color: #fff;
  line-height: 1.2;
  font-weight: bold;
}
.sidebar .inner_bnr01 p,
.sidebar .inner_bnr02 p,
.sidebar .inner_bnr03 p {
  font-size: 1em;
  padding: 0;
  margin: 0;
  color: #461900;
  line-height: 1.2;
  font-weight: bold;
}

.sidebar .inner_contact p.num,
.sidebar .inner_line p.line,
.sidebar .inner_mail p.mail {
  position: relative;
}

.sidebar p.catch {
  font-size: 0.6em;
  font-weight: normal;
  padding: 0;
}
.sidebar p.info {
  font-size: 0.7em;
  font-weight: normal;
  text-align:center;
  margin:0;
  padding: 0.2em 0;
}
.sidebar p.info span {
  color:red;
  font-weight:bold;
}

.sidebar .inner_contact::before,
.sidebar .inner_line::before,
.sidebar .inner_mail::before,
.sidebar .inner_purchase01::before,
.sidebar .inner_purchase02::before,
.sidebar .inner_purchase03::before,
.sidebar .inner_bnr01::before,
.sidebar .inner_bnr02::before,
.sidebar .inner_bnr03::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.5em;
  transform: translateY(-50%);
}

.sidebar .inner_contact::before {
  width: 15px;
  height: 19px;
  left:0.6em;
  background: url("/assets/img/common/phone.png") center / contain no-repeat;
}

.sidebar .inner_line::before {
  width: 20px;
  height: 25px;
  background: url("/assets/img/common/line.png") center / contain no-repeat;
}

.sidebar .inner_mail::before {
  width: 22px;
  height: 25px;
  background: url("/assets/img/common/mail.png") center / contain no-repeat;
}

.sidebar .inner_purchase01::before {
  width: 30px;
  height: 32px;
  left:1.5em;
  background: url("/assets/img/common/icon-3box01.png") center / contain no-repeat;
}

.sidebar .inner_purchase02::before {
  width: 30px;
  height: 32px;
  left:1.5em;
  background: url("/assets/img/common/icon-3box02.png") center / contain no-repeat;
}

.sidebar .inner_purchase03::before {
  width: 30px;
  height: 32px;
  left:1.5em;
  background: url("/assets/img/common/icon-3box03.png") center / contain no-repeat;
}

.sidebar .inner_bnr01::before {
  width: 20px;
  height: 21px;
  background: url("/assets/img/common/icon-bnr01.png") center / contain no-repeat;
}

.sidebar .inner_bnr02::before {
  width: 20px;
  height: 21px;
  background: url("/assets/img/common/icon-bnr02.png") center / contain no-repeat;
}

.sidebar .inner_bnr03::before {
  width: 20px;
  height: 21px;
  background: url("/assets/img/common/icon-bnr03.png") center / contain no-repeat;
}

/* ===========================
  sidebar hover effect
=========================== */
.sidebar a{
  transition:
  transform .25s ease,
  box-shadow .25s ease,
  filter .25s ease;
  text-decoration: none;
}

/* hover */
.sidebar a:hover{
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0,0,0,.18);
  filter: brightness(1.05);
}

/* 押した時 */
.sidebar a:active{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}


/* 1024px以下で非表示 */
@media (max-width: 1024px){
.sidebar{
    display: none;
  }
}