@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 600px){
  .tategaki {
    font-size: 2rem;
  }
}
@media screen and (min-width: 769px){
  
}
@media screen and (min-width: 1200px){
  
}
@media screen and (max-width: 1920px){
  .container{
    max-width: 100%;
  }
}
@media screen and (min-width: 2400px){
  
  
}

/*-----------------------------
        header
------------------------------*/
@media screen and (max-width: 1500px){
  header nav{
    grid-template-columns: 1fr 2.5fr;
  }
}
@media screen and (min-width: 1001px){
  .menu-wrap{
    display: none;
  }
}
@media screen and (max-width: 1000px){
  header #menu-toggle, 
  header #menu > ul{
    display: none;
  }
  header nav{
    height: 100px;
  }
}
@media screen and (max-width: 600px){
  header #logo figure{
    width: 100px;
    height: 115px;
  }
  header nav.navShadow #logo figure {
    width: 80px;
    height: 90px;
}
  header #brand{
    padding-left: 20px;
  }
  header #menu{
    padding-right: 20px;
  }
  .menu-wrap .hamburger{
    top: -30px;
  }
  .menu-wrap .toggler {
    top: -30px;
  }
}
@media screen and (max-width: 500px){
  .menu-wrap .toggler{
    width: 40px;
    height: 40px;
  }
  .menu-wrap .hamburger{
    width: 50px;
  }
}
@media screen and (max-width: 400px){
  header #logo figure {
        width: 84px;
        height: 98px;
    }
  header nav.navShadow #logo figure {
    width: 80px;
    height: 90px;
}
  header nav.navShadow #logo figure {
        width: 70px;
        height: 80px;
    }
}
/*-----------------------------
        headerここまで
------------------------------*/
/*-----------------------------
        top
------------------------------*/
@media screen and (max-width: 1000px){
  header, #hero-section{
    max-height: 800px;
  }
}
/*-----------------------------
        topここまで
------------------------------*/

/*-----------------------------
        concept
------------------------------*/
@media screen and (max-width: 1920px){
  .c-flex .c-text{
    min-width: 537px;
  }
  .c-img02{
    min-width: 864px;
  }
}
@media screen and (max-width: 1800px){
  .c-flex .c-text{
    min-width: 445px;
  }
  .c-img02{
    min-width: unset;
  }
  .c-img02 figure:first-child{
    display: flex;
    justify-content: flex-end;
  }
  .c-img02 figure:last-child{
    margin-left: -10rem;
  }
  .c-img02 figure img{
    max-width: 650px;
  }
}
@media screen and (max-width: 1600px){
  .tategaki {
    font-size: 2.8rem;
  }
  .c-tategaki{
    right: 8%;
  }
  .c-flex .c-tategaki{
    left: 8%;
  }
}
@media screen and (max-width: 1400px){
  .c-img02{
    width: 40%;
  }
  .tategaki {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 1200px){
  .c-img02{
    /*width: 40%;*/
  }
  .tategaki {
    font-size: 2.4rem;
  }
  .c-text blockquote{
    font-size: 1.6rem;
    line-height: 1.6;
  }
  .c-text{
    padding-left: 2rem;
  }
  .c-flex .c-tategaki {
    left: 3.5%;
  }
  .c-tategaki{
    top: -12rem;
  }
}
@media screen and (max-width: 1000px){
  .c-grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .c-text{
    padding-left: 0;
  }
  #concept .container{
    max-width: 95%;
    margin: 0 auto;
  }
  .c-grid .c-text blockquote{
    width: 100%;
  }
  .c-flex{
    flex-direction: column-reverse;
    margin-top: 5rem;
  }
  .c-flex .c-tategaki{
    top: -8rem;
    right: 15vw;
    left: unset;
  }
  .c-flex .c-text{
    flex-direction: row;
    min-width: 100%;
    gap: 3rem;
  }
  .c-flex .c-text blockquote, .award{
    width: 50%;
  }
  .award h3, .c-img02{
    width: 100%;
  }
  .c-img02 figure img{
    max-width: 100%;
  }
  .c-img02 figure:last-child{
    display: none;
  }
}
@media screen and (max-width: 750px){
  .c-flex .c-text{
    flex-direction: column;
  }
  .c-flex .c-text blockquote, .award{
    width: 100%;
  }
  .award h3{
    width: 50%;
  }
}

