/* CSS Document */
@charset "utf-8";
@media screen and (max-width: 680px) {
    .wrap {
        flex-direction: column;
    }

    /*hd*/
    .main-menu-container img {
        width: 227px;
        height: auto;
    }

    .menu-button {
        background: url(../../uploads/2025/11/ham-bg.jpg) no-repeat;
        background-size: cover;
    }

    #main-menu-container #menu-main-menu {
        flex-direction: column;
        gap: 6rem;
    }

    #main-menu-container li {
        font-size: 2rem;
    }

    body #main-menu-container {
        gap: 4rem;
    }

    /*main*/
    .main-wrap {
        width: 95%;
        margin: 0 auto;
    }

    .logo-wrap {
        margin-bottom: 6rem;
    }

    /*sec1*/
    .sec1 .inner {
        margin: 0;
        padding: 4rem 2rem 8rem;
        background-size: cover;
        background-position: bottom left 25%;
    }

    .sec1 .wrap {
        align-items: baseline;
    }

    .sec1 .left {
        padding: 0 0 7rem 17.9688%;
    }

    .sec1 .right span {
        writing-mode: unset;
    }

    .sec1 .right p {
        display: block;
        margin: 0;
        padding: 0 2rem;
    }

    .sec1 .left .bg {
        transform: none;
    }

    .sec1 h1 {
        margin: 3rem 0 0;
    }

    /*sec2*/
    .sec2 {
        margin-top: -8rem;
    }

    .sec2 .inner {
        padding: calc(8rem + 4rem) 0 8rem;
        background: url(../../uploads/2025/11/design1.png) no-repeat left 125% top, url(../../uploads/2025/11/design2.png) no-repeat right 125% bottom
    }

    .sec2 .inner-wrap {
        padding-bottom: 8rem;
    }

    .sec2 .inner-wrap h1 {
        bottom: -5rem;
        top: auto;
        gap: 1rem;
    }

    .sec2 .txtwrap {
        transform: none;
        max-width: 88%;
        margin: 0 auto;
    }

    .sec2 .txtwrap p {
        padding: 6rem 2rem;
    }

    .sec2 .splide__slide {
        width: 200px !important;
        height: 200px !important;
    }

    /*sec3*/
    .sec3 .inner .co {
        padding: 8rem 0;
        width: 100%;
        background-position: center;
    }

    .sec3 .inner .bg1.co {
        padding: 43.4rem 0 4rem;
        background-position: left;
    }

    .sec3 .txt-wrap {
        max-width: 100%;
        width: 85%;
        top: 4rem;
    }

    .sec3 .txt-wrap p {
        padding: 0 2rem;
        text-align: left;
    }

    /*sec4*/
    .sec5 .inner .inner-wrap {
        background-size: cover;
    }

    .sec4 .inner {
        padding: 4rem 0;
    }

    .sec4 .splide__slide {
        width: 232px !important;
    }

    body .sec4 .gallery-slider-top li:nth-child(even) {
        margin-top: 3rem;
    }

    body .sec4 .gallery-slider-under li:nth-child(even) {
        margin-top: 3rem;
    }

    .sec4 .gallery-slider-top {
        margin-bottom: 3rem;
    }

    .sec4 .inner h1 {
        margin-bottom: 4rem;
    }

    /*sec5*/
    .linkwrap {
        flex-direction: column;
        width: fit-content;
    }

    .sec5 .wrap {
        margin-bottom: 2rem;
    }

    .sec5 table td,
    .sec5 table th {
        padding: 1rem 0;
    }

    .linkwrap .telbtn {
        font-size: 150%;
        padding: 1rem 3.4rem;
    }

    .linkwrap .telbtn span::before {
        width: 19px;
        height: 25px;
    }

    .linkwrap a {
        padding: 1em 4rem;
    }

    .under {
        padding: 4rem;
    }

    .under a {
        margin: 4rem auto 0;
    }

    /*footer*/
    .footerwrap .imgwrap img {
        width: 310px;
        height: auto;
    }

    .copyright-container {
        padding: 2rem 0;
    }

    .copyright-container span {
        font-size: 1.3rem;
    }

    /*about*/
    .about-sec2 .inner h1 {
        gap: 2rem;
    }

    .aboutco h2 {
        font-size: 3.2rem;
    }

    .about-sec2 .inner {
        padding: 3rem 5% 20rem;
    }

    .about-sec2 .aboutco {
        margin-top: 3rem;
    }

    .aboutco .about-desc {
        width: 100%;
        margin: 3rem 0;
    }

    .aboutcoimg-top {
        position: relative;
    }

    body .about-sec5 {
        background-size: cover;
        padding: 6rem 0 25rem;
    }

    body .about-sec3 {
        background-size: cover;
        padding: 6rem 0;
    }

    .about-sec3 .inner,
    .about-sec5 .inner {
        padding: 0 5%;
    }

    .about-sec3 .inner-wrap,
    .about-sec5 .inner-wrap {
        width: 100%;
    }

    .about-sec4 .inner {
        padding: 12rem 5%;
        background-image:
            url("../../uploads/2025/11/about-ds6.png"),
            url("../../uploads/2025/11/about-ds3.png");
        background-position: bottom right, bottom left;
        background-repeat: no-repeat, no-repeat;
    }

    .about-sec4 .aboutcoimg-top {
        right: auto;
        top: auto;
        transform: none;
    }

    body .about-sec5 .inner {
        padding: 0 5%;
    }

    .about-sec5 .wrap .about-desc {
        margin: 6rem 0;
    }

    .footerwrap {
        background-size: cover;
        margin: -15rem 0;
    }

    .about-sec5 table th,
    .about-sec5 table td {
        font-size: 1.8rem;
    }

    /*menu*/
    .menu-sec2 {
        padding: 6rem 0 15rem;
    }

    .sub-title::before {
        width: 2.5rem;
    }

    .sub-title::after {
        width: 2.5rem;
    }

    .sub-title-desc {
        margin: 0 0 3rem;
    }

    .menu-sec2 .wrap {
        padding: 0 5%;
    }

    .menu-sec3 .inner {
        background-size: cover;
        margin-top: -10rem;
        padding: 6rem 0;
    }

    .menu-sec3 .morelink {
        max-width: 300px;
    }

    .menu-sec4 .menu-wrap img {
        margin-top: 3rem;
    }

    .wrap.menu-wrap {
        gap: 3rem;
    }

    .wrap.menu-wrap .right {
        padding: 3rem 12%;
    }

    .wrap.menu-wrap .right p {
        font-size: 3.2rem;
    }

    .wrap.menu-wrap .right p span {
        font-size: 2rem;
    }

    .menu-sec4 {
        padding: 22rem 0 6rem;
    }

    .menu-sec5 .inner {
        padding: 6rem 5% calc(15rem + 10rem);
    }

    /*table*/
    .menu-table tr {
        display: flex;
        flex-direction: column;
    }

    .menu-table tr td {
        text-align: right;
    }

    .menu-table th,
    .menu-table td {
        padding: 1rem 0;
    }

    .menu-table caption {
        font-size: 2.4rem;
    }

    /*drink*/
    .drink-sec2 .inner {
        padding: 6rem 0;
    }

    .drink-sec2 .titwh.font-yuji {
        background-position: center;
        padding: 1em;
    }

    .drink-sec2 .right img {
        margin-top: 6rem;
    }

    .drink-sec3 .inner .sub-title-desc {
        margin: 0 0 3rem;
    }

    .drink-sec3 .img-wrap {
        padding: 0 5%;
        gap: 3rem;
    }

    .drink-sec3 .table-wrap {
        padding: 0 5%;
    }

    .drink-sec3 .table-wrap .left,
    .drink-sec3 .table-wrap .right {
        width: 100%;
    }

    .drink-sec3 .menu-table {
        margin: 3rem 0;
    }

    .drink-sec3 .inner {
        padding: 3rem 0 calc(15rem + 10rem);
    }

    /*info*/
    section.info-sec.section02 {
        padding: 3rem 0;
    }

    .info-sec.section02 .inner-main-title {
        padding-bottom: 30px;
    }

    .inner-main-desc {
        max-width: 90%;
    }

    section.info-sec.section03 {
        padding-top: 60px;
    }

    .inner-row-title h2 {
        margin-bottom: 60px;
    }

    /*tit*/
    .titwh.font-yuji {
        padding: 1em;
    }

    .tityeprice.font-yuji {
        margin: 0;
    }

    .tab tr th,
    .tab tr td {
        padding: 10px 0;
        border: none;
    }

    .tab tr td {
        text-align: right;
    }

    .tab tr {
        border-bottom: solid 2px #fff;
        display: flex;
        flex-direction: column;
    }

    .td-item {
        grid-template-columns: 1fr;
        margin: 0;
    }

    .tab table {
        max-width: 100%;
        width: 85%;
    }

    span.item-left {
        width: 100%;
        text-align: right;
    }

    span.item-right {
        text-align: right;
    }

    .co-imgwrap img {
        width: 40%;
    }

    .info-sec.section03 .co-imgwrap {
        gap: 1rem;
        flex-direction: row;
    }

    .info-sec.section03 .inner-row-map {
        margin: 6rem 0;
    }

    section.info-sec.section03 {
        padding-bottom: calc(15rem + 10rem);
    }

    /*recliut*/
    section.recruit-sec.section02 {
        padding: 6rem 0;
    }

    .inner-main-title {
        padding-bottom: 6rem;
    }

    section.recruit-sec.section03 {
        padding-top: 6rem;
        padding-bottom: calc(15rem + 10rem);
    }

    .sub-main-img img {
        height: 50vh;
    }

    .secbanner .inner {
        padding: 6rem 0;
    }

    .secbanner .inner img {
        margin: auto;
    }
}