/* --------------- common ---------------*/
.ttl-section{
	width: calc(60vw - var(--sbw));
	margin: 0 auto 4.6vw;
	position: relative;
}
.txt_blue{
	color: #009CE5;
	font-weight: bold;
}
.radius-bdr-box{
	border-radius: 35px;
	margin: 0 auto;
	border-radius: 35px;
	border: 4px solid #FFF;
	box-shadow: 4px 10px 10px 0 rgba(0, 156, 229, 0.30);
	width: calc(91.6vw - var(--sbw));
	padding: 0 3.2vw 7.3vw 3.2vw;
}
.radius-bdr-box .box-inner{
	background: #fff;
	border-radius: 20px;
	padding: 4.2vw 7.7vw;
}
.radius-bdr-box .box-inner .num-list{
	display: flex;
	flex-direction: column;
	gap: 2.1vw;
}
@media print, screen and (min-width: 768px) {
	.ttl-section{
		width: 400px;
		margin: 0 auto 28px;
	}
	.radius-bdr-box{
		border-radius: 35px;
		margin: 0 auto;
		border-radius: 35px;
		border: 4px solid #FFF;
		box-shadow: 4px 10px 10px 0 rgba(0, 156, 229, 0.30);
		width: 100%;
		padding: 0 60px 50px 60px;
	}
	.radius-bdr-box .box-inner{
		padding: 24px 32px;
	}
	.radius-bdr-box .box-inner .num-list{
		gap: 8px;
	}

}
/* --------------- kv ---------------*/
.kv{
	padding: 80.3vw 6.13vw 4.8vw;
	background: url(/sites/default/files/media/intro/navi/img/bg_kv.png) no-repeat top -5.7vw center / cover;
	font-size: 0;
	position: relative;
	z-index: 5;
}
.kv .btn-wrap{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.kv .btn-wrap > li{
	width: 50%;
}
@media print, screen and (min-width: 768px) {
	.kv{
		padding: 45vw 0 3.25vw;
		background: url(/sites/default/files/media/intro/navi/img/bg_kv_pc_sml.jpg) no-repeat top center / 100%;
	}
	.kv .btn-wrap{
		width: 100%;
		flex-wrap: nowrap;
		margin: auto;
	}
	.kv .btn-wrap > li{
		width: calc(100% / 4);
	}
}
@media print, screen and (min-width: 1041px) {
	.kv{
		padding: 33.62vw 0 3.25vw;
		background: url(/sites/default/files/media/intro/navi/img/bg_kv_pc.jpg) no-repeat top center / 100%;
	}
	.kv .btn-wrap{
		width: 71.5vw;
	}
}

/* --------------- dialogue ---------------*/
.dialogue{
	padding: 0 4.2vw 8.5vw 8.0vw;
	line-height: 1.5;
}
.dialogue__question{
	position: relative;
	font-size: 3.7vw;
	filter: drop-shadow(4px 10px 10px rgba(0, 156, 229, 0.30));
	margin: 0 0 15.5vw 0;
}
.dialogue__answer{
	position: relative;
	font-size: 3.7vw;
	filter: drop-shadow(4px 10px 10px rgba(0, 156, 229, 0.30));
}
.dialogue__answer::after{
	content: "";
	display: block;
	position: absolute;
	bottom: -12.6vw;
	right: 31.4vw;
	background: url(/sites/default/files/media/intro/navi/img/arw_btm.svg) no-repeat center / contain;
	width: 13vw;
	height: 21.2vw;
	transform: rotate(1.063deg);
}
.dialogue__inner{
	border-radius: 24px;
	background: #FFF;
	width: 69.3vw;
}
.dialogue__question .dialogue__inner{
	padding: 3.2vw 3.4vw 3.2vw 14.8vw;
	margin-left: 13.8vw;
	border: 4px solid #4BCCBE;
}
.dialogue__answer .dialogue__inner{
	padding: 3.2vw 5.2vw 3.2vw 3.2vw;
	margin-right: 17.6vw;
	border: 4px solid #4BCCBE;
}
.dialogue__question .img{
	position: absolute;
	top: -12.9vw;
	left: -12.3px;
	width: 31.9%;
	height: auto;
}
.dialogue__answer .img{
	position: absolute;
  top: -13.1vw;
	right: 0;
	width: 26.5%;
	height: auto;
}
.dialogue__answer .img.answer2{
	width: 26.5%;
	top: -11.9vw;
}
.dialogue .yellow_box{
	border-radius: 8px;
	background: #FFF8D6;
	padding: 2.6vw;
	margin-top: 2.6vw;
}
#know-wrap, #use-wrap, #choose-wrap{
	background-image:  url(/sites/default/files/media/intro/navi/img/bg_clear.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {
	.dialogue{
		padding: 0;
	}
	.dialogue__question{
		font-size: 20px;
		margin: 0 0 87px 0;
		max-width: 780px;
		width: 100%;
	}
	.dialogue__answer{
		font-size: 20px;
		max-width: 780px;
		width: 100%;
	}
	.dialogue__answer::after{
		width: 95px;
		height: 167px;
		bottom: -97px;
		right: 347px;
		transform: rotate(1.063deg);
	}
	.dialogue__inner{
		border-radius: 30px;
		width: 700px;
	}
	.dialogue__question .dialogue__inner{
		padding: 32px 40px 40px 76px;
		margin-left: auto;
	}
	.dialogue__answer .dialogue__inner{
		padding: 35px 80px 45px 34px;
		margin-right: auto;
	}
	.dialogue__question .img{
		top: -73px;
		left: -30px;
		width: 167px;
	}
	.dialogue__answer .img{
		top: -67px;
		width: 140px;
	}
	.dialogue__answer .img.answer2{
		width: 140px;
		top: -69px;
	}
	.dialogue .yellow_box{
		border-radius: 16px;
		padding: 22px 19px;
		margin-top: 18px;
	}
	#know-wrap, #use-wrap, #choose-wrap{
		background-image:  url(/sites/default/files/media/intro/navi/img/bg_clear_pc.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
}
/* --------------- know ---------------*/
#know-wrap{
	padding: 47.3vw 0 35.6vw;
	background-position: top -31vw center;
	margin-top: -38vw;
	position: relative;
	z-index: 4;
}
#know-wrap .dialogue__question .dialogue__inner{
	border-color: #4BCCBE;
}
#know-wrap .dialogue__answer .dialogue__inner{
	border-color: #009CE5;
	padding: 3.2vw 4.2vw 4vw;
}
#know-wrap .radius-bdr-box{
	background: #A1F1E8;
}
.radius-bdr-box .btn-blue{
	margin-left: auto;
	margin-right: auto;
}
#know-wrap .radius-bdr-box .ttl{
	margin: -4.36vw auto 3.9vw 12.5vw;
  width: 65.8vw;
}
#know-wrap .radius-bdr-box .ttl img{
	width: 100%;
	height: auto;
}
#know-wrap .fukidashi-wrap{
	margin-top: -4.5vw;
}
#know-wrap .picture-wrap{
	margin-top: 1.3vw;
	display: flex;
	justify-content: space-between;
	margin-bottom: 2.1vw;
}
#know-wrap .picture-wrap .img{
	width: 40vw;
}
#know-wrap .picture-wrap .img img{
	width: 100%;
	height: auto;
}
@media print, screen and (min-width: 768px) {
	#know-wrap{
		padding: 40px 0 calc(180px + 40vw);
		margin: auto;
		background-position: top center;
		z-index: 1;
	}
	#know-wrap .dialogue__answer .dialogue__inner{
		padding: 31px 77px 35px 37px;
	}
	#know-wrap .radius-bdr-box{
		margin-top: 72px;
	}
	#know-wrap .radius-bdr-box .ttl{
		margin: -30px auto 0;
		width: 100%;
		max-width: 492px;
		padding-left: 0;
	}
	#know-wrap .fukidashi-wrap{
		margin: 0 auto ;
		width: 100%;
		max-width: 636px;
	}
	#know-wrap .picture-wrap{
		width: 100%;
		max-width: 630px;
		margin: 18px auto 10px;
	}
	#know-wrap .picture-wrap .img{
		width: 300px;
		border-radius: 15px;
	}
	#know-wrap .picture-wrap + .c-annotation{
		width: 100%;
		max-width: 630px;
		margin: 0 auto;
	}
}