/*-----------------------------
        conceptここまで
------------------------------*/
/*-----------------------------
        pride
------------------------------*/
@media screen and (max-width: 1600px){
  .p-tategaki h1.tategaki{
    font-size: 5rem;
  }
  .p-tategaki p.tategaki{
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 1401px){
  .pc1400{
    display: none;
  }
}
@media screen and (max-width: 1400px){
  .p-text blockquote{
    font-size: 1.6rem;
  }
  .p-text h3{
    font-size: 2.4rem;
  }
  .p-text h3 span{
    font-size: 3.2rem;
  }
  .green.p-left .p-text blockquote{
    width: 390px;
  }
  .yellow.p-left .p-text blockquote{
    width: 480px;
  }
}
@media screen and (min-width: 1201px){
  .pc1200{
    display: none;
  }
}
@media screen and (max-width: 1200px){
  .p-text h3{
    font-size: 2.2rem;
  }
  .p-text h3 span{
    font-size: 3rem;
  }
  .p-tategaki h1.tategaki{
    font-size: 4rem;
  }
  .p-tategaki p.tategaki{
    font-size: 2rem;
  }
  .p-flex .p-left, .p-flex .p-right{
    width: 44%;
  }
  .yellow.p-left .p-text blockquote{
    width: 420px;
  }
  .green.p-left .p-text blockquote{
    width: 360px;
  }
  .yellow.p-left .p-text h3{
    width: 420px;
    text-align: start;
  }
  .yellow.p-left .p-text h3{
    border-bottom: none;
    position: relative;
  }
  .yellow.p-left .p-text h3::after{
    content: "";
    width: 150%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
}
@media screen and (min-width: 1001px){
  .pc1000{
    display: none;
  }
}
@media screen and (max-width: 1000px){
  #pride{
    padding: 5rem 0;
  }
  .p-tategaki{
    display: none;
  }
  #pride .container{
    max-width: 95%;
  }
  .p-flex{
    gap: 2.5rem;
    margin-bottom: 5rem;
  }
  .magin0.p-flex{
    margin-bottom: 0;
  }
  .p-flex .p-left, .p-flex .p-right{
    width: 50%;
  }
  .p-left .p-text{
    align-items: flex-start;
  }
  .p-left .p-text h3{
    text-align: start;
  }
  .p-flex .p-right{
    flex-direction: column-reverse;
  }
  /*.p-text h3 .pc1200, 
  .p-text blockquote .pc1400{
    display: none;
  }*/
  .yellow.p-left .p-text h3, 
  .yellow.p-left .p-text blockquote{
    width: 100%;
  }
  .yellow.p-left .p-text h3{
    border-bottom: 1px solid #fff;
  }
  .yellow.p-left .p-text h3::after{
    display: none;
  }
  .p-flex .p-right{
    padding-top: 0;
  }
  .p-flex .beige.p-right{
    justify-content: flex-end;
  }
  .yellow.p-left .p-text h3, 
  .beige.p-right .p-text h3{
    height: 80px;
  }
  .beige.p-right .p-text h3{
    display: flex;
        align-items: center;
        line-height: 1.3;
  }
}
@media screen and (max-width: 950px){
  .p-flex{
    flex-direction: column;
    gap: 4rem;
  }
  .p-flex .p-left, .p-flex .p-right{
    width: 100%;
  }
  .p-text h3 .pc1200, 
  .p-text blockquote .pc1400, 
  .green.p-left .p-text h3 .pc1000{
    display: none;
  }
  .yellow.p-left .p-text h3, 
  .beige.p-right .p-text h3{
    height: auto;
  }
  
}
@media screen and (max-width: 600px){
  .p-text blockquote .pc1400{
    display: block;
  }
}
@media screen and (max-width: 500px){
  .p-text h3 .pc1200, 
  .green.p-left .p-text h3 .pc1000{
    display: block;
  }
}

/*-----------------------------
        prideここまで
------------------------------*/

/*-----------------------------
        info
------------------------------*/
@media screen and (max-width: 1920px){
  #info .container .container{
    max-width: 75%;
  }
  
}
@media screen and (max-width: 1200px){
  #info .container .container{
    max-width: 85%;
  }
}
@media screen and (max-width: 1000px){
  .i-grid{
    grid-template-columns: 1fr;
  }
  .i-left{
    display: none;
  }
}
@media screen and (max-width: 750px){
  .i-right ul{
    width: 100%;
  }
  #info .container .container{
    max-width: 95%;
  }
  .i-right ul li a{
    flex-direction: column;
    gap: 3px;
  }
}

/*-----------------------------
        infoここまで
------------------------------*/

