/* ========all page style======== */

.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-text {
    position: absolute;
    z-index: 2;
    top: calc(80px + (100% - 80px) / 2);
    transform: translateY(-52%);
    left: 10%;
    color: #fff;
    width: 20%;
    max-width: 400px;
    min-width: 120px;
}

.hero-text h2 {
    font-size: 23px;
    margin-bottom: 35px;
}

.hero-text img {
    margin: 0 auto;
    width: 100%;
    min-height: unset !important;
    aspect-ratio: unset !important;
}

.hero-swiper .swiper-slide {
    overflow: hidden;
}

.hero-swiper {
    width: 100%;
}

.hero-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* aspect-ratio: 28 / 13; */
    /* min-height: 300px; */
}

.hiro-here .hero-swiper .swiper-slide {
    position: relative;
}

.hiro-here .hero-swiper .swiper-slide img {
    aspect-ratio: 384 / 163;
    min-height: 280px;
}

.promo-slider__main .swiper-slide img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.promo-slide {
    width: 100%;
    position: relative;
    padding-top: 70px;
}

.promo-slide::before {
    position: absolute;
    content: "";
    background-image: url(../images/page-bg.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    height: calc(100% + 210px);
    top: 0;
    left: 0;
}

.promo-slider__thumbs {
    margin-top: 20px;
}

.promo-slider__thumbs .swiper-slide {
    width: 270px;
}

.promo-slider__thumbs .swiper-slide img {
    object-fit: cover;
    width: 100%;
    transition: 0.2s ease;
    border: 2px solid #000;
}

.promo-slider__thumbs .swiper-slide-thumb-active img {
    opacity: 0.6;
}

.promo-slider__thumbs img {
    cursor: pointer;
}

.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 70px;
}

.banner-inner {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 20px;
}

.banner-img {
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 254px;
    width: 65.5%;
    max-width: 800px;
    border: 2px solid #96783C;
    overflow: hidden;
}

.banner-img img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

/* .banner-img img:nth-child(1) {
    width: 52%;
}

.banner-img img:nth-child(2) {
    width: 48%;
} */

.recruit-banner {
    flex: 1;
    border: 2px solid #96783C;
    background-image: url(../images/banner02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    display: block;

    font-family: Shippori Mincho B1;
    font-weight: 800;
}

.recruit-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 56%;
    height: 100%;
    background-color: rgba(30, 20, 15, 0.75);
    clip-path: polygon(0 0, 100% 0, 73% 100%, 0 100%);
    padding: 40px 20px 20px 0px;
    color: #fff;
    text-align: center;
}

.recruit-banner .__title-top {
    display: block;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #96783C;
    width: fit-content;
    line-height: 1.2;
    padding: 0px 20px;
    letter-spacing: 4px;

}

.recruit-banner .__title {
    font-size: 24px;
    margin-bottom: 6px;
    text-align: center;
    font-weight: 400;
    line-height: 1.2;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.recruit-banner .__title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 30px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}

/* Dấu ngoặc góc DƯỚI-PHẢI (::after) */
.recruit-banner .__title::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: -4px;
    width: 14px;
    height: 30px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}

.recruit-banner .__title-bt {
    display: block;
    font-size: 18px;
    color: #AB9333;
    text-align: center;
    margin-bottom: 24px;
}


.recommend {
    padding-top: 90px;
    overflow: hidden;
}

.recommend__inner {
    margin-top: 20px;
    position: relative;
}

.recommend__inner .btn {
    position: absolute;
    right: 0px;
    top: -55px;
}

.recommend-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.recommend-list .__item img {
    aspect-ratio: 4/3;
    width: 100%;
}

.recommend-list .__item {
    width: calc(100%/4 - 15px);
}

.recommend-list .__item p {
    padding: 8px 0px;
    transition: 0.2s ease;
    line-height: 1.5;
    font-size: 16px;
}

.recommend-list .__item a:hover+p {
    color: #96783C;
}

.news {
    padding-top: 50px;
    padding-bottom: 120px;
    position: relative;
}

.news::before {
    position: absolute;
    content: "";
    background-image: url(../images/news-bg-home.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;

    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 47%;
    z-index: -1;
}

.new-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.new-inner .title-bg {
    margin-bottom: 20px;
}

.new-inner .s-title {
    text-align: center;
    flex: 1;
}

.new-list {
    width: 960px;
}

.new-list li+li a {
    border-top: 1px solid #808080;
}

.new-list li:last-child a {
    border-bottom: 1px solid #808080;
}

.new-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 0px;
    position: relative;
}

.new-row::after {
    position: absolute;
    transform: rotate(45deg);
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    margin: auto;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    content: "";
}

.new-date {
    margin-right: 20px;
    line-height: 1;
}

.new-cat {
    background-color: #A00000;
    color: #fff;
    font-size: 12px;
    padding: 2px 20px;
    line-height: 1.2;
}

.new-title {
    display: block;
    flex: 1;
    padding-left: 15px;
    transition: 0.2s ease;
}

.new-row:hover .new-title {
    text-decoration: underline;
}

