@charset "utf-8";

.p-goods{
    background-color: var(--color-matcha);
}

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

.p-goods .slant02 {
    height: clamp(4500px, calc(9000px * var(--r-design)), 9000px);
    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-goods__title {
    width: min(90%,clamp(206px, calc(412px * var(--r-design)), 412px));
    margin-inline: auto;
    margin-block-end: clamp(16px, calc(32px * var(--r-design)), 32px);
    text-align: center;
}

.goods__title__cushion {
    letter-spacing: -0.02em;
    margin-block-end: 0.2em;
    text-align: center;
    font-family: var(--font-cplpgp);
    color: var(--color-darkblue);
    line-height: 1.4;
    --clamp-min: 24;
    --clamp-max: 52;
    font-size: var(--clamp);
    font-weight: var(--font-weight-bold);
}

.goods__title--bg {
    margin-block-end: 0.5em;
    padding-block-end: 0em;
    text-align: center;
    background-color: #63add5;
    color: var(--color-white);
    line-height: 1.4;
    --clamp-min: 20;
    --clamp-max: 36;
    font-size: var(--clamp);
    font-weight: var(--font-weight-bold);
    border-radius: 4px;
    font-family: var(--font-cplpgp);
}

/*headmark*/

.l-pc-headmark {
    position: relative;
}

.l-pc-headmark .p-goods__item {
    padding-inline: var(--space-rg);
}

.p-goods__table__list li.l-pc-headmark {
    border: none;
    padding-block-end: 0;
    margin-block-end: var(--space-xs);
}

.l-pc-headmark .p-goods__img {
    width: calc(430px * var(--r-design));
    max-width: 430px;
    margin-inline-start: 0;
}

.l-pc-headmark .p-goods__name {
    position: absolute;
    display: inline-block;
    width: fit-content;
    top: 20px;
    right: 10px;

}

.l-pc-headmark .p-goods__name p {
    --clamp-min: 16;
    --clamp-max: 26;
    font-size: var(--clamp);
}

.p-title__burari {
    width: min(90%,clamp(220px, calc(436px * var(--r-design)), 436px));
}

.p-title__collab {
    width: min(90%,clamp(230px, calc(472px * var(--r-design)), 472px));
}

.p-title__giveaway  {
    width: min(80%,clamp(180px, calc(480px * var(--r-design)), 480px));
    margin-inline-start: 4.5em;
}

.p-title__areagoods {
    width: min(80%,clamp(180px, calc(480px * var(--r-design)), 480px));
    margin-inline-start: 4.5em;
}

.p-goods__name {
    color: var(--color-darkgray);
    text-align: center;
}

.space {
    display: inline;
}

.postcard-notes {
    line-height: 1.5;
    letter-spacing: 0;
    --clamp-min: 14;
    --clamp-max: 18;
    font-size: var(--clamp);
    font-weight: var(--font-weight-regular);
}

.p-goods__name p {
    letter-spacing: -0.01em;
    line-height: 1.4;
    --clamp-min: 16;
    --clamp-max: 24;
    font-size: var(--clamp);
    font-weight: var(--font-weight-medium);
}

.p-goods__name p .sub {
    font-size: 80%;
}

.p-goods__name p .small {
    font-size: 70%;
}

.p-goods__img {
    margin-inline: auto;
    margin-block-end: 1em;
    max-width: 620px;
}

.img-sticker-set {
    width: 80%;
}

.p-goods__img img {
    margin-inline: auto;
}

.p-goods__table__list {
    padding-inline: 0;
    margin-inline: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}

.p-goods__table__list > li {
    grid-column: 1 / -1; /* デフォルトは1カラム（全幅） */
}

.p-goods__table__list li {
    padding-block-start: var(--space-sm);
    padding-block-end: var(--space-sm);
    border-bottom: solid 1px #bebebe;
}

.p-goods__table__list:last-of-type > *:last-child {
    border-bottom: none;
}

.grid {
    display: grid;
}

.p-shop-info__place .flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-shop-info .grid--2col {
    margin-inline: auto;
    margin-block-end: 0.5em;
    grid-template-columns: 1fr clamp(72px, calc(155px * var(--r-design)), 155px);
    column-gap: clamp(8px, calc(16px * var(--r-design)), 16px);
    row-gap: clamp(8px, 2%, 24px);
}

.p-shop-info__title {
    width: 100%;
    margin-block-end: 0.3em;
    background-color: var(--color-darkblue);
    letter-spacing: 0.03em;
    line-height: 1.6;
    --clamp-min: 18;
    --clamp-max: 28;
    font-size: var(--clamp);
    color: var(--color-white);
    text-align: center;
    font-weight: var(--font-weight-medium);
    border-radius: 4px;
}

.place__icon {
    width: clamp(40px, calc(80px * var(--r-design)), 80px);
    height: clamp(40px, calc(80px * var(--r-design)), 80px);
    border-radius: 50%;
    margin-inline-end: 0.5em;
    background-color: var(--color-lightblue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    letter-spacing: 0.02em;
    --clamp-min: 16;
    --clamp-max: 28;
    font-size: var(--clamp);
    font-weight: var(--font-weight-bold);
}

.place__text {
    line-height: 1.4;
    --clamp-min: 18;
    --clamp-max: 36;
    font-size: var(--clamp);
    font-weight: var(--font-weight-bold);
}

.place__text--sub{
    line-height: 1.2;
    --clamp-min: 16;
    --clamp-max: 32;
    font-size: var(--clamp);
    font-weight: var(--font-weight-bold);
}

.p-shop-info__image{
    width: clamp(72px, calc(155px * var(--r-design)), 155px);
    height: clamp(72px, calc(155px * var(--r-design)), 155px);
}

.p-shop-info__period {
    margin-block-end: 0.5em;;
    text-align: center;
    padding-block-start: 0.2em;
    padding-block-end: 0.5em;
    border-top: solid 1px;
    border-bottom: solid 1px;
}

.p-shop-info__period p {
    --clamp-min: 16;
    --clamp-max: 25;
    font-size: var(--clamp);
    font-weight: var(--font-weight-medium);
}

.p-shop-info__period span {
    font-size: 90%;
}

.p-box__text--small {
    --clamp-min: 14;
    --clamp-max: 18;
    font-size: var(--clamp);
}

.p-box article:last-of-type {
    margin-block-end: 0;
}

.p-box article:last-of-type > .box__body > *:last-child {
    margin-block-end: 0;
}

.p-giveaway__text {
    width: 100%;
    margin-block-end: var(--space-rg);
    padding-block-end: var(--space-rg);
    border-bottom: solid 1px var(--color-black);
}

.p-giveaway__text p {
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    line-height: 1;
    --clamp-min: 28;
    --clamp-max: 54;
    font-size: var(--clamp);
    font-weight: var(--font-weight-bold);
}

.p-giveaway__text p span {
    --clamp-min: 20;
    --clamp-max: 35;
    font-size: var(--clamp);
}

.p-giveaway__text p span.small {
    --clamp-min: 16;
    --clamp-max: 20;
    font-size: var(--clamp);
}

.p-box__text--area-goods {
    margin-block-end: var(--space-xs);
}

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

.p-area__table__list {
    padding: 0;
}

.p-area__table__list .flex {
    align-items: center;
    justify-content: center;
}

.p-area__table__list li {
    padding-block-start: var(--space-sm);
    padding-block-end: var(--space-sm);
    border-bottom: solid 1px #bebebe;
}

.p-area__table__list:last-of-type > li:last-child {
    margin-block-end: 0;
    border-bottom: none;
}

.p-area__table__list li:nth-of-type(1) .p-goods__img {
    max-width: 54%;
}

.p-area__table__list li:nth-of-type(2) .p-goods__img {
    max-width: 100%;
}

.p-area__table__list li:nth-of-type(3) .p-goods__img {
    max-width: 60%;
    margin-block-end: 0;
}

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

.p-area__title p {
    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-area__title p span {
    font-size: 90%;
}

.p-area__body {
    padding-inline: var(--space-rg);
}

.p-area__table--saxeblue {
    margin-block-start: var(--space-rg);
}

.p-area__title--saxeblue {
    background-color: #63add5;
}

.p-area__body--saxeblue {
    background-color: #eff7fb;
}

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

.p-area__body--green {
    background-color: #e1f1ea;
}

.p-area__title--orange {
    background-color: #f89623;
}

.p-area__body--orange {
    background-color: #feead3;
}

.p-area__table__list .p-goods__img {
    max-width: 80%;
}

.p-area__title p .font-notosans {
    font-family: 'Noto Sans JP', sans-serif;
    --clamp-min: 18;
    --clamp-max: 28;
    font-size: var(--clamp);
    font-weight: var(--font-weight-normal);
}

@media screen and (min-width: 1025px) {
    .p-title__giveaway  {
        margin-inline-start: 7em;
    }

    .p-title__areagoods {
        margin-inline-start: 7em;
    }

    .space {
        display: inline;
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .p-goods__table__list > li.pc_view.flex > div { 
        grid-column: span 1; /* 2カラムのうち1つ分 */
    }

    .p-goods__table__list > li.pc_view.flex > div:first-of-type {
        border-right: solid 1px #bebebe;
    }

    .p-shop-info .grid--2col {
        grid-template-columns: 1fr clamp(72px, calc(155px * var(--r-design)), 155px);
    }

    .p-area__table__list li:nth-of-type(2) .p-goods__img {
        max-width: 90%;
    }

    .item-dioramaacrylicstand, .item-tote-bag,
    .item-sticker-set, .item-mini-towel {
        justify-content: flex-start;
    }

    .img-dioramaacrylicstand, .img-tote-bag,
    .img-sticker-set, .img-mini-towel {
        margin-block-end: 0;
        padding-block-end: 0;
    }

    .img-dioramaacrylicstand {
        width: 50%;
        margin-inline-start: clamp(12px, calc(20px * var(--r-design)), 24px);
    }

    .name-dioramaacrylicstand {
        margin-inline-end: clamp(24px, calc(40px * var(--r-design)), 48px);
    }

    .img-acrylic-block {
        width: 90%;
    }

    .img-button-badge-set {
       width: 90%; 
    }

    .img-tote-bag {
        width: 50%;
        margin-inline-start: clamp(25px, calc(50px * var(--r-design)), 50px);
    }
    
    .name-tote-bag {
        margin-inline-end: clamp(24px, calc(100px * var(--r-design)), 100px);
    }

    .img-sticker-set {
        width: 58%;
        margin-inline-start: clamp(12px, calc(20px * var(--r-design)), 24px);
    }

    .name-sticker-set {
        margin-inline-end: clamp(10px, calc(40px * var(--r-design)), 40px);
    }

    .img-button-badge-mini{
        width: 87%;
    }

    .img-acrylic-keychain {
        width: 87%;
    }

    .img-mini-towel {
        width: 54%;
        margin-inline-start: clamp(12px, calc(40px * var(--r-design)), 40px);
    }

    .name-mini-towel {
        margin-inline-end: clamp(10px, calc(90px * var(--r-design)), 90px);
    }

    .p-area__table--saxeblue, .p-area__table--green,
    .p-area__table--orange {
        margin-inline: clamp(8px, calc(16px * var(--r-design)), 16px);
    }

    .p-area__table__list .item-photo-stand,
    .p-area__table__list .item-clear-poster {
        justify-content: flex-start;
    }

    .item-photo-stand, .item-clear-poster {
        margin-block-end: 0;
        padding-block-end: 0;
    }

    .img-photo-stand {
        width: clamp(110px, calc(220px * var(--r-design)), 220px);
        margin-block-end: 0;
        margin-inline-start: clamp(20px, calc(40px * var(--r-design)), 40px);
    }

    .name-photo-stand {
        margin-inline-end: clamp(20px, calc(40px * var(--r-design)), 40px);
    }

    .img-clear-poster  {
        width: clamp(130px, calc(260px * var(--r-design)), 260px);
        margin-block-end: 0;
        margin-inline-start: clamp(20px, calc(30px * var(--r-design)), 30px);
    }

    .name-clear-poster {
        transform: translateX(clamp(-20px, calc(-20px * var(--r-design)), -10px));
    }

    .name-clear-poster-short {
        transform: translateX(clamp(-70px, calc(-70px * var(--r-design)), -35px));
    }

}

@media (max-width: 374px) {

    .p-title__areagoods {
        margin-inline-start: 3.5em;
    }

    .p-title__giveaway {
        margin-inline-start: 3.5em;
    }

    .p-goods__name {
        width: 100%;
    }
}