@charset "UTF-8";
/* CSS Document */
/*FIRST bg title*/
.first, .second {color: #535353;}
.mainbanner_1st{z-index: 1; position: relative;}
.shoplist1 {background: url("../img/1_bg.webp"), #F7C5DA; background-size: contain;}
.first .event_info{border: none;  background: rgba(255, 255, 255, 0.80); width: 80%; padding: 5rem 5%;z-index: 1;  position: relative;}
.first hr {border: 0;height: 1px; background: #E97B80; width: 100%; margin: 2em 0; margin-top: 3rem; margin-bottom: 3.5rem;}
.tokuten_1st {background: url("../img/new2_bg.png)")no-repeat, #FEF0DA; background-size: contain;background-position: top;}
.first .gradation {background: url("../img/1_bg.webp"), #F7C5DA; background-size: contain;}
.inner_item_1st {max-width: 1000px; padding: 5rem 5%; width: 80%; background-color: rgba(255,255,255,0.7); border: none; margin: 0 auto;}
.goods_1st .inner_item_1st{padding-bottom: 0;z-index: 1; position: relative;}
.first .img-flex{ border-top: #707070 solid 1px;border-left: #707070 solid 1px;border-right: #707070 solid 1px;padding: 2rem;  box-sizing: border-box; background-color: #fff;}
.attention_1st{max-width: 1000px;  padding: 0 5%; width: 80%; background-color: rgba(255,255,255,0.7); border: none;margin: 0 auto;z-index: 1;  position: relative;}
.attention_inner {padding: 2rem;  border-left: #707070 solid 1px; border-right: #707070 solid 1px;border-bottom: #707070 solid 1px;box-sizing: border-box; background-color: #fff;}
.inner-faq {z-index: 1; position: relative;max-width: 1000px; padding: 5rem 5%; width: 80%; background-color: rgba(255,255,255,0.7); border: none; margin: 0 auto;}
.shoplist1 h2, .fq_1st h2, .toku_1st h2 { max-width: 40%; margin: 0 auto; padding-bottom: 3rem;}
.toku_1st h2 {padding-bottom: 2rem!important;}
/*storelist*/
dl dt{  font-weight:bold; display: inline-block;  width:34%; font-size:1.2rem;  text-align: left;  vertical-align: middle; }
dl dt span.small{font-size:0.75em;}
dl dd{ padding: 0; display: inline-block; width:65%; vertical-align: middle;}
.Xp {font-size: 1rem; border: 2.2rem solid #ccc; border-image-source: url("../img/X.png");  border-image-slice: 100 100 100 100 fill;  border-image-outset: 0; border-image-repeat: round; text-align: center;max-width: 70%; margin: 4rem auto 0; padding: 2rem 0.5rem;}
.first .storelist p::before{ content: ''; display: inline-block;width: 60px;height: 60px; background-image: url("../img/ribbon.png"); background-size: contain; vertical-align: middle; background-repeat: no-repeat;}
.event_info_inner {padding: 0 4rem; font-weight: bold;}
/*tokuten*/
.toku_1st {padding:5rem 0 0;}
/*item*/
/*attention faq*/
.inner-faq li {	list-style: none;}
.inner-faq li:not(:last-child){	padding-bottom: 1rem;}
section.faq {	width: 100%;	padding-bottom: 5rem;}
.question {	background: url("../img/Q.png") no-repeat left center;	padding-left: 8rem;	background-size: 3.4rem;		padding-top: 1rem;	padding-bottom: 1rem;}
.faq ul {padding: 0 2rem;}
.answer:last-child{padding-bottom: 0;}
.answer {background: url("../img/A.png") no-repeat left 1rem;	padding-left: 8rem;	background-size: 3.4rem;	padding-top: 1.5rem;	padding-bottom: 2rem;}
.attention-flex div {width: 20%;}
.attention-flex ul {width: 70%; font-size: 1rem; padding-left: 1.5rem;} 
section .fq_1st {max-width: 1800px; width: 100%;}
.hr1st {background: #FCEBF3!important; margin: 1rem 0!important;color: #FCEBF3!important;border: 0; height: 1px;}
.attention-flex{ display: flex;align-items: center; justify-content: space-between;}

/*SECOND*/
.second hr {border: 0; background: #B1DFF7!important; width: 100%; margin: 2em 0; margin-top: 3rem; margin-bottom: 3.5rem;color: #B1DFF7!important;height: 1px;}
.second .shoplist1 {background: linear-gradient(180deg, #A2DBF8 0%, #F5F7D6 100%); position: relative;}
.second .event_info{border: none; background: rgba(244, 251, 255, 0.80); width: 80%; padding: 5rem 5%;z-index: 1;  position: relative;}
.second .img-flex{ border-top: #707070 solid 1px;border-left: #707070 solid 1px;border-right: #707070 solid 1px;padding: 2rem;  box-sizing: border-box; background-color: #fff;}
.second .tokuten_1st{background: url("../img/2_bg2.png")no-repeat, linear-gradient(180deg, #DAF1FE 0%, #FFF 100%);background-size: contain;}
.seconddeco3, .seconddeco4, .seconddeco5,.seconddeco6{position: absolute;}
.seconddeco3 {left: 0; bottom: 5%;}
.seconddeco4{right: 0;bottom: 15%;}
.seconddeco5 {left: 0; top: 0%;}
.seconddeco6{right: 0; top: 0;}
.second .gradation {background: linear-gradient(180deg, #FFF 0%, #BADEFF 100%); position: relative;}
/*storelist*/
.second .storelist p::before{ content: ''; display: inline-block;width: 60px;height: 50px; background-image: url("../img/ribbon2.png"); background-size: contain; vertical-align: middle;background-repeat: no-repeat;}
.seconddeco1, .seconddeco2 {position: absolute; top: 0;}
.seconddeco1 {left: 0;}
.seconddeco2 {right: 0}
.second .Xp {font-size: 1rem;background: #FFFEF3;text-align: center;max-width: 70%; margin: 4rem auto 0; padding: 2rem 0.5rem;border: none; position: relative;}
.bubble1{position: absolute; transform: rotate( -45deg ); top: -5%; left: -10%;max-width: 30%;}
.bubble2 {position: absolute;max-width: 30%;right: -10%; bottom: -5%;transform: rotate( 125deg );}
/*item*/
.second .toku_content h3{max-width: 40%;}
.second .term1 { background-color: #B4DFF6;}
/*attention*/
.secattention {position: relative;}
.secattention p{position: absolute;left: 50%; top: 50%;  transform: translate(-50%,-50%); text-align: center; font-weight: bold; font-size: 1.2rem;}
.second .question{background: url("../img/Q2.png") no-repeat left center;    padding-left: 8rem; background-size: 3.4rem; padding-top: 1rem; padding-bottom: 1rem;}
.second .answer {background: url("../img/A2.png") no-repeat left 1rem;padding-left: 8rem; background-size: 3.4rem;padding-top: 1.5rem;}
/*bubble-animation*/
.bubble-animation {position: relative;}
.fuwafuwa1 { position: absolute; top: 2%; left: 2%;max-width: 50px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa2{position: absolute; top: 4%; right: 2%;max-width: 60px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa3{position: absolute; top: 15%; left: 1%;max-width: 60px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa4{position: absolute; top: 9%; right: 1%;max-width: 50px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa5{position: absolute; top: 10%; left: 3%;max-width: 45px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa6{position: absolute; top: 13%; right: 3%;max-width: 60px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa7{position: absolute; top: 25%; left: 2%;max-width: 70px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa8{position: absolute; top: 38%; left: 5%;max-width: 50px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa9{position: absolute; top: 40%; right: 5%;max-width: 50px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa10{position: absolute; top: 50%; left: 1%;max-width: 55px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa11{position: absolute; top: 55%; right: 1%;max-width: 50px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa12{position: absolute; top: 58%; left: 0%;max-width: 60px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa13{position: absolute; top: 62%; right: 0%;max-width: 55px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa14{position: absolute; top: 68%; left: 2%;max-width: 60px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa15{position: absolute; top: 71%; right: 2%;max-width: 50px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa16{position: absolute; top: 77%; left: 0%;max-width: 50px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa17{position: absolute; top: 81%; right: 3%;max-width: 60px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa18{position: absolute; top: 86%; left: 0%;max-width: 55px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa19{position: absolute; top: 90%; right: 1%;max-width: 60px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa20{position: absolute; top: 93%; left: 1%;max-width: 55px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa21{position: absolute; top: 95%; right: 0%;max-width: 55px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa22{position: absolute; top: 98%; left: 0%;max-width: 60px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa23{position: absolute; top: 1%; right: 9%;max-width: 58px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa24{position: absolute; top: 6%; left: 7%;max-width: 50px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa25{position: absolute; top: 8%; right: 8%;max-width: 50px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa26{position: absolute; top: 19%; left: 7%;max-width: 45px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa27{position: absolute; top: 48%; right: 7%;max-width: 45px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa28{position: absolute; top: 60%; left: 6%;max-width: 55px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa29{position: absolute; top: 64%; right: 6%;max-width: 55px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa30{position: absolute; top: 75%; left: 8%;max-width: 60px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa31{position: absolute; top: 83%; right: 8%;max-width: 55px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa32{position: absolute; top: 94%; left: 6%;max-width: 55px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa33{position: absolute; top: 14%; right: 5%;max-width: 55px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa34{position: absolute; top: 28%; right: 4%;max-width: 55px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa35{position: absolute; top: 30%; left: 4%;max-width: 55px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa36{position: absolute; top: 30%; right: 3%;max-width: 50px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa37{position: absolute; top: 73%; right: 3%;max-width: 55px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa38{position: absolute; top: 3%; left: 2.5%;max-width: 40px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa39{position: absolute; top: 7%; left: 5%;max-width: 50px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa40{position: absolute; top: 24%; right: 2%;max-width: 65px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa41{position: absolute; top: 23%; right: 1%;max-width: 60px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa42{position: absolute; top: 39%; right: 2%;max-width: 60px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa43{position: absolute; top: 49%; left: 3%;max-width: 50px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa44{position: absolute; top: 56%; right: 3%;max-width: 55px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa45{position: absolute; top: 96%; right: 1%;max-width: 58px; animation: fuwafuwa1 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa46{position: absolute; top: 40%; left: 2%;max-width: 65px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
.fuwafuwa47{position: absolute; top: 84%; left: 3%;max-width: 60px; animation: fuwafuwa 3s ease-in-out infinite alternate; transition: 2s ease-in-out;}
@keyframes fuwafuwa {
  0% { transform:translate(0, 0) rotate(15deg);}
  50% { transform:translate(-5px, -20px) rotate(0deg);}
  100% { transform:translate(0, 0) rotate(8deg);}
}
@keyframes fuwafuwa1 {
  0% { transform:translate(0, 0) rotate(3deg);}
  50% { transform:translate(-5px, 18px) rotate(0deg);}
  100% { transform:translate(0, 3px) rotate(10deg);}
}

@media screen and (max-width:980px) {
	.mainbanner_1st {display: inherit!important;}
	.shoplist1 dt, .shoplist1 dd{width: 100%;}
	.shoplist1 dt {text-align: center;}
	.first .event_info{padding: 3rem 5%;}
	.attention-flex {flex-direction: column;}
	.attention-flex ul {width: 95%;}
	.attention-flex div {margin-bottom: 1rem;width: 27%;}
	.storelist p {padding-right: 1.5rem;}
	.nbsp{display: none;}
}
@media screen and (max-width:800px) {
	.attention-flex div {width: 31%;}
	.Xp, .second .Xp {max-width: 90%;}
	.event_info_inner {padding: 0 3.5rem;}
}
@media screen and (max-width:700px) {
	.attention-flex ul {width: 85%;}
	.shoplist1 h2, .fq_1st h2, .toku_1st h2{max-width: 60%;}
	.second .shoplist1 h2, .second .fq_1st h2, .second .toku_1st h2, .second .goods h2{max-width: 65%;}
	.first hr, .second .event_info_inner hr {margin-top: 2.5rem; margin-bottom: 1.5rem;}
	.event_info_inner {padding: 0;}
	.toku_1st {padding: 3rem 0 0;}
	.inner-faq {width: 90%;  padding: 3rem 3% 3rem;}
	.question, .answer, .second .question, .second .answer {padding-left: 5rem;}
	.first .gradation {padding-bottom: 3rem;}
	.first .event_info {padding: 3rem 3%;width: 90%;}
	.goods_1st .inner_item_1st{padding: 3rem 3% 0;width: 90%;}
	.attention_1st{padding: 0 3% 0;width: 90%;}
	ul.on {width: 85%; margin: 0 auto!important;}
	.second .event_info{padding: 3rem 3%;width: 90%;}
	.secattention p {font-size: 1.1rem;}
	.seconddeco3, .seconddeco4,.seconddeco1, .seconddeco2, .seconddeco5, .seconddeco6 {max-width: 10rem;}
	.bubble1 {top: -7%; left: -16%; max-width: 50%;}
	.bubble2 {  max-width: 50%;  right: -16%;  bottom: -7%;}
	.second hr:last-child, .ss{display: none;}
}
@media screen and (max-width:560px) {
	.shoplist1 h2, .fq_1st h2, .toku_1st h2{max-width: 80%;}
	.second .shoplist1 h2, .second .fq_1st h2, .second .toku_1st h2, .second .goods h2{max-width: 95%;}
	.first .img-flex, .attention_inner {padding: 2rem 0.5rem;}
	.attention-flex div{width: 35%;}
	.question, .answer {background-size: 3.2rem;}
	ul li.at {width: 30%;}
	.second .img-flex{padding: 2rem 0.5rem;}
	.second .toku_content h3{max-width: 60%;}
}
@media screen and (max-width:420px) {
	.attention_1st{padding: 0 1%; width: 95%;}
	.goods_1st .inner_item_1st{padding: 3rem 1% 0; width: 95%;}
	.fq_1st h2 {padding-bottom: 1rem;}
	.first .storelist p::before {  content: ''; display: inline-block;width: 70px;	height: 66px;}
	.second .storelist p::before { content: ''; display: inline-block; width: 70px; height: 55px;}
	.attention-flex div {width: 44%;}
}
@media screen and (max-width:390px) {
.secattention p {font-size: 1rem;}
}

.online-attention{padding: 2rem 0 0;text-align: left;width: 98%;}
@media screen and (max-width:700px) {
	.online-attention{width: 85%;font-size: 0.9rem;}
}