@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');


/*-----------------------------------------
-------------------------------------------
-------------------------------------------
-------------------------------------------

目次　※各々レスポンシブ対応あり

01 共通部分設定＆リセットCSS
02 ヘッダーの設定
03 コンテンツの設定
04 フッターの設定
05 メニュー関連

-------------------------------------------
-------------------------------------------
-----------------------------------------*/

/*-----------------------------------------
01 共通部分設定＆リセットCSS
-------------------------------------------*/
body {
  padding: 0;
  margin: 0;
}

div.body {
  margin: auto;
  min-width: 1100px;
}

@media screen and (max-width:768px) {
  div.body {
    min-width: auto;
  }
}

div.body * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.center {
  width: calc(100% - 20px);
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

@media screen and (max-width:768px) {
  .center {
    max-width: 500px;
  }
}

.body a {
  transition: all 0.3s ease 0s;
  text-decoration: none;
}

.body a:hover {
  opacity: 1;
}

.body img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.body p,
.body a,
.body h1,
.body h2,
.body h3,
.body h4,
.body li,
.body span,
.body div {
  text-shadow: none;
  margin: auto;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif !important;
  color: var(--gray01);
}

.body li {
  list-style: none;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (max-width:768px) {
  .sp {
    display: block;
  }

  .pc {
    display: none;
  }
}


.fnt-main {
  font-family: 'Noto Sans JP', sans-serif;
}

:root {
  --new-year: #EA425F;
  --heating: #DD5F19;
  --snow: #1A467D;
}

/*-----------------------------------------
01 共通部分設定＆リセットCSS　ここまで
-------------------------------------------*/

/*-----------------------------------------
02 ヘッダーの設定
-------------------------------------------*/
.headGrp div.wrap01 {
  padding: 30px 15px 40px;
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/winter-newyear-bg.png)no-repeat 50% 40% / cover;
}

.headGrp .wrap01 h1 {
  max-width: 800px;
}
p.notes-red{
  display: block;
  max-width: 900px;
  padding: 15px 18px;
  margin: 20px auto 0;
  border-radius: 5px;
  font-size: 15px;
  background: rgba(255,255,255,0.6);
  color: #e72f16;
}

@media screen and (max-width:768px) {
  .headGrp div.wrap01 {
    padding: 10% 15px;
    background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/winter-newyear-bg-sp.png)no-repeat 50% 40% / cover;
  }
  .headGrp .wrap01 h1{
    max-width: 500px;
  }
}


/*-----------------------------------------
02 ヘッダーの設定　ここまで
-------------------------------------------*/

/*-----------------------------------------
03 コンテンツの設定
-------------------------------------------*/

/*背景*/
.mainGrp div.wrap {
  padding: 60px 0;
}

.mainGrp div.wrap div.center {
  width: 90%;
  max-width: 1080px;
}

.mainGrp {
  margin-top: 96px;
  background: linear-gradient(90deg, #ffc27c 10%, #ffeec8 50%, #ffc27c 90%), #FFE2B3;
}

.mainGrp div.wrap01 {
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/snow.png)no-repeat center / contain fixed, #FFE2B3;
}

.mainGrp div.wrap02 {
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/snow.png)no-repeat center / contain fixed, #C0E1F2;
  padding-bottom: 30px;
}

div.new-year-cloud {
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/pattern.png)repeat center / 70px fixed, #f8d9bf;
  padding-bottom: 30px;
  position: relative;
  overflow: hidden;
}

div.new-year-cloud::before,
div.new-year-cloud::after {
  content: "";
  display: block;
  width: 1000px;
  height: 500px;
  position: absolute;
  top: 50vh;
}

div.new-year-cloud::before {
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/cloud01.png)no-repeat center / contain;
  left: -20%;
}

div.new-year-cloud::after {
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/cloud02.png)no-repeat center / contain;
  right: -20%;
}

