/* ベースのスタイル */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  line-height: 1.6;
  color: #333;
  -webkit-text-size-adjust: 100%; /* iPhoneでテキストサイズが自動的に調整されるのを防ぐ */
}

#container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}


/* 画像関連のスタイル */
img {
  max-width: 100%; /* 画像が親要素からはみ出すのを防ぐ */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 画像下の余白を削除 */
  margin: 0 auto; /* 中央揃え */
}


form {
  margin: 0;
  padding: 0;
  display: block;
}

p {
  margin: 0;
  padding: 0;
  display: block;
}

  /*------------------------------------
Q&A専用のスタイル
/ ------------------------------------*/

.qa-background {
  background-color: #F1E2CD;
  padding: 20px;
  font-family: sans-serif;
}
    
    .qa-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .qa-title {
        text-align: center;
        color: #5a4321;
        margin-bottom: 15px;
        position: relative;
    }
    
    .qa-title h1 {
        font-size: 28px;
        margin-bottom: 5px;
    }
    
    .qa-title p {
        font-size: 24px;
        margin-top: 0;
    }
    
    .qa-title::before {
        content: "";
        background-image: url('cat-silhouette.png');
        width: 40px;
        height: 0px;
        display: block;
        margin: 0 auto 10px;
    }
    
    .qa-card {
        background-color: #F15A25;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .qa-question {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        cursor: pointer;
        position: relative;
        border-bottom: 1px solid #f2efea;
    }
    
    .qa-question-number {
        background-color: #fff;
        border: 2px solid #5a4321;
        color: #5a4321;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 15px;
        flex-shrink: 0;
    }
    
    .qa-question-text {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        flex-grow: 1;
    }
    
    .qa-toggle {
        color: #ffffff;
        font-size: 24px;
        transition: transform 0.3s;
    }url(https://usa-csc-1xvee0ez.landinghub.site/dis_01_boro/35_2.jpg)
    
    .qa-toggle.open {
        transform: rotate(180deg);
    }
    
    .qa-answer {
        display: flex;
        padding: 20px 35px 30px 30px;
        background-color: #fff;
    }
    
    .qa-answer-letter {
        color: #e74c3c;
        font-size: 24px;
        font-weight: bold;
        margin-left: -15px;
        margin-right: 10px;
        flex-shrink: 0;
        margin-top: -5px; /* 上方向に移動 */
    }
    
    .qa-answer-text {
        color: #580A00;
        font-size: 16px;
        line-height: 1.6;
        font-weight: 500; /* 太さを追加 */
        text-shadow: 0.2px 0 0 #e74c3c; /* 文字に微細な影をつけて太く見せる */
    }
    
/* 黄色い下線用のクラス */
.yellow-underline {
  background: linear-gradient(transparent 60%, #ffff00 40%);
  font-weight: inherit;
  padding: 0 px;
}

    .qa-answer-hidden {
        display: none;
    }

    .allergy-materials {
      margin-top: 20px;
  }
  
  .allergy-materials-title {
      margin-bottom: 10px;
      color: #666;
  }
  
  .materials-box {
      border: 1px solid #333;
      border-radius: 10px;
      padding: 15px;
      background-color: #fff;
      line-height: 1.8;
  }



input[type="image"] {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

    /*共通部分footer*/
  
    #footer{
      color: #fff;
      background:　;
      height: 50px;
      border-top: 1px solid #666666;
      margin: 4px;
    
    }
    #footer ul{
    list-style-type: none;
    font-size: 10px;
    }
    #footer li{
    display:inline;
    }
  
/*------------------------------------
/  共通部分特商法対策
/ ------------------------------------*/

