html, body {
  margin: 0 auto; 
  padding: 0;
  overflow-x: hidden;
  max-width: 750px;
  width: 100%;
}

:root{
  --blue:#1D2A52;
  --gold:#E8B500;
  --ink:#111;
}

body {
  font-family: 'Noto Sans SC', 'Source Han Sans CN', sans-serif;
}

main.main_width{
    padding:  0;
    margin-left:0!important;
    margin-right:0!important;
}

.container-fluid.main_width {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

img {
    width: 100%;
    vertical-align: bottom;
}

a {
    text-decoration: none;
}
a:hover{
  opacity: .92;                 
  transition: opacity .2s ease; 
}

.note {
    font-size: 0.65rem;
    vertical-align: middle;
    line-height: 1;  
}
.note2 {
    font-size: 0.8rem;
    vertical-align: middle;
    line-height: 1;     
    letter-spacing: 0.1em;   
}

ul, ol {
  list-style: none;
  padding-left: 0; 
  margin: 0;
}

/* ----------------
固定btn
---------------- */

:root{
  --cta-size: clamp(72px, 22vw, 120px); /* 画面に応じて縮尺 */
  --content-max: 750px;  /* コンテンツ最大幅 */
}

.fixed-cta{
  position: fixed;
  right: max(
    calc((100vw - var(--content-max)) / 2 + 12px),
    12px
  );
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: var(--cta-size);
  height: var(--cta-size);
  z-index: 999;
  display: grid;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  transition: transform .15s ease, opacity .2s ease;
}
.fixed-cta img{
  width: 100%;
  height: 100%;
  object-fit: contain;   
  display: block;
}

.fixed-cta::after{
  content:"";
  position:absolute; inset:-8px; 
}

.fixed-cta:hover{ transform: translateY(-2px) scale(1.03); }
.fixed-cta:active{ transform: scale(.98); }

/* ===========================
   sec_1
=========================== */
#sec_1{
  aspect-ratio: auto;
}
h1{
  margin: 0;
}
.bar{
  position: relative; 
  z-index: 10;        
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  background: #1D2A52; 
}
.bar img{
  object-fit: cover;   
  display: block;
}

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


