@charset "UTF-8";
/* /shop/e/eLzeroset2509/
----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
/* reset
---------------------- */
#Lzeroset {
	width: 1100px;
	background:#f6f1ec;
	color:#511100;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.81;
	text-align: center;
	font-family: YakuHanJP, 'Zen Kaku Gothic New', sans-serif;
}
#Lzeroset a:hover{
	opacity:.7;
}
/* contents
---------------------- */
#Lzeroset .lead{
	font-size: 24px;
	line-height: 2.41;
	background:url(../../img/event_L/eLzeroset2404/lead_bg.png)no-repeat bottom right;
	padding: 70px 0 30px;
	margin-bottom: 38px;
}
#Lzeroset .set{
	margin:0 40px 48px;
}
#Lzeroset .ribbon{
	font-size: 36px;
	font-weight: 500;
	line-height: 1;
	display:inline-block;
	height:60px;
	padding-top: .3em;
	background:url(../../img/event_L/eLzeroset2404/ttl_ribbon.png)no-repeat top left;
	width:360px;
}
#Lzeroset .set .ribbon{
	z-index:1;
	position: relative;
}
#Lzeroset .set ul{
	background:#dfd0c6 url(../../img/event_L/eLzeroset2509/set_bg.png)no-repeat top 25px left 35px;
	height:1460px;
	border-radius: 40px;
	position: relative;
	margin-top: -30px;
}
#Lzeroset .set ul li{
	font-size: 28px;
	font-weight: 500;
	line-height: 1.5;
	position: absolute;
	width:250px;
}
#Lzeroset .set ul li:nth-child(1){
	top:308px;
	left:57px;
}
#Lzeroset .set ul li:nth-child(2){
	top:308px;
	left:385px;
}
#Lzeroset .set ul li:nth-child(3){
	top:308px;
	right:52px;
}
#Lzeroset .set ul li:nth-child(4){
	top:642px;
	left:216px;
}
#Lzeroset .set ul li:nth-child(5){
	top:642px;
	right:216px;
}
#Lzeroset .set ul li:nth-child(6){
	top:928px;
	left:56px;
}
#Lzeroset .set ul li:nth-child(7){
	top:928px;
	left:392px;
}
#Lzeroset .set ul li:nth-child(8){
	top:928px;
	right:56px;
}
#Lzeroset .set ul li.box{
	width:auto;
	bottom:62px;
	left:69px;
}
#Lzeroset .set ul li span{
	display:block;
	font-size: 20px;
	/* margin-top: -10px; */
}
#Lzeroset .set ul li span.ls-s{
	letter-spacing: -0.05em;
}
#Lzeroset .set ul li span:last-child{
	display:block;
	margin-top: .3em;
}
#Lzeroset .cv a._btn{
	color:#fff;
	font-size: 36px;
	font-weight: bold;
	padding-top: .5em;
	background:url(../../img/event_L/eLzeroset2404/cv_btn_bg1.png)no-repeat center left 38px,
	url(../../img/event_L/eLzeroset2404/cv_btn_bg2.png)no-repeat center right 40px;
	background-color:#522d25;
	display:inline-block;
	width:916px;
	height:105px;
	border-radius: 6px;
	box-shadow: 0px 5px #98655a;
	transition-duration: .2s;
	margin-top: 30px;
}
#Lzeroset .cv a._btn:hover{
	box-shadow: none;
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	text-decoration: none;
}
#Lzeroset .about{
	background:#fffdf7;
	border-radius: 40px;
	margin:122px 90px 80px;
	padding: 0 50px 56px;
}
#Lzeroset .about > img:first-child{
	margin-top: -25px;
	margin-bottom: 45px;
}
#Lzeroset .about p{
	line-height: 2;
	text-align: left;
}
#Lzeroset .about ul.kome{
	margin:20px 0 40px;
}
#Lzeroset .about ul.kome li{
	font-size: 12px;
	text-indent:-1em;
	text-align: left;
	padding-left: 1em;
}
#Lzeroset .prod{
	padding: 0 90px;
}
#Lzeroset .prod .ribbon{
	background:url(../../img/event_L/eLzeroset2404/prod_ribbon.png)no-repeat top left;
	width:471px;
	z-index:1;
	position: relative;
	margin-top: 33px;
}
#Lzeroset .prod ul{
	background:#dfd0c6;
	border-radius: 40px;
	margin-top: -28px;
	padding: 87px 0 10px;
}
#Lzeroset .prod li{
	text-align: left;
	padding-left: 285px;
	position: relative;
	margin-bottom: 50px;
}
#Lzeroset .prod li.candy1{
	background:url(../../img/event_L/eLzeroset2509/candy1.png)no-repeat top left 84px;
	min-height:204px;
}
#Lzeroset .prod li.biscuit1{
	background:url(../../img/event_L/eLzeroset2504/biscuit1.png)no-repeat top left 102px;
	min-height:206px;
}
#Lzeroset .prod li.biscuit2{
	background:url(../../img/event_L/eLzeroset2504/biscuit2.png)no-repeat top left 102px;
	min-height:206px;
}
#Lzeroset .prod li.box1{
	background:url(../../img/event_L/eLzeroset2509/box1.png)no-repeat top left 67px;
	min-height:171px;
}
#Lzeroset .prod li.box2{
	background:url(../../img/event_L/eLzeroset2504/box2.png)no-repeat top left 67px;
	min-height:171px;
}
#Lzeroset .prod li.pouch1{
	background:url(../../img/event_L/eLzeroset2509/pouch1.png)no-repeat top left 73px;
	min-height:196px;
}
#Lzeroset .prod li.pouch2{
	background:url(../../img/event_L/eLzeroset2509/pouch2.png)no-repeat top left 73px;
	min-height:196px;
}
#Lzeroset .prod li.pouch3{
	background:url(../../img/event_L/eLzeroset2509/pouch3.png)no-repeat top left 73px;
	min-height:196px;
}
#Lzeroset .prod li.new::before{
	content:url(../../img/event_L/eLzeroset2404/prod_new.png);
	position: absolute;
	top:-40px;
	left:30px;
}
#Lzeroset .prod ul li p:first-child{
	font-size: 40px;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 22px;
	padding: 0 .1em;
	background:linear-gradient(transparent 60%, #fff 60%);
	display:inline-block;
}
#Lzeroset .prod ul li p:first-child span{
	font-size: 25px;
}
#Lzeroset .prod ul li p:last-child{
	font-size: 17px;
	letter-spacing: -0.02em;
	padding-right: 50px;
}
#Lzeroset .review {
	padding: 60px 0 80px;
}
#Lzeroset .review .ribbon{
	margin: 20px 0 50px;
}
#Lzeroset .review ul {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	flex-wrap: wrap;
	margin:0 90px;
}
#Lzeroset .review ul li {
	background:#dfd0c6;
	width:440px;
	border-radius: 20px;
	padding: 20px;
	font-size: 18px;
	line-height: 1.77;
	text-align: left;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	margin-bottom: 35px;
}
#Lzeroset .review ul li > img:first-child {
	margin-bottom: 15px;
}
#Lzeroset .review ul li p:not(:last-child) {
	padding-bottom: .8em;
}
#Lzeroset .review ul li p:last-child {
	margin-top: auto;
}
#Lzeroset .cv2{
	font-weight: 500;
	background:#dfd0c6 url(../../img/event_L/eLzeroset2509/cv2_img.png)no-repeat top 66px left 44px;
	padding-bottom: 80px;
}
#Lzeroset .cv2 p:first-child{
	font-size: 18px;
	line-height: 2.22;
	text-align: left;
	padding-top: 384px;
	padding-left: 47px;
}
#Lzeroset .cv2 .item{
	font-size: 21px;
	line-height: 1.9;
	text-align: left;
	background:#fff;
	border-radius: 20px;
	margin:55px 90px 35px;
	padding: 15px 100px;
	padding-right: 0;
}
#Lzeroset .brand{
	padding: 80px 70px;
}
#Lzeroset .brand .ribbon{
	background:url(../../img/event_L/eLzeroset2404/brand_ribbon.png)no-repeat top left;
	width:625px;
	margin-bottom: 30px;
}
#Lzeroset .brand a img{
	width:100%;
}

