@charset "UTF-8";
/* CSS Document */
body{-webkit-font-smoothing: antialiased;}
foucus{outline: none;}

a:hover{
	opacity: .7;
	transition: .5s;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
br.pc_clear{display: none;}

table{
	width: 100%;
	border-collapse: collapse;
}

.active-announce {
	color: red !important;
  font-size: 15px;
  display: flex;
  justify-content: center;
  padding-top: 20px;
	display: none;
}

.breadcrumb{padding-bottom: 10px;}

h1.simulatorHead{
	font-size: 3.6rem;
	text-align: center;
	font-weight: 400;
	padding-bottom: 35px;
}


	@media only screen and (max-width:920px) {
		h1.simulatorHead{font-size: 3rem;}
}

	@media only screen and (max-width:767px) {
		br.pc_clear{display: block;}
		h1.simulatorHead{font-size: 2.2rem; padding: 20px 0;}
	}

.simulatorWrapper{
	max-width: 1000px;
	width: 100%;
	margin: auto;
	padding: 0 10px;
	padding-top: 40px;
}

.productMenu{
	position: relative;}

.productMenu ul{
	max-width: 1000px;
	width: 100%;
	margin: auto;
	display: block;
	padding: 0 10px;
	box-sizing: border-box;
	}

.productMenu:after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #CCC;
    z-index: 1;
}
.productMenu:before {
    z-index: 1;
}

.productMenu ul li{
	font-size: 2rem;
	float: left;
	text-align: center;
	width: 48%;
	z-index: 0;
	position: relative;
	display: inline-block;
	border: 1px solid #CCC;
	box-sizing: border-box;
}

.productMenu ul li:last-child{float: right;}

.productMenu ul li.active{
	padding: 18px 0;
	z-index: 2;
    border-bottom-color: #FFF;
}

.productMenu ul li.active:after{
	display: block;
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 6px;
	height: 6px;
	background-color: #000;
	border-radius: 100%
}

.productMenu ul li a{
	padding: 18px 0;
	background: #f4f4f4;
	display: block;
	color: #999;
}

.productMenu ul li a:hover{
	background: #FFF;
	color: #333;
	transition: 0.3s;
}

	@media only screen and (max-width:767px) {
		.simulatorWrapper{padding-top: 20px;}
		.productMenu ul li{font-size: 1.4rem;}
		.productMenu ul li a,.productMenu ul li.active{padding: 10px 0;}
	}

/*simulator*/
.simulator{padding-bottom: 150px;}

.simulatorWrapper h2{
	font-size: 2.2rem;
	text-align: center;
	font-weight: 400;
	margin-bottom: 30px;
}
.simulatorWrapper h3{
	font-size: 1.8rem;
	margin-bottom: 10px;
}

.simulatorWrapper h3.sttl_line{border-bottom: 1px solid #CCC; padding-bottom: 10px; margin-bottom: 20px;}

.simulatorWrapper h4{
	text-align: center;
	font-size: 1.4rem;}

.simulator_result{
	float: left;
	width: 45%;
}
	@media only screen and (max-width:1000px) {
		.simulatorWrapper{box-sizing: border-box;}}

	@media only screen and (max-width:920px) {
		.simulator_result{width: 47.5%;}
		.simulatorWrapper h3{font-size: 1.6rem; margin-bottom: 3px;}
		.simulatorWrapper h4{font-size: 1.2rem;}
		}
	@media only screen and (max-width:767px) {
		.simulator_result{width: 100%;}
		.simulatorWrapper h2{font-size: 1.6rem; margin-bottom: 20px;}
		}

p.simulator_result_sttl{
	display: flex;
	text-align: center;
	font-size: 1.8rem;
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;
	letter-spacing: 1px;
	align-items: center;
}
p.simulator_result_sttl:before, p.simulator_result_sttl:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #CCC;
	display: block;
}
p.simulator_result_sttl:before {
	margin-right: 1rem;
}
p.simulator_result_sttl:after {
	margin-left: 1rem;
}

.simulator_result_front{width: 48.8888%; float: left;}
.simulator_result_back{width: 48.8888%; float: right;}

.simulator_result_box{position: relative; margin: 10px 0;}

.simulator_result_front .front_head,
.simulator_result_front .front_band{
	position: absolute;
	top: 0;
	left: 0;
}
.simulator_result_front .front_head{z-index: 2;}
.simulator_result_front .front_band{z-index: 1;}

.total_price_box{
	padding: 20px 10px;
	float: none;
	clear: both;
	background:#F4F4F4;
	margin-bottom: 20px;
}
.total_price_ttl{
	line-height: 30px;
	font-size: 16px;
	font-weight: 600;
	float: left;
}
.total_price{
	line-height: 30px;
	float: right;
	font-size: 14px;}

