/* =====================================
  top
===================================== */
@media screen and (max-width: 1620px){
  footer .footer-grid{
    grid-template-columns: calc(100% / 12 * 3) calc(100% / 12 * 9);
  }
}
@media screen and (max-width: 1600px){
  #site-header, .booking-btn{
	display: none;
  }
  .top-news .container, .container, 
  .top-store .container,
  .top-base .container{
        max-width: 90%;
    }
  
}
@media screen and (max-width: 1600px){
      .footer-grid .footer-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 20px;
    }
}
@media screen and (max-width: 1205px){
  footer .footer-grid{
    grid-template-columns: calc(100% / 12 * 4) calc(100% / 12 * 8);
  }
}
@media screen and (max-width: 1200px){
  #site-header, .booking-btn{
	display: none;
  }
  .logo-sp a img{
    width: 3%;
  }
  .top-store .top-store-text::after{
    display: none;
  }
  
}
@media screen and (min-width: 1601px){
  #site-header-sp{
	display: none;
  }
}
@media screen and (max-width: 1000px){
  #site-header, .booking-btn{
	display: none;
  }
  .top-about .top-about-grid{
  	grid-template-columns: 1fr;
  }
  .top-about .top-about-grid .top-about-text {
    margin-bottom: 5rem;
  }
  .top-new-guest-guide .container{
  	padding: 3rem 2.5rem 4rem;
  }
  .top-news-grid .top-news-text .view-more{
    width: 90%;
    display: block;
    padding-right: 0rem;
  }
  .top-menu .container {
    max-width: 100%;
  }
  .menu.top-template::before {
    background-position: left;
    background-position: 25%;
  }
  .footer-grid .footer-nav ul{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
  }
  .top-sns .container {
    max-width: 95%;
}
}
@media screen and (max-width: 900px){
  .top-contact-grid {
        grid-template-columns: 1fr;
    }
  .slide-text {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 800px){
      footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 768px){
  .container{
    max-width: 90%;
  }
  .slide-text{
	font-size: 1.8rem;
    
  }
  .slide-text02 p{
    font-size: 1.2rem;
  }
  .top-about-grid .top-about-img::before{
  	display: none;
  }
  .top-about .top-about-grid .top-about-text {
    margin-bottom: 0rem;
  }
  .top-seawater .top-seawater-text::before{
  	width: 150px;
    height: 150px;
    bottom: -9rem;
    left: -15rem;
  }
  .top-news .top-news-grid{
    grid-template-columns: 1fr;
  }
  .top-news-grid .top-news-text{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .top-news-grid .top-news-list ul li a{
    padding: 2rem 0 2rem 2rem;
  }
  .top-store .top-store-grid{
    grid-template-columns: 1fr;
  }
  .top-store .top-store-text::after{
    display: inline-block;
    width: 90px;
    height: 215px;
    top: 100%;
    right: .5rem;
  }
  .top-base-grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .top-contact .container{
    max-width: 90%;
  }
  .top-contact-grid{
    gap: 20px;
  }
  footer .footer-grid{
    /*grid-template-columns: calc(100% / 12 * 4) calc(100% / 12 * 8);*/
  }
  .top-sns .container .container{
    max-width: 100%;
  }
}
@media screen and (max-width: 500px){
  .container{
    max-width: 95%;
  }
  .top{
    margin-top: 2.5rem;
  }
  .slide-text{
    padding: 1rem 2rem 1rem 1.5rem;
    bottom: 19%;
  }
  .slide-text h1{
  	line-height: 1.5;
  }
  .slide-text02{
    right: unset;
    left: 15px;
    bottom: 4%;
  }
  .top-pc{
  	display: none;
  }
  .swiper-wrap{
  	max-width: 95vw;
  }
  .top-about-grid .top-about-text .top-about-title{
  	margin-bottom: 2.5rem;
  }
  .top-about .top-about-grid .top-about-text > h3, 
  .top-about .top-about-grid .top-about-text > p{
  	margin-bottom: 1.5rem;
  }
  .top-about .top-about-grid .top-about-text > h3{
    font-size: 2rem;
  }
  .top-new-guest-guide .container{
  	max-width: 90%;
  }
  .top-new-guest-guide, .top-new-guest-guide::before{
  	height: 763px;
  }
  .top-seawater{
  	align-items: start;
  }
  .top-seawater, .top-seawater::before{
  	height: 1127px;
  }
  .top-seawater .top-seawater-text::before{
  	width: 250px;
    height: 250px;
    bottom: -29rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .top-seawater .top-seawater-text{
    max-width: 95%;
  	margin-top: 25rem;
  }
  .genre-pc{
  	display: none;
  }
  .top-menu .container{
  	max-width: 75%;
  }
  .genre-first{
  	display: flex;
  	justify-content: center;
  }
  .genre-second{
  	display: flex;
  	justify-content: space-between;
  }
  .genre-first a, .genre-second a{
  	font-family: NotoSerifJP-SemiBold, NotoSerifJP-Regular, LibreBaskerville, serif;
    font-size: 1.6rem;
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(90deg, #fff, #eae3d6 40%);
    border-radius: 50%;
    border: 1px solid #2C3E50;
  }
  .top-news .container{
    max-width: 90%;
  }
  .top-store .top-store-grid{
    gap: 50px;
  }
  .top-store .top-store-text::after{
    width: 70px;
    height: 160px;
    top: 125%;
    right: .5rem;
  }
  .top-base-grid .top-base-text a{
    padding: 1.5rem 0;
    width: 100%;
        text-align: center;
  }
  .top-contact-grid{
    grid-template-columns: 1fr;
  }
  footer{
    overflow: hidden;
    padding: 2.8rem 3rem 1.5rem 3rem;
  }
  footer .container {
        max-width: 100%;
    }
  footer .footer-grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-grid .footer-nav ul{
    flex-direction: column;
    align-items: start;
  }
  .footer-grid .footer-nav ul li a p{
    align-items: start;
  }
  footer .pagetop {
    position: relative;
  }
  footer .pagetop a{
    bottom: 40px;
    right: 10%;
  }
  footer .pagetop .vertical-text{
    text-orientation: unset;
    font-size: 1.4rem;
  }
  .top-sns-text a::before{
    width: 25px;
    height: 25px;
    top: 55%;
    left: 15%;
  }
  .logo-sp a span{
    font-size: 1.8rem;
  }
  .top-sns{
    padding: 4rem 0;
  }
  .top-about-grid .top-about-img{
    padding-left: 0rem;
    margin-top: 4rem;
  }
  .top-menu-text .top-menu-title h3, 
  .top-newguest-text .top-newguest-title h3, .top-news-grid .top-news-text .top-news-title h3, .top-store-grid .top-store-text .top-store-title h3, 
  .top-contact-grid .top-contact-reserve .top-contact-title h3, .top-contact-grid .top-contact-contact .top-contact-title h3{
    font-size: 3rem;
  }
  .top-menu{
    align-items: normal;
    height: 820px;
    max-height: none;
    padding-top: 6rem;
    background-image: linear-gradient(90deg, #fff, #D8C9AE 50%);
  }
  .top-menu::before{
    height: 820px;
    max-height: none;
    background-size: contain;
    background-position: bottom;
    z-index: 0;
  }
  .top-sns-text h3{
    font-size: 3.2rem;
  }
  .top-seawater-text > h3::before{
    left: 0px;
  }
  .top-seawater-text > h3::after{
    width: 57px;
    right: 10px;
  }
  .top-store .container{
    max-width: 95%;
  }
  .top-base-grid .top-base-text h2{
    font-size: 4.8rem;
  }
  .top-base-grid .top-base-text h3{
    font-size: 2rem;
  }
  .top-contact-grid .hotpepper-btn a span:first-child, .top-contact-grid .hotpepper-btn a span:last-child{
    font-size: 2rem;
  }
  .top-contact-grid .hotpepper-btn a, .top-contact-grid .tel-btn a, 
  .top-contact-grid .line-btn a{
    width: 30rem;
  }
  footer .copyright p{
    font-size: 1.4rem;
    text-align: start;
  }
  .top-sns .container,.top-base .container{
    max-width: 95%;
  }
}
@media screen and (max-width: 350px){
  .top-contact-grid .hotpepper-btn a span:first-child, .top-contact-grid .hotpepper-btn a span:last-child{
    font-size: 1.75rem;
  }
  .top-contact-grid .line-btn a span:first-child,
  .top-contact-grid .line-btn a span:last-child {
    font-size: 1.8rem;
  }
  .top-contact-grid .hotpepper-btn a, .top-contact-grid .tel-btn a, 
  .top-contact-grid .line-btn a{
    width: 27rem;
  }
  .top-menu .container{
  	max-width: 85%;
  }
}

@media screen and (min-width: 501px){
  .top-sp{
	display: none;
  }
  .genre-sp{
    display: none;
  }
}


/* =====================================
      ABOUT
===================================== */
@media screen and (max-width: 1200px){
  .about-top02-grid .about-top02-text::after{
    display: none;
  }
}
@media screen and (max-width: 1000px){
  .about-service .about-service-text{
    margin-bottom: 10rem;
  }
  .about-product-background::before {
    background-position: left;
    background-position: 30%;
  }
  .about-product-grid .about-product-card:last-child .about-product-text02 .cart-btn a span {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 900px){
  .top-template .top-template-text{
    left: 5rem;
  }
  .about-top02 .about-top02-grid{
    grid-template-columns: 1fr;
    margin-left: 0rem;
    background-image: unset;
  }
  .about-top02-grid .about-top02-text{
    background-image: linear-gradient(90deg, #eae3d6, #fff 100%);
    border-radius: 9999px 0 0 9999px;
    padding: 8rem;
  }

  .about-top02-grid .about-top02-text blockquote br{
    display: none;
  }
  .about-top02-grid .about-top02-text::after{
    width: 120px;
    height: 200px;
    bottom: -10rem;
    right: 20px;
  }
  .about-top02-img{
    margin-top: -4rem;
  }
  .about-top02-grid .about-top02-img figure{
    display: flex;
    justify-content: center;
  }
  .about-top02-grid .about-top02-img figure img{
    position: static;
  }
  .backtitle{
    font-size: 20rem;
  }
  .about-service .con02.container{
    max-width: 90%;
  }
  .about-service .about-service-grid .about-service-text02{
    padding: 0 4rem;
  }
  .about-product-background .about-product-text{
    right: 5rem;
  }
}
@media screen and (max-width: 768px){
  .top-template, .top-template::before{
    height: 60vh;
  }
  .top-template .top-template-text h1{
    /*font-size: 3rem;*/
  }
  .top-template .top-template-text span{
    /*font-size: 1.3rem;*/
  }
  .backtitle{
    font-size: 10rem;
  }
  .about-service{
    padding-top: 6rem;
  }
  .about-service .about-service-grid .about-service-text02{
    padding: 0 1rem;
  }
  .about-product-background, .about-product-background::before{
    height: 60vh;
  }
  .about-product-background::before{
    background-position: left;
  }
  .about-product-background .about-product-text{
    right: 0;
    background-image: linear-gradient(90deg, #fff, #eae3d6 80%);
    border-radius: 8px 0 0 8px;
    bottom: 10px;
    top: unset;
    transform: unset;
    padding: 2rem;
  }
  .about-product-background .about-product-text h2{
    font-size: 1.4rem;
  }
  .about-product-background .about-product-text h2 span{
    font-size: 2rem;
  }
  .about-product{
    margin: 12rem 0 10rem;
  }
  .about-product .about-product-backtitle{
    top: -9rem;
  }
  .about-product .about-product-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 700px){
  .top-template .top-template-text h1{
    font-size: 3rem;
  }
  .top-template .top-template-text span{
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 500px){
  .top-template{
    margin-top: 6rem;
  }
      .top-template, .top-template::before {
        height: 366px;
    }
  .top-template .top-template-text{
    left: 2rem;
    top: 30%;
    transform: unset;
  }
  .top-template::before{
    background-image: url("../img/about/top-sp01.png");
  }
  .about-top02-grid .about-top02-text{
    padding: 5rem 2rem 20rem;
  }
  .about-top02-img{
    margin-top: -17rem;
  }
  .about-top02 {
    margin: 2.5rem 0;
  }
  .backtitle{
    font-size: 9.6rem;
  }
  .about-service .about-service-backtitle{
    top: 0;
  }
  .about-service .about-service-text p br{
    display: none;
  }
  .about-service .about-service-text{
    margin-bottom: 3rem;
  }
  .about-service .about-service-text .about-service-title{
    margin-bottom: 2rem;
  }
  .about-service .about-service-imgcontainer{
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 95%;
  }
  .about-service .about-service-imgcontainer figure img, 
  .about-service .about-service-imgcontainer figure:last-child img{
    width: 80%;
    position: static;
  }

  .about-service .about-service-imgcontainer figure:last-child{
    display: flex;
    justify-content: flex-end;
  }
  .about-service .about-service-grid:not(:last-child){
    margin: 4rem 0;
  }
  .about-service .about-service-grid{
    grid-template-columns: 1fr;
    background-image: linear-gradient(270deg, #eae3d6, #fff 100%);
    border-radius: 9999px;
    gap: 50px;
    padding: 7rem 0;
  }
  .about-service .about-service-grid:not(:first-child){
    gap: 0;
  }
  .about-service .about-service-grid .about-service-img figure{
    justify-content: center;
  }
  .about-service .about-service-grid .about-service-text02{
    background-image: unset;
    padding: 0 5rem;
  }
  .about-product-background::before{
    background-image: url("../img/about/product-sp01.png");
    background-position: center;
    background-position: auto;
  }
  .about-product-background, .about-product-background::before {
        height: 412px;
  }
  .about-product{
    margin: 10rem 0 10rem;
  }
  .about-product .about-product-backtitle{
    top: -6rem;
  }
  .about-product .about-product-grid{
    grid-template-columns: 1fr;
  }
  .about-product-grid .about-product-card .about-product-text02 {
    margin-bottom: 4rem;
  }
  .about-product-grid .about-product-card .about-product-text02 h4{
    font-size: 1.6rem;
  }
  .about-product-grid .about-product-card .about-product-text02 p{
    font-size: 1.2rem;
  }
  .top-about-grid .top-about-text .top-about-title h3{
    font-size: 3rem;
  }
  .about-top02-grid .about-top02-img figure{
    justify-content: flex-end;
    position: relative;
  }
  .about-top02-grid .about-top02-img figure img{
    width: 95%;
  }
  
  .about-top02 .about-top02-grid{
    gap: 10px;
  }
  .about-top02-grid .about-top02-img figure::after{
    content: "";
    width: 111px;
    height: 187px;
    background-image: url(../img/top/about01.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -6rem;
    right: 10px;
    z-index: 1;
  }
  .about-top02-grid .about-top02-text h4{
    font-size: 2rem;
  }
  .about-service .about-service-text .about-service-title h3, 
  .about-product .about-product-text .about-product-title h3{
    font-size: 3rem;
  }
  .about-product-background .about-product-text h2 span{
    font-size: 1.8rem;
  }
  .about-product-background .about-product-text h2{
    font-size: 1.6rem;
  }
  .about-top02-img501{
    display: none!important;
  }
}
@media screen and (max-width: 350px){
  .about-top02-grid .about-top02-text h4 {
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 501px){
  .about-top02-img500{
    display: none!important;
  }
}

/* =====================================
      SEAWATER
===================================== */
@media screen and (min-width: 1921px){
  .seawater-effect::before{
    background-position: top center;
  }
}
@media screen and (max-width: 2000px){
  .seawater.top-template img{
    width: 50%;
  }
}
@media screen and (max-width: 1920px){
  .seawater-effect-text .seawater-effect-circle::before{
    width: 500px;
    height: 500px;
  }
}
@media screen and (max-width: 1600px){
  .seawater-effect .seawater-effect-text02{
    bottom: 5%;
  }
}
@media screen and (max-width: 1500px){
  .top-template .top-template-text{
    left: 10rem;
  }
}
/*@media screen and (max-width: 1450px){
  .seawater-effect .seawater-effect-text02{
    bottom: 15%;
  }
}*/
@media screen and (max-width: 1300px){
  .seawater-effect-text h4{
    font-size: 1.8rem;
  }
  .seawater-effect-text h4 span{
        font-size: 3rem;
  }
  .seawater-effect-text .seawater-effect-circle::before {
        width: 425px;
        height: 425px;
    }
  .seawater-effect .seawater-effect-text02{
    bottom: 7%;
  }
      .top-template .top-template-text {
        left: 5rem;
    }
  .seawater.top-template img {
        width: 45%;
    }
}
@media screen and (max-width: 1100px){
  .top-template .top-template-text{
    transform: none;
    top: 20%;
    left: 20%;
  }
  .seawater.top-template img{
    transform: translateX(50%);
    right: 50%;
    top: unset;
    bottom: 5%;
    width: 60%;
  }
  .seawater-effect .seawater-effect-text02 {
    bottom: 5%;
    padding: 2rem 2.2rem;
  }
  .seawater-effect .seawater-effect-text02 blockquote {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 1000px){
  .seawater-flow .seawater-flow-grid{
    grid-template-columns: 1fr;
  }
  .seawater-flow-img{
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
  }
  .seawater-effect .seawater-effect-text02 {
    bottom: 10%;
  }
  .seawater-flow-img figure:first-child img, 
  .seawater-flow-img figure:last-child img{
    position: static;
  }
  .seawater-flow-img figure:first-child{
    order: 2;
    margin-left: 2rem;
  }
  .seawater-flow-img figure:first-child img{
    margin-top: -10rem;
    width: 50%;
  }
  .seawater-flow-img figure:last-child{
    order: 1;
    display: flex;
    justify-content: flex-end;
  }
  .seawater-flow-img figure:last-child img{
    width: 50%;
  }
}
@media screen and (max-width: 768px){
  .seawater-detail .seawater-detail-text .seawater-detail-title h2::before{
    width: 35px;
    height: 35px;
    bottom: -10px;
    right: 8rem;
  }
  .seawater-detail .seawater-detail-text .seawater-detail-title h2::after{
    right: 1rem;
  }
  .seawater-effect::before{
    height: 75vh;
  }
  .seawater-effect .seawater-effect-text02 blockquote br{
    display: none;
  }
  .seawater-effect .seawater-effect-text02{
    width: 55%;
  }
}
@media screen and (max-width: 500px){
  .seawater.top-template img{
    width: 75%;
    top: unset;
    bottom: 25px;
    right: unset;
    left: 50%;
    transform: translateX(-50%);
  }
  .seawater.top-template .top-template-text{
    left: 3rem;
    top: 20%;
  }
  .seawater-detail .seawater-detail-text .seawater-detail-title h2{
    padding: 3rem 7rem 3rem 2rem;
  }
  .seawater-detail .container > p br{
    display: none;
  }
  .seawater-detail .seawater-detail-background::before{
    top: -38%;
  }
  .bubble01 img{
    width: 5%;
    top: 6rem;
    right: 3rem;
  }
  .bubble02 img{
    width: 5%;
    bottom: unset;
    top: 10.5rem;
  }
  .seawater-detail .seawater-detail-grid{
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 4rem;
  }
  .seawater-effect-text .seawater-effect-circle::before{
    width: 350px;
    height: 350px;
  }
  .seawater-effect .seawater-effect-text02{
    width: 90%;
  }
  .seawater-effect{
    height: 972px;
  }
  .seawater-effect::before {
    height: 402px;
    background-image: url("../img/seawater/effect02.png");
  }
  .seawater-effect .seawater-effect-text02 {
    width: 90%;
    bottom: 15px;
  }
  .top-seawater-text .top-seawater-title h3,.seawater-effect-text .seawater-effect-title h3{
    font-size: 3rem;
  }
  .top-seawater-text > h3{
    font-size: 1.6rem;
  }
  .top-seawater-text > h3 span{
    font-size: 2.4rem;
  }
  .seawater-detail .seawater-detail-text .seawater-detail-title h2 span{
    font-size: 3.2rem;
  }
  .seawater-effect-text h4{
    font-size: 1.6rem;
  }
  .seawater-effect-text h4 span{
    font-size: 2.4rem;
  }
  .seawater-flow{
    margin-top: 10rem;
  }
  .seawater-flow .seawater-flow-backtitle{
    top: -8rem;
  }
  .seawater-flow .container{
    max-width: 90%;
  }
  .seawater-flow-card ol li h4{
    flex-direction: column;
    align-items: flex-start;
  }
  .seawater-flow-card ol li h4 span{
    font-size: 3.2rem;
  }
  .seawater-flow-card ol li h4 p{
    font-size: 2rem;
  }
}
@media screen and (max-width: 350px){
  .seawater-detail .seawater-detail-text .seawater-detail-title h2 span{
    font-size: 2.6rem;
  }
}

@media screen and (min-width: 1920px){
  .top-seawater .top-seawater-text::after{
    width: 600px;
    height: 600px;
  }
}

/* =====================================
      MENU
===================================== */
@media screen and (max-width: 1800px){
  .menu-list-card .menu-list-text ol li .menu-name, .menu-date-nember{
    font-size: 2rem
  }
}
@media screen and (max-width: 1600px){
  /*.menu-list-card .menu-list-text ol li .menu-name{
    flex-direction: column;
    gap: 10px;
        margin-bottom: 1.2rem;
  }*/
  .menu-list .container{
    margin: 0 auto;
  }
  .menu-list .menu-list-grid{
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 1rem;
  }
}
@media screen and (max-width: 1200px){
  .menu-list-img figure{
    display: none;
  }
}
@media screen and (min-width: 1201px){
  .menu-thumbnail-sp{
    display: none;
  }
}
@media screen and (max-width: 500px){
  .menu.top-template::before {
    background-image: url(../img/menu/top-sp01.png);
  }
  .menu.top-template, .menu.top-template::before {
    height: 50vh;
  }
}
/*@media screen and (max-width: 768px){
  .menu-list .container{
    margin: 0 auto;
  }
  .menu-list .menu-list-grid{
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 1rem;
  }
  .menu-list-img figure{
    display: none;
  }
}*/
/*@media screen and (min-width: 769px){
  .menu-thumbnail-sp{
    display: none;
  }
}*/
@media screen and (max-width: 710px){
  .menu-list-card .menu-list-text ol li .menu-name{
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.2rem;
  }
  .menu-date-nember{
    display: none;
  }
  .menu-date-nember-sp[data-empty="true"] {
    display: none;
  }
}
@media screen and (min-width: 711px){
  .menu-date-nember-sp{
    display: none;
  }
}

@media screen and (max-width: 500px){
  .menu-list-card .menu-list-text ol li .menu-name{
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.2rem;
  }
  .menu-list .menu-list-text .menu-list-title h3{
    font-size: 3rem;
  }
  .menu-list-card .menu-list-text h5{
    font-size: 2rem;
  }
  .menu-list-card .menu-list-text ol li .menu-name{
    font-size: 2rem;
  }
  .menu-list .menu-list-grid:last-child{
    margin-bottom: 0;
  }
  .menu-thumbnail-sp img{
    height: auto;
    max-height: 400px;
    border-radius: 5px;
  }
}
/* =====================================
      NEW GUEST GUIDE
===================================== */
@media screen and (max-width: 900px){
  .ngg-htu .container{
    padding: 3rem 2rem 4rem;
  }
  .ngg-reservation-card > p{
    padding: 0 2rem 3rem 3rem;
  }
  .ngg-nftd .ngg-nftd-c.container {
    max-width: 70%;
  }
}
@media screen and (max-width: 768px){
  .ngg-htu .container {
    max-width: 80%;
  }
  .ngg-htu-text blockquote{
    padding: 2.5rem 3rem;
  }
  .ngg-reservation .ngg-reservation-backtitle{
    top: -9rem;
  }
  .ngg-reservation{
    margin-top: 10rem;
  }
  .ngg-nftd .ngg-nftd-c.container{
    max-width: 65%;
  }
}
@media screen and (max-width: 500px){
  .ngg-htu, .ngg-htu::before{
    height: 1245px;
  }
  .ngg-htu .ngg-htu-backtitle{
    top: 4.5rem;
  }
  .ngg-htu .ngg-htu-backtitle .backtitle{
    font-size: 7rem;
  }
  .ngg-htu .container {
    max-width: 90%;
  }
  .ngg-htu-text .ngg-htu-pdf-download{
    flex-direction: column;
  }
  .ngg-htu-text .ngg-htu-pdf-download a{
    width: 100%;
  }
  .ngg-reservation .ngg-reservation-grid, .ngg-nftd-grid{
    grid-template-columns: 1fr;
  }
  .ngg-nftd-grid{
    margin-top: 2rem;
  }
  .ngg-reservation-img{
    margin-top: 3rem;
  }
  .ngg-reservation-img img{
    position: static;
    width: 100%;
  }
  .ngg-nftd .ngg-nftd-c.container{
    max-width: 80%;
  }
  .ngg-nftd{
    margin-bottom: 5rem;
  }
  .ngg-htu-text .ngg-htu-title h3, 
  .ngg-reservation-text .ngg-reservation-title h3{
    font-size: 3rem;
  }
  .ngg-htu-text .ngg-htu-pdf .ngg-htu-pdf-title span:first-child{
    font-size: 1.8rem;
  }
  .ngg-reservation-card ol li a{
    flex-direction: column;
    align-items: flex-start;
  }
  .ngg-reservation-card ol li a span, 
  .ngg-nftd-grid .ngg-nftd-card p{
    font-size: 3.2rem;
  }
  .ngg-reservation-card ol li a p{
    font-size: 2rem;
    padding-right: 2rem;
  }
}
@media screen and (min-width: 501px){
  .ngg.top-template .top-template-text h1 br{
    display: none;
  }
}

/* =====================================
      STORE
===================================== */
@media screen and (max-width: 1400px){
  .store-access-flex{
    grid-template-columns: 1fr;
  }
  .store-access-img figure img{
    max-height: unset;
  }
}
@media screen and (max-width: 1200px){
  .store-store-list ol li span:first-child{
    padding: 2rem 0 2rem 2rem;
  }
  .store-staff-grid{
    gap: 20px;
  }
  .store-access-flex{
    gap: 30px;
  }
}
@media screen and (max-width: 1000px){
  .store.top-template::before {
    background-position: 75%;
  }
  .store-message .store-message-grid {
    display: block;
    padding-top: 14rem;
  }
  .store-message .store-message-backtitle .backtitle{
    font-size: 20rem;
  }
  .store-message-grid .store-message-card{
    margin-top: 8rem;
  }
  .store-message-card .store-message-text::after{
    width: 118px;
    height: 200px;
    right: -5rem;
  }
  .store-access .container{
    max-width: 95%;
  }
}
@media screen and (max-width: 768px){
  .store-message-card .store-message-text::after{
    display: none;
  }
  .store-message .container{
    margin: 0 auto;
  }
  .store-message .store-message-grid{
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 0rem;
  }
  .store-message-img{
    display: none;
  }
  .store-message .store-message-backtitle .backtitle{
    font-size: 10rem;
  }
  .store-message .store-message-backtitle{
    right: unset;
    left: 2rem;
    top: -2rem;
  }
  .m-text-pc{
    display: none;
  }
  .store-store-list ol li{
    grid-template-columns: calc(100% / 12 * 2.5) calc(100% / 12 * 9.5);
  }
  .store-access .container{
    max-width: 90%;
    margin: 0 auto;
  }
  .store-access-flex{
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 769px){
  .m-text-sp{
    display: none;
  }
}
@media screen and (max-width: 500px){
  .store.top-template::before {
    background-image: url(../img/store/top-sp01.png);
    background-position: bottom;
  }
  .store.top-template .top-template-text{
    top: 20%;
  }
  .store-message-card .store-message-title{
    margin-left: 0;
  }
  .store-message-card .m-text-sp.store-message-text blockquote, .store-message-card .m-text-sp.store-message-text h5 {
    padding: 0 2rem;
  }
  .store-message .store-message-backtitle .backtitle{
    font-size: 6rem;
  }
  .store-message .store-message-backtitle{
    top: 2rem;
  }
  .store-message {
    margin: 0;
  }
  .m-text-sp figure::after{
    width: 77px;
    height: 130px;
  }
  .m-text-sp figure{
    margin: 6rem 0 1rem;
  }
  .store-store-list ol li{
    grid-template-columns: calc(100% / 12 * 3) calc(100% / 12 * 9);
  }
  .store-store-list ol li span {
    font-size: 1.4rem;
  }
  .store-store-list ol li span:first-child {
    padding: 2rem 0 2rem 1rem;
  }
  .store-store-list ol li span:last-child{
    padding: 1rem 0 1rem 1rem;
  }
  .store-store {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .store-staff-grid{
    grid-template-columns: 1fr;
  }
  .ss-name span{
    margin-bottom: 1rem;
  }
  .store-message-card .store-message-text h5{
    font-size: 2rem;
  }
  .store-message-card .store-message-title h3, 
  .store-store .store-store-title h3, 
  .store-staff .store-store-title h3, 
  .store-access .store-store-title h3{
    font-size: 3rem;
  }
  .store-access-map p, 
  .ss-name span{
    font-size: 2rem;
  }
}
@media screen and (max-width: 500px){
  .store-store-list ol li span {
    font-size: 1.2rem;
  }
}

/* =====================================
      NEWS-LIST ・ detail
===================================== */
@media screen and (max-width: 768px){
  .newslist-grid{
    grid-template-columns: 1fr;
    margin-bottom: 6rem;
    gap: 25px;
  }
  .newslist .container .container {
    max-width: 100%;
  }
  .newslist-card{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 15px;
  }
  .newslist-card a figure img{
    height: 11rem;
    object-fit: cover;
  }
  .news-detail p{
    padding-right: 0;
  }
}
@media screen and (max-width: 500px){
  .newslist-card a figure img{
    object-fit: contain;
    height: 9rem;
  }
  .newslist-grid{
    gap: 10px;
  }
  .newslist-title {
    margin-bottom: 4rem;
  }
  .newslist{
    margin-top: 10rem;
  }
  .newslist-title.title-deco01 h3{
    font-size: 3rem;
  }
  #sb_instagram.sbi_col_10 #sbi_images, #sb_instagram.sbi_col_10.sbi_mob_col_auto #sbi_images, #sb_instagram.sbi_col_3 #sbi_images, #sb_instagram.sbi_col_3.sbi_mob_col_auto #sbi_images, #sb_instagram.sbi_col_4 #sbi_images, #sb_instagram.sbi_col_4.sbi_mob_col_auto #sbi_images, #sb_instagram.sbi_col_5 #sbi_images, #sb_instagram.sbi_col_5.sbi_mob_col_auto #sbi_images, #sb_instagram.sbi_col_6 #sbi_images, #sb_instagram.sbi_col_6.sbi_mob_col_auto #sbi_images, #sb_instagram.sbi_col_7 #sbi_images, #sb_instagram.sbi_col_7.sbi_mob_col_auto #sbi_images, #sb_instagram.sbi_col_8 #sbi_images, #sb_instagram.sbi_col_8.sbi_mob_col_auto #sbi_images, #sb_instagram.sbi_col_9 #sbi_images, #sb_instagram.sbi_col_9.sbi_mob_col_auto #sbi_images, #sb_instagram.sbi_mob_col_1 #sbi_images{
    grid-template-columns: repeat(4, 1fr)!important;
  }
}

/*----------------------------
   MW WP Form
----------------------------*/
@media screen and (min-width: 1001px){
  .contact-form .koumoku .koumoku-text span:first-child br{
    display: none;
  }
}
@media screen and (max-width: 1000px){
  .contact-form .koumoku .koumoku-text span:first-child {
    font-size: 1.5rem;
  }
  .koumoku-input.m-textarea .null {
    width: 100%;
  }
}
@media screen and (max-width: 900px){
  .newslist.contactor .container .container {
    max-width: 90%;
  }
}
@media screen and (max-width: 768px){
  .newslist.contactor .container .container {
    max-width: 100%;
  }
}
@media screen and (max-width: 500px){
  .contact-form .koumoku{
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 2.8rem 0 6rem 0rem;
  }
  .contact-form .koumoku.post{
    row-gap: 15px;
  }
  .contact-form .koumoku.post .koumoku-sp{
    margin-top: 5rem;
  }
  .privacy-container {
    max-width: 100%;
  }
  .privacy-check{
    flex-direction: column;
    align-items: start;
    gap: 0;
  }
  .p-entry__flow-text {
    font-size: 1.8rem;
  }
  .reservation-title h3{
    font-size: 3rem;
  }
}
@media screen and (min-width: 501px){
  .complete-text h3 br{
    display: none;
  }
}