/* revico */
#Lzeroset .review2 {
    padding: 80px 0;
}
#Lzeroset .review2 > p:first-child {
    margin-bottom:20px;
}
#Lzeroset .block-goods-user-review {
  color:#504741;
  font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  text-align:left;
}
#Lzeroset .revico-star div.revico-star-graph,
#Lzeroset div.revico-common-background-style{
  background-color:transparent;
}
#Lzeroset .revico-multicomment-top .revico-starability-result {
    background-image: url(https://show.revico.jp/img/star_yellow.png);
}
.revico-modal-state{/* ID不要 */
  display:none !important;
}
#Lzeroset .revico-star .revico-star-graph {
    margin-top: 0;
}

/* accordion */
.accordion__container {
  width: 100%;
  margin: 80px auto 0;
}
.accordion__title {
  position: relative;
  cursor: pointer;
  user-select: none;
	background:#fff;
	border: 3px solid #522d25;
	border-radius:8px;
	color: #522d25;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	padding: 20px 0;
	text-align: center;
}
.accordion__title::before, .accordion__title::after {
  content: '';
  display: block;
  background-color: #522d25;
  position: absolute;
  top: 50%;
  width: 24px;
  height: 3.5px;
  right: 25px;
}
.accordion__title::after {
  transform: rotate(90deg);
  transition-duration: .3s;
}
.accordion__title:hover,
.accordion__title:active,
.accordion__title.is-active {
  /* background-color: #005bac; */
}
.accordion__title.is-active::before {
  opacity: 0;
}
.accordion__title.is-active::after {
  transform: rotate(0);
}
.accordion__content {
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: .3s;
  margin:0 -50px;
  padding-bottom: 4px;
}
.accordion__content.is-open {
  height: auto;
  opacity: 1;
}