.s-block {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.s-block .__block {
    width: 50%;
}

.commitment .block-flex {
    background-image: url(../images/commitment-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.shops .block-flex {
    background-image: url(../images/store-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.s-block .swiper {
    height: 100%;
}

.s-block .swiper .swiper-slide img {
    height: 100%;
    object-fit: cover;
}

.s-block .swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
}

.block-flex .__title img {
    max-width: 180px;
}

.block-flex .__text {
    padding-left: 26px;
    margin-left: 26px;
    position: relative;
}

.block-flex .__text::after {
    position: absolute;
    content: "";
    width: 3px;
    height: 92%;
    top: 4%;
    left: 0px;
    background-color: #96783C;
}

.block-flex h2 {
    font-size: 42px;
    line-height: 1.4;
    white-space: nowrap;
}

.block-flex h3 {
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.block-flex p {
    margin-bottom: 15px;
    font-size: 15px;
}

.block-flex .__link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.block-flex .__link .btn {
    margin: 0px;
}

.page-banner {
    width: 100%;
    overflow: hidden;
}

.page-banner .__img {
    border-bottom: 3px solid #96783C;
}

.page-banner .__img img {
    min-height: 200px;
    object-fit: cover;
    width: 100%;
}

.intro-page {
    padding: 55px 15px 100px;
}

.page-name {
    font-size: 38px;
    text-align: center;
    position: relative;
    line-height: 1.6;
    font-family: Shippori Mincho B1;
}

.page-banner.page-menu .intro-page,
.page-banner.page-takeout .intro-page,
.page-banner.page-recommend .intro-page {
    padding-bottom: 10px;
}

.intro-page p {
    text-align: center;
    margin-top: 65px;
}

.page-name::after {
    position: absolute;
    content: "";
    background-image: url(../images/title-s-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 156px;
    height: 38px;
    left: 50%;
    transform: translateX(-50%);
    top: 105%;
}

.commitment-block {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #96783c63;
}

.commitment-block.--01 {
    border-top: unset;
}

.commitment-block.--06 h2,
.commitment-block.--07 h2 {
    position: relative;
    background-color: unset;
    color: #000;
}

.commitment__box.--06,
.commitment__box.--07 {
    min-height: 260px;
    background-color: #ffffffc2;
}

.commitment-block.--06 h2::before,
.commitment-block.--07 h2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../images/title-commitment-block.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    z-index: -1;
}

.commitment-block h4.__en {
    background-color: #96783C;
}

.commitment-block.--06 .__inner,
.commitment-block.--07 .__inner {
    padding: 0px;
}

.commitment-block__img {
    position: relative;
    z-index: 2;
}

.commitment-block.--06 .container,
.commitment-block.--07 .container {
    top: 25.8%;
}

.commitment-block.--06 .commitment__box::before,
.commitment-block.--07 .commitment__box::before {
    content: none;
}

.commitment-block .__inner {
    padding: 70px 0px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
}

.commitment-block .__inner::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #edb95030;
    left: 0;
    top: 0;
}

.commitment-block:nth-child(2n) .__inner {
    justify-content: flex-start;
}

.commitment-block:nth-child(2n) .container {
    display: flex;
    justify-content: flex-end;
}

.commitment-block .img-wrap {
    max-width: 55.7%;
    position: relative;
    z-index: 1;
}

.commitment-block .img-wrap img {
    width: 100%;
}

.commitment-block .container {
    max-width: 1160px;
    position: absolute;
    width: 100%;
    height: auto;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.commitment__box {
    background-color: #fff;
    color: #000;
    width: 600px;
    height: auto;
    padding: 24px 34px 28px;
    position: relative;
}

.commitment__box::after,
.commitment__box::before {
    position: absolute;
    content: "";
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.commitment__box.--01::after {
    background-image: url(../images/commitment-img01-icon.png);
    width: 230px;
    height: 92px;
    top: -62px;
    left: 202px;
}

.commitment__box::before {
    background-image: url(../images/commitment-box-under.png);
    width: 236px;
    height: 77px;
    bottom: -50px;
    left: 0px;
    z-index: -1;
}

.commitment__box.--02::after {
    background-image: url(../images/commitment-img02-icon.png);
    width: 250px;
    height: 108px;
    top: -77px;
    left: 150px;
}

.commitment__box.--04::before,
.commitment__box.--02::before {
    left: unset;
    right: 0px;
}

.commitment__box.--03:after {
    background-image: url(../images/commitment-img03-icon.png);
    width: 200px;
    height: 94px;
    top: -60px;
    left: 202px;
}

.commitment__box.--04:after {
    background-image: url(../images/commitment-img04-icon.png);
    width: 190px;
    height: 92px;
    top: -62px;
    left: 240px;
}

.commitment__box.--05:after {
    background-image: url(../images/commitment-img05-icon.png);
    width: 216px;
    height: 89px;
    top: -62px;
    left: 215px;
}


.commitment__box p {
    font-size: 12px;
}

.commitment__box h3 {
    font-size: 32px;
    line-height: 1.6;
}

.commitment__box h4 {
    color: #fff;
    background-color: #BE0000;
    margin-bottom: 20px;
    font-size: 15px;
}

.commitment-block h2,
.title-inner {
    font-size: 16px;
    color: #CCBC75;
    padding: 2px 25px 2px 15px;
    background-color: #231815;
    width: fit-content;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
}

.title-inner {
    font-family: Shippori Mincho B1;
    font-weight: 800;
    margin-bottom: 12px;
    background-color: #C2272E;
    color: #fff;
}

.commitment-block h2 span,
.title-inner span {
    font-size: 24px
}

.menu-accordion {
    width: 100%;
    overflow: hidden;
    background-color: #edb95030;
    /* background-image: url(../images/menu-accordion-ng.jpg); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.menu-accordion .__title {
    background-color: #96783C;
    color: #fff;
}

.menu-accordion .__title h2 {
    position: relative;
    font-size: 32px;
    padding: 2px 36px;
    cursor: pointer;
}

.menu-accordion .__title h2::after {
    position: absolute;
    content: "";
    background-image: url(../images/book-icon.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    left: 0px;
    top: 55%;
    transform: translateY(-50%);
    width: 28px;
    height: 30px;
}

.menu-accordion .__title h2::before {
    position: absolute;
    content: "";
    background-image: url(../images/icons8-down-50.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    transition: 0.3s ease;
}

#menuFloating .menu-accordion__content {
    display: none;
}

.menu-accordion.is-open .__title h2::before {
    transform: translateY(-50%) rotate(180deg);
}

.menu-cat {
    padding: 40px 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 15px;
}

.cat-link {
    color: #fff;
    background-image: url(../images/menu-cat-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 2.5px 20px;
    min-width: 175px;
    display: block;
    position: relative;

    font-family: Shippori Mincho B1;
    font-weight: 800;
    border-radius: 32px;
}

.cat-link::after {
    position: absolute;
    content: "";
    background-image: url(../images/menu-cat-icon.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 17px;
    height: 17px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.cat-block {
    padding-top: 70px;
}

.page-hiro .cat-block {
    padding-top: 90px;
}

.cat-block-title {
    margin-bottom: 20px;
}

.page-hiro .cat-block-title {
    margin-bottom: 45px;
}

.cat-block-title h3 {
    color: #fff;
    font-size: 32px;
    padding: 10px 45px 12px;
    height: 110px;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.5;

    background-image: url(../images/menu-title-bg-new.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cat-block-title h3 span {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    text-align: left;
}

.cat-block-title h3 span.__cate-name {
    line-height: 1.4;
}

.cat-block-title h3 span.__small {
    display: block;
    font-size: 0.6em;
}

.cat-block-title h3 img {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    object-fit: cover;
}

.page-hiro .cat-block .cat-block-title h3 {
    background-color: #000;
    color: #fff;
    margin-bottom: 20px;
}

.page-hiro .cat-block .cat-block-title h3::after {
    content: none;
}

.page-hiro .cat-block .cat-block-title h3::before {
    content: "";
    position: absolute;
    bottom: 24px;
    /* Vị trí cách đáy khối đen */
    left: 0px;
    /* Căn lề trái */
    width: 71%;
    /* Độ dài thanh đỏ (có thể chỉnh tùy ý) */
    height: 6px;
    /* Độ dày thanh đỏ */
    background-color: #fe5545;
    /* Màu đỏ */

    /* Vát nhọn góc dưới bên phải bằng clip-path */
    clip-path: polygon(0% 0%,
            /* Góc trên bên trái */
            100% 0%,
            /* Góc trên bên phải (đỉnh nhọn) */
            97% 100%,
            /* Góc dưới bên phải (vát chéo vào) */
            0% 100%
            /* Góc dưới bên trái */
        );
}

.post-cat-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 30px;
    row-gap: 18px;
}

.post-cat-list+.post-cat-list {
    margin-top: 18px;
}

.post-cat__item {
    width: calc(100%/4 - 22.5px);
    text-align: center;
    font-size: 14px;
    order: 2;
}

.post-cat-list.--ct {
    max-width: 840px;
}

.post-cat-list.--ct .post-cat__item {
    width: calc(100%/3 - 20px);
}

.post-cat__item .__thumb img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.post-cat__item.--signature .__thumb a {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.post-cat__item.--signature .__thumb a::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #ffffffab;
}

.post-cat__item.--signature .__thumb a::after {
    position: absolute;
    content: "お持ち帰り寿司の一覧はこちらへ";
    font-family:
        "Noto Sans JP", sans-serif;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    white-space: nowrap;
}

.post-cat__item.--signature {
    width: calc(50% - 15px);
    order: 1;
}

.post-cat__item.--signature .__thumb img {
    aspect-ratio: unset;
    height: 100%;
}

.post-cat__item .__limited {
    display: block;
    color: #fff;
    background-color: #A00000;
    padding: 1px 10px;
}

.post-cat__item .__name {
    margin-top: 6px;
}

.page-content {
    background-image: url(../images/Asset4@2x.jpg);
    background-size: cover;
    background-position: top;
    padding-bottom: 120px;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.page-content.page-stores,
.page-content.page-hiro,
.page-content.page-commitment-food {
    padding-bottom: 0px;
}

.page-content.page-hiro {
    margin-bottom: 4px;
}

.page-content.news-content {
    padding-top: 65px;
}

.page-content.recommend-content {
    padding-top: 65px;
}

.page-content.news-content .new-list {
    margin: 0 auto;
    max-width: 680px;
}

.takeout-content {
    padding-top: 65px;
}

.ordering-box {
    background-image: url(../images/takeout-box-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    margin-bottom: 30px;
}

.ordering-box.--bottom {
    margin-top: 100px;
}

.ordering-box h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #BE0000;
    gap: 8px;
    font-size: 26px;
    padding: 5px 10px;
}

.ordering-box h2 img {
    max-width: 24px;
    margin-top: 4px;
}

.ordering-list {
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    row-gap: 30px;
}

.ordering-list li {
    flex: 1;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
}

.ordering-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
    background-color: #fff;
    color: #96783C;
    font-size: 24px;
    max-width: 314px;
    margin: 0 auto 5px;
    padding: 10px 10px;
    font-family: Shippori Mincho B1;
    font-weight: 800;
}

.ordering-list li a img:nth-child(1) {
    margin-top: 2px;
}

.ordering-list li a img:nth-child(2) {
    max-width: 22px;
}

.takeout-block+.takeout-block {
    padding-top: 60px;
}

.takeout-block-title h3 {
    font-size: 28px;
    background-image: url(../images/take-title-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 10px 45px;
    height: 100px;
    display: flex;
    align-items: center;
}

.takeout-block-title {
    position: relative;
    margin-bottom: 50px;
}

.takeout-block-title::after {
    position: absolute;
    content: "";
    width: 100%;
    left: 0px;
    top: 100%;
    height: 10px;
    background-color: #E6AC68;
}

.takeout-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    row-gap: 45px;
}

.takeout-item {
    width: calc(50% - 20px);
    display: flex;
    align-items: flex-start;
    column-gap: 32px;
    row-gap: 15px;
}

.takeout-item .__thumb {
    width: 47%;
}

.takeout-item .__thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
}

.takeout__info {
    flex: 1;
    font-size: 14px;
}

.takeout__info .__name {
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.takeout__info .__desc {
    font-size: 14px;
    margin-bottom: 22px;
}

.takeout__info .__code {
    width: fit-content;
    display: block;
    font-size: 12px;
    color: #fff;
    background-color: #998675;
    padding: 1px 12px;
    border-radius: 22px;
    margin: 4px 0px;
}

.takeout__info .__note {
    margin-top: 10px;
    font-size: 12px;
}

.takeout__info .__name+.__code {
    margin-top: 10px;
}

.store-list {
    padding: 60px 15px;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    column-gap: 40px;
    row-gap: 25px;
}

.store-list-img {
    width: 585px;
}

.store-list-img h3 {
    background-color: #BE0000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    column-gap: 10px;
    padding: 5px 10px;
}

.store-list-img h3 img {
    max-width: 20px;
}

.wrap-store-link .menu-cat {
    flex-direction: column;
    padding: 15px 0px;
    row-gap: 10px;
}

.wrap-store-link {
    width: fit-content;
}

.wrap-store-link h4 {
    font-size: 20px;
}

.wrap-store-link .cat-link {
    max-width: 175px;
}

.wrap-store-link ul li:last-child {
    padding-top: 15px;
    margin-top: 5px;
    border-top: 1px solid #000;
}

.store-page-content {
    width: 100%;
    overflow: hidden;
    background-color: #edb95030;
    padding-bottom: 120px;
}

.store-block {
    padding-top: 70px;
}

.store-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 35px;
    row-gap: 20px;
}

.store-item+.store-item {
    padding-top: 60px;
}

.store__img-wrap {
    position: relative;
    width: 47.6%;
    padding-top: 5px;
}

.store__img-wrap .swiper {
    padding-bottom: 20px;
}

.store__img-wrap .swiper-pagination {
    bottom: -5px;
}

.store__img-wrap .swiper-pagination .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
}

.store__img-wrap .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #96783C;
}

.store__img-wrap .swiper .swiper-slide {
    height: 100%;
}

.store__img-wrap .swiper .swiper-slide a {
    width: 100%;
    height: 100%;
}

.store__img-wrap .swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1.41 / 1;
}

.store__content-wrap {
    flex: 1;
}

.store-block__title {
    margin-bottom: 28px;
    font-size: 30px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 14px;
}

.store-block__title span {
    text-transform: uppercase;
    color: #96783C;
    font-size: 15px;
}

.store__content-wrap h3 {
    font-size: 26px;
    line-height: 1.5;
    margin-bottom: 35px;
    position: relative;
}

.store__content-wrap h3::before {
    position: absolute;
    content: "";
    background-image: url(../images/title-line.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    top: 95%;
    left: 0px;
    width: 266px;
    height: 25px;
}

.store__info-line {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 5px;
}

.store__info-line span {
    color: #fff;
    background-color: #000;
    min-width: 94px;
    font-size: 12px;
    padding: 1px 4px;
}

.store__info-line p {
    font-size: 14px;
}

.store-time {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 5px;
    padding-bottom: 12px;
}

.store-time .__time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.store-time .__time img {
    max-width: 25px;
    margin-bottom: 4px;
}

.btn-map {
    width: 286px;
    height: 40px;
    color: #fff;
    background-color: #736357;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-map.--red {
    background-color: #A00000;
}

.btn-map+.btn-map {
    margin-top: 10px;
}

.single-content {
    margin: 0 auto;
    max-width: 720px;
}

.single-content p {
    margin: 15px 0px;
}

.single-content h1 {
    font-size: 24px;
}

.single-content .new-date {
    display: block;
    margin-bottom: 30px;
}

.single-content h2,
.single-content h3,
.single-content h4,
.single-content h5,
.single-content h6 {
    margin: 20px 0px;
}

.backnew {
    justify-content: center;
    margin-top: 40px;
}

.single-content a {
    text-decoration: underline;
    color: #3366ff;
}

.single-content table td {
    vertical-align: top;
}

.single-content table td img {
    width: fit-content;
    height: auto;
    object-fit: cover;
    vertical-align: middle;
    pointer-events: auto;
}

.menu-floating {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    transform: translateY(100%);
    /* ẩn hoàn toàn phía dưới màn hình */
    transition: transform 0.3s ease;
    background-image: url(../images/page-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.menu-floating.is-visible {
    transform: translateY(0);
    /* trượt lên hiện ra */
}

div#takeout+.post-cat-list li.--signature p {
    text-align: left;
}

div#takeout {
    margin-bottom: 50px;
}

div#takeout+.post-cat-list li {
    margin: 0 auto;
    width: 60%;
}

/* Popup */
.phone-popup {
    z-index: 2000;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: fit-content;
    max-height: 70vh;
    overflow-y: auto;
    background: #1a1a1a;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
    padding: 16px 16px 14px;
    z-index: 500;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
}

.phone-popup.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.phone-popup .close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #bdbdbd;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

.phone-popup .close:hover {
    color: #fff;
}

.phone-popup .label {
    font-size: 11px;
    color: #c9a15a;
    letter-spacing: .08em;
    margin: 0 0 10px;
    padding-right: 20px;
}

.store-list-popup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.store-row {
    background: #2a2a2a;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.store-row .info {
    min-width: 0;
}

.store-row .area-tag {
    font-size: 9.5px;
    color: #c9a15a;
    letter-spacing: .04em;
    margin: 0 0 2px;
}

.store-row .name {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 3px;
    color: #fff;
}

.store-row .number {
    font-size: 13px;
    color: #d9d9d9;
    text-decoration: none;
    display: block;
    font-weight: bold;
    white-space: nowrap;
}

.store-row .call-btn {
    flex-shrink: 0;
    background: #A00000;
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.phone-popup .hint {
    font-size: 10.5px;
    color: #8a8a8a;
    margin: 12px 0 0;
    line-height: 1.5;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 10px);
    background: #333;
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 12.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 400;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.highlight-pulse {
    animation: pulse 1.4s ease 2;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(181, 35, 30, 0);
    }

    30% {
        box-shadow: 0 0 0 4px rgba(181, 35, 30, .35);
    }
}

#fukuyama1,
#hiroshima,
#kurashiki {
    scroll-margin-top: 80px;
}

