body, h1, h2, h3,h4, p, ul, li, form, label, input, textarea {
    margin: 0;
    padding: 0;
    font-family: "source-han-sans-japanese", sans-serif;
    font-style: normal;
  }

  body{
    background-color: ECECE7;
  }
                                                /*ヘッダー*/
  @media screen and (min-width:767px) {
    .header_pc{
        max-width: 85vw;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header_pc img{
        width: 70px;
        height: 70px;
        margin-top: 20px;
    }
    .header_pc ul{
        list-style: none;
        display: flex;
        margin-top: 20px;
        margin-right: 20px;
    }
    .header_pc ul li a{
        margin-left: 30px;
        color: #C09933;
        text-decoration: none;
        font-weight: bold;
    }
    .header_sp{
        display: none;
    }
  }
                                            /*ヘッダースマホ*/
  @media screen and (max-width:766px) {
    *,
    *::before,
    *::after {
    box-sizing: border-box;
    }
    .header_pc{
        display: none;
    }
    header{
        width: 100%;
        margin: auto;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        
    }
    .header_sp{
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: inherit;
        position: relative; 
    }
    .header_sp img{
        width: 9.11vw;
        height: 9.11vw;
        margin-top: 3.26vw;
    }
    .header_sp_humburger {
        width: 24px;
        margin-top: 3.26vw;
        margin-right: 3.26vw;
      }
      
      .hamburger {
        background-color: transparent;
        border-color: transparent;
        z-index: 9999;
        cursor: pointer;
      }
      
      .hamburger span {
        width: 24px;
        height: 2px;
        background-color: #C09933;
        position: relative;
        transition: ease .4s;
        display: block;
      }
      
      .hamburger span:nth-child(1) {
        top: 0;
      }
      
      .hamburger span:nth-child(2) {
        margin: 8px 0;
      }
      
      
      .hamburger span:nth-child(3) {
        top: 0;
      }

      .header_sp_nav {
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: black;
        transition: ease .4s;
        z-index: 999;
        transform: translateX(100%);
      }
      .header_sp_nav.active {
        transform: translateX(0);
      }
      
      .header_sp_nav_item {
        max-width: 73.96vw;
        margin-top: 14.32vw;
        margin-right: auto;
        margin-left: auto;
        text-align: right;
      }

      .header_sp_nav_items {
        list-style: none;
        border-bottom: 1px solid white;
        margin-bottom: 3.26vw;
        padding-bottom: 3.26vw;
      }
      
      .header_sp_nav_items a {
        color: #FFFFFF;
        display: inline-block;
        text-align: center;
        margin-bottom: 24px;
        font-weight: bold;
        font-size: 2.6vw;
        text-decoration: none;
      }
      
      .header_sp_nav_item:last-child a {
        margin-bottom: 0;
      }
      
      .hamburger.active span:nth-child(1) {
        top: 5px;
        transform: rotate(45deg);
      }
      
      
      .hamburger.active span:nth-child(2) {
        opacity: 0;
      }
      
      
      .hamburger.active span:nth-child(3) {
        top: -15px;
        transform: rotate(-45deg);
      }
  }

                                                 /*メイン*/
                                                /*KV*/
@media screen and (min-width:767px) {
    .kv{

    }
    .kv_title{
        font-size: 36px;
        margin-top: 100px;
        text-align: center;
        color: #ACA99E;
    }
    .kv_name{
        font-size: 70px;
        margin-top: 20px;
        text-align: center;
        color:#502200 ;
    }
}
                                                /*KVsp*/
@media screen and (max-width:766px) {
    .kv{
        width: 85%;
        margin-top: 100px;
        margin-left: auto;
        margin-right: auto;
        text-align: center; /* 追加 */
    }
    .kv_title{
        font-size: 2.60vw;
        margin-top: 13.02vw;
        color: #ACA99E;
    }
    .kv_name{
        margin-top: 3.9vw;
        font-size: 7.16vw;
        color:#502200 ;
    }
}

                                                /*service*/
@media screen and (min-width:767px) {
    .service{
        max-width: 1100px;
        margin: auto;
        margin-top: 200px;
    }
    .service_title{
        font-size: 40px;
        font-weight: bold;
        text-align: center;
    }
    .service_contents{
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }
    .service_contents_box{
        background-color: white;
        width: 350px;
        height: 440px;
        border-radius: 10px;
    }
    .service_contents_box:nth-child(2){
        margin-left: 25px;
        margin-right: 25px;
    }
    .service_contents_box_title{
        font-size: 32px;
        font-weight: bold;
        margin-top: 30px;
        text-align: center;
    }
    .service_contents_box_subtitle{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        color: #ACA99E;
    }
    .service_contents_box:nth-child(1) .service_contents_box_img {
        width: 150px;
        height: 123px;
    }
    .service_contents_box:nth-child(2) .service_contents_box_img {
        width: 166px;
        height: 123px;
    }
    .service_contents_box:nth-child(3) .service_contents_box_img {
        width: 107px;
        height: 123px; 
    }
    
    .service_contents_box_img{
        display: block;
        margin: 0 auto;
        margin-top: 10px;
    }
    
    .service_contents_box_text{
        font-size: 14px;
        width: 270px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
}

                                            /*serviceSP*/
 @media screen and (max-width:766px) {
    .service{ 
       max-width: 100%;
       margin: 0 auto;
    }
    .service_title{
        font-size: 6.51vw;
        font-weight: bold;
        margin-top: 19.53vw;
        text-align: center;
    }
    .service_contents{
        display: flex; /* フレックスボックスを使用 */
        flex-direction: column; /* 縦方向に配置 */
        align-items: center; /* 中央揃え */
        margin-top: 6.15vw;
        margin-left: auto;
        margin-right: auto;
    }
    .service_contents_box{
        width: 65.1vw; 
        height: 71.61vw;
        background-color: white;
        border-radius: 10px;
        margin-bottom: 6.51vw;
    }
    .service_contents_box_title{
        font-size: 5.2vw;
        font-weight: bold;
        text-align: center;
        padding-top: 3.9vw;
    }
    .service_contents_box_subtitle{
        font-size: 3.12vw;
        text-align: center;
        padding-top: 1.96vw;
        color: #ACA99E;
    }
    .service_contents_box:nth-child(1) .service_contents_box_img {
        width: 32.56vw;
        height: 23.44vw;
    }
    .service_contents_box:nth-child(2) .service_contents_box_img {
        width: 32.55vw;
        height: 24.09vw;
    }
    .service_contents_box:nth-child(3) .service_contents_box_img {
        width: 19.53vw;
        height: 22.4vw; 
    }
    .service_contents_box_img{
        display: block;
        margin: 0 auto;
        padding-top: 2.6vw;
    }
    .service_contents_box_text{
        font-size: 2.34vw;
        width: 48.18vw;
        padding-top: 2.6vw;
        margin-left: auto;
        margin-right: auto;
    }
 }

                                            /*ワークス*/
@media screen and (min-width: 767px) {
        .works {
            max-width: 1100px;
            margin: 0 auto;
        }
        .works_title {
            margin-top: 150px;
            font-size: 40px;
            font-weight: bold;
            text-align: center;
        }
        .works_button {
            display: none;
        }
        .works_contents {
            max-width: 1100px;
            display: grid;
            grid-template-columns: repeat(3, 250px);
            gap: 50px;
            justify-content: space-between;
            margin-top: 50px;
          }
          .works_contents_box_thum {
            width: 250px; /* 画像をボックスの幅いっぱいに */
            height: auto; /* 画像の高さを自動調整 */
            border-radius: 15px;
            box-shadow: 0px 3px 5px 0 rgb(0, 0, 0, 0.25) ;
          }
          
          .works_contents_box_title {
            font-size: 15px; /* タイトルのフォントサイズ */
            font-weight: bold;
            margin-top: 15px; /* タイトルの上の余白 */
            color: #C09933;
          }
          .works_contents_box_tools {
            font-size: 12px; /* タイトルのフォントサイズ */
            font-weight: bold;
            margin-top: 10px; /* タイトルの上の余白 */
            color: #C09933;
          }

          .works_contents_box_icons{
            display: flex;
            margin-top: 10px;
          }

          .works_contents_box_icons_each{
            width: 30px;
            height: auto;
          }

          .works_contents_box_icons_each:not(:first-child){
            margin-left: 10px;
          }

          .works_contents_box_button{
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            max-width: 250px;
            margin-top: 10px;
          }
          .works_contents_box_item {
            width: 100px;
            background-color: #C09933;
            font-size: 14px; /* アイテムのフォントサイズ */
            color: white; /* アイテムのフォントカラー */
            margin-right: 10px;
            border-radius: 10px;
          }
          .works_contents_box_item:nth-child(n+3) {
            margin-top: 10px;
          }
    }
                                         /*ワークスsp*/
@media screen and (max-width:766px) {
    .works{
        max-width: 100%;
        margin: 0 auto;
    }
    .works_title {
        margin-top: 19.53vw;
        font-size: 6.51vw;
        font-weight: bold;
        text-align: center;
    }
    .works_button {
        display: none;
    }
    .works_contents {
        max-width: 65.1vw;
        display: flex; /* フレックスボックスを使用 */
        flex-direction: column; /* 縦方向に配置 */
        align-items: center; /* 中央揃え */
        margin-top: 6.15vw;
        margin-left: auto;
        margin-right: auto;
      }
    .works_contents_box:nth-child(n+2){
        margin-top: 13.02vw;
    }
    .works_contents_box_thum {
        width: 100%; /* 画像をボックスの幅いっぱいに */
        height: auto; /* 画像の高さを自動調整 */
        margin: 0 auto;
        border-radius: 15px;
        box-shadow: 0px 3px 5px 0 rgb(0, 0, 0, 0.25) ;
      }
    .works_contents_box_title {
        font-size: 4.17vw; /* タイトルのフォントサイズ */
        font-weight: bold;
        margin-top: 2.6vw; /* タイトルの上の余白 */
        color: #C09933;
      }
    .works_contents_box_tools{
        font-size: 4.17vw; /* タイトルのフォントサイズ */
        font-weight: bold;
        margin-top: 2.6vw; /* タイトルの上の余白 */
        color: #C09933;
    }
    .works_contents_box_icons img{
        width: 6.51vw;
    }
    .works_contents_box_button{
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        margin-top: 2.6vw;
      }
      .works_contents_box_item:nth-child(n+4) {
        margin-top: 10px;
      }
      .works_contents_box_item {
        width: 19.53vw;
        height: 5.21vw;
        background-color: #C09933;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.6vw; /* アイテムのフォントサイズ */
        color: white; /* アイテムのフォントカラー */
        margin-right: 1.3vw;
        border-radius: 5px;
      }

}      
                                            /*スキル*/
@media screen and (min-width: 767px) {
    .skills {
        max-width: 650px;
        margin: 0 auto;
      }
      
      .skills_title {
        font-size: 40px;
        margin-top: 150px;
        font-weight: bold;
        text-align: center; /* タイトルを中央揃えに */
      }
      
      .skills_subtitle {
        text-align: center; /* サブタイトルを中央揃えに */
        margin-top: 25px;
        font-size: 22px; /* フォントサイズ */
      }
      
      .skills_skillset {
        max-width: 84.64vw;
        display: flex; /* 横並びに */
        justify-content: center; /* 中央揃えに */
        flex-wrap: wrap; /* 折り返しを許可 */
        gap: 20px; /* アイテム間の間隔を設定 */
        margin-top: 50px;
      }
      
      .skills_skillset_icon {
        width: 125px; /* アイコンボックスの幅 */
        text-align: center; /* アイコンとテキストを中央揃えに */
        margin-bottom: 20px; /* アイコンボックスの下の余白 */
      }
      
      .skills_skillset_icon img {
        width: 100px; /* アイコンの幅 */
        height: auto; /* アイコンの高さを自動調整 */
        margin-bottom: 10px; /* アイコンとテキストの間の余白 */
      }
      
      .skills_skillset_icon p {
        font-size: 14px; /* テキストのフォントサイズ */
        font-weight: bold;
      }
}
                                                /*スキルsp*/
@media screen and (max-width:766px) {
    .skills{
        max-width: 84.64vw;
        margin: 0 auto;
    }
    .skills_title {
        margin-top: 19.53vw;
        font-size: 6.51vw;
        font-weight: bold;
        text-align: center;
    }
    .skills_subtitle {
        text-align: center; /* サブタイトルを中央揃えに */
        margin-top: 3.26vw;
        font-size: 3.13vw; /* フォントサイズ */
    }
    .skills_skillset {
        display: flex; /* 横並びに */
        justify-content: center; /* 中央揃えに */
        align-items: center; /* 垂直方向の中央揃え */
        flex-wrap: wrap; /* 折り返しを許可 */
        gap: 6.51vw; /* アイテム間の間隔を設定 */
        margin-top: 6.51vw;
        text-align: center; /* テキストを中央揃えに */
    }
    .skills_skillset_icon {
        width: 16.28vw; /* アイコンボックスの幅 */
        text-align: center; /* アイコンとテキストを中央揃えに */
        margin-bottom: 3.26vw; /* アイコンボックスの下の余白 */
      }
      
      .skills_skillset_icon img {
        width: 16.28vw; /* アイコンの幅 */
        height: auto; /* アイコンの高さを自動調整 */
        margin-bottom: 1.3vw; /* アイコンとテキストの間の余白 */
      }
      
      .skills_skillset_icon p {
        font-size: 3.13vw; /* テキストのフォントサイズ */
        font-weight: bold;
      }
}

                                        /*footer*/
@media screen and (min-width:767px) {
    footer{
        width: 100vw;
        background-color: black;
        margin-top: 100px;
        height: 100px;
    }
    .footer_contents{
        max-width: 85vw;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .footer_left{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    footer img{
        width: 70px;
        height: 70px;
        margin-top: 20px;
    }
    footer ul{
        list-style: none;
        display: flex;
        margin-top: 20px;
        margin-right: 20px;
    }
    footer ul li a{
        margin-left: 30px;
        color: white;
        text-decoration: none;
        font-weight: bold;
    }
    .footer_right{
        color: white;
    }
    .footer_right p{
        font-size: 10px;
    }
  }
                                            /*footer_sp*/
@media screen and (max-width:766px) {
    footer{
        max-width: 766px;
        background-color: black;
        margin-top: 13.02vw;
        height: 50px;
    }
    .footer_left{
        display: none;
    }
    .footer_right{
        width: 100%;
        margin: 0 auto;
        color: white;
        text-align: center;
    }
    .footer_right p{
        font-size: 10px;
        line-height: 50px;
    }
  }