/* --------------- common ---------------*/
.wrap-inner{
	padding: 0 4.26vw;
}
.radius-box{
	background: #fff;
	border-radius: 16px;
	padding: 6.4vw 4.26vw 10.6vw;
}
@media screen and (min-width: 769px) {
	#debut-step,
	#anshin,
	#faq{
		position: relative;
	}
	.navi #debut-step::after,
	.navi #anshin::after,
	.navi #faq::after{
		content: "";
		width: 100%;
		background: linear-gradient(180deg, transparent 0, #FFF 100%);
		height: 80px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
}
/* --------------- navi kv ---------------*/
.navi .dialogue__question .dialogue__inner{
	border: 4px solid #FF7AAF;
}
.navi .dialogue__answer .dialogue__inner{
	border: 4px solid #009CE5;
}
@media screen and (min-width: 769px) {
	.navi .dialogue__question{
		margin-bottom: 65px;
	}
	.navi .dialogue__question .img{
		bottom: 12px;
	}
}
/* --------------- juniorcontact kv ---------------*/
.juniorcontact{
	background-color: #DDF7F7;
}
.juniorcontact .dialogue__question{
	width: 80.9vw;
	margin: 2.5vw 0 0 10.2vw;
}
.juniorcontact .dialogue__question .dialogue__inner{
	top: 10.3vw;
	right: 8.2vw;
}
.juniorcontact .dialogue__answer{
	width: 84.4vw;
	margin: 1.1vw 0 0 5.9vw;
}
.juniorcontact .dialogue__answer .dialogue__inner{
	top: 11vw;
	left: 6.1vw;
}
@media screen and (min-width: 769px){
	.juniorcontact .dialogue{
		max-width: 938px;
		margin: 102px auto 0 auto;
		padding-right: 4px;
	}
	.juniorcontact .dialogue__question{
		width: 430px;
		margin:0 12px 0 0;
	}
	.juniorcontact .dialogue__question .dialogue__inner{
		top: 50px;
		right: auto;
		left: 21px;
	}
	.juniorcontact .dialogue__answer{
		width: 425px;
		margin: 64px 0 0;
	}
	.juniorcontact .dialogue__answer .dialogue__inner{
		top: 40px;
		left: 134px;
	}
	.juniorcontact .kv .normal-txt{
		max-width: 660px;
		margin: 0 auto 0;
		background: #fff;
		padding: 16px;
		border-radius: 16px;
	}
}
@media screen and (min-width: 769px) and (max-width: 870px){
	.juniorcontact .kv .ttl{
		width: 256px;
		top: 26px;
		left: calc(50% - 117px);
	}
	.juniorcontact .dialogue{
		padding-right: 0;
	}
	.juniorcontact .dialogue__question .dialogue__inner {
		font-size: 1.92vw;
		top: 53px;
		left: 6.5%;
	}
	.juniorcontact .dialogue__inner span{
		font-size:2.13vw;
	}
	.juniorcontact .dialogue__answer .dialogue__inner{
		font-size: 1.92vw;
		top: 37px;
		left: 33.1%;
	}
}
/* --------------- step ---------------*/
.navi #debut-step{
	background: url(/sites/default/files/media/intro/navi/img/step4/step_bg.jpg) no-repeat top center / 100%;
	padding: 24.5vw 0 25.3vw;
	margin-top: -30vw;
}
#debut-step .wrap-inner > .ttl{
	width: 76.8vw;
	margin: 0 auto 6.4vw;
}
#debut-step .radius-box{
	padding: 0 4.26vw 8.53vw 2.13vw;
}
#step .ttl{
	width: 78.9vw;
	margin: 0 auto 7vw;
}
#step .step-ttl{
	width: 69.3vw;
	margin-bottom: 2.3vw;
}
#step .step .inner{
	position: relative;
	padding: 0 0 3.76vw 14.4vw;
	display: grid;
	grid-template-columns: auto 26.4vw;
  grid-template-rows: auto;
	gap: 4.26vw 2.13vw;
}
#step .step:not(:last-child) .inner::after{
	content: "";
	width: 3px;
	top: 0;
	bottom: 0;
	border-left: 3px dotted #D9F1FF;
	left: 8vw;
	position: absolute;
	display: block;
}
#step .step .normal-txt{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
#step .step .img{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
#step .step .btn-blue{
	margin: 0 4.26vw 0 6.4vw;
	font-size: 3.73vw;
	height: 12.8vw;
}
#step .btm-wrap{
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}
#step .staff{
	position: relative;
	margin-top: 2.43vw;
}
#step .staff .comment{
	font-size: 3.2vw;
	border: 0.53vw solid #D9F1FF;
	border-radius: 8px;
	padding: 1.56vw 2.3vw;
	position: relative;
	margin-right: 25.5vw;
	line-height: 1.5;
}
#step .staff .comment::after{
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 1.3vw);
	width: 4vw;
	height: 2.6vw;
	background: url(/sites/default/files/media/intro/common/img/step4/comment_bg.png) no-repeat left center / contain;
	right: -4vw;
}
#step .staff .comment .percent{
	color: #009CE5;
	font-size: 4.8vw;
	font-weight: bold;
}
#step .step04 .comment {
	margin-left: 9.4vw;
}
#step .step06 .comment {
	margin-right: 24.2vw;
	line-height: 1.3;
}
#step .staff .staff-img{
	position: absolute;
	right: 0;
	top: -1vw;
}
#step .step03 .inner{
	padding-bottom: 12.9vw;
}
#step .step04 .inner{
	padding-bottom: 8.4vw;
}
#step .step05 .inner{
	padding-bottom: 3vw;
}
#step .step06 .inner{
	padding-bottom: 0;
}
#step .step03 .staff-img{
	width: 65.06vw;
}
#step .step04 .staff-img{
	width: 21.6vw;
}
#step .step06 .staff-img{
	width: 23.3vw;
	top: -2vw;
}
#step .step06 .btn-blue{
	margin-top: 6.2vw;
}
#step .inner .c-annotation{
	margin: 1.26vw 0 0;
}
#step .step06 .c-annotation{
	margin: 4.6vw 0 0;
}
#step .inner .c-annotation .c-annotation__item + .c-annotation__item {
    margin-top: 0;
}
@media screen and (max-width: 768px) {
	.juniorcontact #debut-step{
		margin-top: -7vw;
		position: relative;
	}
	.juniorcontact #debut-step .radius-box{
		padding-top: 6vw;
	}
	.juniorcontact #debut-step .ttl{
		width: 76.93vw;
		margin: 0 auto 5.6vw;
	}
	.juniorcontact #step .staff {
		margin-top: -1.87vw;
	}
	.juniorcontact #step .step05 .inner .c-annotation{
		margin-top: -1.87vw;
	}
}
@media screen and (min-width: 769px) {
	.navi #debut-step{
		background: url(/sites/default/files/media/intro/navi/img/step4/step_bg_pc.jpg) no-repeat top center / 1440px;
		padding: 80px 16px 98px;
		margin-top: -20px;
	}
	#debut-step .wrap-inner {
		padding: 0;
		max-width: 1040px;
	}
	#debut-step .wrap-inner > .ttl{
		max-width: 739px;
		width: 100%;
		margin: 0 auto 48px;
	}
	#debut-step .radius-box{
		padding: 32px 16px;
	}
	#step{
		max-width: 736px;
		margin: auto;
	}
	#step .ttl{
		width: 100%;
		max-width: 710px;
		margin: 0 auto;
	}
	#step .step-ttl{
		width: auto;
		height: 88px;
		margin-bottom: 8px;
	}
	#step .step-ttl img{
		width: auto;
		height: 88px;
	}
	#step .step .inner{
		padding: 0 0 32px 87px;
		grid-template-columns: auto 161px;
		grid-template-rows: auto;
		gap: 16px;
	}
	#step .step:not(:last-child) .inner::after{
		width: 4px;
		border-left: 4px dotted #D9F1FF;
		left: 44px;
	}
	#step .step .normal-txt{
		font-size: 1.125rem;
	}
	#step .step .img{
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
	#step .step .btn-blue{
		margin: 0 4.26vw 0 6.4vw;
		font-size: 3.73vw;
		height: 12.8vw;
	}
	#step .btm-wrap{
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	#step .step .btn-blue{
		margin: 0;
		font-size: 0.875rem;
		height: 48px;
		width: 225px;
	}
	#step .staff{
		margin-top: 0;
	}
	#step .staff .comment{
		font-size: 0.875rem;
		border: 2px solid #D9F1FF;
		padding: 8px 14px;
		position: relative;
		margin: 0 96px 0 22px;
		line-height: 1.6;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	#step .staff .comment::after{
		top: calc(50% - 5px);
		width: 18px;
		height: 10px;
		right: -18px;
	}
	#step .staff .comment .percent{
		font-size: 1.1875rem;
		margin-bottom: -2px;
	}
	#step .step04 .comment {
		margin: 16px 90px 0 28px;
	}
	#step .step06 .comment {
		margin: 8px 98px 0 0;
		line-height: 1.6;
		padding-top: 2px;
	}
	#step .step03 .inner{
		padding-bottom: 60px;
	}
	#step .step04 .inner{
		padding-bottom: 38px;
	}
	#step .step05 .inner{
		padding-bottom: 32px;
	}
	#step .step06 .inner{
		padding-bottom: 0;
	}
	#step .step03 .staff-img{
		width: 272px;
		top: -16px;
		right: -4px;
	}
	#step .step04 .staff-img{
		width: 90px;
		top: -6px;
    right: -8px;
	}
	#step .step06 .staff-img{
		width: 87px;
		top: -11px;
		right: 8px;
	}
	#step .step06 .btn-blue{
		margin-top: 60px;
	}
	#step .inner .c-annotation{
		margin: 0;
	}
	#step .step06 .c-annotation{
		margin: 16px 0 0;
	}
	#step .inner .c-annotation .c-annotation__item + .c-annotation__item {
			margin-top: 0;
	}
	.juniorcontact #debut-step {
		margin-top: -60px;
		padding: 0 16px;
		background: #DDF7F7 url(/sites/default/files/media/intro/juniorcontact_navi/img/step4/bg_debut_pc.png) no-repeat center top 113px / 1366px;
	}
	.juniorcontact #debut-step .radius-box{
		padding: 58px 16px 64px;
	}
	.juniorcontact #debut-step .ttl{
		width: 100%;
		max-width: 739px;
		margin: 0 auto 20px;
	}
	.juniorcontact #debut-step #step .ttl{
		margin-bottom: 0;
	}
	.juniorcontact #step .step .inner{
		gap: 8px 16px;
	}
	.juniorcontact #step .step .btn-blue{
		padding: 0 48px 0 42px;
	}
	.juniorcontact #step .btn-blue::before{
		width: 32px;
		height: 32px;
		top: calc(50% - 16px);
    right: 12px;
	}
	.juniorcontact #step .btn-blue::after {
		width: 12px;
		height: 12px;
		right: 20px;
		top: calc(50% - 6px);
	}
	.juniorcontact #step .step04 .comment{
		margin-top: 22px;
	}
	.juniorcontact #step .step05 .inner .c-annotation{
		margin-top: 8px;
	}
	.juniorcontact #step .step06 .comment{
		margin-top: 16px;
	}
}
/* --------------- anshin ---------------*/
.navi #anshin{
	padding: 0 4.26vw 23.3vw;
	background: url(/sites/default/files/media/intro/navi/img/step4/anshin_bg.png) no-repeat top center / 100%;
	margin-top: -3.8vw;
}
#anshin .ttl{
	width: 60.8vw;
	margin: 0 auto 6.4vw;
}
#anshin .box-wrap .box{
  padding: 6.4vw 4.26vw;
  border-radius: 16px;
	background: #FFF;
	box-shadow: 4px 4px 2px 0 rgba(1, 92, 174, 0.10);
}
#anshin .box-wrap .box + .box{
  margin-top: 4.26vw;
}
#anshin .box-wrap .box .sub-ttl{
  font-size: 4.8vw;
  color: #015CAE;
  font-weight: bold;
  line-height: 1.5;
  border-bottom: 1px solid #009CE5;
  padding-bottom: 7px;
  text-align: center;
  margin-bottom: 4.26vw;
}
#anshin .box-wrap .box .l-flex{
  gap: 2.13vw;
  align-items: flex-start;
  font-size: 3.73vw;
}
#anshin .box-wrap .box .l-flex .img{
  min-width: 32vw;
  width: 32vw;
}
#anshin .box-wrap .box .c-annotation{
  margin-top: 4.26vw;
}
#anshin .box-wrap .box .c-annotation a{
  color: #007AC9;
	text-decoration: underline;
}
.juniorcontact #anshin .box-wrap .box{
	background: #F0F8FF;
}
@media screen and (max-width: 768px) {
	.juniorcontact #anshin {
		margin-top: 0;
		padding: 32.2vw 4.26vw 18.1vw;
		background: url(/sites/default/files/media/intro/juniorcontact_navi/img/step4/bg_anshin.jpg) no-repeat center top / 100%, url(/sites/default/files/media/intro/juniorcontact_navi/img/step4/bg_anshin2.png) no-repeat center bottom -11vw / 100%, #fff;
	}
}
@media screen and (min-width: 769px) {
	.navi #anshin{
		padding: 40px 16px 114px;
		background: url(/sites/default/files/media/intro/navi/img/step4/anshin_bg_pc.png) no-repeat top 100px center / 1440px;
		margin-top: 0;
	}
	#anshin .ttl{
		width: 430px;
		margin: 0 auto 40px;
	}
	#anshin .box-wrap{
		display: flex;
		flex-wrap: wrap;
		gap: 24px;
		max-width: 944px;
		margin: auto;
	}
	#anshin .box-wrap .box{
		width: calc((50% - 12px));
		padding: 24px;
		border-radius: 8px;
	}
	#anshin .box-wrap .box + .box{
		margin-top:0;
	}
	#anshin .box-wrap .box .sub-ttl{
		font-size: 1.25rem;
		padding-bottom: 16px;
		margin-bottom: 16px;
	}
	#anshin .box-wrap .box .l-flex{
		gap: 16px;
		font-size: 1rem;
	}
	#anshin .box-wrap .box .l-flex .img{
		min-width: 130px;
		width: 130px;
	}
	#anshin .box-wrap .box .c-annotation{
		margin-top: 16px;
	}
	.juniorcontact #anshin{
		padding:160px 16px 88px;
		background: url(/sites/default/files/media/intro/juniorcontact_navi/img/step4/bg_anshin_pc.jpg) no-repeat center top / 1440px, url(/sites/default/files/media/intro/juniorcontact_navi/img/step4/bg_anshin2_pc.png) no-repeat center bottom / 1035px, #fff;
	}
}
/* --------------- faq ---------------*/
.navi #faq{
	padding: 24.6vw 4.26vw 21.3vw;
	background: url(/sites/default/files/media/intro/navi/img/step4/faq_bg.jpg) no-repeat top center / 100%, linear-gradient(180deg, transparent 200vw, #DFF8FB 203vw, #D4F3FF 83.55%, #FFF 100%);
	margin-top: -27vw;
}
.juniorcontact #faq{
	padding: 10.3vw 4.26vw 11.5vw;
	background: #FFFAE0 url(/sites/default/files/media/intro/juniorcontact_navi/img/step4/bg_faq.jpg) no-repeat top center / 100%;
}
#faq .ttl{
	width: 70.9vw;
	margin: 0 auto 6.4vw;
}
.juniorcontact #faq .ttl {
  width: 65.9vw;
}
@media screen and (min-width: 769px) {
	.navi #faq{
		padding: 150px 16px 80px;
		background: url(/sites/default/files/media/intro/navi/img/step4/faq_bg_pc.jpg) no-repeat top 70px center / 1440px, linear-gradient(180deg, transparent 200vw, #DFF8FB 203vw, #D4F3FF 83.55%, #FFF 100%);
		margin-top: -74px;
		position: relative;
	}
	.juniorcontact #faq{
		padding: 56px 16px 80px;
		background:#FFFAE0 url(/sites/default/files/media/intro/juniorcontact_navi/img/step4/bg_faq_pc.jpg) no-repeat center top / 1440px;
	}
	#faq .ttl,
