/* CSS Document */
@charset "UTF-8";

.contents{
	width:1000px;
	margin:0 auto;	
}

.main{
	margin-top:20px;	
}

.block01{
	margin-top:55px;
	border:solid 4px #06afb1;
	position:relative;
	height:155px;
    box-sizing: border-box;
}

.block01 .ttl01{
	width:100%;
	text-align:center;
	position:absolute;
	top:-25px;	
}

.block01 .image01{
	position:absolute;
	left:41px;
	top:72px;	
}

.block01 .image02{
	position:absolute;
	left:175px;
	top:58px;	
}

.block01 .image03{
	position:absolute;
	left:265px;
	top:66px;	
}

.block01 .image04{
	position:absolute;
	left:535px;
	top:72px;	
}

.block01 .image05{
	position:absolute;
	right:264px;
	top:61px;	
}

.block01 .image06{
	position:absolute;
	right:45px;
	top:65px;	
}

.block01:after{
	content:"";
	display:block;
	width:1px;
	height:64px;
	background:#cccccc;
	top:60px;
	left:500px;
	position:absolute;	
}

.block02{
	margin-top:70px;
	background:#f2f2f2;
	padding:70px 0;	
}

.block02 h2{
	text-align:center;	
}

.block02 .inner1{
	position:relative;	
}

.block02 .inner1 .txt01{
	font-weight:bold;
	position:absolute;
	left:320px;
	top:130px;
	font-size: 15px;
	color: rgb(0, 0, 0);
	line-height: 1.933;
}

.block02 .inner1 .txt01 span{
	display:block;
	margin-top:5px;
	font-size:13px;
	color:#ec4484;
	font-weight:bold;	
	line-height:1.2;
}

.block02 .inner1 .txt02{
	font-size:10px;
	position:absolute;
	left:75px;
	top:485px;	
}

.block02 .inner1 .icon{
	top:240px;
	position:absolute;
	right:50px;	
}

.block02 .inner1 h4{
	position:absolute;
	width:100%;
	text-align:center;
	font-size:20px;
	top:535px;
}	

.block02 .inner1 table{
	position:absolute;
	width:750px;
	left:50%;
	margin-left:-375px;
	top:575px;
	border:solid 1px #cccccc;
	border-right:none;
	border-bottom:none;
}

.block02 .inner1 table th{
	width:140px;
	text-align:center;
	background:#f5f5f5;
	font-size:12px;
	color:#010000;	
	border-right:solid 1px #cccccc;
	border-bottom:solid 1px #cccccc;
	padding:10px 0 ;
}

.block02 .inner1 table td{
	font-size:12px;
	background:#FFF;
	color:#010000;	
	border-right:solid 1px #cccccc;
	border-bottom:solid 1px #cccccc;
	padding:10px 15px ;
}

.block02 .inner1 table td span{
	display:block;
	color:#d80045;
	padding:10px 0 5px;
	font-weight:bold;	
}

.block02 .inner1 .manual{
    width:591px;
    height: 112px;
	position:absolute;
	left:205px;
	bottom:190px;
}

.block02 .inner1 .manual img{
    width: 100%;
}

.block02 .inner1 .account_relinkingl{
    text-align: center;
    font-size: 16px;
    position:absolute;
    bottom: 149px;
    left: 38%;
}

.block02 .inner1 .account_relinkingl a{
    color: #d80045;
}


.block02 .inner1 .txt03{
	font-size:9px;
	line-height:1.2;
	position:absolute;
	left:125px;
	bottom:94px;
}


.block02 .inner2,
.block02 .inner3,
.block02 .inner4{
	position:relative;
	margin-top:40px;	
}

.block02 .inner2 .txt01,
.block02 .inner3 .txt01,
.block02 .inner4 .txt01{
	font-size: 15px;
	color: rgb(0, 0, 0);
	line-height: 1.933;
	font-weight:bold;
	position:absolute;
	left:53px;
	top:275px;
}	

.block02 .inner3 .txt01{
	left:540px;
	top:265px;	
}

