@charset "utf-8";
/*メイン画像エリア*/
#main_area{margin:clamp(1.875rem, -3.15rem + 7.84vw, 3.125rem) 0;}
#main_area img{width:100%;height: auto;}
html{overflow-x: hidden;}
.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;}
.imgR > div{max-width:calc(100% - clamp(24.375rem, 17.259rem + 25.3vw, 37.5rem));}
h2.photo{position: relative;}
h2.photo:before{content:url("../images/home/bgg.webp");position:absolute;right:-70%;top:-100px;z-index: -1;}
h2.photo:after{content:url("../images/home/bgb.webp");position:absolute;left:-80px;bottom:-50px; z-index: -1;}
.intro p{font-size:clamp(1.25rem, -0.257rem + 2.35vw, 1.625rem); margin-bottom: 1em;}
.buttons{display: flex; flex-wrap: wrap;gap:1em;}
.btn {
    width:45%;
    background-color: #005eae;
    text-align: center;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #01579b;
}
#intro{position:relative;}
#intro::before{position:absolute;left:0; bottom:100px;display:block;content:"";background:url("../images/home/bglogo.svg");width:clamp(6.25rem, 3.667rem + 9.18vw, 14.688rem); height:clamp(7.25rem, 4.227rem + 10.75vw, 17.125rem);  z-index:-1; }
#intro::after {
	content:"";
	display: block;
	height:100px;
	width:100%; 
    background:url("../images/home/sankikasei.webp") repeat-x;
	background-size: auto 95px;
    animation: loop 20s linear infinite;
}
@keyframes loop {
  0%   { background-position: 0 center; }
  100% { background-position: -1100px center; } /* 画像の横サイズに合わせる */
}
/*製品紹介*/
.prod::before{display: block; content:"Products";font-size: clamp(1.25rem, -0.681rem + 6.87vw, 4.813rem);}
.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;}

/* レスポンシブ
------------------------------------------------------------*/
/* 1080px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1080px){
    .intro br{display: none;}
    .btn {width:70%;}
}
/* 1024px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1024px){
    .imgR{flex-direction:column;}
    .imgR > div{max-width:100%;}
     h2.photo{margin-bottom: 80px;}
    h2.photo:before{right:-100%;top:-80px;}
    h2.photo:after{left:-80px;bottom:-50px;}
    .buttons{justify-content: center;}
    .btn {width:45%;}    
    
    /*製品紹介*/
    .product li{width:32%;}
    .product a{margin: auto;}
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    h2.photo:before{content:url("../images/home/bgg_s.webp");position:absolute;right:-60%;top:-40px;;}
    h2.photo:after{content:url("../images/home/bgb_s.webp");position:absolute;left:-50px;bottom:-40px; }
    #intro::before{display: none;}
    /*製品紹介*/
    .product li{width:48%;}
}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
	/*メイン画像*/
    
    /*製品紹介*/
    .product li{width:100%;}
    .product img{width:100% !important;}

}