.total_price span{
	font-size: 30px;
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;}
.simulator_caution{
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 30px;
	margin-bottom: 30px;
	display:none;
}
.simulator_caution img{width: 30px; height: 30px; padding-right: 5px;}

.simulator_share{font-size: 1.3rem; float: none; clear: both;}

.simulator_share p,
.simulator_share div{
	float: left;
	margin-right: 10px;
	line-height: 24px;
}

.simulator_share div img{
	height: 24px;
	width: auto;
}

div.btn_reset{
	float: right;
	font-size: 1.4rem;
	margin-right: 0;
	letter-spacing: -1px;
	margin-bottom: 15px;
	display:none;
}
div.btn_reset:after {
    content: "";
    display: block;
    clear: both;
}
.btn_reset a{
	padding: 5px 15px;
	border-radius: 15px;
	color: #FFF;
	background: #333;

}

/*simulator_select*/
.simulator_select{
	float: right;
	width:50%;}

.tab-container{margin-bottom: 30px;}
ul.tab_menu{}

ul.tab_menu li:after{ content: ""; line-height: 0; display: block; overflow: hidden; position: absolute; top:0; height: 80%; border-left: 1px solid #CCC; }

ul.tab_menu li{
	position: relative;
	float: left;
	text-align: center;
	box-sizing: border-box;
	display: block;
	height: 100%;
	font-size: 1.0rem;
	border-bottom: 1px solid #CCC;}

ul.tab_menu li span	{
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;
	font-size: 1.8rem;
	letter-spacing: 1px;
}


.head_select ul.tab_menu li{width: 16%;}
.band_select ul.tab_menu li{width: 20%;}


ul.tab_menu li img{height: 30px; width: auto; display: block; margin: auto;}

ul.tab_menu li a{
	display: block;
	background: #FFF;
	padding: 5px 0;
}

ul.tab_menu li.active{
	border: 1px solid #CCC;
	border-bottom: none;
}
ul.tab_menu li.active a{background: #f4f4f4;}
ul.tab_menu li.active:after,
ul.tab_menu li:first-child::after,
ul.tab_menu li.active+li:after{border-left: none;}

.panel-container{
	background: #f4f4f4;
	padding: 15px 10px 5px 10px;
	border: 1px solid #CCC;
	border-top: none;
}

	@media only screen and (max-width:920px) {
		.tab-container{margin-bottom: 20px;}
		ul.tab_menu li{font-size: 1.2rem;}
		ul.tab_menu li img{height: 24px;}
		ul.tab_menu li:nth-child(4){letter-spacing: -1px;}
		.panel-container{padding: 15px 5px 5px 5px;}
		.simulator_caution{font-size: 1.1rem; line-height: 20px; margin-bottom: 15px;}
		.simulator_caution img{width: 20px; height: 20px; padding-right: 2px;}
		}

		@media only screen and (max-width:767px) {
			.simulator_select{width: 100%; margin-top: 30px;}
			ul.tab_menu li{font-size: 1.0rem;}
		}

/*swiper*/
.swiper-slide{
	width: 100%;
	 padding: 0 40px;
	 box-sizing: border-box;
	}
.swiper-slide ul{text-align: center; padding-top: 15px;}
.swiper-slide ul li{
	width:25%;
	text-align: center;
	padding: 0 5px;
	margin-bottom: 10px;
	display: block;
	box-sizing: border-box;
	float: left;
	 position: relative;}

.swiper-slide ul li a{display:block;}
/*.swiper-slide ul li.select a{border: 1px solid #999; display:block;}*/
.swiper-slide ul li a img.thumb_image{width:calc( 100% - 2px ); height: auto; display:block; margin:1px;}
.swiper-slide ul li.select a img.thumb_image{border: 1px solid #999; margin:0px;}


img.select_clear{
	position: absolute;
	top: -8px;
	right: -4px;
	width: 19px;
	height: 19px;
}

.swiper-slide ul li.not a{
	position: relative;
}
.swiper-slide ul li.not a img{}
.swiper-slide ul li.not span.not_text{
	position: absolute;
	left: 0;
	top: 0;
	color: #FFF;
	font-size: 1.2rem;
	width: 100%;
	text-align: center;
	font-weight: 600;
	height: 100%;
	background: rgba(0,0,0,0.6);
	padding-top: 42.5%;
	box-sizing: border-box;
}


.swiper-slide ul li span{
	font-size: 1.8rem;
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;

}

.swiper-slide ul li span.size{
	font-size: 1.2rem;
	display:block;
}

.swiper-button-prev,
.swiper-button-next{
	text-indent: -9999px;
	width: 25px;
	height: 50px;
	background-repeat: no-repeat;
	background-size: 100%;
}
.swiper-button-prev{
	background-image: url(../sim_images/prev.png);
}
.swiper-button-next{
	background-image: url(../sim_images/next.png);
}


	@media only screen and (max-width:920px) {
		.swiper-slide{padding: 0 20px;}
		.swiper-button-prev,
		.swiper-button-next{width: 20px; height: 40px;}
		.swiper-button-prev{left: 0;}
		.swiper-button-next{right: 0;}
		}

/*selected_item*/
.selected_item{display: table; width: 100%;}
.selected_item_row{display: none; }
.selected_item_cell{display: table-cell; padding-right: 5px; vertical-align:middle; border-bottom: 30px solid #FFF;}
.selected_item .iteminfo{ width:46%; display: table-cell;}


.selected_item_parts{font-size: 1.4rem; text-align: left; font-weight: 600;width: 6em;}

.selected_item_img img{width: 70px; height: auto;}
.selected_item_detail,.selected_item_price{
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;
	letter-spacing: 1px;
}

.selected_item_number{font-size: 2.4rem;}
.selected_item_name{font-size: 1.8rem; }
.selected_item_info{font-size: 1.4rem;}
.selected_item_price{font-size: 1.2rem; letter-spacing: 0; background: #f4f4f4; padding-left: 10px;}
.selected_item_cell.selected_item_price{padding-right: 0;}
.selected_item_price span{font-size: 2rem;}
.selected_item_price p{border-right: 1px solid #999; padding-right: 5px;}

.selected_item_caution{
	text-align: right;
	font-size: 1.2rem;
	margin-bottom: 70px;
}
.selected_item_caution a{text-decoration: underline;}


.selected_item_shop{
	min-width: 320px;
	white-space: nowrap;
	position: relative;
	 background: #f4f4f4;
	 height: 100%;
}
.selected_item_cell.selected_item_shop{padding-right: 0;}

.selected_item_shop ul li{
	width: 30%;
	max-width: 110px;
	display: inline-block;
	float: left;
	margin: 5px 1.5%;
	height: auto;

}

.selected_item_shop ul li.shop_add{
	border: 1px solid #CCC;
	text-align: center;
	font-size: 1.2rem;
	letter-spacing: 0;
	padding: 15px 0;
	cursor: pointer;
}



.shop_add:hover{
	opacity: .7;
	transition: .5s;
}

.other_shop{
	position: absolute;
	top:90%;
	background: #f4f4f4;
	padding: 15px 10px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	z-index: 100;
	right: 1.5%;
	width: auto;
	display: none;
}

.selected_item_shop .other_shop ul{width: 100%;}

.selected_item_shop .other_shop ul li{margin: 3px 5px; width: 100px;}

.shop_close{position: absolute; top: 0px; right: 5px; font-size: 1.6rem; cursor: pointer;}

.fukidashi{
	position: absolute;
	top: -21px;
	right: 50px;
	width: 18px;
}
br.tb_br{display: none;}
@media only screen and (max-width:900px) {
		.selected_item_parts{width: auto;}
		br.tb_br{display: block;}}

@media only screen and (max-width:767px) {
	.selected_item_row:after {
			content: "";
			display: block;
			clear: both;
		}
	.selected_item .iteminfo{ width:auto; display: block;}

	.selected_item_number{font-size: 2.0rem;}
	.selected_item_shop ul li.shop_add{font-size: 1.0rem; float: right;}
	.selected_item_parts{font-weight: 800; font-size: 1.8; margin-left: 10px; margin-bottom: 5px;}
	.selected_item_row{margin-bottom: 20px;}
	.selected_item_row,.selected_item_row,.selected_item_cell{display:block; }
	.selected_item_cell{border: none;}
	.selected_item_img{padding-top: 10px;}
	.selected_item_img,.selected_item_detail{
		float: left;
	}
	.shop_close{font-size: 2.0rem;}
	.selected_item_bg{background: #f4f4f4;}
	.selected_item_price p{border: none; padding-bottom: 5px;}
	.selected_item_price{padding-top: 5px; background: none; padding-left: 75px;}
	.selected_item_cell.selected_item_shop{padding: 5px;}
	br.tb_br{display: none;}
	.selected_item_caution{text-align: left; font-size: 1.0rem;}
	}
@media only screen and (max-width:599px) {
	.selected_item_shop{min-width: 100%;}
	.selected_item_shop .other_shop ul{width: 300px; margin: auto; display: block;}
	.selected_item_shop .other_shop ul li{ width: 90px;}}

/*band_list*/
.band_list{
	padding-bottom: 100px;
}

.band_list table{margin-bottom: 30px;}

.band_list table th,
.band_list table td{
	border-bottom: 1px solid #CCC;
	padding: 15px;

}

.band_list table td{font-size: 1.8rem; text-align: center;}
.band_list table th{border-right: 1px solid #CCC; font-size: 1.4rem; width: 14%;}
.band_list table th.th_l{text-align: center;}

.band_list table tr:first-child th{border-right: none;}

.band_list table th.band_img{
	font-size: 1.8rem;
	width: 18%;
	box-sizing: border-box;
	font-family: Abel, CmnYuGothicM, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Mairyo UI", "メイリオ", Meiryo, sans-serif;
	letter-spacing: 1px;
	font-weight: normal;
	text-align: center;
	position: relative;
}
.band_list table th.band_img span{
	font-size: 1.4rem;
	letter-spacing: 0;
}

.band_list table th.band_img img{width: 100px; height: 100px;}

.band_list table th.pay_icon1,
.band_list table th.pay_icon2{padding: 5px 15px;}

.band_list table th.pay_icon0 img{max-width: 50px;}
.band_list table th.pay_icon1 img{max-width: 27px;}
.band_list table th.pay_icon2 img{max-width: 96px;}


.band_list table tr:first-child th.selected,
.band_list table td.selected{
	border: 2px solid #333;
	background: #f4f4f4;
	border-top:1px solid #CCC;
	border-bottom: 1px solid #CCC;
}
.band_list table tr:first-child th.selected{border-top:2px solid #333;}
.band_list table tr:last-child td.selected{border-bottom:2px solid #333;}

.band_list table tr:first-child th.selected:before{
	content: '選択中';
	font-size: 1.2rem;
	color: #FFF;
	position: absolute;
	top: 0;
	left: 0;
	background: #333;
	padding: 3px 10px;
	line-height: 1;
}

p.band_list_caution{font-size: 1.2rem;}

	@media only screen and (max-width:920px) {
		.band_list table th{font-size: 1.2rem;}
		.band_list table th,
		.band_list table td{padding: 15px 5px;}
		}

	@media only screen and (max-width:767px) {
		.band_list table th.band_img img{width: 100%; height: auto;}
		.band_list table th{font-size: 1.0rem;}
		.band_list table th,
		.band_list table td{padding: 5px;}
		.band_list table th.pay_icon1,
		.band_list table th.pay_icon2{padding: 2px;}
		.band_list table th.pay_icon1 img{width: 20px;}
		.band_list table th.band_img{font-size: 1.2rem; padding-top: 15px;}
		.band_list table th.band_img span{font-size: 1.0rem;}
		.band_list table tr:first-child th.selected:before{font-size: 1.0rem; width: 100%; box-sizing: border-box; padding: 3px 5px;}}



		@media screen and (min-width:481px) {
		#pageTop {
		  position: fixed;

		  left:48.6%;
			bottom: 10px;
			/* margin-bottom: 10%;

			margin-top: -3%; */
		}
		#pageTop a {
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			display: inline-block;
			z-index: 2999;
			padding: 15px;
			border-radius: 2px;
			height:100%;
			/* background-color: #EEEEEE; */
			color: black;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
			border-radius: 50%;
			font-size: 12px;
		}



		#pageTop a:hover {
		 opacity: 0.7;

		}
.svg_collor{
fill: white;
}
#pageTop img {
	background: #EC6029;
	border-radius: 50%;
	background-size: 100%;
	 width: 32px;
	 height:32px;
	 padding: 5px;
	 position: absolute;
	 left :5.9px;
	 margin: auto;
	 top: 54%;
	 /* older webkit */
	 transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms;
	 /* easeOutBack */
	 -webkit-transform: translate(0, -50%) rotate(0);
	 transform: translate(0, -50%) rotate(0);
 }
 #pageTop:hover img {
	 -webkit-transform: translate(0, -50%) rotate(360deg);
	 transform: translate(0, -50%) rotate(360deg);
 }

		}
		@media screen and (max-width:480px) {
		#pageTop {
			position: fixed;

			right:-15%;
			bottom: 10px;
			/* margin-bottom: 10%;

			margin-top: -3%; */
		}

		#pageTop a {
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			display: inline-block;
			z-index: 2999;
			padding: 15px;
			border-radius: 2px;
			width: 180px;
			height:100%;
			/* background-color: #EEEEEE; */
			color: black;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
			border-radius: 50%;
		}



		#pageTop a:hover {
		 opacity: 0.7;

		}
.svg_collor{
fill: white;
}
#pageTop img {
	background: #EC6029;
	border-radius: 50%;
	background-size: 100%;
	 width: 25px;
	 height:25px;
	 padding: 5px;
	 position: absolute;
	 left :42%;
	 margin: auto;
	 top: 50%;
	 /* older webkit */
	 transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0ms;
	 /* easeOutBack */
	 -webkit-transform: translate(0, -50%) rotate(0);
	 transform: translate(0, -50%) rotate(0);
 }
 #pageTop:hover img {
	 -webkit-transform: translate(0, -50%) rotate(360deg);
	 transform: translate(0, -50%) rotate(360deg);
 }

		}