@charset "utf-8";


.window{
	background:url(../cmn/images/arrow_blank.png) no-repeat 95% 50%;
	background-size:11px;
	padding-right:40px;
	color:#222;
}
/* -------------------------------------------------------------------
h2
------------------------------------------------------------------- */
.title-inner{
	text-align:center;
	margin:0 0 30px;
	background:#1a1a1a;
	color:#fff;
	padding:.8em 0;
	border-radius:10px;
	position: relative;
}
.title-inner:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #1a1a1a;
}

.title-inner h2{
	font-size:clamp(19px ,2.5vw ,30px);
	letter-spacing:var(--spacing);
	font-weight:var(--w700);
}

.title-inner_text{
	font-size:clamp(14px ,2.5vw ,18px);
	letter-spacing:var(--spacing);
	font-weight:var(--w700);
	margin:0px auto 40px;
	text-align:center;
}

/* -------------------------------------------------------------------
メインビジュアル
------------------------------------------------------------------- */
.mv-inner{
	padding:0em 0;
	background:url(../images/mv/bg.jpg) no-repeat 50% 50% ;
	background-size:cover;
}

.mv-inner .mv{
	width:min(90% , 100%);
	margin: 0 auto;
}

@media screen and (min-width:768px){
.mv-inner{
	padding:0em 0;
	}
}

.mv-inner ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:15px 0; 
	margin:-160px auto 0px;
	padding:0 0 30px;
	max-width:85%;
}



@media screen and (min-width:768px){
.mv-inner ul{
	flex-wrap:nowrap;
	gap:0 15px; 
	margin:-50px auto 0px;
	padding:0 0 20px;
	max-width:500px;
	}
}
@media screen and (min-width:980px){
.mv-inner ul{
	margin:-60px auto 0px;
	padding:0 0 20px;
	max-width:600px;

	}
}
@media screen and (min-width:1180px){
.mv-inner ul{
	margin:-80px auto 0px;
	padding:0 0 50px;
	max-width:700px;

	}
}

/* -------------------------------------------------------------------
キャンペーン参加エントリー
------------------------------------------------------------------- */

.cp-entry-inner{
	padding:5em 0;
	background-image: repeating-linear-gradient(180deg, #cdf2e9, #cdf2e9 13px, #ace4d6d6 13px, #ace4d6d6 30px);
}
@media screen and (min-width:768px){
.cp-entry-inner{
	padding:8em 0;
	}
}

.cp-entry-inner .card-face{
	text-align:center;
	margin:20px auto 10px;
}
@media screen and (max-width: 768px) {
.cp-entry-inner .card-face{
	}
}

.cp-entry-inner .paleta-style_figure{
	margin:50px auto 10px;
}

.cp-entry-body{
	display:grid;
	grid-template-columns:1fr;
	gap:40px 20px;
	margin:30px 0 0;
	position:relative;
	padding:0 5px 20px;
}
@media screen and (min-width: 768px) {
.cp-entry-body{
	grid-template-columns:1fr 1fr;
	gap:40px 30px;
	}
}



.cp-entry-body .cmn-cp_div h3{
	font-size:clamp(16px,2.5vw,20px);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight:var(--w700);
	margin:0 0 30px;
	text-align:center;
	position: relative;
	color:#fff;
	padding:.7em;
}
.cp-entry-body .cmn-cp_div h3:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
}
.cp-entry-body .cmn-cp_div h3.no-entry{
	background:#449B81;

}
.cp-entry-body .cmn-cp_div h3.no-entry:before {
  border-top: 8px solid #449B81;
}
.cp-entry-body .cmn-cp_div h3.on-entry{
	background:#95D0BE;
	color:var(--base);
}
.cp-entry-body .cmn-cp_div h3.on-entry:before {
  border-top: 8px solid #95D0BE;
}
.cp-entry-body .cmn-cp_div h3.paleta-entry{
	background:#36A7CA;
}
.cp-entry-body .cmn-cp_div h3.paleta-entry:before {
  border-top: 8px solid #36A7CA;
}



.cp-entry-body .cmn-cp_div div{
	margin:0 0 30px;
	background:#fff;
	padding:20px;
	border-radius:10px;
	position:relative;
}
.cp-entry-body .cmn-cp_div div .step-icon{
	position:absolute;
	left:-15px;
	top:-15px;
	z-index:0;
}

@media screen and (min-width: 768px) {
.cp-entry-body .cmn-cp_div div{
	padding:30px;
	margin:0 0 20px;
	}
}

