@charset "utf-8";

html,body{
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
}
html {
	scroll-behavior: smooth;
}
body{
  position: relative;
  background: url(../../../img/campaign/chiikawa_2026/bg01.webp) repeat;
  background-size: 100%;
}
@media screen and (max-width: 750px){
  body{
  background: url(../../../img/campaign/chiikawa_2026/bg01_sp.webp) repeat;
  background-size: 100%;
}
}
.js-modal-video {
  display: none;
}
.bg02{
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  background: url("../../../img/campaign/chiikawa_2026/bg02.webp") repeat;
  background-position: top;
  background-size:  100%;
  animation: bg02 120s linear infinite alternate;
  z-index: 0;
  will-change: transform;
}
@keyframes bg02 {
  from { background-position: 0 0; }
  to   { background-position: -1500px 0; }
}
@media screen and (max-width: 750px){
  .bg02{
  background: url("../../../img/campaign/chiikawa_2026/bg02_sp.webp") repeat;
  animation: bg02sp 120s linear infinite alternate;
  background-size:  100%;
  z-index: 0;
  will-change: transform;
}
}
@keyframes bg02sp {
  from { background-position: 0 0; }
  to   { background-position: -600px 0; }
}
/* ヘッダー */
header{
  position: relative;
  display: block;
  margin: 0 auto;
  z-index: 1;
  background-color: #e51954;
  text-align: center;
  padding: 0.5vw 0;
}
.header_logo{
  width: clamp(130px, 9vw, 175px);
  height: auto;
}
@media screen and (max-width: 750px){
  header{
  padding: 1.5vw 0;
}
  .header_logo{
  width: 22.4%;
  height: auto;
}
}
/* メインビジュアル */
.mv {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 100%;
}
.mv_wrap {
  width: 100%;
  height: auto;
}
.mv_bg {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
}
.mv_bg_img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 750px){
  .mv_bg {
  background-image: url("../../../img/campaign/chiikawa_2026/mv_bg01_sp.webp");
  background-size: cover;
  aspect-ratio: 750 / 600;
  background-position: center;
  background-repeat: no-repeat;
  }
  .mv_bg_img{
  display: none;
}
}
.mv_chara{
  position: absolute;
  top: 7%;
  left: 30%;
  margin: 0 auto;
  max-width: 42%;
  animation: slideUpRight 4s cubic-bezier(.25,1,.5,1) forwards;
}
.mv_chara img{
    width: 100%;
    display: block;
}
@keyframes slideUpRight {
  to {
    transform: translate(
      clamp(-16px, 2vw, 24px),
      clamp(-24px, -6vh, -64px)
    );
  }
}
.mv_lipoDIllust{
  position:absolute;
  max-width: 9%;
  width: 100%;
  top: 10%;
  right: 13%;
}
.mv-text{
    max-width: 28%;
    width: 100%;
    height: auto;
    position: absolute;
    left: 16%;
    top: 4%;
    opacity: 0;
    animation: pop 0.8s ease-in-out forwards;
    animation-delay: 1.5s;
    z-index: 3;
}
@keyframes pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.45);
    opacity: 1;
  }
  70% {
    transform: scale(1);
  }
  82% {
    transform: scale(1.2);
  }
  92% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.mv-syouhin{
    max-width: 12.8%;
    position: absolute;
    left: 6%;
    bottom: 9%;
    opacity: 0;
    animation: pop 0.7s ease-in-out forwards;
    animation-delay: 2s;
}
.mv-syouhin img{
    width: 100%;
}
.mv_period_01{
    max-width:21.5%;
    position: absolute;
    right: 5%;
    bottom: 7%;
    animation: rotateAnimation 7s linear infinite;
    z-index: 3;
}
.mv_period_02{
    max-width:23%;
    position: absolute;
    right: 8%;
    bottom: 16%;
    z-index: 4;
}
h1{
  margin: 0 auto;
  text-align: center;
}
.main_title{
  position: relative;
  max-width: 1300px;
  width: 90%;
  z-index: 120;
  margin-top: -50px;
  opacity: 0;
  animation: pop 1s ease-in-out forwards;
  animation-delay: 2.6s;
}
.main_title img{
    width: 100%;
}
@media screen and (max-width: 750px){
  .mv-syouhin{
    max-width:32%;
    position: absolute;
    left: 5%;
    bottom: 15%;
    animation-delay: 2s;
}
.mv_lipoDIllust{
  position:absolute;
  max-width: 9.8%;
  top: 34%;
  right: 3%;
}
.mv-text{
    max-width: 38.8%;
    height: auto;
    position: absolute;
    left: 4%;
    top: 5%;
    animation-delay: 1.5s;
    z-index: 3;
}
.mv-text img{
    width: 100%;
}
.mv_chara{
  position: absolute;
  top: 12%;
  left: 20%;
  margin: 0 auto;
  max-width: 65%;
  animation: slideUpRight_sp 5s cubic-bezier(.25,1,.5,1) forwards;
}
.charaBody img{
    width: 100%;
    display: block;
}
@keyframes slideUpRight_sp {
  to {
      transform: translate(2vw, -3vw);
  }
}
.mv_period_01{
    max-width:31.5%;
    position: absolute;
    right: 3%;
    bottom: 10%;
    z-index: 3;
}
.mv_period_02{
    max-width:34%;
    position: absolute;
    right: 7%;
    bottom: 16.5%;
    z-index: 4;
}
  .main_title{
  position: relative;
  max-width: 640px;
  width: 90%;
  margin-top: -10vw;
  }
}
/* ↓ 対象商品キャンペーンボタン ↓ */
.cpArea{
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.cpBtn{
    text-align: center;
    margin: .8vw auto 75px auto;
    padding: 0 10%;
}
.cpBtn_inner{
  max-width: 800px;
}
.cpText{
    max-width: 68.8%;
    width: 100%;
    margin-bottom: 15px;
}
.btnArea{
    display: flex;
    justify-content: center;
    gap: auto;
}
.and{
  max-width:58px;
  width: 100%;
  margin: 7% 1%;
  display: block;
}
/* green / orange 共通 */
.greenBtn,
.orangeBtn {
    position: relative;
    display: block;
    width: min(352px, 90vw);
    aspect-ratio: 300 / 150;
    overflow: hidden;
    cursor: pointer;
}
.greenBtn img,
.orangeBtn img {
    position: absolute;
    inset: 0;
    width: 100%;
    transition: .4s ease-in-out;
    object-fit: contain;
}
/* hover切り替え */
.greenBtn img:nth-of-type(2),
.orangeBtn img:nth-of-type(2) {
    opacity: 0;
}
.greenBtn:hover img:nth-of-type(2),
.orangeBtn:hover img:nth-of-type(2) {
    opacity: 1;
}
/* ボタンhover設定 */
@media (hover: hover) {
    .greenBtn:hover img:nth-of-type(2),
    .orangeBtn:hover img:nth-of-type(2) {
        opacity: 1;
    }
}
@media (hover: none) {
    .greenBtn:hover img:nth-of-type(2),
    .orangeBtn:hover img:nth-of-type(2) {
        opacity: 0 !important; 
    }
    .greenBtn:active img:nth-of-type(2),
    .orangeBtn:active img:nth-of-type(2) {
        opacity: 1;
        transition: 0s;
    }
}
.greenBtn img, .orangeBtn img {
    pointer-events: none;
}
@media screen and (max-width: 750px){
  .cpArea{
    max-width: 600px;
    width: 100%;
    margin-top: 0;
  }
  .and{
  max-width: 8%;
  margin: 7% 2%;
}
  .cpBtn{
    text-align: center;
    margin:  0 auto;
    padding: 2% 7% 7% ;
}
  .cpBtn_inner{
  padding: 0;
  }
  .cpText{
    max-width: 68.8%;
    width: 100%;
    margin-bottom: 8px;
}
}
/* ↓ 対象商品を購入して店頭でもらえる！ ↓ */
.cpStore{
    text-align: center;
    margin: 0 auto;
    padding: 10px;
    width: 90%;
    height: auto;
    background-color:#b8d680;
    border-radius: 50px;
    position: relative;
    box-shadow: clamp(8px, 1.5vw, 15px) clamp(6px, 1vw, 10px) 0 0 rgba(0,0,0,0.1);
    max-width: 1000px;
}
.cpStore::before {
  content: "";
  position: absolute;
  inset: 15px;           
  border: clamp(2px, 1vw, 6px) dotted #5fb71d;
  border-radius: clamp(12px, 3.2vw, 32px);  
  pointer-events: none;
}
.pic1{
    max-width: 26.9%;
    position: absolute;
    left: -6%;
    top: -5.5%;
    animation: tilt 1s ease-in-out infinite alternate;
    transform-origin: center bottom;
    z-index: 10;
}
.pic1 img{
    width: 100%;
    height: auto;
    display: block;
}
@keyframes tilt{
  from {
    transform: rotate(-7deg);
  }
  to {
    transform: rotate(7deg);
  }
}
/* キャラ(モモンガ)が揺れる2 */
.pic2{
    max-width: 17.9%;
    position: absolute;
    right:0;
    top: -2%;
    object-fit: cover;
    animation: sway 4s ease-in-out infinite;
    z-index: 99;
}
.pic3{
  max-width: 17.1%;
  height: auto;
  position: absolute;
  right: 0;
  top: -2%;
  object-fit: cover;
  animation: sway 4s ease-in-out infinite;
}
/* 1枚目 */
.pic2{
  z-index: 99;
  animation:
    sway 2s ease-in-out infinite,
    fade1 4s infinite;
}
/* 2枚目 */
.pic3{
  z-index: 98;
  animation:
    sway 2s ease-in-out infinite,
    fade2 4s infinite;
}
/* 画像切り替え */
@keyframes fade1 {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes fade2 {
  0%, 49% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
/* 横ゆらゆら */
@keyframes sway {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
.kirakira1{
    max-width: 8%;
    position: absolute;
    z-index: 3;
    left: 15%;
    top: 3%;
}
.kirakira2{
    max-width: 16.2%;
    position: absolute;
    right: 8%;
    top: 3%;
}
.cpStore_txt{
    max-width: 43.3%;
    padding: 3% 0 2% 0;
}
@media screen and (max-width: 750px){
.cpStore{
    text-align: center;
    margin: 0 auto;
    width: 88%;
    border-radius: 3vw;
}
.cpStore::before {
  content: "";
  position: absolute;
  inset: 1.2vw;                
  border: clamp(2px, 0.8vw, 5px) dotted #5fb71d;
  border-radius: 3vw;
  pointer-events: none;
}
  .kirakira1{
    display: none;
	}
  .kirakira2 {
    display: none;
	}
  .cpStore_txt{
    max-width: 50.5%;
    padding: 5% 0 4% 0;
  }
  .pic1{
    max-width: 31.5%;
    left: -6%;
    top: -1.5%;
  }
  .pic2{
    max-width: 21.4%;
    right:-1%;
    top: -1%;
  }
  .pic3{
    max-width: 20.2%;
    right:-1%;
    top: -1%;
  }
}
.storeTitleWrap{
  display: flex;
  justify-content: center;
  margin: 10px 1vw 15px 1vw;
}
.cpStore_title {
  display: flex;
  justify-content: center; 
  max-width: 74%; 
  gap: 1px;
}
.cpStore_title__wrap{
  display: flex;
}
.title_01{
  display: inline-block;
  transform: scaleX(1.05);
  margin-top: -1.2%; 
}
.title_02{
  margin-top: 2.5%;
  transform: scaleY(0.85);
}
.title_03{
  margin-left: -8px;
}
@media screen and (max-width: 750px){
  .storeTitleWrap{
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
  .cpStore_title {
  max-width: 67.5%; 
  gap: auto;
}
.title_02{
  margin-top: 2.5%;
  transform: scaleY(0.8);
}
.title_03{
  margin-left: -5px;
}
}
/* 対象商品を1箱購入してもらえる！ */
.con1{
    margin-bottom: 10px;
}
.con1_txt{
    max-width: 92.6%;
    margin: 10px auto 20px auto;
}
.con-box{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
    gap: 2%;
}
.con-box_item{
    position: relative;
    width: 45%;
    text-align: center;
}
.cp-store1_pic{
    width: 100%;
}
.cp-store {
  width: 35%;
  position: absolute;
  left: -3%;
  top: 0;
  transform-origin: center center;
}
.cp-store.is-active {
  animation: shake 1s ease-in-out forwards;
}
@keyframes shake {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.cp-store2_pic{
    width: 100%;
}
@media (max-width: 750px) {
  .con1{
    padding-top: 2%;
}
.con1_txt{
    max-width: 92.5%;
    margin: 0 auto;
    padding-top: 1%;
}
  .con-box {
    flex-direction: column;
    margin: 0 auto;
  }
  .con-box_item{
    width: 95.8%;
    margin: 0 auto;
  }
  .cp-store1_pic{
    max-width: 96%;
    margin-top: 0;
    padding-top: 3%;
  }
  .cp-store{
  max-width: 26%;
  position: absolute;
  left: 3.7%;
  top: 5%;
  transform-origin: center center;
}
}
/* リポビタンD10本を2箱購入してもらえる！ */
.con2{
  padding-bottom: 3%;
}
.con2_txt{
    max-width: 92.5%;
    margin: 15px 0;
}
.con-box2{
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.cp-store3_pic{
  max-width: 92.5%;
}
.kirakira3{
    max-width: 19.2%;
    position: absolute;
    z-index: 3;
    left: 7.8%;
    bottom: 10%;
}
.kirakira4{
    max-width: 19.2%;
    position: absolute;
    z-index: 3;
    right: 7.8%;
    bottom: 10%;
}
.btn{
    position: relative;
    padding-bottom: 2.5%;
    text-align: center;
}
.btn:hover{
  opacity: 0.8;
  transition: transform 0.3s ease;
}
.cp_btn{
  max-width: 36%;
  margin: 0 auto;
  padding-bottom: 1%;
}
.cp_btn img {
  width: 100%;
}
.cp_bottom{
    max-width: 92.5%;
    width: 100%;
    padding-bottom: 3%;
}
@media (max-width: 750px) {
  .con2_txt{
    max-width: 92.5%;
    margin: 0 auto ;
    padding: 5% 0 3%;
  }
  .cp-store3{
    display: none;
  }
  .cp-store3_pic{
  max-width: 92.5%;
  }
  .kirakira3{
    max-width: 16.5%;
    position: absolute;
    z-index: 3;
    left: 7%;
    bottom: 5%;
}
  .kirakira4{
    max-width: 16.8%;
    right: 7%;
    bottom: 5%;
  }
  .btn{
    position: relative;
    padding-bottom: 4%;
    text-align: center;
  }
  .cp_btn{
  max-width: 50%;
  margin: 0 auto;
  }
  .cp_bottom{
    max-width: 92.3%;
    margin-bottom: 0;
    padding-bottom: 3%;
}
}
/* ↓ 対象商品購入のレシートで応募で当たる！ ↓ */
.cpReceipt{   
    text-align: center;
    margin: 0 auto;
    padding: 10px 0;
    width: 90%;
    height: auto;
    background-color:#fff37f;
    border-radius: 50px;
    position: relative;
    box-shadow: clamp(8px, 1.5vw, 15px) clamp(6px, 1vw, 10px) 0 0 rgba(0,0,0,0.1);
    max-width: 1000px;
    margin-top: clamp(60px, 8vw, 120px);
    z-index: 3;
}
.cpReceipt::before {
  content: "";
  position: absolute;
  inset: 15px;    
  border: clamp(2px, 1vw, 6px) dotted #ef9300;
  border-radius: clamp(12px, 3.2vw, 32px);    
  pointer-events: none;
  z-index: 1;
}
.cpReceipt_head{
  max-width: 75.7%;
  position: absolute;
  top: -3.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.kirakira5{
    max-width:17.5%;
    position: absolute;
    z-index: 3;
    left: 7%;
    top: 4%;
    z-index: 2;
}
.kirakira6{
    max-width: 17.5%;
    position: absolute;
    z-index: 3;
    right: 7%;
    top: 4%;
    z-index: 2;
}
.cpReceipt_txt{
  max-width: 36%;
  width: 100%;
  margin: 8% auto 3% auto;
}
.receiptTitleWrap{
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.cpReceipt_title{
  display: flex;
  justify-content: center;
  max-width: 86%;
  max-height: clamp(100px, 7vw, 200px);
  width: auto;
  z-index: 2;
}
.title_04{
transform: scaleX(0.9);
}
.title_05{
  margin-top: 1.3%;
  transform: scaleY(0.8);
  margin-right: 2px;
}
.title_06{
  transform: scale(1.2);
}
.title_07{
  transform: scaleX(1.1);
}
.title_08{
  transform: scale(1.1);
  padding-right: 1.5%;
}
.cpReceipt_period{
  padding: 3% 0 5% 0;
}
.cpReceipt_period__bg{
    background-color: #ef9300;
    padding: 1.5% 0;
}
.cp_receipt_period{
  display: block; 
  margin: 0 auto; 
  max-width: 81.3%;
  width: 100%;
  height: auto;
  }
.cp-receipt {
  max-width: 41%;
  position: absolute;
  right: -2%;
  top: -5%;
  transform-origin: center center;
  }
.cp-receipt.is-active {
  animation: shake 1s ease-in-out forwards;
}
.cpReceipt_con{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}
.cp-receipt_pic1{
  max-width: 98.2%;
}
.cp-receipt_pic2{
  max-width: 98%;
  padding-top: 1%;
}
.cpReceipt_btn{
  max-width: 35.3%;
  margin: 0 auto;
  padding-bottom: 1%;
}
.cpReceipt_btn img {
  width: 100%;
}
.howtoArea{
  /* 方眼紙のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 2px),rgba(255, 255, 255, 0.4) calc(100% - 2px)),
                    linear-gradient(90deg, transparent calc(100% - 2px),rgba(255, 255, 255, 0.4) calc(100% - 2px));
  background-size: clamp(25px, 4vw, 45px) clamp(25px, 4vw, 45px);
  background-color: #ffd368;
  background-repeat: repeat;
  background-position: center center;
  position: relative;
  padding: 3% 3% 4% 3%;
}
/* キャラ(ハチワレ)が揺れる */
.pic4{
    max-width: 14.3%;
    width: 100%;
    position: absolute;
    left:12%;
    top: -8.5%;
    object-fit: cover;
    animation: sway 4s ease-in-out infinite;
    z-index: 99;
}
.pic5{
  max-width: 14%;
  width: 100%;
  position: absolute;
  left: 12%;
  top: -9%;
  object-fit: cover;
  animation: sway 4s ease-in-out infinite;
  z-index: 2;
}
/* 1枚目 */
.pic4{
  z-index: 99;
  animation:
    sway 2s ease-in-out infinite,
    fade1 4s infinite;
}
/* 2枚目 */
.pic5{
  z-index: 98;
  animation:
    sway 2s ease-in-out infinite,
    fade2 4s infinite;
}
/* キャラ(ちいかわ)が揺れる */
.pic6{
    max-width: 14.2%;
    width: 100%;
    position: absolute;
    right: 12%;
    top: -9%;
    object-fit: cover;
    animation: sway 4s ease-in-out infinite;
    z-index: 99;
}
.pic7{
  max-width: 13.8%;
  width: 100%;
  position: absolute;
  right: 12%;
  top: -9%;
  object-fit: cover;
  animation: sway 4s ease-in-out infinite;
}
/* 1枚目 */
.pic6{
  z-index: 99;
  animation:
    sway 2s ease-in-out infinite,
    fade1 4s infinite;
}
/* 2枚目 */
.pic7{
  z-index: 98;
  animation:
    sway 2s ease-in-out infinite,
    fade2 4s infinite;
}
.howto_title{
  max-width: 45.8%;
  padding-bottom: 1.5%;
}
.howto_step{
  max-width: 90.8%;
}
.comingsoon{
  max-width: 50.5%;
  width: 100%;
  padding: 3% 0;
}
.pic8{
    max-width: 15.8%;
    width: 100%;
    position: absolute;
    left: 4%;
    bottom: 2%;
    animation: tilt 1s ease-in-out infinite alternate;
    transform-origin: center bottom;
    z-index: 2;
}
.pic9{
    max-width: 14.9%;
    position: absolute;
    right: 5%;
    bottom: 1.9%;
    animation: tilt 1s ease-in-out infinite alternate;
    transform-origin: center bottom;
    z-index: 2;
}
@media (max-width: 750px) {
  .cpReceipt{   
    text-align: center;
    margin: 0 auto;
    padding: 10px 0;
    width: 88%;
    border-radius: 3vw;
    position: relative;
    margin-top: clamp(30px, 15vw, 150px);
}
.cpReceipt::before {
  content: "";
  position: absolute;
  inset: 1.2vw;
  border: clamp(2px, 0.8vw, 6px) dotted #ef9300;
  border-radius: 3vw;    
  pointer-events: none;
  z-index: 1;
}
  .cpReceipt_con{
  display: block;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
  padding-bottom: 4%;
}
.kirakira5{
    max-width:14%;
    position: absolute;
    left: 7%;
    top: 1.7%;
}
.kirakira6{
    max-width:13.3%;
    right: 7%;
    top: 1.6%;
}
.cpReceipt_head{
  max-width: 89%;
  top: -2.4%;
}
.cpReceipt_txt{
  max-width: 50%;
  margin: 0 auto;
  padding: 6.5% 0 3% 0;
}
.cpReceipt_title{
  max-width: 87.5%;
  max-height: 10vw;
  gap: 0;
}
.title_05{
  margin-top: 1%;
  transform: scaleY(0.8);
  margin-right: 0;
}
.cpReceipt_period{
  padding: 8% 0 0 0;
}
.cpReceipt_period__bg{
    padding: 9% 0;
    position: relative;
}
.cp_receipt_period{
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 91%;
    margin-top: -3%;
}
.cp-receipt {
  width: 30%;
  position: absolute;
  right: 4.5%;
  top: 0.5%;
  transform-origin: center center;
}
.cp-receipt_pic1{
  width: 93.3%;
  padding: 3% 0 5% 0;
}
.cp-receipt_pic2{
  width: 93.3%;
  padding: 0;
}
.cpReceipt_btn{
  max-width: 48.5%;
}
.howto_title{
  max-width: 82.3%;
  padding-bottom: 4%;
}
.howto_step{
  max-width: 97.2%;
}
.howtoArea{
  background-image: linear-gradient(0deg, transparent calc(100% - 1px),rgba(255, 255, 255, 0.4) calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px),rgba(255, 255, 255, 0.4) calc(100% - 1px));
  background-size: clamp(15px, 4vw, 45px) clamp(15px, 4vw, 45px);
  padding: 3% 7% 5% 7%;
}
.pic4{
    max-width: 16.6%;
    left:-1%;
    top: 2%;
}
.pic5{
  max-width: 16.3%;
    left:-1%;
    top: 2%;
}
.pic6{
    max-width: 16.5%;
    right:-1%;
    top: 2%;
}
.pic7{
  max-width: 16%;
    right:-1%;
    top: 2%;
}
.comingsoon{
  max-width: 57%;
  padding: 4% 0;
}
.pic8{
    max-width: 18.9%;
    left: -1%;
    bottom: 2.5%;
}
.pic9{
    max-width: 17.8%;
    right: -1%;
    bottom: 2.5%;
}
}
/* ここから効能の紹介サークルゾーン */
  .main-con__bg {
  margin: 0 auto;
  position: relative;
  align-items: center;
  justify-content: center;
  max-width: 3000px;
  padding: 16vh 0;
  margin-top: 30px;
  z-index: 1; 
}
.main-con__bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../../img/campaign/chiikawa_2026/bg03.webp) no-repeat;
  background-size: cover;
  background-position: center;
  clip-path: polygon(
      0% 70px, 
      100% 0%,
      100% calc(100% - 70px),
      0% 100%
  );
  z-index: -1;
}
.circle_click{
  position: absolute;
  width: 24%;
  top: 5%;
  left: -6%;
  padding-left: 2%;
}
@media screen and (min-width: 1920px) {
    .main-con__bg {
      padding: 13vh 0; 
      margin-top: 30px;
  }
  .main-con__bg::before {
    clip-path: polygon(
      0% 140px, 
      100% 0%,
      100% calc(100% - 140px),
      0% 100%
    );
  }
  .circle_click{
  position: absolute;
  width: 24%;
  top: 4%;
  left: -8%;
  padding-left: 2%;
  }
}
@media screen and (max-width: 1200px) {
  .main-con__bg {
    padding: 14vh 0;
  }
  .circle_click{
  top: 7%;
  left: -3%;
}
}
@media screen and (max-width: 750px) {
  .circle_click{
  width: 20.8%;
  top: 10%;
  left: 0;
  padding-left: 2%;
}
}
.main-con__head{
  max-width: 845px;
  width: 82%;
  position: absolute;
  display: block;
  margin: 0 auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -50px;
}
.circle_wrap{
  position: relative;
  margin: 0 auto;
  width: min(95vw, 890px);
  align-items: center;
  aspect-ratio: 1 / 1;
}
@media screen and (min-width: 1920px) {
  .circle_wrap{
  margin-top: 20px;
}
}
.circle_pd_info{
  position: absolute;
  width: 44%;
  bottom: 2%;
  right: -8%;
  padding-right: 2%;
}
.circle-box__pd{
  max-width: 19.3%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
}
.circle-box{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 1000px;
  margin: 0 auto;
}
.circle-rotator{
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.circle-rotator.is-active {
  animation: rotateCircle 2.5s linear forwards;
}
@keyframes rotateCircle {
  to { transform: rotate(180deg); }
}
@keyframes rotateReverse {
  to { transform: translate(-50%, -50%) rotate(-180deg); }
}
.item {
  position: absolute;
  width: 35%;
  top: 50%;   
  left: 50%;
  transform-origin: center;
  will-change: transform;
}
.item.is-active {
  animation: rotateReverse 2.5s linear forwards;
}
.item img{
  width: 100%;
}
.item1{
  transform: translate(-50%, -50%);
  top: 18%;
  left: 25%;
}
.item2{
  transform: translate(-50%, -50%);
  top: 12%;
  left: 65%;
}
.item3{
  transform: translate(-50%, -50%);
  top: 36%;
  left: 90%;
}
.item4{
  transform: translate(-50%, -50%);
  top: 64%;
  left: 90%;
}
.item5{
  transform: translate(-50%, -50%);
  top: 83%;
  left: 63%;
}
.item6{
  transform: translate(-50%, -50%);
  top: 74%;
  left: 25%;
}
.item7{
  transform: translate(-50%, -50%);
  top: 44%;
  left: 13%;
}
@media screen and (max-width: 1200px) {
  .circle-box__pd{
    margin-top: 2%;
}
.circle-box {
  margin-top: 4%;
}
.item1{
  top: 15%;
  left: 25%;
}
.item2{
  top: 8%;
  left: 65%;
}
.item3{
  top: 33%;
  left: 80%;
}
.item4{
  top: 60%;
  left: 83%;
}
.item5{
  top: 83%;
  left: 60%;
}
.item6{
  top: 70%;
  left: 25%;
}
.item7{
  top: 44%;
  left: 17%;
}
.circle_pd_info{
  bottom: 0;
  right: 0;
  padding-right: 2%;
}
}
@media (max-width: 750px) {
  .main-con__bg{
  background: url(../../../img/campaign/chiikawa_2026/bg03_sp.webp) no-repeat;
  background-size: contain;
  background-position: center;
  padding: 13% 0 5% 0;
  margin: 0 auto;
}
.main-con__head{
  max-width: 638px;
  width: 85%;
  margin-top: 0;
}
  .circle-box__pd{
    max-width: 16.5%;
    margin-top: -3%;
}
.main-con__bg::before {
  display: none;
}
.circle_pd_info{
  width: 59.5%;
  bottom: 7%;
  right: 7%;
}
.item {
  position: absolute;
  width: 29%;
}
.item1{
  top: 30%;
  left: 29%;
}
.item2{
  top: 23%;
  left: 60%;
}
.item3{
  top:41%;
  left: 78%;
}
.item4{
  top: 64%;
  left: 75%;
}
.item5{
  top: 82.5%;
  left: 55%;
}
.item6{
  top: 73%;
  left: 27%;
}
.item7{
  top: 51%;
  left: 20%;
}
}
/* ↓ モーダルウィンドウ中身 ↓ */
.modaal-content {
  position: relative;
}
.modaal-content-container {
  padding: 20px;
}
.modaal-container{
  background: rgba(0,0,0,0);
}
.modaal-container,
.modaal-inner-wrapper,
.modaal-content-container,
.modaal-content {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.modaal-content img {
  display: block;
}
/* ✕ボタンの位置調整 */
.modaal-close {
  position: absolute;
  top: -30px;
  right: 10px;
  width: 50px;
  height: 50px;
  z-index: 999;
  background: #fff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ✕ボタン */
.modaal-close:before,
.modaal-close:after {
  background: #777 !important;
  width: 30px;
  height: 4px;
  top: 50% !important;
  left: 50% !important;
}
.modaal-close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modaal-close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* ホバーしたときの✕ボタンの色 */
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #dd4339 !important;
}
/* ↓ 対象商品一覧 ↓ */
.target-pdArea{
    max-width: 1000px;
    margin: 0 auto;
    width: 90%;
    height: auto;
    background-color:#fff ;
    border-radius: 50px;
    position: relative;
    box-shadow: clamp(8px, 1.5vw, 15px) clamp(6px, 1vw, 10px) 0 0 rgba(0,0,0,0.1);
    text-align: center;
}
.target-pd_wrap{
  padding: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.pic10{
    max-width: 19.3%;
    width: 100%;
    position: absolute;
    left: 7%;
    top: 1%;
    transform-origin: center bottom;
    animation: tilt 1s ease-in-out infinite alternate;
}
.pic11{
    max-width: 20%;
    position: absolute;
    right: 7%;
    top: 0.8%;
    transform-origin: center bottom;
    animation: tilt 1s ease-in-out infinite alternate;
}
.target-pdArea_head{
  max-width: 37%;
  width: 100%;
  padding: 1% 0 3% 0;
}
.target-pdArea_txt{
  max-width: 35%;
  width: 100%;
}
@media (max-width: 750px){
  .target-pdArea{
    max-width: 1000px;
    width: 88%;
    border-radius: 5vw;
  }
  .pic10{
    max-width: 23%;
    width: 100%;
    left: 4%;
    top: .5%;
  }
  .pic11{
    max-width: 23.8%;
    width: 100%;
    right: 3.5%;
    top: .2%;
  }
  .target-pd_wrap{
  padding: 1% 4% 3% 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
  .target-pdArea_head{
  max-width: 52.5%;
  padding:2% 0 3% 0;
  }
  .target-pdArea_txt{
  max-width: 55%;
  }
}
.ichiran_img{
  padding-top: 4%;
  width: 100%;
}
/* 一覧背景 */
.pd_lipoD{
  background-color: rgba(93, 207, 242, 0.5);
  padding: 2%;
  text-align: center;
}
.pd_jerryWater{
  background-color: rgba(255, 240, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2%;
  margin-bottom: 2%;
  text-align: center;  
}
.pd_tb{
  background-color: rgba(227, 0, 127, 0.35);
  margin: 0 auto;
  padding: 2%;
  text-align: center;
}
/* 一覧アイテム */
.target-pd_item1{
  width: 98.7%;
  border-bottom: 5px dotted #00a8ec;
  padding-bottom: 2%;
}
.target-pd_item2{
  width: 86%;
  padding-top: 2%;
  margin-left: 30px;
}
.target-pd_item3{
  width: 85.5%;
  margin-left: 30px;
}
.target-pd_item4{
  width: 95.5%;
  padding-bottom: 2%;
}
.target-pd_item5{
  width: 86.5%;
  padding: 2% 0;
}
.target-pd_item6{
  width: 62%;
  border-right: 5px dotted #f19500;
  padding-top: 2%;
  padding-right: 3%;
}
.target-pd_item7{
  width:20%;
  padding-left: 3%;
  padding-top: 2%;
}
@media (max-width: 750px){
.pd_lipoD{
  padding: 2% 3%;
}
.pd_jerryWater{
  padding: 2% 3%;
}
.pd_tb{
  padding: 2% 3%;
}
.ichiran_img{
  padding-top: 6%;
}
.pd_jerryWater{
  align-items: center;
  padding: 2% 0;
  text-align: center;  
}
.target-pd_item1{
  width: 98%;
  border-bottom: .6vw dotted #00a8ec;
  padding: 2% 0;
}
.target-pd_item2{
  width: 97%;
  padding: 2% 0;
  margin-left: 10px;
}
.target-pd_item3{
  width: 88.2%;
  padding: 1% 0;
  margin-left: 15px;
}
.target-pd_item4{
  width: 93%;
  padding: 2% 0;
}
.target-pd_item5{
  width: 83.7%;
  padding: 1% 4.5% 2% 0;
}
.target-pd_item6{
  width: 62%;
  border-right: .6vw dotted #f19500;
  padding-top: 4%;
  padding-right: 3%;
}
.target-pd_item7{
  width:18%;
  padding-left: 1%;
  padding-top: 3%;
}
}
.border{
  text-align: center;
  display: inline-block;
  border-bottom: 5px dotted #f19500;
  width: 100%;
}
.pd_water{
  width: 100%;
}
.pd_waterPowder{
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: center;
}
.pic12{
  max-width: 24.6%;
  width: 100%;
  position: absolute;
  left: -11%;
  bottom: 5.5%;
  animation: tilt 1s ease-in-out infinite alternate;
}
.target-pd_bottom{
  width: 95%;
  border-top: 5px dotted #00a8ec;
  padding-top: 2%;
}
@media (max-width: 750px){
  .border{
  border-bottom: .6vw dotted #f19500;
  width: 93%;
  padding: 0;
  margin-bottom: 5px;
  }
  .pd_waterPowder{
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  padding-right: 3%;
}
.pic12{
  max-width: 29.7%;
  left: auto;
  right: -5.2%;
  bottom: 16.5%;
}
.target-pd_bottom{
  width: 100%;
  border-top: .6vw dotted #00a8ec;
  padding-top: 10px;
}
}
/* ↓ 公式Xボタン ↓ */
.offiaialX_btn{
  margin: 0 auto;
  margin-top: 60px;
  z-index: 2;
  position: relative;
  text-align: center;
  width: clamp(300px, 60%, 640px);
}
.offiaialX_btn:hover{
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
.offiaialX_btn img{
  width: 100%;
}
/* ↓ SNSアイコンボタン ↓ */
.share-icon{
  text-align: center;
  align-items: center;
  margin: 0 auto;
  margin: 30px auto 60px auto;
  position: relative;
  max-width: 420px;
}
.share-icon__haed{
  width: 100%;
  padding-bottom: 5%;
}
.iconArea{
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  position: relative;
  max-width: 370px;
  width: 100%;  
}
.iconArea_insta,
.iconArea_X,
.iconArea_line{
  width: 100%;
  height: auto;
}
@media (min-width: 751px) {
  .is-hidden-tablet {
    display: none;
  }
}
@media (max-width: 750px){
.offiaialX_btn{
  width: 90%;
  margin: 0 auto;
  padding: 5% 0 0 0;
}
.share-icon{
  width: 60%;
  margin: 0 auto;
  padding: 3% 0;
}
.iconArea{
  gap: 0;
  max-width: 370px;
  width: 100%; 
  padding-bottom: 7%; 
}
.iconArea img{
    width: 70%;
}
.is-hidden-mobile{
  display: none;
}
}
/* ↓ お問い合わせ ↓ */
.contact{
  margin: 0 auto;
  text-align: center;
  position: relative;
  background-color:#fff37f;
  border: clamp(4px, .3vw, 5px) solid #412621;
  border-radius: clamp(12px, 3vw, 40px);
  z-index: 99;
  width: 90%;
  max-width: 1000px;
  padding:40px 80px;
}
.contact_txt{
  width: 100%;
  max-width: 719px;
  aspect-ratio: 719 / 349;
  height: auto;
}
.contact_pic1{
  max-width: 15.6%;
  width: 100%;
  position: absolute;
  top: -18%;
  left: 1%;
  animation: updown 2.5s ease-in-out infinite;
}
.contact_pic2{
  max-width: 11.4%;
  width: 100%;
  position: absolute;
  top: -25%;
  right: 3%;
  animation: updown 2.5s ease-in-out infinite;
}
.contact_pic3{
  max-width: 15.4%;
  width: 100%;
  position: absolute;
  bottom: -10%;
  left: -3%;
  animation: updown 2.5s ease-in-out infinite;
}
.contact_pic4{
  max-width: 15.8%;
  width: 100%;
  position: absolute;
  bottom: -12%;
  right: -5%;
  animation: updown 2.5s ease-in-out infinite;
}
@keyframes updown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
@media (max-width: 750px){
  .contact{
    padding: 3% 0;
    border: .5vw solid #412621;
    border-radius: clamp(12px, 3vw, 40px);
}
.contact_txt{
  width: 91%;
}
.contact_pic1{
  max-width: 18%;
  top: -18%;
  left: 0;
}
.contact_pic2{
  max-width: 11.4%;
  top: -23%;
  right: 3%;
}
.contact_pic3{
  max-width: 17.7%;
  bottom: -18%;
  left: -3%;
}
.contact_pic4{
  max-width: 18.1%;
  bottom: -20%;
  right: -5%;
}
}
/* フッター */
footer{
  background-color: #e51954;
  position: relative;
  text-align: center;
  padding: 25px 0;
}
.footer_logo{
  width: clamp(200px, 30%, 415px);
  height: auto;
  margin: 0 auto;
  align-items: center;
}
.copy{
  margin: 0 auto;
  text-align: center;
  width: clamp(300px, 50%, 346px);
  margin: 40px auto 60px auto;
}
.copy img{
  width: 100%;
}
@media (max-width: 750px){
  footer{
  padding: 5% 0 4% 0;
  }
  .footer_logo{
  width: 86.4%;
  }
  .copy{
  text-align: center;
  width: 40%;
  padding: 4% 0;
  margin: 0 auto;
}
}
/* モーダル動画 */
.modal-video-close-btn {
  background: url(../../../img/campaign/chiikawa_2026/modal-close.svg) no-repeat center;
  background-size: contain;
  width: 40px; 
  height: 40px;
  display: block;
  position: absolute;
  top: 0;
  right: -50px;
}
.modal-video-close-btn:before,
.modal-video-close-btn:after {
  display: none;
}
@media screen and (max-width: 1024px) {
  .modal-video-close-btn {
    right: 0;
    top: -40px;
    width: 30px; 
    height: 30px;
  }
}