@charset "UTF-8";

/*
===========================================================================
|           site common style
===========================================================================
*/
section#introduction{
    height:250px;
    background: #0f4069
}

#introduction div.copy {
    float: left;
    width: 46%;
    color:#fff;
}
#introduction div.copy h1{
    color:#fff;
}

/*----------------------------------------------------------------------
/   about
/----------------------------------------------------------------------*/
#aboutIndex{

}
#aboutIndex img.safe{
    float:right;
    width:25%;
    margin:0 0 10px 10px;
}
#aboutIndex section#introduction{
    background: #000 url("/about/images/index/about_image.jpg") no-repeat right 50%;
    background-size: auto 100%;
    color: #fff;
    height:200px;
}
#aboutIndex section#introduction div.wrapper{
    position: relative;
}
#aboutIndex section#introduction h1{
    margin:70px 0 0 7%;
    position: absolute;
    width:250px;
}
#aboutIndex section#introduction h1 img{
    display: block;
    width:100%;
}
#aboutIndex img.p{
    width:32.5%;
    display:block;
    float:left;
    margin: 0.2%;
}
#aboutIndex div.centerPic{
    overflow: hidden;
    margin:0 auto;
}
#aboutIndex span.num{
    font-size:160%;
}

/*----------------------------------------------------------------------
/   aboutPhilosophy
/----------------------------------------------------------------------*/
#aboutPhilosophy section#introduction{
    background: #f3f8f9 url("/about/images/philosophy/top_image.png") no-repeat right 50%;
    background-size: auto 100%;
    color: #000;
    height:200px;
}

#aboutPhilosophy section#introduction h1{
    margin:50px 0 0 8%;
    position: absolute;
    width:250px;
}
#aboutPhilosophy section#introduction h1 img{
    display: block;
    width:100%;
}
#aboutPhilosophy table.history th{
    width: 14%;
    text-align: left;
    vertical-align: top;
    padding-right:50px;
    padding-left:10px;
    font-size:120%;
    font-weight: normal;
}

#aboutPhilosophy table.history td ul.list{
    margin:0 0 0;
}

/*=====================================================
    aboutCompany
=======================================================*/
#aboutCompany section#introduction{
    background: #dde1e7;
    background-size: auto 100%;
    height:200px;
}

#aboutCompany section#introduction div.copy{
    background: #dde1e7;
    background-size: auto 100%;
    padding-left:30px;
    height:auto;
    width:60%;
    box-sizing: border-box;
}
#aboutCompany section#introduction h1{
    color:#fff;
    margin-top:60px;
}
#aboutCompany section#introduction h1 img{
    display: block;
    width:100%;
    max-width:500px;
}
#aboutCompany div.from{
    text-align: right;
    margin:0 0 0px 0;
}
#aboutCompany img#ceo{

    position: absolute;
    bottom:0;
    right:13%;
    width:400px;
}
#aboutCompany #map{
    width:100%;
    right:20%;
    border:1px solid #ddd;
    margin:10px 0 0 0;
}
#aboutCompany table.history th{
    vertical-align:top;
    width:16%;
}

/*----sdgs page----*/
div.sdgs_from{
    text-align: right;
    margin:0 0 100px 0;
}
img.w50{
	width:50%;
}
#aboutsdgs section#introduction{
	background-color:#ffffff;
	height:200px;
}
#aboutsdgs #wrapper{text-align:center;}

#aboutsdgs div.copy h1{
margin:0;

}


/*=====================================================
    device
=======================================================*/

/*
    TAB
    */
@media screen and (max-width: 991px) {
    #aboutPhilosophy section#introduction h1{
        margin-left: 2%;
    }
}


/*
    SPHONE
    */
@media screen and (max-width: 479px) {
    #aboutIndex section#introduction,
    #aboutPhilosophy section#introduction{

    }
    #introduction div.copy{
        width:auto;
        text-align: center;
    }
    #aboutIndex section#introduction h1,
    #aboutPhilosophy section#introduction h1{
        max-width:80%;
        margin:0 !important;
        position: static;
    }
    #aboutIndex img.p{
        width:49.6%;
        display:block;
        float:left;
        margin: 0.2%;
    }
    #aboutIndex img.safe{
        float:none;
        display: block;
        width:60%;
        margin:0 auto 20px auto;
    }


    #aboutIndex section#introduction h1 img,
    #aboutPhilosophy section#introduction h1 img{
        margin:0 ;
        width:65%;
    }
    #aboutCompany img#ceo{
        display: block;
        position: static;
        width:30%;
        float:right;
    }
    #aboutCompany section#introduction h1{
        margin:0;
        width:65%;
    }
    #aboutCompany section#introduction div.copy{
        padding-left:5%;
    }
    body#aboutCompany #introduction div.copy h1{
        top:40%;
    }
    /*
    #aboutCompany section#introduction div.copy{
        float:none;
        margin:0;
        padding:0;
        width:auto;
    }
    body#aboutCompany #introduction div.copy h1{
        position: static !important;
        font-size:80%;
        margin:0;
    }
    body#aboutCompany #introduction div.copy h1 img{
        width:80%;
        margin:0 auto;
    }
    */
    #aboutCompany section#introduction{
        padding:0;
    }
    #aboutCompany section#introduction div.wrapper{
        padding:0;
    }
    #aboutCompany table.grid th,
    #aboutCompany table.grid td{
        text-align: left;
        display: block;
    }
    #aboutCompany table.history td,
    #aboutCompany table.history th{
        display: block;
        width:auto;
    }
    #aboutCompany table.history th{
        border:none;
        padding:10px 0 0 0 ;
        font-size:130%;
    }
    #aboutCompany table.history td{
        padding-top:0;
    }
	
	/*---*/
	#aboutsdgs h1 img{
        display: block;
        position: static;
        width:50%;
/*        float:right;*/
    }
    #aboutsdgs section#introduction h1{
        margin:0;
        width:65%;
    }
    #aboutCompany section#introduction div.copy{
        padding-left:5%;
    }
    body#aboutsdgs #introduction div.copy h1{
        top:5%;
    }

	
}