@charset "utf-8";

/* -------------------------------------------------------------------
メインビジュアルの設定
------------------------------------------------------------------- */
.mv {
	border-top: 1px solid #ffa024;
	background: url(../images/mv/bg.png) no-repeat 0% 100%;
	background-size: cover;
	padding: 3em 0.6em;
	text-align: center;
}

@media screen and (min-width:768px) {
	.mv {
		background: url(../images/mv/bg.png) no-repeat 0% 80%;
		background-size: cover;
		padding: 4em 0;
	}
}

/* -------------------------------------------------------------------
まずはお持ちのカードを選択！の設定
------------------------------------------------------------------- */
.card-inner {
	background: #fade6c;
	padding: 4em 0;
}

.card-main {
	border: 2px solid #ffa024;
	border-radius: 10px;
	background: #fff;
	width: min(90%, 850px);
	margin: 0 auto;
	padding: 2em;
}

.card-main h2 {
	text-align: center;
	color: #ffa024;
	font-size: clamp(18px, 3vw, 23px);
	letter-spacing: 1.5px;
	font-weight: 700;
}

.card-select {
	display: grid;
	gap: 20px;
	margin: 2em 0 0;
}

.card-select div {
	border-radius: 10px;
	padding: 1.5em 3em 5em;
}

@media screen and (min-width:768px) {
	.card-select div {
		padding: 1.5em 3em;
	}
}

.card-select .plus {
	background: url(../images/card/icon-luluca.png) no-repeat 50% 95% rgba(134, 202, 182, .3);
	background-size: 30px;
}

.card-select .paleta {
	background: url(../images/card/icon-paleta.png) no-repeat 50% 95% rgba(56, 168, 211, .3);
	background-size: 30px;
}

@media screen and (min-width:768px) {
	.card-select .plus {
		background: url(../images/card/icon-luluca.png) no-repeat 98% 50% rgba(134, 202, 182, .3);
		background-size: 74px;
	}

	.card-select .paleta {
		background: url(../images/card/icon-paleta.png) no-repeat 98% 50% rgba(56, 168, 211, .3);
		background-size: 74px;
	}
}

.card-select dl {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	text-align: center;

}

@media screen and (min-width:768px) {
	.card-select dl {
		grid-template-columns: 220px 2fr;
		text-align: left;
	}
}

.card-select dd {
	font-size: clamp(16px, 3vw, 19px);
	letter-spacing: 1.5px;
	font-weight: 700;
	margin: 10px 0 0;
}

@media screen and (min-width:768px) {
	.card-select dd {
		margin: 0px 0 0;
	}
}

/* --- 切り替え対象のコンテンツ --- */
.card-content {
	display: none;
	/* デフォルトは非表示 */
	padding: 0px;
}

.card-content.active {
	display: block;
	/* active が付いたものだけ表示 */
}

@media screen and (min-width:768px) {
	.card-content-flex {
		display: flex;
	}

	.card-content-left,
	.card-content-right {
		width: 48%;
	}
}

@media screen and (max-width:767px) {
	.card-content-right {
		margin-top: 100px;
	}
}

/* --- カード選択ボタン部分 --- */
.card-select>div {
	display: inline-block;
	cursor: pointer;
	/*	padding: 10px;
	margin-right: 20px;*/
	border: 1px solid transparent;
	transition: 0.2s;
}

.card-select>div.active {
	border: 1px solid #333;
	border-radius: 10px;
	/*	background: #f0f8ff;*/
}


/* -------------------------------------------------------------------
モバイル決済（タッチ決済）ってなにの設定
------------------------------------------------------------------- */
.mobile-inner {
	background: #f8f395;
	padding: 4em 0;
}

.mobile-main {
	border-radius: 10px;
	width: min(92%, 850px);
	margin: 0 auto;
}

.mobile-icon-top {
	text-align: center;
	margin: 0 0 10px;
}

.mobile-main h3 {
	font-size: clamp(20px, 3.6vw, 24px);
	letter-spacing: 1.5px;
	font-weight: 700;
	color: #ffa024;
	text-align: center;
	border: 2px solid #ffa024;
	box-shadow: 2px 2px 0 #ffa024;
	background: #fff;
	padding: 1em;
	border-radius: 10px;
}

