@charset "utf-8";
@import url(timeline_style.css);


@media only screen and (min-width: 1200px) {
            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 720px;
                background: url(../img/company_mainvis.jpg);
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-attachment: fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            /*contents*/
            #container {
                width: 100%;
            }

            #container .intro {
                background-color: white;
            }

            #container h4{
                text-align: center;
                font-weight: 300;
                color: #efefef; 
                padding-top: 50px;
            }

            #container .intro p{
                width: 1000px;
                margin: 0 auto;
                text-align: center;
                color: #1a1a1a;
                padding-top: 20px;
                padding-bottom: 50px;
            }

            #container .vision {
                background-color: #c42127;
            }

            #container .vision img {
                padding-top: 30px;
                display: block;
                margin: 0 auto;
                
            }

            #container .vision .text {
                margin: 0 auto; width: 550px; margin-top: 10px; padding-bottom: 50px;
            }

            #container .vision h5 {
                color: #1a1a1a; text-align: center;
            }

            #container .vision p {
                color: #1a1a1a; text-align: center;
                width: 100%; padding-top: 5px;
            }

            #container .history {
                background-color: #1a1a1a;
            }


            #container .history section {
                width: 1200px;
                margin-bottom: 0;
            }

            #container .history .area {padding-bottom: 50px;}

            #container .assets {
                height: auto;
                background-color: white;
            }

            #container .assets > .area > p {
                width: 820px;
                margin: 0 auto;
                text-align: center;
                color: #1a1a1a;
                padding-top: 20px;
                margin-bottom: 40px; 
            }

            #container .assets ul.label {
                width: 1200px; overflow: hidden;
                height: auto;
                margin-bottom: 30px;
            }

            #container .assets ul.label > li {
                float: left; width: 400px; height: auto; 
                border-right: 1px solid #e2e2e2;
                padding-bottom: 30px;
            }

            #container .assets ul.label > li:last-child {
                border-right: none;
            }

            #container .assets ul.label img {
                display: block;
                width: 320px;
                margin: 0 auto;
            }

            #container .assets ul.label img.labellogo {
                margin-top: 30px;
            }

            #container .assets li.white img {
                border: 1px solid #efefef;
            }

            #container .assets span {
                display: block;
                width: 20px;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                margin-top: 10px;
                margin-bottom: 10px;
            }

            #container .assets .colorcode {
                width: 318px;  margin: 0 auto;  overflow: hidden;
                margin-top: 10px; margin-bottom: 20px;
            }

            #container .assets .colorcode > li {
                display: block; float: right; width: auto;
                text-align: right; 
                font-size: 8pt; color: #1a1a1a; letter-spacing: 1px; opacity: 0.5;
            }

            #container .assets .colorcode > li~li {
                margin-right: 10px;
            }

            #container .assets h5{
                color: #1a1a1a;
                font-weight: 300;
                text-align: center;
                margin-top: 10px;
            }

            #container .assets ul.label p{
                width: 300px; 
                margin: 0 auto;
                text-align: center; 
                color: #1a1a1a; padding-top: 0;
            }

            #container .assets ul.guideline {
                width: 1200px; overflow: hidden;
                height: auto;
                margin: 0 auto; 
                border-top: 1px solid #e2e2e2;
                padding-top: 11px;
            }

            #container .assets ul.guideline li{
                width: 600px; float: left;
                height: auto;
                text-align: right;
            }

            #container .assets ul.guideline li.guide1{
                text-align: right;   
            }

            #container .assets ul.guideline li.guide2{
                text-align: left;   
            }

            #container .intro h4, #container .assets h4{
                color: #1a1a1a;
            }

            #container .area {
                width: 1200px; margin: 0 auto;
            }

            #footer {
                margin-top: 131px;
            }
}