/*  --------------------------------
下：青いリボン帯（テキスト） 
--------------------------------*/
/* 帯全体（基準：750px） */
.hero__ribbon--fixed{
  padding: clamp(10px, calc(10px + (10 * (100vw - 320px) / 430)), 20px)
           clamp(5px, calc(5px + (5 * (100vw - 320px) / 430)), 10px);
  --s: clamp(0.427, 100vw / 750, 1);          
  gap: calc(var(--s) * 4px);
  background:
    url(../images/sec1_txtbox_bg.jpg) center/cover no-repeat,
    linear-gradient(180deg, #1F356A 0%, #1A2B58 100%);
  text-align: center;
  line-height: 1.2;
}

/* 上段行 */
.hero__ribbon--fixed .ribbon__row{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; white-space:nowrap;
  gap: calc(var(--s) * 10px); 
}

/* ラベル（15→10pxにスケール、余白も連動） */
.hero__ribbon--fixed .ribbon__label{
  background:#E8B500; color:#10213E; font-weight:900; line-height:1;
  padding: clamp(3px, calc(3px + (2 * (100vw - 320px) / 430)), 5px)
           0
           clamp(3px, calc(3px + (2 * (100vw - 320px) / 430)), 5px)
           clamp(5px, calc(5px + (2 * (100vw - 320px) / 430)), 7px);
  /* border-radius: 2px → 320px時 約1px */
  border-radius: clamp(1px, calc(1px + (1 * (100vw - 320px) / 430)), 2px);
  position:relative; letter-spacing:.05em;
  /* 750pxで13px、320pxで8px */
  margin-right: clamp(8px, calc(8px + (5 * (100vw - 320px) / 430)), 13px);
  /* font-size：750px時18px → 320px時12px */
  font-size: clamp(12px, calc(12px + (6 * (100vw - 320px) / 430)), 18px);
}
/* ラベルの三角（6→4pxにスケール） */
.hero__ribbon--fixed .ribbon__label::after{
  content:""; position:absolute; top:50%;
  right: calc(var(--s) * -5px); transform: translateY(-50%);
  border-style: solid;
  /* 320pxで4px、750pxで6px（calcで連続スケール） */
  border-width: calc(4px + (2 * (100vw - 320px) / 430));
  border-color: transparent transparent transparent #E8B500;
}


/* ラベルの※注（8→12pxにスケール） */
span.ribbon__label .note{
  vertical-align:top; line-height:1;
  /* 320pxで8px、750pxで12px */
  font-size: clamp(8px, calc(8px + (4 * (100vw - 320px) / 430)), 12px);
  /* 左右の微調整もスケール */
  margin-left: clamp(-5px, calc(-5px - (2 * (100vw - 320px) / 430)), -7px);
  margin-right: clamp(5px, calc(5px + (2 * (100vw - 320px) / 430)), 7px);
}

/* 右側の白文字：既存のfluidタイプ（12→25px） */
.hero__ribbon--fixed .ribbon__white{
  color:#fff; font-weight:300; line-height:1.2; font-style:italic;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
  font-size: clamp(12px, calc(12px + (13 * (100vw - 320px) / 430)), 25px);
}

/* 金文字（下段） */
.hero__ribbon--fixed .ribbon__gold {
  margin: 0;
  margin-top: 4px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.04em;
  /* 320px→10px ／ 750px→23px にスケール */
  font-size: clamp(10px, calc(10px + (13 * (100vw - 320px) / 430)), 23px);
  white-space: nowrap;
  font-style: italic;
  background: linear-gradient(to right,
    #e3b22e 0%,
    #ffd55e 30%,
    #e3b22e 60%,
    #e3b22e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.2px rgba(10, 10, 10, 0.2);
}
/* 帯右下などの注釈が必要なら（12→6pxにスケール） */
p.ribbon__gold_span{
  margin:0; color:#fff; text-align:right;
  padding-right: clamp(10px, calc(10px + (22 * (100vw - 320px) / 430)), 32px);
  /* 320pxで6px、750pxで12px */
  font-size: clamp(6px, calc(6px + (6 * (100vw - 320px) / 430)), 12px);
}


/* ===========================
   sec_2
=========================== */

.product__frame{
  background: url(../images/sec2_bg.png) center top / cover no-repeat;
}
/* セクション全体 */
.product{
  max-width: 750px;
  margin: 0 auto;
  padding: 24px 12px 80px; 
}

.product {
  position: relative;
  background: linear-gradient(#ffdda5, #ffdda5);
  font-family: "源ノ角ゴシック JP","Source Han Sans JP",sans-serif;
  padding: 40px 40px 80px;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}

/* ヘッダー部分 */
.product__header {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    gap: 20px;
    padding-left: 4%;
    padding-top: 4%;
}
.product__logo {
  width: 220px;
  height: auto;
}
.product__capacity {
  width: 115px;
  height: auto;
}

/* キャッチコピー */
.product__catch {
  display: inline-block;
  background: linear-gradient(#F6D56B, #e9dbac);
  border-radius: 6px;
  padding: 12px 28px;
  position: relative;
  font-weight: 700;
  font-size: clamp(16px, 3vw, 20px);
  color: #3a2a00;
  line-height: 1.6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 30px auto 30px 28px;
  text-align: center;
}
.product__catch::after{
  content:"";
  position:absolute;
  right:-14px; top:50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 10px 0 10px 14px;
  border-color: transparent transparent transparent #e9dbac;
}

.product__catch p{
  margin:0;
  font-weight:700;
  font-size: clamp(16px, 3.2vw, 20px);
  line-height:1.6;
  color:#3A2A00;
}
/* 右上パッケージ */
.product__package{
  position:absolute;
  right: 6px;
  top: 36px;
  width: min(47%, 350px);
}
.product__package img{ width:100%; height:auto; display:block; }

/* 円アイコン群 */
.product__points{
  margin: 24px auto 0;
  text-align:center;
}
.product__points img{
  width: min(92%, 640px);
  height:auto;
  display:inline-block;
}
.product__features {
    width: 60%;
    z-index: 10;
    position: relative;
    margin-left: 4%;
    margin-top: -2%;
    margin-bottom: 3%;
}

.product__cta .cta__arrow{
  display:inline-block; margin-left:.4em; transform: translateY(2px);
  font-weight: 700; font-size: 1.1em;
}
.product__cta:hover{
   transform: translateY(2px);
  }

/* ラッパー：ここにだけ scale を掛ける */
.product-wrapper{
  width: 100%;
  max-width: var(--base-w)*1px; /* 750px */
  margin: 0 auto;
  transform-origin: top center;
}

/* セクション側は実寸のまま・クリップしない */
.product{
  max-width: 750px;              
  margin: 0 auto;
  overflow: visible;
}

/* 内側の白枠も切らない */
.product__frame{
  position: relative;
  overflow: visible;         
  background: url(../images/sec2_bg.png) center top / cover no-repeat;
  border: 2px solid #1D2A52;
  padding: 20px 18px 54px;
}

/* 右上パッケージは前面に */
.product__package{
  position: absolute;
  right: 6px; top: 36px;
  /* top：320px時8px → 750px時36px */
  top: clamp(8px, calc(8px + (28 * (100vw - 320px) / 430)), 36px);

  /* width：min(44%, 320px) は固定のままでOK */
  width: min(44%, 320px);
  z-index: 5;
}
.product__package img{ 
  display:block; 
  width:110%; 
  height:auto; 
}
.product__cta {
    position: relative;
    margin: -7% auto 0%;
    max-width: 590px;
}
.product__cta p{
  position: absolute;

  /* top：750px時は指定なし、320px時は10% */
  top: clamp(10%, calc(10% + (4 * (100vw - 320px) / 430)), 14%);

  /* left：320pxで27%、750pxで30% */
  left: clamp(27%, calc(27% + (3 * (100vw - 320px) / 430)), 30%);

  /* font-size：320pxで14px、750pxで28px */
  font-size: clamp(14px, calc(14px + (14 * (100vw - 320px) / 430)), 28px);

  letter-spacing: .1em;
  color: #fff;
  font-weight: 900;
}

/* セクション器：パディングを流体化（750px: 40/40/80 → 320px: 15/15/45） */
#sec_2.product{
  max-width: 750px;
  margin: 0 auto;
  overflow: visible;

  /* 上 */
  padding-top: clamp(10px, calc(10px + (10 * (100vw - 320px) / 430)), 20px);
  /* 右 */
  padding-right: clamp(10px, calc(10px + (10 * (100vw - 320px) / 430)), 20px);
  /* 下 */
  padding-bottom: clamp(40px, calc(40px + (40 * (100vw - 320px) / 430)), 80px);
  /* 左 */
  padding-left: clamp(10px, calc(10px + (10 * (100vw - 320px) / 430)), 20px);
}


/* 内側フレーム：はみ出し防止は visible、背景そのまま */
#sec_2 .product__frame{
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  background: url(../images/sec2_bg.png) center top / cover no-repeat;
  border: 2px solid #1D2A52;
  padding: clamp(12px, calc(12px + (8 * (100vw - 320px) / 430)), 20px)
           clamp(12px, calc(12px + (6 * (100vw - 320px) / 430)), 18px)
           clamp(36px, calc(36px + (18 * (100vw - 320px) / 430)), 54px);
  padding-bottom: clamp(20px, calc(20px + (34 * (100vw - 320px) / 430)), 54px);
}

/* ヘッダー（ロゴ＋容量） */
#sec_2 .product__header{
  display:flex; align-items:flex-start; justify-content:flex-start;
  gap: clamp(10px, calc(10px + (10 * (100vw - 320px) / 430)), 20px);
  padding-left: 4%; padding-top: 4%;
}
#sec_2 .product__logo{
  /* 320px:80 → 750px:220 */
  width: clamp(80px, calc(80px + (140 * (100vw - 320px) / 430)), 220px);
  height:auto;
}
#sec_2 .product__capacity{
  /* 320px:45 → 750px:115 */
  width: clamp(45px, calc(45px + (70 * (100vw - 320px) / 430)), 115px);
  height:auto;
}

