/*
*******************************************************************************************************
# /ja/products/select-c/css/common.css
*******************************************************************************************************
*/


/*------------------------------------
	Layout
------------------------------------*/

/* page nav
------------------------------------*/
.progress-nav {
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	padding: 20px 40px;
	background-color: #ffffff;
}
.progress-nav.fixed {
	position: fixed;
	top: 0;
	z-index: 30;
	-ms-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}
.progress-nav ul {
	max-width: 1208px;
	margin: 0 auto;
}
.progress-nav li {
	float: left;
	width: 20%;
	background-color: #ffffff;
}
.progress-nav li a {
	display: block;
	margin-left: 2px;
	padding: 6px 10px;
	border-top: solid 2px #0090D7;
	background: #EFF0F3;
	color: #0090D7;
	text-decoration: none;
}

.progress-nav li:first-child a {
	margin-left: 0;
}
.progress-nav li a:hover {
	text-decoration: underline;
}

.progress-nav li.active a {
	border-color: #0090D7;
	background-color: #0090D7;
	color: #ffffff;
}
.progress-nav li.active a:hover {
	text-decoration: none;
}

.progress-nav li a.disabled {
	border-color: #444444;
	background-color: #EFF0F3;
	color: #111111;
}
.progress-nav li a.disabled:hover {
	text-decoration: none;
	cursor: default;
}

.progress-nav li a .num {
	display: inline-block;
	margin-right: 5px;
	font-weight: bold;
}


/*------------------------------------
	module
------------------------------------*/

/* mod-btn
------------------------------------*/
.mod-btn-blueline {
	padding: 0;
	border: solid 1px #0090D7;
	background-color: #ffffff;
	color: #0090D7;
}
.mod-btn-blueline:hover {
	background-color: #e5f1fb;
	color: #0090D7;
}
.mod-btn-blueline .icn-plus {
	position: absolute;
	left: 12px;
	top: 50%;
	display: block;
	width: 25px;
	height: 25px;
	margin-top: -12px;
	border: solid 1px #0090D7;
	border-radius: 30px;
}
.mod-btn-blueline .icn-plus:before {
	content: "";
	position: absolute;
	left: 11px;
	top: 5px;
	display: block;
	width: 1px;
	height: 13px;
	background-color: #0090D7;
}
.mod-btn-blueline .icn-plus:after {
	content: "";
	position: absolute;
	left: 5px;
	top: 11px;
	display: block;
	width: 13px;
	height: 1px;
	background-color: #0090D7;
}

.mod-btn-redline .icn-minus {
	position: absolute;
	left: 12px;
	top: 50%;
	display: block;
	width: 25px;
	height: 25px;
	margin-top: -12px;
	border: solid 1px #CE4844;
	border-radius: 30px;
}
.mod-btn-redline .icn-minus:after {
	content: "";
	position: absolute;
	left: 5px;
	top: 11px;
	display: block;
	width: 13px;
	height: 1px;
	background-color: #CE4844;
}


/*------------------------------------
	parts
------------------------------------*/

/* list-selectbox
------------------------------------*/
.list-selectbox li a {
	position: relative;
	display: block;
	border: solid 1px #cccccc;
	border-radius: 4px;
	color: #111111;
}

.list-selectbox li a:hover {
	border: solid 1px #0090d7;
	background-color: #eff0f3;
	text-decoration: none;
}

.list-selectbox .icn-checkbox {
	position: absolute;
	left: 0;
	top: 2px;
	width: 23px;
	height: 23px;
	border: solid 1px #cfcfcf;
	border-radius: 20px;
	line-height: 1;
}

.list-selectbox .icn-checkbox::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 7px;
	display: block;
	margin-top: -7px;
	width: 5px;
	height: 8px;
	border-right: 3px solid #eeeeee;
	border-bottom: 3px solid #eeeeee;
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	z-index: 1;
}

.list-selectbox li.checked a {
	border: solid 1px #0090d7;
	background-color: #eff0f3;
}

