@charset "UTF-8";
.p_kv {
 text-shadow: 2px 2px 4px rgb(0 0 0 / 70%);
 background-color: rgba(0, 0, 0, 0.7);
 color: #fff;
 background-image: url("../../../images/page/oil/oil_bg.png?20241");
}
.p_oil p {
 line-height: 1.6em;
 font-size: 15px;
}

.p_oil .oil .desc {
 margin-top: -6px;
 color: #fff;
 padding-bottom: 50px;
}
@media screen and (min-width: 1024px) {
 .p_oil .oil .desc {
  margin-top: -8px;
 }
}
.p_oil .oil .desc p {
 text-align: center;
}
.p_kv .h400 {
 height: 200px;
}
@media screen and (min-width: 768px) {
 .p_kv .h400 {
  height: 400px;
 }
}

.p_oil .section_comment {
 color: #fff;
}
.p_oil .section_desc {
 line-height: 1.6em;
 padding-top: 55px;
}

.p_oil .section_title {
 font-size: 23px;
 font-weight: bold;
 padding-bottom: 30px;
}
@media screen and (min-width: 768px) {
 .p_oil .section_title {
  font-size: 25px;
  font-weight: bold;
  padding-bottom: 38px;
 }
}

.p_oil .section_comment02 {
 color: #fff;
 padding-top: 100px;
}
@media screen and (min-width: 768px) {
 .p_oil .section_comment02 {
  color: #fff;
  padding-top: 200px;
 }
}

.p_oil .section_title02 {
 font-size: 23px;
 font-weight: bold;
 padding-bottom: 30px;
}
@media screen and (min-width: 768px) {
 .p_oil .section_title02 {
  font-size: 25px;
  font-weight: bold;

  padding-bottom: 38px;
 }
}

.p_oil .section_comment03 {
 color: #000;
 padding-top: 50px;
}
@media screen and (min-width: 768px) {
 .p_oil .section_comment03 {
  color: #000;
  padding-top: 100px;
 }
}

.p_oil .section_title03 {
 font-size: 23px;
 font-weight: bold;
 padding-bottom: 30px;
}
@media screen and (min-width: 768px) {
 .p_oil .section_title03 {
  font-size: 25px;
  font-weight: bold;

  padding-bottom: 38px;
 }
}

.p_oil .section_main_title {
 font-size: 20px;
 line-height: 1.1.6em;
 padding-bottom: 30px;
}
@media screen and (min-width: 768px) {
 .p_oil .section_main_title {
  font-size: 35px;
  padding-bottom: 30px;
 }
}
.p_oil .section_sub_title {
 font-size: 18px;
}
@media screen and (min-width: 768px) {
 .p_oil .section_sub_title {
  font-size: 25px;
 }
}
.p_oil .oil_contents:first-child {
 padding-bottom: 0px;
}

.p_oil .oil_contents {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 padding-top: 50px;
 padding-bottom: 50px;
 gap: 30px;
}
@media screen and (min-width: 768px) {
 .p_oil .oil_contents {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding-top: 70px;
  padding-bottom: 70px;
  gap: 30px;
 }
}

.p_oil .oil_comment {
 display: flex;
 flex-direction: column;
 line-height: 1.6em;
 width: 100%;
 gap: 25px;
 font-size: 15px;
}
@media screen and (min-width: 768px) {
 .p_oil .oil_comment {
  display: flex;
  flex-direction: column;
  line-height: 1.6em;
  width: 50%;
  gap: 25px;
  font-size: 15px;
 }
}

.p_oil .oil_img {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 gap: 30px;
}
@media screen and (min-width: 768px) {
 .p_oil .oil_img {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  gap: 30px;
 }
}

.p_oil .oil_contents02 {
 display: flex;
 padding-top: 70px;
 padding-bottom: 70px;
 gap: 50px;
 line-height: 1.6em;
 font-size: 15px;
 flex-direction: column;
 align-items: flex-start;
}
@media screen and (min-width: 768px) {
 .p_oil .oil_contents02 {
  display: flex;
  padding-top: 70px;
  padding-bottom: 100px;
  gap: 70px;
  line-height: 1.6em;
  font-size: 18px;
  flex-direction: column;
  align-items: flex-start;
 }
}

.p_oil .oil_comment02 {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 20px;
}

.p_oil .oil_comment02 .oil_sub_comment {
 padding-left: 10px;
}
@media screen and (min-width: 768px) {
 .p_oil .oil_comment02 .oil_sub_comment {
  padding-left: 20px;
 }
}

.p_oil .oil_grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
 margin-top: 30px;
 justify-items: start;
 padding-bottom: 50px;
 align-items: end;
}
@media screen and (min-width: 768px) {
 .p_oil .oil_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 30px;
  justify-items: start;
  padding-bottom: 70px;
 }
}

.p_oil .oil_grid img {
 width: 100%; /* 画像サイズを親要素に合わせる */
 max-width: 250px; /* 最大幅を指定 */
 height: auto; /* 縦横比を維持 */
}

.p_oil .product_grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr); /* 横4列 */
 gap: 20px; /* アイテム間の余白 */
 margin-top: 50px;
 text-align: center;
 padding-bottom: 50px;
}
@media screen and (min-width: 768px) {
 .p_oil .product_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 横4列 */
  gap: 30px; /* アイテム間の余白 */
  margin-top: 50px;
  text-align: center;
  padding-bottom: 70px;
 }
}

.p_oil .product_item {
 background-color: #2c6b40; /* 背景色 */
 text-align: center;
 color: #ffffff; /* 文字色 */
 padding: 25px 5px; /* 内側の余白 */
 border-radius: 8px; /* 角丸 */
 font-size: 15px;
 font-weight: bold;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 軽い影 */
}
@media screen and (min-width: 768px) {
 .p_oil .product_item {
  background-color: #2c6b40; /* 背景色 */
  text-align: center;
  color: #ffffff; /* 文字色 */
  padding: 25px; /* 内側の余白 */
  border-radius: 8px; /* 角丸 */
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 軽い影 */
 }
}
/* ロールオーバー：画像を少し拡大＋フェード */
.p_oil .oil_grid a img {
 transition: transform 0.3s ease, opacity 0.3s ease;
}

.p_oil .oil_grid a:hover img {
 transform: scale(1.05); /* 少し拡大 */
 opacity: 0.85; /* 少し薄く */
}