@charset "shift_jis";

/* -----------------------------------------------------------
 共通タグ
----------------------------------------------------------- */
*{ margin:0; padding:0;}
.page__inner{
		width:100vw;
	}
a{outline: none; text-decoration: none;}
a:focus{outline:none;}
a:hover{text-decoration: none!important;}
/*html{ background-color:#4E4A41;}*/
img{
	vertical-align:bottom;
	border: none;
	}
#pro_wrapper{
	width:100%;
	font-size:12px;
-webkit-text-size-adjust: 100%;	
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
 /* =============================================
     CSS Variables & Reset
  ============================================= */
  :root {
    /* Colors */
    --color-pink:        #de51af;
    --color-pink-light:  #fce4f0;
    --color-pink-dark:   #E91E8C;
    --color-green-dark:  #78b41b;
    --color-text:        #333333;
    --color-text-sub:    #666666;
    --color-white:       #FFFFFF;

    /* Typography - PC */
    --fs-h2:   34px;
    --fs-h3:   30px;
    --fs-h4:   20px;
    --fs-body: 16px;
    --fs-sm:   14px;
    --fs-xs:   12px;

    /* Typography - SP (override in media query below) */
    --fs-h2-sp:   30px;   /* 36 * (22/36) ≒ 61% */
    --fs-h3-sp:   24px;   /* 30 * (18/30) = 60% */
    --fs-h4-sp:   18px;
    --fs-body-sp: 16px;
    --fs-sm-sp:   14px;
    --fs-xs-sp:   12px;

    /* Layout */
    --max-width:    980px;
    --section-gap:  60px;
    --section-gap-sp: 50px;
  }

  *, *::before, *::after {  margin: 0; padding: 0; }
  img { max-width: auto; height: auto; display: block; }
  a { text-decoration: none; color: inherit; }

  /* =============================================
     Utility
  ============================================= */
  .inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
  }
  .sp-only  { display: none; }
  .pc-only  { display: block; }

  /* =============================================
     Image Blocks
     ・PC  → .img-pc  が表示、 .img-sp  が非表示
     ・SP  → .img-sp  が表示、 .img-pc  が非表示
  ============================================= */
  .img-pc { display: block; }
  .img-sp { display: none; }

  /* =============================================
     Buttons
  ============================================= */
  .btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-pink);
    color: var(--color-white);
    font-size: var(--fs-body);
    font-weight: 700;
    padding: 16px 48px;
    border-radius: 50px;
    transition: background .25s, transform .2s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(240,98,146,.35);
    cursor: pointer;
    border: none;
  }
  .btn-primary:hover {
    background: var(--color-pink);
    transform: translateY(-2px);
    opacity: 0.9;
  }
  .btn-primary::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }

  /* =============================================
     Section Common
  ============================================= */
  section { padding: var(--section-gap) 0; }
  .section-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 48px;
  }
  .section-title .accent { color: var(--color-pink); }

  /* =============================================
     1. HERO
  ============================================= */
  #hero {
    padding: 0;
    position: relative;
    overflow: hidden;
  }

  /* MV画像エリア：メインコンテンツ幅 */
  .hero-mv {
    max-width: var(--max-width);
    margin: 0 auto;
    line-height: 0; /* 画像下の隙間を消す */
  }
  .hero-mv img {
    width: auto;
    height: auto;
    padding:3rem 0;
  }

  
  /* CVボタンエリア */
  .hero-cv {
    background: var(--color-pink-light);
    padding: 28px 20px;
    text-align: center;
  }
  .hero-cv .btn-primary {
    font-size: 18px;
    padding: 18px 64px;
    min-width: 360px;
    max-width: 100%;
    color: #FFFFFF!important;
  }
   .mv-footnote {
      font-size: 0.8rem;
      color: var(--text-light);
      margin: 20px;
      line-height: 1.7;
      text-align: left;
    }
  @media (max-width: 768px) {
  .hero-mv img {
    width: 100%;
    padding: 1rem 0;
  }
}
  /* =============================================
     2. SIGN - こんなサイン
  ============================================= */
  #sign {
    background: #EEF2E6;
    border-top: none;
    border-bottom: none;
    text-align: left;
  }
  #sign .inner {
    display: flex;
    align-items: center;
    gap: 60px;
  }
  .sign-text { flex: 1; }
  .sign-text h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 32px;
    color: #333;
  }
  .sign-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .sign-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-h4);
    line-height: 1.6;
  }
  .sign-list li .num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #3D3D2E;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--fs-sm);
    flex-shrink: 0;
  }
  .sign-image {
  flex: 0 0 280px;
}
.sign-image img {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
     .sign-text h2 {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 32px;
    color: #333;
    text-align: center;
  }
}
  /* =============================================
     3. FEATURE - 腸の健康維持
  ============================================= */
  #feature {
    background: #fff;
    text-align: left;
  }
  #feature .inner {
    display: flex;
    align-items: center;
    gap: 60px;
  }
  .feature-image { flex: 0 0 300px; }
  .feature-text { flex: 1; }
  .feature-text h2 {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 16px;
    color: var(--color-green-dark);
  }
  .feature-text h2 em { font-style: normal; color: var(--color-pink); }
  .feature-text p {
    font-size: var(--fs-body);
    color: var(--color-text-sub);
    line-height: 1.9;
  }

     /* =============================================
       CAMPAIGN SECTION (2nd CTA)
    ============================================= */
    .campaign-section {
      background: var(--color-pink-light);
    }
    .campaign-section .lp-inner {
      text-align: center;
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .campaign-eyebrow {
      font-size: clamp(1.0rem, 2.5vw, 1.5rem);
      font-weight: 700;
      color: var(--color-pink);
      margin-bottom: 10px;
      letter-spacing: 0.06em;
    }

    .campaign-main {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .campaign-products {
      font-size: clamp(2rem, 3vw, 2.5rem);
      font-weight: 700;
      line-height: 1.45;
      color: #333;
    }

    .campaign-price-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .campaign-off {
      font-weight: 700;
      font-size: clamp(3rem, 10vw, 4.5rem);
      color: var(--color-pink);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .deadline-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--color-pink);
      border-radius: 50%;
      width: 76px;
      height: 76px;
      font-size: 0.72rem;
      font-weight: 700;
      line-height: 1.3;
      text-align: center;
      color: #fff;
      flex-shrink: 0;
    }
    .deadline-badge .d-date { font-size: 1.4rem; font-weight: 900; line-height: 1.1; }

  /* =============================================
     5. INGREDIENTS - 含有成分
  ============================================= */
  #ingredients {
    background: #fff;
  }
  .ingredients-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4行：画像／タイトル／学名／説明文 */
    grid-template-rows: auto auto auto auto;
    column-gap: 32px;
    row-gap: 0;
    margin-bottom: 0;
  }
  .ingredient-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    text-align: center;
    border-top: none;
    padding-top: 0;
  }
  /* subgrid非対応フォールバック */
  @supports not (grid-template-rows: subgrid) {
    .ingredient-card {
      display: flex;
      flex-direction: column;
    }
    .ingredient-card h3         { min-height: 3.2em; }
    .ingredient-card .ing-latin { min-height: 2.2em; }
  }
  .ingredient-card .ing-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-green-dark);
    font-size: var(--fs-xs);
    font-weight: 700;
    align-self: end;
  }
  .ingredient-card .ing-img img { width: 100%; height: 100%; object-fit: cover; }
  .ingredient-card h3 {
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 4px;
    text-align: center;
    padding: 0 4px;
  }
  .ingredient-card .ing-latin {
    font-size: var(--fs-sm);
    color: var(--color-text-sub);
    font-style: normal;
    margin-bottom: 12px;
    text-align: center;
  }
  .ingredient-card p {
    font-size: var(--fs-body);
    color: var(--color-text-sub);
    line-height: 1.7;
    text-align: left;
  }

  @media (max-width: 768px) {
    .ingredients-grid {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: none;
      gap: 32px 20px;
    }
    .ingredient-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      grid-row: unset;
    }
    .ingredient-card p { text-align: left; }
    .ingredient-card .ing-img { width: 140px; height: 140px; margin-bottom: 12px; }
  }

  /* =============================================
     6. LONGTERM USE - 長期使用
  ============================================= */
  #longterm {
    background: #EEF2E6; /* サインセクションと同系グリーン */
    padding: 40px 0;
    text-align: left;
  }
  .longterm-box {
    display: flex;
    align-items: center;
    gap: 40px;
    background: transparent;
    border-radius: 0;
    padding: 20px 0;
    border-left: none;
  }
  .longterm-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    min-width: 260px;
  }
  .longterm-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
  }
  .longterm-icon {
    flex-shrink: 0;
    line-height: 1;
  }
  .longterm-icon img {
    width: 80px;
    height: auto;
    display: block;
  }
  .longterm-divider {
    width: 1px;
    height: 64px;
    background: #B5C4A0;
    flex-shrink: 0;
  }
  .longterm-box p {
    font-size: var(--fs-body);
    color: var(--color-text);
    line-height: 1.8;
  }
  .made-in-germany {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text-sub);
  }
  .made-in-germany .flag { font-size: 20px; }

  @media (max-width: 768px) {
    .longterm-box {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
    .longterm-left { min-width: 0; margin:0 auto; }
    .longterm-divider { width: 100%; height: 1px; }
    .longterm-title { font-size: var(--fs-h2-sp); }
  }

  /* =============================================
     7. PRODUCT SPEC - 製品仕様
  ============================================= */
  #product {
    background: #fff;
    padding-top: 0;
  }

  /* MADE IN GERMANY バー */
  .made-in-germany-bar {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 0 40px;
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .15em;
  }
  .made-in-germany-bar::before,
  .made-in-germany-bar::after {
    content: ''!important;
    flex: 1;
    height: 1px;
    background: #ccc;
    visibility:visible;
  }
  .made-in-germany-bar .de-flag {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    /* 国旗をCSSで再現（黒・赤・金の3分割） */
    background: linear-gradient(to bottom, #000 33.3%, #D00 33.3% 66.6%, #FFCE00 66.6%);
    box-shadow: 0 0 0 2px #eee;
  }

  /* 2カラムレイアウト */
  .product-inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
  }

  /* 左カラム */
  .product-left {
    flex: 0 0 340px;
  }
  .product-left .btn-primary {
    display: block;
    text-align: center;
    color: #FFFFFF!important;
  }
  .product-left-header {
    margin-bottom: 20px;
  }
  .product-name {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
    text-align:center;
  }
  .product-type {
    font-size: var(--fs-body-sp);
    color: var(--color-text-sub);
    text-align: center;
    line-height: 1.6;
  }
  /* 缶画像 */
  .product-can-img {
    width: 100%;
    margin-bottom: 28px;
  }
  .product-can-img img { width: 100%; height: auto; }
 
    @media (max-width: 768px) {
        .product-can-img .can-sp{
            max-width:50%;
            margin:0 auto;
        }
          .product-name {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
    text-align:center;
  }
          .product-type {
    font-size: var(--fs-h3-sp);
    color: var(--color-text-sub);
    text-align: center;
    line-height: 1.6;
  }
    }
  /* 右カラム */
  .product-right {
    flex: 1;
    padding-top: 0;
  }

  /* 粉末丸画像 */
  .product-powder-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
  }
  .product-powder-img img { width: 100%; height: 100%; object-fit: cover; }


  /* 給与量ヘッダー */
  .dosage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-text);
    margin-bottom: 0;
  }
  .dosage-header-title {
    font-size: var(--fs-h4);
    font-weight: 700;
  }
