@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=RocknRoll+One&display=swap');


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

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

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

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

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

div.body {
  margin: auto;
}

@media screen and (min-width:769px) {
  div.body {
    min-width: 1000px;
  }
}

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

.center {
  width: calc(100% - 15px*2);
  max-width: 1100px;
  margin: auto;
  padding: 0;
  text-align: center;
}

.center2 {
  width: calc(100% - 15px*2);
  max-width: 1200px;
  margin: auto;
  padding: 0;
  text-align: center;
}

.center3 {
  width: calc(100% - 15px*2);
  max-width: 900px;
  margin: auto;
  padding: 0;
  text-align: center;
}

.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 button.button {
  background-color: transparent;
  /* ボタンの背景を透明にする */
  height: 50px;
  transition: .2s;
  width: 50px;
}

.body a,
.body p,
.body h2,
.body h3,
.body h4,
.body h5,
.body span,
.body div {
  text-shadow: none;
  margin: auto;
  padding: 0;
  background: none;
  font-family: var(--fnt-main);
}

.body li {
  list-style: none;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

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

  .pc {
    display: none;
  }
}



:root {


  --blue01: #796BAF;
  --green01: #00996c;
  --gray01: #e8edf7;
  --gray02: #b8c6dd;

  --fnt-main: 'Noto Sans JP', sans-serif;

  --grade: 0deg, #FBD6A0 0%, #FDEFDB 50%, #FBD6A0 100%;

  --main-color: var(--blue01);
  --sub-color: var(--green01);
  --accent-color: #ff7e14;
}

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


/*-----------------------------------------
02 ヘッダーの設定
-------------------------------------------*/
section.headGrp {}

section.headGrp>div.wrap01 {
  background: #FDF2E1;
  background: url()repeat, url(https://www.smartkaigo.jp/contents/lp/win-event26/img/bg_top.png)no-repeat 50% 20% / 2000px, linear-gradient(0deg, #ffffff 0%, #e0e6f4 40%, #FDF2E1 65%, #FDF2E1 100%);
  /*画面幅が2000pxより広いときは画面幅いっぱいに広げる（2000px以下は従来どおり2000px）*/
  background-size: auto, max(2000px, 100%) auto, auto;
  text-align: center;
  padding: 60px 0 30px;
}

section.headGrp>div.wrap01 h1 {
  padding-bottom: 0px;
}

div.header_text {
  display: grid;
  grid-template-columns: auto 160px;
  gap: 10px;

}

div.header_text p {
  font-size: 36px;
  font-weight: 900;
  color: var(--main-color);
}

div.header_text p>span {
  font-size: 36px;
  font-weight: 900;
}

div.header_text p>span.orange {
  color: var(--orange01);
}

div.header_text p>span.green {
  color: #6FBA2C;
}

div.header_text p>span.pink {
  color: #E03279;
}

div.header_text p>span.purple {
  color: var(--purple01);
}

p.header_date {
  display: inline-block;
  margin: auto;
  width: 90%;
  max-width: 500px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  background: var(--main-color);
  padding: 10px 20px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  /* position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%); */
}

@media screen and (min-width:769px) {}

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

  section.headGrp>div.wrap01 {
    background: url()repeat, url(https://www.smartkaigo.jp/contents/lp/win-event26/img/bg_top.png)no-repeat 50% 20% / 768px, linear-gradient(0deg, #ffffff 0%, #e0e6f4 40%, #FDF2E1 65%, #FDF2E1 100%);
    /* background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20250723/bg_momiji_sp.png)no-repeat center -60px / contain, url(https://d11w49g8ylcixs.cloudfront.net/resource/20250723/bg_pattern.png)repeat, linear-gradient(var(--grade)); */
    text-align: center;
    padding: 100px 0 0px;
  }

  section.headGrp>div.wrap01 h1 {
    padding-bottom: 20px;
  }

  div.header_text {
    grid-template-columns: 1fr;
    padding-bottom: 60px;
  }

  div.header_text p,
  div.header_text p>span {
    font-size: 28px;
  }

  p.header_date {
    width: 100%;
    max-width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    font-size: 20px;
    padding: 10px;
  }
}

@media screen and (max-width:580px) {
  div.header_text p br {
    display: none;
  }

  div.header_text p,
  div.header_text p>span {
    font-size: 24px;
  }

  div.header_text p>span {
    display: inline-block;
  }
}

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

  div.header_text p,
  div.header_text p>span {
    font-size: 5vw;
  }

  p.header_date {
    font-size: 5.5vw;
    padding: 5px;
  }
}

