@charset "euc-jp";


/*///////////////////////////////////////////////////////////////////
reset
/////////////////////////////////////////////////////////////////////*/
*,
*::before,
*::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box
}

:where([hidden]:not([hidden='until-found'])) {
        display: none !important
}

:where(html) {
        -webkit-text-size-adjust: none;
        color-scheme: dark light;
        tab-size: 2;
        scrollbar-gutter: stable
}

:where(html:has(dialog:modal[open])) {
        overflow: clip
}

@media (prefers-reduced-motion:no-preference) {
        :where(html:focus-within) {
                scroll-behavior: smooth
        }
}

:where(body) {
        line-height: 1.5;
        font-family: system-ui, sans-serif;
        -webkit-font-smoothing: antialiased
}

:where(button) {
        all: unset
}

:where(input, button, textarea, select) {
        font: inherit;
        color: inherit
}

:where(textarea) {
        resize: vertical;
        resize: block
}

:where(button, label, select, summary, [role='button'], [role='option']) {
        cursor: pointer
}

:where(:disabled) {
        cursor: not-allowed
}

:where(label:has(>input:disabled), label:has(+input:disabled)) {
        cursor: not-allowed
}

:where(a) {
        color: inherit;
        text-underline-offset: .2ex
}

:where(ul, ol) {
        list-style: none
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
        display: block
}

:where(img, picture, svg, video) {
        max-inline-size: 100%;
        block-size: auto
}

:where(p, h1, h2, h3, h4, h5, h6) {
        overflow-wrap: break-word
}

:where(h1, h2, h3) {
        line-height: calc(1em + 0.5rem);
        text-wrap: balance
}

:where(hr) {
        border: none;
        border-block-start: 1px solid;
        color: inherit;
        block-size: 0;
        overflow: visible
}

:where(dialog) {
        border: none;
        background: none;
        inset: unset;
        max-width: unset;
        max-height: unset
}

:where(dialog:not([open])) {
        display: none !important
}

:where(:focus-visible) {
        outline: 3px solid CanvasText;
        box-shadow: 0 0 0 5px Canvas;
        outline-offset: 1px
}

:where(:focus-visible, :target) {
        scroll-margin-block: 8vh
}

:where(.visually-hidden:not(:focus-within, :active)) {
        clip-path: inset(50%) !important;
        height: 1px !important;
        width: 1px !important;
        overflow: hidden !important;
        position: absolute !important;
        white-space: nowrap !important;
        border: 0 !important
}

img {
        width: 100%;
}

h1,
h2,
h3,
h4,
h5,
p {
        margin: 0;
        padding: 0;
        font-size: 100%;
}

/*///////////////////////////////////////////////////////////////////

base

/////////////////////////////////////////////////////////////////////*/

#happybag {
        color: #403732;
        background-color: #f4f338;
        font-size: 14px;
        font-family: "Noto Sans JP", sans-serif;
        text-align: center;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 650px 1fr;
}

.smp,
.hidden {
        display: none !important;
}

.inner {
        position: relative;
        z-index: 1;
}

a {
        text-decoration: none;
        color: #403732;
}

/*///////////////////////////////////////////////////////////////////

�ƥ�����

/////////////////////////////////////////////////////////////////////*/

/*����*/
.main h2 {
        font-size: 36px;
        color: #fff;
        font-weight: 900;
        text-shadow: 3px 3px 0 #372e2e, -1px -1px 0 #372e2e, -1px 1px 0 #372e2e, 1px -1px 0 #372e2e, 0px 1px 0 #372e2e, -1px 0 #372e2e, -1px 0 0 #372e2e, 1px 0 0 #372e2e;
}

h2.sub {
        font-size: 30px;
}

/*���Ф����ƥ�����*/
h3 {
        margin: 1rem;
        color: #fff;
        font-size: 16px;
}

/*����̾*/
h4 {
        margin: 0.5rem;
}

