@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500&display=swap);


body{
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-family: 'Noto Sans Japanese', serif;
}

#font{
  font-family: 'Noto Serif JP', serif;
}

html{
  padding: 0;
  margin: 0;
}

#main-wrapper{
  width: 90%;
  height: 309px;
}

#menu-bg, #menu-menu, #menu-re, .el_humburger_wrapper {
  position: fixed!important;
}

/* 非表示 */
#pc-menu{
  display: none;
}

#workers-pc{
  display: none;
}

#pc-menu-footer{
  display: none;
}

.br-pc{
  display: none;
}


/* サイドバー */
#side-bar{
  display: flex;
  flex-direction: column;
  width: 10%;
  align-items: center;
  position: fixed;
  bottom: 0px;
  right: 5px;
}

.side-bar-icon img{
align-items: center;
width: 20px;
}

#menu-bg{
  width: 80px;
}

#facebook{
  margin-bottom: 5px;
}

/* フォント */
#header-txt, .ttl, .txt{
  font-family: 'Noto Serif JP', serif;
}

/* ヘッダー */
header{
  background-image: url("../img/staff04/header-img.jpg");
  min-height: 550px;
  /* width: 100%; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#header-logo{
  position: absolute;
  top: 10px;
  left: 14px;
  width: 100px;
  z-index: 20;
}

#header-wrapper{
  width: 90%;
  background-color: rgba(255, 255, 255, 0.459);
  max-width: 400px;
  margin: 0 ;
  height: 210px;
  padding: 25px;
  box-sizing: border-box;
  position: relative;
  top: 320px;
  margin: 0 auto;
}


.ttl, #header-txt{
  font-weight: 100;
}


#header-txt h1{
  color: #3b1604;
  font-weight: 400;
  font-size: 20px;
  text-align: left;
  margin: 0;
  text-shadow: 10px 0px 18px rgb(255, 255, 255),0 0 10px rgb(255, 255, 255);
}

#header-txt p{
  font-size: 12px;
  color: #3b1604;
  text-shadow: 10px 0px 18px rgb(255, 255, 255),0 0 10px rgb(255, 255, 255);
}

.ttl{
  font-size: 18px;
  margin: 30px 0;
}

.txt{
  font-size: 12px;
  font-weight: 100;
  letter-spacing: 0.04;
  line-height: 2em;
  margin-bottom: 60px;
}

#body-wrapper{
  width: 85%;
  margin: 0 auto;
}

#section1-img, #section2-img, #section3-img{
  width: 100%;
}

#section3-img{
  margin-bottom: 60px;
  display: none;
}


/* 今後の目標 */
#goals-ttl{
  font-size: 15px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 100;
}

#goals-txt{
  font-size: 18px;
}

#goals {
  position: relative;
  z-index: 1;
  padding: 30px;
  width: 100%;
  background: linear-gradient(to right, #edcf90, #f79c77);
  text-align: center;
  box-sizing: border-box;
}

#goals::before {
      position: absolute;
      top: 0;
      left :0;
      z-index: -1;
      box-sizing: border-box;
      padding: 20px;
      width: 100%;
      height: 100%;
      background:#fff;
      background-clip: content-box;
      content: "";
  }





  /* エントリー */
  #entry{
    background-image: url('../../img/common/bottom-bg.jpg');
    width: 100%;
    background-size: cover;
    padding-bottom: 30px;
  }

  #entry h2{
    font-size: 20px;
    text-align: center;
    color: #54504c;
    padding-top: 35px;
    margin-top: 0;
  }

  #entry-btn{
    text-decoration: none;
  }


  #entry-btn p{
    position:relative;
    z-index:1;
    border-radius:2em;
    padding: 5px;
    width:80%;
    height: 35px;
    box-sizing: border-box;
    background:linear-gradient(to right,   #ffa213, #e13c00);
    text-align: center;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 10px;
    padding-top: 15px;
    font-size: 12px;
    padding: 0;
    padding-top: 8px;
    color: white;
    letter-spacing: 0.08em;
  }

  .number{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }

  .number-h2{
    font-size: 12px;
    color: #54504c;
    margin: 0;
    width: 80px;
    margin-right: 10px;
    letter-spacing: 0.08em;
  }

  .number-icon{
    height: 15px;
    margin-right: 3px;
  }

  .phone-number{
    font-size: 18px;
    color: #54504c;
    margin: 0;
    letter-spacing: 0.08em;
  }

  #arrow3{
    position: absolute;
    height: 17px;
    top: 9px;
    right: 15px;
    z-index: 10;
  }

