@charset "UTF-8";
/*----------------------------------------
法人・個人事業主のお客様ページは以下を挿入
----------------------------------------*/ 
/*下層ヘッダー背景グラデ*/
.pages_head { background: #41D6C5;
background: linear-gradient(90deg,rgba(65, 214, 197, 1) 0%, rgba(43, 198, 150, 1) 100%); }
 
/*サイドメニュー色変*/
.side_nav .side_nav_box { background: #C7F7EE; }
.side_nav a { color: #232323; }
.side_nav a:hover { color: #232323; background: #bae8df; }
.side_nav a.is-active { color: #232323; background: #a5e8db; font-weight: 700;}
 
/*----------------------------------------
END 法人・個人事業主のお客様ページは以下を挿入 END
----------------------------------------*/ 

.energy_black{color: #000000;}



h3.intro { font-family: var(--font-Mincho-B1); font-weight: 800; font-size: clamp(16px, 4vw, 28px); line-height: 1.6; color: var(--blue-color); margin-bottom: 40px; }
.energy_page{margin-top: 30px;}

.energy_page .c-button-more { display: block; text-align: center; align-items: center; padding: 15px 0; border: 2px solid #013396; border-radius: 9999px; background-color: #fff; color: #013396; font-size: clamp(15px, 3vw, 18px); font-weight: 700; letter-spacing: 0.15em; text-decoration: none; transition: all 0.3s ease; max-width: 300px; margin: 30px auto; position: relative; }
.energy_page .c-button-more svg { width: 9px; height: auto; transition: all 0.3s ease; position: absolute; right: 5%; bottom: 19px; }
.energy_page .c-button-more:hover { background-color: #013396; color: #fff; }
.energy_page .c-button-more:hover svg { color: #fff; }
.energy_page .c-button-more span { vertical-align: 3px; }


.lubricating_oil__grid_box01 { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: clamp(25px, 3vw, 28px); }
.app-card { background: #fff; background: #f5fbff; border-radius: 12px; padding: clamp(16px, 2.4vw, 30px);}
.app-card__title { margin: 0 0 clamp(10px, 2vw, 18px); color: var(--blue-color); font-weight: 500; font-size: clamp(15px, 1.8vw, 18px);line-height: 1.6; }
.app-card__title--left { text-align: left; }
.app-card__visual { position: relative; margin: 0 0 clamp(30px, 2vw, 30px); }
.app-card__visual img { display: block; width: 100%; height: auto; border-radius: 12px; }
.app-card--flex .app-card__visual { margin-bottom: 40px; }
.app-card--flex .app-card__visual::after { content: ""; position: absolute; left: 50%; bottom: -30px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid var(--blue-color); transform: translateX(-50%); }
.app-card__body { color: #2a2a2a; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.9; }
.app-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1.4fr; gap: clamp(16px, 4vw, 85px); align-items: center; }
.app-card--wide__head { display: grid; grid-template-rows: auto 1fr; gap: clamp(0px, 2vw, 14px); position: relative; }
.app-card--wide__head::after { content: ""; position: absolute; right: -38px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid var(--blue-color); }
.app-card--wide__body { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.9; position: relative; }


@media screen and (max-width: 1444px){
.lubricating_oil__grid_box01 { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: clamp(25px, 3vw, 28px); }
	
}
@media screen and (max-width:1102px){
.lubricating_oil__grid_box01 { display: flex; justify-content: center;flex-direction: column ;gap: clamp(25px, 3vw, 28px); }
	
}

.lubricating_oil_list01_blue{display: block;margin: 30px 0 20px;}
.lubricating_oil_list01_blue li{display: inline-block; font-size: 1.1rem; line-height: 1; padding:8px 34px; border: 1px solid #013396; color: #013396;margin-right: 27px;}

.lubricating_oil_list01_ligth-blue{display: block;margin:20px 0 60px;}
.lubricating_oil_list01_ligth-blue li{display: inline-block; font-size: 1.1rem; line-height: 1; padding:8px 25px; border: 1px solid #00C8C8; color: #00C8C8;margin-right: 27px;}

@media screen and (max-width:737px){
.lubricating_oil_list01_blue{display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: clamp(15px, 2vw, 20px);text-align: center;}	
.lubricating_oil_list01_ligth-blue{display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: clamp(15px, 2vw, 20px);text-align: center;}	
.lubricating_oil_list01_blue li{display:block; font-size: 1.1rem; line-height: 1.3; padding:5px 15px; border: 1px solid #013396; color: #013396;text-align: center;margin-right: 0;}
.lubricating_oil_list01_ligth-blue li{display: block; font-size: 1.1rem; line-height: 1.3; padding:5px 15px; border: 1px solid #00C8C8; color: #00C8C8;text-align: center;margin-right: 0;}	
}



.lubricating_oil_title {font-size: clamp(20px, 2.5vw, 25px); color: #013396; line-height: 1.4; margin: 0 0 8px; font-weight: 500; }	
.lubricating_oil_title_warp{ border-left: 3px solid; border-image: linear-gradient(180deg, #39b6b6 0% , #013396 100%) 1; padding-left: 15px; margin-bottom: 30px; }	



.lubricating_oil_flexBox01{display: flex;justify-content: space-between;gap: clamp(20px, 3vw, 40px); margin: 100px 0;}
.lubricating_oil_flexBox01_l{width: 53%;}
.lubricating_oil_flexBox01_r{width: 47%;}

.lubricating_oil_flexBox01_innergrid{ width: 100%; display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); gap: clamp(10px, 3vw, 15px); margin-top: 15px;}
.lubricating_oil_flexBox01_innergrid_inner{padding:15px;background: #e5f9f9;border-radius: 12px;display: flex;justify-content: center;flex-direction: column;}
.lubricating_oil_flexBox01_innergrid_inner img{}
.lubricating_oil_flexBox01_innergrid_inner p{font-weight: 600; color: var(--blue-color); text-align: center;font-size: 0.7rem;}

.lubricating_oil_flexBox01_innergrid_inner img.lubricating_oil_illust01{width: 100%;max-width: 90px; margin: 0 auto 10px;}
.lubricating_oil_flexBox01_innergrid_inner img.lubricating_oil_illust02{width: 100%;max-width: 90px; margin: 0 auto 10px;}
.lubricating_oil_flexBox01_innergrid_inner img.lubricating_oil_illust03{width: 100%;max-width: 90px; margin: 0 auto 10px;}
.lubricating_oil_flexBox01_innergrid_inner img.lubricating_oil_illust04{width: 100%;max-width: 70px; margin: 0 auto 10px;}
.lubricating_oil_flexBox01_innergrid_inner img.lubricating_oil_illust05{width: 100%;max-width: 80px; margin: 0 auto 10px;}
.lubricating_oil_flexBox01_innergrid_inner img.lubricating_oil_illust06{width: 100%;max-width: 80px; margin: 0 auto 10px;}
.lubricating_oil_flexBox01_innergrid_inner img.lubricating_oil_illust07{width: 100%;max-width: 80px; margin: 0 auto 10px;}
.lubricating_oil_flexBox01_innergrid_inner img.lubricating_oil_illust08{width: 100%;max-width: 80px; margin: 0 auto 10px;}
.lubricating_oil_flexBox01_innergrid_inner img.lubricating_oil_illust09{width: 100%;max-width: 80px; margin: 0 auto 10px;}


@media screen and (max-width: 1170px){
.lubricating_oil_flexBox01{display: flex;justify-content: center; flex-direction: column; gap: clamp(20px, 3vw, 40px);}
.lubricating_oil_flexBox01_l{width: 100%;}
.lubricating_oil_flexBox01_r{width: 100%; max-width: 550px;margin: 0 auto;}
}

@media screen and (max-width: 480px){
.lubricating_oil_flexBox01_innergrid{ width: 100%; display: flex; justify-content: center; flex-direction: column; gap: clamp(15px, 3vw, 25px); margin-top: 30px;}
.lubricating_oil_flexBox01_innergrid_inner{padding: 20px;background: #e5f9f9;border-radius: 12px;display: flex;justify-content: center;flex-direction: column;}
.lubricating_oil_flexBox01_innergrid_inner img{}
.lubricating_oil_flexBox01_innergrid_inner p{font-weight: 600; color: var(--blue-color); text-align: center;}	
	
	
}

.lubricating_oil__grid_box02{ width: 100%; display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); gap: clamp(15px, 3vw, 25px); margin-top: 30px;}
.lubricating_oil__grid_box02__inner{border: 2px solid #E5F9F9; }
.lubricating_oil__grid_box02__inner p{padding: 20px; border-top: 2px solid #E5F9F9;}

@media screen and (max-width: 805px){
.lubricating_oil__grid_box02{ width: 100%; display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: clamp(15px, 3vw, 25px); margin-top: 30px;}	
	
}
	
	
@media screen and (max-width: 430px){
.lubricating_oil__grid_box02{ width: 100%; display: flex; justify-content: center;flex-direction: column; gap: clamp(15px, 3vw, 25px); margin-top: 30px;}	
	
}
		
	
		
.lubricating_oil_flex_box03{display: flex;justify-content: space-between; gap:40px;margin: 50px 0;}
.lubricating_oil_flex_box03_l{width: 60%;}
.lubricating_oil_flex_box03_r{width: 40%;}
.lubricating_oil_flex_box03_r img{display: block;margin-top: 60px;}
.lubricating_oil_flex_box03_title{display: flex;justify-content: flex-start;align-items: center;gap:10px;margin-bottom: 17px}	
.lubricating_oil_flex_box03_title img{width: 40px;}
.lubricating_oil_flex_box03_title h4{font-size: 1.3rem;color:var(--blue-color);font-weight:500;}	

@media screen and (max-width:626px){
.lubricating_oil_flex_box03{display: flex;justify-content: space-between; flex-direction: column; gap:40px;margin: 60px 0;}
.lubricating_oil_flex_box03_l{width: 100%;}
.lubricating_oil_flex_box03_r{width: 100%;}	
.lubricating_oil_flex_box03_r img{display: block;margin-top: 10px;}	
.lubricating_oil_flex_box03_title{display: flex;justify-content: flex-start;align-items: center;gap:10px;margin-bottom: 10px}	
	
}	
	

.lubricating_oil_flex_box03_l h3{font-family: var(--font-Mincho-B1); font-weight: 800; font-size: clamp(18px, 4vw, 30px); color: var(--blue-color); padding-bottom: 5px; margin-bottom: 10px;}

.lubricating_oil_flex_box03_l p.bluebox{display: block; background: #F6F9FF; padding: 15px; color:var(--blue-color); margin: 20px 0;border-radius: 12px;font-size: clamp(14px, 3vw, 16px);}	
	
	
.lubricating_oil_flex_box04{display: flex;justify-content: center;align-items: flex-start;gap:45px;position: relative;background: #f5fbff;padding:55px 20px;margin: 50px 0;border-radius: 12px;}
.position_number{position: absolute;top:0; left: 0; background: #00C8C8; padding: 9px 20px; border-radius: 8px 0 8px 0;color: #fff;font-size: 0.7rem;text-align: center;line-height: 1.1;}
.position_number p span{font-size: 1rem; font-weight:600;display: block;line-height: 1.2;}

.lubricating_oil_flex_box04_l{width: 50%; max-width: 326px;}
.lubricating_oil_flex_box04_l h4{font-size: clamp(18px, 3vw, 24px);font-weight: 500;color:var(--blue-color); }
.lubricating_oil_flex_box04_l img{width: 100%; max-width: 170px;display: block; margin: 25px auto;}
.lubricating_oil_flex_box04_l p{text-align: center;color:var(--blue-color); }
.lubricating_oil_flex_box04_r{width: 50%;max-width: 460px;}


.lubricating_oil_tablestyle th{background:var(--blue-color); padding: 5px 15px;display: inline-block;margin-bottom: 10px;color: #fff;font-weight: 400;width: 100%; max-width: 69px;text-align: center;}
.lubricating_oil_tablestyle td{display: block;margin-bottom: 30px;line-height: 1.3;font-size: clamp(14px, 3vw, 16px);}
.lubricating_oil_tablestyle td span{font-weight: 600;}



@media screen and (max-width:700px){
.lubricating_oil_flex_box04{display: flex;justify-content: center;align-items: flex-start;gap:30px;flex-direction: column; position: relative;background: #f5fbff;padding:60px 25px;}
.lubricating_oil_flex_box04_l{width: 100%;max-width: none;}	
.lubricating_oil_flex_box04_r{width: 100%;max-width: none;}	
.lubricating_oil_flex_box04_l h4{font-size: 1.1rem;font-weight: 500;color:var(--blue-color); line-height: 1.8;text-align: center;}	
}	




.lubricating_oil_box02{background:#F6F9FF; padding: 35px;margin: 30px 0;border-radius: 12px;}
.lubricating_oil_box02 h3{font-size: 1.3rem; font-weight: 600;color:var(--blue-color);text-align: center;padding-bottom: 20px;}


.lubricating_oil_box02__inner{background: #fff;border-radius: 12px;padding: 0 0 20px 0;}
.lubricating_oil_box02__inner h4{background:var(--blue-color); color: #fff; font-weight: 600; text-align: center; padding: 8px 20px;border-radius: 12px 12px 0 0 ;}


@media screen and (min-width:1154px){
.lubricating_oil_box02__inner__telBox{display: flex;justify-content: center; align-items: center; gap:50px;margin: 20px 0;}

.lubricating_oil_box02__inner__telBox p{display: flex;justify-content: center; align-items: center;}
.lubricating_oil_box02__inner__telBox p.TEL{font-size:  clamp(1.5rem, 3vw, 1.9rem); font-weight: 600;line-height: 1;}
.lubricating_oil_box02__inner__telBox p.TEL span.tel{display: inline-block;border: 1px solid var(--blue-color); color: var(--blue-color); padding:9px 25px;font-size: 1rem;margin-right: 10px;font-weight: 500;}

.lubricating_oil_box02__inner__telBox p.TEL_uketuke{font-size: 1.1rem;line-height: 1;}
.lubricating_oil_box02__inner__telBox p.TEL_uketuke span.uketuke{display: inline-block;background:  var(--blue-color); color: #fff; padding: 9px 25px;font-size: 1rem;margin-right: 10px;}

.lubricating_oil_box02__inner__mailBox{display: flex;justify-content: center; align-items: center; gap:50px;width: 100%; max-width: 824px;}
.lubricating_oil_box02__inner__mailBox p{display: flex;justify-content: center; align-items: center;}
.lubricating_oil_box02__inner__mailBox p.WEB{font-size: 1.1rem;line-height: 1;}
.lubricating_oil_box02__inner__mailBox p.WEB span.web{display: inline-block;border: 1px solid var(--blue-color); color: var(--blue-color); padding:6px 18px;font-size: 1rem;margin-right: 10px;}
.lubricating_oil_box02__inner__mailBox p.EMAIL{font-size: 1.1rem;line-height: 1;}
.lubricating_oil_box02__inner__mailBox p.EMAIL span.email{display: inline-block;border: 1px solid var(--blue-color); color: var(--blue-color); padding: 6px 18px;font-size: 1rem;margin-right: 10px;}
}

@media screen and (max-width:1153px) and (min-width:475px){
.lubricating_oil_box02__inner__telBox{display: flex;justify-content:flex-start; flex-direction: column;  gap:20px;margin: 20px auto;padding: 0 30px; width: 100%; max-width: 291px;}
	
.lubricating_oil_box02__inner__telBox p{display: flex;justify-content: flex-start; align-items: center;}
.lubricating_oil_box02__inner__telBox p.TEL{font-size:  clamp(1.5rem, 3vw, 1.9rem); font-weight: 600;line-height: 1;}
.lubricating_oil_box02__inner__telBox p.TEL span.tel{display: inline-block;border: 1px solid var(--blue-color); color: var(--blue-color); padding:9px 25px;font-size: 1rem;margin-right: 10px;font-weight: 500;}

.lubricating_oil_box02__inner__telBox p.TEL_uketuke{font-size: 1.1rem;line-height: 1;}
.lubricating_oil_box02__inner__telBox p.TEL_uketuke span.uketuke{display: inline-block;background:  var(--blue-color); color: #fff; padding: 9px 25px;font-size: 1rem;margin-right: 10px;}
.lubricating_oil_box02__inner__mailBox{display: flex;justify-content: flex-start;  flex-direction: column;  gap:20px;padding: 0 30px; width: 100%; max-width: 291px;margin: 0 auto;}

.lubricating_oil_box02__inner__mailBox p{display: flex;justify-content: flex-start; align-items: center;}
.lubricating_oil_box02__inner__mailBox p.WEB{font-size: 1.1rem;line-height: 1;}
.lubricating_oil_box02__inner__mailBox p.WEB span.web{display: inline-block;border: 1px solid var(--blue-color); color: var(--blue-color); padding:6px 18px;font-size: 1rem;margin-right: 10px;}
.lubricating_oil_box02__inner__mailBox p.EMAIL{font-size: 1.1rem;line-height: 1;}
.lubricating_oil_box02__inner__mailBox p.EMAIL span.email{display: inline-block;border: 1px solid var(--blue-color); color: var(--blue-color); padding: 6px 18px;font-size: 1rem;margin-right: 10px;}
	
}

@media screen and (max-width:474px){
.lubricating_oil_box02__inner__telBox{display: flex;justify-content:flex-start; flex-direction: column;  gap:20px;margin: 20px auto;padding: 0 15px; text-align: center;}
	
.lubricating_oil_box02__inner__telBox p{display: flex;justify-content: flex-start; flex-direction: column;gap:10px;}
.lubricating_oil_box02__inner__telBox p.TEL{font-size:  clamp(1.5rem, 3vw, 1.9rem); font-weight: 600;line-height: 1;}
.lubricating_oil_box02__inner__telBox p.TEL span.tel{display: inline-block;border: 1px solid var(--blue-color); color: var(--blue-color); padding:9px 25px;font-size: 1rem;margin-right: 10px;font-weight: 500;}

.lubricating_oil_box02__inner__telBox p.TEL_uketuke{font-size: 1.1rem;line-height: 1;}
.lubricating_oil_box02__inner__telBox p.TEL_uketuke span.uketuke{display: inline-block;background:  var(--blue-color); color: #fff; padding: 9px 25px;font-size: 1rem;margin-right: 10px;}
	
.lubricating_oil_box02__inner__mailBox{display: flex;justify-content: flex-start;  flex-direction: column;  gap:20px;padding: 0 15px;text-align: center;}

.lubricating_oil_box02__inner__mailBox p{display: flex;justify-content: flex-start; flex-direction: column;gap:10px;}
.lubricating_oil_box02__inner__mailBox p.WEB{font-size: 1.1rem;line-height: 1;}
.lubricating_oil_box02__inner__mailBox p.WEB span.web{display: inline-block;border: 1px solid var(--blue-color); color: var(--blue-color); padding:6px 18px;font-size: 1rem;margin-right: 10px;}
.lubricating_oil_box02__inner__mailBox p.EMAIL{font-size: 1.1rem;line-height: 1;}
.lubricating_oil_box02__inner__mailBox p.EMAIL span.email{display: inline-block;border: 1px solid var(--blue-color); color: var(--blue-color); padding: 6px 18px;font-size: 1rem;margin-right: 10px;}
}




.BTN_flexBox{display: flex; justify-content: center;gap:35px;margin: 30px 0 0;}

.BTN_flexBox .c-button-more_big { display: block; text-align: center; align-items: center; padding: 20px 0; border: 2px solid #013396; border-radius: 9999px; background-color: #013396; color: #fff; font-size: clamp(15px, 3vw, 18px); font-weight: 700; letter-spacing: 0.15em; text-decoration: none; transition: all 0.3s ease; position: relative; width: 70%; max-width: 490px;}
.BTN_flexBox .c-button-more_big svg { width: 9px; height: auto; transition: all 0.3s ease; position: absolute; right: 6%; bottom: 22px; }
.BTN_flexBox .c-button-more_big:hover { background-color: #fff; color: #013396; border: 2px solid #013396; }
.BTN_flexBox .c-button-more_big:hover svg { color: #013396; }
.BTN_flexBox .c-button-more_big span { vertical-align: 3px; }


.BTN_flexBox .c-button-more { display: block; text-align: center; align-items: center; padding: 20px 0; border: 2px solid #013396; border-radius: 9999px; background-color: #fff; color: #013396; font-size: clamp(15px, 3vw, 18px); font-weight: 700; letter-spacing: 0.15em; text-decoration: none; transition: all 0.3s ease; position: relative; width: 30%; max-width: 250px;}
.BTN_flexBox .c-button-more svg { width: 9px; height: auto; transition: all 0.3s ease; position: absolute; right: 6%; bottom: 22px; }
.BTN_flexBox .c-button-more:hover { background-color: #013396; color: #fff; }
.BTN_flexBox .c-button-more:hover svg { color: #fff; }
.BTN_flexBox .c-button-more span { vertical-align: 3px; }

@media screen and (max-width:784px){
.BTN_flexBox{display: flex; justify-content: center;flex-direction: column; gap:35px;margin: 30px 0 0;}
	
.BTN_flexBox .c-button-more_big { display: block; text-align: center; align-items: center; padding: 19px 0; border: 2px solid #013396; border-radius: 9999px; background-color: #013396; color: #fff; font-size: clamp(15px, 3vw, 18px); font-weight: 700; letter-spacing: 0.15em; text-decoration: none; transition: all 0.3s ease; position: relative; width: 100%; max-width: 490px;margin: 0 auto;}
	
.BTN_flexBox .c-button-more_big svg { width: 9px; height: auto; transition: all 0.3s ease; position: absolute; right: 6%; bottom: 22px; }	
	
.BTN_flexBox .c-button-more { display: block; text-align: center; align-items: center; padding: 19px 0; border: 2px solid #013396; border-radius: 9999px; background-color: #fff; color: #013396; font-size: clamp(15px, 3vw, 18px); font-weight: 700; letter-spacing: 0.15em; text-decoration: none; transition: all 0.3s ease; position: relative; width: 100%; max-width: 250px;margin: 0 auto;}
	
.BTN_flexBox .c-button-more svg { width: 9px; height: auto; transition: all 0.3s ease; position: absolute; right: 6%; bottom: 22px;	}
	
}