/* キャッチ（吹き出し） */
#sec_2 .product__catch{
  display:inline-block;
  background: linear-gradient(#F6D56B, #e9dbac);
  border-radius: 6px;
  padding:
    clamp(4px,  calc(4px  + (8  * (100vw - 320px) / 430)), 12px)
    clamp(17px, calc(17px + (11 * (100vw - 320px) / 430)), 28px);
  font-weight:700; color:#3a2a00; line-height:1.6;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  margin:
    clamp(10px, calc(10px + (20 * (100vw - 320px) / 430)), 30px)
    auto
    clamp(12px, calc(12px + (18 * (100vw - 320px) / 430)), 30px)
    clamp(7px,  calc(7px  + (21 * (100vw - 320px) / 430)), 28px);
  text-align:center;
}
#sec_2 .product__catch p{
  margin:0; font-weight:700; color:#3A2A00; line-height:1.6;
  /* 320px:7px → 750px:16px */
  font-size: clamp(7px, calc(7px + (9 * (100vw - 320px) / 430)), 16px);
}
#sec_2 .product__catch::after{
  content:""; position:absolute; top:50%; right: clamp(-8px, calc(-8px - (6 * (100vw - 320px) / 430)), -14px);
  transform: translateY(-50%);
  border-style: solid;
  border-width:
    clamp(5px,  calc(5px  + (5  * (100vw - 320px) / 430)), 10px)
    0
    clamp(5px,  calc(5px  + (5  * (100vw - 320px) / 430)), 10px)
    clamp(10px, calc(10px + (4  * (100vw - 320px) / 430)), 14px);
  border-color: transparent transparent transparent #e9dbac;
}

/* 特徴アイコン列（幅60%はそのまま、余白だけ調整） */
#sec_2 .product__features{
  width:60%; position:relative; 
  z-index:15;
  margin-left:4%;
  margin-top: clamp(-2%, -2%, -2%);   /* 固定値でOK */
  margin-bottom: clamp(3%, 3%, 3%);
}

/* 右上パッケージ：絶対配置だが器内に収める。画像は100%でオーバー抑制 */