#fukuyama2,
#fukuyama3 {
    scroll-margin-top: 20px;
}

.wrap-store-map {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.wrap-store-map img {
    width: 100%;
}

.wrap-store-map .map-pin {
    position: absolute;
    cursor: pointer;
}

.pin-fukuyama {
    top: 42%;
    left: 42.2%;
    width: 7%;
    height: 15%;
}

.pin-hiroshima {
    top: 34.5%;
    left: 24.5%;
    width: 14.5%;
    height: 15%;
}

.pin-kurashiki {
    top: 35%;
    left: 59.5%;
    width: 7%;
    height: 15%;
}

#fukuyama-area,
#hiroshima-area,
#kurashiki-area,
#sister-brand {
    scroll-margin-top: 20px;
}

.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 45px;
}

.news-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid #a08050;
    border-radius: 50%;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all 0.3s ease;
}

.news-pagination .page-numbers.current {
    background-color: #a08050;
    color: #fff;
    border-color: #a08050;
    font-weight: 700;
}

.news-pagination .page-numbers:not(.current):not(.dots):hover {
    background-color: #a08050;
    color: #fff;
    border-color: #a08050;
}

.news-pagination .prev,
.news-pagination .next {
    border-radius: 50%;
    font-size: 16px;
}

.news-pagination .dots {
    border: none;
    cursor: default;
}

