html{
	font-size: 62.5% !important;		
}


h3:after {
	display: none;
}
h2{
	margin: 0;
}
a{
	color: #333;
}
a:hover{
	text-decoration: none;
}
a:link, a:visited, a:active {
	color: #333;
}
.link-txt a{
	color: #ed3858;
	text-decoration: underline;
}
body{
	position: relative;
	font-family: "Helvetica Neue", Arial, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
	color: #333;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

#Wrapper header{
	background: none;
	padding: 0;
}
#case-nav .num,
.case-title h3,
.step-item h4{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
}
#case-nav .num strong,
.case-title h3 strong,
.step-item h4 strong{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;	
}

.btn .btn-ios,
.btn .btn-android{
	display: none;
}
.mode-ios .btn .btn-pc,
.mode-ios .btn .btn-android{
	display: none;
}
.mode-ios .btn .btn-ios{
	display: block;
}
.mode-android .btn .btn-pc,
.mode-android .btn .btn-ios{
	display: none;
}
.mode-android .btn .btn-android{
	display: block;
}
#gfooter{
	background: #f1f1f1;
}


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

	.sp{
		display: none;
	}
	.ignore-pc{
		display: none !important;
	}

	#header{
		position: relative;
		z-index: 10;
		box-shadow: 0 0 8px rgba(0,0,0,0.3);
	}
	#education{
		position: relative;
		font-size: 1.8rem;
	}
	#gfooter .inner ul li,#gfooter small{
		font-size: 1.2rem;
	}

	.pagetop{
		bottom: 20px;
		right: 20px;
		z-index: 500;
		transition: transform 300ms ease;
	}
	.pagetop.on{
		transform: translateY(-100px);
	}


/* kv
------------------------------------------------------------------*/
	
	.kv{
		position: relative;
		overflow: hidden;
		background: #fffbb7 url(../img/kv_bg.png) 50% 100% repeat-x;
	}
	.kv-inner{
		position: relative;
		margin: auto;
		max-width: 960px;
		height: 745px;
		transform-origin: top left;
	}
	.kv-inner h1{
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		text-align: center;
		z-index: 20;
	}
	.kv-obj{
		position: relative;
		text-align: center;
		height: 100%;
		z-index: 10;
	}

	.obj-human-group{
		position: absolute;
		width: 100%;
		bottom: 90px;
		text-align: center;
	}



	/* obj-line
	------------------------------*/

	.obj-human1{
		position: absolute;
		top: 85px;
		width: 100%;
		text-align: center;
	}

	.obj-human1 span{
		position: absolute;
	}

	.obj-human1 span em{
		position: relative;
		display: inline-block;
		width: 90px;
		height: 4px;
		border-radius: 2px;
		background: #004098;
	}
	.obj-human1 span.l-1,
	.obj-human1 span.l-2{
		transform: translateX(100px);
		opacity: 0;
		transition: opacity 500ms cubic-bezier(0.87, 0, 0.13, 1),transform 500ms cubic-bezier(0.87, 0, 0.13, 1);
	}
	.obj-human1 span.r-1,
	.obj-human1 span.r-2{
		transform: translateX(-100px);
		opacity: 0;
		transition: opacity 500ms cubic-bezier(0.87, 0, 0.13, 1),transform 500ms cubic-bezier(0.87, 0, 0.13, 1);
	}
	.obj-human1.on span.l-1,
	.obj-human1.on span.l-2{
		transform: translateX(0);
		opacity: 1;
	}
	.obj-human1.on span.r-1,
	.obj-human1.on span.r-2{
		transform: translateX(0);
		opacity: 1;
	}



	.obj-human1 span.l-1 em:before,
	.obj-human1 span.l-2 em:before{
		content: "";
		position: absolute;
		top: 50%;
		left: -18px;
		margin-top: -4px;
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #004098;
	}
	.obj-human1 span.r-1 em:before,
	.obj-human1 span.r-2 em:before{
		content: "";
		position: absolute;
		top: 50%;
		right: -18px;
		margin-top: -4px;
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #004098;
	}

	.obj-human1 span.l-1{
		top: 50%;
		left: 50%;
		margin: -60px 0 0 -230px;
	}
	.obj-human1 span.l-2{
		top: 50%;
		left: 50%;
		margin: 60px 0 0 -230px;
	}

	.obj-human1 span.r-1{
		top: 50%;
		right: 50%;
		margin: -60px -230px 0 0;
	}
	.obj-human1 span.r-2{
		top: 50%;
		right: 50%;
		margin: 60px -230px 0 0;
	}

	.obj-human1 span.l-1 em{
		transform: rotate(15deg);
	}
	.obj-human1 span.l-2 em{
		transform: rotate(-15deg);
	}

	.obj-human1 span.r-1 em{
		transform: rotate(-15deg);
	}
	.obj-human1 span.r-2 em{
		transform: rotate(15deg);
	}


	/* obj-cube
	------------------------------*/

	#obj-cube{
		position: absolute;
		top: 0;
		left: 50%;
		margin: 0 0 0 -480px;
		width: 960px;
		height: 100%;
	}
	#obj-cube span{
		position: absolute;
		opacity: 0;
		transition: opacity 500ms cubic-bezier(0.87, 0, 0.13, 1),transform 1200ms cubic-bezier(0.87, 0, 0.13, 1);
	}
	#obj-cube span.l-1{
		display: block;
		margin: -32px 0 0 -36px;
		width: 73px;
		height: 75px;
		background: url(../img/_r4vp_cube_l_1.png);
		background-size: 100%;
	}
	#obj-cube span.l-2{
		display: block;
		margin: -28px 0 0 -28px;
		width: 56px;
		height: 57px;
		background: url(../img/_r4vp_cube_l_2.png);
		background-size: 100%;
	}
	#obj-cube span.r-1{
		display: block;
		margin: -32px 0 0 -36px;
		width: 75px;
		height: 74px;
		background: url(../img/_r4vp_cube_r_1.png);
		background-size: 100%;
	}
	#obj-cube span.r-2{
		display: block;
		margin: -28px 0 0 -28px;
		width: 58px;
		height: 52px;
		background: url(../img/_r4vp_cube_r_2.png);
		background-size: 100%;
	}
	#obj-cube span.on{
		opacity: 1;
	}
	#obj-cube.on{
		opacity: 1;
	}

	/* obj-star
	------------------------------*/

	#obj-star{
		position: absolute;
		top: 0;
		left: 50%;
		margin: 0 0 0 -480px;
		width: 960px;
		height: 100%;
	}
	#obj-star span{
		position: absolute;
		display: block;
		margin: -10px 0 0 -10px;
		width: 21px;
		height: 21px;
		background: url(../img/obj_star.png);
		background-size: 100% 100%;
		transform: scale(0);
		opacity: 0;
		transition: opacity 500ms cubic-bezier(0.87, 0, 0.13, 1),transform 1200ms cubic-bezier(0.87, 0, 0.13, 1);
	}
	#obj-star span.on{
		transform: scale(1);
		opacity: 1;
	}



	/* nav
	------------------------------*/

	#gnav{
		position: absolute;
		width: 100%;
		height: 80px;
		bottom: 30px;
		z-index: 50;
	}
	#gnav .gnav-inner{
		position: relative;
		margin: auto;
		max-width: 960px;
	}
	#gnav ul{
		position: relative;
		display: flex;
		margin: 0 -10px;
		height: 80px;
	}
	#gnav li{
		padding: 0 10px;
		width: calc(100% / 3);
	}
	#gnav li a{
		position: relative;
		display: block;
		height: 80px;
		width: 100%;
		border-radius: 40px;
		text-align: center;
		background: #e8244b;
	}
	#gnav li a:hover{
		opacity: 0.7;
		transition: opacity 400ms ease;
	}
	#gnav li a:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 17px;
		display: block;
		width: 43px;
		height: 43px;
		background: url(../img/icon_check.png);
		background-size: 100% 100%;
	}
	#gnav li a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 30px;
		display: block;
		width: 17px;
		height: 10px;
		background: url(../img/arrow_down_wh.png);
		background-size: 100% 100%;
	}
	#gnav li a span{
		position: absolute;
		display: block;
		top: 50%;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
		transform: translateY(-50%);
	}


