/* ========================================
   下部固定購入エリア
======================================== */

.purchase-fixed {
  position: fixed;

  left: 0;
  bottom: 0;

  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;

  z-index: 1000;
}
/* ========================================
   左右：購入ボタン共通
======================================== */

.purchase-special,
.purchase-standard {
  position: relative;
}


/* details自体 */
.purchase-special details,
.purchase-standard details {
  width: 100%;
}


/* ========================================
   左右：購入ボタン
======================================== */

.purchase-special summary,
.purchase-standard summary {
  display: flex;

  align-items: center;
  justify-content: center;

  height: 45px;
  padding: 8px 10px;

  cursor: pointer;
  list-style: none;

  text-align: center;

  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}


/* 左：SPECIAL EDITION */
.purchase-special summary {
  background: #1c558c;
  color: #fff;
}


/* 右：STANDARD EDITION */
.purchase-standard summary {
  background: #d71920;
  color: #fff;
}


/* デフォルトの三角マークを消す */
.purchase-special summary::-webkit-details-marker,
.purchase-standard summary::-webkit-details-marker {
  display: none;
}


/* ========================================
   上に開くメニュー
======================================== */

.purchase-menu {
  position: absolute;

  left: 0;
  bottom: 100%;

  width: 100%;

  background:rgba(221, 141, 146, 1);
  border: 1px solid rgba(0, 0, 0, 0.08);

  z-index: 1001;
}

.purchase-special .purchase-menu {
  background: rgba(142, 195, 239, 1);
}

.purchase-menu a:active {
  background:  #b9151b
}


.purchase-special .purchase-menu a:active {
  background:  #164b7c;
}

/* ========================================
   メニュー項目
======================================== */

.purchase-menu a {
  display: flex;
  flex-direction: column;

  min-height: 45px;

  align-items: center;
  justify-content: center;

  padding: 10px 10px;

  color: #111;
  text-decoration: none;

  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  text-align: center;
}

.purchase-menu-title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

.purchase-menu-note {
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}



/* メニュー項目の区切り線 */
.purchase-menu a + a {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}


/* ========================================
   開いているときのボタン色
======================================== */

/* SPECIAL */
.purchase-special details[open] summary {
  background: #164b7c;
}

/* STANDARD */
.purchase-standard details[open] summary {
  background: #b9151b;
}