.cp-entry-body .cmn-cp_div div .cp-entry-text{
	font-size:clamp(14px,2.5vw,18px);
	font-weight:var(--w700);
	text-align:center;
}


.cp-entry-body .cmn-cp_div div .marker{
	background:linear-gradient(transparent 60%, #ff6 60%);
}
.cp-entry-body .cmn-cp_div div .marker_large{
	font-size:clamp(25px,2.5vw,36px);
	color:#00B0A8;
}

.cp-entry-body .cp-entry_notice{
	font-size:clamp(11px,2.5vw,13px);
	margin:-20px 0 0;
}
@media screen and (min-width: 768px) {
.cp-entry-body .cp-entry_notice{
	margin:-10px 0 0;
	}
}
.paleta-style{
	display:flex;
	justify-content:center;
	gap:0 20px;
	margin:30px 0 0;
	padding:0 5px 20px;
}
.paleta-style .cmn-cp_div {
	width:100%;
}
@media screen and (min-width: 768px) {
.paleta-style .cmn-cp_div {
	width:60%;
	}
}

.cp-entry-body .ill{
	max-width:70px;
	margin: 0 auto 10px;
	text-align:center;
}
@media screen and (min-width: 768px) {
.cp-entry-body .ill{
	max-width:100px;
	}
}

/* -------------------------------------------------------------------
LuLuCa+／JCBカードをお持ちでない方は
------------------------------------------------------------------- */
.cp-inner{
	padding:5em 0;
	background:#00B0A8;
	background: linear-gradient(169deg, #00B0A8 0%, #00B0A8 65%, #EA5C3C 65%, #EA5C3C 100%);
}
@media screen and (min-width:768px){
.cp-inner{
	padding:8em 0;
	}
}
.cp-body{
	background:#fff;
	padding:40px 30px;
	border-radius:10px;
}
.cp-body dl{
	text-align:center;
}

.cp-body dl .lmt-title{
	display:block;
	border-bottom:1px solid #666;
	margin:0 0 5px;
}
.cp-body dl .dots{
	display:none;
}
.cp-body dt{
	font-size:clamp(15px,2.5vw,20px);
	font-weight:var(--w700);
	text-align:center;
}
.cp-body dd{
	font-size:clamp(13px,2.5vw,16px);
}

.cp-body .max{
	margin: 0 auto 30px;
	text-align:center;
}
/* -------------------------------------------------------------------
エントリーの手順
------------------------------------------------------------------- */

.entry-inner{
	padding:5em 0;
	background:#EA5C3C;
	background: linear-gradient(-169deg, #EA5C3C 0%, #EA5C3C 65%, #fff 65%, #fff 100%);
}
@media screen and (min-width:768px){
.entry-inner{
	padding:8em 0;
	}
}

.entry-body{
	display:grid;
	grid-template-columns:repeat(4,250px);
	gap:15px;
	overflow-x:scroll;
	padding:0 0 10px;
	scrollbar-width: thin;
	scrollbar-color: #333 #e0e0e0;
	position:relative;
}
@media screen and (min-width:768px){
.entry-body{
	grid-template-columns:repeat(4,225px);
	overflow-x:hidden;
	}
}


.entry-body div{
	background:#fff;
	padding:20px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	border-radius:10px;
	position:relative;
}

.entry-body div figure{
	text-align:center;
	max-width:100px;
	margin:20px auto 10px;
}
@media screen and (max-width: 768px) {
.entry-body  div figure{
	max-width:100px;
	}
}

.entry-text{
	font-size:clamp(15px,2.5vw,16px);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight:var(--w700);
	text-align:center;
	color:#EA5C3C;
}

.step-title_entry{
	font-size:clamp(11px,2.5vw,12px);
	display: flex;
	justify-content: center;
	align-items: center;
	margin:15px 0 5px;
}


.step-title_entry p{
	font-weight:var(--w700);
	position:relative;
	text-align:center;
}
.step-title_entry .title {
	display: flex;
	justify-content: center;
	align-items: center;

}
.step-title_entry .title::before,
.step-title_entry .title::after {
	content: "";
	background-color: #1a1a1a;
	height: 2px;
	width: 20px;
}
.step-title_entry .title::before {
	margin-right: 5px;
	transform: rotate(60deg); 
}
.step-title_entry .title::after {
	margin-left: 5px;
	transform: rotate(-60deg); 
}

.store-list_entry{
	display:grid;
	grid-template-columns:1fr;
	gap:10px 0;
}


.store-list_entry a{
	display:block;
	text-decoration:none;
	border:2px solid #1a1a1a;
	background:#ff0;
	color:#1a1a1a;
	font-size:clamp(11px,2.5vw,13px);
	padding:5px 20px;
	border-radius:100px;
	font-weight:var(--w700);
	text-align:center;
}

.circle{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #EA5C3C;
  text-align:center;
  line-height: 50px;
 	font-size:clamp(11px,2.5vw,20px);
 	font-weight:var(--w700);
 	color:#fff;
 	margin:0 auto 0px;


}

/* -------------------------------------------------------------------
LuLuCaカード登録ステップ
------------------------------------------------------------------- */


.stepbar {
  margin: 0 auto;
}

.stepbar .stepbarwrap {
  margin: 4em 0 ;
  position: relative;

}

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  content: "";
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #E57BAC;
}

.stepbar .stepbarwrap .steptitle .stepnum {
  padding:.2em 1em;
  font-size:clamp(16px,2.5vw,17px);
  color: #fff;
  background:#E57BAC;
  position:relative;
  margin-left:.8em;
  border-radius:0px;
}

.stepbar .stepbarwrap .steptitle .stepnum:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right: 8px solid #E57BAC;
}



.stepbar .stepbarwrap .steptxt {
  padding-left: 2em;
  display:flex;
  justify-content:space-between;
  gap:0 25px;
}
@media screen and (max-width: 768px) {
.stepbar .stepbarwrap .steptxt {
	display:grid;
	grid-template-columns:2.5fr 1fr;
	align-items:center;
	}
}

.stepbar .stepbarwrap .steptxt figure{
	text-align:center;
	max-width:220px;
}
@media screen and (max-width: 768px) {
.stepbar .stepbarwrap .steptxt figure{
	max-width:100px;
	}
}

.stepbar .stepbarwrap .steptxt .steptxt-title {
	margin: 0.5em ;
	font-weight: bold;
	font-size:clamp(16px,2.5vw,22px);
	color:#E57BAC;
}

.stepbar .stepbarwrap .steptxt .steptxt-txt {
	font-size:clamp(16px,2.5vw,20px);
	font-weight: bold;
	margin:0 0.5em 10px;
	display:block;
}



.stepbar .stepbarwrap .steptxt .steptext-main {
	font-size:clamp(14px,2.5vw,18px);
	margin-left:.5em;
	max-width:600px;
}
@media screen and (max-width: 768px) {
.stepbar .stepbarwrap .steptxt .steptext-main {

	}
}

.stepbar .stepbarwrap .steptxt .steptext-main .step-notice{
	display:block;
	color:#E57BAC;
	font-weight:var(--w500);
}

.stepbar .stepbarwrap .stepline {
  width: 2px;
  height: calc(100% + 4em);
  background-color: #E57BAC;
  position: absolute;
  top: 1em;
  left: .6em;
  z-index: -1;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
  display: none;
}

@media screen and (max-width: 768px) {
  .stepbar {
    width: 100%;
  }
}
.step-inner{
	padding:5em 0;
	
}
@media screen and (min-width:768px){
.step-inner{
	padding:8em 0;
	}
}
.step-title{
	font-size:clamp(14px,2.5vw,16px);
	display: flex;
	justify-content: center;
	align-items: center;
	margin:15px 0 5px  0px;
}
@media screen and (min-width:768px){
.step-title{
	justify-content: flex-start;
	margin:15px 0 5px  65px;
	}
}

.step-title p{
	font-weight:var(--w700);
	position:relative;
	text-align:center;
}
.step-title .title {
	display: flex;
	justify-content: center;
	align-items: center;
}
.step-title .title::before,
.step-title .title::after {
	content: "";
	background-color: #1a1a1a;
	height: 2px;
	width: 20px;
}
.step-title .title::before {
	margin-right: 5px;
	transform: rotate(60deg); 
}
.step-title .title::after {
	margin-left: 5px;
	transform: rotate(-60deg); 
}

.store-list{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
	margin:15px 0 20px;
}
@media screen and (min-width:768px){
.store-list{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:0 20px;
	margin:0 0 40px;
	}
}

.store-list a{
	text-decoration:none;
	border:1px solid #1a1a1a;
	background:#E57BAC;
	color:#1a1a1a;
	font-size:clamp(11px,2.5vw,16px);
	padding:5px 10px;
	border-radius:100px;
	font-weight:var(--w700);
	text-align:center;
}
@media screen and (min-width:768px){
.store-list a{
	display:block;
	border:2px solid #1a1a1a;
	padding:10px 20px;
	border-radius:100px;
	font-weight:var(--w700);
	text-align:center;
	}
}

/* -------------------------------------------------------------------
Apple Pay / Google Payの設定方法
------------------------------------------------------------------- */
.apgp-inner{
	padding:5em 0;
/*	background:#44aaf0;*/
  background: linear-gradient(180deg, #369BE8 0%, #369BE8 52%, #1FC6ED 52%, #1FC6ED 100%);
}
@media screen and (min-width:768px){
.apgp-inner{
	padding:8em 0;
	background: linear-gradient(180deg, #369BE8 0%, #369BE8 55%, #1FC6ED 55%, #1FC6ED 100%);
	}
}

.pay-title{
	font-size:clamp(16px,2.5vw,23px);
	display: flex;
	justify-content: center;
	align-items: center;
	margin:0 0 15px;
}
.pay-space{
	margin:120px 0 15px ;
}

.pay-title p{
	font-weight:var(--w700);
	position:relative;
	text-align:center;
}
.pay-title .title {
	display: flex;
	justify-content: center;
	align-items: center;
}
.pay-title .title::before,
.pay-title .title::after {
	content: "";
	background-color: #1a1a1a;
	height: 2px;
	width: 40px;
}
.pay-title .title::before {
	margin-right: 5px;
	transform: rotate(60deg); 
}
.pay-title .title::after {
	margin-left: 5px;
	transform: rotate(-60deg); 
}

.root-inner{
	display: grid;
/*	grid-template-columns:repeat(3,1fr);*/
	grid-template-columns:1fr;
	gap:20px 0;
	margin:0 0 30px;
}
@media screen and (min-width:768px){
.root-inner{
	grid-template-columns:repeat(3,1fr);
	gap:0 20px ;
	}
}

.root-inner div{
	background:#fff;
	padding:25px 30px;
	border-radius:10px;
	position:relative;
}
.root-inner div.arrow_style:before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top: 8px solid #fff;
}
@media screen and (min-width:768px){
.root-inner div.arrow_style:before{
  top: 45%;
  left: 100%;
  margin-left: 0px;
  border: 8px solid transparent;
  border-top: 8px solid #fff;
	transform: rotate(-90deg); 
	}
}

.root-inner div figure{
	text-align:center;
	max-width:100px;
	margin: 0 auto 10px;
}

.root-inner div dl dt{
	font-size:clamp(15px,2.5vw,17px);
	color:#44aaf0;
	font-weight:var(--w700);
	letter-spacing:var(--spacing);
}
.root-inner div dl dd{
	font-size:clamp(12px,2.5vw,14px);
	letter-spacing:var(--spacing);
	margin:5px 0 0;
	text-align:justify;
}
.root-inner div dl dd span{
	display:block;
}
/* -------------------------------------------------------------------
注意事項
------------------------------------------------------------------- */
.notice-inner{
	padding:5em 0 2em;
	background:#ffff;
}
@media screen and (min-width:768px){
.notice-inner{
	padding:8em 0;
	}
}
.notice-inner .notice_list{
	font-size:clamp(12px,2.5vw,14px);

	gap:3px 0;
}
@media screen and (min-width:768px){
.notice-inner .notice_list{
	margin: 0 auto;
	}
}

.notice-inner .notice_list li{
	padding-left:1em;
	text-indent:-1em;
}

.notice-inner .notice_list li:before{
	content:"・";
}

.notice_title{
	font-size:clamp(13px,2.5vw,14px);
	font-weight:700;
}
.notice-markup-inner{
	margin:0px 0 30px;
	font-size:clamp(13px,2.5vw,14px);
}

.notice-margin{
	margin:40px 0 30px;
}

.notice-markup-inner dl{
	margin:10px 0;
}
.notice-markup-inner dl dt{
	margin:15px 0 0;
}

.dots_text{
	font-weight:500;
	margin:10px 0 3px;
	
}
.dots_text:before{
	content:"・";
}
.step-notice_last{
	padding-left:1em;
}

.step-notice{
	display:flex;
	gap:0 10px;
	margin:5px 0;
}
.step-notice .st{
	width:100px;
}
.step-notice li:nth-child(2){
	width:100%;

}
.indentblock{
	display:block;
}
a.blank{
	background:url(../cmn/images/arrow_blank.png) no-repeat 100% 50%;
	background-size:11px;
	color:var(--base);
	padding-right:15px;
	margin-right:3px;
}
.view-scroll{
	font-size:.8rem;
	margin:0 0 5px;
}
@media screen and (min-width:768px){
.view-scroll{
	display:none;
	}
}