/* =============================================================
   大阪AGA加藤クリニック ED治療薬 LP
   Base: SP 37.5rem design / PC 192rem design
   ============================================================= */

:root{
  --font-serif: "Zen Old Mincho", "Noto Serif JP", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --container: 118rem;
}

*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  font-size: 2.6667vw; /* 375px design: 1rem = 10px at 375px width */
}
@media screen and (min-width: 768px){
  html{
    font-size: 0.5208vw; /* 1920px design: 1rem = 10px at 1920px width */
  }
}
body{
  margin:0;
  font-family: var(--font-serif);
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.8;
  font-size: 1.5rem;
  overflow-x: hidden;
  font-weight: 400;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family: inherit; background:none; border:none; cursor:pointer; padding:0; }

.inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

.pc-only { display: none;}

@media (min-width: 768px){
  body{ font-size: 1.6rem; }
  .inner{ padding: 0 4rem; }
  .sp-only { display: none;}
  .pc-only { display: block;}
}

.center-title{
  font-family: var(--font-serif);
  font-size: 2.4rem;
  text-align: center;
  line-height: 1.4;
  color: #024B57;
  position: relative;
  letter-spacing: .03em;
}
.center-title.light{ color: #fff; }
.center-title.small{ font-size: 1.9rem; margin-bottom: 2.8rem; }
.center-title.small-title{ font-size: 2.1rem; }
.center-title.slash{
  padding-bottom: .6rem;
}
.center-title.slash::after{
  content: "";
  display: block;
  width: 12rem;
  height: 1px;
  background: #006475;
  opacity: .6;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
@media (min-width: 768px){
  .center-title{ font-size: 3.8rem; letter-spacing: 0.14em; font-weight: 500; }
  .center-title.small{ font-size: 2.4rem; }
  .center-title.slash{
  padding-bottom: 1.3rem;
}
}

.center-lead{
  text-align:center;
  color: #000;
  font-size: 1.2rem;
  margin-top: 1.8rem;
  line-height: 1.9;
}
.center-lead.light{ color: #fff; }
@media (min-width: 768px){ .center-lead{ font-size: 1.6rem; } }

.center-note{
  text-align:center;
  font-size: 1.4rem;
  margin-top: 1.4rem;
}

.check-list li{
  position: relative;
  padding-left: 2.2rem;
  font-size: 1.35rem;
  color: var(--c-ink-soft);
  line-height: 1.7;
}
/* =============================================================
   HEADER
   ============================================================= */
.site-header{
  position: sticky; top:0; z-index: 200;
  background: #fff;
}

.site-header:has(.gnav.is-open){
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.site-header:has(.gnav.is-open)::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5px;
  background: #000;
  z-index: 260;
}

.header-inner{
  max-width: 150rem;
  margin: 0 auto;
  padding: 0.5rem 2rem 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.logo-block{ display:flex; align-items:flex-start; flex-direction: column; gap:0.2rem; }
.logo-eyebrow{
  font-size: 0.8rem;
  color: #102E39;
  letter-spacing: 0.05em;
}
.logo-main img { width: 16.8rem;  }
.logo-main{ display:flex; align-items:center; gap:0.8rem; }
.header-btns-pc{ display:none; }

@media (min-width: 1024px){
  .site-header { box-shadow:  0 0.3rem 0.6rem rgba(0, 0, 0, 0.20); }
  .header-inner { max-width: 120rem; padding: 0.5rem 2rem 0.7rem 1rem;}
  .logo-eyebrow{ display:block; font-size: 1.1rem; }
  .logo-main img { width: 25.9rem;}
}

.hamburger{
  width: 2.7rem; height: 2.3rem;
  display:flex; flex-direction:column; justify-content:space-between;
  z-index: 260;
  transition: opacity .2s ease;
}
.hamburger span{
  display:block; height:0.3rem; width:100%; background: #024B57;
  transition: transform .25s ease, opacity .25s ease;
  border-radius: 0.4rem;
}
.hamburger.is-active span:nth-child(1){ transform: translateY(1.05rem) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform: translateY(-1.05rem) rotate(-45deg); }

.gnav{
  position: fixed; top:0; 
  right: -100%;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 250;
  padding: 3.7rem 0 4rem;
  overflow-y:auto;
  transition: right .3s ease;
  box-shadow: -6px 0 24px rgba(0,0,0,.12);
}
.gnav.is-open{ right:0; }
.gnav-list{ margin-top: 2.4rem; }
.gnav-list li{ border-bottom: 0.5px solid #222A26; }
.gnav-list a{
  display:block; padding: 2.4rem 4.2rem 1rem; font-size: 1.6rem; color: #222A26; letter-spacing: 0.15em;
}
.gnav-list li:first-child a { padding: 3.8rem 4.2rem 1rem; }
.gnav-cta{ display:flex; flex-direction: column; gap:.6rem; width: 36rem; margin: 0 auto; }

.gnav-tagline{
  color: #017486;
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: .05em;
  margin: 3.5rem 0 1.2rem;
}

.gnav-logo{
  margin-top: 3.4rem;
  text-align: center;
}
.gnav-logo img{
  width: 21.9rem;
  margin: 0 auto;
}

@media (min-width: 1024px){
  .hamburger{ display:none; }
  .gnav{
    position: static; width:auto; height:auto; box-shadow:none;
    overflow: visible;
    display:flex; align-items:center; gap: 4rem;
    padding:0;
    flex-direction: row;
  }
  .gnav-list{ margin-top:0; display:flex; gap: 5rem; }
  .gnav-list li{ border-bottom:none; }
  .gnav-list a{
    padding:0;
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    white-space:nowrap;
    position: relative;
  }
  .gnav-list a::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -0.6rem;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .gnav-list a:hover::after{ opacity: .5; }
  .gnav-cta{ margin-top:0; flex-direction: row; gap:0; display:none; }
  .gnav-tagline,.gnav-logo{ display:none; }
  .gnav-list li:first-child a { padding: 0; }
  .header-btns-pc{ display:block; gap: 0.8rem; margin-left: -10rem; }
  .header-btns-pc .img-btn{ width:18rem; }
}

/* =============================================================
   DARK REASONS SECTION
   ============================================================= */
.section-reasons{
  background: #071511;
  padding: 4.7rem 0 8.8rem;
  position:relative; overflow:hidden;
}
.section-reasons .inner {
  padding: 0 1.5rem;
}

.reasons-intro{
  text-align:center;
  color:#fff;
  font-family: var(--font-serif);
  font-size: 1.9rem;
  line-height: 1.7;
  margin-bottom: 4rem;
}

.reasons-intro > div{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

.reasons-intro > div > div{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.reasons-intro p{
  margin: 0;
  font-size: 2.9rem;
  color: #9AB9B2;
}

.reasons-intro > p{
  font-size: 3.9rem;
  letter-spacing: 0.2em;
  margin-top: 1.5rem;
  color: #fff;
}

.tag-neg{
  display:inline-block; background: #262b2a; color:#fff;
  padding: 0 0.5rem; font-size: 3rem; border-radius:0.2rem; line-height:1.3; letter-spacing: 0.1em;
}
.reasons-box{
  padding: 5rem 2rem 3rem;
  position:relative;
}

.reasons-box::before{
  content: "";
  position: absolute;
  right: -6.9rem;
  bottom: 4rem;
  width: 22rem;
  height: 53rem;
  background: url('../images/reason-bk-image.webp') no-repeat center / contain;
  z-index: 0;
  pointer-events: none;
}

/* 白枠を擬似要素で描画し、背景イラストより上に重ねる */
.reasons-box::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #fff;
  z-index: 1;
  pointer-events: none;
}

.reasons-box h2{
  text-align:center;
  font-family: var(--font-serif);
  color:#fff; font-size:1.8rem; margin-bottom:4.2rem; letter-spacing: 0.15em;
  font-weight: 400;
  position: relative;
  z-index: 1; 
}
.reasons-box h2 span{ display:block; font-size:3.2rem; line-height: 1; }
.reasons-list{
  position: relative;  
  z-index: 1;         
}
.reasons-list li{
  position:relative; padding: 1.4rem 0 1.4rem 2.7rem;
  color: #fff; font-size: 1.8rem; line-height:1.5;
  letter-spacing: 0.05em;
}
.reasons-list li:last-child{ border-bottom:none; }
.reasons-list li::before{
  content:""; position:absolute; left:0; top:2rem;
  width:0.5rem; height: 5rem; border: 0.5px solid white;
}
.reasons-list u{ 
  text-decoration-color: #017486;
  text-decoration-thickness: 3px;
}

/* 実写素材付きイラスト（PCのみ表示） */
.reasons-illust{
  display:none;
}

@media (min-width: 768px){
  .section-reasons { padding: 4rem 0 10rem ; }
    .reasons-intro{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
    margin-bottom: 7.2rem;
  }
  .reasons-intro > div{
    margin: 0;
    gap: 2.7rem;
  }
  .reasons-intro > div > div{
    gap: 0.6rem;
  }
  .tag-neg{
    font-size: 4rem;
    padding: 0.2rem 0.7rem;
  }
  .reasons-intro > div > p{
    font-size: 3.8rem;
  }
  .reasons-intro > p{
    position: relative;
    font-size: 5.2rem;
    letter-spacing: 0.2em;
    margin-top: 0;
  }
  .reasons-intro strong{ font-size: 3.2rem; }
  .reasons-box{ max-width: 90rem; margin:0 auto; padding: 4.7rem 5.7rem 5.4rem; }
  .reasons-box::before { right: 2rem; width: 22rem; height: 56rem; }
  .reasons-box h2{ font-size:2.8rem; margin-bottom: 4.6rem; }
  .reasons-box h2 span{ font-size:4rem; line-height: 1.4; }
  .reasons-list{ columns: 1; }
  .reasons-list li{ font-size:2.4rem; padding: 1.4rem 0 1.4rem 2.6rem; }
  .reasons-list li::before{
  left:0; top:2rem; height: 3.2rem;
  }
}
@media (min-width: 1024px){
  .reasons-illust{
    display:block; position:absolute; right:6%; top:4rem; width:15rem; opacity:.5; z-index:0;
  }
  .section-reasons .inner{ position:relative; z-index:1; }
}

/* =============================================================
   LIGHT / TREATMENT TABLE SECTION
   ============================================================= */
.section-products { padding: 0; position:relative; overflow:hidden; }

.section-products .section-bg-img img{
  object-fit: contain;
  object-position: top;
}

.section-products .inner {
  padding: 5rem 0 0;
  width: 100%;
  position:relative; z-index:1;
}

@media (min-width: 768px){
  .section-products .section-bg-img img{
    object-fit: cover;
  }  
  .section-products .inner {
    padding: 10rem 0 6.4rem;
    max-width: 91.3rem;
  }  
}
.section-light{ background: #fff; }
.section-light + .section-light{ background:var(--c-white); }
#treatment.section-light{ background: var(--c-bg-blue); }

.panel-title{
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  font-weight: 500;
  margin-bottom: 3rem;
  background-image: url('../images/panel-title-bg-sp.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 1rem 1rem;
  line-height: 1.5;
}
 
.panel-title small { font-size: 1.3rem;}

.panel-title span{ font-size: 2.4rem; letter-spacing: 0.15em; font-weight: 500; }

.drug-table {
  font-family: var(--font-sans);
  table-layout: fixed;
  width: 100%;
}

.drug-table .th-blank{
  background: transparent;
  border: none;
  width: 2.8rem;
}

/* ---- ヘッダー行（薬の写真＋名前） ---- */
.drug-table thead th:not(.th-blank){
  position: relative;
  vertical-align: middle;
  height: 9rem;
  padding: 4rem 0.1rem 0;
  border-radius: 1rem 1rem 0 0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.08em;
  overflow: visible;
}
.drug-table thead th:not(.th-blank) small{
  display: block;
  font-size: 1rem;
  margin-top: 0.2rem;
}

.drug-head::before{
  content: "";
  position: absolute;
  top: -.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6rem;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
}

.drug-head--01::before{ background-image: url('../images/products-tadala.webp'); }
.drug-head--02::before{ background-image: url('../images/products-zaltia.webp'); }
.drug-head--03::before{ background-image: url('../images/products-baldenafil.webp'); }
.drug-head--04::before{ background-image: url('../images/products-sialis.webp'); }
.drug-head--05::before{ background-image: url('../images/products-baiagura.webp'); top: -1.6rem; }

/* 列ごとの背景色 */
.drug-table thead th:nth-child(2){ background: #024B57; } /* タダラフィル */
.drug-table thead th:nth-child(3){ background: #04859A; } /* ザルティア */
.drug-table thead th:nth-child(4){ background: #024B57; } /* バルデナフィル */
.drug-table thead th:nth-child(5){ background: #04859A; } /* シアリス */
.drug-table thead th:nth-child(6){ background: #024B57; }

/* ---- 左端ラベル列（特徴・効き始め時間など） ---- */
.drug-table tbody th{
  background: #777878;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0 .1rem;
  vertical-align: middle;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.05em;
  width: 2.8rem;
}

/* ---- 本文セル ---- */
.drug-table td{
  background: #fff;
  padding: 1.4rem 0.4rem;
  text-align: center;
  vertical-align: middle;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #000;
}
.drug-table tbody tr:nth-child(1) td {
  padding: .65rem 0.1rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.drug-table tbody tr:nth-child(2) td {
  padding: 2.13rem 0.4rem;
}
.drug-table tbody tr:nth-child(3) td {
  padding: 2.2rem 0.4rem;
}
.drug-table tbody tr:nth-child(2) td,
.drug-table tbody tr:nth-child(4) td{
  font-size: 1.4rem;
  line-height: 1.2;
}
.drug-table tbody tr:nth-child(4) td{
  font-size: 1.4rem;
  line-height: 1.1;
  padding: 1.2rem 0.4rem;
}
.drug-table td span{
  font-size: 2rem;
  letter-spacing: -0.02em;
  display: inline-block;
}
.drug-table tbody tr:nth-child(4) td span {
 font-size: 2.3rem;
}
.drug-table td small{
  display: block;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.2rem;
}
.drug-table .cell-unit { font-size: 1.4rem!important;}

@media (min-width: 768px){
  .panel-title{ font-size: 2.8rem; margin-bottom: 5rem; padding: 1.4rem 0; }
  .panel-title small { font-size: 2rem; margin-left: .1rem; }
  .panel-title span { margin-left: .4rem; font-size: 3.8rem;}
  .panel-title::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom:  1.4rem;
    height: .2rem;
    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      #FFF 50%,
      rgba(255,255,255,0) 100%
    );
    width: 85rem;
    margin: 0 auto;
  }
  .drug-head::before { top: -5rem;}
  .drug-table{ min-width: 100%; }
  .drug-table thead th:not(.th-blank){ font-size: 1.6rem; padding: 3.4rem 0 .1rem; height: 8rem; }
  .drug-table thead th:not(.th-blank) small{ font-size: 1.2rem; }
  .drug-table .th-blank{
    width: 12.5rem;
  }
  .drug-table tbody th{
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    width: 12.5rem;
    font-size: 2rem;
    line-height: 1.2;
  }
  .drug-table td{ font-size: 2rem;}
  .drug-table td small { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.05em;}
  .drug-table td span{ font-size: 3.4rem; margin-left: 0.3rem; margin-top: .2rem; }
  .drug-head--01::before { width: 11.1rem;}
  .drug-head--02::before { width: 11.5rem;}
  .drug-head--03::before { width: 13.3rem; top: -6rem;}
  .drug-head--04::before { width: 12.4rem;}
  .drug-head--05::before { width: 7rem; top: -4rem;}
  .drug-table tbody tr:nth-child(2) td,.drug-table tbody tr:nth-child(4) td{
    font-size: 2.3rem; }  
  .drug-table tbody tr:nth-child(1) td { line-height: 1.2; padding: .4rem 0;}
  .drug-table tbody tr:nth-child(2) td{ text-align: left; padding: 2rem 1.6rem; }
  .drug-table tbody tr:nth-child(3) td { padding: 1.4rem 0; line-height: 1.3; }
  .drug-table tbody tr:nth-child(4) td{ text-align: left; padding: .7rem 1rem 1rem 1rem; } 
  .drug-table tbody tr:nth-child(4) td span { font-size: 3.8rem; margin-left: .5rem;  letter-spacing: 0.05em; } 
  .drug-table tbody tr:nth-child(4) td:nth-child(2),
  .drug-table tbody tr:nth-child(4) td:nth-child(3){
    text-align: center;
  }
  .drug-table tbody tr:nth-child(4) td:nth-child(2) span,
  .drug-table tbody tr:nth-child(4) td:nth-child(3) span{
    font-size: 4.2rem;
  }
  .drug-table .cell-unit{
    display: block;
    text-align: right;
    line-height: 0.7;
    font-size: 2.3rem !important;
  }    
}

.caution-box{
  margin-top: 5.6rem;
  position: relative;
  background: #102E39;
}

@media (min-width: 768px){
  .caution-box{
    margin-top: 5.5rem;
  }  
}

.caution-box picture,
.caution-box img{
  width: 100%;
  display: block;
  line-height: 0;
}
.caution-content{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  color:#fff;
  padding:12.6rem 2rem 0 2.3rem;
  z-index: 1;
}
.caution-content h3{
  text-align:center; font-size:2.2rem; color:#fff; font-weight: 500;
  margin-bottom:2.5rem; line-height:1.5; letter-spacing: 0.05em;
   padding-bottom: 0.75rem;
  border-bottom: 1px solid #fff;
}
.caution-content h3 span { font-size:1.6rem; }
.caution-content p{ font-family:var(--font-sans); font-size:1.3rem; line-height:1.6; letter-spacing: 0.025em; }
.caution-content p:first-of-type{ margin-bottom: 2.5rem; }
.caution-list li{ font-family:var(--font-sans); font-size:1.3rem; color: #FFFF5D; padding-left:1.3rem; position:relative;     line-height: 1.6;}
.caution-list li::before{
  content:"";
  position:absolute;
  left:0;
  top: 0.7rem;
  width: 1.027rem;
  height: 0.77rem;
  background: url('../images/caution-check-sp.webp') no-repeat center / contain;
}
.caution-content h4{ font-size:2rem; margin: 3.7rem 0 1.3rem; font-weight: 500; line-height:1.5; letter-spacing: 0.15em; }

@media (min-width: 768px){
  .caution-content{ padding: 12rem 1.6rem 0 13rem; display:grid; grid-template-columns: 1fr 22rem; column-gap: 4rem; }
  .caution-content h3{ font-size:3rem; margin-left: -11.4rem; margin-bottom: 1.7rem; grid-column: 1 / -1; }
  .caution-content h3 span { font-size:2.2rem; }
  .caution-content p, .caution-content ul, .caution-content h4{ grid-column: 1 / 2; }
  .caution-content p, .caution-list li{ font-size:1.6rem; }
  .caution-content h4{ font-size:2.5rem; margin: 1.1rem 0 1.3rem; }
}

/* =============================================================
   ED 4 TYPES (deep teal)
   ============================================================= */
.section-types{ padding: 0; background:#1c3436; position:relative; overflow:hidden; }
.section-types .hl-yellow { color: #FFFF5D;}
.section-types .section-bg-img img{
  object-position: bottom;
}
.section-types .inner{
  padding: 9.5rem 0 7rem;
  position:relative; z-index:1;
}
.section-types .center-title { font-size: 2.7rem; font-weight: 600; letter-spacing: 0.05em; color: #fff;}
.section-types .center-title.slash::after { background: #fff; }
.section-types .center-lead { font-size: 1.5rem; line-height: 1.5; margin-top: 2.5rem;  }
.ed-types{
  display:grid; grid-template-columns: 1fr 1fr; gap: 4.6rem 1.6rem; margin-top: 3.6rem; margin-bottom: 7rem; padding: 0 2rem;
}
.ed-type{ text-align:center; color:#fff; }
.ed-icon{
  width: 14.3rem; height:14.3rem; 
  display:flex; align-items:center; justify-content:center; margin: 0 auto ;
}
.ed-type h3{ font-size:2rem; letter-spacing: 0.1em; font-weight: 500; margin-bottom: 0.3rem; }
.ed-type p{ font-family: var(--font-sans); font-size:1.3rem; letter-spacing: 0.02em; line-height:1.5; color:#fff; text-align: left; }

.protest-illust{ margin: 1.9rem auto 0;}

/* ---------- ED types section: 50代フェード ---------- */
.types-inner{ position:relative; }
.fade-block{ margin-top: 1.7rem; padding: 0 1.5rem 0;}
.fade-block p { font-family: var(--font-sans); }
.fade-title{
  font-family: var(--font-serif); color:#fff; text-align:center; font-size:1.7rem; margin-bottom:1.2rem;
}
.fade-lead{ text-align:left; color:#fff; font-size:1.3rem; margin-bottom:1rem; letter-spacing: 0.025em; }
.fade-list{ max-width: 52rem; margin: 0 auto; }
.fade-list li{ margin-bottom:1rem; color:#fff; font-size: 1.3rem; }
.fade-list-head{
  font-size:1.6rem; font-weight:500; margin-bottom:0;
  position: relative;
  padding-left: 2.2rem;
  display: inline-block;
}
.fade-list-head span{
  background-image: linear-gradient(#707070, #707070);
  background-repeat: no-repeat;
  background-size: 100% 0.6rem;    
  background-position: 0 95%;    
  padding-left: 0.4rem;  
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.fade-list-head::before{
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 1.492rem;
  height: 1.2rem;
  background: url('../images/icon-check.webp') no-repeat center / contain;
}
.fade-cta{
  text-align:center; color:#fff; font-family: var(--font-serif)!important; font-size:1.8rem;
  margin-top: 5rem; font-weight:600; letter-spacing: 0.15em; line-height: 1.5;
}

@media (min-width: 768px){
  .section-types .inner { padding: 11.6rem 0 7rem;}
  .ed-types{ grid-template-columns: repeat(4,1fr); gap: 4.6rem; margin-top: 7rem; margin-bottom: 11.5rem;  padding: 0 9rem; }
  .ed-icon{ width:100%; height:auto; }
  .ed-icon svg{ width:6.4rem; height:6.4rem; }
  .ed-type h3{ font-size:3rem; }
  .ed-type p{ font-size:1.6rem; letter-spacing: 0.05em; line-height: 1.65; }
  .section-types .center-title { font-size: 3.8rem; letter-spacing: 0.2em;}
  .section-types .center-lead { font-size: 2.5rem; letter-spacing: 0.15em;    margin-top: 3.5rem;}
  .center-title.small-title{ font-size: 3.6rem; letter-spacing: 0.05em; margin-bottom: 5.4rem; }
  .protest-illust img { margin: 0 auto; width: 77.9rem;}

  .fade-block{ margin-top:0; padding-top:5rem; }
  .fade-title{ font-size:2.5rem; letter-spacing: 0.15em; }
  .fade-lead{ font-size:1.7rem; max-width: 58.6rem; margin: 0 auto 1rem; }
  .fade-list { max-width: 58.6rem;}
  .fade-list-head{ font-size:2.2rem; }
  .fade-list-head::before { width: 2rem; height: 1.6rem;}
  .fade-list p:not(.fade-list-head){ font-size:1.7rem; }
  .fade-cta{ font-size:2.5rem; margin-top:7rem; padding-bottom:2rem; }
}

/* =============================================================
   ICON HEADING / CONFIRM
   ============================================================= */
.section-confirm .inner { padding: 1.7rem 0 1.5rem;}
.icon-heading{
  position: relative;
  margin-bottom: 2.3rem;
  text-align: left;
}
.icon-heading-icon{
  width: 100%;
  height: auto;
  display: block;
}
.icon-heading-content{
  position: absolute;
  left: 5%;
  top: 57%;
  transform: translateY(-50%);
  z-index: 1;
  max-width: 64%;   
}
.icon-heading h2{ font-size:2.2rem; color:#024B57; font-weight:500; letter-spacing: 0.15em;    margin-bottom: .6rem; }
.dots{ margin: 0 auto; width: 4.9rem; }
.icon-heading-lead{ font-family: var(--font-sans); font-size:1.3rem; color: #222A26; margin:1.6rem 0; letter-spacing: 0.025em; font-weight: 500; line-height: 1.4;}

.confirm-grid{ display:flex; flex-direction: column; gap: 2rem; padding: 0 1.2rem; }
.confirm-box{
  background: #F2F2F2;
  padding: 1.1rem 1.2rem;
  box-shadow: inset 0 0 0.6rem rgba(0, 0, 0, 0.16);
}
.confirm-box-inner{
  background: #fff;
  padding: 1.3rem 0 2.5rem .2rem;
}

.confirm-box-inner h3{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font-family: var(--font-sans);
  color:#017486;
  font-size:1.8rem;
  margin-bottom:1.8rem;
  font-weight:700;
  letter-spacing: 0.025em;
}

.confirm-box:nth-child(2) li:last-child{
  letter-spacing: -0.07em;
}
.confirm-box:nth-child(1) .confirm-icon {
  margin-right: .5rem;
}
.confirm-box:nth-child(2) .confirm-icon {
  width: 1.7rem;
  top: .1rem;
}
.confirm-icon{ width:3.5rem; height:auto; vertical-align:middle; position:relative; top:-0.2rem; }

.section-confirm .center-note {
  margin-top: 1.9rem;
  color: #024B57;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}
.dots-2 img {
  margin: 0 auto;
  width: .3rem;
}

/* checklist / delivery 共通の実写チェックアイコン */
.img-check li{ padding-left: 1.4rem; background-repeat:no-repeat; background-position: 0 0.6rem; background-size:1.1rem; color: #000000; font-family: var(--font-sans); background-image: url('../images/checklist-icon-check.webp'); font-weight: 400; font-size: 1.3rem; margin-bottom: .1rem; }
.img-check li::before{ content:none; }

@media (min-width: 768px){
  .section-confirm .inner { max-width: 120rem; padding: 6rem 0 3.8rem;}
  .icon-heading-content{
  left: 28%;
  top: 53%;
  max-width: 64%;   
}
.icon-heading {margin-bottom: 3rem;}
  .icon-heading h2{ font-size:3.8rem; }
  .icon-heading-lead{ font-size:1.6rem; padding-left: 5rem; }
  .dots { width: 6.1rem;}
  .confirm-grid{ gap: 3rem; max-width: 70rem; margin: 0 auto; }
  .confirm-box{ flex:1; padding: 2rem; }
  .confirm-box h3{ font-size:3rem; gap: .3rem; }
  .check-list li{ font-size:1.45rem; }
  .section-confirm .center-note { font-size: 2.5rem; margin: 1.9rem 0 4.6rem;}
  .dots-2 img { width: .3rem;}
  .section-confirm .img-check li { font-size: 1.6rem;}
  .confirm-box-inner { padding: 2.1rem 4.4rem 3.7rem 5.6rem; }
  .confirm-box:nth-child(2) .confirm-icon { width: 3rem;}
  .confirm-icon { width: 4.3rem; }
  .img-check li { background-size: 1.4rem; padding-left: 1.9rem; }
}

/* =============================================================
   CTA TEAL BANNER (repeated)
   ============================================================= */
.section-cta-teal{
  background: var(--c-teal);
  position: relative;
}
.section-cta-teal picture,
.section-cta-teal img{ width:100%; display:block; }

.section-cta-teal .inner{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6rem;
  z-index: 1;
  padding: 0 1.7rem;
}
.section-cta-teal .cta-buttons{ margin-top: 0; }

.cta-buttons{ display:flex; flex-direction: column; gap:1.2rem; margin-top: 1.8rem; }
.cta-img-btn img{ width:100%; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); }

@media (min-width: 900px){
  .section-cta-teal{ padding: 0; }
  .section-cta-teal .cta-buttons { gap:4.6rem; margin-bottom: 0.8rem; }
  .cta-buttons{ flex-direction: row; justify-content:center; gap:6.6rem; margin-bottom: 6.5rem; }
  .cta-buttons .img-btn{ flex: 0 1 40rem; }
}

/* =============================================================
   FLOW / STEPS
   ============================================================= */
.section-flow{
  position: relative;
  overflow: hidden;
  padding: 7.9rem 0 6rem;
}
.section-flow > .inner{
  position: relative;
  z-index: 1;
}
.section-flow .inner {
  padding: 0;
}
.section-flow .center-title {
  font-size: 3rem;
  letter-spacing: 0.15em;
  color: #006475;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
}
.section-flow .center-title::before,
.section-flow .center-title::after{
  content: "";
  display: block;
  width: 1px;
  height: 2.8rem;
  background: currentColor;
  transform: rotate(45deg);
}

.steps-grid{ display:flex; flex-direction: column; gap: 3rem; margin-top: 4.1rem; }

.step-card{
  display: flex;
  align-items: stretch;
  padding: 0 0 0 0.8rem;
  box-shadow: none;
  position: relative;
}
.step-card-body{
  flex: 1;
  padding: 0 0 0 1.1rem;
  min-width: 0;
}
.step-heading{
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  margin-bottom: 1rem;
}

.step-card p.step-num{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #006475;
  font-family: var(--font-serif);
  padding: 0.5rem 0.7rem;
  flex-shrink: 0;
  margin: 0;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
}
.step-num span{
  font-size: .8rem;   
}
.step-card h3{
  font-size:1.6rem;
  color: #000;
  margin: 0;
  line-height:1.1;
}
.step-photo{
  margin-bottom: 0;
  overflow: hidden;
  width: 35.4%; 
  height: auto;
  flex-shrink: 0;
  flex: 0 0 35.4%;  
  aspect-ratio: 13 / 19;
}
.step-photo picture{
  display: block;
  width: 100%;
  height: 100%;
}
.step-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}

.section-flow .img-check li {
  background-image: url(../images/delivery-check.webp);
  margin-bottom: .8rem;
  background-size: 1.2rem;
  padding-left: 1.6rem;
  background-position: 0 center;
  line-height: 1.2;
}
.section-flow .receive-grid .receive-card:nth-of-type(2) .img-check li{
  line-height: 1.3;
}
.section-flow .img-check li span {
  font-weight: 600;
}
.step-card p{ font-family: var(--font-sans); font-size:1.3rem; line-height:1.6; letter-spacing: 0.02em; padding-right: .7rem; }

.flow-arrow{ text-align:center; color: var(--c-teal); margin: 3.7rem 0 5rem; font-size:2rem; }
.flow-arrow img{ width:6rem; margin:0 auto; }

.section-flow .center-title.small{
  padding-bottom: .5rem;
  font-size: 2.6rem;
  letter-spacing: 0.05em;
  gap: 0;
  align-items: baseline;  
  margin-bottom: 4rem;
}
.section-flow .center-title.small span {
  font-size: 1.7rem;
}
.section-flow .center-title.small::before{
  content: none;
}
.section-flow .center-title.small::after{
  content: "";
  display: block;
  width: 33rem;
  height: 0.3rem;
  background: radial-gradient(circle, #4E99A5 0%, #EDF7F2 100%);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.receive-grid{ display:flex; flex-direction: column; gap: 3.5rem; margin-top: 3rem; }

.receive-card{
  position: relative;
  padding: 0;
  overflow: visible;
}

.receive-card-panel{
  background: #fff;
}

.step-card:not(:last-child)::after{
  content: "";
  position: absolute;
  left: 20%;
  bottom: -2.7rem;
  width: 0.8rem;
  height: 2.8rem;
  background: url('../images/flow-dots-sp.webp') no-repeat center / contain;
  transform: translateX(-50%);
}
.receive-card h4{
  background: linear-gradient(180deg, #002F34 0%, #014C59 100%);
  color: #fff;
  padding: 1rem 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.receive-card h4 span {
  font-size: 2rem;  
}
.receive-grid .receive-card:nth-of-type(1) .check-list{
  padding: 2.2rem 1.8rem 2.4rem .8rem;
}
.receive-grid .receive-card:nth-of-type(2) h4{
  padding: 1.2rem 0 1.2rem 3.6rem;
}
.receive-card .check-list{ padding: 1.6rem .3rem 0 3.6rem; }

.receive-photo{
  position: absolute;
  top: -2rem;
  width: 43.6%;
  height: 17rem;
  object-fit: cover;
}

.receive-card--right-photo .receive-card-panel{
  width: 60.5%;
}
.receive-card--right-photo .receive-photo{
  right: 0;
  top: -1.3rem;
}

.receive-card--left-photo{
  padding-top: 2rem;
}
.receive-card--left-photo .receive-card-panel{
  width: 65%;
  margin-left: auto;
}
.receive-card--left-photo .receive-photo{
  left: -1rem;
  top: 0;
}
.privacy-box{
  margin-top: 5rem;
  border: none;
  position: relative;
  aspect-ratio: 720 / 645;
  background: url('../images/privacy-box-bg-sp.webp') no-repeat center / contain;
  margin :5.1rem .8rem 0;
}
.privacy-box-content{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 0% 18% 0% 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.privacy-box h4{ color: #fff; font-size:2.2rem; letter-spacing: 0.15em; font-weight:700; margin-bottom:0; line-height: 1.5; }
.privacy-box p{ font-family: var(--font-sans); font-size:1.2rem; color: #fff; line-height:2; padding-right: 0; }

@media (min-width: 900px){
  .section-flow{ padding: 9.7rem 0 10.8rem; }
  .section-flow .center-title.small { margin-top:6.8rem;}
  .steps-grid{  display: grid; grid-template-columns: repeat(4,1fr); gap: 3rem; margin: 4.4rem auto 0; max-width: 104.6rem; }
  .step-card h3{ font-size:1.55rem; }
  .step-card p{ font-size:1.6rem; padding: 0; }
  .step-card{
    display: flex;
    flex-direction: column;
  }
  .step-card-body{
    display: contents;
    padding: 0;
  }

  .step-heading{
    order: -1;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
    min-height: 7.6rem;
    gap: .4rem;
  }

  .step-heading h3{
    font-size: 2.2rem;
    order: 1;
    letter-spacing: -0.02em;
  }
  .step-heading h3 small { font-size: 1.4rem; }
  .step-num{
    order: 0;
    height: 7.6rem;
    font-size: 2.3rem;
  }

  .step-photo{
    order: 0;
    flex: none;
    width: 100%;
    height: 18rem;
    aspect-ratio: auto;
    margin-bottom: 0.9rem;
  }
  .step-photo img{
    object-fit: cover;
  }
  .step-card-body p,
  .step-card > p{
    order: 1;
  }
  .step-card:not(:last-child)::after { background: url('../images/flow-dots.webp') no-repeat center / contain; width: 1.5rem; height: .8rem; left: 107%; bottom: 30.5rem; }
  .flow-arrow { margin: 4.2rem 0 -3rem; }

  .receive-grid{
    flex-direction: row;
    max-width: 119rem;
    margin-top: 8rem;
    margin-left: auto;
    margin-right: auto;
    gap: 8rem;   
	justify-content: center;
  }

  .receive-card{
    width: 76.7rem;
    flex: 0 0 76.6rem; 
  }
  .receive-photo {
    width: 28rem;
    height: 28rem;
  }
  .receive-card--right-photo .receive-card-panel { width: 60%;}
  .receive-card--right-photo .receive-card-panel {
    width: 80.7%;
    margin-right: auto;
    margin-left: 0;
  }
  .receive-card--right-photo { padding: 0;}
  .receive-card--right-photo .receive-photo {
    left: auto;
    right: 0;
    top: -4rem;
  }
  .receive-card h4  { font-size: 2rem; padding: 1.8rem 3.8rem; letter-spacing: 0.3em; }
  .receive-card h4 span { font-size: 2.8rem;}
  .receive-grid .receive-card:nth-of-type(2) h4 { font-size: 2rem; padding: 1.8rem 2.7rem; }
  .receive-card .check-list { padding: 2.3rem .3rem 0 2.7rem; }
  .receive-grid .receive-card:nth-of-type(1) .check-list { padding: 3.2rem .3rem 2.7rem 4.3rem; }
  .section-flow .img-check li { font-size: 1.6rem; padding-left: 2.2rem; margin-bottom:2.9rem;}
  .section-flow .receive-grid .receive-card:nth-of-type(2) .img-check li { margin-bottom: 1.9rem; }
  .privacy-box{
    aspect-ratio: 1802 / 522;        
    background-image: url('../images/privacy-box-bg.webp');
    background-size: cover;
    background-position: center;
    max-width: 90rem;              
    margin: 7.8rem auto 0;
  }

  .privacy-box-content{
    padding: 0 30% 0 5%;           
    justify-content: center;
    gap: 2.8rem;
  }

  .privacy-box h4{
    font-size: 2.7rem;
    line-height: 1.6;
  }

  .privacy-box p{
    font-size: 1.6rem;
    line-height: 1.9;
  }
}

/* =============================================================
   PRICE HERO (最安値)
   ============================================================= */
.section-price-hero{
  padding: 4.6rem 0 7.3rem;
  position:relative; overflow:hidden;
}

.section-price-hero .inner {
  padding: 0;
  position:relative; z-index:1;
}

.price-hero-line{
  width: 100%;
  height: 0.5rem;
  background: linear-gradient(90deg, #FFFFFF 0%, #CCE3E7 50%, #FFFFFF 100%);
}

.section-price-hero .center-note {
  color: #000;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
}
.section-price-hero .center-title {
  font-size: 2.7rem;
  font-weight: 400;
  margin-bottom: 0.4rem;
}
.section-price-hero  h2 span {
  font-size: 3.5rem;
  letter-spacing: 0.3em;
  line-height: 0.8;
}
.price-cards{ margin: 4.1rem .7rem 0; }

.price-card-row{
  position: relative;         /* タグの絶対配置の基準 */
  padding: 1.5rem .6rem 1.5rem 1.9rem;
  text-align: left;
  background: #fff;
  font-family: var(--font-sans);
  border: none;
}
/* 左・右・下の線 */
.price-card-row::after{
  content: "";
  position: absolute;
  inset: 0;
  border: #C4C4C4 1px solid;
  border-top: none;
  pointer-events: none;
}

/* 上の線（タグの左側部分） */
.price-card-row::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  border-top: #C4C4C4 1px solid;
  pointer-events: none;
}

/* 上の線（テキストの右側〜カード右端） */
.price-card-tag-row::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 33rem; 
  border-top: #C4C4C4 1px solid;
  pointer-events: none;
}
.price-card-row:first-child{
  margin-bottom: 0;
}
.price-card-row + .price-card-row{
  margin-top: 3.8rem;
}
.price-card-tag-row{
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: -3.4rem;
  margin-left: 3rem;
  justify-content: flex-start;
}
.price-card-tag{
  display:inline-block;
  background: #024B57;
  color:#fff;
  font-size:1.8rem;
  font-weight: 600;
  padding: 0.85rem 1.12rem;
  line-height: 1;
  letter-spacing: 0.2em;
  flex-shrink: 0;
  margin-bottom: 0;
}
.price-card-tag strong{ font-size:1.4rem; }
.price-card-dose-info{
  padding-left: 0;
  text-align: center;
  font-size: 2.4rem;
  color: #024B57;
  font-weight: 600;  
  line-height: 1.5;
}
.price-card-dose-info small{
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}

.price-card-main{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.8rem;
}
.price-card-unit {
  font-size: 1.5rem;
  font-weight: 600;
  color: #024B57;
  margin-top: .7rem;
  position: relative;
  display: inline-block;
  z-index: 0;
}
.price-card-unit::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.3rem;
  height: 1.2rem;
  background: #CBE2E6;
  z-index: -1;
}
.price-card-value{ font-size:5rem; font-weight:600; color: #024B57; display: flex; align-items: center; line-height: 1; gap: .8rem; }
.price-card-value span{ font-size:1.2rem; font-weight:600; vertical-align: top; margin-right:0.2rem; text-align: center; }
.price-card-value-unit{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
  margin-left: 0.4rem;
}
.price-card-value-unit .unit-yen{
  font-size: 2.5rem;
  line-height: 1;
}
.price-card-img{ width: 14.3rem; height: 6.1rem; flex-shrink: 0; box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.25); }
.price-card-note{
  font-size: 1.2rem;
  color: #024B57;
  margin-top: 2.6rem;
  font-weight: 600;
  line-height: 2;
  text-align: left;
}
.reason-panel{
  margin: 3.4rem .7rem 0;
  padding: 6rem 5.5rem 5.4rem;
  background-image: url('../images/reason-panel-bg-sp.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.reason-panel h3{ text-align:center; color: #024B57; font-size:2.7rem; margin-bottom:3rem; font-weight:700; line-height: 1.5; letter-spacing: 0.15em; }

.reason-panel h3 span {
  font-size: 2rem;
}

.reason-panel p{ font-size:1.2rem; color: #222A26; line-height:1.75; font-family: var(--font-sans);  }

.price-table-help-title{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  align-self: flex-start;
  text-align: left;
}
.price-table-help-num{
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

@media (min-width: 768px){
  .section-price-hero{ padding: 10rem 0 7.1rem; }
  .section-price-hero .center-note { font-size:2.2rem; margin-top: .5rem; }
  .section-price-hero .center-title { font-size:2.5rem; letter-spacing: 0.2em; margin-bottom: 1.2rem;} 
  .section-price-hero h2 span { font-size:3.8rem; }
  .price-hero-line { 
    width: 57rem; margin: 0 auto;
    background: linear-gradient(90deg, #FFFFFF 0%, #DCEBEE 50%, #FFFFFF 100%);
  }
  .price-cards{ flex-direction: row; gap: 3rem; max-width: 104.8rem; margin: 3rem auto 0; }
  .price-card-single{
    display: flex;
    flex-direction: row;
    gap: 4.1rem;
    align-items: stretch;
    margin-top: 6rem;
  }
  .price-card-row{
    flex: 1;
    min-width: 0;
    padding: 2.4rem 2.7rem; 
  }
  .price-card-row + .price-card-row{
    margin-top: 0;
  }
  .price-card-main { justify-content: center; gap: 1.7rem;}
  .price-card-value{ font-size:6.9rem; }
  .price-card-value span { font-size:1.5rem; }
  .price-card-value-unit .unit-yen { font-size:3.4rem; }
  .price-card-unit { font-size:2rem; }
  .price-card-unit::before { height: 1.6rem;}
  .price-card-note { font-size:1.5rem; margin-top: 2.6rem; }
  .price-card-dose-info { font-size: 3.3rem;}
  .price-card-dose-info small { font-size: 1.5rem;}
  .price-card-tag { font-size: 2.4rem; padding: 1.3rem 2.1rem;}
  .price-card-tag-row { margin-top: -4.8rem; margin-left: 5.3rem;}
  .price-card-row::before { width: 3.7rem;}
  .price-card-tag-row::after { left: 46.5rem; }
  .price-card-img { width: 16.6rem; height: 7.2rem; margin-top: 1.3rem;}

  .reason-panel{ 
    max-width: 91.4rem; 
    margin: 6.7rem auto 0; 
    padding: 6.7rem 10.5rem 6.4rem;  
    background-image: url('../images/reason-panel-bg.webp');
  }
  .reason-panel h3,.reason-panel h3 span { font-size:3.8rem; margin-bottom: 2.5rem; }
  .reason-panel p{ font-size:1.6rem; letter-spacing: 0.05em; line-height: 2; }
}

/* =============================================================
   PRICE TABLE
   ============================================================= */
.section-price .inner { padding: 0 .75rem; }
.price-table-grid{ display:grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.7rem; }

.price-table-card{
  border: none;
  background: #fff;
  min-width: 0; 
}

.price-table-head{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 6rem;
  padding: 0 1.2rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.price-table-head--01{ background-image: url('../images/price-title02.webp'); min-height: 6.7rem; }
.price-table-head--02{ background-image: url('../images/price-title03.webp'); min-height: 6.7rem; }
.price-table-head--03{ background-image: url('../images/price-title04.webp'); }
.price-table-head--04{ background-image: url('../images/price-title05.webp'); }
.price-table-head--05{ background-image: url('../images/price-title06.webp'); min-height: 7.1rem; }

.price-table-title{
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}

.price-table-head--01 .price-table-title {
  margin-bottom: 1rem;
}

.price-table-title small{
  display: block;
  font-weight: 400;
  font-size: 1.05rem;
}

.price-table-row{
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  align-items: center;
  gap: 0;
  padding: 1.3rem 1.4rem 1.2rem 0;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.20);
}
.price-table-row .dose{
  background: #338F9E;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  padding: 2.6rem 1.6rem;
  border-radius: 0 0.4rem 0.4rem 0;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.2;
}
.price-table-row .qty{
  font-size: 1.6rem;
  font-weight: 400;
  color: #000;
  flex: 1;
  line-height: 1.5;
  text-align: center;
  margin-top: 1.5rem;
}
.price-table-row .qty small{
  display: block;
  font-size: 1.2rem;
}
.price-table-amount-block {
  margin-top: 1.3rem;
  min-width: 0;  
}
.price-table-row .price-table-amount-block + .price-table-amount-block{
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 0.6rem;
}
.price-table-row .amount{
  font-size: 4.1rem;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.05em;
  text-align: right;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 1;      
  min-width: 0;         
  max-width: 100%;     
}

.price-table-row .price-table-amount-block + .price-table-amount-block .amount{
  font-size: 2.8rem;
}
.price-table-row .amount small{
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.price-table-row .dose--alt{
  background: #5BC8DA;
}

.price-table-per{
  font-size: 1.3rem;
  font-weight: 400;
  color: #000;
  line-height: 1.6;
  background-image: linear-gradient(#DAEAEB, #DAEAEB);
  background-repeat: no-repeat;
  background-position: 0 75%;
  margin-top: .6rem;
  text-align: center;
  letter-spacing: 0.05em;
}

.price-table-per--alt{
  background-image: linear-gradient(#E6FAFD, #E6FAFD);
}

.price-table-help{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 2.7rem 1.8rem 0;
  font-family: var(--font-sans);
}
.price-table-help span{ font-size:1.6rem; font-weight: 600; color: #024B57;  line-height:1.5; letter-spacing: 0.12em; }
.price-table-help p:nth-of-type(2){
  color: #000; letter-spacing: 0.025em; font-size: 1.3rem; font-weight: 400; margin-top: 1rem; line-height: 1.5; text-align: left;
}

.price-table-help a{
  font-size:1.2rem;
  color: #024B57;
  font-weight:500;
  letter-spacing: 0.12em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  border-bottom: 1px solid #024B57;
  padding-bottom: 0.4rem;
  line-height: 1.1;
  margin-top: -1rem;
}

.price-table-help a::after{
  content: "";
  display: inline-block;
  width: .4rem;
  height: .7rem;
  background: url('../images/arrow.svg') no-repeat center / contain;
  flex-shrink: 0;
}

.amount .amount-unit{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.3rem;
  line-height: 0.6;
}

/* ---------- 1錠 / 10錠セット 2カラム表示 ---------- */
.price-table-qty-block{
  flex: 1;
  min-width: 0;
  text-align: center;
}
.price-table-qty-label{
  font-size: 1.6rem;
  color: #000;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: left;
  margin-left: 2.4rem;  
}
.price-table-amount-sm{
  font-size: 3.4rem;
  font-weight: 400;
  color: #000;
  line-height: .8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin: 0;
}
.amount-unit-sm{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  line-height: .7;
}

.price-table-qty-block .price-table-per{
  margin-top: 0.8rem;
  width: 14rem;
}

.amount-unit-sm .yen-sm{
  font-size: 1.3rem;
}

@media (min-width: 900px){
  .section-price { padding: 10rem 0 0;}
  .price-table-grid{ 
    grid-template-columns: repeat(2,1fr); 
    column-gap: 6rem; 
    row-gap: 2.3rem;
    width: 78.2rem;
    margin: 0 auto; 
  }
  .price-table-title{ font-size: 1.8rem; }
  .price-table-title small { font-size:1.6rem; letter-spacing: 0.05em; margin-top: .3rem; }
  .price-table-row { padding: 1rem 1.4rem 1rem 0;}
  .price-table-row .amount{ font-size:3.4rem; justify-content: center; letter-spacing: 0; }
  .price-table-row .qty { margin-left: -.8rem; margin-top: 1.2rem;}
  .price-table-qty-block:nth-of-type(1) .price-table-amount-sm{
    max-width: 13rem; margin-bottom: 1rem;
  }
  .price-table-qty-label{ font-size: 1.3rem; }
  .price-table-help span { font-size: 1.9rem; }
  .price-table-help p:nth-of-type(2) { font-size: 1.5rem; }
  .price-table-help a  { font-size: 1.6rem; gap: 0.1rem;}
}

/* =============================================================
   お試しセット イントロ
   ============================================================= */
.price-intro{
  margin-top: 3.2rem;
}
.price-intro-tag{
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 1.5rem;
  color: #026272;
  margin-bottom: .8rem;
}
.price-intro-tag::before{
  content: "";
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
  margin-top: -2.3rem; 
  background: url('../images/price-hukidashi.svg') no-repeat center / contain;
}

.price-intro-card{
  position: relative;
  color: #fff;
  padding: 0;              
  overflow: visible;
  font-family: var(--font-serif);
}

.price-intro-head{
  position: relative;
  background-image: url('../images/price-title01-sp.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top; 
  min-height: 8rem;                
  padding: 1.6rem 1.8rem 1.8rem;
}

.price-intro-head-text{
  position: relative;
  z-index: 1;
  max-width: 85%;
}

.price-intro-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.1rem;
  padding: 1.4rem .3rem 1.4rem 1rem;
  background: #fff;
  border-top: none;     
  color: #000;    
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.20);       
}

.price-intro-lead{
  font-size: 1.6rem;
  letter-spacing: 0.05em;
}
.price-intro-title{
  font-size: 1.9rem;
  letter-spacing: 0.05em;
  line-height: 1.4;
  font-weight: 400;
}

.price-intro-img{
  display: none;
}

.price-intro-list li{
  font-size: 1.2rem;
  line-height: 1.9;
}
.price-intro-value{
  font-size: 5.2rem;
  line-height: 1;
  display: flex;
  align-items: end;
  gap: 0;
  flex-shrink: 0;
  letter-spacing: -0.06em;
}
.price-intro-value-unit{
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.04em;
}

.price-intro-value-unit .intro-unit-yen{
  font-size: 2.3rem;
  line-height: 1;
}

@media (min-width: 768px){
  .price-intro {margin-top: 6.2rem;}
  .price-intro-tag {justify-content: center; font-size: 1.7rem; letter-spacing: 0.3em; margin-bottom: 0;}
  .price-intro-tag::before { padding-right: 2rem; }
  .price-intro-card{ 
    max-width: 78.2rem; 
    margin: -.7rem auto;
    padding: 0 0 2.3rem;}
  .price-intro-head{
    position: relative;
    background-image: url('../images/price-title01.webp');
    min-height: 7rem;                
    padding: 2.8rem 2.1rem 1.8rem;
  }
  .price-intro-head-text{
    display: flex;
    align-items: baseline;
    gap: 0;
    line-height: 1;
  }    
  .price-intro-lead { font-size: 1.8rem;}
  .price-intro-title{ font-size: 1.8rem; }
  .price-intro-body { padding: 2rem 1.5rem 2rem 2.2rem; }
  .price-intro-list li{ font-size: 1.4rem; line-height: 1.3; letter-spacing: 0.05em; }
  .price-intro-value { font-size: 5.2rem; letter-spacing: 0.05em;}

  .price-table-grid .price-table-card:nth-child(5){
    position: relative;
  }
  .price-table-grid .price-table-card:nth-child(5) .price-table-help{
    position: absolute;
    top: 0;
    left: calc(100% + 6rem);
    width: calc((78.2rem - 6rem) / 2);
    padding: 2rem 0 0;
  }
}

/* =============================================================
   FAQ
   ============================================================= */
.section-faq{ background: #fff; padding-top: 9rem; }
.section-faq .inner {padding: 0 .7rem 7rem;}
.section-faq .center-title { font-size: 2.2rem; letter-spacing: 0.15em;}
.faq-list{ margin-top: 3.3rem; }
.faq-item{
  border-left: 0.5px solid #7F969A;
  border-right: 0.5px solid #7F969A;
  border-bottom: 0.5px solid #7F969A;
  position: relative;   
}
.faq-item:first-child{
  border-top: 0.5px solid #7F969A;
}
.faq-item::before,
.faq-item::after{
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: #7F969A;
  z-index: 2;
}
.faq-item::before{ top: -0.3rem; left: -0.3rem; }
.faq-item::after{ top: -0.3rem; right: -0.3rem; }
.faq-item:last-child{
  position: relative;
}
.faq-item:last-child .faq-corner{
  display: block;
}
.faq-corner{
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: #7F969A;
  z-index: 2;
}
.faq-corner--bl{ bottom: -0.3rem; left: -0.3rem; }
.faq-corner--br{ bottom: -0.3rem; right: -0.3rem; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: 1.4rem;
  padding: 1.4rem 1.3rem; text-align:left; font-size:1.5rem; color: #024B57; line-height:1.5; letter-spacing: 0.05em; height: 9.2rem;
}
.faq-icon{ position:relative; width:1.5rem; height:1.5rem; flex-shrink:0; }
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; background: #7F969A; top:50%; left:50%;
  transform: translate(-50%,-50%);
}
.faq-icon::before{ width:1.5rem; height:0.1rem; }
.faq-icon::after{ width:0.1rem; height:1.5rem; transition: opacity .2s ease; }
.faq-item.is-open .faq-icon::after{ opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.faq-item.is-open .faq-a{ max-height: 40rem; }
.faq-a p{
  font-size:1.2rem; color: #024B57; line-height:1.5;
  padding: .95rem 0 1.8rem;  
  margin: 0 1.3rem;               
  border-top: 0.5px solid #7F969A;
  letter-spacing: 0.05em;
}

@media (min-width: 768px){
  .section-faq { padding-top: 10rem;}
  .section-faq .inner { max-width: 90rem;}
  .section-faq .center-title { font-size: 3.8rem;}
  .faq-q{ font-size:1.8rem; padding: 1.3rem 5rem 0 3.6rem;     align-items: flex-start;}
  .faq-a p{ font-size:1.6rem; padding: 3.1rem 0.6rem 2.4rem; }
  .faq-icon { margin-top: 3rem;}
}

/* =============================================================
   処方できない場合 (light diagonal)
   ============================================================= */
.section-caution-light{
  background: #0C404B;
  padding: 0;
  position:relative; overflow:hidden;
}
.section-caution-light .section-bg-img {
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.25));
}

.section-caution-light .inner{
  padding: 4.8rem 2rem 10rem;
  position:relative; z-index:1;
}

.section-caution-light .center-lead{
  text-align:left;
  color: #000;
  margin-top: 1.2rem;
  line-height: 1.7;
  letter-spacing: 0.025em;
}

.section-caution-light .center-title{
  padding: .7rem 0;
  color: #024B57;
}
.section-caution-light .center-title::before,
.section-caution-light .center-title::after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #006475;     
}
.section-caution-light .center-title::before{
  top: 0;
}
.section-caution-light .center-title::after{
  bottom: 0;
}
 
.ng-grid{ display:flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.ng-col h3{ font-size:1.6rem; color: #024B57; font-weight:700; margin-bottom:.3rem; display:flex; align-items:center; gap:0.8rem; }
.ng-icon{
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
  flex-shrink: 0;
}
.ng-note{ font-size:1.2rem; color:#000000; line-height: 1.6; letter-spacing: 0.025em; }
.ng-list li{ font-size:1.2rem; color: #000000; padding-left: 1.4rem; position:relative; line-height: 1.6; letter-spacing: 0.025em; }

.ng-list li::before{ content:"・"; position:absolute; left:0; }

@media (min-width: 900px){
  .section-caution-light .inner { padding: 9.1rem 2rem 21rem;}
  .ng-grid{ flex-direction: row; gap: 6rem; }
  .ng-col{ flex:1; }
  .ng-col h3{ font-size:2.2rem; letter-spacing: 0.025em;         margin-bottom: 1.2rem; }
  .ng-note, .ng-list li{ font-size:1.6rem; line-height: 2.5; letter-spacing: 0.025em; }
  .section-caution-light .center-title{ font-size: 3.8rem; letter-spacing: 0.05em; width: 56rem; margin: 0 auto 3rem; }
  .section-caution-light .center-lead { font-size: 1.8rem;}
}

/* =============================================================
   FINAL CTA (flat image)
   ============================================================= */
.section-final-flat{
  background: #121212;
  position: relative; 
}
.section-final-flat picture, .section-final-flat img{ width:100%; display:block; }

.section-final-flat .inner{
  position: absolute;   
  left: 0;
  right: 0;
  bottom: 4rem;        
  z-index: 1;
  padding: 0 1.7rem;
}
.section-final-flat .cta-buttons{ margin-top: 0; }

@media (min-width: 900px){
  .section-final-flat .cta-buttons{ margin-bottom: 6rem; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer{ background: #121212; color:#c9c9c9; }
.site-footer .inner { padding: 5.3rem 2rem 2rem;}
.footer-logo{ width: 100%; }
.footer-logo .logo-en{ color:#fff; }
.footer-logo .logo-jp{ color:#fff; }
.footer-logo .logo-sub{ color:#fff; }
.footer-logo-img{ height: auto; width:auto; }
.footer-name{ font-size:2rem; color:#fff; margin: 1.9rem 0 ; }
.footer-clinics{ display:flex; flex-direction: column; gap: 1rem; }
.footer-clinic-name{
  display:inline-block; border: #fff solid 1px; color:#fff; padding:0.2rem 1.5rem; margin-bottom:0.8rem;
}
.footer-clinic p{ font-size:1.2rem; line-height:1.3; color:#fff; margin-bottom:0.6rem; }
.footer-clinic p:first-child {font-size:1.3rem; letter-spacing: 0; line-height: 1.2;}
.footer-tel{
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;    
  font-size:1.5rem !important; color:#fff !important; font-weight:700;
}
.footer-tel-icon{
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
  flex-shrink: 0; 
}
.footer-copy{ font-family: var(--font-sans); font-size:1.2rem; color:#fff; margin-top: 9.7rem; letter-spacing: 0.07em; line-height: 1.5;}

@media (min-width: 900px){
  .footer-clinics{ max-width: 80rem; flex-direction: row; gap: 8rem; }
  .footer-clinic{ flex:1; }
  .site-footer .inner { padding: 3.2rem 0 7.5rem;}
  .footer-logo-img{ height:7rem; } 
  .footer-name { font-size:2.5rem; margin: 1rem 0 3.6rem;}
  .footer-clinic p { font-size: 1.4rem; }
  .footer-clinic p:first-child {font-size:1.5rem; letter-spacing: 0.2em; line-height: 1.2;}
  .footer-clinic p:nth-child(3){　font-size: 1.3rem; letter-spacing: -0.02em;　}
  .footer-tel { font-size: 1.7rem!important;}
  .footer-tel-icon { width: 2.1rem; height: 2.1rem; }
  .footer-copy{ text-align:left; margin-top: 8.3rem; }
}

/* =============================================================
   FLOATING CTA
   ============================================================= */
.floating-cta{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 150;
  width: 7.4rem; height:7.4rem; border-radius:50%;
  background: linear-gradient(160deg,#0d5c68,#083a42);
  color:#fff; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size: 1rem; line-height:1.4; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  border: 0.2rem solid rgba(255,255,255,.5);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
  transform: scale(.8);
}
.floating-cta.is-visible{ opacity:1; pointer-events:auto; transform: scale(1); }
@media (min-width: 900px){ .floating-cta{ display:none; } }

/* =============================================================
   COMMON: 画像ボタン・全面背景画像パターン
   ============================================================= */
.section-bg-img{
  position:absolute; inset:0; z-index:0; line-height:0;
}
.section-bg-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.img-btn{ display:block; line-height:0; }
.img-btn img{ width:100%; display:block; }

/* ---------- HERO (flat image) ---------- */
.hero-flat{ line-height:0; background: #071511; }
.hero-flat img{ width:100%; display:block; }