.block02 .inner3 .txt02{
	position:absolute;
	font-size:9px;
	font-weight:normal;	
	position:absolute;
	left:60px;
	bottom:25px;
}

.block02 .inner4 .txt01{
	left:75px;
	top:275px;	
}

.block02 .inner2 .txt01 span{
	display:block;
	margin-top:15px;
	font-size:9px;
	font-weight:normal;	
}

.block02 .ttl02{
	text-align:center;
	margin-top:80px;
}	

.block02 ul{
	width:970px;
	margin:0 auto;	
}

.block02 ul li{
	width:470px;
	height:470px;
	float:left;
	background:#FFF;
	margin-bottom:25px;
}

.block02 ul li h3{
	text-align:center;
	padding-top:50px;	
}

.block02 ul li p{
	text-align:center;
	margin-top:20px;
	font-size: 14px;
	color: rgb(0, 0, 0);
	line-height: 1.857;
	font-weight:bold;	
}

.block02 ul li span{ 
	display:block;
	width:395px;
	margin:15px auto 0;
	font-size: 9px;
	color: rgb(0, 0, 0);
	line-height: 1.556;
	text-align: left;
	padding-left:1em;
	text-indent:-1em;	
}

.block02 ul li span.mt0{ 
	margin-top:0;
}

.block02 ul li .image{
	text-align:center;
	margin-top:25px;	
}

.block02 ul li:nth-child(2) .image{
	margin-top:5px;
}
.block02 ul li:nth-child(3) .image{
	margin-top:35px;
}
.block02 ul li:nth-child(4) .image{
	margin-top:40px;
}

.block02 ul li:nth-child(2n){
	float:right;	
}

.inner5{
	width:1000px;
	margin:70px auto 0;
	position:relative;	
}

.inner5.mt_min{
	margin-top:50px;
}

.inner5 .ttl01{
	position:absolute;
	left:115px;
	top:275px;	
}

.inner5 .ttl02{
	position:absolute;
	left:464px;
	top:275px;	
	margin-top:0;
}

.inner5 .image01{
	position:absolute;
	left:73px;
	top:313px;	
}

.inner5 .image03{
	position:absolute;
	left:413px;
	top:313px;	
}

.inner5 .image02{
	position:absolute;
	left:160px;
	top:320px;	
}

.inner5 .image04{
	position:absolute;
	left:498px;
	top:320px;	
}

.block03{
	width:870px;
	margin:0px auto 0;	
	padding:70px 0 0;
}

.block03 h4{
	margin-top:50px;
	font-size:25px;
	border-bottom:solid 3px #eb344b;
	padding-bottom:10px;	
}

.block03 .txt01{
	margin-top:20px;
	font-size:16px;	
}

.block03 .txt01 span{
	font-weight:bold;	
}

.block03 .txt01 span.ml{
	display:inline-block;
	margin-left:65px;	
}

.block03 ul{
	margin-top:25px;
}

.block03 ul.mt_min{
	margin-top:10px;	
}

.block03 ul li{
	margin-bottom:10px;	
	font-size:11px;
	padding-left:1em;
	text-indent:-1em;	
}

.block03 ul li.mt{
	margin-bottom:15px;	
}

.block03 ul li:last-child{
	margin-bottom:0;	
}

.block03 a.pdf{
	display:inline-block;
	margin-top:10px;
	font-size:14px;
	color:#cd0044;
	font-weight:bold;	
}

.block03 a{
	color:#cd0044;
}

.block03 a:hover{
	text-decoration:none;	
}

.block03 a.pdf:after{
	content:"";
	display:inline-block;
	background:url(../images/app_lp/icon_pdf.png) no-repeat left top;
	background-size:100% auto;
	width:25px;
	height:32px;
	position:relative;
	left:5px;
	top:10px;
}