/* contents
------------------------------------------------------------------*/

	.sec-inner{
		margin: auto;
		padding: 0 10px;
		max-width: 980px;
	}
	.case-inner{
		margin: auto;
		padding: 0 10px;
		max-width: 980px;		
	}


	#main .sec-header{
		position: relative;
		padding: 40px 0;
		text-align: center;
	}

	.pt_howto_begin-text{
		margin-bottom: 40px;
		text-align: center;
	}

	#main .sec-header span{
		position: relative;
		margin: auto;
		display: block;
		width: 45px;
		height: 52px;
		background: url(../img/icon_leaf.png);
		background-size: 100% 100%;
		opacity: 0;
		transform: translateY(100%);
	}
	#pt_howto_others-section .step-item{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#pt_howto_begin-section .sec-header span,
	#pt_howto_others-section .sec-header.begin span{
		position: relative;
		margin: auto;
		display: block;
		width: 45px;
		height: 52px;
		background: url(../img/icon_vpoint.png);
		background-size: 100% 100%;
		opacity: 0;
		transform: translateY(100%);
	}
	 #pt_howto_others-section .sec-header.vpoint span{
		position: relative;
		margin: auto;
		display: block;
		width: 45px;
		height: 52px;
		background: url(../img/202503/icon_cube.png);
		background-size: 100% 100%;
		opacity: 0;
		transform: translateY(100%);
	}
	#main .sec-header.on span{
		opacity: 1;
		transform: translateY(0);
		transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);;
	}


	#main .sec-header span:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: -40px;
		display: block;
		width: 25px;
		height: 49px;
		background: url(../img/obj_line_l.png);
		background-size: 100% 100%;
	}
	#main .sec-header span:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: -40px;
		display: block;
		width: 25px;
		height: 49px;
		background: url(../img/obj_line_r.png);
		background-size: 100% 100%;
	}
	#main .sec-header i{
		display: block;
		padding: 15px 0 0;
		font-size: 2.7rem;
		font-weight: bold;
	}
	#main .sec-header h2{
		padding: 5px 0 0;
		font-size: 4.5rem;
		font-weight: bold;
		color: #e8244b;
	}
	#main #pt_howto_others-section .sec-header h2{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px 0 0;
		font-size: 4.5rem;
		font-weight: bold;
		color: #e8244b;
		height: 140px;
	}

	#main #pt_howto_others-section .step-item p i{
		width: 100%;
		height: 185px;
	}

	
	


