/* page-title */
#page-title{
    background-color:#89BC51;
    padding: 100px 20px 20px 60px;
    margin-bottom: 50px;
    display:flex; 
    justify-content: flex-start;
}
@media screen and (max-width:768px) {
    #page-title{
        margin:0 0 100px 0;
    }
}
#page-title .no{
    align-self: stretch;
    font-size: 80px;
    color:#AACD7C;
    font-weight:700;
    line-height: 70px;
}
#page-title h2{
    flex-grow:2.5;
    align-self:flex-end;
    color:#fff;
    font-size: 50px;
    line-height: 1;
    margin-left: 20px;
}
#page-title h2 span.bgLRextend::before{
    background:#63AC29;
}

/* main-area */
#main-area2{
    width:75%;
    margin:0 auto;
    padding: 0 0; 
}

/*  detail  */
p.en {
    font-size: 0.9em;
    line-height: 1.2;
    margin:5px 0 10px;
}
.detail {
    margin-bottom: 20px;
}
.detail-content {
    width: 85%;
    margin: 30px auto 50px;
    /*display: flex;*/
}
.detail h2 {
    background-color:#EDEDED;
    color: #63AC29;
    font-size:2em;
    padding: 5px 0 5px 30px ;
    letter-spacing: 0;
    margin-bottom: 20px;
}
.detail h2 span{
    font-size: 0.5em;
    text-transform: none;
    padding: 0;
}
.detail img.resize {
    width:75%;
    display: block;
    margin: 30px auto 40px;
}
.detail dl{
    display: flex;
    flex-wrap: wrap;
	padding:0 0 20px 0;
}
.detail dt  {
    background-color: #63AC29;
    width: 25%;
    margin: 0 20px 20px 0;
    color: #fff;
    padding: 5px 10px;
    text-align: center;
    font-size: 1.3em;
    font-weight: 500;
}
.detail dd {
    background-color: #D6E5C1;
    /*color:#667778 ;*/
    width: 70%;
    padding: 5px 20px;
    margin: 0 0 20px 0;
    font-size: 1.2em;
}
/*.detail dt p.en, .detail dd p.en {
    font-size: 0.8em;
    line-height: 1;
}*/
.detail .history dt{
    background-color:unset;
    color:#555 ;  /* #667778 */
    text-align:left;
    font-size: 1em;
    font-weight: 300;

    padding: 0;
}
.detail .history dd{
    background-color:unset;
    font-size:1em;
    margin: 0 0 20px 0;
    padding: 0;
}
.iframe-wrap{
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden;
}
.iframe-wrap iframe{
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border: 0
}


/* VISION */
#main-area2 h2.vision{ color:#63AC29; line-height: 1.2; margin-bottom: 30px; text-transform: none;}
#main-area2 h2.vision span{ font-size: 0.9em;} 
#main-area2 h2.vision p{ font-size: 0.6em;} 

/*  Materials  discription 
.detail-content2    { width: 85%; margin: 30px auto 50px; }
.detail-content2 p { background-color: unset; font-size: 3rem; line-height: 4rem;}
*/

#main-second .img2{ width:50%; min-height: 300px;  display: flex; justify-content:space-between;}
#vision .i4 { background-image:url(../img/top_p2_01.jpg); background-size: cover;}
#vision .i5 { background-image:url(../img/03_metal_11.png); background-size: cover;}
#vision .i6 { background-image:url(../img/03_metal_10.jpg); background-size: cover;}

/*  metal image */
.detail-content3    { width: 85%; margin: 30px auto 50px;display: flex; justify-content: space-between;}
.detail-content3 h2 { background-color: unset; font-size: 3rem; line-height: 4rem;}

.metal { float:left; width: 47%; }
.metaname  { width:100%; background-color:#EDEDED;}
.metaname h4 { float:left; width:20%; color: #fff; font-size: 2.5rem; padding-left: 10px;}
.metaname p { float:left; width:70%; color:#667778 ; font-size: 0.8rem; line-height: 1rem;padding-top:20px;}
.metaname p span {font-size: 0.8m;}
.imgmeta { width:100%; height: 200px; background-size: cover;}
.meta01  {background-image:url(../img/03_metal_01.jpg);}
.meta02  {background-image:url(../img/03_metal_02.jpg);}
.meta03  {background-image:url(../img/03_metal_03.jpg);}
.meta04  {background-image:url(../img/03_metal_04.jpg);}
.meta05  {background-image:url(../img/03_metal_05.jpg);}
.meta06  {background-image:url(../img/03_metal_066.jpg);}
.meta07  {background-image:url(../img/03_metal_07.jpg);}
.meta08  {background-image:url(../img/03_metal_088.jpg);}
.meta09  {background-image:url(../img/03_metal_09.jpg);}
.meta10  {background-image:url(../img/03_metal_100.jpg);}
.meta11  {background-image:url(../img/03_metal_11.jpg);}
.meta12  {background-image:url(../img/03_metal_12.jpg);}

.sanpai01  {background-image:url(../img/03_sanpai_01.jpg);}
.sanpai02  {background-image:url(../img/03_sanpai_02.jpg);}
.sanpai03  {background-image:url(../img/03_sanpai_03.jpg);}
.sanpai04  {background-image:url(../img/03_sanpai_04.jpg);}
.sanpai05  {background-image:url(../img/03_sanpai_05.jpg);}
.sanpai06  {background-image:url(../img/03_sanpai_06.jpg);}
.sanpai07  {background-image:url(../img/03_sanpai_07.jpg);}
.sanpai08  {background-image:url(../img/03_sanpai_08.jpg);}
.sanpai09  {background-image:url(../img/03_sanpai_09.jpg);}
.sanpai10  {background-image:url(../img/03_sanpai_10.jpg);}



@media screen and (max-width:768px) {
    .detail-content{width: 100%; margin: 10px 0px;  }
    #main-second .img2
    { width:100%; min-height: 150px;  display: flex; justify-content:space-between;}
    .detail-content3    { width: 100%; margin: 30px 0px;}
    .metal{width: 49%; }
    .metaname h4 { font-size: 1.1rem; }
    .metaname p {padding: 5px 0;}
    #page-title{padding: 70px 10px 10px 10px; margin-bottom: 20px;}
    #page-title .no{ font-size: 30px;line-height: 30px;}
    #page-title h2{ font-size: 28px;margin-left: 10px;}
    #main-area2{ width:90%;}
    h2.vision {font-size: 1.3rem;letter-spacing: 0;}
    .detail h2{padding: 5px 0 5px 10px;font-size: 1.8em;}
    .detail img.resize { width:100%; margin: 10px auto 20px;}
    #main-area2 p {line-height: 1.5em;}
    .imgmeta { height: 100px; }
    #main-area2 .metaname p{line-height: 1.1em;font-size: 0.7rem;}
    .metaname h4 { padding-left: 5px;}
    .detail dt  {margin: 0 10px 20px 0;font-size: 1.1em;}
    .detail dd {margin: 0 0 20px 0;font-size: 1.1em;}
}