.news-pagination .dots:hover {
    background-color: transparent;
    color: #333;
}

.hiro-map {
    position: relative;
    overflow: hidden;
}

.hiro-map iframe {
    width: 100%;
    height: 400px;
    display: block;
}

.hiro-info {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.hiro-info .__description {
    width: 35%;
    min-width: 520px;
    color: #fff;
    padding: 35px 15px 30px;
    background-color: #000;
    font-size: 18px;
    line-height: 1.5;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hiro-info .__image {
    flex: 1;
}

.hiro-info .__image img {
    width: 100%;
    height: 100%;
    max-height: 680px;
    object-fit: cover;
}

.hiro-info .__title {
    width: fit-content;
    margin: 0 auto;
}

.hiro-info .__title h2 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 30px;
}

.hiro-info .__title p {
    text-align: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.hiro-info .__title p::after {
    position: absolute;
    content: "";
    width: 45%;
    height: 4px;
    background-color: #BE0000;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
}

.hiro-add {
    margin-top: 45px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 390px;
    font-style: normal;
    width: 100%;
}

.hiro-tel {
    max-width: 410px;
    margin: 16px auto 35px;
}

.hiro-info .__description img {
    max-width: 360px;
    margin: 0 auto;
}

.hiro-info .visit {
    text-align: center;
    margin-top: 10px;
}

.hiro-intro {
    overflow: hidden;
}

.hiro-intro__text {
    background-image: url(../images/section2-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.img-ab {
    position: absolute;
}

.img-ab img {
    width: 100%;
}

.img-ab.--01 {
    width: 39.1%;
    top: 5%;
    left: -50px;
}

.img-ab.--02 {
    width: 46.9%;
    top: 22.5%;
    right: -7.8%;
    min-width: 200px;
}

.img-ab.--03 {
    width: 9.2%;
    top: 6.5%;
    left: 2.3%;
}

.img-ab.--04 {
    width: 13%;
    top: -15px;
    right: 5.2%;
}

.hiro-intro>img {
    width: 100%;
}

.hiro-intro .__inner {
    text-align: center;
    padding: 140px 0px 165px;
    position: relative;
    z-index: 2;
}

.hiro-intro .__inner img {
    margin: 0 auto;
}

.hiro-intro .__inner h3 {
    font-size: 22px;
    margin-bottom: 36px;
}

.page-hiro .__inner {
    background-color: #83745633;
}

.page-hiro p.--small {
    font-size: 13px;
    margin-top: 5px;
}

.hightlight {
    font-size: 24px;
    background-color: #A00000;
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    margin-bottom: 100px;
}

.commitment-store-block {
    position: relative;
    padding-top: 15.6%;
    z-index: 2;
}

/* .commitment-store-block::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 25%;
    top: -1px;
    left: 0;
    background-color: #fff;
    z-index: -1;
} */

.page-commitment-store {
    margin-top: 120px;
    position: relative;
}

.page-commitment-store::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #edb95030;
}

.commitment-store-block+.commitment-store-block {
    margin-top: 40px;
}

.commitment-store-block .__img-bottom {
    position: absolute;
    z-index: 2;
    right: 0px;
    bottom: 0px;
    width: 45%;
    border-left: 4px solid #96783C;
    border-bottom: 4px solid #96783C;
}

.commitment-store-block .__img-bottom img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
}

.commitment-store-block .__img-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 57.5%;
    border-right: 4px solid #96783C;
    border-bottom: 4px solid #96783C;
    z-index: 2;
}

.commitment-store-block .__img-top img {
    width: 100%;
    object-fit: cover;
}

.commitment-store-block.--02 .__img-top {
    left: unset;
    right: 0px;
    border-left: 4px solid #96783C;
    border-right: unset;
}

.commitment-store-block .__inner {
    padding-top: 21%;
    padding-bottom: 5%;
    background-image: url(../images/commitment-store-02-new.webp);
    background-size: 49%;
    background-position: top right;
    background-repeat: no-repeat;
    border-top: 3px solid #96783C;
    position: relative;
    padding-left: 9.5%;
    padding-right: 9.5%;
}

.commitment-store-block .__inner p.txt,
.commitment-store-bottom .__inner p.txt {
    font-size: 14px;
}

.commitment-store-bottom .__inner .d-flex {
    padding-top: 20px;
    flex-wrap: wrap;
}

.commitment-store-bottom .__inner .d-flex {
    gap: 20px;
}

.commitment-store-block .__inner .__content {
    max-width: 54%;
}

.commitment-store-block.--02 .__inner .container {
    width: 50%;
    margin-left: auto;
    margin-right: unset;
}

.commitment-store-block.--02 .__inner {
    background-image: url(../images/commitment-store-05.jpg);
    border-top: 0px;
    padding-bottom: 12%;
}

.commitment-store-block .__inner::after {
    position: absolute;
    content: "";
    bottom: 100%;
    right: 0;
    background-image: url(../images/commitment-store-03.png);
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    width: 55%;
    height: 100px;
}

.commitment-store-block .__inner::before {
    position: absolute;
    content: "";
    background-color: #fff;
    bottom: 100%;
    width: 45%;
    height: 44%;
    right: 0px;
    z-index: -1;
}

.commitment-store-block.--02 .__inner::after {
    background-image: url(../images/commitment-store-08.png);
}

.img-line {
    width: 90%;
    margin-top: 110px;
    position: relative;
    z-index: 2;
}

.img-line img {
    width: 100%;
    object-fit: cover;
}

.commitment-block__title {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 34px;
    padding-bottom: 30px;
    position: relative;
}

.commitment-store-bottom .commitment-block__title {
    display: flex;
    align-items: center;
}

.commitment-block__title span.__hl {
    font-size: 44px;
    margin-bottom: 2px;
    line-height: 1.2;
}

.commitment-block__title::after {
    position: absolute;
    content: "";
    width: 185px;
    height: 4px;
    background-color: #C2272E;
    left: 0px;
    top: 100%;
}

.commitment-store-bottom {
    margin-top: 140px;
    padding-bottom: 10px;
    position: relative;
    z-index: 2;
}

.commitment-store-bottom .__img-ab {
    position: absolute;
    width: 49%;
    right: 0px;
    top: 20%;
    z-index: -1;
}

.commitment-store-bottom .__img-ab img {
    width: 100%;
    object-fit: cover;
}

.commitment-store-bottom .__img {
    width: 57.5%;
    border-right: 4px solid #96783C;
    border-bottom: 4px solid #96783C;
}

.commitment-store-bottom .__img img {
    width: 100%;
}

.commitment-store-bottom .__inner {
    padding: 0px 9.5%;
}

.title-custom {
    width: 850px;
    height: 110px;
    background-color: #96783C;
    color: #fff;
    position: relative;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 100px 0px 40px;
    position: relative;
}

.title-custom::after {
    position: absolute;
    content: "";
    background-image: url(../images/commitment-icon.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 200px;
    height: 69px;
    top: -17px;
    left: -25px;
    z-index: 2;
}

.title-custom::before {
    position: absolute;
    content: "";
    background-image: url(../images/commitment-icon.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 180px;
    height: 62px;
    bottom: -25px;
    right: -24px;
    z-index: 2;
}



/*================== Responsive style ==================*/
@media only screen and (max-width: 1800px) {}

@media only screen and (max-width: 1600px) {
    .hiro-intro .__inner {
        padding: 90px 0px 100px;
    }

    .commitment-store-block .__inner p.txt,
    .commitment-store-bottom .__inner p.txt {
        font-size: 12px;
    }

    .commitment-store-block .__inner::before {
        height: 36%;
    }
}

@media only screen and (max-width: 1400px) {
    .hero-text {
        left: 8%;
    }

    .hiro-intro .__inner {
        padding: 80px 0px 90px;
    }
}

@media only screen and (max-width: 1280px) {
    .img-ab.--02 {
        top: 18%;
    }
}

@media only screen and (max-width: 1260px) {

    .promo-slide,
    .banner {
        padding-top: 55px;
    }

    .recommend {
        padding-top: 70px;
    }

    .title-bg,
    .block-flex h2 {
        font-size: 36px;
    }

    .page-name {
        font-size: 32px;
    }

    .page-name::after {
        width: 140px;
        height: 32.98px;
    }

    .news {
        padding-bottom: 90px;
    }

    .banner-img {
        height: 200px;
    }

    .recruit-banner .__title {
        font-size: 20px;
    }

    .recruit-banner .__title-top,
    .recruit-banner .__title-bt {
        font-size: 16px;
    }

    .recruit-banner .__title-bt {
        margin-bottom: 15px;
    }

    .recruit-banner__overlay {
        padding: 20px 10px 10px 0px;
    }

    .block-flex .__title img {
        max-width: 120px;
    }

    .block-flex .__text {
        padding-left: 15px;
        margin-left: 15px;
    }

    .new-list {
        width: 75%;
    }

    .promo-slider__thumbs .swiper-slide {
        width: 240px;
    }

    .commitment__box {
        padding: 20px 24px;
    }

    .commitment-block .img-wrap img {
        min-height: 380px;
        object-fit: cover;
    }

    .menu-accordion .__title h2 {
        font-size: 28px;
        padding-left: 32px;
    }

    .menu-accordion .__title h2::after {
        width: 25px;
    }

    .ordering-list {
        gap: 15px;
        row-gap: 20px;
    }

    .ordering-list li a {
        font-size: 22px;
    }

    .cat-block-title h3::after {
        width: 60%;
    }

    .news::before {
        height: 40%;
    }

    .hiro-intro .__inner h3 {
        font-size: 20px;
    }

    .hiro-info .__title h2 {
        font-size: 26px;
    }

    .hiro-info .__description {
        font-size: 15px;
    }

    .hiro-add {
        max-width: 320px;
    }

    .hiro-info .__description img {
        max-width: 300px;
    }

    .page-commitment-store,
    .img-line,
    .commitment-store-bottom {
        margin-top: 90px;
    }
}

/* end menu SP */

@media only screen and (max-width: 1024px) {

    .title-bg,
    .block-flex h2 {
        font-size: 28px;
    }

    .title-bg::after {
        width: 60px;
        height: 66px;
        background-size: contain;
    }

    .s-block .__block {
        width: 100%;
    }

    .shops.s-block {
        flex-direction: column-reverse;
    }

    .block-flex {
        padding: 40px 20px;
    }

    .news {
        padding-bottom: 60px;
    }

    .banner-inner {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .banner-img {
        width: 100%;
    }

    .recruit-banner {
        flex: unset;
        width: 400px;
        height: 200px;
    }

    .recruit-banner__overlay {
        padding-right: 30px;
    }

    .commitment-block .__inner {
        flex-direction: column-reverse;
        align-items: center;
        padding: 0px 0px 55px 0px;
    }

    .commitment-block .container {
        position: static;
        transform: translateX(0%);
    }

    .commitment-inner-wrap {
        width: fit-content;
        margin: 0 auto;
        padding: 40px 0px 20px;
    }

    .commitment-block .img-wrap img {
        min-height: unset;
    }

    .commitment-block .img-wrap {
        max-width: 100%;
    }

    .commitment-block.--01 .__inner {
        padding-top: 0px;
    }

    .intro-page {
        padding: 35px 10px 70px;
    }

    .intro-page p {
        margin-top: 45px;
    }

    .cat-block {
        padding-top: 45px !important;
    }

    .page-content {
        padding-bottom: 60px;
    }

    .post-cat-list {
        column-gap: 20px;
    }

    .post-cat__item {
        width: calc(100% / 4 - 15px);
    }

    .post-cat__item.--signature {
        width: calc(50% - 10px);
    }

    .takeout-content {
        padding-top: 45px;
    }

    .ordering-box h2 {
        font-size: 24px;
    }

    .ordering-box h2 img {
        max-width: 20px;
        margin-top: 2px;
    }

    .ordering-list {
        flex-wrap: wrap;
    }

    .ordering-list li {
        flex: unset;
        width: 100%;
    }

    .takeout-item {
        column-gap: 15px;
        width: calc(50% - 10px);
    }

    .store-block {
        padding-top: 45px;
    }

    .store-item {
        column-gap: 20px;
    }

    .store-block__title {
        margin-bottom: 20px;
    }

    .cat-block-title h3::after {
        width: 65%;
    }

    .post-cat__item.--signature .__thumb a::after {
        font-size: 20px;
    }

    .news::before {
        height: 28%;
    }

    .store-list-img {
        width: 61%;
    }

    .hiro-intro .__inner {
        padding: 80px 0px 90px;
    }

    .hiro-intro .__inner h3 {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .hiro-info .__description {
        width: 45%;
        min-width: unset;
    }

    .img-ab.--02 {
        top: unset;
        bottom: -30px;
    }

    .commitment__box.--06,
    .commitment__box.--07 {
        min-height: auto;
    }

    .commitment-block.--06 .__inner,
    .commitment-block.--07 .__inner {
        padding-bottom: 55px;
    }

    .page-commitment-store,
    .img-line,
    .commitment-store-bottom {
        margin-top: 60px;
    }

    .commitment-store-block .__inner::before {
        height: 30%;
    }

    .commitment-block__title {
        font-size: 20px;
    }

    .commitment-block__title span.__hl {
        font-size: 28px;
    }

    .title-custom {
        max-width: 100%;
        font-size: 24px;
    }

    .commitment-store-bottom .__img-ab {
        top: 10%;
    }

    .commitment-store-block .__img-bottom {
        display: none;
    }

    .commitment-store-block .__inner .__content {
        max-width: 100%;
    }

    .commitment-block {
        border: unset;
    }

    .cat-block-title h3 {
        font-size: 24px;
    }
}

/* end 1024 */

@media only screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .recommend-list {
        flex-wrap: wrap;
        gap: 15px;
    }

    .recommend-list .__item {
        width: calc(100% / 2 - 7.5px);
    }

    .title-bg,
    .block-flex h2 {
        font-size: 28px;
    }

    .new-list {
        width: 100%;
    }

    .news {
        padding-top: 45px;
        padding-bottom: 45px;

    }

    .news .title-bg+.btn {
        display: none !important;
    }

    .new-date {
        margin-right: 10px;
        margin-top: 2px;
    }

    .new-row {
        align-items: flex-start;
    }

    .new-title {
        padding-left: 0px;
        padding-top: 5px;
        flex: unset;
        width: 100%;
    }

    .new-cat {
        padding: 2px 10px;
    }

    .new-inner {
        gap: 0px;
        display: block;
    }

    .news-bt-sp {
        margin-top: 20px;
        text-align: center;
    }

    .block-flex h3 {
        font-size: 18px;
    }

    .block-flex {
        flex-direction: column;
        gap: 25px;
    }

    .block-flex .__text {
        padding-left: 0px;
        margin-left: 0px;
    }

    .block-flex .__text::after {
        content: none;
    }

    .block-flex .__link {
        justify-content: center;
    }

    .recommend {
        padding-top: 45px;
    }

    .promo-slide,
    .banner {
        padding-top: 20px;
    }

    .banner-img {
        height: 180px;
    }

    .recruit-banner {
        height: 180px;
        max-width: 100%;
    }

    .recommend__inner {
        text-align: center;
    }

    .recommend__inner .btn {
        margin-bottom: 30px;
        position: static;
    }

    .block-flex {
        padding: 30px 15px 40px;
    }

    .commitment__box h3 {
        font-size: 26px;
    }

    .commitment__box h4 {
        font-size: 14px;
    }

    .commitment__box {
        width: 100%;
    }

    .commitment-inner-wrap {
        width: 580px;
        max-width: 100%;
    }

    .page-name {
        font-size: 28px;
    }

    .commitment__box::before {
        background-size: contain;
        width: 160px;
    }

    .commitment__box::after {
        background-size: contain;
    }

    .commitment__box::after {
        width: 140px !important;
        left: 205px !important;
    }

    .commitment-block h2,
    .title-inner {
        font-size: 15px;
    }

    .commitment-block h2 {
        padding: 2px 20px 2px 10px;
        ;
    }

    .commitment-block h2 span,
    .title-inner span {
        font-size: 20px;
    }

    .menu-cat {
        justify-content: center;
    }

    .post-cat-list {
        column-gap: 15px;
    }

    .post-cat__item {
        width: calc(100% / 2 - 7.5px);
    }

    .post-cat__item.--signature {
        width: 100% !important;
    }

    .menu-accordion .__title h2 {
        font-size: 24px;
        padding-left: 24px;
    }

    .menu-accordion .__title h2::after {
        width: 20px;
    }

    .menu-accordion .__title h2::before {
        width: 36px;
        height: 36px;
    }

    .cat-block-title h3 {
        margin-bottom: 6px;
    }

    .cat-block-title p {
        font-size: 12px;
    }

    .ordering-box h2 {
        font-size: 22px;
    }

    .ordering-list {
        padding: 20px 12px;
    }

    .ordering-list li a {
        font-size: 20px;
    }

    .ordering-list li {
        white-space: wrap;
    }

    .ordering-box {
        margin-bottom: 0px;
    }

    .takeout-block-title h3 {
        font-size: 20px;
        padding: 10px 25px;
        height: 60px;
    }

    .takeout-block-title::after {
        height: 5px;
    }

    .takeout-item {
        width: 100%;
    }

    .takeout-list {
        row-gap: 35px;
    }

    .takeout-block+.takeout-block {
        padding-top: 55px;
    }

    .takeout-block-title {
        margin-bottom: 45px;
    }

    .takeout__info .__name {
        font-size: 20px;
    }

    .store-list {
        padding: 0px 0px 20px;
    }

    .store-list-img {
        max-width: 100%;
        width: 100%;
    }

    .wrap-store-link {
        padding: 0px 10px;
        text-align: center;
    }

    .wrap-store-link .menu-cat {
        flex-direction: row;
    }

    .wrap-store-link ul li:last-child {
        margin-top: 0px;
        padding-top: 0px;
        border-top: unset;
    }

    .wrap-store-link h4 {
        text-align: center;
    }

    .store-block__title {
        font-size: 24px;
    }

    .store-block {
        padding-top: 35px;
    }

    .store-block__title {
        gap: 10px;
    }

    .store-block__title span {
        font-size: 14px;
    }

    .store__content-wrap h3 {
        font-size: 20px;
    }

    .store__content-wrap h3::before {
        width: 220px;
        top: 82%;
    }

    .store__img-wrap {
        width: 100%;
        padding-top: 0px;
    }

    .store-page-content {
        padding-bottom: 60px;
    }

    .cat-block-title h3 {
        height: 70px;
        font-size: 20px;
        padding: 10px 20px;
        line-height: 1.5;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.726);
    }

    .single-content h1 {
        font-size: 18px;
    }

    .block-flex p {
        margin-bottom: 25px;
    }

    .single-content a {
        text-decoration: underline;
    }

    .recommend-list .__item p {
        font-size: 14px;
    }

    .cat-block-title h3::after {
        width: 66%;
    }

    .menu-cat {
        padding: 30px 0px;
    }

    .post-cat__item.--signature .__thumb a::after {
        font-size: 16px;
    }

    .promo-slider__thumbs {
        margin-top: 10px;
    }

    .promo-slider__thumbs .swiper-slide {
        width: 180px;
    }

    .phone-popup {
        padding: 10px;
        max-height: 262px;
    }

    .store-row .call-btn {
        padding: 6px 10px;
        display: none;
    }

    .phone-popup::-webkit-scrollbar {
        width: 4px;
    }

    .phone-popup::-webkit-scrollbar-track {
        background: #2a2a2a;
        border-radius: 4px;
    }

    .phone-popup::-webkit-scrollbar-thumb {
        background: #555;
        border-radius: 4px;
    }

    .phone-popup::-webkit-scrollbar-thumb:hover {
        background: #888;
    }

    #fukuyama1,
    #hiroshima,
    #kurashiki {
        scroll-margin-top: 60px;
    }

    #fukuyama2,
    #fukuyama3 {
        scroll-margin-top: 0px;
    }

    #fukuyama-area,
    #hiroshima-area,
    #kurashiki-area,
    #sister-brand {
        scroll-margin-top: 15px;
    }

    .recruit-banner .__title::after {
        bottom: -4px;
    }

    .recruit-banner {
        background-position: top;
    }

    .news::before {
        height: 24%;
    }

    body.page-id-64 .menu-floating.is-visible {
        transform: translateY(-44px);
    }

    .hero-text {
        top: calc(60px + (100% - 60px) / 2);
        left: 6%;
        width: 20%;
    }

    .img-ab.--03 {
        top: 80%;
        left: 20px;
    }

    .img-ab.--01 {
        width: 24%;
        top: 2%;
        left: -20px;
    }

    .img-ab.--04 {
        right: 15px;
    }

    .hightlight {
        font-size: 16px;
        margin-bottom: 65px;
        padding: 12px 10px;
    }

    .page-hiro .cat-block .cat-block-title h3::before {
        height: 4px;
        bottom: 12px;
    }

    .hiro-info .__description {
        width: 100%;
    }

    .hiro-info .__image {
        flex: unset;
        width: 100%;
    }

    .hiro-map iframe {
        height: 320px;
    }

    .page-hiro .cat-block-title {
        margin-bottom: 30px;
    }

    .page-hiro .cat-block .cat-block-title h3 {
        margin-bottom: 10px;
    }

    .commitment-store-block .__inner,
    .commitment-store-bottom .__inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    .title-custom::after {
        width: 100px;
        top: -25px;
    }

    .title-custom::before {
        width: 90px;
        bottom: -20px;
        right: -15px;
    }

    .title-custom {
        height: 70px;
        font-size: 20px;
    }

    .commitment-block__title {
        font-size: 16px;
        margin-bottom: 20px;
        padding-bottom: 18px;
    }

    .commitment-block__title span.__hl {
        font-size: 24px;
    }

    .commitment-block__title::after {
        width: 120px;
        height: 2px;
    }

    .commitment-store-block .__inner {
        padding-bottom: 0px;
    }

    .commitment-store-block .__img-top,
    .commitment-store-block .__inner,
    .commitment-store-bottom .__img {
        border-width: 2px;
    }

    .commitment-store-block .__inner::after {
        height: 70px;
    }

    .cat-block-title h3 span.__small {
        font-size: 0.7em;
    }

    .commitment-store-bottom .__inner .d-flex {
        justify-content: center;
    }
}

