@charset "utf-8";

.p-food .slant01  {
    height: clamp(210px, calc(430px * var(--r-design)), 430px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
    top: 0;
}

.p-food .slant02  {
    height: clamp(1200px, calc(2400px * var(--r-design)), 2400px);
    clip-path: polygon(0 0, 100% var(--slant), 100% calc(100% - var(--slant)), 0 100% );
    bottom: clamp(-250px, calc(-250px * var(--r-design)), -145px);
}

.p-food {
    background-color: var(--color-palepink);
}

.p-food__title {
    width: min(90%,clamp(244px, calc(378px * var(--r-design)), 378px));
    margin-inline: auto;
    text-align: center;
}

.p-box__title {
    margin-block-end: var(--space-rg);
}

.p-box--color {
    position: relative;
    padding-inline: var(--space-rg);
    padding-block-start: var(--space-xl);
    padding-block-end: var(--space-rg);
    border-radius: clamp(8px, calc(15px * var(--r-design)), 15px);
}

.color__box--smokyblue {
    background-color: var(--color-smokyblue);
}

.color__box--green {
    background-color: var(--color-green);
}

.color__box--orange {
    background-color: var(--color-orange);
}

.heading__area {
    position: absolute;
    width: min(80%,clamp(180px, calc(336px * var(--r-design)), 336px));
    top: clamp(-32px, calc(-32px * var(--r-design)), 18px);
    left: 50%;
    transform: translateX(-50%);
}

.p-food_caption {
    margin-block-end: var(--space-xs);
    text-align: center;
    line-height: 1.4;
    color: var(--color-white);
    --clamp-min: 18;
    --clamp-max: 36;
    font-size: var(--clamp);
    font-family: var(--font-cplpgp);
    font-weight: var(--font-weight-medium);
}

.p-food__shop {
    width: 80%;
    margin-inline: auto;
    margin-block-end: var(--space-rg);
}

.p-food__shop__name {
    width: min(80%,clamp(200px, calc(400px * var(--r-design)), 400px));
    margin-inline: auto;
    text-align: center;
}

.p-food__shop__name img {
    margin-inline: auto;
    text-align: center;
}

.opening-hours {
    line-height: 1.4;
    padding-block-start: clamp(2px, calc(4px * var(--r-design)), 4px);
    padding-block-end: clamp(3px, calc(6px * var(--r-design)), 6px);
    margin-block-start: var(--space-xs);
    margin-block-end: clamp(12px, calc(25px * var(--r-design)), 25px);;
    border-top: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    text-align: center;
    --clamp-min: 14;
    --clamp-max: 22;
    font-size: var(--clamp);
    font-weight: var(--font-weight-regular);
}

.opening-hours span {
    font-size: 90%;
}

.food-container--corner {
    position: relative;
    padding-inline: var(--space-rg);
    padding-block-start: var(--space-md);
    padding-block-end: var(--space-rg);
    border: solid clamp(2px, calc(4px * var(--r-design)), 4px) var(--color-salmonpink);
    border-top-right-radius: clamp(8px, calc(15px * var(--r-design)), 15px);
    border-bottom-left-radius: clamp(8px, calc(15px * var(--r-design)), 15px);
    background-color: var(--color-white);
    margin-block-end: var(--space-rg);
}

.icon-corner {
    position: absolute;
    width: min(80%,clamp(70px, calc(150px * var(--r-design)), 150px));
    top: 0;
    left: 0;
}

.p-food__img {
    margin-inline: auto;
}

.food__table--2col,
.drink__table--2col,
.shop__table--3col,
.drink__table--4col  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.food__table--2col {
    margin-block-end: var(--space-rg);
}

.shop__table--3col {
    margin-block-end: 0.5em;
}

.drink__table--4col  {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 4%;
}

.p-food__sabtitle {
    position: relative;
    z-index: 2;
    transform: translateY(clamp(5px, calc(10px * var(--r-design)), 10px));
}

.p-food__drink__table {
    position: relative;
    z-index: 5;
}

.drink__table--2col .p-food__drink__item {
    flex: 0 0 calc((100% - 6%) / 2);
}

.drink__table--4col .p-food__drink__item {
    width: calc(25% - 3%);
}

.food__table--2col .p-food__item {
    flex: 0 0 calc((100% - 6%) / 2);
}

.food__table--2col .p-food__item--full {
    width: 100%;
    flex: 0 0 100%;
}

.shop__table--3col .p-food__shop__item {
  flex: 0 0 calc((100% - 4%) / 3);
}

.c-list--food {
    padding-inline: 0;
    text-align: right;
}

.p-container__coaster {
    margin-block-end: var(--space-sm);
    border-radius: clamp(8px, calc(15px * var(--r-design)), 15px);
    overflow: hidden;
}

.p-container__coaster__title {
    padding-block: 0.4em;
    text-align: center;
}

.p-container__coaster__title h3 {
    color: var(--color-white);
    --clamp-min: 20;
    --clamp-max: 35;
    font-size: var(--clamp);
    font-family: var(--font-cplpgp);
    font-weight: var(--font-weight-bold);
}

.p-container__coaster--lightblue {
    background-color: #eff7fb;
}

.p-container__coaster--lightblue .p-container__coaster__title {
    background-color: var(--color-smokyblue);
}

.p-container__coaster--lightblue .p-container__coaster__body {
    background-color: #eff7fb;
}

.p-container__coaster--pink {
    background-color: #fbeaeb;
}

.p-container__coaster--pink .p-container__coaster__title {
    background-color: var(--color-salmonpink);
}

.p-container__coaster--pink .p-container__coaster__body {
    background-color: #fbeaeb;
}

.p-container__coaster__body {
    padding-block-start: var(--space-rg);
}

.p-container__coaster__body img {
    text-align: center;
    margin-inline: auto;
}

.coaster_title {
    width: clamp(180px, calc(340px * var(--r-design)), 340px);
}

.name--sumika {
    line-height: 1;
    --clamp-min:32;
    --clamp-max:54;
    font-size: var(--clamp);
    font-family: var(--font-cplpgp);
    font-weight: var(--font-weight-medium);
    margin-block-end: clamp(4px, calc(8px * var(--r-design)), 8px);
}

.food-container--corner--sumika {
    padding-block-start: clamp(17px, calc(34px * var(--r-design)), 34px);
}

.img--80 {
    width: 85%;
}

.shop-name__flex .p-food__shop__name {
    width: auto;
}

.name-sankakudo {
    max-width: 100px;
}

.p-food_captions {
    line-height: 1.2;
}

.p-namewrap__sankakudo {
    max-width: clamp(110px, calc(420px * var(--r-design)), 420px);
    margin-inline: auto;
}

.shop-name__flex {
    display: flex;
    align-items: center;
    gap: clamp(12px, calc(26px * var(--r-design)), 26px);
    justify-content: center;
}

/* 左：36%固定 */
.shop-name__flex .p-food__shop__name {
    flex: 0 0 36%;
    margin: 0; /* h4のデフォルトmarginをリセット推奨 */
}

/* 画像を枠いっぱいに */
.shop-name__flex .p-food__shop__name img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右：残り */
.opening-hours {
    flex: 1;
}

.name-sankakudo {
    max-width: 180px;
}

.coaster__body--red {
    padding-block-end: var(--space-rg);
}

@media screen and (min-width: 1025px) {
    .c-list--food {
        text-align: right;
    }
}