*,
*::before,
*::after{box-sizing:border-box}

:root{
  --text:#2f2f2f;
  --muted:#6b665f;
  --orange:#f06a16;
  --linegreen:#24c15e;
  --gold:#b89958;
  --shadow:0 20px 50px rgba(33,27,18,.08);
  --max:1180px
}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Noto Sans JP",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left,rgba(184,153,88,.07),transparent 26%),
    linear-gradient(180deg,#fff 0%,#fbfaf8 100%);
  line-height:1.7;
  padding-bottom:112px
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(calc(100% - 32px),var(--max));margin-inline:auto}

/*
.marble-bg{position:relative;overflow:hidden}
.marble-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,rgba(255,255,255,.96),rgba(243,240,236,.92)),
    radial-gradient(circle at 15% 20%,rgba(184,153,88,.06),transparent 20%),
    radial-gradient(circle at 75% 70%,rgba(184,153,88,.05),transparent 22%)
}
.marble-bg>*{position:relative;z-index:1}
*/

.marble-bg{
  position:relative;
  overflow:hidden;
  background:url("../lp_campaign_2025/images/UHC/bg-marble.jpg") center/cover no-repeat;
}

.marble-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.75);
}

.site-header{
  position:relative;
  top:auto;
  z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(184,153,88,.16)
}

.header-inner,
.hero-grid,
.explain-grid,
.trust-grid,
.access-grid,
.doctor-grid{
  display:grid;
  gap:24px
}
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:0;
  padding:10px 0
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:nowrap
}

.brand-logo{
  width:120px;
  max-width:none;
  height:auto;
  flex-shrink:0;
	margin-right: 10px;
}

.brand-text{
  font-family:"Noto Serif JP",serif;
  font-weight:700;
  letter-spacing:.04em;
  font-size:.9rem;
  white-space:nowrap;
  flex-shrink:0
}

.header-actions,
.hero-actions,
.stack-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap
}
.stack-actions .btn{
	width: 100%;
}
.stack-actions {
	margin: 20px 0;
}

.header-actions{
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:nowrap;
}

.header-btn,
.btn,
.floating-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:700;
  transition:.35s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.08)
}

.header-btn{
  min-height:38px;
  padding:0 12px;
  font-size:.8rem;
  white-space:nowrap;
  background:#fff;
  border:1px solid rgba(184,153,88,.2);
}

