@charset "UTF-8";
#guide #wrap{
	padding-top:97px;
}
#guide #main_bg {
	position: relative;
	height: 350px;
	width: 100%;
	background:transparent radial-gradient(closest-side at 52% 63%, #32D4EC 0%, #00A5BE 100%) 0% 0% no-repeat padding-box;
}
#guide #main_bg #main_visual {
	height: 350px;
}

#guide.box-present #main_bg #main_visual {
	background:url(/kaden/_assets/images/guide/box-present/mv_box-present.webp) no-repeat center bottom -20px;
	background-size:426px auto;
}
#guide.freedelivery #main_bg #main_visual {
	background:url(/kaden/_assets/images/guide/freedelivery/mv_freedelivery.webp) no-repeat center bottom -20px;
	background-size:426px auto;
}
#guide.purchase_info #main_bg #main_visual {
	background:url(/kaden/_assets/images/guide/purchase_info/mv_purchase_info.webp) no-repeat center bottom -40px;
	background-size:426px auto;
}
#guide.guarantee #main_bg #main_visual {
	background:url(/kaden/_assets/images/guide/guarantee/mv_guarantee.webp) no-repeat center bottom -40px;
	background-size:320px auto;
}
#guide.comparison_guide #main_bg #main_visual {
	background:url(/kaden/_assets/images/guide/comparison/mv_comparison.webp) no-repeat center bottom ;
	background-size:300px auto;
}

#guide #main_visual .headline{
	width:1170px;
	position: static;
	margin: auto;
	text-align: center;
	padding-top: 20px;
}
#guide #main_visual .headline span.diagonal_line{
	color:#ffffff;
	margin-bottom:5px;
}
#guide #main_visual span.diagonal_line:before,
#guide #main_visual span.diagonal_line:after{
	background: url(/kaden/_assets/images/common/dotline_white.svg) no-repeat;
}

#guide #main_bg h2{
	margin:0px auto;
	font-size:160%;
	color:#ffffff;
	text-shadow: 0px 3px 6px #00000029;
}
#guide #main_bg h2 em{
	color:#FFE600;
	font-size:140%;
	font-weight: bold;
	display: inline-block;
}


section.guide{
	width: 870px;
	margin: auto;
	text-align: center;
	margin-bottom:80px;
}

#guide .pr_border {
  position: relative;
  color: #ee0d5c;
  font-size: 42px;
  font-weight: 700;
  width: 100%;
  padding: 5px 0;
}
#guide .pr_border span {
  position: relative;
}
#guide .pr_border span::after {
  content: '';
  position: absolute;
  background: url(/kaden/_assets/images/common/bg_shadow_red.webp) no-repeat;
  background-size: 100% 12px;
  width: 100%;
  height: 12px;
  left: 0;
  bottom: -2px;
  right: 0;
  margin: auto;
}

#guide .arow_down{
	background: url(/kaden/_assets/images/guide/arrow_big.webp) no-repeat center center;
	width:100%;
	height:60px;
	margin:auto;
}

/*box_free*/

#guide .three_column.box-present > *{
	width:31.5%;
}
#guide .three_column.box-present dd span{
	font-size: 75%;
	line-height: 1.4;
	display: block;
}
#guide .three_column.box-present dd em{
	color: #00BCD8;
	font-weight: bold;
	font-size: 120%;
}
#guide .three_column dl:nth-child(1) img{
	width: 237px;
	height: 165px;
}
#guide .three_column dl:nth-child(2) img{
	width: 216px;
	height: 157px;
}
#guide .three_column dl:nth-child(3) img{
	width: 204px;
	height: 139px;
}
#guide .three_column dt{
	display:flex;
	justify-content:center;
	align-items: center;
	margin-bottom:10px;
}

#guide .pr_box{
	border: 2px solid #00BCD8;
	border-radius: 10px;
}