@media (max-width:1050px) {
	#contents img{
		width:100%;
		height:auto;	
	}
	
	body{
		width:100%;
		overflow-x:hidden;
	}
	
	#contents > *,
	#contents > * > *,
	#contents > * > * > *,
	#contents > * > * > * > *{
		max-width:100%;	
	}
	
	.contents{
		width:94%;
		margin:0 auto;	
	}
	
	.main{
		margin-top:20px;	
	}
	
	.block01{
		margin-top:12%;
		border:solid 2px #06afb1;
		position:relative;
		height:32vw;
	}
	
	.block01 .ttl01{
		width:95%;
		text-align:center;
		position:absolute;
		top:-7vw;	
		left:50%;
		margin-left:-47.5%;
	}
	
	.block01 .image01{
		position:absolute;
		left:3vw;
		top:8vw;	
		width:43%;
	}
	
	
	.block01 .image03{
		position:absolute;
		left:3vw;
		top:15vw;	
		width:43%;
	}
	
	.block01 .image04{
		position:absolute;
		left:52vw;
		top:8vw;	
		width:40%;
	}
	
	
	.block01 .image06{
		position:absolute;
		right:auto;
		left:51vw;
		top:15vw;	
		width:43%;
	}
	
	.block01:after{
		content:"";
		display:block;
		width:1px;
		height:20vw;
		background:#cccccc;
		top:8vw;
		left:50%;
		position:absolute;	
	}
	
	.block02{
		margin-top:8%;
		background:#f2f2f2;
		padding:8% 0;	
	}
	
	.block02 h2{
		text-align:center;	
	}
	
	.block02 .inner1{
		position:relative;	
	}
	
	.block02 .inner1 .txt01{
		position:absolute;
		width:80%;
		left:50%;
		margin-left:-40%;
		top:20vw;
		font-size: 2.7vw;
		color: rgb(0, 0, 0);
		line-height: 1.933;
	}
	
	.block02 .inner1 .txt01 span{
		display:block;
		margin-top:1vw;
		font-size:2.5vw;
		color:#ec4484;
		font-weight:bold;	
	}
	
	.block02 .inner1 .txt02{
		font-size:10px;
		position:absolute;
		left:8vw;
		top:102vw;
		font-size:2.5vw;	
	}
	
	.block02 .inner1 .icon{
		top:44vw;
		width:28%;
		position:absolute;
		right:34%;	
	}
	
	.block02 .inner1 h4{
		position:absolute;
		width:100%;
		text-align:center;
		font-size:3.4vw;
		top:110vw;
	}	
	
	.block02 .inner1 table{
		position:absolute;
		width:80%;
		left:50%;
		margin-left:-40%;
		top:117vw;
		border:solid 1px #cccccc;
		border-right:none;
		border-bottom:none;
	}
	
	.block02 .inner1 table th{
		width:24vw;
		text-align:center;
		background:#f5f5f5;
		font-size:2.4vw;	
		color:#010000;	
		border-right:solid 1px #cccccc;
		border-bottom:solid 1px #cccccc;
		padding:2vw 0 ;
	}
	
	.block02 .inner1 table td{
		font-size:2.4vw;	
		background:#FFF;
		color:#010000;	
		border-right:solid 1px #cccccc;
		border-bottom:solid 1px #cccccc;
		padding:2vw 2vw ;
		line-height:1.7;
	}
	
	.block02 .inner1 table td span{
		display:block;
		color:#d80045;
		padding:2vw 0 1vw;
		font-weight:bold;	
	}
    
    .block02 .inner1 .manual{
    width: 75vw;
    height: 30vw;
    left: 9.5vw;
    bottom: 50vw;
    }
    
    .block02 .inner1 .account_relinkingl{
        text-align: center;
        font-size: 3.5vw;
        position:absolute;
        bottom: 54.5vw;
        left: 19vw;
    }


	.block02 .inner1 .txt03{
		font-size:2vw;	
		line-height:1.2;
		position:absolute;
		left:10vw;
		bottom:43.5vw;
	}
	
	.block02 .inner1 .txt03 span{
		display:block;
		padding-left:1em;
		text-indent:-1em;		
	}
	
	
	.block02 .inner2,
	.block02 .inner3,
	.block02 .inner4{
		position:relative;
		margin-top:5%;	
	}
	
	.block02 .inner2 .txt01,
	.block02 .inner3 .txt01,
	.block02 .inner4 .txt01{
		font-size: 2.8vw;
		color: rgb(0, 0, 0);
		line-height: 1.933;
		font-weight:bold;
		position:absolute;
		width:80%;
		left:50%;
		margin-left:-40%;
		top:28vw;
	}	
	
	.block02 .inner3 .txt01{
		width:80%;
		left:50%;
		margin-left:-40%;
		top:25vw;
	}
	
	.block02 .inner3 .txt02{
		position:absolute;
		font-size:2.1vw;
		font-weight:normal;	
		position:absolute;
		left:9vw;
		bottom:1.5vw;
	}
	
	.block02 .inner4 .txt01{
		width:80%;
		left:50%;
		margin-left:-40%;
		top:26vw;	
	}
	
	.block02 .inner2 .txt01 span{
		display:block;
		margin-top:2vw;
		font-size:2.1vw;
		font-weight:normal;	
	}
	
	.block02 .ttl02{
		text-align:center;
		margin-top:8%;
	}	
	
	.block02 ul{
		width:89%;
		margin:0 auto;	
	}
	
	.block02 ul li{
		width:100%;
		box-sizing:border-box;
		padding:8%;
		height:auto;
		float:none;
		background:#FFF;
		margin-bottom:5%;
		position:relative;
	}
	
	.block02 ul li h3{
		text-align:center;
		padding-top:0px;
		width:90%;
		margin:0 auto;
	}
	
	.block02 ul li p{
		text-align:left;
		margin-top:8%;
		font-size: 2.7vw;
		color: rgb(0, 0, 0);
		line-height: 1.857;
		font-weight:bold;
		padding-left:40%;	
	}
	
	.block02 ul li:nth-child(2) p{
		padding-left:35%;
	}
	
	.block02 ul li span{ 
		display:block;
		width:100%;
		margin:3vw auto 0;
		font-size: 2vw;
		color: rgb(0, 0, 0);
		line-height: 1.556;
		text-align: center;
		padding-left:0;
		text-indent:0;	
	}
	
	.block02 ul li span.mt0{ 
		margin-top:0;
	}
	
	.block02 ul li .image{
		text-align:center;
		margin-top:25px;
		width:20%;
		position:absolute;
		left:10vw;
		top:18vw;
	}
	
	.block02 ul li:nth-child(2) .image{
		margin-top:0px;
		top:30vw;
	}
	.block02 ul li:nth-child(3) .image{
		margin-top:0px;
		top:23vw;
		left:4vw;
		width:30%;
	}
	.block02 ul li:nth-child(4) .image{
		margin-top:0px;
		top:23vw;
		left:10vw;
		width:20%;
	}
	
	.block02 ul li:nth-child(2n){
		float:none;	
	}
	
	.inner5{
		width:89%;
		margin:0 auto;	
		position:relative;	
	}
	
	.inner5.mt_min{
		margin-top:8%;
	}
	
	.inner5 .ttl01{
		width:30%;
		position:absolute;
		left:18vw;
		top:34vw;	
	}
	
	.inner5 .ttl02{
		width:30%;
		position:absolute;
		left:18vw;
		top:47vw;
	}
	
	.inner5 .ttl02.ttl02_2{
		width:30%;
		position:absolute;
		left:18vw;
		top:55vw;
	}
	
	.inner5 .image01{
		width:40%;
		position:absolute;
		left:18vw;
		top:45vw;
		display:none;
	}
	
	.inner5 .image03{
		display:none;
		width:40%;
		position:absolute;
		left:18vw;
		top:45vw !important;	
	}
	
	.inner5 .image02{
		width:35%;
		position:absolute;
		left:15vw;
		top:41vw;
	}
	
	.inner5 .image04{
		width:35%;
		position:absolute;
		left:15vw;
		top:61vw;
	}
	
	.block03{
		width:89%;
		margin:0 auto;	
		padding:3% 0 0;
	}
	
	.block03 h4{
		margin-top:5%;
		font-size:4vw;
		border-bottom:solid 2px #eb344b;
		padding-bottom:2%;	
	}
	
	.block03 .txt01{
		margin-top:3%;
		font-size: 2.7vw;
	}
	
	.block03 .txt01 span{
		font-weight:bold;	
	}
	
	.block03 .txt01 span.ml{
		display:inline-block;
		margin-left:0px;	
	}
	
	.block03 ul{
		margin-top:3%;
	}
	
	.block03 ul.mt_min{
		margin-top:2%;	
	}
	
	.block03 ul li{
		margin-bottom:2%;	
		font-size:2.2vw;
		padding-left:1em;
		text-indent:-1em;	
	}
	
	.block03 ul li.mt{
		margin-bottom:3%;	
	}
	
	.block03 ul li:last-child{
		margin-bottom:0;	
	}
	
	.block03 a.pdf{
		display:inline-block;
		margin-top:1vw;
		font-size: 2.5vw;
		color:#cd0044;
		font-weight:bold;	
	}
	
	.block03 a:hover{
		text-decoration:none;	
	}
	
	.block03 a.pdf:after{
		content:"";
		display:inline-block;
		background:url(../images/app_lp/icon_pdf.png) no-repeat left top;
		background-size:100% auto;
		width:5vw;
		height:7vw;
		position:relative;
		left:2vw;
		top:2vw;
	}	
}