/* case-nav
------------------------------------------------------------------*/

	#case-nav ul{
		display: flex;
		margin: 0 -10px;
	}
	#case-nav ul li{
		padding: 0 10px;
		width: calc(100% / 3);
	}
	#case-nav ul li a{
		position: relative;
		display: block;
		padding: 15px 5px 50px;
		width: 100%;
		border-radius: 14px;
		border: 3px solid #e8244b;
		text-align: center;
	}
	#case-nav ul li a:hover{
		opacity: 0.7;
		transition: opacity 400ms ease;
	}
	#case-nav ul li a:after{
		content: "";
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 19px;
		display: block;
		width: 19px;
		height: 12px;
		background: url(../img/arrow_down_rd.png);
		background-size: 100% 100%;
	}
	#case-nav .num{
		font-size: 2.7rem;
		color: #e8244b;
		line-height: 1;
	}
	#case-nav .num strong{
		font-size: 5.4rem;
	}
	#case-nav .cap{
		padding: 10px 0 0;
		font-weight: bold;
		font-size: 2.4rem;
	}
	#case-nav .cap br{
		display: none;
	}
	#case-nav .point{
		font-size: 3.8rem;
		font-weight: bold;
		color: #074296;
	}
	#case-nav .point span{
		padding: 0 0 0 5px;
		font-size: 2.4rem;
	}
	#case-nav .point em{
		position: relative;
		display: inline-block;
		padding: 0 0 0 50px;
	}
	#case-nav .point em:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 32px;
		height: 41px;
		background: url(../img/_r4vp_icon_tpoint.png);
		background-size: 100% 100%;
	}	
	#case-nav .point strong{
		position: relative;
		display: inline-block;
		line-height: 1;
	}
	#case-nav .point strong:before{
		content: "";
		position: absolute;
		bottom: -2px;
		display: block;
		width: 0;
		height: 10px;
		background: #fbf422;
		z-index: 5;
	}
	#case-nav.on .point strong:before{
		width: 100%;
		transition: width 300ms ease;
	}

	#case-nav .point strong i{
		position: relative;
		z-index: 10;
	}

	/* case-header
	------------------------------*/
	.case-header{
		text-align: center;
		overflow: hidden;
	}
	.case-header .case-title{
		position: relative;
		padding: 0 25px;
		display: inline-block;
		color: #e8244b;
	}
	.case-header .case-title:after,
	.case-header .case-title:before{
		content: "";
		position: absolute;
		margin: auto;
		bottom: 30px;
		display: block;
		width: 1000px;
		height: 3px;
		background: #e8244b;
	}
	.case-header .case-title:after{
		left: 100%;
	}
	.case-header .case-title:before{
		right: 100%;
	}
	.case-header .case-title h3{
		font-size: 3.7rem;
		line-height: 1;
	}
	.case-header .case-title h3 strong{
		margin: 0 0 0 5px;
		font-size: 7.4rem;
	}
	.case-header .case-title span{
		font-size: 1.8rem;
		font-weight: bold;
	}
	.case{
		margin: 60px 0 0;
	}
	.case-item{
		padding: 60px 0;
	}
	.case-detail{
		position: relative;
	}
	.case-detail figure.human {
		position: relative;
	}
	.case-detail figure.human span{
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		max-width: 960px;
		width: 100%;
	}



	/*start*/
	.case-item1 .case-detail figure.human div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	/*fix*/
	.case-item1 .case-detail figure.human.fixed div{
		position: fixed;
		top: 50%;
		left: 0;
		width: 100%;
	}

	/*end*/
	.case-item1 .case-detail figure.human.fixed.stop div{
		position: absolute;
		top: inherit;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	/*start*/
	.case-item2 .case-detail figure.human div{
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
	}
	/*fix*/
	.case-item2 .case-detail figure.human.fixed div{
		position: fixed;
		top: 50%;
		right: 0;
		width: 100%;
	}

	/*end*/
	.case-item2 .case-detail figure.human.fixed.stop div{
		position: absolute;
		top: inherit;
		bottom: 0;
		right: 0;
		width: 100%;
	}



	.case-item1 .case-detail figure.human img{
		position: absolute;
		left: 0;
	}
	.case-item2 .case-detail figure.human img{
		position: absolute;
		right: 0;
	}
	.case-item1 .case-detail figure.human img:nth-child(2){
		opacity: 0;
		transform: translate(50px,50px);
		transition: all 200ms ease;
	}
	.case-item2 .case-detail figure.human img:nth-child(2){
		opacity: 0;
		transform: translate(-50px,50px);
		transition: all 200ms ease;
	}
	.case-detail figure.human.stop img:nth-child(2){
		opacity: 1;
		transform: translate(0,0);
	}


	/* table-header
	------------------------------*/
	.table-header{
		margin: 0 0 10px;
	}
	.table-header h4{
		font-size: 2.1rem;
		font-weight: bold;
	}
	.table-header h4 br{
		display: none;
	}
	.table-header .point{
		display: inline-block;
		padding: 0 15px;
		font-size: 6rem;
		font-weight: bold;
		color: #074296;
	}
	.table-header .point em{
		position: relative;
		display: inline-block;
		padding: 0 0 0 70px;
	}
	.table-header .point em:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 48px;
		height: 62px;
		background: url(../img/_r4vp_icon_tpoint.png);
		background-size: 100% 100%;
	}	
	.table-header .point strong{
		position: relative;
		display: inline-block;
		line-height: 1;
	}
	.table-header .point strong:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;
		display: block;
		width: 0;
		height: 10px;
		background: #fbf422;
		z-index: 5;
	}
	.table-header .point strong i{
		position: relative;
		z-index: 10;
	}
	.table-header.on .point strong:before{
		width: 100%;
		transition: width 300ms ease;
	}


	.case-item1 .case-detail{
		display: flex;
		margin: 40px 0 0;
	}
	.case-item1 .case-detail .human{
		width: 305px;
	}
	.case-item1 .case-detail .timetable{
		width: calc(100% - 305px);
	}
	.case-item1 .table-header figure{
		display: none;
	}

	.case-item2 .case-detail{
		display: flex;
		margin: 40px 0 0;
		flex-direction: row-reverse;
	}
	.case-item2 .case-detail .human{
		width: 305px;
	}
	.case-item2 .case-detail .timetable{
		width: calc(100% - 305px);
	}
	.case-item2 .table-header figure{
		display: none;
	}



	/* time-tabel
	------------------------------*/

	.table-item{
		padding: 30px 0 0;
		border-top: 1px solid #d6d6d6;
	}
	.table-item-inner{
		position: relative;
		margin: 0 0 0 15px;
		padding: 0 0 0 25px;
	}
	.table-item-inner:before{
		content: "";
		position: absolute;
		top: 10px;
		left: 0;
		display: block;
		height: 100%;
		width: 2px;
		background: url(../img/line_dotted.png);
	}
	.table-item dl + dl{
		margin-top: 40px;
	}
	.table-item dt{
		position: relative;
		font-size: 2.4rem;
		font-weight: bold;
	}
	.table-item dt i + i{
		margin: 0 0 0 45px;
	}
	.table-item dt i + i br{
		display: none;
	}
	.table-item dt + dd{
		margin: 15px 0 0;
		padding: 15px 0 0;
		border-top: 1px solid #d6d6d6;
	}
	.table-item dd + dd{
		margin-top: 20px;
	}
	.table-item dl dd span{
		font-weight: bold;
	}
	.table-item dl dd strong{
		position: relative;
		top: -2px;
		padding: 0 5px;
		font-size: 2.7rem;
		vertical-align: middle;
	}
	.table-item dl dd .note{
		font-size: 1.5rem;
	}

	.table-item dt .point{
		position: absolute;
		top: 50%;
		right: 0;
		display: inline-block;
		padding: 0 15px;
		font-size: 3.6rem;
		font-weight: bold;
		color: #074296;
		vertical-align: middle;
		opacity: 0;
		transform: translateY(10%);
	}
	.table-item dt .point.on{
		transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1.5);
		opacity: 1;
		transform: translateY(-50%);
	}
	.table-item dt .point em{
		position: relative;
		display: inline-block;
		margin: 0 0 0 10px;
		padding: 0 0 0 42px;
		vertical-align: middle;
	}
	.table-item dt .point em:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 28px;
		height: 36px;
		background: url(../img/_r4vp_icon_tpoint.png);
		background-size: 100% 100%;
	}	
	.table-item dt .point strong{
		position: relative;
	}
	.table-item dt .point span{
		padding: 0 0 0 5px;
		font-size: 2.1rem;
	}
	.table-item .bnr img{
		width: auto;
		height: 108px;
	}
	#pt_howto_case1,
	#pt_howto_case3{
		background: #fbfaf0;
	}



	/* baloon
	------------------------------*/

	.timetable .baloon{
		position: relative;
		margin: 50px 0 0;
		border-radius: 15px;
		background: #fbf422;
		text-align: center;
		opacity: 0;
		transform: translateY(30px);
	}
	.timetable .baloon.on{
		opacity: 1;
		transform: translateY(0);
		transition: all 300ms ease;
	}

	.timetable .baloon:before{
		content: "";
		position: absolute;
		margin: auto;
		top: -19px;
		left: 0;
		right: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 12px 20px 12px;
		border-color: transparent transparent #fbf422 transparent;
	}
	.timetable .baloon .baloon-cap{
		display: inline-block;
		font-size: 2rem;
		font-weight: bold;
	}
	.timetable .baloon .point{
		display: inline-block;
		padding: 0 15px;
		font-size: 6rem;
		font-weight: bold;
		color: #074296;
		vertical-align: middle;
	}
	.timetable .baloon .point em{
		position: relative;
		display: inline-block;
		min-width: 3em;
		text-align: center;
		padding: 0 0 0 80px;
	}
	.timetable .baloon .point em:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 74px;
		height: 74px;
		border-radius: 37px;
		background: #fff url(../img/_r4vp_icon_tpoint.png) 50% 50% no-repeat;
		background-size: 36px 47px;
	}	
	.timetable .baloon .point strong{
		position: relative;
	}
	.timetable .baloon .point strong i{
		position: relative;
		z-index: 10;
	}



	/* kotsu
	------------------------------*/

	.kotsu{
		margin: 60px 0 0;
		display: flex;
		justify-content: space-between;
	}
	.kotsu-item{
		position: relative;
		padding: 25px 25px 25px;
		width: calc(50% - 15px);
		border-radius: 15px;
		background: #fff;
		box-shadow: 0 0 8px rgba(0,0,0,0.3);
	}
	.kotsu-item-inner{
		position: relative;
		padding: 0 0 80px;
		width: 100%;
		height: 100%;
	}
	.kotsu-item h4{
		position: relative;
		font-size: 2.4rem;
		font-weight: bold;
		text-align: center;
	}
	.kotsu-item h4 span i{
		position: relative;
		z-index: 10;
	}
	.kotsu-item h4 span{
		position: relative;
		display: inline-block;
		line-height: 1;
	}
	.kotsu-item h4 span:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;
		display: block;
		width: 0;
		height: 10px;
		background: #fbf422;
		z-index: 5;
	}
	.kotsu-item.on h4 span:before{
		width: 100%;
		transition: width 300ms ease;
	}

	.kotsu-item figure{
		margin: 25px auto;
		max-width: 318px;
	}
	.kotsu-item .btn{
		position: absolute;
		width: 100%;
		bottom: 0;
	}
	.kotsu-item p span{
		font-weight: bold;
	}
	.kotsu-item p span strong{
		position: relative;
		top: -2px;
		padding: 0 5px;
		font-size: 2.7rem;
		vertical-align: middle;
	}


/* start
------------------------------------------------------------------*/

	#pt_howto_start-section{
		padding: 0;
		background: none;
	}
	