/*固定メニュー*/
:root {
  --menu-height: 70px;
}

div.menuGrp {
  position: relative;
  margin: 0;
  background: var(--green01);
}

div.menu_Button {
  background: var(--main-color);
  width: 100%;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
}

@media screen and (min-width:769px) {

  div.menuGrp,
  div.menu_Button {
    height: var(--menu-height);
  }

  div.menu_Button {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  div.menu_Button.fixed_menu_Button {
    position: fixed;
    top: 0;
    z-index: 999;
    /* filter: drop-shadow(0 0px 10px rgba(80, 80, 95, 0.25)) */
  }

  div.menu_Button.fixed_menu_Button ul.menu_ul a {
    padding: 0.5em 1.25em;
  }

}



/*メニュー*/
ul.menu_ul {
  display: grid;
  /*PCは6カテゴリーを1行に並べる*/
  grid-template-columns: repeat(6, auto);
  gap: 5px;
  margin: 0;
  padding: 7px 0;
}

ul.menu_ul::after {
  display: none;
}

ul.menu_ul li {
  display: block;
  width: 100%;
  margin: 0;
}

ul.menu_ul a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0.5em 1.25em;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  border-radius: 3px;
  color: var(--gray01) !important;
  position: relative;
  vertical-align: baseline;
}

ul.menu_ul a:hover {
  background: #2e6aad;
}


@media screen and (max-width:768px) {
  div.menu_Button {
    background: none;
  }

  ul.menu_ul {
    grid-template-columns: repeat(3, 1fr);
    width: 90%;
    max-width: 500px;
  }

  ul.menu_ul li {
    padding: 0;
  }

  ul.menu_ul>li a {
    font-size: 20px;
    letter-spacing: 0.1em;
    padding: 0.75em;
    text-align: center;
    background: #66b184;
  }
}

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

  ul.menu_ul>li a {
    font-size: 3.75vw;
  }
}

@media screen and (max-width:450px) {
  ul.menu_ul>li a {
    font-size: 4.25vw;
  }
}

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

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

section.mainGrp>div.wrap01 {
  /* position: relative;
  z-index: 9; */
  background: var(--green01);
  padding: 50px 0;
}


@media screen and (max-width:768px) {
  section.mainGrp>div.wrap01 {
    padding-top: 20px;
  }

  section.mainGrp>div.wrap01 div.center {
    max-width: 500px;
  }
}

/*タイトル設定*/

h3.title_h3 {
  font-size: 36px;
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--main-color);
}

div.wrap01 h3.title_h3 {
  color: #fff;
}

p.title_p {
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  color: #fff;
}

/*秋の制作----------------
-------------------------*/
.splide__track--fade>.splide__list>.splide__slide {
  height: 0 !important;
}

.splide__track--fade>.splide__list>.splide__slide.is-active {
  height: auto !important;
}

/* スライド共通のスタイル */
div.splide__list {
  height: auto;
}

/* スライドのサイズ調整 */
.splide__slide img {
  height: auto;
  width: 100%;
}

.splide__pagination {
  bottom: -25px;
}

.body button.splide__pagination__page {
  background: #eee;
  width: 8px;
}

.body button.splide__pagination__page.is-active {
  background: #012f74;
}

/* 矢印のクリック範囲など */
.body button {
  border: none !important;
  width: auto;
  box-shadow: none !important;
}

/* 矢印共通のスタイル */
.button::before {
  background-color: #8fd398;
  content: "";
  display: block;
  height: 50px;
  width: 40px;
}