@media screen and (min-width:768px) {
	.mobile-main h3 {
		padding: .8em;
	}
}

.mobile-main h3 span {
	font-size: 14px;
}

@media screen and (min-width:768px) {
	.mobile-main h3 span {
		font-size: 17px;
	}
}

.mobile-main .mobile-text {
	font-size: clamp(14px, 3.2vw, 17px);
	letter-spacing: 1.3px;
	font-weight: 500;
	padding: 15px 0;
	text-align: center;
}

@media screen and (min-width:768px) {
	.mobile-main .mobile-text {
		padding: 25px 0;
	}
}

@media screen and (max-width:767px) {
	.mobile-main .mobile-icon ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.mobile-main .mobile-icon ul li {
		width: 45%;
		margin: 2% 2% 0 2%;
		text-align: center;
	}

	.mobile-main .mobile-icon ul li img {
		max-width: 100%;
		height: auto;
		display: inline-block;
	}
}

@media screen and (min-width:768px) {
	.mobile-main .mobile-icon ul {
		max-width: 600px;
		margin: 0 auto;
		text-align: center;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: center;
		gap: 0 10px;
	}
}

.mobile-main .mobile-box {
	border-radius: 20px;
	background: #fff;
	width: min(100%, 850px);
	margin: 0 auto;
	padding: 2em;
	margin: 30px 0;
}

.mobile-main .mobile-box dl {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 10px;
}

@media screen and (max-width:767px) {
	.mobile-main .mobile-box dl {
		display: flex;
		flex-direction: column-reverse;
		/* 子要素を逆順に並べる */
		text-align: center;
		padding-top: 20px;
	}

	.mobile-main .mobile-box dl dt {
		margin-top: 20px;
		/* 下に来るので余白は上側に */
		margin-bottom: 0;
	}
}


.mobile-main .mobile-box dd {
	font-size: clamp(18px, 3.6vw, 24px);
	letter-spacing: 1.5px;
	font-weight: 700;
	color: #ffa024;
	line-height: 1.3;
}

.mobile-main .mobile-box dd span {
	font-size: 14px;
}

@media screen and (min-width:768px) {
	.mobile-main .mobile-box dl {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0 10px;
		margin-left: -100px;
	}

	.mobile-main .mobile-box dd span {
		font-size: 17px;
	}
}

.mobile-main .mobile-box .touch-type_jcb {
	padding: 30px 0;
}

.mobile-main .mobile-box .touch-type_jcb .jcb-type li {
	margin: 5px 0;
	font-size: clamp(12px, 3vw, 14px);
	letter-spacing: 1.3px;
	font-weight: 500;
	text-align: center;
}

@media screen and (min-width:768px) {
	.mobile-main .mobile-box .touch-type_jcb {
		max-width: 550px;
		margin: 0 auto;
		padding: 15px 0;
	}
}

.mobile-main .mobile-box .touch-type_visa .visa-type {
	padding: 15px 0;
	max-width: 100%;
	margin: 0 auto;
}

.mobile-main .mobile-box .touch-type_visa .visa-type li {
	margin: 5px 0;
	font-size: clamp(12px, 3vw, 14px);
	letter-spacing: 1.3px;
	font-weight: 500;
	text-align: center;
}

.mobile-main .mobile-box .touch-type_visa .visa-type .grid04 {
	grid-column: 1 /span 2;
}

@media screen and (min-width:768px) {
	.mobile-main .mobile-box .touch-type_visa .visa-type {
		gap: 0px 20px;
		max-width: 550px;
		align-items: center;
	}
}

.mobile-main .mobile-box .touch-type_jcb .jcb-type li:nth-child(even),
.mobile-main .mobile-box .touch-type_visa .visa-type li:nth-child(even) {
	margin: 5px 0 15px 0;
}

.mobile-main .mobile-box_text {
	font-size: clamp(16px, 2vw, 16px);
	letter-spacing: 1.3px;
	font-weight: 500;
	padding: 15px 0;
	text-align: center;
	height: 120px;
}

.mobile-main .mobile-box_text sup {
	font-size: .7rem;
}

.mobile-main .mobile-box_text span {
	color: #ea5c3c;
}