#guide .pr_box .pr_title{
	color: #00A5BE;
	font-size: 130%;
	font-weight: bold;
	padding:16px;
	background: #D2F0F5 0% 0% no-repeat padding-box;
	border-radius: 10px 10px 0px 0px;
}
#guide .two_column,#guide .pr_box dl{
	display: flex;
	justify-content:center;
	align-items: center;
	flex-wrap: wrap;
}
#guide .pr_box dl.-reverse{
	flex-direction: row-reverse;
}

#guide .pr_box ul{
	margin: auto;	
}
#guide .pr_box li:first-of-type{
	border-right:2px dotted #D2F0F5;
	padding:0 16px 0 0px;
}
#guide .pr_box li:last-of-type{
	width:420px;
}
#guide .pr_box dl{
	margin-top:-10px;
}
#guide .pr_box dt img{
	width:auto;
	height: 110px;
}
#guide .pr_box dd{
	position: relative;
	border-radius: 10px;
	background: #9BE4EF;
	padding:8px 10px;
	display: flex;
	align-items: center;
	margin-left:1em;
	z-index: 0;
}
#guide .pr_box dd:after{
	content:"\f2ec";
	position: absolute;
	color:#9BE4EF;
	font-family: "Font Awesome 6 pro";
	font-weight: 700;
	font-size:0.8em;
	left:-1em;
	width:1em;
	height: 1em;
	transform: rotate(-90deg);
	z-index: 1;
}

#guide .pr_box dl.-reverse dd{
	margin-left:0;
	margin-right:1em;
}

#guide .pr_box dl.-reverse dd:after{
	left:unset;
	right:-1em;
	transform: rotate(90deg);
}


#guide .pr_box .pr_border {
	font-size:28px;
	line-height: 1;
}

#guide .pr_box figure img{
	width:auto;
	height: 170px;
}


@media (max-width: 768px) {
	#guide #wrap{
		padding-top:105px;
	}
	#guide #main_bg {
		height: 300px!important;
	}
	#guide #main_bg #main_visual {
			background-size:340px auto!important;
			height: 300px!important;
	}

	#guide.purchase_info #main_bg #main_visual {
		background-size:320px auto!important;
	}
	#guide.guarantee #main_bg #main_visual {
		background:url(/kaden/_assets/images/guide/guarantee/mv_guarantee.webp) no-repeat center bottom -30px;
		background-size:250px auto!important;
	}
	#guide.comparison_guide #main_bg #main_visual {
		background:url(/kaden/_assets/images/guide/comparison/mv_comparison.webp) no-repeat center bottom -10px;
		background-size:250px auto!important;
	}
	#guide #main_visual .headline{
		width:100%;
	}
	#guide #main_visual .inner{
		top:4px;
	}

	#guide #main_bg h2{
		line-height: 1;
	}

	#guide section{
		width: auto;
		margin-bottom:20px;
	}
	#guide .fzxl{
		font-size:120%!important;
	}
	#guide .fzml{
		font-size:100%!important;
	}
	#guide .pr_border {
		font-size:180%;
	}
	#guide .pr_border span::after {
	  height: 12px;
	  bottom: -12px;
	}
	.mat15{
		margin-top:1vw!important;
	}

	#guide .three_column.box-present > *{
		float: none;
		width: 100%;
	}

	#guide .three_column dd{
		margin-bottom:20px;
	}
	#guide .three_column dl:last-of-type dd{
		margin-bottom:0;
	}
	#guide .pr_box .two_column{
		display: block;
	}
	#guide .pr_box li:first-of-type{
		margin-bottom:30px;
		border-bottom:2px dotted #D2F0F5;
	}
	#guide .pr_box li:last-of-type{
		width:auto;
	}

	#guide .pr_box p{
		line-height: 1.6;
	}
	#guide .pr_box .pr_border {
		font-size:180%;
		line-height: 1;
	}
	#guide .pr_box figure{
		margin:1em auto 2em;
	}
	#guide .pr_box figure img{
		height:120px;
	}
	#guide .arow_down{
		background: url(/kaden/_assets/images/guide/arrow_big_sp.webp) no-repeat center center;
		background-size: auto 50px;
		width:100%;
		height:60px;
	}
}

/*send_free*/

