@charset "Shift_JIS";

/*==============================================
共通 ここから
================================================*/
main, main#wrapper {
padding: 0;
max-width: none !important;
}
/* パンくず削除 */
#pankuzu {
display: none;
}
#happybag img {
width: 100%;
}
#happybag a {
display: block;
}
#happybag a:hover {
opacity: .8;
}
/* 税込 */
.buy_price>ul .price.sale+.intax,.buy_price>ul .intax {
display: none !important;
}
.spesicalprice {
display: none !important;
}
.smp-none {
display: none;
}
/* マーカー */
span.marker {
background: linear-gradient(transparent 60%, #ffe4d2 40%);
font-weight: bold;
color: #ff3500;
line-height: 1;
}
/*==============================================
共通 ここまで
================================================*/

/*==============================================
#happybag 共通 ここから
================================================*/
#happybag h2,h3,h2 span{font-family: "Zen Kaku Gothic Antique" , sans-serif !important;
  /* font-weight: 400; */
  font-style: normal;}

/* 価格プロ アイコン削除 */
#happybag .ranking .item-block .item-price .price {
color: red;
}
#happybag .ranking .item-block .item-price .price .spesicalprice {
display: none;
}
#happybag .ranking .item-block .item-price .intax {
display: none;
}
#happybag{
width: 100%;
margin: 0 auto;
background-color:#f8ecef ;
}
/* 背景 */
#happybag .back {
background: url(../IMAGE/happybag2025/bg.webp);
margin: 0 auto;
background-color:#f5dadf;
box-sizing: border-box;
background-repeat:no-repeat;
background-size: contain; 
background-position:top;
background: linear-gradient(0.25turn, #b19542, #f8efdc, #b19542);
}
/* 看板 */
#happybag .kanban {
position: relative;
}
#happybag .inner {
width: 100%;
margin: 0 auto;
max-width: 900px;
}
#happybag .backtoback {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
#happybag .section {
margin:0% auto;
overflow: hidden;
background-color: rgba(250, 221, 219, 0.1);
}
#happybag .section.store {
width: 100%;
margin: 0% auto;
overflow: hidden;
background-color:#ab253b ;
}
#happybag .anchor {background-color:initial;}
#happybag section.camp {
margin-top: 4%;
}
#happybag .section-title {
width: 100%;
text-align: center;
}
#happybag #menu_04 .section-title h2 {
font-size: 2em;
}
#happybag #menu_05 .section-title h2 {
font-size:2em;
}
#happybag .section-title h2 .font-s {
color: #fff;
font-size: 0.9em;
display: block;
}
#happybag #menu_05 .section-title h2 .font-s {
color: #fff;
}
#happybag .section-title h2 .font-b {
color: #fff;
font-size:1.5em;
line-height: 1;
}
#happybag .section-title h2 .color-gr {
color: #07c656;
font-size:1.1em;
}

#happybag h2 {
color: #db1717;
background-color: initial;
text-align: center;
font-size: 2em;
}
#happybag h2 span {color: #a81e38; font-size: 1.2em;}

#happybag h3 {
 color: #fff;
background-color: initial;
margin: 2% 0;
font-size: 1.9em;
text-align: center;
}

#happybag h3.item-title {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	text-align: center;
}

#happybag h3.item-title::before,
#happybag h3.item-title::after {
	content: '';
	width: 24px;
	height: 2px;
	background-color: #ea1757;
}

#happybag h3.item-title::before {
	margin-right: 20px;
}
#happybag h3.item-title::after {
	margin-left: 20px;
}
#happybag .section-title h3.guerrilla {
color: #fff5a7;
}
#happybag  .howto h4{
 color: #e9054d;font-size:1.3em;line-height: 2em;}
 #happybag  .howto h5{
 color: #e9054d;font-size:1.2em;}

  #happybag .howto h3 {
background-color: #ea1757;
color: #FFF;
margin: 2% 0;
font-size: 1.6em;
text-align: center;
}

#happybag #store .section-title h2 .font-s,
#happybag #event .section-title h2 .font-s{color: #e12c14 !important;}

