@media screen and (max-width: 780px) {
  header {
    height: 20vw; }
    header .header_container {
      height: inherit; }
      header .header_container .logo {
        width: calc(100% - 40vw);
        padding: 0 5% 0 2%; }
      header .header_container .hd_btn {
        width: 20vw;
        height: 20vw; }
        header .header_container .hd_btn.hamburger {
          right: 20vw; }
        header .header_container .hd_btn .text {
          font-size: 3vw;
          letter-spacing: 0.1em; }
      header .header_container .nav {
        width: 90%;
        top: 20vw;
        background-color: rgba(141, 128, 112, 0.85); }
        header .header_container .nav .nav_list {
          width: 100%;
          height: calc(100% - 20vw);
          padding: 5vw 0;
          display: flex;
          flex-flow: column;
          justify-content: space-between; }
          header .header_container .nav .nav_list .nav_item {
            font-size: 4.5vw;
            letter-spacing: 0.1em; }
            header .header_container .nav .nav_list .nav_item a {
              width: 100%;
              padding: 6.8vw 15vw 6.8vw 8vw;
              box-sizing: border-box;
              display: block;
              text-align: right;
              position: relative; }
              header .header_container .nav .nav_list .nav_item a:before {
                content: '';
                width: 1em;
                height: 1em;
                background-image: url("../img/arrow_right.svg");
                background-repeat: no-repeat;
                background-size: contain;
                display: inline-block;
                position: absolute;
                top: 50%;
                right: 6vw;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%); }

  #main_contents {
    width: 100%; } }
@media screen and (min-width: 781px) {
  header .header_container {
    height: 10vw;
    max-height: 120px;
    padding: 0 25px; }
    header .header_container .logo {
      width: 35%;
      max-width: 400px; }
    header .header_container .hd_btn {
      width: min(10vw, 120px);
      height: min(10vw, 120px); }
      header .header_container .hd_btn.hamburger {
        right: min(10vw, 120px); }
      header .header_container .hd_btn .text {
        font-size: 13px;
        letter-spacing: 0.1em; }
    header .header_container .nav {
      width: 100%;
      height: min(50vw, 400px);
      top: min(10vw, 120px);
      background-color: rgba(141, 128, 112, 0.85); }

  #main_contents {
    width: 100%; }

  .pc_container {
    width: 100%;
    max-width: 1040px;
    padding-left: 2.5%;
    padding-right: 2.5%;
    margin: auto; } }
header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; }
  header .header_container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    margin-right: auto;
    margin-left: auto; }
    header .header_container .logo {
      display: block;
      fill: #af9e86; }
    header .header_container .hd_btn {
      position: absolute;
      top: 0;
      appearance: none;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer; }
      header .header_container .hd_btn .icon {
        width: 50%;
        position: absolute;
        display: block;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%); }
      header .header_container .hd_btn .text {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%); }
    header .header_container .reserve {
      background-color: #cb9485;
      fill: #fff;
      right: 0; }
      header .header_container .reserve .icon {
        top: 15%;
        width: 40%; }
        header .header_container .reserve .icon svg {
          width: 100%; }
    header .header_container .hamburger {
      background-color: #8d8070; }
      header .header_container .hamburger .icon, header .header_container .hamburger .icon:before, header .header_container .hamburger .icon:after {
        position: absolute;
        display: block;
        content: "";
        height: 2px;
        background-color: #fff;
        transition: all 0.5s; }
      header .header_container .hamburger .icon {
        top: 38%; }
        header .header_container .hamburger .icon:before, header .header_container .hamburger .icon:after {
          width: 100%; }
        header .header_container .hamburger .icon:before {
          top: -14px; }
        header .header_container .hamburger .icon:after {
          bottom: -14px; }
      header .header_container .hamburger.open span {
        background-color: transparent; }
        header .header_container .hamburger.open span:before {
          top: 0;
          transform: rotate(45deg); }
        header .header_container .hamburger.open span:after {
          bottom: 0;
          transform: rotate(-45deg); }
    header .header_container .nav {
      position: fixed;
      height: 100vh;
      right: -100%;
      transition: all 0.5s; }
      header .header_container .nav.open {
        right: 0; }
      header .header_container .nav .nav_list {
        width: 100%;
        display: block; }
        header .header_container .nav .nav_list .nav_item {
          display: block;
          color: #fff;
          text-decoration: none;
          text-transform: uppercase; }