/* Y'S GEAR : /wishlist/css/wishlist.css */


.contentsWidth .sp { display: none; }

@media screen and (max-width: 568px) {
	.contentsWidth .pc { display: none; }
} /* */

/*======================================================================*
 *  [ introTxt ] 
 *======================================================================*/

.introTxt {
	margin-bottom: 60px;
	padding: 4% 38% 6% 20px;
	border-radius: 15px;
	background: url(../img/img_intro.png) right 20px center no-repeat #fffdec;
	background-size: 34.69% auto;
	text-align: center;
}
.introTxt p + p { margin-top: 7%; }
.introTxt p + p img { width: 73%; }

@media screen and (max-width: 568px) {
	.introTxt {
		margin-bottom: 30px;
		padding: 20px 10px 150px;
		background-position: center bottom;
		background-size: 200px auto;
	}
	.introTxt p + p { margin-top: 20px; }
	.introTxt p + p img { width: 90%; }
} /* */


/*======================================================================*
 *  [ stepBox ] 
 *======================================================================*/

.stepBox {
	margin-bottom: 80px;
	padding: 0 20px;
	font-size: 1.4rem;
}

/* [ Title ] */
.stepBox h2 {
	display: table;
	width: calc(100% + 40px);
	height: 88px;
	margin: 0 -20px 20px;
	background: #f0f1f8;
	line-height: 1.2;
}
.stepBox h2 > * {
	display: table-cell;
	vertical-align: middle;
}
.stepBox h2 span {
	position: relative;
	width: 76px;
	padding: 0 20px;
	background: #363a90;
	text-align: center;
}
.stepBox h2 span::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	height: 0;
	margin: -8px -14px 0 0;
	border: 8px solid transparent;
	border-right: none;
	border-left: 14px solid #363a90;
	content: "";
}
.stepBox h2 b {
	padding: 0 20px 0 30px;
	color: #363a90;
	font-size: 2rem;
}
.stepBox h2 b::before {
	display: inline-block;
	width: 62px;
	height: 62px;
	margin-right: 20px;
	background-position: center center;
	vertical-align: middle;
	content: "";
}
#step1 h2 b::before { background-image: url(../img/icon_step1.png); }
#step2 h2 b::before { background-image: url(../img/icon_step2.png); }
#step3 h2 b::before { background-image: url(../img/icon_step3.png); }

/* [ ディスクリプション ] */
.stepBox .desc {
	margin-bottom: 40px;
	font-size: 1.6rem;
}

/* [ 注釈 ] */
.stepBox .notes {
	margin: 15px 0;
	padding: 15px 20px;
	background: #ffebeb;
	color: #ff0000;
}
.stepBox .note {
	margin: 5px 0;
	padding-left: 1em;
	text-indent: -1em;
	color: #ff0000;
	font-size: 1.2rem;
}
.stepBox span.note { display: inline-block; }

/* [ アイコン ] */
.stepBox .icon {
	display: inline-block;
	margin: 1px 5px;
	vertical-align: middle;
}

/* [ リンク ] */
.stepBox a.link {
	display: inline-block;
	color: #363a90;
	text-decoration: underline;
}
.stepBox a.link:hover, 
.stepBox a.link:active { text-decoration: none; }
.stepBox a.link::before {
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 5px;
	border: 4px solid transparent;
	border-right: none;
	border-left: 7px solid #363a90;
	content: "";
}

/* [ flex ] */
.stepBox .flex {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	margin: 30px 0;
}
.stepBox .flex > * { width: calc(50% - 10px); }
.stepBox .flex > * + * { margin-left: 20px; }

/* [ 画像 ] */
.stepBox figure { text-align: center; }
.stepBox figcaption { margin-bottom: 5px; }
.stepBox img + figcaption { margin: 5px 0 0; }

/* [ List ] */
.stepBox .list dt {
	margin-bottom: 5px;
	padding-left: 2em;
	font-size: 1.6rem;
	font-weight: bold;
}
.stepBox .list dd + dt {
	margin-top: 20px;
}
.stepBox .list dt::before {
	display: inline-block;
	width: 1.4em;
	margin: 0 .5em 0 -2em;
	border-radius: 50%;
	background: #cc1533;
	color: #fff;
	line-height: 1.4;
	text-align: center;
}
.stepBox .list dt.n1::before { content: "1"; }
.stepBox .list dt.n2::before { content: "2"; }
.stepBox .list dt.n3::before { content: "3"; }
.stepBox .list dt.n4::before { content: "4"; }
.stepBox .list dt.n5::before { content: "5"; }

@media screen and (max-width: 568px) {
	.stepBox {
		margin-bottom: 40px;
		padding: 0;
	}
	
	/* [ Title ] */
	.stepBox h2 {
		width: calc(100% + 20px);
		height: auto;
		margin: 0 -10px 15px;
	}
	.stepBox h2 span {
		width: 55px;
		padding: 20px 10px;
	}
	.stepBox h2 span::after {
		margin: -6px -11px 0 0;
		border-width: 6px;
		border-left-width: 11px;
	}
	.stepBox h2 b {
		padding: 20px 10px 20px 15px;
		font-size: 1.8rem;
	}
	.stepBox h2 b::before { display: none; }
	
	/* [ ディスクリプション ] */
	.stepBox .desc { margin-bottom: 20px; }
	
	/* [ 注釈 ] */
	.stepBox .notes { padding: 10px; }
	
	/* [ flex ] */
	.stepBox .flex {
		display: block;
		margin: 20px 0;
	}
	.stepBox .flex > * {
		width: 100%;
		max-width: 100% !important;
	}
	.stepBox .flex > * + * { margin: 20px 0 0; }
} /* */


/*======================================================================*
 *  [ noteBox ] 
 *======================================================================*/

.noteBox {
	margin-bottom: 60px;
	padding: 20px;
	border: 2px solid #e6e6e6;
	background: #f8f7f7;
}
.noteBox dt {
	margin-bottom: 15px;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}
.noteBox dd {
	margin-top: 5px;
	padding-left: 1.2rem;
}
.noteBox dd::before {
	display: inline-block;
	width: 1.2rem;
	margin-left: -1.2rem;
	content: "●";
}

@media screen and (max-width: 568px) {
	.noteBox {
		margin-bottom: 50px;
		padding: 10px;
	}
	.noteBox dt { margin-bottom: 10px; }
} /* */