/* points */
#Lzeroset ol.points {
  display: flex;
  justify-content: center;
	margin: 120px 0 100px;
}
#Lzeroset ol.points li:before, #Lzeroset ul.packages {
  background-repeat: no-repeat;
  background-size: contain
}
#Lzeroset ol.points li {
}
#Lzeroset ol.points li {
  position: relative;
  background-color: #69453c;
  border-radius: 4px;
	list-style: none;
  margin: 0 40px
}
@media screen and (max-width:640px) {
  #Lzeroset ol.points li {
    margin: 0 2vw
  }
}
#Lzeroset ol.points li:before {
  content: "";
  position: absolute;
  z-index: 10;
  pointer-events: none;
  width: 92px;
  height: 95px;
  left: -40px;
  top: -70px
}
@media screen and (max-width:640px) {
  #Lzeroset ol.points li:before {
    width: 16vw;
    height: 16.52vw;
    left: -3vw;
    top: -10vw
  }
}
#Lzeroset ol.points li:nth-child(1):before {
  background-image: url(/img/event_L/eLzerobox2310/point1@2x.png)
}
#Lzeroset ol.points li:nth-child(2):before {
  background-image: url(/img/event_L/eLzerobox2310/point2@2x.png);
  animation-delay: 1s
}
#Lzeroset ol.points li:after {
  content: "";
  position: absolute;
  z-index: 2;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  top: 4px;
  left: 4px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 4px;
  pointer-events: none
}
#Lzeroset ol.points a {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  text-align: center;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  width: 365px;
  padding: 16px 0
}