/* end 768 */

@media only screen and (max-width: 600px) {
    .commitment-store-block .__inner::before {
        height: 25%;
    }

    .commitment-store-block .__inner::after {
        height: 60px;
    }
}

@media only screen and (max-width: 479px) {

    .commitment-store-bottom .__img-ab {
        top: 5%;
    }

    .commitment-store-block .__inner::after {
        height: 40px;
    }

    .title-custom {
        font-size: 16px;
    }

    .title-custom::after {
        width: 80px;
        top: -30px;
    }

    .title-custom::before {
        width: 70px;
        bottom: -20px;
        right: -15px;
    }

    .hiro-info .__title h2 {
        font-size: 20px;
    }

    .hiro-info .__description {
        font-size: 14px;
    }

    .hiro-add {
        max-width: 300px;
    }

    .hiro-info .__description img {
        max-width: 270px;
    }

    .hiro-tel {
        margin-bottom: 25px;
    }

    .page-hiro .cat-block .cat-block-title h3::before {
        height: 4px;
        bottom: 6px;
    }

    .hero-text {
        
        width: 18%;
    }

    .banner-img {
        height: 120px;
    }

    .recruit-banner .__title-bt {
        margin-bottom: 6px;
    }

    .recruit-banner .__title-top,
    .recruit-banner .__title-bt {
        font-size: 14px;
    }

    .recruit-banner .__title {
        font-size: 16px;
    }

    .recruit-banner {
        height: 155px;
    }

    .recruit-banner__overlay {
        padding: 10px 20px 10px 0px;
        width: 62%;
        clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
    }

    p.btn {
        font-size: 12px !important;
    }

    .cat-link {
        font-size: 14px;
        min-width: 162px;
        height: 30px;
        padding: 2px 14px;
        display: flex;
        align-items: center;
    }

    .menu-cat {
        gap: 10px;
    }

    .store-list-img h3 {
        font-size: 20px;
        column-gap: 6px;
    }

    .store-list-img h3 img {
        max-width: 15px;
    }

    .store__info-line {
        gap: 10px;
    }

    .btn-link {
        max-width: 200px;
    }

    .cat-block-title h3 {
        padding: 8px 12px 10px;
    }

    .promo-slider__thumbs .swiper-slide {
        width: 120px;
    }

    .takeout-item {
        flex-wrap: wrap;
    }

    .takeout-item .__thumb,
    .takeout__info {
        flex: unset;
        width: 100%;
    }

    .promo-slider__main .swiper-slide a img {
        /* min-height: 160px; */
        object-fit: cover;
    }

    .hightlight {
        font-size: 12px;
        padding: 12px 0px;
    }


}