/* others
------------------------------------------------------------------*/

	#pt_howto_others-section{
		padding: 40px 0;
		background: #dde7f6 url(../img/_r4vp_bg_t.png) 0 0 repeat;
	}

	/* step
	------------------------------*/

	.step{
		display: flex;
		justify-content: space-between;
	}
	#pt_howto_start-section .step{
		display: flex;
		flex-wrap: wrap;
	}
	#pt_howto_start-section .step .step-item{
		margin-bottom: 30px;
	}

	#pt_howto_start-section .step .step-item:last-child,
	#pt_howto_start-section .step .step-item:nth-last-child(2){
		margin-bottom: 0px;
	}

	.step-item{
		position: relative;
		padding: 25px 25px 25px;
		width: calc(50% - 15px);
		border-radius: 15px;
		background: #fff;
		box-shadow: 0 0 8px rgba(0,0,0,0.3);
	}
	.step-item-inner{
		position: relative;
		padding: 0 0 130px;
		width: 100%;
		height: 100%;
	}
	.step-item:nth-of-type(3) .step-item-inner, .step-item:nth-of-type(4) .step-item-inner{
		padding: 0 0 88px;
	}
	#pt_howto_others-section .step-item-inner{
		position: relative;
		padding: 0 0 60px;
		width: 100%;
		height: auto;
	}
	.step-item h4{
		position: relative;
		font-size: 4rem;
		text-align: center;
		z-index: 10;
		color: #e8244b;
	}
	.step-item h4 strong{
		margin: 0 0 0 5px;
		position: relative;
		font-size: 8rem;
	}
	.step-item p{
		display: table;
		text-align: center;
		width: 100%;
		font-weight: bold;
		font-size: 2.4rem;
	}
	#pt_howto_others-section .step-item p i{
		display: table-cell;
		text-align: left;
		height: 4.5em;
		vertical-align: top;
	}
	.step-item p i{
		display: table-cell;
		text-align: center;
		height: 4.5em;
		vertical-align: middle;
	}

	.step-item figure{
		margin: 40px auto 20px;
		max-width: 318px;
	}
	.step-item ul{
		position: absolute;
		width: 100%;
		bottom: 0;
	}
	.step-item ul li + li{
		margin-top: 20px;
	}
	.step-item p span{
		font-weight: bold;
	}
	.step-item p span strong{
		position: relative;
		top: -2px;
		padding: 0 5px;
		font-size: 2.7rem;
		vertical-align: middle;
	}


	/* baloon
	------------------------------*/

	.cp-bnr .baloon{
		position: relative;
		margin: 50px auto 0;
		padding: 20px 0;
		width: 590px;
		border-radius: 15px;
		background: #fbf422;
		text-align: center;
	}
	.cp-bnr .baloon:before{
		content: "";
		position: absolute;
		margin: auto;
		bottom: -19px;
		left: 0;
		right: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 12px 0 12px;
		border-color: #fbf422 transparent transparent transparent;
	}
	.cp-bnr .baloon .baloon-cap{
		display: inline-block;
		font-size: 5rem;
		font-weight: bold;
	}
	.cp-bnr .baloon .baloon-cap span{
		display: block;
		font-size: 2rem;
	}
	.cp-bnr .baloon .baloon-cap strong{
		color: #074296;
	}
	.cp-bnr-list{
		margin: 50px 0 0;
	}
	.cp-bnr-list li + li{
		margin-top: 30px;
	}
	.cp-bnr-list a:hover{
		transition: opacity 300ms ease;
		opacity: 0.7;
	}



/* basic
------------------------------------------------------------------*/
	#pt_howto_basic{
		padding: 0 0 60px;
	}
	#pt_howto_basic .sec-contents{
		margin: auto;
		width: 620px;
	}
	.col-basic > a{
		position: relative;
		display: block;
		padding: 25px 0 25px 75px;
		border-bottom: 1px solid #d6d6d6;
	}
	.col-basic > a strong{
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		width: 45px;
		height: 45px;
		line-height: 45px;
		border-radius: 25px;
		border: 1px solid #e8244b;
		font-size: 2.8rem;
		font-weight: bold;
		text-align: center;
		color: #fff;
		background: #e8244b;
	}
	.col-basic > a span{
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		right: 20px;
		bottom: 0;
		width: 20px;
		height: 20px;
	}
	.col-basic > a span i{
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: #e8244b;
		transition: transform 300ms ease;
	}
	.col-basic > a span i:nth-child(1){
		width: 20px;
		height: 4px;
	}
	.col-basic > a span i:nth-child(2){
		width: 4px;
		height: 20px;
	}
	.col-basic > a.on i:nth-child(2){
		transform: rotate(-90deg);
	}
	.col-basic > a:hover{
		transition: opacity 300ms ease;
		opacity: 0.7;
	}

	.basic-item{
		display: none;
		padding: 25px 0 60px;
	}
	.basic-item p strong{
		position: relative;
		top: -2px;
		font-size: 3rem;
		color: #074296;
		vertical-align: middle;
		font-weight: bold;
	}
	.col-box,
	.col-box{
		margin-top: 40px;
	}
	.col-box figure{
		margin: auto;
		max-width: 402px;
	}
	.col-box .logos{
		display: flex;
		flex-wrap: wrap;
	}
	.col-box .logos figure{
		padding: 0 35px;
		width: calc(100% / 4);
	}
	.basic-item .btn{
		margin-top: 25px;
	}
	.col-box .icons ul{
		display: flex;
		margin: 0 -30px;
		flex-wrap: wrap;
	}
	.col-box .icons li{
		padding: 0 30px;
		width: calc(100% / 4);
	}
	.col-box .icons li:nth-child(n+5){
		margin-top: 25px;
	}
	.col-box .icons figure img{
		border-radius: 120px;
		overflow: hidden;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}
	.col-box .icons figure span{
		display: block;
		padding: 10px 0 0;
		font-size: 1.5rem;
		text-align: center;
		color: #074296;
		line-height: 1.3;
		font-weight: bold;
	}
	.col-box .note{
		margin-top: 30px;
		font-size: 1.5rem;
	}
	.col-box h3{
		position: relative;
		margin: 0 0 40px;
		display: inline-block;
		font-weight: bold;
		font-size: 2.1rem;
	}
	.col-box h3:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;
		display: block;
		height: 10px;
		width: 100%;
		background: #fbf422;
		z-index: 5;
	}
	.col-box h3 i{
		position: relative;
		z-index: 10;
	}
	.col-box .btn-list{
		display: flex;
		justify-content: space-between;
	}
	.col-box .btn-list .btn{
		width: calc(50% - 7px);
	}

/* sns
------------------------------------------------------------------*/

	#pt_howto_sns{
		background: #f1f1f1;
		padding: 0 0 60px;
	}
	.sns-list{
		display: flex;
		margin: 0 -10px;
	}
	.sns-item{
		padding: 0 10px;
		width: calc(100% / 3);
	}
	.sns-item figure{
		margin: 0 auto 40px;
		width: 97px;
	}
	.sns-item p{
		text-align: center;
		font-weight: bold;
	}
	.sns-item .btn{
		margin-top: 20px;
	}



/* btn
------------------------------------------------------------------*/

	.btn{

	}
	.btn a{
		position: relative;
		display: block;
		width: 100%;
		height: 55px;
		border-radius: 30px;
	}
	.begin .btn a{
		height: 53px;
	}
	#pt_howto_begin-section .begin .btn a{
		max-width: 615px;
		width: 100%;
		height: 53px;
		margin: 0 auto;
	}
	.btn a:hover{
		opacity: 0.7;
		transition: opacity 300ms ease;
	}
	.btn a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 20px;
		bottom: 0;
		display: block;
		width: 10px;
		height: 15px;
	}
	.btn a i{
		position: absolute;
		top: 50%;
		width: 100%;
		text-align: center;
		transform: translateY(-50%);
	}

	.btn-wh a{
		background: #fff;
		color: #e8244b;
		font-weight: bold;
		border: 3px solid #e8244b;
	}
	.btn-wh a:after{
		background: url(../img/arrow_r_rd.png);
		background-size: 100% 100%;
	}
	.btn-rd a{
		background: #e8244b;
		color: #fff;
		font-weight: bold;
		border: 3px solid #e8244b;
	}
	.btn-rd a:after{
		background: url(../img/arrow_r_wh.png);
		background-size: 100% 100%;
	}

	.btn-bk a{
		background: #fff;
		color: #333;
		font-weight: bold;
		border: 3px solid #333;
	}
	.btn-bk a:after{
		background: url(../img/arrow_r_bk.png);
		background-size: 100% 100%;
	}


}


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

	.timetable .baloon .baloon-cap br{
		display: none;
	}

}