/* フッター */
#footer-logo{
  width: 150px;
  display: block;
  margin: 0 auto;
  margin-top: 40px;
}


footer p{
  font-size: 9px;
  color: #54504c;
  text-align: center;
  margin-top: 30px;
}


/* メニュー */

menu{
  margin: 0px;
}

#menu-bg{
  position: absolute;
  top: 0px;
  right: 0;
  width: 110px;
  z-index: 20;
}


#menu-menu, #menu-re{
  display: flex;
  z-index: 20;
}

#menu-menu{
  position: absolute;
  right: 22px;
  top: 20px;
}

#menu-menu p{
  color: white;
  font-size: 10px;
  padding-right: 40px;
  margin-top: 5px;
}

#menu-menu img{
  height: 25px;
}

#menu-re img{
  height: 30px;
}

#menu-re{
  position: absolute;
  right: 25px;
  top: 60px;
}

#menu-re p{
  color: white;
  font-size: 10px;
  padding-right: 10px;
}


.el_humburger {
  position: absolute;
  top: 45px;
  right: 60px;
  width: 46px;
  height: 25px;
  padding-top: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0px;
  z-index: 20;
  cursor: pointer;
  pointer-events: auto;
  color: #000;
  text-align: center;}

/* @media screen and (max-width: 840px) { */
  .el_humburger {
    display: block;
    right: 0;
    top: 0;
    padding-top: 20px;
    width: 70px;
    height: 70px;}
    #factory .el_humburger {
      display: none; }
    /* } */

.el_humburger_wrapper {
  margin-bottom: 5px;
  width: 42px;
  display: inline-block; }

/* @media screen and (max-width: 840px) { */
  .el_humburger_wrapper {
    margin-bottom: 5px;
    width: 30px; }
  /* } */

.el_humburger_text {
  font-size: 12px;
  letter-spacing: 0.1em;
}

.js_humburgerOpen .el_humburger_text.el_humburger_text__menu {
  display: none; }

.el_humburger_text.el_humburger_text__close {
  display: none; }

.js_humburgerOpen .el_humburger_text.el_humburger_text__close {
  display: block; }

/* @media screen and (max-width: 840px) { */
  .el_humburger_text {
    font-size: 10px;
    padding-top: 2px; }
  /* } */

/* @media screen and (max-width: 840px) { */
  .el_humburger_text svg path {
    -webkit-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
    -o-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
    transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
    fill: #000; }
  /* } */

/* @media screen and (max-width: 840px) { */
  .js_humburgerOpen .el_humburger_text svg path {
    fill: #000; }
  /* } */

.el_humburger span.el_humburger_bar {
  display: block;
  width: 100%;
  margin: 0 auto 7px;
  height: 3px;
  background: black;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }

.el_humburger span.el_humburger_bar:last-child {
  margin-bottom: 0; }

.js_humburgerOpen .el_humburger span.el_humburger_bar {
  background: white;
}

/* @media screen and (max-width: 840px) { */
  .el_humburger span.el_humburger_bar {
    left: 0;
    top: 0;
    background: white; }
  /* } */

.js_humburgerOpen .el_humburger span.el_humburger_bar.top {
  -webkit-transform: translateY(9px) rotate(-45deg);
  -ms-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);

}

.js_humburgerOpen .el_humburger span.el_humburger_bar.middle {
  opacity: 0; }

.js_humburgerOpen .el_humburger span.el_humburger_bar.bottom {
  -webkit-transform: translateY(-11px) rotate(45deg);
  -ms-transform: translateY(-11px) rotate(45deg);
  transform: translateY(-11px) rotate(45deg); }

.el_humburgerButton.el_humburgerButton__close {
  top: 2%;
  right: 2%; }

.el_humburgerButton__close span.el_humburger_bar {
  display: block;
  width: 35px;
  margin: 0 auto;
  height: 4px;
  background: black; }

.el_humburgerButton__close span.el_humburger_bar.top {
  -webkit-transform: translateY(5px) rotate(-45deg);
  -ms-transform: translateY(5px) rotate(-45deg);
  transform: translateY(5px) rotate(-45deg); }

.el_humburgerButton__close span.el_humburger_bar.bottom {
  -webkit-transform: translateY(-6px) rotate(45deg);
  -ms-transform: translateY(-6px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg); }

.navi {
  position: fixed;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  width: 0;
  z-index: 3;
  padding-top: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 600ms ease-out;
  -o-transition: all 600ms ease-out;
  transition: all 600ms ease-out;
  overflow: hidden;
  margin-right: 0px;
}


  .js_humburgerOpen .navi {
    width: 450px; }


    /* @media screen and (max-width: 840px)
    { */
      .js_humburgerOpen .navi {
        width: 90%;
        padding: 100px 5% 0; }
    /* } */

.navi_item {
  margin-bottom: 28px;
  font-size: 20px;
  white-space: nowrap;
  margin-left: 90px;
  border-bottom: 1px solid white;
}

.navi_item a{
  color: white;
  text-decoration: none;
}


.navi_item.op_innerLink {
    cursor: pointer;
  }

    .navi_item {
      margin-left: 0;
      font-size: 18px; }

      .navi_item {
        margin-bottom: 28px;
        font-size: 20px;
        white-space: nowrap;
        margin-left: 90px;
        border-bottom: 1px solid white;
      }

      .navi_item a{
        color: white;
        text-decoration: none;
      }


      .navi_item.op_innerLink {
          cursor: pointer;
        }

      .navi_item {
        margin-left: 0;
        font-size: 18px; }


      .navi_top {
        font-weight: 600;
        color: white;
      }

      .navi_inner {
        height: 100%;
        overflow-y: scroll;
      }

      /*=============================
      パンくず
      ==============================*/

      #path {
        padding: 0;
        width: 350px;
        list-style: none;
        margin-bottom: 40px;
      }

      #path ol {
        text-align: left;
      }

      #path li a {
        text-decoration: none;
        color: #47433e;
        font-weight: 200;
        margin: 0 5px;
        font-size: 10px;
      }

      #path li {
          display: inline;
          list-style: none;
          font-weight: bold;
      }

      #path li:after {
          font-weight: 200;
          font-family: 'Noto Sans Japanese', serif;
          content: '＞';
          padding: 0 0.2em;
          color: #555;
      }

      #path li:last-child:after {
          content: '';
      }

      .el_humburger_wrapper {
        right: 20px;
      }