/* end 479 */

@media only screen and (max-width: 379px) {
    .hightlight {
        font-size: 10px;
    }

    .promo-slider__thumbs .swiper-slide {
        width: 110px;
    }

    .cat-link {
        min-width: unset;
        width: 135px;
        height: 28px;
        border-radius: 28px;
        background-size: cover;
        padding: 2px 12px;
    }

    .cat-link::after {
        width: 15px;
        height: 15px;
        right: 6px;
    }

    .store__info-line {
        gap: 4px;
        margin-bottom: 8px;
    }

    .store__info-line {
        flex-wrap: wrap;
    }

    .store__info-line p {
        width: 100%;
    }

    .cat-block-title h3::after {
        width: 70%;
    }

    .banner-img {
        height: 100px;
    }

    .hiro-intro .__inner h3 {
        font-size: 16px;
    }

    .hiro-info .__description {
        font-size: 13px;
    }

    .hiro-add {
        max-width: 280px;
    }

    .commitment-store-block .__inner::before {
        height: 18%;
    }

    .commitment__box::after {
        width: 100px !important;
    }

    .hero-text {
        min-width: 100px;
        left: 4%;
    }

    .hiro-here .hero-swiper .swiper-slide img {
        min-height: 240px;
    }
}

/* end 360 */

@media only screen and (max-width: 320px) {

    html,
    body {
        min-width: 320px;

        overflow-x: hidden;
    }

    .banner-img {
        height: 80px;
    }

    .commitment__box.--03:after {
        top: -72px;
    }

    .commitment__box::after {
        right: -4px;
        left: unset !important;
    }
}

/* end 320 */

/*================== Responsive style ==================*/