/* セクション別：ヘッダー・ヒーロー・チェック・シーン・容量・CTA・フッター */


/* header */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
/* header layout（ロゴ上・中央） */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

/* ロゴ段 */
.topbar__logo{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 0 10px;
}

.logo img {
  width: 200px;
}

.topbar__tabs{
  display:flex;
  justify-content:center;
  gap:2px;
  padding:6px 6px 0;
}

/* 台形タブ */
.tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 32px 12px;
  min-width: 260px;

  color:#fff;
  font-size:16px;
  font-weight:800;

  background:#3ac0c7;
  border-radius:16px 16px 0 0;
  overflow: hidden; /* 重要：斜め部分を切る */
}

/* 左の斜めカット */
.tab::before{
  content:"";
  position:absolute;
  left:-28px;         /* はみ出し量（大きいほど台形強め） */
  bottom:0;
  width:56px;         /* 斜めパーツの幅 */
  height:100%;
  background: inherit;
  transform: skewX(-22deg); /* 角度（大きいほど斜めが強くなる） */
}

/* 右の斜めカット */
.tab::after{
  content:"";
  position:absolute;
  right:-28px;
  bottom:0;
  width:56px;
  height:100%;
  background: inherit;
  transform: skewX(22deg);
}

.tab.is-active{ background:#6b88a8; }
.tab:not(.is-active):hover{ background:#adb2b6; }

/* activeタブ（クーリング側）もホバーで色を変える */
.tab.is-active:hover{
  background:#adb2b6;  /* ここを好きな色に */
}



/* ===== FIX: SP横ズレの主犯（100vw）をやめる ===== */
.wide{
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* hero */
.fv {
  background-image: url(./images/FV_img.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
}

.fv-2 {
  background-image: url(./images/cr-FV.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
}

.hero{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
/* .hero__inner{ padding:26px 0 18px; } */
.pill-1 {
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  /* border:1px solid var(--line); */
  background:#abbfd0;
  color:#fff;
  display:inline-block;
  margin-top: 30px;
}
.pill-2 {
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  /* border:1px solid var(--line); */
  background:#77dee4;
  color:#fff;
  display:inline-block;
  margin-top: 30px;
}
.pill{
  font-size:12px;
  padding:7px 10px;
  /* border-radius:999px; */
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  display:inline-block;
}

.pill-cr{
  color: #3ac0c7;
  }

.hero__badgeRow{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:8px;
}
.highlight{
  background:linear-gradient(transparent 58%, var(--accent) 58%);
  padding:0 .2em;
  font-weight:900;
}

.readable {
  text-shadow:0 0 5px #fff,0 0 5px #fff,0 0 5px #fff;
}

.readable-cr {
  color: #666;
}

.hero h1{
  font-size:clamp(24px, 3.6vw, 44px);
  line-height:1.15;
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
  color: #6b88a8;
  font-family: 'Times New Roman', Times, serif;
  text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
  /*水平の距離0px 垂直の距離0px 影の大きさ 影の色*/
}
.h1-2 {
  font-size: 3.5rem;
}

.h1-3 {
  font-size: 3.5rem;
  color: #3ac0c7;
}

@media (max-width: 420px){
  .pill-1, .pill-2 {
    font-size: 10px;
  }
  .hero h1{
    font-size:clamp(14px, 5vw, 44px);
    gap: 5px;
  }
  .h1-2, .h1-3{
    font-size: 2rem;
  }
}




.hero .lead{
  margin:0;
  color:var(--muted);
  font-size:14px;
  margin-top: 30px;
}
/* FV縦書き */
.tate-box {
  display: flex;
  margin-top: 30px;
  margin-left: 25%;
}

.tate {
  color: #fff;
  background-color: #354259;
  writing-mode: vertical-rl;
  padding: 3px;
  margin: 3px;
}

.tate-cr {
  color: #fff;
  background-color: #3ac0c7;
  writing-mode: vertical-rl;
  padding: 3px;
  margin: 3px;
}

.tate2 {
  margin-top: 20px;
}

@media (max-width: 420px){
  .tate-box {
  display: flex;
  margin-top: 30px;
  margin-left: 10%;
  margin-bottom: 10%;
  }
}



.maru {
  display: flex;
  justify-content: center;
}
.maru img {
  width: 25%;
  height: 25%;
  margin: 2%;
}

/* 購入ボタン */

.buy-btn {
  margin: 50px auto;
  background-image: url(./images/btm.png);
  background-size: cover;
  width: 300px;
  height: 100px;
  line-height: 100px;
  font-size: 1.5rem;
  font-weight: bold;
}

@media (max-width: 420px){
  .buy-btn {
  margin: 50px auto;
  background-image: url(./images/btm.png);
  background-size: cover;
  width: 200px;
  height: 66px;
  line-height: 65px;
  font-size: 1.5rem;
  font-weight: bold;
  }
}

/* 20th */
.sec2 {
  background-image: url(./images/20th_back.png);
  background-size: contain;
}
.sec2 img {
  width: 70%;
  margin: 0 auto;
}

/* 様々な現場で使われています */
.sec3-title {
  background-color: #71c6e3;
  color: #fff;
  padding: 20px;
  margin-top: 40px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}
.sec3-title2 {
  background-color: #3ac0c7;
  color: #fff;
  padding: 20px;
  margin-top: 40px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}
@media (max-width: 420px){
  .sec3-title, .sec3-title2 {
    font-size: 1.1rem;
  }
}

/* こんな悩みありませんか？ */
.nayami {
  background-color: #354259;
  color: #fff;
  margin: 0 auto;
  padding: 30px;
}
.nayami_title {
  font-size: 1.5rem;
  padding: 5px;
}
.nayami-list {
  display: flex;
  align-items: center;
  gap: 15px; 
  padding: 10px;
}
.nayami-list img {
  width: 30px;
  height: auto;
}
.nayami-box {
  margin: 0 auto;
  width: 60%;
  align-items: center;
}
@media (max-width: 420px){
  .nayami-box {
    width: 100%;
  }
}

/* 矢印（黄色） */
.arrow img {
  margin: 0 auto;
  width: 50px;
  margin-top: -3%;
}

/* 全７種類 */
.sec5-box {
  width: 100%;
  background-image: url(./images/sec5-back.png);
  background-size: cover;
  margin-top: 30px;
}
.sec5-1 {
  font-size: 1rem;
  font-family: 'Zen Kurenaido','Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif,;
}

.sec5-2 {
  font-size: 3rem;
}
.sec5-2 span {
  font-size: 5rem;
}

.sec5-3 {
  background-color: #354259;
  color: #fff;
  width: 200px;
  margin: 0 auto;
}
 .sec5-4 img {
  width: 60%;
  height: auto;
  margin: 0 auto;
 }
 .sec5-5 {
  color: #354259;
  font-size: 1.2rem;
  font-weight: 600;
  padding-bottom: 30px;
  margin-top: -10%;
 }

 /* ラインナップ */
 .sec6-box {
  background-image: url(./images/lineup_back.png);
  background-repeat: repeat;
  padding-top: 30px;
  padding-bottom: 30px;
 }
 .sec6-title {
  background-color: #86a4bf;
  color: #fff;
  width: 300px;
  font-size: 2rem;
  font-weight: 600;
  margin: 30px auto;
  padding: 10px;
  text-align: center;
 }


  /* クリームラインナップ */
  .sec6-box {
    background-image: url(./images/cr-back.png);
    background-repeat: repeat;
    padding-top: 30px;
    padding-bottom: 30px;
   }
   .cr-sec6-title {
    background-color: #3ac0c7;
    color: #fff;
    width: 300px;
    font-size: 2rem;
    font-weight: 600;
    margin: 30px auto;
    padding: 10px;
    text-align: center;
   }
  
   @media (max-width: 480px){
    .sec6-title, .cr-sec6-title {
      width: 60%;
      padding: 5px;
    }
   }


/* 表ーーーーーーーーーーー */
/* ====== base ====== */
.gel-table-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color:#111;
}

.gel-table-title{
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 12px;
  text-align: center;
  background-color: #6b88a8;
  color: #fff;
  padding: 15px;
}

.gel-table-scroll{
  /* overflow-x: auto; */
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid #b9c9d8;
  background: #fff;
}

/* ====== table ====== */
.gel-table{
  width: 100%;
  /* min-width: 860px; スマホは横スクロール */
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  table-layout: fixed;   /* ← これ重要 */
  border-collapse: collapse;
}

.gel-table th,
.gel-table td{
  border: 1px solid #b9c9d8;
  vertical-align: middle;
  padding: 14px 14px;
}

.gel-table thead th{
  background: #d7e6f2;
  font-weight: 800;
  text-align: center;
  font-size: 14px;
}

.col-name{ width: 26%; }
.col-feature{ width: 44%; }
.col-size{ width: 12%; }
.col-price{ width: 18%; }

/* ====== name cell ====== */
.name-cell{
  background: #eef4fb;
  text-align: left;
  position: relative;
}

.name-top{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.name-main{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
}


.name-sub{
  font-size: 14px;
  font-weight: 700;
  margin-top: 6px;
  color:#333;
}


.greek{
  font-weight: 900;
  margin-left: 2px;
}

.badge{
  display: inline-block;
  background: #e60012;
  color:#fff;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

/* ====== feature ====== */
.feature-cell{
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
}


.feature-cell .note{
  font-weight: 800;
}

/* ====== size ====== */
.size-cell{
  background: #fff;
  text-align: center;
}

.size{
  font-size: 22px;
  font-weight: 900;
  display: inline-block;
}

.size-stack{
  display: grid;
  gap: 10px;
  justify-items: center;
}

/* ====== price ====== */
.price-cell{
  background: #fff;
  text-align: center;
}

.price-big{
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .01em;
}

.price-tax{
  font-size: 12px;
  color:#333;
  margin-top: 4px;
  font-weight: 700;
}

.price-stack{
  display: grid;
  gap: 10px;
}

.price-block{
  padding: 6px 0;
}


/* .price-row{
  display: grid;
  gap: 8px;
  justify-items: center;
} */

/* 業界最安値の見せ方 */
.price-min{
  margin-top: 10px;
  padding: 2px 4px;
  border-radius: 10px;
  border: 2px solid #e60012;
}
.en {
  font-size: 1rem;
}

.min-label{
  color:#e60012;
  font-weight: 900;
  font-size: 14px;
}

.slash{
  color:#e60012;
  font-weight: 900;
  font-size: 12px;
}

.slash-2{
  color:#3ac0c7;
  font-weight: 900;
  font-size: 12px;
}


.min-price .price-big{
  font-size: 32px;
}



/* ====== row highlight ====== */
.row-highlight td{
  background: #f6fbff;
}

/* ====== responsive (optional: 文字ちょい詰め) ====== */
@media (max-width: 480px){
  .gel-table-wrap{ padding: 12px; }
  .gel-table-title{ font-size: 18px; }
}
/* ====== 2行セルの仕切り線 ====== */
.size-stack,
.price-stack {
  width: 100%;
}

.size-stack > span,
.price-stack > .price-block {
  width: 100%;
  padding: 8px 0;
}

.size-stack > span + span,
.price-stack > .price-block + .price-block {
  border-top: 1px solid #b9c9d8;
}
/* ーーーーーーーーーーーー */


/* checklist */
.checklist{
  background:#424a56;
  color:#fff;
  border-radius:18px;
  padding:18px;
}
.checklist__title{
  font-weight:900;
  margin-bottom:8px;
}
.checklist ul{ margin:0; padding-left:1.2em; }
.checklist li{ margin:10px 0; }
.arrowDown{
  margin:14px auto 0;
  width:0; height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:18px solid var(--accent);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.2));
}


@media (max-width: 480px){
  .gel-table th,
.gel-table td{
  padding: 3px;
}
  .name-main {
    font-size: 14px;
  }
  .name-sub{
  font-size: 10px;
  }
  .feature-cell{
    font-size: 10px;
  }
  .size { 
    font-size: 12px;
  }
  .price-big {
    font-size: 20px;
  }
  .en {
    font-size: 12px;
  }
  .price-tax{
    font-size: 10px;
  }
  .price-min{
    font-size: 5px;
    padding: 2px 2px;
    border-width: 1px;
  }
  .min-price .price-big{
    font-size: 20px;
  }
  .min-label{
    font-size: 10px;
    line-height: 1.2;
  }

  .slash{
    font-size: 9px;
  }
}

/* ===== 動画（表の後） ===== */
.videoSection{
  padding-top: 26px;
}

.videoThumb{
  position: relative;
  width: min(760px, 100%);
  margin: 16px auto 0;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.videoThumb img{
  width: 100%;
  aspect-ratio: 16 / 9;   /* 横長サムネ */
  object-fit: cover;
  display: block;
}

.videoThumb__play{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
  background: rgba(0,0,0,.55);
  color: #fff;
}

/* ===== モーダル ===== */
.videoModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}

.videoModal.is-open{
  display: block;
}

.videoModal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.videoModal__panel{
  position: relative;
  width: min(96vw, 520px);
  margin: 2vh auto;
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.videoModal__videoWrap{
  width: min(88vw, 420px);
  max-height: 78vh;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.videoModal__video{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

@media (max-width: 480px){
  .videoModal__panel{
    width: calc(100vw - 12px);
    margin: 1vh auto;
    padding: 10px 10px 8px;
    border-radius: 16px;
  }

  .videoModal__videoWrap{
    width: min(92vw, 420px);
    max-height: 82vh;
  }

  .videoModal__close{
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}



/* scene　お客様の声 */
.scene{ display:grid; gap:12px; }
.scene img {
  padding: 10px;
}
.sceneItem{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
@media (min-width:760px){
  .sceneItem{
    grid-template-columns:1.2fr .8fr;
    align-items:center;
  }
}

/* capacity */
/* .bigCap{
  background:#f7f7f7;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.bubbleRow{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin:12px 0 0;
}
.bubble{
  background:#111827;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.02em;
} */

/* 安心設計 */
.safe-design{
  text-align: center;
  padding: 36px 16px;
  background: #f2f6fb;
}
.cr-safe-design{
  text-align: center;
  padding: 36px 16px;
  background: #e0fafa;
}

.safe-design__title{
  margin: 0 0 14px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .02em;
  color: #111;
  font-size: clamp(22px, 3.2vw, 36px);
}

.seibun-3 {
  color: #fff;
  font-weight: 700;
  text-align: center;
  background-color: #94b9df;
  width: 70%;
  margin: 0 auto;
  padding: 7px 0 ;
}

.seibun-4 {
  color: #fff;
  font-weight: 700;
  text-align: center;
  background-color: #7adbe0;
  width: 70%;
  margin: 0 auto;
  padding: 7px 0 ;
}

/* 青い四角背景（使う人/肌/機械） */
.safe-design__title .hl{
  display: inline-block;
  padding: .12em .45em;
  margin: 0 .12em;
  margin-bottom: 10px;
  background: #5f8fbe; /* 画像っぽい青 */
  color: #fff;
  border-radius: 0;     /* 角丸なし */
}

.cr-safe-design__title .hl{
  display: inline-block;
  padding: .12em .45em;
  margin: 0 .12em;
  margin-bottom: 10px;
  background: #3ac0c7; /* 画像っぽい青 */
  color: #fff;
  border-radius: 0;     /* 角丸なし */
}

/* 「安心設計」だけ青文字 */
.safe-design__title .em{
  color: #5f8fbe;
  font-weight: 900;
}

/* サブテキスト */
.safe-design__lead{
  margin: 0;
  color: #5f8fbe;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .01em;
  font-size: clamp(12px, 1.6vw, 14px);
}

.cr-safe-design__lead{
  margin: 0;
  color: #3ac0c7;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .01em;
  font-size: clamp(12px, 1.6vw, 14px);
}

/* 成分 */
.ingredients{
  background:#eef4fb;
  padding: 30px 16px 26px;
}

.cr-ingredients{
  background:#e0fafa;
  padding: 30px 16px 26px;
}

.ingredients__inner{
  /* max-width: 980px; */
  margin: 0 auto;
}

/* 3×3 */
.bubble-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 22px;
  justify-items: center;
  padding: 30px;
}

/* 丸（今はダミー。後で画像に差し替えOK） */
.bubble{
  position: relative;
  width: min(28vw, 128px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background-image: url(./images/seibun.png);
  background-size: cover;
}
/* 丸（クリーム） */
.bubble-2{
  position: relative;
  width: min(28vw, 128px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background-image: url(./images/cr-texture.png);
  background-size: cover;
}

  /* ダミーの丸っぽい見た目 */
  /* background:
    radial-gradient(circle at 35% 30%, #ffffff 0 45%, #e6f0f8 70%, #d6e6f2 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,.03) inset;
  border: 1px solid rgba(120,160,190,.25);
} */

/* 中の文字 */
.bubble__label{
  color:#5f8fbe;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
  font-size: clamp(14px, 1.6vw, 18px);
}

.cr-bubble__label{
  color:#3ac0c7;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
  font-size: clamp(16px, 2vw, 2px);
}
.small {
  font-size: 8px;
}
/* 右上の※ */
.bubble__note{
  position: absolute;
  top: 10px;
  right: 12px;
  color:#5f8fbe;
  font-weight: 800;
  font-size: 11px;
}

/* 下の注釈 */
.ingredients__footnote{
  margin: 18px 0 0;
  text-align: right;
  color:#5f8fbe;
  font-weight: 700;
  line-height: 1.8;
  font-size: 12px;
}

/* SP微調整 */
@media (max-width: 520px){
  .bubble-grid{
    gap: 14px 14px;
  }
  .ingredients__footnote{
    text-align: left;
  }
}

/* 大容量 */
/* ====== section base ====== */
.fv-bigvolume{
  /* 背景画像はここを差し替え */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 背景が未設定でもそれっぽく見える保険 */
  background-color: #f7f8fb;

  /* 画像の縦比率に近い感じ（必要なら調整） */
  aspect-ratio: 3 / 4;
  max-width: 700px;     /* LPに合わせて変更OK */
  margin: 0 auto;

  position: relative;
  overflow: hidden;
}

/* 上が白っぽくフェードしてる雰囲気 */
.fv-bigvolume::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.65) 30%,
    rgba(255,255,255,0) 60%
  );
  pointer-events:none;
}

.fv-bigvolume__inner{
  position: relative;
  height: 100%;
  padding: 22px 16px 18px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  text-align: center;
  color: #111;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* ====== texts ====== */
.fv-bigvolume__catch{
  margin: 0;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .02em;
  font-size: clamp(22px, 3.6vw, 36px);
}

.fv-bigvolume__catch-strong{
  font-weight: 900;
}

.fv-bigvolume__sub{
  margin: 10px 0 10px 0;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: clamp(16px, 2.6vw, 22px);
}

/* ====== balloons ====== */
.fv-bigvolume__bubbles{
  display: flex;
  justify-content: center;
  gap: 14px;
  align-self: end;

  /* 背景画像上の位置調整（ここ触ると一発） */
  margin-bottom: 10%;
}

.balloon{
  position: relative;
  background: #2f2f2f;
  color: #fff;
  border-radius: 22px;
  padding: 10px 18px 10px;
  min-width: 120px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* 吹き出しのしっぽ */
.balloon::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #2f2f2f;
}

.balloon__num{
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  font-family: "Georgia", "Times New Roman", serif; /* 画像の雰囲気に寄せ */
}

.balloon__unit{
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  font-family: "Georgia", "Times New Roman", serif;
}

/* ====== bottom title ====== */
.fv-bigvolume__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .04em;

  /* 画像の「大容量」っぽく大きめ */
  font-size: clamp(40px, 8vw, 72px);

  /* 下に寄せる */
  align-self: end;
  padding-bottom: 200px;

  /* ちょい影（背景が明るい時の読みやすさ） */
  text-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* ====== responsive tweaks ====== */
@media (max-width: 420px){
  .balloon{ min-width: 104px; padding: 10px 14px; }
  .balloon__num{ font-size: 46px; }
  .balloon__unit{ font-size: 22px; }
}


/* よくある質問 */
.faq{
  background:#fff;
  padding: 34px 16px;
  color:#111;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

.faq__inner{
  max-width: 880px;
  margin: 0 auto;
}

.faq__title{
  text-align:center;
  font-weight: 900;
  letter-spacing: .04em;
  margin: 0 0 18px;
  font-size: clamp(18px, 2.8vw, 24px);
}

.faq__list{
  border-top: 1px solid #e6e6e6;
}

.faq__item{
  border-bottom: 1px solid #e6e6e6;
}

/* デフォの三角を消す */
.faq__item summary{
  list-style: none;
}
.faq__item summary::-webkit-details-marker{
  display: none;
}

.faq__q{
  cursor: pointer;
  padding: 16px 44px 16px 12px;
  font-weight: 800;
  line-height: 1.5;
  position: relative;
  display: block;
  font-size: 16px;
}

.qmark{
  font-weight: 900;
  margin-right: 6px;
}

.faq__icon{
  position:absolute;
  right: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
}

.faq__icon::before,
.faq__icon::after{
  content:"";
  position:absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 2px;
  background:#111;
  border-radius: 2px;
}

/* + の縦棒 */
.faq__icon::after{
  transform: rotate(90deg);
  transition: transform .18s ease;
}

/* open時に - になる */
.faq__item[open] .faq__icon::after{
  transform: rotate(0deg);
}

.faq__a{
  padding: 0 12px 16px;
}

.faq__a p{
  margin: 10px 0 0;
  line-height: 1.75;
  font-size: 15px;
}

.amark{
  font-weight: 900;
  margin-right: 6px;
}

.faq__small{
  font-size: 12.5px;
  color:#222;
}

/* 開閉アニメっぽく見せたい時（簡易） */
.faq__item > .faq__a{
  animation: faqFade .16s ease;
}
@keyframes faqFade{
  from{ opacity: .3; transform: translateY(-2px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* クリーム */
/* ===== base ===== */
.cream-fv{
  max-width: 620px;  /* LPに合わせて調整OK */
  margin: 0 auto;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color:#19aab0;
  overflow: hidden;
}

/* ===== top ===== */
.cream-fv__top{
  background:#fff;
  text-align:center;
  padding: 22px 16px 14px;
}

.cream-fv__topline{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: clamp(16px, 2.4vw, 22px);
}

.cream-fv__topline .slash{
  font-weight: 900;
  margin: 0 .25em;
}

.cream-fv__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.15;
  font-size: clamp(30px, 5vw, 52px);
}

/* 「業務用」白抜き帯 */
.cream-fv__title .tag{
  display:inline-block;
  padding: .18em .55em;
  background:#19aab0;
  color:#fff;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 15px;
}

/* ===== bottom (2 colors) ===== */
.cream-fv__bottom{
  position: relative;
  padding: 50px 16px 20px;
  text-align: center;
  color:#fff;

  /* 左右の色分割 */
  background:
    linear-gradient(90deg, #9bdfe3 0 50%, #23b8c0 50% 100%);
}

/* 上部のV字で白が食い込む */
.cream-fv__bottom::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height: 72px;
  background:#fff;

  /* V字の切り欠き */
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}

/* 文字がV字に被らないよう前面に */
.cream-fv__choice,
.cream-fv__product,
.cream-fv__bottomline,
.flavor{
  position: relative;
  z-index: 1;
}

.cream-fv__choice{
  margin: 34px 0 6px;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: clamp(30px, 5.2vw, 54px);
  text-shadow: 0 2px 14px rgba(0,0,0,.10);
}

/* ===== product ===== */
.cream-fv__product{
  width: min(64%, 340px);
  margin: 10px auto 12px;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.18));
}

.cream-fv__product-img{
  width: 100%;
  height: auto;
  display:block;
}

/* ===== bottom line ===== */
.cream-fv__bottomline{
  margin: 8px 0 0;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: clamp(24px, 4.2vw, 46px);
  text-shadow: 0 2px 14px rgba(0,0,0,.10);
}

/* ===== flavor circles ===== */
.flavor{
  position: absolute;
  top: 150px; /* 丸の縦位置（商品画像に合わせて微調整） */
  width: 160px;
  height: 160px;
}

.flavor--left{ left: 14px; }
.flavor--right{ right: 14px; }

/* 破線っぽいリング */
.flavor__ring{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255,255,255,.80);
  border: 4px dotted rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  color:#19aab0;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

/* 円周の文字っぽく斜め配置（簡易） */
.flavor__kana{
  position:absolute;
  top: 18px;
  left: 18px;
  font-weight: 900;
  letter-spacing: .14em;
  transform: rotate(-32deg);
  font-size: 18px;
}

.flavor--right .flavor__kana{
  left: auto;
  right: 18px;
  transform: rotate(32deg);
}

/* α / β */
.flavor__mark{
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
}

/* ===== responsive ===== */
@media (max-width: 520px){
  .flavor{
    width: 132px;
    height: 132px;
    top: 155px;
  }
  .flavor--left{ left: 8px; }
  .flavor--right{ right: 8px; }
  .flavor__mark{ font-size: 64px; }
  .flavor__kana{ font-size: 16px; }
  .cream-fv__product{ width: min(70%, 320px); }
  
}

/* OEM */
.oem-cta{
  background:#ece3fc; /* 下の薄いブルーグレー */
  padding-bottom: 26px;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color:#333;
}

/* ===== hero ===== */
.oem-cta__hero{
  background-image: var(--hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color:#eef2f5; /* 画像なし保険 */
  min-height: 220px;
  position: relative;
}

.oem-cta__hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.82) 40%,
    rgba(255,255,255,.70) 100%
  );
  pointer-events:none;
}

.oem-cta__hero-inner{
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 18px 16px;
  text-align: left;
}

.oem-cta__title{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.15;
  font-size: clamp(22px, 3.6vw, 34px);
  color:#6b478c;
}

.oem-cta__sub{
  margin: 0 0 8px;
  font-weight: 800;
  color:#6b6b6b;
  font-size: 13px;
}

.oem-cta__desc{
  margin: 0;
  color:#6b6b6b;
  font-size: 12.5px;
  line-height: 1.6;
}

/* ===== body ===== */
.oem-cta__body{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 18px 0;
}

/* checklist card */
.oem-cta__card{
  background:#fff;
  border-radius: 6px;
  padding: 14px 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.oem-cta__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.oem-cta__list li{
  position: relative;
  padding-left: 30px;
  line-height: 1.55;
  font-size: 13.5px;
  color:#4a4a4a;
  font-weight: 700;
}

/* check icon (CSS) */
.oem-cta__list li::before{
  content:"";
  position:absolute;
  left: 2px;
  top: .2em;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 2px solid #6e6e6e;
  background: #f7f7f7;
  box-sizing: border-box;
}

.oem-cta__list li::after{
  content:"";
  position:absolute;
  left: 7px;
  top: .55em;
  width: 9px;
  height: 5px;
  border-left: 3px solid #6e6e6e;
  border-bottom: 3px solid #6e6e6e;
  transform: rotate(-45deg);
}

/* speech bubble */
.oem-cta__bubble{
  position: relative;
  margin: 14px auto 8px;
  width: fit-content;
  max-width: 100%;
  background: #f2f2f2;
  border: 2px solid #bdbdbd;
  color:#4a4a4a;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
  text-align: center;
}

.oem-cta__bubble::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #bdbdbd;
}

.oem-cta__bubble::before{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #f2f2f2;
}

/* label */
.oem-cta__label{
  margin: 16px 0 10px;
  text-align: center;
  font-weight: 800;
  color:#6b6b6b;
  font-size: 13px;
}

/* contact rows */
.oem-cta__contact{
  display: grid;
  gap: 10px;
  justify-items: center;
}

.oem-cta__contact-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color:#4a4a4a;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}

.oem-cta__contact-row:hover{
  text-decoration: underline;
}

.icon{
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color:#6b6b6b;
}

.icon svg{
  width: 22px;
  height: 22px;
}

/* SP */
@media (max-width: 480px){
  .oem-cta__hero{ min-height: 200px; }
  .oem-cta__body{ padding: 14px 14px 0; }
}


/* CTA */
.ctaArea{
  background:linear-gradient(#fff3b8, #f8edb0);
  border-top:1px solid rgba(15,23,42,.08);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.ctaGrid{ display:grid; gap:10px; }
@media (min-width:760px){
  .ctaGrid{ grid-template-columns:repeat(2, 1fr); }
}
.ctaBtn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  border:2px solid var(--line);
  font-weight:900;
  width: 88%;
  margin: 0 auto;
}
.ctaBtn span{ color:var(--muted); font-weight:800; }
.ctaBtn:hover{ transform:translateY(-1px); }
.ctaBtn:active{ transform:translateY(0); }
.ctaBtn--r{ border-color:#ef4444; }
.ctaBtn--b{ border-color:#3b82f6; }
.ctaBtn--g{ border-color:#22c55e; }
.ctaBtn--p{ border-color:#a855f7; }
.ctaBtn--o{ border-color:#f59e0b; }

/* footer */
footer{
  background:#6d88a7;
  color:#fff;
  padding:26px 0;
  text-align:center;
}
.footer__brand{ 
  font-weight:900;
  width: 30%;
  margin: 0 auto;
  padding: 20px;
 }
footer small{ opacity:.9; }

@media (max-width: 420px){
  .footer__brand {
    width: 65%;
    padding: 10px;
  } 
}


/* ===== 横ズレ修正パッチ ===== */
.wide{
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 420px){
  .tab{
    min-width: 0;
    flex: 1;
    padding: 3px 1px;
    font-size: 8px;
    text-align: center;
  }
}

/* --- FIX: タブ文字が斜めパーツに被って欠ける問題 --- */
.tab{
  isolation: isolate; /* 擬似要素の重なり管理（これ大事） */
}

/* 斜めパーツを“背面”へ */
.tab::before,
.tab::after{
  z-index: -1;
}

/* --- SP最適化：タブが詰まって見切れるのも防ぐ --- */
@media (max-width: 520px){
  .topbar__tabs{
    gap: 6px;
    padding: 6px 10px 0;
  }

  .tab{
    flex: 1 1 0;      /* 横幅を画面に合わせて縮める */
    min-width: 0;     /* min-width:260px を打ち消す */
    padding: 8px 10px 8px; /* SPは左右padding控えめに */
    font-size: 12px;  /* 文字も少しだけ小さく */
    text-align: center;
  }
}

/* 表をスマホで横スクに */
.gel-table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* SP微調整（配合成分の横はみ出し対策） */
@media (max-width: 520px){
  .bubble-grid{
    grid-template-columns: repeat(2, 1fr); /* 3列→2列 */
    gap: 12px;
    padding: 12px; /* 30px→12px */
  }

  .bubble, .bubble-2 {
    width: min(40vw, 150px); /* 端末が狭い時に収まりやすく */
  }
}

/* ===== アンカー位置調整（stickyヘッダー対策） ===== */

/* ページ内リンク全体に効かせる：これが一番安定 */
html{
  scroll-padding-top: 100px; /* ヘッダー実寸に合わせて調整 */
}

/* 念のため個別にも（買うボタン先） */
#cta-gel,
#cta-cream{
  scroll-margin-top: 100px;
}

/* タブ先も必要なら（gelはページ先頭なので効きにくいのは正常） */
#cream{
  scroll-margin-top: 100px;
}