/* --------------- choose ---------------*/
#choose-wrap{
	padding: 42vw 0 35.6vw;
	background-position: top -34vw center;
	margin-top: -52vw;
	position: relative;
	z-index: 3;
}
#choose-wrap .dialogue__question{
	margin-bottom: 13.2vw;
}
#choose-wrap .dialogue__question .img{
  top: -12.6vw;
}
#choose-wrap .dialogue__question .dialogue__inner{
	border-color: #FFA924;
}
#choose-wrap .dialogue__answer .dialogue__inner{
	border-color: #009CE5;
}
#choose-wrap .dialogue__answer::after{
	right: 25.2vw;
}
#choose-wrap .radius-bdr-box{
	background: #FFEE8F;
	padding-left: 4vw;
	padding-right: 4vw;
}
#choose-wrap .radius-bdr-box .ttl{
	width:52.5vw;
	margin: 7.93vw auto 6.2vw;
}
#choose-wrap .point-wrap{
	background: #fff;
	border-radius: 20px;
	padding: 14.4vw 6.86vw 4.7vw;
	position: relative;
	line-height: 1.5;
}
#choose-wrap .point-wrap + .point-wrap{
	margin-top: 6.13vw
}
#choose-wrap .point-wrap .ttl{
	height: 17.3vw;
	width: auto;
	margin-top: -2.4vw;
	position: absolute;
	top: -2vw;
}
#choose-wrap .point-wrap .text{
	font-size: 3.73vw;
}
#choose-wrap .point-wrap .ttl1{
	left: 3vw;
}
#choose-wrap .point-wrap .ttl2{
	left: 5.4vw;
}
#choose-wrap .point-wrap .ttl3{
	left: 5.6vw;
}
#choose-wrap .point-wrap .ttl img{
	width: auto;
	height: 100%;
}
@media print, screen and (min-width: 768px) {
	#choose-wrap{
		padding: 40px 0 calc(180px + 40vw);
		background-position: top center;
		margin-top: -43.2vw;
		z-index: 2;
	}
	#choose-wrap .dialogue__question{
		margin-bottom: 90px;
	}
	#choose-wrap .dialogue__question .dialogue__inner{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#choose-wrap .dialogue__question .img{
		top: -73px;
	}
	#choose-wrap .dialogue__answer .dialogue__inner {
			padding: 32px 72px 38px 38px;
	}
	#choose-wrap .dialogue__answer::after{
		right: 350px;
		width: 115px;
		height: 133px;
	}
	#choose-wrap .radius-bdr-box {
		margin-top: 70px;
	}
	#choose-wrap .radius-bdr-box .ttl{
		width:399px;
		margin: 36px auto 36px;
	}
	#choose-wrap .point-wrap{
		border-radius: 30px;
		padding: 76px 35px 30px;
	}
	#choose-wrap .point-wrap + .point-wrap{
		margin-top: 33px
	}
	#choose-wrap .point-wrap .ttl{
		height: 104px;
		width: auto;
		margin:0;
		top: -23px;
	}
	#choose-wrap .point-wrap .text{
		font-size: 1.125rem
	}
	#choose-wrap .point-wrap .ttl1,
	#choose-wrap .point-wrap .ttl2,
	#choose-wrap .point-wrap .ttl3{
		left: 25px;
	}
	#choose-wrap .btn-blue{
		margin-top: 40px;
	}
}
/* --------------- use ---------------*/
#use-wrap{
	padding: 38vw 0 35.6vw;
	background-position: top -36vw center;
	margin-top: -48vw;
	position: relative;
	z-index: 2;
}
#use-wrap .radius-bdr-box{
	background: #D6AFFF;
	padding: 7.63vw 4.3vw 8.53vw;
}
#use-wrap .radius-bdr-box .ttl{
	width: 72.8vw;
	margin: 0 auto 4.26vw;
}
#use-wrap .dialogue__question{
	margin-bottom: 13.2vw;
}
#use-wrap .dialogue__question .dialogue__inner{
	border-color: #3B75F4;
	padding-left: 12vw;
}
#use-wrap .dialogue__answer .dialogue__inner{
	border-color: #009CE5;
}
#use-wrap .dialogue__question .img{
	top: -11.1vw;
	left: -18px;
	width: calc(28vw - var(--sbw));
}
#use-wrap .dialogue__answer::after{
	right: 25vw;
	bottom: -12.4vw;
}
@media print, screen and (min-width: 768px) {
	#use-wrap{
		padding: 40px 0 calc(180px + 40vw);
		background-position: top center;
		margin-top: -43.4vw;
		z-index: 3;
	}
	#use-wrap .radius-bdr-box{
		padding: 47px 56px;
		margin-top: 70px;
	}
	#use-wrap .radius-bdr-box .ttl{
		width: 600px;
		margin: 0 auto 34px;
	}
	#use-wrap .dialogue__question{
		margin-bottom: 89px
	}
	#use-wrap .dialogue__question .dialogue__inner{
		padding: 32px 34px 40px 76px;
	}
	#use-wrap .dialogue__answer .dialogue__inner{
		padding: 30px 77px 36px 34px
	}
	#use-wrap .dialogue__question .img{
		top: -69px;
		left: -29px;
		width: 168px;
	}
	#use-wrap .dialogue__answer::after{
		right: 350px;
		width: 115px;
		height: 133px;
		bottom: -98px;
	}
	#use-wrap .radius-bdr-box .box-inner{
		padding: 24px 109px;
	}
	#use-wrap .btn-blue{
		margin-top: 40px;
	}
}
/* --------------- buy ---------------*/
#buy-wrap{
	padding: 38vw 0 35.6vw;
	background: url(/sites/default/files/media/intro/navi/img/bg_blue.png) no-repeat top -45.9vw center / cover;
	margin-top: -48vw;
	position: relative;
}
#buy-wrap .dialogue__question{
	margin-bottom: 13.2vw;
}
#buy-wrap .dialogue__question .img{
	top: -12.6vw;
}
#buy-wrap .dialogue__question .dialogue__inner{
	border-color: #FF7AAF;
	padding-left: 12vw;
}
#buy-wrap .dialogue__answer .dialogue__inner{
	border-color: #009CE5;
}
#buy-wrap .dialogue__answer::after{
	right: 85px;
	width: 110px;
	height: 110px;
	bottom: -80px;
}
#buy-wrap .radius-bdr-box{
	padding: 7.33vw 4.3vw;
	background: #FFB2D7;
}
#buy-wrap .radius-bdr-box .ttl{
	width: 58.9vw;
	margin: 0 auto 4.26vw;
}
#buy-wrap .radius-bdr-box .box-inner .num-list{
	gap: 3.7vw;
}
#buy-wrap + .bnr-wrap{
	width: 91.4vw;
	margin: -29vw auto 21.1vw;
	display: flex;
	position: relative;
	justify-content: center;
}
@media print, screen and (min-width: 768px) {
	#buy-wrap{
		padding: 40px 0 calc(80px + 40vw);
		background: url(/sites/default/files/media/intro/navi/img/bg_blue_pc.png) no-repeat top center / 100%;
		margin-top: -43vw;
		z-index: 5;
	}
	#buy-wrap .dialogue__question{
		margin-bottom: 87px;
	}
	#buy-wrap .dialogue__question .img{
		top: -73px;
	}
	#buy-wrap .dialogue__question .dialogue__inner{
		padding: 32px 40px 40px 76px;
	}
	#buy-wrap .dialogue__answer .dialogue__inner{
    padding: 32px 81px 40px 38px;
	}
	#buy-wrap .dialogue__answer::after{
    right: 350px;
    width: 115px;
    height: 133px;
    bottom: -98px;
	}
	#buy-wrap .radius-bdr-box{
		padding: 44px 56px;
		margin-top: 72px;
	}
	#buy-wrap .radius-bdr-box .ttl{
		width: 450px;
		margin: 0 auto 36px;
	}
	#buy-wrap .radius-bdr-box .box-inner {
		padding: 24px 59px 32px;
	}
	#buy-wrap .radius-bdr-box .box-inner .num-list{
		gap: 12px;
	}
	#buy-wrap .btn-blue{
		margin-top: 40px;
	}
	#buy-wrap + .bnr-wrap{
		width: 100%;
		margin: -40vw auto 0;
		position: relative;
		z-index: 5;
		padding-bottom: 80px;
	}
}