@media screen and (min-width:768px) {
	.mobile-box-detail {
		display: flex;
	}

	.mobile-box-detail-left,
	.mobile-box-detail-right {
		width: 50%;
		padding: 0 30px;
	}
}

.mobile-box-card {
	margin: 30px auto 0;
	text-align: center;
}

/* -------------------------------------------------------------------
こんな不安ありませんか？の設定
------------------------------------------------------------------- */
.qa-inner {
	background: #fade6c;
	padding: 4em 0;
}

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

.qa-main {
	border-radius: 30px;
	background: #fff;
	width: min(90%, 600px);
	margin: 0 auto;
	padding: 2em 1em;
}

@media screen and (min-width:768px) {
	.qa-main {
		padding: 3em 1em;
	}
}

.qa-box dl {
	display: grid;
	gap: 0px 0px;
	margin: 20px auto;
	font-size: clamp(14px, 3.2vw, 18px);
	letter-spacing: 1.5px;
	max-width: 90%;
}

@media screen and (min-width:768px) {
	.qa-box dl {
		max-width: 480px;
		margin: 25px auto;
	}
}

.qa-box dt {
	color: #00b1b3;
}

.qa-box dt ul li,
.qa-box dd ul li {
	font-weight: 600;
}

.qa-box dt ul li span,
.qa-box dd ul li span {
	color: #ea5c3c;
}

.qa-box dt ul {
	display: grid;
	grid-template-columns: 41px 1fr;
	gap: 0 5px;
	align-items: center;
}


.qa-box dd ul {
	display: grid;
	grid-template-columns: 41px 1fr;
	gap: 0 5px;
	align-items: center;
	padding-left: 0px;
}

@media screen and (min-width:768px) {
	.qa-box dd ul {
		padding-left: 40px;
	}
}

/* -------------------------------------------------------------------
Apple Pay / Google PayTM かんたん設定方法の設定
------------------------------------------------------------------- */
.apgp-inner {
	background: url(../images/mobile/bg.png) no-repeat 100% 102% #fcfad1;
	background-size: 100%;
	padding: 4em 0 6em;
}

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

.apgp-main {
	border-radius: 10px;
	width: min(90%, 850px);
	margin: 0 auto;
}

.apgp-main h3 {
	font-size: clamp(20px, 3.6vw, 24px);
	letter-spacing: 1.5px;
	font-weight: 700;
	color: #ffa024;
	text-align: center;
	border: 2px solid #ffa024;
	box-shadow: 2px 2px 0 #ffa024;
	background: #fff;
	padding: 1em;
	border-radius: 10px;
}

.pay-cmn {}

.apple-pay_box {
	margin: 40px auto 20px;
}

.pay-cmn h4 {
	font-size: clamp(18px, 3.6vw, 24px);
	letter-spacing: 1.5px;
	text-align: center;
	border-radius: 14px;
	color: #fff;
	padding: .8em;
	line-height: 1.2;
	cursor: pointer;
}

@media screen and (min-width:768px) {
	.pay-cmn h4 {
		border-radius: 20px;
	}
}

.pay-cmn h4:hover {
	opacity: 60%;
}

.pay-cmn h4 sup {
	font-size: 11px;
}

.pay-cmn h4 span {
	font-weight: 700;
	display: block;
}

.apple-pay_box h4.green {
	background: #1ba36c url("../images/card/arrow.png") no-repeat 96%;
}

.google-pay_box h4.pink {
	background: #e57bac url("../images/card/arrow.png") no-repeat 96%;
}

.green-btn,
.pink-btn,
.blue-btn {
	text-align: center;
	margin: 30px 0;
}

.btn {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	border-radius: 50px;
	font-size: clamp(15px, 3.6vw, 18px);
	padding: 13px 50px;
	text-align: center;
	outline: none;
	transition: ease .2s;
	background: #fff;
	font-weight: 500;
	letter-spacing: 1.5px;
}

.type-green {
	border: 2px solid #1ba36c;
}

.type-pink {
	border: 2px solid #e57bac;
}

.type-blue {
	background: #3aabd7;
	border: 2px solid #222;
	line-height: 1.5;
}


/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;
	/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color: #333;
}

.type-green span {
	color: #1ba36c;
}

.type-pink span {
	color: #e57bac;
}

.type-blue span {
	color: #fff;
}