/* 前の矢印 */
.prev::before {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* 次の矢印 */
.next::before {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* 次のスライドが無い場合の矢印 */
.button:disabled::before {
  background-color: #ccc;
}

/* スライドのサイズ調整 */
.splide__slide img {
  height: auto;
  width: 100%;
}

.splide__arrow--prev {
  left: 17%;
}

.splide__arrow--next {
  right: 17%;
}


@media screen and (max-width:1200px) {
  .splide__arrow--prev {
    left: 8%;
  }

  .splide__arrow--next {
    right: 8%;
  }
}

@media screen and (max-width:768px) {
  .body button.button {
    width: 25px;
  }

  .button::before {
    width: 25px;
    height: 25px;
  }

  .splide__arrow--prev {
    left: 2%;
  }

  .splide__arrow--next {
    right: 2%;
  }
}

@media screen and (max-width:600px) {
  .body button.button {
    width: 18px;
  }

  .button::before {
    width: 18px;
    height: 20px;
  }

  .splide__arrow--prev {
    left: 1%;
  }

  .splide__arrow--next {
    right: 1%;
  }
}

/*スライド設定ここまで------------
-----------------------------------------*/
div.rekunetaGrp {
  padding: 20px 0;
}

/*レクネタ内容*/
div.splide__slide {
  padding-top: 80px;
}

div.rekunetaBox {
  display: grid;
  grid-template-columns: 330px auto;
  gap: 10px;
  background: #fff;
  padding: 80px 20px 20px;
  width: calc(100% - 40px);
  max-width: 1000px;
  border-radius: 20px;
  transition: 0.7s;
  transform: scale(0.8);
  position: relative;
}

div.rekunetaBox-title {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 350px;
}

/* アクティブなスライドのスタイル */
.splide__slide.is-active .rekunetaBox {
  transform: scale(1);
  z-index: 1;
}

/*テキスト部分*/
div.rekunetaBox p,
div.rekunetaBox span,
div.rekunetaBox ul li {
  text-align: left;
  margin: 0;
  letter-spacing: 0.1em;
}

div.rekunetaBox-label {
  border-radius: 3px;
}

div.rekunetaBox-label p {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 0.35em 0.65em;
  color: #fff;
}

div.rekunetaBox-list ul {
  padding: 0;
  margin: 20px 0 0;
  counter-reset: sample;
  list-style: none;
}

div.rekunetaBox-list ul li {
  font-size: 15px;
  letter-spacing: 0;
  margin: 0 auto 0.75em 0;
  position: relative;
  line-height: 1.5;
  padding: 0 0 0 1.85em;
  font-family: var(--fnt-main);
}

div.rekunetaBox-list ul li span {
  display: block;
  font-size: 90%;
  font-family: var(--fnt-main);
  padding-left: 1em;
  text-indent: -1em;
}

div.rekunetaBox-list ul li::before {
  counter-increment: sample;
  content: counter(sample);
  z-index: 5;
  position: absolute;
  top: 5px;
  left: 6px;
  line-height: 1;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-family: var(--fnt-main);
}

div.rekunetaBox-list ul li::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  z-index: 4;
  position: absolute;
  top: 3px;
  left: 0;
}

div.rekunetaBox-list ul li:last-of-type {
  margin-bottom: 0;
}

div.rekuneta_text p.recipe {
  background: var(--main-color);
}


div.rekunetaBox01 div.rekunetaBox-label,
div.rekunetaBox01 div.rekunetaBox-list ul li::after {
  background: var(--blue01);
}

div.rekunetaBox02 div.rekunetaBox-label,
div.rekunetaBox02 div.rekunetaBox-list ul li::after {
  background: #796BAF;
}

div.rekunetaBox03 div.rekunetaBox-label,
div.rekunetaBox03 div.rekunetaBox-list ul li::after {
  background: #e8374a;
}


/*レクネタ集で詳しく見るボタン*/
div.rekunetaBox-btn {
  width: calc(100% - 15px*2);
  grid-column: 1/3;
  text-align: center;
  margin: 10px auto;
}

div.rekunetaBox-btn>a {
  display: inline-block;
  width: fit-content;
  color: var(--main-color);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: #fff;
  border: 2px solid var(--main-color);
  padding: 10px 65px 10px 20px;
  margin: auto;
  border-radius: 100px;
  position: relative;
}

div.rekunetaBox-btn>a:hover {
  background: var(--main-color);
  color: #fff;
}

div.rekunetaBox-btn>a::before,
div.rekunetaBox-btn>a::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--main-color);
  position: absolute;
  transition: all 0.2s ease 0s;
}