#sec_2 .product__package p{
  position:absolute;
  right: clamp(8%, calc(8% + (0.5 * (100vw - 320px) / 430)), 8%); /* ほぼ一定 */
  bottom: clamp(-2%, calc(-2% + (0.5 * (100vw - 320px) / 430)), -2%);
  /* 320px:6px → 750px:12px */
  font-size: clamp(6px, calc(6px + (6 * (100vw - 320px) / 430)), 12px);
  color:#082c9a;
}

/* CTA：中央寄せ。幅は min(%) を維持しつつ流体化 */
#sec_2 .product__cta{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 320px:570px → 750px:590px */
  width: min(clamp(82%, calc(82% + (10 * (100vw - 320px) / 430)), 92%), 590px);
  margin: 0;
  bottom: clamp(2%, calc(2% + (0 * (100vw - 320px) / 430)), 2%);
}
#sec_2 .product__cta img{ width:100%; height:auto; display:block; }


/* 競合・はみ出しの元を無効化（既存の重複指定を上書き） */
#sec_2 .product__package,
#sec_2 .product__cta{ z-index:10; }  /* 前面確保 */

#sec_2 a:hover .product__cta{
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
#sec_2 a:hover .product__cta img{
  opacity: .96;                
}


/* ===========================
   sec_3
=========================== */
section#sec_3 {
    background: url(../images/sec3_bg.jpg) center top / cover no-repeat;
}
/* 版面：最大750pxで中央寄せ */
.kv{
  max-width: 750px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 24px) clamp(10px, 2.4vw, 20px);
  box-sizing: border-box;
}

/* 行のベース（行間・字間はややタイト） */
.kv-head {
  margin: 4% auto;                 
  line-height: 1.15;
  letter-spacing: 0.02em;
  display: grid;
      gap: clamp(3px, 0.2vw, 8px);
  text-align: left;               
  width: fit-content;             
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.8), 0 0 18px rgba(255, 255, 255, 0.6);
  font-style: italic;
}


/* 文字サイズ：320px→24px、750px→56px */
.kv-line{
  font-weight: 900;
  font-size: clamp(21px, calc(21px + (29 * (100vw - 350px) / 400)), 50px);
  /* 影で太さ感を出す（SVGなしで迫力アップ） */
  white-space: nowrap;
}

/* 青行 */
.kv-line--blue{
  color: #173b6d; /* ネイビー */
}

/* 金行：横方向の金グラデ・軽い縁取り */
.kv-line--gold{
  color: #ffd563;
}

/* 「製薬会社」のネイビーピル */
.kv-pill{
  display: inline-block;
  background: #15386b;
  color: #fff;
  padding: clamp(4px, 1vw, 8px) clamp(8px, 1.6vw, 16px);
  line-height: 1;    /* ピル内は詰める */
  font-size: 0.9em;  /* 同行テキストより気持ち小さく */
  letter-spacing: 0.04em;
  text-shadow: none;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.8), 0 0 18px rgba(255, 255, 255, 0.6);
}

.sec_3_flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3%;
}
.sec_3_flexbox img {
    width: 45%;
}
p.sec3-text {
    width: fit-content;
    font-size: clamp(7px, calc(7px + (10 * (100vw - 350px) / 400)), 17px);
    line-height: 2.2em;
    margin: 0;
}

/* 左の画像 */
.sec3-photo{ margin: 0; }
.sec3-photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* 本文 */
.rubyposition_under{
  display: inline-block;
}
.rubyposition_under ruby {
    display: flex;
    flex-direction: column;
    text-align: justify;
    text-align-last: justify;
    color: #173b6d;
    font-weight: 900;
}

/* ルビを下に固定（モダンブラウザ） */
/* ルビを“下側”に固定（主要ブラウザ+Safari 対応） */
ruby{
  ruby-position: under;          
  -webkit-ruby-position: after;  
}

rb{ font-weight: inherit; color: inherit; }

rt {
    display: block;
    margin-top: -8%;
    font-size: clamp(4px, 1vw, 10px);
    line-height: 1;
    color: #173b6d;
    letter-spacing: -1.2em;
    font-weight: 900;
}
.syatyou_kaityou_rt{
  padding-left: 1em;
}
.syatyou_rt{
  margin-top: -22%;
}

p.sec3-text.sec3-text2 {
  padding-left: clamp(15px, calc(15px + (10 * (100vw - 350px) / 400)), 25px);
  padding-top: 10px;
}

/* キーワード強調（お好みで） */
.em, .em ruby rb{
  color:#173b6d; font-weight:900;
}

/* 万一 ruby-position をサポートしない環境向けフォールバック */
@supports not (ruby-position: under) {
  ruby{ display:inline-grid; grid-template-rows: 1fr auto; }
  ruby rt{ grid-row: 2; }
}