/*==============================================
#happybag 共通 ここまで
================================================*/

/*==============================================
アンカー ここから
================================================*/
#happybag .anchor {
width:900px;
background: url(/IMAGE/happybag2025/base_gold.webp);
margin: 0 auto;
background-size:100%;
background-repeat:no-repeat;
background-position:top;
}
#happybag .anchor ul{background-color: #070506;}
#happybag .anchor h2 {
color: #fff;
background-color: initial;
text-align: center;
font-size: 1.8em;
text-shadow: 1px 1px 5px #b58629;
padding: 10px 0;
}

#happybag .anchor p {
font-size: 3.3vw;
text-align: center;
color: #FFF;
margin-bottom: .5%;
}
#happybag .anchor-title {
width: 100%;
background-color: #606060;
}
#happybag .anchor-title p{
color: #fff;
padding: .7% 0;
font-size:1.5em;
font-weight: bold;
margin-bottom: 3%;
}
#happybag .anchor ul  {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: center;
margin: 30px 0;
}
#happybag .anchor ul li  {
width:calc(94%/3);
}

#happybag .anchor .section-title ,
#happybag .anchor ul ,
#happybag .anchor p
{
width: 100%;
margin: 0 auto;
max-width: 900px;}


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

#happybag .anchor ul li{
width: calc(calc(90%) / 4);
margin: 1% 0;
}
#happybag .anchor ul li a{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(168deg, rgba(171, 37, 59, 1) 49%, rgba(207, 90, 100, 1) 50%);
height: 60px;
border:solid #cdbe7d 2px;
}
#happybag .anchor ul div{
display: flex;
align-items: center;
padding:0 5% 2% 0;
}

#happybag .anchor ul a div {
display: flex;
align-items: center;
padding: 0 5% 2% 0;
}
#happybag .anchor ul a h3{
font-size: 26px;
color: #fff;
font-weight: 600;
margin: 0 auto;
}
#happybag .anchor ul a h3 span{
 font-family: "Zen Kaku Gothic Antique", sans-serif !important;
font-size: 37px;
font-weight: 600;
letter-spacing: -0.01em;
}

#happybag .anchor ul h3::after{
position: absolute;
font-family: 'Material Icons';
content: "play_circle_filled";
transform: translateY(50%) rotate(90deg);
font-size: 32px;
font-weight: bolder;
bottom: 50%;
right: 5%;
}

/*==============================================
アンカー ここまで
================================================*/
#happybag .item-box{ padding: 2% 10% 7%;}
#happybag .item-box.dairy{ padding: 2% 10% 6%;}
#happybag .item-box.bottom{ padding: 2% 10% 0;}
#happybag .gift-btn {
display: flex;
gap: 2%;
justify-content: center;
padding-bottom: 3%;
}
#happybag .gift-btn li {
width:calc(90%/2);
border-radius: 5px;
overflow: hidden;
}
/* ボタンテンプレ */
.btn-wrap {
width: 100%;
justify-content: center;
gap: 3%;
transition: .3s;
padding: 2% 0;
}
.btn-wrap a{
position: relative;
display: flex;
justify-content: center;
padding: 3% 12%;
text-align: center;
background-color: #222;
color: #fff;
border-radius: 100vw;
box-sizing: border-box;

}
.btn-wrap a::after {
position: absolute;
display: inline-block;
vertical-align: middle;
content: "";
width: 1.2vw;
height: 1.2vw;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
top: 0;
bottom: 0;
right: 5%;
margin: auto;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all 0.3s ease 0s;
}
/* ボタン注釈 */
.btn-wrap a span.btn-memo {
font-size: 0.8em;
}
.btn-wrap a.red {
background-color: #e40012;
}

/*==============================================
日替わりセール　ここから
================================================*/
#happybag #daily-sale .item-box{
margin: 0 auto;
}
#happybag #daily-sale .item-box.guerrilla_item{
margin: 0 auto;
background-size: 95%;
background-color: #a51111;
}
#daily-sale .items {
display: flex;
justify-content: center;
gap: 2%;
flex-wrap: wrap;
box-sizing: border-box;
margin: 0 auto;
}