div.new-year-cloud.fixed_bg::before,
div.new-year-cloud.fixed_bg::after {
  position: fixed;
  top: 50vh;
  z-index: 5;
}
/* LPの下端に達したとき（ここで止める） */
div.new-year-cloud.bottom_bg::before,
div.new-year-cloud.bottom_bg::after {
  position: absolute;
  top: auto;
  bottom: 0; /* LP（または親要素）の下部に合わせる */
  z-index: 5;
}

.mainGrp div.wrap03,
.mainGrp div.wrap04,
.mainGrp div.wrap05 {
  position: relative;
  z-index: 10;
}

.mainGrp div.wrap03 {
  position: relative;
  padding-top: 120px;
}

.mainGrp div.wrap03::before,
.mainGrp div.wrap03:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
}

.mainGrp div.wrap03::before {
  background: linear-gradient(90deg, #F4D181 0%, #E8C571 50%, #C59C4D 100%);
  clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 100%, 0 35px);
  /* clip-path: polygon(0 0, 50% 60px, 100% 0, 100% 35px, 50% 100%, 0 35px); */
}

.mainGrp div.wrap03::after {
  top: -1px;
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/snow.png)no-repeat center / contain fixed, #C0E1F2;
  clip-path: polygon(0 0, 100% 0, 100% 3px, 50% 60px, 0 3px);
  /* clip-path: polygon(0 0, 50% 60px, 100% 0, 100% 35px, 50% 100%, 0 35px); */
}

.mainGrp div.wrap05 {
  padding-bottom: 80px;
}

@media screen and (max-width:768px) {
  .mainGrp div.wrap div.center{
    max-width: 500px;
  }
  .mainGrp{
    margin-top: 0;
  }
  .mainGrp div.wrap01{
        background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/snow_sp.png) no-repeat center / cover fixed, #FFE2B3;
  }
  .mainGrp div.wrap02 {
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20260930/snow_sp.png)no-repeat center / cover fixed, #C0E1F2;
}
  div.new-year-cloud::before,
div.new-year-cloud::after {
  width: 500px;
  height: 300px;
  top: 60vh;
}
div.new-year-cloud::before {
  left: -30%;
}

div.new-year-cloud::after {
  right: -30%;
}
}
/*見出し関連*/
h3.title_h3,
div.productGrp h3 {
  font-family: "Zen Maru Gothic", sans-serif !important;

}

h3.title_h3 {
  font-size: 34px;
  margin-bottom: 20px;
  color: var(--new-year);
  font-weight: 700;
}

div.productGrp h3 {
  font-size: 24px;
  padding: 8px;
  background: var(--new-year);
  color: #fff;
  line-height: 1.35;
  margin-bottom: 30px;

  font-weight: 500;
}

div.frame_about {
  max-width: 750px;
  margin-bottom: 30px;
}

div.frame_about p,
div.frame_about p span {
  font-family: "Zen Maru Gothic", sans-serif !important;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-align: justify;
}

div.frame_about p {
  color: var(--new-year);
}

div.frame_about p span {
  display: block;
  font-size: 16px;
  color: #5c5c5c;
}


@media screen and (max-width:768px) {
  h3.title_h3{
    font-size: 28px;
  }
  div.frame_about p, div.frame_about p span{
    font-size: 14px;
  }
  div.productGrp h3{
    font-size: 20px;
  }
  .mainGrp div.wrap04, .mainGrp div.wrap05{
    padding-top: 30px;
  }
}

/* 色違い */
.mainGrp div.wrap01 h3.title_h3,
.mainGrp div.wrap01 div.frame_about p {
  color: var(--heating);
}

.mainGrp div.wrap01 div.productGrp h3 {
  background: var(--heating);
}

/*  */
.mainGrp div.wrap02 h3.title_h3,
.mainGrp div.wrap02 div.frame_about p {
  color: var(--snow);
}

.mainGrp div.wrap02 div.productGrp h3 {
  background: var(--snow);
}



/*商品一覧*/

div.product_list {
  padding: 20px 0 60px;
  display: grid;
  gap: 10px;
}

div.productGrp:last-of-type div.product_list {
  padding-bottom: 0;
}

div.product_list.list_01 {
  max-width: 267px;
  grid-template-columns: repeat(1, 1fr);
}