/*���ƥ���*/
h5 {
        font-size: 24px;
        color: #fff;
        font-weight: 900;
        margin-bottom: 20px;
        text-shadow: 3px 3px 0 #372e2e, -1px -1px 0 #372e2e, -1px 1px 0 #372e2e, 1px -1px 0 #372e2e, 0px 1px 0 #372e2e, -1px 0 #372e2e, -1px 0 0 #372e2e, 1px 0 0 #372e2e;
}


/*--��������--*/
.check {
        position: absolute;
        background-color: #403732;
        color: #e9e3db;
        padding: 4px 10px;
        top: 0;
        left: 0;
}


/*�դ�����*/
.balloon1 {
        position: relative;
        display: inline-block;
        margin: 1.5em 0;
        padding: 7px 10px;
        min-width: 120px;
        max-width: 100%;
        font-size: 16px;
        background: #f955a7;
        animation: btn_animation 2s infinite;
}

.balloon1:before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 15px solid #f955a7;
}

.balloon1 h2 {
        color: #f3f0ec !important;
        margin: 0;
        padding: 0;
        margin: 0.5rem 2rem;
}


@keyframes btn_animation {
        0% {
                transform: translate(4px, 0px);
        }

        5% {
                transform: translate(-4px, 0px);
        }

        10% {
                transform: translate(4px, 0px);
        }

        15% {
                transform: translate(-4px, 0px);
        }

        20% {
                transform: translate(4px, 0px);
        }

        25% {
                transform: translate(-4px, 0px);
        }

        30% {
                transform: translate(0px, 0px);
        }
}




/*///////////////////////////////////////////////////////////////////

�ѡ���

/////////////////////////////////////////////////////////////////////*/


/*--�����طʳѴݥܥ���--*/
.button_blk {
        background-color: #403732;
        position: relative;
        border-radius: 90px;
        font-size: 12px;
        padding: 0.5rem 4rem;
        width: fit-content;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e9e3db;
}

.button_blk a {
        color: #e9e3db;
}

a .button_blk:hover {
        background-color: #f955a7;
        transition: all .18s ease-in-out;
}

/*--���п��δݤ���������--*/
.i_notification {
        position: absolute;
        right: 10px;
        top: -10px;
        background-color: #97c803 !important;
        border-radius: 90px;
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 14px;
}

.i_notification p {
        color: #e9e3db !important;
        font-size: 10px;
}

/*�����륢������*/
.main .i_notification {
        top: 10px;
        padding: 19px 5px;
}

.main .i_notification p {
        font-size: 14px;
}

/*--�Хʡ�--*/
.bn_icon {
        gap: 20px;
        display: flex;
        justify-content: center;
        margin: 10px 0 0;
}

.bn_icon .icon_r {
        background-color: #403732;
        color: #e9e3db;
        border-radius: 90px;
        display: flex;
        width: 22px;
        height: 22px;
        justify-content: center;
        align-items: center;
}


.bn_event {
        gap: 10px;
        display: flex;
        width: 80%;
        margin: auto;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
}

.bn_event a {
        width: calc((100% - 10px)/ 2)
}

/*///////////////////////////////////////////////////////////////////

manu

/////////////////////////////////////////////////////////////////////*/
#happybag .allRecipes__content {
        /*margin-top: 32px;*/
        padding: 70px 32px 40px;
        background: linear-gradient(to bottom, #f26262, #f3ec5d, #f3ec5d, #f3ec5d, #fd80cb);
}

#happybag .Anchors {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /*grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));*/
        gap: 16px;
        justify-content: center;
        align-items: center;
        margin: 0 40px;
}

#happybag .Anchors li {
        align-items: center;
        width: calc((100% - 50px) / 2);
}


#happybag .Anchors__anchor {
        display: block;
        aspect-ratio: 148/88
}

#happybag .Anchors__anchor>img {
        max-width: 100%;
        height: auto
}