.block02 .inner1 .txt04{
	font-size:20px;
	color:#40912c;
	font-weight:bold;
	position:absolute;
	bottom:30px;
	left:125px;
}	


.block02 .inner1 .eco_bnr{
	display:block;
	width:260px;	
	position:absolute;
	bottom:30px;
	left:510px;
}

.block02 .inner1 .eco_bnr img{
	width:100%;
	height:auto;
}	

@media (max-width:1050px) {
	.block02 .inner1 .txt04{
		font-size:3.5vw;
		color:#40912c;
		font-weight:bold;
		position:absolute;
		bottom:35vw;
		text-align:center;
		width:80%;
		left:50%;
		margin-left:-40%;
	}	
	
	
	.block02 .inner1 .eco_bnr{
		display:block;
		position:absolute;
		bottom:5vw;
		width:80%;
		left:50%;
		margin-left:-40%;
	}
	
	.block02 .inner1 .eco_bnr img{
		width:100%;
		height:auto;
	}		
}

#digital_passbook{
    margin-top: -80px;
    padding-top: 80px;
}

@media (max-width:1050px) {
    #digital_passbook{
        margin-top: -20vw;
        padding-top: 20vw;
    }
}


.new_app{
    position: relative;
    height: 700px;
}

.new_app p{
    position: absolute;
}