#guide.freedelivery .two_column > *{
	margin:0 30px 40px 0;
	width:calc((100% / 2) - 25px);

}
#guide.freedelivery .two_column > *:nth-child(2n){
	margin:0 0px 40px 0;
}


#guide .point_box{
	position: relative;
	border:2px solid #00BCD8;
	border-radius: 10px;
	padding:30px 0 0;
	text-align: center;
	z-index: 0;
}
#guide .point_box:before{
	content:"";
	display: block;
	position: absolute;
	width:100%;
	height:40%;
	bottom:0;
	background: #D2F0F5;
	border-radius: 0 0 10px 10px;
	z-index: -1;
}
#guide .point_box:after{
	content: "\e0ee";
	display: block;
	position: absolute;
	color:#00BCD8;
	width:0.9em;
	height:0.9em;
	font-size: 3em;
	font-family: "Font Awesome 6 pro";
	font-weight: 700;
	top:-0.8em;
	left:0;
	right:0;
	margin:auto;
	background:#FFFFFF;
	border-radius:50%;
}
#guide .point_box:nth-child(2):after{
	content: "\e0ef";
}
#guide .point_box:nth-child(3):after{
	content: "\e0f0";
}
#guide .point_box:nth-child(4):after{
	content: "\e0f1";
}

#guide .point_box dt{
	position: relative;
	font-size:120%;
	font-weight: bold;
}
#guide .point_box dt:after{
	content:"";
	display: block;
	position: absolute;
	width: 100%;
	height: 12px;
	bottom:-1vw;
	margin: auto;
	background: url(/kaden/_assets/images/common/bg_shadow_blue.webp) no-repeat center bottom;
	background-size: 60% 12px;
}
#guide .point_box dt span{
	font-size:140%;
	color:#00BCD8;
}
#guide .point_box dd{
	z-index: 0;
	padding:0 16px 30px;
}
#guide .point_box figure {
	margin: 20px auto;
}
#guide .point_box figure img{
	width:70%;
	height: auto;
}
#guide .comparison{
	margin-top:-40px;
}
#guide .comparison_wrap{
	align-items: center;
	margin-top:-8%;
}
#guide .comparison_wrap figure{
	top:0;
}
#guide .comparison_text{
	font-size:24px;
	background: url(/kaden/_assets/images/common/arrow_bottom.webp) no-repeat center top;
	margin-bottom:0;
}
#guide .comparison_text em.highlight{
	font-size:140%;
}
#guide .comparison_wrap figure img{
	width:290px;
}

@media (max-width: 768px) {

	#guide.freedelivery .two_column > *{
		margin:0 20px 40px 0;
		width:calc((100% / 2) - 20px);
	}
	#guide .point_box figure img{
		width:24vw;
	}
	#guide .point_box figure {
		margin: 10px auto;
	}
	#guide .point_box dd{
		padding:0 16px 10px;
	}
	#guide .comparison_wrap{
		margin-top:-4%;
	}
	#guide .comparison_text{
		font-size:120%;
		background-size: 16vw;
	}
	#guide .comparison_wrap figure img{
		width:90%;
	}

}
@media (max-width: 420px) {
	#guide.freedelivery .two_column > *{
		margin:0 0 40px 0;
		width:100%;
	}

	#guide .point_box figure img{
		width:40vw;
	}
}

/*purchase_info*/

#guide .introduction dl{
	display: flex;
	justify-content:center;
	align-items: center;
	
}
#guide .introduction dl.-reverse{
	flex-direction: row-reverse;
}

#guide .introduction dl{
	margin-top:-10px;
}
#guide .introduction dl:nth-child(2){
	margin-top:10px;
}
#guide .introduction dt img{
	width:auto;
	height: 110px;
}
#guide .introduction dd{
	position: relative;
	font-size: 120%;
	border-radius: 10px;
	background: #eeeeee;
	padding:30px 20px;
	display: flex;
	align-items: center;
	margin-left:1em;
	z-index: 0;
}
#guide .introduction dd:after{
	content:"\f2ec";
	position: absolute;
	color:#eeeeee;
	font-family: "Font Awesome 6 pro";
	font-weight: 700;
	font-size:0.8em;
	left:-1em;
	width:1em;
	height: 1em;
	transform: rotate(-90deg);
	z-index: 1;
}

