@charset "utf-8";

/* XX.AD
--------------------------------------------------- */
.ad{
	padding: 0;
}
/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:568px) {
.ad .container{
	width: 100% !important;
	padding: 0;
	}
}

/* 00.USUAL
--------------------------------------------------- */
main#stripeBg section div.container {
	padding: 0;
}
main#stripeBg div.container .floL,
main#stripeBg div.container .floR {
	display: inline;
}
main#stripeBg div.container .floL { float:left; }
main#stripeBg div.container .floR { float:right; }

main#stripeBg ul li dl dd p.attentionNote {
	font-size: 87%;
	text-indent: -1em;
	margin-top: 0.5em;
	padding-left: 1em;
}
main#stripeBg ul li dl dd p.attentionNote::before { content:"※"; }

main#stripeBg a img {
	transition: 0.3s;
}
main#stripeBg a:hover img {
	opacity: 0.7;
}

/* 01.MV
--------------------------------------------------- */
main#stripeBg section#mv {
}
main#stripeBg section#mv div.container {
	padding: 2.5em 0;
}
main#stripeBg section#mv div.floL {
	width: 70%;
	box-sizing: border-box;
	padding-left: 3%;
}
main#stripeBg section#mv figure.floR {
	width: 24%;
}
main#stripeBg section#mv h1 {
	margin: 1em 0 1.2em;
}
main#stripeBg section#mv dl {
	text-align: center;
	border: 1px solid #bfbfbf;
	padding: 3% 4%;
}
main#stripeBg section#mv dl dt {
	position: relative;
	margin: -5.5% 0 2%;
}
main#stripeBg section#mv dl dt img {
	width: auto;
	height: 18px;
}
main#stripeBg section#mv dl dd {
}
main#stripeBg section#mv dl dd ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
main#stripeBg section#mv dl dd ul li {
	display: inline-block;
	width: 36%;
	vertical-align: bottom;
	padding: 1%;
}
main#stripeBg section#mv dl dd ul li.qr {
	width: 20%;
	padding-right: 2%;
}
main#stripeBg section#mv dl dd ul li p {
}
main#stripeBg section#mv dl dd ul li div {
}

/* 02.STEP
--------------------------------------------------- */
main#stripeBg section#step {
	background-color: #e94d59;
	color: #fff;
}
main#stripeBg section#step div.container {
	padding: 3.5em 0 5em;
}
main#stripeBg section#step ul {
	list-style: none;
	padding: 0;
}
main#stripeBg section#step ul li {
	background: url("../img/step_arrow.png") no-repeat right 8.5px top 100px / 10px auto;
	display: inline-block;
	width: 25.0%;
	vertical-align: top;
	box-sizing: border-box;
	padding: 0 3% 0 0;
}
	main#stripeBg section#step ul li:last-child { padding-right:0; background:none; width:22.9%; }

main#stripeBg section#step ul li figure {
	position: relative;
    width: 100%;
    height: 100%;
    padding: 50%;
    border-radius: 100%;
    background: #fff;
}
main#stripeBg section#step ul li figure img {
    position: absolute;
    left: 16%;
    top: 17%;
	width: 68%;
	height: auto;
}
main#stripeBg section#step ul li dl {
}
main#stripeBg section#step ul li dl dt {
	text-align: center;
	font-size: 137%;
	margin: 0.7em 0 0.5em;
}
main#stripeBg section#step ul li dl dd {
}
main#stripeBg section#step ul li dl dd p {
	margin: 0 0 0.2em;
}

main#stripeBg section#step div.linkBtn.reverse {
	background-color: #e94d59;
	border: 1px solid #fff;
	font-size: 118%;
	font-weight: 400;
}
main#stripeBg section#step div.linkBtn.reverse:hover,
main#stripeBg section#step div.linkBtn.reverse:active,
main#stripeBg section#step div.linkBtn.reverse:focus { background-color:#fff; }
main#stripeBg section#step div.linkBtn.reverse:hover a,
main#stripeBg section#step div.linkBtn.reverse:active a,
main#stripeBg section#step div.linkBtn.reverse:focus a { color:#e94d59; }

