@charset "UTF-8";

/* 各カラムと間隔の横幅を指定 */
:root {
  --side-width-pc: 310px;
  --gutter-width-pc: 100px;
  --main-width-pc: 460px;
}

/* All + Mobile */

/* PCでは不要となる要素を非表示 */
#hotcook2511 .hotcook2511__sideContainer, #hotcook2511 .hotcook2511__backgroundContainer, #hotcook2511 .hotcook2511__logoContainer {
  display: none;
}

#hotcook2511 .hotcook2511__couponBadge {
  top: 44.5%;
  right: 2.5%;
  width: 115px;
}

#hotcook2511 .hotcook2511__headerContainer {
  background-color: var(--rn-khaki-5);
}

#hotcook2511 #js-hotcook2511__floatButton {
  bottom: 5%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}

#hotcook2511 #js-hotcook2511__floatButton.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 購入イメージ図に表示するテキスト */
#hotcook2511 #hotcook2511__buying_remain {
  position: absolute;
  top: 78.5%;
  left: 32%;
  transform: translate(-50%, -50%);
}
#hotcook2511 #hotcook2511__buying_payed {
  position: absolute;
  top: 78.5%;
  left: 73%;
  transform: translate(-50%, -50%);
}
#hotcook2511 #hotcook2511__buying_toal {
  position: absolute;
  top: 88.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Only PC */

@media screen and (min-width: 576px) {
  
  /* サイドカラムの横幅と位置を指定 */
  #hotcook2511 .hotcook2511__sideContainer {
    display: block;
    width: var(--side-width-pc);
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    /* ブラウザの横幅を元に計算 */
    margin-left: calc( ( 100vw - (var(--side-width-pc) + var(--gutter-width-pc) + var(--main-width-pc)) ) / 2 );
  }

  /* メインカラムの横幅と位置を指定 */
  #hotcook2511 .hotcook2511__mainContainer {
    width: var(--main-width-pc);
    /* ブラウザの横幅を元に計算 */
    margin-left: calc( ( ( 100vw - (var(--side-width-pc) + var(--gutter-width-pc) + var(--main-width-pc)) ) / 2 ) + var(--gutter-width-pc) + var(--side-width-pc));
  }

  /* 背景カラムの位置を指定 */
  #hotcook2511 .hotcook2511__backgroundContainer {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--rn-khaki-6);
  }

  #hotcook2511 .hotcook2511__logoContainer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
  }

  #hotcook2511 .hotcook2511__couponBadge {
    width: 140px;
  }

  #hotcook2511 .hotcook2511__couponBanner:hover {
    opacity: 0.7;
  }
  
}