/*-----------------------------
        food-menu
------------------------------*/
@media screen and (max-width: 1920px){
  #food-menu .container{
    max-width: 95%;
  }
  .f-m-insta p{
    white-space: nowrap;
  }
}
@media screen and (max-width: 1800px){
  
}
@media screen and (max-width: 1600px){
  .f-m-grid{
    gap: 4rem;
  }
  .f-m-item ul li{
    min-width: 286px;
  }
}
@media screen and (max-width: 1400px){
  .f-m-grid{
    grid-template-columns: 1fr 2fr;
  }
  .f-m-img{
    display: none;
  }
}
@media screen and (max-width: 1100px){
  .f-m-grid{
    grid-template-columns: 1fr 1fr;
  }
  .teppan.f-m-row.f-m-item, 
  .nomimono.f-m-row.f-m-item{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .f-m-insta{
    display: none;
  }
  .teppan.f-m-item ul li{
    /*max-width: 320px;*/
  }
  .sp1100{
    display: none;
  }
  .f-m-text{
    height: 930px;
  }
  .f-m-left.f-m-text{
    justify-content: flex-start;
  }
}
@media screen and (max-width: 768px){
  .f-m-wrap {
    padding: 6rem 2.5rem;
  }
}
@media screen and (min-width: 701px){
  .f-m-grid{
    /*grid-template-columns: 1fr;*/
  }
  
  .f-m-item ul li span br{
    display: none;
  }
}
@media screen and (max-width: 700px){
  .f-m-item ul li{
    min-width: auto;
  }
  .f-m-text {
    height: 1010px;
  }
}
@media screen and (max-width: 500px){
  .f-m-item ul li{
    font-size: 1.6rem;
  }
  .f-m-name h5::before{
    width: 100%;
  }
  .f-m-name{
    font-size: 2.2rem;
  }
  .f-m-wrap{
    padding: 6rem 1rem;
    border: 1.5px solid #fff;
  }
  .f-m-grid {
    gap: 1.5rem;
  }
  
}
@media screen and (max-width: 400px){
  .nowrap{
    white-space: nowrap;
  }
  .f-m-grid {
    gap: 1rem;
  }
  .f-m-item{
    gap: 3rem;
  }
}

/*-----------------------------
        food-menuここまで
------------------------------*/

/*-----------------------------
        access
------------------------------*/
@media screen and (max-width: 1920px){
  #access .container{
    max-width: 95%;
  }
}

@media screen and (max-width: 1000px){
  .a-flex{
    width: 90%;
  }
}
@media screen and (max-width: 900px){
  .a-flex{
    width: 100%;
    gap: 2rem;
  }
  
  .a-flex .a-f-item.a-address{
    order: 1;
  }
  .a-flex .a-f-item.kotei{
    order: 2;
  }
  .a-flex .a-f-item:nth-child(3){
    order: 3;
  }
  .a-flex .a-f-item:nth-child(4){
    order: 4;
  }
  .a-flex .a-f-item:nth-child(5){
    order: 5;
  }
  .a-flex .a-f-item:nth-child(6){
    order: 6;
  }
  .a-flex .a-f-item figure figcaption{
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 751px){
  
}
@media screen and (max-width: 750px){
  .a-flex .a-f-item{width: 50%;}
  .a-flex .a-f-item.kotei{
    padding-bottom: 1rem;
    order: 3;
  }
  .kotei figure img{
    min-height: auto;
    aspect-ratio: 4 / 3;
  }
  .a-flex .a-f-item.a-address{
    width: 100%;
    margin-bottom: 2rem;
  }
  .a-flex .a-f-item:nth-child(3){
    order: 4;
    padding-bottom: 1rem;
  }
  .a-flex .a-f-item:nth-child(4){
    width: 100%;
    order: 2;
    padding-bottom: 1rem;
  }
  .a-flex .a-f-item:nth-child(5), 
  .a-flex .a-f-item:nth-child(6){
    padding-top: 1rem;
  }
  .a-flex{
    gap: 0;
  }
  .a-flex .a-f-item.kotei, 
  .a-flex .a-f-item:nth-child(5){
    padding-right: 1rem;
  }
  .a-flex .a-f-item:nth-child(3), 
  .a-flex .a-f-item:nth-child(6){
    padding-left: 1rem;
  }
  .a-parking .a-flex{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .a-parking .a-flex .a-f-item{
    width: 100%;
  }
}

/*-----------------------------
        accessここまで
------------------------------*/
/*-----------------------------
        recruit
------------------------------*/
@media screen and (max-width: 1000px){
  #recruit .container .container {
    max-width: 90%;
  }
}
@media screen and (max-width: 768px){
  .r-text{
    padding: 3rem;
  }
}
@media screen and (max-width: 767px){
  #recruit .r-bg{
    padding: 5rem 0;
    height: auto;
  }
  #recruit .container .container{
    max-width: 95%;
  }
  .r-text{
    font-size: 1.6rem;
    padding: 3rem 1.5rem;
  }
}

/*-----------------------------
        recruitここまで
------------------------------*/
/*-----------------------------
        footer
------------------------------*/
@media screen and (max-width: 1600px){
  footer .container .container{
    max-width: 85%;
  }
}
@media screen and (max-width: 1000px){
  .foot-sns li a{
    font-size: 0;
  }
  .foot-sns li a::before{
    top: unset;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
  .foot-sns li a::after{
    display: none;
  }
}
@media screen and (min-width: 901px){
  .f-s-sp{
    display: none;
  }
}
@media screen and (max-width: 900px){
  .f-s-pc{
    display: none;
  }
  .foot-flex .foot-list{
    gap: 4rem;
  }
  .foot-logo figure img{
    width: 70%;
  }
}
@media screen and (max-width: 768px){
  .foot-flex .foot-list{
    /*font-size: 1.6rem;*/
  }
}
@media screen and (max-width: 767px){
  .foot-flex{
    grid-template-columns: 1fr;
  }
  .foot-logo figure img{
    width: 20%;
  }
  .foot-flex{
    gap: 5rem;
  }
}
@media screen and (max-width: 500px){
  .foot-logo figure img{
    width: 30%;
  }
  footer .container .container{
    max-width: 90%;
  }
}

/*-----------------------------
        footerここまで
------------------------------*/