.dosage-header-unit {
  margin-left: auto;
  text-align: right;
}

.dosage-animal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dosage-animal-row > span:last-child {
  margin-left: auto;
  text-align: right;
}
  .dosage-header-unit .spoon-icon {
    display: inline-block;
    width: auto;
    /*height: 12px;*/
    position: relative;
    vertical-align: bottom;
  }

  /* 犬猫アイコン行 */
  .dosage-animal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    color: var(--color-text-sub);
    font-size: var(--fs-sm);
  }
  .dosage-animal-row .animals {
    font-size: 22px;
    letter-spacing: 4px;
  }

  /* 給与量テーブル（シンプル行リスト） */
  .dosage-list {
    width: 100%;
    border-collapse: collapse;
  }
  .dosage-list tr {
    border-bottom: 1px solid #e0e0e0;
  }
  .dosage-list td {
    padding: 14px 4px;
    font-size: var(--fs-body);
    color: var(--color-text);
    text-align: left;
  }
  .dosage-list td:last-child {
    text-align: right;
    vertical-align: middle;
  }
  .dosage-list td:last-child img,
  .dosage-list td:last-child .spoon-icon {
    display: inline-block;
    vertical-align: middle;
  }
  /* スプーンアイコンをSVGで表現 */
  .spoon-svg {
    display: inline-block;
    vertical-align: middle;
  }

  @media (max-width: 768px) {
    .product-inner {
      flex-direction: column;
      gap: 32px;
    }
    .product-left { flex: unset; width: 100%; }
    .product-left .btn-primary {
      display: block;
      width: 90%;
      margin: 0 auto;
      text-align: center;
    }
    .product-powder-img {
      width: 160px;
      height: 160px;
      margin: 0 auto 20px;
    }
    .product-right {
      width: 90%;
      margin: 0 auto;
    }
    .dosage-list {
      width: 100%;
    }
    .made-in-germany-bar { padding: 20px 0 28px; }
  }

  /* ========== BRAND SECTION ========== */
  .brand {
    padding: var(--section-gap) 0;
    background: var(--bg);
  }

  .brand-inner {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    text-align: left;
  }

  .brand-logo-wrap {
    flex: 0 0 160px;
    text-align: center;
  }

  /* 差し替え可能なブランドロゴ */
  .brand-logo-wrap img {
    width: 250px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .brand-logo-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--green-dark);
    margin-top: 8px;
    letter-spacing: 0.05em;
  }

  .brand-content h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-green-dark);
    margin-bottom: 16px;
    line-height: 1.5;
  }

  .brand-content p {
    font-size: 16px;
    color: var(--text-mid);
    line-height: 1.9;
    margin-bottom: 14px;
  }
  @media (max-width: 768px) {
    .brand {
      padding: var(--section-gap-sp) 0;
    }
    .brand-inner {
      flex-direction: column;
      gap: 24px;
    }

    .brand-logo-wrap {
      flex: none;
      width: 100%;
    }
  }

  @media (max-width: 480px) {
    .brand-content h2 { font-size: 20px; }
    }
  /* =============================================
     9. REFERENCES - 参考文献
  ============================================= */
  #references {
    background: #EEF2E6;
    padding: 40px 0;
    text-align: left;
  }
  #references h2 {
    font-size: var(--fs-h4);
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-text-sub);
  }
  #references ul {
    padding-left: 20px;
    font-size: var(--fs-xs);
    color: var(--color-text-sub);
    line-height: 1.8;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