/* ===========================
   sec_4（PC基準：～750px）
=========================== */
section#sec_4 {
    background: url(../images/sec4_bg.jpg) center top / contain no-repeat;
    position: relative;
}
img.img_t {
    position: absolute;
    width: 50%;
    top: -100px;
    right: -80px;
}
section#sec_4 h3 {
    margin: 0;
    padding: 10% 0 0;
    text-align: center;
    color: #fff;
    letter-spacing: 0.1em;
    font-size: 30px;
    text-shadow: 1px 1px 10px #000000a3;
}
.sec4_text_area p{
  background-color: #fff;
}
section#sec_4 h4 {
    background: url(../images/sec4_midashi_bg.png) center top / cover no-repeat;
    color: #fff;
    width: fit-content;
    padding: 2% 17%;
    text-align: center;
    font-size: 25px;
    letter-spacing: 0.1em;
    margin-left: auto;
    z-index: 10;
    position: relative;
}
.sec4_text_area_flexbox{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;

  /* 上だけ：-30 → -89（既存式を踏襲） */
margin-top: -8%;
  /* 左右：10 → 20 */
  margin-left:  clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px);
  margin-right: clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px);

  /* 下：20 → 40 */
  margin-bottom: clamp(20px, calc(20px + (20 * ((100vw - 320px) / 430))), 40px);
}
.sec4_text_area p {
    background-color: #fff;
    margin: 0;
    margin-top: 12px;
    
    padding: 0 
    clamp(5px, calc(5px + (22 * ((100vw - 320px) / 430))), 27px)
    clamp(10px, calc(10px - (10 * ((100vw - 320px) / 430))), 0px);
    width: fit-content;
    font-size: clamp(7.5px, calc(7.5px + (9 * ((100vw - 320px) / 430))), 16px);
    line-height: 1.9em;
}
.sec4_text_area_flexbox img {
    width: 44%;
}
.sec4_text_area p b{
  color:#173b6d
}
/* 2番目の .sec4_text_area の中の .sec4_text_area_flexbox に適用 */
section#sec_4 :nth-of-type(2) h4{
  margin-right: auto;
  margin-left: unset;
  padding-left:  clamp(30px, calc(30px + (70 * ((100vw - 320px) / 430))), 100px);
  padding-right: clamp(30px, calc(30px + (70 * ((100vw - 320px) / 430))), 100px);
}
.sec4_text_area:nth-of-type(2) .sec4_text_area_flexbox {
  margin: clamp(-73px, calc(-37px + (-36px) * ((100vw - 320px) / 430)), -37px) 20px 40px;
  flex-direction: row;
}
.sec4_text_area:nth-of-type(2) .sec4_text_area_flexbox p{
  padding: 0; /* 両幅とも0で固定 */
  margin-right: clamp(1px, calc(1px + (11 * ((100vw - 320px) / 430))), 12px);
  font-size: clamp(7.2px, calc(7.2px + (10 * ((100vw - 320px) / 430))), 16px);
}

/* 成分 */
.seibun_flexbox{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px 15px;

  /* 上：30 → 60 */
  margin-top: clamp(30px, calc(30px + (30 * ((100vw - 320px) / 430))), 60px);

  /* 左右：10 → 20 */
  margin-left:  clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px);
  margin-right: clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px);

  /* 下：10 → 20 */
  margin-bottom: clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px);
}
.seibun_sbox {
    /* width: fit-content; */
    display: block;
    text-align: center;
    width: 50%;
}
.seibun_sbox img {
    width: 80%;
}
section#sec_4 .seibun_sbox_h4 {
    background: none;
    padding: 0 0 8px 0 !important;
    margin: 2% auto!important;
    font-size: clamp(10px, calc(10px + (12 * ((100vw - 320px) / 430))), 22px);
    text-shadow: 0 0 6px black;
    letter-spacing: 0.01em;
    border-bottom: 1px solid gold;
}
section#sec_4 .seibun_sbox_h4 span{
  font-size: clamp(12px, calc(12px + (12 * ((100vw - 320px) / 430))), 26px);
  margin-right: -7px;
  margin-left: -14px;
}
.seibun_sbox p {
    display: inline-block;
    text-align: left;
    font-size: clamp(8px, calc(8px + (9.5 * ((100vw - 320px) / 430))), 18px);
    color: #fff;
    line-height: 1.6em;
    margin-top: 6px;
    letter-spacing: 0.05em;
    text-align-last: justify;
}

/* その他成分 */
.seibun_sonota_flexbox {
    display: flex;
    background-color: #1D2A52;
    margin: 0 
    clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px)
    clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px);
    align-items: center;
}
.seibun_sonota_flexbox h5 {
    width: 20%;
    text-align: center;
    color: #fff;
    font-weight: 100;
    font-size: clamp(7px, calc(7px + (9 * ((100vw - 320px) / 430))), 16px);
}
.seibun_sonota_flexbox p {
    width: 80%;
    margin: 0;
    font-size: clamp(6px, calc(6px + (11 * ((100vw - 320px) / 430))), 17px);

    letter-spacing: 0.05em;
    background-color: #fff;
     padding: 
    clamp(10px, calc(10px + (5 * ((100vw - 320px) / 430))), 15px)
    clamp(15px, calc(15px + (5 * ((100vw - 320px) / 430))), 20px);
}


