@charset "UTF-8";
@media screen and (min-width:768px) and ( max-width:1000px) { /* tab */

.inner {
	width: 100%;
}

#contents h2 {
	width: 100%;
	max-width: 600px;
	margin: 0 auto 30px;
}
.contentsLink {
	display: table;
	width: 100%;
	max-width: 400px;
	margin: 0 auto 10px;
}
.contentsLink li {
	display: table-cell;
	text-align: right;
}
.contentsLink li:first-child {
	text-align: left;
}
.contentsLink li a {
	font-size: 20px;
	color: #3651a7;
}
.kv {
	margin: 0 auto 20px;
	width: 100%;
	max-width:640px;
}

/* feature
-----------------------------------*/
#feature {
	margin: 0 0 10px;
}
#feature h3 {
	background: url(../images/company/business/oem/tab_feature_bg.jpg) no-repeat top center;
	border: none;
	text-align: center;
	padding: 50px 0;
	margin: 0 0 10px;
	color: #FFFFFF;
	font-size: 30px;
	width: 100%;
	max-width: 1000px;
}
.featureContents {
	padding: 40px 0;
	color: #555;
	width: 100%;
	max-width: 1000px;
	height: 100%;
	margin: 0 auto;
}
.featureContents .left{
	position: static;
}
.featureContents .right{
	position: static;
}
.featureContents h4 {
	font-size: 26px;
	text-align: center;
	margin: 20px 0;
	width: 100%;
}
.featureContents .img {
	width: 100%;
	max-width:500px;
	margin: 0 auto;
}
.featureContents .tx {
	text-align: center;
	width: 100%;
	max-width: 500px;
	font-size: 13px;
	margin: 0 auto;
}
.feature01, 
.feature03, 
.feature05 {
	background: #f2f8ff;
}

/* flow
-----------------------------------*/
#flow h3 {
	background: url(../images/company/business/oem/tab_flow_bg.jpg) no-repeat top center;
	border: none;
	text-align: center;
	padding: 50px 0;
	margin: 0;
	color: #FFFFFF;
	font-size: 25px;
	width: 100%;
}
.step {
	padding: 30px 0;
	text-align: center;
	border-bottom: #e5e5e5 1px solid;
	color: #555555;
	font-size:13px;
}
.step h4 {
	color: #3651a7;
}
.step h4 span {
	font-size: 20px;
	font-weight: bold;
}
.step .tx {
	max-width: 700px;
	margin: 0 auto;
	padding: 15px 0 0;
}
.step8 {
	border:none;
}
.step8 .img {
	display: table;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}

.toggleSwitch{
	background: url(../images/company/business/oem/arrow_close.png) no-repeat center bottom;
	background-size: 24px;
	padding: 0 0 26px;
	cursor: pointer;
}
.toggleSwitch.active{
	background: url(../images/company/business/oem/arrow_open.png) no-repeat center bottom;
	background-size: 24px;
	padding: 0 0 26px;
	cursor: pointer;
}


/* contactLink
-----------------------------------*/
#contactLink{
    width: 100%;
	max-width:600px;
    margin: 0 auto;
    text-align: center;
}
#contactLink a{
    display: block;
    border: 2px solid #E5E5E5;
    padding: 20px 0;
}
#contactLink a:hover {
    border: 2px solid #ffaa93;
    color: #000;
}

/* tab end */
}




@media screen and (max-width: 768px) { /* sp */

#contents h2 {
	width: 100%;
	max-width: 640px;
	margin: 0 auto 30px;
}
.contentsLink {
	display: table;
	width: 100%;
	max-width: 400px;
	margin: 0 auto 20px;
}
.contentsLink li {
	display: table-cell;
	text-align: right;
}
.contentsLink li:first-child {
	text-align: left;
}
.contentsLink li a {
	font-size: 20px;
	color: #3651a7;
}
.kv {
	margin: 0 auto 20px;
	width: 100%;
	max-width: 640px;
}


/* feature
-----------------------------------*/
#feature {
	margin: 0 0 10px;
}
#feature h3 {
	background: url(../images/company/business/oem/tab_feature_bg.jpg) no-repeat top center;
	border: none;
	text-align: center;
	padding: 50px 0;
	margin: 0 0 10px;
	color: #FFFFFF;
	font-size: 30px;
	width: 100%;
	max-width: 785px;
}
.featureContents {
	padding: 40px 0;
	color: #555;
	width: 100%;
	max-width: 785px;
	height: 100%;
}
.featureContents .left{
	position: static;
}
.featureContents .right{
	position: static;
}
.featureContents h4 {
	font-size: 26px;
	text-align: center;
	margin: 20px 0;
	width: 100%;
}
.featureContents .img {
	width: 100%;
	max-width:500px;
	margin: 0 auto;
}
.featureContents .tx {
	text-align: center;
	width: 100%;
	font-size: 13px;
}
.feature01, 
.feature03, 
.feature05 {
	background: #f2f8ff;
}

/* flow
-----------------------------------*/
#flow h3 {
	background: url(../images/company/business/oem/tab_flow_bg.jpg) no-repeat top center;
	border: none;
	text-align: center;
	padding: 50px 0;
	margin: 0;
	color: #FFFFFF;
	font-size: 25px;
	width: 100%;
}
.step {
	padding: 30px 0;
	text-align: center;
	border-bottom: #e5e5e5 1px solid;
	color: #555555;
	font-size:13px;
}
.step h4 {
	color: #3651a7;
}
.step h4 span {
	font-size: 20px;
	font-weight: bold;
}
.step .tx {
	max-width: 700px;
	margin: 0 auto;
	padding: 15px 0 0;
}
.step8 {
	border:none;
}
.step8 .img {
	display: table;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.toggleSwitch{
	background: url(../images/company/business/oem/arrow_close.png) no-repeat center bottom;
	background-size: 24px;
	padding: 0 0 26px;
	cursor: pointer;
}
.toggleSwitch.active{
	background: url(../images/company/business/oem/arrow_open.png) no-repeat center bottom;
	background-size: 24px;
	padding: 0 0 26px;
	cursor: pointer;
}

/* contactLink
-----------------------------------*/
#contactLink{
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#contactLink a{
    display: block;
    border: 1px solid #000;
    padding: 26px 0;
}

/* sp end */
}