div.product_list.list_02 {
  max-width: 545px;
  grid-template-columns: repeat(2, 1fr);
}

div.product_list.list_03 {
  max-width: 822px;
  grid-template-columns: repeat(3, 1fr);
}

div.product_list.list_04 {
  max-width: 1100px;
  grid-template-columns: repeat(4, 1fr);
}

div.product_list div.c-items5Col__item {
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
}

div.product_list div.c-items5Col__item>a {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #ddd;
  margin: 0;
  background: #fff;
}

div.product_list div.c-items5Col__item>a:hover {
  opacity: 1;
  transform: translateY(-5px);
  background: #f7f1d7;
}
.c-items5Col__link:focus, .c-items5Col__link:hover{
  opacity: 1!important;
}

figure.c-items5Col__figure {
  height: auto;
  margin: 0 0 10px;
  border: none;
}

figure.c-items5Col__figure img {
  max-height: 100%;
  max-width: 100%;
  padding: 15px 10px;
  background: #fff;
}

div.c-items5Col__price {
  color: #d67100;
  font-size: 16px;
  margin-bottom: 5px;
}

div.c-items5Col__productCode {
  font-size: 14px;
  color: var(--black01);
  margin-bottom: 5px;
}

div.c-items5Col__priceTax {
  font-size: 14px;
  color: var(--black01);
  margin-bottom: 5px;
}

div.c-items5Col__name {
  margin-top: 0.5em;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--main-color01);
}


@media screen and (max-width:768px) {
  div.productGrp h3 {
    font-size: 22px;
  }

  div.product_list.list_02,
  div.product_list.list_03,
  div.product_list.list_04 {
    max-width: 500px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width:450px) {
  div.productGrp h3 {
    font-size: 5.5vw;
    max-width: 300px;
    margin: auto;
  }

  div.product_list.list_01,
  div.product_list.list_02,
  div.product_list.list_03,
  div.product_list.list_04 {
    max-width: 300px;
    grid-template-columns: repeat(1, 1fr);
  }
}


@media screen and (max-width:1080px) {}

@media screen and (max-width:768px) {}


/*-----------------------------------------
03 コンテンツの設定ここまで
-------------------------------------------*/

/*-----------------------------------------
04 フッターの設定
-------------------------------------------*/
section.footGrp {
  background: var(--heating);
  padding: 80px 0;
  margin: 0px 0 0;
  position: relative;
}

section.footGrp::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20240129/line_01.svg)repeat-x calc(50% - 0px) bottom / 100%;
  width: 100%;
  height: 10%;
}



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

div.dl_flex>div {
  width: calc(50% - 20px);
}

div.dl_item_text p {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #fff;
}

div.dl_item_text a {
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color:var(--heating);
  background: #fff;
  border-radius: 100px;
  padding: 0.75em 2em;
  margin-top: 2em;
}

div.dl_item_text a:hover {
  background: #fff8d1;
}


@media screen and (max-width:768px) {

  div.dl_flex {
    flex-direction: column-reverse;
    max-width: 500px;
  }

  div.dl_flex>div {
    width: 90%;
  }

  div.dl_item_text {
    margin-top: 30px;
  }

  div.dl_item_text a {
    display: block;
  }
}

@media screen and (max-width:500px) {

  section.footGrp {
    padding: 50px 0;
  }

  div.dl_item_text p {
    font-size: 5vw;
  }

  div.dl_item_text a {
    font-size: 6vw;
    padding: 1em;
  }
}

/*-----------------------------------------
04 フッターの設定ここまで
-------------------------------------------*/


/*-----------------------------------------
05 メニュー関連
-------------------------------------------*/
/*メニュー*/


div.menu_Button {
  width: 100%;
  max-width: 100%;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 99;
}

ul.menu_ul {
  display: grid;
  grid-template-columns: repeat(5, auto);
  padding: 10px 0;
  max-width: 1000px;
  margin: auto;
}

ul.menu_ul li.menu_li,
ul.menu_ul li.menu_li a {
  display: block;
  width: 100%;
}

