/*--------------------------------
industrial-waste-transport
----------------------------------*/

#learn_more{
  width:100%
}

#learn_more .main_wrap{
  width:100%;
  max-width: var(--page-max-width);
  min-width: var(--page-min-width);
  margin: auto;
  padding:var(--section-margin) var(--page-padding) 0;
}
#learn_more .main_wrap img.intro{
  width:50%;
  min-width: 600px;
  height: auto;
  display: block;
  margin:var(--section-margin) auto var(--section-margin8);
}
@media screen and (max-width:1024px) {
  #learn_more .main_wrap img.intro{
    width:100%;
    min-width: 100%;
  }
}
#learn_more .main_wrap h3.sub.industrial{
  width:100%;
  margin-bottom:var(--section-margin8);
  display: flex;
  flex-wrap: wrap;
  align-items:baseline;
  justify-content: center;
}
#learn_more .main_wrap h3.sub.industrial span{
  font-size:var(--font-x);
  color:#000;
  margin-left:var(--section-margin1);
}
#learn_more .main_wrap .truck_wrap{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom:var(--section-margin6);
}
#learn_more .main_wrap .truck_wrap:last-of-type{
  margin-bottom:var(--section-margin);
}
#learn_more .main_wrap img.truck{
  width:80%;
  min-width: 800px;
  height: auto;
  display: block;
  margin:0 auto var(--section-margin4);
}
#learn_more .main_wrap p.truck_intro{
  width:80%;
  min-width: 800px;
  padding:0 var(--page-padding);
  margin:0 auto var(--section-margin6);
  box-sizing: border-box;
}
#learn_more .main_wrap p.finish{
  width:80%;
  margin:0 auto var(--section-margin6); 
}
#learn_more .main_wrap p.finish:last-of-type{
  margin-bottom:0;
}

#learn_more .main_wrap a.btn{
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #FFF;
  padding:30px 40px;
  border:5px solid var(--sub-title-color);
  margin-top: var(--section-margin8);
}

#learn_more .main_wrap a.btn.service02{
  justify-content: center;
}
#learn_more .main_wrap a.btn .btn__icon {
  width: 10%;
}
#learn_more .main_wrap a.btn .btn__text {
  width: 60%;
  text-align: center;
}

#learn_more .main_wrap a.btn img {
  width: 100%;
  height: auto;
}

#learn_more .main_wrap a.btn .btn__text .announcement{
  width: 100%;
  font-size: var(--font-m);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-xs);
  line-height: var(--line-height-s);
  text-align: center;
  margin-bottom: 0;
}
#learn_more .main_wrap a.btn .btn__text .tel{
  width: 100%;
  font-size: var(--font-xxx);
  font-family: var(--font-number);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-xs);
  margin-bottom: 0;
  line-height: var(--line-height-xs);
}
#learn_more .main_wrap a.btn .btn__text .announcement02{
  width: 100%;
  font-size: var(--font-s);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-xs);
  line-height: var(--line-height-s);
  text-align: center;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #learn_more .main_wrap a.btn{
     width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      background-color: #FFF;
      padding: 10px 5px;
      border: 5px solid var(--sub-title-color);
      margin-top: var(--section-margin8);
  }
  #learn_more .main_wrap a.btn .btn__icon {
      width: 10%;
  }
  #learn_more .main_wrap a.btn .btn__text {
      width: 80%;
      text-align: center;
  }
  #learn_more .main_wrap a.btn .btn__text .tel{
      width: 100%;
      font-size: var(--font-xx);
      font-family: var(--font-number);
  }

}

/*--------------------------------
about
----------------------------------*/

#about{
  width:100%
}

#about .main_wrap{
  width:100%;
  max-width: var(--page-max-width);
  min-width: var(--page-min-width);
  margin: auto;
  padding:var(--section-margin) var(--page-padding) 0;
}