.list-selectbox li.checked .icn-checkbox {
	background-color: #0090d7;
	border-color: #0176b0;
}

.list-selectbox li.checked .icn-checkbox::after {
	border-color: #ffffff;
}

.list-selectbox .name {
	position: relative;
	margin: 12px 12px;
	padding-left: 34px;
}

.list-selectbox .description {
	margin-top: 24px;
}

/* column4 */
.list-selectbox .box-column4 li {
	float: left;
	width: 25%;
	margin-top: 16px;
}
.list-selectbox .box-column4 li:nth-child(1),
.list-selectbox .box-column4 li:nth-child(2),
.list-selectbox .box-column4 li:nth-child(3),
.list-selectbox .box-column4 li:nth-child(4) {
	margin-top: 0;
}
.list-selectbox .box-column4 li:nth-child(4n-3) a,
.list-selectbox .box-column4 li:nth-child(4n-3) .description {
	margin-right: 12px;
}
.list-selectbox .box-column4 li:nth-child(4n-2) a,
.list-selectbox .box-column4 li:nth-child(4n-2) .description {
	margin-left: 4px;
	margin-right: 8px;
}
.list-selectbox .box-column4 li:nth-child(4n-1) a,
.list-selectbox .box-column4 li:nth-child(4n-1) .description {
	margin-left: 8px;
	margin-right: 4px;
}
.list-selectbox .box-column4 li:nth-child(4n) a,
.list-selectbox .box-column4 li:nth-child(4n) .description {
	margin-left: 12px;
}

/* column3 */
.list-selectbox .box-column3 li {
	float: left;
	width: 33.33%;
	margin-top: 16px;
}
.list-selectbox .box-column3 li:nth-child(1),
.list-selectbox .box-column3 li:nth-child(2),
.list-selectbox .box-column3 li:nth-child(3) {
	margin-top: 0;
}
.list-selectbox .box-column3 li:nth-child(3n-2) a,
.list-selectbox .box-column3 li:nth-child(3n-2) .description {
	margin-right: 11px;
}
.list-selectbox .box-column3 li:nth-child(3n-1) a,
.list-selectbox .box-column3 li:nth-child(3n-1) .description {
	margin-left: 5px;
	margin-right: 5px;
}
.list-selectbox .box-column3 li:nth-child(3n) a,
.list-selectbox .box-column3 li:nth-child(3n) .description {
	margin-left: 11px;
}

/* column2 */
.list-selectbox .box-column2 li {
	float: left;
	width: 50%;
	margin-top: 16px;
}
.list-selectbox .box-column2 li:nth-child(1),
.list-selectbox .box-column2 li:nth-child(2) {
	margin-top: 0;
}
.list-selectbox .box-column2 li:nth-child(2n-1) a,
.list-selectbox .box-column2 li:nth-child(2n-1) .description {
	margin-right: 8px;
}
.list-selectbox .box-column2 li:nth-child(2n) a,
.list-selectbox .box-column2 li:nth-child(2n) .description {
	margin-left: 8px;
}

/* imgbox */
.list-selectbox .imgbox .name {
	margin: 16px 14px 0;
	padding-left: 34px;
}

.list-selectbox .imgbox .img {
	margin: 5px 10px 10px;
}
.list-selectbox .imgbox .img img {
	width: 100%;
}

.list-selectbox .imgbox .products-img {
	text-align: center;
}
.list-selectbox .imgbox .products-img img {
	width: 70%;
	margin: 5px 0 10px;
}

/* thumbbox */
.list-selectbox .thumbbox .name {
	margin: 37px 16px;
	padding-left: 34px;
}

.list-selectbox .thumbbox .thumb {
	float: right;
	width: 96px;
	height: 96px;
	margin: 16px;
}
.list-selectbox .thumbbox .thumb img {
	width: 100%;
}

