@charset "utf-8";
/* CSS Document */

/* screenwidth less than 1820px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1820px) {

body#onpu #container #main {
      width:70%;
}

/*
body#onpu #container #main h2{
    width: 90%;
}*/

body#onpu #container #main #title{
     width: 90%;  
}



body#onpu #container #main #intro{
    width: 90%;
}
}


/* screenwidth less than 1689px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1689px) {

body#onpu #container{
   width: 65%;
}


}




/* screenwidth less than 1560px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1560px) {

body#onpu #container {
    width: 70%;
}

}


/* screenwidth less than 1555px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1555px) {
body#onpu article.contents{
       width:70%;

}
}



/* screenwidth less than 1450px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1450px) {

body#onpu #container {
    width: 75%;
}

}

/* screenwidth less than 1404px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1404px) {
body#onpu article #column ol {
    width: 92%;
}
}

/* screenwidth less than 1374px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1374px) {
body#onpu article #column ol {
    width: 95%;
}
}

/* screenwidth less than 1354px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1354px) {

body#onpu #container {
    width: 80%;
}

body#onpu article.contents{
       width:80%;

}

body#onpu article #column ol {
    width: 90%;
}

}


/* screenwidth less than 1271px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1271px) {

body#onpu #container {
    width: 85%;
}
}

/* screenwidth less than 1230px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1230px) {

body#onpu article #column ol li {
    width: 22%;
    padding: 0 35px 0 0;
}
body#onpu article #column ol li p.process0{
    width:auto;
}
body#onpu article #column ol li dl {
    width: 100%;
}
body#onpu article #column ol li dl dd {
    width: 100%;
    height:auto;
}

body#onpu article #column ol li dl dd img{
    width:100%;
	height: auto;
	display: block;
	
}





}



/* screenwidth less than 1211px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1211px) {
body#onpu article.contents{
       width:85%;

}
}





/* screenwidth less than 1197px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1197px) {

body#onpu #container {
    width: 90%;
}

}


/* screenwidth less than 1131px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1131px) {

body#onpu #container {
    width: 95%;
}

}

/* screenwidth less than 1095px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1095px) {
body#onpu article.contents{
       width:90%;

}
}



/* screenwidth less than 1073px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1073px) {

body#onpu #container {
    width: 98%;
}


}

/* screenwidth less than 1040px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1040px) {


body#onpu #container {
    width: 100%;
}

}


/* screenwidth less than 1026px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1026px) {

/*body#onpu #container {
    width: 99%;
}*/

body#onpu #container #main {
    width: 99%;
    float: none;
    margin: 0 auto 15px auto;
    padding-top: 30px;	
}

#title{
	 background: url("../img/onpu/title_893.jpg") no-repeat top right #FFF;
}




body#onpu #container #main #intro{
    margin:0 auto;
}


body#onpu #container #main #intro h3{
    font-weight: bold;
}

body#onpu #container #main #intro p{
    font-size:14px;
    line-height: 1.8em;
}

body#onpu #container #main #intro table{
    font-size:14px;
}
body#onpu #container #main #intro table th{
    width:8em;
}





body#onpu article.contents{
       width:95%;

}


body#onpu article #history .left table{
   font-size:14px;
}

body#onpu #container #main #intro dl dd.dd2 ul li{
    font-size: 14px;
}

body#onpu #container #main #intro dl dd.dd2 p{
    font-size: 14px;
}
body#onpu #container #main #intro dl.dl1 dd h5{
   font-size:14px;
}
body#onpu article #history .left ul li{
    font-size: 14px;
}

/*文字14px*/


}


/* screenwidth less than 950px     
--------------------------------------------------------------------- */
@media only screen and (max-width: 950px) {

body#onpu article #history{
   margin: 0 auto;
}

body#onpu article #history .left{
   width:99%;
   float: none;
   margin: 0 auto 20px auto;
}
body#onpu article #history .right{
   width:99%;
   float: none;
   margin: 0 auto 20px auto;
}
/*
body#onpu article #history .right ul{
   margin: 0 auto;
   text-align: center;
   width: 99%;   
}

body#onpu article #history .right ul li.photo1{
   margin: 0 auto 10px auto;
   display: block;
   width:40%;
}

*/
body#onpu article #history .right ul{
   margin: 0 auto;
   text-align: center;
   width: 80%;   
}

