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



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

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

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

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

/*-----------------------------------------
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;
}


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

/*-----------------------------------------
02 ヘッダーの設定
-------------------------------------------*/
div.wrap_head{
  padding: 20px 0;
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20250807-2/bg.png)repeat center;
}
div.wrap_head div.center{
  max-width: 900px;
}

@media screen and (max-width:768px) {
  div.wrap_head{
  padding: 10px 0;
  background: url(https://d11w49g8ylcixs.cloudfront.net/resource/20250807-2/bg_sp.png)repeat center;
}
div.wrap_head div.center{
  max-width: 500px;
}
}
/*splide*/
/*ページネーション*/
.headGrp div.sliderGrp a:hover{
  opacity: 0.7;
}
div.sliderGrp,
div.splide{
  width: 100%;
}
div.splide{
  margin-bottom: 55px;
}
.body .splide__pagination {
  bottom: -15px;
}

.body .splide__pagination li {
  margin: 0;
}

.body .splide__pagination__page {
  height: 12px;
  width: 12px;
  margin: 5px;
}

.body .splide__pagination__page {
  background: #fff;
  border: 1px solid #ee7422;
}

.body .splide__pagination__page.is-active {
  background: #ee7422;
  transform: scale(1.4);
  z-index: 1;
}

.headGrp button.splide__arrow--prev{
  left: 16%;
}
.headGrp button.splide__arrow--next{
  right: 16%;
}

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

@media screen and (max-width:768px) {
  div.splide{
    margin-bottom: 20px;
  }
  .headGrp button.splide__arrow--prev{
  left: 1%;
}
.headGrp button.splide__arrow--next{
  right: 1%;
}

}


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

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

.mainGrp div.wrap01{
  margin-top: 100px;
}
.mainGrp div.wrap01 h3{
  font-size: 28px;
  margin: 0 auto 30px;
  font-weight: 700;
}
.mainGrp div.wrap01 h3 span{
  display: block;
  font-size: 38px;
  color: #ee7422;
  font-weight: 700;
}

@media screen and (max-width:768px) {
  .mainGrp div.wrap01{
    margin-top: 60px;
  }
}
/*商品一覧のスライド*/
/* アクティブなスライドのスタイル */
div.splide__track{
  padding-top: 20px;
  padding-bottom: 20px;
}
li.splide__slide{
  margin-top: 0!important;
  margin-bottom: 0!important;
  margin-left: 0!important;
}
div.sliderGrp.products div.back99 {
  transition: all 0.3s ease 0s;
  transform: scale(0.8);
  opacity: 0.5;
}

div.sliderGrp.products .splide__slide.is-active div.back99,
div.sliderGrp.products .splide__slide.is-next div.back99,
div.sliderGrp.products .splide__slide.is-prev div.back99 {
  transform: scale(1);
  opacity: 1;
  z-index: 1;
}
.mainGrp button.splide__arrow--prev{
  left: 17%;
}
.mainGrp button.splide__arrow--next{
  right: 17%;
}

@media screen and (max-width:768px) {
  div.splide__track{
  padding-left: 20px!important;
  padding-right: 20px!important;
}
.mainGrp button.splide__arrow--prev{
  left: 1%;
}
.mainGrp button.splide__arrow--next{
  right: 1%;
}
}


/*商品カート*/
div.back99 a{
  display: block!important;
  width: 100%!important;
  padding: 10px 15px 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  /* filter: drop-shadow(1px 3px 4px rgba(0,0,0,0.1)); */
  background: #fff;
}
div.back99 a:hover{
  transform: translateY(-10px);
}
.back99 figure{
  margin: 0 0 10px;
}
p.procd,
div.c-items5Col__price,
div.c-items5Col__priceTax,
div.c-items5Col__name{
font-size: 13px;
}
div.c-items5Col__name{
  font-weight: 700;
}

/*4種LPの紹介*/
.mainGrp div.wrap02{
  padding:80px 0 100px;
}
div.products_grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  width: calc(100% - 40px);
  max-width: 85%;
  margin: auto;
}