.sec_4human {
    margin-top: 5%;
}

/* コンテナ（任意） */
.balloon {
    width: 80%;
    margin: -5% auto 0;
    position: relative;
    background: #E8B500;
    color: #173B6D;
    padding: clamp(10px, 2.8vw, 22px) clamp(16px, 4vw, 36px);
    text-align: center;
    font-weight: 900;
    line-height: 1.15;
}

/* テキスト（サイズは 320～750px でスムースに） */
.balloon p{
  margin: 0;
  font-size: clamp(18px, 5.2vw, 44px);
  letter-spacing: .05em;
  /* ほんのり光彩で読みやすく */
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}

/* 下向きの三角ノッチ（中央） */
.balloon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left:  clamp(12px, 2.6vw, 20px) solid transparent;
  border-right: clamp(12px, 2.6vw, 20px) solid transparent;
  border-top:   clamp(20px, 4.4vw, 28px) solid #E8B500;
}



/* ===========================
   スマホ優先（～480px）
   ＝320px時の指定を反映
=========================== */
@media (max-width: 480px){

  /* 背景を画面内に収めたい場合は contain へ（任意） */
  /* 必要なければこの3行は削除 */
  section#sec_4{
    background-position: top center;
    background-repeat: no-repeat;
  }

  img.img_t{
    width:60%;
    top:-60px;
    right:-80px;
  }

  section#sec_4 h3{
    font-size:20px;
  }

  section#sec_4 h4{
    font-size:12px;
    /* padding 2% 17% はそのまま％指定で縮む */
  }

  .sec4_text_area_flexbox{
    flex-direction: row-reverse;
    justify-content:space-between;
    background-color:#fff;
  }

  .sec4_text_area_flexbox img{
    width:43%;
  }
}


/* ===========================
   sec_5
=========================== */
section#sec_5 {
    position: relative;
    margin-top: -8%;
    z-index: -10;
}

/* ベース */
.yoru-hero{
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
}
.yoru-band {
    padding: clamp(10px, 2.6vw, 18px) clamp(10px, 3vw, 22px);
    position: absolute;
    top: 3%;
    left: 2%;
    transform: skewY(-4deg);
}

/* 行共通 */
.yoru-line {
    margin: 0;
    line-height: 1.15;
    font-weight: 900;
    font-style: italic;
    text-wrap: balance;
    text-shadow: 0 0 14px rgb(255 255 255), 0 0 13px rgb(255 255 255);
}

/* 上段：大きめ */
.yoru-line--top{
  font-size: clamp(22px, 7.5vw, 72px);
}
/* 下段：少し小さめ */
.yoru-line--bottom{
  font-size: clamp(18px, 6.2vw, 56px);
  text-align: end;
}

/* 色バリエーション */
.r{ color: #C7261D;           /* 赤 */ 
    -webkit-text-stroke: .6px rgba(140,25,20,.18); }
.b{ color: #18457A;           /* 青 */
    -webkit-text-stroke: .6px rgba(20,40,80,.18); }

/* 微調整：サイズ差や強調 */
.big{ font-size: 1.35em; transform: translateY(.02em); display: inline-block; }
.small{ font-size: .7em; font-weight: 800; }

/* 文字を少しだけ傾けて勢いを出す（任意） */
.yoru-line span{ display:inline-block; transform-origin: center; }
.yoru-line--top .r{ transform: skewY(-2deg); }
.yoru-line--bottom .r{ transform: skewY(-1deg); }

/* 画面幅が極小のときの詰め方（任意） */
@media (max-width: 360px){
  .yoru-line{ letter-spacing: .01em; }
  .big{ font-size: 1.25em; }
}

/* point3 */
.point3 {
    margin-top: -1%;
    position: relative;
}
.point3_flexbox:nth-of-type(1) {
    position: absolute;
    top: 0;
    right: -2%;
}
.point3_flexbox:nth-of-type(2) {
    position: absolute;
    top: 18%;
    left: -2%;
}
.point3_flexbox:nth-of-type(3) {
    position: absolute;
    top: 36%;
    right: -2%;
}
p.point3_flexbox_txtgold {
    color: gold;
    font-size: clamp(20px, calc(20px + (26 * ((100vw - 320px) / 430))), 46px);
    font-weight: 900;
    font-style: italic;
    margin: 0;
}
p.point3_flexbox_txtwhite {
    color: #fff;
    font-size: clamp(13px, calc(13px + (12 * ((100vw - 320px) / 430))), 25px);
    margin: 0;
}