#arrow3 {
    position: absolute;
    height: 17px;
    top: 9px;
    right: 15px;
    z-index: 10;
}

.navi_item {
  font-size: 14px;
  margin-bottom: 12px;
}

.navi_child {
  font-size: 12px;
  margin-bottom: 10px;
}


@media(min-width: 1000px){

  #body-wrapper{
    width: 100%;
  }

  #main-wrapper{
    width: calc(100% - 40px);
  }

  #side-bar{
    width: 40px;
  }

  .side-bar-icon img{
    width: 15px;
    }

  header{
    background-image: url("../img/staff04/header-img-pc.jpg");
    width: 100%;
    height: 450px;
    background-position:center center;
  }

  #header-wrapper-pc{
    width: 70%;
    margin: 0 auto;
  }

  #header-wrapper{
    width: 90%;
    background-color: rgba(255, 255, 255, 0.459);
    max-width: 450px;
    margin: 0 ;
    height: 300px;
    padding: 30px;
    padding-right: 20px;
    box-sizing: border-box;
    position: relative;
    top: 130px;
  }

  #header-txt h1{
    font-size: 30px;
    text-align: left;
  }

  #header-txt p{
    font-size: 20px;
  }

 /* セクション */

.br-pc{
  display: block;
}

#section1{
  width: 700px;
  margin: 0 auto;
}

#section2-wrapper{
  display: flex;
  justify-content: space-between;
  width: 90%;
  align-items: center;
}

#section2{
  width: 40%;
  margin-bottom: 100px;
}

#section1-img{
  width: 60%;
  height: auto;
  margin-right: 20px;
  margin-bottom: 100px;
}

#section3-wrapper{
  display: flex;
  flex-direction: row-reverse;
  width: 90%;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

  /* justify-content: flex-end; */


#section2-img{
  width: 60%;
  height: auto;
  margin-left: 20px;
  margin-bottom: 100px;
}

#section3-img-wrapper{
  width: 50%;
}

#section3-img{
  width: 70%;
  margin-right: 30px;
  display: inline-block;
}

#section3-ttl, #section3-txt{
  text-align: left;
}

#section3 {
  width: 50%;
}

/* 今後の目標 */



#goals-ttl{
  font-size: 18px;
}

#goals-txt{
  font-size: 17px;
}

#goals {
  position: relative;
  z-index: 1;
  padding-top: 90px;
  width: 100%;
  background: linear-gradient(to right, #edcf90, #f79c77);
  text-align: center;
  box-sizing: border-box;
}


#goals::before {
  padding: 70px 130px 50px 130px;
}

