* {
  box-sizing:border-box;
  margin:0;
  padding:0
}

html {
  scroll-behavior:smooth
}

body {
  font-family:"Inter","Noto Sans JP",sans-serif;
  color:#111;
  background:#fff;
  overflow-x:hidden
}

a {
  text-decoration:none;
  color:inherit
}

.site-header {
  position:fixed;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  width:min(1040px,86vw);
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  border:1px solid rgba(17,17,17,.08);
  border-radius:999px;
  box-shadow:0 18px 50px rgba(0,0,0,.08);
  z-index:100
}

.logo {
  font-size:26px;
  font-weight:900;
  letter-spacing:.04em;
  color:#12a847
}

.nav {
  display:flex;
  gap:28px;
  font-size:13px;
  font-weight:800
}

.header-cta {
  padding:12px 18px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:13px;
  font-weight:900
}

.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:150px 7vw 120px;
  overflow:hidden
}

.hero-bg-soft {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 15%,rgba(57,231,95,.18),transparent 28%),radial-gradient(circle at 85% 70%,rgba(57,231,95,.13),transparent 34%),linear-gradient(180deg,#fff 0%,#fbfffc 55%,#f2fff6 100%);
  z-index:-2
}

.hero::after,.soft-blend::after,.section-mint::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:160px;
  background:linear-gradient(to bottom,transparent,#fff);
  pointer-events:none
}

.hero-inner,.section-inner {
  width:min(1120px,86vw);
  margin:0 auto
}

.hero-inner {
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:70px;
  align-items:center
}

.eyebrow {
  color:#13a94a;
  font-weight:900;
  letter-spacing:.18em;
  font-size:12px;
  margin-bottom:22px
}

.hero h1,.section h2,.final-cta h2 {
  font-size:clamp(46px,7vw,92px);
  line-height:1.04;
  letter-spacing:-.07em;
  font-weight:900
}

.lead {
  font-size:22px;
  font-weight:800;
  margin-top:28px
}

.sublead {
  color:#5f6661;
  line-height:2;
  margin-top:18px;
  max-width:560px
}

.hero-actions {
  display:flex;
  gap:14px;
  margin-top:36px;
  flex-wrap:wrap
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:16px 26px;
  font-weight:900;
  transition:.35s cubic-bezier(.2,.8,.2,1)
}

.btn-primary {
  background:#17c954;
  color:#fff;
  box-shadow:0 18px 40px rgba(23,201,84,.28)
}

.btn-outline {
  border:1px solid rgba(17,17,17,.12);
  background:#fff;
  color:#111
}

.btn:hover {
  transform:translateY(-4px)
}

.big {
  font-size:18px;
  padding:20px 34px
}

.hero-visual {
  position:relative;
  height:580px
}

.photo-slider {
  position:absolute;
  inset:25px 0 0 20px;
  border-radius:38px;
  overflow:hidden;
  box-shadow:0 35px 90px rgba(0,0,0,.14);
  background:#eaf8ee
}

.slide {
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.05);
  transition:opacity 1.4s ease,transform 5s ease
}

.slide.is-active {
  opacity:1;
  transform:scale(1)
}

.slide img {
  width:100%;
  height:100%;
  object-fit:cover
}

.photo-slider::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.28))
}

.floating-card {
  position:absolute;
  padding:16px 20px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-radius:18px;
  border:1px solid rgba(17,17,17,.08);
  font-weight:900;
  box-shadow:0 20px 45px rgba(0,0,0,.1);
  animation:float 5s ease-in-out infinite
}

.card-a {
  top:70px;
  right:-18px
}

.card-b {
  left:-10px;
  bottom:95px;
  animation-delay:1s
}

.section {
  position:relative;
  padding:150px 0
}

.section-mint {
  background:linear-gradient(180deg,#fff 0%,#effdf4 45%,#fff 100%)
}

.section-plain {
  background:#fff
}

.about-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:center
}

.profile-card {
  padding:14px;
  border-radius:34px;
  background:#f4fff7;
  box-shadow:0 18px 50px rgba(23,201,84,.08)
}

.profile-photo {
  height:430px;
  border-radius:28px;
  background:linear-gradient(135deg,#e9fff0,#f8fffb);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#18b650;
  font-size:52px;
  font-weight:900;
  letter-spacing:.03em
}

.about-text h2,.section-heading h2,.flow-title {
  font-size:clamp(36px,5vw,66px);
  line-height:1.08;
  letter-spacing:-.06em;
  margin-bottom:28px
}

/* ▼ price-copy h2 を独立させてサイズを小さくする */
.price-copy h2 {
  font-size:clamp(26px,3vw,44px);
  line-height:1.15;
  letter-spacing:-.04em;
  margin-bottom:28px;
  font-weight:900
}

.about-text p,.section-heading p,.price-copy p {
  color:#4d554f;
  line-height:2;
  font-weight:600;
  margin-bottom:18px
}

.tag-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:28px
}

