@charset "UTF-8";
/* CSS Document */

/* ========================================
   Background
======================================== */
.cm2026_bg {
}
.cm2026_bg--pullup {
  margin-top: -100px;
}
.cm2026_bg.cm2026_bg--pullup::after{
	top: 100px;
}
@media screen and (max-width: 768px) {
  .cm2026_bg--pullup {
    margin-top: 0px;
  }
	.cm2026_bg.cm2026_bg--pullup::after{
	top: 0px;
}
  #deodor .cm2026-l-section__note {
    margin-bottom: 30px;
  }
  .cm2026-l-section__note li {
    font-size: 10px;
  }
}
/* ========================================
   btn
======================================== */
/* 詳しく見る */
.cm26-c-btn_detail {
  background-image: url("../image/cm26-c-btn--detail.png");
}
.cm26-c-btn_detail:hover {
  background-image: url("../image/cm26-c-btn--detail__on.png");
}
/* ARのやりかた */
.cm2026-c-btn_ar {
  background-image: url("../image/cm26-c-btn--ar.png");
}
.cm2026-c-btn_ar:hover {
  background-image: url("../image/cm26-c-btn--ar__on.png");
}

/* ========================================
  シナモロールたちがみんなの暮らしを応援！
======================================== */
#ouen figure img {
  max-width: 660px;
  height: auto;
  width: 100%;
}
/* ========================================
 気になるニオイは二おワイナで消臭
======================================== */
#deodor figure img {
  max-width: 630px;
  height: auto;
  width: 100%;
  margin-bottom: 30px;
}
#deodor .cm2026-l-section__note {
	font-size: 14px;
  margin-bottom: clamp(30px, 20px + 2.604vw, 70px) !important;
}
@media (max-width: 768px) {
  #deodor figure img {
    margin-bottom: 10px;
  }
}
/* ========================================
 普段の生活にニオワイナ
======================================== */
#use-scene .cm2026-card__image {
  flex-shrink: 0;
  margin-left: 10px;
}
#use-scene .cm2026-card__image img {
  width: clamp(250px, 24vw, 345px);
}
#use-scene .cm2026-card__title {
  display: inline-block !important;
  margin-bottom: 10px !important;
  line-height: 1.2;
}
#use-scene .cm2026-card:nth-of-type(1) .cm2026-card__title {
  background-color: #aec0d8;
}
#use-scene .cm2026-card:nth-of-type(2) .cm2026-card__title {
  background-color: #fce5e8;
}
#use-scene .cm2026-card:nth-of-type(3) .cm2026-card__title {
  background-color: #fffbda;
}
#use-scene .cm2026-card__text {
  font-size: clamp(16px, 1.25vw, 24px);
}
@media screen and (max-width: 960px) {
  #use-scene .cm2026-card__image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  #use-scene .cm2026-card__title {
    display: inline-block !important;
    margin-bottom: 20px;
    font-size: 16px;
  }
}
.cm2026-card-slider__hint{
	display: none;
}
@media screen and (max-width:768px){

  .cm2026-card-slider__hint {
margin-bottom: 10px;
    font-size: 10px;
    text-align: right;
	  display: block;
  transition: opacity .3s;
}

.cm2026-card-slider__hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

  #use-scene .cm2026-card-list{
    display:flex;
    gap:20px;
    overflow-x:auto;

    margin-inline:-25px;
    padding-right:20px;
	  padding-bottom: 20px;
	  margin-bottom: 40px !important;
    overflow-y: hidden;

    touch-action: pan-x pan-y;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;
  }

   #use-scene .slider__space{
    flex:0 0 0px;
    min-width:0px;
  }

  .cm2026-card-list > .cm2026-card{
    flex:0 0 calc(100% - 40px);
    margin-bottom:0;
  }
}
/*@media screen and (max-width: 768px) {
  #use-scene .cm2026-card-list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    width: calc(100% + 25px);
    margin-left: 0px;
    padding: 20px;
  }
  #use-scene .cm2026-card-list .cm2026-card {
    flex: 0 0 90%;
    scroll-snap-align: start;
    margin-bottom: 0;
    box-sizing: border-box;
  }
}*/
/* ========================================
 パッケージ限定AR　オリジナルフォトフレーム公開中
======================================== */
.sec__image img {
  max-width: 726px !important;
  height: auto;
  width: 100%;
	margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
	.sec__image img {
	margin-bottom: 30px;
}
}

/* ========================================
   ラインアップ
======================================== */
.cm2026-c-card--lineup {
  position: relative;
}
.cm2026-c-card--lineup::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 2px;
  background: repeating-linear-gradient(to right, #6a6c8e 0 10px, transparent 10px 15px);
}
.cm2026-c-card--lineup.is-last::after {
  display: none !important;
}
.cm2026-c-card--lineup .cm2026-card__image {
  flex-shrink: 0;
  margin-right: clamp(5px, calc((30 - 5) * ((100vw - 961px) / (1920 - 961)) + 5px), 30px);
}
.cm2026-c-card--lineup .cm2026-card__image img {
  width: clamp(300px, 24vw, 480px) !important;
}
.cm2026-c-card--lineup .cm2026-card__body {
  min-height: 190px;
  padding: 5px 5px 5px 60px;
  background-size: auto clamp(70px, 9.375vw, 180px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: left center;
}
.cm2026-card__body.num1 {
  background-image: url("../image/cm26-img--lineup__num1.png");
}
.cm2026-card__body.num2 {
  background-image: url("../image/cm26-img--lineup__num2.png");
}
.cm2026-card__body.num3 {
  background-image: url("../image/cm26-img--lineup__num3.png");
}
#lineup .cm2026-c-card--default {
  max-width: 620px;
  width: 100%;
  padding: 20px;
  margin: 0 auto;
}
.cm2026-card--lineup-product {
  padding: 40px 0px !important;
  text-align: center;
}
.cm2026-note__list--full{
  flex-basis: 100%;
  margin: 0 0 10px;
  text-align: right;
}