.juniorcontact #faq .ttl {
		width: 397px;
		margin: 0 auto 40px;
	}

}
/* --------------- coupon ---------------*/
#coupon{
	margin: 0 6.4vw 10vw;
}
#coupon .wrap-inner{
	padding: 0;
}
.juniorcontact #coupon{
	background: #fff;
	padding: 14.7vw 6.4vw 10vw;
	margin: 0;
}
@media screen and (min-width: 769px) {
	#coupon{
		margin: 60px 16px;
	}
	.juniorcontact #coupon{
		margin: 0;
		padding: 64px 16px;
	}
	.juniorcontact #coupon .bnr-1clm-wrap {
		flex-wrap: wrap;
	}
	.juniorcontact #coupon .bnr-1clm-wrap .bnr-1clm{
		width: calc(50% - 12px);
	}
	.juniorcontact #coupon .wrap-inner{
		max-width: 832px;
	}
	.juniorcontact #coupon .btn-blue{
		margin-top: 45px;
	}
	.juniorcontact #service .btn-blue{
		margin-top: 30px;
	}
}
/* --------------- shop ---------------*/
#shop{
	background: #D9F1FF url(/sites/default/files/media/intro/common/img/step4/shop_bg.png) no-repeat top 16.3vw center / 100%;
	padding: 10.6vw 0;
}
#shop .ttl{
	width: 91.4vw;
	margin: 0 auto 4.26vw;
}
#shop .inner{
	padding: 0 8.53vw;
}
#shop .sub-ttl {
	margin-bottom: 4.26vw;
}
#shop .sub-ttl picture{
	display: block;
	width: 71.2vw;
	margin: 0 auto 4.26vw;
}
#shop .sub-ttl .txt{
	color: #015CAE;
	font-size: 4.26vw;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 2px;
	display: block;
}
#shop .sub-ttl .highLight{
	font-size: 4.8vw;
	font-style: normal;
	background: linear-gradient(transparent 74%, #FFDA2E 0%);
}
#shop .sub-ttl .highLight .no{
	font-size: 5.86vw;
}
#shop .sub-ttl .highLight .one{
	font-size: 7.46vw;
}
#shop .btn-list{
	margin-top: 4.26vw;
	display: flex;
	gap: 4.26vw;
}
#shop .btn-list a{
	flex: 1;
	color: #03BAE8;
	text-align: center;
	border-radius: 8px;
	border: 2px solid #03BAE8;
	background: #FFF;
	box-shadow: 0 4px 4px 0 rgba(0, 156, 229, 0.25);
	font-size: 3.73vw;
	display: block;
	padding: 1.67vw 6.4vw;
	font-weight: bold;
	position: relative;
}
#shop .btn-list a::after{
	content: "";
	background: url(/sites/default/files/media/intro/common/img/icon_arrow_right.svg) no-repeat center / contain;
	display: block;
	position: absolute;
	top: calc(50% - 2.13vw);
	right: 2.13vw;
	width: 4.26vw;
	height: 4.26vw;
}
#shop .c-annotation{
	margin: 25vw 4.26vw 0;
}
@media screen and (min-width: 769px) {
	#shop{
		background: #D9F1FF url(/sites/default/files/media/intro/common/img/step4/shop_bg_pc.png) no-repeat center top 90px / 1778px;
		padding: 80px 0 160px;
	}
	#shop .ttl{
		width: 460px;
		margin: 0 auto 20px;
	}
	#shop .inner{
		padding: 0 16px 0;
	}
	#shop .sub-ttl {
		margin: 0 auto 32px;
	}
	#shop .sub-ttl picture{
		width: 732px;
		margin: 0 auto;
	}
	#shop .sub-ttl .txt{
		font-size: 1.625rem;
		margin-bottom: 2px;
	}
	#shop .sub-ttl .highLight{
		font-size: 2rem;
	}
	#shop .sub-ttl .highLight .no{
		font-size: 2.375rem;
	}
	#shop .sub-ttl .highLight .one{
		font-size: 2.9375rem;
	}
	#shop .flex-wrap{
		display: flex;
		gap: 48px;
		align-items: center;
		max-width: 944px;
		margin: auto;
	}
	#shop .flex-wrap .bnr-wrap{
		width: 46.0%;
		max-width: 435px;
	}
	#shop .flex-wrap .btn-wrap{
		width: 48.7%;
		max-width: 460px;
	}
	#shop .flex-wrap .btn-blue{
		margin: 0;
	}
	#shop .btn-list{
		margin-top: 44px;
		gap: 16px;
	}
	#shop .btn-list a{
		font-size: 1rem;
		padding: 16px 24px 16px 8px;
	}
	#shop .btn-list a::after{
		top: calc(50% - 8px);
		right: 8px;
		width: 16px;
		height: 16px;
	}
	#shop .c-annotation{
		margin: 24px auto;
		max-width: 944px;
	}
}

@media screen and (min-width: 1441px) {
	#debut-step,
	.navi #faq,
	.navi #anshin,
	.juniorcontact #faq{
		background-size: 100%;
	}
	
	.juniorcontact #anshin{
		background: url(/sites/default/files/media/intro/juniorcontact_navi/img/step4/bg_anshin_pc.jpg) no-repeat center top / 100%, url(/sites/default/files/media/intro/juniorcontact_navi/img/step4/bg_anshin2_pc.png) no-repeat center bottom / 1035px, #fff;
	}
}