body#onpu article #history .right ul li.photo1{
   margin: 0 20px 10px 0;
   display: inline-block;
   width:45%;
}
/*
body#onpu article #history .right ul li.photo2{
   margin: 0 25px 10px 0;
   display: inline-block;
   width:30%;
}*/


body#onpu article #history ul.image{
    text-align: center;
}
body#onpu article #history ul.image li{
    float: none;
	display: inline-block;
}



body#onpu article #column ol {
    width: 93%;
}

body#onpu article #column ol li {
    width: 25%;
}


}




/* screenwidth less than 858px
--------------------------------------------------------------------- */
@media only screen and (max-width: 858px) {

#title{
	 background: url("../img/onpu/title_bg.jpg") no-repeat top right #FFF;
}

body#onpu #container #main dl.oka_eco dt {
    width: 50px;
}
body#onpu #container #main dl.oka_eco dd {
    padding-top: 1em;  
}

/*
body#onpu article #history .right ul li.photo1{
   margin: 0 auto 10px auto;
   display: block;
   width:50%;
}

*/

}


/* screenwidth less than 809px     
--------------------------------------------------------------------- */
@media only screen and (max-width: 809px) {

body#onpu #container #main #intro p.image {
    width: 60%;
}

body#onpu article #column ol li {
    height: 150px;
}


body#onpu article #column ol li.process {
    padding-top: 7.5em;

}
body#onpu article #column ol li.end{
    padding-top: 7.5em !important;
}
}




/* screenwidth less than 755px
--------------------------------------------------------------------- */
@media only screen and (max-width: 755px) {

body#onpu{
   background: url(../img/onpu/bg2.jpg) no-repeat top center #E17E13;
}
}


/* screenwidth less than 710px
--------------------------------------------------------------------- */
@media only screen and (max-width: 710px) {
body#onpu article #history .right ul li.photo1{

   width:55%;
}
}

/* screenwidth less than 690px
--------------------------------------------------------------------- */
@media only screen and (max-width: 690px) {

body#onpu #container #main #title {
    background: url(../img/onpu/title_bg.jpg) no-repeat 50px bottom #FFF;
}

}


/* screenwidth less than 640px
--------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {


body#onpu #container #main {
    width: 100%;
    padding-top: 15px;
}



body#onpu #container #main #title{
    width: 100%;
	background: url("../img/onpu/title2.jpg") no-repeat 50px bottom #FFF;
	padding-top: 0px;
	background-size:cover;

}
body#onpu #container #main dl.oka_eco{
      margin-bottom: 0;
	  width:99%;
	/*background: rgba(255,255,255,0.5) ;*/
}
body#onpu #container #main dl.oka_eco dt {
    width: 30px;
}
body#onpu #container #main dl.oka_eco dd{
    padding-top: 5px;
}

body#onpu #container #main #title h2{
    width: auto;
    height: auto;
    margin: 0 auto 40px 0;
    padding: 0 15px 10px;
	text-indent:0;
	background-image:none;
	font-size:30px;
	font-family: 'M PLUS 1', sans-serif;
	color:#FF4200;
	font-weight: 600;
	background-color:rgba(255,255,255,0.8);

}

body#onpu #container #main #title h2 span{
    display: block;
	color: #8F4A2A;
	font-size:12px;
	font-weight: normal;
  
}

/*
#title .orange{
    display: block;
	width:110px;
	height: auto;
	margin:0 auto 0 20px;
}*/

body#onpu #container #main #intro {
    width: 95%;
}


body#onpu #container #main #intro table th{
    width:8em;
}



body#onpu #container #main #intro dl dt{
  display: none;
}

body#onpu #container #main #intro dl dd{
    float: none;
	width:99%;
	margin: 0 auto 20px auto;
}


p.intro_img2{
   display: none;
}

.intro_img_mb{
   display: block;
   width:90%;
   margin: 0 auto 20px auto;
   text-align: center;
   padding-left:20px; 
}

.intro_img_mb img.img1{
    width:30%;
	margin: 0 20px 0 0;
	float: left;
}
/*
.intro_img_mb ul{
    width:50%;
	float:left;
	margin: 0 auto 0 0;
}

.intro_img_mb ul li{
    width:99%;
	margin: 0 auto 20px auto;
	text-align: center;
	font-size: 14px;
	
}
.intro_img_mb ul li img{
    width:100%;
	height: auto;
	display: block;
	margin-bottom: 5px;
}*/
/*
.intro_img_mb ul li:first-child{
    width:60%;
	height: auto;
	margin: 0 auto;
}

.intro_img_mb ul li:nth-child(2){
    width:80%;
}
*/
body#onpu #container #main #intro table th{
   display: block;
   width:100%;
   border-bottom:none;

}
body#onpu #container #main #intro table th:before{

    content: "■";
}