@media screen and (min-width: 769px) and (max-width: 900px) {



	#case-nav .cap {
		font-size: 2rem;
	}
	.table-item dt i + i {
		display: block;
		margin: 1px 0 0;
	}
	.timetable .baloon{
		padding: 15px 0;
	}
	.timetable .baloon .baloon-cap{
		font-size: 1.7rem;
	}
	.timetable .baloon .baloon-cap span{
		display: inline-block;
		vertical-align: middle;
		text-align: left;
	}
	.timetable .baloon .point {
		font-size: 5rem;
	}

	.kotsu-item h4 {
		font-size: 2rem;
	}
	.sns-item p {
		font-size: 1.6rem;
	}





}




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


	.pc{
		display: none;
	}
	.ignore-sp{
		display: none !important;
	}

	#header{
		position: relative;
		z-index: 10;
		box-shadow: 0 0 4px rgba(0,0,0,0.3);
	}
	#wrap{
		position: relative;
	}
	#education{
		position: relative;
		font-size: 1.2rem;
	}

	.pagetop{
		bottom: 0;
		right: 10px;
		z-index: 500;
	}

	.pagetop{
		width: 40px;
		height: 40px;
		bottom: 10px;
		right: 10px;
		z-index: 500;
		transition: transform 300ms ease;
	}
	.pagetop.on{
		transform: translateY(-62px);
	}



/* kv
------------------------------------------------------------------*/
	
	.kv{
		position: relative;
		overflow: hidden;
		background: #fffbb7 url(../img/kv_bg.png) 50% 100% repeat-x;
	}
	.kv-inner{
		position: relative;
		margin: auto;
		width: 750px;
		height: 1000px;
		transform-origin: top left;
	}
	.kv-inner h1{
		position: absolute;
		top: 20px;
		left: 0;
		width: 100%;
		text-align: center;
		z-index: 20;
	}
	.kv-obj{
		position: relative;
		text-align: center;
		height: 100%;
		z-index: 10;
	}

	.obj-human-group{
		position: absolute;
		width: 100%;
		bottom: 0;
		text-align: center;
	}



	/* obj-line
	------------------------------*/

	.obj-human1{
		position: absolute;
		top: 240px;
		width: 100%;
		text-align: center;
	}

	.obj-human1 span{
		position: absolute;
	}

	.obj-human1 span em{
		position: relative;
		display: inline-block;
		width: 90px;
		height: 4px;
		border-radius: 2px;
		background: #004098;
	}
	.obj-human1 span.l-1,
	.obj-human1 span.l-2{
		transform: translateX(100px);
		opacity: 0;
		transition: opacity 300ms cubic-bezier(0.87, 0, 0.13, 1),transform 500ms cubic-bezier(0.87, 0, 0.13, 1);
	}
	.obj-human1 span.r-1,
	.obj-human1 span.r-2{
		transform: translateX(-100px);
		opacity: 0;
		transition: opacity 300ms cubic-bezier(0.87, 0, 0.13, 1),transform 500ms cubic-bezier(0.87, 0, 0.13, 1);
	}
	.obj-human1.on span.l-1,
	.obj-human1.on span.l-2{
		transform: translateX(0);
		opacity: 1;
	}
	.obj-human1.on span.r-1,
	.obj-human1.on span.r-2{
		transform: translateX(0);
		opacity: 1;
	}



	.obj-human1 span.l-1 em:before,
	.obj-human1 span.l-2 em:before{
		content: "";
		position: absolute;
		top: 50%;
		left: -18px;
		margin-top: -4px;
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #004098;
	}
	.obj-human1 span.r-1 em:before,
	.obj-human1 span.r-2 em:before{
		content: "";
		position: absolute;
		top: 50%;
		right: -18px;
		margin-top: -4px;
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #004098;
	}

	.obj-human1 span.l-1{
		top: 50%;
		left: 50%;
		margin: -80px 0 0 -250px;
	}
	.obj-human1 span.l-2{
		top: 50%;
		left: 50%;
		margin: 50px 0 0 -260px;
	}

	.obj-human1 span.r-1{
		top: 50%;
		right: 50%;
		margin: -80px -250px 0 0;
	}
	.obj-human1 span.r-2{
		top: 50%;
		right: 50%;
		margin: 50px -260px 0 0;
	}

	.obj-human1 span.l-1 em{
		transform: rotate(20deg);
	}
	.obj-human1 span.l-2 em{
		transform: rotate(-20deg);
	}

	.obj-human1 span.r-1 em{
		transform: rotate(-20deg);
	}
	.obj-human1 span.r-2 em{
		transform: rotate(20deg);
	}


	/* obj-cube
	------------------------------*/

	#obj-cube{
		display: none;
	}
	#obj-cube-sp{
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#obj-cube-sp span{
		position: absolute;
		opacity: 0;
		transition: opacity 300ms cubic-bezier(0.87, 0, 0.13, 1),transform 1000ms cubic-bezier(0.87, 0, 0.13, 1);
	}
	#obj-cube-sp span.l-1{
		display: block;
		margin: -43px 0 0 -42px;
		width: 84px;
		height: 87px;
		background: url(../img/_r4vp_cube_l_1.png) no-repeat;
		background-size: 100%;
	}
	#obj-cube-sp span.l-2{
		display: block;
		margin: -33px 0 0 -32px;
		width: 64px;
		height: 66px;
		background: url(../img/_r4vp_cube_l_2.png) no-repeat;
		background-size: 100%;
	}
	#obj-cube-sp span.r-1{
		display: block;
		margin: -43px 0 0 -43px;
		width: 86px;
		height: 85px;
		background: url(../img/_r4vp_cube_r_1.png) no-repeat;
		background-size: 100%;
	}
	#obj-cube-sp span.r-2{
		display: block;
		margin: -30px 0 0 -34px;
		width: 68px;
		height: 63px;
		background: url(../img/_r4vp_cube_r_2.png) no-repeat;
		background-size: 100%;
	}
	#obj-cube-sp span.on{
		opacity: 1;
	}
	#obj-cube-sp.on{
		opacity: 1;
	}

	/* obj-star
	------------------------------*/

	#obj-star{
		display: none;
	}

	#obj-star-sp{
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#obj-star-sp span{
		position: absolute;
		display: block;
		margin: -10px 0 0 -10px;
		width: 21px;
		height: 21px;
		background: url(../img/obj_star.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(0);
		opacity: 0;
		transition: opacity 300ms cubic-bezier(0.87, 0, 0.13, 1),transform 1000ms cubic-bezier(0.87, 0, 0.13, 1);
	}
	#obj-star-sp span.on{
		transform: scale(1);
		opacity: 1;
	}



	/* nav
	------------------------------*/

	#gnav{
		position: relative;
		width: 100%;
		z-index: 50;
	}
	#gnav .gnav-inner{
		position: relative;
		margin: auto;
		max-width: 960px;
	}
	#gnav ul{
		position: relative;
		padding: 0 25px 25px;
	}
	#gnav li + li{
		margin-top: 10px;
	}
	#gnav li a{
		position: relative;
		display: block;
		height: 40px;
		width: 100%;
		border-radius: 40px;
		text-align: center;
		background: #e8244b;
	}
	#gnav li a br{
		display: none;
	}
	#gnav li a:hover{
		opacity: 0.7;
		transition: opacity 400ms ease;
	}
	#gnav li a:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 5px;
		display: block;
		width: 30px;
		height: 30px;
		background: url(../img/icon_check.png);
		background-size: 100% 100%;
	}
	#gnav li a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 20px;
		display: block;
		width: 10px;
		height: 7px;
		background: url(../img/arrow_down_wh.png);
		background-size: 100% 100%;
	}
	#gnav li a span{
		position: absolute;
		display: block;
		top: 50%;
		width: 100%;
		text-align: center;
		color: #fff;
		font-weight: bold;
		transform: translateY(-50%);
	}





