body {
  background-color: #006ab7;
  margin: 0;
  padding: 0;
  padding-top: 180px;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

ul li a{
  text-decoration: none;
}

br.pc{
display:block;
}

br.sp{
display:none;
}

img.pc{
display:block;
}

img.sp{
display:none;
}

@media screen and (max-width: 750px){
br.pc{
display:none;
}

br.sp{
display:block;
}

img.pc{
display:none;
}

img.sp{
display:block;
}
}

/* ----------------
   HEADER
---------------- */

header {
  position: fixed;       /* 画面に固定 */
  top: 0;                /* 上端に固定 */
  left: 0;
  width: 100%;           /* 横幅いっぱい */
  z-index: 1000;         /* 他の要素より前に表示 */
  background-color: #006ab7; /* 背景（透過だと下が透ける） */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
}

.img-solpro {
  width: 180px;
  height: auto;
}

.contact-link {
  color: #006ab7;
  background-color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 30px;
  display: inline-block;
  text-align: center;
  width: 160px;
}

/* ----------------
   TOP SECTION
---------------- */
.top {
  text-align: center;
  position: relative;
}

.top-inner {
  display: flex;
  flex-direction: column; /* ←縦並びにする */
  justify-content: center;
  align-items: center;
  gap: 30px; /* 上下の間隔を30px */
  margin-bottom: -55px;
  margin-top: -67px;
}

.topimg{
    margin: 0 0 0 100px;
}

.big-img-solpro {
  width: 35%;
  max-width: 400px;
}

.bg-head {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: 220px;
    z-index: -2;
}

.white-line {
    width: 100%;
    margin-bottom: 30px;
}

.straight-line{
    width: 80%;
    margin-bottom: 60px;
}

/* ----------------
   PROBLEM SECTION
---------------- */

.problem-block {
  width: 1200px;        /* PCは固定幅 */
  margin: 0 auto -60px auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.issue-wrapper{
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  z-index: 2;
}

.img-welding,
.img-anti-rust {
  width: 300px;
  height: auto;
}

.img-welding {
  position: absolute;
  left: 120px;
  top: -70px;
  width: 270px;
}

.img-anti-rust {
  position: absolute;
  right: 140px;
  top: -100px;
}

.issue-title {
  width: 180px;
  margin: 0 auto;
}

.text-bigger {
    position: relative;
    font-size: 28px;
    line-height: 1.3;
    margin: 20px 0;
    font-weight: 900;
    z-index: 1;
}

.issue-text {
  font-size: 18px;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
}

.point-text {
  color: #aee0ff;
  font-weight: 900;
}

/* ----------------
   ADVANTAGE SECTION
---------------- */
.adv-img-solpro{
    width: 500px;
    margin: 0 auto;
}

.section-advantage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
}

.propblem-text{
    font-size: 28px;
    line-height: 1.4;
    max-width: 800px;
    font-weight: 700;
}

.rust-solution-block {
  display: flex;                /* 横並び */
  justify-content: center;      /* 左右中央寄せ */
  align-items: center;      /* 高さ方向上揃え */
  gap: 40px;                    /* 左右の隙間 */
}

.rust-center {
  display: flex;                /* 中央のdivもFlex */
  flex-direction: column;       /* 縦並び */
  align-items: center;          /* 左右中央揃え */
  text-align: center;           /* テキスト中央揃え */
  gap: 20px;                    /* 画像とテキストの隙間 */
}

.img-redrust,
.img-blackrust,
.img-rust-removal {
  width: 200px;
  height: auto;
}

.rustsolution-text {
  font-size: 18px;
  line-height: 1.6;
  max-width: 500px;
}

/* ----------------
   COST REDUCTION SECTION
---------------- */
.section-cost-reduction {
  display: flex;                /* Flexboxで縦並び */
  flex-direction: column;       /* 縦方向に積む */
  align-items: center;          /* 左右中央揃え */
  text-align: center;           /* テキストも中央揃え */
}

.img-cost-reduction {
  width: 200px;                   /* 幅を画面に応じて調整 */
  max-width: 800px;             /* 最大幅 */
  height: auto;                 /* アスペクト比維持 */
}

.img-worktime {
width: 100%;
    max-width: 950px;
    height: auto;
    margin-top: -40px;
    margin-bottom: -30px;
}

.text-anti-rust-tech {
  font-size: 18px;
  line-height: 1.8;
  max-width: 800px;             /* テキストの横幅制限 */
}


/* ----------------
   CONSTRUCTION METHOD
---------------- */

.section-construction-method {
    text-align: center;
    margin-top: -30px;
    margin-bottom: -70px;
}

.text-method {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.construction-text {
    font-size: 16px;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto 30px;
    font-weight: 700;
}

.method {
    position: relative;       /* method-imgをabsoluteで配置 */
    display: flex;
    justify-content: center;  /* ステップブロック全体を画面中央に配置 */
    margin-bottom: 60px;
    width: 100%;
}

.step-number-text {
display: flex;
    align-items: center;
    gap: 20px;
    max-width: 800px;
    position: absolute;
    left: 300px;
    top: -44px;
}

.step-number-text2 {
display: flex;
    align-items: center;
    gap: 20px;
    max-width: 800px;
    position: absolute;
    left: 300px;
    top: -62px;
}

.number {
    width: 40px;
    height: auto;
    flex-shrink: 0;
}

.step-text {
font-size: 24px;
    color: #fff;
    line-height: 1.4;
    text-align: left;
    font-weight: 700;
}

.smaller-step{
    font-size: 18px;
    font-weight: 500;
}

.method-img1 {
    position: absolute;
    top: -100px;
    right: 180px;
    height: auto;
    z-index: 1;
    width: 200px;
}

.method-img2 {
position: absolute;
    top: -80px;
    right: 300px;
    height: auto;
    z-index: 1;
    width: 150px;
}

.method-img3 {
    position: absolute;
    top: -80px;
    left: 100px;
    height: auto;
    z-index: 1;
    width: 180px;
}

.method-img4 {
    position: absolute;
    top: -155px;
    right: 40px;
    height: auto;
    z-index: 1;
    width: 300px;
}

.lightblue{
    color: #aee0ff;
}

/* ----------------
   FEATURES / CASES
---------------- */
.section-features,
.section-case-studies {
  text-align: center;
}

.text-feature,
.case-text {
margin: 0 auto;
    text-align: center;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.product-feature-img{
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin-left: 20px;
  margin-bottom: -30px;
}

.before-during-after,
.before-during-after2 {
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin-left: 20px;
  margin-bottom:30px;
}

/* ----------------
   FOOTER
---------------- */
footer{
    position: relative;
}

.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 80px;
    padding: 20px 15px;
    bottom: 40px;
}

/*
.bg-footer {
 position: absolute;
    top: 0;
    width: 100%;
    z-index: -2;
}*/

.bg-footer {
  position: absolute;   /* 背景として配置 */
  bottom: 0;            /* フッター下端を基準に */
  width: 100%;          /* 横幅いっぱい */
  height: 250px;        /* 下側を削る → 高さを調整して見た目を整える */
  overflow: hidden;     /* はみ出た部分を非表示に */
  z-index: -2;          /* コンテンツより後ろに */
}

.bg-footer img {
  width: 100%;
  height: auto;          /* 比率維持 */
  object-fit: cover;     /* トリミングしてフィット */
  object-position: top;  /* 上を基準 → 下側が削れる */
}

ul{
    display: flex;
    gap: 40px;
    list-style: none;
}

.smaller{
    color: white;
    font-size: 16px;
    font-weight: 500;
}

ul li a.smaller {
  color: #fff;                     
  text-decoration: none;            
  font-size: 16px;
  font-weight: 500;
  position: relative;
  cursor: pointer;
  transition: color 0.3s ease;     
}

ul li a.smaller::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;           
}

ul li a.smaller:hover {
  color: #aee0ff;                   
}

ul li a.smaller:hover::after {
  background-color: #aee0ff; 
}

.footer-logo {
  width: 250px;
  height: auto;
}


/* =========================================
   📱 スマホ（～750px）
========================================= */
@media screen and (max-width: 750px) {

  body {
    padding-top: 100px;
  }

.wrapper {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 20px;
}

  .header {
    padding: 15px 10px;
  }

  .img-solpro {
    width: 130px;
  }

  .contact-link {
    font-size: 14px;
    width: 90px;
  }

  .top-inner {
    gap: 0px;
    margin-bottom: 8px;
  }

  .topimg {
    width: 90%;
    margin: 0;
    margin-top: 50px;
  }

  .big-img-solpro {
    width: 70%;
  }

  .bg-head {
    top: 180px;
  }

.white-line {
    margin-top: 2px;
}

.straight-line{
  width: 100%;
  margin-bottom: 30px;
}

  .text-bigger {
    font-size: 20px;
  }

  .issue-text {
    font-size: 16px;
    line-height: 1.6;
  }

  .problem-block {
    width: 100%;        /* スマホは可変 */
    flex-direction: column;
    margin-bottom: 2px;
  }

.issue-wrapper{
  margin: 10px 0 15px 0;
}

  .img-welding,
  .img-anti-rust {
    position: static;
    margin-bottom: 0px;
  }

  .img-welding {
    margin-top: -30px;
    width: 300px;
  }

  .adv-img-solpro {
    width: 80%;
    margin-bottom: -15px;
  }

  .propblem-text {
    font-size: 16px;
    line-height: 1.6;
  }

  .rust-solution-block {
    flex-direction: column;
    gap: 20px;
  }

.rust-center{
  width: 350px;
}

  .img-rust-removal,
  .img-cost-reduction  {
    width: 150px;
  }

.img-redandblackrust{
  width: 90%;
}

  .rustsolution-text {
    font-size: 16px;
    max-width: 90%;
    margin-bottom: 30px;
  }

  .section-cost-reduction {
    gap: 20px;
  }

  .img-worktime {
    width: 95%;
  }

  .text-method,
  .case-text {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .text-feature{
    font-size: 28px;
    margin-bottom: 20px;
  }

  .construction-text {
    font-size: 16px;
    max-width: 90%;
  }

  .method {
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .step-number-text,
  .step-number-text2 {
    position: static;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

.step-text {
font-size: 21px;
    color: #fff;
    line-height: 1.4;
    text-align: center;
    font-weight: 700;
}

  .method-img1,
  .method-img2,
  .method-img3,
  .method-img4 {
    position: static;
    width: 60%;
    margin-top: 20px;
  }

  .product-feature-img,
  .before-during-after,
  .before-during-after2 {
    width: 95%;
    margin: 0 auto 20px;
  }

  .footer {
    bottom: 0px;
    gap: 20px;
    padding: 40px 10px 10px 10px;
    margin-top: 0px;
  }

  .smaller{
    font-size: 12px;
  }

  ul li a.smaller {
  font-size: 12px;
}


  .footer-logo {
    width: 120px;
  }

  ul {
    flex-direction: column;
    gap: 10px;
  }

  .bg-footer {
    height: 150px;
    bottom: 0;
  }
}