@media screen and (max-width:640px) {
  #Lzeroset ol.points a {
    width: 40vw;
    padding: 8vw 0 calc(2vw + 40px)
  }
}
#Lzeroset ol.points a:before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  background-color: #4e281f;
  width: 40px;
  height: 100%;
  top: 0;
  border-radius: 0 4px 4px 0
}
@media screen and (max-width:640px) {
  #Lzeroset ol.points a:before {
    width: 100%;
    height: 40px;
    bottom: 0;
    border-radius: 0 0 4px 4px
  }
}
#Lzeroset ol.points a:after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 11px;
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/whats/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  right: 14px;
  top: calc(50% - 5px)
}

@media screen and (max-width:640px) {
  #Lzeroset ol.points a:after {
    right: calc(50% - 7px);
    bottom: 15px
  }
}

#Lzeroset ol.points a h3, #Lzeroset ol.points a p {
  position: relative;
  z-index: 1;
  pointer-events: none;
  text-align: center;
}

#Lzeroset ol.points a p {
  letter-spacing: .1em;
  font-size: 15px;
  line-height: 1.7em
}

@media screen and (max-width:640px) {
  #Lzeroset ol.points a p {
    font-size: 2.96vw;
    line-height: 1.3em
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset ol.points a p br {
    display: none
  }
}

#Lzeroset ol.points a h3 {
  line-height: 1.3em;
  font-size: 24px;
  letter-spacing: .1em;
}

@media screen and (max-width:640px) {
  #Lzeroset ol.points a h3 {
    margin-top: 1vw;
    font-size: 4.73vw
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset ol.points a h3 br {
    display: none
  }
}

@media screen and (max-width:640px) {
  #Lzeroset ol.points li:first-child a {
    padding-top: 10.5vw
  }
}
#Lzeroset ol.points a:before {
  transition: width .4s ease
}

/* modal */
.modal__item{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
	left:0;
  width: 100%;
	overflow-y: auto;
  overscroll-behavior-y: contain;
  z-index: 99;
}
.modal__bg{
  background: rgba(223,208,198,.95);
  min-height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__bg:hover{
  cursor: pointer;
}
.modal__content{
  margin: 0 auto;
  max-width: 1000px;
	text-align: left;
  position: relative;
  z-index: 1;
}
.js-modal1 .modal__content,.js-modal2 .modal__content{
	padding:50px 0;
}
@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#tourui section {
    margin-top: 30px
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article#tourui section {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

#Lzeroset .modal__content article#tourui h2 span {
  margin-left: 10px
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#tourui h2 span:after {
    right: -20px
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article#tourui h2 span:after {
    right: -15px
  }
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#tourui figure.graph {
    width: 65vw;
    margin: 0 auto
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article#tourui figure.graph {
    width: 400px;
    margin-left: 40px
  }
  #Lzeroset .modal__content article#tourui figure.graph img {
    width: 100%;
  }
  #Lzeroset .modal__content article#tourui .text {
    width: 430px
  }
}

#Lzeroset .modal__content article#tourui .hana {
  position: absolute;
  z-index: 10
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#tourui .hana {
    width: 37vw;
    left: -5vw;
    top: calc(20vw + 140px)
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article#tourui .hana {
    width: 240px;
    left: -36px;
    bottom: -34px
  }
}
#Lzeroset .modal__content article#kodawari {
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/modal/kodawari/bg_milk.jpg);
  background-position: right top;
  background-repeat: no-repeat
}
@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#kodawari {
    background-size: 92%
  }
}

#Lzeroset .modal__content article#kodawari section {
  clear: both
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#kodawari section {
    padding-top: 20vw
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article#kodawari section {
    padding-top: 50px
  }
}

#Lzeroset .modal__content article#kodawari section h3 {
  padding: 6px 30px 7px;
  background-color: #4a241b;
  color: #fff;
  font-weight: 500;
  letter-spacing: .05em;
  border-radius: 4px
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#kodawari section h3 {
    margin-top: 10px;
    text-align: center;
    font-size: 18px
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article#kodawari section h3 {
    display: inline-block;
    font-size: 22px
  }
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#kodawari section figure {
    width: 78vw;
    height: 52.18vw
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article#kodawari section figure {
    width: 432px;
    height: 289px
  }
  #Lzeroset .modal__content article#kodawari section.sozai figure {
    margin-right: 40px;
    float: left
  }
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#kodawari section.sozai .floater {
    width: 22vw;
    height: calc(400px - 50vw);
    float: right;
    shape-outside: ellipse(50px 130px at 50% 100%)
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article#kodawari section.recipe figure {
    margin-left: 40px;
    margin-bottom: 20px;
    float: right
  }
}