.new_app a{
    position: absolute;
    top: 190px;
    left: 283px;
}

@media (max-width:1050px) {
    .new_app{
        height: 210vw;
    }
    
    .new_app p{
       width: 100vw;
    }    
    .new_app a{
        top: 63vw;
        left: 6vw;
        width: 82vw;
        margin: 0px !important;
    }

}



/* footer */

.app_footer {
    width: 100%;
    padding-bottom: 1.2rem;
    padding-top: 1.5rem;
}

.app_footer .download {
    background: linear-gradient(98deg, #E50044 -20%, #F7AE23 100%);
    width: 100%;
    height: 4.5rem;
    position: relative;
}

.app_footer .download::before {
    content: "";
    display: block;
    width: 5.28rem;
    height: 1rem;
    background-image: url("/convenience/app/images/download_en.svg");
    background-size: contain;
    position: absolute;
    bottom: -0.1rem;
    right: 0;
}

.app_footer .download .download_inner {
    width: 12rem;
    height: 100%;
    margin: 0 auto;
    position: relative;
    padding-left: 4.2rem;
    box-sizing: border-box;
}

.app_footer .download .download_inner .download_phone {
    position: absolute;
    width: 7.58rem;
    bottom: -2.3rem;
    left: -1.9rem;
}

.app_footer .download .download_inner .download_new {
    position: absolute;
    top: -0.67rem;
    right: 4.8rem;
    overflow: hidden;
}

.app_footer .download .download_inner .download_new img{
    width: 1.4rem;
}

.app_footer .download .download_inner .download_najirako {
    position: absolute;
    width: 1.54rem;
    top: -0.97rem;
    right: 3.12rem;
    overflow: hidden;
}

.app_footer .download .download_inner .download_najirako-hand {
    position: absolute;
    width: 1.54rem;
    top: -0.97rem;
    right: 3.12rem;
}

.app_footer .download .download_inner .app_logo img{
    width: 6rem;
    margin: 0 auto;
    padding: 0.3rem 0 0;
    display: block;
}

.app_footer .download .download_inner h2 {
    padding: 0.1rem 0 0.1rem;
    font-size: 0.4rem;
    color: #FFF;
    text-align: center;
    font-weight: bold;
}

.app_footer .download .download_inner ul {
    width: 7.85rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.app_footer .download .download_inner ul li {
    width: 3.73rem;
    background-color: #FFF;
    border-radius: 0.1rem;
    padding: 0.22rem 0.3rem 0.3rem;
    text-align: center;
    box-sizing: border-box;
}

.app_footer .download .download_inner ul li div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app_footer .download .download_inner ul p {
    margin-bottom: 0.1rem;
    font-size: 0.22rem;
    color: #333;
    text-align: center;
    font-weight: bold;
}

.app_footer .download .download_inner ul .qr {
    width: 1rem;
    border: #D9D9D9 1px solid;
}

.app_footer .download .download_inner ul .btn {
    width: 1.84rem;
    transition: 0.3s;
}

.app_footer .download .download_inner ul .btn:hover {
    opacity: 0.7;
}




@media (max-width: 768px) {

    .app_footer {
        padding-bottom: 0;
    }

    .app_footer .download {
        height: 120vw;
    }

    .app_footer .download::before {
        width: 4.1rem;
        height: 0.8rem;
        bottom: 1.65rem;
        right: 1.55rem;
        /* transform: translateX(70px); */
        transform: rotate(90deg);
    }

    .app_footer .download .download_inner {
        width: 3.5rem;
        padding-left: 0;
    }

    .app_footer .download .download_inner .download_phone {
        width: 1.4rem !important;
        bottom: 0;
        left: 1.05rem;
    }

    .app_footer .download .download_inner .download_najirako {
        width: 1.35rem;
        top: -0.87rem;
        right: 1.05rem;
    }

    .app_footer .download .download_inner .download_najirako-hand {
        width: 1.35rem;
        top: -0.85rem;
        right: 1.05rem;
    }
    
    .app_footer .download .download_inner .download_new {
        top: -15vw;
        right: 64vw;
    }

    .app_footer .download .download_inner .download_new img{
        width: 25vw !important;
    }    
    
    .app_footer .download .download_inner .app_logo img{
        width: 100%;
        margin: 0 auto;
        padding: 0.4rem 0 0;
        display: block;
    }

    .app_footer .download .download_inner h2 {
        padding: 0.2rem 0 0.05rem;
        font-size: 0.22rem;
    }

    .app_footer .download .download_inner ul {
        width: 3.5rem;
        opacity: 1;
    }

    .app_footer .download .download_inner ul li {
        width: 1.7rem;
        border-radius: 0.05rem;
        padding: 0.15rem 0.13rem 0.13rem;
    }

    .app_footer .download .download_inner ul li div {
        display: block;
    }

    .app_footer .download .download_inner ul p {
        margin-bottom: 0.1rem;
        font-size: 0.15rem;
    }

    .app_footer .download .download_inner ul .btn {
        width: 1.44rem;
        margin: 0 auto;
    }


}


.close{
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

.close::after{
    content: "";
    background: rgba(0, 0, 0, 0.50);
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    top:0;
    left: 0;
}

.close::before{
    content: "\30B5\30FC\30D3\30B9\3092\7D42\4E86\3044\305F\3057\307E\3057\305F\3002";
    color: #FFF;
    z-index: 10;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 230px;
    left: 0;
}


@media (max-width:1050px) {
    .close::after{
        width: 94vw;
        margin: 0 3vw;
    }
    
    .close::before{
        font-size: 5vw;
        top: 50vw;
    }
}