/* CSS Document */

@import url(notosansjp.css);
@import url(css.css);


/* 共通
------------------------------------------------------------*/
#oem {
font-size:14px;
width:100%;
line-height:2.0em;
}

#oem a{
color: #0066ff;
text-decoration: none;
}

#oem a:hover, #oem a:hover .active{
text-decoration: underline;
}

#oem h1, #oem h2 {
font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
}

#oem h3, #oem h4 {
font-weight: bold;
font-size:16px;
margin-bottom: 16px;
}

#oem img{
max-width: 100%;
height: auto;
}

#oem section{
clear: both;
}

#oem section h2{
width: 80%;
margin: 70px auto;
font-size: 22px;
font-weight:normal;
text-align: center;
line-height:60px;
}

#oem section h2 span {
padding-bottom: 8px;
border-bottom: 3px solid #444;
}

#oem .inner{
width: 95%;
margin: 0 auto;
padding-bottom: 50px;
}

#oem .innerS{
width: 85%;
margin: 0 auto;
padding-bottom: 80px;
}

#oem ul{
list-style-type: square;
list-style-position: inside;
}

#oem ul li {
line-height: 2.0em;
}

#oem .innerS p, #oem .inner p {
line-height:2.0em;
}

/* SEC01
------------------------------------------------------------*/
#oem #sec01{
padding: 0 !important;
}

/* SEC02
------------------------------------------------------------*/
#oem #sec02{
padding: 0 !important;
}

/* SEC03
------------------------------------------------------------*/
#oem #sec03{
padding: 0 !important;
}

/* SEC04
------------------------------------------------------------*/
#oem #sec04{
padding-bottom: 0 !important;
}

#oem .article{
clear: both;
overflow: hidden;
padding-bottom: 50px;
}

#oem .article img{
float: left;
margin: 5px 20px 20px;
}

#oem .article p{
margin-bottom: 20px;
}

/* SEC05
------------------------------------------------------------*/
#oem #sec05{
padding: 0 !important;
}


/* SEC06
------------------------------------------------------------*/
#oem #sec06{
padding: 0 !important;
}


/* SEC07
------------------------------------------------------------*/
#oem #sec07{
padding: 0 !important;
}

/*202007*/
#oem .box{
background-image: url("../image/oem_topimage.png"); /* 背景画像指定 */
background-size: 100%;
background-repeat: no-repeat;
height: 300px;
position: relative;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
}


#oem .box h2{
font-size:2.0em;
}
#oem .step{
border:solid 1px #444444;
padding:20px;
line-height:2.0em;
}
#oem .arrow{
margin: 20px auto;
font-size: 1.8em;
}
#oem .qa{
margin:30px auto;
background:#f6f6f6;
padding:10px 30px;
line-height:2.0em;
}
#oem .line{
width:95%;
margin-bottom:100px;
size:1px
}
#oem #sec02 .innerS{
padding-bottom: 30px;
}
#oem .button{
background:#444444;
font-color:#000000;
padding:10px 40px;
border-radius:8px;
}

#oem .button a:link {color:#ffffff;} /*未訪問のリンクの色*/
#oem .button a:visited {color:#ffffff;} /*訪問済みのリンクの色*/
#oem .button a:hover {color:#ffffff;} /*カーソルが乗っているリンクの色*/
#oem .button a:active {color:#ffffff;} /*クリック中のリンクの色*/



/* RESPONSIVE
------------------------------------------------------------*/

@media only screen and (min-width: 800px){

#oem {
width:100%
}

@media only screen and (max-width: 799px){
#oem .box{
background-image: url("../image/oem_topimage.png"); /* 背景画像指定 */
background-size: 100%;
background-repeat: no-repeat;
height: 200px;
position: relative;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
}

#oem section h2{
/*margin: 55px auto;*/
}
#oem .article img{
float: none;
display: block;
margin: 0 auto 20px;
/* width:95%; */
max-width:100%
}
}


@media only screen and (max-width: 640px){
#oem .innerS{
width: 95%;
padding-bottom: 30px;
}
#oem .article img{
float: none;
display: block;
margin: 0 auto 20px;
width:95%;
max-width:100%
}
}