@media only screen and (max-width: 1200px) {
            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 600px;
                background: url(../img/company_mainvis.jpg);
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-attachment: fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            /*contents*/
            #container {
                width: 100%; margin: 0 auto;
            }

            #container .intro {
                background-color: white;
            }

            #container h4{
                text-align: center;
                margin: 0 auto; 
                font-weight: 300;
                color: #efefef; 
                padding-top: 50px;
            }

            #container .intro p{
                width: 100%;
                margin: 0 auto;
                text-align: center;
                color: #1a1a1a; 
                padding: 20px 30px 50px 30px;
            }

            #container .vision {
                background-color: #c42127;
            }

            #container .vision img {
                padding-top: 30px;
                display: block;
                width: 700px;
                margin: 0 auto;
                
            }

            #container .vision .text {
                margin: 0 auto; width: 550px; margin-top: 10px; padding-bottom: 50px;
            }

            #container .vision h5 {
                color: #1a1a1a; text-align: center;
            }

            #container .vision p {
                color: #1a1a1a; text-align: center;
                width: 100%; padding-top: 5px;
            }


            #container .history {
                background-color: #1a1a1a;
            }


            #container .history section {
                width: 90%;
                margin-bottom: 0;
            }

            #container .history .area {padding-bottom: 50px;}

            #container .assets {
                height: auto;
                background-color: white;
            }

            #container .assets > .area > p {
                width: 820px;
                margin: 0 auto;
                text-align: center;
                color: #1a1a1a;
                padding-top: 20px;
                margin-bottom: 30px; 
            }

            #container .assets ul.label {
                width: 820px; overflow: hidden;
                height: auto; margin: 0 auto;
                margin-bottom: 0; 
            }

            #container .assets ul.label > li {
                float: none; width: 820px; height: auto; 
                border-top: 1px solid #e2e2e2;
                padding-bottom: 10px; overflow: hidden;
            }

            #container .assets ul.label img {
                display: block;
                width: 260px;
                margin: 0 auto;
            }

            #container .assets ul.label img.labellogo {
                margin-top: 30px;
            }

            #container .assets li.white img {
                border: 1px solid #efefef;
            }

            #container .assets span {
                display: block;
                width: 20px;
                height: 2px;
                background-color: #c42127;
                
                margin-top: 10px;
                margin-bottom: 10px;
            }

            #container .assets .colorcode {
                width: 260px;  margin: 0 auto;  overflow: hidden;
                margin-top: 10px; margin-bottom: 20px;
            }

            #container .assets .colorcode > li {
                display: block; float: right; width: auto;
                text-align: right; 
                font-size: 8pt; color: #1a1a1a; letter-spacing: 1px; opacity: 0.5;
            }

            #container .assets .colorcode > li~li {
                margin-right: 10px;
            }

            #container .assets .img {
                float: left;
                width: 410px;
               
            }
            #container .assets .text {
                float: left;
                width: 410px;
                padding-top: 30px;
                
            }

            #container .assets h5{
                color: #1a1a1a;
                font-weight: 300;
                text-align: left;
                margin-top: 0;
            }

            #container .assets ul.label p{
                width: 400px; letter-spacing: 0.5px;
                margin: 0 auto;
                text-align: left; 
                color: #1a1a1a; padding-top: 0;
                margin-left: 0; margin-right: 0;
            }

            #container .assets ul.guideline {
                width: 820px; overflow: hidden;
                height: auto;
                margin: 0 auto; 
                border-top: 1px solid #e2e2e2;
                padding-top: 20px;
            }

            #container .assets ul.guideline li{
                width: 410px; float: left;
                height: auto;
                text-align: right;
            }

            #container .assets ul.guideline li > img {
                width: 405px;
            }

            #container .assets ul.guideline li.guide1{
                text-align: right;   
            }

            #container .assets ul.guideline li.guide2{
                text-align: left;   
            }


            #container .intro h4, #container .assets h4{
                color: #1a1a1a;
            }

            #container .area {
                width: 100%; margin: 0 auto;
            }

            #footer {
                margin-top: 150px;
            }
}




