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


.contentsWidth * { box-sizing: border-box; }
.contentsWidth a, 
.contentsWidth span, 
.contentsWidth b { display: inline-block; }

.contentsWidth .note {
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.2;
}

.contentsWidth .notes li {
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.2;
}
.contentsWidth .notes li + li { margin-top: 10px; }

@media screen and (max-width: 568px) {
} /* */



/*======================================================================*
 *  [ 選択肢 ] 
 *======================================================================*/

.checkList {
	font-size: 1.3rem;
	line-height: 1.2;
}
.checkList li {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	min-height: 50px;
	padding: 10px 10px 10px 40px;
	background: #f2f2f2;
	cursor: pointer;
}
.checkList li, 
.checkList li * {
	text-decoration: underline;
}
.checkList li + li {
	margin-top: 10px;
}
.checkList li::before, 
.checkList li::after {
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	box-sizing: border-box;
	content: "";
}
.checkList li::before {
	border: 2px solid #aeaeae;
	background: #fff;
}
.checkList li::after {
	display: none;
	background: url(../img/icon_check.svg) center center no-repeat;
}
.checkList li > b, 
.checkList li > span {
	width: 100%;
}
.checkList li b {
	font-size: 1.6rem;
}
.display .checkList li b { font-size: 1.4rem; }
.checkList li figure {
	width: 70px;
	margin-right: 10px;
}
.checkList li p {
	width: calc(100% - 80px);
	line-height: 1.4;
}

/* [ 必須 / 重要アイテム ] */
.checkList li[data-type="必須"] > p::before, 
.checkList li[data-type="重要"] > p::before {
	position: absolute;
	width: 3em;
	padding: 2px 0;
	background: #cc1533;
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}
.checkList li[data-type="必須"] > p::before { content: "必須"; }
.checkList li[data-type="重要"] > p::before { content: "重要アイテム"; }
.checkList li[data-type="必須"]::after, 
.checkList li[data-type="重要"]::after { background-image: url(../img/icon_check_req.svg); }