/*商品リスト*/
#happybag #daily-sale .items > p {
box-sizing: border-box;
margin-bottom: 1%;
position: relative;
border: 1px solid #f7e264;
padding: 10px;
}

/*売り切れグレーアウト*/
#happybag #daily-sale .items .soldout {
background-color: #3f3f3f;
background-clip: content-box;
position: relative; 
}
#happybag #daily-sale .items .soldout a {
pointer-events: none;
opacity: 0.33;
}
#happybag #daily-sale .items p span::before {
content: "SOLDOUT";
color: #ffffff;
font-size: 6em;
position: absolute;
bottom: 50%;
right: 20%;
}


#daily-sale .items.guerrilla_item > li {
width:100%;
}
#daily-sale .items.guerrilla_item > li > a > dl {
 flex-direction: row;
}

#daily-sale .items > li > a > dl {
display: flex;
justify-content: center;
flex-direction: column;
background-color: #fff;
}
#daily-sale .items > li > a:hover{
color: #222 !important;
}
#daily-sale .items > li > a > dl > dt {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
#daily-sale .items > li > a > dl > dd {
width: 100%;
box-sizing: border-box;
padding: 1% 1% 3% 1%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
gap: .3em;
height: 13em;
}
#daily-sale .items.guerrilla_item > li > a > dl > dd {
width: 88%;
box-sizing: border-box;
padding: 4% 1% 1% 1%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
gap: .3em;
}

#daily-sale .items > li > a > dl > dd .dairy-sale-list,
#daily-sale .items > li > a > dl > dd .dairy-price-list {
width: 100%;
text-align: center;
white-space: nowrap;
}
#daily-sale .items > li > a > dl > dd .dairy-price-list {
margin-bottom: 2%;
}
#daily-sale .items > li > a > dl > dd .dairy-price-list li {
color: #222 !important;
}
#daily-sale .real-price br {
display: none;
}
#daily-sale .price_box {
display: inline-block;
margin: 0 !important;
padding:  0 !important;
}

/* 通常価格 */
#daily-sale .dairy-price-list > ul {
display: inline-flex;
margin: 0 auto;
justify-content: center;
align-items: center;
gap: 3%;
border-bottom: 1px solid #222;
}
#daily-sale .dairy-price-list > ul li,
#daily-sale .dairy-price-list > ul li p {
line-height: 1.3;
}
#daily-sale .dairy-price-list > ul .dairy-price-n__icon p{
font-size: 1em;
white-space: nowrap;
}
#daily-sale .dairy-price-list > ul .dairy-price-n__price .price{
font-size:1em;
color: #222 !important;
}
/* セール価格 */
#daily-sale .dairy-sale-list > ul {
display: flex;
justify-content: center;
align-items: center;
gap: 3%;
margin-bottom: 1%;
}
/* 通常価格 */
#daily-sale .dairy-price-s__normal {
height: 1.3em;
display: flex;
align-items: center;
justify-content: center;
margin: 5px 0 8px;
}
#daily-sale .dairy-price-s__normal p {
border-bottom: 1px solid #222;
line-height: 1.3;
}
/* クーポン */
#daily-sale .dairy-price-s__normal.coupon p {
border-bottom: 1px solid #dd0000;
color: #dd0000;
font-weight: bold;
}
#daily-sale .dairy-price-s__normal.coupon p span {
font-size: 1.4em;
line-height: 1;
}
#daily-sale .items > li:nth-child(1) .dairy-price-s__normal,
#daily-sale .items > li:nth-child(2) .dairy-price-s__normal{
height: 0;
}