#guide .introduction dl.-reverse dd{
	margin-left:0;
	margin-right:1em;
}

#guide .introduction dl.-reverse dd:after{
	left:unset;
	right:-1em;
	transform: rotate(90deg);
}
#guide .pr_box figure{
	padding:10px 20px 0;
}
#guide figure img.big {
	width:400px;
	height: auto;
}

@media (max-width: 768px) {
		#guide .introduction dl:nth-child(2){
			margin-top:0px;
		}
		#guide .introduction dd{
				font-size:100%;
				padding:16px 10px;
		}

		#guide figure img.big {
			width:100%;
		}

}


/*guarantee*/
#guide .genre_list li{
		border:1px solid #cccccc;
}

#guide .purchase .genre_list li span {
	font-size:14px;
}
#guide .purchase .genre_list {
	margin-left:15px;
}
#guide .purchase .genre_list li{
	width:calc(32.333% - 15px);
	margin:0 15px 15px 0;
}
#guide .guarantee_ok{
	margin-top:20px;
	border:4px solid #00BCD8;
	border-radius: 6px;
	padding:20px 16px;
	
}
#guide .guarantee_ok h3{
	font-size:140%;
	font-weight: bold;
	color:#00BCD8;
	padding-bottom:70px;
	background: url(/kaden/_assets/images/guide/guarantee/ok.webp) no-repeat bottom center;
	background-size:181px auto;
}
#guide .guarantee_ok ul{
	margin:20px 80px 0;
}
#guide .guarantee_ok li{
	position: relative;
	padding-left:1.5em;
	margin-bottom:6px;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
#guide .guarantee_ok li a{
	width:calc(100% /2 - 16px);
	margin:0 10px 10px 0;
}
#guide .guarantee_ok li p:{

	position: relative;
}
#guide .guarantee_ok li p:before{
	content:"\f132";

	position: absolute;
	width:1em;
	height: 1em;
	font-family: "Font Awesome 6 pro";
	font-weight: 700;
	color:#00BCD8;
	left:0;

}

#guide .guarantee_ng{
	margin-top:20px;
	border:4px solid #000000;
	border-radius: 6px;
	padding:20px 16px;
}
#guide .guarantee_ng h3{
	font-size:140%;
	font-weight: bold;
	color:#000000;
	padding-bottom:60px;
	background: url(/kaden/_assets/images/guide/guarantee/ng.webp) no-repeat bottom center;
	background-size:60px auto;
}


#guide .guarantee_ng ul{
	margin:20px 0px 0 100px;
}
#guide .guarantee_ng li{
	position: relative;
	padding-left:1.5em;
	margin-bottom:6px;
	text-align: left;
}
#guide .guarantee_ng li:before{
	content:"\f071";
	display: block;
	position: absolute;
	width:1em;
	height: 1em;
	font-family: "Font Awesome 6 pro";
	font-weight: 700;
	color:#000000;
	left:0;
	top:0;
}

@media (max-width: 768px) {
	#guide .purchase .genre_list {
		margin-left:5px;
	}
	#guide .purchase .genre_list li{
		width: calc(32.333% - 7px);
    padding: 5px;
    margin: 0 10px 10px 0 !important;
	}
	#guide .guarantee_ok ul,
	#guide .guarantee_ng ul{
		margin:20px 10px 0;
	}
}


/*comparison*/

#guide.comparison_guide .comparison_text {
    font-size: 18px;
    background: url(/kaden/_assets/images/common/arrow_bottom.webp) no-repeat left 300px top;
  }

#guide.comparison_guide section{
	padding:40px 14px;
}



 @media (max-width: 768px) {
 		#guide.comparison_guide .comparison_text {
    font-size: 120%;
    background: url(/kaden/_assets/images/common/arrow_bottom.webp) no-repeat left 28vw top;
    background-size: 16vw;
  }
  #guide.comparison_guide .comparison_text p{
  	padding:0 4%;
  }
 }