@media(min-width:1000px){
  .sp{
    display: none!important;
  }
}
@media(max-width:999px){
  .pc{
    display: none!important;
  }

  body{

  }

  body.fixed{
    width: 100%;
    height: 100%;
    position: fixed;
  }

  main{
    padding-top: 90px;
  }

  .container{
    max-width:500px;
    margin:0 auto;
    padding:0 36px;
  }

  .common-more-link:hover::before{
    transform:scale(1);
  }

  .common-more-link:active::before{
    transform:scale(1.2);
  }

  .hover-opa{
    transition-duration: 0.5s;
  }

  .hover-opa:hover{
    opacity: 1;
  }

  header{
    padding-top: 24px;
    padding-bottom: 20px;
    position: fixed;
  }

  header .header-container{
    max-width:100%;
    margin:0 auto;
    padding:0 24px;
  }

  header .header-logo{
    display: block;
    width:146px;
  }

  header .header-logo img{
    width:100%;
  }

  header .header-right{
    display: none;
  }

  header .drawer-menu-block{
    width:32px;
    height:18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 6px;
  }

  header .drawer-menu-block .bar{
    width:32px;
    height:1px;
    background-color: #231815;
    transition-duration: 0.5s;
  }

  header .drawer-menu-block.active .bar1 {
    transform: translateY(8.3px) rotate(-45deg);
  }
  header .drawer-menu-block.active .bar2 {
    display: none;
  }
  header .drawer-menu-block.active .bar3 {
    transform: translateY(-8.3px) rotate(45deg);
  }

  .drawer-menu{
    position: fixed;
    width:100vw;
    top:0;
    left:0;
    height:100vh;
    height: calc(var(--vh, 1vh) * 100);
    z-index:99;
    background-color:#F1F1F1;
    padding-top: 104px;
    padding-bottom: 24px;
    display: none;
  }

  .drawer-menu .frame{
    width:100%;
    height:100%;
    overflow-y:scroll;
  }

  .drawer-menu ul{
    margin-bottom: 60px;
  }

  .drawer-menu ul li{
    margin-bottom: 32px;
  }

  .drawer-menu ul li:last-child{
    margin-bottom: 0;
  }

  .drawer-menu ul li a{
    font-family: 'Hina Mincho', serif;
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 29px;
    color: #31333a;
  }

  .drawer-menu ul li a.small{
    font-size: 17px;
    line-height: 29px;
  }

  .drawer-menu p.p1{
    margin-bottom: 24px;
  }

  .drawer-menu .sns-flex{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }

  .drawer-menu .sns-flex a{

  }

  .drawer-menu .sns-flex a.insta{
    width:38px;
    margin-right: 34px;
  }

  .drawer-menu .sns-flex a.twitter{
    width:40px;
  }

  .drawer-menu .sns-flex a img{
    width: 100%;
  }

  .drawer-menu p.p2{
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    color: #31333a;
    margin-bottom: 14px;
  }

  .drawer-menu p.p2 a{
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    color: #31333a;
  }

  .drawer-menu p.p2.mbo{
    margin-bottom: 0;
  }


  #page-top{

    right:30px;
  }

  footer{
    position: relative;
  }

  footer .footer-container1{
    padding:96px 0 32px;
    max-width:500px;
    margin:0 auto;
    position: relative;
  }

  footer .footer-container2{
    padding:0 24px;
    max-width:100%;
    margin:0 auto;
  }

  footer .footer-logo{
    display: block;
    width:68px;
    margin-bottom: 40px;
  }

  footer .footer-logo img{
    width:100%;
  }

  footer .footer-flex{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }

  footer .footer-left{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  footer .footer-left .info-area1{
    margin-right: 0;
    margin-bottom: 32px;
  }

  footer .footer-left .info-area1 .name{
    font-size: 17px;
    line-height: 1;
    margin-bottom: 18px;
  }

  footer .footer-left .info-area1 .adress1{
    margin-bottom: 10px;
    line-height: 1;
  }

  footer .footer-left .info-area1 .adress2{
    line-height: 1;
    text-align: left;
    margin-bottom: 32px;
  }

  footer .footer-left .info-area1 a{

  }

  footer .footer-left .info-area1 a::after{

  }

  footer .footer-left .group-info{
    margin-top: 28px;
  }

  footer .footer-left .group-info .tel{
    pointer-events: auto;
  }

  footer .footer-left .info-area2{
    margin-bottom: 24px;
  }

  footer .footer-left .info-area2 p,
  footer .footer-left .info-area2 p a{
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    color: #31333a;
  }

  footer .footer-left .info-area2 p{
    margin-bottom: 14px;
  }

  footer .footer-left .info-area2 p:last-child{
    margin-bottom: 0;
  }

  footer .footer-left .info-area2 p.p1{
    margin-bottom: 14px;
  }

  footer .footer-left .info-area2 p a.tel{
    pointer-events: auto;
  }

  footer .footer-right{

  }



  /*
  ---------------------------------------------------------------
  トップページ
  ---------------------------------------------------------------
  */

  main.top-main{
    padding-top: 80px;
  }

  main.top-main .common-more-link-frame{
    text-align: right;
  }

  .top-logo-section{
    padding-bottom: 12px;
  }

  .top-logo-section img{
    width:212px;
    margin-left: auto;
  }

  .top-section1{
    padding-top: 32px;
    padding-bottom: 75px;
  }

  .top-section1 .sp-frame{
    padding:0 36px;
    max-width:500px;
    margin:0 auto 24px;
  }

  .top-section1 .sp-frame p.p1{
    font-size: 17px;
    margin-bottom: 32px;
  }

  .top-section1 .sp-frame p.p2{
    margin-bottom: 0;
    position: relative;
    font-size: 17px;
    letter-spacing: 0.1em;
    line-height: 1;
    padding-top: 16px;
  }

  .top-section1 .sp-frame p.p2::before{
    content:"";
    width:17px;
    height:1px;
    background-color: #B5B5B6;
    position: absolute;
    top:0;
    left:0;
  }

  .top-section1 .flex{
    flex-direction: column-reverse;
    align-items: center;
  }

  .top-section1 .left{
    width:100%;
    max-width:500px;
    display: block;
    padding:0 36px;
  }

  .top-section1 .text-frame{
    width:100%;
    position: relative;
    padding-top: 148px;

  }

  .top-section1 .left img.fish{
    position: absolute;
    width:111px;
    top:72px;
    right:-18px;
  }

  .top-section1 .left h2{
    margin-bottom: 50px;
  }

  .top-section1 .left .common-left-border-title::before{
    bottom:4px;
  }

  .top-section1 .left p.text{
    line-height: 2.5;
  }

  .top-section1 .right{
    width:100%;
  }

  .top-section1 .right .frame{
    width:100%;
    height:100vw;

    max-width:500px;
    max-height:500px;
    margin:0 auto;
    position: relative;
  }

  .top-section2{
    padding:64px 0 44px;
    position: relative;
  }


  .top-section2 .flex{
    display: flex;
    flex-direction: column;
  }

  .top-section2 .flex .left{
    width:100%;
    margin-bottom: 36px;
    position: relative;
  }

  .top-section2 .left .title-flex{
    margin-bottom: 56px;
  }

  .top-section2 .left .title-flex img.title{
    width:20px;
    margin-right: 72px;
  }

  .top-section2 .left img.fish{
    position: absolute;
    width:140px;
    z-index:-1;
    top:-16px;
    right:0px;
  }


  .top-section2 .flex .right{
    width:100%;
    padding-right:0;
    padding-bottom:0;
  }

  .top-section2 .flex .right p.p1{
    display: block;
    margin-bottom: 0;
    padding-right:0;
  }

  .top-section3{
    padding:72px 0 46px;
    position: relative;
  }


  .top-section3 .flex{
    display: flex;
    flex-direction: column;
  }

  .top-section3 .flex .left{
    width:100%;
    margin-bottom: 36px;
  }

  .top-section3 .left .title-flex{
    margin-bottom: 60px;
  }

  .top-section3 .left img.fish{
    position: absolute;
    width:128px;
    z-index:-1;
    bottom:-45px;
    left:20px;
  }

  .top-section3 .flex .right{
    width:100%;
    padding-right: 0;
    padding-bottom: 0;
  }

  .top-section3 .flex .right p.p1{
    display: block;
    margin-bottom: 72px;
    margin-right:0;
    font-size: 15px;
    line-height: 2;
  }

  .top-section4{
    padding:46px 0 150px;
    position: relative;
  }

  .top-section4 img.recommend-title{
    width:156px;
    margin-bottom: 16px;
  }

  .top-section4 h2{
    margin-bottom: 88px;
  }

  .top-section4 .common-left-border-title::before{
    bottom:4px;
  }

  .top-section4 .swiper-frame{

  }

  .top-section4 .swiper-container{
    max-width:310px;
    margin:0 auto;
  }

  .top-section4 .swiper-slide{
    margin:0 12px;
  }

  .top-section4 .swiper-pagination{
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
  }

  .top-section4 .swiper-pagination-bullet{
    width: 11px;
    height: 11px;
    background: #b5b5b6;
    border-radius: 50%;
    margin:0 14px;
    opacity: 1;
  }

  .top-section4 .swiper-pagination-bullet-active{
    pointer-events: none;
    background-color:#231815;
  }


  /*
  ---------------------------------------------------------------
  aboutページ
  ---------------------------------------------------------------
  */

  body.about-body{

  }

  main.about-main{

  }

  .about-section1{
    overflow: hidden;
    padding-bottom: 56px;
  }

  .about-section1 .sp-frame{
    padding:0 36px;
    width:100%;
    max-width:500px;
    margin:0 auto 64px;
  }

  .about-section1 .title-flex{
    display: flex;
  }

  .about-section1 .title-flex img{
    width:15px;
    margin-left: 155px;
  }

  .about-section1 .flex{
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    margin:0 auto 44px;

  }

  .about-section1 .flex .left{
    display: block;
    margin:0 auto;
    padding:0 36px;
    width:100%;
    max-width:500px;
  }

  .about-section1 .left .text-frame{
    width:100%;
  }

  .about-section1 .left p.p1{
    margin-bottom: 50px;
  }

  .about-section1 .left p.p2{

  }

  .about-section1 .flex .right{
    width:100%;
    margin-bottom: 96px;
  }

  .about-section1 .flex .right img{
    width:100%;
    max-width:500px;
    margin:0 auto;
  }

  .about-section1 .box{
    width:280px;
    height:110px;
    position: relative;
    display: flex;
    align-items: center;
  }

  .about-section1 .box::before{
    background-color: #fff;
  }

  .about-section1 .box p{
    margin-bottom: 5px;
  }

  .about-section1 .box a{
    position: absolute;
    bottom:10px;
    right:-36px;
  }

  .about-section1 .box .common-more-link {
    font-size: 15px;
  }

  .about-section1 .box .common-more-link::before{
    background-color: #E5E5E5;
  }

  .about-section1 .box .common-more-link::after {
    bottom: 2px;
}

  .about-section1 .use_text_block{
    padding:24px 0 24px 16px;
    position: relative;
  }

  .about-section2{
    padding:56px 0 128px;
  }

  .about-section2 .flex{
    max-width:960px;
    margin:0 auto;
    position: relative;
    padding-bottom: 22vw;
    display: flex;
    flex-direction: column;
  }

  .about-section2 .flex .left{
    width:100%;
    position: relative;
    margin-bottom: 44px;
  }

  .about-section2 .flex .left img.about1{
    width:40vw;
  }

  .about-section2 .flex .left img.fish{
    position: absolute;
    /* width:111px; */
    width:29.6vw;
    top:-8px;
    left:59vw;
  }

  .about-section2 .flex .right{
    width:100%;
    position: relative;
    padding-top:0;
    display: flex;
    justify-content: flex-end;
  }

  .about-section2 .flex .right img.about2{
    width:63vw;
  }

  .about-section2 .flex img.about3{
    position: absolute;
    width:42.4vw;
    bottom:0;
    left:0;
    right:auto;
    margin:auto;
  }

  .about-section3{

  }

  .about-section3 .flex{
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .about-section3 .flex .left{
    width: 100%;
    max-width:500px;
    padding:0 36px;
    margin:0 auto 64px;
  }

  .about-section3 .left .text-frame{
    width:100%;
  }

  .about-section3 .flex .left h2{
    margin-bottom: 48px;
  }

  .about-section3 .flex .left p.p2{
    font-size: 15px;
    line-height: 2;
  }

  .about-section3 .flex .right{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .about-section3 .flex .right img{
    width: 66vw;
  }

  .about-section4{
    padding:36px 0 160px;
  }

  .about-section4 .container{
    max-width:100%;
    padding:0;
  }

  .about-section4 .flex{
    display: flex;
    flex-direction: column;
  }

  .about-section4 .flex .left{
    width:100%;
    position: relative;

  }

  .about-section4 .flex .left img.about5{
    width:42vw;
    margin-left: 12vw;
  }

  .about-section4 .flex .right{
    width:100%;
    position: relative;
  }

  .about-section4 .flex .right img.fish{
    width:33.8vw;
    margin-left: 16vw;
    margin-top: 17.8vw;
    margin-bottom: 0;
  }

  .about-section4 .flex .right img.about6{
    position: absolute;
    width:33vw;
    right:0;
    top:-4.5vw;
    margin:0;
  }


  /*
  ---------------------------------------------------------------
  storyページ
  ---------------------------------------------------------------
  */

  body.story-body{

  }

  main.story-main{

  }

  .story-section1{

  }

  .story-section1 .sp-frame{
    max-width:500px;
    padding:0 36px;
    margin:0 auto 16px;
  }

  .story-section1 .title-flex{
    display: flex;
  }

  .story-section1 .title-flex .block{
    padding-top: 28px;
  }

  .story-section1 .title-flex img{
    width:16px;
    margin-left: 236px;
  }


  .story-section1 .flex{
    display: flex;
    flex-direction:column-reverse;
  }

  .story-section1 .flex .left{
    display: block;
    width:100%;
    max-width:500px;
    padding:0 36px;
    margin:0 auto;
  }

  .story-section1 .left .text-frame{
    width:100%;
  }


  .story-section1 .left p.p1{
    margin-bottom: 48px;
  }

  .story-section1 .left p.p2{
    font-size: 15px;
    line-height: 2.5;
  }

  .story-section1 .flex .right{
    width:100%;
    margin-bottom: 96px;
  }

  .story-section1 .flex .right img{
    max-width:500px;
    margin:0 auto;
  }

  .story-section2{
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .story-section2 ul.common-blog-list{
    flex-direction:column;
    align-items: center;
  }

  .story-section2 ul.common-blog-list li{
    margin-right: 0;
    margin-bottom: 32px;
  }

  .story-section2 ul.common-blog-list li:nth-child(3n){
    margin-right: 0;
  }



  /*
  ---------------------------------------------------------------
  館内のご利用方法
  ---------------------------------------------------------------
  */

  body.use-body{

  }

  main.use-main{

  }

  .use-section1{
    padding:28px 0 48px;
  }



  .use-section1 p{
    font-size: 15px;
    line-height: 1.9;
    text-align: center;
  }

  .use-section2{
    padding:64px 0 110px;
    position: relative;
  }

  .use-section1 h2{
    margin-bottom: 72px;
    font-size: 19px;
    line-height: 1;
    text-align: center;
    font-weight: 400;
  }

  .use-section2 ul{

  }

  .use-section2 ul li{
    display: flex;
    flex-direction: column;
  }

  .use-section2 ul li .left{
    width:100%;
  }

  .use-section2 ul li .right{
    width:100%;
  }

  .use-section2 ul li .title-flex{
    display: flex;
    padding-bottom: 6px;
    position: relative;
    margin-bottom: 20px;
  }

  .use-section2 ul li .title-flex::before{
    width:100%;

  }

  .use-section2 ul li .title-flex .num{
    width:55px;
    font-size: 17px;
    letter-spacing: 0.1em;
    line-height: 38px;
  }

  .use-section2 ul li .title-flex .title{
    font-size: 17px;
    letter-spacing: 0.1em;
    line-height: 38px;
    white-space: nowrap;
  }

  .use-section2 ul li .text{
    font-size: 15px;
    line-height: 1.8;
  }

  .use-section2 ul li.li1{
    margin-bottom: 96px;
  }

  .use-section2 ul li.li1 .left{
    padding-top: 0;
    margin-bottom: 48px;
  }

  .use-section2 ul li.li1 .title-flex{
    margin-bottom: 20px;
  }

  .use-section2 ul li.li1 .right img{
    width:240px;
    margin-left: 12px;
  }

  .use-section2 ul li.li2{
    margin-bottom: 106px;
  }

  .use-section2 ul li.li2 .left{
    padding-top: 0;
    margin-bottom: 16px;
  }

  .use-section2 ul li.li2 .right img{
    width:200px;
    margin: 0 auto;
  }

  .use-section2 ul li.li3{
    margin-bottom: 98px;
  }

  .use-section2 ul li.li3 .left{
    padding-top: 0;
    margin-bottom: 28px;
  }

  .use-section2 ul li.li3 .right img{
    width:195px;
    margin-left: auto;
    margin-right:auto;
  }

  .use-section2 ul li.li4{

  }

  .use-section2 ul li.li4 .left{
    padding-top: 0;
    margin-bottom: 28px;
  }

  .use-section2 ul li.li4 .right img{
    width:126px;
    margin: 0 auto;
  }


  /*
  ---------------------------------------------------------------
  シングルページ
  ---------------------------------------------------------------
  */

  body.single-body::before{


  }

  main.single-main{
    padding-top: 72px;
  }

  main.single-main .container{
    padding:0 24px;
  }

  .single-section1{

  }

  .single-section1 .main-view{
    height:calc(100vh - 72px);
    height: calc(var(--vh, 1vh) * 100 - 72px);
    min-height:500px;
    padding-bottom: 56px;
  }


  .single-section1 .frame{
    width:100%;
  }

  .single-section1 .place{
    margin-bottom: 24px;
    font-size: 17px;
    line-height: 1;
    color: #fff;
  }

  .single-section1 h1{
    font-weight: normal;
    font-size: 20px;
    line-height: 1.8;

  }

  .single-section2{
    padding:56px 0;
  }

  .single-section2 .flex{
    display: flex;
    flex-direction: column;
    align-items:flex-start;
  }

  .single-section2 .flex .left{
    width:70%;
    max-width:500px;
    margin-bottom: 24px;
  }

  .single-section2 .left img.prof-img{
    width:100%;
  }

  .single-section2 .right{
    width:100%;
    max-width:500px;
    padding-left:0;
    padding:0 24px;
    margin:0 auto;
  }

  .single-section2 .text-frame{
    width:100%;
  }

  .single-section2 .place{
    display: none;
  }

  .single-section2 .shop{
    /* margin-bottom: 12px; */
    font-size: 22px;
    line-height: 1.5;
    color: #222;

  }

  .single-section2 .name{
    font-size: 22px;
    line-height: 37px;
    margin-bottom: 24px;
  }

  .single-section2 .name span{
    font-size: 28px;
    line-height: 37px;
    color: #222;
  }

  .single-section2 .prof{
    margin-bottom: 12px;
    font-size: 13px;
  }

  .single-section2 .text{
    font-size: 15px;
    line-height: 1.9;
    color: #696969;
  }

  .single-section3{
    padding:56px 0 20px;
    overflow: hidden;
  }

  .single-section3 .border{
    width: 65px;
    height: 1px;
    background: #d5d5d5;
    position: absolute;
    top:-56px;
    left:24px;
  }


  .single-block{

  }

  .single-block h2{
    font-weight: normal;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 32px;
  }

  .single-block p{
    line-height: 2;
    margin-bottom: 20px;
    font-size: 15px;
  }

  .single-block .wp-block-columns{
    margin-bottom: 24px;
    flex-direction: column;
  }

  .single-block .wp-block-columns .wp-block-column{
    width:100%;
  }

  .single-block .wp-block-cover{
    position: relative;
    margin-top: 32px;
    padding:32px 0;
  }

  .single-block .wp-block-cover .has-large-font-size{
    display: flex;
    align-items: center;
    position: relative;
    color:#222222;
    font-size: 21px!important;
    line-height: 1.6;
  }

  .single-block .wp-block-cover .has-large-font-size::after{
    width:85px;
    margin-left: 20px;
  }

  .single-block .wp-block-gallery{
    display: none!important;
  }


  .single-section4{
    padding:56px 0 100px;
  }

  .single-section4 .gal-open{
    height: 56px;
    border: 1px solid #212121;
    margin-bottom: 100px;
    position: relative;
  }

  .single-section4 .gal-open::after{
    content:"＋";
    font-size: 17px;
    line-height: 1;
    font-family: 'Shippori Mincho', serif;
    position: absolute;
    right:16px;
    top:18px;
    bottom:0;
    margin:auto;
  }

  .single-section4 .gal-open p.p1{
    margin-right:0;
    font-size: 15px;
    line-height: 1;
    color: #222;
  }

  .single-section4 .gal-open p.p2{
    display: none;
  }

  .single-section4 p.sns-text{
    margin-bottom: 44px;
    font-size: 17px;
  }

  .single-section4 .sns-flex{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .single-section4 .sns-flex a{
    width: 223px;
    height: 41px;
    margin:0 0 24px;
  }

  .single-section4 .sns-flex a img{
    width: 100%;
    height: 100%;
  }

  .single-section4 .pop-up{
    /* opacity: 1;
    pointer-events:auto; */
  }

  .single-section4 .pop-up.show{

  }

  .single-section4 .frame{
    width: 90vw;
    /* max-width: 400px; */
    max-height:60vh;
    height: 115vw;
    min-height: 380px;
    padding-top: 85px;
  }

  .single-section4 .frame img.pop-close{
    width:24px;
    top:14px;
    right:20px;
  }

  .single-section4 .frame .thumb{
    width:67vw;
    height:54vw;
  }

  .single-section4 .frame .button-flex{
    bottom:24px;
  }

  .single-section4 .frame .button-flex .center{
    margin:0 48px;
    font-size: 15px;
    line-height: 1;
    color: #222;
  }


  .single-section4 .frame .button-flex img{
    width:19px;
  }


  .single-section5{
    padding:48px 0 118px;
    background-color: #F1F1F1;
  }

  .single-section5 p.p1{
    margin-bottom: 8px;
  }

  .single-section5 h2{
    margin-bottom: 48px;
  }

  .single-section5 .swiper-frame{

  }

  .single-section5 .swiper-container{
    max-width:310px;
    margin:0 auto;
  }

  .single-section5 .swiper-slide{
    margin:0 12px;
  }

  .single-section5 .swiper-pagination{
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
  }

  .single-section5 .swiper-pagination-bullet{
    width: 11px;
    height: 11px;
    background: #b5b5b6;
    border-radius: 50%;
    margin:0 14px;
    opacity: 1;
  }

  .single-section5 .swiper-pagination-bullet-active{
    pointer-events: none;
    background-color:#231815;
  }



}/*@media(max-width:999px){*/