/* [ チェック済 ] */
.checkList li.check {
	background: #0076bf !important;
	color: #fff;
}
.checkList li.check::before { border-color: #fff; }
.checkList li.check::after { display: block; }

@media screen and (max-width: 568px) {
	.checkList li figure { width: 50px; }
	.checkList li b { font-size: 1.4rem; }
} /* */


/*======================================================================*
 *  [ ナビゲーション ] 
 *======================================================================*/

.simNav {
	display: -webkit-flex;
	display: flex;
	border: 2px solid #c7c7c7;
	background: #fff;
	overflow: hidden;
	-webkit-transition: all ease .3s;
	transition: all ease .3s;
}
.simNav a {
	display: -webkit-flex;
	display: flex;
	-webkit-align-content: center;
	align-content: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	padding: 0 10px 0 20px;
	height: 70px;
	color: #000;
}
.simNav a + a { padding-left: 35px; }
.simNav a:nth-child(1) { z-index: 5; }
.simNav a:nth-child(2) { z-index: 4; }
.simNav a:nth-child(3) { z-index: 3; }
.simNav a:nth-child(4) { z-index: 2; }
.simNav a:nth-child(5) { z-index: 1; }
.simNav a::before, 
.simNav a::after {
	position: absolute;
	top: 50%;
	left: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	content: "";
}
.simNav a::before{
	border: 40px solid transparent;
	border-right: none;
	border-left: 14px solid #c7c7c7;
}
.simNav a::after{
	border: 35px solid transparent;
	border-right: none;
	border-left: 12px solid #fff;
}
.simNav a > span, 
.simNav a > b { width: 100%; }
.simNav a > span {
	margin-bottom: 3px;
	color: #727272;
	font-size: 1rem;
	font-weight: bold;
	white-space: nowrap;
}
.simNav a > b {
	font-size: 1.6rem;
	line-height: 1.1;
}

/* [ active ] */
.simNav a.active { background: #ebf7ff; }
.simNav a.active::after { border-left-color: #ebf7ff; }
.simNav a.active > span, 
.simNav a.active > b { color: #0076bf; }

/* [ 固定用 ] */
.simNav.fixed {
	position: fixed;
	top: 0;
	left: 50%;
	width: 100%;
	max-width: 980px;
	margin: 0;
	-webkit-transform: translateX(-50%) translateY(-100%);
	transform: translateX(-50%) translateY(-100%);
	z-index: 500;
}
.simNav.fixed.show {
	-webkit-transform: translateX(-50%) translateY(0);
	transform: translateX(-50%) translateY(0);
}

@media screen and (max-width: 768px) {
	.simNav { margin: 0 -10px; }
	.simNav a { padding: 0 10px; }
	.simNav a + a { padding-left: 25px; }
} /* */

@media screen and (max-width: 568px) {
	.simNav a {
		height: 60px;
		padding: 0 0 0 5px;
	}
	.simNav a + a { padding-left: 15px; }
	.simNav a:nth-child(5) { padding-right: 0; }
	.simNav a::before { border-left-width: 10px; }
	.simNav a::after { border-left-width: 8px; }
	.simNav a > b { font-size: 1.2rem; }
	.simNav a > b span { display: none; }
	
} /* */


/*======================================================================*
 *  [ 便利な機能！ ] 
 *======================================================================*/

.simTxt {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	margin-bottom: 50px;
	padding: 25px 0;
	border-bottom: 1px dashed #bababa;
}
.simTxt dt, 
.simTxt dd { padding: 0 20px; }

/* [ タイトル ] */
.simTxt dt {
	font-size: 2rem;
	font-weight: bold;
	white-space: nowrap;
}

/* [ テキスト ] */
.simTxt dd {
	border-left: 2px solid #d2d2d2;
	font-size: 1.4rem;
}

/* [ 注釈 ]*/
.simTxt dd span {
	padding-left: 1.5em;
	color: #666;
	font-size: 1.2rem;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M505.095,407.125L300.77,53.208c-9.206-15.944-26.361-25.849-44.774-25.849c-18.412,0-35.552,9.905-44.751,25.849L6.905,407.109c-9.206,15.944-9.206,35.746,0,51.69c9.206,15.944,26.354,25.842,44.758,25.842h408.674c18.405,0,35.568-9.897,44.759-25.842C514.302,442.855,514.302,423.053,505.095,407.125z%20M256.004,426.437c-17.668,0-32.013-14.33-32.013-32.004c0-17.668,14.345-31.997,32.013-31.997c17.667,0,31.997,14.329,31.997,31.997C288.001,412.108,273.671,426.437,256.004,426.437z%20M275.72,324.011c0,10.89-8.834,19.709-19.716,19.709c-10.898,0-19.717-8.818-19.717-19.709l-12.296-144.724c0-17.676,14.345-32.005,32.013-32.005c17.667,0,31.997,14.33,31.997,32.005L275.72,324.011z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') top 1px left no-repeat;
	background-size: 14px 14px;
}

@media screen and (max-width: 568px) {
	.simTxt {
		display: block;
		margin-bottom: 30px;
		padding: 20px 0;
		border-bottom: 1px dashed #bababa;
	}
	.simTxt dt, 
	.simTxt dd { padding: 0; }
	
	/* [ タイトル ] */
	.simTxt dt {
		margin-bottom: 5px;
		font-size: 1.6rem;
	}
	
	/* [ テキスト ] */
	.simTxt dd {
		border-left: none;
		font-size: 1.3rem;
	}
} /* */


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

.catWrap + .catWrap {
	margin-top: 60px;
}
.catWrap > header {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	position: relative;
	height: 60px;
	padding: 0 10px 0 20px;
	border-right: 60px solid #000;
	background: #000;
	color: #fff;
	cursor: pointer;
}
_:-ms-fullscreen, :root .catWrap > header { /* IEハック */
	justify-content: flex-start;
}
.catWrap > header::before, 
.catWrap > header::after {
	position: absolute;
	top: 50%;
	right: -30px;
	background: #fff;
	-webkit-transform: translateX(50%) translateY(-50%);
	transform: translateX(50%) translateY(-50%);
	content: "";
}
.catWrap > header::before {
	width: 22px;
	height: 6px;
}
.catWrap > header::after {
	width: 6px;
	height: 22px;
}
.catWrap > header.active::after { display: none; }
.catWrap > header h2, 
.catWrap > header p { line-height: 1.2; }
.catWrap > header h2 {
	margin-right: 20px;
	font-size: 2rem;
	white-space: nowrap;
}
.catWrap > header p {
	font-size: 1.4rem;
	font-weight: bold;
}
.catWrap > header + * {
	display: none;
	padding: 20px 10px;
	border: 10px solid #000;
	border-top: none;
}

.catWrap .separation {
	margin: 40px -10px;
	height: 10px;
}

/* [ 本体 ] */
.catWrap.display > header {
	border-color: #00378f;
	background: #0076bf;
}
.catWrap.display > header + * { border-color: #0076bf; }
.catWrap.display .separation { background: #0076bf; }

/* [ 振動子（魚探）・ソナー ] */
.catWrap.sonar > header {
	border-color: #0a83af;
	background: #33b7d3;
}
.catWrap.sonar > header + * { border-color: #33b7d3; }
.catWrap.sonar .separation { background: #33b7d3; }

/* [ レーダー ] */
.catWrap.radar > header {
	border-color: #31850c;
	background: #70b837;
}
.catWrap.radar > header + * { border-color: #70b837; }
.catWrap.radar .separation { background: #70b837; }

/* [ オプション ] */
.catWrap.option > header {
	border-color: #5c5c5c;
	background: #999;
}
.catWrap.option > header + * { border-color: #999; }
.catWrap.option .separation { background: #999; }

@media screen and (max-width: 768px) {
	.catWrap > header {
		display: block;
		height: auto;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.catWrap > header h2 { margin-bottom: 5px; }
} /* */

@media screen and (max-width: 568px) {
	.catWrap + .catWrap { margin-top: 40px; }
	.catWrap > header {
		padding: 10px;
		border-right-width: 46px;
	}
	.catWrap > header::before, 
	.catWrap > header::after { right: -23px; }
	.catWrap > header::before {
		width: 18px;
		height: 4px;
	}
	.catWrap > header::after {
		width: 4px;
		height: 18px;
	}
	.catWrap > header h2 {
		margin-right: 0;
		font-size: 1.8rem;
		white-space: normal;
	}
	.catWrap > header p {
		font-size: 1.3rem;
		font-weight: normal;
	}
	.catWrap > header + * { padding: 15px 10px; }
	
	.catWrap .separation {
		margin: 25px -10px;
	}
} /* */


/*======================================================================*
 *  [ シリーズ ] 
 *======================================================================*/

.seriesBox + .seriesBox { margin-top: 20px; }
.seriesBox > header {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	border-bottom: 4px solid #000;
}
.seriesBox > header h3, 
.seriesBox > header p {
	line-height: 1.2;
}
.seriesBox > header h3 {
	padding: 5px 10px 2px;
	background: #000;
	color: #fff;
	font-size: 2rem;
}
.seriesBox > header p {
	padding: 0 10px;
	font-size: 1.6rem;
	font-weight: bold;
	white-space: nowrap;
}

@media screen and (max-width: 768px) {
	.seriesBox > header h3 { width: 55%; }
} /* */

@media screen and (max-width: 768px) {
	.seriesBox + .seriesBox { margin-top: 10px; }
	.seriesBox > header {
		display: block;
		border-bottom: 4px solid #000;
		text-align: center;
	}
	.seriesBox > header h3 {
		padding: 7px 10px;
		width: 100%;
		font-size: 1.6rem;
	}
	.seriesBox > header p {
		padding: 5px 10px;
		font-size: 1.4rem;
	}
} /* */


/*======================================================================*
 *  [ カテゴリ ] 
 *======================================================================*/

.categoryBox + .categoryBox { margin-top: 20px; }
.categoryBox > header {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: 4px solid #000;
}
.categoryBox > header h3, 
.categoryBox > header p {
	line-height: 1.2;
}
.categoryBox > header h3 {
	font-size: 1.8rem;
	margin-right: 10px;
	white-space: nowrap;
}
.categoryBox > header p { font-size: 1.4rem; }

@media screen and (max-width: 568px) {
	.categoryBox > header {
		display: block;
		padding-bottom: 5px;
	}
	.categoryBox > header h3 {
		margin-bottom: 5px;
		font-size: 1.6rem;
	}
	.categoryBox > header p { font-size: 1.3rem; }
} /* */


/*======================================================================*
 *  [ 商品 ] 
 *======================================================================*/

.itemBox {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 20px 0;
}
.itemBox + .itemBox { border-top: 1px solid #a0a0a0; }
.itemBox > * {
	width: calc(33.33% - 27px);
	margin-left: 20px;
}

/* [ テキスト ] */
.itemBox .text p, 
.itemBox .text ul { font-size: 1.4rem; }
.itemBox .text ul { line-height: 1.2; }
.itemBox .text li {
	margin-top: 5px;
	padding-left: 1em;
}
.itemBox .text li::before {
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	font-weight: bold;
	content: "・";
}
.itemBox .text li span {
	color: #666;
	font-size: 1.3rem;
}

/* [ 注釈 ] */
.itemBox .text .note {
	margin-top: 20px;
	color: #cc1533;
	font-size: 1.2rem;
}
.itemBox .text .notes {
	margin-top: 20px;
	color: #cc1533;
	font-size: 1.2rem;
}
.itemBox .text .notes li + li { margin-top: 5px; }
.itemBox .text .notes li::before { display: none; }

/* [ リンク ] */
.itemBox .text a {
	margin-top: 20px;
	padding: 10px 10px 10px 25px;
	border: 2px solid #b8b8b8;
	background: url(../img/icon_detail.svg) left 10px center no-repeat;
	font-size: 1.3rem;
	line-height: 1;
}

/* [ 選択 ] */
.itemBox .select {
	border-left: 1px solid #f2f2f2;
	padding-left: 19px;
}

@media screen and (max-width: 768px) {
	.itemBox > * {
		width: calc(50% - 30px);
		margin-left: 20px;
	}
	
	/* [ 選択 ] */
	.itemBox .select {
		width: 100%;
		margin: 20px 0 0;
		padding: 10px 20px 0;
		border-top: 1px solid #f2f2f2;
		border-left: none;
	}
	.itemBox .checkList {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.itemBox .checkList li {
		width: calc(50% - 10px);
		margin: 10px 0 0 20px;
	}
	.itemBox .checkList li:nth-child(2n+1) { margin-left: 0; }
} /* */

@media screen and (max-width: 568px) {
	.itemBox { display: block; }
	.itemBox > * {
		width: 100%;
		margin-left: 0;
		padding: 0 10px;
	}
	
	/* [ 画像 ] */
	.itemBox figure {
		margin-bottom: 10px;
		text-align: center;
	}
	.itemBox figure img {
		width: 100%;
		max-width: 250px;
	}
	
	/* [ テキスト ] */
	.itemBox .text p, 
	.itemBox .text ul { font-size: 1.3rem; }
	
	/* [ 注釈 ] */
	.itemBox .text .note { margin-top: 10px; }
	
	/* [ リンク ] */
	.itemBox .text a { margin-top: 10px; }
	
	/* [ 選択 ] */
	.itemBox .select { padding: 10px 10px 0; }
	.itemBox .checkList { display: block; }
	.itemBox .checkList li {
		width: 100%;
		margin: 10px 0 0 !important;
	}
} /* */


/*======================================================================*
 *  [ 2ステーション ] 
 *======================================================================*/

.twostItem {
	position: relative;
	margin-top: 60px;
	background: #dce9f3;
}
.twostItem::before {
	position: absolute;
	top: -40px;
	right: 0;
	left: 0;
	width: 100%;
	border-top: 2px dotted #2f8fcb;
	content: "";
}

/* [ タイトル ] */
.twostItem header {
	position: relative;
	padding: 15px 20px;
	cursor: pointer;
}
.twostItem header::before, 
.twostItem header::after {
	position: absolute;
	top: 50%;
	right: 31px;
	background: #0076bf;
	-webkit-transform: translateX(50%) translateY(-50%);
	transform: translateX(50%) translateY(-50%);
	content: "";
}
.twostItem header::before {
	width: 22px;
	height: 6px;
}
.twostItem header::after {
	width: 6px;
	height: 22px;
}
.twostItem header.active::after { display: none; }
.twostItem header h3 {
	color: #0076bf;
	font-size: 1.8rem;
	line-height: 1.2;
	text-align: center;
}
.twostItem header span {
	position: absolute;
	top: 50%;
	right: 55px;
	color: #0076bf;
	font-size: 1.3rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.twostItem header span::after { content: "開く"; }
.twostItem header.active span::after { content: "閉じる"; }

/* [ 中身 ] */
.twostItem header + * {
	display: none;
	padding: 0 20px 20px;
}

/* [ 注釈 ] */
.twostItem .note {
	margin-bottom: 5px;
	font-size: 1.4rem;
}

/* [ 選択肢 ] */
.twostItem .checkList {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.twostItem .checkList li {
	width: calc(33.33% - 13.33px);
	margin: 10px 0 0 20px;
	background: #fff;
}
.twostItem .checkList li:nth-child(3n+1) { margin-left: 0; }

@media screen and (max-width: 768px) {
	/* [ 選択肢 ] */
	.twostItem .checkList li { width: calc(50% - 10px); }
	.twostItem .checkList li:nth-child(3n+1) { margin-left: 20px; }
	.twostItem .checkList li:nth-child(2n+1) { margin-left: 0; }
} /* */

@media screen and (max-width: 568px) {
	.twostItem { margin-top: 40px; }
	.twostItem::before { top: -30px; }
	
	/* [ タイトル ] */
	.twostItem header {
		padding: 15px 33px 15px 10px;
		font-size: 1.6rem;
	}
	.twostItem header::before, 
	.twostItem header::after { right: 19px; }
	.twostItem header::before {
		width: 18px;
		height: 4px;
	}
	.twostItem header::after {
		width: 4px;
		height: 18px;
	}
	.twostItem header h3 { text-align: left; }
	.twostItem header span { display: none; }
	
	/* [ 中身 ] */
	.twostItem header + * { padding: 0 10px 10px; }
	
	/* [ 注釈 ] */
	.twostItem .note {
		margin-bottom: 0;
		font-size: 1.2rem;
	}
	
	/* [ 選択肢 ] */
	.twostItem .checkList { display: block; }
	.twostItem .checkList li {
		width: 100%;
		margin: 10px 0 0 !important;
	}
} /* */


/*======================================================================*
 *  [ 関連商品 ] 
 *======================================================================*/

.relatedItem {
	display: none;
	width: 100%;
	margin: 20px 0 0;
	padding: 20px;
	/* border-top: 20px solid #fff; */
	background: #ebebeb;
}

/* [ タイトル ] */
.relatedItem dt {
	margin-bottom: 5px;
	color: #333;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
}

/* [ 選択肢 ] */
.relatedItem .checkList {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.relatedItem .checkList li {
	width: calc(33.33% - 13.33px);
	margin: 10px 0 0 20px;
	background: #fff;
}
.relatedItem .checkList li:nth-child(3n+1) { margin-left: 0; }

@media screen and (max-width: 768px) {
	/* [ 選択肢 ] */
	.relatedItem .checkList li { width: calc(50% - 10px); }
	.relatedItem .checkList li:nth-child(3n+1) { margin-left: 20px; }
	.relatedItem .checkList li:nth-child(2n+1) { margin-left: 0; }
} /* */

@media screen and (max-width: 568px) {
	.relatedItem { padding: 15px 10px 10px; }
	
	/* [ タイトル ] */
	.relatedItem dt {
		color: #333;
		font-size: 1.4rem;
	}
	
	/* [ 選択肢 ] */
	.relatedItem .checkList { display: block; }
	.relatedItem .checkList li {
		width: 100%;
		margin: 10px 0 0;
		background: #fff;
	}
} /* */


/*======================================================================*
 *  [ 結果 ] 
 *======================================================================*/

.resultWrap {
	position: relative;
	margin: 80px 0 30px;
	padding: 70px 30px 0;
	background: #e4f3fd;
}
.resultWrap::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50px;
	height: 50px;
	background: #fff;
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	content: "";
}

@media screen and (max-width: 980px) {
	.resultWrap {
		margin-right: -20px;
		margin-left: -20px;
	}
} /* */

@media screen and (max-width: 568px) {
	.resultWrap {
		margin: 40px -10px 30px;
		padding: 60px 10px 0;
	}
	.resultWrap::before {
		width: 30px;
		height: 30px;
	}
} /* */


/*======================================================================*
 *  [ 購入商品リスト ] 
 *======================================================================*/

.itemList {
	border: 2px solid #0076bf;
	background: #0076bf;
}

/* [ タイトル ] */
.itemList header {
	position: relative;
	padding: 13px 18px 15px;
	background: url(../img/bg_result.png);
	background-size: 10px 10px;
	text-align: center;
}
.itemList header h2 {
	color: #fff;
	font-size: 2.2rem;
	line-height: 1.2;
}

/* [ リセットボタン ] */
.itemList .resetButton {
	position: absolute;
	top: 50%;
	right: 5px;
	padding: 0 15px 0 10px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
}
.itemList .resetButton::before {
	display: inline-block;
	width: 24px;
	height: 28px;
	margin-right: 7px;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23faf570%22%20d%3D%22M13.5%202c-5.621%200-10.211%204.443-10.475%2010h-3.025l5%206.625%205-6.625h-2.975c.257-3.351%203.06-6%206.475-6%203.584%200%206.5%202.916%206.5%206.5s-2.916%206.5-6.5%206.5c-1.863%200-3.542-.793-4.728-2.053l-2.427%203.216c1.877%201.754%204.389%202.837%207.155%202.837%205.79%200%2010.5-4.71%2010.5-10.5s-4.71-10.5-10.5-10.5z%22%2F%3E%3C%2Fsvg%3E') top center no-repeat;
	vertical-align: middle;
	content: "";
}

/* [ リスト ] */
.itemList ul { background: #fff; }
.itemList li {
	display: none;
	position: relative;
}
.itemList li + li { border-top: 1px solid #c9c9c9; }
.itemList li.check { display: block; }
.itemList li > a {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	padding: 10px 223px 10px 8px;
	color: #000;
}

/* [ 画像 ] */
.itemList li > a figure {
	width: 100px;
	text-align: center;
}
.itemList li > a figure img { width: 70px; }

/* [ 品番・商品名 ] */
.itemList li > a div {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex: 1;
	flex: 1;
}
.itemList li > a span, 
.itemList li > a b { text-decoration: underline; }
.itemList li > a span {
	width: calc(8.5em + 20px);
	font-size: 1.4rem;
	text-align: center;
}
.itemList li > a b {
	-webkit-flex: 1;
	flex: 1;
	padding: 0 10px;
	font-size: 1.6rem;
}

/* [ 必須 ] */
.itemList li[data-type="必須"], 
.itemList li[data-type="重要"] { background: #fff7f7; }
.itemList li[data-type="必須"] > a .text b::before, 
.itemList li[data-type="重要"] > a .text b::before {
	display: block;
	position: relative;
	padding: 2px 0;
	background: #cc1533;
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-decoration: none !important; /* なんで消えないのか解明する */
}
.itemList li[data-type="必須"] > a .text b::before {
	width: 3em;
	content: "必須";
}
.itemList li[data-type="重要"] > a .text b::before {
	width: 7em;
	content: "重要アイテム";
}

/* [ 選択なし ] */
.itemList li.none {
	display: block;
	padding: 30px 20px;
	font-size: 1.6rem;
	text-align: center;
}
.itemList li.check ~ li.none { display: none; }

/* [ ほしいものリストに追加ボタン ] */
.wishButton {
	position: absolute;
	top: 50%;
	right: 18px;
	padding: 5px 10px;
	border: 2px solid #71af2d;
	border-radius: 5px;
	background: #fff;
	color: #333;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 10;
}
.wishButton:hover, 
.wishButton:active { background: #eaf3e0; }
.wishButton::before {
	display: inline-block;
	margin-right: 5px;
	width: 18px;
	height: 18px;
	background: url(/shared/svg/wishlist/icon_wish_green.svg) center center no-repeat;
	background-size: contain;
	vertical-align: text-bottom;
	content: "";
}

@media screen and (max-width: 768px) {
	/* [ 品番・商品名 ] */
	.itemList li > a div { display: block; }
	.itemList li > a span, 
	.itemList li > a b { display: block; }
	.itemList li > a span {
		width: auto;
		padding: 0 10px;
		text-align: left;
	}
	
	/* [ 必須 ] */
	.itemList li[data-type="必須"] > a .text b::before, 
	.itemList li[data-type="重要"] > a .text b::before {
		position: absolute;
		top: 0;
		left: 0;
	}
} /* */

@media screen and (max-width: 568px) {
	/* [ タイトル ] */
	.itemList header { padding: 10px 8px; }
	.itemList header h2 { font-size: 1.8rem; }
	
	/* [ リセットボタン ] */
	.itemList .resetButton {
		top: -7px;
		right: -2px;
		padding: 2px 7px;
		border-radius: 5px;
		background: #7fbadf;
		font-size: 1.3rem;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	.itemList .resetButton::before {
		width: 20px;
		height: 22px;
		background-size: contain;
	}

	/* [ リスト ] */
	.itemList li > a {
		padding: 10px 10px 50px;
		color: #000;
	}
	
	/* [ 画像 ] */
	.itemList li > a figure { width: 50px; }
	.itemList li > a figure img { width: 50px; }
	
	/* [ 品番・商品名 ] */
	.itemList li > a span { font-size: 1.2rem; }
	.itemList li > a b { font-size: 1.4rem; }
	
	/* [ 選択なし ] */
	.itemList li.none {
		padding: 20px 10px;
		font-size: 1.4rem;
	}
	
	/* [ ほしいものリストに追加ボタン ] */
	.wishButton {
		top: auto;
		bottom: 10px;
		right: auto;
		left: 50%;
		padding: 5px 7px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		white-space: nowrap;
	}
} /* */


/*======================================================================*
 *  [ 完了吹き出し ] 
 *======================================================================*/

.completeBox {
	display: none;
	position: absolute;
	right: 120px;
	bottom: 50%;
	min-width: 200px;
	padding: 10px 15px;
	margin-bottom: 25px;
	border-radius: 10px;
	background: #fff;
	text-align: center;
	box-shadow: 1px 1px 4px;
	z-index: 100;
	-webkit-transform: translateX(50%);
	transform: translateX(50%);
}
.completeBox.test { background: #ff0000; }
.completeBox::before, 
.completeBox::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	background: #fff;
	content: "";
}
.completeBox::before {
	width: 20px;
	height: 20px;
	margin: 0 0 -10px -10px;
	box-shadow: 1px 1px 4px;
	-webkit-transform: scale(.5,1) rotate(45deg);
	transform: scale(.5,1) rotate(45deg);
}
.completeBox::after {
	width: 32px;
	height: 15px;
	margin-left: -16px;
}

.completeBox > * {
	position: relative;
	z-index: 10;
}

/* [ テキスト ] */
.completeBox p {
	font-size: 1.4rem;
	font-weight: bold;
}

/* [ リンク ] */
.completeBox a {
	margin-top: 5px;
	padding: 5px 15px;
	border-radius: 20px;
	background: #71af2d;
	color: #fff;
}
.completeBox a:hover, 
.completeBox a:active {
	background: #8dbf57;
	color: #fff !important;
}

@media screen and (max-width: 568px) {
	.completeBox {
		right: 50%;
		bottom: 25px;
	}
} /* */

/*======================================================================*
 *  [ 全ての商品をほしいものリストに追加する ] 
 *======================================================================*/

.allAdd {
	position: relative;
	padding: 15px 18px 13px;
	background: url(../img/bg_result.png);
	background-size: 10px 10px;
	text-align: right;
}

/* [ ボタン ] */
.allAdd .wishButton {
	position: static;
	padding-top: 10px;
	padding-bottom: 10px;
	border-color: #fff;
	background: #71AF2D;
	color: #fff;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.allAdd .wishButton:hover, 
.allAdd .wishButton:active { background: #8dbf57; }
.allAdd .wishButton::before { background-image: url(/shared/svg/wishlist/icon_wish_white.svg); }

/* [ 吹き出し ] */
.allAdd .completeBox { right: 160px; }

@media screen and (max-width: 568px) {
	.allAdd {
		padding: 15px 0 13px;
		text-align: center;
	}
	
	/* [ 吹き出し ] */
	.allAdd .completeBox {
		right: 50%;
		bottom: 35px;
	}
} /* */

/*======================================================================*
 *  [ ほしいものリスト・お見積り ] 
 *======================================================================*/

.linkBox {
	padding: 30px 0;
	border-bottom: 1px solid #8cc3e5;
	text-align: center;
}
.linkBox a { color: #0076bf; }

.linkBox .link {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	color: #000;
}

/* [ タイトル ] */
.linkBox .link h3 { font-size: 1.8rem; }
.linkBox .link h3 b { font-size: 2rem; }

/* [ ボタン ] */
.linkBox .link a {
	display: block;
	margin-left: 20px;
	padding: 15px 15px 15px 10px;
	border: 3px solid #0076bf;
	border-radius: 10px;
	background: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
}
.linkBox .link a::before {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	border-top: 3px solid #0076bf;
	border-right: 3px solid #0076bf;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

/* [ テキスト ] */
.linkBox p {
	margin-top: 20px;
	font-size: 1.4rem;
}
.linkBox p a {
	font-weight: bold;
	text-decoration: underline;
}

@media screen and (max-width: 768px) {
	.linkBox .link { display: block; }
	
	/* [ タイトル ] */
	.linkBox .link h3 { margin-bottom: 20px; }
	
	/* [ ボタン ] */
	.linkBox .link a {
		display: inline-block;
		margin-left: 0;
	}
} /* */


@media screen and (max-width: 568px) {
	.linkBox { padding: 20px 0; }
	
	/* [ タイトル ] */
	.linkBox .link h3 {
		margin-bottom: 15px;
		font-size: 1.6rem;
	}
	.linkBox .link h3 b { font-size: 1.8rem; }
	
	/* [ ボタン ] */
	.linkBox .link a { font-size: 1.6rem; }
	
	/* [ テキスト ] */
	.linkBox p { margin-top: 15px; }
} /* */


/*======================================================================*
 *  [ お近くの販売店 ] 
 *======================================================================*/

.infoBox {
	padding: 30px 0;
	text-align: center;
}

/* [ タイトル ] */
.infoBox h3 {
	margin-bottom: 15px;
	font-size: 1.8rem;
}

/* [ 注釈 ] */
.infoBox .note {
	display: inline-block;
	margin-bottom: 30px;
	padding: 10px 20px;
	font-size: 1.4rem;
	line-height: 1.4;
	background: #fff;
}
.infoBox .note::before {
	display: inline-block;
	width: 14px;
	height: 14px;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M505.095,407.125L300.77,53.208c-9.206-15.944-26.361-25.849-44.774-25.849c-18.412,0-35.552,9.905-44.751,25.849L6.905,407.109c-9.206,15.944-9.206,35.746,0,51.69c9.206,15.944,26.354,25.842,44.758,25.842h408.674c18.405,0,35.568-9.897,44.759-25.842C514.302,442.855,514.302,423.053,505.095,407.125z%20M256.004,426.437c-17.668,0-32.013-14.33-32.013-32.004c0-17.668,14.345-31.997,32.013-31.997c17.667,0,31.997,14.329,31.997,31.997C288.001,412.108,273.671,426.437,256.004,426.437z%20M275.72,324.011c0,10.89-8.834,19.709-19.716,19.709c-10.898,0-19.717-8.818-19.717-19.709l-12.296-144.724c0-17.676,14.345-32.005,32.013-32.005c17.667,0,31.997,14.33,31.997,32.005L275.72,324.011z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') top 1px left no-repeat;
	background-size: 14px 14px;
	content: "";
}

/* [ 電話 ] */
.infoBox .tel {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}
.infoBox .tel p { margin-right: 20px; }
.infoBox .tel dl { text-align: left; }
.infoBox .tel dt {
	font-size: 1.4rem;
	font-weight: bold;
}
.infoBox .tel dd {
	margin-top: 5px;
	padding-left: 1em;
	text-indent: -1em;
}
.infoBox .tel dd::before { content: "◎"; }

@media screen and (max-width: 768px) {
	/* [ 電話 ] */
	.infoBox .tel { display: block; }
	.infoBox .tel p { margin-bottom: 20px; }
	.infoBox .tel dl { display: inline-block; }
	
	/* [ 注釈 ] */
	.infoBox .note {
		padding: 10px;
		font-size: 1.2rem;
	}
	.infoBox .note::before {
		display: block;
		margin: 0 auto 5px;
	}
} /* */

@media screen and (max-width: 568px) {
	.infoBox { padding: 20px 0; }
	
	/* [ タイトル ] */
	.infoBox h3 {
		margin-bottom: 15px;
		font-size: 1.6rem;
	}
} /* */


/*======================================================================*
 *  [ 注釈 ] 
 *======================================================================*/

.noteBox {
	margin-bottom: 30px;
	padding: 18px;
	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: 1em;
}
.noteBox dd::before {
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	text-align: center;
	content: "●";
}