@charset "UTF-8";
/*-----------------------------------
	base
-----------------------------------*/
@media screen and (max-width: 840px) {
}
@media screen and (max-width: 640px) {
}
/*-----------------------------------

	mainvisual_block

-----------------------------------*/
#mainvisual_block{
	background: url("../img/card/mainvisual.jpg")no-repeat;
	background-size: cover;
}
#mainvisual_block .row_box{
	align-items: center;
}
#mainvisual_block .row_box .mainvisual_card{
	width: 218px;
	height: 135px;
}
#mainvisual_block .row_box .mainvisual_card img{
	border-radius: 7px;
}
@media screen and (max-width: 840px) {
	#mainvisual_block{
		position: relative;
		background: url("../img/card/mainvisual_sp.jpg")no-repeat;
		background-size: cover;
		background-position-y: top;
	}
	#mainvisual_block .row_box .mainvisual_card{
		position: absolute;
		width: 140px;
		height: auto;
		right: 6%;
		bottom: 3vw;
	}
}
@media screen and (max-width: 640px) {
	#mainvisual_block .row_box .mainvisual_card{
		width: 140px;
	}
}
/*-----------------------------------

	card_block

-----------------------------------*/
#card_block{
	padding: 100px 0 0;
}
.none{
	display: none;
}

/*****point_box*****/
#card_block .point_box{
	padding: 0 0 109px;
}
#card_block .point_box .contents_inner{
	gap: 50px;
	margin-top: 49px;
}
#card_block .point_box .left_box{
	width: 45%;
}
#card_block .point_box .left_box .point_btn{
	background: #48BEBE;
	width: 100%;
	border: 1px solid #48BEBE;
	border-radius: 45px;
	text-align: center;
	margin-top: 71px;
	cursor: pointer;
	transition: 0.3s;
}
@media (hover: hover) {
	#card_block .point_box .left_box .point_btn:hover {
		background: #ffffff;
	}
	#card_block .point_box .left_box .point_btn:hover a {
		color: #48BEBE;
	}
}
#card_block .point_box .left_box .point_btn a{
	padding: 29px 0;
	display: block;
	color: #fff;
	font-size: 25px;
	font-weight: 700;
}
#card_block table tr td:first-child{
	width: 110px;
	/*height: 144px;*/
	padding-right: 20px;
	display: block;
	box-sizing: border-box;
}
#card_block table tr td:first-child img{
	display: block;
}
#card_block table{
	width: 48%;
}
#card_block table tr td{
	font-size: 16px;
	font-weight: 700;
	line-height: 25px;
	width: calc(100% - 110px);
	vertical-align: middle;
	padding-top: 25px;
}
#card_block table tr:first-child td{
	padding-top: 0;
}
#card_block table tr td span{
	font-size: 25px;
	font-weight: 700;
	color: #48BEBE;
	line-height: 32px;
	margin-bottom: 7px;
	display: block;
}

/*****card_box*****/
#card_block .card_box{
	background: #E5EDED;
	padding: 70px 0;
}
#card_block .card_box .row_box{
	padding: 50px;
	background: #fff;
	border-radius: 19px;
	gap: 100px;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
#card_block .card_box .topborder_ttl{
	color: #48BEBE;
	letter-spacing: 0;
}
#card_block .card_box .row_box .card_list li{
	font-size: 16px;
	font-weight: 500;
	line-height: 25px;
	padding-left: 10px;
	position: relative;
	color: #000;
}
#card_block .card_box .row_box .card_list li::before{
	content: "-";
	position: absolute;
	font-size: 16px;
	top: 0;
	left: 0;
}

