@charset "utf-8";
/* CSS Document */
:root {
--bkColor:#000;
--primaryColor:#D11905;
--secondaryColor:#B79010;
--bgColor:#FEE3B6;
--fontColor:#fff;
--grayColor:#ECECEC;
--redColor:#EC0000;
--shadowColor:rgba(0, 0, 0, 0.3);
--whiteColor:#fff;
}
/*========= ▼reset ===============*/
/* ブラウザのUAスタイルシートのすべてのスタイルを削除します、displayは除く */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {all: unset;display: revert;}
/* box-sizingの優先値 */
*, *::before, *::after {box-sizing: border-box;}
/* リストのスタイル（箇条書き・番号）を削除します */
ol,ul {list-style: none;}
/* 画像がコンテナを超えないようにするため */
img {max-width: 100%;vertical-align: bottom;}
/* テーブルのセル間のスペースを削除します */
table {border-collapse: collapse;}
/*========= ▲reset ===============*/
*{box-sizing: border-box;}
a {
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
text-decoration: none;
    color: #333;
}
/*========= SFの時にable ===============*/
#HEADER .global{display: none;}
#CONTENTS, body:not(.noGlobal) #CONTENTS {margin-left: 0;padding: 0;}
#FOOTER{margin-left: 0;}
#PAGEBODY{padding-bottom: 0;}
.includeSCT{margin: 5% auto 0;position: relative;z-index: 1;}
.includeSCT .item{box-shadow: 2px 5px 10px var(--shadowColor);}

.includeSCT .name{text-align:left;line-height: 1.5;}
#happybag_2025 ul.action {display: none;}
#happybag_2025 .tag > li {color: var(--bkColor);}
#happybag_2025 .includeSCT .item{height: auto !important;}/*カードの高さ調節*/
#happybag_2025 .includeSCT .kanbai .item::after{
    background: rgba(0, 0, 0, .5);
    position: absolute;
    width: 100%;
    height: 100%;
    content: "完　売";
    top: 0;
    left: 0;
    font-size: 36px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}
#happybag_2025 .includeSCT .kanbai .item:hover{
  transform: none;
}

#happybag_2025 .includeSCT .tag .stockLabel .outStock{
    background: red;
    color: #fff;
}

/*========= SFの時にableここまで ===============*/

#happybag_2025 .font_small {font-size: 80%;}
#happybag_2025 .font_ss{font-size: 70%;}
#happybag_2025 .font_sss{font-size: 65%;}
#happybag_2025 .font_large {font-size: 130%;}
#happybag_2025 .font_ll{font-size: 155%;}
#happybag_2025 .line_center {text-align: center;}
#happybag_2025 .line_right{text-align: right;}
#happybag_2025 .line_left{text-align: left;}
#happybag_2025 .font_bold{font-weight: bold;}
#happybag_2025 .font_red {color: var(--redColor);}

/*========= 梅のためのCSS ===============*/
canvas {
  display: block;
  vertical-align: bottom;
} /* ---- particles.js container ---- */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
} 

#happybag_2025 {overflow: hidden;font-family:  "Noto Sans JP", sans-serif;font-optical-sizing: auto; font-weight: 400;font-style: normal;line-break: strict;word-wrap: break-word;word-break: break-all!important;line-height: 1.7;color: var(--fontColor);max-width: 1920px;margin: auto;background: var(--bgColor);line-height: 1.6;}
#happybag_2025 h2 {font-family: "Noto Sans JP", sans-serif; line-break: strict;word-break: break-word;letter-spacing:inherit;line-break: strict;overflow-wrap: break-word;word-wrap: break-word;word-break: normal !important;letter-spacing:inherit;}

#happybag_2025 section{position: relative;}
#happybag_2025 .secInner {position: relative;max-width: 1280px; width: 90%; margin: 0 auto;padding: 3.5% 0;z-index: 2;}
#happybag_2025 .videoWapper{position: relative;z-index: 0;}
#happybag_2025 section {position: relative;margin: 0;padding: 0;}
#happybag_2025 #video-area{position: relative;overflow: hidden;}
#happybag_2025 #video-area video {width: 100%;height: auto;}

#happybag_2025 .abImg {position: absolute;}

#happybag_2025 #sec02 .secInner {
  padding-top: 1%;
}
#happybag_2025 .mizuhiki{
  width: 15%;
  margin: 0.7em auto 1.5em;
}

#happybag_2025 #sec02::before{
  content: "";
  display: block;
  position: absolute;
  bottom: 35%;
  left: -7%;
  width: 27%;
  height: 37%;
  background-image: url("feature_happybag_2025/fuji.png?$staticlink$");
  background-size: contain;
  background-repeat: no-repeat;
}
#happybag_2025 #sec02::after{
  content: "";
  display: block;
  position: absolute;
  top: 14%;
  right: 5%;
  width: 18%;
  height: 20%;
  background-image: url("feature_happybag_2025/seigaiha.png?$staticlink$");
  background-repeat: no-repeat;
  background-size: contain;
  visibility: visible;
}
#happybag_2025 .lead {
  text-align: center;
  font-size: clamp(14px, 1.25vw, 20px);
  font-weight: 400;
  color: var(--bkColor);
}
#happybag_2025 .btnArea{
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
#happybag_2025 .btnArea li {
  flex-basis: 30%;
  margin: 3% 1%;
}
#happybag_2025 .btnArea li .fontawesome {
  margin-left: 10px;
}
#happybag_2025 .btnArea .btn01 a{
  display: block;
  background: var(--primaryColor);
  border-radius: 10px;
  box-shadow: 0px 5px 10px var(--shadowColor);
  padding: 0.5em;
  font-size: clamp(21px, 2.4vw, 38px);
  font-weight: 500;
  color: var(--whiteColor);
  text-align: center;
  transition: all .3s;
}
#happybag_2025 .btnArea .btn02 a{
  display: block;
  background: var(--secondaryColor);
  border-radius: 10px;
  box-shadow: 0px 5px 10px var(--shadowColor);
  padding: 0.5em;
  font-size: clamp(21px, 2.4vw, 38px);
  font-weight: 500;
  color: var(--whiteColor);
  text-align: center;
  transition: all .3s;
}
#happybag_2025 h2 {
  display: flex;
  align-items: center;
  font-size: clamp(23px, 2.75vw, 44px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--primaryColor);
}
#happybag_2025 h2::before,
#happybag_2025 h2::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: var(--primaryColor);
}
#happybag_2025 h2::before {
  margin-right: 0.7em;
}
#happybag_2025 h2::after {
  margin-left: 0.7em;
}