/*�ܥ�����*/
.menu_button {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 30px 0;
}

.menu_button a {
        height: 5rem;
        width: calc((100% - 20px) / 3);
        display: flex;
        justify-content: center;
        border-radius: 20px;
        border: #f955a7 1px solid;
        line-height: 1.2rem;
        color: #f955a7;
        transition: all .18s ease-in-out;
        align-items: center;
}

.menu_button a:last-child {
        flex: 100%;
        /* ������100%�ˤ���1��� */
}

.menu_button a:hover {
        text-shadow:
                0 0 30px rgba(255, 136, 80, 1),
                0 0 60px rgba(255, 136, 80, 0.8),
                0 0 75px rgba(255, 136, 80, .6),
                0 0 80px rgba(255, 136, 80, .4),
                0 0 77px rgba(255, 136, 80, .5),
                0 0 78px rgba(255, 136, 80, .4),
                0 0 79px rgba(255, 136, 80, .3),
                0 0 80px rgba(255, 136, 80, .2),
                0 0 120px rgba(255, 136, 80, .1);
}




/*///////////////////////////////////////////////////////////////////

header

/////////////////////////////////////////////////////////////////////*/

header {
        /*border-left: 45px solid #bfb7ab;*/
        /*position: fixed;
    z-index: 99;*/
        left: 0;
        top: 0;
        font-size: 14px;
        font-weight: 600;
        background-color: #f4f338;
        min-width: 475px;
        height: 10vh;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        min-height: 700px;
        /* margin: auto; */
        /* padding: 153px 40px 48px; */
        position: sticky;
}

/*------nav------*/

header nav .inner {
        width: 100%;
        max-width: 510px;
        padding: 40px;
        box-sizing: border-box;
}

header nav h1 img {
        width: 80%;
        margin: auto;
}


/*///////////////////////////////////////////////////////////////////

main

/////////////////////////////////////////////////////////////////////*/

.main {
        /*margin-left: 500px;*/
        max-width: 650px;
        position: relative;
        z-index: 1;
        box-shadow: 0 4px 50px #00000073;
}

.main section>.inner {
        max-width: 650px;
        margin: auto;
        padding: 50px 0;
}


/*�ե������ȥӥ塼*/
.main #top {
        background-color: #f26262;
        position: relative;
        /*height: 100vh;*/
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f3f0ec;
        /*color: #403732;*/
        /*    font-family: "Zen Maru Gothic", serif;*/
        font-weight: 900;
        font-style: normal;
}

.topimage {
  position: relative;
  width: 100%;
  background: #f26262;
  overflow: hidden;
}

.topimage h1{
  position: relative;
  height: 100%;
}

.topimage .kanban{
  width: 100%;
  height: 100%;
  object-fit: cover;  /* ɬ�פ˱����� contain ��Ƥ */
  display: block;
  pointer-events: none;
}

@media (min-width: 768px){
  .topimage{ aspect-ratio: 14 / 9; } /* 16/9 ��­��ʤ����ΰ������� */
}

.topimage h1 .tit {
        position: absolute;
}

.topimage h1 .t2 {
        width: clamp(280px, 75%, 860px);
        z-index: 3;
        left: 12%;
        top: 1.5vw;
        animation: popUp .5s ease-out forwards;
        animation-delay: .75s;
}

@keyframes popUp {
        0% {
                transform: scale(0);
                opacity: 0;
        }

        55% {
                transform: scale(1.3);
                opacity: 1;
        }

        70% {
                transform: scale(1);
                opacity: 1;
        }

        85% {
                transform: scale(1.2);
                opacity: 1;
        }

        100% {
                transform: scale(1);
                opacity: 1;
        }
}

@-webkit-keyframes popUp {
        0% {
                transform: scale(0);
                opacity: 0;
        }

        55% {
                transform: scale(1.3);
                opacity: 1;
        }

        70% {
                transform: scale(1);
                opacity: 1;
        }

        85% {
                transform: scale(1.2);
                opacity: 1;
        }

        100% {
                transform: scale(1);
                opacity: 1;
        }
}
.topimage{ aspect-ratio: 16/9; }