div.rekunetaBox-btn>a::before {
  top: 65%;
  transform: translateY(-50%);
  right: 30px;
  width: 20px;
}

div.rekunetaBox-btn>a::after {
  top: 49%;
  transform: rotate(45deg) translateY(-50%);
  -webkit-transform: rotate(45deg) translateY(-50%);
  -ms-transform: rotate(45deg) translateY(-50%);
  right: 29px;
  width: 17px;
}

div.rekunetaBox-btn>a:hover::before,
div.rekunetaBox-btn>a:hover::after {
  background: #fff;
}

div.rekunetaBox-btn>a:hover::before {
  right: 25px;
}

div.rekunetaBox-btn>a:hover::after {
  right: 23px;
}

@media screen and (max-width:1080px) {
  div.rekunetaBox-btn>a::after {
    top: 51%;
  }
}

@media screen and (max-width:768px) {
  div.rekunetaGrp {
    padding: 20px 0;
  }

  div.rekunetaBox {
    max-width: 500px;
    grid-template-columns: 1fr;
  }

  div.rekunetaBox-img,
  div.rekunetaBox-info,
  div.rekunetaBox-btn {
    grid-column: 1/2;
    max-width: 380px;
  }

  div.rekunetaBox-label p {
    font-size: 14px;
  }

  div.rekunetaBox-list ul {
    margin-top: 10px;
  }

  div.rekunetaBox-list ul li {
    font-size: 13px;
  }

  div.rekunetaBox-list ul li::before {
    font-size: 12px;
    top: 3px;
    left: 4px;
  }

  div.rekunetaBox-list ul li::after {
    width: 14px;
    height: 14px;
  }

  div.rekunetaBox-btn>a {
    font-size: 16px;
    padding: 10px 30px;
  }

  div.rekunetaBox-btn>a::before,
  div.rekunetaBox-btn>a::after {
    display: none;
  }


}

@media screen and (max-width:550px) {
  div.rekunetaBox-btn>a {
    font-size: 4vw;
  }

  div.rekunetaBox-btn>a::before,
  div.rekunetaBox-btn>a::after {
    display: none;
  }

  div.rekunetaBox-btn>a {
    display: block;
    width: 100%;
    padding: 12px 15px;
  }
}

@media screen and (max-width:400px) {
  div.splide__slide {
    padding-top: 0;
    margin-top: 44px;
  }

  div.rekunetaBox {
    padding-top: 60px;
  }

  div.rekunetaBox-title {
    top: -40px;
  }
}

/*レクネタ集で詳しく見るボタンここまで*/


/*レクネタの商品一覧*/
div.rekunetaBox-products {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 800px;
}

div.rekunetaBox01 div.rekunetaBox-products,
div.rekunetaBox03 div.rekunetaBox-products {
  grid-template-columns: repeat(3, 1fr);
  max-width: 600px;
}

div.rekunetaBox-products li,
div.rekunetaBox-products p,
div.rekunetaBox-products a,
div.rekunetaBox-products ::before {
  text-align: center;
}

div.rekunetaBox-products li a {
  background: #ddf0e7;
}

div.rekunetaBox-products li.back99 img.picture {
  width: 80%;
}

.mainGrp div.wrap02,
.mainGrp div.wrap03,
.mainGrp div.wrap04,
.mainGrp div.wrap05,
.mainGrp div.wrap06,
.mainGrp div.wrap07 {
  padding: 50px 0;
}

/*各カテゴリーの背景色（元の色を白に対して30％の濃度にした色）*/
/*冬のお菓子：#FAC5D7の30％*/
.mainGrp div.wrap02 {
  background: #FEEEF3;
}

/*制作キット：#C9C4DFの30％*/
.mainGrp div.wrap03 {
  background: #EFEDF5;
}

/*正月：#F8C3C9の30％*/
.mainGrp div.wrap04 {
  background: #FDEDEF;
}