#happybag_2025 #sec03,
#happybag_2025 #sec04 {
  padding: 5% 0;
}
#happybag_2025 .ulFlex{
  display: flex;
  flex-wrap: wrap;
}
#happybag_2025 .ulFlex > li {
  flex-basis: calc(100% / 4);
}
#happybag_2025 .abCloud{position: absolute;}
#happybag_2025 .cloudLeft{top: 15%;left: -7%; width: 20%;}
#happybag_2025 .cloudRight{bottom: 15%; right: -7%;width: 20%;}
#happybag_2025 .seigaihaLeft{bottom: 20%;left: -7%; width: 20%;}
#happybag_2025 .seigaihaRight{top: 20%; right: -7%;width: 20%;}
#happybag_2025 #fuji {
  background: url("feature_happybag_2025/bg_fukubukuro.png?$staticlink$") no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}
#happybag_2025 #butterfly {
  background: url("feature_happybag_2025/bg_hatsuuri.png?$staticlink$") no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
}
#happybag_2025 .rest{
  height: 170px;
}

#happybag_2025 .pumaUL{
  display: flex;
  flex-wrap: wrap;
}
#happybag_2025 .pumaUL > li {
  flex-basis: calc(100% / 3);
  color: var(--bkColor);
  padding: 16px;
}
#happybag_2025 .itemArea {
  box-shadow: 2px 5px 10px var(--shadowColor);
  padding: 16px;
  background: var(--whiteColor);
  border-radius: 5px;
  transition: all .5s;
}
#happybag_2025 .proName {
  font-size: 15px;
  margin: 8px auto;
}
#happybag_2025 .proPrice{
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:4px;
  background: #eee;
  border-radius: 3px;
  padding: 4px;
  line-height: 1.3;
  min-height: 3em;
}
#happybag_2025 .proPrice > span {
  font-size: 12px;
  font-weight: 400;
}
#happybag_2025 #sec04 h2 {
  color: var(--secondaryColor);
}
#happybag_2025 h3 {
  color: var(--secondaryColor);
  font-size: clamp(18px, 1.75vw, 28px);
  font-weight: 500;
  text-align: center;
}
#happybag_2025 #sec04 h2::before,
#happybag_2025 #sec04 h2::after {
  background-color: var(--secondaryColor);
}
#happybag_2025 #link01,
#happybag_2025 #link02 {
  padding-top: 100px;
  margin-top: -100px;
}


#PAGEBOTTOM{
  position: relative;
  z-index: 3;
}
@media (any-hover: hover) {
/*:hover はここに書く*/
.includeSCT .item:hover{transform:translateY(-5px);box-shadow: 2px 10px 20px var(--shadowColor);}
  #happybag_2025 .itemArea:hover{
    transform: translateY(-5px);
  }
#happybag_2025 .btnArea .btn01 a:hover {
  transform: translateY(-5px);
  background: #F81800;
}
#happybag_2025 .btnArea .btn02 a:hover {
  transform: translateY(-5px);
  background: #E8B200;
}

}


.pad-only {display: none!important;}
.pad-pc {display: block !important;}
.pc-only {display: block!important;}
.sp-only {display: none !important;}

/************************************************************/@media screen and (max-width: 1279px) {
  #HEADER .global{display: block;}
}

/************************************************************/@media screen and (max-width: 820px) {
  #happybag_2025 .pumaUL > li {
    padding: 16px 8px;
  }
  #happybag_2025 .ulFlex > li{
    flex-basis: calc(100% / 3);
  }
  #happybag_2025 .rest {
    height: 150px;
}
.pad-only {display: block !important;}
.pad-pc {display: block !important;}
.pc-cam {display: none !important;}
.sp-cam {display: none !important;}
}
/************************************************************/@media screen and (max-width: 768px) {
  
}
/************************************************************/@media screen and (max-width: 700px) {
  #happybag_2025 .btnArea li {
    flex-basis: 48%;
  }
  #happybag_2025 .ulFlex > li{
    flex-basis: calc(100% / 2);
  }
  #happybag_2025 .btnArea li .fontawesome{
    margin-left: 0;
    display: block;
    margin: auto;
  }
  #happybag_2025 .mizuhiki{
    width: 30%;
  }
  #happybag_2025 .lead{margin: 0.5em;text-align: left;}
  #happybag_2025 #sec02::before, #happybag_2025 #sec02::after{
    display: none;
  }
  #happybag_2025 .rest{
    height: 100px;
  }
  #happybag_2025 .pumaUL{
    flex-direction: column;
  }
  #happybag_2025 .pumaUL > li{
    flex-basis: calc(100% / 1);
  }
  
  
  
.pad-sp {display: block !important;}
.pc-only {display: none !important;}
.sp-only {display: block !important;}
.pad-cam {display: none !important;}
.pad-pc {display: none !important;}
}