div.products_grid div.item{
  display: block;
  width: 100%;
  margin: 0;
border-radius: 20px;
padding: 40px;
text-align: center;
}
div.products_grid div.item img{
  max-width: 575px;
}
div.products_grid h3{
  display: block;
  margin-bottom: 0.75em;
  font-size: 30px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
div.products_grid h3 span{
  display: block;
  font-size: 80%;
  font-weight: 700;
}

div.products_grid a{
  display:block;
  width: 100%;
  max-width: 475px;
  background: #fff;
  margin-top: 20px;
  padding: 30px 80px 30px 30px;
  border-radius: 100px;
  font-size: 22px;
  font-weight: 700;
  position: relative;
}
div.products_grid a span{
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 100px;
}
div.products_grid a span:after{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%)rotate(-45deg);
}
div.products_grid a:hover{
  background: #fff8e1;
}


/*色違い*/
:root{
  --grade-caredrink:circle at 50% -10%,#EEFFFF 0%, #8BF9FC 35%, #19C5E0 75%, #0981A7 100%;
  --grade-megurizumu:154deg,#fed2d0 0%, #f9a8c6 33%, #cfa1de 71%, #a0b3ff 100%;
  --grade-doctorair:0deg,#a4d398 0%, #6fbf75 100%;
  --grade-mogu:0deg,#b3d6f1 0%, #64b6da 100%;
}
div.products_grid div.item.caredrink{
background-image: radial-gradient(var(--grade-caredrink));
}
div.products_grid div.item.megurizumu{
  background-image: linear-gradient(var(--grade-megurizumu));
}
div.products_grid div.item.doctorair{
background-image: linear-gradient(var(--grade-doctorair));
}
div.products_grid div.item.mogu{
background-image: linear-gradient(var(--grade-mogu));
}

div.products_grid div.item.caredrink h3,
div.products_grid div.item.caredrink h3 span{
  color: #1b5477;
}
div.products_grid div.item.caredrink a{
  color:#09c3d2;
}
div.products_grid div.item.caredrink a span{
background: #09c3d2;
}

div.products_grid div.item.megurizumu h3,
div.products_grid div.item.megurizumu h3 span,
div.products_grid div.item.megurizumu a{
  color: #82487b;
}
div.products_grid div.item.megurizumu a span{
background: #82487b;
}
div.products_grid div.item.doctorair h3,
div.products_grid div.item.doctorair h3 span{
  color: #3c6334;
}
div.products_grid div.item.doctorair a{
  color: #6fbf75;
}
div.products_grid div.item.doctorair a span{
background: #6fbf75;
}
div.products_grid div.item.mogu h3,
div.products_grid div.item.mogu h3 span,
div.products_grid div.item.mogu a{
  color: #23617c;
}
div.products_grid div.item.mogu a span{
background: #23617c;
}


@media screen and (max-width:1400px) {
  div.products_grid{
    max-width: 90%;
  }
}
@media screen and (max-width:1200px) {
  div.products_grid{
    max-width: 100%;
  }
}
@media screen and (max-width:768px) {
  .mainGrp div.wrap01 h3{
    margin-bottom: 15px;
  }
  .mainGrp div.wrap02{
    padding: 60px 0;
  }
  div.products_grid{
    grid-template-columns: 1fr;
    width: calc(100% - 20px);
    max-width: 650px;
    gap: 13px;
  }
}
@media screen and (max-width:570px) {
  .mainGrp div.wrap02{
    padding: 10px 0;
  }
 
  div.products_grid div.item{
    padding: 30px 20px;
    border-radius: 15px;
  }
  div.products_grid a{
    font-size: 4vw;
    padding: 1em 3em 1em 1em;
  }
  div.products_grid a span{
    width: 8vw;
    height: 8vw;
    right: 4vw;
  }
}
@media screen and (max-width:500px) {
   .mainGrp div.wrap01 h3{
    font-size: 6vw;
  }
  .mainGrp div.wrap01 h3 span{
    font-size: 7vw;
  }
div.products_grid h3{
  font-size: 6vw;
}
}


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

/*-----------------------------------------
04 フッターの設定
-------------------------------------------*/

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

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

/*-----------------------------------------
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
  }
}