@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 Products";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));}

h3{
    font-size: clamp(1.125rem, 0.989rem + 0.48vw, 1.375rem); 
    background-image: linear-gradient(to right, #009a5a 0%, #009a5a 20%, #e6e6e6 20%, #e6e6e6 100%);
    background-size: 100% 3px; /* 下線の太さ */
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 3px; /* テキストと下線の距離 */
    margin-bottom:20px;
}
h3 span {display:block; padding: 0 0 15px 0;}
main ul{display:flex;flex-wrap: wrap; column-gap:2%; row-gap:50px; }
main ul li{width:23.4%; }
p.cat{font-size:14px; border:1px solid #005eae; border-radius: 20px; padding:6px;text-align: center; width:80%;margin:15px auto;}
p.type{text-align:center;}
main li img{border-radius: 10px;}

/* レスポンシブ-----------------------------------------------------------------------*/
/* 1024px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
main ul{column-gap:1.25%; }
main ul li{width:32.5%;}
}

/* 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%;}
    main ul{column-gap:4%; }
    main ul li{width:48%;}
}

/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){

}