.btn:hover span {
	color: #fff;
}

.bgleft:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: #333;
	width: 100%;
	height: 100%;
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: right top;
}

.bgleft:hover:before {
	transform-origin: left top;
	transform: scale(1, 1);
}


.apgp-main .notice_list {
	font-size: clamp(13px, 2vw, 13px);
	letter-spacing: 1.5px;
	margin: 80px 0 80px;
}

@media screen and (min-width:768px) {
	.apgp-main .notice_list {
		margin: 40px 0 120px;
	}
}

.apgp-main .notice_list li {
	text-indent: -1em;
	padding-left: 1em;
	margin: 3px 0;
}

.apgp-main .notice_list li:before {
	content: "※";
}

.apgp-main .notice_list .blank {
	color: #222;
	background: url(../cmn/images/arrow_blank.png) no-repeat 98% 50%;
	background-size: 10px;
	padding-right: 20px;
}

.root_inner,
.root_inner02 {
	margin: 0px 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0px;
	color: #333;
}

.root_inner {
	margin: 20px 0 0;
}

.root_inner .white-box {
	border-radius: 10px;
	background: #fff;
	padding: 20px 20px;
	margin: 0 auto;
	width: 90%;

}

.root_inner .arrow-box,
.root_inner02 .arrow-box {
	text-align: center;
	padding: 10px 0;
}

.step--icon {
	text-align: center;
	padding: 0px 0 10px;
}

.step-grid {
	text-align: center;
}

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

.step-grid li {
	font-size: clamp(16px, 3.6vw, 17px);
	letter-spacing: 1.5px;
	font-weight: 700;

}

.step-grid li:nth-child(1) {
	margin: 0 0 10px;
	text-align: center;
}

.step-grid li .small_text {
	display: block;
	font-weight: 400;
	font-size: clamp(13px, 3.4vw, 16px);
	margin: 10px 0 0;
}

.root_inner02 .white-box {
	border-radius: 10px;
	background: #fff;
	padding: 20px 20px;
	width: 90%;
	margin: 0 auto;
}

.root_inner02 .arrow-box {
	text-align: center;
	padding: 10px 0;
}

.step-notice {
	font-size: .85rem;
	margin: 15px 0 0;
	padding-left: 1em;
	text-indent: -1em;
}

/* -------------------------------------------------------------------
おトクなキャンペーン実施中！設定
------------------------------------------------------------------- */
.cp-inner {
	background: url(../images/cp/bg.png) no-repeat 100% 100%;
	background-size: cover;
	padding: 4em 0 1em;
}

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

.cp-main {
	border-radius: 10px;
	width: min(90%, 850px);
	margin: 0 auto;
}

.cp-main .fukidashi {
	font-size: clamp(16px, 3.6vw, 24px);
	letter-spacing: 1.5px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 5px;
}

.cp-main h3 {
	font-size: clamp(20px, 3.6vw, 24px);
	letter-spacing: 1.5px;
	font-weight: 700;
	color: #3aabd7;
	text-align: center;
	border: 2px solid #3aabd7;
	box-shadow: 2px 2px 0 #3aabd7;
	background: #fff;
	padding: 1em;
	border-radius: 10px;
}

.cp-inner .cp-present {
	padding: 30px 0 20px;
	margin: 0 auto;
	text-align: center;
}

@media screen and (min-width:768px) {
	.cp-inner .cp-present {
		padding: 40px 0;
	}
}

.cp-box {
	text-align: center;
}

.cp-box dt {
	font-size: clamp(16px, 5vw, 22px);
	letter-spacing: 1.5px;
	font-weight: 700;
	line-height: 1.3;
}

.cp-box dt .indent_block {
	display: block;
	font-size: 0.8em;
	margin-bottom: 8px;
}

.cp-box dt .hidden {
	display: none;
}

@media screen and (min-width:768px) {

	.cp-box dt .indent_block,
	.cp-box dt .hidden {
		display: inline-block;
	}
}

.cp-box dd {
	font-size: clamp(13px, 3vw, 17px);
	letter-spacing: 1.5px;
	font-weight: 500;
	margin: 10px 0 0;
}

@media screen and (min-width:768px) {
	.cp-box dd {
		margin: 5px 0 0;
	}
}