@media only screen and (max-width: 820px) {
            /*main visual*/
            #main_vis { 
                width: 100%;
                height: 420px;
                background: url(../img/company_mainvis2.jpg) no-repeat center;
                position: relative; 
            }

            #main_vis h3{
                padding-top: 180px;
            }


            /*contents*/
            #container {
                width: 100%; margin: 0 auto;
            }

            #container .intro {
                background-color: white;
            }

            #container h4{
                text-align: center;
                margin: 0 auto; 
                font-weight: 300;
                color: #efefef; 
                padding-top: 50px;
            }

            #container .intro p{
                width: 100%;
                margin: 0 auto;
                text-align: center;
                color: #1a1a1a;
                padding: 10px 30px 50px 30px; 
            }

            #container .vision {
                background-color: #c42127;
            }

            #container .vision img {
                padding-top: 20px;
                display: block;
                width: 100%;
                margin: 0 auto;
                
            }

            #container .vision .text {
                margin: 0 auto; width: 100%; margin-top: 10px;
                padding-bottom: 50px; padding-left: 30px; padding-right: 30px;
            }

            #container .vision h5 {
                color: #1a1a1a; text-align: center;
            }

            #container .vision p {
                color: #1a1a1a; text-align: center;
                width: 100%; padding-top: 5px;
            }


            #container .history {
                background-color: #1a1a1a;
            }


            #container .history section {
                width: 90%;
                margin-bottom: 0;
            }

            #container .history .area {padding-bottom: 50px;}

            #container .assets {
                height: auto;
                background-color: white;
            }

            #container .assets > .area > p{
                width: 100%;
                margin: 0 auto;
                text-align: center;
                color: #1a1a1a;
                padding: 10px 30px 50px 30px; 
            }

            #container .assets ul.label {
                width: 85%; overflow: hidden;
                height: auto; margin: 0 auto;
                margin-bottom: 0; 
            }

            #container .assets ul.label > li {
                float: none; width: 100%; height: auto; 
                border-top: 1px solid #e2e2e2;
                padding-bottom: 10px; overflow: hidden;
            }

            #container .assets ul.label img {
                display: block;
                width: 318px;
                margin: 0 auto;
            }

            #container .assets ul.label img.labellogo {
                margin-top: 30px;
            }

            #container .assets li.white img {
                border: 1px solid #efefef;
            }

            #container .assets span {
                display: block;
                width: 20px;
                height: 2px;
                background-color: #c42127;
                margin: 0 auto;
                margin-top: 10px;
                margin-bottom: 10px;
            }

            #container .assets .colorcode {
                width: 318px;  margin: 0 auto;  overflow: hidden;
                margin-top: 10px; margin-bottom: 20px;
            }

            #container .assets .colorcode > li {
                display: block; float: right; width: auto;
                text-align: right; 
                font-size: 8pt; color: #1a1a1a; letter-spacing: 1px; opacity: 0.5;
            }

            #container .assets .colorcode > li~li {
                margin-right: 10px;
            }

            #container .assets .img {
                width: 100%;
               
            }
            #container .assets .text {
                float: left;
                width: 100%;
                padding-top: 0;
                padding-bottom: 20px;
            }

            #container .assets h5{
                color: #1a1a1a;
                font-weight: 300;
                text-align: center;
                margin-top: 0;
            }

            #container .assets ul.label p{
                width: 100%; letter-spacing: 0.5px;
                margin: 0 auto;
                text-align: center; 
                color: #1a1a1a; margin-left: 0;
            }

            #container .assets ul.guideline {
                width: 85%; overflow: hidden;
                height: auto;
                margin: 0 auto; 
                border-top: 1px solid #e2e2e2;
                padding-top: 20px;
            }

            #container .assets ul.guideline li{
                width: 100%; float: none;
                height: auto;
                text-align: right;
            }

            #container .assets ul.guideline li > img {
                width: 100%;
            }

            #container .assets ul.guideline li.guide1{
                text-align: center; margin-top: -18%;
            }

            #container .assets ul.guideline li.guide2{
                text-align: center; margin-top: -20%;
            }

            #container .intro h4, #container .assets h4{
                color: #1a1a1a;
            }

            #container .area {
                width: 100%; margin: 0 auto;
            }

            #footer {
                margin-top: 30px;
            }

}