#about .main_wrap h3.sub.about_title{
  width:100%;
  margin-bottom:var(--section-margin8);
}
#about .main_wrap .about_text{
  width:80%;
  margin:0 auto var(--section-margin);
}
#about .main_wrap .about_text .about_text_p{
  width:100%;
  margin-bottom:var(--section-margin4);
}
#about .main_wrap .about_text .about_text_p:last-of-type{
  margin-bottom:0;
}
#about .main_wrap .about_text .about_text_p span.red{
  color:var(--sub-title-color);
}
#about .main_wrap .about_text .about_text_h4{
  width:100%;
  font-size:var(--font-l);
  color:var(--sub-title-color);
  margin-bottom:var(--section-margin1);
}
#about .main_wrap .about_text .about_profile{
  width:100%;
  margin-bottom:var(--section-margin4);
}
.company-info {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: var(--section-margin4);
  margin-bottom: var(--section-margin4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.company-info:last-of-type {
  margin-bottom: 0;
}

dl.company {
  display: grid;
  font-size: var(--font-m);
  grid-template-columns: 180px 1fr;
  row-gap: var(--section-margin3);
  column-gap: var(--section-margin4);
  margin: 0;
}

dl.company dt {
  font-weight: 700;
  font-size: var(--font-s);
  color: var(--sub-title-color);
  margin: 0;
  padding: var(--section-margin1) var(--section-margin2);
  background-color: #f8f8f8;
  border-left: 4px solid var(--sub-title-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
}

dl.company dd {
  margin: 0;
  font-weight: 500;
  line-height: var(--line-height-m);
  display: flex;
  align-items: center;
  padding: var(--section-margin1) 0;
}

/* 事業内容セクションのスタイル調整 */
.company-info .about_text_h4 {
  margin-bottom: var(--section-margin2) !important;
  padding-bottom: var(--section-margin1);
  border-bottom: 2px solid var(--sub-title-color);
  display: inline-block;
}

.company-info .about_text_p {
  margin-bottom: var(--section-margin2) !important;
  line-height: var(--line-height-m);
}

/* スタッフ写真の調整 */
.staff_thum {
  margin-top: var(--section-margin3) !important;
}

.staff_thum li img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

/* スマホ表示時は縦並びに切り替え */
@media screen and (max-width: 768px) {
  .company-info {
    padding: var(--section-margin3);
    margin-bottom: var(--section-margin3);
  }

  dl.company {
    display: block;
  }

  dl.company dt {
    margin-top: var(--section-margin2);
    margin-bottom: var(--section-margin1);
    font-size: var(--font-xs);
    padding: 8px var(--section-margin1);
  }

  dl.company dt:first-of-type {
    margin-top: 0;
  }

  dl.company dd {
    margin-left: 0;
    margin-bottom: var(--section-margin2);
    padding: var(--section-margin1) var(--section-margin2);
    background-color: #fafafa;
    border-radius: 4px;
  }

  .staff_thum li {
    width: calc((100% - var(--section-margin3)) / 2) !important;
  }
}

#about .main_wrap .about_text .staff_thum{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  margin-top:var(--section-margin3);
  gap:var(--section-margin3);
}
#about .main_wrap .about_text .staff_thum li{
  width:calc((100% - 2 * var(--section-margin3)) / 3);
}
#about .main_wrap .about_text .history {
  display: grid;
  font-size: var(--font-m);
  grid-template-columns: 140px 1fr;
  column-gap: var(--section-margin4);
  row-gap: var(--section-margin4);
  background-color: #fff;
  padding: var(--section-margin4) 0;
}

#about .main_wrap .about_text .history dt {
  font-weight: 700;
  font-size: var(--font-s);
  color: var(--sub-title-color);
  margin: 0;
  padding: var(--section-margin1) var(--section-margin2);
  background-color: #f8f8f8;
  border-left: 4px solid var(--sub-title-color);
  display: flex;
  align-items: center;
  border-radius: 4px;
}

#about .main_wrap .about_text .history dd {
  margin: 0;
  padding: var(--section-margin1) 0;
  line-height: var(--line-height-m);
  font-weight: 500;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}

#about .main_wrap .about_text .history dd:last-of-type {
  border-bottom: none;
}