ul.menu_ul li.menu_li a {
  font-family: "Zen Maru Gothic", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 22px;
  padding: 1em;
  color: var(--new-year);
}

ul.menu_ul li.menu_li a:hover {
  opacity: 0.8;
}

div.menu_Button.fixed_menu_Button ul.menu_ul li.menu_li a {
  padding: 0.5em 1em;
  font-size: 20px;
}

ul.menu_ul li.menu_li.heat a {
  color: var(--heating);
}

ul.menu_ul li.menu_li.snow a {
  color: var(--snow);
}

@media screen and (min-width:769px) {
  #menu_Button_trigger {
  position: relative;
}
div.menu_Button {position: absolute;
}

div.menu_Button.fixed_menu_Button {
  position: fixed;
  filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.1));
}
}

@media screen and (max-width:768px) {
 ul.menu_ul{
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  max-width: 500px;
  width: calc(100% - 10px);
 }
 ul.menu_ul li.menu_li{
  border: 1px solid #dfdfdf;
  border-radius: 5px;
 }
}

@media screen and (max-width:500px) {
ul.menu_ul li.menu_li a{
  font-size: 16px;
}
}

@media screen and (max-width:360px) {
 ul.menu_ul{
  grid-template-columns: 1fr;
 }
}

/*ハンバーガーメニュー-----------------------------*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top: 0;
  right: -120%;
  width: 25%;
  height: 100vh;
  /*ナビの高さ*/
  background: #fff;
  /*動き*/
  transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
  right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 25%;
  height: 100vh;
  /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
  padding-left: 0;
}

/*リストのレイアウト設定*/
#g-nav li {
  list-style: none;
  text-align: center;
  padding: 0 0 10px;
}

#g-nav li a {
  font-family: "Zen Maru Gothic", sans-serif !important;
  color: var(--new-year);
  background: #fff;
  text-decoration: none;
  padding: 12px 0;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 22px;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
}
#g-nav li:nth-of-type(1) a{
color: var(--heating);
}
#g-nav li:nth-of-type(2) a{
color: var(--snow);
}
#g-nav li.small a {
  font-size: 18px;
}

/*========= ボタンのためのCSS ===============*/
div.openbtn {
  position: fixed;
  z-index: 9999;
  /*ボタンを最前面に*/
  bottom: 70px;
  right: -4px;
  cursor: pointer;
  width: 65px;
  height: 60px;
  background: var(--new-year) !important;
  border: 3px solid #fff;
  border-radius: 3px 0 0 3px;
}

/*×に変化*/
div.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 17px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  width: 45%;
}

div.openbtn span:nth-of-type(1) {
  top: 17px;
}

div.openbtn span:nth-of-type(2) {
  top: 30px;
}

div.openbtn span:nth-of-type(3) {
  top: 43px;
}

div.openbtn.active span:nth-of-type(1) {
  top: 26px;
  left: 22px;
  transform: translateY(6px) rotate(-45deg);
  width: 40%;
}

div.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

div.openbtn.active span:nth-of-type(3) {
  top: 38px;
  left: 22px;
  transform: translateY(-6px) rotate(45deg);
  width: 40%;
}

@media (max-width: 768px) {

  div.openbtn {
    width: 60px;
    height: 55px;
    bottom: 80px;
  }

  div.openbtn span {
    left: 15px;
  }

  div.openbtn span:nth-of-type(1) {
    top: 15px;
  }

  div.openbtn span:nth-of-type(2) {
    top: 25px;
  }

  div.openbtn span:nth-of-type(3) {
    top: 35px;
  }

  div.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 17px;
  }

  div.openbtn.active span:nth-of-type(3) {
    top: 30px;
    left: 17px;
  }

  #g-nav {
    width: 100%;
  }

  /*ナビゲーションの縦スクロール*/
  #g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    width: 100%;
  }

}

@media (max-width: 450px) {
  #g-nav li a {
    font-size: 6vw;
  }
}

/*ハンバーガーメニューここまで---------------*/

/*-----------------------------------------
05 メニュー関連ここまで
-------------------------------------------*/


.page_top{
  z-index: 999!important;
}