/*イベント用品：#FEEB9Eの30％*/
.mainGrp div.wrap05 {
  background: #FFF9E2;
}

/*冬の装飾：#A6E3E7の30％*/
.mainGrp div.wrap06 {
  background: #E4F7F8;
}

/*予備（現在HTMLでは未使用）*/
.mainGrp div.wrap07 {
  background: var(--gray02);
}

/*各カテゴリーの見出しフレーム-------------------
  --frame : 枠（塗り）の色
  --line  : 枠線の色（枠の色を白に対して50％の濃度にした色）
  --notch : 四隅のえぐれの大きさ
  --bw    : 枠線の太さ
-----------------------------------------------*/
.mainGrp div.wrap02 {
  --frame: #EF5186;
  --line: #F7A8C2;
}

/*冬のお菓子*/
.mainGrp div.wrap03 {
  --frame: #796BAF;
  --line: #BCB5D7;
}

/*制作キット*/
.mainGrp div.wrap04 {
  --frame: #EA5550;
  --line: #F4AAA8;
}

/*正月*/
.mainGrp div.wrap05 {
  --frame: #F49C00;
  --line: #FACE80;
}

/*イベント用品*/
.mainGrp div.wrap06 {
  --frame: #00AEBB;
  --line: #80D6DD;
}

/*冬の装飾*/