.point3_flexbox_txt1 {
    top: 24%;
    position: absolute;
    right: 3%;
}
p.point3_flexbox_txtwhite span {
    font-size: clamp(8px, calc(8px + (9 * ((100vw - 320px) / 430))), 17px);
}

.point3_flexbox_txt2 {
    top: 28%;
    position: absolute;
    left: 6%;
}

.point3_flexbox_txt3 {
    top: 35%;
    position: absolute;
    right: 7%;
}

/* ===========================
   sec_6
=========================== */
section#sec_6 {
    background: url(../images/sec6_bg.jpg) center top / cover no-repeat;
    padding-bottom: 15%;
    position: relative;
}
section#sec_6 h3 {
    width: 45%;
    margin: 0 auto;
    padding: 10% 0;
}
.voice_flex {
    background: #fff;
    margin-top: -16%;
  margin-left:  clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px);
  margin-right: clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px);
  margin-bottom: clamp(10px, calc(10px + (10 * ((100vw - 320px) / 430))), 20px);
}
.voice_flexbox {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2%;
    margin-block: clamp(10px,2vw,16px);
    padding: 4% 4% 0;
}
.voice_flexbox:nth-of-type(1){
  padding-top: 10%;
}
.voice_flexbox:nth-of-type(3){
  padding-bottom: 5%;
}
.voice_flexbox img {
    width: 20%;
    height:auto; 
    display:block;
}
.voice_txt {
    width: 80%;
    min-width: 0;
    white-space: normal;
    max-width: 500px;
    font-size: clamp(10px, calc(10px + (8 * ((100vw - 320px) / 430))), 18px);
}
.voice_txt *{
  white-space: normal;              
  overflow-wrap: anywhere;          
  word-break: normal;
}
.voice_txt h4 {
        margin-bottom: 0;
    font-size: clamp(10px, calc(10px + (12 * ((100vw - 320px) / 430))), 23px);
    letter-spacing: .03em;
    color: #1D2A52;
    margin-top: 0;
}
p.name {
    margin-top: 0;
    border-bottom: 1px solid gold;
    font-size: clamp(10px, calc(10px + (8 * ((100vw - 320px) / 430))), 18px);
  padding-bottom: clamp(8px, calc(8px + (11 * ((100vw - 320px) / 430))), 19px);
    color: #8f8f8f;
    letter-spacing: .05em;
}

#sec_6 .img_t {
    position: absolute;
    bottom: 1%;
    z-index: 100;
    top: unset;
}

/* ===========================
   sec_7
=========================== */
section#sec_7 h3 {
    margin: 0 auto;
    position: relative;
    margin-bottom: -5%;
    z-index: 10;
}
.reason_h3{
      width: 60%;
}
.mezotto_flex {
    display: flex;
    align-items: center;
    gap: 2%;
    padding: 20px;
}
.mezotto_flex img {
    width: 50%;
}
.mezotto_flex_txt {
    width: 50%;
    font-weight: 600;
    font-size: clamp(13px, calc(13px + (3 * ((100vw - 320px) / 430))), 16px);
    letter-spacing: .05em;
}
.mezotto_flex_txt img {
    width: 100%;
    max-width: 320px;
}
.mezotto_flex_txt b {
  color: #003399;
}
.reason {
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.reason_flexbox {
    display: flex;
    align-items: center;
    align-items: stretch;
}
.reason_flexbox2{
  flex-direction: row-reverse;
}
.reason_bg {
    width: 50%;
    text-align: left;
    background: url(../images/reason_bg.png) center top / cover no-repeat;
    padding: 10% 3% 3%;
}
.reason_flexbox img {
    max-width: 50%;
}
.reason_bg h4 {
    font-size: clamp(13px, calc(13px + (17 * ((100vw - 320px) / 430))), 30px);
    font-style: italic;
    position: relative;
    color: #003399;
    margin: 0;
    margin-top: -7%;
    padding-left: 2%;
    z-index: 1;
    border-bottom: 1px solid #fff;
    padding-bottom: 2%;
}
p.reason_p {
    font-size: clamp(8.5px, calc(8.5px + (10.5 * ((100vw - 320px) / 430))), 19px);
}
.reason_bg img {
    width: 40%;
}

/* ===========================
   sec_8
=========================== */
section#sec_8 {
    background: #e5e5e5;
}
section#sec_8 h3 {
    margin: 0 auto;
    position: relative;
}
.kounyu {
    margin: 20px;
}
section#sec_8 .product__cta {
    max-width: 82%;
    margin-top: -15%;
}

/* コンテナ */
.notice{
  padding: clamp(16px,4vw,28px) 0;
  color:#333;
}
.notice__inner{
  max-width: 750px;
  margin: 0 auto;
  padding: 0 clamp(14px,3.2vw,24px);
  box-sizing: border-box;
}