/* 03.FUNCTION
--------------------------------------------------- */
main#stripeBg section#function {
	background: url("/img/common/33/bg_stripe.png") repeat center top / 16px auto;
	padding: 6em 0 2em;
}
main#stripeBg section#function h2 {
	text-align: center;
	font-size: 320%;
	font-weight: 400;
	letter-spacing: 0.1em;
	margin: 0 0 1em;
}
main#stripeBg section#function ul {
	list-style: none;
	padding: 0;
}
main#stripeBg section#function ul li {
	display: inline-block;
	width: 32.0%;
	vertical-align: top;
	margin-bottom: 3%;
	padding: 0 2%;
	box-sizing: border-box;
}
main#stripeBg section#function ul li figure {
	text-align: center;
	transition: 0.3s;
}
main#stripeBg section#function ul li figure:hover {
    transform: scale(1.15);
}
main#stripeBg section#function ul li dl {
}
main#stripeBg section#function ul li dl dt {
}
main#stripeBg section#function ul li dl dt h3 {
	text-align: center;
	color: #e94d59;
	font-size: 150%;
	font-weight: 600;
	margin: 0.5em 0;
}
main#stripeBg section#function ul li dl dt h3 br {
	display: none;
}
main#stripeBg section#function ul li dl dd {
}
main#stripeBg section#function ul li dl dd p {
	margin: 0 0 0.2em;
}

/* 04.DOWNLOAD
--------------------------------------------------- */
main#stripeBg section#download {
	background: url("../img/dl_bg.png") no-repeat center top / cover;
	padding: 6em 0;
}
main#stripeBg section#download h2 {
	text-align: center;
	font-size: 320%;
	font-weight: 400;
	margin: 0 0 0.5em;
}
main#stripeBg section#download div#dlInner {
	width: 640px;
	margin: 0 auto 2.5em;
}
main#stripeBg section#download div#dlInner ul {
	list-style: none;
	margin: 0 0 2.5em;
	padding: 0;
	text-align: center;
width: 100%;/* background: #000; */}
main#stripeBg section#download div#dlInner ul li {
	display: inline-block;
	width: 36%;
	vertical-align: bottom;
	padding: 1.2%;
}
main#stripeBg section#download div#dlInner ul li.qr {
	width: 17%;
	margin-right: 3%;
	padding: 1.5%;
	background-color: #fff;
}
main#stripeBg section#download div#dlInner ul li p {
	margin-bottom: 0.4em;
}
main#stripeBg section#download div#dlInner ul li div {
}
main#stripeBg section#download div#dlInner dl {
	text-align: center;
}
main#stripeBg section#download div#dlInner dl dt {
	font-size: 125%;
	font-weight: 400;
	margin-bottom: 0.7em;
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
}
main#stripeBg section#download div#dlInner dl dt:before, main#stripeBg section#download div#dlInner dl dt:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #1a1a1a;
	display: block;
}
main#stripeBg section#download div#dlInner dl dt:before {
	margin-right: 0.6em;
}
main#stripeBg section#download div#dlInner dl dt:after {
	margin-left: 0.6em;
}
main#stripeBg section#download div#dlInner dl dt span {
	background: url("../img/ic_wifi.svg") no-repeat left center / 28px auto;
	padding-left: 35px;
}
main#stripeBg section#download div#dlInner dl dd {
}
main#stripeBg section#download div#dlInner dl dd p {
	font-size: 118%;
	margin-bottom: 0.8em;
}