.mainGrp div.wrap02 h3.title_h3,
.mainGrp div.wrap03 h3.title_h3,
.mainGrp div.wrap04 h3.title_h3,
.mainGrp div.wrap05 h3.title_h3,
.mainGrp div.wrap06 h3.title_h3 {
  --notch: 16px;
  --bw: 8px;
  position: relative;
  display: block;
  width: 90%;
  max-width: 640px;
  margin: 0 auto;
  padding: calc(0.35em + var(--bw)) calc(2.5em + var(--bw));
  color: #fff;
  line-height: 1.4;
  /*四隅のへこみに沿った枠線（各角から えぐれ＋枠線の太さ までを枠線色、その内側を枠の色）*/
  background:
    radial-gradient(circle at 0 0, var(--line) calc(var(--notch) + var(--bw)), var(--frame) calc(var(--notch) + var(--bw) + 0.5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, var(--line) calc(var(--notch) + var(--bw)), var(--frame) calc(var(--notch) + var(--bw) + 0.5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, var(--line) calc(var(--notch) + var(--bw)), var(--frame) calc(var(--notch) + var(--bw) + 0.5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, var(--line) calc(var(--notch) + var(--bw)), var(--frame) calc(var(--notch) + var(--bw) + 0.5px)) bottom right / 51% 51% no-repeat;
  /*直線部分の枠線*/
  box-shadow: inset 0 0 0 var(--bw) var(--line);
  /*四隅を内側に丸くえぐる*/
  -webkit-mask:
    radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom right / 51% 51% no-repeat;
}

/*左右の星*/
.mainGrp div.wrap02 h3.title_h3::before,
.mainGrp div.wrap03 h3.title_h3::before,
.mainGrp div.wrap04 h3.title_h3::before,
.mainGrp div.wrap05 h3.title_h3::before,
.mainGrp div.wrap06 h3.title_h3::before,
.mainGrp div.wrap02 h3.title_h3::after,
.mainGrp div.wrap03 h3.title_h3::after,
.mainGrp div.wrap04 h3.title_h3::after,
.mainGrp div.wrap05 h3.title_h3::after,
.mainGrp div.wrap06 h3.title_h3::after {
  content: "★";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75em;
  line-height: 1;
  color: var(--line);
}

.mainGrp div.wrap02 h3.title_h3::before,
.mainGrp div.wrap03 h3.title_h3::before,
.mainGrp div.wrap04 h3.title_h3::before,
.mainGrp div.wrap05 h3.title_h3::before,
.mainGrp div.wrap06 h3.title_h3::before {
  left: 0.6em;
}

.mainGrp div.wrap02 h3.title_h3::after,
.mainGrp div.wrap03 h3.title_h3::after,
.mainGrp div.wrap04 h3.title_h3::after,
.mainGrp div.wrap05 h3.title_h3::after,
.mainGrp div.wrap06 h3.title_h3::after {
  right: 0.6em;
}

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

  .mainGrp div.wrap02 h3.title_h3,
  .mainGrp div.wrap03 h3.title_h3,
  .mainGrp div.wrap04 h3.title_h3,
  .mainGrp div.wrap05 h3.title_h3,
  .mainGrp div.wrap06 h3.title_h3 {
    --notch: 12px;
    width: 100%;
    --bw: 6px;
    padding: calc(0.3em + var(--bw)) calc(1.75em + var(--bw));
  }

  .mainGrp div.wrap02 h3.title_h3::before,
  .mainGrp div.wrap03 h3.title_h3::before,
  .mainGrp div.wrap04 h3.title_h3::before,
  .mainGrp div.wrap05 h3.title_h3::before,
  .mainGrp div.wrap06 h3.title_h3::before {
    left: 0.35em;
  }

  .mainGrp div.wrap02 h3.title_h3::after,
  .mainGrp div.wrap03 h3.title_h3::after,
  .mainGrp div.wrap04 h3.title_h3::after,
  .mainGrp div.wrap05 h3.title_h3::after,
  .mainGrp div.wrap06 h3.title_h3::after {
    right: 0.35em;
  }
}

@media screen and (max-width:768px) {
  .mainGrp>div.wrap div.center2 {
    max-width: 500px;
  }

  div.rekunetaBox-products {
    grid-template-columns: repeat(3, 1fr);
  }

  div.rekunetaBox-products p.procd,
  div.rekunetaBox-products li.back99 a div.c-items5Col__price,
  div.rekunetaBox-products div.c-items5Col__priceTax,
  div.rekunetaBox-products div.c-items5Col__name {
    font-size: 12px;
  }

  div.rekunetaBox-products div.c-items5Col__name br {
    display: none;
  }
}

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

  div.rekunetaBox-products,
  div.rekunetaBox01 div.rekunetaBox-products,
  div.rekunetaBox03 div.rekunetaBox-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*背景*/
@media screen and (min-width:769px) {
  div.sakura {
    padding: 0 0 60px;
    background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20240129/haikei_left.png)center left, url(https://d11w49g8ylcixs.cloudfront.net/resource/20240129/haikei_right.png)center right;
    background-repeat: no-repeat;
    background-size: 275px;
    background-attachment: fixed;
  }
}

@media screen and (max-width:768px) {
  div.sakura {
    padding: 0 0 60px;
    background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20240129/haikei_left.png)left -30vh, url(https://d11w49g8ylcixs.cloudfront.net/resource/20240129/haikei_right.png)right 40vh;
    background-repeat: no-repeat;
    background-size: 60%;
    background-attachment: fixed;
  }
}

/*スマホからも見れます！毎日のレクはお任せください！すぐに使えるアイデアいっぱい！レクネタ集*/

div.RKNT_btn {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

div.RKNT_btn>a {
  display: block;
}

div.RKNT_btn>a:hover {
  transform: translateY(-5px);
  filter: brightness(110%);
}

@media screen and (max-width:768px) {
  div.RKNT_btn {
    width: 90%;
    max-width: 440px;
  }

  div.RKNT_btn img {
    border-radius: 10px;
  }
}

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

/*-----------------------------------------
04 フッターの設定
-------------------------------------------*/
section.footGrp {
  background: var(--green01);
  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: 28px;
  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(--green01);
  background: #fff;
  border-radius: 100px;
  padding: 0.75em 2em;
  margin-top: 2em;
}

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


@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 フッターの設定ここまで
-------------------------------------------*/



/*スマ介_____EC-CUBE対策*/
main.l-container {
  width: 100%;
}

.c-main {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

#contentInner {
  width: auto;
  padding-bottom: 0;
}

#wide_main_contents {
  width: 100%;
}

.c-breadcrumb {
  width: 1200px;
  margin: auto;
}

@media (max-width: 1230px) {
  main.l-container {
    width: 123rem;
  }
}

@media (max-width: 768px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block;
  }

  .l-container {
    width: 120rem;
  }

  #contentInner {
    width: 1200px;
    padding-bottom: 0;
  }

  #wide_main_contents {
    width: 1200px
  }
}