.text--with-icon_star::after {
  content: "";
  display: inline-block;
  width: clamp(14px, 1.25vw, 24px);
  height: clamp(14px, 1.25vw, 24px);
  margin-left: 8px;
  background: url("../image/cm26-icon-star.png") center / contain no-repeat;
}
#lineup .cm2026-card__text{
	margin-bottom: 30px;
}
#lineup .cm2026-l-section__note {
    flex-basis: 100%;
    margin: 0px 0 10px;
    text-align: right;
}
@media screen and (max-width: 960px) {
  .cm2026-c-card--lineup {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #lineup .cm2026-c-card--lineup {
    padding: 0 20px;
  }
  #lineup .cm2026-c-card--lineup::before {
    content: none !important;
  }
  #lineup .cm2026-c-card--lineup::after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 90%;
    height: 2px;
    background: repeating-linear-gradient(to right, #6a6c8e 0 10px, transparent 10px 15px);
  }
  #lineup .cm2026-c-card--lineup:last-child::after {
    content: none !important;
  }
  .cm2026-c-card--lineup .cm2026-card__image {
    margin-right: 0;
    margin-bottom: 0px;
  }
  .cm2026-c-card--lineup .cm2026-card__image img {
    width: 100% !important;
    max-width: 480px;
  }
  #lineup .cm2026-c-card--lineup .cm2026-card__body {
    width: 100%;
    min-height: 100px;
    padding: 0 0px 20px;
    background-position: top center;
    background-size: auto 90px;
    text-align: left;
    text-align: center;
  }
 .cm2026-card__body.num1, .cm2026-card__body.num2, .cm2026-card__body.num3 {
    background-position: right top !important;
  }
.cm2026-note__list--full{
    margin-bottom: 0 !important;
    text-align: center;
  }
  .cm2026-card--lineup-product {
    padding: 20px !important;
  }
}
/* ========================================
   取り扱い店舗
======================================== */
.cm2026-shop {
  text-align: center;
  background-color: #fff;
  border: 2px solid #6a6c8f;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 10px;
  font-size: clamp(14px, calc(12.6667px + 0.3472vw), 18px);
  letter-spacing: 2px;
}
.cm2026-shop__group:not(:last-child) {
  margin-bottom: 20px;
}
.cm2026-shop__category {
  margin-top: 0;
  line-height: 1;
  font-weight: 900;
}
.cm2026-shop__body {
  margin: 0;
  padding: 0;
}
.cm2026-shop__items {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
}
.cm2026-shop__items li {
  display: inline;
  line-height: 1.4;
}
/* 4列 
======================================== */
.cm2026-shop__items--4col li:not(:last-child)::after {
  content: "／";
}
.cm2026-shop__items--4col li:nth-child(4)::after {
  content: "" !important;
  display: block;
  white-space: pre;
}
.cm2026-shop__items--4col li:last-child::after {
  content: "";
}
/* 3列 
======================================== */
.cm2026-shop__items--3col li:not(:last-child)::after {
  content: "／";
  margin: 0 2px;
}
.cm2026-shop__items--3col li:nth-child(3)::after, .cm2026-shop__items--3col li:nth-child(6)::after, .cm2026-shop__items--3col li:nth-child(9)::after, .cm2026-shop__items--3col li:nth-child(12)::after, .cm2026-shop__items--3col li:nth-child(15)::after {
  content: "" !important;
  display: block;
  white-space: pre;
}
.cm2026-shop__items--3col li:last-child::after {
  content: "";
}


@media screen and (max-width: 1200px) {
  .cm2026-shop__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cm2026-shop__items li {
    display: inline-block;
    width: auto;
    white-space: nowrap; /* 2列で折り返すための制御 */
    flex: 0 0 auto;
  }
  /* PC用の「／改行制御」を無効化
	======================================== */
  .cm2026-shop__items--3col li:nth-child(3)::after, .cm2026-shop__items--3col li:nth-child(6)::after, .cm2026-shop__items--3col li:nth-child(9)::after, .cm2026-shop__items--3col li:nth-child(12)::after, .cm2026-shop__items--3col li:nth-child(15)::after, .cm2026-shop__items--4col li:nth-child(4)::after {
    content: "／" !important; /* ←消すんじゃなくて通常に戻す */
    display: inline;
    white-space: normal;
  }
  /* 4col / 3colの共通調整
	======================================== */
  .cm2026-shop__items--3col li::after, .cm2026-shop__items--4col li::after {
    margin: 0;
  }
}
/* ========================================
   YouTube
======================================== */
.cm2026-video__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cm2026-video__list li {
  width: calc(50% - 10px);
  max-width: 440px;
  box-sizing: border-box;
}
.cm2026-video__frame {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}
.cm2026-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
@media (max-width: 768px) {
  .cm2026-video__list li {
    width: 100%;
    max-width: 100%;
  }
}