/*****benefit_box*****/
#card_block .benefit_box{
	background: #48BEBE;
	padding: 100px 0;
}
#card_block .benefit_wrap .logo_box{
	max-width: 564px;
    width: 50%;
}
#card_block .benefit_wrap .img_box{
	max-width: 343px;
	width: 35%;
}
#card_block .benefit_wrap .img_box img{
	border-radius: 10px;
}
#card_block .benefit_box .point_wrap{
	justify-content: center;
	margin: 42px 0 0;
}
#card_block .benefit_box .point_wrap .left_box{
	text-align: center;
	background: #fff;
	border-radius: 70px 0 0 70px;
	/*height: 140px;*/
	width: 60%;
	padding: 10px 83px 0 46px; 
}
#card_block .benefit_box .point_wrap .left_box .txt{
	font-size: 2.3vw;
	font-weight: 700;
	color: #48BEBE;
	letter-spacing: 0;
}
#card_block .benefit_box .point_wrap .left_box .point{
	color: #48BEBE;
	font-size: 3.3vw;
	font-weight: 700;
	letter-spacing: 0;
}
#card_block .benefit_box .point_wrap .left_box .point .tax{
	font-size: 17px;
	font-weight: 700;
	vertical-align: middle;
}
#card_block .benefit_box .point_wrap .right_box{
	border-radius: 0 70px 70px 0;
	/*height: 140px;*/
	width: 40%;
	padding: 37px 75px 29px 27px; 
	background: #FDC60D;
}
#card_block .benefit_box .point_wrap .right_box .txt{
	font-size: 1.2vw;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0;
}
#card_block .benefit_box .point_wrap .right_box .point{
	font-size: 2.3vw;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0;
}
#card_block .benefit_box .point_wrap .right_box .point .tax{
	font-size: 10px;
	font-weight: 700;
	vertical-align: middle;
}

/*****step_box*****/
#card_block .step_box .step_list {
	margin-top: 75px;
	gap: 45px 24px;
}
#card_block .step_box .step_list li{
	background: #fff;
	padding: 33px 33px 17px;
	border-radius: 20px;
	position: relative;
	width: calc((100% / 3) - 24px);
}
#card_block .step_box .step_list li span{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: -20px;
	background: #FDC60D;
	border-radius: 25px;
	padding: 5px 0;
	color: #fff;
	font-size: 25px;
	font-weight: 700;
	width: 155px;
	text-align: center;
	box-sizing: border-box;
}
#card_block .step_box .step_list li .list_ttl{
	color: #48BEBE;
	font-size: 35px;
	font-weight: 700;
	padding: 0 0 7px;
	border-bottom: 1px solid #48BEBE;
	text-align: center;
	letter-spacing: -0.05em;
}
#card_block .step_box .step_list li .img_box{
	margin: 15px auto 11px;
}
#card_block .step_box .step_list li .img_height{
	margin-bottom: 0;
}
#card_block .step_box .step_list li .img_height img{
	height: 205px;
}
#card_block .step_box .step_list li p{
	font-size: 20px;
	text-align: center;
}
#card_block .step_box .under_txt{
	margin-top: 16px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
}

/*****guidance_box*****/
#card_block .guidance_box{
	padding: 35px 0 103px;
}
#card_block .guidance_box .ttl_box{
	align-items: flex-end;
	gap: 41px;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