/* スマホ用：縦並びに切り替え */
@media screen and (max-width: 768px) {
  #about .main_wrap .about_text .history {
    display: block;
    padding: var(--section-margin2) 0;
  }

  #about .main_wrap .about_text .history dt {
    margin-top: var(--section-margin3);
    margin-bottom: var(--section-margin1);
    font-size: var(--font-xs);
    padding: 8px var(--section-margin1);
  }

  #about .main_wrap .about_text .history dt:first-of-type {
    margin-top: 0;
  }

  #about .main_wrap .about_text .history dd {
    margin-left: 0;
    margin-bottom: var(--section-margin2);
    padding: var(--section-margin1) var(--section-margin2);
    background-color: #fafafa;
    border-radius: 4px;
    border-bottom: none;
  }
}
/*ロゴ */
#about .main_wrap .about_text ul.logo_info{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  margin-top:var(--section-margin3);
  gap:var(--section-margin3);
  justify-content: center;
  align-items: center;
}
#about .main_wrap .about_text .logo_info li{
  width:100px;
}

#carbon{
  width:100%;
  background-color: var(--gray-color);
}
#carbon .main_wrap{
  max-width: var(--page-max-width);
  min-width: var(--page-min-width);
  margin: auto;
  padding:var(--section-margin) var(--page-padding);
  width:100%;
}
#carbon .main_wrap h3.sub.about_title{
  width:100%;
  margin-bottom:var(--section-margin8);
}
#carbon .main_wrap .about_text{
  width:80%;
  margin:auto;
}
#carbon .main_wrap .about_text .about_text_p{
  width:100%;
  margin-bottom:var(--section-margin4);
}
#carbon .main_wrap .about_text .about_text_p:last-of-type{
  margin-bottom:0;
}

/*--------------------------------
Service Page Styles
----------------------------------*/

/* Service Introduction Section */
#service_intro {
  width: 100%;
  padding: var(--section-margin) 0;
}

#service_intro .main_wrap {
  width: 100%;
  max-width: var(--page-max-width);
  min-width: var(--page-min-width);
  margin: auto;
  padding: 0 var(--page-padding);
}

#service_intro .service_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-margin4);
  margin-top: var(--section-margin6);
}

#service_intro .intro {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#service_intro .service_description {
  width: 100%;
  max-width: 900px;
  text-align: center;
}

#service_intro .service_description p {
  font-size: var(--font-l);
  line-height: var(--line-height-l);
  color: var(--basic-color);
  margin: 0;
}

/* Fleet Information Section */
#fleet_info {
  width: 100%;
  padding: var(--section-margin) 0;
}

#fleet_info .main_wrap {
  width: 100%;
  max-width: var(--page-max-width);
  min-width: var(--page-min-width);
  margin: auto;
  padding: 0 var(--page-padding);
}

#fleet_info .fleet_item {
  background-color: white;
  border-radius: 12px;
  padding: var(--section-margin4);
  margin-top: var(--section-margin6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

#fleet_info .fleet_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--section-margin4);
  padding-bottom: var(--section-margin2);
  border-bottom: 2px solid var(--sub-title-color);
}

#fleet_info .fleet_title {
  font-size: var(--font-l);
  font-weight: 700;
  color: var(--sub-title-color);
  margin: 0;
}

#fleet_info .fleet_count {
  background-color: var(--sub-title-color);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--font-s);
  font-weight: 700;
}

#fleet_info .fleet_content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--section-margin4);
  align-items: start;
}

#fleet_info .fleet_image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#fleet_info .fleet_specs h5 {
  font-size: var(--font-m);
  font-weight: 700;
  color: var(--sub-title-color);
  margin: 0 0 var(--section-margin2) 0;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: var(--section-margin1);
}

#fleet_info .fleet_specs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#fleet_info .fleet_specs li {
  padding: var(--section-margin1) 0;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  padding-left: 20px;
}

#fleet_info .fleet_specs li:before {
  content: "▶";
  color: var(--sub-title-color);
  position: absolute;
  left: 0;
  top: var(--section-margin1);
}

#fleet_info .fleet_specs li:last-child {
  border-bottom: none;
}

/* Service Features Section */
#service_features {
  width: 100%;
  padding: var(--section-margin) 0;
  background-color: var(--gray-color);
}