.tag-row span {
  border:1px solid rgba(17,17,17,.12);
  border-radius:999px;
  padding:10px 16px;
  font-weight:900;
  background:#fff
}

.section-heading {
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:60px
}

.service-layout {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:22px
}

.service-main {
  background:#111;
  color:#fff;
  border-radius:30px;
  padding:46px;
  min-height:310px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:0 30px 80px rgba(0,0,0,.13)
}

.service-main span {
  font-size:48px;
  color:#39e75f;
  font-weight:900
}

.service-main h3 {
  font-size:34px;
  margin:18px 0
}

.service-main p {
  line-height:1.9;
  color:#d7d7d7
}

.service-mini {
  display:grid;
  gap:18px
}

.service-mini article,.work-card,.flow-item,.price-card {
  background:rgba(255,255,255,.9);
  border:1px solid rgba(17,17,17,.08);
  border-radius:26px;
  box-shadow:0 18px 50px rgba(0,0,0,.06)
}

.service-mini article {
  padding:28px
}

.service-mini h3 {
  font-size:22px;
  margin-bottom:10px
}

.service-mini p,.work-body p,.flow-item p {
  color:#66706a;
  line-height:1.8;
  font-weight:600
}

.works-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}

.stagger-grid .work-card:nth-child(2) {
  margin-top:42px
}

.stagger-grid .work-card:nth-child(3) {
  margin-top:18px
}

.work-card {
  overflow:hidden;
  transition:.35s
}

.work-card:hover {
  transform:translateY(-8px)
}

.work-thumb {
  height:210px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:900
}

.work-thumb.dark {
  background:#111;
  color:#39e75f
}

.work-thumb.light {
  background:#f6f6f6;
  color:#13a94a
}

.work-thumb.mint {
  background:#ecfff2;
  color:#111
}

.work-body {
  padding:26px
}

.work-body h3 {
  font-size:23px;
  margin-bottom:8px
}

.work-body a {
  display:inline-block;
  color:#12a847;
  font-weight:900;
  margin-top:16px
}

.flow-list {
  display:grid;
  gap:18px;
  margin-top:50px
}

.flow-item {
  display:grid;
  grid-template-columns:90px 180px 1fr;
  align-items:center;
  padding:26px 30px
}

.flow-item span {
  font-size:26px;
  color:#13a94a;
  font-weight:900
}

.flow-item h3 {
  font-size:22px
}

.price-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center
}

.price-card {
  padding:44px
}

.price-label {
  font-weight:900;
  color:#13a94a;
  letter-spacing:.08em;
  margin-bottom:12px
}

.price-card strong {
  display:block;
  font-size:clamp(54px,7vw,88px);
  letter-spacing:-.06em;
  margin-bottom:24px
}

.price-card ul {
  columns:2;
  list-style:none;
  margin-bottom:32px
}

.price-card li {
  break-inside:avoid;
  padding:10px 0;
  color:#303832;
  font-weight:800
}

.price-card li::before {
  content:"✓";
  color:#13a94a;
  margin-right:10px
}

.final-cta {
  position:relative;
  padding:160px 7vw;
  background:linear-gradient(135deg,#111,#07120b);
  color:#fff;
  text-align:center;
  overflow:hidden
}

.final-cta::before {
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 30% 30%,rgba(57,231,95,.25),transparent 30%),radial-gradient(circle at 75% 75%,rgba(57,231,95,.16),transparent 32%);
  animation:pulse 8s ease-in-out infinite
}

.final-cta-inner {
  position:relative;
  width:min(850px,86vw);
  margin:0 auto
}

.final-cta p:not(.eyebrow) {
  color:#d1ddd5;
  line-height:2;
  margin:24px auto 36px;
  max-width:680px
}

.reveal-up,.reveal-left,.reveal-right {
  opacity:0;
  transition:1s cubic-bezier(.2,.8,.2,1)
}

.reveal-up {
  transform:translateY(50px)
}

.reveal-left {
  transform:translateX(-50px)
}

.reveal-right {
  transform:translateX(50px)
}

.is-visible {
  opacity:1;
  transform:translate(0,0)
}

.delay-1 {
  transition-delay:.12s
}

.delay-2 {
  transition-delay:.24s
}

@keyframes float {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-18px)
  }
}

@keyframes pulse {
  0%,100% {
    transform:scale(1)
  }
  50% {
    transform:scale(1.08)
  }
}

