@charset "UTF-8";
html{
  scroll-behavior: smooth;
}
body{
  min-width: 980px;
}

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  line-height: 1.75em;
}

a{
  color: inherit;
  text-decoration: underline;
    &:hover{
    color:#007aaa;
  }
}

#header{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.5em 2em 1em 2em;
  position: sticky;
  top:0;
  background-color: #fff;
  z-index: 10;


    a{
      text-decoration: none;
    }

    img{
      width: 50%;
      min-width:200px ;
    }

    li{
      list-style: none;
      display: inline-block;

        a{
        font-weight: 500;
        font-family: "Gill Sans",sans-serif;
        letter-spacing: 0.1em;
        display: block;
        padding:0.5em;
          }
    }

    li:hover::after{
      content: "";
      position: absolute;
      bottom: -17px;
      height: 0px;
      width: 0;
      border: 15px solid;
      border-color: transparent;
      transform: rotate(135deg);
      border-left: 15px solid #00a0e2;
    }


    li:nth-child(1):hover::after{
      right: 21.5em;
    }

    li:nth-child(2):hover::after{
      right: 16em;
    }

    li:nth-child(3):hover::after{
      right: 11em;
    }

    li:nth-child(4):hover::after{
      right: 4.5em;
    }


}

.contents-wrap{
  background-color: #00a0e2;
  padding:3em 2em 2em;

  .contents{
  max-width: 1000px;
  margin: 0 auto;
  }

    .fl-wrap{
      display: flex;
      align-items: center;

      img{
        width: 100%;
        max-width: 180px;
      }

      h2{
        font-size: 1.3em;;
      }
    }

    .fl-rev{
      flex-direction: row-reverse;
    }

    .fl-img{
      display: flex;
      flex-direction: column;
    }

    }

    #ABOUT{
      scroll-margin-top: 150px;
    }

    #SERVICE{
      .fl-wrap{
        align-items: flex-start;
        .fl-item1{
          flex: 1;
          position: static;
          margin-top: 3em;

          .se-img01{
            position: relative;
            top:0.5em;
            left: 60%;
            z-index: 1;
          }

          .se-img02{
            position: relative;
            left: 27%;
            top: -0.75em;
          }
        }

        .fl-item2{
          width: 53%;
          position: static;
          height: auto;

          .bc-b-r,.bc-b-l{
            width: 80%;
            font-size: 1.25em;
            position: relative;
            margin:1.5em 1em 0 1em;
            padding: 1.125em 2em;
            text-align: center;
          }

          .bc-b-r{
            right: -14%;
          }

          .bc-b-l{
            right: -3%;
          }

          dd{
            width: 80%;
            position: relative;
            left: 10%;
            margin:0em 1em;
            top:-1em
          }

          img{
            position: relative;
            top: 2.2em;
            left:-13%;
          }

          }
        }


      }



    #WORKS{
      .fl-wrap{
        align-items: flex-start;
        gap: 2em;

        .fl-item1{
          flex: 1;
          position: static;
          margin-top: 3em;;

          .bc-w-r{
          margin-right: 0;
          }

          ul{
            margin-left: 1.5em;
            li{
              margin-top: 0.8em;
            }
          }

          .wo-img01{
            position: relative;
            right: -62%;
            top: 2em;
          }

          .wo-img02{
            position: relative;
            right: -9%;
          }

          .wo-img03{
            position: relative;
            right: -55%;
          }

          .wo-img04{
            position: relative;
            right: -17%;
            margin-top: 2em;;
          }

        }
        .fl-item2{
          width: 52%;
        }
      }
    }


    #COMPANY{
        max-width:800px ;
        margin: 2em auto 0;

      .fl-wrap{
        margin: 2em;
        align-items: flex-start;

        dt{
          width: 30%;
          font-weight: 600;

        }
        dd{
          flex: 1;
        }
      }
    }



    .bc-w-l,.bc-w-r{
      color: #00a0e2;
      background-color: #fff;
      margin:2em ;
      padding: 2em;
      position: relative;
    }

    .bc-w-l_c{
      max-width: 700px;
      margin: 2em auto;
    }

    .bc-w-l::after,.bc-w-r::after{
      content: "";
      position: absolute;
      bottom: -15px;
      height: 0px;
      width: 0;
      border: 15px solid;
      border-color: transparent ;
    }

    .bc-w-r::after{
      border-right: 15px solid #fff;
      right:-15px;
      transform: rotate(135deg);
    }

    .bc-w-l::after{
      border-left: 15px solid #fff;
      left: -15px;
      transform: rotate(225deg);
    }


    .bc-b,.bc-b-l,.bc-b-r{
      color: #fff;
      border: #fff 3px solid;
      border-radius:8px;
      margin:  2em ;
      padding: 2em;
    }


    .bc-b-c{
      color: #fff;
      border: #fff 3px solid;
      border-radius:8px;
      margin:  3em 2em ;
      padding: 1em 2em;
      position: relative;

        &:first-child{
          margin-top: 4em;
        }

        &::after{
          content: "";
          position: absolute;
          bottom: -25px;
          right: 50%;
          height: 0px;
          width: 0;
          border: 10px solid;
          border-color: transparent ;
          border-top: 14px solid #fff;
          }

      .number{
        position: absolute;
        text-align: center;
        background-color: #fff;
        color: #00a0e2;
        font-size: 1.25em;
        font-weight: 600;
        height: 1.85em;
        width: 1.85em;
        left: -1em;
        top:-1em;
        padding: 0.1em;
        border-radius: 1em;
      }
    }


    .block{
      margin-top: 8em;
      scroll-margin-top:140px ;
    }

    .txt{
      margin-top: 1.5em;
    }
    .txt-bd{
      font-weight: 600;
    }
    .txt-sl{
      font-size:  1.125em;
      margin-bottom: 0.5em;
      line-height: 1.35em;
    }
    .txt-ss{
      font-size:  0.7em;
    }

    .txt-r{
      text-align: right;
    }