/* roteobj */
.list-selectbox.box-roteobj {
	margin-bottom: 56px;
}
.list-selectbox.box-roteobj li {
	float: left;
	width: 20%;
	margin-top: 8px;
}
.list-selectbox.box-roteobj li:nth-child(1),
.list-selectbox.box-roteobj li:nth-child(2),
.list-selectbox.box-roteobj li:nth-child(3),
.list-selectbox.box-roteobj li:nth-child(4),
.list-selectbox.box-roteobj li:nth-child(5) {
	margin-top: 0;
}
.list-selectbox.box-roteobj li:nth-child(5n-4) a,
.list-selectbox.box-roteobj li:nth-child(5n-4) .description {
	margin-right: 11px;
}
.list-selectbox.box-roteobj li:nth-child(5n-3) a,
.list-selectbox.box-roteobj li:nth-child(5n-3) .description {
	margin-left: 3px;
	margin-right: 8px;
}
.list-selectbox.box-roteobj li:nth-child(5n-2) a,
.list-selectbox.box-roteobj li:nth-child(5n-2) .description {
	margin-left: 6px;
	margin-right: 6px;
}
.list-selectbox.box-roteobj li:nth-child(5n-1) a,
.list-selectbox.box-roteobj li:nth-child(5n-1) .description {
	margin-left: 8px;
	margin-right: 3px;
}
.list-selectbox.box-roteobj li:nth-child(5n) a,
.list-selectbox.box-roteobj li:nth-child(5n) .description {
	margin-left: 11px;
}

.list-selectbox.box-roteobj li a {
	position: relative;
	padding: 8px 16px 8px 48px;
}

.list-selectbox.box-roteobj .name {
	display: table-cell;
	min-height: 40px;
	vertical-align: middle;
	margin: 0;
	padding-left: 30px;
}

.list-selectbox.box-roteobj .thumb {
	position: absolute;
	left: 8px;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
}
.list-selectbox.box-roteobj .thumb img {
	width: 100%;
}

/* layout-column
------------------------------------*/
/* column2 */
.layout-column.column2 > .box-column {
	float: left;
	width: 50%;
}
.layout-column.column2 > .box-column.left {
	float: right;
}
.layout-column.column2 > .box-column:nth-child(2n) .box-inner {
	margin-left: 8px;
}
.layout-column.column2 > .box-column:nth-child(2n-1) .box-inner {
	margin-right: 8px;
}

.layout-column.column2 .img {
	max-width: 374px;
	margin: 0 auto;
}
.layout-column.column2 .img + .img {
	margin-top: 16px;
}
.layout-column.column2 .img img {
	width: 100%;
}

/* layout-column-flex */
.layout-column-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.flex-column {
	flex: 1 1 33%;
}
.flex-column + .flex-column {
	margin-left: 80px;
	flex: 1 1 67%;
}



/* svg graph
------------------------------------*/
.svg-graph {
	position: relative;
	width: 764px;
	height: 300px;
	margin: 0 auto;
}

.svg-graph svg {
	width: 764px;
	height: 300px;
}
.svg-graph svg .line {
	fill: none;
	stroke: #0090D7;
	stroke-width: 2px;
}
.svg-graph svg .axis path,
.svg-graph svg .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
.svg-graph svg text {
	font-size: 10px;
}

/* operating */
.svg-graph.operating .text-axis {
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
}
.svg-graph.operating .text-axis .unit {
	display: block;
	font-size: 12px;
	font-weight: normal;
}
.svg-graph.operating .text-axis.y {
	position: absolute;
	left: 0;
	top: 20px;
	width: 130px;
	text-align: center;
}
.svg-graph.operating .text-axis.x {
	position: absolute;
	right: 0;
	bottom: 78px;
	width: 96px;
	text-align: center;
}

svg.svgOperatingCondition .border.x {
	fill: none;
	stroke: #343434;
	stroke-dasharray: 1.5;
	shape-rendering: crispEdges;
}
svg.svgOperatingCondition .border.y {
	fill: none;
	stroke: #b4b4b4;
	shape-rendering: crispEdges;
}