/* 見出し（左の青バー） */
.notice__ttl{
  position: relative;
  margin: clamp(14px,3vw,22px) 0 clamp(8px,2vw,12px);
  padding-left: clamp(14px,3vw,18px);
  font-weight: 900;
  font-size: clamp(12px, calc(12px + (10 * ((100vw - 320px) / 430))), 22px);
  line-height: 1.3;
}
.notice__ttl::before{
  content:"";
  position:absolute;
  left:0; top:0.1em;
  width: clamp(6px,1vw,8px);
  height: 1.1em;
  background:#1e5aa8;    
  border-radius: 2px;
}

/* 段落 */
.notice__text{
  margin: 0 0 clamp(16px,3vw,22px);
  font-size: clamp(10px, calc(10px + (8 * ((100vw - 320px) / 430))), 18px);
  line-height: clamp(1.2, calc(1.2 + (0.7 * ((100vw - 320px) / 430))), 1.9);
}

/* リスト共通 */
.notice__list{
  margin: 0 0 clamp(16px,3vw,22px);
  padding: 0;
  list-style: none;
  font-size: clamp(10px, calc(10px + (8 * ((100vw - 320px) / 430))), 18px);
   line-height: clamp(1.2, calc(1.2 + (0.7 * ((100vw - 320px) / 430))), 1.9);
  line-height: 1.9;
}

/* 黒丸（大きめ） */
.notice__list--dot li{
  position: relative;
  padding-left: 1.4em;
}
.notice__list--dot li + li{ margin-top: .2em; }
.notice__list--dot li::before{
  content:"●";
  position:absolute;
  left:0;
  top:0;
  color:#2b2b2b;
  font-size: 0.95em;       /* 丸の大きさ */
  line-height: 1.9;
}

/* 先頭に中点ダッシュ風（・） */
.notice__list--dash li{
  position: relative;
  padding-left: 1.2em;
}
.notice__list--dash li + li{ margin-top: .2em; }
.notice__list--dash li::before{
  content:"・";
  position:absolute;
  left:0;
  top:0;
  color:#2b2b2b;
  line-height: 1.9;
  font-weight: 700;
}

/* ===========================
   sec_9
=========================== */
section#sec_9 {
    background: url(../images/sec9_bg.png) center top / cover no-repeat;
}

section#sec_9 h3 {
    margin: 0 auto;
}

/* 背景（任意：上から下へ青のグラデ） */
.faq{
  padding: clamp(18px,4vw,26px) 0;
  padding-top: 0;
}

.faq__inner{
  max-width: 750px;
  margin: 0 auto;
  padding: 0 clamp(16px,3.2vw,24px);
  box-sizing: border-box;
  display: grid;
  gap: clamp(14px,3vw,22px);
}

/* カード本体 */
.faq-item{
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  padding: clamp(16px,3.2vw,24px);
}

/* 見出し */
.faq-item__q{
  margin: 0 0 clamp(10px,2.2vw,14px);
  color: #1b3e73;
  font-weight: 900;
  font-size: clamp(11px, calc(11px + (17 * ((100vw - 320px) / 430))), 28px);
  letter-spacing: .02em;
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  gap: .4em;
}

/* Q番号（ゴールド） */
.faq-item__qnum{
  color: #f0bf2a;
  font-weight: 900;
  font-size: 1em;             
  margin-right: .1em;
}

/* 見出し下の金ライン */
.faq-item__hr{
  height: 2px;
  background: #f0bf2a;
  margin: 0 0 clamp(12px,2.6vw,16px);
  opacity: .9;
}

/* 本文 */
.faq-item__a{
  margin: 0;
  color: #3a3732;
  font-size: clamp(8.5px, calc(8.5px + (9.5 * ((100vw - 320px) / 430))), 18px);
  line-height: 1.9;
  letter-spacing: .02em;
  text-wrap: pretty;             
}



/* =========================================
   footer
========================================= */

footer {
  text-align: center;
  padding: 40px 20px;
  background-color: #fff;
  color: #222;
  font-family: "Noto Sans JP", sans-serif;
}

.footer-label {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.footer-logo {
  margin: 10px 0 30px;
}

.footer-slogan {
  font-size: 0.9rem;
  color: #0044ff;
  margin-bottom: 5px;
}

.footer-logo img {
  width: 100%;
  max-width: 180px;
  height: auto;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 20px 0;
}

.footer-links a {
  text-decoration: none;
  color: #003399;
  font-size: clamp(10px, calc(10px + (5 * ((100vw - 320px) / 430))), 15px);
  transition: opacity 0.2s ease;
}

.footer-links a:hover {
  opacity: 0.7;
}

.footer-divider {
  margin: 20px auto;
  border: none;
  border-top: 1px solid #ccc;
}

.copyright {
  font-size: 0.9rem;
  color: #666;
}

.fixed-cta {
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.3s ease;
}

.fixed-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}