@charset "utf-8";

.sp_br { display: none; }

.wrapperAll {
    position: relative;
    overflow: hidden;
}
.contents_intro {
	background-color:#fff;
}
h2.title_intro {
	min-height: 48px;
	vertical-align: middle;
	border-bottom: 3px dotted #ed6479;
	margin-top: 3%;
	padding: 10px 0 0.5% 0;
	/*background: url(../img/app/intro_apri_ttl01.jpg) no-repeat left top;*/
	background: url(../img/app/intro_apri_ttl01.png) no-repeat left top;
}
h2.title_intro02 {
	/*background: url(../img/app/intro_apri_ttl02.jpg) no-repeat left top;*/
	background: url(../img/app/intro_apri_ttl02.png) no-repeat left top;
}
h2.title_intro03 {
	/*background: url(../img/app/intro_apri_ttl03.jpg) no-repeat left top;*/
	background: url(../img/app/intro_apri_ttl03.png) no-repeat left top;
}

h2.title_intro p {
	vertical-align: middle;
	font-size: 1.8rem;
	padding-left: 52px;
	line-height: 2.1rem;
	font-weight: bold;
	color: #ed6479;
}

/** DLbtn **/
.intro_area_dl, .intro_area_dl_sp {
	width: 100%;
	position: relative;
}

.intro_area_dl {
	display: block;
}

.intro_area_dl_sp {
	display: none;
}

.intro_bg_dl {
	width: 100%;
	z-index: 1;
}

.intro_area_dl .intro_btn_dl {
	width: 20%;
	position: absolute;
	top: 25%;
	z-index: 5;
}

.intro_area_dl .intro_btn_apple {
	right: 24%;
}
.intro_area_dl .intro_btn_google {
	width: 22.5%;
	top: 13%;
	right: 1%;
}
.intro_area_dl .intro_btn_apple:hover ,.intro_area_dl .intro_btn_google:hover{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.intro_area_dl_sp .intro_btn_dl {
	width: 40%;
	position: absolute;
	top: 35%;
	z-index: 5;
}

.intro_area_dl_sp .intro_btn_apple {
	left: 6%;
}

.intro_area_dl_sp .intro_btn_google {
	right: 4%;
	width: 46%;
	top: 27%;

}

/** point **/
.intro_point {
	padding: 30px 0;
	display: table;
	width: 100%;
	background-color:#fff;
}

.intro_point_inner {
	display: table-cell;
	/*width: 25%;*/
	width: 20%;
}

.intro_point_inner img {
	width: 100%;
	display: block;
}

.intro_point_inner p {
	padding: 0 5px;
}

.intro_point_inner p span {
	font-size: 0.75rem;
}
.intro_point_inner .point_ttl_txt {
/*	background: #ff8619;*/
	background: #db1828;
	color: #FFFFFF;
	height: 80px;
	display: table-cell;
	width: 1%;
	border-right: solid 1px #FFF;
	vertical-align: middle;
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.3;
	font-weight:bold;
}
.intro_point_inner .point_point {
/*	color: #ff8619;*/
	color: #db1828;
	font-size: 1.6rem;
	margin: 0 0 -11px -7px;
	font-weight:bold;
}

/** majika_kinou **/

.intro_majika {
	margin: 0 0 70px;
	background-color:#fff;
}

.intro_majika_bnr img{
	width: 100%;
}

.intro_majika_kinoul {
	width:60%;
	height: auto;
	float: left;
	margin: 3%;
}

.intro_majika_kinoul p{
	font-size: 1.2rem;
	line-height: 2rem;
	font-weight: bold;
}

.intro_majika_kinoul p.m_receipt {
	font-size: 1rem;
	line-height: 1.6rem;
	font-weight: normal;
	margin-top: 40px;
}

.intro_majika_kinoul p.m_receipt span {
	color: #ea4762;
	font-weight: bold;
}

.intro_majika_kinoul p span.small {
	font-size: 0.75rem;
	display: block;
	line-height: 1.7;
	margin: 10px 0 0;
}

.intro_majika_kinour{
	width: 25%;
	height: auto;
	float: left;
	margin: 3%;
}

.clear {
	clear:both;
}

.intro_majika_tyuui {
	width: 86%;
	border: 3px solid #6c99e8;
	margin: 3% 3% 3% 3%;
	padding: 1% 2%;
	background-color: #ffffff;
}

.intro_majika_tyuui p {
	font-weight: bold;
	color: #6c99e8;
}

.intro_majika_tyuui li p {
	font-weight: normal;
	color: #5d5d5d;
}

.intro_majika_btn {
	text-align: center;
	/*margin-bottom: 50px;*/
	margin: 50px auto;
}
.intro_majika_btn a {
    background: #0070a8;
    box-shadow: 0 4px 0 #01496f;
    padding: 16px 30px 13px;
    color: #FFF;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 5px;
    display: block;
    max-width: 700px;
    margin: auto;
    position: relative;
    top: 0;
    -moz-transition: 100ms all linear;
    -o-transition: 100ms all linear;
    transition: 100ms all linear;
}
.intro_majika_btn a:hover {
    box-shadow: 0 1px 0 #01496f;
    top: 3px;
}
.intro_area_dl a img:hover {
	opacity:0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
	-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.7;              /* Safari 1.x */
}
/* registration_guidance */
.regist_mv{
	margin:0 0 20px;
}

.regist_mv img{
	width:100%;
}

.flow{
	margin:30px 0 60px;
	background-color:#fff;
}
.flow img{
	width:100%;
}
.majica_regist {
	margin: 0;
	padding-bottom:30px;
	background-color:#fff;
}
h2.title_intro_regist {
	min-height: 64px;
	vertical-align: bottom;
	margin-top: 0;
	padding: 10px 0 0 0;
}
h2.title_intro_regist p{
	color:#dc1929;
	padding-left:75px;
	line-height:1.5;
}
h2.title_intro_regist01 {
	background: url(../img/app/regist_step1.png) no-repeat left top;
	border-bottom: 3px dotted #ff627f;
}
h2.title_intro_regist02 {
	background: url(../img/app/regist_step2.png) no-repeat left top;
	border-bottom: 3px dotted #ff8519;
}
h2.title_intro_regist03 {
	background: url(../img/app/regist_step3.png) no-repeat left top;
	border-bottom: 3px dotted #f5d300;
}
h2.title_intro_regist04 {
	background: url(../img/app/regist_step4.png) no-repeat left top;
	border-bottom: 3px dotted #72b239;
}
h2.title_intro_regist_comp{
	background: url(../img/app/regist_comp.png) no-repeat left top;
	border-bottom: 3px dotted #6c99e9;
}
h2.title_intro_regist_comp p{
	padding-left:113px;
}
h2.title_intro_regist01 p{
	color:#ff627f;
}
h2.title_intro_regist02 p{
	color:#ff8519;
}
h2.title_intro_regist03 p{
	color:#f5c400;
}
h2.title_intro_regist04 p{
	color:#72b239;
}
h2.title_intro_regist_comp p{
	color:#6c99e9;
}
.intro_majika_kinoul .text_att{
	margin-top:20px;
	font-size:100%;
	font-weight:normal;
}
.regist_arrow{
	margin-top:13px;
	text-align:center;
}
.regist_rdtxt{
	color:#db1828;
	font-weight:bold;
}
/** sp **/
@media only screen and (max-width: 767px) {
	#mv{
	margin: 0 0 15px 0;
	}
	.sp_br { display: block; }

	.contents_intro {
		width: 100%;
		padding: 0 2%;
		box-sizing: border-box;
	}

	.intro_area_dl {
		display: none;
	}

	.intro_area_dl_sp {
		display: block;
	}

	h2.title_intro p {
		font-size: 1.2rem;
		line-height: 1.5rem;
	}

	.intro_majika {
		margin: 0 0 50px;
	}

	.intro_majika_kinoul {
		float: none;
		width: 100%;
		margin: 0;
	}

	.intro_majika_kinour {
		float: none;
		width: 100%;
		margin: 0;
		text-align: center;
	}

	.intro_majika_kinoul p:first-child {
		padding-top: 10px;
	}

	.intro_majika_kinoul p {
		font-size: 1rem;
		line-height: 1.7rem;
		font-weight: bold;
		margin: 0 0 30px;
	}

	.intro_point_inner {
		width: 100%;
		display: block;
		margin-bottom: 20px;
	}

	.intro_point_inner img:nth-child(2) {
		max-width: 240px;
		margin: 0 auto;
	}

	.intro_majika_btn {
		margin-top: 20px;
	}

	.intro_majika_tyuui {
		width: 95%;
		border: 3px solid #6c99e8;
		margin: 7% auto;
		padding: 4% 3%;
		background-color: #ffffff;
		box-sizing: border-box;
	}

	.mjkContact {
		margin: 23px 15px 0;
		padding: 10px;
		background-size: 78px 0;
	}

	.intro_majika_btn a {
		font-size: 1.3rem;
	}
	h2.title_intro {
		padding: 0px 0 0.5% 0;
	}
	.intro_btn_dl:hover {
		opacity:0.7;
		filter: alpha(opacity=70);        /* ie lt 8 */
		-ms-filter: "alpha(opacity=70)";  /* ie 8 */
		-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
		-khtml-opacity: 0.7;              /* Safari 1.x */
	}

/* registration_guidance */
	.majica_regist{
	margin: 0;
	padding-bottom:30px;
	}
	h2.title_intro_regist p{
	font-size:2rem;
	vertical-align:middle;
	line-height:4rem;
	}
/*	h2.title_intro_regist_comp{
	background: none;
	}
	h2.title_intro_regist_comp p{
	padding-left:10px;
	}
*/
}/** /sp **/