#Lzeroset .modal__content article#kodawari .hana, .tns-controls button {
  position: absolute;
  z-index: 10
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content article#kodawari .hana {
    width: 34vw;
    max-width: 160px;
    right: -8vw;
    margin-top: -150px
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article#kodawari .hana {
    width: 235px;
    right: -85px;
    bottom: -55px
  }
}
#Lzeroset .modaal-close,
#Lzeroset .modal__content .close {
  z-index: 9000;
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/modal/close_circle@2x.png);
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  pointer-events: auto
}

#Lzeroset .modal__content .close:after, #Lzeroset .modal__content .close:before {
  content: "";
  position: absolute;
  height: 3px;
  top: calc(50% - 1px);
  background-color: #fffdf7;
  border-radius: 3px
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content .close:after, #Lzeroset .modal__content .close:before {
    width: 20px;
    left: calc(50% - 10px)
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content .close:after, #Lzeroset .modal__content .close:before {
    width: 24px;
    left: calc(50% - 12px)
  }
}

#Lzeroset .modal__content .close:before {
  transform: rotate(45deg)
}

#Lzeroset .modal__content .close:after {
  transform: rotate(-45deg)
}

#Lzeroset .modal__content .close:after, #Lzeroset .modal__content .close:before {
  transition: all .2s ease
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content .close:hover:after, #Lzeroset .modal__content .close:hover:before {
    width: 24px;
    left: calc(50% - 12px)
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content .close:hover:after, #Lzeroset .modal__content .close:hover:before {
    width: 32px;
    left: calc(50% - 16px)
  }
}
@media screen and (max-height:1020px) {
  #Lzeroset .modal__content .close {
    display: block;
    position: fixed;
    width: 65px;
    height: 65px;
    right: calc(50% - 480px);
    top: 70px
  }
}

@media screen and (min-height:1021px) {
  #Lzeroset .modal__content .close {
    display: block;
    position: absolute;
    width: 65px;
    height: 65px;
    right: -27px;
    top: -27px
  }
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content .close {
    display: block;
    position: fixed;
    width: 50px;
    height: 50px;
    right: 24px;
    top: 28px
  }
}
#Lzeroset .modal__content article {
  position: relative;
  margin: 0 auto 0;
  background-color: #fffdf7;
  border: 3px solid #4a241b;
  pointer-events: auto
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content article {
    width: 96vw;
    margin-bottom: 100px
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content article {
    width: 1000px
  }
}

#Lzeroset .modal__content article:after, #Lzeroset .modal__content article:before {
  content: "";
  position: absolute;
  width: calc(100% - 12px);
  height: 3px;
  background-repeat: repeat-x
}

#Lzeroset .modal__content article:before {
  left: 6px;
  top: 6px;
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/modal/line_top.png)
}

#Lzeroset .modal__content article:after {
  left: 6px;
  bottom: 6px;
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/modal/line_bottom.png)
}

#Lzeroset .modal__content ._wrapper {
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/modal/bg_cacao.png);
  background-repeat: no-repeat
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content ._wrapper {
    padding: 100px 8vw 30px;
    background-size: 28%;
    background-position: 12px -15px
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content ._wrapper {
    padding: 70px 50px 80px;
    background-position: 20px -15px
  }
}

#Lzeroset .modal__content ._wrapper:after, #Lzeroset .modal__content ._wrapper:before {
  content: "";
  position: absolute;
  width: 3px;
  height: calc(100% - 12px);
  background-repeat: repeat-y
}