#daily-sale .dairy-new {
height: 1.1em;
display: flex;
align-items: center;
justify-content: center;
}
#daily-sale .dairy-new p {
border-bottom: 1px solid #ea1757;
line-height: 1.3;
color: #ea1757;
}
/*半額*/
#daily-sale .dairy-sale-list > ul .dairy-price-s__icon.half {
background-color: #dd0000;
}
#daily-sale .dairy-sale-list > ul .dairy-price-s__icon.half p{
font-size: 1.5em;
line-height: 1.2em;
color:#f1da3e;
}
/* 超目玉 */
#daily-sale .dairy-sale-list > ul .dairy-price-s__icon.medama {
background-color: #f1da3e;
}
#daily-sale .dairy-sale-list > ul .dairy-price-s__icon.medama p {
color: #dd0000 !important;
font-weight: 700;
}
/* クーポン */
#daily-sale .dairy-sale-list > ul .dairy-price-s__icon.coupon {
background-color: #1051c9;
}
#daily-sale .dairy-sale-list > ul .dairy-price-s__icon.coupon p {
color: #FFF !important;
font-weight: 700;
font-size: 1.0em;
line-height: 1.4em;
padding: 0.35em .45em 0.3em;
}
#daily-sale .dairy-sale-list > ul .dairy-price-s__icon {
background-color: #ea1757;
margin-bottom: 2%;
}
#daily-sale .dairy-sale-list > ul .dairy-price-s__icon p{
font-size: 1.1em;
padding: 0.15em .45em;
color: #FFF;
letter-spacing: -0.01em;
}
#daily-sale .dairy-sale-list > ul .dairy-price-s__price{
font-size: 2rem;
color: #dd0000 !important;
text-shadow: 2.5px 2.5px #ffe600;
font-family: "Hind", sans-serif;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.5em;
}
#daily-sale .dairy-sale-list .dairy-price-s__price .price{
font-size: 1.4rem;
color: #dd0000 !important;
/* font-family: Lato; */
}
#daily-sale .items li.intax {
width: auto;
display: none;
}
#daily-sale .items .shosai {
position: relative;
display: block;
font-size: 1em;
padding: 1em 1em 1em 1em;
border-radius: 100em;
background-color: #dd0000;
color: #FFF;
}
#daily-sale .items .shosai::after {
position: absolute;
display: inline-block;
vertical-align: middle;
content: "";
width: .5em;
height:.5em;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
top: 0;
bottom: 0;
right: 42%;
margin: auto;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all .3s ease 0s;
}

#happybag .dairy-sale-list ul{
position: relative;
width: 100%;
padding-right: 8%;
box-sizing: border-box;
}
#happybag .dairy-sale-list ul li.arrow{position: absolute; right: 3%; top: 24%;top: 15%;}



/*==============================================
日替わりセール ここまで
================================================*/
#happybag .item-list-btn {
background: #222;
color: #fff;
border: 2px solid #222;
padding: 1.2%;
border-radius: 50px;
position: relative;
width: 80%;
margin: 20px auto 30px;
text-align: center;
letter-spacing: 0.1em;
font-size: 1.4em;
 }
 #happybag .item-list-btn span {font-size: 1.2em;letter-spacing:0em;}

 #happybag .item-list-btn::after {
 font-family: "Material Icons";
 color: inherit;
 font-size: 1.4rem;
 position: absolute;
 content: "expand_more";
 transform: rotate(270deg);
right: 14px;
   bottom: 21%;
 transition: 0.3s all;
 }
 /*hover*/
 #happybag .item-list li a:hover{
 box-shadow: 0px 0px 10px #d8c1c9;
 }
 #happybag a:hover .item-list-btn{
color: #222 !important;
background: #fff;
border: 2px solid #222;
 }
 #happybag a:hover .item-list-btn::after {
 right: 0.4vw;
 }
   #happybag .item-list-btn.red {
background-color: #e40012;
border: 2px solid #e40012;
}
 /*hover*/
  #happybag a:hover .item-list-btn.red{
color: #e40012 !important;
background: #fff;
border: 2px solid #e40012;
 }

/*==============================================
ストア ここから
================================================*/
#happybag section.store,
#happybag section.camp{
box-sizing: border-box;
padding: 2% 10% 7%;
}
#happybag section.store .store-inner{
display: flex;
flex-wrap: wrap;
  gap: 4%;

}
#happybag section.store .store-inner .store-link{
width:calc(90%/3);
overflow: hidden;
margin-bottom: 4%;
border: 1px solid #cdbe7d;
}
/*==============================================
ストア ここまで
================================================*/
#happybag section .bn {
border-radius: 0;  
margin-bottom: 3% !important;
border: 1px solid #fff; 
}

