/*　トップカルーセル中央寄せ　*/
.fs-pt-carousel__slide img {
  margin: auto;
}

/*　ヘッダーロゴテキストのリンクを削除　*/
.fs-p-logo > a {
    text-decoration: none;
    color: #3c3c3c;
}


/*　SCLP　*/
.sccomment {
 margin-top: 2%;
 margin-bottom: 2%;
 padding: 5%;
 background-image: url("https://arbn.itembox.cloud/item/commentback.jpg?t=20260425201220");
 background-size: cover;
 font-size: 5vmin;
}
.sccommenttitle {
 font-size: 5vmin;
 font-weight: bold;
}
.sccommentimg {
  float: right;
  width: 30%;
}
.scmech {
 margin-bottom: 5%;
 margin-top: 5%;
 margin-right: 10%;
 margin-left: 10%;
 padding: 5%;
 border: solid 10px #ff4500;
 border-radius: 20px;
}
.scmechexp {
 font-size: large;
}
.scmechimg {
 float: right;
 width: 50%
}
.scmechtitle {
 font-size: x-large;
 font-weight: bold;
 text-align: center;
}
.scmechal {
 clear: right;
 width: 15%;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

.trouble {
 background-image: url(https://arbn.itembox.cloud/item/Paper01.jpg?t=20260425201220);
 background-repeat: repeat-x;
 background-size: auto 100%;
 text-align: center;
 padding: 5%;
}
.title{
 background-image: url(https://arbn.itembox.cloud/item/causeback.jpg?t=20260425201220);
 background-repeat: repeat-x;
 background-size:contain;
 width:100%;
 font-size: 7vmin;
 font-weight: bold;
 color: #fafad2;
 margin-top: 3%;
 padding: 2%;
}
.cause{
 margin: 3%;
 font-size: 5vmin;
 line-height: 150%;
} 
.causeimg{
 width: 100%;
 margin:0 auto;
 display:block;
}
.causeimg2{
 width: 40%;
 float: right;
}
.meritback{
 background-image: url("https://arbn.itembox.cloud/item/commentback.jpg?t=20260425201220");
 margin-bottom: 2%;
 background-size: cover;
}
.meriticon{
 width: 15%;
 float: left;
}
.merit{
 margin-top: 3%;
 margin-left:5%;
 margin-right:5%;
 padding: 2%;
 float: left;
}
.meritexp{
 font-size: 5vmin;
 line-height: 150%;
 overflow: auto;
}
.textimp{
 color: #ff0000;
 font-weight: bold;
}
.userstitle{
 background-image: url(https://arbn.itembox.cloud/item/causeback.jpg?t=20260425201220);
 background-repeat: repeat-x;
 background-size:contain;
 width:100%;
 text-align:center;
 font-size: 7vmin;
 font-weight: bold;
 color: #fafad2;
 margin-top: 3%;
 padding: 2%;
}

.usersvoice{
 width: 80%;
 margin: 0 auto;
 max-width: 500px;
}
.voicelist{
 width: 80%;
 margin: 0 auto;
 font-size: 5vmin;
}
.box{
 border: 2px solid #ff4500;
 width: 100%;
 height: 250px;
 overflow: auto;

}
.message{
 background-image: url("https://arbn.itembox.cloud/item/messageback.jpg?t=20260425201220");
 font-size: 5vmin;
 font-weight: bold;
 color: #8b4513;
 padding: 5%;
}
.scinquiry img{
 width: 100%;
}
.cartbutton{
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}
.center{
 display: flex;
 align-items: center;
 justify-content: center;
}

.lpwidth{
 width: 95%;
 margin: 0 auto;
}

.width_80{
 width: 80%;
 display: block;
 margin: 0 auto;
}

/*スマートフォン　商品一覧を横1列表示*/
@media screen and (max-width: 600px) {
.fs-c-productList__list {
    display: block;
    width: 80%;
    margin: 0 auto;
}
}



/* 画像の拡大を防ぎつつ、スクロールを可能にする */
imglock {
    max-width: 100%;
    height: auto;
}

html, body {
    touch-action: pan-y; /* 垂直スクロールを有効にする */
    overflow-x: hidden; /* 横スクロールを無効にする */
}

@media (pointer: coarse) {
    /* タッチデバイス用 */
    imglock {
        touch-action: manipulation; /* タッチ操作でのズームを防ぐ */
    }
}


/* スマホ下部に固定CTAボタン */
.cta-button-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #e65c00;
  color: #ffffff;              /* ← 文字色を白に */
  text-align: center;
  padding: 16px 0;
  font-size: 18px;
  font-weight: bold;           /* ← 太字に */
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.cta-button-fixed:active {
  background-color: #ff7700;
  color: #ffffff;              /* タップ時も白を維持 */
  text-decoration: none;
}

.cta-button-fixed,
.cta-button-fixed:link,
.cta-button-fixed:visited,
.cta-button-fixed:active,
.cta-button-fixed:hover,
.cta-button-fixed:focus {
  color: #ffffff !important;           /* ← すべて白に固定 */
  font-weight: bold !important;        /* ← 太字固定 */
  text-decoration: none !important;    /* ← アンダーバー削除 */
  -webkit-tap-highlight-color: transparent;
}

.manga-panel {
    width: 94%;
    display: block;
    margin: 0 auto 16px; /* ← ここが行間 */
  }

img {
  display: block; /* 画像をブロック要素にして隙間を消す */
  vertical-align: bottom; /* 念のため縦方向の揃えを下に（block化で基本解決しますが） */
}

/* =======================================
   バナー本体の共通設定
======================================= */
.skin-care-banner {
  container-type: inline-size; 
  width: 100%;
  max-width: 750px; 
  padding: clamp(40px, 8cqi, 60px) clamp(15px, 5cqi, 30px);
  text-align: center;
  line-height: 1.8;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  
  /* 深いネイビーの背景 */
  background: radial-gradient(circle at top, #0c2b4e, #001a33); 
  color: #e0e0e0;
}

/* =======================================
   タイトル
======================================= */
.banner-title {
  font-family: "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: clamp(1.8rem, 6cqi, 2.6rem);
  font-weight: 600;
  margin-bottom: clamp(25px, 6cqi, 40px);
  letter-spacing: 0.15em;
  color: #ffffff;
  text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

/* =======================================
   チェックリスト領域
======================================= */
.check-box {
  background: linear-gradient(135deg, #ffffff, #dcdcdc 50%, #e8e8e8); 
  border: 1px solid #c0c0c0;
  border-radius: 6px;
  padding: clamp(25px, 6cqi, 40px);
  text-align: left;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.9);
  color: #001f3f; 
}

.check-label {
  font-size: clamp(2rem, 6cqi, 2.4rem);
  font-family: "Georgia", serif;
  margin-bottom: clamp(15px, 4cqi, 25px);
  font-weight: bold;
  line-height: 1;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  position: relative;
  font-size: clamp(1.25rem, 4cqi, 1.6rem);
  font-weight: bold;
  padding-left: clamp(40px, 8cqi, 52px);
  margin-bottom: clamp(12px, 3cqi, 18px);
  color: #001f3f;
}

/* --- チェックマークの図形描画 --- */
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 2px solid #001f3f;
  background-color: #fff;
  border-radius: 2px;
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 40%;
  width: 18px;
  height: 9px;
  border-left: 4px solid #e60012;
  border-bottom: 4px solid #e60012;
  transform: translateY(-50%) rotate(-45deg);
}

/* =======================================
   下部のメッセージ領域
======================================= */
.target-occupations {
  margin-top: clamp(35px, 8cqi, 50px);
  font-size: clamp(1.3rem, 4.5cqi, 1.8rem);
  font-weight: 500;
  color: #e0e0e0;
}

.question-section {
  margin-top: clamp(30px, 7cqi, 40px);
  font-size: clamp(1.5rem, 5cqi, 2.1rem);
  font-weight: bold;
}

.highlight-question {
  font-size: clamp(2rem, 7cqi, 2.8rem);
  margin-top: clamp(15px, 4cqi, 20px);
  color: #ffffff;
  display: inline-block;
}

/* --- 極端に小さいスマホ画面用の微調整 --- */
@media (max-width: 400px) {
  .check-list li::before { width: 24px; height: 24px; }
  .check-list li::after { width: 14px; height: 7px; left: 5px; border-width: 3px; }
}

/* =======================================
   手荒れのメカニズム（画像＋テキスト）セクション
======================================= */
.skin-damage-section {
  container-type: inline-size;
  width: 100%;
  max-width: 750px; /* 確立した黄金比の750px */
  margin: 0 auto;
  /* 上下左右の余白 */
  padding: clamp(40px, 8cqi, 60px) clamp(15px, 5cqi, 30px);
  text-align: center;
  background-color: #ffffff; /* 清潔感のある白背景 */
  color: #222222;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* タイトル */
.damage-title {
  /* 最小1.8rem、最大2.4rem */
  font-size: clamp(1.8rem, 5.5cqi, 2.4rem);
  font-weight: bold;
  margin-bottom: clamp(25px, 6cqi, 35px);
  letter-spacing: 0.05em;
}

/* 中央の画像ラッパー */
.damage-image-wrapper {
  margin: 0 auto clamp(30px, 7cqi, 45px);
  padding: 0;
  width: 100%;
}

/* 中央の画像本体 */
.damage-image-wrapper img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 600px; /* 画像がPCで大きくなりすぎないように制御 */
  height: auto;
}

/* 下部の説明文 */
.damage-text {
  /* 最小1.4rem、最大1.8rem */
  font-size: clamp(1.4rem, 4.5cqi, 1.8rem);
  line-height: 1.8;
  text-align: center;
  font-weight: 500;
}

.damage-text p {
  margin-bottom: 10px;
}

/* --- スマホ表示時の改行制御 --- */
/* PCやタブレットでは改行させず、スマホ幅になった時だけ改行させる */
.sp-only {
  display: none;
}

@media (max-width: 500px) {
  .sp-only {
    display: block;
  }
  .damage-text {
    text-align: left; /* スマホの時は左揃えの方が長文は読みやすくなります */
    display: inline-block;
  }
}