svg.svgOperatingCondition .text {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
svg.svgOperatingCondition .text.x {
	fill: #111111;
	font-size: 14px;
}
svg.svgOperatingCondition .text.y {
	fill: #0090D7;
	font-size: 14px;
}

/* moment */
.svg-graph.moment .text-axis {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
}
.svg-graph.moment .text-axis.y {
	position: absolute;
	left: -36px;
	top: 50%;
	margin-top: -20px;
	transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
}
.svg-graph.moment .text-axis.x {
	position: absolute;
	left: 106px;
	bottom: 28px;
	width: 606px;
	text-align: center;
}

svg.svgMomentChart .y.axis .tick line {
	stroke: #cbcbcb;
}
svg.svgMomentChart .subline {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
svg.svgMomentChart .axis .domain {
	fill: none;
	stroke: none;
}
svg.svgMomentChart .axis text {
	font-size: 12px;
}
svg.svgMomentChart .point {
	fill: #0090D7;
}
svg.svgMomentChart .border.y {
	fill: none;
	stroke: #cbcbcb;
	shape-rendering: crispEdges;
}
svg.svgMomentChart .mark {
	fill: #c7493d;
}
svg.svgMomentChart .markText {
	fill: #c7493d;
	font-size: 10px;
	font-weight: bold;
}

svg.svgMomentChart .produts.bar {
	fill: #0090D7;
}
svg.svgMomentChart .produts.text {
	font-size: 12px;
}

/* maxTorque */
svg.svgMaxTorque .y.axis .tick line {
	stroke: #cbcbcb;
}
svg.svgMaxTorque .subline {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
svg.svgMaxTorque .axis .domain {
	fill: none;
	stroke: none;
}
svg.svgMaxTorque .axis text {
	font-size: 12px;
}
svg.svgMaxTorque .point {
	fill: #0090D7;
}
svg.svgMaxTorque .pointText {
	font-size: 12px;
}
svg.svgMaxTorque .border.y {
	fill: none;
	stroke: #cbcbcb;
	shape-rendering: crispEdges;
}
svg.svgMaxTorque .mark {
	fill: #c7493d;
}
svg.svgMaxTorque .markText {
	fill: #ffffff;
	font-size: 10px;
}
svg.svgMaxTorque .markName {
	fill: #c7493d;
	font-size: 12px;
}

svg.svgMaxTorque .produts.bar {
	fill: #0090D7;
}
svg.svgMaxTorque .produts.text {
	font-size: 12px;
}

/* rotation-speed */
.svg-graph.rotation-speed {
	width: 920px;
	height: 380px;
}
.svg-graph.rotation-speed .text-axis {
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
}
.svg-graph.rotation-speed .text-axis .unit {
	display: block;
	font-size: 12px;
	font-weight: normal;
}
.svg-graph.rotation-speed .text-axis.y {
	position: absolute;
	left: 0;
	top: 60px;
	display: inline-block;
	padding: 5px 0;
	background-color: #ffffff;
	text-align: center;
}
.svg-graph.rotation-speed .text-axis.x {
	position: absolute;
	left: 0;
	top: 206px;
	text-align: center;
}

.svg-graph.rotation-speed .text-speed-transition,
.svg-graph.rotation-speed .text-operating-time {
	position: absolute;
	left: 35px;
	width: 853px;
	text-align: left;
}
.svg-graph.rotation-speed .text-speed-transition {
	top: 265px;
}
.svg-graph.rotation-speed .text-operating-time {
	top: 295px;
}

.svg-graph.rotation-speed .text-speed-transition li,
.svg-graph.rotation-speed .text-operating-time li {
	float: left;
	text-align: center;
	font-weight: bold;
}
.svg-graph.rotation-speed .text-speed-transition li {
	position: absolute;
	left: 0;
	top: 0;
	width: 8.33%;
	margin-left: -4.165%;
	font-size: 12px;
	line-height: 1.2;
}
.svg-graph.rotation-speed .text-speed-transition li:nth-child(1) {left: 4.165%;}
.svg-graph.rotation-speed .text-speed-transition li:nth-child(2) {left: 12.5%;}
.svg-graph.rotation-speed .text-speed-transition li:nth-child(3) {left: 20.825%;}
.svg-graph.rotation-speed .text-speed-transition li:nth-child(4) {left: 29.165%;}

.svg-graph.rotation-speed .text-operating-time li {
	position: absolute;
	left: 0;
	top: 0;
	width: 25%;
	padding-bottom: 6px;
	border-bottom: solid 1px #050304;
	font-size: 14px;
	line-height: 1.4;
}
.svg-graph.rotation-speed .text-operating-time li:nth-child(2) {left: 33.33%;}
.svg-graph.rotation-speed .text-operating-time li:nth-child(3) {left: 66.66%;}
.svg-graph.rotation-speed .text-operating-time li:before,
.svg-graph.rotation-speed .text-operating-time li:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 1px;
	height: 33px;
	border-left: dotted 1px #050304;
}
.svg-graph.rotation-speed .text-operating-time li:after {
	left: auto;
	right: 0;
	border-left: none;
	border-right: dotted 1px #050304;
}
.svg-graph.rotation-speed .text-operating-time li .mark {
	display: block;
	font-size: 22px;
	color: #0090D7;
}

.wrp-pattern1 .text-operating-time li:nth-child(2),
.wrp-pattern1 .text-operating-time li:nth-child(3),
.wrp-pattern2 .text-operating-time li:nth-child(3) {
	display: none;
}

.svg-graph svg.svgRotationSpeed path.line {
	fill: #b3ddf3;
	stroke: #b3ddf3;
	stroke-width: 1px;
}

svg.svgRotationSpeed {
	width: 920px;
	height: 380px;
}
svg.svgRotationSpeed .border.x {
	fill: none;
	stroke: #959595;
	stroke-dasharray: 1.5;
	shape-rendering: crispEdges;
}

svg.svgRotationSpeed .text {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
svg.svgRotationSpeed .text.x {
	fill: #0090D7;
	font-size: 17px;
	font-weight: bold;
}

svg.svgRotationSpeed.pattern1 path.line2,
svg.svgRotationSpeed.pattern1 path.line3,
svg.svgRotationSpeed.pattern1 path.line4,
svg.svgRotationSpeed.pattern2 path.line3,
svg.svgRotationSpeed.pattern2 path.line4,
svg.svgRotationSpeed.pattern3 path.line4 {
	fill: #e5e6ea;
	stroke: #e5e6ea;
}
svg.svgRotationSpeed.pattern1 .x.border4,
svg.svgRotationSpeed.pattern2 .x.border8,
svg.svgRotationSpeed.pattern3 .x.border12 {
	stroke: #0390d7;
	stroke-dasharray: none;
	stroke-width: 2px;
}
svg.svgRotationSpeed.pattern1 text.x.text5,
svg.svgRotationSpeed.pattern1 text.x.text6,
svg.svgRotationSpeed.pattern1 text.x.text7,
svg.svgRotationSpeed.pattern1 text.x.text8,
svg.svgRotationSpeed.pattern1 text.x.text9,
svg.svgRotationSpeed.pattern1 text.x.text10,
svg.svgRotationSpeed.pattern1 text.x.text11,
svg.svgRotationSpeed.pattern1 text.x.text12,
svg.svgRotationSpeed.pattern1 text.x.text13,
svg.svgRotationSpeed.pattern1 text.x.text14,
svg.svgRotationSpeed.pattern1 text.x.text15,
svg.svgRotationSpeed.pattern2 text.x.text9,
svg.svgRotationSpeed.pattern2 text.x.text10,
svg.svgRotationSpeed.pattern2 text.x.text11,
svg.svgRotationSpeed.pattern2 text.x.text12,
svg.svgRotationSpeed.pattern2 text.x.text13,
svg.svgRotationSpeed.pattern2 text.x.text14,
svg.svgRotationSpeed.pattern2 text.x.text15,
svg.svgRotationSpeed.pattern3 text.x.text13,
svg.svgRotationSpeed.pattern3 text.x.text14,
svg.svgRotationSpeed.pattern3 text.x.text15 {
	fill: #b8bdc3;
}