/*-----------------------------------------------*/
/*トップページ*/
/*-----------------------------------------------*/
#happybag .pagetop {
position: fixed;
bottom: 20px;
right: 20px;
	z-index: 9999;
}

 #happybag .pagetop a ::before {
 font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 22px;
color: #fff;
 } 

#happybag .pagetop a {
	display: flex;
	justify-content: center;
align-items: center;
text-align: center;
	vertical-align: middle;
	color: #fff;
	background:rgba(86,73,68,0.8);
	border-radius: 80px; 
	width:70px;
	height:70px;
}
#happybag .pagetop a:hover{
	color: #fff !important; 
	transform: translateY(-2px);
}

/*==============================================
ページトップ　ここまで
================================================*/
/* 画面下余白削除 */
article#contents {
padding-bottom: 0 !important;
}
footer .bottom {
margin-top: 0 !important;
}


/*==============================================
タブレット　ここから
================================================*/
@media screen and (max-width: 1000px) {
	/* 1000px以下に適用されるCSS（タブレット用） */

/* 左右余白削除 */
footer .footer-inner, header .header, header .information, main, main#wrapper, nav .category_nav {
box-sizing: border-box;
padding: 0 !important;
}
/* 日替わりセール */

/* 商品余白削除 */
#daily-sale .items > li {
padding-left: 1%;
}

/* ページトップボタン */
#happybag .pagetop {
bottom: 1.5em;
right: 1.5em;
}
#happybag .pagetop a {
font-size: .7em;
width: 55px;
height: 55px;
}
}
/*==============================================
タブレット　ここまで
================================================*/
#happybag .howto p{font-size: 1.1em;letter-spacing: -0.001em;margin-bottom:2%;}
#happybag .howto img{margin-bottom: 2%;}
#happybag .item-box { background: url(/IMAGE/happybag2025/base_parts.webp);
 background-repeat: no-repeat;background-size:100% auto;}
#happybag .center{text-align: center;font-size: 1.4em;}

#happybag ul.guerrilla{display: flex;flex-wrap: wrap;}
#happybag ul.guerrilla li{width:calc(100%/3)}

/*==============================================
獲得済み 設定
================================================*/
/*リセット*/
#happybag .action-cpget.disabled{
background-color:unset;
border-color:unset;
pointer-events: none;
position: relative;
}
#happybag .action-cpget:before,
#happybag .action-cpget.status-1:before{
content: none;
}
#happybag .action-cpget {
padding: 0;
display: inline-block;
border-radius: 0;
align-items: center;
background-color:unset;
color: unset;
border:none;
padding:0;
margin:0;
justify-content: center;
text-align: center;
vertical-align: middle;
white-space: nowrap;
cursor: pointer;
}
#cpget_result{
display: none;
}


#happybag .main h1.kanban 
{
width: 100%;
margin: 0 auto;
max-width: 1200px;}
#happybag .main{
background: url(/IMAGE/happybag2025/main_parts.webp);
background-size: 100% auto;
background-color: #a81e38;}


#happybag .food_item {
	margin-bottom: 3%;
}
#happybag .food_item h3 {
	color: #070506;
}
#happybag .food_item .col_2 {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 10px;
}

/*PC用ナビ
=======================*/
#happybag .side_nav { position: fixed; right: 0; top: 400px; width: 10vw;z-index: 99;}
#happybag .side_nav ul { list-style:none}
#happybag .side_nav ul li a{ display: block; 
margin-bottom: 0;
text-align: center; 
font-size: 15px;
padding: 12px 5px; 
color: #fff !important; 
position: relative; 
font-weight: bold;
}
#happybag .side_nav ul li a { border-top: 2px solid #cdbe7d;}
#happybag .side_nav ul li:last-child a { border-bottom: 2px solid #cdbe7d; }
#happybag .side_nav ul li a:hover{
background-color: #ffffff67;
-webkit-transition: 0.5s ease-in-out; 
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#happybag .side_nav ul li.top a {background-color: #e7969a; color: #fff !important; font-size: 18px;}