/*PCでSP版カゴを使用する時用*/

@charset "utf-8";

body {
    text-align: justify;
	font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}

#kago{
	text-align: justify;
}

#Footer{
	max-width: 750px;
	margin: 0 auto;
	font-size: 16px;
}

.note_sms_wrap p {
	letter-spacing: -0.02em;
	color: #888 !important;
	padding-bottom: 5px;
}

/* anime_updown */
.anime_updown {
    animation: 2s updown infinite;
}
@keyframes updown {
  0%, 100% {
    transform: translateY(-8%);
  }
  40% {
    transform: translateY(0);
  }
}

#enquete_thanks .kome02 {
    line-height: 1.4em;
    font-size: 110%;
    text-align: right;
    margin: 5px 15px;
}

.cv_btn {
    top: 8%;
}

/* cv_orders */
.cv_orders {
    position: relative;
}
.cv_orders .box_orders_other {
    background: none;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    top: 0.5em;
    padding: 0;
}
.box_orders_other div {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}
.box_orders_other div .txt_order {
    font-size: 18px;
    padding: 0;
    margin: 0 0;
    text-align: center;
    width: 100%;
}
.txt_marker {
    color: #E22E2E;
    background: -webkit-linear-gradient(transparent 60%, #fff684 40%);
    background: -o-linear-gradient(transparent 60%, #fff684 40%);
    background: linear-gradient(transparent 60%, #fff684 40%);
}
.box_orders_other div .txt_small,
.box_orders_other div .txt_date {
    font-size: 100%;
    padding: 0;
    margin: 0 auto;
}
.box_orders_other div .txt_order span span {
    color: #000;
    font-size: 100%;
}
@media screen and (max-width: 640px) {
.box_orders_other div .txt_order {
    font-size: 3.5vw;
}
.box_orders_other.last div .txt_order {
    font-size: 4vw;
}
.box_orders_other div .txt_small,
.box_orders_other div .txt_date {
    font-size: 3vw;
}
}

.cvbtn_timer_wrap{
	position: relative;
	height: 20px;
}
.cvbtn_timer{
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #0d0707;
    font-weight: bold;
}
.cvbtn_timer .countTimer{
	color: #0d0707;
	font-size: 115%;
}

#header .box_orders {
  position: relative;
}	
/*header*/
#header p{
    margin: 0;
	padding: 0;
    line-height: 1.4;
}
#header .txt_small {
    font-size: 60%;
}
#header .box_orders {
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    border: 4px solid #E22E2E;
    display: flex;
    justify-content: space-evenly;
    top: 0;
    padding: 5px;
    height: 85px;
    max-width: 640px;
    width: 100%;
    /*z-index: 999;*/
}
#header .box_orders div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    width: 88%;
}
#header .box_orders div .txt_order {
    color: #E22E2E;
    font-size: 20px;
    margin: 0;
    text-align: center;
    width: 100%;
}
#header .box_orders div .txt_order {
    color: #E22E2E;
    font-size: 20px;
    margin: 0;
    text-align: center;
    width: 100%;
}
@media screen and (max-width: 480px){
.br_sp {display: block;}
#header .box_orders {
    padding: 0.5em;
    height: 15vw;
}
#header .box_orders div .txt_order {
    font-size: 3.7vw;
}
#header.box_orders div .txt_small, #header.box_orders div .txt_date {
    font-size: 2.5vw;
    margin: 0;
}
}

.text_red {
	color: #EF4444;
}

/* loading */ 
.loading_mov {
  position: fixed;
  max-width: 640px;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  z-index: 10;
  background: url(https://www.hack-tick.com/images_h060003_1303/ht_sp_h060003_1303_loading_bg.jpg) no-repeat center;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 0.5s 3.2s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading_pic {
  opacity: 0;
  animation: logo_fade 3.4s forwards;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}

/* box_countdown */
.box_countdown{
	text-align: center;
	margin: 0 auto;
	font-size: 12.8px;
	font-weight: bold;
	padding: 6px 0;
	line-height: 1.25;
	box-sizing: border-box;
}
.box_countdown .timer {
  background: #d24d59;
  padding: 0.3em 0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 200%;
  font-weight: bold;
  letter-spacing: 0.1em;
  box-sizing: border-box;
}
.box_countdown .timer span {
  color: #fff;
  margin: 0;
}
.box_countdown .timer .txt {
  background: #fff;
  color: #333;
  display: inline-block;
  width: 3em;
  text-align: center;
  line-height: 1.3em;
  font-size: 45%;
  padding: 0.5em;
  font-weight: bold;
  letter-spacing: 0;
  margin-right: 1em;
}
@media screen and (max-width: 640px) {
  .box_countdown .timer {
    font-size: 6vw;
  }
}
#enquete_thanks .kome{
	line-height: 1.25;
}

/*** キャンペーン期限（月末表示）用 ***/
.limited_wrap{
	position: relative;
}
.limited_date{
	position: absolute;
	top: 10px;
	/*left: 18px;*/
	left: 14%;
	font-size: 21px;
	font-weight: bold;
	letter-spacing: -0.02em;
	color: #333;
	transform: translateX(-50%);
}
@media screen and (min-width:721px){
	.limited_date{
		top: 18px;
		/*left: 30px;*/
		font-size: 36px;
	}
}

/*tokuten 追加コンテンツ*/
.box_countdown_tokuten {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 1em;
}
@media screen and (max-width: 640px) {
  .box_countdown_tokuten {
    font-size: 5vw;
  }
}
.box_countdown_tokuten .countTimer {
  color: #333;
}

/* 離脱ポップアップ2枚目用 */
#modalArea2 .modalContents {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}
/* アニメーション同期用 */
.modalArea {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .4s;
    margin: 0;
}
.modalArea.is-show {
    visibility: visible;
    opacity: 1;
}
.modalBg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
.modalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
}

.modalContents {
    background: transparent;
    padding: 0;
}

/* モールボタン群（2枚目用・画像ベース） */
.mallBoxContainer {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: #f1ede9;
    padding-bottom: 3px;
    border-radius: 0 0 10px 10px;
}
.mallBoxBase {
    width: 100% !important;
    display: block;
}
.mallButtonGroup {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.mallButton {
    flex: 1;
    display: block;
    transition: opacity 0.2s;
}
.mallButton:hover {
    opacity: 0.8;
}
.mallButton img {
    width: 100% !important;
    height: auto;
    display: block;
}
#modalArea {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
}
#modalArea .modalWrapper {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 40px auto;
}
#modalArea .modalBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.modalWrapper.mallbtn {
    width: 43vh !important;
    margin: auto !important;
}

/*pc用*/
@media screen and (max-width:720px){
	.modalWrapper {
		max-width: 360px;
	}
	.modalWrapper.mallbtn {
		width: 45vh !important;
	}
}