#Lzeroset .modal__content ._wrapper:before {
  left: 6px;
  top: 6px;
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/modal/line_left.png)
}

#Lzeroset .modal__content ._wrapper:after {
  right: 6px;
  top: 6px;
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/modal/line_right.png)
}

#Lzeroset .modal__content h2 {
  text-align: center;
  color: #472a20;
  font-weight: 700;
  line-height: 1.5em
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content h2 {
    font-size: 5.2vw;
    letter-spacing: -.05em
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content h2 {
    font-size: 30px
  }
}

#Lzeroset .modal__content h2 span:after, #Lzeroset .modal__content h2 span:before {
  width: 22px;
  height: 26px
}

#Lzeroset .modal__content h2 span:before {
  left: -30px;
  top: 0;
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/modal/attention_left.svg)
}

#Lzeroset .modal__content h2 span:after {
  right: -30px;
  top: 0;
  background-image: url(https://www.lotte.co.jp/products/brand/zero/assets/img/modal/attention_right.svg)
}

#Lzeroset .modal__content p {
  margin-top: 1em;
  text-align: justify;
  color: #472a20
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content p {
    font-size: 15px;
    line-height: 1.6em
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content p {
    font-size: 18px;
    line-height: 1.8em
  }
}

#modal #bsl h2, #Lzeroset .modal__content p b {
  color: #c70000;
  font-weight: 700
}

@media screen and (max-width:640px) {
  #Lzeroset .modal__content p b {
    font-size: 17px
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset .modal__content p b {
    font-size: 20px
  }
}
#Lzeroset .modal__content p.note {
  font-size: 12px
}

/* qa */
#qa{
	text-align: left;
}
#qa li .question:after, #qa li .question:before, #whats ol.points a:after {
  transition: transform .2s ease
}
#qa li .question:after, #qa li .question:before, #whats ol.points a:after {
  transition: transform .2s ease
}
#product ol.face, #qa ol, #recipe ul {
  list-style: none
}
#qa .answer .inner {
  display: inline-block;
  background-color: #f6f1ec;
	width:auto;
}
#modal .points h2 span, #qa, #qa li{
  position: relative
}
@media screen and (max-width:640px) {
  #qa li {
    margin: 40px 4vw
  }
}

@media print, screen and (min-width:641px) {
  #qa li {
    margin: 55px 20px 0 0
  }
  #qa li:nth-child(1) {
    margin-left: 100px
  }
  #qa li:nth-child(2) {
    margin-left: 430px
  }
  #qa li:nth-child(3) {
    margin-left: 240px
  }
  #qa li:nth-child(4) {
    margin-left: 400px
  }
  #qa li:nth-child(5) {
    margin-left: 70px
  }
  #qa li:nth-child(6) {
    margin-left: 510px
  }
}

#qa .num, #qa li .answer.init-height {
  position: absolute;
  pointer-events: none
}

#qa .num {
  z-index: 2;
  text-align: center;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-style: italic;
  background-image: url(/img/event_L/eLzerobox2310/circle@2x.png);
  background-repeat: no-repeat;
  background-size: contain
}

@media screen and (max-width:640px) {
  #qa .num {
    width: 55px;
    height: 55px;
    left: -10px;
    top: -20px;
    font-size: 18px;
    line-height: 55px
  }
}

@media print, screen and (min-width:641px) {
  #qa .num {
    width: 79px;
    height: 79px;
    left: -25px;
    top: -20px;
    font-size: 24px;
    line-height: 79px;
    letter-spacing: .05em
  }
}

@media screen and (max-width:640px) {
  #qa .num b {
    font-size: 24px
  }
}

@media print, screen and (min-width:641px) {
  #qa .num b {
    font-size: 32px
  }
}

#qa .question {
  position: relative;
  z-index: 1;
  display: inline-block;
  background-color: #f6f1ec;
  border: 2px solid #4b261d;
  box-shadow: 4px 4px 0#bb9782;
  border-radius: 2px;
  cursor: pointer
}