/* 190906_majica donpen cardボタンの追加
-------------------------------------------------------------*/
.intro_majika_btn2 {
	text-align: center;
	margin-bottom: 50px;
}
.intro_majika_btn2 a {
    background: #e93645;
    box-shadow: 0 4px 0 #85111b;
    padding: 16px 30px 13px;
    color: #FFF;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 5px;
    display: block;
    max-width: 700px;
    margin: auto;
    position: relative;
    top: 0;
    -moz-transition: 100ms all linear;
    -o-transition: 100ms all linear;
    transition: 100ms all linear;
}
.intro_majika_btn2 a:hover {
    box-shadow: 0 1px 0 #85111b;
    top: 3px;
}

@media only screen and (max-width: 767px) {
	.intro_majika_btn2 a {
		font-size: 1.4rem;
	}
}


/* 210216_appDLボタン統合
----------------------------------------------------------------*/
.cts .btn,
.cts a.btn,
.cts button.btn {
	background: #D52D3A;
	border-radius: 0.5rem;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 150%;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
	margin: 0 auto;
	padding: 1.2rem 0;
    position: relative;
	text-align: center;
    text-decoration: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	vertical-align: middle;
	width: 80%;
}
.cts .btn:after{
	background: none;
}
a.btn-border {
    border: 2px solid #000;
    border-radius: 0;
}
a.btn-border:hover {
	background: #fff;
    color: #212529;
}
.fa-position-right {
    position: absolute;
    top: calc(50% - .5em);
    right: 1rem;
}

@media print, screen and (max-width: 580px) {
	.cts .btn, .cts a.btn, .cts button.btn{
		font-size: 100%;
	}
}