/* contents
------------------------------------------------------------------*/

	.sec-inner{
		margin: auto;
		padding: 0 25px;
		max-width: 980px;
	}
	.case-inner{
		margin: auto;
		padding: 0 25px;
		max-width: 980px;		
	}


	#main .sec-header{
		position: relative;
		padding: 30px 0;
		text-align: center;
	}

	.pt_howto_begin-text{
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 30px;
	}

	#main .sec-header span{
		position: relative;
		margin: auto;
		display: block;
		width: 30px;
		height: 35px;
		background: url(../img/icon_leaf.png);
		background-size: 100% 100%;
		opacity: 0;
		transform: translateY(100%);
	}
	#main .sec-header.begin span{
		position: relative;
		margin: auto;
		display: block;
		width: 30px;
		height: 35px;
		background: url(../img/_r4vp_icon_tpoint.png);
		background-size: 100% 100%;
		opacity: 0;
		transform: translateY(100%);
	}
	#main .sec-header.vpoint span{
		position: relative;
		margin: auto;
		display: block;
		width: 30px;
		height: 35px;
		background: url(../img/202503/icon_cube.png);
		background-size: 100% 100%;
		opacity: 0;
		transform: translateY(100%);
	}
	#main .sec-header.on span{
		opacity: 1;
		transform: translateY(0);
		transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);;
	}


	#main .sec-header span:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: -25px;
		display: block;
		width: 16px;
		height: 32px;
		background: url(../img/obj_line_l.png);
		background-size: 100% 100%;
	}
	#main .sec-header span:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: -25px;
		display: block;
		width: 16px;
		height: 32px;
		background: url(../img/obj_line_r.png);
		background-size: 100% 100%;
	}
	#main .sec-header i{
		display: block;
		padding: 15px 0 0;
		font-size: 1.8rem;
		font-weight: bold;
	}
	#main .sec-header h2{
		font-size: 3rem;
		font-weight: bold;
		color: #e8244b;
	}
	#main .sec-header + .sec-contents{

	}


/* case-nav
------------------------------------------------------------------*/


	#case-nav ul{
		display: flex;
		margin: 0 -5px;
	}
	#case-nav ul li{
		padding: 0 5px;
		width: calc(100% / 3);
	}
	#case-nav ul li a{
		position: relative;
		display: block;
		padding: 10px 5px 30px;
		width: 100%;
		border-radius: 7px;
		border: 2px solid #e8244b;
		text-align: center;
	}
	#case-nav ul li a:hover{
		opacity: 0.7;
		transition: opacity 400ms ease;
	}
	#case-nav ul li a:after{
		content: "";
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 12px;
		display: block;
		width: 10px;
		height: 6px;
		background: url(../img/arrow_down_rd.png);
		background-size: 100% 100%;
	}
	#case-nav .num{
		font-size: 1.7rem;
		color: #e8244b;
		line-height: 1;
	}
	#case-nav .num strong{
		font-size: 3.4rem;
	}
	#case-nav .cap{
		padding: 10px 0 0;
		font-weight: bold;
		font-size: 1.6rem;
	}
	#case-nav .point{
		font-size: 1.9rem;
		font-weight: bold;
		color: #074296;
	}
	#case-nav .point span{
		padding: 0 0 0 5px;
		font-size: 1.2rem;
	}
	#case-nav .point em{
		position: relative;
		display: inline-block;
		padding: 0 0 0 25px;
	}
	#case-nav .point em:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 16px;
		height: 20px;
		background: url(../img/_r4vp_icon_tpoint.png);
		background-size: 100% 100%;
	}	
	#case-nav .point strong{
		position: relative;
		display: inline-block;
		line-height: 1;
	}
	#case-nav .point strong:before{
		content: "";
		position: absolute;
		bottom: -2px;
		display: block;
		width: 0;
		height: 10px;
		background: #fbf422;
		z-index: 5;
	}
	#case-nav.on .point strong:before{
		width: 100%;
		transition: width 300ms ease;
	}

	#case-nav .point strong i{
		position: relative;
		z-index: 10;
	}

	/* case-header
	------------------------------*/
	.case-header{
		text-align: center;
		overflow: hidden;
	}
	.case-header .case-title{
		position: relative;
		padding: 0 15px;
		display: inline-block;
		color: #e8244b;
	}
	.case-header .case-title:after,
	.case-header .case-title:before{
		content: "";
		position: absolute;
		margin: auto;
		bottom: 25px;
		display: block;
		width: 1000px;
		height: 2px;
		background: #e8244b;
	}
	.case-header .case-title:after{
		left: 100%;
	}
	.case-header .case-title:before{
		right: 100%;
	}
	.case-header .case-title h3{
		font-size: 2.5rem;
		line-height: 1;
	}
	.case-header .case-title h3 strong{
		margin: 0 0 0 5px;
		font-size: 5rem;
	}
	.case-header .case-title span{
		font-weight: bold;
	}
	.case{
		margin: 30px 0 0;
	}
	.case-item{
		padding: 30px 0;
	}
	.case-detail{
		position: relative;
	}
	.case-detail figure.human {
		position: relative;
	}
	.case-detail figure.human span{
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		max-width: 960px;
		width: 100%;
	}
	.case-item1 .case-detail figure.human img{
		position: absolute;
		left: 0;
	}
	.case-item2 .case-detail figure.human img{
		position: absolute;
		right: 0;
	}


	/* table-header
	------------------------------*/

	.table-header h4{
		padding: 0 0 20px;
		font-size: 1.6rem;
		font-weight: bold;
		border-bottom: 1px solid #d6d6d6;
	}
	.table-header .point{
		display: inline-block;
		padding: 0 10px 0 0;
		font-size: 4rem;
		font-weight: bold;
		color: #074296;
	}
	.table-header .point em{
		position: relative;
		display: inline-block;
		padding: 0 0 0 40px;
	}
	.table-header .point em:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 32px;
		height: 41px;
		background: url(../img/_r4vp_icon_tpoint.png);
		background-size: 100% 100%;
	}	
	.table-header .point strong{
		position: relative;
		display: inline-block;
		line-height: 1;
	}
	.table-header .point strong:before{
		content: "";
		position: absolute;
		bottom: -2px;
		left: 0;
		display: block;
		width: 0;
		height: 10px;
		background: #fbf422;
		z-index: 5;
	}
	.table-header.on .point strong:before{
		width: 100%;
		transition: width 300ms ease;
	}


	.table-header .point strong i{
		position: relative;
		z-index: 10;
	}
	.table-header h4 span{
		display: inline-block;
	}
	.table-header h4 > span{
		display: inline-block;
		text-align: left;
	}
	.case-item1 .case-detail{
		position: relative;
		margin: 40px 0 0;
	}
	.case-item .table-header figure{
		opacity: 0;
		transform: translateY(50px);
	}
	.case-item .table-header.on figure{
		opacity: 1;
		transform: translateY(0);
		transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1.5);
	}

	.case-item1 .case-detail .human{
		display: none;
	}
	#pt_howto_life-section .case-item1 .table-header{
		position: relative;
		padding: 0 0 0 120px;
		text-align: right;
	}
	.case-item1 .table-header figure{
		position: absolute;
		width: 120px;
		left: 0;
		top: -10px;
	}

	.case-item2 .case-detail{
		margin: 40px 0 0;
	}
	.case-item2 .case-detail .human{
		display: none;
	}
	#pt_howto_life-section .case-item2 .table-header{
		position: relative;
		padding: 0 120px 0 0;
	}
	.case-item2 .table-header figure{
		position: absolute;
		width: 120px;
		right: 0;
		top: -10px;
	}


	/* time-tabel
	------------------------------*/

	.table-item{
		padding: 30px 0 0;
	}
	.table-item-inner{
		position: relative;
		margin: 0 0 0 7px;
		padding: 0 0 0 16px;
	}
	.table-item-inner:before{
		content: "";
		position: absolute;
		top: 10px;
		left: 0;
		display: block;
		height: 100%;
		width: 1px;
		background: url(../img/line_dotted.png);
		background-size: 100% auto;
	}
	.table-item dl + dl{
		margin-top: 40px;
	}
	.table-item dt{
		position: relative;
		font-size: 1.5rem;
		font-weight: bold;
	}
	.table-item dt i{
		display: inline-block;
		vertical-align: middle;
	}
	.table-item dt i + i{
		margin: 0 0 0 20px;
	}
	.table-item dt + dd{
		margin: 10px 0 0;
		padding: 10px 0 0;
		border-top: 1px solid #d6d6d6;
	}
	.table-item dd + dd{
		margin-top: 12px;
	}
	.table-item dl dd span{
		font-weight: bold;
	}
	.table-item dl dd strong{
		position: relative;
		top: -1px;
		padding: 0 5px;
		font-size: 1.8rem;
		vertical-align: middle;
	}
	.table-item dl dd .note{
		font-size: 1rem;
	}
	.table-item dl dd .bnr + .note{
		display: inline-block;
		margin-top: 10px;
	}
	.table-item dt .point{
		position: absolute;
		top: 50%;
		right: 0;
		display: inline-block;
		font-size: 2.4rem;
		font-weight: bold;
		color: #074296;
		opacity: 0;
		vertical-align: middle;
		transform: translateY(10%);
	}
	.table-item dt .point.on{
		transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1.5);
		opacity: 1;
		transform: translateY(-50%);
	}
	.table-item dt .point em{
		position: relative;
		display: inline-block;
		margin: 0 0 0 10px;
		padding: 0 0 0 28px;
		vertical-align: middle;
	}
	.table-item dt .point em:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 18px;
		height: 24px;
		background: url(../img/_r4vp_icon_tpoint.png);
		background-size: 100% 100%;
	}	
	.table-item dt .point strong{
		position: relative;
	}
	.table-item dt .point span{
		padding: 0 0 0 5px;
		font-size: 1.4rem;
	}
	#pt_howto_case1,
	#pt_howto_case3{
		background: #fbfaf0;
	}



	/* baloon
	------------------------------*/

	.timetable .baloon{
		position: relative;
		margin: 40px 0 0;
		padding: 10px 0;
		border-radius: 7px;
		background: #fbf422;
		text-align: center;
		opacity: 0;
		transform: translateY(30px);
	}
	.timetable .baloon.on{
		opacity: 1;
		transform: translateY(0);
		transition: all 300ms ease;
	}

	.timetable .baloon:before{
		content: "";
		position: absolute;
		margin: auto;
		top: -11px;
		left: 0;
		right: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 8px 12px 8px;
		border-color: transparent transparent #fbf422 transparent;
	}
	.timetable .baloon .baloon-cap{
		display: inline-block;
		font-size: 1.3rem;
		font-weight: bold;
	}
	.timetable .baloon .baloon-cap span{
		display: inline-block;
		vertical-align: middle;
		text-align: left;
	}
	.timetable .baloon .point{
		display: inline-block;
		padding: 0 5px;
		font-size: 4rem;
		font-weight: bold;
		color: #074296;
		vertical-align: middle;
	}
	.timetable .baloon .point em{
		position: relative;
		display: inline-block;
		min-width: 3em;
		text-align: center;
		padding: 0 0 0 55px;
	}
	.timetable .baloon .point em:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 45px;
		height: 45px;
		border-radius: 37px;
		background: #fff url(../img/_r4vp_icon_tpoint.png) 50% 50% no-repeat;
		background-size: 22px 28px;
	}	
	.timetable .baloon .point strong{
		position: relative;
	}
	.timetable .baloon .point strong i{
		position: relative;
		z-index: 10;
	}



	/* kotsu
	------------------------------*/

	.kotsu{
		margin: 25px 0 0;
	}
	.kotsu-item{
		position: relative;
		padding: 20px 15px;
		border-radius: 7px;
		background: #fff;
		box-shadow: 0 0 4px rgba(0,0,0,0.3);
	}
	.kotsu-item + .kotsu-item{
		margin-top: 25px;
	}
	.kotsu-item-inner{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.kotsu-item h4{
		position: relative;
		font-size: 1.6rem;
		font-weight: bold;
		text-align: center;
	}
	.kotsu-item h4 span i{
		position: relative;
		z-index: 10;
	}
	.kotsu-item h4 span{
		position: relative;
		display: inline-block;
		line-height: 1;
	}
	.kotsu-item h4 span:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: -3px;
		display: block;
		width: 0;
		height: 6px;
		background: #fbf422;
		z-index: 5;
	}
	.kotsu-item.on h4 span:before{
		width: 100%;
		transition: width 300ms ease;
	}
	.kotsu-item figure{
		margin: 25px auto;
		max-width: 318px;
	}
	.kotsu-item .btn{
		margin-top: 20px;
	}
	.kotsu-item p span{
		font-weight: bold;
	}
	.kotsu-item p span strong{
		position: relative;
		top: -1px;
		padding: 0 2px;
		font-size: 1.8rem;
		vertical-align: middle;
	}