@media screen and (max-width:640px) {
  #qa .question {
    padding: 10px 50px
  }
}

@media print, screen and (min-width:641px) {
  #qa .question {
    padding: 15px 60px
  }
}

#qa .question:after, #qa .question:before {
  content: "";
  position: absolute;
  top: calc(50% + 1px);
  background-color: #4a241b;
  border-radius: 2px
}

@media screen and (max-width:640px) {
  #qa .question:after, #qa .question:before {
    width: 12px;
    height: 3px
  }
}

@media print, screen and (min-width:641px) {
  #qa .question:after, #qa .question:before {
    width: 16px;
    height: 4px
  }
}

#qa .question:before {
  transform: rotate(45deg)
}

@media screen and (max-width:640px) {
  #qa .question:before {
    right: 19px
  }
}

@media print, screen and (min-width:641px) {
  #qa .question:before {
    right: 27px
  }
}

#qa .question:after, #qa li.active .question:before {
  transform: rotate(-45deg)
}

@media screen and (max-width:640px) {
  #qa .question:after {
    right: 12px
  }
}

@media print, screen and (min-width:641px) {
  #qa .question:after {
    right: 18px
  }
}

#qa .question p {
  color: #4a241b;
  font-weight: 700;
  line-height: 1.5em
}

@media screen and (max-width:640px) {
  #qa .question p {
    font-size: 16px
  }
}

@media print, screen and (min-width:641px) {
  #qa .question p {
    font-size: 22px
  }
  #qa .question p br {
    display: none
  }
}

#qa .answer {
  position: relative;
  z-index: 10;
  top: -2px;
  padding: 0 4px 4px 0
}

#qa .answer .inner {
  border: 2px solid #4b261d;
  box-shadow: 4px 4px 0#bb9782;
  border-radius: 2px
}

@media screen and (max-width:640px) {
  #qa .answer .inner {
    padding: 15px 20px
  }
}

@media print, screen and (min-width:641px) {
  #qa .answer .inner {
    padding: 20px 30px
  }
}

#qa .answer p {
  color: #4a241b;
  line-height: 1.6em
}

@media screen and (max-width:640px) {
  #qa .answer p {
    margin-top: 10px;
    text-align: justify;
    font-size: 15px
  }
  #qa .answer p:first-child {
    margin-top: 0
  }
}

@media print, screen and (min-width:641px) {
  #qa .answer p {
    font-size: 17px
  }
}

#qa .question {
  transition: all .2s ease
}

#qa .question:hover {
  box-shadow: 7px 7px 0#bb9782;
  transform: translate(-3px, -3px)
}

#qa li .answer {
	display:none;
  /* height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .4s ease, opacity .2s linear .2s */
}

#qa li .answer.init-height {
  height: auto
}

#qa li.active .question:after {
  transform: rotate(45deg)
}

#qa li.active .answer {
  /* position: relative;
  height: auto;
  opacity: 1;
  padding-bottom: 4px;
  transition: height .4s ease, opacity .2s linear */
}

/* animation */
#qa li .question:after, #qa li .question:before, #whats ol.points a:after {
  transition: transform .2s ease
}
@media print, screen and (min-width:641px) {
  #Lzeroset ol.points a:hover:before {
    width: 100%
  }
}

@media screen and (max-width:640px) {
  #Lzeroset ol.points a:hover:after {
    transform: translateX(8px)
  }
}

@media print, screen and (min-width:641px) {
  #Lzeroset ol.points a:hover:after {
    transform: translateX(-8px)
  }
}

#Lzeroset ol.points li:before {
  transform-origin: 58% 100%;
  animation: balloon 3s ease infinite
}
#qa li .question:after, #qa li .question:before, #whats ol.points a:after {
  transition: transform .2s ease
}
@keyframes balloon {
  0%, 20% {
    transform: scale(1) rotate(0)
  }
  10% {
    transform: scale(1.1) rotate(-10deg)
  }
}