#references li{list-style: initial!important;}

  /* =============================================
     RESPONSIVE - SP (max-width: 768px)
  ============================================= */
  @media (max-width: 768px) {
    /* Override font size variables for SP */
    :root {
      --fs-h2:   var(--fs-h2-sp);
      --fs-h3:   var(--fs-h3-sp);
      --fs-h4:   var(--fs-h4-sp);
      --fs-body: var(--fs-body-sp);
      --fs-sm:   var(--fs-sm-sp);
      --fs-xs:   var(--fs-xs-sp);
    }

    /* Utility */
    .sp-only { display: block; }
    .pc-only { display: none; }

    /* Images */
    .img-pc { display: none; }
    .img-sp { display: block; }

    /* Inner width */
    .inner { padding: 0 5%; }
    section { padding: var(--section-gap-sp) 0; }

    /* --- HERO --- */

    .hero-cv { padding: 20px 16px; }
    .hero-cv .btn-primary {
      font-size: var(--fs-body-sp);
      padding: 16px 32px;
      min-width: 0;
      width: 90%;
      max-width: 400px;
      display: block;
      margin: 0 auto;
    }

    /* --- SIGN --- */
    #sign .inner {
      flex-direction: column;
      gap: 28px;
    }
    .sign-image { 
        flex: unset; 
        max-width: auto; 
        margin: 0 auto; }

    /* --- FEATURE --- */
    #feature .inner {
      flex-direction: column-reverse;
      gap: 28px;
    }
    .feature-image { flex: unset; width: 100%; max-width: 260px; margin: 0 auto; }

    /* --- CAMPAIGN --- */
    .campaign-banner .off-big { font-size: 44px; }
    .campaign-banner .off-big .off-unit { font-size: 28px; }

    /* --- INGREDIENTS --- */
    .ingredients-grid {
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
    }
    .ingredient-card .ing-img { width: 140px; height: 140px; }

    /* --- PRODUCT SPEC --- */
    .product-inner {
      flex-direction: column;
      gap: 28px;
    }
    .product-left { flex: unset; width: 100%; }

    /* --- BRAND --- */
    #brand .inner {
      flex-direction: column;
      gap: 24px;
    }
    .brand-logo-area { flex: unset; }

    /* --- BTN --- */
    .btn-primary { font-size: var(--fs-body-sp); padding: 14px 32px; width: 90%; display: block; margin: 0 auto; }
  }

  /* =============================================
     Badge / Label
  ============================================= */
  .badge-new {
    display: inline-block;
    background: var(--color-pink-dark);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .1em;
    margin-bottom: 8px;
  }
  .logo-inuvet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-pink);
    margin-bottom: 12px;
  }
  .logo-inuvet .paw { font-size: 18px; }
    
.btn-long {
  text-align: center;
}
.btn-long a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 420px;
  padding: 18px 64px;
  background: var(--color-pink);
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF !important;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(240,98,146,.35);
  transition: background .25s, transform .2s, box-shadow .2s;
  cursor: pointer;
}

.btn-long a:link {
  color: #FFFFFF !important;
  text-decoration: none;
}
.btn-long a:hover {
  color: #FFFFFF !important;
  text-decoration: none;
  background: var(--color-pink);
  transform: translateY(-2px);
  opacity: 0.9;
}
.btn-long a::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

@media (max-width: 768px) {
  .btn-long a {
    width: 90%;
    margin: 0 auto;
    font-size: var(--fs-body-sp);
    padding: 16px 32px;
  }
}
.pc {
  display: block;
}
.sp{
    display: none;
}
/* SP: <br> を非表示にして改行なし */
@media (max-width: 768px) {
 .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* -----------------------------------------------------------
 ↑↑↑↑↑ CSSの追記はここまで ↑↑↑↑↑
----------------------------------------------------------- */



/* for IE7 only */
*:first-child+html div,
*:first-child+html ul,
*:first-child+html ol,
*:first-child+html dl,
*:first-child+html .clearfix{
height:1%;
}