/* start
------------------------------------------------------------------*/

	#pt_howto_start-section{
		padding: 0 0 40px;
		background: none;
		background-size: 450px 115px;
	}

	/* others
------------------------------------------------------------------*/

	#pt_howto_others-section{
		padding: 40px 0;
		background: #dde7f6 url(../img/_r4vp_bg_t.png) 0 0 repeat;
		background-size: 450px 115px;
	}

	#pt_howto_others-section .step-item{
		padding: 20px 15px;
	}
	#pt_howto_others-section .step-item .sec-header{
		padding: 0;
	}
	#pt_howto_others-section .step-item .step-item-inner{
		padding: 0;
	}

	#pt_howto_others-section .step-item p {
		margin-bottom: 30px;
	}
	#pt_howto_others-section .step-item p i{
		text-align: left;
	}

	/* step
	------------------------------*/

	.step-item + .step-item{
		margin-top: 25px;
	}
	.step-item{
		position: relative;
		padding: 20px 15px;
		border-radius: 7px;
		background: #fff;
		box-shadow: 0 0 4px rgba(0,0,0,0.3);
	}
	.step-item-inner{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.step-item h4{
		position: relative;
		font-size: 2.7rem;
		text-align: center;
		line-height: 1;
		z-index: 10;
		color: #e8244b;
	}
	.step-item h4 strong{
		margin: 0 0 0 5px;
		position: relative;
		font-size: 5.3rem;
	}
	.step-item p{
		margin-top: 20px;
		display: table;
		text-align: center;
		width: 100%;
		font-weight: bold;
		font-size: 1.6rem;
	}
	.step-item p i{
		display: table-cell;
		text-align: center;
		height: 4.5em;
		vertical-align: middle;
	}

	.step-item figure{
		margin: 25px auto;
		max-width: 318px;
	}
	.step-item ul li + li{
		margin-top: 10px;
	}
	.step-item p span{
		font-weight: bold;
	}
	.step-item p span strong{
		position: relative;
		top: -2px;
		padding: 0 5px;
		font-size: 2.7rem;
		vertical-align: middle;
	}


	/* baloon
	------------------------------*/

	.cp-bnr .baloon{
		position: relative;
		margin: 20px auto 0;
		padding: 10px 0;
		border-radius: 7px;
		background: #fbf422;
		text-align: center;
	}
	.cp-bnr .baloon:before{
		content: "";
		position: absolute;
		margin: auto;
		bottom: -11px;
		left: 0;
		right: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 12px 8px 0 8px;
		border-color: #fbf422 transparent transparent transparent;
	}
	.cp-bnr .baloon .baloon-cap{
		display: inline-block;
		font-size: 2.6rem;
		font-weight: bold;
	}
	.cp-bnr .baloon .baloon-cap span{
		display: block;
		font-size: 1.3rem;
	}
	.cp-bnr .baloon .baloon-cap strong{
		color: #074296;
	}
	.cp-bnr-list{
		margin: 25px 0 0;
	}
	.cp-bnr-list li + li{
		margin-top: 15px;
	}



/* basic
------------------------------------------------------------------*/
	#pt_howto_basic{
		padding: 0 0 35px;
	}
	#pt_howto_basic .sec-contents{
		margin: auto;
	}
	.col-basic > a{
		position: relative;
		display: block;
		padding: 15px 0 15px 50px;
		font-size: 1.4rem;
		border-bottom: 1px solid #d6d6d6;
	}
	.col-basic > a strong{
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius: 25px;
		border: 1px solid #e8244b;
		font-size: 1.3rem;
		font-weight: bold;
		text-align: center;
		color: #fff;
		background: #e8244b;
	}
	.col-basic > a span{
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		right: 5px;
		bottom: 0;
		width: 13px;
		height: 13px;
	}
	.col-basic > a span i{
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: #e8244b;
		transition: transform 300ms ease;
	}
	.col-basic > a span i:nth-child(1){
		width: 13px;
		height: 3px;
	}
	.col-basic > a span i:nth-child(2){
		width: 3px;
		height: 13px;
	}
	.col-basic > a.on i:nth-child(2){
		transform: rotate(-90deg);
	}

	.basic-item{
		display: none;
		padding: 20px 0 30px;
	}
	.basic-item p strong{
		position: relative;
		top: -1px;
		font-size: 2rem;
		color: #074296;
		vertical-align: middle;
		font-weight: bold;
	}
	.col-box,
	.col-box{
		margin-top: 25px;
	}
	.col-box figure{
		margin: auto;
		max-width: 250px;
	}
	.col-box .logos{
		display: flex;
		flex-wrap: wrap;
	}
	.col-box .logos figure{
		padding: 0 18px;
		width: calc(100% / 4);
	}
	.basic-item .btn{
		margin-top: 25px;
	}
	.col-box .icons ul{
		display: flex;
		margin: 0 -8px;
		flex-wrap: wrap;
	}
	.col-box .icons li{
		padding: 0 8px;
		width: calc(100% / 4);
	}
	.col-box .icons li:nth-child(n+5){
		margin-top: 25px;
	}
	.col-box .icons figure img{
		border-radius: 120px;
		overflow: hidden;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}
	.col-box .icons figure span{
		display: block;
		padding: 10px 0 0;
		font-size: 1rem;
		text-align: center;
		color: #074296;
		line-height: 1.3;
		font-weight: bold;
	}
	.col-box .note{
		margin-top: 15px;
		font-size: 1rem;
	}
	.col-box h3{
		position: relative;
		margin: 0 0 20px;
		display: inline-block;
		font-weight: bold;
		font-size: 1.4rem;
	}
	.col-box h3:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;
		display: block;
		height: 10px;
		width: 100%;
		background: #fbf422;
		z-index: 5;
	}
	.col-box h3 i{
		position: relative;
		z-index: 10;
	}
	.col-box .btn-list li + li{
		margin-top: 10px;
	}