.header-btn.reserve,
.btn-orange,
.floating-btn.btn-orange{
  background:linear-gradient(135deg,#ff8f3f 0%,var(--orange) 65%);
  color:#fff;
  border:none
}

.header-btn.line-link,
.btn-line,
.floating-btn.btn-line{
  background:linear-gradient(135deg,#49d97d 0%,var(--linegreen) 65%);
  color:#fff;
  border:none
}

.hero-actions .btn-orange,
.hero-actions .btn-line{
  padding:0 26px;
}
.btn,
.floating-btn{
  min-height:56px;
  padding:0
}

.tel-icon-img{
  width:18px;
  height:18px;
  display:block;
  flex-shrink:0;
}

.tel-round,
.floating-tel-round{
  width:56px;
  min-width:56px;
  height:56px;
  min-height:56px;
  padding:0;
  border-radius:999px;
  background:var(--orange);
  border:none;
  color:#fff;
}

header .tel-round,
.floating-tel-round{
width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
}

.tel-round{
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.floating-tel-round{
  justify-self:center;
}

.btn-tel{
  background: linear-gradient(135deg,#ff8f3f 0%,var(--orange) 65%);
  color:#fff;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
	padding: 15px;
}

.btn-tel .tel-icon-img{
	width: 26px;
	height: 26px;
}

.tel-text-link{
  color:var(--orange);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid rgba(240,106,22,.35);
}

.tel-text-link:hover{
  opacity:.85;
}
.footer-btn{
	width: 24px;
	height: 24px;
}
.hero{padding:56px 0}

.hero-grid{
  grid-template-columns:1.05fr .95fr;
  align-items:center;
}

.eyebrow{
  margin:0 0 10px;
  color:var(--gold);
  font-weight:700;
  letter-spacing:.16em;
  font-size:.8rem;
}

h1{margin:0;line-height:1;padding: 0.2em;}
h2,h3{margin:0;line-height:1.25}
h2{line-height:1.45}
h1{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(2.2rem,5vw,4.4rem);
	text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
	color: #111;
}

h1 span,
.section-heading h2 span{color:#c75d2b}

h1 span{
	font-size: 70%;
	letter-spacing: 1px;
}
.mini{
font-size: 1vw;
  font-family: "Noto Serif JP",serif;
  line-height: 1em;
  margin: 0 0 -3px;
  letter-spacing: 0.5vw;
  padding-left: 0.2vw;
}

.lead{
  font-size:1.05rem;
  color:#222;
  margin:22px 0 12px;
		text-shadow: 1px 1px 1px rgba(255,255,255,1);
}

.note,
.card-note{
  color:#7f786f;
  font-size:.88rem
}

.hero-visual img,
.doctor-photo img{
  width:100%;
  border-radius:28px;
  box-shadow:var(--shadow)
}
.gallery-grid img{
  width:100%;
  border-radius:3px;
  box-shadow:var(--shadow)
}

.hero-visual img{
  aspect-ratio:1080/1350;
  object-fit:cover
}

.trust-band{padding:28px 0;    max-width: 780px;
    margin: auto;}

.trust-grid{grid-template-columns:repeat(3,1fr)}

.trust-card,
.info-card,
.access-card,
.map-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(184,153,88,.18);
  border-radius:12px;
  box-shadow:var(--shadow)
}

.trust-card{
  position:relative;
  overflow:hidden;
  padding:24px 22px;
  display:grid;
  gap:6px;
  align-content:start;
  border-radius:3px;
  box-shadow:0 10px 28px rgba(33,27,18,.05);
  isolation:isolate;
}

.trust-card::after{
  content:"✓";
  position:absolute;
  right:10px;
  bottom:0px;
  font-size:92px;
  line-height:1;
  font-weight:700;
  color:rgba(36,193,94,.18);
  z-index:0;
  pointer-events:none;
}

.trust-card strong,
.trust-card span{
  position:relative;
  z-index:1;
}

.trust-card strong{
  font-size:1rem;
  font-weight:700;
  color:#3c352d
}

.trust-card span{
  font-size:.95rem;
  color:var(--muted)
}

.section-heading{
  text-align:center;
  max-width:760px;
  margin:0 auto 34px
}

.section-heading h2{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(1.7rem,3.5vw,3rem);
  margin-bottom:12px
}

.concerns,
.doctor-section,
.clinic-gallery{
  padding:74px 0
}

.explain,
.access{
  padding:82px 0
}

.chip-grid,
.gallery-grid{
  display:grid;
  gap:18px
}

.chip-grid{grid-template-columns:repeat(4,1fr)}

.chip{
  padding:16px 18px;
  border-radius:3px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(184,153,88,.18);
  border-left:4px solid rgba(184,153,88,.55);
  text-align:left;
  font-weight:700;
  color:#534d45;
  box-shadow:0 8px 20px rgba(33,27,18,.04);
  cursor:default
}

.explain-grid{
  grid-template-columns:1.2fr .4fr;
  align-items:start
}

/* 保険診療の対象？ */
.symptom-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.symptom-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(184,153,88,.18);
  border-radius:3px;
  box-shadow:0 8px 20px rgba(33,27,18,.04);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.symptom-card-image{
  min-height:auto;
}

.symptom-thumb{
  aspect-ratio: 2 / 1;
  overflow:hidden;
  background:#f7f4ef;
}

.symptom-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.symptom-label{
  padding:16px 14px;
  text-align:center;
  font-weight:700;
  font-size:1.05rem;
  color:#534d45;
  line-height:1.45;
}

.symptom-card-image .symptom-label{
  font-size:1.15rem;
	line-height: 1;
}

@media (max-width:1080px){
  .symptom-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:720px){
  .symptom-grid{
    gap:14px;
  }

  .symptom-label{
    padding:14px 10px;
    font-size:1rem;
  }

  .symptom-card-image .symptom-label{
    font-size:1.05rem;
  }
}

@media (max-width:480px){
  .symptom-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .symptom-label{
    font-size:.95rem;
  }

  .symptom-card-image .symptom-label{
    font-size:1rem;
  }
}

/* 繰り返すニキビや肌トラブル */
.check-list{
  list-style:none;
  padding:0;
  margin:24px 0 0;
  display:grid;
  gap:10px
}

.check-list li{
  background:rgba(255,255,255,.75);
  border:1px solid rgba(184,153,88,.16);
  padding:14px 16px;
  border-radius:3px
}

.info-card{padding:28px}

.gold-line{
  width:64px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#dec38d 0%,var(--gold) 100%);
  margin-bottom:16px
}

.info-card h3{
  font-size:1.4rem;
  margin-bottom:16px;
  font-family:"Noto Serif JP",serif
}

.doctor-grid{
  grid-template-columns:.55fr 1.15fr;
  align-items:center
}

.doctor-photo img{
  aspect-ratio:4/5;
  object-fit:cover
}

.doctor-copy h2{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(1.7rem,3vw,2.7rem);
  margin-bottom:16px
}

.doctor-copy h3{
  font-size:1.15rem;
  margin-bottom:16px;
  color:#574e44
}

.gallery-grid{grid-template-columns:repeat(3,1fr)}

.gallery-grid img{
  aspect-ratio:4/3;
  object-fit:cover
}

.access-grid{
  grid-template-columns:.95fr 1.05fr;
  align-items:stretch
}

.access-card,
.map-card{padding:28px}

.access-card h2{
  font-family:"Noto Serif JP",serif;
  margin-bottom:18px;
  font-size:2rem
}

.access-card dl{
  display:grid;
  gap:18px;
  margin:0
}

.access-card dl div{
  display:grid;
  gap:6px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(184,153,88,.18)
}

.access-card dt{
  color:var(--gold);
  font-weight:700
}

.access-card dd{margin:0}

.map-card iframe{
  width:100%;
  height:100%;
  min-height:360px;
  border:0;
  border-radius:18px
}

.floating-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .35s ease,opacity .35s ease
}

.floating-footer-inner{
  width:min(calc(100% - 8px),960px);
  margin:0 auto;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(184,153,88,.22);
  box-shadow:var(--shadow);
  border-radius:999px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px
}

body.show-floating .floating-footer{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto
}

.pagetop{
  position:fixed;
  right:16px;
  bottom:92px;
  z-index:61;
  width:52px;
  height:52px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  cursor:pointer;
  color:#5f564b;
  font-size:22px;
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .35s ease,opacity .35s ease
}

body.show-floating .pagetop{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  animation:revealUp .8s ease forwards
}

.delay-1{animation-delay:.12s}
.delay-2{animation-delay:.24s}

@keyframes revealUp{
  to{
    opacity:1;
    transform:translateY(0)
  }
}

@media (max-width:1080px){
  .hero-grid,
  .explain-grid,
/*  .trust-grid,*/
  .access-grid,
  .doctor-grid{
    grid-template-columns:1fr
  }

  .chip-grid,
  .gallery-grid{
    grid-template-columns:repeat(2,1fr)
  }
}

@media (max-width:720px){
	  .hero{
    padding:32px 0;
  }

  .hero-grid{
    grid-template-columns:1fr;
    position:relative;
    min-height:360px;
  }

  .hero-copy{
    position:relative;
    z-index:2;
    padding:150px 20px 24px;
    border-radius:24px;
    overflow:hidden;
    min-height:360px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.0) 0%,
      rgba(255,255,255,.0) 75%,
      rgba(255,255,255,.4) 100%
    );
  }

  .hero-copy::before{
    content:"";
    position:absolute;
    inset:0;/*
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.58) 32%,
      rgba(255,255,255,.72) 58%,
      rgba(255,255,255,.88) 100%
    );*/
    z-index:-1;
  }

  .hero-visual{
    position:absolute;
    inset:0;
    z-index:1;
  }

  .hero-visual img{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center top;
    border-radius:24px;
    box-shadow:var(--shadow);
    opacity:.92;
  }
	h1 {
  color: #111;
  background: rgba(255,255,255,0.3);

  box-shadow: 0 0 2px rgba(255,255,255,0.3);
  padding-left: 5px;
}
	
	 .trust-grid {
    gap: 12px;
}
	
	.trust-card{
		padding: 20px 18px;
	}
.floating-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.62));
  backdrop-filter:blur(5px);
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .35s ease,opacity .35s ease
}

.floating-footer-inner{
  width:100%;
  margin:0;
  background:rgba(255,255,255,.3);
  border:1px solid rgba(184,153,88,.22);
  box-shadow:var(--shadow);
  border-radius:0;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px
}

.mini{
font-size: 0.6em;
  margin: 0;
	line-height: 2em;
  letter-spacing: 0.5vw;
  padding-left: 0.2vw;
}

}

 /* .chip-grid,
  .gallery-grid{
    grid-template-columns:1fr
  }*/

  .floating-btn{
    width:100%
  }

  .concerns,
  .doctor-section,
  .clinic-gallery,
  .explain,
  .access{
    padding:58px 0
  }

  .pagetop{
    right:12px;
    bottom:104px
  }

@media (max-width:480px){
.trust-grid{grid-template-columns:1fr;}
.hero-actions .btn-orange,
.hero-actions .btn-line{
  padding:0 12px;
}
	.hero-actions {
  gap: 6px;
  flex-wrap: wrap;
}
	.trust-card{
		width: 280px;
		margin: auto;
	}
	.sp-none{
		display: none;
	}
}