/*オファー部分footer*/
ol, ul {list-style: none;}		
  .tokusho-erea{		
      margin:0;		
      background: url(https://usa-csc-1xvee0ez.landinghub.site/dis_01_boro/offer_tokusho_02.jpg)repeat-y;		
      background-size:100%;		
      padding-bottom:0%;
      padding-right: 3%; /* 右側の余白を追加 */
  }		
          
  .tokusho-erea li{		
      text-align: left;		
      width:95%;		
      font-size: 0.8rem;		
      line-height: 1.2;		
      letter-spacing: -0.05em;
      padding-left: 10%; /* テキスト開始位置を右側に移動 */
      /* または margin-left: 40%; でも同様の効果があります */
      box-sizing: border-box; /* パディングを含めた幅計算 */
  }



/*返品返金部分footer*/

  .tokusho{		
      margin:0;		
      background: url(https://usa-csc-1xvee0ez.landinghub.site/dis_01_boro/henkin_02.jpg)repeat-y;		
      background-size:100%;		
      padding-bottom:1%;
      padding-right: 3%; /* 右側の余白を追加 */
  }		
          
  .tokusho li{		
      text-align: left;		
      width:95%;		
      font-size: 0.8rem;		
      line-height: 1.2;		
      letter-spacing: -0.05em;
      padding-left: 8%; /* テキスト開始位置を右側に移動 */
      /* または margin-left: 40%; でも同様の効果があります */
      box-sizing: border-box; /* パディングを含めた幅計算 */
        color: white; /* 文字色を白に設定 */
  }


  
/*共通部分特商法終わり*/		

  /*------------------------------------
/  スクロールテキスト用のスタイル
/ ------------------------------------*/

/* カスタムスクロールテキストエリア */
.custom-background-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.custom-background-img {
  width: 100%;
  display: block;
}

.custom-scrolling-text-container {
  position: absolute;
  top: 30%; /* 位置調整（必要に応じて変更） */
  left: 0;
  width: 170%;
  height: 120%; /* 高さ調整（必要に応じて変更） */
  overflow: hidden;
}

.custom-scrolling-text {
  display: flex;
  animation: customScroll 12s linear infinite;
  width: fit-content;
}

.custom-scrolling-text img {
  height: 170%;
  width: auto;
  /* トランスフォームで拡大するとオリジナルサイズに関わらず大きくできる */
  transform: scale(1.0); /* 1.0は等倍、1.5なら1.5倍の大きさになる */
  margin-right: 20px; /* 画像間のスペース */
}

@keyframes customScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
  /*------------------------------------
/  お声用のスタイル
/ ------------------------------------*/
/* カスタムスライダー関連のスタイル */
.custom-slider-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.custom-background-image {
  width: 100%;
  display: block;
}

.custom-slider-wrapper {
  position: absolute;
  top: 17%; /* 位置調整（必要に応じて変更） */
  left: 0;
  width: 100%;
  height: 60%; /* 高さ調整（必要に応じて変更） */
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-slider {
  position: relative;
  width: 100%;
  height: 120%;
  overflow: hidden;
}

.custom-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-slide.custom-active {
  opacity: 1;
}

.custom-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.custom-slider-buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 1;
}

.custom-slider-button {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 30px 40px;
  cursor: pointer;
  font-size: 25px;
  border-radius: 50%;
}

.custom-slider-nav {
  position: absolute;
  bottom: 1.5%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.custom-slider-dot {
  width: 15px;
  height: 15px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
}

.custom-slider-dot.custom-active {
  background: white;
}

  /*------------------------------------
成分スライダー専用のスタイル
/ ------------------------------------*/
/* 成分スライダー関連のスタイル */
.seibun-slider-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.seibun-background {
  width: 100%;
  display: block;
}

.seibun-slider-wrapper {
  position: absolute;
  top: 22%; /* 位置調整（必要に応じて変更） */
  left: 0;
  width: 100%;
  height: 100%; /* 高さ調整（必要に応じて変更） */
  display: flex;
  justify-content: center;
  align-items: center;
}

.seibun-slider {
  position: relative;
  width: 160%;
  height: 160%;
  overflow: hidden;
}

.seibun-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.seibun-slide.active {
  opacity: 1;
}

.seibun-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.seibun-slider-buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 1;
}

.seibun-slider-button {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 20px 30px;
  cursor: pointer;
  font-size: 20px;
  border-radius: 50%;
}

.seibun-slider-nav {
  position: absolute;
  bottom: 8%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.seibun-slider-dot {
  width: 12px;
  height: 12px;
  background: rgba(150, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
}

.seibun-slider-dot.active {
  background: white;
}
  /*------------------------------------
/  ビデオ関連のスタイル
/ ------------------------------------*/
/* ビデオ関連のスタイル */
video {
  filter: drop-shadow(0px 0px #000);
}


  /*------------------------------------
/  PC関連のスタイル
/ ------------------------------------*/
/* PC用のスタイル */
@media screen and (min-width: 769px) {
  #container {
    max-width: 750px; /* PC表示時の最大幅 */
  }

  /* PC用調整 */
  .custom-scrolling-text-container {
    position: absolute;
    top: 71%; 
    left: 0;
    width: 180%;
    height: 50vh; /* パーセンテージの代わりにビューポートの高さを使用 */
    overflow: hidden;
    }
  

    /* スクロールテキスト内の画像のサイズも調整 */
  .custom-scrolling-text img {
    height: 120%; /* コンテナに対する高さを100%に */
    width: auto; /* 幅は自動調整 */
        margin-right: 20px; /* 画像間のスペース */
  }
}

  .custom-slider-wrapper {
    top: 29%;
    height: 58%;
  }

  .seibun-slider-wrapper {
    top: 20%;
    height: 58%;
  }


  /*------------------------------------
/  タブレット関連のスタイル
/ ------------------------------------*/
/* タブレット用のスタイル */
@media screen and (max-width: 768px) and (min-width: 481px) {
  #container {
    max-width: 100%;
  }

      /* タブレット用調整 */
      .custom-scrolling-text-container {
        position: absolute;
        top: 71%; 
        left: 0;
        width: 180%;
        height: 50vh; /* パーセンテージの代わりにビューポートの高さを使用 */
        overflow: hidden;
        }
      

  .custom-slider-wrapper {
    top: 29%;
    height: 58%;
  }

  .seibun-slider-wrapper {
    top: 20%;
    height: 58%;
  }
}

  /*------------------------------------
/  スマホ関連のスタイル
/ ------------------------------------*/
/* スマートフォン用のスタイル */
@media screen and (max-width: 480px) {
  #container {
    max-width: 100%;
          /* 追加：疑問符を非表示にする */
          #container > p:empty,
          #container .questionmark,
          #container > .character-symbol {
            display: none !important;

  }
/*オファー部分footer*/
.tokusho-erea li{
  text-align: left;
  width:95%;
  font-size: 0.5rem;
  line-height: 1.2;
  letter-spacing: -0.07em;
  }

/*返品返金部分footer*/
  .tokusho li{
  text-align: left;
  width:95%;
  font-size: 0.5rem;
  line-height: 1.2;
  letter-spacing: -0.05em;
  }
  /*スマホ用 特商終わり*/
  
  /* スマホ用調整 */
  .custom-scrolling-text-container {
    position: absolute;
    top: 71%; 
    left: 0;
    width: 180%;
    height: 50vh; /* パーセンテージの代わりにビューポートの高さを使用 */
    overflow: hidden;
    }

  .custom-slider-wrapper {
    top: 29%;
    height: 58%;
  }
  
  .custom-slider-button {
    padding: 15px 20px;
    font-size: 15px;
  }

  .custom-slider-nav {
    bottom: 1.5%;
  }

  .custom-slider-dot {
    width: 8px;
    height: 8px;
  }

  .seibun-slider-wrapper {
    top: 20%;
    height: 58%;
  }
}

  .seibun-slider-button {
    padding: 10px 15px;
    font-size: 14px;
  }

  .seibun-slider-nav {
    bottom: 8%;
  }

  .seibun-slider-dot {
    width: 8px;
    height: 8px;
  }

  