#card_block .ttl_box .guidance_card{
	max-width: 360px;
	width: 40%;
	height: auto;
}
#card_block .ttl_box .guidance_ttl{
	width: 55%;
	height: auto;
}
#card_block .otoku_box{
	position: relative;
	margin-top: 110px;
	border: 3px solid #48BEBE;
	border-radius: 20px;
	padding: 80px 36px 30px;
}
#card_block .otoku_box .otoku_ttl{
	max-width: 652px;
	width: 90%;
	background: #fff;
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0 25px;
	box-sizing: border-box;
	gap: 16px;
	align-items: center;
}
.otoku_box .otoku_ttl.row_box .number{
	background: #48BEBE;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	text-align: center;
	font-family: "Inter", sans-serif;
	font-size: 50px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
	padding: 26px 0;
}
.otoku_box .otoku_ttl.row_box .number span{
	font-size: 25px;
	display: block;
}
#card_block .otoku_box .otoku_ttl img{
	max-width: calc(100% - 121px);
	width: 75%;
	height: 122px;
}
#card_block .otoku_box .img_box{
	gap: 22px;
	justify-content: center;
}
#card_block .otoku_box .img_box img{
	width: calc((100% - 22px) / 2);
	display: block;
	height: auto;
}
#card_block .otoku_box .img_box .pc{
		display: block;
}
#card_block .otoku_box .img_box .sp{
		display: none;
}
#card_block .otoku_box .otoku_txt{
	text-align: center;
	margin-top: 20px;
	font-size: 20px;
	font-weight: 700;
}
#card_block .guidance_box .contents_inner .point_btn{
	background: #48BEBE;
	max-width: 474px;
    width: 100%;
	border: 1px solid #48BEBE;
    border-radius: 45px;
    text-align: center;
    margin: 103px auto 0;
	cursor: pointer;
	transition: 0.3s;
}
@media (hover: hover) {
	#card_block .guidance_box .contents_inner .point_btn:hover {
		background: #ffffff;
	}
	#card_block .guidance_box .contents_inner .point_btn:hover a {
		color: #48BEBE;
	}
}
#card_block .guidance_box .contents_inner .point_btn a{
	padding: 29px 0;
    display: block;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
}
#card_block .guidance_box .link_box{
	gap: 24px;
	justify-content: center;
	max-width: 600px;
	width: 100%;
	margin: 100px auto 0;
}
#card_block .guidance_box .link_box .link_btn{
	border: 2px solid #48BEBE;
	border-radius: 50vw;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	width: calc((100% - 24px) / 2);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
}
@media (hover: hover) {
	#card_block .guidance_box .link_box .link_btn:hover{
		background: #48BEBE;
	}
	#card_block .guidance_box .link_box .link_btn:hover a{
		color: #ffffff;
	}
}
#card_block .guidance_box .link_box .link_btn a{
	padding: 12px 0;
	color: #48BEBE;
}
@media screen and (max-width: 1325px){
	#card_block .benefit_box .point_wrap .right_box .point{
		font-size: 2vw;
	}
}
@media screen and (max-width: 1200px){
	/*****benefit_box*****/
	#card_block .benefit_box .point_wrap .left_box{
		padding: 10px 30px;
	}
	#card_block .benefit_box .point_wrap .left_box .point{
		font-size: 42px;
	}
	#card_block .benefit_box .point_wrap .right_box{
		padding: 10px 30px;
	}
	#card_block .benefit_box .point_wrap .right_box .point{
		font-size: 26px;
	}
	#card_block .benefit_box .point_wrap .right_box .txt{
		font-size: 14px;
		padding-top: 25px;
	}
}
@media screen and (max-width: 1100px){
	/*****point_box*****/
	#card_block .point_box .contents_inner{
		gap: 40px;
	}
	#card_block .point_box .left_box .point_btn{
		margin-top: 50px;
	}
	#card_block .point_box .left_box{
		width: 37%;
	}
	#card_block table{
		width: 55%;
	}
	#card_block .point_box .left_box .point_btn a{
		font-size: 16px;
		padding: 20px 0;
	}
	
	/*****card_box*****/
	#card_block .card_box .row_box{
		gap: 20px;
	}
	#card_block .card_box .row_box .card_list li{
		font-size: 14px;
	}
	
	/*****guidance_box*****/
	.otoku_box .otoku_ttl.row_box .number{
		width: 105px;
		height: 105px;
		padding: 18px 0;
	}
	#card_block .otoku_box .otoku_ttl img{
		width: 73%;
	}
	
	/*****benefit_box*****/
	#card_block .benefit_box .point_wrap{
		display: block;
	}
	#card_block .benefit_box .point_wrap .left_box,
	#card_block .benefit_box .point_wrap .right_box{
		max-width: 100%;
		width: 100%;
	}
	#card_block .benefit_box .point_wrap .left_box{
		border-radius: 40px 40px 0 0;
	}
	#card_block .benefit_box .point_wrap .right_box{
		border-radius: 0 0 40px 40px;
	}
	#card_block .benefit_box .point_wrap .left_box .txt{
		font-size: 19px;
	}
	#card_block .benefit_box .point_wrap .left_box .point{
		font-size: 30px;
	}
	#card_block .benefit_box .point_wrap .right_box .txt{
		font-size: 17px;
		max-width: 280px;
        margin: auto;
		padding-top: 0;
	}
	#card_block .benefit_box .point_wrap .right_box .point{
		font-size: 30px;
		text-align: center;
	}
	
	/*****step_box*****/
	#card_block .step_box .step_list li{
		width: calc((100% / 2) - 24px);
	}
}
@media screen and (max-width: 840px) {
	/*****point_box*****/
	.none{
		display: block;
	}
	#card_block .point_box .contents_inner{
		display: block;
		margin-top: 43px;
	}
	#card_block .point_box .left_box,
	#card_block table{
		width: 100%;
	}
	#card_block table{
		margin-top: 60px;
	}
	#card_block .point_box .left_box .point_btn{
		margin-top: 40px;
	}
	#card_block .point_box .left_box .point_btn a{
		font-size: 17px;
		padding: 21px 0;
	}
	
	/*****card_box*****/
	#card_block .card_box .row_box{
		flex-direction: column;
		padding: 60px 30px;
	}
	
	/*****step_box*****/
	#card_block .step_box .step_list li{
		width: 85%;
		margin: auto;
	}
	#card_block .step_box .step_list li span{
		padding: 2px 0; 
		font-size: 22px;
		width: 136px;
	}
	#card_block .step_box .step_list li .list_ttl{
		font-size: 30px;
	}
	#card_block .step_box .step_list li p{
		font-size: 17px;
		font-weight: 700;
		line-height: 21px;
	}
	#card_block .step_box .under_txt{
		font-size: 14px;
		width: 90%;
		margin: 16px auto 0;
	}
	
	/*****guidance_box*****/
	#card_block .otoku_box{
		margin-top: 215px;
	}
	#card_block .otoku_box{
		padding: 58px 33px 30px;
	}
	#card_block .otoku_box .otoku_ttl{
		flex-direction: column;
		top: -170px;
		gap: 0;
	}
	#card_block .otoku_box .otoku_ttl img{
		max-width: 100%;
		width: 100%;
	}
	.otoku_box .otoku_ttl.row_box .number{
		width: 97px;
		height: 97px;
		padding: 14px 0;
	}
	#card_block .otoku_box .img_box{
		flex-direction: column;
		gap: 13px;
		justify-content: flex-start;
	}
	#card_block .otoku_box .img_box img{
		width: 100%;
	}
	#card_block .otoku_box .img_box .pc{
		display: none;
	}
	#card_block .otoku_box .img_box .sp{
		display: block;
		width: 80%;
        margin: auto;
	}
	#card_block .otoku_box .img_box .w_100{
		max-width: 390px;
	}
	#card_block .otoku_box .position .sp{
		padding-top: 57px;
	}
	#card_block .otoku_box .position{
		position: relative;
	}
	#card_block .otoku_box .position::before{
		content: "";
		background: url("../img/card/bonus_01_sp02.svg")no-repeat;
		background-size: 100%;
		position: absolute;
		width: 120px;
		height: 120px;
		top: 0;
		left: 7%;
	}
	#card_block .otoku_box .otoku_txt{
		text-align: left;
		font-size: 16px;
	}
	#card_block .guidance_box .link_box{
		flex-direction: column;
		gap: 20px;
		margin: 60px auto 0;
	}
	#card_block .guidance_box .link_box .link_btn{
		max-width: 369px;
		width: 90%;
		margin: auto;
	}
}
@media screen and (max-width: 640px) {
	/*****point_box*****/
	#card_block table{
		margin-top: 30px;
	}
	#card_block table tr td{
		max-width: 270px;
		width: 100%;
		display: block;
		margin: auto;
		font-size: 15px;
	}
	#card_block table tr td:first-child{
		padding: 0;
		margin: 30px auto 19px;
	}
	#card_block table tr td span{
		text-align: center;
		margin-bottom: 12px;
		font-size: 22px;
	}
	
	/*****benefit_box*****/
	#card_block .benefit_box .contents_inner .benefit_wrap{
		display: block;
	}
	#card_block .benefit_wrap .logo_box,
	#card_block .benefit_wrap .img_box{
		max-width: 100%;
		width: 100%;
	}
	#card_block .benefit_wrap .img_box{
		margin-top: 36px;
	}
	
	/*****guidance_box*****/
	#card_block .guidance_box{
		padding: 100px 0 200px;
	}
	#card_block .guidance_box .ttl_box{
		display: block;
		width: 85%;
		margin: auto;
	}
	#card_block .ttl_box .guidance_card,
	#card_block .ttl_box .guidance_ttl{
		max-width: 100%;
		width: 100%;
	}
	#card_block .guidance_box .guidance_ttl{
		max-width: 90%;
        width: 90%;
		margin: auto;
	}
	#card_block .otoku_box .position::before{
		left: 5%;
	}
	
}
@media screen and (max-width: 450px){
	/*****guidance_box*****/
	#card_block .otoku_box .position::before{
		left: -7%;
		width: 115px;
        height: 115px;
	}
}
@media screen and (max-width: 410px) {
	/*****card_box*****/
	#card_block .card_box .topborder_ttl{
		font-size: 24px;
	}
	
	/*****benefit_box*****/
	#card_block .benefit_box .point_wrap .left_box .txt{
		font-size: 18px;
	}
	#card_block .benefit_box .point_wrap .left_box .point{
		font-size: 28px;
	}
	#card_block .benefit_box .point_wrap .right_box .txt{
		font-size: 16px;
	}

}