.topimage h1 .item1{ width: clamp(140px, 24%, 280px);
        left: 2%;
        z-index: 5;
        top: 0; animation: item_anime1 3s ease-in-out infinite alternate-reverse;}
.topimage h1 .item2{ width: clamp(160px, 24%, 280px); left: 2%; z-index: 5;bottom: 3%;animation: item_anime1 3s ease-in-out infinite alternate-reverse; }
.topimage h1 .item3{ width: clamp(120px, 18%, 240px); z-index: 5;right: 1%;top: 40%;animation: item_anime1 3s ease-in-out infinite alternate-reverse; }
.topimage h1 .item4{ width: clamp(90px, 17%, 180px);z-index: 5; right: 8%; top: 0; animation: item_anime2 2s ease-in-out infinite alternate-reverse;}
.topimage h1 .item5{ width: clamp(160px, 24%, 300px); z-index: 5;right: 10%;bottom: 2%; animation: item_anime2 2s ease-in-out infinite alternate-reverse;}
.topimage h1 .item6{ width: clamp(110px, 16%, 220px); z-index: 5;left: 1%; top: 6vw;animation: item_anime2 2s ease-in-out infinite alternate-reverse; }
.ir_bag {
  position: absolute;
  right: clamp(8px, 2vw, 24px);
  bottom: clamp(8px, 10vw, 144px);
  z-index: 3;
  animation: item_anime2 4s ease-in-out infinite alternate-reverse;
}
.ir_bag img { width: clamp(120px, 18vw, 260px); }


@keyframes item_anime1 {
        0% {
                transform: translate(0, -4%);

        }

        100% {
                transform: translate(0, 4%);
        }
}

@keyframes item_anime2 {
        0% {
                transform: translate(0, 4%);
        }

        100% {
                transform: translate(0, -4%);
        }
}



.cornermain_wrap {
        backdrop-filter: blur(5px) !important;
        background-color: #f26262;
}

.corner_wrap {
        backdrop-filter: blur(5px) !important;
        background-color: #fd80cb;
}

/*///////////////////////////////////////////////////////////////////

main > item

/////////////////////////////////////////////////////////////////////*/
.item {
        margin: 30px 10px 0;
}

.item>ul {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
}

.swiper2>ul li.clm_1 {
        width: 90%;
        /*height: 87vh;*/
        background-color: #fff;
        margin: 0 5px;
        justify-content: space-between;
}

.item>ul li.clm_2 {
        width: calc((100% - 20px)/ 2);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #fff;
}

/*����̾�����ʲ���*/
.item_title {
        position: relative;
        margin: 5px;
}

.item_title p {
        font-size: 1.5em;
        margin: 0.5rem 1rem;
}

/*�����������*/
.item_type {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1px;
        justify-content: space-between;
}

.item_type a {
        flex-grow: 1;
}

.item_type div:first-of-type {
        display: flex;
        padding: 0.5rem 0;
        justify-content: center;
        background-color: #f955a7;
        color: #e9e3db;
}

.item_type div:hover {
        background-color: #f955a7d7;
}

.item_type h5 span {
        font-size: 10px;
        margin-left: 0.5rem;
}

.prices {
        color: #f955a7;
        margin: 0.5rem auto;
        font-size: 25px;
}

.item-price-box {
        width: 100%;
        display: block;
        position: relative;
        padding: 5px;
}

.item-price-box::after {
        content: '';
        width: 10px;
        height: 10px;
        border-top: 3px solid #f955a7;
        border-right: 3px solid #f955a7;
        transform: rotate(45deg) translateY(-50%);
        position: absolute;
        top: 50%;
        right: 20px;
        border-radius: 1px;
        transition: 0.3s ease-in-out;
}