/* メニュー */
  #pc-menu{
    display: block;
    height: 50px;
    background-color: white;
  }

  #pc-menu-wrapper{
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }

  #pc-menu-item{
    text-decoration: none;
    display: flex;
    list-style: none;
  }

  #pc-menu-item li{
    font-size: 10px;
    padding-right: 0px;
    color: #47433e;
    padding-top: 3px;
    font-weight: bold;
    letter-spacing: 0em;
  }

  #header-logo{
    position: static;
    width: 150px;
    padding-top: 15px;
  }


/* エントリー */
#entry-pc-wrapper{
  display: flex;
  justify-content: center;
}

#entry h2{
  font-size: 30px;
  margin-top: 0;
}

#entry-btn{
  width: 350px;
  margin-top: 18px;
}

.number-h2{
  font-size: 16px;
  width: 130px;
  font-weight: normal;
}

.phone-number{
  font-size: 20px;
}

/* フッター */
#footer-logo{
  width: 300px;
}


footer p{
  font-size: 16px;
}

#pc-menu-footer{
  width: 100%;
}

#pc-menu-item{
  text-decoration: none;
  display: flex;
  list-style: none;
  justify-content: center;
}

#pc-menu-item li{
  font-size: 14px;
  font-weight: normal;
}


/*ナビ */

.navi {
  position: fixed;
  right: -140px;
  height: 110%;
  background-color: rgba(0, 0, 0, 0.7);
  width: 0;
  z-index: 3;
  padding-top: 100px;
  margin-top: -70px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 600ms ease-out;
  -o-transition: all 600ms ease-out;
  transition: all 600ms ease-out;
  overflow: hidden;
  margin-right: 10%;
}

.js_humburgerOpen .navi {
  width: 50%;
  padding: 100px 5% 0;
}

.navi_inner {
  height: calc(100% - 100px);
  overflow-y: scroll;
}


/*===========================
}
@media(min-width: 1000px){
==========================*/
#pc-menu-wrapper {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

#header-logo {
    position: static;
    width: 210px;
    padding-top: 15px;
}

#pc-menu {
    display: block;
    height: 70px;
    background-color: white;
}

#pc-menu-item a {
    text-decoration: none;
    color: #47433e;
}



#pc-menu-item {
    text-decoration: none;
    display: flex;
    list-style: none;
    justify-content: center;
}

#pc-menu-item li {
    font-size: 16px;
    font-weight: normal;
    margin: 0 10px;
}

#pc-menu-item li {
    font-size: 16px;
    padding-right: 0px;
    color: #47433e;
    padding-top: 3px;
    letter-spacing: 0em;
}

header {
    background-image: url(../img/staff04/header-img-pc.jpg);
    width: 100%;
    height: 540px;
    background-position: center center;
}

#menu-bg {
    width: 180px;
}

#menu-menu p {
    margin-top: 35px;
    margin-right: 20px;
}

#menu-menu p {
    font-size: 14px;
}

#menu-re p {
    font-size: 14px;
    margin-top: 65px;
}

#menu-re img {
    height: 50px;
    margin-top: 50px;
}

#side-bar {
    width: 40px;
    bottom: 30px;
}

.el_humburger_wrapper {
    right: 4px;
}

.el_humburger_wrapper {
    margin-right: 24px;
    margin-top: 20px;
}

.el_humburger_wrapper {
    width: 40px;
    padding: 10px 0;
}

.el_humburger span.el_humburger_bar {
    display: block;
    width: 110%;
    height: 5px;
    margin: 0 auto 10px;
}

.navi {
    position: fixed;
    right: -140px;
    height: 110%;
    background-color: rgba(0, 0, 0, 0.7);
    width: 0;
    z-index: 3;
    padding-top: 100px;
    margin-top: -70px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    transition: all 600ms ease-out;
    overflow: hidden;
    margin-right: 0;
}

.navi_inner {
    height: calc(100% - 100px);
    overflow-y: scroll;
}

#header-wrapper-pc {
    width: 70%;
    margin: 0 auto;
}

#header-wrapper {
    width: 90%;
    background-color: rgba(255, 255, 255, 0.459);
    max-width: 520px;
    margin: 0;
    height: 350px;
    padding: 30px 20px;
    box-sizing: border-box;
    position: relative;
    top: 100px;
}

#header-txt h1 {
    font-size: 40px;
    text-align: left;
}

#header-txt p {
    font-size: 24px;
}