/* sns
------------------------------------------------------------------*/

	#pt_howto_sns{
		background: #f1f1f1;
		padding: 0 0 35px;
	}
	.sns-item{
		position: relative;
		padding: 0 0 0 75px;
	}
	.sns-item + .sns-item{
		margin-top: 20px;
	}
	.sns-item figure{
		position: absolute;
		left: 0;
		width: 65px;
	}
	.sns-item p{
		font-weight: bold;
	}
	.sns-item .btn{
		margin-top: 10px;
	}



/* btn
------------------------------------------------------------------*/

	.btn{

	}
	.btn a{
		position: relative;
		display: block;
		width: 100%;
		height: 40px;
		border-radius: 30px;
	}
	.begin .btn a{
		height: 53px;
	}
	.btn a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 10px;
		bottom: 0;
		display: block;
		width: 6px;
		height: 10px;
	}
	.btn a i{
		position: absolute;
		top: 50%;
		width: 100%;
		text-align: center;
		transform: translateY(-50%);
	}

	.btn-wh a{
		background: #fff;
		color: #e8244b;
		font-weight: bold;
		border: 2px solid #e8244b;
	}
	.btn-wh a:after{
		background: url(../img/arrow_r_rd.png);
		background-size: 100% 100%;
	}
	.btn-rd a{
		background: #e8244b;
		color: #fff;
		font-weight: bold;
		border: 2px solid #e8244b;
	}
	.btn-rd a:after{
		background: url(../img/arrow_r_wh.png);
		background-size: 100% 100%;
	}

	.btn-bk a{
		background: #fff;
		color: #333;
		font-weight: bold;
		border: 2px solid #333;
	}
	.btn-bk a:after{
		background: url(../img/arrow_r_bk.png);
		background-size: 100% 100%;
	}



}

@media screen and (max-width: 374px) {

	#gnav ul {
	    padding: 0 15px 25px;
	}
	#gnav li a {
		font-size: 1.1rem;
	}	
	.sec-inner{
		margin: auto;
		padding: 0 15px;
	}
	.case-inner{
		margin: auto;
		padding: 0 15px;
	}


	#case-nav ul li a{
		position: relative;
		display: block;
		padding: 10px 5px 30px;
		width: 100%;
		border-radius: 7px;
		border: 2px solid #e8244b;
		text-align: center;
	}
	#case-nav ul li a:hover{
		opacity: 0.7;
		transition: opacity 400ms ease;
	}
	#case-nav ul li a:after{
		content: "";
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		bottom: 12px;
		display: block;
		width: 10px;
		height: 6px;
		background: url(../img/arrow_down_rd.png);
		background-size: 100% 100%;
	}
	#case-nav .num{
		font-size: 1.5rem;
	}
	#case-nav .num strong{
		font-size: 3.2rem;
	}
	#case-nav .cap{
		font-size: 1.4rem;
	}
	#case-nav .point{
		font-size: 1.7rem;
	}
	#case-nav .point span{
		font-size: 1rem;
	}
	#case-nav .point em{
		padding: 0 0 0 20px;
	}


	#main .sec-header i{
		font-size: 1.6rem;
	}
	#main .sec-header h2{
		font-size: 2.6rem;
	}

	#pt_howto_life-section .case-item1 .table-header{
		padding: 0 0 0 85px;
	}
	.case-item1 .table-header figure{
		width: 85px;
		left: 0;
		top: -5px;
	}
	#pt_howto_life-section .case-item2 .table-header{
		position: relative;
		padding: 0 85px 0 0;
	}
	.case-item2 .table-header figure{
		width: 85px;
		right: 0;
		top: -5px;
	}

	.timetable .baloon .baloon-cap{
		font-size: 1.2rem;
	}
	.timetable .baloon .point{
		font-size: 3rem;
	}
	.table-item dt {
	    position: relative;
	    font-size: 1.3rem;
	    font-weight: bold;
	}
	.table-item dt i + i {
	    margin: 0 0 0 15px;
	}
	.table-item dt .point {
	    font-size: 2.2rem;
	}
	.table-item dt .point em {
	    margin: 0 0 0 8px;
	    padding: 0 0 0 26px;
	}

	.col-basic > a {
	    padding: 20px 0 20px 40px;
	    font-size: 1.3rem;
	}


}