@charset "utf-8";

html, body {
  overflow-x: hidden;
}
.hh1{
    display:none!important;
}



/* =========================
   動画背景ヒーロー
========================= */

.heroVideo {
  position: relative;
  width: 100%;
  min-height: 100vh; /* height ではなく min-height */
  display: flex;
  align-items: center;      /* 縦中央寄せ */
  justify-content: center;  /* 横中央 */
  overflow: hidden;
}


/* 背景動画 */
.heroVideo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 暗さ調整オーバーレイ */
.heroVideo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.22) 0%,
    rgba(0,0,0,0.16) 40%,
    rgba(0,0,0,0.30) 100%
  );
  z-index: 1;
}

/* 文字コンテナ */
.heroVideo-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  width: 100%;
  padding: 24px 34px 20px; /* 下にボタン分の余白を確保 */
  text-align: center;

  backdrop-filter: blur(3px);
  border-radius: 12px;
}


/* 見出し */
.heroVideo-inner h1 {
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.3;
  margin-bottom: 12px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* サブコピー */
.heroVideo-inner p {
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
  color: #f2f2f2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}





@media (max-width: 767px) {

  .heroVideo {
    min-height: 70vh;   /* iOS対策：vhより安定 */
    align-items: flex-start;
    padding-top: 78px;    /* 上に余白を作る */
  }

  .heroVideo-inner {
    padding: 16px 16px 16px; /* 下はボタン分を確保 */
    border-radius: 10px;
  }

  /* key画像を縮める */
  .heroVideo-inner .keypic img {
    max-width: 100%;
    height: auto;
  }

  /* ボタン位置を少し上へ */
  .heroBtns {
    bottom: 20px;
    gap: 10px;
  }

  .heroBtns .btn {
    width: 80%;           /* 横2列をやめて1列寄り */
  }
}



/* ボタン */
.heroBtns {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 55px;
  gap: 14px;
    width: 100%;
}

.heroBtns .btn {
  display: inline-block;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
    width: 40%;
}

@media (max-width: 767px){
    
    .heroBtns {
        width: 100%;
        bottom: 30px;
    }
    
    
}



.topBox{
    background:none;
}




/* =========================
   Care Intro
========================= */

.s-cBox {
  margin: 0px 0px 30px 0px;
    background: #ffffff;
  padding: 0px 0px 64px 0px;
}

.s-cInner {
  max-width: 720px;
  margin: 0px auto;
  padding: 0px 0px 0px 0px;
  text-align: center;
}

/* 見出し */
.s-cTit {
  margin: 0px 0px 24px 0px;
    padding: 20px 0px 20px 0px;
    font-size: 24px;
  line-height: 1.4;
  color: #ffffff;
    background-color: #0f6022;
  font-weight: 600;
}


.s-cTit02 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
}

.s-cTit03{
    line-height: 2em;
}

.s-cTit03 span{
    padding: 10px 30px 10px 30px;
    background-color: #ffffff;
    border-radius: 30px;
    color: #ca1c1e;
    font-weight: bold;
    font-size: 0.9em;
}

/* 行ごとのマーカー */
.s-cTit02 .marker {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.s-cTit02 .marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 0.5em;
  background: rgba(255, 226, 120, 0.6);
  z-index: -1;
  border-radius: 2px;
}



.s-cTit img{
    margin-right: 4px;
    width: 26px;
}



/* 本文 */
.s-cTxt {
  margin: 0px 0px 18px 0px;
  padding: 0px 10px 10px 10px;
  font-size: 15px;
  line-height: 1.9;
  color: #333333;
    text-align:left;

}

.s-cLead{
    margin: 0px 0px 20px 0px;
    text-align:center;
    font-size: 18px;
    font-weight: bold;
}



/* スマホ */
@media (max-width: 767px) {
  .s-cBox {
    margin: 0px 0px 10px 0px;
      padding: 0px 0px 10px 0px;
  }

  .s-cTit {
    font-size: 20px;
  }

  .s-cTxt {
    font-size: 14px;
  }

  .sp {
    display: block;
  }

    .s-cLead{
        font-size: 4.5vw;
    }
    
}


.s-cInner .instagramBox{
    border: solid 1px #dcdcdc;
}

.s-cInner .instagramBox .tit{
    margin: 0px 0px 0px 0px;
    width: 100%!important;
    max-width: 100%!important;
}

.s-cInner .instagramBox .ibox{
}

.s-cInner .instagramBox .ibox iframe{
    width: 100%;
    height: 300px;
}

.s-cInner .careList ul{
    display:flex;
    flex-wrap: wrap;
}

.s-cInner .careList ul li{
    margin: 0px auto 20px;
    width: 46%;
}

.s-cInner .careList ul li .pic{
    margin: 0px 0px 10px 0px;
}

.s-cInner .careList ul li .lbl{
    margin: 0px 0px 4px 0px;
    font-size: 13px;
}

.s-cInner .careList ul li .name{
    margin: 0px 0px 8px 0px;
    font-size: 16px;
    font-weight: bold;
}

.s-cInner .careList ul li .dtl{
    font-size: 14px;
    border: solid 1px #b8bbce;
}



.ybox{
    margin: 0px 0px 30px 0px;
    display:block;
}

.yboxsp{
    display:none;
}

@media (max-width: 767px) {
   .ybox{
        display:none;
    } 
    
    .yboxsp{
        margin: 0px 0px 30px 0px;
        display:block;
    }
    
}


.checkBox{
    margin: 0px auto 20px;
    padding: 25px 0px 25px 0px;
    width: 90%;
    display:flex;
    flex-wrap: wrap;
    border-top: solid 6px #bfbfbf;
    border-bottom: solid 6px #bfbfbf;
}

.checkBox dl{
    margin: 0px 2% 20px;
    width: 46%;
}

.checkBox dl:last-child{
    margin-bottom:0px;
}

.checkBox dl dt{
    margin: 0px 0px 6px 0px;
    padding: 0px 0px 0px 34px;
    text-align:left;
    background: url("../img/lp/icon_check.png") no-repeat left top;
    background-size: auto 100%;
    font-weight: bold;
    font-size: 20px;
}

.checkBox dl dd{
    text-align:left;
    font-size: 16px;
}

@media (max-width: 767px) {
    .checkBox dl{
        margin: 0px 10% 20px;
        width: 80%;
    }
}



.careKickenBox{
    
}

.careKickenBox .pic{
    margin: 0px auto 30px;
    width: 70%;
}

@media (max-width: 767px) {
    .careKickenBox .pic{
        width: 90%;
    }   
}


.kickenDetail{
    margin: 0px auto;
    width: 96%;
}

.kickenDetail .kbox{
    margin: 0px 0px 20px 0px;
    display:flex;
}

.kickenDetail .kbox .thum{
    margin: 0px 2% 0px 0px;
    width: 38%;
}

.kickenDetail .kbox dl{
    margin: 0px 0px 0px 0px;
    width: 60%;
}

.kickenDetail .kbox dl dt{
    margin: 0px 0px 10px 0px;
    padding: 6px 4px 6px 20px;
    text-align:left;
    border: solid 1px #313131;
    border-left: solid 10px #313131;    
}



.kickenDetail .kbox dl dd{
    text-align:left;
}


.kickenDetail .attention{
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    background-color: #ca1c1e;
    color: #ffffff;
    font-weight: bold;
    
}


@media (max-width: 767px) {
    .kickenDetail .attention{
        font-size: 3.4vw;
    }
    
    .kickenDetail .kbox dl dd{
        font-size: 3vw;
    }
    
}


.itemsCare ul li .name{
    margin: 0px 0px 4px 0px;
    background:none;
    text-align:left;
    line-height: 1.5em;
}

.itemsCare ul li .txt{
    margin: 0px 10px 10px 0px;
    text-align:left;
    font-size: 13px;
}

.itemsCare ul li .lbl{
    margin: 0px 0px 10px 0px;
    text-align: left;
    font-size: 12px;
}

.itemsCare ul li .lbl span{
    margin: 0px 4px 4px 0px;
    padding: 6px 10px 6px 10px;
    border: solid 1px #b8bbce;
    border-radius: 20px;
    display:inline-block;
}

.itemsCare ul li .price{
    font-size: 14px;
    text-align:left;
}

.itemsCare ul li .price span{
    font-size: 20px;
}

.itemsCare ul li .btn{
    width: 60%;
}


.itemsCare ul li .name .marker{
    padding: 3px 3px 3px 3px;
    font-size: 1em;
}

.itemsCare ul li.liver-pancreas .name .marker{
    background-color: #facd89;
}

.itemsCare ul li.early-kidney .name .marker{
    background-color: #89c997;
}

.itemsCare ul li.kidney .name .marker{
    background-color: #84ccc9;
}

.itemsCare ul li.skin .name .marker{
    background-color: #f19ec2;
}

.itemsCare ul li.herbs .name .marker{
    background-color: #c490bf;
}

.itemsCare ul.herbs li .name{
    background:none;
}



@media (max-width: 767px) {
    .itemsCare ul li .price{
        font-size: 2.8vw;
        text-align:left;
    }
    
    .itemsCare ul li .price span{
        font-size: 2em;
    }
    
    .itemsCare ul li .btn{
        width: 80%;
    }
    
    .itemsCare ul li .name .marker{
        font-size: 4vw;
    }
    
    
}


.h3box{
    margin: 0px 0px 20px 0px;
    padding: 24px 0px 14px 0px;
    background-color: #0f6022;
}

.topBox .itemsCare .h3box h3{
    margin: 0px 0px 6px 0px;
    padding: 4px 14px 4px 14px;
    background:none;
    color: #0f6022;
    display:inline-block;
    background-color: #ffffff;
    border-radius: 20px;
    font-size: 16px;
}

.topBox .itemsCare .h3box p{
    color: #ffffff;
    font-weight: bold;
}

.topBox .itemsCare .h3box p img{
    margin: 0px 4px 0px 0px;
    width: 30px;
}



.yodareBox{
   margin: 0px 0px 30px 0px; 
}

.yodareBox .pic{
    margin: 0px 0px 10px 0px;
}


.yodareBox dl{
    margin: 0px auto 20px;
    width: 94%;
}


.yodareBox dl dt{
    margin: 0px 0px 10px 0px;
    padding: 6px 4px 6px 20px;
    text-align:left;
    border: solid 1px #313131;
    border-left: solid 10px #313131;
    width: 50%;
}



.yodareBox dl dd{
    text-align:left;
}


.yodareBox .btn{
    margin: 0px auto 20px;
    width: 40%;
}



.truckBox{
    margin: 0px 0px 0px 0px;
    display:flex;
    flex-wrap: wrap;
}

.truckBox .tbox{
    margin: 0px 1% 20px 1%;
    width: 48%;
}


.truckBox .tbox dl{
    
}


.truckBox .tbox dl dt{
    margin: 0px 0px 0px 0px;
    font-size: 18px;
}


.truckBox .tbox dl dd{
    text-align:left;
    font-size: 14px;
}




.txtBox.memo{
    margin: 0px auto;
    padding: 4px 4px 4px 4px;
    border: solid 1px #cdcdcd;
    width: 96%;
}

.txtBox.memo p{
    text-align:left;
}




/* フローティングボタン全体 */
.floatingBtns {
  position: fixed;
  left: 50%;
  bottom: -120px; /* 初期は画面外 */
  transform: translateX(-50%);
  width: 400px;
  max-width: 720px;
  padding: 10px 16px 10px;
  display: flex;
  gap: 14px;
  justify-content: center;
  box-sizing: border-box;
  z-index: 9999;

  transition: bottom 0.5s cubic-bezier(.22,.61,.36,1);
  opacity: 0;
    
  background: rgba(238, 238, 238, 0.95);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);    
    
}

/* 表示状態 */
.floatingBtns.is-show {
  bottom: 20px;
  opacity: 1;
}

/* ボタン */
.floatingBtns .fbtn {
  width: 48%;
  overflow: hidden;
}

.floatingBtns .fbtn img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ微調整 */
@media (max-width: 375px) {
  .floatingBtns {
    bottom: -140px;
      width: 80%;
  }

  .floatingBtns.is-show {
    bottom: 12px;
  }
}