@media(max-width:900px) {
  .site-header {
    top:14px;
    width:92vw
  }
  .nav {
    display:none
  }
  .header-cta {
    display:none
  }
  .hero {
    padding-top:120px
  }
  .hero-inner,.about-grid,.section-heading,.service-layout,.price-grid {
    grid-template-columns:1fr;
    gap:38px
  }
  .hero-visual {
    height:420px
  }
  .photo-slider {
    inset:0
  }
  .section {
    padding:100px 0
  }
  .works-grid {
    grid-template-columns:1fr
  }
  .stagger-grid .work-card:nth-child(n) {
    margin-top:0
  }
  .flow-item {
    grid-template-columns:1fr;
    gap:8px
  }
  .price-card ul {
    columns:1
  }
  .hero h1,.section h2,.final-cta h2 {
    letter-spacing:-.04em
  }
}

/* ===== v5 pricing update ===== */

.price-grid-v5 {
  grid-template-columns:.78fr 1.22fr;
  align-items:start
}

.price-note {
  display:grid;
  gap:10px;
  margin-top:28px
}

.price-note span {
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  padding:12px 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  font-weight:900;
  color:#202820;
  box-shadow:0 14px 36px rgba(0,0,0,.04)
}

.price-note span::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#17c954;
  box-shadow:0 0 18px rgba(23,201,84,.55)
}

.plan-stack {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:22px;
  align-items:start
}

.plan-card {
  position:relative;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,17,17,.08);
  border-radius:30px;
  padding:34px;
  box-shadow:0 24px 70px rgba(0,0,0,.07);
  transition:.35s cubic-bezier(.2,.8,.2,1);
  overflow:hidden
}

.plan-card:hover {
  transform:translateY(-8px);
  box-shadow:0 34px 90px rgba(0,0,0,.1)
}

.start-plan {
  background:linear-gradient(180deg,#fff 0%,#f3fff7 100%);
  border-color:rgba(23,201,84,.28);
  box-shadow:0 32px 90px rgba(23,201,84,.15)
}

.mini-plan {
  margin-top:20px
}

.plan-head {
  display:grid;
  gap:10px;
  margin-bottom:18px
}

.plan-badge {
  display:inline-flex;
  width:fit-content;
  padding:8px 12px;
  border-radius:999px;
  background:#eefcf3;
  color:#139b43;
  font-size:12px;
  font-weight:900
}

/* ▼ 価格フォントを小さくしてカードからはみ出ないようにする */
.plan-card strong {
  display:block;
  font-size:clamp(28px,3vw,46px);
  letter-spacing:-.04em;
  margin-bottom:16px
}

.plan-desc {
  color:#59645e;
  line-height:1.8;
  font-weight:700;
  margin-bottom:20px
}

.plan-card ul {
  list-style:none;
  display:grid;
  gap:12px;
  margin:24px 0 28px
}

.plan-card li {
  color:#263028;
  font-weight:900;
  line-height:1.5
}

.plan-card li::before {
  content:"✓";
  color:#13a94a;
  margin-right:10px
}

.small-note {
  font-size:13px;
  color:#6a746d;
  line-height:1.8;
  font-weight:800;
  border-top:1px solid rgba(17,17,17,.08);
  padding-top:16px
}

.recommend-label {
  position:static;
  display:inline-flex;
  width:fit-content;
  padding:7px 11px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:900;
  margin-bottom:8px
}

.start-plan::before {
  content:"";
  position:absolute;
  inset:auto -20% -35% -20%;
  height:180px;
  background:radial-gradient(circle,rgba(57,231,95,.2),transparent 62%);
  pointer-events:none
}

.start-plan>* {
  position:relative
}

.price-card {
  display:none
}

@media(max-width:900px) {
  .price-grid-v5,.plan-stack {
    grid-template-columns:1fr
  }
  .mini-plan {
    margin-top:0
  }
  .plan-card {
    padding:28px
  }
  .price-note span {
    width:100%;
    border-radius:18px
  }
  .recommend-label {
    position:static;
    width:fit-content;
    margin-bottom:14px
  }
}

/* ===== Contact Form 7 Custom ===== */

.wpcf7 {
  max-width: 520px;
  margin: 60px auto 0;
}

.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.wpcf7-form p {
  margin: 0;
}

.wpcf7-form label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #d7ddd9;
  margin-bottom: 10px;
}

.wpcf7 input,
.wpcf7 textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: .3s ease;
}

.wpcf7 textarea {
  min-height: 180px;
  resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: #17c954;
  box-shadow: 0 0 0 4px rgba(23,201,84,.18);
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: rgba(255,255,255,.45);
}

.wpcf7-submit {
  border: none !important;
  background: #17c954 !important;
  color: #fff !important;
  font-weight: 900;
  border-radius: 999px !important;
  padding: 18px 28px !important;
  cursor: pointer;
  transition: .35s ease;
  box-shadow: 0 18px 40px rgba(23,201,84,.28);
}

.wpcf7-submit:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(23,201,84,.4);
}

.wpcf7-spinner {
  filter: brightness(4);
}

.wpcf7-response-output {
  border-radius: 16px;
  margin-top: 20px !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06);
}