@charset "utf-8";
/*各ページ共通
------------------------------------------------------------*/
/*メイン画像エリア*/
#main_area{
    display:flex;
    align-items: center;
  /* 135deg = 左上→右下。好みで角度変更可 */
    background: linear-gradient(135deg,#009a5a 0 45%,#005eae 45% 100% );
    height: 300px;
}
h1{width:95%;max-width: 1280px;margin:auto;color:#FFF;font-size:clamp(1.25rem, 0.606rem + 2.29vw, 2.438rem);/*最大39最小20*/}
/*パンくず*/
#pankuzu {display:flex;justify-content:  flex-end; max-width:1280px;margin:10px auto 30px; list-style: none;}
#pankuzu li:not(:last-child)::after{content:">";padding:0 5px;}

/*このページ単体のCSS------------------------------------------------------------*/
.busi::before{display: block; content:"Our Business";font-size: clamp(1.25rem, 0.369rem + 3.13vw, 2.875rem);}
/*化成品事業*/
.imgR{display: flex; flex-wrap: wrap; flex-direction: row-reverse;justify-content: space-between;align-items: center;}
.imgR img{width:100%; max-width: clamp(21.875rem, 14.827rem + 25.06vw, 34.875rem); height: auto; border-radius: 15px 0 0 15px;}
.imgR > div{max-width:calc(100% - clamp(24.375rem, 17.259rem + 25.3vw, 37.5rem));}
.w1000{width:95%; max-width:1000px; margin: 0 auto;}
/*製品紹介*/
.product a{display: block; max-width:300px; max-height:300px;  position: relative;color:#000;}
.product span{display:flex;align-items: center;justify-content: space-between;width:75%; position: absolute;top:30px;left:0; background: #FFF;padding:10px;border-radius: 0 30px 30px 0;}
.product span::after{content:"";display: block; background:url("../images/arrow.webp") no-repeat left center/contain;width:24px; height: 24px;}
.product a:hover span{width:90%; color:#01579b; transition: 0.3s ease;}
/* レスポンシブ-----------------------------------------------------------------------*/
/* 1024px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    /*製品紹介*/
    .product li{width:32%;}
    .product a{margin: auto;}
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*メイン画像*/
    #main_area{height: 200px !important;}
    /*化成品事業*/
    .imgR{flex-direction:column;}
    .imgR img{margin-bottom: 30px;border-radius: 15px;}
    .imgR > div{max-width:100%;}
    /*製品紹介*/
    .product li{width:48%;}
}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*製品紹介*/
    .product li{width:100%;}
    .product img{width:100% !important;}
}