main#stripeBg section#download div#dlInner dl dd div.linkBtn {
	background-color: #e94d59;
	border: 2px solid #e94d59;
	font-weight: 600;
	font-size: 106%;
}
main#stripeBg section#download div#dlInner dl dd div.linkBtn:hover,
main#stripeBg section#download div#dlInner dl dd div.linkBtn:active,
main#stripeBg section#download div#dlInner dl dd div.linkBtn:focus {
  background: none;
  outline: none;
}
main#stripeBg section#download div#dlInner dl dd div.linkBtn a:hover,
main#stripeBg section#download div#dlInner dl dd div.linkBtn a:active,
main#stripeBg section#download div#dlInner dl dd div.linkBtn a:focus {
	color: #e94d59 !important;
}
main#stripeBg section#download ul.attentionNote {
	text-align: center;
}



/* ==============================================================
 Less than 992px
================================================================= */
@media screen and (max-width: 992px) {
	main#stripeBg section div.container { width:90%; }
	main#stripeBg section#mv dl dd ul li p { margin-bottom:0.3em; }
	main#stripeBg section#mv dl dd ul li p span.spNone { display:none; }
	main#stripeBg section#mv h1 { margin:0.3em 0 0.8em; }
	main#stripeBg section#mv div.floL { padding-left:0; }
	main#stripeBg section#download ul.attentionNote { text-align:left; }


}

/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 768px) {
	main#stripeBg section#mv dl dd ul li { width:50%; }
	main#stripeBg section#mv dl dd ul li.qr { display:none; }
	main#stripeBg section#step ul { padding-left:5%; }
	main#stripeBg section#step ul li { width: 49%; padding:0 6% 0 0; background:url("../img/step_arrow.png") no-repeat right 4% top 33% / 4% auto }
	main#stripeBg section#step ul li:last-child { width: 42%; }
	main#stripeBg section#download div#dlInner { width:auto; }
	main#stripeBg section#download div#dlInner ul li { width:50%; }
	main#stripeBg section#download div#dlInner ul li.qr { display:none; }
}

/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:568px) {
	main#stripeBg section#mv div.container { padding-bottom:1.5em; }
	main#stripeBg section#mv h1 { margin:0 0 0.5em; }
	main#stripeBg section#mv dl dt img { width:95%; height:auto; }
	main#stripeBg section#mv dl dd ul { padding-left:0; }
	main#stripeBg section#mv dl dd ul li p { display:none; }
	main#stripeBg section#step div.container { width:95%; }
	main#stripeBg section#step ul li { background-position:right 4% top 22%; padding-right:7%; }
	main#stripeBg section#step ul li dl dt { font-size:4.5vw; font-weight:600; }
	main#stripeBg section#function { padding:4em 0 2em; }
	main#stripeBg section#function h2 { font-size:7vw; }
	main#stripeBg section#function ul li { width: 49%; padding:0 3%; }
	main#stripeBg section#function ul li dl dt h3 { font-size:5vw; }
	main#stripeBg section#function ul li dl dt h3 br { display:block; }
	main#stripeBg section#download { padding:4em 0; }
	main#stripeBg section#download h2 { font-size:6vw; font-weight:600; }
}


/* ==============================================================
 Less than SP-PORTRAIT / iPhone5
================================================================= */
@media screen and (max-width:320px) {
	main#stripeBg section#mv dl dt { margin-top:-9%; }
	main#stripeBg section#step div.container { width:100%; }
	main#stripeBg section#step ul li { background-position:right 4% top 17%; }
	main#stripeBg section#step ul li dl dd { font-size:87%; }
	main#stripeBg section#step div.linkBtn.reverse { width:90%; }
	main#stripeBg section#function ul li dl dd p { font-size:87%; }
	main#stripeBg section#download div#dlInner ul li p span.spNone { display:none; }

}
/* 20210302 楽天 */
main#stripeBg section#mv div.rakuten{
    background: #BF1920;
    text-align: center;
}
main#stripeBg section#mv div.rakuten div.container {
	padding: 0;
}
@media screen and (max-width:568px) {
    main#stripeBg section#mv div.rakuten div.container{
        width: 100%;
    }
}