#happybag .item__ {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 5px;
}

#happybag .item__flip {
        width: 100%;
        position: relative;
        aspect-ratio: 1 / 1;
}

#happybag .item__image {
        display: block;
        position: relative;
        z-index: 1;
        perspective: 1600px
}

#happybag .item__foreground,
#happybag .item__background {

        width: 100%;
        overflow: hidden;
        border-radius: 8px;
        position: absolute;
        top: 0;
        left: 0;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transition: transform .9s cubic-bezier(.175, .885, .23, 1.105)
}

#happybag .item__foreground>img,
#happybag .item__background>img {
        width: 100%;
        height: 100%;
        object-fit: cover
}

#happybag .item__foreground {
        transform: rotateY(0)
}

#happybag .item__foreground[data-flipped=true],
#happybag .item__background {
        transform: rotateY(180deg)
}

#happybag .item__background[data-flipped=true] {
        transform: rotateY(360deg)
}

#happybag .flipButton {
        display: block;
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 2;
        width: 15%;
}

#happybag .item__genre {
        display: inline-flex;
        padding: 5px 10px;
        margin: 10px 0 4px 5px;
        border-radius: 9999em;
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
}

.item__genre_group {
        display: flex;
        /* ������ʬ�������¤Ӥˤ��� */
        gap: 10px;
        /* ���Ǵ֤Υ��ڡ�����Ǥ�ա� */
}

#happybag .item__genre[data-genre=c04] {
        background-color: #ffc4d2
}

#happybag .item__genre[data-genre=c05] {
        background-color: #9fdefe
}

#happybag .corner_wrap[data-genre=c_05] {
        background-color: #91d7fa
}

#happybag .item__genre[data-genre=c06] {
        background-color: #dacb99
}

#happybag .corner_wrap[data-genre=c_06] {
        background-color: #dac78c
}

#happybag .item__genre[data-genre=c07] {
        background-color: #f9bd71
}

#happybag .corner_wrap[data-genre=c_07] {
        background-color: #f7b764
}

#happybag .item__genre[data-genre=c08] {
        background-color: #9dd6d6
}

#happybag .corner_wrap[data-genre=c_08] {
        background-color: #8acece
}

#happybag .item__name {
        display: flex;
        font-size: 18px;
        margin-left: 5px;
        font-weight: 600;
        line-height: 1.6;
        color: inherit;
        text-align: center;
}


#happybag .item__spec {
        display: inline-flex;
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.6;
        color: #fff;
        text-align: left;
        background-color: #f26262ab;
        width: 100%;
}

#happybag .clm_1 .item__spec {
        background-color: #f26262ab;
}

/*�������*/
.item .keyword {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 1rem 2rem;
        gap: 20px;
        margin: 20px 0;
        border: #ffffff91 1px solid;
}

.item .keyword p {
        background-color: #ffffff91;
        padding: 0.5rem 1rem;
        border-radius: 10px;
}

/*���֥���*/
.subcate {
        background-color: #f696d0;
        border-radius: 20px;
        padding: 20px;
        margin: 20px 0;
}


/*///////////////////////////////////////////////////////////////////

���Ȥ������ʡ�/�ݤ��ݤ�����

/////////////////////////////////////////////////////////////////////*/


#c_otoku p,
#c_pkpkcp p {
        display: flex;
        align-items: center;
        justify-content: center;
}


#c_pkpkcp .button_blk {
        border: #f955a7 1px solid;
}

#c_pkpkcp h2 {
        font-size: 14px;
        color: #f955a7;
}


#c_pkpkcp h3 {
        font-size: 20px;
        font-weight: 900;
}

span.wave {
        text-decoration: #f955a7 wavy underline;
}



/*///////////////////////////////////////////////////////////////////

���� 

/////////////////////////////////////////////////////////////////////*/

