@media screen and (max-width: 960px) {
  #header {
    z-index: 9999;
  }
  .headerNavWrap {
    display: block;
    position: relative;
    padding: 30px 0 30px 0;
  }
  .headerNav {
    display: block;
  }
  .header__logo img {
    width: 124px;
  }
  .Btn_wrap{
    display: block;
    border-bottom: solid 1px #817356;
  }
  #js-closeBtnWrap {
    display: block;
    background: #fff;
  }
  #js-openBtn {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    margin: auto;
    padding: 20px 17px;
  }
  #js-openBtn img {
    width: 22px;
  }
  #js-spNav {
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    width: 78%;
    background: #f1f1f1;
    transform: translateX(108%);
    transition: all .3s;
  }
  #js-spNav.isOpen {
    transform: translateX(8%);
  }
  .menu_logo a img{
    width: 100%;
    max-width: 200px;
  }
  .headerNav li {
    margin-left: 0;
    background: #f7f7f7;
    border-bottom: 1px solid #dbdbdb;
  }
  .headerNav li:first-child {
    border-top: 1px solid #dbdbdb;
  }
  .headerNav li a {
    position: relative;
    padding: 0 15px;
    font-weight: normal;
    line-height: 50px;
    font-size: 16px;
  }
  .headerNav li a::after {
    position: absolute;
    top: 0;
    right: 30px;
    bottom: 0;
    width: 7px;
    height: 7px;
    margin: auto;
    border-right: 1px solid #3b2e1e;
    border-bottom: 1px solid #3b2e1e;
    transform: rotate(-45deg);
    content: "";
  }
#js-menuBk {
  display: none;
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
}
  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    }
    .menu-trigger {
      position: relative;
      width: 50px;
      height: 44px;
    }
    .menu-trigger span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: #3b2e1e;
      border-radius: 4px;
    }
    .menu-trigger span.menu {
      position: absolute;
      left: 0;
      top: 30px;
      width: 100%;
      background:none;
      border-radius: 4px;
      color: #FFFFFF;
      text-align: center;
      font-size: 105%;
      color: #3b2e1e;
    }
    .menu-trigger.active span.menu {
      position: absolute;
      left: 0;
      top: 36px;
      width: 100%;
      background:none;
      border-radius: 4px;
      color: #FFFFFF;
      text-align: center;
      color: #817356;
    }
    .menu-trigger span:nth-of-type(1) {
      top: 0;
    }
    .menu-trigger span:nth-of-type(2) {
      top: 12px;
    }
    .menu-trigger span:nth-of-type(3) {
      top: 24px;
    }
    .menu-trigger.active span:nth-of-type(3) {
      top: 40px;
    }
    /*click後のスタイル*/
    .menu-trigger.active span:nth-of-type(1) {
      -webkit-transform: translateY(20px) rotate(-30deg);
      transform: translateY(20px) rotate(-30deg);
    }
    .menu-trigger.active span:nth-of-type(2) {
      opacity: 0;
    }
    .menu-trigger.active span:nth-of-type(3) {
      -webkit-transform: translateY(-20px) rotate(30deg);
      transform: translateY(-20px) rotate(30deg);
    }
    #main .mainmenu ul li .underbox p {
        font-size: 2rem;
        height: 20px;
    }
    #main .mainmenu ul li .menuunder {
      width:30%;
      bottom:7rem;
     left:0;
      opacity:0.2;
    }
    #main .mainmenu ul li .underbox p img {
      width:auto;
      vertical-align:middle;
      margin-right:1rem;
    }
    #main .mainmenu ul li .menulast {
        bottom: 8rem;
    }
  #main .ayakasahokonews h2,#main .greeting h2 {
    font-size: 3rem;
  }
  div#top_content {
      width: 100%;
      position: relative;
      background: none;
      background: url(image/main.png) left bottom no-repeat;
      background-size:cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 500px;
  }
div.inner_frame p {
    position: relative;
    width: 100%;
    padding: calc(476 / 267 * 100%) 0 0;
  }
div.inner_frame p iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
/* 600px~960px */
@media screen and (min-width: 601px) and (max-width: 960px) {
    /*　画面サイズ 601pxから834pxまで適用　*/
    div#container {
        width: 94%;
        max-width: 1000px;
        margin: 0 auto;
    }
    div.contents {
        width: 94%;
        margin-bottom: 3rem;
        margin: 0 auto;
    }
    div#sec1 {
        height: 620px;
        position: relative;
    }
    div.pic_area {
        left: 50%;
        max-width: 802px;
        position: relative;
        /* display: initial; */

        clip-path: none;
        -webkit-clip-path:none;
    }

    div.intro_descr1 {
        position: absolute;
        top: 60px;
        left: 12%;
        width: 35%;
    }
    img.upper_pic {

        width: calc(60% + 140px);
  }
  div#svg_outer {
    position: absolute;
    top:418px;
    z-index: 1;
  }
  div#svg_base {
    /* width:80%; */
    min-width: 300px;
    margin-top: -95px;
    /* background-color: transparent; */

   }

    ul.flex_box li{
    min-width: 80px;
    }
    div.pic {
        min-width: 0;
        width:100%;
        margin: 0 auto;
        border: solid 3px;
        border-color: #817356;
    }
    /* div#svg_base {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;

        z-index: 1;
    }*/
  ul.flex_box_center {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-left: -5%;
  }
  ul.flex_box_center li{
      width: 45%;
      margin-bottom: 20px;
      margin-left: 5%;
      text-align: center;
  }
  div.inner_frame {
      margin: 0 auto;
      width:100%;
      max-width: 267px;
  }
}
/*ここまで900～1199px*/
/* 790未満 */
@media screen and (min-width: 601px) and (max-width: 790px) {
    div#footer_area2 {
        display: flex;
    }
    div#left_box {
        width: 50%;
        float: left;
        margin: 0 auto;
        border-right: none;
    }
    div#right_box {
        width: 50%;
        margin: 0 auto;
        float: right;
    }
    div#right_box1 {
        float: left;
    }
  #main .ayakasahokonews h2,#main .greeting h2 {
    font-size: 3rem;
  }
#main .ayakasahokonews ul li {
  width:48%;
  text-align: left;
}
  #main .greeting h2 {
    font-size: 3rem;
  }
  #main .greeting ul {
  display:flex;
  justify-content:space-around;
  flex-wrap: wrap-reverse;
  }
  .access h2 {
  width:20%;
  }
  footer small{
  width:70%;
  margin:6rem auto 1rem;
  padding-top:4rem;
  }
}

@media screen and (max-width: 960px) {
  #ad_text_area {
    width : -webkit-calc(100% - 55px) ;
    width : calc(100% - 55px) ;
    text-align: right;
    padding: 15px 40px 15px 15px;
    position: absolute;
    top: 50%;
    left: 0%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  #ad_text_area img{
    max-width: 200px;
  }
  #ad_text_area p{
    font-size: 15px;
  }
div#ig_video_area div#Instagram_wrapper{
  padding-left: 20px;
  border-left: solid 1px #cccccc;
}

div.inner_frame p {
    position: relative;
    width: 100%;
    padding: calc(476 / 267 * 100%) 0 0;
  }
div.inner_frame p iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 1150px) {
  div#face_book_area{
    width: 100%;
    text-align: center;
  }
  ul.flex_box_center.fb_photo_ul{
    display: block;
  }
  ul.flex_box_center.fb_photo_ul li{
  width: auto;
  max-width: 500px;
  margin: 0 auto 20px auto;
  }
}