#service_features .main_wrap {
  width: 100%;
  max-width: var(--page-max-width);
  min-width: var(--page-min-width);
  margin: auto;
  padding: 0 var(--page-padding);
}

#service_features .features_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--section-margin4);
  margin-top: var(--section-margin6);
}

#service_features .feature_item {
  background-color: white;
  padding: var(--section-margin4);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#service_features .feature_item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

#service_features .feature_icon {
  width: 60px;
  height: 60px;
  background-color: var(--sub-title-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--section-margin3);
}

#service_features .feature_icon span {
  font-size: var(--font-l);
  font-weight: 700;
  color: white;
}

#service_features .feature_item h4 {
  font-size: var(--font-m);
  font-weight: 700;
  color: var(--sub-title-color);
  margin: 0 0 var(--section-margin2) 0;
}

#service_features .feature_item p {
  font-size: var(--font-s);
  line-height: var(--line-height-m);
  color: var(--basic-color);
  margin: 0;
}

/* Contact Section */
#contact_section {
  width: 100%;
  padding: var(--section-margin) 0;
  background-color: var(--gray-color);
}

#contact_section .main_wrap {
  width: 100%;
  max-width: var(--page-max-width);
  min-width: var(--page-min-width);
  margin: auto;
  padding: 0 var(--page-padding);
}

#contact_section .contact_content {
  text-align: center;
  margin-top: var(--section-margin6);
}

#contact_section .contact_text {
  font-size: var(--font-l);
  line-height: var(--line-height-l);
  color: var(--basic-color);
  margin: 0 0 var(--section-margin4) 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

#contact_section .btn_wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: var(--section-margin4);
}

#contact_section .btn.contact_btn {
  max-width: 600px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFF;
  padding: 30px 40px;
  border: 5px solid var(--sub-title-color);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#contact_section .btn.contact_btn:hover {
  background-color: var(--sub-title-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

#contact_section .btn.contact_btn:hover .btn__text p {
  color: white;
}

#contact_section .btn.contact_btn .btn__icon {
  width: 60px;
  margin-right: var(--section-margin3);
}

#contact_section .btn.contact_btn .btn__text {
  text-align: center;
}

#contact_section .btn.contact_btn .btn__text .announcement {
  font-size: var(--font-m);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-xs);
  line-height: var(--line-height-s);
  margin-bottom: var(--section-margin1);
}

#contact_section .btn.contact_btn .btn__text .tel {
  font-size: var(--font-xxx);
  font-family: var(--font-number);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-xs);
  margin-bottom: var(--section-margin1);
  line-height: var(--line-height-xs);
}

#contact_section .btn.contact_btn .btn__text .announcement02 {
  font-size: var(--font-s);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-xs);
  line-height: var(--line-height-s);
  margin-bottom: 0;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
  #service_intro .intro {
    width: 100%;
    max-width: none;
  }
  
  #fleet_info .fleet_content {
    grid-template-columns: 1fr;
    gap: var(--section-margin3);
  }
  
  #service_features .features_grid {
    grid-template-columns: 1fr;
    gap: var(--section-margin3);
  }
}

@media screen and (max-width: 768px) {
  #service_intro .service_description p {
    font-size: var(--font-m);
  }
  
  #fleet_info .fleet_header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--section-margin2);
  }
  
  #fleet_info .fleet_title {
    font-size: var(--font-m);
  }
  
  #fleet_info .fleet_count {
    align-self: flex-end;
  }
  
  #service_features .feature_item {
    padding: var(--section-margin3);
  }
  
  #contact_section .contact_text {
    font-size: var(--font-m);
  }
  
  #contact_section .btn.contact_btn {
    flex-direction: column;
    padding: var(--section-margin3);
  }
  
  #contact_section .btn.contact_btn .btn__icon {
    margin-right: 0;
    margin-bottom: var(--section-margin2);
  }
  
  #contact_section .btn.contact_btn .btn__text .tel {
    font-size: var(--font-xx);
  }
}

/*--------------------------------
Legacy Styles (for backward compatibility)
----------------------------------*/