.blinking {
        -webkit-animation: blink 1.5s ease-in-out infinite alternate;
        -moz-animation: blink 1.5s ease-in-out infinite alternate;
        animation: blink 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
        0% {
                opacity: 0;
        }

        100% {
                opacity: 1;
        }
}

@-moz-keyframes blink {
        0% {
                opacity: 0;
        }

        100% {
                opacity: 1;
        }
}

@keyframes blink {
        0% {
                opacity: 0;
        }

        100% {
                opacity: 1;
        }
}


/*///////////////////////////////////////////////////////////////////

blur

/////////////////////////////////////////////////////////////////////*/
.blur {
        animation-name: blurAnime;
        animation-duration: 1s;
        animation-fill-mode: forwards;
}


@keyframes blurAnime {
        from {
                filter: blur(10px);
                transform: scale(1.02);
                opacity: 0;
        }

        to {
                filter: blur(0);
                transform: scale(1);
                opacity: 1;
        }
}

/* ==================================================
���饤����
================================================== */
.slider {
        position: relative;
        overflow: hidden;
        width: 100%;
}

.slider .slider_inner {
        width: 90%;
        /*height: 300px;*/
        /*margin: 0 auto 30px;*/
}

.slider .swiper-slide {
        opacity: 0.6;
        transition: all 0.2s;
}

.slider .swiper-slide.swiper-slide-active {
        opacity: 1;
}

.slider .swiper-slide a {
        display: block;
        /*margin: 1px -14.5px 0px;*/
}

.slider .swiper-pagination {
        bottom: 20px;
        display: block;
        position: fixed;
}

.slider .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 4px;
}

.slider .swiper-pagination-bullet {
        background: #686767;
        opacity: 1;
}

.slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #f9f531;
}

/* ==================================================
���ط�
================================================== */
#happybag .rightColumn {
        position: relative
}

#happybag .pcImageContainer {
        height: 100vh;
        position: sticky;
        top: 0;
        border-right: 8px solid #f15fb7
}

#happybag .pcImage {
        display: block;
        flex: 1;
        height: 100%
}

#happybag .pcImage>img {
        width: 100%;
        height: 100%;
        object-fit: cover
}

#happybag .copyright {
        display: block;
        position: absolute;
        right: 40px;
        bottom: 20px;
        z-index: 1;
        font-size: 11px;
        line-height: 1.8;
        color: #f15fb7
}

/* ==================================================
TOP��
================================================== */
#happybag .page-top {
        position: fixed;
        right: 50px;
        bottom: 50px;
}

#happybag .page-top a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        background-color: #fff;
        box-shadow: 0px 3px 1px 0px rgb(66 37 18 / 15%);
        border-radius: 50%;
        font-weight: 400;
        text-align: left;
        writing-mode: vertical-rl;
        line-height: 1.3;
        padding: 0 0 3px 0;
        z-index: 10000 !important;
        right: 20px;
        transition: 0.4s;
}

#happybag .page-top a:hover {
        background-color: #f15fb7;
}

#happybag .dli-arrow-up {
        display: inline-block;
        vertical-align: middle;
        color: #000;
        line-height: 1;
        position: relative;
        width: 0.1em;
        background: currentColor;
}

#happybag .dli-arrow-up::before {
        content: '';
        width: 0.68em;
        height: 0.68em;
        border: 0.14em solid currentColor;
        border-left: 0;
        border-bottom: 0;
        transform: rotate(-45deg);
        transform-origin: top right;
        position: absolute;
        top: -0.1em;
        right: 50%;
        box-sizing: border-box;
}

details {
  width: 100%;
  }
details summary {
  cursor: pointer;
  list-style: none;
text-align: left;
margin-left: 5px;
color: #f69696;
}
details summary::marker {
  display: none; /* �ǥե���Ȥ������ä� */
}
details summary::before {
  content: "�� ";
  font-weight: bold;
    width: 100%;
}
details[open] summary::before {
  content: "�� ";

}