#header-txt p {
    font-size: 24px;
    color: #3b1604;
    text-shadow: 10px 0px 18px rgb(255, 255, 255), 0 0 10px rgb(255, 255, 255);
}

#path {
    width: 500px;
}

#body-wrapper {
    width: 100%;
}

#section1 {
    width: 1000px;
    margin: 0 auto;
}

.ttl {
    font-size: 2.5vw;
}

#section1-txt {
    margin-bottom: 100px;
}

.txt {
    font-size: 1vw;
}

#section2-wrapper {
    display: flex;
    justify-content: space-between;
    width: 90%;
    align-items: center;
}

#section1-img {
    width: 60%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 100px;
}

#section2 {
    width: 50%;
    margin-bottom: 100px;
}

#section3-top-wrapper {
    width: 90%;
    text-align: right;
    margin: 0 0 0 auto;
}

#goals {
    position: relative;
    z-index: 1;
    padding-top: 90px;
    width: 100%;
    background: linear-gradient(to right, #edcf90, #f79c77);
    text-align: center;
    box-sizing: border-box;
}

#goals::before {
    padding: 70px 130px 50px 130px;
}

#goals-ttl {
    font-size: 24px;
}

#goals-txt {
    font-size: 2.5vw;
}

#entry {
    background-image: url(../../img/common/bottom-bg.jpg);
    width: 100%;
    background-size: cover;
    padding-bottom: 30px;
}

#pc-menu-footer {
    display: block;
}

#footer-logo {
    width: 350px;
}

footer p {
    font-size: 18px;
    margin-bottom: 18px;
}

#side-bar {
    width: 40px;
    bottom: 30px;
}

.side-bar-icon img {
    width: 15px;
}

#entry h2 {
  font-size: 36px;
  margin: 75px 54px 75px 0;
  padding-top: 0;
}

#entry-btn {
    width: 350px;
    margin: 60px 0;
}

.number {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin-bottom: 28px;
}

.number-h2 {
    font-size: 24px;
    width: 200px;
    font-weight: normal;
}

.number-icon {
    height: 30px;
    margin-right: 3px;
}

.phone-number {
    font-size: 30px;
    font-weight: bold;
}

.number {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin-bottom: 28px;
}

.number-h2 {
    font-size: 24px;
    width: 200px;
    font-weight: normal;
}

.number-icon {
    height: 30px;
    margin-right: 3px;
}

.phone-number {
    font-size: 30px;
    font-weight: bold;
}

#pc-menu-item {
    text-decoration: none;
    display: flex;
    list-style: none;
    justify-content: center;
}

footer p {
    font-size: 18px;
    margin-bottom: 18px;
}

#side-bar {
    width: 40px;
    bottom: 30px;
}

.side-bar-icon img {
    width: 15px;
}

#menu-bg, #menu-menu, #menu-re, .el_humburger_wrapper {
  position: fixed;
}

#entry-btn p{
  position:relative;
  z-index:1;
  border-radius:2em;
  padding: 5px;
  width:362px;
  height: 50px;
  box-sizing: border-box;
  background:linear-gradient(to right,   #ffa213, #e13c00);
  text-align: center;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 10px;
  padding-top: 0;
  font-size: 18px;
  color: white;
  letter-spacing: 0.08em;
  line-height: 50px;
}

#path li a {
    text-decoration: none;
    color: #47433e;
    font-weight: 200;
    margin: 0 20px;
    font-size: 12px;
}

#path {
    width: 500px;
}

#arrow3 {
    position: absolute;
    height: 17px;
    top: 15px;
    right: 17px;
    z-index: 10;
}

.navi_child, .navi_item {
    font-size: 18px;
    margin-bottom: 28px;
}

}

#side-bar{
  display: flex;
  flex-direction: column;
  width: 8%;
  align-items: center;
  position: fixed;
  bottom: 0px;
  right: 0px;
  background-color: #fff;
  height: 100%;
}

.side-bar-icon img{
align-items: center;
width: 15px;
right: 8px;
bottom: 0;
position: absolute;
}

.fb_icon img {
  width: 26px;
  right: 4px;
  bottom: 32%;
  position: absolute;
}

.ig_icon img {
  width: 26px;
  right: 4px;
  bottom: 26%;
  position: absolute;
}


@media(min-width: 1000px){
  .side-bar-icon img{
    width: 15px;
    bottom: 30px;
    }

    .fb_icon img {
      width: 26px;
      right: 6px;
      bottom: 32%;
      position: absolute;
    }

    .ig_icon img {
      width: 26px;
      right: 6px;
      bottom: 26%;
      position: absolute;
    }
  }