*{
  box-sizing:border-box;
}



body{
  font-size: 14px;
  font-family: "Hiragino Kaku Gothic Pro","Futura";
  font-weight:100;
  line-height:1.5;
  /* margin: 0; */

}

@media(max-width: 4000px){





    /* ロゴ */

    .logo {
    margin:auto;
      /* background-color: Orange; */
      text-align: center;
    }
    .logo img{
      padding: 45px;
    }


    /* 下線エフェクト */


    .index-box{
      text-align: center;
      /* background-color: Orange; */
      width:100%;
      margin: 0;
    }


    ul {
      display: flex;
      list-style: none;

    }
    li {
      padding: 1px;
    }

    /* インデックス */

    .index ul {
      /* background-color: Orange; */
      margin: 0;
      padding: 0;
      text-align: center;
    }

    .index ul li {
      list-style-type: none;
      display: inline-block;
      margin: 10px;
    }


    /* インデックスエフェクト */
    .index-box a {
      display: block;
      padding: 0 0 5px;
      position: relative;
      text-decoration: none;

    }
    .index-box a::before,
    .index-box a::after {
      border-bottom: solid 1px #000;
      bottom: 0;
      content: "";
      display: block;
      position: absolute;
      transition: all .3s ease;
      -webkit-transition: all .3s ease;
      width: 0;
    }
    .index-box a::before {
      left: 50%;
    }
    .index-box a::after {
      right: 50%;
    }
    .index-box a:hover::before,
    .index-box a:hover::after {
      width: 50%;
    }

    a {
      color:black;
    }



  /* デザイン */

body{
  max-width: 1000px;
  margin: auto;
}



.Officebox{
  /* background-color: black; */
  width: 100%;

  text-align: center;
  overflow: hidden;
  margin: auto;
  margin: 0;

}

.Officebox img{
  width: 100%;
  height: 100%;

}

.Officebox1{
  /* background-color: black; */
  width: 100%;
  padding: 50px 0px 20px 0px;
  overflow: auto;
}

.Officebox2{
  /* background-color: red; */
  width: 50%;
  float: left;


}

.Officename {
  /* color: red; */
  font-size: 27px;
  font-family:"Hiragino Kaku Gothic Pro","Futura";
  font-weight:100;
  line-height:1.5;
  margin: 0;
  text-align: left;
  /* display: block;
  background-color: black;
  text-align: justify; */
  padding: 0;
  letter-spacing:0px;
}

.Officetext{
  /* color: red; */
  font-size: 16px;
  font-family:"Hiragino Kaku Gothic Pro","Futura";
  font-weight:100;
  line-height:1.5;
  margin: 0;
  text-align: left;
  /* display: block;
  background-color: black;
  text-align: justify; */
  padding: 0;
  letter-spacing:0px;
  margin-top: 10px;
}

.Officebox3{
  /* background-color: red; */
  width: 50%;
  height: auto;
  float: left;
}


iframe{
  width: 100%;
  /* height: 100%; */
}





}

/* 375px */
@media(max-width: 900px){



  /* ロゴ */

  .logo {
  margin:auto;
    /* background-color: Orange; */
    text-align: center;
  }
  .logo img{
    padding: 45px;
  }


  /* 下線エフェクト */


  .index-box{
    text-align: center;
    /* background-color: Orange; */
    width:100%;
    margin: 0;
  }


  ul {
    display: flex;
    list-style: none;

  }
  li {
    padding: 1px;
  }

  /* インデックス */

  .index ul {
    /* background-color: Orange; */
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .index ul li {
    list-style-type: none;
    display: inline-block;
    margin: 10px;
  }


  /* インデックスエフェクト */
  .index-box a {
    display: block;
    padding: 0 0 5px;
    position: relative;
    text-decoration: none;

  }
  .index-box a::before,
  .index-box a::after {
    border-bottom: solid 1px #000;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0;
  }
  .index-box a::before {
    left: 50%;
  }
  .index-box a::after {
    right: 50%;
  }
  .index-box a:hover::before,
  .index-box a:hover::after {
    width: 50%;
  }

  a {
    color:black;
  }



/* デザイン */

body{
  font-size: 11px;
  font-family: "Hiragino Kaku Gothic Pro","Futura";
  font-weight:100;
  line-height:1.5;
  margin: 0;
  margin: auto;
}

  .Officebox1{
    /* background-color: black; */
    width: 100%;
    padding: 10px 20px 20px 20px;
    overflow: auto;
  }

  .Officebox2{
    /* background-color: red; */
    width: 100%;
    float: left;
    margin-bottom: 10px;
    padding: 10px;


  }


  .Officename {
    /* color: red; */
    font-size: 20px;
    font-family:"Hiragino Kaku Gothic Pro","Futura";
    font-weight:100;
    line-height:1.5;
    margin: 0;
    text-align: left;
    /* display: block;
    background-color: black;
    text-align: justify; */
    padding: 0;
    letter-spacing:0px;
  }


  .Officetext{
    /* color: red; */
    font-size: 13px;
    font-family:"Hiragino Kaku Gothic Pro","Futura";
    font-weight:100;
    line-height:1.5;
    margin: 0;
    text-align: left;
    /* display: block;
    background-color: black;
    text-align: justify; */
    padding: 0;
    letter-spacing:0px;
    margin-top: 10px;
  }

  .Officebox3{
    /* background-color: red; */
    width: 100%;
    height: auto;

    float: left;
    padding: 10px;
  }


  iframe{
    /* width: 100%; */
    /* height: 100%; */
  }





}