body#onpu #container #main #intro table td{
   display: block;
   width:95%;
   padding-left: 1.5em;

}


body#onpu article #history .right ul li.photo1{
   width:65%;
}

body#onpu #container #main #intro dl.dl1 dd{
   float: none;
   width:99%;
   margin: 0 auto;

}


img.img1{
    display: block;
	margin: 0 auto 20px auto;
	width:70%;
	height: auto;
}

/*
.photo_mb{
   background: none;
}
*/

.bg_block{
	width:99%;
}

.omit{
  display: none;
}
/*body#onpu #container #main #intro dl.dl1 dt{
    display: block;
}*/
}

/* screenwidth less than 580px
--------------------------------------------------------------------- */
@media only screen and (max-width: 580px) {

.intro_img_mb{
     padding: 0;
}
/*
.intro_img_mb ul{
   float: none;
   margin: 0 auto 20px auto;
   width:70%;
   padding-top: 20px;
   
}*/
/*
.intro_img_mb {
   margin: 0 auto 20px auto;
   width:70%;
   padding-top: 20px;
}
*/
}



/* screenwidth less than 559px
--------------------------------------------------------------------- */
@media only screen and (max-width: 559px) {

body#onpu #container #main #title{
	background-size: auto;
}

body#onpu #container #main dl.oka_eco dd{
    color: #000;
	text-shadow: none;
	width:auto;
	padding-left: 1px;
}

}



/* screenwidth less than 480px
--------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

body#onpu #container #main #title{
background: url(../img/onpu/title2.jpg) no-repeat 20px bottom #FFF;
}



body#onpu #container #main #title h2{
    padding: 0 10px 0;
}




body#onpu #container #main #intro table th{
   display: block;
   width:99%;
   margin: 0 auto 5px auto;
   text-align: left;
   border-bottom: 0;
}
body#onpu #container #main #intro table td{
   display: block;
   width:99%;
   margin: 0 auto 5px auto;
   border-bottom: 1px solid #000;
   padding-left: 10px;  
}
/*
body#onpu article #column .table-frame table.profile th{
   display: block;
   width:99%;
   margin: 0 auto 5px auto;
   text-align: left;
   padding-left: 0;
   border-bottom: 0;
}

body#onpu article #column .table-frame table.profile td{
   display: block;
   width:99%;
   margin: 0 auto 5px auto;
   border-bottom: 1px solid #000;
   padding-left: 10px;
}

*/
body#onpu #container #main #intro table th:before{
   content: "■";
}
/*
body#onpu article #column .table-frame table.profile th:before{
   content: "■";
}*/

body#onpu #container #main #intro{
    padding-bottom: 10px;
}


body#onpu #container #main #intro dl dd{
    margin-bottom: 0;
}

body#onpu #container #main #intro p.image {
    width: 70%;
}

.intro_img_mb ul{
   width:80%;
}


}

/* screenwidth less than 420px
--------------------------------------------------------------------- */
@media only screen and (max-width: 420px) {

body#onpu article #history .right{
   margin-bottom: 0;
}

body#onpu article #history .right ul li.photo1 {
    width: 70%;
}
}

/* screenwidth less than 360px
--------------------------------------------------------------------- */
@media only screen and (max-width: 360px) {

body#onpu #container #main #intro p.image {
    width: 70%;
}
}


/* screenwidth less than 340px
--------------------------------------------------------------------- */
@media only screen and (max-width: 340px) {

body#onpu #container #main #title h2{
    font-size: 25px;
}


body#onpu article #history .right ul li.photo1 {
    width: 80%;
}
}

/* screenwidth less than 322px
--------------------------------------------------------------------- */
@media only screen and (max-width: 322px) {
body#onpu #container #main #title{
background: url(../img/onpu/title2.jpg) no-repeat -30px bottom #FFF;
}
}


/* screenwidth less than 289px
--------------------------------------------------------------------- */
@media only screen and (max-width: 289px) {

body#onpu #container #main dl.oka_eco dd{
    padding-top: 0;
	line-height: 1.1em;
}


body#onpu #container #main dl.oka_eco dd span{
    display: block;
}

}